/* ============================================================
   Hero background video
   Replaces the static hero photo with a looping, muted video.
   The Webflow-generated `.section.hero` background-image rule is
   left in place as a fallback (shown briefly before the video
   paints, or if the video fails to load) — the video and its dark
   overlay simply layer on top of it.
   ============================================================ */

.hero-bg-video {
  /* Sized to exactly fill .section.hero (inset:0 + 100%/100%), so it never
     overshoots the box — no clipping needed. Deliberately NOT using
     `overflow: hidden` on .section.hero here, since that would also clip
     the mobile nav's dropdown/mega-menu, which is designed to expand
     below the hero box on short mobile viewports. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  /* Matches the ~60% black overlay the original linear-gradient(#0009, #0009)
     background layered over the static hero photo. */
  background-color: rgba(0, 0, 0, .6);
  z-index: 1;
}

/* Real content stacks above the video + overlay. .container.hero (which
   holds the nav, including its mobile dropdown menu) must stack ABOVE
   .quick-link-wrapper — otherwise, since they're siblings with equal
   z-index, the one later in DOM order (quick-link-wrapper) would win
   and the mobile nav dropdown would render behind the quick-links card. */
.container.hero {
  z-index: 3;
}

.quick-link-wrapper {
  /* already position:absolute (pinned to the bottom of the hero) — just
     needs to sit above the video/overlay, not change its positioning */
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-video { display: none; } /* falls back to the CSS background-image */
}