.hero-video-wrapper {
	position: relative;
	width: 100%;
	height: 100%;             /* let parent control height (your hero section) */
	overflow: hidden;
}

/* Inner container keeps aspect ratio manageable */
.hero-video-embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	container-type: size;
}

.hero-banner-video-wrap {
	height: 100%;
	position: relative;
}

.hero-video-shield {
	position: absolute;
	inset: 0;
	z-index: 2;
	cursor: default;
}

.hero-banner-video-wrap .hero-inner {
	z-index: 3;
}

.hero-banner-video-wrap .hero-video-sound {
	position: absolute;
	right: 28px;
	bottom: 96px;
	z-index: 4;
	display: grid;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 12px;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #000;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.hero-banner-video-wrap .hero-video-sound:hover {
	background: #fff;
}

.hero-banner-video-wrap .hero-video-sound:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.hero-banner-video-wrap .hero-video-sound svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.hero-banner-video-wrap .hero-video-sound [data-sound-icon] {
	display: none;
}

.hero-banner-video-wrap .hero-video-sound[aria-pressed="false"] [data-sound-icon="muted"],
.hero-banner-video-wrap .hero-video-sound[aria-pressed="true"] [data-sound-icon="unmuted"] {
	display: block;
}

/* iframe acts like background-cover */
.hero-video-embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;

	/* Make sure video always covers hero (no black bars) */
	width: 177.78vh;   /* 100vh × 16/9 */
	height: 100vh;

	/* Fallback expansion for very wide screens */
	min-width: 100%;
	min-height: 100%;

	transform: translate(-50%, -50%);
	object-fit: cover;

	pointer-events: none;  /* keep hero overlay clickable */
}

.hero-internal .hero-video-embed {
    overflow: hidden;
}
.hero-internal .hero-banner-video-wrap .hero-banner {
    margin-top: 0;
}

/* Cover the actual banner, including the shorter internal/mobile layouts. */
@supports (width: 1cqw) {
    .hero-video-embed iframe {
        width: max(100cqw, 177.78cqh);
        height: max(100cqh, 56.25cqw);
    }
}