/* ==========================================================================
   Fulcrums: one stylesheet for every page.
   Palette sampled from the brushed-steel mark: pure neutral metal, no hue.
   One cold signal cyan, spent only on the call to action, focus, and
   two moments of emphasis.
   ========================================================================== */

:root{
  --canvas:#0E1114;
  --canvas-deep:#090B0D;
  --panel:#161A1F;
  --panel-hi:#1E242B;
  --line:#2A313A;
  --line-strong:#5A646F;      /* interactive borders, measured 3.13:1 on canvas */
  --steel:#8F979F;
  --steel-light:#E8ECEE;
  --accent:#3FC7F5;           /* 9.6:1 on canvas */
  --accent-hover:#7ADCFB;
  --accent-muted:rgba(63,199,245,.16);
  --accent-glow:rgba(63,199,245,.32);
  --text-primary:#EDF1F4;     /* 16.4:1 */
  --text-secondary:#98A2AC;   /* 7.3:1 */

  --display:"Chivo","Helvetica Neue",Arial,sans-serif;
  --body:"Manrope","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);

  --gut:clamp(20px,5vw,64px);
  --maxw:1240px;
  --nav-h:80px;
}

/* ---------- reset and base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-weight:400;font-size:clamp(16px,1.05vw,17px);
  line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:900;line-height:1.02;letter-spacing:-.03em;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}

::selection{background:var(--accent);color:#07090B}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#07090B;padding:12px 18px;
  font-family:var(--mono);font-size:13px;border-radius:0 0 6px 0;
}
.skip:focus{left:0}

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- the one fixed environment layer ---------- */
.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 800px at 78% -10%,rgba(63,199,245,.055),transparent 62%),
    radial-gradient(900px 700px at 8% 108%,rgba(143,151,159,.06),transparent 60%),
    var(--canvas);
}
.env::before{
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(680px 520px at 30% 30%,rgba(120,140,160,.05),transparent 65%);
  animation:envDrift 84s var(--ease) -22s infinite alternate;
}
.env::after{  /* fine grain, static, no cost */
  content:"";position:absolute;inset:0;opacity:.16;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@keyframes envDrift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.1)}}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
main{position:relative;z-index:1;display:block}
section{position:relative}

.kicker{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--steel);margin:0 0 20px;
  display:flex;align-items:center;gap:12px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--line-strong);flex:none}

.lede{color:var(--text-secondary);font-size:clamp(17px,1.35vw,20px);line-height:1.6;max-width:62ch}
h2 + .lede,h3 + .lede{margin-top:22px}

/* ---------- navigation ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(11,14,17,.82);backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}

.lockup{display:flex;align-items:center;gap:.34em;font-size:42px;text-decoration:none;flex:none}
.lockup img{display:block;user-select:none}
.lockup .mark{width:1em}
.lockup .word{width:2.27em}
.lockup:hover .mark{transform:translateY(-1px)}
.lockup .mark{transition:transform .5s var(--ease-out)}

.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav-links a:not(.btn){
  text-decoration:none;font-size:14.5px;font-weight:500;color:var(--text-secondary);
  position:relative;padding:6px 0;transition:color .35s var(--ease);
}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out);
}
.nav-links a:not(.btn):hover,.nav-links a:not(.btn)[aria-current="page"]{color:var(--text-primary)}
.nav-links a:not(.btn):hover::after,.nav-links a:not(.btn)[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

.nav-links a.btn-primary{color:#07090B;font-weight:600;padding:13px 22px}
.nav-links a.btn-primary:hover{color:#07090B}

.nav-toggle{
  display:none;background:none;border:1px solid var(--line-strong);border-radius:8px;
  width:44px;height:40px;align-items:center;justify-content:center;cursor:pointer;
}
.nav-toggle span{display:block;width:17px;height:1.5px;background:var(--text-primary);position:relative;transition:background .3s var(--ease)}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--text-primary);
  transition:transform .45s var(--ease-out);
}
.nav-toggle span::before{transform:translateY(-5.5px)}
.nav-toggle span::after{transform:translateY(5.5px)}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{
  --bh:0;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;border-radius:8px;border:1px solid transparent;
  font-family:var(--body);font-weight:600;font-size:14.5px;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .4s var(--ease-out),background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
  text-shadow:none;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:#07090B;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--steel);background:rgba(255,255,255,.035)}
.btn-lg{padding:16px 30px;font-size:15.5px}
.btn .arw{transition:transform .45s var(--ease-out)}
.btn:hover .arw{transform:translateX(4px)}
@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav-links a:not(.btn){padding:10px 0}
}

/* ==========================================================================
   THE HERO: code-drawn geometry, scrubbed by scroll
   ========================================================================== */
.hero{position:relative;height:720vh;z-index:1}
.stage{
  position:sticky;top:0;height:100vh;width:100%;overflow:hidden;
  display:grid;place-items:center;
}
#geo{position:absolute;inset:0;width:100%;height:100%;display:block;transform:translateZ(0)}

/* global base scrim: no frame is ever raw behind the page */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 92% at 50% 46%,rgba(10,12,16,0) 34%,rgba(10,12,16,.64) 100%);
}
.stage-vig{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(10,12,16,.76) 0%,
    rgba(10,12,16,.50) 24%,
    rgba(10,12,16,.24) 46%,
    rgba(10,12,16,.05) 60%,
    rgba(10,12,16,0) 68%,
    rgba(10,12,16,0) 86%,
    rgba(10,12,16,.48) 100%);
}

.bands{position:absolute;inset:0;display:grid;place-items:start center;pointer-events:none;padding-inline:var(--gut)}
.band{
  grid-area:1/1;width:100%;max-width:var(--maxw);margin:0 auto;
  opacity:0;text-shadow:var(--tshadow);position:relative;
  /* the band owns its own stacking context, so the scrim below sits behind the
     words but in front of the canvas. Without this the scrim paints behind the
     geometry and does nothing at all. */
  z-index:0;isolation:isolate;
  display:flex;flex-direction:column;align-items:flex-start;
  /* the action lane is the lower third, where the beam and pivot live, so
     every caption is held above it */
  padding-top:clamp(100px,13vh,152px);
}
.band::before{
  content:"";position:absolute;inset:-26% -14%;pointer-events:none;z-index:-1;
  opacity:calc(.3 + .7*var(--k,1));
  background:
    radial-gradient(ellipse 66% 54% at 32% 48%,rgba(5,6,10,.70) 0%,rgba(5,6,10,.44) 44%,rgba(5,6,10,0) 74%),
    radial-gradient(ellipse 96% 80% at 40% 50%,rgba(5,6,10,.42) 0%,rgba(5,6,10,.22) 52%,rgba(5,6,10,0) 82%);
}
.band-settle{align-items:center;text-align:center}
.band-settle::before{background:
    radial-gradient(ellipse 70% 58% at 50% 48%,rgba(5,6,10,.72) 0%,rgba(5,6,10,.46) 44%,rgba(5,6,10,0) 76%),
    radial-gradient(ellipse 98% 84% at 50% 50%,rgba(5,6,10,.44) 0%,rgba(5,6,10,.24) 52%,rgba(5,6,10,0) 84%)}

.band h1,.band h2,.band p.big{
  font-family:var(--display);font-weight:900;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(38px,6.6vw,92px);margin:0;max-width:16ch;
}
.band .sub{
  margin-top:22px;color:var(--text-secondary);font-size:clamp(16px,1.5vw,20px);
  line-height:1.55;max-width:48ch;
}
.band .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;pointer-events:auto}
.band .btn{text-shadow:none}

/* split text choreography */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) scatter */
.e-scatter .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}
/* (b) grid snap-align */
.e-snap .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3.1,1);opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)));
}
/* (d) word punch with overshoot */
.e-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* (e) word rise into a staged settle */
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px));
}
.e-rise .sub{--ks:clamp(0,(var(--k,0) - .58)*3.4,1);opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*14px))}
.e-rise .cta-row{--kb:clamp(0,(var(--k,0) - .74)*4.2,1);opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*14px))}


/* short windows: keep every caption clear of the action lane */
@media (max-height:800px){
  .band{padding-top:clamp(84px,10vh,112px)}
  .band h1,.band h2,.band p.big{font-size:clamp(34px,5.4vw,68px)}
  .band .sub{font-size:16px;margin-top:16px;max-width:52ch}
  .band .cta-row{margin-top:24px}
}
@media (max-height:640px){
  .band{padding-top:76px}
  .band h1,.band h2,.band p.big{font-size:clamp(30px,4.6vw,52px)}
  .band .sub{font-size:15px;margin-top:12px}
  .band .cta-row{margin-top:18px}
}

/* the hero HUD: small text over geometry gets a chip, never the big radial */
.hud{
  position:absolute;left:var(--gut);bottom:26px;z-index:3;
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel);
  background:rgba(8,10,15,.55);border:1px solid rgba(96,106,126,.3);border-radius:10px;
  padding:8px 13px;backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,5,10,.85);
}
.hud .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;position:relative}
.hud .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--accent);opacity:.3;animation:pulseDot 3.4s var(--ease) -1.2s infinite}
@keyframes pulseDot{0%,100%{opacity:.12;transform:scale(.7)}50%{opacity:.42;transform:scale(1.25)}}
.hud .rd{color:var(--text-primary);font-variant-numeric:tabular-nums}

.cue{
  position:absolute;right:var(--gut);bottom:30px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);
  transition:opacity .6s var(--ease);
}
.cue .line{width:1px;height:38px;background:linear-gradient(to bottom,var(--line-strong),transparent);overflow:hidden;position:relative}
.cue .line::after{content:"";position:absolute;top:0;left:0;width:1px;height:14px;background:var(--accent);animation:cueRun 2.6s var(--ease) -.4s infinite}
@keyframes cueRun{0%{transform:translateY(-16px);opacity:0}30%{opacity:1}100%{transform:translateY(40px);opacity:0}}
@media (max-height:560px){.cue,.hud{display:none}}

/* the static hero, a designed layout and not an apology */
.static-hero{display:none;position:relative;min-height:100svh;padding:calc(var(--nav-h) + 40px) 0 60px}
.static-hero .wrap{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-start;min-height:calc(100svh - var(--nav-h) - 100px)}
.static-hero .static-title{
  font-family:var(--display);font-weight:900;line-height:1.02;
  font-size:clamp(40px,11vw,68px);letter-spacing:-.035em;max-width:11ch;margin:0;
}
.static-hero .sub{margin-top:20px;color:var(--text-secondary);font-size:clamp(16px,4.2vw,19px);max-width:40ch}
.static-hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
#geo-static{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.static-hero .scrim{z-index:1}

/* the five gates, character for character identical to the JS list */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .static-hero{display:block}
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{padding:clamp(84px,11vw,150px) 0;position:relative}
.page-head + .pivot-rule + .sec,.page-head + .sec{padding-top:clamp(44px,5vw,72px)}
.sec-line{border-top:1px solid var(--line)}

/* the pivot divider: the signature element, repeated */
.pivot-rule{position:relative;height:44px;display:flex;align-items:center;justify-content:center;margin:0 auto;max-width:var(--maxw)}
.pivot-rule svg{width:min(100%,520px);height:44px;overflow:visible}
.pivot-rule .beam{stroke:var(--line-strong);stroke-width:1.4;stroke-linecap:round}
.pivot-rule .wedge{fill:var(--steel);opacity:.55}
.pivot-rule .spark{fill:var(--accent);opacity:0;transition:opacity .8s var(--ease)}
.pivot-rule.in .spark{opacity:.9}

/* --- 1. what fulcrums is: asymmetric two column --- */
.premise{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,6vw,84px);align-items:start}
.premise h2{font-size:clamp(32px,4.6vw,60px);max-width:14ch}
.premise .say{margin-top:26px}
.premise .say .lede{max-width:46ch}
.triplet{display:flex;flex-direction:column;gap:0;margin-top:8px}
.triplet li{
  padding:22px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:baseline;
}
.triplet li:first-child{border-top:1px solid var(--line)}
.triplet .n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.12em}
.triplet .t{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.1vw,24px);letter-spacing:-.02em;margin-bottom:6px}
.triplet .d{color:var(--text-secondary);font-size:15.5px;line-height:1.58;max-width:44ch}

/* --- 2. the instrument: three equal cards, a different skeleton --- */
.instrument-head{max-width:var(--maxw);margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.instrument-head .kicker{justify-content:center}
.instrument-head h2{font-size:clamp(32px,4.6vw,58px);max-width:18ch}
.instrument-head .lede{margin-top:22px;text-align:center;max-width:56ch}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,26px);margin-top:clamp(44px,6vw,72px)}
.step{
  background:linear-gradient(168deg,var(--panel) 0%,#12161A 100%);
  border:1px solid var(--line);border-radius:14px;padding:clamp(22px,2.6vw,32px);
  position:relative;overflow:hidden;
  transition:border-color .55s var(--ease),transform .55s var(--ease-out),background-color .55s var(--ease);
}
.step:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.step::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(420px 200px at 50% -10%,rgba(63,199,245,.1),transparent 70%);
  transition:opacity .6s var(--ease);
}
.step:hover::after{opacity:1}
.step .dia{width:100%;height:132px;margin-bottom:22px;display:block;overflow:visible}
.step .dia .ln{stroke:var(--line-strong);stroke-width:1.25;fill:none;stroke-linecap:round}
.step .dia .hi{stroke:var(--accent);stroke-width:1.6;fill:none;stroke-linecap:round}
.step .dia .pl{fill:var(--steel);opacity:.24}
.step .dia .pl2{fill:var(--steel);opacity:.44}
.step .dia .dot{fill:var(--accent)}
.step .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);display:block;margin-bottom:12px}
.step h3{font-size:clamp(21px,2.3vw,27px);letter-spacing:-.025em;font-weight:700}
.step p{margin-top:12px;color:var(--text-secondary);font-size:15.5px;line-height:1.58}

/* self-drawing strokes */
.draw{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);transition:stroke-dashoffset 1.5s var(--ease-out)}
.in .draw{stroke-dashoffset:0}

/* --- 3. where we hold the line: the interactive moment --- */
.hold-sec{background:var(--canvas-deep);border-block:1px solid var(--line)}
.hold-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(34px,6vw,80px);align-items:center}
.hold-stage{position:relative;aspect-ratio:1/.78;display:grid;place-items:center;min-height:320px;width:100%;max-width:560px}
.hold-stage svg{width:100%;height:100%;overflow:visible}
.hold-stage .base{stroke:var(--line-strong);stroke-width:1.3;fill:none}
.hold-stage .wedge{fill:var(--steel);opacity:.5;transition:opacity .6s var(--ease)}
.hold-stage .beam{stroke:var(--steel-light);stroke-width:5;stroke-linecap:round;fill:none}
.hold-stage .load{fill:var(--steel);opacity:.62}
.hold-stage .glow{fill:var(--accent);opacity:0}
.hold-stage.done .wedge{opacity:.9}
.hold-btn{
  margin-top:26px;display:inline-flex;align-items:center;gap:12px;
  background:transparent;border:1px solid var(--line-strong);border-radius:100px;
  padding:13px 24px;cursor:pointer;position:relative;overflow:hidden;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-primary);
  transition:border-color .45s var(--ease),color .45s var(--ease);
  touch-action:none;user-select:none;-webkit-user-select:none;min-height:44px;
}
.hold-btn:hover{border-color:var(--steel)}
.hold-btn .fill{
  position:absolute;inset:0;background:var(--accent);transform-origin:left;
  transform:scaleX(var(--hp,0));opacity:.16;pointer-events:none;
}
.hold-btn .txt{position:relative;z-index:1}
.hold-btn.done{border-color:var(--accent);color:var(--accent)}
.commits{margin-top:36px;display:flex;flex-direction:column;gap:2px}
.commits li{
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:16px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--line);
  opacity:.78;transform:translateY(6px);
  transition:opacity .7s var(--ease),transform .7s var(--ease-out);
}
.commits li.lit{opacity:1;transform:none}
.commits .tick{width:20px;height:20px;margin-top:3px;flex:none}
.commits .tick circle{fill:none;stroke:var(--line-strong);stroke-width:1.3;transition:stroke .6s var(--ease)}
.commits .tick path{stroke:var(--accent);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:18;stroke-dashoffset:18;transition:stroke-dashoffset .6s var(--ease-out)}
.commits li.lit .tick circle{stroke:var(--accent)}
.commits li.lit .tick path{stroke-dashoffset:0}
.commits .h{font-family:var(--display);font-weight:700;font-size:17.5px;letter-spacing:-.015em;
  color:var(--text-secondary);transition:color .6s var(--ease)}
.commits li.lit .h{color:var(--text-primary)}
.commits .b{color:var(--text-secondary);font-size:15px;line-height:1.55;margin-top:5px;max-width:52ch}

/* --- 4. plain facts: a data table skeleton --- */
.facts{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,70px);align-items:start}
.facts h2{font-size:clamp(30px,4.2vw,52px);max-width:12ch}
.facts dl{margin:0;display:flex;flex-direction:column}
.facts .row{
  display:grid;grid-template-columns:minmax(120px,.5fr) minmax(0,1fr);gap:20px;
  padding:19px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.facts .row:first-child{border-top:1px solid var(--line)}
.facts dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}
.facts dd{margin:0;font-size:16px;color:var(--text-primary);line-height:1.5}
.facts dd .q{color:var(--text-secondary);font-size:14.5px;display:block;margin-top:4px}

/* --- 5. FAQ --- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(30px,5vw,74px);align-items:start}
.faq-grid h2{font-size:clamp(30px,4.2fw,52px);font-size:clamp(30px,4.2vw,52px);max-width:12ch}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:clamp(17px,1.8vw,20.5px);letter-spacing:-.02em;
  transition:color .4s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after,.faq summary::before{
  content:"";position:absolute;right:6px;top:50%;background:var(--steel);
  transition:transform .5s var(--ease-out),background-color .4s var(--ease);
}
.faq summary::after{width:13px;height:1.5px;margin-top:-.75px}
.faq summary::before{width:1.5px;height:13px;right:11.75px;margin-top:-6.5px}
.faq details[open] summary::before{transform:rotate(90deg) scaleX(0)}
.faq details[open] summary{color:var(--accent)}
.faq details[open] summary::after{background:var(--accent)}
.faq .ans{padding:0 40px 26px 0;color:var(--text-secondary);font-size:15.5px;line-height:1.65;max-width:66ch}
.faq .ans p + p{margin-top:12px}

/* --- 6. the single call to action --- */
.cta-sec{position:relative;overflow:hidden;background:var(--canvas-deep);border-top:1px solid var(--line)}
.cta-sec .glowline{
  position:absolute;left:50%;top:0;width:min(760px,90%);height:1px;transform:translateX(-50%);
  background:linear-gradient(to right,transparent,var(--accent),transparent);opacity:.5;
}
.cta-inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.cta-inner h2{font-size:clamp(34px,5.6vw,74px);max-width:15ch;letter-spacing:-.035em}
.cta-inner .lede{margin-top:22px;text-align:center;max-width:52ch}
.cta-inner .cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:38px}
.cta-sec .side-doors{
  margin-top:30px;display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.cta-sec .side-doors a{color:var(--steel);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .4s var(--ease),border-color .4s var(--ease)}
.cta-sec .side-doors a:hover{color:var(--text-primary);border-bottom-color:var(--accent)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--canvas);position:relative;z-index:1}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.9fr));gap:clamp(26px,4vw,56px);padding:clamp(50px,7vw,76px) 0 clamp(36px,4vw,52px)}
.foot .lockup{font-size:34px;margin-bottom:18px}
.foot .blurb{color:var(--text-secondary);font-size:14.5px;line-height:1.6;max-width:38ch}
.foot h4{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-bottom:16px}
.foot ul li{margin-bottom:11px}
.foot ul a{color:var(--text-secondary);text-decoration:none;font-size:14.5px;transition:color .35s var(--ease)}
.foot ul a:hover{color:var(--accent)}
.foot-bot{
  border-top:1px solid var(--line);padding:26px 0 40px;
  display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;align-items:flex-start;
}
.foot-bot p{font-family:var(--mono);font-size:11.5px;color:var(--steel);letter-spacing:.05em;line-height:1.7;max-width:74ch}
.legal{color:var(--steel);font-size:12.5px;line-height:1.65;max-width:88ch;padding-bottom:38px}

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
.page-head{padding:calc(var(--nav-h) + clamp(58px,9vw,110px)) 0 clamp(34px,5vw,60px);position:relative;overflow:hidden}
.page-head h1{font-size:clamp(38px,6.4vw,84px);max-width:15ch;letter-spacing:-.035em}
.page-head .lede{margin-top:24px}
.page-head .art{
  position:absolute;right:-8%;top:0;width:min(52%,660px);height:100%;
  object-fit:cover;opacity:.3;
  mask-image:linear-gradient(to left,#000 8%,transparent 88%);
  -webkit-mask-image:linear-gradient(to left,#000 8%,transparent 88%);
  pointer-events:none;
}
@media (max-height:620px){.page-head .art{display:none}}

.prose{max-width:70ch}
.prose h2{font-size:clamp(24px,3vw,34px);margin-top:clamp(38px,5vw,56px);letter-spacing:-.025em}
.prose h2:first-child{margin-top:0}
.prose p{margin-top:16px;color:var(--text-secondary);font-size:16.5px;line-height:1.7}
.prose strong{color:var(--text-primary);font-weight:600}

/* contact cards */
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,26px)}
.card{
  background:linear-gradient(168deg,var(--panel) 0%,#12161A 100%);
  border:1px solid var(--line);border-radius:14px;padding:clamp(24px,3vw,36px);
  position:relative;overflow:hidden;
  transition:border-color .55s var(--ease),transform .55s var(--ease-out);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.card .role{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.card h3{margin-top:14px;font-size:clamp(23px,2.6vw,30px);letter-spacing:-.025em;font-weight:700}
.card .mail{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  color:var(--accent);text-decoration:none;font-size:16px;word-break:break-all;
  border-bottom:1px solid transparent;transition:border-color .4s var(--ease)
}
.card .mail:hover{border-bottom-color:var(--accent)}
.card .note{margin-top:16px;color:var(--text-secondary);font-size:14.5px;line-height:1.6}
.card .plate{position:absolute;right:-30px;bottom:-30px;width:150px;height:150px;opacity:.05;pointer-events:none}

/* ---------- forms ---------- */
.form-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(30px,5vw,72px);align-items:start}
.form-aside{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.form-aside img{width:100%;height:100%;object-fit:cover;opacity:.62;min-height:340px}
.form-aside .cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px;
  background:linear-gradient(to top,rgba(9,11,13,.96) 20%,rgba(9,11,13,0));
}
.form-aside .cap p{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;line-height:1.25}
.form-aside .cap span{display:block;margin-top:8px;color:var(--text-secondary);font-size:14px;line-height:1.55}

form.fx{max-width:none}
.fset{border:0;padding:0;margin:0 0 clamp(28px,3.6vw,40px)}
.fset legend{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);padding:0;margin-bottom:20px;
  display:flex;align-items:center;gap:11px;width:100%;
}
.fset legend::after{content:"";flex:1;height:1px;background:var(--line)}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.frow-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{display:flex;flex-direction:column;margin-bottom:18px}
.field.full{grid-column:1/-1}
.field label{font-size:13.5px;font-weight:600;margin-bottom:8px;color:var(--text-primary);display:flex;gap:6px;align-items:baseline}
.field label .req{color:var(--accent);font-family:var(--mono);font-size:11px}
.field .hint{font-family:var(--mono);font-size:11.5px;color:var(--steel);margin-top:8px;line-height:1.5}
.field input,.field select{
  background:var(--panel);border:1px solid var(--line-strong);border-radius:9px;
  padding:13px 14px;font-size:15.5px;width:100%;min-height:46px;
  transition:border-color .4s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease);
  appearance:none;-webkit-appearance:none;
}
.field input::placeholder{color:#6C757F}
.field input:hover,.field select:hover{border-color:var(--steel)}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--accent);background:var(--panel-hi);
  box-shadow:0 0 0 3px var(--accent-muted);
}
.field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238F979F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer;
}
.field select option{background:#12161A;color:var(--text-primary)}
.field.bad input,.field.bad select{border-color:#FF7A6B}
.field .err{color:#FF9A8E;font-size:13px;margin-top:8px;display:none;line-height:1.5}
.field.bad .err{display:block}

/* radio row */
.radio-row{display:flex;flex-wrap:wrap;gap:10px}
.radio{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--line-strong);border-radius:9px;padding:12px 20px;cursor:pointer;
  min-height:46px;font-size:15px;
  transition:border-color .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease);
}
.radio:hover{border-color:var(--steel)}
.radio input{position:absolute;opacity:0;width:1px;height:1px}
.radio .dotb{
  width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-strong);flex:none;
  position:relative;transition:border-color .35s var(--ease);
}
.radio .dotb::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent);
  transform:scale(0);transition:transform .4s var(--ease-out);
}
.radio input:checked ~ .dotb{border-color:var(--accent)}
.radio input:checked ~ .dotb::after{transform:scale(1)}
.radio:has(input:checked){border-color:var(--accent);background:var(--accent-muted)}
.radio input:focus-visible ~ .dotb{outline:2px solid var(--accent);outline-offset:3px}

.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:8px}
.form-note{font-family:var(--mono);font-size:11.5px;color:var(--steel);line-height:1.65;max-width:52ch;margin-top:20px}

/* the success state */
.done-panel{
  display:none;border:1px solid var(--accent);border-radius:14px;
  background:linear-gradient(168deg,rgba(63,199,245,.07),rgba(63,199,245,.02));
  padding:clamp(28px,3.6vw,44px);
}
.done-panel.on{display:block;animation:doneIn .8s var(--ease-out) both}
@keyframes doneIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.done-panel .mk{width:46px;height:46px;margin-bottom:20px}
.done-panel .mk circle{fill:none;stroke:var(--accent);stroke-width:1.4;opacity:.5}
.done-panel .mk path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;animation:tick .7s var(--ease-out) .25s forwards}
@keyframes tick{to{stroke-dashoffset:0}}
.done-panel h2{font-size:clamp(25px,3.2vw,36px);letter-spacing:-.03em}
.done-panel p{margin-top:14px;color:var(--text-secondary);font-size:16px;line-height:1.65;max-width:56ch}
.done-panel .summary{
  margin-top:24px;border-top:1px solid var(--line);padding-top:20px;
  font-family:var(--mono);font-size:12.5px;color:var(--steel);line-height:1.95;
}
.done-panel .summary b{color:var(--text-primary);font-weight:500}

/* ---------- sitemap page ---------- */
.map-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,30px)}
.map-col{border-top:1px solid var(--line-strong);padding-top:22px}
.map-col h2{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.map-col li{margin-bottom:2px}
.map-col a{
  display:flex;align-items:baseline;gap:12px;text-decoration:none;padding:13px 0;
  border-bottom:1px solid var(--line);transition:padding-left .45s var(--ease-out);
}
.map-col a:hover{padding-left:9px}
.map-col a .t{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;transition:color .4s var(--ease)}
.map-col a:hover .t{color:var(--accent)}
.map-col a .d{color:var(--text-secondary);font-size:13.5px;display:block;margin-top:4px;line-height:1.5}
.map-col a .arw{margin-left:auto;color:var(--steel);transition:transform .45s var(--ease-out),color .4s var(--ease)}
.map-col a:hover .arw{transform:translateX(4px);color:var(--accent)}

/* ---------- 404 ---------- */
.four{min-height:100svh;display:grid;place-items:center;text-align:center;padding:calc(var(--nav-h) + 60px) 0 80px}
.four h1{font-size:clamp(64px,16vw,190px);letter-spacing:-.05em;line-height:.86}
.four .lede{margin:22px auto 0;text-align:center}
.four .cta-row{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}

/* ==========================================================================
   ENTRANCES: choreography, then the delays retire
   ========================================================================== */
.rv .part{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv.in .part{opacity:1;transform:none}
.rv.in .part:nth-child(1){transition-delay:0s}
.rv.in .part:nth-child(2){transition-delay:.075s}
.rv.in .part:nth-child(3){transition-delay:.15s}
.rv.in .part:nth-child(4){transition-delay:.225s}
.rv.in .part:nth-child(5){transition-delay:.3s}
.rv.in .part:nth-child(6){transition-delay:.375s}
/* retire the stagger so hovers on later siblings never lag; matches the
   specificity of the nth-child rules above */
.rv.in.settled .part:nth-child(1),.rv.in.settled .part:nth-child(2),
.rv.in.settled .part:nth-child(3),.rv.in.settled .part:nth-child(4),
.rv.in.settled .part:nth-child(5),.rv.in.settled .part:nth-child(6){transition-delay:0s}

.fade{opacity:0;transform:translateY(16px);transition:opacity .95s var(--ease-out),transform .95s var(--ease-out)}
.fade.in{opacity:1;transform:none}

/* one living element per section, paused off screen and on hidden tabs */
.live-glow{position:absolute;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
.in > .live-glow,.in .live-glow{opacity:1}
.in .live-glow{animation:breathe 7.5s var(--ease) -2.4s infinite}
@keyframes breathe{0%,100%{opacity:.32;transform:scale(1)}50%{opacity:.72;transform:scale(1.06)}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .premise,.hold-grid,.facts,.faq-grid,.form-layout{grid-template-columns:minmax(0,1fr)}
  .form-aside{order:-1}
  .form-aside img{min-height:220px}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .lockup{font-size:36px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .nav-links a.btn-primary{color:#07090B;font-weight:600;padding:13px 22px}
.nav-links a.btn-primary:hover{color:#07090B}

.nav-toggle{display:inline-flex}
  .nav-links{
    position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;
    background:rgba(10,13,16,.98);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);padding:14px var(--gut) 26px;gap:0;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .45s var(--ease),transform .45s var(--ease-out);
  }
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a:not(.btn){padding:15px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav-links .btn{margin-top:18px;justify-content:center;width:100%}
}
@media (max-width:640px){
  .static-hero .cta-row,.band .cta-row,.cta-inner .cta-row,.four .cta-row{flex-direction:column;align-items:stretch;width:100%}
  .static-hero .cta-row .btn,.band .cta-row .btn,.cta-inner .cta-row .btn,.four .cta-row .btn{width:100%}
  .frow,.frow-3{grid-template-columns:minmax(0,1fr)}
  .facts .row{grid-template-columns:minmax(0,1fr);gap:6px}
  .map-grid{grid-template-columns:minmax(0,1fr)}
  .foot-top{grid-template-columns:minmax(0,1fr);gap:34px}
  .foot-bot{flex-direction:column}
  .triplet li{grid-template-columns:minmax(0,1fr);gap:6px}
}

/* ==========================================================================
   REDUCED MOTION: honoured completely, and live in both directions
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;
  }
  .rv .part,.fade{opacity:1;transform:none}
  .commits li{opacity:1;transform:none}
  .draw{stroke-dashoffset:0}
  .live-glow{opacity:.5}
  .pivot-rule .spark{opacity:.9}
  /* re-apply positional transforms rather than blanket-killing them */
  .hold-btn .fill{transform:scaleX(1)}
}

/* ==========================================================================
   THE BAND IMAGE: a wide cinematic plate, its own layout skeleton
   ========================================================================== */
.band-image{padding-block:clamp(20px,4vw,48px)}
.bi-frame{
  position:relative;width:100%;max-width:1560px;margin:0 auto;
  border-block:1px solid var(--line);overflow:hidden;
  aspect-ratio:24/9;min-height:260px;
}
.bi-frame img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.02)}
.bi-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(9,11,13,.9) 0%,rgba(9,11,13,.32) 46%,rgba(9,11,13,.66) 100%),
    linear-gradient(to bottom,rgba(9,11,13,.5),rgba(9,11,13,0) 34%,rgba(9,11,13,.6));
}
.bi-line{
  position:absolute;left:0;right:0;bottom:clamp(24px,4vw,54px);
  padding-inline:var(--gut);margin:0 auto;max-width:var(--maxw);
  font-family:var(--display);font-weight:900;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(24px,3.6vw,50px);max-width:20ch;text-shadow:var(--tshadow);
}
.band-image.fade .bi-line{transition:opacity 1.1s var(--ease-out) .2s,transform 1.1s var(--ease-out) .2s}
@media (max-width:720px){
  .bi-frame{aspect-ratio:4/3}
  .bi-frame img{object-position:center 40%}
}

/* the hold visual column */
.hold-visual{display:flex;flex-direction:column;align-items:flex-start}
.hold-stage .beam-g{transform-box:fill-box;transform-origin:center;transition:transform .12s linear}
.hold-stage.done .beam-g{transition:transform .7s var(--ease-out)}

/* ---------- the eligibility gate note ---------- */
.gate-note[hidden]{display:none}
.note-block{
  border:1px solid rgba(255,138,120,.4);border-left-width:3px;border-radius:9px;
  background:rgba(255,138,120,.06);padding:16px 18px;
  color:#FFC2B8;font-size:14.5px;line-height:1.6;
}
.note-block a{color:#FFC2B8;text-decoration:underline;text-underline-offset:3px}
form.fx.blocked .form-actions button[type="submit"]{opacity:.4;pointer-events:none}

/* the sitemap rows wrap their text in one span so the arrow can sit right */
.map-col a > span:first-child{flex:1;min-width:0}
.map-col a .t{display:block}

.form-lead{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--steel);
  margin:-8px 0 20px;line-height:1.6;
}