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

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

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

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

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