/*
 * Component library (002 T007/T027/T032; 008 T008): one named section per
 * component class family, per contracts/components.md §1 and research R3 —
 * re-skinned for the site-wide home-dark system (008 contracts/visual-system
 * §3: hairline borders, tone separation, 12–16px radii, pill CTAs).
 *
 * 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) and the homepage-only `dh-*` rules.
 *
 * Every value is a semantic token (design-tokens.md §3): no raw palette 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 = accent ground / ink label; hover
 * brightens to the hover accent (008 visual-system §2). */
.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: var(--color-text);
	border-color: var(--color-control-line); /* control boundary ≥3:1 (1.4.11) */
}

.button--ghost:hover {
	background: var(--color-surface-alt);
	color: var(--color-text);
	border-color: var(--color-control-line);
}

/* Secondary button inside the raised dark band: light label, control-line
 * boundary, hover flips to the accent ground with the ink label. */
.section--dark .button--secondary {
	color: var(--color-text);
	border-color: var(--color-control-line);
}

.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); /* 12–16px container radius — inputs are not pills */
	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(--accent-amber); /* error signal — always beside its message text */
	border-inline-start-width: calc(var(--border-thin) * 3);
}

.field__error {
	display: block;
	color: var(--accent-amber); /* colour + text: the message itself carries meaning */
	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); /* 12–16px container radius (visual-system §3) */
}

/* 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;
	align-items: flex-start;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.form-actions__privacy {
	margin-bottom: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	max-width: var(--reading-max);
}

/* 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;
}

/* =====================================================================
 * .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(--accent-green); /* signal, always beside the message text */
	color: var(--color-text-strong);
}

.notice--error,
.status-message--error {
	background: var(--color-surface-alt);
	border-color: var(--accent-amber); /* signal, always beside the message text */
	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(--accent-green);
	color: var(--color-text-strong);
}

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

/* =====================================================================
 * .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-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-thin) solid var(--color-line);
	border-radius: var(--radius-lg);
	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-muted);
	background: transparent;
	border: var(--border-thin) solid var(--color-control-line); /* control ≥3:1 */
	border-radius: var(--pill);
	cursor: pointer;
	transition: var(--transition-hover);
}

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

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

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

/* Calendly's iframe is height:100% of this parent — min-height alone
 * collapses the widget to ~150px (cookie strip only). Profile embeds
 * need ~690px; event-type embeds ~630px (Calendly embed docs). */
.booking-dialog__frame {
	display: block;
	width: 100%;
	height: min(700px, calc(100dvh - 12rem));
	min-height: 630px;
	border: 0;
	background: var(--color-surface);
}

.booking-dialog__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	border: 0;
}

.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 ground, hairline rhythm --- */

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

.statement {
	min-width: 0;
	padding: var(--space-6) 0;
	border-bottom: var(--border-thin) solid var(--color-line-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-strong);
}

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

@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-surface-alt), var(--color-surface));
	border: var(--border-thin) solid var(--color-line);
}

.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); /* 12px container radius (008 visual-system §3) */
	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) —
 * raised dark surface (`--surface-cta`) + hairline, large display headline,
 * dominant primary CTA (008 visual-system §2/§3). 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-line-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-strong);
}

.cta-block__text {
	color: var(--color-text-muted);
	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 {
	/* Accent moment on the dark ground — the blue accent, not a retired hue. */
	box-shadow: inset 0 -0.32em 0 color-mix(in srgb, var(--accent-blue) 55%, transparent);
}

/* =====================================================================
 * 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-text);
	/* 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-blue);
}

.marquee {
	overflow: hidden;
	padding-block: var(--space-5);
	background: var(--color-surface);
	border-block: var(--border-thin) solid var(--color-line);
}

.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-text-muted);
	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): raised dark surface,
 * controlled large type, animated decorative details, ONE dominant booking
 * action. (The homepage now renders its own `dh-cta` composition; these
 * rules keep the shared component in the same dark language.)
 * =================================================================== */

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

.cta-composition__badge {
	justify-self: start;
	color: var(--accent-amber); /* signal chip — always beside its label text */
}

.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-strong);
}

.cta-composition__text {
	margin: 0;
	max-width: var(--reading-max);
	font-size: var(--text-lg);
	color: var(--color-text-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-amber);
	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: 3px solid var(--color-focus);
	outline-offset: 2px;
}

/* 008 T006 §13 — allowed small hover motion (visual-system §5): a ≤1px
 * button lift, guarded so reduced motion never runs it. */
@media (prefers-reduced-motion: no-preference) {
	.button:hover {
		transform: translateY(-1px);
	}
}

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

/* Menu links: the hover/focus treatment (surface pill, no underline bar)
 * lives with the nav in layout.css; nav.js `is-open` pattern untouched. */

/* =====================================================================
 * 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;
		filter: 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;
}

/* =====================================================================
 * 008 T007 — HOMEPAGE-ONLY `dh-*` rules.
 * The former 007 scoped stylesheet's §2/§4–§11/§14, merged here minus the
 * retired body-class scope and with every `--dh-*` reference mapped onto
 * the promoted semantic tokens (research R1 — one vocabulary, no `--dh-*`).
 * Inert on every other page: these class names exist only in
 * `front-page.php` markup (FR-012, research R6). Design source of truth:
 * 007 contracts/{visual-system,page-composition}.md.
 * =================================================================== */

.dh-section {
	padding-block: clamp(4.5rem, 2rem + 6vw, 9rem);
	border-top: var(--border-thin) solid var(--color-line);
}

.dh-section:first-child {
	border-top: 0;
}

.dh-section--bg {
	background-color: var(--color-bg);
}

.dh-section--surface {
	background-color: var(--color-surface);
}

.dh-section__header {
	max-width: var(--reading-max);
	margin-bottom: var(--space-7);
}

.dh-eyebrow {
	display: block;
	margin: 0 0 var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.dh-title {
	margin-bottom: var(--space-4);
	font-family: var(--font-display);
	font-size: clamp(1.5625rem, 1.08rem + 1.8vw, 2.7rem);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text);
}

.dh-lede {
	max-width: var(--reading-max);
	margin-bottom: var(--space-6);
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}

.dh-main a:not(.button) {
	color: var(--accent-blue-bright);
	text-decoration-color: color-mix(in srgb, var(--accent-blue-bright) 50%, transparent);
}

.dh-why a:not(.button) {
	color: var(--accent-blue-deep);
	text-decoration-color: color-mix(in srgb, var(--accent-blue-deep) 50%, transparent);
}

.dh-service-list,
.dh-work-list,
.dh-steps,
.dh-points,
.dh-stats__list,
.dh-status__tiles,
.dh-status__chips {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dh-service-list li + li,
.dh-work-list li + li,
.dh-steps li + li,
.dh-points li + li,
.dh-stats__list li + li,
.dh-status__tiles li + li,
.dh-status__chips li + li {
	margin-top: 0;
}

/* =====================================================================
 * 4. Split hero (FR-009, page-composition §2)
 * =================================================================== */

.dh-hero {
	padding-block: clamp(3.5rem, 2rem + 4vw, 6.5rem) clamp(3rem, 2rem + 3vw, 5rem);
}

.dh-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	align-items: center;
}

.dh-hero__copy {
	min-width: 0;
}

.dh-headline {
	max-width: 12em;
	margin: 0 0 var(--space-6);
	font-family: var(--font-display);
	font-size: clamp(2.16rem, 1.26rem + 3.6vw, 4.05rem);
	font-weight: var(--weight-display);
	line-height: 1.04;
	letter-spacing: var(--tracking-tight);
	color: var(--color-text);
	text-wrap: balance;
}

/* One keyword, underlined by a GRAPHIC bar — not text-decoration (FR-009) */
.dh-underline {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.dh-underline::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.06em;
	height: 0.1em;
	min-height: 4px;
	background: var(--accent-blue);
	border-radius: 2px;
}

.dh-hero .dh-lede {
	color: var(--color-text);
	opacity: 0.92;
}

.dh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

/* Trust strip — compact editorial metadata row (PRD §7) */
.dh-trust {
	margin: 0;
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-line);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* =====================================================================
 * 5. System status card (FR-010, page-composition §3) — CSS only
 * =================================================================== */

.dh-status {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 0;
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-1);
}

.dh-status__glow {
	position: absolute;
	inset: -30% -20% auto -20%;
	height: 80%;
	z-index: -1;
	background: radial-gradient(55% 60% at 50% 40%, color-mix(in srgb, var(--accent-blue) 32%, transparent), transparent 72%);
	pointer-events: none;
}

.dh-status__grid {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1px);
	background-size: 14px 14px;
	pointer-events: none;
}

.dh-status__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-line);
}

.dh-status__brand {
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.dh-status__state {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text); /* text label always beside the signal colour (FR-029) */
}

.dh-status__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent-green);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-green) 18%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
	.dh-status__dot {
		animation: dh-status-pulse 2.4s var(--ease-standard) infinite;
	}
}

@keyframes dh-status-pulse {
	0%,
	100% {
		opacity: 1;
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-green) 18%, transparent);
	}
	50% {
		opacity: 0.7;
		box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-green) 6%, transparent);
	}
}

.dh-status__tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

.dh-status__tile {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
	padding: var(--space-3);
	background: rgb(255 255 255 / 0.03);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
}

.dh-status__tile-label {
	font-size: 0.625rem;
	font-weight: var(--weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.dh-status__tile-value {
	font-family: var(--font-display);
	font-size: clamp(0.9375rem, 0.86rem + 0.36vw, 1.25rem);
	font-weight: var(--weight-display);
	letter-spacing: var(--tracking-tight);
	color: var(--accent-green); /* signal — always beside its text label */
	font-variant-numeric: tabular-nums;
}

.dh-status__tile--amber .dh-status__tile-value {
	color: var(--accent-amber);
}

.dh-status__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.dh-status__chip {
	padding: var(--space-1) var(--space-3);
	font-size: 0.625rem;
	font-weight: var(--weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	border: 1px solid var(--color-line);
	border-radius: var(--pill);
}

.dh-status__caption {
	margin: 0;
	font-size: 0.5625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	opacity: 0.8;
}

/* =====================================================================
 * 6. Stat band (FR-011, page-composition §4) — always rendered
 * =================================================================== */

.dh-stats {
	padding-block: clamp(2rem, 1.5rem + 1.5vw, 3.25rem);
}

.dh-stats__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
}

.dh-stats__item {
	min-width: 0;
}

.dh-stats__value {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 1.35rem + 1.8vw, 2.9375rem);
	font-weight: var(--weight-display);
	line-height: 1;
	letter-spacing: var(--tracking-tight);
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
}

.dh-stats__label {
	display: block;
	margin-top: var(--space-2);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* =====================================================================
 * 7. Editorial service list (FR-012, page-composition §5)
 * =================================================================== */

.dh-service {
	margin-bottom: var(--space-3);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: rgb(255 255 255 / 0.02);
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		background-color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

.dh-service__link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-4);
	padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem) clamp(1rem, 0.8rem + 1vw, 1.75rem);
	color: var(--color-text);
	text-decoration: none;
	border-radius: var(--radius);
}

.dh-service__number {
	font-family: var(--font-display);
	font-size: clamp(1rem, 0.9rem + 0.54vw, 1.35rem);
	font-weight: var(--weight-display);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
	transition: color var(--duration-fast) var(--ease-standard);
}

.dh-service__body {
	display: block;
	flex: 1 1 14rem;
	min-width: 0;
}

.dh-service__name {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1rem, 0.9rem + 0.63vw, 1.4375rem);
	font-weight: var(--weight-display);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text);
}

.dh-service__desc {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}

.dh-service__media {
	display: block;
	width: 7rem;
	flex: 0 0 auto;
}

.dh-service__img {
	display: block;
	width: 100%;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-line);
}

.dh-service__arrow {
	margin-inline-start: auto;
	color: var(--accent-blue-bright);
	font-size: 1.125rem;
	line-height: 1;
	transition: transform var(--duration-fast) var(--ease-standard);
}

/* Per-row interaction only — never all rows at once (US2.3) */
@media (prefers-reduced-motion: no-preference) {
	.dh-service:hover,
	.dh-service:focus-within {
		transform: translateY(-2px);
		border-color: var(--color-line-strong);
		background: rgb(255 255 255 / 0.04);
		box-shadow: var(--shadow-1);
	}

	.dh-service:hover .dh-service__number,
	.dh-service:focus-within .dh-service__number,
	.dh-service:hover .dh-service__name,
	.dh-service:focus-within .dh-service__name {
		color: var(--accent-blue-bright);
	}

	.dh-service:hover .dh-service__arrow,
	.dh-service:focus-within .dh-service__arrow {
		transform: translateX(6px);
	}
}

/* =====================================================================
 * 8. Opportunity statement (FR-013, page-composition §6)
 * =================================================================== */

.dh-opportunity__inner {
	max-width: 60rem;
}

.dh-statement {
	max-width: 18ch;
	margin: 0 0 var(--space-6);
	font-family: var(--font-display);
	font-size: clamp(1.6875rem, 1.08rem + 2.7vw, 3.15rem);
	font-weight: var(--weight-display);
	line-height: 1.08;
	letter-spacing: var(--tracking-tight);
	color: var(--color-text);
	text-wrap: balance;
}

.dh-statement__support {
	max-width: var(--reading-max);
	margin-bottom: var(--space-5);
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}

/* Decorative highlight token (aria-hidden in the template) */
.dh-mark {
	display: inline-block;
	margin-bottom: var(--space-7);
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 1.08rem + 1.26vw, 2rem);
	font-weight: var(--weight-display);
	letter-spacing: 0.04em;
	color: var(--accent-blue);
	border-bottom: 3px solid var(--accent-blue);
	padding-bottom: var(--space-1);
}

.dh-opportunity__folded {
	margin-top: var(--space-6);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-line);
}

.dh-eyebrow--label {
	margin-bottom: var(--space-3);
	color: var(--accent-blue-bright);
}

.dh-opportunity__problem {
	max-width: var(--reading-max);
	margin: 0;
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}

.dh-highlight {
	background: none;
	color: var(--accent-blue-bright);
	font-weight: var(--weight-bold);
}

/* =====================================================================
 * 9. Work showcase (FR-014) & process sequence (FR-015)
 * =================================================================== */

.dh-project {
	margin-bottom: var(--space-4);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: linear-gradient(180deg, rgb(255 255 255 / 0.03), rgb(255 255 255 / 0.01));
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

.dh-project__link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	padding: clamp(1rem, 0.8rem + 1vw, 1.75rem);
	color: var(--color-text);
	text-decoration: none;
}

.dh-project__media {
	display: block;
	flex: 1 1 20rem;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-line);
	background: rgb(255 255 255 / 0.02);
}

.dh-project__media:empty {
	display: none;
}

.dh-project__img {
	display: block;
	width: 100%;
}

.dh-project__body {
	display: block;
	flex: 1 1 16rem;
	min-width: 0;
}

.dh-project__title {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1rem, 0.9rem + 0.63vw, 1.4375rem);
	font-weight: var(--weight-display);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text);
}

.dh-project__meta {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-blue-bright);
}

.dh-project__desc {
	display: block;
	margin-top: var(--space-2);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}

.dh-project__arrow {
	margin-inline-start: auto;
	color: var(--accent-blue-bright);
	font-size: 1.125rem;
	transition: transform var(--duration-fast) var(--ease-standard);
}

@media (prefers-reduced-motion: no-preference) {
	.dh-project:hover,
	.dh-project:focus-within {
		transform: translateY(-2px);
		border-color: var(--color-line-strong);
	}

	.dh-project:hover .dh-project__arrow,
	.dh-project:focus-within .dh-project__arrow {
		transform: translateX(6px);
	}
}

/* Process — hairline-connected numbered sequence (page-composition §7) */
.dh-process__header {
	margin-bottom: var(--space-6);
}

.dh-steps {
	border-top: 1px solid var(--color-line);
}

.dh-step {
	border-bottom: 1px solid var(--color-line);
}

.dh-step__summary {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4);
	padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem) 0;
	cursor: pointer;
	list-style: none;
	color: var(--color-text);
	transition: color var(--duration-fast) var(--ease-standard);
}

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

.dh-step__number {
	font-family: var(--font-display);
	font-size: clamp(1rem, 0.9rem + 0.54vw, 1.35rem);
	font-weight: var(--weight-display);
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
	transition: color var(--duration-fast) var(--ease-standard);
}

.dh-step__title {
	font-family: var(--font-display);
	font-size: clamp(1rem, 0.9rem + 0.63vw, 1.4375rem);
	font-weight: var(--weight-display);
	letter-spacing: var(--tracking-tight);
}

.dh-step__toggle {
	position: relative;
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	color: var(--accent-blue-bright);
}

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

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

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

.dh-step__text {
	max-width: var(--reading-max);
	margin: 0 0 var(--space-5);
	padding-left: clamp(2.25rem, 2rem + 2vw, 3.5rem);
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}

@media (prefers-reduced-motion: no-preference) {
	.dh-step__summary:hover .dh-step__number,
	.dh-step__summary:focus-visible .dh-step__number {
		color: var(--accent-blue-bright); /* hovered/focused step gets the accent */
	}

	.dh-step__summary:hover,
	.dh-step__summary:focus-visible {
		color: var(--accent-blue-bright);
	}
}

/* =====================================================================
 * 10. The ONE warm inverse section + text-only founder (FR-016/017)
 *     The ONLY light surface in the system — homepage-only (008 FR-012,
 *     visual-system §2): interior pages never render it.
 * =================================================================== */

.dh-why {
	background: var(--color-surface-inverse);
	color: var(--color-text-inverse);
	border-top-color: var(--color-surface-inverse);

	/* local remap: every shared token that resolves inside this section */
	--color-text: var(--color-text-inverse);
	--color-text-strong: var(--color-text-inverse);
	--color-text-muted: var(--color-text-inverse-muted);
	--color-line: var(--color-border-inverse);
	--color-line-strong: var(--color-border-inverse-strong);
	--accent-blue: var(--accent-blue-deep);
	--color-border: var(--color-border-inverse);
	--color-border-strong: var(--color-border-inverse-strong);
	--color-action: var(--accent-blue-deep);
	--color-action-text: var(--color-white);
	--color-action-hover: var(--color-ink);
	--color-action-hover-text: var(--color-surface-inverse);
	--color-focus: var(--accent-blue-deep);
	--color-surface-alt: rgb(20 23 28 / 0.06);
}

.dh-why .dh-eyebrow {
	color: var(--color-text-inverse-muted);
}

.dh-why .dh-title,
.dh-why .dh-lede {
	color: var(--color-text-inverse);
}

.dh-why .dh-lede {
	color: var(--color-text-inverse-muted);
}

.dh-why .dh-main a:not(.button) {
	color: var(--accent-blue-deep);
}

.dh-points {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	margin-bottom: var(--space-8);
}

.dh-point {
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-inverse);
}

.dh-point__number {
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: var(--weight-display);
	letter-spacing: 0.14em;
	color: var(--color-text-inverse-muted);
	font-variant-numeric: tabular-nums;
}

.dh-point__title {
	margin-bottom: var(--space-2);
	font-family: var(--font-display);
	font-size: clamp(1rem, 0.9rem + 0.54vw, 1.25rem);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-inverse);
}

.dh-point__text {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-text-inverse-muted);
}

/* Founder moment: bordered, captioned, anchored by the owner portrait */
.dh-founder {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
	gap: var(--space-5);
	align-items: center;
	padding: var(--space-5) var(--space-6);
	border: 1px solid var(--color-border-inverse-strong);
	border-radius: var(--radius);
	background: none;
}

.dh-founder__img {
	display: block;
	width: 100%;
	max-width: 8.5rem;
	height: auto;
	aspect-ratio: 1024 / 1535;
	object-fit: cover;
	object-position: center top;
	border: 1px solid var(--color-border-inverse-strong);
	border-radius: var(--radius-sm);
}

@media (min-width: 768px) {
	.dh-founder {
		grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	}

	.dh-founder__img {
		max-width: 12rem;
	}
}

.dh-founder__caption {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.dh-founder__label {
	font-size: 0.625rem;
	font-weight: var(--weight-bold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-text-inverse-muted);
}

.dh-founder__name {
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 0.99rem + 0.72vw, 1.5625rem);
	font-weight: var(--weight-display);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-inverse);
}

.dh-founder__text {
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-text-inverse-muted);
}


/* =====================================================================
 * 11. Final CTA (FR-019) — the homepage closing moment (the shared
 *     footer skin lives in layout.css)
 * =================================================================== */

.dh-cta__inner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(1.25rem, 1rem + 2vw, 3.5rem);
	text-align: center;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.dh-cta__glow {
	position: absolute;
	inset: auto -20% -60% -20%;
	height: 120%;
	z-index: -1;
	background: radial-gradient(50% 55% at 50% 60%, color-mix(in srgb, var(--accent-blue) 28%, transparent), transparent 72%);
	pointer-events: none;
}

.dh-cta__badge {
	display: inline-block;
	margin-bottom: var(--space-5);
	padding: var(--space-1) var(--space-4);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	border: 1px solid var(--color-line);
	border-radius: var(--pill);
}

.dh-cta__title {
	max-width: 18ch;
	margin: 0 auto var(--space-5);
	font-family: var(--font-display);
	font-size: clamp(1.6875rem, 1.08rem + 2.7vw, 2.9375rem);
	font-weight: var(--weight-display);
	line-height: 1.08;
	letter-spacing: var(--tracking-tight);
	color: var(--color-text);
	text-wrap: balance;
}

.dh-cta__text {
	margin-inline: auto;
	color: var(--color-text-muted);
}

.dh-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-4);
}

@media (max-width: 767px) {
	.dh-status__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Font-swap reserve (plan.md Performance Goals: "no layout shift"):
	 * Bricolage renders this headline in FOUR lines at every phone width,
	 * while the fallback stack may fit three — so the swap used to push the
	 * lede/CTA/trust/status card down by ~41px after first paint (CLS 0.12).
	 * Reserving the four-line box keeps the first paint metric-stable in
	 * BOTH font states; nothing is hidden, only the box is pre-paid.
	 */
	.dh-headline {
		min-height: calc(4 * 1.04em);
	}

	.dh-service__media {
		flex: 1 1 100%;
		width: 100%;
	}

	/* Full-width stacked actions on phones (PRD §29 mobile) */
	.dh-hero__actions .button,
	.dh-hero__actions .booking-cta {
		display: flex;
		width: 100%;
	}

	.dh-hero__actions .booking-cta > .button {
		width: 100%;
	}
}

@media (min-width: 768px) {
	/* Split hero 55 / 45 — kept from tablet up (PRD §29) */
	.dh-hero__grid {
		grid-template-columns: 55fr 45fr;
		gap: clamp(2rem, 1rem + 3vw, 4rem);
	}

	.dh-stats__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-6);
	}

	.dh-stats__item + .dh-stats__item {
		padding-left: var(--space-6);
		border-left: 1px solid var(--color-line);
	}

	.dh-points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.dh-process__grid {
		display: grid;
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
		gap: clamp(2rem, 1rem + 3vw, 5rem);
		align-items: start;
	}

	.dh-process__header {
		position: sticky;
		top: calc(var(--header-height) + var(--space-5));
		margin-bottom: 0;
	}

	.dh-opportunity__inner {
		max-width: 72rem;
	}

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

/* Tablet: reduced headline/gaps/card dimensions where the split is kept */
@media (min-width: 768px) and (max-width: 1023px) {
	.dh-headline {
		font-size: clamp(1.8rem, 1.26rem + 2.7vw, 2.9375rem);
	}

	.dh-status {
		padding: 1.25rem;
	}

	.dh-section {
		padding-block: clamp(3.5rem, 2.5rem + 3vw, 6rem);
	}
}