/* ==========================================================================
   Global Excellence Forum — design system
   01 · Tokens, base, typography, primitives
   ========================================================================== */

:root {
  /* Colour — one institutional blue system; saffron and green are small Indian accents only */
  --blue-900: #071b4d;         /* deep navy: structure, dark sections, footer */
  --blue-800: #0d2c6b;         /* headings */
  --blue-700: #123e8a;         /* institutional blue: hover, emphasis */
  --blue-600: #1557a6;         /* royal blue: primary actions (6.6:1 with white) */
  --blue-400: #3b82c4;         /* soft blue: map light, illustration */
  --blue-200: #bcd4ee;
  --blue-100: #e3edf8;         /* pale blue: section accents */
  --blue-50: #f3f7fc;
  --navy: var(--blue-800);
  --navy-deep: var(--blue-900);
  --navy-2: var(--blue-700);
  --navy-tint: var(--blue-100);
  --saffron: #e8871e;          /* decorative marks only */
  --saffron-soft: #f6c68c;
  --saffron-text: #a44f00;     /* 5.6:1 on white */
  --saffron-btn: var(--blue-600); /* legacy alias: CTAs are blue now */
  --green: #1c7a4a;            /* 5.3:1 on white */
  --ink: #111a2e;
  --ink-2: #3f4a60;
  --ink-3: #5d677c;
  --paper: #ffffff;
  --stone: #f4f6f9;
  --stone-2: #e9edf3;
  --line: #dce2ea;
  --line-2: #c3ccd8;
  --focus: #1557a6;
  --focus-on-dark: #9cc3f0;

  /* Type */
  --font-sans: "Mukta", "Noto Sans", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Martel", "Noto Serif", "Noto Serif Devanagari", Georgia, serif;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.5rem;
  --fs-xl: clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem);
  --fs-2xl: clamp(2.125rem, 1.3rem + 2.8vw, 3.5rem);

  /* Space (4px base) */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;
  --section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --gutter: clamp(1.25rem, .6rem + 2.4vw, 2.5rem);
  --maxw: 80rem;

  /* Shape & depth — radius increases with the size of the object */
  --r-sm: 2px;
  --r: 4px;
  --r-lg: 8px;
  --shadow-1: 0 1px 2px rgba(20, 27, 94, .06), 0 1px 1px rgba(20, 27, 94, .04);
  --shadow-2: 0 10px 30px -12px rgba(12, 17, 64, .28), 0 2px 6px rgba(12, 17, 64, .06);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --t: .25s var(--ease);

  --jaali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23141b5e' stroke-width='.6'%3E%3Cpath d='M10 10h20v20H10zM20 5.86 34.14 20 20 34.14 5.86 20z'/%3E%3Cpath d='M20 0v5.86M20 34.14V40M0 20h5.86M34.14 20H40M0 0l10 10M40 0 30 10M0 40l10-10M40 40 30 30'/%3E%3C/g%3E%3C/svg%3E");
  --jaali-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='.6'%3E%3Cpath d='M10 10h20v20H10zM20 5.86 34.14 20 20 34.14 5.86 20z'/%3E%3Cpath d='M20 0v5.86M20 34.14V40M0 20h5.86M34.14 20H40M0 0l10 10M40 0 30 10M0 40l10-10M40 40 30 30'/%3E%3C/g%3E%3C/svg%3E");
}

/* Text-size control scales everything set in rem */
html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
html[data-textsize="-1"] { font-size: 90%; }
html[data-textsize="1"] { font-size: 112.5%; }
html[data-textsize="2"] { font-size: 125%; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--navy-2); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; color: var(--ink); letter-spacing: -.012em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-md); line-height: 1.3; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:lang(hi) { line-height: 1.7; }
h1:lang(hi), h2:lang(hi), h3:lang(hi) { line-height: 1.35; letter-spacing: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.on-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--focus-on-dark); }

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

.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 1000;
  background: var(--navy); color: #fff; padding: var(--s3) var(--s4); border-radius: var(--r);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s3); color: #fff; }

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

/* ---------- Signature: the tricolour mark ---------- */
.tri {
  display: inline-flex; width: 2.25rem; height: 4px; flex: none;
  background: linear-gradient(90deg, var(--saffron) 0 33.33%, #fff 33.33% 66.66%, var(--green) 66.66%);
  box-shadow: inset 0 0 0 1px rgba(20, 27, 94, .08);
}

/* ---------- Section scaffolding ---------- */
.section { padding-block: var(--section); position: relative; }
.section--stone { background: var(--stone); }
.section--navy { background: var(--navy); color: #e8eaf6; }
.section--navy h2, .section--navy h3 { color: #fff; }

.section-head { display: grid; gap: var(--s4) var(--s8); margin-bottom: var(--s7); }
.section-head .tri { margin-bottom: var(--s4); }
.section-head h2 { max-width: 20ch; }
.section-head__lead { color: var(--ink-2); font-size: var(--fs-md); line-height: 1.55; max-width: 60ch; }
.section--navy .section-head__lead { color: #c9cde8; }
@media (min-width: 960px) {
  .section-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; }
  .section-head--stack { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--navy); --btn-fg: #fff; --btn-bd: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3rem; padding: .7rem 1.35rem; border-radius: var(--r);
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd);
  font-weight: 600; font-size: var(--fs-base); line-height: 1.2; text-decoration: none;
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}
.btn:hover { --btn-bg: var(--navy-2); --btn-bd: var(--navy-2); color: #fff; }
.btn .i-arrow { width: 1.05em; height: 1.05em; transition: transform var(--t); }
.btn:hover .i-arrow { transform: translateX(3px); }
.btn--saffron { --btn-bg: var(--saffron-btn); --btn-bd: var(--saffron-btn); }
.btn--saffron:hover { --btn-bg: var(--blue-700); --btn-bd: var(--blue-700); } /* legacy class: primary blue */
.btn { --btn-bg: var(--blue-600); --btn-bd: var(--blue-600); }
.btn:hover { --btn-bg: var(--blue-700); --btn-bd: var(--blue-700); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: var(--line-2); }
.btn--ghost:hover { --btn-bg: var(--navy-tint); --btn-fg: var(--navy); --btn-bd: var(--navy); color: var(--navy); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff; }
.btn--light:hover { --btn-bg: var(--navy-tint); --btn-fg: var(--navy); color: var(--navy); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .5); }
.btn--outline-light:hover { --btn-bg: rgba(255, 255, 255, .1); --btn-bd: #fff; }
.btn--sm { min-height: 2.5rem; padding: .45rem 1rem; font-size: var(--fs-sm); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Text link with animated underline */
.link {
  display: inline-flex; align-items: center; gap: .4em; font-weight: 600; color: var(--navy);
  text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size var(--t); padding-bottom: 2px;
}
.link:hover, .link:focus-visible { background-size: 100% 1.5px; color: var(--navy); }
.link .i-arrow { width: 1em; height: 1em; transition: transform var(--t); }
.link:hover .i-arrow { transform: translateX(3px); }
.on-dark .link, .section--navy .link { color: #fff; }

.icon { width: 1.25rem; height: 1.25rem; flex: none; }

/* Tags / chips */
.tag {
  display: inline-block; font-size: var(--fs-xs); font-weight: 600; line-height: 1;
  padding: .4rem .55rem .32rem; border-radius: var(--r-sm); background: var(--navy-tint); color: var(--navy);
}
.tag--saffron { background: #fdf0e1; color: var(--saffron-text); }
.tag--green { background: #e5f2eb; color: var(--green); }
.tag--grey { background: var(--stone-2); color: var(--ink-2); }

/* Filter tabs (used by programmes, events, gallery, media) */
.filters { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s6); }
.filters button {
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-2);
  padding: .5rem 1rem; border-radius: var(--r); font-weight: 500; font-size: var(--fs-sm);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.filters button:hover { border-color: var(--navy); color: var(--navy); }
.filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (max-width: 639px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: none; }
}

/* ---------- Scroll reveal (only when JS + motion allowed) ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease); }
.js .reveal-img.is-in { clip-path: inset(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal, .js .reveal-img { opacity: 1; transform: none; clip-path: none; }
}
html.reduce-motion { scroll-behavior: auto; }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
html.reduce-motion .reveal, html.reduce-motion .reveal-img { opacity: 1 !important; transform: none !important; clip-path: none !important; }

/* Accessibility preferences from the panel */
html.hc { --ink-2: #1a1e2e; --ink-3: #2c3244; --line: #8a8678; --line-2: #6c695e; --stone: #ffffff; --stone-2: #eeeeee; }
html.hc .section--navy, html.hc .site-footer { background: #000033; }
html.links-underlined a { text-decoration: underline !important; }

/* ==========================================================================
   02 · Utility bar, header, navigation, mobile drawer, accessibility panel
   ========================================================================== */

:root { --header-h: 4.75rem; }

/* ---------- Utility bar: thin, quiet, fully functional ---------- */
.utility { position: relative; z-index: 60; background: var(--stone); color: var(--ink-3); font-size: .78125rem; border-bottom: 1px solid var(--line); }
.utility::before { /* tricolour hairline — the only flag-colour moment in the chrome */
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--saffron) 0 33.33%, #fff 33.33% 66.66%, var(--green) 66.66%);
}
.utility__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 2.125rem; padding-top: 2px; }
.utility__group { display: flex; align-items: center; gap: .125rem; }
.utility a, .utility button {
  display: inline-flex; align-items: center; gap: .35em; padding: .2rem .45rem; border-radius: var(--r-sm);
  color: var(--ink-3); text-decoration: none; background: none; border: 0; font-size: .78125rem; font-weight: 500; line-height: 1.2;
}
.utility a:hover, .utility button:hover { color: var(--blue-600); }
.utility .icon { width: .875rem; height: .875rem; }
.utility__sep { width: 1px; height: .875rem; background: var(--line-2); margin-inline: var(--s2); }
.textsize, .lang { display: inline-flex; border-radius: var(--r-sm); overflow: hidden; }
.textsize button, .lang button { border-radius: 0; padding: .15rem .45rem; min-width: 1.75rem; justify-content: center; font-weight: 600; }
.textsize button[aria-pressed="true"], .lang button[aria-pressed="true"], .utility button[aria-pressed="true"]:hover { background: var(--blue-800); color: #fff; }
.lang button[lang="hi"] { font-size: .8125rem; }
.utility__contact { display: none; }
@media (min-width: 1024px) { .utility__contact { display: flex; } }
@media (max-width: 719px) {
  .utility__hide-sm { display: none !important; }
  .utility__inner { justify-content: flex-end; }
}

/* ---------- Header: one white row, sticky ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--blue-50); border-bottom: 1px solid var(--line); transition: box-shadow var(--t); }
.site-header.is-scrolled { box-shadow: 0 10px 28px -20px rgba(7, 27, 77, .5); }
.site-header__inner { display: flex; align-items: center; gap: var(--s5); height: var(--header-h); max-width: 90rem; }
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--ink); min-width: 0; flex: none; }
.brand__emblem { width: 2.875rem; aspect-ratio: 893 / 840; object-fit: cover; object-position: top; flex: none; }
/* the emblem is a JPEG on white: multiply drops that white into the tinted header */
.site-header .brand__emblem, .drawer__head .brand__emblem { mix-blend-mode: multiply; }
.brand__text { display: grid; gap: 2px; min-width: 0; }
.brand__name { font-size: 1.1875rem; font-weight: 700; color: var(--blue-800); line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; }
.brand__meta { font-size: .75rem; color: var(--ink-3); line-height: 1.2; white-space: nowrap; }
@media (max-width: 419px) { .brand__meta { display: none; } .brand__name { font-size: 1.0625rem; } }

.site-header__actions { display: flex; align-items: center; gap: var(--s3); margin-left: auto; flex: none; }
@media (max-width: 639px) { .site-header__cta { display: none !important; } }
.menu-toggle {
  display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--line-2); background: #fff;
  color: var(--blue-800); border-radius: var(--r); padding: .55rem .8rem; font-weight: 600; font-size: var(--fs-sm);
}
.menu-toggle:hover { border-color: var(--blue-600); color: var(--blue-600); }

/* Primary navigation (desktop) */
.site-nav { display: none; }
@media (min-width: 1200px) {
  .site-nav { display: flex; flex: 1; justify-content: center; align-self: stretch; }
  .site-header__actions { margin-left: 0; }
  .menu-toggle { display: none; }
}
.site-nav__list { display: flex; list-style: none; align-items: stretch; }
.site-nav__item { position: relative; display: flex; }
.site-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: .25rem; padding: 0 .7rem;
  color: var(--ink); text-decoration: none; background: none; border: 0; font-weight: 500; font-size: .9375rem; white-space: nowrap;
}
.site-nav__link::after { /* active underline sits on the header's bottom edge */
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: -1px; height: 3px; background: var(--blue-600);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.site-nav__link:hover, .site-nav__link[aria-expanded="true"] { color: var(--blue-600); }
.site-nav__link:hover::after, .site-nav__link[aria-expanded="true"]::after, .site-nav__link[data-current]::after { transform: scaleX(1); }
.site-nav__link[data-current] { color: var(--blue-700); font-weight: 600; }
.site-nav__link .chev { width: .75rem; height: .75rem; opacity: .7; transition: transform var(--t); }
.site-nav__link[aria-expanded="true"] .chev { transform: rotate(180deg); }
@media (min-width: 1200px) and (max-width: 1399px) {
  .site-nav__link { padding: 0 .5rem; font-size: .90625rem; }
  .site-nav__link::after { left: .5rem; right: .5rem; }
  .site-header .brand__meta { display: none; }
  .site-header__cta .i-arrow { display: none; }
}

.dropdown {
  position: absolute; top: calc(100% + 1px); left: 0; min-width: 16.5rem; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-top: 3px solid var(--blue-600); border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-2); padding: var(--s2); list-style: none;
  opacity: 0; transform: translateY(-4px); visibility: hidden; transition: opacity .18s, transform .18s var(--ease), visibility 0s .18s;
}
.site-nav__item.align-right .dropdown { left: auto; right: 0; }
.site-nav__link[aria-expanded="true"] + .dropdown { opacity: 1; transform: none; visibility: visible; transition: opacity .18s, transform .18s var(--ease); }
.dropdown a { display: block; padding: .6rem .75rem; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; line-height: 1.3; font-size: .9375rem; }
.dropdown a span { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.dropdown a:hover, .dropdown a:focus-visible { background: var(--blue-50); color: var(--blue-600); }

/* ---------- Mobile drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: flex-end; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(7, 27, 77, .5); opacity: 0; transition: opacity .3s; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: relative; width: min(100%, 26rem); height: 100%; background: #fff; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .35s var(--ease); overflow: hidden;
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.drawer__head .brand__emblem { width: 2.5rem; }
.drawer__head .brand__name { font-size: 1.0625rem; }
.drawer__close { border: 1px solid var(--line-2); background: #fff; border-radius: var(--r); padding: .55rem; color: var(--blue-800); display: inline-flex; }
.drawer__body { overflow-y: auto; flex: 1; padding: var(--s2) 0 var(--s6); }
.drawer__nav { list-style: none; }
.drawer__nav > li { border-bottom: 1px solid var(--line); }
.drawer__nav a, .drawer__nav button {
  display: flex; width: 100%; align-items: center; justify-content: space-between; padding: .95rem var(--s5);
  background: none; border: 0; text-align: left; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1.0625rem;
}
.drawer__nav [data-current] { color: var(--blue-600); box-shadow: inset 3px 0 0 var(--blue-600); }
.drawer__nav button .chev { width: 1rem; height: 1rem; transition: transform var(--t); color: var(--ink-3); }
.drawer__nav button[aria-expanded="true"] { color: var(--blue-600); }
.drawer__nav button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.drawer__sub { list-style: none; background: var(--blue-50); padding: var(--s2) 0; }
.drawer__sub a { font-weight: 500; padding: .6rem var(--s5) .6rem 2.25rem; font-size: 1rem; color: var(--ink-2); }
.drawer__sub a:hover { color: var(--blue-600); }
.drawer__foot { padding: var(--s5); display: grid; gap: var(--s4); border-top: 1px solid var(--line); background: var(--stone); }
.drawer__foot .btn { width: 100%; }
.drawer__contact { display: grid; gap: var(--s2); font-size: var(--fs-sm); }
.drawer__contact a { color: var(--ink-2); text-decoration: none; display: inline-flex; gap: .5rem; align-items: center; }

/* ---------- Accessibility panel ---------- */
.a11y-panel {
  position: absolute; right: var(--gutter); top: calc(100% + 6px); z-index: 300; width: min(22rem, calc(100vw - 2rem));
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--blue-600); border-radius: var(--r);
  box-shadow: var(--shadow-2); padding: var(--s5); color: var(--ink); font-size: var(--fs-sm);
}
.a11y-panel h2 { font-size: 1.125rem; margin-bottom: var(--s3); }
.a11y-panel__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-block: var(--s3); border-top: 1px solid var(--line); }
.a11y-panel .textsize { border: 1px solid var(--line-2); }
.a11y-panel .textsize button { font-size: var(--fs-sm); padding: .3rem .55rem; color: var(--ink-2); }
.switch { position: relative; width: 2.75rem; height: 1.5rem; border-radius: 999px; background: var(--line-2); border: 0; flex: none; transition: background var(--t); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff; transition: transform var(--t); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch[aria-checked="true"] { background: var(--blue-600); }
.switch[aria-checked="true"]::after { transform: translateX(1.25rem); }
.a11y-panel__foot { display: flex; justify-content: space-between; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.a11y-panel__foot button { background: none; border: 0; color: var(--blue-600); font-weight: 600; padding: 0; text-decoration: underline; text-underline-offset: .2em; }

/* Hindi availability notice */
.lang-notice { background: var(--blue-50); color: var(--blue-900); font-size: var(--fs-sm); border-bottom: 1px solid var(--blue-100); }
.lang-notice .container { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; padding-block: .5rem; }
.lang-notice button { background: none; border: 0; color: inherit; font-weight: 600; text-decoration: underline; padding: .25rem; }

/* ==========================================================================
   03 · Home: the opening composition (message + India, on full-bleed blue)
        and the short gateway sections that follow it
   ========================================================================== */

/* ---------- Hero: edge to edge, deep institutional blue ---------- */
.hero { position: relative; overflow: hidden; background: var(--blue-900); color: #e7eefb; isolation: isolate; }
.hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(58% 82% at 74% 46%, rgba(59, 130, 196, .5) 0%, rgba(21, 87, 166, .28) 42%, rgba(7, 27, 77, 0) 74%),
    linear-gradient(104deg, #051639 0%, var(--blue-900) 42%, #0e3272 78%, #123e8a 100%);
}
.hero__bg::after { content: ""; position: absolute; inset: 0; background-image: var(--jaali-light); opacity: .05; }
.hero__inner { position: relative; z-index: 2; display: grid; align-items: center; padding-block: clamp(2.5rem, 6vh, 4.5rem) var(--s6); }
.hero__copy { max-width: 40rem; container-type: inline-size; }
.hero__org { display: flex; align-items: center; gap: var(--s3); font-weight: 700; color: #9cc3f0; font-size: 1rem; letter-spacing: .01em; margin-bottom: var(--s5); }
/* Three statements, one line each on wide screens: sized to the column (longest line ≈ 12.4em) */
.hero h1 { font-size: clamp(2.25rem, 7.9cqi, 4.125rem); line-height: 1.06; letter-spacing: -.03em; color: #fff; font-weight: 800; }
.hero h1 span { display: block; }
.hero h1:lang(hi) { line-height: 1.3; letter-spacing: 0; font-weight: 700; font-size: clamp(2rem, 6.4cqi, 3.5rem); }
.hero__lead { margin-top: var(--s5); font-size: clamp(1.0625rem, .95rem + .35vw, 1.25rem); line-height: 1.55; color: #cfdcf2; max-width: 31rem; }
.hero .btn-row { margin-top: var(--s6); }
.hero__pillars { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 0; margin-top: var(--s7); font-size: .875rem; font-weight: 600; color: #bed3ee; }
.hero__pillars li { padding-inline: .9rem; border-left: 1px solid rgba(255, 255, 255, .28); line-height: 1.15; }
.hero__pillars li:first-child { padding-left: 0; border-left: 0; }

/* Text settles once on load, then never moves again */
.js .hero__copy > * { opacity: 0; transform: translateY(10px); animation: settle .8s var(--ease) forwards; }
.js .hero__copy > :nth-child(2) { animation-delay: .08s; }
.js .hero__copy > :nth-child(3) { animation-delay: .16s; }
.js .hero__copy > :nth-child(4) { animation-delay: .24s; }
.js .hero__copy > :nth-child(5) { animation-delay: .32s; }
@keyframes settle { to { opacity: 1; transform: none; } }

/* The map: on phones and tablets it follows the text; on desktop it fills the right of the hero */
.hero__visual { position: relative; padding: 0 var(--gutter) var(--s7); }
.hero-stage { position: relative; width: 100%; max-width: 36rem; margin-inline: auto; }
@media (max-width: 639px) { /* phones: let the map run a little wider than the text column */
  .hero-stage { width: 116%; margin-left: -8%; max-width: none; }
}
.hero-map { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
.hero__credit { font-size: .6875rem; color: rgba(255, 255, 255, .55); text-align: center; margin-top: var(--s3); }

@media (min-width: 1024px) {
  .hero__inner { min-height: clamp(38rem, calc(100svh - var(--header-h) - 2.25rem), 58rem); }
  .hero__copy { width: 50%; }
  .hero__visual { position: absolute; inset: 0; padding: 0; z-index: 1; }
  .hero-stage {
    position: absolute; top: 50%; transform: translateY(-50%); max-width: none; margin: 0;
    height: min(94%, 58rem); width: auto; aspect-ratio: 1;
    right: max(1vw, calc((100vw - 80rem) / 2 - 4rem));
  }
  .hero-map { position: absolute; inset: 0; height: 100%; }
  .hero__credit { position: absolute; right: var(--gutter); bottom: .75rem; margin: 0; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero-stage { height: 78%; right: 0; }
}

/* Map drawing — lifted off the dark ground */
.hm-grid { fill: none; stroke: #fff; stroke-width: .6; opacity: .1; }
.hm-land { transform-box: fill-box; transform-origin: 50% 50%; }
.hm-glow { opacity: .3; }
.hm-link { fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; opacity: .72; }
.hm-node { fill: #fff; }
.hm-ring { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.hm-hub { fill: #fff; }
.hm-hub-ring { fill: none; stroke: var(--saffron); stroke-width: 2; }
.hm-pulse { fill: none; stroke: #fff; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hm-label { fill: #fff; font: 700 11px var(--font-sans); letter-spacing: .02em; }
.hm-sweep { opacity: 0; }

/* Orchestration: set by JS only when motion is allowed */
.hero__visual.is-armed .hm-land { opacity: 0; transform: scale(.975); }
.hero__visual.is-armed .hm-node, .hero__visual.is-armed .hm-ring, .hero__visual.is-armed .hm-hub-g { opacity: 0; }
.hero__visual.is-armed .hm-link { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero__visual.is-playing .hm-land { animation: hmIn .9s cubic-bezier(.22, .61, .36, 1) forwards; }
.hero__visual.is-playing .hm-node, .hero__visual.is-playing .hm-ring { animation: hmFade .45s var(--ease) forwards; animation-delay: calc(.75s + var(--i) * .12s); }
.hero__visual.is-playing .hm-hub-g { animation: hmFade .6s var(--ease) .6s forwards; }
.hero__visual.is-playing .hm-link { stroke-dasharray: 1; animation: hmDraw 1s var(--ease) forwards; animation-delay: calc(1.3s + var(--i) * .1s); }
.hero__visual.is-playing .hm-sweep { animation: hmSweep 1.8s ease-in-out 2.4s 1 forwards; }
/* Idle: almost still — a slow glow and an occasional pulse */
.hero__visual.is-settled .hm-pulse { animation: hmPulse 4.8s ease-out infinite; }
.hero__visual.is-settled .hm-glow { animation: hmBreathe 7s ease-in-out infinite alternate; }
.hero__visual.is-settled .hm-ping { animation: hmPing 7s ease-out 1.5s infinite; }
.hero__visual.is-offscreen * { animation-play-state: paused !important; }

@keyframes hmIn { to { opacity: 1; transform: none; } }
@keyframes hmFade { to { opacity: 1; } }
@keyframes hmDraw { to { stroke-dashoffset: 0; } }
@keyframes hmSweep { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(680px); } }
@keyframes hmPulse { 0% { opacity: .8; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(3); } }
@keyframes hmBreathe { from { opacity: .24; } to { opacity: .38; } }
@keyframes hmPing { 0% { opacity: 1; transform: scale(1); } 14% { opacity: 0; transform: scale(2.6); } 100% { opacity: 0; transform: scale(2.6); } }

/* ---------- GEF at a glance ---------- */
.glance { background: #fff; border-bottom: 1px solid var(--line); }
.glance__inner { display: grid; gap: var(--s4); padding-block: var(--s6); align-items: center; }
.glance__title { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; }
.glance__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) 0; margin: 0; }
.glance__stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .15rem; padding-inline: var(--s5); border-left: 1px solid var(--line); }
.glance__stats div:nth-child(odd) { border-left: 0; padding-left: 0; }
.glance__stats dd { margin: 0; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--blue-800); font-variant-numeric: tabular-nums; }
.glance__stats dt { font-size: var(--fs-sm); color: var(--ink-3); }
@media (min-width: 900px) {
  .glance__inner { grid-template-columns: 9rem 1fr; }
  .glance__stats { grid-template-columns: repeat(4, 1fr); }
  .glance__stats div:nth-child(odd) { border-left: 1px solid var(--line); padding-left: var(--s5); }
}

/* ---------- Who we are ---------- */
.home-who__grid { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 960px) { .home-who__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); } }
.home-who__media { margin: 0; }
.home-who__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
.home-who__text h2 { margin-top: var(--s4); }
.home-who__lead { margin-top: var(--s4); font-size: var(--fs-md); line-height: 1.6; color: var(--ink-2); }
.home-who__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s5); margin: var(--s6) 0; padding-block: var(--s4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home-who__facts dt { font-size: var(--fs-xs); color: var(--ink-3); }
.home-who__facts dd { margin: 0; font-weight: 700; color: var(--blue-800); line-height: 1.3; }
@media (max-width: 479px) { .home-who__facts { grid-template-columns: 1fr 1fr; } }

/* ---------- What we do: six plain links, no cards ---------- */
.do-list { list-style: none; display: grid; border-top: 1px solid var(--line-2); }
@media (min-width: 720px) { .do-list { grid-template-columns: 1fr 1fr; column-gap: var(--s7); } }
@media (min-width: 1100px) { .do-list { grid-template-columns: repeat(3, 1fr); } }
.do-list a {
  display: grid; grid-template-columns: 2.75rem 1fr auto; gap: var(--s4); align-items: center;
  padding: var(--s5) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); height: 100%;
}
.do-list a > svg:first-child { width: 2.75rem; height: 2.75rem; padding: .6rem; color: var(--blue-600); background: #fff; border: 1px solid var(--blue-100); border-radius: var(--r); }
.do-list strong { display: block; font-size: 1.125rem; color: var(--blue-900); line-height: 1.25; }
.do-list span span { display: block; font-size: var(--fs-sm); color: var(--ink-3); margin-top: .15rem; line-height: 1.45; }
.do-list .i-arrow { width: 1.1rem; height: 1.1rem; color: var(--blue-600); transition: transform var(--t); }
.do-list a:hover strong { color: var(--blue-600); }
.do-list a:hover .i-arrow { transform: translateX(4px); }

/* ---------- Our impact: photograph + deep-blue panel ---------- */
.home-impact { display: grid; background: var(--blue-900); }
@media (min-width: 960px) { .home-impact { grid-template-columns: 1fr 1fr; min-height: 34rem; } }
.home-impact__media { margin: 0; min-height: 18rem; }
.home-impact__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
.home-impact__panel { position: relative; padding: var(--s8) var(--gutter); color: #dfe7f5; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; overflow: hidden; }
.home-impact__panel::before { content: ""; position: absolute; inset: 0; background-image: var(--jaali-light); opacity: .05; }
.home-impact__panel > * { position: relative; }
@media (min-width: 960px) { .home-impact__panel { padding-inline: clamp(3rem, 6vw, 6rem); } }
.home-impact h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.2; color: #fff; margin-top: var(--s4); max-width: 16ch; }
.home-impact__stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s6); margin: var(--s6) 0 var(--s7); }
.home-impact__stats div { display: grid; gap: .2rem; }
.home-impact__stats dd { margin: 0; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.home-impact__stats dt { font-size: var(--fs-sm); color: #a9bde0; max-width: 11ch; line-height: 1.35; }
@media (max-width: 479px) { .home-impact__stats { grid-template-columns: 1fr 1fr; } }

/* ---------- Explore GEF: the gateway ---------- */
.explore__grid { list-style: none; display: grid; gap: var(--s4); }
@media (min-width: 640px) { .explore__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .explore__grid { grid-template-columns: repeat(3, 1fr); } }
.tile {
  position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: .4rem; height: 100%; min-height: 12rem;
  padding: var(--s6) var(--s5) var(--s5); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  color: var(--ink); text-decoration: none; overflow: hidden; transition: border-color var(--t), box-shadow var(--t);
}
.tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--blue-600); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.tile:hover, .tile:focus-visible { border-color: var(--blue-200); box-shadow: 0 16px 36px -26px rgba(7, 27, 77, .45); }
.tile:hover::before, .tile:focus-visible::before { transform: scaleX(1); }
.tile__icon { width: 2rem; height: 2rem; color: var(--blue-600); margin-bottom: var(--s3); }
.tile strong { font-size: 1.25rem; color: var(--blue-900); line-height: 1.25; }
.tile span { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; max-width: 30ch; }
.tile .i-arrow { position: absolute; right: var(--s5); bottom: var(--s5); width: 1.25rem; height: 1.25rem; color: var(--blue-600); transition: transform var(--t); }
.tile:hover .i-arrow { transform: translateX(4px); }

/* ---------- Chairman's message preview ---------- */
.home-chair__grid { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 900px) { .home-chair__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s8); } }
.home-chair__portrait { margin: 0; max-width: 20rem; }
.portrait-crop { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone-2); border-radius: var(--r-lg); border-top: 3px solid var(--blue-600); }
.portrait-crop img { /* head-and-shoulders crop of the published portrait, centred on the face */
  position: absolute; width: 238%; max-width: none; left: -109.5%; top: -42%;
}
.home-chair h2 { margin-top: var(--s4); }
.home-chair__quote { margin: var(--s5) 0; padding: 0; font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); line-height: 1.5; color: var(--blue-800); max-width: 34em; }
.chair__sign { display: grid; gap: 1px; margin-bottom: var(--s6); }
.chair__sign strong { color: var(--blue-900); font-size: 1.0625rem; }
.chair__sign span { color: var(--ink-3); font-size: var(--fs-sm); }

/* ---------- Be part of the change ---------- */
.cta-band { position: relative; background: linear-gradient(100deg, var(--blue-900) 0%, var(--blue-700) 100%); color: #dfe7f5; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background-image: var(--jaali-light); opacity: .05; }
.cta-band__inner { position: relative; display: grid; gap: var(--s5); padding-block: var(--s8); align-items: center; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1fr auto; gap: var(--s7); } }
.cta-band h2 { font-family: var(--font-serif); font-weight: 700; color: #fff; font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); }
.cta-band p { margin-top: var(--s2); max-width: 46ch; font-size: var(--fs-md); line-height: 1.55; }

/* ==========================================================================
   04 · About, Mission & Vision, Programmes, Human Rights, Events
   ========================================================================== */

@media (max-width: 799px) { .ledger__item--meta { grid-column: 1 / -1; border-left: 0 !important; } }

/* ---------- About ---------- */
.about { display: grid; gap: var(--s7); }
@media (min-width: 960px) { .about { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); align-items: start; } }
.about__media { position: relative; padding-bottom: var(--s7); }
.about__media img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--r-lg); }
.about__plate {
  position: absolute; right: -1px; bottom: 0; width: min(85%, 21rem); background: #fff; border: 1px solid var(--line);
  border-top: 3px solid var(--navy); border-radius: var(--r); padding: var(--s4) var(--s5); box-shadow: var(--shadow-2);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4);
}
.about__plate dt { font-size: var(--fs-xs); color: var(--ink-3); }
.about__plate dd { margin: 0; font-weight: 700; color: var(--navy); line-height: 1.3; }
.about__plate div:last-child { grid-column: 1 / -1; padding-top: var(--s3); border-top: 1px solid var(--line); }
.about__intro { font-size: var(--fs-md); line-height: 1.55; color: var(--ink-2); margin-top: var(--s4); max-width: 60ch; }
.about__grid { display: grid; gap: var(--s5) var(--s6); margin-top: var(--s6); }
@media (min-width: 640px) { .about__grid { grid-template-columns: 1fr 1fr; } }
.about__grid h3 { font-size: 1.0625rem; color: var(--navy); margin-bottom: var(--s2); display: flex; align-items: center; gap: .5rem; }
.about__grid h3 .icon { color: var(--saffron-text); width: 1.1rem; height: 1.1rem; }
.about__grid p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; }
.about .btn-row { margin-top: var(--s6); }

/* Journey timeline (a genuine sequence) */
.journey { margin-top: var(--s8); border-top: 1px solid var(--line); padding-top: var(--s6); }
.journey h3 { font-size: var(--fs-md); margin-bottom: var(--s5); }
.journey ol { list-style: none; display: grid; gap: var(--s5); }
@media (min-width: 800px) { .journey ol { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } }
.journey li { position: relative; padding-top: var(--s5); }
.journey li::before { content: ""; position: absolute; top: 0; left: 0; width: .7rem; height: .7rem; border-radius: 50%; background: #fff; border: 2px solid var(--navy); }
.journey li::after { content: ""; position: absolute; top: .33rem; left: 1rem; right: -1.25rem; height: 1px; background: var(--line-2); }
.journey li:last-child::after { display: none; }
.journey li:last-child::before { background: var(--saffron); border-color: var(--saffron); }
.journey time, .journey .journey__when { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--saffron-text); margin-bottom: .25rem; }
.journey strong { display: block; color: var(--ink); line-height: 1.3; margin-bottom: .35rem; }
.journey p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
@media (max-width: 799px) {
  .journey ol { padding-left: var(--s5); border-left: 1px solid var(--line-2); gap: var(--s5); }
  .journey li { padding-top: 0; }
  .journey li::before { left: calc(-1 * var(--s5) - .38rem); top: .3rem; }
  .journey li::after { display: none; }
}

/* ---------- Mission & Vision ---------- */
.mv { position: relative; overflow: hidden; }
.mv::before { content: ""; position: absolute; inset: 0; background-image: var(--jaali); opacity: .06; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 65%); mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 65%); pointer-events: none; }
.mv__pair { position: relative; display: grid; gap: var(--s7); }
@media (min-width: 900px) { .mv__pair { grid-template-columns: 1fr auto 1fr; gap: var(--s7); } }
.mv__divider { display: none; }
@media (min-width: 900px) {
  .mv__divider { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
  .mv__divider::before, .mv__divider::after { content: ""; width: 1px; flex: 1; background: var(--line-2); }
  .mv__divider svg { width: 1.75rem; height: 1.75rem; color: var(--saffron); }
}
.mv__block h2 { font-size: var(--fs-sm); font-weight: 700; color: var(--saffron-text); letter-spacing: .02em; display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.mv__block .mv__statement { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.625rem, 1.1rem + 1.7vw, 2.375rem); line-height: 1.22; color: var(--navy); letter-spacing: -.015em; margin-bottom: var(--s5); text-wrap: balance; }
.mv__block p { color: var(--ink-2); line-height: 1.75; max-width: 58ch; }

.pillars { margin-top: var(--s8); }
.pillars__title { font-size: var(--fs-lg); margin-bottom: var(--s2); }
.pillars__lead { color: var(--ink-2); max-width: 64ch; margin-bottom: var(--s6); }
.pillars ul { list-style: none; display: grid; gap: 0; border-top: 2px solid var(--navy); }
@media (min-width: 640px) { .pillars ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pillars ul { grid-template-columns: repeat(4, 1fr); } }
.pillars li { padding: var(--s5) var(--s5) var(--s5) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .pillars li { padding-inline: var(--s5); border-left: 1px solid var(--line); } .pillars li:nth-child(2n+1) { border-left: 0; padding-left: 0; } }
@media (min-width: 1100px) { .pillars li:nth-child(n) { border-left: 1px solid var(--line); padding-left: var(--s5); } .pillars li:first-child { border-left: 0; padding-left: 0; } }
.pillars svg { width: 2rem; height: 2rem; color: var(--navy); margin-bottom: var(--s3); }
.pillars h3 { font-size: 1.125rem; margin-bottom: var(--s2); }
.pillars p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }
.pillars p + p { margin-top: var(--s2); color: var(--ink-3); }

/* ---------- Programmes ---------- */
.prog-grid { display: grid; gap: var(--s5); list-style: none; }
@media (min-width: 640px) { .prog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .prog-grid { grid-template-columns: repeat(3, 1fr); } }
.prog-card {
  position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.prog-card:hover, .prog-card:focus-within { border-color: var(--navy); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.prog-card__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--stone-2); }
.prog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.prog-card:hover .prog-card__img img { transform: scale(1.04); }
.prog-card__body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.prog-card__body p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; flex: 1; }
.prog-card__body .tag { align-self: flex-start; }
.prog-card h3 a { color: var(--ink); text-decoration: none; }
.prog-card h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card is the target */
.prog-card .link { position: relative; z-index: 1; align-self: flex-start; pointer-events: none; }
.prog-card:hover .link { background-size: 100% 1.5px; }
.prog-card:hover .link .i-arrow { transform: translateX(3px); }

.audience { margin-top: var(--s8); display: grid; gap: var(--s5); }
@media (min-width: 960px) { .audience { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--s7); align-items: start; } }
.audience h3 { font-size: var(--fs-lg); }
.audience > div > p { color: var(--ink-2); margin-top: var(--s2); font-size: var(--fs-sm); }
.audience ul { list-style: none; display: grid; gap: var(--s3); }
@media (min-width: 640px) { .audience ul { grid-template-columns: 1fr 1fr; } }
.audience li { display: flex; gap: var(--s3); padding: var(--s4); background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.audience li svg { width: 1.75rem; height: 1.75rem; color: var(--navy); flex: none; }
.audience li strong { display: block; line-height: 1.3; }
.audience li span { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }

/* Programme catalogue */
.catalogue { margin-top: var(--s8); padding-top: var(--s7); border-top: 1px solid var(--line); scroll-margin-top: 5rem; }
.catalogue__head { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
@media (min-width: 960px) { .catalogue__head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); align-items: end; } }
.catalogue__head h3 { font-size: var(--fs-xl); }
.catalogue__head p { color: var(--ink-2); }
.fee-note { display: flex; gap: var(--s3); align-items: flex-start; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green); padding: var(--s4) var(--s5); border-radius: var(--r); margin-bottom: var(--s5); font-size: var(--fs-sm); color: var(--ink-2); }
.fee-note svg { width: 1.25rem; height: 1.25rem; color: var(--green); flex: none; margin-top: 2px; }
.fee-note strong { color: var(--ink); }
.cat-list { list-style: none; border-top: 1px solid var(--line-2); }
.cat-item { display: grid; gap: var(--s2) var(--s5); padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.cat-item[hidden] { display: none; }
@media (min-width: 800px) { .cat-item { grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 15rem); align-items: start; } }
.cat-item h4 { font-size: 1.125rem; line-height: 1.3; margin-bottom: .3rem; }
.cat-item p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; }
.cat-item ul { list-style: none; display: grid; gap: .3rem; font-size: var(--fs-sm); color: var(--ink-2); }
.cat-item ul li { display: flex; gap: .45rem; align-items: baseline; }
.cat-item ul li::before { content: ""; width: 5px; height: 5px; background: var(--saffron); transform: rotate(45deg) translateY(-2px); flex: none; }
.cat-empty { padding: var(--s6) 0; color: var(--ink-2); }

.model { margin-top: var(--s7); background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: var(--s6) var(--s5); }
@media (min-width: 800px) { .model { padding: var(--s6); } }
.model h3 { font-size: var(--fs-lg); }
.model > p { color: var(--ink-2); margin-top: var(--s2); max-width: 62ch; }
.model ol { list-style: none; display: grid; gap: var(--s4); margin-top: var(--s5); counter-reset: phase; }
@media (min-width: 800px) { .model ol { grid-template-columns: repeat(3, 1fr) auto; align-items: stretch; gap: 0; } }
.model li { counter-increment: phase; position: relative; padding: var(--s4) var(--s5); border: 1px solid var(--line); background: var(--stone); }
@media (min-width: 800px) {
  .model li { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); padding-inline: var(--s6); border: 0; }
  .model li:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
  .model li + li { margin-left: -6px; }
}
.model li::before { content: "Phase " counter(phase); display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--saffron-text); }
.model li strong { font-size: 1.125rem; color: var(--navy); }
.model li.model__outcome { background: var(--navy); color: #fff; clip-path: none; margin-left: var(--s3); display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: var(--fs-sm); }
.model li.model__outcome::before { display: none; }
.model li.model__outcome svg { width: 1.2rem; height: 1.2rem; color: var(--saffron-soft); }
@media (max-width: 799px) { .model li.model__outcome { margin-left: 0; } }

/* ---------- Human Rights (navy) ---------- */
.hr { display: grid; gap: var(--s7); }
@media (min-width: 1024px) { .hr { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; } }
.hr__media { position: relative; }
@media (min-width: 1024px) { .hr__media { position: sticky; top: 5rem; } }
.hr__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); }
.hr__media figcaption { margin-top: var(--s3); font-size: var(--fs-xs); color: #aab0dc; }
.hr__quote { position: absolute; left: var(--s4); right: var(--s4); bottom: calc(var(--s4) + 1.8rem); background: rgba(12, 17, 64, .88); border-left: 3px solid var(--saffron); padding: var(--s4) var(--s5); font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.55; color: #fff; backdrop-filter: blur(2px); }
.hr h2 { font-size: var(--fs-xl); max-width: 18ch; }
.hr h2 span { display: block; }
.hr__text p { color: #d3d7f0; line-height: 1.75; margin-top: var(--s4); max-width: 62ch; }
.rights { margin-top: var(--s6); }
.rights h3 { font-size: var(--fs-sm); color: #aab0dc; font-weight: 600; margin-bottom: var(--s3); }
.rights ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(255, 255, 255, .16); }
@media (min-width: 640px) { .rights ul { grid-template-columns: repeat(3, 1fr); } }
.rights li { display: flex; align-items: center; gap: .65rem; padding: .8rem .25rem; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #fff; font-weight: 500; transition: background var(--t), padding var(--t); }
.rights li:hover { background: rgba(255, 255, 255, .05); padding-left: .6rem; }
.rights li::before { content: ""; width: 7px; height: 7px; background: var(--saffron); transform: rotate(45deg); flex: none; }
.triad { list-style: none; display: grid; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 720px) { .triad { grid-template-columns: repeat(3, 1fr); } }
.triad li { padding: var(--s5); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r); }
.triad strong { display: block; color: #fff; font-size: 1.125rem; margin-bottom: .35rem; }
.triad p { margin: 0 !important; font-size: var(--fs-sm) !important; color: #c3c8ea !important; line-height: 1.6 !important; }
.hr .btn-row { margin-top: var(--s6); }

/* ---------- Events ---------- */
.feature-event { display: grid; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 900px) { .feature-event { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.feature-event__img { position: relative; background: var(--navy-deep); display: grid; place-items: center; padding: var(--s7) var(--s5); overflow: hidden; }
.feature-event__img::before { content: ""; position: absolute; inset: 0; background-image: var(--jaali-light); opacity: .07; }
.fe-panel { position: relative; display: grid; justify-items: center; gap: var(--s3); text-align: center; color: #fff; }
.fe-panel__emblem { width: 5.5rem; aspect-ratio: 893 / 840; object-fit: cover; object-position: top; background: #fff; border-radius: 50%; padding: .55rem; box-shadow: 0 0 0 4px rgba(232, 135, 30, .55); }
.fe-panel__kicker { font-size: var(--fs-sm); color: #c3c8ea; font-weight: 600; margin-top: var(--s2); }
.fe-panel__title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.15; }
.fe-panel__date { font-weight: 600; color: var(--saffron-soft); }
.feature-event__body { padding: var(--s6) var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
@media (min-width: 900px) { .feature-event__body { padding: var(--s7); } }
.feature-event__tags { display: flex; gap: var(--s2); flex-wrap: wrap; }
.feature-event h3 { font-size: var(--fs-xl); }
.feature-event__body .feature-event__sub { font-family: var(--font-serif); color: var(--navy); font-size: 1.125rem; line-height: 1.5; }
.feature-event__body > p { color: var(--ink-2); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0; border-top: 1px solid var(--line); margin: var(--s2) 0; }
.facts div { padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: var(--fs-xs); color: var(--ink-3); }
.facts dd { margin: 0; font-weight: 600; line-height: 1.35; }

.calendar { margin-top: var(--s7); }
.calendar__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.calendar__head h3 { font-size: var(--fs-lg); }
.calendar__head .filters { margin: 0; }
.cal-list { list-style: none; border-top: 2px solid var(--navy); background: #fff; }
.cal-item { border-bottom: 1px solid var(--line); }
.cal-item[hidden] { display: none; }
.cal-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s4); padding: var(--s5) var(--s4); align-items: start; }
@media (min-width: 800px) { .cal-row { grid-template-columns: 5.5rem 9rem minmax(0, 1fr) auto; gap: var(--s5); align-items: center; padding-inline: var(--s5); } }
.cal-date { text-align: center; border: 1px solid var(--line); border-top: 3px solid var(--saffron); border-radius: var(--r-sm); padding: .35rem .25rem; line-height: 1.1; background: #fff; }
.cal-date b { display: block; font-size: 1.5rem; color: var(--navy); }
.cal-date span { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.cal-date--open b { font-size: .9375rem; padding-top: .2rem; }
.cal-date--past { border-top-color: var(--line-2); }
.cal-cat { display: none; }
@media (min-width: 800px) { .cal-cat { display: block; } }
.cal-main h4 { font-size: 1.0625rem; line-height: 1.35; }
.cal-main p { font-size: var(--fs-sm); color: var(--ink-2); margin-top: .25rem; }
.cal-main .cal-where { display: inline-flex; gap: .35rem; align-items: center; font-size: var(--fs-xs); color: var(--ink-3); margin-top: .4rem; }
.cal-main .cal-where svg { width: .9rem; height: .9rem; }
.cal-main .tag { margin-bottom: .4rem; }
@media (min-width: 800px) { .cal-main .tag { display: none; } }
.cal-toggle { grid-column: 2; justify-self: start; background: none; border: 1px solid var(--line-2); border-radius: var(--r); padding: .45rem .8rem; font-weight: 600; font-size: var(--fs-sm); color: var(--navy); display: inline-flex; gap: .4rem; align-items: center; transition: background var(--t), border-color var(--t); }
@media (min-width: 800px) { .cal-toggle { grid-column: auto; } }
.cal-toggle:hover { border-color: var(--navy); background: var(--navy-tint); }
.cal-toggle .chev { width: .85rem; height: .85rem; transition: transform var(--t); }
.cal-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.cal-detail { padding: 0 var(--s4) var(--s5) calc(4.5rem + var(--s4) * 2); color: var(--ink-2); font-size: var(--fs-sm); }
@media (min-width: 800px) { .cal-detail { padding-left: calc(5.5rem + 9rem + var(--s5) * 3); padding-right: var(--s5); } }
.cal-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem var(--s4); margin: 0 0 var(--s3); }
.cal-detail dt { color: var(--ink-3); }
.cal-detail dd { margin: 0; color: var(--ink); font-weight: 500; }
.calendar__note { font-size: var(--fs-sm); color: var(--ink-3); margin-top: var(--s4); }

/* ==========================================================================
   05 · Gallery, Impact, Inclusion, Committee, News, Resources, Volunteer,
        Contact, Footer
   ========================================================================== */

/* ---------- Gallery ---------- */
.gallery { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 9.5rem; grid-auto-flow: dense; gap: var(--s2); }
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 11rem; gap: var(--s3); } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(5, 1fr); grid-auto-rows: 12rem; } }
.gallery li[hidden] { display: none; }
.gallery li.is-wide { grid-column: span 2; }
.gallery li.is-tall { grid-row: span 2; }
.gallery button { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; background: var(--stone-2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gallery button:hover img, .gallery button:focus-visible img { transform: scale(1.045); }
.gallery button span {
  position: absolute; inset: auto 0 0; padding: 2rem .75rem .6rem; text-align: left; color: #fff; font-size: var(--fs-xs); font-weight: 600; line-height: 1.3;
  background: linear-gradient(transparent, rgba(12, 17, 64, .82)); opacity: 0; transform: translateY(6px); transition: opacity var(--t), transform var(--t);
}
.gallery button:hover span, .gallery button:focus-visible span { opacity: 1; transform: none; }
@media (hover: none) { .gallery button span { opacity: 1; transform: none; } }
.gallery__count { font-size: var(--fs-sm); color: var(--ink-3); margin-top: var(--s4); }

/* Lightbox (native <dialog>) */
.lightbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 11, 40, .96); color: #fff; }
.lightbox::backdrop { background: rgba(8, 11, 40, .7); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: var(--s3) var(--s4); font-size: var(--fs-sm); color: #c3c8ea; }
.lightbox__stage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3); padding: 0 var(--s3); min-height: 0; }
.lightbox__stage figure { margin: 0; display: grid; place-items: center; min-height: 0; height: 100%; }
.lightbox__stage img { max-width: 100%; max-height: calc(100vh - 11rem); object-fit: contain; border-radius: var(--r-sm); }
.lightbox__cap { padding: var(--s3) var(--s4) var(--s5); text-align: center; }
.lightbox__cap strong { display: block; font-size: 1.0625rem; }
.lightbox__cap span { color: #b8bee6; font-size: var(--fs-sm); }
.lb-btn { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25); color: #fff; border-radius: var(--r); width: 2.75rem; height: 2.75rem; display: inline-grid; place-items: center; }
.lb-btn:hover { background: rgba(255, 255, 255, .18); }
.lb-btn svg { width: 1.25rem; height: 1.25rem; }
@media (max-width: 599px) { .lightbox__stage { grid-template-columns: 1fr; } .lightbox__stage .lb-prev, .lightbox__stage .lb-next { position: absolute; bottom: 5.5rem; } .lb-prev { left: var(--s4); } .lb-next { right: var(--s4); } }

/* ---------- Impact (people, drawn as people) ---------- */
.impact { display: grid; gap: var(--s7); }
@media (min-width: 1024px) { .impact { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s8); align-items: start; } }
.impact__statement { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); line-height: 1.2; color: #fff; letter-spacing: -.01em; }
.impact__text { color: #c9cde8; margin-top: var(--s5); line-height: 1.7; max-width: 44ch; }
.impact__rows { list-style: none; display: grid; gap: var(--s5); }
.impact-row { display: grid; gap: var(--s2); padding-bottom: var(--s5); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.impact-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.impact-row__num { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.impact-row__label { color: #c9cde8; font-size: var(--fs-sm); text-align: right; }
.units { display: flex; flex-wrap: wrap; gap: 3px; }
.units i { width: 7px; height: 7px; border-radius: 50%; background: var(--saffron-soft); opacity: .9; transform: scale(0); transition: transform .35s var(--ease); transition-delay: calc(var(--k) * 6ms); }
.units.is-in i { transform: none; }
.impact-row--events .units i { border-radius: 1px; background: #9aa4ea; }
.impact__key { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--fs-xs); color: #aab0dc; margin-top: var(--s2); }
.impact__key span { display: inline-flex; align-items: center; gap: .45rem; }
.impact__key i { width: 7px; height: 7px; border-radius: 50%; background: var(--saffron-soft); }
.impact__key i.sq { border-radius: 1px; background: #9aa4ea; }
.impact__table { margin-top: var(--s4); }
.impact__table summary { cursor: pointer; font-size: var(--fs-sm); color: #fff; font-weight: 600; }
.impact__table table { margin-top: var(--s3); border-collapse: collapse; width: 100%; font-size: var(--fs-sm); color: #dfe3fb; }
.impact__table th, .impact__table td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.impact__table td:last-child, .impact__table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Inclusion ---------- */
.incl { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 1024px) { .incl { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); } }
.incl__art { position: relative; aspect-ratio: 1 / 1; max-width: 34rem; width: 100%; margin-inline: auto; }
/* Photos sit in a column to the west of the map so no part of the outline is hidden */
.incl__art svg { position: absolute; top: 0; left: 20%; width: 80%; height: 100%; }
.incl__art .incl-dots { opacity: .9; }
.incl__art figure { position: absolute; margin: 0; border: 5px solid #fff; border-radius: var(--r); box-shadow: var(--shadow-2); overflow: hidden; }
.incl__art figure img { width: 100%; height: 100%; object-fit: cover; }
.incl__art .f1 { left: 0; top: 56%; width: 30%; aspect-ratio: 1; }
.incl__art .f2 { left: 0; top: 8%; width: 33%; aspect-ratio: 4 / 3; }
.incl ul.incl__points { list-style: none; display: grid; gap: var(--s4); margin-top: var(--s6); }
.incl__points li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s3); }
.incl__points svg { width: 2rem; height: 2rem; color: var(--navy); }
.incl__points strong { display: block; line-height: 1.3; margin-bottom: .2rem; }
.incl__points p { font-size: var(--fs-sm); color: var(--ink-2); }
.incl__lead { color: var(--ink-2); font-size: var(--fs-md); line-height: 1.6; margin-top: var(--s4); }

.objectives { margin-top: var(--s8); border-top: 1px solid var(--line); padding-top: var(--s7); }
.objectives__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s4); margin-bottom: var(--s5); }
.objectives__head h3 { font-size: var(--fs-xl); }
.objectives__head p { color: var(--ink-2); margin-top: var(--s2); max-width: 56ch; }
.objectives ol { list-style: none; counter-reset: obj; display: grid; gap: 0 var(--s7); }
@media (min-width: 900px) { .objectives ol { grid-template-columns: 1fr 1fr; } }
.objectives li { counter-increment: obj; display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; }
.objectives li::before { content: counter(obj, decimal-leading-zero); font-weight: 700; color: var(--saffron-text); font-variant-numeric: tabular-nums; }
.objectives li[hidden] { display: none; }
.objectives__more { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

/* ---------- Committee ---------- */
.lead-grid { display: grid; gap: var(--s5); margin-bottom: var(--s6); }
@media (min-width: 800px) { .lead-grid { grid-template-columns: 1fr 1fr; } }
.lead-card { display: grid; grid-template-columns: 8rem 1fr; gap: var(--s5); background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); align-items: center; }
@media (min-width: 1100px) { .lead-card { grid-template-columns: 10rem 1fr; } }
.lead-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--r-sm); background: var(--stone-2); }
.lead-card h3 { font-size: var(--fs-lg); }
.lead-card .role { color: var(--navy); font-weight: 600; margin-top: .25rem; line-height: 1.35; }
.lead-card .bio { color: var(--ink-3); font-size: var(--fs-sm); margin-top: .35rem; }
.lead-card .tri { margin-top: var(--s4); }
.member-grid { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
@media (min-width: 720px) { .member-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .member-grid { grid-template-columns: repeat(4, 1fr); } }
.member { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; height: 100%; transition: border-color var(--t); }
.member:hover { border-color: var(--line-2); }
.member[hidden] { display: none; }
.member img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 15%; background: var(--stone-2); }
.member div { padding: var(--s3) var(--s4) var(--s4); border-top: 3px solid var(--navy); }
.member h3 { font-size: 1rem; line-height: 1.3; }
.member .role { font-size: var(--fs-sm); color: var(--navy); font-weight: 500; line-height: 1.4; margin-top: .2rem; }
.member .bio { font-size: var(--fs-xs); color: var(--ink-3); margin-top: .25rem; line-height: 1.45; }
.committee__more { margin-top: var(--s6); display: flex; justify-content: center; }

/* ---------- News & notices ---------- */
.news { display: grid; gap: var(--s6); }
.news > * { min-width: 0; } /* keeps the scrolling filter row from widening the column on phones */
@media (min-width: 1024px) { .news { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s7); align-items: start; } }
.news-feature { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.news-feature .news-feature__band { position: relative; display: flex; align-items: center; gap: var(--s3); padding: var(--s6) var(--s5) var(--s5); background: var(--navy); color: #fff; font-weight: 600; font-size: var(--fs-sm); overflow: hidden; }
.news-feature__band::before { content: ""; position: absolute; inset: 0; background-image: var(--jaali-light); opacity: .07; }
.news-feature__band > * { position: relative; }
.news-feature div { padding: var(--s5); display: grid; gap: var(--s3); }
.news-feature h3 { font-size: var(--fs-lg); line-height: 1.25; }
.news-feature p { color: var(--ink-2); font-size: var(--fs-sm); }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); font-size: var(--fs-xs); color: var(--ink-3); }
.notice-board { border-top: 2px solid var(--navy); }
.notice-board .filters { margin: var(--s4) 0 var(--s2); }
.notice-list { list-style: none; }
.notice { display: grid; grid-template-columns: 4.25rem 1fr; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.notice[hidden] { display: none; }
.notice .cal-date { align-self: start; }
.notice .cal-date b { font-size: 1.25rem; }
.notice h3 { font-size: 1.0625rem; line-height: 1.35; margin: .35rem 0 .25rem; }
.notice p { font-size: var(--fs-sm); color: var(--ink-2); }
.news__more { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s4); }

/* ---------- Resources & FAQ ---------- */
.res-grid { list-style: none; display: grid; gap: var(--s4); }
@media (min-width: 640px) { .res-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .res-grid { grid-template-columns: repeat(3, 1fr); } }
.res { position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: var(--s4); padding: var(--s5); background: #fff; border: 1px solid var(--line); border-radius: var(--r); height: 100%; transition: border-color var(--t), box-shadow var(--t); }
.res:hover, .res:focus-within { border-color: var(--navy); box-shadow: var(--shadow-1); }
.res__type { width: 3rem; height: 3.6rem; display: grid; place-items: end center; padding-bottom: .4rem; font-size: .6875rem; font-weight: 700; color: #fff; background: var(--navy); clip-path: polygon(0 0, 70% 0, 100% 22%, 100% 100%, 0 100%); }
.res__type--web { background: var(--green); }
.res h3 { font-size: 1.0625rem; line-height: 1.35; }
.res h3 a { color: var(--ink); text-decoration: none; }
.res h3 a::after { content: ""; position: absolute; inset: 0; }
.res p { font-size: var(--fs-sm); color: var(--ink-2); margin-top: .2rem; }
.res__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin-top: var(--s3); font-size: var(--fs-xs); color: var(--ink-3); }
.res__action { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--navy); font-size: var(--fs-sm); }
.res__action svg { width: 1rem; height: 1rem; transition: transform var(--t); }
.res:hover .res__action svg { transform: translateY(2px); }
.res:hover .res__action--ext svg { transform: translate(2px, -2px); }

.faq { margin-top: var(--s8); display: grid; gap: var(--s5); }
@media (min-width: 960px) { .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s8); } }
.faq h3 { font-size: var(--fs-xl); }
.faq > div > p { color: var(--ink-2); margin-top: var(--s3); }
.faq__list { border-top: 1px solid var(--line-2); }
.faq__item h4 { margin: 0; }
.faq__item button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s4) 0; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 600; font-size: 1.0625rem; color: var(--ink); }
.faq__item button:hover { color: var(--navy); }
.faq__item button .plus { position: relative; width: 1rem; height: 1rem; flex: none; }
.faq__item button .plus::before, .faq__item button .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: currentColor; transition: transform var(--t); }
.faq__item button .plus::after { transform: rotate(90deg); }
.faq__item button[aria-expanded="true"] .plus::after { transform: rotate(0deg); }
.faq__panel { padding: var(--s3) 0 var(--s5); color: var(--ink-2); border-bottom: 1px solid var(--line); max-width: 66ch; }

/* ---------- Volunteer CTA ---------- */
.volunteer { position: relative; background: var(--navy-deep); color: #fff; overflow: hidden; }
.volunteer__bg { position: absolute; inset: 0; }
.volunteer__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: grayscale(.3); }
.volunteer__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy-deep) 30%, rgba(12, 17, 64, .6) 100%); }
.volunteer::before { content: ""; position: absolute; inset: 0; background-image: var(--jaali-light); opacity: .05; z-index: 1; }
.volunteer .container { position: relative; z-index: 2; }
.volunteer__grid { display: grid; gap: var(--s7); }
@media (min-width: 1024px) { .volunteer__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); align-items: center; } }
.volunteer h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.125rem, 1.3rem + 2.8vw, 3.375rem); line-height: 1.18; color: #fff; letter-spacing: -.01em; }
.volunteer__text { color: #d3d7f0; font-size: var(--fs-md); line-height: 1.6; margin-top: var(--s5); max-width: 50ch; }
.volunteer .btn-row { margin-top: var(--s6); }
.steps { list-style: none; counter-reset: st; display: grid; gap: 0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r); }
.steps li { counter-increment: st; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s3); padding: var(--s5); }
.steps li + li { border-top: 1px solid rgba(255, 255, 255, .12); }
.steps li::before { content: counter(st); width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid var(--saffron-soft); color: var(--saffron-soft); display: grid; place-items: center; font-weight: 700; }
.steps strong { display: block; color: #fff; }
.steps p { font-size: var(--fs-sm); color: #c3c8ea; margin-top: .15rem; }
.steps__title { font-size: var(--fs-sm); font-weight: 700; color: #fff; padding: var(--s4) var(--s5) 0; }

/* ---------- Contact ---------- */
.contact { display: grid; gap: var(--s7); }
@media (min-width: 1024px) { .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); align-items: start; } }
.office { border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; }
.office dl { margin: 0; }
.office dl > div { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.office dt { grid-column: 2; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.office dd { grid-column: 2; margin: 0; font-weight: 600; line-height: 1.45; }
.office dd a { color: var(--ink); text-decoration: none; }
.office dd a:hover { color: var(--navy); text-decoration: underline; }
.office .office__ic { grid-row: 1 / span 2; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: var(--r); background: var(--navy-tint); color: var(--navy); }
.office .office__ic svg { width: 1.1rem; height: 1.1rem; }
.office__wa { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.office__wa .btn { width: 100%; --btn-bg: #1f7a4a; --btn-bd: #1f7a4a; }
.office__wa .btn:hover { --btn-bg: #17603a; --btn-bd: #17603a; }
.map { position: relative; aspect-ratio: 16 / 10; background: var(--stone-2); }
.map iframe { width: 100%; height: 100%; border: 0; }
.map__load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s3); text-align: center; padding: var(--s5); background: var(--stone); }
.map__load::before { content: ""; position: absolute; inset: 0; background-image: var(--jaali); opacity: .1; }
.map__load > * { position: relative; }
.map__load p { font-size: var(--fs-sm); color: var(--ink-2); max-width: 32ch; }
.map__load p:first-child { background: #fff; padding: .35rem .75rem; border-radius: var(--r-sm); }
.map__note { font-size: var(--fs-xs); color: var(--ink-3); padding: var(--s3) var(--s5); }

.form { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--navy); border-radius: var(--r); padding: var(--s6) var(--s5); }
@media (min-width: 640px) { .form { padding: var(--s6); } }
.form h3 { font-size: var(--fs-lg); }
.form__req { font-size: var(--fs-sm); color: var(--ink-3); margin: var(--s2) 0 var(--s5); }
.form__grid { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .form__grid { grid-template-columns: 1fr 1fr; } .form__grid .full { grid-column: 1 / -1; } }
.field { display: grid; gap: .35rem; align-content: start; }
.field label { font-weight: 600; font-size: var(--fs-sm); }
.field label abbr { color: #b3261e; text-decoration: none; }
.field .hint { font-size: var(--fs-xs); color: var(--ink-3); }
.field input, .field select, .field textarea {
  width: 100%; border: 1.5px solid var(--line-2); border-radius: var(--r); background: #fff; padding: .7rem .8rem; font-size: 1rem; line-height: 1.4;
  transition: border-color var(--t), box-shadow var(--t);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(35, 45, 132, .18); }
.field [aria-invalid="true"] { border-color: #b3261e; }
.field__error { display: flex; gap: .35rem; align-items: center; color: #b3261e; font-size: var(--fs-sm); font-weight: 600; }
.field__error:empty { display: none; }
.field__error svg { width: 1rem; height: 1rem; flex: none; }
.form__summary { border: 2px solid #b3261e; border-radius: var(--r); padding: var(--s4); margin-bottom: var(--s5); background: #fdf3f2; }
.form__summary h4 { font-size: 1rem; color: #b3261e; }
.form__summary ul { margin-top: var(--s2); padding-left: 1.2rem; font-size: var(--fs-sm); }
.form__summary a { color: #8c1d18; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-top: var(--s5); }
.form__privacy { font-size: var(--fs-xs); color: var(--ink-3); max-width: 40ch; }
.form__success { border: 1px solid #b7dcc7; background: #eef7f2; border-left: 4px solid var(--green); border-radius: var(--r); padding: var(--s5); }
.form__success h4 { color: var(--green); font-size: 1.125rem; margin-bottom: var(--s2); }
.form__success p { font-size: var(--fs-sm); color: var(--ink-2); }
.form__success p + p { margin-top: var(--s2); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: #c3c8ea; position: relative; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--saffron) 0 33.33%, #fff 33.33% 66.66%, var(--green) 66.66%); }
.site-footer a { color: #dfe3fb; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__top { display: grid; gap: var(--s7); padding-block: var(--s8) var(--s7); }
@media (min-width: 720px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer__top { grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.4fr)); } }
.footer__brand .brand__emblem { width: 4.25rem; background: #fff; padding: 4px; border-radius: var(--r); }
.footer__brand .brand { color: #fff; }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__meta { color: #aab0dc; }
.footer__motto { font-family: var(--font-serif); color: var(--saffron-soft); margin-top: var(--s4); font-size: 1rem; }
.footer__about { margin-top: var(--s3); font-size: var(--fs-sm); line-height: 1.7; max-width: 40ch; }
.site-footer h2 { font-size: var(--fs-sm); color: #fff; margin-bottom: var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.footer__links { list-style: none; display: grid; gap: .55rem; font-size: var(--fs-sm); }
.footer__contact { list-style: none; display: grid; gap: var(--s3); font-size: var(--fs-sm); }
.footer__contact li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--s2); }
.footer__contact svg { width: 1.05rem; height: 1.05rem; margin-top: .2rem; color: var(--saffron-soft); }
.social { display: flex; gap: var(--s2); margin-top: var(--s5); }
.social a { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r); }
.social a:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }
.social svg { width: 1.1rem; height: 1.1rem; }
.footer__notice { border-top: 1px solid rgba(255, 255, 255, .14); padding-block: var(--s5); display: grid; gap: var(--s3); font-size: var(--fs-xs); line-height: 1.65; color: #aab0dc; }
@media (min-width: 900px) { .footer__notice { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
.footer__notice strong { color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .14); padding-block: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between; align-items: center; font-size: var(--fs-xs); }
.footer__bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.footer__bottom button { background: none; border: 0; padding: 0; color: #dfe3fb; font-size: inherit; }
.footer__bottom button:hover { color: #fff; text-decoration: underline; }
.sitemap { border-top: 1px solid rgba(255, 255, 255, .14); padding-block: var(--s5); font-size: var(--fs-sm); }
.sitemap[hidden] { display: none; }
.sitemap ul { list-style: none; columns: 2 12rem; gap: var(--s6); }
.sitemap li { padding-block: .25rem; break-inside: avoid; }

/* Generic modal (accessibility statement) */
.modal { border: 0; padding: 0; border-radius: var(--r-lg); width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); box-shadow: var(--shadow-2); color: var(--ink); }
.modal::backdrop { background: rgba(12, 17, 64, .55); }
.modal__inner { padding: var(--s6); display: grid; gap: var(--s4); }
.modal__head { display: flex; justify-content: space-between; align-items: start; gap: var(--s4); }
.modal h2 { font-size: var(--fs-lg); }
.modal ul { padding-left: 1.2rem; display: grid; gap: .4rem; color: var(--ink-2); }
.modal p { color: var(--ink-2); }

/* Back to top */
.to-top { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 60; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: var(--r); border: 1px solid var(--line-2); background: #fff; color: var(--navy); box-shadow: var(--shadow-2); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--t), transform var(--t); }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { width: 1.2rem; height: 1.2rem; }

@media print {
  .utility, .site-nav, .drawer, .hv, .to-top, .volunteer__bg, .map, .filters { display: none !important; }
  .section { padding-block: 1.5rem; }
  .section--navy, .ledger, .site-footer, .volunteer { background: #fff !important; color: #000 !important; }
}

/* ==========================================================================
   06 · Interior pages: page header, breadcrumb, on-page navigation,
        Chairman's message, and blue-system refinements to shared sections
   ========================================================================== */

html { scroll-padding-top: calc(var(--header-h) + 3.75rem); }
.btn--lg { min-height: 3.375rem; padding: .85rem 1.6rem; font-size: 1.0625rem; }
.section--pale { background: var(--blue-50); }
.section--stone { background: var(--blue-50); }

/* ---------- Page header ---------- */
.page-hero { position: relative; overflow: hidden; background: linear-gradient(90deg, #fff 0%, var(--blue-50) 60%, var(--blue-100) 100%); border-bottom: 1px solid var(--line); }
.page-hero__map { position: absolute; right: max(-4rem, calc((100vw - 80rem) / 2 - 6rem)); top: -12%; height: 150%; width: auto; aspect-ratio: 492 / 520; fill: var(--blue-600); opacity: .09; pointer-events: none; }
.page-hero .container { position: relative; padding-block: clamp(2.25rem, 1.6rem + 2.4vw, 4rem); }
.page-hero h1 { font-size: clamp(2.125rem, 1.5rem + 2.2vw, 3.25rem); color: var(--blue-900); font-weight: 800; letter-spacing: -.025em; margin-top: var(--s3); max-width: 20ch; }
.page-hero__lead { margin-top: var(--s4); font-size: var(--fs-md); line-height: 1.55; color: var(--ink-2); max-width: 44rem; }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: var(--fs-sm); color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--line-2); }
.crumbs a { color: var(--blue-600); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-2); }

/* ---------- On-this-page navigation ---------- */
.subnav { position: sticky; top: var(--header-h); z-index: 40; background: #fff; border-bottom: 1px solid var(--line); }
.subnav ul { list-style: none; display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a {
  position: relative; display: inline-flex; align-items: center; min-height: 3.25rem; padding: 0 .9rem; white-space: nowrap;
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .9375rem;
}
.subnav a::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: -1px; height: 3px; background: var(--blue-600); transform: scaleX(0); transform-origin: left; transition: transform var(--t); }
.subnav a:hover { color: var(--blue-600); }
.subnav a[aria-current] { color: var(--blue-700); font-weight: 600; }
.subnav a[aria-current]::after, .subnav a:hover::after { transform: scaleX(1); }
.subnav li:first-child a { padding-left: 0; }
.subnav li:first-child a::after { left: 0; }

/* ---------- Chairman's message ---------- */
.chair { display: grid; gap: var(--s7); align-items: start; }
@media (min-width: 900px) { .chair { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s8); } }
.chair__portrait { margin: 0; max-width: 22rem; }
@media (min-width: 900px) { .chair__portrait { position: sticky; top: calc(var(--header-h) + 5rem); } }
/* sections that used to be nested now stand alone: drop their old top spacing and rule */
.section > .container > .objectives:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.chair__portrait figcaption { display: grid; gap: 1px; margin-top: var(--s3); }
.chair__portrait figcaption strong { color: var(--blue-900); }
.chair__portrait figcaption span { color: var(--ink-3); font-size: var(--fs-sm); }
.chair__body h2 { margin-top: var(--s4); }
.chair__message { position: relative; margin: var(--s5) 0 var(--s5); padding: 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.8; max-width: 44rem; }
.chair__message::before { content: "“"; position: absolute; left: -.1em; top: -.55em; font-family: var(--font-serif); font-size: 5rem; line-height: 1; color: var(--blue-100); z-index: -1; }
.chair__message p + p { margin-top: var(--s4); }
.chair__message p:first-child { font-size: 1.1875rem; color: var(--blue-900); }

/* ---------- Shared sections in the blue system ---------- */
.pillars { margin-top: 0; }
.section-head .tri, .page-hero .tri { margin-bottom: var(--s4); }
.ledger, .volunteer, .home-impact { --saffron-soft: #f6c68c; }
.section--navy { background: var(--blue-900); }
.impact-row__label, .impact__text, .section--navy .section-head__lead { color: #bccbe6; }
.units i { background: #9cc3f0; }
.impact-row--events .units i { background: #6fa3dd; }
.impact__key i { background: #9cc3f0; }
.impact__key i.sq { background: #6fa3dd; }
.rights li::before, .cat-item ul li::before { background: var(--blue-400); }
.hr__quote { border-left-color: var(--blue-400); background: rgba(7, 27, 77, .9); }
.volunteer { background: var(--blue-900); }
.volunteer__bg::after { background: linear-gradient(90deg, var(--blue-900) 30%, rgba(7, 27, 77, .6) 100%); }
.steps li::before { border-color: #9cc3f0; color: #9cc3f0; }
.site-footer { background: var(--blue-900); }
.fe-panel__emblem { box-shadow: 0 0 0 4px rgba(156, 195, 240, .55); }
.fe-panel__date { color: #9cc3f0; }
.cal-date { border-top-color: var(--blue-600); }
.cal-date--past { border-top-color: var(--line-2); }
.model li::before { color: var(--blue-600); }
.objectives li::before, .journey time, .journey .journey__when, .mv__block h2 { color: var(--blue-600); }
.journey li:last-child::before { background: var(--blue-600); border-color: var(--blue-600); }
.mv__divider svg { color: var(--blue-400); }
.fee-note { border-left-color: var(--blue-600); }
.fee-note svg { color: var(--blue-600); }
.tag--saffron { background: #fdf0e1; }
@media (max-width: 639px) { /* on phones the quote follows the photograph instead of covering it */
  .hr__quote { position: static; margin-top: var(--s3); backdrop-filter: none; }
}