@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/poppins-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/poppins-latin-500-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/poppins-latin-600-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============================================================
   Flaperon AI
   Design direction: instrumentation. The page is a flight deck.
   Signature element: the cyan trajectory the wing mark flies down
   the flight-plan section, with a live altimeter in the hero.
   ============================================================ */

:root{
  --navy-950:#031C47; --navy-900:#002359; --navy-300:#A8C3EF;
  --blue-600:#0468EE; --blue-700:#0353C4; --blue-300:#9DC3FF;
  --cyan-400:#08B7C2; --cyan-600:#00868F;
  --ink-0:#FFFFFF; --ink-50:#F4F7FC; --ink-200:#D3DBE6;
  --ink-600:#47505F; --ink-900:#141D2C;

  --canvas:#F4F7FC;            /* never pure white */
  --deck:#04122E;              /* hero + dark sections, tinted to the footage grade */
  --deck-2:#061A3C;
  --panel:#FFFFFF;

  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-soft:cubic-bezier(.65,.05,.36,1);

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

  --pad:clamp(20px,5vw,80px);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
.sprite{position:absolute}
.ring-arc{stroke-dashoffset:var(--ld,126)}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--ink-900);
  font:400 17px/1.65 Poppins,system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.12}
p{margin:0}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue-600);color:#fff;padding:12px 18px;border-radius:0 0 10px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--cyan-400);outline-offset:3px;border-radius:4px}

/* ---------- one environment behind everything ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env-glow{position:absolute;inset:-20%;
  background:radial-gradient(50% 40% at 78% 12%,rgba(8,183,194,.10),transparent 70%),
             radial-gradient(46% 38% at 12% 78%,rgba(4,104,238,.09),transparent 70%);
  animation:envDrift 96s var(--e-soft) -18s infinite alternate}
.env-grain{position:absolute;inset:0;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes envDrift{to{transform:translate3d(-3%,2%,0) scale(1.08)}}

main{position:relative;z-index:1}

/* ---------- type scale ---------- */
.h2{font-size:clamp(30px,4.1vw,50px)}
.h3{font-size:clamp(24px,3vw,36px)}
.kicker{font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-600);margin-bottom:16px}
.kicker-light{color:var(--cyan-400)}
.h2-light{color:#fff}
.lede{font-size:clamp(17px,1.5vw,19px);color:var(--ink-600);max-width:62ch;margin-top:18px}
.lede-light{color:rgba(226,236,250,.82)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:11px;border:1px solid transparent;
  font:500 14.5px/1 Poppins,sans-serif;letter-spacing:.005em;text-decoration:none;cursor:pointer;
  transition:transform .45s var(--e-out),background-color .45s var(--e-out),border-color .45s var(--e-out),box-shadow .45s var(--e-out);
  text-shadow:none;
}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:10px 17px;font-size:13.5px}
.btn-accent{background:var(--cyan-400);color:#04223A;font-weight:500}
.btn-accent:hover{background:#0ACBD8;box-shadow:0 10px 28px -10px rgba(8,183,194,.75)}
.btn-primary{background:var(--blue-600);color:#fff}
.btn-primary:hover{background:var(--blue-700);box-shadow:0 10px 28px -10px rgba(4,104,238,.8)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.34);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(168,195,239,.55)}
.btn-outline:hover{border-color:var(--cyan-400);color:var(--cyan-400)}
.btn-full{width:100%}
@media (pointer:coarse){.btn{min-height:44px}}

.link-arrow{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font:500 14.5px/1 Poppins,sans-serif;color:var(--blue-600);text-decoration:none;transition:gap .4s var(--e-out)}
.link-arrow::after{content:"→";transition:transform .4s var(--e-out)}
.link-arrow:hover{gap:12px}
.link-arrow-light{color:var(--cyan-400)}

/* ---------- nav: always light, always the primary mark ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(244,247,252,.84);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid rgba(20,29,44,.08)}
.nav-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:14px var(--pad);display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto}
/* One image, so mark-to-word gap, proportions, wing-centre alignment and the
   cap-height "l" all live in brand-lockup.svg. Height is set so the wordmark's
   cap height equals the old 19px Poppins cap (13.26px). See brand/BRAND-SPEC.md. */
.brand-lockup{height:23.4px;width:auto;flex:none;display:block}
.nav-links{display:flex;gap:26px}
.nav-links a{font:500 14.5px/1 Poppins,sans-serif;text-decoration:none;color:var(--ink-600);position:relative;padding:6px 0;transition:color .4s var(--e-out)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--cyan-400);transition:right .45s var(--e-out)}
.nav-links a:hover{color:var(--navy-900)}
.nav-links a:hover::after{right:0}

/* ============================================================
   HERO
   ============================================================ */
.hero{height:1100vh;position:relative;background:var(--deck)}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--deck)}
.sky,#hero,.poster,.scrim{position:absolute;inset:0;width:100%;height:100%}
.sky canvas{width:100%;height:100%;display:block}
#hero{object-fit:cover;opacity:0;transition:opacity .9s var(--e-out);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero{opacity:1}
.stage.video-ready .sky{opacity:0;transition:opacity .9s var(--e-out)}
.poster{background-size:cover;background-position:center;opacity:0;transition:opacity .8s var(--e-out)}
.stage.has-poster .poster{opacity:1}
.stage.video-ready .poster{opacity:0}
.scrim{pointer-events:none;background:
  linear-gradient(180deg,rgba(3,10,26,.66) 0%,rgba(3,10,26,.26) 24%,rgba(3,10,26,0) 44%),
  linear-gradient(0deg,rgba(3,10,26,.78) 0%,rgba(3,10,26,.34) 24%,rgba(3,10,26,0) 46%),
  radial-gradient(ellipse 128% 100% at 50% 50%,rgba(3,10,26,0) 52%,rgba(3,10,26,.48) 100%)}

.ring{position:absolute;right:calc(var(--pad));bottom:96px;width:34px;height:34px;color:rgba(168,195,239,.85);transform:rotate(-90deg);opacity:0;transition:opacity .5s var(--e-out)}
.ring.on{opacity:1}
.ring circle{transition:stroke-dashoffset .18s linear}

/* the intro canopy */
.intro{position:absolute;inset:0;z-index:5;background:
  radial-gradient(70% 60% at 78% 18%,rgba(8,183,194,.10),transparent 70%),
  radial-gradient(60% 50% at 10% 90%,rgba(4,104,238,.08),transparent 70%),
  var(--canvas);
  display:grid;place-items:center;will-change:transform,opacity}
.intro-in{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 var(--pad);margin-top:-2vh}
.intro-mark{width:min(360px,44vw);height:auto;overflow:visible}
/* The wing artwork carries its whitespace on the left, so its ink sits about
   2.8% of the mark's width right of the box centre. Everything under it
   (wordmark, tagline and the scroll cue) hangs off the wing's axis rather than
   the box's, so the whole lockup shares one centre line at every size. */
.intro{--lockup:calc(min(360px,44vw) * .028)}
.intro-word,.intro-tag{margin-right:calc(var(--lockup) * 2)}
.intro-cue{padding-right:calc(var(--lockup) * 2)}
.intro-word{margin-top:26px;font:600 clamp(40px,6.4vw,76px)/1 Poppins,sans-serif;letter-spacing:-.03em;color:var(--navy-900)}
.intro-word b{color:var(--blue-600);font-weight:600}
.intro-tag{margin-top:14px;font-size:clamp(15px,1.5vw,19px);color:var(--ink-600)}
.intro-cue{position:absolute;left:0;right:0;bottom:36px;display:flex;flex-direction:column;align-items:center;gap:10px;
  font:500 11.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-600)}
.intro-cue i{display:block;width:1px;height:30px;background:linear-gradient(180deg,var(--cyan-400),transparent);animation:cueRun 2.6s var(--e-soft) infinite}

/* the mark assembles once, 2.1s, then hands over to scroll */
.i-wing{opacity:0;transform:translate(-40px,26px);transform-box:fill-box;transform-origin:center;
  animation:iWing 1.1s var(--e-out) .1s forwards}
.i-flap{opacity:0;transform-box:fill-box;transform-origin:2% 0%;transform:rotate(-7deg);
  animation:iFlap .9s var(--e-out) .95s forwards}
.i-swoosh-clip{transform:translateX(-100%);animation:iClip 1.15s var(--e-out) .7s forwards}
.i-arrow{opacity:0;animation:iArrow .35s var(--e-out) 1.7s forwards}
.intro-word,.intro-tag{opacity:0;transform:translateY(12px);animation:iText .9s var(--e-out) forwards}
.intro-word{animation-delay:1.35s}
.intro-tag{animation-delay:1.55s}
.intro-cue{opacity:0;animation:iCue .9s var(--e-out) 2.1s forwards}
@keyframes iCue{to{opacity:1}}
@keyframes iWing{to{opacity:1;transform:none}}
@keyframes iFlap{0%{opacity:0;transform:rotate(-7deg)}35%{opacity:1;transform:rotate(-7deg)}100%{opacity:1;transform:rotate(0)}}
@keyframes iClip{to{transform:none}}
@keyframes iArrow{to{opacity:1}}
@keyframes iText{to{opacity:1;transform:none}}

/* HUD: altimeter + control-surface schematic */
.chip{background:rgba(3,12,30,.90);border:1px solid rgba(168,195,239,.34);box-shadow:inset 0 0 0 1px rgba(3,12,30,.6),0 20px 50px -30px rgba(0,0,0,.8);border-radius:14px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-shadow:0 1px 3px rgba(3,10,26,.9)}
.hud{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);width:312px;padding:14px 14px 12px;
  display:flex;flex-direction:column;gap:8px;
  font:400 12px/1 "IBM Plex Mono",ui-monospace,monospace;color:#C9DAF4;letter-spacing:.08em;z-index:3}
.hud-top{display:flex;align-items:baseline;justify-content:space-between}
.hud-altwrap{display:flex;align-items:baseline;gap:4px}
.hud-alt{font-size:22px;font-weight:500;color:#fff;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.hud-unit{font-size:10px;opacity:.85}
.hud-phase{font-size:10.5px;color:var(--cyan-400);letter-spacing:.2em}
.cs{width:100%;height:auto;display:block;overflow:visible}
.cs-body{fill:rgba(168,195,239,.16);stroke:#DCE8F8;stroke-width:1.4;stroke-linejoin:round}
.cs-flap{fill:var(--blue-600);stroke:#fff;stroke-width:1.1;stroke-linejoin:round}
.cs-hinge{fill:var(--cyan-400);stroke:#04122E;stroke-width:1}
.fl{fill:none;stroke:rgba(8,183,194,.75);stroke-width:1.1;stroke-dasharray:5 9;stroke-linecap:round;animation:flow var(--dur,1.3s) linear infinite}
.fl-u{--dur:var(--du,1.3s)}
.fl-l{--dur:var(--dl,1.3s)}
@keyframes flow{to{stroke-dashoffset:-28}}
.cs-vec{stroke-width:1.8;stroke-linecap:round;color:#fff;stroke:currentColor}
.cs-lift{color:#8FE8EE}
.cs-drag{color:#FFB25A}
.cs-lab{font:500 8.5px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;fill:rgba(236,243,252,.95)}
.cs-lab-flap{fill:#fff;font-size:9.5px}
.cs-wing{stroke:#DCE8F8;stroke-width:2.2;stroke-linecap:round}
.cs-fus{fill:#DCE8F8}
.cs-flapline{stroke:var(--blue-600);stroke-width:4;stroke-linecap:round}
.cs-roll{fill:none;stroke:#FFB25A;stroke-width:1.6;color:#FFB25A}
.cs-section,.cs-rear{transition:opacity .5s var(--e-out)}
.hud-read{display:flex;flex-direction:column;gap:5px;font-size:9.5px;color:rgba(226,236,250,.86);letter-spacing:.12em;text-transform:uppercase;line-height:1.3}
#rNote{color:var(--cyan-400)}
body.paused .fl{animation-play-state:paused}

/* caption bands */
.bands{position:absolute;inset:0}
.band{position:absolute;left:var(--pad);width:min(680px,calc(100% - var(--pad)*2));
  opacity:0;color:#fff;text-shadow:var(--tshadow);pointer-events:none;
  isolation:isolate}   /* keeps the ::before scrim inside this element even at opacity:1 */
.band[data-pos="top"]{top:15vh}
.band[data-pos="bottom"]{bottom:13vh}
@media (max-height:820px){.band[data-pos="top"]{top:12vh}.band[data-pos="bottom"]{bottom:9vh}}
.band .btn{text-shadow:none}
/* A soft-edged wedge anchored to the left edge, masked to an ellipse so it has
   no straight sides. It covers the whole text column at full width and dies out
   well before the centre lane, so the aircraft stays untouched. */
.band::before{content:"";position:absolute;inset:-70% -55% -75% -80%;pointer-events:none;z-index:-1;
  opacity:calc(.28 + .72*var(--k,1));
  background:radial-gradient(ellipse 62% 56% at 36% 50%,
    rgba(2,7,18,var(--sa,.9)) 0%,
    rgba(2,7,18,var(--sa,.9)) 48%,
    rgba(2,7,18,calc(var(--sa,.9) * .86)) 64%,
    rgba(2,7,18,calc(var(--sa,.9) * .42)) 80%,
    rgba(2,7,18,0) 96%)}
.band[data-pos="bottom"]::before{--sa:.97}
.band[data-pos="top"]::before{--sa:.92}
/* the second half of the footage is bright sky, white cloud and a golden runway */
.band-snap::before{--sa:.985}
.band-level::before{--sa:.985}
.band-drift::before{--sa:.985}
.band-level{width:min(680px,calc(100% - var(--pad)*2))}
.band-steps{display:flex;flex-wrap:wrap;gap:8px 10px;margin:18px 0 0;padding:0;list-style:none;
  font:500 12px/1.2 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#e6f1ff;
  --ks:clamp(0,(var(--k,0) - .55)*3,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*8px))}
.band-steps span{padding:7px 10px;border:1px solid rgba(120,200,255,.42);border-radius:999px;background:rgba(3,12,30,.62);white-space:nowrap}
.band-steps span+span::before{content:none}
.band-drift{width:min(680px,calc(100% - var(--pad)*2))}
.band-land::before{--sa:.985}
.band-settle::before{--sa:.985}
.band-k{font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-400);margin-bottom:18px}
.band-h{font-size:clamp(34px,5.4vw,68px);line-height:1.07}
.band-h-xl{font-size:clamp(56px,9.5vw,132px);line-height:.98;letter-spacing:-.035em}
.band-land{width:min(1000px,calc(100% - var(--pad)*2))}
.band-sub{margin-top:22px;font-size:clamp(16px,1.45vw,18.5px);line-height:1.62;color:rgba(226,236,250,.9);max-width:54ch}
.band-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;pointer-events:auto}
.band-settle{width:min(560px,calc(100% - var(--pad)*2))}
.band-settle .band-h{font-size:clamp(32px,3.7vw,52px)}
.band-settle .band-sub{max-width:46ch;font-size:clamp(15px,1.25vw,17px)}

/* split-text primitives */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vis{display:block}
.w{display:inline-block;white-space:pre;will-change:transform,opacity}
.c{display:inline-block;will-change:transform,opacity}

/* (a) blur-to-sharp */
.band-blur .vis{position:relative}
.band-blur .soft{position:absolute;inset:0;filter:blur(12px);opacity:calc(1 - var(--k,0))}
.band-blur .sharp{opacity:var(--k,0)}
/* (d) word-punch */
.band-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(.62 + (.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.band-punch .w.em{--ov:.24;--sd:.16;--ss:2.6;color:var(--cyan-400)}
/* (b) grid snap-align */
.band-snap .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
/* (f) drift-down: words settle from above, echoing the descent */
.band-level .w,.band-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px))}
.band-land .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*34px)) scale(calc(.94 + .06*var(--kc)))}
/* (e) word rise into staged settle */
.band-settle .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*26px))}
.band-settle .band-sub{--ks:clamp(0,(var(--k,0) - .58)*3.4,1);opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*14px))}
.band-settle .band-cta{--kb:clamp(0,(var(--k,0) - .72)*4.2,1);opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*14px))}

@media (orientation:landscape) and (max-height:560px){.hud,.intro-cue{display:none}}

/* ============================================================
   DATABRICKS STRIP
   ============================================================ */
.strip{background:var(--navy-950);color:#fff;border-block:1px solid rgba(168,195,239,.14);overflow:hidden}
.strip-in{max-width:var(--maxw);margin:0 auto;padding:22px var(--pad);display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:28px;align-items:center}
.strip-lead{font:500 14px/1.5 Poppins,sans-serif;color:rgba(226,236,250,.86)}
.ticker{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;gap:34px;width:max-content;animation:tick 64s linear -20s infinite}
.ticker-track span{font:500 12.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-300);white-space:nowrap;position:relative;padding-left:16px}
.ticker-track span::before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--cyan-400)}
@keyframes tick{to{transform:translate3d(-50%,0,0)}}
.strip:not(.live) .ticker-track{animation-play-state:paused}
@media (max-width:860px){.strip-in{grid-template-columns:1fr;gap:14px}}

/* ============================================================
   FLIGHT PLAN  (signature: the trajectory)
   ============================================================ */
.fp{position:relative;padding:clamp(90px,11vw,150px) var(--pad) clamp(70px,9vw,120px);max-width:var(--maxw);margin:0 auto}
@media (min-width:1181px){.fp{padding-right:calc(var(--pad) + 150px)}}
.trace{position:absolute;right:calc(var(--pad) - 10px);top:clamp(90px,11vw,150px);bottom:60px;width:120px;pointer-events:none}
.trace-svg{width:100%;height:100%}
#tracePath{stroke-dasharray:var(--len,2000);stroke-dashoffset:calc(var(--len,2000) * (1 - var(--draw,0)))}
.trace-craft{position:absolute;width:64px;height:48px;left:0;top:0;opacity:0;
  transition:opacity .6s var(--e-out);will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden}
.trace-craft{--c-swoosh:transparent}
.trace.on .trace-craft{opacity:1}
@media (max-width:1180px){.trace{display:none}}

.fp-head{max-width:66ch;margin-bottom:clamp(56px,7vw,92px)}

.phase{display:grid;grid-template-columns:190px 1fr;gap:clamp(24px,4vw,56px);
  padding:clamp(40px,5vw,64px) 0;border-top:1px solid rgba(20,29,44,.1)}
.phase-alt-layout{grid-template-columns:1fr 190px}
.phase-alt-layout .phase-mark{order:2;text-align:right;align-items:flex-end}
.phase-alt-layout .phase-body{order:1}
.phase-mark{display:flex;flex-direction:column;gap:8px;position:sticky;top:104px;align-self:start}
.phase-tag{font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-600)}
.phase-alt{font:400 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;color:var(--ink-600);letter-spacing:.04em}
.phase-verb{color:var(--blue-600)}
.phase-lede{margin-top:16px;font-size:clamp(16.5px,1.5vw,18.5px);color:var(--ink-600);max-width:58ch}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px;margin-top:36px}
.card{background:var(--panel);border:1px solid rgba(20,29,44,.09);border-radius:15px;padding:22px 22px 24px;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),border-color .5s var(--e-out)}
.card h4{font-size:16.5px;line-height:1.3;margin-bottom:9px}
.card p{font-size:14.5px;line-height:1.58;color:var(--ink-600)}
.card:hover{transform:translateY(-4px);border-color:rgba(8,183,194,.42);box-shadow:0 18px 44px -26px rgba(4,35,89,.4)}
@media (max-width:760px){.phase,.phase-alt-layout{grid-template-columns:1fr}
  .phase-alt-layout .phase-mark{order:0;text-align:left;align-items:flex-start}
  .phase-alt-layout .phase-body{order:1}.phase-mark{position:static}}

/* ============================================================
   PRE-FLIGHT (the interactive moment)
   ============================================================ */
.preflight{background:var(--deck);color:#fff;padding:clamp(80px,10vw,130px) var(--pad);position:relative;overflow:hidden;
  background-image:linear-gradient(rgba(4,18,46,.90),rgba(4,18,46,.97)),url(hero-ending.jpg);
  background-size:cover;background-position:center 30%}
.preflight::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%,rgba(8,183,194,.14),transparent 70%)}
.pf-in{max-width:760px;margin:0 auto;text-align:center;position:relative}
.pf-in .lede{margin-left:auto;margin-right:auto}
.pf-hold{margin:40px auto 0;position:relative;width:96px;height:96px;border-radius:50%;
  background:rgba(255,255,255,.05);border:1px solid rgba(168,195,239,.3);color:#fff;cursor:pointer;
  display:grid;place-items:center;transition:background-color .5s var(--e-out),border-color .5s var(--e-out),transform .5s var(--e-out)}
.pf-hold:hover{background:rgba(255,255,255,.1);border-color:rgba(8,183,194,.6)}
.pf-hold:active{transform:scale(.97)}
.pf-ring{position:absolute;inset:0}
.pf-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.pf-track{fill:none;stroke:rgba(168,195,239,.18);stroke-width:3}
.pf-fill{fill:none;stroke:var(--cyan-400);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:264;stroke-dashoffset:calc(264 * (1 - var(--pf,0)))}
.pf-label{font:500 12.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase}
.pf-hint{margin-top:16px;font-size:13.5px;color:rgba(226,236,250,.55)}
.pf-list{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:12px;text-align:left}
.pf-list li{display:flex;align-items:baseline;gap:14px;padding:14px 18px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(168,195,239,.14);
  opacity:.34;transform:translateY(6px);
  transition:opacity .6s var(--e-out),transform .6s var(--e-out),border-color .6s var(--e-out),background-color .6s var(--e-out)}
.pf-list li.lit{opacity:1;transform:none;border-color:rgba(8,183,194,.38);background:rgba(8,183,194,.07)}
.pf-dot{width:7px;height:7px;border-radius:50%;background:rgba(168,195,239,.35);flex:none;transition:background-color .6s var(--e-out),box-shadow .6s var(--e-out)}
.pf-list li.lit .pf-dot{background:var(--cyan-400);box-shadow:0 0 0 4px rgba(8,183,194,.16)}
.pf-txt{font-size:15px;line-height:1.5;color:rgba(226,236,250,.9)}

/* ============================================================
   EXPERTISE
   ============================================================ */
.exp{padding:clamp(80px,10vw,130px) var(--pad);max-width:var(--maxw);margin:0 auto}
.exp-head{max-width:60ch;margin-bottom:48px}
.stack{display:grid;gap:12px}
.stack-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (min-width:1100px){.stack-row{grid-template-columns:repeat(6,1fr)}}
@media (max-width:600px){.stack-row{grid-template-columns:repeat(2,1fr)}}
.sbox{background:linear-gradient(180deg,rgba(4,104,238,.075),rgba(4,104,238,.028));border:1px solid rgba(8,183,194,.42);border-radius:13px;padding:18px;
  transition:transform .5s var(--e-out),border-color .5s var(--e-out)}
.sbox h4{font-size:15.5px;line-height:1.28;margin-bottom:9px;min-height:2.56em}
.sbox p{font:400 12.5px/1.5 "IBM Plex Mono",ui-monospace,monospace;color:var(--ink-600)}
.sbox:hover{transform:translateY(-3px);border-color:var(--cyan-400);box-shadow:0 18px 38px -26px rgba(4,35,89,.42)}
.sbar{border-radius:13px;padding:16px 20px;font:500 14px/1.5 Poppins,sans-serif;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.sbar span{font-weight:400;font-size:13.5px;opacity:.82}
.sbar-solid{background:var(--navy-900);color:#fff}
.sbar-line{background:linear-gradient(180deg,rgba(4,104,238,.075),rgba(4,104,238,.028));border:1px solid rgba(8,183,194,.42);color:var(--blue-600)}
.sbar-line span{color:var(--ink-600);opacity:1}
.sbar-faint{background:linear-gradient(180deg,rgba(4,104,238,.075),rgba(4,104,238,.028));border:1px solid rgba(8,183,194,.42);color:var(--blue-600)}
.sbar-faint span{color:var(--ink-600);opacity:1}
.exp-head .lede{margin-top:14px}


/* ============================================================
   CERTIFICATIONS  (the badge wall)
   ============================================================ */
.certs{padding:clamp(70px,9vw,120px) var(--pad);background:var(--navy-950);color:#fff;position:relative;overflow:hidden}
.certs::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 20% 0%,rgba(4,104,238,.22),transparent 65%),radial-gradient(50% 50% at 90% 100%,rgba(8,183,194,.14),transparent 65%)}
.certs-head{max-width:var(--maxw);margin:0 auto 44px;position:relative}
.certs-head .h2{color:#fff}
.certs-head .lede{color:rgba(226,236,250,.8)}
.badge-wall{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:16px;position:relative;align-items:stretch}
.badge{margin:0;background:rgba(255,255,255,.04);border:1px solid rgba(168,195,239,.16);border-radius:18px;padding:22px 16px 18px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  transition:transform .55s var(--e-out),border-color .55s var(--e-out),background-color .55s var(--e-out),box-shadow .55s var(--e-out)}
.badge img{height:150px;width:auto;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.45));transition:transform .55s var(--e-out)}
.badge:hover{transform:translateY(-6px);border-color:rgba(8,183,194,.55);background:rgba(255,255,255,.07);box-shadow:0 30px 60px -30px rgba(8,183,194,.35)}
.badge:hover img{transform:scale(1.055)}
.badge figcaption{display:flex;flex-direction:column;gap:5px}
.badge figcaption b{font:600 13.5px/1.3 Poppins,sans-serif;color:#fff}
.badge figcaption span{font:400 11px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-300)}
.badge-champ{border-color:rgba(255,120,80,.35);background:linear-gradient(160deg,rgba(164,46,36,.18),rgba(255,255,255,.04))}
.badge-champ img{height:170px;border-radius:12px}
.badge-champ figcaption b{font-size:16px}
@media (max-width:1100px){.badge-wall{grid-template-columns:repeat(3,1fr)}.badge-champ img{height:150px}}
@media (max-width:640px){.badge-wall{grid-template-columns:repeat(2,1fr)}.badge img,.badge-champ img{height:118px}.badge{padding:16px 10px 14px}.badge figcaption b{font-size:12.5px}}

/* ============================================================
   ABOUT
   ============================================================ */
.about{padding:clamp(70px,9vw,120px) var(--pad);background:var(--panel);border-bottom:1px solid rgba(20,29,44,.08)}
.about-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(240px,360px) 1fr;gap:clamp(30px,4vw,60px);align-items:start}
/* a portrait card, so the column beside the copy is not mostly air */
.about-fig{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;
  background:linear-gradient(150deg,#EAF0FA,#F7F9FD 55%,#E4F6F8);border:1px solid rgba(20,29,44,.08);display:grid;place-items:center}
.about-mark{width:60%;position:relative;z-index:1;filter:drop-shadow(0 18px 30px rgba(4,35,89,.18))}
.about-fig-grid{position:absolute;inset:0;opacity:.7;
  background-image:linear-gradient(rgba(4,35,89,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(4,35,89,.07) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
.about-txt p{margin-top:18px;color:var(--ink-600);font-size:16.5px;line-height:1.72;max-width:72ch}
.about-txt .h2{margin-bottom:6px}
/* stacked, the square card left a wedge of dead space beside it; make it a band
   that runs the full column so its edges line up with the copy underneath */
@media (max-width:820px){
  .about-in{grid-template-columns:1fr;gap:28px}
  .about-fig{max-width:none;aspect-ratio:16/7;border-radius:18px}
  .about-mark{width:min(206px,40%)}
  .about-fig-grid{background-size:28px 28px}
}

/* ============================================================
   ENGAGEMENTS
   ============================================================ */
.eng{padding:clamp(80px,10vw,130px) var(--pad);max-width:var(--maxw);margin:0 auto}
.eng-head{margin-bottom:44px;max-width:52ch}
.eng-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px}
.ecard{background:var(--panel);border:1px solid rgba(20,29,44,.09);border-radius:16px;padding:26px;
  position:relative;overflow:hidden;transition:transform .5s var(--e-out),border-color .5s var(--e-out),box-shadow .5s var(--e-out)}
.ecard::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--cyan-400),var(--blue-600));transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--e-out)}
.ecard:hover{transform:translateY(-4px);border-color:rgba(4,104,238,.3);box-shadow:0 20px 48px -30px rgba(4,35,89,.45)}
.ecard:hover::after{transform:scaleX(1)}
.ecard-tag{font:500 11.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-600);margin-bottom:12px}
.ecard h3{font-size:19px;margin-bottom:12px;line-height:1.25}
.ecard p{font-size:14.5px;line-height:1.6;color:var(--ink-600)}

/* ============================================================
   CONTACT + FOOTER
   ============================================================ */
.contact{background:var(--deck);color:#fff;padding:clamp(80px,10vw,130px) var(--pad);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(56% 60% at 88% 30%,rgba(4,104,238,.18),transparent 68%)}
.contact-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr minmax(320px,460px);gap:clamp(36px,6vw,80px);align-items:start;position:relative}
.contact-btns{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}
.form{background:rgba(255,255,255,.97);border-radius:20px;padding:clamp(24px,3vw,34px);color:var(--ink-900);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.7)}
.form label{display:block;font:500 13px/1 Poppins,sans-serif;margin:0 0 8px}
.form label:not(:first-child){margin-top:18px}
.form input,.form textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(20,29,44,.18);
  font:400 15px/1.5 Poppins,sans-serif;color:var(--ink-900);background:#fff;
  transition:border-color .4s var(--e-out),box-shadow .4s var(--e-out)}
.form textarea{resize:vertical;min-height:96px}
.form input::placeholder,.form textarea::placeholder{color:#9AA3B2}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(4,104,238,.14)}
.form .btn{margin-top:24px}
.form-note{margin-top:14px;font-size:13.5px;color:var(--cyan-600);min-height:1.2em}
@media (max-width:880px){.contact-in{grid-template-columns:1fr}}

.foot{background:var(--canvas);color:var(--ink-900);padding:30px var(--pad);border-top:1px solid rgba(20,29,44,.09);position:relative;z-index:1}
.foot-in{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between}
.foot-meta{font-size:13px;color:var(--ink-600)}

/* ============================================================
   ENTRANCES
   ============================================================ */
.reveal .part{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
.reveal.in .part{opacity:1;transform:none}
.reveal.in .part:nth-child(1){transition-delay:.02s}
.reveal.in .part:nth-child(2){transition-delay:.10s}
.reveal.in .part:nth-child(3){transition-delay:.18s}
.reveal.in .part:nth-child(4){transition-delay:.26s}
.reveal.in .part:nth-child(5){transition-delay:.34s}
.reveal.in .part:nth-child(6){transition-delay:.42s}
/* retire the stagger once the entrance has finished, so hovers never lag.
   specificity must beat the :nth-child rules above */
.reveal.in.done .part:nth-child(n){transition-delay:0s!important}

.reveal:not(.in) > .kicker,.reveal:not(.in) > .h2,.reveal:not(.in) > .h3,
.reveal:not(.in) > .lede,.reveal:not(.in) > p,.reveal:not(.in) > .link-arrow,
.reveal:not(.in) > .pf-hold,.reveal:not(.in) > .pf-hint,.reveal:not(.in) > .contact-btns{
  opacity:0;transform:translateY(16px)}
.reveal > .kicker,.reveal > .h2,.reveal > .h3,.reveal > .lede,.reveal > p,
.reveal > .link-arrow,.reveal > .pf-hold,.reveal > .pf-hint,.reveal > .contact-btns{
  transition:opacity .85s var(--e-out),transform .85s var(--e-out)}
.reveal.in > .h2{transition-delay:.06s}
.reveal.in > .lede{transition-delay:.14s}

/* one living element per section, mid-cycle at first paint */
.cert-champ{animation:champGlow 7s var(--e-soft) -2.4s infinite}
@keyframes champGlow{0%,100%{box-shadow:0 0 0 0 rgba(8,183,194,0)}50%{box-shadow:0 0 0 5px rgba(8,183,194,.10)}}
.sbar-solid{position:relative;overflow:hidden}
.sbar-solid::after{content:"";position:absolute;top:0;bottom:0;width:34%;
  background:linear-gradient(90deg,transparent,rgba(8,183,194,.16),transparent);
  animation:sweep 9s var(--e-soft) -3s infinite}
@keyframes sweep{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}


/* ---------- social: one icon, two homes ---------- */
.social{display:flex;align-items:center;gap:13px;margin-top:26px}
.social-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;border-radius:50%;text-decoration:none;
  color:var(--blue-600);background:var(--panel);border:1px solid rgba(20,29,44,.14);
  transition:transform .45s var(--e-out),border-color .45s var(--e-out),color .45s var(--e-out),box-shadow .45s var(--e-out)}
.social-btn svg{width:22px;height:22px;display:block}
.social-btn .n-dot{fill:currentColor}
.social-btn .n-link{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.social-btn:hover{transform:translateY(-2px);border-color:rgba(8,183,194,.55);color:var(--cyan-600);
  box-shadow:0 16px 34px -22px rgba(4,35,89,.5)}
.social-btn:focus-visible{outline:2px solid var(--cyan-600);outline-offset:3px}
.social-lab{font:500 14.5px/1.3 Poppins,sans-serif;color:var(--ink-600)}
.social-light .social-btn{background:rgba(168,195,239,.10);border-color:rgba(168,195,239,.34);color:var(--cyan-400)}
.social-light .social-btn:hover{border-color:var(--cyan-400);color:#fff;background:rgba(8,183,194,.18)}
.social-light .social-lab{color:rgba(226,236,250,.86)}

/* ============================================================
   SMALL SCREENS
   The scroll flight is the page, so a phone flies it too. Two moves
   carry it. On a portrait screen the frame becomes a strip with the
   copy beneath it, because a 9:19 crop of a 16:9 shot throws away three
   quarters of the picture and magnifies what is left. The HUD then
   turns from a tall panel on the right into a wide one along the
   bottom. Nothing is dropped: same flight, same instruments.
   ============================================================ */

/* ---------- nav: a real menu below the breakpoint ---------- */
.nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:42px;height:42px;margin-right:-6px;padding:0;border:0;border-radius:11px;background:transparent;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav-toggle:focus-visible{outline:2px solid var(--cyan-600);outline-offset:2px}
.nav-bar{display:block;width:20px;height:1.7px;border-radius:2px;background:var(--navy-900);
  transition:transform .4s var(--e-out)}
.nav.menu-open .nav-bar:nth-of-type(1){transform:translateY(3.35px) rotate(45deg)}
.nav.menu-open .nav-bar:nth-of-type(2){transform:translateY(-3.35px) rotate(-45deg)}

@media (max-width:860px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    padding:2px var(--pad) 12px;
    background:rgba(244,247,252,.97);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
    border-bottom:1px solid rgba(20,29,44,.1);box-shadow:0 26px 46px -32px rgba(4,35,89,.55);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .28s var(--e-out),transform .36s var(--e-out),visibility .28s}
  .nav.menu-open .nav-links{opacity:1;visibility:visible;transform:none}
  .nav-links a{padding:14px 2px;font-size:16px;color:var(--navy-900);border-bottom:1px solid rgba(20,29,44,.08)}
  .nav-links a:last-child{border-bottom:0}
  .nav-links a::after{display:none}
  .trace{display:none}
}
@media (min-width:861px) and (max-width:1180px){
  .fp{padding-right:calc(var(--pad) + 118px)}
  .trace{display:block;width:96px;right:calc(var(--pad) - 18px)}
  .trace-craft{width:52px;height:39px}
}
@media (max-width:560px){
  .nav-in{gap:12px}
  .brand-lockup{height:20.9px}
  .nav .btn-sm{padding:10px 13px;font-size:13px}
}

/* ---------- landscape, but not much room to spare ---------- */
@media (orientation:landscape) and (min-width:861px) and (max-width:1180px){
  .hud{width:250px;padding:12px 12px 11px;gap:7px}
  .hud-alt{font-size:19px}
  .band,.band-level,.band-drift{width:min(500px,calc(100% - var(--pad)*2 - 274px))}
  .band-land{width:min(560px,calc(100% - var(--pad)*2 - 274px))}
  .band-settle{width:min(440px,calc(100% - var(--pad)*2 - 274px))}
  .band-h{font-size:clamp(28px,3.9vw,42px)}
  .band-h-xl{font-size:clamp(42px,6.6vw,74px)}
  .band-settle .band-h{font-size:clamp(26px,3.2vw,36px)}
  .band-sub{font-size:15.5px;margin-top:16px}
  .band-steps{margin-top:14px;font-size:11px}
}
@media (orientation:landscape) and (max-height:700px){
  .band-h{font-size:clamp(24px,4.9vh,38px)}
  .band-h-xl{font-size:clamp(34px,9.6vh,64px)}
  .band-sub{font-size:14.5px;margin-top:12px;max-width:46ch}
  .band-steps{margin-top:11px;font-size:10.5px}
  .band-steps span{padding:5px 8px}
  .band-cta{margin-top:18px}
  .band[data-pos="top"]{top:11vh}
  .band[data-pos="bottom"]{bottom:8vh}
}

/* ---------- portrait: the strip cut ---------- */
@media (orientation:portrait){
  .hero{height:900vh}
  .stage{--strip-t:8vh;--strip-h:34vh;--hud-h:31vh;
    background:linear-gradient(180deg,#061A3C 0%,#04122E 48%,#030D22 100%)}

  #hero,.poster,.scrim{top:var(--strip-t);height:var(--strip-h);bottom:auto;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
  .scrim{background:
    linear-gradient(180deg,rgba(3,10,26,.46) 0%,rgba(3,10,26,0) 32%),
    linear-gradient(0deg,rgba(3,10,26,.46) 0%,rgba(3,10,26,0) 32%),
    radial-gradient(ellipse 122% 100% at 50% 50%,rgba(3,10,26,0) 48%,rgba(3,10,26,.4) 100%)}
  .ring{top:calc(var(--strip-t) - 44px);bottom:auto;right:var(--pad)}

  /* the copy lives under the strip, on the deck, always legible */
  .bands{top:calc(var(--strip-t) + var(--strip-h) + 2vh);bottom:var(--hud-h);overflow:hidden}
  /* centred in the lane between the frame and the instruments: the captions are
     one to four lines depending on the beat, and top-aligning them left a hole
     above the panel on the long screens */
  .band,.band[data-pos="top"],.band[data-pos="bottom"]{
    top:50%;bottom:auto;transform:translateY(-50%);left:var(--pad);width:calc(100% - var(--pad)*2)}
  .band::before{display:none}
  .band-k{margin-bottom:12px;font-size:11px;letter-spacing:.16em}
  .band-h{font-size:clamp(26px,6.2vw,40px);line-height:1.14}
  .band-h-xl{font-size:clamp(38px,10.5vw,68px);line-height:1.03}
  .band-settle .band-h{font-size:clamp(24px,5.4vw,34px)}
  .band-sub{margin-top:13px;font-size:14.8px;line-height:1.5;max-width:42ch}
  .band-steps{margin-top:13px;font-size:10.5px;gap:6px 7px}
  .band-steps span{padding:5px 8px}
  .band-cta{margin-top:18px;gap:10px}

  /* once it is down, the instruments stand down and the closing card gets the deck */
  .stage.landed .hud{opacity:0!important;pointer-events:none;transition:opacity .55s var(--e-out)}
  .stage.landed .bands{bottom:3vh}

  /* instruments run along the bottom, wide instead of tall */
  .hud{left:50%;right:auto;top:auto;bottom:2vh;
    transform:translateX(-50%);width:min(520px,calc(100% - var(--pad)*2));
    padding:11px 13px 10px;gap:7px}
  .hud-alt{font-size:19px}
  .hud-read{font-size:9px}
}
@media (orientation:portrait) and (min-width:601px){
  .stage{--strip-t:9vh;--strip-h:44vh;--hud-h:31vh}
  .hud-alt{font-size:22px}
  .hud-read{font-size:10px}
}

/* ---------- the rest of the page on a narrow screen ---------- */
/* a phone held sideways gets the stacked page, so keep the canopy in proportion */
@media (orientation:landscape) and (max-height:430px){
  .intro-mark{width:min(190px,24vw)}
  .intro-word{font-size:clamp(30px,5vw,42px)}
  .intro-in{margin-top:0}
  .intro{min-height:auto;padding:66px 0 30px}
}
@media (max-width:430px){
  .band-k{font-size:10.5px;letter-spacing:.12em}
  .stack-row{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .badge-wall{gap:10px}
}

/* ============================================================
   STATIC HERO GATES  (must match GATES[] in site.js exactly)
   ============================================================ */
@media (prefers-reduced-motion:reduce),
       (orientation:landscape) and (max-height:430px){
  .hero{height:auto;background:var(--canvas)}
  .stage{position:relative;height:auto;background:var(--canvas)}
  #hero,.ring,.sky,.poster,.scrim{display:none}
  .hud{display:flex;position:relative;right:auto;top:auto;transform:none;width:min(360px,calc(100% - var(--pad)*2));margin:-24px auto 40px;background:var(--navy-950)}
  .intro{position:relative;inset:auto;min-height:62vh;padding-top:72px}
  .intro-cue{display:none}
  .bands{position:relative;inset:auto;width:100%;padding:0 var(--pad) 72px}
  .band,.band[data-pos="top"],.band[data-pos="bottom"]{position:relative;left:auto;top:auto;bottom:auto;transform:none;opacity:1;width:100%;color:var(--navy-900);text-shadow:none}
  .band::before{display:none}
  .band-blur,.band-punch,.band-snap,.band-level,.band-drift,.band-land{display:none}
  .band-settle .w,.band-settle .band-sub,.band-settle .band-cta{opacity:1;transform:none}
  .band-settle .band-sub{color:var(--ink-600)}
  .band-settle .btn-ghost{background:transparent;color:var(--navy-900);border-color:rgba(20,29,44,.28);backdrop-filter:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .reveal .part,.reveal > *{opacity:1!important;transform:none!important}
  .trace-craft{opacity:1}
  #tracePath{stroke-dashoffset:0}
  .i-wing,.i-flap,.i-arrow,.intro-word,.intro-tag,.intro-cue{opacity:1!important;transform:none!important}
  .ticker-track{animation:none!important;transform:none!important}
  .band-level .w,.band-drift .w,.band-land .w{opacity:1;transform:none}
  .band-steps{opacity:1;transform:none}
  .i-swoosh-clip{transform:none!important}
  .pf-list li{opacity:1;transform:none;border-color:rgba(8,183,194,.38);background:rgba(8,183,194,.07)}
  .pf-list li .pf-dot{background:var(--cyan-400)}
  .pf-fill{stroke-dashoffset:0}
  .env-glow{transform:none}
  /* reduced motion always gets the stacked static layout, so the HUD is in flow */
  .hud{transform:none}
  .fl{animation:none!important}
}