/* Full-bleed statement hero (home page).
   The rest of the site is inline-styled; these rules live in CSS because they need
   :has(), @supports and media queries, which inline styles cannot express. */

/* Media fills the stage. */
.bsg-hero-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }

/* The scrim sits between the footage and the text: left-weighted so the headline
   stays legible over any frame while the right of the shot still reads, plus a
   vertical pass so the eyebrow and the buttons keep their edges. */
.bsg-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.70) 44%, rgba(0,0,0,.38) 100%),
    linear-gradient(180deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.88) 100%);
}

/* Oversized display type. Brand weight (Inter Black Italic, uppercase) at the
   reference's scale and leading: fluid up to 132px, line-height .95, tight tracking. */
.bsg-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(34px, 6.4vw, 108px);
  line-height: .95;
  letter-spacing: -.022em;
  color: var(--bsg-white);
}
.bsg-hero-title > span {
  display: block;
  animation: bsg-word-rise 760ms var(--ease-out) both;
}

.bsg-hero-lede {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: var(--leading-relaxed);
  color: var(--neutral-800);
  animation: bsg-word-rise 760ms var(--ease-out) 420ms both;
}

@media (prefers-reduced-motion: reduce) {
  .bsg-hero-title > span,
  .bsg-hero-lede { animation: none }
  .bsg-hero-scrim { transition: none }
}

/* Below the tablet break the viewport-locked height stops earning its keep. */
@media (max-width: 860px) {
  .bsg-hero-stage { min-height: auto }
}