/* ============================================================================
   motion.css — "VOLTAGE IN THE DARK" design/motion system (Aug 2026)
   One motion language for the whole site. Loaded after style-v4.css.

   Rules of the system:
   - transform/opacity only; nothing bounces, nothing spins.
   - Entrance: .7–.9s, cubic-bezier(.16,1,.3,1), stagger 70ms.
   - Electric blue (var(--mo-bright)) is scarce voltage: glows, live dots, progress,
     edges, primary CTAs, ghost numerals. Never floods a surface.
   - Reveal-hidden states ONLY apply under html.mjs (set by motion.js when
     JS is alive AND prefers-reduced-motion is off) → no-JS/reduced-motion
     users get instant, fully visible content. Zero CLS by construction.
   ============================================================================ */

:root{
  --ez:cubic-bezier(.16,1,.3,1);
  /* Palette derived from the actual logo blue (#223D80 sampled from
     bg-logo-new.png / edge-only.png / bg-icon.png) — every accent stays on
     the brand hue instead of the old electric var(--mo-bright). */
  --mo-blue:#223D80;        /* brand core — large fills, EDGE script */
  --mo-blue-up:#2F55B4;     /* elevated fills, button gradients */
  --mo-bright:#5C7FD6;      /* small accents, dots, hovers (readable on dark) */
  --mo-ice:#AFC2EC;         /* light tint text */
  --mo-glow:rgba(60,95,190,.32);
  --mo-line:rgba(60,95,190,.3);
  --mo-dur:.8s;
}

/* ── 1. REVEALS ──────────────────────────────────────────────────────────── */
html.mjs [data-rv]{opacity:0;transform:translate3d(0,26px,0);transition:opacity var(--mo-dur) var(--ez),transform var(--mo-dur) var(--ez);transition-delay:calc(var(--rv-i,0)*70ms);will-change:opacity,transform}
html.mjs [data-rv].in{opacity:1;transform:none}
html.mjs [data-rv="fade"]{transform:none}
html.mjs [data-rv="left"]{transform:translate3d(-34px,0,0)}
html.mjs [data-rv="right"]{transform:translate3d(34px,0,0)}
/* Image / media clip reveal */
html.mjs [data-rv="clip"]{transform:none;clip-path:inset(8% 8% 8% 8% round 16px);transition:opacity var(--mo-dur) var(--ez),clip-path 1s var(--ez);transition-delay:calc(var(--rv-i,0)*70ms)}
html.mjs [data-rv="clip"].in{clip-path:inset(0 0 0 0 round 0)}

/* Split-text word masks (built by motion.js on [data-split] targets) */
/* Symmetric padding keeps cap-height, descenders AND the script words'
   white outline shadows inside the overflow mask (they extend ±5px). */
.mo-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em .07em .14em .07em;margin:-.16em -.07em -.14em -.07em}
.mo-w>span{display:inline-block;will-change:transform}
html.mjs .mo-split .mo-w>span{transform:translate3d(0,110%,0);transition:transform .9s var(--ez)}
html.mjs .mo-split.in .mo-w>span{transform:none}
html.mjs .mo-split .mo-w:nth-child(1)>span{transition-delay:.04s}
html.mjs .mo-split .mo-w:nth-child(2)>span{transition-delay:.11s}
html.mjs .mo-split .mo-w:nth-child(3)>span{transition-delay:.18s}
html.mjs .mo-split .mo-w:nth-child(4)>span{transition-delay:.25s}
html.mjs .mo-split .mo-w:nth-child(5)>span{transition-delay:.32s}
html.mjs .mo-split .mo-w:nth-child(6)>span{transition-delay:.39s}
html.mjs .mo-split .mo-w:nth-child(7)>span{transition-delay:.46s}
html.mjs .mo-split .mo-w:nth-child(n+8)>span{transition-delay:.53s}

/* Hairline that draws itself under section heads */
html.mjs .mo-rule{position:relative}
html.mjs .mo-rule::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-18px;width:0;height:1px;background:linear-gradient(90deg,transparent,var(--mo-line),transparent);transition:width 1.1s var(--ez) .25s}
html.mjs .mo-rule.in::after{width:min(340px,60%)}

/* ── 2. GIANT GHOST SECTION NUMERALS ─────────────────────────────────────── */
[data-idx]{position:relative}
[data-idx]::before{
  content:attr(data-idx);
  position:absolute;top:clamp(18px,4vw,44px);right:clamp(10px,4vw,56px);
  font-family:'Gotham-Ultra',var(--v4-display,sans-serif);
  font-size:clamp(84px,11vw,170px);line-height:.8;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(60,95,190,.26);
  text-stroke:1.5px rgba(60,95,190,.26);
  pointer-events:none;user-select:none;z-index:0;
}
[data-idx]::after{
  content:"";position:absolute;top:clamp(18px,4vw,44px);right:clamp(10px,4vw,56px);
  width:clamp(60px,8vw,120px);height:1px;margin-top:-14px;
  background:linear-gradient(90deg,transparent,rgba(60,95,190,.5));
  pointer-events:none;
}
html.mjs [data-idx]::before{opacity:0;transform:translate3d(0,40px,0);transition:opacity 1.1s var(--ez),transform 1.1s var(--ez)}
html.mjs [data-idx].idx-in::before{opacity:1;transform:none}
@media(max-width:700px){[data-idx]::before{font-size:72px;top:14px}[data-idx]::after{display:none}}

/* ── 3. NAV — transparent at top → glass on scroll + progress bar ────────── */
body.v4 .nav{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .35s ease,border-color .35s ease,height .35s var(--ez),backdrop-filter .35s ease}
body.v4 .nav.is-scrolled{background:rgba(4,6,8,.72);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom-color:rgba(255,255,255,.07);height:62px}
body.nav-open .nav{background:rgba(4,6,8,.9)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.nav__progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform:scaleX(var(--sp,0));transform-origin:0 50%;background:linear-gradient(90deg,var(--mo-blue),var(--mo-ice));opacity:0;transition:opacity .3s ease;pointer-events:none}
body.v4 .nav.is-scrolled .nav__progress{opacity:1}

/* ── 4. MARQUEE — proof band becomes a seamless ticker ───────────────────── */
.proofband{overflow:hidden}
.proofband .proofband__list.mo-marquee{flex-wrap:nowrap;justify-content:flex-start;width:max-content;animation:mo-marquee 34s linear infinite;padding-right:14px}
.proofband:hover .mo-marquee{animation-play-state:paused}
@keyframes mo-marquee{to{transform:translate3d(-50%,0,0)}}
.proofband{position:relative}
.proofband::before,.proofband::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.proofband::before{left:0;background:linear-gradient(90deg,#040608,transparent)}
.proofband::after{right:0;background:linear-gradient(270deg,#040608,transparent)}

/* ── 5. CARDS — one hover language everywhere ────────────────────────────── */
body.v4 .service.flow__card,
.hp-flow-card,
body.v4 .hevt,body.v4 .fevt,
.tr-way,.tr-svc__card,.tr-deploy__card,.tr-prog,
.deploy__step,
.hp-album,.hp-stop,
.hp-statstrip__cell{transition:transform .5s var(--ez),border-color .5s ease,box-shadow .5s ease}
body.v4 .service.flow__card:hover,
.hp-flow-card:hover,
.tr-way:hover,.tr-svc__card:hover,.tr-deploy__card:hover,
.deploy__step:hover,
.hp-album:hover,.hp-stop:hover{transform:translateY(-6px);border-color:var(--mo-line);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(60,95,190,.22),0 0 44px -12px var(--mo-glow)}
body.v4 .hevt:hover,body.v4 .fevt:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(60,95,190,.28)}
body.v4 .service.flow__card img{transition:transform .9s var(--ez)}
body.v4 .service.flow__card:hover img{transform:scale(1.045)}
/* corner voltage tick on card hover */
.hp-flow-card{position:relative}
.hp-flow-card::after{content:"";position:absolute;top:0;left:0;width:34px;height:34px;border-top:1px solid transparent;border-left:1px solid transparent;border-top-left-radius:inherit;transition:border-color .4s ease}
.hp-flow-card:hover::after{border-color:rgba(60,95,190,.55)}

/* ── 6. CTAs — magnetic base + shine sweep ───────────────────────────────── */
.mo-mag{transition:transform .35s var(--ez);will-change:transform}
.hp-btn--primary,.btn--white{position:relative;overflow:hidden}
.hp-btn--primary::after,.btn--white::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .7s var(--ez);pointer-events:none}
.hp-btn--primary:hover::after,.btn--white:hover::after{left:130%}
/* underline draw-in for arrow text-links */
.hp-flow-card__more,.tr-band__more,.home-events__all,.hp-album__cta,.hp-stop__cta{background-image:linear-gradient(90deg,currentColor,currentColor);background-repeat:no-repeat;background-size:0% 1px;background-position:0 100%;transition:background-size .45s var(--ez);padding-bottom:2px}
.hp-flow-card:hover .hp-flow-card__more,.tr-band__more:hover,.home-events__all:hover,.hp-album:hover .hp-album__cta,.hp-stop:hover .hp-stop__cta{background-size:100% 1px}

/* ── 7. HERO — layered depth ─────────────────────────────────────────────── */
.hp-hero__glow,.hp-hero__visual,.edge__inner,[data-plx]{will-change:transform}
.hp-hero__slideshow{box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06),0 0 80px -30px var(--mo-glow)}
/* slow drift on the ambient glow even without scroll */
html.mjs .hp-hero__glow{animation:mo-drift 14s ease-in-out infinite alternate}
@keyframes mo-drift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,3%,0) scale(1.06)}}

/* ── 8. STATS — voltage on entry ─────────────────────────────────────────── */
.hp-statstrip__num{font-variant-numeric:tabular-nums}
html.mjs .hp-statstrip__icon{opacity:.5;transition:opacity .6s ease,color .6s ease}
html.mjs .hp-statstrip__cell.in .hp-statstrip__icon{opacity:1;color:var(--mo-blue)}

/* ── 9. STICKY MOBILE CTA ────────────────────────────────────────────────── */
.bg-sticky-cta{position:fixed;left:14px;right:14px;bottom:14px;z-index:190;display:none;align-items:center;justify-content:center;gap:8px;height:54px;border-radius:14px;background:linear-gradient(135deg,#2F55B4,#1B2F63);color:#fff;font-family:'Gotham-Bold',sans-serif;font-size:12px;letter-spacing:2px;text-decoration:none;box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12),0 0 34px -8px var(--mo-glow);opacity:0;transform:translateY(76px);transition:opacity .45s var(--ez),transform .45s var(--ez)}
.bg-sticky-cta.show{opacity:1;transform:none}
@media(max-width:900px){.bg-sticky-cta{display:flex}body.nav-open .bg-sticky-cta{opacity:0;pointer-events:none}}

/* ── 10. SECTION RHYTHM POLISH (structure, not content) ──────────────────── */
/* alternating tinted grounds give the page vertical rhythm */
.hp-flow{background:linear-gradient(180deg,#040608 0%,#070B14 100%)}
body.v4 .home-events{position:relative}
body.v4 .home-events::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 80% 0%,rgba(60,95,190,.06),transparent 70%);pointer-events:none}
.edge{isolation:isolate}
/* eyebrow live-tick */
.eyebrow__live,.tr-band__live,.tr-spot__live{box-shadow:0 0 0 4px rgba(60,95,190,.22)}

/* Stats strip gets its own ground: hairlines + faint voltage wash */
.hp-statstrip{position:relative}
.hp-statstrip__inner{background:linear-gradient(180deg,rgba(60,95,190,.05),rgba(255,255,255,.01));border-color:rgba(255,255,255,.09)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* Events empty state → proper glass card instead of a floating sentence */
body.v4 .home-events__empty{border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:64px 32px;text-align:center;background:linear-gradient(160deg,rgba(60,95,190,.07),rgba(255,255,255,.015) 60%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.v4 .home-events__empty p{font-size:16px;color:rgba(234,240,255,.72);margin:0}
body.v4 .home-events__empty a{display:inline-block;margin-top:6px;font-family:'Gotham-Bold',sans-serif;letter-spacing:1.5px;font-size:13px;text-transform:uppercase}

/* THE conversion band must be the loudest object on the page:
   rotating conic voltage ring behind a glass panel */
.tr-band__box{position:relative;z-index:1;overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tr-band .wrap{position:relative}
html.mjs .tr-band .wrap::before{
  content:"";position:absolute;inset:-2px;border-radius:24px;z-index:0;
  background:conic-gradient(from var(--mo-ang,0deg),transparent 0deg,rgba(60,95,190,.0) 40deg,rgba(60,95,190,.75) 90deg,rgba(150,175,225,.9) 120deg,rgba(60,95,190,.0) 200deg,transparent 360deg);
  animation:mo-ring 7s linear infinite;
  filter:blur(1px);
}
@property --mo-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes mo-ring{to{--mo-ang:360deg}}
@supports not (background:conic-gradient(from var(--mo-ang,0deg),red,blue)){
  html.mjs .tr-band .wrap::before{animation:none;background:linear-gradient(120deg,rgba(60,95,190,.5),transparent 40%,transparent 60%,rgba(60,95,190,.5))}
}
.tr-band__box{margin:2px} /* reveals the ring as a 2px border */
.tr-band__head{text-shadow:0 0 60px rgba(60,95,190,.35)}

/* ══ 12. CINEMATIC HERO (home) — full-bleed image, editorial overlay ═══════ */
body[data-page=home] .hp-hero{min-height:100svh;padding:0;align-items:flex-end}
/* the visual lives inside __inner in the markup — un-position the inner so the
   absolute visual resolves against .hp-hero and becomes a true full-bleed bg */
body[data-page=home] .hp-hero__inner{position:static}
body[data-page=home] .hp-hero__text{position:relative;z-index:4}
body[data-page=home] .hp-hero__visual{position:absolute;inset:0;z-index:0;display:block}
body[data-page=home] .hp-hero__slideshow{position:absolute;inset:0;max-width:none;aspect-ratio:auto;filter:none;box-shadow:none}
body[data-page=home] .hp-hero__visual::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,6,8,.94) 0%,rgba(4,6,8,.7) 40%,rgba(4,6,8,.3) 72%,rgba(4,6,8,.5) 100%),
             linear-gradient(0deg,#040608 0%,rgba(4,6,8,.15) 34%,rgba(4,6,8,.4) 100%);
}
body[data-page=home] .hp-hero__bg{z-index:3;background:radial-gradient(900px 620px at 80% 32%,rgba(60,95,190,.15),transparent 70%)}
body[data-page=home] .hp-hero__glow{z-index:3}
body[data-page=home] .hp-hero__inner{grid-template-columns:1fr;max-width:1320px;padding:200px clamp(20px,4vw,48px) 130px;gap:0}
body[data-page=home] .hp-hero__text{max-width:780px}
body[data-page=home] .hp-hero__hl-1{max-width:min(700px,88vw)}
body[data-page=home] .hp-hero__hl-2{max-width:min(460px,58vw)}
body[data-page=home] .hp-hero__sub{font-size:19px;max-width:560px}
body[data-page=home] .hp-hero__body{max-width:560px}
body[data-page=home] .hp-hero__dots{position:absolute;right:clamp(20px,4vw,48px);bottom:40px;z-index:5;justify-content:flex-end}
/* scroll cue — a voltage line breathing at the fold */
html.mjs body[data-page=home] .hp-hero::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:76px;z-index:5;background:linear-gradient(180deg,transparent,rgba(150,175,225,.9));animation:mo-cue 2.4s var(--ez) infinite}
@keyframes mo-cue{0%{transform:scaleY(0);transform-origin:top}46%{transform:scaleY(1);transform-origin:top}54%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:900px){
  body[data-page=home] .hp-hero{min-height:92svh}
  body[data-page=home] .hp-hero__inner{padding:150px 20px 100px}
  body[data-page=home] .hp-hero__visual{order:0;margin:0}
}

/* ══ 13. EDITORIAL TYPE — asymmetric left-aligned section heads (home) ═════ */
body.v4[data-page=home] section .wrap>.eyebrow--center{text-align:left}
body.v4[data-page=home] .section-title{text-align:left;font-size:clamp(48px,7.4vw,110px);margin-bottom:56px}
html.mjs body.v4[data-page=home] .section-title.mo-rule::after{left:0;transform:none;background:linear-gradient(90deg,rgba(60,95,190,.55),transparent)}
body[data-page=home] .hp-flow__head{text-align:left;margin:0 auto 56px;max-width:1100px}
body[data-page=home] .hp-flow__title{font-size:clamp(34px,4.6vw,56px)}
body[data-page=home] .hp-flow__sub{margin:14px 0 0;max-width:520px}
html.mjs body[data-page=home] .hp-flow__title.mo-rule::after{left:0;transform:none;background:linear-gradient(90deg,rgba(60,95,190,.55),transparent)}
body[data-page=home] .hp-albums__head,body[data-page=home] .hp-stops__head{text-align:left}
body[data-page=home] .hp-albums__sub,body[data-page=home] .hp-stops__sub{margin-left:0;margin-right:auto}

/* ══ 14. GIANT OUTLINE TICKER ══════════════════════════════════════════════ */
.mo-bigticker{overflow:hidden;padding:58px 0 52px;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:#04070E;position:relative}
.mo-bigticker__track{display:flex;align-items:center;gap:52px;width:max-content;will-change:transform}
html.mjs .mo-bigticker__track{animation:mo-marquee 28s linear infinite}
.mo-bigticker:hover .mo-bigticker__track{animation-play-state:paused}
.mo-bigticker__track span{font-family:'Gotham-Ultra',sans-serif;font-size:clamp(54px,8vw,118px);line-height:1;text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(175,194,236,.34);letter-spacing:.01em}
/* EDGE matches the logo lockup: brand-blue script with a white stroke edge */
.mo-bigticker__track span em{font-style:normal;color:#2F55B4;-webkit-text-stroke:1.5px rgba(255,255,255,.9);text-shadow:0 4px 14px rgba(0,0,0,.5),0 0 44px rgba(60,95,190,.55)}
.mo-bigticker__track i{width:10px;height:10px;border-radius:50%;background:var(--mo-bright);flex:none;box-shadow:0 0 20px rgba(60,95,190,.9)}

/* ══ 15. CUSTOM CURSOR (fine pointers, wide screens) ═══════════════════════ */
html.mo-cur, html.mo-cur body, html.mo-cur a, html.mo-cur button, html.mo-cur [role=button]{cursor:none!important}
.mo-cursor{position:fixed;top:0;left:0;z-index:2147483000;pointer-events:none}
.mo-cursor__dot{position:fixed;width:6px;height:6px;border-radius:50%;background:var(--mo-ice);transform:translate(-50%,-50%);box-shadow:0 0 12px rgba(150,175,225,.8)}
.mo-cursor__ring{position:fixed;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(150,175,225,.55);transform:translate(-50%,-50%);transition:width .35s var(--ez),height .35s var(--ez),background-color .35s ease,border-color .35s ease,opacity .3s ease}
.mo-cursor.is-hover .mo-cursor__ring{width:62px;height:62px;background:rgba(60,95,190,.12);border-color:rgba(150,175,225,.95)}
.mo-cursor.is-down .mo-cursor__ring{width:26px;height:26px}
.mo-cursor.is-hidden{opacity:0}

/* ══ 16. PREMIUM MATERIAL PASS ═════════════════════════════════════════════ */
/* Voltage selection + thin branded scrollbar */
::selection{background:rgba(60,95,190,.4);color:#fff}
html{scrollbar-width:thin;scrollbar-color:rgba(60,95,190,.45) #04060C}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#04060C}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#26417F,#152648);border-radius:99px;border:2px solid #04060C}
::-webkit-scrollbar-thumb:hover{background:var(--mo-bright)}

/* Card material: gradient surface + top edge light instead of flat panels */
body.v4 .service.flow__card,
.hp-flow-card,
.tr-way,.tr-svc__card,.tr-deploy__card,.tr-prog,
.deploy__step,
body.v4 .home-events__empty,
.hp-statstrip__inner{
  background-image:linear-gradient(168deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.012) 46%,rgba(60,95,190,.035) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 44px rgba(0,0,0,.42);
}
/* Ambient wash anchors each numbered section (.hp-flow keeps its own gradient) */
[data-idx]:not(.hp-flow){background-image:radial-gradient(52% 38% at 10% 0%,rgba(60,95,190,.05),transparent 70%)}

/* Gradient display type — white-to-ice metallic on the big headlines.
   Guarded so unsupported browsers keep plain white text. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .mo-split .mo-w>span{
    background-image:linear-gradient(180deg,#FFFFFF 42%,#B9C6E6 96%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .mo-split em .mo-w>span{background-image:none;-webkit-text-fill-color:currentColor}
  .hp-statstrip__num{
    background-image:linear-gradient(180deg,#FFFFFF 40%,#A9BCE6);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .hp-statstrip__num .hp-statstrip__plus{-webkit-text-fill-color:currentColor}
}

/* Buttons: layered depth + lift */
body.v4 .btn--white{box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.9)}
body.v4 .btn--white:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.9)}
body.v4 .btn--ghost{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hp-btn--primary{background:linear-gradient(135deg,#2F55B4,#1B2F63);box-shadow:0 10px 28px rgba(60,95,190,.35),inset 0 1px 0 rgba(255,255,255,.28)}
.hp-btn--primary:hover{background:linear-gradient(135deg,#3A63C9,#24408C);box-shadow:0 14px 36px rgba(60,95,190,.45),inset 0 1px 0 rgba(255,255,255,.28)}

/* Consistent grade on card imagery */
body.v4 .service.flow__card img{filter:saturate(1.08) contrast(1.04)}

/* Footer: voltage hairline + hover states */
.footer{position:relative}
.footer::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(60,95,190,.45),transparent)}
.footer__cols a{transition:color .25s ease}
.footer__cols a:hover{color:var(--mo-ice)}

/* ══ 17. ENTRY SEQUENCE — the doors open into the zone ═════════════════════ */
.bg-entry{display:none}
/* No scroll-lock on purpose: if scripting ever dies, the CSS failsafe below
   hides the overlay and the page must remain fully usable. */
html.mo-entry .bg-entry{display:block;position:fixed;inset:0;z-index:2147482000;animation:mo-entry-failsafe .3s 4s forwards}
@keyframes mo-entry-failsafe{from{opacity:1}to{opacity:0;visibility:hidden;pointer-events:none}}
.bg-entry__panel{position:absolute;top:0;bottom:0;width:50.5%;background:linear-gradient(180deg,#05080F,#03050A);transition:transform 1s var(--ez) .1s}
.bg-entry__panel--l{left:0;border-right:1px solid rgba(92,127,214,.25)}
.bg-entry__panel--r{right:0;border-left:1px solid rgba(92,127,214,.25)}
.bg-entry__seam{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,rgba(92,127,214,.9),transparent);filter:blur(1px);transition:opacity .4s ease;animation:mo-seam 1.2s ease-in-out infinite alternate}
@keyframes mo-seam{from{opacity:.5}to{opacity:1}}
.bg-entry__core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .45s ease,transform .45s var(--ez)}
.bg-entry__logo{width:min(220px,52vw);height:auto;filter:drop-shadow(0 0 34px rgba(60,95,190,.5))}
.bg-entry__count{font-family:'Gotham-Ultra',sans-serif;font-size:15px;letter-spacing:3px;color:var(--mo-ice);font-variant-numeric:tabular-nums}
.bg-entry__tag{font-family:'Gotham-Bold',sans-serif;font-size:10px;letter-spacing:3.5px;color:rgba(175,194,236,.55)}
.bg-entry.is-open .bg-entry__panel--l{transform:translate3d(-101%,0,0)}
.bg-entry.is-open .bg-entry__panel--r{transform:translate3d(101%,0,0)}
.bg-entry.is-open .bg-entry__seam,
.bg-entry.is-open .bg-entry__core{opacity:0}
.bg-entry.is-open .bg-entry__core{transform:scale(1.06)}
.bg-entry.is-open{pointer-events:none}

/* ══ 18. STEP INSIDE — pinned walkthrough of the zone ══════════════════════ */
.wk{height:380vh;position:relative;background:#03050A}
.wk__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#03050A}
.wk__scene{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .85s ease}
.wk__scene img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 2.2s var(--ez)}
.wk__scene.is-on{opacity:1;z-index:1}
.wk__scene.is-on img{transform:scale(1.02)}
.wk__shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(3,5,10,.55) 0%,rgba(3,5,10,.22) 42%,rgba(3,5,10,.08) 70%,rgba(3,5,10,.3) 100%),
             linear-gradient(0deg,rgba(3,5,10,.94) 0%,rgba(3,5,10,.35) 28%,transparent 55%,rgba(3,5,10,.6) 100%)}
/* cryo vapor — two blurred drift layers */
.wk__vapor{position:absolute;z-index:3;pointer-events:none;width:70vw;height:44vh;bottom:-8vh;filter:blur(46px);opacity:.5;
  background:radial-gradient(50% 60% at 50% 60%,rgba(175,200,240,.16),transparent 70%)}
.wk__vapor--a{left:-12vw;animation:wk-vapor-a 13s ease-in-out infinite alternate}
.wk__vapor--b{right:-16vw;bottom:-14vh;opacity:.35;animation:wk-vapor-b 17s ease-in-out infinite alternate}
@keyframes wk-vapor-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9vw,-6vh,0) scale(1.15)}}
@keyframes wk-vapor-b{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-10vw,-4vh,0) scale(1)}}
/* giant ghost numeral — anchors the right side of the frame */
.wk__ghost{position:absolute;z-index:3;right:clamp(8px,3vw,48px);bottom:clamp(8px,4vh,36px);
  font-family:'Gotham-Ultra',sans-serif;font-size:clamp(150px,26vw,380px);line-height:.78;
  color:transparent;-webkit-text-stroke:2px rgba(150,175,225,.28);
  pointer-events:none;user-select:none}

/* intro — owns scene 0, retires as you walk deeper */
.wk__intro{position:absolute;z-index:4;top:clamp(96px,14vh,160px);left:clamp(20px,5vw,64px);max-width:720px;
  transition:opacity .6s ease,transform .6s var(--ez)}
.wk--deep .wk__intro{opacity:0;transform:translate3d(0,-36px,0);pointer-events:none}
.wk__eyebrow{font-family:'Gotham-Bold',sans-serif;font-size:11px;letter-spacing:3px;color:var(--mo-ice);margin-bottom:14px}
.wk__eyebrow::before{content:"";display:inline-block;width:34px;height:1px;background:var(--mo-bright);vertical-align:4px;margin-right:12px}
.wk__title{font-family:'Gotham-Ultra',sans-serif;font-size:clamp(46px,7.4vw,104px);line-height:.92;text-transform:uppercase;margin:0;color:#fff;text-shadow:0 8px 40px rgba(0,0,0,.6)}
.wk__hint{margin-top:26px;display:flex;align-items:center;gap:14px;font-family:'Gotham-Bold',sans-serif;font-size:10px;letter-spacing:2.5px;color:rgba(175,194,236,.7)}
.wk__hint-line{position:relative;width:120px;height:1px;background:rgba(255,255,255,.15);overflow:hidden}
.wk__hint-line::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--mo-bright),transparent);animation:wk-hint 1.8s linear infinite}
@keyframes wk-hint{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* station block — kicker + massive display name, bottom-left */
.wk__station{position:absolute;z-index:4;left:clamp(20px,5vw,64px);right:clamp(20px,5vw,64px);bottom:clamp(34px,9vh,84px);pointer-events:none}
.wk__station-kick{display:inline-flex;align-items:center;gap:10px;font-family:'Gotham-Bold',sans-serif;font-size:11px;letter-spacing:3px;color:var(--mo-ice);
  padding:8px 14px;border:1px solid rgba(150,175,225,.3);border-radius:999px;background:rgba(3,5,10,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin-bottom:14px}
.wk__station-kick::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mo-bright);box-shadow:0 0 10px rgba(92,127,214,.9)}
.wk__station-name{font-family:'Gotham-Ultra',sans-serif;font-size:clamp(52px,10.5vw,164px);line-height:.85;text-transform:uppercase;color:#fff;
  text-shadow:0 10px 60px rgba(0,0,0,.65)}
@supports ((-webkit-background-clip:text)){
  .wk__station-name{background-image:linear-gradient(180deg,#FFFFFF 48%,#9FB2DC);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 10px 40px rgba(0,0,0,.6))}
}
.wk__station-sub{margin:14px 0 0;max-width:520px;font-family:'Gotham-Book',sans-serif;font-size:clamp(14px,1.3vw,17px);line-height:1.6;color:rgba(234,240,255,.8)}
/* swap animation — replays on every scene change */
.wk__station.is-swap .wk__station-kick{animation:wk-swap .6s var(--ez) both}
.wk__station.is-swap .wk__station-name{animation:wk-swap .75s var(--ez) .05s both}
.wk__station.is-swap .wk__station-sub{animation:wk-swap .7s var(--ez) .14s both}
@keyframes wk-swap{from{opacity:0;transform:translate3d(0,46px,0)}to{opacity:1;transform:none}}

/* telemetry chip, top-right */
.wk__meta{position:absolute;z-index:4;top:clamp(90px,13vh,150px);right:clamp(20px,4vw,52px);display:flex;align-items:center;gap:9px;
  font-family:'Gotham-Bold',sans-serif;font-size:10px;letter-spacing:2.5px;color:rgba(234,240,255,.75);
  padding:8px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(3,5,10,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.wk__meta i{width:7px;height:7px;border-radius:50%;background:#E5484D;box-shadow:0 0 10px rgba(229,72,77,.8);animation:wk-rec 1.4s ease-in-out infinite}
@keyframes wk-rec{50%{opacity:.25}}

.wk__rail{position:absolute;z-index:4;right:clamp(20px,4vw,52px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
.wk__rail i{width:3px;height:34px;border-radius:2px;background:rgba(255,255,255,.16);transition:background .4s ease,box-shadow .4s ease}
.wk__rail i.is-on{background:var(--mo-bright);box-shadow:0 0 12px rgba(92,127,214,.8)}

/* continuous scroll progress, bottom edge of the frame */
.wk__progress{position:absolute;z-index:5;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08)}
.wk__progress i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--mo-blue-up),var(--mo-bright));box-shadow:0 0 14px rgba(92,127,214,.6)}

@media(max-width:700px){
  .wk__meta{display:none}
  .wk__ghost{font-size:130px;right:10px;bottom:auto;top:96px}
  .wk__station{bottom:34px}
}
/* no-JS / reduced-motion: one clean static image section */
html:not(.mjs) .wk{height:auto}
html:not(.mjs) .wk__pin{position:static;height:72vh}
html:not(.mjs) .wk__scene{display:none}
html:not(.mjs) .wk__scene[data-wk="0"]{display:block;opacity:1}
html:not(.mjs) .wk__scene img{transform:none}
html:not(.mjs) .wk__rail,html:not(.mjs) .wk__progress,html:not(.mjs) .wk__hint,html:not(.mjs) .wk__ghost{display:none}

/* ══ 19. CURSOR CONTEXT LABEL ══════════════════════════════════════════════ */
.mo-cursor__label{position:fixed;transform:translate(-50%,-50%);font-family:'Gotham-Bold',sans-serif;font-size:9px;letter-spacing:2px;color:#fff;opacity:0;transition:opacity .25s ease;pointer-events:none}
.mo-cursor.is-view .mo-cursor__label{opacity:1}
.mo-cursor.is-view .mo-cursor__ring{width:74px;height:74px;background:rgba(34,61,128,.35);border-color:rgba(150,175,225,.9);backdrop-filter:blur(2px)}
.mo-cursor.is-view .mo-cursor__dot{opacity:0}

/* ── 11. REDUCED MOTION — everything collapses to calm ───────────────────── */
@media (prefers-reduced-motion:reduce){
  .proofband .proofband__list.mo-marquee{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .hp-btn--primary::after,.btn--white::after{display:none}
  *{scroll-behavior:auto!important}
}