/* ═══════════════════════════════════════════════════════════════
   Northvane — flight intelligence
   One typeface (Archivo variable), five core colours, one bold idea:
   a fixed altitude tape that everything else aligns to.
   ═══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-var.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}

:root{
  /* core */
  --abyss:#060A12;
  --steel:#1B2635;
  --fluent:#2E9BFF;
  --ember:#FFA23A;
  --paper:#EDF2F8;
  /* derived */
  --slate:#0E1520;
  --deep:#0B5FB8;
  --haze:#A9B7CA;
  --dim:#6E7F94;

  --hair:color-mix(in srgb, var(--steel) 82%, var(--paper) 18%);
  --hair-soft:color-mix(in srgb, var(--steel) 92%, var(--paper) 8%);

  /* rhythm — one column system, anchored to the tape */
  --rail:78px;
  --gut:clamp(20px,4.2vw,62px);
  --max:clamp(640px,76vw,1330px);
  --off:calc(var(--rail) + var(--gut));   /* left edge of every content column */
  --bar-h:66px;

  /* hero framing: push the aircraft clear of the type */
  --hero-scale:1.14;
  --hero-shift:6%;
  --hero-lift:0%;

  /* type scale, 1.28 modular on the display end */
  --fs-hero:clamp(2.7rem,6.7vw,6.1rem);
  --fs-q:clamp(1.45rem,3.2vw,2.6rem);
  --fs-h2:clamp(1.8rem,3.5vw,3.05rem);
  --fs-h3:clamp(1.18rem,1.65vw,1.5rem);
  --fs-lede:clamp(1.01rem,1.2vw,1.19rem);
  --fs-body:clamp(0.965rem,1.02vw,1.05rem);
  --fs-sm:0.8125rem;
  --fs-xs:0.6875rem;

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

/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar-h) + 20px)}
body{
  margin:0;background:var(--abyss);color:var(--paper);
  font-family:"Archivo",ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs-body);font-weight:400;line-height:1.62;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,p,dl,dd,figure,ol,ul{margin:0}
ol,ul{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--fluent);outline-offset:3px;border-radius:3px}
::selection{background:color-mix(in srgb,var(--fluent) 45%,transparent);color:#fff}

.skip{
  position:fixed;top:10px;left:10px;z-index:400;padding:.7em 1.1em;
  background:var(--fluent);color:#04101f;font-weight:600;border-radius:6px;
  transform:translateY(-180%);transition:transform .22s var(--ease);
}
.skip:focus{transform:none}

/* THE column. Left-anchored to the tape, one rule, no per-section overrides. */
.wrap{
  width:100%;
  max-width:calc(var(--max) + var(--off) + var(--gut));
  margin-inline:0 auto;
  padding-left:var(--off);
  padding-right:var(--gut);
}

/* ═══ 1. STAGE — one fixed video serving hero + statement ═══ */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:#04070d}
.stage__media{
  position:absolute;inset:0;will-change:transform;
  transform:translate3d(var(--hero-shift),var(--hero-lift),0) scale(var(--hero-scale));
}
.stage__video{
  width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  background:#0b1018 center/cover no-repeat;
  opacity:1;transition:opacity .7s var(--ease);
}
/* directional falloff: dark where the type lives, open where the aircraft is */
.stage__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(97deg,
      rgba(4,8,15,.94) 0%, rgba(4,8,15,.86) 20%, rgba(4,8,15,.58) 40%,
      rgba(4,8,15,.16) 66%, rgba(4,8,15,.04) 82%, rgba(4,8,15,.30) 100%),
    linear-gradient(to bottom,
      rgba(4,8,15,.74) 0%, rgba(4,8,15,.12) 25%, rgba(4,8,15,.14) 56%, rgba(6,10,18,.97) 100%);
}
.stage__vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(128% 92% at 58% 46%, transparent 46%, rgba(3,6,12,.58) 100%);
}
.stage__grain{
  position:absolute;inset:-50%;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.55'/></svg>");
}
.still .stage__grain{display:none}

/* ═══ 2. ALTITUDE TAPE ═══ */
.tape{position:fixed;top:0;left:0;bottom:0;width:var(--rail);z-index:60;pointer-events:none}
.tape__line{
  position:absolute;top:0;bottom:0;left:calc(var(--rail) - 1px);width:1px;
  background:linear-gradient(to bottom,transparent,var(--hair-soft) 9%,var(--hair-soft) 91%,transparent);
}
.tape__fill{
  position:absolute;top:0;left:calc(var(--rail) - 1px);width:1px;height:0;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--fluent) 6%,transparent),var(--fluent));
  box-shadow:0 0 10px color-mix(in srgb,var(--fluent) 50%,transparent);
}
/* graduations run right up to the line, long marks every fifth */
.tape__ticks{
  position:absolute;top:-150px;bottom:-150px;right:1px;width:26px;
  will-change:transform;
  background-image:
    repeating-linear-gradient(to bottom, var(--hair-soft) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(to bottom, color-mix(in srgb,var(--paper) 30%,transparent) 0 1px, transparent 1px 75px);
  background-size:8px 100%, 20px 100%;
  background-position:right top, right top;
  background-repeat:repeat-y;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);
}
/* the altitude bug: notched box whose point touches the tape */
.tape__read{
  position:absolute;top:50%;right:1px;transform:translateY(-50%);
  display:flex;align-items:center;height:26px;padding:0 9px 0 8px;
  font-size:var(--fs-xs);font-weight:600;font-stretch:86%;letter-spacing:.09em;
  color:var(--paper);white-space:nowrap;
  background:color-mix(in srgb,#050a12 88%,transparent);
  border:1px solid var(--hair);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 66%,-7px 50%,0 34%);
}
.tape__read::after{
  content:"";position:absolute;right:-1px;top:-1px;bottom:-1px;width:2px;background:var(--fluent);
}

/* ═══ 3. BAR ═══ */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:120;height:var(--bar-h);
  display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);
  padding-left:var(--off);padding-right:var(--gut);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s var(--ease);
}
.bar.is-lifted{
  background:color-mix(in srgb,var(--abyss) 74%,transparent);
  border-bottom-color:var(--hair-soft);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.mark{display:flex;align-items:center;gap:10px;margin-right:auto}
.mark__glyph{color:var(--fluent);flex:none;transition:transform .5s var(--ease-out)}
.mark:hover .mark__glyph{transform:translateY(-2px) rotate(-4deg)}
.mark__word{font-weight:600;font-stretch:112%;letter-spacing:.005em;font-size:1.02rem}

.bar__nav ul{display:flex;gap:clamp(13px,1.6vw,26px)}
.bar__nav a{
  position:relative;font-size:var(--fs-sm);color:var(--haze);padding:6px 1px;
  transition:color .25s var(--ease);
}
.bar__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fluent);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease-out);
}
.bar__nav a:hover,.bar__nav a.is-here{color:var(--paper)}
.bar__nav a:hover::after,.bar__nav a.is-here::after{transform:scaleX(1)}

.bar__fl{
  font-size:var(--fs-xs);font-stretch:86%;font-weight:600;letter-spacing:.1em;
  color:var(--dim);padding:4px 8px;border:1px solid var(--hair-soft);
  opacity:0;transition:opacity .35s var(--ease);
}
.bar.is-lifted .bar__fl{opacity:1}

/* buttons */
.btn{
  --bg:var(--fluent);--fg:#03121f;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:.8em 1.45em;border-radius:2px;border:1px solid transparent;
  background:var(--bg);color:var(--fg);
  font-size:var(--fs-sm);font-weight:600;font-stretch:104%;letter-spacing:.012em;
  overflow:hidden;isolation:isolate;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,var(--deep),var(--fluent) 55%,#8FD0FF);
  transform:translateX(-101%);transition:transform .52s var(--ease-out);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -12px color-mix(in srgb,var(--fluent) 70%,transparent)}
.btn:hover::before{transform:none}
.btn:active{transform:translateY(0)}
.btn--ghost{--bg:transparent;--fg:var(--paper);border-color:var(--hair)}
.btn--ghost::before{background:color-mix(in srgb,var(--paper) 9%,transparent)}
.btn--ghost:hover{box-shadow:none;border-color:color-mix(in srgb,var(--paper) 32%,transparent)}
.btn--sm{padding:.6em 1.05em}
.btn--lg{padding:1em 1.85em;font-size:.9rem}
.btn--block{display:flex;width:100%;padding:1em}

/* hamburger */
.hamburger{
  display:none;width:42px;height:42px;background:none;border:1px solid var(--hair-soft);
  position:relative;cursor:pointer;
}
.hamburger span{
  position:absolute;left:11px;right:11px;height:1.5px;background:var(--paper);
  transition:transform .34s var(--ease-out);
}
.hamburger span:nth-child(1){top:16px}
.hamburger span:nth-child(2){top:23px}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.sheet{
  position:fixed;inset:var(--bar-h) 0 0;z-index:110;
  padding:26px var(--gut) 40px var(--off);
  background:color-mix(in srgb,var(--abyss) 90%,transparent);
  backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%);
  display:flex;flex-direction:column;gap:18px;
  opacity:0;transform:translateY(-10px);
  transition:opacity .3s var(--ease),transform .34s var(--ease-out);
}
.sheet.is-open{opacity:1;transform:none}
@media (min-width:901px){.sheet{display:none}}
.sheet a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:17px 0;border-bottom:1px solid var(--hair-soft)}
.sheet a span{font-size:1.4rem;font-weight:600;font-stretch:112%}
.sheet a em{font-style:normal;font-size:var(--fs-xs);font-stretch:86%;letter-spacing:.1em;color:var(--dim)}
.sheet .btn{margin-top:auto}

/* ═══ 4. HERO ═══ */
main{position:relative;z-index:1}

.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--bar-h) + 40px);
}
.hero__grid{padding-bottom:clamp(26px,4.4vh,54px)}
.hero__h{
  font-size:var(--fs-hero);font-weight:620;font-stretch:116%;
  line-height:.9;letter-spacing:-.032em;margin-bottom:.5em;
  max-width:15ch;
}
.hero__h .ln{display:block;overflow:hidden;padding-bottom:.035em}
.hero__h .ln>span{display:block;text-shadow:0 2px 44px rgba(3,7,14,.68)}
.js .hero__h .ln>span{transform:translateY(105%);opacity:0}
.hero__lede{
  max-width:48ch;color:color-mix(in srgb,var(--paper) 86%,transparent);
  font-size:var(--fs-lede);line-height:1.56;
  text-shadow:0 1px 24px rgba(3,7,14,.75);
}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vh,36px)}
.js .hero__lede,.js .hero__acts{opacity:0;transform:translateY(16px)}

/* head-up telemetry strip — full instrument bezel across the column */
.hud{
  display:flex;flex-wrap:wrap;align-items:stretch;
  border:1px solid var(--hair-soft);
  background:color-mix(in srgb,#060d17 56%,transparent);
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
}
.hud__shell{margin-bottom:clamp(20px,3.2vh,38px)}
.js .hud{opacity:0;transform:translateY(18px)}
.hud__cell{
  display:flex;align-items:baseline;gap:.55em;
  padding:.76em 1.15em;flex:1 1 0;min-width:0;
  border-right:1px solid var(--hair-soft);
}
.hud__cell:last-child{border-right:0}
.hud__k{font-size:var(--fs-xs);letter-spacing:.14em;font-stretch:80%;font-weight:600;color:var(--dim)}
.hud__v{font-size:.97rem;font-weight:600;font-stretch:88%;letter-spacing:.015em;color:var(--paper);
  font-variant-numeric:tabular-nums}
.hud__v--word{letter-spacing:.09em;font-size:var(--fs-sm)}
.hud__u{font-size:var(--fs-xs);color:var(--dim);font-stretch:86%;width:1.4em;flex:none}
.hud__cell--live{flex:0 0 auto;gap:.55em;align-items:center;
  background:none;border-top:0;border-bottom:0;border-left:1px solid var(--hair-soft);
  font:inherit;cursor:pointer;transition:background .3s var(--ease)}
.hud__cell--live:hover{background:color-mix(in srgb,var(--paper) 7%,transparent)}
.hud__cell--live .hud__v{transition:color .3s var(--ease)}
/* paused reads as a dormant instrument, not an error */
.still .hud__cell--live .hud__v{color:var(--dim)}
.still .pulse{background:var(--dim);animation:none;box-shadow:none}
.hud__cell--live .hud__v{color:var(--ember)}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--ember);flex:none;
  transition:background .3s var(--ease);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--ember) 70%,transparent);
  animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ember) 60%,transparent)}
  50%{box-shadow:0 0 0 7px transparent}
}

/* ═══ 5. HELD STATEMENT (video still live behind) ═══ */
.held{
  position:relative;min-height:80vh;display:flex;align-items:center;
  padding-block:clamp(80px,14vh,150px);
}
.held__q{
  font-size:var(--fs-q);font-weight:500;font-stretch:105%;line-height:1.22;
  letter-spacing:-.018em;max-width:21ch;
  text-shadow:0 2px 36px rgba(3,7,14,.78);
}

/* the wipe from live video to solid ground */
.veil{position:relative;height:46vh;margin-top:-1px;
  background:linear-gradient(to bottom,transparent,var(--abyss) 62%,var(--abyss))}

/* ═══ 6. SHARED SECTION SHELL ═══ */
.band{position:relative;background:var(--abyss);padding-block:clamp(76px,10.5vh,142px)}
.band--tight{padding-top:clamp(54px,7vh,92px)}
.band::before{
  content:"";position:absolute;top:0;left:var(--off);
  width:min(58%,540px);height:1px;
  background:linear-gradient(to right,var(--hair),transparent);
}
.band--env{
  background:
    radial-gradient(88% 58% at 80% 6%, color-mix(in srgb,var(--deep) 16%,transparent), transparent 70%),
    var(--abyss);
}

.head{margin-bottom:clamp(42px,5.6vh,72px)}
.head h2{
  font-size:var(--fs-h2);font-weight:600;font-stretch:112%;line-height:1.04;
  letter-spacing:-.028em;margin-bottom:.62em;max-width:19ch;
}
.lede{color:var(--haze);font-size:var(--fs-lede);line-height:1.58;max-width:52ch}

/* editorial two-column head on wide screens — kills the dead right margin */
@media (min-width:1100px){
  .head{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.82fr);
    gap:clamp(30px,4vw,76px);align-items:end}
  .head h2{margin-bottom:0}
  .head .lede{padding-bottom:.4em}
}

/* one restrained reveal, primary copy only */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.is-in{opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .9s var(--ease-out)}

/* ═══ 7. STACK — offset layer diagram ═══ */
.layers{display:flex;flex-direction:column;gap:2px}
.layer{
  position:relative;border:1px solid var(--hair-soft);
  background:linear-gradient(180deg,color-mix(in srgb,var(--slate) 74%,transparent),transparent);
  transition:transform .5s var(--ease-out),border-color .4s var(--ease),background .4s var(--ease);
}
.layer:nth-child(2){margin-left:clamp(0px,2.6vw,40px)}
.layer:nth-child(3){margin-left:clamp(0px,5.2vw,80px)}
.layer::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom,var(--fluent),color-mix(in srgb,var(--deep) 55%,transparent));
  transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease-out);
}
.layer:hover{border-color:color-mix(in srgb,var(--fluent) 28%,var(--hair))}
.layer.is-open{
  border-color:color-mix(in srgb,var(--fluent) 34%,var(--hair));
  background:linear-gradient(180deg,color-mix(in srgb,var(--slate) 96%,transparent),color-mix(in srgb,var(--slate) 38%,transparent));
  transform:translateX(clamp(0px,.9vw,10px));
}
.layer.is-open::after{transform:none}

.layer__hit{
  display:flex;align-items:baseline;gap:clamp(14px,2.2vw,28px);width:100%;
  padding:clamp(19px,2.4vw,28px) clamp(18px,2.4vw,32px);
  background:none;border:0;cursor:pointer;text-align:left;
}
.layer__idx{
  font-size:var(--fs-xs);font-stretch:80%;font-weight:600;letter-spacing:.14em;
  color:var(--dim);flex:none;width:2.1em;transition:color .35s var(--ease);
}
.layer.is-open .layer__idx{color:var(--fluent)}
.layer__name{
  font-size:clamp(1.32rem,2.4vw,1.95rem);font-weight:600;font-stretch:113%;
  letter-spacing:-.02em;line-height:1.1;flex:1 1 auto;
}
.layer__tag{font-size:var(--fs-sm);color:var(--haze);flex:none;font-stretch:92%}

.layer__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-out)}
.layer.is-open .layer__body{grid-template-rows:1fr}
.layer__body>.layer__in{overflow:hidden}
.layer__in{
  display:grid;gap:0 clamp(24px,3.4vw,60px);
  padding:0 clamp(18px,2.4vw,32px) 0 calc(clamp(14px,2.2vw,28px) + 2.1em + clamp(18px,2.4vw,32px));
}
.layer__in p{color:var(--haze);max-width:54ch}
.layer.is-open .layer__in{padding-bottom:clamp(20px,2.4vw,28px)}
@media (min-width:900px){
  .layer__in{grid-template-columns:minmax(0,1.35fr) minmax(230px,.75fr);align-items:start}
}
.spec{display:flex;flex-direction:column;gap:0;margin-top:.2em}
.spec>div{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.2em;
  padding:.62em 0;border-bottom:1px solid var(--hair-soft);
}
.spec>div:last-child{border-bottom:0}
.spec dt{font-size:var(--fs-xs);letter-spacing:.12em;font-stretch:80%;font-weight:600;color:var(--dim)}
.spec dd{margin:0;font-size:var(--fs-sm);font-stretch:92%;color:var(--paper);text-align:right}
@media (max-width:899px){
  .spec{margin-top:1.3em;border-top:1px solid var(--hair-soft);padding-top:.3em}
}

/* ═══ 8. ENVELOPE INSTRUMENT ═══ */
.env{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(268px,.82fr);
  gap:clamp(22px,3vw,46px);align-items:start}
.env__chart{
  margin:0;border:1px solid var(--hair-soft);
  background:linear-gradient(180deg,color-mix(in srgb,var(--slate) 68%,transparent),transparent);
  padding:clamp(12px,1.5vw,20px);
}
#envSvg{width:100%;height:auto;touch-action:none;cursor:crosshair;overflow:visible;display:block}
.env__grid line{stroke:var(--hair-soft);stroke-width:1}
.env__grid line.maj{stroke:color-mix(in srgb,var(--paper) 14%,transparent)}
.env__axes text{fill:var(--dim);font-size:10px;font-stretch:86%;font-weight:500;letter-spacing:.09em}
.env__axes text.ttl{fill:var(--haze);font-size:10.5px;letter-spacing:.14em}
.env__area{stroke:none}
.env__edge{fill:none;stroke:var(--fluent);stroke-width:1.6;stroke-linejoin:round;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--fluent) 45%,transparent))}
.env__caution{fill:none;stroke:#FFB65E;stroke-width:19;opacity:.34;stroke-linejoin:round}
.env__link{stroke:var(--ember);stroke-width:1;stroke-dasharray:3 4;opacity:0;transition:opacity .2s linear}
.env__ghost{fill:none;stroke:var(--ember);stroke-width:1.4;opacity:0;transition:opacity .2s linear}
.env__dot{cursor:grab}
.env__dot:active{cursor:grabbing}
.env__halo{fill:color-mix(in srgb,var(--fluent) 20%,transparent);
  stroke:color-mix(in srgb,var(--fluent) 45%,transparent);stroke-width:1}
.env__core{fill:#EAF6FF;stroke:var(--fluent);stroke-width:2}
.env.is-out .env__link,.env.is-out .env__ghost{opacity:1}
.env.is-out .env__halo{fill:color-mix(in srgb,var(--ember) 20%,transparent);
  stroke:color-mix(in srgb,var(--ember) 50%,transparent)}
.env.is-out .env__core{stroke:var(--ember)}
.env__cap{margin-top:14px;font-size:var(--fs-xs);line-height:1.6;color:var(--dim);max-width:72ch}

.env__panel{display:flex;flex-direction:column;gap:18px}
.gauge{border:1px solid var(--hair-soft);background:color-mix(in srgb,var(--slate) 58%,transparent)}
.gauge__row{display:flex;align-items:baseline;gap:.6em;padding:.76em 1.05em;
  border-bottom:1px solid var(--hair-soft)}
.gauge__row:last-child{border-bottom:0}
.gauge__k{font-size:var(--fs-xs);letter-spacing:.14em;font-stretch:80%;font-weight:600;
  color:var(--dim);width:5.2em;flex:none}
.gauge__v{margin-left:auto;font-size:1.16rem;font-weight:600;font-stretch:86%;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.gauge__u{font-size:var(--fs-xs);color:var(--dim);width:1.7em;flex:none}

.verdict{
  display:flex;align-items:center;gap:.7em;padding:.85em 1.05em;border:1px solid;
  font-size:var(--fs-sm);font-stretch:96%;line-height:1.35;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.verdict__dot{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}
.verdict[data-state="ok"]{border-color:color-mix(in srgb,var(--fluent) 40%,transparent);
  background:color-mix(in srgb,var(--fluent) 9%,transparent);color:#93CDFF}
.verdict[data-state="lim"]{border-color:color-mix(in srgb,var(--ember) 45%,transparent);
  background:color-mix(in srgb,var(--ember) 9%,transparent);color:var(--ember)}
.verdict[data-state="out"]{border-color:color-mix(in srgb,#FF6B57 52%,transparent);
  background:color-mix(in srgb,#FF6B57 10%,transparent);color:#FF9484}

.ctl{display:flex;flex-direction:column;gap:14px}
.ctl__row{
  display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"k o" "s s";
  gap:2px 12px;align-items:baseline;
}
.ctl__k{grid-area:k;font-size:var(--fs-sm);color:var(--haze)}
.ctl__row output{grid-area:o;font-size:var(--fs-sm);font-stretch:86%;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--paper);text-align:right}
.ctl__row input[type="range"]{
  grid-area:s;-webkit-appearance:none;appearance:none;width:100%;height:20px;
  background:none;cursor:pointer;margin:0;
}
.ctl__row input[type="range"]::-webkit-slider-runnable-track{height:3px;
  background:color-mix(in srgb,var(--hair) 60%,var(--paper) 22%)}
.ctl__row input[type="range"]::-moz-range-track{height:3px;
  background:color-mix(in srgb,var(--hair) 60%,var(--paper) 22%)}
.ctl__row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--paper);border:2px solid var(--fluent);margin-top:-5.5px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.ctl__row input[type="range"]::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--fluent)
}
.ctl__row input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.15);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--fluent) 16%,transparent)}
.env__note{font-size:var(--fs-xs);color:var(--dim);line-height:1.6}

/* ═══ 9. CINEMA BAND — cold regrade of the same footage ═══ */
.cinema{
  position:relative;background:var(--abyss);
  min-height:clamp(340px,54vh,580px);
  display:flex;align-items:center;overflow:hidden;isolation:isolate;
}
.cinema__media{position:absolute;inset:0;z-index:-1;background:#080c13 center/cover no-repeat}
.cinema__video{width:100%;height:100%;object-fit:cover;object-position:50% 48%;
  opacity:0;transition:opacity 1.1s var(--ease)}
.cinema__video.is-live{opacity:1}
.cinema__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(97deg,rgba(6,10,18,.95) 0%,rgba(6,10,18,.78) 32%,rgba(6,10,18,.26) 70%,rgba(6,10,18,.5) 100%),
    linear-gradient(to bottom,var(--abyss) 0%,rgba(6,10,18,.12) 24%,rgba(6,10,18,.18) 72%,var(--abyss) 100%);
}
.cinema__copy{padding-block:clamp(56px,8.5vh,104px)}
.cinema__q{
  font-size:var(--fs-q);font-weight:500;font-stretch:105%;line-height:1.2;
  letter-spacing:-.018em;max-width:23ch;text-shadow:0 2px 32px rgba(3,7,14,.82);
}

/* ═══ 10. PIPELINE (a real sequence, so numbers earn their place) ═══ */
.pipe{display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));
  border-top:1px solid var(--hair-soft);counter-reset:step}
.pipe li{
  counter-increment:step;position:relative;
  padding:24px clamp(16px,1.7vw,26px) 28px 0;
  border-bottom:1px solid var(--hair-soft);
}
.pipe li::before{
  content:counter(step,decimal-leading-zero);display:block;margin-bottom:1.05em;
  font-size:var(--fs-xs);letter-spacing:.14em;font-stretch:80%;font-weight:600;color:var(--fluent);
}
.pipe li::after{
  content:"";position:absolute;top:0;left:0;width:0;height:1px;background:var(--fluent);
  transition:width .7s var(--ease-out);
}
.pipe li.is-in::after{width:calc(100% - clamp(16px,1.7vw,26px))}
.pipe b{display:block;font-weight:600;font-stretch:105%;font-size:1.01rem;margin-bottom:.4em}
.pipe p{color:var(--haze);font-size:var(--fs-sm);line-height:1.6;max-width:32ch}

.stds{
  margin-top:clamp(34px,4.6vh,58px);padding-top:22px;border-top:1px solid var(--hair-soft);
  font-size:var(--fs-xs);letter-spacing:.13em;font-stretch:86%;font-weight:600;color:var(--dim);
}

/* ═══ 11. FLEET ═══ */
.fleet{border-top:1px solid var(--hair-soft)}
.fleet__row{
  display:grid;grid-template-columns:minmax(0,14em) minmax(0,1fr) minmax(0,16em);
  gap:clamp(14px,2.6vw,42px);
  padding:clamp(26px,3.4vw,42px) 0;
  border-bottom:1px solid var(--hair-soft);
  transition:background .45s var(--ease);
}
.fleet__row:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--slate) 70%,transparent),transparent 74%)}
.fleet__row h3{font-size:var(--fs-h3);font-weight:600;font-stretch:110%;letter-spacing:-.015em;line-height:1.2}
.fleet__row p{color:var(--haze);max-width:44ch;font-size:var(--fs-body)}
.fleet__m{display:flex;flex-direction:column;gap:0}
.fleet__m>div{display:flex;justify-content:space-between;gap:1em;align-items:baseline;
  border-bottom:1px solid var(--hair-soft);padding:.42em 0}
.fleet__m>div:last-child{border-bottom:0}
.fleet__m dt{font-size:var(--fs-xs);letter-spacing:.12em;font-stretch:80%;font-weight:600;color:var(--dim)}
.fleet__m dd{margin:0;font-size:var(--fs-sm);font-stretch:88%;font-weight:600;color:var(--paper);
  font-variant-numeric:tabular-nums}

/* ═══ 12. CLOSE ═══ */
.close{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(92px,16vh,190px);background:var(--abyss)}
.close::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("../media/deep-blur.webp") center/cover no-repeat;
  opacity:.72;transform:scale(1.1);will-change:transform;
}
.close::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, rgba(6,10,18,.95) 0%, rgba(6,10,18,.88) 30%, rgba(6,10,18,.52) 58%, rgba(6,10,18,.30) 100%),
    linear-gradient(to bottom,var(--abyss),rgba(6,10,18,.18) 30%,rgba(6,10,18,.42) 74%,var(--abyss));
}
.close h2{
  font-size:clamp(2rem,4.6vw,3.9rem);font-weight:620;font-stretch:114%;
  line-height:1.02;letter-spacing:-.032em;max-width:16ch;margin-bottom:.55em;
}
.close .lede{max-width:48ch}
.close__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.6vh,42px)}

/* ═══ 13. FOOT ═══ */
.foot{position:relative;z-index:1;border-top:1px solid var(--hair-soft);
  padding-block:clamp(34px,4.6vh,56px);background:var(--abyss)}
.foot__in{display:grid;grid-template-columns:auto 1fr;gap:18px clamp(24px,4vw,60px);align-items:center}
.foot__mark{display:flex;align-items:center;gap:9px;color:var(--haze);font-weight:600;font-stretch:110%}
.foot__mark svg{color:var(--fluent)}
.foot__nav{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,26px);justify-self:end}
.foot__nav a{font-size:var(--fs-sm);color:var(--dim);transition:color .25s var(--ease)}
.foot__nav a:hover{color:var(--paper)}
.foot__fine{grid-column:1/-1;font-size:var(--fs-xs);line-height:1.65;color:var(--dim);max-width:76ch;
  padding-top:18px;border-top:1px solid var(--hair-soft)}

/* ═══ 14. RESPONSIVE ═══ */
@media (max-width:1080px){
  .env{grid-template-columns:1fr}
  .env__panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));align-items:start}
  .env__note{grid-column:1/-1}
  .fleet__row{grid-template-columns:minmax(0,12em) minmax(0,1fr)}
  .fleet__m{grid-column:2;flex-direction:row;flex-wrap:wrap;gap:0 clamp(20px,4vw,48px)}
  .fleet__m>div{border-bottom:0;flex-direction:column;gap:.1em;padding:0}
}

@media (max-width:900px){
  :root{--rail:46px;--bar-h:60px;--hero-scale:1.09;--hero-shift:3%;--hero-lift:-2%}
  .bar__nav,.bar .btn--sm,.bar__fl{display:none}
  .hamburger{display:block}
  .tape__ticks{width:16px}
  .tape__read{height:22px;padding:0 6px;font-size:.58rem;letter-spacing:.05em}
  .layer:nth-child(2),.layer:nth-child(3){margin-left:0}
  .layer__hit{flex-wrap:wrap;gap:5px 14px}
  .layer__tag{flex:1 0 100%;order:3;padding-left:calc(2.1em + 14px)}
  .layer__in{padding-left:clamp(18px,2.4vw,32px)}
}

@media (max-width:720px){
  :root{--rail:22px;--hero-scale:1.20;--hero-shift:0%;--hero-lift:-5.5%}
  .tape__ticks,.tape__read{display:none}
  .tape__line{left:0;width:2px;background:var(--hair-soft)}
  .tape__fill{left:0;width:2px;box-shadow:0 0 8px color-mix(in srgb,var(--fluent) 60%,transparent)}

  .stage__video{object-position:50% 40%}
  .stage__scrim{
    background:linear-gradient(to bottom,
      rgba(4,8,15,.80) 0%, rgba(4,8,15,.26) 20%,
      rgba(4,8,15,.40) 44%, rgba(4,8,15,.80) 66%, rgba(6,10,18,.98) 92%);
  }
  .stage__vignette{background:radial-gradient(120% 70% at 50% 38%, transparent 40%, rgba(3,6,12,.6) 100%)}

  .hero__h{max-width:11ch;line-height:.94}
  .hero__lede{font-size:1.01rem;max-width:36ch}
  .hero__acts{gap:10px;width:100%}
  .hero__acts .btn{flex:1 1 auto;justify-content:center}

  .hud{display:grid;grid-template-columns:1fr 1fr}
  .hud__cell{padding:.62em .85em;border-bottom:1px solid var(--hair-soft)}
  .hud__cell:nth-child(2n){border-right:0}
  .hud__cell--live{grid-column:1/-1;justify-content:center;border-right:0;border-bottom:0}
  .hud__cell:nth-child(3),.hud__cell:nth-child(4){border-bottom:0}

  .held{min-height:auto;padding-block:clamp(66px,15vh,116px)}
  .veil{height:32vh}
  .env__panel{grid-template-columns:1fr}
  /* SVG text is in user units, so it shrinks with the viewBox — scale it back up */
  .env__axes text{font-size:20px}
  .env__axes text.ttl{display:none}        /* the caption already names both axes */
  .env__grid line{stroke-width:2}
  .env__edge{stroke-width:3}
  .env__caution{stroke-width:26}
  .env__core{r:9;stroke-width:3}
  .env__halo{r:22}
  .fleet__row{grid-template-columns:1fr;gap:11px}
  .fleet__m{grid-column:1;gap:0 30px}
  .pipe{grid-template-columns:1fr 1fr}
  .foot__in{grid-template-columns:1fr}
  .foot__nav{justify-self:start}
}

@media (max-width:460px){
  .pipe{grid-template-columns:1fr}
  .hero__acts{flex-direction:column}
  .hero__acts .btn{width:100%}
  .fleet__m{gap:0 24px}
}

@media (max-height:560px) and (orientation:landscape){
  .hero{min-height:620px}
  .hud__shell{display:none}
}

/* ═══ 15. MOTION / DATA PREFERENCES ═══ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .js .hero__h .ln>span,.js .hero__lede,.js .hero__acts,.js .hud,.js .reveal{
    opacity:1 !important;transform:none !important;
  }
  .pulse{animation:none !important}
  .stage__media{transform:translate3d(var(--hero-shift),var(--hero-lift),0) scale(var(--hero-scale)) !important}
}

/* poster-only fallback when motion is reduced or data is scarce */
.still .stage__video{opacity:0}
.still .stage__media{background:url("../media/poster-hero.webp") center/cover no-repeat}
@media (max-width:720px){
  .still .stage__media{background-image:url("../media/poster-mobile.webp")}
}
.still .cinema__media{background-image:url("../media/poster-signal.webp")}
.still .cinema__video{opacity:0}

@media (forced-colors:active){
  .stage,.close::before{display:none}
  .btn{border:1px solid ButtonText}
}