@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Work+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#101014;
  --flame:#D94F30;
  --paper:#EFE9DF;
  --dim:rgba(239,233,223,.60);
  --faint:rgba(239,233,223,.38);
  --line:rgba(239,233,223,.15);
  --panel:rgba(239,233,223,.045);
  --bar:78px;
  --geo:'Outfit','Work Sans',system-ui,-apple-system,'Segoe UI','PingFang SC','Noto Sans SC',sans-serif;
  --txt:'Work Sans','Outfit',system-ui,-apple-system,'Segoe UI','PingFang SC','Noto Sans SC',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  background:var(--ink);
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--txt);
  font-size:17px;
  line-height:1.68;
  letter-spacing:.012em;
  overflow-x:hidden;
  padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom,0px) + 26px);
}

body.locked{overflow:hidden}

img{max-width:100%;display:block}
a{color:var(--paper);text-decoration:none}
button{font:inherit;color:inherit}

:focus-visible{
  outline:2px solid var(--flame);
  outline-offset:3px;
}

/* ---------- hero ---------- */

.hero{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  padding:20vh clamp(20px,6vw,84px) 13vh;
  border-bottom:1px solid var(--line);
  scroll-margin-top:0;
}

.layer{
  position:absolute;
  inset:-18% -6% -12%;
  pointer-events:none;
  z-index:0;
  will-change:transform;
}
.layer-a{
  background:
    radial-gradient(58% 46% at 16% 20%,rgba(217,79,48,.38),transparent 68%),
    radial-gradient(40% 34% at 82% 8%,rgba(217,79,48,.20),transparent 70%);
}
.layer-b{
  background:
    radial-gradient(46% 42% at 88% 76%,rgba(239,233,223,.16),transparent 72%),
    linear-gradient(180deg,rgba(16,16,20,0) 42%,rgba(16,16,20,.86) 100%);
}

.hero-media{
  position:absolute;
  inset:-10% 0 -6%;
  margin:0;
  z-index:1;
  background:linear-gradient(200deg,rgba(217,79,48,.14),rgba(16,16,20,.2) 62%);
  will-change:transform;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.44;
  filter:grayscale(.24) contrast(1.08);
}

.hero-copy{
  position:relative;
  z-index:3;
  max-width:22ch;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 clamp(16px,3vw,26px);
  padding:7px 15px;
  font-family:var(--geo);
  font-size:16px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--paper);
  border:1px solid rgba(217,79,48,.62);
  border-radius:18px;
  background:rgba(217,79,48,.14);
  transform:rotate(-1.4deg);
  backdrop-filter:blur(4px);
}
.badge::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--flame);
}

.hero-title{
  margin:0;
  font-family:var(--geo);
  font-weight:600;
  font-size:clamp(2.55rem,8.4vw,6.4rem);
  line-height:.97;
  letter-spacing:-.035em;
  text-wrap:balance;
  color:var(--paper);
}

.hero-foot{
  position:absolute;
  right:clamp(20px,6vw,84px);
  bottom:calc(var(--bar) + 32px);
  z-index:3;
  display:flex;
  gap:7px;
}
.hero-foot span{
  width:2px;
  height:34px;
  background:var(--flame);
  opacity:.7;
}
.hero-foot span:nth-child(2){opacity:.4;height:22px}
.hero-foot span:nth-child(3){opacity:.22;height:14px}

/* ---------- deck ---------- */

.deck{
  display:grid;
  grid-template-columns:minmax(0,1fr) 286px;
  gap:clamp(28px,4.6vw,68px);
  max-width:1160px;
  margin:0 auto;
  padding:clamp(52px,8vw,104px) clamp(20px,6vw,84px) clamp(40px,6vw,72px);
}

.deck-main{
  min-width:0;
  counter-reset:chap;
}

.deck-main > section{
  position:relative;
  padding:clamp(28px,4.4vw,50px) 0 clamp(32px,4.6vw,56px);
  border-top:1px solid var(--line);
  counter-increment:chap;
  scroll-margin-top:20px;
  scroll-margin-bottom:calc(var(--bar) + 30px);
}

.deck-main > section:first-child{border-top:0;padding-top:0}

.deck-main > section::before{
  content:counter(chap,decimal-leading-zero);
  display:block;
  margin-bottom:14px;
  font-family:var(--geo);
  font-size:16px;
  font-weight:500;
  letter-spacing:.34em;
  color:var(--flame);
}

.deck-main > section::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:56px;
  height:2px;
  background:var(--flame);
}

.deck-main h2,
.deck-main h3{
  margin:0 0 .68em;
  font-family:var(--geo);
  font-weight:600;
  font-size:clamp(1.42rem,3vw,2.05rem);
  line-height:1.2;
  letter-spacing:-.018em;
  color:var(--paper);
}
.deck-main h3{font-size:clamp(1.2rem,2.4vw,1.5rem)}

.deck-main h2 > span,
.deck-main h3 > span{
  display:inline-block;
  padding-bottom:.16em;
  border-bottom:2px solid rgba(217,79,48,.5);
}

.deck-main p{
  margin:0 0 1.06em;
  color:rgba(239,233,223,.86);
  max-width:62ch;
}

.deck-main strong{color:var(--paper);font-weight:600}
.deck-main em{color:var(--flame);font-style:normal}

.deck-main ul,
.deck-main ol{
  margin:0 0 1.1em;
  padding-left:1.35em;
  max-width:60ch;
  color:rgba(239,233,223,.86);
}
.deck-main li{margin:0 0 .5em}
.deck-main li::marker{color:var(--flame)}

.deck-main a{
  color:var(--paper);
  border-bottom:1px solid rgba(217,79,48,.7);
  padding-bottom:1px;
}
.deck-main a:hover{border-bottom-color:var(--flame);color:#fff}

.deck-main blockquote{
  margin:0 0 1.2em;
  padding:2px 0 2px 20px;
  border-left:2px solid var(--flame);
  color:var(--dim);
}

.deck-main figure{margin:0 0 1.2em}
.deck-main figcaption{font-size:16px;color:var(--faint);margin-top:8px}

.deck-main img{border-radius:18px;width:100%;height:auto}

.deck-main table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1.2em;
  font-size:16px;
}
.deck-main th,
.deck-main td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.deck-main th{color:var(--flame);font-weight:500}

/* ---------- aside ---------- */

.deck-aside{
  align-self:start;
  position:sticky;
  top:24px;
  display:grid;
  gap:22px;
}

.aside-block{
  padding:20px 18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  border-bottom:2px solid var(--flame);
}

.deck-aside h2{
  margin:0 0 14px;
  font-family:var(--geo);
  font-size:16px;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--paper);
}
.deck-aside h2 > span{
  display:inline-block;
  padding-bottom:6px;
  border-bottom:2px solid rgba(217,79,48,.55);
}

.aside-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
}
.aside-nav a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:5px 0;
  font-size:16px;
  color:rgba(239,233,223,.78);
  border-bottom:1px solid transparent;
}
.aside-nav a:hover{color:var(--flame);border-bottom-color:rgba(217,79,48,.4)}

.aside-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.aside-top h2{margin:0}

.top-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex:0 0 auto;
  border-radius:50%;
  border:1px solid rgba(217,79,48,.6);
  color:var(--flame);
  font-size:18px;
  transition:background .25s ease,color .25s ease;
}
.top-link:hover{background:var(--flame);color:var(--ink)}

/* ---------- footer ---------- */

footer{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) auto;
  gap:clamp(22px,4vw,58px);
  align-items:start;
  max-width:1160px;
  margin:0 auto;
  padding:clamp(38px,6vw,66px) clamp(20px,6vw,84px) 30px;
  border-top:1px solid var(--line);
}

.foot-brand{display:grid;gap:16px;min-width:0}

.foot-logo{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--geo);
  font-size:19px;
  font-weight:600;
  letter-spacing:-.01em;
  min-height:44px;
  padding:4px 0;
}
.foot-logo i,
.bar-brand i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--flame);
  flex:0 0 auto;
}

.foot-form{
  display:flex;
  gap:8px;
  max-width:320px;
}
.foot-form input{
  flex:1 1 auto;
  min-width:0;
  min-height:44px;
  padding:8px 14px;
  font:inherit;
  font-size:16px;
  color:var(--paper);
  background:transparent;
  border:1px solid var(--line);
  border-radius:12px;
}
.foot-form input::placeholder{color:var(--faint)}
.foot-form button{
  flex:0 0 auto;
  min-height:44px;
  padding:8px 18px;
  font-size:16px;
  cursor:pointer;
  color:var(--ink);
  background:var(--flame);
  border:0;
  border-radius:12px;
}
.foot-form button:hover{background:#e9623f}

.foot-nav{min-width:0}

.foot-nav dl{
  display:flex;
  flex-wrap:wrap;
  gap:4px 20px;
  margin:0;
}
.foot-nav dt{
  flex:0 0 100%;
  font-family:var(--geo);
  font-size:16px;
  letter-spacing:.22em;
  color:var(--faint);
  margin-bottom:4px;
}
.foot-nav dd{margin:0}
.foot-nav a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:2px 0;
  font-size:16px;
  color:rgba(239,233,223,.8);
  border-bottom:1px solid transparent;
}
.foot-nav a:hover{color:var(--flame);border-bottom-color:rgba(217,79,48,.45)}

.copyright{
  margin:0;
  font-size:16px;
  color:var(--faint);
  white-space:nowrap;
  padding-top:6px;
}

/* ---------- fixed bar ---------- */

.bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  min-height:var(--bar);
  padding:9px clamp(12px,3vw,26px);
  padding-bottom:calc(9px + env(safe-area-inset-bottom,0px));
  background:rgba(16,16,20,.88);
  border-top:1px solid var(--line);
  backdrop-filter:blur(14px);
}

.bar-side{display:flex;align-items:center;gap:4px;min-width:0}
.bar-left{justify-content:flex-start}
.bar-right{justify-content:flex-end}

.bar-nav{display:flex;align-items:center;gap:2px;min-width:0}
.bar-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 9px;
  font-size:16px;
  color:rgba(239,233,223,.74);
  border-radius:10px;
  white-space:nowrap;
}
.bar-nav a:hover{color:var(--paper);background:var(--panel)}

.bar-brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 8px;
  font-family:var(--geo);
  font-size:17px;
  font-weight:600;
  letter-spacing:-.01em;
  white-space:nowrap;
}

.bar-contact{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  font-size:16px;
  color:var(--flame);
  border:1px solid rgba(217,79,48,.5);
  border-radius:11px;
  white-space:nowrap;
}
.bar-contact:hover{background:var(--flame);color:var(--ink)}

.burger{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  width:48px;
  height:44px;
  flex:0 0 auto;
  padding:0;
  background:transparent;
  border:1px solid var(--line);
  border-radius:11px;
  cursor:pointer;
}
.burger span{
  width:17px;
  height:2px;
  background:var(--paper);
  transition:transform .3s ease,opacity .2s ease;
}
.burger:hover{border-color:rgba(217,79,48,.55)}
.sheet-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.sheet-open .burger span:nth-child(2){opacity:0}
.sheet-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- sheet ---------- */

.sheet{
  position:fixed;
  inset:0;
  z-index:70;
  display:grid;
  grid-template-rows:1fr auto;
  gap:20px;
  padding:clamp(56px,9vh,96px) clamp(20px,6vw,64px) calc(var(--bar) + 26px);
  background:linear-gradient(185deg,#15151a,var(--ink) 62%);
  overflow-y:auto;
  visibility:hidden;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .52s cubic-bezier(.72,0,.2,1),visibility .52s;
}
.sheet.open{visibility:visible;clip-path:inset(0 0 0 0)}

.sheet-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
}
.sheet-nav a{
  display:flex;
  align-items:center;
  gap:16px;
  min-height:56px;
  padding:8px 0;
  font-family:var(--geo);
  font-size:clamp(18px,4.6vw,23px);
  font-weight:500;
  letter-spacing:-.01em;
  border-bottom:1px solid var(--line);
}
.sheet-nav em{
  font-style:normal;
  font-size:16px;
  letter-spacing:.2em;
  color:var(--flame);
  flex:0 0 auto;
}
.sheet-nav a:hover{color:var(--flame)}

.sheet-top{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  justify-self:start;
  font-size:16px;
  color:var(--ink);
  background:var(--paper);
  border-radius:12px;
}

/* ---------- reveal ---------- */

.deck-main > section,
.deck-aside,
footer{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);
}
.deck-main > section.is-in,
.deck-aside.is-in,
footer.is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */

@media (max-width:1140px){
  .bar-nav{display:none}
}

@media (max-width:900px){
  .deck{grid-template-columns:minmax(0,1fr);gap:34px}
  .deck-aside{position:static;grid-template-columns:1fr 1fr}
  footer{grid-template-columns:1fr;gap:26px}
  .copyright{padding-top:0}
}

@media (max-width:620px){
  :root{--bar:70px}
  body{font-size:17px}
  .hero{padding:22vh 22px 15vh}
  .hero-title{font-size:clamp(2.3rem,10.4vw,3.4rem)}
  .hero-foot{right:22px;bottom:calc(var(--bar) + 26px)}
  .deck{padding:44px 22px 34px}
  footer{padding:38px 22px 26px}
  .deck-aside{grid-template-columns:1fr}
  .bar-brand{font-size:16px}
  .bar-contact{padding:0 10px}
  .foot-form{max-width:none}
  .sheet-nav a{min-height:58px}
}

@media (max-width:380px){
  .bar-brand i{display:none}
  .bar-contact{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .deck-main > section,
  .deck-aside,
  footer{opacity:1;transform:none;transition:none}
  .sheet{transition:none}
  .burger span{transition:none}
  .layer,.hero-media{transform:none !important}
  .badge{transform:none}
}

button[aria-expanded]{min-width:44px;min-height:44px}