/* ═════════════════════════════════════════════════════════════════
   Hero — full-width stage with animation and frame overlay
   ═════════════════════════════════════════════════════════════════ */

.hero-stage {
    position: relative;
    z-index: 1;                      /* sit above .stage-tile */
    width: 100vw;
    margin-left: calc(-50vw + 50%);  /* break out of body padding */
    overflow: hidden;
    aspect-ratio: 3840 / 2150;       /* locks height to match the stage image */
}

/* The transparent stage bridges the cropped video to the next stage tile. */
.hero-stage .hero-stage-background,
.hero-stage .hero-video {
    position: absolute;
    width: 100%;
    display: block;
    pointer-events: none;
}

.hero-stage .hero-stage-background {
    inset: 0;
    z-index: 0;
    height: 100%;
}

/* The MP4 is cropped to 95% of the stage height. */
.hero-stage .hero-video {
    top: 0;
    left: 0;
    z-index: 1;
    height: auto;
}

/* Decorative frame overlay — sits above the nav in z-order */
.hero-stage .hero-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
    display: block;
}