/**
 * Kemak — design tokens + global frame.
 *
 * Layered on top of the stock _s style.css (enqueued after it). Hand-authored
 * plain CSS using custom properties so brand values change in one place and no
 * build step is required. Mobile-first; bandwidth-conscious. Two self-hosted
 * web fonts (subset .woff2, font-display: swap): Bricolage Grotesque ExtraBold
 * for headings + card titles, Source Sans 3 for body/UI text. No icon fonts —
 * social icons are inline SVG.
 *
 * @package Kemak
 */

/* =========================================================================
 * 0. Fonts (self-hosted, subset .woff2)
 *
 * Both families are open-source and ship self-hosted in the theme:
 * Bricolage Grotesque ExtraBold (assets/fonts/bricolage/) and Source Sans 3
 * (assets/fonts/source-sans/), the maintained release of Source Sans Pro.
 * ====================================================================== */

/* Headings + card titles — Bricolage Grotesque ExtraBold (weight 800 only). */
@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/bricolage/BricolageGrotesque-ExtraBold.woff2") format("woff2");
	/* Latin (U+0000–00FF + common punctuation/symbols). */
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/bricolage/BricolageGrotesque-ExtraBold-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Body + UI text — Source Sans 3 (variable wght axis, so one file per subset
   covers 400–700; the font-weight range lets the browser instance any weight). */
@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/source-sans/SourceSans3-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/source-sans/SourceSans3-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Source Sans 3";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/source-sans/SourceSans3-Italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Source Sans 3";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/source-sans/SourceSans3-Italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
 * 1. Design tokens
 * ====================================================================== */
:root {
	/* Brand palette — placeholder NGO greens + warm accent. Swap to the real
	   Kemak brand colours here and the whole site follows. */
	--kemak-green-900: #0f3d2e;
	--kemak-green-700: #1b6b4c;
	--kemak-green-500: #33a15f;
	--kemak-accent:    #f6a623;
	--kemak-accent-600: #d98a12;

	/* Neutrals */
	--kemak-ink:     #1d2421;
	--kemak-body:    #3c4a44;
	--kemak-muted:   #586660; /* AA on white for normal text (~4.7:1). */
	--kemak-line:    #e2e8e4;
	--kemak-surface: #f6f8f7;
	--kemak-white:   #ffffff;

	/* Semantic roles */
	--kemak-primary:        var(--kemak-green-500);
	--kemak-primary-dark:   var(--kemak-green-700);
	--kemak-link:           var(--kemak-green-700);
	--kemak-link-hover:     var(--kemak-green-500);

	/* Layout */
	--kemak-container: 1180px;
	--kemak-gutter: 1.25rem;
	--kemak-card-gap: 1.5rem; /* Uniform spacing between cards in grids/carousels. */
	--kemak-radius-sm: 4px;  /* Tags / badges. */
	--kemak-radius: 8px;     /* Buttons. */
	--kemak-radius-lg: 12px; /* Cards, inner content cards and form fields. */
	--kemak-hero-pad-bottom: 100px; /* full-hero content inset; shared by the social rail */

	/* Type scale */
	--kemak-font-base: 1rem;
	--kemak-leading: 1.6;
	--kemak-heading-leading: 1.15; /* Tight line-height for section headings. */

	/* Font families. System stacks are the swap fallback while web fonts load
	   (font-display: swap) and the permanent fallback if a file is missing. */
	--kemak-font-heading: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
	--kemak-font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* =========================================================================
 * 2. Base tweaks
 * ====================================================================== */
body,
button,
input,
select,
optgroup,
textarea {
	font-family: var(--kemak-font-body);
}

body {
	color: var(--kemak-body);
	line-height: var(--kemak-leading);
}

/* Reset stray margin: body_class() adds `.page`/`.post` on the <body> of
 * static front pages and singular views, which would otherwise inherit the
 * `.post, .page { margin: 0 0 1.5em }` rule from style.css and leave white
 * space below the footer. Scoped to body so real content articles keep their
 * spacing; `body.page` (0,1,1) outranks the bare `.page` (0,1,0). */
body.post,
body.page {
	margin: 0;
}

/* Text selection — brand green block with white text. */
::selection {
	background: var(--kemak-primary);
	color: var(--kemak-white);
}

::-moz-selection {
	background: var(--kemak-primary);
	color: var(--kemak-white);
}

/* Headings + card/section titles — Bricolage Grotesque ExtraBold. The single
   800 face is used for every heading; the explicit weight guarantees the
   ExtraBold cut even where a lighter weight was previously set. Title/heading
   utility classes are listed for the cases where they sit on a non-heading tag
   (e.g. an <a> or <div>). */
h1,
h2,
h3,
h4,
h5,
h6,
.kemak-card__title,
.kemak-page-header__title,
.kemak-banner__title,
.kemak-related__title,
.kemak-team-tier__title,
.kemak-pub__title,
.kemak-events-section__title,
.kemak-focus-section__title,
.kemak-policylist__title,
.kemak-valuecard__title,
.kemak-step__title,
.kemak-mv__title,
.site-footer__heading,
.kemak-factbox__heading,
.kemak-related__heading,
.kemak-block__heading,
.kemak-hero__heading,
.kemak-ctaband__heading,
.kemak-contact__heading {
	font-family: var(--kemak-font-heading);
	font-weight: 800;
}

/* Tight, uniform line-height for section headings. */
.kemak-factbox__heading,
.kemak-related__heading,
.kemak-block__heading,
.kemak-hero__heading,
.kemak-ctaband__heading,
.kemak-contact__heading,
.kemak-fs-head__title,
.kemak-stories-header__title {
	line-height: var(--kemak-heading-leading);
}

a {
	color: var(--kemak-link);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

a:hover,
a:focus {
	color: var(--kemak-link-hover);
}

/* Shared content container. */
.site-footer__inner {
	max-width: var(--kemak-container);
	margin-inline: auto;
	padding-inline: var(--kemak-gutter);
}

/* =========================================================================
 * 3. Header — white logo block + stacked utility/nav column
 *
 * A white logo block sits on the left at full header height; to its right a
 * column stacks the email/phone utility bar above the primary nav. The column
 * is brand-green by default. On the home page the whole header is lifted out of
 * flow to overlay the full-screen hero (see the home overrides at the end of
 * the nav section).
 * ====================================================================== */
.site-headwrap {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--kemak-primary-dark);
}

.site-headwrap__inner {
	display: flex;
	align-items: stretch;
}

.site-branding {
	display: flex;
	align-items: center;
	background: var(--kemak-white);
	padding: 0.4rem clamp(1rem, 3vw, 2rem);
	transition: padding-block 1s ease;
}

/* When collapsed, keep tidy breathing room above and below the smaller logo
   (see .kemak-logo img collapse rule). */
.site-headwrap.is-collapsed .site-branding {
	padding-top: 9px;
	padding-bottom: 9px;
}

.site-headwrap__col {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* --- Utility bar (email / phone, right-aligned) ----------------------- */
/* Hidden on mobile for a cleaner header; restored at the desktop breakpoint. */
.site-utilitybar {
	display: none;
	background: var(--kemak-primary-dark);
	color: var(--kemak-white);
	font-size: 0.85rem;
	overflow: hidden;
	transition: max-height 1s ease, opacity 1s ease;
}

.site-utilitybar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.75rem;
	align-items: center;
	justify-content: flex-end;
	padding: 0.3rem clamp(1rem, 3vw, 2rem);
}

.site-utilitybar__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-utilitybar__label {
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.site-utilitybar a {
	color: var(--kemak-white);
	text-decoration: none;
}

.site-utilitybar a:hover,
.site-utilitybar a:focus {
	color: var(--kemak-accent);
}

/* =========================================================================
 * 4. Social icon list (shared: footer + hero rail)
 * ====================================================================== */
.kemak-social {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kemak-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	color: inherit;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.kemak-social a:hover,
.kemak-social a:focus {
	background: var(--kemak-accent);
	color: var(--kemak-primary-dark);
}

.kemak-logo img {
	display: block;
	height: 38px; /* Explicit height so percentage-sized SVG logos scale correctly. */
	width: auto;
	max-width: 100%;
	transition: height 1s ease;
}

/* Collapsed: shrink the logo further so it + padding stays compact on scroll. */
.site-headwrap.is-collapsed .kemak-logo img {
	height: 32px;
}

.kemak-logo--text {
	font-weight: 700;
	font-size: 1.35rem;
	color: var(--kemak-primary-dark);
	text-decoration: none;
}

/* =========================================================================
 * 5. Primary navigation (segmented bar; works with _s js .toggled)
 * ====================================================================== */
.site-header {
	flex: 1 1 auto;
	display: flex;
}

.main-navigation {
	width: 100%;
}

/* Mobile: nav collapses behind a square hamburger button (top-right). */
.main-navigation {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
}

.main-navigation .menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px; /* Match the logo height. */
	height: 38px;
	margin: 0.55rem clamp(1rem, 3vw, 2rem);
	background: var(--kemak-primary);
	border: 0;
	border-radius: var(--kemak-radius);
	padding: 0;
	cursor: pointer;
}

/* The three bars: stacked with even spacing between them. */
.menu-toggle__bars {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.menu-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--kemak-white);
	transition: transform 0.3s ease, opacity 0.2s ease;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation ul li {
	position: relative;
}

/* Mobile drawer links sit on a white panel, so they read dark. */
.main-navigation a {
	display: block;
	padding: 0.85rem clamp(1rem, 3vw, 2rem);
	color: var(--kemak-ink);
	text-decoration: none;
	font-weight: 600;
}

/* Hover / active styling for the white mobile drawer lives in the mobile
   media block below — keeping it out of the global base so it can't leak onto
   the desktop menu, which sits on the dark green bar. */

/* Dropdown parents ("About", "Our Work") get a caret affordance. */
.main-navigation .menu-item-has-children > a {
	align-items: center;
	gap: 0.35rem;
}

.main-navigation .menu-item-has-children > a::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	margin-top: -0.2em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
}

.main-navigation .menu-item-has-children:hover > a::after,
.main-navigation .menu-item-has-children:focus-within > a::after {
	transform: translateY(0.15em) rotate(225deg);
}

/* "Partner With Us" — solid green block. */
.main-navigation .menu-cta > a,
.main-navigation .menu-cta > a:hover,
.main-navigation .menu-cta > a:focus {
	background: var(--kemak-primary);
	color: var(--kemak-white);
}

.main-navigation .menu-cta > a:hover,
.main-navigation .menu-cta > a:focus {
	background: var(--kemak-green-700);
}

/* --- Mobile off-canvas drawer (slides in from the left) --------------- */
@media (max-width: 767.98px) {
	/* Mobile header: solid white (matching the logo's white background), with a
	   slightly smaller logo and a little more breathing room around it. A
	   hairline separates the white bar from the page below.

	   The .is-collapsed variants are pinned to the same values so the
	   scroll-driven collapse no longer resizes the logo on mobile (the utility
	   bar it was tied to is hidden here anyway). */
	.site-headwrap {
		background: var(--kemak-white);
		border-bottom: 1px solid var(--kemak-line);
	}

	.site-branding,
	.site-headwrap.is-collapsed .site-branding {
		padding-top: 0.85rem;
		padding-bottom: 0.85rem;
	}

	.kemak-logo img,
	.site-headwrap.is-collapsed .kemak-logo img {
		height: 38px;
	}

	/* Dimmed scrim over the page behind the drawer. */
	.site-drawer__backdrop {
		position: fixed;
		inset: 0;
		z-index: 40;
		background: rgba(15, 61, 46, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	.main-navigation.toggled .site-drawer__backdrop {
		opacity: 1;
		visibility: visible;
	}

	/* The white panel itself: off-screen left until opened. */
	.site-drawer {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 50;
		width: min(82vw, 360px);
		display: flex;
		flex-direction: column;
		background: var(--kemak-white);
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
		transform: translateX(-100%);
		transition: transform 0.35s ease;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.main-navigation.toggled .site-drawer {
		transform: translateX(0);
	}

	/* Drawer header: logo + green close (X) button. */
	.site-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.5rem clamp(1rem, 3vw, 2rem);
	}

	/* Pull the logo left to align its artwork with the menu items below — the
	   logo image carries transparent space on its left, so its anchor (which
	   shares the menu's left padding) renders indented. Tune if needed. */
	.site-drawer__head .kemak-logo {
		margin-left: -1rem;
	}

	.menu-close {
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px; /* Match the hamburger. */
		height: 38px;
		padding: 0;
		border: 0;
		border-radius: var(--kemak-radius);
		background: var(--kemak-primary);
		cursor: pointer;
	}

	.menu-close__icon {
		position: relative;
		display: block;
		width: 22px;
		height: 22px;
	}

	.menu-close__icon::before,
	.menu-close__icon::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 22px;
		height: 2px;
		border-radius: 2px;
		background: var(--kemak-white);
	}

	.menu-close__icon::before {
		transform: translateY(-50%) rotate(45deg);
	}

	.menu-close__icon::after {
		transform: translateY(-50%) rotate(-45deg);
	}

	/* Reveal the top-level menu; nested submenus accordion via .is-open. */
	.main-navigation.toggled #primary-menu {
		display: block;
		width: 100%;
		padding: 0.5rem 0 1.5rem;
	}

	/* Drawer is white, so hover/active items read dark on a subtle grey. */
	.main-navigation a:hover,
	.main-navigation a:focus,
	.main-navigation .current-menu-item > a {
		color: var(--kemak-green-700);
		background: var(--kemak-surface);
	}

	/* Submenus sit in-flow (push siblings down), not as an absolute overlay,
	   and collapse via an animatable max-height (JS sets the open height). The
	   `.toggled` scope outweighs stock _s `.main-navigation.toggled ul`. */
	.main-navigation.toggled .sub-menu {
		position: static;
		float: none;
		left: auto;
		top: auto;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		box-shadow: none;
		background: var(--kemak-surface);
		transition: max-height 0.35s ease, visibility 0s linear 0.35s;
	}

	/* Open: reveal immediately; the height itself animates (max-height is set
	   inline by kemak.js to the measured content height). */
	.main-navigation.toggled .menu-item-has-children.is-open > .sub-menu {
		visibility: visible;
		transition: max-height 0.35s ease, visibility 0s;
	}

	.main-navigation .sub-menu a {
		width: auto; /* Override stock _s `.main-navigation ul ul a { width: 200px }`. */
		padding-left: calc(clamp(1rem, 3vw, 2rem) + 1rem);
		font-weight: 500;
	}

	/* Parent rows: the label sits beside a tappable round chevron button
	   (injected by kemak.js). The submenu wraps full-width onto the next line. */
	.main-navigation .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.main-navigation .menu-item-has-children > a {
		flex: 1 1 auto;
	}

	/* The inline caret is replaced by the dedicated button on mobile. */
	.main-navigation .menu-item-has-children > a::after {
		display: none;
	}

	.main-navigation .sub-menu {
		flex-basis: 100%;
	}

	.submenu-toggle {
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.25rem;
		height: 2.25rem;
		margin-right: clamp(1rem, 3vw, 2rem);
		padding: 0;
		background: transparent;
		border: 1px solid var(--kemak-line);
		border-radius: 50%;
		color: var(--kemak-ink);
		cursor: pointer;
	}

	.submenu-toggle__icon {
		display: block;
		width: 0.5rem;
		height: 0.5rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.3s ease;
	}

	.menu-item-has-children.is-open > .submenu-toggle .submenu-toggle__icon {
		transform: translateY(2px) rotate(225deg);
	}

	/* The parent of the current page reads as the active section: its own row
	   takes the same subtle grey as a current top-level item (e.g. Home),
	   while its submenu (below) takes the active green. */
	.main-navigation .is-current-section {
		background: var(--kemak-surface);
	}

	.main-navigation .is-current-section > a {
		color: var(--kemak-green-700);
	}

	/* The submenu holding the current page takes the active (green) background
	   — flagged by kemak.js as .is-current-section. */
	.main-navigation .is-current-section > .sub-menu {
		background: var(--kemak-primary);
	}

	.main-navigation .is-current-section > .sub-menu a {
		color: var(--kemak-white);
	}

	.main-navigation .is-current-section > .sub-menu a:hover,
	.main-navigation .is-current-section > .sub-menu a:focus,
	.main-navigation .is-current-section > .sub-menu .current-menu-item > a,
	.main-navigation .is-current-section > .sub-menu .current_page_item > a {
		color: var(--kemak-white);
		background: var(--kemak-green-700);
	}

	/* Email / phone below the menu — the desktop utility bar is hidden on
	   mobile, so surface the contact details inside the drawer.
	   NB: these are <a> inside .main-navigation, so the selectors are scoped to
	   .site-drawer__contact to outrank the `.main-navigation a` menu styles. */
	.site-drawer__contact {
		display: flex;
		flex-direction: column;
		gap: 1.1rem;
		padding: 1.4rem clamp(1rem, 3vw, 2rem) 1.75rem;
	}

	.site-drawer__contact .site-drawer__contact-item,
	.site-drawer__contact .site-drawer__contact-item:hover,
	.site-drawer__contact .site-drawer__contact-item:focus {
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
		padding: 0;            /* reset .main-navigation a padding */
		background: none;      /* reset .main-navigation a:hover highlight */
		text-decoration: none;
	}

	.site-drawer__contact-label {
		font-size: 0.68rem;
		font-weight: 700;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		color: var(--kemak-muted);
	}

	.site-drawer__contact-value {
		font-size: 1rem;
		font-weight: 600;
		color: var(--kemak-ink);
		word-break: break-word;
	}

	.site-drawer__contact .site-drawer__contact-item:hover .site-drawer__contact-value,
	.site-drawer__contact .site-drawer__contact-item:focus .site-drawer__contact-value {
		color: var(--kemak-green-700);
	}

	/* Lock the page behind the open drawer. */
	body.drawer-open {
		overflow: hidden;
	}
}

/* Respect reduced-motion: collapse/expand instantly, no height animation. */
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
	.main-navigation.toggled .sub-menu,
	.main-navigation.toggled .menu-item-has-children.is-open > .sub-menu {
		transition: none;
	}
}

/* Desktop dropdowns: no fade/slide for reduced-motion users (instant reveal). */
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
	.main-navigation ul ul,
	.main-navigation .menu > li:hover > ul,
	.main-navigation .menu > li:focus-within > ul {
		transform: none;
		transition: none;
	}
}

@media (min-width: 768px) {
	.main-navigation .menu-toggle {
		display: none;
	}

	/* Drawer chrome is mobile-only; on desktop the wrapper collapses out of
	   the layout so the menu flexes horizontally exactly as before. */
	.site-drawer {
		display: contents;
	}

	.site-drawer__head,
	.site-drawer__backdrop,
	.site-drawer__contact,
	.submenu-toggle {
		display: none;
	}

	/* Desktop menu sits on the dark green bar, so links read white. */
	.main-navigation a {
		color: var(--kemak-white);
	}

	.main-navigation a:hover,
	.main-navigation a:focus,
	.main-navigation .current-menu-item > a {
		color: var(--kemak-white);
		background: rgba(255, 255, 255, 0.1);
	}

	.main-navigation,
	.primary-menu-container {
		display: flex;
		width: 100%;
		/* Override the base `align-items: center` (used to center the mobile
		   hamburger) so the menu stretches to the full header height. */
		align-items: stretch;
	}

	.main-navigation ul {
		display: flex;
		align-items: stretch;
		justify-content: flex-end;
		flex-wrap: nowrap;
		width: 100%;
	}

	/* Top-level items become full-height cells divided by hairline rules. */
	.main-navigation .menu > li {
		display: flex;
		align-items: stretch;
		border-left: 1px solid rgba(255, 255, 255, 0.18);
	}

	.main-navigation .menu > li > a {
		display: flex;
		align-items: center;
		padding: 0 clamp(0.85rem, 1.5vw, 1.45rem);
		white-space: nowrap;
	}

	/* Sub-menus: white dropdown panels. Hidden state is animatable (opacity +
	   slide) rather than display:none so they can fade/slide in and out. The
	   transition defined here is the HOVER-OUT one — faster (180ms). */
	.main-navigation ul ul {
		display: block; /* Stack items vertically; overrides `.main-navigation ul { display: flex }`. */
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 20;
		width: max-content;
		background: var(--kemak-white);
		border: 1px solid var(--kemak-line);
		border-radius: 0 0 var(--kemak-radius) var(--kemak-radius);
		box-shadow: 0 12px 28px rgba(15, 61, 46, 0.18);
		padding: 0.35rem;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-32px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
	}

	/* Desktop dropdowns are hover/focus-only. `.is-open` is a mobile-accordion
	   class (and is also set on the current section for the drawer); it must NOT
	   reveal dropdowns here or they'd stick open after a click / on load. The
	   transition here is the HOVER-IN one: fade in + slide down 32px over 300ms. */
	.main-navigation .menu > li:hover > ul,
	.main-navigation .menu > li:focus-within > ul {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
	}

	.main-navigation ul ul li {
		display: block;
		border-left: 0;
	}

	.main-navigation ul ul a {
		display: block;
		width: auto; /* Override stock _s style.css `.main-navigation ul ul a { width: 200px }`. */
		padding: 0.55rem 20px;
		color: var(--kemak-ink);
		border-radius: 4px;
		white-space: nowrap;
	}

	.main-navigation ul ul a:hover,
	.main-navigation ul ul a:focus,
	.main-navigation ul ul .current-menu-item > a,
	.main-navigation ul ul .current_page_item > a,
	.main-navigation ul ul .current-menu-ancestor > a {
		color: var(--kemak-white);
		background: var(--kemak-primary);
	}

	/* Fixed bar heights: 32px dark-green utility strip, 48px nav row. */
	.site-utilitybar__inner {
		min-height: 32px;
		padding-block: 0;
	}

	.site-header {
		min-height: 48px;
	}

	/* Collapsing header: the utility bar height is exactly what the branding
	   box loses, so collapsing it makes .site-branding match the nav row. */
	.site-utilitybar {
		display: block;
		max-height: 32px;
	}

	.site-headwrap.is-collapsed .site-utilitybar {
		max-height: 0;
		opacity: 0;
	}

	/* Fixed (not sticky) on desktop so collapsing the bar never reflows the
	   page. A sticky height change shifts the content below it, and the
	   browser's scroll-anchoring then yanks the scroll position back across
	   the collapse trigger — toggling the class repeatedly (the flicker). */
	.site-headwrap {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	/* Offset content by the expanded header height (utility 32 + nav 48). */
	.site-main {
		padding-top: 80px;
	}

	/* Home: the hero sits full-screen behind the transparent overlay header. */
	body.home .site-main {
		padding-top: 0;
	}

	/* --- Home: lift the header out of flow to overlay the hero --------- */
	body.home .site-headwrap {
		position: fixed;
		inset: 0 0 auto 0;
		z-index: 10;
		background: transparent;
		transition: background-color 1s ease;
	}

	/* Once the hero is scrolled away the bar sits over page content, so it
	   needs a solid background for legibility. */
	body.home .site-headwrap.is-collapsed {
		background: var(--kemak-primary-dark);
	}

	/* Navbar itself has no background — the hero's dark overlay carries it. */
	body.home .site-header {
		background: transparent;
	}
}

/* =========================================================================
 * 7. Footer
 * ====================================================================== */
.site-footer {
	background: var(--kemak-green-900);
	color: rgba(255, 255, 255, 0.82);
}

.site-footer a {
	color: var(--kemak-white);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--kemak-accent);
}

.site-footer__inner {
	padding-top: 3.5rem;
}

/* --- Top: brand + contact (left) | newsletter signup (right) --------------- */
.site-footer__top {
	display: grid;
	gap: 2.5rem;
}

/* Let the grid tracks shrink below their content's intrinsic width on narrow
 * screens (prevents the newsletter pill from forcing horizontal overflow). */
.site-footer__brand,
.site-footer__signup {
	min-width: 0;
}

@media (min-width: 900px) {
	.site-footer__top {
		grid-template-columns: 1.1fr 1fr;
		gap: 4rem;
		align-items: start;
	}
}

.site-footer__brand .kemak-logo img {
	height: 64px;
}

.site-footer__contact {
	margin-top: 1.75rem;
	font-style: normal;
	line-height: 1.7;
}

.site-footer__contact p {
	margin: 0 0 0.85rem;
}

.site-footer__address {
	margin-bottom: 1.25rem; /* A touch more space before the phone/email rows. */
}

.site-footer__phone a {
	font-weight: 600;
}

.site-footer__contact-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
}

.site-footer__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	transition: color 0.3s ease;
}

.site-footer__contact-icon svg {
	width: 1rem;
	height: 1rem;
}

/* --- Newsletter signup ----------------------------------------------------- */
.site-footer__signup-title {
	margin: 0 0 1.5rem;
	max-width: 18ch;
	font-family: var(--kemak-font-heading);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.15;
	color: var(--kemak-white);
}

.site-footer__tagline {
	margin: 1.5rem 0 0;
	max-width: 42ch;
	color: rgba(255, 255, 255, 0.82);
}

/* Restyle the embedded Fluent Form into a single rounded pill. */
.site-footer__form .fluentform {
	margin: 0;
	max-width: 100%;
}

.site-footer__form form.frm-fluent-form {
	width: 100%;
	max-width: 460px;
	padding: 0.4rem;
	background: var(--kemak-white);
	border-radius: var(--kemak-radius-lg);
	box-sizing: border-box;
}

.site-footer__form fieldset {
	min-inline-size: 0;
}

.site-footer__form .ff-column-container {
	min-width: 0;
}

/* Zero Fluent Forms' default 20px group margin, which would otherwise add dead
 * height below the row. Scoped with `form` to outrank `.ff-default .ff-el-group`. */
.site-footer__form form .ff-el-group {
	margin: 0;
}

/* The form ships as a 2-column layout; flatten it into a single pill row. */
.site-footer__form .ff-column-container {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
}

.site-footer__form .ff-t-cell {
	padding: 0 !important;
}

/* Email cell grows; button cell hugs its content (override inline flex-basis). */
.site-footer__form .ff-t-column-1 {
	flex: 1 1 auto !important;
	min-width: 0;
	padding-left: 1rem !important;
}

/* Button cell hugs the button instead of filling half the row, which would
 * otherwise starve the email cell of space (Fluent Form makes the submit
 * wrapper full-width by default). */
.site-footer__form .ff-t-column-2 {
	flex: 0 0 auto !important;
	width: max-content !important;
}

.site-footer__form .ff-t-column-2 .ff-el-group,
.site-footer__form .ff_submit_btn_wrapper {
	width: auto !important;
	min-width: 0 !important;
	flex: 0 0 auto !important;
}

.site-footer__form input.ff-el-form-control {
	width: 100%;
	min-width: 0;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--kemak-ink);
	font-size: 1rem;
}

.site-footer__form input.ff-el-form-control::placeholder {
	color: var(--kemak-muted);
}

.site-footer__form input.ff-el-form-control:focus {
	border: 0;
	outline: none;
	box-shadow: none;
}

.site-footer__form .ff_submit_btn_wrapper {
	flex: 0 0 auto;
}

/* Override Fluent Form's per-form inline custom CSS (blue, min-width:100%). */
.site-footer__form form.fluent_form_2 .ff-btn-submit.wpf_has_custom_css,
.site-footer__form .ff-btn-submit {
	min-width: 0;
	height: 44px;
	margin: 0; /* Cancel Fluent Forms' default 20px button margin-bottom. */
	padding: 0 1.5rem;
	border: 0;
	border-radius: var(--kemak-radius);
	background: var(--kemak-primary);
	color: var(--kemak-white);
	font-family: var(--kemak-font-heading);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.site-footer__form form.fluent_form_2 .ff-btn-submit.wpf_has_custom_css:hover,
.site-footer__form .ff-btn-submit:hover,
.site-footer__form .ff-btn-submit:focus {
	border: 0;
	background: var(--kemak-green-700);
	color: var(--kemak-white);
}

/* Validation errors drop below the pill instead of stretching it. */
.site-footer__form .ff-errors-in-stack,
.site-footer__form .error {
	margin-top: 0.6rem;
	color: #ffd2d2;
	font-size: 0.85rem;
}

/* --- Centred navigation between hairline rules ----------------------------- */
.site-footer__nav {
	margin-top: 2rem;
	padding-block: 1.2rem;
	border-top: 1px solid color-mix(in srgb, var(--kemak-primary) 30%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--kemak-primary) 30%, transparent);
}

.site-footer__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem 3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Once the row no longer fits on one line, stack the links into a centred
 * column instead of an uneven multi-row wrap. */
@media (max-width: 900px) {
	.site-footer__menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
}

.site-footer__menu a {
	font-family: var(--kemak-font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--kemak-primary);
}

.site-footer__menu .current-menu-item > a,
.site-footer__menu a:hover,
.site-footer__menu a:focus {
	color: var(--kemak-accent);
}

/* --- Watermark + legal: two siblings in normal flow. The watermark word is
 *     scaled by kemak.js to fill the content width (same fit routine as the
 *     partner wall); the legal row sits below it, so neither needs absolute
 *     positioning. ----------------------------------------------------------- */
.site-footer__base {
	margin-top: 2rem;
	overflow: hidden;
	line-height: 0; /* Trim the line box around the oversized watermark. */
}

.site-footer__watermark {
	display: block;
	width: 100%;
	color: rgba(255, 255, 255, 0.05);
	pointer-events: none;
	user-select: none;
}

.site-footer__watermark-inner {
	display: inline-block;
	white-space: nowrap;
	font-family: var(--kemak-font-heading);
	font-weight: 800;
	line-height: 0.8;
	text-transform: uppercase;
	/* Fallback size before the fit routine measures (and if JS is unavailable). */
	font-size: clamp(6rem, 30vw, 22rem);
}

.site-footer__legal {
	position: relative; /* Sit above the watermark without z-index gymnastics. */
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: 1.5rem; /* Sit clear below the watermark. */
	padding-bottom: 2rem;
	font-size: 0.9rem;
}

.site-footer__legal .site-info {
	margin: 0;
}

/* Footer social icons: outlined circles that fill on hover. */
.site-footer__social a {
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid rgba(255, 255, 255, 0.6);
}

.site-footer__social a:hover,
.site-footer__social a:focus {
	color: var(--kemak-green-900);
	background: var(--kemak-white);
	border-color: var(--kemak-white);
}

/* =========================================================================
 * 8. Page header (archive intro)
 * ====================================================================== */
.kemak-page-header {
	background: var(--kemak-surface);
	border-bottom: 1px solid var(--kemak-line);
}

.kemak-page-header__inner {
	max-width: var(--kemak-container);
	margin-inline: auto;
	padding: 2.5rem var(--kemak-gutter);
}

.kemak-page-header__title {
	margin: 0;
	color: var(--kemak-primary-dark);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.kemak-page-header__lead {
	margin: 0.5rem 0 0;
	max-width: 60ch;
	color: var(--kemak-muted);
	font-size: 1.1rem;
}

/* =========================================================================
 * 9. Content container + card grid
 * ====================================================================== */
.kemak-archive__body,
.kemak-single .kemak-single__layout,
.kemak-single .kemak-banner__inner,
.kemak-single .kemak-related,
.kemak-single .post-navigation {
	max-width: var(--kemak-container);
	margin-inline: auto;
	padding-inline: var(--kemak-gutter);
}

.kemak-archive__body {
	padding-block: 2.5rem;
}

.kemak-archive--publication .kemak-archive__body {
	padding-block: 5rem;
}

.kemak-grid {
	display: grid;
	gap: var(--kemak-card-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.kemak-grid--cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.kemak-grid--cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =========================================================================
 * 10. Cards
 * ====================================================================== */
.kemak-card {
	display: flex;
	flex-direction: column;
	background: var(--kemak-white);
	border: 1px solid var(--kemak-line);
	border-radius: var(--kemak-radius-lg);
	overflow: hidden;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.kemak-card:hover,
.kemak-card:focus-within {
	box-shadow: 0 12px 28px rgba(15, 61, 46, 0.12);
	transform: translateY(-2px);
}

.kemak-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--kemak-surface);
	overflow: hidden;
}

.kemak-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.programme-card__icon {
	width: 50% !important;
	height: 50% !important;
	margin: auto;
	object-fit: contain !important;
}

.kemak-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem;
}

.kemak-card__eyebrow {
	display: inline-block;
	margin-bottom: 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kemak-primary);
}

.kemak-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.2rem;
	line-height: 1.3;
}

.kemak-card__title a {
	color: var(--kemak-ink);
	text-decoration: none;
}

.kemak-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.kemak-card {
	position: relative;
}

.kemak-card__summary {
	margin: 0 0 1rem;
	color: var(--kemak-body);
}

.kemak-card__cta {
	margin-top: auto;
	font-weight: 700;
	color: var(--kemak-primary);
}

/* =========================================================================
 * 11. Single programme: banner, layout, factboxes
 * ====================================================================== */
.kemak-banner {
	background: var(--kemak-surface);
	border-bottom: 1px solid var(--kemak-line);
}

.kemak-banner--media {
	position: relative;
	background: var(--kemak-primary-dark);
	border-bottom: 0;
}

.kemak-banner__media {
	position: absolute;
	inset: 0;
}

.kemak-banner__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.4;
}

.kemak-banner__inner {
	position: relative;
	padding-block: 3rem;
}

.kemak-banner--media .kemak-banner__inner {
	color: var(--kemak-white);
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.kemak-banner__eyebrow {
	display: inline-block;
	margin-bottom: 0.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kemak-accent);
}

.kemak-banner__title {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3rem);
}

.kemak-banner--media .kemak-banner__title {
	color: var(--kemak-white);
}

.kemak-banner__lead {
	margin: 0.75rem 0 0;
	max-width: 60ch;
	font-size: 1.15rem;
}

.kemak-single__layout {
	display: grid;
	gap: 2.5rem;
	padding-block: 3rem;
}

@media (min-width: 880px) {
	.kemak-single__layout {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

.kemak-factbox {
	background: var(--kemak-surface);
	border: 1px solid var(--kemak-line);
	border-radius: var(--kemak-radius-lg);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

.kemak-factbox__heading {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--kemak-primary-dark);
}

.kemak-approaches {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kemak-approaches li {
	padding: 0.4rem 0 0.4rem 1.5rem;
	position: relative;
}

.kemak-approaches li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--kemak-green-500);
	font-weight: 700;
}

/* =========================================================================
 * 12. SDG chips
 * ====================================================================== */
.kemak-sdgs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kemak-sdg a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.6rem 0.3rem 0.35rem;
	border-radius: 999px;
	background: var(--sdg-color, #555);
	color: var(--sdg-text, #fff);
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
}

.kemak-sdg a:hover,
.kemak-sdg a:focus {
	color: var(--sdg-text, #fff);
	filter: brightness(0.92);
}

.kemak-sdg__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: rgba(127, 127, 127, 0.28);
	font-weight: 700;
}

/* =========================================================================
 * 13. Related cross-linked sections
 * ====================================================================== */
.kemak-related {
	padding-block: 1rem 2.5rem;
}

.kemak-related__heading {
	margin: 0 0 1.25rem;
	color: var(--kemak-primary-dark);
	font-size: 1.5rem;
}

.kemak-related__list {
	display: grid;
	gap: var(--kemak-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 620px) {
	.kemak-related__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 900px) {
	.kemak-related__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.kemak-related__item a {
	display: block;
	color: var(--kemak-ink);
	text-decoration: none;
	font-weight: 600;
}

.kemak-related__thumb {
	display: block;
	margin-bottom: 0.5rem;
	border-radius: var(--kemak-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--kemak-surface);
}

.kemak-related__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kemak-related--publication .kemak-related__thumb {
	aspect-ratio: 5 / 7;
}

.kemak-related__item a:hover .kemak-related__title,
.kemak-related__item a:focus .kemak-related__title {
	color: var(--kemak-primary);
}

.kemak-empty {
	max-width: var(--kemak-container);
	margin-inline: auto;
	padding: 2rem var(--kemak-gutter);
	color: var(--kemak-muted);
}

/* =========================================================================
 * 14. Team — tier sections, cards, grid
 * ====================================================================== */
.kemak-page-header__eyebrow {
	margin: 0 0 0.25rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kemak-primary);
}

.kemak-team-tier {
	margin-bottom: 3rem;
}

.kemak-team-tier__header {
	margin-bottom: 1.5rem;
	/* The underline is drawn on .kemak-team-tier__title (accent-coloured, per
	 * tier). No border here or the two would stack into a double underline. */
}

.kemak-team-tier__title {
	margin: 0;
	font-size: 1.6rem;
	color: var(--kemak-primary-dark);
}

.kemak-team-tier__title a {
	color: inherit;
	text-decoration: none;
}

.kemak-team-tier__desc {
	margin: 0.5rem 0 0;
	color: var(--kemak-muted);
}

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

@media (min-width: 640px) {
	.kemak-grid--team {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 960px) {
	.kemak-grid--team {
		grid-template-columns: repeat(4, 1fr);
	}
}

.team-card .kemak-card__media {
	aspect-ratio: 4 / 5;
}

.team-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.9) 0 18%, transparent 19%),
		radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.9) 0 32%, transparent 33%),
		var(--kemak-green-500);
}

.team-card__position {
	margin: 0.2rem 0 0;
	font-weight: 600;
	color: var(--kemak-primary);
}

.team-card__credentials {
	margin: 0.2rem 0 0;
	font-size: 0.9rem;
	color: var(--kemak-muted);
}

/* =========================================================================
 * 15. Team member profile (single)
 * ====================================================================== */
.kemak-single--team .kemak-profile {
	max-width: var(--kemak-container);
	margin-inline: auto;
	padding: 3rem var(--kemak-gutter);
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 800px) {
	.kemak-single--team .kemak-profile {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		align-items: start;
	}
}

.kemak-profile__photo {
	border-radius: var(--kemak-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--kemak-surface);
}

.kemak-profile__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kemak-profile__contact {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.kemak-profile__contact li {
	margin-bottom: 0.6rem;
	word-break: break-word;
}

.kemak-profile__contact-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--kemak-primary);
	text-decoration: none;
}

.kemak-profile__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.kemak-profile__contact-link:hover .kemak-profile__contact-icon,
.kemak-profile__contact-link:focus-visible .kemak-profile__contact-icon {
	background-color: var(--kemak-primary);
	color: #fff;
}

.kemak-profile__contact-icon svg {
	width: 1rem;
	height: 1rem;
}

.kemak-profile__eyebrow {
	margin: 0 0 0.25rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kemak-profile__eyebrow a {
	color: var(--kemak-primary);
	text-decoration: none;
}

.kemak-profile__name {
	margin: 0;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	color: var(--kemak-primary-dark);
}

.kemak-profile__position {
	margin: 0.5rem 0 0;
	font-size: 1.15rem;
	font-weight: 600;
}

.kemak-profile__credentials {
	margin: 0.25rem 0 0;
	color: var(--kemak-muted);
}

.kemak-profile__bio {
	margin-top: 1.5rem;
}

.kemak-profile__subheading {
	margin: 2rem 0 0.75rem;
	font-size: 1.2rem;
	color: var(--kemak-primary-dark);
}

.kemak-quals {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kemak-quals li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--kemak-line);
}

.kemak-quals__award {
	font-weight: 600;
}

.kemak-quals__inst {
	display: block;
	color: var(--kemak-muted);
	font-size: 0.9rem;
}

/* =========================================================================
 * 16. Chips (focus-area links, reusable)
 * ====================================================================== */
.kemak-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.kemak-chip {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: var(--kemak-surface);
	border: 1px solid var(--kemak-line);
	color: var(--kemak-primary-dark);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

.kemak-chip:hover,
.kemak-chip:focus {
	background: var(--kemak-primary);
	border-color: var(--kemak-primary);
	color: var(--kemak-white);
}

/* =========================================================================
 * 17. Filter bar (publication types, reusable)
 * ====================================================================== */
.kemak-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.kemak-filterbar__link {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	border: 1px solid var(--kemak-line);
	background: var(--kemak-white);
	color: var(--kemak-primary);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.kemak-filterbar__link:hover,
.kemak-filterbar__link:focus,
.kemak-filterbar__link.is-current {
	background: var(--kemak-primary);
	border-color: var(--kemak-primary);
	color: var(--kemak-white);
}

/* =========================================================================
 * 18. PDF download button (reusable)
 * ====================================================================== */
.kemak-pdf {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding: 0.55rem 0.9rem;
	border-radius: var(--kemak-radius);
	background: var(--kemak-primary);
	color: var(--kemak-white);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	line-height: 1.2;
}

.kemak-pdf:hover,
.kemak-pdf:focus {
	background: var(--kemak-primary-dark);
	color: var(--kemak-white);
}

.kemak-pdf__size {
	font-weight: 400;
	opacity: 0.85;
}

.kemak-pdf--block {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}

/* Keep the card's download button clickable above the title's stretched link. */
.publication-card__download {
	position: relative;
	z-index: 1;
	/* Full-width within the card body. */
	display: flex;
	width: 100%;
	align-self: stretch;
	justify-content: center;
}

/* =========================================================================
 * 19. Publications — grid, cards, single
 * ====================================================================== */
.kemak-grid--publications {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
	.kemak-grid--publications {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 960px) {
	.kemak-grid--publications {
		grid-template-columns: repeat(4, 1fr);
	}
}

.publication-card {
	border: 0;
}

.publication-card .kemak-card__media {
	aspect-ratio: 1 / 1.414;
	border-radius: var(--kemak-radius-lg);
}

.publication-card .kemak-card__body {
	padding-inline: 0;
}

.publication-card:hover,
.publication-card:focus-within {
	box-shadow: none;
	transform: none;
}

.publication-card .kemak-card__title a {
	transition: color 0.3s ease;
}

.publication-card:hover .kemak-card__title a,
.publication-card:focus-within .kemak-card__title a {
	color: var(--kemak-green-700);
}

.publication-card .kemak-card__media img {
	transition: transform 0.3s ease;
}

.publication-card:hover .kemak-card__media img,
.publication-card:focus-within .kemak-card__media img {
	transform: scale(1.04);
}

.publication-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, var(--kemak-green-700), var(--kemak-green-900));
	position: relative;
}

.publication-card__placeholder::after {
	content: "PDF";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.6);
	font-weight: 700;
	letter-spacing: 0.1em;
}

.publication-card__meta {
	margin: 0 0 1rem;
	color: var(--kemak-muted);
	font-size: 0.9rem;
}

/* Single publication layout */
.kemak-single--publication .kemak-pub {
	max-width: var(--kemak-container);
	margin-inline: auto;
	padding: 3rem var(--kemak-gutter);
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 800px) {
	.kemak-single--publication .kemak-pub {
		grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
		align-items: start;
	}
}

.kemak-pub__cover {
	border-radius: var(--kemak-radius-lg);
	overflow: hidden;
	aspect-ratio: 5 / 7;
	background: var(--kemak-surface);
	box-shadow: 0 12px 28px rgba(15, 61, 46, 0.14);
}

.kemak-pub__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kemak-pub__extlink {
	display: block;
	margin-top: 0.75rem;
	text-align: center;
	font-weight: 600;
}

.kemak-pub__eyebrow {
	margin: 0 0 0.25rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kemak-pub__eyebrow a {
	color: var(--kemak-primary);
	text-decoration: none;
}

.kemak-pub__title {
	margin: 0;
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	color: var(--kemak-primary-dark);
}

.kemak-pub__meta {
	margin: 0.5rem 0 0;
	color: var(--kemak-muted);
}

.kemak-pub__subheading {
	margin: 1.5rem 0 0.5rem;
	font-size: 1.1rem;
	color: var(--kemak-primary-dark);
}

.kemak-pub__abstract {
	margin-top: 1rem;
}

/* Reading measure — keep running body text on detail (single) pages at a
 * comfortable line length instead of stretching the full column width, which
 * forces the eye to travel too far. Applies to every single template's
 * content, plus the publication abstract. Headings/meta stay full width. */
.single .entry-content,
.single .kemak-pub__abstract,
.single .kemak-profile__bio {
	max-width: 68ch;
}

.kemak-single--publication .kemak-chips {
	margin-top: 2rem;
}

/* =========================================================================
 * 20. Buttons (reusable)
 * ====================================================================== */
.kemak-btn {
	display: inline-block;
	padding: 0.6rem 1.1rem;
	border-radius: var(--kemak-radius);
	background: var(--kemak-accent);
	color: var(--kemak-white);
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.kemak-btn:hover,
.kemak-btn:focus {
	background: var(--kemak-accent-600);
	color: var(--kemak-white);
}

.kemak-btn--full {
	display: block;
	margin-top: 1rem;
}

/* Solid green primary button (e.g. hero "Our Programmes"). */
.kemak-btn--primary,
.kemak-btn--primary:hover,
.kemak-btn--primary:focus {
	background: var(--kemak-primary);
	color: var(--kemak-white);
}

.kemak-btn--primary:hover,
.kemak-btn--primary:focus {
	background: var(--kemak-primary-dark);
}

/* =========================================================================
 * 21. Events — sections, cards (date badge), meta box
 * ====================================================================== */
.kemak-events-section {
	margin-block: 2.5rem;
}

.kemak-events-section + .kemak-events-section {
	margin-top: 5rem;
}

.kemak-events-section__title {
	margin: 0 0 2.5rem;
	font-size: 1.6rem;
	color: var(--kemak-primary-dark);
}

/* Event / News card — full-bleed image with a content panel that slides up on
   hover to reveal the "Read more" link. */
.event-card {
	position: relative;
	display: block;
	aspect-ratio: 247 / 326;
	min-height: 380px;
	border: 0;
	border-radius: var(--kemak-radius-lg);
	overflow: hidden;
	background: var(--kemak-green-900);
	box-shadow: 0 10px 30px rgba(15, 61, 46, 0.10);
}

.event-card:hover,
.event-card:focus-within {
	transform: none; /* The panel carries the motion, not the whole card. */
	box-shadow: 0 18px 44px rgba(15, 61, 46, 0.22);
}

.event-card__media {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	background: var(--kemak-surface);
	overflow: hidden;
}

.event-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.event-card:hover .event-card__media img,
.event-card:focus-within .event-card__media img {
	transform: scale(1.05);
}

.event-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(150deg, var(--kemak-green-500), var(--kemak-green-900));
}

/* Content panel — anchored to the bottom so it grows upward when revealing the
   "Read more" link, reading as a slide-up. */
.event-card__panel {
	position: absolute;
	right: 0.85rem;
	bottom: 0.85rem;
	left: 0.85rem;
	flex: none;
	padding: 1.15rem 1.3rem 1.25rem;
	background: rgba(255, 255, 255, 0.8);
	border-radius: var(--kemak-radius-lg);
	box-shadow: 0 12px 28px rgba(15, 61, 46, 0.18);
	transition: background-color 0.3s ease;
}

/* On hover/focus the panel goes fully opaque, on top of the card's other
   hover behaviour (shadow lift + image zoom). */
.event-card:hover .event-card__panel,
.event-card:focus-within .event-card__panel {
	background: var(--kemak-white);
}

.event-card__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.4rem 0.9rem;
	margin: 0 0 0.95rem;
	padding-bottom: 0.95rem;
	border-bottom: 1px solid var(--kemak-line);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--kemak-muted);
}

.event-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
}

.event-card__meta-icon {
	width: 1rem;
	height: 1rem;
	flex: none;
	color: var(--kemak-muted);
}

.event-card__location {
	flex: none;
	font-weight: 600;
	color: var(--kemak-muted);
}

.event-card__title {
	margin: 0 0 0.7rem;
	font-size: 1.3rem;
	line-height: 1.18;
}

.event-card__title a {
	color: var(--kemak-primary-dark);
}

/* The media link already covers the card; keep the title link from stretching
   over the panel so the "Read more" link stays clickable. */
.event-card .kemak-card__title a::after {
	content: none;
}

.event-card__summary {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--kemak-body);
}

/* Read more — collapsed until hover/focus, then the panel grows to reveal it. */
.event-card__more {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	max-height: 0;
	margin-top: 0;
	overflow: hidden;
	font-weight: 700;
	color: var(--kemak-muted);
	text-decoration: none;
	opacity: 0;
	transform: translateY(8px);
	transition: max-height 0.4s ease, margin-top 0.4s ease, opacity 0.3s ease, transform 0.4s ease;
}

.event-card:hover .event-card__more,
.event-card:focus-within .event-card__more {
	max-height: 3rem;
	margin-top: 1rem;
	opacity: 1;
	transform: translateY(0);
}

.event-card__more:hover .event-card__more-text,
.event-card__more:focus-visible .event-card__more-text {
	color: var(--kemak-primary-dark);
}

.event-card__more-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	border-radius: 50%;
	background: var(--kemak-accent);
	color: var(--kemak-white);
	transition: background 0.25s ease, transform 0.25s ease;
}

.event-card__more-arrow svg {
	display: block;
	width: 0.8rem;
	height: 0.8rem;
}

.event-card__more:hover .event-card__more-arrow {
	background: var(--kemak-accent-600);
	transform: translateX(2px);
}

.kemak-eventmeta__row {
	margin-bottom: 0.9rem;
}

.kemak-eventmeta__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--kemak-muted);
}

.kemak-eventmeta__value {
	display: block;
	font-weight: 600;
	color: var(--kemak-ink);
}

.kemak-eventmeta__link {
	font-weight: 600;
}

/* =========================================================================
 * 22. Stories — placeholder, pull quote, linked programme
 * ====================================================================== */
.story-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--kemak-accent), var(--kemak-green-500));
}

.kemak-pullquote {
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.5rem;
	border-left: 4px solid var(--kemak-accent);
	background: var(--kemak-surface);
	border-radius: 0 var(--kemak-radius) var(--kemak-radius) 0;
}

.kemak-pullquote p {
	margin: 0;
	font-size: 1.25rem;
	font-style: italic;
	color: var(--kemak-primary-dark);
}

.kemak-pullquote cite {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.9rem;
	font-style: normal;
	font-weight: 600;
	color: var(--kemak-muted);
}

.kemak-linkedprog__link {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--kemak-primary);
	text-decoration: none;
}

.kemak-linkedprog__link:hover,
.kemak-linkedprog__link:focus {
	text-decoration: underline;
}

.kemak-related--story {
	padding-bottom: 3rem;
}

/* =========================================================================
 * 22b. Featured-stories showcase (used by the Featured Stories block).
 * The /stories archive itself uses the standard card grid.
 * ====================================================================== */
.kemak-stories-header__inner {
	max-width: var(--kemak-container);
	margin-inline: auto;
	padding: 3rem var(--kemak-gutter) 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	align-items: flex-end;
	justify-content: space-between;
}

.kemak-stories-header__title {
	margin: 0;
	color: var(--kemak-primary-dark);
	font-size: clamp(1.8rem, 4vw, 2.4rem);
}

.kemak-stories-header__lead {
	margin: 0.5rem 0 0;
	max-width: 54ch;
	color: var(--kemak-muted);
}

/* Featured grid: large lead + stacked tiles. */
.kemak-featured {
	display: grid;
	gap: var(--kemak-card-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.kemak-featured {
		grid-template-columns: 1.55fr 1fr;
		align-items: stretch;
	}
}

.kemak-featured__col {
	display: grid;
	gap: var(--kemak-card-gap);
	grid-auto-rows: 1fr;
}

.kemak-fstory {
	position: relative;
	border-radius: var(--kemak-radius-lg);
	overflow: hidden;
	background: var(--kemak-surface);
	box-shadow: 0 6px 20px rgba(15, 61, 46, 0.06);
}

.kemak-fstory__link {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	min-height: 260px;
	padding: 1.75rem;
	color: var(--kemak-white);
	text-decoration: none;
	position: relative;
}

.kemak-fstory--lead .kemak-fstory__link {
	min-height: 560px;
}

.kemak-fstory__media {
	position: absolute;
	inset: 0;
}

.kemak-fstory__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Legibility scrim on image cards. */
.kemak-fstory.has-media .kemak-fstory__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba(8, 28, 20, 0.88) 0%, rgba(8, 28, 20, 0.4) 45%, rgba(8, 28, 20, 0) 78% );
}

.kemak-fstory__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	align-items: flex-start;
}

.kemak-fstory__tag {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border-radius: var(--kemak-radius-sm);
	background: var(--kemak-primary);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kemak-fstory__title {
	margin: 0;
	font-size: 1.4rem;
	line-height: 1.15;
	color: #fff;
}

.kemak-fstory--lead .kemak-fstory__title {
	font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.kemak-fstory__excerpt {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
}

.kemak-fstory__more {
	font-weight: 700;
	color: #fff;
}

.kemak-fstory__link:hover .kemak-fstory__title,
.kemak-fstory__link:focus .kemak-fstory__title {
	text-decoration: underline;
}

/* White tile (story without an image). */
.kemak-fstory--tile.no-media {
	background: var(--kemak-white);
	border: 1px solid var(--kemak-line);
	box-shadow: none;
}

.kemak-fstory--tile.no-media .kemak-fstory__link {
	justify-content: flex-start;
	color: var(--kemak-body);
}

.kemak-fstory--tile.no-media .kemak-fstory__body {
	height: 100%;
}

.kemak-fstory--tile.no-media .kemak-fstory__tag {
	background: transparent;
	border: 1px solid var(--kemak-primary);
	color: var(--kemak-primary-dark);
}

.kemak-fstory--tile.no-media .kemak-fstory__title {
	color: var(--kemak-primary);
}

.kemak-fstory--tile.no-media .kemak-fstory__excerpt {
	color: var(--kemak-body);
}

.kemak-fstory--tile.no-media .kemak-fstory__more {
	color: var(--kemak-primary-dark);
	margin-top: auto;
	padding-top: 0.75rem;
}

.kemak-stories-more {
	margin-top: 2.5rem;
}

@media (max-width: 600px) {
	.kemak-fstory--lead .kemak-fstory__link {
		min-height: 420px;
	}
}

/* Featured Stories block (the archive showcase, reusable on the homepage). */
.kemak-block.kemak-block--featured-stories {
	margin-block: 0; /* Two classes: beat .kemak-block's margin regardless of source order. */
	background: #ecedec;
	padding-block: 5rem; /* Band uses padding (not margin) so the background spans the full inset. */
}

.kemak-fs-head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 2.5rem;
}

.kemak-fs-head__title {
	margin: 0;
	color: var(--kemak-primary-dark);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.kemak-fs-head__lead {
	margin: 0.5rem 0 0;
	max-width: 54ch;
	color: var(--kemak-muted);
}

/* =========================================================================
 * 23. Focus-area hub (everything in one area)
 * ====================================================================== */
.kemak-focus-section {
	margin-bottom: 3rem;
}

.kemak-focus-section__title {
	margin: 0 0 1.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--kemak-line);
	font-size: 1.5rem;
	color: var(--kemak-primary-dark);
}

/* =========================================================================
 * 24. Policies — listing page, single nav
 * ====================================================================== */
.kemak-page-header__meta {
	margin: 0.5rem 0 0;
	color: var(--kemak-muted);
	font-size: 0.95rem;
}

.kemak-btn--ghost {
	background: transparent;
	border: 1px solid var(--kemak-primary);
	color: var(--kemak-primary);
}

.kemak-btn--ghost:hover,
.kemak-btn--ghost:focus {
	background: var(--kemak-primary);
	color: var(--kemak-white);
}

.kemak-policylist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kemak-policylist__item {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--kemak-line);
}

.kemak-policylist__item:first-child {
	border-top: 1px solid var(--kemak-line);
}

.kemak-policylist__text {
	flex: 1 1 60%;
	min-width: 0;
}

/* On small screens, give the text the full row so the Read/Download buttons
 * wrap onto their own line below it instead of squeezing to the right. */
@media (max-width: 600px) {
	.kemak-policylist__text {
		flex-basis: 100%;
	}
}

.kemak-policylist__title {
	margin: 0;
	font-size: 1.25rem;
}

.kemak-policylist__title a {
	color: var(--kemak-primary-dark);
	text-decoration: none;
}

.kemak-policylist__title a:hover,
.kemak-policylist__title a:focus {
	color: var(--kemak-primary);
}

.kemak-policylist__meta {
	margin: 0.25rem 0 0;
	color: var(--kemak-muted);
	font-size: 0.85rem;
}

.kemak-policylist__excerpt {
	margin: 0.5rem 0 0;
	color: var(--kemak-body);
}

.kemak-policylist__actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
}

/* Match the "Read" button's height to the adjacent Download (PDF) button by
 * mirroring its vertical metrics (line-height, padding, font-size). The 1px
 * ghost border is offset by the slightly smaller padding so the two boxes line
 * up. Horizontal padding is left untouched. */
.kemak-policylist__actions .kemak-btn {
	display: inline-flex;
	align-items: center;
	padding-block: 0.5rem;
	font-size: 0.9rem;
	line-height: 1.2;
}

/* Single policy: "All Policies" side nav */
.kemak-policynav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kemak-policynav__list li {
	margin-bottom: 0.5rem;
}

.kemak-policynav__list a {
	color: var(--kemak-body);
	text-decoration: none;
	font-weight: 600;
}

.kemak-policynav__list a:hover,
.kemak-policynav__list a:focus {
	color: var(--kemak-primary);
}

.kemak-policynav__list a.is-current {
	color: var(--kemak-primary);
	border-left: 3px solid var(--kemak-accent);
	padding-left: 0.5rem;
	margin-left: -0.5rem;
}

.kemak-policy__download {
	margin-top: 2rem;
}

/* =========================================================================
 * 25. ACF blocks — shared wrapper + column helpers
 * ====================================================================== */
.kemak-block {
	margin-block: 5rem;
}

.kemak-block__inner {
	max-width: var(--kemak-container);
	margin-inline: auto;
	padding-inline: var(--kemak-gutter);
}

/* Full-width blocks let their inner content still align to the container. */
.kemak-block.alignfull {
	margin-inline: 0;
}

.kemak-block__heading {
	margin: 0 0 2.5rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--kemak-primary-dark);
}

/* Block header row — heading on the left, a "view all" link on the right. */
.kemak-block__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-bottom: 2.5rem;
}

.kemak-block__header .kemak-block__heading {
	margin: 0;
}

.kemak-block__viewall {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: auto;
	flex: none;
	font-weight: 700;
	color: var(--kemak-link);
	text-decoration: none;
	white-space: nowrap;
}

.kemak-block__viewall:hover,
.kemak-block__viewall:focus-visible {
	color: var(--kemak-link-hover);
}

/* Shared CTA arrow — a slim line-arrow that inherits the surrounding text
   colour and size, and nudges right when its link (or the card wrapping it) is
   hovered/focused. Reused by block header links and story card CTAs. */
.kemak-cta-arrow {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	transition: transform 0.2s ease;
}

.kemak-cta-arrow svg {
	display: block;
	width: 0.95em;
	height: 0.95em;
}

/* The arrow is a filled outline; a matching stroke gives it a touch more
   weight without changing the glyph. */
.kemak-cta-arrow svg path {
	stroke: currentColor;
	stroke-width: 0.7;
}

.kemak-block__viewall:hover .kemak-cta-arrow,
.kemak-block__viewall:focus-visible .kemak-cta-arrow,
.kemak-fstory__link:hover .kemak-cta-arrow,
.kemak-fstory__link:focus-visible .kemak-cta-arrow {
	transform: translateX(3px);
}

.kemak-block__placeholder {
	padding: 2rem;
	border: 1px dashed var(--kemak-line);
	border-radius: var(--kemak-radius);
	color: var(--kemak-muted);
	text-align: center;
}

/* Column-count helpers for grids inside blocks (desktop). */
@media (min-width: 900px) {
	.kemak-cols-2 {
		grid-template-columns: repeat(2, 1fr);
	}

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

	.kemak-cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* =========================================================================
 * 26. Hero block
 * ====================================================================== */
.kemak-hero {
	position: relative;
	margin-block: 0; /* Full-bleed band — sit flush against neighbours. */
	background: var(--kemak-surface);
	overflow: hidden;
}

.kemak-hero--media {
	background: var(--kemak-primary-dark);
}

.kemak-hero__media {
	position: absolute;
	inset: 0;
}

.kemak-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.45;
}

.kemak-hero__inner {
	position: relative;
	max-width: var(--kemak-container);
	margin-inline: auto;
	padding: clamp(3rem, 8vw, 6rem) var(--kemak-gutter);
	max-width: min(var(--kemak-container), 100%);
}

.kemak-hero__heading {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3.5rem);
	color: var(--kemak-primary-dark);
	max-width: 18ch;
}

.kemak-hero--media .kemak-hero__heading,
.kemak-hero--media .kemak-hero__subtext {
	color: var(--kemak-white);
}

.kemak-hero__subtext {
	margin: 1rem 0 0;
	font-size: 1.2rem;
	max-width: 52ch;
	color: var(--kemak-body);
}

.kemak-hero__cta {
	margin-top: 1.75rem;
}

/* --- Full-viewport hero (homepage) ------------------------------------- */
.kemak-hero--full {
	display: flex;
	min-height: 100svh;
	background: var(--kemak-primary-dark);
}

/* Full hero text is always on a dark backdrop (photo scrim or brand green). */
.kemak-hero--full .kemak-hero__heading,
.kemak-hero--full .kemak-hero__subtext {
	color: var(--kemak-white);
}

.kemak-hero--full .kemak-hero__inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	padding-bottom: var(--kemak-hero-pad-bottom);
}

/* Photo fills edge-to-edge with a left-weighted dark scrim for legibility. */
.kemak-hero--full.kemak-hero--media .kemak-hero__media img {
	opacity: 1;
}

.kemak-hero--full.kemak-hero--media .kemak-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Even dark overlay across the whole photo (not a gradient). */
	background: rgba(15, 61, 46, 0.55);
}

.kemak-hero--full .kemak-hero__heading {
	text-transform: none;
	/* 5vw (not 6vw) so the headline eases down through the 1280–1440px laptop
	 * range instead of clamping to its 4.5rem max at ~1200px. The cap is
	 * unchanged, so 1440px+ screens look exactly as before. */
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
	max-width: 18ch;
}

.kemak-hero--full .kemak-hero__subtext {
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	max-width: 48ch;
	color: rgba(255, 255, 255, 0.92);
}

/* Two-button action row. */
.kemak-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 2rem;
}

.kemak-hero__actions .kemak-btn {
	padding: 0.8rem 1.6rem;
	font-size: 1.05rem;
}

/* Vertical social rail down the right edge of the hero, its base lined up
   with the bottom of the hero content (matches __inner padding-bottom). */
.kemak-hero__social {
	position: absolute;
	right: clamp(0.75rem, 2vw, 1.75rem);
	bottom: var(--kemak-hero-pad-bottom);
	flex-direction: column;
	z-index: 3;
}

.kemak-hero__social a {
	background: var(--kemak-white);
	color: var(--kemak-primary);
}

.kemak-hero__social a:hover,
.kemak-hero__social a:focus {
	background: var(--kemak-accent);
	color: var(--kemak-white);
}

@media (max-width: 640px) {
	.kemak-hero__social {
		display: none;
	}
}

/* =========================================================================
 * 27. Partner wall
 * ====================================================================== */
/* A slow, seamless logo marquee gliding over a large faded "Partners" word.
 * Hovering the strip pauses the motion; hovering a logo reveals its colour. */
.kemak-block--partner-wall .kemak-block__inner {
	position: relative;
	overflow: hidden;
	padding-block: 3rem;
}

/* The oversized watermark word sitting behind the logos. A script
 * (kemak.js) shrinks the inner word to fit the container's width and height,
 * so any heading stays fully visible with natural letterforms — never clipped. */
.kemak-partnerwall__word {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	opacity: 0.06;
	pointer-events: none;
	user-select: none;
}

.kemak-partnerwall__word-inner {
	display: block;
	white-space: nowrap;
	font-family: var(--kemak-font-heading);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--kemak-ink);
	/* Base size used before the script measures; large so wide screens look
	 * right even if JS is unavailable. The fit routine overrides this. */
	font-size: clamp(3rem, 16vw, 11rem);
}

/* Clipped viewport; soft gradient masks fade the logos in/out at the edges. */
.kemak-partnerwall {
	position: relative;
	z-index: 1;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* Two identical groups make translateX(-50%) a seamless wrap point. */
.kemak-partnerwall__track {
	display: flex;
	width: max-content;
	animation: kemak-marquee 40s linear infinite;
}

.kemak-partnerwall:hover .kemak-partnerwall__track,
.kemak-partnerwall:focus-within .kemak-partnerwall__track {
	animation-play-state: paused;
}

.kemak-partnerwall__group {
	display: flex;
	align-items: center;
	gap: 3rem;
	padding-inline: 1.5rem;
}

@keyframes kemak-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.kemak-partner {
	flex: 0 0 auto;
}

.kemak-partner__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
	height: 96px;
	padding: 0 1rem;
}

.kemak-partner__link img {
	max-width: 160px;
	max-height: 64px;
	width: auto;
	height: auto;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.kemak-partner__link:hover img,
.kemak-partner__link:focus-visible img {
	filter: grayscale(0);
	opacity: 1;
}

.kemak-partner__name {
	font-weight: 700;
	color: var(--kemak-primary-dark);
	white-space: nowrap;
}

/* Respect reduced-motion: stop the marquee and show a single static row. */
@media (prefers-reduced-motion: reduce) {
	.kemak-partnerwall {
		-webkit-mask-image: none;
		        mask-image: none;
	}
	.kemak-partnerwall__track {
		animation: none;
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
	}
	.kemak-partnerwall__group {
		flex-wrap: wrap;
		justify-content: center;
	}
	.kemak-partnerwall__group[aria-hidden="true"] {
		display: none;
	}
}

/* =========================================================================
 * 28. SDG grid (tiles)
 * ====================================================================== */
.kemak-sdggrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kemak-sdg-tile a {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	height: 100%;
	padding: 0.9rem;
	border-radius: var(--kemak-radius-lg);
	background: var(--sdg-color, #555);
	color: var(--sdg-text, #fff);
	text-decoration: none;
	min-height: 120px;
}

.kemak-sdg-tile a:hover,
.kemak-sdg-tile a:focus {
	color: var(--sdg-text, #fff);
	filter: brightness(0.93);
}

.kemak-sdg-tile__num {
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1;
}

.kemak-sdg-tile__name {
	font-size: 0.85rem;
	font-weight: 600;
}

/* =========================================================================
 * 29. Value cards
 * ====================================================================== */
.kemak-vc {
	position: relative;
	width: 100%;
}

/* Header row: heading left, chevron controls top-right. */
.kemak-vc__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.kemak-vc__heading {
	margin: 0;
}

/* Control group: the two chevrons, side by side. */
.kemak-vc__controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-inline-start: auto;
}

/* Buttons: hidden by default; revealed only when JS enhances the carousel. */
.kemak-vc__btn {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--kemak-line);
	border-radius: 999px;
	background: var(--kemak-white);
	cursor: pointer;
	transition: opacity 0.3s ease, border-color 0.3s ease;
}

.kemak-vc.is-enhanced .kemak-vc__btn {
	display: inline-flex;
}

.kemak-vc__btn img {
	width: 12px;
	height: 21px;
	display: block;
}

.kemak-vc__btn:hover {
	border-color: var(--kemak-green-500);
}

.kemak-vc__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Track: horizontal scroll-snap row. 4 cards visible on desktop. */
.kemak-valuecards {
	display: flex;
	gap: var(--kemak-card-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	padding-block: 0.25rem;
}

.kemak-valuecards::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

/* Static grid used by the About page (no carousel): all values wrap and stay
 * visible. Shares the tinted `.kemak-valuecard` visuals below. */
.kemak-valuegrid {
	display: grid;
	gap: var(--kemak-card-gap);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Shared card visuals: tint, radius, padding — used by both the homepage
 * carousel and the About grid. */
.kemak-valuecard {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	background: var(--vc-tint, #f5f4aa);
	border-radius: var(--kemak-radius-lg);
}

/* Carousel track items only: sized for 4-up with the badge-top / body-bottom
 * layout. Scoped to the track so the static About grid is unaffected. */
.kemak-valuecards > .kemak-valuecard {
	flex: 0 0 calc((100% - 3 * var(--kemak-card-gap)) / 4);
	min-width: 220px;
	scroll-snap-align: start;
	justify-content: space-between;
	gap: 2rem;
	min-height: 340px;
}

/* Auto-cycle the palette by card position; an inline --vc-tint overrides it. */
.kemak-valuecard:nth-child(5n + 1) {
	--vc-tint: #f5f4aa;
}

.kemak-valuecard:nth-child(5n + 2) {
	--vc-tint: #fee2fd;
}

.kemak-valuecard:nth-child(5n + 3) {
	--vc-tint: #d3e1f8;
}

.kemak-valuecard:nth-child(5n + 4) {
	--vc-tint: #d8f6b8;
}

.kemak-valuecard:nth-child(5n + 5) {
	--vc-tint: #d0f9f9;
}

.kemak-valuecard__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 76px;
	height: 76px;
	background: var(--kemak-white);
	border-radius: 50%;
	box-shadow: 0 6px 16px rgba(29, 36, 33, 0.12);
}

.kemak-valuecard__icon {
	width: 40px;
	height: 40px;
	object-fit: contain;
	margin: 0;
}

.kemak-valuecard__title {
	margin: 0 0 0.85rem;
	color: var(--kemak-ink);
	font-size: clamp(1.1rem, 2.1vw, 1.45rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.kemak-valuecard__desc {
	margin: 0;
	color: var(--kemak-ink);
	font-size: 1.05rem;
	line-height: 1.55;
}

/* Mobile: hide the scroll chevrons and let the track swipe, one card at a time. */
@media (max-width: 781px) {
	.kemak-vc.is-enhanced .kemak-vc__btn {
		display: none;
	}

	.kemak-valuecards > .kemak-valuecard {
		flex-basis: 78%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kemak-valuecards {
		scroll-behavior: auto;
	}
}

/* -------------------------------------------------------------------------
 * Flip cards — About page "Our Values". Tinted front (plus badge + title)
 * rotates on hover / focus / tap to a white back face showing the
 * description between two rules. Lives inside the `.kemak-valuegrid` grid.
 * ---------------------------------------------------------------------- */
.kemak-flipcard {
	perspective: 1200px;
	outline: none;
}

.kemak-flipcard__inner {
	position: relative;
	min-height: 340px;
	height: 100%;
	transition: transform 0.3s ease;
	transform-style: preserve-3d;
}

.kemak-flipcard:hover .kemak-flipcard__inner,
.kemak-flipcard:focus-visible .kemak-flipcard__inner,
.kemak-flipcard.is-flipped .kemak-flipcard__inner {
	transform: rotateY(180deg);
}

.kemak-flipcard__front,
.kemak-flipcard__back {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	border-radius: var(--kemak-radius-lg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
}

/* Front: tinted, plus badge at top, title pinned to the bottom. */
.kemak-flipcard__front {
	justify-content: space-between;
	gap: 2rem;
	background: var(--vc-tint, #f5f4aa);
}

/* Back: white face, pre-rotated so it faces out after the flip. */
.kemak-flipcard__back {
	justify-content: center;
	background: var(--kemak-white);
	border: 1px solid var(--kemak-line);
	transform: rotateY(180deg);
}

/* Tint cycle on the front (via --vc-tint inherited from the card). */
.kemak-flipcard:nth-child(5n + 1) {
	--vc-tint: #f5f4aa;
}

.kemak-flipcard:nth-child(5n + 2) {
	--vc-tint: #fee2fd;
}

.kemak-flipcard:nth-child(5n + 3) {
	--vc-tint: #d3e1f8;
}

.kemak-flipcard:nth-child(5n + 4) {
	--vc-tint: #d8f6b8;
}

.kemak-flipcard:nth-child(5n + 5) {
	--vc-tint: #d0f9f9;
}

.kemak-flipcard__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 76px;
	height: 76px;
	background: var(--kemak-white);
	border-radius: 50%;
	box-shadow: 0 6px 16px rgba(29, 36, 33, 0.12);
}

.kemak-flipcard__icon {
	width: 26px;
	height: 26px;
	object-fit: contain;
}

.kemak-flipcard__title {
	margin: 0;
	color: var(--kemak-ink);
	font-family: var(--kemak-font-heading);
	font-weight: 800;
	font-size: clamp(1.1rem, 2.1vw, 1.45rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* The description is the scroll container: its top/bottom rules stay fixed on
 * the border box while the text scrolls between them, keeping the scrollbar
 * inset inside the card rather than at its edge. */
.kemak-flipcard__desc {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	margin: 0;
	padding: 1rem 0;
	border-top: 2px solid var(--kemak-ink);
	border-bottom: 2px solid var(--kemak-ink);
	color: var(--kemak-ink);
	font-size: 1.05rem;
	line-height: 1.55;
}

/* Keyboard focus affordance (the card is focusable via tabindex). */
.kemak-flipcard:focus-visible {
	outline: 2px solid var(--kemak-green-500);
	outline-offset: 3px;
	border-radius: var(--kemak-radius-lg);
}

@media (prefers-reduced-motion: reduce) {
	.kemak-flipcard__inner {
		transition: none;
	}
}

/* =========================================================================
 * 30. Impact stats (counters)
 * ====================================================================== */
.kemak-block--impact-stats {
	margin-block: 0;
	padding-block: clamp(3rem, 6vw, 4.5rem);
	background: var(--kemak-primary-dark);
	color: var(--kemak-white);
}

.kemak-block--impact-stats .kemak-block__heading {
	color: var(--kemak-white);
	text-align: center;
}

.kemak-stats {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	align-items: stretch;
}

.kemak-stat {
	padding: 1.5rem clamp(1.25rem, 3vw, 2.5rem);
	text-align: center;
	border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.kemak-stat:last-child {
	border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.kemak-stat__figure {
	margin: 0;
	font-family: var(--kemak-font-heading);
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--kemak-white);
}

.kemak-stat__affix {
	color: inherit;
}

.kemak-stat__label {
	margin: 0.85rem 0 0;
	font-weight: 600;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	color: var(--kemak-white);
	opacity: 0.9;
}

/* Stack into a framed list on small screens. */
@media (max-width: 600px) {
	.kemak-stats {
		grid-template-columns: 1fr;
	}

	.kemak-stat {
		text-align: center;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.22);
	}

	.kemak-stat:last-child {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.22);
	}
}

/* =========================================================================
 * 31. CTA band
 * ====================================================================== */
.kemak-ctaband {
	margin-block: 0;
	color: var(--kemak-white);
	background: var(--kemak-primary-dark);
}

.kemak-ctaband--green {
	background: var(--kemak-primary);
}

.kemak-ctaband--accent {
	background: var(--kemak-accent);
	color: var(--kemak-primary-dark);
}

.kemak-ctaband__inner {
	max-width: var(--kemak-container);
	margin-inline: auto;
	padding-block: clamp(3rem, 6vw, 4.5rem);
	padding-inline: var(--kemak-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.kemak-ctaband__heading {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	color: inherit;
}

.kemak-ctaband__lead {
	margin: 0.5rem 0 0;
	max-width: 52ch;
	opacity: 0.92;
}

.kemak-ctaband--accent .kemak-ctaband__btn {
	background: var(--kemak-primary-dark);
	color: var(--kemak-white);
}

/* Image style: a photo behind a left -> right white scrim, with a green
 * heading, dark body text and a green button. */
.kemak-ctaband--image {
	position: relative;
	color: var(--kemak-body);
	background: var(--kemak-ctaband-bg) center / cover no-repeat;
}

.kemak-ctaband--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.94) 0%,
		rgba(255, 255, 255, 0.88) 30%,
		rgba(255, 255, 255, 0.6) 65%,
		rgba(255, 255, 255, 0.35) 100%
	);
}

.kemak-ctaband--image .kemak-ctaband__inner {
	position: relative;
	z-index: 1;
	min-height: clamp(340px, 32vw, 460px);
}

.kemak-ctaband--image .kemak-ctaband__heading {
	color: var(--kemak-primary);
}

.kemak-ctaband--image .kemak-ctaband__lead {
	color: var(--kemak-body);
	opacity: 1;
}

.kemak-ctaband__rule {
	display: block;
	width: 56px;
	height: 4px;
	margin-bottom: 1.1rem;
	border-radius: 2px;
	background: var(--kemak-accent);
}

.kemak-ctaband--image .kemak-ctaband__btn,
.kemak-ctaband--image .kemak-ctaband__btn:hover,
.kemak-ctaband--image .kemak-ctaband__btn:focus {
	background: var(--kemak-primary);
	color: var(--kemak-white);
}

.kemak-ctaband--image .kemak-ctaband__btn:hover,
.kemak-ctaband--image .kemak-ctaband__btn:focus {
	background: var(--kemak-primary-dark);
}

/* =========================================================================
 * 32. Approach steps
 * ====================================================================== */
.kemak-steps {
	display: grid;
	gap: var(--kemak-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: kemak-step;
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.kemak-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.kemak-steps {
		grid-template-columns: repeat(4, 1fr);
	}
}

.kemak-step {
	position: relative;
	padding: 1.5rem;
	background: var(--kemak-surface);
	border-radius: var(--kemak-radius-lg);
}

.kemak-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 0.75rem;
	border-radius: 50%;
	background: var(--kemak-primary);
	color: var(--kemak-white);
	font-weight: 800;
}

.kemak-step__title {
	margin: 0 0 0.5rem;
	color: var(--kemak-primary-dark);
	font-size: 1.15rem;
}

.kemak-step__desc {
	margin: 0;
	color: var(--kemak-body);
}

/* =========================================================================
 * 33. Default homepage
 * ====================================================================== */
.kemak-home > .kemak-block:first-child {
	margin-top: 0;
}

.kemak-viewall {
	margin-top: 2rem;
	text-align: center;
}

/* Tint the stories band so the homepage has visual rhythm. */
.kemak-home-stories {
	padding-block: 3rem;
	background: var(--kemak-surface);
}

/* On the About page the Values band is the last section, so let its tinted
 * background run into the footer flush — drop the trailing block margin (the
 * white strip) and carry the spacing as padding instead. */
.kemak-about .kemak-home-stories {
	margin-bottom: 0;
	padding-block: 5rem;
}

/* =========================================================================
 * A11y. Focus visibility + motion preferences
 * ====================================================================== */

/*
 * A single, high-visibility keyboard-focus ring that reads on light, dark and
 * coloured backgrounds (white inner + dark-green outer halo). The transparent
 * outline keeps a visible focus in Windows High Contrast / forced-colors mode,
 * where box-shadow is ignored.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.kemak-btn:focus-visible,
.menu-toggle:focus-visible {
	outline: 3px solid transparent;
	outline-offset: 2px;
	box-shadow:
		0 0 0 2px var(--kemak-white),
		0 0 0 5px var(--kemak-primary-dark);
	border-radius: 3px;
}

/* On dark surfaces, flip the halo so it stays visible. */
.site-footer a:focus-visible,
.site-utilitybar a:focus-visible,
.kemak-ctaband a:focus-visible,
.kemak-hero--media a:focus-visible {
	box-shadow:
		0 0 0 2px var(--kemak-primary-dark),
		0 0 0 5px var(--kemak-white);
}

/* Whole-card keyboard focus: the title link is the focusable element, so lift
   and ring the card when it receives focus. */
.kemak-card:focus-within {
	outline: 3px solid transparent;
	box-shadow:
		0 12px 28px rgba(15, 61, 46, 0.12),
		0 0 0 3px var(--kemak-primary);
}

.kemak-card:focus-within .kemak-card__title a:focus-visible {
	box-shadow: none; /* The card already shows the ring. */
}

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

	.kemak-card:hover,
	.kemak-card:focus-within {
		transform: none;
	}

	/* No hover slide — keep the "Read more" link visible at all times. */
	.event-card__more {
		max-height: 3rem;
		margin-top: 1rem;
		opacity: 1;
		transform: none;
	}
}

/* =========================================================================
 * 34. About page
 * ====================================================================== */
.kemak-mv {
	display: grid;
	gap: var(--kemak-card-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.kemak-mv {
		grid-template-columns: repeat(2, 1fr);
	}
}

.kemak-mv__card {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 2.5rem;
	border-radius: var(--kemak-radius-lg);
	background: var(--kemak-primary);
	color: var(--kemak-white);
}

.kemak-mv__card--vision {
	background: var(--kemak-accent);
	color: var(--kemak-ink);
}

/* Icon + title form one tight group so the icon reads as belonging to the
 * title; the larger 2rem gap sits between this group and the body. Icon
 * inherits the card's text colour. */
.kemak-mv__head {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.kemak-mv__icon {
	display: block;
}

.kemak-mv__icon svg {
	display: block;
	width: auto;
	height: 3rem;
	/* kemak_normalize_inline_svg() stamps equal width/height (a 1:1 intrinsic
	 * ratio), which letterboxes non-square icons — adding vertical padding
	 * inside the box. Restore each icon's viewBox ratio so the box hugs the
	 * artwork. */
	aspect-ratio: 1289 / 1272; /* mission */
}

.kemak-mv__card--vision .kemak-mv__icon svg {
	aspect-ratio: 1 / 1; /* vision */
}

.kemak-mv__title {
	margin: 0;
	color: inherit;
	font-size: 1.4rem;
}

/* Group (icon + title) stays at the top; body pins to the bottom of the card. */
.kemak-mv__body {
	margin-top: auto;
}

.kemak-mv__body p:last-child {
	margin-bottom: 0;
}

/* Mission/Vision statements read upright by design — keep the body text
 * roman even if the stored content carries <em>/<i> emphasis. */
.kemak-mv__body em,
.kemak-mv__body i {
	font-style: normal;
}

.kemak-aims {
	display: grid;
	gap: var(--kemak-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.kemak-aims {
		grid-template-columns: repeat(2, 1fr);
	}
}

.kemak-aims__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--kemak-surface);
	border: 1px solid var(--kemak-line);
	border-radius: var(--kemak-radius-lg);
}

.kemak-aims__icon {
	flex: none;
	display: block;
}

.kemak-aims__icon svg {
	display: block;
	width: 2.25rem;
	height: 2.25rem;
}

.kemak-aims__text {
	color: var(--kemak-body);
}

/* =========================================================================
 * 35. Contact page
 * ====================================================================== */
.kemak-contact__grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 820px) {
	.kemak-contact__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	}
}

.kemak-contact__heading {
	margin: 0 0 1.25rem;
	color: var(--kemak-primary-dark);
	font-size: 1.4rem;
}

.kemak-contact__list {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.kemak-contact__list li {
	margin-bottom: 1rem;
}

.kemak-contact__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--kemak-muted);
}

.kemak-contact__value {
	display: block;
	font-weight: 600;
	color: var(--kemak-ink);
}

a.kemak-contact__value:hover,
a.kemak-contact__value:focus {
	color: var(--kemak-primary);
}

.kemak-contact__social {
	color: var(--kemak-primary);
}

.kemak-contact__fallback {
	padding: 1.5rem;
	background: var(--kemak-surface);
	border-radius: var(--kemak-radius-lg);
}

.kemak-contact__map {
	margin-top: 2.5rem;
	line-height: 0;
}

.kemak-contact__map iframe {
	display: block;
}

/* Form fields share the large radius. Fluent Forms drives its field radius from
   a CSS variable, so overriding it on the wrapper updates every field (inputs,
   selects, textareas) without a specificity fight. The native selectors cover
   the search and comment forms. */
.fluentform {
	--fluentform-border-radius: var(--kemak-radius-lg);
}

.search-field,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	border-radius: var(--kemak-radius-lg);
}

/* Fluent Forms submit button: 8px to match the site's buttons, with a brand-green
   hover. The wrapper + form classes outrank Fluent Forms' own `.ff-default
   .ff-btn-submit` rule (and the field variable above), so no !important is needed.
   The base green (--kemak-primary) is set in the form's button settings. */
.fluentform.ff-default .ff-btn-submit:not(.ff_btn_no_style) {
	border-radius: var(--kemak-radius);
	transition: background-color 0.3s ease;
}

/* Darken on hover/focus and cancel Fluent Forms' default opacity fade
   (`.ff-default .ff_btn_style:hover { opacity: .8 }`). The `.ff_btn_style`
   class is included so this outranks that rule regardless of load order. */
.ff-btn-submit.ff_btn_style:not(.ff_btn_no_style):hover,
.ff-btn-submit.ff_btn_style:not(.ff_btn_no_style):focus {
	background-color: var(--kemak-green-700);
	opacity: 1;
}

/* Confirmation (and error) message container: match the site's card radius. */
.fluentform .ff-message-success,
.fluentform .ff-errors-in-stack {
	border-radius: var(--kemak-radius-lg);
}

/* =========================================================================
 * Reusable category accent tokens
 * A component opts in with .kemak-accent--{token}; these set custom properties
 * it can consume (bg tint, accent line, readable foreground). Curated/on-brand.
 * ====================================================================== */
.kemak-accent--green { --kemak-accent-bg: #eef6f1; --kemak-accent-line: var(--kemak-green-500); --kemak-accent-fg: var(--kemak-green-900); }
.kemak-accent--amber { --kemak-accent-bg: #fdf4e3; --kemak-accent-line: var(--kemak-accent);    --kemak-accent-fg: #7a4d05; }
.kemak-accent--teal  { --kemak-accent-bg: #e7f3f5; --kemak-accent-line: #2a9aa8;                 --kemak-accent-fg: #0c4650; }
.kemak-accent--slate { --kemak-accent-bg: #eef1f3; --kemak-accent-line: #64748b;                 --kemak-accent-fg: #27323d; }
.kemak-accent--plum  { --kemak-accent-bg: #f4edf5; --kemak-accent-line: #8a4f8e;                 --kemak-accent-fg: #46214a; }
.kemak-accent--rose  { --kemak-accent-bg: #fcecef; --kemak-accent-line: #c0476a;                 --kemak-accent-fg: #7a1f37; }
.kemak-accent--sky   { --kemak-accent-bg: #e8f1fb; --kemak-accent-line: #3b82c4;                 --kemak-accent-fg: #163a5f; }

/* =========================================================================
 * Partners listing (page-partners.php)
 * ====================================================================== */
.kemak-partnerlist {
	margin-block: 0 2.5rem;
}

/* Match the events page section headings: plain, no underline. */
.kemak-partnerlist__group-title {
	margin: 0 0 2.5rem;
	font-size: 1.6rem;
	color: var(--kemak-primary-dark);
}

.kemak-partnerlist__card {
	background: var(--kemak-accent-bg, var(--kemak-white));
	border-color: var(--kemak-accent-line, var(--kemak-line));
}

.kemak-partnerlist__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	background: var(--kemak-white);
}

.kemak-partnerlist__logo img {
	/* Occupy ~60% of the logo box, leaving even breathing room on all sides. */
	max-width: 60%;
	max-height: 60%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.kemak-partnerlist__name {
	margin: 0 0 0.4rem;
	font-size: 1.15rem;
	color: var(--kemak-accent-fg, var(--kemak-ink));
}

.kemak-partnerlist__blurb {
	margin: 0 0 1rem;
	color: var(--kemak-body);
}

.kemak-partnerlist__link {
	margin-top: auto;
	font-weight: 700;
	text-decoration: none;
	color: var(--kemak-accent-line, var(--kemak-primary));
}

.kemak-partnerlist__link:hover,
.kemak-partnerlist__link:focus {
	text-decoration: underline;
}

.kemak-partnerlist__closing {
	margin-top: 1.5rem;
	font-size: 1.15rem;
	font-style: italic;
	text-align: center;
	color: var(--kemak-muted);
}

/* =========================================================================
 * Category tags — accent-coloured term labels
 * `.kemak-card__eyebrow--tag` turns a card eyebrow into a soft-tint pill when
 * paired with a .kemak-accent--{token} class; the tier heading underline picks
 * up the tier's accent line. Plain eyebrows (e.g. story community) are untouched.
 * ====================================================================== */
.kemak-card__eyebrow--tag {
	align-self: flex-start; /* Shrink to content; .kemak-card__body is a column flex, which would otherwise stretch the pill full-width. */
	padding: 0.15em 0.6em;
	border-radius: var(--kemak-radius-sm);
	background: var(--kemak-accent-bg, var(--kemak-surface));
	color: var(--kemak-accent-fg, var(--kemak-primary));
	text-transform: none;
	letter-spacing: 0;
}

/* Team tier headings are kept plain (no underline) to match the events page. */

/* ----------------------------------------------------------------------------
 * Areas of Focus carousel block (kemak/areas-of-focus)
 * 3 cards per view on desktop with chevron buttons; swipeable on mobile.
 * ------------------------------------------------------------------------- */
.kemak-block--areas-of-focus .kemak-aof {
	position: relative;
	width: 100%;
}

/* Header row: heading + optional description left, control group right. */
.kemak-aof__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.kemak-aof__intro {
	max-width: 60ch;
}

.kemak-aof__heading {
	margin: 0;
}

.kemak-aof__lead {
	margin: 0.5rem 0 0;
	color: var(--kemak-muted);
}

/* Control group: prev chevron · Explore · next chevron.
 * align-self:flex-end sits it at the bottom of the heading+description block. */
.kemak-aof__controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-inline-start: auto;
	align-self: flex-end;
}

.kemak-aof__explore {
	white-space: nowrap;
}

/* Track: horizontal scroll-snap row. 3 cards visible on desktop. */
.kemak-aof__track {
	display: flex;
	gap: var(--kemak-card-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	padding-block: 0.25rem;
}

.kemak-aof__track::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

.kemak-focus-card {
	flex: 0 0 calc((100% - 2 * var(--kemak-card-gap)) / 3);
	/* Safety net: keeps cards from collapsing to ~0 width if the flex-basis
	 * ever resolves tiny (e.g. the block-editor preview's intrinsic-width
	 * context). 220px sits below the desktop 3-up basis, so it never binds on
	 * the front end and the "three across" layout is unchanged; the cards
	 * (whose content is absolutely positioned) then take height from their
	 * aspect-ratio instead of collapsing. */
	min-width: 220px;
	scroll-snap-align: start;
	margin: 0;
}

/* Buttons: hidden by default; revealed only when JS enhances the carousel. */
.kemak-aof__btn {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--kemak-line);
	border-radius: 999px;
	background: var(--kemak-white);
	cursor: pointer;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.kemak-aof.is-enhanced .kemak-aof__btn {
	display: inline-flex;
}

.kemak-aof__btn img {
	width: 12px;
	height: 21px;
	display: block;
}

.kemak-aof__btn:hover {
	border-color: var(--kemak-green-500);
}

.kemak-aof__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Card: image-backed, green fallback, gradient overlay, white text. */
.kemak-focus-card__link {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--kemak-radius-lg);
	overflow: hidden;
	background: var(--kemak-green-900); /* fallback when no image */
	color: var(--kemak-white);
	text-decoration: none;
}

.kemak-focus-card__media,
.kemak-focus-card__overlay {
	position: absolute;
	inset: 0;
}

.kemak-focus-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kemak-focus-card__overlay {
	background: linear-gradient(
		180deg,
		rgba(15, 61, 46, 0.15) 0%,
		rgba(15, 61, 46, 0.55) 55%,
		rgba(15, 61, 46, 0.88) 100%
	);
	transition: opacity 0.3s ease;
}

.kemak-focus-card__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.25rem;
}

.kemak-focus-card__title {
	font-family: var(--kemak-font-heading);
	font-weight: 800;
	font-size: 1.375rem;
	line-height: 1.15;
}

.kemak-focus-card__summary {
	font-size: 0.9375rem;
	line-height: 1.4;
	opacity: 0.92;
}

.kemak-focus-card__link:hover .kemak-focus-card__img {
	transform: scale(1.03);
}

/* Hover: keep the card text white (override the global a:hover colour) and
 * fade the gradient overlay away to reveal the image. */
.kemak-focus-card__link:hover {
	color: var(--kemak-white);
}

.kemak-focus-card__link:hover .kemak-focus-card__overlay {
	opacity: 0;
}

.kemak-focus-card__img {
	transition: transform 0.4s ease;
}

/* Mobile: hide the scroll chevrons (Explore stays), let the track swipe. */
@media (max-width: 781px) {
	.kemak-aof.is-enhanced .kemak-aof__btn {
		display: none;
	}

	.kemak-focus-card {
		flex-basis: 82%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kemak-aof__track {
		scroll-behavior: auto;
	}

	.kemak-focus-card__img,
	.kemak-focus-card__overlay {
		transition: none;
	}
}

/* Section lead paragraphs — uniform body line-height and top spacing.
 * Placed last so the shared margin-top wins over each lead's own
 * `margin: … 0 0` shorthand. */
.kemak-page-header__lead,
.kemak-banner__lead,
.kemak-stories-header__lead,
.kemak-fs-head__lead,
.kemak-ctaband__lead,
.kemak-aof__lead {
	line-height: var(--kemak-leading);
	margin-top: 1rem;
}

/* =========================================================================
 * About block
 * ====================================================================== */
.kemak-block--about {
	background: var(--kemak-white);
}

.kemak-about__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: stretch;
}

@media (min-width: 820px) {
	.kemak-about__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	/* Photo on the right: content takes the first column, media the second. */
	.kemak-about__grid--reverse .kemak-about__content {
		order: 1;
	}

	.kemak-about__grid--reverse .kemak-about__media {
		order: 2;
	}
}

.kemak-about__media {
	height: 100%;
}

.kemak-about__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--kemak-radius-lg);
}

/* Inset the text column so the mark clears the top and the last paragraph
 * clears the bottom, while the photo still bleeds the full band height. */
.kemak-about__content {
	padding-block: 5rem;
}

.kemak-about__mark {
	display: block;
	width: 48px;
	height: auto;
	margin-bottom: 1.5rem;
}

.kemak-about__heading {
	color: var(--kemak-primary-dark);
}

.kemak-about__body > :last-child {
	margin-bottom: 0;
}