/* Hero. */

.hero-section {
	/* Filled band that normally comes first, so the gap layer is a margin and
	   defaults to none rather than the section scale's padding. */
	padding: 0;
	margin-top: var(--space-above, 0px);
}

.hero-section__band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Content box: 261px above / 261px below at 1728, 150 / 115 at 390. */
	padding-block: clamp(150px, 117.65px + 8.296vw, 261px)
	               clamp(115px, 72.44px + 10.912vw, 261px);
	padding-inline: var(--gutter);
	color: var(--white);
	background: var(--red-ink);
}

.hero-section__image,
.hero-section__video {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Both layers sit at -2, so the video paints over the still purely by coming
   later in the source - which is what makes the image a real fallback.

   It starts transparent and is only revealed on `playing`, because the
   source is attached by script after load: without this there is a window
   where an empty video box covers the still it is supposed to replace. */
.hero-section__video {
	pointer-events: none;
	opacity: 0;
	transition: opacity .6s ease;
}

.hero-section__video.is-playing {
	opacity: 1;
}

/* Reduced motion drops the video entirely and leaves the still, rather than
   pausing on an arbitrary frame. */
@media (prefers-reduced-motion: reduce) {
	.hero-section__video {
		display: none;
	}
}

/* Black 50% wash. */
.hero-section__band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, var(--hero-overlay, .5));
}

.hero-section__inner {
	position: relative;
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
}

.hero-section__heading > * {
	max-width: 822px;
	font-weight: 600;
	line-height: 1.29; /* mobile: 147px box over three 38px lines */
}

.hero-section__intro > * {
	max-width: 588px;
	margin-top: 10px; /* 405 -> 415 desktop, 297 -> 307 mobile */
	font-weight: 400;
}

.hero-section__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 30px; /* 467 -> 497 desktop */
}

@media (max-width: 767px) {
	/* Mobile centres the stack and runs the buttons full width. */
	.hero-section__heading > *,
	.hero-section__intro > * { margin-inline: auto; text-align: center; }
	.hero-section__actions { flex-direction: column; gap: 20px; margin-top: 20px; }
}

@media (min-width: 1024px) {
	.hero-section__heading > * { line-height: 1.06; } /* 72 / 68 at the 1728 frame */
}