/* Only the index hero video is styled here; shared styles are untouched. */
#ind .yu-video-hero { position: relative; }
#ind .yu-video-hero video { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 846; object-fit: contain; background: #171717; }
#ind .yu-video-hero video[data-mode="mobile"] { aspect-ratio: 750 / 422; }
#ind .yu-video-hero > a::after { display: none; }
#ind .yu-video-hero .yu-video-toggle { position: absolute; right: 6px; bottom: 6px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; color: #fff; cursor: pointer; opacity: .8; }
#ind .yu-video-hero .yu-video-toggle[hidden] { display: none; }
#ind .yu-video-hero .yu-video-toggle:hover, #ind .yu-video-hero .yu-video-toggle:focus-visible { opacity: 1; }
#ind .yu-video-hero .yu-video-toggle:focus-visible { outline: 2px solid white; outline-offset: -5px; }
#ind .yu-video-hero .yu-video-toggle svg { display: block; width: 16px; height: 16px; fill: currentColor; filter: drop-shadow(0 1px 2px #000) drop-shadow(0 0 1px #000); pointer-events: none; }
#ind .yu-video-hero .yu-video-toggle .yu-video-pause { display: none; }
#ind .yu-video-hero .yu-video-toggle[data-playing="true"] .yu-video-play { display: none; }
#ind .yu-video-hero .yu-video-toggle[data-playing="true"] .yu-video-pause { display: block; }
#ind .yu-video-hero video:not([data-mode]) { display: none; }

/* Desktop: center the control below the image content, away from side banners. */
@media screen and (min-width: 751px) {
  #ind .yu-video-hero .yu-video-toggle {
    left: 50%;
    right: auto;
    bottom: 16px;
    transform: translateX(-50%);
    opacity: .55;
  }
  #ind .yu-video-hero .yu-video-toggle svg {
    width: 32px;
    height: 32px;
    filter: none;
  }
  #ind .yu-video-hero .yu-video-toggle:hover,
  #ind .yu-video-hero .yu-video-toggle:focus-visible {
    opacity: 1;
  }
  #ind .yu-video-hero .yu-video-toggle:hover svg,
  #ind .yu-video-hero .yu-video-toggle:focus-visible svg {
    filter: drop-shadow(0 1px 2px #000);
  }
}
