/* Scope native-control styling to the infographic; keep the hero controls intact. */
video.infographic-video::-webkit-media-controls { display: none !important; }
video.infographic-video::-webkit-media-controls-enclosure { display: none !important; }
video.infographic-video::-webkit-media-controls-panel { display: none !important; }
video.infographic-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
video.infographic-video:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

/* Hero playback controls: no overlay button. */
button.hero-film-control { display:none !important; }
video.hero-film::-webkit-media-controls,video.hero-film::-webkit-media-controls-enclosure,video.hero-film::-webkit-media-controls-panel,video.hero-film::-webkit-media-controls-start-playback-button { display:none !important; -webkit-appearance:none; }
video.hero-film:focus-visible { outline:2px solid currentColor; outline-offset:-4px; }

/* iOS motion fallbacks must occupy exactly the same layer and geometry as the videos they replace. */
.hero-motion-fallback {
  display: none !important;
  pointer-events: none !important;
  user-select: none !important;
}
.hero-fallback-active > video.hero-film {
  visibility: hidden !important;
}
.hero-fallback-active > img.hero-film.hero-motion-fallback {
  display: block !important;
  visibility: visible !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.hero-fallback-active > .hero-film-shade {
  z-index: 1 !important;
}
.hero-fallback-active button.hero-film-control {
  display: none !important;
  visibility: hidden !important;
}
.infographic-motion-fallback {
  display: block !important;
  pointer-events: none !important;
  user-select: none !important;
}