/* ==========================================================================
   MAVI — hero-video.css
   Rendered HyperFrames kinetic-type video, full-bleed hero centerpiece.
   ========================================================================== */

.page-hero--video {
  padding-top: 0;
  padding-bottom: clamp(8px, 1vw, 14px);
}
/* The radial background sheen (static ::before glow + pointer-tracked
   .hero-glow) fights with the video for attention here, so it's switched
   off for this page's hero only — other pages still get the glow. */
.page-hero--video::before { content: none; }
.page-hero--video .hero-glow { display: none; }
.hero-video-stage {
  position: relative;
  width: 100%;
  height: min(88vh, 920px);
  min-height: 460px;
  margin-bottom: clamp(8px, 1vw, 14px);
  overflow: hidden;
}
.hero-video-stage video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vertical / portrait viewports: the video is a 16:9 landscape composition.
   Forcing it into a tall vh box crops the kinetic-type text off the sides,
   so instead let the box match the video's own ratio — full width, no crop.
   A little top padding keeps it from looking pasted directly under the
   (transparent, fixed) header instead of sitting inside its own frame. */
@media (max-width: 700px), (orientation: portrait) {
  .page-hero--video { padding-top: 84px; }
  .hero-video-stage {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}

.hero-cta-wrap {
  margin-top: clamp(8px, 1vw, 14px);
}

/* On narrow / portrait screens the video and the marquee both run edge to
   edge; the standard .wrap gutter around the CTA buttons then reads as an
   odd boxed-in rectangle between two full-bleed elements. Shrink the gutter
   and stack the buttons full-width so the whole hero reads as one piece. */
@media (max-width: 700px), (orientation: portrait) {
  .hero-cta-wrap { padding-inline: 16px; }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn { width: 100%; }
}