/*
 * Component library (002 T007/T027/T032): one named section per component
 * class family, per contracts/components.md §1 and research R3.
 *
 * Searchable identities (SC-014): .button | .link | .card | .field |
 * .notice/.status-message | .content-block | .booking-cta — plus the
 * page-composition components (.hero, .steps, .article-*, .cta-block,
 * .not-found, .featured-image).
 *
 * Every value is a semantic token (design-tokens.md §3): no raw hex, no
 * px-scale spacing, no ms durations, no font stacks in this file.
 * Motion lives inside `prefers-reduced-motion` guards where it is animated
 * rather than token-timed (research R12, SC-009).
 */

/* =====================================================================
 * .button — one class family, primary/secondary/ghost variants
 * =================================================================== */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--tap-target);
	padding: var(--space-3) var(--space-5);
	font-family: var(--font-body);
	font-size: var(--text-md);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background: var(--color-action);
	color: var(--color-action-text);
	border: var(--border-thin) solid transparent;
	border-radius: var(--radius-button);
	transition: var(--transition-hover);
}

/* FR-008 (interaction type 1): primary = ink ground / white text; hover
 * inverts to white ground / ink text + 1px ink border. Dark sections remap
 * the inversion tokens locally (layout.css `.section--dark`). */
.button:hover {
	background: var(--color-action-hover);
	color: var(--color-action-hover-text);
	border-color: var(--color-action);
}

.button--primary {
	background: var(--color-action);
	color: var(--color-action-text);
}

.button--secondary {
	background: transparent;
	color: var(--color-text-strong);
	border-color: var(--color-border-strong);
}

.button--secondary:hover {
	background: var(--color-action-hover);
	color: var(--color-action-hover-text);
	border-color: var(--color-action-hover);
}

.button--ghost {
	background: transparent;
	color: inherit;
	border-color: currentColor;
}

.button--ghost:hover {
	background: var(--color-surface-alt);
	color: inherit;
}

/* Secondary button inside a dark Final CTA: inverse pairing only
 * (visual-system §5) — white label on #141414 (18.42:1), neutral border ≥3:1,
 * hover flips to the accent ground and ink text. */
.section--dark .button--secondary {
	color: var(--color-text-inverse);
	border-color: var(--color-border-strong);
}

.section--dark .button--secondary:hover {
	background: var(--color-action-hover); /* accent ground */
	color: var(--color-action-hover-text);
	border-color: var(--color-action-hover);
}

.button--sm {
	min-height: calc(var(--tap-target) - var(--space-2));
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-sm);
}

.button--lg {
	padding: var(--space-4) var(--space-6);
	font-size: var(--text-lg);
}

.button[disabled],
.button[aria-disabled="true"] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* =====================================================================
 * .link — inline links with a consistent underline treatment (FR-005:
 * meaningful text is supplied by the templates, never by CSS)
 * =================================================================== */

.link {
	color: var(--color-action);
	text-decoration-thickness: var(--border-thin);
	text-underline-offset: 0.2em;
	transition: var(--transition-hover);
}

.link:hover,
.link:focus-visible {
	color: var(--color-action);
	text-decoration: underline;
}

.link--muted {
	color: var(--color-text-muted);
}

/* `.link--quiet` (T018) lives in base.css with the other editorial link
 * rules — quiet, subordinate to the primary CTA, underline on hover/focus. */

.link__arrow {
	display: inline-block;
	margin-inline-start: var(--space-1);
	transition: transform var(--duration-fast) var(--ease-standard); /* 4px shift */
}

a:hover .link__arrow,
a:focus-visible .link__arrow {
	transform: translateX(var(--space-1));
}

/* =====================================================================
 * .card — content / service / insight cards share one family
 * =================================================================== */

.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-6);
	background: var(--color-surface);
	border: var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.card__title {
	margin-bottom: 0;
	font-size: var(--text-xl);
}

.card__title a {
	color: inherit;
	text-decoration: none;
}

.card__title a:hover {
	color: var(--color-action);
	text-decoration: underline;
}

.card__text {
	color: var(--color-text-muted);
	margin-bottom: 0;
	flex-grow: 1;
}

.card__meta {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	margin-bottom: 0;
}

.card--article {
	padding: 0;
	overflow: hidden;
}

.card--article .featured-image {
	border-radius: 0;
}

.card--article .card__title,
.card--article .card__meta,
.card--article .card__text {
	padding-inline: var(--space-6);
}

.card--article .card__title {
	margin-top: var(--space-5);
}

.card--article .card__text {
	padding-bottom: var(--space-6);
}

/* =====================================================================
 * .field — form fields, labels, hints, errors (contact-form-ui.md §3)
 * =================================================================== */

.form-region {
	margin-top: var(--space-6);
}

.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-5);
}

.field__label {
	font-weight: var(--weight-medium);
	color: var(--color-text-strong);
}

.field__required {
	color: var(--color-action);
}

.field__hint {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.field__control {
	width: 100%;
	min-height: var(--tap-target);
	padding: var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-md);
	color: var(--color-text-strong);
	background: var(--color-surface);
	border: var(--border-thin) solid var(--color-border-strong);
	border-radius: var(--radius-button);
	transition: var(--transition-hover);
}

.field__control:hover {
	border-color: var(--color-text-muted);
}

.field__control:focus {
	border-color: var(--color-action);
}

textarea.field__control {
	resize: vertical;
	min-height: calc(var(--space-12) + var(--space-6));
}

.field--invalid .field__control,
.field__control[aria-invalid="true"] {
	border-color: var(--color-action);
	border-inline-start-width: calc(var(--border-thin) * 3);
}

.field__error {
	display: block;
	color: var(--color-text-strong);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

/* Search inputs (404 / search form) reuse the field control styling. */
.wp-block-search__input,
input[type="search"],
input[type="text"],
input[type="email"],
input[type="tel"] {
	font-family: var(--font-body);
	font-size: var(--text-md);
	color: var(--color-text-strong);
	background: var(--color-surface);
	border: var(--border-thin) solid var(--color-border-strong);
	border-radius: var(--radius-button);
}

/* Search (404 / empty states) reuses the field control + button. */
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	max-width: var(--reading-max);
	margin-bottom: var(--space-6);
}

.search-form .field__control {
	flex: 1 1 16rem;
}

.form-actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-6);
}
.form-actions__hint {
	margin-bottom: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* Honeypot: off-screen for humans, present for bots (FR-020). */
.lidia-honeypot {
	position: absolute !important;
	left: var(--offscreen) !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (min-width: 640px) {
	.form-actions {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* =====================================================================
 * .notice / .status-message — success, error and information messages
 * (role="status" / role="alert" supplied in markup — FR-034)
 * =================================================================== */

.notice,
.status-message {
	display: block;
	padding: var(--space-4) var(--space-5);
	margin-bottom: var(--space-6);
	background: var(--color-notice-surface);
	border: var(--border-default);
	border-radius: var(--radius-card);
	color: var(--color-text);
}

.notice p,
.status-message p {
	margin-bottom: 0;
}

.notice p + p,
.status-message p + p {
	margin-top: var(--space-2);
}

.notice--success,
.status-message--success {
	background: var(--color-surface-muted);
	border-color: var(--color-border-strong);
	color: var(--color-text-strong);
}

.notice--error,
.status-message--error {
	background: var(--color-surface-alt);
	border-color: var(--color-action);
	color: var(--color-text-strong);
}

.notice__title {
	font-weight: var(--weight-bold);
	color: var(--color-text-strong);
	margin-bottom: var(--space-2);
}

.notice ul {
	margin-bottom: 0;
	padding-left: var(--space-5);
}

.notice a {
	color: inherit;
}

/* Server-side error summary naming the offending fields (US3.1). */
.form-error-summary {
	border-inline-start: calc(var(--border-thin) * 3) solid var(--color-action);
}

.form-error-summary__title {
	margin-bottom: var(--space-2);
}

/* Legacy aliases kept for markup emitted by the plugin fallback form. */
.form-status--success {
	background: var(--color-surface-muted);
	border-color: var(--color-border-strong);
	color: var(--color-text-strong);
}

.form-message--error {
	background: var(--color-surface-alt);
	border-color: var(--color-action);
}

/* =====================================================================
 * .content-block — generic editorial block (title + text + actions)
 * =================================================================== */

.content-block {
	display: grid;
	gap: var(--space-4);
}

.content-block__title {
	margin-bottom: 0;
}

.content-block__text {
	margin-bottom: 0;
	color: var(--color-text-muted);
	font-size: var(--text-lg);
}

.content-block__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-2);
}

.section--dark .content-block__text {
	color: var(--color-text-inverse-muted);
}

@media (min-width: 768px) {
	.content-block--split {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--space-6);
	}
}

/* =====================================================================
 * .booking-cta — the shared booking component (booking-cta.md)
 *   Definition: components/booking-cta.php (markup) + assets/js/booking.js
 *   (behavior) + this section (visuals).
 * =================================================================== */

.booking-cta {
	display: inline-flex;
}

.booking-cta__notice-body {
	margin-top: var(--space-3);
	color: var(--color-text-muted);
}

/* --- Dialog (JS enhancement only; absent without JS) --- */

.booking-dialog {
	position: fixed;
	inset: 0;
	z-index: var(--z-dialog);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	background: var(--color-overlay);
}

.booking-dialog[hidden] {
	display: none;
}

.booking-dialog__panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--dialog-max);
	max-height: calc(100dvh - var(--space-8));
	overflow: auto;
	background: var(--color-surface);
	color: var(--color-text);
	border: var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-dialog);
}

.booking-dialog__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	border-bottom: var(--border-default);
}

.booking-dialog__title {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	letter-spacing: normal;
	color: var(--color-text-strong);
}

.booking-dialog__close {
	min-height: var(--tap-target);
	min-width: var(--tap-target);
	padding: var(--space-2);
	font-size: var(--text-lg);
	line-height: 1;
	color: var(--color-text-strong);
	background: transparent;
	border: var(--border-thin) solid var(--color-border-strong);
	border-radius: var(--radius-button);
	cursor: pointer;
	transition: var(--transition-hover);
}

.booking-dialog__close:hover {
	background: var(--color-surface-alt);
}

.booking-dialog__body {
	position: relative;
	flex: 1 1 auto;
	min-height: var(--space-12);
	padding: var(--space-6);
}

.booking-dialog__body--flush {
	padding: 0;
}

.booking-dialog__frame {
	display: block;
	width: 100%;
	min-height: calc(var(--space-12) * 4);
	border: 0;
	background: var(--color-surface);
}

.booking-dialog__footer {
	display: flex;
	justify-content: flex-end;
	padding: var(--space-4) var(--space-5);
	border-top: var(--border-default);
}

/* Loading state: spinner + "Opening the scheduler…" (role="status"). */
.booking-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	padding-block: var(--space-9);
	text-align: center;
	color: var(--color-text-muted);
}

.booking-spinner {
	display: block;
	width: var(--space-6);
	height: var(--space-6);
	border: calc(var(--border-thin) * 2) solid var(--color-border);
	border-top-color: var(--color-action);
	border-radius: var(--radius-full);
}

@media (prefers-reduced-motion: no-preference) {
	.booking-spinner {
		animation: booking-spin var(--duration-normal) linear infinite;
		animation-duration: calc(var(--duration-normal) * 3.5); /* derived from a token */
	}
}

@keyframes booking-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Error state: friendly copy + Retry + guaranteed plain link (SC-004). */
.booking-error__title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	margin-bottom: var(--space-3);
	color: var(--color-text-strong);
}

.booking-error__text {
	color: var(--color-text-muted);
	margin-bottom: var(--space-5);
}

.booking-error__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}

.booking-error__fallback {
	font-size: var(--text-sm);
}

/* Placeholder notice (A-03): neutral, no scheduler attempted. */
.booking-placeholder__title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	margin-bottom: var(--space-3);
	color: var(--color-text-strong);
}

.booking-placeholder__text {
	color: var(--color-text-muted);
	margin-bottom: var(--space-5);
}

/* Viewport-fitted dialog on small screens (US2.3). */
@media (max-width: 767px) {
	.booking-dialog {
		padding: 0;
		align-items: stretch;
	}

	.booking-dialog__panel {
		max-width: none;
		max-height: 100dvh;
		height: 100dvh;
		border-radius: 0;
		border: 0;
	}

	.booking-dialog__body {
		padding: var(--space-5);
	}
}

/* =====================================================================
 * Homepage composition components (005): problem statement, opportunity
 * sequence, service rows, process steps, trust statements, dormant
 * project item. Editorial blocks — thin borders and numerals instead of
 * cards (FR-006, FR-014…FR-019).
 * =================================================================== */

/* --- FR-014: quiet, large-typographic Problem statement (no cards) --- */

.section--problem .section__header {
	margin-bottom: var(--space-5);
}

.section--problem .entry-content {
	max-width: var(--reading-max);
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
}

.section--problem .entry-content > :first-child {
	font-size: var(--text-xl); /* the statement, larger than body */
	line-height: var(--leading-snug);
	color: var(--color-text);
}

.section--problem .entry-content > :first-child + * {
	font-size: var(--text-lg); /* supporting copy sits quieter */
	color: var(--color-text-muted); /* measured pairing, visual-system §5 */
}

/* --- FR-015: Attract → Explain → Build Trust → Convert → Grow --- */

.sequence {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	border-top: var(--border-thin) solid var(--color-border);
}

.sequence__item {
	min-width: 0;
	padding-block: var(--space-5);
	border-bottom: var(--border-thin) solid var(--color-border);
	overflow-wrap: break-word;
}

.sequence__index {
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-4xl); /* prominent numbering */
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-muted); /* measured pairing, visual-system §5 */
}

.sequence__title {
	margin-bottom: var(--space-2);
	font-size: var(--text-xl);
}

.sequence__text {
	margin-bottom: 0;
	color: var(--color-text-muted);
}

/* Horizontal typographic/bordered sequence ≥1024, vertical below (FR-015). */
@media (min-width: 1024px) {
	.sequence {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		border-bottom: var(--border-thin) solid var(--color-border);
	}

	.sequence__item {
		padding: var(--space-6) var(--space-5);
		border-bottom: 0;
		border-left: var(--border-thin) solid var(--color-border);
	}

	.sequence__item:first-child {
		padding-inline-start: 0;
		border-left: 0;
	}

	.sequence__item:last-child {
		padding-inline-end: 0;
	}
}

/* --- FR-016: eight numbered service rows — the WHOLE row is one link --- */

.service-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--border-thin) solid var(--color-border);
}

.service-row {
	margin: 0;
	min-width: 0;
	border-bottom: var(--border-thin) solid var(--color-border);
}

.service-row__link {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--space-2) var(--space-5);
	padding: var(--space-5) var(--space-4);
	margin-inline: calc(var(--space-4) * -1); /* the hover ground reaches past the text */
	color: var(--color-text);
	text-decoration: none;
	overflow-wrap: break-word;
	transition:
		background-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}

.service-row__index {
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-wide);
	color: var(--color-text-muted); /* measured pairing, visual-system §5 */
	padding-top: var(--space-1);
}

.service-row__body {
	display: block;
	min-width: 0;
}

.service-row__name {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-strong);
}

.service-row__desc {
	display: block;
	margin-top: var(--space-2);
	font-size: var(--text-md);
	color: var(--color-text-muted); /* measured pairing, visual-system §5 */
}

.service-row__arrow {
	font-size: var(--text-xl);
	line-height: 1;
	color: var(--color-text-strong);
	transition: transform var(--duration-fast) var(--ease-standard);
}

/* Interaction type 2 (link hover): the row inverts onto the section's action
 * ground — ink/white on light bands, white/accent on an accent band — and the
 * arrow shifts 4–8px. No cards, no bespoke animation (FR-014/FR-016, US2.1):
 * because the ground is the SECTION's action token, the moment is
 * accent-aware by construction (FR-001, no random per-component colour). */
.service-row__link:hover,
.service-row__link:focus-visible {
	background: var(--color-action);
	color: var(--color-action-text);
}

.service-row__link:hover .service-row__index,
.service-row__link:focus-visible .service-row__index,
.service-row__link:hover .service-row__name,
.service-row__link:focus-visible .service-row__name,
.service-row__link:hover .service-row__arrow,
.service-row__link:focus-visible .service-row__arrow {
	color: var(--color-action-text);
}

.service-row__link:hover .service-row__desc,
.service-row__link:focus-visible .service-row__desc {
	color: var(--color-action-text); /* full-strength pairing on the hover ground (§5) */
}

.service-row__link:hover .service-row__arrow,
.service-row__link:focus-visible .service-row__arrow {
	transform: translateX(var(--space-1)); /* 4px */
}

@media (min-width: 768px) {
	.service-row__link {
		grid-template-columns: 3.5rem minmax(0, 1fr) auto;
		align-items: center;
		padding-block: var(--space-6);
	}
}

/* --- FR-018: numbered editorial process — thin separators, no cards --- */

.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--border-thin) solid var(--color-border);
}

.steps__item {
	margin: 0;
	min-width: 0;
	padding: var(--space-5) 0;
	background: transparent;
	border-radius: 0;
	border-bottom: var(--border-thin) solid var(--color-border);
	overflow-wrap: break-word;
}

.steps__index {
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-4xl); /* prominent 01–06 */
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-muted); /* measured pairing, visual-system §5 */
}

.steps__item h3,
.steps__title {
	margin-bottom: var(--space-2);
	font-size: var(--text-xl);
}

.steps__item p,
.steps__text {
	color: var(--color-text-muted);
	margin-bottom: 0;
}

/* Homepage process rows: numeral left, copy right (editorial ledger).
 * `:not(.process-step)` keeps the 005 two-column ledger for plain step lists
 * while the 006 expandable `<details>` rows own their own summary grid. */
@media (min-width: 768px) {
	.section--process .steps__item:not(.process-step) {
		display: grid;
		grid-template-columns: 5rem minmax(0, 1fr);
		column-gap: var(--space-6);
		align-items: start;
	}

	.section--process .steps__item:not(.process-step) .steps__index {
		grid-column: 1;
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}

	.section--process .steps__item:not(.process-step) .steps__title,
	.section--process .steps__item:not(.process-step) .steps__text {
		grid-column: 2;
	}

	.section--process .steps__item:not(.process-step) .steps__title {
		grid-row: 1;
	}

	.section--process .steps__item:not(.process-step) .steps__text {
		grid-row: 2;
	}
}

/* --- FR-019: large human statements, dark surface (inverse pairings) --- */

.statements {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	border-top: var(--border-thin) solid var(--color-border-strong);
}

.statement {
	min-width: 0;
	padding: var(--space-6) 0;
	border-bottom: var(--border-thin) solid var(--color-border-strong);
	overflow-wrap: break-word;
}

.statement__title {
	margin-bottom: var(--space-3);
	font-family: var(--font-display);
	font-size: var(--text-5xl); /* 36 → 48px large statements */
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-inverse); /* measured pairing, visual-system §5 */
}

.statement__text {
	margin-bottom: 0;
	max-width: var(--reading-max);
	font-size: var(--text-lg);
	color: var(--color-text-inverse-muted); /* measured pairing, visual-system §5 */
}

@media (min-width: 1024px) {
	.statements {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-9);
	}
}

/* --- FR-017 / research R9: `.project-item` is DORMANT — the rules exist
 * for the reserved interaction type 3 (project hover: image scale
 * 1.02–1.04 + metadata shift) but there are ZERO instances at launch: no
 * markup, no anchor, no "See Our Work" anywhere (quickstart V5). --- */

.project-item {
	display: block;
	min-width: 0;
	padding-top: var(--space-5);
	border-top: var(--border-thin) solid var(--color-border);
}

.project-item__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-card);
}

.project-item__media img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	transition: transform var(--duration-normal) var(--ease-standard);
}

.project-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2) var(--space-5);
	margin-top: var(--space-4);
}

.project-item__title {
	margin-bottom: 0;
	font-size: var(--text-3xl);
}

.project-item__category {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted); /* measured pairing, visual-system §5 */
}

.project-item__desc {
	color: var(--color-text-muted);
	margin-bottom: 0;
}

.project-item:hover .project-item__media img,
.project-item:focus-within .project-item__media img {
	transform: scale(1.03); /* reserved range 1.02–1.04 (type 3) */
}

.project-item:hover .project-item__meta,
.project-item:focus-within .project-item__meta {
	transform: translateX(var(--space-1));
}

/* =====================================================================
 * .featured-image — placeholder reserves the box in every state
 * =================================================================== */

.featured-image {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(135deg, var(--color-neutral-1), var(--color-bg));
	border: var(--border-default);
}

.featured-image__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text); /* measured pairing, visual-system §5 */
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.featured-image img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* =====================================================================
 * .article-list / .article-card — Insights listing
 * =================================================================== */

.article-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-7);
}

.article-list > * {
	min-width: 0;
}

.article-card article {
	display: grid;
	gap: var(--space-5);
}

.article-card__media {
	display: block;
	text-decoration: none;
}

.article-card__title {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-2);
}

.article-card__title a {
	color: inherit;
	text-decoration: none;
}

.article-card__title a:hover {
	color: var(--color-action);
	text-decoration: underline;
}

.article-card__excerpt {
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

.article-card__more {
	font-weight: var(--weight-medium);
}

.archive-intro {
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	max-width: var(--container-reading);
	margin-bottom: 0;
}

.archive-empty {
	padding: var(--space-8) var(--space-6);
	text-align: center;
	color: var(--color-text); /* measured pairing, visual-system §5 */
	background: var(--color-surface-alt);
	border: var(--border-default);
	border-radius: var(--radius-card);
}

.article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-8);
}

.article__tags a {
	display: inline-block;
	padding: var(--space-1) var(--space-4);
	background: var(--color-surface-muted);
	border-radius: var(--radius-sm); /* controls ≤ 4px (visual-system §7) */
	font-size: var(--text-sm);
	text-decoration: none;
}

.article__tags a:hover {
	background: var(--color-surface-alt);
}

@media (min-width: 768px) {
	.article-card article {
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
		align-items: center;
	}
}

/* Pagination */
.navigation.pagination {
	margin-top: var(--space-9);
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
	padding: var(--space-2) var(--space-4);
	border: var(--border-default);
	border-radius: var(--radius-button);
	text-decoration: none;
	transition: var(--transition-hover);
}

.navigation.pagination .page-numbers:hover {
	background: var(--color-surface-alt);
}

.navigation.pagination .current {
	background: var(--color-action);
	border-color: var(--color-action);
	color: var(--color-action-text);
}

/* =====================================================================
 * .cta-block — shared in-page conversion section (parts/cta-block.php).
 * Section 8 of the homepage: the closing moment of the story (FR-019) —
 * dark ground (`--surface-cta`), large display headline, dominant primary
 * CTA, inverse pairings only (visual-system §5: #FFFFFF on #141414 =
 * 18.42:1). Rendered from `parts/footer.php` on all seven destinations.
 * =================================================================== */

.cta-block {
	/* Hairline separates the two adjacent dark moments (trust → CTA). */
	border-top: var(--border-thin) solid var(--color-border-strong);
}

.cta-block__copy {
	min-width: 0;
}

.cta-block__title {
	margin-bottom: var(--space-4);
	font-size: var(--text-6xl); /* 48 → 72px display headline */
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-inverse);
}

.cta-block__text {
	color: var(--color-text-inverse-muted); /* measured pairing, visual-system §5 */
	font-size: var(--text-lg);
	max-width: var(--reading-max);
	margin-bottom: 0;
}

.cta-block__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}

/* =====================================================================
 * .not-found — friendly 404
 * =================================================================== */

.not-found {
	text-align: center;
}

.not-found__code {
	font-family: var(--font-display);
	font-size: var(--text-6xl);
	font-weight: var(--weight-bold);
	line-height: 1;
	color: var(--color-text-muted); /* decorative code — §5 pairing */
	letter-spacing: var(--tracking-tight);
	margin-bottom: var(--space-3);
}

.not-found__text {
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	max-width: var(--container-reading);
	margin-inline: auto;
}

.not-found form {
	max-width: var(--reading-max);
	margin: var(--space-7) auto;
	display: flex;
	gap: var(--space-3);
}

.not-found .wp-block-search__input,
.not-found input[type="search"] {
	flex: 1;
}

.not-found__links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-5);
}

/* =====================================================================
 * Small shared utilities used by page templates
 * =================================================================== */

.page-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-7);
	margin-bottom: 0;
}

.path-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.path-list a {
	font-weight: var(--weight-medium);
}

/* =====================================================================
 * 006 US1 — statements, eyebrows, badges (homepage-composition §6,
 * visual-system §3/§7). Radius 0 for editorial blocks, ≤4px controls.
 * =================================================================== */

.badge {
	display: inline-block;
	padding: var(--space-2) var(--space-4);
	border: var(--border-thin) solid currentColor;
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	line-height: 1;
}

.statement {
	margin-bottom: var(--space-5);
	max-width: 18ch;
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: var(--weight-display);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: inherit;
}

.statement--display {
	max-width: 22ch;
}

.statement__support {
	max-width: var(--reading-max);
	margin-bottom: 0;
	font-size: var(--text-lg);
	/* Measured pairing, visual-system §5 — never opacity (contrast is exact). */
	color: var(--color-text-muted);
}

/* Revealing words (FR-012): the statement's words lift in on reveal.
 * Default state is VISIBLE — only `html.js-reveal` opts into the pending
 * state, and reduced motion zeroes the timing (interaction-motion §3.1). */
.statement--words .word {
	display: inline-block;
}

.js-reveal [data-reveal] .statement--words .word {
	opacity: 0;
	transform: translateY(0.4em);
}

.js-reveal [data-reveal].is-revealed .statement--words .word {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--duration-normal) var(--ease-standard),
		transform var(--duration-normal) var(--ease-standard);
	/* One reveal per section — no stagger, no chaining (interaction-motion §3.1). */
}

/* Inline highlight of the stored `highlight_text` (FR-012). */
.highlight {
	background: transparent;
	color: inherit;
	box-shadow: inset 0 -0.32em 0 rgb(255 255 255 / 0.28);
	padding-inline: 0.06em;
}

.section--problem .highlight {
	box-shadow: inset 0 -0.32em 0 rgb(252 82 64 / 0.85); /* coral accent moment on dark */
}

/* =====================================================================
 * 006 US1/US2 — Opportunity highlight word (FR-013) + marquee strip
 * (FR-021, ≤2 instances, slow constant speed, none under reduced motion)
 * =================================================================== */

.highlight-word {
	margin: var(--space-6) 0 0;
	font-family: var(--font-display);
	font-size: var(--text-hero);
	font-weight: var(--weight-display);
	line-height: 1;
	letter-spacing: var(--tracking-tighter);
}

.highlight-word__inner {
	display: inline-block;
	color: var(--color-ink);
	/* Level 2: the final word animates into a different colour/position as
	 * the section reveals. CSS-only — no scroll handler, works JS-off. */
	transform: translateX(0);
}

.js-reveal [data-reveal] .highlight-word__inner {
	opacity: 0.35;
	transform: translateX(-0.06em) skewX(-6deg);
}

.js-reveal [data-reveal].is-revealed .highlight-word__inner {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--duration-normal) var(--ease-standard),
		transform calc(var(--duration-normal) * 2) var(--ease-standard);
	color: var(--accent-coral);
}

.marquee {
	overflow: hidden;
	padding-block: var(--space-5);
	background: var(--surface-opportunity);
	border-block: var(--border-thin) solid rgb(20 20 20 / 0.25);
}

.marquee__track {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	width: max-content;
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--weight-display);
	letter-spacing: var(--tracking-tight);
	text-transform: uppercase;
	color: var(--color-ink);
	white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
	.marquee__track {
		animation: marquee-slide 26s linear infinite;
	}
}

@keyframes marquee-slide {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* =====================================================================
 * 006 US1 — hero composition (FR-011): layered small/medium details and a
 * fast LOAD entrance sequence. Never `data-reveal`, never scroll-animated.
 * Default state is fully visible; the keyframes only run under
 * `prefers-reduced-motion: no-preference`, so reduced motion and JS-off
 * both land on the visible state (SC-007/SC-010).
 * =================================================================== */

.hero__inner {
	position: relative;
}

.hero__title,
.hero__eyebrow,
.hero__lede,
.hero__actions,
.hero__visual {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	html.js .hero__eyebrow {
		animation: hero-rise calc(var(--duration-normal) * 1.5) var(--ease-standard) both;
	}

	html.js .hero__title {
		animation: hero-rise calc(var(--duration-normal) * 2) var(--ease-standard) both;
		animation-delay: calc(var(--duration-fast) * 0.5);
	}

	html.js .hero__lede {
		animation: hero-rise calc(var(--duration-normal) * 1.5) var(--ease-standard) both;
		animation-delay: var(--duration-normal);
	}

	html.js .hero__actions {
		animation: hero-rise calc(var(--duration-normal) * 1.5) var(--ease-standard) both;
		animation-delay: calc(var(--duration-normal) * 1.5);
	}

	html.js .hero__visual {
		animation: hero-rise calc(var(--duration-normal) * 2) var(--ease-standard) both;
		animation-delay: calc(var(--duration-normal) * 2);
	}
}

@keyframes hero-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.hero__visual {
	margin: var(--space-8) 0 0;
	max-width: 46rem;
}

.hero__visual-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}

.hero__caption {
	margin-top: var(--space-3);
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* Layered small detail: a stamp-like tag tucked beside the headline. */
.hero__badge {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	transform: rotate(4deg);
}

@media (max-width: 767px) {
	.hero__badge {
		position: static;
		display: inline-block;
		margin-bottom: var(--space-5);
		transform: none;
	}
}

/* =====================================================================
 * 006 US2 — numbered editorial service rows (FR-014): row ground change,
 * number move, arrow reveal, supporting image reveal, slight text shift.
 * Explicitly card-free. The ground/ink pair comes from the SECTION's action
 * tokens, so the moment is accent-aware by construction (FR-001).
 * =================================================================== */

.service-row__media {
	display: none;
	overflow: hidden;
	border-radius: var(--radius-card);
}

.service-row__media-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-normal) var(--ease-standard);
}

@media (min-width: 768px) {
	.service-row__media {
		display: block;
		width: 7.5rem;
		height: 4.5rem;
		opacity: 0;
		transform: translateY(var(--space-2));
		transition:
			opacity var(--duration-normal) var(--ease-standard),
			transform var(--duration-normal) var(--ease-standard);
	}
}

/* Hover/focus: number shifts, arrow appears and moves, image reveals,
 * text shifts slightly — all at ≈140ms, all pure CSS (FR-007/FR-014). */
.service-row__link:hover .service-row__index,
.service-row__link:focus-visible .service-row__index {
	transform: translateX(var(--space-1));
	color: inherit;
}

.service-row__index {
	display: inline-block;
	transition:
		transform var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}

.service-row__link:hover .service-row__name,
.service-row__link:focus-visible .service-row__name {
	transform: translateX(var(--space-1));
}

.service-row__name {
	display: block;
	transition: transform var(--duration-fast) var(--ease-standard);
}

.service-row__link:hover .service-row__media,
.service-row__link:focus-visible .service-row__media {
	opacity: 1;
	transform: none;
}

.service-row__link:hover .service-row__media-img,
.service-row__link:focus-visible .service-row__media-img {
	transform: scale(1.04);
}

.service-row__arrow {
	opacity: 0.55; /* decorative (aria-hidden); full strength on hover/focus */
}

.service-row__link:hover .service-row__arrow,
.service-row__link:focus-visible .service-row__arrow {
	opacity: 1;
}

/* =====================================================================
 * 006 US2 — Selected Work editorial list (FR-015/FR-016): large offset
 * imagery, title always visible, subtle hover. NOT a three-column grid,
 * NO cursor-following effects.
 * =================================================================== */

.project-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-9);
}

.project-item {
	margin: 0;
	min-width: 0;
}

.project-item__link {
	display: grid;
	gap: var(--space-4);
	color: inherit;
	text-decoration: none;
	overflow-wrap: break-word;
}

.project-item__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-card);
	background: var(--color-surface-muted);
}

.project-item__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition:
		transform var(--duration-normal) var(--ease-standard),
		filter var(--duration-normal) var(--ease-standard);
}

.project-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2) var(--space-5);
	transition: transform var(--duration-fast) var(--ease-standard);
}

.project-item__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-5xl);
	font-weight: var(--weight-display);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}

.project-item__category {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted); /* exact §5 pairing, not opacity */
}

.project-item__arrow {
	margin-inline-start: auto;
	font-size: var(--text-xl);
	transition: transform var(--duration-fast) var(--ease-standard);
}

.project-item__desc {
	margin: 0;
	max-width: var(--reading-max);
	color: var(--color-text-muted); /* exact §5 pairing, not opacity */
}

.project-item__link:hover .project-item__img,
.project-item__link:focus-visible .project-item__img {
	transform: scale(1.03); /* subtle, reserved range 1.02–1.04 */
}

.project-item__link:hover .project-item__meta,
.project-item__link:focus-visible .project-item__meta {
	transform: translateX(var(--space-1));
}

.project-item__link:hover .project-item__arrow,
.project-item__link:focus-visible .project-item__arrow {
	transform: translateX(var(--space-2));
}

/* Offset composition ≥1024: alternate items hang right (editorial, FR-004). */
@media (min-width: 1024px) {
	.project-item:nth-child(even) .project-item__link {
		margin-inline-start: 18%;
	}

	.project-item:nth-child(odd) .project-item__link {
		margin-inline-end: 18%;
	}
}

/* =====================================================================
 * 006 US2 — Process: expandable rows (mobile/JS-off, native <details>) and
 * the active-step state driven by reveal.js (FR-017, no scrolljacking).
 * =================================================================== */

.process-step {
	margin: 0;
	padding: 0;
	border-bottom: var(--border-thin) solid var(--color-border);
}

.process-step__details {
	margin: 0;
}

.process-step__summary {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5) 0;
	cursor: pointer;
	list-style: none;
	min-height: var(--tap-target);
}

.process-step__summary::-webkit-details-marker {
	display: none;
}

.process-step__toggle {
	position: relative;
	width: var(--space-5);
	height: var(--space-5);
	flex: none;
}

.process-step__toggle::before,
.process-step__toggle::after {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: calc(var(--border-thin) * 2);
	background: currentColor;
	content: "";
	transform: translateY(-50%);
	transition: transform var(--duration-fast) var(--ease-standard);
}

.process-step__toggle::after {
	transform: translateY(-50%) rotate(90deg);
}

.process-step__details[open] .process-step__toggle::after {
	transform: translateY(-50%) rotate(0deg);
}

.process-step__details .steps__text {
	padding-bottom: var(--space-5);
	margin: 0;
	max-width: var(--reading-max);
}

/* Desktop ≥1024: the summary is always "open" in spirit — the active step
 * (set by reveal.js) is emphasised while the aside column sticks. */
.process-step.is-active .steps__index {
	color: inherit;
}

.process-step.is-active .process-step__summary {
	font-weight: var(--weight-medium);
}

@media (min-width: 1024px) {
	.process-step__summary {
		padding-block: var(--space-6);
	}
}

/* =====================================================================
 * 006 US1 — Why Us points (FR-018): 3–5 human points, numbers, no cards.
 * =================================================================== */

.why-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-6);
	grid-template-columns: minmax(0, 1fr);
}

.why-point {
	min-width: 0;
	padding-top: var(--space-5);
	border-top: var(--border-thin) solid var(--color-border);
	overflow-wrap: break-word;
}

.why-point__number {
	display: block;
	margin-bottom: var(--space-3);
	font-size: var(--text-5xl);
	color: var(--color-text-muted); /* exact §5 pairing, not opacity */
}

.why-point__title {
	margin-bottom: var(--space-3);
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--weight-display);
	letter-spacing: var(--tracking-tight);
	color: inherit;
}

.why-point__text {
	margin: 0;
	max-width: 36ch;
	color: var(--color-text-muted); /* exact §5 pairing, not opacity */
}

@media (min-width: 768px) {
	.why-points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.why-points {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
		column-gap: var(--space-7);
	}
}

.why-visual {
	margin: var(--space-8) 0 0;
	max-width: 44rem;
}

.why-visual__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}

/* =====================================================================
 * 006 US1 — Final CTA composition (FR-019/FR-020): dark + accent, controlled
 * large type, animated decorative details, ONE dominant booking action.
 * =================================================================== */

.cta-composition {
	position: relative;
	display: grid;
	gap: var(--space-5);
	max-width: 60rem;
}

.cta-composition__badge {
	justify-self: start;
	color: var(--accent-yellow);
}

.cta-composition__title {
	margin: 0;
	max-width: 16ch;
	font-size: var(--text-display);
	font-weight: var(--weight-display);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-inverse);
}

.cta-composition__text {
	margin: 0;
	max-width: var(--reading-max);
	font-size: var(--text-lg);
	color: var(--color-text-inverse-muted);
}

.cta-composition__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-2);
}

/* Decorative details: two small accent marks that drift slowly in. They are
 * `aria-hidden`, off under reduced motion and add no content risk. */
.cta-composition__deco {
	position: absolute;
	display: block;
	pointer-events: none;
}

.cta-composition__deco--1 {
	top: calc(var(--space-6) * -0.5);
	inset-inline-end: 0;
	width: var(--space-9);
	height: var(--space-9);
	background: var(--accent-blue);
	border-radius: var(--radius-full);
	mix-blend-mode: screen;
	opacity: 0.7;
}

.cta-composition__deco--2 {
	bottom: 0;
	inset-inline-end: 18%;
	width: var(--space-6);
	height: var(--space-6);
	background: var(--accent-yellow);
	transform: rotate(18deg);
	opacity: 0.85;
}

@media (prefers-reduced-motion: no-preference) {
	.cta-composition__deco--1 {
		animation: deco-drift calc(var(--duration-normal) * 10) var(--ease-standard) infinite alternate;
	}

	.cta-composition__deco--2 {
		animation: deco-drift calc(var(--duration-normal) * 8) var(--ease-standard) infinite alternate-reverse;
	}
}

@keyframes deco-drift {
	from {
		transform: translateY(0) rotate(0deg);
	}
	to {
		transform: translateY(var(--space-3)) rotate(12deg);
	}
}

@media (max-width: 767px) {
	.cta-composition__deco {
		display: none; /* reduced overlap/animation complexity on mobile (FR-050) */
	}
}

/* =====================================================================
 * 006 US2/US1 — site-wide microinteraction sweep (FR-007, interaction-motion §2)
 * =================================================================== */

/* Buttons: background/foreground shift + arrow translateX ≈140ms. */
.button__arrow {
	display: inline-block;
	font-family: var(--font-body);
	transition: transform var(--duration-fast) var(--ease-standard);
}

.button:hover .button__arrow,
.button:focus-visible .button__arrow,
a[data-booking]:hover .button__arrow,
a[data-booking]:focus-visible .button__arrow {
	transform: translateX(var(--space-1));
}

/* Numbers animate into position when their section reveals (Level 1). */
.js-reveal [data-reveal] .numeral {
	opacity: 0.4;
	transform: translateY(var(--space-1));
}

.js-reveal [data-reveal].is-revealed .numeral {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--duration-normal) var(--ease-standard),
		transform var(--duration-normal) var(--ease-standard);
}

/* Focus mirrors hover, but with a NON-motion visible outline (FR-052): the
 * outline itself never animates — only colours/translates do. */
.button:focus-visible,
.service-row__link:focus-visible,
.project-item__link:focus-visible,
.process-step__summary:focus-visible,
.nav-menu a:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

/* Links: underline draws left → right (handled in base.css via background). */

/* Menu links: subtle surface hover (nav.js `is-open` pattern untouched). */
.nav-menu a:hover,
.nav-menu a:focus-visible {
	background: var(--color-surface-alt);
}

/* =====================================================================
 * 006 US4 — global reduced-motion sweep (FR-051, SC-007): beyond the
 * token-duration zeroing in theme-tokens.css, these are the animations that
 * cannot be expressed as tokens. Hover/focus feedback survives through
 * colour, underline and outline — 100% of content and function is kept.
 * =================================================================== */

@media (prefers-reduced-motion: reduce) {
	.marquee__track,
	.cta-composition__deco--1,
	.cta-composition__deco--2,
	html.js .hero__eyebrow,
	html.js .hero__title,
	html.js .hero__lede,
	html.js .hero__actions,
	html.js .hero__visual {
		animation: none !important;
	}

	.js-reveal [data-reveal],
	.js-reveal [data-reveal] .numeral,
	.js-reveal [data-reveal] .statement--words .word,
	.js-reveal [data-reveal] .highlight-word__inner {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.process__progress-fill {
		transition: none !important;
	}
}

/* Offscreen/idle pause (FR-035) — reveal.js toggles `.is-idle`. */
.is-idle .marquee__track,
.is-idle .cta-composition__deco--1,
.is-idle .cta-composition__deco--2 {
	animation-play-state: paused;
}

/* 006 US4 (T050) — touch behaviour: rows stay fully legible without hover,
 * supporting imagery appears on focus/tap targets, tap targets stay ≥44px. */
@media (hover: none) {
	.service-row__link {
		padding-block: var(--space-5);
	}

	.service-row__media {
		display: none; /* no hover-only content on touch — the copy is enough */
	}

	.project-item__link:hover .project-item__img {
		transform: none;
	}
}

/* 006 US4 (T051) — reduced-motion sweep: sticky-scroll choreography and
 * scroll-linked transforms become immediate, static presentation. Hover and
 * focus feedback SURVIVES through colour, underline and outline only, so
 * 100% of content and functionality is preserved (FR-051, SC-007). */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.process__aside {
		position: static;
	}

	.service-row__link,
	.service-row__index,
	.service-row__name,
	.service-row__media,
	.service-row__media-img,
	.service-row__arrow,
	.project-item__img,
	.project-item__meta,
	.project-item__arrow,
	.button__arrow,
	.link__arrow {
		transition: none !important;
	}

	[style*="transform: translate3d"] {
		transform: none !important;
	}
}

/* Summary grid hygiene: the numeral/title/toggle are the three columns, so
 * none of them keeps block-level margins inside `<summary>`. */
.process-step__summary .steps__index,
.process-step__summary .steps__title {
	margin-bottom: 0;
}

.process-step__summary .steps__title {
	display: block;
	min-width: 0;
	overflow-wrap: break-word;
}