/* ==========================================================================
   Shared
   ========================================================================== */

.section {
	padding-block: clamp(4rem, 7vw, 7.5rem);
	border-top: 1px solid var(--color-rule);
}

.eyebrow-row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.eyebrow-row__line {
	width: 34px;
	height: 1px;
	background: var(--gradient-accent);
	flex: none;
}

.cta-link {
	display: inline-flex;
	flex-direction: column;
	gap: 0.65em;
	align-items: flex-start;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-fg);
}

.cta-link__label {
	display: inline-flex;
	align-items: center;
	gap: 0.9em;
}

.cta-link__rule {
	display: block;
	width: 5.5rem;
	height: 1px;
	background: var(--gradient-accent);
	transition: width var(--motion-base) var(--ease-editorial);
}

.cta-link:hover .cta-link__rule,
.cta-link:focus-visible .cta-link__rule {
	width: 8rem;
}

.arrow {
	display: inline-block;
	width: 1.6em;
	height: 1px;
	background: currentColor;
	position: relative;
	vertical-align: middle;
	transition: width var(--motion-base) var(--ease-editorial);
}

.arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: -3px;
	width: 7px;
	height: 7px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

a:hover > .arrow,
a:focus-visible > .arrow {
	width: 2.2em;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--color-bg) 90%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-rule);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-block: clamp(1rem, 1.6vw, 1.5rem);
}

.site-header__mark {
	font-family: var(--font-body);
	font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem);
	font-weight: 300;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--color-fg);
}

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 6px;
	padding: 0.5rem;
}

.nav-toggle__line {
	width: 24px;
	height: 1px;
	background: var(--color-fg);
}

.site-nav .nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3rem);
}

.site-nav .nav__list a {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-fg-muted);
	white-space: nowrap;
	transition: color var(--motion-fast) var(--ease-editorial);
}

.site-nav .nav__list a:hover,
.site-nav .nav__list a:focus-visible {
	color: var(--color-fg);
}

/* CONTACT sits in an outlined box, as in the approved reference */
.site-nav .nav__list li:last-child a {
	border: 1px solid var(--color-rule-strong);
	padding: 0.85em 1.6em;
	color: var(--color-fg);
	transition: border-color var(--motion-base) var(--ease-editorial);
}

.site-nav .nav__list li:last-child a:hover,
.site-nav .nav__list li:last-child a:focus-visible {
	border-color: var(--color-accent-refraction);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	padding-block: clamp(3rem, 6vw, 6rem) clamp(3.5rem, 6vw, 6.5rem);
	overflow: hidden;
}

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	min-height: min(76vh, 680px);
}

.hero__copy .eyebrow {
	margin-bottom: clamp(1.25rem, 2vw, 2rem);
}

.hero__headline {
	font-size: var(--text-h1-hero);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.015em;
}

.hero__lead {
	max-width: 32ch;
	margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
	font-size: var(--text-body-lg);
	line-height: 1.6;
	color: var(--color-fg-muted);
}

.hero__copy .cta-link {
	margin-top: clamp(2rem, 3.5vw, 3rem);
}

.hero__object {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* One geometry box (WU-03.5). The stage is the only responsively sized element: it carries the
   width / margin / max-width the image used to carry, and the image simply fills it. Every
   light layer (edge mask, regional catches, resting presence, continuation field, floor) is
   absolute inside it, so all of them share exactly the rendered object's box, aspect ratio,
   origin and scale at every breakpoint. Before this, the effect layers were sized against the
   column (`.hero__object`) while the image was capped by max-width at ≤1024px — the edge mask
   stretched to the column and drew ghost edges beside the logo. */
.hero__signature-stage {
	position: relative;
	width: 110%;
	margin-inline: -5%;
	/* The image's intrinsic ratio; keeps the box stable before the image has loaded. */
	aspect-ratio: 535 / 340;
}

/* Continuation light field — sits BEHIND the canonical asset and carries its
   illumination past the source crop so the light never terminates on a rectangle.
   It only extends light; it never redraws the AW geometry. Insets are the stage-box
   equivalents of the former `.hero__object` insets (-14% / -10% of the column), so the
   desktop render is unchanged; at narrow widths it now scales with the object. */
.hero__signature-stage::before {
	content: "";
	position: absolute;
	inset: -14% -4.545%;
	z-index: 0;
	background:
		radial-gradient(40% 44% at 27% 54%, rgba(143, 127, 232, 0.22), transparent 72%),
		radial-gradient(36% 40% at 73% 47%, rgba(127, 216, 224, 0.18), transparent 72%),
		radial-gradient(24% 18% at 52% 12%, rgba(216, 185, 140, 0.13), transparent 74%);
	filter: blur(30px);
	pointer-events: none;
}

/* The approved Signature Object is a rendered PNG on a pure-black field. `screen`
   blending drops that black entirely so the object reads as an object in the page
   rather than a pasted image card — and keeps its exact geometry/material intact. */
/* The object itself stays crisp — the mask only dissolves the source crop's empty
   periphery (measured: luminous content sits within x 46–415 / y 10–336 of 535×340),
   so the asset's own near-black field can't read as a lifted rectangle under `screen`. */
.hero__object-picture {
	display: block;
}

.hero__object-img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	mix-blend-mode: screen;
	position: relative;
	z-index: 1;
	/* The source's field sits at 2–8 RGB, which `screen` would otherwise lift into a visible
	   rectangle on a true-black canvas. A contrast bump crushes that field to 0 while leaving
	   the object's highlights — and its geometry — untouched. No blur. */
	filter: contrast(1.14) brightness(1.02);
	-webkit-mask-image:
		linear-gradient(to right, transparent 0%, #000 10%),
		linear-gradient(to left, transparent 0%, #000 10%),
		linear-gradient(to bottom, transparent 0%, #000 5%),
		linear-gradient(to top, transparent 0%, #000 4%);
	mask-image:
		linear-gradient(to right, transparent 0%, #000 10%),
		linear-gradient(to left, transparent 0%, #000 10%),
		linear-gradient(to bottom, transparent 0%, #000 5%),
		linear-gradient(to top, transparent 0%, #000 4%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* Floor grounding beneath the object, as in the reference. Width is the stage-box equivalent
   of the former 62% of the column (0.62 / 1.1). */
.hero__signature-stage::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 4%;
	transform: translateX(-50%);
	width: 56.36%;
	height: 90px;
	background: radial-gradient(ellipse at center,
		rgba(150, 170, 220, 0.18) 0%,
		rgba(120, 140, 200, 0.07) 45%,
		transparent 72%);
	filter: blur(14px);
	pointer-events: none;
}

/* ==========================================================================
   The Shift
   ========================================================================== */

.the-shift__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.95fr) 1px minmax(0, 1fr);
	gap: clamp(1.75rem, 3.2vw, 3.5rem);
	align-items: stretch;
}

.the-shift__headline {
	font-size: clamp(1.75rem, 1.05rem + 2.4vw, 2.625rem);
	font-weight: 400;
	line-height: 1.22;
}

/* The approved copy is written as two lines and the reference sets it that way.
   The break is honoured from tablet up and released on narrow screens. */
.br-wide {
	display: none;
}

@media (min-width: 900px) {
	.br-wide {
		display: inline;
	}
}

.the-shift__rule {
	background: var(--color-rule-strong);
}

.the-shift__aside {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.1em;
	font-size: var(--text-body-lg);
	color: var(--color-fg-muted);
	line-height: 1.4;
}

.the-shift__aside p:last-child {
	color: var(--color-fg);
}

/* ==========================================================================
   KPI / Proof Strip
   ========================================================================== */

.kpi-strip {
	padding-block: clamp(2.75rem, 4.5vw, 4.5rem);
	border-top: 1px solid var(--color-rule);
	border-bottom: 1px solid var(--color-rule);
}

.kpi-strip__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kpi-module {
	text-align: center;
	padding-inline: clamp(0.75rem, 2vw, 2rem);
}

.kpi-module + .kpi-module {
	border-left: 1px solid var(--color-rule);
}

.kpi-module__figure {
	display: block;
	font-family: var(--font-body);
	font-size: var(--text-kpi);
	font-weight: 250;
	line-height: 1.05;
	letter-spacing: 0.01em;
	color: var(--color-fg);
	white-space: nowrap;
}

.kpi-module__label {
	display: block;
	margin-top: 0.85em;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--color-fg);
}

.kpi-module__detail {
	margin-top: 0.7em;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-fg-muted);
}

/* ==========================================================================
   Four Pillars
   ========================================================================== */

/* One shared grid with explicit upper / axis / lower rows (WU-03.1).

   In an auto-height grid every `1fr` row resolves to the SAME size — the tallest fr row's
   content — so the upper and lower rows are always equal regardless of how any pillar's copy
   wraps. The axis row between them holds both separator rules; the orbit spans all three rows
   and is centred, so the sphere centre sits exactly on the axis. No per-width pixel offsets. */
.pillars__grid {
	--pillars-gap: clamp(2rem, 3.5vw, 3.25rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 0.85fr) minmax(0, 1fr);
	grid-template-rows: 1fr 1px 1fr;
	grid-template-areas:
		"ul orbit ur"
		"axl orbit axr"
		"ll orbit lr";
	column-gap: clamp(1.5rem, 3vw, 3.5rem);
	align-items: center;
}

.pillar--ul { grid-area: ul; }
.pillar--ur { grid-area: ur; }
.pillar--ll { grid-area: ll; }
.pillar--lr { grid-area: lr; }

/* Upper pillars sit on the axis from above, lower ones hang from it below; the gap to the
   rule is padding on the pillar itself, so text height never moves the axis. */
.pillar--ul,
.pillar--ur {
	align-self: end;
	padding-bottom: var(--pillars-gap);
}

.pillar--ll,
.pillar--lr {
	align-self: start;
	padding-top: var(--pillars-gap);
}

.pillars__axis-rule {
	height: 1px;
	background: var(--color-rule);
}

.pillars__axis-rule--left { grid-area: axl; }
.pillars__axis-rule--right { grid-area: axr; }

.pillars__visual {
	grid-area: orbit;
	align-self: center;
}

.pillar {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	column-gap: clamp(0.75rem, 1.4vw, 1.25rem);
	align-items: start;
}

.pillar__index {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
	font-weight: 300;
	line-height: 1;
	color: var(--color-fg-dim);
}

.pillar__icon {
	width: clamp(38px, 3.2vw, 52px);
	height: auto;
	color: var(--color-accent-silver);
	opacity: 0.75;
	margin-top: 0.15em;
}

.pillar__name {
	font-size: var(--text-h3);
	font-weight: 400;
	line-height: 1.18;
}

.pillar__desc {
	margin-top: 0.9em;
	font-size: 0.9375rem;
	line-height: 1.62;
	color: var(--color-fg-muted);
	max-width: 32ch;
}

.pillar__more {
	display: inline-block;
	margin-top: 1.2em;
	color: var(--color-fg-muted);
}

.pillar__more:hover,
.pillar__more:focus-visible {
	color: var(--color-fg);
}

.pillars__orbit {
	width: 100%;
	height: auto;
	overflow: visible;
}

/* ==========================================================================
   In Practice — editorial mosaic
   ========================================================================== */

.in-practice__mosaic {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(clamp(170px, 15vw, 215px), auto));
	grid-template-areas:
		"a b c d"
		"a b e d";
	gap: clamp(0.75rem, 1.2vw, 1.25rem);
}

.case-card:nth-of-type(1) { grid-area: a; }
.case-card:nth-of-type(2) { grid-area: b; }
.case-card:nth-of-type(3) { grid-area: c; }
.case-card:nth-of-type(4) { grid-area: e; }
.case-card:nth-of-type(5) { grid-area: d; }

.case-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--color-bg);
	border: 1px solid var(--color-rule);
	padding: clamp(1.5rem, 2.2vw, 2.25rem);
	display: flex;
	flex-direction: column;
	transition: border-color var(--motion-base) var(--ease-editorial);
}

.case-card:hover,
.case-card:focus-within {
	border-color: var(--color-rule-strong);
}

/* Technical texture sits behind the copy and fades out toward the text side,
   so headings stay fully legible (WU-03 may bring these to life). */
.case-card__texture {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: cover;
	opacity: 1;
	-webkit-mask-image: linear-gradient(105deg, transparent 14%, rgba(0, 0, 0, 0.5) 44%, #000 74%);
	mask-image: linear-gradient(105deg, transparent 14%, rgba(0, 0, 0, 0.5) 44%, #000 74%);
	transition: transform var(--motion-slow) var(--ease-editorial),
		opacity var(--motion-slow) var(--ease-editorial),
		filter var(--motion-slow) var(--ease-editorial);
}

/* Every tile gets a distinct but coherent baseline response, matched for keyboard focus.
   Richer choreography is WU-03; these are restrained CSS-level states only. */
.case-card:nth-of-type(1):hover .case-card__texture,
.case-card:nth-of-type(1):focus-within .case-card__texture {
	transform: translate3d(-2%, -1.5%, 0) scale(1.05);
	opacity: 0.92;
}

.case-card:nth-of-type(2):hover .case-card__texture,
.case-card:nth-of-type(2):focus-within .case-card__texture {
	transform: translate3d(0, -3%, 0);
	opacity: 0.85;
}

.case-card:nth-of-type(3):hover .case-card__texture,
.case-card:nth-of-type(3):focus-within .case-card__texture {
	transform: translate3d(2%, -2%, 0) scale(1.07);
	filter: brightness(1.28) saturate(1.1);
}

.case-card:nth-of-type(4):hover .case-card__texture,
.case-card:nth-of-type(4):focus-within .case-card__texture {
	transform: translate3d(-3.5%, 0, 0) scale(1.03);
	filter: brightness(1.15);
}

.case-card:nth-of-type(5):hover .case-card__texture,
.case-card:nth-of-type(5):focus-within .case-card__texture {
	transform: scale(1.06);
	filter: brightness(1.22);
}

.case-card__name {
	font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);
	font-weight: 400;
	line-height: 1.2;
	max-width: 18ch;
}

.case-card__copy {
	margin-top: 0.9em;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--color-fg-muted);
	max-width: 30ch;
}

.case-card__more {
	margin-top: auto;
	padding-top: 1.5rem;
	color: var(--color-fg-muted);
}

.case-card:hover .case-card__more {
	color: var(--color-fg);
}

.case-card--feature .case-card__name {
	font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
}

/* ==========================================================================
   About
   ========================================================================== */

.about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) 1px minmax(0, 0.82fr) minmax(0, 0.9fr);
	gap: clamp(1.5rem, 2.6vw, 3rem);
	align-items: center;
	min-height: clamp(360px, 34vw, 540px);
}

.about__portrait {
	position: relative;
}

/* Delivered dark editorial portrait, used as-is — not cut out, not brightened, no frame.
   Its own background is already at/below the page black, so only the two edges where the
   frame clips the subject (left arm, bottom sweater) need dissolving. */
.about__portrait picture {
	display: block;
}

.about__portrait img {
	width: 100%;
	height: auto;
	display: block;
	-webkit-mask-image:
		linear-gradient(to right, transparent 0%, #000 11%),
		linear-gradient(to left, transparent 0%, #000 10%),
		linear-gradient(to bottom, transparent 0%, #000 10%),
		linear-gradient(to top, transparent 0%, #000 2%);
	mask-image:
		linear-gradient(to right, transparent 0%, #000 11%),
		linear-gradient(to left, transparent 0%, #000 10%),
		linear-gradient(to bottom, transparent 0%, #000 10%),
		/* Top edge relaxed to 2% so the crown isn't dimmed away; paired with the small
		   downward nudge below this recovers ~10–12px of hair/headroom without moving
		   the face, glasses, arm or watch in any meaningful way. */
		linear-gradient(to top, transparent 0%, #000 2%);
	transform: translateY(10px);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.about__rule {
	background: var(--color-rule-strong);
	align-self: stretch;
}

.about__headline {
	font-size: var(--text-h2);
	font-weight: 400;
	line-height: 1.14;
}

.about__body p {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-fg-muted);
	max-width: 34ch;
}

.about__body p + p {
	margin-top: 1.4em;
}

.about__body .cta-link {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* ==========================================================================
   Final CTA / Footer
   ========================================================================== */

.site-footer {
	padding-block: clamp(5rem, 9vw, 9rem) clamp(2.5rem, 4vw, 4rem);
	border-top: 1px solid var(--color-rule);
	text-align: center;
}

.site-footer__headline {
	font-size: clamp(2rem, 1.3rem + 3.1vw, 3.5rem);
	font-weight: 400;
	line-height: 1.18;
	/* WU-07.2: the approved "Compare Notes" line is longer than the original; 34ch keeps it at three
	   lines on desktop in both languages (typographic adjustment only — composition unchanged). */
	max-width: 34ch;
	margin-inline: auto;
	text-wrap: balance;
}

.site-footer .cta-link {
	align-items: center;
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.site-footer__meta {
	margin-top: clamp(4rem, 7vw, 7rem);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-rule);
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--color-fg-dim);
}

.site-footer__meta a:hover,
.site-footer__meta a:focus-visible {
	color: var(--color-fg);
}

/* WU-08.1: name + current roles as one stacked identity block; the roles line is subordinate to
   the name (same 12px meta scale, silver secondary text) and wraps at the separator on narrow
   screens. */
.site-footer__identity {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35em;
	text-align: left;
}

.site-footer__roles {
	color: var(--color-fg-muted);
	letter-spacing: 0.06em;
	text-wrap: balance;
}

/* WU-08.1: while the consent notice is shown it is fixed to the bottom edge; consent.js measures
   its real height into --consent-inset so the whole footer can scroll above it. 0 once decided. */
body {
	padding-bottom: var(--consent-inset, 0px);
}

/* WU-16 (A2, WCAG 2.2 SC 2.4.11) — whatever the browser scrolls into view (keyboard focus,
   in-page anchors) lands in the band between the sticky header and the fixed consent notice,
   never underneath either. Top: the header's own padding-block ×2 plus its tallest row (the
   outlined CONTACT link ≈ 2.6rem), with a little air. Bottom: the notice's measured height
   (0 once a choice is stored) plus the same air. No visual change. */
html {
	scroll-padding-top: calc(2 * clamp(1rem, 1.6vw, 1.5rem) + 3.25rem);
	scroll-padding-bottom: calc(var(--consent-inset, 0px) + 0.75rem);
}

/* WU-16.3 — while the first-visit notice is open, focus scrolls land instantly. Smooth scrolling
   moved a newly focused element through the notice for up to ~1.2s at 390px, so ordinary Tab
   cadence could outrun it and leave focus hidden underneath. Smooth scrolling returns once a
   choice is stored (the class is removed). No visual change. */
html:has(.consent.is-notice-open) {
	scroll-behavior: auto;
}

/* ==========================================================================
   Consent (WU-05) — notice + preferences dialog, dark editorial, WCAG 2.2 AA
   ========================================================================== */

.consent[hidden],
.consent__notice[hidden],
.consent__dialog[hidden],
.consent__backdrop[hidden] {
	display: none;
}

.consent__notice {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	background: color-mix(in srgb, var(--color-bg) 94%, transparent);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--color-rule-strong);
	padding-block: var(--space-3);
}

.consent__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.consent__text {
	max-width: 60ch;
}

.consent__eyebrow {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-accent-silver);
	margin-bottom: 0.6em;
}

.consent__copy {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-fg-muted);
}

.consent__copy a {
	color: var(--color-fg);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	flex-shrink: 0;
}

/* Reject and Accept: same size, same weight — equally easy. */
.consent__btn {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-fg);
	background: none;
	border: 1px solid var(--color-rule-strong);
	padding: 0.85em 1.4em;
	min-height: 44px;
	cursor: pointer;
	transition: border-color var(--motion-base) var(--ease-editorial), background-color var(--motion-base) var(--ease-editorial);
}

.consent__btn:hover {
	border-color: var(--color-accent-silver);
}

.consent__btn--primary {
	border-color: var(--color-accent-silver);
}

.consent__btn--ghost {
	border-color: transparent;
	color: var(--color-fg-muted);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.consent__btn:focus-visible,
.consent__close:focus-visible,
.consent__option input:focus-visible,
.site-footer__consent:focus-visible {
	outline: 2px solid var(--color-accent-refraction);
	outline-offset: 3px;
}

.consent__backdrop {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: rgba(0, 0, 0, 0.72);
}

.consent__dialog {
	position: fixed;
	z-index: 96;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(92vw, 34rem);
	max-height: 90vh;
	overflow: auto;
	background: var(--color-bg);
	border: 1px solid var(--color-rule-strong);
}

.consent__dialog-inner {
	position: relative;
	padding: var(--space-4);
}

.consent__options {
	list-style: none;
	margin: var(--space-3) 0 var(--space-4);
	padding: 0;
	border-top: 1px solid var(--color-rule);
}

.consent__option {
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-rule);
}

.consent__option-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.consent__option input {
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--color-accent-refraction);
	margin: 0;
}

.consent__option label {
	font-size: 0.9375rem;
	color: var(--color-fg);
}

.consent__option-desc {
	margin-top: 0.4em;
	padding-left: 1.85rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-fg-muted);
}

.consent__actions--dialog {
	justify-content: flex-end;
}

.consent__close {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	color: var(--color-fg-muted);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.consent__close:hover {
	color: var(--color-fg);
}

/* Footer control: reads like the meta line, is a real button. */
.site-footer__consent {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0.5em 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.site-footer__consent:hover {
	color: var(--color-fg);
}

@media (max-width: 760px) {
	.consent__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.consent__actions {
		justify-content: stretch;
	}

	.consent__btn {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1024px) {
	/* ---- Stacked-layout alignment system (WU-04.1, 2026-09-03) ----
	   One rule for every width where the Hero stacks (object above / text below):
	     focal / statement content  → centred
	     reading / detail content   → left-aligned on the shared --container-pad gutter
	   Hero (object, eyebrow, H1, lead, CTA) and The Shift's primary statement are focal and
	   centre; KPI modules were already centred; section markers (eyebrow rows) stay left as the
	   site-wide marker language; Pillar / In Practice / About copy stays left. Nothing else moves. */
	.hero__grid {
		grid-template-columns: 1fr;
		gap: clamp(2rem, 4vw, 3rem);
	}

	.hero__object {
		order: -1;
	}

	.hero__signature-stage {
		max-width: 460px;
		/* Optical centring: the approved object's luminous mass sits 8 % of its width left of the
		   box centre (luminance centroid x = 42.0 %, visible extent 46–413 of 535). The whole
		   stage — image and every light layer together — shifts right by 7 %, so the object
		   reads centred while WU-03.5's shared geometry box stays intact. */
		transform: translateX(7%);
	}

	.hero__copy {
		text-align: center;
		max-width: 36rem;
		margin-inline: auto;
	}

	.hero__lead {
		margin-inline: auto;
	}

	.hero__copy .cta-link {
		align-items: center;
	}

	.the-shift__grid {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	/* Section marker stays left; the primary editorial statement centres; the three state
	   statements sit in a centred max-width block and stay left-aligned inside it. */
	.the-shift__lead {
		width: 100%;
		max-width: 38rem;
		margin-inline: auto;
		text-align: center;
	}

	.the-shift__aside {
		width: 100%;
		max-width: 32rem;
		margin-inline: auto;
	}

	.the-shift__rule {
		height: 1px;
		width: 100%;
	}

	/* Single column: the active/hover 4px nudge would read as a stray left offset between
	   stacked pillar blocks, so the emphasis is colour only here. */
	html[data-motion] [data-pillars] .pillar.is-active,
	html[data-motion] [data-pillars] .pillar:hover,
	html[data-motion] [data-pillars] .pillar:focus-within {
		transform: none;
	}

	/* Below the three-column composition the shared axis no longer applies: switch
	   intentionally to a single column — orbit first, then 01 → 04 in reading order with a
	   rule between each — rather than letting the diagram deform. */
	.pillars__grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-template-areas: none;
		row-gap: 0;
	}

	.pillars__axis-rule {
		display: none;
	}

	.pillars__visual {
		grid-area: auto;
		order: -1;
		max-width: 320px;
		margin-inline: auto;
		margin-bottom: clamp(2.5rem, 5vw, 4rem);
	}

	.pillar--ul,
	.pillar--ur,
	.pillar--ll,
	.pillar--lr {
		grid-area: auto;
		align-self: auto;
		padding-block: 0;
	}

	.pillar + .pillar {
		border-top: 1px solid var(--color-rule);
		padding-top: var(--pillars-gap);
		margin-top: var(--pillars-gap);
	}

	.in-practice__mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
		grid-template-areas:
			"a a"
			"b c"
			"e d";
	}

	.about__grid {
		grid-template-columns: minmax(0, 0.85fr) 1px minmax(0, 1.15fr);
		grid-template-areas: none;
	}

	.about__body {
		grid-column: 1 / -1;
	}

	.kpi-strip__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: clamp(2rem, 4vw, 3rem);
	}

	.kpi-module:nth-child(odd) {
		border-left: 0;
	}

	.kpi-module:nth-child(-n + 2) {
		padding-bottom: clamp(2rem, 4vw, 3rem);
		border-bottom: 1px solid var(--color-rule);
	}
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 640px) {
	.site-header__inner {
		position: relative;
	}

	.nav-toggle {
		display: flex;
	}

	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--color-bg);
		border-bottom: 1px solid var(--color-rule);
		display: none;
	}

	.site-nav[data-open="true"] {
		display: block;
	}

	.site-nav .nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-2) var(--container-pad) var(--space-3);
	}

	.site-nav .nav__list a {
		display: block;
		padding-block: 1em;
		border-bottom: 1px solid var(--color-rule);
	}

	.site-nav .nav__list li:last-child a {
		border: 1px solid var(--color-rule-strong);
		text-align: center;
		margin-top: var(--space-2);
		padding: 1em;
	}

	.hero__signature-stage {
		max-width: 340px;
	}

	.kpi-strip__grid {
		grid-template-columns: 1fr;
	}

	.kpi-module + .kpi-module {
		border-left: 0;
		border-top: 1px solid var(--color-rule);
		padding-top: var(--space-4);
	}

	.kpi-module:nth-child(-n + 2) {
		padding-bottom: 0;
		border-bottom: 0;
	}

	/* Index + icon share the first row; the copy spans full width beneath them. WU-04 fix
	   (2026-09-03): the tracks were `auto auto`, and the full-width copy row spanning both
	   tracks stretched them to share its width (144px + 153px at 390), pushing the icon ~160px
	   away from the number. `auto 1fr` lets the second track absorb the span, so the icon sits
	   beside the number as intended. */
	.pillar {
		grid-template-columns: auto 1fr;
		justify-content: start;
		align-items: center;
		column-gap: var(--space-2);
	}

	.pillar > div {
		grid-column: 1 / -1;
		margin-top: var(--space-2);
	}

	.in-practice__mosaic {
		grid-template-columns: 1fr;
		grid-template-areas:
			"a"
			"b"
			"c"
			"e"
			"d";
	}

	.about__grid {
		grid-template-columns: 1fr;
	}

	.about__rule {
		display: none;
	}

	.about__portrait {
		max-width: 340px;
	}

	.site-footer__meta {
		flex-direction: column;
		align-items: center;
		gap: var(--space-1);
	}

	.site-footer__identity {
		align-items: center;
		text-align: center;
	}
}

/* ==========================================================================
   WU-03 — Interaction & Motion System
   Enhances the accepted WU-02 static composition. Every rule here is additive:
   with JS off, reduced motion, or a coarse pointer, the page renders exactly as
   accepted. Transforms/opacity only — no layout-affecting animation.
   ========================================================================== */

/* ---------- Reveal on enter ---------- */

[data-motion] .will-reveal {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity 900ms var(--ease-editorial), transform 900ms var(--ease-editorial);
}

[data-motion] .will-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

.case-card.will-reveal {
	transition-delay: 60ms;
}

/* ---------- Hero: specular edge reflection (WU-03.3) ----------
   The Signature Object is spatially fixed and carries no pointer response at all (WU-03.2's
   pointer sheen, base-life overlays and light-field parallax were rejected and removed). What
   remains is one idea: a narrow, bright specular band travels across the object and is masked
   by a derivative EDGE mask of the approved artwork, so only rims, bevels and internal
   glass/metal edges light up for a moment — a flash of reflected light on physical edges, not
   an overlay passing over the image. main.js drives the events (autonomous, irregular). */

.hero__edge {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	mix-blend-mode: plus-lighter;
	background-repeat: no-repeat;
	/* Band: 4% of a 400%-wide image ≈ 6% of the object width, soft-edged. Tinted per layer. */
	background-image: linear-gradient(
		var(--band-angle, 112deg),
		transparent 45.5%,
		var(--band-edge, rgba(255, 255, 255, 0)) 47.6%,
		var(--band-core, rgba(255, 255, 255, 1)) 49.5%,
		var(--band-core, rgba(255, 255, 255, 1)) 50.5%,
		var(--band-edge, rgba(255, 255, 255, 0)) 52.4%,
		transparent 54.5%
	);
	background-size: 400% 100%;
	background-position: 200% 0;
	/* Edge mask (luminance) — the only place light may land. */
	-webkit-mask-image: var(--edge-src);
	mask-image: var(--edge-src);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-source-type: luminance;
	mask-mode: luminance;
}

/* Regional catches intersect the edge mask with a soft region so one material area catches. */
.hero__edge--apex,
.hero__edge--violet,
.hero__edge--bevel,
.hero__edge--cyan {
	-webkit-mask-image: var(--edge-src), var(--region);
	mask-image: var(--edge-src), var(--region);
	-webkit-mask-size: 100% 100%, 100% 100%;
	mask-size: 100% 100%, 100% 100%;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	-webkit-mask-source-type: luminance, alpha;
	mask-mode: luminance, alpha;
}

/* Warm/champagne catch on the upper metallic edge (apex of the tall central slab). */
.hero__edge--apex {
	--region: radial-gradient(26% 30% at 37% 14%, #fff 30%, transparent 100%);
	--band-angle: 118deg;
	--band-core: rgba(255, 232, 200, 1);
	--band-edge: rgba(255, 220, 180, 0.3);
}

/* Violet refraction moving through the left / internal surfaces. */
.hero__edge--violet {
	--region: radial-gradient(24% 44% at 20% 48%, #fff 26%, transparent 100%);
	--band-angle: 108deg;
	--band-core: rgba(226, 204, 255, 1);
	--band-edge: rgba(190, 160, 255, 0.3);
}

/* Central bevel — the silver inner edges where the two central slabs meet. */
.hero__edge--bevel {
	--region: radial-gradient(22% 34% at 48% 58%, #fff 24%, transparent 100%);
	--band-angle: 114deg;
	--band-core: rgba(242, 246, 255, 1);
	--band-edge: rgba(230, 236, 255, 0.3);
}

/* Clean cool catch on the right-hand silver/cyan material. */
.hero__edge--cyan {
	--region: radial-gradient(24% 40% at 72% 34%, #fff 26%, transparent 100%);
	--band-angle: 110deg;
	--band-core: rgba(226, 250, 255, 1);
	--band-edge: rgba(180, 236, 245, 0.3);
}

/* The occasional broader travelling reflection: silver-white, slightly wider band. */
.hero__edge--sweep {
	--band-angle: 112deg;
	--band-core: rgba(255, 255, 255, 1);
	--band-edge: rgba(225, 236, 255, 0.35);
	background-image: linear-gradient(
		var(--band-angle),
		transparent 45.5%,
		var(--band-edge) 47.8%,
		var(--band-core) 49.4%,
		var(--band-core) 50.6%,
		var(--band-edge) 52.2%,
		transparent 54.5%
	);
}

/* ---------- Resting edge presence (WU-03.5) ----------
   Two static, very faint catches so the material never reads as fully inert between the
   transient reflections: a cool silver/cyan touch on the right-hand bevel and a faint warm
   touch on the upper internal edge of the tall slab. Ambient studio light already on the
   material — not an outline, not an animation. Same edge mask, same stage geometry, so it
   registers 1:1 with the object at every width. Intensity ≈ 5–10% of a transient peak. */
.hero__edge--rest-cyan,
.hero__edge--rest-warm {
	opacity: 1;
	background-size: 100% 100%;
	background-position: 0 0;
}

.hero__edge--rest-cyan {
	background-image: radial-gradient(28% 36% at 74% 36%, rgba(214, 244, 250, 0.07), transparent 72%);
}

.hero__edge--rest-warm {
	background-image: radial-gradient(22% 26% at 39% 18%, rgba(255, 226, 196, 0.05), transparent 72%);
}

/* ---------- Four Pillars: ambient focus cycle ---------- */

.pillar {
	transition: opacity var(--motion-slow) var(--ease-editorial),
		transform var(--motion-slow) var(--ease-editorial);
}

.pillar:focus {
	outline: none;
}

/* De-emphasis is capped at 0.82: below that, body copy drops under the WCAG 2.2 AA
   contrast floor on this black canvas (0.62 measured 3.53:1). Emphasis is carried by
   colour and position on the active pillar instead of by dimming the others away. */
[data-motion="full"] [data-pillars] .pillar,
[data-motion="touch"] [data-pillars] .pillar {
	opacity: 0.82;
}

[data-motion="full"] [data-pillars] .pillar.is-active,
[data-motion="touch"] [data-pillars] .pillar.is-active,
[data-pillars] .pillar:hover,
[data-pillars] .pillar:focus-within {
	opacity: 1;
	transform: translate3d(4px, 0, 0);
}

.pillar__index,
.pillar__icon {
	transition: color var(--motion-slow) var(--ease-editorial),
		opacity var(--motion-slow) var(--ease-editorial);
}

.pillar.is-active .pillar__index {
	color: var(--color-accent-silver);
}

.pillar.is-active .pillar__icon {
	opacity: 1;
	color: var(--color-accent-refraction);
}

/* ---------- Orbit (PREVIOUS sphere variant, rollback/reference only): directional markers,
   internal light, restrained aura ---------- */

/* Each marker is a dot plus a short radial tick oriented toward its pillar. Inactive markers
   are quiet; the active one gains luminance, presence and a slightly longer tick. */
.orbit__anchor {
	opacity: 0.5;
	transition: opacity var(--motion-slow) var(--ease-editorial);
}

.orbit__anchor circle,
.orbit__anchor line {
	transition: r var(--motion-slow) var(--ease-editorial),
		x2 var(--motion-slow) var(--ease-editorial),
		stroke-width var(--motion-slow) var(--ease-editorial),
		fill var(--motion-slow) var(--ease-editorial),
		stroke var(--motion-slow) var(--ease-editorial);
}

.orbit__anchor.is-active {
	opacity: 1;
}

.orbit__anchor.is-active circle {
	r: 4.6;
	fill: #f2efe8;
}

.orbit__anchor.is-active line {
	x2: 406;
	stroke: var(--color-accent-refraction);
	stroke-width: 1.4;
}

/* Internal light leans toward the active pillar's quadrant (a translate, never a spin). */
.orbit__light {
	transform: translate(var(--lx, 0px), var(--ly, 0px));
	transition: transform 1400ms var(--ease-editorial);
}

/* Aura: nothing at rest — colour lives inside the object. In motion a little of the internal
   light expands outward and returns, so the glow reads as caused by the interior, not as a
   permanent box-shadow. */
[data-motion="full"] .orbit__aura,
[data-motion="touch"] .orbit__aura {
	transform-box: fill-box;
	transform-origin: center;
	animation: aw-aura 12s ease-in-out infinite;
}

@keyframes aw-aura {
	0%,
	100% {
		opacity: 0;
		transform: scale(0.98);
	}
	50% {
		opacity: 0.26;
		transform: scale(1.1);
	}
}

/* Ring system drifts very slowly — precise, not decorative. */
[data-motion="full"] .orbit__rings,
[data-motion="touch"] .orbit__rings {
	transform-box: fill-box;
	transform-origin: center;
	animation: aw-rings 150s linear infinite;
}

@keyframes aw-rings {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* ---------- Four Pillars: Orbital Rings — ACCEPTED (pillars-visual-orbital.php) ----------
   Precise light on dark material. Five thin graphite ellipses of different size and inclination
   around one near-black glass sphere; small hot-cored nodes (silver / cyan / violet) travel along
   them as composited HTML elements driven from the canonical SVG path (main.js —
   initOrbitalRings). Far halves behind the sphere are dimmer; near halves carry a limited
   luminous "energy" section. The previous sphere variant's rules above (rollback only) do not
   apply here. */

.pillars__visual--orbital {
	position: relative;
}

/* Orbit lines: the `<use>` elements inherit stroke properties into the shared geometry. */
.orbital__path {
	stroke: #474a5a;
	stroke-width: 0.9;
	fill: none;
	transition: stroke var(--motion-slow) var(--ease-editorial),
		stroke-opacity var(--motion-slow) var(--ease-editorial);
}

.orbital__path--near {
	stroke-opacity: 0.95;
}

.orbital__path--far {
	stroke: #33343e;
	stroke-opacity: 0.55;
}

/* A limited luminous section on the near half, in the orbit's first node colour. */
.orbital__path--energy {
	stroke-width: 1.15;
	stroke-opacity: 0.9;
}

/* The energy stroke gradient is per orbit (inline style, ao-energy-<orbit>). */

.orbital__orbit--dashed .orbital__path {
	stroke-dasharray: 1.6 4.2;
	stroke-linecap: round;
}

/* ----- Nodes (HTML, composited) ----- */

.orbital__nodes,
.orbital__group {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.orbital__node {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	will-change: transform, opacity;
	--core: 2.4px;
	--bloom: 12px;
	--c-core: #ffffff;
	--c-glow: 232, 238, 252;
}

.orbital__node > span {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

/* Hot core: a crisp centre with a hair of colour at its edge. */
.orbital__core {
	width: var(--core);
	height: var(--core);
	background: radial-gradient(circle, #ffffff 0 30%, var(--c-core) 60%, rgba(var(--c-glow), 0.7) 100%);
}

/* Coloured nodes: the hot core turns to colour sooner, so they read as cyan / violet light,
   not as white dots with a tinted edge. Glow stays tight. */
.orbital__node--cyan .orbital__core,
.orbital__node--violet .orbital__core {
	background: radial-gradient(circle, #ffffff 0 20%, var(--c-core) 48%, rgba(var(--c-glow), 0.85) 100%);
	box-shadow: 0 0 1.5px 0.4px rgba(var(--c-glow), 0.9);
}

/* Tiny controlled bloom — strong local colour, no wide fuzzy halo. */
.orbital__bloom {
	width: var(--bloom);
	height: var(--bloom);
	background: radial-gradient(circle, rgba(var(--c-glow), 0.85) 0%, rgba(var(--c-glow), 0.4) 24%, rgba(var(--c-glow), 0.08) 46%, rgba(var(--c-glow), 0) 58%);
	opacity: 0.35; /* far side: bloom mostly gone, the core stays crisp */
	transition: opacity 600ms var(--ease-editorial), transform 600ms var(--ease-editorial);
}

/* Trail: ghost dots at the node's own earlier positions (main.js positions each one from the
   canonical path at t − g·55ms), so the trail sits behind the node in its actual direction of
   travel and curves with the orbit. Brightest right behind the node, fading fast; short. */
.orbital__ghost {
	width: calc(var(--core) * (1 - var(--g) * 0.13));
	height: calc(var(--core) * (1 - var(--g) * 0.13));
	background: radial-gradient(circle, rgba(var(--c-glow), 0.95) 0 30%, rgba(var(--c-glow), 0.35) 70%, rgba(var(--c-glow), 0) 100%);
	opacity: calc(0.62 - var(--g) * 0.11);
}

/* Colour character */
.orbital__node--silver { --c-core: #eef2fb; --c-glow: 214, 222, 242; }
.orbital__node--cyan { --c-core: #6cefff; --c-glow: 28, 224, 250; }
.orbital__node--violet { --c-core: #cdb0ff; --c-glow: 168, 116, 255; }

/* Hierarchy: 2 hero, 3 mid, 4 low. */
.orbital__node--hero { --core: 4.4px; --bloom: 17px; }
.orbital__node--mid { --core: 3.4px; --bloom: 12px; }
.orbital__node--low { --core: 2.4px; --bloom: 8px; }

.orbital__node--low .orbital__bloom { opacity: 0.25; }
.orbital__node--silver .orbital__bloom { opacity: 0.2; }
.orbital__node--silver.is-front .orbital__bloom { opacity: 0.45; }

/* Depth: front-facing nodes get slightly stronger bloom; far ones are dimmed by JS opacity. */
.orbital__node.is-front .orbital__bloom { opacity: 1; }
.orbital__node--low.is-front .orbital__bloom { opacity: 0.6; }

/* Active pillar: its orbit's nodes brighten with control (bloom up, core a touch larger). */
.orbital__group.is-active .orbital__bloom {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.25);
}

.orbital__group.is-active .orbital__core {
	box-shadow: 0 0 2px 0.8px rgba(var(--c-glow), 0.95);
}

.orbital__group.is-active .orbital__ghost {
	opacity: calc(0.8 - var(--g) * 0.13);
}

/* Active pillar: its orbit line gains local emphasis (near half clearer, energy fuller). */
.pillars__visual--orbital:has(.orbital__group--a.is-active) .orbital__orbit--a .orbital__path--near,
.pillars__visual--orbital:has(.orbital__group--b.is-active) .orbital__orbit--b .orbital__path--near,
.pillars__visual--orbital:has(.orbital__group--c.is-active) .orbital__orbit--c .orbital__path--near,
.pillars__visual--orbital:has(.orbital__group--d.is-active) .orbital__orbit--d .orbital__path--near {
	stroke: #6a6e86;
	stroke-opacity: 1;
}

.pillars__visual--orbital:has(.orbital__group--a.is-active) .orbital__orbit--a .orbital__path--far,
.pillars__visual--orbital:has(.orbital__group--b.is-active) .orbital__orbit--b .orbital__path--far,
.pillars__visual--orbital:has(.orbital__group--c.is-active) .orbital__orbit--c .orbital__path--far,
.pillars__visual--orbital:has(.orbital__group--d.is-active) .orbital__orbit--d .orbital__path--far {
	stroke: #474a5a;
	stroke-opacity: 0.7;
}

.pillars__visual--orbital:has(.orbital__group--a.is-active) .orbital__orbit--a .orbital__path--energy,
.pillars__visual--orbital:has(.orbital__group--b.is-active) .orbital__orbit--b .orbital__path--energy,
.pillars__visual--orbital:has(.orbital__group--c.is-active) .orbital__orbit--c .orbital__path--energy,
.pillars__visual--orbital:has(.orbital__group--d.is-active) .orbital__orbit--d .orbital__path--energy {
	stroke-width: 1.4;
}

/* Narrow widths: the visual is 320px there — drop the steepest orbit (D) and thicken the
   remaining lines slightly so they stay legible; node sizes are in px and do not shrink. */
@media (max-width: 600px) {
	.orbital__orbit--d,
	.orbital__group--d {
		display: none;
	}

	.orbital__path {
		stroke-width: 1.1;
	}
}

/* ---------- The Shift: stateful statements (WU-03.1) ----------
   Three paired states. The static baseline (no JS / reduced motion) is the accepted WU-02
   composition: approved headline left, three statements right. With `.is-stateful` on the
   grid, the left headline is replaced visually by the paired statement of the current state
   (it stays in the DOM as the section's accessible heading) and exactly one right statement
   is active at any time. */

/* Static baseline: the paired statements exist only in stateful mode. */
.the-shift__statements {
	display: none;
}

.the-shift__grid.is-stateful .the-shift__headline--static {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* All three statements share one grid cell, so the column takes the height of the tallest
   and nothing below moves when the copy changes. */
.the-shift__grid.is-stateful .the-shift__statements {
	display: grid;
}

/* The paired statements are longer than the approved headline, so they size to the column
   (container-query units) to keep their intended two-line structure without orphans; capped at
   the headline's own size. Balanced wrapping is the fallback if a line still has to break. */
.the-shift__lead {
	container-type: inline-size;
}

.the-shift__statement {
	grid-area: 1 / 1;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 4.3cqi, 2.625rem);
	text-wrap: balance;
	opacity: 0;
	visibility: hidden;
	/* Resting position is the entry position: just below, ready to arrive. No transition here so
	   a departed statement snaps back to its entry position unseen. */
	transform: translate3d(0, 18px, 0);
}

/* Outgoing: a small upward departure with a restrained fade — quicker than the arrival. */
.the-shift__statement.is-leaving {
	visibility: visible;
	opacity: 0;
	transform: translate3d(0, -12px, 0);
	transition: opacity 480ms cubic-bezier(0.4, 0, 0.6, 1), transform 480ms cubic-bezier(0.4, 0, 0.6, 1);
}

/* Incoming: slight directional movement and a crisp settle, starting once the outgoing
   statement has mostly cleared. */
.the-shift__statement.is-current {
	visibility: visible;
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: opacity 760ms var(--ease-editorial) 300ms, transform 760ms var(--ease-editorial) 300ms;
}

/* Right column, stateful: the three statements set in uppercase to strengthen the editorial /
   system register; balanced wrapping so a two-line break never leaves an orphan. Inactive
   statements share one treatment — the static baseline's brighter last line does NOT apply
   here, which is the defect André saw (two apparent active states). */
.the-shift__grid.is-stateful .the-shift__aside p,
.the-shift__grid.is-stateful .the-shift__aside p:last-child {
	position: relative;
	padding-left: 2rem;
	font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem);
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--color-fg-muted);
	/* Same AA floor as the pillars: 0.78 keeps every statement legible (5.12:1). */
	opacity: 0.78;
	transform: translate3d(0, 0, 0);
	transition: opacity 700ms var(--ease-editorial), transform 700ms var(--ease-editorial),
		color 700ms var(--ease-editorial);
}

/* Marker: a rule in the gutter that draws out from nothing on the active statement. */
.the-shift__grid.is-stateful .the-shift__aside p::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 0;
	height: 1px;
	background: var(--gradient-accent);
	opacity: 0;
	transition: width 620ms var(--ease-editorial), opacity 400ms var(--ease-editorial);
}

.the-shift__grid.is-stateful .the-shift__aside p.is-current {
	opacity: 1;
	color: var(--color-fg);
	transform: translate3d(6px, 0, 0);
}

.the-shift__grid.is-stateful .the-shift__aside p.is-current::before {
	width: 1.25rem;
	opacity: 1;
}

/* WU-16.1 (A3) — pause / resume control on the eyebrow line. No box, no chrome: a ~9×10px glyph
   in the eyebrow's dim register, right-aligned to the content edge, inside a 44×44px invisible
   hit area (the button itself). The button is centred on the eyebrow row: the row's margin-bottom
   is the gap above the grid, and −1.375rem + 0.6rem = half the hit area minus half the ~1.2rem
   row. It is offset right by half the hit area minus half the glyph so the glyph — not the
   invisible target — sits on the content edge. Running = two bars (dim), paused = a play
   triangle in the signal cyan. Focus uses the global :focus-visible ring. */
.the-shift__grid {
	position: relative;
}

.the-shift__pause {
	position: absolute;
	right: calc(-22px + 4.5px);
	bottom: calc(100% + clamp(2.5rem, 4vw, 4rem) - 1.375rem + 0.6rem);
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: var(--color-fg-dim);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color var(--motion-fast) var(--ease-editorial);
}

.the-shift__pause:hover,
.the-shift__pause:focus-visible {
	color: var(--color-fg);
}

.the-shift__pause[data-state="paused"] {
	color: var(--color-accent-refraction);
}

.the-shift__pause-glyph {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 9px;
	height: 10px;
	transform: translate(-50%, -50%);
}

.the-shift__pause-glyph::before,
.the-shift__pause-glyph::after {
	content: "";
	position: absolute;
	top: 0;
	width: 2px;
	height: 100%;
	background: currentColor;
}

.the-shift__pause-glyph::before {
	left: 1px;
}

.the-shift__pause-glyph::after {
	right: 1px;
}

/* Paused: one play triangle (border primitive), second bar dropped. */
.the-shift__pause[data-state="paused"] .the-shift__pause-glyph::before {
	left: 1px;
	width: 0;
	height: 0;
	background: none;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent currentColor;
}

.the-shift__pause[data-state="paused"] .the-shift__pause-glyph::after {
	display: none;
}

/* ---------- In Practice: coherent lift across all five tiles ---------- */

.case-card {
	transition: border-color var(--motion-base) var(--ease-editorial),
		transform var(--motion-base) var(--ease-editorial);
}

.case-card:hover,
.case-card:focus-within {
	transform: translate3d(0, -3px, 0);
}

/* ---------- Reduced motion: the accepted static page, nothing more ---------- */

@media (prefers-reduced-motion: reduce) {
	.will-reveal,
	.will-reveal.is-revealed {
		opacity: 1 !important;
		transform: none !important;
	}

	.hero__edge {
		animation: none !important;
		opacity: 0 !important;
	}

	/* The resting edge presence is static material, not motion — it stays. */
	.hero__edge[data-edge-rest] {
		opacity: 1 !important;
	}

	/* Orbital Rings prototype: paths stay visible, points are placed once and never move. */
	.orbital__point,
	.orbital__dot,
	.orbital__halo,
	.orbital__path {
		transition: none !important;
	}

	.orbit__aura,
	.orbit__rings {
		animation: none !important;
	}

	.the-shift__grid.is-stateful .the-shift__aside p {
		opacity: 1 !important;
		transform: none !important;
	}

	[data-pillars] .pillar {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ==========================================================================
   Static pages (WU-05) — legal reading column (/impressum/, /privacy-policy/)
   ========================================================================== */

.legal {
	border-top: 0; /* the sticky header already draws the rule */
}

.legal__inner {
	max-width: 44rem;
}

.legal__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-accent-silver);
	margin-bottom: 1rem;
}

.legal__title {
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: 400;
	line-height: 1.1;
	margin: 0 0 1.5rem;
}

.legal__draft {
	display: inline-block;
	margin: 0 0 2.5rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--color-accent-warm);
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	letter-spacing: 0.08em;
	color: var(--color-accent-warm);
}

.legal__body {
	font-size: var(--text-body-lg);
	line-height: 1.6;
	color: var(--color-fg-muted);
}

.legal__body h2 {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-fg);
	margin: 3rem 0 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-rule);
}

.legal__body p,
.legal__body ul {
	margin: 0 0 1.1em;
}

.legal__body ul {
	padding-left: 1.2em;
}

.legal__body li + li {
	margin-top: 0.4em;
}

.legal__body strong {
	color: var(--color-fg);
	font-weight: 500;
}

.legal__body a {
	color: var(--color-fg);
	text-decoration: underline;
	text-decoration-color: var(--color-accent-refraction);
	text-underline-offset: 0.2em;
}

.legal__body a:hover,
.legal__body a:focus-visible {
	text-decoration-color: var(--color-fg);
}

.legal__body code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	color: var(--color-fg);
}

.legal__lead {
	color: var(--color-fg);
}

/* Operator to-do markers — visibly unfinished, never mistaken for final copy. Removed by the
   operator together with the draft banner. */
.legal__todo {
	color: var(--color-accent-warm);
	font-family: var(--font-mono);
	font-size: 0.85em;
}

.legal__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5em;
	font-size: 0.9375rem;
}

.legal__table th,
.legal__table td {
	text-align: left;
	vertical-align: top;
	padding: 0.6em 0.75em 0.6em 0;
	border-bottom: 1px solid var(--color-rule);
}

.legal__table th {
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-fg-dim);
}

/* Tables scroll inside their own focusable region on narrow screens (keyboard-reachable). */
.legal__table-wrap {
	overflow-x: auto;
	margin: 0 0 1.5em;
}

.legal__table-wrap:focus-visible {
	outline: 2px solid var(--color-accent-refraction);
	outline-offset: 3px;
}

.legal__table-wrap .legal__table {
	margin: 0;
	min-width: 32rem;
}

/* Footer legal links (WU-05): Impressum · Privacy policy · Privacy settings, one meta line. */
.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25em;
	align-items: baseline;
}

.site-footer__legal a {
	padding: 0.5em 0;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

@media (max-width: 760px) {
	.site-footer__legal {
		justify-content: center;
	}
}

/* ==========================================================================
   WU-07 — Language switch (EN / DE), header
   ========================================================================== */

.lang-switch {
	display: flex;
	align-items: center;
	gap: 0.45em;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--color-fg-dim);
	flex: none;
	order: 3;
}

.lang-switch a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0.25em 0.15em;
	color: var(--color-fg-dim);
}

.lang-switch a:hover,
.lang-switch a:focus-visible {
	color: var(--color-fg);
}

.lang-switch a[aria-current="page"] {
	color: var(--color-fg);
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-color: var(--color-accent-refraction);
}

.lang-switch a:focus-visible {
	outline: 2px solid var(--color-accent-refraction);
	outline-offset: 3px;
}

@media (max-width: 640px) {
	/* Mark · switch · toggle on one line; the nav drops down below as before. */
	.site-header__inner {
		flex-wrap: nowrap;
		gap: var(--space-2);
	}

	.site-header__mark {
		flex: 0 1 auto;
		min-width: 0;
		white-space: nowrap;
	}

	.lang-switch {
		order: 1;
		margin-left: auto;
		margin-right: var(--space-2);
	}

	.nav-toggle {
		order: 2;
	}

	.site-nav {
		order: 4;
	}
}

/* ==========================================================================
   WU-07 — Contact page (/contact/, /de/kontakt/)
   ========================================================================== */

.contact {
	border-top: 0;
}

.contact__inner {
	max-width: 44rem;
}

.contact__intro {
	font-size: var(--text-body-lg);
	line-height: 1.6;
	color: var(--color-fg-muted);
	margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.contact__form {
	display: grid;
	gap: 1.4rem;
}

.contact__required-note {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--color-fg-dim);
}

.contact__field {
	display: grid;
	gap: 0.5rem;
}

.contact__field label {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-fg);
}

.contact__optional {
	text-transform: none;
	letter-spacing: 0.02em;
	color: var(--color-fg-dim);
	font-weight: 400;
}

.contact__field input,
.contact__field textarea {
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-fg);
	background: var(--color-bg-raised);
	border: 1px solid var(--color-rule-strong);
	border-radius: 0;
	padding: 0.8em 0.95em;
	min-height: 48px;
	width: 100%;
	transition: border-color var(--motion-base) var(--ease-editorial);
}

.contact__field textarea {
	resize: vertical;
	min-height: 9rem;
}

.contact__field input::placeholder,
.contact__field textarea::placeholder {
	color: var(--color-fg-dim);
}

.contact__field input:hover,
.contact__field textarea:hover {
	border-color: var(--color-accent-silver);
}

.contact__field input:focus-visible,
.contact__field textarea:focus-visible {
	outline: 2px solid var(--color-accent-refraction);
	outline-offset: 2px;
	border-color: var(--color-accent-refraction);
}

.contact__field [aria-invalid="true"] {
	border-color: var(--color-accent-warm);
}

.contact__error {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-accent-warm);
}

.contact__error[hidden] {
	display: none;
}

/* Honeypot — off-screen for everyone, aria-hidden and tabindex=-1 in the markup. */
.contact__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
	margin-top: 0.5rem;
}

.contact__submit {
	display: inline-flex;
	align-items: center;
	gap: 0.9em;
}

.contact__submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

.contact__alt {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--color-fg-muted);
}

.contact__alt a,
.contact__privacy a,
.contact__next a {
	color: var(--color-fg);
	text-decoration: underline;
	text-decoration-color: var(--color-accent-refraction);
	text-underline-offset: 0.2em;
}

.contact__privacy {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--color-fg-dim);
}

.contact__status {
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--color-rule-strong);
	margin-bottom: 1.5rem;
	color: var(--color-fg-muted);
	line-height: 1.55;
}

.contact__status p {
	margin: 0;
}

.contact__status p + p {
	margin-top: 0.6em;
}

.contact__status--ok {
	border-color: var(--color-accent-silver);
}

.contact__status-title {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	color: var(--color-fg);
	line-height: 1.25;
}

.contact__status--error {
	border-color: var(--color-accent-warm);
	color: var(--color-fg);
}

.contact__status:focus-visible {
	outline: 2px solid var(--color-accent-refraction);
	outline-offset: 3px;
}

.contact__next {
	margin-top: clamp(3rem, 6vw, 5rem);
	color: var(--color-fg-muted);
	line-height: 1.6;
}

.contact__next .legal__body-h2,
.legal__body-h2 {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-fg);
	margin: 0 0 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-rule);
}

/* Footer contact cluster incl. the discreet LinkedIn link (WU-07). */
.site-footer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25em;
	align-items: baseline;
}

.site-footer__contact a {
	padding: 0.5em 0;
}

.site-footer__linkedin {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ==========================================================================
   WU-07 — AI-generated / AI-assisted visual disclosure (docs/DESIGN.md)
   Restrained caption placed once at first exposure of a visual or visual group.
   ========================================================================== */

.ai-disclosure {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0.75rem 0 0;
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	letter-spacing: 0.08em;
	color: var(--color-fg-dim);
}

.ai-disclosure__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.9em;
	height: 1.5em;
	padding: 0 0.35em;
	border: 1px solid var(--color-rule-strong);
	font-size: 0.85em;
	letter-spacing: 0.12em;
	color: var(--color-accent-silver);
}

@media (max-width: 400px) {
	/* 320–400 px: mark (≈181 px at 15 px) + switch + toggle must share ≈280 px. */
	.site-header__mark {
		font-size: 0.8125rem;
		letter-spacing: 0.16em;
	}

	.lang-switch {
		margin-right: 0.5rem;
		gap: 0.3em;
	}
}

/* WU-07.1 — second, quieter intro line on the contact page */
.contact__intro--quiet {
	font-size: var(--text-body);
	color: var(--color-fg-dim);
	margin-top: -1rem;
}

.legal__updated {
	margin: 2.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-rule);
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	letter-spacing: 0.08em;
	color: var(--color-fg-dim);
}