/* Grace Impact Global Foundation: site styles
   Colours are sampled from the logo. Marcellus (titles) echoes the carved
   GRACE wordmark; Atkinson Hyperlegible (body) is built for easy reading;
   Cormorant Garamond Italic is used only for emphasised phrases. */

/* @font-faces (generated, do not edit by hand) */
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("../fonts/atkinson-hyperlegible-400-italic-latin-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("../fonts/atkinson-hyperlegible-400-italic-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("../fonts/atkinson-hyperlegible-400-latin-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("../fonts/atkinson-hyperlegible-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("../fonts/atkinson-hyperlegible-700-latin-ext.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("../fonts/atkinson-hyperlegible-700-latin.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Marcellus";
	src: url("../fonts/marcellus-400-latin-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Marcellus";
	src: url("../fonts/marcellus-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");
	font-weight: 500 600;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
	font-weight: 500 600;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--purple-900: #2B0D40;
	--purple-800: #3A1356;
	--purple-700: #4A1D66;
	--purple-100: #EEE7F3;
	--purple-50: #F7F3FA;
	--gold-600: #C9921E;
	--gold-500: #D2970E;
	--gold-300: #EDBB4A;
	--gold-100: #FBF0D6;
	--gold-ink: #8A5D00;
	--ink: #2E2438;
	--muted: #5E5469;
	--line: #E7E0EE;
	--white: #FFFFFF;
	--danger: #B3261E;
	--success: #1F6B3A;

	--font-display: "Marcellus", "Trajan Pro", Georgia, serif;
	--font-sans: "Atkinson Hyperlegible", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
	--font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

	--container: 1200px;
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--frame: clamp(.5rem, 1vw, .75rem);
	--header-top: calc(var(--frame) + clamp(.5rem, 1.2vw, 1rem));
	--radius-lg: clamp(20px, 2.4vw, 32px);
	--radius-md: 22px;
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--shadow-float: 0 18px 40px -18px rgb(43 13 64 / .35);
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 110px;
}

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { padding: 0; list-style: none; }
address { font-style: normal; }

h1, h2, h3 {
	color: var(--purple-800);
	font-family: var(--font-display);
	font-weight: 400;
	font-synthesis: none;
	line-height: 1.1;
	letter-spacing: -.005em;
	text-wrap: balance;
}

p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
strong, b { font-weight: 700; }

:focus-visible {
	outline: 3px solid var(--focus, var(--purple-700));
	outline-offset: 3px;
}

::selection { background: var(--gold-300); color: var(--purple-900); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.skip-link {
	position: fixed;
	top: -100px;
	left: 1rem;
	z-index: 200;
	padding: .75rem 1.25rem;
	border-radius: 999px;
	background: var(--purple-800);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.skip-link:focus { top: 1rem; }

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

.section { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.section--tint { background: var(--purple-50); }
.section--tight-top { padding-top: clamp(2.5rem, 5vw, 4rem); }

.icon { width: 24px; height: 24px; flex: none; }
.icon--sm { width: 18px; height: 18px; }
.icon--xs { width: 14px; height: 14px; }

/* Type devices */

.label {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	color: var(--purple-700);
	font-family: var(--font-sans);
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .01em;
}
.label::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: url("../img/sun.svg") center / contain no-repeat;
}
.label--light { color: var(--gold-300); }

.serif-accent {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 600;
	font-size: 1.1em;
	line-height: .9;
	letter-spacing: 0;
}

.section-title {
	max-width: 17ch;
	margin-top: 1rem;
	font-size: clamp(2.1rem, 1.4rem + 2.5vw, 3.5rem);
	line-height: 1.06;
}

.lead {
	color: var(--purple-800);
	font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
	line-height: 1.5;
}

.prose { max-width: 66ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h3 { margin-top: 1.8em; font-size: 1.5rem; }
.prose + .btn-row { margin-top: 2rem; }
.lead + .tick-list { margin-top: 2rem; }
.section-title + .prose { margin-top: 1.5rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li {
	padding: .4rem .85rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--purple-800);
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Buttons and links */

.btn {
	--btn-h: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: .9rem;
	min-height: var(--btn-h);
	padding: 6px 6px 6px 1.5rem;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-family: var(--font-sans);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .25s, color .25s, border-color .25s;
}
.btn__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: calc(var(--btn-h) - 15px);
	height: calc(var(--btn-h) - 15px);
	border-radius: 50%;
	transition: transform .35s var(--ease-out);
}
.btn:hover .btn__icon { transform: rotate(45deg); }

.btn--gold { background: var(--gold-500); color: var(--purple-900); }
.btn--gold .btn__icon { background: var(--purple-800); color: var(--gold-300); }
.btn--gold:hover { background: var(--gold-300); }

.btn--purple { background: var(--purple-800); color: #fff; }
.btn--purple .btn__icon { background: var(--gold-500); color: var(--purple-900); }
.btn--purple:hover { background: var(--purple-700); }

.btn--light { background: #fff; color: var(--purple-800); }
.btn--light .btn__icon { background: var(--purple-800); color: #fff; }

.btn--outline {
	justify-content: center;
	padding-inline: 1.5rem;
	border-color: rgb(58 19 86 / .3);
	color: var(--purple-800);
}
.btn--outline:hover { border-color: var(--purple-800); background: var(--purple-800); color: #fff; }

.btn--outline-light {
	justify-content: center;
	padding-inline: 1.5rem;
	border-color: rgb(255 255 255 / .55);
	color: #fff;
}
.btn--outline-light:hover { border-color: #fff; background: #fff; color: var(--purple-800); }

.btn--sm { --btn-h: 46px; padding-left: 1.25rem; font-size: .875rem; }
.btn--xs { --btn-h: 40px; gap: .6rem; padding-left: 1rem; font-size: .8125rem; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .6; cursor: progress; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }

.text-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--purple-800);
	font-size: .9375rem;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: .3em;
}
.text-link .icon { transition: transform .3s var(--ease-out); }
.text-link:hover .icon { transform: translate(2px, -2px); }
.text-link--light { color: #fff; }
.text-link--sm { font-size: .8125rem; }

.icon-btn {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1.5px solid transparent;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .25s, border-color .25s, opacity .25s;
}
.icon-btn--outline { border-color: rgb(58 19 86 / .25); background: #fff; color: var(--purple-800); }
.icon-btn--outline:hover:not(:disabled) { border-color: var(--purple-800); }
.icon-btn--solid { background: var(--purple-800); color: #fff; }
.icon-btn--solid:hover:not(:disabled) { background: var(--purple-700); }
.icon-btn:disabled { opacity: .35; cursor: default; }

.copy-btn {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 36px;
	padding: 0 .9rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--purple-800);
	font-size: .8125rem;
	font-weight: 700;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}
.copy-btn:hover { border-color: var(--purple-800); }
.copy-btn__done { display: none; }
.copy-btn.is-copied { border-color: var(--success); color: var(--success); }
.copy-btn.is-copied .copy-btn__copy { display: none; }
.copy-btn.is-copied .copy-btn__done { display: block; }

/* Header */

.site-header {
	position: fixed;
	top: var(--header-top);
	left: 0;
	right: 0;
	z-index: 50;
	pointer-events: none;
	transition: transform .45s var(--ease-out);
	animation: header-in .8s .1s var(--ease-out) both;
}
.site-header.is-hidden { transform: translateY(calc(-100% - var(--header-top) - 8px)); }

.nav-shell {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	width: min(100% - 2 * var(--header-top), var(--container) + 2.5rem);
	height: 68px;
	margin-inline: auto;
	padding: 0 .5rem 0 .875rem;
	border-radius: 999px;
	background: #fff;
	pointer-events: auto;
	transition: box-shadow .3s;
}
.site-header.is-scrolled .nav-shell { box-shadow: var(--shadow-float), 0 0 0 1px rgb(58 19 86 / .06); }

.brand { display: flex; align-items: center; gap: .6rem; flex: none; text-decoration: none; }
.brand__mark { width: 44px; }
.brand__text { display: grid; line-height: 1.15; }
.brand__name {
	color: var(--purple-800);
	font-family: var(--font-display);
	font-size: 1.125rem;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.brand__sub {
	color: var(--gold-ink);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.primary-nav { margin-inline: auto; }
.nav-list { display: flex; align-items: center; gap: .125rem; }

.nav-link {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .55rem .9rem;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--purple-800);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { background: var(--purple-50); }
.nav-link[aria-current="page"], .nav-link.is-current { background: var(--gold-100); }
.nav-link--toggle .icon { transition: transform .25s; }
.nav-link--toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

.has-sub { position: relative; }
.sub-menu {
	position: absolute;
	top: calc(100% + .75rem);
	left: 50%;
	translate: -50% 0;
	min-width: 250px;
	padding: .5rem;
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--shadow-float), 0 0 0 1px rgb(58 19 86 / .06);
}
.sub-menu::before { content: ""; position: absolute; inset: -.75rem 0 auto; height: .75rem; }
.sub-menu a {
	display: block;
	padding: .65rem .9rem;
	border-radius: 12px;
	color: var(--purple-800);
	font-size: .9375rem;
	text-decoration: none;
}
.sub-menu a:hover { background: var(--purple-50); }
.sub-menu a[aria-current="page"] { background: var(--gold-100); font-weight: 700; }
.nav-list__call { display: none; }

.nav-actions { display: flex; align-items: center; gap: .75rem; flex: none; }
.nav-call { display: flex; align-items: center; gap: .6rem; color: var(--purple-800); text-decoration: none; }
.nav-call__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--gold-100);
}
.nav-call__text { display: grid; line-height: 1.25; }
.nav-call__label { color: var(--muted); font-size: .75rem; }
.nav-call__num { font-size: .875rem; font-weight: 700; white-space: nowrap; }

.menu-toggle {
	display: none;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--purple-50);
	color: var(--purple-800);
	cursor: pointer;
}
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

/* Home hero */

.hero {
	--focus: var(--gold-300);
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: max(660px, min(100svh - 2 * var(--frame), 920px));
	margin: var(--frame);
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--purple-900);
	color: #fff;
}
.hero::before, .page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgb(43 13 64 / .6) 0%, rgb(43 13 64 / 0) 24%),
		linear-gradient(12deg, rgb(43 13 64 / .95) 0%, rgb(43 13 64 / .82) 32%, rgb(43 13 64 / .2) 60%, rgb(43 13 64 / 0) 78%);
}
.hero__media, .page-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}
.hero__img, .page-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	animation: hero-zoom 2.2s var(--ease-out) both;
}
/* A home page slide is a <picture> (its own crop for portrait screens) that fills the banner */
.hero__slide { display: block; width: 100%; height: 100%; }

.hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	align-items: end;
	gap: 2.5rem;
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
	padding: 150px 0 clamp(2rem, 4.5vw, 3.75rem);
}

.founder-badge {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.75rem;
	padding: .375rem 1.125rem .375rem .375rem;
	border: 1px solid rgb(255 255 255 / .24);
	border-radius: 999px;
	background: rgb(255 255 255 / .1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.35;
	animation: fade-up .8s .35s var(--ease-out) both;
}
.founder-badge__mark {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
}
.founder-badge__mark img { width: 26px; }
.founder-badge__role { display: block; color: rgb(255 255 255 / .75); font-weight: 400; }

.hero__title, .page-hero__title {
	color: #fff;
	font-size: clamp(2.3rem, 1.25rem + 3.4vw, 3.9rem);
	line-height: 1.06;
}
.hero__title .line, .page-hero__title .line {
	display: block;
	overflow: hidden;
	padding-bottom: .14em;
	margin-bottom: -.14em;
}
.hero__title .line > span, .page-hero__title .line > span { display: block; animation: line-up 1.1s var(--ease-out) both; }
.hero__title .line:nth-child(1) > span, .page-hero__title .line:nth-child(1) > span { animation-delay: .45s; }
.hero__title .line:nth-child(2) > span, .page-hero__title .line:nth-child(2) > span { animation-delay: .57s; }
.hero__title .line:nth-child(3) > span, .page-hero__title .line:nth-child(3) > span { animation-delay: .69s; }
.hero__title .serif-accent, .page-hero__title .serif-accent { color: var(--gold-300); }

.hero__lede, .page-hero__lede {
	max-width: 36rem;
	margin-top: 1.5rem;
	color: rgb(255 255 255 / .88);
	font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
	line-height: 1.65;
	animation: fade-up .9s .95s var(--ease-out) both;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.5rem;
	margin-top: 2.25rem;
	animation: fade-up .9s 1.05s var(--ease-out) both;
}

.hero__aside { animation: fade-up .9s 1.2s var(--ease-out) both; }

.momo-card {
	width: 100%;
	padding: 1.125rem 1.25rem 1.25rem;
	border: 1px solid rgb(255 255 255 / .22);
	border-radius: 22px;
	background: rgb(43 13 64 / .4);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
}
.momo-card__title {
	color: var(--gold-300);
	font-family: var(--font-sans);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.3;
}
.momo-card__number {
	margin-top: .35rem;
	color: #fff;
	font-size: 1.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	line-height: 1.1;
}
.momo-card__name { margin-top: .3rem; color: rgb(255 255 255 / .8); font-size: .8125rem; line-height: 1.45; }
.momo-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	margin-top: 1rem;
}
.momo-card .copy-btn { border-color: #fff; }

/* Inner page hero */

.page-hero {
	--focus: var(--gold-300);
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: clamp(480px, 66vh, 640px);
	margin: var(--frame);
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--purple-900);
	color: #fff;
}
.page-hero__inner {
	position: relative;
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
	padding: 140px 0 clamp(2.25rem, 4.5vw, 3.75rem);
}
.page-hero__title { max-width: 20ch; margin-top: 1.25rem; }
.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	margin-top: 2rem;
	animation: fade-up .9s 1.05s var(--ease-out) both;
}

/* Moving heroes (hero-media.js): the banner slideshows, home and inner pages */

/* The banner photos stack. The incoming one fades in over the outgoing one, which stays
   fully visible underneath until the fade ends, so the banner never dims in between.
   Keep the 1.6s in step with FADE in hero-media.js; the drift lasts INTERVAL + FADE. */
.hero-slides > :is(.page-hero__img, .hero__slide) { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease-in-out; }
.hero-slides > :is(.page-hero__img, .hero__slide).is-current { z-index: 2; opacity: 1; }
.hero-slides > :is(.page-hero__img, .hero__slide).is-leaving { z-index: 1; opacity: 1; transition: none; }
.hero-slides > :is(.page-hero__img, .hero__slide).is-drift { animation: slide-drift 7.6s linear both; }

.breadcrumb { animation: fade-up .8s .3s var(--ease-out) both; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; color: rgb(255 255 255 / .82); font-size: .875rem; }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: rgb(255 255 255 / .55); }
.breadcrumb a { color: #fff; font-weight: 700; }

/* Signature programmes strip (home) */

.programmes {
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
	border-bottom: 1px solid var(--line);
}
.programmes__list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: .5rem 1rem;
	margin-top: 1.25rem;
}
.programmes__list a {
	display: flex;
	align-items: center;
	gap: .75rem;
	height: 100%;
	padding: .5rem .25rem;
	border-radius: 12px;
	color: var(--purple-800);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}
.programmes__list a:hover { text-decoration: underline; text-underline-offset: .25em; }
.programmes__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--gold-100);
	color: var(--purple-700);
	transition: transform .4s var(--ease-out), background-color .3s;
}
.programmes__list a:hover .programmes__icon { transform: rotate(-12deg) scale(1.08); background: var(--gold-300); }
.programmes__icon .icon { width: 20px; height: 20px; }

/* Welcome (home) */

.welcome__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	align-items: start;
	gap: clamp(2rem, 6vw, 6rem);
}
.welcome__media { display: grid; gap: 1.25rem; }
.welcome__media .media-frame { aspect-ratio: 4 / 3; }

.media-frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--purple-100);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

.social { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.social__list { display: flex; flex-wrap: wrap; gap: .4rem; }
.social__list a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--purple-800);
	transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--ease-out);
}
.social__list a:hover { transform: translateY(-2px); border-color: var(--purple-800); background: var(--purple-800); color: #fff; }
.social__handle { color: var(--muted); font-size: .875rem; font-weight: 700; }

.welcome__lead {
	color: var(--purple-800);
	font-size: clamp(1.3rem, 1.05rem + .95vw, 1.85rem);
	line-height: 1.45;
}
.welcome__text { max-width: 62ch; margin-top: 1.5rem; }

.statement {
	margin-top: 2rem;
	padding-left: 1.25rem;
	border-left: 3px solid var(--gold-500);
}
.statement blockquote p {
	color: var(--purple-800);
	font-family: var(--font-serif);
	font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem);
	font-style: italic;
	font-weight: 600;
	line-height: 1.3;
}
.statement figcaption { margin-top: .5rem; color: var(--gold-ink); font-size: .875rem; font-weight: 700; }

.welcome__actions { margin-top: 2.25rem; }

/* Section heads */

.section-head {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: end;
	gap: 1.5rem 3rem;
	margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.section-head__aside { display: grid; justify-items: end; gap: 1.25rem; text-align: right; }
.section-head__aside p { max-width: 38ch; color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.section-head--center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.section-head--center .section-title { margin-inline: auto; }
.section-head--center p:not(.label) { max-width: 60ch; color: var(--muted); }
.section-head--center .lead { max-width: 46ch; color: var(--purple-800); }
.section-head:last-child { margin-bottom: 0; }
.carousel-controls { display: flex; gap: .5rem; }

/* What we do carousel (home) */

.carousel {
	display: flex;
	gap: clamp(.875rem, 1.5vw, 1.25rem);
	padding: 0 max(var(--gutter), (100% - var(--container)) / 2) .5rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
	scrollbar-width: none;
	cursor: grab;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.carousel.is-dragging a { pointer-events: none; }

.area-card {
	--focus: var(--gold-300);
	position: relative;
	isolation: isolate;
	display: flex;
	flex: 0 0 clamp(270px, 25vw, 330px);
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 3 / 4.1;
	padding: 1.375rem;
	overflow: hidden;
	border-radius: var(--radius-md);
	color: #fff;
	scroll-snap-align: start;
}
.area-card img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--ease-out);
	-webkit-user-drag: none;
}
.area-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgb(43 13 64 / .95) 0%, rgb(43 13 64 / .72) 38%, rgb(43 13 64 / 0) 66%);
}
.area-card:hover img { transform: scale(1.05); }
.area-card__icon {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #fff;
	color: var(--purple-800);
	transition: transform .5s var(--ease-out);
}
.area-card:hover .area-card__icon { transform: rotate(-10deg) scale(1.06); }
.area-card__icon .icon { width: 22px; height: 22px; }
.area-card h3 { color: #fff; font-size: 1.4rem; line-height: 1.18; }
.area-card p { margin-top: .5rem; color: rgb(255 255 255 / .88); font-size: .9375rem; line-height: 1.5; }
.area-card .btn { align-self: flex-start; margin-top: 1.125rem; }

/* How we work (home) */

.bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(.875rem, 1.5vw, 1.25rem);
}

.step {
	--pad: clamp(1.25rem, 2vw, 1.75rem);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: var(--pad);
	overflow: hidden;
	border-radius: var(--radius-md);
	background: #fff;
}
.step__num { color: var(--gold-ink); font-size: .8125rem; font-weight: 700; }
.step h3 { font-size: clamp(1.3rem, 1.15rem + .4vw, 1.55rem); line-height: 1.2; }
.step p:not(.step__num) { color: var(--muted); font-size: .9375rem; line-height: 1.6; }

.step__media { margin: 1.25rem calc(-1 * var(--pad)) calc(-1 * var(--pad)); overflow: hidden; }
.step__media img { width: 100%; height: 100%; object-fit: cover; }

.step--listen { grid-row: span 2; }
.step--listen .step__media { flex: 1; min-height: 260px; }
.step--deliver .step__media { aspect-ratio: 4 / 3; }

.step__diagram { width: 100%; height: auto; margin-top: auto; padding-top: 1rem; }
.diagram__links path { fill: none; stroke: var(--purple-700); stroke-dasharray: 4 5; stroke-opacity: .4; stroke-width: 1.5; }
.diagram__sun circle { fill: var(--gold-500); }
.diagram__sun path { stroke: var(--gold-500); stroke-linecap: round; stroke-width: 3; }
.diagram__node rect { fill: var(--purple-50); stroke: var(--purple-100); stroke-width: 1.5; }
.diagram__node text {
	fill: var(--purple-800);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	text-anchor: middle;
}

.step--report {
	--focus: var(--gold-300);
	isolation: isolate;
	grid-column: 2 / span 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 1.5rem;
	min-height: 320px;
	background: var(--purple-800);
	color: #fff;
}
.step--report::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgb(43 13 64 / .95) 0%, rgb(43 13 64 / .8) 45%, rgb(43 13 64 / .3) 100%);
}
.step__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.step__copy { display: grid; gap: .55rem; }
.step--report h3 { color: #fff; }
.step--report .step__num { color: var(--gold-300); }
.step--report .step__copy p:not(.step__num) { max-width: 36ch; color: rgb(255 255 255 / .88); }

.checklist {
	width: 250px;
	padding: 1rem 1.125rem 1.125rem;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 20px 40px -20px rgb(0 0 0 / .45);
	color: var(--ink);
}
.checklist__title { color: var(--purple-800); font-size: .8125rem; font-weight: 700; }
.checklist ul { display: grid; gap: .5rem; margin-top: .65rem; }
.checklist li { display: flex; align-items: center; gap: .55rem; font-size: .875rem; line-height: 1.35; }
.checklist .icon, .tick-list .icon {
	width: 22px;
	height: 22px;
	padding: 4px;
	border-radius: 50%;
	background: var(--gold-100);
	color: var(--gold-ink);
}

/* Get involved panel */

.callout { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.callout__panel {
	--focus: var(--gold-300);
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: end;
	gap: 2.5rem 4rem;
	padding: clamp(2rem, 5vw, 4.5rem);
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--purple-800);
	color: #fff;
}
.callout__arc {
	position: absolute;
	top: -42%;
	right: -32%;
	z-index: -1;
	width: 78%;
	opacity: .55;
	overflow: visible;
}
.callout__arc path { fill: none; stroke: var(--gold-500); stroke-linecap: round; stroke-width: 3; }
.callout h2 { color: #fff; font-size: clamp(1.9rem, 1.25rem + 2.3vw, 3.2rem); line-height: 1.1; }
.callout h2 .serif-accent { color: var(--gold-300); }
.callout__copy p { max-width: 46ch; margin-top: 1.25rem; color: rgb(255 255 255 / .85); }
.callout__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }

/* Split: text beside an image */

.split {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	align-items: center;
	gap: clamp(2rem, 6vw, 6rem);
}
.split--reverse > :first-child { order: 2; }
.split__media .media-frame { aspect-ratio: 4 / 5; }
.split__body .section-title { margin-bottom: 1.5rem; }

/* Identity list (about) */

.identity {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 clamp(1.5rem, 3vw, 3rem);
}
.identity li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .25rem 1rem;
	padding-block: 1.75rem;
	border-top: 1px solid var(--line);
}
.identity .feature-icon { grid-row: span 2; }
.identity h3 { font-size: 1.35rem; }
.identity p { color: var(--muted); font-size: .9375rem; }

.feature-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--gold-100);
	color: var(--purple-700);
}

/* Founder (about) */

.founder {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	align-items: start;
	gap: clamp(2rem, 6vw, 6rem);
}
.founder__card {
	position: sticky;
	top: 110px;
	display: grid;
	gap: 1.25rem;
}
.founder__portrait {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: radial-gradient(circle at 50% 38%, var(--purple-700), var(--purple-900));
}
.founder__portrait img { width: 100%; height: 100%; object-fit: cover; }
.founder__name { font-size: 1.6rem; }
.founder__role { color: var(--muted); font-size: .9375rem; }
.founder__quote {
	padding: 1.25rem 1.375rem;
	border-radius: 18px;
	background: var(--gold-100);
	color: var(--purple-800);
	font-family: var(--font-serif);
	font-size: 1.35rem;
	font-style: italic;
	font-weight: 600;
	line-height: 1.3;
}

/* Vision and mission */

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.duo__panel {
	--focus: var(--gold-300);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-height: 360px;
	padding: clamp(1.75rem, 4vw, 3rem);
	overflow: hidden;
	border-radius: var(--radius-lg);
}
.duo__panel--vision { background: var(--purple-800); color: #fff; }
.duo__panel--mission { background: var(--gold-100); color: var(--purple-800); }
.duo__panel h2 { font-size: 1rem; font-family: var(--font-sans); font-weight: 700; letter-spacing: .01em; }
.duo__panel--vision h2 { color: var(--gold-300); }
.duo__panel p {
	margin-top: auto;
	font-family: var(--font-display);
	font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2.1rem);
	line-height: 1.3;
}
.duo__arc { position: absolute; top: -55%; right: -40%; width: 90%; opacity: .5; }
.duo__arc path { fill: none; stroke: var(--gold-500); stroke-width: 3; stroke-linecap: round; }

/* Values */

.values {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(.875rem, 1.5vw, 1.25rem);
}
.value {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border-radius: var(--radius-md);
	background: #fff;
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.value:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.value h3 { margin-top: .5rem; font-size: 1.45rem; }
.value p { color: var(--muted); font-size: .9375rem; }

/* Lists with a tick */

.tick-list { display: grid; gap: 1rem; }
.tick-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start; }
.tick-list .icon { margin-top: .1rem; width: 26px; height: 26px; padding: 5px; }

.pull-quote {
	max-width: 30ch;
	margin-inline: auto;
	color: var(--purple-800);
	font-family: var(--font-serif);
	font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.75rem);
	font-style: italic;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-wrap: balance;
}
.pull-quote cite {
	display: block;
	margin-top: 1rem;
	color: var(--gold-ink);
	font-family: var(--font-sans);
	font-size: .9375rem;
	font-style: normal;
	font-weight: 700;
}

/* Areas of work (what we do) */

.area-rows { display: grid; gap: clamp(4rem, 8vw, 7rem); }
.area-row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: center;
	gap: clamp(2rem, 6vw, 5.5rem);
}
.area-row:nth-child(even) > .area-row__media { order: 2; }
.area-row__media .media-frame { aspect-ratio: 4 / 3; }
.area-row__body { display: grid; gap: 1.1rem; justify-items: start; }
.area-row__body h2 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.area-row__body .feature-icon { margin-bottom: .25rem; }
.area-row__body > p { max-width: 58ch; }
.area-row__includes { display: grid; gap: .6rem; }
.area-row__num { color: var(--gold-ink); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* Jump bar under the What we do hero: one horizontal row, desktop only */
.jump-bar { margin-top: clamp(1rem, 2vw, 1.5rem); }
.jump-bar__list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: #fff;
}
.jump-bar__list li + li { border-left: 1px solid var(--line); }
.jump-bar__list a {
	position: relative;
	display: grid;
	align-content: start;
	gap: .8rem;
	height: 100%;
	padding: 1.1rem 1.15rem 1.25rem;
	color: var(--purple-800);
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .25s;
}
.jump-bar__list a:hover { background: var(--purple-50); }
.jump-bar__list a:focus-visible { outline-offset: -4px; }
.jump-bar__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--gold-100);
	color: var(--purple-700);
	transition: transform .45s var(--ease-out), background-color .25s;
}
.jump-bar__list a:hover .jump-bar__icon { background: var(--gold-300); transform: rotate(-10deg) scale(1.06); }
.jump-bar__arrow {
	position: absolute;
	top: 1.2rem;
	right: 1rem;
	color: var(--purple-700);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .25s, transform .35s var(--ease-out);
}
.jump-bar__list a:hover .jump-bar__arrow, .jump-bar__list a:focus-visible .jump-bar__arrow { opacity: 1; transform: none; }
.area-row__includes h3 { color: var(--muted); font-family: var(--font-sans); font-size: .875rem; font-weight: 700; }

/* Programme cards and pop-ups (projects) */

.programme-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}
.programme {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: #fff;
	box-shadow: 0 0 0 1px var(--line);
	transition: box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.programme:hover { transform: translateY(-4px); box-shadow: var(--shadow-float), 0 0 0 1px var(--line); }
.programme .media-frame { aspect-ratio: 4 / 3; border-radius: 0; }
.programme .media-frame img { transition: transform .8s var(--ease-out); }
.programme:hover .media-frame img { transform: scale(1.05); }
.programme__body { display: grid; flex: 1; gap: .5rem; align-content: start; padding: 1.375rem 1.5rem 1.5rem; }
.programme h3 { font-size: 1.5rem; line-height: 1.2; }
.programme__open {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.programme__open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.programme__open:focus-visible { outline: none; }
.programme:has(.programme__open:focus-visible) { outline: 3px solid var(--purple-700); outline-offset: 3px; }
.programme__tag { color: var(--muted); font-size: .9375rem; }
.programme__icon {
	position: absolute;
	left: 1.25rem;
	top: -24px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 4px solid #fff;
	border-radius: 50%;
	background: var(--gold-500);
	color: var(--purple-900);
	transition: transform .5s var(--ease-out);
}
.programme__icon .icon { width: 20px; height: 20px; }
.programme:hover .programme__icon { transform: rotate(-10deg) scale(1.06); }
.programme__body { position: relative; padding-top: 2rem; }
.programme__more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .5rem;
	color: var(--purple-800);
	font-size: .875rem;
	font-weight: 700;
}
.programme__more .icon { transition: transform .3s var(--ease-out); }
.programme:hover .programme__more .icon { transform: rotate(45deg); }
/* Projects page: the cards show the programme posters, which carry their own words and icons, so nothing crops or covers them */
.programme--poster .media-frame { aspect-ratio: 3 / 2; }
.programme--poster:hover .media-frame img { transform: none; }
.programme--poster .programme__icon { display: none; }
.programme--poster .programme__body { padding-top: 1.375rem; }

.modal {
	width: min(100% - 2rem, 1040px);
	max-height: min(100svh - 2rem, 860px);
	padding: 0;
	border: 0;
	border-radius: var(--radius-lg);
	background: #fff;
	color: var(--ink);
	box-shadow: 0 40px 80px -30px rgb(20 5 30 / .6);
	overflow: auto;
	overscroll-behavior: contain;
}
.modal::backdrop { background: rgb(28 8 42 / .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal[open] { animation: modal-in .45s var(--ease-out); }
.modal[open]::backdrop { animation: fade-in .35s ease-out; }
.modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--purple-800);
	box-shadow: 0 4px 14px -4px rgb(0 0 0 / .3);
	cursor: pointer;
}

.programme-modal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.programme-modal__media { display: grid; grid-template-rows: auto 1fr; grid-template-columns: 1fr 1fr; gap: 4px; min-height: 100%; }
.programme-modal__media img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
/* The first image is the programme poster: shown whole, at its own 3:2 shape */
.programme-modal__media img:first-child { grid-column: 1 / -1; height: auto; min-height: 0; aspect-ratio: 3 / 2; }
.programme-modal__body { display: grid; align-content: start; gap: 1rem; padding: clamp(1.75rem, 4vw, 3rem); }
.programme-modal__body h2 { padding-right: 2.5rem; font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.6rem); }
.programme-modal__tag { color: var(--gold-ink); font-family: var(--font-serif); font-size: 1.35rem; font-style: italic; font-weight: 600; line-height: 1.3; }
.programme-modal__body .btn-row { margin-top: .75rem; }

/* Ways to give (donate) */

.give-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(.75rem, 1.5vw, 1.25rem);
}
.give-tile {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: .4rem;
	aspect-ratio: 4 / 5;
	padding: 1.25rem;
	overflow: hidden;
	border-radius: var(--radius-md);
	color: #fff;
}
.give-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.give-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgb(43 13 64 / .95) 0%, rgb(43 13 64 / .7) 42%, rgb(43 13 64 / .05) 72%);
}
.give-tile:hover img { transform: scale(1.05); }
.give-tile h3 { color: #fff; font-size: 1.3rem; line-height: 1.2; }
.give-tile p { color: rgb(255 255 255 / .88); font-size: .875rem; line-height: 1.5; }
a.give-tile { text-decoration: none; }
a.give-tile:focus-visible { outline-offset: 3px; }
.give-tile__icon {
	position: absolute;
	top: .9rem;
	left: .9rem;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: var(--purple-800);
}
.give-tile__icon .icon { width: 20px; height: 20px; }

/* Payment details (donate) */

.pay-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1rem, 2vw, 1.5rem); }
.pay-card {
	--focus: var(--gold-300);
	display: grid;
	align-content: start;
	gap: 1.25rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: var(--radius-lg);
}
.pay-card--momo { background: var(--gold-500); color: var(--purple-900); --focus: var(--purple-800); }
.pay-card--momo { grid-template-rows: auto auto 1fr; }
.pay-card__tip {
	display: flex;
	align-items: flex-start;
	align-self: end;
	gap: .6rem;
	padding: .9rem 1rem;
	border-radius: 14px;
	background: rgb(255 255 255 / .35);
	font-size: .875rem;
	line-height: 1.5;
}
.pay-card__tip .icon { margin-top: .1rem; }
.pay-card--bank { background: var(--purple-800); color: #fff; }
.pay-card__head { display: flex; align-items: center; gap: .9rem; }
.pay-card__head .feature-icon { background: #fff; }
.pay-card h3 { font-size: clamp(1.5rem, 1.25rem + .8vw, 2rem); }
.pay-card--momo h3 { color: var(--purple-900); }
.pay-card--bank h3 { color: #fff; }
.pay-list { display: grid; gap: .25rem; }
.pay-list > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	padding-block: .85rem;
	border-top: 1px solid currentColor;
	border-top-color: rgb(255 255 255 / .16);
}
.pay-card--momo .pay-list > div { border-top-color: rgb(43 13 64 / .2); }
.pay-list dt { font-size: .875rem; opacity: .85; }
.pay-list dd { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.pay-list .is-big { font-size: 1.6rem; letter-spacing: .03em; }
.pay-card--bank .copy-btn { border-color: rgb(255 255 255 / .35); background: transparent; color: #fff; }
.pay-card--bank .copy-btn:hover { border-color: #fff; }
.pay-card--bank .copy-btn.is-copied { border-color: var(--gold-300); color: var(--gold-300); }
.pay-card--momo .copy-btn { border-color: var(--purple-900); background: transparent; color: var(--purple-900); }
.pay-card--momo .copy-btn.is-copied { border-color: var(--purple-900); color: var(--purple-900); }
.pay-note { color: var(--muted); font-size: .9375rem; }
.pay-grid + .pay-note { margin-top: 1.5rem; }

/* Partnership invitation (donate) */

.partner {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	align-items: center;
	gap: clamp(2rem, 6vw, 5rem);
}
.partner .prose { margin-top: 1.5rem; }
.partner__types { margin-top: 1.75rem; }
.partner__card { position: relative; top: auto; isolation: isolate; overflow: hidden; }
.aside-card__arc { position: absolute; top: -48%; right: -46%; z-index: -1; width: 92%; opacity: .5; overflow: visible; }
.aside-card__arc path { fill: none; stroke: var(--gold-500); stroke-linecap: round; stroke-width: 3; }
.stack-actions { display: grid; gap: .75rem; margin-top: .5rem; }

/* Gallery */

.gallery-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.gallery-count { color: var(--muted); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.filter-btn {
	min-height: 42px;
	padding: 0 1.1rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--purple-800);
	font-size: .9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s;
}
.filter-btn:hover { border-color: var(--purple-800); }
.filter-btn[aria-pressed="true"] { border-color: var(--purple-800); background: var(--purple-800); color: #fff; }

.gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 230px;
	grid-auto-flow: dense;
	gap: clamp(.5rem, 1vw, .875rem);
}
.gallery__item.is-tall { grid-row: span 2; }
.gallery__item.is-wide { grid-column: span 2; }
.gallery__item.is-big { grid-column: span 2; grid-row: span 2; }
.gallery__link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 18px;
	background: var(--purple-100);
	cursor: zoom-in;
}
.gallery__link img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.gallery__link:hover img { transform: scale(1.06); }
.gallery__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgb(43 13 64 / .7), rgb(43 13 64 / 0) 50%);
	opacity: 0;
	transition: opacity .35s;
}
.gallery__link:hover::after, .gallery__link:focus-visible::after { opacity: 1; }
.gallery__caption {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: .9rem;
	z-index: 1;
	color: #fff;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .35s, transform .35s var(--ease-out);
}
.gallery__link:hover .gallery__caption, .gallery__link:focus-visible .gallery__caption { opacity: 1; transform: none; }
.gallery-note { margin-top: 1.5rem; color: var(--muted); font-size: .875rem; }

.lightbox {
	width: min(100% - 1.5rem, 1200px);
	max-height: calc(100svh - 1.5rem);
	background: var(--purple-900);
	color: #fff;
	overflow: hidden;
}
.lightbox figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
.lightbox img { width: 100%; height: min(78svh, 820px); object-fit: contain; background: #12051c; }
.lightbox figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: 1rem 1.25rem; font-size: .9375rem; }
.lightbox__count { color: rgb(255 255 255 / .7); font-variant-numeric: tabular-nums; }
.lightbox__nav {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-top: -48px;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / .92);
	color: var(--purple-800);
	cursor: pointer;
}
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }

/* Contact */

.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}
.contact-card {
	--focus: var(--gold-300);
	display: grid;
	gap: 1.5rem;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-radius: var(--radius-lg);
	background: var(--purple-800);
	color: rgb(255 255 255 / .88);
}
.contact-card h2 { color: #fff; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.contact-list { display: grid; gap: 1.25rem; }
.contact-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; }
.contact-list .feature-icon { width: 44px; height: 44px; background: rgb(255 255 255 / .1); color: var(--gold-300); }
.contact-list .icon { width: 20px; height: 20px; }
.contact-list h3 { color: #fff; font-family: var(--font-sans); font-size: .875rem; font-weight: 700; }
.contact-list a { color: #fff; font-weight: 700; overflow-wrap: anywhere; }
.contact-card .social__list a { border-color: rgb(255 255 255 / .25); color: #fff; }
.contact-card .social__list a:hover { border-color: var(--gold-500); background: var(--gold-500); color: var(--purple-900); }
.contact-list address { font-style: normal; }
.contact-card__note { margin-top: -.75rem; color: rgb(255 255 255 / .8); font-size: .9375rem; }
.contact-card__social { display: grid; gap: .85rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / .14); }
.contact-card__social h3 { color: #fff; font-family: var(--font-sans); font-size: .875rem; font-weight: 700; }
.contact-card__social h3 span { margin-left: .35rem; color: var(--gold-300); }
.contact-form .section-title { margin-bottom: .75rem; }
.form-intro { margin-bottom: 1.75rem; color: var(--muted); font-size: .9375rem; }

.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.field { display: grid; gap: .45rem; }
.field label { color: var(--purple-800); font-size: .9375rem; font-weight: 700; }
.field__optional { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
	width: 100%;
	min-height: 52px;
	padding: .8rem 1rem;
	border: 1.5px solid #CFC4DA;
	border-radius: 14px;
	background: #fff;
	color: var(--ink);
	font-size: 1rem;
	transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 160px; resize: vertical; }
.field select {
	appearance: none;
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A1356' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 18px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--purple-700); }
.field input:focus, .field select:focus, .field textarea:focus {
	border-color: var(--purple-700);
	outline: none;
	box-shadow: 0 0 0 4px rgb(74 29 102 / .18);
}
.field [aria-invalid="true"] { border-color: var(--danger); }
.field__error { display: flex; align-items: center; gap: .4rem; color: var(--danger); font-size: .875rem; font-weight: 700; }
.field__error:empty { display: none; }
.field--check { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem; }
.field--check input { width: 22px; height: 22px; min-height: 0; margin: .1rem 0 0; accent-color: var(--purple-800); }
.field--check label { font-weight: 400; color: var(--ink); }
.field--check .field__error { grid-column: 2; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form-status { font-weight: 700; }
.form-status:empty { display: none; }
.form-status.is-success, .form-status.is-error {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	width: 100%;
	padding: 1rem 1.15rem;
	border-radius: 14px;
}
.form-status.is-success { background: #E7F4EC; color: var(--success); }
.form-status.is-error { background: #FBEAE9; color: var(--danger); }
.form-note { color: var(--muted); font-size: .875rem; }

/* FAQ */

.faq-layout {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	align-items: start;
	gap: clamp(2rem, 5vw, 5rem);
}
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.4rem 0;
	color: var(--purple-800);
	font-family: var(--font-display);
	font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem);
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--purple-700); }
.faq-item__icon {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--purple-50);
	transition: background-color .3s, transform .4s var(--ease-out);
}
.faq-item__icon::before, .faq-item__icon::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: var(--purple-800);
	transition: transform .4s var(--ease-out);
}
.faq-item__icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-item__icon { background: var(--gold-500); transform: rotate(180deg); }
.faq-item[open] .faq-item__icon::after { transform: rotate(0deg); }
.faq-item__answer { display: grid; gap: .9rem; max-width: 62ch; padding: 0 0 1.6rem; color: var(--muted); }
.faq-layout .section-title { margin-bottom: 2rem; }

/* Answers slide open where the browser can animate to height: auto (Chromium 131+); others just open */
@supports (interpolate-size: allow-keywords) {
	.faq-item { interpolate-size: allow-keywords; }
	.faq-item::details-content {
		height: 0;
		overflow: clip;
		transition: height .45s var(--ease-out), content-visibility .45s allow-discrete;
	}
	.faq-item[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.faq-item::details-content { transition: none; }
}

.aside-card {
	--focus: var(--gold-300);
	position: sticky;
	top: 110px;
	display: grid;
	gap: 1rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: var(--radius-lg);
	background: var(--purple-800);
	color: rgb(255 255 255 / .88);
}
.aside-card h2 { color: #fff; font-size: clamp(1.5rem, 1.25rem + .8vw, 1.9rem); }

/* Not found */

.not-found { display: grid; place-items: center; min-height: 80svh; padding: 140px var(--gutter) 4rem; text-align: center; }
.not-found__inner { display: grid; justify-items: center; gap: 1.25rem; max-width: 40rem; }
.not-found__mark { width: 96px; }
.not-found h1 { font-size: clamp(2.2rem, 1.5rem + 2.5vw, 3.4rem); }
.not-found p:not(.label) { color: var(--muted); }
.not-found .btn-row { justify-content: center; margin-top: .75rem; }

/* Footer */

.site-footer {
	--focus: var(--gold-300);
	padding-top: clamp(3.5rem, 7vw, 5.5rem);
	background: var(--purple-900);
	color: rgb(255 255 255 / .8);
	font-size: .9375rem;
	line-height: 1.65;
}
.footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 2.5rem 3rem;
}
.footer__brand img { width: 168px; }
.footer__tagline {
	margin-top: 1.5rem;
	color: var(--gold-300);
	font-family: var(--font-serif);
	font-size: 1.3rem;
	font-style: italic;
	font-weight: 600;
	line-height: 1.3;
}
.footer__brand p:last-child { max-width: 34ch; margin-top: .75rem; }
.footer__col h2 { margin-bottom: 1rem; color: #fff; font-size: 1.2rem; }
.footer__links { display: grid; gap: .5rem; }
.footer__col a { color: rgb(255 255 255 / .8); text-decoration: none; }
.footer__col a:hover { color: #fff; text-decoration: underline; }
.footer__col p { margin-top: .75rem; }
.footer__give strong { color: #fff; letter-spacing: .02em; }
.footer__panel > :first-child { margin-top: 0; }
.footer__credits { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.footer__credits a { color: #fff; font-weight: 700; text-decoration: none; }
.footer__credits a:hover { color: var(--gold-300); text-decoration: underline; text-underline-offset: .2em; }

/* Tablet and phone: the columns fold under their headings (main.js adds .footer--fold) */
.footer__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	min-height: 60px;
	padding: .9rem 0;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.footer__toggle .icon { color: var(--gold-300); transition: transform .35s var(--ease-out); }
.footer__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.footer--fold .footer__col { border-top: 1px solid rgb(255 255 255 / .14); }
.footer--fold .footer__col:last-child { border-bottom: 1px solid rgb(255 255 255 / .14); }
.footer--fold .footer__col h2 { margin: 0; }
.footer--fold .footer__panel { padding-bottom: 1.4rem; }
.footer--fold .footer__panel:not([hidden]) { animation: fade-up .4s var(--ease-out); }
.footer--fold .footer__links { gap: .2rem; }
.footer--fold .footer__links a { display: inline-block; padding: .35rem 0; }
.social__list--dark { margin-top: 1.25rem; }
.social__list--dark a { border-color: rgb(255 255 255 / .2); color: #fff; }
.social__list--dark a:hover { border-color: var(--gold-500); background: var(--gold-500); color: var(--purple-900); }
.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 2rem;
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding-block: 1.5rem;
	border-top: 1px solid rgb(255 255 255 / .12);
	color: rgb(255 255 255 / .66);
	font-size: .8125rem;
}

/* Footer "bookend": a rounded panel that mirrors the hero, opening with a closing statement
   and the two main actions. Tablet and phone stack it and fold the link columns. */
.site-footer { padding-top: 0; background: none; }
.footer__frame {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: var(--frame);
	padding-top: clamp(3rem, 5vw, 4.5rem);
	border-radius: var(--radius-lg);
	background: var(--purple-900);
}
.footer__arc {
	position: absolute;
	top: -12%;
	right: -14%;
	z-index: -1;
	width: 56%;
	opacity: .4;
	overflow: visible;
	pointer-events: none;
}
.footer__arc path { fill: none; stroke: var(--gold-500); stroke-linecap: round; stroke-width: 3; }
.footer__top {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	align-items: end;
	gap: 2rem 4rem;
	padding-bottom: clamp(2.25rem, 4vw, 3.5rem);
	border-bottom: 1px solid rgb(255 255 255 / .14);
}
.footer__statement {
	color: #fff;
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
	line-height: 1.08;
}
.footer__statement > * { display: block; }
.footer__statement .serif-accent { color: var(--gold-300); }
.footer__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; }
.footer__grid { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.footer__brand img { width: 120px; }
.footer__brand .footer__tagline { display: none; }
.footer__brand p:last-child { margin-top: 1.25rem; }
.footer__bottom { align-items: center; margin-top: 0; padding-block: 1.5rem 1.75rem; }
.footer__social { margin: 0; }
.footer__up { display: inline-flex; align-items: center; gap: .4rem; color: #fff; font-weight: 700; text-decoration: none; }
.footer__up .icon { transform: rotate(180deg); transition: transform .3s var(--ease-out); }
.footer__up:hover .icon { transform: rotate(180deg) translateY(3px); }

@media (min-width: 1100px) {
	.footer__grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1099px) {
	.footer__top { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.footer__actions { justify-content: flex-start; }
	/* The divider above the bottom block closes the folded columns, so they need no line of their own */
	.footer--fold .footer__col:last-child { border-bottom: 0; }
	.footer__grid { padding-bottom: 1rem; }
	/* Bottom block, centred: social, handle and credit, copyright, then back to top */
	.footer__bottom { flex-direction: column; justify-content: center; gap: 1rem; text-align: center; }
	.footer__social { order: 1; justify-content: center; }
	.footer__credits { order: 2; justify-content: center; }
	.footer__bottom > p:first-child { order: 3; }
	.footer__up { order: 4; }
	.footer__legal { text-align: center; }
	.footer__legal ul { justify-content: center; }
}

/* Footer: contact links, policy links and the closing wordmark */
.footer__contact { display: grid; gap: .35rem; margin-top: .9rem; }
.footer__contact a { display: inline-flex; align-items: center; gap: .55rem; padding-block: .15rem; overflow-wrap: anywhere; }
.footer__contact .icon { color: var(--gold-300); }
.footer__legal { padding-block: 1.25rem; border-top: 1px solid rgb(255 255 255 / .14); }
.footer__legal ul { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; font-size: .875rem; }
.footer__legal a, .footer__consent {
	padding: 0;
	border: 0;
	background: none;
	color: rgb(255 255 255 / .8);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}
.footer__legal a:hover, .footer__consent:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.footer__legal + .footer__bottom { padding-top: .5rem; border-top: 0; }
/* "Grace Impact" in a tone just lighter than the panel: it sits behind the bottom rows of the
   footer, takes no space of its own, and the bottom edge of the panel cuts it off. It is pure
   decoration, so the words come from CSS rather than the page text (and are hidden from screen readers). */
.footer__wordmark {
	position: absolute;
	right: 0;
	bottom: -.2em;
	left: 0;
	z-index: -1;
	color: var(--purple-800);
	font-family: var(--font-display);
	font-size: clamp(3.4rem, 15.2vw, 15.5rem);
	line-height: .78;
	letter-spacing: -.01em;
	text-align: center;
	white-space: nowrap;
	user-select: none;
	pointer-events: none;
}
.footer__wordmark::before { content: attr(data-text); }

/* Floating WhatsApp button: steps aside over the footer and above the cookie bar */
.wa-float {
	--focus: var(--purple-700);
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--consent-offset, 0px));
	z-index: 90;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #1B8A4A;
	color: #fff;
	box-shadow: 0 12px 28px -10px rgb(20 60 35 / .55);
	transition: transform .35s var(--ease-out), opacity .35s var(--ease-out), visibility .35s, background .2s, bottom .35s var(--ease-out);
	animation: fade-up .6s 1.6s var(--ease-out) both;
}
.wa-float .icon { width: 28px; height: 28px; }
.wa-float:hover { background: #167A3E; transform: translateY(-2px); }
.wa-float.is-away { opacity: 0; visibility: hidden; transform: translateY(16px); }
html.menu-open .wa-float { opacity: 0; visibility: hidden; }

/* Cookie choice (assets/js/analytics.js adds it only when a GA4 ID is set) */
.consent {
	--focus: var(--purple-700);
	position: fixed;
	left: max(1rem, env(safe-area-inset-left));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 95;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	width: min(100% - 2rem, 640px);
	padding: 1.15rem 1.35rem;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 24px 48px -20px rgb(43 13 64 / .45), 0 0 0 1px rgb(58 19 86 / .08);
	color: var(--ink);
	font-size: .9375rem;
	line-height: 1.55;
	animation: fade-up .5s var(--ease-out) both;
}
.consent__text { flex: 1 1 320px; }
.consent__title { color: var(--purple-800); font-family: var(--font-sans); font-size: 1rem; font-weight: 700; }
.consent__text p { margin-top: .25rem; color: var(--muted); }
.consent__text a { color: var(--purple-800); font-weight: 700; }
.consent__actions { display: flex; gap: .6rem; }
.consent__actions .btn { padding-right: 1rem; }
.text-button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--purple-800);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}

/* Inner page hero without a photograph (policy pages) */
.page-hero--plain { min-height: 0; background: var(--purple-800); }
.page-hero--plain::before { content: none; }
.page-hero--plain .page-hero__inner { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-hero__arc { position: absolute; top: -30%; right: -18%; z-index: -1; width: 62%; opacity: .45; overflow: visible; pointer-events: none; }
.page-hero__arc path { fill: none; stroke: var(--gold-500); stroke-linecap: round; stroke-width: 3; }
.page-hero__meta { margin-top: 1.25rem; color: var(--gold-300); font-size: .875rem; font-weight: 700; animation: fade-up .9s 1.05s var(--ease-out) both; }

/* Policy pages: contents list beside the text */
.legal { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 5vw, 5rem); }
.legal__toc { position: sticky; top: 120px; padding: 1.5rem; border-radius: var(--radius-md); background: var(--purple-50); }
.legal__toc-title { color: var(--purple-800); font-family: var(--font-sans); font-size: .875rem; font-weight: 700; }
.legal__toc ol { display: grid; gap: .15rem; margin-top: .75rem; font-size: .9375rem; }
.legal__toc a { display: block; padding: .3rem 0; color: var(--muted); text-decoration: none; }
.legal__toc a:hover { color: var(--purple-800); text-decoration: underline; }
.legal__body { max-width: 70ch; }
.legal__body h2 { margin-top: 2.75rem; font-size: clamp(1.6rem, 1.35rem + .8vw, 2.1rem); }
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { margin-top: 1.75rem; font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 700; }
.legal__body h2 + *, .legal__body h3 + * { margin-top: .75rem; }
.legal__body ul { display: grid; gap: .55rem; padding-left: 1.25rem; }
.legal__body li::marker { color: var(--gold-ink); }
.legal__body a { color: var(--purple-800); font-weight: 700; }
.legal-alert {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .75rem;
	padding: 1rem 1.15rem;
	border-radius: 14px;
	background: #FBEAE9;
	color: var(--danger);
	font-weight: 700;
}
.legal-alert a { color: inherit; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.table-wrap table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.table-wrap th, .table-wrap td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table-wrap thead th { background: var(--purple-50); color: var(--purple-800); }
.table-wrap tbody tr:last-child > * { border-bottom: 0; }
.table-wrap code { color: var(--purple-800); font-size: .875rem; font-weight: 700; }
.table-note { color: var(--muted); font-size: .8125rem; }

/* Step-by-step journeys (volunteer, partner, sponsor) */
.journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.875rem, 1.5vw, 1.25rem); }
.journey > li {
	display: grid;
	align-content: start;
	gap: .65rem;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border-radius: var(--radius-md);
	background: var(--purple-50);
}
.section--tint .journey > li { background: #fff; }
.journey__num {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: .35rem;
	border-radius: 50%;
	background: var(--gold-500);
	color: var(--purple-900);
	font-weight: 700;
}
.journey h3 { font-size: 1.35rem; line-height: 1.2; }
.journey p { color: var(--muted); font-size: .9375rem; }
.journey a { color: var(--purple-800); font-weight: 700; }
.journey-note {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: .6rem;
	margin-top: 2rem;
	color: var(--muted);
	font-size: .9375rem;
	text-align: center;
}
.journey-note .icon { margin-top: .2rem; color: var(--gold-ink); }
.journey-note a { color: var(--purple-800); font-weight: 700; }

/* Enquiry form beside its introduction (volunteer, partner, sponsor) */
.form-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(2rem, 5vw, 4.5rem); }
.form-panel__intro { position: sticky; top: 120px; }
.form-panel__text { max-width: 44ch; margin-top: 1.25rem; color: var(--muted); }
.form-panel__alt { display: grid; gap: .75rem; margin-top: 2rem; }
.form-panel__alt a { display: inline-flex; align-items: center; gap: .85rem; color: var(--ink); text-decoration: none; }
.form-panel__alt a:hover strong { text-decoration: underline; }
.form-panel__alt .feature-icon { width: 46px; height: 46px; }
.form-panel__alt .icon { width: 20px; height: 20px; }
.form-panel__alt strong { display: block; color: var(--purple-800); }
.form-card { padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.section--tint .form-card { box-shadow: none; }
/* The programme choice belongs to sponsorship: on the Sponsor page, or once "Project" is the reason */
.field--programme { display: none; }
[data-form-kind="sponsor"] .field--programme, .form:has(#f-reason option[value="project"]:checked) .field--programme { display: grid; }

/* Sponsor page programme cards: text links instead of a pop-up */
.programme--sponsor:hover { transform: none; }
.programme--sponsor .programme__body > p:not([class]) { color: var(--ink); font-size: .9375rem; }
.programme__links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: auto; padding-top: .75rem; }
.split__ticks { margin-top: 2rem; }
.split__chips { margin-top: 1.75rem; }

/* What We Do: where we work, and asking for help */
.place { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); }
.place__card {
	--focus: var(--gold-300);
	position: relative;
	isolation: isolate;
	display: grid;
	gap: 1rem;
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--purple-800);
	color: rgb(255 255 255 / .88);
}
.place__card .feature-icon { background: rgb(255 255 255 / .1); color: var(--gold-300); }
.place__card h3 { color: #fff; font-size: clamp(1.5rem, 1.3rem + .6vw, 1.9rem); }
.place__note { color: rgb(255 255 255 / .75); font-size: .9375rem; }
.place__card .btn-row { margin-top: .5rem; }
.journey--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.help-actions { justify-content: center; margin-top: 2.25rem; }
.journey-note + .journey-note { margin-top: .75rem; }
.journey-note--alert, .journey-note--alert .icon { color: var(--danger); }
.journey-note--alert a { color: var(--danger); }

/* Motion: the load sequence is CSS; scroll motion is GSAP (assets/js/motion.js) */

@keyframes header-in { from { opacity: 0; transform: translateY(-12px); } }
@keyframes hero-zoom { from { transform: scale(1.08); } }
@keyframes slide-drift { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes line-up { from { transform: translateY(110%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }

/* SplitText wraps each heading line in a clipping mask; the padding keeps
   descenders (g, p, y) and the italic accent inside it */
.split-line-mask { padding-bottom: .16em; margin-bottom: -.16em; }

/* Elements waiting for their scroll reveal. flags.js adds .js before paint;
   if motion.js never runs, .motion-off shows everything again. They are only transparent,
   never visibility:hidden, so keyboard focus and screen readers still reach them. */
@media (prefers-reduced-motion: no-preference) {
	.js:not(.motion-off) [data-split],
	.js:not(.motion-off) [data-reveal],
	.js:not(.motion-off) [data-reveal-group] > * { opacity: 0; }

	/* Room for the parallax drift */
	.js:not(.motion-off) [data-parallax] { inset: -8% 0; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-delay: 0s !important;
		transition-duration: .01ms !important;
	}
	/* A slow dissolve is the usual stand-in for movement, so the banner photos keep fading
	   rather than cutting; the zoom (an animation) is still switched off by the rule above */
	.hero-slides > :is(.page-hero__img, .hero__slide) { transition-duration: 1.6s !important; }
}

/* Responsive */

@media (max-width: 1239px) {
	.nav-call { display: none; }
}

@media (max-width: 1099px) {
	.menu-toggle { display: grid; }
	.nav-shell { gap: .5rem; }
	.nav-actions { margin-left: auto; }
	.primary-nav {
		position: absolute;
		top: calc(100% + .625rem);
		left: 0;
		right: 0;
		display: none;
		max-height: calc(100svh - 120px);
		margin: 0;
		padding: .75rem;
		overflow-y: auto;
		border-radius: 24px;
		background: #fff;
		box-shadow: var(--shadow-float), 0 0 0 1px rgb(58 19 86 / .06);
	}
	.primary-nav.is-open { display: block; }
	.nav-list { flex-direction: column; align-items: stretch; }
	.nav-link { justify-content: space-between; width: 100%; padding: .85rem 1rem; border-radius: 14px; font-size: 1rem; }
	.sub-menu { position: static; translate: none; min-width: 0; padding: 0 0 .25rem .75rem; box-shadow: none; }
	.sub-menu::before { content: none; }
	.nav-list__call { display: block; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); }
	.nav-list__call .nav-link { justify-content: flex-start; gap: .6rem; }

	.hero__inner { grid-template-columns: minmax(0, 1fr); }
	.hero__aside { max-width: 380px; }

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

	.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.step--report { grid-column: 1 / -1; }

	.callout__panel { grid-template-columns: minmax(0, 1fr); }
	/* Brand on the left, the three columns stacked on the right */
	/* A spare last row soaks up the brand column's extra height, so the three rows stay compact */
	.footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto auto auto 1fr; row-gap: 0; }
	.footer__brand { grid-row: 1 / span 4; }

	.identity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.programme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.give-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pay-grid { grid-template-columns: minmax(0, 1fr); }
	.faq-layout { grid-template-columns: minmax(0, 1fr); }
	.aside-card { position: static; }
	.jump-bar { display: none; }
	.journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.journey--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.legal { grid-template-columns: minmax(0, 1fr); }
	.legal__toc { position: static; }
	.legal__toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
	.gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
	.welcome__grid, .split, .founder, .partner, .contact-grid, .form-panel, .place { grid-template-columns: minmax(0, 1fr); }
	.journey--three { grid-template-columns: minmax(0, 1fr); }
	.form-panel__intro { position: static; }
	.split--reverse > :first-child { order: 0; }
	.welcome__media { max-width: 440px; }
	.split__media .media-frame { aspect-ratio: 4 / 3; }
	.founder__card { position: static; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: center; }
	.founder__quote { grid-column: 1 / -1; }
	.section-head { grid-template-columns: minmax(0, 1fr); }
	.section-head__aside { justify-items: start; text-align: left; }
	.duo { grid-template-columns: minmax(0, 1fr); }
	.duo__panel { min-height: 0; }
	.area-row { grid-template-columns: minmax(0, 1fr); }
	.area-row:nth-child(even) > .area-row__media { order: 0; }
	.programme-modal { grid-template-columns: minmax(0, 1fr); }
	.programme-modal__media { grid-template-rows: auto auto; }
}

@media (max-width: 699px) {
	html.menu-open { overflow: hidden; }
	.hero, .page-hero { min-height: 0; }
	/* Text sits over the middle of the photo on phones, so the wash covers more of it */
	.hero::before, .page-hero::before { background: linear-gradient(180deg, rgb(43 13 64 / .55) 0%, rgb(43 13 64 / .74) 26%, rgb(43 13 64 / .92) 62%, rgb(43 13 64 / .96) 100%); }
	.hero__inner { padding-top: 124px; }
	.page-hero__inner { padding-top: 120px; }
	.founder-badge { font-size: .75rem; }
	.hero__actions .btn { flex: 1 1 100%; }
	.page-hero__actions .btn { flex: 1 1 100%; }

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

	.bento { grid-template-columns: minmax(0, 1fr); }
	.step--listen { grid-row: auto; }
	.step--listen .step__media { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
	.step--report { grid-template-columns: minmax(0, 1fr); }
	.checklist { width: 100%; }

	.callout__actions { grid-template-columns: minmax(0, 1fr); }
	.footer__grid { grid-template-columns: minmax(0, 1fr); }
	.footer__grid { grid-template-rows: none; }
	.footer__brand { grid-row: auto; margin-bottom: 2.25rem; }

	.identity, .values, .programme-grid { grid-template-columns: minmax(0, 1fr); }
	.give-grid { grid-template-columns: minmax(0, 1fr); }
	.give-tile { aspect-ratio: 4 / 3; }
	.form__row { grid-template-columns: minmax(0, 1fr); }
	.journey { grid-template-columns: minmax(0, 1fr); }
	.legal__toc ol { grid-template-columns: minmax(0, 1fr); }
	.consent { left: .75rem; bottom: .75rem; width: calc(100% - 1.5rem); }
	.consent__actions { flex: 1 1 100%; }
	.consent__actions .btn { flex: 1; justify-content: center; }
	.wa-float { width: 52px; height: 52px; }
	.founder__card { grid-template-columns: minmax(0, 1fr); }
	/* Two columns: the large tiles become ordinary ones, so the grid stays flush */
	.gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; }
	.gallery__item.is-wide, .gallery__item.is-tall { grid-column: auto; grid-row: auto; }
	.gallery__item.is-big { grid-column: 1 / -1; grid-row: span 1; }
	.lightbox__nav { top: auto; bottom: 4.25rem; margin-top: 0; }
}

@media (max-width: 480px) {
	.gallery { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; }
	.gallery__item.is-big { grid-column: auto; }
	/* The logo, Donate and the menu button share a narrow pill on phones, so each gives a little.
	   Donate stays in view: it is the main thing the site asks for. */
	.nav-shell { padding-left: .625rem; }
	.brand { gap: .45rem; }
	.brand__mark { width: 38px; }
	.brand__name { font-size: .9375rem; }
	.brand__sub { font-size: .5rem; letter-spacing: .18em; }
	.nav-actions { gap: .375rem; }
	.nav-actions .btn--sm { --btn-h: 42px; padding-inline: 1rem; font-size: .8125rem; }
	.nav-actions .btn--sm .btn__icon { display: none; }
	.menu-toggle { width: 42px; height: 42px; }
}

@media (max-width: 351px) {
	.brand__text { display: none; }
}