.video-hero {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 100vh;
	overflow: hidden;
	background: #000;
}

.video-hero__video {
	display: block;
	width: 100% !important;
	max-width: none;
	height: auto !important;
	min-height: 0;
	object-position: center center;
	max-height: 100dvh;
}

.video-hero--fixed {
	height: 100vh;
}

.video-hero--fixed .video-hero__video {
	height: 100% !important;
	min-height: 100%;
	object-fit: cover;
}

.video-hero__toggle {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	padding: 0;
	color: #fff;
	font-family: "Safiro Medium", Sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: transparent !important;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	transition:
		opacity 180ms ease,
		transform 180ms ease;
	transform: translate(-50%, -50%);
}

.video-hero.is-unmuted.is-control-hidden .video-hero__toggle {
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0.92);
}

.video-hero.is-unmuted.is-control-visible .video-hero__toggle {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, -50%);
}

.video-hero__toggle.is-muted {
	background: transparent !important;
}

.video-hero__toggle.is-unmuted {
	background: transparent !important;
}

.video-hero__toggle:hover,
.video-hero__toggle:focus,
.video-hero__toggle:active,
.video-hero__toggle:visited {
	background: transparent !important;
	border-color: transparent;
	color: #fff;
	box-shadow: none;
	outline: none;
}

.video-hero__toggle.is-muted:hover,
.video-hero__toggle.is-muted:focus,
.video-hero__toggle.is-muted:active {
	background: transparent !important;
}

.video-hero__toggle.is-unmuted:hover,
.video-hero__toggle.is-unmuted:focus,
.video-hero__toggle.is-unmuted:active {
	background: transparent !important;
}

.video-hero__toggle:hover {
	transform: translate(-50%, -50%) scale(1.04);
}

.video-hero__toggle:focus {
	outline: none;
}

.video-hero__toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.video-hero__toggle:active {
	transform: translate(-50%, -50%) scale(0.96);
}

.video-hero__toggle-icon {
	display: none;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	flex: 0 0 64px;
}

.video-hero__toggle-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.video-hero__toggle.is-muted .video-hero__toggle-icon--muted,
.video-hero__toggle.is-unmuted .video-hero__toggle-icon--sound {
	display: inline-flex;
}

.video-hero__scroll-indicator {
	position: absolute;
	left: 50%;
	bottom: clamp(16px, 3vw, 32px);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #fff;
	/*pointer-events: none;*/
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
	animation: video-hero-scroll-cue 1800ms ease-in-out infinite;
}

.video-hero__scroll-indicator svg {
	display: block;
	width: 34px;
	height: 34px;
}

@keyframes video-hero-scroll-cue {
	0%,
	100% {
		opacity: 0.72;
		transform: translate(-50%, -2px);
	}

	50% {
		opacity: 1;
		transform: translate(-50%, 7px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.video-hero__scroll-indicator {
		animation: none;
		opacity: 0.85;
		transform: translate(-50%, 0);
	}
}

@media (max-width: 600px) {
	.video-hero__scroll-indicator {
		bottom: 14px;
		width: 38px;
		height: 38px;
	}

	.video-hero__scroll-indicator svg {
		width: 30px;
		height: 30px;
	}

	.video-hero__toggle {
		width: 68px;
		height: 68px;
		font-size: 12px;
	}

	.video-hero__toggle-icon {
		width: 54px;
		height: 54px;
		flex-basis: 54px;
	}
}