/*
Theme Name: Somali Aid Mission
Theme URI: https://somaliaidmission.org
Author: Somali Aid Mission
Description: Custom theme for somaliaidmission.org. Content stays in WordPress; page copy is carried over verbatim from the Elementor pages.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: sam
*/

/* Design decisions (one line each)
   Color: navy #0D3D5E and green #009F4E are sampled from the logo; #007A3C is the same green darkened for text (4.84:1 on sand, 5.46:1 on white and under white text).
   Sand #F4F1EA: warm neutral for alternate sections so photos of dry landscapes sit on a related tone instead of cold grey.
   Type: Montserrat 800 matches the logo wordmark; Source Sans 3 is a humanist sans that stays readable in the long programme paragraphs.
   Motif: the kicker (short green rule + label) comes from the existing site's divider widget; 01-06 numbering marks the six sectors and their focus areas.
   Radius 4px everywhere except none on photos inside cards: the brand marks are hard-edged and geometric.
   Shadow: only on the open dropdown and the sticky header, the two layers that sit above page content.
   Theme: fixed light theme with navy bands; the logo files are navy-on-transparent and navy-on-navy, built for these two surfaces.
*/

:root {
	--navy: #0D3D5E;
	--navy-deep: #082A42;
	--green: #009F4E;
	--green-ink: #007A3C;
	--green-on-navy: #5BD38E;
	--sand: #F4F1EA;
	--sand-line: #DED8CA;
	--ink: #14232E;
	--muted: #4A5B68;
	--on-navy: #FFFFFF;
	--on-navy-muted: #C9D6DF;
	--white: #FFFFFF;
	--focus: #0D3D5E;
	--focus-on-dark: #F2B705;

	--font-head: "Montserrat", "Segoe UI", Arial, sans-serif;
	--font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;

	--wrap: 1200px;
	--gutter: 16px;
	--radius: 4px;

	--section: clamp(48px, 6vw, 80px);
	--section-tight: clamp(36px, 4vw, 56px);
	--header-h: 72px;
}

@media (min-width: 720px) {
	:root { --gutter: 32px; }
}

@media (min-width: 1080px) {
	:root { --header-h: 88px; }
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	overflow-x: clip;
}

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

a { color: var(--green-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }

/* Focus: navy ring on light surfaces (11:1), amber ring on navy surfaces (6.3:1) */
:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}
.topbar :focus-visible,
.hero :focus-visible,
.vm :focus-visible,
.page-head :focus-visible,
.closing :focus-visible,
.footer :focus-visible,
.skip-link:focus-visible {
	outline-color: var(--focus-on-dark);
}

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 800;
	line-height: 1.15;
	color: var(--navy);
	margin: 0;
	text-wrap: balance;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; }

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

.skip-link {
	position: absolute;
	left: 8px; top: -60px;
	z-index: 100;
	padding: 12px 16px;
	background: var(--navy);
	color: var(--white);
	font-weight: 700;
	border-radius: var(--radius);
}
.skip-link:focus { top: 8px; color: var(--white); }

main:focus { outline: none; }

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--text { max-width: calc(760px + var(--gutter) * 2); }

.icon { width: 1.1em; height: 1.1em; flex: none; }

/* Type scale */
.h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.625rem); }
.h3 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }

/* Kicker: the site's identity motif */
.kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--green-ink);
}
.kicker::before {
	content: "";
	width: 32px;
	height: 3px;
	background: var(--green);
	flex: none;
}
.kicker--light { color: var(--green-on-navy); }
.kicker--light::before { background: var(--green-on-navy); }

.prose p + p,
.prose p + ul,
.prose ul + p { margin-top: 1em; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 0.6em; }
.prose li p { margin: 0; }
.prose strong { color: var(--navy); }

.text-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 700;
	color: var(--green-ink);
	text-decoration: underline;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 22px;
	border: 2px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--navy); color: var(--white); }
.btn--primary:hover { background: var(--navy-deep); color: var(--white); }
.btn--give { background: var(--green-ink); color: var(--white); }
.btn--give:hover { background: #006B33; color: var(--white); }
.btn--line { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--line:hover { background: var(--navy); color: var(--white); }
.btn--light { background: var(--white); color: var(--navy); }
.btn--light:hover { background: var(--sand); color: var(--navy); }
.btn--ghost { border-color: var(--white); color: var(--white); background: transparent; }
.btn--ghost:hover { background: var(--white); color: var(--navy); }

/* ---------- Top bar ---------- */
.topbar {
	background: var(--navy-deep);
	color: var(--on-navy-muted);
	font-size: 0.875rem;
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
}
.topbar__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
	list-style: none;
}
.topbar__contact li { display: flex; align-items: center; }
.topbar__contact a,
.topbar__city {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--on-navy-muted);
	text-decoration: none;
}
.topbar__contact a:hover { color: var(--white); text-decoration: underline; }
.topbar__contact li:nth-child(2),
.topbar__city { display: none; }

@media (min-width: 900px) {
	.topbar__contact li:nth-child(2),
	.topbar__city { display: inline-flex; }
}

@media (max-width: 559px) {
	.topbar__contact li:first-child { display: none; }
}

.social { display: flex; gap: 4px; list-style: none; }
.social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--on-navy-muted);
	border-radius: var(--radius);
}
.social a:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); }
.social .icon { width: 18px; height: 18px; }

/* ---------- Masthead ---------- */
.masthead {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--white);
	border-bottom: 1px solid var(--sand-line);
}
.masthead__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--header-h);
}
.brand { display: block; flex: none; }
.brand__logo { width: auto; height: 44px; }

@media (min-width: 1080px) {
	.brand__logo { height: 52px; }
}

.masthead__tools {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.icon-btn,
.menu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: var(--navy);
	font: 700 1rem/1 var(--font-body);
	cursor: pointer;
}
.icon-btn:hover,
.menu-btn:hover { background: var(--sand); }
.icon-btn[aria-expanded="true"] { background: var(--sand); }
.menu-btn { border: 2px solid var(--navy); }
.menu-btn .icon--close { display: none; }
.nav-open .menu-btn .icon--open { display: none; }
.nav-open .menu-btn .icon--close { display: block; }

/* Nav: mobile panel first */
.nav {
	display: none;
	position: fixed;
	inset: var(--header-h) 0 0 0;
	z-index: 49;
	overflow-y: auto;
	padding: 8px var(--gutter) 32px;
	background: var(--white);
	border-top: 1px solid var(--sand-line);
}
.nav-open .nav { display: block; }
.nav-open body { overflow: hidden; }

.nav__list { list-style: none; }
.nav__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--sand-line);
}
.nav__link {
	flex: 1;
	display: flex;
	align-items: center;
	min-height: 56px;
	color: var(--navy);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.125rem;
	text-decoration: none;
}
.nav__item.is-current > .nav__link { color: var(--green-ink); }
.nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: var(--navy);
	cursor: pointer;
}
.nav__toggle:hover { background: var(--sand); }
.nav__toggle .icon { transition: transform 0.15s ease; }
.nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

.nav__sub {
	display: none;
	flex-basis: 100%;
	list-style: none;
	padding: 0 0 12px 12px;
}
.nav__toggle[aria-expanded="true"] + .nav__sub { display: block; }
.nav__sub a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--ink);
	text-decoration: none;
}
.nav__sub a:hover,
.nav__sub a[aria-current="page"] { color: var(--green-ink); text-decoration: underline; }

.nav__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}
.nav__actions .btn { flex: 1 1 160px; }

@media (min-width: 1080px) {
	.masthead__inner { gap: 32px; }
	.menu-btn { display: none; }
	.masthead__tools { order: 3; margin-left: 0; }

	.nav {
		display: flex;
		position: static;
		align-items: center;
		flex: 1;
		gap: 24px;
		padding: 0;
		overflow: visible;
		border: 0;
		background: none;
	}
	.nav__list {
		display: flex;
		align-items: center;
		gap: 4px;
		margin-left: auto;
	}
	.nav__item {
		position: relative;
		flex-wrap: nowrap;
		border: 0;
	}
	.nav__link {
		min-height: 44px;
		padding: 0 6px 0 10px;
		font-size: 0.9375rem;
		font-weight: 700;
		white-space: nowrap;
	}
	.nav__item:not(.has-sub) > .nav__link { padding-right: 10px; }
	.nav__item.is-current > .nav__link { box-shadow: inset 0 -3px 0 var(--green); color: var(--navy); }
	.nav__toggle { width: 28px; height: 44px; }

	.nav__sub {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 280px;
		padding: 8px;
		background: var(--white);
		border: 1px solid var(--sand-line);
		border-radius: var(--radius);
		box-shadow: 0 12px 32px rgba(8, 42, 66, 0.16);
	}
	.nav__sub a { padding: 0 12px; border-radius: var(--radius); }
	.nav__sub a:hover { background: var(--sand); text-decoration: none; }
	/* Hover for pointers; keyboard and touch open it with the chevron button (aria-expanded) */
	.nav__item.has-sub:hover > .nav__sub { display: block; }

	.nav__actions { margin: 0; flex-wrap: nowrap; }
	.nav__actions .btn { flex: none; min-height: 44px; padding: 10px 16px; }
}

@media (min-width: 1080px) and (max-width: 1239px) {
	.nav__actions .btn--line { display: none; }
	.nav__link { font-size: 0.875rem; padding-left: 8px; }
}

.search-panel {
	padding: 16px 0;
	background: var(--sand);
	border-top: 1px solid var(--sand-line);
}
.search-form { display: flex; gap: 8px; max-width: 640px; }
.search-form input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 10px 14px;
	border: 2px solid var(--muted);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--ink);
	font: inherit;
}
.search-form input:focus-visible { border-color: var(--navy); }

/* ---------- Home hero ---------- */
.hero {
	position: relative;
	isolation: isolate;
	display: flex;
	min-height: clamp(540px, 82svh, 780px);
	color: var(--white);
	background: var(--navy-deep);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }

/* Scrim: solid navy behind the text column on every photo, so contrast does not depend on the image */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Never below 0.88 where text sits: white 10.3:1, kicker green 5.5:1, lead 6.9:1 over a pure-white pixel */
	background: linear-gradient(0deg, rgba(8, 42, 66, 0.95) 0%, rgba(8, 42, 66, 0.9) 70%, rgba(8, 42, 66, 0.45) 100%);
}

@media (min-width: 900px) {
	.hero::before {
		/* The text column ends at 60% of the width at 1080px and earlier on wider screens */
		background: linear-gradient(90deg, rgba(8, 42, 66, 0.95) 0%, rgba(8, 42, 66, 0.88) 62%, rgba(8, 42, 66, 0.25) 86%, rgba(8, 42, 66, 0.1) 100%);
	}
}

.hero__inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 32px;
	padding-block: 96px 24px;
}

@media (min-width: 900px) {
	.hero__inner { justify-content: center; padding-block: 96px; }
}

.hero__copy { max-width: 620px; }
.hero__title {
	color: var(--white);
	font-size: clamp(2.375rem, 1.4rem + 4.2vw, 4.25rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
}
.hero__lead {
	max-width: 30em;
	margin-top: 20px;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	color: var(--on-navy-muted);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Solid backing: on desktop the control sits over the unscrimmed side of the photo */
.hero__control {
	display: flex;
	align-items: center;
	gap: 12px;
	align-self: flex-start;
	padding: 4px 4px 4px 14px;
	background: rgba(8, 42, 66, 0.92);
	border-radius: var(--radius);
	font-size: 0.875rem;
	color: var(--on-navy-muted);
}

@media (min-width: 900px) {
	.hero__control { position: absolute; right: var(--gutter); bottom: 24px; }
	.hero__inner { position: relative; }
}

.hero__count { font-variant-numeric: tabular-nums; }
.hero__pause {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--radius);
	background: var(--navy-deep);
	color: var(--white);
	font: 600 0.875rem/1 var(--font-body);
	cursor: pointer;
}
.hero__pause:hover { background: var(--navy-deep); }
.hero__pause .icon { width: 14px; height: 14px; }
.hero__pause .icon--play { display: none; }
.hero__pause.is-paused .icon--play { display: block; }
.hero__pause.is-paused .icon--pause { display: none; }

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

/* ---------- About (home) ---------- */
/* About: three overlapping field photos (owner's reference layout) beside the copy and a Vision/Mission card.
   The collage uses a 16px radius and white frames, softer than the 4px system, so the photos read as prints laid on the page. */
.about { padding-block: var(--section); background: var(--sand); }
.about__grid { display: grid; gap: 48px; }

.collage {
	position: relative;
	width: 100%;
	max-width: 600px;
	aspect-ratio: 10 / 9;
	margin-inline: auto;
}
.collage__photo {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
}
.collage__photo img { width: 100%; height: 100%; object-fit: cover; }
.collage__photo--main { left: 17%; top: 12%; width: 58%; height: 80%; }
.collage__photo--main img { object-position: 45% center; }
.collage__photo--top,
.collage__photo--bottom {
	border: 6px solid var(--white);
	box-shadow: 0 10px 28px rgba(8, 42, 66, 0.18);
}
.collage__photo--top { right: 0; top: 0; width: 42%; height: 42%; }
.collage__photo--bottom { left: 0; bottom: 0; width: 44%; height: 42%; }

@media (min-width: 560px) {
	.collage__photo--top,
	.collage__photo--bottom { border-width: 8px; }
}

.about__copy .h2 { margin-bottom: 18px; }
.about__text { color: var(--muted); max-width: 38em; }

.about__card {
	margin-top: 24px;
	padding: 8px 24px;
	background: var(--white);
	border-radius: 16px;
}
.point {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 16px;
	padding-block: 22px;
}
.point + .point { border-top: 1px solid var(--sand-line); }
.point__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--green-ink);
	color: var(--white);
}
.point__icon .icon { width: 22px; height: 22px; }
.point__title { font-size: 1.1875rem; margin-bottom: 6px; }
.point p { color: var(--muted); }

.about__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--sand-line);
}
.about__line {
	flex: 1 1 220px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--navy);
}

/* One arrow, on the section's single way forward to the full Who We Are page */
.btn--arrow { padding-right: 6px; gap: 14px; }
.btn__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 2px;
	background: var(--white);
	color: var(--navy);
}
.btn__arrow .icon { width: 18px; height: 18px; }

@media (min-width: 720px) {
	.about__card { padding: 8px 36px; }
	.point { grid-template-columns: 52px 1fr; gap: 20px; padding-block: 20px; }
	.point__icon { width: 52px; height: 52px; }
}

@media (min-width: 1080px) {
	.about__grid {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		gap: 64px;
		align-items: center;
	}
	/* Portrait on desktop so the photos hold the full height of the copy beside them */
	.collage { margin: 0; max-width: none; aspect-ratio: 5 / 6; }
	.collage__photo--main { left: 16%; top: 13%; width: 60%; height: 76%; }
	.collage__photo--top { width: 44%; height: 34%; }
	.collage__photo--bottom { width: 48%; height: 34%; }
}

/* ---------- Vision & mission ---------- */
.vm {
	padding-block: var(--section-tight);
	background: var(--navy);
	color: var(--on-navy);
}
.vm .h2 { color: var(--white); }
.vm__grid { display: grid; gap: 32px; }
.vm__label {
	margin-bottom: 10px;
	font-size: 1rem;
	color: var(--green-on-navy);
}
.vm__text {
	font-weight: 600;
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
	line-height: 1.4;
	color: var(--white);
}

@media (min-width: 720px) {
	.vm__grid { grid-template-columns: 1fr 1fr; gap: 40px 48px; }
	.vm__title { grid-column: 1 / -1; }
}

@media (min-width: 1080px) {
	.vm__grid { grid-template-columns: 4fr 5fr 5fr; align-items: start; }
	.vm__title { grid-column: auto; }
}

.vm--photos { padding-block: var(--section); }
.vm--photos .section-head { margin-bottom: 40px; }
.vm__pair { display: grid; gap: 24px; }
.vm__card {
	display: grid;
	background: var(--navy-deep);
	border-radius: var(--radius);
	overflow: hidden;
}
.vm__card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.vm__card-body { padding: 28px; }

@media (min-width: 720px) {
	.vm__pair { grid-template-columns: 1fr 1fr; }
}

/* ---------- Sectors ---------- */
.work {
	padding-block: var(--section);
	background: var(--sand);
}
.work__grid { display: grid; gap: 40px; }
.work__intro .h2 { margin-bottom: 16px; }

@media (min-width: 1080px) {
	.work__grid { grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
	.work__intro { position: sticky; top: calc(var(--header-h) + 32px); }
}

.sectors {
	display: grid;
	gap: 20px;
	list-style: none;
}

@media (min-width: 640px) {
	.sectors { grid-template-columns: 1fr 1fr; }
}

.work--more .sectors { grid-template-columns: 1fr; }

@media (min-width: 640px) {
	.work--more .sectors { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1080px) {
	.work--more .sectors { grid-template-columns: repeat(5, 1fr); }
	.work--more .sector__summary { display: none; }
}

.sector__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--white);
	border: 1px solid var(--sand-line);
	border-radius: var(--radius);
	overflow: hidden;
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.15s ease;
}
.sector__link:hover { border-color: var(--navy); color: var(--ink); }
.sector__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.sector__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sector__link:hover .sector__media img { transform: scale(1.04); }
.sector__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
	padding: 20px 22px 22px;
}
.sector__num {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 0.9375rem;
	color: var(--green-ink);
}
.sector__name {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--navy);
}
.sector__summary { color: var(--muted); }
.sector__more {
	margin-top: auto;
	padding-top: 10px;
	font-weight: 700;
	color: var(--green-ink);
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.sector__media img { transition: none; }
	.sector__link:hover .sector__media img { transform: none; }
}

/* ---------- Values ---------- */
.values { padding-block: var(--section); }
.section-head { margin-bottom: 40px; max-width: 760px; }
.section-head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
	max-width: none;
}
.section-head--split > div { max-width: 760px; }

.value-list {
	display: grid;
	gap: 0;
	list-style: none;
	border-top: 2px solid var(--navy);
}
.value {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 4px 12px;
	padding: 22px 0;
	border-bottom: 1px solid var(--sand-line);
}
.value__num {
	grid-row: span 2;
	font-family: var(--font-head);
	font-weight: 800;
	color: var(--green-ink);
}
.value__name { font-size: 1.25rem; }
.value p { color: var(--muted); }

@media (min-width: 720px) {
	.value-list { grid-template-columns: 1fr 1fr; column-gap: 40px; }
}

@media (min-width: 1080px) {
	.value-list { grid-template-columns: repeat(4, 1fr); column-gap: 32px; border-top: 0; }
	.value {
		grid-template-columns: 1fr;
		padding: 24px 0 0;
		border-top: 2px solid var(--navy);
		border-bottom: 0;
	}
	.value__num { grid-row: auto; margin-bottom: 12px; }
}

/* Home: values take over the navy band that Vision & Mission used to fill */
.values--dark { background: var(--navy); color: var(--on-navy-muted); }
.values--dark .h2,
.values--dark .value__name { color: var(--white); }
.values--dark .kicker { color: var(--green-on-navy); }
.values--dark .kicker::before { background: var(--green-on-navy); }
.values--dark .value__num { color: var(--green-on-navy); }
.values--dark .value p { color: var(--on-navy-muted); }
.values--dark .value-list,
.values--dark .value { border-color: rgba(255, 255, 255, 0.28); }
.values--dark :focus-visible { outline-color: var(--focus-on-dark); }

/* ---------- Posts ---------- */
.latest { padding-block: var(--section); background: var(--sand); }

.post-list { display: grid; gap: 24px; }

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

@media (min-width: 1080px) {
	.post-list { grid-template-columns: repeat(3, 1fr); }
	/* Home: the newest update gets the wide slot, the rest stack beside it */
	.post-list--lead { grid-template-columns: 7fr 5fr; grid-auto-flow: dense; }
	.post-list--lead .card:first-child { grid-row: span 2; }
	.post-list--lead .card:not(:first-child) .card__link { flex-direction: row; }
	.post-list--lead .card:not(:first-child) .card__media { flex: 0 0 40%; aspect-ratio: auto; }
	.post-list--lead .card:not(:first-child) .card__excerpt { display: none; }
}

.card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--white);
	border: 1px solid var(--sand-line);
	border-radius: var(--radius);
	overflow: hidden;
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.15s ease;
}
.card__link:hover { border-color: var(--navy); color: var(--ink); }
.card__media { display: block; aspect-ratio: 16 / 10; background: var(--navy); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--on-navy-muted);
	font-family: var(--font-head);
	font-weight: 800;
}
.card__body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 20px 22px 22px; }
.card__date { font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.card__title {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.1875rem;
	line-height: 1.25;
	color: var(--navy);
	overflow-wrap: anywhere;
}
.card__excerpt { color: var(--muted); }
.card__more { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--green-ink); text-decoration: underline; }

.empty {
	padding: 24px;
	background: var(--white);
	border: 1px dashed var(--muted);
	border-radius: var(--radius);
	color: var(--ink);
}
.empty--block p { margin-bottom: 16px; }
.empty__links { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; }
.empty__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 2px solid var(--navy);
	border-radius: var(--radius);
	color: var(--navy);
	font-weight: 700;
	text-decoration: none;
}
.empty__links a:hover { background: var(--navy); color: var(--white); }

/* ---------- Closing band ---------- */
.closing { background: var(--navy); color: var(--on-navy-muted); }
.closing__grid { display: grid; }
.closing__col { padding-block: var(--section-tight); }
.closing__col .h3 { color: var(--white); margin-bottom: 12px; }
.closing__col p { max-width: 34em; margin-bottom: 24px; }
.closing__col--give { border-top: 1px solid rgba(255, 255, 255, 0.18); }

@media (min-width: 900px) {
	.closing__grid { grid-template-columns: 1fr 1fr; }
	.closing__col--give { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.18); padding-left: 56px; }
	.closing__col:first-child { padding-right: 56px; }
	.closing--single .closing__grid { grid-template-columns: 1fr; }
}

/* ---------- Inner page header ---------- */
.page-head {
	background: var(--navy);
	color: var(--on-navy-muted);
}
.page-head__grid {
	display: grid;
	gap: 32px;
	padding-block: 40px 0;
}
.page-head__copy { padding-bottom: 8px; }
.page-head__title {
	color: var(--white);
	font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
	line-height: 1.08;
}
.page-head__lead { margin-top: 16px; max-width: 34em; font-size: 1.1875rem; }
.page-head__search { margin-top: 24px; }
.page-head__photo { margin: 0 calc(var(--gutter) * -1); }
.page-head__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.page-head--plain .page-head__grid { padding-block: 48px; }

@media (min-width: 900px) {
	.page-head__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: end;
		gap: 56px;
		padding-block: 64px 0;
	}
	.page-head__copy { padding-bottom: 64px; }
	.page-head__photo { margin: 0; align-self: stretch; }
	.page-head__photo img { height: 100%; min-height: 320px; aspect-ratio: auto; border-radius: var(--radius) var(--radius) 0 0; }
	.page-head--plain .page-head__grid { grid-template-columns: minmax(0, 760px); padding-block: 72px; }
	.page-head--plain .page-head__copy { padding-bottom: 0; }

	/* A 275px original is framed at its own size, never stretched */
	.page-head--small-img .page-head__grid { grid-template-columns: minmax(0, 1fr) auto; }
	.page-head--small-img .page-head__photo { align-self: end; }
	.page-head--small-img .page-head__photo img { width: 275px; height: auto; min-height: 0; aspect-ratio: auto; }
}

.crumbs { margin-bottom: 20px; font-size: 0.9375rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 8px; list-style: none; }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; color: var(--on-navy-muted); }
.crumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--on-navy-muted);
}
.crumbs a:hover { color: var(--white); }
.crumbs [aria-current] { color: var(--white); font-weight: 600; }
.crumbs--dark li + li::before { color: var(--muted); }
.crumbs--dark a { color: var(--muted); }
.crumbs--dark a:hover { color: var(--navy); }
.crumbs--dark [aria-current] { color: var(--ink); }

/* ---------- Story (Who We Are / What We Do intro) ---------- */
.story { padding-block: var(--section); }
.story__grid { display: grid; gap: 28px; }
.story__lead {
	font-weight: 600;
	font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
	line-height: 1.55;
	color: var(--navy);
}
.story__body { color: var(--muted); font-size: 1.125rem; }

@media (min-width: 900px) {
	.story__grid { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
	.story__body { padding-top: 6px; }
}

/* ---------- Sector focus areas ---------- */
.areas { padding-block: var(--section); }
.area-list { display: grid; gap: 0; list-style: none; counter-reset: area; }
.area {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 6px 16px;
	padding: 28px 0;
	border-top: 1px solid var(--sand-line);
}
.area__num {
	grid-row: span 2;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--green);
}
.area__name { font-size: 1.25rem; }
.area p { color: var(--muted); max-width: 40em; }

@media (min-width: 900px) {
	.area-list { grid-template-columns: 1fr 1fr; column-gap: 64px; }
}

.work--more { padding-block: var(--section-tight); }
.work--more .section-head { margin-bottom: 28px; }
.work--more .sector__body { padding: 16px 18px 18px; }
.work--more .sector__name { font-size: 1.0625rem; }

/* ---------- News / publications intro and feed ---------- */
.intro { padding-block: var(--section-tight) 0; }
.prose--columns { color: var(--muted); font-size: 1.125rem; }

@media (min-width: 900px) {
	.prose--columns { columns: 2; column-gap: 56px; }
	.prose--columns p { break-inside: avoid; }
}

.prose--wide { max-width: 860px; color: var(--muted); font-size: 1.125rem; }
.feed { padding-block: var(--section-tight) var(--section); }

.pager { margin-top: 40px; }
.pager ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.pager a,
.pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--sand-line);
	border-radius: var(--radius);
	color: var(--navy);
	font-weight: 700;
	text-decoration: none;
}
.pager .current { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pager a:hover { border-color: var(--navy); }

.results { list-style: none; display: grid; gap: 0; max-width: 820px; }
.result { padding: 24px 0; border-top: 1px solid var(--sand-line); }
.result__type { font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.result__title { font-size: 1.375rem; margin: 4px 0 8px; }
.result__title a { color: var(--navy); }
.result p:last-child { color: var(--muted); }

/* ---------- Contact ---------- */
.contact { padding-block: var(--section); }
.contact__grid { display: grid; gap: 48px; }
.contact__text { margin: 16px 0 32px; color: var(--muted); max-width: 34em; }
.facts { display: grid; gap: 0; margin: 0; }
.facts__row { padding: 18px 0; border-top: 1px solid var(--sand-line); }
.facts dt {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--navy);
}
.facts dt .icon { color: var(--green-ink); }
.facts dd { margin: 6px 0 0 30px; }
.facts dd a { display: inline-block; padding-block: 6px; }

.contact__reach {
	padding: 28px;
	background: var(--sand);
	border-radius: var(--radius);
	min-width: 0;
}
.contact__reach > .h3 { margin-bottom: 20px; }
.reach { display: grid; gap: 12px; list-style: none; }
.reach__link {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 64px;
	padding: 12px 18px;
	background: var(--white);
	border: 1px solid var(--sand-line);
	border-radius: var(--radius);
	color: var(--navy);
	font-weight: 700;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: border-color 0.15s ease;
}
.reach__link:hover { border-color: var(--navy); color: var(--navy); }
.reach__link .icon { width: 24px; height: 24px; color: var(--green-ink); }
.reach__label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--muted); }

@media (min-width: 900px) {
	.contact__grid { grid-template-columns: 6fr 5fr; gap: 64px; align-items: start; }
	.contact__reach { padding: 40px; }
}

/* ---------- Generic page and article ---------- */
.page-body { padding-block: var(--section-tight) var(--section); }
.prose--page { max-width: 760px; font-size: 1.125rem; }
.prose--page h2,
.prose--page h3 { margin: 1.4em 0 0.5em; }
.prose--page > :first-child { margin-top: 0; }

/* Donate: the bank details are what people copy, so they get a bordered block and tabular figures */
.prose--donate p { margin-top: 1em; }
.prose--donate p:has(br) {
	padding: 20px 24px;
	background: var(--sand);
	border: 1px solid var(--sand-line);
	border-radius: var(--radius);
	font-variant-numeric: tabular-nums;
	line-height: 1.9;
}

.article__head { padding-block: 40px 32px; }
.article__title {
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
	overflow-wrap: anywhere;
}
.article__meta { margin-top: 16px; color: var(--muted); font-weight: 600; }
.article__photo { margin-block: 0 40px; }
.article__photo img {
	width: 100%;
	max-height: 620px;
	object-fit: cover;
	border-radius: var(--radius);
}
.prose--article { font-size: 1.1875rem; line-height: 1.75; overflow-wrap: anywhere; }
.prose--article p { margin-top: 1em; }
.prose--article img { border-radius: var(--radius); }
.prose--article .wp-block-gallery,
.prose--article .wp-block-image { margin: 32px 0; }
.prose--article figure { margin-inline: 0; }

.article__nav {
	display: grid;
	gap: 16px;
	padding-block: 48px var(--section);
}
.article__adj {
	display: block;
	padding: 18px 20px;
	border: 1px solid var(--sand-line);
	border-radius: var(--radius);
	color: var(--navy);
	font-weight: 700;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.article__adj span { display: block; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.article__adj:hover { border-color: var(--navy); color: var(--navy); }

@media (min-width: 720px) {
	.article__nav { grid-template-columns: 1fr 1fr; }
	.article__adj--next { grid-column: 2; text-align: right; }
}

/* ---------- Footer ---------- */
.footer {
	background: var(--navy);
	color: var(--on-navy-muted);
	padding-top: var(--section-tight);
	font-size: 1rem;
}
/* The closing band and the footer share the navy; a rule keeps them as two blocks */
main:has(> .closing:last-child) + .footer { padding-top: 0; }
main:has(> .closing:last-child) + .footer .footer__top {
	padding-top: var(--section-tight);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.footer a { color: var(--on-navy-muted); }
.footer a:hover { color: var(--white); }
.footer__top { display: grid; gap: 40px; padding-bottom: 40px; }
.footer__logo { display: inline-block; margin-bottom: 16px; }
.footer__logo img { width: 220px; height: auto; }
.footer__brand p { max-width: 30em; margin-bottom: 16px; }
.footer__heading {
	margin-bottom: 12px;
	font-size: 1rem;
	color: var(--white);
}
.footer__links ul { list-style: none; }
.footer__links a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	text-decoration: none;
}
.footer__links a:hover { text-decoration: underline; }

@media (min-width: 720px) {
	.footer__top { grid-template-columns: 1fr 1fr; }
	.footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 1080px) {
	.footer__top { grid-template-columns: 6fr 3fr 3fr; gap: 56px; }
	.footer__brand { grid-column: auto; }
}

.footer__facts {
	display: grid;
	gap: 24px;
	margin: 0;
	padding-block: 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.footer__facts dt {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--white);
}
.footer__facts dt .icon { color: var(--green-on-navy); }
.footer__facts dd { margin: 0 0 0 28px; overflow-wrap: anywhere; }
.footer__facts dd a { display: inline-block; padding-block: 4px; }

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

.footer__copy {
	padding-block: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.9375rem;
}

/* WordPress core alignment classes used in post content */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { margin-inline: auto; }
.wp-caption-text,
figcaption { font-size: 0.9375rem; color: var(--muted); margin-top: 8px; }

/* Home: the About block above is sand, so the sector grid sits on white here */
.work--light { background: var(--white); }

/* ---------- Home: sector gallery (owner's reference layout) ----------
   Full-bleed photo cards with the sector as a real category tag; 16px radius matches the About collage.
   Text sits on a navy scrim that is at least 0.9 opaque behind it (white 11:1 over a white pixel). */
.causes { padding-block: var(--section); background: var(--white); }
.causes__head {
	display: grid;
	gap: 20px 64px;
	margin-bottom: 40px;
}
.causes__intro p { color: var(--muted); max-width: 34em; margin-bottom: 20px; }

@media (min-width: 900px) {
	.causes__head { grid-template-columns: 7fr 5fr; align-items: end; margin-bottom: 36px; }
	.causes__intro { padding-bottom: 6px; }
}

.slider { position: relative; }
.slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 84%;
	gap: 16px;
	margin: 0;
	padding: 0 0 4px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }

@media (min-width: 640px) {
	.slider__track { grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; }
}

@media (min-width: 1080px) {
	.slider__track { grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; }
}

.cause { scroll-snap-align: start; min-width: 0; }
.cause__link {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	aspect-ratio: 4 / 5;
	padding: 24px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--navy);
	color: var(--white);
	text-decoration: none;
}
.cause__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(8, 42, 66, 0.96) 0%, rgba(8, 42, 66, 0.9) 42%, rgba(8, 42, 66, 0.25) 72%, rgba(8, 42, 66, 0.1) 100%);
}
.cause__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.cause__link:hover { color: var(--white); }
.cause__link:hover .cause__img { transform: scale(1.05); }
.cause__link:focus-visible { outline-color: var(--focus-on-dark); outline-offset: -4px; }

/* A real label: which of the six sectors the card is */
.cause__tag {
	position: absolute;
	top: 20px;
	left: 20px;
	max-width: calc(100% - 40px);
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(8, 42, 66, 0.88);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--white);
}
.cause__body { display: block; }
.cause__title {
	display: block;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.4375rem);
	line-height: 1.22;
	text-wrap: balance;
}
.cause__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin-top: 8px;
	font-weight: 700;
	color: var(--white);
}
.cause__more .icon { width: 18px; height: 18px; }
.cause__link:hover .cause__more { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.slider__track { scroll-behavior: auto; }
	.cause__img { transition: none; }
	.cause__link:hover .cause__img { transform: none; }
}

/* Prev/next sit on the card edges on wide screens, under the track on small ones */
.slider__nav {
	display: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 2px solid var(--navy);
	border-radius: 50%;
	background: var(--white);
	color: var(--navy);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.slider__nav:hover { background: var(--navy); color: var(--white); }
.slider__nav .icon--left { transform: rotate(90deg); }
.slider__nav .icon--right { transform: rotate(-90deg); }

.slider__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 16px;
}
.slider__status { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.slider__pause {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 2px solid var(--navy);
	border-radius: var(--radius);
	background: transparent;
	color: var(--navy);
	font: 700 0.9375rem/1 var(--font-body);
	cursor: pointer;
}
.slider__pause:hover { background: var(--sand); }
.slider__pause .icon { width: 14px; height: 14px; }
.slider__pause .icon--play,
.slider__pause.is-paused .icon--pause { display: none; }
.slider__pause.is-paused .icon--play { display: block; }

@media (max-width: 1239px) {
	/* Small screens: the buttons join the bar under the track */
	.slider { display: grid; grid-template-columns: auto auto 1fr; }
	.slider__track { grid-column: 1 / -1; }
	.slider__nav { display: inline-flex; grid-row: 2; margin-top: 20px; width: 48px; height: 48px; }
	.slider__nav--prev { grid-column: 1; margin-right: 8px; }
	.slider__nav--next { grid-column: 2; }
	.slider__bar { grid-row: 2; grid-column: 3; justify-content: flex-end; }
}

@media (min-width: 1240px) {
	.slider__nav {
		display: inline-flex;
		position: absolute;
		top: calc(50% - 26px - 32px);
		z-index: 2;
	}
	.slider__nav--prev { left: -26px; }
	.slider__nav--next { right: -26px; }
}

/* ---------- Home: Strategic Goals cycle (owner's reference: goals around a centre) ----------
   Six sector goals on an ellipse around the vision, arrows showing the order. Tones alternate navy / green
   instead of the reference's rainbow, so the palette stays two brand colours (R-29).
   Arrows #6B7C88 are 3.9:1 on sand; the active arrow is brand green. */
.goals { padding-block: var(--section); background: var(--sand); }
.goals__head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.goals__head .h2 { margin-bottom: 14px; }
.goals__head p { color: var(--muted); font-size: 1.125rem; }
.goals__head::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: 22px auto 0;
	background: var(--green);
}

.cycle { position: relative; }
.cycle__arrows { display: none; }

/* Small and medium screens: a numbered timeline, vision first */
.cycle__core {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 4px 16px;
	align-items: center;
	padding: 24px;
	margin-bottom: 28px;
	background: var(--navy);
	border-radius: 16px;
	color: var(--on-navy-muted);
}
.cycle__core-icon {
	grid-row: span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--green-ink);
	color: var(--white);
}
.cycle__core-icon .icon { width: 28px; height: 28px; }
.cycle__core-title { color: var(--white); font-size: 1.25rem; }
.cycle__core p { color: var(--white); font-weight: 600; }

.cycle__list {
	position: relative;
	display: grid;
	gap: 12px;
	list-style: none;
}
.cycle__list::before {
	content: "";
	position: absolute;
	left: 35px;
	top: 36px;
	bottom: 36px;
	width: 2px;
	background: var(--sand-line);
}
.goal__link {
	position: relative;
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 2px 16px;
	padding: 4px 0;
	color: var(--ink);
	text-decoration: none;
}
.goal__icon {
	grid-row: span 3;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 3px solid var(--sand);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.goal__icon .icon { width: 32px; height: 32px; }
.goal--navy .goal__icon { background: #DCE6EE; color: var(--navy); }
.goal--green .goal__icon { background: #D9F0E3; color: var(--green-ink); }
.goal__num {
	padding-top: 6px;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 0.875rem;
	color: var(--green-ink);
}
.goal__title {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.125rem;
	line-height: 1.25;
	color: var(--navy);
}
.goal__text { color: var(--muted); padding-bottom: 8px; }

.goal__link:hover .goal__title { text-decoration: underline; }
.goal--navy .goal__link:hover .goal__icon,
.goal--navy .goal__link:focus-visible .goal__icon { background: var(--navy); color: var(--white); }
.goal--green .goal__link:hover .goal__icon,
.goal--green .goal__link:focus-visible .goal__icon { background: var(--green-ink); color: var(--white); }
.goal__link:focus-visible { outline-offset: 4px; border-radius: 8px; }

@media (min-width: 720px) and (max-width: 1079px) {
	.cycle__list { grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 20px; }
	.cycle__list::before { display: none; }
}

/* Desktop: the cycle */
@media (min-width: 1080px) {
	.cycle { aspect-ratio: 10 / 7; max-width: 1080px; margin: 12px auto 0; }
	.cycle__arrows { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
	.cycle__arc {
		fill: none;
		stroke: #6B7C88;
		stroke-width: 2.5;
		stroke-dasharray: 2 7;
		stroke-linecap: round;
		marker-end: url(#cycle-head);
		transition: stroke 0.2s ease;
	}

	.cycle__core {
		position: absolute;
		left: 50%;
		top: 51.7%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 25%;
		aspect-ratio: 1;
		margin: 0;
		padding: 32px;
		border-radius: 50%;
		text-align: center;
		transform: translate(-50%, -50%);
		box-shadow: 0 0 0 14px rgba(13, 61, 94, 0.08);
	}
	.cycle__core-icon { width: 72px; height: 72px; }
	.cycle__core-icon .icon { width: 34px; height: 34px; }
	.cycle__core-title { font-size: 1.5rem; }
	.cycle__core p { font-size: 1rem; line-height: 1.45; max-width: 14em; }

	.cycle__list { position: absolute; inset: 0; display: block; }
	.cycle__list::before { display: none; }
	.goal {
		position: absolute;
		left: var(--x);
		top: var(--y);
		width: 22%;
		transform: translate(-50%, -50%);
	}
	.goal__link {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		padding: 0;
		text-align: center;
	}
	.goal__icon { width: 96px; height: 96px; margin-bottom: 8px; border-width: 6px; box-shadow: 0 8px 22px rgba(8, 42, 66, 0.12); }
	.goal__icon .icon { width: 40px; height: 40px; }
	.goal__link:hover .goal__icon,
	.goal__link:focus-visible .goal__icon { transform: translateY(-4px); }
	.goal__num { padding: 0; }
	.goal__text { padding: 0; font-size: 0.9375rem; }

	/* The arrow leaving a goal lights up with it */
	.cycle:has([data-goal="0"] .goal__link:hover) [data-arc="0"],
	.cycle:has([data-goal="0"] .goal__link:focus-visible) [data-arc="0"] { stroke: var(--green); marker-end: url(#cycle-head-on); }
	.cycle:has([data-goal="1"] .goal__link:hover) [data-arc="1"],
	.cycle:has([data-goal="1"] .goal__link:focus-visible) [data-arc="1"] { stroke: var(--green); marker-end: url(#cycle-head-on); }
	.cycle:has([data-goal="2"] .goal__link:hover) [data-arc="2"],
	.cycle:has([data-goal="2"] .goal__link:focus-visible) [data-arc="2"] { stroke: var(--green); marker-end: url(#cycle-head-on); }
	.cycle:has([data-goal="3"] .goal__link:hover) [data-arc="3"],
	.cycle:has([data-goal="3"] .goal__link:focus-visible) [data-arc="3"] { stroke: var(--green); marker-end: url(#cycle-head-on); }
	.cycle:has([data-goal="4"] .goal__link:hover) [data-arc="4"],
	.cycle:has([data-goal="4"] .goal__link:focus-visible) [data-arc="4"] { stroke: var(--green); marker-end: url(#cycle-head-on); }
	.cycle:has([data-goal="5"] .goal__link:hover) [data-arc="5"],
	.cycle:has([data-goal="5"] .goal__link:focus-visible) [data-arc="5"] { stroke: var(--green); marker-end: url(#cycle-head-on); }
}

/* ---------- Donate (owner's reference layout) ----------
   Photo + appeal + a bank-details card over a second photo. The card holds the real transfer details
   (read from the page) instead of amount presets; each row is a button that copies its value.
   No counters or "secure" badge: there is no real data behind them (R-17, R-36). */
.give { padding-block: 32px var(--section); background: var(--sand); }
.give .crumbs { margin-bottom: 24px; }
.give__grid { display: grid; gap: 32px; }

.give__photo { margin: 0; order: 2; }
.give__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }

.give__copy { order: 1; }
.give__title {
	margin-bottom: 18px;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	line-height: 1.08;
}
.give__lead { margin-bottom: 28px; color: var(--muted); font-size: 1.125rem; max-width: 30em; }

.give__ways {
	order: 3;
	display: grid;
	gap: 12px;
	list-style: none;
}
.way {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 2px 16px;
	align-items: center;
	padding: 18px 0;
	border-top: 1px dashed var(--sand-line);
	color: var(--ink);
	text-decoration: none;
}
.way__icon {
	grid-row: span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--white);
	color: var(--green-ink);
}
.way__icon .icon { width: 26px; height: 26px; }
.way__title { font-family: var(--font-head); font-weight: 800; font-size: 1.125rem; color: var(--navy); line-height: 1.25; }
.way__meta { color: var(--muted); }
.way:hover .way__title { text-decoration: underline; }

.give__panel {
	order: 4;
	position: relative;
	isolation: isolate;
	padding: 40px 16px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--navy);
	scroll-margin-top: calc(var(--header-h) + 16px);
}
.give__panel-img {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 720px) {
	.give__panel { padding: 56px 40px; }
}

@media (min-width: 1080px) {
	.give { padding-top: 40px; }
	.give__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr);
		grid-template-areas: "photo copy panel" "ways ways panel";
		gap: 40px 48px;
		align-items: start;
	}
	.give__photo { grid-area: photo; }
	.give__copy { grid-area: copy; padding-top: 12px; }
	.give__ways { grid-area: ways; grid-template-columns: 1fr 1fr; column-gap: 48px; }
	.give__panel { grid-area: panel; align-self: stretch; padding: 48px 24px; }
}

/* The card */
.bank {
	max-width: 440px;
	margin-inline: auto;
	background: var(--white);
	border-radius: 16px;
	box-shadow: 0 18px 48px rgba(8, 42, 66, 0.28);
	overflow: hidden;
}
.bank__tabs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	border-bottom: 4px solid #DCE6EE;
}
.bank__tab {
	min-height: 56px;
	padding: 10px 12px;
	border: 0;
	border-bottom: 4px solid transparent;
	margin-bottom: -4px;
	background: transparent;
	color: var(--muted);
	font: 700 0.9375rem/1.25 var(--font-body);
	cursor: pointer;
}
.bank__tab[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--green-ink); }
.bank__tab:hover { color: var(--navy); background: var(--sand); }
.bank__tab:focus-visible { outline-offset: -3px; }

.bank__panel { padding: 16px 16px 4px; }
.bank__rows { display: grid; gap: 8px; list-style: none; }
.bank__row {
	display: grid;
	grid-template-columns: 40px 1fr 32px;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 60px;
	padding: 8px 12px;
	border: 1px solid var(--sand-line);
	border-radius: 10px;
	background: var(--white);
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: copy;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.bank__row:hover { border-color: var(--navy); }
.bank__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #DCE6EE;
	color: var(--navy);
}
.bank__icon .icon { width: 20px; height: 20px; }
.bank__text { min-width: 0; }
.bank__label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.bank__value {
	display: block;
	font-weight: 700;
	color: var(--navy);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.bank__copy { display: inline-flex; justify-content: center; color: var(--muted); }
.bank__copy .icon { width: 20px; height: 20px; }
.bank__copy .icon--done { display: none; }

/* Copied: green state with a check, plus the text status below (not colour alone) */
.bank__row.is-copied { border-color: var(--green-ink); background: #E6F4EC; }
.bank__row.is-copied .bank__icon { background: var(--green-ink); color: var(--white); }
.bank__row.is-copied .bank__copy { color: var(--green-ink); }
.bank__row.is-copied .icon--copy { display: none; }
.bank__row.is-copied .icon--done { display: block; }

.bank__hint {
	padding: 12px 16px 18px;
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: center;
	color: var(--muted);
}
.bank__hint.is-error { color: #B42318; }

/* Who We Are: Vision & Mission moves to sand so it does not stack on the navy values band */
.vm--light { background: var(--sand); color: var(--ink); }
.vm--light .h2 { color: var(--navy); }
.vm--light .kicker--light { color: var(--green-ink); }
.vm--light .kicker--light::before { background: var(--green); }

/* ---------- Core values (owner's reference: 2x2 cards, green cross through the gaps) ----------
   Cards are sand on navy; the icon sits in a white rounded bite cut into the bottom-right corner.
   Numbers #007A3C on sand 4.84:1; text #4A5B68 on sand 6.23:1. */
.values--dark .section-head { margin-inline: auto; text-align: center; }
.values--dark .section-head .kicker { justify-content: center; }

.value-grid {
	position: relative;
	display: grid;
	gap: 16px;
	max-width: 1000px;
	margin: 0 auto;
	list-style: none;
}
.value-card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-height: 220px;
	padding: 28px 28px 24px;
	background: var(--sand);
	border-radius: 22px;
	overflow: hidden;
}
/* The white bite: a large circle anchored off the bottom-right corner */
.value-card::after {
	content: "";
	position: absolute;
	right: -46px;
	bottom: -46px;
	z-index: -1;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	background: var(--white);
	box-shadow: -6px -6px 18px rgba(8, 42, 66, 0.06);
}
.value-card__name {
	margin-bottom: 10px;
	padding-right: 8px;
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
	letter-spacing: -0.01em;
	color: var(--navy);
}
.value-card__text { max-width: 22em; padding-right: 96px; color: var(--muted); }
.value-card__num {
	margin-top: auto;
	padding-top: 16px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--green-ink);
}
.value-card__icon {
	position: absolute;
	right: 22px;
	bottom: 20px;
	display: inline-flex;
	color: var(--navy);
}
.value-card__icon .icon { width: 52px; height: 52px; }

@media (min-width: 720px) {
	.value-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
	/* Green cross behind the cards: only the gaps show it */
	.value-grid::before,
	.value-grid::after {
		content: "";
		position: absolute;
		z-index: 0;
		background: var(--green);
	}
	.value-grid::before { left: 50%; top: 14%; bottom: 14%; width: 64px; transform: translateX(-50%); }
	.value-grid::after { top: 50%; left: 16%; right: 16%; height: 64px; transform: translateY(-50%); }
	.value-card { min-height: 250px; padding: 34px 34px 28px; }
}

@media (min-width: 1080px) {
	.value-card { min-height: 270px; }
	.value-card::after { width: 190px; height: 190px; }
}

/* Values band followed by the navy closing band: keep them as two blocks */
.values--dark + .closing { border-top: 1px solid rgba(255, 255, 255, 0.18); }

/* Narrow phones: give the 23-character IBAN one line */
@media (max-width: 479px) {
	.give__panel { padding: 24px 8px; }
	.bank__panel { padding: 12px 12px 4px; }
	.bank__row { grid-template-columns: 36px 1fr 20px; gap: 10px; padding: 8px 10px; }
	.bank__icon { width: 36px; height: 36px; }
	.bank__value { font-size: 0.9375rem; }
}

/* Home: the donate block sits between About (sand) and the sector gallery, so the home bands
   alternate About sand / Donate white / Gallery sand / Goals white / Values navy */
.give--home { padding-top: var(--section); background: var(--white); }
.give--home .way__icon { background: var(--sand); }
.home .causes { background: var(--sand); }
.home .goals { background: var(--white); }
.home .goals .goal__icon { border-color: var(--white); }

/* Home donate block: the maize field in the background, lightly blurred under a 78% white veil.
   Text is darkened here to hold contrast over the darkest leaf pixel: kicker #005C2C 5.4:1, body #3A4A56 6.1:1, headings navy 7.5:1. */
.give--home { position: relative; isolation: isolate; overflow: hidden; }
.give--home::before,
.give--home::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.give--home::before {
	inset: -12px;
	background: var(--give-bg) center 60% / cover no-repeat;
	filter: blur(2px) saturate(0.9);
}
.give--home::after { background: rgba(255, 255, 255, 0.78); }
.give--home .kicker { color: #005C2C; }
.give--home .give__lead,
.give--home .way__meta { color: #3A4A56; }
.give--home .way { border-top-color: rgba(13, 61, 94, 0.18); }
.give--home .way__icon { background: var(--white); box-shadow: 0 4px 12px rgba(8, 42, 66, 0.08); }

/* Strategic Goals: the aerial coast photo under an 80% white veil, read like a map behind the cycle.
   The photo has pure-black pixels, so text is checked against #CCCCCC: body #3A4A56 5.7:1,
   numbers #005C2C 5.1:1, titles navy 7.1:1; arrows darken to #4A5B68 (4.8:1). */
.goals--backdrop { position: relative; isolation: isolate; overflow: hidden; }
.goals--backdrop::before,
.goals--backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.goals--backdrop::before {
	inset: -12px;
	background: var(--goals-bg) center / cover no-repeat;
	filter: blur(2px) saturate(0.9);
}
.goals--backdrop::after { background: rgba(255, 255, 255, 0.8); }
.goals--backdrop .goals__head p,
.goals--backdrop .goal__text { color: #3A4A56; }
.goals--backdrop .goal__num { color: #005C2C; }
.goals--backdrop .goal .goal__icon { border-color: var(--white); }
.goals--backdrop .cycle__list::before { background: rgba(13, 61, 94, 0.25); }

@media (min-width: 1080px) {
	.goals--backdrop .cycle__arc { stroke: #4A5B68; }
}

/* ---------- Home: Our Partners (owner's reference: arched title panel over a row of tall cards) ----------
   Cards alternate brand green / a lighter brand navy, like the reference's alternating colours.
   Logos sit on white plates because two of the files are JPGs with white backgrounds and every logo
   keeps its own colours there. The diagonal stripes in the arch echo the reference; they are 6% white. */
.partners { padding-block: var(--section); background: var(--white); }
.partners__arch {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	padding: 48px 24px 96px;
	border-radius: 999px 999px 0 0;
	background:
		repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 26px),
		var(--navy);
	text-align: center;
	color: var(--white);
}
.partners__eyebrow {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem);
	line-height: 1.1;
	color: var(--on-navy-muted);
}
.partners__title {
	margin-top: 4px;
	font-size: clamp(2.5rem, 1.4rem + 5vw, 4.75rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--white);
}

.partner-list {
	position: relative;
	display: grid;
	gap: 20px;
	margin-top: -56px;
	list-style: none;
}

@media (min-width: 640px) {
	.partner-list { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1080px) {
	.partners__arch { padding: 64px 40px 120px; }
	.partner-list { grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: -72px; }
}

.partner__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 6px solid var(--navy);
	background: var(--navy);
	color: var(--ink);
	text-decoration: none;
	transition: transform 0.2s ease;
}
.partner__link:hover { transform: translateY(-4px); color: var(--ink); }
.partner__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1.05;
	min-height: 0;
	padding: 28px;
}
.partner--green .partner__stage { background: var(--green); }
.partner--navy .partner__stage { background: #2A6C9C; }
.partner__plate {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 0;
	overflow: hidden;
	padding: 22px;
	border-radius: 16px;
	background: var(--white);
	box-shadow: 0 10px 24px rgba(8, 42, 66, 0.22);
}
.partner__plate img {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: contain;
	transition: transform 0.3s ease;
}
.partner__link:hover .partner__plate img { transform: scale(1.04); }
.partner__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
	padding: 20px 20px 18px;
	background: var(--white);
}
.partner__name {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.1875rem;
	line-height: 1.2;
	color: var(--navy);
}
.partner__role { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.partner__visit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 8px;
	min-height: 32px;
	font-weight: 700;
	color: var(--green-ink);
}
.partner__visit .icon { width: 16px; height: 16px; }
.partner__link:hover .partner__visit { text-decoration: underline; }
.partner__link:focus-visible { outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.partner__link,
	.partner__plate img { transition: none; }
	.partner__link:hover { transform: none; }
}

/* ---------- Home: From our Facebook page (owner's reference: grid of post thumbnails) ----------
   Each card is the post's own photo with the page header on top and the title over a navy scrim at the
   bottom (scrim >= 0.9 behind text: white 11:1). The whole card opens the post on Facebook. */
.fbfeed { padding-block: var(--section); background: var(--sand); }
.fbfeed .section-head { margin-bottom: 32px; }
.fbfeed__grid { display: grid; gap: 20px; list-style: none; }

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

/* Five posts: three across, then two wider; fewer posts share the row evenly */
@media (min-width: 1080px) {
	.fbfeed__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
	.fbfeed__grid > li { grid-column: span 2; }
	.fbfeed__grid--5 > li:nth-child(n+4),
	.fbfeed__grid--4 > li,
	.fbfeed__grid--2 > li { grid-column: span 3; }
	.fbfeed__grid--1 > li { grid-column: 2 / span 4; }
}

.fbpost__link {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* Height, not aspect-ratio: with a min-height, aspect-ratio would widen a card past its grid column */
	height: 100%;
	min-height: clamp(340px, 30vw, 420px);
	border-radius: 16px;
	overflow: hidden;
	background: var(--navy);
	color: var(--white);
	text-decoration: none;
}
.fbpost__link::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; }
/* Solid 0.9+ under the summary and link; the title (large text) sits where it is still above 0.7 (5.5:1) */
.fbpost__link::after { bottom: 0; height: 52%; background: linear-gradient(0deg, rgba(8, 42, 66, 0.96) 0%, rgba(8, 42, 66, 0.9) 45%, rgba(8, 42, 66, 0.7) 70%, rgba(8, 42, 66, 0) 100%); }
.fbpost__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.fbpost__link:hover { color: var(--white); }
.fbpost__link:hover .fbpost__img { transform: scale(1.05); }
.fbpost__link:focus-visible { outline-color: var(--focus-on-dark); outline-offset: -4px; }

/* Header on its own solid pill so the photo can show at full strength above the title */
.fbpost__top {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 10px;
	margin: 14px;
	padding: 5px 14px 5px 5px;
	border-radius: 999px;
	background: rgba(8, 42, 66, 0.9);
}
.fbpost__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--white); border: 2px solid var(--white); }
.fbpost__page { display: block; font-family: var(--font-head); font-weight: 800; font-size: 0.9375rem; line-height: 1.2; }
.fbpost__date { display: block; font-size: 0.8125rem; color: var(--on-navy-muted); }

.fbpost__bottom { display: flex; flex-direction: column; gap: 8px; padding: 0 20px 18px; }
.fbpost__title {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.22;
	text-wrap: balance;
}
.fbpost__summary {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.9375rem;
	color: var(--on-navy-muted);
}
.fbpost__open {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	font-weight: 700;
}
.fbpost__open .icon { width: 18px; height: 18px; }
.fbpost__link:hover .fbpost__open { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.fbpost__img { transition: none; }
	.fbpost__link:hover .fbpost__img { transform: none; }
}