/* =============================================================================
   VENTRA SCIENCES — SCROLL-DRIVEN HERO  (ported from the live homepage)
   Source: ventrasciences.com homepage, inline <style> block (theme v4.47.0 era)

   SCOPING CONTRACT
   ----------------
   Every rule below is scoped to `#heroStage` (the hero <section>), so this file
   cannot restyle a host page. Deviations from the source, all deliberate:
     * `:root{--sky…}`  ->  `#heroStage{--sky…}`   (custom props no longer global)
     * `*{margin:0;padding:0;box-sizing:border-box}` -> `#heroStage, #heroStage *`
     * `html{scroll-behavior:smooth}` and the bare `body{font-family;background}`
       rule are DROPPED — the host page owns those.
     * `body.home{font-size:16px!important}` is DROPPED (a WordPress-only guard
       that would resize the entire host page).
     * every `@keyframes` is namespaced `vh-*` (source names `rise`, `ping`,
       `wheel`, `caret`, `sweep` are far too generic to leave global).
     * rules for `.shop`, `.pcard`, `.site-footer`, `.proof`, `.ticker`,
       `.pillar`/`.pillar-pin`/`.pillar-copy` are DROPPED — those sections are
       not part of the hero (and `.pillar*`/`.proof` are dead CSS on the live
       site too: no matching markup exists anywhere in the page).
       `.tk-word`/`.tk-cursor` ARE kept — the hero's tickers depend on them.

   TWO RULES DELIBERATELY LEFT UNSCOPED (they must sit on <html>/<body>):
     * `html.vsc-anim-lock, body.vsc-anim-lock` — the scroll lock.
     * `body.at-hero` / `body.shop-open` state classes, which now read
       `body.at-hero #heroStage .site-header` etc.

   Asset paths are rewritten to `assets/home/<file>`.
   ============================================================================= */

#heroStage{
  --white:#FFFFFF; --ivory:#F5F6F7;
  --midnight:#082040; --blue-secondary:#1E3A6B;
  --sky:#0EA5E9; --sky-hover:#38BDF8; --sky-light:#38BDF8; --sky-soft:#E0F2FE;
  --text-muted:#6B7A94; --border:#E5EAF0;
  --grotesk:'Onest',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --inter:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
#heroStage, #heroStage *, #heroStage *::before, #heroStage *::after{margin:0;padding:0;box-sizing:border-box;}

/* Hard scroll-lock while the intro animation runs. Added by JS once a controller arms
   (so it degrades safely — if JS never loads, the page scrolls normally instead of locking).
   The shop is a position:fixed overlay that scrolls internally, so native page scroll is
   never needed on the homepage; this just stops a fast flick from scrolling past the animation. */
html.vsc-anim-lock, body.vsc-anim-lock{ overflow:hidden !important; overscroll-behavior:none !important; height:100%; }
#heroStage img{max-width:100%;display:block;}
#heroStage a{color:inherit;text-decoration:none;}

/* ============================ HERO ============================ */
#heroStage{ position:relative; width:100%; height:100vh; background:#04101e; }
#heroStage .hero{ position:sticky; top:0; width:100%; height:100vh; height:100svh; min-height:660px; overflow:hidden; isolation:isolate; background:#0a1626; }
#heroStage .hero-fg{ will-change:opacity; transition:opacity .55s ease; }
#heroStage.diving .hero-fg{ opacity:0; pointer-events:none; }

/* background image (parallax target) */
#heroStage .hero-bg{ position:absolute; inset:-3% ; z-index:0; background-image:url('home/hero-desktop.jpg');
  background-size:cover; background-position:left center; will-change:transform; transition:transform .25s ease-out; }

/* scrims: darken left for text + subtle bottom vignette */
#heroStage .hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,16,30,.82) 0%, rgba(6,16,30,.55) 28%, rgba(6,16,30,.12) 50%, rgba(6,16,30,0) 66%),
    linear-gradient(180deg, rgba(6,16,30,.45) 0%, rgba(6,16,30,0) 22%, rgba(6,16,30,0) 70%, rgba(6,16,30,.45) 100%); }

/* animated light sweep (god ray) */
#heroStage .light-sweep{ position:absolute; top:-30%; left:35%; width:42%; height:160%; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, transparent 0%, rgba(160,200,235,.10) 45%, rgba(200,225,245,.16) 50%, rgba(160,200,235,.10) 55%, transparent 100%);
  transform:rotate(8deg); mix-blend-mode:screen; animation:vh-sweep 11s ease-in-out infinite; filter:blur(6px); }
@keyframes vh-sweep { 0%,100%{opacity:.35; transform:translateX(-12%) rotate(8deg);} 50%{opacity:.85; transform:translateX(12%) rotate(8deg);} }

/* drifting mist */
#heroStage .mist{ position:absolute; z-index:1; pointer-events:none; border-radius:50%;
  background:radial-gradient(closest-side, rgba(180,205,230,.22), transparent 72%); filter:blur(14px); }
#heroStage .mist.m1{ width:55vw; height:26vh; left:30%; bottom:8%; opacity:.5; animation:vh-mist1 38s linear infinite; }
#heroStage .mist.m2{ width:42vw; height:20vh; right:-6vw; top:24%; opacity:.35; animation:vh-mist2 50s linear infinite; }
@keyframes vh-mist1 { 0%{transform:translateX(-30%);} 100%{transform:translateX(120%);} }
@keyframes vh-mist2 { 0%{transform:translateX(20%);} 100%{transform:translateX(-130%);} }

/* shimmer particles */
#heroStage .particles{ position:absolute; inset:0; z-index:2; pointer-events:none; }
#heroStage .particles i{ position:absolute; width:3px; height:3px; border-radius:50%;
  background:rgba(224,242,254,0.9); box-shadow:0 0 7px rgba(120,190,235,.9);
  animation:vh-twinkle var(--d,6s) ease-in-out infinite; opacity:0; }
@keyframes vh-twinkle { 0%,100%{opacity:0; transform:translateY(0);} 50%{opacity:.85; transform:translateY(-9px);} }

/* ============================ HEADER ============================ */
/* DESKTOP: real logo FAR-LEFT · nav (Home/Shop/COA's/Contact) centered · account + cart FAR-RIGHT.
   Matches the sitewide universal header (.vsc-uhdr) layout but with a TRANSPARENT background so the
   animated hero shows through. */
#heroStage .site-header{ position:fixed; top:0; left:0; right:0; z-index:60; opacity:0; pointer-events:none; transition:opacity .4s ease;
  background:transparent;
  display:flex; align-items:center;
  padding:calc(24px + env(safe-area-inset-top)) clamp(20px,4vw,56px) 24px; color:#fff; }
body.at-hero #heroStage .site-header, body.shop-open #heroStage .site-header{ opacity:1; pointer-events:auto; }
#heroStage .menu-btn{ display:none; }
#heroStage .brand{ flex:1; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; line-height:1; text-decoration:none; }
#heroStage .brand .b-name, #heroStage .brand .b-sub{ display:none; }
#heroStage .brand-logo-img{ display:block; height:34px; width:auto; }
#heroStage .hdr-nav{ flex:0 0 auto; display:flex; align-items:center; gap:clamp(20px,2.5vw,40px); }
#heroStage .hdr-nav a{ font-family:var(--grotesk); font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#fff; opacity:.85; text-decoration:none; white-space:nowrap; transition:opacity .2s; }
#heroStage .hdr-nav a:hover{ opacity:1; }
#heroStage .hdr-right{ flex:1; display:flex; align-items:center; justify-content:flex-end; gap:18px; }
#heroStage .acct-btn{ display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; opacity:.9; transition:opacity .2s; }
#heroStage .acct-btn:hover{ opacity:1; }
#heroStage .acct-btn svg{ width:23px; height:23px; }
#heroStage .cart-btn{ position:relative; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#fff; cursor:pointer; transition:background .2s,border-color .2s; }
#heroStage .cart-btn:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); }
#heroStage .cart-btn svg{ width:19px; height:19px; }
#heroStage .cart-count{ position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--sky); color:#04162c; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid #0a1626; font-family:var(--grotesk); }
/* mobile menu = the real .vsv3-drawer (styled by the loaded parent-theme CSS). Keep it above the homepage header. */
#heroStage .vsv3-drawer{ z-index:2147480000 !important; }
#heroStage .vsv3-drawer-overlay{ z-index:2147479999 !important; }

/* ============================ HERO COPY (top-left) ============================ */
#heroStage .hero-inner{ position:relative; z-index:20; height:100%; max-width:1440px; margin:0 auto;
  padding:0 clamp(20px,4vw,56px); display:flex; align-items:center; }
#heroStage .copy{ max-width:540px; color:#fff; }
@media(min-width:1600px){
  #heroStage .hero-inner{ max-width:none; align-items:flex-start; padding-top:clamp(88px,9vh,150px); padding-left:clamp(56px,4.5vw,120px); }
  #heroStage .copy{ max-width:640px; }
}
#heroStage .eyebrow{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; font-family:var(--grotesk); font-size:12px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(206,222,238,.5); margin-bottom:26px; }
#heroStage .eyebrow .dot{ opacity:.55; }
#heroStage .h1{ font-family:var(--grotesk); font-size:clamp(38px,4.6vw,78px); font-weight:400; line-height:1.06; letter-spacing:-.022em; text-wrap:balance; }
#heroStage .h1 .accent{ background:linear-gradient(120deg,var(--sky-light) 0%, var(--sky) 70%, #7dd3fc 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#heroStage .rule{ width:100%; max-width:520px; height:1px; background:linear-gradient(90deg,rgba(170,200,228,.45),rgba(170,200,228,0)); margin:28px 0 26px; }
#heroStage .tagline{ font-family:var(--grotesk); font-size:clamp(21px,2.5vw,40px); font-weight:400; color:#fff; letter-spacing:-.015em; line-height:1.14; }
#heroStage .desc{ font-family:var(--grotesk); font-size:clamp(14.5px,1.3vw,20px); font-weight:400; line-height:1.62; color:rgba(226,236,246,.72); max-width:clamp(450px,32vw,580px); margin-top:18px; text-wrap:pretty; }
#heroStage .cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
#heroStage .btn{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; font-family:var(--grotesk); font-size:12.5px; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase; padding:15px 28px; border-radius:100px; cursor:pointer; transition:all .25s ease; border:1px solid transparent; }
#heroStage .btn-primary{ background:#fff; color:var(--midnight); }
#heroStage .btn-primary:hover{ background:var(--sky-soft); transform:translateY(-2px); box-shadow:0 16px 40px rgba(4,16,32,.45); }
#heroStage .btn-primary svg{ width:16px; height:16px; transition:transform .25s; }
#heroStage .btn-primary:hover svg{ transform:translateX(4px); }
#heroStage .btn-outline{ background:rgba(255,255,255,.04); color:#fff; border-color:rgba(255,255,255,.38); }
#heroStage .btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.1); }
#heroStage .fine{ margin-top:30px; font-family:var(--grotesk); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(200,218,235,.6); display:flex; gap:0; flex-wrap:wrap; align-items:center; }
#heroStage .fine span{ display:inline-flex; align-items:center; }
#heroStage .fine span:not(:last-child)::after{ content:'·'; margin:0 12px; opacity:.5; }

/* entrance stagger */
#heroStage .reveal{ opacity:0; transform:translateY(26px); animation:vh-rise .9s cubic-bezier(.16,.84,.44,1) forwards; }
#heroStage .copy .reveal:nth-child(1){ animation-delay:.15s; }
#heroStage .copy .reveal:nth-child(2){ animation-delay:.27s; }
#heroStage .copy .reveal:nth-child(3){ animation-delay:.39s; }
#heroStage .copy .reveal:nth-child(4){ animation-delay:.5s; }
#heroStage .copy .reveal:nth-child(5){ animation-delay:.6s; }
#heroStage .copy .reveal:nth-child(6){ animation-delay:.7s; }
@keyframes vh-rise { to{opacity:1; transform:none;} }

/* ============================ VIAL HOTSPOTS ============================ */
#heroStage .hotspots{ position:absolute; inset:0; z-index:15; }
#heroStage .hotspot{ position:absolute; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#heroStage .hotspot .glow{ position:absolute; left:50%; top:54%; width:230%; height:150%; transform:translate(-50%,-50%) scale(.6);
  background:radial-gradient(closest-side, rgba(56,189,248,.42), rgba(56,189,248,.12) 45%, transparent 72%);
  opacity:0; transition:opacity .4s ease, transform .4s ease; pointer-events:none; mix-blend-mode:screen; }
#heroStage .hotspot .ring{ position:absolute; left:50%; bottom:-10px; transform:translateX(-50%) scaleX(1);
  width:96%; height:26px; border-radius:50%; border:1.5px solid rgba(120,200,245,.65);
  background:radial-gradient(closest-side, rgba(120,200,245,.30), transparent 72%);
  opacity:0; transition:opacity .35s ease; pointer-events:none; }
#heroStage .hotspot .marker{ position:absolute; left:50%; top:-14px; transform:translateX(-50%); width:30px; height:30px; pointer-events:none; }
#heroStage .hotspot .marker::before{ content:''; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(160,210,245,.6);
  animation:vh-ping 2.6s ease-out infinite; }
#heroStage .hotspot .marker::after{ content:''; position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:50%;
  transform:translate(-50%,-50%); background:var(--sky-light); box-shadow:0 0 10px rgba(56,189,248,.9); }
@keyframes vh-ping { 0%{transform:scale(.4); opacity:.9;} 80%,100%{transform:scale(1.4); opacity:0;} }
#heroStage .hotspot:hover .glow{ opacity:1; transform:translate(-50%,-50%) scale(1); }
#heroStage .hotspot:hover .ring{ opacity:1; }
#heroStage .hotspot:hover .marker{ opacity:0; }

/* tooltip card */
#heroStage .tip{ position:absolute; left:50%; bottom:calc(100% + 16px); transform:translate(-50%,8px); width:228px;
  background:rgba(10,22,40,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(120,190,235,.28); border-radius:14px; padding:15px 16px; color:#fff;
  opacity:0; visibility:hidden; transition:opacity .3s ease, transform .3s cubic-bezier(.16,.84,.44,1); pointer-events:none;
  box-shadow:0 20px 50px rgba(2,10,22,.55); }
#heroStage .tip::after{ content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:7px solid transparent; border-top-color:rgba(10,22,40,.82); }
#heroStage .hotspot:hover .tip{ opacity:1; visibility:visible; transform:translate(-50%,0); }
#heroStage .tip .t-row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
#heroStage .tip .t-name{ font-family:var(--grotesk); font-size:16px; font-weight:700; letter-spacing:-.01em; }
#heroStage .tip .t-dose{ font-family:var(--grotesk); font-size:11px; font-weight:600; color:var(--sky-light); letter-spacing:.04em; }
#heroStage .tip .t-bar{ height:1px; background:rgba(255,255,255,.12); margin:11px 0 10px; }
#heroStage .tip .t-meta{ display:flex; justify-content:space-between; align-items:center; }
#heroStage .tip .t-purity{ font-size:11.5px; color:rgba(224,242,254,.72); font-family:var(--inter); }
#heroStage .tip .t-purity b{ color:#fff; font-weight:700; }
#heroStage .tip .t-coa{ font-family:var(--grotesk); font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--sky-light); display:inline-flex; align-items:center; gap:5px; text-transform:uppercase; }
#heroStage .tip .t-coa svg{ width:11px; height:11px; }

/* scroll cue */
#heroStage .scroll-cue{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:20;
  display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(220,235,250,.6);
  font-family:var(--grotesk); font-size:10px; letter-spacing:.24em; text-transform:uppercase; animation:vh-rise 1s 1.1s ease both; }
#heroStage .scroll-cue .mouse{ width:22px; height:34px; border:1.5px solid rgba(220,235,250,.45); border-radius:12px; position:relative; }
#heroStage .scroll-cue .mouse::after{ content:''; position:absolute; left:50%; top:6px; transform:translateX(-50%); width:3px; height:6px; border-radius:2px; background:#fff; animation:vh-wheel 1.8s ease-in-out infinite; }
@keyframes vh-wheel { 0%{opacity:0; transform:translate(-50%,0);} 40%{opacity:1;} 100%{opacity:0; transform:translate(-50%,10px);} }

/* ============================ DIVE VIDEO (overlay that takes over the hero on scroll) ============================ */
#heroStage .dive-video{ position:absolute; top:-3%; left:-3%; width:106%; height:106%; object-fit:cover; object-position:left center; background:#04101e; opacity:0; z-index:26; pointer-events:none; display:block; transition:opacity .6s ease; }
#heroStage .loop-video{ position:absolute; top:-3%; left:-3%; width:106%; height:106%; object-fit:cover; object-position:left center; background:#04101e; opacity:0; z-index:26; pointer-events:none; display:block; transition:opacity .6s ease; }
#heroStage.dive-ended .loop-video{ opacity:1; }
#heroStage .dive-vignette{ position:absolute; inset:0; z-index:27; pointer-events:none; opacity:0; transition:opacity .6s ease;
  background:radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(2,8,18,.45)); }

/* ============================ (swap overlay disabled — kept for later) ============================ */
#heroStage.diving .dive-video{ opacity:1; }
#heroStage.diving .dive-vignette{ opacity:1; }

/* ============================ FREEZE VIDEO (iceberg → rise → QR reveal) ============================ */
/* user-generated video; first frame == loop's last frame, last frame == QR ice scene */
#heroStage .freeze-video{ position:absolute; top:-3%; left:-3%; width:106%; height:106%; object-fit:cover; object-position:left center;
  background:#04101e; opacity:0; z-index:30; pointer-events:none; display:block; transition:opacity .45s ease; }
#heroStage.freezing .freeze-video{ opacity:1; }
/* crisp static hold of the video's final QR frame, faded in on 'ended' so the resting state never depends on a paused video */
#heroStage .qr-rest{ position:absolute; top:-3%; left:-3%; width:106%; height:106%; object-fit:cover; object-position:left center;
  background:url('home/freeze-last.jpg') left center/cover no-repeat; opacity:0; z-index:31; pointer-events:none; transition:opacity .4s ease; }
#heroStage.iced-rest .qr-rest{ opacity:1; }
/* ===== DESCEND VIDEO (crane down from QR scene → cliff/sky) ===== */
#heroStage .descend-video{ position:absolute; top:-3%; left:-3%; width:106%; height:106%; object-fit:cover; object-position:left center;
  background:#04101e; opacity:0; z-index:35; pointer-events:none; display:block; transition:opacity .45s ease; }
#heroStage.descending .descend-video{ opacity:1; }
#heroStage .descend-rest{ position:absolute; top:-3%; left:-3%; width:106%; height:106%; object-fit:cover; object-position:left center;
  background:url('home/pillar-start.jpg') left center/cover no-repeat; opacity:0; z-index:36; pointer-events:none; transition:opacity .4s ease; }
#heroStage.descended .descend-rest{ opacity:1; }
/* left-side copy on the cliff/sky landing scene */
#heroStage .cliff-copy{ position:absolute; left:clamp(20px,5.5vw,80px); top:50%; z-index:41; max-width:470px; color:#fff;
  opacity:0; transform:translateY(calc(-50% + 22px)); pointer-events:none;
  transition:opacity .9s ease .25s, transform .9s cubic-bezier(.16,.84,.44,1) .25s; }
#heroStage.descended .cliff-copy{ opacity:1; transform:translateY(-50%); pointer-events:auto; }
#heroStage .cliff-copy .cc-eyebrow{ font-family:var(--grotesk); font-size:clamp(12px,.95vw,15px); font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:20px; }
#heroStage .cliff-copy h2{ font-family:var(--grotesk); font-weight:500; font-size:clamp(44px,5.4vw,82px); line-height:1.04; letter-spacing:-.025em; white-space:nowrap; }
#heroStage .cliff-copy p{ font-family:var(--grotesk); font-weight:400; font-size:clamp(16px,1.4vw,21px); line-height:1.62; color:rgba(255,255,255,.86); margin-top:22px; max-width:clamp(410px,30vw,540px); text-wrap:pretty; }
#heroStage .cc-cta{ display:inline-flex; align-items:center; gap:10px; margin-top:30px; padding:15px 30px; border-radius:100px; white-space:nowrap;
  background:#fff; color:var(--midnight); font-family:var(--grotesk); font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; cursor:pointer;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease; }
#heroStage .cc-cta svg{ width:16px; height:16px; transition:transform .25s ease; }
#heroStage .cc-cta:hover{ background:var(--sky-soft); transform:translateY(-2px); box-shadow:0 16px 40px rgba(4,16,32,.4); }
#heroStage .cc-cta:hover svg{ transform:translateX(4px); }
/* second left-copy state: Reliability box, crossfades in at the 4-vial end */
#heroStage .cliff-copy.cliff-copy2{ opacity:0; pointer-events:none; }
#heroStage.descended .cliff-copy.cliff-copy2{ opacity:0; }
#heroStage .rel-list{ margin-top:30px; display:flex; flex-direction:column; gap:clamp(18px,1.6vw,26px); }
#heroStage .rel-item{ position:relative; padding-left:22px; }
#heroStage .rel-item::before{ content:''; position:absolute; left:0; top:10px; width:7px; height:7px; border-radius:50%; background:var(--sky-light); box-shadow:0 0 10px rgba(56,189,248,.7); }
#heroStage .rel-h{ font-family:var(--grotesk); font-weight:600; font-size:clamp(17px,1.6vw,23px); color:#fff; letter-spacing:-.01em; }
#heroStage .rel-p{ font-family:var(--grotesk); font-weight:400; font-size:clamp(14.5px,1.25vw,18px); line-height:1.55; color:rgba(255,255,255,.78); margin-top:5px; max-width:clamp(380px,28vw,500px); text-wrap:pretty; }

#heroStage .pillar-video{ position:absolute; top:-3%; left:-3%; width:106%; height:106%; object-fit:cover; object-position:left center; background:#0b2c54; display:block; opacity:0; z-index:37; pointer-events:none; transition:opacity 0s; }
/* crisp resting frame at the END of the scrub (4 vials) */
#heroStage .pillar-end-rest{ position:absolute; top:-3%; left:-3%; width:106%; height:106%; object-fit:cover; object-position:left center;
  background:url('home/pillar-end.jpg') left center/cover no-repeat; opacity:0; z-index:39; pointer-events:none; transition:opacity .45s ease; }
/* iceblock transition video (4-vial frame → new ice-block scene slides in from left) */
#heroStage .iceblock-video{ position:absolute; top:-3%; left:-3%; width:106%; height:106%; object-fit:cover; object-position:left center;
  background:#0b2c54; opacity:0; z-index:40; pointer-events:none; display:block; transition:opacity .4s ease; }
#heroStage.iceblocking .iceblock-video{ opacity:1; }
#heroStage.iceblocking .cliff-copy{ opacity:0 !important; transition:opacity .3s ease; pointer-events:none; }

/* ice-pillar progress rail */
#heroStage .pillar-rail{ position:absolute; right:clamp(20px,3vw,48px); top:20vh; bottom:20vh; width:3px; border-radius:3px; background:rgba(255,255,255,.22); z-index:37; opacity:0; transition:opacity .6s ease .25s; }
#heroStage.descended .pillar-rail{ opacity:1; }
#heroStage .pr-fill{ position:absolute; left:0; top:0; width:100%; height:0; border-radius:3px; background:linear-gradient(180deg,#fff,var(--sky-light)); box-shadow:0 0 10px rgba(56,189,248,.6); transition:height .12s linear; }
#heroStage .pr-tick{ position:absolute; left:50%; width:11px; height:11px; border-radius:50%; transform:translate(-50%,-50%); background:#0b2c54; border:2px solid rgba(255,255,255,.55); }
#heroStage .pr-tick.on{ background:var(--sky-light); border-color:#fff; box-shadow:0 0 10px rgba(56,189,248,.8); }
#heroStage .pr-label{ position:absolute; right:24px; top:50%; transform:translateY(-50%); white-space:nowrap; font-family:var(--grotesk); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); }

/* fade the QR callouts/scene out the instant the descend takes over */
#heroStage.descending .qr-copy, #heroStage.descending .qt-box, #heroStage.descending .qp-box, #heroStage.descending .qr-anno, #heroStage.descending .qr-cta, #heroStage.descending .qr-scrim{ opacity:0 !important; transition:opacity .3s ease; pointer-events:none; }
/* soft scrim so the top-left copy stays legible over the bright ice */
#heroStage .qr-scrim{ position:absolute; inset:0; z-index:32; pointer-events:none; opacity:0; transition:opacity .2s ease;
  background:linear-gradient(105deg, rgba(4,16,30,.6) 0%, rgba(4,16,30,.34) 26%, rgba(4,16,30,0) 50%); }
#heroStage.iced-rest .qr-scrim{ opacity:1; }
/* top-left copy on the resting QR ice scene */
#heroStage .qr-copy{ position:absolute; top:0; left:0; z-index:33; width:max-content; max-width:380px; color:#fff;
  opacity:0; transform:translateY(14px); pointer-events:none; text-shadow:0 2px 20px rgba(2,10,22,.55);
  transition:opacity .22s ease, transform .22s cubic-bezier(.16,.84,.44,1); }
#heroStage.iced-rest .qr-copy{ opacity:1; transform:none; }
/* 45deg connector line pointing from the copy to the QR vial */
#heroStage .qr-anno{ position:absolute; width:0; height:0; z-index:33; pointer-events:none; opacity:0; transition:opacity .6s ease .35s; }
#heroStage.iced-rest .qr-anno:not(.qt-anno):not(.qp-anno){ opacity:1; }
#heroStage.tested-in .qt-anno{ opacity:1; }
#heroStage.premium-in .qp-anno{ opacity:1; }
#heroStage .qr-anno .qa-dot{ position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%;
  background:var(--sky-light); box-shadow:0 0 0 5px rgba(56,189,248,.16), 0 0 16px rgba(56,189,248,.9); }
#heroStage .qr-anno .qa-dot::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(120,200,245,.55); animation:vh-annoPing 2.6s ease-out infinite; }
#heroStage .qr-anno .qa-bar{ position:absolute; left:0; top:0; height:1.5px; transform-origin:left center; rotate:-135deg; scale:0 1;
  transition:scale .85s cubic-bezier(.16,.84,.44,1) .3s; box-shadow:0 0 8px rgba(56,189,248,.7);
  background:linear-gradient(90deg, rgba(120,200,245,.95), rgba(120,200,245,.12)); }
#heroStage.iced-rest .qr-anno:not(.qt-anno):not(.qp-anno) .qa-bar{ scale:1 1; }
#heroStage.tested-in .qt-anno .qa-bar{ scale:1 1; }
#heroStage.premium-in .qp-anno .qa-bar{ scale:1 1; }
/* View Testing CTA, follows the vial, sits below it */
#heroStage .qr-cta{ position:absolute; top:0; left:0; z-index:34; display:inline-flex; align-items:center; gap:10px;
  transform:translateY(8px); padding:11px 22px; border-radius:100px; white-space:nowrap;
  border:1px solid rgba(120,200,245,.5); background:rgba(10,22,40,.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#fff; font-family:var(--grotesk); font-size:12.5px; font-weight:500; letter-spacing:.03em; cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity .6s ease .4s, background .25s ease, border-color .25s ease, transform .25s ease;
  animation:vh-shopGlow 3s ease-in-out infinite; }
#heroStage .qr-cta svg{ width:13px; height:13px; flex:0 0 auto; transition:transform .25s ease; }
#heroStage .qr-cta:hover{ background:rgba(14,165,233,.26); transform:translateY(-2px); }
#heroStage .qr-cta:hover svg{ transform:translateX(4px); }
#heroStage.iced-rest .qr-cta{ opacity:1; pointer-events:auto; transform:translateY(0); }
#heroStage .qr-copy .qc-eyebrow{ font-family:var(--grotesk); font-size:clamp(12px,.9vw,15px); font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--sky-light); margin-bottom:16px; }
#heroStage .qr-copy h2{ font-family:var(--grotesk); font-weight:400; font-size:clamp(46px,3vw,62px); line-height:1.03; letter-spacing:-.02em; }
#heroStage .qr-copy p{ font-family:var(--grotesk); font-weight:400; font-size:clamp(15.5px,1.05vw,19px); line-height:1.5; color:rgba(222,234,246,.82); margin-top:15px; max-width:clamp(330px,24vw,420px); text-wrap:pretty; }
/* third-party tested — separate callout box (right side), its own connector line down-left to the vial */
#heroStage .qt-box{ position:absolute; top:0; left:0; z-index:33; width:max-content; max-width:380px; text-align:right;
  opacity:0; transform:none; pointer-events:none; text-shadow:0 2px 20px rgba(2,10,22,.55);
  transition:opacity .12s ease; }
#heroStage.tested-in .qt-box{ opacity:1; transform:none; pointer-events:auto; }
#heroStage .qt-box .qt-head{ font-family:var(--grotesk); font-weight:400; font-size:clamp(46px,3vw,62px); line-height:1.03; letter-spacing:-.02em; color:#fff; }
#heroStage .qt-box .qt-label{ font-family:var(--grotesk); font-size:clamp(12px,.9vw,15px); font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--sky-light); margin-top:16px; margin-bottom:15px; }
#heroStage .qt-box .qt-items{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
#heroStage .qt-box .qt-row{ display:flex; gap:8px; justify-content:flex-end; }
#heroStage .qt-box .qt-items span{ font-family:var(--grotesk); font-size:13px; font-weight:500; color:#fff; padding:7px 15px; border-radius:100px;
  border:1px solid rgba(120,200,245,.32); background:rgba(10,22,40,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
/* premium-quality — lower-right callout, near-horizontal line from the vial (per markup) */
#heroStage .qp-box{ position:absolute; top:0; left:0; z-index:33; width:max-content; max-width:340px; text-align:left;
  opacity:0; transform:none; pointer-events:none; text-shadow:0 2px 20px rgba(2,10,22,.55);
  transition:opacity .12s ease; }
#heroStage.premium-in .qp-box{ opacity:1; transform:none; pointer-events:auto; }
#heroStage .qp-box h2{ font-family:var(--grotesk); font-weight:400; font-size:clamp(46px,3vw,62px); line-height:1.03; letter-spacing:-.02em; color:#fff; }
#heroStage .qp-box p{ font-family:var(--grotesk); font-weight:400; font-size:clamp(15.5px,1.05vw,19px); line-height:1.5; color:var(--sky-light); margin-top:13px; max-width:clamp(300px,22vw,400px); }
#heroStage .qp-cta{ display:inline-flex; align-items:center; gap:9px; margin-top:22px; padding:12px 24px; border-radius:100px; white-space:nowrap;
  border:1px solid rgba(120,200,245,.5); background:rgba(10,22,40,.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#fff; font-family:var(--grotesk); font-size:13px; font-weight:500; letter-spacing:.03em; cursor:pointer; animation:vh-shopGlow 3s ease-in-out infinite; transition:background .25s ease, border-color .25s ease, transform .25s ease; }
#heroStage .qp-cta svg{ width:14px; height:14px; flex:0 0 auto; transition:transform .25s ease; }
#heroStage .qp-cta:hover{ background:rgba(14,165,233,.26); transform:translateY(-2px); }
#heroStage .qp-cta:hover svg{ transform:translateX(4px); }
/* the live callout fades out fast the instant the freeze fires, so the wordless video matches any ticker state */
#heroStage.freezing .anno{ opacity:0; transition:opacity .2s ease; pointer-events:none; }
#heroStage.freezing .dive-vignette{ opacity:0; }

/* ---- dive annotation: 45deg callout on the paused final frame ---- */
#heroStage .anno{ position:absolute; width:0; height:0; z-index:28; pointer-events:none; }
#heroStage .anno-dot{ position:absolute; left:-6px; top:-6px; width:12px; height:12px; border-radius:50%; opacity:0;
  background:var(--sky-light); box-shadow:0 0 0 5px rgba(56,189,248,.16), 0 0 18px rgba(56,189,248,.9); transition:opacity .4s ease; }
#heroStage .anno-dot::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(120,200,245,.5); animation:vh-annoPing 2.6s ease-out infinite; }
@keyframes vh-annoPing { 0%{transform:scale(.5);opacity:.9;} 80%,100%{transform:scale(1.8);opacity:0;} }
#heroStage .anno-bar{ position:absolute; left:0; top:0; height:1.5px; width:215px; transform-origin:left center; transform:rotate(-135deg) scaleX(0);
  background:linear-gradient(90deg, rgba(120,200,245,.95), rgba(120,200,245,.15)); transition:transform .6s cubic-bezier(.16,.84,.44,1) .1s; }
#heroStage .anno-bar2{ position:absolute; left:0; top:0; height:1.5px; width:185px; transform-origin:left center; transform:rotate(135deg) scaleX(0);
  background:linear-gradient(90deg, rgba(120,200,245,.95), rgba(120,200,245,.15)); transition:transform .6s cubic-bezier(.16,.84,.44,1) .28s; }
#heroStage .anno-text{ position:absolute; right:150px; bottom:150px; width:360px; text-align:right; opacity:0; text-shadow:0 2px 14px rgba(2,8,18,.6); transition:opacity .55s ease .5s; }
#heroStage .anno-head{ font-family:var(--grotesk); font-size:clamp(26px,2.5vw,38px); font-weight:600; line-height:1.04; letter-spacing:-.018em; color:#fff; }
#heroStage .anno-sub{ font-family:var(--grotesk); font-size:clamp(17px,1.8vw,24px); font-weight:400; color:var(--sky-light); margin-top:9px; }
#heroStage .anno-ticker{ font-family:var(--grotesk); font-weight:300; font-size:clamp(20px,2.1vw,30px); line-height:1; letter-spacing:-.01em; color:#fff; display:flex; justify-content:flex-end; align-items:baseline; gap:.16em; margin-top:12px; }
#heroStage .anno-ticker .tk-fixed{ flex:0 0 auto; }
#heroStage .anno-ticker .tk-typed{ flex:0 0 auto; display:inline-flex; justify-content:flex-start; align-items:baseline; }
#heroStage .anno-eyebrow{ font-family:var(--grotesk); font-size:clamp(11px,1vw,13px); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(206,222,238,.66); margin-top:14px; line-height:1.5; }
#heroStage.dive-ended .anno-dot{ opacity:1; }
#heroStage.dive-ended .anno-bar{ transform:rotate(-135deg) scaleX(1); }
#heroStage.dive-ended .anno-bar2{ transform:rotate(135deg) scaleX(1); }
#heroStage.dive-ended .anno-text{ opacity:1; }
#heroStage .anno-shop{ position:absolute; right:131px; top:124px; display:inline-flex; align-items:center; gap:11px;
  padding:15px 26px; border-radius:13px; border:1px solid rgba(120,200,245,.5); background:rgba(10,22,40,.6);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; font-family:var(--grotesk);
  font-size:15.5px; font-weight:500; letter-spacing:.02em; white-space:nowrap; cursor:pointer; opacity:0; pointer-events:none;
  animation:vh-shopGlow 3s ease-in-out infinite;
  transition:opacity .5s ease .55s, background .25s ease, border-color .25s ease, transform .25s ease; }
#heroStage .anno-shop::after{ content:''; position:absolute; inset:-12px; border-radius:22px; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(56,189,248,.4), transparent 72%); opacity:0; animation:vh-shopHalo 3s ease-in-out infinite; }
#heroStage .anno-shop svg{ width:17px; height:17px; flex:0 0 auto; }
#heroStage .anno-shop .as-arrow{ transition:transform .25s ease; }
#heroStage .anno-shop:hover{ background:rgba(14,165,233,.26); transform:translateY(-2px); }
#heroStage .anno-shop:hover .as-arrow{ transform:translateX(4px); }
#heroStage.dive-ended .anno-shop{ opacity:1; pointer-events:auto; }
@keyframes vh-shopGlow {
  0%,100%{ box-shadow:0 14px 36px rgba(2,10,22,.45), 0 0 16px rgba(56,189,248,.18); border-color:rgba(120,200,245,.5); }
  50%{ box-shadow:0 16px 42px rgba(2,10,22,.5), 0 0 30px rgba(56,189,248,.6), 0 0 54px rgba(56,189,248,.3); border-color:rgba(120,200,245,.9); }
}
@keyframes vh-shopHalo { 0%,100%{opacity:.12; transform:scale(.92);} 50%{opacity:.5; transform:scale(1.06);} }

#heroStage .tk-word{ background:linear-gradient(120deg,var(--sky-light),var(--sky) 70%,#7dd3fc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#heroStage .tk-cursor{ display:inline-block; width:.055em; height:.86em; background:var(--sky-light); margin-left:.05em; transform:translateY(.02em); animation:vh-caret 1.05s steps(1) infinite; }
@keyframes vh-caret { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

/* ============================ RESPONSIVE — MOBILE LAYER (≤880px; desktop untouched) ============================ */
@media (max-width:880px){
  /* header: always visible on mobile, no Shop/COAs links */
  #heroStage .site-header{ opacity:1 !important; pointer-events:auto !important; transition:opacity .3s ease; z-index:70 !important; }
  
  #heroStage.m-diving:not(.m-dived) .site-header, #heroStage.m-freezing:not(.m-froze) .site-header, #heroStage.m-descending:not(.m-descended) .site-header, #heroStage.m-pillaring:not(.m-pillared) .site-header, #heroStage.m-iceblocking:not(.m-iceblocked) .site-header{ opacity:0 !important; pointer-events:none !important; }
  /* MOBILE = hamburger-left · centered logo · cart-right; nav links + account icon hidden */
  #heroStage .site-header .hdr-nav, #heroStage .site-header .acct-btn{ display:none !important; }
  #heroStage .brand .b-name, #heroStage .brand .b-sub{ display:none !important; }
  #heroStage .brand{ flex:0 0 auto !important; justify-content:center !important; }
  #heroStage .hdr-right{ flex:1 !important; justify-content:flex-end !important; }
  #heroStage .brand-logo-img{ display:block !important; height:30px; width:auto; margin:15px auto 0; }
  #heroStage .site-header{ align-items:flex-start !important; padding-top:calc(10px + env(safe-area-inset-top)) !important; } /* tighten space above the header icons (was 24px) — move the whole header up */
  #heroStage .site-header .menu-btn{ display:flex !important; flex:1; flex-direction:row !important; align-items:center; gap:11px; justify-content:flex-start; background:none; border:none; color:#fff; cursor:pointer; margin-top:9px; } /* re-show hamburger (hidden on desktop); align center with logo + cart bag (both at mt:9) */
  #heroStage .site-header .menu-btn svg{ width:18px; height:18px; }
  #heroStage .site-header .cart-btn{ margin-top:9px; }
  #heroStage .hero-bg{ inset:0 !important; background-image:url('home/hero-mobile.webp') !important;
    background-size:cover !important; background-position:62% bottom !important; transform:none !important; }
  #heroStage .hero-scrim{ background:linear-gradient(180deg, rgba(6,16,30,.5) 0%, rgba(6,16,30,.1) 26%, rgba(6,16,30,.35) 60%, rgba(6,16,30,.92) 100%); }
  #heroStage .hero-inner{ align-items:flex-start; padding-top:9vh; padding-bottom:0; padding-left:18px; padding-right:8px; }
  #heroStage .copy{ max-width:74%; }
  #heroStage .h1{ font-size:clamp(40px,12vw,60px); letter-spacing:-.03em; }
  #heroStage .tagline{ font-size:clamp(17px,5.2vw,24px); }
  #heroStage .desc{ font-size:clamp(13px,3.6vw,16px); max-width:100%; margin-top:10px; }
  #heroStage .desc-lead{ display:none; }
  #heroStage .eyebrow{ font-size:10.5px; margin-bottom:16px; }
  #heroStage .rule{ margin:11px 0 12px; max-width:150px; }
  #heroStage .cta-row{ gap:8px; margin-top:18px; flex-direction:column; align-items:flex-start; }
  /* anchor the CTA buttons a fixed gap ABOVE the RUO fine print (the bottom-most element) so they sit in the
     lower zone — below the rock ledge — consistently on real iOS Safari, not just headless (raw vh mis-anchors
     because the scroll-locked hero keeps Safari's toolbars expanded). */
  #heroStage .cta-row{ position:absolute; left:18px; right:0; bottom:calc(env(safe-area-inset-bottom) + 92px); margin:0; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:10px; z-index:21; }
  #heroStage .btn{ padding:13px 14px; font-size:9.5px; letter-spacing:.02em; width:200px; justify-content:center; gap:6px; }
  #heroStage .btn-primary svg{ width:11px; height:11px; }
  #heroStage .copy .reveal{ animation:none !important; transform:none !important; opacity:1 !important; }
  #heroStage .fine{ position:absolute; left:18px; bottom:calc(34px + env(safe-area-inset-bottom)); margin-top:0; font-size:9px; flex-direction:column; align-items:flex-start; gap:3px; }
  #heroStage .fine span:not(:last-child)::after{ display:none; }
  #heroStage .hotspots{ opacity:0; pointer-events:none; }
  #heroStage .brand .b-sub{ display:none; }
  #heroStage .menu-label{ display:none; }
  #heroStage .scroll-cue{ display:none; }

  /* ===== MOBILE INTRO CHAIN — UNWIRED. Rebuilding fresh with portrait videos. ===== */
  #heroStage .m-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% bottom;
    background:#04101e; opacity:0; z-index:25; pointer-events:none; display:block; transition:opacity 0s; }
  #heroStage.m-diving .m-video{ opacity:1; transition:none; }
  #heroStage .m-rest{ position:absolute; inset:0; background:url('home/m-underwater-rest.webp') 62% bottom/cover no-repeat;
    opacity:0; z-index:26; pointer-events:none; transition:opacity .4s ease; }
  #heroStage .m-video2{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% bottom;
    background:#04101e; opacity:0; z-index:27; pointer-events:none; display:block; transition:opacity 0s; }
  #heroStage.m-freezing .m-video2{ opacity:1; transition:none; }
  #heroStage .m-rest2{ position:absolute; inset:0; background:62% bottom/cover no-repeat;
    opacity:0; z-index:28; pointer-events:none; transition:opacity .4s ease; }
  #heroStage.m-froze .m-rest2{ opacity:1; }
  #heroStage .m-video3{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% bottom;
    background:#04101e; opacity:0; z-index:29; pointer-events:none; display:block; transition:opacity 0s; }
  #heroStage.m-descending .m-video3{ opacity:1; transition:none; }
  #heroStage .m-rest3{ position:absolute; inset:0; background:62% bottom/cover no-repeat;
    opacity:0; z-index:30; pointer-events:none; transition:opacity .4s ease; }
  #heroStage.m-descended .m-rest3{ opacity:1; }
  #heroStage .m-video4{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% bottom;
    background:#04101e; opacity:0; z-index:31; pointer-events:none; display:block; transition:opacity 0s; }
  #heroStage.m-pillaring .m-video4{ opacity:1; transition:none; }
  #heroStage .m-rest4{ position:absolute; inset:0; background:62% bottom/cover no-repeat;
    opacity:0; z-index:32; pointer-events:none; transition:opacity .4s ease; }
  #heroStage.m-pillared .m-rest4{ opacity:1; }
  #heroStage .m-video5{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% bottom;
    background:#04101e; opacity:0; z-index:33; pointer-events:none; display:block; transition:opacity 0s; }
  #heroStage.m-iceblocking .m-video5{ opacity:1; transition:none; }
  #heroStage .m-rest5{ position:absolute; inset:0; background:center bottom/cover no-repeat;
    opacity:0; z-index:34; pointer-events:none; transition:opacity .4s ease; }
  #heroStage.m-iceblocked .m-rest5{ opacity:1; }
  /* persistent Shop Now CTA (desktop glow style) shown on every rest scene */
  #heroStage .m-cta{ position:absolute; left:50%; bottom:8vh; transform:translateX(-50%) translateY(10px); z-index:42;
    display:inline-flex; align-items:center; gap:11px; padding:18px 38px; border-radius:100px; white-space:nowrap;
    border:1px solid rgba(120,200,245,.5); background:rgba(10,22,40,.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    color:#fff; font-family:var(--grotesk); font-size:16px; font-weight:500; letter-spacing:.03em; text-transform:none;
    opacity:0; pointer-events:none; transition:opacity .5s ease .2s, transform .5s cubic-bezier(.16,.84,.44,1) .2s;
    animation:vh-shopGlow 3s ease-in-out infinite; }
  #heroStage .m-cta svg{ width:17px; height:17px; }
  #heroStage.m-dived:not(.m-freezing) .m-cta{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  #heroStage.m-froze:not(.m-descending) .m-cta2{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  #heroStage.m-descended:not(.m-pillaring) .m-cta3{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  #heroStage.m-pillared:not(.m-iceblocking) .m-cta4{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  /* per-scene text overlays (upper open space; fade in with each rest) */
  #heroStage .m-copy{ position:absolute; left:24px; right:24px; top:13vh; z-index:40; color:#fff; pointer-events:none;
    opacity:0; transform:translateY(14px); transition:opacity .55s ease .15s, transform .55s cubic-bezier(.16,.84,.44,1) .15s;
    text-shadow:0 2px 20px rgba(2,10,22,.55); }
  #heroStage .m-copy .mc-eyebrow{ font-family:var(--grotesk); font-size:13px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--sky-light); margin-bottom:13px; }
  #heroStage .m-copy h2{ font-family:var(--grotesk); font-weight:500; font-size:clamp(40px,11vw,58px); line-height:1.0; letter-spacing:-.022em; }
  #heroStage #mCopy2 .mc-line{ display:none; }
  #heroStage .m-copy p{ font-family:var(--grotesk); font-weight:400; font-size:clamp(16px,4.5vw,19px); line-height:1.5; color:rgba(226,236,246,.84); margin-top:15px; max-width:84%; text-wrap:pretty; }
  #heroStage .mc-points{ margin-top:18px; position:relative; height:42vh; max-width:none; }
  #heroStage .mc-pt{ position:absolute; width:54%; padding-top:13px; }
  #heroStage .mc-pt:nth-child(1){ top:0; left:0; text-align:left; }
  #heroStage .mc-pt:nth-child(2){ top:30%; right:0; text-align:right; }
  #heroStage .mc-pt:nth-child(3){ top:60%; left:0; text-align:left; }
  #heroStage .mc-pt::before{ content:''; position:absolute; top:0; width:7px; height:7px; border-radius:50%; background:var(--sky-light); box-shadow:0 0 10px rgba(56,189,248,.8); }
  #heroStage .mc-pt:nth-child(1)::before, #heroStage .mc-pt:nth-child(3)::before{ left:0; }
  #heroStage .mc-pt:nth-child(2)::before{ right:0; }
  #heroStage .mc-pth{ display:block; font-family:var(--grotesk); font-weight:600; font-size:clamp(15px,4.2vw,18px); letter-spacing:-.01em; color:#fff; }
  #heroStage .mc-ptd{ display:block; font-family:var(--grotesk); font-weight:400; font-size:clamp(12px,3.3vw,14px); line-height:1.4; color:rgba(226,236,246,.8); margin-top:3px; }
  /* vertical connector line + dot dropping toward the product (mobile equivalent of the desktop 45° callout bar) */
  #heroStage .mc-line{ position:relative; margin-top:20px; margin-left:14px; width:1.5px; height:150px; transform-origin:top center; transform:rotate(-24deg);
    background:linear-gradient(180deg, rgba(120,200,245,.95), rgba(120,200,245,.12)); }
  #heroStage .mc-line::after{ content:''; position:absolute; left:50%; top:-4px; width:9px; height:9px; border-radius:50%; transform:translateX(-50%);
    background:var(--sky-light); box-shadow:0 0 0 4px rgba(56,189,248,.16), 0 0 14px rgba(56,189,248,.9); }
  #heroStage .mc-line{ scale:1 0; transition:scale .6s cubic-bezier(.16,.84,.44,1) .35s; }
  #heroStage.m-dived #mCopy1 .mc-line, #heroStage.m-froze #mCopy2 .mc-line, #heroStage.m-descended #mCopy3 .mc-line, #heroStage.m-pillared #mCopy4 .mc-line{ scale:1 1; }
  #heroStage.m-froze #mCopy2, #heroStage.m-descended #mCopy3, #heroStage.m-pillared #mCopy4, #heroStage.m-dived #mCopy1{ opacity:1; transform:none; }
  /* hide a scene's copy the moment its outgoing video starts */
  #heroStage.m-freezing #mCopy1, #heroStage.m-descending #mCopy2, #heroStage.m-pillaring #mCopy3, #heroStage.m-iceblocking #mCopy4{ opacity:0 !important; transition:opacity .25s ease; }
  /* underwater ticker */
  #heroStage .m-ticker{ font-family:var(--grotesk); font-weight:300; font-size:clamp(20px,5.6vw,26px); line-height:1; letter-spacing:-.01em; color:#fff; display:flex; align-items:baseline; gap:.16em; margin-top:14px; }
  #heroStage .m-ticker .tk-word{ background:linear-gradient(120deg,var(--sky-light),var(--sky) 70%,#7dd3fc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  #heroStage .m-ticker .tk-cursor{ display:inline-block; width:.06em; height:.85em; background:var(--sky-light); margin-left:.04em; animation:vh-caret 1.05s steps(1) infinite; }
  #heroStage.m-dived .m-rest{ opacity:1; }
  /* fade hero chrome out once the dive starts */
  #heroStage.m-diving .hero-fg, #heroStage.m-diving .hero-scrim, #heroStage.m-diving .light-sweep, #heroStage.m-diving .mist, #heroStage.m-diving .particles{ opacity:0 !important; transition:opacity .4s ease; }
}
/* desktop never shows the mobile layer */
@media (min-width:881px){ #heroStage .m-video, #heroStage .m-rest, #heroStage .m-video2, #heroStage .m-rest2, #heroStage .m-video3, #heroStage .m-rest3{ display:none !important; } }
@media (max-width:880px){ #heroStage .dive-video, #heroStage .loop-video, #heroStage .freeze-video, #heroStage .descend-video, #heroStage .pillar-video, #heroStage .iceblock-video{ display:none !important; } }
@media (prefers-reduced-motion:reduce){ #heroStage, #heroStage *, #heroStage *::before, #heroStage *::after{animation:none!important;} #heroStage .reveal{opacity:1!important;transform:none!important;} }
/* ── LIVE-SITE GUARD: the WP theme injects dark heading colors (#111827 / #082040) that override the
   design's light headings — they look white in the standalone preview but turn dark on the live site.
   Force the design's on-dark headings white; the hero "Future" accent keeps its sky gradient. ── */
#heroStage .hero h1, #heroStage .hero h2, #heroStage .hero h3, #heroStage .hero h4, #heroStage .hero .mc-pth{ color:#fff !important; }
#heroStage .hero .h1 .accent{ color:#fff !important; -webkit-text-fill-color:transparent !important; }
/* ── GUARD #2: the design's generic class names (.h1, .btn, .btn-primary, .btn-outline) COLLIDE with the WP
   theme's own classes, and body font-size/line-height come from theme snippets — so the live hero rendered
   differently from the local file. Re-assert the design's exact values (body.home scope + !important), and
   mirror the design's own @media(max-width:880px) overrides so the guard doesn't clobber them on mobile. ── */

#heroStage .eyebrow, #heroStage .eyebrow span, #heroStage .fine, #heroStage .fine span, #heroStage .scroll-cue span{ line-height:normal !important; }
#heroStage .h1{ font-family:var(--grotesk) !important; font-size:clamp(38px,4.6vw,78px) !important; font-weight:400 !important; line-height:1.06 !important; letter-spacing:-.022em !important; margin:0 !important; }
/* the vsv3 button-normalizer snippet targets `html body a.btn:not(.vsv3-frt-card-arrow)` (specificity 0,2,3
   + !important) and beats `body.home .btn`; the double-class form below (0,3,2) clears it. */
#heroStage .btn.btn-primary, #heroStage .btn.btn-outline{ font-family:var(--grotesk) !important; font-size:12.5px !important; font-weight:500 !important; line-height:normal !important; letter-spacing:.05em !important; text-transform:uppercase !important; padding:15px 28px !important; border-radius:100px !important; border:1px solid transparent !important; }
#heroStage .btn.btn-primary{ background:#fff !important; background-color:#fff !important; color:#082040 !important; }
#heroStage .btn.btn-outline{ background:rgba(255,255,255,.04) !important; background-color:rgba(255,255,255,.04) !important; color:#fff !important; border-color:rgba(255,255,255,.38) !important; }
@media (max-width:880px){
  #heroStage .h1{ font-size:clamp(40px,12vw,60px) !important; letter-spacing:-.03em !important; }
  #heroStage .btn.btn-primary, #heroStage .btn.btn-outline{ padding:13px 14px !important; font-size:9.5px !important; letter-spacing:.02em !important; width:200px !important; justify-content:center !important; gap:6px !important; }
  /* a theme rule sets `.hero{ padding:40px 0 60px }`; the 60px bottom padding lifts .hero-inner's bottom (and the
     bottom-anchored CTA buttons + RUO fine print) ~60px off the viewport floor. Zero it on mobile so that whole
     group drops into the bottom-left corner; the top padding stays so the copy keeps its position. */
  #heroStage .hero{ padding-bottom:0 !important; }
}

/* =============================================================================
   ADDED BY THE PORT — NOT PRESENT IN THE SOURCE
   The mobile menu markup (.vsv3-drawer) is styled entirely by the parent
   WordPress theme's stylesheet, which is NOT part of the hero's inline CSS.
   Without the theme, the drawer renders as a bare unstyled stack of links on
   top of the hero. This is a minimal stand-in so the port is not visibly
   broken. Delete it if you are dropping the hero back into the real theme.
   ============================================================================= */
#heroStage .vsv3-drawer-overlay{ position:fixed; inset:0; background:rgba(4,16,30,.6);
  opacity:0; pointer-events:none; transition:opacity .3s ease; }
#heroStage .vsv3-drawer-overlay.is-open{ opacity:1; pointer-events:auto; }
#heroStage .vsv3-drawer{ position:fixed; top:0; left:0; bottom:0; width:min(320px,86vw);
  background:#082040; color:#fff; padding:22px 26px; display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .32s cubic-bezier(.16,.84,.44,1);
  box-shadow:0 0 60px rgba(2,10,22,.6); overflow-y:auto; }
#heroStage .vsv3-drawer.is-open{ transform:none; }
#heroStage .vsv3-drawer-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
#heroStage .vsv3-menu-title{ font-family:var(--grotesk); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(224,242,254,.6); }
#heroStage .vsv3-drawer-close{ background:none; border:none; color:#fff; font-size:26px; line-height:1; cursor:pointer; }
#heroStage .vsv3-drawer nav{ display:flex; flex-direction:column; gap:2px; }
#heroStage .vsv3-drawer nav a{ font-family:var(--grotesk); font-size:17px; font-weight:500;
  color:#fff; padding:13px 0; border-bottom:1px solid rgba(120,190,235,.14); }
#heroStage .vsv3-drawer-secondary{ font-size:14px !important; color:rgba(224,242,254,.7) !important; }
#heroStage .vsv3-drawer-footer{ margin-top:auto; padding-top:26px; display:flex; flex-direction:column; gap:9px; }
#heroStage .vsv3-drawer-footer a{ font-family:var(--grotesk); font-size:13px; color:rgba(200,218,235,.6); }
