.rp-hero__layer--preview[role="button"] { cursor: pointer; pointer-events: all; }
.rp-hero__layer--preview:focus-visible { outline: none; }
.rp-hero__layer--preview:focus-visible .rp-hero__preview-play-ring {
  stroke: #fff;
  stroke-width: 3;
}
.hero-video-preview { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.hero-video-mobile {
  position: absolute;
  right: 24px;
  bottom: max(28px, env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 50%;
  background: rgba(2,3,3,.55);
  color: #f2f2ee;
  cursor: pointer;
  box-shadow: 0 0 20px color-mix(in srgb, var(--rp-global-accent, #ff5a1f) 20%, transparent);
}
.hero-video-mobile svg { width: 24px; height: 24px; }
.hero-video-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f2f2ee;
  overflow: hidden;
}
.hero-video-dialog::backdrop { background: transparent; }
.hero-video-backdrop { position: absolute; inset: 0; background: rgba(2,3,3,.96); }
.hero-video-surface {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  background: #020303;
  border: 1px solid var(--rp-global-accent, #ff5a1f);
  box-shadow: 0 0 30px color-mix(in srgb, var(--rp-global-accent, #ff5a1f) 24%, transparent);
}
.hero-video-film { display: block; width: 100%; height: 100%; object-fit: contain; background: #020303; }
.hero-video-close {
  position: absolute;
  z-index: 2;
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242,242,238,.6);
  border-radius: 0;
  background: rgba(2,3,3,.8);
  color: #f2f2ee;
  cursor: pointer;
}
.hero-video-close svg { width: 24px; height: 24px; }
.hero-video-close:hover { border-color: var(--rp-global-accent); }
.hero-video-close:focus-visible, .hero-video-mobile:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.hero-video-error {
  position: absolute;
  inset: auto 20px 80px;
  margin: 0;
  text-align: center;
  font: 400 14px/1.5 Montserrat, Arial, sans-serif;
}
.hero-video-error a { color: var(--rp-global-accent); }