/*
 * Homepage sections after the hero (docs/HOMEPAGE.md). Visual grammar from R1
 * and the approved hero; each section's own R-panel for its composition.
 */

/*
 * "Waarom FCT anders kijkt": a transitional statement between the hero and
 * "Wat we doen" (R2), without a panel of its own. One visual centre: the Local
 * Rationality question on a rough Gold brush plate. Hindsight stays quiet body
 * text. No photo, cards, icons or CTA; Warm White and paper grain continue
 * from the hero.
 *
 * From 900 px a diagonal like the hero's: label, heading and intro on the
 * hero's text column (7 %), the question lower and to the right, its
 * explanation and conclusion hanging beneath it, the handwritten
 * "Local rationality" below its right end with R1's arrow pointing up into it.
 */
.fct-why {
	container-type: inline-size;
	/* A safety net only: the question's brush tail ends inside the section at every width. */
	overflow-x: clip;
	padding-inline: var(--wp--style--root--padding-left, 16px) var(--wp--style--root--padding-right, 16px);
}

.fct-why > * {
	margin-block: 0;
}

/* Spec §8 section heading, at the low end (44 / 32 px): a clear step down from the hero, below the question. */
.fct-why .fct-why__title {
	max-width: 21em;
	margin-block-start: var(--wp--preset--spacing--xs);
	font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
	line-height: 1.08;
	text-wrap: balance;
	/* Short words: break between them, not inside ("be-grijpen"); overflow-wrap still guards narrow screens. */
	hyphens: manual;
}

.fct-why .fct-why__intro {
	max-width: 33em;
	margin-block-start: var(--wp--preset--spacing--m);
}

/*
 * The question: the section's single Gold moment (Learning Gold as insight).
 * Its plate is one sentence-wide stroke of a loaded brush from the same
 * R6-derived generator as the note plate (qa/tools/build-brush.mjs): blunt
 * start, wandering edges, a dry split finish and a few dry gaps. Charcoal on
 * Gold: 7.9 : 1.
 *
 * Not centred like a component: the text sits a little left and up in the
 * Gold (less padding left and above, the same box height), and the plate runs
 * past the box on the right (6 %; the stroke keeps the same scale as at 11 %
 * of the longer finish), solid Gold beyond the last letter, then the brush's
 * short dry tail, whose tips stop short of the page edge on phones.
 */
.fct-why .fct-why__question {
	position: relative;
	isolation: isolate;
	width: fit-content;
	/* Content just wider than the longest line (11.23em), so the plate hugs the words: a wrapped box keeps its full width. */
	max-width: 11.4em;
	margin-block-start: var(--wp--preset--spacing--l);
	padding: 0.27em 0.62em 0.47em 0.55em;
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--display);
	/* Tablet: above the heading (the visual centre). Phones and desktop below. */
	font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.08;
	text-wrap: balance;
}

.fct-why .fct-why__question::before {
	content: "";
	position: absolute;
	inset: 0 -6% 0 0;
	z-index: -1;
	background-color: var(--wp--preset--color--gold);
	-webkit-mask: url("../masks/marker-plate-wide.svg?v=c6c1ff906135") center / 100% 100% no-repeat;
	mask: url("../masks/marker-plate-wide.svg?v=c6c1ff906135") center / 100% 100% no-repeat;
	pointer-events: none;
}

/*
 * "Local rationality": a handwritten note below the question's right end.
 * R1's own arrow (traced, qa/tools/trace-arrows.mjs: the one from its
 * "Context matters." loop, not used in the hero) points up from it into the
 * Gold. Decoration only: an empty pseudo-element is never read out.
 */
.fct-why .fct-why__note {
	margin-block-start: var(--wp--preset--spacing--s);
	margin-inline-start: auto;
}

.fct-why .fct-why__note::after {
	content: "";
	position: absolute;
	right: calc(100% - 0.5em);
	bottom: calc(100% - 0.15em);
	/* Larger than R1's ratio to its note by about a third, so it reaches the Gold from the note's looser spot without crowding the question mark. */
	width: 1.95em;
	aspect-ratio: 17.93 / 15.05;
	background-color: currentColor;
	-webkit-mask: url("../masks/arrow-r1-context.svg?v=6e4b9ad2069a") center / 100% 100% no-repeat;
	mask: url("../masks/arrow-r1-context.svg?v=6e4b9ad2069a") center / 100% 100% no-repeat;
	pointer-events: none;
}

.fct-why .fct-why__explanation {
	max-width: 33em;
	margin-block-start: var(--wp--preset--spacing--m);
}

.fct-why .fct-why__conclusion {
	max-width: 33em;
	margin-block-start: var(--wp--preset--spacing--m);
}

@media (min-width: 900px) {
	.fct-why {
		display: grid;
		grid-template-columns: 7% 33% 5% 36% 15% 4%;
		padding-inline: 0;
	}

	.fct-why > .fct-why__label,
	.fct-why > .fct-why__title {
		grid-column: 2 / 5;
	}

	.fct-why > .fct-why__intro {
		grid-column: 2;
		grid-row: 3;
	}

	/*
	 * Lower than the intro's first line: the diagonal from the heading to the
	 * Gold. Sized with the section (4.3 cqw, at most 52 px), so its two lines
	 * (12.4 em with the plate's padding) always fit the 55 % it may use and
	 * it stays larger than the heading.
	 */
	.fct-why > .fct-why__question {
		grid-column: 4 / 7;
		grid-row: 3;
		font-size: min(3.25rem, 4.3cqw);
		align-self: start;
		margin-block-start: calc(var(--wp--preset--spacing--m) + 6cqw);
	}

	/* Loose beside the Gold, not a caption under it: 0.15 em lower and 0.25 em further right. */
	.fct-why > .fct-why__note {
		grid-column: 5 / 7;
		grid-row: 4;
		align-self: start;
		margin: calc(var(--wp--preset--spacing--s) + 0.15em) 0 0 calc(1cqw + 0.25em);
	}

	.fct-why > .fct-why__explanation {
		grid-column: 4;
		grid-row: 4;
	}

	.fct-why > .fct-why__conclusion {
		grid-column: 4;
		grid-row: 5;
	}
}

/* Narrow mobile: 28 px; secondary decoration drops out (MO04), the note stays. */
@media (max-width: 599.98px) {
	.fct-why .fct-why__question {
		font-size: 1.75rem;
	}

	/* The question fills the column: the same stroke with a shorter dry finish, no overhang (qa/tools/build-brush.mjs). */
	.fct-why .fct-why__question::before {
		inset: 0;
		-webkit-mask-image: url("../masks/marker-plate-wide-s.svg?v=6229aadac082");
		mask-image: url("../masks/marker-plate-wide-s.svg?v=6229aadac082");
	}

	.fct-why .fct-why__note::after {
		content: none;
	}
}

/*
 * Where two lines do not fit (347 px: 12.4 em of 28 px with the plate's
 * padding), the question wraps into three even lines and the plate still
 * hugs them.
 */
@container (max-width: 347px) {
	.fct-why .fct-why__question {
		max-width: 7.4em;
	}
}

/*
 * "Wat we doen" (R2; docs/HOMEPAGE.md). R2 is the primary reference: a
 * dominant headline left with R2's Gold underline and body; the
 * operational photograph right in R2's traced organic mask, with R2's own
 * handmade Gold line and ring nodes and the labels PEOPLE · SYSTEMS ·
 * CONTEXT · LEARNING as real text; the handwritten note top right; a low grey
 * mountain rising from the lower left towards the photograph. R2's Gold CTA
 * closes the services section below it (homepage fase 2, .fct-services).
 *
 * From 900 px the section is R2's frame (the panel below its header band,
 * 78.43 % of the width tall) and everything is placed in its coordinates:
 * cqw = 1 % of the section width (qa/panels/r2-collage.json). Headline top
 * y 0.19 of the panel, text column from x 0.065, stage (organic-r2 box)
 * x 0.410–0.868 × y 0.154–0.885, note x 0.755 × y 0.15.
 * First 1440 implementation; responsive refinement follows review.
 */
.fct-what {
	position: relative;
	container-type: inline-size;
	overflow-x: clip;
	padding-inline: var(--wp--style--root--padding-left, 16px) var(--wp--style--root--padding-right, 16px);
}

.fct-what > * {
	margin-block: 0;
}

.fct-what .fct-what__title {
	max-width: 10em;
	margin-block-start: var(--wp--preset--spacing--xs);
	line-height: 1.02;
	text-wrap: balance;
	hyphens: manual;
}

/*
 * R2's own Gold underline (qa/tools/trace-underline.mjs --panel R2 … --keep-slant --thin 0.18
 * → marker-r2.svg): a loaded brush stroke with a blunt, lower left start, a
 * slight arc, its own −1.7° slant and a tapering right end, uneven edges and
 * dry-bristle streaks. As in R2 it starts just left of the headline, stops
 * 0.56 em short of its widest line and hangs into the gap below it: a 0.66 em
 * box, the brush thinned 18 % about its own centre line (--thin 0.18) to
 * ≈ 16 px at 1440, R2's weight; it lies behind the letters, so a descender
 * runs over the Gold. The heading's padding
 * is unchanged, so nothing below it moves.
 */
.fct-what .fct-what__title.is-style-marker {
	isolation: isolate;
}

.fct-what .fct-what__title.is-style-marker::after {
	z-index: -1;
	left: -0.21em;
	right: 0.56em;
	bottom: -0.24em;
	width: auto;
	height: 0.66em;
	-webkit-mask-image: url("../masks/marker-r2.svg?v=7e3cbde55de5");
	mask-image: url("../masks/marker-r2.svg?v=7e3cbde55de5");
}

.fct-what .fct-what__body {
	max-width: 30em;
	margin-block-start: var(--wp--preset--spacing--m);
}

.fct-what .fct-what__body + .fct-what__body {
	margin-block-start: var(--wp--preset--spacing--s);
}

/* R2's note leans harder; N04 caps the rotation at 8°. */
.fct-what .fct-what__note {
	--fct-note-rotate: -8deg;
	max-width: 5.2em;
	margin-block-start: var(--wp--preset--spacing--l);
}

.fct-what .fct-work-collage {
	margin-block-start: var(--wp--preset--spacing--xl);
}

/* Until the responsive pass: the frame leaves room for the labels on its right. */
@media (max-width: 899.98px) {
	.fct-what .fct-work-collage__frame {
		width: min(72%, 440px);
	}
}

@media (min-width: 900px) {
	.fct-what {
		min-height: 78.434cqw;
		padding: 4.741cqw 0 0;
	}

	.fct-what > :is(.fct-what__label, .fct-what__title, .fct-what__body) {
		margin-inline-start: 6.5cqw;
	}

	/*
	 * The eyebrow belongs to the headline: its baseline 30 px above the
	 * headline's cap line (was 43, over four times its 10 px caps), about 3×
	 * its cap height as in "Waarom FCT anders kijkt"; the headline stays put
	 * (0.9 + 1 cqw = the former 1.9 cqw). 0.28 cqw right, onto the optical
	 * edge of the headline's stem (76 px type sits 4 px in from its box).
	 * Style unchanged: the site's eyebrow (14 px, 700, 0.18 em, Forest).
	 */
	.fct-what > .fct-what__label {
		margin-block-start: 0.9cqw;
		margin-inline-start: 6.78cqw;
	}

	/* Three lines, as R2's headline, ending before the mask's inlet. */
	.fct-what .fct-what__title {
		max-width: 38cqw;
		margin-block-start: 1cqw;
	}

	.fct-what .fct-what__body {
		max-width: min(30em, 34cqw);
		margin-block-start: 2cqw;
	}

	.fct-what .fct-what__body + .fct-what__body {
		margin-block-start: var(--wp--preset--spacing--s);
	}

	/*
	 * R2's energetic hand: "Curiosity" 146 px long on its baseline at 1440
	 * (Caveat 2.95 em → 3.44 cqw, 49.5 px), lines 41 px apart (0.84), baselines
	 * at ≈ −17°; three lines as in R2, each its own span (display block only
	 * here; below 900 px they run inline as before).
	 * Placed on R2's ink extent x 0.765–0.918 × y 0.046–0.208 of the frame
	 * width (qa/reference-map.md R2 note). Narrow R2 exception: D-015.
	 */
	.fct-what .fct-what__note {
		--fct-note-rotate: -18deg;
		position: absolute;
		left: 77.6cqw;
		top: 6.8cqw;
		max-width: none;
		margin: 0;
		font-size: 3.8cqw;
		/* R2's pen is lighter than the note style's 500: Caveat's own 400 master (local variable font, wght 400–700; not synthesized). */
		font-weight: 400;
		line-height: 1.05;
	}

	/* R2's lines cascade to the right, ≈ 33 px per line beyond the rotation. */
	.fct-what .fct-what__note-line {
		display: block;
	}

	.fct-what .fct-what__note-line:nth-child(2) {
		margin-inline-start: 0.55em;
	}

	.fct-what .fct-what__note-line:nth-child(3) {
		margin-inline-start: 1.1em;
	}

	/* The block stays in flow without size; its frame and mountain sit on the section. */
	.fct-what .fct-work-collage {
		margin: 0;
	}

	.fct-what .fct-work-collage__frame {
		position: absolute;
		left: 40.96cqw;
		top: 4.741cqw;
		width: 45.79cqw;
	}
}

/*
 * "Wat we doen" between 900 and 1440 px (responsive pass, 1024 reviewed): the
 * frozen 1440 composition scales with the section (cqw); only what does not
 * scale with it is adapted. Nothing here applies at 1440 and wider, and every
 * expression below equals the 1440 value at 1440.
 *
 * - Headline: scales with the composition (min(preset, 5.47 cqw) ≈ 56 px at
 *   1024) and its measure is set in em (7.2 em = 38 cqw at 1440), so it keeps
 *   R2's three lines and the same breaks at every width.
 * - Room: the body keeps the site's fluid size in a column that narrows with
 *   the section, so it needs more lines. The section grows by
 *   (1440 px − width) × 0.13 (≈ 54 px at 1024) and the section mountain moves
 *   down with it, clear of the text column; the collage, note and body width keep
 *   their 1440 proportions.
 */
@media (min-width: 900px) and (max-width: 1439.98px) {
	.fct-what {
		--fct-what-room: calc((1440px - 100cqw) * 0.13);
		min-height: calc(78.434cqw + (1440px - 100vw) * 0.13);
	}

	/* !important: core's .has-title-font-size sets the preset with !important. */
	.fct-what .fct-what__title {
		max-width: 7.2em;
		font-size: min(var(--wp--preset--font-size--title), 5.47cqw) !important;
	}

	.fct-what .fct-work-collage__range {
		top: calc(54.257cqw + var(--fct-what-room));
	}
}

/*
 * "Wat we doen" on tablets, 600–899 px (responsive pass, 768 reviewed). The
 * two columns would be too compressed here (a 42 px headline over a 261 px
 * body), so a deliberate tablet composition from the same design: the text
 * block first, then the 1440 collage as one unit below it, substantial
 * (the photo 57 % of the width) and set in from the left so its labels fit
 * beside it. Note, section mountain and Gold keep their 1440 places relative
 * to the photo frame, scaled with it (factors = 1440 px values ÷ the 1440
 * frame width, 659.4 px): note top right beside the photo's top, the mountain
 * on the section's bottom edge, its peak by the lobe, bleeding off the left.
 * The approved note (Caveat 400, −18°, the three-line cascade), headline
 * lines (R2's three) and eyebrow treatment apply as on desktop.
 */
@media (min-width: 600px) and (max-width: 899.98px) {
	.fct-what {
		--fct-what-w: 57cqw;
		--fct-what-x: calc(21cqw - var(--wp--style--root--padding-left, 16px));
		--fct-what-gap: var(--wp--preset--spacing--xl);
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		padding-block-end: 0;
	}

	.fct-what .fct-what__title {
		max-width: 7.2em;
	}

	.fct-what .fct-what__body {
		max-width: 30em;
	}

	/* Collage and note share one grid cell, so the note sits on the collage. */
	.fct-what > :is(.fct-work-collage, .fct-what__note) {
		grid-row: 6;
		grid-column: 1;
	}

	.fct-what > .fct-work-collage {
		position: relative;
		margin-block-start: var(--fct-what-gap);
		padding-block-end: calc(var(--fct-what-w) * 0.2186);
	}

	.fct-what .fct-work-collage__frame {
		width: var(--fct-what-w);
		margin-inline-start: var(--fct-what-x);
	}

	.fct-what > .fct-what__note {
		--fct-note-rotate: -18deg;
		position: relative;
		z-index: 1;
		align-self: start;
		justify-self: start;
		max-width: none;
		margin: calc(var(--fct-what-gap) + var(--fct-what-w) * 0.0449) 0 0 calc(var(--fct-what-x) + var(--fct-what-w) * 0.8001);
		font-size: calc(var(--fct-what-w) * 0.083);
		font-weight: 400;
		line-height: 1.05;
	}

	.fct-what .fct-what__note-line {
		display: block;
	}

	.fct-what .fct-what__note-line:nth-child(2) {
		margin-inline-start: 0.55em;
	}

	.fct-what .fct-what__note-line:nth-child(3) {
		margin-inline-start: 1.1em;
	}

	.fct-what .fct-work-collage__range {
		position: absolute;
		left: calc(var(--fct-what-x) - var(--fct-what-w) * 0.8945);
		top: calc(var(--fct-what-w) * 1.0813);
		display: block;
		width: calc(var(--fct-what-w) * 0.8814);
		height: calc(var(--fct-what-w) * 0.5279);
		overflow: hidden;
		mix-blend-mode: multiply;
		pointer-events: none;
		-webkit-mask: url("../masks/r2-range-edge.svg?v=0380d33fa2fe") center / 100% 100% no-repeat;
		mask: url("../masks/r2-range-edge.svg?v=0380d33fa2fe") center / 100% 100% no-repeat;
	}

	.fct-what .fct-work-collage__range-img {
		position: absolute;
		left: calc(var(--fct-what-w) * -1.7624);
		top: calc(var(--fct-what-w) * -0.0523);
		width: calc(var(--fct-what-w) * 2.9378);
		max-width: none;
		height: auto;
		filter: contrast(1.12) brightness(1.02);
	}
}

/*
 * "Wat we doen" on phones, below 600 px (responsive pass, 390 and 320
 * reviewed): one column in reading order (eyebrow, headline with the Gold
 * underline, body, collage), not a compressed tablet layout.
 *
 * - Headline: the fluid title preset, a little smaller on the narrowest
 *   phones, on R2's three lines (the desktop measure, 7.2 em).
 * - Collage: as large as the labels allow: the frame's width leaves room for
 *   the four labels on its right, capped at the tablet size so 599 → 600 does
 *   not jump; it bleeds 10 % off the left edge, where only the mountain lobe is
 *   cut. Labels 14 px, set closer to their rings (ring radius + 8 px).
 * - Gold: the traced line and rings scale with the frame; four copies of the
 *   mask offset by 0.6 px keep the handmade shape at a visible weight
 *   (≈ 3 px at 320) instead of a hairline. Same shape, same colour.
 * - Note: on the collage's top right, beside the photo's top, at ≥ 24 px
 *   (MO05), −18° with its cascade, as on tablet.
 * - Section mountain: the tablet's proportions to the photo frame, its top
 *   tucked under the lobe (the collage paints over it), bleeding 30 % of the
 *   frame width off the left edge and off the section's foot; secondary.
 */
@media (max-width: 599.98px) {
	.fct-what {
		/* cqw = the section's content box; the labels' right edge stays inside the right padding. */
		--fct-what-w: min(calc((100cqw + var(--wp--style--root--padding-left, 16px) - 88px) / 0.892), 340px);
		--fct-what-x: calc(-0.1 * var(--fct-what-w) - var(--wp--style--root--padding-left, 16px));
		--fct-what-gap: var(--wp--preset--spacing--xl);
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		padding-block-end: 0;
	}

	/* The desktop measure (7.2 em) keeps R2's three lines up to 599 px, so 599 → 600 does not jump. */
	.fct-what .fct-what__title {
		max-width: 7.2em;
		font-size: clamp(2.25rem, 1.6rem + 3vw, 2.625rem) !important;
	}

	.fct-what > :is(.fct-work-collage, .fct-what__note) {
		grid-row: 6;
		grid-column: 1;
	}

	.fct-what > .fct-work-collage {
		position: relative;
		margin-block-start: var(--fct-what-gap);
		padding-block-end: calc(var(--fct-what-w) * 0.12);
	}

	.fct-what .fct-work-collage__frame {
		width: var(--fct-what-w);
		margin-inline-start: var(--fct-what-x);
	}

	.fct-what .fct-work-collage__node {
		padding-inline-start: calc(var(--fct-what-w) * 0.026 + 8px);
		font-size: 14px;
	}

	.fct-what .fct-work-collage__gold {
		-webkit-mask-image: url("../masks/system-line-r2.svg?v=e4a3adade521"), url("../masks/system-line-r2.svg?v=e4a3adade521"), url("../masks/system-line-r2.svg?v=e4a3adade521"), url("../masks/system-line-r2.svg?v=e4a3adade521");
		-webkit-mask-position: calc(50% - 0.6px) 50%, calc(50% + 0.6px) 50%, 50% calc(50% - 0.6px), 50% calc(50% + 0.6px);
		-webkit-mask-size: 100% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-image: url("../masks/system-line-r2.svg?v=e4a3adade521"), url("../masks/system-line-r2.svg?v=e4a3adade521"), url("../masks/system-line-r2.svg?v=e4a3adade521"), url("../masks/system-line-r2.svg?v=e4a3adade521");
		mask-position: calc(50% - 0.6px) 50%, calc(50% + 0.6px) 50%, 50% calc(50% - 0.6px), 50% calc(50% + 0.6px);
		mask-size: 100% 100%;
		mask-repeat: no-repeat;
	}

	.fct-what > .fct-what__note {
		--fct-note-rotate: -18deg;
		position: relative;
		z-index: 1;
		align-self: start;
		justify-self: start;
		max-width: none;
		margin: calc(var(--fct-what-gap) - var(--fct-what-w) * 0.01) 0 0 calc(var(--fct-what-x) + var(--wp--style--root--padding-left, 16px) + var(--fct-what-w) * 0.78);
		font-size: max(24px, calc(var(--fct-what-w) * 0.083));
		font-weight: 400;
		line-height: 1.05;
	}

	.fct-what .fct-what__note-line {
		display: block;
	}

	.fct-what .fct-what__note-line:nth-child(2) {
		margin-inline-start: 0.55em;
	}

	.fct-what .fct-what__note-line:nth-child(3) {
		margin-inline-start: 1.1em;
	}

	.fct-what .fct-work-collage__range {
		position: absolute;
		left: calc(-1 * var(--wp--style--root--padding-left, 16px) - var(--fct-what-w) * 0.3);
		top: calc(var(--fct-what-gap) + var(--fct-what-w) * 0.98);
		display: block;
		width: calc(var(--fct-what-w) * 0.8814);
		height: calc(var(--fct-what-w) * 0.5279);
		overflow: hidden;
		mix-blend-mode: multiply;
		pointer-events: none;
		-webkit-mask: url("../masks/r2-range-edge.svg?v=0380d33fa2fe") center / 100% 100% no-repeat;
		mask: url("../masks/r2-range-edge.svg?v=0380d33fa2fe") center / 100% 100% no-repeat;
	}

	.fct-what .fct-work-collage__range-img {
		position: absolute;
		left: calc(var(--fct-what-w) * -1.7624);
		top: calc(var(--fct-what-w) * -0.0523);
		width: calc(var(--fct-what-w) * 2.9378);
		max-width: none;
		height: auto;
		filter: contrast(1.12) brightness(1.02);
	}
}

/*
 * Narrowest phones (below 360 px): the outer section mountain would be a small,
 * accidental-looking fragment, so it drops (MO04: secondary decoration); the
 * pale mountain in the collage lobe stays. Collage position and size unchanged.
 */
@media (max-width: 359.98px) {
	.fct-what .fct-work-collage__range {
		display: none;
	}
}

/*
 * "Waar kunnen we je bij helpen?" (homepage fase 2, D-037): the three services
 * directly below R2's composition, as a sober editorial row: each service under
 * a hairline, its number, name and one sentence; no cards, fills or images.
 * Three columns from 900 px (R2's switch), on R2's text edge (6.5 cqw);
 * stacked below. R2's Gold CTA, moved here from R2's text column, closes the
 * section with its approved treatment. Top space: on phones R2's section
 * mountain and AI credit run up to 48 px past R2's foot, so 96 px keeps the
 * label clear of them; from 600 px both end on the foot (64 px).
 */
.fct-services {
	container-type: inline-size;
	padding-block-start: var(--wp--preset--spacing--3-xl);
	padding-inline: var(--wp--style--root--padding-left, 16px) var(--wp--style--root--padding-right, 16px);
}

.fct-services > *,
.fct-services .fct-services__list > *,
.fct-services .fct-services__item > * {
	margin-block: 0;
}

.fct-services .fct-services__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-block-start: var(--wp--preset--spacing--m);
}

.fct-services .fct-services__item {
	max-width: 33em;
	padding-block: 20px 24px;
	border-top: 1px solid rgb(18 56 61 / 22%);
}

.fct-services .fct-services__name {
	font-size: var(--wp--preset--font-size--card);
	line-height: 1.15;
	text-wrap: balance;
}

.fct-services .fct-services__number {
	display: block;
	margin-block-end: 10px;
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.18em;
	line-height: 1.2;
}

.fct-services .fct-services__text {
	margin-block-start: var(--wp--preset--spacing--xs);
}

.fct-services .fct-services__actions {
	margin-block-start: var(--wp--preset--spacing--l);
}

/*
 * R2's CTA, in proportion to R2's text column (R2's left column is ≈ 1.3× ours:
 * headline line pitch 98 vs 77.5 px, body 39 vs 29 px at 1440). R2's pill
 * 333 × 90 px, bold label ≈ 20 px cap height, arrow 25 px, 23 px from the
 * label, side padding 58 / 55 px → here ÷ 1.3, then lightened to sit with
 * the body copy: 66 px tall, 292 px wide, Inter 18 px 600, arrow 22 px,
 * 18 px gap, padding 43 / 40 px; on phones narrower side padding, so it fits
 * 320. Only this CTA; the shared button component keeps its size.
 */
.fct-services .fct-services__actions .wp-block-button__link {
	min-height: 66px;
	padding: 12px 26px 12px 28px;
	gap: 18px;
	border-radius: 33px;
	font-size: 18px;
	font-weight: 600;
}

/* R2's arrow is heavier than the shared one: larger, so its stroke thickens with it (≈ 2.2 px). */
.fct-services .fct-services__actions .wp-block-button__link::after {
	width: 22px;
	height: 22px;
}

@media (min-width: 600px) {
	.fct-services {
		padding-block-start: var(--wp--preset--spacing--2-xl);
	}

	.fct-services .fct-services__actions .wp-block-button__link {
		padding: 12px 40px 12px 43px;
	}
}

@media (min-width: 900px) {
	.fct-services {
		padding-inline: 0;
	}

	.fct-services > * {
		margin-inline: 6.5cqw;
	}

	.fct-services .fct-services__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 3.4cqw;
		margin-block-start: var(--wp--preset--spacing--l);
	}

	.fct-services .fct-services__item {
		max-width: none;
		padding-block: 24px 0;
	}

	.fct-services .fct-services__text {
		max-width: 22em;
	}

	.fct-services .fct-services__actions {
		margin-block-start: var(--wp--preset--spacing--xl);
	}
}

/*
 * "In de praktijk" (R3; docs/HOMEPAGE.md, Gate 3d design baseline, frozen
 * 2026-09-30). A calm context section after R2: text column, a handwritten
 * margin note, three context cards (not links, not headings). Built from the
 * reviewed mock (qa/tools/r3-layout-review.mjs); every value below lands on
 * the reviewed measurement at 1440, 1024, 768, 600, 599, 480, 390, 360 and
 * 320, and runs linearly between them.
 *
 * The section is the grid and the query container (cqw = 1 % of its width;
 * it has no inline padding, so that is the page width). Column 1 carries the
 * content, each item with the page margin (R2's: 6.5 % from 900 px, the root
 * padding below); column 2 is zero wide at the right edge: the note's area.
 * The note is positioned inside the grid area of the row it annotates
 * (headline, body or CTA), so it never moves the flow; on phones it takes its
 * own row below the CTA.
 */
.fct-practice {
	--fct-practice-m: clamp(16px, 5cqw, 32px);
	--fct-practice-gap-title: 12px;
	--fct-practice-gap-body: 20px;
	--fct-practice-gap-actions: 28px;
	--fct-practice-gap-cards: 40px;
	/*
	 * The note's rotated glyphs reach past its box (above more than below:
	 * Caveat's ascenders) and end just inside it on the right. Measured once
	 * against the reviewed mock, in em, since they scale with the note.
	 */
	--fct-practice-note-reach-x: -0.037em;
	--fct-practice-note-reach-top: 0.7em;
	--fct-practice-note-reach-bottom: 0.575em;
	--fct-practice-note-dy: 0em;

	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 0;
	grid-template-areas:
		"label ."
		"title ."
		"body ."
		"actions ."
		"note ."
		"cards cards";
	container-type: inline-size;
	padding-inline: 0;
}

.fct-practice > * {
	margin-block: 0;
	margin-inline: var(--fct-practice-m);
}

.fct-practice > .fct-practice__label { grid-area: label; }
.fct-practice > .fct-practice__title { grid-area: title; }
.fct-practice > .fct-practice__body { grid-area: body; }
.fct-practice > .fct-practice__actions { grid-area: actions; }
.fct-practice > .fct-practice__note { grid-area: note; }
.fct-practice > .fct-practice__cards { grid-area: cards; }

.fct-practice .fct-practice__title {
	margin-block-start: var(--fct-practice-gap-title);
	/* R3-specific sizes, kept below R2's H2 at every width (≈ 0.79 ×); no preset yet. */
	font-size: min(30px, 28px + (100cqw - 320px) * 0.028571);
	line-height: 1.02;
}

/* Phones: each sentence wraps into two balanced lines. */
.fct-practice .fct-practice__title-line {
	display: block;
	text-wrap: balance;
}

.fct-practice .fct-practice__body {
	max-width: min(560px, 100cqw - 2 * var(--fct-practice-m));
	margin-block-start: var(--fct-practice-gap-body);
	font-size: var(--wp--preset--font-size--body);
}

.fct-practice .fct-practice__actions {
	margin-block-start: var(--fct-practice-gap-actions);
}

/* The dark CTA at R2's CTA size (66 px); the shared 18 px arrow. Phones: R2's narrower side padding. */
.fct-practice .fct-practice__actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	min-height: 66px;
	padding: 12px 26px 12px 28px;
	border-radius: 33px;
	font-size: 18px;
	font-weight: 600;
}

/*
 * The note: R3's margin annotation. Not R2's note: smaller and flatter
 * (−11°), rotated around its centre, its glyphs' right edge on the page
 * margin. Phones: below the CTA, 28 px under it, the cards 40 px under the note.
 */
.fct-practice .fct-practice__note {
	--fct-note-rotate: -11deg;

	justify-self: end;
	max-width: none;
	margin-block: calc(28px + var(--fct-practice-note-reach-top)) var(--fct-practice-note-reach-bottom);
	margin-inline: 0 calc(var(--fct-practice-m) + var(--fct-practice-note-reach-x));
	font-size: min(26px + (100cqw - 320px) * 0.028571, 28px + (100cqw - 390px) * 0.011111);
	font-weight: 400;
	line-height: 1.05;
	transform-origin: center;
}

.fct-practice .fct-practice__note-line {
	display: block;
	white-space: nowrap;
}

.fct-practice .fct-practice__note-line + .fct-practice__note-line {
	margin-inline-start: 0.55em;
}

.fct-practice .fct-practice__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	/* Phones: 40 px below the note's glyphs (the note's bottom margin carries their reach). */
	margin-block-start: var(--fct-practice-gap-cards);
}

.fct-practice .fct-practice__cards > * {
	margin: 0;
}

/* The AI caption for the three card images (Phase 6B.2): the group's first child, so phones show it (and screen
   readers read it) before the first card; from 900 px, with the cards side by side, it is placed as their last row. */
.fct-practice .fct-practice__cards > .fct-ai-credit {
	grid-column: 1 / -1;
	margin: 0;
}

/* The frozen 1.68 crop (864 × 514) at every width; no other crop. */
.fct-practice .fct-practice__card {
	--fct-card-ratio: 864 / 514;
}

.fct-practice .fct-practice__card .fct-card__image img {
	width: 100%;
	height: auto;
}

/* Statements: short observations, not headings (24 / 600 at 1440, not the 28 px card preset). */
.fct-practice .fct-practice__statement {
	margin: 0;
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(19px, 19px + (100cqw - 320px) / 40, 20px);
	font-weight: 600;
	line-height: 1.15;
}

/* 360–599 px: R2's section mountain reaches 47 px below R2; 40 px more room so it ends in paper. */
@media (min-width: 360px) and (max-width: 599.98px) {
	.fct-practice.is-style-section {
		padding-block-start: calc(var(--wp--preset--spacing--section) + 40px);
	}
}

/* 460–599 px: the two sentence lines fit (29 px at 480, 33 px at 599). */
@media (min-width: 460px) {
	.fct-practice .fct-practice__title {
		font-size: calc(29px + (100cqw - 480px) * 0.033613);
	}

	/* The two sentence lines fit every width from 460 px at normal spacing (checked per width, a fresh load each:
	   ≥ 0.8 px to spare), so they do not wrap; with a reader's larger text spacing (WCAG 1.4.12) they may, instead of
	   running out of the page (Phase 6A; was nowrap). */
	.fct-practice .fct-practice__title-line {
		white-space: normal;
	}
}

/*
 * From 540 px: the note moves onto the CTA row, and the cards become one
 * list of horizontal cards (photo left at 42 %, text right), easy to compare
 * one under the other.
 */
@media (min-width: 540px) {
	.fct-practice {
		grid-template-areas:
			"label ."
			"title ."
			"body ."
			"actions note"
			"cards cards";
	}

	.fct-practice .fct-practice__note {
		--fct-practice-note-row-gap: var(--fct-practice-gap-actions);

		position: absolute;
		top: calc(var(--fct-practice-note-row-gap) + (100% - var(--fct-practice-note-row-gap)) / 2);
		right: calc(var(--fct-practice-m) + var(--fct-practice-note-reach-x));
		margin: 0;
		font-size: 30px;
		transform: translateY(calc(-50% + var(--fct-practice-note-dy))) rotate(var(--fct-note-rotate));
	}

	.fct-practice .fct-practice__cards {
		gap: 16px;
		margin-block-start: var(--fct-practice-gap-cards);
	}

	.fct-practice .fct-practice__card {
		flex-direction: row;
		align-items: stretch;
	}

	.fct-practice .fct-practice__card .fct-card__image {
		flex: 0 0 42%;
	}

	.fct-practice .fct-practice__card .fct-card__body {
		justify-content: center;
	}

	.fct-practice .fct-practice__statement {
		font-size: 18px;
	}
}

/* WCAG 1.4.12, 540–899 px (Phase 6A, final round): the CTA and the note share a row; with a reader's larger text
   spacing both grow and meet below ≈ 700 px. Then the CTA gets room below it: the row grows and the note, centred in
   the row, moves under the CTA. The switch is the CTA's own line height against its designed 1.25: 1lh − 1.25em is
   exactly 0 at normal spacing (margin 0, the composition unchanged), and from 1 px more the margin takes its maximum. */
@media (min-width: 540px) and (max-width: 899.98px) {
	.fct-practice .fct-practice__actions .wp-block-button__link {
		margin-block-end: clamp(0px, (1lh - 1.25em - 1px) * 1000, 250px);
	}
}

/* Tablet (600–899 px): wider gaps, the desktop CTA padding, sizes growing to 768. */
@media (min-width: 600px) {
	.fct-practice {
		--fct-practice-gap-body: 24px;
		--fct-practice-gap-actions: 32px;
		--fct-practice-gap-cards: 48px;
	}

	.fct-practice .fct-practice__title {
		font-size: calc(36px + (100cqw - 600px) * 0.035714);
	}

	.fct-practice .fct-practice__actions .wp-block-button__link {
		padding: 12px 40px 12px 43px;
	}

	.fct-practice .fct-practice__note {
		font-size: calc(30px + (100cqw - 600px) * 0.02381);
	}

	.fct-practice .fct-practice__cards {
		gap: calc(16px + (100cqw - 600px) * 0.02381);
	}

	.fct-practice .fct-practice__statement {
		font-size: calc(18px + (100cqw - 600px) * 0.011905);
	}
}

/*
 * Desktop (from 900 px): R2's margin (6.5 %), three cards in a row as in R3,
 * 29 px (2 %) further left than the text and 2.4 % from the right edge. The
 * note beside the body; from 1400 px beside the headline (R3's place).
 * 1024 → 1440 grow linearly to the frozen 1440 values.
 */
@media (min-width: 900px) {
	.fct-practice {
		--fct-practice-m: 6.5cqw;
		--fct-practice-gap-title: clamp(12px, 12px + (100cqw - 1024px) * 0.004808, 14px);
		--fct-practice-gap-body: clamp(24px, 24px + (100cqw - 1024px) * 0.012019, 29px);
		--fct-practice-gap-actions: clamp(32px, 32px + (100cqw - 1024px) * 0.016827, 39px);
		--fct-practice-gap-cards: clamp(48px, 48px + (100cqw - 1024px) * 0.038462, 64px);

		grid-template-areas:
			"label ."
			"title ."
			"body note"
			"actions ."
			"cards cards";
	}

	.fct-practice .fct-practice__title {
		font-size: clamp(44px, 44px + (100cqw - 1024px) * 0.038462, 60px);
	}

	.fct-practice .fct-practice__body {
		max-width: clamp(456px, 480px + (100cqw - 1024px) * 0.192308, 560px);
	}

	.fct-practice .fct-practice__note {
		--fct-practice-note-row-gap: var(--fct-practice-gap-body);

		font-size: clamp(37px, 40px + (100cqw - 1024px) * 0.021635, 49px);
	}

	.fct-practice .fct-practice__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(19px, 20px + (100cqw - 1024px) * 0.004808, 22px);
		margin-inline: calc(6.5cqw - 2.014cqw) 2.43cqw;
	}

	.fct-practice .fct-practice__cards > .fct-ai-credit {
		grid-row: 2;
	}

	.fct-practice .fct-practice__card {
		flex-direction: column;
	}

	.fct-practice .fct-practice__card .fct-card__image {
		flex: none;
	}

	/* In the row the texts start on one line, under the photos (not centred in the card). */
	.fct-practice .fct-practice__card .fct-card__body {
		justify-content: flex-start;
	}

	.fct-practice .fct-practice__statement {
		font-size: clamp(20px, 20px + (100cqw - 1024px) * 0.009615, 24px);
	}
}

@media (min-width: 1400px) {
	.fct-practice {
		grid-template-areas:
			"label ."
			"title note"
			"body ."
			"actions ."
			"cards cards";
	}

	/* Beside the headline the glyphs centre 0.065 em lower than the row's box. */
	.fct-practice .fct-practice__note {
		--fct-practice-note-row-gap: var(--fct-practice-gap-title);
		--fct-practice-note-dy: 0.065em;
	}

	/* WCAG 1.4.12 (Phase 6A, final round): with a reader's larger text spacing the headline grows into the note beside
	   it (1400–1700 px); then it wraps short of the note (≤ 438 px wide there, 480 px kept free). The switch is the
	   headline's own line height against its designed 1.02: at normal spacing the bound is 100cqw, wider than its
	   column, so nothing changes. */
	.fct-practice .fct-practice__title {
		max-width: clamp(calc(100cqw - 2 * var(--fct-practice-m) - 480px), calc(100cqw + (1.02em + 1px - 1lh) * 1000), 100cqw);
	}
}

/*
 * "Onze aanpak" (R4): introduction, four ordered steps with the progressive
 * system marks, R4's Gold movement and the handwritten note. Built from the
 * frozen Gate 3e baseline (docs/HOMEPAGE.md, qa/tools/r4-responsive-review.mjs):
 * every value lands on the reviewed measurement at 1440, 1024, 768, 600, 599,
 * 480, 390, 360 and 320 and runs linearly between them.
 *
 * The section is the query container (cqw = 1 % of the page width). The steps
 * group holds the ordered list, the note and, as its pseudo-elements, the Gold
 * movement (::before) and the note's arrow (::after): R4's own traced marks
 * (assets/masks/r4-*.svg, qa/tools/build-r4-runtime.mjs), all placed with one
 * scale from R4's panel pixels, --fct-approach-k (the length of one R4 px):
 *   ≥ 900  R4's composition: steps from 33.4 % of the width; R4's disc 1 → disc 4
 *          onto step 1 → step 4, so the movement starts above step 1 and curls
 *          down at step 4;
 *   600–899 the same drawing in a band between the text and the row of steps,
 *          its ends still on steps 1 and 4;
 *   < 600  the drawing across the content width, in a band above the list.
 * R4 constants (panel px, see qa/screenshots/phase-3/r4/marks/marks.json):
 * movement 285.54 × 105.29 at 18.27 right of and 94.8 above disc 1's corner;
 * arrow 8.11 × 38.3 at 284.95 right of and 100.13 above it; disc 1 is 35.71
 * deep; disc 1 → disc 4 is 236.46.
 * The note is centred at a point: 3.221 em in from the steps' right edge, and
 * 0.514 em plus 5 R4 px above the arrow's top (the end of "movements." sits
 * just above the arrow, as in R4); its glyphs reach 1.647 em above that centre.
 */
.fct-approach {
	--fct-approach-m: clamp(16px, 5cqw, 32px);
	--fct-approach-gap-title: 12px;
	--fct-approach-gap-body: 20px;
	--fct-approach-rule: color-mix(in srgb, var(--wp--preset--color--charcoal) 16%, transparent);

	position: relative;
	container-type: inline-size;
	padding-inline: 0;
}

.fct-approach > * {
	margin-block: 0;
	margin-inline: var(--fct-approach-m);
}

.fct-approach .fct-approach__title {
	margin-block-start: var(--fct-approach-gap-title);
	/* As R3 at every width (the two sections share their headline size). */
	font-size: min(30px, 28px + (100cqw - 320px) * 0.028571);
	line-height: 1.02;
}

.fct-approach .fct-approach__title-line {
	display: block;
	white-space: nowrap;
}

.fct-approach .fct-approach__body {
	max-width: min(560px, 100cqw - 2 * var(--fct-approach-m));
	margin-block-start: var(--fct-approach-gap-body);
	font-size: var(--wp--preset--font-size--body);
}

.fct-approach .fct-approach__steps {
	position: relative;
}

.fct-approach .fct-approach__list {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fct-approach-step;
}

.fct-approach .fct-approach__list > li {
	position: relative;
	margin: 0;
	counter-increment: fct-approach-step;
}

/* The step marks: decorative (the list carries the order), Charcoal on the paper, no disc. */
.fct-approach .fct-approach__list > li::before {
	content: "";
	position: absolute;
	width: var(--fct-approach-mark);
	height: var(--fct-approach-mark);
	background-color: var(--wp--preset--color--charcoal);
	-webkit-mask: var(--fct-approach-mark-image) center / 100% 100% no-repeat;
	mask: var(--fct-approach-mark-image) center / 100% 100% no-repeat;
	pointer-events: none;
}

.fct-approach .fct-approach__step-label,
.fct-approach .fct-approach__step-text {
	display: block;
}

/* The numeral: Forest, not Gold (S05); silent to assistive technology, the ordered list already numbers. */
.fct-approach .fct-approach__step-label::before {
	content: counter(fct-approach-step) / "";
	display: block;
	margin-block-end: 8px;
	color: var(--wp--preset--color--forest);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--fct-approach-numeral, 14px);
	font-weight: 600;
	line-height: 1;
}

.fct-approach .fct-approach__step-label {
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--fct-approach-label);
	font-weight: 600;
	line-height: 1.2;
}

.fct-approach .fct-approach__step-text {
	margin-block-start: 6px;
	color: var(--wp--preset--color--charcoal);
	font-size: var(--fct-approach-text);
	line-height: 1.45;
}

/* The Gold movement and the arrow: R4's traced marks, decorative, behind the steps' text. */
.fct-approach .fct-approach__steps::before,
.fct-approach .fct-approach__steps::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.fct-approach .fct-approach__steps::before {
	z-index: 0;
	background-color: var(--wp--preset--color--gold);
	-webkit-mask: url("../masks/r4-stroke.svg?v=1274fa4c6ec3") center / 100% 100% no-repeat;
	mask: url("../masks/r4-stroke.svg?v=1274fa4c6ec3") center / 100% 100% no-repeat;
}

.fct-approach .fct-approach__steps::after {
	z-index: 2;
	background-color: var(--wp--preset--color--charcoal);
	-webkit-mask: url("../masks/r4-arrow.svg?v=000e7122fd6c") center / 100% 100% no-repeat;
	mask: url("../masks/r4-arrow.svg?v=000e7122fd6c") center / 100% 100% no-repeat;
}

.fct-approach .fct-approach__note {
	position: absolute;
	z-index: 2;
	left: calc(100% - 3.221em);
	top: var(--fct-approach-note-y);
	max-width: none;
	margin: 0;
	font-size: var(--fct-approach-note);
	font-weight: 400;
	line-height: 1.05;
	transform: translate(-50%, -50%) rotate(-16deg);
	transform-origin: center;
}

.fct-approach .fct-approach__note-line {
	display: block;
}

/* WCAG 1.4.12 (Phase 6A): at normal spacing the note is 6.03–6.05em wide, its lines never wrap; with a reader's larger
   text spacing they wrap within that width instead of running out of the page at 480–320 px. */
.fct-approach .fct-approach__note {
	width: max-content;
	max-width: 6.1em;
}

.fct-approach .fct-approach__note-line + .fct-approach__note-line {
	margin-inline-start: 0.9em;
}

/* The marks at their drawn size: 72 px in the list, 64 px in the band (and up to 1115 px), then 72, then 82. */
.fct-approach .fct-approach__list > li:nth-child(1) { --fct-approach-mark-image: url("../masks/r4-mark-1-72.svg?v=d646c0b1957c"); }
.fct-approach .fct-approach__list > li:nth-child(2) { --fct-approach-mark-image: url("../masks/r4-mark-2-72.svg?v=179a8ba9fd87"); }
.fct-approach .fct-approach__list > li:nth-child(3) { --fct-approach-mark-image: url("../masks/r4-mark-3-72.svg?v=b0ccb0aa66e5"); }
.fct-approach .fct-approach__list > li:nth-child(4) { --fct-approach-mark-image: url("../masks/r4-mark-4-72.svg?v=0ec00f2496c5"); }

/*
 * Phones (< 600 px): text; a band with the note, arrow and the movement across
 * the content width (its lowest point 16 px above the list); the steps as a
 * list 1 → 4, mark left, text right, a hairline between rows. The arrow keeps
 * at least 1.6 × its R4 size (round its tip, which stays on the movement), so
 * the note clears the movement's top. The band keeps the note and the movement
 * 28 px from the body's last line (3.6 px: that line's box below its glyphs).
 */
@media (max-width: 599.98px) {
	.fct-approach {
		--fct-approach-k: calc((100cqw - 2 * var(--fct-approach-m)) / 285.54);
		--fct-approach-ka: max(var(--fct-approach-k), 1.6px);
		--fct-approach-mark: 72px;
		--fct-approach-label: min(20px, 19px + (100cqw - 320px) * 0.025);
		--fct-approach-text: 16px;
		--fct-approach-note: calc(24.5px + (100cqw - 320px) * 0.0125);
		--fct-approach-arrow-top: calc(-16px - 72.32 * var(--fct-approach-k) - 38.3 * var(--fct-approach-ka));
		--fct-approach-note-y: calc(var(--fct-approach-arrow-top) - 5 * var(--fct-approach-ka) - 0.514 * var(--fct-approach-note));
	}

	.fct-approach .fct-approach__steps {
		margin-block-start: calc(28px - 3.6px + max(16px + 72.32 * var(--fct-approach-k) + 43.3 * var(--fct-approach-ka) + 2.161 * var(--fct-approach-note), 16px + 105.29 * var(--fct-approach-k)));
	}

	.fct-approach .fct-approach__list > li {
		min-height: var(--fct-approach-mark);
		padding: 16px 0 16px calc(var(--fct-approach-mark) + 18px);
		border-top: 1px solid var(--fct-approach-rule);
	}

	.fct-approach .fct-approach__list > li:last-child {
		border-bottom: 1px solid var(--fct-approach-rule);
	}

	.fct-approach .fct-approach__list > li::before {
		top: 16px;
		left: 0;
	}

	.fct-approach .fct-approach__step-label::before {
		margin-block-end: 6px;
	}

	.fct-approach .fct-approach__steps::before {
		left: 0;
		top: calc(-16px - 105.29 * var(--fct-approach-k));
		width: calc(285.54 * var(--fct-approach-k));
		height: calc(105.29 * var(--fct-approach-k));
	}

	.fct-approach .fct-approach__steps::after {
		left: calc(266.68 * var(--fct-approach-k));
		top: var(--fct-approach-arrow-top);
		width: calc(8.11 * var(--fct-approach-ka));
		height: calc(38.3 * var(--fct-approach-ka));
	}
}

@media (min-width: 360px) and (max-width: 599.98px) {
	.fct-approach {
		--fct-approach-note: calc(25px + (100cqw - 360px) * 0.033333);
	}
}

@media (min-width: 390px) and (max-width: 599.98px) {
	.fct-approach {
		--fct-approach-note: calc(26px + (100cqw - 390px) * 0.011111);
	}
}

/* 460–599 px: the headline as R3 (29 px at 480, 33 px at 599). */
@media (min-width: 460px) {
	.fct-approach .fct-approach__title {
		font-size: calc(29px + (100cqw - 480px) * 0.033613);
	}
}

@media (min-width: 480px) and (max-width: 599.98px) {
	.fct-approach {
		--fct-approach-note: calc(27px + (100cqw - 480px) * 0.008403);
	}
}

/*
 * 600–959 px: text across the width; a band holding the note, the arrow and the
 * movement (32 px from the body's last line), its ends on steps 1 and 4; the
 * four steps in one row (the reading stays 1 → 4, left to right), each with a
 * hairline on its left. R4's disc 1 sits 8.4 R4 px above mark 1.
 */
@media (min-width: 600px) {
	.fct-approach {
		--fct-approach-gap-body: 24px;
		--fct-approach-k: calc((100cqw - 2 * var(--fct-approach-m)) / 315.28);
		--fct-approach-inset: calc(12px + (100cqw - 600px) * 0.035714);
		--fct-approach-mark: 64px;
		--fct-approach-numeral-gap: 12px;
		--fct-approach-label: calc(18px + (100cqw - 600px) * 0.011905);
		--fct-approach-text: calc(15px + (100cqw - 600px) * 0.005952);
		--fct-approach-note: calc(28px + (100cqw - 600px) * 0.02381);
		--fct-approach-note-y: calc(-113.53 * var(--fct-approach-k) - 0.514 * var(--fct-approach-note));
	}

	.fct-approach .fct-approach__title {
		font-size: calc(36px + (100cqw - 600px) * 0.035714);
	}

	.fct-approach .fct-approach__steps {
		margin-block-start: calc(32px - 3.6px + max(113.53 * var(--fct-approach-k) + 2.161 * var(--fct-approach-note), 103.2 * var(--fct-approach-k)));
	}

	.fct-approach .fct-approach__list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.fct-approach .fct-approach__list > li {
		padding: calc(var(--fct-approach-mark) + var(--fct-approach-numeral-gap)) 8px 0 var(--fct-approach-inset);
		border-left: 1px solid var(--fct-approach-rule);
	}

	.fct-approach .fct-approach__list > li::before {
		top: 0;
		left: var(--fct-approach-inset);
	}

	.fct-approach .fct-approach__list > li:nth-child(1) { --fct-approach-mark-image: url("../masks/r4-mark-1-64.svg?v=5b46d016054d"); }
	.fct-approach .fct-approach__list > li:nth-child(2) { --fct-approach-mark-image: url("../masks/r4-mark-2-64.svg?v=898ad4864da0"); }
	.fct-approach .fct-approach__list > li:nth-child(3) { --fct-approach-mark-image: url("../masks/r4-mark-3-64.svg?v=bc79779c8e3d"); }
	.fct-approach .fct-approach__list > li:nth-child(4) { --fct-approach-mark-image: url("../masks/r4-mark-4-64.svg?v=08766e71caf1"); }

	.fct-approach .fct-approach__steps::before {
		left: calc(var(--fct-approach-inset) + 18.27 * var(--fct-approach-k));
		top: calc(-103.2 * var(--fct-approach-k));
		width: calc(285.54 * var(--fct-approach-k));
		height: calc(105.29 * var(--fct-approach-k));
	}

	.fct-approach .fct-approach__steps::after {
		left: calc(var(--fct-approach-inset) + 284.95 * var(--fct-approach-k));
		top: calc(-108.53 * var(--fct-approach-k));
		width: calc(8.11 * var(--fct-approach-k));
		height: calc(38.3 * var(--fct-approach-k));
	}
}

/*
 * 600–615 px: the movement 1 px higher, so its tapered end keeps 10 px from mark 4
 * (the band's narrowest widths; docs/HOMEPAGE.md, Gate 3e clearance).
 */
@media (min-width: 600px) and (max-width: 615.98px) {
	.fct-approach .fct-approach__steps::before {
		top: calc(-103.2 * var(--fct-approach-k) - 1px);
	}
}

/*
 * 900–959 px: the headline as R3 at the same width (R3's desktop rule from 900;
 * the band still holds R4's layout). The block keeps the band headline's height,
 * so nothing below it moves.
 */
@media (min-width: 900px) and (max-width: 959.98px) {
	.fct-approach .fct-approach__title {
		font-size: clamp(44px, 44px + (100cqw - 1024px) * 0.038462, 60px);
		min-height: calc(2 * 1.02 * (36px + (100cqw - 600px) * 0.035714));
	}
}

/*
 * Desktop (from 960 px): R4's composition (the band holds to 959 px: narrower,
 * the composition's movement comes within 10 px of mark 4). R2's margin (6.5 %);
 * a narrow text column (400 px at 1024, 560 at 1440: R4's proportion, clear of the movement);
 * the steps from R4's first rule (33.4 %) to the right margin, in four equal
 * columns with R4's inset (2.57 %). The marks sit one line above the numerals
 * (R4's disc depth, less their lift) and grow from 64 px (1024) to 82 px (1440);
 * 1024 → 1440 grow linearly to the frozen 1440 values.
 */
@media (min-width: 960px) {
	.fct-approach {
		--fct-approach-m: 6.5cqw;
		--fct-approach-gap-title: clamp(12px, 12px + (100cqw - 1024px) * 0.004808, 14px);
		--fct-approach-gap-body: clamp(24px, 24px + (100cqw - 1024px) * 0.012019, 29px);
		--fct-approach-k: 0.19063cqw;
		--fct-approach-inset: 2.57cqw;
		--fct-approach-mark: clamp(64px, 64px + (100cqw - 1024px) * 0.043269, 82px);
		--fct-approach-lift: clamp(-14px, -14px + (100cqw - 1024px) * 0.016827, -7px);
		--fct-approach-numeral: clamp(14px, 14px + (100cqw - 1024px) * 0.004808, 16px);
		--fct-approach-numeral-gap: clamp(12px, 12px + (100cqw - 1024px) * 0.009615, 16px);
		--fct-approach-label: clamp(20px, 20px + (100cqw - 1024px) * 0.004808, 22px);
		--fct-approach-text: clamp(16px, 16px + (100cqw - 1024px) * 0.004808, 18px);
		--fct-approach-note: clamp(37.5px, 37.5px + (100cqw - 1024px) * 0.020433, 46px);
		--fct-approach-note-y: calc(-105.13 * var(--fct-approach-k) - 0.514 * var(--fct-approach-note));
	}

	.fct-approach .fct-approach__title {
		font-size: clamp(44px, 44px + (100cqw - 1024px) * 0.038462, 60px);
	}

	.fct-approach .fct-approach__body {
		max-width: clamp(352px, 400px + (100cqw - 1024px) * 0.384615, 560px);
	}

	.fct-approach .fct-approach__steps {
		margin-block-start: clamp(19.2px, 24.2px - (100cqw - 1024px) * 0.012019, 25.7px);
		margin-inline-start: 33.4cqw;
	}

	.fct-approach .fct-approach__list > li {
		padding: calc(35.71 * var(--fct-approach-k) + var(--fct-approach-numeral-gap)) 12px 0 var(--fct-approach-inset);
	}

	.fct-approach .fct-approach__list > li::before {
		top: calc(35.71 * var(--fct-approach-k) - var(--fct-approach-mark) - var(--fct-approach-lift));
	}

	.fct-approach .fct-approach__step-label::before {
		font-size: var(--fct-approach-numeral);
	}

	.fct-approach .fct-approach__steps::before {
		top: calc(-94.8 * var(--fct-approach-k));
	}

	.fct-approach .fct-approach__steps::after {
		top: calc(-100.13 * var(--fct-approach-k));
	}
}

@media (min-width: 1116px) {
	.fct-approach .fct-approach__list > li:nth-child(1) { --fct-approach-mark-image: url("../masks/r4-mark-1-72.svg?v=d646c0b1957c"); }
	.fct-approach .fct-approach__list > li:nth-child(2) { --fct-approach-mark-image: url("../masks/r4-mark-2-72.svg?v=179a8ba9fd87"); }
	.fct-approach .fct-approach__list > li:nth-child(3) { --fct-approach-mark-image: url("../masks/r4-mark-3-72.svg?v=b0ccb0aa66e5"); }
	.fct-approach .fct-approach__list > li:nth-child(4) { --fct-approach-mark-image: url("../masks/r4-mark-4-72.svg?v=0ec00f2496c5"); }
}

@media (min-width: 1324px) {
	.fct-approach .fct-approach__list > li:nth-child(1) { --fct-approach-mark-image: url("../masks/r4-mark-1-82.svg?v=63d57d15437a"); }
	.fct-approach .fct-approach__list > li:nth-child(2) { --fct-approach-mark-image: url("../masks/r4-mark-2-82.svg?v=9ee704dd6fcc"); }
	.fct-approach .fct-approach__list > li:nth-child(3) { --fct-approach-mark-image: url("../masks/r4-mark-3-82.svg?v=e69a719d4c58"); }
	.fct-approach .fct-approach__list > li:nth-child(4) { --fct-approach-mark-image: url("../masks/r4-mark-4-82.svg?v=e57df278ef92"); }
}

/*
 * Above 1440 px (no frozen width): the movement keeps growing with the page
 * while the text column is at its 1440 size, so the band above the steps
 * outgrows it. The top padding grows just enough to keep the note where it is
 * at 1440 (its glyphs 48.8 px below the section's top; the text column above
 * the steps is then 316.5 px): max(section token, note rise + 48.8 − 316.5).
 */
@media (min-width: 1441px) {
	.fct-approach.is-style-section {
		padding-block-start: max(var(--wp--preset--spacing--section), 105.13 * var(--fct-approach-k) + 2.161 * var(--fct-approach-note) - 267.7px);
	}
}

/*
 * "Inzichten" — a frozen visual shell with provisional content (docs/HOMEPAGE.md;
 * Gate 3g). R6-derived, deliberately lighter and more functional than R4 and the
 * Featured Case: no arrows, photos, Gold shapes, cards or collage beyond what is
 * here. The resources (titles, summaries, the still, the link targets) and the
 * marker's words are provisional; the composition is not.
 * DOM = reading order at every width: eyebrow, H2, body, CTA, marker, then the
 * article, the video and the tool. The visual order matches it everywhere (the row
 * left to right, the list top to bottom).
 *
 * < 960 px: a hairline list (measure 560 px); the video's still beside its text
 * from 480 px (46 %), full width (16:9) below. CTA beside the body from 768 px
 * (the body keeps ≥ 420 px), below it under 768 px. The marker ("Read. Watch.
 * Try.", R6's handwriting on Gold) top right from 600 px; at 480–599 px right-
 * aligned between the intro and the list; hidden below 480 px (approved: on small
 * phones it read as a second button or a banner over the list).
 * From 960 px (R4's switch): the approved 1440 row, article / video / tool
 * 3 : 4 : 3. The H2 is R3's H2 at every width (R3's own rules, as R4).
 */
.fct-insights {
	--fct-ins-m: clamp(16px, 5cqw, 32px);

	position: relative;
	container-type: inline-size;
	padding-inline: 0;
}

.fct-insights > * {
	max-width: none;
	margin-block: 0;
	margin-inline: var(--fct-ins-m) 0;
}

.fct-insights .fct-insights__title {
	max-width: 640px;
	margin-block-start: 12px;
	font-size: min(30px, 28px + (100cqw - 320px) * 0.028571);
	line-height: 1.02;
}

.fct-insights .fct-insights__title-line {
	display: block;
}

.fct-insights .fct-insights__lead {
	width: calc(100cqw - 2 * var(--fct-ins-m));
	margin-block-start: 20px;
}

.fct-insights .fct-insights__body {
	max-width: min(560px, 100cqw - 2 * var(--fct-ins-m));
	margin: 0;
}

.fct-insights .fct-insights__actions {
	margin: 24px 0 0;
}

/* The marker: hidden below 480 px; in flow and right-aligned at 480–599 px. */
.fct-insights .fct-insights__note {
	--fct-note-rotate: -7deg;

	display: none;
	max-width: none;
	margin-block: 24px 0;
	margin-inline: auto calc(var(--fct-ins-m) + 10px);
	font-size: 24px;
	white-space: nowrap;
	transform-origin: center;
}

.fct-insights .fct-insights__items {
	display: grid;
	gap: 24px;
	margin-block: 28px 0;
	margin-inline: var(--fct-ins-m);
	padding: 0;
	list-style: none;
}

/* Variant B (Optimalisatie 3, D-031): the lead article with its image, then up to two text references, each
   under a hairline; no cards, no type labels, no other image. */
.fct-insights .fct-insights__item {
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--charcoal) 22%, transparent);
}

.fct-insights .fct-insights__item > * {
	max-width: 560px;
}

/* The lead's featured image: 16 : 9 over the lead's full column, the former still's radius. */
.fct-insights .fct-insights__item--lead > .fct-insights__media {
	max-width: none;
}

.fct-insights .fct-insights__media {
	aspect-ratio: 16 / 9;
	margin-block-end: 14px;
	overflow: hidden;
	border-radius: 10px;
}

.fct-insights .fct-insights__media-img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

/* The AI caption under the lead's image (Phase 6B.2): 10 px under the image, 12 px above the title. */
.fct-insights .fct-insights__credit {
	margin: -4px 0 12px;
}

.fct-insights .fct-insights__item-title {
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
}

.fct-insights .fct-insights__item--lead .fct-insights__item-title {
	font-size: clamp(22px, 20px + 1cqw, 30px);
	line-height: 1.15;
}

.fct-insights .fct-insights__summary {
	margin: 8px 0 0;
	color: color-mix(in srgb, var(--wp--preset--color--charcoal) 82%, transparent);
	font-size: 16px;
	line-height: 1.5;
}

.fct-insights .fct-insights__link {
	margin: 12px 0 0;
	font-size: 16px;
	font-weight: 600;
}

.fct-insights .fct-insights__link a {
	color: var(--wp--preset--color--forest);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.fct-insights .fct-insights__arrow {
	margin-inline-start: 8px;
}

@media (min-width: 460px) {
	.fct-insights .fct-insights__title {
		font-size: calc(29px + (100cqw - 480px) * 0.033613);
	}
}

/* From 480 px: the marker in flow. */
@media (min-width: 480px) {
	.fct-insights .fct-insights__note {
		display: block;
	}
}

/* From 600 px: the marker top right; more air in the list. */
@media (min-width: 600px) {
	.fct-insights .fct-insights__title {
		font-size: calc(36px + (100cqw - 600px) * 0.035714);
	}

	.fct-insights .fct-insights__note {
		position: absolute;
		right: calc(var(--fct-ins-m) + 12px);
		top: calc(var(--wp--preset--spacing--section) + 6px);
		margin: 0;
		font-size: 28px;
	}

	.fct-insights .fct-insights__items {
		gap: 36px;
		margin-block-start: 48px;
	}

	.fct-insights .fct-insights__item {
		padding-top: 16px;
	}
}

/* From 768 px: the CTA beside the body (the body keeps ≥ 420 px). */
@media (min-width: 768px) {
	.fct-insights .fct-insights__lead {
		display: flex;
		align-items: center;
		gap: 40px;
		margin-block-start: 24px;
	}

	.fct-insights .fct-insights__body {
		flex: 0 1 470px;
		max-width: 470px;
	}

	.fct-insights .fct-insights__actions {
		flex: none;
		margin: 0;
	}
}

@media (min-width: 900px) {
	.fct-insights .fct-insights__title {
		font-size: clamp(44px, 44px + (100cqw - 1024px) * 0.038462, 60px);
	}
}

/* 600–959 px: the references side by side under the lead; a single reference takes the full width (no empty half). */
@media (min-width: 600px) and (max-width: 959.98px) {
	.fct-insights .fct-insights__items {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 32px;
	}

	.fct-insights .fct-insights__item--lead,
	.fct-insights .fct-insights__items--2 .fct-insights__item--ref {
		grid-column: 1 / -1;
	}
}

/* 768–959 px (V1): the lead as a landscape row, its image 46 % left (the former video item's proportion). */
@media (min-width: 768px) and (max-width: 959.98px) {
	.fct-insights .fct-insights__item--lead:has(> .fct-insights__media) {
		display: grid;
		grid-template-columns: 46% minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: 28px;
		align-items: start;
	}

	.fct-insights .fct-insights__item--lead > .fct-insights__media {
		grid-column: 1;
		grid-row: 1 / span 3;
		margin: 0;
	}

	.fct-insights .fct-insights__item--lead:has(> .fct-insights__media) > :not(.fct-insights__media) {
		grid-column: 2;
	}

	/* The AI caption stays under the image, in its column (Phase 6B.2). */
	.fct-insights .fct-insights__item--lead > .fct-insights__credit {
		grid-column: 1;
		grid-row: 4;
		margin: 10px 0 0;
	}
}

/* 600–767 px (V2): the lead over the full width with the overview cards' shallow 2.4 : 1 image. */
@media (min-width: 600px) and (max-width: 767.98px) {
	.fct-insights .fct-insights__item--lead > .fct-insights__media {
		aspect-ratio: 2.4;
	}
}

/* From 960 px: the lead left (7 fr), the references stacked right (5 fr). */
@media (min-width: 960px) {
	.fct-insights {
		--fct-ins-m: 6.5cqw;
	}

	.fct-insights .fct-insights__note {
		right: calc(var(--fct-ins-m) + 24px);
		top: calc(var(--wp--preset--spacing--section) + 8px);
		font-size: clamp(30px, 30px + (100cqw - 1024px) * 0.024038, 40px);
	}

	.fct-insights .fct-insights__items {
		grid-template-columns: 7fr 5fr;
		grid-template-rows: auto 1fr;
		gap: 40px clamp(32px, 32px + (100cqw - 1024px) * 0.038462, 48px);
		margin-block-start: 72px;
	}

	.fct-insights .fct-insights__item {
		padding-top: 20px;
	}

	.fct-insights .fct-insights__item--lead {
		grid-row: 1 / span 2;
	}

	.fct-insights .fct-insights__item--ref {
		align-self: start;
	}

	.fct-insights .fct-insights__item--lead > .fct-insights__summary {
		max-width: 600px;
	}

	.fct-insights .fct-insights__media {
		margin-block-end: 18px;
	}

	.fct-insights .fct-insights__item--ref .fct-insights__item-title {
		font-size: clamp(20px, 20px + (100cqw - 1024px) * 0.009615, 24px);
		line-height: 1.18;
	}

	.fct-insights .fct-insights__summary {
		margin-top: 10px;
	}

	.fct-insights .fct-insights__link {
		margin-top: 16px;
	}

	/* One article only: the lead as a full landscape row (image 7 fr left, text 5 fr right, vertically centred),
	   so no second column stands empty. */
	.fct-insights .fct-insights__items--1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.fct-insights .fct-insights__items--1 .fct-insights__item--lead:has(> .fct-insights__media) {
		display: grid;
		grid-template-columns: 7fr 5fr;
		grid-template-rows: 1fr auto auto auto 1fr;
		column-gap: clamp(32px, 32px + (100cqw - 1024px) * 0.038462, 48px);
	}

	.fct-insights .fct-insights__items--1 .fct-insights__item--lead > .fct-insights__media {
		grid-column: 1;
		grid-row: 1 / -1;
		margin: 0;
	}

	.fct-insights .fct-insights__items--1 .fct-insights__item--lead:has(> .fct-insights__media) > :not(.fct-insights__media) {
		grid-column: 2;
	}

	.fct-insights .fct-insights__items--1 .fct-insights__item--lead > .fct-insights__credit {
		grid-column: 1;
		grid-row: -1;
		margin: 10px 0 0;
	}

	.fct-insights .fct-insights__items--1 .fct-insights__item--lead > .fct-insights__item-title {
		grid-row: 2;
	}

	.fct-insights .fct-insights__items--1 .fct-insights__item--lead > .fct-insights__summary {
		grid-row: 3;
	}

	.fct-insights .fct-insights__items--1 .fct-insights__item--lead > .fct-insights__link {
		grid-row: 4;
	}
}

/*
 * "Over FCT" — frozen composition and responsive behaviour (docs/HOMEPAGE.md; Gate 3h).
 * R7 as composition source, own imagery: the characteristic tree with its rocky base, the
 * mountain-and-lake overview, a standing figure on a granite outcrop of the same ridge, one printed
 * Gold disc behind the tree, the handwritten note in open paper. Separate layers (not one image),
 * all geometry the frozen 1440 stage (700 × 560 px) in percentages of the visual, so the collage
 * scales as one composition and the Gold never grows on its own. Sources and masks:
 * qa/tools/build-ovr-runtime.mjs.
 *
 * ≥ 960 px: visual left from the page edge (48.6 % of the width, 700 px at 1440), text from 50 %.
 * < 960 px: stacked, visual first (at most 660 px), text below on the 5 % margin (measure 560 px).
 * The note scales with the visual (32 px at 700 px, ≥ 24 px) and is hidden below 480 px.
 */
.fct-about {
	--fct-about-m: clamp(16px, 5cqw, 32px);

	position: relative;
	container-type: inline-size;
	padding-inline: 0;
}

.fct-about > * {
	max-width: none;
	margin: 0;
}

.fct-about .fct-about__art {
	position: relative;
	width: min(100cqw - var(--fct-about-m), 660px);
	aspect-ratio: 700 / 560;
	container-type: inline-size;
}

/*
 * Rendered only near the viewport: without this, the visual's lazily loaded layers changed Chromium's
 * raster of the frozen hero at 1024 px. The visual's size comes from its width and aspect ratio, so
 * the page height is exact before it renders (a placeholder height on the section changed WebKit's
 * raster of R2). The crown rises up to 16/700 of the width above the visual; the clip margin keeps it
 * painted, so the containment applies only where the clip margin is supported (Gate 3h).
 */
@supports (overflow-clip-margin: 24px) {
	.fct-about .fct-about__art {
		content-visibility: auto;
		overflow-clip-margin: 24px;
	}
}

.fct-about .fct-about__scene {
	position: absolute;
	inset: 0;
}

.fct-about .fct-about__disc {
	position: absolute;
	z-index: 0;
	left: 0.5714%;
	top: 26.7857%;
	width: 27.1429%;
	height: 33.9286%;
	background: var(--wp--preset--color--gold);
	-webkit-mask: url("../masks/ovr-disc.svg?v=fbb4fbbe3d57") center / 100% 100% no-repeat;
	mask: url("../masks/ovr-disc.svg?v=fbb4fbbe3d57") center / 100% 100% no-repeat;
}

/* One quiet grade over every photographic layer; only the Gold sits outside it. */
.fct-about .fct-about__photo {
	position: absolute;
	inset: 0;
	z-index: 1;
	filter: grayscale(0.74) contrast(1.06) sepia(0.05);
}

.fct-about .fct-about__photo img,
.fct-about .fct-about__ridge,
.fct-about .fct-about__contact {
	position: absolute;
	display: block;
	max-width: none;
	margin: 0;
}

.fct-about .fct-about__land,
.fct-about .fct-about__front,
.fct-about .fct-about__ridge {
	left: 0;
	top: 26.7857%;
	width: 100%;
	height: 70.3571%;
	-webkit-mask: url("../masks/ovr-land.svg?v=48e561409c6a") 0 0 / 100% 100% no-repeat;
	mask: url("../masks/ovr-land.svg?v=48e561409c6a") 0 0 / 100% 100% no-repeat;
}

.fct-about .fct-about__land {
	z-index: 1;
	filter: brightness(1.06) contrast(0.92);
}

/* The panorama's own ridge (same image, pixel-aligned) in front of the tree base's lower edge, so the
   base sits in the ridge and the view recedes behind it. */
.fct-about .fct-about__front {
	z-index: 4;
	filter: brightness(1.06) contrast(0.92);
	-webkit-mask: url("../masks/ovr-front.svg?v=54ce0d75e4c4") 0 0 / 100% 100% no-repeat;
	mask: url("../masks/ovr-front.svg?v=54ce0d75e4c4") 0 0 / 100% 100% no-repeat;
}

/* Outcrop, contact shade and figure live inside the panorama's own outline (box = the panorama). */
.fct-about .fct-about__ridge {
	z-index: 2;
}

.fct-about .fct-about__outcrop {
	left: 50.2857%;
	top: 79.6954%;
	width: 31.4286%;
	height: 19.0355%;
	filter: brightness(0.95);
	-webkit-mask: linear-gradient(to bottom, #000 70.667%, transparent 100%);
	mask: linear-gradient(to bottom, #000 70.667%, transparent 100%);
}

.fct-about .fct-about__contact {
	left: 64.4571%;
	top: 81.9797%;
	width: 8.8571%;
	height: 2.0305%;
	background: radial-gradient(closest-side, rgb(25 24 20 / 0.42), rgb(25 24 20 / 0));
}

.fct-about .fct-about__figure {
	left: 65.7143%;
	top: 53.8071%;
	width: 6.2857%;
	height: 29.4416%;
	filter: grayscale(0.9) brightness(0.9) contrast(0.84);
	-webkit-mask: linear-gradient(to bottom, #000 98.4%, rgb(0 0 0 / 0.6) 100%);
	mask: linear-gradient(to bottom, #000 98.4%, rgb(0 0 0 / 0.6) 100%);
}

.fct-about .fct-about__tree {
	z-index: 3;
	left: 3.4286%;
	top: -2.8571%;
	width: 41.5714%;
	height: 77.8571%;
	filter: brightness(0.95) contrast(0.96);
	-webkit-mask: url("../masks/ovr-tree.svg?v=e5ff12a38b9b") 0 0 / 100% 100% no-repeat;
	mask: url("../masks/ovr-tree.svg?v=e5ff12a38b9b") 0 0 / 100% 100% no-repeat;
}

.fct-about .fct-about__note {
	--fct-note-rotate: -7deg;

	position: absolute;
	z-index: 6;
	right: 2.5714%;
	top: 12.5%;
	max-width: none;
	margin: 0;
	font-size: max(24px, 4.5714cqw);
	white-space: nowrap;
	transform-origin: right center;
}

.fct-about .fct-about__note-line {
	display: block;
}

.fct-about .fct-about__text {
	margin: 32px var(--fct-about-m) 0;
	max-width: 560px;
}

.fct-about .fct-about__text > * {
	margin: 0;
}

/* 1em above the eyebrow, as in the approved review (it only shows beside the visual, where the
   grid item keeps it; stacked it collapses into the text's 32 px). */
.fct-about .fct-about__label {
	margin-block-start: 1em;
}

/*
 * Homepage phase 1 (2026-10-29): the approved, longer text. The opening sentence is the H2, a step
 * smaller than the former two-line question so it sets in three or four balanced lines; three body
 * paragraphs; the deliberate repetition of the opening closes the text in the former lead's voice.
 */
.fct-about .fct-about__title {
	margin-block-start: 12px;
	font-size: clamp(26px, 22px + 1.6cqw, 30px);
	line-height: 1.05;
	text-wrap: balance;
}

.fct-about .fct-about__body {
	max-width: 560px;
	margin-block-start: 14px;
}

.fct-about .fct-about__title + .fct-about__body {
	margin-block-start: 24px;
}

.fct-about .fct-about__closing {
	max-width: 560px;
	margin-block-start: 26px;
	color: var(--wp--preset--color--forest);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(19px, 15px + 1.2cqw, 24px);
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}

.fct-about .fct-about__link {
	margin-block-start: 22px;
	font-weight: 600;
}

.fct-about .fct-about__link a {
	color: var(--wp--preset--color--forest);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.fct-about .fct-about__arrow {
	margin-inline-start: 8px;
}

@media (max-width: 479.98px) {
	.fct-about .fct-about__note {
		display: none;
	}
}

@media (min-width: 600px) {
	.fct-about .fct-about__title {
		font-size: calc(30px + (100cqw - 600px) * 0.016667);
	}
}

@media (min-width: 900px) {
	.fct-about .fct-about__title {
		font-size: clamp(36px, 36px + (100cqw - 1024px) * 0.019231, 44px);
	}
}

@media (min-width: 960px) {
	.fct-about {
		display: grid;
		grid-template-columns: 50cqw 1fr;
		align-items: center;
	}

	/*
	 * Homepage phase 1 (2026-10-29): with the longer text the visual no longer centres beside it but
	 * starts at the top, the crown's top level with the eyebrow's (the eyebrow's 1em = 14 px above it,
	 * plus the crown's 16/700 of the visual's width above the visual's box).
	 */
	.fct-about .fct-about__art {
		align-self: start;
		width: min(700px, 48.6cqw);
		margin-block-start: calc(14px + min(16px, 1.1111cqw));
	}

	.fct-about .fct-about__text {
		max-width: 600px;
		margin: 0 6.5cqw 0 0;
	}

	.fct-about .fct-about__closing {
		font-size: clamp(21px, 21px + (100cqw - 1024px) * 0.0072, 24px);
	}
}

/*
 * "Contact" — frozen composition (B2) and responsive behaviour (docs/HOMEPAGE.md; Gate 3i).
 * R8 as composition source: the invitation left, one torn-paper photograph right (the climber close
 * and low, stepping onto the summit rock; the backdrop provisional), the handwritten note under the
 * image's lower-left edge; the Gold CTA is the section's only Gold. The photograph is two layers
 * (backdrop, climber) in a hand-torn mask over a paper rim; all geometry is the frozen 1440 image box
 * (600 × 488 px) in percentages, so it scales as one composition. Sources and masks:
 * qa/tools/build-cx-runtime.mjs, qa/tools/lib/cx-geometry.mjs.
 *
 * ≥ 960 px: side by side: text on the 6.5 % inset (540 px max), image at 41.667 % of the width.
 * < 960 px: stacked, text first, then the image right-aligned on the margin (at most 600 px).
 * The note scales with the image (32 px at 600 px, ≥ 24 px); below 480 px it drops by
 * 2 × (24 px − its scaled size), about 11 px at 390 and 17 px at 320, to clear the rock.
 */
.fct-contact {
	--fct-contact-m: clamp(16px, 5cqw, 32px);
	--fct-contact-aw: min(100cqw - 2 * var(--fct-contact-m), 600px);
	--fct-contact-nf: max(24px, var(--fct-contact-aw) * 0.053333);
	--fct-contact-nd: 0px;

	position: relative;
	container-type: inline-size;
	padding-inline: 0;
}

.fct-contact > * {
	max-width: none;
	margin: 0;
}

.fct-contact .fct-contact__text {
	max-width: 560px;
	margin: 0 var(--fct-contact-m);
}

.fct-contact .fct-contact__text > * {
	margin: 0;
}

.fct-contact .fct-contact__title {
	margin-block-start: 22px;
	font-size: min(30px, 28px + (100cqw - 320px) * 0.028571);
	line-height: 1.02;
}

.fct-contact .fct-contact__title-line,
.fct-contact .fct-contact__note-line {
	display: block;
}

.fct-contact .fct-contact__body {
	max-width: 500px;
	margin-block-start: 26px;
}

.fct-contact .fct-contact__actions {
	margin-block-start: 34px;
}

.fct-contact .fct-contact__direct {
	margin-block-start: 26px;
	font-size: 16px;
	line-height: 1.5;
}

/* The public address (Settings → FCT) is one unbreakable word: a long one breaks inside rather than overflow. */
.fct-contact .fct-contact__direct a {
	overflow-wrap: anywhere;
}

/* Placeholder until verified contact details exist (D-004). */
.fct-contact .fct-contact__pm {
	color: rgb(18 56 61 / 0.62);
}

.fct-contact .fct-contact__art {
	position: relative;
	width: var(--fct-contact-aw);
	aspect-ratio: 600 / 488;
	margin: clamp(40px, 7cqw, 64px) var(--fct-contact-m) calc(var(--fct-contact-nf) * 1.625 + var(--fct-contact-nd)) auto;
	container-type: inline-size;
}

.fct-contact .fct-contact__scene {
	position: absolute;
	inset: 0;
	filter: drop-shadow(0 1px 1.2px rgb(30 46 47 / 0.16));
}

/*
 * Rendered only near the viewport (as "Over FCT": lazily loaded layers must not change the frozen
 * sections' raster). The scene's size comes from the image box, so the page height is exact before it
 * renders; the paper rim reaches 4 % of the box outside it and the clip margin keeps it painted, so
 * the containment applies only where the clip margin is supported.
 */
@supports (overflow-clip-margin: 28px) {
	.fct-contact .fct-contact__scene {
		content-visibility: auto;
		overflow-clip-margin: 28px;
	}
}

.fct-contact .fct-contact__paper,
.fct-contact .fct-contact__photo {
	position: absolute;
	left: -4%;
	top: -4.918%;
	width: 108%;
	height: 109.8361%;
}

.fct-contact .fct-contact__paper {
	background: #fbf8f1;
	-webkit-mask: url("../masks/cx-paper.svg?v=7d4d93fc43d1") 0 0 / 100% 100% no-repeat;
	mask: url("../masks/cx-paper.svg?v=7d4d93fc43d1") 0 0 / 100% 100% no-repeat;
}

.fct-contact .fct-contact__photo {
	overflow: hidden;
	filter: grayscale(0.62) sepia(0.1) contrast(1.03) brightness(1.02);
	-webkit-mask: url("../masks/cx-photo.svg?v=702d26c1ef6b") 0 0 / 100% 100% no-repeat;
	mask: url("../masks/cx-photo.svg?v=702d26c1ef6b") 0 0 / 100% 100% no-repeat;
}

.fct-contact .fct-contact__land,
.fct-contact .fct-contact__person {
	position: absolute;
	max-width: none;
}

.fct-contact .fct-contact__land {
	left: -5.5556%;
	top: 2.2388%;
	width: 185.1852%;
	height: 142.2575%;
}

.fct-contact .fct-contact__person {
	left: 30.8939%;
	top: 12.3134%;
	width: auto;
	height: 83.9552%;
	filter: saturate(0.9);
}

.fct-contact .fct-contact__note {
	--fct-note-rotate: -9deg;

	position: absolute;
	left: 6%;
	top: calc(98.7705% + var(--fct-contact-drop, 0px));
	max-width: none;
	margin: 0;
	font-size: max(24px, 5.3333cqw);
	line-height: 1.0797;
	white-space: nowrap;
	transform-origin: 0 0;
}

.fct-contact .fct-contact__note-line + .fct-contact__note-line {
	padding-inline-start: 1.1em;
}

@media (max-width: 479.98px) {
	.fct-contact {
		--fct-contact-nd: max(0px, 24px - var(--fct-contact-aw) * 0.053333) * 2;
	}

	.fct-contact .fct-contact__note {
		--fct-contact-drop: max(0px, 24px - 5.3333cqw) * 2;
	}
}

@media (min-width: 460px) {
	.fct-contact .fct-contact__title {
		font-size: calc(29px + (100cqw - 480px) * 0.033613);
	}
}

@media (min-width: 600px) {
	.fct-contact .fct-contact__title {
		font-size: calc(36px + (100cqw - 600px) * 0.035714);
	}
}

@media (min-width: 900px) {
	.fct-contact .fct-contact__title {
		font-size: clamp(44px, 44px + (100cqw - 1024px) * 0.038462, 60px);
	}
}

@media (min-width: 960px) {
	.fct-contact {
		--fct-contact-aw: 41.6667cqw;

		display: grid;
		grid-template-columns: 6.5cqw minmax(0, 1fr) var(--fct-contact-aw) 6.6667cqw;
		align-items: start;
		padding-block: calc(var(--wp--preset--spacing--section) * 0.8334);
	}

	.fct-contact .fct-contact__text {
		grid-column: 2;
		width: min(540px, 100% - 7.64cqw);
		max-width: none;
		margin: 2.7778cqw 0 0;
	}

	.fct-contact .fct-contact__art {
		grid-column: 3;
		margin: 0 0 calc(var(--fct-contact-nf) * 1.625 + var(--fct-contact-nd));
	}
}