/* ============================================================
   BEAVER HUB — hero / space theme
   Palette: blue (primary) · orange #FF5D00 (brand) · grey · white
   ============================================================ */
:root{
  --blue:        #3b82f6;
  --blue-deep:   #1d4ed8;
  --blue-glow:   #4aa8ff;
  --cyan:        #7dd3fc;
  --orange:      #ff5d00;   /* exact beaver orange */
  --orange-soft: #ff8a3d;

  /* brand palette — navy is the MAIN color for product/content sections */
  --navy:        #00478f;   /* MAIN */
  --navy-deep:   #063061;
  --near-black:  #2a231f;
  --lt-blue:     #d8e1e7;   /* light grey-blue (body text on dark) */
  --med-grey:    #7b7d87;
  --dark-slate:  #45585f;
  --teal-grey:   #506d72;

  --ink:         #04060f;   /* deep space */
  --ink-2:       #0a1020;
  --grey:        #8a93a6;
  --grey-light:  #b8c0d0;
  --white:       #f4f7ff;

  /* dark → blue → white melt (used for the seamless scroll background) */
  --melt-1:      #04060f;   /* deep space — matches hero exit */
  --melt-2:      #0a1020;
  --melt-3:      #0c1b3d;
  --melt-4:      #16336e;   /* seam color shared by .why bottom / .next top */
  --melt-5:      #2c5cae;
  --melt-6:      #7aa7e8;
  --melt-7:      #cfe0fb;
  --melt-8:      #eef4ff;   /* airy blue-white */
  --ink-text:    #0c1733;   /* dark text for light sections */
  --slate:       #46557a;   /* muted body text on light */

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22,1,.36,1);
  --maxw: 1280px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--white);
  line-height:1.55;
  overflow-x:clip;   /* clip (NOT hidden): contains h-overflow without making body a
                        scroll container, which would break the mobile hero's position:sticky */
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; }

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-body);
  font-size:.78rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--grey-light);
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 12px 2px rgba(255,93,0,.8);
}

.btn{
  --pad:.85em 1.5em;
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--pad);
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  letter-spacing:.01em; border-radius:999px;
  cursor:pointer; border:1px solid transparent;
  transition:transform .35s var(--ease), background .35s var(--ease),
             border-color .35s var(--ease), box-shadow .35s var(--ease);
  will-change:transform;
}
.btn--primary{
  background:linear-gradient(180deg,var(--orange-soft),var(--orange));
  color:#fff; box-shadow:0 10px 30px -8px rgba(255,93,0,.6);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -8px rgba(255,93,0,.75); }
.btn--ghost{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.18);
  color:var(--white);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{ transform:translateY(-2px); border-color:rgba(122,168,255,.6); background:rgba(122,168,255,.1); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; gap:2rem;
  padding:1.15rem clamp(1.1rem,4vw,3rem);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease);
}
.nav.is-scrolled{
  background:rgba(4,6,15,.6);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding-top:.8rem; padding-bottom:.8rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; margin-right:auto; position:relative; z-index:2;
        flex-shrink:0; }   /* never squeeze the wordmark — it overflows its box and lands under the nav pill */
.brand__logo{ width:34px; height:34px; filter:drop-shadow(0 2px 10px rgba(255,93,0,.45)); }
.brand__name{ font-family:var(--font-display); font-weight:600; font-size:1.18rem; letter-spacing:-.01em; }
.nav__links{ display:flex; align-items:center; gap:1.9rem; }
/* the quick-menu trigger is a <button> — strip its box padding on desktop so it
   sits on the same baseline as the plain text links beside it */
.nav__links .sp-menu__trigger{ padding:0; line-height:1; }
.nav__links a{
  font-size:.92rem; font-weight:500; color:var(--grey-light);
  position:relative; transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:var(--orange); transition:width .35s var(--ease);
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after{ width:100%; }

/* ============================================================
   QUICK MENU — dropdown with grouped sub-topics
   Shared by the home nav (.nav__links) and sub-page nav (.sp-nav).
   ============================================================ */
.sp-menu{ position:relative; }
.sp-nav .sp-menu{ margin-right:auto; }   /* sub-page nav: push back-link + CTA to the right */
.sp-menu__item{ position:relative; }
.sp-menu__trigger{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-body); font-size:.92rem; font-weight:500;
  color:var(--grey-light); background:none; border:0; cursor:pointer;
  padding:.5rem .3rem; transition:color .25s var(--ease);
}
.sp-menu__trigger:hover{ color:#fff; }
.sp-menu__caret{ font-size:.7rem; transition:transform .28s var(--ease); }
.sp-menu__item.is-open .sp-menu__caret{ transform:rotate(180deg); }
.sp-menu__panel{
  /* centered under the trigger, not edge-anchored: both nav bars are
     centered floating pills, and the trigger sits well off-center within
     them (near the left on the sub-page pill, mid-row on the home nav) —
     anchoring the panel to either the trigger's left or right edge ran it
     past the pill's opposite edge. Centering keeps it inside the pill on
     both. Mobile overrides this back to a static in-flow accordion
     (nav__links) or a fixed full-viewport modal card (.sp-menu__panel--modal,
     subpage.css) — this rule only governs the desktop floating dropdown. */
  position:absolute; top:calc(100% + .55rem); left:50%; z-index:60;
  padding:.7rem; display:flex; gap:.25rem;
  max-height:min(74vh,560px); overflow-y:auto;
  background:rgba(8,12,26,.95);
  border:1px solid rgba(255,255,255,.1); border-radius:16px;
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 34px 80px -30px rgba(0,0,0,.9);
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.sp-menu__item.is-open .sp-menu__panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
/* subpage nav (mobile): the panel is detached to <body> when open (see menu.js),
   so it's no longer a descendant of .sp-menu__item.is-open — open state is
   tracked with its own class directly on the panel instead. */
.sp-menu__panel.is-open{ opacity:1; visibility:visible; transform:none; }
/* shared by the home hamburger menu (ui.js) and the sub-page quick-menu
   modal (menu.js) — blocks background touch-scroll while either is open */
html.bh-menu-lock{ overflow:hidden; }
.sp-menu__col{ display:flex; flex-direction:column; min-width:212px; }
.sp-menu__col + .sp-menu__col{ margin-left:.25rem; padding-left:.55rem; border-left:1px solid rgba(255,255,255,.07); }
.sp-menu__group{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey); padding:.4rem .85rem .35rem;
}
.sp-menu__panel a{
  display:flex; flex-direction:column; gap:.08rem;
  padding:.5rem .85rem; border-radius:10px;
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  color:var(--white); transition:background .2s var(--ease);
}
.sp-menu__panel a::after{ display:none; }   /* cancel the .nav__links underline sweep */
.sp-menu__panel a small{ font-family:var(--font-body); font-weight:400; color:var(--grey-light); font-size:.74rem; }
.sp-menu__panel a:hover{ background:rgba(122,168,255,.13); color:#fff; }
.sp-menu__panel a.is-current{ background:rgba(255,93,0,.14); color:var(--orange-soft); }
.sp-menu__panel a.is-current small{ color:rgba(255,138,61,.75); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  height:100vh; height:100svh; min-height:600px;
  overflow:hidden;
}

/* --- scroll-scrubbed video backdrop --- */
.hero__video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  background:var(--ink);
  transform-origin:50% 47%;   /* zoom target = the rocket fire in the final frame */
  will-change:transform;
}
.hero__fadeout{
  position:absolute; inset:0; z-index:7; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 47%, rgba(255,140,40,.25), transparent 60%), var(--ink);
  opacity:0;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,6,15,.78) 0%, rgba(4,6,15,.28) 24%,
                            rgba(4,6,15,0) 46%, rgba(4,6,15,.30) 78%, rgba(4,6,15,.62) 100%),
    radial-gradient(120% 70% at 50% 120%, rgba(4,6,15,.55), transparent 60%);
}

/* --- heading stages --- */
.hero__stages{
  position:absolute; z-index:5; inset:0;
  display:grid; grid-template-columns:minmax(0,1fr);   /* don't let a long word blow out the column */
  justify-items:center; align-items:start;
  text-align:center;
  padding:clamp(12vh,15vh,17vh) 1.2rem 0;
  pointer-events:none;
}
.stage{
  grid-area:1/1;
  width:min(820px,92vw); min-width:0;   /* allow the grid item to shrink, not overflow */
  opacity:0; visibility:hidden;
  text-shadow:0 2px 30px rgba(2,6,18,.55);
}
.stage.is-active{ opacity:1; visibility:visible; }
.stage .eyebrow{ margin-bottom:1.1rem; }
.display{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.4rem,7vw,5.3rem);
  line-height:1.02;
  letter-spacing:-.03em;
  margin-bottom:1.1rem;
  overflow-wrap:break-word;
}
.display em{
  background:linear-gradient(105deg,var(--blue-glow),var(--cyan) 40%,var(--orange-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{
  font-size:clamp(1rem,1.6vw,1.22rem);
  color:var(--grey-light);
  max-width:46ch; margin:0 auto;
}
.hero__cta{
  display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap;
  margin-top:1.8rem; pointer-events:auto;
}

/* word-reveal mask */
.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word > span{ display:inline-block; will-change:transform; }

/* --- scroll cue --- */
.hero__cue{
  position:absolute; z-index:6; left:50%; bottom:2rem;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  color:var(--grey-light); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
}
.hero__cue-line{ width:1px; height:46px; background:rgba(255,255,255,.18); position:relative; overflow:hidden; }
.hero__cue-line i{ position:absolute; left:0; top:-50%; width:100%; height:50%;
  background:linear-gradient(var(--orange),transparent); animation:cue 1.8s var(--ease) infinite; }
@keyframes cue{ 0%{top:-50%;} 60%,100%{top:100%;} }

/* ============================================================
   COSMOS — space backdrop for the bottom sections
   A blue-dominant canvas starfield (orange + white accents) with a
   gyroscopic parallax. The sky is a sticky, viewport-tall layer that
   the content sections scroll over; faint blue/orange nebula behind.
   ============================================================ */
.cosmos{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(70% 50% at 16% 6%,  rgba(59,130,246,.20), transparent 60%),
    radial-gradient(60% 45% at 88% 20%, rgba(255,93,0,.10),  transparent 60%),
    radial-gradient(85% 60% at 50% 98%, rgba(45,92,174,.22), transparent 72%),
    var(--ink);
}
.cosmos__sky{
  position:sticky; top:0;
  width:100%; height:100vh;
  margin-bottom:-100vh;        /* sit behind the content that follows */
  z-index:0; pointer-events:none;
}
.cosmos__sky canvas{ width:100%; height:100%; display:block; }
.cosmos > :not(.cosmos__sky):not(.cosmos__enter){ position:relative; z-index:1; }
/* dark-to-clear bridge at the top: hands off from the hero's fade-out and lets
   the starfield + content emerge from black as you scroll into the section */
.cosmos__enter{
  position:absolute; top:0; left:0; right:0; height:80vh; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(4,6,15,.72) 32%, transparent 100%);
}

/* ============================================================
   SOLUTIONS — alternating rows: text one side, a 2×2 grid of
   sub-product cards (empty for now) that fly in on the other
   ============================================================ */
.sols{
  position:relative; z-index:1;
  max-width:min(1680px, 94vw); margin:0 auto;
  padding:clamp(5rem,12vh,9rem) clamp(1.2rem,4vw,3rem) clamp(4rem,9vh,7rem);
}
.sols__head{ max-width:720px; margin:0 auto clamp(2.5rem,7vh,5rem); text-align:center; }
.sols__head .eyebrow{ margin-bottom:1rem; }
.sols__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2rem,5vw,3.6rem); line-height:1.05; letter-spacing:-.03em;
  margin:.4rem 0 1.1rem; color:var(--white);
}
.sols__title span{ color:var(--orange); }
.sols__lede{ color:var(--lt-blue); font-size:clamp(1rem,1.5vw,1.15rem); max-width:54ch; margin:0 auto; }

/* --- each solution is a full-screen "stage" (pinned by JS) --- */
.sols{ counter-reset:sol; }
.sol{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1.1fr; align-items:center;
  gap:clamp(2rem,6vw,5.5rem);
  min-height:100vh;
  padding:clamp(2rem,5vh,3.5rem) clamp(1.5rem,4vw,4rem);
  counter-increment:sol;
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:clamp(20px,2.4vw,32px);
  box-shadow:0 50px 90px -40px rgba(4,10,22,.55);
  margin-bottom:clamp(1.5rem,3vh,2.5rem);
}
.sol--flip .sol__body { order:2; }
.sol--flip .sol__grid{ order:1; }
/* giant ghost index number — strong per-section identity */
.sol::before{
  content:counter(sol, decimal-leading-zero);
  position:absolute; top:50%; left:-1.5vw; transform:translateY(-50%);
  z-index:0; pointer-events:none;
  font-family:var(--font-display); font-weight:700; letter-spacing:-.04em;
  font-size:clamp(12rem, 40vh, 30rem); line-height:.78;
  color:rgba(0,71,143,.05);
}
.sol--flip::before{ left:auto; right:-1.5vw; }
/* focused accent glow behind the card grid */
.sol::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:60vw; height:60vw; max-width:780px; max-height:780px; border-radius:50%;
  top:50%; right:-12vw; transform:translateY(-50%);
  background:radial-gradient(circle, rgba(0,71,143,.10), transparent 62%);
  filter:blur(12px);
}
.sol--flip::after{ right:auto; left:-12vw; }
.sol__body, .sol__grid{ position:relative; z-index:1; }
.sol__body{
  background:rgba(255,255,255,.42);
  border-radius:20px;
  padding:clamp(1.4rem,2.4vw,2.2rem);
  margin:clamp(-1.4rem,-2.4vw,-2.2rem);
}

.sol__kicker{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange); margin-bottom:1rem;
}
.sol__name{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2rem,4.2vw,3.2rem); line-height:1.02; letter-spacing:-.03em;
  color:var(--ink-text); margin-bottom:1rem;
}
.sol__desc{
  color:var(--slate); font-size:clamp(1rem,1.3vw,1.15rem); max-width:42ch;
}

/* --- 2×2 grid of clickable sub-product cards (with hover popup) --- */
.sol__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.4rem,4vw,3.6rem);
  perspective:1200px;
}
.subcard{
  position:relative; display:block; text-decoration:none; cursor:pointer;
  aspect-ratio:4/3; border-radius:18px; overflow:hidden;
  border:1.5px solid rgba(255,255,255,.18);
  box-shadow:0 8px 24px -6px rgba(0,0,0,.45), 0 0 0 0 rgba(255,138,61,0);
  will-change:transform, opacity;
  transition:transform .3s var(--ease), border-color .3s var(--ease),
             box-shadow .35s var(--ease);
}
/* obvious lift + glow on hover — signals "this is clickable" */
.subcard:hover{
  transform:translateY(-6px) scale(1.025);
  border-color:rgba(255,138,61,.75);
  box-shadow:0 22px 48px -10px rgba(0,0,0,.6),
             0 0 0 3px rgba(255,138,61,.22);
}
/* subtle shimmer sweep that draws the eye */
.subcard::before{
  content:"";
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform:translateX(-100%);
  transition:transform .0s;
}
.subcard:hover::before{ transform:translateX(200%); transition:transform .55s var(--ease); }
/* dummy thumbnail image (swap the gradient for a real <img> later) */
.subcard__img{ position:absolute; inset:0; transition:transform .5s var(--ease); }
.subcard__img::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(4,10,22,.72) 0%, rgba(4,10,22,.18) 60%, transparent 100%); }
.subcard:hover .subcard__img{ transform:scale(1.06); }
/* label area with arrow cue */
.subcard__label{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1rem .9rem 1.1rem;
  font-family:var(--font-display); font-weight:600; font-size:1rem; color:#fff;
}
/* arrow icon — always visible, slides right on hover to signal action */
.subcard__label::after{
  content:"→";
  font-size:1rem; opacity:.6;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
  flex-shrink:0;
}
.subcard:hover .subcard__label::after{ transform:translateX(4px); opacity:1; }
/* per-card markup kept only as a data source for the big grid popup */
.subcard__pop{ display:none; }

/* dummy image gradients — replace with a real <img> in .subcard__img later */
.subcard--g1 .subcard__img{ background:linear-gradient(135deg,#0a3a7a,#2a8fe0); }
.subcard--g2 .subcard__img{ background:linear-gradient(135deg,#7a2f0a,#ff8a3d); }
.subcard--g3 .subcard__img{ background:linear-gradient(135deg,#10324f,#3aa6b8); }
.subcard--g4 .subcard__img{ background:linear-gradient(135deg,#2a1d5e,#7b5cff); }

/* --- big popup that covers the whole 2×2 grid on hover --- */
.sol__pop{
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:5; pointer-events:none;
  display:flex; gap:clamp(1rem,2vw,2rem); padding:clamp(1.2rem,2.2vw,2rem);
  border-radius:22px;
  background:linear-gradient(160deg, rgba(12,33,67,.98), rgba(8,14,28,.99));
  border:1px solid rgba(255,138,61,.45);
  box-shadow:0 50px 110px -30px rgba(0,0,0,.92);
  opacity:0; transform:scale(.98); transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.sol__pop.is-on{ opacity:1; transform:none; }
.sol__pop-img{
  flex:1 1 50%; border-radius:14px; border:1px solid rgba(255,255,255,.08);
  background-size:cover; background-position:center;
}
.sol__pop-body{ flex:1 1 50%; display:flex; flex-direction:column; justify-content:center; gap:.9rem; }
.sol__pop-body strong{ font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.4rem,2.4vw,2.2rem); line-height:1.05; color:#fff; }
.sol__pop-body p{ color:var(--lt-blue); font-size:clamp(.95rem,1.3vw,1.12rem); line-height:1.5; }
.sol__pop-cta{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--orange); }
@media (max-width:560px){ .sol__pop{ flex-direction:column; } .sol__pop-img{ flex-basis:42%; } }

.sols__more{ text-align:center; color:var(--med-grey); font-size:1.05rem; margin-top:2.5rem; }
.sols__more::before{
  content:""; display:block; width:46px; height:2px; margin:0 auto 1.4rem;
  background:linear-gradient(90deg, var(--navy), var(--orange));
}

@media (max-width:860px){
  /* Balanced stacked layout: even side padding, and the body panel drops its
     desktop negative-margin bleed so heading + description line up flush with
     the card grid below them (previously it shifted out of the panel). */
  .sol{ grid-template-columns:1fr; gap:1.4rem; min-height:auto;
        padding:clamp(1.6rem,4vw,2.2rem); align-items:stretch; }
  .sol--flip .sol__body { order:1; }
  .sol--flip .sol__grid{ order:2; }
  .sol__body{ margin:0; padding:0; background:none; }
  .sol__kicker{ margin-bottom:.6rem; }
  .sol__name{ font-size:clamp(1.7rem,7vw,2.2rem); margin-bottom:.7rem; }
  .sol__desc{ max-width:100%; font-size:1rem; }
  /* keep the ghost index number as a subtle top-corner accent, not a big
     centered blob that unbalanced the panel */
  .sol::before{ font-size:6rem; top:0; left:auto; right:.6rem; transform:none; opacity:.8; }
  .sol::after{ display:none; }
}

/* ============================================================
   CONTACT / BOOK A DEMO
   ============================================================ */
.eyebrow-mono{
  font-family:var(--font-mono); font-size:.74rem; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase; color:var(--orange);
}
.contact{
  position:relative; z-index:1;
  max-width:min(1680px, 95vw); margin:0 auto;
  padding:clamp(4rem,11vh,8rem) clamp(1rem,2.5vw,2rem) clamp(5rem,12vh,9rem);
}
.contact__inner{
  display:grid; grid-template-columns:1fr 1fr; align-items:start;
  gap:clamp(2.5rem,6vw,5rem);
  /* frosted highlight box that lifts the section off the starfield */
  padding:clamp(2rem,4.5vw,3.6rem);
  border-radius:28px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 50px 110px -45px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.18);
}
.contact__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.2rem,5vw,4rem); line-height:1; letter-spacing:-.035em;
  color:var(--white); margin:1rem 0 1.2rem;
}
.contact__title span{ color:var(--orange); }
.contact__lede{ color:var(--lt-blue); font-size:clamp(1rem,1.4vw,1.15rem); max-width:42ch; }
.contact__meta{ list-style:none; margin-top:clamp(2rem,5vh,3rem); display:grid; gap:1rem; }
.contact__meta li{ font-size:.98rem; color:var(--lt-blue); }
.contact__meta span{
  display:block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--med-grey); margin-bottom:.2rem;
}
.contact__meta a{ color:var(--cyan); }
.contact__meta a:hover{ color:#fff; }

.contact__form{
  display:grid; gap:1.1rem;
  padding:clamp(1.6rem,3vw,2.4rem); border-radius:24px;
  background:#ffffff;                       /* white form card */
  border:1px solid rgba(0,71,143,.12);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.6);
}
.field{ display:grid; gap:.4rem; }
.field label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dark-slate); }
.field input, .field textarea, .field select{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink-text);
  padding:.85em 1em; border-radius:12px; resize:vertical;
  background:#f3f6fb; border:1px solid #d8e1e7;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:#9aa6b6; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; background:#fff; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,93,0,.16);
}
.phone-group{ display:flex; gap:.5rem; }
.phone-group input{ flex:1 1 auto; min-width:0; }
.contact__submit{ justify-self:start; margin-top:.4rem; }
.contact__note{ font-size:.9rem; color:var(--navy); min-height:1.2em; font-weight:500; }
.contact__note.is-error{ color:#c0392b; }

/* country/region picker (the input itself is the search field — type to filter) */
.cc-picker{ position:relative; flex:0 0 auto; width:8.5em; }
.cc-picker__input{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink-text);
  padding:.85em .9em; border-radius:12px; cursor:pointer;
  background:#f3f6fb; border:1px solid #d8e1e7;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.cc-picker__input:focus{
  outline:none; background:#fff; border-color:var(--orange); cursor:text;
  box-shadow:0 0 0 3px rgba(255,93,0,.16);
}
.cc-picker__panel{
  position:absolute; z-index:20; top:calc(100% + .4rem); left:0; width:17rem; max-width:80vw;
  background:#fff; border:1px solid #d8e1e7; border-radius:12px;
  box-shadow:0 24px 48px -16px rgba(0,0,0,.28); padding:.4rem;
}
.cc-picker__list{ list-style:none; margin:0; padding:0; max-height:14rem; overflow-y:auto; }
.cc-picker__item{
  display:flex; align-items:baseline; gap:.5em; padding:.5em .6em; border-radius:8px;
  font-size:.9rem; color:var(--ink-text); cursor:pointer;
}
.cc-picker__item:hover, .cc-picker__item.is-active{ background:#f3f6fb; }
.cc-picker__item .cc-flag{ font-size:1.05em; }
.cc-picker__item .cc-iso{ font-family:var(--font-mono); font-size:.72em; color:var(--med-grey); }
.cc-picker__item .cc-dial{ margin-left:auto; color:var(--med-grey); font-size:.85em; }
.cc-picker__empty{ padding:.6em; font-size:.85rem; color:var(--med-grey); }

@media (max-width:760px){ .contact__inner{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  position:relative; z-index:1;
  background:linear-gradient(180deg, #050a16, var(--near-black));
  border-top:1px solid rgba(255,255,255,.06);
  padding:clamp(3.5rem,8vh,6rem) clamp(1.2rem,5vw,4rem) 2rem;
}
.foot__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 2fr; gap:clamp(2.5rem,6vw,5rem);
}
.foot__brand .brand{ margin-bottom:1.2rem; }
.foot__tag{ color:var(--med-grey); font-size:.98rem; max-width:36ch; }
.foot__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.foot__col{ display:flex; flex-direction:column; gap:.7rem; }
.foot__col h4{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); font-weight:400; margin-bottom:.4rem;
}
.foot__col a{ color:var(--lt-blue); font-size:.95rem; transition:color .25s var(--ease); }
.foot__col a:hover{ color:#fff; }
.foot__bar{
  max-width:var(--maxw); margin:clamp(3rem,6vh,4rem) auto 0; padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-size:.85rem; color:var(--med-grey);
}
.foot__star{ color:var(--teal-grey); }
@media (max-width:760px){
  .foot__inner{ grid-template-columns:1fr; gap:2.5rem; }
  .foot__cols{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   CHATBOT — floating, client-side
   ============================================================ */
.bot{ position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:200; }
.bot__fab{
  position:relative; width:60px; height:60px; border-radius:50%; cursor:pointer; border:0;
  display:grid; place-items:center; padding:0;
  background:linear-gradient(160deg, var(--orange-soft), var(--orange));
  box-shadow:0 14px 34px -8px rgba(255,93,0,.6);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bot__fab:hover{ transform:translateY(-3px) scale(1.04); }
/* attention: pulsing ring + gentle bob until the user opens it once */
.bot.is-idle:not(.is-open) .bot__fab{ animation:botBob 2.8s ease-in-out infinite; }
.bot__fab::after{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; }
.bot.is-idle:not(.is-open) .bot__fab::after{ animation:botRing 2.2s ease-out infinite; }
@keyframes botRing{ 0%{ box-shadow:0 0 0 0 rgba(255,93,0,.55); } 70%{ box-shadow:0 0 0 16px rgba(255,93,0,0); } 100%{ box-shadow:0 0 0 0 rgba(255,93,0,0); } }
@keyframes botBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
/* unread badge */
.bot__badge{
  position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; padding:0 4px;
  display:none; place-items:center; border-radius:999px;
  background:#fff; color:var(--orange); font-size:.7rem; font-weight:700; line-height:1;
}
.bot.has-badge .bot__badge{ display:grid; }
.bot.is-open .bot__badge{ display:none; }
/* proactive greeting bubble */
.bot__nudge{
  position:absolute; right:74px; bottom:6px; width:max-content; max-width:230px;
  padding:.85em 1.9em .85em 1em; border-radius:14px; cursor:pointer;
  font-size:.86rem; line-height:1.4; color:var(--lt-blue);
  background:linear-gradient(160deg, #0c2143, #0a1426);
  border:1px solid rgba(120,170,230,.25);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.85);
  animation:nudgeIn .4s var(--ease);
}
.bot__nudge[hidden]{ display:none; }
.bot__nudge::after{   /* pointer toward the fab */
  content:""; position:absolute; right:-7px; bottom:20px; width:13px; height:13px;
  background:#0a1426; border-right:1px solid rgba(120,170,230,.25); border-bottom:1px solid rgba(120,170,230,.25);
  transform:rotate(-45deg);
}
.bot__nudge-x{ position:absolute; top:3px; right:6px; background:none; border:0; color:var(--med-grey); font-size:1rem; line-height:1; cursor:pointer; }
.bot__nudge-x:hover{ color:#fff; }
@keyframes nudgeIn{ from{ opacity:0; transform:translateX(10px); } }
@media (max-width:760px){ .bot__nudge{ display:none; } }
.bot__fab-icon{ width:34px; height:34px; transition:opacity .25s, transform .25s; }
.bot__fab-x{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:1.9rem; line-height:1; color:#fff; opacity:0; transform:rotate(-45deg); transition:opacity .25s, transform .25s;
}
.bot.is-open .bot__fab-icon{ opacity:0; transform:scale(.4); }
.bot.is-open .bot__fab-x{ opacity:1; transform:rotate(0); }

.bot__panel{
  position:absolute; right:0; bottom:74px;
  width:min(360px, 86vw); height:min(520px, 70vh);
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:20px;
  background:linear-gradient(180deg, #0c2143, #0a1426);
  border:1px solid rgba(120,170,230,.22);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  transform-origin:bottom right;
  animation:botPop .35s var(--ease);
}
.bot__panel[hidden]{ display:none; }
@keyframes botPop{ from{ opacity:0; transform:translateY(12px) scale(.94); } }
.bot__head{
  display:flex; align-items:center; gap:.7rem; padding:1rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(0,71,143,.25);
}
.bot__avatar{ width:36px; height:36px; }
.bot__head strong{ display:block; color:#fff; font-size:.98rem; }
.bot__head span{ font-family:var(--font-mono); font-size:.68rem; color:var(--cyan); letter-spacing:.04em; }
.bot__close{ margin-left:auto; background:none; border:0; color:var(--lt-blue); font-size:1.4rem; cursor:pointer; line-height:1; }
.bot__close:hover{ color:#fff; }

.bot__log{ flex:1; overflow-y:auto; padding:1.1rem; display:flex; flex-direction:column; gap:.7rem; }
.msg{ max-width:86%; padding:.7em .95em; border-radius:14px; font-size:.92rem; line-height:1.45; }
.msg--bot{ align-self:flex-start; background:rgba(120,170,230,.12); border:1px solid rgba(120,170,230,.18); color:var(--lt-blue); border-bottom-left-radius:4px; }
.msg--user{ align-self:flex-end; background:linear-gradient(160deg, var(--orange-soft), var(--orange)); color:#fff; border-bottom-right-radius:4px; }
.msg a{ color:var(--cyan); text-decoration:underline; }

.bot__chips{ display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1.1rem .6rem; }
.bot__chip{
  font-size:.78rem; color:var(--lt-blue); cursor:pointer;
  padding:.4em .8em; border-radius:999px;
  background:rgba(0,71,143,.3); border:1px solid rgba(120,170,230,.28);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.bot__chip:hover{ background:rgba(255,93,0,.18); border-color:rgba(255,138,61,.7); }
.bot__input{ display:flex; gap:.5rem; padding:.8rem 1.1rem 1.1rem; border-top:1px solid rgba(255,255,255,.07); }
.bot__input input{
  flex:1; font-family:var(--font-body); font-size:.92rem; color:var(--white);
  padding:.7em .9em; border-radius:12px;
  background:rgba(4,10,22,.6); border:1px solid rgba(120,170,230,.22);
}
.bot__input input:focus{ outline:none; border-color:rgba(255,138,61,.7); }
.bot__input button{
  flex:none; width:42px; border-radius:12px; cursor:pointer; border:0; color:#fff; font-size:1.1rem;
  background:linear-gradient(160deg, var(--orange-soft), var(--orange));
}

/* ---------- mobile nav toggle (hamburger) ---------- */
.nav__toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px; cursor:pointer;
  background:transparent; border:0; margin-left:.4rem;
  position:relative; z-index:2;
}
.nav__toggle span{ display:block; height:2px; width:100%; background:var(--white); border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s var(--ease); }
.nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.is-open .nav__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav__links-cta{ display:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .display{ font-size:clamp(1.9rem,7.4vw,3rem); }
  .lede{ font-size:1rem; }
}

@media (max-width:760px){
  /* NOTE: overflow-x clip is NOT applied to html/body here — it breaks
     ScrollTrigger pinning of the hero on mobile (esp. iOS Safari). The home
     page has no horizontal overflow anyway; the clip lives in subpage.css
     (subpages don't pin). */
  .nav{ padding:.9rem 1.1rem; }
  .nav__cta{ display:none; }
  .nav__toggle{ display:flex; }
  /* mobile smoothness: the fixed nav re-blurs every scroll frame → use a
     solid tint instead of backdrop-filter (also .contact glass panel) */
  .nav.is-scrolled{ background:rgba(6,9,20,.96); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .contact__inner{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  /* slide-down menu panel. NOTE: `.nav` has `transform:translateX(-50%)`,
     which makes it the containing block for this fixed-position child — so
     `bottom:0` here would resolve against .nav's OWN ~58px box, not the
     screen (tried that, it collapsed the whole panel into a sliver). Height
     has to stay content-driven (bottom:auto); the fix for "content taller
     than the screen" is a `max-height` in vh, which — unlike top/left/right/
     bottom — always resolves against the true viewport regardless of an
     ancestor's transform, so the panel scrolls internally past that cap
     instead of silently rendering off the bottom of the screen. */
  .nav__links{
    position:fixed; inset:0 0 auto 0; top:0; z-index:1;
    flex-direction:column; align-items:flex-start; gap:.4rem;
    padding:5.2rem clamp(1.1rem,5vw,2rem) 1.6rem;
    max-height:calc(100vh - 3rem);
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    background:rgba(4,6,15,.96); backdrop-filter:blur(16px) saturate(140%);
    border-bottom:1px solid rgba(255,255,255,.08);
    transform:translateY(-110%); opacity:0; pointer-events:none;
    transition:transform .45s var(--ease), opacity .35s var(--ease);
  }
  .nav.is-open .nav__links{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav__links a{ font-size:1.1rem; padding:.42rem 0; color:var(--white); }
  .nav__links a::after{ display:none; }
  .nav__links-cta{ display:inline-flex; margin-top:.5rem; }
  /* quick menu → stack the 3 columns and become an in-flow accordion */
  .sp-menu__panel{ flex-direction:column; gap:0; max-height:none; }
  .sp-menu__col{ min-width:0; }
  .sp-menu__col + .sp-menu__col{ margin:.35rem 0 0; padding:.6rem 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.07); }
  .sp-nav .sp-menu__panel{ max-height:min(70vh,460px); overflow-y:auto; }   /* sub-page nav stays a floating dropdown → keep it scrollable */
  .nav__links .sp-menu{ width:100%; }
  .nav__links .sp-menu__trigger{ font-size:1rem; padding:.42rem 0; color:var(--white); }
  /* the quick-menu already covers every product/solution — once it's open,
     the plain Products/Solutions/About/CTA links below it are redundant AND
     were the difference between fitting on-screen and needing to scroll on
     shorter phones, so they're hidden for as long as the accordion is open. */
  .nav__links .sp-menu:has(.sp-menu__item.is-open) ~ a,
  .nav__links .sp-menu:has(.sp-menu__item.is-open) ~ .nav__links-cta{ display:none; }
  .nav__links .sp-menu__panel{
    position:static; opacity:1; visibility:visible; transform:none; display:none;
    width:100%; margin:.2rem 0 .4rem; box-shadow:none;
    background:rgba(255,255,255,.03);
  }
  .nav__links .sp-menu__item.is-open .sp-menu__panel{ display:flex; transform:none; }
  /* same compact 2-col, single-line-item treatment as the sub-page quick-menu
     modal — shrinks the accordion enough that it (plus Products/Solutions/
     About/CTA below it) fits in nav__links' own scroll area without needing
     to scroll on a typical phone. */
  .nav__links .sp-menu__col{
    display:grid; grid-template-columns:1fr 1fr; gap:0 .55rem; min-width:0;
  }
  .nav__links .sp-menu__group{ grid-column:1/-1; padding:.22rem .1rem .18rem; font-size:.58rem; }
  .nav__links .sp-menu__panel a{
    display:flex; flex-flow:row wrap; align-items:baseline; column-gap:.35rem; row-gap:0;
    padding:.3rem .1rem; font-size:.76rem; font-weight:600; line-height:1.25;
  }
  .nav__links .sp-menu__panel a small{ font-size:.62rem; opacity:.7; font-weight:400; }

  .hero__cue{ display:none; }
  /* keep hero copy centered & wrapping inside the viewport */
  .hero__stages{ padding-left:1rem; padding-right:1rem; }
  .stage{ width:100%; max-width:100%; }
  .display{ overflow-wrap:anywhere; }
  .lede{ max-width:34ch; }
  /* longer capability eyebrow wraps cleanly on narrow phones (no h-scroll) */
  .stage .eyebrow{ flex-wrap:wrap; }
  /* …and balance the wrap so it can't orphan a fragment like "· AI" alone */
  .stage .eyebrow{ text-wrap:balance; justify-content:center; }
  /* sub-product grids: keep a compact 2-up tile grid on phones. A single
     full-width column turned each placeholder tile into a ~250px-tall empty
     block; 2-up compact tiles read like a proper product grid. */
  .sol__grid{ gap:.7rem; grid-template-columns:1fr 1fr; }
  .subcard{ aspect-ratio:5/4; }
  .subcard__label{ padding:.6rem .7rem; font-size:.86rem; }
}

/* Narrow phones (≈360px and under) */
@media (max-width:400px){
  .stage .eyebrow{ font-size:.68rem; letter-spacing:.1em; }
  .motion-lite .hero__stages{ padding-top:4.8rem; padding-bottom:16vh; }
}

@media (max-width:360px){
  .subcard__label{ font-size:.8rem; }
}

/* ============================================================
   REDUCED MOTION — everything visible & still
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .hero{ height:auto; min-height:0; padding:8rem 1.2rem 4rem; }
  .hero__stages{ position:relative; display:block; }
  .stage{ opacity:1!important; visibility:visible!important; margin:0 auto 4rem; }
  .hero__cue-line i{ animation:none; }
  .reveal{ opacity:1; transform:none; }
}

/* Touch/mobile (.motion-lite): the hero is held on screen by NATIVE
   position:sticky (reliable on iOS Safari — unlike ScrollTrigger's JS pin, which
   desyncs when the address bar shows/hides). .hero becomes a tall scroll TRACK
   and .hero__stick (a wrapper js/main.js injects around the hero contents) sticks
   full-screen; a passive scroll listener drives the rocket zoom + the 3-headline
   cross-fade (GPU transforms only, the video just loops underneath — no frame
   seeking, so it stays smooth). Reveals below are shown without animating. */
/* vh (NOT svh): vh is the stable/large viewport on iOS & Android, so the track
   and stick don't resize (and the pinned canvas doesn't hitch) when the mobile
   URL bar collapses mid-scroll. svh here caused a re-layout on every bar hide. */
.motion-lite .hero{ height:210vh; min-height:0; overflow:visible; }
.motion-lite .hero__stick{ position:sticky; top:0; height:100vh; overflow:hidden; }
/* ---- TOUCH BACKDROP: NETWORK PHOTO + SLOW DRIFT ------------------------
   assets/hero-mobile-network.webp (30KB) sits behind a darkening scrim so
   the headline stays legible; the image drifts on one slow, autonomous CSS
   keyframe (transform only, own compositor layer) — small, ambient motion,
   never a per-scroll cost. Desktop still uses the <video>. */
.motion-lite .hero__video{ display:none; }        /* also stops the poster fetch */
.hero-scene{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:#04060f; /* fallback while the image decodes */
}
.hs__glow{
  position:absolute; inset:-8%; z-index:0; will-change:transform;
  background:url("../assets/hero-mobile-network.webp") center/cover no-repeat;
  animation:hsGlowDrift 22s ease-in-out infinite alternate;
}
.hero-scene::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(4,6,15,.35) 0%, rgba(5,9,26,.3) 38%, rgba(6,21,48,.55) 76%, rgba(7,26,58,.78) 100%);
}
@keyframes hsGlowDrift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(-2%,-2%,0) scale(1.07); }
}
@media (prefers-reduced-motion:reduce){
  .hs__glow{ animation:none; }
}

/* ---- SCROLL RAIL: a thin fill line, not a counter or dots ---------------
   Once the headline was the only thing that moved, a pause mid-scroll read
   as "stuck". This answers that WITHOUT a label or a number — a hairline
   at the screen edge simply fills as the hero's own scroll progress `t`
   advances (`transform:scaleY`, set in js/main.js, no layout cost), the
   same non-verbal cue a native reading-progress bar gives. */
.hero__rail{ display:none; }
.motion-lite .hero__rail{
  display:block; position:absolute; z-index:6; left:0; top:0; bottom:0; width:2px;
  background:rgba(255,255,255,.12); overflow:hidden;
}
.hero__rail i{
  position:absolute; inset:0; transform:scaleY(0); transform-origin:top; will-change:transform;
  background:linear-gradient(180deg, var(--orange), rgba(255,145,60,.65));
}

/* touch: headlines are DISCRETE stage swaps driven by class toggles, so every
   animation below runs on the compositor via CSS transitions with zero
   per-frame layout work */
.motion-lite .hero__stages{
  align-items:center;
  padding:5.4rem 1.15rem 20vh;   /* top = nav clearance, bottom = craft's band */
}
.motion-lite .stage{
  /* .stage carries text-shadow:0 2px 30px — a 30px-radius blur under display
     type. Cross-fading THAT re-rasterises blurred glyphs every frame, which is
     what made the headline swap stutter on the phone. The .motion-lite scrim
     is already heavier, so the type stays legible without it. */
  text-shadow:none;
  /* translate3d (not translateY) + will-change keeps each stage on its own
     layer, so the swap is a compositor cross-fade with no glyph re-raster */
  transform:translate3d(0,22px,0);
  will-change:opacity, transform;
  transition:opacity .38s ease-out, transform .38s ease-out;
}
.motion-lite .stage.is-active{ opacity:1; visibility:visible; transform:translate3d(0,0,0); }
.motion-lite .stage.is-past{ transform:translate3d(0,-22px,0); }
/* no backdrop zoom on touch at all now — see .hero-scene above for why, and
   the <video> is display:none here anyway */
/* the cue's job is done once the progress dots take over — fades out on
   the first bit of scroll instead of sitting there unchanged for 2 track
   heights (see hero.classList.add('is-launched') in js/main.js) */
.motion-lite .hero__cue{ transition:opacity .45s var(--ease); }
.motion-lite .hero.is-launched .hero__cue{ opacity:0; pointer-events:none; }
/* NO outro blackout on touch — see the note above .motion-lite .hero. The
   #fadeout overlay stays at its base opacity:0 here; desktop still drives it
   to .94 from its own GSAP timeline, which is unaffected by this. */
.motion-lite .hero__fadeout{ display:none; }
.motion-lite .hero__cta--m{ display:flex; margin-top:1.6rem; }
.motion-lite .hero__cue-line i{ animation:none; }
.motion-lite .reveal{ opacity:1; transform:none; }
/* backdrop-filter over the hero canvas re-blurs on EVERY canvas blit on
   Android — solid fills instead while the scrub is the thing under them */
.motion-lite .btn--ghost{
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:rgba(16,22,38,.55);
}
.motion-lite .nav.is-scrolled{
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:rgba(4,6,15,.88);
}
/* stronger scrim so white hero type stays crisp on the phone */
.motion-lite .hero__scrim{
  background:linear-gradient(180deg, rgba(4,6,15,.5) 0%, rgba(4,6,15,.32) 42%, rgba(4,6,15,.72) 100%);
}

/* mobile-only hero CTA (in stage 0); hidden on desktop where stages cross-fade */
.hero__cta--m{ display:none; }