/* V2 hero, full-viewport photo, overlaid nav, lead, and giant blend name. */
.v2-hero{position:relative;min-height:600px;height:100svh;max-height:940px;overflow:hidden;background:var(--v2-bg2);color:var(--v2-fg)}
.v2-hero .photo{position:absolute;inset:0}
.v2-hero .photo img{width:100%;height:100%;object-fit:cover;filter:saturate(0.82) contrast(1.05);object-position:center 30%}
.v2-hero .hero-video{width:100%;height:100%;object-fit:cover;filter:saturate(0.82) contrast(1.05);object-position:center 30%}

/* Big sound-toggle badge, centered over the video. Two icon states (muted /
   unmuted) swapped via the .is-unmuted class, see the tay.js behavior that
   drives it. */
.v2-hero .hero-sound-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;width:84px;height:84px;border-radius:999px;border:1.5px solid rgba(237,241,246,0.55);background:rgba(15,19,25,0.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--v2-fg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .15s}
.v2-hero .hero-sound-toggle:hover{background:rgba(15,19,25,0.55);transform:translate(-50%,-50%) scale(1.05)}
.v2-hero .hero-sound-toggle svg{width:34px;height:34px}
.v2-hero .hero-sound-toggle .ic-unmuted{display:none}
.v2-hero .hero-sound-toggle.is-unmuted .ic-muted{display:none}
.v2-hero .hero-sound-toggle.is-unmuted .ic-unmuted{display:block}
.v2-hero .wash{position:absolute;inset:0;background:linear-gradient(105deg,rgba(12,15,20,0.80) 0%,rgba(12,15,20,0.36) 42%,transparent 66%),radial-gradient(1000px 640px at 78% 8%,rgba(126,163,214,0.30),transparent 62%),radial-gradient(900px 700px at 12% 92%,rgba(47,109,181,0.42),transparent 60%),linear-gradient(180deg,rgba(15,19,25,0.42) 0%,rgba(15,19,25,0.10) 38%,rgba(15,19,25,0.86) 82%,#0F1319 100%)}
.v2-hero .hero-top{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:16px;padding:22px 20px}
.v2-hero .hero-top .wordmark{font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:-0.01em;color:var(--v2-fg)}
.v2-hero .hero-top nav{display:none;gap:28px;margin-left:auto;font-size:14.5px;font-weight:500;color:rgba(237,241,246,0.82)}
.v2-hero .hero-top nav a:hover{color:#FFF}
.v2-hero .hero-top .cta{margin-left:auto;padding:11px 20px;font-size:14px}
.v2-hero .hero-lead{position:absolute;left:20px;right:20px;top:98px;z-index:4;max-width:640px}
.v2-hero .hero-lead h1{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,7vw,60px);line-height:1.05;letter-spacing:-0.025em;text-shadow:0 2px 30px rgba(10,13,18,0.55)}
.v2-hero .hero-lead h1 .a{color:var(--v2-accent-soft)}
.v2-hero .hero-lead p{margin:20px 0 26px;font-size:16px;line-height:1.62;color:rgba(237,241,246,0.88);max-width:540px;text-shadow:0 1px 18px rgba(10,13,18,0.6)}
.v2-hero .hero-lead .ctas{display:flex;gap:12px;flex-wrap:wrap}
.v2-hero .btn-cream{border:1.5px solid rgba(237,241,246,0.4);color:var(--v2-fg)}
.v2-hero .btn-cream:hover{background:rgba(237,241,246,0.1)}
.v2-hero .hero-name{position:absolute;left:0;right:0;bottom:22px;z-index:3;text-align:center;pointer-events:none}
.v2-hero .hero-name .l{display:block;font-family:var(--f-display);font-stretch:125%;font-weight:900;font-size:clamp(48px,13vw,164px);line-height:0.88;letter-spacing:0.005em;text-transform:uppercase;color:var(--v2-fg);mix-blend-mode:overlay;opacity:0.95}
.v2-hero .hero-name .l+.l{mix-blend-mode:normal;opacity:1;color:var(--v2-fg)}

/* Centered-statement lead layout, replaces the giant blend-mode name with the
   title/lede/CTAs, big and centered where the name used to sit. Opt in per
   block via the "Lead layout" control (leadLayout=centered). */
.v2-hero.lead-centered .hero-name{display:none}
.v2-hero.lead-centered .hero-lead{left:20px;right:20px;top:auto;bottom:36px;max-width:none;text-align:center}
.v2-hero.lead-centered .hero-lead h1{margin:0 auto;font-size:clamp(34px,9vw,84px)}
.v2-hero.lead-centered .hero-lead p{margin:18px auto 26px;max-width:520px}
.v2-hero.lead-centered .hero-lead .ctas{justify-content:center}

/* name-top: keeps the giant blend-mode name (unlike lead-centered, which
   hides it), stacked directly above the lead text as one group near the
   bottom of the hero, both centered, name on a single full-width line. */
.v2-hero.name-top{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;padding-bottom:40px}
.v2-hero.name-top .hero-name{position:relative;left:auto;right:auto;top:auto;bottom:auto;order:-1;display:flex;flex-wrap:nowrap;justify-content:center;margin-bottom:14px}
.v2-hero.name-top .hero-name .l{display:inline-block;font-size:clamp(20px,6vw,76px)}
.v2-hero.name-top .hero-name .l+.l{margin-left:0.22em}
.v2-hero.name-top .hero-lead{position:relative;left:auto;right:auto;top:auto;bottom:auto;order:1;max-width:none;text-align:center;margin-bottom:0}
.v2-hero.name-top .hero-lead h1{margin:0 auto;font-size:clamp(22px,3vw,34px);line-height:1.3;max-width:none}
.v2-hero.name-top .hero-lead p{margin:14px auto 24px;max-width:none;font-size:clamp(19px,2.75vw,31px)}
.v2-hero.name-top .hero-lead .ctas{justify-content:center}

/* Entrance, nav bar drops in, lead + name rise in staggered, on first paint only. */
.v2-hero .hero-top{animation:v2h-drop .7s cubic-bezier(.16,.8,.3,1) both}
.v2-hero .hero-lead{animation:v2h-rise .8s cubic-bezier(.16,.8,.3,1) .12s both}
.v2-hero .hero-name .l{animation:v2h-rise .9s cubic-bezier(.16,.8,.3,1) both}
.v2-hero .hero-name .l:nth-child(1){animation-delay:.22s}
.v2-hero .hero-name .l:nth-child(2){animation-delay:.32s}
@keyframes v2h-drop{from{opacity:0;transform:translateY(-14px)}}
@keyframes v2h-rise{from{opacity:0;transform:translateY(28px)}}