/* ══════════════════════════════════════════════════════════════════════
   TURKMEN BITUMEN — "The Loading Terminal"
   Palette carried forward from the existing brand: #000 / #171717 /
   #292929 grounds, #a99570 brass accent, #ffa500 amber, white.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── grounds: warm bitumen blacks, not neutral greys ── */
  --pitch:#050403;
  --bitumen:#14100c;
  --drum:#211a13;
  --drum-2:#2c231a;

  /* ── accents (brand) ── */
  --brass:#a99570;
  --brass-lo:#8c7a5a;
  --brass-hi:#d8c8a6;
  --flare:#ffa500;

  /* ── daylight ── */
  --haze:#e8e0d3;
  --paper:#f5f1e8;
  --ink:#171310;
  --ink-2:#4a4136;

  --line:color-mix(in oklab, var(--brass) 26%, transparent);
  --line-ink:color-mix(in oklab, var(--ink) 18%, transparent);

  /* ── type ── */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;

  /* modular scale, 1.26 ratio, fluid */
  --t-xs:clamp(.68rem,.63rem + .18vw,.76rem);
  --t-sm:clamp(.8rem,.75rem + .2vw,.88rem);
  --t-base:clamp(.98rem,.93rem + .26vw,1.09rem);
  --t-md:clamp(1.14rem,1.02rem + .5vw,1.4rem);
  --t-lg:clamp(1.5rem,1.2rem + 1.3vw,2.15rem);
  --t-xl:clamp(2.1rem,1.5rem + 2.8vw,3.9rem);
  --t-2xl:clamp(2.9rem,1.7rem + 5.4vw,6.6rem);
  --t-3xl:clamp(2.9rem,1.3rem + 6.4vw,7.2rem);

  /* ── rhythm ── */
  --gut:clamp(1.15rem,4vw,4.5rem);
  --sec:clamp(5rem,11vw,11.5rem);
  --max:1440px;
  --r:2px;
  --ease:cubic-bezier(.22,.68,0,1);
  --ease-io:cubic-bezier(.62,.05,.16,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--pitch);color:var(--haze);
  font-family:var(--sans);font-size:var(--t-base);line-height:1.65;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;line-height:1.02;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 120;letter-spacing:-.022em}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--brass);color:var(--pitch)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 88;letter-spacing:.01em}

:focus-visible{outline:2px solid var(--flare);outline-offset:3px;border-radius:1px}
.skip{position:fixed;top:8px;left:8px;z-index:999;padding:.6rem 1rem;background:var(--brass);
  color:var(--pitch);font-weight:600;transform:translateY(-160%);transition:transform .25s}
.skip:focus{transform:none}

/* ── grain + noise overlay ─────────────────────────────────────────── */
.grain{position:fixed;inset:-50%;z-index:9000;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainDrift 7s steps(6) infinite}
@keyframes grainDrift{
  0%{transform:translate(0,0)}20%{transform:translate(-6%,3%)}40%{transform:translate(4%,-5%)}
  60%{transform:translate(-3%,-4%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* ══ POUR CURTAIN ═════════════════════════════════════════════════════ */
.pour{position:fixed;inset:0;z-index:9500;background:var(--pitch);display:grid;place-items:center}
.pour__sheet{position:absolute;inset:0;background:var(--bitumen);
  clip-path:ellipse(140% 130% at 50% -32%);will-change:clip-path}
.pour__inner{position:relative;z-index:2;display:grid;justify-items:center;gap:1.4rem;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.pour.is-out .pour__inner{opacity:0;transform:translateY(-14px)}
.pour__mark{width:88px;height:88px;overflow:visible}
.pour__plate{opacity:0;animation:fadeMark .7s var(--ease) .5s forwards}
.pour__draw{stroke-dasharray:260;stroke-dashoffset:260;animation:drawMark 1.25s var(--ease) .1s forwards}
.pour__draw--2{stroke-dasharray:160;stroke-dashoffset:160;animation-delay:.42s}
.pour__tb{font-family:var(--display);font-size:40px;font-weight:600;text-anchor:middle;
  letter-spacing:-.04em;font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 96;
  opacity:0;animation:fadeMark .8s var(--ease) .75s forwards}
@keyframes drawMark{to{stroke-dashoffset:0}}
@keyframes fadeMark{to{opacity:1}}
.pour__meter{width:min(260px,52vw);height:1px;background:color-mix(in oklab,var(--brass) 24%,transparent)}
.pour__fill{display:block;height:100%;width:0;background:var(--brass)}
.pour__pct{font-size:var(--t-xs);letter-spacing:.34em;color:var(--brass);
  font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 86}
.pour__pct i{font-style:normal;opacity:.5}
.pour.is-done{pointer-events:none}

/* ══ SCROLL PROGRESS ══════════════════════════════════════════════════ */
.scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:900;background:transparent}
.scrollbar i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--brass-lo),var(--brass),var(--flare));box-shadow:0 0 14px rgba(169,149,112,.5)}

/* ══ CUSTOM CURSOR ════════════════════════════════════════════════════ */
.cursor{position:fixed;top:0;left:0;z-index:9400;pointer-events:none;mix-blend-mode:difference;opacity:0}
.cursor.on{opacity:1}
.cursor__dot,.cursor__ring{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:5px;height:5px;background:var(--haze)}
.cursor__ring{width:34px;height:34px;border:1px solid rgba(232,224,211,.55);
  display:grid;place-items:center;transition:width .32s var(--ease),height .32s var(--ease),
  background-color .32s var(--ease),border-color .3s}
.cursor.hot .cursor__ring{width:60px;height:60px;border-color:var(--brass);background:rgba(169,149,112,.12)}
.cursor.view .cursor__ring{width:88px;height:88px;background:var(--brass);border-color:var(--brass)}
.cursor__label{font-size:9px;letter-spacing:.22em;color:var(--pitch);opacity:0;font-style:normal;
  transition:opacity .2s;font-variation-settings:"wdth" 84;font-weight:700}
.cursor.view .cursor__label{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ══ HEADER ═══════════════════════════════════════════════════════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:800;
  transition:background-color .45s var(--ease),backdrop-filter .45s,border-color .45s,padding .45s var(--ease);
  border-bottom:1px solid transparent}
.nav__in{max-width:var(--max);margin-inline:auto;padding:clamp(1rem,2.1vw,1.7rem) var(--gut);
  display:flex;align-items:center;gap:clamp(1rem,3vw,3rem);transition:padding .45s var(--ease)}
.nav.stuck{background:color-mix(in oklab,var(--pitch) 78%,transparent);backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--line)}
.nav.stuck .nav__in{padding-block:.72rem}
.nav.hide{transform:translateY(-104%);transition:transform .5s var(--ease-io)}

.brand{display:flex;align-items:center;gap:.72rem;flex:0 0 auto}
.brand__mark{width:34px;height:34px;flex:0 0 auto;overflow:visible}
.bm-plate{fill:none;stroke:var(--brass);stroke-width:1;opacity:.42;transition:opacity .45s}
.bm-drum{fill:none;stroke:var(--brass);stroke-width:1.6;opacity:.75;
  transition:opacity .45s,transform .55s var(--ease);transform-origin:center}
.bm-hoop{fill:none;stroke:var(--brass);stroke-width:1.1;opacity:.42;transition:opacity .45s}
.bm-tb{fill:var(--brass);font-family:var(--display);font-size:15.5px;font-weight:700;
  text-anchor:middle;letter-spacing:-.04em;font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 40}
.brand:hover .bm-plate,.brand:hover .bm-hoop{opacity:1}
.brand:hover .bm-drum{transform:scale(1.06)}
.brand__wm{display:grid;line-height:1;font-family:var(--display);letter-spacing:-.02em}
.brand__wm b{font-size:.98rem;font-weight:600;font-variation-settings:"SOFT" 20,"WONK" 1}
.brand__wm i{font-style:normal;font-size:.98rem;font-weight:300;color:var(--brass)}

.nav__links{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem);margin-left:auto}
.nlink{position:relative;font-size:var(--t-sm);font-weight:500;padding:.4rem 0;
  color:color-mix(in oklab,var(--haze) 76%,transparent);transition:color .3s}
.nlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:right;transition:transform .42s var(--ease)}
.nlink:hover,.nlink.act{color:var(--haze)}
.nlink:hover::after,.nlink.act::after{transform:scaleX(1);transform-origin:left}
.nlink.act::after{background:var(--flare)}

.nav__has-mega{position:relative}
.mega{position:absolute;top:calc(100% + 1.15rem);left:50%;width:min(600px,84vw);
  background:color-mix(in oklab,var(--bitumen) 96%,transparent);backdrop-filter:blur(24px);
  border:1px solid var(--line);padding:1.1rem;border-radius:var(--r);
  opacity:0;visibility:hidden;transform:translate(-50%,-12px);pointer-events:none;
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s;
  box-shadow:0 34px 80px -28px rgba(0,0,0,.9)}
.nav__has-mega:hover .mega,.nav__has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto}
.mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.mega__card{display:grid;gap:.7rem;padding:.72rem;border:1px solid transparent;border-radius:var(--r);
  transition:background-color .3s,border-color .3s}
.mega__card:hover{background:var(--drum);border-color:var(--line)}
.mega__img{display:block;overflow:hidden;background:var(--paper);border-radius:1px}
.mega__img img{transition:transform .6s var(--ease)}
.mega__card:hover .mega__img img{transform:scale(1.06)}
.mega__body{display:grid;gap:.2rem}
.mega__body b{font-family:var(--display);font-size:.98rem;font-weight:600;line-height:1.15}
.mega__body i{font-style:normal;font-size:var(--t-xs);color:color-mix(in oklab,var(--haze) 52%,transparent);line-height:1.4}
.mega__foot{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line);
  font-size:var(--t-xs);color:color-mix(in oklab,var(--haze) 55%,transparent)}
@media (max-width:900px){.nav__links{display:none}}

.nav__act{display:flex;align-items:center;gap:.7rem;margin-left:clamp(.6rem,2vw,1.6rem)}
@media (max-width:900px){.nav__act{margin-left:auto}}

/* ══ BUTTONS ══════════════════════════════════════════════════════════ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.78rem 1.5rem;font-size:var(--t-sm);font-weight:600;letter-spacing:.005em;
  border-radius:100px;overflow:hidden;isolation:isolate;
  transition:transform .4s var(--ease),color .35s,box-shadow .45s var(--ease),border-color .35s;
  will-change:transform}
.btn span{position:relative;z-index:2}
.btn svg{width:17px;height:17px;position:relative;z-index:2;fill:currentColor}
.btn--lg{padding:1rem 1.9rem;font-size:var(--t-base)}

.btn--brass{background:var(--brass);color:var(--pitch)}
.btn--brass::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,var(--brass-hi),var(--flare) 52%,var(--brass-hi));
  opacity:0;transition:opacity .45s var(--ease)}
.btn--brass::after{content:"";position:absolute;top:0;bottom:0;width:42%;z-index:1;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent);
  transform:skewX(-18deg)}
.btn--brass:hover{box-shadow:0 14px 34px -12px rgba(169,149,112,.62)}
.btn--brass:hover::before{opacity:1}
.btn--brass:hover::after{animation:shineSweep .85s var(--ease)}
@keyframes shineSweep{to{left:120%}}

.btn--ghost{color:var(--haze);border:1px solid var(--line);background:transparent}
.btn--ghost::before{content:"";position:absolute;inset:0;z-index:1;background:var(--haze);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.btn--ghost:hover{color:var(--pitch);border-color:var(--haze)}
.btn--ghost:hover::before{transform:scaleY(1);transform-origin:top}

.btn--tg,.btn--wa{border:1px solid var(--line-ink);color:var(--ink);background:transparent}
.btn--tg:hover{background:#0088cc;border-color:#0088cc;color:#fff}
.btn--wa:hover{background:#25d366;border-color:#25d366;color:#fff}
.btn--tg svg,.btn--wa svg{stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.btn--tg svg{stroke:none}
.btn:active{transform:scale(.965)}

.tlink{position:relative;display:inline-block;font-size:var(--t-sm);font-weight:600;
  padding-bottom:3px;color:var(--brass)}
.tlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}

/* ══ MOBILE DRAWER ════════════════════════════════════════════════════ */
.burger{display:none;width:42px;height:42px;position:relative;border:1px solid var(--line);border-radius:100px}
.burger span{position:absolute;left:11px;width:20px;height:1.5px;background:var(--haze);
  transition:transform .45s var(--ease),opacity .3s}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:24px}
.burger.on span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.on span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
@media (max-width:900px){.burger{display:block}}

.drawer{position:fixed;inset:0;z-index:790;background:var(--bitumen);
  padding:clamp(6rem,16vh,9rem) var(--gut) var(--gut);
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-io)}
.drawer[hidden]{display:none}
.drawer.open{clip-path:inset(0 0 0 0)}
.drawer__nav{display:grid;gap:.2rem;border-top:1px solid var(--line)}
.drawer__nav a{display:flex;align-items:baseline;gap:1.1rem;padding:.85rem 0;
  border-bottom:1px solid var(--line);font-family:var(--display);
  font-size:clamp(1.8rem,8vw,2.6rem);font-weight:400;line-height:1;
  opacity:0;transform:translateY(18px);transition:color .3s,padding-left .4s var(--ease)}
.drawer.open .drawer__nav a{animation:drawIn .6s var(--ease) forwards;animation-delay:calc(var(--i,0)*70ms + 180ms)}
@keyframes drawIn{to{opacity:1;transform:none}}
.drawer__nav a:hover{color:var(--brass);padding-left:.6rem}
.drawer__nav em{font-style:normal;font-family:var(--sans);font-size:.66rem;font-weight:600;
  color:var(--brass);letter-spacing:.16em;font-variant-numeric:tabular-nums}
.drawer__foot{display:grid;gap:.35rem;font-size:var(--t-sm);
  color:color-mix(in oklab,var(--haze) 62%,transparent)}
.drawer__tel{font-family:var(--display);font-size:var(--t-md);color:var(--haze)}
.drawer__chan{display:flex;gap:1.2rem;margin-top:.7rem}
.drawer__chan a{color:var(--brass);border-bottom:1px solid var(--line);padding-bottom:2px}

/* ══ HERO ═════════════════════════════════════════════════════════════ */
.hero{position:relative;min-height:100svh;display:grid;
  grid-template-columns:minmax(0,47fr) minmax(0,53fr);align-items:center;
  padding:clamp(5.8rem,9.5vh,7rem) 0 clamp(2.4rem,5vh,4rem);overflow:hidden}
.hero__type{position:relative;z-index:3;padding-left:var(--gut);
  padding-right:clamp(1rem,3vw,3rem);max-width:760px;justify-self:end;width:100%}
@media (min-width:1441px){.hero__type{padding-left:max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)))}}

.hero__kicker{font-size:var(--t-xs);letter-spacing:.2em;color:var(--brass);
  font-variation-settings:"wdth" 88;font-weight:500;margin-bottom:1.2rem;
  display:flex;align-items:center;gap:.75rem}
.hero__kicker::before{content:"";width:clamp(22px,4vw,54px);height:1px;background:var(--brass);
  transform-origin:left;animation:ruleIn .9s var(--ease) both}
@keyframes ruleIn{from{transform:scaleX(0)}}

.hero__h1{font-size:var(--t-3xl);font-weight:300;line-height:.86;letter-spacing:-.045em;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144;margin-bottom:1.15rem}
.hero__h1 .line{display:block;overflow:hidden;padding-bottom:.03em}
.hero__h1 .w{display:block;transform:translateY(112%);
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144,"wght" 200}
.hero__h1 .line--over .w{color:var(--brass);font-style:italic;margin-left:.06em}

.hero__sub{font-family:var(--display);font-size:var(--t-lg);font-weight:400;line-height:1.12;
  letter-spacing:-.02em;color:color-mix(in oklab,var(--haze) 88%,transparent);
  max-width:19ch;margin-bottom:1.25rem;font-variation-settings:"SOFT" 20,"WONK" 0}
.hero__lede{font-size:var(--t-base);line-height:1.66;max-width:50ch;
  color:color-mix(in oklab,var(--haze) 66%,transparent);margin-bottom:1.55rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.65rem}

.terms{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;
  padding-top:1.1rem;border-top:1px solid var(--line)}
.terms dt{width:100%;font-size:var(--t-xs);letter-spacing:.18em;font-variation-settings:"wdth" 88;
  color:color-mix(in oklab,var(--haze) 42%,transparent);margin-bottom:.35rem}
.terms dd{margin:0;padding:.36rem .82rem;border:1px solid var(--line);border-radius:100px;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.1em;color:var(--brass);
  font-variant-numeric:tabular-nums;transition:background-color .35s,color .35s,border-color .35s}
.terms dd:hover{background:var(--brass);color:var(--pitch);border-color:var(--brass)}

.hero__vis{position:relative;height:100%;min-height:56svh;z-index:1}
.hero__frame{position:absolute;inset:0;left:clamp(-190px,-11vw,-60px);overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.hero__frame img{width:100%;height:100%;object-fit:cover;object-position:58% center;
  transform:scale(1.14);will-change:transform;filter:saturate(.88) contrast(1.06)}
.hero__wash{position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--pitch) 0%,var(--pitch) 9%,color-mix(in oklab,var(--pitch) 60%,transparent) 34%,transparent 68%),
    linear-gradient(to top,var(--pitch) 1%,transparent 42%),
    radial-gradient(78% 62% at 74% 40%,color-mix(in oklab,var(--brass) 16%,transparent),transparent 72%)}

.hero__seal{position:absolute;right:clamp(1rem,4vw,4.5rem);bottom:clamp(1.5rem,5vh,4rem);
  width:clamp(94px,11vw,132px);aspect-ratio:1;display:grid;place-items:center;z-index:4}
.hero__seal svg{position:absolute;inset:0;width:100%;height:100%;animation:sealSpin 26s linear infinite}
.hero__seal text{font-family:var(--sans);font-size:9.4px;font-weight:600;letter-spacing:.19em;
  fill:var(--brass);font-variation-settings:"wdth" 86}
.hero__seal b{font-family:var(--display);font-size:1.5rem;font-weight:500;color:var(--brass);
  letter-spacing:-.03em;font-variation-settings:"SOFT" 40,"WONK" 1}
@keyframes sealSpin{to{transform:rotate(360deg)}}

.scrollcue{position:absolute;left:calc(47% + clamp(1rem,2.4vw,2.4rem));bottom:clamp(1.2rem,3.5vh,2.4rem);z-index:5;
  display:flex;align-items:center;gap:.7rem;font-size:var(--t-xs);letter-spacing:.22em;
  color:color-mix(in oklab,var(--haze) 46%,transparent);font-variation-settings:"wdth" 88}
.scrollcue i{display:block;width:1px;height:42px;background:var(--line);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset:0;background:var(--brass);
  animation:cueRun 2.1s var(--ease-io) infinite}
@keyframes cueRun{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}
.scrollcue:hover{color:var(--brass)}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;min-height:100svh;align-items:end;
    padding:clamp(6rem,16vh,8rem) 0 clamp(2rem,5vh,3rem)}
  .hero__vis{position:absolute;inset:0;height:100%;min-height:0;z-index:0}
  .hero__frame{position:absolute;inset:0;left:0}
  .hero__frame img{object-position:62% center}
  .hero__wash{background:
    linear-gradient(to top,var(--pitch) 15%,color-mix(in oklab,var(--pitch) 88%,transparent) 44%,color-mix(in oklab,var(--pitch) 62%,transparent) 72%,color-mix(in oklab,var(--pitch) 70%,transparent) 100%),
    radial-gradient(72% 46% at 62% 30%,color-mix(in oklab,var(--brass) 13%,transparent),transparent 76%)}
  .hero__type{position:relative;z-index:3;padding-inline:var(--gut);justify-self:stretch;
    max-width:none}
  .hero__lede{max-width:44ch}
  .scrollcue,.hero__seal{display:none}
}
@media (max-width:620px){
  .hero__sub{font-size:var(--t-md)}
  .hero__cta .btn{flex:1 1 100%}
}

/* ══ TICKER ═══════════════════════════════════════════════════════════ */
.ticker{background:var(--brass);color:var(--pitch);overflow:hidden;
  padding:.72rem 0;border-block:1px solid var(--brass-lo)}
.ticker__track{display:flex;width:max-content;animation:tickRun 42s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker span{display:flex;align-items:center;font-family:var(--display);
  font-size:clamp(.95rem,1.7vw,1.28rem);font-weight:500;letter-spacing:-.01em;white-space:nowrap;
  font-variation-settings:"SOFT" 20,"WONK" 1}
.ticker b{display:inline-block;width:7px;height:7px;margin-inline:clamp(1.1rem,3vw,2.4rem);
  background:var(--pitch);transform:rotate(45deg);flex:0 0 auto}
@keyframes tickRun{to{transform:translateX(-50%)}}

/* ══ SHARED DISPLAY HEADING ═══════════════════════════════════════════ */
.dh{font-size:var(--t-2xl);font-weight:300;line-height:.92;letter-spacing:-.04em;
  font-variation-settings:"SOFT" 55,"WONK" 1,"opsz" 144}
.dh--light{color:var(--haze)}
.dh--ink{color:var(--ink)}
.dh .amp{font-style:italic;color:var(--brass);font-variation-settings:"SOFT" 90,"WONK" 1}

[data-reveal]{opacity:0;transform:translateY(26px)}
.no-motion [data-reveal],.is-in[data-reveal]{opacity:1;transform:none}

/* ══ ABOUT ════════════════════════════════════════════════════════════ */
.about{position:relative;background:var(--bitumen);padding:var(--sec) 0;
  border-bottom:1px solid color-mix(in oklab,var(--brass) 12%,transparent)}
.about__rail{position:absolute;left:0;top:0;bottom:0;width:var(--gut);
  display:grid;place-items:center;border-right:1px solid color-mix(in oklab,var(--brass) 12%,transparent)}
.about__rail span{writing-mode:vertical-rl;font-size:var(--t-xs);letter-spacing:.42em;
  color:color-mix(in oklab,var(--brass) 55%,transparent);font-variation-settings:"wdth" 88}
@media (max-width:900px){.about__rail{display:none}}

.quote{margin:0 auto clamp(3.5rem,8vw,7rem);padding-inline:var(--gut);max-width:var(--max);width:100%}
.quote blockquote{margin:0;font-family:var(--display);font-weight:300;
  font-size:var(--t-xl);line-height:1.18;letter-spacing:-.03em;max-width:22ch;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 144;
  padding-left:clamp(1rem,4vw,4.5rem);border-left:1px solid var(--line);
  margin-left:clamp(0rem,14vw,15rem)}
.quote em{font-style:italic;color:var(--brass);font-variation-settings:"SOFT" 95,"WONK" 1}

.about__body{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(2rem,6vw,6rem);align-items:center}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.6rem,1.4vw,1.1rem)}
.tile{overflow:hidden;background:var(--drum);position:relative}
.tile img{width:100%;height:100%;object-fit:cover;will-change:transform;
  filter:grayscale(.22) contrast(1.08) saturate(.9);transition:filter .6s var(--ease)}
.tile:hover img{filter:none}
.tile--tall{aspect-ratio:3/4.1}
.tile--wide{aspect-ratio:3/4.1;margin-top:clamp(2rem,7vw,5.5rem)}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,color-mix(in oklab,var(--pitch) 70%,transparent),transparent 55%);
  pointer-events:none}

.props{display:grid;gap:0;border-top:1px solid var(--line)}
.props li{display:flex;align-items:center;gap:clamp(1rem,2.2vw,1.7rem);
  padding:clamp(1.1rem,2.6vw,1.75rem) 0;border-bottom:1px solid var(--line);
  transition:padding-left .5s var(--ease)}
.props li:hover{padding-left:clamp(.4rem,1.4vw,1.1rem)}
.props svg{width:clamp(26px,3vw,34px);height:auto;flex:0 0 auto;fill:none;
  stroke:var(--brass);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .4s,transform .55s var(--ease)}
.props li:hover svg{stroke:var(--flare);transform:scale(1.1) rotate(-4deg)}
.props p{font-family:var(--display);font-size:var(--t-md);font-weight:400;line-height:1.2;
  letter-spacing:-.02em;font-variation-settings:"SOFT" 25,"WONK" 0,"opsz" 60}

@media (max-width:900px){
  .about__body{grid-template-columns:1fr}
  .quote blockquote{margin-left:0;max-width:26ch}
  .tile--tall,.tile--wide{aspect-ratio:1/1}
  .tile--wide{margin-top:1.6rem}
}

/* ══ PRODUCTS (daylight break) ════════════════════════════════════════ */
.prod{background:var(--haze);color:var(--ink);padding:var(--sec) var(--gut);
  position:relative;overflow:hidden}
.prod::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 12% 0%,rgba(255,255,255,.75),transparent 62%)}
.prod > *{position:relative;z-index:1}
.prod__head{max-width:var(--max);margin:0 auto clamp(3rem,7vw,5.5rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,4rem);align-items:end}
.prod__lede{font-size:var(--t-md);line-height:1.6;color:var(--ink-2);max-width:52ch;
  padding-bottom:.4rem}
@media (max-width:900px){.prod__head{grid-template-columns:1fr}}

.drums{max-width:var(--max);margin:0 auto clamp(3.5rem,8vw,6rem);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.6vw,2.4rem)}
.drum{position:relative;background:var(--paper);border:1px solid var(--line-ink);
  padding:clamp(1.1rem,2.2vw,1.7rem);display:grid;gap:clamp(1.1rem,2.4vw,1.9rem);
  transform-style:preserve-3d;will-change:transform;
  transition:box-shadow .55s var(--ease),border-color .45s,background-color .45s}
.drum:nth-child(2){margin-top:clamp(0rem,4vw,3.6rem)}
.drum:hover{box-shadow:0 40px 70px -34px rgba(23,19,16,.42);border-color:var(--brass)}
.drum__img{position:relative;overflow:hidden;background:#fff;aspect-ratio:3/2;
  border:1px solid color-mix(in oklab,var(--ink) 9%,transparent)}
.drum__img img{width:100%;height:100%;object-fit:contain;
  transform:translateZ(38px) scale(.94);transition:transform .7s var(--ease)}
.drum:hover .drum__img img{transform:translateZ(56px) scale(1.02)}
.drum__shine{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.9) 50%,transparent 66%);
  transform:translateX(-38%);transition:opacity .3s}
.drum:hover .drum__shine{opacity:1;animation:drumShine 1s var(--ease)}
@keyframes drumShine{from{transform:translateX(-46%)}to{transform:translateX(46%)}}
.drum__meta{display:grid;gap:.6rem;justify-items:start;transform:translateZ(22px)}
.drum__meta h3{font-size:var(--t-lg);font-weight:500;letter-spacing:-.03em;
  font-variation-settings:"SOFT" 35,"WONK" 1,"opsz" 100;max-width:16ch}
.drum__meta p{font-size:var(--t-sm);color:var(--ink-2);max-width:38ch}
.drum__grade{position:absolute;bottom:clamp(.7rem,1.8vw,1.4rem);right:clamp(1.1rem,2.2vw,1.7rem);
  font-family:var(--display);font-size:clamp(2.2rem,5.4vw,4.1rem);font-weight:200;line-height:.8;
  letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px color-mix(in oklab,var(--ink) 22%,transparent);
  font-variant-numeric:tabular-nums;transform:translateZ(10px);pointer-events:none;
  transition:-webkit-text-stroke-color .5s,color .5s}
.drum:hover .drum__grade{-webkit-text-stroke-color:var(--brass)}
.drum__grade i{font-style:normal;opacity:.4}

.chip{display:inline-block;padding:.3rem .74rem;border-radius:100px;font-size:var(--t-xs);
  font-weight:600;letter-spacing:.09em;font-variation-settings:"wdth" 90;
  background:color-mix(in oklab,var(--brass) 22%,transparent);color:color-mix(in oklab,var(--ink) 82%,var(--brass))}
.chip--flare{background:color-mix(in oklab,var(--flare) 26%,transparent)}
@media (max-width:820px){.drums{grid-template-columns:1fr}.drum:nth-child(2){margin-top:0}}

/* ── feature matrix ── */
.matrix{max-width:var(--max);margin-inline:auto;overflow-x:auto;
  border:1px solid var(--line-ink);background:var(--paper);
  scrollbar-width:thin;scrollbar-color:var(--brass) transparent}
.matrix table{width:100%;min-width:680px;border-collapse:collapse;text-align:left}
.matrix caption{caption-side:top;text-align:left;padding:1rem 1.2rem;font-size:var(--t-xs);
  letter-spacing:.13em;color:var(--ink-2);border-bottom:1px solid var(--line-ink);
  font-variation-settings:"wdth" 90}
.matrix thead th{position:sticky;top:0;background:var(--ink);color:var(--haze);
  padding:.95rem 1.2rem;font-family:var(--display);font-size:var(--t-base);font-weight:500;
  letter-spacing:-.015em;z-index:2;font-variation-settings:"SOFT" 20,"WONK" 0}
.matrix tbody th{width:24%;padding:.92rem 1.2rem;font-family:var(--sans);font-size:var(--t-xs);
  font-weight:600;letter-spacing:.11em;color:var(--ink-2);vertical-align:top;
  font-variation-settings:"wdth" 90;white-space:nowrap}
.matrix td{padding:.92rem 1.2rem;font-size:var(--t-sm);color:var(--ink);vertical-align:top}
.matrix tbody tr{border-top:1px solid var(--line-ink);transition:background-color .3s}
.matrix tbody tr:hover{background:color-mix(in oklab,var(--brass) 14%,transparent)}
.matrix td .num{display:inline-block;padding:.16rem .5rem;margin-right:.2rem;
  border:1px solid var(--line-ink);border-radius:100px;font-size:var(--t-xs);font-weight:600}
.matrix td .fig{font-variant-numeric:tabular-nums;font-weight:600;
  font-variation-settings:"wdth" 92;white-space:nowrap}

/* ══ LOGISTICS (pinned) ═══════════════════════════════════════════════ */
.log{position:relative;background:var(--pitch);overflow:hidden;
  padding:var(--sec) var(--gut);min-height:96svh;display:grid;align-items:center}
.log__bg{position:absolute;inset:-12% 0}
.log__bg img{width:100%;height:100%;object-fit:cover;will-change:transform;
  filter:grayscale(.4) contrast(1.14) brightness(.62)}
.log__scrim{position:absolute;inset:0;
  background:
    linear-gradient(to right,var(--pitch) 4%,color-mix(in oklab,var(--pitch) 72%,transparent) 44%,color-mix(in oklab,var(--pitch) 40%,transparent)),
    linear-gradient(to bottom,var(--pitch),transparent 26%,transparent 74%,var(--pitch))}
.log__in{position:relative;z-index:2;max-width:var(--max);margin-inline:auto;width:100%;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.4rem,6vw,6rem);
  align-items:start}
.log__stick{position:sticky;top:clamp(6rem,16vh,9rem)}
.log__note{margin-top:1.5rem;max-width:44ch;font-size:var(--t-base);line-height:1.72;
  color:color-mix(in oklab,var(--haze) 68%,transparent)}
.bar{margin-top:2rem;height:2px;width:min(280px,60%);background:color-mix(in oklab,var(--haze) 16%,transparent)}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brass),var(--flare))}

.routes{display:grid;gap:clamp(.8rem,1.8vw,1.3rem);counter-reset:r}
.routes li{position:relative;padding:clamp(1.3rem,3vw,2.2rem);
  background:color-mix(in oklab,var(--bitumen) 80%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--line);
  transition:transform .55s var(--ease),border-color .4s,background-color .5s}
.routes li:nth-child(2){margin-left:clamp(0rem,4vw,3.2rem)}
.routes li:nth-child(3){margin-left:clamp(0rem,8vw,6.4rem)}
.routes li:hover{transform:translateY(-6px);border-color:var(--brass);
  background:color-mix(in oklab,var(--bitumen) 84%,transparent)}
.routes__k{display:block;margin-bottom:.85rem}
.routes__k svg{width:30px;height:30px;fill:none;stroke:var(--brass);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s,transform .55s var(--ease)}
.routes li:hover .routes__k svg{stroke:var(--flare);transform:translateX(4px)}
.routes h3{font-size:var(--t-lg);font-weight:400;letter-spacing:-.03em;margin-bottom:.3rem;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 100}
.routes p{font-size:var(--t-sm);color:color-mix(in oklab,var(--haze) 62%,transparent)}
@media (max-width:900px){
  .log__in{grid-template-columns:1fr}.log__stick{position:static}
  .routes li:nth-child(2),.routes li:nth-child(3){margin-left:0}
}

/* ══ WHY ══════════════════════════════════════════════════════════════ */
.why{background:var(--bitumen);padding:var(--sec) var(--gut)}
.why__head{max-width:var(--max);margin:0 auto clamp(2.6rem,6vw,4.5rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1rem,4vw,4rem);align-items:end}
.why__head p{font-size:var(--t-md);color:color-mix(in oklab,var(--haze) 62%,transparent);max-width:42ch}
@media (max-width:900px){.why__head{grid-template-columns:1fr}}

.why__grid{max-width:var(--max);margin-inline:auto;display:grid;gap:1px;
  grid-template-columns:repeat(6,1fr);background:var(--line)}
.cell{position:relative;background:var(--bitumen);padding:clamp(1.4rem,2.6vw,2.2rem);
  min-height:clamp(160px,15vw,210px);display:grid;align-content:space-between;gap:clamp(1.5rem,3.4vw,2.6rem);
  overflow:hidden;transition:background-color .5s var(--ease)}
.cell::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .55s var(--ease);
  background:radial-gradient(120% 100% at 20% 100%,color-mix(in oklab,var(--brass) 20%,transparent),transparent 70%)}
.cell:hover{background:var(--drum)}
.cell:hover::before{opacity:1}
.cell > *{position:relative;z-index:1}
.cell svg{width:clamp(34px,3.6vw,46px);height:auto;fill:none;stroke:var(--brass);
  stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .4s,transform .6s var(--ease)}
.cell:hover svg{stroke:var(--flare);transform:translateY(-4px)}
.cell h3{font-size:var(--t-md);font-weight:400;line-height:1.16;letter-spacing:-.025em;max-width:14ch;
  font-variation-settings:"SOFT" 30,"WONK" 0,"opsz" 72}
.cell--a{grid-column:span 2}
.cell--b{grid-column:span 2}
.cell--c{grid-column:span 2}
.cell--d{grid-column:span 3}
.cell--e{grid-column:span 3}
@media (max-width:900px){
  .why__grid{grid-template-columns:1fr 1fr}
  .cell--a,.cell--b,.cell--c,.cell--d,.cell--e{grid-column:span 1}
  .cell--a{grid-column:span 2}
}
@media (max-width:520px){.why__grid{grid-template-columns:1fr}.cell--a{grid-column:span 1}}

/* ══ FAQ (brass band) ═════════════════════════════════════════════════ */
.faq{background:var(--brass);color:var(--ink);padding:var(--sec) var(--gut);position:relative;overflow:hidden}
.faq::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;
  background:radial-gradient(75% 60% at 88% 6%,color-mix(in oklab,var(--flare) 42%,transparent),transparent 66%)}
.faq > *{position:relative;z-index:1}
.faq__head{max-width:var(--max);margin:0 auto clamp(2.4rem,5vw,4rem)}

.acc{max-width:var(--max);margin-inline:auto;border-top:1px solid color-mix(in oklab,var(--ink) 26%,transparent)}
.acc__i{border-bottom:1px solid color-mix(in oklab,var(--ink) 26%,transparent)}
.acc__i h3{margin:0;font-family:var(--sans)}
.acc__i button{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:1.4rem;padding:clamp(1.1rem,2.4vw,1.7rem) 0;text-align:left;
  font-family:var(--display);font-size:var(--t-md);font-weight:500;line-height:1.24;
  letter-spacing:-.022em;color:var(--ink);font-variation-settings:"SOFT" 25,"WONK" 0,"opsz" 60;
  transition:padding-left .45s var(--ease),color .3s}
.acc__i button:hover{padding-left:clamp(.35rem,1.2vw,.9rem)}
.acc__i button span{max-width:44ch}
.acc__ind{position:relative;width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  border:1px solid color-mix(in oklab,var(--ink) 30%,transparent);
  transition:background-color .4s var(--ease),border-color .4s,transform .5s var(--ease)}
.acc__ind::before,.acc__ind::after{content:"";position:absolute;top:50%;left:50%;
  width:13px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);
  transition:transform .45s var(--ease),background-color .4s}
.acc__ind::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc__i button:hover .acc__ind{background:color-mix(in oklab,var(--ink) 10%,transparent)}
.acc__i.open .acc__ind{background:var(--ink);border-color:var(--ink);transform:rotate(180deg)}
.acc__i.open .acc__ind::before,.acc__i.open .acc__ind::after{background:var(--brass)}
.acc__i.open .acc__ind::after{transform:translate(-50%,-50%) rotate(0deg)}
.acc__p{overflow:hidden;height:0}
.acc__p p{padding:0 clamp(3rem,6vw,5rem) clamp(1.3rem,2.6vw,1.9rem) 0;max-width:62ch;
  font-size:var(--t-base);line-height:1.72;color:color-mix(in oklab,var(--ink) 78%,transparent)}

/* ══ CONTACT ══════════════════════════════════════════════════════════ */
.cta{background:var(--haze);color:var(--ink);position:relative;overflow:hidden;
  padding:var(--sec) var(--gut) clamp(3.5rem,7vw,6rem)}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 100% 100%,color-mix(in oklab,var(--brass) 30%,transparent),transparent 68%)}
.cta__grid{position:relative;z-index:1;max-width:var(--max);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(2.4rem,6vw,6rem)}
.cta__lede{margin-top:1.3rem;font-size:var(--t-md);color:var(--ink-2);max-width:38ch}

.chan{margin-top:clamp(2rem,4vw,3rem);display:grid;gap:0;border-top:1px solid var(--line-ink)}
.chan__row{display:flex;align-items:center;gap:1.1rem;padding:1.05rem 0;
  border-bottom:1px solid var(--line-ink);transition:padding-left .45s var(--ease)}
.chan__row:hover{padding-left:.6rem}
.chan__row svg{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:var(--ink);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s,transform .5s var(--ease)}
.chan__row:hover svg{stroke:var(--brass-lo);transform:rotate(-8deg) scale(1.08)}
.chan__row span{display:grid}
.chan__row b{font-family:var(--display);font-size:var(--t-md);font-weight:500;letter-spacing:-.02em;
  font-variation-settings:"SOFT" 20,"WONK" 0}
.chan__row i{font-style:normal;font-size:var(--t-xs);letter-spacing:.16em;color:var(--ink-2);
  font-variation-settings:"wdth" 90}
.chan__btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}

.cta__art{margin:clamp(2.2rem,5vw,3.6rem) 0 0;overflow:hidden;border:1px solid var(--line-ink);
  filter:sepia(.38) saturate(.7) contrast(1.06);mix-blend-mode:multiply;opacity:.86}
.cta__art img{width:100%}

.cta__right{position:relative}
.form{position:relative;background:#fdfbf6;border:1px solid color-mix(in oklab,var(--ink) 13%,transparent);
  padding:clamp(1.4rem,3.2vw,2.5rem);display:grid;gap:1.15rem;align-content:start;
  box-shadow:0 44px 80px -46px rgba(23,19,16,.5)}
.form__hint{font-size:var(--t-sm);color:var(--ink-2);max-width:36ch;margin-bottom:.35rem}

.field{position:relative}
.field input,.field textarea{width:100%;padding:1.55rem 2.6rem .62rem .95rem;
  background:transparent;color:var(--ink);font:inherit;font-size:var(--t-base);
  border:1px solid var(--line-ink);border-radius:2px;resize:vertical;
  transition:border-color .35s,box-shadow .4s var(--ease),background-color .35s}
.field textarea{min-height:104px;padding-top:1.65rem}
.field label{position:absolute;left:.98rem;top:1.42rem;font-size:var(--t-base);color:var(--ink-2);
  pointer-events:none;transform-origin:left top;
  transition:transform .32s var(--ease),color .32s,opacity .3s}
.field--ta label{top:1.5rem}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brass-lo);
  background:#fff;box-shadow:0 0 0 4px color-mix(in oklab,var(--brass) 22%,transparent)}
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.05rem) scale(.7);color:var(--brass-lo)}
.field__msg{display:block;min-height:0;overflow:hidden;font-size:var(--t-xs);color:#a3341f;
  opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s,min-height .3s}
.field.bad input,.field.bad textarea{border-color:#a3341f}
.field.bad .field__msg{opacity:1;transform:none;min-height:1.3rem;padding-top:.32rem}
.field.bad{animation:shake .42s var(--ease)}
@keyframes shake{
  0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.field__ok{position:absolute;right:.95rem;top:1.15rem;width:20px;height:20px;fill:none;
  stroke:var(--brass-lo);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;opacity:0;transition:opacity .3s}
.field.good .field__ok{opacity:1;animation:tick .5s var(--ease) forwards}
@keyframes tick{to{stroke-dashoffset:0}}

.btn--send{margin-top:.35rem;justify-self:start;min-width:170px}
.btn__spin{position:absolute;width:17px;height:17px;border-radius:50%;
  border:2px solid color-mix(in oklab,var(--pitch) 30%,transparent);border-top-color:var(--pitch);
  opacity:0;z-index:2}
.btn__check{position:absolute;width:20px;height:20px;fill:none;stroke:var(--pitch);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;opacity:0;z-index:2}
.btn--send.loading .btn__t{opacity:0}
.btn--send.loading .btn__spin{opacity:1;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn--send.ok .btn__t,.btn--send.ok .btn__spin{opacity:0;animation:none}
.btn--send.ok .btn__check{opacity:1;animation:tick .45s var(--ease) forwards}

.form__done{display:flex;gap:.9rem;align-items:flex-start;padding:1rem;border-radius:2px;
  background:color-mix(in oklab,var(--brass) 22%,transparent);
  border:1px solid color-mix(in oklab,var(--brass) 55%,transparent);
  font-size:var(--t-sm);line-height:1.6}
.form__done[hidden]{display:none}
.form__done svg{width:30px;height:30px;flex:0 0 auto;fill:none;stroke:var(--brass-lo);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:96;
  stroke-dashoffset:96;animation:tick .8s var(--ease) .1s forwards}
.form__done a{color:var(--brass-lo);font-weight:600;border-bottom:1px solid currentColor}
@media (max-width:900px){.cta__grid{grid-template-columns:1fr}.cta__art{display:none}}

/* ══ FOOTER ═══════════════════════════════════════════════════════════ */
.foot{background:var(--pitch);padding:var(--sec) 0 0;overflow:hidden}
.foot__top{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2rem,6vw,5rem)}
.foot__brand p{margin-top:1.2rem;max-width:38ch;font-size:var(--t-sm);line-height:1.7;
  color:color-mix(in oklab,var(--haze) 50%,transparent)}
.brand--foot .brand__mark{width:44px;height:44px}
.foot__map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.6rem)}
.foot__map div{display:grid;gap:.42rem;align-content:start}
.foot__map h4{font-family:var(--sans);font-size:var(--t-xs);letter-spacing:.22em;font-weight:600;
  color:var(--brass);margin-bottom:.5rem;font-variation-settings:"wdth" 88}
.foot__map a{font-size:var(--t-sm);color:color-mix(in oklab,var(--haze) 62%,transparent);
  width:fit-content;position:relative;transition:color .3s}
.foot__map a::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.foot__map a:hover{color:var(--haze)}
.foot__map a:hover::after{transform:scaleX(1);transform-origin:left}
@media (max-width:900px){.foot__top{grid-template-columns:1fr}.foot__map{grid-template-columns:1fr 1fr}}

.foot__wm{margin-top:clamp(3rem,8vw,6rem);padding-inline:clamp(.6rem,1.6vw,1.4rem);overflow:hidden}
.foot__wm{text-align:center}
.foot__wm span{display:inline-block;font-family:var(--display);font-weight:200;
  font-size:11vw;line-height:.84;letter-spacing:-.045em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px color-mix(in oklab,var(--brass) 34%,transparent);
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144;
  background:linear-gradient(100deg,transparent 42%,color-mix(in oklab,var(--brass) 40%,transparent) 50%,transparent 58%);
  -webkit-background-clip:text;background-clip:text;background-size:260% 100%;
  animation:wmShimmer 9s var(--ease-io) infinite}
@keyframes wmShimmer{0%,100%{background-position:180% 0}50%{background-position:-60% 0}}

.foot__bar{margin-top:clamp(1.6rem,4vw,2.6rem);border-top:1px solid color-mix(in oklab,var(--brass) 16%,transparent)}
.foot__bar p{max-width:var(--max);margin-inline:auto;padding:1.3rem var(--gut);
  font-size:var(--t-xs);letter-spacing:.13em;color:color-mix(in oklab,var(--haze) 42%,transparent);
  font-variation-settings:"wdth" 90}

/* ══ BACK TO TOP ══════════════════════════════════════════════════════ */
.totop{position:fixed;right:clamp(1rem,2.4vw,2rem);bottom:clamp(1rem,2.4vw,2rem);z-index:700;
  width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
  background:color-mix(in oklab,var(--bitumen) 88%,transparent);backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s,background-color .35s}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--brass)}
.totop:hover .totop__ar{stroke:var(--pitch)}
.totop__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.totop__ring circle{fill:none;stroke-width:1.5}
.totop__ring circle:first-child{stroke:color-mix(in oklab,var(--brass) 22%,transparent)}
#totopArc{stroke:var(--brass);stroke-dasharray:138.2;stroke-dashoffset:138.2;
  transition:stroke-dashoffset .12s linear}
.totop__ar{width:18px;height:18px;fill:none;stroke:var(--brass);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s,transform .4s var(--ease)}
.totop:hover .totop__ar{transform:translateY(-2px)}

/* ══ TOAST ════════════════════════════════════════════════════════════ */
.toast{position:fixed;left:50%;bottom:clamp(1.2rem,4vh,2.4rem);z-index:950;
  transform:translate(-50%,calc(100% + 3.5rem));padding:.85rem 1.3rem;border-radius:100px;
  background:var(--drum);border:1px solid var(--brass);color:var(--haze);
  font-size:var(--t-sm);font-weight:500;box-shadow:0 22px 48px -20px rgba(0,0,0,.85);
  transition:transform .55s var(--ease);max-width:calc(100vw - 2rem);text-align:center}
.toast.on{transform:translate(-50%,0)}

/* ══ REDUCED MOTION ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .grain{animation:none}
  [data-reveal]{opacity:1;transform:none}
  .hero__h1 .w{transform:none}
  .pour{display:none}
}