.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--cream);
	overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--ink); }
.hero__video, .hero__image, .hero__placeholder { width: 100%; height: 100%; object-fit: cover; }
.hero__image, .hero__placeholder { position: absolute; inset: 0; }
.hero__placeholder { background: linear-gradient(160deg, var(--ink), #2a2722); }

/* YouTube background embed: iframes don't reliably honour object-fit across
   browsers, so this is the standard "oversize + center" cover technique —
   the iframe is sized off a fixed 16:9 ratio so it always fills
   .hero__media (overflow:hidden clips the excess) no matter the viewport's
   own aspect ratio, the same way background-size:cover would for an image.
   The extra scale(1.2) on top of that is deliberate overscan: at some
   viewport ratios the 16:9 cover math lands the iframe's own edge exactly
   on the container's edge with zero slack, which leaves YouTube's title
   bar / control chrome (a fixed strip along the top of the iframe's own
   canvas, drawn regardless of controls=0 or pointer-events) sitting right
   at the visible top edge. Scaling 20% larger about the centered origin
   guarantees real overscan on every side so overflow:hidden always clips
   that chrome out, on any aspect ratio. */
.hero__youtube {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	min-width: 177.78vh; /* height * 16/9 */
	min-height: 56.25vw; /* width * 9/16 */
	transform: translate(-50%, -50%) scale(1.2);
	border: 0;
	pointer-events: none;
	/* Masked behind the poster/placeholder until assets/js/hero-youtube.js
	   confirms actual playback (see .is-playing) — hides YouTube's idle/
	   paused-state button chrome, which no amount of cropping can remove
	   since it's centered in the visible video itself. */
	opacity: 0;
	transition: opacity 0.4s ease;
}

.hero__youtube.is-playing { opacity: 1; }

/* Respect reduced-motion preferences: keep the static poster/placeholder
   instead of forcing autoplaying motion on people who've asked their OS
   not to show it. */
@media (prefers-reduced-motion: reduce) {
	.hero__youtube { display: none; }
}

/* Mobile: static poster image instead of the video. Keeps autoplaying,
   YouTube-chrome-adjacent iframe weirdness off small screens entirely and
   saves mobile data/battery — .hero__image (hero_bg_image_fallback) is
   already rendered underneath in the markup whenever it's set, so hiding
   the iframe here is enough to reveal it. */
@media (max-width: 640px) {
	.hero__youtube { display: none; }
}

/* Darker floor than the old self-hosted-video scrim (0.35 minimum, dipping
   right where the headline sits) — the YouTube source swings from dark
   interiors to bright white building facades/sky, so contrast can't rely
   on the video staying dark. 0.72 minimum + a flat multiply layer keeps
   hero__headline/subtext (and the gold accent span, the weakest-contrast
   element) readable against the brightest frames, not just the average one. */
.hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,19,17,0.82) 0%, rgba(20,19,17,0.72) 40%, rgba(20,19,17,0.92) 100%);
}

/* .hero is a flex column with align-items:center, which sizes each flex
   child (this, .trust-ribbon below it) to its own CONTENT width by default
   and centers that box within the full-width section — not what we want
   for either. .trust-ribbon opts out with its own width:100% (trust-ribbon.css);
   this needs the same, or it shrink-wraps to the headline/CTA row's natural
   width and gets centered in the leftover space, which drifts further from
   trust-ribbon's left edge the more the two contents' natural widths differ
   (worse at wide viewports, since there's more leftover space to center
   into) — subtle at some widths, an obvious 500px+ gap at others. */
.hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: 120px;
	padding-bottom: 50px;
	max-width: 900px;
}

/* Widening to the same 1920px/100px boundary as .site-header__inner and
   .trust-ribbon.container (see that file's matching comment) so this box's
   own left padding — not flex centering — is what determines where the
   text starts, keeping it aligned with both. */
.hero__content.container {
	max-width: var(--container-max-width);
	padding-left: var(--container-padding-x);
	padding-right: var(--container-padding-x);
	padding-top: 0;
}

.hero__overline {
	color: var(--color-accent);
	font-family: var(--font-primary);
	text-transform: uppercase;
	letter-spacing: 2.42px;
	font-size: 12px;
	margin-bottom: 20px;
}

.hero__headline {
	font-size: clamp(40px, 6vw, 76px);
	margin-bottom: 28px;
	width: clamp(600px, 80%, 80%);
	max-width: 80%;
}

.hero__headline-accent { color: var(--color-accent); }

.hero__subtext {
	font-family: var(--font-primary);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-light);
	max-width: 560px;
	margin-bottom: 40px;
}

.hero__ctas { display: flex; gap: 20px; flex-wrap: wrap; }

/* Trust ribbon divider: sits right below the CTA row, using the same 40px
   rhythm as the other hero element gaps (see .hero__subtext margin-bottom). */
.hero__divider {
	width: 100%;
	height: 1px;
	background: rgba(245, 241, 235, 0.15);
	margin-top: 40px;
}

@media (max-width: 640px) {
	.hero__content.container { padding-top: 40px; }
	.hero__headline { font-size: clamp(32px, 6vw, 76px); width: 100%; max-width: 100%; }
	.hero__ctas .btn { width: 100%; }
}