/* ==========================================================================
   Bhairev Trident Group · site system v3 ("btg")
   Static CSS. No inline styles anywhere (CSP: style-src 'self').
   Motion is driven by custom properties that btg.js sets through the CSSOM.
   Type: Inter (text), Space Grotesk 700 (headings). Self-hosted.
   ========================================================================== */

@font-face{font-family:"Inter";src:url("/assets/fonts/inter-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-500.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-600.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/assets/fonts/space-grotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* ground */
  --canvas:#0A0908; --surface:#12100C; --surface-2:#1A1711; --surface-3:#221E16;
  /* ink */
  --ink:#F2ECE1; --ink-soft:#B8AE9D; --faint:#8F8676;
  /* accent: one hue, three lightnesses */
  --gold:#D6AB52; --champagne:#F3D893; --copper:#D2A274; --gold-deep:#8A6C2E;
  --line:rgba(214,171,82,.14); --line-strong:rgba(214,171,82,.34); --hair:rgba(242,236,225,.09);
  /* type */
  --display:"Space Grotesk","Inter",system-ui,sans-serif;
  --text:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-xs:.8125rem; --t-sm:.9375rem; --t-md:1.0625rem; --t-lg:1.25rem;
  --t-xl:clamp(1.5rem,2.3vw,1.95rem); --t-2xl:clamp(2rem,4.2vw,3.4rem);
  --t-3xl:clamp(2.4rem,5.6vw,4.9rem); --t-hero:clamp(2.55rem,7vw,6rem);
  /* space: 4px base */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem;
  --section:clamp(4.5rem,10vw,8.5rem);
  --wrap:78rem; --gutter:clamp(1.25rem,4vw,3rem); --bar-h:4.5rem;
  /* shape + depth */
  --r-s:10px; --r-m:16px; --r-l:26px;
  --shadow-1:0 1px 0 rgba(255,236,200,.05) inset,0 10px 30px -12px rgba(0,0,0,.65);
  --shadow-2:0 1px 0 rgba(255,236,200,.07) inset,0 30px 70px -24px rgba(0,0,0,.8);
  --ease:cubic-bezier(.23,1,.32,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 1rem)}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--text);font-size:var(--t-md);line-height:1.65;letter-spacing:.004em;
  font-feature-settings:"kern","calt";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;min-height:100vh}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0;letter-spacing:-.028em;line-height:1.04;text-wrap:balance;color:var(--ink)}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--canvas)}
:focus-visible{outline:2px solid var(--champagne);outline-offset:3px;border-radius:6px}
html{scrollbar-color:var(--gold-deep) var(--canvas)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:fixed;left:var(--sp-4);top:-5rem;z-index:200;background:var(--gold);color:var(--canvas);padding:.6rem 1rem;border-radius:var(--r-s);font-weight:600;text-decoration:none}
.skip:focus{top:var(--sp-4)}

/* film grain: stops large dark fields banding */
html.nav-open{overflow:hidden}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- shared bits ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:var(--gold)}
.lead{font-size:clamp(1.0625rem,1.5vw,1.3125rem);line-height:1.6;color:var(--ink-soft);max-width:44rem}
.tight{max-width:38rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3rem;padding:0 1.5rem;border-radius:999px;border:1px solid transparent;
  font-family:var(--text);font-weight:600;font-size:var(--t-sm);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),transform .12s var(--ease)}
.btn:active{transform:scale(.97)}
.btn svg{width:1.05rem;height:1.05rem;transition:transform .2s var(--ease)}
.btn--gold{background:var(--gold);color:var(--canvas)}
.btn--gold:hover{background:var(--champagne)}
.btn--line{border-color:var(--line-strong);color:var(--ink);background:rgba(18,16,12,.5)}
.btn--line:hover{border-color:var(--gold);color:var(--champagne)}
@media (hover:hover) and (pointer:fine){.btn:hover svg{transform:translateX(3px)}}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.tlink{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--champagne);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:.15rem;transition:border-color .16s var(--ease),color .16s var(--ease)}
.tlink:hover{border-color:var(--champagne)}
.tlink svg{width:1rem;height:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;padding:.3rem .8rem;border:1px solid var(--line);border-radius:999px;font-size:var(--t-xs);font-weight:500;color:var(--ink-soft);background:rgba(18,16,12,.6);white-space:nowrap}

/* reveal (JS adds .in). Without JS everything is visible. */
.js [data-rv]{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js [data-rv].in{opacity:1;transform:none}
.js [data-wipe]{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease)}
.js [data-wipe].in{clip-path:inset(0 0 0 0)}

/* ---------- header ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:80;height:var(--bar-h);transition:background-color .25s var(--ease),border-color .25s var(--ease),backdrop-filter .25s var(--ease);border-bottom:1px solid transparent}
.bar.is-scrolled,.bar.is-open{background:rgba(10,9,8,.78);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:var(--line)}
.bar__in{height:100%;display:flex;align-items:center;gap:var(--sp-6)}
.brand{display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;flex:none}
.brand img{width:2.35rem;height:auto}
.brand__words{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--display);font-weight:700;font-size:1.0625rem;letter-spacing:.3em;color:var(--champagne)}
.brand__sub{font-size:.6875rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--faint);margin-top:.35rem}
.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem);margin-left:auto}
.nav>a,.nav__top{font-size:var(--t-sm);font-weight:500;color:var(--ink-soft);text-decoration:none;padding:.5rem 0;transition:color .16s var(--ease)}
.nav>a:hover,.nav__top:hover,.nav>a[aria-current],.nav__top[aria-current]{color:var(--champagne)}
.nav__item{position:relative;display:flex;align-items:center;gap:.15rem}
.nav__toggle{background:none;border:0;padding:.4rem;cursor:pointer;color:var(--ink-soft);border-radius:6px}
.nav__toggle svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.nav__item.is-open .nav__toggle svg{transform:rotate(180deg)}
.nav__cta{display:none}
.bar>.wrap>.btn{min-height:2.6rem;padding:0 1.2rem}
.menu{display:none;width:2.75rem;height:2.75rem;border:1px solid var(--line-strong);border-radius:999px;background:rgba(18,16,12,.6);cursor:pointer;position:relative}
.menu span,.menu span::before,.menu span::after{position:absolute;left:50%;top:50%;width:1.05rem;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .25s var(--ease),background-color .2s}
.menu span::before,.menu span::after{content:"";left:0;top:0;transform:translateY(-5px)}
.menu span::after{transform:translateY(5px)}
.bar.is-open .menu span{background:transparent}
.bar.is-open .menu span::before{transform:rotate(45deg)}
.bar.is-open .menu span::after{transform:rotate(-45deg)}

.mega{position:absolute;left:50%;top:calc(100% + .9rem);width:min(60rem,92vw);transform:translate(-50%,8px);opacity:0;visibility:hidden;
  background:rgba(18,16,12,.97);border:1px solid var(--line-strong);border-radius:var(--r-l);box-shadow:var(--shadow-2);padding:var(--sp-6);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s}
.nav__item.is-open .mega{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.mega__cat{display:block;text-decoration:none;margin-bottom:var(--sp-3)}
.mega__name{display:block;font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;color:var(--ink)}
.mega__cat:hover .mega__name{color:var(--champagne)}
.mega__short{display:block;font-size:var(--t-xs);color:var(--faint);margin-top:.2rem}
.mega__list a{display:block;padding:.38rem 0;font-size:var(--t-sm);color:var(--ink-soft);text-decoration:none;border-top:1px solid var(--hair)}
.mega__list a:hover{color:var(--champagne)}
.mega__all{grid-column:1/-1;border-top:1px solid var(--line);padding-top:var(--sp-4)}
.mega__all a{font-weight:600;color:var(--champagne);text-decoration:none}

@media (max-width:960px){
  .bar.is-scrolled,.bar.is-open{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,9,8,.96)}
  .menu{display:block;margin-left:auto}
  .bar>.wrap>.btn{display:none}
  .nav{position:fixed;inset:var(--bar-h) 0 0 0;margin:0;flex-direction:column;align-items:stretch;gap:0;padding:var(--sp-5) var(--gutter) var(--sp-8);background:rgba(10,9,8,.98);
    overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s .22s}
  .bar.is-open .nav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav>a,.nav__top{font-family:var(--display);font-weight:700;font-size:1.6rem;letter-spacing:-.02em;color:var(--ink);padding:.9rem 0;border-bottom:1px solid var(--hair)}
  .nav__item{flex-wrap:wrap;justify-content:space-between;border-bottom:1px solid var(--hair)}
  .nav__item .nav__top{border:0;flex:1}
  .nav__toggle{padding:.9rem}
  .nav>a.nav__cta{align-self:flex-start;margin-top:var(--sp-6);font-family:var(--text);font-size:1rem;letter-spacing:0;color:var(--canvas);padding:.85rem 1.6rem;border:0}
  .mega{position:static;transform:none;width:100%;opacity:1;visibility:visible;display:none;border:0;background:none;box-shadow:none;padding:0 0 var(--sp-4);grid-template-columns:1fr;gap:var(--sp-4)}
  .nav__item.is-open .mega{display:grid;transform:none}
  .nav__cta{display:inline-flex;margin-top:var(--sp-5);align-self:flex-start}
}

/* ==========================================================================
   HOME · hero (four planes)
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;isolation:isolate;padding:calc(var(--bar-h) + var(--sp-8)) 0 var(--sp-8)}
.hero__stage{position:absolute;inset:0;z-index:-1;pointer-events:none}
.pl{position:absolute;will-change:transform}
/* far: rails + glow */
.pl--glow{inset:-20% -10% -10% 30%;background:
  radial-gradient(45% 50% at 62% 42%,rgba(214,171,82,.20),transparent 70%),
  radial-gradient(38% 42% at 78% 70%,rgba(210,162,116,.12),transparent 72%);
  transform:translate3d(calc(var(--mx,0) * -10px),calc(var(--hp,0) * 60px + var(--my,0) * -8px),0)}
.pl--rails{inset:0 0 0 0;transform:translate3d(calc(var(--mx,0) * -6px),calc(var(--hp,0) * 30px),0);opacity:calc(1 - var(--hp,0) * .9)}
.pl--rails svg{width:100%;height:100%}
.rail{stroke:var(--gold);stroke-opacity:.18;stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.rail-pulse{stroke:url(#railFade);stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke;stroke-dasharray:90 1400;animation:pulse 7s linear infinite}
.rail-pulse--2{animation-duration:9s;animation-delay:-3s}
.rail-pulse--3{animation-duration:11s;animation-delay:-6s}
@keyframes pulse{from{stroke-dashoffset:90}to{stroke-dashoffset:-1400}}
/* mid: big outlined mark */
.pl--mark{right:-4%;top:50%;width:min(78vh,56vw);aspect-ratio:200/164;margin-top:calc(min(78vh,56vw) * -.41 - 3vh);
  transform:translate3d(calc(var(--mx,0) * -18px),calc(var(--hp,0) * -90px + var(--my,0) * -10px),0) scale(calc(1 + var(--hp,0) * .12));opacity:calc(1 - var(--hp,0) * 1.1)}
.pl--mark svg{width:100%;height:100%;overflow:visible}
.mk-line{fill:none;stroke:var(--gold);stroke-width:.7;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-opacity:.55;stroke-width:1.1;
  stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s var(--ease) .15s forwards}
.mk-fill{fill:url(#mkFill);opacity:.9}
@keyframes draw{to{stroke-dashoffset:0}}
/* near: soft foreground discs that overlap the mark */
.pl--near{inset:0;transform:translate3d(calc(var(--mx,0) * -34px),calc(var(--hp,0) * -170px + var(--my,0) * -16px),0)}
.disc{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(243,216,147,.55),rgba(214,171,82,.12) 55%,transparent 72%)}
.disc--a{width:9vmax;height:9vmax;right:9%;bottom:14%;opacity:.55}
.disc--b{width:4.5vmax;height:4.5vmax;right:36%;top:20%;opacity:.4}
.disc--c{width:14vmax;height:14vmax;right:-4%;top:6%;opacity:.28}
.hero__in{position:relative;display:grid;gap:var(--sp-6);max-width:46rem;transform:translate3d(0,calc(var(--hp,0) * 40px),0)}
.cred{display:inline-flex;align-items:center;gap:.8rem;font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.cred::before{content:"";width:2rem;height:1px;background:var(--gold)}
.hero h1{font-size:var(--t-hero);line-height:.98;letter-spacing:-.04em;max-width:13ch}
.hero .lead{max-width:34rem;font-size:clamp(1.0625rem,1.7vw,1.35rem)}
.hero .btn-row{margin-top:var(--sp-2)}
.hero__in>*{animation:rise .9s var(--ease) both}
.hero__in>*:nth-child(2){animation-delay:.08s}.hero__in>*:nth-child(3){animation-delay:.16s}.hero__in>*:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}

/* ribbon */
.ribbon{border-block:1px solid var(--line);padding:var(--sp-5) 0;overflow:hidden;position:relative;background:var(--surface)}
.ribbon__label{font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:var(--sp-4)}
.ribbon__mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.ribbon__track{display:flex;width:max-content;animation:drift 48s linear infinite}
.ribbon:hover .ribbon__track{animation-play-state:paused}
.ribbon__set{display:flex;align-items:center;flex:none}
.ribbon__set li{display:flex;align-items:center;font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2.2vw,1.75rem);letter-spacing:-.02em;color:var(--ink-soft);white-space:nowrap}
.ribbon__set li::after{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--gold);margin-inline:clamp(1.25rem,3vw,2.5rem)}
@keyframes drift{to{transform:translate3d(-50%,0,0)}}

/* ---------- quiet act ---------- */
.quiet{position:relative}
.motion .quiet{height:190vh}
.quiet__stage{display:grid;align-content:center;min-height:100svh;padding:calc(var(--bar-h) + var(--sp-6)) 0 var(--sp-8)}
.motion .quiet__stage{position:sticky;top:0;height:100svh;min-height:0}
.quiet p.big{font-family:var(--display);font-weight:700;font-size:var(--t-3xl);line-height:1.02;letter-spacing:-.04em;max-width:17ch}
.quiet .w{opacity:1;transition:opacity .35s var(--ease),color .35s var(--ease)}
.motion .quiet .w{opacity:.14}
.motion .quiet .w.on{opacity:1}
.quiet p.big--gold{color:var(--gold);margin-top:var(--sp-5)}
.quiet p.big--gold .w.on{color:var(--gold)}

/* ---------- the handoff machine (PEAK) ---------- */
.machine{position:relative;border-block:1px solid var(--line);background:linear-gradient(180deg,var(--canvas),var(--surface) 30%,var(--surface) 70%,var(--canvas))}
.motion .machine{height:440vh}
.machine__stage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:var(--sp-7);align-items:center;min-height:100svh;padding:calc(var(--bar-h) + var(--sp-6)) var(--gutter) var(--sp-7);max-width:var(--wrap);margin-inline:auto}
.motion .machine__stage{position:sticky;top:0;height:100svh;min-height:0}
.m-copy{position:relative;min-height:19rem}
.m-eyebrow{margin-bottom:var(--sp-5)}
.m-states{position:relative}
.motion .m-states{min-height:13rem}
.m-state{display:grid;gap:var(--sp-4)}
.motion .m-state{position:absolute;inset:0 0 auto 0;opacity:0;transform:translate3d(0,16px,0);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.motion .machine[data-ph="1"] .m-state--1,.motion .machine[data-ph="2"] .m-state--2,.motion .machine[data-ph="3"] .m-state--3{opacity:1;transform:none;pointer-events:auto}
.m-state h2{font-size:var(--t-2xl);letter-spacing:-.035em;max-width:14ch}
.m-state .lead{font-size:var(--t-lg);max-width:26rem}
.m-lines{display:grid;gap:.25rem;font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.6vw,2.2rem);letter-spacing:-.03em;line-height:1.12;color:var(--ink-soft)}
.m-lines span:last-child{color:var(--ink)}
.m-state--3 h2{color:var(--champagne)}
.m-state:not(:first-child){margin-top:var(--sp-7)}
.motion .m-state:not(:first-child){margin-top:0}
.m-art{position:relative;width:100%}
.m-art svg{width:100%;height:auto;max-height:68svh;overflow:visible}
.machine{--s:0;--t:1;--d:1;--pl:1}
.motion .machine{--s:1;--t:0;--d:0;--pl:0}
/* prongs travel from scattered (s=1) to the exact mark (s=0) */
.g-l{transform-origin:67px 126px;transform:translate(calc(var(--s) * var(--k,1) * -52px),calc(var(--s) * 22px)) rotate(calc(var(--s) * -7deg))}
.g-c{transform-origin:100px 126px;transform:translate(0,calc(var(--s) * -16px)) rotate(calc(var(--s) * 2deg))}
.g-r{transform-origin:132px 126px;transform:translate(calc(var(--s) * var(--k,1) * 52px),calc(var(--s) * -12px)) rotate(calc(var(--s) * 6deg))}
.m-lit{fill:url(#mLit)}.m-shade{fill:url(#mShade)}.m-legL{fill:url(#mLegL)}.m-legR{fill:url(#mLegR)}
.m-crest{stroke:#FFE9CC;stroke-opacity:.55;stroke-width:.8;fill:none}
.m-thread{fill:none;stroke:var(--champagne);stroke-width:2;stroke-linecap:round}
.t-l{opacity:calc(1 - var(--t) * 0)}
.t-c{opacity:calc(.5 + var(--t) * .5)}
.t-r{opacity:calc(.22 + var(--t) * .78)}
.m-gap{stroke:var(--faint);stroke-width:.7;stroke-dasharray:2 3;fill:none;opacity:calc(var(--s) * .9)}
.m-end{fill:var(--canvas);stroke:var(--gold);stroke-width:1.6}
.m-end-lit{fill:var(--champagne);opacity:var(--d)}
.m-pulse{fill:var(--canvas);stroke:var(--champagne);stroke-width:1.4;opacity:calc(var(--d) * (1 - var(--pl) * .0))}
.m-pulse{transform:translate(calc(var(--pl) * 70px),0)}
.m-label{font-family:var(--display);font-weight:700;font-size:8.4px;letter-spacing:.02em;fill:var(--ink-soft)}
.m-label--on{fill:var(--champagne);opacity:var(--d)}
.m-tag{font-family:var(--text);font-weight:600;font-size:3.9px;letter-spacing:.2em;fill:var(--faint);text-transform:uppercase}
.m-ctx{fill:none;stroke:var(--gold);stroke-width:.8;opacity:.8}
.m-ctx-fill{fill:var(--gold);opacity:.85}

@media (max-width:860px){
  .machine__stage{grid-template-columns:1fr;gap:var(--sp-4);align-content:start;padding-top:calc(var(--bar-h) + var(--sp-4))}
  .m-art{order:-1;--k:.4}
  .m-art svg{overflow:hidden}
  .m-art svg{max-height:40svh}
  .m-copy{min-height:15rem}
  .m-state h2{max-width:18ch}
}

/* three prongs */
.prongs{padding:var(--section) 0}
.sec-head{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-8)}
.sec-head h2{font-size:var(--t-2xl);letter-spacing:-.035em;max-width:16ch}
.prongs__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--sp-6);align-items:start}
.prong{grid-column:span 4;padding-top:var(--sp-5);border-top:1px solid var(--line-strong);position:relative}
.prong::before{content:"";position:absolute;left:0;top:-1px;width:3.5rem;height:3px;background:var(--gold)}
.prong:nth-child(1){margin-top:4rem}
.prong:nth-child(2){margin-top:0}
.prong:nth-child(3){margin-top:7rem}
.prong h3{font-size:var(--t-2xl);margin-bottom:var(--sp-4);color:var(--champagne)}
.prong p{color:var(--ink-soft);max-width:26rem}
.prongs__close{margin-top:var(--sp-9);font-family:var(--display);font-weight:700;font-size:var(--t-xl);letter-spacing:-.025em;color:var(--ink);max-width:28ch}
@media (max-width:860px){
  .prongs__grid{display:grid;grid-template-columns:1fr;row-gap:var(--sp-7)}
  .prong,.prong:nth-child(n){grid-column:auto;margin-top:0}
}

/* ---------- diagnostic ---------- */
.diag{padding:var(--section) 0;background:var(--surface);border-block:1px solid var(--line);position:relative;overflow:hidden}
.diag::before{content:"";position:absolute;inset:auto -20% -40% 30%;height:70%;background:radial-gradient(50% 60% at 50% 50%,rgba(214,171,82,.10),transparent 70%);pointer-events:none}
.diag__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:var(--sp-7);align-items:start;position:relative}
.diag__list{display:grid;gap:.5rem}
.pick{width:100%;text-align:left;display:flex;align-items:center;gap:var(--sp-4);padding:1rem 1.15rem;border:1px solid var(--hair);border-radius:var(--r-m);background:rgba(10,9,8,.5);cursor:pointer;
  font-weight:500;font-size:var(--t-md);line-height:1.35;color:var(--ink-soft);transition:border-color .16s var(--ease),background-color .16s var(--ease),color .16s var(--ease),transform .12s var(--ease)}
.pick::before{content:"";flex:none;width:.65rem;height:.65rem;border-radius:50%;border:1.5px solid var(--faint);transition:background-color .16s,border-color .16s}
.pick:hover{border-color:var(--line-strong);color:var(--ink)}
.pick:active{transform:scale(.99)}
.pick[aria-selected="true"]{border-color:var(--gold);background:rgba(214,171,82,.08);color:var(--ink)}
.pick[aria-selected="true"]::before{background:var(--gold);border-color:var(--gold)}
.diag__panels{position:sticky;top:calc(var(--bar-h) + 1.5rem)}
.dpanel{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line-strong);border-radius:var(--r-l);padding:clamp(1.5rem,3vw,2.6rem);box-shadow:var(--shadow-2);display:grid;gap:var(--sp-5)}
.js .dpanel[hidden]{display:none}
.js .dpanel{animation:swap .35s var(--ease)}
@keyframes swap{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.dpanel__cat{font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.dpanel h3{font-size:var(--t-2xl);letter-spacing:-.035em}
.dpanel__tag{font-size:var(--t-lg);color:var(--ink);font-weight:500;line-height:1.4}
.dpanel__means{border-top:1px solid var(--line);padding-top:var(--sp-4)}
.dpanel__means h4{font-family:var(--text);font-weight:600;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:var(--sp-2)}
.dpanel__means p{color:var(--ink-soft)}
.dpanel__start{font-size:var(--t-sm);color:var(--faint)}
.dpanel__start strong{color:var(--champagne);font-weight:600}
@media (max-width:900px){.diag__grid{grid-template-columns:1fr}.diag__panels{position:static}}

/* ---------- method (sticky stack) ---------- */
.method{padding:var(--section) 0}
.method__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-8);align-items:start}
.method__stack{position:sticky;top:calc(var(--bar-h) + 2rem)}
.method__stack svg{width:100%;height:auto;overflow:visible}
.slab-top{fill:var(--surface-2);stroke:var(--line-strong);stroke-width:1;transition:fill .5s var(--ease),stroke .5s var(--ease)}
.slab-side-l{fill:#0F0D0A;stroke:var(--line);stroke-width:1;transition:fill .5s var(--ease)}
.slab-side-r{fill:#0C0A08;stroke:var(--line);stroke-width:1;transition:fill .5s var(--ease)}
.slab{transition:transform .6s var(--ease)}
.slab text{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.04em;fill:var(--faint);transition:fill .4s var(--ease)}
.slab.is-on .slab-top{fill:url(#slabGold);stroke:var(--champagne)}
.slab.is-on .slab-side-l{fill:#4B3A18}
.slab.is-on .slab-side-r{fill:#33270F}
.slab.is-on text{fill:var(--canvas)}
.slab.is-past .slab-top{fill:var(--surface-3);stroke:var(--gold)}
.slab.is-past text{fill:var(--gold)}
.method__stack[data-step="0"] .slab--0,.method__stack[data-step="1"] .slab--1,.method__stack[data-step="2"] .slab--2,.method__stack[data-step="3"] .slab--3{transform:translate3d(0,-14px,0)}
.steps{display:grid}
.step{min-height:46vh;padding:var(--sp-6) 0;border-top:1px solid var(--hair);display:grid;align-content:start;gap:var(--sp-3);opacity:.45;transition:opacity .4s var(--ease)}
.step.is-on{opacity:1}
.step__n{font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.step h3{font-size:var(--t-2xl)}
.step p{color:var(--ink-soft);max-width:28rem}
.method__close{margin-top:var(--sp-7);font-family:var(--display);font-weight:700;font-size:var(--t-xl);letter-spacing:-.025em;max-width:24ch;color:var(--champagne)}
@media (max-width:900px){
  .method__grid{grid-template-columns:1fr;gap:var(--sp-5)}
  .method__stack{position:static;max-width:22rem}
  .step{min-height:0;opacity:1}
}

/* ---------- where we work ---------- */
.work{padding:var(--section) 0;background:var(--surface);border-block:1px solid var(--line)}
.rows{border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) auto;gap:var(--sp-6);align-items:center;padding:var(--sp-6) var(--sp-4);border-top:1px solid var(--line);text-decoration:none;
  transition:background-color .25s var(--ease),padding .25s var(--ease)}
.row h3{font-size:var(--t-2xl);letter-spacing:-.035em;transition:color .2s var(--ease)}
.row__meta{display:grid;gap:.5rem}
.row__plat{font-size:var(--t-sm);font-weight:600;color:var(--gold)}
.row__desc{color:var(--ink-soft)}
.row__go{width:3.25rem;height:3.25rem;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--champagne);transition:background-color .2s var(--ease),color .2s var(--ease),transform .25s var(--ease)}
.row__go svg{width:1.2rem;height:1.2rem}
.row:hover{background:rgba(214,171,82,.05)}
.row:hover h3{color:var(--champagne)}
.row:hover .row__go{background:var(--gold);color:var(--canvas);transform:translateX(4px)}
.work__foot{margin-top:var(--sp-6)}
@media (max-width:860px){.row{grid-template-columns:1fr auto;row-gap:var(--sp-3);padding-inline:0}.row__meta{grid-column:1/-1;order:3}}

/* ---------- conductor + band ---------- */
.cond{padding:var(--section) 0}
.cond__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--sp-8);align-items:start}
.cond h2{font-size:var(--t-2xl);letter-spacing:-.035em;margin-bottom:var(--sp-5)}
.cond__body{display:grid;gap:var(--sp-5)}
.cond__body p{color:var(--ink-soft);max-width:34rem}
.svc{border-top:1px solid var(--line-strong)}
.svc a{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr) auto;gap:var(--sp-4);align-items:center;padding:var(--sp-5) 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .25s var(--ease),background-color .25s var(--ease)}
.svc b{font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:-.02em}
.svc span{color:var(--ink-soft);font-size:var(--t-sm)}
.svc svg{width:1.1rem;height:1.1rem;color:var(--gold)}
.svc a:hover{padding-inline:var(--sp-3);background:rgba(214,171,82,.05)}
.svc a:hover b{color:var(--champagne)}
@media (max-width:900px){.cond__grid{grid-template-columns:1fr;gap:var(--sp-7)}.svc a{grid-template-columns:1fr auto}.svc span{grid-column:1/-1;order:3}}
.band{padding:var(--sp-9) 0;border-block:1px solid var(--line);background:linear-gradient(90deg,var(--surface),var(--surface-2))}
.band__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:var(--sp-7);align-items:center}
.band h2{font-size:var(--t-2xl);letter-spacing:-.035em;max-width:16ch;margin-top:var(--sp-3)}
.band p{color:var(--ink-soft)}
@media (max-width:960px){.band__in{grid-template-columns:1fr;gap:var(--sp-5)}}

/* ---------- close ---------- */
.close{padding:var(--section) 0 calc(var(--section) * .9);position:relative;overflow:hidden}
.close::before{content:"";position:absolute;inset:-10% -10% auto 30%;height:80%;background:radial-gradient(50% 55% at 60% 40%,rgba(214,171,82,.12),transparent 72%);pointer-events:none}
.close__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--sp-8);align-items:center;position:relative}
.close h2{font-size:var(--t-3xl);letter-spacing:-.04em;max-width:13ch;margin:var(--sp-4) 0 var(--sp-5)}
.close .lead{margin-bottom:var(--sp-7)}
.ask{display:grid;gap:var(--sp-4);max-width:40rem}
.ask label{font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ask textarea{width:100%;min-height:7.5rem;resize:vertical;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-m);padding:1rem 1.15rem;font:inherit;line-height:1.55;transition:border-color .16s var(--ease)}
.ask textarea::placeholder{color:var(--faint)}
.ask textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,171,82,.18)}
.ask__note{font-size:var(--t-xs);color:var(--faint);max-width:38rem}
.ask__note a{color:var(--champagne)}
.close__art{display:grid;place-items:center}
.close__mark{width:min(100%,24rem);aspect-ratio:200/164;position:relative}
.close__mark img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.7))}
.js .close__mark{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease)}
.js .close__mark.in{clip-path:inset(0 0 0 0)}
@media (max-width:900px){.close__grid{grid-template-columns:1fr}.close__art{order:-1;justify-items:start}.close__mark{width:9rem}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:var(--sp-8) 0 var(--sp-6);background:var(--canvas)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--sp-7);align-items:start}
.foot__motto{margin-top:var(--sp-4);font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.02em;color:var(--gold)}
.foot__nav{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem var(--sp-6)}
.foot__nav a{padding:.35rem 0;color:var(--ink-soft);text-decoration:none;font-size:var(--t-sm);border-bottom:1px solid var(--hair)}
.foot__nav a:hover{color:var(--champagne)}
.foot__small{margin-top:var(--sp-8);display:grid;gap:.4rem;font-size:var(--t-xs);color:var(--faint);max-width:50rem}
@media (max-width:760px){.foot__grid{grid-template-columns:1fr}}

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
.phero{position:relative;overflow:hidden;isolation:isolate;padding:calc(var(--bar-h) + var(--sp-9)) 0 var(--sp-8);border-bottom:1px solid var(--line);min-height:68svh;display:grid;align-items:end}
.phero__glow{position:absolute;inset:-30% -10% -20% 35%;z-index:-2;background:radial-gradient(45% 55% at 60% 45%,rgba(214,171,82,.17),transparent 70%);transform:translate3d(calc(var(--mx,0) * -12px),calc(var(--sy,0) * 40px),0)}
.phero__art{position:absolute;z-index:-1;right:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));top:50%;width:min(44vw,34rem);transform:translate3d(calc(var(--mx,0) * -16px),calc(-50% + var(--sy,0) * -28px),0)}
.phero__art svg{width:100%;height:auto;overflow:visible}
.phero__in{display:grid;gap:var(--sp-5);max-width:40rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;font-size:var(--t-xs);font-weight:500;letter-spacing:.04em;color:var(--faint)}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--champagne)}
.crumbs span[aria-hidden]{color:var(--gold-deep)}
.phero h1{font-size:var(--t-3xl);letter-spacing:-.042em;line-height:.98}
.phero .lead{max-width:36rem}
.phero__in>*{animation:rise .9s var(--ease) both}.phero__in>*:nth-child(2){animation-delay:.07s}.phero__in>*:nth-child(3){animation-delay:.14s}.phero__in>*:nth-child(4){animation-delay:.21s}
@media (max-width:900px){.phero{min-height:0;padding-top:calc(var(--bar-h) + var(--sp-8))}.phero__art{opacity:.28;width:70vw;right:-12vw}}
/* motif drawing */
.dr{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.2s var(--ease) .2s forwards}
.dr--2{animation-delay:.5s}.dr--3{animation-delay:.8s}.dr--4{animation-delay:1.1s}.dr--5{animation-delay:1.4s}
.dr--soft{stroke-opacity:.35}
.nd{fill:var(--canvas);stroke:var(--gold);stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:0;animation:fadein .6s var(--ease) forwards}
.nd--lit{fill:var(--champagne)}
.nd:nth-of-type(1){animation-delay:.3s}.nd:nth-of-type(2){animation-delay:.6s}.nd:nth-of-type(3){animation-delay:.9s}.nd:nth-of-type(4){animation-delay:1.2s}.nd:nth-of-type(5){animation-delay:1.5s}.nd:nth-of-type(6){animation-delay:1.8s}
.mt{font-family:var(--text);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;fill:var(--ink-soft);opacity:0;animation:fadein .6s var(--ease) 1.2s forwards}
@keyframes fadein{to{opacity:1}}

/* jump bar */
.jumpbar{position:sticky;top:var(--bar-h);z-index:60;background:rgba(10,9,8,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.jumpbar .wrap{display:flex;gap:.5rem;padding-block:.8rem;overflow-x:auto;scrollbar-width:none}
.jumpbar .wrap::-webkit-scrollbar{display:none}
.jump{display:inline-flex;align-items:center;padding:.45rem 1rem;border:1px solid var(--line);border-radius:999px;font-size:var(--t-sm);font-weight:500;color:var(--ink-soft);text-decoration:none;white-space:nowrap;transition:border-color .16s var(--ease),color .16s var(--ease),background-color .16s var(--ease)}
.jump:hover{border-color:var(--line-strong);color:var(--ink)}
.jump.is-on{border-color:var(--gold);color:var(--canvas);background:var(--gold)}

/* solution entries */
.sols{padding:var(--sp-9) 0 var(--sp-8)}
.sol{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);gap:var(--sp-8);padding:var(--sp-8) 0;border-top:1px solid var(--line-strong);scroll-margin-top:calc(var(--bar-h) + 4.5rem)}
.sol:first-child{border-top:0;padding-top:var(--sp-4)}
.sol__head{position:sticky;top:calc(var(--bar-h) + 6rem);align-self:start;display:grid;gap:var(--sp-4)}
.sol__head h2{font-size:var(--t-2xl);letter-spacing:-.04em}
.sol__tag{font-size:var(--t-lg);color:var(--champagne);font-weight:500;line-height:1.4;max-width:22rem}
.sol__body{display:grid;gap:var(--sp-6)}
.sol__body>p{font-size:clamp(1.0625rem,1.35vw,1.2rem);line-height:1.7;color:var(--ink-soft);max-width:40rem}
.means{border:1px solid var(--line-strong);border-radius:var(--r-l);padding:clamp(1.25rem,2.4vw,2rem);background:linear-gradient(180deg,rgba(214,171,82,.08),rgba(214,171,82,.02));box-shadow:var(--shadow-1)}
.means h3{font-family:var(--text);font-weight:600;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--sp-3);letter-spacing:.14em}
.means p{font-size:var(--t-lg);line-height:1.5;color:var(--ink);font-weight:500;max-width:36rem}
.built{display:grid;gap:var(--sp-3)}
.built h3{font-family:var(--text);font-weight:600;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.sol__start{font-size:var(--t-sm);color:var(--faint)}
.sol__start strong{color:var(--champagne);font-weight:600}
@media (max-width:900px){.sol{grid-template-columns:1fr;gap:var(--sp-5)}.sol__head{position:static}}
.versions{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.versions div{padding:var(--sp-4) var(--sp-4) var(--sp-4) 0;border-bottom:1px solid var(--line)}
.versions dt{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;color:var(--champagne)}
.versions dd{margin:.3rem 0 0;color:var(--ink-soft);font-size:var(--t-sm);max-width:24rem}
@media (max-width:640px){.versions{grid-template-columns:1fr}}
.others{padding:var(--sp-8) 0;border-top:1px solid var(--line);background:var(--surface)}
.others h2{font-size:var(--t-xl);margin-bottom:var(--sp-6)}
.others__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
.other{display:grid;gap:var(--sp-2);padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--r-l);text-decoration:none;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.other b{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.025em}
.other span{color:var(--ink-soft);font-size:var(--t-sm);max-width:32rem}
.other:hover{border-color:var(--gold);background:rgba(214,171,82,.05)}
.other:hover b{color:var(--champagne)}
@media (max-width:760px){.others__grid{grid-template-columns:1fr}}
.endband{padding:var(--sp-9) 0;text-align:left;position:relative;overflow:hidden}
.endband::before{content:"";position:absolute;inset:-30% 20% auto 40%;height:140%;background:radial-gradient(50% 50% at 50% 50%,rgba(214,171,82,.12),transparent 70%);pointer-events:none}
.endband__in{position:relative;display:grid;gap:var(--sp-5);max-width:44rem}
.endband h2{font-size:var(--t-3xl);letter-spacing:-.04em;max-width:15ch}
.endband p{color:var(--ink-soft);font-size:var(--t-lg);max-width:32rem}

/* overview + hub */
.cats{padding:var(--sp-9) 0}
.cat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:var(--sp-8);padding:var(--sp-8) 0;border-top:1px solid var(--line-strong)}
.cat:first-child{border-top:0;padding-top:0}
.cat__head{display:grid;gap:var(--sp-4);align-content:start}
.cat__head h2{font-size:var(--t-2xl);letter-spacing:-.04em}
.cat__head p{color:var(--ink-soft);max-width:30rem}
.cat__list{border-top:1px solid var(--line)}
.cat__list a{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr) auto;gap:var(--sp-4);align-items:center;padding:var(--sp-4) 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .25s var(--ease),background-color .25s var(--ease)}
.cat__list b{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
.cat__list span{color:var(--ink-soft);font-size:var(--t-sm)}
.cat__list svg{width:1.1rem;height:1.1rem;color:var(--gold)}
.cat__list a:hover{padding-inline:var(--sp-3);background:rgba(214,171,82,.05)}
.cat__list a:hover b{color:var(--champagne)}
@media (max-width:900px){.cat{grid-template-columns:1fr;gap:var(--sp-5)}.cat__list a{grid-template-columns:1fr auto}.cat__list span{grid-column:1/-1;order:3}}

.issues,.dos{padding:var(--sp-9) 0}
.issues h2,.dos h2,.verdict h2{font-size:var(--t-2xl);letter-spacing:-.035em;margin-bottom:var(--sp-7);max-width:16ch}
.issue{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--sp-6);padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.issue:last-child{border-bottom:1px solid var(--line)}
.issue b{font-family:var(--display);font-weight:700;font-size:var(--t-xl);letter-spacing:-.03em;line-height:1.1}
.issue p{color:var(--ink-soft);max-width:38rem}
@media (max-width:760px){.issue{grid-template-columns:1fr;gap:var(--sp-2)}}
.verdict{padding:var(--sp-9) 0;background:var(--surface);border-block:1px solid var(--line)}
.verdict__big{font-family:var(--display);font-weight:700;font-size:var(--t-3xl);letter-spacing:-.045em;line-height:1;max-width:14ch;color:var(--champagne);margin-bottom:var(--sp-7)}
.verdict__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-7)}
.verdict__cols p{color:var(--ink-soft);max-width:30rem}
@media (max-width:760px){.verdict__cols{grid-template-columns:1fr;gap:var(--sp-4)}}

/* 404 */
.nf{min-height:100svh;display:grid;place-items:center;padding:var(--sp-9) var(--gutter);text-align:left}
.nf__in{display:grid;gap:var(--sp-5);max-width:34rem}
.nf h1{font-size:var(--t-3xl)}

/* ==========================================================================
   Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ribbon__track{animation:none;flex-wrap:wrap}
  .ribbon__set[aria-hidden]{display:none}
  .rail-pulse,.mk-line{animation:none}
  .mk-line{stroke-dashoffset:0}
  .dr{animation:none;stroke-dashoffset:0}
  .nd,.mt{animation:none;opacity:1}
  .hero__in>*,.phero__in>*{animation:none}
  .js [data-rv],.js [data-wipe],.js .close__mark{opacity:1;transform:none;clip-path:none;transition:none}
  .pl{transform:none!important}
}