/* =====================================================================
   VEM — Hero (§01) + see-through header
   ===================================================================== */

/* ----------------------------- Header ------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(12px, 1.5vw, 22px);
  padding: clamp(16px, 2.4vw, 26px) clamp(14px, 2vw, 34px);
  background: transparent;
  transition: background var(--dur-mid) var(--ease-soft),
              box-shadow var(--dur-mid) var(--ease-soft),
              padding var(--dur-mid) var(--ease-soft);
}
/* Once scrolled past the hero lip → solid navy bar. (No backdrop-filter: a
   fixed, blurred header sampling the actively-transforming hero parallax
   underneath it on every composited frame was the confirmed cause of scroll
   judder — removed rather than tuned, since blur intensity can't guarantee
   the cost goes away, only reduce it. Opacity raised from 0.82 to compensate
   for the lost frosted-glass depth.) */
.site-header.is-scrolled {
  background: rgba(9, 18, 38, 0.94);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 10px 30px -18px rgba(0,0,0,0.55);
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  line-height: 1;
}
.brand__icons { display: inline-flex; align-items: center; }
.brand__icon { height: 38px; width: 46px; object-fit: contain; display: block; flex: none; }
.brand__icon--navy { display: none; }   /* default = white icon (dark/scrolled header) */
.brand__icon--white { display: block; }
.brand__fallback {
  display: none;               /* shown only if the icon img fails */
  font-family: var(--font-logo);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 1.5rem;
  color: var(--vem-white);
}
.brand__word {
  font-family: var(--font-logo);
  font-weight: 600;
  letter-spacing: 0.11em;
  font-size: 0.76rem;
  text-transform: uppercase;
  color: var(--on-dark-80);
  white-space: nowrap;
}
@media (max-width: 560px) {
  /* Logo + name on mobile — larger & bolder so it reads clearly */
  .brand__word { font-size: 0.74rem; letter-spacing: 0.03em; font-weight: 700; }
  .brand__icon { height: 34px; width: 42px; }
  .brand { gap: var(--space-2); }
}
@media (max-width: 360px) {
  .brand__word { font-size: 0.62rem; letter-spacing: 0.02em; }
}

/* Desktop: flatten nav so links + actions sit directly in the header grid
   (links centered in the middle column, actions pinned right). */
.nav { display: contents; }
.nav__panel { display: contents; }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.1vw, 18px);
  list-style: none;
  justify-self: center;
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 14px);
  justify-self: end;
}

.nav__link {
  font-size: var(--fs-200);
  letter-spacing: 0.02em;
  color: var(--on-dark-80);
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-soft);
}
/* dropdown trigger is a button that looks like a nav link */
.nav__trigger {
  font-family: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav__chev { width: 11px; height: 11px; transition: transform var(--dur-fast) var(--ease-soft); }
.has-dropdown:hover .nav__chev,
.has-dropdown.is-open .nav__chev { transform: rotate(180deg); }

.nav__item.has-dropdown { position: relative; }
.nav__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 224px;
  margin-top: 8px;
  background: var(--vem-white);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px -22px rgba(11, 31, 68, 0.45), 0 1px 0 rgba(11,31,68,0.04);
  padding: var(--space-3);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
  z-index: 20;
}
.nav__menu::before {            /* invisible hover bridge to the trigger */
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
.has-dropdown:hover .nav__menu,
.has-dropdown:focus-within .nav__menu,
.has-dropdown.is-open .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__menu a {
  display: block;
  padding: 9px 14px;
  border-radius: 6px;
  color: var(--vem-navy);
  font-size: var(--fs-200);
  white-space: nowrap;
  text-shadow: none !important;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.nav__menu a:hover { background: var(--vem-gray); color: var(--accent-deep); }

/* ---------- Nested submenu ("Disclosures") — desktop flyout ---------- */
.nav__subitem.has-submenu { position: relative; }
.nav__subtrigger {
  font-family: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 6px;
  color: var(--vem-navy);
  font-size: var(--fs-200);
  text-align: left;
  white-space: nowrap;
  text-shadow: none !important;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.has-submenu:hover .nav__subtrigger,
.has-submenu:focus-within .nav__subtrigger,
.has-submenu.is-open .nav__subtrigger { background: var(--vem-gray); color: var(--accent-deep); }
.nav__chev--sub { width: 10px; height: 10px; transform: rotate(-90deg); }  /* points right toward the flyout */

.nav__submenu {
  position: absolute;
  top: calc(var(--space-3) * -1);
  left: 100%;
  margin-left: 6px;
  min-width: 248px;
  background: var(--vem-white);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px -22px rgba(11, 31, 68, 0.45), 0 1px 0 rgba(11,31,68,0.04);
  padding: var(--space-3);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
  z-index: 21;
}
.nav__submenu::before {            /* invisible hover bridge across the gap */
  content: "";
  position: absolute;
  top: 0; left: -12px; width: 12px; height: 100%;
}
.has-submenu:hover .nav__submenu,
.has-submenu:focus-within .nav__submenu,
.has-submenu.is-open .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}
.nav__link:hover { color: var(--vem-white); }
.nav__link:hover::after { transform: scaleX(1); }

/* ---------- Mobile menu (slide-in panel + accordion dropdowns) ---------- */
@media (max-width: 1180px) {
  .site-header { display: flex; justify-content: space-between; align-items: center; }
  .site-header .nav__toggle { display: inline-flex; }   /* higher specificity so it beats the base display:none */
  .nav__panel {
    display: flex;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 380px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: var(--space-9) var(--gutter) var(--space-8);
    background: var(--vem-navy-dark);
    box-shadow: -20px 0 60px -20px rgba(0, 0, 0, 0.6);
    transform: translateX(100%);
    transition: transform var(--dur-mid) var(--ease-out);
    overflow-y: auto;
    z-index: 60;
    /* Give the off-screen drawer its own compositing layer from the start.
       Without this, mobile browsers (esp. iOS Safari) sometimes fail to PAINT
       the first slide-in — the menu looks like it "only does the top" until a
       later reflow (closing/re-opening) forces a repaint. Promoting the layer
       up front makes the very first open paint correctly. */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .menu-open .nav__panel { transform: none; }
  /* CRITICAL: while the drawer is open, drop the header's backdrop-filter.
     Once scrolled, `.is-scrolled` adds `backdrop-filter: blur()`, and a
     backdrop-filtered element becomes the CONTAINING BLOCK for its fixed
     descendants — which clips the fixed drawer to the header's height, so the
     menu shows only the top item or two. Removing the filter while open lets
     the drawer anchor to the viewport again and show the full nav. The header
     sits behind the drawer + scrim here, so dropping the blur isn't visible. */
  .site-header.menu-open,
  .site-header.is-scrolled.menu-open {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__links > li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .nav__link, .nav__trigger {
    color: var(--vem-white) !important;
    width: 100%;
    justify-content: space-between;
    padding: 16px 0;
    font-size: var(--fs-400);
    text-shadow: none !important;
  }
  .nav__link::after { display: none; }
  .nav__menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; margin: 0; padding: 0 0 10px 14px;
    background: transparent; box-shadow: none;
    max-height: 0; overflow: hidden;
    transition: max-height var(--dur-mid) var(--ease-soft);
  }
  .nav__menu::before { display: none; }
  .has-dropdown.is-open .nav__menu { max-height: 640px; transform: none; }
  .nav__menu a { color: var(--on-dark-80); padding: 10px 0; }
  .nav__menu a:hover { background: transparent; color: var(--accent-soft); }

  /* Nested "Disclosures" submenu — collapses to an inline accordion on mobile */
  .nav__subtrigger {
    color: var(--on-dark-80) !important;
    width: 100%;
    justify-content: space-between;
    padding: 10px 0;
    font-size: var(--fs-300);
  }
  .nav__chev--sub { transform: rotate(0deg); }            /* points down in the stacked list */
  .has-submenu.is-open .nav__chev--sub { transform: rotate(180deg); }
  .nav__submenu {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; margin: 0; padding: 0 0 6px 14px;
    background: transparent; box-shadow: none;
    max-height: 0; overflow: hidden;
    transition: max-height var(--dur-mid) var(--ease-soft);
  }
  .nav__submenu::before { display: none; }
  .has-submenu.is-open .nav__submenu { max-height: 320px; }
  .nav__submenu a { color: var(--on-dark-80); padding: 10px 0; }
  .nav__actions {
    flex-direction: column; align-items: stretch; gap: var(--space-4);
    width: 100%; margin-top: var(--space-6);
  }
  .nav__actions .nav__phone { color: var(--on-dark-80) !important; justify-content: center; padding: 8px 0; }
  .nav__actions .btn { width: 100%; justify-content: center; }
  /* dim scrim behind the open panel */
  .site-header.menu-open::after {
    content: ""; position: fixed; inset: 0;
    background: rgba(11, 31, 68, 0.5); z-index: 55;
  }
  /* hamburger → X */
  .menu-open .nav__toggle span { background: transparent; }
  .menu-open .nav__toggle span::before { top: 0; transform: rotate(45deg); }
  .menu-open .nav__toggle span::after { top: 0; transform: rotate(-45deg); }
}

/* Phone in the header (Aaron's request) */
.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--on-dark-100);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-soft);
}
.nav__phone svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.nav__phone:hover { color: var(--accent); }
@media (max-width: 560px) { .nav__phone span { display: none; } }

/* Legibility for header items over the bright side of the hero image
   (negligible once the navy bar kicks in on scroll) */
.site-header:not(.is-scrolled) .nav__link,
.site-header:not(.is-scrolled) .nav__phone,
.site-header:not(.is-scrolled) .brand__word {
  text-shadow: 0 1px 3px rgba(11, 31, 68, 0.45);
}

/* .btn/.btn--gold/.btn--ghost/.btn--sm now live in tokens.css (single source of truth) */

/* mobile menu toggle (hamburger) */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  display: block;
  width: 18px; height: 1.5px;
  background: var(--vem-white);
  position: relative;
  transition: transform var(--dur-fast) var(--ease-soft);
}
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after  { position: absolute; top: 6px; }
/* (mobile nav handled in the slide-in panel block above) */

/* ------------------------------ Hero ------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: clip;
  background: var(--vem-navy-dark);
  isolation: isolate;
}

/* Video / poster sits on the back parallax layer */
.hero__media {
  position: absolute;
  /* ALL parallax bleed at the BOTTOM. A top bleed (-8% previously) parked the
     top ~74px of the photo — the subject's head — above the viewport. The JS
     parallax only drifts this layer DOWN (see the translate3d magnitude in
     js/hero.js — currently 55% max) and the page scrolls away faster than the
     drift, so the top edge never needs bleed. */
  inset: 0 0 -16% 0;
  z-index: 0;
  will-change: transform;
}
/* Hero parallax is driven by js/hero.js (scrollY-only, rAF, passive — INP-safe)
   rather than CSS `animation-timeline: scroll()`, because that feature isn't yet
   universal and Firefox/older Safari would otherwise show no parallax at all.
   `will-change: transform` above keeps the JS transform on its own layer. */
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* `top`: if any viewport ratio ever forces a vertical crop (e.g. ultrawide),
     it comes off the bottom — never the top of the subject's head. */
  object-position: center top;
  z-index: 0;
  /* Own compositor layer, independent of .hero__media's scroll-driven layer
     above it. Without this, the browser has to repaint the poster's pixels
     into the parent layer on every Ken-Burns tick AND every scroll-driven
     parent transform — the two compounding is what caused the scroll judder.
     Promoting this element lets both transforms be pure GPU recomposites. */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* (.hero__video rules removed — the video is commented out in index.html; its
   markup is kept there as the documented revert path.) */

/* Ken-Burns: the still breathes — a very slow, barely-there push so the hero
   never looks frozen. Lives on the poster (inner layer) so it composes cleanly
   with the JS scroll/cursor parallax written to .hero__media. Whisper, not zoom.
   HARD CONSTRAINT: the top of the image (the subject's head) must NEVER crop.
   transform-origin Y is 0% — the top edge is the scale anchor, so zooming can
   only push the image down/sideways, never up — and the pan has no upward
   component. Drift is horizontal-only. */
@media (prefers-reduced-motion: no-preference) {
  .hero__poster {
    transform-origin: 55% 0%;
    animation: heroKenBurns 34s var(--ease-soft) infinite alternate;
  }
}
@keyframes heroKenBurns {
  from { transform: scale(1.01) translate3d(0, 0, 0); }
  /* pan capped at -1.2%: at scale 1.035 anything past ~-1.5% pulls the image's
     right edge inside the frame and exposes a navy sliver. Y pan stays 0 —
     any negative Y would crop the top of the subject's head. */
  to   { transform: scale(1.035) translate3d(-1.2%, 0, 0); }
}

/* Scrim stack: directional left-dark for the headline landing zone,
   plus a navy multiply to bind the footage to the brand, plus bottom vignette. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* PREVIEW: single left-anchored gradient only (no top-to-bottom pass, no
     flat full-surface wash) — the still image now supplies its own dark
     negative space on the left, so only the headline zone needs darkening
     and the right side of the image is left to breathe. */
  background:
    linear-gradient(90deg,
      rgba(11,31,68,0.74) 0%,
      rgba(11,31,68,0.46) 34%,
      rgba(11,31,68,0.16) 60%,
      rgba(11,31,68,0.00) 100%),
    /* top pass — the hero image's upper-left is a bright dusk sky, exactly
       where the headline sits, so darken the top band (fades out by ~68%). */
    linear-gradient(180deg,
      rgba(11,31,68,0.46) 0%,
      rgba(11,31,68,0.10) 42%,
      rgba(11,31,68,0.00) 68%);
  pointer-events: none;
}
/* Faint grain for depth (no extra request — pure CSS) */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.05;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,0.6) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  /* Promotes the static grain texture to its own layer so it's rasterized
     once instead of repainted alongside the poster/media layers moving
     beneath it — the blend step itself still runs every frame (inherent to
     mix-blend-mode), but this removes the repaint half of that cost. */
  will-change: opacity;
}

/* Content */
.hero__inner {
  position: relative;
  z-index: var(--z-hero-content);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(120px, 16vh, 200px) var(--gutter) clamp(72px, 12vh, 140px);
  display: grid;
  grid-template-columns: 1fr;   /* card removed — content sits left over the image */
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero__content {
  max-width: 54ch;
  /* Also scroll-driven (see js/hero.js) — own layer for the same reason as
     .hero__poster above: avoids repainting a large text block every frame. */
  will-change: transform;
}
/* Soft navy text-shadow — legibility insurance for white text over the hero
   photo's brighter/varied areas (the dusk sky), without a harsh drop-shadow. */
.hero__eyebrow, .hero__title, .hero__lead { text-shadow: 0 2px 18px rgba(11, 31, 68, 0.45); }

/* (Hero credentials card CSS removed — the card element was deleted from the
   hero; the $231M AUM stat now lives in the stats bar below.) */

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-soft);   /* lighter blue — readable on the dark hero scrim */
  margin-bottom: var(--space-5);
}
.hero__eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--accent-soft);
  display: inline-block;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--vem-white);
  text-wrap: balance;
}
/* padding-bottom gives descenders (g, y, p) room inside the clip box;
   the negative margin keeps the visual line-spacing unchanged */
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.hero__title .line > span { display: block; }
/* Gold "shine" on the hero headline's emphasis — the site-wide signature
   (see css/tokens.css --shine-band / @keyframes vemGoldSweep). Delay lands
   the first sweep just after the line-rise entrance finishes. */
.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: transparent;
  background-color: var(--accent-soft);
  background-image: var(--shine-band);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: vemGoldSweep 5.5s var(--ease-soft) infinite;
  animation-delay: 1.1s;
}

/* Rotating headline — stacked slides crossfade; JS animates height per slide */
.hero__rotator { position: relative; }
.hero__rotator .hero__slide {
  position: absolute; top: 0; left: 0; right: 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
  pointer-events: none;
}
.hero__rotator .hero__slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
/* Pre-JS / no-JS fallback: the first headline holds the layout height */
.hero__rotator:not(.is-enhanced) .hero__slide:first-child { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .hero__rotator .hero__slide { transition: none; }
  .hero__rotator .hero__slide:not(.is-active) { display: none; }
  .hero__rotator .hero__slide.is-active { position: relative; }
}

.hero__lead {
  margin-top: var(--space-5);
  max-width: 54ch;
  font-size: var(--fs-500);
  line-height: 1.5;
  color: var(--on-dark-80);
  font-weight: 400;
}

.hero__actions {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* (Trust-strip CSS removed — the .hero__trust element was cut from the hero
   during the "clean + proof-early" trim.) */

/* Scroll cue, bottom-left */
.hero__cue {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(20px, 4vh, 40px);
  z-index: var(--z-hero-content);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-100);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-60);
}
.hero__cue-line {
  position: relative;
  width: 46px; height: 1px;
  background: rgba(255,255,255,0.25);
  overflow: hidden;
}
.hero__cue-line::after {
  content: "";
  position: absolute; inset: 0;
  width: 40%;
  background: var(--accent);
  animation: cueSlide 2.4s var(--ease-soft) infinite;
}
@media (max-width: 880px) { .hero__cue { display: none; } }

/* ---- Mobile hero: let the video read ----------------------------------
   On a tall portrait phone the full-bleed 16:9 video gets cropped to an
   unrecognizable center sliver AND is buried under stacked content (headline +
   lead + CTAs + credentials card). Fix: hide the supplementary card and trust
   strip, keep the hero to one screen, and bottom-align the text over a bottom-up
   navy gradient — so the upper screen is clean, readable footage and the
   headline stays legible at the bottom. */
@media (max-width: 760px) {
  .hero { min-height: 100svh; align-items: center; }
  .hero__inner {
    grid-template-columns: 1fr;
    padding-top: clamp(64px, 9vh, 88px);
    padding-bottom: clamp(40px, 8vh, 72px);
    gap: 0;
  }
  .hero__content { max-width: none; }
  /* Mobile hero = the SAME advisor still as desktop, via the <picture> mobile
     <source> (portrait crop, hero-advisor-mobile.jpg). The legacy 3-slide
     crossfade is retired. Nudge the framing toward the figure. */
  /* Vertical `top`: any crop comes off the bottom — never the subject's head. */
  .hero__poster { display: block; object-position: 72% top; }
  /* Keep the image clean — only the very bottom darkens, just enough for the
     headline/CTAs to read. No blue wash over the upper image. */
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(11, 31, 68, 0) 0%,
      rgba(11, 31, 68, 0) 44%,
      rgba(11, 31, 68, 0.28) 72%,
      rgba(11, 31, 68, 0.72) 100%);
  }
  /* Eyebrow sits over the brighter upper zone of the mobile crop — gold
     reads poorly there; switch to the same blue desktop's light-hero mode
     already uses. The gold headline emphasis (.hero__title em) stays gold
     per house style — it uses the base (non-light-hero) gold-shine rule. */
  .hero__eyebrow { color: var(--vem-blue-deep); }
  .hero__eyebrow::before { background: var(--vem-blue-deep); }
}

/* ------------------------- Entrance motion ------------------------- */
/* Headline mask-rise: each line wipes UP from behind its own overflow:hidden
   clip box (a premium reveal — crisper and more "grabbing" than a sideways
   fly-in). Pure transform, no opacity fade (the mask does the hiding). */
.hero__title .line > span {
  transform: translateY(112%);
  animation: lineRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero__title .line:nth-child(1) > span { animation-delay: 0.15s; }
.hero__title .line:nth-child(2) > span { animation-delay: 0.30s; }
.hero__title .line:nth-child(3) > span { animation-delay: 0.45s; }

/* Supporting elements: soft rise-fade, staggered after the headline */
.fade-up { opacity: 0; transform: translateY(22px); animation: riseFade 0.8s var(--ease-out) forwards; }
.hero__eyebrow.fade-up { animation-delay: 0.05s; }
.hero__lead.fade-up    { animation-delay: 0.62s; }
.hero__actions.fade-up { animation-delay: 0.74s; }
.hero__cue.fade-up     { animation-delay: 1.0s; }

@keyframes lineRise {
  from { transform: translateY(112%); }
  to   { transform: translateY(0); }
}
@keyframes riseFade {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cueSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* Reduced motion: no flight, no parallax travel — just present, gently faded */
@media (prefers-reduced-motion: reduce) {
  .hero__title .line > span,
  .fade-up {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero__cue-line::after { animation: none; }
  .hero__media { inset: 0; }
  .hero__title em {
    animation: none; background: none;
    color: var(--accent-soft); -webkit-text-fill-color: var(--accent-soft);
  }
}

/* =====================================================================
   Light frosted hero (body.light-hero)
   Same colonnade image — bright frosted-glass overlay, navy text,
   blue accents. The navy stat card stays and pops against the light.
   ===================================================================== */
/* Desktop only (min-width: 761px, the exact complement of the mobile
   @media (max-width: 760px) block above) — on mobile these rules were
   unguarded and silently overrode the mobile dark scrim / light text
   colors that mobile legibility depends on, since they carry equal
   specificity and sit later in source order. */
@media (min-width: 761px) {
  .light-hero .hero__scrim {
    background:
      linear-gradient(90deg,
        rgba(245, 247, 250, 0.68) 0%,
        rgba(245, 247, 250, 0.44) 40%,
        rgba(245, 247, 250, 0.14) 74%,
        rgba(245, 247, 250, 0.04) 100%),
      linear-gradient(180deg,
        rgba(245, 247, 250, 0.00) 58%,
        rgba(245, 247, 250, 0.26) 100%);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
  }
  .light-hero .hero__grain { mix-blend-mode: multiply; opacity: 0.04; }
}

/* Over the light hero (not scrolled): soft LIGHT vignette + NAVY logo/nav.
   On scroll → see-through blue bar → white logo/nav (base rules). */
.light-hero .site-header:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(245, 247, 250, 0.88) 0%, rgba(245, 247, 250, 0) 100%);
}
.light-hero .site-header:not(.is-scrolled) .brand__icon--navy { display: block; }
.light-hero .site-header:not(.is-scrolled) .brand__icon--white { display: none; }
.light-hero .site-header:not(.is-scrolled) .brand__word,
.light-hero .site-header:not(.is-scrolled) .nav__link,
.light-hero .site-header:not(.is-scrolled) .nav__phone {
  color: var(--vem-navy);
  text-shadow: none;
}
.light-hero .site-header:not(.is-scrolled) .nav__toggle {
  border-color: rgba(34, 49, 104, 0.30);
  background: rgba(34, 49, 104, 0.04);
}
.light-hero .site-header:not(.is-scrolled) .nav__toggle span,
.light-hero .site-header:not(.is-scrolled) .nav__toggle span::before,
.light-hero .site-header:not(.is-scrolled) .nav__toggle span::after {
  background: var(--vem-navy);
}
/* Client Login (ghost) on the light hero header — DESKTOP only.
   On mobile it lives inside the navy slide-in panel, so it stays white there. */
@media (min-width: 1181px) {
  .light-hero .site-header:not(.is-scrolled) .nav__actions .btn--ghost {
    color: var(--vem-navy);
    border-color: rgba(34, 49, 104, 0.35);
    background: transparent;
  }
  .light-hero .site-header:not(.is-scrolled) .nav__actions .btn--ghost:hover {
    background: rgba(34, 49, 104, 0.06);
    border-color: rgba(34, 49, 104, 0.6);
  }
}

/* Text → navy, accents → blue. Desktop only (min-width: 761px) — see the
   note above the .light-hero .hero__scrim block for why these must not
   apply on mobile. */
@media (min-width: 761px) {
  .light-hero .hero__eyebrow { color: var(--vem-blue-deep); }
  .light-hero .hero__eyebrow::before { background: var(--vem-blue-deep); }
  .light-hero .hero__title { color: var(--vem-navy); }
  /* Gold/blue "shine" — the site-wide signature (see css/tokens.css
     --shine-band / @keyframes vemGoldSweep). This was the original reference
     implementation the sweep was standardized from. */
  .light-hero .hero__title em {
    color: transparent;
    background-color: var(--accent);
    background-image: var(--shine-band);
    background-size: 300% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: vemGoldSweep 5.5s var(--ease-soft) infinite;
  }
  .light-hero .hero__lead { color: var(--vem-gray-text); }
  .light-hero .hero__cue { color: var(--vem-navy); }
  .light-hero .hero__cue-line { background: rgba(34, 49, 104, 0.30); }
  .light-hero .hero__cue-line::after { background: var(--vem-blue-deep); }

  /* Ghost button becomes dark-on-light IN THE HERO ONLY (other ghosts unaffected) */
  .light-hero .hero__actions .btn--ghost {
    background: transparent;
    color: var(--vem-navy);
    border-color: rgba(34, 49, 104, 0.35);
  }
  .light-hero .hero__actions .btn--ghost:hover {
    background: rgba(34, 49, 104, 0.06);
    border-color: rgba(34, 49, 104, 0.6);
  }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) {
  .light-hero .hero__title em {
    animation: none;
    background: none;
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
  }
}