/*
Theme Name: CS4H
Theme URI: https://cybershield4health.eu
Author: CyberShield4Health consortium
Description: Block theme for CyberShield4Health (CS4H). Design tokens live in theme.json and follow richtlijnen_website; this stylesheet carries the interaction states, component library and accessibility behaviour that theme.json cannot express.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.2.69
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cs4h
Tags: full-site-editing, block-patterns, accessibility-ready
*/

/* -------------------------------------------------------------------------
   1. Base
   ---------------------------------------------------------------------- */

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

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

/* Guard the requirement "geen horizontale scroll bij gewone paginacontent". */
html,
body {
	overflow-x: clip;
	max-width: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-variant-ligatures: common-ligatures;
	text-rendering: optimizeLegibility;
}

/* Running text stays within ~65 characters per line (richtlijnen). Applies to
   prose only, so grids, cards and media are unaffected. */
.cs4h-prose > p,
.cs4h-prose > ul,
.cs4h-prose > ol,
.cs4h-prose > blockquote,
.cs4h-measure {
	max-width: var(--wp--custom--measure);
}

.cs4h-prose > h2,
.cs4h-prose > h3,
.cs4h-prose > h4 {
	max-width: 24ch;
}

:where(.cs4h-prose) > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

:where(.cs4h-prose) > * + :is(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* -------------------------------------------------------------------------
   2. Focus — richtlijnen: follow the text colour, 2px thick, 3px offset,
      plus a contrasting outer line where the ring would otherwise vanish.
   ---------------------------------------------------------------------- */

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	/* The contrasting outer line. White behind the ring on light surfaces so
	   the ring never dissolves into an adjacent block of the same colour. */
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.95);
	border-radius: var(--wp--custom--radius);
}

.cs4h-dark :focus-visible,
.has-dark-purple-background-color :focus-visible {
	box-shadow: 0 0 0 6px rgba(45, 37, 66, 0.95);
}

/* Never leave a focus ring invisible because a component clips it. */
:focus-visible {
	position: relative;
	z-index: 2;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--dark-purple);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--wp--custom--radius);
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* -------------------------------------------------------------------------
   3. Colour contexts
   ---------------------------------------------------------------------- */

.cs4h-dark,
.has-dark-purple-background-color {
	color: var(--wp--preset--color--white);
}

.cs4h-dark :is(h1, h2, h3, h4, h5, h6),
.has-dark-purple-background-color :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--white);
}

.cs4h-dark a:not(.wp-element-button):not(.cs4h-cta),
.has-dark-purple-background-color a:not(.wp-element-button):not(.cs4h-cta) {
	color: var(--wp--preset--color--mint);
}

/* Pink cards sit on the dark band but carry dark text (see Figma). */
.has-pink-background-color,
.has-off-white-background-color {
	color: var(--wp--preset--color--dark-purple);
}

.has-pink-background-color :is(h1, h2, h3, h4, h5, h6),
.has-off-white-background-color :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--dark-purple);
}

/* -------------------------------------------------------------------------
   4. Buttons
   ---------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link,
.cs4h-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: var(--wp--custom--control-height);
	border-radius: var(--wp--custom--radius);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--wp--custom--transition) var(--wp--custom--easing),
		box-shadow var(--wp--custom--transition) var(--wp--custom--easing),
		background-color var(--wp--custom--transition) var(--wp--custom--easing),
		color var(--wp--custom--transition) var(--wp--custom--easing);
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.cs4h-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--raised);
}

/* "Ingedrukte knop keert terug naar de beginpositie." */
.wp-element-button:active,
.wp-block-button__link:active,
.cs4h-button:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Secondary — transparent, border follows the surface. */
.is-style-secondary > .wp-block-button__link,
.cs4h-button--secondary {
	background-color: transparent;
	color: var(--wp--preset--color--dark-purple);
	border: 1px solid var(--wp--preset--color--dark-purple);
}

.cs4h-dark .is-style-secondary > .wp-block-button__link,
.cs4h-dark .cs4h-button--secondary,
.has-dark-purple-background-color .is-style-secondary > .wp-block-button__link {
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}

/* Disabled — "Alleen gebruiken waar nodig." */
.wp-element-button[disabled],
.wp-element-button[aria-disabled="true"],
.cs4h-button[disabled],
.cs4h-button[aria-disabled="true"] {
	background-color: var(--wp--preset--color--off-white);
	color: var(--wp--custom--color--muted);
	border-color: transparent;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
	transform: none;
}

/* -------------------------------------------------------------------------
   5. Links and the arrow CTA
   ---------------------------------------------------------------------- */

a:not(.wp-element-button):not(.cs4h-cta):not(.cs4h-card__link) {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness var(--wp--custom--transition) var(--wp--custom--easing);
}

/* "Links zonder pijltje krijgen een dikkere onderstreping." */
a:not(.wp-element-button):not(.cs4h-cta):not(.cs4h-card__link):hover {
	text-decoration-thickness: 2px;
}

/* Text CTA — the Figma places the arrow BEFORE the label, label underlined. */
.cs4h-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	/* The design sets these noticeably smaller than the 16px the richtlijnen
	   give for "labels and buttons"; at 16px two of them no longer fit on one
	   line in the hero. The 48px min-height below keeps the touch target. */
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dark-purple);
	text-decoration: none;
	min-height: var(--wp--custom--control-height);
}

.cs4h-dark .cs4h-cta,
.has-dark-purple-background-color .cs4h-cta {
	color: var(--wp--preset--color--white);
}

/* The design marks these with the brand cross rather than an arrowhead. The
   richtlijnen describe an arrow moving 3px right on hover; the mark differs
   but the movement is kept. */
.cs4h-cta__arrow {
	flex: 0 0 auto;
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	background: currentColor;
	-webkit-mask: url("assets/img/mark.svg") center / contain no-repeat;
	mask: url("assets/img/mark.svg") center / contain no-repeat;
	transition: transform var(--wp--custom--transition) var(--wp--custom--easing);
}

.cs4h-cta__label {
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-thickness: 1px;
}

/* "een pijltje naast een link 3 px naar rechts" */
.cs4h-cta:hover .cs4h-cta__arrow {
	transform: translateX(3px);
}

/* Heading accent — the mint part-underline seen on the Cases page H1. */
.cs4h-underline {
	background-image: linear-gradient(var(--wp--preset--color--mint), var(--wp--preset--color--mint));
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 100% 4px;
	padding-bottom: 0.06em;
}

/* Eyebrow label — mint dot + uppercase, used above most section headings. */
.cs4h-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-block-end: var(--wp--preset--spacing--20);
}

.cs4h-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	/* A mint disc carrying the brand cross, as in the design — not a dot. */
	background:
		url("assets/img/mark-dark.svg") center / 58% no-repeat,
		var(--wp--preset--color--mint);
}

/* Pill badge variant (Cases page). */
.cs4h-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.875rem;
	border-radius: 999px;
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--dark-purple);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   6. Cards and grids
      "drie kolommen op brede schermen, twee waar drie niet meer passen,
       één op mobiel" — expressed with auto-fit so it is content-driven.
   ---------------------------------------------------------------------- */

.cs4h-grid {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.cs4h-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}

.cs4h-grid--fixed-3 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
	.cs4h-grid--fixed-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.cs4h-grid--fixed-3 {
		grid-template-columns: 1fr;
	}
}

.cs4h-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
	transition:
		transform var(--wp--custom--transition) var(--wp--custom--easing),
		box-shadow var(--wp--custom--transition) var(--wp--custom--easing);
}

.cs4h-card--pink {
	background: var(--wp--preset--color--pink);
	padding: var(--wp--preset--spacing--40);
}

.cs4h-card--panel {
	background: var(--wp--preset--color--off-white);
	padding: var(--wp--preset--spacing--60);
}

.cs4h-card__media {
	aspect-ratio: 4 / 3;
	max-width: 100%;
	object-fit: cover;
	width: 100%;
	display: block;
	background: var(--wp--preset--color--off-white);
}

.cs4h-card__kicker {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--custom--color--muted);
}

.cs4h-card__title {
	font-size: var(--wp--preset--font-size--heading-5);
	line-height: 1.3;
	font-weight: 700;
	margin: 0;
}

.cs4h-card__excerpt {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--custom--color--muted);
	margin: 0;
}

/* Whole-card link without trapping keyboard users: the anchor covers the card
   but the focus ring renders on the card itself. */
.cs4h-card__link {
	text-decoration: none;
	color: inherit;
}

.cs4h-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cs4h-card:has(.cs4h-card__link) {
	position: relative;
}

.cs4h-card:has(.cs4h-card__link:hover) {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--raised);
}

.cs4h-card:has(.cs4h-card__link:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* The pink-left-border list from the "Here is how your organisation can
   benefit" section. */
.cs4h-ruled-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.cs4h-ruled-list > li {
	border-left: 3px solid var(--wp--preset--color--pink);
	padding-left: var(--wp--preset--spacing--30);
}

.cs4h-ruled-list h3 {
	font-size: var(--wp--preset--font-size--heading-5);
	margin: 0 0 0.375rem;
}

.cs4h-ruled-list p {
	margin: 0;
	color: var(--wp--custom--color--muted);
}

.cs4h-dark .cs4h-ruled-list p {
	color: var(--wp--custom--color--muted-on-dark);
}

/* -------------------------------------------------------------------------
   7. Filters and pagination
   ---------------------------------------------------------------------- */

.cs4h-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.cs4h-filter {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--wp--custom--color--rule);
	background: transparent;
	color: var(--wp--preset--color--dark-purple);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--wp--custom--transition) var(--wp--custom--easing),
		color var(--wp--custom--transition) var(--wp--custom--easing),
		border-color var(--wp--custom--transition) var(--wp--custom--easing);
}

.cs4h-filter:hover {
	border-color: var(--wp--preset--color--dark-purple);
}

/* "Geselecteerde filter: donkerpaarse achtergrond met witte tekst." */
.cs4h-filter[aria-pressed="true"],
.cs4h-filter[aria-current="true"],
.cs4h-filter.is-selected {
	background: var(--wp--preset--color--dark-purple);
	border-color: var(--wp--preset--color--dark-purple);
	color: var(--wp--preset--color--white);
}

.cs4h-filters__clear {
	margin-inline-start: auto;
	font-size: var(--wp--preset--font-size--small);
}

/* Zero-results explanation. */
.cs4h-empty {
	padding: var(--wp--preset--spacing--60) 0;
	text-align: center;
}

.cs4h-empty p {
	margin: 0 auto var(--wp--preset--spacing--30);
	max-width: 44ch;
	color: var(--wp--custom--color--muted);
}

.cs4h-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--60);
}

.cs4h-pagination a,
.cs4h-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	border-radius: var(--wp--custom--radius);
	border: 1px solid var(--wp--custom--color--rule);
	text-decoration: none;
	font-weight: 600;
}

.cs4h-pagination [aria-current="page"] {
	background: var(--wp--preset--color--dark-purple);
	border-color: var(--wp--preset--color--dark-purple);
	color: var(--wp--preset--color--white);
}

/* -------------------------------------------------------------------------
   8. FAQ / accordion
      "Standaard gesloten. Meerdere antwoorden mogen tegelijk openstaan.
       Plus wordt min bij openen; ook bedienbaar met toetsenbord."
      <details>/<summary> gives keyboard operation and multi-open for free.
   ---------------------------------------------------------------------- */

.cs4h-faq {
	border-top: 1px solid var(--wp--custom--color--rule);
}

.cs4h-faq__item {
	border-bottom: 1px solid var(--wp--custom--color--rule);
}

.cs4h-faq__question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) 0;
	min-height: var(--wp--custom--control-height);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--heading-5);
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
}

.cs4h-faq__question::-webkit-details-marker {
	display: none;
}

.cs4h-faq__icon {
	flex: 0 0 auto;
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.125rem;
}

.cs4h-faq__icon::before,
.cs4h-faq__icon::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	background: currentColor;
	transition: transform var(--wp--custom--transition) var(--wp--custom--easing);
}

.cs4h-faq__icon::after {
	transform: rotate(90deg);
}

/* Plus becomes minus. */
.cs4h-faq__item[open] .cs4h-faq__icon::after {
	transform: rotate(0deg);
}

.cs4h-faq__answer {
	padding-bottom: var(--wp--preset--spacing--30);
	max-width: var(--wp--custom--measure);
	color: var(--wp--custom--color--muted);
}

.cs4h-dark .cs4h-faq__answer {
	color: var(--wp--custom--color--muted-on-dark);
}

/* -------------------------------------------------------------------------
   9. Forms
   ---------------------------------------------------------------------- */

.cs4h-field {
	display: grid;
	gap: 0.375rem;
	margin-block-end: var(--wp--preset--spacing--30);
}

/* "Labels permanent boven de velden." */
.cs4h-field__label {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	line-height: 1.4;
}

.cs4h-field__optional {
	font-weight: 400;
	color: var(--wp--custom--color--muted);
}

.cs4h-field__hint {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--muted);
}

.cs4h-input,
.cs4h-textarea,
.cs4h-select {
	width: 100%;
	min-height: var(--wp--custom--control-height);
	padding: 0.6875rem 0.875rem;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark-purple);
	border: 1px solid var(--wp--preset--color--dark-purple);
	border-radius: var(--wp--custom--radius);
	font: inherit;
	font-size: var(--wp--preset--font-size--body);
}

.cs4h-textarea {
	min-height: 8rem;
	resize: vertical;
}

.cs4h-input::placeholder,
.cs4h-textarea::placeholder {
	color: var(--wp--custom--color--muted);
}

/* Error state — richtlijnen give #B42318 on white only, so the dark-surface
   variant uses a lightened tint to hold contrast. */
.cs4h-field[data-invalid="true"] .cs4h-input,
.cs4h-field[data-invalid="true"] .cs4h-textarea,
.cs4h-field[data-invalid="true"] .cs4h-select {
	border-color: var(--wp--custom--color--error);
	border-width: 2px;
}

.cs4h-field__error {
	display: none;
	align-items: flex-start;
	gap: 0.375rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--custom--color--error);
}

.cs4h-field[data-invalid="true"] .cs4h-field__error {
	display: flex;
}

.cs4h-dark .cs4h-field__error {
	color: var(--wp--custom--color--error-on-dark);
}

.cs4h-field__error-icon {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin-top: 0.125rem;
}

/* Checkbox — consent must be reachable and never pre-ticked. */
.cs4h-checkbox {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
	align-items: start;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.cs4h-checkbox input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.125rem 0 0;
	accent-color: var(--wp--preset--color--dark-purple);
}

/* Submitting state. */
.cs4h-form[data-state="sending"] .cs4h-form__submit {
	pointer-events: none;
	opacity: 0.85;
}

/* Hidden until the form is actually submitting. */
.cs4h-spinner {
	display: none;
	width: 1rem;
	height: 1rem;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: cs4h-spin 700ms linear infinite;
}

.cs4h-form[data-state="sending"] .cs4h-spinner {
	display: inline-block;
}

@keyframes cs4h-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Success — "Mintkleurig blok met donkerpaarse tekst en vinkje." */
.cs4h-notice {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius);
	margin-block-end: var(--wp--preset--spacing--30);
}

.cs4h-notice--success {
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--dark-purple);
}

.cs4h-notice--error {
	background: #FEF3F2;
	color: var(--wp--custom--color--error);
	border: 1px solid currentColor;
}

.cs4h-notice__icon {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
}

.cs4h-notice p {
	margin: 0;
}

.cs4h-notice p + p {
	margin-top: 0.5rem;
}

/* -------------------------------------------------------------------------
   10. Header and navigation
   ---------------------------------------------------------------------- */

.cs4h-header {
	position: relative;
	z-index: 20;
}

.cs4h-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--30);
}

.cs4h-logo {
	display: inline-flex;
	flex: 0 0 auto;
	text-decoration: none;
}

.cs4h-logo img,
.cs4h-logo svg {
	display: block;
	height: 2.75rem;
	width: auto;
}

.cs4h-nav__list {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs4h-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--control-height);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	border-bottom: 2px solid transparent;
	transition: border-color var(--wp--custom--transition) var(--wp--custom--easing);
}

.cs4h-nav__link:hover {
	border-bottom-color: currentColor;
}

/* "Huidige menupagina krijgt een blijvende onderstreping." */
.cs4h-nav__item.is-current > .cs4h-nav__link,
.cs4h-nav__link[aria-current="page"] {
	border-bottom-color: currentColor;
}

.cs4h-nav__toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--wp--custom--control-height);
	padding: 0 1rem;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--radius);
	color: inherit;
	font: inherit;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	cursor: pointer;
}

.cs4h-nav__close {
	display: none;
}

/* Language switcher is hidden until a second language exists (Polylang
   renders nothing when only one language is published). */
.cs4h-lang {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
}

.cs4h-lang:not(:has(li + li)) {
	display: none;
}

/* Mobile menu — "menu achter een knop met label Menu". */
@media (max-width: 1024px) {
	.cs4h-nav__toggle {
		display: inline-flex;
	}

	.cs4h-nav__panel {
		position: fixed;
		inset: 0;
		z-index: 50;
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--30) var(--wp--custom--gutter);
		background: var(--wp--preset--color--dark-purple);
		color: var(--wp--preset--color--white);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.cs4h-nav__panel[hidden] {
		display: none;
	}

	.cs4h-nav__close {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		align-self: flex-end;
		min-height: var(--wp--custom--control-height);
		padding: 0 1rem;
		background: transparent;
		border: 1px solid currentColor;
		border-radius: var(--wp--custom--radius);
		color: inherit;
		font: inherit;
		font-weight: 600;
		cursor: pointer;
	}

	.cs4h-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.cs4h-nav__item {
		border-bottom: 1px solid var(--wp--custom--color--rule-on-dark);
	}

	.cs4h-nav__link {
		width: 100%;
		min-height: 3.5rem;
		font-size: var(--wp--preset--font-size--heading-5);
		text-transform: none;
		letter-spacing: 0;
		border-bottom: none;
	}
}

body.cs4h-menu-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   11. Hero
   ---------------------------------------------------------------------- */

.cs4h-hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: min(38rem, 80vh);
	background: var(--wp--preset--gradient--hero-sky);
	overflow: hidden;
}

.cs4h-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.cs4h-hero__media img {
	width: 100%;
	height: 100%;
	/* "Hero-afbeeldingen opnieuw uitsnijden zodat het onderwerp zichtbaar
	   blijft" — the focal point is set per image via object-position. */
	object-fit: cover;
	object-position: var(--cs4h-hero-focus, 70% 50%);
}

/* Keeps "tekst op foto's leesbaar bij elke schermuitsnede". */
.cs4h-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		100deg,
		rgba(199, 215, 245, 0.97) 0%,
		rgba(199, 215, 245, 0.92) 34%,
		rgba(199, 215, 245, 0.45) 58%,
		rgba(199, 215, 245, 0) 78%
	);
}

.cs4h-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	width: 100%;
	padding-block: var(--wp--preset--spacing--70);
}

.cs4h-hero__content {
	max-width: 34rem;
}

.cs4h-hero__intro {
	font-size: var(--wp--preset--font-size--intro);
	line-height: 1.5;
	max-width: var(--wp--custom--measure);
	margin-block: var(--wp--preset--spacing--30);
}

.cs4h-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--20);
}

@media (max-width: 640px) {
	.cs4h-hero__scrim {
		background: linear-gradient(
			180deg,
			rgba(199, 215, 245, 0.96) 0%,
			rgba(199, 215, 245, 0.9) 55%,
			rgba(199, 215, 245, 0.72) 100%
		);
	}
}

/* -------------------------------------------------------------------------
   12. Partner logo bar
   ---------------------------------------------------------------------- */

.cs4h-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
	padding-block: var(--wp--preset--spacing--50);
}

.cs4h-logos img {
	max-height: 3rem;
	width: auto;
	max-width: 10rem;
	object-fit: contain;
}

/* -------------------------------------------------------------------------
   13. Sections
   ---------------------------------------------------------------------- */

.cs4h-section {
	padding-block: var(--wp--preset--spacing--60);
}

.cs4h-section__inner {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.cs4h-section--tight {
	padding-block: var(--wp--preset--spacing--50);
}

/* The off-white panel that floats over the dark band. */
.cs4h-panel {
	background: var(--wp--preset--color--off-white);
	color: var(--wp--preset--color--dark-purple);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--60);
}

.cs4h-split {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	align-items: start;
}

/* Decorative pattern layer — hidden from assistive tech at the markup level
   with aria-hidden; this only positions it. */
.cs4h-pattern {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	z-index: 0;
}

.cs4h-has-pattern {
	position: relative;
	isolation: isolate;
}

.cs4h-has-pattern > *:not(.cs4h-pattern) {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------------
   14. EU funding statement — required sitewide
   ---------------------------------------------------------------------- */

.cs4h-eu {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
	flex-wrap: wrap;
	padding-block: var(--wp--preset--spacing--40);
}

.cs4h-eu__emblem {
	flex: 0 0 auto;
	width: 10.625rem;
	height: auto;
}

/* The EU emblem sits beside the ECCC logo at its original size. */
.cs4h-eu__emblem--eu {
	width: 5.25rem;
}

.cs4h-eu__text {
	flex: 1 1 22rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	max-width: 62ch;
}

.cs4h-eu__text p {
	margin: 0;
}

.cs4h-eu__text p + p {
	margin-top: 0.5rem;
}

/* -------------------------------------------------------------------------
   15. Footer
   ---------------------------------------------------------------------- */

/* The design puts the footer on white. Keeping the dark-band assumption made
   every page end on the wrong colour. */
.cs4h-footer {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark-purple);
	border-top: 1px solid var(--wp--custom--color--rule);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.cs4h-footer__inner {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.cs4h-footer__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: minmax(12rem, 1.2fr) repeat(auto-fit, minmax(9rem, 1fr));
}

.cs4h-footer__heading {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--custom--color--muted-on-dark);
}

.cs4h-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.625rem;
}

.cs4h-footer__list a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
}

.cs4h-footer__list a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.cs4h-footer__bottom {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--custom--color--rule-on-dark);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--muted-on-dark);
}

/* -------------------------------------------------------------------------
   16. Breadcrumbs
   ---------------------------------------------------------------------- */

.cs4h-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	padding-block: var(--wp--preset--spacing--30);
}

.cs4h-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs4h-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-inline-start: 0.5rem;
	color: var(--wp--custom--color--muted);
}

/* -------------------------------------------------------------------------
   17. Download block
   ---------------------------------------------------------------------- */

.cs4h-download {
	border: 1px solid var(--wp--custom--color--rule);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

/* "Toon bij iedere download het bestandstype en de bestandsgrootte." */
.cs4h-download__meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* -------------------------------------------------------------------------
   18. Table of contents — "Inhoudsopgave boven de tekst plaatsen" on mobile
   ---------------------------------------------------------------------- */

.cs4h-toc {
	background: var(--wp--preset--color--off-white);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--30);
}

.cs4h-toc__heading {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.cs4h-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
}

.cs4h-article {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: minmax(0, 1fr);
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--60);
}

@media (min-width: 1025px) {
	.cs4h-article--with-toc {
		grid-template-columns: minmax(0, 1fr) 16rem;
	}

	.cs4h-article--with-toc .cs4h-toc {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: var(--wp--preset--spacing--30);
	}

	.cs4h-article--with-toc .cs4h-article__body {
		grid-column: 1;
		grid-row: 1;
	}
}

/* -------------------------------------------------------------------------
   19. Tables — allowed to scroll inside their own container only
   ---------------------------------------------------------------------- */

.cs4h-scroller {
	overflow-x: auto;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
}

.cs4h-scroller table {
	min-width: 36rem;
	border-collapse: collapse;
	width: 100%;
}

.cs4h-scroller :is(th, td) {
	text-align: left;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--wp--custom--color--rule);
	font-size: var(--wp--preset--font-size--small);
}

.cs4h-scroller th {
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   20. KPI / statistics block
   ---------------------------------------------------------------------- */

.cs4h-kpi {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

.cs4h-kpi__item {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--off-white);
	border-radius: var(--wp--custom--radius);
}

.cs4h-dark .cs4h-kpi__item {
	background: rgba(255, 255, 255, 0.06);
}

.cs4h-kpi__value {
	display: block;
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.cs4h-kpi__label {
	display: block;
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--muted);
}

.cs4h-dark .cs4h-kpi__label {
	color: var(--wp--custom--color--muted-on-dark);
}

/* -------------------------------------------------------------------------
   21. Motion preference — "Bij de instelling 'minder beweging' geen
       verplaatsing."
   ---------------------------------------------------------------------- */

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

	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.cs4h-button:hover,
	.cs4h-card:has(.cs4h-card__link:hover) {
		transform: none;
	}

	.cs4h-cta:hover .cs4h-cta__arrow {
		transform: none;
	}

	/* The spinner still needs to convey activity, so it keeps turning but
	   slowly enough not to trigger motion sensitivity. */
	.cs4h-spinner {
		animation-duration: 2s !important;
		animation-iteration-count: infinite !important;
	}
}

/* -------------------------------------------------------------------------
   22. Utilities
   ---------------------------------------------------------------------- */

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

.cs4h-center {
	text-align: center;
	margin-inline: auto;
}

.cs4h-center .cs4h-eyebrow {
	justify-content: center;
}

@media print {
	.cs4h-header,
	.cs4h-footer,
	.cs4h-nav__toggle {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
   23. Hero as a core/cover block
       The hero pattern uses core/cover so editors can swap the photograph in
       the normal way. These rules restyle cover's parts to the design: the
       flat overlay becomes the directional scrim, and the image keeps its
       focal point on every crop.
   ---------------------------------------------------------------------- */

.cs4h-hero.wp-block-cover {
	min-height: min(38rem, 80vh);
	padding-block: var(--wp--preset--spacing--70);
	align-items: center;
	border-radius: 0;
}

.cs4h-hero .wp-block-cover__background {
	/* Cover's own dim layer is set to 0 in the pattern; the readable scrim is
	   drawn here so it can be directional rather than a flat wash. */
	background: var(--wp--preset--gradient--hero-sky);
	opacity: 1;
}

/* The scrim sits above the photograph but below the text.
   These values are not invented: the overlay alpha was solved per-pixel from
   the Figma homepage screenshot against the source render, and comes out as a
   plain left-to-right ramp — full sky at the left edge, gone by 72%. Measured
   samples across the top quarter: 0.90 at 8%, 0.80 at 20%, 0.70 at 30%,
   0.50 at 42%, 0.30 at 50%, 0.10 at 62%, 0 at 72%. Earlier hand-tuned versions
   ran at 0.92-0.97 across the whole band and buried the building.

   Verified against the live render: worst-case contrast on this gradient is
   8.67:1 for the 20px intro and 9.14:1 for the headline, both well clear of AA,
   so no deviation from the design's own ramp is needed. */
.cs4h-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgba(199, 215, 245, 1) 0%,
		rgba(199, 215, 245, 0) 72%
	);
}

.cs4h-hero > .wp-block-cover__image-background,
.cs4h-hero > .wp-block-cover__video-background {
	object-position: var(--cs4h-hero-focus, 70% 50%);
}

.cs4h-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	width: 100%;
}

/* The hero sits on a light ground, so its text stays dark despite cover's
   default of assuming a dark backdrop. */
.cs4h-hero,
.cs4h-hero :is(h1, h2, h3, p) {
	color: var(--wp--preset--color--dark-purple);
}

.cs4h-logos-band {
	padding-block: var(--wp--preset--spacing--50);
}

/* core/columns collapses to one column at 781px by default, which is earlier
   than this design wants; keep two up until the tablet breakpoint. */
@media (min-width: 641px) and (max-width: 781px) {
	.cs4h-section .wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: nowrap;
	}
}

/* -------------------------------------------------------------------------
   24. Reconciling with WordPress's own layout CSS
       Core's constrained layout gives every child `max-width: <contentSize>`
       and `margin-inline: auto`. Inside our own flex components that silently
       centres headings and shrinks content, so it has to be undone locally.
   ---------------------------------------------------------------------- */

/* Core sets `margin-left/right: auto !important` on constrained-layout
   children, so undoing the centring needs the same weight. */
.cs4h-card.is-layout-constrained > *,
.cs4h-panel.is-layout-constrained > *,
.cs4h-hero__content.is-layout-constrained > *,
.cs4h-card > .wp-block-heading,
.cs4h-card > p {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* The hero column itself is a constrained child of the cover, so it needs the
   same treatment to sit at the left content edge rather than centred. */
.wp-block-cover__inner-container > .cs4h-hero__content {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* The hero column must not carry core's global side padding — the cover's
   inner container already provides the gutter. Cards, by contrast, keep their
   own padding, so restate it at a weight that beats core's. */
.cs4h-hero__content.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

.cs4h-card--pink.has-global-padding {
	padding: var(--wp--preset--spacing--40);
}

.cs4h-card--panel.has-global-padding {
	padding: var(--wp--preset--spacing--60);
}

/* The hero column sits at the left content edge, not centred in it. */
.cs4h-hero__content {
	max-width: 40rem;
	margin-inline: 0 auto;
}

.cs4h-hero__content > * {
	margin-inline: 0;
}

/* Tighten the card rhythm: core adds block margins on top of our flex gap. */
.cs4h-card--pink > * + *,
.cs4h-card--panel > * + * {
	margin-block-start: 0;
}

/* Navigation and footer links carry their own affordances (the permanent
   underline for the current page, a hover underline in the footer), so they
   opt out of the global body-copy underline. */
a.cs4h-nav__link,
a.cs4h-footer__link,
a.cs4h-logo,
a.cs4h-filter,
a.cs4h-badge {
	text-decoration: none;
}

a.cs4h-nav__link:hover {
	text-decoration: none;
}

/* Core/cover lays its inner container out as a centred flex item, so it
   shrinks to its content instead of filling the content width — which pushed
   the hero column into the middle of the band. Make it fill, then cap it. */
.cs4h-hero.wp-block-cover {
	/* The cover is a grid; with `justify-content: center` its single track is
	   auto-sized, so the inner container shrank to its content and floated to
	   the middle of the band. One full-width track fixes it. */
	grid-template-columns: minmax(0, 1fr);
	justify-content: stretch;
	align-content: center;
}

.cs4h-hero.wp-block-cover > .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

/* The header shares the content container so the logo and the H1 below it sit
   on the same left edge, as they do in the design. */
.cs4h-header__inner {
	max-width: var(--wp--style--global--content-size);
}

/* -------------------------------------------------------------------------
   25. The cross lattice
       The brand's signature motif. Individual crosses rotate 45 degrees into
       an X on long, staggered cycles so the field reads as quietly alive
       rather than pulsing. Decorative throughout: aria-hidden in the markup,
       inert to the pointer, and completely still under reduced motion.
   ---------------------------------------------------------------------- */

.cs4h-lattice-layer {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
	/* Painted with currentColor; each context sets the tint below. */
	color: var(--wp--preset--color--white);
}

.cs4h-lattice {
	position: absolute;
	display: block;
	height: auto;
}

.cs4h-mark {
	/* fill-box keeps each cross rotating about its own centre rather than the
	   origin of the whole SVG. */
	transform-box: fill-box;
	transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
	.cs4h-mark {
		animation: cs4h-flip var(--cs4h-dur, 22s) ease-in-out var(--cs4h-delay, 0s) infinite;
	}
}

/* Mostly a plus, briefly a cross. The design shows only one or two marks
   turned at any moment, so the X state occupies about a tenth of each cycle
   and the turn itself is quick — a mark caught mid-rotation reads as an
   eight-pointed star, which is not in the brand language. */
@keyframes cs4h-flip {
	0%, 84% {
		transform: rotate(0deg);
	}

	86%, 96% {
		transform: rotate(45deg);
	}

	98%, 100% {
		transform: rotate(0deg);
	}
}

/* Hero — white, sitting over the photograph to the right of the headline. */
/* The hero layer lives inside the 1200px content container but the motif
   reaches past it; the cover's own `overflow: hidden` clips it at the band. */
.cs4h-lattice-layer--hero {
	overflow: visible;
}

.cs4h-lattice-layer--hero .cs4h-lattice {
	top: 4%;
	right: -6%;
	width: clamp(22rem, 46vw, 40rem);
}

/* Closing band — mint, mirroring the design's right-hand cascade. */
.cs4h-lattice-layer--cta {
	color: var(--wp--preset--color--mint);
}

.cs4h-lattice-layer--cta .cs4h-lattice {
	top: 50%;
	right: 0;
	translate: 0 -50%;
	width: clamp(20rem, 42vw, 36rem);
}

/* On narrow screens the motif becomes texture behind the text rather than a
   composition beside it, so it is pushed back and kept clear of the copy. */
@media (max-width: 860px) {
	.cs4h-lattice-layer--hero .cs4h-lattice {
		top: auto;
		bottom: -4%;
		right: -18%;
		width: 26rem;
		opacity: 0.7;
	}

	.cs4h-lattice-layer--cta .cs4h-lattice {
		top: auto;
		bottom: -10%;
		right: -22%;
		width: 24rem;
		opacity: 0.5;
	}
}

/* The closing band needs a stacking context so the lattice can sit behind the
   copy without escaping the section. */
.cs4h-section--pattern {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.cs4h-section--pattern > :not(.cs4h-lattice-layer) {
	position: relative;
	z-index: 3;
}

/* Card icon — the brand glyphs that head each challenge card. Decorative, so
   the alt text is empty and the shape carries no meaning of its own. */
.cs4h-card__icon {
	display: block;
	width: 3rem;
	height: 3rem;
	object-fit: contain;
	object-position: left center;
	margin-block-end: var(--wp--preset--spacing--20);
}

/* -------------------------------------------------------------------------
   26. Footer alignment
       Brand on the left, link columns hugging the right edge so they line up
       with the legal links in the bottom row.
   ---------------------------------------------------------------------- */

.cs4h-footer__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
	align-items: flex-start;
	justify-content: space-between;
}

.cs4h-footer__brand {
	flex: 1 1 18rem;
	min-width: 0;
}

.cs4h-footer__columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--60);
	margin-inline-start: auto;
	text-align: right;
}

.cs4h-footer__columns .cs4h-footer__list {
	/* Right-aligned links need the box to shrink to the text, or the hover and
	   focus targets would stretch across the whole column. */
	align-items: flex-end;
}

.cs4h-footer__columns .cs4h-footer__item {
	display: flex;
	justify-content: flex-end;
}

.cs4h-footer__tagline {
	margin-block-start: var(--wp--preset--spacing--30);
	max-width: 30ch;
}

/* The legal links already sit right; keep them on one line where they fit. */
.cs4h-footer__list--inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	justify-content: flex-end;
}

@media (max-width: 640px) {
	.cs4h-footer__columns {
		margin-inline-start: 0;
		text-align: left;
	}

	.cs4h-footer__columns .cs4h-footer__list {
		align-items: flex-start;
	}

	.cs4h-footer__columns .cs4h-footer__item {
		justify-content: flex-start;
	}

	.cs4h-footer__list--inline {
		justify-content: flex-start;
	}
}

/* -------------------------------------------------------------------------
   27. Left-aligned column inside a full-bleed band
       `.cs4h-band__content` is a constrained child, so core caps it at the
       content width and centres it — its left edge is therefore the content
       edge. Its own children opt out of that centring and align to it, which
       is what keeps the eyebrow, heading, copy and CTAs on one line.
   ---------------------------------------------------------------------- */

.cs4h-band__content > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.cs4h-band__content.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

.cs4h-band__content .cs4h-eyebrow {
	display: inline-flex;
}

/* Keep the copy clear of the lattice on the right. */
.cs4h-section--pattern .cs4h-band__content {
	max-width: min(var(--wp--style--global--content-size), 100%);
}

.cs4h-section--pattern .cs4h-band__content > :not(.wp-block-group) {
	max-width: 34rem;
}

@media (max-width: 860px) {
	.cs4h-section--pattern .cs4h-band__content > :not(.wp-block-group) {
		max-width: none;
	}
}

/* -------------------------------------------------------------------------
   28. Sections added from the Figma pages
   ---------------------------------------------------------------------- */

/* Shared-challenge statement — one line over the scattered character field. */
.cs4h-statement {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.cs4h-statement::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Scaled to the band's height and repeated across it. `cover` on a short,
	   very wide band magnifies the letterforms out of all proportion. */
	background: url("assets/img/pattern-06.svg") center / auto 150% repeat-x;
	opacity: 0.18;
	pointer-events: none;
}

.cs4h-statement > * {
	position: relative;
	z-index: 1;
}

.cs4h-statement__line {
	max-width: 30ch;
	margin-inline: auto !important;
	font-weight: 600;
	line-height: 1.35;
	text-wrap: balance;
}

/* Centred section intro. */
.cs4h-section__intro {
	max-width: 52ch;
	margin-inline: auto !important;
	color: var(--wp--custom--color--muted);
}

.cs4h-dark .cs4h-section__intro,
.has-dark-purple-background-color .cs4h-section__intro {
	color: var(--wp--custom--color--muted-on-dark);
}

.cs4h-section__action {
	display: flex;
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Panel list, marked with the brand cross rather than a bullet. */
.cs4h-panel,
.cs4h-panel :is(h1, h2, h3, h4, h5, h6),
.cs4h-panel p,
.cs4h-panel li {
	color: var(--wp--preset--color--dark-purple);
}

.cs4h-panel :is(p, li) {
	color: var(--wp--custom--color--muted);
}

.cs4h-panel__intro {
	max-width: 52ch;
	margin-inline: auto !important;
	color: var(--wp--custom--color--muted);
}

.cs4h-marked-list {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
	.cs4h-marked-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

.cs4h-marked-list > li {
	position: relative;
	padding-left: 2.25rem;
}

.cs4h-marked-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background:
		url("assets/img/mark-dark.svg") center / 58% no-repeat,
		var(--wp--preset--color--mint);
}

.cs4h-marked-list h3 {
	font-size: var(--wp--preset--font-size--heading-5);
	line-height: 1.3;
	margin: 0 0 0.35rem;
}

.cs4h-marked-list p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--custom--color--muted);
}

/* Resource tiles — the brand motif standing in for artwork, tinted per card. */
.cs4h-tile {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--off-white);
}

.cs4h-tile--purple {
	background: var(--wp--preset--color--dark-purple);
	color: var(--wp--preset--color--pink);
}

.cs4h-tile--mint {
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--dark-purple);
}

.cs4h-tile .cs4h-lattice-layer {
	color: inherit;
}

.cs4h-tile .cs4h-lattice {
	inset: 12%;
	width: 76%;
	top: 12%;
	left: 12%;
	right: auto;
}

/* An empty tile is a visible instruction to the editor, not a silent gap. */
.cs4h-tile--empty {
	border: 1px dashed var(--wp--custom--color--rule);
	background: var(--wp--preset--color--off-white);
}

.cs4h-output .cs4h-card,
.cs4h-partners .cs4h-partner {
	gap: 0.5rem;
}

.cs4h-output .cs4h-card__kicker {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Partner cards. */
.cs4h-partner {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--custom--color--rule);
	border-radius: var(--wp--custom--radius);
}

.cs4h-partner__logo {
	height: 3.5rem;
	margin-block-end: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius);
}

.cs4h-partner__logo img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

/* Interior page intro — a lighter tint of the hero band. */
.cs4h-pageintro {
	background: var(--wp--preset--color--off-white);
}

.cs4h-lattice-layer--intro {
	color: var(--wp--preset--color--dark-purple);
	opacity: 0.16;
	overflow: visible;
}

.cs4h-lattice-layer--intro .cs4h-lattice {
	top: 50%;
	right: -4%;
	translate: 0 -50%;
	width: clamp(16rem, 34vw, 30rem);
}

/* Full-bleed sections carry their own vertical padding, so the editor's default
   block gap between them shows up as a stripe of page background between two
   coloured bands. */
.wp-block-post-content > .alignfull,
.entry-content > .alignfull {
	margin-block: 0;
}

/* -------------------------------------------------------------------------
   29. Footer on white
   ---------------------------------------------------------------------- */

.cs4h-footer__heading {
	color: var(--wp--custom--color--muted);
}

.cs4h-footer__list a,
.cs4h-footer .cs4h-footer__link {
	color: var(--wp--preset--color--dark-purple);
}

.cs4h-footer__tagline {
	color: var(--wp--custom--color--muted);
}

.cs4h-footer__bottom {
	border-top-color: var(--wp--custom--color--rule);
	color: var(--wp--custom--color--muted);
}

/* Link columns are left-aligned on white, as in the design. */
.cs4h-footer__columns {
	text-align: left;
	gap: var(--wp--preset--spacing--70);
}

.cs4h-footer__columns .cs4h-footer__list {
	align-items: flex-start;
}

.cs4h-footer__columns .cs4h-footer__item {
	justify-content: flex-start;
}

.cs4h-footer__list a {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Funding marks sit at the end of the footer row, not in a band of their own. */
.cs4h-footer .cs4h-eu {
	flex: 0 0 auto;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	padding-block: 0;
}

.cs4h-footer__grid {
	align-items: flex-start;
}

@media (min-width: 900px) {
	.cs4h-footer .cs4h-eu {
		max-width: 18rem;
	}

	.cs4h-footer .cs4h-eu__text {
		flex: 1 1 auto;
		font-size: 0.75rem;
	}
}

/* -------------------------------------------------------------------------
   30. Corrections against the design screenshots
   ---------------------------------------------------------------------- */

/* Challenge cards put the icon beside the text, not above it. */
.cs4h-card--icon {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	align-items: start;
}

.cs4h-card--icon .cs4h-card__icon {
	grid-row: 1 / span 2;
	margin-block-end: 0;
	width: 2.75rem;
	height: 2.75rem;
}

.cs4h-card--icon .wp-block-heading {
	margin-block: 0.15rem 0.4rem;
}

.cs4h-card--icon p:not(.cs4h-card__kicker) {
	margin: 0;
}

/* The character field is a presence in the design, not a whisper. */
.cs4h-statement::before {
	background-size: auto 340%;
	opacity: 0.55;
}

.cs4h-statement {
	padding-block: var(--wp--preset--spacing--70);
}

/* "Practical" and "Project output" sit on off-white. */
.cs4h-section--offwhite {
	background: var(--wp--preset--color--off-white);
}

/* Resource tiles — a few large marks, as drawn. */
.cs4h-tile--crosses,
.cs4h-tile--x {
	background-repeat: no-repeat;
	background-position: center;
	background-size: 62%;
}

.cs4h-tile--crosses {
	background-color: var(--wp--preset--color--dark-purple);
	-webkit-mask: none;
	mask: none;
}

.cs4h-tile--crosses::after,
.cs4h-tile--x::after {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	-webkit-mask: var(--cs4h-tile-art) center / 62% no-repeat;
	mask: var(--cs4h-tile-art) center / 62% no-repeat;
}

.cs4h-tile--crosses {
	--cs4h-tile-art: url("assets/img/tile-crosses.svg");
	color: var(--wp--preset--color--pink);
}

.cs4h-tile--x {
	--cs4h-tile-art: url("assets/img/tile-x.svg");
	background-color: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--dark-purple);
}

/* "Why the approach matters" — list beside the logomark ring. */
.cs4h-approach__grid {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

@media (min-width: 900px) {
	.cs4h-approach__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	}
}

.cs4h-approach__body > .wp-block-heading {
	margin: 0 0 var(--wp--preset--spacing--50);
	max-width: 16ch;
}

.cs4h-approach__body .cs4h-cta {
	margin-block-start: var(--wp--preset--spacing--40);
}

.cs4h-ring {
	display: block;
	width: 100%;
	max-width: 26rem;
	height: auto;
	margin-inline: auto;
	color: var(--wp--preset--color--pink);
}

/* Testimonial. */
.cs4h-quote {
	margin: 0;
	background: var(--wp--preset--color--pink);
	color: var(--wp--preset--color--dark-purple);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.cs4h-quote__text {
	margin: 0;
	border: 0;
	padding: 0;
	max-width: 42ch;
}

.cs4h-quote__text p {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-3);
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.cs4h-quote__by {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--body);
}

.cs4h-quote__rule {
	width: 2.5rem;
	height: 2px;
	background: var(--wp--preset--color--dark-purple);
}

/* FAQ on an inset panel within the dark band. */
.cs4h-faqpanel {
	background: rgba(255, 255, 255, 0.05);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--60);
}

.cs4h-faqpanel > .wp-block-heading {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--white);
}

.cs4h-faqpanel .cs4h-faq {
	border-top: 0;
}

.cs4h-faqpanel .cs4h-faq__item {
	border-bottom-color: var(--wp--custom--color--rule-on-dark);
}

.cs4h-faqpanel .cs4h-faq__question {
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--white);
}

.cs4h-faqpanel .cs4h-faq__answer {
	color: var(--wp--custom--color--muted-on-dark);
}

/* The toggle is a circular outlined button; the plus turns into a cross. */
.cs4h-faqpanel .cs4h-faq__icon {
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--pink);
	display: grid;
	place-items: center;
}

.cs4h-faqpanel .cs4h-faq__icon::before,
.cs4h-faqpanel .cs4h-faq__icon::after {
	position: static;
	grid-area: 1 / 1;
	width: 0.6rem;
	height: 1.5px;
	background: var(--wp--preset--color--pink);
	inset: auto;
}

.cs4h-faqpanel .cs4h-faq__item[open] .cs4h-faq__icon::before {
	transform: rotate(45deg);
}

.cs4h-faqpanel .cs4h-faq__item[open] .cs4h-faq__icon::after {
	transform: rotate(-45deg);
}

/* Resource cards sit directly on the section ground; only the tile is a
   surface. A white card on off-white reads as an unintended box. */
.cs4h-output .cs4h-card,
.cs4h-output .cs4h-card:has(.cs4h-card__link) {
	background: transparent;
	overflow: visible;
}

.cs4h-output .cs4h-card__title a {
	text-decoration: none;
	color: inherit;
}

.cs4h-output .cs4h-card:has(.cs4h-card__link:hover) {
	box-shadow: none;
}

.cs4h-output .cs4h-card:has(.cs4h-card__link:hover) .cs4h-card__title {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Dark context is signalled either by our own class or by the core background
   class; muted text has to answer to both, or it renders dark-on-dark. */
.has-dark-purple-background-color .cs4h-ruled-list p,
.has-dark-purple-background-color .cs4h-marked-list p,
.has-dark-purple-background-color .cs4h-card__excerpt,
.has-dark-purple-background-color .cs4h-card__kicker {
	color: var(--wp--custom--color--muted-on-dark);
}

/* The panel is a light surface inside the dark band, so it must win back the
   dark-context muted colour applied above — otherwise its body copy renders
   near-white on off-white. Same specificity, declared later. */
.cs4h-panel .cs4h-marked-list p,
.cs4h-panel .cs4h-ruled-list p,
.cs4h-panel .cs4h-card__excerpt {
	color: var(--wp--custom--color--muted);
}

/* -------------------------------------------------------------------------
   31. Hero proportions
       The designed hero is roughly 1.9:1. The previous 38rem min-height gave
       about 3.16:1 at desktop, which cropped the photograph to a thin strip
       and lost the sky entirely.
   ---------------------------------------------------------------------- */

.cs4h-hero.wp-block-cover {
	min-height: clamp(26rem, 48vw, 52rem);
}

/* The complex sits low and right in the frame; bias the crop towards it so a
   wide viewport still shows the building rather than only treeline. */
.cs4h-hero > .wp-block-cover__image-background {
	object-position: 55% 68%;
}

@media (max-width: 860px) {
	.cs4h-hero > .wp-block-cover__image-background {
		object-position: 62% 72%;
	}
}

/* -------------------------------------------------------------------------
   32. Hero layering
       Order is: photograph (0), legibility scrim (1), content (3). The scrim
       is a pseudo-element, so it paints after the element's children — it
       needs an explicit z-index below the content or it greys out the
       headline.
   ---------------------------------------------------------------------- */

.cs4h-hero > .wp-block-cover__image-background {
	z-index: 0;
}

.cs4h-hero > .wp-block-cover__background {
	z-index: 1;
}

.cs4h-hero.wp-block-cover > .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;
}

/* -------------------------------------------------------------------------
   33. Hero scrim, corrected
       Earlier versions washed the entire band, hiding the photograph. The
       scrim exists only to keep the headline legible, so it must be clearly
       gone by the middle of the frame. Content sits above it.
   ---------------------------------------------------------------------- */

/* Core keeps the inner container at z-index 1, which put the copy underneath
   the scrim. */
.cs4h-hero.wp-block-cover > .wp-block-cover__inner-container {
	position: relative;
	z-index: 4 !important;
}

/* Show sky above the complex rather than only treeline. */
.cs4h-hero > .wp-block-cover__image-background {
	object-position: 58% 52%;
}

@media (max-width: 860px) {
	/* Narrow screens get a vertical scrim instead, since the copy sits over
	   the whole width. */
	.cs4h-hero::after {
		background: linear-gradient(
			to bottom,
			rgba(199, 215, 245, 0.96) 0%,
			rgba(199, 215, 245, 0.9) 45%,
			rgba(199, 215, 245, 0.55) 75%,
			rgba(199, 215, 245, 0.3) 100%
		);
	}

	.cs4h-hero__picture img,
	.cs4h-hero > .wp-block-cover__image-background {
		object-position: 62% 60%;
	}
}

/* -------------------------------------------------------------------------
   34. Hero proportion, matched to the design
       A min-height alone leaves the band far wider than the designed ~1.9:1
       at desktop widths, so `cover` crops the photograph to a middle strip and
       the sky never appears. An aspect ratio keeps nearly the whole frame.
   ---------------------------------------------------------------------- */

/* Sized by height, not aspect-ratio: an `alignfull` block has an auto width,
   so pairing aspect-ratio with max-height let the browser derive the WIDTH
   from the capped height and the band stopped short of the viewport edge. */
.cs4h-hero.wp-block-cover {
	/* 100 / 1.872 = 53.4vw reproduces the designed proportion exactly at the
	   width the design was drawn at, and up to ~1600px. The cap keeps the band
	   from swallowing the viewport on very wide screens, at the cost of a
	   slightly flatter crop there. */
	min-height: clamp(26rem, 53.4vw, 60rem);
	width: 100%;
}

@media (max-width: 860px) {
	.cs4h-hero.wp-block-cover {
		min-height: 32rem;
	}
}

/* -------------------------------------------------------------------------
   35. Header over the hero (front page only)
       In the design the logo and navigation sit on the blue of the hero, with
       no white bar above it. Interior pages keep the white header, so this is
       scoped to the front page rather than applied globally.
   ---------------------------------------------------------------------- */

body.home .cs4h-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 30;
	background: transparent;
	border-bottom: 0;
}

/* Clear the overlaid header so the headline never collides with it. */
body.home .cs4h-hero.wp-block-cover {
	padding-top: 7rem;
}

/* A dependable band of brand blue across the top, independent of whatever the
   photograph happens to show there — the header needs a consistent ground,
   and the haze in an aerial shot is not one. */
@media (max-width: 860px) {
	body.home .cs4h-hero.wp-block-cover {
		padding-top: 6rem;
	}
}

/* WordPress puts its default block gap between the header template part and
   <main>, which shows as a strip of page background above the first section.
   Sections carry their own padding, so no gap is wanted here. */
.wp-site-blocks > main,
main.wp-block-group {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------
   36. Interior page hero, and partner cards
   ---------------------------------------------------------------------- */

.cs4h-pagehero__grid {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

@media (min-width: 900px) {
	.cs4h-pagehero__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
	}
}

.cs4h-pagehero__body > .wp-block-heading {
	margin: 0.4rem 0 var(--wp--preset--spacing--30);
	max-width: 15ch;
}

.cs4h-pagehero__body > p {
	margin: 0;
}

.cs4h-pagehero--pink .cs4h-ring {
	color: var(--wp--preset--color--dark-purple);
	max-width: 24rem;
}

/* Headline figures, inline under the intro. */
.cs4h-figures {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--60);
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
}

.cs4h-figures > li {
	margin: 0;
}

.cs4h-figures__value {
	display: block;
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.cs4h-figures__label {
	display: block;
	margin-top: 0.3rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

/* Partner card. */
.cs4h-partners .cs4h-partner {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--custom--color--rule);
	border-radius: var(--wp--custom--radius);
	padding: 0;
	overflow: hidden;
	gap: 0;
}

.cs4h-partner__logo {
	display: grid;
	place-items: center;
	min-height: 9.5rem;
	padding: var(--wp--preset--spacing--40);
}

.cs4h-partner__logo img {
	max-height: 4.5rem;
	max-width: 70%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* An empty logo slot is an instruction to the editor, invisible to visitors. */
.cs4h-partner__logo--empty span {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--muted);
	text-align: center;
	border: 1px dashed var(--wp--custom--color--rule);
	border-radius: var(--wp--custom--radius);
	padding: 0.75rem 1rem;
}

.cs4h-partner .cs4h-card__title {
	margin: 0;
	padding: 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--h5, var(--wp--preset--font-size--heading-5));
}

.cs4h-partner .cs4h-card__title a {
	color: inherit;
	text-decoration: none;
}

.cs4h-partner .cs4h-card__title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.cs4h-partner .cs4h-card__excerpt {
	margin: 0.6rem 0 0;
	padding: 0 var(--wp--preset--spacing--40);
}

.cs4h-partner__place {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: auto 0 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--muted);
}

.cs4h-partner__pin {
	flex: 0 0 auto;
}

/* Join-the-network panel. */
.cs4h-joinpanel {
	background: var(--wp--preset--color--dark-purple);
	color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--60);
	max-width: 54rem;
}

.cs4h-joinpanel .wp-block-heading {
	color: var(--wp--preset--color--white);
	margin: 0.4rem 0 var(--wp--preset--spacing--30);
}

.cs4h-joinpanel p {
	color: var(--wp--custom--color--muted-on-dark);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.cs4h-joinpanel .cs4h-cta {
	color: var(--wp--preset--color--white);
}

/* -------------------------------------------------------------------------
   37. Shared-challenges band
       One dark band carrying the statement and the priorities panel, with the
       CS4H character field running behind both and the panel flush with the
       foot of the band — replacing the two separate sections, which broke the
       field in half and left a gap under the panel.
   ---------------------------------------------------------------------- */

.cs4h-sharedband {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.cs4h-sharedband > *:not(.cs4h-sharedband__field) {
	position: relative;
	z-index: 1;
}

.cs4h-sharedband__field {
	position: absolute;
	inset: 0;
	left: 50%;
	translate: -50% 0;
	/* Held to the page container rather than running to the viewport edges;
	   on a wide screen a full-bleed field spreads the glyphs far thinner than
	   the design intends. */
	width: min(90rem, 100%);
	z-index: 0;
	pointer-events: none;
	background: url("assets/img/pattern-06.svg") center / cover no-repeat;
	opacity: 0.5;
}

.cs4h-sharedband .cs4h-statement__line {
	max-width: 46ch;
	margin-inline: auto !important;
	margin-block-end: var(--wp--preset--spacing--70);
	font-weight: 400;
	line-height: 1.4;
}

/* The panel closes the band: its lower edge is the boundary with the next
   section, so there is no strip of dark purple beneath it. */
.cs4h-panel--flush {
	margin-block-end: 0 !important;
	padding-block-end: var(--wp--preset--spacing--70);
}

.cs4h-sharedband .cs4h-marked-list {
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

@media (max-width: 860px) {
	.cs4h-sharedband__field {
		width: 100%;
		opacity: 0.4;
	}
}

/* Core caps constrained children at the content width, which held the field to
   exactly the panel's width — so it never showed either side of it. The field
   is a backdrop, not content, so it opts out and runs wider; the panel then
   sits inside it, as drawn. */
.cs4h-sharedband > .cs4h-sharedband__field {
	max-width: none;
	width: min(90rem, 100%);
}

.cs4h-sharedband > .cs4h-panel--flush {
	max-width: min(62rem, 100%);
}

/* -------------------------------------------------------------------------
   38. Dark hero with a photograph (What we do)
   ---------------------------------------------------------------------- */

.cs4h-darkhero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(24rem, 42vw, 40rem);
	display: grid;
	/* One full-width track. Without it the single auto track shrinks to its
	   content and centres, putting the headline out of line with every other
	   section on the page. */
	grid-template-columns: minmax(0, 1fr);
	justify-content: stretch;
	align-content: center;
}

.cs4h-darkhero__photo {
	position: absolute;
	inset: 0 0 0 auto;
	width: 62%;
	height: 100%;
	object-fit: cover;
	object-position: 42% 40%;
	z-index: 0;
	max-width: none;
}

/* Carries the headline over the photograph and blends it into the band. */
.cs4h-darkhero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgba(45, 37, 66, 0.99) 0%,
		rgba(45, 37, 66, 0.97) 30%,
		rgba(45, 37, 66, 0.72) 46%,
		rgba(45, 37, 66, 0.3) 60%,
		rgba(45, 37, 66, 0.18) 100%
	);
}

.cs4h-lattice-layer--darkhero {
	color: var(--wp--preset--color--pink);
	opacity: 0.85;
	z-index: 2;
	overflow: visible;
}

.cs4h-lattice-layer--darkhero .cs4h-lattice {
	top: 50%;
	right: 4%;
	translate: 0 -50%;
	width: clamp(16rem, 32vw, 28rem);
}

.cs4h-darkhero > .cs4h-band__content {
	position: relative;
	z-index: 3;
}

@media (max-width: 860px) {
	.cs4h-darkhero__photo {
		width: 100%;
		object-position: 55% 30%;
	}

	.cs4h-darkhero__scrim {
		background: linear-gradient(
			to bottom,
			rgba(45, 37, 66, 0.96) 0%,
			rgba(45, 37, 66, 0.9) 50%,
			rgba(45, 37, 66, 0.82) 100%
		);
	}
}

/* -------------------------------------------------------------------------
   39. Core purpose statement
   ---------------------------------------------------------------------- */

.cs4h-purpose {
	text-align: center;
}

.cs4h-purpose__eyebrow {
	justify-content: center;
	margin-inline: auto !important;
	margin-block-end: var(--wp--preset--spacing--40);
}

.cs4h-purpose__line {
	max-width: 24ch;
	margin-inline: auto !important;
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -0.012em;
	text-wrap: balance;
}

/* -------------------------------------------------------------------------
   40. Numbered initiative cards
   ---------------------------------------------------------------------- */

.cs4h-initiatives {
	margin-block-start: var(--wp--preset--spacing--50);
}

.cs4h-initiative {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--custom--color--rule);
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
}

.cs4h-initiative__tile {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 11;
	background: var(--wp--preset--color--dark-purple);
	color: var(--wp--preset--color--mint);
}

.cs4h-numeral {
	width: 46%;
	height: auto;
	display: block;
}

.cs4h-initiative__body {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: var(--wp--preset--spacing--40);
	flex: 1 1 auto;
}

.cs4h-initiative .cs4h-card__title {
	margin: 0;
}

.cs4h-initiative .cs4h-card__excerpt {
	margin: 0;
	flex: 1 1 auto;
}

/* Small uppercase link with the brand's pink rule under it. */
.cs4h-textlink {
	align-self: flex-start;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dark-purple);
	text-decoration: none;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--wp--preset--color--pink);
	margin-block-start: 0.4rem;
}

.cs4h-textlink:hover {
	border-bottom-width: 2px;
}

/* A grid item without an explicit width is sized to its content, so the hero
   copy shrank to 911px and centred inside the track instead of sitting on the
   page's content edge. Give it the full track and let max-width plus auto
   margins do the centring, exactly as every other section does. */
.cs4h-darkhero {
	justify-items: stretch;
}

.cs4h-darkhero > .cs4h-band__content {
	width: 100%;
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   41. Resource tiles, sized from the design export
       Measured against the Figma screenshot: the cross mark is ~19% of the
       tile, and the X field runs nearly the full width rather than sitting in
       a tight cluster.
   ---------------------------------------------------------------------- */

.cs4h-tile {
	aspect-ratio: 297 / 235;
}

.cs4h-tile--crosses::after {
	-webkit-mask-size: 65%;
	mask-size: 65%;
}

.cs4h-tile--x::after {
	/* Measured against the export: the X field is inset, covering about two
	   thirds of the tile, not running to its edges. */
	-webkit-mask-size: 68%;
	mask-size: 68%;
}

/* The photo card is the tile itself, not a container for one. */
.cs4h-tile--photo {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	background: none;
}

/* -------------------------------------------------------------------------
   42. Brand photography
       The supplied images carry feathered alpha so they dissolve into the band
       colour behind them. That replaces the hand-built scrim on the hero — two
       overlapping washes made the photograph muddy.
   ---------------------------------------------------------------------- */

.cs4h-hero__picture {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	max-width: none;
}

.cs4h-hero__picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The file is already cropped to the design's framing (left 76.9% of the
	   source, solved by correlation against the Figma screenshot), with 200px
	   of latitude above and below — so dead centre is the designed band. */
	object-position: 50% 50%;
}


/* A <picture> wrapper, not a bare <img>. The 4/3 aspect-ratio on
   .cs4h-card__media was written for the image itself; applied to the wrapper it
   crops the brand image's feathered edges, which are exactly what lets it blend
   into the band. So this keeps the image's own proportions. */
.cs4h-media {
	display: block;
	aspect-ratio: auto;
	background: none;
}

.cs4h-media img {
	display: block;
	width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
   43. Logomark ring rotation
       Figma "Frame 7" specifies the ring in two states: every mark turns 45°
       at the same moment, which swaps each one between + and X. Because the
       marks have 90° symmetry, a second 45° step returns them to the starting
       shape — so the cycle runs 0 → 45 → 90 and loops seamlessly rather than
       snapping back.

       Rotation centres are written into the SVG as explicit user-unit
       transform-origins, so this does not depend on transform-box: fill-box.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.cs4h-ring__mark {
		animation: cs4h-ring-flip var(--cs4h-ring-dur, 9s) ease-in-out infinite;
	}
}

@keyframes cs4h-ring-flip {
	0%,
	40% {
		rotate: 0deg;
	}

	50%,
	90% {
		rotate: 45deg;
	}

	100% {
		rotate: 90deg;
	}
}

/* -------------------------------------------------------------------------
   44. Hero type
       Scoped to the hero rather than changed in theme.json, so the global type
       scale — and every other page using it — is untouched.
   ---------------------------------------------------------------------- */

/* Core emits .has-heading-1-font-size { font-size: … !important }, so a plain
   declaration here loses no matter how specific the selector is. */
.cs4h-hero h1.wp-block-heading {
	font-size: clamp(2rem, 1.5909rem + 1.7455vw, 3rem) !important;
}

.cs4h-hero__intro {
	font-size: clamp(1.125rem, 1.0966rem + 0.1212vw, 1.25rem) !important;
}

/* The design sets the intro in a markedly narrower column than the 65ch
   default, which also keeps it inside the scrim's strong zone. The selector has
   to out-specify the constrained-layout reset in section 24
   (.cs4h-hero__content.is-layout-constrained > *, which sets max-width: none at
   0-3-0) — source order alone does not win against it. */
.cs4h-hero__content.is-layout-constrained > .cs4h-hero__intro {
	max-width: 46ch;
}

/* -------------------------------------------------------------------------
   45. Partner logo strip
       The band between the closing CTA and the footer: hairline rules, one row
       of logos on white. Rendered by cs4h/partner-logos from the Partners
       content type, so it is the same component on every page.

       Every logo sits in a fixed-width cell with a fixed gap, so the row keeps
       its rhythm no matter how many partners there are, and a wide wordmark
       cannot crowd out a compact one. One pass is therefore exactly
       count x (cell + gap) wide, which makes the loop seamless by arithmetic:
       the block lays down two passes, the track is max-content wide, and
       translating it by -50% advances by exactly one pass.

       The trailing gap belongs to the pass, not to the track, so the spacing
       across the seam matches the spacing inside a pass.

       A pass must never be narrower than the screen, or the same logo shows up
       twice at once. The block passes the partner count in as a custom
       property, so the gap can hold its fixed 140px and open up only on a
       screen wide enough to need it. Six partners give a 1920px pass, which is
       already most desktops; eight or ten never need the adjustment at all.
   ---------------------------------------------------------------------- */

.cs4h-logostrip {
	--cs4h-logostrip-cell: 180px;
	--cs4h-logostrip-gap-min: 140px;

	/*
	 * Fixed cell, fixed gap — until a pass would come out narrower than the
	 * screen, which is when the same logo starts appearing twice at once. Then
	 * the gap opens up just enough for one pass to span the viewport. With six
	 * partners that kicks in above roughly 1920px; with eight or ten the fixed
	 * 140px already covers any real screen and this never applies. The 24px is
	 * slack: without it a pass lands exactly on the viewport width and sub-pixel
	 * rounding can still let a sliver of the next logo show.
	 */
	--cs4h-logostrip-gap:
		max(
			var(--cs4h-logostrip-gap-min),
			calc((100vw + 24px) / var(--cs4h-logostrip-count, 6) - var(--cs4h-logostrip-cell))
		);

	background: var(--wp--preset--color--white);
	border-block: 1px solid var(--wp--custom--color--rule);
	padding-block: var(--wp--preset--spacing--40);
	overflow: hidden;
}

/* The under-hero band runs straight from the photograph into the section
   below, so it carries no rules — only the footer band is divided off. */
.cs4h-logostrip--flush {
	border-block: 0;
}

.cs4h-logostrip__track {
	display: flex;
	width: max-content;
}

.cs4h-logostrip__list {
	display: flex;
	align-items: center;
	gap: var(--cs4h-logostrip-gap);
	padding-inline-end: var(--cs4h-logostrip-gap);
	flex: 0 0 auto;
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

.cs4h-logostrip__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--cs4h-logostrip-cell);
}

.cs4h-logostrip__item a {
	display: block;
	transition: opacity var(--wp--custom--transition) ease;
}

.cs4h-logostrip__item a:hover,
.cs4h-logostrip__item a:focus-visible {
	opacity: 0.7;
}

.cs4h-logostrip img {
	display: block;
	max-height: 3.125rem;
	max-width: 100%;
	width: auto;
	height: auto;
	margin-inline: auto;
	object-fit: contain;
}

@media (prefers-reduced-motion: no-preference) {
	.cs4h-logostrip__track {
		animation: cs4h-logoscroll var(--cs4h-logoscroll-dur, 60s) linear infinite;
	}

	/*
	 * WCAG 2.2.2: motion that starts on its own needs a way to stop it. Hover
	 * covers the pointer case and focus-within the keyboard case, so a visitor
	 * tabbing to a partner link is not chasing a moving target.
	 */
	.cs4h-logostrip:hover .cs4h-logostrip__track,
	.cs4h-logostrip:focus-within .cs4h-logostrip__track {
		animation-play-state: paused;
	}
}

@keyframes cs4h-logoscroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* Without motion the design's static, evenly spread row is the right answer;
   the second pass would just be a copy sitting off to the side. */
@media (prefers-reduced-motion: reduce) {
	.cs4h-logostrip {
		/* The scrolling gap is sized to outrun the viewport, which would push a
		   static row onto a second line. A still row only has to fit. */
		--cs4h-logostrip-gap: var(--wp--preset--spacing--40);
	}

	.cs4h-logostrip__list[aria-hidden="true"] {
		display: none;
	}

	.cs4h-logostrip__track {
		width: auto;
	}

	.cs4h-logostrip__list {
		flex-wrap: wrap;
		justify-content: space-between;
		max-width: var(--wp--style--global--content-size);
		margin-inline: auto;
		padding-inline: var(--wp--preset--spacing--30);
	}

	.cs4h-logostrip__item {
		/* Let cells shrink so the whole consortium still makes one row. */
		flex: 0 1 var(--cs4h-logostrip-cell);
	}
}

@media (max-width: 860px) {
	.cs4h-logostrip {
		--cs4h-logostrip-cell: 130px;
		--cs4h-logostrip-gap: 72px;
	}

	.cs4h-logostrip img {
		max-height: 2.5rem;
	}
}

/* -------------------------------------------------------------------------
   46. Footer brand column and funding statement
       Both were being squeezed into a fraction of the space actually available:
       the brand block is ~1050px wide at the content width, but the tagline was
       capped at 30ch (breaking "care" onto its own line) and the funding
       statement was collapsing to under 300px and running to fifteen lines.

       The cap stops well short of the menu column on the right. That column is
       right-aligned and grows downward as menu items are added, but it also
       grows *wider* with a longer label, so the gap here is deliberately
       generous rather than just enough today.
   ---------------------------------------------------------------------- */

.cs4h-footer__tagline {
	/* The tagline is 51 characters; anything less than that wraps the last
	   word on its own, which reads like a mistake. */
	max-width: 56ch;
}

.cs4h-footer .cs4h-eu {
	flex: 1 1 auto;
	max-width: min(100%, 56rem);
	flex-wrap: nowrap;
	align-items: flex-start;
}

.cs4h-footer .cs4h-eu__text {
	flex: 1 1 auto;
	max-width: none;
	/* Smaller, but not so small that a funding condition reads as fine print:
	   the extra width is doing most of the work here, not the type size. */
	font-size: 0.6875rem;
	line-height: 1.6;
}

@media (max-width: 860px) {
	.cs4h-footer .cs4h-eu {
		flex-wrap: wrap;
	}
}

/* -------------------------------------------------------------------------
   47. Page opening bands, statements and timelines
       Shared by About, and by the other interior pages that open on a flat
       colour band rather than a photograph.
   ---------------------------------------------------------------------- */

.cs4h-pagehero {
	position: relative;
	overflow: hidden;
}

.cs4h-pagehero__marks {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(46%, 34rem);
	display: grid;
	place-items: center;
	pointer-events: none;
}

.cs4h-pagehero__marks svg {
	width: 100%;
	height: auto;
}

/* On the mint band the marks are the dark brand purple, at two weights —
   the design alternates solid and washed-back crosses. */
.cs4h-pagehero--mint {
	color: var(--wp--preset--color--dark-purple);
}

.cs4h-pagehero--mint .cs4h-pagehero__marks {
	color: var(--wp--preset--color--dark-purple);
	opacity: 0.85;
}

.cs4h-pagehero__intro {
	margin-block-start: var(--wp--preset--spacing--30);
}

@media (max-width: 860px) {
	.cs4h-pagehero__marks {
		/* Behind the copy rather than beside it, so the headline keeps its
		   measure instead of being squeezed into a column. */
		width: 100%;
		opacity: 0.25;
	}
}

/* A single centred statement of purpose.
   Named cs4h-mission, not cs4h-statement: that class already belongs to the
   quote band, which paints a character field behind itself. */
.cs4h-mission {
	text-align: center;
}

.cs4h-mission__text {
	font-size: var(--wp--preset--font-size--heading-3);
	line-height: 1.35;
	max-width: 26ch;
	margin-inline: auto;
	text-wrap: balance;
}

.cs4h-eyebrow--centred {
	justify-content: center;
	margin-inline: auto;
}

/* The dated timeline. A list, because it is an ordered sequence — screen
   readers announce the count, and the numbering carries real meaning. */
.cs4h-timeline {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.cs4h-timeline__item {
	position: relative;
	padding-inline-start: var(--wp--preset--spacing--50);
}

/* The rule runs between markers rather than behind them, so it never shows
   through the mint dot. */
.cs4h-timeline__item::before {
	content: "";
	position: absolute;
	inset-block-start: 1.6rem;
	inset-block-end: calc(var(--wp--preset--spacing--50) * -1);
	inset-inline-start: 0.6rem;
	width: 1px;
	background: var(--wp--custom--color--rule);
}

.cs4h-timeline__item:last-child::before {
	display: none;
}

.cs4h-timeline__marker {
	position: absolute;
	inset-block-start: 0.15rem;
	inset-inline-start: 0;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--mint);
	display: grid;
	place-items: center;
}

/* The brand cross, drawn small inside the dot. */
.cs4h-timeline__marker::after {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	background: var(--wp--preset--color--dark-purple);
	mask: url("assets/img/mark.svg") center / contain no-repeat;
	-webkit-mask: url("assets/img/mark.svg") center / contain no-repeat;
}

.cs4h-timeline__year {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--dark-purple);
}

.cs4h-timeline__title {
	margin: 0.15rem 0 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
}

.cs4h-timeline__body {
	margin: 0.25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--muted);
	max-width: 60ch;
}

/* -------------------------------------------------------------------------
   48. Placeholder notice
       Marks content carried over from the visual design that is not yet real.
       Deliberately visible to visitors, not just editors: these pages are held
       back from search engines while under review, and the greater risk is
       sample figures quietly becoming "the numbers" once the page goes live.
   ---------------------------------------------------------------------- */

.cs4h-placeholder-note {
	border: 1px dashed var(--wp--preset--color--pink);
	border-radius: var(--wp--custom--radius);
	background: color-mix(in srgb, var(--wp--preset--color--pink) 14%, transparent);
	padding: 0.75rem 1rem;
	margin-block-end: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dark-purple);
	max-width: 70ch;
}

.cs4h-dark .cs4h-placeholder-note,
.has-dark-purple-background-color .cs4h-placeholder-note {
	color: var(--wp--preset--color--off-white);
}

/* The opening headline is held to its own column: the design breaks it over
   three lines and keeps it clear of the cross field on the right. */
.cs4h-pagehero .cs4h-band__content > h1,
.cs4h-pagehero .cs4h-band__content > .cs4h-pagehero__intro {
	max-width: 22ch;
}

.cs4h-pagehero .cs4h-band__content > .cs4h-pagehero__intro {
	max-width: 48ch;
}

.cs4h-mission__text {
	font-size: var(--wp--preset--font-size--heading-2);
	max-width: 24ch;
}

/* -------------------------------------------------------------------------
   49. Case library
       Filter chips, a search field and the card grid from the Case library
       frame. Cards are links in full, so the whole tile is the target rather
       than just the title.
   ---------------------------------------------------------------------- */

.cs4h-library__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--50);
}

.cs4h-library__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.cs4h-chip {
	border: 1px solid var(--wp--custom--color--rule);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark-purple);
	border-radius: 999px;
	padding: 0.55rem 1.15rem;
	font-size: var(--wp--preset--font-size--small);
	font-family: inherit;
	cursor: pointer;
	transition: background var(--wp--custom--transition) ease,
		color var(--wp--custom--transition) ease,
		border-color var(--wp--custom--transition) ease;
}

.cs4h-chip:hover {
	border-color: var(--wp--preset--color--dark-purple);
}

.cs4h-chip.is-active {
	background: var(--wp--preset--color--dark-purple);
	border-color: var(--wp--preset--color--dark-purple);
	color: var(--wp--preset--color--white);
}

.cs4h-library__search {
	position: relative;
	flex: 0 1 20rem;
}

.cs4h-library__input {
	width: 100%;
	height: var(--wp--custom--control-height);
	border: 1px solid var(--wp--custom--color--rule);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	padding-inline: 1.15rem 2.75rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dark-purple);
}

.cs4h-library__icon {
	position: absolute;
	inset-inline-end: 1rem;
	inset-block-start: 50%;
	translate: 0 -50%;
	width: 1rem;
	height: 1rem;
	opacity: 0.55;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1a6 6 0 1 0 3.7 10.7l3.3 3.3 1-1-3.3-3.3A6 6 0 0 0 7 1Zm0 1.5A4.5 4.5 0 1 1 7 11.5 4.5 4.5 0 0 1 7 2.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1a6 6 0 1 0 3.7 10.7l3.3 3.3 1-1-3.3-3.3A6 6 0 0 0 7 1Zm0 1.5A4.5 4.5 0 1 1 7 11.5 4.5 4.5 0 0 1 7 2.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}

.cs4h-library__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.cs4h-rescard__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.cs4h-rescard__media {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--dark-purple);
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
	display: grid;
	place-items: center;
	margin-block-end: var(--wp--preset--spacing--20);
}

.cs4h-rescard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The design's fallback tile: the brand mark in pink on the dark purple. */
.cs4h-rescard__mark {
	width: 42%;
	aspect-ratio: 1;
	background: var(--wp--preset--color--pink);
	mask: url("assets/img/tile-crosses.svg") center / contain no-repeat;
	-webkit-mask: url("assets/img/tile-crosses.svg") center / contain no-repeat;
}

.cs4h-rescard__type {
	margin: 0;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--color--muted);
}

.cs4h-rescard__title {
	margin: 0.3rem 0 0;
	font-size: var(--wp--preset--font-size--heading-5);
}

.cs4h-rescard__link:hover .cs4h-rescard__title,
.cs4h-rescard__link:focus-visible .cs4h-rescard__title {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.cs4h-rescard__excerpt {
	margin: 0.4rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--muted);
}

.cs4h-rescard--empty {
	opacity: 0.45;
}

.cs4h-library__empty {
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--custom--color--muted);
}

/* Library hero furniture: the mint pill eyebrow and the underlined phrase. */
.cs4h-pagehero--soft {
	background: var(--wp--preset--color--off-white);
}

.cs4h-pagehero__marks--wide {
	width: min(52%, 40rem);
	color: var(--wp--preset--color--white);
	opacity: 1;
}

.cs4h-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--dark-purple);
	border-radius: 999px;
	padding: 0.35rem 0.9rem;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
}

.cs4h-pill::before {
	content: "";
	width: 0.7rem;
	height: 0.7rem;
	background: currentColor;
	mask: url("assets/img/mark.svg") center / contain no-repeat;
	-webkit-mask: url("assets/img/mark.svg") center / contain no-repeat;
}

/* A mint rule under the second half of the headline, as in the design. The
   underline is drawn rather than using text-decoration so its weight and
   distance from the baseline can be set. */
.cs4h-underline {
	background-image: linear-gradient(var(--wp--preset--color--mint), var(--wp--preset--color--mint));
	background-repeat: no-repeat;
	background-position: 0 92%;
	background-size: 100% 0.14em;
}

.cs4h-pagehero--soft .cs4h-band__content > h1 {
	max-width: 18ch;
}

/* -------------------------------------------------------------------------
   50. Policy pages
       The two-column legal layout: a table of contents and a contact card that
       stay with the reader, beside the policy sections.
   ---------------------------------------------------------------------- */

.cs4h-legal {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	align-items: start;
}

@media (max-width: 860px) {
	.cs4h-legal {
		grid-template-columns: minmax(0, 1fr);
	}
}

.cs4h-legal__aside {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	position: sticky;
	/* Clears the sticky header, which is why this is not simply 0. */
	top: 6rem;
}

@media (max-width: 860px) {
	.cs4h-legal__aside {
		position: static;
	}
}

.cs4h-legal__toc {
	background: var(--wp--preset--color--off-white);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--40);
}

.cs4h-legal__toc-title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--heading-5);
}

.cs4h-legal__toc-group {
	margin: var(--wp--preset--spacing--20) 0 0.35rem;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--color--muted);
}

.cs4h-legal__toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.35rem;
}

.cs4h-legal__toc a {
	color: var(--wp--preset--color--dark-purple);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
}

.cs4h-legal__toc a:hover,
.cs4h-legal__toc a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.cs4h-legal__contact {
	background: var(--wp--preset--color--dark-purple);
	color: var(--wp--preset--color--off-white);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--40);
}

.cs4h-legal__contact h2 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--heading-5);
	color: inherit;
}

.cs4h-legal__contact p {
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--small);
}

.cs4h-legal__contact a {
	color: var(--wp--preset--color--mint);
}

.cs4h-legal__updated {
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--20);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.75;
}

.cs4h-legal__section + .cs4h-legal__section {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* The pink rule under a section heading, as in the design. */
.cs4h-legal__heading {
	margin: 0.4rem 0 var(--wp--preset--spacing--30);
	padding-block-end: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--pink);
	font-size: var(--wp--preset--font-size--heading-3);
}

/* Policy prose pasted in from Iubenda: each block gets the mint edge the
   design uses, so the generated markup needs no hand-editing to fit. */
.cs4h-legal__section h3 {
	margin: var(--wp--preset--spacing--30) 0 0.3rem;
	padding-inline-start: var(--wp--preset--spacing--20);
	border-inline-start: 2px solid var(--wp--preset--color--mint);
	font-size: var(--wp--preset--font-size--body);
}

.cs4h-legal__section h3 + p,
.cs4h-legal__section h3 + ul {
	padding-inline-start: var(--wp--preset--spacing--20);
	border-inline-start: 2px solid var(--wp--preset--color--mint);
	margin-block-start: 0;
}

.cs4h-pagehero--pink .cs4h-pagehero__marks {
	color: var(--wp--preset--color--pink);
}

/* -------------------------------------------------------------------------
   51. Case detail
       The dark opening band carries the title beside a small facts panel, as
       in the case frame; the body then runs on the light ground below it.
   ---------------------------------------------------------------------- */

.cs4h-casehero {
	color: var(--wp--preset--color--off-white);
}

.cs4h-casehero__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: start;
}

@media (max-width: 860px) {
	.cs4h-casehero__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.cs4h-casehero h1 {
	color: var(--wp--preset--color--white);
	max-width: 18ch;
}

.cs4h-casehero__summary {
	color: var(--wp--preset--color--off-white);
	max-width: 46ch;
	opacity: 0.85;
}

/* The facts panel: a slightly lighter block on the dark band, ruled between
   rows rather than boxed, which is what the design shows. */
.cs4h-facts {
	margin: 0;
	background: rgba(255, 255, 255, 0.06);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.cs4h-facts__row {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-block: 0.8rem;
}

.cs4h-facts__row + .cs4h-facts__row {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.cs4h-facts dt {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.75;
}

.cs4h-facts dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-align: end;
}

/* The lead image straddles the join between the dark band and the body, as in
   the design, so it reads as one composition rather than two stacked blocks. */
.cs4h-casebody__media {
	margin-block-start: calc(var(--wp--preset--spacing--60) * -1);
	margin-block-end: var(--wp--preset--spacing--50);
}

.cs4h-casebody__media img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius);
	display: block;
}

.cs4h-pill--case {
	margin-block-end: var(--wp--preset--spacing--20);
}

/* The dark band sets a light link colour for everything inside it, which on
   the mint pill left the label invisible. The pill owns its own colours. */
/* Out-specifies .has-dark-purple-background-color a:not(…):not(…) (0-3-1),
   which was painting the label mint on the mint pill. */
.cs4h-casehero .cs4h-pill.cs4h-pill--case,
.cs4h-casehero .cs4h-pill.cs4h-pill--case a:not(.cs4h-cta) {
	color: var(--wp--preset--color--dark-purple);
	text-decoration: none;
}

.cs4h-casehero .cs4h-pill.cs4h-pill--case a:hover,
.cs4h-casehero .cs4h-pill.cs4h-pill--case a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* -------------------------------------------------------------------------
   52. What we do hero, on the supplied artwork
       The brand image carries its own purple wash and cross marks, so this only
       has to place it. The earlier scrim and lattice overlay are gone — stacked
       on top of artwork that already has them, they buried the corridor.
   ---------------------------------------------------------------------- */

.cs4h-darkhero {
	position: relative;
	overflow: hidden;
	min-height: clamp(22rem, 38vw, 34rem);
	display: grid;
	align-items: center;
}

.cs4h-darkhero__picture {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	/* Core's constrained layout caps every child at the content width. On an
	   absolutely positioned element that max-width still applies, so inset: 0
	   sized this to 1200px and the photograph covered only the left half of the
	   band. Same trap as section 24, in a new place. */
	max-width: none;
}

.cs4h-darkhero__picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% 50%;
	max-width: none;
}

.cs4h-darkhero > .cs4h-band__content {
	position: relative;
	z-index: 2;
}

/* The design breaks the headline over two lines and keeps the copy clear of
   the figure. */
.cs4h-darkhero h1 {
	max-width: 14ch;
}

.cs4h-darkhero__intro {
	max-width: 42ch;
}

@media (max-width: 860px) {
	.cs4h-darkhero__picture img {
		object-position: 62% 50%;
	}

	.cs4h-darkhero h1,
	.cs4h-darkhero__intro {
		max-width: none;
	}
}