/* ============================================================================
   Climate 4.0 Hub — Noknok Studios
   Hand-written CSS. No build step. Change the tokens, the whole theme retunes.

   Direction: Dark Premium, bespoke-filled with the client's own deep teal.
   Signed off against style-tile.html on 2 September 2026.

   THE THREE RULES THAT KEEP THIS ACCESSIBLE — do not break them:
   1. The brand green (--accent) is 2.22:1 on white. It is a FILL, never text on
      a light ground and never a button with white text on it. Green text on
      light uses --accent-ink; text ON green uses --accent-on.
   2. Every dark band carries its own ink class (.is-deep / .is-deep-2). Headings
      default to --ink, so a dark section without its class renders black on teal.
   3. --on-deep-2 is tuned against the LIGHTEST deep ground (--deep-3), not the
      darkest, because card bodies sit on it.
   ========================================================================== */

:root {
	/* ---- grounds ---- */
	--deep:        oklch(0.355 0.055 192);   /* #0D4543  dominant ground */
	--deep-2:      oklch(0.255 0.045 192);   /* #002928  recessed panels, motif fields */
	--deep-3:      oklch(0.380 0.055 192);   /* #164C4A  raised cards on the ground */
	--sage:        oklch(0.900 0.018 150);   /* #D6E2D8  quiet light section, partner wall */
	--sage-2:      oklch(0.940 0.012 150);   /* #E6EEE7 */
	--paper:       oklch(0.980 0.006 130);   /* #F7F9F5  long reads, news, forms */
	--white:       #FFFFFF;

	/* ---- accent ---- */
	--accent:      oklch(0.737 0.172 129.3); /* #87BE37  fills, marks, buttons */
	--accent-lift: oklch(0.880 0.172 129.3); /* #B3ED6A  small text on deep grounds */
	--accent-ink:  oklch(0.488 0.133 129.3); /* #476D00  green text on ANY light ground */
	--accent-on:   oklch(0.190 0.040 129.3); /* #0E1704  text sitting ON the green */

	/* ---- blue: shape gradients only. never type, never behind text ---- */
	--blue:        oklch(0.550 0.130 245);
	--blue-lift:   oklch(0.720 0.120 235);

	/* ---- ink ---- */
	--ink:         oklch(0.220 0.020 175);   /* #101E1A */
	--ink-2:       oklch(0.420 0.018 170);   /* #44504B */
	--on-deep:     oklch(0.965 0.008 140);   /* #F1F5F0 */
	--on-deep-2:   oklch(0.800 0.022 170);   /* #B1C3BB */

	/* ---- lines ---- */
	--line-deep:   oklch(0.440 0.045 192);
	--line-light:  oklch(0.845 0.020 150);

	/* ---- corner language: everything rounds except the bottom left ----
	   From the junction in the mark. A button, a card and a photo read as one
	   family without any of them carrying a logo. */
	--r-btn:    999px 999px 999px 0;
	--r-card:   20px 20px 20px 0;
	--r-panel:  28px 28px 28px 0;
	--r-sm:     8px 8px 8px 0;
	--r-field:  24px;   /* the exception: a sharp corner on an input reads as an error */
	--r-bleed:  clamp(90px, 13vw, 190px);   /* the sweep on a full-bleed photo */
	--mask-leaf: 50% 50% 50% 0;
	--mask-arch: 999px 999px 0 0;
	--mask-half: 999px 0 0 999px;

	--shadow:      0 10px 30px -12px oklch(0.20 0.04 192 / .45);
	--shadow-lift: 0 18px 44px -14px oklch(0.20 0.04 192 / .55);

	/* ---- rhythm ---- */
	--wrap: 1140px;
	--wrap-narrow: 760px;
	--gutter: clamp(1rem, 4vw, 2rem);
	--section-y: clamp(3rem, 7vw, 5.5rem);

	/* ---- type ---- */
	--font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--step-display: clamp(34px, 5.4vw, 52px);
	--step-h1:      clamp(30px, 4.2vw, 40px);
	--step-h2:      clamp(23px, 2.6vw, 26px);
	--step-h3:      20px;
	--step-deck:    19px;
	--step-body:    16.5px;
	--step-sm:      15px;
	--step-ui:      14px;
	--step-label:   11.5px;
}

/* ============================ reset ============================ */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--step-body);
	line-height: 1.6;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
	font-family: var(--font);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--ink);
	margin: 0 0 0.5em;
	text-wrap: balance;
}
h1 { font-size: var(--step-h1); letter-spacing: -0.03em; }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); letter-spacing: -0.015em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Focus must be visible on every ground. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}
.is-deep a:focus-visible, .is-deep button:focus-visible,
.is-deep-2 a:focus-visible, .is-deep-2 button:focus-visible { outline-color: var(--accent-lift); }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--accent); color: var(--accent-on);
	padding: 12px 20px; border-radius: var(--r-sm); font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* ============================ layout ============================ */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: 2; }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section-y); position: relative; }
/* Any section holding a decorative shape must clip it, or the shape widens the
   document and the whole page scrolls sideways. `clip` rather than `hidden` so
   no scroll container is created. */
.section:has(> .shape) { overflow: clip; }
body { overflow-x: clip; }

/* Ground classes. RULE 2: a dark section must carry one of these. */
.is-deep    { background: var(--deep);   color: var(--on-deep); }
.is-deep-2  { background: var(--deep-2); color: var(--on-deep); }
.is-sage    { background: var(--sage);   color: var(--ink); }
.is-paper   { background: var(--paper);  color: var(--ink); }
.is-white   { background: var(--white);  color: var(--ink); }

.is-deep h1, .is-deep h2, .is-deep h3, .is-deep h4,
.is-deep-2 h1, .is-deep-2 h2, .is-deep-2 h3, .is-deep-2 h4 { color: var(--on-deep); }

/* ============================ type helpers ============================ */
.eyebrow {
	font-size: var(--step-label); font-weight: 600; letter-spacing: 0.15em;
	text-transform: uppercase; margin: 0 0 12px; color: var(--accent-ink);
}
.is-deep .eyebrow, .is-deep-2 .eyebrow { color: var(--accent-lift); }

.display { font-size: var(--step-display); font-weight: 600; letter-spacing: -0.032em; line-height: 1.05; }
.deck    { font-size: var(--step-deck); color: var(--ink-2); max-width: 56ch; text-wrap: pretty; }
.is-deep .deck, .is-deep-2 .deck { color: var(--on-deep-2); }
.measure { max-width: 65ch; }
.tabular { font-variant-numeric: tabular-nums; }

.prose a:not(.btn) {
	color: var(--accent-ink); text-decoration: underline;
	text-underline-position: from-font; text-decoration-thickness: from-font;
	text-decoration-skip-ink: auto;
}
.prose a:not(.btn):hover { color: var(--ink); }
.is-deep .prose a:not(.btn), .is-deep-2 .prose a:not(.btn) { color: var(--accent-lift); }
.is-deep .prose a:not(.btn):hover, .is-deep-2 .prose a:not(.btn):hover { color: var(--white); }

/* ============================ buttons ============================ */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	min-height: 44px; padding: 12px 24px;
	border-radius: var(--r-btn);
	font-size: var(--step-ui); font-weight: 600; font-family: inherit;
	border: 1px solid transparent; text-decoration: none;
	transition: transform .12s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:active { transform: scale(0.97); }
/* RULE 1: green fill takes dark text, never white. */
.btn--primary { background: var(--accent); color: var(--accent-on); }
.btn--primary:hover { background: var(--accent-lift); color: var(--accent-on); }
.btn--ghost { background: transparent; color: var(--accent-ink); border-color: var(--accent-ink); }
.btn--ghost:hover { background: oklch(0.488 0.133 129.3 / .10); }
.is-deep .btn--ghost, .is-deep-2 .btn--ghost, .site-footer .btn--ghost { color: var(--accent-lift); border-color: var(--accent); }
.is-deep .btn--ghost:hover, .is-deep-2 .btn--ghost:hover, .site-footer .btn--ghost:hover { background: oklch(0.737 0.172 129.3 / .14); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================ cards ============================ */
.card {
	background: var(--deep-3); border: 1px solid var(--line-deep);
	border-radius: var(--r-card); padding: 24px 22px;
	color: var(--on-deep); box-shadow: var(--shadow);
	transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card h3 { color: var(--on-deep); margin-bottom: 8px; }
.card p  { color: var(--on-deep-2); font-size: var(--step-sm); }
.card__tag {
	display: inline-block; font-size: var(--step-label); font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--accent-lift); margin-bottom: 12px;
}
.card--light { background: var(--white); border: 0; color: var(--ink); }
.card--light h3 { color: var(--ink); }
.card--light p { color: var(--ink-2); }
.card--light .card__tag { color: var(--accent-ink); }

/* An explicit count, not auto-fit. auto-fit derives the column count from the
   available width, so "Columns: 3" rendered four on a wide screen and the
   editor's setting meant nothing. These collapse on the way down instead. */
.grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
	.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================ photography ============================
   The grade is a SHADOW LIFT, not a tint: screen a dark teal so only the
   blacks move toward teal. Highlights stay white and skintones stay natural.
   Never mix-blend-mode: color over a photograph of people. */
.ph { position: relative; overflow: hidden; isolation: isolate; }
.ph img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(1.04); }
.ph::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: #0C3A37; mix-blend-mode: screen; opacity: .62; pointer-events: none;
}
.ph::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(168deg, rgba(7,43,42,0) 62%, rgba(7,43,42,.30) 100%);
}
.ph--circle { border-radius: 50%; }
.ph--leaf   { border-radius: var(--mask-leaf); }
/* The leaf only reads as a leaf near square. On a wide frame the curve
   flattens into a stretched ellipse, so the mask forces its own ratio. */
.ph--leaf.ph--wide { aspect-ratio: 5 / 4; }
.ph--arch.ph--wide { aspect-ratio: 4 / 5; }
.ph--arch   { border-radius: var(--mask-arch); }
.ph--half   { border-radius: var(--mask-half); }
.ph--card   { border-radius: var(--r-card); }
.ph--square { aspect-ratio: 1 / 1; }
.ph--wide   { aspect-ratio: 16 / 9; }
.ph--portrait { aspect-ratio: 4 / 5; }

/* Placeholder frame — a missing image must never blank a section. */
.ph--placeholder {
	display: grid; place-items: center; text-align: center; padding: 20px;
	background: var(--deep-3); border: 1px dashed var(--line-deep); color: var(--on-deep-2);
	font-size: var(--step-sm);
}
.ph--placeholder::before, .ph--placeholder::after { content: none; }
.is-paper .ph--placeholder, .is-sage .ph--placeholder, .is-white .ph--placeholder {
	background: var(--sage-2); border-color: var(--line-light); color: var(--ink-2);
}

/* ============================ shapes + motif ============================
   Background shapes ALWAYS keep their grain. To make one recede, lower its
   opacity or use the deep colourway — never strip the texture. Grain is a
   fixed pixel size regardless of shape size: see inc/template-tags.php,
   c40_shape() sets baseFrequency from the render width. */
.shape { position: absolute; z-index: 1; pointer-events: none; max-width: 46%; }
@media (max-width: 860px) { .shape { max-width: 62%; opacity: .5; } }
.shape svg { display: block; width: 100%; height: auto; }

.motif { position: relative; overflow: hidden; border-radius: var(--r-panel); }
.motif__field {
	position: absolute; inset: 0; display: grid;
	grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(5, 34px);
	gap: 14px; padding: 22px; align-content: center; pointer-events: none;
}
.motif__field i {
	display: block; width: 20px; height: 20px;
	border-radius: var(--mask-leaf); background: var(--accent);
}

/* ============================ header ============================ */
.site-header {
	position: absolute; inset-inline: 0; top: 0; z-index: 50;
	padding-block: 18px; color: var(--on-deep);
}
.site-header.is-stuck {
	position: fixed; background: var(--deep);
	border-bottom: 1px solid var(--line-deep);
	padding-block: 12px;
	box-shadow: 0 8px 24px -18px rgba(0,0,0,.6);
}
.site-header__inner { display: flex; align-items: center; gap: 24px; }
.site-header__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.site-header__brand > * { flex: none; }


.nav { margin-inline-start: auto; }
.nav ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.nav a:not(.btn) { text-decoration: none; font-size: var(--step-ui); color: var(--on-deep-2); }
.nav a:not(.btn):hover, .nav .current-menu-item > a { color: var(--on-deep); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-deep); border-radius: var(--r-sm); color: inherit; min-height: 44px; min-width: 44px; }

@media (max-width: 900px) {
	.nav-toggle { display: inline-flex; align-items: center; justify-content: center; margin-inline-start: auto; }
	.nav { position: absolute; inset-inline: 0; top: 100%; background: var(--deep); display: none; padding: 16px var(--gutter) 22px; border-bottom: 1px solid var(--line-deep); }
	.nav.is-open { display: block; }
	.nav ul { flex-direction: column; gap: 4px; }
	.nav a:not(.btn) { display: block; padding: 12px 0; min-height: 44px; }
}

/* ============================ hero ============================ */
.hero { position: relative; overflow: hidden; padding-block: clamp(6rem, 12vw, 9rem) clamp(3.5rem, 8vw, 6rem); }
.hero__copy { max-width: 40rem; }
.hero .display { margin-bottom: 18px; }
.hero .deck { margin-bottom: 28px; }

/* ============================ forms ============================ */
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { font-size: var(--step-ui); font-weight: 600; }
.field input, .field textarea, .field select {
	font-family: inherit; font-size: 16px;   /* never below 16px on mobile: iOS zooms */
	padding: 13px 18px; border-radius: var(--r-field);
	border: 1px solid var(--line-light); background: var(--white); color: var(--ink);
	min-height: 44px; width: 100%;
}
.field textarea { border-radius: var(--r-field); min-height: 130px; }
.field input:hover, .field textarea:hover { border-color: var(--accent-ink); }
.field .hint { font-size: 13px; color: var(--ink-2); }
.field .error { font-size: 13px; color: #8A1C10; font-weight: 600; }

/* Fluent Forms inherits the same language. */
.ff-el-form-control { border-radius: var(--r-field) !important; min-height: 44px; font-size: 16px !important; }
.ff-btn-submit { border-radius: var(--r-btn) !important; background: var(--accent) !important; color: var(--accent-on) !important; font-weight: 600 !important; min-height: 44px; }

/* ============================ footer ============================ */
.site-footer { background: var(--deep-2); color: var(--on-deep); padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.site-footer h2, .site-footer h3 { color: var(--on-deep); }
.site-footer a:not(.btn) { color: var(--on-deep-2); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--accent-lift); }
.site-footer__cols { display: grid; gap: 32px clamp(24px, 4vw, 56px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .site-footer__cols { grid-template-columns: 1fr; } }
.site-footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer__bottom {
	margin-top: 40px; border-top: 1px solid var(--line-deep);
	padding-block: 20px; display: flex; flex-wrap: wrap; gap: 12px 24px;
	font-size: 13px; color: var(--on-deep-2);
}
.site-footer__credit { margin-inline-start: auto; }
.site-footer__credit a { color: var(--accent-lift); text-decoration: underline; }

/* Partner wall sits on a neutral ground — eleven logos in eleven colours need it. */
.partner-wall { background: var(--sage); }
.partner-wall__grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: center; }
.partner-wall__grid img { max-height: 54px; width: auto; margin-inline: auto; }

/* ============================ motion ============================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ============================================================================
   Section layouts
   ========================================================================== */

.section__head { margin-bottom: 32px; max-width: 60ch; }
.section__head :last-child { margin-bottom: 0; }

/* ---- hero ---- */
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.hero__grid--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.hero__grid--split.is-reversed { direction: rtl; }
.hero__grid--split.is-reversed > * { direction: ltr; }
.hero__art .ph { width: 100%; }

/* ---- text beside something ---- */
.split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.split--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--2.is-reversed { direction: rtl; }
.split--2.is-reversed > * { direction: ltr; }

/* ---- figures ---- */
.figures { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--line-deep); border: 1px solid var(--line-deep); border-radius: var(--r-card); overflow: hidden; }
.is-sage .figures, .is-paper .figures, .is-white .figures { background: var(--line-light); border-color: var(--line-light); }
.figure { background: var(--deep-2); padding: 22px 24px; }
.is-deep .figure { background: var(--deep); }
.is-sage .figure, .is-paper .figure, .is-white .figure { background: var(--white); }
.figure b { display: block; font-size: clamp(30px, 4vw, 40px); font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--accent-lift); }
.is-sage .figure b, .is-paper .figure b, .is-white .figure b { color: var(--accent-ink); }
.figure > span {
	display: block; margin-top: 8px; font-size: var(--step-sm); color: var(--on-deep-2);
	/* Two-word labels were breaking one word onto a line of their own. */
	text-wrap: balance; max-width: 24ch;
	/* Body leading is set for paragraphs; a two-line caption wants it tighter. */
	line-height: 1.35;
}
.is-sage .figure > span, .is-paper .figure > span, .is-white .figure > span { color: var(--ink-2); }

/* ---- stages ---- */
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; background: var(--line-deep); border: 1px solid var(--line-deep); border-radius: var(--r-card); overflow: hidden; }
.is-sage .stages, .is-paper .stages, .is-white .stages { background: var(--line-light); border-color: var(--line-light); }
.stage { background: var(--deep); padding: 24px; display: grid; gap: 6px; grid-template-columns: minmax(120px, 160px) 1fr; align-items: start; }
.is-deep-2 .stage { background: var(--deep-2); }
.is-sage .stage, .is-paper .stage, .is-white .stage { background: var(--white); }
.stage__when { grid-row: span 2; font-size: var(--step-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-lift); padding-top: 4px; }
.is-sage .stage__when, .is-paper .stage__when, .is-white .stage__when { color: var(--accent-ink); }
.stage h3 { margin: 0; }
.stage p { margin: 0; color: var(--on-deep-2); font-size: var(--step-sm); }
.is-sage .stage p, .is-paper .stage p, .is-white .stage p { color: var(--ink-2); }
@media (max-width: 620px) { .stage { grid-template-columns: 1fr; } .stage__when { grid-row: auto; } }

/* ---- FAQs ---- */
.faqs { display: grid; gap: 2px; background: var(--line-light); border: 1px solid var(--line-light); border-radius: var(--r-card); overflow: hidden; }
.is-deep .faqs, .is-deep-2 .faqs { background: var(--line-deep); border-color: var(--line-deep); }
.faq { background: var(--white); }
.is-deep .faq { background: var(--deep-3); }
.is-deep-2 .faq { background: var(--deep); }
.is-sage .faq { background: var(--sage-2); }
.faq summary { cursor: pointer; padding: 20px 24px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; min-height: 44px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 600; color: var(--accent-ink); flex: none; }
.is-deep .faq summary::after, .is-deep-2 .faq summary::after { color: var(--accent-lift); }
.faq[open] summary::after { content: none; }
.faq .prose { padding: 0 24px 22px; max-width: 68ch; }
.faq .prose p:last-child { margin-bottom: 0; }

/* ---- cards, extra bits ---- */
.card__logo { background: var(--white); border-radius: var(--r-sm); padding: 14px 16px; margin-bottom: 14px; display: grid; place-items: center; min-height: 74px; }
.card__logo img { max-height: 44px; width: auto; }
.card__link { color: var(--accent-lift); text-decoration: underline; text-underline-position: from-font; font-size: var(--step-sm); }
.card--light .card__link { color: var(--accent-ink); }
.card__note { font-size: var(--step-sm); color: var(--on-deep-2); }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-underline-position: from-font; }
.card .ph { margin-bottom: 14px; }

/* ---- CTA ---- */
.cta__inner { position: relative; overflow: hidden; border-radius: var(--r-panel); background: var(--deep-2); padding: clamp(2rem, 5vw, 3.25rem); }
.is-paper .cta__inner, .is-sage .cta__inner, .is-white .cta__inner { background: var(--deep); color: var(--on-deep); }
.is-paper .cta__inner h2, .is-sage .cta__inner h2, .is-white .cta__inner h2 { color: var(--on-deep); }
.is-paper .cta__inner .deck, .is-sage .cta__inner .deck, .is-white .cta__inner .deck { color: var(--on-deep-2); }
.cta__copy { position: relative; z-index: 2; max-width: 46ch; }
.cta__copy h2 { margin-bottom: 12px; }
.cta__copy .deck { margin-bottom: 22px; }

/* ---- form ---- */
.form-holder { background: var(--white); border: 1px solid var(--line-light); border-radius: var(--r-card); padding: clamp(1.5rem, 3vw, 2rem); }
.is-deep .form-holder, .is-deep-2 .form-holder { border-color: var(--line-deep); }

/* ---- footer utility ---- */
.site-footer__utility { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }

/* ---- responsive ---- */
@media (max-width: 860px) {
	.hero__grid--split, .split--2 { grid-template-columns: 1fr; }
	.hero__grid--split.is-reversed, .split--2.is-reversed { direction: ltr; }
}

/* ============================================================================
   Round two — client review, 2 September 2026
   ========================================================================== */

/* ---- 1 + 2. Logo lock-up in the nav, CTA to the right of the links ---- */
.site-header__brand { gap: 0; }
.c40-logo { display: block; height: auto; }
/* An inline SVG with only a viewBox collapses under the reset's height:auto, so
   the lock-ups are sized by WIDTH and hold their shape with aspect-ratio. */
.c40-logo--h { width: clamp(160px, 16vw, 208px); aspect-ratio: 1058 / 200; transition: width .18s ease; }
.site-header.is-stuck .c40-logo--h { width: clamp(128px, 13vw, 160px); }

/* The mark keeps the brand green; the wordmark reads in paper so it holds its
   own against the deep ground, and the tagline sits back in sage. */
.lg-icon { fill: var(--accent); }
.lg-word { fill: var(--paper); }
.lg-tag  { fill: var(--sage); }

/* Two lock-ups, one shown at a time. The tagline is detail for a reader who has
   just arrived; once the header shrinks it is noise. */
.c40-logo--plain { display: none; }
.site-header.is-stuck .c40-logo--tagline { display: none; }
.site-header.is-stuck .c40-logo--plain { display: block; }
.c40-logo--v { width: 116px; aspect-ratio: 420 / 676; }
/* Desktop only. Unscoped, this `display: flex` sat after the 900px query's
   `display: none` and beat it, so the mobile panel was always open. */
@media (min-width: 901px) {
	.nav { display: flex; align-items: center; gap: 26px; }
}
.site-header__cta { padding: 9px 18px; min-height: 40px; }

/* ---- 3. Hero as a banner: image (later video) with the 4.0 lock-up over it ---- */
.hero--banner { padding-block: clamp(7rem, 14vw, 11rem) clamp(4rem, 9vw, 7rem); }
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; isolation: isolate; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(1.04); }
/* The same shadow lift as every other photograph, plus enough ground at the
   left for the copy to stay legible over any frame of a video. */
.hero__bg::before { content: ""; position: absolute; inset: 0; background: #0C3A37; mix-blend-mode: screen; opacity: .5; }
.hero__bg::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, oklch(0.355 0.055 192 / .96) 0%, oklch(0.355 0.055 192 / .86) 42%, oklch(0.355 0.055 192 / .45) 100%),
		linear-gradient(180deg, oklch(0.255 0.045 192 / .55) 0%, transparent 34%);
}
/* The banner headline is a full sentence now, not a four-word slogan. It needs
   the width, and a slightly smaller display step, to land in three lines
   instead of five. */
.hero--banner .hero__copy { max-width: 46rem; }
.hero--banner .display { font-size: clamp(30px, 4.4vw, 46px); }

.hero__lockup {
	position: absolute; z-index: 1; right: clamp(1.5rem, 5vw, 4rem); bottom: clamp(1.5rem, 4vw, 3rem);
	display: flex; align-items: flex-end; gap: clamp(6px, 1vw, 14px);
	pointer-events: none;
}
.shape-inline { display: block; max-width: 100%; }
.shape-inline svg { display: block; width: 100%; height: auto; }
.hero__lockup-dot {
	width: 16px; aspect-ratio: 1; border-radius: 50%;
	background: var(--accent); flex: none; margin-bottom: 14px;
}
.hero__lockup .shape-inline { flex: none; }
@media (max-width: 900px) { .hero__lockup { opacity: .55; right: -2rem; bottom: -1.5rem; transform: scale(.7); transform-origin: bottom right; } }

/* ---- 4. Figures: no boxes ---- */
.figures { background: none; border: 0; border-radius: 0; overflow: visible; gap: clamp(1.5rem, 4vw, 3rem) 2rem; }
.figure { background: none !important; padding: 0; }
.figure b { font-size: clamp(34px, 5vw, 48px); }

/* ---- 5. Room between a grid and the button under it ---- */
.grid + .btn-row, .figures + .btn-row, .stages + .btn-row, .faqs + .btn-row { margin-top: clamp(2rem, 4vw, 3rem); }
.section__head + .btn-row { margin-top: 1.5rem; }

/* ---- 7. Partner logos in white containers, clickable ---- */
.partner-wall__grid { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.partner {
	display: grid; place-items: center; min-height: 96px; padding: 18px 20px;
	background: var(--white); border-radius: var(--r-card);
	transition: transform .16s ease, box-shadow .16s ease;
}
a.partner:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.partner img { max-height: 52px; width: auto; margin: 0; }
.partner__name { font-size: var(--step-sm); font-weight: 600; color: var(--ink); text-align: center; }

/* ---- Cards fill their grid row, so a row is never ragged ---- */
.grid > .card { display: flex; flex-direction: column; height: 100%; }
.grid > .card > p:last-of-type { margin-bottom: auto; }

/* ---- 8. News cards ---- */
.card--news { padding: 0; overflow: hidden; background: transparent; border: 0; box-shadow: none; isolation: isolate; }
.card--news .news__media { position: relative; }
.card--news .ph { margin: 0; border-radius: 0; }
.card--news .ph--wide { aspect-ratio: 16 / 10; }
.news__media--empty { background: var(--accent); }
.news__media--empty::before, .news__media--empty::after { content: none; }
.news__label {
	position: absolute; top: 16px; left: 16px; z-index: 3;
	background: var(--white); color: var(--ink);
	font-size: var(--step-ui); font-weight: 600;
	padding: 7px 16px; border-radius: 999px;
}
.card--news .news__body {
	/* Deliberately unpositioned: the stretched link resolves to the card, not to
	   this box, so the whole card — image included — is the click target. The
	   media is pushed behind instead, inside the card's own stacking context. */
	background: var(--white); color: var(--ink);
	padding: 22px 22px 74px; margin-top: -26px;
	border-radius: var(--r-card);
	box-shadow: var(--shadow);
	flex: 1;                 /* the body takes the slack so every card ends level */
	display: flex; flex-direction: column;
}
.card--news .news__media { flex: none; z-index: -1; }
/* The media is clipped to the card's corners; the body brings its own. */
.card--news .news__media { border-radius: var(--r-card); overflow: hidden; }
.card--news .news__date { display: block; font-size: var(--step-label); font-weight: 600; letter-spacing: .1em; color: var(--accent-ink); margin-bottom: 8px; }
.card--news h3 { color: var(--ink); margin-bottom: 8px; }
.card--news h3 a { text-decoration: none; }
.card--news p { color: var(--ink-2); font-size: var(--step-sm); margin: 0; padding-right: 56px; }
.card--news .news__go { bottom: 20px; right: 20px; }
.news__go {
	position: absolute; right: 20px; bottom: 18px;
	width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center;
	border: 1px solid var(--accent-ink); color: var(--accent-ink);
	transition: background-color .16s ease, color .16s ease;
}
.card--news:hover { transform: translateY(-3px); }

/* ---- 9. CTA motif: clear of the copy, and balanced vertically ---- */
.motif__field { padding: 26px 22px; }
.cta__inner { padding-block: clamp(2.25rem, 5vw, 3.5rem); }

/* ---- 10. Footer lock-up ---- */
.site-footer__logo { margin-bottom: 18px; }


/* ---- 6. A textured shape behind the light "two audiences" band ---- */
.section--cards.is-paper, .section--cards.is-sage { overflow: hidden; }

/* ============================================================================
   Round three — client review
   ========================================================================== */

/* ---- 1. Stages as a timeline. No boxes: the rail and the markers carry it. ---- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); background: none; border: 0; border-radius: 0; }
.timeline::before {
	content: ""; position: absolute; inset-block: 22px auto; height: calc(100% - 44px);
	inset-inline-start: 27px; width: 2px;
	background: linear-gradient(180deg, var(--accent) 0%, oklch(0.737 0.172 129.3 / .25) 100%);
}
.is-sage .timeline::before, .is-paper .timeline::before, .is-white .timeline::before {
	background: linear-gradient(180deg, var(--accent-ink) 0%, oklch(0.488 0.133 129.3 / .2) 100%);
}
.timeline__step { display: grid; grid-template-columns: 56px 1fr; gap: clamp(16px, 2.5vw, 28px); align-items: start; position: relative; }
.timeline__marker {
	width: 56px; height: 56px; border-radius: 50%; flex: none;
	display: grid; place-items: center; position: relative; z-index: 2;
	background: var(--accent); color: var(--accent-on);
	box-shadow: 0 0 0 6px var(--deep);
}
.is-deep-2 .timeline__marker { box-shadow: 0 0 0 6px var(--deep-2); }
.is-sage .timeline__marker { box-shadow: 0 0 0 6px var(--sage); }
.is-paper .timeline__marker { box-shadow: 0 0 0 6px var(--paper); }
.is-white .timeline__marker { box-shadow: 0 0 0 6px var(--white); }
.timeline__marker b { font-size: 19px; font-weight: 600; }
.timeline__body { padding-top: 4px; max-width: 62ch; }
.timeline__when { display: block; font-size: var(--step-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-lift); margin-bottom: 6px; }
.is-sage .timeline__when, .is-paper .timeline__when, .is-white .timeline__when { color: var(--accent-ink); }
.timeline__body h3 { margin-bottom: 6px; }
.timeline__body p { margin: 0; color: var(--on-deep-2); }
.is-sage .timeline__body p, .is-paper .timeline__body p, .is-white .timeline__body p { color: var(--ink-2); }
@media (max-width: 560px) {
	.timeline__step { grid-template-columns: 44px 1fr; }
	.timeline__marker { width: 44px; height: 44px; }
	.timeline::before { inset-inline-start: 21px; }
}

/* ---- 3. FAQs as pills, with a circular toggle ---- */
.faqs { background: none; border: 0; border-radius: 0; gap: 12px; overflow: visible; }
.faq {
	background: oklch(0.380 0.055 192 / .55);
	border: 1px solid var(--line-deep);
	border-radius: var(--r-card);
	transition: background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* On the light grounds the tinted fill all but vanished, so a closed question
   read as loose text rather than a control. It gets its own surface and edge. */
.is-sage .faq, .is-paper .faq, .is-white .faq { background: var(--white); border-color: var(--line-light); }
.faq[open] { background: var(--deep-3); box-shadow: var(--shadow); }
.is-sage .faq[open], .is-paper .faq[open], .is-white .faq[open] { background: var(--white); border-color: var(--accent-ink); box-shadow: var(--shadow); }
.faq summary { padding: 18px 20px; gap: 20px; align-items: center; }
.faq summary::after { content: none; }
.faq__q { font-weight: 600; }
.faq__toggle {
	width: 40px; height: 40px; flex: none; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--deep); color: var(--accent-lift);
	transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.is-sage .faq__toggle, .is-paper .faq__toggle, .is-white .faq__toggle { background: var(--sage); color: var(--accent-ink); }
.faq__toggle svg { width: 20px; height: 20px; }
/* The vertical stroke hides to leave a minus. Rotating as well would stand that
   minus back up on its end, which is what produced the stray bar. */
.faq[open] .faq__toggle { background: var(--accent); color: var(--accent-on); }
.faq[open] .faq__plus { opacity: 0; }
.faq .prose { padding: 0 20px 20px; }

/* ---- 7. The 4.0 lock-up, on the stats band ---- */
/* Clipped sideways so a shape cannot widen the document, but OPEN vertically so
   the orb can rise out of this section and overlap the banner above it.
   `overflow: clip visible` is the one pairing that allows this — with `hidden`
   the visible axis would compute to auto and reintroduce a scroll container. */
.has-stats-art { overflow: clip visible; }
.stats-art {
	position: absolute; z-index: 3; pointer-events: none;
	right: clamp(-2rem, -1vw, 0rem); bottom: 0;
	width: min(360px, 42vw);
}
/* The orb is deliberately taller than its own section: it starts above the top
   edge and crosses the seam into the banner. Left exactly as it was. */
.stats-art__orb { position: absolute; right: -20%; bottom: 34%; opacity: .9; z-index: 1; }
/* The four sits IN FRONT of the orb and overlaps it, as in the style tile. */
.stats-art__4   { position: absolute; right: 30%; bottom: 0; z-index: 3; }
/* One circle, serving as the decimal point, about half the height of the four. */
.stats-art__dot { position: absolute; right: 14%; bottom: 0; z-index: 3; }
.stats-art { height: 300px; opacity: .7; }
.has-stats-art .wrap { padding-inline-end: clamp(1rem, 34vw, 22rem); }
@media (max-width: 860px) {
	.stats-art { opacity: .4; right: -4rem; width: 58vw; }
	.has-stats-art .wrap { padding-inline-end: var(--gutter); }
}

/* ---- Full-bleed photo on Text and photo ----
   The image sits OUTSIDE the wrap so it can run to the edge of the screen. No
   fade into the ground: the edge is a hard one, softened only by a large sweep
   on the corner that faces the copy. The corner that bleeds off-screen is square
   because nobody ever sees it. */
.has-bleed { overflow: clip; }
.bleed-photo {
	position: absolute; inset-block: 0; width: 52vw; z-index: 1;
	isolation: isolate; overflow: hidden;
}
.bleed-photo--right { inset-inline-end: 0; border-radius: 0 0 0 var(--r-bleed); }
.bleed-photo--left  { inset-inline-start: 0; border-radius: 0 0 var(--r-bleed) 0; }
.bleed-photo img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(1.04); }
.bleed-photo::before { content: ""; position: absolute; inset: 0; background: #0C3A37; mix-blend-mode: screen; opacity: .38; }

.has-bleed { min-height: 32rem; display: grid; align-items: center; }
.split--bleed { display: block; }
.split--bleed .measure { max-width: min(46ch, 42%); }
.split--bleed.is-reversed .measure { margin-inline-start: auto; }

@media (max-width: 860px) {
	.has-bleed { min-height: 0; }
	.bleed-photo {
		position: relative; inset: auto; width: 100%; height: 16rem;
		margin-bottom: 1.75rem; border-radius: 0 0 0 clamp(48px, 14vw, 90px);
	}
	.split--bleed .measure { max-width: 65ch; }
}

/* ============================================================================
   Round five — client review
   ========================================================================== */

/* ---- Hero: taller, and the crop moved down so heads are not cut ---- */
.hero--banner { padding-block: clamp(9rem, 17vw, 14rem) clamp(5rem, 11vw, 8.5rem); }
/* object-position pulls the visible window toward the top of the frame, which
   is where the faces are in every photograph we have. */
.hero__bg img { object-position: center 22%; }

/* ---- Stats band: shorter ----
   The composition has to shrink with it. The art is anchored to the section's
   bottom edge, so anything taller than the band gets painted over by the
   section below rather than overflowing into it. */
.section--figures { padding-block: clamp(2rem, 4vw, 3rem); }
.stats-art { height: 196px; }


/* ---- Placeholders are a brand shape, not a dashed box ---- */
.ph--placeholder {
	background: var(--deep-2); border: 0; padding: 0;
	display: grid; place-items: center; position: relative; overflow: hidden;
}
.is-paper .ph--placeholder, .is-sage .ph--placeholder, .is-white .ph--placeholder { background: var(--sage-2); }
.ph--placeholder .ph__shape { width: 118%; opacity: .85; }
/* Slightly held back, so a card without a photograph does not shout louder than
   one with a person in it. */
.ph--placeholder .ph__shape { opacity: .8; }

/* ---- Footer lock-up: paper wordmark, smaller ---- */
.site-footer .lg-icon { fill: var(--accent); }
.site-footer .lg-word { fill: var(--paper); }
.site-footer__logo .c40-logo--v { width: 82px; aspect-ratio: 420 / 676; }

/* ---- Nav links: same weight and colour as the button, accent on hover ---- */
.nav a:not(.btn) { color: var(--paper); font-weight: 600; }
.nav a:not(.btn):hover, .nav .current-menu-item > a { color: var(--accent); }

/* ---- A card can carry a numbered shape ---- */
.card--shaped { position: relative; overflow: hidden; }
.card__shape {
	position: absolute; top: -14px; inset-inline-end: -18px; z-index: 0;
	width: 150px; pointer-events: none; opacity: .9;
}
.card__shape svg { display: block; width: 100%; height: auto; }
.card--shaped > *:not(.card__shape) { position: relative; z-index: 1; }
.card--shaped .card__tag, .card--shaped h3 { max-width: calc(100% - 96px); }

/* ---- Cards carrying a shape: no border, and text clear of the artwork ---- */
/* border: 0, not a transparent border — a transparent one still shows the
   card's own white through it, which reads as a pale ring on a paper ground
   and stops the corner shape reaching the edge. */
.card--shaped, .card--light.card--shaped { border: 0; }
/* The shape occupies the top-right corner, so everything above the fold of the
   card is inset. The paragraph was the one thing still running under it. */
.card--shaped .card__tag,
.card--shaped h3,
.card--shaped p { max-width: calc(100% - 104px); }

/* ---- People: a small circular avatar, no panel behind it ---- */
.ph--placeholder { background: none; }
.card--person .ph {
	width: 132px; aspect-ratio: 1; margin-bottom: 18px;
	border-radius: 50%; overflow: hidden;
}
/* The shapes are not circles, so a circular frame at 100% clips them into
   fragments. Oversize and centre instead, the way object-fit:cover would, so the
   frame always reads as a filled circle with texture in it. */
.card--person .ph--placeholder { display: grid; place-items: center; }
.card--person .ph--placeholder .ph__shape {
	width: 168%; max-width: none; opacity: .9;
}

/* ============================================================================
   Articles, and a header that works on light pages
   ========================================================================== */

/* ---- The header no longer assumes a dark hero beneath it ---- */
.site-header--light { color: var(--ink); }
.site-header--light .lg-word { fill: var(--ink); }
.site-header--light .lg-tag  { fill: var(--ink-2); }
.site-header--light .nav a:not(.btn) { color: var(--ink); }
.site-header--light .nav a:not(.btn):hover,
.site-header--light .nav .current-menu-item > a { color: var(--accent-ink); }
.site-header--light.is-stuck { background: var(--paper); border-bottom-color: var(--line-light); }
.site-header--light .nav-toggle { border-color: var(--line-light); }
@media (max-width: 900px) { .site-header--light .nav { background: var(--paper); border-bottom-color: var(--line-light); } }

/* ---- Page header band ---- */
.page-header { padding-block: clamp(6.5rem, 12vw, 9rem) clamp(2.5rem, 5vw, 3.5rem); }
.page-header h1 { max-width: 30ch; }

/* ---- Articles: room to breathe, and a real measure ---- */
.article { padding-block: 0 clamp(4rem, 9vw, 7rem); }
/* The lead image climbs out of the section and sits across the band above it.
   flow-root is the load-bearing part: .article has no top padding, so without a
   block formatting context the figure's negative margin collapses out and drags
   the section — paper background and all — up with it. The band then appears to
   stop exactly at the image's top edge and nothing actually overlaps. */
.article:has(.article__figure) { display: flow-root; }
.article__figure {
	margin-top: -72px;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
	position: relative; z-index: 2;
}
.article__inner { max-width: 46rem; }
.article__body { max-width: 65ch; }
.article__body > * + * { margin-top: 1.35em; }
.article__body h2 { margin-top: 2.2em; margin-bottom: .5em; }
.article__body blockquote {
	margin: 2em 0; padding: 0 0 0 1.5rem;
	border-left: 3px solid var(--accent); font-size: 19px; color: var(--ink);
}
.article__body blockquote cite { display: block; margin-top: .75em; font-size: 15px; font-style: normal; color: var(--ink-2); }

/* ---- Breadcrumbs ---- */
.crumbs { margin-bottom: 1.25rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; font-size: var(--step-ui); color: var(--ink-2); }
.crumbs li + li::before { content: "/"; margin-inline-end: .5rem; opacity: .5; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent-ink); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); }

/* ---- Article meta row ---- */
.article__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
	padding-bottom: 1.5rem; margin-bottom: 2rem;
	border-bottom: 1px solid var(--line-light);
	font-size: var(--step-ui); color: var(--ink-2);
}
.article__read::before { content: "·"; margin-inline-end: 1.5rem; opacity: .5; }
.share { margin-inline-start: auto; position: relative; }
.share > summary {
	display: inline-flex; align-items: center; gap: .5rem;
	min-height: 40px; padding: 8px 16px; cursor: pointer; list-style: none;
	border: 1px solid var(--line-light); border-radius: var(--r-btn);
	font-size: 13px; font-weight: 600; color: var(--ink);
	transition: border-color .16s ease, color .16s ease;
}
.share > summary::-webkit-details-marker { display: none; }
.share > summary:hover, .share[open] > summary { border-color: var(--accent-ink); color: var(--accent-ink); }
.share__menu {
	position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 20;
	min-width: 180px; padding: 8px;
	background: var(--white); border: 1px solid var(--line-light);
	border-radius: var(--r-card); box-shadow: var(--shadow);
}
.share__menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.share__menu a, .share__copy {
	display: block; width: 100%; text-align: start;
	padding: 10px 12px; min-height: 40px;
	border: 0; border-radius: var(--r-sm); background: none;
	font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink);
	text-decoration: none; cursor: pointer;
}
.share__menu a:hover, .share__copy:hover { background: var(--sage-2); color: var(--accent-ink); }
@media (max-width: 640px) { .share { margin-inline-start: 0; } }


/* ---- A card that links anywhere is clickable across its whole face ----
   One real link carries the accessible name; a pseudo-element stretches it over
   the card. Text stays selectable, and anything genuinely interactive inside a
   card must sit above it. */
.card--linked { position: relative; }
.card__stretch::after { content: ""; position: absolute; inset: 0; z-index: 2; }
/* .card:hover already lifts; a transparent news card must not gain a shadow
   around nothing — its white body carries the shadow instead. */
.card--news:hover { box-shadow: none; }
.card--news:hover .news__body { box-shadow: var(--shadow-lift); }
.card--linked:has(.card__stretch:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.card--linked .card__stretch:focus-visible { outline: none; }
.card--linked:hover .news__go { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }

/* ---- The leaf field, available on any section ---- */
.section__motif { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; opacity: .55; }
.section__motif .motif__field {
	grid-template-columns: repeat(20, 1fr); grid-template-rows: repeat(9, 34px);
	padding: 0;
}
/* A corner field has to reach its corner: centred rows would float the dense
   end away from the bottom edge it is supposed to grow out of. */
.section__motif .motif__field--bottom-left { align-content: end; }
/* On a light ground the leaf needs the darker green or it disappears. */
.is-sage .section__motif .motif__field i,
.is-paper .section__motif .motif__field i,
.is-white .section__motif .motif__field i { background: var(--accent-ink); }
.section:has(> .section__motif) { overflow: clip; }

/* ---- Shapes across the site sit further back ----
   They are texture, not content. At full strength they competed with the
   headings they sat behind. */
.shape { opacity: .45; }
@media (max-width: 860px) { .shape { opacity: .4; } }
.card__shape { opacity: .5; }
.ph--placeholder .ph__shape { opacity: .6; }
.card--person .ph--placeholder .ph__shape { opacity: .7; }

/* ============================ round 12 ============================ */

/* ---- The figure tooltip ----
   A real button, so it is reachable by keyboard and announced; the bubble is
   linked with aria-describedby. It stays open while the pointer is anywhere in
   the wrapper (WCAG 1.4.13 hoverable) and Escape dismisses it. */
.tip { position: relative; display: inline-block; vertical-align: baseline; }
.tip__btn {
	display: inline-grid; place-items: center;
	width: 22px; height: 22px; margin-inline-start: 2px;
	padding: 0; border: 0; border-radius: 50%;
	background: none; color: var(--accent-lift); cursor: help;
}
.is-sage .tip__btn, .is-paper .tip__btn, .is-white .tip__btn { color: var(--accent-ink); }
.tip__bubble {
	position: absolute; inset-inline-start: 50%; bottom: calc(100% + 10px);
	transform: translateX(-50%);
	width: max-content; max-width: 260px; z-index: 30;
	padding: 12px 14px;
	background: var(--white); color: var(--ink);
	border-radius: 14px 14px 14px 0;
	box-shadow: var(--shadow-lift);
	font-size: 13px; line-height: 1.45; font-weight: 400;
	text-transform: none; letter-spacing: 0;
	opacity: 0; visibility: hidden;
	transition: opacity .14s ease, visibility .14s;
}
.tip:hover .tip__bubble,
.tip__btn:focus-visible + .tip__bubble,
.tip__bubble:hover { opacity: 1; visibility: visible; }
@media (max-width: 900px) {
	/* End-aligned with the trigger, so it opens inwards and always fits. */
	.tip__bubble {
		inset-inline-start: auto; inset-inline-end: 0; transform: none;
		max-width: min(260px, calc(100vw - 2 * var(--gutter)));
		border-radius: 14px 14px 0 14px;
	}
}

/* ---- The leaf field on a light ground uses the bright accent ----
   accent-ink is the text green; at pattern scale it read as grey-olive. This is
   decoration, not type, so it takes the brand green and leans on opacity. */
.is-sage .section__motif .motif__field i,
.is-paper .section__motif .motif__field i,
.is-white .section__motif .motif__field i { background: var(--accent); }
.is-paper .section__motif, .is-white .section__motif { opacity: .8; }
.is-sage .section__motif { opacity: .7; }

/* ---- Events lead with the calendar ---- */
.card__icon {
	display: inline-grid; place-items: center;
	width: 42px; height: 42px; margin-bottom: 16px;
	border-radius: 50%; background: var(--accent); color: var(--accent-on);
}

/* ---- The stats lock-up: the four overlaps the orb rather than covering it ---- */
.stats-art__4 { opacity: .82; }

/* ---- An article with no lead image still needs air under the band ---- */
.article__inner { padding-top: clamp(0.5rem, 2vw, 1.5rem); }
.article:not(:has(.article__figure)) .article__inner { padding-top: clamp(1.5rem, 4vw, 3rem); }

/* ---- A single-column form: heading above, form under it, both measured ---- */
.split:not(.split--2) { gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.split:not(.split--2) .form-holder { max-width: 640px; }

/* ---- Fluent Forms: the select and the submit, in this theme's language ---- */
.form-holder select.ff-el-form-control {
	appearance: none; -webkit-appearance: none;
	padding-inline-end: 46px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23474D4A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	/* Inset from the field's own curve, not jammed against it. */
	background-position: right 20px center;
	background-size: 20px 20px;
}
[dir="rtl"] .form-holder select.ff-el-form-control { background-position: left 20px center; }
.form-holder .ff-btn-submit {
	border: 0 !important;
	box-shadow: none !important;
	padding-inline: 26px !important;
}
.form-holder .ff-btn-submit:focus { outline: none !important; }
.form-holder .ff-btn-submit:focus-visible {
	outline: 3px solid var(--accent-ink) !important;
	outline-offset: 3px;
}
/* The trigger travels with the label's last word rather than dropping alone. */
.tip-hold { white-space: nowrap; }
/* Beat `.figure > span`'s inherited block/text-wrap on the tooltip's own spans. */
.figure .tip-hold { display: inline; white-space: nowrap; text-wrap: nowrap; max-width: none; margin: 0; }
.figure .tip { display: inline-block; max-width: none; margin: 0; }
/* The bubble sits inside the nowrap unit, so it has to opt back into wrapping. */
.tip__bubble { white-space: normal; text-wrap: pretty; }

/* A button inside prose is still a button: prose's link underline must not
   reach it. */
/* The band makes room for what climbs into it, so the image crosses the edge
   without ever reaching the title. */
.page-header:has(+ .article .article__figure) { padding-bottom: calc(var(--section-y) + 72px); }
/* The trigger sits on the text's optical centre, not on its baseline — an
   inline-block aligns its bottom edge to the baseline, which rode it high. */
.figure .tip { vertical-align: middle; }
.figure .tip__btn { margin-inline-start: 4px; transform: translateY(-1px); }

/* A button in body copy takes the compact scale. At the full section size it
   outweighed the 14px prose it sits in. */
.article__body .btn { min-height: 40px; padding: 9px 20px; }
.article__body p:has(> .btn:only-child) { margin-top: 1.9em; }

/* ---- Editor lists inside cards and the timeline ---- */
.card ul, .timeline__body ul { margin: .6em 0 0; padding-inline-start: 1.1em; }
.card li, .timeline__body li { color: var(--ink-2); font-size: var(--step-sm); margin-bottom: .3em; }
.card:not(.card--light) li, .is-deep .timeline__body li, .is-deep-2 .timeline__body li { color: var(--on-deep-2); }
.card p + p, .timeline__body p + p { margin-top: .7em; }

/* ---- The hero's status line: what changes, under what does not ---- */
.hero__note {
	margin-top: 20px; font-size: var(--step-sm); color: var(--on-deep-2);
	max-width: 46ch;
}
.is-sage .hero__note, .is-paper .hero__note, .is-white .hero__note { color: var(--ink-2); }

/* ---- A hero standfirst of two paragraphs: the second is supporting detail ---- */
.deck > p { margin: 0; }
.deck > p + p { margin-top: .7em; }
.hero .deck > p + p { font-size: var(--step-sm); }
/* A button that follows body copy needs more than a paragraph gap above it. */
.prose .btn-row { margin-top: clamp(1.5rem, 3vw, 2.25rem); }