/* First HTML section: Hero
   ─────────────────────────────────────────────────────────────
   No-Scroll Hero Viewport Lock System:
   On landscape tablet (≥ 1024px) and desktop viewports, the initial
   viewport height (100vh) is divided precisely among 4 zones:
     Header  :  6vh
     Section 1 (Hero)          : 45vh
     Section 2 (Watch Banner)  :  7vh
     Section 3 (Feature Grid)  : 42vh
     ─────────────────────────────  100vh total
   Section 4 (Benefits strip) appears seamlessly below the fold.
   Portrait and mobile viewports retain their original aspect-ratio
   formulas to guarantee zero image cropping.
   ───────────────────────────────────────────────────────────── */

:root {
  --yellow: #ffd21f;
  --dark: #02080d;
  --white: #fff;

  /* ── DEFAULT: Mobile / Portrait fallback ──
     Uses the classic 75px header and aspect-ratio-based hero formula.
     These are overridden by the landscape desktop media query below. */
  --header-h: 75px;
  --avail-vh: calc(100vh - var(--header-h));
  --avail-dvh: calc(100dvh - var(--header-h));
  --hero-h: calc(100vw / 3);
  --banner-h: clamp(75px, 9.8vh, 88px);
  --grid-h: calc(var(--avail-dvh) - var(--hero-h) - var(--banner-h));
}

/* ── LANDSCAPE TABLET & DESKTOP (landscape, ≥ 601px) ──
   Applies the precise no-scroll 100vh split:
   7.5 + 43.5 + 7 + 42 = 100vh exactly. */
@media (orientation: landscape) and (min-width: 601px) {
  :root {
    --header-h: 7.5vh;
    --hero-h: 43.5vh;
    --banner-h: 7vh;
    --grid-h: 42vh;
  }
}

/* ── PORTRAIT VIEWPORTS (including 1032×1376, iPad Pro, Tablets & Phones) ──
   hero height = natural 3:1 aspect ratio → 100vw / 3  → zero cropping. */
@media (orientation: portrait) {
  :root {
    --hero-h: calc(100vw / 3);
    --banner-h: clamp(75px, 11vh, 155px);
    --grid-h: calc(var(--avail-dvh) - var(--hero-h) - var(--banner-h));
  }
}

/* Tablet Portrait refinement (601px – 1023px) */
@media (orientation: portrait) and (min-width: 601px) {
  :root {
    --hero-h: calc(100vw / 3);
    --banner-h: clamp(120px, 13.5vh, 155px);
    --grid-h: calc(var(--avail-dvh) - var(--hero-h) - var(--banner-h));
  }
}

/* Mobile Portrait refinement (≤600px, portrait) - Section 3 height reduced by 19% relative to its height */
@media (max-width: 600px) and (orientation: portrait) {
  :root {
    --hero-h: calc(100vw / 3);
    --banner-h: clamp(75px, 9.8vh, 88px);
    --grid-h: calc((var(--avail-dvh) - var(--hero-h) - var(--banner-h)) * 0.81);
  }
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--dark);
  margin: 0;
  padding: 0;
  min-height: 0 !important;
  height: var(--hero-h);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-picture {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* Image covers the complete section width on ALL screens and resolutions */
.hero-media {
  display: block;
  width: 100% !important;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


.eyebrow {
  font-size: 24px;
}

.hero h1 {
  margin: 4px 0 12px;
  font-size: clamp(44px, 5vw, 68px);
  line-height: .98;
}

.hero h1 span {
  color: var(--yellow);
}




.video-btn .icon {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -8px;
}

.video-btn span {
  font-size: 14px;
  text-align: left;
}


@media (max-width: 1023px) {
}

@media (max-width: 600px) {

  .eyebrow {
    font-size: 18px;
  }

  .hero h1 {
    font-size: 47px;
  }



}

@media (min-width: 1024px) {
}