/* ======================================================================
   REBEL LOGISTICS — cinematic scroll site
   Palette: near-black + warm white + signal orange (restrained)
   ====================================================================== */
:root{
  /* Official Rebel Logistics brand tokens */
  --ink-950:#04121C; --ink-900:#071C2C; --ink-800:#0B2C44; --ink-700:#0A3D62;
  --route:#18759A;
  --steel:#6E8795; --mist:#E7EEF2; --warm:#F7F6F1; --white:#F7F6F1;
  --signal:#FF5A1F; --signal-600:#C43B12;
  --line:rgba(231,238,242,0.14); --line-dark:rgba(7,28,44,0.12);
  --ease:cubic-bezier(0.22,1,0.36,1);
  --pad:clamp(20px,5vw,96px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--ink-900);color:var(--warm);font-family:"IBM Plex Sans",system-ui,sans-serif;line-height:1.55;overflow-x:hidden}
h1,h2,h3,h4,.display-xl,.display-lg,.display-md,.display-sm,.metric-num,.cap h3,.pre-word{font-family:"Sora",system-ui,sans-serif}
body.loading{overflow:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase}
.container{max-width:1600px;margin:0 auto;padding-inline:var(--pad)}
.steel{color:var(--steel)}
.skip-link{position:fixed;left:-999px;top:8px;z-index:2000;background:var(--ink);color:var(--warm);padding:10px 16px;border-radius:6px}
.skip-link:focus{left:8px}

/* film grain + vignette */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:900;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------------- typography scale ---------------- */
.display-xl{font-size:clamp(3.4rem,10vw,10rem);line-height:.9;letter-spacing:-.03em;font-weight:700}
.display-lg{font-size:clamp(2.4rem,6.5vw,7rem);line-height:.95;letter-spacing:-.03em;font-weight:700}
.display-md{font-size:clamp(1.8rem,4vw,4.5rem);line-height:.98;letter-spacing:-.02em;font-weight:700}
.display-sm{font-size:clamp(1.6rem,3vw,2.6rem);line-height:1;letter-spacing:-.02em;font-weight:700}
.eyebrow{font-size:.72rem;color:var(--steel);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.eyebrow .dot{width:6px;height:6px;background:var(--signal);display:inline-block}
.lede{font-size:clamp(1rem,1.2vw,1.28rem);color:var(--mist);max-width:44ch;line-height:1.6}

/* buttons */
.btn-line{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);color:var(--warm);
  padding:.85rem 1.4rem;font-size:.82rem;font-weight:600;transition:border-color .25s,color .25s;background:none;cursor:pointer}
.btn-line:hover{border-color:var(--signal);color:var(--signal)}
.btn-cta{position:relative;display:inline-flex;align-items:center;gap:.6rem;background:none;color:var(--warm);
  border:1px solid var(--signal);padding:1rem 1.8rem;font-family:inherit;font-weight:700;letter-spacing:.02em;
  font-size:.9rem;cursor:pointer;overflow:hidden;transition:color .3s}
.btn-cta span{position:relative;z-index:2}
.btn-cta::before{content:"";position:absolute;inset:0;background:var(--signal);transform:translateX(-101%);transition:transform .4s var(--ease);z-index:1}
.btn-cta:hover{color:var(--ink-900)}
.btn-cta:hover::before{transform:translateX(0)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* ---------------- glassmorphism ---------------- */
.glass{background:rgba(18,18,18,0.42);backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);
  border:1px solid rgba(242,240,234,0.14);border-radius:10px}

/* ---------------- fixed video stage (clip-to-clip blend) ---------------- */
#video-stage{position:fixed;inset:0;z-index:0;background:var(--ink-950)}
.vlayer{position:absolute;inset:0;opacity:0;will-change:opacity}
.vlayer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.vgrade{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,18,28,.92),rgba(4,18,28,.32) 46%,rgba(4,18,28,.5))}
.vgrade::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 240px 50px rgba(0,0,0,.62)}
.vlayer[data-clip="1"] .vgrade,.vlayer[data-clip="5"] .vgrade{background:linear-gradient(90deg,rgba(4,18,28,.9),rgba(4,18,28,.3) 62%,rgba(4,18,28,.5))}
.vgrade.sea{background:linear-gradient(90deg,rgba(4,18,28,.94),rgba(4,18,28,.4) 72%)}
.vlayer.missing{opacity:1;background:radial-gradient(120% 90% at 80% 20%,rgba(255,107,26,.14),transparent 55%),linear-gradient(160deg,var(--ink-800),var(--ink-950))}

/* ---------------- text tracks (scroll over fixed video) ---------------- */
main{position:relative;z-index:1}
.track{position:relative;height:calc(var(--h,300) * 1vh)}
.hold{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.hold-sea{flex-direction:column;justify-content:center;gap:clamp(2rem,6vh,5rem);align-items:stretch}
#footer{position:relative;z-index:2}

/* ---------------- custom cursor ---------------- */
#cursor{position:fixed;top:0;left:0;z-index:1500;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.cursor-dot{position:absolute;width:6px;height:6px;background:var(--signal);border-radius:50%;transform:translate(-50%,-50%)}
.cursor-ring{position:absolute;width:34px;height:34px;border:1px solid var(--warm);border-radius:50%;transform:translate(-50%,-50%);transition:width .25s,height .25s}
.cursor-label{position:absolute;transform:translate(-50%,-50%);font-size:.6rem;color:var(--warm);opacity:0;transition:opacity .2s}
body.cursor-active #cursor{opacity:1}
#cursor.hover .cursor-ring{width:64px;height:64px}
#cursor.hover .cursor-label{opacity:1}

/* ---------------- preloader (control-system boot) ---------------- */
#preloader{position:fixed;inset:0;z-index:1800;background:radial-gradient(120% 100% at 50% 30%,var(--ink-900),var(--ink-950) 78%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pre-grid-lines{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 88px,rgba(231,238,242,.035) 88px 89px),repeating-linear-gradient(0deg,transparent 0 88px,rgba(231,238,242,.035) 88px 89px);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 78%);mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 78%)}
.pre-inner{position:relative;text-align:center;width:min(90vw,560px);padding:0 1rem}
.pre-logo{display:flex;flex-direction:column;align-items:center;gap:1.15rem}
.pre-symbol{width:clamp(78px,15vw,120px);height:auto;overflow:visible}
.pre-symbol .pre-wave{fill:var(--warm);opacity:0;transform:translateY(26px);transform-origin:center}
.pre-symbol .pre-dot{fill:var(--signal);opacity:0}
.pre-word{font-size:clamp(1.05rem,2.6vw,1.5rem);font-weight:600;letter-spacing:.42em;color:var(--warm);
  display:inline-flex;align-items:center;gap:.6em;text-indent:.42em;opacity:0}
.pre-word span{color:var(--steel);font-size:.62em;letter-spacing:.34em}
.pre-sub{font-size:.62rem;color:var(--steel);margin-top:1.7rem;opacity:0;letter-spacing:.34em}
.pre-bar{height:2px;width:100%;background:rgba(231,238,242,.1);margin:1.5rem 0 .9rem;position:relative;overflow:hidden;border-radius:2px}
.pre-bar-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,var(--signal-600),var(--signal));transform:scaleX(0);transform-origin:left}
.pre-readout{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.62rem;color:var(--steel)}
.pre-readout .pre-count{color:var(--signal);font-variant-numeric:tabular-nums}
.pre-readout .pre-stat{transition:opacity .3s}
.pre-meta{display:flex;justify-content:space-between;gap:1rem;font-size:.54rem;color:var(--steel);opacity:.62;margin-top:2.6rem;flex-wrap:wrap}
.pre-meta .pre-node{color:var(--route)}

/* ---------------- nav ---------------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;
  gap:2rem;padding:1.1rem var(--pad);transition:transform .4s var(--ease),background .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent}
#nav.scrolled{background:rgba(9,9,9,.72);backdrop-filter:blur(12px);border-color:var(--line);padding-block:.8rem}
#nav.hide{transform:translateY(-110%)}
.brand{display:flex;align-items:center;gap:.7rem}
.brand-mark{width:26px;height:26px;border-radius:50%;background:
  radial-gradient(circle at 50% 130%,var(--signal) 0 32%,#c94f12 32% 55%,var(--ink-900) 55%);border:1.5px solid rgba(242,240,234,.3)}
.brand-word{font-weight:700;font-size:1rem;letter-spacing:.02em;line-height:1}
.brand-word em{font-style:normal;color:var(--steel);font-weight:500;letter-spacing:.22em;font-size:.6rem;display:block;margin-top:2px}
.brand-word.big{font-size:clamp(2rem,6vw,4rem);letter-spacing:-.02em}
.brand-word.big em{font-size:.8rem;letter-spacing:.3em;margin-top:.4rem}
.nav-links{display:flex;gap:1.8rem;margin-left:auto}
.nav-links a{font-size:.82rem;font-weight:500;position:relative;padding:.3rem 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{background:var(--signal);color:var(--ink-900);border:none;padding:.7rem 1.2rem;font-weight:700;font-size:.82rem;cursor:pointer;font-family:inherit;transition:background .25s}
.nav-cta:hover{background:var(--signal-600)}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.nav-burger span{width:26px;height:2px;background:var(--warm);transition:.3s}

/* mobile menu */
#mobile-menu{position:fixed;inset:0;z-index:1200;background:var(--ink-950);display:flex;flex-direction:column;justify-content:center;gap:1.4rem;padding:var(--pad);transform:translateY(-100%);transition:transform .5s var(--ease)}
#mobile-menu.open{transform:translateY(0)}
#mobile-menu nav{display:flex;flex-direction:column;gap:1rem}
#mobile-menu nav a{font-size:clamp(2rem,9vw,3.4rem);font-weight:700;letter-spacing:-.02em;display:flex;align-items:baseline;gap:1rem}
#mobile-menu nav a em{font-size:.9rem;color:var(--signal)}
.mm-actions{margin-top:2rem;display:flex;flex-direction:column;gap:1rem;border-top:1px solid var(--line);padding-top:2rem}
.mm-actions a{color:var(--steel);font-size:.7rem}

/* fixed chapter index */
#chapter-index{position:fixed;left:var(--pad);bottom:1.4rem;z-index:800;font-size:.7rem;color:var(--steel);opacity:0;transition:opacity .4s}
#chapter-index .ci-cur{color:var(--signal)}
body.scrolled-past #chapter-index{opacity:1}

/* ======================= SCRUB CHAPTERS ======================= */
.chapter{position:relative}
.scrub{height:calc(var(--scrub,340) * 1vh)}
.scrub-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.media{position:absolute;inset:0;z-index:1}
.media video,.media-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scrub-video{transform:scale(1.06)}
.media-grade{position:absolute;inset:0;z-index:2;background:
  linear-gradient(to top,rgba(4,18,28,.92),rgba(4,18,28,.35) 45%,rgba(4,18,28,.55));mix-blend-mode:normal}
.media-grade::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 220px 40px rgba(0,0,0,.65)}
/* missing-media cinematic fallback */
.media.missing{background:
  radial-gradient(120% 90% at 80% 20%,rgba(255,107,26,.14),transparent 55%),
  linear-gradient(160deg,var(--ink-800),var(--ink-950));}
.media.missing::before{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 78px,var(--line) 78px 79px),repeating-linear-gradient(0deg,transparent 0 78px,var(--line) 78px 79px)}
.media.missing::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-40%;
  background:linear-gradient(90deg,transparent,rgba(255,107,26,.18),transparent);animation:beam 6s linear infinite}
@keyframes beam{to{left:120%}}

.chapter-overlay{position:relative;z-index:5;width:100%;padding-inline:var(--pad);max-width:1600px;margin:0 auto}
.chapter-overlay.left{margin-right:auto}
.chapter-overlay.center{text-align:left}
.hero-overlay{display:flex;flex-direction:column;gap:1.4rem;height:100%;justify-content:flex-end;padding-bottom:clamp(3rem,8vh,7rem);padding-top:120px}
.hero-overlay .lede{margin-top:.4rem}
.hero-sub{color:var(--steel);margin-top:1rem;max-width:16ch}
.scroll-hint{font-size:.66rem;color:var(--steel);display:flex;align-items:center;gap:1rem;margin-top:1.5rem}
.hint-line{height:1px;width:80px;background:var(--signal);display:inline-block}
.chapter-overlay .eyebrow{margin-bottom:1.4rem}
.chapter-overlay h2{margin-bottom:1.2rem;max-width:16ch}

/* staged words */
.stage-words{position:relative;min-height:clamp(2.2rem,5vw,4rem);margin:1.4rem 0}
.stage-words.big{min-height:clamp(3rem,8vw,6.4rem);margin:2rem 0}
.stage-words span{position:absolute;left:0;top:0;font-weight:700;letter-spacing:-.02em;color:var(--signal);
  font-size:clamp(1.6rem,4vw,3.4rem);opacity:0;transform:translateY(30px)}
.stage-words.big span{font-size:clamp(2.4rem,7vw,6rem)}
.stage-words span.on{opacity:1;transform:translateY(0)}
.stage-words span.off{opacity:0;transform:translateY(-30px)}

.manifest{margin-top:2rem;display:grid;gap:.55rem;max-width:420px;font-size:.68rem;color:var(--steel)}
.manifest div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:.5rem}
.manifest dd{color:var(--warm)}
.signature-line{margin-top:1.5rem;font-size:clamp(1rem,1.6vw,1.4rem);max-width:30ch;color:var(--mist);opacity:0;transform:translateY(20px);transition:.6s var(--ease)}
.signature-line.on{opacity:1;transform:none}
.op-meta{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:2rem;font-size:.6rem;color:var(--steel)}
.container-mask .scrub-video{clip-path:inset(0 38% round 0);transition:clip-path .1s linear}

/* progress rail */
.rail{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.rail .mono{font-size:.6rem;color:var(--steel)}
.rail-track{width:1px;height:120px;background:var(--line);position:relative}
.rail-fill{position:absolute;top:0;left:0;width:1px;background:var(--signal);height:0}

/* ======================= AUTOPLAY CHAPTERS ======================= */
.autoplay{position:relative;padding:clamp(7rem,20vh,14rem) 0;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.autoplay-media{position:absolute;inset:0;z-index:0}
.autoplay-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.autoplay .media-grade{background:linear-gradient(90deg,rgba(4,18,28,.92),rgba(4,18,28,.32) 62%,rgba(4,18,28,.55))}
.autoplay .media-grade::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 220px 40px rgba(0,0,0,.6)}
.autoplay .container,.autoplay .sea-intro{position:relative;z-index:3}
.autoplay-content{display:flex;flex-direction:column;gap:1.3rem;max-width:900px}
.route-diagram{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.7rem;color:var(--steel);margin-top:.6rem}
.route-diagram i{height:1px;width:48px;background:var(--signal);display:inline-block}
.metrics{display:flex;gap:clamp(2rem,6vw,6rem);margin-top:2rem;flex-wrap:wrap}
.metric-num{font-size:clamp(3rem,8vw,6.5rem);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--warm);line-height:1}
.metrics p{font-size:.66rem;color:var(--steel);margin-top:.6rem}

/* sea chapter */
.sea{padding-bottom:0}
.autoplay-media.fixed-bg video{opacity:.8}
.sea-grade{background:linear-gradient(90deg,rgba(4,18,28,.94),rgba(4,18,28,.4) 72%)}
.sea-intro{max-width:calc(900px + var(--pad));padding-inline:var(--pad);margin-bottom:clamp(3rem,8vh,6rem)}
.cap-strip-wrap{position:relative;z-index:3;overflow:hidden;padding-bottom:clamp(4rem,10vh,8rem)}
.cap-strip{display:flex;gap:0;padding-inline:var(--pad);will-change:transform}
.cap{flex:0 0 min(84vw,440px);border-top:1px solid var(--signal);border-left:1px solid var(--line);padding:1.6rem 1.8rem 3rem}
.cap:last-child{border-right:1px solid var(--line)}
.cap span{font-size:.7rem;color:var(--steel)}
.cap h3{font-size:clamp(1.4rem,2.4vw,2.1rem);font-weight:700;letter-spacing:-.02em;margin:1.2rem 0 .8rem}
.cap p{font-size:.92rem;color:var(--mist);line-height:1.55}

/* ======================= FOOTER ======================= */
#footer{background:var(--warm);color:var(--ink-900);padding:clamp(4rem,10vh,8rem) 0 2.5rem;position:relative}
#footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line-dark)}
.footer-brand{padding-bottom:clamp(2rem,6vh,4rem);border-bottom:1px solid var(--line-dark)}
.footer-tag{color:var(--signal);font-size:.7rem;margin-top:.8rem}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding:clamp(2.5rem,6vh,4rem) 0}
.footer-cols h4{font-size:.66rem;color:var(--steel);margin-bottom:1.2rem}
.footer-cols ul{list-style:none;display:flex;flex-direction:column;gap:.7rem;font-size:.95rem}
.footer-cols a:hover{color:var(--signal)}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.62rem;color:var(--steel);border-top:1px solid var(--line-dark);padding-top:1.6rem}
.footer-legal a:hover{color:var(--signal)}

/* ======================= QUOTE PANEL ======================= */
#quote-overlay{position:fixed;inset:0;z-index:1600;background:rgba(4,18,28,.6);backdrop-filter:blur(3px)}
#quote-panel{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);z-index:1700;background:var(--ink-800);
  border-left:1px solid var(--line);padding:clamp(1.6rem,4vw,2.6rem);overflow-y:auto;transform:translateX(101%);
  transition:transform .5s var(--ease)}
#quote-panel.open{transform:none}
.qp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.qp-head .mono{font-size:.66rem;color:var(--signal)}
.qp-close{background:none;border:1px solid var(--line);color:var(--warm);width:38px;height:38px;cursor:pointer;font-size:1rem}
.qp-close:hover{border-color:var(--signal);color:var(--signal)}
.qp-sub{color:var(--steel);margin:.6rem 0 1.8rem;font-size:.95rem}
.qp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.qp-grid label{display:flex;flex-direction:column;gap:.4rem;font-size:.72rem;color:var(--steel);text-transform:uppercase;letter-spacing:.08em}
.qp-grid label.full{grid-column:1/-1}
.qp-grid input,.qp-grid select,.qp-grid textarea{background:var(--ink-950);border:1px solid var(--line);color:var(--warm);
  padding:.7rem .8rem;font-family:inherit;font-size:.95rem;border-radius:4px}
.qp-grid input:focus,.qp-grid select:focus,.qp-grid textarea:focus{border-color:var(--signal);outline:none}
.qp-grid [aria-invalid="true"]{border-color:var(--signal)}
.qp-consent{margin:1.4rem 0;font-size:.58rem;color:var(--steel);text-transform:none;letter-spacing:.04em}
.qp-actions{display:flex;gap:1rem;flex-wrap:wrap}
.qp-status{margin-top:1rem;font-size:.85rem;color:var(--signal)}

/* reveal words */
.reveal-words .w{display:inline-block;overflow:hidden;vertical-align:top}
.reveal-words .w i{display:inline-block;font-style:normal;transform:translateY(110%)}

/* ======================= RESPONSIVE ======================= */
@media(max-width:1024px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-burger{display:flex}
  .footer-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .scrub{height:auto}
  .scrub-stage{position:relative;height:100svh;min-height:600px}
  .container-mask .scrub-video{clip-path:none}
  .metrics{gap:2.5rem}
  .qp-grid{grid-template-columns:1fr}
  #quote-panel{width:100vw}
  .op-meta{gap:.9rem}
  .cap{flex-basis:82vw}
}

/* ======================= REDUCED MOTION ======================= */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .scrub{height:auto}
  .scrub-stage{position:relative;height:100svh;min-height:560px}
  .pre-word span,.reveal-words .w i{transform:none}
  .stage-words{height:auto;display:flex;gap:1.2rem;flex-wrap:wrap}
  .stage-words span{position:static;opacity:1;transform:none}
  .signature-line{opacity:1;transform:none}
  #preloader{display:none}
  .media.missing::after{animation:none}
}

/* ---------------- glass panel sizing + track responsive ---------------- */
.manifest.glass{padding:1.3rem 1.5rem;max-width:440px}
.route-diagram.glass{display:inline-flex;padding:.85rem 1.3rem;margin-top:.6rem}
.op-meta.glass{display:inline-flex;padding:.9rem 1.3rem;margin-top:2rem;flex-wrap:wrap}
.metric.glass{padding:1.5rem 1.7rem;min-width:190px}
.metrics{display:flex;gap:1.2rem;margin-top:2rem;flex-wrap:wrap}
.end-cta.glass{display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start;padding:clamp(1.6rem,3vw,2.4rem);max-width:540px;margin-top:2rem}
.cap.glass{border:1px solid var(--line);border-top:2px solid var(--signal);border-radius:10px}
.cap-strip{gap:1.2rem}
#chapter-index{padding:.5rem .85rem;border-radius:8px}
#quote-panel.glass{background:rgba(14,14,14,0.78);border-radius:0}
.hero-overlay{justify-content:flex-end}

@media(max-width:768px){
  .track{height:100svh}
  .hold{height:100svh;padding-block:92px}
  .hold-sea{justify-content:flex-start;gap:2rem}
  .cap{flex-basis:82vw}
}
@media(prefers-reduced-motion:reduce){
  .track{height:auto}
  .hold{position:relative;height:auto;min-height:auto;padding:clamp(4rem,12vh,8rem) 0;overflow:visible}
  #video-stage .vlayer{opacity:0 !important}
  #video-stage .vlayer[data-clip="0"]{opacity:.2 !important}
}

/* ================= REPAIR PASS: fallback, counter, CTA, nav ================= */

/* premium missing-media fallback (cinematic intermission, never black) */
.vlayer.missing{opacity:1 !important;background:linear-gradient(160deg,#0B2233,#06121D 72%)}
.vlayer.missing video{display:none}
.vlayer.missing::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;background:
  repeating-linear-gradient(90deg,transparent 0 90px,rgba(242,240,234,.05) 90px 91px),
  repeating-linear-gradient(0deg,transparent 0 90px,rgba(242,240,234,.05) 90px 91px)}
.vlayer.missing::after{content:"";position:absolute;top:0;bottom:0;width:34%;left:-40%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,107,26,.16),transparent);animation:beam 7s linear infinite;filter:blur(2px)}
.vlayer.missing .vgrade{background:radial-gradient(80% 60% at 76% 28%,rgba(255,107,26,.10),transparent 60%)}
.vlayer.missing .vgrade::before{content:"MEDIA / PENDING";position:absolute;left:var(--pad);bottom:2.2rem;z-index:6;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.22em;color:var(--steel)}
@keyframes beam{to{left:120%}}

/* chapter counter: transition + hide over footer */
#chapter-index{transition:opacity .4s var(--ease)}
#chapter-index .ci-cur{display:inline-block}
body.at-footer #chapter-index{opacity:0;pointer-events:none}

/* nav: outline CTA + slightly larger wordmark */
.nav-cta{background:transparent;color:var(--warm);border:1px solid var(--signal)}
.nav-cta:hover{background:var(--signal);color:var(--ink-900)}
.brand-word{font-size:1.08rem}

/* final CTA — editorial two-column, dominant statement (de-cluttered) */
.end-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.end-left{display:flex;flex-direction:column}
.end-left .eyebrow{margin-bottom:1.1rem}
.end-grid .end-sub{font-size:clamp(1.05rem,1.7vw,1.65rem);line-height:1.18;font-weight:600;color:var(--steel);margin-bottom:1.5rem;max-width:22ch}
.end-left .final-statement{font-size:clamp(2rem,4.6vw,4.5rem);line-height:1.03;letter-spacing:-.02em;max-width:15ch;margin:0}
.end-right{display:flex;flex-direction:column;gap:1.35rem;align-items:flex-start;opacity:0;transform:translateY(20px);transition:.7s var(--ease)}
.end-right.on{opacity:1;transform:none}
.end-right .lede{font-size:clamp(.92rem,1vw,1.08rem);max-width:34ch}
.btn-cta-lg{padding:1.2rem 2.4rem;font-size:1rem;letter-spacing:.04em}
.expert-link{color:var(--steel);transition:color .25s}
.expert-link:hover{color:var(--signal)}
.foot-soon{color:var(--steel);opacity:.6;cursor:default}

@media(max-width:768px){
  .end-grid{grid-template-columns:1fr;gap:2rem;align-items:start}
  .end-left .final-statement,.end-sub{max-width:none}
}

/* ================= LOGO / HERO OVERLAP HARDENING + font ================= */
/* Cap hero headline to viewport height so tall/short windows never push the
   eyebrow up under the fixed nav (root cause of the wordmark overlap). */
.hero-overlay h1{font-size:clamp(2.6rem, min(8.6vw, 11.5vh), 8.5rem);line-height:.92}
.hero-overlay{padding-top:104px;gap:clamp(.8rem,1.6vh,1.4rem)}
#chapter-01 .hold{align-items:flex-end}
.hero-overlay .lede{font-size:clamp(1rem,1.1vw,1.2rem)}
.hero-sub{display:none} /* fold the secondary line into the scrubbed reveal only on tall screens */
@media (min-height:840px){ .hero-sub{display:block} }
/* brand wordmark: crisp, never collides */
.brand-word{line-height:1.05;white-space:nowrap}
.brand-word em{margin-top:3px}

/* ================= OFFICIAL BRAND APPLICATION ================= */
.brand-logo{height:42px;width:auto;display:block}
#nav.scrolled .brand-logo{height:34px}
.footer-logo{height:54px;width:auto;display:block;margin-bottom:.2rem}
.glass{background:rgba(7,28,44,0.46);border-color:rgba(231,238,242,0.14)}
#nav.scrolled{background:rgba(7,28,44,0.78)}
#quote-panel.glass{background:rgba(7,28,44,0.95)}
#quote-overlay{background:rgba(4,18,28,0.62)}
#preloader{background:var(--ink-950)}
/* premium missing-media fallback -> brand deep-current -> ink */
.vlayer.missing{background:linear-gradient(160deg,#0A3D62,#071C2C 72%) !important}
.vlayer.missing .vgrade{background:radial-gradient(80% 60% at 76% 28%,rgba(255,90,31,.10),transparent 60%)}
::selection{background:var(--signal);color:#fff}
/* route-blue hairline option for technical dividers */
.route-diagram i,.hint-line,.pre-line-fill{background:var(--signal)}

/* ================= FOOTAGE BRIGHTNESS LIFT ================= */
/* Non-destructive: brightens the source render + eases the dark scrims so the
   clips read brighter, with NO re-encode and zero quality loss. Text scrims
   kept strong enough on the text side to preserve legibility. */
.vlayer video{filter:brightness(1.16) contrast(1.05) saturate(1.08)}
.vgrade{background:linear-gradient(to top,rgba(4,18,28,.80),rgba(4,18,28,.14) 48%,rgba(4,18,28,.30))}
.vgrade::after{box-shadow:inset 0 0 220px 40px rgba(0,0,0,.40)}
.vlayer[data-clip="1"] .vgrade,.vlayer[data-clip="5"] .vgrade{background:linear-gradient(90deg,rgba(4,18,28,.80),rgba(4,18,28,.12) 62%,rgba(4,18,28,.30))}
.vgrade.sea{background:linear-gradient(90deg,rgba(4,18,28,.86),rgba(4,18,28,.22) 72%)}
/* keep the missing-media grade unaffected by the lift above */
.vlayer.missing .vgrade{background:radial-gradient(80% 60% at 76% 28%,rgba(255,90,31,.10),transparent 60%)}
.vlayer.missing .vgrade::after{box-shadow:none}