/* ============================================================================
   OTCHive — design QA pass
   Loaded after the inline <style> so equal-specificity rules win.
   The OTCHive identity is unchanged: graphite and gold, Orbitron display,
   hexagonal geometry. These rules fix defects and hierarchy, not the look.
   ========================================================================== */

:root{
  /* --ml was used 15 times and never defined, so every muted caption fell back
     to inherited body colour. The type hierarchy had collapsed into one flat
     register of light. Both tones measured against the page ink #080502:
     --mt 6.9:1, --ml 5.2:1 — past WCAG AA for normal text. */
  --mt:#A89468;
  --ml:#8E8060;

  /* Motion: exponential ease-out only, no bounce. */
  --e-out:cubic-bezier(.22,1,.36,1);
  --t-fast:140ms;
  --t-base:220ms;
}

html{color-scheme:dark;}

/* The fixed 64px navigation was covering every in-page anchor target. */
:target, section[id]{scroll-margin-top:88px;}

/* ── focus ──────────────────────────────────────────────────────────────
   outline:none sat on four form controls with no replacement, leaving
   keyboard users with no visible focus anywhere on the page. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--g3);
  outline-offset:3px;
  border-radius:2px;
}
#iModal input:focus-visible,#iModal select:focus-visible,#iModal textarea:focus-visible{
  outline:2px solid var(--g3); outline-offset:2px;
}
.skip-link{
  position:absolute; left:16px; top:-64px; z-index:1000;
  padding:12px 20px; background:var(--g1); color:#0A0703;
  font-family:"Orbitron",sans-serif; font-size:12px; font-weight:700;
  letter-spacing:2px; text-decoration:none;
  transition:top var(--t-fast) var(--e-out);
}
.skip-link:focus{top:12px;}

/* ── hero ───────────────────────────────────────────────────────────────
   Five typographic registers stacked before the CTA — badge, all-caps
   kicker, headline, italic all-caps subline, paragraph — each competing at
   similar weight. The headline should win outright; everything else steps
   back so the proposition reads in one glance. */
.hkl{
  font-size:var(--fs-micro); letter-spacing:2.4px; opacity:.62;
  color:var(--mt); font-weight:600; max-width:60ch;
  margin-inline:auto; margin-bottom:18px;
  text-wrap:balance; line-height:1.7;
}
.hsub{
  font-style:normal; text-transform:none; letter-spacing:.01em;
  font-size:var(--fs-body); color:var(--ml); font-weight:400;
  text-shadow:none; margin-bottom:14px;
}
.htitle{font-size:clamp(30px,4.0vw,56px); letter-spacing:-.015em;}
h1,h2,h3,.htitle,.stit{text-wrap:balance;}
p,.hdesc,.fds,.sdsc{text-wrap:pretty;}
.hdesc{max-width:56ch; margin-inline:auto;}

/* The honeycomb canvas runs hot right behind the headline. A soft well of
   shadow under the text keeps the pattern without letting it compete. */
#hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58% 46% at 50% 44%,
    rgba(8,5,2,.88) 0%, rgba(8,5,2,.62) 45%, rgba(8,5,2,0) 78%);
}
/* .hero-ui is position:absolute; inset:0 and centres the block. Overriding
   it to relative broke that centring and pushed the badge under the nav, so
   only the z-index is raised here. */
.hero-ui{z-index:10;}
/* Content sits above the scrim without changing how the hero is laid out. */
#hero > *:not(::before){position:relative;}

/* Secondary CTA read as disabled grey text next to a solid gold button. */
.btn-ghost{
  color:var(--txt); font-weight:500; padding:12px 6px;
  border-bottom:1px solid rgba(245,168,37,.30);
  transition:color var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out);
}
.btn-ghost:hover,.btn-ghost:focus-visible{
  color:var(--g1); border-bottom-color:var(--g1);
}

/* ── type scale ─────────────────────────────────────────────────────────
   Four label sizes sat within 2px of each other (9, 10, 11, 13) and read as
   one blurred step. Pull them onto distinct rungs and lift the floor. */
.eyebrow{font-size:11px; letter-spacing:4px;}
.sbl,.hl{font-size:11px; letter-spacing:1.6px; color:var(--ml);}
.fds,.stpd,.sdsc{font-size:var(--fs-body);}
.lphd{font-size:var(--fs-label);}
.sbn,.hn,.stpc{font-variant-numeric:tabular-nums;}
.fds,.stpd{max-width:46ch; margin-inline:auto;}
@media(max-width:768px){
  .fds,.stpd,.lphd,.tfc-back-bio{font-size:14px;}
  .sbl,.hl,.eyebrow{font-size:11px;}
}

/* ── touch targets ──────────────────────────────────────────────────────*/
.lb{min-height:44px; min-width:52px; padding:0 16px;}
@media(pointer:fine){ .lb{min-height:36px;} }
.ctameta a{display:inline-block; padding-block:10px;}
.tfc-link{padding:10px 14px;}
button,a,input,select,textarea,summary{touch-action:manipulation;}
html{-webkit-tap-highlight-color:rgba(245,168,37,.18);}

/* ── explicit transitions ───────────────────────────────────────────────
   transition:all was on eight controls; listing properties keeps the
   compositor on transform and opacity and stops unrelated values animating. */
.ncta{transition:background-color var(--t-base) var(--e-out),
                color var(--t-base) var(--e-out),
                box-shadow var(--t-base) var(--e-out);}
.btn-out{transition:background-color var(--t-base) var(--e-out),
                    border-color var(--t-base) var(--e-out),
                    color var(--t-base) var(--e-out);}
.lb{transition:background-color var(--t-fast) var(--e-out),
                          color var(--t-fast) var(--e-out),
                          border-color var(--t-fast) var(--e-out);}
.phone-frame{transition:transform 320ms var(--e-out), box-shadow 320ms var(--e-out);}

/* ── product screenshots ────────────────────────────────────────────────
   Frames were styled 9/19 while the screenshots are 653x1280, so object-fit
   cover had been silently cropping the top and bottom of every screen.
   height:auto is required or the width/height attributes win over the ratio. */
.phone-screen{height:auto; aspect-ratio:653 / 1280; object-fit:cover;}
img[width][height]{max-width:100%;}

/* ── deck dots ──────────────────────────────────────────────────────────*/
.deck-dot{width:30px; height:44px; padding:0; border:0; background:none;
          cursor:pointer; display:grid; place-items:center;}
.deck-dot > span{display:block; width:22px; height:4px; border-radius:2px;
  background:rgba(245,168,37,.24);
  transition:background-color var(--t-fast) var(--e-out), width var(--t-base) var(--e-out);}
.deck-dot[aria-current="true"] > span{width:34px; background:var(--g1);}
.deck-dot:hover > span{background:rgba(245,168,37,.55);}

/* ── mobile navigation ──────────────────────────────────────────────────
   Below 900px the link list was display:none with no replacement, so the
   deck, product and team were unreachable on every phone and tablet. */
.nav-toggle{display:none; position:relative; width:44px; height:44px;
  padding:0; border:0; background:none; cursor:pointer; margin-right:4px;}
.nav-toggle span{position:absolute; left:12px; width:20px; height:1.5px;
  background:var(--g1);
  transition:transform var(--t-base) var(--e-out);}
.nav-toggle span:first-child{top:19px;}
.nav-panel{
  position:fixed; top:64px; left:0; right:0; z-index:499;
  background:rgba(6,4,2,.97);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(245,168,37,.22);
  padding:8px 18px max(18px, env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
}
.nav-panel[hidden]{display:none;}
.nav-panel a{
  font-family:"Orbitron",sans-serif; font-size:var(--fs-label); font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--txt);
  text-decoration:none; padding:16px 4px;
  border-bottom:1px solid rgba(245,168,37,.10);
}
.nav-panel a:last-child{border-bottom:0;}
.nav-panel a:hover,.nav-panel a:focus-visible{color:var(--g1);}
@media(max-width:900px){ }

/* ── safe areas ─────────────────────────────────────────────────────────*/
nav{padding-left:max(52px, env(safe-area-inset-left));
    padding-right:max(52px, env(safe-area-inset-right));}
@media(max-width:900px){
  nav{padding-left:max(18px, env(safe-area-inset-left));
      padding-right:max(18px, env(safe-area-inset-right));}
}
footer{padding-bottom:max(28px, env(safe-area-inset-bottom));}

/* ── reduced motion ─────────────────────────────────────────────────────
   Eight infinite keyframe loops plus a logo glitch timer ran regardless of
   the preference. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .btn-gold{background-position:0 50% !important;}
  .scroll-ind,.bdot,.garr{animation:none !important; opacity:.75;}
}

/* Remaining transition:all declarations, made explicit. */
.card-glow-wrap,.fcard{transition:border-color var(--t-base) var(--e-out),
                                   background-color var(--t-base) var(--e-out),
                                   transform var(--t-base) var(--e-out);}

/* Inline links inside prose were 12px tall targets. Padding lifts the hit
   area without moving the visual line. */
.ctameta a,.flinks a,footer a,.hdesc a,.fds a{display:inline-block; padding-block:8px;}
@media(pointer:coarse){ .ctameta a,.flinks a,footer a{padding-block:12px;} }

/* The primary nav links sit in a bare <ul>, so they never picked up the
   padding rules above; 12px was the full hit target. */
.nav-ul a{display:inline-block; padding-block:12px;}
.nav-ul{align-items:center;}
.nlogo{display:inline-flex; align-items:center; padding-block:11px;}
.tfc-link{display:inline-flex; align-items:center; min-height:36px;}
/* The two remaining transition:all live on the modal's inline-styled buttons. */
#iModal button{transition:background-color var(--t-base) var(--e-out),
                          border-color var(--t-base) var(--e-out),
                          color var(--t-base) var(--e-out),
                          opacity var(--t-base) var(--e-out) !important;}

/* The hero column is centred in 100vh; with a fixed 64px bar on top the
   optical centre sits lower than the geometric one. */
.hero-left{padding-top:64px;}
@media(max-height:760px){
  .hero-left{padding-top:48px;}
  .hdesc{margin-bottom:24px;}
}

/* ── mobile nav bar ─────────────────────────────────────────────────────
   At 390px the bar had to hold logo, menu button, language switch and the
   Telegram CTA; the CTA was pushed off the right edge. Below 900px the bar
   keeps only the logo and the menu, and everything else moves into the
   panel where it has room to be a proper target. */
@media(max-width:900px){
  nav .lsw,
  nav .ncta{display:none;}
  .nav-panel .lsw,
  .nav-panel .ncta{display:flex;}
  .nav-toggle{display:grid; margin-left:auto;}
}
.nav-panel-foot{
  display:flex; align-items:center; gap:14px;
  padding-top:16px; margin-top:6px;
  border-top:1px solid rgba(245,168,37,.14);
}
.nav-panel-foot .ncta{margin-left:auto;}
.nav-panel .lsw{display:flex;}

/* The plate is busier on a phone relative to the type size. */
@media(max-width:900px){
  #hero::before{
    background:radial-gradient(76% 42% at 50% 46%,
      rgba(8,5,2,.93) 0%, rgba(8,5,2,.74) 52%, rgba(8,5,2,.15) 86%);
  }
}

/* ============================================================================
   AUDIT PASS 2 — design system
   ========================================================================== */

:root{
  /* ── type scale ──────────────────────────────────────────────────────
     The page was using 22 distinct sizes between 7px and 56px, several of
     them a single pixel apart. That is noise, not hierarchy. These eight
     rungs cover everything; the floor is 11px because 7, 8 and 9px text
     appeared 24 times and none of it was legible. */
  --fs-display:clamp(30px, 4.0vw, 56px);
  --fs-h2:clamp(26px, 2.8vw, 38px);
  --fs-h3:22px;
  --fs-lead:18px;
  --fs-body:16px;
  --fs-small:14px;
  --fs-label:12px;
  --fs-micro:11px;

  /* ── spacing ─────────────────────────────────────────────────────────
     Sections ran at either 120px or 72px with nothing distinguishing which
     got which, so the page rhythm read as accidental. Two deliberate steps. */
  --sp-section:clamp(84px, 9vh, 120px);
  --sp-section-lg:clamp(104px, 12vh, 152px);

  /* ── controls ────────────────────────────────────────────────────────
     btn-gold alone rendered at 41, 43 and 48px tall. One control height. */
  --ctl-h:46px;
  --ctl-h-sm:38px;
}

/* ── one control height everywhere ──────────────────────────────────────*/
.btn-gold,.btn-out{
  min-height:var(--ctl-h);
  padding-block:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--fs-label);
}
/* Scoped to the wide layout: below 900px this button lives in the menu panel,
   and an unscoped display:inline-flex here re-showed it in the bar. */
@media(min-width:901px){
  nav .ncta{
    min-height:var(--ctl-h-sm);
    display:inline-flex; align-items:center;
    padding:0 22px;
    font-size:var(--fs-micro);
  }
}
.nav-panel .ncta{
  min-height:var(--ctl-h); align-items:center;
  padding:0 22px; font-size:var(--fs-micro);
}

/* ── type floor: nothing below 11px,nothing below 12px on touch ───────*/
.ctameta,.hl,.lb,.pc,.phone-tag,.pnote,.rmq,.scw,.stpig,.tfc-link,.tfc-tag,.tlbl{font-size:var(--fs-micro);}
.eyebrow{font-size:var(--fs-label); letter-spacing:4px;}
.tfc-role{font-size:var(--fs-label);}
/* On a phone nothing carrying words drops below 13px. The 11px rung stays for
   desktop labels, where reading distance is shorter and the type is tracked. */
@media(max-width:900px){
  .pc,.phone-tag,.pnote,.rmq,.scw,.stpig,.tfc-link,.tfc-role,.tfc-tag,.tlbl,.lpht,.lphd,.sbl,.hl,.fds,.stpd,.sdsc,.tfc-back-bio,.trsub{font-size:13px !important;}
  .eyebrow{font-size:12px !important; letter-spacing:3px;}
  footer a,.flinks a{font-size:13px !important;}
  /* the stragglers carry their size inline, so they need the same weight */
  .hkl,.hbadge span,.btn-gold,.btn-out,#deckCounter,
  .lphc p,.ctameta,.scr-note{font-size:12px !important;}
  .btn-gold,.btn-out{letter-spacing:1.6px;}
}

/* ── section rhythm ─────────────────────────────────────────────────────*/
#features,#screens,#how,#deck,#team{
  padding-block:var(--sp-section-lg) !important;
}
section.z1:not(#features):not(#screens):not(#how):not(#deck):not(#team):not(#cta){
  padding-block:var(--sp-section) !important;
}
#cta{padding-block:var(--sp-section-lg) !important;}
@media(max-width:768px){
  #features,#screens,#how,#deck,#team,#cta,
  section.z1{padding-inline:20px !important;}
}

/* ── colour: collapse the one-off tints onto the tokens ────────────────
   Fourteen text colours were in use, several of them the same hue at .75,
   .80 and .85 alpha. Opacity variants of one token read as three colours. */
.hdesc,.sdsc,.trsub,.ctas{color:var(--txt); opacity:.82;}
.fds,.stpd,.lphd{color:var(--mt); opacity:1;}

/* ── mobile product section ─────────────────────────────────────────────
   A swipe carousel was tried here and removed. The page's own rules pin this
   row with three !important declarations - grid-template-columns:1fr,
   max-width:260px, margin:0 auto - so the grid never took: the container
   stayed 260px inside a 390px screen, the gap stayed 48px, and the first card
   computed to zero width. On a real phone it read as clipped, broken text.
   Overriding three !important rules to save some scroll length is not a trade
   worth making; the vertical stack is honest and it works. */
.phone-frame{max-width:100%;}

/* ── mobile menu icon ───────────────────────────────────────────────────
   At 390px the two bars sat 5px apart and read as one thick line. */
.nav-toggle span:first-child{top:17px;}
.nav-toggle span:last-child{top:26px;}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg);}


/* The final CTA and hero buttons carried their own padding, which beat the
   component rule on specificity and left three button heights on one page. */
#cta .btn-gold,#cta .btn-out,.hbtns .btn-gold,.hbtns .btn-out,
.ctabtns .btn-gold,.ctabtns .btn-out{
  padding-block:0 !important;
  min-height:var(--ctl-h) !important;
}

/* ── Trust Score scale ───────────────────────────────────────────────────
   Was four equal cards, which read as four products rather than one 0-10
   measure, and carried the only saturated red and green on the page. The
   pattern here follows the tier/meter components on 21st.dev, rebuilt in this
   project's own HTML and tokens rather than pasted as React.
   The bar is aria-hidden behind one label; the legend carries the real text. */
.tscale{max-width:860px; margin:0 auto;}
.tscale-track{
  position:relative; height:12px; margin-bottom:22px;
  background:rgba(245,168,37,.07);
  border:1px solid rgba(245,168,37,.16);
}
.tscale-seg{
  position:absolute; top:0; bottom:0;
  left:var(--from); width:calc(var(--to) - var(--from));
  background:linear-gradient(90deg,
    rgba(138,106,50,.55), rgba(245,168,37,.85));
  opacity:.34;
  transition:opacity var(--t-base) var(--e-out);
}
.tscale-seg:nth-child(2){opacity:.52;}
.tscale-seg:nth-child(3){opacity:.74;}
.tscale-seg:nth-child(4){opacity:1;}
.tscale-tick{
  position:absolute; top:-6px; bottom:-6px; width:1px;
  background:rgba(245,168,37,.42);
}
.tscale-legend{
  display:grid; grid-template-columns:repeat(4,1fr);
  list-style:none; margin:0; padding:0; gap:1px;
  background:rgba(245,168,37,.12);
}
.tscale-legend li{
  background:var(--dk);
  padding:20px 16px;
  display:flex; flex-direction:column; gap:6px;
  border-top:2px solid transparent;
}
/* the top tier is the one worth aiming at, so it is the one that is marked */
.tscale-legend li:last-child{border-top-color:var(--g1);}
.tl-name{
  font-family:"Orbitron",sans-serif; font-size:var(--fs-label);
  font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:var(--mt);
}
.tscale-legend li:nth-child(3) .tl-name{color:var(--txt);}
.tscale-legend li:last-child .tl-name{color:var(--g1);}
.tl-range{font-size:var(--fs-label); color:var(--ml); font-variant-numeric:tabular-nums;}
@media(max-width:700px){
  .tscale-legend{grid-template-columns:repeat(2,1fr);}
  .tscale-track{margin-bottom:18px;}
}

/* ── hero: five registers down to four ───────────────────────────────────
   The italic caps line and the paragraph were two separate voices saying
   overlapping things. Setting them as one block leaves the copy intact and
   gives the headline the stage. */
.hero-left .hsub{
  font-size:var(--fs-body);
  color:var(--txt); opacity:.74;
  margin-bottom:6px; letter-spacing:0;
}
.hero-left .hdesc{margin-top:0;}
@media(min-width:1100px){
  .hero-left .hsub{max-width:56ch;}
}

/* ── section intros ─────────────────────────────────────────────────────
   The gold pass made the wall bright enough that small type sitting directly
   on it lost contrast — headings survived on size and weight, the supporting
   lines did not. Cards already carry their own backing; these centred intro
   blocks had none. A soft well rather than a black box, so the hive stays
   visible around the words. */
section .wrap > .rv:first-child{position:relative;}
section .wrap > .rv:first-child::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; transform:translate(-50%,-50%);
  /* Capped against the viewport (118% gave the document a horizontal
     scrollbar at 768) and faded out well before its own edge, otherwise the
     falloff is clipped and the box reads as a dark rectangle. */
  width:min(920px, 92vw); height:calc(100% + 120px);
  background:radial-gradient(46% 46% at 50% 50%,
    rgba(8,5,2,.88) 0%, rgba(8,5,2,.52) 46%, rgba(8,5,2,0) 74%);
  pointer-events:none;
}
@media(max-width:900px){
  /* the environment layer already darkens hard here; a second scrim only
     produced a visible box */
  section .wrap > .rv:first-child::before{display:none;}
}
/* These carry inline color:var(--ml), which beats a class rule. At 12px over
   a lit plate that measured 4.6:1 — passing, but only just. */
section .wrap p.trsub,
section .wrap p.sdsc,
#cta p.ctas{color:var(--txt) !important; opacity:.86;}

/* ── HIVE environment ───────────────────────────────────────────────────
   The video is the world the page sits inside. It stays below the cell
   canvas, which stays below every pixel of content. */
#hiveEnv{
  position:fixed; inset:0; z-index:-2;
  overflow:hidden; background:#060403;
  pointer-events:none;
}
.hive-env-vid{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0;
  transform-origin:center center;
  will-change:transform;
  transition:opacity 900ms var(--e-out);
}
/* Only shown once it can actually be scrubbed; until then the cell wall holds
   the page and nothing flickers. */
#hiveEnv[data-state="live"] .hive-env-vid{opacity:1;}
/* only reached if the video never becomes scrubbable */
/* The poster is the clip's first frame and is always the layer's base, so the
   page opens on the hive itself rather than on anything drawn. */
#hiveEnv{
  background-image:url("media/hive-env-poster.webp");
  background-size:cover; background-position:center;
}
@media(max-width:900px){
  #hiveEnv{background-image:url("media/hive-env-mobile-poster.webp");}
}


/* Readability: the plate is busier than the canvas wall was, so the content
   column keeps a well of shadow under it. Not a flat black sheet — the hive
   stays visible everywhere the words are not. */
/* Measured: the video changes by 47 units per pixel across a full scroll, but
   the first version of this scrim let only 3.2 of that reach the screen — it
   was eating 93% of the motion and the environment read as static black.
   Darkening is now concentrated where type actually sits (the top bar, the
   centre column, the footer) and released everywhere else. */
#hiveEnv::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,4,3,.82) 0%, rgba(6,4,3,.14) 16%,
                            rgba(6,4,3,.14) 84%, rgba(6,4,3,.84) 100%),
    radial-gradient(46% 62% at 50% 50%, rgba(6,4,3,.58) 0%,
                                        rgba(6,4,3,.30) 58%, rgba(6,4,3,0) 100%);
}
@media(max-width:900px){
  /* the phone shows the poster, not the video, so this only has to protect
     type over a still image */
  #hiveEnv::after{
    background:
      linear-gradient(180deg, rgba(6,4,3,.88) 0%, rgba(6,4,3,.38) 14%,
                              rgba(6,4,3,.38) 86%, rgba(6,4,3,.90) 100%),
      radial-gradient(70% 60% at 50% 50%, rgba(6,4,3,.52) 0%, rgba(6,4,3,.20) 100%);
  }
}
@media(prefers-reduced-motion:reduce){
  .hive-env-vid{display:none;}
}

/* pointer light — one div, no canvas, no grid */
.hive-glow{
  position:absolute; top:0; left:0;
  width:520px; height:520px; border-radius:50%;
  opacity:0; pointer-events:none;
  mix-blend-mode:screen;
  will-change:transform, opacity;
  background:radial-gradient(closest-side,
    rgba(255,196,104,.30), rgba(245,168,37,.12) 42%, rgba(245,168,37,0) 72%);
}
@media(prefers-reduced-motion:reduce){ .hive-glow{display:none;} }

/* ── hero height on iOS Safari ─────────────────────────────────────────
   svh at every width, not only below 900px. On an iPad in landscape the old
   rule fell back to 100vh, which Safari measures with its toolbar hidden, so
   the bottom of the hero - the CTA and the scroll cue - started out under the
   toolbar. svh is the height with the toolbar showing, and it does not change
   as the toolbar hides; dvh would, resizing the hero mid-scroll and shifting
   the scroll progress that drives the environment video. vh stays first as
   the fallback for browsers without svh. */
#hero{height:100vh; height:100svh;}