/* Hero (Media) — tokens only. Raw px retained where they are Figma-exact design constants (noted inline). */
.rw-block-hero-media {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh;
  background: var(--rw-color-dark-surface);
  color: var(--rw-color-white);
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* WHY translate3d + backface-hidden on video: forces a stable compositor layer, preventing the
   repaint flash observed when the section enters/leaves the viewport during scroll. */
.rw-block-hero-media .bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  transform: translate3d(0, 0, 0); backface-visibility: hidden; will-change: transform;
}
.rw-block-hero-media .overlay-top,
.rw-block-hero-media .overlay-bottom { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
/* WHY no scaleY(-1) / no per-layer opacity: gradients are pre-composited in tokens
   (see global-styles.css) so we avoid extra transforms that cause scroll-time flash. */
/* WHY %: heights follow Figma ratios (390/898 ≈ 43%, 537/898 ≈ 60%) rather than fixed pixels
   so shadows scale with the section. */
.rw-block-hero-media .overlay-top { top: 0; height: 43%; background: var(--rw-gradient-hero-overlay-top); }
.rw-block-hero-media .overlay-bottom { bottom: 0; height: 60%; background: var(--rw-gradient-hero-overlay-bottom); }
.rw-block-hero-media .rw-container { position: relative; z-index: 2; width: 100%; }
.rw-block-hero-media .content {
  max-width: 56rem;
  /* Editor overrides --rw-block-pt/pb (and -m variants) via rw_block_padding_style(). */
  padding-block: var(--rw-block-pt, var(--rw-section-py)) var(--rw-block-pb, 1.75rem);
  display: flex; flex-direction: column; gap: var(--rw-space-md);
}
@media (max-width: 768px) {
  .rw-block-hero-media .content {
    padding-block:
      var(--rw-block-ptm, var(--rw-block-pt, var(--rw-section-py)))
      var(--rw-block-pbm, var(--rw-block-pb, 1.75rem));
  }
}
/* Eyebrow base + yellow mark come from global .rw-eyebrow utility.
   On dark hero, flip the text to white (mark stays yellow). */
.rw-block-hero-media .rw-eyebrow { color: var(--rw-color-white); }
.rw-block-hero-media h1 {
  /* Figma 693:7195 — 68px desktop, 32px mobile via global clamp. */
  font-size: var(--rw-h1-size);
  line-height: var(--rw-h1-line);
  letter-spacing: var(--rw-h1-tracking);
  color: var(--rw-color-white);
}
.rw-block-hero-media .body {
  max-width: 47.3rem; margin: 0; color: rgba(255, 255, 255, 0.80);
  font-size: var(--rw-p1-size);
  /* Figma 693:7195 — hero body is tighter than canonical P1 (23px vs 28px). */
  line-height: 1.28;
  letter-spacing: -0.016em;
}
.rw-block-hero-media .ctas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--rw-space-xs); margin-top: 1rem; }
.rw-block-hero-media .primary-group { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.rw-block-hero-media .btn-primary,
.rw-block-hero-media .btn-glass {
  display: inline-flex; align-items: center;
  height: 3.125rem; /* Figma-exact 50px */
  padding: 0 var(--rw-space-md);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border: 0;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease;
}
.rw-block-hero-media .btn-primary {
  background: var(--rw-color-primary-yellow); color: var(--rw-color-primary-blue);
  border-radius: var(--rw-radius-sm); font-size: 1rem;
}
.rw-block-hero-media .btn-primary:hover { background: var(--rw-color-primary-yellow-hover); }
.rw-block-hero-media .btn-glass {
  gap: var(--rw-space-xs);
  background: var(--rw-color-glass-bg);
  backdrop-filter: blur(var(--rw-blur-glass));
  -webkit-backdrop-filter: blur(var(--rw-blur-glass));
  color: var(--rw-color-white); border-radius: var(--rw-radius-xs); font-size: 14px;
}
.rw-block-hero-media .btn-glass:hover { background: var(--rw-color-glass-bg-hover); }
/* Tertiary on dark — pair button mode (Figma 636:514). */
.rw-block-hero-media .btn-tertiary-on-dark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3.125rem;
  padding: 0 var(--rw-space-md);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--rw-radius-sm);
  color: var(--rw-color-white); background: transparent;
  font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease;
}
.rw-block-hero-media .btn-tertiary-on-dark:hover {
  background: var(--rw-color-white); color: var(--rw-color-primary-blue);
}
.rw-block-hero-media .btn-tertiary-on-dark:focus-visible { outline: none; box-shadow: var(--rw-state-focus-ring); }
/* Solid white-on-dark — solo CTA mode (Figma 636:514 -> 1009:4849 hover). */
.rw-block-hero-media .btn-solid-on-dark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3.125rem;
  padding: 0 var(--rw-space-md);
  background: var(--rw-color-white);
  color: var(--rw-color-primary-blue);
  border: 1px solid var(--rw-color-white);
  border-radius: var(--rw-radius-sm);
  font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease;
}
.rw-block-hero-media .btn-solid-on-dark:hover {
  background: var(--rw-color-primary-yellow);
  border-color: var(--rw-color-primary-yellow);
}
.rw-block-hero-media .btn-solid-on-dark:focus-visible { outline: none; box-shadow: var(--rw-state-focus-ring); }
.rw-block-hero-media .ctas-pair { align-items: center; }
/* Play icon uses brand yellow (distinct from button text colour). */
.rw-block-hero-media .btn-glass-icon { color: #F5C000; }
.rw-block-hero-media .btn-primary:focus-visible,
.rw-block-hero-media .btn-glass:focus-visible { outline: none; box-shadow: var(--rw-state-focus-ring); }
.rw-block-hero-media .microcopy {
  margin: 0;
  color: var(--rw-color-on-dark-muted); font-size: 0.75rem; letter-spacing: 0.02em;
}
/* Video modal styling shared with testimonials-slider via .rw-video-dialog in global-styles.css. */

@media (max-width: 767px) {
  .rw-block-hero-media .microcopy { font-size: 14px; }
  .rw-block-hero-media h1 { letter-spacing: -0.072rem; }
}