/**
 * Featured Hero Carousel
 *
 * Everything tunable is a custom property on `.fhc`. Override them on the
 * element, in the theme, or per instance via the shortcode's `class` attribute.
 */

.fhc {
	/* Desktop stage height, per breakpoint. Full-bleed by default so the site
	   header floats over the image. For the source site’s fixed heights:
	   --fhc-h-sm: 560px; --fhc-h-md: 698px; --fhc-h-lg: 860px; --fhc-max-h: 85vh; */
	--fhc-h-sm: 100svh;
	--fhc-h-md: 100svh;
	--fhc-h-lg: 100svh;
	--fhc-max-h: 100svh;

	/* Alternative sizing used only by the `.fhc--aspect` modifier. */
	--fhc-aspect: 55%;
	--fhc-aspect-wide: 35%;

	/* How far the mobile title block sits off the bottom edge. Sized against the
	   viewport height so it holds its proportion on any phone. */
	--fhc-mobile-meta-bottom: clamp(3rem, 12svh, 7rem);

	/* Mobile stage height. Gate mode overrides this to the full viewport. */
	--fhc-mobile-h: 80svh;

	/* Motion. */
	--fhc-fade-ms: 150ms;
	--fhc-blur: 28px;
	--fhc-punch: 1.04;
	--fhc-frame-ms: 600ms;
	--fhc-frame-delay: 200ms;
	--fhc-gate-ms: 600ms;
	--fhc-stills-fade: 220ms;

	/* Play button. */
	--fhc-play-size: clamp(3.5rem, 5vw, 5rem);
	--fhc-play-size-inline: 2.75rem;

	/* Colour. */
	--fhc-bg: #000;
	--fhc-fg: #fff;
	--fhc-dim: 0.6;
	/* Reaches higher than a single row would need, because the title stack now
	   runs up the lower half of the frame. */
	--fhc-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 80%);
	--fhc-frame-width: 2px;
	--fhc-flash-cyan: #00e0ff;
	--fhc-flash-yellow: #ffe600;
	--fhc-flash-magenta: #ff00c8;
	--fhc-flash-green: #00ff85;

	/* Type. */
	--fhc-title-size: clamp(1.75rem, 3.4vw, 4rem);
	--fhc-title-size-mobile: clamp(2.25rem, 12vw, 3.5rem);
	--fhc-title-weight: 700;
	--fhc-title-tracking: -0.02em;
	--fhc-title-leading: 1.02;
	--fhc-title-gap: 0;
	--fhc-year-size: 0.28em;
	/* On mobile the year drops to its own line, so it is sized for reading
	   rather than as a superscript tick. */
	--fhc-year-size-mobile: 0.34em;
	--fhc-slide-fade: 300ms;
	/* Low enough that a theme’s sticky header still sits over the gate, the way
	   the source site keeps its own header visible. Raise it if the gate needs
	   to cover everything. */
	--fhc-gate-z: 90;

	position: relative;
	display: block;
	background: var(--fhc-bg);
	color: var(--fhc-fg);
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Full bleed
 *
 * Block and classic themes alike wrap page content in a constrained column,
 * so a hero placed with a shortcode inherits that column width. These margins
 * climb back out to the viewport edges, and are self-correcting: if the
 * element is already viewport-width the calc resolves to zero.
 *
 * --fhc-vw is set by the script to documentElement.clientWidth, because 100vw
 * includes the scrollbar and would overflow by its width.
 * ------------------------------------------------------------------------ */

.fhc--full {
	/* !important is deliberate: block themes set margin-left/right: auto with
	   !important on constrained children, so nothing weaker can escape the
	   column. The calc stays self-correcting either way. */
	width: auto !important;
	max-width: none !important;
	margin-inline: min(0px, calc(50% - var(--fhc-vw, 100vw) / 2)) !important;
}

.fhc *,
.fhc *::before,
.fhc *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * Mode switching
 *
 * The media queries are the pre-hydration and no-JS state. Once the script
 * runs it adds `is-desktop` / `is-mobile` using the configured breakpoint,
 * which has to win over them.
 * ------------------------------------------------------------------------ */

.fhc-desktop,
.fhc-mobile {
	display: none;
}

@media (min-width: 640px) {
	.fhc-desktop {
		display: block;
	}
}

@media (max-width: 639.98px) {
	.fhc-mobile {
		display: block;
	}
}

.fhc.is-desktop .fhc-desktop {
	display: block !important;
}

.fhc.is-desktop .fhc-mobile {
	display: none !important;
}

.fhc.is-mobile .fhc-mobile {
	display: block !important;
}

.fhc.is-mobile .fhc-desktop {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * Shared title type
 * ------------------------------------------------------------------------ */

.fhc-hero-title {
	/* Themes colour headings directly - Blocksy ships a bare h2 { color } rule -
	   and an explicit declaration beats the colour this would otherwise inherit
	   from .fhc. Saying inherit out loud is what keeps the title white over the
	   image instead of picking up the theme heading colour. */
	color: inherit;
	/* And themes underline headings that sit inside a link. Decoration set here
	   propagates to the title text and year, and no descendant can switch it off,
	   so it has to be cleared on the heading itself. */
	text-decoration: none;
	margin: 0;
	font-size: var(--fhc-title-size);
	font-weight: var(--fhc-title-weight);
	line-height: var(--fhc-title-leading);
	letter-spacing: var(--fhc-title-tracking);
	transition: opacity 220ms ease-out;
}

.fhc-hero-title-year {
	margin-left: 0.3em;
	font-size: var(--fhc-year-size);
	font-weight: 400;
	letter-spacing: 0;
	vertical-align: super;
	opacity: 0.9;
}

.fhc-title-link,
.fhc-slide-link {
	color: inherit;
	text-decoration: none;
}

.fhc-title-link:focus-visible,
.fhc-slide-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
 * Desktop: one shared image, all titles at once
 * ------------------------------------------------------------------------ */

.fhc-desktop {
	position: relative;
	height: var(--fhc-h-sm);
	max-height: var(--fhc-max-h);
}

@media (min-width: 1024px) {
	.fhc-desktop {
		height: var(--fhc-h-md);
	}
}

@media (min-width: 1300px) {
	.fhc-desktop {
		height: var(--fhc-h-lg);
	}
}

/* Short viewports go full-bleed rather than letterboxing. */
@media (max-height: 700px) {
	.fhc-desktop {
		height: 100vh;
		max-height: 100vh;
	}
}

/* Opt-in aspect-ratio sizing instead of fixed heights. */
.fhc--aspect .fhc-desktop {
	height: auto;
	max-height: none;
	padding-bottom: var(--fhc-aspect);
}

@media (min-width: 1024px) {
	.fhc--aspect .fhc-desktop {
		padding-bottom: var(--fhc-aspect-wide);
	}
}

.fhc-stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.fhc-figure {
	position: absolute;
	inset: 0;
	margin: 0;
	/* Slow way out of the punch-in. */
	transition: filter 0.6s ease-in, transform 0.6s ease-in;
	will-change: filter, transform;
}

.fhc-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition: opacity var(--fhc-fade-ms) linear;
}

.fhc-image.is-loaded {
	opacity: 1;
}

/* The punch: fast in, slow out (the slow half lives on .fhc-figure above). */
.fhc--transition-flash .fhc-stage.is-loading .fhc-figure {
	filter: blur(var(--fhc-blur)) saturate(110%);
	transform: scale(var(--fhc-punch));
	transition: filter 0.1s ease-out, transform 0.3s ease-out;
}

/* Scrim so titles stay legible over any image. Explicit layer so the hover
   stills can sit under it rather than punching through. */
.fhc-stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--fhc-scrim);
	pointer-events: none;
}

/* --- The hover stills loop ---------------------------------------------- */

.fhc-stills {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--fhc-stills-fade) ease-out;
}

.fhc-stills.is-playing {
	opacity: 1;
}

.fhc-still {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
}

.fhc-still.is-current {
	opacity: 1;
}

/* --- The flash frame ---------------------------------------------------- */

.fhc-frame {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0;

	--fhc-e1: var(--fhc-flash-cyan);
	--fhc-e2: var(--fhc-flash-cyan);
	--fhc-e3: var(--fhc-flash-cyan);
	--fhc-e4: var(--fhc-flash-cyan);
}

.fhc-frame::before,
.fhc-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 0 solid transparent;
}

/* Top + right, sweeping out of the top-left corner. */
.fhc-frame::before {
	border-top-width: var(--fhc-frame-width);
	border-right-width: var(--fhc-frame-width);
	border-top-color: var(--fhc-e1);
	border-right-color: var(--fhc-e2);
	clip-path: inset(0 100% 100% 0);
}

/* Bottom + left, sweeping out of the bottom-right corner, staggered later. */
.fhc-frame::after {
	border-bottom-width: var(--fhc-frame-width);
	border-left-width: var(--fhc-frame-width);
	border-bottom-color: var(--fhc-e3);
	border-left-color: var(--fhc-e4);
	clip-path: inset(100% 0 0 100%);
}

.fhc--transition-flash .fhc-stage.is-flashing .fhc-frame {
	opacity: 1;
}

.fhc--transition-flash .fhc-stage.is-flashing .fhc-frame::before {
	animation: fhc-frame-a var(--fhc-frame-ms) ease-out forwards;
}

.fhc--transition-flash .fhc-stage.is-flashing .fhc-frame::after {
	animation: fhc-frame-b var(--fhc-frame-ms) ease-out var(--fhc-frame-delay) forwards;
}

@keyframes fhc-frame-a {
	from {
		clip-path: inset(0 100% 100% 0);
		opacity: 1;
	}
	70% {
		clip-path: inset(0);
		opacity: 1;
	}
	to {
		clip-path: inset(0);
		opacity: 0;
	}
}

@keyframes fhc-frame-b {
	from {
		clip-path: inset(100% 0 0 100%);
		opacity: 1;
	}
	70% {
		clip-path: inset(0);
		opacity: 1;
	}
	to {
		clip-path: inset(0);
		opacity: 0;
	}
}

.fhc-stage.is-cyan .fhc-frame {
	--fhc-e1: var(--fhc-flash-cyan);
	--fhc-e2: var(--fhc-flash-cyan);
	--fhc-e3: var(--fhc-flash-cyan);
	--fhc-e4: var(--fhc-flash-cyan);
}

.fhc-stage.is-yellow .fhc-frame {
	--fhc-e1: var(--fhc-flash-yellow);
	--fhc-e2: var(--fhc-flash-yellow);
	--fhc-e3: var(--fhc-flash-yellow);
	--fhc-e4: var(--fhc-flash-yellow);
}

.fhc-stage.is-magenta .fhc-frame {
	--fhc-e1: var(--fhc-flash-magenta);
	--fhc-e2: var(--fhc-flash-magenta);
	--fhc-e3: var(--fhc-flash-magenta);
	--fhc-e4: var(--fhc-flash-magenta);
}

.fhc-stage.is-cymg .fhc-frame {
	--fhc-e1: var(--fhc-flash-cyan);
	--fhc-e2: var(--fhc-flash-yellow);
	--fhc-e3: var(--fhc-flash-magenta);
	--fhc-e4: var(--fhc-flash-green);
}

/* --- The title row ------------------------------------------------------ */

/* A bottom-anchored vertical stack: the list grows upward from the lower-left
   corner, first item on top. */
.fhc-titles {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--fhc-title-gap);
	margin: 0;
	padding: 0 clamp(1.25rem, 2.6vw, 3rem) clamp(1.5rem, 3vw, 3rem);
	list-style: none;
}

.fhc-title {
	margin: 0;
}

/* Source behaviour: the title that is *currently showing* dims. */
.fhc--active-dim .fhc-title.is-active .fhc-hero-title {
	opacity: var(--fhc-dim);
}

/* Inverted behaviour for teams that expect the active item to stand out. */
.fhc--active-highlight .fhc-title:not(.is-active) .fhc-hero-title {
	opacity: var(--fhc-dim);
}

.fhc-arrow {
	position: absolute;
	right: clamp(1.25rem, 2.6vw, 3rem);
	bottom: clamp(1.5rem, 3vw, 3rem);
	z-index: 4;
	display: none;
	width: 1rem;
	height: 3.5rem;
	opacity: 0.9;
	pointer-events: none;
}

.fhc-arrow svg {
	width: 100%;
	height: 100%;
}

@media (min-width: 640px) {
	.fhc-arrow {
		display: block;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile: one slide at a time
 * ------------------------------------------------------------------------ */

.fhc-mobile {
	position: relative;
	height: var(--fhc-mobile-h);
	overflow: hidden;
	touch-action: pan-y;
	/* It is a swipe surface, not a document: no blue flash on tap, no text
	   selection mid-drag, no scroll chaining into the page behind it. */
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	-webkit-user-select: none;
	overscroll-behavior: contain;
	-webkit-font-smoothing: antialiased;
}

.fhc--swipe-vertical .fhc-mobile {
	touch-action: none;
}

.fhc-slides {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fhc-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--fhc-slide-fade) ease, visibility 0s linear var(--fhc-slide-fade);
}

.fhc-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--fhc-slide-fade) ease, visibility 0s;
}

.fhc-slide-figure {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
}

.fhc-slide-figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--fhc-scrim);
	pointer-events: none;
}

.fhc-slide-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transform: scale(1);
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease-in-out;
}

.fhc-slide-image.is-loaded {
	opacity: 0.9;
}

/* The arrival pulse each time a slide becomes active. */
.fhc-slide.is-active .fhc-slide-image.is-loaded {
	opacity: 1;
	transform: scale(1.02);
}

.fhc-slide-meta {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	/* Safe-area insets keep the title clear of a home indicator or a rounded
	   corner; the right inset also clears the progress rail. */
	padding: clamp(1.25rem, 6vw, 2.5rem) calc(3.75rem + env(safe-area-inset-right, 0px))
		calc(var(--fhc-mobile-meta-bottom) + env(safe-area-inset-bottom, 0px))
		calc(clamp(1.25rem, 6vw, 2.5rem) + env(safe-area-inset-left, 0px));
}

.fhc-slide-meta .fhc-hero-title {
	font-size: var(--fhc-title-size-mobile);
	overflow-wrap: break-word;
	hyphens: auto;
}

/* The year sits on its own line under the title on mobile, not as a tick. */
.fhc-slide-meta .fhc-hero-title-year {
	display: block;
	margin: 0.55em 0 0;
	font-size: var(--fhc-year-size-mobile);
	letter-spacing: 0.04em;
	vertical-align: baseline;
	opacity: 0.85;
}

/* --- Progress indicator ------------------------------------------------- */

/* Sits low on the frame, above the title block, rather than dead centre. */
.fhc-progress {
	position: absolute;
	top: 68%;
	right: calc(1rem + env(safe-area-inset-right, 0px));
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.8125rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transform: translateY(-50%);
	opacity: 0.9;
}

.fhc-progress-line {
	display: block;
	width: 1px;
	height: 4.5rem;
	background: currentColor;
	opacity: 0.3;
}

.fhc-progress-line-fill {
	display: block;
	width: 100%;
	height: 100%;
	background: currentColor;
	transform-origin: top;
	transition: height 275ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fhc-progress-chevron {
	display: none;
	width: 0.85rem;
	height: 0.85rem;
}

.fhc-progress-chevron svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* On the last slide the total is swapped for a "keep going" chevron. */
.fhc-progress.is-last .fhc-progress-total {
	display: none;
}

.fhc-progress.is-last .fhc-progress-chevron {
	display: block;
}

/* ---------------------------------------------------------------------------
 * Gate mode
 * ------------------------------------------------------------------------ */

/* Bottom-right, not top-right: the top strip belongs to the theme’s header
   (menu, logo, search) and a pinned skip button lands on top of it. */
.fhc-gate-skip {
	position: absolute;
	bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
	right: calc(1rem + env(safe-area-inset-right, 0px));
	z-index: 4;
	display: none;
	padding: 0.4rem 0.8rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.75rem;
	cursor: pointer;
}

.fhc-mobile.is-gate .fhc-gate-skip {
	display: block;
}

/* No gate inside a builder editor, so nothing to skip. */
.fhc--in-editor .fhc-gate-skip {
	display: none !important;
}

.fhc-mobile.is-gate {
	position: fixed;
	inset: 0;
	z-index: var(--fhc-gate-z);
	height: 100svh;
	overscroll-behavior: none;
	background: var(--fhc-bg);
	transform: translate3d(0, 0, 0);
	transition: transform var(--fhc-gate-ms) cubic-bezier(0.7, 0, 0.3, 1);
}

.fhc-mobile.is-gate.is-hiding {
	transform: translate3d(0, -160%, 0);
}

/* Must out-specify the .fhc.is-mobile .fhc-mobile display rule above. */
.fhc.is-mobile .fhc-mobile.is-gate-closed,
.fhc-mobile.is-gate-closed {
	display: none !important;
}

html.fhc-gate-open,
html.fhc-gate-open body {
	overflow: hidden;
	height: 100%;
}

/* ---------------------------------------------------------------------------
 * Play button
 * ------------------------------------------------------------------------ */

.fhc-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 5;
	display: grid;
	place-items: center;
	width: var(--fhc-play-size);
	height: var(--fhc-play-size);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fhc-fg);
	cursor: pointer;
	transform: translate(-50%, -50%);
}

.fhc-play[hidden] {
	display: none;
}

/* The per-slide button on mobile sits in the text block, not over the image. */
.fhc-play--inline {
	position: static;
	width: var(--fhc-play-size-inline);
	height: var(--fhc-play-size-inline);
	margin-bottom: 0.75rem;
	transform: none;
}

.fhc-play-icon {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
}

.fhc-play-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.fhc-play-ring {
	opacity: 0.85;
	transform-origin: 50% 50%;
	transition: transform 260ms cubic-bezier(0.2, 0.8, 0.3, 1), opacity 200ms ease-out;
}

.fhc-play-triangle {
	transform-origin: 50% 50%;
	transition: transform 260ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* The CSS stand-in for the source site's Lottie hover animation. */
.fhc-play.is-may-play .fhc-play-ring,
.fhc-play:focus-visible .fhc-play-ring {
	opacity: 1;
	transform: scale(1.08);
}

.fhc-play.is-may-play .fhc-play-triangle,
.fhc-play:focus-visible .fhc-play-triangle {
	transform: scale(1.14);
}

.fhc-play:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 6px;
	border-radius: 50%;
}

/* ---------------------------------------------------------------------------
 * Video modal
 * ------------------------------------------------------------------------ */

/**
 * The script moves the modal to <body> so a transformed ancestor in the theme
 * cannot turn itself into the containing block for `position: fixed`. That
 * puts it outside `.fhc`, so it carries its own tokens rather than inheriting
 * them — override these on `.fhc-modal`, not on `.fhc`.
 */
.fhc-modal {
	--fhc-modal-ms: 220ms;
	--fhc-modal-fg: #fff;
	--fhc-modal-backdrop: rgba(0, 0, 0, 0.92);

	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
	color: var(--fhc-modal-fg);
}

.fhc-modal[hidden] {
	display: none;
}

.fhc-modal-backdrop {
	position: absolute;
	inset: 0;
	background: var(--fhc-modal-backdrop);
	opacity: 0;
	transition: opacity var(--fhc-modal-ms) ease-out;
}

.fhc-modal.is-open .fhc-modal-backdrop {
	opacity: 1;
}

.fhc-modal-dialog {
	position: relative;
	width: min(100%, calc((100vh - 8rem) * 16 / 9));
	opacity: 0;
	transform: scale(0.97);
	transition: opacity var(--fhc-modal-ms) ease-out, transform var(--fhc-modal-ms) ease-out;
}

.fhc-modal.is-open .fhc-modal-dialog {
	opacity: 1;
	transform: scale(1);
}

.fhc-modal-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}

.fhc-modal-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.fhc-modal-close {
	position: absolute;
	right: 0;
	bottom: calc(100% + 0.75rem);
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.fhc-modal-close svg {
	width: 100%;
	height: 100%;
}

.fhc-modal-close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

html.fhc-modal-open,
html.fhc-modal-open body {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Landscape phones
 *
 * Scoped to .is-mobile rather than a width guess: the script decides what a
 * phone is (see isMobileViewport), so these styles apply exactly when the
 * mobile view is actually on screen and short.
 * ------------------------------------------------------------------------ */

@media (orientation: landscape) and (max-height: 520px) {
	.fhc.is-mobile .fhc-slide-meta {
		padding-top: 0.75rem;
		padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
	}

	.fhc.is-mobile .fhc-slide-meta .fhc-hero-title {
		font-size: clamp(1.5rem, 4.5vw, 2.25rem);
	}

	.fhc.is-mobile .fhc-slide-meta .fhc-hero-title-year {
		margin-top: 0.3em;
	}

	.fhc.is-mobile .fhc-progress {
		top: 50%;
		gap: 0.4rem;
		font-size: 0.75rem;
	}

	.fhc.is-mobile .fhc-progress-line {
		height: 2.5rem;
	}

	/* The rail and the skip button are close together on a short frame, so the
	   title block needs to clear both. */
	.fhc.is-mobile .fhc-gate-skip {
		bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
		padding: 0.3rem 0.7rem;
	}
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.fhc-figure,
	.fhc-image,
	.fhc-slide,
	.fhc-slide-image,
	.fhc-hero-title,
	.fhc-progress-line-fill,
	.fhc-mobile.is-gate,
	.fhc-stills,
	.fhc-play-ring,
	.fhc-play-triangle,
	.fhc-modal-backdrop,
	.fhc-modal-dialog {
		transition-duration: 1ms !important;
	}

	.fhc--transition-flash .fhc-stage.is-loading .fhc-figure {
		filter: none;
		transform: none;
	}

	.fhc--transition-flash .fhc-stage.is-flashing .fhc-frame {
		opacity: 0;
	}

	.fhc-frame::before,
	.fhc-frame::after {
		animation: none !important;
	}

	.fhc-slide.is-active .fhc-slide-image.is-loaded {
		transform: none;
	}

	/* The stills loop is nothing but motion, so it is skipped entirely. */
	.fhc-stills.is-playing {
		opacity: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Theme and page-builder hardening
 *
 * Themes and builders ship broad element rules scoped one class deep — Blocksy
 * has `img { height: auto }`, Elementor has `.elementor img { height: auto }`,
 * both colour and underline headings, and most style `.entry-content ol`. Those
 * are (0,1,1) selectors and beat this component's single-class rules, which is
 * how a hero ends up letterboxed inside its own stage.
 *
 * Everything the layout genuinely depends on is restated here one level deeper
 * so it outranks them. Values still come from the same custom properties, so
 * overriding a token on `.fhc` keeps working.
 * ------------------------------------------------------------------------ */

.fhc .fhc-image,
.fhc .fhc-slide-image,
.fhc .fhc-still {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* A <picture> is inline by default, so height: 100% on the <img> inside it has
   nothing to resolve against and the image overflows its own frame. */
.fhc picture {
	display: block;
	width: 100%;
	height: 100%;
}

.fhc .fhc-titles,
.fhc .fhc-slides {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fhc .fhc-titles {
	padding: 0 clamp(1.25rem, 2.6vw, 3rem) clamp(1.5rem, 3vw, 3rem);
}

.fhc .fhc-title,
.fhc .fhc-slide {
	margin: 0;
	list-style: none;
}

.fhc .fhc-title::marker,
.fhc .fhc-slide::marker {
	content: "";
}

.fhc .fhc-hero-title {
	color: inherit;
	margin: 0;
	font-size: var(--fhc-title-size);
	font-weight: var(--fhc-title-weight);
	line-height: var(--fhc-title-leading);
	letter-spacing: var(--fhc-title-tracking);
	text-decoration: none;
	text-transform: none;
}

.fhc .fhc-slide-meta .fhc-hero-title {
	font-size: var(--fhc-title-size-mobile);
}

.fhc .fhc-title-link,
.fhc .fhc-slide-link {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	border: 0;
}

/* Buttons are the most heavily themed element there is. */
.fhc .fhc-play,
.fhc .fhc-gate-skip {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	min-height: 0;
	width: auto;
}

.fhc .fhc-play {
	width: var(--fhc-play-size);
	height: var(--fhc-play-size);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--fhc-fg);
}

.fhc .fhc-play--inline {
	width: var(--fhc-play-size-inline);
	height: var(--fhc-play-size-inline);
}

/* ---------------------------------------------------------------------------
 * Builder editors
 *
 * The gate is downgraded to the inline carousel inside an editor preview so it
 * cannot lock the editor's own scrolling. Inline normally sits at 80svh, which
 * makes the editor a poor likeness of the front end — so in an editor it takes
 * the gate's full height instead. Same picture, no scroll hijack.
 * ------------------------------------------------------------------------ */

.fhc--in-editor .fhc-mobile {
	height: 100svh;
}

.fhc--in-editor .fhc-gate-skip {
	display: block;
	position: absolute;
}