/* ===========================================================================
   Ubuntu Leadership Development — 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;
	text-decoration: none;
	flex: none;
}

.brand img {
	height: 52px;
	width: auto;
	/* The wordmark is dark rust on transparent; over dark surfaces it needs
	   lifting to the paper tone rather than being swapped for a second file. */
	filter: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(420%)
		hue-rotate(347deg) brightness(103%) contrast(94%);
}

.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;
	}

	.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 -- */

.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;
	z-index: 0;
}

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

/* Two stacked gradients rather than one: a broad bottom-up wash to seat the
   headline, plus 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 top,
			rgba(12, 9, 7, 0.94) 0%,
			rgba(12, 9, 7, 0.72) 28%,
			rgba(12, 9, 7, 0.28) 58%,
			rgba(12, 9, 7, 0.1) 100%
		),
		linear-gradient(to bottom, rgba(12, 9, 7, 0.55) 0%, rgba(12, 9, 7, 0) 22%);
}

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

.hero-title {
	font-size: var(--t-display);
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: -0.028em;
	color: #fff;
	margin: 0 0 1.5rem;
	max-width: 17ch;
	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);
	max-width: 44ch;
	font-size: clamp(1.15rem, 1.9vw, 1.6rem);
}

.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);
}

@media (max-width: 720px) {
	.hero-scroll {
		display: none;
	}

	/* On a phone the headline occupies most of the frame and sits directly over
	   the subject's face rather than the darker background behind her, so the
	   wash has to carry further up and hold more density to keep contrast. */
	.hero-media::after {
		background: linear-gradient(
				to top,
				rgba(12, 9, 7, 0.95) 0%,
				rgba(12, 9, 7, 0.86) 45%,
				rgba(12, 9, 7, 0.6) 78%,
				rgba(12, 9, 7, 0.35) 100%
			),
			linear-gradient(to bottom, rgba(12, 9, 7, 0.6) 0%, rgba(12, 9, 7, 0) 20%);
	}
}

/* ------------------------------------------------------------- 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 -- */

.bigstat {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	margin: 2rem 0;
	flex-wrap: wrap;
}

.bigstat .n {
	font-family: var(--serif);
	font-weight: 600;
	font-size: var(--t-stat);
	line-height: 0.9;
	letter-spacing: -0.035em;
	color: var(--accent);
}

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

.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);
}

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

@media (max-width: 780px) {
	.mosaic {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: clamp(130px, 32vw, 200px);
	}

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

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

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

.footer-top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(244, 236, 220, 0.14);
}

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

.site-footer .brand img {
	height: 64px;
	margin-bottom: 1.25rem;
}

.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;
	}
}