/* =========================================================
   Power to Change — main stylesheet

   Every colour is a CSS custom property. A reskin changes ONLY
   the BRAND COLOURS group below (plus the logo). Nothing outside
   :root should hard-code a colour — always reference a variable.

   Brand colours and font are set from the Power to Change brand
   palette. Spacing, type scale and layout values are still the
   starter placeholders until the Figma variables arrive.
   ========================================================= */

:root {

	/* -----------------------------------------------------
	   BRAND COLOURS  —  the only tokens a reskin changes
	   ----------------------------------------------------- */

	/* Brand palette (names as in the brand guidelines) */
	--colour-blue: #408bff;
	--colour-dark-blue: #0f57ff;
	--colour-teal: #66c8a6;
	--colour-dark-green: #325c61;
	--colour-yellow: #e4e547;
	--colour-purple: #b2adcf;
	--colour-dark-purple: #7b6bcf;
	--colour-black: #002c33;
	--colour-white: #ffffff;
	--colour-deep-teal: #0d414a; /* not in the brand guidelines: search panel in Figma */
	--colour-purple-light: color-mix(in srgb, var(--colour-purple) 25%, var(--colour-white)); /* ≈ #EBEBF5, Figma layout background */

	/* Roles — point at the palette above */
	--colour-brand: var(--colour-dark-blue);
	--colour-brand-accent: var(--colour-blue);    /* decorative / large text only (3.3:1 on white) */
	--colour-ink: var(--colour-black);            /* primary text            */
	--colour-ink-muted: var(--colour-dark-green); /* secondary text          */
	--colour-line: color-mix(in srgb, var(--colour-black) 27%, var(--colour-white));       /* borders / rules (≈ Figma #B9C7C9) */
	--colour-surface: var(--colour-white);        /* page background         */
	--colour-surface-alt: color-mix(in srgb, var(--colour-black) 4%, var(--colour-white)); /* alternating sections */
	--colour-inverse: var(--colour-white);        /* text on brand colour    */
	--colour-inverse-muted: color-mix(in srgb, var(--colour-white) 85%, var(--colour-black)); /* secondary text on dark */
	--colour-overlay: color-mix(in srgb, var(--colour-black) 35%, transparent); /* darkens background images */
	--colour-hero-overlay: color-mix(in srgb, var(--colour-black) 50%, transparent); /* hero: keeps white display text ≥ 3:1 even over sky */

	/* Semantic aliases — reference the roles above */
	--colour-text: var(--colour-ink);
	--colour-text-muted: var(--colour-ink-muted);
	--colour-background: var(--colour-surface);
	--colour-link: var(--colour-brand);           /* Dark Blue, 5.5:1 on white */
	--colour-link-hover: var(--colour-ink);
	--colour-focus: var(--colour-brand);

	/* -----------------------------------------------------
	   TYPE
	   ----------------------------------------------------- */
	--font-body: "Rethink Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: var(--font-body);
	--fw-regular: 400;
	--fw-semibold: 600;
	--fw-extrabold: 800;
	--fw-heading: var(--fw-extrabold);

	/* Fluid type: every size scales between a 360px and 1280px viewport.
	   Body sizes move a px or two; headings grow a lot.
	   clamp(min, intercept rem + slope vw, max). Keep the rem part so text still zooms.
	   One size per step: sizes within a few px of each other share a token, so layouts
	   built side by side match (desktop: 15 / 16 / 18 / 26 / 29 / 37 / 48 / 60 / 82).
	   Heading sizes (card and up) are about 15% under Figma at desktop, at the client's request;
	   the mobile minimums are unchanged. */
	--fs-xsmall: clamp(0.75rem, 0.7255rem + 0.1087vw, 0.8125rem);    /* 12 → 13px  floating field labels */
	--fs-small: clamp(0.875rem, 0.8506rem + 0.1087vw, 0.9375rem);    /* 14 → 15px  footer legal (Figma 15) */
	--fs-base: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);           /* 16 → 18px  body, menus, form inputs (Figma 17–18). Never below 16px, so iOS doesn't zoom inputs */
	--fs-lead: clamp(1.125rem, 1.0761rem + 0.2174vw, 1.25rem);        /* 18 → 20px  larger body copy, card text (Figma 20 / 26) */
	--fs-button: 1.1875rem;                                           /* 19px       .button: must stay ≥ 18.66px, see .button */
	--fs-intro: clamp(1.25rem, 1.1033rem + 0.6522vw, 1.625rem);       /* 20 → 26px  overviews, questions, hero panel text, statistic text (Figma 26–28) */
	--fs-card: clamp(1.5rem, 1.2554rem + 1.0870vw, 2.125rem);         /* 24 → 34px  card titles, quotes, key points, subtitles (Figma 32–36; card title 34 / 40) */
	--fs-h2: clamp(1.625rem, 1.3462rem + 1.2391vw, 2.3375rem);        /* 26 → 37.4px  layout titles and big quotes (Figma 40–46; 15% under Figma's 44 at desktop, 4 Nov 2026, under review) */
	--fs-panel-title: clamp(1.75rem, 1.0652rem + 3.0435vw, 3.5rem);   /* 28 → 56px  hero panel heading (Figma 56–60) */
	--fs-stat: clamp(2.75rem, 2.1141rem + 2.8261vw, 4.375rem);        /* 44 → 70px  statistic figures (Figma 70) */
	--fs-h4: var(--fs-lead);
	--fs-h3: var(--fs-intro);
	--fs-h1: clamp(2.125rem, 1.1957rem + 4.1304vw, 4.5rem);           /* 34 → 72px */
	--fs-display: clamp(2.5rem, 1.1304rem + 6.0870vw, 6rem);          /* 40 → 96px  hero title (Figma 96) */
	--lh-base: 1.6;
	--lh-heading: 1.2;
	--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, 8vw, 6rem);

	/* -----------------------------------------------------
	   LAYOUT
	   ----------------------------------------------------- */
	--container-max: 81.625rem; /* 1306px: Figma's 1242px content width + 2 × 32px padding */
	--container-pad: clamp(1rem, 4vw, 2rem);
	--radius: 4px;
}

/* ---------- 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);
	font-weight: var(--fw-regular);
	line-height: var(--lh-base);
	color: var(--colour-text);
	background: var(--colour-background);
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: var(--fw-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); }

b,
strong { font-weight: var(--fw-semibold); }

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

a {
	color: var(--colour-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
a:hover,
a:focus {
	color: var(--colour-link-hover);
}

:focus-visible {
	outline: 2px solid var(--colour-focus);
	outline-offset: 2px;
}

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 ---------- */
/* Mobile: logo, Menu and Search buttons; the nav opens as a full-width panel below the bar.
   Desktop (80em+): nav inline, dropdowns on hover or via the chevron buttons.
   The search panel (#site-search) opens under the bar at every size. */
.site-header {
	--colour-focus: var(--colour-white);
	position: relative;
	z-index: 100;
	background: var(--colour-black);
	color: var(--colour-inverse);
}
.site-header-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--container-pad);
}
.site-logo {
	display: block;
	flex: none;
	width: clamp(9.5rem, 16vw, 14.625rem);
	margin-inline-end: auto;
}
.site-logo img {
	width: 100%;
	height: auto;
}
.menu-toggle,
.search-toggle,
.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.menu-toggle,
.search-toggle {
	min-width: 2.75rem;
	min-height: 2.75rem;
}
.menu-toggle {
	gap: var(--space-2);
	padding-inline: var(--space-2);
	font-size: var(--fs-lead);
	font-weight: var(--fw-semibold);
}
.menu-toggle-close,
.menu-toggle[aria-expanded="true"] .menu-toggle-open {
	display: none;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-close {
	display: inline;
}
.search-toggle img {
	width: 1.1875rem;
	height: 1.1875rem;
}
.menu-toggle:hover,
.menu-toggle[aria-expanded="true"],
.search-toggle:hover,
.search-toggle[aria-expanded="true"] {
	color: var(--colour-yellow);
}

/* Nav: mobile panel first */
.site-nav {
	flex-basis: 100%;
	order: 1; /* below the bar's buttons on mobile */
}
.has-js .site-nav:not(.is-open) {
	display: none;
}
.site-nav-menu,
.site-nav-menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav-menu > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-block-start: 1px solid var(--colour-dark-green);
}
.site-nav-menu a {
	color: var(--colour-inverse);
	text-decoration: none;
}
.site-nav-menu > li > a {
	flex: 1;
	padding-block: var(--space-3);
	font-size: var(--fs-lead);
	font-weight: var(--fw-semibold);
	line-height: 1.25;
}
.site-nav-menu a:hover,
.site-nav-menu a:focus-visible {
	color: var(--colour-yellow); /* 11.1:1 on Black */
	text-decoration: underline;
}
.site-nav-menu > li.is-open > a {
	color: var(--colour-yellow);
}
.submenu-toggle {
	min-width: 2.75rem;
	min-height: 2.75rem;
}
.submenu-toggle-icon {
	transition: transform 0.15s ease;
}
.site-nav-menu > li.is-open > .submenu-toggle {
	color: var(--colour-yellow);
}
.site-nav-menu > li.is-open > .submenu-toggle .submenu-toggle-icon {
	transform: rotate(180deg);
}
.site-nav-menu .sub-menu {
	display: none;
	flex-basis: 100%;
	padding: 0 0 var(--space-3) var(--space-3);
}
.site-nav-menu > li.is-open > .sub-menu {
	display: block;
}
.site-nav-menu .sub-menu li + li {
	margin-block-start: 0.625rem;
}
.site-nav-menu .sub-menu a {
	display: block;
	font-size: var(--fs-base); /* Figma 16 */
	font-weight: var(--fw-semibold);
	line-height: 1.25;
}

/* Search panel */
.site-search {
	padding: var(--space-5) var(--container-pad);
	background: var(--colour-deep-teal);
}
.site-search[hidden] {
	display: none;
}
.site-search-form {
	display: flex;
	gap: var(--space-2);
	max-width: 36.1875rem;
	margin-inline-start: auto;
}
.site-search-input {
	flex: 1;
	min-width: 0;
	min-height: 3.125rem;
	padding: 0 0.75rem;
	border: 0;
	border-radius: 0;
	appearance: none;
	background: var(--colour-white);
	color: var(--colour-ink);
	font: inherit;
	font-size: var(--fs-lead);
}
/* Focus ring drawn inside the field in Dark Blue (5.5:1 on White), so it reads as the field's
   own focus state rather than a white stroke floating outside it. */
.site-search-input:focus-visible {
	outline: 3px solid var(--colour-brand);
	outline-offset: -3px;
}
.site-search-form .button {
	flex: none;
}

@media (min-width: 80em) {
	.site-header-bar {
		flex-wrap: nowrap;
		gap: clamp(1rem, 2.4vw, 2.25rem);
		padding-block: 1.75rem;
	}
	.menu-toggle {
		display: none;
	}
	.site-nav {
		flex-basis: auto;
		order: 0;
	}
	.has-js .site-nav:not(.is-open) {
		display: block;
	}
	.site-nav-menu {
		display: flex;
		align-items: center;
		gap: clamp(1rem, 7.28vw - 4.4625rem, 2.25rem); /* 16px at 1200, 35px at the 1461 design width */
	}
	.site-nav-menu > li {
		position: relative;
		flex-wrap: nowrap;
		border: 0;
	}
	.site-nav-menu > li > a {
		padding-block: var(--space-2);
		white-space: nowrap;
	}
	.submenu-toggle {
		min-width: 1.5rem;
		min-height: 1.5rem;
	}
	.submenu-toggle-icon {
		width: 1.5rem;
		height: 1.5rem;
	}
	.site-nav-menu > li.is-open > .submenu-toggle .submenu-toggle-icon {
		transform: none;
	}
	/* Dropdown: hangs from the item, text lines up with the parent label */
	.site-nav-menu .sub-menu {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: -1.0625rem;
		width: 12.1875rem;
		padding: 0.875rem 1.0625rem 1.25rem;
		background: var(--colour-black);
	}
	.site-nav-menu > li.is-open > .sub-menu {
		display: block;
	}
	.search-toggle {
		margin-inline-start: var(--space-2);
	}
	.site-search {
		padding: 2.625rem 2.625rem 2.875rem var(--container-pad); /* 138px panel, input 42px from the right as in Figma */
	}
}
@media (min-width: 80em) and (hover: hover) {
	.site-nav-menu > li:hover > a,
	.site-nav-menu > li:hover > .submenu-toggle {
		color: var(--colour-yellow);
	}
	.site-nav-menu > li:hover > .sub-menu {
		display: block;
	}
}

/* ---------- Footer ---------- */
/* Mobile: dark block, then the teal sign-up beneath it.
   Desktop (80em+): flex row, dark area takes one third and the teal sign-up two thirds,
   with the teal panel rising above the dark block by --footer-overhang. */
.site-footer {
	--footer-overhang: 1.875rem;
	margin-block-start: var(--section-gap);
}
.site-footer-inner {
	display: flex;
	flex-direction: column;
	padding-block-end: var(--space-5); /* dark shows beneath the teal panel's rounded corner */
	background: var(--colour-black);
	color: var(--colour-inverse);
	border-start-end-radius: clamp(3rem, 8vw, 6.25rem);
}
.site-footer-main {
	--colour-focus: var(--colour-white);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5) 4rem;
	padding: 2.5rem var(--container-pad) var(--space-5);
}
.site-footer-brand,
.site-footer-links {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-5);
}
.site-footer-logo {
	display: block;
	width: 139px;
	aspect-ratio: 139 / 78;
	overflow: hidden;
}
.site-footer-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center; /* crops the strapline off the landscape logo, as in the design */
}
.site-footer-socials {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-footer-social {
	display: block;
}
.site-footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	line-height: 1.53;
}
.site-footer-menu a {
	color: var(--colour-inverse);
	text-decoration: none;
}
.site-footer-menu a:hover,
.site-footer-menu a:focus-visible {
	color: var(--colour-yellow); /* 11.1:1 on Black */
	text-decoration: underline;
}
.site-footer-legal {
	margin: 0;
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: 1.47;
	color: var(--colour-inverse-muted);
}
.site-footer-signup {
	--colour-focus: var(--colour-ink);
	--colour-link: var(--colour-ink);
	--colour-link-hover: var(--colour-ink);
	padding: var(--space-5) var(--container-pad);
	background: var(--colour-teal);
	color: var(--colour-ink);
	border-end-start-radius: clamp(3rem, 8vw, 5rem);
}
.site-footer-signup-heading {
	margin: 0 0 var(--space-1);
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
}
.site-footer-signup-intro {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-lead);
	line-height: var(--lh-heading);
}
.signup-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem var(--space-3);
}
.signup-field {
	position: relative;
	flex: 1 1 max(16rem, calc(50% - var(--space-3))); /* two per row, one when narrow */
}
.signup-input {
	width: 100%;
	min-height: 2.75rem;
	padding: 1.1rem 0.6875rem 0.2rem;
	border: 0;
	border-radius: 0;
	background: var(--colour-white);
	color: var(--colour-ink);
	font: inherit;
	font-size: var(--fs-base); /* never below 16px, so iOS doesn't zoom on focus */
	line-height: 1.2;
}
/* Label sits inside the field like the design, and moves up once the field is focused or filled. */
.signup-label {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0.6875rem;
	transform: translateY(-50%);
	font-size: var(--fs-lead);
	line-height: 1;
	color: var(--colour-ink);
	pointer-events: none;
	transition: inset-block-start 0.15s ease, font-size 0.15s ease, transform 0.15s ease;
}
.signup-input:focus + .signup-label,
.signup-input:not(:placeholder-shown) + .signup-label {
	inset-block-start: 0.3rem;
	transform: none;
	font-size: var(--fs-xsmall);
}
.signup-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-block-start: var(--space-3);
}
.signup-note {
	margin: 0;
}

@media (min-width: 80em) {
	.site-footer-inner {
		flex-direction: row;
		margin-block-start: var(--footer-overhang);
		padding-block-end: 0;
	}
	.site-footer-main {
		flex: 1 1 0;
		min-width: 0;
		column-gap: clamp(var(--space-3), calc(100vw / 3 - 24.5rem), 4rem); /* shrinks so logo and menu stay side by side */
		padding-block-end: 1.75rem;
	}
	.site-footer-signup {
		flex: 2 1 0;
		min-width: 0;
		margin-block: calc(var(--footer-overhang) * -1) 2.1875rem;
		padding: var(--space-4) 4rem var(--space-3) 3.2rem;
	}
}

/* ---------- 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;
	inset-block-start: var(--space-2);
	inset-inline-start: var(--space-2);
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	padding: var(--space-2) var(--space-3);
	background: var(--colour-brand);
	color: var(--colour-inverse);
	z-index: 1000;
}

/* ---------- Reduced 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 .site-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-block-end: var(--space-5);
}
.page-title {
	margin: 0 0 var(--space-3);
}
.page-content {
	max-width: 70ch; /* readable measure for body copy */
}

/* ---------- Components ---------- */
/* Add one block per component below, each with its own section comment. */

/* ---------- Motion toggle ---------- */
/* Small pause / play button for anything that moves on its own (logo slider, hero video).
   Added by main.js only while there's motion. Outline circle in the current text colour, so
   it's White on dark / image backgrounds and Black on white. Toggle button: fixed name,
   aria-pressed="true" while paused. */
.motion-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
}
.motion-toggle:hover {
	background: color-mix(in srgb, currentColor 15%, transparent);
}
.motion-toggle-play,
.motion-toggle[aria-pressed="true"] .motion-toggle-pause {
	display: none;
}
.motion-toggle[aria-pressed="true"] .motion-toggle-play {
	display: inline;
}

/* ---------- Hero ---------- */
/* Full-width image or video band with the page title; the Yellow panel overlaps its bottom
   edge by --hero-overlap. Media sits under a --colour-hero-overlay tint. */
.hero {
	--hero-overlap: clamp(4rem, 12.7vw, 11.5625rem);
	margin-block-end: var(--section-gap);
}
.hero-band {
	--colour-focus: var(--colour-white);
	position: relative;
	isolation: isolate;
	min-height: clamp(28rem, 56.3vw, 51.4375rem);
	padding-block: clamp(5rem, 15vw, 13.75rem) calc(var(--hero-overlap) + clamp(3rem, 10vw, 9.25rem));
	background: var(--colour-black);
	color: var(--colour-white);
}
.hero-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--colour-hero-overlay);
}
.hero-media {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero-title {
	max-width: 65rem;
	margin: 0;
	color: var(--colour-white);
	font-size: var(--fs-display);
	font-weight: var(--fw-extrabold);
	letter-spacing: 0.02em;
	line-height: 0.9; /* Figma 90 / 100 */
}
.hero .motion-toggle {
	position: absolute;
	inset-block-start: var(--space-4);
	inset-inline-end: var(--container-pad);
}
.hero-panel {
	position: relative;
	max-width: 65.125rem;
	margin-block-start: calc(var(--hero-overlap) * -1);
	padding: clamp(1.5rem, 3.2vw, 2.9375rem) clamp(1.5rem, 3vw, 2.6875rem) clamp(2rem, 4vw, 3.75rem);
	background: var(--colour-yellow);
	color: var(--colour-ink);
	border-end-end-radius: clamp(3rem, 9vw, 8.125rem);
}
.hero-panel-title {
	margin: 0 0 1.1875rem;
	color: var(--colour-ink-muted); /* Dark Green on Yellow 5.5:1 */
	font-size: var(--fs-panel-title);
	font-weight: var(--fw-semibold);
	line-height: 1;
}
.hero-panel-text {
	max-width: 59.375rem;
	margin: 0;
	font-size: var(--fs-intro);
	line-height: 1.36;
}

/* ---------- Layouts ---------- */
/* Every page layout section carries .layout. Without a background it's spaced from its
   neighbours by margin (adjacent margins collapse to one gap). With a background
   (.has-background + --layout-background) the spacing moves inside as padding.
   .has-background also switches on the boxed card treatment by setting the --card-* tokens:
   on a plain (white) layout cards sit unboxed, flush with the content edge. */
.layout {
	margin-block: var(--section-gap);
}
.layout.has-background {
	--card-background: var(--colour-white);
	--card-text: var(--colour-ink);
	--card-pad-inline: 1.375rem;
	--card-pad-block-end: 1.5rem;
	margin-block: 0;
	padding-block: var(--section-gap);
	background: var(--layout-background);
	color: var(--layout-text);
}
/* Dark backgrounds (dark green / blue / purple): white focus ring and links. */
.layout.is-dark {
	--colour-focus: var(--colour-white);
	--colour-link: var(--colour-white);
	--colour-link-hover: var(--colour-yellow);
}
/* Bright backgrounds (yellow / teal): Black links and focus ring (Dark Blue fails on both). */
.layout.is-bright {
	--colour-focus: var(--colour-black);
	--colour-link: var(--colour-ink);
	--colour-link-hover: var(--colour-ink-muted);
}

/* ---------- Post card ---------- */
/* The whole card is clickable through the title link's ::after.
   Unboxed by default; a parent sets --card-background / --card-pad-* to box it
   (see .layout.has-background). */
.post-card {
	--post-card-radius: clamp(3rem, 6vw, 5rem);
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--card-background, transparent);
	color: var(--card-text, inherit);
	border-start-start-radius: var(--post-card-radius); /* so the focus ring follows the image corner */
}
.post-card:has(.post-card-link:focus-visible) {
	outline: 2px solid var(--colour-focus);
	outline-offset: 2px;
}
.post-card-media {
	aspect-ratio: 13 / 9;
	overflow: hidden;
	border-start-start-radius: var(--post-card-radius);
}
.post-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.post-card-body {
	flex: 1;
	padding: 1.0625rem var(--card-pad-inline, 0) var(--card-pad-block-end, 0);
}
.post-card-title {
	margin: 0 0 0.75rem;
	font-size: var(--fs-card);
	font-weight: var(--fw-semibold);
	line-height: 1.18;
}
.post-card-link {
	color: var(--card-link, var(--colour-brand));
	text-decoration: none;
}
.post-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
}
.post-card-link:hover,
.post-card-link:focus {
	color: var(--card-link, var(--colour-brand));
	text-decoration: underline;
}
.post-card-link:focus-visible {
	outline: none; /* the card draws the focus ring */
}
.post-card-excerpt {
	margin: 0;
	font-size: var(--fs-lead);
	line-height: 1.3;
}

/* ---------- Post columns ---------- */
/* One column on small screens, three from 56em. Flexbox, cards stretch to equal height. */
/* On light purple the card titles are Dark Purple instead of Dark Blue. On the white card that's
   ≈ 4.3:1, which passes because card titles are always large text (24px and up). */
.post-columns.has-purple-light-background {
	--card-link: var(--colour-dark-purple);
}
.post-columns-header {
	margin-block-end: clamp(var(--space-5), 5vw, 4.5rem);
}
.post-columns-title {
	margin: 0 0 var(--space-3);
	color: var(--layout-heading, var(--colour-ink-muted));
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	line-height: 1.24;
}
.post-columns-overview {
	margin: 0;
	font-size: var(--fs-intro);
	line-height: 1.3;
}
.post-columns-list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(var(--space-4), 2.5vw, 2.25rem);
}
.post-columns-list > * {
	flex: 1 1 100%;
}
@media (min-width: 56em) {
	.post-columns-list > * {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* ---------- Post card on a panel colour ---------- */
/* .has-panel (post grid): the text sits on the card's panel colour, rounded bottom right per the
   brand rule. The card carries the same corner so its focus ring follows the shape. */
.post-card.has-panel {
	--post-card-panel-radius: clamp(2.5rem, 5vw, 4.5rem);
	--card-link: var(--panel-heading);
	background: transparent;
	color: var(--panel-text);
	border-end-end-radius: var(--post-card-panel-radius);
}
.post-card.has-panel .post-card-body {
	padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.5rem, 2.6vw, 2.25rem) clamp(2rem, 3.6vw, 3rem);
	background: var(--panel-background);
	border-end-end-radius: var(--post-card-panel-radius);
}

/* ---------- Post grid ---------- */
/* Post cards two to a row from 56em (one below), each on its own panel colour. Shares the post
   columns header. An odd last card keeps its half width rather than stretching. */
.post-grid-list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(var(--space-5), 3vw, 2.75rem);
}
.post-grid-list > * {
	flex: 1 1 100%;
}
@media (min-width: 56em) {
	.post-grid-list > * {
		flex: 0 1 calc((100% - clamp(var(--space-5), 3vw, 2.75rem)) / 2);
		min-width: 0;
	}
}

/* ---------- Button ---------- */
/* Primary button: Dark Blue, Blue on hover / focus. Used by the footer sign-up and header search. */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.375rem;
	padding: 0.5rem 1.125rem;
	border: 0;
	border-end-end-radius: 1.25rem;
	background: var(--colour-brand);
	color: var(--colour-inverse);
	font: inherit;
	font-size: var(--fs-button); /* 19px, so ExtraBold counts as large text (≥ 18.66px bold) and white on the Blue hover (3.3:1) passes */
	font-weight: var(--fw-extrabold);
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}
.button:hover,
.button:focus-visible {
	background: var(--colour-brand-accent);
	color: var(--colour-inverse);
}

/* ---------- Statistics ---------- */
/* Coloured boxes (one to three, equal widths via flex: 1 1 0) over an optional full-width image.
   With an image the band carries the spacing, so a coloured layout drops its own padding and
   its colour only shows behind the band's rounded top-left corner. */
.statistics.has-image.has-background {
	padding-block: 0;
}
.statistics-band {
	position: relative;
	isolation: isolate;
}
.statistics.has-image .statistics-band {
	overflow: hidden;
	padding-block: clamp(4rem, 8.7vw, 7.9375rem) clamp(3rem, 6.2vw, 5.6875rem);
	border-start-start-radius: clamp(4rem, 10vw, 9.375rem);
}
.statistics.has-image .statistics-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--colour-overlay);
}
.statistics-image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.statistics-list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(var(--space-4), 2.5vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.statistic {
	flex: 1 1 100%;
	padding: 2.75rem clamp(1.5rem, 2vw, 1.875rem) 2.75rem clamp(1.5rem, 3.2vw, 2.9375rem); /* Figma: 47px left, ~30px right */
	background: var(--statistic-background);
	color: var(--statistic-text);
	border-end-end-radius: clamp(3rem, 6vw, 5rem);
}
.statistic-figure {
	margin: 0 0 var(--space-1);
	font-size: var(--fs-stat);
	font-weight: var(--fw-extrabold);
	letter-spacing: 0.05em;
	line-height: 1;
}
.statistic-description {
	max-width: 40ch; /* keeps a single full-width box readable */
	margin: 0;
	font-size: var(--fs-intro);
	font-weight: var(--fw-semibold);
	line-height: 1.22;
}
@media (min-width: 56em) {
	.statistic {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* ---------- Logo slider ---------- */
/* Static, centred row by default (no JS / reduced motion). main.js adds .is-scrolling, clones
   the logos, adds the motion toggle and the track loops by sliding half its width. Visible logos per viewport:
   2 / 3 / 4 / 5 as the screen widens; items are sized in container units (cqi) of the viewport.
   Logos are white (negative) files; on light backgrounds they're inverted to dark. */
.logo-slider-title {
	margin: 0 0 clamp(var(--space-5), 5vw, 4.5rem);
	color: var(--layout-heading, var(--colour-ink-muted));
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	line-height: 1.13;
}
.logo-slider-viewport {
	--logos-visible: 2;
	--logo-fade: clamp(2.5rem, 10vw, 10rem);
	container-type: inline-size;
	overflow: hidden;
}
.logo-slider-track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.logo-slider-item {
	display: flex;
	flex: 0 0 calc(100cqi / var(--logos-visible));
	align-items: center;
	justify-content: center;
	padding: var(--space-3) clamp(1rem, 2.5vw, 2.5rem);
}
.logo-slider-link {
	display: block;
}
.logo-slider-logo {
	width: auto;
	max-width: min(100%, 16.25rem); /* 260px at most, however wide the screen */
	height: auto;
	max-height: clamp(3.5rem, 6vw, 5.75rem);
}
/* Light backgrounds: invert the white logos to black, then a Brand Black layer with
   mix-blend-mode: lighten keeps the lighter value of each colour channel, so pure black becomes
   exactly --colour-black while greys and the light background are untouched. The whole track is
   isolated on the layout background (one continuous backdrop, so no seams between logos). */
.logo-slider:not(.is-dark) .logo-slider-track {
	isolation: isolate;
	background: var(--layout-background, var(--colour-background));
}
.logo-slider:not(.is-dark) .logo-slider-item {
	position: relative;
}
.logo-slider:not(.is-dark) .logo-slider-item::after {
	content: "";
	position: absolute;
	inset: 1px 0; /* off the track's sub-pixel top / bottom edge, which would show a hairline */
	background: var(--colour-black);
	mix-blend-mode: lighten;
	pointer-events: none;
}
.logo-slider:not(.is-dark) .logo-slider-logo {
	filter: invert(1);
}
/* Scrolling: one row, edges faded out with a mask (fades to whatever background is behind). */
.logo-slider.is-scrolling .logo-slider-viewport {
	mask-image: linear-gradient(to right, transparent, var(--colour-black) var(--logo-fade), var(--colour-black) calc(100% - var(--logo-fade)), transparent);
}
.logo-slider.is-scrolling .logo-slider-track {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	animation: logo-slider-scroll var(--logo-slider-duration, 40s) linear infinite;
}
.logo-slider.is-scrolling .logo-slider-viewport:hover .logo-slider-track,
.logo-slider.is-scrolling .logo-slider-viewport:focus-within .logo-slider-track {
	animation-play-state: paused;
}
.logo-slider.is-paused .logo-slider-track {
	animation-play-state: paused;
}
/* Motion toggle at the far right, lined up with the hero's. On a coloured band it sits in the
   bottom padding, in the corner; with no background it's a row under the logos. */
.logo-slider-controls {
	display: flex;
	justify-content: flex-end;
	margin-block-start: var(--space-2);
	padding-inline: var(--container-pad);
}
/* A coloured band is shallower than other layouts: 60% of --section-gap top and bottom, as
   Figma. While the toggle shows, the bottom keeps at least enough room for it (small screens). */
.logo-slider.has-background {
	position: relative;
	padding-block: calc(var(--section-gap) * 0.6);
}
.logo-slider.has-background.is-scrolling {
	padding-block-end: max(calc(var(--section-gap) * 0.6), 3.75rem);
}
.logo-slider.has-background .logo-slider-controls {
	position: absolute;
	inset-block-end: var(--space-3);
	inset-inline-end: var(--container-pad);
	margin: 0;
	padding: 0;
}
@keyframes logo-slider-scroll {
	to {
		transform: translateX(-50%);
	}
}
@media (min-width: 36em) {
	.logo-slider-viewport {
		--logos-visible: 3;
	}
}
@media (min-width: 56em) {
	.logo-slider-viewport {
		--logos-visible: 4;
	}
}
@media (min-width: 80em) {
	.logo-slider-viewport {
		--logos-visible: 5;
	}
}

/* ---------- Image slider ---------- */
/* Full-width slides stacked in one grid cell; .is-active fades in. Manual only (main.js).
   Desktop (56em+): the annotation and controls sit over the image, lined up with the content
   edge. Mobile: they drop below the image so a short caption doesn't cover a small photo; the
   caption runs full width, flush with the image.
   Without JS (.has-js missing) every slide shows, one after another. */
.image-slider {
	--slider-inset: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
	--slider-radius: clamp(4rem, 10vw, 9.375rem);
	position: relative;
}
.image-slider.has-background {
	padding-block: 0; /* the image fills the band; the colour shows behind the rounded corner */
}
.image-slider-slides {
	display: grid;
}
.image-slider-slide {
	position: relative;
}
.has-js .image-slider-slide {
	grid-area: 1 / 1;
	transition: opacity 0.5s ease, visibility 0.5s;
}
.has-js .image-slider-slide:not(.is-active) {
	visibility: hidden;
	opacity: 0;
}
.image-slider-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-start-start-radius: var(--slider-radius);
}
.image-slider-caption {
	margin: 0; /* mobile: flush with the image's bottom edge and both sides of the screen */
	padding: 1.25rem var(--container-pad) 1.5rem;
	background: var(--slider-panel-background);
	color: var(--colour-white);
	border-end-end-radius: clamp(2.5rem, 4vw, 3.75rem);
}
.image-slider-caption-title {
	margin: 0;
	font-size: var(--fs-intro);
	font-weight: var(--fw-semibold);
	line-height: 1.23;
}
.image-slider-caption-text {
	margin: 0.625rem 0 0;
	font-size: var(--fs-lead);
	line-height: 1.3;
}
.image-slider-controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-4);
	margin: var(--space-3) var(--container-pad) 0;
}
.image-slider-controls[hidden] {
	display: none;
}
.image-slider-dots {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.image-slider-dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 0.3125rem;
	background: var(--colour-line);
	transition: width 0.2s ease;
}
.image-slider-dot.is-active {
	width: 2rem;
	background: var(--colour-yellow);
}
.image-slider-arrow {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	border: 2px solid var(--colour-ink); /* needed on a white page; dropped over the image */
	border-radius: 50%;
	background: var(--colour-white);
	color: var(--colour-ink);
	cursor: pointer;
}
.image-slider-arrow.is-next svg {
	transform: scaleX(-1);
}
.image-slider-arrow:hover {
	background: var(--colour-yellow);
}
/* Two-tone ring so focus shows over any photo: white band, then a Black outline. */
.image-slider-arrow:focus-visible {
	outline: 3px solid var(--colour-black);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--colour-white);
}
@media (min-width: 56em) {
	.image-slider-image {
		aspect-ratio: 1461 / 576; /* 20% shorter than Figma's 1461 / 720, so it takes less room */
	}
	.image-slider-caption {
		position: absolute;
		inset-block-end: 3.5rem;
		inset-inline-start: var(--slider-inset);
		width: min(32.5rem, 45%);
		margin: 0;
		padding: 1.875rem 3rem 2.125rem 2.25rem;
	}
	.image-slider-controls {
		position: absolute;
		inset-block-end: 3.5rem;
		inset-inline-end: var(--slider-inset);
		z-index: 1;
		margin: 0;
	}
	.image-slider-dot {
		background: var(--colour-white);
	}
	.image-slider-dot.is-active {
		background: var(--colour-yellow);
	}
	.image-slider-arrow {
		border-color: transparent;
	}
}
@media (prefers-reduced-motion: reduce) {
	.has-js .image-slider-slide {
		transition: none;
	}
}

/* ---------- Photo quote ---------- */
/* Photo (rounded top-left corner, accent block offset behind it) beside a quote. Flex row from
   56em, photo first (or last with .is-photo-right); stacked below that. The accent colour comes
   in as --photo-quote-accent. */
.photo-quote-inner {
	display: flex;
	flex-direction: column;
	gap: clamp(var(--space-5), 7vw, 6.5625rem);
}
.photo-quote-media {
	position: relative;
	isolation: isolate;
	width: calc(100% - 1.5rem); /* leaves room for the offset block, so nothing overflows on mobile */
	max-width: 33.75rem;
	margin-inline-end: 1.5rem;
	margin-block-end: 1.5rem;
}
.photo-quote-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--photo-quote-accent);
	border-start-start-radius: clamp(4rem, 10vw, 9.375rem);
	transform: translate(1.5rem, 1.5rem);
}
.photo-quote-image {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-start-start-radius: clamp(4rem, 10vw, 9.375rem);
}
.photo-quote-body {
	flex: 1;
	min-width: 0;
	margin: 0;
}
.photo-quote-quote {
	margin: 0;
	font-size: var(--fs-card);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}
/* Decorative opening mark; the alt text after "/" keeps screen readers from announcing it. */
.photo-quote-quote::before {
	content: "\201C" / "";
	display: block;
	height: 0.475em;
	color: var(--photo-quote-accent);
	font-size: clamp(6rem, 3.6rem + 6.7vw, 10rem);
	font-weight: var(--fw-extrabold);
	line-height: 0.69;
}
.photo-quote-quote p {
	margin: 0;
}
.photo-quote-cite {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-block-start: 1.75rem;
}
.photo-quote-name {
	color: var(--layout-heading, var(--colour-ink-muted));
	font-size: var(--fs-lead);
	font-weight: var(--fw-semibold);
	line-height: 1.27;
}
.photo-quote-role {
	font-size: var(--fs-lead);
	line-height: 1.3;
}
@media (min-width: 56em) {
	.photo-quote-inner {
		flex-direction: row;
		align-items: center;
	}
	.photo-quote.is-photo-right .photo-quote-inner {
		flex-direction: row-reverse;
	}
	.photo-quote-media {
		flex: 0 0 min(33.75rem, 43.5%); /* 540px at the 1242px content width, as Figma */
	}
}

/* ---------- Eyebrow ---------- */
/* Small uppercase label above a heading. Colour follows the layout background (Teal on Black). */
.eyebrow {
	margin: 0;
	color: var(--layout-eyebrow, var(--layout-text, var(--colour-ink-muted)));
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.083em; /* Figma 1.5px at 18px */
	line-height: 1.33;
	text-transform: uppercase;
}

/* ---------- Split ---------- */
/* Shared two-column shape (accordion, key points): intro on the left, main content on the right.
   Stacks below 56em; from 56em the intro is 400px of the 1242px content width, as Figma. */
.split {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.split-intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}
.split-title {
	margin: 0;
	color: var(--layout-heading, var(--colour-ink-muted));
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	line-height: 1.13; /* Figma 52 / 46 */
}
.split-text {
	margin: 0;
	color: var(--layout-text, var(--colour-ink));
	font-size: var(--fs-lead);
	line-height: 1.3;
}
@media (min-width: 56em) {
	.split {
		flex-direction: row;
		align-items: flex-start;
		gap: clamp(2.5rem, 6.4vw, 5rem);
	}
	.split-intro {
		flex: 0 0 min(25rem, 32.2%);
	}
	.split-main {
		flex: 1;
		min-width: 0;
	}
}

/* ---------- Panel ---------- */
/* A coloured shape holding text inside a layout (highlight panel, image feature, quote over
   image). Colours come from powertochange_panel_colour() as --panel-* custom properties; the
   layout tokens are re-pointed so shared pieces (.eyebrow) pick them up. */
.panel {
	--colour-focus: var(--colour-black);
	--layout-heading: var(--panel-heading);
	--layout-text: var(--panel-text);
	--layout-eyebrow: var(--panel-eyebrow);
	background: var(--panel-background);
	color: var(--panel-text);
}
.has-dark-panel .panel {
	--colour-focus: var(--colour-white);
}
/* Call-to-action link in a panel: rounded bottom-right, arrow icon, colours swap on hover / focus. */
.panel-link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 3.25rem;
	margin-block-start: 0.625rem; /* on top of the panel's flex gap: text has less line height than the title, so the button sat too close */
	padding: 0.875rem 1.75rem;
	background: var(--panel-button);
	color: var(--panel-button-text);
	border-end-end-radius: 1.5625rem;
	font-size: var(--fs-lead);
	font-weight: var(--fw-extrabold);
	line-height: 1.2;
	text-decoration: none;
}
.panel-link:hover,
.panel-link:focus-visible {
	background: var(--panel-button-text);
	color: var(--panel-button);
}
.panel-link svg {
	flex: 0 0 auto;
}

/* ---------- Highlight panel ---------- */
/* Photo with a coloured panel overlapping it: below 56em the panel tucks up under the photo,
   from 56em it overlaps the photo's right edge by 40px and stands taller than it. */
.highlight-panel-inner {
	display: flex;
	flex-direction: column;
}
.highlight-panel-image {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-start-start-radius: clamp(4rem, 10vw, 9.375rem);
}
.highlight-panel-body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	padding: clamp(2rem, 4.4vw, 4rem) clamp(1.5rem, 4.9vw, 4.5rem) clamp(2.5rem, 4.9vw, 4.5rem) clamp(1.5rem, 4.4vw, 4rem);
	border-end-end-radius: clamp(3rem, 9vw, 8.125rem);
}
.highlight-panel.has-image .highlight-panel-body {
	margin: -3rem 0 0 var(--space-5);
}
.highlight-panel-title {
	margin: 0;
	color: var(--panel-heading);
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	line-height: 1.13; /* Figma 52 / 46 */
}
.highlight-panel-text {
	margin: 0;
	font-size: var(--fs-lead);
	line-height: 1.3; /* 20 / 26, matching the post card text */
}
@media (min-width: 56em) {
	.highlight-panel-inner {
		flex-direction: row;
		align-items: center;
	}
	.highlight-panel-image {
		flex: 0 0 53.15%; /* 660px of the 1242px content width */
		min-width: 0;
		aspect-ratio: 660 / 480;
	}
	.highlight-panel-body {
		flex: 1;
		min-width: 0;
	}
	.highlight-panel.has-image .highlight-panel-body {
		margin: 0 0 0 -2.5rem;
	}
}

/* ---------- Accordion ---------- */
/* Questions are <h3><button aria-expanded>; main.js toggles the answers. Without JS every answer
   shows and the +/- icons are hidden. Closed answers are hidden="until-found" (content-visibility,
   not display), so the answer's spacing sits on an inner wrapper that collapses with it. */
.accordion-image {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-end-end-radius: clamp(3rem, 7vw, 6.25rem);
}
.accordion-items {
	border-block-start: 1px solid var(--colour-line);
}
.accordion-item {
	border-block-end: 1px solid var(--colour-line);
}
.accordion-question {
	margin: 0;
	color: var(--layout-text, var(--colour-ink));
	font-size: var(--fs-intro);
	font-weight: var(--fw-semibold);
	line-height: 1.3; /* Figma 34 / 26 */
}
.accordion-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	width: 100%;
	min-height: 5rem;
	padding: 1.125rem clamp(0.5rem, 2vw, 1.5rem);
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}
.accordion-trigger:hover .accordion-question-text {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}
.accordion-icon {
	display: none;
}
.has-js .accordion-icon {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--colour-teal);
	color: var(--colour-black);
}
.accordion-icon::before,
.accordion-icon::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 0.75rem;
	height: 2px;
	background: currentColor;
	translate: -50% -50%;
}
.accordion-icon::after {
	rotate: 90deg;
}
.accordion-trigger[aria-expanded="true"] .accordion-icon {
	background: var(--colour-black);
	color: var(--colour-yellow);
}
.accordion-trigger[aria-expanded="true"] .accordion-icon::after {
	display: none;
}
.accordion-answer-inner {
	padding: 0 clamp(0.5rem, 2vw, 1.5rem) 1.75rem;
	color: var(--layout-text, var(--colour-ink));
	font-size: var(--fs-lead);
	line-height: 1.3;
}
.accordion-answer-inner > :last-child {
	margin-block-end: 0;
}
@media (min-width: 56em) {
	.accordion-answer-inner {
		padding-inline-end: 5.75rem; /* clear of the icon column, as Figma */
	}
}

/* ---------- Key points ---------- */
/* A list of short points with a coloured marker, divided by faint rules in the text colour.
   On a background the band gets the rounded top-left corner, like the hero and image slider. */
.key-points {
	--key-points-line: color-mix(in srgb, currentColor 22%, transparent);
}
.key-points.has-background {
	border-start-start-radius: clamp(4rem, 10vw, 9.375rem);
}
.key-points-list {
	margin: 0;
	padding: 0;
	color: var(--layout-text, var(--colour-ink));
	list-style: none;
	border-block-start: 1px solid var(--key-points-line);
}
.key-point {
	display: flex;
	gap: clamp(1rem, 2.2vw, 1.75rem);
	padding-block: 1.625rem;
	border-block-end: 1px solid var(--key-points-line);
	font-size: var(--fs-intro); /* as the accordion question */
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}
.key-point::before {
	content: "";
	flex: 0 0 auto;
	width: 0.8em; /* scales with the text: 21px beside 26px */
	height: 0.8em;
	margin-block-start: 0.25em; /* (1.3em line − 0.8em marker) / 2: centred on the first line */
	background: var(--key-points-marker);
	border-end-end-radius: 50%;
}

/* ---------- Quote over image ---------- */
/* Full-width photo band (rounded top-left, Brand Black tint) with the quote panel overlapping
   its bottom edge: the panel starts 150px down a 468px band at desktop, as Figma. */
.quote-image-band {
	position: relative;
	height: clamp(15rem, 32vw, 29.25rem);
	overflow: hidden;
	background: var(--colour-black);
	border-start-start-radius: clamp(4rem, 10vw, 9.375rem);
}
.quote-image-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--colour-overlay);
}
.quote-image-media {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.quote-image-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	max-width: 62.5rem; /* 1000px, as Figma */
	margin: 0;
	padding: clamp(2rem, 3.8vw, 3.5rem) clamp(1.5rem, 8.2vw, 7.5rem) clamp(2.5rem, 4.4vw, 4rem) clamp(1.5rem, 4.9vw, 4.5rem);
	border-end-end-radius: clamp(3rem, 9vw, 8.125rem);
}
.quote-image.has-image .quote-image-panel {
	margin-block-start: clamp(-19.875rem, -21.8vw, -5rem);
}
.quote-image-quote {
	margin: 0;
	color: var(--panel-heading);
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	line-height: 1.25; /* Figma 50 / 40 */
}
/* Decorative opening mark, as the photo quote; the empty alt text keeps screen readers quiet. */
.quote-image-quote::before {
	content: "\201C" / "";
	display: block;
	height: 0.475em;
	margin-block-end: 1.75rem;
	font-size: clamp(6rem, 3.6rem + 6.7vw, 10rem);
	font-weight: var(--fw-extrabold);
	line-height: 0.69;
}
.quote-image-quote p {
	margin: 0;
}
.quote-image-cite {
	display: flex;
	align-items: center;
	gap: 1.125rem;
}
.quote-image-headshot {
	flex: 0 0 auto;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	object-fit: cover;
}
.quote-image-person {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}
.quote-image-name {
	font-size: var(--fs-lead);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}
.quote-image-role {
	font-size: var(--fs-base);
	line-height: 1.33;
}

/* ---------- Image feature ---------- */
/* Full-width photo with a coloured shape over one half (left shape: bottom-right corner rounded;
   right shape: top-left, per the brand rule that only those two corners are ever rounded).
   Below 56em the photo sits on top and the shape tucks up under it, inset from the far side.
   From 56em the photo fills the section and the shape's outer padding lines its text up with
   the container edge (padding percentages resolve against the section's width). */
.image-feature {
	display: flex;
	flex-direction: column;
}
.image-feature-image {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.image-feature-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem; /* as the highlight panel */
	margin: -3rem var(--space-5) 0 0;
	padding: var(--space-6) var(--container-pad) var(--space-6);
	border-end-end-radius: clamp(4rem, 16.4vw, 15rem);
}
.image-feature.is-panel-right .image-feature-panel {
	margin: -3rem 0 0 var(--space-5);
	border-end-end-radius: 0;
	border-start-start-radius: clamp(4rem, 16.4vw, 15rem); /* Brand shape: only top-left or bottom-right corners are rounded */
}
/* Title and text match the highlight panel: the two are the same idea, one full width. */
.image-feature-title {
	max-width: 33rem;
	margin: 0;
	color: var(--panel-heading);
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	line-height: 1.13;
}
.image-feature-text {
	max-width: 33rem;
	margin: 0;
	font-size: var(--fs-lead);
	line-height: 1.3;
}
@media (min-width: 56em) {
	.image-feature {
		position: relative;
		flex-direction: row;
		min-height: clamp(32rem, 49.3vw, 45rem); /* 720px at the 1461px design width */
	}
	.image-feature-image {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}
	.image-feature-panel,
	.image-feature.is-panel-right .image-feature-panel {
		justify-content: center;
		width: 50%;
		margin: 0;
		padding-block: clamp(3rem, 7vw, 6.5rem);
	}
	.image-feature-panel {
		padding-inline: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad))) clamp(2rem, 6.2vw, 5.625rem);
	}
	.image-feature.is-panel-right .image-feature-panel {
		margin-inline-start: auto;
		padding-inline: clamp(2rem, 6.2vw, 5.625rem) max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
	}
}

/* ---------- Image backdrop ---------- */
/* Full-width photo (top-left corner rounded, per the brand rule) with a coloured panel of longer
   copy over it (bottom-right rounded). Below 56em the photo sits on top and the panel tucks up
   under it. From 56em the photo fills the section behind the panel.
   .is-fixed holds the photo still while the page scrolls over it: the image is position: fixed
   (so it works where background-attachment: fixed doesn't) and the section's clip-path cuts it
   to the section's shape. Only with a mouse or trackpad and no reduced-motion preference;
   touch screens and reduced motion keep the photo scrolling with the page. */
.image-backdrop {
	--image-backdrop-radius: clamp(4rem, 10vw, 9.375rem);
	position: relative;
	display: flex;
	flex-direction: column;
}
.image-backdrop-image {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-start-start-radius: var(--image-backdrop-radius);
}
.image-backdrop-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-block-start: -3rem;
	padding: var(--space-6) var(--space-5);
	border-end-end-radius: clamp(3rem, 6.8vw, 6.25rem);
}
.image-backdrop-title {
	margin: 0;
	color: var(--panel-heading);
	font-size: var(--fs-card);
	font-weight: var(--fw-semibold);
	line-height: 1.18; /* as the post card title, 40 / 34 */
}
.image-backdrop-text {
	font-size: var(--fs-lead);
	line-height: 1.3;
}
.image-backdrop-text > :first-child {
	margin-block-start: 0;
}
.image-backdrop-text > :last-child {
	margin-block-end: 0;
}
.image-backdrop-text ul,
.image-backdrop-text ol {
	padding-inline-start: 1.25em;
}
.image-backdrop-text li + li {
	margin-block-start: 0.375em;
}
@media (min-width: 56em) {
	.image-backdrop {
		overflow: hidden;
		padding-block: clamp(3rem, 6.6vw, 6rem) clamp(3.5rem, 8.2vw, 7.5rem); /* 96 above, 120 below: trimmed from the design's 140 / 180 to keep the layout shorter */
		border-start-start-radius: var(--image-backdrop-radius);
	}
	.image-backdrop-image {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
		border-radius: 0;
	}
	.image-backdrop-panel {
		max-width: 45.5rem; /* 728px: 20% wider than the design, so long copy wraps less */
		margin: 0;
		padding: clamp(2rem, 3.4vw, 2.75rem) clamp(2rem, 3.4vw, 2.75rem) clamp(2.5rem, 4.8vw, 4.5rem);
	}
}
@media (min-width: 56em) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.image-backdrop.is-fixed {
		clip-path: inset(0 round var(--image-backdrop-radius) 0 0 0); /* overflow doesn't clip fixed children; clip-path does */
	}
	.image-backdrop.is-fixed .image-backdrop-image {
		position: fixed;
	}
}

/* ---------- Text two column ---------- */
/* Large subtitle beside body copy. On a background the band gets a rounded bottom-right corner
   and Figma's 110px padding. */
.text-columns.has-background {
	padding-block: clamp(3rem, 7.5vw, 6.875rem);
	border-end-end-radius: clamp(4rem, 10vw, 9.375rem);
}
.text-columns-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
.text-columns-subtitle {
	margin: 0;
	color: var(--layout-heading, var(--colour-ink-muted));
	font-size: var(--fs-card);
	font-weight: var(--fw-semibold);
	line-height: 1.28; /* Figma 46 / 36 */
}
.text-columns-body {
	color: var(--layout-text, var(--colour-ink));
	font-size: var(--fs-lead);
	line-height: 1.3;
}
.text-columns-body > :last-child {
	margin-block-end: 0;
}
@media (min-width: 56em) {
	.text-columns-inner {
		flex-direction: row;
		gap: clamp(2.5rem, 6.8vw, 6.25rem);
	}
	.text-columns-subtitle {
		flex: 0 0 42.2%; /* 520px of 1231px, as Figma */
	}
	.text-columns-body {
		flex: 1;
		min-width: 0;
	}
}

/* ---------- Chart ---------- */
/* Title + key finding, the Datawrapper iframe in a light frame, then source and actions, then the
   data table (the chart's text alternative; main.js puts it behind a toggle when there's an embed). */
.chart-inner {
	display: flex;
	flex-direction: column;
	gap: 2.25rem;
}
.chart-header {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
.chart-heading {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}
.chart-title {
	margin: 0;
	color: var(--layout-heading, var(--colour-ink-muted));
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	line-height: 1.2; /* Figma 48 / 40 */
}
.chart-subtitle {
	margin: 0;
	color: var(--layout-text, var(--colour-ink));
	font-size: var(--fs-base);
	line-height: 1.45;
}
.chart-finding {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1.875rem 3rem 2.125rem 2.25rem;
	border-end-end-radius: clamp(3rem, 5.5vw, 5rem);
}
.chart-finding .eyebrow {
	font-size: var(--fs-small);
}
.chart-finding-text {
	margin: 0;
	font-size: var(--fs-intro);
	font-weight: var(--fw-semibold);
	line-height: 1.3; /* Figma 34 / 26 */
}
.chart-frame {
	border: 1px solid var(--colour-line);
	background: var(--colour-white);
}
.chart-embed {
	display: block;
	width: 100%;
	border: 0;
}
.chart-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3) var(--space-4);
}
.chart-source {
	margin: 0;
	color: var(--layout-text, var(--colour-ink));
	font-size: var(--fs-base);
}
.chart-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}
.chart-button {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 3rem;
	padding: 0.6875rem 1.25rem;
	border: 2px solid currentColor;
	border-end-end-radius: 1.25rem;
	background: none;
	color: var(--layout-text, var(--colour-ink));
	font: inherit;
	font-size: var(--fs-base);
	font-weight: var(--fw-extrabold);
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}
.chart-button:hover,
.chart-button:focus-visible {
	background: var(--layout-text, var(--colour-ink));
	color: var(--layout-background, var(--colour-background));
}
.chart-button[hidden] {
	display: none;
}
.chart-button svg {
	flex: 0 0 auto;
}
.chart-table-toggle[aria-expanded="true"] svg {
	rotate: 180deg;
}
.chart-table {
	width: 100%;
	border-collapse: collapse;
	color: var(--layout-text, var(--colour-ink));
	font-size: var(--fs-base);
	line-height: 1.45;
}
.chart-table th,
.chart-table td {
	padding: 0.875rem 0;
	border-block-end: 1px solid color-mix(in srgb, var(--colour-dark-green) 25%, transparent);
	font-weight: var(--fw-regular);
	text-align: start;
	vertical-align: top;
}
.chart-table td {
	padding-inline-start: var(--space-4);
	font-weight: var(--fw-semibold);
	text-align: end;
	white-space: nowrap;
}
.chart-table thead th {
	color: var(--layout-heading, var(--colour-ink-muted));
	font-weight: var(--fw-semibold);
}
.chart-table thead th + th {
	text-align: end;
}
@media (min-width: 56em) {
	.chart-header {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: clamp(2.5rem, 6.4vw, 5rem);
	}
	.chart-heading {
		flex: 0 1 38.75rem; /* 620px, as Figma */
	}
	.chart-finding {
		flex: 0 1 33.125rem; /* 530px, as Figma */
	}
}