/*!
 * GENERATED BY engine — do not edit by hand
 * Regenerate with: engine site:build amarante
 *
 * Pattern library presentation: 26 file(s) from themes/engine-base/patterns/*.css.
 * Edit the pattern's own .css, then rebuild.
 */

/* ── cart-table ── */
/* engine/cart-table — scoped to .engine-cart-table.
   Every colour, family and font size resolves to a theme.json preset or
   custom property; the only literals here are layout geometry and ratios,
   which carry no brand. Local --ect-* properties let a variant repoint a
   whole set of tokens from a single class. */
.engine-cart-table {
	--ect-canvas: var(--wp--custom--color--canvas);
	--ect-ink: var(--wp--custom--color--ink);
	--ect-accent: var(--wp--custom--color--accent);
	--ect-rule: var(--wp--custom--color--surface-card);
	--ect-panel: var(--wp--custom--color--surface-alt);
	--ect-panel-ink: var(--wp--custom--color--ink);
	--ect-panel-accent: var(--wp--custom--color--accent);
	--ect-muted: color-mix(in srgb, currentColor 58%, transparent);
	--ect-gap: var(--wp--custom--space--gutter);
	--ect-thumb: clamp(4rem, 8vw, 6rem);
	--ect-thumb-ratio: 3 / 4;
	--ect-radius: var(--wp--custom--radius--lg);
	/* Wide enough for the checkout label to stay on one line once uppercase
	   tracking is applied to it; the design draws the card at ~24rem. */
	--ect-sidebar: 24rem;

	background: var(--ect-canvas);
	color: var(--ect-ink);
}

.engine-cart-table.is-variant-surface-alt {
	--ect-canvas: var(--wp--custom--color--surface-alt);
	--ect-panel: var(--wp--custom--color--canvas);
}

/* --- heading ----------------------------------------------------------- */

.engine-cart-table__eyebrow {
	margin: 0;
	color: var(--ect-accent);
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

.engine-cart-table__marker { margin-inline-end: 0.7em; }

.engine-cart-table__title { margin: 0; }

/* --- sidebar layout: items grow, summary holds a fixed target width, and
   the two stack once the items column can no longer keep half the row.
   No media query owns this — the min-inline-size is the wrap threshold. --- */

.engine-cart-table__body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--ect-gap);
}

.engine-cart-table__items {
	flex: 999 1 0;
	min-inline-size: min(100%, 30rem);
}

.engine-cart-summary {
	flex: 1 1 var(--ect-sidebar);
	align-self: flex-start;
	position: sticky;
	inset-block-start: var(--wp--custom--space--stack);
}

/* --- line item --------------------------------------------------------- */

.engine-cart-item {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--inline);
	padding-block: var(--wp--custom--space--stack);
	border-block-end: var(--wp--custom--border--hairline) solid var(--ect-rule);
}

.engine-cart-item:first-child { padding-block-start: 0; }

/*
 * Portrait, not square. A garment photographed head to toe loses its silhouette
 * in a square crop, which is the one thing the shopper is checking when they
 * scan a basket. --ect-thumb-ratio keeps the shape in one place.
 */
.engine-cart-item__media {
	flex: 0 0 auto;
	inline-size: var(--ect-thumb);
	aspect-ratio: var(--ect-thumb-ratio);
	block-size: auto;
	margin: 0;
	border-radius: var(--ect-radius);
	overflow: hidden;
}

.engine-cart-item__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.engine-cart-item__media--empty {
	background: var(--ect-panel);
}

.engine-cart-item__info {
	flex: 1 1 auto;
	min-inline-size: 8rem;
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}

.engine-cart-item__name { margin: 0; font-style: normal; }
.engine-cart-item__name a { color: inherit; text-decoration: none; }
.engine-cart-item__name a:hover,
.engine-cart-item__name a:focus-visible { text-decoration: underline; }

.engine-cart-item__meta { margin: 0; color: var(--ect-muted); }

.engine-cart-item__remove {
	align-self: flex-start;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ect-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	text-align: start;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
	transition: color var(--wp--custom--transition--base);
}

.engine-cart-item__remove:hover,
.engine-cart-item__remove:focus-visible { color: var(--ect-ink); }

.engine-cart-item__aside {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--inline);
	margin-inline-start: auto;
}

/* --- quantity stepper -------------------------------------------------- */

.engine-qty {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1rem;
	padding-block: 0.3rem;
	border: var(--wp--custom--border--hairline) solid var(--ect-rule);
	border-radius: var(--wp--custom--radius--pill);
}

.engine-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.4rem;
	block-size: 1rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: color var(--wp--custom--transition--base);
}

.engine-qty__btn:hover { color: var(--ect-accent); }

.engine-qty__glyph { inline-size: 0.7rem; block-size: 0.7rem; }

.engine-qty__value {
	inline-size: 2.25ch;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-md);
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.engine-qty__value::-webkit-outer-spin-button,
.engine-qty__value::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.engine-cart-item__price {
	margin: 0;
	font-weight: 500;
	white-space: nowrap;
	font-size: var(--wp--preset--font-size--body-md);
}

/* --- promo-code disclosure -------------------------------------------- */

.engine-cart-table__promo {
	margin-block-start: var(--wp--custom--space--stack);
	color: var(--ect-muted);
}

.engine-cart-table__promo-summary {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-md);
	cursor: pointer;
	list-style: none;
}

.engine-cart-table__promo-summary::-webkit-details-marker { display: none; }

.engine-cart-table__promo-summary:focus-visible {
	outline: var(--wp--custom--border--rule) solid var(--ect-accent);
	outline-offset: 0.2em;
}

.engine-cart-table__promo-field {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--space--inline);
	margin-block-start: var(--wp--custom--space--inline);
}

.engine-cart-table__promo-input {
	flex: 1 1 12rem;
	padding: 0.7em 1.1em;
	border: var(--wp--custom--border--hairline) solid var(--ect-rule);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--ect-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-md);
}

.engine-cart-table__promo-input::placeholder { color: var(--ect-muted); }

.engine-cart-table__promo-submit {
	flex: 0 0 auto;
	padding: 0.7em 1.6em;
	border: var(--wp--custom--border--hairline) solid currentColor;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--ect-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	cursor: pointer;
	transition:
		background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

.engine-cart-table__promo-submit:hover,
.engine-cart-table__promo-submit:focus-visible {
	background-color: var(--ect-ink);
	color: var(--ect-canvas);
}

/* --- order-summary panel ---------------------------------------------- */

.engine-cart-summary {
	padding: var(--wp--custom--space--block);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--ect-panel);
	color: var(--ect-panel-ink);
}

.engine-cart-summary.is-panel-canvas { --ect-panel: var(--wp--custom--color--canvas); }

.engine-cart-summary.is-panel-panel {
	--ect-panel: var(--wp--preset--gradient--panel);
	--ect-panel-ink: var(--wp--custom--color--ink-inverse);
	--ect-panel-accent: var(--wp--custom--color--accent-soft);
	--ect-rule: var(--wp--custom--color--brand-deep);
}

.engine-cart-summary__title {
	margin: 0;
	font-style: italic;
}

.engine-cart-summary__rows {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--inline);
}

.engine-cart-summary__row {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--custom--space--inline);
}

.engine-cart-summary__row-label {
	margin: 0;
	color: var(--ect-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-md);
}

.engine-cart-summary__row-value {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-md);
	text-align: end;
}

.engine-cart-summary__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--custom--space--inline);
	padding-block-start: var(--wp--custom--space--stack);
	border-block-start: var(--wp--custom--border--hairline) solid var(--ect-rule);
}

.engine-cart-summary__total-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.engine-cart-summary__total-value {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-md);
	font-style: italic;
	line-height: var(--wp--custom--line--tight);
}

.engine-cart-summary__checkout { inline-size: 100%; }
.engine-cart-summary__checkout .wp-block-button,
.engine-cart-summary__checkout .wp-block-button__link { width: 100%; }

.engine-cart-summary__checkout .wp-block-button__link {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	/*
	 * The label is a single line in the design. Uppercase plus tracking makes
	 * it wide enough to wrap inside the summary card, and a two-line pill reads
	 * as a mistake. Let the tracking tighten before the line breaks.
	 */
	white-space: nowrap;
	padding-inline: var(--wp--custom--space--sm);
}

.engine-cart-summary__note {
	margin: 0;
	color: var(--ect-muted);
}

/* --- WooCommerce cart override: theme the live block to match ---------- */

.engine-cart-table__woo .wc-block-cart__submit-button,
.engine-cart-table__woo .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button {
	background: var(--wp--preset--gradient--button);
	color: var(--wp--custom--color--ink);
	border-radius: var(--wp--custom--radius--pill);
}

.engine-cart-table__woo .wc-block-cart-items__row {
	border-block-end: var(--wp--custom--border--hairline) solid var(--ect-rule);
}

.engine-cart-table__woo .wc-block-components-totals-wrapper,
.engine-cart-table__woo .wc-block-cart__totals-title {
	color: var(--ect-ink);
}

/* --- shared: focus, hidden text, reduced motion ----------------------- */

.engine-cart-table :focus-visible {
	outline: var(--wp--custom--border--rule) solid var(--ect-accent);
	outline-offset: 0.15em;
}

.engine-cart-table .engine-visually-hidden {
	position: absolute;
	inline-size: var(--wp--custom--border--hairline);
	block-size: var(--wp--custom--border--hairline);
	margin: calc(var(--wp--custom--border--hairline) * -1);
	padding: 0;
	border: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

.engine-cart-table__empty {
	margin: 0;
	color: var(--ect-muted);
}

@media (prefers-reduced-motion: reduce) {
	.engine-cart-table *,
	.engine-cart-table *::before,
	.engine-cart-table *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ── catalog-filters ── */
/* engine/catalog-filters — scoped to .engine-catalog.
   Local --ec-* properties exist only so a single variant/shape class can
   repoint a whole set of tokens. Nothing below is a literal colour, px font
   size or font family. */
.engine-catalog {
	--ec-canvas: var(--wp--custom--color--canvas);
	--ec-banner: var(--wp--custom--color--surface-alt);
	--ec-ink: var(--wp--custom--color--ink);
	--ec-field: var(--wp--custom--color--canvas);
	--ec-chip: var(--wp--custom--color--surface-card);
	--ec-accent: var(--wp--custom--color--accent);
	--ec-on-accent: var(--wp--custom--color--ink);
	--ec-muted: color-mix(in srgb, currentColor 58%, transparent);
	--ec-line: color-mix(in srgb, currentColor 24%, transparent);
	--ec-shade: color-mix(in srgb, currentColor 8%, transparent);
	--ec-gap: var(--wp--custom--space--gutter);
	--ec-columns: 3;
	--ec-ratio: 4 / 5;
	--ec-media-radius: max(var(--wp--custom--radius--lg), 28%);
	--ec-aside-basis: clamp(12rem, 22vw, 16rem);
	--ec-main-basis: min(100%, 32rem);

	background: var(--ec-canvas);
	color: var(--ec-ink);
}

.engine-catalog.is-variant-canvas { --ec-banner: transparent; }

.engine-catalog.is-shape-rounded { --ec-media-radius: var(--wp--custom--radius--lg); }
.engine-catalog.is-shape-square  { --ec-media-radius: 0; }

.engine-catalog.is-ratio-square    { --ec-ratio: 1; }
.engine-catalog.is-ratio-landscape { --ec-ratio: 6 / 5; }
.engine-catalog.is-ratio-auto      { --ec-ratio: auto; }

.engine-catalog.is-columns-2 { --ec-columns: 2; }
.engine-catalog.is-columns-3 { --ec-columns: 3; }
.engine-catalog.is-columns-4 { --ec-columns: 4; }

/* --- search banner ----------------------------------------------------- */

.engine-catalog__banner {
	background: var(--ec-banner);
	padding-block: var(--wp--custom--space--section);
	padding-inline: var(--wp--custom--space--gutter);
}

.engine-catalog__banner-inner {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	text-align: center;
}

.engine-catalog__prompt {
	color: var(--ec-ink);
	font-style: italic;
}

.engine-catalog__search {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--inline);
	inline-size: 100%;
	max-width: var(--wp--custom--measure--prose);
	margin-inline: auto;
	padding: 0.55em 0.6em;
	background: var(--ec-field);
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: 0 0.5rem 1.75rem var(--ec-shade);
	text-align: start;
}

.engine-catalog__search-go {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.4em;
	block-size: 2.4em;
	padding: 0;
	background: transparent;
	color: var(--ec-ink);
	border: var(--wp--custom--border--hairline) solid var(--ec-line);
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	transition:
		background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base);
}

.engine-catalog__search-go:hover,
.engine-catalog__search-go:focus-visible {
	background: var(--ec-accent);
	border-color: var(--ec-accent);
	color: var(--ec-on-accent);
}

.engine-catalog__search-go svg {
	inline-size: 42%;
	block-size: 42%;
}

.engine-catalog__search-field {
	flex: 1 1 auto;
	min-inline-size: 0;
	appearance: none;
	background: transparent;
	border: 0;
	padding-inline: 0.4em;
	color: var(--ec-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--wp--custom--line--body);
}

.engine-catalog__search-field::placeholder {
	color: var(--ec-muted);
	opacity: 1;
}

.engine-catalog__count {
	margin-block: var(--wp--custom--space--stack) 0;
	color: var(--ec-muted);
}

/* --- body: fluid sidebar with no media query --------------------------- */

.engine-catalog__body {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ec-gap);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-block: var(--wp--custom--space--section);
	padding-inline: var(--wp--custom--space--gutter);
	box-sizing: border-box;
}

.engine-catalog__aside {
	flex: 1 1 var(--ec-aside-basis);
	min-inline-size: 0;
}

.engine-catalog__main {
	flex: 999 1 var(--ec-main-basis);
	min-inline-size: 0;
}

/* topbar variant: the aside spans the full row above the results. */
.engine-catalog.is-layout-topbar .engine-catalog__aside { flex-basis: 100%; }

.engine-catalog.is-layout-topbar .engine-catalog__filters {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--custom--space--block);
}

.engine-catalog.is-layout-topbar .engine-catalog__group { flex: 1 1 12rem; }

.engine-catalog.is-layout-topbar .engine-catalog__apply {
	flex-basis: 100%;
	inline-size: auto;
}

/* --- filters ----------------------------------------------------------- */

.engine-catalog__filters {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--block);
	margin: 0;
}

.engine-catalog__group {
	margin: 0;
	padding: 0;
	border: 0;
}

.engine-catalog__legend {
	display: block;
	width: 100%;
	margin-block-end: var(--wp--custom--space--inline);
	padding: 0;
	color: var(--ec-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.engine-catalog__options {
	display: flex;
	flex-direction: column;
	gap: 0.65em;
}

.engine-catalog__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.65em;
	cursor: pointer;
	color: var(--ec-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-md);
	line-height: var(--wp--custom--line--body);
}

.engine-catalog__option-count {
	margin-inline-start: auto;
	color: var(--ec-muted);
}

/* Native checkbox / radio, restyled but fully operable. */
.engine-catalog__option input {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	display: grid;
	place-content: center;
	inline-size: 1.15em;
	block-size: 1.15em;
	margin: 0;
	background: transparent;
	border: var(--wp--custom--border--hairline) solid var(--ec-line);
	border-radius: var(--wp--custom--radius--sm);
	cursor: pointer;
	transition:
		background-color var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base);
}

.engine-catalog__group.is-type-radio .engine-catalog__option input {
	border-radius: var(--wp--custom--radius--pill);
}

.engine-catalog__option input:checked {
	background: var(--ec-accent);
	border-color: var(--ec-accent);
}

.engine-catalog__option input::after {
	content: "";
	inline-size: 0.34em;
	block-size: 0.62em;
	margin-block-start: -0.12em;
	border: solid var(--ec-on-accent);
	border-width: 0 0.14em 0.14em 0;
	transform: scale(0) rotate(45deg);
	transition: transform var(--wp--custom--transition--fast);
}

.engine-catalog__option input:checked::after { transform: scale(1) rotate(45deg); }

/* Radios fill with a dot rather than a tick. */
.engine-catalog__group.is-type-radio .engine-catalog__option input::after {
	inline-size: 0.5em;
	block-size: 0.5em;
	margin: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--ec-on-accent);
	transform: scale(0);
}

.engine-catalog__group.is-type-radio .engine-catalog__option input:checked::after {
	transform: scale(1);
}

/* Colour filter: the swatch becomes the visible control; the input stays in
   the DOM for the keyboard and assistive tech. */
.engine-catalog__group.is-type-swatch .engine-catalog__option input {
	position: absolute;
	inline-size: var(--wp--custom--border--hairline);
	block-size: var(--wp--custom--border--hairline);
	opacity: 0;
	pointer-events: none;
}

.engine-catalog__swatch {
	flex: 0 0 auto;
	inline-size: 1.35em;
	block-size: 1.35em;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--ec-swatch, currentColor);
	box-shadow: 0 0 0 var(--wp--custom--border--hairline) var(--ec-line);
	transition: box-shadow var(--wp--custom--transition--base);
}

.engine-catalog__group.is-type-swatch input:checked + .engine-catalog__swatch {
	box-shadow: 0 0 0 var(--wp--custom--border--rule) var(--ec-accent);
}

.engine-catalog__group.is-type-swatch input:focus-visible + .engine-catalog__swatch {
	outline: var(--wp--custom--border--rule) solid var(--ec-accent);
	outline-offset: 0.2em;
}

.engine-catalog__apply {
	inline-size: 100%;
	margin-block-start: var(--wp--custom--space--stack);
	padding: var(--wp--custom--space--button-y) var(--wp--custom--space--button-x);
	background: transparent;
	color: var(--ec-ink);
	border: var(--wp--custom--border--hairline) solid var(--ec-line);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base);
}

.engine-catalog__apply:hover,
.engine-catalog__apply:focus-visible {
	background: var(--ec-ink);
	border-color: var(--ec-ink);
	color: var(--ec-canvas);
}

/* --- toolbar: chips + sort --------------------------------------------- */

.engine-catalog__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--custom--space--stack);
	margin-block-end: var(--wp--custom--space--block);
}

.engine-catalog__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.engine-catalog__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding-block: 0.4em;
	padding-inline: var(--wp--custom--space--inline);
	background: var(--ec-chip);
	color: var(--ec-ink);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	text-decoration: none;
	transition:
		background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

.engine-catalog__chip:hover,
.engine-catalog__chip:focus-visible {
	background: var(--ec-ink);
	color: var(--ec-canvas);
	text-decoration: none;
}

.engine-catalog__chip-x {
	font-size: 1.15em;
	line-height: 1;
}

.engine-catalog__sort {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--inline);
	margin: 0;
}

.engine-catalog__sort-label {
	color: var(--ec-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
}

.engine-catalog__select {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.engine-catalog__select-field {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	padding-inline: 0 1.4em;
	color: var(--ec-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	cursor: pointer;
}

.engine-catalog__select::after {
	content: "";
	position: absolute;
	inset-inline-end: 0.35em;
	inline-size: 0.5em;
	block-size: 0.5em;
	margin-block-start: -0.18em;
	border-inline-end: var(--wp--custom--border--hairline) solid currentColor;
	border-block-end: var(--wp--custom--border--hairline) solid currentColor;
	transform: rotate(45deg);
	pointer-events: none;
}

.engine-catalog__sort-go {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	color: var(--ec-accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 0.3em;
	cursor: pointer;
}

/* --- results grid ------------------------------------------------------ */

.engine-catalog__grid {
	display: grid;
	gap: var(--ec-gap);
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			min(
				100%,
				max(
					var(--wp--custom--grid--card-min),
					(100% - (var(--ec-columns) - 1) * var(--ec-gap)) / var(--ec-columns)
				)
			),
			1fr
		)
	);
	margin: 0;
}

.engine-catalog__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--inline);
	height: 100%;
	text-align: center;
}

/* Rounded on the top corners only — the signature "arch" product card. */
.engine-catalog__media {
	overflow: hidden;
	margin: 0;
	border-start-start-radius: var(--ec-media-radius);
	border-start-end-radius: var(--ec-media-radius);
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.engine-catalog__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--transition--slow);
}

.engine-catalog__media--empty {
	aspect-ratio: var(--ec-ratio);
	background: var(--wp--preset--gradient--card);
}

/* Empty placeholders cycle the three panel gradients, echoing the frame. */
.engine-catalog__card:nth-child(3n + 2) .engine-catalog__media--empty {
	background: var(--wp--preset--gradient--panel);
}

.engine-catalog__card:nth-child(3n) .engine-catalog__media--empty {
	background: var(--wp--preset--gradient--button);
}

.engine-catalog__card:hover .engine-catalog__media img,
.engine-catalog__card:focus-within .engine-catalog__media img {
	transform: scale(1.03);
}

.engine-catalog__name {
	margin: 0;
	font-style: normal;
}

.engine-catalog__name a { color: inherit; text-decoration: none; }
.engine-catalog__name a:hover,
.engine-catalog__name a:focus-visible { text-decoration: underline; }

.engine-catalog__price {
	margin: 0;
	color: var(--ec-muted);
}

.engine-catalog__empty {
	margin: 0;
	color: var(--ec-muted);
}

/* --- pagination -------------------------------------------------------- */

.engine-catalog__pagination { margin-block-start: var(--wp--custom--space--block); }

.engine-catalog__pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.engine-catalog__page {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	min-inline-size: 2.5em;
	justify-content: center;
	padding: 0.55em 0.75em;
	color: var(--ec-ink);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	text-decoration: none;
	transition:
		background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

.engine-catalog__page:hover,
.engine-catalog__page:focus-visible {
	background: var(--ec-chip);
	text-decoration: none;
}

.engine-catalog__page.is-current {
	background: var(--ec-ink);
	color: var(--ec-canvas);
}

/* --- shared -------------------------------------------------------------- */

/* Screen-reader-only text. The 1px sizing this idiom needs is taken from the
   hairline border token rather than written as a literal. */
.engine-catalog__sr {
	position: absolute;
	inline-size: var(--wp--custom--border--hairline);
	block-size: var(--wp--custom--border--hairline);
	margin: calc(var(--wp--custom--border--hairline) * -1);
	padding: 0;
	border: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

.engine-catalog :focus-visible {
	outline: var(--wp--custom--border--rule) solid var(--ec-accent);
	outline-offset: var(--wp--custom--border--rule);
}

@media (prefers-reduced-motion: reduce) {
	.engine-catalog *,
	.engine-catalog *::before,
	.engine-catalog *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.engine-catalog__card:hover .engine-catalog__media img,
	.engine-catalog__card:focus-within .engine-catalog__media img {
		transform: none;
	}
}

/* ── checkout-form ── */
/*
 * Pattern-scoped presentation for engine/checkout-form. Every value below is a
 * preset or custom property addressed by role; local --engine-checkout-* vars
 * only let `variant` repoint roles from a single class.
 */
.engine-checkout {
	--engine-checkout-canvas: var(--wp--custom--color--canvas);
	--engine-checkout-card: var(--wp--custom--color--surface-alt);
	--engine-checkout-ink: var(--wp--custom--color--ink);
	--engine-checkout-muted: var(--wp--custom--color--brand-deep);
	--engine-checkout-rule: var(--wp--custom--color--surface-card);
	--engine-checkout-accent: var(--wp--custom--color--accent);
	--engine-checkout-field-border: var(--wp--custom--color--accent-soft);
	--engine-checkout-field-border-active: var(--wp--custom--color--accent);
	--engine-checkout-step-done: var(--wp--custom--color--ink);
	--engine-checkout-step-current: var(--wp--custom--color--accent);
	--engine-checkout-sticky-top: clamp(1rem, 3vw, 2rem);

	background-color: var(--engine-checkout-canvas);
	color: var(--engine-checkout-ink);
}

/* The card flips to the opposite warm surface so it stays a distinct card. */
.engine-checkout.is-variant-surface-alt {
	--engine-checkout-canvas: var(--wp--custom--color--surface-alt);
	--engine-checkout-card: var(--wp--custom--color--canvas);
}

/* Screen-reader-only. The 1px sizing comes from the hairline token, not a literal. */
.engine-checkout__sr-only {
	position: absolute;
	inline-size: var(--wp--custom--border--hairline);
	block-size: var(--wp--custom--border--hairline);
	margin: calc(var(--wp--custom--border--hairline) * -1);
	padding: 0;
	border: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/* Progress trail -------------------------------------------------------- */
.engine-checkout__steps {
	inline-size: 100%;
	max-inline-size: 42rem;
	margin-inline: auto;
}

.engine-checkout__steps-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, 2.5vw, 1.75rem);
}

.engine-checkout__step {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

/* Decorative connector — pseudo-element, never real content. */
.engine-checkout__step:not(:first-child)::before {
	content: "";
	flex: 0 0 auto;
	inline-size: clamp(1.5rem, 6vw, 5rem);
	block-size: var(--wp--custom--border--hairline);
	background: var(--engine-checkout-rule);
}

.engine-checkout__dot {
	flex: 0 0 auto;
	inline-size: 0.85rem;
	block-size: 0.85rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--engine-checkout-rule);
}

.engine-checkout__step.is-done .engine-checkout__dot { background: var(--engine-checkout-step-done); }
.engine-checkout__step.is-current .engine-checkout__dot { background: var(--engine-checkout-step-current); }

.engine-checkout__step-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-md);
	line-height: var(--wp--custom--line--body);
	color: var(--engine-checkout-muted);
	text-decoration: none;
}

.engine-checkout__step.is-done .engine-checkout__step-label,
.engine-checkout__step.is-current .engine-checkout__step-label { color: var(--engine-checkout-ink); }

/* Two-column shell ------------------------------------------------------ */
.engine-checkout__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.engine-checkout__form {
	flex: 1.55 1 26rem;
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--block);
}

.engine-checkout__summary {
	flex: 1 1 18rem;
	min-inline-size: 0;
	align-self: flex-start;
	position: sticky;
	inset-block-start: var(--engine-checkout-sticky-top);
	z-index: var(--wp--custom--layer--sticky);
}

/* Form ------------------------------------------------------------------ */
.engine-checkout__fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--stack);
}

.engine-checkout__legend {
	display: block;
	padding: 0;
	margin-block-end: 0.35rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--engine-checkout-muted);
}

.engine-checkout__row {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 2.5vw, 1.5rem);
}

.engine-checkout__field {
	flex: 1 1 12rem;
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.engine-checkout__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line--body);
	color: var(--engine-checkout-muted);
}

.engine-checkout__input {
	appearance: none;
	inline-size: 100%;
	background: transparent;
	border: var(--wp--custom--border--hairline) solid var(--engine-checkout-field-border);
	border-radius: var(--wp--custom--radius--lg);
	padding-block: clamp(0.85rem, 1.6vw, 1.1rem);
	padding-inline: clamp(1rem, 2vw, 1.35rem);
	color: var(--engine-checkout-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-md);
	line-height: var(--wp--custom--line--body);
	transition:
		border-color var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base);
}

.engine-checkout__input::placeholder {
	color: var(--engine-checkout-muted);
	opacity: 0.55;
}

.engine-checkout__input:focus-visible {
	outline: none;
	border-color: var(--engine-checkout-field-border-active);
	box-shadow: 0 0 0 var(--wp--custom--border--rule) color-mix(in srgb, var(--engine-checkout-accent) 35%, transparent);
}

/* Keep autofill chrome from reintroducing a coloured box. */
.engine-checkout__input:-webkit-autofill,
.engine-checkout__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--engine-checkout-ink);
	-webkit-box-shadow: inset 0 0 0 100vmax var(--engine-checkout-canvas);
	caret-color: var(--engine-checkout-ink);
}

.engine-checkout__submit {
	appearance: none;
	inline-size: 100%;
	border: 0;
	cursor: pointer;
	background: var(--wp--preset--gradient--button);
	color: var(--wp--custom--color--ink);
	border-radius: var(--wp--custom--radius--pill);
	padding-block: clamp(1rem, 1.8vw, 1.3rem);
	padding-inline: var(--wp--custom--space--button-x);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition:
		transform var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base);
}

.engine-checkout__submit:hover {
	transform: translateY(-0.1rem);
	box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--wp--custom--color--brand-deep) 25%, transparent);
}

.engine-checkout__submit:focus-visible {
	outline: var(--wp--custom--border--rule) solid var(--engine-checkout-accent);
	outline-offset: 0.2em;
}

/* Order summary card ---------------------------------------------------- */
.engine-checkout__summary .wp-block-group.engine-checkout__card {
	background: var(--engine-checkout-card);
	border-radius: var(--wp--custom--radius--lg);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.engine-checkout__line {
	align-items: baseline;
}

.engine-checkout__line > * { margin-block: 0; }

/*
 * The markup carries is-style-wide, which is what escapes core's
 * `.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 100px }`
 * — a 0,3,0 selector no single-class rule here can outrank. Without it these
 * two dividers render as short dashes floating inside the summary rows rather
 * than as the rules that separate line items from subtotal and total. The
 * width below matches that specificity as a backstop.
 */
.wp-block-separator.engine-checkout__rule:not(.is-style-dots) {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.engine-checkout__rule {
	border: 0;
	block-size: 0;
	margin-block: 0;
	border-block-start: var(--wp--custom--border--hairline) solid color-mix(in srgb, var(--engine-checkout-ink) 18%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.engine-checkout,
	.engine-checkout *,
	.engine-checkout *::before,
	.engine-checkout *::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
	}

	.engine-checkout__submit:hover { transform: none; }
}

/* ── cta-panel ── */
.engine-cta-panel {
	--engine-cta-panel-surface: var(--wp--custom--color--surface-inverse, var(--wp--custom--color--surface-dark));
	--engine-cta-panel-surface-sample: var(--wp--custom--color--surface-inverse, var(--wp--custom--color--surface-dark));
	--engine-cta-panel-ink: var(--wp--custom--color--ink-on-inverse, var(--wp--custom--color--ink-inverse));
	--engine-cta-panel-button: var(--wp--custom--color--accent);
	--engine-cta-panel-button-sample: var(--wp--custom--color--accent);
	--engine-cta-panel-button-ink: var(--wp--custom--color--ink-on-accent, var(--wp--custom--color--ink));
}
.engine-cta-panel.is-variant-surface-dark {
	--engine-cta-panel-surface: var(--wp--custom--color--surface-dark);
	--engine-cta-panel-surface-sample: var(--wp--custom--color--surface-dark);
	--engine-cta-panel-ink: var(--wp--custom--color--ink-inverse);
}
.engine-cta-panel.is-variant-brand-deep {
	--engine-cta-panel-surface: var(--wp--custom--color--brand-deep);
	--engine-cta-panel-surface-sample: var(--wp--custom--color--brand-deep);
	--engine-cta-panel-ink: var(--wp--custom--color--ink-inverse);
}
.engine-cta-panel.is-variant-gradient {
	--engine-cta-panel-surface: var(--wp--preset--gradient--button);
	--engine-cta-panel-surface-sample: var(--wp--custom--color--accent);
	--engine-cta-panel-ink: var(--wp--custom--color--ink-on-accent, var(--wp--custom--color--ink));
	--engine-cta-panel-button: var(--wp--custom--color--surface-alt);
	--engine-cta-panel-button-sample: var(--wp--custom--color--surface-alt);
	--engine-cta-panel-button-ink: var(--wp--custom--color--accent);
}
.engine-cta-panel.is-variant-accent {
	--engine-cta-panel-surface: var(--wp--custom--color--accent);
	--engine-cta-panel-surface-sample: var(--wp--custom--color--accent);
	--engine-cta-panel-ink: var(--wp--custom--color--ink-on-accent, var(--wp--custom--color--ink));
	--engine-cta-panel-button: var(--wp--custom--color--ink-on-accent, var(--wp--custom--color--ink));
	--engine-cta-panel-button-sample: var(--wp--custom--color--ink-on-accent, var(--wp--custom--color--ink));
	--engine-cta-panel-button-ink: var(--wp--custom--color--accent);
}
@supports (color: color-contrast(white vs black)) {
	.engine-cta-panel {
		--engine-cta-panel-ink: color-contrast(var(--engine-cta-panel-surface-sample) vs var(--wp--custom--color--ink), var(--wp--custom--color--ink-inverse));
		--engine-cta-panel-button-ink: color-contrast(var(--engine-cta-panel-button-sample) vs var(--wp--custom--color--ink), var(--wp--custom--color--ink-inverse));
	}
}

.engine-cta-panel__box {
	position: relative;
	isolation: isolate;
	overflow: clip; /* clip, not hidden: hidden makes a scroll container, which would break scroll-driven view() timelines inside */
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--custom--space--stack);
	padding: clamp(2rem, 4.9vw, 4.375rem) clamp(1.5rem, 3.5vw, 3.125rem);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--engine-cta-panel-surface);
	color: var(--engine-cta-panel-ink);
}
.engine-cta-panel__box > * { margin: 0; }
@media (max-width: 47.99em) {
	.engine-cta-panel__box { grid-template-columns: 1fr; }
}

.engine-cta-panel__copy { display: grid; gap: var(--wp--custom--space--inline); max-inline-size: 22em; }
.engine-cta-panel__copy > * { margin: 0; }
.engine-cta-panel__heading { color: inherit; line-height: var(--wp--custom--line--tight); text-wrap: balance; }
.engine-cta-panel__body { color: inherit; opacity: 0.85; line-height: var(--wp--custom--line--body); }

.engine-cta-panel__actions { display: grid; gap: var(--wp--custom--space--inline); justify-items: start; }
.engine-cta-panel__actions > * { margin: 0; }
.engine-cta-panel__buttons { margin: 0; }
.engine-cta-panel__button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	padding: var(--wp--custom--space--button-y) var(--wp--custom--space--button-x);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--engine-cta-panel-button);
	color: var(--engine-cta-panel-button-ink);
	font-weight: 700;
	text-decoration: none;
	transition: transform var(--wp--custom--transition--base), opacity var(--wp--custom--transition--base);
}
.engine-cta-panel__button .wp-block-button__link:hover { transform: translateY(-0.08em); text-decoration: none; }
.engine-cta-panel__button .wp-block-button__link:focus-visible { outline: var(--wp--custom--border--rule) solid currentColor; outline-offset: 0.25em; }
.engine-cta-panel__aside { color: inherit; opacity: 0.9; text-transform: none; letter-spacing: 0; font-weight: 400; }
.engine-cta-panel__aside a { color: inherit; text-decoration: none; }
.engine-cta-panel__aside a:hover { text-decoration: underline; }

.engine-cta-panel__dots {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: clamp(1rem, 6vw, 5rem);
	inline-size: clamp(6rem, 16vw, 13rem);
	block-size: auto;
	z-index: 0;
	pointer-events: none;
}
.engine-cta-panel__dots .is-accent { fill: var(--wp--custom--color--accent-soft); }
.engine-cta-panel__dots .is-soft { fill: currentColor; opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
	.engine-cta-panel__button .wp-block-button__link { transition: none; }
	.engine-cta-panel__button .wp-block-button__link:hover { transform: none; }
}

/* ── Scroll motion (opt-in per site): the dots drift against the section as
   it passes through the viewport. ── */
html[data-scroll-motion] .engine-cta-panel__dots { --engine-scroll-y: 70%; }

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		html[data-scroll-motion] .engine-cta-panel__dots {
			animation: engine-scroll-drift linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}

/* layout: band — the surface runs edge to edge; the box loses its inset. */
.engine-cta-panel.is-layout-band {
	background: var(--engine-cta-panel-surface);
	color: var(--engine-cta-panel-ink);
}
.engine-cta-panel.is-layout-band .engine-cta-panel__box {
	background: transparent;
	border-radius: 0;
	padding-inline: 0;
	padding-block: 0;
}

/* align: center — heading, copy and button stacked in the middle. */
.engine-cta-panel.is-align-center .engine-cta-panel__box {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
}
.engine-cta-panel.is-align-center .engine-cta-panel__copy {
	max-inline-size: var(--wp--custom--measure--prose, 62ch);
	justify-items: center;
}
.engine-cta-panel.is-align-center .engine-cta-panel__actions { justify-items: center; }
.engine-cta-panel.is-align-center .engine-cta-panel__dots { inset-inline-end: var(--wp--custom--space--gutter); }

/* ── motion: breathe — the surface's gradient drifts across an oversized
   canvas, and the button pulses a soft ring. ── */
@media (prefers-reduced-motion: no-preference) {
	.engine-cta-panel.is-motion-breathe.is-layout-band,
	.engine-cta-panel.is-motion-breathe:not(.is-layout-band) .engine-cta-panel__box {
		background-size: 220% 220%;
		animation: engine-gradient-drift 16s ease-in-out infinite alternate;
	}
	.engine-cta-panel.is-motion-breathe .engine-cta-panel__button .wp-block-button__link {
		--engine-pulse-color: color-mix(in srgb, var(--engine-cta-panel-button) 60%, transparent);
		animation: engine-pulse 3.2s ease-out infinite;
	}
}

/* ── editorial-grid ── */
.engine-editorial-grid{
	--engine-editorial-grid--gap:var(--wp--custom--space--inline);
	--engine-editorial-grid--card-min:var(--wp--custom--grid--card-min);
	--engine-editorial-grid--radius:var(--wp--custom--radius--lg);
	--engine-editorial-grid--feature-ratio:7 / 5;
	--engine-editorial-grid--tone-ratio:2 / 1;
	/* How much taller the feature card runs than its neighbours, kept as a
	   ratio of a ratio so every shape below kicks a feature card up by the
	   same amount instead of needing its own pair of numbers. */
	--engine-editorial-grid--feature-lift:1.4;
	--engine-editorial-grid--marker:"\2726";
	--engine-editorial-grid--scrim:color-mix(in srgb, var(--wp--custom--color--surface-dark) 88%, transparent);
	--engine-editorial-grid--tracking:0.16em;
}
.engine-editorial-grid .engine-editorial-grid__eyebrow{
	text-transform:uppercase;
	/* Tracking expressed as an em ratio so it scales with any brand's eyebrow size. */
	letter-spacing:var(--engine-editorial-grid--tracking);
}
.engine-editorial-grid .engine-editorial-grid__eyebrow::before{
	content:var(--engine-editorial-grid--marker);
	margin-inline-end:0.9em;
}
@supports (content:"a" / ""){
	.engine-editorial-grid .engine-editorial-grid__eyebrow::before{
		content:var(--engine-editorial-grid--marker) / "";
	}
}
.engine-editorial-grid .engine-editorial-grid__header > *{
	max-inline-size:var(--wp--custom--measure--heading, 40rem);
}
.engine-editorial-grid .engine-editorial-grid__intro{
	max-inline-size:var(--wp--custom--measure--prose);
}
.engine-editorial-grid .engine-editorial-grid__rail{
	--engine-editorial-grid--cols:1;
	display:grid;
	align-items:start;
	gap:var(--engine-editorial-grid--gap);
	grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--engine-editorial-grid--card-min)), 1fr));
}
/*
 * When one card is the feature, the rest hang from its foot rather than its
 * head. Top-aligning a tall card beside short ones opens a hole under the
 * short ones and reads as a layout that ran out of content; bottom-aligning
 * puts every caption on one line and staggers the tops instead, which is the
 * asymmetry the feature was asking for in the first place.
 */
.engine-editorial-grid .engine-editorial-grid__rail:has(> .is-feature){
	align-items:end;
}

/* A fixed upper bound on columns: at least card-min wide, at most <cols> across. */
.engine-editorial-grid .engine-editorial-grid__rail.is-cols-2{ --engine-editorial-grid--cols:2; }
.engine-editorial-grid .engine-editorial-grid__rail.is-cols-3{ --engine-editorial-grid--cols:3; }
.engine-editorial-grid .engine-editorial-grid__rail.is-cols-4{ --engine-editorial-grid--cols:4; }
.engine-editorial-grid .engine-editorial-grid__rail[class*="is-cols-"]{
	grid-template-columns:repeat(auto-fit, minmax(max(min(var(--engine-editorial-grid--card-min), 100%), (100% - (var(--engine-editorial-grid--cols) - 1) * var(--engine-editorial-grid--gap)) / var(--engine-editorial-grid--cols)), 1fr));
}
/* composition: overlap — cards bleed beyond the wide measure and interlock.
   The desktop rail uses a 12-column canvas: odd cards start at column 1,
   even cards start at 6, creating a deliberate overlap band in the middle. */
.engine-editorial-grid.is-composition-overlap {
	overflow: visible;
}
.engine-editorial-grid.is-composition-overlap > .engine-editorial-grid__rail {
	margin-inline: clamp(-1.25rem, -2.4vw, -2.75rem);
	padding-inline: clamp(1.25rem, 2.4vw, 2.75rem);
}
.engine-editorial-grid.is-composition-overlap .engine-editorial-grid__rail {
	gap: clamp(0.35rem, 0.8vw, 0.75rem);
}
@media (min-width: 60em) {
	.engine-editorial-grid.is-composition-overlap .engine-editorial-grid__rail {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		align-items: end;
	}
	.engine-editorial-grid.is-composition-overlap .engine-editorial-grid__card {
		grid-column: span 7;
		z-index: 1;
	}
	.engine-editorial-grid.is-composition-overlap .engine-editorial-grid__card:nth-child(even) {
		grid-column: 6 / span 7;
		translate: 0 14%;
		z-index: 2;
	}
	.engine-editorial-grid.is-composition-overlap .engine-editorial-grid__card.is-feature {
		translate: 0 -8%;
		z-index: 3;
	}
}

/* Outline card: a dashed placeholder sized to its copy. */
.engine-editorial-grid .engine-editorial-grid__card.is-outline{
	aspect-ratio:auto;
	display:grid;
	gap:0.8em;
	align-content:start;
	padding:var(--wp--custom--space--stack);
	border:calc(var(--wp--custom--border--hairline) * 1.5) dashed color-mix(in srgb, var(--wp--custom--color--ink) 14%, transparent);
	background:transparent;
	color:inherit;
}
.engine-editorial-grid .engine-editorial-grid__card.is-outline > *{ margin:0; }
.engine-editorial-grid .engine-editorial-grid__tag{
	justify-self:start;
	padding:0.45em 0.95em;
	border-radius:var(--wp--custom--radius--pill);
	background:color-mix(in srgb, var(--wp--custom--color--accent) 14%, transparent);
	color:var(--wp--custom--color--accent);
}
.engine-editorial-grid .engine-editorial-grid__card.is-outline .engine-editorial-grid__caption{
	position:static;
	padding:0;
	font-size:var(--wp--preset--font-size--display-xs, var(--wp--preset--font-size--display-sm));
	line-height:var(--wp--custom--line--tight);
}
.engine-editorial-grid .engine-editorial-grid__body{
	color:var(--wp--custom--color--ink-soft, currentColor);
	line-height:var(--wp--custom--line--body);
}
.engine-editorial-grid .engine-editorial-grid__plus{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	inline-size:1.5rem;
	block-size:2.375rem;
	margin-block-start:0.4em;
	border:calc(var(--wp--custom--border--hairline) * 1.5) solid color-mix(in srgb, var(--wp--custom--color--ink) 14%, transparent);
	border-radius:var(--wp--custom--radius--pill);
	color:var(--wp--custom--color--ink-soft, currentColor);
	line-height:1;
}
.engine-editorial-grid .engine-editorial-grid__rail > *{
	margin-block:0;
}
.engine-editorial-grid .engine-editorial-grid__card{
	position:relative;
	isolation:isolate;
	margin:0;
	overflow: clip; /* clip, not hidden: hidden makes a scroll container, which would break scroll-driven view() timelines inside */
	border-radius:var(--engine-editorial-grid--radius);
	aspect-ratio:var(--engine-editorial-grid--tone-ratio);
}
.engine-editorial-grid .engine-editorial-grid__card.is-feature{
	aspect-ratio:var(--engine-editorial-grid--feature-ratio);
}

/*
 * media_ratio — the shape every card in the rail takes.
 *
 * `wide` is the default and the historical behaviour. The rest exist because a
 * 2:1 letterbox is the wrong frame for figure photography: a vertical frame
 * squeezed into it keeps the middle band and loses both the face and the hem,
 * which on a fashion lookbook is the entire subject. The feature card keeps its
 * extra height by dividing the shape's width by the same lift each time.
 */
.engine-editorial-grid.is-ratio-landscape{
	--engine-editorial-grid--tone-ratio:3 / 2;
	--engine-editorial-grid--feature-ratio:calc(3 / 2 / var(--engine-editorial-grid--feature-lift));
}
.engine-editorial-grid.is-ratio-square{
	--engine-editorial-grid--tone-ratio:1;
	--engine-editorial-grid--feature-ratio:calc(1 / var(--engine-editorial-grid--feature-lift));
}
.engine-editorial-grid.is-ratio-portrait{
	/* A portrait card is already tall; lifting the feature by the landscape
	   amount makes it tower over its neighbours and opens a void beside them
	   that no amount of alignment hides. A gentler lift keeps the asymmetry
	   legible without the hole. */
	--engine-editorial-grid--feature-lift:1.16;
	--engine-editorial-grid--tone-ratio:2 / 3;
	--engine-editorial-grid--feature-ratio:calc(2 / 3 / var(--engine-editorial-grid--feature-lift));
}
.engine-editorial-grid.is-ratio-tall{
	--engine-editorial-grid--feature-lift:1.12;
	--engine-editorial-grid--tone-ratio:9 / 16;
	--engine-editorial-grid--feature-ratio:calc(9 / 16 / var(--engine-editorial-grid--feature-lift));
}
.engine-editorial-grid .engine-editorial-grid__card img{
	display:block;
	inline-size:100%;
	block-size:100%;
	object-fit:cover;
	border-radius:inherit;
	transition:transform var(--wp--custom--transition--slow);
}
.engine-editorial-grid .engine-editorial-grid__card:hover img,
.engine-editorial-grid .engine-editorial-grid__card:focus-within img{
	transform:scale(1.04);
}
.engine-editorial-grid .engine-editorial-grid__card.is-media::after{
	content:"";
	position:absolute;
	inset-inline:0;
	inset-block-end:0;
	block-size:60%;
	z-index:1;
	pointer-events:none;
	background-image:linear-gradient(to top, var(--engine-editorial-grid--scrim), transparent);
}
/*
 * The caption used to be position:absolute, which made it the containing
 * block for the title link's ::after, so only the title was clickable. The
 * card stays the positioned ancestor. Grid stacks the caption on the media
 * without positioning it — the same constraint as the listing cards, where a
 * positioned child pulls the overlay off the photograph.
 */
.engine-editorial-grid .engine-editorial-grid__card.is-media,
.engine-editorial-grid .engine-editorial-grid__card.is-tone{
	display:grid;
}
.engine-editorial-grid .engine-editorial-grid__card.is-media > img,
.engine-editorial-grid .engine-editorial-grid__card.is-media > figcaption,
.engine-editorial-grid .engine-editorial-grid__card.is-tone > .engine-editorial-grid__caption{
	grid-area:1 / 1;
	min-inline-size:0;
	min-block-size:0;
}
.engine-editorial-grid .engine-editorial-grid__card figcaption,
.engine-editorial-grid .engine-editorial-grid__card .engine-editorial-grid__caption{
	position:absolute;
	inset-inline-start:0;
	inset-block-end:0;
	z-index:2;
	margin:0;
	padding:var(--wp--custom--space--inline);
	max-inline-size:100%;
	text-align:start;
	font-family:var(--wp--preset--font-family--display);
	font-size:var(--wp--preset--font-size--body-lg);
	font-style:italic;
	line-height:var(--wp--custom--line--heading);
}
.engine-editorial-grid .engine-editorial-grid__card.is-media figcaption,
.engine-editorial-grid .engine-editorial-grid__card.is-tone > .engine-editorial-grid__caption{
	position:static;
	align-self:end;
	justify-self:start;
}
.engine-editorial-grid .engine-editorial-grid__card.is-media figcaption{
	color:var(--wp--custom--color--ink-inverse);
}
.engine-editorial-grid .engine-editorial-grid__card a{
	position:static;
	color:inherit;
	text-decoration:none;
}
.engine-editorial-grid .engine-editorial-grid__card a:hover,
.engine-editorial-grid .engine-editorial-grid__card:has(a):hover a{
	text-decoration:underline;
}
/* One link per card. The pseudo covers the card because the card is the
   nearest positioned ancestor. */
.engine-editorial-grid .engine-editorial-grid__card a::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:3;
	border-radius:inherit;
	background-color:transparent;
}
.engine-editorial-grid .engine-editorial-grid__card.is-linked,
.engine-editorial-grid .engine-editorial-grid__card:has(a){
	cursor:pointer;
}
.engine-editorial-grid .engine-editorial-grid__card.is-linked:hover,
.engine-editorial-grid .engine-editorial-grid__card:has(a):hover{
	outline:var(--wp--custom--border--rule) solid var(--wp--custom--color--accent);
	outline-offset:var(--wp--custom--border--rule);
}
@supports selector(:has(*)){
	.engine-editorial-grid .engine-editorial-grid__card:has(a:focus-visible){
		outline:var(--wp--custom--border--rule) solid var(--wp--custom--color--accent-soft);
		outline-offset:var(--wp--custom--border--rule);
	}
	.engine-editorial-grid .engine-editorial-grid__card a:focus-visible{
		outline:none;
	}
}
@media (prefers-reduced-motion: reduce){
	.engine-editorial-grid .engine-editorial-grid__card img{
		transition:none;
	}
	.engine-editorial-grid .engine-editorial-grid__card:hover img,
	.engine-editorial-grid .engine-editorial-grid__card:focus-within img{
		transform:none;
	}
}

/* ── Scroll motion: the photograph slides inside its frame as the card passes,
   slower than the page. Scaled up so the frame stays covered at either end;
   `scale` and `translate` compose with the hover transform. ── */
html[data-scroll-motion] .engine-editorial-grid .engine-editorial-grid__card img { --engine-scroll-y: -9%; scale: 1.2; }

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		html[data-scroll-motion] .engine-editorial-grid .engine-editorial-grid__card img {
			animation: engine-scroll-drift linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}

/* Room between the intro and the cards. WordPress's per-container layout rule
   zeroes the vertical gap between a section's children (the generated theme
   does not enable block-gap support), so the pattern states its own: the
   block step, the distance the design draws under the intro. */
.engine-editorial-grid > .engine-editorial-grid__rail {
	margin-block-start: var(--wp--custom--space--block);
}

/* Header rhythm. WordPress's per-container layout rule zeroes the gap between a
   group's children (the generated theme does not enable block-gap support), so
   the header states its own, the same step the sibling patterns use. */
.engine-editorial-grid .engine-editorial-grid__header > * + *{
	margin-block-start:var(--wp--custom--space--inline);
}

/* voice: plain — the header of a plainer design, so the section reads like its
   neighbours: the markup drops the italic and sets the intro to body size;
   here the intro turns soft and a hairline replaces the glyph. */
.engine-editorial-grid.is-voice-plain .engine-editorial-grid__intro{
	font-weight:400;
	line-height:var(--wp--custom--line--body);
	color:var(--wp--custom--color--ink-soft, currentColor);
}
.engine-editorial-grid.is-voice-plain .engine-editorial-grid__eyebrow{
	display:flex;
	align-items:center;
	gap:0.8em;
}
.engine-editorial-grid.is-voice-plain .engine-editorial-grid__eyebrow::before{
	content:"";
	flex:none;
	inline-size:1.6em;
	block-size:var(--wp--custom--border--hairline);
	background:currentColor;
	margin-inline-end:0;
}
/* caption_style: label — an italic display line over a photograph is the
   editorial signature (and a project title wants it), so this is a separate
   switch: the caption becomes a small tracked label in the eyebrow rung, the
   same voice as a plainer design's datelines and ledger keys. Weight follows
   the design's display weight. */
.engine-editorial-grid.is-captions-label .engine-editorial-grid__card figcaption,
.engine-editorial-grid.is-captions-label .engine-editorial-grid__card .engine-editorial-grid__caption{
	font-style:normal;
	font-size:var(--wp--preset--font-size--eyebrow);
	font-weight:var(--wp--custom--font--weight--display, 500);
	letter-spacing:0.16em;
	text-transform:uppercase;
	line-height:var(--wp--custom--line--body);
}

/* ── fact-tiles ── */
.engine-fact-tiles {
	--engine-fact-tiles-cols: 4;
	--engine-fact-tiles-gap: clamp(1rem, 2vw, 1.5rem);
	position: relative;
	isolation: isolate;
	overflow: clip; /* clip, not hidden: hidden makes a scroll container, which would break scroll-driven view() timelines inside */
}

.engine-fact-tiles__header > * { max-inline-size: var(--wp--custom--measure--heading, 40rem); }
.engine-fact-tiles__header > * { margin-block: 0; }
.engine-fact-tiles__header > * + * { margin-block-start: var(--wp--custom--space--inline); }
.engine-fact-tiles.is-align-center .engine-fact-tiles__header { text-align: center; }
.engine-fact-tiles.is-align-center .engine-fact-tiles__header > * { margin-inline: auto; }
.engine-fact-tiles__eyebrow { color: var(--wp--custom--color--accent); }
.engine-fact-tiles__heading { text-wrap: balance; line-height: var(--wp--custom--line--tight); }
.engine-fact-tiles__intro { max-inline-size: var(--wp--custom--measure--prose, 62ch); color: var(--wp--custom--color--ink-soft, currentColor); line-height: var(--wp--custom--line--body); }

/* Room between the header and the tiles: the pattern states its own gap. */
.engine-fact-tiles > .engine-fact-tiles__header + .engine-fact-tiles__grid { margin-block-start: var(--wp--custom--space--block); }

.engine-fact-tiles__grid {
	display: grid;
	gap: var(--engine-fact-tiles-gap);
	grid-template-columns: repeat(auto-fit, minmax(max(min(var(--wp--custom--grid--tile-min), 100%), (100% - (var(--engine-fact-tiles-cols) - 1) * var(--engine-fact-tiles-gap)) / var(--engine-fact-tiles-cols)), 1fr));
}
.engine-fact-tiles__grid > * { margin-block: 0; }
.engine-fact-tiles__grid.is-cols-2 { --engine-fact-tiles-cols: 2; }
.engine-fact-tiles__grid.is-cols-3 { --engine-fact-tiles-cols: 3; }
.engine-fact-tiles__grid.is-cols-4 { --engine-fact-tiles-cols: 4; }
.engine-fact-tiles__grid.is-cols-5 { --engine-fact-tiles-cols: 5; }

/* The tile: a glyph in a soft accent square, the label small and soft, the value bold. */
.engine-fact-tiles__tile {
	display: grid;
	gap: 0.35em;
	padding: var(--wp--custom--space--stack) var(--wp--custom--space--inline); /* stated: core pads any group with a background */
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 0.6rem 1.6rem color-mix(in srgb, var(--wp--custom--color--ink) 6%, transparent);
}
.engine-fact-tiles__tile > * { margin: 0; }
.engine-fact-tiles.is-align-center .engine-fact-tiles__tile { justify-items: center; text-align: center; }
.engine-fact-tiles__icon {
	display: inline-grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	margin-block-end: 0.4em;
	border-radius: var(--wp--custom--radius--md);
	background: color-mix(in srgb, var(--wp--custom--color--accent) 14%, var(--wp--custom--color--surface-alt));
	font-size: 1.375rem;
	line-height: 1;
}
.engine-fact-tiles__label { color: var(--wp--custom--color--ink-soft, currentColor); }
.engine-fact-tiles__value { font-weight: 700; line-height: var(--wp--custom--line--tight); }

/* ── feature-grid ── */
.engine-feature-grid {
	--engine-feature-grid-cols: 3;
	--engine-feature-grid-gap: var(--wp--custom--space--inline);
	--engine-feature-grid-eyebrow: var(--wp--custom--color--accent);
	--engine-feature-grid-border: color-mix(in srgb, var(--wp--custom--color--ink) 10%, transparent);
	position: relative;
	isolation: isolate;
	overflow: clip; /* clip, not hidden: hidden makes a scroll container, which would break scroll-driven view() timelines inside */
}
.engine-feature-grid.is-variant-surface-dark {
	--engine-feature-grid-eyebrow: var(--wp--custom--color--accent-soft);
	--engine-feature-grid-border: color-mix(in srgb, var(--wp--custom--color--ink-inverse) 14%, transparent);
}

.engine-feature-grid__header > * { max-inline-size: var(--wp--custom--measure--heading, 40rem); }
.engine-feature-grid__header > * { margin-block: 0; }
.engine-feature-grid__header > * + * { margin-block-start: var(--wp--custom--space--inline); }

.engine-feature-grid__eyebrow { display: flex; align-items: center; gap: 0.8em; color: var(--engine-feature-grid-eyebrow); }
.engine-feature-grid__eyebrow.has-rule::before {
	content: "";
	flex: none;
	inline-size: 1.6em;
	block-size: var(--wp--custom--border--hairline);
	background: currentColor;
}
.engine-feature-grid__heading { text-wrap: balance; line-height: var(--wp--custom--line--tight); }
.engine-feature-grid__intro { color: var(--wp--custom--color--ink-soft, currentColor); line-height: var(--wp--custom--line--body); }
.engine-feature-grid.is-variant-surface-dark .engine-feature-grid__intro { color: currentColor; opacity: 0.8; }

.engine-feature-grid__grid {
	display: grid;
	gap: var(--engine-feature-grid-gap);
	grid-template-columns: repeat(auto-fit, minmax(max(min(var(--wp--custom--grid--card-min), 100%), (100% - (var(--engine-feature-grid-cols) - 1) * var(--engine-feature-grid-gap)) / var(--engine-feature-grid-cols)), 1fr));
}
.engine-feature-grid__grid > * { margin-block: 0; }
.engine-feature-grid__grid.is-cols-2 { --engine-feature-grid-cols: 2; }
.engine-feature-grid__grid.is-cols-3 { --engine-feature-grid-cols: 3; }
.engine-feature-grid__grid.is-cols-4 { --engine-feature-grid-cols: 4; }

.engine-feature-grid__card {
	position: relative;
	display: grid;
	align-content: start;
	gap: 0.6em;
	block-size: 100%;
	padding: clamp(1.5rem, 2.6vw, 2.375rem) clamp(1.25rem, 2vw, 1.875rem);
	border: var(--wp--custom--border--hairline) solid var(--engine-feature-grid-border);
	border-radius: var(--wp--custom--radius--sm);
	transition: transform var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base);
}
.engine-feature-grid__card:hover,
.engine-feature-grid__card:focus-within { transform: translateY(-0.2rem); border-color: var(--wp--custom--color--accent); }
.engine-feature-grid__card > * { margin: 0; }

.engine-feature-grid__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin-block-end: 0.6em;
	border: calc(var(--wp--custom--border--hairline) * 1.5) solid var(--wp--custom--color--accent);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--custom--color--accent);
}
.engine-feature-grid.is-variant-surface-dark .engine-feature-grid__badge {
	border-color: var(--wp--custom--color--accent-soft);
	color: var(--wp--custom--color--accent-soft);
}
.engine-feature-grid__badge svg { inline-size: 1.125rem; block-size: 1.125rem; }

.engine-feature-grid__title { line-height: var(--wp--custom--line--heading, var(--wp--custom--line--tight)); font-weight: 600; }
.engine-feature-grid__body { color: var(--wp--custom--color--ink-soft, currentColor); line-height: var(--wp--custom--line--body); }
.engine-feature-grid.is-variant-surface-dark .engine-feature-grid__body { color: currentColor; opacity: 0.8; }

.engine-feature-grid__card a { color: inherit; text-decoration: none; }
.engine-feature-grid__card a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.engine-feature-grid__card a:focus-visible { outline: none; }
.engine-feature-grid__card:has(a:focus-visible) { outline: var(--wp--custom--border--rule) solid var(--wp--custom--color--accent); outline-offset: var(--wp--custom--border--rule); }

.engine-feature-grid__dots {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: var(--wp--custom--space--gutter);
	inline-size: clamp(8rem, 24vw, 22rem);
	block-size: auto;
	z-index: 0;
	pointer-events: none;
}
.engine-feature-grid__dots .is-accent { fill: var(--wp--custom--color--accent); }
.engine-feature-grid__dots .is-soft { fill: var(--wp--custom--color--accent-soft); opacity: 0.6; }

@media (prefers-reduced-motion: reduce) {
	.engine-feature-grid__card { transition: none; }
	.engine-feature-grid__card:hover, .engine-feature-grid__card:focus-within { transform: none; }
}

/* ── Scroll motion (opt-in per site): the dots drift against the section as
   it passes through the viewport. ── */
html[data-scroll-motion] .engine-feature-grid__dots { --engine-scroll-y: 70%; }

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		html[data-scroll-motion] .engine-feature-grid__dots {
			animation: engine-scroll-drift linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}

/* Room between the intro and the cards. WordPress's per-container layout rule
   zeroes the vertical gap between a section's children (the generated theme
   does not enable block-gap support), so the pattern states its own: the
   block step, the distance the design draws under the intro. */
.engine-feature-grid > .engine-feature-grid__grid {
	margin-block-start: var(--wp--custom--space--block);
}

/* variant: panel — the panel gradient under light, borderless cards. */
.engine-feature-grid.is-variant-panel { --engine-feature-grid-border: transparent; }
.engine-feature-grid.is-variant-panel .engine-feature-grid__card {
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 0.6rem 1.6rem color-mix(in srgb, var(--wp--custom--color--ink) 6%, transparent);
}

/* align: center — the header over the middle of the grid, each card's icon,
   title and copy centred. */
.engine-feature-grid.is-align-center .engine-feature-grid__header { text-align: center; }
.engine-feature-grid.is-align-center .engine-feature-grid__header > * { margin-inline: auto; }
.engine-feature-grid.is-align-center .engine-feature-grid__eyebrow { justify-content: center; }
.engine-feature-grid.is-align-center .engine-feature-grid__card { justify-items: center; text-align: center; }

/* A glyph icon (an emoji, a letter) sits in a soft accent tile instead of a ring. */
.engine-feature-grid__badge.is-glyph {
	inline-size: 4.5rem;
	block-size: 4.5rem;
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	background: color-mix(in srgb, var(--wp--custom--color--accent) 14%, var(--wp--custom--color--surface-alt));
	font-size: 2rem;
	line-height: 1;
}

/* The arrow link at the foot of a card, kept at the bottom whatever the copy's length. */
.engine-feature-grid__more {
	margin-block-start: auto;
	padding-block-start: 0.4em;
	font-weight: 700;
	color: var(--wp--custom--color--accent);
}
.engine-feature-grid__more a { color: inherit; text-decoration: none; }

/* ── motif: paws — a trail of prints behind the cards, in the accent at low
   strength. With scroll motion on, each print steps in as the section passes;
   without it, the trail is simply there. ── */
.engine-feature-grid__paws {
	position: absolute;
	inset: 0;
	z-index: -1;
	inline-size: 100%;
	block-size: 100%;
	pointer-events: none;
	fill: var(--wp--custom--color--accent);
}
.engine-feature-grid__paw { opacity: 0.16; }
.engine-feature-grid.is-variant-surface-dark .engine-feature-grid__paws { fill: var(--wp--custom--color--accent-soft); }

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		html[data-scroll-motion] .engine-feature-grid { view-timeline: --engine-section block; }
		html[data-scroll-motion] .engine-feature-grid__paw {
			animation: engine-step-in steps(1, end) both;
			animation-timeline: --engine-section;
		}
		html[data-scroll-motion] .engine-feature-grid__paw:nth-child(1) { animation-range: cover 4% cover 5%; }
		html[data-scroll-motion] .engine-feature-grid__paw:nth-child(2) { animation-range: cover 9% cover 10%; }
		html[data-scroll-motion] .engine-feature-grid__paw:nth-child(3) { animation-range: cover 14% cover 15%; }
		html[data-scroll-motion] .engine-feature-grid__paw:nth-child(4) { animation-range: cover 19% cover 20%; }
		html[data-scroll-motion] .engine-feature-grid__paw:nth-child(5) { animation-range: cover 24% cover 25%; }
		html[data-scroll-motion] .engine-feature-grid__paw:nth-child(6) { animation-range: cover 29% cover 30%; }
		html[data-scroll-motion] .engine-feature-grid__paw:nth-child(7) { animation-range: cover 34% cover 35%; }
		html[data-scroll-motion] .engine-feature-grid__paw:nth-child(8) { animation-range: cover 39% cover 40%; }
		html[data-scroll-motion] .engine-feature-grid__paw:nth-child(9) { animation-range: cover 44% cover 45%; }

		/* A glyph tile pops once as its card arrives. */
		html[data-scroll-motion] .engine-feature-grid__badge.is-glyph {
			animation: engine-pop cubic-bezier(0.2, 0.7, 0.2, 1) both;
			animation-timeline: view();
			animation-range: entry 30% entry 80%;
		}
	}
}

/* ── hero-plate ── */
/*
 * Pattern-scoped presentation for engine/hero-plate.
 *
 * Every colour resolves to a semantic ROLE custom property emitted by the
 * generated theme.json; the local --engine-plate-* properties exist only so the
 * `variant` prop can repoint a whole set of roles from a single class.
 *
 * The composition is held together by hairlines and white space, not by a
 * photographic backdrop — see the note at the top of hero-plate.php for why
 * this is a second hero archetype rather than a variant of hero-split.
 */
.engine-hero-plate {
	--engine-plate-ink: var(--wp--custom--color--ink);
	--engine-plate-soft: var(--wp--custom--color--ink-soft, var(--wp--custom--color--ink));
	--engine-plate-accent: var(--wp--custom--color--accent);
	/* Rules read as drawn lines, not as borders: a tint of the ink, never a
	   literal grey, so they stay correct on any surface in any palette. */
	--engine-plate-rule: color-mix(in srgb, var(--engine-plate-ink) 26%, transparent);
	--engine-plate-rule-strong: color-mix(in srgb, var(--engine-plate-ink) 62%, transparent);
	--engine-plate-gap: clamp(2rem, 4.5vw, 4.5rem);
}

.engine-hero-plate.is-variant-surface-dark,
.engine-hero-plate.is-variant-panel {
	--engine-plate-ink: var(--wp--custom--color--ink-inverse);
	--engine-plate-soft: color-mix(in srgb, var(--wp--custom--color--ink-inverse) 74%, transparent);
	--engine-plate-accent: var(--wp--custom--color--accent-soft);
}

/* ── dateline: short metadata spread along a rule, broadsheet-style ───────── */

.engine-hero-plate__dateline {
	gap: var(--wp--custom--space--stack);
	padding-block: var(--wp--custom--space--stack);
	border-block-start: var(--wp--custom--border--hairline) solid var(--engine-plate-rule-strong);
	border-block-end: var(--wp--custom--border--hairline) solid var(--engine-plate-rule);
}

.engine-hero-plate.is-rule-none .engine-hero-plate__dateline,
.engine-hero-plate.is-rule-bottom .engine-hero-plate__dateline {
	border-block-start-color: transparent;
}

.engine-hero-plate__dateline-item {
	margin: 0;
	color: var(--engine-plate-soft);
}

/* The first entry carries the accent so the rule has a point of entry. */
.engine-hero-plate__dateline-item:first-child {
	color: var(--engine-plate-accent);
}

/* ── main: the type column beside the framed plate ────────────────────────── */

.engine-hero-plate__main {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	column-gap: var(--engine-plate-gap);
	row-gap: var(--wp--custom--space--block);
	align-items: start;
	padding-block-start: clamp(2rem, 4.5vw, 4rem);
}

/*
 * Core's flow layout puts its block gap as a top margin on every child of a
 * group but the first. Inside a grid that margin survives, so the plate sat a
 * gap lower than the headline and the second ledger cell a gap lower than the
 * first. Two classes so the rule outranks core's :root :where() declaration.
 */
.engine-hero-plate .engine-hero-plate__main > *,
.engine-hero-plate .engine-hero-plate__ledger > * {
	margin-block: 0;
}

.engine-hero-plate.has-no-plate .engine-hero-plate__main {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * plate_side pins BOTH the column and the row on each child. Grid's placement
 * cursor only moves forward: with the DOM order lede-then-plate, a plate asking
 * for column 1 would push the lede to a second row. Naming the row keeps them
 * side by side whichever side the plate is on.
 */
.engine-hero-plate.is-side-start .engine-hero-plate__lede {
	grid-row: 1;
	grid-column: 2;
}

.engine-hero-plate.is-side-start .engine-hero-plate__plate {
	grid-row: 1;
	grid-column: 1;
}

.engine-hero-plate__lede > *,
.engine-hero-plate__plate > * {
	margin-block: 0;
}

.engine-hero-plate__lede {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(1.25rem, 2.4vw, 2rem);
}

.engine-hero-plate__heading {
	margin: 0;
	max-inline-size: var(--wp--custom--measure--heading);
	line-height: var(--wp--custom--line--tight);
	text-wrap: balance;
}

/*
 * Core paints <mark> with its own background and colour. The heading uses it
 * only as an inline hook for the emphasis phrase, so both are reset and the
 * accent role is applied to the text.
 */
.engine-hero-plate__emphasis {
	background: none;
	color: var(--engine-plate-accent);
}

.engine-hero-plate__standfirst {
	margin: 0;
	max-inline-size: var(--wp--custom--measure--narrow);
	color: var(--engine-plate-soft);
	line-height: var(--wp--custom--line--body);
}

/* ── the single action: a ruled caps link, deliberately not a pill ────────── */

.engine-hero-plate__action {
	margin: 0;
}

.engine-hero-plate__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	padding-block-end: 0.5em;
	border-block-end: var(--wp--custom--border--rule) solid var(--engine-plate-accent);
	color: var(--engine-plate-ink);
	text-decoration: none;
	transition: gap var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}

/* The arrow is drawn, not typed, so no glyph leaks into the copy. */
.engine-hero-plate__cta::after {
	content: "";
	inline-size: 2.25em;
	block-size: var(--wp--custom--border--rule);
	background: currentColor;
	transition: inline-size var(--wp--custom--transition--base);
}

.engine-hero-plate__cta:hover,
.engine-hero-plate__cta:focus-visible {
	gap: 1.1em;
	color: var(--engine-plate-accent);
	text-decoration: none;
}

.engine-hero-plate__cta:hover::after,
.engine-hero-plate__cta:focus-visible::after {
	inline-size: 3em;
}

.engine-hero-plate__cta:focus-visible {
	outline: var(--wp--custom--border--rule) solid var(--engine-plate-accent);
	outline-offset: 0.35em;
}

/* ── the plate: contained, framed, captioned ──────────────────────────────── */

.engine-hero-plate__plate {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--stack);
}

.engine-hero-plate__figure {
	margin: 0;
	/* A hairline frame with a small inset, the way a plate is mounted on a
	   page. The radius token is honoured so a rounded design still reads. */
	padding: var(--wp--custom--space--stack);
	border: var(--wp--custom--border--hairline) solid var(--engine-plate-rule);
	border-radius: var(--wp--custom--radius--xs);
}

.engine-hero-plate__figure img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 4;
	border-radius: var(--wp--custom--radius--xs);
}

.engine-hero-plate.is-plate-tall .engine-hero-plate__figure img {
	aspect-ratio: 2 / 3;
}

.engine-hero-plate.is-plate-square .engine-hero-plate__figure img {
	aspect-ratio: 1;
}

.engine-hero-plate.is-plate-landscape .engine-hero-plate__figure img {
	aspect-ratio: 3 / 2;
}

.engine-hero-plate__caption {
	margin: 0;
	color: var(--engine-plate-soft);
	/* Hangs off a short rule, the way a plate caption is set in a book. */
	padding-inline-start: 2.4em;
	position: relative;
}

.engine-hero-plate__caption::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.62em;
	inline-size: 1.7em;
	block-size: var(--wp--custom--border--hairline);
	background: var(--engine-plate-accent);
}

/* ── ledger: standing facts divided by vertical hairlines ─────────────────── */

.engine-hero-plate__ledger {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	margin-block-start: clamp(2.5rem, 6vw, 5rem);
	border-block-start: var(--wp--custom--border--hairline) solid var(--engine-plate-rule-strong);
}

.engine-hero-plate.is-rule-none .engine-hero-plate__ledger,
.engine-hero-plate.is-rule-top .engine-hero-plate__ledger {
	border-block-start-color: transparent;
}

.engine-hero-plate__cell {
	display: flex;
	flex-direction: column;
	gap: 0.55em;
	padding-block: var(--wp--custom--space--stack);
	padding-inline: var(--wp--custom--space--stack);
	border-inline-start: var(--wp--custom--border--hairline) solid var(--engine-plate-rule);
}

/* The outer edges of the ledger stay open; only the interior is divided. */
.engine-hero-plate__cell:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}

.engine-hero-plate__cell > * {
	margin-block: 0;
}

.engine-hero-plate__cell-label {
	margin: 0;
	color: var(--engine-plate-soft);
}

.engine-hero-plate__cell-value {
	margin: 0;
	color: var(--engine-plate-ink);
}

.engine-hero-plate__cell-value a {
	color: inherit;
	text-decoration: none;
	border-block-end: var(--wp--custom--border--hairline) solid var(--engine-plate-accent);
	transition: color var(--wp--custom--transition--base);
}

.engine-hero-plate__cell-value a:hover,
.engine-hero-plate__cell-value a:focus-visible {
	color: var(--engine-plate-accent);
	text-decoration: none;
}

/*
 * The only breakpoint in this pattern. A two-column hero cannot be expressed
 * fluidly once the type column drops below its own measure, so below the
 * tablet frame the plate moves under the type and the ledger stacks into a
 * ruled list instead of a divided row.
 */
@media (max-width: 47.99em) {
	.engine-hero-plate__main,
	.engine-hero-plate.is-side-start .engine-hero-plate__main {
		grid-template-columns: minmax(0, 1fr);
	}

	.engine-hero-plate.is-side-start .engine-hero-plate__lede,
	.engine-hero-plate.is-side-start .engine-hero-plate__plate {
		grid-row: auto;
		grid-column: 1;
	}

	.engine-hero-plate__dateline {
		gap: 0.4em var(--wp--custom--space--stack);
	}

	.engine-hero-plate__ledger {
		grid-template-columns: minmax(0, 1fr);
	}

	.engine-hero-plate__cell {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--wp--custom--space--stack);
		padding-inline: 0;
		border-inline-start: 0;
		border-block-end: var(--wp--custom--border--hairline) solid var(--engine-plate-rule);
	}

	.engine-hero-plate__cell-value {
		text-align: end;
	}
}

@media (prefers-reduced-motion: reduce) {
	.engine-hero-plate__cta,
	.engine-hero-plate__cta::after,
	.engine-hero-plate__cell-value a {
		transition: none;
	}
}

/* ── hero-split ── */
/* ── Panel ─────────────────────────────────────────────────────────────── */
.engine-hero-split {
	--engine-hero-split-wave-height: clamp(2rem, 4.5vw, 5rem);
	--engine-hero-split-wave-fill: var(--wp--custom--color--canvas);
	--engine-hero-split-backdrop: none;
	position: relative;
	isolation: isolate;
	overflow: clip; /* clip, not hidden: hidden makes a scroll container, which would break scroll-driven view() timelines inside */
	background-image: var(--engine-hero-split-backdrop);
	background-repeat: no-repeat;
	background-size: cover;
	padding-block-start: var(--wp--custom--space--section);
	padding-block-end: var(--wp--custom--space--section);
}

.engine-hero-split--has-wave {
	padding-block-end: calc(var(--wp--custom--space--section) + var(--engine-hero-split-wave-height));
}

.engine-hero-split--brand-deep {
	--engine-hero-split-backdrop: var(--wp--preset--gradient--hero-glow);
	background-color: var(--wp--custom--color--brand-deep);
	color: var(--wp--custom--color--ink-inverse);
}

.engine-hero-split--canvas {
	background-color: var(--wp--custom--color--canvas);
	color: var(--wp--custom--color--ink);
}
/* glow: the canvas rules, washed with the design's hero-glow gradient. */
.engine-hero-split--glow {
	background-image: var(--wp--preset--gradient--hero-glow);
}

/* ── Backdrop variant: copy over a full-bleed photograph ───────────────── */
/*
 * Composited the way the design draws it: the brand panel gradient underneath,
 * the photograph over it at partial opacity so the palette tints it, and a
 * dark wash on top that deepens toward the foot where the copy sits.
 */
.engine-hero-split--backdrop {
	--engine-hero-split-backdrop: var(--wp--preset--gradient--panel);
	--engine-hero-split-photo-opacity: 0.62;
	/* A video is there to be seen moving; it is not tinted down like a still. */
	--engine-hero-split-video-opacity: 1;
	background-color: var(--wp--custom--color--brand-deep);
	color: var(--wp--custom--color--ink-inverse);
	padding-block-start: clamp(5rem, 9vw, 8.125rem);
	padding-block-end: clamp(3.5rem, 6.25vw, 5.625rem);
}

/* backdrop_ratio: the hero's height follows its width at the media's ratio,
   so the photograph or video shows its whole frame, never cropped or zoomed
   (aspect-ratio still lets the box grow when the copy needs more room, as on
   a phone, where the media then covers). The section becomes a grid so the
   copy centres in the box; backdrop, sun and wave are positioned absolutely
   and are not affected. Without a ratio the height comes from the copy, as
   drawn, and above the design's width the hero keeps that proportion
   (606/1440, about 42vw) instead of thinning into a strip. */
.engine-hero-split--backdrop[class*="is-ratio-"] {
	display: grid;
	align-content: center;
}
.engine-hero-split--backdrop.is-ratio-16-9 { aspect-ratio: 16 / 9; }
.engine-hero-split--backdrop.is-ratio-21-9 { aspect-ratio: 21 / 9; }
.engine-hero-split--backdrop.is-ratio-2-1  { aspect-ratio: 2 / 1; }
.engine-hero-split--backdrop.is-ratio-3-2  { aspect-ratio: 3 / 2; }
.engine-hero-split--backdrop.is-ratio-4-3  { aspect-ratio: 4 / 3; }

/* A phone cannot hold the copy inside a 16:9 band: there the copy sets the
   height, as without a ratio, and the media covers the taller box. */
@media (max-width: 47.99em) {
	.engine-hero-split--backdrop[class*="is-ratio-"] {
		aspect-ratio: auto;
	}
}

@media (min-width: 90.0625em) {
	.engine-hero-split--backdrop:not([class*="is-ratio-"]) {
		display: grid;
		align-content: center;
		min-block-size: min(42vw, 85svh);
	}
}

/* Constrained layouts cap every child at the content measure, absolutely
   positioned or not; the photograph must reach both viewport edges. */
.engine-hero-split__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-inline-size: none;
	margin: 0;
	overflow: clip; /* clip, not hidden: hidden makes a scroll container, which would break scroll-driven view() timelines inside */
}

/* Each colourway's layer is a core group holding a core image or video block;
   wrapper and figure both fill the box so the media can cover it. */
.engine-hero-split__layer,
.engine-hero-split__backdrop .wp-block-image,
.engine-hero-split__backdrop .wp-block-video {
	position: absolute;
	inset: 0;
	margin: 0;
	max-inline-size: none;
}

/* A photograph or a muted looping video: same box, same opacity. Only the
   photograph gets the slow zoom below; a video brings its own camera motion,
   and scaling it on top magnifies a clip that is already being upscaled. */
.engine-hero-split__backdrop img,
.engine-hero-split__backdrop video {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	opacity: var(--engine-hero-split-photo-opacity);
	transform-origin: 50% 40%;
}

.engine-hero-split__backdrop video {
	opacity: var(--engine-hero-split-video-opacity);
}

/* A per-colourway backdrop fades between palettes (generated
   [data-palette-layer] rules drive the opacity; the transition is theirs). */
.engine-hero-split__backdrop img[data-palette-layer],
.engine-hero-split__backdrop video[data-palette-layer] {
	transition: opacity var(--wp--custom--transition--slow, 450ms ease);
}

/* The wash: the darkest surface, light at the top and heavier at the foot, so
   the photograph shows through above the heading and the copy stays legible;
   under it a breath of the mid brand tone warms the foot the way the design's
   wash runs from near-black into the accent. */
.engine-hero-split__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(
			to bottom,
			color-mix(in srgb, var(--wp--custom--color--surface-dark) 26%, transparent),
			color-mix(in srgb, var(--wp--custom--color--surface-dark) 52%, transparent)
		),
		linear-gradient(
			to bottom,
			transparent 35%,
			color-mix(in srgb, var(--wp--custom--color--brand-mid) 38%, transparent)
		);
}

/* backdrop_wash: leading — the wash ramps across the hero as well as down it.
   The copy edge keeps a ground dark enough for inverse text; the trailing half
   thins out so a figure standing there holds its own colour instead of being
   painted over in the brand hue. The direction is a custom property so the
   ramp can follow text direction rather than assuming copy sits on the left. */
.engine-hero-split--backdrop.is-wash-leading .engine-hero-split__backdrop::after {
	background-image:
		linear-gradient(
			to bottom,
			color-mix(in srgb, var(--wp--custom--color--surface-dark) 18%, transparent),
			color-mix(in srgb, var(--wp--custom--color--surface-dark) 32%, transparent)
		),
		linear-gradient(
			to var(--engine-hero-split-wash-to, right),
			color-mix(in srgb, var(--wp--custom--color--surface-dark) 90%, transparent) 0%,
			color-mix(in srgb, var(--wp--custom--color--surface-dark) 74%, transparent) 32%,
			color-mix(in srgb, var(--wp--custom--color--brand-deep) 34%, transparent) 58%,
			transparent 86%
		);
}

[dir="rtl"] .engine-hero-split--backdrop.is-wash-leading .engine-hero-split__backdrop::after {
	--engine-hero-split-wash-to: left;
}

.engine-hero-split--backdrop .engine-hero-split__inner {
	grid-template-columns: minmax(0, 1fr);
}

.engine-hero-split--backdrop .engine-hero-split__content {
	max-inline-size: 52rem;
}

/* A leading wash is an asymmetric composition: the subject stands in the
   trailing half and the copy belongs against the leading edge, not floated in
   the middle of the frame where it drifts over the photograph. The measure
   also tightens, so the lines never run under the subject.

   The inner has to be told to fill its constrained width first. In backdrop
   mode it is shrink-to-fit, so a percentage measure on the copy inside it has
   nothing to resolve against and the pair collapses toward the centre. */
.engine-hero-split--backdrop.is-wash-leading .engine-hero-split__inner {
	inline-size: 100%;
}

.engine-hero-split--backdrop.is-wash-leading .engine-hero-split__content {
	max-inline-size: min(38rem, 52%);
	margin-inline: 0 auto;
}

/* Where the subject sits in the frame, for the crops that cannot show all of
   it. A leading wash already says the subject stands in the trailing half, so
   that is the default; a site whose figure sits elsewhere can retune it. */
.engine-hero-split--backdrop.is-wash-leading .engine-hero-split__backdrop img,
.engine-hero-split--backdrop.is-wash-leading .engine-hero-split__backdrop video {
	object-position: var(--engine-hero-split-focus, 78%) center;
}

@media (max-width: 767px) {
	/* Nothing has room to stand beside anything else. The copy takes the full
	   width back and the wash returns to veiling the whole frame, because a
	   horizontal ramp across a phone leaves the last lines on bare photograph. */
	.engine-hero-split--backdrop.is-wash-leading .engine-hero-split__content {
		max-inline-size: none;
	}

	/* Push the subject to the trailing edge so the copy, which now spans the
	   full width, crosses as little of it as possible. */
	.engine-hero-split--backdrop.is-wash-leading .engine-hero-split__backdrop img,
	.engine-hero-split--backdrop.is-wash-leading .engine-hero-split__backdrop video {
		object-position: var(--engine-hero-split-focus-narrow, 92%) center;
	}

	.engine-hero-split--backdrop.is-wash-leading .engine-hero-split__backdrop::after {
		background-image:
			linear-gradient(
				to bottom,
				color-mix(in srgb, var(--wp--custom--color--surface-dark) 40%, transparent),
				color-mix(in srgb, var(--wp--custom--color--surface-dark) 72%, transparent)
			);
	}
}

.engine-hero-split--backdrop .engine-hero-split__eyebrow,
.engine-hero-split--backdrop .engine-hero-split__glyph,
.engine-hero-split--backdrop .engine-hero-split__heading,
.engine-hero-split--backdrop .engine-hero-split__body {
	color: var(--wp--custom--color--ink-inverse);
}

/* The design lets the headline run to the measure rather than balancing it,
   and gives the body the full prose measure. */
.engine-hero-split--backdrop .engine-hero-split__heading {
	font-style: normal;
	font-weight: 400;
	text-wrap: pretty;
}

.engine-hero-split--backdrop .engine-hero-split__body {
	max-width: var(--wp--custom--measure--prose, 62ch);
}

/* Button labels: uppercase and tracked by default; `cta_case: none` keeps
   the label as written for designs that set their buttons in mixed case. */
.engine-hero-split--cta-none .engine-hero-split__ctas .wp-block-button__link {
	letter-spacing: 0;
	text-transform: none;
	font-weight: 700;
}

.engine-hero-split__emphasis {
	font-style: italic;
	color: var(--wp--custom--color--accent);
}
.engine-hero-split__emphasis.is-upright { font-style: normal; }

/* heading_style: upright — the display face as drawn, at the weight the
   design's display rung declares (the theme sets it on the size class). */
.engine-hero-split.is-heading-upright .engine-hero-split__heading {
	font-style: normal;
	font-weight: var(--wp--custom--font--weight--display, 700);
}

.engine-hero-split--brand-deep .engine-hero-split__emphasis {
	color: var(--wp--custom--color--accent-soft);
}

/* Eyebrow hairline (eyebrow_glyph: rule), drawn from the class so the text stays plain. */
.engine-hero-split__eyebrow.has-rule::before {
	content: "";
	flex: none;
	inline-size: 1.6em;
	block-size: var(--wp--custom--border--hairline);
	background: currentColor;
}

/* Small labels under the buttons: monospace-style, mixed case, hairline before each. */
.engine-hero-split__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em var(--wp--custom--space--inline);
	margin: var(--wp--custom--space--stack) 0 0;
	padding: 0;
	list-style: none;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.92;
}

.engine-hero-split__tags li {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.engine-hero-split__tags li::before {
	content: "";
	flex: none;
	inline-size: 1em;
	block-size: var(--wp--custom--border--hairline);
	background: currentColor;
}

/* Sun-lit dots: a decorative scatter in two corners of a backdrop hero, placed
   where the design draws them (top-right cluster overhanging the edge by ~3%,
   bottom-left cluster the same). Percentages of the section, not px. */
.engine-hero-split__sun {
	position: absolute;
	z-index: 1;
	inline-size: clamp(7rem, 19.4vw, 17.5rem);
	max-inline-size: none;
	block-size: auto;
	margin: 0;
	overflow: visible;
	pointer-events: none;
}

.engine-hero-split__sun--end {
	inset-block-start: 3%;
	inset-inline-end: -3.3%;
}

.engine-hero-split__sun--start {
	inset-block-end: 2.6%;
	inset-inline-start: -3.4%;
}

.engine-hero-split__sun circle {
	transform-box: fill-box;
	transform-origin: center;
}

.engine-hero-split__sun .is-sun {
	fill: var(--wp--custom--color--accent-soft);
	filter: drop-shadow(0 0 0.45em var(--wp--custom--color--accent-soft));
}
.engine-hero-split__sun .is-soft { fill: var(--wp--custom--color--accent-soft); opacity: 0.85; }
.engine-hero-split__sun .is-light { fill: var(--wp--custom--color--ink-inverse); opacity: 0.8; }

@media (max-width: 47.99em) {
	.engine-hero-split__sun--start {
		display: none;
	}
}

/* ── Scroll motion (opt-in per site): depth. As the hero leaves the top of
   the viewport the backdrop sinks slower than the page, the sun slower still,
   and the copy lifts away and fades: three planes. The values are declared
   outside the @supports so the script fallback reads the same numbers. ── */
html[data-scroll-motion] .engine-hero-split--backdrop .engine-hero-split__backdrop { --engine-scroll-y: 55%; }
html[data-scroll-motion] .engine-hero-split--backdrop .engine-hero-split__sun { --engine-scroll-y: 85%; }
html[data-scroll-motion] .engine-hero-split--backdrop .engine-hero-split__inner { --engine-scroll-y: -40%; --engine-scroll-fade: 0; }
/* A split hero: the media column sinks slower than the page, the copy lifts and fades. */
html[data-scroll-motion] .engine-hero-split:not(.engine-hero-split--backdrop) .engine-hero-split__media { --engine-scroll-y: 30%; }
html[data-scroll-motion] .engine-hero-split:not(.engine-hero-split--backdrop) .engine-hero-split__content { --engine-scroll-y: -22%; --engine-scroll-fade: 0.15; }

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		html[data-scroll-motion] .engine-hero-split {
			view-timeline: --engine-hero block;
		}
		html[data-scroll-motion] .engine-hero-split:not(.engine-hero-split--backdrop) .engine-hero-split__media {
			animation: engine-scroll-shift linear both;
			animation-timeline: --engine-hero;
			animation-range: exit 0% exit 100%;
		}
		html[data-scroll-motion] .engine-hero-split:not(.engine-hero-split--backdrop) .engine-hero-split__content {
			animation: engine-scroll-shift-fade linear both;
			animation-timeline: --engine-hero;
			animation-range: exit 0% exit 100%;
		}
		html[data-scroll-motion] .engine-hero-split--backdrop .engine-hero-split__backdrop,
		html[data-scroll-motion] .engine-hero-split--backdrop .engine-hero-split__sun {
			animation: engine-scroll-shift linear both;
			animation-timeline: --engine-hero;
			animation-range: exit 0% exit 100%;
		}
		html[data-scroll-motion] .engine-hero-split--backdrop .engine-hero-split__inner {
			animation: engine-scroll-shift-fade linear both;
			animation-timeline: --engine-hero;
			animation-range: exit 0% exit 100%;
		}
	}
}

/* ── Motion (backdrop): drifting dots, a breathing sun, a slow zoom, and a
   staged entrance for the copy. All of it only when motion is welcome. ── */
@media (prefers-reduced-motion: no-preference) {
	.engine-hero-split__sun .is-soft,
	.engine-hero-split__sun .is-light {
		animation: engine-hero-split-drift calc(6s + var(--engine-dot-index, 0) * 0.45s) ease-in-out infinite;
		animation-delay: calc(var(--engine-dot-index, 0) * -0.8s);
	}

	.engine-hero-split__sun .is-sun {
		animation: engine-hero-split-glow 5.5s ease-in-out infinite;
	}

	.engine-hero-split__backdrop img {
		animation: engine-hero-split-zoom 24s ease-in-out infinite alternate;
	}

	.engine-hero-split--backdrop .engine-hero-split__content > * {
		animation: engine-hero-split-rise 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
	.engine-hero-split--backdrop .engine-hero-split__content > :nth-child(1) { animation-delay: 0.05s; }
	.engine-hero-split--backdrop .engine-hero-split__content > :nth-child(2) { animation-delay: 0.17s; }
	.engine-hero-split--backdrop .engine-hero-split__content > :nth-child(3) { animation-delay: 0.29s; }
	.engine-hero-split--backdrop .engine-hero-split__content > :nth-child(4) { animation-delay: 0.41s; }
	.engine-hero-split--backdrop .engine-hero-split__content > :nth-child(5) { animation-delay: 0.53s; }
}

@keyframes engine-hero-split-drift {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(calc(var(--engine-dot-dx, 1) * 0.35em), calc(var(--engine-dot-dy, -1) * 0.5em)); }
}

@keyframes engine-hero-split-glow {
	0%, 100% { opacity: 0.82; transform: scale(0.96); filter: drop-shadow(0 0 0.35em var(--wp--custom--color--accent-soft)); }
	50%      { opacity: 1;    transform: scale(1.04); filter: drop-shadow(0 0 0.95em var(--wp--custom--color--accent-soft)); }
}

@keyframes engine-hero-split-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.06); }
}

@keyframes engine-hero-split-rise {
	from { opacity: 0; transform: translateY(0.6em); }
	to   { opacity: 1; transform: none; }
}

/* Wave fill follows whatever section comes next, chosen by the wave_fill prop. */
.engine-hero-split--wave-canvas       { --engine-hero-split-wave-fill: var(--wp--custom--color--canvas); }
.engine-hero-split--wave-surface-alt  { --engine-hero-split-wave-fill: var(--wp--custom--color--surface-alt); }
.engine-hero-split--wave-surface-card { --engine-hero-split-wave-fill: var(--wp--custom--color--surface-card); }
.engine-hero-split--wave-brand-deep   { --engine-hero-split-wave-fill: var(--wp--custom--color--brand-deep); }
.engine-hero-split--wave-surface-dark { --engine-hero-split-wave-fill: var(--wp--custom--color--surface-dark); }

/* ── Split ─────────────────────────────────────────────────────────────── */
.engine-hero-split__inner {
	position: relative;
	z-index: 2;
	display: grid;
	/* Copy column against visual column, ~3:2 — the proportion the design uses.
	   An auto-fit grid packed four columns into the wide measure instead, which
	   wrapped the copy and inflated the hero well past its designed height. */
	grid-template-columns: 3fr 2fr;
	align-items: center;
	gap: var(--wp--custom--space--block, clamp(2rem, 5vw, 4rem));
}

@media (max-width: 781px) {
	.engine-hero-split__inner {
		grid-template-columns: 1fr;
	}
}

.engine-hero-split__content {
	max-width: var(--wp--custom--measure--prose, 62ch);
}

/* ── Eyebrow ───────────────────────────────────────────────────────────── */
.engine-hero-split__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7em;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--custom--color--accent-soft);
}
/* eyebrow_style: chip — a soft accent pill, set as written. */
.engine-hero-split__eyebrow.is-chip {
	display: inline-flex;
	inline-size: fit-content;
	padding: 0.55em 1.1em;
	border-radius: var(--wp--custom--radius--pill);
	background: color-mix(in srgb, var(--wp--custom--color--accent) 16%, var(--wp--custom--color--canvas));
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--custom--color--accent);
}

.engine-hero-split--canvas .engine-hero-split__eyebrow {
	color: var(--wp--custom--color--accent);
}

.engine-hero-split__glyph {
	flex: none;
	font-size: 1.2em;
	line-height: 1;
	letter-spacing: 0;
	color: var(--wp--custom--color--accent);
}

.engine-hero-split--brand-deep .engine-hero-split__glyph {
	color: var(--wp--custom--color--accent-soft);
}

/* ── Heading ───────────────────────────────────────────────────────────── */
.engine-hero-split__heading {
	margin-block: 0;
	font-style: italic;
	font-weight: 500;
	line-height: var(--wp--custom--line--tight, 1.05);
	text-wrap: balance;
	color: var(--wp--custom--color--ink-inverse);
}

.engine-hero-split--canvas .engine-hero-split__heading {
	color: var(--wp--custom--color--ink);
}

.engine-hero-split__line {
	display: block;
}

/*
 * The script face carries far less optical weight than the display serif at the
 * same computed size, so it is scaled with a unitless multiplier of the heading
 * step rather than pinned to a second font-size token.
 */
.engine-hero-split__line--script {
	font-family: var(--wp--preset--font-family--script);
	font-style: normal;
	font-weight: 400;
	font-size: 1.35em;
	line-height: 0.95;
	color: var(--wp--custom--color--surface-card);
}

.engine-hero-split--canvas .engine-hero-split__line--script {
	color: var(--wp--custom--color--brand-deep);
}

/* ── Body ──────────────────────────────────────────────────────────────── */
.engine-hero-split__body {
	max-width: var(--wp--custom--measure--narrow, 44ch);
	color: var(--wp--custom--color--ink-inverse);
}

.engine-hero-split--canvas .engine-hero-split__body {
	color: var(--wp--custom--color--ink);
}
.engine-hero-split--glow .engine-hero-split__body {
	color: var(--wp--custom--color--ink-soft, var(--wp--custom--color--ink));
}

/* ── Calls to action ───────────────────────────────────────────────────── */
.engine-hero-split__ctas {
	gap: var(--wp--custom--space--inline, clamp(0.75rem, 1.5vw, 1.25rem));
	margin-block-start: var(--wp--custom--space--stack, clamp(1rem, 2.5vw, 2rem));
}

.engine-hero-split__ctas .wp-block-button__link {
	border-radius: var(--wp--custom--radius--pill);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: var(--wp--custom--transition--base, 250ms ease);
	transition-property: transform, opacity, color, border-color;
}

.engine-hero-split__ctas .wp-block-button__link:hover {
	transform: translateY(-0.08em);
}

.engine-hero-split .wp-block-button.engine-hero-split__cta--ghost > .wp-block-button__link {
	background: transparent none;
	color: currentColor;
	border: var(--wp--custom--border--hairline, 1px) solid currentColor;
	padding-block: var(--wp--custom--space--button-y, 0.9em);
	padding-inline: var(--wp--custom--space--button-x, 2em);
}

.engine-hero-split .wp-block-button.engine-hero-split__cta--ghost > .wp-block-button__link:hover {
	opacity: 0.82;
}

.engine-hero-split a:focus-visible,
.engine-hero-split .wp-block-button__link:focus-visible {
	outline: var(--wp--custom--border--rule, 2px) solid currentColor;
	outline-offset: 0.25em;
}

/* ── Trailing column ───────────────────────────────────────────────────── */
.engine-hero-split__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.engine-hero-split__image img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--lg);
}

/* media_frame: card — the photograph in a white card with a pinned badge and
   a caption; card-tilted turns it a few degrees, like a print left on a table.
   `rotate` is its own property, so the scroll motion's translate composes. */
.engine-hero-split__card {
	position: relative;
	display: grid;
	gap: 0.25em;
	inline-size: min(100%, 30rem);
	margin-inline: auto;
	overflow: clip;
	border-radius: var(--wp--custom--radius--xl, var(--wp--custom--radius--lg));
	background: var(--wp--custom--color--surface-alt);
	color: var(--wp--custom--color--ink);
	box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--wp--custom--color--ink) 14%, transparent);
	padding-block-end: var(--wp--custom--space--stack);
}
.engine-hero-split__card > * { margin: 0; }
.engine-hero-split__card.is-frame-card-tilted { rotate: 2.5deg; }
.engine-hero-split__card .engine-hero-split__image { margin: 0 0 var(--wp--custom--space--inline); }
.engine-hero-split__card .engine-hero-split__image img {
	display: block;
	border-radius: 0;
	aspect-ratio: 6 / 5;
	object-fit: cover;
}
.engine-hero-split__card-badge {
	position: absolute;
	z-index: 1;
	inset-block-start: var(--wp--custom--space--stack);
	inset-inline-end: var(--wp--custom--space--stack);
	padding: 0.45em 1em;
	border-radius: var(--wp--custom--radius--pill);
	background: color-mix(in srgb, var(--wp--custom--color--positive, var(--wp--custom--color--accent)) 78%, var(--wp--custom--color--surface-alt));
	color: var(--wp--custom--color--ink-inverse);
	letter-spacing: 0;
	text-transform: none;
}
.engine-hero-split__card-caption,
.engine-hero-split__card-meta { padding-inline: var(--wp--custom--space--stack); }
.engine-hero-split__card-caption { font-weight: 700; }
.engine-hero-split__card-meta { color: var(--wp--custom--color--ink-soft, currentColor); }

/*
 * Sized by HEIGHT, not width. The spiral's viewBox is tall and narrow (200x620),
 * so constraining the width let it grow to ~843px tall and it, not the copy,
 * dictated the hero's height — roughly 1.5x the design. The reference visual is
 * 540px tall, so cap the block size and let the width follow.
 */
.engine-hero-split__motif {
	display: block;
	block-size: clamp(16rem, 27vw, 33.75rem);
	inline-size: auto;
	max-inline-size: 100%;
	margin-inline: auto;
}

.engine-hero-split__dot {
	opacity: var(--engine-dot-opacity, 1);
}

.engine-hero-split__dot--accent { fill: var(--wp--custom--color--accent-soft); }
.engine-hero-split__dot--soft   { fill: var(--wp--custom--color--surface-card); }

.engine-hero-split--canvas .engine-hero-split__dot--accent { fill: var(--wp--custom--color--accent); }
.engine-hero-split--canvas .engine-hero-split__dot--soft   { fill: var(--wp--custom--color--brand-deep); }

/*
 * The one media query in the pattern: the motif is purely decorative and the
 * reference design drops it once the split collapses to a single column. There
 * is no length-based way to express "hide" with clamp().
 */
@media (max-width: 47.99em) {
	.engine-hero-split__media:has(.engine-hero-split__motif) {
		display: none;
	}
}

/* ── Wave bottom edge ──────────────────────────────────────────────────── */
.engine-hero-split__wave {
	position: absolute;
	/* The section is constrained, so a plain inset-inline:0 stops at the content
	   measure. The divider must reach both viewport edges like the design. */
	inset-inline: 50%;
	translate: -50% 0;
	inline-size: 100vw;
	max-inline-size: 100vw;
	bottom: calc(var(--wp--custom--border--hairline, 1px) * -1);
	z-index: 1;
	display: block;
	width: 100%;
	height: var(--engine-hero-split-wave-height);
	pointer-events: none;
}

.engine-hero-split__wave path {
	fill: var(--engine-hero-split-wave-fill);
}

/* ── Motion ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
	.engine-hero-split__dot {
		animation: engine-hero-split-shimmer 7s ease-in-out infinite;
		animation-delay: calc(var(--engine-dot-index, 0) * -0.3s);
	}
}

@keyframes engine-hero-split-shimmer {
	0%, 100% { opacity: var(--engine-dot-opacity, 1); }
	50%      { opacity: calc(var(--engine-dot-opacity, 1) * 0.45); }
}

@media (prefers-reduced-motion: reduce) {
	.engine-hero-split *,
	.engine-hero-split *::before,
	.engine-hero-split *::after {
		animation: none !important;
		transition: none !important;
	}

	.engine-hero-split__ctas .wp-block-button__link:hover {
		transform: none;
	}
}

/* ── media_motion: a card that floats, and leans toward the pointer (the
   script sets the lean as a transform; float is a translate loop, the tilt
   at rest a rotate: the three compose). ── */
@media (prefers-reduced-motion: no-preference) {
	.engine-hero-split__card.is-motion-float { animation: engine-float 6s ease-in-out infinite; }
	.engine-hero-split__card.is-motion-tilt { transition: transform 320ms ease; will-change: transform; }
}

/* ── glow_motion: drift — two blurred blobs of the accent tones behind the
   copy, wandering slowly. Painted above the wash, below the content. ── */
.engine-hero-split.is-glow-drift::before,
.engine-hero-split.is-glow-drift::after {
	content: "";
	position: absolute;
	z-index: 0;
	inline-size: 55vmax;
	aspect-ratio: 1;
	border-radius: 50%;
	filter: blur(4.5rem);
	opacity: 0.6;
	pointer-events: none;
}
.engine-hero-split.is-glow-drift::before {
	inset-block-start: -28%;
	inset-inline-start: -18%;
	background: radial-gradient(circle, color-mix(in srgb, var(--wp--custom--color--accent) 45%, transparent), transparent 68%);
}
.engine-hero-split.is-glow-drift::after {
	inset-block-end: -34%;
	inset-inline-end: -12%;
	background: radial-gradient(circle, color-mix(in srgb, var(--wp--custom--color--accent-soft) 55%, transparent), transparent 68%);
}
@media (prefers-reduced-motion: no-preference) {
	.engine-hero-split.is-glow-drift::before { animation: engine-hero-split-blob-a 22s ease-in-out infinite alternate; }
	.engine-hero-split.is-glow-drift::after  { animation: engine-hero-split-blob-b 27s ease-in-out infinite alternate; }
}
@keyframes engine-hero-split-blob-a {
	from { translate: 0 0; }
	to   { translate: 14vw 10vh; }
}
@keyframes engine-hero-split-blob-b {
	from { translate: 0 0; }
	to   { translate: -12vw -8vh; }
}

/* ── hours-panel ── */
.engine-hours-panel {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.engine-hours-panel__header > * {
	margin-block: 0;
	max-inline-size: var(--wp--custom--measure--heading, 42rem);
}

.engine-hours-panel__header > * + * {
	margin-block-start: var(--wp--custom--space--inline);
}

.engine-hours-panel__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.engine-hours-panel__eyebrow::before {
	content: "";
	inline-size: 1.8em;
	block-size: var(--wp--custom--border--hairline);
	background: currentColor;
}

.engine-hours-panel__heading {
	line-height: var(--wp--custom--line--tight);
	text-wrap: balance;
}

.engine-hours-panel__intro {
	line-height: var(--wp--custom--line--body);
	opacity: 0.82;
	max-inline-size: var(--wp--custom--measure--prose, 64ch);
}

.engine-hours-panel__layout {
	display: grid;
	align-items: start;
	gap: clamp(1rem, 2.2vw, 2rem);
	margin-block-start: var(--wp--custom--space--block);
	grid-template-columns: 1fr;
}
/* The layout is a core group with flow layout, so core hands its second child
   a block-gap top margin; in a two-column grid that pushed the access card a
   gap below the hours card. Both classes on the selector outrank core's rule. */
.engine-hours-panel__layout > .engine-hours-panel__hours,
.engine-hours-panel__layout > .engine-hours-panel__access {
	margin-block: 0;
}

@media (min-width: 68rem) {
	.engine-hours-panel__layout {
		grid-template-columns: 1.2fr 0.8fr;
	}
}

.engine-hours-panel__hours,
.engine-hours-panel__access {
	padding: clamp(1rem, 2vw, 1.6rem);
	border: var(--wp--custom--border--hairline) solid color-mix(in oklab, currentColor 22%, transparent);
	border-radius: var(--wp--custom--radius--lg);
	background: color-mix(in oklab, currentColor 5%, transparent);
	backdrop-filter: blur(0.4rem);
}

.engine-hours-panel.is-variant-canvas .engine-hours-panel__hours,
.engine-hours-panel.is-variant-canvas .engine-hours-panel__access,
.engine-hours-panel.is-variant-surface-alt .engine-hours-panel__hours,
.engine-hours-panel.is-variant-surface-alt .engine-hours-panel__access {
	background: color-mix(in oklab, var(--wp--custom--color--surface-alt) 65%, transparent);
}

.engine-hours-panel__table {
	inline-size: 100%;
	border-collapse: collapse;
}

.engine-hours-panel__row th,
.engine-hours-panel__row td {
	padding: 0.5rem 0;
	vertical-align: top;
	border-bottom: var(--wp--custom--border--hairline) solid color-mix(in oklab, currentColor 20%, transparent);
}

.engine-hours-panel__row:last-child th,
.engine-hours-panel__row:last-child td {
	border-bottom: 0;
}

/* Day names take the design's small-caps voice — the display face at the
   eyebrow rung — so they match the labels on the access card and the course
   titles of a menu-list beside them, rather than bolding the body serif. */
.engine-hours-panel__row .engine-hours-panel__day {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--eyebrow-sm, var(--wp--preset--font-size--body-sm));
	font-weight: var(--wp--custom--font--weight--display, 600);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	/* th centres by default; the day is a row key and reads from the left.
	   The selector carries the row class so this padding outranks the
	   `padding: 0.5rem 0` reset above — at (0,1,0) it lost, and the longest
	   day name butted against its times on narrow screens. */
	text-align: start;
	padding-inline-end: 1.25rem;
	white-space: nowrap;
}

.engine-hours-panel__service {
	font-family: var(--wp--preset--font-family--mono, var(--wp--preset--font-family--body));
	font-size: var(--wp--preset--font-size--mono-md, var(--wp--preset--font-size--body-sm));
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.engine-hours-panel__note {
	opacity: 0.7;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
}

.engine-hours-panel__row.is-closed .engine-hours-panel__service {
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.76;
}

.engine-hours-panel__access {
	display: grid;
	gap: var(--wp--custom--space--inline);
}

.engine-hours-panel__block {
	display: grid;
	gap: 0.36rem;
}

.engine-hours-panel__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono, var(--wp--preset--font-family--body));
	font-size: var(--wp--preset--font-size--mono-md, var(--wp--preset--font-size--eyebrow));
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--custom--color--accent-soft);
}

.engine-hours-panel.is-variant-canvas .engine-hours-panel__label,
.engine-hours-panel.is-variant-surface-alt .engine-hours-panel__label {
	color: var(--wp--custom--color--accent);
}

.engine-hours-panel__text,
.engine-hours-panel__list {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line--body);
}

.engine-hours-panel__list {
	padding-inline-start: 1.1em;
	display: grid;
	gap: 0.25rem;
}

.engine-hours-panel__links {
	display: grid;
	gap: 0.2rem;
}

.engine-hours-panel__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: var(--wp--custom--border--hairline);
}

.engine-hours-panel__text a:hover,
.engine-hours-panel__text a:focus-visible {
	color: var(--wp--custom--color--accent-soft);
}

.engine-hours-panel.is-variant-canvas .engine-hours-panel__text a:hover,
.engine-hours-panel.is-variant-canvas .engine-hours-panel__text a:focus-visible,
.engine-hours-panel.is-variant-surface-alt .engine-hours-panel__text a:hover,
.engine-hours-panel.is-variant-surface-alt .engine-hours-panel__text a:focus-visible {
	color: var(--wp--custom--color--accent);
}

.engine-hours-panel__footnotes {
	margin-block: var(--wp--custom--space--block) 0;
	padding-inline-start: 1.2em;
	opacity: 0.78;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line--body);
}

.engine-hours-panel__footnotes li + li {
	margin-block-start: 0.28rem;
}

html[data-scroll-motion] .engine-hours-panel__hours,
html[data-scroll-motion] .engine-hours-panel__access {
	--engine-scroll-rise: 14%;
}

/* ── lead-funnel ── */
/*
 * Pattern-scoped presentation for engine/lead-funnel.
 *
 * Every colour resolves to a semantic ROLE custom property. The form is a
 * card on the design's card surface with a hairline frame; the fields sit on
 * the canvas inside it, so the card, the fields and the page are three steps
 * of the same family of surfaces. An earlier version mixed the section
 * surface with surface-dark to make the card — on a light palette with a
 * near-black dark surface that produces a muddy grey, which is why this file
 * never mixes a light role with a dark one.
 */
.engine-lead-funnel {
	--engine-lead-surface: var(--wp--custom--color--surface-alt);
	--engine-lead-ink: var(--wp--custom--color--ink);
	--engine-lead-soft: var(--wp--custom--color--ink-soft, var(--wp--custom--color--ink));
	--engine-lead-eyebrow: var(--wp--custom--color--accent);
	--engine-lead-accent: var(--wp--custom--color--accent);
	--engine-lead-card: var(--wp--custom--color--surface-card);
	--engine-lead-field: var(--wp--custom--color--canvas);
	--engine-lead-rule: color-mix(in srgb, var(--engine-lead-ink) 22%, transparent);
	--engine-lead-rule-strong: color-mix(in srgb, var(--engine-lead-ink) 55%, transparent);
	background: var(--engine-lead-surface);
	color: var(--engine-lead-ink);
}
.engine-lead-funnel.is-variant-canvas {
	--engine-lead-surface: var(--wp--custom--color--canvas);
	/* On the canvas the fields drop to the alternate surface so they still
	   read as fields inside a card. */
	--engine-lead-field: var(--wp--custom--color--surface-alt);
}
.engine-lead-funnel.is-variant-surface-dark,
.engine-lead-funnel.is-variant-panel {
	--engine-lead-ink: var(--wp--custom--color--ink-inverse);
	--engine-lead-soft: color-mix(in srgb, var(--wp--custom--color--ink-inverse) 74%, transparent);
	--engine-lead-eyebrow: var(--wp--custom--color--accent-soft);
	--engine-lead-accent: var(--wp--custom--color--accent-soft);
	--engine-lead-card: color-mix(in srgb, var(--wp--custom--color--ink-inverse) 6%, transparent);
	--engine-lead-field: color-mix(in srgb, var(--wp--custom--color--ink-inverse) 8%, transparent);
}
.engine-lead-funnel.is-variant-surface-dark {
	--engine-lead-surface: var(--wp--custom--color--surface-dark);
}
.engine-lead-funnel.is-variant-panel {
	--engine-lead-surface: var(--wp--preset--gradient--panel);
}

.engine-lead-funnel__shell {
	display: grid;
	gap: var(--wp--custom--space--block);
	align-items: start;
}
@media (min-width: 60em) {
	.engine-lead-funnel.is-layout-split .engine-lead-funnel__shell {
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	}
}

.engine-lead-funnel__copy {
	display: grid;
	gap: var(--wp--custom--space--inline);
}
.engine-lead-funnel__copy > * {
	margin: 0;
	max-inline-size: var(--wp--custom--measure--heading, 40rem);
}
.engine-lead-funnel__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
	color: var(--engine-lead-eyebrow);
}
.engine-lead-funnel__eyebrow::before {
	content: "";
	inline-size: 1.6em;
	block-size: var(--wp--custom--border--hairline);
	background: currentColor;
}
.engine-lead-funnel__heading {
	line-height: var(--wp--custom--line--tight);
	text-wrap: balance;
}
.engine-lead-funnel__intro {
	max-inline-size: var(--wp--custom--measure--prose);
	line-height: var(--wp--custom--line--body);
	color: var(--engine-lead-soft);
}

.engine-lead-funnel__form {
	display: grid;
	gap: var(--wp--custom--space--stack);
	padding: clamp(1.25rem, 2.5vw, 2.5rem);
	border: var(--wp--custom--border--hairline) solid var(--engine-lead-rule);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--engine-lead-card);
	color: inherit;
}
.engine-lead-funnel__trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Progress: ruled steps, not chips. Each step hangs an index and a label off
 * a rule; the current step's rule is drawn heavier in the accent, the others
 * stay soft. It reads as a printed table of contents and carries no fill, so
 * it never fights the palette the way a tinted pill did.
 */
.engine-lead-funnel__progress {
	display: grid;
	/* One column per step, sharing the row. A 9rem minimum wrapped a
	   third step onto a second line inside a phone-width card. */
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: var(--wp--custom--space--inline);
	margin: 0;
	padding: 0;
	list-style: none;
}
.engine-lead-funnel__progress-item {
	display: grid;
	gap: 0.3em;
	padding-block-start: 0.8em;
	border-block-start: var(--wp--custom--border--rule) solid var(--engine-lead-rule);
	color: var(--engine-lead-soft);
	transition: border-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}
.engine-lead-funnel__progress-item[aria-current="step"] {
	border-block-start-color: var(--engine-lead-accent);
	color: var(--engine-lead-ink);
}
/* Index, label, title, description, field labels and buttons all carry the
   design's own rung classes (has-…-font-size), so the family, weight, case
   and tracking come from tokens.css and nothing typographic is decided here. */
.engine-lead-funnel__progress-index {
	color: var(--engine-lead-accent);
}
.engine-lead-funnel__progress-label {
	line-height: var(--wp--custom--line--body);
	overflow-wrap: break-word;
}

.engine-lead-funnel__step {
	margin: 0;
	padding: 0;
	border: 0;
	display: grid;
	gap: var(--wp--custom--space--inline);
}
/* display: grid above outranks the user agent's [hidden] { display: none },
   so without this every step rendered at once and the funnel was a long
   single form with a progress indicator that meant nothing. */
.engine-lead-funnel__step[hidden] {
	display: none;
}
/* The step title takes the display face as the design sets it — upright,
   whatever the rung's own style; an italic here is a signature, not a
   default. */
.engine-lead-funnel__step-title {
	line-height: var(--wp--custom--line--tight);
	padding: 0;
	margin-block-end: 0.15em;
}
.engine-lead-funnel__step-count {
	margin: 0;
	color: var(--engine-lead-accent);
}
.engine-lead-funnel__step-description {
	margin: 0;
	color: var(--engine-lead-soft);
	line-height: var(--wp--custom--line--body);
}

.engine-lead-funnel__fields {
	display: grid;
	gap: var(--wp--custom--space--inline);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.engine-lead-funnel__field {
	display: grid;
	gap: 0.45em;
}
.engine-lead-funnel__field.is-span-full {
	grid-column: 1 / -1;
}
.engine-lead-funnel__field label,
.engine-lead-funnel__field-label {
	margin: 0;
	color: var(--engine-lead-soft);
}
.engine-lead-funnel__field input:not([type="radio"]):not([type="checkbox"]),
.engine-lead-funnel__field select,
.engine-lead-funnel__field textarea {
	appearance: none;
	/* Text inputs are content-box by default, so 100% plus padding overran
	   the card by the padding and their right edge sat on the card's border,
	   while the select (border-box by default) stopped short of it. */
	box-sizing: border-box;
	inline-size: 100%;
	border: var(--wp--custom--border--hairline) solid var(--engine-lead-rule);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--engine-lead-field);
	color: inherit;
	padding: 0.8em 0.95em;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-md);
	line-height: var(--wp--custom--line--body);
	transition: border-color var(--wp--custom--transition--base);
}
.engine-lead-funnel__field input::placeholder,
.engine-lead-funnel__field textarea::placeholder {
	color: var(--engine-lead-soft);
	opacity: 0.8;
}
/* A native select loses its arrow to appearance:none; draw one from the
   current ink so it reads as a control on every surface. */
.engine-lead-funnel__field select {
	padding-inline-end: 2.6em;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.3em) 50%, calc(100% - 0.95em) 50%;
	background-size: 0.35em 0.35em;
	background-repeat: no-repeat;
}
.engine-lead-funnel__field textarea {
	min-block-size: 6.5em;
	resize: vertical;
}
.engine-lead-funnel__field input:not([type="radio"]):not([type="checkbox"]):hover,
.engine-lead-funnel__field select:hover,
.engine-lead-funnel__field textarea:hover {
	border-color: var(--engine-lead-rule-strong);
}
.engine-lead-funnel__field input:not([type="radio"]):not([type="checkbox"]):focus-visible,
.engine-lead-funnel__field select:focus-visible,
.engine-lead-funnel__field textarea:focus-visible {
	outline: var(--wp--custom--border--rule) solid var(--engine-lead-accent);
	outline-offset: 0.12em;
	border-color: transparent;
}

/* Radio cards: the control stays a real radio so the group is keyboard
   operable, and the whole label is the tap target. */
.engine-lead-funnel__choices {
	display: grid;
	gap: var(--wp--custom--space--inline);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.engine-lead-funnel__choice {
	display: flex;
	align-items: center;
	gap: 0.7em;
	min-block-size: 2.75rem;
	margin: 0;
	padding: var(--wp--custom--space--button-y) var(--wp--custom--space--button-x);
	border: var(--wp--custom--border--hairline) solid var(--engine-lead-rule);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--engine-lead-field);
	color: inherit;
	cursor: pointer;
	line-height: var(--wp--custom--line--body);
	transition: border-color var(--wp--custom--transition--base), background-color var(--wp--custom--transition--base);
}
.engine-lead-funnel__choice input {
	flex: 0 0 auto;
	inline-size: 1.15em;
	block-size: 1.15em;
	margin: 0;
	accent-color: var(--engine-lead-accent);
}
.engine-lead-funnel__choice:hover {
	border-color: var(--engine-lead-rule-strong);
}
.engine-lead-funnel__choice:has(:checked) {
	border-color: var(--engine-lead-accent);
	background: color-mix(in srgb, var(--engine-lead-accent) 14%, var(--engine-lead-field));
}
.engine-lead-funnel__choice:focus-within {
	outline: var(--wp--custom--border--rule) solid var(--engine-lead-accent);
	outline-offset: 0.12em;
}

.engine-lead-funnel__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--custom--space--inline);
	padding-block-start: var(--wp--custom--space--inline);
}
.engine-lead-funnel__button {
	appearance: none;
	border: var(--wp--custom--border--hairline) solid var(--engine-lead-rule-strong);
	border-radius: var(--wp--custom--radius--pill);
	padding: var(--wp--custom--space--button-y) var(--wp--custom--space--button-x);
	cursor: pointer;
	transition: transform var(--wp--custom--transition--base), opacity var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base);
}
.engine-lead-funnel__button.is-back {
	background: transparent;
	color: inherit;
}
.engine-lead-funnel__button.is-back:hover {
	border-color: var(--engine-lead-ink);
}
.engine-lead-funnel__button.is-next,
.engine-lead-funnel__button.is-submit {
	background: var(--wp--preset--gradient--button);
	color: var(--wp--custom--color--ink-on-accent, var(--wp--custom--color--ink));
	border-color: transparent;
}
.engine-lead-funnel__button[hidden] {
	display: none;
}
.engine-lead-funnel__button:hover {
	transform: translateY(-0.08em);
}
.engine-lead-funnel__button:disabled {
	opacity: 0.56;
	cursor: not-allowed;
	transform: none;
}

.engine-lead-funnel__status {
	margin: 0;
	min-block-size: 1.3em;
	line-height: var(--wp--custom--line--body);
}
.engine-lead-funnel__status[data-state="success"] {
	color: var(--engine-lead-accent);
}
.engine-lead-funnel__status[data-state="error"] {
	color: var(--engine-lead-accent);
}
.engine-lead-funnel__reassurance {
	margin: 0;
	color: var(--engine-lead-soft);
	line-height: var(--wp--custom--line--body);
}

@media (prefers-reduced-motion: reduce) {
	.engine-lead-funnel__button {
		transition: none;
	}
	.engine-lead-funnel__button:hover {
		transform: none;
	}
}

/* ── legal-content ── */
.engine-legal {
	--engine-legal--measure: var(--wp--custom--measure--prose);
	--engine-legal--toc-w: var(--wp--custom--grid--card-min);
	--engine-legal--rhythm: var(--wp--custom--space--block);
	--engine-legal--tracking: 0.16em;
	--engine-legal--ink: var(--wp--custom--color--ink);
	--engine-legal--rule: color-mix(in srgb, var(--wp--custom--color--brand-deep) 16%, transparent);
}

.engine-legal__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--engine-legal--rhythm) var(--wp--custom--space--gutter);
	margin-inline: auto;
}

.engine-legal.is-simple .engine-legal__inner {
	max-width: var(--engine-legal--measure);
}

.engine-legal.is-with-toc .engine-legal__inner {
	max-width: calc(var(--engine-legal--measure) + var(--engine-legal--toc-w) + var(--wp--custom--space--gutter));
}

.engine-legal__header {
	flex: 1 1 100%;
}

.engine-legal__toc {
	flex: 1 1 var(--engine-legal--toc-w);
	align-self: start;
	position: sticky;
	top: var(--wp--custom--space--stack);
	margin: 0;
	padding: var(--wp--custom--space--block);
	background-color: var(--wp--custom--color--surface-alt);
	border-radius: var(--wp--custom--radius--lg);
}

.engine-legal.is-simple .engine-legal__toc {
	display: none;
}

.engine-legal__toc-title {
	margin: 0 0 var(--wp--custom--space--stack);
	color: var(--wp--custom--color--brand-deep);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: var(--engine-legal--tracking);
	text-transform: uppercase;
}

.engine-legal__toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.7em;
}

.engine-legal__toc-link {
	color: var(--wp--custom--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-md);
	line-height: var(--wp--custom--line--body);
	text-decoration: none;
	transition: color var(--wp--custom--transition--base);
}

.engine-legal__toc-link:hover,
.engine-legal__toc-link:focus-visible {
	color: var(--wp--custom--color--accent);
	text-decoration: underline;
}

.engine-legal__toc-link:focus-visible {
	outline: var(--wp--custom--border--rule) solid var(--wp--custom--color--accent);
	outline-offset: 0.3rem;
	border-radius: var(--wp--custom--radius--xs);
}

.engine-legal__doc {
	flex: 999 1 0;
	min-width: min(100%, var(--engine-legal--measure));
	max-width: var(--engine-legal--measure);
	color: var(--engine-legal--ink);
}

.engine-legal__clause + .engine-legal__clause {
	margin-top: var(--engine-legal--rhythm);
	padding-top: var(--engine-legal--rhythm);
	border-top: var(--wp--custom--border--rule) solid var(--engine-legal--rule);
}

.engine-legal__clause :where(h2) {
	scroll-margin-top: var(--wp--custom--space--block);
}

.engine-legal__doc p {
	color: var(--engine-legal--ink);
	max-width: var(--engine-legal--measure);
	line-height: var(--wp--custom--line--body);
}

@media (prefers-reduced-motion: reduce) {
	.engine-legal__toc-link {
		transition: none;
	}
}

/* ── listing-cards ── */
.engine-listing-cards {
	--engine-listing-cards-cols: 4;
	--engine-listing-cards-gap: clamp(1rem, 2vw, 1.75rem);
	--engine-listing-cards-eyebrow: var(--wp--custom--color--accent);
	--engine-listing-cards-shadow: 0 0.6rem 1.6rem color-mix(in srgb, var(--wp--custom--color--ink) 7%, transparent);
	position: relative;
	isolation: isolate;
	overflow: clip; /* clip, not hidden: hidden makes a scroll container, which would break scroll-driven view() timelines inside */
}

/* Header, flush left by default, centred over the grid on request. */
.engine-listing-cards__header > * { max-inline-size: var(--wp--custom--measure--heading, 40rem); }
.engine-listing-cards__header > * { margin-block: 0; }
.engine-listing-cards__header > * + * { margin-block-start: var(--wp--custom--space--inline); }
.engine-listing-cards.is-align-center .engine-listing-cards__header { text-align: center; }
.engine-listing-cards.is-align-center .engine-listing-cards__header > * { margin-inline: auto; }
.engine-listing-cards.is-align-center .engine-listing-cards__eyebrow { justify-content: center; }

.engine-listing-cards__eyebrow { display: flex; align-items: center; gap: 0.8em; color: var(--engine-listing-cards-eyebrow); }
.engine-listing-cards__eyebrow.has-rule::before {
	content: "";
	flex: none;
	inline-size: 1.6em;
	block-size: var(--wp--custom--border--hairline);
	background: currentColor;
}
.engine-listing-cards__heading { text-wrap: balance; line-height: var(--wp--custom--line--tight); }
.engine-listing-cards__intro { max-inline-size: var(--wp--custom--measure--prose, 62ch); color: var(--wp--custom--color--ink-soft, currentColor); line-height: var(--wp--custom--line--body); }

/* Room between the intro and the cards: the pattern states its own gap, the
   generated theme does not enable block-gap support. */
.engine-listing-cards > .engine-listing-cards__grid { margin-block-start: var(--wp--custom--space--block); }
.engine-listing-cards > .engine-listing-cards__actions { margin-block-start: var(--wp--custom--space--block); }

.engine-listing-cards__grid {
	display: grid;
	gap: var(--engine-listing-cards-gap);
	grid-template-columns: repeat(auto-fit, minmax(max(min(var(--wp--custom--grid--tile-min), 100%), (100% - (var(--engine-listing-cards-cols) - 1) * var(--engine-listing-cards-gap)) / var(--engine-listing-cards-cols)), 1fr));
}
.engine-listing-cards__grid > * { margin-block: 0; }
.engine-listing-cards__grid.is-cols-2 { --engine-listing-cards-cols: 2; }
.engine-listing-cards__grid.is-cols-3 { --engine-listing-cards-cols: 3; }
.engine-listing-cards__grid.is-cols-4 { --engine-listing-cards-cols: 4; }

/* The card: photograph on top, copy below, the whole thing one rounded tile. */
.engine-listing-cards__card {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	block-size: 100%;
	padding: 0; /* core gives any group with a background a padding; the photo bleeds to the edges */
	overflow: clip;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--engine-listing-cards-shadow);
	transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base);
}
.engine-listing-cards__card > * { margin: 0; }
.engine-listing-cards__card:hover,
.engine-listing-cards__card:focus-within { transform: translateY(-0.25rem); }

.engine-listing-cards__media {
	margin: 0;
	overflow: clip; /* the frame: a photograph that scales and slides for the scroll motion stays inside it */
}
.engine-listing-cards__media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 6 / 7;
	object-fit: cover;
}

.engine-listing-cards__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) max-content;
	grid-template-areas:
		"title title"
		"meta status"
		"text text";
	align-items: center;
	column-gap: var(--wp--custom--space--inline);
	row-gap: 0.45em;
	padding: var(--wp--custom--space--stack) var(--wp--custom--space--inline) var(--wp--custom--space--inline);
}
.engine-listing-cards__body > * { margin: 0; }
.engine-listing-cards__title { grid-area: title; font-weight: 700; line-height: var(--wp--custom--line--tight); }
.engine-listing-cards__title a { color: inherit; text-decoration: none; }
/* The title link covers the whole card, photograph included: the card is the
   nearest positioned ancestor, so nothing inside may be positioned. */
.engine-listing-cards__title a::after { content: ""; position: absolute; inset: 0; }
.engine-listing-cards__media a { display: block; }
.engine-listing-cards__meta { grid-area: meta; color: var(--wp--custom--color--ink-soft, currentColor); }
.engine-listing-cards__text { grid-area: text; margin-block-start: 0.35em; color: var(--wp--custom--color--ink-soft, currentColor); line-height: var(--wp--custom--line--body); }

/* The status chip: a tone role at low strength behind the same role as ink. */
.engine-listing-cards__status {
	--engine-listing-cards-tone: var(--wp--custom--color--ink-soft, currentColor);
	grid-area: status;
	justify-self: end;
	align-self: start;
	padding: 0.3em 0.85em;
	border-radius: var(--wp--custom--radius--pill);
	background: color-mix(in srgb, var(--engine-listing-cards-tone) 14%, var(--wp--custom--color--surface-alt));
	color: var(--engine-listing-cards-tone);
	white-space: nowrap;
}
.engine-listing-cards__status.is-tone-positive { --engine-listing-cards-tone: var(--wp--custom--color--positive, var(--wp--custom--color--accent)); }
.engine-listing-cards__status.is-tone-warning { --engine-listing-cards-tone: var(--wp--custom--color--warning, var(--wp--custom--color--accent)); }

/* The button under the grid. */
.engine-listing-cards__actions { display: flex; justify-content: center; }
.engine-listing-cards__cta .wp-block-button__link {
	padding: var(--wp--custom--space--button-y) var(--wp--custom--space--button-x);
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 700;
	text-decoration: none;
	transition: transform var(--wp--custom--transition--base), background-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}
.engine-listing-cards__cta:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--custom--color--accent);
	color: var(--wp--custom--color--ink-on-accent, var(--wp--custom--color--ink-inverse));
}
.engine-listing-cards__cta.is-style-outline .wp-block-button__link {
	border: calc(var(--wp--custom--border--hairline) * 1.5) solid var(--wp--custom--color--accent);
	background: transparent;
	color: var(--wp--custom--color--accent);
}
.engine-listing-cards__cta .wp-block-button__link:hover { transform: translateY(-0.08em); }
.engine-listing-cards__cta.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--custom--color--accent);
	color: var(--wp--custom--color--ink-on-accent, var(--wp--custom--color--ink-inverse));
}

@media (prefers-reduced-motion: reduce) {
	.engine-listing-cards__card, .engine-listing-cards__cta .wp-block-button__link { transition: none; }
	.engine-listing-cards__card:hover, .engine-listing-cards__card:focus-within { transform: none; }
}

/* ── Scroll motion: the cards arrive with a slight lean each way, like cards
   dealt on a table, and the photographs slide slowly inside their frames. ── */
html[data-scroll-motion] .engine-listing-cards__card:nth-child(odd) { --engine-scroll-rotate: 2.5deg; }
html[data-scroll-motion] .engine-listing-cards__card:nth-child(even) { --engine-scroll-rotate: -2.5deg; }
html[data-scroll-motion] .engine-listing-cards__media img { --engine-scroll-y: -8%; scale: 1.18; }

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		html[data-scroll-motion] .engine-listing-cards__media img {
			animation: engine-scroll-drift linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}

/* ── marquee-strip ── */
.engine-marquee {
	--engine-marquee-surface: var(--wp--custom--color--surface-alt);
	--engine-marquee-ink: var(--wp--custom--color--ink);
	--engine-marquee-rule: var(--wp--custom--color--accent);
	--engine-marquee-gap: var(--wp--custom--space--block);
	--engine-marquee-duration: 42s;
	position: relative;
	display: block;
	inline-size: 100%;
	padding-block: var(--wp--custom--space--stack);
	background: var(--engine-marquee-surface);
	overflow: hidden;
}

.engine-marquee--canvas {
	--engine-marquee-surface: var(--wp--custom--color--canvas);
}

.engine-marquee--panel {
	--engine-marquee-surface: var(--wp--preset--gradient--panel);
	--engine-marquee-ink: var(--wp--custom--color--ink-inverse);
	--engine-marquee-rule: var(--wp--custom--color--accent-soft);
}

.engine-marquee--speed-slow { --engine-marquee-duration: 68s; }
.engine-marquee--speed-fast { --engine-marquee-duration: 24s; }

/* --- Track ------------------------------------------------------ */

.engine-marquee__viewport {
	display: flex;
	align-items: center;
	gap: var(--engine-marquee-gap);
	overflow: hidden;
}

/*
 * Each track sizes to its own content (max-content), so translating it
 * by -100% moves it exactly one track width; the extra --gap accounts
 * for the flex gap between the two tracks. Both animate identically, so
 * track two arrives precisely where track one started — no seam.
 */
.engine-marquee__track {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--engine-marquee-gap);
	inline-size: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: engine-marquee-scroll var(--engine-marquee-duration) linear infinite;
	will-change: transform;
}

@keyframes engine-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-100% - var(--engine-marquee-gap))); }
}

.engine-marquee--right .engine-marquee__track { animation-direction: reverse; }

/* Pause for pointer users; the switch below covers everyone else. */
.engine-marquee:hover .engine-marquee__track,
.engine-marquee__switch:checked ~ .engine-marquee__viewport .engine-marquee__track {
	animation-play-state: paused;
}

/* Readable list: present for assistive tech, hidden from sighted users
   while the decorative tracks are in motion. */
.engine-marquee__static {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	list-style: none;
}

/* --- Phrases ---------------------------------------------------- */

.engine-marquee__item {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--engine-marquee-gap);
	color: var(--engine-marquee-ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-sm);
	font-style: italic;
	font-weight: 500;
	line-height: var(--wp--custom--line--heading);
	white-space: nowrap;
}

/* Drawn before every phrase so the loop seam is spaced like the rest. */
.engine-marquee__item::before {
	content: "";
	flex: 0 0 auto;
	inline-size: var(--wp--custom--border--hairline);
	block-size: 1em;
	background: var(--engine-marquee-rule);
}

.engine-marquee--sep-dot .engine-marquee__item::before {
	inline-size: 0.32em;
	block-size: 0.32em;
	border-radius: var(--wp--custom--radius--pill);
}

.engine-marquee--sep-none .engine-marquee__item::before { display: none; }

/* --- Pause switch (WCAG 2.2.2) ---------------------------------- */

.engine-marquee__switch {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.engine-marquee__control {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: var(--wp--custom--space--inline);
	z-index: 1;
	transform: translateY(-50%);
	padding: var(--wp--custom--space--button-y) var(--wp--custom--space--button-x);
	border: var(--wp--custom--border--hairline) solid var(--engine-marquee-rule);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--engine-marquee-surface);
	color: var(--engine-marquee-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: var(--wp--custom--line--body);
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--wp--custom--transition--fast);
}

/* Revealed on hover, on focus, and while paused — never in the resting state. */
.engine-marquee:hover .engine-marquee__control,
.engine-marquee__switch:focus-visible ~ .engine-marquee__control,
.engine-marquee__switch:checked ~ .engine-marquee__control {
	opacity: 1;
	pointer-events: auto;
}

.engine-marquee__switch:focus-visible ~ .engine-marquee__control {
	outline: var(--wp--custom--border--rule) solid var(--engine-marquee-ink);
	outline-offset: var(--wp--custom--border--rule);
}

.engine-marquee__control .engine-marquee__resume { display: none; }
.engine-marquee__switch:checked ~ .engine-marquee__control .engine-marquee__pause { display: none; }
.engine-marquee__switch:checked ~ .engine-marquee__control .engine-marquee__resume { display: inline; }

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

/*
 * No travel at all: the decorative tracks and the pause switch are
 * dropped, and the readable list is un-hidden as a static, centred,
 * wrapping row — every phrase reachable, no scroll container, no motion.
 */
@media (prefers-reduced-motion: reduce) {
	.engine-marquee:not(.engine-marquee--motion-always) .engine-marquee__viewport,
	.engine-marquee:not(.engine-marquee--motion-always) .engine-marquee__switch,
	.engine-marquee:not(.engine-marquee--motion-always) .engine-marquee__control {
		display: none;
	}

	.engine-marquee:not(.engine-marquee--motion-always) .engine-marquee__static {
		position: static;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--engine-marquee-gap);
		inline-size: auto;
		block-size: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}
}

/* ── menu-list ── */
.engine-menu-list {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.engine-menu-list__header > * {
	margin-block: 0;
	max-inline-size: var(--wp--custom--measure--heading, 44rem);
}

.engine-menu-list__header > * + * {
	margin-block-start: var(--wp--custom--space--inline);
}

.engine-menu-list__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.engine-menu-list__eyebrow::before {
	content: "";
	inline-size: 1.8em;
	block-size: var(--wp--custom--border--hairline);
	background: currentColor;
}

.engine-menu-list__heading {
	text-wrap: balance;
	line-height: var(--wp--custom--line--tight);
}

.engine-menu-list__intro {
	line-height: var(--wp--custom--line--body);
	max-inline-size: var(--wp--custom--measure--prose, 62ch);
	opacity: 0.82;
}

.engine-menu-list__grid {
	display: grid;
	gap: clamp(1.2rem, 2vw, 2rem);
	grid-template-columns: 1fr;
	margin-block-start: var(--wp--custom--space--block);
}

@media (min-width: 62rem) {
	.engine-menu-list__grid.is-cols-2 {
		grid-template-columns: 1fr 1fr;
	}
}

.engine-menu-list__menu {
	display: grid;
	align-content: start;
	gap: var(--wp--custom--space--inline);
	padding: clamp(1rem, 2vw, 1.75rem);
	border: var(--wp--custom--border--hairline) solid color-mix(in oklab, currentColor 25%, transparent);
	border-radius: var(--wp--custom--radius--lg);
	background: color-mix(in oklab, currentColor 4%, transparent);
	backdrop-filter: blur(0.4rem);
}

.engine-menu-list.is-variant-canvas .engine-menu-list__menu,
.engine-menu-list.is-variant-surface-alt .engine-menu-list__menu {
	background: color-mix(in oklab, var(--wp--custom--color--surface-alt) 65%, transparent);
}

.engine-menu-list__menu-title {
	margin: 0;
	line-height: var(--wp--custom--line--tight);
}

.engine-menu-list__menu-note {
	margin: 0;
	opacity: 0.7;
	line-height: var(--wp--custom--line--body);
}

.engine-menu-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--wp--custom--space--stack);
}

.engine-menu-list__item {
	margin: 0;
	padding-block-end: var(--wp--custom--space--stack);
	border-block-end: var(--wp--custom--border--hairline) solid color-mix(in oklab, currentColor 20%, transparent);
}

.engine-menu-list__item:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.engine-menu-list__line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.8rem;
}

.engine-menu-list__copy {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.45rem;
	min-inline-size: 0;
}

.engine-menu-list__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-xs);
	line-height: var(--wp--custom--line--tight);
}

.engine-menu-list__price {
	font-family: var(--wp--preset--font-family--mono, var(--wp--preset--font-family--body));
	font-size: var(--wp--preset--font-size--mono-md, var(--wp--preset--font-size--body-sm));
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.engine-menu-list__body {
	margin: 0.4rem 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line--body);
	opacity: 0.86;
}

.engine-menu-list__tags {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.engine-menu-list__tag {
	font-family: var(--wp--preset--font-family--mono, var(--wp--preset--font-family--body));
	font-size: var(--wp--preset--font-size--mono-md, var(--wp--preset--font-size--eyebrow));
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.86;
}

.engine-menu-list.is-tags-pill .engine-menu-list__tag {
	padding: 0.2em 0.6em;
	border-radius: var(--wp--custom--radius--pill);
	background: color-mix(in oklab, var(--wp--custom--color--accent) 18%, transparent);
	color: var(--wp--custom--color--accent-soft);
}

.engine-menu-list.is-tags-text .engine-menu-list__tag::before {
	content: "#";
	opacity: 0.6;
	margin-inline-end: 0.18em;
}

/* plain: the word alone, a step softer than the price, with no prefix. */
.engine-menu-list.is-tags-plain .engine-menu-list__tag {
	font-size: var(--wp--preset--font-size--mono-sm, var(--wp--preset--font-size--eyebrow-sm));
	letter-spacing: 0.12em;
	opacity: 0.7;
}

.engine-menu-list.is-variant-canvas .engine-menu-list__tag,
.engine-menu-list.is-variant-surface-alt .engine-menu-list__tag {
	color: var(--wp--custom--color--accent);
}

.engine-menu-list.is-variant-canvas.is-tags-pill .engine-menu-list__tag,
.engine-menu-list.is-variant-surface-alt.is-tags-pill .engine-menu-list__tag {
	color: var(--wp--custom--color--ink);
	background: color-mix(in oklab, var(--wp--custom--color--accent) 20%, transparent);
}

/* Optional motion, gated by site-level scroll setting. */
html[data-scroll-motion] .engine-menu-list__menu {
	--engine-scroll-rise: 16%;
}

/* ── newsletter-cta ── */
.engine-newsletter__body {
	max-width: var(--wp--custom--measure--prose);
	margin-inline: auto;
}

.engine-newsletter__form {
	display: flex;
	align-items: baseline;
	gap: var(--wp--custom--space--inline);
	width: 100%;
	max-width: var(--wp--custom--measure--narrow);
	margin-inline: auto;
	padding-block-end: var(--wp--custom--space--inline);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--custom--color--ink-inverse);
	border-block-end-color: color-mix(in srgb, var(--wp--custom--color--ink-inverse) 45%, transparent);
	transition: border-color var(--wp--custom--transition--base);
}

.engine-newsletter__form:focus-within {
	border-block-end-color: var(--wp--custom--color--accent-soft);
}


.engine-newsletter__trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

.engine-newsletter__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

.engine-newsletter__input {
	flex: 1 1 auto;
	min-width: 0;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	color: var(--wp--custom--color--ink-inverse);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-md);
	line-height: var(--wp--custom--line--body);
}

.engine-newsletter__input::placeholder {
	color: var(--wp--custom--color--ink-inverse);
	opacity: 0.75;
}

/* Keep the browser's autofill chrome from reintroducing a box. */
.engine-newsletter__input:-webkit-autofill,
.engine-newsletter__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--wp--custom--color--ink-inverse);
	-webkit-box-shadow: inset 0 0 0 100vmax var(--wp--custom--color--brand-deep);
	caret-color: var(--wp--custom--color--ink-inverse);
}

.engine-newsletter__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	cursor: pointer;
	white-space: nowrap;
	color: var(--wp--custom--color--accent-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.engine-newsletter__arrow {
	display: inline-block;
	transition: transform var(--wp--custom--transition--base);
}

.engine-newsletter__submit:hover .engine-newsletter__arrow,
.engine-newsletter__submit:focus-visible .engine-newsletter__arrow {
	transform: translateX(0.25em);
}

.engine-newsletter__form :focus-visible {
	outline: var(--wp--custom--border--rule) solid var(--wp--custom--color--accent-soft);
	outline-offset: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
	.engine-newsletter__form,
	.engine-newsletter__arrow {
		transition: none;
	}

	.engine-newsletter__submit:hover .engine-newsletter__arrow,
	.engine-newsletter__submit:focus-visible .engine-newsletter__arrow {
		transform: none;
	}
}

.engine-newsletter__submit:disabled {
	opacity: 0.58;
	cursor: not-allowed;
}

.engine-newsletter__status {
	margin: var(--wp--custom--space--inline) auto 0;
	max-width: var(--wp--custom--measure--narrow);
	min-block-size: 1.3em;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line--body);
	color: var(--wp--custom--color--ink-inverse);
}
.engine-newsletter__status[data-state="success"] {
	color: var(--wp--custom--color--accent-soft);
}
.engine-newsletter__status[data-state="error"] {
	color: var(--wp--custom--color--ink-inverse);
	opacity: 0.82;
}

/* ── product-detail ── */
/* engine/product-detail — scoped to .engine-product-detail.
   Every visual value resolves to a theme.json custom property; the only literals
   are ratios, geometry and clip rects, which carry no brand. */
.engine-product-detail {
	--epd-surface: var(--wp--custom--color--canvas);
	--epd-ink: var(--wp--custom--color--ink);
	--epd-inverse: var(--wp--custom--color--ink-inverse);
	--epd-accent: var(--wp--custom--color--accent);
	--epd-price: var(--wp--custom--color--brand-deep);
	--epd-placeholder: var(--wp--preset--gradient--card);
	--epd-cart: var(--wp--preset--gradient--button);
	--epd-cart-ink: var(--wp--custom--color--ink);
	--epd-muted: color-mix(in srgb, currentColor 62%, transparent);
	--epd-line: color-mix(in srgb, currentColor 22%, transparent);
	--epd-swatch-fallback: color-mix(in srgb, currentColor 16%, transparent);
	--epd-media-radius: max(var(--wp--custom--radius--lg), 44%);
	--epd-ratio: 4 / 5;

	background: var(--epd-surface);
	color: var(--epd-ink);
}

.engine-product-detail.is-variant-surface-alt {
	--epd-surface: var(--wp--custom--color--surface-alt);
	--epd-placeholder: var(--wp--preset--gradient--card);
}

.engine-product-detail.is-variant-panel {
	--epd-surface: var(--wp--preset--gradient--panel);
	--epd-ink: var(--wp--custom--color--ink-inverse);
	--epd-inverse: var(--wp--custom--color--ink);
	--epd-accent: var(--wp--custom--color--accent-soft);
	--epd-price: var(--wp--custom--color--accent-soft);
	--epd-placeholder: var(--wp--preset--gradient--hero-glow);
	--epd-cart-ink: var(--wp--custom--color--ink);
}

.engine-product-detail.is-shape-rounded { --epd-media-radius: var(--wp--custom--radius--lg); }
.engine-product-detail.is-shape-square  { --epd-media-radius: 0; }

.engine-product-detail.is-ratio-square    { --epd-ratio: 1; }
.engine-product-detail.is-ratio-landscape { --epd-ratio: 6 / 5; }

/* --- two-column split, no media query ---------------------------------- */
.engine-product-detail__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	gap: var(--wp--custom--space--gutter);
	align-items: start;
}

/* --- gallery ----------------------------------------------------------- */
.engine-product-detail__gallery {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--inline);
	margin: 0;
}

.engine-product-detail__viewer {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: var(--epd-ratio);
	background: var(--epd-placeholder);
	border-start-start-radius: var(--epd-media-radius);
	border-start-end-radius: var(--epd-media-radius);
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.engine-product-detail__viewer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.engine-product-detail__viewer-ring {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 42%;
	height: 46%;
	color: var(--epd-ink);
	opacity: 0.5;
}

.engine-product-detail__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.5rem), 1fr));
	gap: var(--wp--custom--space--inline);
	margin: 0;
	padding: 0;
	list-style: none;
}

.engine-product-detail__thumb {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	aspect-ratio: 1;
	border: var(--wp--custom--border--hairline) solid var(--epd-line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--epd-placeholder);
	cursor: pointer;
	transition: border-color var(--wp--custom--transition--base);
}

.engine-product-detail__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.engine-product-detail__thumb[aria-pressed="true"] {
	border-color: var(--epd-ink);
}

.engine-product-detail__thumb:hover,
.engine-product-detail__thumb:focus-visible {
	border-color: var(--epd-accent);
}

.engine-product-detail__thumb--static { cursor: default; }

/* --- details column ---------------------------------------------------- */
.engine-product-detail__details {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--stack);
	margin: 0;
}

.engine-product-detail__crumbs {
	margin: 0;
	color: var(--epd-muted);
}

.engine-product-detail__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.engine-product-detail__crumbs li {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.engine-product-detail__crumbs li + li::before {
	content: "/";
	color: var(--epd-line);
}

.engine-product-detail__crumbs a { color: inherit; text-decoration: none; }
.engine-product-detail__crumbs a:hover,
.engine-product-detail__crumbs a:focus-visible { text-decoration: underline; }
.engine-product-detail__crumbs [aria-current="page"] { color: var(--epd-ink); }

.engine-product-detail__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin: 0;
	color: var(--epd-accent);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.engine-product-detail__marker { flex: none; line-height: 1; }

.engine-product-detail__title {
	margin: 0;
	font-style: italic;
	font-weight: 500;
	text-wrap: balance;
	color: var(--epd-ink);
}

.engine-product-detail__price {
	margin: 0;
	font-weight: 500;
	color: var(--epd-price);
}

.engine-product-detail__desc {
	margin: 0;
	max-width: var(--wp--custom--measure--prose);
	color: var(--epd-muted);
}

/* --- selectable option groups ------------------------------------------ */
.engine-product-detail__group {
	margin: 0;
	padding: 0;
	border: 0;
}

.engine-product-detail__legend {
	margin: 0 0 var(--wp--custom--space--inline);
	padding: 0;
	color: var(--epd-muted);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.engine-product-detail__options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--space--inline);
}

/* The radio itself stays in the accessibility tree and remains focusable,
   but is visually replaced by its styled label. */
.engine-product-detail__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.engine-product-detail__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
	transition:
		background-color var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base);
}

/* colour swatch */
.engine-product-detail__group--swatch .engine-product-detail__option {
	width: 2.25rem;
	height: 2.25rem;
	border: var(--wp--custom--border--hairline) solid var(--epd-line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--epd-swatch, var(--epd-swatch-fallback));
	color: transparent;
}

.engine-product-detail__radio:checked + .engine-product-detail__option {
	box-shadow:
		0 0 0 var(--wp--custom--border--rule) var(--epd-surface),
		0 0 0 calc(var(--wp--custom--border--rule) * 2.5) var(--epd-accent);
}

/* size / text chip */
.engine-product-detail__group--size .engine-product-detail__option,
.engine-product-detail__group--text .engine-product-detail__option {
	min-width: 3rem;
	min-height: 3rem;
	padding-inline: 1em;
	border: var(--wp--custom--border--hairline) solid var(--epd-line);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--epd-ink);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.engine-product-detail__group--size .engine-product-detail__radio:checked + .engine-product-detail__option,
.engine-product-detail__group--text .engine-product-detail__radio:checked + .engine-product-detail__option {
	border-color: var(--epd-ink);
	background: var(--epd-ink);
	color: var(--epd-inverse);
	box-shadow: none;
}

.engine-product-detail__option:hover {
	border-color: var(--epd-ink);
}

.engine-product-detail__radio:focus-visible + .engine-product-detail__option {
	outline: var(--wp--custom--border--rule) solid var(--epd-accent);
	outline-offset: calc(var(--wp--custom--border--rule) * 1.5);
}

/* --- purchase row ------------------------------------------------------- */
.engine-product-detail__purchase {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--space--inline);
	align-items: stretch;
	margin-block-start: var(--wp--custom--space--inline);
}

.engine-product-detail__qty {
	display: inline-flex;
	align-items: center;
	border: var(--wp--custom--border--hairline) solid var(--epd-line);
	border-radius: var(--wp--custom--radius--pill);
	overflow: hidden;
}

.engine-product-detail__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 3rem;
	border: 0;
	background: transparent;
	color: var(--epd-ink);
	cursor: pointer;
	line-height: 1;
	transition: background-color var(--wp--custom--transition--base);
}

.engine-product-detail__qty-btn:hover {
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.engine-product-detail__qty-input {
	width: 2.5rem;
	height: 3rem;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: center;
	-moz-appearance: textfield;
}

.engine-product-detail__qty-input::-webkit-outer-spin-button,
.engine-product-detail__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.engine-product-detail__cart {
	flex: 1 1 16rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding-inline: var(--wp--custom--space--button-x);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--epd-cart);
	color: var(--epd-cart-ink);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	cursor: pointer;
	transition: transform var(--wp--custom--transition--base), opacity var(--wp--custom--transition--base);
}

.engine-product-detail__cart:hover { transform: translateY(-0.08em); }
.engine-product-detail__cart:active { transform: none; }

.engine-product-detail :focus-visible {
	outline: var(--wp--custom--border--rule) solid var(--epd-accent);
	outline-offset: calc(var(--wp--custom--border--rule) * 1.5);
}

/* --- accordions -------------------------------------------------------- */
.engine-product-detail__accordions {
	margin-block-start: var(--wp--custom--space--inline);
	border-block-start: var(--wp--custom--border--hairline) solid var(--epd-line);
}

.engine-product-detail__accordion {
	border-block-end: var(--wp--custom--border--hairline) solid var(--epd-line);
}

.engine-product-detail__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--custom--space--inline);
	padding-block: var(--wp--custom--space--stack);
	cursor: pointer;
	list-style: none;
	color: var(--epd-ink);
}

.engine-product-detail__summary::-webkit-details-marker { display: none; }

.engine-product-detail__summary::after {
	content: "+";
	flex: none;
	color: var(--epd-muted);
	transition: transform var(--wp--custom--transition--base);
}

.engine-product-detail__accordion[open] .engine-product-detail__summary::after {
	content: "−";
}

.engine-product-detail__panel {
	margin: 0;
	padding-block-end: var(--wp--custom--space--stack);
	max-width: var(--wp--custom--measure--prose);
	color: var(--epd-muted);
}

/* --- WooCommerce block overrides (single-product template context) ----- */
.engine-product-detail .wc-block-components-product-price,
.engine-product-detail .woocommerce-Price-amount { color: var(--epd-price); }

.engine-product-detail .single_add_to_cart_button,
.engine-product-detail .wp-block-add-to-cart-form button[type="submit"] {
	border-radius: var(--wp--custom--radius--pill);
	background: var(--epd-cart);
	color: var(--epd-cart-ink);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/*
 * WooCommerce's add-to-cart form ships a bare number input, spinner arrows and
 * all. Left alone it puts raw browser chrome beside a designed pill on the one
 * page whose job is to sell the garment — and the cart, two clicks away, draws
 * its own quantity control properly. Same pill, same hairline, same numerals.
 */
.engine-product-detail .quantity {
	display: inline-flex;
	align-items: center;
	border: var(--wp--custom--border--hairline) solid var(--epd-line);
	border-radius: var(--wp--custom--radius--pill);
	padding-inline: var(--wp--custom--space--sm);
	padding-block: 0.35rem;
}

.engine-product-detail .quantity input[type="number"] {
	inline-size: 3.5ch;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-md);
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.engine-product-detail .quantity input[type="number"]::-webkit-outer-spin-button,
.engine-product-detail .quantity input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.engine-product-detail .quantity input[type="number"]:focus-visible {
	outline: var(--wp--custom--border--rule) solid var(--epd-accent);
	outline-offset: 0.35rem;
}

/* --- motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.engine-product-detail *,
	.engine-product-detail *::before,
	.engine-product-detail *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.engine-product-detail__cart:hover { transform: none; }
}

/* ── product-grid ── */
/* engine/product-grid — scoped to .engine-product-grid.
   Every visual value resolves to a theme.json custom property; the only
   literals here are ratios and geometry, which carry no brand. */
.engine-product-grid {
	--epg-surface: var(--wp--custom--color--canvas);
	--epg-ink: var(--wp--custom--color--ink);
	--epg-inverse: var(--wp--custom--color--ink-inverse);
	--epg-accent: var(--wp--custom--color--accent);
	--epg-placeholder: var(--wp--preset--gradient--card);
	--epg-muted: color-mix(in srgb, currentColor 60%, transparent);
	--epg-line: color-mix(in srgb, currentColor 26%, transparent);
	--epg-gap: var(--wp--custom--space--gutter);
	--epg-columns: 4;
	--epg-ratio: 4 / 5;
	--epg-media-radius: max(var(--wp--custom--radius--lg), 28%);

	background: var(--epg-surface);
	color: var(--epg-ink);
}

.engine-product-grid.is-variant-surface-alt {
	--epg-surface: var(--wp--custom--color--surface-alt);
	--epg-placeholder: var(--wp--preset--gradient--card);
}

.engine-product-grid.is-variant-panel {
	--epg-surface: var(--wp--preset--gradient--panel);
	--epg-ink: var(--wp--custom--color--ink-inverse);
	--epg-inverse: var(--wp--custom--color--ink);
	--epg-accent: var(--wp--custom--color--accent-soft);
	--epg-placeholder: var(--wp--preset--gradient--hero-glow);
}

.engine-product-grid.is-shape-rounded { --epg-media-radius: var(--wp--custom--radius--lg); }
.engine-product-grid.is-shape-square  { --epg-media-radius: 0; }

.engine-product-grid.is-ratio-square    { --epg-ratio: 1; }
.engine-product-grid.is-ratio-landscape { --epg-ratio: 6 / 5; }
.engine-product-grid.is-ratio-auto      { --epg-ratio: auto; }

/* --- section header ---------------------------------------------------- */

.engine-product-grid__head {
	gap: var(--wp--custom--space--stack) var(--epg-gap);
	margin-block-end: var(--wp--custom--space--block);
}

.engine-product-grid__intro { flex: 1 1 20ch; }

.engine-product-grid__eyebrow {
	margin: 0;
	color: var(--epg-accent);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.engine-product-grid__marker { margin-inline-end: 0.7em; }

.engine-product-grid__title { margin: 0; }

.engine-product-grid.is-heading-italic .engine-product-grid__title { font-style: italic; }
.engine-product-grid.is-heading-normal .engine-product-grid__title { font-style: normal; }

.engine-product-grid__note {
	flex: 0 1 var(--wp--custom--measure--narrow);
	max-width: var(--wp--custom--measure--narrow);
	margin: 0;
	color: var(--epg-muted);
}

/* --- the grid ---------------------------------------------------------- */

/*
 * WordPress gives every block after the first a `margin-block-start` of
 * --wp--style--block-gap. Inside a CSS grid that margin does not create
 * spacing (the grid `gap` already does) — it just pushes items 2..n down,
 * so the first card sat 24px above its row. Neutralise it here.
 */
.engine-product-grid__items > * {
	margin-block: 0;
}

.engine-product-grid__items {
	display: grid;
	gap: var(--epg-gap);
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			min(
				100%,
				max(
					var(--wp--custom--grid--card-min),
					(100% - (var(--epg-columns) - 1) * var(--epg-gap)) / var(--epg-columns)
				)
			),
			1fr
		)
	);
	margin: 0;
	padding: 0;
	list-style: none;
}

.engine-product-grid__items.is-cols-2 { --epg-columns: 2; }
.engine-product-grid__items.is-cols-3 { --epg-columns: 3; }
.engine-product-grid__items.is-cols-4 { --epg-columns: 4; }
.engine-product-grid__items.is-cols-5 { --epg-columns: 5; }

/* core/post-template renders the grid as a <ul>. */
.engine-product-grid__items > li { margin: 0; }

/* --- card -------------------------------------------------------------- */

.engine-product-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--inline);
	height: 100%;
	text-align: center;
}

/* Rounded on the top corners only — the signature "arch" product card. */
.engine-product-card__media {
	overflow: hidden;
	margin: 0;
	border-start-start-radius: var(--epg-media-radius);
	border-start-end-radius: var(--epg-media-radius);
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.engine-product-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--transition--slow);
}

.engine-product-card__media--empty {
	aspect-ratio: var(--epg-ratio);
	background: var(--epg-placeholder);
}

.engine-product-card:hover .engine-product-card__media img,
.engine-product-card:focus-within .engine-product-card__media img {
	transform: scale(1.03);
}

.engine-product-card__name {
	margin: 0;
	font-style: normal;
}

.engine-product-card__name a { color: inherit; text-decoration: none; }
.engine-product-card__name a:hover,
.engine-product-card__name a:focus-visible { text-decoration: underline; }

.engine-product-card__meta {
	gap: 0.25em 0.9em;
	margin: 0;
}

.engine-product-card__material {
	margin: 0;
	color: var(--epg-muted);
}

/*
 * Queried cards fill this slot with post-terms, so the material line arrives
 * as category links. A manual card's material is quiet grey text, and the two
 * sit side by side on the same site, so the links have to read the same way:
 * the card's title is already the link to the product, and a second underlined
 * one competes with it.
 */
.engine-product-card__material a {
	color: inherit;
	text-decoration: none;
}

.engine-product-card__material a:hover,
.engine-product-card__material a:focus-visible {
	color: var(--epg-ink);
	text-decoration: underline;
}

.engine-product-card__price {
	margin: 0;
	font-weight: 500;
}

/* --- full-width pill outline call to action ---------------------------- */

.engine-product-card__cta {
	margin-block-start: auto;
	width: 100%;
}

.engine-product-card__cta .wp-block-button,
.engine-product-card__cta .wc-block-components-product-button { width: 100%; }

/* Three class selectors on purpose: core's .wp-block-button.is-style-outline
   > .wp-block-button__link hardcodes a 2px border, and the hairline token
   has to win. */
.engine-product-grid .engine-product-card__cta .wp-block-button__link,
.engine-product-grid .engine-product-card__cta .wp-element-button,
.engine-product-grid .engine-product-card__cta .wc-block-components-product-button__button {
	display: block;
	width: 100%;
	border: var(--wp--custom--border--hairline) solid var(--epg-line);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	background-color: transparent;
	color: var(--epg-ink);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	cursor: pointer;
	transition:
		background-color var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

.engine-product-grid .engine-product-card__cta .wp-block-button__link:hover,
.engine-product-grid .engine-product-card__cta .wp-block-button__link:focus-visible,
.engine-product-grid .engine-product-card__cta .wp-element-button:hover,
.engine-product-grid .engine-product-card__cta .wp-element-button:focus-visible,
.engine-product-grid .engine-product-card__cta .wc-block-components-product-button__button:hover,
.engine-product-grid .engine-product-card__cta .wc-block-components-product-button__button:focus-visible {
	border-color: var(--epg-ink);
	background-color: var(--epg-ink);
	color: var(--epg-inverse);
}

.engine-product-grid :focus-visible {
	outline: var(--wp--custom--border--rule) solid var(--epg-accent);
	outline-offset: var(--wp--custom--border--rule);
}

.engine-product-grid__empty {
	margin: 0;
	color: var(--epg-muted);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.engine-product-grid *,
	.engine-product-grid *::before,
	.engine-product-grid *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.engine-product-card:hover .engine-product-card__media img,
	.engine-product-card:focus-within .engine-product-card__media img {
		transform: none;
	}
}

/* ── section-rule ── */
/*
 * Pattern-scoped presentation for engine/section-rule.
 *
 * A ruled opener instead of the stacked eyebrow-plus-oversized-heading every
 * other section pattern draws. See the note at the top of section-rule.php for
 * why the library needs a second section rhythm.
 *
 * Every colour resolves to a semantic ROLE custom property; the local
 * --engine-rule-* properties exist only so `variant` can repoint the set from
 * a single class.
 */
.engine-section-rule {
	--engine-rule-ink: var(--wp--custom--color--ink);
	--engine-rule-soft: var(--wp--custom--color--ink-soft, var(--wp--custom--color--ink));
	--engine-rule-accent: var(--wp--custom--color--accent);
	--engine-rule-line: color-mix(in srgb, var(--engine-rule-ink) 58%, transparent);
	/* The index column is wide enough for a two-digit mark plus its gutter and
	   is shared by the bar and the lede, so both hang off the same edge. */
	--engine-rule-index: clamp(2.75rem, 5vw, 4.5rem);

	padding-block-start: var(--wp--custom--space--section);
}

.engine-section-rule.is-spacing-tight {
	padding-block-start: var(--wp--custom--space--block);
}

.engine-section-rule.is-spacing-flush {
	padding-block-start: 0;
}

/*
 * The opener and the section it introduces are one band. Core puts the root
 * block gap between every pair of top-level sections; when both paint the same
 * surface that gap shows as a strip of canvas cutting the band in two. The
 * pattern removes it on both of its edges — the section before it ends where
 * the opener begins, and the section after it begins where the opener ends.
 * :root :where() gives core's rule a single pseudo-class of weight, so two
 * classes outrank it.
 */
.wp-block-group.engine-section-rule,
.engine-section-rule + .wp-block-group {
	margin-block-start: 0;
}

.engine-section-rule.is-variant-surface-dark,
.engine-section-rule.is-variant-panel {
	--engine-rule-ink: var(--wp--custom--color--ink-inverse);
	--engine-rule-soft: color-mix(in srgb, var(--wp--custom--color--ink-inverse) 74%, transparent);
	--engine-rule-accent: var(--wp--custom--color--accent-soft);
}

/* ── the bar: index, title and note sitting ON the rule ───────────────────── */

.engine-section-rule__bar {
	display: grid;
	grid-template-columns: var(--engine-rule-index) minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: var(--wp--custom--space--stack);
	padding-block: var(--wp--custom--space--stack);
	border-block-start: var(--wp--custom--border--hairline) solid var(--engine-rule-line);
}

/* Without a number the title takes the left edge and the column collapses. */
.engine-section-rule:not(.has-number) .engine-section-rule__bar {
	grid-template-columns: minmax(0, 1fr) auto;
}

.engine-section-rule.is-rule-none .engine-section-rule__bar {
	border-block-start-color: transparent;
}

.engine-section-rule.is-rule-both .engine-section-rule__bar {
	border-block-end: var(--wp--custom--border--hairline) solid color-mix(in srgb, var(--engine-rule-ink) 22%, transparent);
}

.engine-section-rule__bar > * {
	margin-block: 0;
}

.engine-section-rule__number {
	margin: 0;
	color: var(--engine-rule-accent);
}

.engine-section-rule__title {
	margin: 0;
	line-height: var(--wp--custom--line--tight);
}

.engine-section-rule__note {
	margin: 0;
	color: var(--engine-rule-soft);
	text-align: end;
	white-space: nowrap;
}

/* ── the lede: hung in the title's column, not centred on the measure ─────── */

.engine-section-rule__body {
	display: grid;
	grid-template-columns: var(--engine-rule-index) minmax(0, 1fr);
	column-gap: var(--wp--custom--space--stack);
}

.engine-section-rule:not(.has-number) .engine-section-rule__body {
	grid-template-columns: minmax(0, 1fr);
}

.engine-section-rule__lede {
	grid-column: -2;
	margin: 0;
	max-inline-size: var(--wp--custom--measure--prose);
	color: var(--engine-rule-soft);
	line-height: var(--wp--custom--line--body);
}

/*
 * The only breakpoint in this pattern. A three-cell bar cannot stay on one
 * line once the note and the title compete for the same few characters, so
 * below the tablet frame the note drops under the title and the index keeps
 * its column.
 */
@media (max-width: 47.99em) {
	.engine-section-rule__bar {
		grid-template-columns: var(--engine-rule-index) minmax(0, 1fr);
		row-gap: 0.4em;
	}

	.engine-section-rule:not(.has-number) .engine-section-rule__bar {
		grid-template-columns: minmax(0, 1fr);
	}

	.engine-section-rule__note {
		grid-column: -2;
		text-align: start;
		white-space: normal;
	}
}

/* ── showcase-cards ── */
.engine-showcase {
	--engine-showcase-cols: 4;
	--engine-showcase-gap: clamp(0.75rem, 1.25vw, 1.125rem);
	--engine-showcase-eyebrow: var(--wp--custom--color--accent);
	--engine-showcase-scrim: color-mix(in srgb, var(--wp--custom--color--brand-deep) 78%, transparent);
	position: relative;
	isolation: isolate;
	overflow: clip; /* clip, not hidden: hidden makes a scroll container, which would break scroll-driven view() timelines inside */
}
.engine-showcase.is-variant-surface-dark { --engine-showcase-eyebrow: var(--wp--custom--color--accent-soft); }

/* The head keeps the grid's left edge (it stays a full wide block); its lines
   are capped at the heading measure so the title wraps as the design draws it. */
.engine-showcase__header > * { max-inline-size: var(--wp--custom--measure--heading, 40rem); }
.engine-showcase__header > * { margin-block: 0; }
.engine-showcase__header > * + * { margin-block-start: var(--wp--custom--space--inline); }

.engine-showcase__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.8em;
	color: var(--engine-showcase-eyebrow);
}
.engine-showcase__eyebrow.has-rule::before {
	content: "";
	flex: none;
	inline-size: 1.6em;
	block-size: var(--wp--custom--border--hairline);
	background: currentColor;
}
.engine-showcase__heading { text-wrap: balance; line-height: var(--wp--custom--line--tight); }
.engine-showcase__intro {
	color: var(--wp--custom--color--ink-soft, currentColor);
	line-height: var(--wp--custom--line--body);
}
.engine-showcase.is-variant-surface-dark .engine-showcase__intro { color: currentColor; opacity: 0.8; }

.engine-showcase__grid {
	display: grid;
	gap: var(--engine-showcase-gap);
	grid-template-columns: repeat(auto-fit, minmax(max(min(var(--wp--custom--grid--tile-min), 100%), (100% - (var(--engine-showcase-cols) - 1) * var(--engine-showcase-gap)) / var(--engine-showcase-cols)), 1fr));
}
.engine-showcase__grid > * { margin-block: 0; }
.engine-showcase__grid.is-cols-2 { --engine-showcase-cols: 2; }
.engine-showcase__grid.is-cols-3 { --engine-showcase-cols: 3; }
.engine-showcase__grid.is-cols-4 { --engine-showcase-cols: 4; }

.engine-showcase__card {
	position: relative;
	isolation: isolate;
	overflow: clip; /* clip, not hidden: hidden makes a scroll container, which would break scroll-driven view() timelines inside */
	margin: 0;
	aspect-ratio: 3 / 4;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--custom--color--brand-deep);
	color: var(--wp--custom--color--ink-inverse);
}
.engine-showcase__card .engine-showcase__media {
	position: absolute;
	inset: 0;
	margin: 0;
	max-inline-size: none;
}
.engine-showcase__card img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	z-index: 0;
	transition: transform var(--wp--custom--transition--slow, var(--wp--custom--transition--base));
}
.engine-showcase__card:hover img,
.engine-showcase__card:focus-within img { transform: scale(1.04); }
.engine-showcase__card::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 58%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, var(--engine-showcase-scrim), transparent);
}
.engine-showcase__label {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 2;
	display: grid;
	gap: 0.25em;
	padding: clamp(0.75rem, 1.4vw, 1.125rem);
	pointer-events: none;
}
.engine-showcase__label > * { margin: 0; }
.engine-showcase__index { opacity: 0.85; }
.engine-showcase__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-xs, var(--wp--preset--font-size--display-sm));
	font-style: italic;
	font-weight: 400;
	line-height: var(--wp--custom--line--tight);
}
.engine-showcase__body {
	font-size: var(--wp--preset--font-size--body-xs, var(--wp--preset--font-size--body-sm));
	line-height: var(--wp--custom--line--body);
}

/* The whole card is the control: a stretched button or link. */
.engine-showcase__switch,
.engine-showcase__link {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	color: inherit;
	cursor: pointer;
	appearance: none;
	font: inherit;
}
.engine-showcase__switch:focus-visible,
.engine-showcase__link:focus-visible {
	outline: var(--wp--custom--border--rule) solid var(--wp--custom--color--accent-soft);
	outline-offset: calc(var(--wp--custom--border--rule) * -1);
}

/* Badge: visible while this card's palette is the active one (generated CSS sets the flag). */
.engine-showcase__badge {
	position: absolute;
	inset-block-start: clamp(0.75rem, 1.4vw, 1.125rem);
	inset-inline-end: clamp(0.75rem, 1.4vw, 1.125rem);
	z-index: 2;
	inline-size: 1.625rem;
	block-size: 1.625rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--color--accent);
	border: calc(var(--wp--custom--border--hairline) * 1.5) solid var(--wp--custom--color--ink-inverse);
	opacity: var(--engine-palette-active, 0);
	transform: scale(calc(0.6 + 0.4 * var(--engine-palette-active, 0)));
	transition: opacity var(--wp--custom--transition--base), transform var(--wp--custom--transition--base);
	pointer-events: none;
}

.engine-showcase__dots {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: var(--wp--custom--space--gutter);
	inline-size: clamp(8rem, 24vw, 22rem);
	block-size: auto;
	z-index: 0;
	pointer-events: none;
}
.engine-showcase__dots .is-accent { fill: var(--wp--custom--color--accent); }
.engine-showcase__dots .is-soft { fill: var(--wp--custom--color--accent-soft); opacity: 0.6; }

@media (prefers-reduced-motion: reduce) {
	.engine-showcase__card img, .engine-showcase__badge { transition: none; }
	.engine-showcase__card:hover img, .engine-showcase__card:focus-within img { transform: none; }
}

/* ── Scroll motion (opt-in per site): the dots drift against the section as
   it passes through the viewport. ── */
html[data-scroll-motion] .engine-showcase__dots { --engine-scroll-y: 70%; }

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		html[data-scroll-motion] .engine-showcase__dots {
			animation: engine-scroll-drift linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}

/* ── Scroll motion: the photograph slides inside its frame as the card passes,
   slower than the page. Scaled up so the frame stays covered at either end;
   `scale` and `translate` compose with the hover transform. ── */
html[data-scroll-motion] .engine-showcase__card img { --engine-scroll-y: -9%; scale: 1.2; }

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		html[data-scroll-motion] .engine-showcase__card img {
			animation: engine-scroll-drift linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}

/* Room between the intro and the cards. WordPress's per-container layout rule
   zeroes the vertical gap between a section's children (the generated theme
   does not enable block-gap support), so the pattern states its own: the
   block step, the distance the design draws under the intro. */
.engine-showcase > .engine-showcase__grid {
	margin-block-start: var(--wp--custom--space--block);
}

/* ── site-footer ── */
/*
 * Pattern-scoped presentation for engine/site-footer.
 *
 * Every colour, family and type size below resolves to a theme.json preset or
 * custom property — the pattern holds no literal hex, px type size or font
 * stack. Local --engine-footer-* properties exist only so the `variant` prop
 * can repoint a whole palette from a single class.
 */
.engine-site-footer {
	--engine-footer-surface: var(--wp--custom--color--surface-dark);
	--engine-footer-ink: var(--wp--custom--color--ink-inverse);
	--engine-footer-link: var(--wp--custom--color--ink-inverse);
	--engine-footer-heading: var(--wp--custom--color--accent-soft);
	--engine-footer-hover: var(--wp--custom--color--accent-soft);
	--engine-footer-rule: var(--wp--custom--color--brand-deep);

	background-color: var(--engine-footer-surface);
	color: var(--engine-footer-ink);
	inline-size: 100%;
}

.engine-site-footer.is-variant-canvas {
	--engine-footer-surface: var(--wp--custom--color--canvas);
	--engine-footer-ink: var(--wp--custom--color--ink);
	--engine-footer-link: var(--wp--custom--color--ink);
	--engine-footer-heading: var(--wp--custom--color--accent);
	--engine-footer-hover: var(--wp--custom--color--accent);
	--engine-footer-rule: var(--wp--custom--color--surface-card);
}

/* Content is centred to the theme's wide measure with the shared gutter. */
.engine-site-footer__inner {
	max-inline-size: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--custom--space--gutter));
	margin-inline: auto;
	padding-inline: var(--wp--custom--space--gutter);
	padding-block: var(--wp--custom--space--section);
}

/*
 * Brand block and the column set share one row on wide viewports and wrap onto
 * separate rows on narrow ones — flex-wrap, so no breakpoint owns the split.
 */
.engine-site-footer__top {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--space--block);
	justify-content: space-between;
}

.engine-site-footer__top > * {
	margin-block: 0;
}

.engine-site-footer__brand {
	flex: 1 1 16rem;
	max-inline-size: var(--wp--custom--measure--narrow);
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--stack);
}

.engine-site-footer__brand > * {
	margin-block: 0;
}

.engine-site-footer__logo {
	margin: 0;
	line-height: var(--wp--custom--line--tight);
}

.engine-site-footer__logo a {
	color: var(--engine-footer-ink);
}

.engine-site-footer__logo a:hover,
.engine-site-footer__logo a:focus-visible {
	color: var(--engine-footer-hover);
}

.engine-site-footer__logo-img img {
	block-size: auto;
	max-inline-size: 100%;
}

/* Two-tone logotype: the first word italic, the accent word upright and coloured. */
.engine-site-footer__logo.has-accent a {
	font-style: italic;
}

.engine-site-footer__logo-accent {
	font-style: normal;
	color: var(--engine-footer-heading);
}

.engine-site-footer__logo.is-logo-compact {
	font-size: var(--wp--preset--font-size--display-xs, var(--wp--preset--font-size--body-lg));
}

/* A footer with no link columns is one short band: brand, then the bottom bar. */
.engine-site-footer.has-no-columns .engine-site-footer__inner {
	padding-block: var(--wp--custom--space--block);
}

.engine-site-footer.has-no-columns .engine-site-footer__cols,
.engine-site-footer.has-no-columns .engine-site-footer__rule {
	display: none;
}

.engine-site-footer.has-no-columns .engine-site-footer__bottom {
	margin-block-start: var(--wp--custom--space--stack);
}

.engine-site-footer__desc {
	margin: 0;
	opacity: 0.75;
}

/* Max columns as content allows, fewer when the row narrows, no media query. */
.engine-site-footer__cols {
	flex: 2 1 24rem;
	display: grid;
	gap: var(--wp--custom--space--stack);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
}
/* Columns sit on one baseline: the flow layout's block gap would push every
   column but the first down by one step. */
.engine-site-footer__cols > * { margin-block: 0; }

.engine-site-footer__col > * {
	margin-block: 0;
}

.engine-site-footer__col-title {
	margin: 0 0 var(--wp--custom--space--inline);
	color: var(--engine-footer-heading);
}

.engine-site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--inline);
}

.engine-site-footer a {
	text-decoration: none;
	transition: color var(--wp--custom--transition--base);
}

.engine-site-footer__links a {
	color: var(--engine-footer-link);
}

.engine-site-footer__links a:hover,
.engine-site-footer__links a:focus-visible {
	color: var(--engine-footer-hover);
}

/* The hairline rule between the columns and the bottom bar. */
/*
 * The markup carries is-style-wide, which is what actually escapes core's
 * `.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 100px }`
 * — a 0,3,0 selector no single-class rule here can outrank. The width below
 * matches that specificity so the rule still spans the footer if the style
 * class is ever dropped from the markup.
 */
.wp-block-separator.engine-site-footer__rule:not(.is-style-dots) {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.engine-site-footer__rule {
	margin-block: var(--wp--custom--space--block);
	border: 0;
	border-block-start: var(--wp--custom--border--hairline) solid var(--engine-footer-rule);
	opacity: 1;
}

.engine-site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--custom--space--inline);
}

.engine-site-footer__bottom > * {
	margin-block: 0;
}

.engine-site-footer__copy {
	margin: 0;
	opacity: 0.7;
}

.engine-site-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--custom--space--inline);
}

.engine-site-footer__legal a {
	color: var(--engine-footer-ink);
	opacity: 0.7;
}

.engine-site-footer__legal a:hover,
.engine-site-footer__legal a:focus-visible {
	color: var(--engine-footer-hover);
	opacity: 1;
}

/* Decorative middot between legal links — drawn in CSS, inert to assistive tech. */
.engine-site-footer__legal li {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--inline);
}

.engine-site-footer__legal li + li::before {
	content: "\00b7";
	opacity: 0.5;
}

/* Keyboard focus is visible on every link regardless of variant. */
.engine-site-footer a:focus-visible {
	outline: var(--wp--custom--border--rule) solid var(--engine-footer-hover);
	outline-offset: 0.15em;
	border-radius: var(--wp--custom--radius--xs);
}

@media (prefers-reduced-motion: reduce) {
	.engine-site-footer a {
		transition-duration: 1ms;
	}
}

/* A small mark before the text logotype. */
.engine-site-footer__logo-icon {
	display: inline-block;
	inline-size: 2.75rem;
	block-size: auto;
	margin-inline-end: 0.5em;
	vertical-align: middle;
}
.engine-site-footer__logo { font-weight: var(--wp--custom--font--weight--display, 400); }

/* Social links: round buttons in the bottom row, the glyph as their label. */
.engine-site-footer__social {
	display: flex;
	gap: var(--wp--custom--space--inline);
	margin: 0;
	padding: 0;
	list-style: none;
}
.engine-site-footer__social a {
	display: inline-grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: var(--wp--custom--radius--pill);
	background: color-mix(in srgb, currentColor 12%, transparent);
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--base);
}
.engine-site-footer__social a:hover { background: color-mix(in srgb, currentColor 22%, transparent); }

/* ── site-header ── */
/*
 * Pattern-scoped presentation for engine/site-header.
 *
 * Every colour below resolves to a semantic ROLE custom property emitted by the
 * generated theme.json — the pattern itself holds no literal hex, px font size or
 * font stack. Local --engine-header-* properties exist only to let the `variant`
 * prop repoint a whole set of role tokens from a single class.
 */
.engine-site-header {
	--engine-header-surface: var(--wp--custom--color--canvas);
	--engine-header-ink: var(--wp--custom--color--ink);
	--engine-header-rule: var(--wp--custom--color--surface-card);
	--engine-header-hover: var(--wp--custom--color--surface-alt);
	--engine-header-accent: var(--wp--custom--color--accent);

	/* Fluid measurements: no breakpoint owns the header's proportions. */
	--engine-header-height: clamp(3.5rem, 5.5vw, 5.5rem);
	--engine-header-target: clamp(2.25rem, 2.6vw, 2.75rem);
	--engine-header-gap: clamp(1rem, 2.4vw, 2.75rem);

	background-color: var(--engine-header-surface);
	color: var(--engine-header-ink);
	inline-size: 100%;
}

.engine-site-header.is-variant-surface-dark {
	--engine-header-surface: var(--wp--custom--color--surface-dark);
	--engine-header-ink: var(--wp--custom--color--ink-inverse);
	--engine-header-rule: var(--wp--custom--color--brand-deep);
	--engine-header-hover: var(--wp--custom--color--brand-deep);
	--engine-header-accent: var(--wp--custom--color--accent-soft);
}

.engine-site-header.is-sticky {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--wp--custom--layer--sticky);
}

/*
 * 1fr auto 1fr keeps the navigation optically centred on the viewport
 * regardless of how wide the logotype or the icon cluster grow.
 */
.engine-site-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: var(--engine-header-gap);
	min-block-size: var(--engine-header-height);
	/* Logotype and cluster line up with the page's content measure; the
	   gutter is what remains once the measure no longer fits. */
	max-inline-size: calc(var(--wp--style--global--content-size) + 2 * var(--wp--custom--space--gutter));
	margin-inline: auto;
	padding-inline: var(--wp--custom--space--gutter);
	border-block-end: var(--wp--custom--border--hairline) solid transparent;
}

/* Neutralise the flow-layout margins core applies to group children. */
.engine-site-header__bar > * {
	margin-block: 0;
}

.engine-site-header.has-rule .engine-site-header__bar {
	border-block-end-color: var(--engine-header-rule);
}

.engine-site-header__logo {
	grid-column: 1;
	justify-self: start;
	margin: 0;
	line-height: var(--wp--custom--line--tight);
	white-space: nowrap; /* a mark and a wordmark stay on one line */
	padding-inline-end: var(--wp--custom--space--stack); /* air before the navigation when the columns are tight */
}

.engine-site-header__logo a {
	color: inherit;
	text-decoration: none;
	transition: color var(--wp--custom--transition--base);
}
/* A small mark before the text logotype; the weight follows the design's display rung. */
.engine-site-header__logo { font-weight: var(--wp--custom--font--weight--display, 400); }
/* Outranks the image-logotype rule below, which makes any logo img a block. */
.engine-site-header__logo img.engine-site-header__logo-icon {
	display: inline-block;
	inline-size: 2.25rem;
	block-size: auto;
	margin-inline-end: 0.45em;
	vertical-align: middle;
}

.engine-site-header__logo a:hover,
.engine-site-header__logo a:focus-visible {
	color: var(--engine-header-accent);
	text-decoration: none;
}

/* Image logotype scales to the header's optical height. */
.engine-site-header__logo img {
	display: block;
	block-size: var(--engine-header-target);
	inline-size: auto;
	max-inline-size: 100%;
}

/* Two-tone logotype: the first word italic, the accent word upright and coloured. */
.engine-site-header__logo.has-accent a {
	font-style: italic;
}

.engine-site-header__logo-accent {
	font-style: normal;
	color: var(--engine-header-accent);
}

.engine-site-header__logo.is-logo-compact {
	font-size: var(--wp--preset--font-size--display-xs, var(--wp--preset--font-size--body-lg));
}

/* Palette switcher: round photographic swatches; the active one is ringed.
   The generated theme sets --engine-palette-active to 1 on the current key. */
.engine-site-header__palettes {
	display: flex;
	align-items: center;
	gap: clamp(0.35rem, 0.65vw, 0.5625rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.engine-site-header__swatch {
	display: block;
	inline-size: 1.375rem;
	block-size: 1.375rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--engine-header-accent);
	cursor: pointer;
	overflow: hidden;
	outline: var(--wp--custom--border--hairline) solid color-mix(in srgb, var(--engine-header-accent) calc(var(--engine-palette-active, 0) * 100%), transparent);
	outline-offset: calc(var(--wp--custom--border--hairline) * 2);
	transition: transform var(--wp--custom--transition--base), outline-color var(--wp--custom--transition--base);
}

.engine-site-header__swatch img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.engine-site-header__swatch:hover {
	transform: scale(1.12);
}

.engine-site-header__swatch:focus-visible {
	outline: var(--wp--custom--border--rule) solid var(--engine-header-ink);
	outline-offset: calc(var(--wp--custom--border--hairline) * 2);
}

/* Right-hand call to action: a filled pill in the accent. */
.engine-site-header__cta {
	display: inline-flex;
	align-items: center;
	padding: 0.85em 1.6em;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--engine-header-accent);
	color: var(--wp--custom--color--ink-on-accent, var(--wp--custom--color--ink-inverse));
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--wp--custom--transition--base);
}

.engine-site-header__cta:hover {
	transform: translateY(-0.08em);
	text-decoration: none;
}

.engine-site-header__cta:focus-visible {
	outline: var(--wp--custom--border--rule) solid var(--engine-header-ink);
	outline-offset: 0.2em;
}

.engine-site-header__nav {
	grid-column: 2;
	justify-self: center;
	color: inherit;
}

.engine-site-header__nav .wp-block-navigation-item__content {
	color: inherit;
}

/* The drawer inherits the variant rather than a fixed overlay colour. */
.engine-site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--engine-header-surface);
	color: var(--engine-header-ink);
	padding: var(--wp--custom--space--block) var(--wp--custom--space--gutter);
}

.engine-site-header__nav .wp-block-navigation__responsive-container-open,
.engine-site-header__nav .wp-block-navigation__responsive-container-close {
	color: currentColor;
}

.engine-site-header__actions {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: clamp(0.4rem, 1vw, 0.75rem);
}

/* Circular outline actions — the design's signature icon cluster. */
.engine-icon-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--engine-header-target);
	block-size: var(--engine-header-target);
	background-color: transparent;
	color: var(--engine-header-ink);
	border: var(--wp--custom--border--hairline) solid currentColor;
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
	transition:
		background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

.engine-icon-button:hover {
	background-color: var(--engine-header-hover);
	text-decoration: none;
}

.engine-icon-button:focus-visible {
	outline: var(--wp--custom--border--rule) solid var(--engine-header-accent);
	outline-offset: 0.15em;
	text-decoration: none;
}

.engine-icon-button__glyph {
	display: block;
	inline-size: 45%;
	block-size: 45%;
}

.engine-icon-button__count {
	position: absolute;
	inset-block-start: -0.25em;
	inset-inline-end: -0.25em;
	min-inline-size: 1.5em;
	padding-inline: 0.35em;
	background: var(--wp--preset--gradient--button);
	color: var(--wp--custom--color--ink);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: var(--wp--custom--line--body);
	text-align: center;
}

/*
 * Screen-reader-only text. The 1px sizing every implementation of this idiom
 * needs is taken from the hairline border token rather than written literally.
 */
.engine-site-header .engine-visually-hidden {
	position: absolute;
	inline-size: var(--wp--custom--border--hairline);
	block-size: var(--wp--custom--border--hairline);
	margin: calc(var(--wp--custom--border--hairline) * -1);
	padding: 0;
	border: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/*
 * The only breakpoint in this pattern. It exists because a navigation that
 * collapses into a drawer cannot be expressed fluidly, and it is pinned to the
 * same value core uses for overlayMenu="mobile" so the two never disagree.
 * Below it the hamburger joins the icon cluster on the right, per the design.
 */
@media (max-width: 599px) {
	.engine-site-header__bar {
		grid-template-columns: 1fr auto auto;
		column-gap: clamp(0.4rem, 2vw, 1rem);
	}

	/*
	 * The row has to be pinned, not just the column. The bar's DOM order is
	 * logo, nav, actions, and here the visual order swaps the last two. Grid's
	 * placement cursor only ever moves forward, so once nav has claimed
	 * column 3 the cursor sits past column 2 — and actions, asking for a
	 * column behind it, gets dropped onto a second row. Naming the row keeps
	 * all three on one line whatever the column order.
	 */
	.engine-site-header__actions {
		grid-row: 1;
		grid-column: 2;
		justify-self: end;
	}

	.engine-site-header__nav {
		grid-row: 1;
		grid-column: 3;
		justify-self: end;
	}

	.engine-site-header__logo {
		grid-row: 1;
	}

	/* The drawer carries the navigation; the pill would crowd the bar. */
	.engine-site-header__cta {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.engine-site-header,
	.engine-site-header *,
	.engine-site-header *::before,
	.engine-site-header *::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ── shrink: past a few pixels of scroll the sticky header turns translucent
   over a blur, tightens, and the logo mark shrinks. The parent theme's script
   marks <html class="is-scrolled">. ── */
.engine-site-header.is-shrink {
	transition: background-color 300ms ease, box-shadow 300ms ease;
}
.engine-site-header.is-shrink .engine-site-header__bar { transition: min-block-size 300ms ease; }
.engine-site-header.is-shrink .engine-site-header__logo img.engine-site-header__logo-icon { transition: inline-size 300ms ease; }
html.is-scrolled .engine-site-header.is-shrink {
	--engine-header-height: clamp(3rem, 4.2vw, 4.25rem);
	background-color: color-mix(in srgb, var(--engine-header-surface) 80%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--engine-header-ink) 8%, transparent);
}
html.is-scrolled .engine-site-header.is-shrink .engine-site-header__logo img.engine-site-header__logo-icon { inline-size: 1.75rem; }
/* In-page anchors land under the header, not behind it. */
html:has(.engine-site-header.is-sticky) { scroll-padding-block-start: calc(var(--engine-header-height, 5rem) + 1rem); }

/*
 * ── layout: masthead ──────────────────────────────────────────────────────
 *
 * The second header archetype. The inline bar above is one row — logotype
 * left, navigation centred, cluster and pill right — and that silhouette is
 * recognisable before a single colour resolves, which is why every site built
 * on it reads as a sibling of the last. The masthead is three ruled rows
 * instead: a meta line, a centred wordmark, and an index row — the navigation
 * centred with the call to action at its right end, both set as ruled caps.
 * No pill, no icon circles, nothing pinned to a corner.
 *
 * Every child pins its row as well as its column. The bar's DOM order is
 * logo, nav, cta, actions, and the masthead shows them as actions, logo,
 * nav+cta; grid's placement cursor only moves forward, so an item asking for
 * a row behind the cursor would be pushed past it.
 *
 * Scrolled, a masthead does not shrink — a 150px header collapsing to 50px
 * would shove the page up by the difference the moment the visitor moves.
 * Instead the sticky wrapper takes a negative top offset (measured by
 * interact.js into --engine-masthead-offset) so the meta rule and the
 * wordmark scroll away and only the index row stays pinned: the page keeps
 * its navigation and its one action, and nothing jumps.
 */
.engine-site-header.is-layout-masthead .engine-site-header__bar {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
	/* The masthead is a block of rows, not a fixed-height bar. */
	min-block-size: 0;
	max-inline-size: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--custom--space--gutter));
	padding-block: 0;
}

.engine-site-header.is-layout-masthead .engine-site-header__actions {
	grid-row: 1;
	grid-column: 1;
	justify-self: stretch;
	justify-content: space-between;
	gap: var(--wp--custom--space--stack);
	padding-block: 0.7em;
	border-block-end: var(--wp--custom--border--hairline) solid color-mix(in srgb, var(--engine-header-ink) 22%, transparent);
}

/* Stretched so the rule under the wordmark spans the measure, like the rule
   under a nameplate. */
.engine-site-header.is-layout-masthead .engine-site-header__logo {
	grid-row: 2;
	grid-column: 1;
	justify-self: stretch;
	padding-inline-end: 0;
	padding-block: clamp(0.9rem, 2.2vw, 1.6rem);
	text-align: center;
	border-block-end: var(--wp--custom--border--hairline) solid color-mix(in srgb, var(--engine-header-ink) 22%, transparent);
}

/*
 * The element selector matters: core copies a navigation block's classes onto
 * its inner <ul> as well, so a bare .engine-site-header__nav matches twice and
 * a row rule or a padding declared on it is drawn twice.
 */
.engine-site-header.is-layout-masthead nav.engine-site-header__nav {
	grid-row: 3;
	grid-column: 1;
	justify-self: center;
	padding-block: 0.85em;
}

/* The index row's action shares the navigation's grid cell and sits at its
   end; two items may occupy one cell, and their justification keeps them
   apart. */
.engine-site-header.is-layout-masthead .engine-site-header__masthead-cta {
	grid-row: 3;
	grid-column: 1;
	justify-self: end;
	align-self: center;
	margin: 0;
}

/*
 * A masthead wordmark is a mark, not a sentence: upright and tracked open.
 * The italic-first-word-plus-accent-second-word pairing the inline bar uses is
 * a signature strong enough that two sites carrying it look related, so the
 * masthead drops the italic and keeps only the colour change.
 */
.engine-site-header.is-layout-masthead .engine-site-header__logo.has-accent a {
	font-style: normal;
}

.engine-site-header.is-layout-masthead .engine-site-header__logo a {
	display: inline-block;
	letter-spacing: 0.24em;
	/* Tracking adds space after the last letter too; pull it back so the
	   wordmark stays optically centred. */
	text-indent: 0.24em;
}

/* ── the masthead meta rule ── */

/* A folio line: the first entry keeps the left edge, the last the right, and
   anything between spreads, so an address and a telephone number read as the
   two ends of one rule rather than a cluster in a corner. */
.engine-site-header__meta {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.4em 1.6em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.engine-site-header__meta-item {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow-sm, var(--wp--preset--font-size--body-xs));
	color: color-mix(in srgb, var(--engine-header-ink) 76%, transparent);
}

.engine-site-header__meta-item a {
	color: inherit;
	text-decoration: none;
	transition: color var(--wp--custom--transition--base);
}

.engine-site-header__meta-item a:hover,
.engine-site-header__meta-item a:focus-visible {
	color: var(--engine-header-accent);
	text-decoration: none;
}

/*
 * On the masthead the call to action is a ruled caps link at the end of the
 * index row, set in the header's ink with the accent carried by the rule. A
 * filled pill in the corner is the inline bar's gesture and the single most
 * recognisable thing the farm's headers share.
 */
.engine-site-header.is-layout-masthead .engine-site-header__cta {
	gap: 0.6em;
	padding: 0 0 0.3em;
	border-radius: 0;
	background: none;
	color: var(--engine-header-ink);
	border-block-end: var(--wp--custom--border--rule) solid var(--engine-header-accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: inherit;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: color var(--wp--custom--transition--base), gap var(--wp--custom--transition--base);
}

/* The arrow is drawn, not typed, so no glyph leaks into the label. */
.engine-site-header.is-layout-masthead .engine-site-header__cta::after {
	content: "";
	inline-size: 1.6em;
	block-size: var(--wp--custom--border--rule);
	background: var(--engine-header-accent);
	transition: inline-size var(--wp--custom--transition--base);
}

.engine-site-header.is-layout-masthead .engine-site-header__cta:hover,
.engine-site-header.is-layout-masthead .engine-site-header__cta:focus-visible {
	transform: none;
	color: var(--engine-header-accent);
	gap: 0.9em;
}

.engine-site-header.is-layout-masthead .engine-site-header__cta:hover::after {
	inline-size: 2.2em;
}

/* Navigation on a masthead is set as tracked caps, like a printed contents
   line — it is the page's index, not a row of app links. */
.engine-site-header.is-layout-masthead .engine-site-header__nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	padding-block-end: 0.25em;
	border-block-end: var(--wp--custom--border--rule) solid transparent;
	transition: border-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}

.engine-site-header.is-layout-masthead .engine-site-header__nav .wp-block-navigation-item__content:hover,
.engine-site-header.is-layout-masthead .engine-site-header__nav .wp-block-navigation-item__content:focus-visible {
	color: var(--engine-header-accent);
	border-block-end-color: currentColor;
	text-decoration: none;
}

/* A masthead never goes translucent: the inline bar's blur reads as a smear
   when a block of rows this deep sits over a light page. It also keeps its
   height — see the note above on how it sticks. */
html.is-scrolled .engine-site-header.is-layout-masthead.is-shrink {
	--engine-header-height: clamp(3.5rem, 5.5vw, 5.5rem);
	background-color: var(--engine-header-surface);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

@media (max-width: 599px) {
	/* The drawer carries the navigation, so the masthead keeps two rows: the
	   meta rule, then the wordmark with the action and the toggle beside it.
	   The second row is the one that stays pinned. */
	.engine-site-header.is-layout-masthead .engine-site-header__bar {
		grid-template-columns: minmax(0, 1fr) auto auto;
		column-gap: clamp(0.6rem, 3vw, 1.25rem);
	}

	.engine-site-header.is-layout-masthead .engine-site-header__actions {
		grid-row: 1;
		grid-column: 1 / -1;
		justify-self: stretch;
	}

	.engine-site-header.is-layout-masthead .engine-site-header__logo {
		grid-row: 2;
		grid-column: 1;
		justify-self: start;
		text-align: start;
		border-block-end: 0;
	}

	.engine-site-header.is-layout-masthead .engine-site-header__masthead-cta {
		grid-row: 2;
		grid-column: 2;
		justify-self: end;
	}

	.engine-site-header.is-layout-masthead nav.engine-site-header__nav {
		grid-row: 2;
		grid-column: 3;
		justify-self: end;
		padding-block: 0;
	}

	/* The index row's link is the masthead's one action, so unlike the inline
	   bar's pill it must survive the narrow viewport. */
	.engine-site-header.is-layout-masthead .engine-site-header__cta {
		display: inline-flex;
	}
}

/* ── cta_motion: pulse — a soft ring leaves the button every few seconds. ── */
@media (prefers-reduced-motion: no-preference) {
	.engine-site-header__cta.is-pulse {
		--engine-pulse-color: color-mix(in srgb, var(--engine-header-accent) 55%, transparent);
		animation: engine-pulse 3.2s ease-out infinite;
	}
}

/* ── stats-strip ── */
.engine-stats-strip {
	--engine-stats-strip-cols: 4;
	--engine-stats-strip-gap: var(--wp--custom--space--stack);
	--engine-stats-strip-rule: color-mix(in srgb, currentColor 16%, transparent);
	position: relative;
	overflow: clip; /* clip, not hidden: hidden makes a scroll container, which would break scroll-driven view() timelines inside */
}

.engine-stats-strip__grid {
	display: grid;
	gap: var(--engine-stats-strip-gap);
	grid-template-columns: repeat(auto-fit, minmax(max(min(var(--wp--custom--grid--tile-min), 100%), (100% - (var(--engine-stats-strip-cols) - 1) * var(--engine-stats-strip-gap)) / var(--engine-stats-strip-cols)), 1fr));
}
.engine-stats-strip__grid > * { margin-block: 0; }
.engine-stats-strip__grid.is-cols-2 { --engine-stats-strip-cols: 2; }
.engine-stats-strip__grid.is-cols-3 { --engine-stats-strip-cols: 3; }
.engine-stats-strip__grid.is-cols-4 { --engine-stats-strip-cols: 4; }

.engine-stats-strip__stat {
	display: grid;
	gap: 0.35em;
	padding-inline: var(--wp--custom--space--inline);
}
.engine-stats-strip__stat > * { margin: 0; }
.engine-stats-strip.is-align-center .engine-stats-strip__stat { text-align: center; }

/* A hairline between neighbours, drawn on the left of every figure but the
   first in a row; a wrapped row keeps its own first figure clean. */
.engine-stats-strip.has-dividers .engine-stats-strip__stat {
	border-inline-start: var(--wp--custom--border--hairline) solid var(--engine-stats-strip-rule);
}
.engine-stats-strip.has-dividers .engine-stats-strip__stat:first-child { border-inline-start: 0; }

.engine-stats-strip__value {
	line-height: var(--wp--custom--line--tight);
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums; /* digits keep their width while a figure counts up */
}
.engine-stats-strip__label {
	color: var(--wp--custom--color--ink-soft, currentColor);
	line-height: var(--wp--custom--line--body);
}
.engine-stats-strip.is-variant-surface-dark .engine-stats-strip__label { color: currentColor; opacity: 0.8; }

/* ── steps-row ── */
.engine-steps-row {
	--engine-steps-row-cols: 4;
	--engine-steps-row-gap: clamp(1rem, 2vw, 1.75rem);
	--engine-steps-row-eyebrow: var(--wp--custom--color--accent);
	--engine-steps-row-rule: var(--wp--custom--color--accent);
	position: relative;
	isolation: isolate;
	overflow: clip; /* clip, not hidden: hidden makes a scroll container, which would break scroll-driven view() timelines inside */
}
.engine-steps-row.is-variant-surface-dark {
	--engine-steps-row-eyebrow: var(--wp--custom--color--accent-soft);
	--engine-steps-row-rule: var(--wp--custom--color--accent-soft);
}

.engine-steps-row__header > * { max-inline-size: var(--wp--custom--measure--heading, 40rem); }
.engine-steps-row__header > * { margin-block: 0; }
.engine-steps-row__header > * + * { margin-block-start: var(--wp--custom--space--inline); }

.engine-steps-row__eyebrow { display: flex; align-items: center; gap: 0.8em; color: var(--engine-steps-row-eyebrow); }
.engine-steps-row__eyebrow.has-rule::before {
	content: "";
	flex: none;
	inline-size: 1.6em;
	block-size: var(--wp--custom--border--hairline);
	background: currentColor;
}
.engine-steps-row__heading { text-wrap: balance; line-height: var(--wp--custom--line--tight); }
.engine-steps-row__intro { color: var(--wp--custom--color--ink-soft, currentColor); line-height: var(--wp--custom--line--body); }

.engine-steps-row__grid {
	display: grid;
	gap: var(--engine-steps-row-gap);
	grid-template-columns: repeat(auto-fit, minmax(max(min(var(--wp--custom--grid--tile-min), 100%), (100% - (var(--engine-steps-row-cols) - 1) * var(--engine-steps-row-gap)) / var(--engine-steps-row-cols)), 1fr));
}
.engine-steps-row__grid > * { margin-block: 0; }
.engine-steps-row__grid.is-cols-2 { --engine-steps-row-cols: 2; }
.engine-steps-row__grid.is-cols-3 { --engine-steps-row-cols: 3; }
.engine-steps-row__grid.is-cols-4 { --engine-steps-row-cols: 4; }

.engine-steps-row__step {
	display: grid;
	align-content: start;
	gap: 0.55em;
	padding-block-start: var(--wp--custom--space--inline);
	border-block-start: var(--wp--custom--border--rule) solid var(--engine-steps-row-rule);
}
.engine-steps-row__step > * { margin: 0; }
.engine-steps-row__number { color: var(--wp--custom--color--ink-soft, currentColor); }
.engine-steps-row__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-xs, var(--wp--preset--font-size--display-sm));
	font-style: italic;
	font-weight: 400;
	line-height: var(--wp--custom--line--tight);
}
.engine-steps-row__body { color: var(--wp--custom--color--ink-soft, currentColor); line-height: var(--wp--custom--line--body); }
.engine-steps-row.is-variant-surface-dark .engine-steps-row__number,
.engine-steps-row.is-variant-surface-dark .engine-steps-row__body,
.engine-steps-row.is-variant-surface-dark .engine-steps-row__intro { color: currentColor; opacity: 0.8; }

.engine-steps-row__dots {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: var(--wp--custom--space--gutter);
	inline-size: clamp(8rem, 24vw, 22rem);
	block-size: auto;
	z-index: 0;
	pointer-events: none;
}
.engine-steps-row__dots .is-accent { fill: var(--wp--custom--color--accent); }
.engine-steps-row__dots .is-soft { fill: var(--wp--custom--color--accent-soft); opacity: 0.6; }

/* ── Scroll motion (opt-in per site): the dots drift against the section as
   it passes through the viewport. ── */
html[data-scroll-motion] .engine-steps-row__dots { --engine-scroll-y: 70%; }

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		html[data-scroll-motion] .engine-steps-row__dots {
			animation: engine-scroll-drift linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}

/* Room between the heading and the steps. WordPress's per-container layout rule
   zeroes the vertical gap between a section's children (the generated theme
   does not enable block-gap support), so the pattern states its own: the
   block step, the distance the design draws under the intro. */
.engine-steps-row > .engine-steps-row__grid {
	margin-block-start: var(--wp--custom--space--block);
}

/* ── sticky-booking-bar ── */
.engine-sticky-booking {
	--engine-sticky-surface: var(--wp--custom--color--surface-dark);
	--engine-sticky-ink: var(--wp--custom--color--ink-inverse);
	--engine-sticky-border: color-mix(in srgb, var(--engine-sticky-ink) 22%, transparent);
	--engine-sticky-height: clamp(4.4rem, 9.5vw, 5.6rem);
}
.engine-sticky-booking.is-variant-canvas {
	--engine-sticky-surface: var(--wp--custom--color--canvas);
	--engine-sticky-ink: var(--wp--custom--color--ink);
}
.engine-sticky-booking.is-variant-panel {
	--engine-sticky-surface: var(--wp--preset--gradient--panel);
	--engine-sticky-ink: var(--wp--custom--color--ink-inverse);
}

.engine-sticky-booking__spacer {
	block-size: calc(var(--engine-sticky-height) + var(--wp--custom--space--inline));
}

.engine-sticky-booking__bar {
	position: fixed;
	inset-inline: max(var(--wp--custom--space--inline), env(safe-area-inset-left));
	inset-block-end: max(var(--wp--custom--space--inline), env(safe-area-inset-bottom));
	z-index: var(--wp--custom--layer--sticky, 40);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--custom--space--inline);
	min-block-size: var(--engine-sticky-height);
	padding: 0.65em 0.8em 0.65em 1em;
	border: var(--wp--custom--border--hairline) solid var(--engine-sticky-border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--engine-sticky-surface);
	color: var(--engine-sticky-ink);
	backdrop-filter: blur(10px);
	box-shadow: 0 0.8rem 2.2rem color-mix(in srgb, var(--wp--custom--color--surface-dark) 42%, transparent);
}

.engine-sticky-booking__label,
.engine-sticky-booking__note {
	margin: 0;
}
.engine-sticky-booking__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-md);
	font-weight: 600;
	line-height: var(--wp--custom--line--body);
}
.engine-sticky-booking__note {
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line--body);
	opacity: 0.84;
}

.engine-sticky-booking__actions {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
}
.engine-sticky-booking__cta,
.engine-sticky-booking__secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--custom--space--button-y) var(--wp--custom--space--button-x);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--wp--custom--transition--base), opacity var(--wp--custom--transition--base);
}
.engine-sticky-booking__cta {
	background: var(--wp--preset--gradient--button);
	color: var(--wp--custom--color--ink-on-accent, var(--wp--custom--color--ink));
}
.engine-sticky-booking__secondary {
	background: transparent;
	color: inherit;
	border: var(--wp--custom--border--hairline) solid currentColor;
}
.engine-sticky-booking__cta:hover,
.engine-sticky-booking__secondary:hover {
	transform: translateY(-0.08em);
	text-decoration: none;
}
.engine-sticky-booking__cta:focus-visible,
.engine-sticky-booking__secondary:focus-visible {
	outline: var(--wp--custom--border--rule) solid currentColor;
	outline-offset: 0.2em;
}

@media (max-width: 47.99em) {
	.engine-sticky-booking__bar {
		grid-template-columns: minmax(0, 1fr);
		inset-inline: max(var(--wp--custom--space--inline), env(safe-area-inset-left));
	}
	.engine-sticky-booking__actions {
		justify-content: stretch;
	}
	.engine-sticky-booking__cta,
	.engine-sticky-booking__secondary {
		flex: 1 1 auto;
	}
}

@media (max-width: 47.99em) {
	.engine-sticky-booking.is-hide-mobile .engine-sticky-booking__spacer,
	.engine-sticky-booking.is-hide-mobile .engine-sticky-booking__bar {
		display: none;
	}
}
@media (min-width: 48em) {
	.engine-sticky-booking.is-hide-desktop .engine-sticky-booking__spacer,
	.engine-sticky-booking.is-hide-desktop .engine-sticky-booking__bar {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.engine-sticky-booking__cta,
	.engine-sticky-booking__secondary {
		transition: none;
	}
	.engine-sticky-booking__cta:hover,
	.engine-sticky-booking__secondary:hover {
		transform: none;
	}
}

/* ── testimonial-cards ── */
/*
 * Pattern-scoped CSS. Every value is a token reference, a relative unit or a
 * ratio — no hex, no px type, no font-family literal, so one rule set serves
 * every site the factory builds.
 */
.engine-testimonials {
	--engine-testimonials-cols: 3;
	--engine-testimonials-gap: var(--wp--custom--space--stack);
	--engine-testimonials-glyph: var(--wp--custom--color--accent);
	--engine-testimonials-cite: var(--wp--custom--color--brand-deep);
}

.engine-testimonials.is-variant-surface-dark {
	--engine-testimonials-glyph: var(--wp--custom--color--accent-soft);
	--engine-testimonials-cite: var(--wp--custom--color--surface-card);
}

.engine-testimonials__header {
	max-width: var(--wp--custom--measure--prose);
}

.engine-testimonials__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--inline);
	margin: 0;
}

.engine-testimonials__heading {
	margin: 0;
	text-wrap: balance;
}

.engine-testimonials__intro {
	margin: 0;
	max-width: var(--wp--custom--measure--narrow);
	opacity: 0.75;
}

/* Max <cols> columns on wide viewports, fewer on narrow ones, no media query. */
/* Same block-gap-inside-a-grid trap as the product grid: without this the
   first quote card renders 24px above the other two. */
.engine-testimonials__grid > * {
	margin-block: 0;
}

.engine-testimonials__grid {
	display: grid;
	gap: var(--engine-testimonials-gap);
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			max(
				min(var(--wp--custom--grid--card-min), 100%),
				(100% - (var(--engine-testimonials-cols) - 1) * var(--engine-testimonials-gap)) / var(--engine-testimonials-cols)
			),
			1fr
		)
	);
}

.engine-testimonials__grid.is-cols-1 { --engine-testimonials-cols: 1; }
.engine-testimonials__grid.is-cols-2 { --engine-testimonials-cols: 2; }
.engine-testimonials__grid.is-cols-3 { --engine-testimonials-cols: 3; }
.engine-testimonials__grid.is-cols-4 { --engine-testimonials-cols: 4; }

.engine-testimonials__card {
	height: 100%;
	transition: transform var(--wp--custom--transition--base);
}

/*
 * The quote fills the card and the attribution is pushed to its foot, so a row
 * of cards lines its names up however unevenly the quotes run. Cards already
 * stretch to a common height; without this the cite simply follows the last
 * line of its own quote and the row reads as ragged.
 */
.engine-testimonials__card > .wp-block-quote {
	align-self: stretch;
	/* Claim the card's spare height so the cite below has somewhere to be
	   pushed to. A content-height quote leaves `margin-block-start: auto`
	   nothing to consume, and the attribution stays glued to the last line. */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.engine-testimonials__card:hover,
.engine-testimonials__card:focus-within {
	transform: translateY(-0.25rem);
}

/* Decorative accent glyph: drawn in CSS, so it is inert to assistive tech. */
.engine-testimonials__card::before,
.engine-testimonials__eyebrow::before {
	content: "";
	display: block;
	flex: none;
	inline-size: 1.25em;
	block-size: 1.25em;
	background-color: var(--engine-testimonials-glyph);
	clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

.engine-testimonials.is-glyph-none .engine-testimonials__card::before,
.engine-testimonials.is-glyph-none .engine-testimonials__eyebrow::before,
.engine-testimonials__card.has-logo::before,
.engine-testimonials__card.has-image::before {
	content: none;
}

/* align: center — the header sits over the middle of the grid. */
.engine-testimonials.is-align-center .engine-testimonials__header {
	max-width: var(--wp--custom--measure--prose);
	margin-inline: auto;
	text-align: center;
}
.engine-testimonials.is-align-center .engine-testimonials__eyebrow { justify-content: center; }
.engine-testimonials.is-align-center .engine-testimonials__intro { margin-inline: auto; }

/* A card with a photograph: the picture fills the leading half, the quote
   sits beside it in the body face, the name bold with its meta under it. */
.engine-testimonials__card.has-image {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
	padding: 0; /* core gives any group with a background a padding; the photo fills its half */
	overflow: clip;
	box-shadow: 0 0.6rem 1.6rem color-mix(in srgb, var(--wp--custom--color--ink) 7%, transparent);
}
.engine-testimonials__card.has-image > * { margin: 0; }
.engine-testimonials__card.has-image .engine-testimonials__image { position: relative; block-size: 100%; min-block-size: 16rem; overflow: clip; /* the frame the photograph slides inside */ }
.engine-testimonials__card.has-image .engine-testimonials__image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.engine-testimonials__card.has-image .wp-block-quote {
	display: grid;
	align-content: center;
	padding: var(--wp--custom--space--stack);
}
.engine-testimonials__card.has-image .wp-block-quote > p {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	font-style: normal;
	color: var(--wp--custom--color--ink-soft, currentColor);
}
.engine-testimonials__card.has-image .wp-block-quote cite {
	display: block;
	margin-block-start: var(--wp--custom--space--inline);
	font-size: var(--wp--preset--font-size--body-xs);
	font-style: normal;
	color: var(--wp--custom--color--accent);
}
.engine-testimonials__card.has-image .wp-block-quote cite::before { content: none; }
.engine-testimonials__card.has-image .wp-block-quote cite strong {
	display: block;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--engine-testimonials-cite);
}
@media (max-width: 35.99em) {
	.engine-testimonials__card.has-image { grid-template-columns: 1fr; }
	.engine-testimonials__card.has-image .engine-testimonials__image { min-block-size: 12rem; }
}

.engine-testimonials__logo {
	align-self: flex-start;
}

.engine-testimonials__logo img {
	block-size: 2rem;
	inline-size: auto;
	max-inline-size: 100%;
}

.engine-testimonials__card .wp-block-quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}

.engine-testimonials__card .wp-block-quote > p {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--body-lg);
	font-style: italic;
	line-height: var(--wp--custom--line--body);
	text-wrap: pretty;
}

.engine-testimonials__card .wp-block-quote cite {
	display: block;
	/* auto, not a fixed gap: the quote above is a flex column that fills the
	   card, so this drops the attribution to the card's foot and lines the
	   names up across a row of unevenly long quotes. The visual breathing room
	   moves to padding, which auto cannot swallow. */
	margin-block-start: auto;
	padding-block-start: var(--wp--custom--space--inline);
	color: var(--engine-testimonials-cite);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	font-style: normal;
	font-weight: 500;
}

.engine-testimonials__card .wp-block-quote cite::before {
	content: "\2014\00a0";
}

@media (prefers-reduced-motion: reduce) {
	.engine-testimonials__card {
		transition: none;
	}

	.engine-testimonials__card:hover,
	.engine-testimonials__card:focus-within {
		transform: none;
	}
}

/* ── Scroll motion: a photograph slides slowly inside its half of the card. ── */
html[data-scroll-motion] .engine-testimonials__image img { --engine-scroll-y: -8%; scale: 1.18; }
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		html[data-scroll-motion] .engine-testimonials__image img {
			animation: engine-scroll-drift linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}