/* ==========================================================================
   CRCS Legal — homepage
   Built from Figma "CRCS Legal V1 - Nimat", page Hi-Fidelity, frame
   Homepage (node 184:1089), a 1920 x 8830 desktop artboard.

   The artboard is desktop-only, so every size below is expressed fluidly:
   the vw term in each clamp() resolves to the measured artboard value at
   exactly 1920px wide, then scales down. Tablet and mobile behaviour is
   designed here, not in the Figma file — see README.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/poppins-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/poppins-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Questrial';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/questrial-400.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Ink */
	--ink: #14161b;
	--body: #4b515a;
	--muted: #6b7280;              /* 4.8:1 on white; #868c96 from the artboard fails AA */
	--white: #fff;

	/* Brand — sampled against the artboard with an on-canvas swatch overlay */
	--green: #66ce4b;
	--green-dark: #52ba38;          /* surfaces and borders only */
	--green-text: #2c6f22;          /* 4.5:1+ on --green-tint and the card tints */
	--green-tint: #eef9ea;
	--blue: #1e9af8;
	--blue-deep: #0f87f5;          /* 3.62:1 on white — large text only */
	--blue-text: #0a6fd0;          /* 4.99:1 on white — anything under 24px */

	/* Logo palette (style-guide page) */
	--logo-sky: #4fc3f7;
	--logo-blue: #0f87f5;
	--logo-red: #f52a1d;
	--logo-yellow: #fbd44f;
	--logo-green: #6acf4c;
	--logo-navy: #0c3e9e;

	/* Surfaces */
	--band-blue: #eaf1fe;
	--band-blue-soft: #eff4fe;
	--surface: #fafaf8;
	--form: #f7f6f4;
	--card-cream: #fefbec;
	--card-pink: #fdf1f1;
	--card-blue: #f4f6fd;
	--card-green: #f1f9ed;
	--card-blush: #fbf9f6;

	/* Lines */
	--line: #e6e8ec;
	--line-soft: #eceef1;
	--border-blue: #b9d5f6;
	--field-line: #e3e1dd;

	/* Type */
	--font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body: 'Questrial', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--h1: clamp(2.125rem, 3.125vw, 3.75rem);      /* 60px @1920 */
	--h2: clamp(1.625rem, 2.5vw, 3rem);           /* 48px @1920 */
	--h2-sm: clamp(1.5rem, 2.083vw, 2.5rem);      /* 40px @1920 */
	--h3: clamp(1.25rem, 1.667vw, 2rem);          /* 32px @1920 */
	--h4: clamp(1.125rem, 1.354vw, 1.625rem);     /* 26px @1920 */
	--h5: clamp(1.0625rem, 1.25vw, 1.5rem);       /* 24px @1920 */
	--lead: clamp(1rem, 1.146vw, 1.375rem);       /* 22px @1920 */
	--base: clamp(0.9375rem, 1.042vw, 1.25rem);   /* 20px @1920 */
	--small: clamp(0.875rem, 0.938vw, 1.125rem);  /* 18px @1920 */
	--tiny: clamp(0.8125rem, 0.833vw, 1rem);      /* 16px @1920 */

	/* Layout */
	--container: 1720px;
	--gutter: clamp(1.25rem, 5.2vw, 6.25rem);     /* 100px @1920 */
	--section-y: clamp(3.5rem, 6.25vw, 7.5rem);   /* 120px @1920 */
	--card-gap: clamp(1rem, 1.25vw, 1.5rem);      /* 24px @1920 */
	--card-pad: clamp(1.5rem, 2.08vw, 2.5rem);    /* 40px @1920 */

	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 24px;
	--r-xl: 32px;

	--scrim: #24303f;               /* behind hero and banner photographs */
	--header-h: clamp(64px, 6.04vw, 116px);
	--shadow-card: 0 1px 2px rgba(20, 22, 27, 0.04), 0 8px 24px rgba(20, 22, 27, 0.04);
	--focus: 3px solid var(--blue-deep);
}

/* --------------------------------------------------------------------------
   3. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* The hero petals and the about shapes deliberately bleed past the page
	   edge. Clip on the root as well as the body so no browser reports the
	   bleed as scrollable width. `clip` (not `hidden`) keeps position:sticky
	   usable for anything added later. */
	overflow-x: clip;
}

/* in-page anchors must clear the pinned header */
:target,
section[id],
main[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--base);
	line-height: 1.55;
	color: var(--body);
	background: var(--white);
	overflow-x: hidden;
	overflow-x: clip;                /* progressive: browsers without clip keep hidden */
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; border: 0; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--ink);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

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

button { font: inherit; color: inherit; }

:focus-visible {
	outline: var(--focus);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -120%);
	z-index: 200;
	padding: 0.75rem 1.25rem;
	background: var(--ink);
	color: var(--white);
	border-radius: 0 0 var(--r-sm) var(--r-sm);
	font-family: var(--font-head);
	transition: transform 0.18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   4. Layout helpers
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Every section is its own layer, in document order. That lets the Why band's
   watermark spill out of the band without landing on top of the section below
   it — the layer beneath simply paints first. */
.section { position: relative; z-index: 1; padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 4.5vw, 5.5rem); }

/* Heading row: title + lead on the left, controls on the right */
.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(1.5rem, 3vw, 3rem);
	margin-bottom: clamp(2rem, 3.3vw, 4rem);
}
.section-head__text { max-width: 35em; }        /* 700px @1920 */
.section-head h2 { font-size: var(--h2); }
.section-head .lead {
	margin-top: 0.9rem;
	font-size: var(--lead);
	color: var(--body);
	max-width: 31em;              /* 682px @1920 */
}
.section-head__controls {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1.2vw, 1.5rem);
}

/* --------------------------------------------------------------------------
   5. Brand marks
   -------------------------------------------------------------------------- */
.logo {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(1.25rem, 1.5vw, 1.8125rem);
	color: var(--ink);
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.logo__mark {
	width: clamp(28px, 1.98vw, 38px);
	height: auto;
	flex: none;
}

/* The four-diamond glyph used inside buttons and on service cards */
.diamonds {
	width: 1em;
	height: 1em;
	flex: none;
}

/* Two glyphs stacked: flat ink by default, the full logo palette on hover or
   focus. The parent sets `--swap: 1` to cross-fade them. */
.swap-icon {
	position: relative;
	display: inline-block;
	width: 1em;
	aspect-ratio: 1;
	flex: none;
	vertical-align: middle;
}
.swap-icon .diamonds {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: opacity 0.22s ease;
}
.swap-icon .diamonds--ink { color: var(--ink); opacity: calc(1 - var(--swap, 0)); }
.swap-icon .diamonds--brand { opacity: var(--swap, 0); }

/* --------------------------------------------------------------------------
   The petal glyph — four real petals, so each service card can animate them
   Geometry is the #i-diamonds symbol's exactly (6.8/24 squares centred at
   20% / 50% / 80%, 28% corner radius), so at rest it is indistinguishable
   from the glyph everywhere else. Petal order in the markup: top, right,
   bottom, left; --g1..--g4 are their hover colours.
   -------------------------------------------------------------------------- */
.pglyph {
	position: relative;
	display: block;
	aspect-ratio: 1;
	rotate: 0deg;
	/* Timed off the recording: 45deg is already reached one frame (40ms)
	   in, the half-turn is complete at ~320ms, so a hard ease-out */
	transition: rotate 0.34s cubic-bezier(0.2, 0.75, 0.3, 1);
}
.pglyph > i {
	position: absolute;
	width: 28.34%;
	aspect-ratio: 1;
	border-radius: 28%;
	rotate: 45deg;
	background: var(--ink);
	/* the colour comes up out of the ink as it turns: still dark at the first
	   grid, full strength by the second. Leaving reverses all of it. */
	transition:
		background-color 0.26s ease 0.04s,
		translate 0.34s cubic-bezier(0.2, 0.75, 0.3, 1),
		scale 0.34s cubic-bezier(0.2, 0.75, 0.3, 1);
}
/* --gc is each petal's own hover colour; --tx/--ty its outward direction
   (only the burst uses them). Translate is applied before the glyph's own
   rotation, so "outward" stays outward whichever way it has turned. */
.pglyph > i:nth-child(1) { left: 35.83%; top: 5.83%;  --gc: var(--g1); --tx: 0;    --ty: -36%; }
.pglyph > i:nth-child(2) { left: 65.83%; top: 35.83%; --gc: var(--g2); --tx: 36%;  --ty: 0; }
.pglyph > i:nth-child(3) { left: 35.83%; top: 65.83%; --gc: var(--g3); --tx: 0;    --ty: 36%; }
.pglyph > i:nth-child(4) { left: 5.83%;  top: 35.83%; --gc: var(--g4); --tx: -36%; --ty: 0; }

/* Complaints, Compliance, Training, Barristers: a half-turn anticlockwise,
   filling one, two, three, then all four petals */
:is(.service-card:hover, .service-card:focus-visible) :is(.pglyph--turn, .pglyph--burst) { rotate: -180deg; }
:is(.service-card:hover, .service-card:focus-visible) .pglyph > i { background: var(--gc); }

/* ISO Support: the odd one out, as in the prototype. It makes the same turn
   but blanches almost to nothing on the way round, then blooms back in full
   colour with the petals smaller and pushed apart. Two stages means a
   keyframe on the way in; the way out is the ordinary transition above. */
:is(.service-card:hover, .service-card:focus-visible) .pglyph--burst > i {
	translate: var(--tx) var(--ty);
	scale: 0.8;
	animation: pglyph-bloom 0.52s ease both;
}
@keyframes pglyph-bloom {
	0%   { background-color: var(--ink); translate: 0 0; scale: 1; }
	50%  { background-color: #e9ebe7;    translate: 0 0; scale: 1; }
	100% { background-color: var(--gc);  translate: var(--tx) var(--ty); scale: 0.8; }
}

/* --------------------------------------------------------------------------
   Brand plates — what stands in for photography
   A tinted ground carrying a composition of petals. plate.py writes the
   per-petal custom properties; everything else is here.
   -------------------------------------------------------------------------- */
.plate {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(140deg, var(--plate-a) 0%, var(--plate-b) 100%);
}
.plate > span {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--s);
	aspect-ratio: 1;
	background: var(--c);
	border-radius: 30%;
	rotate: var(--r);
	opacity: var(--o);
}
/* A soft wash across the composition keeps the flat colour from reading as a
   block of paint and gives the plate a light source. */
.plate::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 18% 8%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 62%),
		linear-gradient(200deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 100%);
	pointer-events: none;
}
/* the plate's own aspect only applies where nothing else sets one.
   Petal sizes are a share of the plate's *width*, so tall and very wide
   plates need the scale nudged to keep the composition looking the same. */
.plate--card { aspect-ratio: 3 / 2; }
.plate--thumb { aspect-ratio: 1; }
.plate--thumb > span { width: calc(var(--s) * 1.2); }
.plate--tall { aspect-ratio: 3 / 4; }
.plate--tall > span { width: calc(var(--s) * 1.35); }
.plate--banner { aspect-ratio: auto; }
.plate--banner > span { width: calc(var(--s) * 0.44); }

.plate--cream    { --plate-a: #fefaec; --plate-b: #fdf4d8; }
.plate--pink     { --plate-a: #fdf1f1; --plate-b: #fbe4e6; }
.plate--lavender { --plate-a: #f2f5fd; --plate-b: #e6ecfb; }
.plate--mint     { --plate-a: #f1f9ed; --plate-b: #e4f4dd; }
.plate--ivory    { --plate-a: #fcfaf6; --plate-b: #f4f2ec; }
.plate--sky      { --plate-a: #eef6fe; --plate-b: #ddedfd; }

/* --------------------------------------------------------------------------
   Scroll reveal
   Sections and cards rise into place the first time they are seen. The class
   is added by JavaScript once IntersectionObserver reports the element, so
   with scripting off everything is simply visible.
   -------------------------------------------------------------------------- */
.js-reveal [data-reveal] {
	opacity: 0;
	/* `translate`, not `transform`: a card that also lifts on hover uses
	   transform, and .is-revealed's `transform: none` would otherwise outrank
	   and cancel that lift for the rest of the page's life. */
	translate: 0 22px;
	transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-reveal [data-reveal].is-revealed { opacity: 1; translate: none; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.85em 1.6em;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--small);
	line-height: 1.2;
	color: var(--ink);
	cursor: pointer;
	position: relative;            /* contains .visually-hidden inside the button */
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
/* Size only. Colour lives in the --primary/--outline/--chip modifiers, so this
   can be combined with any of them without repainting it. */
.btn--sm { padding: 0.45em 0.95em; font-size: var(--tiny); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
	background: var(--green);
	border-color: var(--green);
}
.btn--primary:hover { background: var(--green-dark); border-color: var(--green-dark); }

.btn--outline {
	background: transparent;
	border-color: var(--line);
	color: var(--ink);
}
.btn--outline:hover { border-color: var(--green); background: var(--green-tint); }

.btn--ghost-light {
	background: rgba(255, 255, 255, 0.82);
	border-color: var(--green);
	color: var(--ink);
}
.btn--ghost-light:hover { background: var(--white); }

/* The small white pill with a green edge — the team card's "Bio" control */
.btn--chip {
	border-color: var(--green);
	background: var(--white);
}
.btn--chip:hover { background: var(--green-tint); }

/* Circular carousel arrows */
.carousel-btn {
	width: clamp(40px, 2.9vw, 56px);
	height: clamp(40px, 2.9vw, 56px);
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--green);
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.carousel-btn svg { width: 42%; height: auto; }
.carousel-btn--next { background: var(--green); border-color: var(--green); }
.carousel-btn:hover:not(:disabled) { transform: translateY(-1px); }
.carousel-btn--prev:hover:not(:disabled) { background: var(--green-tint); }
.carousel-btn--next:hover:not(:disabled) { background: var(--green-dark); border-color: var(--green-dark); }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }

.carousel-controls {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.carousel-controls + .btn { position: relative; }
.carousel-controls--divider::after {
	content: '';
	width: 1px;
	align-self: stretch;
	background: var(--line);
	margin-inline: clamp(0.5rem, 0.8vw, 1rem);
}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-header {
	position: absolute;
	inset: 0 0 auto;
	z-index: 100;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.site-header.is-stuck {
	position: fixed;
	background: rgba(255, 255, 255, 0.94);
	border-bottom-color: var(--line);
	box-shadow: 0 4px 20px rgba(20, 22, 27, 0.06);
	animation: header-drop 0.28s ease;
}
@keyframes header-drop {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

/* Three tracks with equal 1fr flanks centre the nav on the header itself, which
   is where the artboard puts it (list spans x723-1177 of 1920, centre 950).
   The CTA is lifted out of the flow so it can sit on the container's right edge
   without pulling the nav off centre. */
.site-header__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--header-h);
}
.site-header__inner > .logo { grid-column: 1; justify-self: start; }
.site-header__inner > .nav-toggle { grid-column: 3; justify-self: end; }
.site-header__inner > .nav { grid-column: 2; justify-self: center; }

.nav__cta {
	position: absolute;
	right: var(--gutter);
	top: 50%;
	transform: translateY(-50%);
}

.nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 1.9vw, 2.25rem);
}
/* The list stays a real <ul> — `display: contents` would drop it out of the
   accessibility tree in several browsers along with its item count. */
.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 1.9vw, 2.25rem);
}
.nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--font-body);
	font-size: var(--base);
	color: var(--ink);
	padding: 0.4em 0;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color 0.18s ease;
}
.nav__link:hover { color: var(--blue-deep); }
.nav__link[aria-current="page"] { color: var(--green-text); font-weight: 500; }
.nav__caret { width: 0.7em; height: 0.7em; transition: transform 0.2s ease; }

.nav__item--has-menu > .nav__link[aria-expanded='true'] .nav__caret { transform: rotate(180deg); }

/* The nav items fill the header's full height. Without this the "Services"
   item was only as tall as its label, sitting in the middle of a 116px bar,
   so the pointer left it — and closed the panel — crossing the empty lower
   half of the header on its way down to the menu. Stretched, the item runs
   unbroken from the word to the panel, which is its own descendant. */
@media (min-width: 861px) {
	.site-header__inner > .nav { align-self: stretch; }
	.nav, .nav__list { align-items: stretch; }
	.nav__item { display: flex; align-items: center; }
}

/* --- Services mega menu ----------------------------------------------------
   A panel the width of the container rather than a dropdown under the word:
   the five services, each with the one-line description from the prototype.
   `hidden` keeps it out of the accessibility tree and the tab order when
   closed; the fade is on a wrapper that is only un-hidden while open. */
.megamenu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding-top: 0.5rem;
	z-index: 20;
	display: none;
}
/* With scripting on, the button's aria-expanded is the only thing that opens
   the panel, so what a screen reader is told and what is drawn cannot diverge.
   Without scripting there is no state to read, so hover and focus open it —
   focus on the button itself satisfies :focus-within, which is what makes the
   menu usable from the keyboard with JavaScript off. */
.nav__item--has-menu > .nav__link[aria-expanded='true'] + .megamenu { display: block; }
html:not(.js) .nav__item--has-menu:hover > .megamenu,
html:not(.js) .nav__item--has-menu:focus-within > .megamenu { display: block; }
.megamenu__panel {
	padding: clamp(1.5rem, 3.1vw, 3.75rem) clamp(1.5rem, 3.1vw, 3.75rem) clamp(1.75rem, 3.3vw, 4rem);
	background: var(--white);
	border-radius: var(--r-lg);
	box-shadow: 0 1px 2px rgba(20, 22, 27, 0.05), 0 24px 60px rgba(20, 22, 27, 0.14);
	transform-origin: top center;
	animation: megamenu-in 0.24s ease both;
}
/* Transform only. Fading the panel in would leave the hero showing through it
   on any frame the animation is paused on. */
@keyframes megamenu-in {
	from { transform: translateY(-10px); }
	to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.megamenu__panel { animation: none; }
}
.megamenu__label {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--h5);
	color: var(--ink);
	margin-bottom: clamp(1.25rem, 2.4vw, 2.9rem);
}
/* Two rows, filled down each column — the reading order the prototype uses */
.megamenu__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: column;
	gap: clamp(1rem, 1.9vw, 2.25rem) clamp(1rem, 2vw, 2.5rem);
}
.megamenu__item {
	display: block;
	padding: clamp(0.75rem, 1.1vw, 1.25rem);
	margin: calc(clamp(0.75rem, 1.1vw, 1.25rem) * -1);
	border-radius: var(--r-md);
	color: var(--body);
	transition: background-color 0.2s ease;
}
.megamenu__item:hover,
.megamenu__item:focus-visible { background: var(--surface); }
.megamenu__item:hover .swap-icon,
.megamenu__item:focus-visible .swap-icon { --swap: 1; }
.megamenu__head {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--h5);
	color: var(--ink);
}
.megamenu__head .swap-icon { width: 0.78em; }
.megamenu__blurb {
	display: block;
	margin-top: 0.6em;
	max-width: 20em;
	font-size: var(--small);
	line-height: 1.55;
	color: var(--muted);
}
.megamenu__item[aria-current='page'] .megamenu__head { color: var(--green-text); }

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
	display: block;
	width: 20px;
	height: 2px;
	margin-inline: auto;
	background: var(--ink);
	border-radius: 2px;
	transition: transform 0.22s ease, opacity 0.22s ease;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before,
.nav-toggle span::after { content: ''; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
	position: relative;
	isolation: isolate;
	min-height: clamp(560px, 65.1vw, 1250px);
	display: flex;
	align-items: stretch;
	padding-top: var(--header-h);
	overflow: hidden;
	background: var(--scrim);
}
.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hero__media img,
.hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	display: block;
}
/* The scrim sits above the petals, not below them, so the petals are muted by
   the same wash as the footage — which is how the prototype reads. */
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(16, 24, 36, 0.42) 0%, rgba(16, 24, 36, 0.16) 38%, rgba(16, 24, 36, 0.55) 100%),
		linear-gradient(90deg, rgba(16, 24, 36, 0.5) 0%, rgba(16, 24, 36, 0.05) 60%);
}

/* Decorative brand petals over the footage, right side */
.hero__petals {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   The petal — the site's one decorative form
   A rounded square turned 45°, exactly as the logo mark builds it. Everything
   ornamental on the site is this shape at some size, colour and drift.
   `rotate`/`translate` are used as their own properties so the slow drift can
   animate without fighting the tilt.
   -------------------------------------------------------------------------- */
.petal {
	position: absolute;
	display: block;
	border-radius: 30%;
	rotate: var(--tilt, 0deg);
	opacity: 0.85;
	animation: petal-drift var(--dur, 19s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes petal-drift {
	from { translate: 0 0; }
	to   { translate: var(--dx, 20px) var(--dy, -26px); }
}

.petal--red {
	background: var(--logo-red);
	width: min(13.5vw, 260px); aspect-ratio: 1.08;
	top: 6%; right: -3%;
	--tilt: -12deg; --dx: -22px; --dy: 26px; --dur: 21s;
}
.petal--blue {
	background: var(--logo-navy);
	width: min(10vw, 192px); aspect-ratio: 1;
	top: 34%; right: 13%;
	--tilt: 16deg; --dx: 26px; --dy: -18px; --dur: 17s; --delay: -4s;
	opacity: 0.8;
}
.petal--green {
	background: var(--logo-green);
	width: min(12.5vw, 240px); aspect-ratio: 1.06;
	top: 50%; right: -2%;
	--tilt: 8deg; --dx: -18px; --dy: -24px; --dur: 24s; --delay: -9s;
}
.petal--yellow {
	background: var(--logo-yellow);
	width: min(10.5vw, 200px); aspect-ratio: 1;
	top: 78%; right: -5%;
	--tilt: -20deg; --dx: 14px; --dy: 20px; --dur: 20s; --delay: -6s;
	opacity: 0.8;
}

/* Pause control for the header video — small, in the hero's bottom-right,
   above the scrim. Hidden without JavaScript, where the video never starts. */
.hero__motion {
	position: absolute;
	right: var(--gutter);
	bottom: clamp(1.25rem, 2.4vw, 2.75rem);
	z-index: 4;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background: rgba(16, 24, 36, 0.5);
	color: var(--white);
	cursor: pointer;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.hero__motion:hover { background: rgba(16, 24, 36, 0.75); border-color: var(--white); }
.hero__motion svg { width: 15px; height: 15px; }
.hero__motion .hero__motion-play { display: none; }
.hero__motion[aria-pressed='true'] .hero__motion-pause { display: none; }
.hero__motion[aria-pressed='true'] .hero__motion-play { display: block; }
/* main.js sets `reveal-armed` as its first statement, so this is the only
   class that proves the control is actually wired up. Keyed on `js` it would
   still show — and do nothing — when the script 404s. */
html:not(.reveal-armed) .hero__motion { display: none; }

.hero__inner {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding-block: clamp(3rem, 6vw, 7rem);
}

.hero h1 {
	font-size: var(--h1);
	line-height: 1.06;
	color: var(--white);
	/* em, not ch or px, so the artboard's line lengths survive the fluid
	   type scale. The break after "Complaints," is explicit (.br-lg). */
	max-width: 17em;              /* 1020px @1920 — holds line 1 unbroken */
	letter-spacing: -0.02em;
}
.br-lg { display: block; }
.hero h1 .accent { color: var(--blue); }

.hero__aside {
	margin-top: clamp(2.5rem, 6vw, 7rem);
	margin-left: auto;
	/* the artboard insets this block from the container's right edge rather
	   than flushing it, so the text column lands at x1108-1669 of 1920 */
	margin-right: clamp(0rem, 7.1vw, 8.5rem);
	width: min(100%, 28em);       /* 560px @1920 — matches the artboard text column */
	color: rgba(255, 255, 255, 0.94);
}
.hero__aside p {
	font-size: var(--lead);
	line-height: 1.6;
	margin-bottom: clamp(1.25rem, 1.7vw, 2rem);
}

.hero__strap {
	position: absolute;
	left: 50%;
	bottom: clamp(2rem, 4.4vw, 5.25rem);
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1.6vw, 2rem);
	color: var(--white);
	white-space: nowrap;
}
.hero__strap b {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(1.25rem, 1.667vw, 2rem);
	letter-spacing: 0.06em;
}
.hero__strap span { font-size: var(--lead); }
.hero__rule {
	width: clamp(40px, 4.7vw, 90px);
	height: 1px;
	background: rgba(255, 255, 255, 0.85);
	flex: none;
}

/* --------------------------------------------------------------------------
   9. Carousels (scroll-snap rows)
   -------------------------------------------------------------------------- */
.rail {
	display: flex;
	gap: var(--card-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
	/* The rail bleeds to the viewport edge so the next card peeks out of the
	   gutter, as it does at the artboard edge. Card width is therefore derived
	   from the container width (rail width minus that bleed), not the rail. */
	margin-right: calc(var(--gutter) * -1);
	padding-right: var(--gutter);
}
.rail::-webkit-scrollbar { display: none; }
.rail > * {
	flex: 0 0 calc((100% - var(--card-gap) * 2) / 3);
	scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   10. Testimonials
   -------------------------------------------------------------------------- */
/* Plain until you point at it: the prototype's cards carry no chrome at rest,
   then fill with the brand blue gradient and a cluster of petals. Focus-within
   does the same, so the keyboard sees what the mouse sees. */
.quote-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--card-pad);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: transparent;
	transition: background-color 0.32s ease, box-shadow 0.32s ease;
}
.quote-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: linear-gradient(158deg, #018cfd 0%, #2598ee 46%, #4abafb 100%);
	opacity: 0;
	transition: opacity 0.32s ease;
}
.quote-card:hover,
.quote-card:focus-within { box-shadow: 0 18px 44px rgba(20, 22, 27, 0.12); }
.quote-card:hover::before,
.quote-card:focus-within::before { opacity: 1; }

/* Petal cluster, top right, revealed with the gradient */
.quote-card__petals {
	position: absolute;
	top: -9%;
	right: -12%;
	z-index: 1;
	width: 50%;
	aspect-ratio: 1;
	pointer-events: none;
	opacity: 0;
	transform: scale(0.86);
	transition: opacity 0.36s ease, transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.quote-card:hover .quote-card__petals,
.quote-card:focus-within .quote-card__petals { opacity: 1; transform: none; }
/* Tints of the brand petals, not the petals themselves. Multiplying the real
   colours over this gradient drove the ground under the copy to L≈0.05, which
   put --ink at 1.8:1; each of these is the brand colour lifted 40% toward
   white, which lands every overlap between 5.1:1 and 5.9:1. They also read
   closer to the prototype, where the cluster is pastel rather than muddy. */
.qp {
	position: absolute;
	width: 46%;
	aspect-ratio: 1;
	border-radius: 30%;
	rotate: 8deg;
	opacity: 0.55;
}
.qp--yellow { background: #fce084; left: 27%; top: -4%; }
.qp--red    { background: #f97f77; left: 2%;  top: 22%; rotate: -6deg; }
.qp--green  { background: #a1e28f; left: 52%; top: 20%; rotate: 14deg; }
.qp--navy   { background: #6d8bc5; left: 26%; top: 46%; }

.quote-card h3 {
	position: relative;
	z-index: 2;
	font-size: var(--h5);
	/* --h5 is 24px only at 1920; below ~1500px it drops under the 18.66px that
	   would let it use the large-text ratio, so it takes the darker blue. */
	color: var(--blue-text);
	margin-bottom: 0.9em;
	transition: color 0.32s ease;
}
.quote-card:hover h3,
.quote-card:focus-within h3 { color: var(--ink); }
.quote-card__summary {
	position: relative;
	z-index: 2;
	font-size: var(--base);
	color: var(--ink);
	line-height: 1.6;
}
.quote-card blockquote {
	position: relative;
	z-index: 2;
	margin: 1.4em 0 0;
	font-size: var(--small);
	line-height: 1.72;
	color: var(--muted);
	transition: color 0.32s ease;
}
.quote-card__cite {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding-top: clamp(1.5rem, 2.6vw, 3rem);
	font-style: normal;
}
.quote-card__cite b {
	display: block;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--base);
	color: var(--ink);
}
.quote-card__cite span {
	display: block;
	margin-top: 0.35em;
	font-size: var(--tiny);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	transition: color 0.32s ease;
}
/* --muted is 2.2:1 on the gradient. The prototype leaves the smaller type
   dimmed there; ink keeps the same hierarchy and clears AA (5.3:1 at the
   darkest end of the gradient, 8.3:1 at the lightest). */
.quote-card:hover blockquote,
.quote-card:focus-within blockquote,
.quote-card:hover .quote-card__cite span,
.quote-card:focus-within .quote-card__cite span { color: var(--ink); }

/* --------------------------------------------------------------------------
   11. Awards
   -------------------------------------------------------------------------- */
.awards {
	background: var(--band-blue);
	border-radius: var(--r-xl);
	padding: clamp(2rem, 4.2vw, 5rem);
}
.awards h2 { font-size: var(--h2-sm); margin-bottom: clamp(1.5rem, 2.6vw, 3rem); }

.awards__grid {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) 3fr;
	gap: clamp(1.5rem, 3vw, 3.5rem);
	align-items: start;
}

.awards__tabs {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.awards__tab {
	text-align: left;
	padding: 0.7em 1.1em;
	border: 0;
	border-radius: var(--r-sm);
	background: transparent;
	font-family: var(--font-body);
	font-size: var(--base);
	color: var(--ink);
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.awards__tab:hover { background: var(--white); box-shadow: inset 0 0 0 1px var(--green); }
/* Selection is not carried by the fill alone: at 1.76:1 against the band that
   is under the 3:1 a state indicator needs, so it also takes a border and weight. */
.awards__tab[aria-pressed='true'] {
	background: var(--green);
	box-shadow: inset 0 0 0 2px var(--green-text);
	font-weight: 600;
}

/* A sliding row rather than a static grid: picking a tab brings its card into
   view, exactly as the prototype's carousel does. All three stay in the
   document, so nothing depends on scripting. */
.awards__cards {
	display: flex;
	gap: var(--card-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.awards__cards::-webkit-scrollbar { display: none; }
.award-card {
	flex: 0 0 calc((100% - var(--card-gap)) / 2);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding: clamp(1.25rem, 2vw, 2rem);
	background: var(--surface);
	border: 2px solid transparent;
	border-radius: var(--r-md);
	text-align: center;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.award-card.is-active { border-color: var(--green); background: var(--white); }
.award-card img { width: clamp(120px, 10.7vw, 206px); height: auto; }
.award-card p {
	font-size: var(--base);
	line-height: 1.6;
	color: var(--body);
}

/* --------------------------------------------------------------------------
   12. About split ("Where Complaints Meet Clarity")
   -------------------------------------------------------------------------- */
.about-section {
	position: relative;
	overflow: hidden;             /* the petals bleed off the left edge */
}
.about {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 6rem);
	align-items: start;
}
.about h2 {
	font-size: var(--h2);
	max-width: 13em;              /* 624px @1920 */
	text-wrap: balance;
}
.about__prose { font-size: var(--base); line-height: 1.5; }
.about__prose p { margin-bottom: 1.5em; }

/* The prototype's big, saturated petals: they sit at full strength, run off
   the left edge of the viewport, and drift. Positions are viewport-relative
   so the composition holds its shape as the column widths change. */
.about__petals {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.about__petals span {
	position: absolute;
	display: block;
	border-radius: 30%;
	rotate: var(--tilt, 0deg);
	animation: petal-drift var(--dur, 22s) ease-in-out var(--delay, 0s) infinite alternate;
}
.about__petals .p-yellow {
	background: var(--logo-yellow);
	width: min(11vw, 210px); aspect-ratio: 1.02;
	left: -3.4vw; top: 28%;
	--tilt: -8deg; --dx: 16px; --dy: -20px; --dur: 23s;
}
.about__petals .p-red {
	background: var(--logo-red);
	width: min(5.6vw, 108px); aspect-ratio: 1;
	left: -3.8vw; top: 54%;
	--tilt: 14deg; --dx: -12px; --dy: 18px; --dur: 18s; --delay: -5s;
}
.about__petals .p-green {
	background: var(--logo-green);
	width: min(12.4vw, 238px); aspect-ratio: 1;
	left: 5.2vw; top: 44%;
	--tilt: 10deg; --dx: 18px; --dy: 22px; --dur: 26s; --delay: -11s;
}
.about__petals .p-blue {
	background: var(--logo-navy);
	width: min(10.5vw, 202px); aspect-ratio: 1.04;
	left: -3.2vw; top: 70%;
	--tilt: -6deg; --dx: -16px; --dy: -14px; --dur: 20s; --delay: -7s;
}

/* --------------------------------------------------------------------------
   13. Services ("What We Do")
   -------------------------------------------------------------------------- */
.services {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--card-gap);
}
.services__intro { padding-right: clamp(0rem, 2vw, 2.5rem); align-self: center; }
.services__intro h2 { font-size: var(--h2-sm); margin-bottom: 0.7em; }
.services__intro p {
	font-size: var(--base);
	margin-bottom: clamp(1.25rem, 2vw, 2rem);
	max-width: 18em;              /* 360px @1920 */
}

/* The card's own tint is `--tint`; hovering lifts it towards white, colours
   the glyph in and slides the "Learn more" pill up — all three are what the
   prototype does when the pointer lands on a card. */
.service-card {
	display: flex;
	flex-direction: column;
	padding: var(--card-pad);
	border-radius: var(--r-lg);
	background: var(--tint, var(--card-cream));
	transition: background-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}
.service-card__icon {
	width: clamp(22px, 1.5vw, 29px);
	/* the artboard leaves a deliberate 141px of air between the glyph and the
	   title, which is most of what gives these cards their calm */
	margin-bottom: clamp(2rem, 7.34vw, 8.8rem);
}
.service-card h3 { font-size: var(--h3); margin-bottom: 0.6em; }
.service-card p { font-size: var(--base); line-height: 1.55; }

/* Reserve the pill's height so revealing it cannot reflow the card. */
.service-card__more {
	align-self: flex-start;
	margin-top: clamp(1.25rem, 2vw, 2rem);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.24s ease, transform 0.24s ease;
}
.service-card:hover,
.service-card:focus-visible,
.service-card:focus-within { background: var(--tint-hover, #fbfbfb); }
.service-card:hover .service-card__more,
.service-card:focus-visible .service-card__more,
.service-card:focus-within .service-card__more { opacity: 1; transform: none; }
.service-card:hover .swap-icon,
.service-card:focus-visible .swap-icon,
.service-card:focus-within .swap-icon { --swap: 1; }

.service-card--complaints { --tint: var(--card-cream); --tint-hover: #fffdf5; }
.service-card--compliance { --tint: var(--card-pink);  --tint-hover: #fef8f8; }
.service-card--training   { --tint: var(--card-blue);  --tint-hover: #f8fafe; }
.service-card--barristers { --tint: var(--card-green); --tint-hover: #f8fcf6; }
.service-card--iso        { --tint: var(--card-blush); --tint-hover: #fdfaf9; }

/* --------------------------------------------------------------------------
   14. Team
   -------------------------------------------------------------------------- */
.team-card {
	display: flex;
	flex-direction: column;
	padding: clamp(1rem, 1.7vw, 2rem);
	background: var(--white);
	border: 1px solid var(--border-blue);
	border-radius: var(--r-lg);
	transition: background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
/* Pointing at a card floods it with the brand blue, as in the prototype. The
   type stays ink, which is 5.3:1 on --blue. */
.team-card:hover,
.team-card:focus-within {
	background: var(--blue);
	border-color: var(--blue);
	box-shadow: 0 16px 40px rgba(30, 154, 248, 0.22);
}
.team-card__face { position: relative; }
/* The portrait is masked to the artboard's organic shape: tight corners at the
   top, a wide sweeping curve along the bottom. */
.team-card__photo {
	position: relative;
	overflow: hidden;
	border-radius: 12% 12% 34% 28% / 8% 8% 24% 34%;
	aspect-ratio: 4 / 5;
	background: var(--band-blue-soft);
}
.team-card__photo img,
.team-card__photo .plate { width: 100%; height: 100%; object-fit: cover; }

/* The biography lives in the card. With scripting off it simply follows the
   portrait; with scripting on it wipes up over it. */
.team-card__bio {
	margin-top: 1rem;
	font-size: var(--small);
	line-height: 1.55;
}
/* Clip: the closed bio is parked one card-height below, and without this it
   adds its whole height to the carousel's scrollable area — a 357px vertical
   scroll trap inside a horizontal rail. */
.js .team-card__face { aspect-ratio: 4 / 5; overflow: hidden; }
/* An open card gets more room, so a long biography is not a postage stamp.
   The longest one still scrolls a little — hence the tabindex on the panel,
   so a keyboard can reach the overflow. */
.js .team-card.is-open .team-card__face { min-height: 32rem; }
.js .team-card__photo { position: absolute; inset: 0; }
.js .team-card__bio {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: clamp(0.9rem, 1.4vw, 1.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--band-blue);
	border-radius: 12% 12% 34% 28% / 8% 8% 24% 34%;
	color: var(--body);
	font-size: var(--tiny);
	line-height: 1.5;
	scrollbar-width: thin;
	translate: 0 101%;
	visibility: hidden;
	transition: translate 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.42s;
}
.js .team-card.is-open .team-card__bio { translate: 0 0; visibility: visible; }
.js .team-card.is-open .team-card__photo::after { display: none; }

.team-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(1rem, 1.6vw, 1.75rem);
}
.team-card__meta h3 { font-size: var(--h4); }
.team-card__meta p { font-size: var(--small); color: var(--muted); margin: 0.2em 0 0; }
.team-card:hover .team-card__meta p,
.team-card:focus-within .team-card__meta p { color: var(--ink); }
.team-card__toggle { flex: none; }
/* The card floods --blue on hover/focus, which all but erases a --blue-deep
   ring, so this control rings in ink instead. */
.team-card__toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.team-card:hover .team-card__toggle,
.team-card:focus-within .team-card__toggle { background: var(--green); border-color: var(--green); }
.team-card__toggle[aria-expanded='true'] .team-card__chev { rotate: 45deg; display: inline-block; }

/* --------------------------------------------------------------------------
   15. Why band
   -------------------------------------------------------------------------- */
/* The band does NOT clip: in the prototype the watermark runs out of the blue
   and into the white section beneath it. */
.why {
	position: relative;
	background: #f0f3fe;
}
.why__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 6rem);
	align-items: start;
}
.why h2 { font-size: var(--h2); margin-bottom: clamp(1.25rem, 2vw, 2rem); }
.why__prose { font-size: var(--base); line-height: 1.5; }
.why__prose p { margin-bottom: 1.5em; }
.why__decor {
	position: absolute;
	left: 50%;
	top: 26%;
	transform: translateX(-50%);
	width: clamp(220px, 25vw, 480px);
	height: auto;
	color: #e8edfd;
	pointer-events: none;
	z-index: 0;
}
/* the CTA band reuses .why but sits on white, so it keeps the mark inside */
.cta-band { overflow: hidden; }
.cta-band .why__decor { top: 50%; left: auto; right: -3%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   16. Insights
   -------------------------------------------------------------------------- */
.post-card { display: flex; flex-direction: column; }
.post-card > a { display: flex; flex-direction: column; height: 100%; }
.post-card__media {
	border-radius: var(--r-md);
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--surface);
}
.post-card__media .plate {
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.post-card:hover .post-card__media .plate { transform: scale(1.04); }

/* "Read article" appears under the headline on hover, as in the prototype */
.post-card__more {
	align-self: stretch;
	margin-top: clamp(0.9rem, 1.4vw, 1.4rem);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.24s ease, transform 0.24s ease;
}
.post-card:hover .post-card__more,
.post-card:focus-within .post-card__more { opacity: 1; transform: none; }
.post-card__date {
	display: flex;
	align-items: center;
	gap: 0.45em;
	margin-top: clamp(0.9rem, 1.4vw, 1.4rem);
	font-size: var(--tiny);
	color: var(--muted);
}
.post-card__date svg { width: 1.05em; height: 1.05em; flex: none; }
.post-card h3 {
	margin-top: 0.55em;
	font-size: var(--h3);
	line-height: 1.28;
	max-width: 17em;              /* 544px @1920 */
}
.post-card a:hover h3 { color: var(--blue-deep); }

/* --------------------------------------------------------------------------
   17. Contact
   -------------------------------------------------------------------------- */
.contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 5rem);
	align-items: start;
}
.contact h2 { font-size: var(--h2); margin-bottom: 0.7em; }
.contact__intro p { font-size: var(--base); max-width: 28em; }  /* 560px @1920 */

.form {
	padding: clamp(1.5rem, 2.9vw, 3.5rem);
	background: var(--form);
	border-radius: var(--r-lg);
}
.form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.25vw, 1.5rem);
}
.field { margin-bottom: clamp(0.9rem, 1.35vw, 1.6rem); }
.field label {
	display: block;
	margin-bottom: 0.5em;
	font-size: var(--base);
	color: var(--ink);
}
.field input,
.field textarea {
	width: 100%;
	padding: 0.9em 1em;
	font-family: var(--font-body);
	font-size: var(--base);
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--field-line);
	border-radius: var(--r-sm);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { min-height: clamp(120px, 9.4vw, 180px); resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible {
	outline: var(--focus);
	outline-offset: 2px;
	border-color: var(--blue-deep);
}
.field input:focus,
.field textarea:focus { border-color: var(--blue-deep); }
.form .btn { margin-top: 0.5rem; }

.form__status {
	margin-top: 1rem;
	font-size: var(--base);
	color: var(--ink);
}
.form__status:empty { margin-top: 0; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer {
	position: relative;
	overflow: hidden;
	padding-top: clamp(3rem, 6vw, 7rem);
}
.site-footer__decor {
	position: absolute;
	right: 2%;
	bottom: 6%;
	width: clamp(190px, 17vw, 330px);
	height: auto;
	color: #f1f1f1;
	pointer-events: none;
	z-index: 0;
}
.site-footer__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr 1.3fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	padding-bottom: clamp(2.5rem, 4.7vw, 5.5rem);
}
.site-footer h2 {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--tiny);
	margin-bottom: 1.4em;
}
.site-footer a { font-size: var(--small); color: var(--body); transition: color 0.18s ease; }
.site-footer a:hover { color: var(--ink); }
.site-footer li + li { margin-top: 0.85em; }
.site-footer address { font-style: normal; font-size: var(--small); line-height: 1.55; }

.socials { display: flex; gap: 0.6rem; margin-top: clamp(1.25rem, 2vw, 2rem); }
.socials a {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--band-blue-soft);
	color: var(--ink);
	transition: background-color 0.2s ease;
}
.socials a:nth-child(2) { background: var(--green-tint); }
.socials a:hover { background: var(--green); }
.socials svg { width: 18px; height: 18px; }

.footer-contact a {
	display: block;
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.01em;
	word-break: break-word;
}
.footer-contact .email { font-size: clamp(1.125rem, 1.146vw, 1.375rem); }
.footer-contact .phone { font-size: clamp(1.125rem, 1.146vw, 1.375rem); margin-top: 0.6em; }

.site-footer__bar {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 2.3vw, 2.75rem);
	padding-block: clamp(1.25rem, 2vw, 2rem);
	border-top: 1px solid var(--line-soft);
	font-size: var(--tiny);
	color: var(--muted);
}
.site-footer__bar a { font-size: inherit; color: var(--muted); }
.site-footer__bar a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   19. Inner pages
   The artboard only covers the homepage. Everything below extends its language
   — the same banner treatment, card radii, tints, pill buttons and diamond
   glyph — across the twenty pages the Figma file does not draw.
   -------------------------------------------------------------------------- */

/* Page banner. With the stock photography gone this is a brand plate: the
   page's own petal composition on its own tint, with the heading over it in
   ink rather than reversed out of a scrim. */
.banner {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: clamp(300px, 26vw, 500px);
	padding-top: var(--header-h);
	padding-bottom: clamp(1.75rem, 3.1vw, 3.75rem);
	overflow: hidden;
	background: var(--white);
}
.banner > .plate {
	position: absolute;
	inset: 0;
	z-index: 0;
}
/* Wash the plate back so the heading always has a quiet ground under it. */
.banner::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(96deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.86) 38%, rgba(255, 255, 255, 0.42) 72%, rgba(255, 255, 255, 0.24) 100%);
}
.banner__inner { position: relative; z-index: 2; width: 100%; }
.banner h1 {
	font-size: var(--h2);
	color: var(--ink);
	max-width: 18em;
	letter-spacing: -0.02em;
}
.banner__eyebrow {
	margin-bottom: 0.7em;
	font-size: var(--small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--green-text);
}
.banner__lead {
	margin-top: 0.8em;
	max-width: 34em;
	font-size: var(--lead);
	color: var(--body);
}
.banner--post h1 { max-width: 20em; }

.breadcrumb { margin-top: clamp(0.9rem, 1.4vw, 1.4rem); }
/* the base reset only clears markers on <ul>; this is an <ol> for order */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { font-size: var(--tiny); color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.6em; opacity: 0.55; }
.breadcrumb a { color: var(--body); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--ink); }

/* --- content --------------------------------------------------------------- */
.container--narrow { max-width: calc(42em + var(--gutter) * 2); }  /* ~840px measure @1920 */

.eyebrow {
	margin-bottom: 0.6em;
	font-size: var(--small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--green-text);
}

.section--band { background: var(--band-blue-soft); }

.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 6rem);
	align-items: center;
}
.split--flip .split__copy { order: 2; }
.split__copy h2 { font-size: var(--h2); margin-bottom: 0.7em; }

.imgpair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); align-items: start; }
.imgpair > div { border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.imgpair .plate { aspect-ratio: 3 / 4; }
.imgpair__a { margin-top: clamp(1rem, 3vw, 3rem); }
.imgpair > :only-child { grid-column: 1 / -1; margin-top: 0; }
.imgpair > :only-child .plate { aspect-ratio: 3 / 2; }

/* --- prose ----------------------------------------------------------------- */
.prose { font-size: var(--base); line-height: 1.6; color: var(--body); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 1.15em; }
.prose h2 { font-size: var(--h3); margin: 1.8em 0 0.6em; }
.prose h3 { font-size: var(--h4); margin: 1.6em 0 0.5em; }
.prose h4 { font-size: var(--h5); margin: 1.4em 0 0.5em; }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.6em; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.5em; }
.prose ul > li { list-style: none; position: relative; }
.prose ul > li::before {
	content: "";
	position: absolute;
	left: -1.25em;
	top: 0.62em;
	width: 0.42em;
	height: 0.42em;
	border-radius: 2px;
	background: var(--green);
	transform: rotate(45deg);
}
.prose a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--ink); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote {
	margin: 1.6em 0;
	padding: clamp(1.25rem, 2vw, 2rem);
	background: var(--surface);
	border-left: 3px solid var(--green);
	border-radius: 0 var(--r-md) var(--r-md) 0;
}
/* The client's own photographs are tall phone shots; cap them by height and
   centre them rather than letting one fill a screen and a half. */
.prose img {
	margin: 1.6em auto;
	border-radius: var(--r-md);
	width: auto;
	max-height: min(62vh, 620px);
}
.prose figure { margin: 1.6em 0; overflow-x: auto; }
.prose figcaption { margin-top: 0.6em; font-size: var(--tiny); color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: var(--small); }
.prose th, .prose td { padding: 0.7em 0.9em; border: 1px solid var(--line); text-align: left; }

/* --- service cards as links ------------------------------------------------ */
a.service-card { color: inherit; }
/* Service pages cross-link the other four, so this grid is 4-up, not 3-up */
.services--even { grid-template-columns: repeat(4, minmax(0, 1fr)); }
a.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
/* the title stays ink on hover — the pill is the affordance, as drawn */

/* --- listings -------------------------------------------------------------- */
.post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 2.5vw, 3rem) var(--card-gap);
}
.post-card__cat {
	margin-left: 0.4em;
	padding: 0.15em 0.7em;
	border-radius: 999px;
	background: var(--green-tint);
	color: var(--green-text);
	font-size: var(--tiny);
}
.post-card__excerpt {
	margin-top: 0.6em;
	font-size: var(--small);
	line-height: 1.55;
	color: var(--body);
	max-width: 34em;
}
.awards__tabs--row { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
a.awards__tab { text-decoration: none; }
a.awards__tab[aria-current="page"] { background: var(--green); }
.listing-empty { margin-top: 2rem; font-size: var(--base); color: var(--muted); }

/* --- post ------------------------------------------------------------------ */
.post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(260px, 22vw, 400px);
	gap: clamp(2rem, 4vw, 5rem);
	align-items: start;
}
.post-body { max-width: 46em; }
.post-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: clamp(1.25rem, 2vw, 2rem);
	font-size: var(--tiny);
	color: var(--muted);
}
.post-meta svg { width: 1.05em; height: 1.05em; flex: none; }
.post-meta__cat {
	padding: 0.2em 0.8em;
	border-radius: 999px;
	background: var(--green-tint);
	color: var(--green-text);
}
.post-meta__cat:hover { background: var(--green); color: var(--ink); }

.post-share {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: clamp(2rem, 3vw, 3.5rem);
	padding-top: clamp(1.25rem, 2vw, 2rem);
	border-top: 1px solid var(--line-soft);
	font-size: var(--small);
	color: var(--muted);
}
.post-share a {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--band-blue-soft);
	color: var(--ink);
	transition: background-color 0.2s ease;
}
.post-share a:hover { background: var(--green); }
.post-share svg { width: 18px; height: 18px; }

.sidebar {
	position: sticky;
	top: calc(var(--header-h) + 1.5rem);
	padding: clamp(1.25rem, 2vw, 2rem);
	background: var(--surface);
	border-radius: var(--r-lg);
}
.sidebar__title { font-size: var(--h5); margin-bottom: 1.2em; }
.recent-list { margin-bottom: 1.5rem; }
.recent-list li + li { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.recent-list a { display: flex; gap: 0.9rem; align-items: flex-start; }
.recent-list__media {
	flex: none;
	width: 72px;
	aspect-ratio: 1;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--band-blue-soft);
}
.recent-list__media .plate { aspect-ratio: 1; }
.recent-list__title {
	display: block;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--small);
	line-height: 1.35;
	color: var(--ink);
}
.recent-list a:hover .recent-list__title { color: var(--blue-deep); }
.recent-list time { display: block; margin-top: 0.35em; font-size: var(--tiny); color: var(--muted); }

/* --- contact --------------------------------------------------------------- */
.contact-cards { display: grid; gap: var(--card-gap); margin-top: clamp(1.75rem, 3vw, 3rem); }
.contact-card { padding: clamp(1.25rem, 2vw, 2rem); background: var(--card-blue); border-radius: var(--r-lg); }
.contact-card .diamonds { width: clamp(20px, 1.35vw, 26px); height: auto; margin-bottom: 1rem; color: var(--ink); }
.contact-card h3 { font-size: var(--h5); margin-bottom: 0.4em; }
.contact-card p { font-size: var(--base); color: var(--body); }
.contact-card a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 2px; }
.contact-card a:hover { color: var(--ink); }
.contact-cards > :nth-child(2) { background: var(--card-green); }
.contact-cards > :nth-child(3) { background: var(--card-cream); }

/* --- team grid (About) ----------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap); }
/* four-up cards are half the width of the homepage rail's, so the name, role
   and Bio button stack rather than fighting for one line */
.team-grid .team-card__meta { flex-direction: column; align-items: flex-start; gap: 0.85rem; }

/* --- shared CTA band ------------------------------------------------------- */
.cta-band__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	margin-top: 1.2em;
	font-family: var(--font-head);
	font-weight: 500;
}
.cta-band__contact a { color: var(--ink); }
.cta-band__contact a:hover { color: var(--blue-deep); }

/* --------------------------------------------------------------------------
   20. Responsive
   The artboard is desktop-only; the rules below are this build's own.
   -------------------------------------------------------------------------- */

/* Laptop — 5-column footer gets crowded */
@media (max-width: 1180px) {
	.site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* Tablet */
@media (max-width: 1024px) {
	.rail > * { flex-basis: calc((100% - var(--card-gap)) / 2); }
	.services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.services__intro { grid-column: 1 / -1; padding-right: 0; }
	.awards__grid { grid-template-columns: 1fr; }
	.awards__tabs { flex-direction: row; flex-wrap: wrap; }
	.awards__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero__aside { margin-left: 0; margin-right: 0; }
	.hero h1 { max-width: 17em; }
}

/* Small tablet / large phone */
@media (max-width: 860px) {
	.nav-toggle { display: grid; place-items: center; }

	/* `backdrop-filter` on .site-header makes it the containing block for any
	   position:fixed descendant, so the panel is anchored to the header rather
	   than the viewport. Pinning the header keeps the two the same thing. */
	.site-header { position: fixed; }
	/* already pinned, so there is nothing to drop in from */
	.site-header.is-stuck { animation: none; }

	.site-header__inner {
		display: flex;
		justify-content: space-between;
	}
	.nav__cta { position: static; transform: none; }

	/* above the panel, so the close control is always clickable */
	.nav-toggle { position: relative; z-index: 2; }

	.nav {
		position: fixed;
		inset: 0 0 auto;
		top: 0;
		width: 100%;
		z-index: 1;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: calc(var(--header-h) + 1rem) 1.25rem 1.5rem;
		background: var(--white);
		box-shadow: 0 16px 40px rgba(20, 22, 27, 0.14);
		transform: translateY(-100%);
		/* hidden, not merely offset — a transform leaves the links tabbable */
		visibility: hidden;
		transition: transform 0.28s ease, visibility 0s linear 0.28s;
		max-height: 100vh;
		max-height: 100dvh;
		overflow-y: auto;
	}
	.nav.is-open {
		transform: translateY(0);
		visibility: visible;
		transition: transform 0.28s ease, visibility 0s linear 0s;
	}
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.nav__item { border-bottom: 1px solid var(--line-soft); }
	.nav__link { width: 100%; justify-content: space-between; padding: 1rem 0; font-size: 1.0625rem; }
	/* the mega panel folds back into the slide-in nav as a plain list */
	.megamenu { position: static; padding: 0; }
	/* the nav panel already has its own gutter; a second one indented the five
	   service links away from every other item in the list */
	.megamenu > .container { padding-inline: 0; max-width: none; }
	.megamenu__panel {
		padding: 0 0 0.9rem;
		border-radius: 0;
		box-shadow: none;
		animation: none;
	}
	.megamenu__label { display: none; }
	.megamenu__grid { grid-template-columns: 1fr; grid-auto-flow: row; gap: 0.9rem; }
	.megamenu__item { margin: 0; padding: 0.35rem 0 0.35rem 0.75rem; }
	.megamenu__head { font-size: 1rem; }
	.megamenu__blurb { font-size: var(--tiny); margin-top: 0.3em; }
	.nav__cta { margin-top: 1.25rem; }
	.nav__cta .btn { width: 100%; }

	/* No JavaScript means nothing can open the burger panel, which would leave
	   a phone with no navigation at all. Drop the burger and let the nav be an
	   ordinary list under the logo. */
	html:not(.js) .nav-toggle { display: none; }
	/* static, not absolute: with the nav expanded there is nothing to collapse
	   it, so the header takes its own space instead of covering the hero */
	html:not(.js) .site-header { position: static; }
	html:not(.js) .hero { padding-top: 0; }
	html:not(.js) .site-header__inner { flex-wrap: wrap; }
	html:not(.js) .nav {
		position: static;
		width: 100%;
		transform: none;
		visibility: visible;
		box-shadow: none;
		padding: 0 0 1rem;
		max-height: none;
	}
	/* the arrows do nothing without JS; the rails still scroll and swipe */
	html:not(.js) .carousel-controls { display: none; }

	.about,
	.why__inner,
	.contact { grid-template-columns: 1fr; }
	.about h2 { max-width: 16em; }
	.about__petals { display: none; }
	.why__decor { display: none; }

	.br-lg { display: none; }

	.hero__strap { position: static; transform: none; margin-top: clamp(2rem, 6vw, 3rem); flex-wrap: wrap; white-space: normal; }
	.hero__rule { display: none; }
	.hero { min-height: 0; }
	/* A portrait crop of a 16:9 frame lands on the dark glass; pull the framing
	   up so the sky still reads, and lighten the scrim to match. */
	.hero__media img,
	.hero__video { object-position: 50% 18%; }
	.hero::after {
		background:
			linear-gradient(180deg, rgba(16, 24, 36, 0.3) 0%, rgba(16, 24, 36, 0.12) 40%, rgba(16, 24, 36, 0.5) 100%),
			linear-gradient(90deg, rgba(16, 24, 36, 0.34) 0%, rgba(16, 24, 36, 0.05) 70%);
	}

	.section-head { align-items: flex-start; }
}

/* Phone */
@media (max-width: 640px) {
	.rail > * { flex-basis: 86%; }
	.services { grid-template-columns: 1fr; }
	.awards__cards > .award-card { flex-basis: 88%; }
	.form__row { grid-template-columns: 1fr; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.site-footer__grid > :first-child { grid-column: 1 / -1; }
	/* keep the petals out from behind the hero copy — a saturated shape under
	   white text is the one place this palette can hurt legibility */
	.petal--blue, .petal--yellow { display: none; }
	.petal--red { width: 34vw; top: 2%; right: -13%; }
	.petal--green { width: 30vw; top: 68%; right: -12%; }
	.hero h1 { max-width: none; }
	.hero__aside { width: 100%; }
	/* smaller and further into the corner: on one-card-per-screen the cluster
	   otherwise sits squarely behind the client name and the summary */
	.quote-card__petals { width: 42%; top: -14%; right: -16%; }
}

@media (max-width: 420px) {
	.site-footer__grid { grid-template-columns: 1fr; }
	.section-head__controls { width: 100%; justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   21. Responsive — inner pages
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
	.post-layout { grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 320px); }
}

@media (max-width: 1440px) {
	/* three-up below the artboard's own width, so an open biography keeps a
	   readable measure on an ordinary laptop */
	.team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
	.awards__grid { grid-template-columns: 1fr; }
	.awards__tabs { flex-direction: row; flex-wrap: wrap; }
	.post-grid,
	.services--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.post-layout { grid-template-columns: 1fr; }
	.sidebar { position: static; }
	.recent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
	.recent-list li + li { margin-top: 0; padding-top: 0; border-top: 0; }
}

@media (max-width: 860px) {
	.contact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.split { grid-template-columns: 1fr; }
	.split--flip .split__copy { order: 0; }
	.split__media { order: 1; }
	.banner { min-height: clamp(240px, 44vw, 340px); }
	.banner h1 { max-width: none; }
}

@media (max-width: 640px) {
	.post-grid,
	.services--even,
	.team-grid,
	.contact-cards,
	.recent-list { grid-template-columns: 1fr; }
	.recent-list li + li { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
	.imgpair__a { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   22. Print
   Scroll-reveal, reversed-out hero type and decorative colour are all screen
   ideas. On paper the whole document has to be there, in ink, on white.
   -------------------------------------------------------------------------- */
@media print {
	/* anything the reader never scrolled past would otherwise print blank */
	.js-reveal [data-reveal],
	[data-reveal] { opacity: 1 !important; translate: none !important; }

	/* the biography is parked off its card on screen; on paper it belongs
	   under the portrait, in full, with no scrollbox */
	.js .team-card__face { aspect-ratio: auto; overflow: visible; min-height: 0; }
	.js .team-card__photo { position: relative; }
	.js .team-card__bio {
		position: static;
		translate: none;
		visibility: visible;
		overflow: visible;
		margin-top: 1rem;
		border-radius: 0;
		background: none;
	}

	/* the hero's contrast comes from the footage behind it, which does not print */
	.hero { min-height: 0; background: none; padding-top: 0; }
	.hero::after, .hero__media, .hero__petals { display: none; }
	.hero h1, .hero__aside, .hero__strap { color: var(--ink); }
	.hero h1 .accent { color: var(--blue-text); }
	.hero__strap { position: static; transform: none; }
	.hero__rule { background: var(--ink); }

	/* rails print as wrapped grids so nothing hides past the right edge */
	.rail, .awards__cards {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow: visible;
	}
	.rail > *, .award-card { flex: none; }

	.plate, .site-footer__decor, .why__decor, .about__petals,
	.carousel-controls, .nav-toggle, .skip-link, .megamenu { display: none; }
	.banner { min-height: 0; padding-top: 1rem; }
	.banner::after { display: none; }
	.site-header { position: static; background: none; box-shadow: none; }

	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
	.section { padding-block: 1.25rem; break-inside: avoid-page; }
	body { background: #fff; }
}