/* =========================================================
   Chameleon — main stylesheet

   Every colour is a CSS custom property. To produce the brand
   variant (site 2), change ONLY the BRAND COLOURS group below
   (plus the logo). Nothing outside :root should hard-code a
   colour — always reference a variable.

   The four brand colours are final. The neutrals (ink, muted,
   line, surfaces) are still placeholders.
   ========================================================= */

:root {

	/* -----------------------------------------------------
	   BRAND COLOURS  —  the only tokens a clone changes
	   ----------------------------------------------------- */
	--colour-brand: #15683b;        /* green: primary          */
	--colour-brand-accent: #1cb097; /* teal, picked from the logo */
	--colour-brand-accent-text: #147f6d; /* darker shade of the logo teal for small text: 4.9:1 on white */
	--colour-brand-alt: #1e76b9;    /* blue                    */
	--colour-brand-alt-text: #1d72b3; /* blue for text/links: 4.7:1 on #f5f6f9, 5.1:1 on white */
	--colour-brand-deep: #2f388a;   /* purple                  */
	--colour-brand-navy: #14162b;   /* navy: dark bands        */
	--colour-brand-accent-light: #a5e0d6; /* light tint of the logo teal: eyebrows on dark tinted bands */
	--colour-fire-yellow: #ffcd1c;  /* Fire Stopping brand: family block gradient */
	--colour-fire-orange: #ec6608;
	--colour-fire-red: #e30613;
	--colour-cop-pink: #e61d8b;    /* Community of Purpose brand pink: Our Purpose highlight only */
	--colour-ink: #1a1a1a;          /* primary text            */
	--colour-ink-muted: #555555;    /* secondary text          */
	--colour-line: #e2e2e2;         /* borders / rules         */
	--colour-surface: #ffffff;      /* page background         */
	--colour-surface-alt: #f5f6f9;  /* alternating sections ("light navy" on content sections) */
	--colour-surface-teal: color-mix(in srgb, var(--colour-brand-accent) 10%, var(--colour-surface)); /* light teal (#e8f7f5): content sections */
	--colour-inverse: #ffffff;      /* text on brand colour    */

	/* Semantic aliases — reference the palette above; leave as-is */
	--colour-text: var(--colour-ink);
	--colour-text-muted: var(--colour-ink-muted);
	--colour-background: var(--colour-surface);
	--colour-link: var(--colour-brand-alt-text);   /* blue text tone: passes on white and the grey */
	--colour-link-hover: var(--colour-brand-deep);
	--colour-eyebrow: var(--colour-brand-accent); /* logo teal, by client choice (2.7:1 on white) */
	--colour-service-teal: var(--colour-brand-accent-text); /* darker teal behind white text: 4.9:1 */
	--colour-focus: var(--colour-brand-alt);       /* blue: ≥3:1 on white and on dark bands */
	--colour-band: var(--colour-brand-navy);     /* dark bands: highlight, projects intro */
	--colour-band-text: var(--colour-inverse);
	--colour-cta-text: color-mix(in srgb, var(--colour-inverse) 92%, transparent);
	--colour-cta-button-border: color-mix(in srgb, var(--colour-inverse) 60%, transparent);
	--colour-cta-button-hover: color-mix(in srgb, var(--colour-inverse) 15%, transparent);
	--colour-cta-overlay: color-mix(in srgb, var(--colour-brand-navy) 0%, transparent); /* 0% = as designed; 25% + solid-white text passes AA */
	--colour-cat-card-bg: color-mix(in srgb, var(--colour-inverse) 8%, transparent);   /* CAT cards on the tinted gradient */
	--colour-cat-card-line: color-mix(in srgb, var(--colour-inverse) 18%, transparent);
	--colour-sector-tile-bg: var(--colour-brand-deep); /* sector card without a photo */
	--colour-field-line: #d4d7e0;   /* form field borders (Figma); fields also have visible labels */
	--colour-error: #c0282d;        /* form errors: 5.6:1 on white */
	--colour-pill-bg: color-mix(in srgb, var(--colour-inverse) 10%, transparent);   /* labels on the tinted gradient */
	--colour-pill-line: color-mix(in srgb, var(--colour-inverse) 28%, transparent);
	--colour-footer-bg: var(--colour-brand-navy);
	--colour-footer-heading: var(--colour-inverse);
	--colour-footer-text: color-mix(in srgb, var(--colour-inverse) 72%, transparent);
	--colour-footer-text-muted: color-mix(in srgb, var(--colour-inverse) 50%, transparent);
	--colour-footer-line: color-mix(in srgb, var(--colour-inverse) 12%, transparent);
	--colour-purpose-text: color-mix(in srgb, var(--colour-inverse) 85%, transparent);
	--colour-hero-text: color-mix(in srgb, var(--colour-inverse) 82%, transparent);
	--colour-hero-tint-start: color-mix(in srgb, var(--colour-brand-accent-text) 20%, transparent);
	--colour-hero-tint-end: color-mix(in srgb, var(--colour-brand-alt) 20%, transparent);
	--colour-hero-shade: color-mix(in srgb, var(--colour-brand-navy) 20%, transparent);
	--colour-hero-scrim: color-mix(in srgb, var(--colour-brand-navy) 75%, transparent); /* rises behind hero text */
	--colour-hero-scrim-clear: color-mix(in srgb, var(--colour-brand-navy) 0%, transparent);
	--colour-home-hero-tint: color-mix(in srgb, var(--colour-brand-navy) 60%, transparent); /* Figma: 60% dark over the video */
	--colour-home-hero-text: color-mix(in srgb, var(--colour-inverse) 90%, transparent);
	--colour-home-hero-tagline: color-mix(in srgb, var(--colour-inverse) 72%, transparent);
	--colour-hero-button-primary: var(--colour-brand-accent);  /* brand teal, by client choice (white text 3:1) */
	--colour-hero-button-primary-hover: color-mix(in srgb, var(--colour-brand-accent) 80%, var(--colour-brand-navy));
	--colour-hero-button-border: color-mix(in srgb, var(--colour-inverse) 55%, transparent);
	--colour-hero-control-bg: color-mix(in srgb, var(--colour-brand-navy) 45%, transparent);
	--colour-header-bg: var(--colour-band);        /* solid header on pages without a dark hero */
	--colour-header-shade: color-mix(in srgb, var(--colour-brand-navy) 55%, transparent); /* top shade when over a photo */
	--colour-nav-link: color-mix(in srgb, var(--colour-inverse) 85%, transparent);
	--colour-nav-current: var(--colour-brand-accent-light);
	--colour-lightbox-backdrop: color-mix(in srgb, var(--colour-brand-navy) 92%, transparent);
	--colour-lightbox-control: color-mix(in srgb, var(--colour-inverse) 14%, transparent);

	/* Signature "adaptive" gradient (ticks, rules): green → teal → blue → purple. */
	--gradient-brand: linear-gradient(90deg, var(--colour-brand) 0%, var(--colour-brand-accent) 40%, var(--colour-brand-alt) 72%, var(--colour-brand-deep) 100%); /* stops from the Figma CTA */
	/* Fire Stopping block (Chameleon family): yellow → orange → red, as in Figma 67:320. */
	--gradient-fire: linear-gradient(90deg, var(--colour-fire-yellow) 0%, var(--colour-fire-orange) 50%, var(--colour-fire-red) 100%);	/* Home hero fallback behind the video/poster: purple → blue → teal → green, mixed with navy. */
	--gradient-home-hero: linear-gradient(90deg,
		color-mix(in srgb, var(--colour-brand-deep) 55%, var(--colour-brand-navy)) 0%,
		color-mix(in srgb, var(--colour-brand-alt) 45%, var(--colour-brand-navy)) 35%,
		color-mix(in srgb, var(--colour-brand-accent) 45%, var(--colour-brand-navy)) 70%,
		color-mix(in srgb, var(--colour-brand) 55%, var(--colour-brand-navy)) 100%);
	/* Tinted version for the Home purpose band: brand colours mixed with navy so small
	   text stays legible. Derived from the palette, so a reskin follows automatically. */
	--gradient-brand-tinted: linear-gradient(90deg,
		color-mix(in srgb, var(--colour-brand) 45%, var(--colour-brand-navy)) 0%,
		color-mix(in srgb, var(--colour-brand-accent) 50%, var(--colour-brand-navy)) 55%,
		color-mix(in srgb, var(--colour-brand-deep) 55%, var(--colour-brand-navy)) 100%);

	/* -----------------------------------------------------
	   TYPE
	   ----------------------------------------------------- */
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: var(--font-body);
	/* Fluid sizes: min at 360px viewport → max at 1280px.
	   clamp(min, intercept rem + slope vw, max); the rem part keeps zoom working.
	   Desktop end points for the small sizes come from the Figma footer. */
	--fs-label: clamp(0.6875rem, 0.663rem + 0.1087vw, 0.75rem);     /* 11 → 12px, uppercase labels */
	--fs-2xsmall: clamp(0.75rem, 0.7255rem + 0.1087vw, 0.8125rem);  /* 12 → 13px, footer bar, meta */
	--fs-xsmall: clamp(0.8125rem, 0.788rem + 0.1087vw, 0.875rem);   /* 13 → 14px, footer text */
	--fs-small: clamp(0.875rem, 0.8505rem + 0.1087vw, 0.9375rem);   /* 14 → 15px */
	--fs-base: clamp(1rem, 0.9755rem + 0.1087vw, 1.0625rem);        /* 16 → 17px (Figma body copy) */
	--fs-lead: clamp(1.125rem, 1.0761rem + 0.2174vw, 1.25rem);      /* 18 → 20px (Figma project hero subtitle) */
	--fs-h4: clamp(1.125rem, 1.0761rem + 0.2174vw, 1.25rem);        /* 18 → 20px */
	--fs-h3: clamp(1.25rem, 1.0543rem + 0.8696vw, 1.75rem);         /* 20 → 28px */
	--fs-medium: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);       /* 16 → 18px (CTA overview) */
	--fs-h2: clamp(1.625rem, 1.4293rem + 0.8696vw, 2.125rem);       /* 26 → 34px (Figma section heading; mobile TBC) */
	--fs-h2-large: clamp(1.75rem, 1.4565rem + 1.3043vw, 2.5rem);    /* 28 → 40px (CTA heading; mobile TBC) */
	--fs-number: clamp(2.25rem, 2.0543rem + 0.8696vw, 2.75rem);     /* 36 → 44px (process step numbers) */
	--fs-quote: clamp(1.375rem, 1.3261rem + 0.2174vw, 1.5rem);      /* 22 → 24px (testimonial quotes) */
	--fs-quote-large: clamp(1.5rem, 1.4022rem + 0.4348vw, 1.75rem); /* 24 → 28px (full-width feature quote) */
	--fs-h1: clamp(2.125rem, 1.587rem + 2.3913vw, 3.5rem);          /* 34 → 56px (Figma project hero; mobile TBC) */
	--fs-hero: clamp(2.25rem, 1.663rem + 2.6087vw, 3.75rem);        /* 36 → 60px (Figma home hero; mobile TBC) */
	--fs-display: clamp(2.5rem, 1.1304rem + 6.087vw, 6rem);         /* 40 → 96px */
	--lh-base: 1.6;
	--lh-heading: 1.1;
	--lh-display: 1.05;

	/* -----------------------------------------------------
	   SPACING
	   ----------------------------------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
	--space-6: 3rem;
	--space-7: 5rem;
	--section-gap: clamp(3rem, 1.4837rem + 6.7391vw, 6.875rem); /* 48 → 110px (Figma section padding) */
	--section-gap-sm: clamp(3rem, 2.1196rem + 3.913vw, 5.25rem);  /* 48 → 84px (project page sections) */

	/* -----------------------------------------------------
	   LAYOUT
	   ----------------------------------------------------- */
	--container-max: 1324px; /* 1260px of content inside the 32px side padding (was 1200 / 1136) */
	--container-pad: clamp(1rem, 4vw, 2rem);
	--radius: 4px;
	--tick-size: 3px; /* eyebrow tick height */
	--banner-line-size: calc(var(--tick-size) + 2px); /* 5px: gradient line under every banner */
	--radius-lg: 0.875rem; /* 14px, images */
	--radius-pill: 999px;  /* pill buttons */
	--logo-width: clamp(9.375rem, 6.7826rem + 11.5217vw, 16rem);       /* 150 → 256px (141px tall; was 220 × 121, enlarged at client request) */
	--header-pad-top: clamp(1rem, 0.5109rem + 2.1739vw, 2.25rem);     /* 16 → 36px */
	--header-height: calc(var(--header-pad-top) * 2 + var(--logo-width) * 0.55); /* logo is 220 × 121; same padding top and bottom */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--colour-text);
	background: var(--colour-background);
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	line-height: var(--lh-heading);
	color: var(--colour-ink);
	margin: 0 0 var(--space-3);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--space-3); }

a {
	color: var(--colour-link);
	text-decoration: none;
}
a:hover,
a:focus {
	color: var(--colour-link-hover);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ---------- Layout ---------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* ---------- Header ---------- */
/* Solid navy bar by default; on dark-hero templates (.has-overlay-header) it sits over
   the hero with a soft top shade so the links stay readable on any photo. */
.site-header {
	position: relative;
	z-index: 10;
	background: var(--colour-header-bg);
	color: var(--colour-nav-link);
}
.has-overlay-header .site-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	background: linear-gradient(to bottom, var(--colour-header-shade), var(--colour-hero-scrim-clear));
}
.admin-bar.has-overlay-header .site-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar.has-overlay-header .site-header { top: 46px; }
}
.site-header-inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--header-pad-top); /* same top and bottom */
}
.site-header a:focus-visible,
.site-nav-toggle:focus-visible {
	outline: 2px solid var(--colour-inverse);
	outline-offset: 3px;
}
.custom-logo-link { display: block; }
.custom-logo {
	display: block;
	width: var(--logo-width);
	height: auto;
}
.site-title {
	font-size: var(--fs-h4);
	font-weight: 600;
	color: var(--colour-inverse);
}
.site-title:hover,
.site-title:focus { color: var(--colour-inverse); }

.site-nav-menu {
	display: flex;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav-menu a {
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--colour-nav-link);
	text-underline-offset: 0.3em;
}
.site-nav-menu a:hover,
.site-nav-menu a:focus {
	color: var(--colour-inverse);
	text-decoration: underline;
}
.site-nav-menu .current-menu-item > a,
.site-nav-menu .current-menu-ancestor > a {
	font-weight: 600;
	color: var(--colour-nav-current);
}
.site-header-button {
	display: inline-block;
	padding: 0.875rem 1.625rem; /* 14px 26px */
	border: 2px solid var(--colour-cta-button-border);
	border-radius: var(--radius-pill);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: normal;
	color: var(--colour-inverse);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.site-header-button:hover,
.site-header-button:focus {
	border-color: var(--colour-inverse);
	background: var(--colour-cta-button-hover);
	color: var(--colour-inverse);
}

/* Mobile: menu behind a toggle (main.js). Without JS the toggle is hidden and the
   menu simply shows under the logo. */
.site-nav-toggle {
	display: none;
	align-items: center;
	gap: var(--space-2);
	min-block-size: 44px;
	padding: var(--space-2) var(--space-3);
	border: 2px solid var(--colour-cta-button-border);
	border-radius: var(--radius-pill);
	background: none;
	font: inherit;
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--colour-inverse);
	cursor: pointer;
}
.site-nav-toggle-icon,
.site-nav-toggle-icon::before,
.site-nav-toggle-icon::after {
	display: block;
	inline-size: 18px;
	block-size: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-nav-toggle-icon { position: relative; }
.site-nav-toggle-icon::before,
.site-nav-toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
}
.site-nav-toggle-icon::before { top: -6px; }
.site-nav-toggle-icon::after { top: 6px; }
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-icon { background: none; }
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 59.99em) {
	.has-js .site-nav-toggle { display: inline-flex; }
	.site-nav-panel {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
		inline-size: 100%;
	}
	.has-js .site-nav-panel {
		position: absolute;
		top: 100%;
		inset-inline: 0;
		padding: var(--space-4) var(--container-pad) var(--space-5);
		background: var(--colour-header-bg);
	}
	.has-js .site-nav-panel:not(.is-open) { display: none; }
	.site-nav-menu {
		flex-direction: column;
		gap: 0;
	}
	.site-nav-menu a {
		display: flex;
		align-items: center;
		min-block-size: 44px;
		font-size: var(--fs-base);
	}
}
@media (min-width: 60em) {
	.site-nav-panel {
		display: flex;
		align-items: center;
		gap: var(--space-4); /* 24px */
	}
}

/* Leave room for the overlaid header at the top of dark-hero templates. */
.has-overlay-header .page-hero,
.has-overlay-header .page-intro {
	padding-top: calc(var(--header-height) + var(--space-5));
}

/* ---------- Footer ---------- */
.site-footer {
	--footer-gap: 2.5rem; /* 40px between every footer row and column */
	padding-block: 4.5rem 2.5rem;
	background: var(--colour-footer-bg);
	color: var(--colour-footer-text);
	font-size: var(--fs-xsmall);
	line-height: 1.5;
}
.site-footer a {
	color: inherit;
	text-underline-offset: 0.2em;
}
.site-footer a:hover,
.site-footer a:focus {
	color: var(--colour-footer-heading);
	text-decoration: underline;
}
.site-footer a:focus-visible {
	outline: 2px solid var(--colour-focus);
	outline-offset: 2px;
}
.site-footer-inner {
	display: flex;
	flex-direction: column;
	gap: var(--footer-gap);
}
/* Gradient tick above the columns (decorative). */
.site-footer-inner::before {
	content: "";
	inline-size: 30px;
	block-size: 2px;
	background: var(--gradient-brand);
}

/* Four columns on desktop, column 2 left empty for balance. */
.site-footer-columns {
	display: grid;
	gap: var(--footer-gap);
}
@media (min-width: 40em) {
	.site-footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 60em) {
	.site-footer-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.site-footer-brand { grid-column: 1; }
	.site-footer-address { grid-column: 3; }
}

.site-footer-strapline,
.site-footer-purpose {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.55;
}
.site-footer-strapline + .site-footer-purpose { margin-top: 1.55em; }
.site-footer-purpose { font-weight: 700; }

.site-footer-social {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin: var(--footer-gap) 0 0;
	padding: 0;
	list-style: none;
}
.site-footer-social-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--colour-footer-heading);
}
.site-footer-social-link svg { display: block; }

.site-footer-title {
	margin: 0 0 0.625rem; /* 10px */
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--colour-footer-heading);
}
.site-footer-text {
	margin: 0;
	font-style: normal;
}

/* Bottom bar: copyright + legal menu left, credit right. */
.site-footer-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-3) var(--space-5);
	padding-top: var(--footer-gap);
	border-top: 1px solid var(--colour-footer-line);
	font-size: var(--fs-2xsmall);
	color: var(--colour-footer-text-muted);
}
/* © 2026 Chameleon | Terms and conditions | Privacy */
.site-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
}
.site-footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Divider before each link, drawn as a border so screen readers don't announce a "|". */
.site-footer-menu li {
	padding-inline-start: var(--space-3);
	border-inline-start: 1px solid var(--colour-footer-text-muted);
}
.site-footer-copyright,
.site-footer-credit {
	margin: 0;
}

/* ---------- Accessibility ---------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus {
	position: fixed;
	top: var(--space-2);
	left: var(--space-2);
	width: auto;
	height: auto;
	clip: auto;
	padding: var(--space-2) var(--space-3);
	background: var(--colour-brand);
	color: var(--colour-inverse);
	z-index: 1000;
}

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

/* ---------- Page wrapper ---------- */
/* Scoped to <main>: WordPress also puts a "page" class on <body> for every page. */
.site-main .page {
	padding-block: var(--section-gap);
}
.page-inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}
.page-header {
	margin-bottom: var(--space-5);
}
.page-title {
	margin: 0 0 var(--space-3);
}
.divider {
	border: 0;
	border-top: 1px solid var(--colour-line);
	margin: 0;
}
.page-content {
	max-width: 70ch; /* readable measure for body copy */
}
/* Links in body copy are underlined so they don't rely on colour alone. */
.page-content a { text-decoration: underline; }



/* ---------- Testimonial ---------- */
/* Base quote (template-parts/testimonial.php). Card styling lives in the
   Testimonials section below; the project page uses this plain version. */
.testimonial {
	margin: 0;
	max-width: 60ch;
}
.testimonial-quote {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-h3);
	line-height: 1.4;
	color: var(--colour-ink);
}
.testimonial-attribution {
	font-size: var(--fs-small);
	color: var(--colour-text-muted);
}

/* ---------- Testimonials section ---------- */
/* Heading + three cards + "View more testimonials" (Figma 3:15). */
.testimonials-section {
	padding-block: var(--section-gap);
}
.testimonials-section-inner {
	display: flex;
	flex-direction: column;
	gap: 2.75rem; /* 44px */
}
.testimonials-section-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem; /* 14px */
}
.testimonials-section-title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.14;
}
.testimonials-grid {
	display: grid;
	gap: var(--space-4);
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 60em) {
	.testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* The shared testimonial, shown as a card here and on the project page. */
.testimonials-grid .testimonial,
.project-testimonial .testimonial,
.project-feature-section-quote .testimonial {
	display: flex;
	flex-direction: column;
	gap: 1.125rem; /* 18px */
	max-width: none;
	padding: 1.875rem; /* 30px */
	border: 1px solid var(--colour-line);
	border-radius: var(--radius-lg);
	background: var(--colour-surface);
}
.testimonials-grid .testimonial::before,
.project-testimonial .testimonial::before,
.project-feature-section-quote .testimonial::before {
	content: "";
	inline-size: 40px;
	block-size: 4px;
	border-radius: 4px;
	background: var(--gradient-brand);
}
/* The quote itself: the highlight panel's teal SemiBold, a little under its size (24px). */
.testimonials-grid .testimonial-quote,
.project-testimonial .testimonial-quote,
.project-feature-section-quote .testimonial-quote {
	margin: 0;
	font-size: var(--fs-quote);
	font-weight: 600;
	line-height: 1.35;
	color: var(--colour-brand-accent);
}
.testimonials-grid .testimonial-attribution,
.project-testimonial .testimonial-attribution,
.project-feature-section-quote .testimonial-attribution {
	font-size: var(--fs-xsmall);
	font-weight: 500;
	line-height: 1.4;
}
.testimonials-more {
	margin: 0;
	text-align: center;
}
.testimonials-more a {
	font-weight: 600;
	text-underline-offset: 0.2em;
}
.testimonials-more a:hover,
.testimonials-more a:focus {
	text-decoration: underline;
}
.testimonials-more a:focus-visible {
	outline: 2px solid var(--colour-focus);
	outline-offset: 3px;
}




/* ---------- Page intro (shared) ---------- */
/* template-parts/page-intro.php (Figma 17:3): eyebrow, 56px title, 20px intro on navy; the
   header overlays the top. Projects archive and Contact. */
.page-intro {
	--eyebrow-colour: var(--colour-brand-accent-light);
	position: relative;
	padding-block: var(--section-gap) 4rem; /* 64px below */
	background: var(--colour-band);
	color: var(--colour-hero-text);
}
.page-intro-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem; /* 14px */
}
.page-intro-title {
	margin: 0;
	font-size: var(--fs-h1);
	font-weight: 600;
	line-height: 1.04;
	color: var(--colour-inverse);
}
.page-intro-text {
	max-width: 38.75rem; /* 620px */
	font-size: var(--fs-lead);
	line-height: 1.5;
}
.page-intro-text > * { margin: 0 0 1em; }
.page-intro-text > :last-child { margin-bottom: 0; }
.page-intro-text a {
	color: inherit;
	text-decoration: underline;
}

/* ---------- Projects archive ---------- */
/* Featured rows (image 644 | text, alternating sides), each in its own full-width band with a
   background from Site Options → Projects (has-bg-light-navy / has-bg-light-teal, as content
   sections; unset = white). Then the shared .project-tiles grid. */
.projects-featured-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.projects-featured-band {
	--band-bg: var(--colour-surface);
	padding-block: var(--section-gap-sm);
	background: var(--band-bg);
}
.projects-featured-band.has-bg-light-navy { --band-bg: var(--colour-surface-alt); }
.projects-featured-band.has-bg-light-teal { --band-bg: var(--colour-surface-teal); }
.projects-more {
	padding-block: var(--section-gap-sm) var(--section-gap);
	background: var(--colour-surface-alt);
}

/* ---------- Page hero (shared) ---------- */
/* template-parts/page-hero.php (Figma 21:3): photo with the design's light tints plus a
   navy scrim rising behind the text so any photo stays legible. Single projects and About.
   .is-wide gives long headings more room (About). */
.page-hero {
	--page-hero-title-max: 43.125rem; /* 690px */
	--page-hero-text-max: 38.75rem;   /* 620px */
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-block-size: clamp(26rem, 20rem + 25vw, 40rem); /* 640px on desktop */
	padding-block: var(--space-7) 4rem;
	overflow: hidden;
	background: var(--colour-band);
	color: var(--colour-hero-text);
}
.page-hero.is-wide {
	--page-hero-title-max: 56.25rem; /* 900px */
	--page-hero-text-max: 47.5rem;   /* 760px */
}
/* Brand gradient line along the bottom of every banner (photo hero, video hero, navy intro
   band), and under the solid navy header on standard pages (no banner): full width, 2px taller
   than the eyebrow tick (--banner-line-size). Drawn with ::after, so no extra markup. */
.page-hero::after,
.home-hero::after,
.page-intro::after,
body:not(.has-overlay-header) .site-header::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	block-size: var(--banner-line-size);
	background: var(--gradient-brand);
	pointer-events: none;
}
.page-hero-image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, var(--colour-hero-scrim) 0%, var(--colour-hero-scrim-clear) 65%),
		linear-gradient(var(--colour-hero-shade), var(--colour-hero-shade)),
		linear-gradient(90deg, var(--colour-hero-tint-start), var(--colour-hero-tint-end));
}
.page-hero-inner {
	--eyebrow-colour: var(--colour-brand-accent-light);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem; /* 14px */
}
.page-hero-title {
	max-width: var(--page-hero-title-max);
	margin: 0;
	font-size: var(--fs-h1);
	font-weight: 600;
	line-height: 1.04;
	color: var(--colour-inverse);
}
.page-hero-text {
	max-width: var(--page-hero-text-max);
	margin: 0;
	font-size: var(--fs-lead);
	line-height: 1.5;
}

/* ---------- Single project ---------- */
/* Figma 21:2. The hero is the shared page hero above. */
/* Meta strip: label above value, rule underneath. */
.project-meta-wrap { padding-top: 1.875rem; }
.project-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) clamp(2rem, 5vw, 4.5rem); /* 72px apart on desktop */
	margin: 0;
	padding-bottom: 0.625rem;
	border-bottom: 1px solid var(--colour-line);
}
.project-meta-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.project-meta-label {
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--colour-eyebrow);
}
.project-meta-value {
	margin: 0;
	font-size: var(--fs-h4);
	font-weight: 500;
	color: var(--colour-ink);
}

/* Sections */
.project-section { padding-block: var(--section-gap-sm); }
.project-section.has-bg-alt { background: var(--colour-surface-alt); }
.project-section-title {
	margin: 0;
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.16;
}
.project-columns {
	display: grid;
	gap: var(--space-6);
	align-items: start;
}
@media (min-width: 60em) {
	.project-columns { grid-template-columns: minmax(0, 575fr) minmax(0, 600fr); column-gap: var(--space-6); }
	.project-columns.is-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.project-column {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.project-label {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-2xsmall);
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--colour-eyebrow);
}
/* WYSIWYG copy: overview, scope, challenge, solution. Bullet lists get teal dots. */
.project-copy {
	font-size: var(--fs-base);
	line-height: 1.65;
	color: var(--colour-text-muted);
}
.project-copy > * { margin: 0 0 1.65em; }
.project-copy > :last-child { margin-bottom: 0; }
.project-copy strong { color: var(--colour-ink); }
.project-copy ul {
	display: grid;
	gap: 0.75rem;
	padding: 0;
	list-style: none;
	line-height: 1.5;
}
.project-copy ul li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}
.project-copy ul li::before {
	content: "";
	flex: none;
	inline-size: 7px;
	block-size: 7px;
	margin-top: 0.55em;
	border-radius: 4px;
	background: var(--colour-brand-accent);
}
/* Scope of work list: ruled rows. First row stays flush so it lines up with the overview. */
.project-scope ul { gap: 0; }
.project-scope ul li {
	padding-block: var(--space-3);
	border-bottom: 1px solid var(--colour-line);
}
.project-scope ul li:first-child { padding-top: 0; }
.project-challenge .project-section-title { margin-bottom: 2.25rem; }
.project-challenge .project-column { gap: 0.75rem; }

/* Video testimonial + client testimonial. From 48em the quote card is inset 15% each side so the
   text wraps into shorter lines; full width on mobile. */
.project-testimonials-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
@media (min-width: 48em) {
	.project-testimonial { margin-inline: 15%; }
}
.project-video {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--colour-band);
}
.project-video iframe,
.project-video video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Gallery: 3 / 2 / 1 columns of 4:3 thumbnails; links open the lightbox. */
.project-gallery-section .project-section-title { margin-bottom: 1.75rem; }
.project-gallery {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 40em) {
	.project-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60em) {
	.project-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.project-gallery-link {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-lg);
}
.project-gallery-link:focus-visible {
	outline: 3px solid var(--colour-focus);
	outline-offset: 3px;
}
.project-gallery-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.project-gallery-link:hover .project-gallery-image { transform: scale(1.03); }

/* Next project + back link */
.project-next-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.project-next {
	display: flex;
	flex-direction: column;
	gap: 1.75rem; /* 28px */
}
.project-next-card {
	display: grid;
	gap: var(--space-5);
	align-items: center;
}
@media (min-width: 60em) {
	.project-next-card.has-image {
		grid-template-columns: minmax(0, 400fr) minmax(0, 800fr);
		column-gap: var(--space-6);
	}
}
.project-next-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
}
.project-next-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.625rem;
}
.project-next-sector {
	margin: 0;
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--colour-eyebrow);
}
.project-next-title {
	margin: 0;
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.18;
}
.project-next-excerpt {
	margin: 0;
	line-height: 1.45;
	color: var(--colour-text-muted);
}
.project-next-link-wrap { margin: 0; }
.project-back {
	margin: 0;
	font-weight: 600;
}
.project-back a { text-underline-offset: 0.2em; }
.project-back a:hover,
.project-back a:focus { text-decoration: underline; }

/* ---------- Lightbox ---------- */
/* <dialog> built by main.js for [data-lightbox] links (project gallery). */
.lightbox {
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	max-block-size: none;
	margin: 0;
	padding: var(--space-5) var(--space-3);
	border: 0;
	background: transparent;
	color: var(--colour-inverse);
}
.lightbox::backdrop { background: var(--colour-lightbox-backdrop); }
.lightbox[open] {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-rows: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
}
.lightbox-figure {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	min-block-size: 0;
	block-size: 100%;
	margin: 0;
}
.lightbox-image {
	flex: 1 1 auto;
	min-block-size: 0;
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
	border-radius: var(--radius);
}
.lightbox-caption {
	font-size: var(--fs-small);
	text-align: center;
}
.lightbox-caption:empty { display: none; }
.lightbox-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3rem;
	block-size: 3rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--colour-lightbox-control);
	color: var(--colour-inverse);
	font: inherit;
	font-size: var(--fs-h4);
	cursor: pointer;
}
.lightbox-button:hover { background: var(--colour-cta-button-hover); }
.lightbox-button:focus-visible {
	outline: 3px solid var(--colour-inverse);
	outline-offset: 3px;
}
.lightbox-close { grid-column: 3; grid-row: 1; justify-self: end; }
.lightbox-prev { grid-column: 1; grid-row: 2; }
.lightbox-next { grid-column: 3; grid-row: 2; }
.lightbox-count {
	grid-column: 2;
	grid-row: 3;
	justify-self: center;
	font-size: var(--fs-small);
}
.lightbox.is-single .lightbox-prev,
.lightbox.is-single .lightbox-next,
.lightbox.is-single .lightbox-count { display: none; }

/* ---------- Call to action ---------- */
/* Full-width brand gradient (Figma 3:43). --colour-cta-overlay darkens it for contrast. */
.cta {
	padding-block: var(--section-gap);
	background:
		linear-gradient(var(--colour-cta-overlay), var(--colour-cta-overlay)),
		var(--gradient-brand);
	color: var(--colour-cta-text);
	text-align: center;
}
.cta-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem; /* 20px */
}
.cta-title {
	max-width: 39.75rem; /* 636px */
	margin: 0;
	font-size: var(--fs-h2-large);
	font-weight: 600;
	line-height: 1.14;
	color: var(--colour-inverse);
}
.cta-text {
	max-width: 35rem; /* 560px */
	margin: 0;
	font-size: var(--fs-medium);
	line-height: 1.5;
}
.cta-button {
	display: inline-block;
	padding: 0.9375rem 1.625rem; /* 15px 26px */
	border: 2px solid var(--colour-cta-button-border);
	border-radius: var(--radius-pill);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: normal;
	color: var(--colour-inverse);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cta-button:hover,
.cta-button:focus {
	border-color: var(--colour-inverse);
	background: var(--colour-cta-button-hover);
	color: var(--colour-inverse);
}
.cta-button:focus-visible {
	outline: 3px solid var(--colour-inverse);
	outline-offset: 3px;
}

/* ---------- Eyebrow (shared) ---------- */
/* Small uppercase label with a tick, used above section headings.
   Sections recolour it with --eyebrow-colour and --eyebrow-tick. */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	font-size: var(--fs-2xsmall);
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--eyebrow-colour, var(--colour-eyebrow));
}
.eyebrow::before {
	content: "";
	flex: none;
	inline-size: 26px;
	block-size: var(--tick-size);
	border-radius: var(--tick-size);
	background: var(--eyebrow-tick, var(--gradient-brand));
}

/* ---------- Arrow link (shared) ---------- */
/* Text link with a "→" added by the template (aria-hidden).
   Sections recolour it with --arrow-link-colour / -hover / -focus. */
.arrow-link {
	font-weight: 600;
	color: var(--arrow-link-colour, var(--colour-link));
	text-underline-offset: 0.2em;
}
.arrow-link:hover,
.arrow-link:focus {
	color: var(--arrow-link-hover, var(--colour-link-hover));
	text-decoration: underline;
}
.arrow-link:focus-visible {
	outline: 2px solid var(--arrow-link-focus, var(--colour-focus));
	outline-offset: 3px;
}
.arrow-link-arrow {
	display: inline-block;
	margin-inline-start: 0.25em;
	transition: transform 0.2s ease;
}
.arrow-link:hover .arrow-link-arrow {
	transform: translateX(3px);
}

/* ---------- Content section ---------- */
/* Text + image (Figma 1:29). Mobile: text above image, always.
   Desktop: text 580 / image 560 with a 60px gap; .is-image-left swaps the columns. */
.content-section {
	--content-section-bg: var(--colour-surface);
	padding-block: var(--section-gap);
	background: var(--content-section-bg);
}
.content-section.has-bg-light-navy { --content-section-bg: var(--colour-surface-alt); }
.content-section.has-bg-light-teal { --content-section-bg: var(--colour-surface-teal); }
.content-section-inner {
	display: grid;
	gap: var(--space-5);
	align-items: center;
}
@media (min-width: 60em) {
	.content-section.has-image .content-section-inner {
		grid-template-columns: minmax(0, 29fr) minmax(0, 28fr);
		column-gap: 3.75rem;
	}
	.content-section.is-image-left .content-section-inner {
		grid-template-columns: minmax(0, 28fr) minmax(0, 29fr);
	}
	.content-section.is-image-left .content-section-media {
		order: -1;
	}
}
.content-section-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.125rem; /* 18px */
}
.content-section-title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.16;
}
.content-section-content {
	max-width: 70ch;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--colour-text-muted);
}
.content-section-content > * { margin: 0 0 1.6em; }
.content-section-content > :last-child { margin-bottom: 0; }
.content-section-content strong { color: var(--colour-ink); }
.content-section-link-wrap { margin: 0; }
.content-section-image {
	width: 100%;
	aspect-ratio: 56 / 43; /* 560 × 430, as in Figma */
	object-fit: cover;
	border-radius: var(--radius-lg);
}

/* ---------- Home hero ---------- */
/* Figma 1:3: 820px, video (or poster) under a 60% navy tint, header over the top.
   Content sits on the container edge, in line with the logo (Figma's 72px indent dropped to
   match the project hero). */
.home-hero {
	--eyebrow-colour: var(--colour-brand-accent-light);
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-block-size: clamp(36rem, 26rem + 30vw, 51.25rem); /* 820px on desktop */
	padding-block: calc(var(--header-height) + var(--space-5)) var(--space-7);
	overflow: hidden;
	background: var(--gradient-home-hero);
	color: var(--colour-home-hero-text);
}
.home-hero-media {
	position: absolute;
	inset: 0;
	z-index: -1;
}
.home-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--colour-home-hero-tint);
}
.home-hero-poster,
.home-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.home-hero-inner { width: 100%; }
.home-hero-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.375rem; /* 22px */
	max-width: 47.5rem; /* 760px; aligned to the container edge like the project hero (no indent) */
}
.home-hero-title {
	margin: 0;
	font-size: var(--fs-hero);
	font-weight: 600;
	line-height: 1.08;
	color: var(--colour-inverse);
}
.home-hero-text {
	max-width: 39.8125rem; /* 637px */
	margin: 0;
	font-size: var(--fs-lead);
	line-height: 1.5;
}
.home-hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem; /* 14px */
	margin: 0;
}
.home-hero-button {
	display: inline-block;
	padding: 0.9375rem 1.625rem; /* 15px 26px */
	border: 2px solid var(--colour-hero-button-border);
	border-radius: var(--radius-pill);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: normal;
	color: var(--colour-inverse);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.home-hero-button.is-primary {
	border-color: var(--colour-hero-button-primary);
	background: var(--colour-hero-button-primary);
}
.home-hero-button:hover,
.home-hero-button:focus {
	border-color: var(--colour-inverse);
	background: var(--colour-cta-button-hover);
	color: var(--colour-inverse);
}
.home-hero-button.is-primary:hover,
.home-hero-button.is-primary:focus {
	border-color: var(--colour-hero-button-primary-hover);
	background: var(--colour-hero-button-primary-hover);
}
.home-hero-button:focus-visible,
.home-hero-pause:focus-visible {
	outline: 3px solid var(--colour-inverse);
	outline-offset: 3px;
}
.home-hero-tagline {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--colour-home-hero-tagline);
}

/* Pause / play for the background video (WCAG 2.2.2). Shown by main.js once playing. */
.home-hero-pause {
	position: absolute;
	right: var(--container-pad);
	bottom: var(--space-4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem; /* 44px tap target */
	block-size: 2.75rem;
	padding: 0;
	border: 2px solid var(--colour-hero-button-border);
	border-radius: var(--radius-pill);
	background: var(--colour-hero-control-bg);
	color: var(--colour-inverse);
	cursor: pointer;
}
.home-hero-pause[hidden] { display: none; }
.home-hero-pause:hover { border-color: var(--colour-inverse); }
.home-hero-pause-icon {
	position: relative;
	inline-size: 10px;
	block-size: 12px;
}
.home-hero-pause-icon::before,
.home-hero-pause-icon::after {
	content: "";
	position: absolute;
	top: 0;
	inline-size: 3px;
	block-size: 100%;
	background: currentColor;
}
.home-hero-pause-icon::before { left: 0; }
.home-hero-pause-icon::after { right: 0; }
/* Paused: show a play triangle instead of the two bars. */
.home-hero-pause.is-paused .home-hero-pause-icon::before {
	left: 1px;
	inline-size: 10px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.home-hero-pause.is-paused .home-hero-pause-icon::after { display: none; }

/* ---------- Home services overview ---------- */
/* "One team. Any space." (Figma 1:40). Tile colour is chosen per item (has-bg-<colour>). */
.home-services {
	padding-block: var(--section-gap);
	background: var(--colour-surface-alt);
}
.home-services-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-6); /* 48px */
}
.home-services-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem; /* 14px */
}
.home-services-title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.12;
}
.home-services-intro {
	margin: 0;
	font-size: var(--fs-medium);
	line-height: 1.5;
	color: var(--colour-text-muted);
}
.home-services-grid {
	display: grid;
	gap: 1.8125rem 1.625rem; /* 29px 26px */
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 40em) {
	.home-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60em) {
	.home-services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.home-services-item {
	--service-bg: var(--colour-brand);
	padding: 1.375rem 1.5rem 1.5rem; /* 22px 24px 24px */
	border-radius: var(--radius-lg);
	background: var(--service-bg);
	font-size: var(--fs-medium);
	font-weight: 600;
	line-height: normal;
	color: var(--colour-inverse);
}
.home-services-item.has-bg-teal { --service-bg: var(--colour-service-teal); }
.home-services-item.has-bg-blue { --service-bg: var(--colour-brand-alt); }
.home-services-item.has-bg-purple { --service-bg: var(--colour-brand-deep); }

/* ---------- Home projects panel ---------- */
/* "Recent work" (Figma 2:55): first project large (image 629 | text), then three cards.
   Each card is a single stretched title link. */
.home-projects {
	padding-block: var(--section-gap);
	background: var(--colour-surface-alt);
}
.home-projects-inner {
	display: flex;
	flex-direction: column;
	gap: 3.5rem; /* 56px */
}
.home-projects-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem; /* 14px */
}
.home-projects-title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.14;
}

/* ---------- Project tiles (shared) ---------- */
/* template-parts/project-tile.php, used by the Home projects panel and the Projects listing.
   .project-tiles: 3 columns, 32px column / 48px row gaps (tightened from Figma's 60 / 56 so the
   images read larger), used on both pages.
   Tile layouts: .is-card (image above, 4:3), .is-featured (Home: large, image | text, 3:2),
   .is-row (listing: image | text, 3:2, .is-reversed puts the image on the right).
   Each tile is a single stretched title link. */
.project-tiles {
	display: grid;
	gap: var(--space-6) var(--space-5); /* 48px rows, 32px columns */
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 48em) {
	.project-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.project-tile.is-featured { grid-column: 1 / -1; }
}
.project-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.625rem; /* 10px */
}
.project-tile.is-featured,
.project-tile.is-row {
	display: grid;
	gap: var(--space-5);
	align-items: center;
}
@media (min-width: 60em) {
	.project-tile.is-featured.has-image {
		grid-template-columns: minmax(0, 629fr) minmax(0, 523fr);
		column-gap: var(--space-6);
	}
	.project-tile.is-row.has-image {
		grid-template-columns: minmax(0, 644fr) minmax(0, 504fr);
		column-gap: 3.25rem; /* 52px */
	}
	.project-tile.is-row.is-reversed.has-image { grid-template-columns: minmax(0, 504fr) minmax(0, 644fr); }
	.project-tile.is-row.is-reversed .project-tile-media { order: 2; }
}
.project-tile-media {
	overflow: hidden;
	border-radius: var(--radius-lg);
}
.project-tile-image {
	width: 100%;
	aspect-ratio: 4 / 3; /* 360 × 270 */
	object-fit: cover;
	transition: transform 0.3s ease;
}
.project-tile.is-featured .project-tile-image,
.project-tile.is-row .project-tile-image { aspect-ratio: 3 / 2; } /* 629 × 420 / 644 × 430 */
.project-tile:hover .project-tile-image { transform: scale(1.03); }
.project-tile-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.625rem;
}
.project-tile.is-featured .project-tile-body,
.project-tile.is-row .project-tile-body { gap: 0.875rem; }
.project-tile-label {
	margin: 0;
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--colour-eyebrow);
}
.project-tile-title {
	margin: 0;
	font-size: var(--fs-medium);
	font-weight: 600;
	line-height: 1.2;
}
.project-tile.is-featured .project-tile-title,
.project-tile.is-row .project-tile-title {
	font-size: var(--fs-h3);
	line-height: 1.16;
}
.project-tile-link {
	color: var(--colour-ink);
	text-underline-offset: 0.2em;
}
/* Stretch the title link over the whole tile. */
.project-tile-link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
}
.project-tile-link:hover,
.project-tile-link:focus {
	color: var(--colour-ink);
	text-decoration: underline;
}
.project-tile-link:focus-visible { outline: none; }
.project-tile-link:focus-visible::after {
	outline: 3px solid var(--colour-focus);
	outline-offset: 6px;
}
.project-tile-excerpt {
	margin: 0;
	line-height: 1.55;
	color: var(--colour-text-muted);
}
.project-tile-more { margin: 0; }
.project-tile:hover .arrow-link-arrow { transform: translateX(3px); }

/* ---------- Home purpose band ---------- */
/* "Chameleon on Purpose" (Figma 3:2): text 651 / image 480 with a 69px gap on the tinted
   gradient. Mobile: text above the image. */
.home-purpose {
	--eyebrow-colour: var(--colour-brand-accent-light);
	--arrow-link-colour: var(--colour-inverse);
	--arrow-link-hover: var(--colour-inverse);
	--arrow-link-focus: var(--colour-inverse);
	padding-block: var(--section-gap);
	background: var(--gradient-brand-tinted);
	color: var(--colour-purpose-text);
}
.home-purpose-inner {
	display: grid;
	gap: var(--space-5);
	align-items: center;
}
@media (min-width: 60em) {
	.home-purpose.has-image .home-purpose-inner {
		grid-template-columns: minmax(0, 651fr) minmax(0, 480fr);
		column-gap: 4.3125rem; /* 69px */
	}
}
.home-purpose-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.125rem; /* 18px */
}
.home-purpose-title {
	margin: 0;
	font-size: var(--fs-h2-large);
	font-weight: 600;
	line-height: 1.14;
	color: var(--colour-inverse);
}
.home-purpose-text {
	max-width: 70ch;
	font-size: var(--fs-base);
	line-height: 1.58;
}
.home-purpose-text > * { margin: 0 0 1.58em; }
.home-purpose-text > :last-child { margin-bottom: 0; }
.home-purpose-link-wrap { margin: 0; }
.home-purpose-image {
	width: 100%;
	aspect-ratio: 24 / 23; /* 480 × 460, as in Figma */
	object-fit: cover;
	border-radius: var(--radius-lg);
}

/* ---------- Highlight section ---------- */
/* Large-type statement on a colour band (Figma 2:2). Each background sets the
   text colours below; contrast: eyebrow/link ≥4.5:1, 34px text ≥3:1. */
.highlight-section {
	--highlight-bg: var(--colour-band);
	--highlight-title: var(--colour-inverse);
	--highlight-text: var(--colour-brand-accent);
	--eyebrow-colour: var(--colour-brand-accent);
	--eyebrow-tick: var(--gradient-brand);
	--arrow-link-colour: var(--colour-inverse);
	--arrow-link-hover: var(--colour-inverse);
	--arrow-link-focus: var(--colour-inverse);
	padding-block: var(--section-gap);
	background: var(--highlight-bg);
}
.highlight-section.has-bg-blue {
	--highlight-bg: var(--colour-brand-alt);
	--highlight-text: var(--colour-inverse);
	--eyebrow-colour: var(--colour-inverse);
	--eyebrow-tick: var(--colour-inverse);
}
.highlight-section.has-bg-teal {
	--highlight-bg: var(--colour-brand-accent);
	--highlight-title: var(--colour-ink);
	--highlight-text: var(--colour-ink);
	--eyebrow-colour: var(--colour-ink);
	--eyebrow-tick: var(--colour-inverse);
	--arrow-link-colour: var(--colour-ink);
	--arrow-link-hover: var(--colour-ink);
	--arrow-link-focus: var(--colour-ink);
}
.highlight-section.has-bg-purple {
	--highlight-bg: var(--colour-brand-deep);
	--eyebrow-colour: var(--colour-inverse);
	--eyebrow-tick: var(--colour-inverse);
}
.highlight-section.has-bg-green {
	--highlight-bg: var(--colour-brand);
	--highlight-text: var(--colour-inverse);
	--eyebrow-colour: var(--colour-inverse);
	--eyebrow-tick: var(--colour-inverse);
}
/* One-off for the Our Purpose page (set in templates/template-purpose.php, not an editor choice):
   Community of Purpose pink, navy title, white statement and eyebrow. */
.highlight-section.has-bg-cop-pink {
	--highlight-bg: var(--colour-cop-pink);
	--highlight-title: var(--colour-brand-navy);
	--highlight-text: var(--colour-inverse);
	--eyebrow-colour: var(--colour-inverse);
	--eyebrow-tick: var(--colour-inverse);
}
.highlight-section-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.625rem; /* 26px */
}
.highlight-section-title,
.highlight-section-text {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.14;
}
.highlight-section-title { color: var(--highlight-title); }
.highlight-section-text {
	max-width: 62.5rem; /* 1000px */
	color: var(--highlight-text);
}
.highlight-section-text > * { margin: 0 0 1.14em; }
.highlight-section-text > :last-child { margin-bottom: 0; }
.highlight-section-link-wrap {
	margin: var(--space-4) 0 0; /* extra space above the link, as in Figma */
}

/* ---------- Reasons section ---------- */
/* "Why Chameleon" (About): heading block, then cards with a gradient tick.
   1 column, 2 from 40em, 4 from 75em (282px cards at full width). */
.reasons-section {
	padding-block: var(--section-gap);
	background: var(--colour-surface-alt);
}
.reasons-section-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-6); /* 48px */
}
.reasons-section-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem; /* 14px */
}
.reasons-section-title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.16;
}
.reasons-section-intro {
	max-width: 50rem; /* 800px */
	margin: 0;
	font-size: var(--fs-medium);
	line-height: var(--lh-base);
	color: var(--colour-text-muted);
}
.reasons-grid {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 40em) {
	.reasons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 75em) {
	.reasons-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.reasons-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: 1.75rem; /* 28px */
	border: 1px solid var(--colour-line);
	border-radius: var(--radius-lg);
	background: var(--colour-surface);
}
.reasons-item::before {
	content: "";
	inline-size: 40px;
	block-size: 4px;
	border-radius: 4px;
	background: var(--gradient-brand);
}
.reasons-item-title {
	margin: 0;
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 1.3;
}
.reasons-item-text {
	margin: 0;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--colour-text-muted);
}

/* ---------- Process section ---------- */
/* "Our process" (About): numbered steps with a coloured top rule. The number is decorative
   (the <ol> numbers the steps for screen readers). Colours cycle green, teal, blue, purple. */
.process-section {
	padding-block: var(--section-gap);
}
.process-section-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-6); /* 48px */
}
.process-section-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem; /* 14px */
}
.process-section-title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.16;
}
.process-section-intro {
	max-width: 50rem; /* 800px */
	margin: 0;
	font-size: var(--fs-medium);
	line-height: var(--lh-base);
	color: var(--colour-text-muted);
}
.process-steps {
	display: grid;
	gap: 3.5rem 3.75rem; /* 56px 60px */
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 40em) {
	.process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60em) {
	.process-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.process-step {
	--step-colour: var(--colour-brand);
	display: flex;
	flex-direction: column;
	gap: 0.75rem; /* 12px */
	padding-top: 1.75rem; /* 28px */
	border-top: 3px solid var(--step-colour);
}
.process-step:nth-child(4n + 2) { --step-colour: var(--colour-brand-accent-text); }
.process-step:nth-child(4n + 3) { --step-colour: var(--colour-brand-alt); }
.process-step:nth-child(4n + 4) { --step-colour: var(--colour-brand-deep); }
.process-step-number {
	font-size: var(--fs-number);
	font-weight: 600;
	line-height: 1;
	color: var(--step-colour);
}
.process-step-title {
	margin: 0;
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 1.3;
}
.process-step-text {
	margin: 0;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--colour-text-muted);
}

/* ---------- Chameleon family section ---------- */
/* Fire Stopping block (Figma 67:320): logo, eyebrow, heading, text and link (650) beside a
   near-square image (480) on the Fire Stopping gradient. Mobile: text above the image.
   White text and the reversed logo, as designed (contrast on the yellow is low by choice). */
.family-section {
	--eyebrow-colour: var(--colour-inverse);
	--eyebrow-tick: var(--colour-inverse);
	--arrow-link-colour: var(--colour-inverse);
	--arrow-link-hover: var(--colour-inverse);
	--arrow-link-focus: var(--colour-inverse);
	padding-block: var(--section-gap);
	background: var(--gradient-fire);
	color: var(--colour-inverse);
}
.family-section-inner {
	display: grid;
	gap: var(--space-5);
	align-items: center;
}
@media (min-width: 60em) {
	.family-section.has-image .family-section-inner {
		grid-template-columns: minmax(0, 650fr) minmax(0, 480fr);
		column-gap: 4.375rem; /* 70px */
	}
}
.family-section-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.125rem; /* 18px */
}
.family-section-logo {
	display: block;
	width: var(--logo-width); /* same as the header logo: 150 → 256px */
	height: auto;
	margin-bottom: var(--space-6); /* 3rem */
}
.family-section-title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.14;
	color: inherit;
}
.family-section-text {
	max-width: 70ch;
	font-size: var(--fs-medium);
	line-height: var(--lh-base);
}
.family-section-text > * { margin: 0 0 1.6em; }
.family-section-text > :last-child { margin-bottom: 0; }
.family-section-link-wrap { margin: 0; }
.family-section-image {
	width: 100%;
	aspect-ratio: 24 / 23; /* 480 × 460, as in Figma */
	object-fit: cover;
	border-radius: var(--radius-lg);
}

/* ---------- Service row ---------- */
/* One service (Services page): number, heading and text (580) beside a "What's included"
   card (560) with a ruled checklist. Background per row (has-bg-light-navy / has-bg-light-teal,
   as content sections); the card is light navy on white rows and white on coloured rows.
   Number colour from has-number-<colour>. Mobile: card under the text. */
.service-row {
	--service-row-bg: var(--colour-surface);
	--service-number: var(--colour-brand);
	--service-card-bg: var(--colour-surface-alt);
	padding-block: var(--section-gap-sm);
	background: var(--service-row-bg);
}
.service-row.has-bg-light-navy {
	--service-row-bg: var(--colour-surface-alt);
	--service-card-bg: var(--colour-surface);
}
.service-row.has-bg-light-teal {
	--service-row-bg: var(--colour-surface-teal);
	--service-card-bg: var(--colour-surface);
}
.service-row.has-number-teal { --service-number: var(--colour-brand-accent-text); }
.service-row.has-number-blue { --service-number: var(--colour-brand-alt); }
.service-row.has-number-purple { --service-number: var(--colour-brand-deep); }
.service-row-inner {
	display: grid;
	gap: var(--space-5);
	align-items: start;
}
@media (min-width: 60em) {
	.service-row.has-list .service-row-inner {
		grid-template-columns: minmax(0, 29fr) minmax(0, 28fr);
		column-gap: 3.75rem; /* 60px */
	}
}
.service-row-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.125rem; /* 18px */
}
.service-row-number {
	font-size: var(--fs-number);
	font-weight: 600;
	line-height: 1;
	color: var(--service-number);
}
.service-row-title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.16;
}
.service-row-text {
	max-width: 70ch;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--colour-text-muted);
}
.service-row-text > * { margin: 0 0 1.6em; }
.service-row-text > :last-child { margin-bottom: 0; }
.service-row-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: clamp(1.5rem, 1.2065rem + 1.3043vw, 2.25rem) clamp(1.5rem, 1.2065rem + 1.3043vw, 2.25rem) 1.75rem; /* 24 → 36px */
	border-radius: var(--radius-lg);
	background: var(--service-card-bg);
}
.service-row-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.service-row-list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.875rem; /* 14px */
	border-bottom: 1px solid var(--colour-line);
	font-size: var(--fs-base);
	line-height: 1.5;
	color: var(--colour-ink);
}
.service-row-list li:last-child { border-bottom: 0; }
.service-row-list li::before {
	content: "";
	flex: none;
	inline-size: 7px;
	block-size: 7px;
	border-radius: 4px;
	background: var(--colour-brand-accent);
}

/* ---------- CAT section ---------- */
/* "CAT A, CAT B and CAT C" (Services page): heading block, three translucent cards and a
   closing line on the tinted brand gradient (as the Home purpose band). */
.cat-section {
	--eyebrow-colour: var(--colour-brand-accent-light);
	padding-block: var(--section-gap);
	background: var(--gradient-brand-tinted);
	color: var(--colour-purpose-text);
}
.cat-section-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-6); /* 48px */
}
.cat-section-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem; /* 14px */
}
.cat-section-title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.16;
	color: var(--colour-inverse);
}
.cat-section-text {
	max-width: 50rem; /* 800px */
	margin: 0;
	font-size: var(--fs-medium);
	line-height: var(--lh-base);
}
.cat-cards {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 48em) {
	.cat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cat-card {
	display: flex;
	flex-direction: column;
	gap: 0.875rem; /* 14px */
	padding: var(--space-5);
	border: 1px solid var(--colour-cat-card-line);
	border-radius: var(--radius-lg);
	background: var(--colour-cat-card-bg);
}
.cat-card-title {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	margin: 0;
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 1.3;
	color: var(--colour-inverse);
}
.cat-card-label {
	font-size: var(--fs-number);
	line-height: 1;
	color: var(--colour-brand-accent-light);
}
.cat-card-text {
	margin: 0;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
}

/* ---------- Sectors section ---------- */
/* "Different spaces. Different demands." (Services page): navy band styled like the highlight
   panel (title, then a large teal statement), then up to three cards laid out like the Home
   project cards (.project-tile.is-card): 4:3 photo, text underneath, one stretched link.
   1 column, 3 from 48em, with the Home grid's gaps. */
.sectors-section {
	--eyebrow-colour: var(--colour-brand-accent);
	padding-block: var(--section-gap);
	background: var(--colour-band);
}
.sectors-section-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-6); /* 48px */
}
.sectors-section-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.625rem; /* 26px, as the highlight */
}
.sectors-section-title,
.sectors-section-statement {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.14;
}
.sectors-section-title { color: var(--colour-inverse); }
.sectors-section-statement {
	max-width: 62.5rem; /* 1000px */
	color: var(--colour-brand-accent);
}
.sector-tiles {
	display: grid;
	gap: var(--space-6) var(--space-5); /* 48px rows, 32px columns, as .project-tiles */
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 48em) {
	.sector-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sector-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.sector-tile-media {
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--colour-sector-tile-bg);
}
.sector-tile-image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3; /* as the Home project cards */
	object-fit: cover;
	transition: transform 0.3s ease;
}
.sector-tile:hover .sector-tile-image { transform: scale(1.03); }
.sector-tile-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.625rem; /* 10px */
}
.sector-tile-title {
	margin: 0;
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 1.25;
	color: var(--colour-inverse);
}
.sector-tile-line {
	margin: 0;
	font-size: var(--fs-base);
	line-height: 1.55;
	color: var(--colour-hero-text);
}
.sector-tile-link {
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--colour-brand-accent); /* same teal as the statement: 5.9:1 on navy */
	text-decoration: none;
	text-underline-offset: 0.2em;
}
.sector-tile-link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
}
.sector-tile:hover .arrow-link-arrow { transform: translateX(3px); }
/* Keep the teal on hover / focus (the global a:hover would turn it navy); underline instead. */
.sector-tile:hover .sector-tile-link,
.sector-tile-link:hover,
.sector-tile-link:focus {
	color: var(--colour-brand-accent);
	text-decoration: underline;
}
.sector-tile-link:focus-visible { outline: none; }
.sector-tile-link:focus-visible::after {
	outline: 3px solid var(--colour-brand-accent);
	outline-offset: 6px;
}

/* ---------- Clients section ---------- */
/* "Our clients" logo strip (Site Options → Clients; on Home): navy band, large teal heading
   (as the sectors statement), then white logos centred in equal cells, after Tracy's reference.
   2 columns, 3 from 36em, 6 from 64em (flex, so a short last row is centred). Logos are capped by width and height (smaller below
   64em) so wordmarks and square marks read at a similar weight. */
.clients-section {
	--client-logo-width: 8.5rem;  /* 136px on phones and tablets */
	--client-logo-height: 3.5rem; /* 56px */
	padding-block: var(--section-gap);
	background: var(--colour-band);
}
.clients-section-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.clients-section-title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.14;
	color: var(--colour-brand-accent);
}
.client-logos {
	--client-cols: 2;
	--client-gap: var(--space-5);
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* a short last row sits in the middle */
	align-items: center;
	gap: var(--client-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 36em) {
	.client-logos { --client-cols: 3; }
}
@media (min-width: 64em) {
	.clients-section {
		--client-logo-width: 11rem; /* 176px */
		--client-logo-height: 5rem; /* 80px */
	}
	.client-logos {
		--client-cols: 6;
		row-gap: var(--space-7);
	}
}
.client-logo {
	flex: 0 0 calc((100% - (var(--client-cols) - 1) * var(--client-gap)) / var(--client-cols));
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--client-logo-height);
}
.client-logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}
.client-logo-link:hover { opacity: 0.75; }
.client-logo-image {
	display: block;
	width: auto;
	height: auto;
	max-width: calc(min(100%, var(--client-logo-width)) * var(--client-logo-scale, 1));
	max-height: calc(var(--client-logo-height) * var(--client-logo-scale, 1)); /* per-logo Size field */
}

/* ---------- Statement section ---------- */
/* Our Purpose: text (580) beside a large teal statement with a teal rule. Mobile: stacked. */
.statement-section { padding-block: var(--section-gap); }
.statement-section-inner {
	display: grid;
	gap: var(--space-5);
	align-items: center;
}
@media (min-width: 60em) {
	.statement-section.has-statement .statement-section-inner {
		grid-template-columns: minmax(0, 29fr) minmax(0, 28fr);
		column-gap: 3.75rem; /* 60px */
	}
}
.statement-section-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.125rem; /* 18px */
}
.statement-section-title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.16;
}
.statement-section-text {
	max-width: 70ch;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--colour-text-muted);
}
.statement-section-text > * { margin: 0 0 1.6em; }
.statement-section-text > :last-child { margin-bottom: 0; }
.statement-section-statement {
	margin: 0;
	padding-inline-start: 2.25rem; /* 36px */
	border-inline-start: 4px solid var(--colour-brand-accent);
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.2;
	color: var(--colour-brand-accent-text);
}

/* ---------- Project feature section ---------- */
/* Our Purpose: heading, one featured project tile (shared .project-tile.is-featured), then the
   project's testimonial as a full-width card (shared testimonial card styles). */
.project-feature-section { padding-block: var(--section-gap); }
.project-feature-section-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-6); /* 48px */
}
.project-feature-section-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem; /* 14px */
}
.project-feature-section-title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.16;
}
.project-feature-section-quote .testimonial {
	padding: clamp(1.5rem, 0.9783rem + 2.3188vw, 3rem); /* 24 → 48px */
}
.project-feature-section-quote .testimonial-quote { font-size: var(--fs-quote-large); } /* full-width feature quote: a step larger */

/* ---------- Stories section ---------- */
/* Our Purpose "The difference it makes": story cards (photo, impact figure, quote, caption),
   2 columns from 48em, on grey. */
.stories-section {
	padding-block: var(--section-gap);
	background: var(--colour-surface-alt);
}
.stories-section-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.stories-section-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
}
.stories-section-title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.16;
}
.stories-section-intro {
	max-width: 50rem; /* 800px */
	margin: 0;
	font-size: var(--fs-medium);
	line-height: var(--lh-base);
	color: var(--colour-text-muted);
}
.story-cards {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 48em) {
	.story-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.story-card-inner {
	height: 100%;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--colour-line);
	border-radius: var(--radius-lg);
	background: var(--colour-surface);
}
.story-card-image {
	display: block;
	width: 100%;
	aspect-ratio: 588 / 330;
	object-fit: cover;
}
.story-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.875rem; /* 14px */
	padding: var(--space-5);
}
.story-card-figure {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
}
.story-card-figure-value {
	font-size: var(--fs-number);
	font-weight: 600;
	line-height: 1;
	color: var(--colour-brand-accent-text);
}
.story-card-figure-label {
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--colour-ink);
}
.story-card-quote {
	margin: 0;
	font-size: var(--fs-medium);
	line-height: 1.5;
	color: var(--colour-ink);
}
.story-card-caption {
	font-size: var(--fs-xsmall);
	font-weight: 500;
	color: var(--colour-text-muted);
}

/* ---------- Community section ---------- */
/* Our Purpose "Part of something bigger": tinted brand gradient (as the Home purpose band),
   heading, rounded labels, text and a white arrow link. */
.community-section {
	--eyebrow-colour: var(--colour-brand-accent-light);
	--arrow-link-colour: var(--colour-inverse);
	--arrow-link-hover: var(--colour-inverse);
	--arrow-link-focus: var(--colour-inverse);
	padding-block: var(--section-gap);
	background: var(--gradient-brand-tinted);
	color: var(--colour-purpose-text);
}
.community-section-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-6);
}
.community-section-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
}
.community-section-title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.16;
	color: var(--colour-inverse);
}
.community-section-intro,
.community-section-text {
	max-width: 50rem; /* 800px */
	margin: 0;
	font-size: var(--fs-medium);
	line-height: var(--lh-base);
}
.community-section-text > * { margin: 0 0 1.6em; }
.community-section-text > :last-child { margin-bottom: 0; }
.community-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	max-width: 62.5rem; /* 1000px */
	margin: 0;
	padding: 0;
	list-style: none;
}
.community-pill {
	padding: 0.75rem 1.375rem; /* 12px 22px */
	border: 1px solid var(--colour-pill-line);
	border-radius: var(--radius-pill);
	background: var(--colour-pill-bg);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1.4;
	color: var(--colour-inverse);
}
.community-section-link-wrap { margin: 0; }

/* ---------- Contact ---------- */
/* Contact page (Figma 247:68): form card (680) beside the details column (460) on grey.
   Mobile: form first, then the details. */
.contact-section {
	padding-block: var(--section-gap-sm) var(--section-gap);
	background: var(--colour-surface-alt);
}
.contact-section-inner {
	display: grid;
	gap: var(--space-6);
	align-items: start;
}
@media (min-width: 60em) {
	.contact-section-inner {
		grid-template-columns: minmax(0, 68fr) minmax(0, 46fr);
		column-gap: 3.75rem; /* 60px */
	}
}
.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: clamp(1.5rem, 0.9783rem + 2.3188vw, 3rem); /* 24 → 48px */
	border-radius: var(--radius-lg);
	background: var(--colour-surface);
}
.contact-form-header {
	display: flex;
	flex-direction: column;
	gap: 0.625rem; /* 10px */
}
.contact-form-title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.16;
}
.contact-form-text {
	margin: 0;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--colour-text-muted);
}
.contact-form-note {
	font-size: var(--fs-xsmall);
	line-height: 1.5;
	color: var(--colour-text-muted);
}
.contact-form-note > * { margin: 0; }
.contact-form-note a {
	color: inherit;
	text-decoration: underline;
}
.contact-details {
	display: flex;
	flex-direction: column;
	gap: 1.75rem; /* 28px */
}
.contact-details-photo {
	width: 100%;
	aspect-ratio: 460 / 319;
	object-fit: cover;
	border-radius: var(--radius-lg);
}
/* Rule between the blocks, not above the first one under the photo. */
.contact-details-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.625rem; /* 10px */
}
.contact-details-block + .contact-details-block {
	padding-top: 1.75rem;
	border-top: 1px solid var(--colour-line);
}
.contact-details-block > p { margin: 0; }
.contact-details-phone {
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.25;
}
.contact-details-phone a { color: var(--colour-ink); }
.contact-details-mobile {
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--colour-ink);
}
.contact-details-mobile a { color: inherit; }
.contact-details-email {
	font-size: var(--fs-base);
	font-weight: 600;
	overflow-wrap: anywhere;
}
.contact-details-block a:hover,
.contact-details-block a:focus { text-decoration: underline; }
.contact-details-block a:focus-visible {
	outline: 2px solid var(--colour-focus);
	outline-offset: 3px;
}
.contact-details-text {
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--colour-text-muted);
}

/* ---------- WPForms (Contact form) ---------- */
/* WPForms' "modern" styling is driven by --wpforms-* variables that it prints inline on :root
   and on the form's ID. Re-point them at the theme tokens here; !important is needed because
   the ID-level block would otherwise win. A few rules the variables don't cover follow. */
.contact-form .wpforms-container {
	--wpforms-field-border-radius: 8px !important;
	--wpforms-field-border-color: var(--colour-field-line) !important;
	--wpforms-field-border-color-spare: var(--colour-field-line) !important;
	--wpforms-field-background-color: var(--colour-surface) !important;
	--wpforms-field-text-color: var(--colour-ink) !important;
	--wpforms-field-menu-color: var(--colour-surface) !important;
	--wpforms-field-size-input-height: 52px !important;
	--wpforms-field-size-font-size: var(--fs-base) !important;
	--wpforms-field-size-line-height: 1.5 !important;
	--wpforms-field-size-padding-h: 16px !important;
	--wpforms-field-size-input-spacing: 8px !important;   /* label → input */
	--wpforms-field-size-sublabel-spacing: 6px !important;
	--wpforms-label-color: var(--colour-ink) !important;
	--wpforms-label-sublabel-color: var(--colour-text-muted) !important;
	--wpforms-label-error-color: var(--colour-error) !important;
	--wpforms-label-size-font-size: var(--fs-small) !important;
	--wpforms-label-size-line-height: 1.4 !important;
	--wpforms-label-size-sublabel-font-size: var(--fs-xsmall) !important;
	--wpforms-label-size-sublabel-line-height: 1.4 !important;
	--wpforms-button-background-color: var(--colour-hero-button-primary) !important;
	--wpforms-button-border-color: var(--colour-hero-button-primary) !important;
	--wpforms-button-text-color: var(--colour-inverse) !important;
	--wpforms-button-border-radius: var(--radius-pill) !important;
	--wpforms-button-size-height: 54px !important;
	--wpforms-button-size-padding-h: 30px !important;
	--wpforms-button-size-font-size: var(--fs-base) !important;
	--wpforms-button-size-margin-top: 8px !important;
	--wpforms-page-break-color: var(--colour-hero-button-primary) !important;
	margin: 0 !important;
	font-family: inherit;
}
.contact-form .wpforms-container .wpforms-field {
	padding-block: 0 1.5rem; /* 24px between fields */
}
.contact-form .wpforms-container .wpforms-field-label,
.contact-form .wpforms-container .wpforms-field legend {
	font-weight: 500;
}
.contact-form .wpforms-container .wpforms-required-label {
	color: inherit;
	font-weight: 500;
}
/* WPForms sizes fields Small / Medium / Large (60% for medium); in the card they all run full width. */
.contact-form .wpforms-container .wpforms-field input.wpforms-field-medium,
.contact-form .wpforms-container .wpforms-field select.wpforms-field-medium,
.contact-form .wpforms-container .wpforms-field textarea.wpforms-field-medium,
.contact-form .wpforms-container .wpforms-field .wpforms-field-row.wpforms-field-medium {
	max-width: 100%;
}
.contact-form .wpforms-container .wpforms-form .wpforms-field textarea {
	height: 10rem; /* 160px, as in Figma */
}
.contact-form .wpforms-container input:focus,
.contact-form .wpforms-container textarea:focus {
	border-color: var(--colour-focus);
	box-shadow: 0 0 0 1px var(--colour-focus);
}
.contact-form .wpforms-container button[type="submit"] {
	font-weight: 600;
	transition: background-color 0.2s ease;
}
.contact-form .wpforms-container button[type="submit"]:hover,
.contact-form .wpforms-container button[type="submit"]:focus {
	background: var(--colour-hero-button-primary-hover);
}
.contact-form .wpforms-container button[type="submit"]:focus-visible {
	outline: 2px solid var(--colour-focus);
	outline-offset: 3px;
}
.contact-form .wpforms-confirmation-container-full {
	margin: 0;
	padding: var(--space-4);
	border: 1px solid var(--colour-brand-accent);
	border-radius: var(--radius);
	background: var(--colour-surface-alt);
	color: var(--colour-ink);
}




/* ---------- FAQs ---------- */
/* template-parts/faq-list.php on standard pages (page.php): native <details> boxes, each
   question an h2, with a teal + / − marker. The open box picks up a teal border. */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-5);
}
.faq-item {
	border: 1px solid var(--colour-line);
	border-radius: var(--radius-lg);
	background: var(--colour-surface);
}
.faq-item[open] { border-color: var(--colour-brand-accent); }
.faq-item-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: 1.125rem 1.5rem; /* 18px 24px */
	border-radius: inherit;
	cursor: pointer;
	list-style: none;
}
.faq-item-summary::-webkit-details-marker { display: none; }
.faq-item-summary::after {
	content: "+";
	flex: none;
	font-size: var(--fs-h3);
	font-weight: 400;
	line-height: 1;
	color: var(--colour-brand-accent-text);
}
.faq-item[open] > .faq-item-summary::after { content: "\2212"; } /* minus */
.faq-item-summary:hover .faq-item-question { color: var(--colour-brand-accent-text); }
.faq-item-summary:focus-visible {
	outline: 2px solid var(--colour-focus);
	outline-offset: 3px;
}
.faq-item-question {
	margin: 0;
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 1.35;
	transition: color 0.2s ease;
}
.faq-item-answer {
	padding: 0 1.5rem 1.5rem;
	line-height: var(--lh-base);
	color: var(--colour-text-muted);
}
.faq-item-answer > * { margin: 0 0 1em; }
.faq-item-answer > :last-child { margin-bottom: 0; }