/* ===========================================================================
   OneAll Human Capital — site stylesheet

   The palette, typefaces and editorial rhythm are carried over from the print
   prospectus so the site and the brochure read as one piece of work. What
   changes is the geometry: the brochure was fixed A4 pages at 9.3pt, this is a
   fluid document that has to stay hard-hitting from a 360px phone to a 4K
   display. Type therefore scales with clamp() rather than sitting on a fixed
   point scale, and every full-bleed photograph is sized in viewport units.

   Sections alternate across three surfaces — paper, forest and near-black —
   which is what gives the long scroll its pacing. Surface is set by a class on
   the <section>, and every component below reads its colours from custom
   properties so a component works on any of the three without a variant.
   =========================================================================== */

/* ---------------------------------------------------------------- tokens -- */

:root {
	/* Brand */
	--ink: #1c1712;
	--paper: #f7f1e4;
	--paper-2: #fffcf5;
	--gold: #c8952f;
	--gold-bright: #e0ae45;
	--gold-dark: #93701f;
	--forest: #20493a;
	--forest-dark: #12271f;
	--rust: #a34a23;
	--dark: #171310;
	--muted: #8b8071;

	/* Surface-relative colours. Overridden per surface below, so a card or a
	   stat reads correctly whichever section it lands in. */
	--surface: var(--paper);
	--on-surface: var(--ink);
	--on-surface-soft: #5c5347;
	--on-surface-faint: var(--muted);
	--accent: var(--gold-dark);
	--rule: rgba(28, 23, 18, 0.14);
	--rule-strong: rgba(28, 23, 18, 0.28);
	--card: rgba(28, 23, 18, 0.035);
	--card-border: rgba(28, 23, 18, 0.12);

	--serif: 'Fraunces', Georgia, 'Times New Roman', serif;
	--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Fluid type. The upper bounds are deliberately large — a prospectus that
	   opens quietly does not convert. */
	--t-display: clamp(2.4rem, 7.4vw, 6.5rem);
	--t-h1: clamp(2.25rem, 5vw, 4rem);
	--t-h2: clamp(1.8rem, 3.6vw, 3rem);
	--t-h3: clamp(1.25rem, 2vw, 1.6rem);
	--t-h4: clamp(1.05rem, 1.3vw, 1.2rem);
	--t-lede: clamp(1.15rem, 1.75vw, 1.55rem);
	--t-body: clamp(1rem, 1.05vw, 1.115rem);
	--t-small: clamp(0.875rem, 0.95vw, 0.95rem);
	--t-stat: clamp(3rem, 8vw, 6rem);

	--shell: 1280px;
	--gutter: clamp(1.25rem, 5vw, 5rem);
	--section-y: clamp(4.5rem, 11vh, 9rem);
	--measure: 68ch;

	--radius: 3px;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--nav-h: 84px;
}

.surface-paper {
	--surface: var(--paper);
	--on-surface: var(--ink);
	--on-surface-soft: #5c5347;
	--on-surface-faint: var(--muted);
	--accent: var(--gold-dark);
	--rule: rgba(28, 23, 18, 0.14);
	--rule-strong: rgba(28, 23, 18, 0.28);
	--card: rgba(28, 23, 18, 0.035);
	--card-border: rgba(28, 23, 18, 0.12);
}

.surface-forest {
	--surface: var(--forest-dark);
	--on-surface: #f6efe0;
	--on-surface-soft: #d8cfba;
	--on-surface-faint: #a99f8a;
	--accent: var(--gold);
	--rule: rgba(244, 236, 220, 0.16);
	--rule-strong: rgba(244, 236, 220, 0.34);
	--card: rgba(244, 236, 220, 0.05);
	--card-border: rgba(244, 236, 220, 0.14);
}

.surface-dark {
	--surface: var(--dark);
	--on-surface: #f6efe0;
	--on-surface-soft: #d8cfba;
	--on-surface-faint: #a99f8a;
	--accent: var(--gold);
	--rule: rgba(244, 236, 220, 0.16);
	--rule-strong: rgba(244, 236, 220, 0.34);
	--card: rgba(244, 236, 220, 0.05);
	--card-border: rgba(244, 236, 220, 0.14);
}

/* ------------------------------------------------------------------ font -- */

@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/fraunces-var.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-var.woff2') format('woff2');
}

/* ------------------------------------------------------------------ base -- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchored sections must clear the fixed masthead. */
	scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--t-body);
	line-height: 1.62;
	font-feature-settings: 'kern' 1;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img,
picture,
svg {
	display: block;
	max-width: 100%;
}

/* Every photograph on the site is a <picture> so WebP can be served with a
   JPEG fallback, which puts an extra element between the sized container and
   the <img>. A percentage height resolves against the parent, and <picture>
   defaults to height:auto — so without this the img silently falls back to its
   intrinsic aspect ratio and stops short of the bottom of its container. */
.hero-media picture,
.split-media picture,
.mosaic figure picture,
.quoteband-media picture,
.cta-band-media picture {
	display: block;
	width: 100%;
	height: 100%;
}

h1,
h2,
h3,
h4 {
	font-family: var(--serif);
	font-weight: 600;
	letter-spacing: -0.018em;
	line-height: 1.06;
	margin: 0 0 0.6em;
	color: var(--on-surface);
	text-wrap: balance;
}

h1 {
	font-size: var(--t-h1);
}

h2 {
	font-size: var(--t-h2);
}

h3 {
	font-size: var(--t-h3);
	line-height: 1.18;
}

/* Component sub-headings are h3 for document structure — they sit under a
   section h2 — but carry the smaller h4 step of the type scale. */
h4,
h3.sub {
	font-size: var(--t-h4);
	line-height: 1.28;
	margin-bottom: 0.35em;
}

p {
	margin: 0 0 1.1em;
	max-width: var(--measure);
	text-wrap: pretty;
}

a {
	color: inherit;
}

ul,
ol {
	margin: 0 0 1.1em;
	padding-left: 1.2em;
}

li {
	margin-bottom: 0.35em;
}

strong {
	font-weight: 650;
}

:focus-visible {
	outline: 2.5px solid var(--gold);
	outline-offset: 3px;
	border-radius: 2px;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 200;
	padding: 0.75rem 1.25rem;
	background: var(--gold);
	color: var(--dark);
	font-weight: 650;
	border-radius: var(--radius);
	transition: top 0.2s var(--ease);
}

.skip-link:focus {
	top: 1rem;
}

/* -------------------------------------------------------------- utilities -- */

.shell {
	width: min(100% - var(--gutter) * 2, var(--shell));
	margin-inline: auto;
}

.shell-wide {
	width: min(100% - var(--gutter) * 2, 1560px);
	margin-inline: auto;
}

section {
	background: var(--surface);
	color: var(--on-surface);
	padding-block: var(--section-y);
	position: relative;
}

.section-tight {
	padding-block: clamp(3rem, 6vh, 4.5rem);
}

.eyebrow {
	font-family: var(--sans);
	font-size: clamp(0.68rem, 0.8vw, 0.76rem);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--accent);
	margin: 0 0 1.1rem;
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

/* The short gold rule that opens every section — the site's most repeated
   signature, lifted from the prospectus's section openers. */
.eyebrow::before {
	content: '';
	width: clamp(24px, 4vw, 48px);
	height: 1.5px;
	background: var(--accent);
	flex: none;
}

.eyebrow.no-rule::before {
	display: none;
}

.lede {
	font-size: var(--t-lede);
	line-height: 1.45;
	color: var(--on-surface-soft);
	max-width: 46ch;
	font-weight: 380;
}

.small {
	font-size: var(--t-small);
	line-height: 1.55;
}

.soft {
	color: var(--on-surface-soft);
}

.faint {
	color: var(--on-surface-faint);
}

.pull {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.35rem, 2.6vw, 2.1rem);
	line-height: 1.28;
	color: var(--accent);
	max-width: 24ch;
	margin: 0;
	text-wrap: balance;
}

.note {
	font-size: var(--t-small);
	color: var(--on-surface-faint);
	border-left: 2px solid var(--rust);
	padding: 0.15rem 0 0.15rem 1rem;
	max-width: 62ch;
	margin: 1.5rem 0 0;
}

.center {
	text-align: center;
}

.center p,
.center .lede {
	margin-inline: auto;
}

.center .eyebrow {
	justify-content: center;
}

/* --------------------------------------------------------------- buttons -- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	font-family: var(--sans);
	font-size: clamp(0.9rem, 1vw, 1rem);
	font-weight: 620;
	letter-spacing: 0.005em;
	line-height: 1;
	padding: 1.05rem 1.85rem;
	border: 1.5px solid transparent;
	border-radius: var(--radius);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
		border-color 0.25s var(--ease), transform 0.25s var(--ease),
		box-shadow 0.25s var(--ease);
	white-space: nowrap;
}

.btn:hover {
	transform: translateY(-2px);
}

.btn:active {
	transform: translateY(0);
}

.btn-primary {
	background: var(--gold);
	border-color: var(--gold);
	color: #1a1206;
	box-shadow: 0 2px 14px rgba(200, 149, 47, 0.28);
}

.btn-primary:hover {
	background: var(--gold-bright);
	border-color: var(--gold-bright);
	box-shadow: 0 8px 26px rgba(200, 149, 47, 0.4);
}

.btn-ghost {
	background: transparent;
	border-color: var(--rule-strong);
	color: var(--on-surface);
}

.btn-ghost:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* On a photograph there is no predictable backdrop, so the ghost button gets
   its own translucent plate rather than relying on surface tokens. */
.btn-on-photo {
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.btn-on-photo:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: #fff;
	color: #fff;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 2rem;
}

.textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 620;
	font-size: var(--t-small);
	letter-spacing: 0.02em;
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 2px;
	transition: gap 0.25s var(--ease), opacity 0.25s var(--ease);
}

.textlink:hover {
	gap: 0.85rem;
	opacity: 0.78;
}

.textlink .arrow {
	transition: transform 0.25s var(--ease);
}

/* ------------------------------------------------------------------- nav -- */

.masthead {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--nav-h);
	display: flex;
	align-items: center;
	transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease),
		border-color 0.35s var(--ease);
	border-bottom: 1px solid transparent;
}

/* Over the hero photograph the bar is invisible; once the page scrolls past it
   the bar takes on the near-black surface so the links stay legible against
   whatever section is underneath. */
.masthead.is-stuck {
	background: rgba(19, 15, 12, 0.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom-color: rgba(244, 236, 220, 0.12);
	box-shadow: 0 6px 30px rgba(0, 0, 0, 0.28);
}

.masthead .shell-wide {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: min(100% - var(--gutter) * 1.2, 1560px);
}

.brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	flex: none;
}

.brand-mark {
	height: 54px;
	width: auto;
	/* The mark is a gold gradient on transparent, so it carries its own colour
	   over the dark surfaces — no tone swap. The shadow is only there to hold
	   it off the hero photograph, where the bar itself is invisible. */
	filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.55));
}

/* The wordmark is live text rather than baked into the logo file. It stays
   crisp at any density, it is what a screen reader and a search engine read as
   the name of the business, and the two lines can be re-tuned against the mark
   without re-cutting an asset. The sizes below are chosen so the two lines
   measure roughly the same width, which is what makes it read as a lockup
   rather than a caption. */
.brand-word {
	display: flex;
	flex-direction: column;
	gap: 0.34em;
	line-height: 1;
	white-space: nowrap;
}

.brand-word-name {
	font-family: var(--sans);
	font-size: 1.36rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--gold-bright);
	background: linear-gradient(100deg, #b0801f 0%, #f0cd7c 40%, #c8952f 72%, #e6bb61 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.brand-word-sub {
	font-family: var(--sans);
	font-size: 0.575rem;
	font-weight: 600;
	letter-spacing: 0.245em;
	text-transform: uppercase;
	color: rgba(246, 239, 224, 0.74);
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}

.nav-links {
	display: flex;
	align-items: center;
	gap: clamp(1.1rem, 2.2vw, 2.2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-links a {
	font-size: 0.9rem;
	font-weight: 520;
	color: rgba(246, 239, 224, 0.86);
	text-decoration: none;
	letter-spacing: 0.01em;
	position: relative;
	padding-block: 0.4rem;
	transition: color 0.2s var(--ease);
}

.nav-links a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.28s var(--ease);
}

.nav-links a:hover,
.nav-links a[aria-current='page'] {
	color: #fff;
}

.nav-links a:hover::after,
.nav-links a[aria-current='page']::after {
	transform: scaleX(1);
}

.nav-cta {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	flex: none;
}

.nav-cta .btn {
	padding: 0.8rem 1.35rem;
	font-size: 0.875rem;
}

.nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid rgba(244, 236, 220, 0.28);
	border-radius: var(--radius);
	width: 44px;
	height: 44px;
	cursor: pointer;
	padding: 0;
	place-items: center;
}

.nav-toggle span {
	display: block;
	width: 19px;
	height: 1.5px;
	background: #f6efe0;
	transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle span + span {
	margin-top: 5px;
}

.nav-open .nav-toggle span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.nav-open .nav-toggle span:nth-child(2) {
	opacity: 0;
}

.nav-open .nav-toggle span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 940px) {
	.nav-toggle {
		display: grid;
	}

	/* On a phone the lockup has to leave the toggle room, so the mark and both
	   lines of the wordmark step down together. */
	.brand-mark {
		height: 44px;
	}

	.brand-word-name {
		font-size: 1.12rem;
	}

	.brand-word-sub {
		font-size: 0.5rem;
		letter-spacing: 0.225em;
	}

	.nav-links {
		position: fixed;
		inset: var(--nav-h) 0 auto;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: rgba(19, 15, 12, 0.98);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
		padding: 0.5rem var(--gutter) 1.75rem;
		border-bottom: 1px solid rgba(244, 236, 220, 0.14);
		transform: translateY(-8px);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
	}

	.nav-open .nav-links {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	.nav-links a {
		display: block;
		padding: 1rem 0;
		font-size: 1.05rem;
		border-bottom: 1px solid rgba(244, 236, 220, 0.1);
	}

	.nav-links a::after {
		display: none;
	}

	.nav-cta .btn-nav-book {
		display: none;
	}

	.nav-links .mobile-cta {
		margin-top: 1.25rem;
		border: 0;
	}

	.nav-links .mobile-cta .btn {
		width: 100%;
	}
}

@media (min-width: 941px) {
	.nav-links .mobile-cta {
		display: none;
	}
}

/* ------------------------------------------------------------------ hero -- */

/* The hero runs two compositions off one set of parts, because a headline this
   size cannot share space with a portrait. Wide viewports get an editorial
   split: the copy holds a dark panel on the left, the photograph is anchored
   right, and a horizontal scrim dissolves the seam between them — so the
   subject's face is never underneath type. Narrow viewports stack instead,
   photograph above and copy beneath, since at phone widths the copy fills the
   whole frame whatever the gradient does. */

.hero {
	position: relative;
	min-height: min(100svh, 900px);
	display: flex;
	align-items: flex-end;
	padding-block: calc(var(--nav-h) + 3rem) clamp(3rem, 8vh, 6rem);
	overflow: hidden;
	background: var(--dark);
	color: #fff;
}

.hero-media {
	position: absolute;
	inset: 0 0 0 auto;
	width: 68%;
	z-index: 0;
}

.hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focal, center);
}

/* Three washes: a left-to-right scrim that carries the panel's near-black into
   the photograph and clears well before the subject, a bottom-up wash for
   depth, and a top band so the masthead links stay readable before the bar has
   anything solid behind it. */
.hero-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
			to right,
			var(--dark) 0%,
			rgba(23, 19, 16, 0.94) 10%,
			rgba(23, 19, 16, 0.58) 24%,
			rgba(23, 19, 16, 0.16) 36%,
			rgba(23, 19, 16, 0) 48%
		),
		linear-gradient(
			to top,
			rgba(12, 9, 7, 0.78) 0%,
			rgba(12, 9, 7, 0.34) 30%,
			rgba(12, 9, 7, 0) 62%
		),
		linear-gradient(to bottom, rgba(12, 9, 7, 0.5) 0%, rgba(12, 9, 7, 0) 22%);
}

.hero .shell {
	position: relative;
	z-index: 1;
}

/* Hold the copy inside the panel. Without this the headline's 17ch measure
   resolves to most of the shell at display sizes and runs under the subject. */
.hero .shell > * {
	max-width: min(38rem, 47%);
}

.hero-title {
	/* Scaled to the panel rather than the viewport — the ceiling here is what
	   keeps the headline to four or five lines in a half-width column. */
	font-size: clamp(2.05rem, 4.6vw, 4.15rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.028em;
	color: #fff;
	margin: 0 0 1.5rem;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

.hero-title em {
	font-style: normal;
	color: var(--gold);
}

.hero .lede {
	color: rgba(255, 255, 255, 0.9);
	/* min() so the panel constraint above still wins on wide viewports. */
	max-width: min(44ch, 38rem, 47%);
	font-size: clamp(1.1rem, 1.55vw, 1.4rem);
}

.hero .eyebrow {
	color: var(--gold);
}

.hero-scroll {
	position: absolute;
	bottom: 1.5rem;
	right: var(--gutter);
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.68rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
}

.hero-scroll .line {
	width: 1px;
	height: 42px;
	background: linear-gradient(to bottom, var(--gold), transparent);
}

/* Below the split, the photograph becomes a band and the copy sits under it on
   the section's own near-black. The band's foot fades into that same colour, so
   the two read as one field rather than a photo with a caption; the copy then
   rides up a little onto the fade to keep the join from looking stacked. */
@media (max-width: 900px) {
	.hero {
		display: block;
		min-height: 0;
		padding-block: var(--nav-h) clamp(2.75rem, 7vh, 3.75rem);
	}

	.hero-media {
		position: relative;
		inset: auto;
		width: auto;
		/* Deep enough to carry the portrait, shallow enough to leave the primary
		   call to action at or above the fold on a small phone. */
		height: clamp(245px, 40svh, 400px);
	}

	.hero-media::after {
		background: linear-gradient(
				to top,
				var(--dark) 0%,
				rgba(23, 19, 16, 0.7) 15%,
				rgba(23, 19, 16, 0.12) 44%,
				rgba(23, 19, 16, 0) 72%
			),
			linear-gradient(to bottom, rgba(12, 9, 7, 0.52) 0%, rgba(12, 9, 7, 0) 26%);
	}

	.hero .shell {
		margin-top: -2.25rem;
	}

	.hero .shell > * {
		max-width: none;
	}

	.hero .lede {
		max-width: min(44ch, 100%);
	}

	.hero-scroll {
		display: none;
	}
}

/* ------------------------------------------------------------- stat strip -- */

.statstrip {
	background: var(--forest-dark);
	color: #f6efe0;
	border-bottom: 1px solid rgba(244, 236, 220, 0.1);
}

.statstrip .grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(244, 236, 220, 0.12);
	border-inline: 1px solid rgba(244, 236, 220, 0.12);
}

.statstrip .cell {
	background: var(--forest-dark);
	padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 1.75rem);
}

.statstrip .n {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.85rem, 3.6vw, 3rem);
	line-height: 1;
	color: var(--gold);
	letter-spacing: -0.02em;
	display: block;
	margin-bottom: 0.5rem;
}

.statstrip .l {
	font-size: clamp(0.78rem, 0.95vw, 0.88rem);
	line-height: 1.4;
	color: #bcb2a0;
	margin: 0;
	max-width: 24ch;
}

@media (max-width: 780px) {
	.statstrip .grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ------------------------------------------------------------ split rows -- */

/* The workhorse layout: a photograph on one side, an editorial column on the
   other, reversible per instance. */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 6rem);
}

.split.ratio-photo {
	grid-template-columns: 1.05fr 1fr;
}

.split.reverse .split-media {
	order: 2;
}

.split-media {
	position: relative;
}

.split-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focal, center);
	border-radius: var(--radius);
}

.split-media.tall img {
	aspect-ratio: 4 / 5;
}

.split-media.square img {
	aspect-ratio: 1 / 1;
}

.split-media.wide img {
	aspect-ratio: 4 / 3;
}

/* A thin gold key-line offset behind the photograph — a print device that
   reads as considered rather than decorative. */
.split-media.keyline::before {
	content: '';
	position: absolute;
	inset: 1.25rem -1.25rem -1.25rem 1.25rem;
	border: 1.5px solid var(--gold);
	border-radius: var(--radius);
	z-index: -1;
	opacity: 0.5;
}

.split-body > *:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.split,
	.split.ratio-photo {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.split.reverse .split-media {
		order: 0;
	}

	.split-media.keyline::before {
		display: none;
	}
}

/* ------------------------------------------------------------- big stats -- */

/* Number and caption as one block, centred against each other rather than sat
   on a shared baseline — on a baseline the caption's first line hangs off the
   foot of a 6rem numeral and the rest of it drops below, which reads as two
   loose things. The numeral is sized so its height and the caption's three
   lines come out close, and a gold keyline ties them together. */
.bigstat {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: clamp(1.1rem, 2vw, 1.75rem);
	margin: 2.25rem 0;
	padding-left: clamp(1.1rem, 2vw, 1.6rem);
	border-left: 2px solid var(--accent);
}

.bigstat .n {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(2.6rem, 5.4vw, 4.4rem);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--accent);
}

.bigstat .l {
	font-size: var(--t-small);
	color: var(--on-surface-soft);
	/* Wide enough that the caption sets to roughly the numeral's own height,
	   so the pair reads as one mass rather than a figure with a note by it. */
	max-width: 40ch;
	margin: 0;
}

/* Too little width left beside the numeral to set the caption — stack. */
@media (max-width: 560px) {
	.bigstat {
		grid-template-columns: 1fr;
		row-gap: 0.5rem;
	}
}

.statrow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 2.5rem 0;
}

.statrow .n {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--accent);
	display: block;
	margin-bottom: 0.45rem;
}

.statrow .l {
	font-size: var(--t-small);
	color: var(--on-surface-soft);
	margin: 0;
	max-width: 26ch;
}

/* ------------------------------------------------------------------ chips -- */

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

.chips li {
	font-size: 0.76rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 620;
	padding: 0.55rem 1.05rem;
	border: 1px solid var(--rule-strong);
	border-radius: 100px;
	margin: 0;
	color: var(--on-surface);
}

/* A stacked variant of the chip list, for entries that are names rather than
   labels — university programme titles run to several words and read as
   shouting in the pill treatment's uppercase. Same bordered container, set as
   a left-aligned list in sentence case. */
.chips.stack {
	flex-direction: column;
	align-items: stretch;
	gap: 0.4rem;
}

.chips.stack li {
	text-transform: none;
	letter-spacing: 0.005em;
	font-size: 0.82rem;
	font-weight: 560;
	line-height: 1.4;
	border-radius: var(--radius);
	padding: 0.55rem 0.85rem;
	color: var(--on-surface-soft);
	border-color: var(--card-border);
}

/* ------------------------------------------------------------------ cards -- */

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin-top: 3rem;
}

.card {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: clamp(1.6rem, 2.6vw, 2.25rem);
	position: relative;
	transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.card:hover {
	border-color: var(--accent);
	transform: translateY(-3px);
}

.card h3,
.card h3 {
	color: var(--on-surface);
}

.card p:last-child {
	margin-bottom: 0;
}

.card .card-n {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--accent);
	display: block;
	margin-bottom: 0.9rem;
	letter-spacing: 0.02em;
}

/* ------------------------------------------------------------- benefits -- */

.benefits {
	display: grid;
	gap: 0;
	margin-top: 2.5rem;
	border-top: 1px solid var(--rule);
}

.benefit {
	padding: 1.6rem 0;
	border-bottom: 1px solid var(--rule);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.25rem;
	align-items: start;
}

.benefit .mark {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid var(--accent);
	display: grid;
	place-items: center;
	flex: none;
	margin-top: 2px;
}

.benefit .mark svg {
	width: 12px;
	height: 12px;
	stroke: var(--accent);
	stroke-width: 2.5;
	fill: none;
}

.benefit h3 {
	margin-bottom: 0.25rem;
}

.benefit p {
	margin: 0;
	font-size: var(--t-small);
	color: var(--on-surface-soft);
}

/* ---------------------------------------------------------------- mosaic -- */

.mosaic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: clamp(120px, 17vw, 230px);
	gap: clamp(0.5rem, 1vw, 0.85rem);
}

.mosaic figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--forest-dark);
}

.mosaic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focal, center);
	transition: transform 0.8s var(--ease);
}

.mosaic figure:hover img {
	transform: scale(1.045);
}

.mosaic .tall {
	grid-row: span 2;
}

.mosaic .wide {
	grid-column: span 2;
}

/* Five photographs will not tile into two columns while two of them span the
   full width — the fifth is left alone in a half cell with a hole beside it.
   So on narrow screens only the lead image spans, as a statement band, and the
   remaining four fall into two even pairs beneath it. */
@media (max-width: 780px) {
	.mosaic {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: clamp(105px, 26vw, 170px);
	}

	.mosaic .wide,
	.mosaic .tall {
		grid-column: span 1;
		grid-row: span 1;
	}

	.mosaic figure:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
}

/* ------------------------------------------------------------------ steps -- */

.steps {
	counter-reset: step;
	margin-top: 3rem;
	display: grid;
	gap: 0;
}

.step {
	display: grid;
	grid-template-columns: clamp(3rem, 6vw, 5rem) 1fr;
	gap: clamp(1rem, 2.5vw, 2rem);
	padding: 1.6rem 0;
	border-top: 1px solid var(--rule);
	align-items: start;
}

.step:last-child {
	border-bottom: 1px solid var(--rule);
}

.step .n {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1;
	color: var(--accent);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.step h3 {
	margin-bottom: 0.35rem;
}

.step p {
	margin: 0;
	font-size: var(--t-small);
	color: var(--on-surface-soft);
	max-width: 62ch;
}

/* Steps that mark a decision point for the client rather than delivery. */
.step.highlight .n,
.step.highlight h4 {
	color: var(--accent);
}

/* -------------------------------------------------------------------- faq -- */

.faq-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 2.5rem 0 0;
}

.faq-filter {
	background: transparent;
	border: 1px solid var(--rule-strong);
	border-radius: 100px;
	padding: 0.6rem 1.15rem;
	font-family: var(--sans);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--on-surface-soft);
	cursor: pointer;
	transition: all 0.2s var(--ease);
}

.faq-filter:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.faq-filter[aria-pressed='true'] {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--surface);
}

.faq-search {
	flex: 1;
	min-width: 220px;
	background: transparent;
	border: 1px solid var(--rule-strong);
	border-radius: 100px;
	padding: 0.6rem 1.15rem;
	font-family: var(--sans);
	font-size: 0.85rem;
	color: var(--on-surface);
}

.faq-search::placeholder {
	color: var(--on-surface-faint);
}

.faq-list {
	margin-top: 2.5rem;
	border-top: 1px solid var(--rule);
}

.qa {
	border-bottom: 1px solid var(--rule);
}

.qa[hidden] {
	display: none;
}

.qa summary {
	list-style: none;
	cursor: pointer;
	padding: 1.35rem 3rem 1.35rem 0;
	position: relative;
	font-family: var(--serif);
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.012em;
	color: var(--on-surface);
	transition: color 0.2s var(--ease);
}

.qa summary::-webkit-details-marker {
	display: none;
}

.qa summary:hover {
	color: var(--accent);
}

.qa summary::after {
	content: '';
	position: absolute;
	right: 0.25rem;
	top: 50%;
	width: 11px;
	height: 11px;
	border-right: 1.8px solid var(--accent);
	border-bottom: 1.8px solid var(--accent);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.3s var(--ease);
}

.qa[open] summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.qa .answer {
	padding: 0 3rem 1.5rem 0;
}

.qa .answer p {
	margin: 0 0 0.8em;
	color: var(--on-surface-soft);
	font-size: var(--t-small);
	max-width: 72ch;
}

.qa .answer p:last-child {
	margin-bottom: 0;
}

.faq-empty {
	padding: 3rem 0;
	color: var(--on-surface-faint);
}

/* Two-column FAQ on the dedicated page, where the list is long. */
.faq-columns {
	column-count: 2;
	column-gap: clamp(2rem, 5vw, 4.5rem);
}

.faq-columns .faq-group {
	break-inside: avoid-column;
	margin-bottom: 2.5rem;
}

@media (max-width: 860px) {
	.faq-columns {
		column-count: 1;
	}
}

.faq-group-title {
	font-family: var(--sans);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--accent);
	padding-bottom: 0.7rem;
	border-bottom: 1.5px solid var(--accent);
	margin: 0 0 0.5rem;
}

/* ------------------------------------------------------------- quote band -- */

.quoteband {
	position: relative;
	overflow: hidden;
	background: var(--forest-dark);
	color: #f6efe0;
	padding-block: clamp(5rem, 12vh, 9rem);
}

.quoteband-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.quoteband-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focal, center);
	opacity: 0.32;
}

.quoteband-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(18, 39, 31, 0.95) 0%,
		rgba(18, 39, 31, 0.72) 55%,
		rgba(18, 39, 31, 0.5) 100%
	);
}

.quoteband .shell {
	position: relative;
	z-index: 1;
}

.quoteband blockquote {
	margin: 0;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.6rem, 3.6vw, 3rem);
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: #fff;
	max-width: 20ch;
	text-wrap: balance;
}

.quoteband cite {
	display: block;
	margin-top: 1.75rem;
	font-family: var(--sans);
	font-style: normal;
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 650;
}

/* ------------------------------------------------------------------ form -- */

.booking {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}

@media (max-width: 940px) {
	.booking {
		grid-template-columns: 1fr;
	}
}

.paths {
	/* A fieldset for the radio-group semantics, stripped of the UA border and
	   notched legend, which read as an unintended box around the cards. */
	border: 0;
	margin: 0;
	padding: 0;
	min-inline-size: 0;
	display: grid;
	gap: 0.85rem;
	margin-top: 2.25rem;
}

/* Each conversion path is a radio dressed as a card — one tap sets the intent
   and scrolls the form into view. */
.path {
	position: relative;
	display: block;
	cursor: pointer;
}

.path input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.path .body {
	border: 1.5px solid var(--card-border);
	border-radius: var(--radius);
	padding: 1.25rem 1.4rem;
	background: var(--card);
	transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 1rem;
	align-items: start;
}

.path .dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid var(--rule-strong);
	margin-top: 3px;
	position: relative;
	transition: border-color 0.25s var(--ease);
}

.path .dot::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--gold);
	transform: scale(0);
	transition: transform 0.25s var(--ease);
}

.path input:checked ~ .body {
	border-color: var(--gold);
	background: rgba(200, 149, 47, 0.09);
}

.path input:checked ~ .body .dot {
	border-color: var(--gold);
}

.path input:checked ~ .body .dot::after {
	transform: scale(1);
}

.path input:focus-visible ~ .body {
	outline: 2.5px solid var(--gold);
	outline-offset: 3px;
}

.path h3 {
	margin: 0 0 0.2rem;
}

.path p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--on-surface-soft);
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.form-grid .full {
	grid-column: 1 / -1;
}

@media (max-width: 560px) {
	.form-grid {
		grid-template-columns: 1fr;
	}
}

.form-field label {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 650;
	color: var(--on-surface-faint);
	margin-bottom: 0.6rem;
}

.form-field .req {
	color: var(--rust);
}

.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1.5px solid var(--rule-strong);
	border-radius: 0;
	padding: 0.7rem 0;
	font-family: var(--sans);
	font-size: 1rem;
	color: var(--on-surface);
	transition: border-color 0.25s var(--ease);
}

.form-field select {
	cursor: pointer;
}

.form-field select option {
	background: var(--forest-dark);
	color: #f6efe0;
}

.form-field textarea {
	resize: vertical;
	min-height: 90px;
	line-height: 1.55;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	border-bottom-color: var(--gold);
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
	outline: 2.5px solid var(--gold);
	outline-offset: 4px;
}

.form-field.invalid input,
.form-field.invalid select,
.form-field.invalid textarea {
	border-bottom-color: var(--rust);
}

.form-error {
	display: none;
	font-size: 0.78rem;
	color: var(--rust);
	margin-top: 0.4rem;
}

.form-field.invalid .form-error {
	display: block;
}

/* The honeypot is a real, reachable field for a bot parsing the DOM and an
   invisible one for a human — hence off-screen rather than display:none,
   which some bots detect. */
.hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-status {
	margin-top: 1.5rem;
	padding: 1.1rem 1.3rem;
	border-radius: var(--radius);
	font-size: var(--t-small);
	display: none;
}

.form-status.show {
	display: block;
}

.form-status.ok {
	background: rgba(32, 73, 58, 0.18);
	border: 1px solid var(--gold);
	color: var(--on-surface);
}

.form-status.err {
	background: rgba(163, 74, 35, 0.14);
	border: 1px solid var(--rust);
	color: var(--on-surface);
}

.btn[aria-busy='true'] {
	opacity: 0.7;
	pointer-events: none;
}

/* ------------------------------------------------------------------- cta -- */

.cta-band {
	position: relative;
	overflow: hidden;
	background: var(--dark);
	color: #fff;
	padding-block: clamp(5rem, 13vh, 10rem);
	text-align: center;
}

.cta-band-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.cta-band-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focal, center);
}

.cta-band-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(12, 9, 7, 0.82) 0%,
		rgba(12, 9, 7, 0.72) 50%,
		rgba(12, 9, 7, 0.9) 100%
	);
}

.cta-band .shell {
	position: relative;
	z-index: 1;
}

.cta-band h2 {
	color: #fff;
	max-width: 16ch;
	margin-inline: auto;
	font-size: clamp(2.1rem, 5.2vw, 4rem);
}

.cta-band .lede {
	color: rgba(255, 255, 255, 0.88);
	max-width: 52ch;
	margin-inline: auto;
}

.cta-band .btn-row {
	justify-content: center;
}

/* ---------------------------------------------------------------- footer -- */

.site-footer {
	background: var(--forest-dark);
	color: #d8cfba;
	padding-block: clamp(3.5rem, 7vh, 5.5rem) 2rem;
	font-size: var(--t-small);
}

/* Three columns here rather than the sister site's two: these sites carry a
   cross-link block to the other OneAll programmes, and an auto track for it
   keeps the link lists tight against the right edge while the brand blurb
   takes the slack. */
.footer-top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) auto auto;
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(244, 236, 220, 0.14);
}

@media (max-width: 980px) {
	.footer-top {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

@media (max-width: 780px) {
	.footer-top {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

.site-footer .brand {
	width: max-content;
	max-width: 100%;
	margin-bottom: 1.25rem;
}

.site-footer .brand-mark {
	height: 66px;
	filter: none;
}

/* Nothing sits behind the footer, so the lift the masthead needs is only noise
   here. */
.site-footer .brand-word-name {
	font-size: 1.5rem;
	filter: none;
}

.site-footer .brand-word-sub {
	font-size: 0.635rem;
	color: rgba(216, 207, 186, 0.8);
	text-shadow: none;
}

.site-footer h5 {
	font-family: var(--sans);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--gold);
	margin: 0 0 1.1rem;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer li {
	margin-bottom: 0.6rem;
}

.site-footer a {
	color: #d8cfba;
	text-decoration: none;
	transition: color 0.2s var(--ease);
}

.site-footer a:hover {
	color: var(--gold);
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 2rem;
	font-size: 0.78rem;
	color: #8f8672;
}

/* Contact details still to be supplied — styled so a placeholder is obviously
   a placeholder in a review, and so the real value drops in unchanged. */
.tbc {
	color: var(--gold);
	border-bottom: 1px dashed currentColor;
	font-style: italic;
}

/* ----------------------------------------------------------------- reveal -- */

/* Section entrances. Everything is visible by default and only hidden once
   the script confirms IntersectionObserver support, so a failed or blocked
   script can never leave the page blank. */
.js-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.js-reveal [data-reveal] {
		opacity: 1;
		transform: none;
	}

	.btn:hover {
		transform: none;
	}
}

/* ===========================================================================
   Engineering — components specific to this site

   The sister sites are photograph-led: every section is anchored by a picture
   from the prospectus shoot. This one cannot be. The content brief rules out
   stock photography outright (§9) because the buyer — a transformation manager
   who has sat through five youth-programme pitches — has developed antibodies
   to it, and no site photography exists yet. So the sections below carry their
   weight typographically and with diagrams instead, and are built to look
   deliberate at launch rather than to look like a page with empty image slots.

   When [CLIENT: site photography] arrives, the .split / .mosaic / .quoteband
   components inherited from the shared stylesheet are already here and can be
   dropped in without touching any of this.
   =========================================================================== */

/* -------------------------------------------------- typographic hero -- */

/* The home page hero is one idea: two numbers in tension. Public money already
   committed on the left, the people it has to be spent by on the right, and a
   rule between them doing the work a photograph does elsewhere. The inherited
   .hero constrains its copy to 47% of the shell to keep type off a subject's
   face — with no photograph there is nothing to keep clear of, so that is
   released here. */

.hero-type {
	align-items: center;
	min-height: min(94svh, 880px);
	background:
		radial-gradient(120% 90% at 82% 8%, rgba(200, 149, 47, 0.13), transparent 62%),
		radial-gradient(90% 70% at 4% 96%, rgba(32, 73, 58, 0.5), transparent 60%),
		var(--dark);
}

.hero-type .shell > * {
	max-width: none;
}

.hero-type .lede {
	max-width: 60ch;
}

/* Below 900px the shared hero stacks and pulls its copy up by 2.25rem, so that
   the text rides onto the foot of the photograph's fade and the two read as one
   field. There is no photograph here to ride onto — the negative margin instead
   drags the eyebrow up underneath the masthead. Both the stacking and the pull
   are undone, and the top padding is restored to clear the bar. */
@media (max-width: 900px) {
	.hero-type {
		display: flex;
		min-height: min(88svh, 760px);
		padding-block: calc(var(--nav-h) + 2.25rem) clamp(2.75rem, 7vh, 4rem);
	}

	.hero-type .shell {
		margin-top: 0;
	}
}

.tension {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: clamp(1.25rem, 4vw, 3.5rem);
	margin: 0 0 clamp(1.75rem, 4vh, 3rem);
	font-family: var(--serif);
	font-weight: 600;
	letter-spacing: -0.03em;
}

.tension .fig {
	display: block;
}

.tension .n {
	display: block;
	font-size: clamp(2.5rem, 8.2vw, 7rem);
	line-height: 0.92;
	color: #fff;
}

/* The second figure is the one that is missing, so it carries the accent —
   the eye lands on the gap rather than on the money. */
.tension .fig-short .n {
	color: var(--gold);
}

.tension .l {
	display: block;
	margin-top: 0.85rem;
	font-family: var(--sans);
	font-weight: 500;
	font-size: clamp(0.82rem, 1.15vw, 1rem);
	line-height: 1.4;
	letter-spacing: 0.005em;
	color: rgba(255, 255, 255, 0.62);
	max-width: 22ch;
}

/* A hairline rather than a slash or an arrow: an arrow would imply the two
   figures resolve into each other, and the whole argument is that they do
   not. */
.tension .bar {
	width: 1px;
	background: linear-gradient(
		to bottom,
		transparent,
		rgba(244, 236, 220, 0.42) 22%,
		rgba(244, 236, 220, 0.42) 78%,
		transparent
	);
}

@media (max-width: 720px) {
	.tension {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.tension .bar {
		width: auto;
		height: 1px;
		background: linear-gradient(to right, rgba(244, 236, 220, 0.42), transparent 70%);
	}

	.tension .l {
		max-width: none;
	}
}

/* --------------------------------------------------- the blocked pipeline -- */

/* §10.3 of the brief: the entire diagnosis in one figure. Graduates on the
   left, the registered professionals the country needs on the right, and the
   candidate phase between them — drawn as an obstruction, not as an arrow,
   because the point is that nothing is currently getting through. */

.pipeline {
	display: grid;
	grid-template-columns: 1fr 1.15fr 1fr;
	gap: 1px;
	margin-top: clamp(2.5rem, 5vh, 3.5rem);
	background: var(--rule);
	border: 1px solid var(--rule);
}

.pipeline > * {
	background: var(--surface);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.pipeline .end h3 {
	margin-bottom: 0.5rem;
}

.pipeline .end p {
	margin: 0;
	font-size: var(--t-small);
	color: var(--on-surface-soft);
}

.pipeline .end .n {
	display: block;
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--on-surface);
	margin-bottom: 0.7rem;
}

/* The middle cell is the blockage, so it is the only one with a fill and the
   only one whose label is the accent colour. */
.pipeline .block {
	background: rgba(163, 74, 35, 0.14);
	border-inline: 1px solid rgba(163, 74, 35, 0.4);
}

.pipeline .block .eyebrow {
	color: var(--rust);
}

.surface-dark .pipeline .block .eyebrow,
.surface-forest .pipeline .block .eyebrow {
	color: #d98a5f;
}

.pipeline .block ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pipeline .block li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.7rem;
	font-size: var(--t-small);
	line-height: 1.5;
	color: var(--on-surface-soft);
}

.pipeline .block li:last-child {
	margin-bottom: 0;
}

.pipeline .block li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.7rem;
	height: 1px;
	background: var(--rust);
}

@media (max-width: 860px) {
	.pipeline {
		grid-template-columns: 1fr;
	}

	.pipeline .block {
		border-inline: 0;
		border-block: 1px solid rgba(163, 74, 35, 0.4);
	}
}

/* ---------------------------------------------------------------- funnel -- */

/* §10.1. Five stages, each narrower than the last. The narrowing is the
   argument — scarcity is why first right of refusal is worth anything — so the
   drop-off is drawn rather than described, and the rows are inset from the
   right by an increasing amount set per row with --w. */

.funnel {
	margin-top: clamp(2.5rem, 5vh, 3.5rem);
	counter-reset: stage;
}

.funnel .stage {
	width: var(--w, 100%);
	margin-left: 0;
	border: 1px solid var(--rule);
	border-bottom: 0;
	padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.9rem);
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: clamp(0.9rem, 2vw, 1.6rem);
	align-items: baseline;
	background: linear-gradient(to right, var(--card), transparent 70%);
	transition: width 0.6s var(--ease);
}

.funnel .stage:last-child {
	border-bottom: 1px solid var(--rule);
}

.funnel .stage .n {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
	counter-increment: stage;
}

.funnel .stage .n::after {
	content: counter(stage, decimal-leading-zero);
}

.funnel .stage h3 {
	font-family: var(--sans);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--on-surface);
	margin: 0 0 0.4rem;
}

.funnel .stage p {
	margin: 0;
	font-size: var(--t-small);
	line-height: 1.5;
	color: var(--on-surface-soft);
	max-width: 58ch;
}

/* The last stage is the one the funder buys, so it is the one that is filled
   rather than washed. */
.funnel .stage.terminal {
	background: var(--card);
	border-color: var(--rule-strong);
}

.funnel .stage.terminal h3 {
	color: var(--accent);
}

@media (max-width: 700px) {
	/* Below this the narrowing costs more in line length than it buys in
	   legibility, so every stage goes full width and the numbers carry the
	   sequence on their own. */
	.funnel .stage {
		width: 100% !important;
	}
}

/* -------------------------------------------------------------- timeline -- */

/* §10.2. Proportional spacing is the whole design point: three years of
   piloting occupy three times the width of each scale step, so the shape of
   the row says "deliberate" before anyone reads a word of it. */

.timeline {
	margin-top: clamp(2.5rem, 5vh, 3.5rem);
	display: grid;
	grid-template-columns: 3fr 1fr 1fr;
	gap: 1px;
	background: var(--rule);
	border-top: 2px solid var(--rule-strong);
}

.timeline .seg {
	background: var(--surface);
	padding: clamp(1.25rem, 2.6vw, 2rem) clamp(1rem, 2vw, 1.5rem);
	position: relative;
}

.timeline .seg::before {
	content: '';
	position: absolute;
	top: -2px;
	left: 0;
	width: clamp(2rem, 25%, 5rem);
	height: 2px;
	background: var(--accent);
}

.timeline .seg .when {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 0.75rem;
}

.timeline .seg .n {
	display: block;
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.5rem, 3.2vw, 2.4rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--on-surface);
	margin-bottom: 0.55rem;
}

.timeline .seg p {
	margin: 0;
	font-size: var(--t-small);
	line-height: 1.5;
	color: var(--on-surface-soft);
	max-width: 34ch;
}

@media (max-width: 760px) {
	.timeline {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------- day rotation -- */

/* §10.4. Two cohorts on inverse half-days. Small and factual on purpose: its
   job is to demonstrate that somebody has actually run this, not to persuade. */

.rota {
	margin-top: 2.5rem;
	border: 1px solid var(--rule);
	overflow-x: auto;
}

.rota table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: var(--t-small);
}

.rota th,
.rota td {
	padding: 1rem clamp(0.75rem, 1.6vw, 1.25rem);
	text-align: left;
	border-bottom: 1px solid var(--rule);
	vertical-align: top;
}

.rota tbody tr:last-child th,
.rota tbody tr:last-child td {
	border-bottom: 0;
}

.rota thead th {
	font-family: var(--sans);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--on-surface-faint);
	border-bottom-color: var(--rule-strong);
}

.rota tbody th {
	font-weight: 650;
	color: var(--on-surface);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.rota td {
	color: var(--on-surface-soft);
}

.rota .floor {
	background: var(--card);
	color: var(--on-surface);
	font-weight: 650;
}

/* ------------------------------------------------------------- data table -- */

/* The results page. Every rate on this site shows its denominator (brief §1),
   which is a formatting requirement as much as an editorial one: the count sits
   under the percentage in the same cell so the two cannot be separated by a
   screenshot. */

.datatable {
	margin-top: 2.5rem;
	border: 1px solid var(--rule);
	overflow-x: auto;
}

.datatable table {
	width: 100%;
	min-width: 32rem;
	border-collapse: collapse;
}

.datatable th,
.datatable td {
	padding: clamp(0.9rem, 2vw, 1.35rem) clamp(0.75rem, 1.6vw, 1.35rem);
	text-align: left;
	border-bottom: 1px solid var(--rule);
	vertical-align: baseline;
}

.datatable thead th {
	font-family: var(--sans);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--on-surface-faint);
	border-bottom-color: var(--rule-strong);
}

.datatable tbody th {
	font-weight: 650;
	color: var(--on-surface);
	white-space: nowrap;
}

.datatable .rate {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--accent);
	display: block;
	margin-bottom: 0.35rem;
}

.datatable .of {
	display: block;
	font-size: 0.82rem;
	color: var(--on-surface-faint);
	font-variant-numeric: tabular-nums;
}

.datatable tbody tr:last-child th,
.datatable tbody tr:last-child td {
	border-bottom: 0;
}

/* A cohort that has not been placed long enough to say anything yet reads as
   thin rather than as a gap — the honesty is the point. */
.datatable tr.thin td,
.datatable tr.thin th {
	background: rgba(163, 74, 35, 0.07);
}

/* ------------------------------------------------------------ seat panel -- */

.seats {
	margin-top: clamp(2.5rem, 5vh, 3.5rem);
	border: 1px solid var(--rule-strong);
	background: var(--card);
	padding: clamp(1.75rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

.seats .figure .n {
	display: block;
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(3.5rem, 9vw, 6.5rem);
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: var(--accent);
}

.seats .figure .l {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--on-surface-faint);
}

.seats p:last-of-type {
	margin-bottom: 0;
}

@media (max-width: 760px) {
	.seats {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------- partners -- */

/* Two named partners, each with its own credentials and its own outbound link.
   These are separate organisations with their own reputations, so the card
   carries the partner's own facts and states what it does in this programme —
   rather than absorbing both into a logo strip that claims nothing and could
   mean anything. */

.partners {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: 1px;
	margin-top: clamp(2.5rem, 5vh, 3.5rem);
	background: var(--rule);
	border: 1px solid var(--rule);
}

.partner {
	background: var(--surface);
	padding: clamp(1.75rem, 3.4vw, 2.5rem);
	display: flex;
	flex-direction: column;
}

.partner .role {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 1.1rem;
}

.partner h3 {
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	margin-bottom: 0.75rem;
}

.partner .what {
	font-size: var(--t-small);
	color: var(--on-surface-soft);
}

.partner .creds {
	list-style: none;
	margin: 1.5rem 0 1.75rem;
	padding: 0;
	border-top: 1px solid var(--rule);
}

.partner .creds li {
	margin: 0;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--rule);
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--on-surface-soft);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.9rem;
	align-items: baseline;
}

.partner .creds .k {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--on-surface);
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.partner .foot {
	margin-top: auto;
}

/* ------------------------------------------------------------- returns -- */

.returns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 1px;
	margin-top: clamp(2.5rem, 5vh, 3.5rem);
	background: var(--rule);
	border-block: 1px solid var(--rule);
}

.return {
	background: var(--surface);
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.4vw, 1.9rem);
}

.return .k {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 1rem;
}

.return h3 {
	margin-bottom: 0.5rem;
}

.return p {
	margin: 0;
	font-size: var(--t-small);
	color: var(--on-surface-soft);
}

/* ------------------------------------------------------------ qualifiers -- */

/* Tax, B-BBEE and accreditation statements each carry a qualifier the brief
   requires (§1). It is set as a bordered aside rather than as fine print,
   because burying it would be the thing that makes it a liability. */

.qualifier {
	margin: 1.75rem 0 0;
	padding: 0.9rem 0 0.9rem 1.1rem;
	border-left: 2px solid var(--rule-strong);
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--on-surface-faint);
	max-width: 62ch;
}

/* A value the client still has to supply. Styled to be unmissable in review —
   the brief is explicit that these must not be invented, estimated or rounded,
   so they have to survive as visible holes until they are filled. */
.client-slot {
	color: var(--rust);
	background: rgba(163, 74, 35, 0.1);
	border-bottom: 1px dashed currentColor;
	padding: 0.05em 0.3em;
	font-style: normal;
	font-size: 0.94em;
	/* These wrap. A nowrap slot puts a phone into horizontal scroll, which is
	   exactly the review these markers exist for; box-decoration-break keeps the
	   tint and the dashed rule continuous across the break so a wrapped slot
	   still reads as one marker rather than two. */
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.surface-dark .client-slot,
.surface-forest .client-slot,
.hero .client-slot {
	color: #e59a6e;
	background: rgba(229, 154, 110, 0.14);
}

/* ------------------------------------------------------------ page head -- */

/* Interior pages have no hero photograph to sit under, so they open on a
   masthead-clearing band instead. The masthead is transparent until scroll and
   only goes solid past 8px on a page with no .hero, so the extra top padding
   here is what keeps the h1 out from under it on first paint. */

.page-head {
	padding-top: calc(var(--nav-h) + clamp(3rem, 8vh, 5.5rem));
}

.page-head .lede {
	max-width: 58ch;
}

/* Breadcrumb-ish label above the page title, sharing the eyebrow's rhythm. */
.page-head h1 {
	max-width: 20ch;
}

/* ------------------------------------------------------------------ print -- */

@media print {
	.masthead,
	.hero-scroll,
	.btn,
	.faq-controls,
	.calc-controls {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.qa .answer {
		display: block !important;
	}
}