.hero-media { margin-bottom: 0; border-color: transparent; border-bottom-width: 0; border-radius: var(--media-radius) var(--media-radius) 0 0; box-shadow: none; isolation: isolate; }
/* Only the decorative frame extends beyond Hero; the video stays fully visible. */
.hero-media::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--media-border));
  bottom: calc(-1 * (var(--media-radius) + var(--media-border)));
  z-index: -1;
  border: var(--media-border) solid #ffffff1a;
  border-radius: var(--media-radius);
  box-shadow: 0 0 62px -18px #ff080f4d, 0 36px 90px -12px #0000009e;
  pointer-events: none;
}
.hero-player-mount { aspect-ratio: 16 / 9; background: #000; border-radius: calc(var(--media-radius) - var(--media-border)) calc(var(--media-radius) - var(--media-border)) 0 0; }
.hero-video, .hero-player { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; border-radius: calc(var(--media-radius) - var(--media-border)) calc(var(--media-radius) - var(--media-border)) 0 0; }
.hero-video { object-fit: contain; }
.hero-player {
  --media-accent-color: var(--brand);
  --media-border-color: transparent;
  --media-border-radius: calc(var(--media-radius) - var(--media-border)) calc(var(--media-radius) - var(--media-border)) 0 0;
  --media-font-family: Onest, sans-serif;
  --media-object-fit: contain;
  --media-object-position: center;
  --media-scale-unit: 1rem;
}
.hero-player-error { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 12px; padding: 16px; overflow: auto; overscroll-behavior: contain; border-radius: inherit; background: #070708f2; text-align: center; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.hero-player-error > * { flex-shrink: 0; }
.hero-player-error .button { min-height: 44px; font-size: 14px; }
.hero-player-error a { text-decoration: underline; text-underline-offset: 3px; }