/**
 * Deepjyoti theme — compiled component styles.
 * Source of truth for the SCSS authoring pipeline lives in assets/scss/
 * (added in a later pass); this file is what actually ships until the
 * build step is wired up, so it is written to be hand-maintainable.
 */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
	margin: 0;
	background-color: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans);
	font-feature-settings: "ss01", "cv11";
	line-height: 1.55;
	overflow-x: hidden;
	overflow-wrap: break-word;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5 {
	font-family: var(--font-serif);
	letter-spacing: -0.02em;
	font-weight: 500;
	line-height: 1.15;
	margin: 0 0 0.5em;
	color: var(--foreground);
}
p { margin: 0 0 1em; }
/* Body copy is justified; hyphenation keeps the last line and inter-word
   spacing from opening up into rivers on narrow columns. Headings, meta lines
   and single-line labels are left alone (they set their own alignment). */
.section__lead,
.section__lead p,
.entry-content p,
.prose p,
.card__excerpt,
.about-mv__item p,
.about-pillar__text,
.about-value__text,
.chair-card__message {
	text-align: justify;
	hyphens: auto;
	text-wrap: pretty;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 1.5rem;
}
@media (min-width: 768px) { .container { padding-inline: 2.5rem; } }
@media (min-width: 1024px) { .container { padding-inline: 4rem; } }

/* ---------- Accessibility ---------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--primary-strong);
	color: var(--primary-foreground);
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 0.375rem 0;
}
.skip-link:focus {
	left: 0;
}
:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Utilities ---------- */
.bg-sunrise { background-image: var(--gradient-sunrise); }
.bg-warm { background-image: var(--gradient-warm); }
.shadow-elegant { box-shadow: var(--shadow-elegant); }
.shadow-warm { box-shadow: var(--shadow-warm); }
.text-balance { text-wrap: balance; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* Base size for deepjyoti_icon() output; individual contexts override it. */
.icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-radius: 999px;
	padding: 0.65rem 1.5rem;
	font-size: 0.9rem;
	font-weight: 500;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
	background-image: var(--gradient-sunrise);
	color: var(--primary-foreground);
	box-shadow: var(--shadow-warm);
	font-weight: 600;
}
.btn-secondary {
	background: var(--secondary);
	color: var(--secondary-foreground);
}
.btn-outline {
	background: transparent;
	border-color: var(--border);
	color: var(--foreground);
}
.btn-outline:hover { background: var(--accent); }

/* ---------- Top bar ---------- */
.topbar {
	background: var(--secondary);
	color: var(--secondary-foreground);
	font-size: 0.75rem;
}
.topbar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.5rem;
	gap: 1rem;
}
.topbar__item { opacity: 0.85; }
.topbar__contact { display: none; }
@media (min-width: 640px) {
	.topbar__contact { display: inline; }
}

/* ---------- Site header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 1px solid var(--border);
	background: color-mix(in oklab, var(--background) 90%, transparent);
	backdrop-filter: blur(8px);
}
.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.75rem;
}
.site-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
/* Logo box is fixed at 90×90px whatever the uploaded file's dimensions are;
   object-fit keeps the artwork's own aspect ratio inside it. The !important
   beats the width/height attributes WordPress prints on attachment images. */
.site-branding img,
.site-branding__logo,
.custom-logo {
	width: 90px !important;
	height: 90px !important;
	min-width: 90px;
	max-width: 90px;
	object-fit: contain;
}
.site-branding__title {
	font-family: var(--font-serif);
	font-size: 2.4rem;
	color: var(--secondary);
	line-height: 1.2;
}
.site-branding__subtitle {
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--muted-foreground);
}

.primary-nav { display: none; }
@media (min-width: 1024px) {
	.primary-nav { display: flex; align-items: center; gap: 1.5rem; }
}
.primary-nav a {
	font-size: 0.9rem;
	color: color-mix(in oklab, var(--foreground) 80%, transparent);
	transition: color 0.2s ease;
	white-space: nowrap;
}
.primary-nav a:hover, .primary-nav a.is-active { color: var(--primary-strong); }

.nav-dropdown { position: relative; }
.nav-dropdown__toggle {
	background: none;
	border: none;
	font-size: 0.9rem;
	color: color-mix(in oklab, var(--foreground) 80%, transparent);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}
.nav-dropdown__panel {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	width: 14rem;
	padding-top: 0.75rem;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	z-index: 50;
}
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel,
.nav-dropdown.is-open .nav-dropdown__panel {
	visibility: visible;
	opacity: 1;
}
.nav-dropdown__panel-inner {
	overflow: hidden;
	border-radius: 0.75rem;
	border: 1px solid var(--border);
	background: var(--card);
	box-shadow: var(--shadow-elegant);
}
.nav-dropdown__panel a {
	display: block;
	padding: 0.65rem 1rem;
	font-size: 0.9rem;
	color: color-mix(in oklab, var(--foreground) 80%, transparent);
}
.nav-dropdown__panel a:hover { background: color-mix(in oklab, var(--accent) 50%, transparent); color: var(--primary-strong); }

.header-cta { display: none; }
@media (min-width: 1024px) { .header-cta { display: inline-flex; } }

/* Icon-only trigger: hamburger, swapping to an X while the panel is open.
   Sized to the 44px touch target with the icon centred inside it. */
.mobile-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	padding: 0;
	background: transparent;
	color: var(--secondary);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.mobile-menu-toggle:hover { border-color: var(--primary); color: var(--primary-strong); }
.mobile-menu-toggle .icon { width: 1.5rem; height: 1.5rem; }
.mobile-menu-toggle__close { display: none; }
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__open { display: none; }
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__close { display: inline-flex; }
.mobile-menu-toggle[aria-expanded="true"] { border-color: var(--primary); color: var(--primary-strong); }
@media (min-width: 1024px) { .mobile-menu-toggle { display: none; } }
.mobile-menu {
	display: none;
	position: absolute;
	right: 1.5rem;
	top: 100%;
	margin-top: 0.5rem;
	width: 16rem;
	overflow: hidden;
	border-radius: 0.75rem;
	border: 1px solid var(--border);
	background: var(--card);
	box-shadow: var(--shadow-elegant);
	z-index: 50;
}
.mobile-menu.is-open { display: block; }
.mobile-menu a {
	display: block;
	padding: 0.65rem 1rem;
	font-size: 0.9rem;
	border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { background: color-mix(in oklab, var(--accent) 50%, transparent); color: var(--primary-strong); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--card); }
.footer-grid {
	display: grid;
	gap: 2.5rem;
	padding-block: 3.5rem;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer-col__heading {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--muted-foreground);
}
.footer-col ul { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; }
.footer-col ul a:hover { color: var(--primary-strong); }
.footer-col p { font-size: 0.9rem; color: var(--muted-foreground); }
.footer-bottom { border-top: 1px solid var(--border); }
.footer-bottom .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding-block: 1.25rem;
	font-size: 0.75rem;
	color: var(--muted-foreground);
	text-align: center;
}
@media (min-width: 768px) { .footer-bottom .container { flex-direction: row; text-align: left; } }

.footer-credit { background: var(--secondary); }
.footer-credit .container { padding-block: 0.75rem; text-align: center; }
.footer-credit, .footer-credit a { font-size: 0.78rem; color: color-mix(in oklab, var(--secondary-foreground) 75%, transparent); }
.footer-credit a { font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; }
.footer-credit a:hover { color: var(--secondary-foreground); }

/* ---------- Hero ---------- */
.page-hero {
	position: relative;
	padding-block: 4rem;
	background: var(--gradient-warm);
	overflow: hidden;
}
.page-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-foreground);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	padding: 0.35rem 0.9rem;
	margin-bottom: 1rem;
}
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); max-width: 42rem; }
.page-hero p { max-width: 38rem; color: var(--muted-foreground); font-size: 1.05rem; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.home-hero { position: relative; min-height: 70vh; min-height: 70svh; display: flex; align-items: center; color: var(--primary-foreground); }
.home-hero__bg { position: absolute; inset: 0; z-index: 0; }
.home-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.home-hero__bg::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, color-mix(in oklab, var(--secondary) 75%, transparent), color-mix(in oklab, var(--foreground) 88%, transparent));
}
.home-hero__content { position: relative; z-index: 1; max-width: 60rem; padding-block: 5rem; text-align: left; }
.home-hero h1 { color: var(--primary-foreground); font-size: clamp(2.25rem, 5vw, 3.5rem); }
.home-hero p { color: color-mix(in oklab, var(--primary-foreground) 90%, transparent); font-size: 1.1rem; }
.home-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	background: color-mix(in oklab, var(--foreground) 25%, transparent);
	border: 1px solid color-mix(in oklab, var(--primary-foreground) 35%, transparent);
	color: var(--primary-foreground);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	padding: 0.4rem 1rem;
	margin-bottom: 1.25rem;
}

/* ---------- Sections ---------- */
.section { padding-block: 4.5rem; }
.section--muted { background: var(--muted); }
.section--dark { background: var(--secondary); color: var(--secondary-foreground); }
.section--dark h2, .section--dark h3 { color: var(--secondary-foreground); }
.section__header { max-width: 42rem; margin-bottom: 2.5rem; }
.section__eyebrow {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--primary-strong);
	font-weight: 600;
}
.section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.section__lead { color: var(--muted-foreground); font-size: 1.05rem; }
.section__header--center { margin-inline: auto; text-align: center; }
.section__header--center .section__lead { text-align: center; }
.section__header--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.section__header--split > div { margin-bottom: 0; }
.section__header-link { font-size: 0.9rem; font-weight: 600; color: var(--primary-strong); white-space: nowrap; }
.section--dark .section__lead, .section--dark .section__header-link { color: color-mix(in oklab, var(--secondary-foreground) 80%, transparent); }

.grid { display: grid; gap: 2rem; }
.grid--2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) {
	.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Stat strip */
.stats-strip { margin-top: -3rem; position: relative; z-index: 2; }
.stats-strip .grid { background: var(--card); border-radius: 1rem; box-shadow: var(--shadow-elegant); padding: 2rem; }
.stat-card { text-align: center; }
.stat-card__value { font-family: var(--font-serif); font-size: clamp(1.75rem, 3vw, 2.25rem); color: var(--primary); }
.stat-card__label { font-size: 0.85rem; color: var(--muted-foreground); }

/* ---------- Cards ---------- */
.card {
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-radius: 1rem;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elegant); }
.card__media { aspect-ratio: 16 / 10; overflow: hidden; display: block; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.5rem; }
.card__title { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--secondary); }
.card__title a { color: inherit; }
.card__excerpt { color: var(--muted-foreground); font-size: 0.9rem; }
/* Keep uneven title/teaser lengths from making cards in a row different
   heights — titles clamp to two lines, teasers to three. Scoped to .card__body
   so standalone .card__excerpt paragraphs (contact office card) stay untouched. */
.card__body .card__title a { display: block; }
.card__body .card__title, .card__body .card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.card__body .card__title { -webkit-line-clamp: 2; line-clamp: 2; }
.card__body .card__excerpt { -webkit-line-clamp: 3; line-clamp: 3; }

/* Google Maps embed (contact page, under the office details) */
.map-embed {
	margin: 1.5rem 0 0;
	border: 1px solid var(--border);
	border-radius: 0.75rem;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--muted);
}
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 640px) { .map-embed { aspect-ratio: 16 / 10; } }
.card__meta { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary-strong); margin-bottom: 0.5rem; display: inline-block; }
.card__link { display: inline-block; margin-top: 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--primary-strong); }

/* ---------- News card (News page listing, home.php) ---------- */
/* Column layout so the date/read-more footer sits on the card's baseline
   whatever the title and teaser lengths are — grid already stretches the
   cards in a row to equal height, this stops the meta row floating. */
.news-card { display: flex; flex-direction: column; }
.news-card .card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.news-card .card__excerpt { margin-bottom: 1rem; }
.news-card__footer {
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.news-card__date { font-size: 0.78rem; color: var(--muted-foreground); }
.news-card__footer .card__link { margin-top: 0; }
.news-card__media img { transition: transform 0.5s ease; }
.news-card:hover .news-card__media img { transform: scale(1.05); }
/* No featured image: the diya mark on the warm gradient rather than an
   empty box, so every card in a row keeps the same 16:10 media block. */
.news-card__media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: var(--gradient-warm);
	border-bottom: 1px solid var(--border);
}
.news-card__media--placeholder img {
	width: auto;
	height: 44%;
	max-width: 45%;
	object-fit: contain;
	opacity: 0.55;
}

/* ---------- Person card (Team page) ---------- */
.person-card {
	text-align: center;
	padding: 2rem 1.25rem 1.75rem;
	border-radius: 1.25rem;
	border: 1px solid var(--border);
	background: var(--card);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.person-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-elegant);
	border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
}
/* Team grid photos: a medium, rounded-rectangle portrait rather than a small
   circular avatar — the chairperson section's photo (template-parts/sections/
   chairperson.php) shares .person-card__photo but never wraps it in
   .person-card__frame, so it keeps its own circular treatment untouched. */
.person-card__frame { position: relative; width: min(11rem, 100%); margin-inline: auto; }
.person-card__photo {
	border-radius: 999px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	width: 100%;
	position: relative;
	z-index: 1;
	background: var(--gradient-sunrise);
	padding: 3px;
}
.person-card__frame .person-card__photo { border-radius: 1.1rem; aspect-ratio: 4 / 5; }
.person-card__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; border: 2px solid var(--card); transition: transform 0.5s ease; }
.person-card__frame .person-card__photo img { border-radius: 0.85rem; }
.person-card:hover .person-card__photo img { transform: scale(1.08); }
/* Soft flame-coloured glow that blooms behind the portrait on hover — the
   card's one "eye-catching" flourish, kept to a glow rather than motion so it
   doesn't compete with the reveal-on-scroll entrance. */
.person-card__frame::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 1.4rem;
	background: var(--gradient-sunrise);
	opacity: 0;
	filter: blur(10px);
	transition: opacity 0.35s ease;
	z-index: 0;
}
.person-card:hover .person-card__frame::before { opacity: 0.55; }

/* Social row: overlaid on the portrait, hidden until the card is hovered or
   a link inside it gains keyboard focus — so it never fights the photo for
   attention, but is always reachable without a mouse. */
.person-card__socials {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: oklch(0.22 0.03 40 / 0.55);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.person-card:hover .person-card__socials,
.person-card:focus-within .person-card__socials {
	opacity: 1;
}
.person-card__socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: var(--card);
	color: var(--primary-strong);
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.person-card__socials a:hover,
.person-card__socials a:focus-visible { background: var(--primary); color: var(--primary-foreground); transform: scale(1.1); }
.person-card__socials .icon { width: 1rem; height: 1rem; }
@media (hover: none) and (pointer: coarse) {
	/* No hover state on touch — keep the socials reachable at all times. */
	.person-card__socials { opacity: 1; background: oklch(0.22 0.03 40 / 0.35); }
}

.person-card__name { margin-top: 1.25rem; font-size: 1.05rem; }
.person-card__role {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--primary-strong);
}

/* About section */
.about-media { position: relative; }
.about-badge {
	position: absolute;
	right: -1rem;
	bottom: -1.5rem;
	background: var(--card);
	border-radius: 0.75rem;
	box-shadow: var(--shadow-elegant);
	padding: 1rem 1.5rem;
	display: flex;
	flex-direction: column;
	max-width: 12rem;
}
.about-badge__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); }
.about-badge__value { font-family: var(--font-serif); font-size: 1.5rem; color: var(--primary); }
.about-badge__note { font-size: 0.75rem; color: var(--muted-foreground); }

.about-mv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.about-mv__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary-strong); font-weight: 600; }
.about-mv__item p { margin-top: 0.35rem; font-size: 0.9rem; }

/* About Us page (page-templates/template-about.php).
   The homepage teaser is a compact image-beside-text block; the page opens
   centered over a wide banner so the two never read as the same section. */
.about-intro__head { max-width: 46rem; margin-inline: auto; text-align: center; }
.about-intro__head .section__title { margin-bottom: 0.75rem; }
.about-intro__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 0; }
.about-intro__chip {
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 0.3rem 0.85rem;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--muted-foreground);
	background: var(--card);
}
.about-intro__body {
	max-width: 46rem;
	margin: 2rem auto 0;
	column-gap: 3rem;
}
@media (min-width: 900px) { .about-intro__body { max-width: 62rem; columns: 2; } }
.about-intro__body p:first-child { margin-top: 0; }
.about-intro__banner {
	margin: 3rem 0 0;
	border-radius: 1.25rem;
	overflow: hidden;
	aspect-ratio: 21 / 9;
	box-shadow: var(--shadow-elegant);
}
.about-intro__banner img { width: 100%; height: 100%; object-fit: cover; }

/* Mission / Vision / Goal — three icon cards, the topmost edge tinted with the
   brand gradient so the trio reads as one set. Centered so the block reads as a
   set of statements rather than three unrelated text columns. */
.about-pillar {
	padding: 2.25rem 2rem;
	position: relative;
	overflow: hidden;
	height: 100%;
	text-align: center;
}
.about-pillar .about-pillar__text { text-align: center; }
.about-pillar::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background-image: var(--gradient-sunrise);
}
.about-pillar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	background: var(--accent);
	color: var(--primary-strong);
	margin: 0 auto 1rem;
}
.about-pillar__icon .icon { width: 1.5rem; height: 1.5rem; }
.about-pillar__label {
	font-size: 1.25rem;
	color: var(--secondary);
	margin-bottom: 0.35rem;
}
.about-pillar__text { margin: 0; font-size: 0.95rem; color: var(--muted-foreground); }

/* Core values — a ticked list, two/three across. Names carry the block; the
   description under each is optional. */
.about-values {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.25rem;
}
@media (min-width: 640px) { .about-values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2.5rem; } }
@media (min-width: 1024px) { .about-values { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.about-value {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--border);
	border-radius: 0.75rem;
	background: var(--card);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.about-value:hover { border-color: var(--primary); box-shadow: var(--shadow-warm); }
.about-value__marker {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.65rem;
	height: 1.65rem;
	border-radius: 999px;
	background: var(--accent);
	color: var(--primary-strong);
	margin-top: 0.1rem;
}
.about-value__marker .icon { width: 0.95rem; height: 0.95rem; }
.about-value__title { font-size: 1.05rem; color: var(--secondary); margin-bottom: 0; }
.about-value__text { margin: 0.3rem 0 0; font-size: 0.9rem; color: var(--muted-foreground); }

/* Chairperson message — spans the same container width as every other
   homepage section (no extra max-width), so its edges line up with the
   About, Programs and News blocks above and below it. */
.chair-card {
	display: grid;
	gap: 2rem;
	padding: 2.5rem;
	align-items: center;
}
@media (min-width: 768px) {
	.chair-card { grid-template-columns: 16rem minmax(0, 1fr); gap: 3rem; padding: 3rem; }
}
.chair-card__aside { text-align: center; }
.chair-card__photo { width: 9rem; }
.chair-card__name { margin-top: 1rem; font-family: var(--font-serif); }
.chair-card__quote {
	font-family: var(--font-serif);
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	font-style: italic;
	color: var(--secondary);
	margin: 0.5rem 0 0;
}
.chair-card__message { margin-top: 1rem; margin-bottom: 0; }

/* News item: used inside the homepage's dark "Latest" teaser
   (template-parts/sections/news.php, .section--dark) — base colors below
   are the light-background defaults; the .section--dark block restores the
   original near-white treatment for the dark teaser only. */
.news-item__meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.news-item__badge {
	background: var(--primary);
	color: var(--primary-foreground);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
}
.news-item__date { font-size: 0.8rem; color: var(--muted-foreground); }
.news-item__title { font-size: 1.15rem; margin-bottom: 0.5rem; }
.news-item__title a { color: var(--secondary); }
.news-item__link { font-size: 0.85rem; font-weight: 600; color: var(--primary-strong); }

.section--dark .news-item__date { color: color-mix(in oklab, var(--secondary-foreground) 70%, transparent); }
.section--dark .news-item__title a { color: var(--secondary-foreground); }
.section--dark .news-item__link { color: color-mix(in oklab, var(--secondary-foreground) 85%, transparent); }

.partner-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border: 1px solid var(--border);
	border-radius: 1rem;
	overflow: hidden;
}
@media (min-width: 768px) { .partner-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.partner-grid__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.75rem 1rem;
	border: 1px solid var(--border);
	background: var(--card);
	margin: -1px 0 0 -1px;
}
/* Logos: cap the height and let width follow, so wide wordmarks and square
   emblems both sit on the same optical baseline without being cropped. */
.partner-grid__logo {
	max-height: 2.75rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
.partner-grid__name { font-weight: 600; text-align: center; }
.partner-grid img, .partner-grid span {
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
.partner-grid img:hover, .partner-grid span:hover { filter: none; opacity: 1; }

/* CTA band */
.cta-band {
	background-image: var(--gradient-sunrise);
	color: var(--primary-foreground);
	border-radius: 1.5rem;
	padding: 3rem;
	display: grid;
	gap: 2rem;
}
@media (min-width: 768px) { .cta-band { grid-template-columns: 3fr 2fr; align-items: center; } }
.cta-band h2 { color: var(--primary-foreground); }
.cta-band__aside { display: flex; flex-direction: column; gap: 1.5rem; }
.cta-band__info { display: flex; flex-direction: column; gap: 1rem; }
.cta-band__info p { margin: 0.25rem 0 0; font-size: 0.9rem; }
.cta-band__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in oklab, var(--primary-foreground) 75%, transparent); font-weight: 600; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cta-band__info a { text-decoration: underline; text-underline-offset: 2px; }
/* Translucent "Donate" + solid-white "Partner with us", per the design. */
.cta-band__btn-ghost {
	background: color-mix(in oklab, var(--primary-foreground) 18%, transparent);
	color: var(--primary-foreground);
	border-color: transparent;
}
.cta-band__btn-ghost:hover { background: color-mix(in oklab, var(--primary-foreground) 28%, transparent); }
.cta-band__btn-solid {
	background: var(--card);
	color: var(--primary-strong);
	border-color: transparent;
}
.cta-band__btn-solid:hover { background: var(--primary-foreground); }

/* Breadcrumbs */
.breadcrumbs { font-size: 0.8rem; color: var(--muted-foreground); margin-bottom: 1rem; }
.breadcrumbs a { color: var(--muted-foreground); }
.breadcrumbs a:hover { color: var(--primary-strong); }
.breadcrumbs__sep { margin: 0 0.4rem; }

/* Forms */
.form-field { margin-bottom: 1.25rem; }
.form-field label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.4rem; }
.form-field input, .form-field textarea, .form-field select {
	width: 100%;
	border: 1px solid var(--input);
	border-radius: 0.5rem;
	padding: 0.65rem 0.85rem;
	font-size: 0.9rem;
	background: var(--background);
	color: var(--foreground);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
	outline: 2px solid var(--ring);
	outline-offset: 1px;
}

/* Pagination */
.pagination { display: flex; gap: 0.5rem; margin-top: 2.5rem; flex-wrap: wrap; }
.pagination a, .pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.25rem; height: 2.25rem; padding-inline: 0.5rem;
	border: 1px solid var(--border); border-radius: 0.5rem; font-size: 0.85rem;
}
.pagination .current { background: var(--primary-strong); color: var(--primary-foreground); border-color: var(--primary-strong); }
.pagination a:hover { border-color: var(--primary); color: var(--primary-strong); }

/* WordPress core pagination markup (the_posts_pagination / comments_pagination) */
.navigation.pagination { display: flex; gap: 0.5rem; margin-top: 2.5rem; flex-wrap: wrap; }
.navigation.pagination .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.25rem; height: 2.25rem; padding-inline: 0.5rem;
	border: 1px solid var(--border); border-radius: 0.5rem; font-size: 0.85rem;
}
.page-numbers.current { background: var(--primary-strong); color: var(--primary-foreground); border-color: var(--primary-strong); }
.page-numbers.dots { border-color: transparent; }
a.page-numbers:hover { border-color: var(--primary); color: var(--primary-strong); }

/* ---------- Comments ---------- */
/* Styles the markup WordPress core's Walker_Comment already outputs
   (.comment/.comment-body/.comment-meta/.comment-content/.reply/.children
   etc.) rather than a custom walker — core already gets threading,
   moderation-pending state, edit links and pingbacks/trackbacks right, so
   there's nothing to reimplement, only to make attractive. */
.comments-area { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.comments-title { font-family: var(--font-serif); font-size: 1.4rem; color: var(--secondary); margin-bottom: 1.75rem; }

.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.comment-list .children { list-style: none; margin: 1.5rem 0 0; padding-left: 1.5rem; display: grid; gap: 1.5rem; border-left: 2px solid var(--border); }

.comment-body {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 1rem;
	padding: 1.5rem 1.75rem;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.comment-body:hover { border-color: color-mix(in oklab, var(--primary) 25%, var(--border)); box-shadow: var(--shadow-elegant); }
.bypostauthor > .comment-body { border-color: var(--primary); }

.comment-meta { margin-bottom: 0.75rem; }
.comment-author.vcard { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.comment-author .avatar { border-radius: 999px; border: 2px solid var(--border); }
.comment-author .fn { font-style: normal; font-weight: 600; color: var(--secondary); }
.comment-author .says { display: none; }
.bypostauthor .comment-author .fn::after {
	content: "Author";
	margin-left: 0.5rem;
	display: inline-block;
	vertical-align: middle;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--primary-foreground);
	background: var(--primary-strong);
	border-radius: 999px;
	padding: 0.15rem 0.6rem;
}
.comment-metadata { margin-top: 0.15rem; margin-left: calc(48px + 0.75rem); font-size: 0.8rem; color: var(--muted-foreground); }
.comment-metadata a { color: inherit; }
.comment-metadata a:hover { color: var(--primary-strong); }
.comment-metadata .comment-edit-link { margin-left: 0.5rem; text-decoration: underline; }
.comment-awaiting-moderation {
	display: inline-block;
	margin-top: 0.6rem;
	font-style: normal;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--accent-foreground);
	background: var(--accent);
	border-radius: 999px;
	padding: 0.3rem 0.85rem;
}
.comment-content { margin-top: 0.25rem; }
.comment-content p:last-child { margin-bottom: 0; }

.reply { margin-top: 1rem; }
.comment-reply-link {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 0.4rem 1rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--primary-strong);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.comment-reply-link:hover { background: var(--accent); border-color: var(--primary); }

.pingback, .trackback { font-size: 0.9rem; }
.pingback .comment-body, .trackback .comment-body { padding: 1rem 1.25rem; }
.pingback .comment-metadata, .trackback .comment-metadata { margin-left: 0; }

.no-comments { color: var(--muted-foreground); font-size: 0.9rem; }

/* Comment form: same field look as .form-field (inc/forms.php), applied to
   core's own .comment-form-* markup since comment_form() doesn't share that
   wrapper class — the .pagination / .page-numbers pair above is the same
   custom-markup-vs-core-markup split for the same reason. */
.comment-respond {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 1.25rem;
	padding: 2rem;
	margin-top: 2.5rem;
}
.comment-reply-title { font-family: var(--font-serif); font-size: 1.25rem; color: var(--secondary); margin-bottom: 0.25rem; }
.comment-reply-title small { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 400; margin-left: 0.75rem; }
.comment-reply-title small a { color: var(--muted-foreground); text-decoration: underline; }
.comment-notes, .logged-in-as { color: var(--muted-foreground); font-size: 0.85rem; margin-bottom: 1.5rem; }
.logged-in-as a { color: var(--primary-strong); }
.required { color: var(--destructive); }

.comment-form p { margin: 0 0 1.25rem; }
.comment-form label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.4rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	border: 1px solid var(--input);
	border-radius: 0.5rem;
	padding: 0.65rem 0.85rem;
	font-size: 0.9rem;
	font-family: inherit;
	background: var(--background);
	color: var(--foreground);
}
.comment-form input:focus, .comment-form textarea:focus {
	outline: 2px solid var(--ring);
	outline-offset: 1px;
}
.comment-form-cookies-consent { display: flex; align-items: center; gap: 0.5rem; }
.comment-form-cookies-consent label { margin: 0; font-size: 0.8rem; font-weight: 400; color: var(--muted-foreground); }
.comment-form .form-submit { margin-top: 1.5rem; margin-bottom: 0; }

@media (max-width: 560px) {
	.comment-body { padding: 1.25rem; }
	.comment-metadata { margin-left: 0; margin-top: 0.5rem; }
	.comment-respond { padding: 1.5rem; }
}

/* FAQ accordion */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary { position: relative; padding-right: 1.5rem; }
.faq-item summary::after {
	content: "+";
	position: absolute; right: 0; top: 0;
	font-size: 1.1rem; color: var(--primary);
	transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }

/* Gallery */
.gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Single layout */
.single-layout { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
	.single-layout--with-sidebar { grid-template-columns: minmax(0, 1fr) 20rem; }
}

/* Content / prose */
.entry-content, .prose { max-width: 42rem; }
.entry-content h2, .prose h2 { font-size: 1.6rem; margin-top: 2rem; }
.entry-content h3, .prose h3 { font-size: 1.3rem; margin-top: 1.5rem; }
.entry-content ul, .entry-content ol { padding-left: 1.25rem; }
.entry-content a { color: var(--primary-strong); text-decoration: underline; }
.entry-content img { border-radius: 0.75rem; margin-block: 1.5rem; }

/* 404 */
.error-404 { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding-block: 4rem; }
.error-404 h1 { font-size: 5rem; color: var(--primary); }

/* ---------- Projects ---------- */
/* The portfolio reuses .card (border, radius, hover lift) and only adds the
   NGO-report furniture on top: year/programme badges, a partner–location–
   beneficiaries meta list, compact impact figures and programme-area tags. */
.projects-listing__intro { max-width: 46rem; margin-bottom: 2rem; }

.project-filters { margin-bottom: 1.25rem; }
.project-filters__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.project-filter {
	display: inline-block;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--card);
	color: var(--muted-foreground);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 0.4rem 0.9rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.project-filter:hover { border-color: var(--primary); color: var(--primary-strong); }
.project-filter[aria-current="true"] {
	background: var(--secondary);
	border-color: var(--secondary);
	color: var(--secondary-foreground);
}

.projects-listing__count,
.projects-listing__empty { font-size: 0.85rem; color: var(--muted-foreground); }
.projects-listing__empty { margin-top: 1.5rem; }

/* Project cards carry far more text than the generic 3-up card grid, so they
   stay 2-up until there is real room for a third column. */
.grid--projects { grid-template-columns: repeat(1, minmax(0, 1fr)); align-items: stretch; }
@media (min-width: 768px) { .grid--projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid--projects { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.project-card { display: flex; flex-direction: column; height: 100%; }
/* .project-card sets display:flex, which would beat the UA [hidden] rule the
   filter script relies on to hide a card. */
.project-card[hidden] { display: none; }
.project-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 0.85rem; }
.project-card__body > * { margin: 0; }
.project-card__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.project-badge {
	display: inline-block;
	border-radius: 999px;
	background: var(--muted);
	color: var(--muted-foreground);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.3rem 0.7rem;
}
.project-badge--year {
	background: var(--accent);
	color: var(--accent-foreground);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}
/* Title clamping from .card__body would cut two-line project names, and these
   titles carry the record — show them in full. */
.project-card .project-card__title,
.project-card .project-card__excerpt { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
.project-card__title { font-size: 1.15rem; }

.project-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.85rem; }
.project-meta li { display: flex; align-items: flex-start; gap: 0.5rem; }
.project-meta .icon { width: 1rem; height: 1rem; color: var(--primary-strong); margin-top: 0.2rem; }
.project-meta__label { color: var(--muted-foreground); }

.project-stats {
	list-style: none;
	margin: 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--border);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
	gap: 0.75rem 1rem;
}
.project-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.project-stat__value {
	font-family: var(--font-serif);
	font-size: 1.4rem;
	line-height: 1.1;
	color: var(--primary-strong);
	font-variant-numeric: tabular-nums;
}
.project-stat__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-foreground); }

.project-card__footer {
	margin-top: auto;
	padding-top: 0.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}
.project-card__footer .card__link { margin-top: 0; }
.project-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.project-tag {
	display: inline-block;
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 0.2rem 0.65rem;
	font-size: 0.7rem;
	color: var(--muted-foreground);
	background: var(--background);
}
.project-tag:hover { border-color: var(--primary); color: var(--primary-strong); }

/* Project detail — body copy with a facts panel alongside, matching the
   single-post layout's column rhythm. */
.project-detail { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
	.project-detail { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
	/* No facts panel to sit beside (an event with no metadata filled in) —
	   the body copy takes the full width instead of an empty column. */
	.project-detail--single { grid-template-columns: minmax(0, 1fr); }
	.project-facts { position: sticky; top: 6rem; }
}
.project-detail__main { max-width: none; }
.project-detail__main > .project-card__badges { margin-bottom: 1.25rem; }
.project-detail__block { margin-top: 2.5rem; }
.project-detail__heading { font-size: 1.4rem; margin-bottom: 1rem; color: var(--secondary); }
.project-stats--detail { border-top: 0; padding-top: 0; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1.25rem; }
.project-stats--detail .project-stat__value { font-size: clamp(1.75rem, 3vw, 2.25rem); color: var(--primary); }

.project-impact { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.project-impact li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; }
.project-impact .icon { width: 1.1rem; height: 1.1rem; color: var(--primary-strong); margin-top: 0.25rem; }

.project-facts { padding: 1.75rem; }
.project-facts:hover { transform: none; box-shadow: none; }
.project-facts__title { font-size: 1.1rem; color: var(--secondary); margin-bottom: 1rem; }
.project-facts__subtitle { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); margin: 1.5rem 0 0.6rem; font-family: var(--font-sans); font-weight: 600; }
.project-facts__list { margin: 0; display: grid; gap: 0.9rem; }
.project-facts__list dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); }
.project-facts__list dd { margin: 0.15rem 0 0; font-size: 0.95rem; }
.project-facts__back { margin-top: 1.5rem; width: 100%; }
/* "This event has already taken place" — a note above the facts, not an
   alarm, so it stays in the muted register the rest of the panel uses. */
.project-facts__status { margin: 0 0 1rem; font-size: 0.85rem; color: var(--muted-foreground); border-left: 2px solid var(--border); padding-left: 0.7rem; }

/* ---------- Members category switch ---------- */
/* Renders as stacked, headed sections without JS; assets/js/members-switch.js
   adds .is-switched, which hides the per-panel headings (the tab label already
   names the group) and lets the script show one panel at a time. */
.members-switch__nav { margin-bottom: 2rem; }
.members-switch__list {
	list-style: none;
	margin: 0;
	padding: 0.3rem;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	background: var(--muted);
	border-radius: 999px;
	max-width: 100%;
}
.members-switch__tab {
	display: block;
	border-radius: 999px;
	padding: 0.5rem 1.1rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted-foreground);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.members-switch__tab:hover { color: var(--primary-strong); }
.members-switch__tab[aria-current="true"] {
	background: var(--card);
	color: var(--secondary);
	box-shadow: 0 1px 2px oklch(0.22 0.03 40 / 0.12);
}
.members-switch__panel + .members-switch__panel { margin-top: 3rem; }
.members-switch__panel:focus-visible { outline: 2px solid var(--ring); outline-offset: 0.75rem; }
.members-switch__heading { font-size: 1.4rem; color: var(--secondary); margin-bottom: 1.5rem; }
/* Switched mode: one panel at a time, headings kept for screen readers only. */
.members-switch.is-switched .members-switch__panel + .members-switch__panel { margin-top: 0; }
.members-switch.is-switched .members-switch__heading {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
@media (max-width: 560px) {
	.members-switch__list { display: flex; width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; border-radius: 1rem; }
	.members-switch__tab { padding-inline: 0.85rem; }
}

/* ---------- Impact stories ---------- */
/* Story cards reuse .project-card wholesale; only the impact chips differ —
   these are short qualitative highlights, not value/label statistics. */
.story-highlights { list-style: none; margin: 0; padding: 1rem 0 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0.4rem; }
.story-highlight {
	border-radius: 999px;
	background: var(--muted);
	color: var(--accent-foreground);
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.3rem 0.75rem;
	font-variant-numeric: tabular-nums;
}
.story-highlights--detail { border-top: 0; padding-top: 0; gap: 0.5rem; }
.story-highlights--detail .story-highlight { font-size: 0.85rem; padding: 0.4rem 0.9rem; }
.project-facts__all { display: inline-block; margin-top: 1rem; font-size: 0.85rem; font-weight: 600; color: var(--primary-strong); }

/* Stories linked from a project detail page */
.project-stories { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.project-stories a { display: block; border: 1px solid var(--border); border-radius: 0.75rem; padding: 1rem 1.25rem; background: var(--card); transition: border-color 0.2s ease, transform 0.2s ease; }
.project-stories a:hover { border-color: var(--primary); transform: translateY(-2px); }
.project-stories__title { display: block; font-family: var(--font-serif); font-size: 1.05rem; color: var(--secondary); }
.project-stories__link { display: block; margin-top: 0.25rem; font-size: 0.8rem; font-weight: 600; color: var(--primary-strong); }

/* ---------- Featured projects strip (closes the "What we do" section) ---------- */
.featured-projects { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.featured-projects__heading {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--primary-strong);
	margin-bottom: 1.25rem;
}

/* ---------- Impact stories strip (closes the "What we do" section) ---------- */
/* A list, not cards: the section above it is already a card grid, and repeating
   that treatment made the homepage read as the same block twice. Rows are
   separated by hairlines and carry no background of their own. */
.impact-strip { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.impact-strip__heading {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--primary-strong);
	margin-bottom: 1.25rem;
}
.impact-strip__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 900px) { .impact-strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; } }

.impact-strip__item { border-top: 1px solid var(--border); }
@media (min-width: 900px) {
	/* On one row the divider reads better vertically, between columns. */
	.impact-strip__item { border-top: 0; border-left: 1px solid var(--border); padding-left: 1.75rem; }
	.impact-strip__item:first-child { border-left: 0; padding-left: 0; }
}

.impact-strip__link { display: grid; gap: 0.4rem; padding: 1.25rem 0; }
@media (min-width: 900px) { .impact-strip__link { padding: 0; } }
.impact-strip__meta { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); }
.impact-strip__title {
	font-family: var(--font-serif);
	font-size: 1.15rem;
	line-height: 1.25;
	color: var(--secondary);
	transition: color 0.2s ease;
}
.impact-strip__figures { font-size: 0.85rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.impact-strip__cta { font-size: 0.8rem; font-weight: 600; color: var(--primary-strong); margin-top: 0.15rem; }
.impact-strip__cta span { display: inline-block; transition: transform 0.2s ease; }
.impact-strip__link:hover .impact-strip__title { color: var(--primary-strong); }
.impact-strip__link:hover .impact-strip__cta span { transform: translateX(3px); }

/* ---------- Downloads list & PDF viewer ---------- */
/* Each row is a card that can grow a preview panel underneath, so the
   grid gap has to sit between cards rather than inside them. */
.download-list { display: grid; gap: 0.85rem; max-width: 58rem; }
.download-item { padding: 1.25rem 1.5rem; }
.download-item:hover { transform: none; }
.download-item__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.download-item__info { min-width: 0; }
.download-item__title { margin: 0 0 0.25rem; font-size: 1rem; }
.download-item__meta {
	margin: 0;
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	font-size: 0.78rem;
	color: var(--muted-foreground);
}
.download-item__file {
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.download-item__actions { flex: 0 0 auto; }

/* Disclosure that reveals the inline viewer. The marker is the theme's own
   chevron so the control reads as part of the card, not as a browser
   default; list-style:none on both selectors covers Safari. */
.pdf-preview { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.pdf-preview__toggle {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--primary-strong);
	list-style: none;
	width: max-content;
}
.pdf-preview__toggle::-webkit-details-marker { display: none; }
.pdf-preview__toggle::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}
.pdf-preview[open] .pdf-preview__toggle::before { transform: rotate(45deg); }
.pdf-preview__toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 0.25rem; }
.pdf-preview__panel { margin-top: 0.85rem; }

/* The viewer frame. A tall-ish fixed height rather than an aspect ratio:
   a PDF page is portrait, but a viewport-proportional box would leave the
   document unreadably small on a phone, so height is capped against the
   viewport and the browser's own viewer scrolls inside it. */
.pdf-viewer__frame {
	position: relative;
	border: 1px solid var(--border);
	border-radius: 0.75rem;
	overflow: hidden;
	background: var(--muted);
	height: min(80vh, 42rem);
	min-height: 20rem;
}
.pdf-viewer__object {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
/* Shown when the browser won't render the PDF inline, and in place of a
   lazy embed before it loads. */
.pdf-viewer__fallback,
.pdf-viewer__object > .pdf-viewer__message {
	display: flex;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.25rem;
	padding: 2rem 1.5rem;
}
.pdf-viewer__message { margin: 0; color: var(--muted-foreground); font-size: 0.9rem; }
.pdf-viewer__actions {
	margin: 0.75rem 0 0;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
}
@media (max-width: 640px) {
	.pdf-viewer__frame { height: min(70vh, 30rem); }
}

/* Single Download page: the file bar above the full-width viewer. */
.download-single__intro { max-width: 58rem; }
.download-single__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 1.5rem 0 1rem;
}
.download-single__file {
	margin: 0;
	font-size: 0.85rem;
	color: var(--muted-foreground);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.download-single__actions { margin: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }