/**
 * ============================================================
 * HOMEPAGE — HERO
 * Appended to style.css as a self-contained section.
 * ============================================================
 */

/* ── Full-viewport hero setup ─────────────────────────────── */
.home {
	overflow: hidden;
	height: 100vh;
	height: 100dvh; /* iOS Safari: excludes collapsing address bar */
}

.home .site-main {
	height: 100vh;
	height: 100dvh;
}

.hp-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	background-color: #111; /* prevents white flash before first image */
	overflow: hidden;
}

/* Top gradient so nav stays legible over any hero image */
.hp-hero::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 220px;
	background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 100%);
	z-index: 2;
	pointer-events: none;
}

/* ── Fixed transparent footer — homepage only ─────────────── */
.home .site-footer--transparent {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 50;
}

/* ── Image gallery wrapper ────────────────────────────────── */
.hp-hero__gallery {
	position: absolute;
	inset: 0;
}

/* Each slide: stacked, invisible by default */
.hp-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	/* --hero-fade is set at runtime by hero.js from the ACF field value.
	   Falls back to 1.2s if JS hasn't run yet. */
	transition: opacity var(--hero-fade, 1.2s) ease-in-out;
}

/* Active slide: fully visible */
.hp-hero__slide.is-active {
	opacity: 1;
}

/* Hero image: full cover */
.hp-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ── Video wrapper ────────────────────────────────────────── */
.hp-hero__media {
	position: absolute;
	inset: 0;
}

.hp-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ── Optional hero text — bottom-left, never centered ─────── */
.hp-hero__text-wrap {
	position: absolute;
	bottom: 6rem; /* above the footer social row */
	left: var(--container-pad);
	z-index: 10;
	pointer-events: none;
}

.hp-hero__text-line {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spa