/* Home Hero — the thesis of the page (Design Brief §5).
 * Three genuinely distinct variants, the accent system applied to
 * interaction + the composed H1, and an unambiguous CTA hierarchy.
 * All values are tokens; the accent hue re-tokenises per style variation. */

.zerodigital-hero-home {
	position: relative;
	/* `clip`, not `hidden`. Both crop the bleed identically, but `hidden`
	 * makes this a scroll container — it gains a scrollable overflow region,
	 * it simply is not user-scrollable — and that has a habit of quietly
	 * changing how descendants behave. It broke the scroll-driven version of
	 * the section entrance outright (see LESSONS); the entrance no longer
	 * works that way, but `clip` remains the honest property for "crop this,
	 * do not make it scrollable" and there is no reason to go back. */
	overflow: clip;
	display: flex;
	align-items: center;
	min-height: var(--zd-hero-min-h, clamp(30rem, 62vh, 44rem));
	padding-block: clamp(var(--wp--preset--spacing--xl, 3rem), 6vw, var(--wp--preset--spacing--2xl, 4rem));
	/* Matches the menu, rather than being chosen independently of it. The header
	 * bar shares this hero's wide-size container, so its content sits at
	 * (gutter + the bar's own padding) from the edge; the hero adds the same two
	 * so a left- or right-aligned hero lands on the logo instead of near it.
	 * See --zd-header-gutter / --zd-menu-inset in the theme. */
	padding-inline: calc(var(--zd-header-gutter, 0px) + var(--zd-menu-inset, 1.5rem));
	background: var(--wp--preset--color--surface, #fff);
	color: var(--wp--preset--color--foreground, #16181b);
}

.zerodigital-hero-home__inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: clamp(var(--wp--preset--spacing--lg, 2rem), 4vw, var(--wp--preset--spacing--xl, 3rem));
	align-items: center;
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size, 1600px) - 2 * var(--zd-menu-inset, 1.5rem));
	margin-inline: auto;
}

/* ---- Content alignment (Section 6a) ------------------------------------
 * Y drives the flex section's cross-axis, placing the content block within the
 * hero's height. X aligns the copy: text-align carries the block/inline content
 * (headings, eyebrow, the inline-flex trust badge), with the flex CTA row and
 * the max-width subtext steered explicitly since text-align can't move them.
 * Defaults (left / middle) reproduce the original layout, so both are no-ops. */
.zerodigital-hero-home[data-align-y="top"] {
	align-items: flex-start;
}

.zerodigital-hero-home[data-align-y="bottom"] {
	align-items: flex-end;
}

.zerodigital-hero-home[data-align-x="center"] .zerodigital-hero-home__copy {
	text-align: center;
}

.zerodigital-hero-home[data-align-x="center"] .zerodigital-hero-home__ctas {
	justify-content: center;
}

.zerodigital-hero-home[data-align-x="center"] .zerodigital-hero-home__subtext,
.zerodigital-hero-home[data-align-x="center"] .zerodigital-hero-home__subtext-inline {
	margin-inline: auto;
}

.zerodigital-hero-home[data-align-x="right"] .zerodigital-hero-home__copy {
	text-align: right;
}

.zerodigital-hero-home[data-align-x="right"] .zerodigital-hero-home__ctas {
	justify-content: flex-end;
}

.zerodigital-hero-home[data-align-x="right"] .zerodigital-hero-home__subtext,
.zerodigital-hero-home[data-align-x="right"] .zerodigital-hero-home__subtext-inline {
	margin-inline-start: auto;
	margin-inline-end: 0;
}

/* ---- Height ------------------------------------------------------------
 * How much of the screen the hero claims. Feeds one custom property rather
 * than restating min-height, because the full-bg variant below sets its own
 * different formula — both read the variable, so the option drives either
 * without knowing which is in play.
 *
 * 'default' deliberately has no rule. The variable stays unset, both
 * declarations fall back to the values they have always had, and every hero
 * that never asked for a height renders byte-for-byte as before. Same reason
 * footer-columns writes no rule for its 'md' logo size.
 *
 * These are minimums: a hero with more copy than fits grows past them, at
 * every width. --zd-hero-viewport is the theme's (see its comment there) — the
 * screen minus the header, so 'max' ends exactly at the fold rather than one
 * header-height below it. */
.zerodigital-hero-home[data-height="plus"] {
	--zd-hero-min-h: clamp(36rem, 78vh, 54rem);
}

.zerodigital-hero-home[data-height="max"] {
	--zd-hero-min-h: var(--zd-hero-viewport, calc(100vh - var(--zd-header-height, 4.75rem)));
}

/* Left and right were incomplete: they set text-align and stopped there, so on
 * any layout that centres the copy BOX — every copy-only hero — the text
 * aligned but the block it sat in stayed in the middle of the section. Left had
 * no rules at all, because it used to be the base state; the copy-only variant
 * then overrode that base to centre, and there was nothing to override it back.
 *
 * Flush to the inner is the right edge to flush to, because the inner is now
 * the menu's content box: the section's gutter and the inner's cap are both
 * derived from the header above (see the padding-inline and max-width comments),
 * so the container edge IS where the logo starts and where the phone button
 * ends, at every width and under either header style. Two derivations rather
 * than one because the two regimes are decided by different things — below the
 * wide-size cap by the gutter, above it by the cap. */
.zerodigital-hero-home[data-align-x="left"] {
	--zd-hero-copy-start: 0;
}

.zerodigital-hero-home[data-align-x="right"] {
	--zd-hero-copy-end: 0;
}

/* text-align is inherited by the heading, eyebrow and body copy; the CTA row
 * and the trust strip are flex rows and the subtext is a capped block, so each
 * of those has to be steered on its own — the same three exceptions the centre
 * and right rules already carve out. */
.zerodigital-hero-home[data-align-x="left"] .zerodigital-hero-home__copy {
	text-align: left;
}

.zerodigital-hero-home[data-align-x="left"] .zerodigital-hero-home__ctas {
	justify-content: flex-start;
}

.zerodigital-hero-home[data-align-x="left"] .zerodigital-hero-home__subtext,
.zerodigital-hero-home[data-align-x="left"] .zerodigital-hero-home__subtext-inline {
	margin-inline: 0 auto;
}

.zerodigital-hero-home[data-align-x="left"] .zerodigital-hero-home__trust {
	justify-content: flex-start;
	margin-inline: 0 auto;
}

/* ---- Composed heading tiers (Build Brief §7a / Design §5) --------------- */
/* The eyebrow is a spec label now (see .zd-spec in the theme): utility face,
 * muted, led by a short accent tick. The standalone one carries .zd-spec from
 * the render, so this rule only holds spacing — at a specificity that clears
 * the theme's own margin reset, since the theme stylesheet loads after this. */
.zerodigital-hero-home__eyebrow.zd-spec {
	margin: 0 0 var(--wp--preset--spacing--sm, 1rem);
}

/* Folded into the H1 it can't take the tick — a decorative rule inside a
 * heading — so it gets the face and tracking only, and still reads as a
 * distinct tier above the display line rather than a run-on with it. */
.zerodigital-hero-home__eyebrow-inline {
	display: block;
	font-family: var(--zd-mono);
	font-size: var(--zd-spec-size, 0.72rem);
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--zd-spec-tracking, 0.14em);
	color: var(--wp--preset--color--muted, #565b62);
	margin: 0 0 var(--wp--preset--spacing--sm, 1rem);
}

.zerodigital-hero-home__heading {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: clamp(2.4rem, 1.3rem + 3.9vw, 4.25rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	margin: 0 0 var(--wp--preset--spacing--md, 1.5rem);
	text-wrap: balance;
}

.zerodigital-hero-home__heading-inline {
	display: block;
}

/* A folded-in subtext reads as a quieter tier beneath the display line. It must
 * match the stand-alone subtext exactly (line-height, max-width, colour) so
 * toggling "Include subtext in H1" doesn't visibly change the text. */
.zerodigital-hero-home__subtext-inline {
	display: block;
	margin-top: var(--wp--preset--spacing--sm, 1rem);
	max-width: 46ch;
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: var(--zd-step-lede, clamp(1.0625rem, 1rem + 0.45vw, 1.25rem));
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: normal;
	color: var(--wp--preset--color--muted, #565b62);
}

.zerodigital-hero-home__subtext {
	font-size: var(--zd-step-lede, clamp(1.0625rem, 1rem + 0.45vw, 1.25rem));
	line-height: 1.6;
	margin: 0 0 var(--wp--preset--spacing--lg, 2rem);
	max-width: 46ch;
	color: var(--wp--preset--color--muted, #565b62);
}

/* ---- Feature pills: the claim's supporting spec ------------------------ */
/* Hairline tags, not chips. The trust strip above and the team credentials
 * were both moved OFF a 999px pill for reading as a bit of UI stuck to the
 * page, so these take --zd-tag-radius — enclosed enough to read as
 * pulled-out features, square enough to belong to the same system as the spec
 * label and the measured strip.
 *
 * Its own shape role, and not --zd-btn-radius, which is what this first used
 * on the reasoning that it was 'the button radius, not the chip radius'. That
 * is not a distinction on a variation with pill buttons: staging has
 * shape--button: 999px, so btn and chip resolved to the same value and the
 * tags rendered as the exact shape they were meant to avoid.
 *
 * Deliberately uncapped, unlike the 46ch subtext beside them: these are short
 * tags with no measure to respect, and the copy column (or, copy-only, the
 * copy box) already bounds them. */
.zerodigital-hero-home__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2xs, 0.5rem);
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--md, 1.5rem);
	padding: 0;
}

.zerodigital-hero-home__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.7rem;
	border: var(--zd-border, 1px solid #e4e6e9);
	border-radius: var(--zd-tag-radius, var(--wp--custom--radius--sm, 0.5rem));
	background: transparent;
	font-family: var(--zd-mono);
	font-size: var(--zd-spec-size, 0.72rem);
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--zd-spec-tracking, 0.14em);
	color: var(--wp--preset--color--muted, #565b62);
}

/* currentColor, not the accent. The eyebrow's spec tick is already this
 * section's one accent, and a row of accented glyphs beside it would spend the
 * scarcity that makes the tick mean anything. */
.zerodigital-hero-home__pill .zd-icon {
	flex: none;
	inline-size: 0.9rem;
	block-size: 0.9rem;
}

/* ---- CTA hierarchy: primary dominant, secondary subordinate ------------- */
.zerodigital-hero-home__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--sm, 1rem);
	margin-bottom: var(--wp--preset--spacing--md, 1.5rem);
}

.zerodigital-hero-home__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--zd-btn-min-h, 2.875rem);
	padding: 0.9rem 1.6rem;
	border-radius: var(--zd-btn-radius, var(--wp--custom--radius--md, 0.5rem));
	background: var(--wp--preset--color--primary, #0e4b52);
	color: var(--wp--preset--color--background, #fff);
	text-decoration: none;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: var(--zd-shadow-sm, 0 1px 3px rgba(16, 24, 40, 0.1));
	transition: background-color var(--zd-ease, 180ms ease), box-shadow var(--zd-ease, 180ms ease), transform var(--zd-ease, 180ms ease);
}

/* Hover darkens the primary rather than jumping to the accent, so the accent
 * stays reserved for genuine emphasis (see the surface/accent pass). Scoped to
 * exclude the secondary — it shares the __cta class, so without :not() this
 * rule's dark fill, white label, shadow and lift bled onto it, turning a text
 * link into a low-contrast ghost button on hover. */
.zerodigital-hero-home__cta:not(.zerodigital-hero-home__cta--secondary):hover {
	background: var(--wp--preset--color--secondary, #0a3339);
	/* Pin the label light. This CTA is an <a>, and the theme's global
	 * link:hover would tint the label toward the accent — low-contrast on this
	 * dark hover fill. */
	color: var(--wp--preset--color--background, #fff);
	box-shadow: var(--zd-shadow-md, 0 4px 8px -2px rgba(16, 24, 40, 0.1));
	transform: translateY(-1px);
}

/* Secondary reads as a quiet, subordinate action. Borderless, so it carries
 * the .zerodigital-link-arrow chevron (see the theme) to signal it's a link;
 * the chevron + hover underline are handled there.
 *
 * display:inline-block overrides the inline-flex it inherits from .__cta. That
 * matters for the chevron: inside a flex box the ::after becomes a flex item
 * (blockified), which drops it onto its own line. As inline-block the ::after
 * is ordinary inline content and sits beside the label. */
.zerodigital-hero-home__cta--secondary {
	display: inline-block;
	background: transparent;
	color: var(--wp--preset--color--primary, #0e4b52);
	font-weight: 600;
	padding: 0.9rem 0.75rem;
	box-shadow: none;
	border-radius: 0;
}

.zerodigital-hero-home__cta--secondary:hover {
	background: transparent;
}

/* ---- Trust strip: the proof, rendered as spec -------------------------- */
/* Was a rounded pill, which read as a chip of UI floating under the buttons.
 * It's a measured strip now: a hairline rule, then the stars, score and label.
 * Flex `order` puts the stars first without touching the render, which emits
 * prefix -> rating -> stars in that order. */
.zerodigital-hero-home__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem;
	max-width: 46ch;
	margin-block-start: var(--wp--preset--spacing--md, 1.5rem);
	padding: var(--wp--preset--spacing--sm, 1rem) 0 0;
	border: 0;
	border-block-start: var(--zd-border, 1px solid #e4e6e9);
	border-radius: 0;
	background: none;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--foreground, #16181b);
}

.zerodigital-hero-home__trust .zerodigital-stars {
	order: 1;
}

.zerodigital-hero-home__trust-rating {
	order: 2;
	font-family: var(--zd-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	letter-spacing: 0.04em;
}

/* The "/ 5" that qualifies the score. Dimmed and lighter so the rating itself
 * still carries the emphasis — the denominator is context, not the number the
 * eye should land on. Inherits the mono face and tabular figures from its
 * parent, so "4.5 / 5" and "5 / 5" occupy the same width. */
.zerodigital-hero-home__trust-outof {
	font-weight: 400;
	color: var(--wp--preset--color--muted, #565b62);
}

.zerodigital-hero-home__trust-prefix {
	order: 3;
	font-family: var(--zd-mono);
	font-size: var(--zd-spec-size, 0.72rem);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--zd-spec-tracking, 0.14em);
	color: var(--wp--preset--color--muted, #565b62);
}

/* ---- Gold star rating: a muted track with a colour fill clipped to score -- */
.zerodigital-stars {
	--zd-star-color: #f5a623;
	position: relative;
	display: inline-flex;
	line-height: 0;
	vertical-align: -0.2em;
}

.zerodigital-stars__track,
.zerodigital-stars__fill {
	display: inline-flex;
}

/* Muted empty stars, derived from the current text colour so they sit on any
 * background the badge lands on. */
.zerodigital-stars__track {
	color: color-mix(in srgb, currentColor 24%, transparent);
}

/* The fill overlays the track and is clipped to the score's width (set inline
 * per instance), giving exact half-star fractions from one overflow clip. */
.zerodigital-stars__fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--zd-star-color, #f5a623);
}

/* Stars keep their size and are clipped, never squashed, as the fill narrows. */
.zerodigital-stars svg {
	display: block;
	flex: 0 0 auto;
}

.zerodigital-stars path {
	fill: currentColor;
}

/* ---- Media ------------------------------------------------------------- */
/* Feature media (both heroes and About) shares one treatment: the large radius
 * and a hairline, no shadow. One device, not two — the hairline is what holds
 * the edge where a bright photo meets a near-white page, and a drop shadow on
 * top of it was belt-and-braces that read as dated. */
.zerodigital-hero-home__media {
	position: relative;
}

.zerodigital-hero-home__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--zd-media-radius, var(--wp--custom--radius--lg, 0.75rem));
	border: var(--zd-border, 1px solid #e4e6e9);
}

/* ===== Variant: solid background + image (the workhorse) ================= */
/* Asymmetric split — a 50/50 split reads cheap (Design §5). */
.zerodigital-hero-home__inner--image-left,
.zerodigital-hero-home__inner--image-right {
	grid-template-columns: 1.1fr 0.9fr;
}

.zerodigital-hero-home__inner--image-left {
	direction: rtl;
}

.zerodigital-hero-home__inner--image-left > * {
	direction: ltr;
}

/* ===== Variant: copy-only (typographically confident, not empty) ======== */
.zerodigital-hero-home--copy-only {
	padding-block: clamp(var(--wp--preset--spacing--2xl, 4rem), 9vw, 7rem);
}

/* Copy-only has to centre on the SECTION, not inside a column. "Copy only" is
 * reachable from two independent controls — the block's own Variant and the
 * shared Layout Settings → Layout — and each was defeated differently:
 *
 *   1. The grid columns come from Layout Settings, so choosing Variant =
 *      "Copy only (no image)" while Layout sat on its "Image right" default
 *      left the copy in the left column of a two-column grid whose right
 *      column was empty.
 *   2. In the full-background variant, `--full-bg-overlay .__inner` (0,2,0)
 *      out-specifies `__inner--copy-only` (0,1,0) and widens the inner back to
 *      wide-size, while `.__copy` stays capped at 40rem with no side margins.
 *      Correct when the copy shares the hero with an image and sits over the
 *      dark end of the scrim — wrong with no image, because the copy box then
 *      sits hard left and only its text centres inside it.
 *
 * Collapsing the grid handles (1); giving the copy auto side margins handles
 * (2), and is a no-op when the copy already fills the column. */
.zerodigital-hero-home--copy-only .zerodigital-hero-home__inner,
.zerodigital-hero-home__inner--copy-only {
	grid-template-columns: 1fr;
}

/* Two auto margins centre the copy box; replacing ONE of them with a length
 * pushes the box to that edge and leaves it shrink-wrapped (an auto margin on a
 * grid item suppresses stretch, which is why the box is fit-content either
 * way). The alignment control sets these two properties and nothing else here
 * needs to know which way it went. */
.zerodigital-hero-home--copy-only .zerodigital-hero-home__copy,
.zerodigital-hero-home__inner--copy-only .zerodigital-hero-home__copy {
	/* The measure cap, moved here off the container (see above). Centred, this
	 * renders identically to capping the inner; aligned left or right, the same
	 * box can now travel to the container's edge. The full-background variant
	 * caps tighter still, further down, and out-specifies this. */
	max-width: 64rem;
	margin-inline: var(--zd-hero-copy-start, auto) var(--zd-hero-copy-end, auto);
}

.zerodigital-hero-home--copy-only .zerodigital-hero-home__heading {
	font-size: var(--zd-step-display, clamp(2.5rem, 1.25rem + 4.4vw, 4.5rem));
}

/* With no image to balance against, a copy-only hero reads best fully centred —
 * a left-aligned block in the centred column looks off-centre. This is the
 * default; the X-alignment control still overrides it to left or right. */
.zerodigital-hero-home--copy-only .zerodigital-hero-home__copy {
	text-align: center;
}

.zerodigital-hero-home--copy-only .zerodigital-hero-home__ctas {
	justify-content: center;
}

/* Centred copy earns a wider measure. A narrow column stranded in the middle of
 * a wide section reads as squashed rather than composed — the tighter 46ch
 * default exists to sit beside an image, which is not the case here. Left and
 * right alignment deliberately keep that default. */
.zerodigital-hero-home--copy-only .zerodigital-hero-home__subtext,
.zerodigital-hero-home--copy-only .zerodigital-hero-home__subtext-inline,
.zerodigital-hero-home__inner--copy-only .zerodigital-hero-home__subtext,
.zerodigital-hero-home__inner--copy-only .zerodigital-hero-home__subtext-inline,
.zerodigital-hero-home[data-align-x="center"] .zerodigital-hero-home__subtext,
.zerodigital-hero-home[data-align-x="center"] .zerodigital-hero-home__subtext-inline {
	max-width: 80ch;
	margin-inline: auto;
}

/* ===== Variant: full background image/video ============================= */
.zerodigital-hero-home--full-bg-overlay {
	display: flex;
	align-items: center;
	min-height: var(--zd-hero-min-h, min(76vh, 44rem));
	color: var(--wp--preset--color--background, #fff);
}

.zerodigital-hero-home__bg-image,
.zerodigital-hero-home__bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* A deliberate directional scrim guarantees contrast — never rely on the
 * image being dark enough (Design §5). */
.zerodigital-hero-home--full-bg-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(9, 14, 20, 0.78) 0%, rgba(9, 14, 20, 0.45) 45%, rgba(9, 14, 20, 0.1) 100%),
		linear-gradient(0deg, rgba(9, 14, 20, 0.35) 0%, rgba(9, 14, 20, 0) 50%);
}

/* When the copy is centred, the scrim has to move with it. The gradient above
 * is deliberately directional — densest at the left, where the copy normally
 * sits — so centred copy would drift onto its thin end and lose contrast over
 * a bright image. Mirror it about the centre so the density behind the text is
 * comparable to what the left-anchored copy gets (Design §5). */
.zerodigital-hero-home--full-bg-overlay:has(.zerodigital-hero-home__inner--copy-only)::after {
	background:
		linear-gradient(90deg, rgba(9, 14, 20, 0.35) 0%, rgba(9, 14, 20, 0.72) 50%, rgba(9, 14, 20, 0.35) 100%),
		linear-gradient(0deg, rgba(9, 14, 20, 0.35) 0%, rgba(9, 14, 20, 0) 50%);
}

/* Once the copy spans the full width, a horizontal scrim gradient has nothing
 * left to do and only causes trouble. The centred one peaks at 50%, and that
 * inflection — invisible spread across a desktop band — compresses into a
 * narrow viewport as a dark seam down the middle of the hero. The default
 * directional one is worse here for a reason that isn't cosmetic: it thins to
 * 0.1 at the right, so full-width text would run off the covered area
 * entirely. Both flatten to an even wash, with only the vertical lift kept. */
@media (max-width: 782px) {
	.zerodigital-hero-home--full-bg-overlay::after,
	.zerodigital-hero-home--full-bg-overlay:has(.zerodigital-hero-home__inner--copy-only)::after {
		background:
			linear-gradient(0deg, rgba(9, 14, 20, 0.3) 0%, rgba(9, 14, 20, 0) 55%),
			rgba(9, 14, 20, 0.6);
	}
}

.zerodigital-hero-home--full-bg-overlay .zerodigital-hero-home__inner {
	max-width: calc(var(--wp--style--global--wide-size, 1600px) - 2 * var(--zd-menu-inset, 1.5rem));
	width: 100%;
}

.zerodigital-hero-home--full-bg-overlay .zerodigital-hero-home__copy {
	max-width: 40rem;
}

/* Centred over a full background there's no image to share the band with, so
 * let the copy use more of it. The 40rem above stays for left/right-anchored
 * copy, where the measure is tuned to the dense end of the scrim. */
.zerodigital-hero-home--full-bg-overlay[data-align-x="center"] .zerodigital-hero-home__copy,
.zerodigital-hero-home--full-bg-overlay:has(.zerodigital-hero-home__inner--copy-only) .zerodigital-hero-home__copy {
	max-width: 60rem;
}

.zerodigital-hero-home--full-bg-overlay .zerodigital-hero-home__subtext,
.zerodigital-hero-home--full-bg-overlay .zerodigital-hero-home__subtext-inline {
	color: rgba(255, 255, 255, 0.9);
}

.zerodigital-hero-home--full-bg-overlay .zerodigital-hero-home__cta--secondary {
	color: var(--wp--preset--color--background, #fff);
}

/* Autoplay video pause control (Build Brief §11) */
.zerodigital-hero-home__video-toggle {
	position: absolute;
	bottom: var(--wp--preset--spacing--md, 1.5rem);
	/* Logical, not `right`, so the override below can swap the corner with one
	 * property and so the control follows the writing direction like the rest of
	 * the block's placement does. */
	inset-inline-end: var(--wp--preset--spacing--md, 1.5rem);
	z-index: 3;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: var(--zd-chip-radius, var(--wp--custom--radius--full, 999px));
	border: 2px solid rgba(255, 255, 255, 0.9);
	background: rgba(9, 14, 20, 0.5);
	color: var(--wp--preset--color--background, #fff);
	cursor: pointer;
	transition: background-color var(--zd-ease, 180ms ease);
}

/* Right-aligned copy ends in the toggle's corner — the CTA row and the trust
 * strip run straight under it — so the toggle takes the other one. Left and
 * centre leave the trailing corner clear, so they keep it. */
.zerodigital-hero-home[data-align-x="right"] .zerodigital-hero-home__video-toggle {
	inset-inline-end: auto;
	inset-inline-start: var(--wp--preset--spacing--md, 1.5rem);
}

.zerodigital-hero-home__video-toggle:hover {
	background: var(--zd-accent, var(--wp--preset--color--accent, #c4263c));
	border-color: var(--zd-accent, var(--wp--preset--color--accent, #c4263c));
}

.zerodigital-hero-home__video-toggle::before {
	content: "\275A\275A";
	font-size: 0.75rem;
}

.zerodigital-hero-home__video-toggle[aria-pressed="true"]::before {
	content: "\25B6";
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 782px) {
	.zerodigital-hero-home__inner--image-left,
	.zerodigital-hero-home__inner--image-right {
		grid-template-columns: 1fr;
	}
}

/* ---- Trust strip: alignment + dark-ground handling ---------------------- */
/* The strip is a flex row, so text-align (which carries the rest of the copy)
 * can't move it — it needs steering explicitly, the way the CTA row does. */
.zerodigital-hero-home[data-align-x="center"] .zerodigital-hero-home__trust,
.zerodigital-hero-home--copy-only .zerodigital-hero-home__trust {
	justify-content: center;
	margin-inline: auto;
}

.zerodigital-hero-home[data-align-x="right"] .zerodigital-hero-home__trust {
	justify-content: flex-end;
	margin-inline-start: auto;
	margin-inline-end: 0;
}

/* The pill row is a flex row too, and needs the same steering for the same
 * reason. Copy-only centres by default alongside the CTA row; the explicit
 * alignments out-specify it (0,3,0 against 0,2,0), so choosing left inside a
 * copy-only hero still moves the tags. */
.zerodigital-hero-home[data-align-x="left"] .zerodigital-hero-home__pills {
	justify-content: flex-start;
}

.zerodigital-hero-home[data-align-x="center"] .zerodigital-hero-home__pills,
.zerodigital-hero-home--copy-only .zerodigital-hero-home__pills {
	justify-content: center;
}

.zerodigital-hero-home[data-align-x="right"] .zerodigital-hero-home__pills {
	justify-content: flex-end;
}

/* Over the full-bleed scrim the hairline and label both need lifting off the
 * dark ground, or the rule disappears and the label goes muddy. */
.zerodigital-hero-home--full-bg-overlay .zerodigital-hero-home__trust {
	border-block-start-color: rgba(255, 255, 255, 0.28);
	color: var(--wp--preset--color--background, #fff);
}

.zerodigital-hero-home--full-bg-overlay .zerodigital-hero-home__trust-prefix,
.zerodigital-hero-home--full-bg-overlay .zerodigital-hero-home__eyebrow-inline {
	color: rgba(255, 255, 255, 0.82);
}

/* Both dark grounds, together. --zd-border is a single :root token and is not
 * re-tokenised for dark sections, so a tag left alone keeps a near-white
 * hairline at full opacity — legible, but louder than the hairline it is
 * meant to be. The theme already flips the label text (.zd-bg-dark
 * [class*="label"]); the colour here is what carries the icon, which draws on
 * currentColor. */
.zerodigital-hero-home--full-bg-overlay .zerodigital-hero-home__pill,
.zerodigital-hero-home.zd-bg-dark .zerodigital-hero-home__pill {
	border-color: rgba(255, 255, 255, 0.28);
	color: rgba(255, 255, 255, 0.82);
}

/* A dark SOLID colour is usually the brand's own primary or a shade of it, so a
 * primary-filled button disappears into it. Invert it, as the CTA Banner does:
 * light fill, primary label. The photo overlay keeps its primary button — a
 * scrimmed photo is never the button's own colour. */
.zerodigital-hero-home.zd-bg-dark .zerodigital-hero-home__cta:not(.zerodigital-hero-home__cta--secondary) {
	background: var(--wp--preset--color--background, #fff);
	color: var(--wp--preset--color--primary, #0e4b52);
}

.zerodigital-hero-home.zd-bg-dark .zerodigital-hero-home__cta:not(.zerodigital-hero-home__cta--secondary):hover {
	background: color-mix(in srgb, var(--wp--preset--color--background, #fff) 88%, var(--wp--preset--color--foreground, #16181b));
	color: var(--wp--preset--color--primary, #0e4b52);
}

.zerodigital-hero-home.zd-bg-dark .zerodigital-hero-home__cta--secondary,
.zerodigital-hero-home.zd-bg-dark .zerodigital-hero-home__cta--secondary:hover {
	color: var(--wp--preset--color--background, #fff);
}

.zerodigital-hero-home.zd-bg-dark .zerodigital-hero-home__trust {
	border-block-start-color: rgba(255, 255, 255, 0.28);
	color: var(--wp--preset--color--background, #fff);
}

.zerodigital-hero-home.zd-bg-dark .zerodigital-hero-home__trust-prefix,
.zerodigital-hero-home.zd-bg-dark .zerodigital-hero-home__trust-outof {
	color: rgba(255, 255, 255, 0.82);
}

/* ---- Entrance ---------------------------------------------------------- */
/* One orchestrated moment rather than scattered effects.
 *
 * The h1 and the media are deliberately NOT animated. They are the two Largest
 * Contentful Paint candidates on the page, and an element fading up from zero
 * opacity isn't counted as painted until it's visible — so animating either
 * pushes the LCP these sites are measured on. The headline is simply there on
 * arrival and the supporting detail settles in around it, which reads as more
 * assured than the whole hero sliding on regardless.
 *
 * The animation itself lives in the theme, on `.zd-hero-rise`, so the hero obeys
 * Site Settings -> Animation like everything else does. It used to run its own
 * hardcoded `zd-hero-settle` at a fixed 520ms, which meant a site set to "Off"
 * still had a moving hero and a site set to "Reveal" had one that faded.
 *
 * All this block decides is the ORDER, which is the one part the theme cannot
 * know. The heading sits between the eyebrow and the subtext in the markup but
 * takes no index, so the count runs across the elements that actually move. */
.zerodigital-hero-home__eyebrow {
	--zd-motion-i: 0;
}

.zerodigital-hero-home__pills {
	--zd-motion-i: 1;
}

.zerodigital-hero-home__subtext {
	--zd-motion-i: 2;
}

.zerodigital-hero-home__ctas {
	--zd-motion-i: 3;
}

.zerodigital-hero-home__trust {
	--zd-motion-i: 4;
}