/* How it works — the hero film (.rl-hiw-hero namespace; assets/js/hiw-hero.js).
   One light-grey rounded panel at the clips' aspect (1920 x 896); the intro <video> stacks on the loop <video> and
   is hidden once the loop takes over (both show the same frame at that moment). Hooks: --hiw-hero-bg (panel colour,
   defaults to the clips' stage grey) and --hiw-hero-radius. */
.rl-hiw-hero__fig { position: relative; margin: 0; min-width: 0; width: 100%; }
.rl-hiw-hero__shot {
    position: relative; width: 100%; aspect-ratio: 1920 / 896; overflow: hidden; isolation: isolate;
    background: var(--hiw-hero-bg, #F3F4F6); border-radius: var(--hiw-hero-radius, 20px);
}
.rl-hiw-hero__video,
.rl-hiw-hero__poster {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    object-fit: cover; background: transparent; border: 0; pointer-events: none;
}
.rl-hiw-hero__video--loop { z-index: 1; opacity: 0; }
.rl-hiw-hero__video--intro { z-index: 2; }
.rl-hiw-hero__shot.is-loop .rl-hiw-hero__video--loop { opacity: 1; }
.rl-hiw-hero__shot.is-loop .rl-hiw-hero__video--intro { visibility: hidden; }