/* Cinematic Hero: the stage leads; business information remains live HTML below. */
.hero.hero--cinematic {
	padding: clamp(1.25rem, 3vw, 2.75rem) 0 clamp(3.5rem, 6vw, 6rem);
	background: radial-gradient(ellipse at 75% 15%, #123350 0, #081d32 42%, #061525 100%);
	color: #f3f5f8;
}

.hero--cinematic::after {
	display: none;
}

.hero--cinematic .hero__inner {
	width: min(calc(100% - 3rem), 80rem);
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.4rem, 3vw, 2.75rem);
}

.hero--cinematic .hero__visual-wrap {
	position: relative;
	width: 100%;
	min-width: 0;
}

.hero--cinematic .hero__visual {
	position: relative;
	isolation: isolate;
	margin: 0;
	width: 100%;
	min-height: 0;
	max-height: none;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	border: 1px solid rgba(168, 193, 221, 0.28);
	border-radius: clamp(0.75rem, 1.5vw, 1.4rem);
	background: #061525;
	box-shadow: 0 1.25rem 4rem rgba(0, 0, 0, 0.20);
}

.hero--cinematic .hero__visual::after {
	display: none;
}

.hero--cinematic .hero__poster,
.hero--cinematic .hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* The still remains underneath so every failure/finish has a visible fallback. */
.hero--cinematic .hero__poster {
	opacity: 1;
}

.hero--cinematic .hero__video {
	opacity: 0;
	transition: opacity 240ms ease;
	pointer-events: none;
}

.hero--cinematic [data-hero-state="playing"] .hero__video {
	opacity: 1;
}

.hero__controls {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	min-height: 3.25rem;
	padding-top: 0.35rem;
}

.hero__status {
	flex: 1 1 12rem;
	margin-right: auto;
	color: #c0cedd;
	font-size: 0.85rem;
	line-height: 1.6;
}

.hero__status:empty {
	display: none;
}

.hero__control {
	min-height: 2.75rem;
	padding: 0.55rem 0.95rem;
	border: 1px solid rgba(193, 213, 235, 0.32);
	border-radius: 0.5rem;
	background: rgba(5, 20, 36, 0.5);
	color: #e3eaf2;
	font: inherit;
	font-size: 0.85rem;
	line-height: 1.5;
	cursor: pointer;
}

.hero__control[hidden] {
	display: none;
}

.hero__control:hover {
	border-color: #d5b37b;
	background: #17334d;
}

.hero--cinematic :focus-visible {
	outline: 3px solid #e5c68e;
	outline-offset: 4px;
}

.hero--cinematic .hero__content {
	width: min(100%, 63rem);
	margin: 0 auto;
	text-align: center;
}

.hero--cinematic .eyebrow {
	margin-bottom: 1rem;
	color: #d6bc90;
}

.hero--cinematic h1 {
	max-width: none;
	margin: 0 auto 1.25rem;
	color: #f5f7fa;
	font-size: clamp(1.8rem, 3.05vw, 2.65rem);
	line-height: 1.55;
	text-wrap: balance;
}

.hero--cinematic .hero__summary {
	max-width: 56rem;
	margin: 0 auto;
	color: #c0cedd;
	font-size: clamp(1rem, 1.3vw, 1.125rem);
	line-height: 1.95;
}

.hero--cinematic .hero__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.35rem;
	width: fit-content;
	max-width: 100%;
	margin: 2rem auto 0;
	padding: 1rem 1.65rem;
	border: 1px solid rgba(185, 207, 229, 0.22);
	border-radius: 0.75rem;
	background: rgba(17, 43, 66, 0.6);
	color: #ecf1f6;
	box-shadow: none;
}

.hero--cinematic .hero__panel p,
.hero--cinematic .hero__panel strong {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
}

.hero--cinematic .hero__panel-label {
	color: #d6bc90;
}

@media (max-width: 38rem) {
	.hero--cinematic .hero__inner {
		width: calc(100% - 1.5rem);
		gap: 1.75rem;
	}

	.hero--cinematic .hero__visual {
		aspect-ratio: 5 / 6;
	}

	.hero--cinematic .hero__content {
		padding: 0 0.4rem;
	}

	.hero--cinematic .hero__panel {
		gap: 0.35rem 0.8rem;
		padding: 1rem;
	}

	.hero--cinematic .hero__panel-label {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero--cinematic .hero__video {
		transition: none;
	}
}