/* ==========================================================================
   Emissa theme
   Design notes
   - One memorable element: a fan of diagonal capsules, taken from the
     organization's own brochure. It returns, quietly, on inner pages.
   - Logical properties throughout, so Arabic (RTL) mirrors without a
     second stylesheet.
   - Motion: one orchestrated hero entrance, icons that draw themselves once
     and move on hover, counters that count once. All off under
     prefers-reduced-motion.
   ========================================================================== */

/* Readex Pro (SIL Open Font License, see assets/fonts/OFL.txt). One variable
   file covers Latin and Arabic at weights 300 to 700. */
@font-face {
	font-family: "Readex Pro";
	src: url("../fonts/ReadexPro-var.woff") format("woff");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Colors come from the official Emissa logo: teal #35949e, grey #a7a5a6, orange #f8a50d.
	   --tide is a slightly deeper teal that keeps text and buttons readable. */
	--brand: #35949e;
	--tide: #2b7f89;
	--tide-dark: #1f6670;
	--deep: #0f3b43;
	--lagoon: #5fa8b2;
	--lagoon-pale: #a9d2d7;
	--mist: #eaf3f4;
	--paper: #fafcfc;
	--gold: #f8a50d;
	--gold-bright: #ffb52e;
	--grey: #a7a5a6;
	--crimson: #9e1b22;
	--ink: #17313a;
	--ink-soft: #4a6168;
	--line: rgba(15, 59, 67, 0.14);
	--line-strong: rgba(15, 59, 67, 0.32);

	--font: "Readex Pro", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
	--tracking: -0.022em;
	--tilt: -40deg;

	--fs-0: 1.0625rem;
	--fs-1: clamp(1.15rem, 1.4vw, 1.3rem);
	--fs-2: clamp(1.4rem, 2vw, 1.75rem);
	--fs-3: clamp(1.9rem, 3.4vw, 2.75rem);
	--fs-4: clamp(2.3rem, 5vw, 3.8rem);
	--fs-hero: clamp(2.7rem, 6vw, 5rem);

	--maxw: 1240px;
	--gutter: clamp(20px, 4vw, 48px);
	--radius-s: 8px;
	--radius-m: 16px;
	--radius-l: 28px;
	--header-h: 76px;
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--end: right;
}

[dir="rtl"] {
	--tilt: 40deg;
	--end: left;
}

[lang="ar"] {
	--tracking: 0;
}

/* ---------- Base ---------- */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--fs-0);
	line-height: 1.65;
	font-weight: 400;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

[lang="ar"] body {
	font-size: 1.125rem;
	line-height: 1.85;
}

body.nav-locked {
	overflow: hidden;
}

img,
svg {
	max-width: 100%;
}

img {
	display: block;
	height: auto;
}

a {
	color: var(--tide);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--tide-dark);
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: var(--tracking);
	color: var(--deep);
	text-wrap: balance;
}

[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] h4 {
	line-height: 1.4;
}

p {
	margin: 0 0 1em;
}

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

:focus-visible {
	outline: 3px solid var(--tide);
	outline-offset: 3px;
	border-radius: 4px;
}

.impact :focus-visible,
.involve :focus-visible,
.site-footer :focus-visible,
.announce :focus-visible {
	outline-color: var(--gold);
}

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

.skip {
	position: absolute;
	inset-inline-start: 16px;
	top: -80px;
	z-index: 100;
	padding: 0.7em 1.1em;
	background: var(--deep);
	color: #fff;
	border-radius: var(--radius-s);
	text-decoration: none;
}

.skip:focus {
	top: 12px;
}

.wrap {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--prose {
	max-width: 820px;
}

.section {
	padding-block: clamp(64px, 8vw, 120px);
}

.section--tight {
	padding-block: clamp(40px, 5vw, 72px);
}

.h-section {
	font-size: var(--fs-3);
}

.lead {
	max-width: 60ch;
	margin: 18px 0 0;
	font-size: var(--fs-1);
	line-height: 1.6;
	color: var(--ink-soft);
}

.lead--narrow {
	max-width: 52ch;
}

.empty {
	padding: 32px 0;
	color: var(--ink-soft);
}

/* ---------- Buttons and links ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.8em 1.5em;
	border: 2px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}

.btn:active {
	transform: translateY(1px);
}

.btn--primary {
	background: var(--tide);
	color: #fff;
}

.btn--primary:hover {
	background: var(--tide-dark);
	color: #fff;
}

.btn--gold {
	background: var(--gold);
	color: var(--deep);
}

.btn--gold:hover {
	background: var(--gold-bright);
	color: var(--deep);
}

.btn--ghost {
	border-color: var(--line-strong);
	color: var(--deep);
}

.btn--ghost:hover {
	border-color: var(--tide);
	color: var(--tide);
}

.btn--light {
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.btn--light:hover {
	background: #fff;
	color: var(--deep);
}

.btn--block {
	width: 100%;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-weight: 600;
	color: var(--tide);
	text-decoration: none;
}

.link-arrow .icon {
	transition: transform 0.25s var(--ease);
}

.link-arrow:hover .icon {
	transform: translateX(4px);
}

[dir="rtl"] .link-arrow:hover .icon {
	transform: translateX(-4px);
}

.icon {
	display: inline-block;
	flex: none;
	vertical-align: middle;
}

.icon--dir {
	transform: none;
}

[dir="rtl"] .icon--dir {
	transform: scaleX(-1);
}

[dir="rtl"] .link-arrow:hover .icon--dir {
	transform: scaleX(-1) translateX(4px);
}

.link-arrow:hover .icon--dir {
	transform: translateX(4px);
}

.icon--back {
	transform: scaleX(-1);
}

[dir="rtl"] .icon--back {
	transform: none;
}

/* ---------- Announcement + header ---------- */

.announce {
	background: var(--deep);
	color: #fff;
	font-size: 0.92rem;
}

.announce__inner p {
	margin: 0;
	padding-block: 9px;
	text-align: center;
}

.announce a {
	margin-inline-start: 0.6em;
	color: var(--gold);
	font-weight: 600;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s;
}

/* The frosted background lives on a pseudo-element: a backdrop-filter on the
   header itself would trap the fixed mobile menu inside the header's box. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(250, 252, 252, 0.92);
	-webkit-backdrop-filter: saturate(1.2) blur(12px);
	backdrop-filter: saturate(1.2) blur(12px);
}

.site-header.is-scrolled {
	border-bottom-color: var(--line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--header-h);
}

.brand {
	display: inline-flex;
	align-items: center;
	color: var(--brand);
	text-decoration: none;
}

.brand__img {
	width: auto;
	height: 46px;
}

/* Official logo, drawn inline so the four figures can move. */
.lockup-svg {
	display: block;
	width: auto;
	height: 46px;
	overflow: visible;
}

.mark-svg .m-fig,
.mark-svg .m-e,
.lockup-svg .m-fig,
.lockup-svg .m-e {
	fill: var(--brand);
}

.lockup-svg .lk-word path {
	fill: var(--grey);
}

.brand--dark .lockup-svg {
	height: 52px;
}

.brand--dark .lockup-svg .m-fig,
.brand--dark .lockup-svg .m-e {
	fill: #6cc3cd;
}

.brand--dark .lockup-svg .lk-word path {
	fill: #fff;
}

.m-fig {
	transform-box: fill-box;
	transform-origin: center;
}

.m-top {
	--k: 0;
	--dx: 0px;
	--dy: -26px;
}

.m-bottom {
	--k: 1;
	--dx: 0px;
	--dy: 26px;
}

.m-left {
	--k: 2;
	--dx: -26px;
	--dy: 0px;
}

.m-right {
	--k: 3;
	--dx: 26px;
	--dy: 0px;
}

@media (prefers-reduced-motion: no-preference) {
	/* On every page load the four figures settle into place around the "e". */
	.site-header .lockup-svg .m-fig {
		animation: figure-in 0.9s var(--ease) both;
		animation-delay: calc(var(--k) * 90ms);
	}

	.brand:hover .lockup-svg .m-fig,
	.brand:focus-visible .lockup-svg .m-fig {
		animation: figure-nudge 0.8s var(--ease) both;
		animation-delay: calc(var(--k) * 60ms);
	}
}

@keyframes figure-in {
	from {
		opacity: 0;
		transform: translate(var(--dx), var(--dy));
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes figure-nudge {
	45% {
		transform: translate(calc(var(--dx) * 0.55), calc(var(--dy) * 0.55));
	}

	100% {
		transform: none;
	}
}

.nav-toggle {
	display: none;
	margin-inline-start: auto;
	padding: 8px;
	background: none;
	border: 0;
	color: var(--deep);
	cursor: pointer;
}

.nav-toggle__close {
	display: none;
}

.is-open .nav-toggle__open {
	display: none;
}

.is-open .nav-toggle__close {
	display: inline-block;
}

.nav-panel {
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 40px);
	margin-inline-start: auto;
}

.nav ul {
	display: flex;
	gap: clamp(14px, 2vw, 30px);
	list-style: none;
}

.nav a {
	position: relative;
	display: inline-block;
	padding-block: 8px;
	color: var(--ink);
	font-size: 0.98rem;
	font-weight: 400;
	text-decoration: none;
	background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0 3px;
	transition: background-size 0.3s var(--ease), color 0.2s;
}

[dir="rtl"] .nav a {
	background-position: 100% 100%;
}

.nav a:hover {
	color: var(--deep);
	background-size: 100% 3px;
}

.nav a[aria-current="page"] {
	font-weight: 600;
	color: var(--deep);
	background-size: 100% 3px;
}

.header-tools {
	display: flex;
	align-items: center;
	gap: 14px;
}

.lang-switch {
	padding: 0.4em 1em;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	color: var(--ink);
	font-size: 0.95rem;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}

.lang-switch:hover {
	border-color: var(--tide);
	color: var(--tide);
}

@media (max-width: 1120px) {
	.nav-toggle {
		display: inline-flex;
	}

	.nav-panel {
		position: fixed;
		inset: var(--header-h) 0 0 0;
		z-index: 40;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 28px;
		padding: 28px var(--gutter) 40px;
		overflow-y: auto;
		background: var(--paper);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.25s, transform 0.25s var(--ease), visibility 0s linear 0.25s;
	}

	.is-open .nav-panel {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.nav ul {
		flex-direction: column;
		gap: 0;
	}

	.nav li {
		border-bottom: 1px solid var(--line);
	}

	.nav a {
		display: block;
		padding-block: 16px;
		font-size: 1.25rem;
		background: none;
	}

	.header-tools {
		justify-content: space-between;
	}
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(48px, 7vw, 96px) clamp(64px, 9vw, 120px);
	overflow: hidden;
	color: #fff;
	background: radial-gradient(120% 95% at 82% 8%, #2e8e99 0%, #1b616b 46%, #0f3b43 100%);
}

/* The triangle lattice from the brochure cover, fading in from the text side. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: url("../img/triangles-light.svg") 0 0 / 60px auto;
	opacity: 0.1;
	-webkit-mask-image: linear-gradient(to var(--end), transparent 20%, #000 90%);
	mask-image: linear-gradient(to var(--end), transparent 20%, #000 90%);
}

.hero__mark {
	position: absolute;
	top: 50%;
	inset-inline-end: -6%;
	z-index: -1;
	width: min(64vw, 720px);
	transform: translateY(-50%);
	pointer-events: none;
}

.hero__mark-svg {
	display: block;
	width: 100%;
	height: auto;
}

.hero__mark-svg .m-fig,
.hero__mark-svg .m-e {
	fill: #fff;
	fill-opacity: 0.09;
}

.hero__mark-svg .m-ring {
	transform-box: fill-box;
	transform-origin: center;
}

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}

.hero__title {
	max-width: 12ch;
	font-size: var(--fs-hero);
	font-weight: 500;
	line-height: 1.02;
	color: #fff;
}

[lang="ar"] .hero__title {
	max-width: 11ch;
	line-height: 1.25;
}

.hero__lead {
	max-width: 46ch;
	margin: 28px 0 0;
	font-size: var(--fs-1);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 36px;
}

.hero__visual {
	position: relative;
}

.fan {
	position: relative;
	width: 100%;
	max-width: 580px;
	margin-inline: auto;
	aspect-ratio: 1 / 1.06;
}

.fan__stage {
	position: absolute;
	inset: -2% -6%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(5px, 0.9vw, 10px);
	transform: rotate(var(--tilt));
}

.capsule {
	--len: 70%;
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: var(--len);
	border-radius: 999px;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16), 0 22px 44px rgba(4, 24, 29, 0.38);
	transition: flex-grow 0.6s var(--ease), box-shadow 0.3s;
}

.capsule:nth-child(1) {
	--len: 58%;
	--i: 0;
}

.capsule:nth-child(2) {
	--len: 76%;
	--i: 1;
}

.capsule:nth-child(3) {
	--len: 88%;
	--i: 2;
}

.capsule:nth-child(4) {
	--len: 70%;
	--i: 3;
}

.capsule:nth-child(5) {
	--len: 84%;
	--i: 4;
}

.capsule:nth-child(6) {
	--len: 64%;
	--i: 5;
}

.capsule:nth-child(7) {
	--len: 50%;
	--i: 6;
}

.capsule.is-active {
	flex-grow: 2.4;
	box-shadow: 0 0 0 3px var(--gold), 0 26px 52px rgba(4, 24, 29, 0.45);
}

.capsule__art {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(160deg, var(--tide-dark), var(--deep));
}

/* The photo stays upright while the capsule is tilted, so each capsule is a window onto its picture. */
.capsule__photo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	max-width: none;
	height: 112%;
	transform: translate(-50%, -50%) rotate(calc(var(--tilt) * -1));
	filter: saturate(1.06);
	transition: transform 0.8s var(--ease);
}

.capsule.is-active .capsule__photo {
	transform: translate(-50%, -50%) rotate(calc(var(--tilt) * -1)) scale(1.06);
}

.fan__caption {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: 5.2em;
	max-width: 420px;
	margin: 44px auto 0;
	padding-inline-start: 14px;
	border-inline-start: 3px solid var(--gold);
}

.fan__caption strong {
	font-weight: 600;
	color: #fff;
}

.fan__caption span {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.96rem;
	line-height: 1.5;
}

@media (max-width: 860px) {
	.hero__grid {
		grid-template-columns: 1fr;
	}

	.hero__title {
		max-width: 14ch;
	}

	.hero__mark {
		width: 110vw;
		inset-inline-end: -40%;
		opacity: 0.8;
	}

	.fan {
		max-width: 380px;
	}

	.fan__stage {
		inset: 0 -4%;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.capsule {
		animation: capsule-in 0.95s var(--ease) both;
		animation-delay: calc(var(--i) * 90ms + 120ms);
	}

	.hero__title,
	.hero__lead,
	.hero__actions {
		animation: fade-in 0.8s ease both;
	}

	.hero__lead {
		animation-delay: 0.12s;
	}

	.hero__actions {
		animation-delay: 0.24s;
	}

	.hero__mark-svg .m-ring {
		animation: orbit 120s linear infinite;
	}
}

@keyframes orbit {
	to {
		transform: rotate(360deg);
	}
}

@keyframes capsule-in {
	from {
		opacity: 0;
		transform: translateY(16%);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ---------- About teaser ---------- */

.about-teaser {
	background: var(--mist);
}

.about-teaser__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}

.about-teaser__copy .link-arrow {
	margin-top: 28px;
}

.about-teaser__shapes {
	position: relative;
	min-height: 360px;
}

.shape {
	position: absolute;
	display: block;
	border-radius: 999px;
	overflow: hidden;
	transform: rotate(var(--tilt));
}

.shape--1 {
	top: 6%;
	inset-inline-start: 30%;
	width: 120px;
	height: 330px;
	background: linear-gradient(160deg, var(--tide-dark), var(--deep));
}

.shape--2 {
	top: 14%;
	inset-inline-start: 6%;
	width: 84px;
	height: 250px;
	border: 2px solid var(--tide);
}

.shape--3 {
	top: 30%;
	inset-inline-start: 62%;
	width: 60px;
	height: 190px;
	background: var(--gold);
}

.shape__photo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 360%;
	max-width: none;
	height: 160%;
	object-fit: cover;
	transform: translate(-50%, -50%) rotate(calc(var(--tilt) * -1));
	filter: grayscale(1);
	mix-blend-mode: luminosity;
}

@media (max-width: 860px) {
	.about-teaser__grid {
		grid-template-columns: 1fr;
	}

	.about-teaser__shapes {
		min-height: 260px;
	}
}

/* ---------- Programs ---------- */

.section-head {
	margin-bottom: clamp(28px, 4vw, 48px);
}

.section-head--row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
}

.program-list {
	list-style: none;
	border-top: 1px solid var(--line);
}

.program-row {
	border-bottom: 1px solid var(--line);
}

.program-row__link {
	--pad: 16px;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	gap: clamp(16px, 3vw, 40px);
	align-items: center;
	margin-inline: calc(var(--pad) * -1);
	padding: 28px var(--pad);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.25s;
}

.program-row__link:hover,
.program-row__link:focus-visible {
	background: var(--mist);
}

.program-row__icon {
	color: var(--tide);
}

.program-row__title {
	display: block;
	font-size: var(--fs-2);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--tracking);
	color: var(--deep);
}

.program-row__text {
	display: block;
	max-width: 62ch;
	margin-top: 8px;
	color: var(--ink-soft);
	line-height: 1.55;
}

.program-row__go {
	color: var(--tide);
	transition: transform 0.3s var(--ease);
}

.program-row__link:hover .program-row__go {
	transform: translateX(6px);
}

[dir="rtl"] .program-row__link:hover .program-row__go {
	transform: translateX(-6px);
}

@media (max-width: 640px) {
	.program-row__link {
		grid-template-columns: 52px minmax(0, 1fr);
	}

	.program-row__go {
		display: none;
	}

	.program-row__icon .icon {
		width: 44px;
		height: 44px;
	}
}

/* ---------- Impact ---------- */

.impact {
	background: var(--deep);
	color: #fff;
}

.impact h2,
.impact .h-section {
	color: #fff;
}

.impact .lead {
	color: var(--lagoon-pale);
}

.impact--compact {
	padding-block: clamp(40px, 5vw, 64px);
}

.impact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}

.impact__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
}

.impact__stats--row {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.impact__stats li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px 28px;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
}

.stat__num {
	font-size: clamp(3rem, 6.5vw, 5rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: var(--tracking);
	font-variant-numeric: tabular-nums;
}

.stat__label {
	color: var(--lagoon-pale);
	font-size: 1rem;
}

@media (max-width: 860px) {
	.impact__grid {
		grid-template-columns: 1fr;
	}

	.impact__stats--row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Activity cards ---------- */

.act-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 28px;
}

.act-grid > .act:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.act-grid.act-grid--even {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.act-grid.act-grid--even > .act:first-child {
	grid-column: auto;
	grid-row: auto;
}

.act {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.act__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-m);
	background: var(--mist);
}

.act__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.act:hover .act__media img {
	transform: scale(1.04);
}

.act-grid > .act:first-child .act__media {
	flex: 1;
	min-height: 300px;
	aspect-ratio: auto;
}

.act-grid.act-grid--even > .act:first-child .act__media {
	flex: none;
	min-height: 0;
	aspect-ratio: 4 / 3;
}

.ph {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: rgba(255, 255, 255, 0.92);
	background: linear-gradient(160deg, var(--tide-dark), var(--deep));
}

.ph--2 {
	background: linear-gradient(160deg, var(--tide), var(--lagoon));
}

.ph--3 {
	background: linear-gradient(160deg, var(--deep), var(--tide));
}

.ph--4 {
	background: linear-gradient(160deg, var(--lagoon), var(--tide));
}

.ph--5 {
	background: linear-gradient(160deg, #17404a, var(--deep));
}

.act__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 16px;
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.88rem;
}

.act__program {
	color: var(--tide);
	font-weight: 600;
}

.act__title {
	font-size: 1.25rem;
	line-height: 1.28;
}

.act-grid > .act:first-child .act__title {
	font-size: var(--fs-2);
}

.act-grid.act-grid--even > .act:first-child .act__title {
	font-size: 1.25rem;
}

.act__title a {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
	transition: background-size 0.3s var(--ease);
}

[dir="rtl"] .act__title a {
	background-position: 100% 100%;
}

.act__title a:hover {
	background-size: 100% 1px;
}

.act__text {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--ink-soft);
	font-size: 0.98rem;
	line-height: 1.55;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

@media (max-width: 980px) {
	.act-grid,
	.act-grid.act-grid--even {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.act-grid > .act:first-child {
		grid-column: span 2;
		grid-row: auto;
	}

	.act-grid > .act:first-child .act__media {
		flex: none;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 600px) {
	.act-grid,
	.act-grid.act-grid--even {
		grid-template-columns: 1fr;
	}

	.act-grid > .act:first-child {
		grid-column: auto;
	}
}

/* ---------- Publications ---------- */

.research {
	background: var(--mist);
}

.pub-list {
	border-top: 2px solid var(--deep);
}

.pub {
	display: grid;
	grid-template-columns: 11rem minmax(0, 1fr) 5rem 9rem;
	gap: 8px 24px;
	align-items: baseline;
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
}

.pub p {
	margin: 0;
}

.pub--head {
	padding: 12px 0;
	color: var(--ink-soft);
	font-size: 0.9rem;
}

.pub__type {
	color: var(--tide);
	font-size: 0.92rem;
	font-weight: 600;
}

.pub__title {
	font-size: 1.2rem;
	line-height: 1.3;
}

.pub__title a {
	color: inherit;
	text-decoration: none;
}

.pub__title a:hover {
	color: var(--tide);
	text-decoration: underline;
}

.pub__by {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
	margin-top: 4px !important;
	color: var(--ink-soft);
	font-size: 0.9rem;
}

.pub__year {
	font-variant-numeric: tabular-nums;
	color: var(--ink-soft);
}

.pub__act {
	justify-self: end;
}

@media (max-width: 760px) {
	.pub {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.pub--head {
		display: none;
	}

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

	.pub__year {
		grid-column: 2;
		grid-row: 1;
	}

	.pub__act {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

/* ---------- Partners ---------- */

.partners {
	padding-block: clamp(48px, 6vw, 80px);
}

.partners__title {
	margin-bottom: 28px;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--ink-soft);
}

.partners__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 56px;
	list-style: none;
}

.partners__list img {
	width: auto;
	height: 52px;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.3s, opacity 0.3s;
}

.partners__list a:hover img {
	filter: none;
	opacity: 1;
}

.partners__list span {
	color: var(--ink-soft);
	font-size: 1.1rem;
	font-weight: 600;
}

/* ---------- Get involved band ---------- */

.involve {
	position: relative;
	isolation: isolate;
	background: var(--tide-dark);
	color: #fff;
}

.involve::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../img/triangles-light.svg") 0 0 / 60px auto;
	opacity: 0.07;
}

.involve__title {
	margin-bottom: clamp(28px, 4vw, 48px);
	font-size: var(--fs-3);
	color: #fff;
}

.involve__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}

.involve__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 8px clamp(20px, 3vw, 40px) 8px;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.28);
}

.involve__item:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}

.involve__item h3 {
	font-size: var(--fs-2);
	color: #fff;
}

.involve__item p {
	flex: 1;
	margin: 0;
	color: rgba(255, 255, 255, 0.88);
}

.involve__icon {
	color: var(--gold);
}

@media (max-width: 860px) {
	.involve__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.involve__item,
	.involve__item:first-child {
		padding: 0;
		border: 0;
	}
}

/* ---------- Inner pages ---------- */

.page-head {
	position: relative;
	isolation: isolate;
	padding-block: clamp(48px, 7vw, 96px);
	overflow: hidden;
	color: #fff;
	background: linear-gradient(115deg, #1f6e78 0%, #0f3b43 100%);
}

.page-head::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../img/triangles-light.svg") 0 0 / 60px auto;
	opacity: 0.09;
	-webkit-mask-image: linear-gradient(to var(--end), transparent 25%, #000 95%);
	mask-image: linear-gradient(to var(--end), transparent 25%, #000 95%);
}

.page-head__inner {
	position: relative;
}

.page-head__crumb {
	margin: 0 0 14px;
	color: var(--gold);
	font-size: 0.95rem;
	font-weight: 600;
}

.page-head__title {
	max-width: 20ch;
	font-size: var(--fs-4);
	color: #fff;
}

.page-head__lead {
	max-width: 56ch;
	margin: 20px 0 0;
	font-size: var(--fs-1);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
}

.page-head__shapes {
	position: absolute;
	top: 50%;
	inset-inline-end: var(--gutter);
	width: 230px;
	height: 240px;
	margin-top: -120px;
	pointer-events: none;
}

.page-head__shapes i {
	position: absolute;
	top: 0;
	width: 54px;
	height: 250px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	transform: rotate(var(--tilt));
}

.page-head__shapes i:nth-child(1) {
	inset-inline-start: 0;
}

.page-head__shapes i:nth-child(2) {
	inset-inline-start: 74px;
	top: 18px;
	background: rgba(255, 255, 255, 0.1);
}

.page-head__shapes i:nth-child(3) {
	inset-inline-start: 148px;
	top: 40px;
	border-color: var(--gold);
}

@media (max-width: 900px) {
	.page-head__shapes {
		display: none;
	}
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: clamp(28px, 4vw, 44px);
}

.chip {
	padding: 0.5em 1.1em;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	color: var(--ink);
	font-size: 0.95rem;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.chip:hover {
	border-color: var(--tide);
	color: var(--tide);
}

.chip.is-on {
	background: var(--deep);
	border-color: var(--deep);
	color: #fff;
}

.pagination {
	margin-top: 48px;
}

.pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
}

.pagination .page-numbers {
	display: inline-block;
	min-width: 2.6em;
	padding: 0.5em 1em;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink);
	text-align: center;
	text-decoration: none;
}

.pagination .current {
	background: var(--tide);
	border-color: var(--tide);
	color: #fff;
}

.single-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

.single-figure {
	margin: 0 0 36px;
}

.single-figure img {
	width: 100%;
	border-radius: var(--radius-m);
}

.prose {
	max-width: 68ch;
	font-size: 1.1rem;
	line-height: 1.75;
}

[lang="ar"] .prose {
	font-size: 1.15rem;
	line-height: 2;
}

.prose h2 {
	margin: 1.8em 0 0.5em;
	font-size: var(--fs-2);
}

.prose h3 {
	margin: 1.6em 0 0.4em;
	font-size: var(--fs-1);
}

.prose ul,
.prose ol {
	margin: 0 0 1em;
	padding-inline-start: 1.4em;
}

.prose li {
	margin-bottom: 0.4em;
}

.prose blockquote {
	margin: 1.6em 0;
	padding-inline-start: 1.2em;
	border-inline-start: 3px solid var(--gold);
	color: var(--ink-soft);
}

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

.facts {
	padding: 26px;
	border-radius: var(--radius-m);
	background: var(--mist);
}

.facts dl {
	margin: 0 0 20px;
}

.facts dl div {
	padding-block: 12px;
	border-bottom: 1px solid var(--line);
}

.facts dl div:first-child {
	padding-top: 0;
}

.facts dl div:last-child {
	border-bottom: 0;
}

.facts .btn {
	margin-bottom: 20px;
}

.facts dt {
	color: var(--ink-soft);
	font-size: 0.88rem;
}

.facts dd {
	margin: 2px 0 0;
	font-weight: 500;
}

.facts__icon {
	display: block;
	margin-bottom: 18px;
	color: var(--tide);
}

@media (max-width: 900px) {
	.single-grid {
		grid-template-columns: 1fr;
	}
}

.related {
	background: var(--mist);
}

.related .h-section {
	margin-bottom: 32px;
}

.back {
	margin-top: 40px;
}

/* ---------- Get involved page ---------- */

.involve-page__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(28px, 6vw, 96px);
	align-items: center;
}

.involve-page--alt {
	background: var(--mist);
}

.involve-page__icon {
	margin-bottom: 18px;
	color: var(--tide);
}

.involve-page__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.involve-page__panel p {
	margin: 0;
}

@media (max-width: 860px) {
	.involve-page__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Contact ---------- */

.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: start;
}

.contact-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	list-style: none;
}

.contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.contact-list .icon {
	margin-top: 3px;
	color: var(--lagoon);
}

.contact-list--page {
	gap: 22px;
	margin-bottom: 28px;
}

.contact-list--page .icon {
	color: var(--tide);
}

.contact-list--page strong {
	display: block;
	font-weight: 600;
}

.contact-list a {
	color: inherit;
}

.field {
	margin-bottom: 20px;
}

.field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
}

.field input,
.field select,
.field textarea,
.search input {
	width: 100%;
	padding: 0.8em 1em;
	border: 1.5px solid var(--line-strong);
	border-radius: var(--radius-s);
	background: #fff;
	color: var(--ink);
	font: inherit;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.search input:focus-visible {
	outline: 3px solid var(--tide);
	outline-offset: 1px;
}

.hp {
	position: absolute;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.notice {
	display: flex;
	gap: 10px;
	margin: 0 0 24px;
	padding: 14px 16px;
	border: 1px solid;
	border-radius: var(--radius-s);
}

.notice--ok {
	background: #e7f4ec;
	border-color: #86bf9f;
	color: #12452a;
}

.notice--error {
	background: #fbeeee;
	border-color: #e0a1a1;
	color: #6b1d1d;
}

@media (max-width: 860px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Team ---------- */

.team .h-section {
	margin-bottom: 36px;
}

.team__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 36px 28px;
	list-style: none;
}

.person {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.person__photo {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 3 / 4;
	margin-bottom: 14px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--mist);
	color: var(--tide);
}

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

.person__name {
	font-weight: 600;
}

.person__role {
	color: var(--ink-soft);
	font-size: 0.95rem;
}

/* ---------- Search ---------- */

.search {
	display: flex;
	gap: 12px;
	margin-bottom: 36px;
}

.search-results {
	list-style: none;
}

.search-results li {
	padding-block: 20px;
	border-bottom: 1px solid var(--line);
}

.search-results a {
	font-size: var(--fs-1);
	font-weight: 500;
}

.search-results p {
	margin: 6px 0 0;
	color: var(--ink-soft);
}

/* ---------- Footer ---------- */

.site-footer {
	background: var(--deep);
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.98rem;
}

.site-footer a {
	color: inherit;
	text-decoration-color: rgba(255, 255, 255, 0.3);
}

.site-footer a:hover {
	color: #fff;
}

.newsletter {
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	background: var(--tide-dark);
}

.newsletter__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 48px;
	padding-block: 36px;
}

.newsletter h2 {
	font-size: var(--fs-2);
	color: #fff;
}

.newsletter p {
	margin: 6px 0 0;
}

.newsletter__form {
	flex: 1 1 320px;
	max-width: 520px;
}

.footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
	gap: clamp(28px, 4vw, 64px);
	padding-block: clamp(48px, 6vw, 80px);
}

.footer__brand p {
	max-width: 36ch;
	margin: 18px 0 0;
}

.footer__col h2 {
	margin-bottom: 16px;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
}

.footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
}

.social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
	list-style: none;
}

.social a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1.5px solid var(--line-strong);
	border-radius: 50%;
	color: var(--tide);
	transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.social a:hover {
	border-color: var(--tide);
	background: var(--tide);
	color: #fff;
}

.social--light a {
	border-color: rgba(255, 255, 255, 0.35);
	color: #fff;
}

.social--light a:hover {
	border-color: var(--gold);
	background: transparent;
	color: var(--gold);
}

.footer__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.9rem;
}

.footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-block: 20px;
}

.footer__bar p {
	margin: 0;
}

.lang-switch--footer {
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

@media (max-width: 980px) {
	.footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.footer__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Animated icons ----------
   Each icon draws itself once when it scrolls into view (".is-in"), then
   moves while its host is hovered or focused (".is-play"). */

html.js .icon--anim .d {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html.js .icon--anim.is-in .d {
	stroke-dashoffset: 0;
}

html.js .icon--anim .d:nth-child(2) {
	transition-delay: 0.15s;
}

html.js .icon--anim .d:nth-child(3) {
	transition-delay: 0.3s;
}

html.js .icon--anim .d:nth-child(4) {
	transition-delay: 0.45s;
}

html.js .icon--anim .d:nth-child(5) {
	transition-delay: 0.6s;
}

html.js .icon--anim .d:nth-child(6) {
	transition-delay: 0.75s;
}

.icon .heart,
.icon .drop,
.icon .wave,
.icon .c1,
.icon .c2,
.icon .spark {
	transform-box: fill-box;
	transform-origin: center;
}

.icon .sway,
.icon .page,
.icon .nodes {
	transform-box: view-box;
}

.icon .sway {
	transform-origin: 24px 45px;
}

.icon .page {
	transform-origin: 24px 28px;
}

.icon .nodes {
	transform-origin: 24px 24px;
}

@media (prefers-reduced-motion: no-preference) {
	.is-play .icon--health .heart,
	.is-play .icon--heart .heart {
		animation: beat 1.1s ease-in-out infinite;
	}

	.is-play .icon--health .pulse {
		animation: scan 1.6s linear infinite;
	}

	.is-play .icon--water .drop {
		animation: bob 1.6s ease-in-out infinite;
	}

	.is-play .icon--water .wave {
		animation: drift 1.8s ease-in-out infinite;
	}

	.is-play .icon--food .sway {
		animation: sway 2.4s ease-in-out infinite;
	}

	.is-play .icon--learning .page {
		animation: flip 1.8s ease-in-out infinite;
	}

	.is-play .icon--community .nodes {
		animation: spin 7s linear infinite;
	}

	.is-play .icon--partner .c1 {
		animation: close-in 1.6s ease-in-out infinite alternate;
	}

	.is-play .icon--partner .c2 {
		animation: close-in-rev 1.6s ease-in-out infinite alternate;
	}

	.is-play .icon--volunteer .spark {
		animation: blink 1.2s ease-in-out infinite;
	}
}

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

	html.js .icon--anim .d {
		stroke-dashoffset: 0;
		transition: none;
	}
}

@keyframes beat {
	0%,
	100% {
		transform: scale(1);
	}

	30% {
		transform: scale(1.1);
	}

	55% {
		transform: scale(1.02);
	}
}

@keyframes scan {
	0% {
		stroke-dashoffset: 1;
	}

	70%,
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes bob {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-2.5px);
	}
}

@keyframes drift {
	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(3px);
	}
}

@keyframes sway {
	0%,
	100% {
		transform: rotate(-4deg);
	}

	50% {
		transform: rotate(4deg);
	}
}

@keyframes flip {
	0%,
	100% {
		transform: scaleX(1);
	}

	50% {
		transform: scaleX(0.15);
	}
}

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

@keyframes close-in {
	to {
		transform: translateX(3px);
	}
}

@keyframes close-in-rev {
	to {
		transform: translateX(-3px);
	}
}

@keyframes blink {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.35;
		transform: scale(0.8);
	}
}

/* ==========================================================================
   Version 1.1: story, nexus, programs, reach map, research library, partners,
   About sections. Everything below uses logical properties so it mirrors in Arabic.
   ========================================================================== */

/* ---------- New animated icons ---------- */

.icon .sprout {
	transform-box: view-box;
	transform-origin: 24px 41px;
}

.icon .roof,
.icon .orb,
.icon .rays,
.icon .dome {
	transform-box: fill-box;
	transform-origin: center;
}

.icon .bars {
	transform-box: fill-box;
	transform-origin: center bottom;
}

@media (prefers-reduced-motion: no-preference) {
	.is-play .icon--recovery .sprout {
		animation: grow 1.8s ease-in-out infinite;
	}

	.is-play .icon--governance .roof {
		animation: bob 1.6s ease-in-out infinite;
	}

	.is-play .icon--protection .heart {
		animation: beat 1.2s ease-in-out infinite;
	}

	.is-play .icon--women .orb {
		animation: swell 1.6s ease-in-out infinite;
	}

	.is-play .icon--research .bars {
		animation: bars 1.4s ease-in-out infinite;
	}

	.is-play .icon--emergency .rays {
		animation: blink 0.9s ease-in-out infinite;
	}

	.is-play .icon--emergency .dome {
		animation: swell 0.9s ease-in-out infinite;
	}
}

@keyframes grow {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.14) rotate(2deg);
	}
}

@keyframes swell {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}
}

@keyframes bars {
	0%,
	100% {
		transform: scaleY(1);
	}

	50% {
		transform: scaleY(1.55);
	}
}

/* ---------- Generic helpers ---------- */

.link-arrow--quiet {
	color: var(--ink-soft);
	font-weight: 500;
}

.section-head--row > div {
	min-width: 0;
}

/* ---------- Story and timeline ---------- */

.story__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(24px, 5vw, 80px);
	align-items: end;
	margin-bottom: clamp(40px, 5vw, 72px);
}

.story__head .lead {
	margin-top: 0;
}

.story__head .link-arrow {
	margin-top: 20px;
}

.story--about {
	background: var(--mist);
}

.story--about .h-section {
	margin-bottom: clamp(32px, 4vw, 56px);
}

.timeline {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
}

.timeline__item {
	position: relative;
	padding-inline-end: clamp(16px, 2.4vw, 36px);
}

.timeline__year {
	display: block;
	min-height: 1.1em;
	font-size: clamp(2.4rem, 4.4vw, 3.6rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--tide);
}

[lang="ar"] .timeline__year {
	letter-spacing: 0;
}

.timeline__dot {
	position: relative;
	display: block;
	height: 14px;
	margin: 18px 0 26px;
}

.timeline__dot::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 1;
	width: 14px;
	height: 14px;
	border: 3px solid var(--brand);
	border-radius: 50%;
	background: var(--paper);
}

.has-year .timeline__dot::before {
	background: var(--gold);
	border-color: var(--gold);
}

.story--about .timeline__dot::before {
	background: var(--mist);
}

.story--about .has-year .timeline__dot::before {
	background: var(--gold);
}

/* The track between dots: a faint rail that fills with teal as the timeline scrolls into view. */
.timeline__dot::after {
	content: "";
	position: absolute;
	inset-block-start: 5px;
	inset-inline: 14px 0;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(var(--brand), var(--brand)) no-repeat left center / 100% 100%, var(--line);
}

[dir="rtl"] .timeline__dot::after {
	background-position: right center, 0 0;
}

.timeline__item:last-child .timeline__dot::after {
	display: none;
}

html.js .timeline:not(.is-in) .timeline__dot::after {
	background-size: 0 100%, auto;
}

html.js .timeline .timeline__dot::after {
	transition: background-size 0.9s var(--ease);
	transition-delay: calc(var(--i, 0) * 0.35s);
}

.timeline__item:nth-child(2) {
	--i: 1;
}

.timeline__item:nth-child(3) {
	--i: 2;
}

.timeline__title {
	font-size: var(--fs-1);
	font-weight: 500;
}

.timeline__text {
	margin: 10px 0 0;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

@media (max-width: 860px) {
	.story__head {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.timeline {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.timeline__item {
		padding: 0 0 36px;
		padding-inline-start: 36px;
		border-inline-start: 4px solid var(--line);
		margin-inline-start: 6px;
	}

	.timeline__item:last-child {
		padding-bottom: 0;
		border-color: transparent;
	}

	.timeline__dot {
		position: absolute;
		inset-block-start: 6px;
		inset-inline-start: -11px;
		margin: 0;
	}

	.timeline__dot::after {
		display: none;
	}

	.timeline__year {
		min-height: 0;
		font-size: 2rem;
	}

	.timeline__year:empty {
		display: none;
	}
}

/* ---------- Nexus ---------- */

.nexus {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(160deg, #11464f 0%, #0b2c33 100%);
	color: #fff;
}

.nexus::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../img/triangles-light.svg") 0 0 / 60px auto;
	opacity: 0.07;
	-webkit-mask-image: linear-gradient(to var(--end), #000 0%, transparent 85%);
	mask-image: linear-gradient(to var(--end), #000 0%, transparent 85%);
}

.nexus .h-section,
.nexus h3 {
	color: #fff;
}

.nexus__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(24px, 5vw, 80px);
	align-items: end;
	margin-bottom: clamp(40px, 5vw, 64px);
}

.nexus .lead {
	margin-top: 0;
	color: rgba(255, 255, 255, 0.84);
}

.nexus__flow {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
}

.nexus__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 210px;
	padding: 34px clamp(40px, 5vw, 72px);
	border: 2px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
}

.nexus__stage + .nexus__stage {
	margin-inline-start: -34px;
}

.nexus__stage--1 {
	z-index: 1;
	border-color: var(--gold);
}

.nexus__stage--2 {
	z-index: 2;
	border-color: var(--brand);
	background: var(--brand);
}

.nexus__stage--3 {
	z-index: 3;
	border-color: #fff;
	background: #fff;
	color: var(--deep);
}

.nexus__stage h3 {
	font-size: var(--fs-2);
}

.nexus__stage p {
	margin: 10px 0 0;
	font-size: 0.98rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
}

.nexus__stage--2 p {
	color: #fff;
}

.nexus__stage--3 h3 {
	color: var(--deep);
}

.nexus__stage--3 p {
	color: var(--ink-soft);
}

.nexus__base {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 26px;
	padding: 24px clamp(28px, 4vw, 52px);
	border: 2px dashed rgba(255, 255, 255, 0.4);
	border-radius: 999px;
}

.nexus__icon {
	color: var(--gold);
}

.nexus__base p {
	margin: 0;
	max-width: 70ch;
	color: rgba(255, 255, 255, 0.9);
}

html.js .nexus .nexus__stage,
html.js .nexus .nexus__base {
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

html.js .nexus:not(.is-in) .nexus__stage {
	opacity: 0;
	transform: translateX(-36px);
}

html.js [dir="rtl"] .nexus:not(.is-in) .nexus__stage,
html.js[dir="rtl"] .nexus:not(.is-in) .nexus__stage {
	transform: translateX(36px);
}

html.js .nexus.is-in .nexus__stage {
	transition-delay: calc(var(--n) * 0.18s);
}

html.js .nexus:not(.is-in) .nexus__base {
	opacity: 0;
	transform: translateY(18px);
}

html.js .nexus.is-in .nexus__base {
	transition-delay: 0.7s;
}

@media (max-width: 980px) {
	.nexus__head {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.nexus__flow {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.nexus__stage {
		min-height: 0;
		padding: 28px 32px;
		border-radius: 44px;
	}

	.nexus__stage + .nexus__stage {
		margin-inline-start: 0;
	}

	.nexus__base {
		border-radius: 36px;
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Program tiles ---------- */

.ptiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	list-style: none;
}

.ptile__link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	min-height: 260px;
	padding: 30px 30px 26px;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	background: #fff;
	color: var(--ink);
	text-decoration: none;
	transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.3s;
}

.ptile__link:hover,
.ptile__link:focus-visible {
	transform: translateY(-4px);
	border-color: var(--brand);
	box-shadow: 0 18px 40px rgba(15, 59, 67, 0.12);
}

.ptile__icon {
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: var(--mist);
	color: var(--tide);
}

.ptile__title {
	font-size: var(--fs-1);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--tracking);
	color: var(--deep);
}

.ptile__text {
	flex: 1;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

.ptile__go {
	align-self: flex-end;
	color: var(--tide);
	transition: transform 0.3s var(--ease);
}

.ptile__link:hover .ptile__go {
	transform: translateX(4px);
}

[dir="rtl"] .ptile__link:hover .ptile__go {
	transform: translateX(-4px);
}

/* Research and studies is the backbone, so it gets the wide, dark tile at the end. */
.ptile--research {
	order: 99;
	grid-column: 1 / -1;
}

.ptile--research .ptile__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 28px;
	min-height: 0;
	border-color: transparent;
	background: linear-gradient(120deg, var(--tide-dark), var(--deep));
	color: #fff;
}

.ptile--research .ptile__icon {
	grid-row: span 2;
	margin: 0;
	background: rgba(255, 255, 255, 0.1);
	color: var(--gold);
}

.ptile--research .ptile__title {
	color: #fff;
}

.ptile--research .ptile__text {
	flex: none;
	max-width: 70ch;
	color: rgba(255, 255, 255, 0.86);
}

.ptile--research .ptile__go {
	grid-row: span 2;
	color: var(--gold);
}

.ptile--emergency .ptile__icon {
	background: #fff3da;
	color: #b56f00;
}

@media (max-width: 980px) {
	.ptiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.ptiles {
		grid-template-columns: 1fr;
	}

	.ptile__link {
		min-height: 0;
	}

	.ptile--research .ptile__link {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.ptile--research .ptile__go {
		display: none;
	}
}

/* ---------- Reach: entities and map ---------- */

.reach {
	background: var(--mist);
}

.reach__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}

.reach--about {
	background: var(--paper);
}

.entities {
	display: grid;
	gap: 12px;
	margin-top: 32px;
	list-style: none;
}

.entity {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	column-gap: 18px;
	row-gap: 2px;
	align-items: center;
	padding: 16px 22px;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: #fff;
	transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}

.entity:hover,
.entity:focus-visible,
.entity.is-on {
	border-color: var(--brand);
	box-shadow: 0 10px 28px rgba(15, 59, 67, 0.1);
	transform: translateX(4px);
}

[dir="rtl"] .entity:hover,
[dir="rtl"] .entity:focus-visible,
[dir="rtl"] .entity.is-on {
	transform: translateX(-4px);
}

.entity--turkiye:hover,
.entity--turkiye:focus-visible,
.entity--turkiye.is-on,
.entity--lebanon:hover,
.entity--lebanon:focus-visible,
.entity--lebanon.is-on {
	border-color: var(--crimson);
}

.entity__logo {
	display: grid;
	grid-row: span 2;
	place-items: center;
	height: 52px;
}

.entity__logo img {
	width: 68px;
	height: auto;
}

.entity__name {
	font-weight: 600;
	color: var(--deep);
}

.entity__text {
	font-size: 0.94rem;
	line-height: 1.5;
	color: var(--ink-soft);
}

.map {
	margin: 0;
}

.map__svg {
	display: block;
	width: 100%;
	height: auto;
	direction: ltr;
	overflow: hidden;
}

.map__land {
	stroke: var(--paper);
	stroke-width: 0.8;
	stroke-linejoin: round;
	transition: opacity 0.3s, fill 0.3s;
}

.reach--about .map__land,
.reach .map__land {
	stroke: var(--mist);
}

.reach--about .map__land {
	stroke: var(--paper);
}

.map__land--iraq {
	fill: #dfe6e7;
}

.map__land--lebanon {
	fill: var(--crimson);
}

/* Türkiye is cropped by the frame; its western edge fades out instead of ending on a hard line. */
.map__land--turkiye {
	fill: url(#emissa-map-fade);
}

.map__land--syria {
	fill: var(--brand);
}

.map[data-hl="syria"] .map__land[data-c]:not([data-c="syria"]),
.map[data-hl="turkiye"] .map__land[data-c]:not([data-c="turkiye"]),
.map[data-hl="lebanon"] .map__land[data-c]:not([data-c="lebanon"]) {
	opacity: 0.28;
}

.map__label {
	font-size: 11px;
	font-weight: 600;
	fill: rgba(255, 255, 255, 0.92);
	pointer-events: none;
}

.map__label--small {
	font-size: 8.5px;
	fill: var(--deep);
}

.map__label--dim {
	fill: #8da0a4;
}

.map__city {
	font-size: 8.5px;
	font-weight: 600;
	fill: #fff;
	paint-order: stroke;
	stroke: rgba(15, 59, 67, 0.6);
	stroke-width: 2.4px;
	stroke-linejoin: round;
}

.map__dot {
	fill: var(--gold);
	stroke: #fff;
	stroke-width: 1.2;
}

.map__pulse {
	fill: var(--gold);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
	.map__pulse {
		animation: pin-pulse 2.6s ease-out infinite;
		animation-delay: calc(var(--d, 0) * 0.5s);
	}
}

@keyframes pin-pulse {
	0% {
		opacity: 0.6;
		transform: scale(1);
	}

	80%,
	100% {
		opacity: 0;
		transform: scale(4.2);
	}
}

.map__note {
	margin-top: 14px;
	font-size: 0.86rem;
	color: var(--ink-soft);
}

@media (max-width: 900px) {
	.reach__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Findings (home) ---------- */

.findings {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: clamp(40px, 5vw, 64px);
	border-top: 3px solid var(--deep);
	list-style: none;
}

.finding {
	padding: 28px clamp(18px, 2.4vw, 36px) 8px;
	border-inline-start: 1px solid var(--line);
}

.finding:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}

.finding__num {
	display: block;
	font-size: clamp(3.2rem, 6.4vw, 5.4rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--tide);
}

.finding__text {
	display: block;
	margin-top: 16px;
	font-size: 1.08rem;
	line-height: 1.5;
	color: var(--deep);
}

.finding__src {
	display: inline-block;
	margin-top: 12px;
	font-size: 0.9rem;
	color: var(--ink-soft);
}

@media (max-width: 860px) {
	.findings {
		grid-template-columns: 1fr;
	}

	.finding,
	.finding:first-child {
		padding: 22px 0;
		border-inline-start: 0;
		border-bottom: 1px solid var(--line);
	}
}

/* ---------- Publication cards ---------- */

.pubgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.pubcard {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	background: #fff;
	transition: transform 0.35s var(--ease), box-shadow 0.35s;
}

.pubcard:hover,
.pubcard:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(15, 59, 67, 0.12);
}

.pubcard__cover {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 16 / 9.5;
	padding: 20px 24px 18px;
	overflow: hidden;
	border-bottom: 4px solid var(--gold);
	background: linear-gradient(150deg, var(--tide), var(--deep));
	color: #fff;
	text-decoration: none;
}

.pubcard__cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../img/triangles-light.svg") 0 0 / 46px auto;
	opacity: 0.1;
}

.pubcard--youth-livelihoods .pubcard__cover {
	background: linear-gradient(150deg, #3aa0aa, #1f6670);
}

.pubcard--humanitarian-situation .pubcard__cover {
	background: linear-gradient(150deg, #1f5964, #0b2c33);
}

.pubcard--water-sanitation .pubcard__cover {
	background: linear-gradient(150deg, #4ba9b8, #1b6a78);
}

.pubcard__mark {
	width: 30px;
	height: 30px;
}

.pubcard__mark .m-fig,
.pubcard__mark .m-e {
	fill: #fff;
}

.pubcard__icon {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 22px;
	z-index: -1;
	width: 104px;
	height: 104px;
	margin-top: -52px;
	opacity: 0.26;
	color: #fff;
}

.pubcard__kind {
	position: absolute;
	inset-block-start: 22px;
	inset-inline-end: 24px;
	font-size: 0.9rem;
	font-weight: 600;
}

.pubcard__year {
	font-size: 2.2rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
}

.pubcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 22px 24px 24px;
}

.pubcard__topic {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--tide);
}

.pubcard__title {
	font-size: 1.22rem;
	font-weight: 500;
	line-height: 1.28;
}

.pubcard__title a {
	color: var(--deep);
	text-decoration: none;
}

.pubcard__title a:hover {
	color: var(--tide);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.pubcard__text {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: 0.96rem;
	line-height: 1.6;
	color: var(--ink-soft);
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

.pubcard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: auto 0 0;
	padding-top: 8px;
	font-size: 0.86rem;
	color: var(--ink-soft);
}

.pubcard__act {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

@media (max-width: 980px) {
	.pubgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.pubgrid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Research library ---------- */

.library__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
	margin-bottom: 20px;
}

.library__bar .chips {
	margin-bottom: 0;
}

.library__search input {
	width: min(100%, 340px);
	padding: 0.75em 1.3em;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: 0.98rem;
	color: var(--ink);
}

.library__search input:focus {
	border-color: var(--tide);
	outline: 3px solid rgba(53, 148, 158, 0.3);
	outline-offset: 0;
}

.chips--quiet {
	margin-bottom: 32px;
}

.chips--quiet .chip {
	border-color: transparent;
	background: var(--mist);
	font-size: 0.88rem;
}

.chips--quiet .chip.is-on {
	background: var(--deep);
	color: #fff;
}

.pubgrid--library .pubcard[hidden] {
	display: none;
}

.library__note {
	margin-top: 56px;
	padding: 18px 26px;
	border-radius: 20px;
	background: var(--mist);
	font-size: 0.95rem;
	color: var(--ink-soft);
}

.library__note p {
	margin: 0;
}

/* ---------- Single publication ---------- */

.h-block {
	margin: 44px 0 16px;
	font-size: var(--fs-2);
}

.single-main > .h-block:first-child,
.notice-asof + .h-block {
	margin-top: 0;
}

.notice-asof {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 32px;
	padding: 16px 20px;
	border: 1px solid #f0d28a;
	border-radius: 16px;
	background: #fff6e0;
	color: #5e4200;
	font-size: 0.96rem;
	line-height: 1.55;
}

.notice-asof .icon {
	margin-top: 2px;
}

.keyfigs {
	display: grid;
	gap: 14px;
	list-style: none;
}

.keyfigs li {
	display: grid;
	grid-template-columns: minmax(104px, auto) minmax(0, 1fr);
	column-gap: 22px;
	align-items: center;
	padding: 16px 22px;
	border-radius: 18px;
	background: var(--mist);
	border-inline-start: 5px solid var(--gold);
}

.keyfigs__num {
	grid-row: span 2;
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--tide-dark);
}

.keyfigs__text {
	line-height: 1.5;
	color: var(--deep);
}

.keyfigs__page {
	font-size: 0.85rem;
	color: var(--ink-soft);
}

.facts__file {
	margin: 8px 0 18px;
	text-align: center;
	font-size: 0.9rem;
	color: var(--ink-soft);
}

/* ---------- Facebook card ---------- */

.fbcard {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 28px;
	margin-top: 48px;
	padding: 28px clamp(24px, 3.4vw, 44px);
	overflow: hidden;
	border-radius: 44px;
	background: linear-gradient(110deg, var(--tide-dark), var(--deep));
	color: #fff;
}

.fbcard::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../img/triangles-light.svg") 0 0 / 60px auto;
	opacity: 0.07;
}

.fbcard__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
}

.fbcard__text {
	flex: 1 1 280px;
}

.fbcard h3 {
	font-size: var(--fs-1);
	color: #fff;
}

.fbcard p {
	margin: 6px 0 0;
	color: rgba(255, 255, 255, 0.86);
}

.fbcard .btn {
	background: #fff;
	color: var(--deep);
}

.fbcard .btn:hover {
	background: var(--gold);
}

.fbcard :focus-visible {
	outline-color: var(--gold);
}

/* ---------- Partners marquee and page ---------- */

.partners {
	padding-inline: 0;
}

.marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.marquee__inner {
	display: flex;
	width: max-content;
	animation: marquee 80s linear infinite;
}

[dir="rtl"] .marquee__inner {
	animation-name: marquee-rtl;
}

.marquee:hover .marquee__inner,
.marquee:focus-within .marquee__inner {
	animation-play-state: paused;
}

.marquee__track {
	display: flex;
	flex: none;
	align-items: center;
	gap: 64px;
	padding-inline-end: 64px;
	list-style: none;
}

.marquee__track li {
	flex: none;
}

.marquee__track img {
	width: auto;
	height: 64px;
	filter: grayscale(1);
	opacity: 0.72;
	transition: filter 0.3s, opacity 0.3s;
}

.marquee__track a:hover img,
.marquee__track a:focus-visible img,
.marquee__logo:hover img {
	filter: none;
	opacity: 1;
}

.marquee__track span:not(.marquee__logo) {
	color: var(--ink-soft);
	font-weight: 600;
	white-space: nowrap;
}

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

@keyframes marquee-rtl {
	to {
		transform: translateX(50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.marquee__inner {
		width: auto;
		animation: none;
		padding-inline: var(--gutter);
	}

	.marquee__track {
		flex-wrap: wrap;
		justify-content: center;
		gap: 28px 48px;
		padding: 0;
	}

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

.partner-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 22px 20px;
	list-style: none;
}

.partner-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.partner-card__logo {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: #fff;
	text-decoration: none;
	transition: border-color 0.25s, box-shadow 0.25s;
}

.partner-card__logo img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100px;
	filter: grayscale(1);
	opacity: 0.85;
	transition: filter 0.3s, opacity 0.3s;
}

.partner-card:hover .partner-card__logo {
	border-color: var(--brand);
	box-shadow: 0 10px 26px rgba(15, 59, 67, 0.1);
}

.partner-card:hover .partner-card__logo img {
	filter: none;
	opacity: 1;
}

.partner-card__text {
	font-weight: 600;
	text-align: center;
	color: var(--ink-soft);
}

.partner-card__name {
	font-size: 0.88rem;
	line-height: 1.35;
	text-align: center;
	color: var(--ink-soft);
}

.partner-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	margin-top: clamp(40px, 5vw, 64px);
	padding: clamp(24px, 3vw, 40px);
	border-radius: var(--radius-l);
	background: var(--mist);
}

.partner-note h2 {
	font-size: var(--fs-2);
}

.partner-note p {
	max-width: 52ch;
	margin: 8px 0 0;
	color: var(--ink-soft);
}

.partner-legal {
	margin: 18px 0 0;
	font-size: 0.85rem;
	color: var(--ink-soft);
}

.prose--intro {
	max-width: 70ch;
	margin-bottom: 40px;
}

/* ---------- About page sections ---------- */

.about-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: start;
}

.about-story .prose {
	max-width: 62ch;
}

.pullquote {
	position: sticky;
	inset-block-start: calc(var(--header-h) + 24px);
	margin: 0;
	padding: clamp(28px, 3vw, 40px);
	border-radius: var(--radius-l);
	background: var(--tide-dark);
	color: #fff;
}

.pullquote::before {
	content: "”";
	display: block;
	height: 0.55em;
	margin-bottom: 14px;
	font-size: 5rem;
	line-height: 0.9;
	color: var(--gold);
}

.pullquote blockquote {
	margin: 0;
}

.pullquote p {
	margin: 0;
	font-size: var(--fs-2);
	line-height: 1.38;
}

.vm__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.vm__card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(30px, 4vw, 56px);
	border-radius: var(--radius-l);
	color: #fff;
}

.vm__card::after {
	content: "";
	position: absolute;
	inset-block-end: -60px;
	inset-inline-end: 36px;
	z-index: -1;
	width: 120px;
	height: 300px;
	border: 2px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	transform: rotate(var(--tilt));
}

.vm__card--vision {
	background: var(--deep);
}

.vm__card--mission {
	background: var(--brand);
}

.vm__card h2 {
	margin-bottom: 18px;
	font-size: var(--fs-2);
	color: #fff;
}

.vm__card p {
	margin: 0;
	font-size: var(--fs-1);
	line-height: 1.55;
}

.values {
	background: var(--mist);
}

.values__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px clamp(24px, 3vw, 44px);
	list-style: none;
}

.value {
	padding-top: 22px;
	border-top: 4px solid var(--brand);
}

.value h3 {
	font-size: var(--fs-1);
	font-weight: 500;
}

.value p {
	margin: 10px 0 0;
	line-height: 1.6;
	color: var(--ink-soft);
}

.toc__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 6vw, 96px);
	align-items: start;
}

.toc__quote {
	margin: 24px 0 0;
	padding-inline-start: 22px;
	border-inline-start: 5px solid var(--gold);
	font-size: var(--fs-1);
	line-height: 1.55;
	color: var(--tide-dark);
}

.toc__body p {
	margin: 0;
	line-height: 1.8;
	color: var(--ink-soft);
}

.strategies {
	background: var(--mist);
}

.strategies .h-section {
	margin-bottom: clamp(28px, 4vw, 48px);
}

.strategies__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	list-style: none;
	counter-reset: strategy;
}

.strategy {
	padding: 26px 28px 28px;
	border-radius: 26px;
	background: #fff;
	counter-increment: strategy;
}

.strategy::before {
	content: counter(strategy, decimal-leading-zero);
	display: block;
	margin-bottom: 12px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--tide);
}

.strategy h3 {
	font-size: var(--fs-0);
	font-weight: 600;
	line-height: 1.3;
}

.strategy p {
	margin: 8px 0 0;
	font-size: 0.96rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

.changes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px clamp(24px, 3vw, 44px);
	list-style: none;
}

.change {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 16px;
}

.change__icon {
	grid-row: span 2;
	width: 44px;
	height: 44px;
	padding: 9px;
	border-radius: 50%;
	background: var(--mist);
	color: var(--tide);
}

.change h3 {
	font-size: var(--fs-0);
	font-weight: 600;
}

.change p {
	margin: 6px 0 0;
	font-size: 0.96rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

.structure {
	background: var(--mist);
}

.structure__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-bottom: 36px;
	list-style: none;
}

.structure__top li {
	display: inline-flex;
	align-items: center;
	padding: 0.7em 1.5em;
	border-radius: 999px;
	background: var(--deep);
	color: #fff;
	font-weight: 500;
}

.structure__top li:first-child {
	background: var(--gold);
	color: var(--deep);
}

.structure__top li:not(:last-child)::after {
	content: "";
	position: absolute;
}

.structure__top li + li {
	position: relative;
	margin-inline-start: 34px;
}

.structure__top li + li::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 100%;
	width: 34px;
	height: 2px;
	background: var(--line-strong);
}

.structure__units {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.unit {
	padding: 22px 22px 18px;
	border-radius: 24px;
	border-top: 5px solid var(--brand);
	background: #fff;
}

.unit h3 {
	margin-bottom: 12px;
	font-size: var(--fs-0);
	font-weight: 600;
	line-height: 1.3;
}

.unit ul {
	list-style: none;
}

.unit li {
	padding-block: 8px;
	border-top: 1px dashed var(--line-strong);
	font-size: 0.94rem;
	line-height: 1.45;
	color: var(--ink-soft);
}

.logo-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}

.logo-story__mark {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	max-width: 420px;
	border-radius: 50%;
	background: var(--mist);
}

.logo-story__svg {
	width: 72%;
	height: auto;
	overflow: visible;
}

html.js .logo-story .m-fig {
	transition: transform 1.3s var(--ease), opacity 0.8s;
	transition-delay: calc(var(--k) * 0.14s);
}

html.js .logo-story:not(.is-in) .m-fig {
	opacity: 0;
	transform: translate(calc(var(--dx) * 4), calc(var(--dy) * 4));
}

.logo-story__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px clamp(24px, 3vw, 44px);
	margin-top: 28px;
	list-style: none;
}

.logo-story__list h3 {
	font-size: var(--fs-0);
	font-weight: 600;
}

.logo-story__list p {
	margin: 6px 0 0;
	font-size: 0.96rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

@media (max-width: 980px) {
	.about-story__grid,
	.vm__grid,
	.toc__grid,
	.logo-story__grid {
		grid-template-columns: 1fr;
	}

	.pullquote {
		position: static;
	}

	.values__grid,
	.strategies__grid,
	.changes__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.logo-story__mark {
		max-width: 300px;
	}
}

@media (max-width: 620px) {
	.values__grid,
	.strategies__grid,
	.changes__grid,
	.structure__units,
	.logo-story__list {
		grid-template-columns: 1fr;
	}
}

/* ---------- Footer lattice ---------- */

.site-footer {
	position: relative;
	isolation: isolate;
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../img/triangles-light.svg") 0 0 / 60px auto;
	opacity: 0.035;
}

/* ---------- Print ---------- */

@media print {
	.site-header,
	.announce,
	.site-footer,
	.involve,
	.nav-toggle {
		display: none;
	}

	body {
		background: #fff;
	}
}

/* ---------- Activities: video badge and Facebook videos ---------- */

.act__media {
	position: relative;
}

.act__badge {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-start: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block: 5px;
	padding-inline: 10px 13px;
	border-radius: 999px;
	background: rgba(15, 59, 67, 0.88);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.2;
}

.act__badge svg {
	flex: none;
}

.fbvids {
	margin-block-start: clamp(36px, 5vw, 56px);
	padding-block-start: clamp(26px, 3.6vw, 38px);
	border-block-start: 1px solid var(--line);
}

.fbvids__title {
	margin: 0;
	font-size: var(--fs-2);
}

.fbvids__note {
	margin: 8px 0 0;
	color: var(--ink-soft);
	font-size: 0.92rem;
}

.fbvids__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 20px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

/* An odd number of videos: the first one takes the full width, so no row is left half empty. */
.fbvid:first-child:nth-last-child(odd) {
	grid-column: 1 / -1;
}

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

.fbvid {
	min-width: 0;
}

.fbvid__stage {
	position: relative;
	isolation: isolate;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-m);
	background: linear-gradient(160deg, var(--tide-dark), var(--deep));
}

.fbvid__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../img/triangles-light.svg") 0 0 / 56px auto;
	opacity: 0.08;
}

.fbvid__play {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	padding: 12px;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	cursor: pointer;
}

.fbvid__disc {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	padding-left: 3px;
	border-radius: 50%;
	background: var(--gold);
	color: var(--deep);
	transition: transform 0.25s var(--ease), background 0.25s;
}

.fbvid__play:hover .fbvid__disc,
.fbvid__play:focus-visible .fbvid__disc {
	background: var(--gold-bright);
	transform: scale(1.08);
}

.fbvid__play:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: -8px;
	border-radius: var(--radius-m);
}

.fbvid__label {
	font-size: 0.95rem;
	font-weight: 500;
}

.fbvid__stage iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

.fbvid__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-start: 10px;
	font-size: 0.9rem;
}

.fbvid__open {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tide-dark);
	font-weight: 500;
	text-decoration: none;
}

.fbvid__open:hover {
	text-decoration: underline;
}

.fbvid--post {
	padding: 16px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius-m);
}

.fbvid--post .fbvid__bar {
	margin: 0;
}

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