/* ==========================================================================
   FOCUS — Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--primary);
  --btn-fg: #fff;
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.6em;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--tracking-snug);
  text-decoration: none;
  white-space: nowrap;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-border);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--navy-700); --btn-fg: #fff; }
.btn--primary:hover { --btn-bg: var(--navy-800); }

/* Yellow fill with navy text — 5.2:1, and the strongest CTA we have */
.btn--accent { --btn-bg: var(--gold-400); --btn-fg: var(--navy-900); }
.btn--accent:hover { --btn-bg: var(--gold-300); box-shadow: var(--shadow-gold); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--primary);
  --btn-border: var(--border-strong);
}
.btn--outline:hover { --btn-bg: var(--navy-50); --btn-border: var(--navy-300); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); }
.btn--ghost:hover { --btn-bg: var(--bg-muted); }

/* On dark grounds */
.on-dark .btn--outline,
.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.35);
}
.on-dark .btn--outline:hover,
.btn--outline-light:hover {
  --btn-bg: rgba(255, 255, 255, 0.10);
  --btn-border: rgba(255, 255, 255, 0.6);
  color: #fff;
}
.btn--white { --btn-bg: #fff; --btn-fg: var(--navy-800); }
.btn--white:hover { --btn-bg: var(--ink-100); }

.btn--lg { padding: 1.05em 2.1em; font-size: var(--step-1); }
.btn--sm { padding: 0.6em 1.15em; font-size: var(--step--1); }
.btn--block { display: flex; inline-size: 100%; }

.btn__icon { inline-size: 1.1em; block-size: 1.1em; flex: none; }
.btn:hover .btn__icon--arrow { transform: translateX(3px); }
.btn__icon--arrow { transition: transform var(--dur) var(--ease-out); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none;
}

/* Text link that behaves like a button target */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  text-decoration: none;
  color: var(--primary);
}
.link-arrow::after {
  content: "→";
  transition: transform var(--dur) var(--ease-out);
}
.link-arrow:hover::after { transform: translateX(4px); }
.on-dark .link-arrow { color: var(--gold-300); }

/* --------------------------------------------------------------------------
   Badges & pills
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.85em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--r-full);
  background: var(--navy-50);
  color: var(--navy-700);
  border: 1px solid var(--navy-100);
}
.badge--accent { background: var(--gold-100); color: var(--gold-800); border-color: var(--gold-200); }
.badge--glass {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--navy-200); }

.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-muted);
}
.card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.055); }

.card__media--tall { aspect-ratio: 4 / 5; }
.card__media--wide { aspect-ratio: 3 / 2; }

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  flex: 1;
}
.card__body--roomy { padding: var(--space-lg); }
.card__title { font-size: var(--step-2); }
.card__text { color: var(--text-muted); font-size: var(--step--1); line-height: var(--leading-relaxed); }
.card__footer { margin-top: auto; padding-top: var(--space-sm); }

/* Whole card is one click target, but the heading link stays the a11y anchor */
.card--link .card__title a { text-decoration: none; color: inherit; }
.card--link .card__title a::after { content: ""; position: absolute; inset: 0; }

/* Pillar card — the four ministry pillars on the homepage.
   Navy ground, gold rule, numeral watermark. */
.card--pillar {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  padding: var(--space-lg);
  min-block-size: 17rem;
  isolation: isolate;
}
.card--pillar::after {
  content: attr(data-index);
  position: absolute;
  inset-block-end: -0.28em;
  inset-inline-end: 0.1em;
  font-family: var(--font-display);
  font-size: 8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--navy-50);
  z-index: -1;
  pointer-events: none;
}
.card--pillar .card__title { color: var(--navy-800); }
.card--pillar .card__text { color: var(--text-muted); }
.card--pillar .card__icon {
  inline-size: 2.9rem; block-size: 2.9rem;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--gold-100);
  color: var(--gold-800);
  margin-bottom: var(--space-sm);
}
.card--pillar .card__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }

/* Program card — image with a gradient scrim and text laid over it */
.card--overlay { min-block-size: 24rem; justify-content: flex-end; border: none; }
.card--overlay img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out);
}
.card--overlay:hover img { transform: scale(1.06); }
.card--overlay::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(4, 23, 36, 0.94) 0%,
              rgba(4, 23, 36, 0.72) 34%,
              rgba(4, 23, 36, 0.12) 68%,
              rgba(4, 23, 36, 0.05) 100%);
}
.card--overlay .card__body { position: relative; z-index: 1; color: #fff; }
.card--overlay .card__title { color: #fff; }
.card--overlay .card__text { color: rgba(255, 255, 255, 0.82); }

/* Stat card */
.stat {
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.stat__value {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--primary);
}
.stat__label {
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
}
.on-dark .stat { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }
.on-dark .stat__value { color: var(--gold-400); }
.on-dark .stat__label { color: rgba(255, 255, 255, 0.68); }

/* --------------------------------------------------------------------------
   Header & navigation — modelled on ugandacmf.org
   A deep-navy top bar over a solid primary-blue header. White links, the
   current section marked by a soft light pill, and a white "Donate now" pill
   on the right. Dropdowns are white panels so their content stays readable.
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--navy-700);
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--step--2);
  font-weight: 500;
  /* a hairline of deeper gold where the yellow meets the blue header */
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}
.topbar__inner {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  padding-block: 0.45rem;
}
.topbar a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease-out); }
.topbar__item a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.topbar__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.topbar__item { display: inline-flex; align-items: center; gap: 0.45em; }
.topbar__item svg { inline-size: 0.95em; block-size: 0.95em; opacity: 0.75; }
.topbar :focus-visible { outline-color: var(--gold-400); }

/* Two pill links live up here by request: the season's highlight (gold, with
   a live dot; the 10K Campaign in 2026, set under Site settings, Top bar) and
   Staff Webmail (white). Same shape, so they read as a pair of destinations
   rather than more lines of contact detail. */
.topbar__pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-full);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(8, 35, 71, 0.18);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.topbar__pill:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(8, 35, 71, 0.22); }
.topbar__pill svg { inline-size: 0.85em; block-size: 0.85em; flex: none; }

.topbar__highlight { background: var(--gold-400); color: var(--navy-900) !important; }
.topbar__highlight:hover,
.topbar__highlight[aria-current="page"] { background: var(--gold-300); }
.topbar__highlight-dot {
  inline-size: 0.45rem; block-size: 0.45rem; border-radius: 50%;
  background: var(--navy-900);
  animation: highlight-pulse 2.2s var(--ease-out) infinite;
}
@keyframes highlight-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(8, 35, 71, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(8, 35, 71, 0); }
  100% { box-shadow: 0 0 0 0 rgba(8, 35, 71, 0); }
}

.topbar__mail { background: #fff; color: var(--navy-700) !important; }
.topbar__mail:hover { background: var(--navy-50); }

/* Narrower screens shed contact details (all of them are in the footer and
   on the contact page) so the two pills always sit on a single line. */
@media (max-width: 70rem) { .topbar__address { display: none; } }
@media (max-width: 50rem) { .topbar__email { display: none; } }
@media (max-width: 36rem) {
  .topbar__inner { justify-content: center; }
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: var(--surface);
  color: var(--text-heading);
  border-block-end: 1px solid var(--border);
  transition: box-shadow var(--dur) var(--ease-out);
}
.site-header.is-stuck { box-shadow: 0 8px 26px rgba(8, 35, 71, 0.12); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  min-block-size: var(--header-h);
}

/* The full name beside the mark and the slogan under it in sentence case,
   both set close to the symbol. The block may shrink, so where space is short
   the name wraps onto two lines instead of pushing the menu off the edge. */
.brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; flex: 0 1 auto; min-inline-size: 0; color: var(--text-heading); }
.brand img { block-size: 2.9rem; inline-size: auto; flex: none; }
.brand__text { display: grid; gap: 0.12rem; line-height: 1.15; min-inline-size: 0; justify-items: center; text-align: center; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.005em;
  color: var(--navy-700);
}
.brand__tag {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--text-subtle);
}

.nav { display: flex; align-items: center; gap: 0.2rem; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--navy-800);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.nav__link:hover,
.nav__item:hover > .nav__link,
.nav__link[aria-expanded="true"] { background: var(--navy-50); color: var(--primary); }
/* Current section: the soft light pill UCMF uses, with a gold keyline */
.nav__link[aria-current="page"],
.nav__link[aria-current="true"] {
  background: var(--navy-50);
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--gold-400);
}
.nav__caret { inline-size: 0.7em; block-size: 0.7em; opacity: 0.8; transition: transform var(--dur) var(--ease-out); }
.nav__item:hover .nav__caret,
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* ---- Dropdown panel ---------------------------------------------------- */
.nav__menu {
  position: absolute;
  inset-block-start: calc(100% + 0.7rem);
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: max-content;
  min-inline-size: 20rem;
  max-inline-size: 24rem;
  padding: 0.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 26px 56px rgba(8, 35, 71, 0.20), 0 4px 12px rgba(8, 35, 71, 0.08);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top center;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring), visibility var(--dur);
}
.nav__menu--mega {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 0.75rem;
  min-inline-size: 38rem;
  max-inline-size: 40rem;
  padding: 0.75rem;
}
.nav__menu::before { content: ""; position: absolute; inset-block-end: 100%; inset-inline: 0; block-size: 0.9rem; }
.nav__menu::after {
  content: ""; position: absolute; inset-block-start: -0.4rem; inset-inline-start: 50%;
  inline-size: 0.8rem; block-size: 0.8rem; translate: -50% 0; rotate: 45deg;
  background: var(--surface-raised);
  border-inline-start: 1px solid var(--border); border-block-start: 1px solid var(--border);
  border-start-start-radius: 3px;
}
/* Opens on hover for a mouse, and on aria-expanded for touch and keyboard.
   Not :focus-within — Escape returns focus to the toggle, and :focus-within
   would then hold the panel open, so Escape could never close it. */
.nav__item:hover > .nav__menu,
.nav__link[aria-expanded="true"] + .nav__menu {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}

.nav__col { display: grid; align-content: start; gap: 0.1rem; }
.nav__group {
  padding: 0.35rem 0.8rem 0.25rem;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--primary);
}
.nav__menu a {
  position: relative;
  display: grid; grid-template-columns: 2.2rem 1fr; align-items: start; gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  color: var(--text-heading);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__menu a::before {
  content: ""; position: absolute; inset-block: 0.45rem; inset-inline-start: 0;
  inline-size: 3px; border-radius: 3px; background: var(--accent);
  transform: scaleY(0); transition: transform var(--dur) var(--ease-spring);
}
.nav__menu a:hover,
.nav__menu a:focus-visible { background: var(--navy-50); color: var(--primary); }
.nav__menu a:hover::before,
.nav__menu a:focus-visible::before { transform: scaleY(1); }
.nav__menu a small {
  grid-column: 2; display: block; margin-top: 0.15rem;
  font-weight: 400; font-size: var(--step--2); line-height: 1.45; color: var(--text-subtle);
}
.nav__menu a i {
  grid-row: span 2; display: grid; place-items: center;
  inline-size: 2.2rem; block-size: 2.2rem; border-radius: var(--r-sm);
  background: var(--navy-50); color: var(--primary); font-style: normal;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.nav__menu a i svg { inline-size: 1.1rem; block-size: 1.1rem; }
.nav__menu a:hover i { background: var(--primary); color: #fff; }

.nav__menu-foot {
  grid-column: 1 / -1;
  margin-top: 0.35rem; padding: 0.7rem 0.8rem;
  border-block-start: 1px solid var(--border);
  font-size: var(--step--2); color: var(--text-subtle);
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.nav__menu .nav__menu-foot a { display: inline; padding: 0; font-size: var(--step--2); color: var(--primary); }
.nav__menu .nav__menu-foot a::before { content: none; }
.nav__menu .nav__menu-foot a:hover { background: transparent; text-decoration: underline; }

.header__actions { display: flex; align-items: center; gap: var(--space-2xs); flex: none; }

.icon-btn {
  display: grid; place-items: center;
  inline-size: 2.6rem; block-size: 2.6rem;
  border: 1px solid var(--border); border-radius: var(--r-full);
  background: transparent; color: var(--text); cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.icon-btn:hover { background: var(--bg-muted); border-color: var(--border-strong); }
.icon-btn svg { inline-size: 1.15rem; block-size: 1.15rem; }
/* The header is white now, so the menu button reads in navy. */
.icon-btn--on-blue { border-color: var(--border); color: var(--navy-700); }
.icon-btn--on-blue:hover { background: var(--navy-50); border-color: var(--navy-200, #B3CDEF); }

/* ---- Mobile drawer ----------------------------------------------------- */
.nav-toggle { display: none; }
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; }
.drawer[data-open="true"] { visibility: visible; }
.drawer__scrim {
  position: absolute; inset: 0; background: rgba(8, 35, 71, 0.55);
  backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.drawer[data-open="true"] .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  inline-size: min(24rem, 88vw);
  padding: var(--space-lg) var(--space-md) var(--space-2xl);
  background: var(--surface); box-shadow: var(--shadow-xl);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out);
}
.drawer[data-open="true"] .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.drawer__quick { display: grid; gap: 0.5rem; margin-bottom: var(--space-md); }
.drawer__agm {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: var(--r-md); background: var(--gold-100); color: var(--navy-800);
  font-weight: 700; text-decoration: none;
}
.drawer__mail { background: var(--navy-50); color: var(--navy-700); }
.drawer__nav { display: grid; gap: 0.1rem; }
.drawer__nav a {
  padding: 0.75rem 0.5rem; font-size: var(--step-0); font-weight: 500;
  text-decoration: none; color: var(--text-heading);
  border-radius: var(--r-sm); border-block-end: 1px solid var(--border);
}
.drawer__nav a:hover { background: var(--bg-muted); }
.drawer__group > summary {
  padding: 0.75rem 0.5rem; font-size: var(--step-0); font-weight: 600; cursor: pointer;
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  border-block-end: 1px solid var(--border); color: var(--text-heading);
}
.drawer__group > summary::-webkit-details-marker { display: none; }
.drawer__group > summary::after { content: "+"; font-size: 1.2em; color: var(--text-subtle); }
.drawer__group[open] > summary::after { content: "–"; }
.drawer__group .drawer__nav a { padding-inline-start: 1.25rem; font-size: var(--step--1); font-weight: 400; }

@media (max-width: 71.99rem) {
  .nav--main { display: none; }
  .nav-toggle { display: grid; }
}
/* The tagline needs ~17rem on one line; below 38rem it would push the menu
   button off-screen, so the header drops it (it is repeated in the footer). */
@media (max-width: 38rem) {
  .brand__tag { display: none; }
  .brand__name { font-size: 0.9rem; max-inline-size: 12rem; }
  .brand img { block-size: 2.5rem; }
}

/* --------------------------------------------------------------------------
   Hero — homepage carousel

   Five photographs, crossfaded, with nothing laid over them: no headline, no
   scrim. The only controls are small, and they sit in the lower corners where
   a photograph has least to say. Each slide carries one quiet pill linking to
   the part of the site that photograph is about.

   Sharpness: sources are 5000+ px and the largest variant served is 2880px,
   so the picture is never upscaled. There is deliberately no zoom or "Ken
   Burns" drift — a moving scale transform resamples every frame and softens
   the very detail the brief asked us to protect.
   -------------------------------------------------------------------------- */

.hero-carousel {
  position: relative;
  isolation: isolate;
  /* Fills the screen down to the fold: the viewport less the top bar and
     header (~8.4rem), so the corner buttons are always in view on arrival. */
  block-size: clamp(33rem, calc(100vh - 5.5rem), 66rem);
  block-size: clamp(33rem, calc(100svh - 5.5rem), 66rem);
  background: var(--navy-900);
  overflow: hidden;
}
@media (max-width: 47.99rem) {
  /* A tall portrait crop of a landscape event photo loses most of it. */
  .hero-carousel { block-size: auto; aspect-ratio: 4 / 4.4; }
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s var(--ease-in-out), visibility 1.1s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
/* The outgoing photo stays fully opaque underneath while the new one fades in
   on top, so the crossfade never dips through to the navy background. */
.hero-slide.is-leaving { opacity: 1; visibility: visible; z-index: 0; transition: none; }
.hero-slide img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* The per-slide link: small, frosted, bottom-left */
.hero-slide__cta {
  position: absolute;
  inset-block-end: clamp(1rem, 3vw, 2rem);
  inset-inline-start: clamp(1rem, 3vw, 2rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem 0.55rem 0.7rem;
  border-radius: var(--r-full);
  background: rgba(8, 35, 71, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px) saturate(1.3);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.7s var(--ease-out) 0.35s, opacity 0.7s var(--ease-out) 0.35s,
              background-color var(--dur) var(--ease-out);
}
.hero-slide.is-active .hero-slide__cta { transform: none; opacity: 1; }
.hero-slide__cta:hover { background: var(--navy-500); color: #fff; }
.hero-slide__cta-label { font-size: var(--step--2); font-weight: 500; opacity: 0.78; }
.hero-slide__cta-dot {
  inline-size: 1.6rem; block-size: 1.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold-400);
  color: var(--navy-900);
}
.hero-slide__cta-dot svg { inline-size: 0.85rem; block-size: 0.85rem; }

/* Controls: bottom-right */
.hero-controls {
  position: absolute;
  inset-block-end: clamp(1rem, 3vw, 2rem);
  inset-inline-end: clamp(1rem, 3vw, 2rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem;
  border-radius: var(--r-full);
  background: rgba(8, 35, 71, 0.45);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-controls button {
  display: grid; place-items: center;
  inline-size: 2.1rem; block-size: 2.1rem;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}
.hero-controls button:hover { background: rgba(255, 255, 255, 0.18); }
.hero-controls svg { inline-size: 1rem; block-size: 1rem; }
.hero-dots { display: flex; gap: 0.35rem; padding-inline: 0.25rem; }
.hero-dots button {
  inline-size: 0.55rem; block-size: 0.55rem;
  padding: 0;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.45);
  transition: inline-size var(--dur-slow) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.hero-dots button[aria-current="true"] { inline-size: 1.6rem; background: var(--gold-400); }
.hero-dots button:hover { background: #fff; }

/* Slim progress line along the bottom edge */
.hero-progress {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 3;
  block-size: 3px; background: rgba(255, 255, 255, 0.15);
}
.hero-progress span {
  display: block; block-size: 100%; inline-size: 0;
  background: var(--gold-400);
}
.hero-carousel.is-playing .hero-progress span { animation: hero-progress var(--hero-interval, 6s) linear forwards; }
@keyframes hero-progress { to { inline-size: 100%; } }

@media (max-width: 40rem) {
  .hero-slide__cta-label { display: none; }
  .hero-controls [data-hero-prev],
  .hero-controls [data-hero-next] { display: none; }
}

/* --------------------------------------------------------------------------
   Intro band — the words the carousel no longer carries
   -------------------------------------------------------------------------- */

.intro-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  background: var(--bg);
  border-block-end: 1px solid var(--border);
}
/* A fine dot grid, fading out from behind the figures */
.intro-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(14, 58, 115, 0.16) 1.2px, transparent 1.7px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 82% 50%, #000 15%, transparent 72%);
          mask-image: radial-gradient(ellipse 60% 75% at 82% 50%, #000 15%, transparent 72%);
}
.intro-band__decor { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.intro-band__orb { position: absolute; border-radius: 50%; }
.intro-band__orb--blue {
  inline-size: 38rem; block-size: 38rem; inset-inline-start: -16rem; inset-block-start: -18rem;
  background: radial-gradient(circle, rgba(26, 95, 180, 0.16) 0%, rgba(26, 95, 180, 0) 65%);
}
.intro-band__orb--gold {
  inline-size: 34rem; block-size: 34rem; inset-inline-end: -10rem; inset-block-end: -16rem;
  background: radial-gradient(circle, rgba(241, 186, 24, 0.28) 0%, rgba(241, 186, 24, 0) 65%);
}
.intro-band__cross {
  position: absolute; inline-size: clamp(7rem, 12vw, 11rem);
  inset-inline-start: -1.5rem; inset-block-end: -2.5rem;
  transform: rotate(-10deg);
  fill: none; stroke: rgba(26, 95, 180, 0.12); stroke-width: 2.5;
}

.intro-band__grid { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 62rem) {
  .intro-band__grid { grid-template-columns: 1.08fr 0.92fr; gap: clamp(2.5rem, 5vw, 5rem); }
}

.intro-band__title { font-size: var(--step-6); margin-top: var(--space-sm); text-wrap: balance; }
.intro-band__title em {
  position: relative; display: inline-block;
  font-style: normal; color: var(--primary);
  padding-block-end: 0.12em;
}
.intro-band__swash {
  position: absolute; inset-inline: 0; inset-block-end: -0.12em;
  inline-size: 100%; block-size: 0.3em; overflow: visible;
}
.intro-band__swash path {
  fill: none; stroke: var(--gold-400); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 320;
}
/* The underline draws itself in once the block scrolls into view. */
.js .intro-band__swash path { stroke-dashoffset: 320; transition: stroke-dashoffset 1.2s var(--ease-out) 0.5s; }
.js .reveal.is-visible .intro-band__swash path { stroke-dashoffset: 0; }

.intro-band .lead { margin-top: var(--space-md); max-inline-size: 54ch; }

.intro-band__marks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-md); }
.intro-band__marks li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.9rem 0.35rem 0.4rem;
  border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  font-size: var(--step--1); font-weight: 600; color: var(--text-heading);
}
.intro-band__marks svg {
  inline-size: 1.65rem; block-size: 1.65rem; padding: 0.35rem;
  border-radius: 50%; background: var(--gold-100); color: var(--navy-700);
}

/* ---- Figures: a small bento grid ---------------------------------------- */
.intro-bento { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.intro-bento__tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.4rem;
  min-block-size: 10rem;
  padding: var(--space-md);
  border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--text-heading); text-decoration: none;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.intro-bento__tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.intro-bento__tile--tall { grid-row: span 2; min-block-size: 21rem; }
.intro-bento__tile--wide {
  grid-column: 1 / -1; min-block-size: 0;
  flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-sm);
}
.intro-bento__num {
  display: block;
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: var(--step-5); letter-spacing: -0.02em; color: var(--primary);
}
.intro-bento__tile--tall .intro-bento__num { font-size: clamp(3.2rem, 2.4rem + 3vw, 5rem); }
.intro-bento__label { font-size: var(--step--1); line-height: 1.4; color: var(--text-muted); max-inline-size: 26ch; }
.intro-bento__icon {
  position: absolute; inset-block-start: var(--space-md); inset-inline-start: var(--space-md);
  display: grid; place-items: center;
  inline-size: 2.6rem; block-size: 2.6rem; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.12); color: var(--gold-400);
}
.intro-bento__icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
.intro-bento__icon--soft {
  inset-inline-start: auto; inset-inline-end: var(--space-md);
  background: var(--navy-50); color: var(--primary);
}

/* Navy: the founding year, with gold rings in the corner */
.intro-bento__tile--navy { background: var(--grad-night); border-color: transparent; color: #fff; }
.intro-bento__tile--navy .intro-bento__num { color: #fff; }
.intro-bento__tile--navy .intro-bento__label { color: rgba(255, 255, 255, 0.8); }
.intro-bento__tile--navy::before,
.intro-bento__tile--navy::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  border: 1.4rem solid rgba(241, 186, 24, 0.16);
}
.intro-bento__tile--navy::before { inline-size: 13rem; block-size: 13rem; inset-inline-end: -5rem; inset-block-start: -5rem; }
.intro-bento__tile--navy::after  { inline-size: 7rem; block-size: 7rem; inset-inline-end: 2.5rem; inset-block-start: 3.5rem; border-width: 0.6rem; border-color: rgba(255, 255, 255, 0.07); }

/* Gold: the child programme */
.intro-bento__tile--gold { background: var(--grad-gold); border-color: transparent; }
.intro-bento__tile--gold .intro-bento__num { color: var(--navy-900); }
.intro-bento__tile--gold .intro-bento__label { color: var(--navy-800); }
.intro-bento__tile--gold::after {
  content: ""; position: absolute; z-index: -1; inset-inline-end: -1.5rem; inset-block-start: -1.5rem;
  inline-size: 6rem; block-size: 6rem; border-radius: 50%; background: rgba(255, 255, 255, 0.22);
}

/* Blue: the call to action */
.intro-bento__tile--blue { background: var(--grad-blue); border-color: transparent; color: #fff; }
.intro-bento__kicker {
  display: block; font-size: var(--step--2); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold-300);
}
.intro-bento__cta { display: block; margin-top: 0.2rem; font-size: var(--step-1); font-weight: 700; color: #fff; }
.intro-bento__go {
  flex: none; display: grid; place-items: center;
  inline-size: 2.8rem; block-size: 2.8rem; border-radius: 50%;
  background: var(--gold-400); color: var(--navy-900);
  transition: transform var(--dur) var(--ease-out);
}
.intro-bento__go svg { inline-size: 1.1rem; block-size: 1.1rem; }
.intro-bento__tile--blue:hover .intro-bento__go { transform: translateX(4px); }

@media (max-width: 30rem) {
  .intro-bento__tile { min-block-size: 8.5rem; padding: var(--space-sm); }
  .intro-bento__tile--tall { min-block-size: 17.5rem; }
  .intro-bento__icon { inset-block-start: var(--space-sm); inset-inline-start: var(--space-sm); }
}

/* --------------------------------------------------------------------------
   Page hero — interior pages, after ugandacmf.org

   The cover photograph fills the band behind a FOCUS-blue gradient. It is
   blended with `luminosity`, so the picture keeps all of its detail and light
   but takes its colour from the blue — a clear photograph, tinted, not a dark
   scrim. A soft pool of deeper blue sits behind the centred words so white
   type stays legible whatever the photo does underneath.
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-block-size: clamp(22rem, 52vh, 34rem);
  padding-block: clamp(4.5rem, 3.5rem + 5vw, 7.5rem) clamp(4.5rem, 3.5rem + 4vw, 6.5rem);
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-500) 100%);
  color: #fff;
  text-align: center;
}
.page-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-500) 62%, #2F7AD0 100%);
}
.page-hero__bg img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: 0.58;
}
/* Older, smaller photographs (under 1600px) would look soft stretched across
   the band, so they sit further back in the tint — as UCMF sets all of its. */
.page-hero--lowres .page-hero__bg img { opacity: 0.34; filter: blur(0.6px); }

/* Legibility pool behind the words + a gentle fade at the foot of the band */
.page-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 58% 62% at 50% 52%, rgba(8, 35, 71, 0.5) 0%, rgba(8, 35, 71, 0.18) 60%, rgba(8, 35, 71, 0) 100%),
    linear-gradient(180deg, rgba(8, 35, 71, 0.12) 0%, rgba(8, 35, 71, 0) 30%, rgba(8, 35, 71, 0.28) 100%);
  pointer-events: none;
}
/* Gold keyline along the bottom edge, echoing the homepage progress bar */
.page-hero::before {
  content: "";
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1;
  block-size: 4px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300) 50%, var(--gold-500));
}

.page-hero__inner {
  display: flex; flex-direction: column; align-items: center;
  max-inline-size: 54rem;
}
.page-hero h1 {
  margin-top: var(--space-sm);
  font-size: var(--step-7);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(8, 35, 71, 0.35);
}
.page-hero .lead {
  margin-top: var(--space-md);
  max-inline-size: 44rem;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(8, 35, 71, 0.4);
}
.page-hero .eyebrow { margin-top: var(--space-md); color: var(--gold-300); }
.eyebrow--center::after {
  content: "";
  inline-size: 1.75rem; block-size: 2px; border-radius: 2px;
  background: var(--accent);
}

.breadcrumb { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: var(--step--1); }
.breadcrumb a { color: var(--text-subtle); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb li { display: inline-flex; gap: 0.5rem; color: var(--text-muted); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-inline-start: 0.5rem; color: var(--ink-300); }

.breadcrumb--hero {
  justify-content: center;
  padding: 0.4rem 1rem;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  font-size: var(--step--2);
  font-weight: 500;
}
.breadcrumb--hero li { color: #fff; }
.breadcrumb--hero a { color: rgba(255, 255, 255, 0.8); }
.breadcrumb--hero a:hover { color: var(--gold-300); }
.breadcrumb--hero li:not(:last-child)::after { color: rgba(255, 255, 255, 0.45); }

.page-hero__facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  margin-top: var(--space-lg);
}
.page-hero__facts li {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.95rem 0.4rem 0.55rem;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(8px);
  font-size: var(--step--1); font-weight: 600; color: #fff;
}
.page-hero__facts svg {
  inline-size: 1.3rem; block-size: 1.3rem; padding: 0.22rem;
  border-radius: 50%; background: var(--gold-400); color: var(--navy-900);
}
/* A chip with an address is a link: it lifts and turns gold on hover. */
.page-hero__facts li:has(> a) { padding: 0; }
.page-hero__facts a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.95rem 0.4rem 0.55rem; border-radius: inherit;
  color: inherit; text-decoration: none;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.page-hero__facts a::after {
  content: "→"; margin-inline-start: 0.1rem; opacity: 0.6;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.page-hero__facts a:hover, .page-hero__facts a:focus-visible {
  background: var(--gold-400); color: var(--navy-900); transform: translateY(-2px);
}
.page-hero__facts a:hover::after, .page-hero__facts a:focus-visible::after { opacity: 1; transform: translateX(3px); }
.page-hero__facts a:hover svg, .page-hero__facts a:focus-visible svg { background: var(--navy-900); color: var(--gold-400); }

.page-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.btn--glass {
  --btn-bg: rgba(255, 255, 255, 0.12);
  --btn-fg: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
}
.btn--glass:hover { --btn-bg: rgba(255, 255, 255, 0.24); }

/* Little bouncing chevron that jumps to the content */
.page-hero__cue {
  position: absolute; inset-block-end: 1.1rem; inset-inline-start: 50%;
  translate: -50% 0;
  display: grid; place-items: center;
  inline-size: 2.3rem; block-size: 2.3rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  animation: hero-cue 2.4s var(--ease-in-out) infinite;
}
.page-hero__cue svg { inline-size: 1.1rem; block-size: 1.1rem; }
.page-hero__cue:hover { background: rgba(255, 255, 255, 0.15); }
@keyframes hero-cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .page-hero__cue { animation: none; } }
@media (max-width: 40rem) {
  .page-hero__cue { display: none; }
  /* On a phone the band should introduce the page, not fill the screen. */
  .page-hero { min-block-size: 0; padding-block: 3rem 3.25rem; }
  .page-hero h1 { font-size: var(--step-5); }
  .page-hero .lead { font-size: var(--step-0); margin-top: var(--space-sm); }
  .page-hero .eyebrow { margin-top: var(--space-sm); font-size: var(--step--2); }
  .page-hero__facts { gap: 0.35rem; margin-top: var(--space-md); }
  .page-hero__facts li { padding: 0.3rem 0.7rem 0.3rem 0.4rem; font-size: var(--step--2); }
  .page-hero__facts a { padding: 0.3rem 0.7rem 0.3rem 0.4rem; }
  .page-hero__facts svg { inline-size: 1.1rem; block-size: 1.1rem; }
  .page-hero__actions { margin-top: var(--space-md); gap: var(--space-xs); }
  .page-hero__actions .btn { padding-block: 0.7em; }
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  grid-auto-rows: 12rem;
  gap: var(--space-sm);
}
.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-muted);
  cursor: zoom-in;
  border: none;
  padding: 0;
}
.gallery__item img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out);
}
.gallery__item:hover img { transform: scale(1.07); }
.gallery__item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,23,36,.7), transparent 55%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.gallery__item:hover::after, .gallery__item:focus-visible::after { opacity: 1; }
.gallery__caption {
  position: absolute;
  inset-block-end: 0; inset-inline: 0;
  z-index: 1;
  padding: var(--space-sm);
  font-size: var(--step--1);
  font-weight: 700;
  color: #fff;
  text-align: start;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.gallery__item:hover .gallery__caption,
.gallery__item:focus-visible .gallery__caption { opacity: 1; transform: none; }

/* Editorial rhythm — some tiles span two rows/columns */
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
@media (max-width: 40rem) {
  .gallery { grid-auto-rows: 10rem; }
  .gallery__item--wide { grid-column: span 1; }
}

/* Lightbox */
.lightbox { display: none; }
/* A <dialog> is display:none until opened; scoping the grid to [open] keeps
   that behaviour instead of leaving the close/next buttons floating on top of
   every gallery page. */
.lightbox[open] {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-md);
  background: rgba(4, 23, 36, 0.94);
  backdrop-filter: blur(6px);
  border: none;
}
.lightbox::backdrop { background: rgba(4, 23, 36, 0.9); }
.lightbox img {
  max-block-size: 84vh;
  max-inline-size: 100%;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xl);
}
.lightbox__caption { margin-top: var(--space-sm); color: rgba(255,255,255,.85); text-align: center; font-size: var(--step--1); }
.lightbox__close {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-end: var(--space-md);
  inline-size: 2.8rem; block-size: 2.8rem;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  color: #fff;
  cursor: pointer;
}
.lightbox__nav {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 3rem; block-size: 3rem;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.1);
  color: #fff;
  cursor: pointer;
}
.lightbox__nav--prev { inset-inline-start: var(--space-md); }
.lightbox__nav--next { inset-inline-end: var(--space-md); }
.lightbox__nav:hover, .lightbox__close:hover { background: rgba(255,255,255,.2); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field { display: grid; gap: 0.4rem; }
.field__label { font-size: var(--step--1); font-weight: 600; color: var(--text); }
.field__label .req { color: var(--navy-600); }
.field__hint { font-size: var(--step--2); color: var(--text-subtle); }
.field__error { font-size: var(--step--2); color: #B42318; font-weight: 700; }

.input, .textarea, .select {
  inline-size: 100%;
  padding: 0.8rem 1rem;
  font-size: var(--step-0);
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--navy-400); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--navy-600);
  box-shadow: 0 0 0 4px rgba(10, 72, 123, 0.14);
  outline: none;
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: #B42318; }
.textarea { min-block-size: 9rem; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234E5A6B' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1rem;
  padding-inline-end: 2.5rem;
}

.checkbox { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--step--1); cursor: pointer; }
.checkbox input {
  inline-size: 1.2rem; block-size: 1.2rem;
  margin-top: 0.15rem;
  accent-color: var(--navy-700);
  flex: none;
  cursor: pointer;
}
.checkbox span { color: var(--text-muted); line-height: var(--leading-normal); }

/* Segmented radio group — used for gift frequency and amount */
.segmented { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.15rem;
  font-size: var(--step--1);
  font-weight: 600;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.segmented label:hover { border-color: var(--navy-400); background: var(--navy-50); }
.segmented input:checked + label {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: #fff;
}
.segmented input:focus-visible + label { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.honeypot { position: absolute !important; left: -9999px; opacity: 0; height: 0; width: 0; }

/* --------------------------------------------------------------------------
   Alerts / messages
   -------------------------------------------------------------------------- */

.alert {
  display: flex; gap: 0.75rem;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  font-size: var(--step--1);
}
.alert--success { background: #ECFDF3; border-color: #ABEFC6; color: #067647; }
.alert--error   { background: #FEF3F2; border-color: #FECDCA; color: #B42318; }
.alert--info    { background: var(--navy-50); border-color: var(--navy-100); color: var(--navy-800); }

/* --------------------------------------------------------------------------
   Timeline (history page)
   -------------------------------------------------------------------------- */

/* The milestones timeline lives in sections.css (rebuilt). */

/* --------------------------------------------------------------------------
   Newsletter band
   Its own strip between the page and the footer — it used to sit inside the
   footer and made that column of links very tall. Light ground so it reads as
   part of the page, with a gold hairline handing over to the dark footer.
   -------------------------------------------------------------------------- */

.nlb {
  position: relative;
  isolation: isolate;
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  background:
    radial-gradient(60rem 18rem at 15% 0%, rgba(26, 95, 180, 0.10), transparent 70%),
    linear-gradient(180deg, var(--ink-50), var(--navy-50));
  border-block-start: 1px solid var(--ink-200);
}
.nlb::after {                       /* hands over to the footer */
  content: ""; position: absolute; inset-block-end: 0; inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(90deg, var(--gold-400), rgba(241, 186, 24, 0.35) 45%, rgba(14, 58, 115, 0.25));
}
.nlb__inner {
  display: grid;
  gap: var(--space-md) var(--space-2xl);
  align-items: center;
}
@media (min-width: 58rem) { .nlb__inner { grid-template-columns: 1.1fr 1fr; } }

.nlb__kicker {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--step--2); font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--navy-600);
}
.nlb__kicker svg { inline-size: 1.05rem; block-size: 1.05rem; color: var(--gold-600); }
.nlb__title {
  margin-top: 0.35rem;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--navy-900);
  text-wrap: balance;
}
.nlb__form { display: grid; gap: 0.5rem; }
.nlb__field {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding: 0.35rem;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-full);
  box-shadow: 0 10px 28px -20px rgba(8, 35, 71, 0.55);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.nlb__field:focus-within { border-color: var(--navy-400); box-shadow: 0 0 0 4px rgba(26, 95, 180, 0.14); }
@media (max-width: 26rem) { .nlb__field { border-radius: var(--r-lg); } }
.nlb__input {
  flex: 1 1 11rem;
  min-inline-size: 0;
  padding: 0.7rem 1rem;
  border: 0; background: none;
  color: var(--ink-900);
  font-size: var(--step-0);
}
.nlb__input::placeholder { color: var(--ink-400); }
.nlb__input:focus { outline: none; }
.nlb__btn { flex: 0 0 auto; }
@media (max-width: 26rem) { .nlb__btn { flex: 1 1 100%; justify-content: center; } }
.nlb__fineprint { font-size: var(--step--2); color: var(--ink-500); padding-inline: 0.4rem; }
.nlb__fineprint a { color: var(--navy-600); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Footer
   Deep-navy ground lifted by a soft blue glow, a wider brand column ruled off
   from three link columns, and a quiet bottom bar.
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  color: rgba(255, 255, 255, 0.72);
  padding-block: var(--space-2xl) var(--space-md);
}
.site-footer__glow {
  position: absolute; inset-block-start: -30%; inset-inline-start: -10%;
  inline-size: 70rem; block-size: 44rem;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(38rem 22rem at 20% 25%, rgba(26, 95, 180, 0.38), transparent 68%),
    radial-gradient(30rem 18rem at 78% 10%, rgba(241, 186, 24, 0.10), transparent 70%);
}
.site-footer__inner { position: relative; }
.site-footer h2, .site-footer h3 { color: #fff; }
.site-footer a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.site-footer a:hover { color: #fff; }

.footer__grid {
  display: grid;
  gap: var(--space-xl) var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
/* Phones and tablets: pair the two link lists so the footer stays short. */
@media (min-width: 22rem) and (max-width: 63.999rem) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .footer__brand, .footer__col--contact { grid-column: 1 / -1; }
}

@media (min-width: 64rem) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: var(--space-2xl); }
  /* Rule the brand column off from the links. */
  .footer__grid > .footer__col:first-of-type {
    padding-inline-start: var(--space-2xl);
    border-inline-start: 1px solid rgba(255, 255, 255, 0.10);
    margin-inline-start: calc(var(--space-2xl) * -0.4);
  }
}

.footer__ctas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-md); }
.footer__brand p { font-size: var(--step--1); line-height: var(--leading-relaxed); margin-block: var(--space-md); max-inline-size: 34ch; }
.footer__logo { display: inline-flex; align-items: center; gap: 0.55rem; }
.footer__logo img { block-size: 3.2rem; inline-size: auto; }
.footer__logo span { display: grid; gap: 0.15rem; line-height: 1.2; }
.footer__logo strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: #fff; letter-spacing: 0; }
.footer__logo small { font-size: 0.78rem; letter-spacing: 0.005em; color: rgba(255, 255, 255, 0.72); }

.footer__title {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: #fff;
  margin-bottom: var(--space-md);
  padding-bottom: 0.55rem;
  position: relative;
}
.footer__title::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  inline-size: 2.25rem; block-size: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-400), rgba(241, 186, 24, 0));
}
.footer__list { display: grid; gap: 0.6rem; font-size: var(--step--1); }
.footer__list a { transition: color var(--dur) var(--ease-out), padding-inline-start var(--dur) var(--ease-out); }
.footer__list a:hover { padding-inline-start: 0.2rem; }
.footer__list--contact li { line-height: var(--leading-normal); }

.footer__bottom {
  position: relative;
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  align-items: center; justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}
.footer__bottom::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 60%, transparent);
}
.footer__credit { color: rgba(255, 255, 255, 0.55); }
.footer__credit a { color: rgba(255, 255, 255, 0.8); font-weight: 600; }
.footer__credit a:hover { color: var(--gold-400); text-decoration: underline; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.footer__legal a { color: rgba(255, 255, 255, 0.6); }
.footer__legal a:hover { color: #fff; text-decoration: underline; }

.social { display: flex; gap: 0.5rem; }
.social a {
  display: grid; place-items: center;
  inline-size: 2.4rem; block-size: 2.4rem;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.social a:hover { background: var(--gold-400); color: var(--navy-900); transform: translateY(-2px); }
.social svg { inline-size: 1rem; block-size: 1rem; }

/* --------------------------------------------------------------------------
   Cookie consent — no cookies are set until a choice is made
   -------------------------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  inset-block-end: var(--space-sm);
  inset-inline: var(--space-sm);
  z-index: var(--z-toast);
  max-inline-size: 34rem;
  margin-inline: auto;
  padding: var(--space-md);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  display: grid;
  gap: var(--space-sm);
  transform: translateY(140%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.cookie-banner[data-visible="true"] { transform: none; }
.cookie-banner p { font-size: var(--step--1); color: var(--text-muted); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */

.to-top {
  position: fixed;
  inset-block-end: var(--space-md);
  inset-inline-end: var(--space-md);
  z-index: var(--z-sticky);
  inline-size: 2.9rem; block-size: 2.9rem;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--dur) var(--ease-out);
}
.to-top[data-visible="true"] { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }

/* ---- WhatsApp: a round green button, bottom left on every page ---------- */
.wa-float {
  position: fixed; inset-block-end: var(--space-md); inset-inline-start: var(--space-md); z-index: var(--z-sticky);
  display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%;
  background: #25D366; color: #fff; text-decoration: none;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.4), 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.wa-float svg { inline-size: 1.75rem; block-size: 1.75rem; }
.wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366;
  animation: wa-ring 2.4s var(--ease-out) infinite;
}
.wa-float:hover, .wa-float:focus-visible { background: #1ebe5a; color: #fff; transform: scale(1.08); }
.wa-float__tip {
  position: absolute; inset-inline-start: calc(100% + 0.6rem); white-space: nowrap;
  padding: 0.35rem 0.75rem; border-radius: var(--r-full); background: var(--navy-900); color: #fff;
  font-size: var(--step--2); font-weight: 700; opacity: 0; transform: translateX(-6px); pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.wa-float:hover .wa-float__tip, .wa-float:focus-visible .wa-float__tip { opacity: 1; transform: none; }
@keyframes wa-ring { 0% { transform: scale(1); opacity: 0.7; } 80%, 100% { transform: scale(1.55); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wa-float::before { animation: none; display: none; } }
@media print { .wa-float { display: none !important; } }

/* --------------------------------------------------------------------------
   Media frame — the rounded photo panel used beside body copy in split
   sections. Fixing an aspect ratio here stops a landscape source from
   rendering as a short, weak strip next to a tall column of text.
   -------------------------------------------------------------------------- */

.media-frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4 / 3;
  background: var(--bg-muted);
}
.media-frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.media-frame--tall { aspect-ratio: 4 / 5; }
.media-frame--square { aspect-ratio: 1 / 1; }
@media (min-width: 62rem) { .media-frame { aspect-ratio: 5 / 6; } }

/* Donate stays reachable on a phone — for a charity, burying the single most
   important action inside a menu costs gifts. Below 26rem the label drops and
   the heart alone carries it. */
/* On a phone the button keeps its name — only "now" is dropped. Hiding the
   whole label would leave an empty pill with no accessible name. */
@media (max-width: 26rem) {
  .btn--donate { padding-inline: 0.95em; }
  .btn--donate .btn__label-extra { display: none; }
}

/* --------------------------------------------------------------------------
   Section tabs — the anchor strip under an About-style hero.
   Modelled on the reference site: a centred row of links, each underlined on
   hover and while its section is in view.
   -------------------------------------------------------------------------- */

.section-tabs {
  position: sticky;
  inset-block-start: var(--header-h);
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--border);
}
.section-tabs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 2.5rem);
  padding-block: 0.9rem;
}
.section-tabs a {
  position: relative;
  padding: 0.35rem 0.25rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease-out);
}
.section-tabs a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease-out);
}
.section-tabs a:hover,
.section-tabs a[aria-current="true"] { color: var(--primary); }
.section-tabs a:hover::after,
.section-tabs a[aria-current="true"]::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Statement cards — the big solid Mission / Vision pair.
   -------------------------------------------------------------------------- */

.statements { display: grid; gap: var(--space-lg); }
@media (min-width: 52rem) { .statements { grid-template-columns: 1fr 1fr; } }

.statement {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: 18rem;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  border-radius: var(--r-2xl);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.statement::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 0%, rgba(255,255,255,.14) 0%, transparent 68%);
}
.statement__label {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.statement h3 { font-size: var(--step-3); }
.statement p { font-size: var(--step-0); line-height: var(--leading-relaxed); margin-top: var(--space-sm); }

.statement--navy { background: var(--grad-royal); color: #fff; }
.statement--navy h3 { color: #fff; }
.statement--navy p { color: rgba(255, 255, 255, 0.84); }
.statement--navy .statement__label { color: var(--gold-400); }

/* Gold ground takes navy type — 5.2:1, and the only way yellow carries text. */
.statement--gold { background: var(--grad-gold); color: var(--navy-900); }
.statement--gold h3 { color: var(--navy-900); }
.statement--gold p { color: rgba(6, 38, 63, 0.86); }
.statement--gold .statement__label { color: var(--navy-800); }


/* --------------------------------------------------------------------------
   Map — click to load.

   The embed is a third-party frame, so nothing is requested from Google until
   the visitor asks for it. Until then this is a plain styled panel with the
   address and a button, which keeps the cookie policy's promise honest.
   -------------------------------------------------------------------------- */

.map {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(60% 70% at 30% 20%, rgba(31,102,168,.10) 0%, transparent 62%),
    var(--grad-tint);
  box-shadow: var(--shadow-sm);
}
.map__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  text-align: center;
}
.map__pin {
  inline-size: 3.25rem; block-size: 3.25rem;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--navy-700); color: var(--gold-400);
  box-shadow: var(--shadow-md);
}
.map__pin svg { inline-size: 1.6rem; block-size: 1.6rem; }
.map__address { font-family: var(--font-display); font-weight: 600; color: var(--navy-800); }
.map__note { font-size: var(--step--2); color: var(--text-subtle); max-inline-size: 34ch; }
.map iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }