/*
 * UKEBA — main stylesheet.
 * Values come from the Figma desktop frame (1440 wide, 1180 content).
 * Tablet (768) and mobile (375) overrides are added in the responsive pass,
 * each placed AFTER the rules they override.
 */

/* ---------- Tokens (Figma colour + text styles) ---------- */
:root {
	--c-primary: #05055a;      /* Text/Primary, Surface/Brand dark */
	--c-white: #fff;           /* Surface/Page, Text/On dark */
	--c-subtle: #f5f5f5;       /* Surface/Subtle */
	--c-accent: #285ae1;       /* Surface/Accent */
	--c-cta: #e63264;          /* Surface/CTA */
	--c-footer: #333;          /* Surface/Footer */
	--c-placeholder: #d9d9d9;

	--f-heading: "Bricolage Grotesque", system-ui, sans-serif;
	--f-body: "Manrope", system-ui, sans-serif;

	--container: 1180px;
	--gutter: 24px;
	--section-y: 70px;
	--dl-stats-gap: 102px;
	--radius: 24px;
}

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

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

body {
	margin: 0;
	overflow-x: hidden;
	background: var(--c-white);
	color: var(--c-primary);
	font-family: var(--f-body);
	font-size: 20px;
	line-height: 26px;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
}

h1,
h2,
h3,
p,
ul,
dl,
dd,
figure {
	margin: 0;
}

h1,
h2,
h3 {
	font-family: var(--f-heading);
	font-variation-settings: "opsz" 14, "wdth" 100;
	line-height: normal;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100;
	width: auto;
	height: auto;
	padding: 12px 16px;
	clip: auto;
	background: var(--c-white);
	color: var(--c-primary);
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.container {
	width: min(var(--container), 100% - 2 * var(--gutter));
	margin-inline: auto;
}

/* ---------- Shared type ---------- */
.section-heading {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.block__intro {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.block__intro-text p + p,
.icon-card__text p + p {
	margin-top: 16px;
}

/* ---------- Buttons ---------- */
.buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 21px;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 26px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-family: var(--f-body);
	font-size: 20px;
	line-height: 26px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s, color 0.2s;
}

.button--outline {
	color: var(--c-white);
}

.button--outline:hover,
.button--outline:focus-visible {
	background: var(--c-white);
	color: var(--c-primary);
}

/* ---------- Meta line (NEWS • date) ---------- */
.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 20px;
	line-height: normal;
}

.meta__label {
	font-weight: 700;
	text-transform: uppercase;
}

.meta__label + .meta__date::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 8px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
}

/* ---------- Header ---------- */
.site-header__inner,
.site-header .container {
	display: flex;
	align-items: center;
	min-height: 116px;
}

.site-header__logo {
	display: block;
	width: 300px;
}

.site-header__logo img {
	width: 100%;
}

/* Homepage: logo sits over the hero, as in the Figma hero frame. */
.home .site-header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
}

/* News posts / simple pages: 35px top offset from the News frame. */
body:not(.home) .site-header {
	padding-top: 35px;
}

/* Logo deterrent (see main.js): no drag, selection or iOS long-press save. */
[data-protect-image] img {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	min-height: 804px;
	padding-top: 216px; /* 116 logo row + 100 gap */
	overflow: hidden;
}

/* .hero__inner must stay unpositioned so .hero__art is placed against the
   whole hero section (from the top of the page), not the text column. */
.hero__content {
	position: relative;
	z-index: 1;
	width: 533px;
	max-width: 100%;
	padding-bottom: 70px;
}

.hero__heading {
	margin-bottom: 18px;
	font-size: 58px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.hero__text p + p {
	margin-top: 24px;
}

/* Artwork: the 713×804 crop that is visible in the 1440 frame, starting 7px
   right of centre. On screens wider than 1440 it stays flush right so the
   ribbons still run off the edge. */
.hero__art {
	position: absolute;
	top: 0;
	left: max(50% + 7px, 100% - 713px);
	z-index: 0;
	width: 713px;
	pointer-events: none;
}

.hero__image {
	width: 100%;
}

/* ---------- Icon cards ---------- */
.icon-cards {
	padding-block: var(--section-y);
}

.icon-cards--light {
	background: var(--c-subtle);
}

.icon-cards--dark {
	background: var(--c-primary);
	color: var(--c-white);
}

.icon-cards .block__intro {
	width: 836px;
	max-width: 100%;
	margin: 0 auto 104px;
}

.icon-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.icon-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Icons are centred in a fixed box; on light cards Figma drops them 18px so
   they sit just above the heading. */
.icon-card__icon {
	position: relative;
	width: 113px;
	height: 120px;
}

.icon-card__icon img {
	position: absolute;
	top: calc(50% + 18px);
	left: 50%;
	max-width: none;
	transform: translate(-50%, -50%);
}

.icon-cards--dark .icon-card__icon {
	width: 104px;
	height: 108px;
}

.icon-cards--dark .icon-card__icon img {
	top: 50%;
}

.icon-card__heading {
	font-size: 30px;
	font-weight: 800;          /* Desktop/Heading/Card/Strong */
	letter-spacing: -0.01em;
}

.icon-cards--dark .icon-card__heading {
	font-weight: 700;          /* Desktop/Heading/Card */
	letter-spacing: 0;
}

/* ---------- Download + Statistics (one blue band in the design) ---------- */
.download,
.stats {
	padding-block: var(--section-y);
	background: var(--c-accent);
	color: var(--c-white);
}

/* One visual band: gap between briefing and stats is 102px (48px on mobile). */
.download + .stats {
	padding-top: calc(var(--dl-stats-gap) - var(--section-y));
}

.download__inner {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 31px;
}

.download__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	width: 623px;
}

.download__text p + p {
	margin-top: 22px;
}

.download__cover {
	flex: 0 0 194px;
}

.download__cover img {
	width: 194px;
	height: 274px;
	object-fit: cover;
}

.stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* Three stats use the same three columns as the icon-card rows. */
.stats__grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

/* Words within a figure ("m", "in") sit smaller than the numbers. */
.stat__word {
	font-size: 0.65em;
	line-height: 1;            /* don't let the smaller text stretch the line */
	letter-spacing: 0;
}

.stat__figure {
	font-family: var(--f-heading);
	font-size: 76px;
	font-variation-settings: "opsz" 14, "wdth" 100;
	font-weight: 800;
	line-height: 70px;
	letter-spacing: -0.01em;
}

.stat__source {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	line-height: 18px;
	opacity: 0.8;
}

/* ---------- Members ---------- */
.members {
	padding-block: var(--section-y);
	background: var(--c-white); /* client change: white rather than Surface/Subtle */
}

/* Intro keeps the 848px design width; the logo grid can use the full
   container when it has 5 columns. */
.members .block__intro {
	max-width: 848px;
	margin: 0 auto 69px;
}

/* Logo grid. Columns are set from the number of logos in blocks/members.php
   (up to 9 → 3, 10–16 → 4, 17+ → 5). Flex-wrap so an incomplete last row is
   centred. Cells are 170px wide when there's room and shrink to fit. */
.members__grid {
	--cols: 3;
	--gap-x: 48px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 75px var(--gap-x);
	max-width: calc(var(--cols) * 170px + (var(--cols) - 1) * var(--gap-x));
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.members__grid--cols-4 {
	--cols: 4;
}

.members__grid--cols-5 {
	--cols: 5;
}

.members__item {
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols));
	min-width: 0;
}

.members__item,
.members__item a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
}

.members__item img {
	width: auto;
	max-width: 100%;
	max-height: 68px;
	object-fit: contain;
}

/* ---------- Latest news ---------- */
.latest-news {
	padding-block: var(--section-y);
	background: var(--c-subtle);
}

.latest-news__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 86px;
}

.latest-news__controls {
	display: flex;
	gap: 20px;
}

.latest-news__controls[hidden] {
	display: none;
}

.latest-news__arrow {
	width: 51px;
	height: 51px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}

.latest-news__next img {
	transform: scaleX(-1); /* Figma: rotate(180deg) + flip Y */
}

.latest-news__arrow:disabled {
	cursor: default;
	opacity: 0.35;
}

.latest-news__track {
	display: grid;
	grid-auto-columns: calc((100% - 2 * 24px) / 3);
	grid-auto-flow: column;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

/* Fewer posts than fit in a row: centre them (cards keep their width). */
.latest-news__track--count-1,
.latest-news__track--count-2 {
	justify-content: center;
}

.latest-news__track::-webkit-scrollbar {
	display: none;
}

.news-card {
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--c-white);
}

.news-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-bottom: 24px;
	text-decoration: none;
}

.news-card__image img {
	width: 100%;
	height: 205px;
	object-fit: cover;
}

.news-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 24px;
}

.news-card__title {
	font-size: 30px;
	font-weight: 700;
}

.news-card__link:hover .news-card__title,
.news-card__link:focus-visible .news-card__title {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* ---------- Get in touch ---------- */
.cta {
	position: relative;
	overflow: hidden;
	background: var(--c-cta);
	color: var(--c-white);
}

.cta__inner {
	display: flex;
	align-items: center;
	min-height: 405px;
}

.cta__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: 848px;
	max-width: 100%;
	margin-left: clamp(0px, 100% - 848px, 166px); /* 166px at 1440, shrinks on narrower desktops */
}

.cta__text {
	max-width: 500px;
}

.cta__art {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 559px;
	pointer-events: none;
}

.cta__art picture {
	display: block;
	height: 100%;
}

/* Artwork images are the crop visible in each Figma frame (desktop 559×405). */
.cta__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left top;
}

/* ---------- Article (news post, simple pages, 404) ---------- */
.article {
	padding: 92px 0 35px;
}

.article__header {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 836px;
}

.article__title {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.article__image {
	margin-top: 44px;
}

.article__image img {
	width: 100%;
	height: 451px;
	border-radius: var(--radius);
	object-fit: cover;
}

.article__intro {
	margin-top: 44px;
	font-size: 28px;
	line-height: 37px;
}

.article__body {
	margin-top: 26px;
}

.article__header + .article__body {
	margin-top: 44px;
}

.article__body > * + * {
	margin-top: 26px;
}

.article__body h2 {
	margin-top: 44px;
	font-size: 30px;
	font-weight: 700;
}

.article__body h3 {
	margin-top: 36px;
	font-size: 24px;
	font-weight: 700;
}

.article__body ul,
.article__body ol {
	padding-left: 20px;
}

.article__body ul li::marker {
	color: var(--c-cta);
}

.article__body a {
	color: var(--c-accent);
	text-underline-offset: 3px;
}

.article__body img {
	border-radius: var(--radius);
}

.article__body blockquote {
	margin: 44px 0;
	padding-left: 24px;
	border-left: 4px solid var(--c-cta);
	font-size: 28px;
	line-height: 37px;
}

/* ---------- Footer ---------- */
.site-footer {
	padding: 50px 0;
	background: var(--c-footer);
	color: var(--c-white);
	font-size: 16px;
	line-height: 22px;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 578px) minmax(0, 328px) 1fr;
	align-items: start;
}

.site-footer__brand img {
	width: 195px;
}

.site-footer__label {
	font-family: var(--f-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.site-footer__text {
	font-style: normal;
}

.site-footer__contact {
	padding: 0;
	list-style: none;
}

.site-footer a {
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	text-decoration: underline;
}

.site-footer__legal {
	grid-column: 1 / -1;
	margin-top: 230px;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}

/* =====================================================================
   Tablet — ≤1023px (Figma "Tablet" / "News Tablet" frames, 768 wide:
   48px gutter, 48px section padding, 18/26 body).
   ===================================================================== */
@media (max-width: 1023px) {
	:root {
		--gutter: 48px;
		--section-y: 48px;
	}

	.block,
	.cta {
		font-size: 18px;
		line-height: 26px;
	}

	.section-heading {
		font-size: 38px;           /* Tablet/Heading/Section */
	}

	/* Header */
	.home .site-header {
		padding-top: 24px;
	}

	body:not(.home) .site-header {
		padding-top: 48px;
	}

	/* Hero: text block 533 wide, artwork 629 wide from 422px / 436px down. */
	.hero {
		min-height: 816px;
		padding-top: 204px;        /* 24 + 116 logo row + 64 gap */
	}

	/* Tablet artwork is the 345×380 crop visible in the 768 frame, 436px down. */
	.hero__art {
		top: 436px;
		left: max(50% + 38px, 100% - 345px);
		width: 345px;
	}

	/* Icon cards */
	.icon-cards--light .icon-cards__grid {
		gap: 16px;
	}

	.icon-cards--dark .icon-cards__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	.icon-cards .block__intro {
		width: 100%;
	}

	.icon-card__heading {
		font-size: 26px;           /* Tablet/Heading/Card(/Strong) */
	}

	/* Briefing + stats */
	.download__inner {
		justify-content: flex-start;
	}

	.download__content {
		width: auto;
		flex: 1 1 446px;
	}

	.stats__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Match the light card row: three columns, 16px apart. */
	.stats__grid--3 {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}

	.stat__figure {
		font-size: 72px;           /* Tablet/Display/Statistic */
	}

	/* Members */
	/* Tablet: at most 4 logos per row, with tighter gaps above 3. */
	.members__grid--cols-4,
	.members__grid--cols-5 {
		--cols: 4;
		--gap-x: 32px;
	}

	/* Latest news: two cards per view */
	.latest-news .section-heading {
		font-size: 40px;           /* Tablet/Heading/Section/Large */
	}

	.latest-news__track {
		grid-auto-columns: calc((100% - 24px) / 2);
	}

	/* Two cards fill a tablet row; only a single card is centred. */
	.latest-news__track--count-2 {
		justify-content: start;
	}

	.news-card__title {
		font-size: 26px;
	}

	/* Get in touch */
	.cta__inner {
		align-items: flex-start;
		min-height: 279px;
		padding-block: var(--section-y);
	}

	.cta__content {
		max-width: calc(100% - 218px - 16px); /* never under the 218px artwork */
		margin-left: 0;
	}

	/* Tablet artwork: the 218×279 crop at the right of the 768 frame. */
	.cta__art {
		width: 218px;
	}

	.button {
		min-height: 47px;
		font-size: 18px;
		line-height: 25px;
	}

	/* Article */
	.article {
		padding-top: 72px;
	}

	.article__body > * + * {
		margin-top: 24px;
	}

	/* Footer: logo | address | contact, copyright 48px below */
	.site-footer {
		padding-block: 48px;
	}

	.site-footer__inner {
		grid-template-columns: 195px 185px 1fr;
		column-gap: 24px;
	}

	.site-footer__legal {
		margin-top: 48px;
	}
}

/* =====================================================================
   Mobile — ≤767px (Figma "Mobile" / "News Mobile" frames, 375 wide:
   16px gutter, 16px section padding, 14/19 body).
   ===================================================================== */
@media (max-width: 767px) {
	:root {
		--gutter: 16px;
		--section-y: 16px;
		--dl-stats-gap: 48px;
	}

	.block,
	.cta {
		font-size: 14px;
		line-height: 19px;
	}

	.block__intro {
		gap: 8px;
	}

	.block__intro-text p + p,
	.icon-card__text p + p {
		margin-top: 8px;
	}

	/* Header: 162px logo */
	.home .site-header,
	body:not(.home) .site-header {
		padding-top: 16px;
	}

	.site-header__inner,
	.site-header .container {
		min-height: 49px;
	}

	.site-header__logo {
		width: 162px;
	}

	/* Hero */
	.hero {
		min-height: 604px;
		padding-top: 115px;        /* 16 + 49 logo + 50 gap */
	}

	.hero__heading {
		margin-bottom: 8px;
		font-size: 28px;           /* Mobile/Display/Hero */
		line-height: 34px;
		letter-spacing: 0;
	}

	.hero__text p + p {
		max-width: 244px;          /* leaves room for the artwork */
		margin-top: 16px;
	}

	/* Mobile artwork is the 198×306 crop visible in the 375 frame, 298px down. */
	.hero__art {
		top: 298px;
		left: max(50% - 10px, 100% - 198px);
		width: 198px;
	}

	/* Icon cards: one column, icons scaled to the mobile sizes */
	.icon-cards__grid,
	.icon-cards--light .icon-cards__grid,
	.icon-cards--dark .icon-cards__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.icon-card {
		gap: 8px;
	}

	.icon-card__icon {
		width: 84px;
		height: 96px;
	}

	.icon-card__icon img {
		top: 50%;
		transform: translate(-50%, -50%) scale(0.735);
	}

	.icon-cards--dark .icon-card__icon {
		width: 70px;
		height: 73px;
	}

	.icon-cards--dark .icon-card__icon img {
		transform: translate(-50%, -50%) scale(0.673);
	}

	.icon-card__heading {
		font-size: 20px;           /* Mobile/Heading/Card(/Strong) */
		line-height: 24px;
		letter-spacing: -0.02em;
	}

	.icon-cards .section-heading {
		font-size: 30px;           /* Mobile/Heading/Section */
		line-height: 36px;
	}

	.icon-cards .block__intro {
		gap: 20px;
		margin-bottom: 32px;
	}

	/* Briefing: heading + first paragraph beside a 111px cover, the rest full width */
	.download__inner {
		display: grid;
		grid-template-columns: 1fr 111px;
		gap: 8px 22px;
		align-items: start;
	}

	.download__content,
	.download__text {
		display: contents;
	}

	.download .section-heading,
	.download__text > p:first-child {
		grid-column: 1;
	}

	.download__cover {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.download__cover img {
		width: 111px;
		height: 157px;
	}

	.download__text > p ~ *,
	.download .button {
		grid-column: 1 / -1;
	}

	/* Grid items stretch by default; keep the button its natural width. */
	.download .button {
		justify-self: start;
		margin-top: 8px;           /* 8 gap + 8 = 16px, matching the paragraph spacing */
	}

	.download__text p + p {
		margin-top: 8px;           /* 8 gap + 8 = 16px */
	}

	.download .section-heading {
		font-size: 22px;           /* Mobile/Heading/CTA */
		line-height: 26px;
	}

	.stat__figure {
		font-size: 38px;           /* Mobile/Display/Statistic */
		line-height: 46px;
	}

	/* Cards stack on mobile, so three stats do too. */
	.stats__grid--3 {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* Members: two columns of 143px */
	.members .section-heading,
	.latest-news .section-heading {
		font-size: 20px;
		line-height: 24px;
	}

	.members .block__intro {
		margin-bottom: 32px;
	}

	/* Mobile: always 2 logos per row (143px cells), last row centred. */
	.members__grid,
	.members__grid--cols-4,
	.members__grid--cols-5 {
		--cols: 2;
		--gap-x: 48px;
	}

	.members__item,
	.members__item a {
		height: 60px;
	}

	.members__item img {
		max-width: 139px;
		max-height: 58px;
	}

	/* Latest news: one card per view, 30px arrows */
	.latest-news {
		font-size: 14px;
		line-height: 19px;
	}

	.latest-news__header {
		align-items: center;
		margin-bottom: 48px;
	}

	.latest-news__controls {
		gap: 16px;
	}

	.latest-news__arrow,
	.latest-news__arrow img {
		width: 30px;
		height: 30px;
	}

	.latest-news__track {
		grid-auto-columns: 100%;
	}

	.news-card .meta {
		font-size: 14px;
		line-height: 19px;
	}

	.news-card__title {
		font-size: 20px;
		line-height: 24px;
	}

	/* Get in touch: content on top, artwork below in the normal flow so the
	   section grows with it (540px tall at 375 wide, as in Figma). */
	.cta__inner {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		padding-bottom: 0;
	}

	.cta .section-heading {
		font-size: 22px;
		line-height: 24px;
	}

	.cta__text {
		max-width: none;
	}

	.cta__content {
		max-width: 100%;
	}

	/* Mobile artwork: the 375×318 crop, full-bleed and scaled in proportion
	   (no enlarging/cropping on wider phones), 63px below the buttons. */
	.cta__art {
		position: relative;
		inset: auto;
		width: calc(100% + 2 * var(--gutter));
		margin: 63px calc(-1 * var(--gutter)) 0;
		aspect-ratio: 375 / 318;
	}

	.button {
		min-height: 41px;
		padding: 0 13px;
		font-size: 14px;
		line-height: 19px;
	}

	/* Article */
	.article {
		padding-top: 16px;
	}

	.article .meta {
		font-size: 14px;
		line-height: 19px;
	}

	.article__header {
		gap: 8px;
	}

	.article__title {
		font-size: 30px;
		line-height: 36px;
	}

	.article__image,
	.article__intro {
		margin-top: 16px;
	}

	.article__body,
	.article__header + .article__body {
		margin-top: 16px;
	}

	.article__body > * + * {
		margin-top: 16px;
	}

	.article__body h2 {
		margin-top: 16px;
		font-size: 20px;
		line-height: 24px;
	}

	/* Footer: logo, then address | contact */
	.site-footer {
		padding-block: 16px;
		font-size: 12px;
		line-height: 16px;
	}

	.site-footer__inner {
		grid-template-columns: 185px 1fr;
		gap: 24px;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}

	.site-footer__brand img {
		width: 161px;
	}

	.site-footer__label {
		font-size: 12px;
		line-height: 16px;
	}

	.site-footer__legal {
		margin-top: 24px;          /* + 24 grid gap = 48 */
		font-size: 10px;
		line-height: 14px;
	}
}

/* =====================================================================
   Get in touch, 576–767px: the full-width mobile crop gets too tall here,
   so use the tablet arrangement — tablet artwork (218px) on the right,
   text narrowed so it never runs under it. Mobile type sizes still apply.
   ===================================================================== */
@media (min-width: 576px) and (max-width: 767px) {
	.cta__inner {
		flex-direction: row;
		align-items: flex-start;
		min-height: 279px;
		padding-bottom: var(--section-y);
	}

	.cta__content {
		max-width: calc(100% - 218px - 16px);
	}

	.cta__art {
		position: absolute;
		inset: 0 0 0 auto;
		width: 218px;
		margin: 0;
		aspect-ratio: auto;
	}
}

/* =====================================================================
   CookieYes banner + preference centre, styled to the site.
   CookieYes writes its colours as inline styles from its own settings, so
   !important is needed — scoped strictly to its .cky- classes.
   ===================================================================== */
.cky-consent-container .cky-consent-bar {
	border: 0 !important;
	background-color: var(--c-primary) !important;
	box-shadow: 0 -8px 32px rgba(5, 5, 90, 0.18);
	color: var(--c-white);
}

.cky-consent-container .cky-title {
	font-family: var(--f-heading) !important;
	font-variation-settings: "opsz" 14, "wdth" 100;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 24px !important;
	color: var(--c-white) !important;
}

.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des * {
	font-size: 14px !important;
	line-height: 19px !important;
	color: var(--c-white) !important;
}

.cky-consent-container .cky-notice-des a,
.cky-consent-container .cky-policy {
	border-color: transparent !important;
	background: none !important;
	color: var(--c-white) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* Buttons: the site's pill buttons. */
.cky-consent-container .cky-btn,
.cky-modal .cky-btn {
	min-height: 44px;
	padding: 0 22px !important;
	border-width: 1px !important;
	border-radius: 999px !important;
	font-family: var(--f-body) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 19px !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* On the navy banner: Accept is solid white, the others white outline. */
.cky-consent-container .cky-btn-accept {
	border-color: var(--c-white) !important;
	background-color: var(--c-white) !important;
	color: var(--c-primary) !important;
}

.cky-consent-container .cky-btn-customize,
.cky-consent-container .cky-btn-reject {
	border-color: var(--c-white) !important;
	background-color: transparent !important;
	color: var(--c-white) !important;
}

.cky-consent-container .cky-btn:hover,
.cky-consent-container .cky-btn:focus-visible {
	border-color: var(--c-cta) !important;
	background-color: var(--c-cta) !important;
	color: var(--c-white) !important;
}

/* Preference centre (Customise). */
.cky-modal .cky-preference-center {
	border: 0 !important;
	border-radius: var(--radius) !important;
	background-color: var(--c-white) !important;
	color: var(--c-primary) !important;
}

.cky-modal .cky-preference-title {
	font-family: var(--f-heading) !important;
	font-variation-settings: "opsz" 14, "wdth" 100;
	font-size: 24px !important;
	font-weight: 700 !important;
	color: var(--c-primary) !important;
}

.cky-modal .cky-preference-content-wrapper,
.cky-modal .cky-preference-content-wrapper *,
.cky-modal .cky-accordion-header-des,
.cky-modal .cky-accordion-header-des *,
.cky-modal .cky-cookie-des-table,
.cky-modal .cky-empty-cookies-text {
	font-size: 14px !important;
	line-height: 19px !important;
	color: var(--c-primary) !important;
}

.cky-modal .cky-accordion-btn {
	font-family: var(--f-body) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--c-primary) !important;
}

.cky-modal .cky-show-desc-btn,
.cky-modal .cky-preference-content-wrapper a,
.cky-modal .cky-always-active {
	color: var(--c-accent) !important;
}

.cky-modal .cky-audit-table {
	border: 0 !important;
	border-radius: 12px !important;
	background-color: var(--c-subtle) !important;
	color: var(--c-primary) !important;
}

/* On the white panel: Accept is solid navy, the others navy outline. */
.cky-modal .cky-btn-accept {
	border-color: var(--c-primary) !important;
	background-color: var(--c-primary) !important;
	color: var(--c-white) !important;
}

.cky-modal .cky-btn-preferences,
.cky-modal .cky-btn-reject {
	border-color: var(--c-primary) !important;
	background-color: transparent !important;
	color: var(--c-primary) !important;
}

.cky-modal .cky-btn:hover,
.cky-modal .cky-btn:focus-visible {
	border-color: var(--c-cta) !important;
	background-color: var(--c-cta) !important;
	color: var(--c-white) !important;
}

/* Category toggles (shown once non-necessary cookies are categorised). */
.cky-modal .cky-switch input[type="checkbox"]:checked {
	background: var(--c-primary) !important;
}

.cky-overlay {
	background-color: var(--c-primary) !important;
}

/* "Cookie settings" re-open button, if enabled. */
.cky-btn-revisit-wrapper {
	background-color: var(--c-primary) !important;
}

.cky-consent-container :focus-visible,
.cky-modal :focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}

/* =====================================================================
   Motion — scroll reveals and page transitions (see assets/js/main.js).
   Hidden states only apply when JS is running (html has no .no-js), and
   are switched off entirely for prefers-reduced-motion.
   ===================================================================== */
html:not(.no-js) [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 1s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s),
		transform 1s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s);
}

/* Artwork fades and settles rather than rising. */
html:not(.no-js) [data-reveal="fade"] {
	transform: scale(0.98);
	transition-duration: 1.4s;
}

html:not(.no-js) [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Hero on page load: each heading line then the text, 350ms apart (delays
   set inline in blocks/hero.php); the artwork fades in alongside. */
.hero__line {
	display: block;
}

.hero__art[data-reveal] {
	--reveal-delay: 0.2s;
}

/* Cross-document page transition (supporting browsers only): a short fade
   between the homepage and news posts. */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.35s;
	animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
	html:not(.no-js) [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	@view-transition {
		navigation: none;
	}
}