/* ════════════════════════════════════════════════════
   MUSTAFA KHAN — v31 "objects"
   light neutral page · dark 3D stages · electric blue
   base · preloader · cursor · header · menu · hero · intro · reel
   ════════════════════════════════════════════════════ */
:root{
  /* ── PALETTE LOCK: blue + white; ink only as the neutral (NX.PAL in v32-kit.js mirrors these for shaders) ── */
  --b900:#0c1257; --b700:#2438f5; --b600:#2f45ff; --b500:#4f66ff; --b400:#6b80ff; --b300:#7d8bff; --b100:#c7cdff;
  --w:#fff; --w2:#eceef4; --stage:#0c0d12;
  --bg:var(--w2); --bg2:#dfe2ea; --ink:#0f1016; --ink2:#4a4d5a; --mute:#666977; --line:rgba(15,16,22,.12);
  --acid:var(--b600); --acid2:var(--b300); --acidsoft:var(--b100);
  --pad:clamp(1rem,3.1vw,2.5rem);
  --ease:cubic-bezier(.16,1,.3,1); --ease2:cubic-bezier(.76,0,.24,1);
  --f:'Geist',system-ui,sans-serif; --fm:'Geist Mono',ui-monospace,monospace;
  --fd:var(--f); --fb:var(--f); --k:var(--ink); --g:var(--mute);
  /* ── TYPE SCALE (one sheet — every section adopts these) ──
     mega: end / archive / footer word · d1: about, work, statement, warp, 'explore', lab · d2: sub-display · h3 · body · two mono sizes */
  --t-mega:clamp(4rem,15vw,15rem); --tr-mega:-.07em; --fw-mega:500;
  --t-d1:clamp(3rem,min(10.6vw,19vh),12rem); --tr-d1:-.065em; --lh-d1:.88;
  --t-d2:clamp(2.4rem,5.4vw,6.4rem); --tr-d2:-.052em; --lh-d2:.94;
  --t-h1:clamp(2.2rem,4.8vw,5rem);
  --t-h3:clamp(1.6rem,3vw,3.4rem); --tr-h3:-.045em;
  --t-body:1.0625rem; --lh-body:1.45;
  --t-k:.72rem; --tr-k:.08em; --t-k2:.62rem; --tr-k2:.1em;
  /* ── RADII + RHYTHM ── */
  --r-stage:28px; --r-card:20px; --r-pill:99px; --r-lg:24px; --r-md:18px; --r-sm:12px;
  --k-top:clamp(6.2rem,14vh,8.4rem); --sp-sec:clamp(6rem,14vh,11rem);
  /* dark-stage label floor + focus ring that reads on ink and on blue */
  --lbl-dk:.62; --ring-dk:0 0 0 2px #fff,0 0 0 4px var(--b600);
}
@media(max-width:760px){:root{--r-stage:22px;--r-card:16px}}
/* compatibility: 'Out there' still reads --t-d2 for its beats — keep its original size until it adopts --t-d1 */
.space{--t-d2:clamp(3rem,8vw,8.5rem)}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
.kicker{font-family:var(--fm);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
*{margin:0;padding:0;box-sizing:border-box}
@supports not (overflow:clip){html{overflow-x:hidden}}
body{font-family:var(--f);background:var(--bg);color:var(--ink);line-height:1.35;overflow-x:clip;-webkit-font-smoothing:antialiased;font-size:16px}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video,canvas,svg{display:block;max-width:100%}ul{list-style:none}[hidden]{display:none!important}
::selection{background:var(--acid);color:#fff}:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.mono{font-family:var(--fm);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ul{position:relative}.ul::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.ul:hover::after{transform:scaleX(1);transform-origin:left}
.mag{display:inline-block}
.sl{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}.sl>span{display:inline-block;will-change:transform}

/* pills */
.pill{display:inline-flex;align-items:center;gap:.9rem;font-size:.8rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:1rem 1.25rem 1rem 1.45rem;border-radius:99px;background:var(--ink);color:#fff;position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--ease)}
.pill::before{content:'';position:absolute;inset:0;background:var(--acid);border-radius:inherit;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease);z-index:-1}
.pill:hover,.pill:focus-visible{color:#fff}.pill:hover::before,.pill:focus-visible::before{transform:scaleX(1);transform-origin:left}
.pill i{font-style:normal;transition:transform .5s var(--ease)}.pill:hover i,.pill:focus-visible i{transform:translateX(4px)}
.pill--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.pill--acid{background:var(--acid);color:#fff}.pill--acid::before{background:#fff}.pill--acid:hover,.pill--acid:focus-visible{color:var(--ink)}

/* fields (menu + footer forms) */
.field{display:flex;align-items:center;border-radius:99px;background:var(--bg2);padding:.3rem .3rem .3rem 1.2rem;transition:box-shadow .3s}
.field:focus-within{box-shadow:0 0 0 3px var(--acid)}
.field input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1rem;padding:.75rem 0;outline:0;color:var(--ink)}
.field button{width:2.8rem;height:2.8rem;border-radius:50%;background:var(--ink);color:#fff;font-size:1.1rem;flex:none;transition:background .3s,color .3s,transform .5s var(--ease)}
.field button:hover{background:var(--acid);color:#fff;transform:rotate(-45deg)}
.field__msg{display:block;min-height:1.1em;margin-top:.5rem;color:var(--ink2)}

/* ── rolling text (hover) — <span class="roll"><span data-t="Label">Label</span></span> ── */
.roll{display:inline-block;overflow:hidden;vertical-align:top;height:1.12em;line-height:1.12}
.roll>span{display:block;transition:transform .6s var(--ease)}
.roll>span::after{content:attr(data-t);display:block}
a:hover>.roll>span,a:hover .ml__t .roll>span,a:focus-visible .roll>span{transform:translateY(-50%)}

/* ── preloader: a flight through space (v32-warp.js paints the canvas; this dark card is the no-WebGL fallback) ── */
.pre{position:fixed;inset:0;z-index:9999;color:#fff;overflow:hidden;background:radial-gradient(60% 50% at 50% 50%,rgba(47,69,255,.22),transparent 70%),radial-gradient(40% 36% at 72% 38%,rgba(36,56,245,.14),transparent 70%),var(--stage)}
.pre__gl{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;pointer-events:none}
.pre::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(12,13,18,.62),rgba(12,13,18,0) 17%,rgba(12,13,18,0) 80%,rgba(12,13,18,.66));transition:opacity .3s var(--ease)}
.pre.is-out::after{opacity:0}
.pre__top,.pre__low,.pre__bar{transition:opacity .38s var(--ease),transform .5s var(--ease)}
.pre.is-out .pre__top{opacity:0;transform:translateY(-10px)}
.pre.is-out .pre__low,.pre.is-out .pre__bar{opacity:0;transform:translateY(10px)}
.pre__top{position:absolute;z-index:1;left:var(--pad);right:var(--pad);top:calc(var(--pad) + .4rem);display:flex;justify-content:space-between;gap:1rem;color:rgba(255,255,255,.62)}
.pre__low{position:absolute;z-index:1;left:var(--pad);right:var(--pad);bottom:calc(var(--pad) + 1.1rem);display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.pre__pct{display:flex;align-items:flex-start;font-size:clamp(1.35rem,1.9vw,1.9rem);font-weight:400;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.pre__col{display:block;height:1em;overflow:hidden}
.pre__strip{display:flex;flex-direction:column;will-change:transform}
.pre__strip span{display:block;height:1em;text-align:center}
.pre__pct em{font-style:normal;font-family:var(--fm);font-size:.42em;letter-spacing:0;margin:.12em 0 0 .3em;color:var(--b300)}
.pre__note{display:inline-flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.66)}
.pre__note::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--b300);animation:prePulse 1.6s infinite}
@keyframes prePulse{0%{box-shadow:0 0 0 0 rgba(125,139,255,.7)}80%,100%{box-shadow:0 0 0 9px rgba(125,139,255,0)}}
.pre__bar{position:absolute;z-index:1;left:var(--pad);right:var(--pad);bottom:var(--pad);height:1px;background:rgba(255,255,255,.12)}
.pre__bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--b600),var(--b300));transform:scaleX(0);transform-origin:left}
.pre__bar b{position:absolute;inset:0}
.pre__bar b::after{content:'';position:absolute;left:0;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(125,139,255,.7)}
@media(max-width:700px){.pre__mid{display:none}}

/* ── cursor: exact dot + lagging ring that morphs by context · colour = --cc (white on dark / blue ground, ink on light; v32-cursor.js) ── */
html.has-cur,html.has-cur *{cursor:none!important}
html:not(.has-cur) :is(.cur,.cur__dot){display:none}
html.has-cur :is(input,textarea,[contenteditable]){cursor:text!important}
.cur,.cur__dot,.cur__tr{--cc:#fff;--cc2:#0f1016;position:fixed;top:0;left:0;z-index:10002;pointer-events:none;transition:opacity .3s}
.cur.on-light,.cur__dot.on-light,.cur__tr.on-light{--cc:#0f1016;--cc2:#fff}
.cur{width:0;height:0}
.cur__s{position:absolute;left:0;top:0;width:0;height:0}
.cur__ring{--k:1;--p:1;--rw:40px;--rh:40px;position:absolute;left:0;top:0;width:var(--rw);height:var(--rh);border-radius:99px;border:1px solid var(--cc);transform:translate(-50%,-50%) scale(calc(var(--k) * var(--p)));transition:transform .55s var(--ease),width .55s var(--ease),height .55s var(--ease),background-color .35s,border-color .35s,opacity .3s}
.cur__echo{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:99px;border:1px solid var(--cc);opacity:0;transform:translate(-50%,-50%);pointer-events:none}
.cur.is-press .cur__ring{--p:.8;transition:transform .12s ease-out,width .55s var(--ease),height .55s var(--ease),background-color .35s,border-color .35s}
.cur:not(.is-press) .cur__ring{transition-timing-function:cubic-bezier(.34,1.7,.5,1),var(--ease),var(--ease),ease,ease,ease}
.cur__txt{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.5);opacity:0;white-space:nowrap;color:var(--cc);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:opacity .25s,transform .5s var(--ease),color .3s}
.cur__x{--l:linear-gradient(var(--cc),var(--cc));position:absolute;left:-14px;top:-14px;width:28px;height:28px;opacity:0;transform:scale(.4) rotate(-45deg);transition:opacity .3s,transform .5s var(--ease);background:var(--l) 50% 0/1px 10px no-repeat,var(--l) 50% 100%/1px 10px no-repeat,var(--l) 0 50%/10px 1px no-repeat,var(--l) 100% 50%/10px 1px no-repeat}
.cur__dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--cc);transition:opacity .3s,background-color .3s}
.cur__dot.is-off{opacity:0}
/* glyphs (never rotated with the ring's stretch) */
.cur__g>*{position:absolute;left:0;top:0;max-width:none;opacity:0;transition:opacity .25s,transform .55s var(--ease)}
.cur__play{width:34px;height:34px;margin:-17px 0 0 -16px;fill:#fff;transform:scale(.3) rotate(-30deg)}
.cur__arw{--r:0deg;width:18px;height:18px;margin:-9px 0 0 -9px;fill:none;stroke:var(--cc2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(var(--r)) scale(.3)}
.cur[data-dir=ext] .cur__arw{--r:-45deg}.cur[data-dir=down] .cur__arw{--r:90deg}.cur[data-dir=up] .cur__arw{--r:-90deg}
.cur__drag{display:flex;align-items:center;gap:.45rem;transform:translate(-50%,-50%) scaleX(.4);color:var(--cc);font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.cur__drag svg{width:11px;height:11px;max-width:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s var(--ease)}
.cur__h{width:11px;height:1.6px;margin:0;left:8px!important;top:8px!important;background:var(--cc);border-radius:2px;transform-origin:0 50%;transform:rotate(45deg) scaleX(0)}
/* states */
.cur.is-hover .cur__ring{--k:1.6;background:rgba(255,255,255,.12);background:color-mix(in srgb,var(--cc) 12%,transparent)}
.cur.is-link .cur__ring{--k:.9;background:var(--cc)}
.cur.is-link .cur__arw{opacity:1;transform:rotate(var(--r)) scale(1);transition-delay:.05s,0s}
.cur.is-view .cur__ring{--k:2.4;background:var(--acid);border-color:var(--acid)}
.cur.is-view .cur__txt,.cur.is-play .cur__txt{color:#fff}
.cur.is-view .cur__txt{opacity:1;transform:translate(-50%,-50%)}
.cur.is-play .cur__ring{--k:2.1;background:var(--acid);border-color:var(--acid);box-shadow:0 10px 30px -8px rgba(47,69,255,.6)}
.cur.is-play .cur__play{opacity:1;transform:none}
.cur.is-play .cur__txt{opacity:1;transform:translate(-50%,54px);font-family:var(--fm);font-weight:500;font-size:.58rem;letter-spacing:.1em;padding:.32rem .6rem .3rem;border-radius:99px;background:rgba(12,13,18,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cur:is(.is-strip,.is-drag) .cur__ring{--k:1;--rw:104px;--rh:42px;background:rgba(255,255,255,.06);background:color-mix(in srgb,var(--cc) 7%,transparent)}
.cur:is(.is-strip,.is-drag) .cur__drag{opacity:1;transform:translate(-50%,-50%)}
.cur:is(.is-strip,.is-drag) .cur__txt,.cur.is-drag .cur__play{opacity:0!important}
.cur.is-drag .cur__drag svg:first-child{transform:translateX(-3px)}.cur.is-drag .cur__drag svg:last-child{transform:translateX(3px)}
.cur.is-drag .cur__ring{--rw:120px}
.cur.is-mag .cur__ring{--k:.62;border-width:1.6px}
.cur.is-mag .cur__h{opacity:1;transform:rotate(45deg) scaleX(1);transition-delay:.08s,.08s}
.cur.is-mag .cur__txt{opacity:1;transform:translate(24px,-50%);font-family:var(--fm);font-weight:500;font-size:.6rem;letter-spacing:.1em}
.cur.is-push .cur__ring{--k:1.6}
.cur.is-push .cur__txt{opacity:1;transform:translate(-50%,-50%);font-family:var(--fm);font-weight:500;font-size:.56rem;letter-spacing:.12em}
.cur.is-push.is-press .cur__ring{--p:.72;background:color-mix(in srgb,var(--cc) 14%,transparent)}
.cur.is-aim .cur__ring{--k:.45;opacity:0}
.cur.is-aim .cur__x{opacity:1;transform:none}
.cur.is-text .cur__ring,.cur.is-off .cur__ring{--k:.3;opacity:0}
/* fallback trail (only when the liquid dye is off): soft ghosts — white on dark, soft blue on light */
.cur__tr{z-index:10001;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--cc);filter:blur(var(--b,3px));opacity:0;transition:none;will-change:transform,opacity}
.cur__tr.on-light{background:var(--b400)}
.cur.is-hide,.cur__dot.is-hide,.cur__tr.is-hide{opacity:0!important}
body.touch .cur,body.touch .cur__dot,body.touch .cur__tr{display:none}
html.q-low .cur__tr{display:none}
/* touch: tap ripple (v32-cursor.js) */
.tap-rip{position:fixed;z-index:10003;width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--b400);pointer-events:none}

/* ── global scroll progress ── */
.sprog{position:fixed;top:0;right:0;bottom:0;width:2px;z-index:880;pointer-events:none;background:rgba(120,125,150,.12)}
.sprog i{display:block;height:100%;background:var(--acid);transform:scaleY(0);transform-origin:top;border-radius:0 0 2px 2px;will-change:transform}

/* ── header — adaptive over light page / dark stages ── */
.hd{--fl:var(--ink);--fc:var(--ink);position:fixed;top:0;left:0;right:0;z-index:900;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) auto;align-items:start;gap:1.5rem;padding:1.6rem var(--pad) 1.4rem;transform:translateY(-130%);transition:transform 1s var(--ease);pointer-events:none}
.hd>*{pointer-events:auto}
.hd.in{transform:none}.hd.in.is-compact{transform:translateY(-.55rem)}
.hd.dk-l{--fl:#fff}.hd.dk-c{--fc:#fff}
.hd::before{content:'';position:absolute;left:0;right:0;top:0;height:7rem;z-index:-1;pointer-events:none;opacity:0;background:linear-gradient(rgba(236,238,244,.82),rgba(236,238,244,0));-webkit-mask:linear-gradient(#000 30%,transparent);mask:linear-gradient(#000 30%,transparent);transition:opacity .6s var(--ease)}
.hd.dk::before{height:5rem;background:linear-gradient(rgba(12,13,18,.5),rgba(12,13,18,0));-webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)}
.hd.is-compact::before{opacity:1}
/* compact band: near-opaque (.96) paper over the top ~4.5rem while light, unpinned content runs under the header (core sets .is-band) */
.hd::after{content:'';position:absolute;left:0;right:0;top:0;height:5.1rem;z-index:-1;pointer-events:none;opacity:0;background:rgba(236,238,244,.96);-webkit-mask:linear-gradient(#000 calc(100% - .7rem),transparent);mask:linear-gradient(#000 calc(100% - .7rem),transparent);-webkit-backdrop-filter:blur(14px) saturate(0);backdrop-filter:blur(14px) saturate(0);transition:opacity .5s var(--ease)}
.hd.is-band::after{opacity:1}
html.q-low .hd::after{background:#eceef4;-webkit-backdrop-filter:none;backdrop-filter:none}
@media (max-width:900px){.hd::after{display:none}}
.hd__logo{display:inline-flex;align-items:flex-start;justify-self:start;color:var(--fl);font-weight:500;font-size:1.3rem;letter-spacing:.14em;line-height:1;padding-top:.7rem;transition:color .5s var(--ease),opacity .35s}
.hd__logo-t{display:inline-flex;height:1em;overflow:hidden;line-height:1}
.hd__logo-t span{display:inline-block;text-shadow:0 1em 0 currentColor;transition:transform .6s var(--ease) calc(var(--i,0) * 28ms)}
.hd__logo:hover .hd__logo-t span{transform:translateY(-1em)}
.hd__logo sup{display:inline-block;font-size:.45em;letter-spacing:0;margin-left:.1em;transition:transform .9s var(--ease)}
.hd__logo:hover sup{transform:rotate(360deg)}
.hd__say{grid-column:2;grid-row:1;color:var(--fc);font-size:clamp(1.05rem,1.55vw,1.45rem);line-height:1.18;letter-spacing:-.01em;max-width:34ch;text-wrap:pretty;pointer-events:none;transition:color .5s var(--ease),opacity .6s var(--ease)}
.hd__say-a{display:block}
.hd__say .sl>span{transition:transform .8s var(--ease)}
.hd__say .sl:nth-child(2)>span{transition-delay:.05s}.hd__say .sl:nth-child(3)>span{transition-delay:.1s}.hd__say .sl:nth-child(4)>span{transition-delay:.15s}
.hd.is-compact .hd__say .sl>span,.hd:has(.hd__menu.open) .hd__say .sl>span{transform:translateY(-115%)}
.hd.is-compact .hd__say:not(:has(.sl)){opacity:0}
.hd__sec{grid-column:2;grid-row:1;justify-self:start;margin-top:1.05rem;display:inline-flex;align-items:center;gap:.6rem;color:var(--fc);font-size:.72rem;letter-spacing:.08em;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .45s var(--ease),transform .6s var(--ease),color .5s var(--ease)}
.hd.is-compact .hd__sec.on{opacity:1;transform:none;transition-delay:.25s,.25s,0s}
.hd__sec svg{width:14px;height:14px;flex:none;transform:rotate(-90deg);fill:none;stroke:currentColor;stroke-width:1.6}
.hd__sec svg circle:first-child{opacity:.22}
.hd__sec-p{stroke:var(--acid)!important;stroke-linecap:round;stroke-dasharray:40.84;stroke-dashoffset:40.84;transition:stroke-dashoffset .3s linear}
.hd.dk-c .hd__sec-p{stroke:var(--acid2)!important}
.hd__sec-t{display:grid;overflow:hidden;height:1.3em;line-height:1.3em}
.hd__sec-t span{grid-area:1/1;white-space:nowrap;transition:transform .6s var(--ease)}
.hd__sec-t span.in{transform:translateY(105%)}.hd__sec-t span.out{transform:translateY(-105%)}
.hd__r{display:flex;gap:.45rem;align-items:center}
.hd__r>*{transition:background-color .45s var(--ease),color .45s var(--ease),width .6s var(--ease),scale .25s var(--ease)}
.hd__r>*:active{scale:.94}
/* glass pills: neutral (saturate 0) so no photo colour ever tints the chrome */
.hd__snd,.hd__menu{background:rgba(255,255,255,.78);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(15,16,22,.07);-webkit-backdrop-filter:blur(16px) saturate(0);backdrop-filter:blur(16px) saturate(0)}
.hd__snd:hover,.hd__menu:hover{background:#fff}
.hd.dk-r .hd__snd:not(.on),.hd.dk-r .hd__menu{background:rgba(12,13,24,.58);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);-webkit-backdrop-filter:blur(16px) saturate(0) brightness(.85);backdrop-filter:blur(16px) saturate(0) brightness(.85)}
.hd.dk-r .hd__snd:not(.on):hover,.hd.dk-r .hd__menu:hover{background:rgba(12,13,24,.74)}
.hd__snd{position:relative;height:2.9rem;width:2.9rem;border-radius:99px;display:inline-flex;align-items:center;gap:.6rem;padding-left:calc((2.9rem - 22px) / 2);overflow:hidden;white-space:nowrap}
.hd__wave{width:22px;height:14px;flex:none}
.hd__snd-l{font-size:.72rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .6s var(--ease)}
.hd__snd.nudge{width:8.6rem}.hd__snd.nudge .hd__snd-l{opacity:1;transform:none;transition-delay:.15s}
@media(max-width:600px){.hd__snd.nudge{width:2.9rem}.hd__snd.nudge .hd__snd-l{opacity:0}}
.hd__snd.nudge::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(47,69,255,.55);animation:sndRing 1.5s var(--ease) 2}
@keyframes sndRing{to{box-shadow:0 0 0 10px rgba(47,69,255,0)}}
.hd__snd.on,.hd__snd.on:hover{background:var(--acid);color:#fff}
.hd__talk{position:relative;isolation:isolate;height:2.9rem;display:inline-flex;align-items:center;gap:.6rem;padding:0 1.15rem 0 1.25rem;border-radius:99px;background:var(--ink);color:#fff;font-size:.76rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;overflow:hidden}
.hd__talk::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--acid);transform:translateY(102%);transition:transform .55s var(--ease);z-index:-1}
.hd__talk:hover::before,.hd__talk:focus-visible::before{transform:none}.hd__talk:hover,.hd__talk:focus-visible{color:#fff}
.hd.dk-r .hd__talk{background:#fff;color:var(--ink)}.hd.dk-r .hd__talk:hover{color:#fff}
.hd__talk-a{width:0;opacity:0;transform:translateX(-8px);transition:width .5s var(--ease),opacity .4s,transform .5s var(--ease)}
.hd__talk-d{width:6px;height:6px;border-radius:50%;background:var(--acid);transition:transform .5s var(--ease)}
.hd__talk:hover .hd__talk-a,.hd__talk:focus-visible .hd__talk-a{width:.9rem;opacity:1;transform:none}
.hd__talk:hover .hd__talk-d,.hd__talk:focus-visible .hd__talk-d{transform:scale(0)}
.hd__talk-s{display:none}
.hd__menu{height:2.9rem;display:inline-flex;align-items:center;gap:.7rem;padding:0 1.1rem 0 1.25rem;border-radius:99px;font-size:.76rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.hd__menu-t{display:block;height:1em;line-height:1;overflow:hidden}
.hd__menu-t span{display:block;transition:transform .6s var(--ease)}
.hd__menu.open .hd__menu-t span{transform:translateY(-100%)}
.hd__dots{display:flex;gap:3px}.hd__dots i{width:4px;height:4px;border-radius:50%;background:currentColor;transition:transform .5s var(--ease)}
.hd__menu:hover .hd__dots i:first-child{transform:translateX(-2px)}.hd__menu:hover .hd__dots i:last-child{transform:translateX(2px)}
.hd__menu.open .hd__dots i:first-child{transform:translateX(3.5px)}.hd__menu.open .hd__dots i:last-child{transform:translateX(-3.5px)}
.hd__menu.open{background:var(--ink)!important;color:#fff!important}
@media(max-width:900px){
  .hd{grid-template-columns:minmax(0,1fr) auto;gap:.5rem;padding-top:1rem;padding-bottom:1rem;padding-right:max(var(--pad),env(safe-area-inset-right));padding-left:max(var(--pad),env(safe-area-inset-left))}
  .hd__logo{min-width:0}.hd__r{justify-self:end;min-width:0;gap:.35rem}.hd__say,.hd__sec{display:none}.hd__logo{font-size:1.05rem;padding-top:.85rem}.hd::before{height:5.2rem}
  /* compact: the mark sits in the same glass pill as the buttons, so all chrome is always on glass */
  .hd.is-compact .hd__logo{align-items:center;height:2.9rem;padding:0 1.1rem;border-radius:99px;font-size:.92rem;background:rgba(255,255,255,.78);box-shadow:inset 0 0 0 1px rgba(15,16,22,.07);-webkit-backdrop-filter:blur(16px) saturate(0);backdrop-filter:blur(16px) saturate(0)}
  .hd.is-compact.dk-l .hd__logo{background:rgba(12,13,24,.58);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);-webkit-backdrop-filter:blur(16px) saturate(0) brightness(.85);backdrop-filter:blur(16px) saturate(0) brightness(.85)}
  .hd.is-compact::before{opacity:0}
  /* a contact CTA that is always in reach: compact 'Talk' pill */
  .hd__talk{height:2.6rem;padding:0 .95rem;gap:0;font-size:.72rem}
  .hd__talk .roll,.hd__talk-a,.hd__talk-d{display:none}.hd__talk-s{display:block}
  .hd__menu{padding:0 .95rem 0 1.05rem;gap:.55rem}
  /* hides on the way down after the hero (v32-nav.js), back on the way up */
  .hd.in.is-compact{transition-duration:.5s}
  .hd.in.is-hid{transform:translateY(-120%)}
}
@media(max-width:360px){.hd__talk{display:none}}
/* ── now-playing chip (v32-music.js): only while sound is on · click cycles the soundtrack ── */
.hd__trk{display:none;position:relative;height:2.9rem;max-width:19rem;align-items:center;gap:.6rem;padding:0 1.05rem 0 .45rem;border-radius:99px;background:rgba(255,255,255,.8);color:var(--acid);box-shadow:inset 0 0 0 1px rgba(47,69,255,.16);-webkit-backdrop-filter:blur(16px) saturate(0);backdrop-filter:blur(16px) saturate(0);font-size:.72rem;font-weight:500;letter-spacing:.04em;white-space:nowrap;overflow:hidden;cursor:pointer}
.hd__trk.on{display:inline-flex;animation:trkIn .8s var(--ease) both}
@keyframes trkIn{from{opacity:0;transform:translateX(12px)}}
.hd__trk:hover{background:#fff}
.hd__trk-i{flex:none;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--acid);color:#fff;font-size:.95rem;line-height:1;animation:trkBreath 5s ease-in-out infinite}
@keyframes trkBreath{0%,100%{box-shadow:0 0 0 0 rgba(47,69,255,.35)}50%{box-shadow:0 0 0 5px rgba(47,69,255,0)}}
.hd__trk-t{min-width:0;overflow:hidden;text-overflow:ellipsis;transition:opacity .22s,transform .4s var(--ease)}
.hd__trk-t.sw{opacity:0;transform:translateY(35%)}
.hd__trk-n{font-weight:600}.hd__trk-a{color:rgba(47,69,255,.85)}
.hd.dk-r .hd__trk{background:rgba(47,69,255,.26);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);-webkit-backdrop-filter:blur(16px) saturate(0) brightness(.85);backdrop-filter:blur(16px) saturate(0) brightness(.85)}
.hd.dk-r .hd__trk:hover{background:rgba(47,69,255,.42)}
.hd.dk-r .hd__trk-a{color:rgba(255,255,255,.66)}
.hd.dk-r .hd__trk-i{background:#fff;color:var(--acid)}
/* room check: title ≥1361 px (artist ≥1521) · icon 901–1360 (the statement keeps its lines; 901–1100 only once it folds) · title 641–900 · icon 401–640 · hidden ≤400 */
@media(max-width:1520px){.hd__trk-a{display:none}}
@media(max-width:1360px) and (min-width:901px),(max-width:640px){.hd__trk{width:2.9rem;padding:0;justify-content:center}.hd__trk-t{display:none}}
@media(max-width:1100px) and (min-width:901px){.hd:not(.is-compact) .hd__trk.on{display:none}}   /* the full statement needs the width until it folds */
@media(max-width:900px){.hd__trk{max-width:12rem}}
@media(max-width:400px){.hd__trk.on{display:none}}
/* ≤400 px: the switch moves into the menu card (built by v32-music.js) */
.menu__trk{display:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:2.5rem;margin:.1rem 0 .5rem;padding:0 1.1rem;border:0;border-radius:99px;background:rgba(47,69,255,.08);color:var(--acid);cursor:pointer;opacity:0;transition:opacity .3s}
.menu.open .menu__trk{opacity:1;transition:opacity .6s .45s}
@media(max-width:400px){.menu__trk.on{display:inline-block}}
@media(prefers-reduced-motion:reduce){.hd__trk-i,.hd__trk.on{animation:none}}
html.q-low .hd__trk{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ── menu — the card grows out of the menu pill, links roll in ── */
.menu{--mt:5.2rem;--bt:1.6rem;position:fixed;inset:0;z-index:850;pointer-events:none;visibility:hidden;transition:visibility 0s .7s}
.menu.open{pointer-events:auto;visibility:visible;transition:none}
.menu::before{content:'';position:absolute;inset:0;background:rgba(12,13,18,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .5s}
.menu.open::before{opacity:1}
.menu__card{position:absolute;top:var(--mt);right:var(--pad);width:min(540px,calc(100vw - var(--pad) * 2));max-height:calc(100svh - var(--mt) - 1.2rem);overflow:auto;overscroll-behavior:contain;background:#fff;border-radius:22px;padding:1.2rem 1.6rem 1.5rem;box-shadow:0 40px 90px -40px rgba(12,13,18,.55);clip-path:inset(0 0 calc(100% - 2.9rem) calc(100% - 7rem) round 1.45rem);transform:translateY(calc(var(--bt) - var(--mt)));opacity:0;transition:clip-path .55s var(--ease2),transform .55s var(--ease2),opacity .3s .25s}
.menu.open .menu__card{clip-path:inset(0 0 0 0 round 22px);transform:none;opacity:1;transition:clip-path .9s var(--ease),transform .9s var(--ease),opacity .15s}
.menu__top,.menu__more,.menu__form,.menu__soc{opacity:0;transform:translateY(10px);transition:opacity .3s,transform .6s var(--ease)}
.menu.open :is(.menu__top,.menu__more,.menu__form,.menu__soc){opacity:1;transform:none;transition:opacity .6s .4s,transform .9s var(--ease) .4s}
.menu__top{display:flex;justify-content:space-between;color:var(--mute);padding-bottom:.9rem;border-bottom:1px solid var(--line);margin-bottom:.5rem}
.menu__links{display:flex;flex-direction:column;border-bottom:1px solid var(--line);padding-bottom:.9rem}
.menu__links a{--i:0;display:grid;grid-template-columns:2.6rem 1fr auto;align-items:center;font-size:clamp(1.8rem,3.9vw,2.7rem);font-weight:400;letter-spacing:-.045em;line-height:1.12;padding:.08rem 0;transition:opacity .4s var(--ease),color .3s}
.ml__n{align-self:start;margin-top:.95em;font-size:.62rem;letter-spacing:.08em;color:var(--mute);display:inline-flex;align-items:center;gap:.35rem;opacity:0;transition:opacity .4s,color .3s}
.menu.open .ml__n{opacity:1;transition:opacity .6s calc(.2s + var(--i) * .055s),color .3s}
.menu__links a.is-cur .ml__n{color:var(--acid)}
.menu__links a.is-cur .ml__n::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--acid)}
.ml__t{display:block;overflow:hidden;padding-bottom:.05em}
.ml__t>.roll{transform:translateY(115%);transition:transform .4s var(--ease2)}
.menu.open .ml__t>.roll{transform:none;transition:transform 1s var(--ease) calc(.12s + var(--i) * .055s)}
.ml__a{font-size:1.3rem;color:var(--acid);opacity:0;transform:translateX(-12px);transition:opacity .3s,transform .5s var(--ease)}
.menu__links a:hover .ml__a,.menu__links a:focus-visible .ml__a{opacity:1;transform:none}
.menu__links:hover a:not(:hover){opacity:.36}
.menu__more{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.menu__more a{position:relative;display:block;padding-right:2rem;font-size:1rem;transition:color .3s}
.menu__more a:hover{color:var(--acid)}
.menu__more i{position:absolute;right:0;top:0;font-style:normal;color:var(--ink2);transition:transform .5s var(--ease)}
.menu__more a:hover i{transform:translate(3px,-3px);color:var(--acid)}
.menu__form{padding-top:1.2rem}.menu__form label{display:block;font-size:.92rem;color:var(--ink2);margin-bottom:.7rem}
.menu__soc{display:flex;gap:1.2rem;margin-top:1.1rem;color:var(--ink2)}.menu__soc a{transition:color .3s}.menu__soc a:hover{color:var(--acid)}
@media(max-width:900px){.menu{--mt:4.4rem;--bt:1rem}.menu__card{padding:1rem 1.2rem 1.3rem;border-radius:18px}}

/* ── quality governor: the low tier drops live blur behind the chrome ── */
html.q-low .hd.dk-r :is(.hd__snd,.hd__menu),html.q-low .menu::before{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.q-low .hd.dk-r :is(.hd__snd:not(.on),.hd__menu){background:rgba(12,13,24,.8)}
html.q-low :is(.hd__snd,.hd__menu,.hd__logo){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ── focus & a11y polish: keyboard focus plays the hover motion; on dark ground a white + blue double ring ── */
:is(.pill,.hd__r>*,.field button,.menu__links a):focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.hd.dk-r .hd__r>*:focus-visible,.hd.dk-l .hd__logo:focus-visible,.hd.dk-c .hd__sec:focus-visible{outline:none;box-shadow:var(--ring-dk)}
.menu__links:has(a:focus-visible) a:not(:focus-visible){opacity:.36}
.field button:focus-visible{background:var(--acid);transform:rotate(-45deg)}
:is(h1,h2,section,footer)[tabindex="-1"]:focus{outline:none}
@media(prefers-reduced-motion:reduce){.cur,.cur__dot,.cur__tr,.tap-rip{display:none}html.has-cur,html.has-cur *{cursor:auto!important}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── stroke-to-fill headlines (fill follows the scroll) ── */
.js-stroke{-webkit-text-fill-color:transparent;-webkit-text-stroke:1.4px currentColor;background-image:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%);background-size:200.5% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text}
.js-stroke .sl,.js-stroke .sl>span{-webkit-text-stroke:inherit}