/* ==========================================================================
   FOCUS — Section components
   Everything built for the About, Resources and AGM sections.
   ========================================================================== */

.section-head--row {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--space-md); max-inline-size: none;
}
.section-head--row > div > * + * { margin-top: var(--space-sm); }
.card__meta {
  font-size: var(--step--2); font-weight: 600; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--primary);
}

/* ---- Core values ---------------------------------------------------------
   Photo cards that lift and reveal their verse on hover. The number sits in a
   gold disc overlapping the seam between photo and text.                     */
.values { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.value {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.value:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.value__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-muted); }
.value__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slower) var(--ease-out); }
.value:hover .value__media img { transform: scale(1.06); }
.value__body { position: relative; padding: var(--space-lg) var(--space-md) var(--space-md); flex: 1; display: flex; flex-direction: column; }
.value__num {
  position: absolute; inset-block-start: -1.4rem; inset-inline-start: var(--space-md);
  inline-size: 2.8rem; block-size: 2.8rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--gold-400); color: var(--navy-900);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step--1);
  box-shadow: 0 0 0 4px var(--surface), var(--shadow-md);
}
.value__title { font-size: var(--step-2); }
.value__text { margin-top: var(--space-xs); color: var(--text-muted); font-size: var(--step--1); line-height: var(--leading-relaxed); flex: 1; }
.value__verse {
  margin-top: var(--space-sm); font-size: var(--step--2); font-weight: 600;
  letter-spacing: var(--tracking-wide); color: var(--primary);
}

/* Large variant for the Core Values page */
.values--feature { grid-template-columns: 1fr; gap: var(--space-2xl); }
@media (min-width: 62rem) {
  .values--feature .value { flex-direction: row; min-block-size: 22rem; }
  .values--feature .value__media { flex: 0 0 46%; aspect-ratio: auto; }
  .values--feature .value:nth-child(even) { flex-direction: row-reverse; }
  .values--feature .value__body { justify-content: center; padding: var(--space-2xl); }
  .values--feature .value__num { position: static; margin-bottom: var(--space-md); box-shadow: var(--shadow-md); }
  .values--feature .value__title { font-size: var(--step-4); }
  .values--feature .value__text { font-size: var(--step-0); flex: none; }
}

/* ---- Spotlight (AGM on the homepage) ------------------------------------- */
.spotlight {
  display: grid; overflow: hidden;
  border-radius: var(--r-2xl); background: var(--grad-tint);
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
}
@media (min-width: 62rem) { .spotlight { grid-template-columns: 0.9fr 1.1fr; } }
.spotlight__media { min-block-size: 18rem; }
.spotlight__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.spotlight__body { padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); display: flex; flex-direction: column; justify-content: center; gap: var(--space-sm); }

/* ---- About landing: the four doorway cards ------------------------------- */
.doors { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.door {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-block-size: 22rem; padding: var(--space-lg);
  border-radius: var(--r-xl); overflow: hidden; isolation: isolate;
  color: #fff; text-decoration: none; box-shadow: var(--shadow-md);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.door img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: -2; transition: transform var(--dur-slower) var(--ease-out); }
/* The scrim covers only the lower third, where the words are — the rest of
   the photograph stays clear. */
.door::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8,35,71,.92) 0%, rgba(8,35,71,.55) 30%, rgba(8,35,71,0) 58%);
}
.door:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); color: #fff; }
.door:hover img { transform: scale(1.05); }
.door__kicker { font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold-400); }
.door__title { margin-top: 0.35rem; font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; color: #fff; line-height: var(--leading-snug); }
.door__text { margin-top: 0.4rem; font-size: var(--step--1); color: rgba(255,255,255,.85); }
.door__arrow {
  position: absolute; inset-block-start: var(--space-md); inset-inline-end: var(--space-md);
  inline-size: 2.6rem; block-size: 2.6rem; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,255,255,.2); backdrop-filter: blur(8px);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.door:hover .door__arrow { background: var(--gold-400); color: var(--navy-900); transform: rotate(-45deg); }
.door__arrow svg { inline-size: 1.1rem; block-size: 1.1rem; }

/* ---- People cards (governance and staff) -----------------------------------
   Small by design: a portrait, a name and an office. Four or five to a row on
   a laptop, two on a phone, so a whole team reads as one group rather than a
   long column of profiles.                                                    */
.people {
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.25rem), 1fr));
}
@media (min-width: 48rem) {
  .people {
    gap: var(--space-lg) var(--space-md);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
  }
}
.person {
  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-xs, 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);
}
.person:hover, .person:focus-within {
  transform: translateY(-4px); box-shadow: var(--shadow-md, var(--shadow-lg));
  border-color: var(--navy-200);
}
.person__photo {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: linear-gradient(160deg, var(--navy-400), var(--navy-700));
}
.person__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 20%; transition: transform var(--dur-slower) var(--ease-out); }
.person:hover .person__photo img { transform: scale(1.04); }
.person__initials {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: rgba(255,255,255,.9);
}
/* Awaiting a photograph. */
.person__silhouette {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--ink-50), var(--navy-50));
}
.person__silhouette svg { inline-size: 46%; block-size: auto; color: var(--navy-200); }
.person__flag {
  position: absolute; inset-block-start: 0.45rem; inset-inline-start: 0.45rem;
  padding: 0.12rem 0.45rem; border-radius: var(--r-full);
  background: rgba(8, 35, 71, 0.72); color: var(--gold-300);
  font-size: 0.62rem; font-weight: 700; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; backdrop-filter: blur(4px);
}
.person__body {
  padding: 0.7rem 0.8rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.12rem; flex: 1;
  border-block-start: 2px solid var(--gold-400);
}
.person__name {
  font-family: var(--font-display); font-size: var(--step-0); font-weight: 600;
  line-height: 1.25; color: var(--text-heading); text-wrap: balance;
}
.person__role { font-size: var(--step--2); color: var(--primary); font-weight: 600; line-height: 1.35; }
.person__meta { font-size: var(--step--2); color: var(--text-subtle); line-height: 1.35; }
.person--former .person__photo img { filter: grayscale(0.35); }
.person--former .person__body { border-block-start-color: var(--ink-300); }

.group-head { display: flex; align-items: baseline; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.group-head h2 { font-size: var(--step-4); }
.group-head span { font-size: var(--step--1); color: var(--text-subtle); }

/* ---- Staff page: teams stacked, each heading centred above its people ----- */
.team-jump {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  max-inline-size: 62rem; margin: 0 auto var(--space-lg);
}
.team-jump a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.95rem; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--step--1); font-weight: 600; color: var(--text-heading); text-decoration: none;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.team-jump a:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.team-jump a span {
  display: grid; place-items: center; min-inline-size: 1.35rem; block-size: 1.35rem; padding-inline: 0.3rem;
  border-radius: var(--r-full); background: var(--navy-50); color: var(--primary);
  font-size: 0.7rem; font-weight: 700;
}

.staff-team { padding-block: var(--space-xl); scroll-margin-top: calc(var(--header-h) + 1rem); }
.staff-team + .staff-team { border-block-start: 1px solid var(--border); }
.staff-team__head {
  display: grid; justify-items: center; gap: 0.45rem; text-align: center;
  max-inline-size: 40rem; margin: 0 auto var(--space-lg);
}
.staff-team__icon {
  display: grid; place-items: center; inline-size: 3.1rem; block-size: 3.1rem; margin-bottom: 0.25rem;
  border-radius: 50%; color: #fff;
  background: linear-gradient(145deg, var(--primary), var(--navy-700));
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px rgba(241, 186, 24, 0.6), 0 12px 24px -12px rgba(14, 58, 115, 0.6);
}
.staff-team__icon svg { inline-size: 1.35rem; block-size: 1.35rem; }
.staff-team__title { font-size: var(--step-3); text-wrap: balance; }
.staff-team__blurb { max-inline-size: 52ch; font-size: var(--step--1); line-height: var(--leading-relaxed); color: var(--text-muted); }
.staff-team__count {
  padding: 0.15rem 0.7rem; border-radius: var(--r-full);
  background: var(--navy-50); color: var(--primary);
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.02em;
}

/* Smaller, dressier staff cards: an arched portrait inside a soft frame, a
   centred name under a gold tick, and a gold ring on hover. Rows centre, so a
   team of one or two sits under its heading rather than off to the left. */
.people--staff {
  /* Flex rather than grid: a grid counts its columns from the 10.5rem maximum,
     so a phone fits only one. Here each card wants half the row but stops at
     10.5rem — two across on a phone, as many as fit on a laptop, centred. */
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-lg) var(--space-md);
}
/* Doubled class: outranks the later `.people > :only-child` rule, which would
   otherwise stretch a one-person team's card to 34rem. */
.people.people--staff > .person { flex: 0 1 calc(50% - var(--space-md) / 2); max-inline-size: 10.5rem; }
.people--staff .person {
  padding: 0.5rem 0.5rem 0; text-align: center;
  border-radius: var(--r-xl); border-color: rgba(26, 95, 180, 0.12);
  background: linear-gradient(180deg, var(--surface) 55%, var(--navy-50));
  box-shadow: 0 1px 2px rgba(14, 58, 115, 0.06), 0 10px 24px -18px rgba(14, 58, 115, 0.4);
}
.people--staff .person:hover, .people--staff .person:focus-within {
  transform: translateY(-5px); border-color: var(--navy-200);
  box-shadow: 0 24px 40px -22px rgba(14, 58, 115, 0.55);
}
.people--staff .person__photo {
  aspect-ratio: 5 / 6; border-radius: 999px 999px var(--r-lg) var(--r-lg);
  outline: 2px solid transparent; outline-offset: 3px;
  transition: outline-color var(--dur-slow) var(--ease-out);
}
.people--staff .person:hover .person__photo,
.people--staff .person:focus-within .person__photo { outline-color: var(--gold-400); }
.people--staff .person__flag { inset-block-start: auto; inset-block-end: 0.45rem; inset-inline-start: 50%; transform: translateX(-50%); }
.people--staff .person__body { align-items: center; padding: 0.6rem 0.3rem 0.8rem; border-block-start: 0; }
.people--staff .person__body::before {
  content: ""; inline-size: 1.5rem; block-size: 3px; margin-bottom: 0.35rem;
  border-radius: 3px; background: var(--gold-400);
}
.people--staff .person__name { font-size: var(--step--1); }
.people--staff .person__role { font-size: 0.72rem; }

/* ---- Empty states ----------------------------------------------------------
   An honest "coming soon" that still looks designed, rather than a blank. */
.empty {
  display: grid; justify-items: center; gap: var(--space-sm);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-xl);
  background: var(--grad-tint);
}
.empty__icon {
  inline-size: 3.4rem; block-size: 3.4rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm);
}
.empty__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
.empty h3 { font-size: var(--step-2); }
.empty p { max-inline-size: 46ch; color: var(--text-muted); font-size: var(--step--1); }

/* ---- Committees ------------------------------------------------------------ */
.committees { display: grid; gap: var(--space-xl); }
.committee {
  display: grid; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2xl); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-slow) var(--ease-out);
}
.committee:hover { box-shadow: var(--shadow-lg); }
@media (min-width: 62rem) {
  .committee { grid-template-columns: 0.85fr 1.15fr; }
  .committee:nth-child(even) .committee__visual { order: 2; }
}
.committee__visual {
  position: relative; min-block-size: 16rem; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-lg);
  background: var(--grad-blue); color: #fff;
}
.committee__visual img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: -2; }
.committee__visual::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8,35,71,.9) 0%, rgba(8,35,71,.25) 55%, rgba(8,35,71,0) 100%);
}
.committee__visual--plain::after { background: var(--aurora); }
.committee__badge {
  inline-size: 3.4rem; block-size: 3.4rem; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--gold-400); color: var(--navy-900); margin-bottom: var(--space-sm);
}
.committee__badge svg { inline-size: 1.6rem; block-size: 1.6rem; }
.committee__name { font-family: var(--font-display); font-size: var(--step-4); font-weight: 600; color: #fff; line-height: var(--leading-snug); }
.committee__tagline { margin-top: 0.4rem; color: rgba(255,255,255,.88); font-size: var(--step--1); }
.committee__body { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); display: flex; flex-direction: column; gap: var(--space-md); }
.committee__body h3 { font-size: var(--step-0); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--primary); }
.checks { display: grid; gap: 0.6rem; }
.checks li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: var(--step--1); color: var(--text); }
.checks li::before {
  content: ""; flex: none; margin-top: 0.2rem;
  inline-size: 1.15rem; block-size: 1.15rem; border-radius: 50%;
  background: var(--navy-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A5FB4' stroke-width='3.2'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.72rem no-repeat;
}
.committee__foot { margin-top: auto; padding-top: var(--space-sm); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: var(--step--2); color: var(--text-subtle); }
.committee__foot strong { color: var(--text-heading); font-weight: 600; }

/* ---- AGM -------------------------------------------------------------------- */
.agm-next {
  display: grid; overflow: hidden; border-radius: var(--r-2xl);
  background: var(--grad-night); color: #fff; box-shadow: var(--shadow-xl);
}
@media (min-width: 62rem) { .agm-next { grid-template-columns: 1.1fr 0.9fr; } }
.agm-next__body { padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); display: flex; flex-direction: column; gap: var(--space-md); }
.agm-next__body h2 { color: #fff; font-size: var(--step-5); }
.agm-next__body p { color: rgba(255,255,255,.82); }
.agm-next__media { min-block-size: 18rem; position: relative; }
.agm-next__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.agm-facts { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.agm-fact { padding: var(--space-sm) var(--space-md); border-radius: var(--r-md); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.agm-fact dt { font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold-400); }
.agm-fact dd { margin-top: 0.3rem; font-weight: 600; color: #fff; }

.agm-year {
  display: grid; gap: var(--space-lg);
  padding: var(--space-lg); border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
@media (min-width: 52rem) { .agm-year { grid-template-columns: 9rem 1fr; } }
.agm-year__badge {
  display: grid; place-content: center; text-align: center;
  aspect-ratio: 1; border-radius: var(--r-lg);
  background: var(--grad-blue); color: #fff;
}
.agm-year__badge strong { font-family: var(--font-display); font-size: var(--step-5); font-weight: 700; line-height: 1; }
.agm-year__badge span { font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: .8; margin-top: .35rem; }

.docs { display: grid; gap: 0.6rem; margin-top: var(--space-sm); }
.doc {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 0.85rem 1rem; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg-subtle);
  text-decoration: none; color: var(--text);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.doc:hover { border-color: var(--navy-300); background: var(--navy-50); transform: translateX(3px); color: var(--text); }
.doc__type {
  flex: none; inline-size: 2.6rem; block-size: 2.6rem; display: grid; place-items: center;
  border-radius: var(--r-sm); background: #FDECEC; color: #B42318;
  font-size: 0.65rem; font-weight: 800; letter-spacing: .04em;
}
.doc__name { font-weight: 600; color: var(--text-heading); }
.doc__meta { font-size: var(--step--2); color: var(--text-subtle); }
.doc__go { margin-inline-start: auto; color: var(--primary); }
.doc__go svg { inline-size: 1.1rem; block-size: 1.1rem; }

/* ---- Resource hub tiles ------------------------------------------------------ */
.tiles { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.tile {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: var(--space-lg); border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border);
  text-decoration: none; color: var(--text); box-shadow: var(--shadow-xs);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--navy-200); color: var(--text); }
.tile__icon {
  inline-size: 3rem; block-size: 3rem; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--navy-50); color: var(--primary);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.tile:hover .tile__icon { background: var(--primary); color: #fff; }
.tile__icon svg { inline-size: 1.4rem; block-size: 1.4rem; }
.tile__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; color: var(--text-heading); margin-top: var(--space-xs); }
.tile__text { font-size: var(--step--1); color: var(--text-muted); }
.tile__count { margin-top: auto; padding-top: var(--space-xs); font-size: var(--step--2); font-weight: 600; color: var(--primary); }

/* ---- Event rows ---------------------------------------------------------------- */
.events { display: grid; gap: var(--space-md); }
.event {
  display: grid; overflow: hidden; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.event:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
@media (min-width: 52rem) { .event { grid-template-columns: 7rem 17rem 1fr; } }
.event__date {
  display: grid; place-content: center; text-align: center; padding: var(--space-md);
  background: var(--primary); color: #fff;
}
.event__date strong { font-family: var(--font-display); font-size: var(--step-4); font-weight: 700; line-height: 1; }
.event__date span { font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: .85; margin-top: .3rem; }
.event__date--tbc strong { font-size: var(--step-1); }
.event__media { min-block-size: 11rem; background: var(--bg-muted); }
.event__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.event__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: 0.5rem; }
.event__body h3 { font-size: var(--step-2); }
.event__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: var(--step--2); color: var(--text-subtle); }

/* ---- Video cards: click-to-load YouTube ----------------------------------------- */
.videos { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.video { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); }
.video__frame { position: relative; aspect-ratio: 16 / 9; background: var(--navy-900); }
.video__frame img, .video__frame iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; border: 0; }
.video__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(to top, rgba(8,35,71,.55), rgba(8,35,71,.05)); border: 0; cursor: pointer; color: #fff;
}
.video__play span {
  inline-size: 3.6rem; block-size: 3.6rem; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,255,255,.95); color: var(--primary);
  box-shadow: var(--shadow-lg); transition: transform var(--dur) var(--ease-spring);
}
.video__play:hover span { transform: scale(1.1); }
.video__play svg { inline-size: 1.4rem; block-size: 1.4rem; margin-inline-start: 0.2rem; }
.video__body { padding: var(--space-md); }
.video__body h3 { font-size: var(--step-1); }

/* ---- Campaign meter (resources 10K page) ---------------------------------------- */
.meter-card { padding: var(--space-lg); border-radius: var(--r-xl); background: var(--grad-night); color: #fff; }
.meter-card h2 { color: #fff; }

/* ---- Gallery: uniform cards ------------------------------------------------------
   Every photograph in the same-size card, as the brief asked — no masonry,
   no tall or wide tiles, just an even grid of clear pictures.               */
.photo-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.photo-card {
  position: relative; display: block; padding: 0; border: 0; cursor: zoom-in;
  aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-muted); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.photo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.photo-card img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slower) var(--ease-out); }
.photo-card:hover img { transform: scale(1.04); }
.photo-card__caption {
  position: absolute; inset-inline: 0; inset-block-end: 0; padding: var(--space-md) var(--space-sm) var(--space-sm);
  background: linear-gradient(to top, rgba(8,35,71,.85), rgba(8,35,71,0));
  color: #fff; font-size: var(--step--2); font-weight: 500; text-align: start;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.photo-card:hover .photo-card__caption,
.photo-card:focus-visible .photo-card__caption { opacity: 1; transform: none; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-lg); }
.filter-bar button {
  padding: 0.5rem 1rem; border-radius: var(--r-full);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: var(--step--1); font-weight: 500; color: var(--text); cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.filter-bar button:hover { border-color: var(--primary); color: var(--primary); }
.filter-bar button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ==========================================================================
   About section
   ========================================================================== */

/* ---- Who we are + at a glance ------------------------------------------- */
.glance { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 62rem) { .glance { grid-template-columns: 1.15fr 0.85fr; gap: clamp(3rem, 6vw, 5.5rem); } }
.glance__copy .lead { margin-top: var(--space-md); }

.foundations { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.foundation {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--r-lg);
  background: var(--grad-tint); border: 1px solid var(--border);
}
.foundation__icon {
  flex: none; display: grid; place-items: center;
  inline-size: 2.6rem; block-size: 2.6rem; border-radius: var(--r-md);
  background: var(--navy-500); color: #fff;
}
.foundation__icon svg { inline-size: 1.2rem; block-size: 1.2rem; }
.foundation__title { font-size: var(--step-0); }
.foundation__text { margin-top: 0.15rem; font-size: var(--step--1); color: var(--text-muted); }

.glance__card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  border-radius: var(--r-2xl);
  background: var(--grad-night); color: #fff;
  box-shadow: var(--shadow-xl);
}
@media (min-width: 62rem) { .glance__card { position: sticky; inset-block-start: calc(var(--header-h) + 5rem); } }
.glance__card::before {
  content: ""; position: absolute; z-index: -1;
  inline-size: 16rem; block-size: 16rem; inset-inline-end: -6rem; inset-block-start: -6rem;
  border-radius: 50%; border: 1.6rem solid rgba(241, 186, 24, 0.14);
}
.glance__title {
  font-size: var(--step-2); color: #fff;
  padding-block-end: var(--space-sm); margin-block-end: var(--space-xs);
  border-block-end: 2px solid var(--gold-400);
  display: inline-block;
}
.glance__list > div {
  display: grid; gap: 0.2rem;
  padding-block: 0.85rem;
  border-block-end: 1px solid rgba(255, 255, 255, 0.12);
}
.glance__list > div:last-child { border-block-end: 0; padding-block-end: 0; }
.glance__list dt {
  font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--gold-300);
}
.glance__list dd { margin: 0; font-size: var(--step--1); line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
.glance__list dd strong { color: #fff; font-size: var(--step-0); }

/* ---- Motto under mission & vision ---------------------------------------- */
.motto {
  display: flex; align-items: center; justify-content: center; gap: var(--space-md);
  margin-top: var(--space-xl);
  font-size: var(--step-0); color: var(--text-muted); text-align: center;
}
.motto strong { color: var(--text-heading); }
.motto__rule { flex: 1; max-inline-size: 8rem; block-size: 2px; background: linear-gradient(90deg, transparent, var(--gold-400)); }
.motto__rule:last-child { background: linear-gradient(90deg, var(--gold-400), transparent); }

/* ---- Values strip --------------------------------------------------------- */
.value-strip {
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.value-chip {
  position: relative; display: flex; flex-direction: column;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border);
  border-block-start: 4px solid var(--gold-400);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.value-chip:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.value-chip__icon {
  display: grid; place-items: center;
  inline-size: 2.8rem; block-size: 2.8rem; border-radius: 50%;
  background: var(--navy-50); color: var(--primary);
}
.value-chip__icon svg { inline-size: 1.3rem; block-size: 1.3rem; }
.value-chip__title { margin-top: var(--space-sm); font-size: var(--step-1); }
.value-chip__text { margin-top: var(--space-2xs); flex: 1; font-size: var(--step--1); line-height: 1.55; color: var(--text-muted); }
.value-chip__verse {
  margin-top: var(--space-sm); font-size: var(--step--2); font-weight: 700;
  letter-spacing: var(--tracking-wide); color: var(--primary);
}

/* ---- Accountable by design (dark band) ------------------------------------ */
.on-dark .lead { color: var(--text-on-dark-muted); }
.trust { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.trust__item {
  display: flex; flex-direction: column;
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff; text-decoration: none;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.trust__item:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(241, 186, 24, 0.55); transform: translateY(-4px); }
.trust__icon {
  display: grid; place-items: center;
  inline-size: 2.8rem; block-size: 2.8rem; border-radius: var(--r-md);
  background: var(--gold-400); color: var(--navy-900);
}
.trust__icon svg { inline-size: 1.3rem; block-size: 1.3rem; }
.trust__item h3 { margin-top: var(--space-md); font-size: var(--step-1); color: #fff; }
.trust__item p { margin-top: var(--space-2xs); flex: 1; font-size: var(--step--1); line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.trust__more { margin-top: var(--space-md); font-size: var(--step--1); font-weight: 700; color: var(--gold-300); }

/* ---- Milestones: a horizontal rail on wide screens ----------------------- */
.milestones {
  position: relative;
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
@media (min-width: 62rem) {
  .milestones::before {
    content: ""; position: absolute; inset-inline: 0; inset-block-start: 1.35rem;
    block-size: 2px; background: linear-gradient(90deg, var(--gold-400), var(--navy-200, #C9D9EF));
  }
}
.milestone { position: relative; padding-block-start: 0.2rem; }
.milestone__year {
  position: relative; display: inline-grid; place-items: center;
  min-inline-size: 4.4rem; block-size: 2.7rem; padding-inline: 0.8rem;
  border-radius: var(--r-full);
  background: var(--navy-500); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-0);
  box-shadow: 0 0 0 5px var(--bg);
}
.milestone:last-child .milestone__year { background: var(--gold-400); color: var(--navy-900); }
.milestone__title { margin-top: var(--space-sm); font-size: var(--step-0); }
.milestone__text { margin-top: 0.3rem; font-size: var(--step--1); line-height: 1.55; color: var(--text-muted); }

/* ==========================================================================
   Ministry pillars — the core engagement, given pride of place
   ========================================================================== */

/* Homepage band: deep navy with a fine dot grid and two soft glows */
.section--pillars {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--grad-night);
  color: #fff;
}
.section--pillars::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 12% 18%, rgba(26, 95, 180, 0.55) 0%, rgba(26, 95, 180, 0) 38%),
    radial-gradient(circle at 88% 90%, rgba(241, 186, 24, 0.22) 0%, rgba(241, 186, 24, 0) 36%);
}
.section--pillars::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.2px, transparent 1.7px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}
.section--pillars h2 { color: #fff; }
.section--pillars .lead { color: rgba(255, 255, 255, 0.8); }
.section--pillars .eyebrow { color: var(--gold-300); }

/* Grid */
.pillars {
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}
.pillars--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--space-lg); }

/* Each pillar carries its own accent */
.pillar--1 { --pillar: var(--navy-500); --pillar-ink: #fff; }
.pillar--2 { --pillar: var(--gold-400); --pillar-ink: var(--navy-900); }
.pillar--3 { --pillar: #3B8FE0;         --pillar-ink: #fff; }
.pillar--4 { --pillar: var(--navy-700); --pillar-ink: #fff; }

.pillar {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.section--pillars .pillar { border-color: transparent; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28); }
.pillar:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }

.pillar__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-muted); }
.pillars--wide .pillar__media { aspect-ratio: 16 / 9; }
.pillar__media img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.pillar:hover .pillar__media img { transform: scale(1.06); }
/* Colour wash rising from the foot of the photo in the pillar's accent */
.pillar__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 35, 71, 0) 45%, rgba(8, 35, 71, 0.55) 100%);
  pointer-events: none;
}
.pillar__num {
  position: absolute; z-index: 1;
  inset-block-end: 0.6rem; inset-inline-end: 1rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 2.4rem + 2vw, 4.2rem); line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.85);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.pillar__body {
  position: relative;
  display: flex; flex-direction: column; flex: 1;
  padding: 2.4rem var(--space-md) var(--space-md);
}
/* Accent bar along the seam; runs the full width on hover */
.pillar__body::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  inline-size: 34%; block-size: 4px;
  background: var(--pillar);
  transition: inline-size var(--dur-slow) var(--ease-out);
}
.pillar:hover .pillar__body::before { inline-size: 100%; }

.pillar__icon {
  position: absolute; inset-block-start: -1.7rem; inset-inline-start: var(--space-md);
  display: grid; place-items: center;
  inline-size: 3.4rem; block-size: 3.4rem; border-radius: var(--r-md);
  background: var(--pillar); color: var(--pillar-ink);
  box-shadow: 0 0 0 4px var(--surface), 0 10px 22px rgba(8, 35, 71, 0.22);
  transition: transform var(--dur-slow) var(--ease-out);
}
.pillar:hover .pillar__icon { transform: rotate(-6deg) scale(1.06); }
.pillar__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }

.pillar__kicker {
  font-size: var(--step--2); font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-subtle);
}
.pillar__title { margin-top: 0.3rem; font-size: var(--step-2); line-height: 1.15; }
.pillars--wide .pillar__title { font-size: var(--step-3); }
.pillar__title a { color: inherit; text-decoration: none; }
/* The whole card is the link target */
.pillar__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.pillar__title a:focus-visible { outline: none; }
.pillar:has(.pillar__title a:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.pillar__text {
  margin-top: var(--space-xs); flex: 1;
  font-size: var(--step--1); line-height: 1.6; color: var(--text-muted);
}
.pillars--wide .pillar__text { font-size: var(--step-0); }
.pillar__more {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: var(--space-md);
  font-size: var(--step--1); font-weight: 700; color: var(--primary);
}
.pillar__more svg { inline-size: 1rem; block-size: 1rem; transition: transform var(--dur) var(--ease-out); }
.pillar:hover .pillar__more svg { transform: translateX(5px); }

/* ==========================================================================
   Programmes — FOCUS Engagements, STEM, FATT
   Photo behind a FOCUS-blue tint (luminosity blend, as the page covers),
   with a deeper navy rising from the foot so the words read cleanly.
   ========================================================================== */

.progs {
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.prog {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  min-block-size: 34rem;
  padding: var(--space-lg);
  border-radius: var(--r-2xl);
  color: #fff;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.prog:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }

.prog__bg {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(160deg, var(--navy-500) 0%, var(--navy-600, #154E96) 55%, var(--navy-700) 100%);
}
.prog__bg img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  mix-blend-mode: luminosity; opacity: 0.62;
  transition: transform 0.9s var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.prog:hover .prog__bg img { transform: scale(1.05); opacity: 0.72; }
/* Navy rises from the foot of the card, where the text sits */
.prog::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(8, 35, 71, 0.12) 0%, rgba(8, 35, 71, 0.1) 22%,
    rgba(8, 35, 71, 0.62) 42%, rgba(8, 35, 71, 0.86) 62%, rgba(8, 35, 71, 0.95) 100%);
}
/* Gold keyline along the bottom that fills on hover */
.prog::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; z-index: 1;
  inline-size: 30%; block-size: 5px; background: var(--gold-400);
  transition: inline-size var(--dur-slow) var(--ease-out);
}
.prog:hover::before { inline-size: 100%; }

.prog__top { display: flex; align-items: center; justify-content: space-between; }
.prog__num {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-4);
  line-height: 1; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.9);
}
.prog__short {
  padding: 0.35rem 0.85rem; border-radius: var(--r-full);
  background: var(--gold-400); color: var(--navy-900);
  font-size: var(--step--2); font-weight: 800; letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.prog__body { display: flex; flex-direction: column; }
.prog__kicker {
  font-size: var(--step--2); font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--gold-300);
  text-shadow: 0 1px 8px rgba(8, 35, 71, 0.6);
}
.prog__title { margin-top: 0.4rem; font-size: var(--step-3); line-height: 1.1; color: #fff; text-shadow: 0 2px 14px rgba(8, 35, 71, 0.55); }
.prog__title a { color: inherit; text-decoration: none; }
.prog__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.prog__title a:focus-visible { outline: none; }
.prog:has(.prog__title a:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.prog__text {
  margin-top: var(--space-xs);
  font-size: var(--step-0); line-height: 1.6;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 10px rgba(8, 35, 71, 0.5);
}
.prog__list {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: var(--space-md);
}
.prog__list li {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.75rem 0.3rem 0.4rem;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(6px);
  font-size: var(--step--2); font-weight: 600; color: #fff;
}
.prog__list svg {
  inline-size: 1.1rem; block-size: 1.1rem; padding: 0.18rem;
  border-radius: 50%; background: var(--gold-400); color: var(--navy-900);
}
.prog__more {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: var(--space-lg);
  font-size: var(--step--1); font-weight: 700; color: var(--gold-300);
}
.prog__more svg { inline-size: 1.05rem; block-size: 1.05rem; transition: transform var(--dur) var(--ease-out); }
.prog:hover .prog__more svg { transform: translateX(5px); }

@media (max-width: 40rem) {
  .prog { min-block-size: 30rem; padding: var(--space-md); }
}

/* ==========================================================================
   Giving — 10K Campaign road, channel cards, campaign page
   ========================================================================== */

/* Copy chip (shared by every page that shows account details) */
.copy {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .65rem;
  font-family: var(--font-body); font-size: var(--step--2); font-weight: 700;
  color: var(--primary); background: var(--navy-50);
  border: 1px solid var(--navy-100, #D6E4F7); border-radius: var(--r-full);
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.copy:hover { background: var(--navy-100, #D6E4F7); }
.copy[data-copied="true"] { background: #ECFDF3; border-color: #ABEFC6; color: #067647; }
.ussd {
  display: inline-block; padding: .35rem .75rem;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--step-0); font-weight: 600;
  background: var(--navy-900); color: var(--gold-300);
  border-radius: var(--r-sm); letter-spacing: .04em;
}

/* ---- The road ------------------------------------------------------------ */
.section--k10-progress { padding-block-start: var(--space-xl); }
.road-card {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-radius: var(--r-2xl);
  background: var(--grad-night); color: #fff;
  box-shadow: var(--shadow-xl);
}
.road-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(45% 70% at 0% 0%, rgba(241, 186, 24, 0.18) 0%, transparent 60%),
    radial-gradient(40% 60% at 100% 100%, rgba(26, 95, 180, 0.5) 0%, transparent 65%);
}
.road-card__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md); }
.road-card__kicker {
  font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--gold-300);
}
.road-card__raised { margin-top: .4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; }
.road-card__raised strong { font-family: var(--font-display); font-size: var(--step-6); line-height: 1; color: #fff; letter-spacing: -0.02em; }
.road-card__raised span { font-size: var(--step-1); color: rgba(255, 255, 255, 0.78); }
.road-card__pct {
  display: grid; place-items: center; text-align: center;
  inline-size: 6.2rem; block-size: 6.2rem; border-radius: 50%;
  background: conic-gradient(var(--gold-400) calc(var(--pp, 11) * 1%), rgba(255, 255, 255, 0.12) 0);
  position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1;
}
.road-card__pct::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--navy-800); z-index: 0; }
.road-card__pct > * { position: relative; z-index: 1; }
.road-card__pct small { display: block; margin-top: .2rem; font-family: var(--font-body); font-size: var(--step--2); font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.road-card__pct { display: flex; flex-direction: column; justify-content: center; }

.road { position: relative; margin-block: 3.2rem 0.6rem; }
.road__lane {
  position: relative; block-size: 1.35rem; border-radius: var(--r-full);
  background: #0A1C36;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.road__fill {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: var(--p);
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400) 60%, var(--gold-300));
  box-shadow: 0 0 22px rgba(241, 186, 24, 0.55);
  border-radius: inherit;
}
.road__dash {
  position: absolute; inset-inline: 0.8rem; inset-block-start: 50%; block-size: 2px; translate: 0 -50%;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0 14px, transparent 14px 28px);
}
.road__mark {
  position: absolute; inset-block-start: 100%; inset-inline-start: var(--at);
  translate: -50% 0.45rem;
  font-size: var(--step--2); font-weight: 600; color: rgba(255, 255, 255, 0.55);
}
.road__mark::before {
  content: ""; position: absolute; inset-inline-start: 50%; inset-block-end: calc(100% + 0.2rem);
  inline-size: 2px; block-size: 0.5rem; background: rgba(255, 255, 255, 0.3);
}
.road__van {
  position: absolute; inset-block-end: 0.55rem;
  inset-inline-start: clamp(0rem, calc(var(--p) - 2.3rem), calc(100% - 4.6rem));
  inline-size: 4.6rem;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
  animation: van-idle 1.8s var(--ease-in-out) infinite;
}
.road__van svg { inline-size: 100%; block-size: auto; display: block; }
@keyframes van-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.road__flag {
  position: absolute; inset-inline-end: -0.2rem; inset-block-end: 0.9rem;
  inline-size: 2rem; color: var(--gold-400);
}
/* The lane fills and the van drives in once the card is on screen */
.js .road-card .road__fill { inline-size: 0; transition: inline-size 1.6s var(--ease-out) 0.3s; }
.js .road-card .road__van { inset-inline-start: 0; transition: inset-inline-start 1.6s var(--ease-out) 0.3s; }
.js .road-card.is-visible .road__fill { inline-size: var(--p); }
.js .road-card.is-visible .road__van { inset-inline-start: clamp(0rem, calc(var(--p) - 2.3rem), calc(100% - 4.6rem)); }
@media (prefers-reduced-motion: reduce) { .road__van { animation: none; } }

.road__ends { display: flex; justify-content: space-between; margin-top: 1.6rem; font-size: var(--step--2); color: rgba(255, 255, 255, 0.6); }

.road-card__figures {
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  margin-top: var(--space-lg);
}
.road-card__figures > div {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12);
}
.road-card__figures dt { font-size: var(--step--2); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.road-card__figures dd { margin: .25rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: #fff; }
.road-card__figures dd.is-gold { color: var(--gold-400); }

.road-clock { margin-top: var(--space-lg); }
.road-clock__bar { block-size: 6px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.road-clock__bar span { display: block; block-size: 100%; background: linear-gradient(90deg, #3B8FE0, #9CC3F0); border-radius: inherit; }
.road-clock__labels { display: flex; justify-content: space-between; gap: var(--space-sm); margin-top: .5rem; font-size: var(--step--2); color: rgba(255, 255, 255, 0.66); }
.road-clock__labels span:nth-child(2) { color: #fff; font-weight: 700; }
.road-card__note { margin-top: var(--space-md); font-size: var(--step--2); color: rgba(255, 255, 255, 0.55); }

.road-card--compact .road-card__raised strong { font-size: var(--step-5); }
.road-card--compact .road-card__pct { inline-size: 5.2rem; block-size: 5.2rem; font-size: var(--step-1); }

@media (max-width: 40rem) {
  .road-card__pct { inline-size: 4.8rem; block-size: 4.8rem; font-size: var(--step-1); }
  .road__van { inline-size: 3.6rem; }
  .road__mark { display: none; }
  .road-clock__labels span:first-child, .road-clock__labels span:last-child { display: none; }
}

/* ---- Channel cards ------------------------------------------------------- */
.gchannels { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.gchannel {
  --accent-c: var(--navy-500);
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.gchannel:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.gchannel--momo { --accent-c: var(--gold-400); --accent-ink: var(--navy-900); }
.gchannel--bank { --accent-c: var(--navy-700); --accent-ink: #fff; }
.gchannel--intl { --accent-c: var(--navy-500); --accent-ink: #fff; }
.gchannel__head {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md) var(--space-md) var(--space-md);
  background: var(--accent-c); color: var(--accent-ink);
}
.gchannel__head::after {
  content: ""; position: absolute; z-index: -1; inset-inline-end: -2.5rem; inset-block-start: -2.5rem;
  inline-size: 8rem; block-size: 8rem; border-radius: 50%;
  border: 1.2rem solid rgba(255, 255, 255, 0.16);
}
.gchannel__icon {
  flex: none; display: grid; place-items: center;
  inline-size: 3rem; block-size: 3rem; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.2);
}
.gchannel--momo .gchannel__icon { background: rgba(8, 35, 71, 0.1); }
.gchannel__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
.gchannel__kicker { display: block; font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: 0.82; }
.gchannel__title { font-size: var(--step-2); color: inherit; line-height: 1.15; }
.gchannel__body { display: grid; gap: var(--space-sm); padding: var(--space-md); flex: 1; }
.gchannel__text { font-size: var(--step--1); color: var(--text-muted); line-height: 1.55; }
.gchannel__row { display: grid; gap: .3rem; padding-block-end: var(--space-sm); border-block-end: 1px dashed var(--border); }
.gchannel__row:last-child { border-block-end: 0; padding-block-end: 0; }
.gchannel__label { font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-subtle); }
.gchannel__value { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--text-heading); }
.gchannel__value--big { font-size: var(--step-2); letter-spacing: 0.01em; }
.gchannel__value--plain { font-family: var(--font-body); font-weight: 600; font-size: var(--step-0); }
.gchannel__foot { margin: 0 var(--space-md) var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--r-md); background: var(--bg-muted); font-size: var(--step--2); color: var(--text-muted); }
.gchannel__cta { margin: 0 var(--space-md) var(--space-md); inline-size: auto; }

/* ---- Campaign page: why a van ------------------------------------------- */
.k10-why { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 62rem) { .k10-why { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 5rem); } }
.k10-van { margin: 0; }
.k10-van__frame {
  position: relative; overflow: hidden; border-radius: var(--r-2xl);
  background: var(--grad-tint); box-shadow: var(--shadow-xl);
  aspect-ratio: 3 / 2;
}
.k10-van__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.k10-van__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.6); pointer-events: none; }
.k10-van__tag {
  position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem;
  padding: .35rem .85rem; border-radius: var(--r-full);
  background: var(--gold-400); color: var(--navy-900);
  font-size: var(--step--2); font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  box-shadow: var(--shadow-md);
}
.k10-van figcaption { margin-top: .7rem; font-size: var(--step--2); color: var(--text-subtle); text-align: center; }
.k10-why__copy .lead { margin-top: var(--space-md); }
.k10-uses { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-top: var(--space-lg); }
.k10-uses li { display: flex; gap: .75rem; align-items: flex-start; }
.k10-uses__icon {
  flex: none; display: grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--r-md);
  background: var(--navy-50); color: var(--primary);
}
.k10-uses__icon svg { inline-size: 1.2rem; block-size: 1.2rem; }
.k10-uses strong { display: block; font-size: var(--step-0); color: var(--text-heading); }
.k10-uses li > span:last-child > span { display: block; font-size: var(--step--1); color: var(--text-muted); line-height: 1.5; }
.k10-reach {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm);
  margin-top: var(--space-lg); padding: var(--space-md);
  border-radius: var(--r-xl); background: var(--grad-night); color: #fff;
}
.k10-reach__item { text-align: center; }
.k10-reach__item + .k10-reach__item { border-inline-start: 1px solid rgba(255, 255, 255, 0.14); }
.k10-reach__item strong { display: block; font-family: var(--font-display); font-size: var(--step-4); line-height: 1; color: var(--gold-400); }
.k10-reach__item span { display: block; margin-top: .35rem; font-size: var(--step--2); color: rgba(255, 255, 255, 0.78); }

/* ---- How it works: tiers ------------------------------------------------ */
.k10-gold {
  background: linear-gradient(100deg, var(--gold-500), var(--gold-400));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.k10-tiers { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); align-items: stretch; }
.k10-tier {
  position: relative; display: flex; flex-direction: column;
  padding: var(--space-lg);
  border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.k10-tier:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.k10-tier__badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .75rem; border-radius: var(--r-full);
  background: var(--navy-50); color: var(--primary);
  font-size: var(--step--2); font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.k10-tier__badge svg { inline-size: .9rem; block-size: .9rem; }
.k10-tier__amount {
  margin-top: var(--space-md);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-5); line-height: 1; color: var(--text-heading); letter-spacing: -0.02em;
}
.k10-tier__amount small { display: block; margin-bottom: .3rem; font-size: var(--step--1); font-weight: 700; color: var(--text-subtle); letter-spacing: var(--tracking-caps); }
.k10-tier__title { margin-top: var(--space-sm); font-size: var(--step-1); }
.k10-tier__text { margin-top: var(--space-2xs); flex: 1; font-size: var(--step--1); color: var(--text-muted); line-height: 1.55; }
.k10-tier__math {
  margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px dashed var(--border);
  font-size: var(--step--1); font-weight: 700; color: var(--primary);
}
.k10-tier--champion {
  color: #fff;
  border: 2px solid transparent;
  /* Navy card inside a gold gradient border */
  background:
    linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 55%, var(--navy-900) 100%) padding-box,
    linear-gradient(135deg, var(--gold-300), var(--gold-500) 50%, var(--gold-300)) border-box;
  box-shadow: 0 24px 50px rgba(8, 35, 71, 0.3);
}
.k10-tier--champion .k10-tier__badge { background: var(--gold-400); color: var(--navy-900); }
.k10-tier--champion .k10-tier__amount { color: var(--gold-400); }
.k10-tier--champion .k10-tier__amount small { color: rgba(255, 255, 255, 0.6); }
.k10-tier--champion .k10-tier__title { color: #fff; }
.k10-tier--champion .k10-tier__text { color: rgba(255, 255, 255, 0.8); }
.k10-tier--champion .k10-tier__math { color: var(--gold-300); border-color: rgba(255, 255, 255, 0.18); }
@media (min-width: 62rem) { .k10-tier--champion { transform: translateY(-10px); } .k10-tier--champion:hover { transform: translateY(-16px); } }

/* Calculator */
.k10-calc {
  display: grid; gap: var(--space-lg); align-items: center;
  margin-top: var(--space-2xl); padding: var(--space-lg);
  border-radius: var(--r-2xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
}
@media (min-width: 62rem) { .k10-calc { grid-template-columns: 1fr 1.3fr 1fr; } }
.k10-calc__copy p { margin-top: var(--space-2xs); font-size: var(--step--1); }
.k10-calc__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.k10-calc__chips button {
  padding: .5rem 1rem; border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--surface);
  font-weight: 700; font-size: var(--step--1); color: var(--text-heading); cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.k10-calc__chips button:hover { border-color: var(--primary); }
.k10-calc__chips button[aria-pressed="true"] { background: var(--navy-500); border-color: var(--navy-500); color: #fff; }
.k10-calc__custom { display: grid; gap: .3rem; margin-top: var(--space-sm); font-size: var(--step--2); font-weight: 600; color: var(--text-subtle); }
.k10-calc__result {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm);
  padding: var(--space-md); border-radius: var(--r-xl); background: var(--grad-night); color: #fff; text-align: center;
}
.k10-calc__result strong { display: block; font-family: var(--font-display); font-size: var(--step-3); line-height: 1.05; color: var(--gold-400); }
.k10-calc__result span { display: block; margin-top: .25rem; font-size: var(--step--2); color: rgba(255, 255, 255, 0.75); }
.k10-calc__champ {
  grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .4rem .8rem; border-radius: var(--r-full); background: var(--gold-400); color: var(--navy-900);
  font-size: var(--step--1); font-weight: 800;
}
.k10-calc__champ svg { inline-size: 1rem; block-size: 1rem; }

.k10-contacts { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; font-size: var(--step--1); color: var(--text-muted); }
.k10-contacts a { padding: .35rem .9rem; border-radius: var(--r-full); background: var(--navy-50); font-weight: 600; text-decoration: none; }
.k10-contacts a:hover { background: var(--navy-100, #D6E4F7); }

/* ---- Quote from the General Secretary ---------------------------------- */
.k10-quote {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(4rem, 3rem + 5vw, 7rem);
  color: #fff; text-align: center;
}
.k10-quote__bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, var(--navy-800), var(--navy-500)); }
.k10-quote__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; mix-blend-mode: luminosity; opacity: 0.32; }
.k10-quote__mark { inline-size: 3.2rem; block-size: 3.2rem; color: var(--gold-400); margin-inline: auto; }
.k10-quote blockquote {
  margin: var(--space-md) auto 0; max-inline-size: 46rem;
  font-family: var(--font-display); font-size: var(--step-3); line-height: 1.3; font-weight: 600;
  color: #fff; text-wrap: balance;
}
.k10-quote figcaption { margin-top: var(--space-lg); }
.k10-quote figcaption strong { display: block; font-size: var(--step-0); color: var(--gold-300); }
.k10-quote figcaption span { display: block; margin-top: .2rem; font-size: var(--step--1); color: rgba(255, 255, 255, 0.75); }

/* ---- Share -------------------------------------------------------------- */
.k10-share {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-lg); border-radius: var(--r-2xl);
  background: var(--grad-accent); border: 1px solid var(--border);
}
.k10-share p { margin-top: .3rem; font-size: var(--step--1); }
.k10-share__buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.k10-share__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.05rem; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--step--1); font-weight: 700; color: var(--text-heading); text-decoration: none; cursor: pointer;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.k10-share__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.k10-share__btn svg { inline-size: 1.05rem; block-size: 1.05rem; }
.k10-share__btn--wa { background: #1FAF55; border-color: #1FAF55; color: #fff; }

/* ---- Donate page: impact and more ways to help --------------------------- */
.impact { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.impact__card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: var(--space-lg);
  border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.impact__card::after {
  content: ""; position: absolute; z-index: -1; inset-inline-end: -3rem; inset-block-start: -3rem;
  inline-size: 9rem; block-size: 9rem; border-radius: 50%; background: var(--gold-50, #FEFAED);
}
.impact__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.impact__icon {
  display: grid; place-items: center;
  inline-size: 3rem; block-size: 3rem; border-radius: var(--r-md);
  background: var(--navy-500); color: #fff;
  box-shadow: 0 10px 20px rgba(26, 95, 180, 0.28);
}
.impact__icon svg { inline-size: 1.4rem; block-size: 1.4rem; }
.impact__amount {
  margin-top: var(--space-md);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-6); line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, var(--navy-700), var(--navy-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.impact__period {
  align-self: flex-start; margin-top: .5rem;
  padding: .2rem .65rem; border-radius: var(--r-full);
  background: var(--gold-100); color: var(--gold-800, #6B4B10);
  font-size: var(--step--2); font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.impact__text { margin-top: var(--space-sm); font-size: var(--step--1); color: var(--text-muted); line-height: 1.55; }

.helpways { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.helpway {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  padding: var(--space-md);
  border-radius: var(--r-lg);
  background: var(--grad-tint); border: 1px solid var(--border);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.helpway:hover { border-color: var(--navy-200); transform: translateY(-3px); }
.helpway__icon {
  flex: none; display: grid; place-items: center;
  inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%;
  background: var(--gold-400); color: var(--navy-900);
}
.helpway__icon svg { inline-size: 1.2rem; block-size: 1.2rem; }
.helpway__title { font-size: var(--step-0); }
.helpway__text { margin-top: .2rem; font-size: var(--step--1); color: var(--text-muted); }
@media (min-width: 62rem) { .helpways { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Applications, events & tickets, documents, voices, contact
   ========================================================================== */

/* ---- Apply forms --------------------------------------------------------- */
.apply { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 64rem) { .apply { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-3xl); } }
.apply__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: var(--space-md); }
@media (max-width: 63.99rem) { .apply__aside { position: static; } }
.apply__card { padding: var(--space-lg); border-radius: var(--r-xl); background: var(--grad-tint); border: 1px solid var(--border); }
.apply__points { display: grid; gap: var(--space-md); margin-top: var(--space-md); counter-reset: step; }
.apply__points li { position: relative; padding-inline-start: 2.4rem; counter-increment: step; }
.apply__points li::before {
  content: counter(step); position: absolute; inset-inline-start: 0; inset-block-start: 0;
  inline-size: 1.7rem; block-size: 1.7rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy-500); color: #fff; font-size: var(--step--2); font-weight: 700;
}
.apply__points strong { display: block; font-size: var(--step-0); color: var(--text-heading); }
.apply__points span { display: block; margin-top: .15rem; font-size: var(--step--1); color: var(--text-muted); line-height: 1.5; }
.apply__note { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px dashed var(--border); font-size: var(--step--2); color: var(--text-muted); }
.apply__switch { display: grid; gap: .4rem; padding: var(--space-md); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.apply__switch-label { font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.apply__switch a { font-weight: 600; text-decoration: none; font-size: var(--step--1); }
.apply__switch a:hover { text-decoration: underline; }

.apply__form { display: grid; gap: var(--space-lg); }
.apply__set { border: 0; padding: 0; margin: 0; }
.apply__set legend { display: flex; align-items: center; gap: .6rem; margin-bottom: var(--space-md); font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; color: var(--text-heading); }
.apply__step {
  display: grid; place-items: center; flex: none;
  inline-size: 1.9rem; block-size: 1.9rem; border-radius: 50%;
  background: var(--gold-400); color: var(--navy-900);
  font-size: var(--step--1); font-weight: 800;
}
.apply__grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.field--wide { grid-column: 1 / -1; }
.apply__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border); }
.apply__submit .text-subtle { font-size: var(--step--2); }

.apply-done { max-inline-size: 40rem; margin-inline: auto; text-align: center; padding: var(--space-2xl) var(--space-lg); border-radius: var(--r-2xl); background: var(--grad-tint); border: 1px solid var(--border); }
.apply-done__tick { display: grid; place-items: center; inline-size: 4rem; block-size: 4rem; margin-inline: auto; margin-bottom: var(--space-md); border-radius: 50%; background: var(--gold-400); color: var(--navy-900); }
.apply-done__tick svg { inline-size: 1.8rem; block-size: 1.8rem; }

/* ---- Event cards & detail ------------------------------------------------ */
.event--link .event__media { position: relative; }
.event__tag {
  position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem;
  padding: .25rem .7rem; border-radius: var(--r-full);
  background: var(--navy-700); color: #fff;
  font-size: var(--step--2); font-weight: 800; letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.event__tag--free { background: var(--gold-400); color: var(--navy-900); }
.event__body h3 a { color: inherit; text-decoration: none; }
.event__body h3 a:hover { color: var(--primary); }
.event__price { font-weight: 700; color: var(--primary); }
.event__price small { font-weight: 600; color: var(--text-subtle); }
.event__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: var(--space-sm); }
.event__seats { font-size: var(--step--2); font-weight: 700; color: var(--gold-700, #8E640C); }

.ev { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 64rem) { .ev { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: var(--space-3xl); } }
.ev__facts { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.ev__fact { padding: var(--space-md); border-radius: var(--r-lg); background: var(--grad-tint); border: 1px solid var(--border); }
.ev__fact-label { display: block; font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.ev__fact strong { display: block; margin-top: .3rem; font-size: var(--step-0); color: var(--text-heading); }
.ev__eb { display: inline-block; padding: .1rem .5rem; border-radius: var(--r-full); background: var(--gold-400); color: var(--navy-900); font-size: var(--step--2); }
.ev__steps { margin-top: var(--space-xl); padding: var(--space-lg); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.ev__steps ol { display: grid; gap: var(--space-sm); margin-top: var(--space-md); counter-reset: s; }
.ev__steps li { position: relative; padding-inline-start: 2.3rem; counter-increment: s; font-size: var(--step--1); color: var(--text-muted); line-height: 1.6; }
.ev__steps li::before {
  content: counter(s); position: absolute; inset-inline-start: 0; inset-block-start: -0.1rem;
  inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy-50); color: var(--primary); font-weight: 800; font-size: var(--step--2);
}
.ev__steps strong { color: var(--text-heading); }

.ev__side { position: sticky; top: calc(var(--header-h) + 1.5rem); }
@media (max-width: 63.99rem) { .ev__side { position: static; } }
.ev__box { padding: var(--space-lg); border-radius: var(--r-2xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); text-align: center; }
.ev__badge { display: inline-block; padding: .3rem .8rem; border-radius: var(--r-full); background: var(--gold-400); color: var(--navy-900); font-size: var(--step--2); font-weight: 800; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.ev__badge--full { background: var(--navy-700); color: #fff; }
.ev__badge--past { background: var(--bg-muted); color: var(--text-muted); }
.ev__price { display: block; margin-top: var(--space-md); font-family: var(--font-display); font-weight: 700; font-size: var(--step-5); line-height: 1; color: var(--text-heading); }
.ev__price small { display: block; font-size: var(--step--1); color: var(--text-subtle); letter-spacing: var(--tracking-caps); }
.ev__was { display: block; margin-top: .4rem; font-size: var(--step--2); color: var(--text-subtle); text-decoration: line-through; }
.ev__note { margin-top: var(--space-sm); font-size: var(--step--2); color: var(--text-muted); }
.ev__summary { display: grid; gap: .5rem; margin-top: var(--space-md); text-align: start; }
.ev__summary li { display: flex; justify-content: space-between; gap: var(--space-sm); padding-block-end: .5rem; border-block-end: 1px dashed var(--border); font-size: var(--step--1); }
.ev__summary li:last-child { border: 0; }
.ev__summary span { color: var(--text-subtle); }
.ev__share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px dashed var(--border); }
.ev__share > span { inline-size: 100%; font-size: var(--step--2); color: var(--text-subtle); }

/* ---- Ticket -------------------------------------------------------------- */
.ticket-page { min-block-size: 60vh; }
.ticket {
  display: grid; overflow: hidden;
  border-radius: var(--r-2xl); background: var(--surface);
  box-shadow: var(--shadow-xl); border: 1px solid var(--border);
}
@media (min-width: 48rem) { .ticket { grid-template-columns: 17rem 1fr; } }
.ticket__stub {
  display: grid; justify-items: center; align-content: center; gap: .5rem;
  padding: var(--space-lg);
  background: var(--grad-night); color: #fff;
  position: relative;
}
.ticket__stub::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: -0.6rem; inline-size: 1.2rem;
  background: radial-gradient(circle at center, var(--bg) 0.55rem, transparent 0.56rem) repeat-y;
  background-size: 1.2rem 1.6rem;
}
@media (max-width: 47.99rem) {
  .ticket__stub::after { inset: auto 0 -0.6rem 0; inline-size: auto; block-size: 1.2rem;
    background: radial-gradient(circle at center, var(--bg) 0.55rem, transparent 0.56rem) repeat-x;
    background-size: 1.6rem 1.2rem; }
}
.ticket__brand { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); letter-spacing: .04em; }
.ticket__kind { font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold-300); }
.ticket__qr { margin-block: var(--space-sm); padding: .7rem; border-radius: var(--r-md); background: #fff; line-height: 0; }
.ticket__qr img { inline-size: 11rem; block-size: 11rem; }
.ticket__ref { font-family: var(--font-mono, monospace); font-size: var(--step-1); font-weight: 700; letter-spacing: .12em; color: var(--gold-400); }
.ticket__scan { font-size: var(--step--2); color: rgba(255, 255, 255, 0.7); text-align: center; }
.ticket__body { padding: var(--space-lg); }
.ticket__status { display: inline-block; padding: .25rem .75rem; border-radius: var(--r-full); font-size: var(--step--2); font-weight: 800; letter-spacing: var(--tracking-wide); text-transform: uppercase; background: #ECFDF3; color: #067647; }
.ticket__status--submitted { background: var(--gold-100); color: var(--gold-800, #6B4B10); }
.ticket__status--cancelled { background: #FEE4E2; color: #B42318; }
.ticket__event { margin-top: var(--space-sm); font-size: var(--step-3); }
.ticket__facts { display: grid; gap: .6rem; margin-top: var(--space-md); }
.ticket__facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-block-end: .6rem; border-block-end: 1px dashed var(--border); }
.ticket__facts dt { font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-subtle); }
.ticket__facts dd { margin: 0; font-weight: 600; color: var(--text-heading); }
.ticket__pending { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--r-md); background: var(--gold-50, #FEFAED); font-size: var(--step--1); color: var(--text-muted); }
.ticket__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-lg); }
.ticket__note { margin-top: var(--space-sm); font-size: var(--step--2); color: var(--text-subtle); }

.ticket-pay { max-inline-size: 44rem; margin-inline: auto; padding: var(--space-xl); border-radius: var(--r-2xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.ticket-pay__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-block: var(--space-lg); padding: var(--space-md); border-radius: var(--r-xl); background: var(--grad-night); color: #fff; }
.ticket-pay__amount span { font-size: var(--step--1); color: rgba(255, 255, 255, 0.75); }
.ticket-pay__amount strong { font-family: var(--font-display); font-size: var(--step-4); color: var(--gold-400); }
.ticket-pay__amount em { font-style: normal; font-size: var(--step--2); color: var(--gold-300); }
.ticket-pay__how { display: grid; gap: var(--space-md); counter-reset: p; }
.ticket-pay__how li { position: relative; padding-inline-start: 2.2rem; counter-increment: p; }
.ticket-pay__how li::before { content: counter(p); position: absolute; inset-inline-start: 0; inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--navy-50); color: var(--primary); font-weight: 800; font-size: var(--step--2); }
.ticket-pay__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .35rem; font-weight: 600; color: var(--text-heading); }
.ticket-pay__form { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px dashed var(--border); display: grid; gap: var(--space-md); justify-items: start; }
.ticket-pay__form .field { inline-size: min(100%, 22rem); }

.verify { padding: var(--space-lg); border-radius: var(--r-xl); border: 2px solid var(--border); background: var(--surface); }
.verify--ok { border-color: #12B76A; }
.verify--no { border-color: #F04438; }
.verify__status { display: inline-block; padding: .25rem .75rem; border-radius: var(--r-full); background: var(--navy-50); color: var(--primary); font-size: var(--step--2); font-weight: 800; text-transform: uppercase; }

@media print {
  .site-header, .topbar, .site-footer, .cookie, .ticket__actions, .breadcrumb { display: none !important; }
  .ticket { box-shadow: none; border: 1px solid #999; }
  .section { padding: 0 !important; }
}

/* ---- Document actions (read / download / share) -------------------------- */
.docacts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-md); }
.docacts a, .docacts button {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.05rem; border-radius: var(--r-full);
  font-size: var(--step--1); font-weight: 700; text-decoration: none; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-heading);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.docacts a:hover, .docacts button:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.docacts svg { inline-size: 1.05rem; block-size: 1.05rem; }
.docacts__read { background: var(--navy-500) !important; border-color: var(--navy-500) !important; color: #fff !important; }
.docacts__dl { background: var(--gold-400) !important; border-color: var(--gold-400) !important; color: var(--navy-900) !important; }
.docacts button[data-copied="true"] { background: #ECFDF3; border-color: #ABEFC6; color: #067647; }
.docacts--sm a, .docacts--sm button { padding: .45rem .8rem; font-size: var(--step--2); }

/* ---- Newsletter issues --------------------------------------------------- */
.issues { display: grid; gap: var(--space-lg); }
@media (min-width: 52rem) { .issues { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); } }
.issue {
  display: grid; gap: var(--space-lg); align-items: start;
  grid-template-columns: 7.5rem 1fr;
  padding: var(--space-lg); border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.issue:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.issue__cover {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-md);
  background: var(--grad-night); box-shadow: var(--shadow-md);
  display: grid; align-content: start; gap: .5rem; padding: .7rem; overflow: hidden;
}
.issue__cover::after { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: .35rem; background: var(--gold-400); }
.issue__pdf { font-size: var(--step--2); font-weight: 800; color: var(--gold-400); letter-spacing: .1em; }
.issue__lines { display: grid; gap: .32rem; margin-top: .3rem; }
.issue__lines i { display: block; block-size: .24rem; border-radius: 2px; background: rgba(255, 255, 255, 0.28); }
.issue__lines i:nth-child(2) { inline-size: 80%; }
.issue__lines i:nth-child(4) { inline-size: 65%; }
.issue__lines i:nth-child(5) { inline-size: 85%; }
.issue__meta { font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--primary); }
.issue__title { margin-top: .25rem; font-size: var(--step-2); }
.issue__text { margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--text-muted); line-height: 1.55; }
@media (max-width: 30rem) { .issue { grid-template-columns: 1fr; } .issue__cover { inline-size: 6rem; } }

/* ---- Literature ---------------------------------------------------------- */
.lits { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.lit {
  position: relative; display: flex; overflow: hidden;
  border-radius: var(--r-xl); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.lit:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.lit__spine { flex: none; inline-size: .55rem; background: linear-gradient(180deg, var(--navy-500), var(--navy-700)); }
.lit:nth-child(even) .lit__spine { background: linear-gradient(180deg, var(--gold-400), var(--gold-500)); }
.lit__body { padding: var(--space-lg); display: flex; flex-direction: column; flex: 1; }
.lit__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.lit__kind { font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-subtle); }
.lit__title { margin-top: var(--space-sm); font-size: var(--step-1); }
.lit__meta { margin-top: .2rem; font-size: var(--step--2); color: var(--text-subtle); }
.lit__text { margin-top: var(--space-sm); flex: 1; font-size: var(--step--1); color: var(--text-muted); line-height: 1.55; }
.lit__ask { display: grid; gap: .4rem; margin-top: var(--space-md); }
.lit__ask .text-subtle { font-size: var(--step--2); }

/* ---- Voices -------------------------------------------------------------- */
.section--voices { background: var(--grad-dawn); }
.voices { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.voice {
  display: flex; flex-direction: column; margin: 0;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.voice:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.voice__photo { position: relative; aspect-ratio: 1 / 1; background: var(--navy-50); display: grid; place-items: center; overflow: hidden; }
.voice__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.voice__initials { font-family: var(--font-display); font-size: var(--step-6); font-weight: 700; color: var(--navy-200, #B3CDEF); }
.voice__role {
  position: absolute; inset-block-end: .6rem; inset-inline-start: .6rem;
  padding: .25rem .7rem; border-radius: var(--r-full);
  background: rgba(8, 35, 71, 0.82); color: #fff; backdrop-filter: blur(6px);
  font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.voice__quote { position: relative; padding: var(--space-lg) var(--space-md) var(--space-sm); flex: 1; }
.voice__mark { inline-size: 1.6rem; block-size: 1.6rem; color: var(--gold-400); }
.voice__quote p { margin-top: .4rem; font-size: var(--step--1); line-height: 1.6; color: var(--text); }
.voice__pending { color: var(--text-subtle); font-style: italic; }
.voice__by { padding: 0 var(--space-md) var(--space-lg); display: grid; gap: .1rem; }
.voice__by strong { font-size: var(--step-0); color: var(--text-heading); }
.voice__by span { font-size: var(--step--2); color: var(--text-subtle); }
.voice__by .link-arrow { margin-top: .5rem; font-size: var(--step--2); }
.voice--soon { border-style: dashed; box-shadow: none; background: var(--bg); }
.voice--soon .voice__photo { filter: saturate(0.35); }

/* ---- Contact ------------------------------------------------------------- */
.reasons { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.reason {
  display: grid; justify-items: start; gap: .3rem; text-align: start;
  padding: var(--space-md); border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border); cursor: pointer;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.reason:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--navy-200, #B3CDEF); }
.reason[data-active="true"] { border-color: var(--navy-500); box-shadow: 0 0 0 2px var(--navy-500) inset; }
.reason__icon { display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: var(--r-md); background: var(--navy-50); color: var(--primary); margin-bottom: .3rem; }
.reason__icon svg { inline-size: 1.2rem; block-size: 1.2rem; }
.reason__label { font-weight: 700; font-size: var(--step--1); color: var(--text-heading); }
.reason__team { font-size: var(--step--2); color: var(--text-subtle); }

.reach { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.reach__card {
  display: grid; gap: .2rem; padding: var(--space-lg);
  border-radius: var(--r-xl); text-decoration: none;
  background: var(--grad-tint); border: 1px solid var(--border);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.reach__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.reach__icon { display: grid; place-items: center; inline-size: 2.8rem; block-size: 2.8rem; border-radius: 50%; background: var(--navy-500); color: #fff; margin-bottom: var(--space-sm); }
.reach__icon--wa { background: #1FAF55; }
.reach__icon svg { inline-size: 1.3rem; block-size: 1.3rem; }
.reach__label { font-size: var(--step--2); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.reach__value { font-size: var(--step-0); color: var(--text-heading); word-break: break-word; }
.reach__go { margin-top: .3rem; font-size: var(--step--2); font-weight: 700; color: var(--primary); }

.contact { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 64rem) { .contact { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-3xl); } }
.contact__who { display: grid; gap: .1rem; margin-top: var(--space-lg); padding: var(--space-md); border-radius: var(--r-lg); background: var(--grad-night); color: #fff; }
.contact__who-label { font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold-300); }
.contact__who strong { font-size: var(--step-1); }
.contact__who span[data-who-email] { font-size: var(--step--1); color: rgba(255, 255, 255, 0.78); }
.contact__list { display: grid; gap: .5rem; margin-top: var(--space-lg); }
.contact__list li { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--step--1); color: var(--text-muted); }
.contact__list svg { flex: none; inline-size: 1.1rem; block-size: 1.1rem; padding: .15rem; border-radius: 50%; background: var(--gold-100); color: var(--navy-700); margin-top: .15rem; }
.contact__hours { display: grid; gap: .4rem; margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px dashed var(--border); }
.contact__hours strong { font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.contact__hours a { font-weight: 600; font-size: var(--step--1); text-decoration: none; }
.contact__hours a span { display: block; font-weight: 400; font-size: var(--step--2); color: var(--text-subtle); }
.contact__form { padding: var(--space-lg); border-radius: var(--r-2xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.field--count { position: relative; }
.field__count { display: block; margin-top: .3rem; font-size: var(--step--2); color: var(--text-subtle); text-align: end; }

.faqs { display: grid; gap: .6rem; }
.faq { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-md); cursor: pointer; list-style: none;
  font-weight: 700; color: var(--text-heading);
}
.faq summary::-webkit-details-marker { display: none; }
.faq__sign { position: relative; flex: none; inline-size: 1.3rem; block-size: 1.3rem; border-radius: 50%; background: var(--navy-50); }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  translate: -50% -50%; background: var(--primary); border-radius: 2px;
}
.faq__sign::before { inline-size: .65rem; block-size: 2px; }
.faq__sign::after { inline-size: 2px; block-size: .65rem; transition: opacity var(--dur) var(--ease-out); }
.faq[open] .faq__sign::after { opacity: 0; }
.faq[open] summary { color: var(--primary); }
.faq__body { padding: 0 var(--space-md) var(--space-md); font-size: var(--step--1); color: var(--text-muted); line-height: 1.6; }
.ev__steps ol { list-style: none; padding: 0; }
@media (min-width: 52rem) { .reasons { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .reasons { grid-template-columns: repeat(6, 1fr); } }

/* ==========================================================================
   Countdown to the next event
   ========================================================================== */

.cd {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.25rem);
  color: #fff;
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 55%, var(--navy-500) 100%);
}
.cd__bg { position: absolute; inset: 0; z-index: -2; }
.cd__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; mix-blend-mode: luminosity; opacity: 0.4; }
.cd::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(55% 80% at 15% 50%, rgba(8, 35, 71, 0.85) 0%, rgba(8, 35, 71, 0.35) 70%, transparent 100%),
    linear-gradient(180deg, rgba(8, 35, 71, 0.35), rgba(8, 35, 71, 0.55));
}
.cd::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 4px; z-index: 1;
  background: linear-gradient(90deg, var(--gold-400), transparent 60%);
}
.cd__inner { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 62rem) { .cd__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-2xl); } }

.cd__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--step--2); font-weight: 800;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold-300);
}
.cd__live {
  inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--gold-400);
  box-shadow: 0 0 0 0 rgba(241, 186, 24, .7); animation: cd-pulse 2s var(--ease-out) infinite;
}
@keyframes cd-pulse {
  0% { box-shadow: 0 0 0 0 rgba(241, 186, 24, .7); }
  70% { box-shadow: 0 0 0 8px rgba(241, 186, 24, 0); }
  100% { box-shadow: 0 0 0 0 rgba(241, 186, 24, 0); }
}
.cd__title { margin-top: .5rem; font-size: var(--step-5); line-height: 1.08; color: #fff; text-wrap: balance; text-shadow: 0 2px 18px rgba(8, 35, 71, .45); }
.cd__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: var(--space-sm); font-size: var(--step-0); color: rgba(255, 255, 255, .88); }
.cd__meta span { display: inline-flex; align-items: center; gap: .4rem; }
/* No inline separator: it strands a dot at the start of a wrapped line. */
.cd__meta span { padding-inline-start: .9rem; position: relative; }
.cd__meta span::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .55em; inline-size: .35rem; block-size: .35rem; border-radius: 50%; background: var(--gold-400); }
.cd__price { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: var(--space-md); }
.cd__price strong { font-family: var(--font-display); font-size: var(--step-2); color: var(--gold-400); }
.cd__eb, .cd__seats {
  padding: .25rem .7rem; border-radius: var(--r-full);
  font-size: var(--step--2); font-weight: 700;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24);
}
.cd__eb { background: var(--gold-400); color: var(--navy-900); border-color: transparent; }
.cd__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--space-lg); }

.cd__units { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.cd__unit {
  position: relative; display: grid; justify-items: center; gap: .25rem;
  padding: var(--space-md) .5rem;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
}
.cd__unit::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: -.32rem;
  inline-size: .35rem; block-size: .35rem; border-radius: 50%;
  background: rgba(255, 255, 255, .4);
}
.cd__unit:last-child::after { display: none; }
.cd__num {
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: #fff;
}
.cd__unit--secs .cd__num { color: var(--gold-400); }
.cd__num[data-tick="true"] { animation: cd-tick .45s var(--ease-out); }
@keyframes cd-tick {
  0% { transform: translateY(-28%) scale(.94); opacity: .25; filter: blur(1px); }
  100% { transform: none; opacity: 1; filter: none; }
}
.cd__label { font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.cd__says { margin-top: var(--space-md); text-align: center; font-size: var(--step--1); color: rgba(255, 255, 255, .8); }
.cd--over .cd__units { opacity: .5; }

@media (max-width: 30rem) {
  .cd__units { gap: .35rem; }
  .cd__unit { padding: var(--space-sm) .25rem; border-radius: var(--r-lg); }
  .cd__unit::after { display: none; }
}

/* ==========================================================================
   Motion: page transitions, sticky header, staggered reveals, parallax
   ========================================================================== */

/* Cross-page fade where the browser supports it; ignored everywhere else. */
@view-transition { navigation: auto; }

/* The header tightens and lifts once the page scrolls. */
.site-header { transition: box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.site-header.is-stuck { box-shadow: 0 10px 30px rgba(8, 35, 71, 0.22); }
.site-header.is-stuck .brand img { block-size: 2.5rem; }
.site-header .brand img { transition: block-size var(--dur-slow) var(--ease-out); }

/* Reveal variants — set on a parent, children come in one after another. */
.js .reveal--stagger > * { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-slower) var(--ease-out); }
.js .reveal--stagger.is-visible > * { opacity: 1; transform: none; }
.js .reveal--stagger.is-visible > *:nth-child(1) { transition-delay: 40ms; }
.js .reveal--stagger.is-visible > *:nth-child(2) { transition-delay: 110ms; }
.js .reveal--stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.js .reveal--stagger.is-visible > *:nth-child(4) { transition-delay: 250ms; }
.js .reveal--stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.js .reveal--stagger.is-visible > *:nth-child(6) { transition-delay: 390ms; }
.js .reveal--zoom { opacity: 0; transform: scale(.965); }
.js .reveal--zoom.is-visible { opacity: 1; transform: none; }
.js .reveal--left { opacity: 0; transform: translateX(-22px); }
.js .reveal--left.is-visible { opacity: 1; transform: none; }
.js .reveal--right { opacity: 0; transform: translateX(22px); }
.js .reveal--right.is-visible { opacity: 1; transform: none; }

/* The gold rule beside a section eyebrow draws itself in. */
.js .eyebrow::before { transition: inline-size .7s var(--ease-out); }
.js .reveal .eyebrow::before, .js .reveal.eyebrow::before { inline-size: 0; }
.js .reveal.is-visible .eyebrow::before, .js .reveal.is-visible.eyebrow::before { inline-size: 1.6rem; }

/* Interior cover photos drift a little as the page scrolls. */
.page-hero__bg img { will-change: transform; }

/* A sheen that crosses the gold buttons on hover. */
.btn--accent { position: relative; overflow: hidden; }
.btn--accent::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: -60%;
  inline-size: 45%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  opacity: 0; pointer-events: none;
}
.btn--accent:hover::after { animation: btn-sheen .75s var(--ease-out); }
@keyframes btn-sheen {
  from { inset-inline-start: -60%; opacity: 1; }
  to { inset-inline-start: 120%; opacity: 0; }
}

/* Links that underline themselves from the left. */
.link-arrow { position: relative; }
.link-arrow::after {
  content: ""; position: absolute; inset-block-end: -2px; inset-inline-start: 0;
  inline-size: 0; block-size: 2px; background: currentColor; border-radius: 2px;
  transition: inline-size var(--dur) var(--ease-out);
}
.link-arrow:hover::after { inline-size: 100%; }

/* Ghost button that works on a photograph. */
.btn--ghost-light {
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 1px solid rgba(255, 255, 255, .4); backdrop-filter: blur(8px);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, .22); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .cd__live, .cd__num[data-tick="true"] { animation: none !important; }
  .btn--accent:hover::after { animation: none; }
  .js .reveal--stagger > *, .js .reveal--zoom, .js .reveal--left, .js .reveal--right { opacity: 1; transform: none; }
}

/* ==========================================================================
   Milestones timeline — rebuilt
   The rail runs down its own column behind the year badges, so it never
   crosses a word. Where the browser supports scroll-driven animation, the
   gold fill follows the reader down the page.
   ========================================================================== */
ol.timeline {
  position: relative; display: grid; gap: var(--space-md);
  margin: 0; padding: 0; list-style: none;
}
ol.timeline::before,
ol.timeline::after {
  content: ""; position: absolute;
  inset-inline-start: 2.15rem; inline-size: 3px; border-radius: 3px;
  inset-block: 1.6rem 1.6rem;
}
ol.timeline::before { background: linear-gradient(var(--navy-100, #D9E6F7), var(--border)); }
ol.timeline::after {
  background: linear-gradient(var(--gold-400), var(--navy-500));
  transform-origin: 50% 0; scale: 1 0;
  animation: rail-fill linear both;
  animation-timeline: view();
  animation-range: cover 10% cover 80%;
}
@keyframes rail-fill { to { scale: 1 1; } }
@supports not (animation-timeline: view()) { ol.timeline::after { display: none; } }

.timeline__item {
  position: relative; display: grid; gap: var(--space-sm) var(--space-md);
  grid-template-columns: 4.4rem minmax(0, 1fr); align-items: start;
}
.timeline__year {
  grid-column: 1; grid-row: 1 / span 2; position: relative; z-index: 1;
  display: grid; place-items: center;
  inline-size: 4.4rem; block-size: 4.4rem; border-radius: 50%;
  background: var(--grad-night); color: #fff;
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0; line-height: 1;
  box-shadow: 0 0 0 5px var(--bg), var(--shadow-md);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.timeline__item:last-child .timeline__year { background: var(--grad-gold); color: var(--navy-900); }
.timeline__item:hover .timeline__year { transform: scale(1.06); box-shadow: 0 0 0 5px var(--bg), var(--shadow-lg); }
.timeline__body {
  grid-column: 2; grid-row: 1 / span 2;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.timeline__item:hover .timeline__body { transform: translateX(4px); box-shadow: var(--shadow-md); }
.timeline__body h3 { font-size: var(--step-1); }
.timeline__body p { margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--text-muted); line-height: 1.6; }
/* Dark grounds */
.on-dark ol.timeline::before { background: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.1)); }
.on-dark .timeline__year { box-shadow: 0 0 0 5px var(--navy-900), var(--shadow-md); }
.on-dark .timeline__body { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }

@media (max-width: 36rem) {
  ol.timeline::before, ol.timeline::after { inset-inline-start: 1.7rem; }
  .timeline__item { grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-sm); }
  .timeline__year { inline-size: 3.5rem; block-size: 3.5rem; font-size: var(--step--2); }
  .timeline__body { padding: var(--space-sm) var(--space-md); }
}

/* ==========================================================================
   Typography polish — even rags, no stranded last words
   ========================================================================== */
h1, h2, h3, .display, .h1, .h2, .h3 { text-wrap: balance; }
p, li, dd, figcaption, .card__text, .lit__text, .voice__quote p { text-wrap: pretty; }
/* A single card in a row of many keeps a sensible measure instead of stretching. */
.grid > :only-child, .lits > :only-child, .issues > :only-child,
.people > :only-child, .progs > :only-child { max-inline-size: 34rem; }

/* ==========================================================================
   The eight regions — the deep blue "FOCUS across Uganda" band, with a card
   for each region: its chairpersons, staff and number of Christian Unions.
   ========================================================================== */
.explore {
  position: relative; overflow: hidden; padding-block: var(--space-2xl); text-align: center; color: #fff;
  background-color: var(--navy-900);
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1.4px),
    radial-gradient(circle at 15% 20%, rgba(26, 95, 180, 0.55), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(241, 186, 24, 0.18), transparent 40%),
    linear-gradient(150deg, var(--navy-900), var(--navy-700));
  background-size: 22px 22px, auto, auto, auto;
}
.explore__head { max-inline-size: 46rem; margin-inline: auto; }
.explore__head h2 { font-size: var(--step-4); font-weight: 800; color: #fff; }
.explore__head p { margin-top: var(--space-sm); font-size: var(--step-0); color: rgba(255, 255, 255, 0.82); }
.explore__regions {
  list-style: none; padding: 0; margin: var(--space-xl) auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 0.9rem; max-inline-size: 58rem;
}
.explore__regions li {
  padding: 0.55rem 1.15rem; font-size: var(--step--1); font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy-900);
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  background: var(--gold-400); transform: rotate(-1.5deg);
}
.explore__regions li:nth-child(4n+2) { background: #7cc0f2; transform: rotate(1.5deg); }
.explore__regions li:nth-child(4n+3) { background: #9fd8a6; }
.explore__regions li:nth-child(4n+4) { background: #f4a88c; transform: rotate(1.5deg); }
.explore__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }

.explore__regions a { color: inherit; text-decoration: none; }
.explore__regions li { transition: transform var(--dur) var(--ease-out); }
.explore__regions li:hover { transform: rotate(0deg) translateY(-3px); }

.explore--regions { padding-block: var(--space-2xl) var(--space-3xl); scroll-margin-top: var(--header-h); }
.rcards {
  --tag: var(--gold-400);
  display: grid; gap: var(--space-md); margin-block-end: var(--space-xl); text-align: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
}
.rcard {
  position: relative; display: flex; flex-direction: column; gap: 0.65rem;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  scroll-margin-top: calc(var(--header-h) + 1rem);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.rcard::before { content: ""; position: absolute; inset: 0 0 auto; block-size: 4px; background: var(--tag); }
.rcard:nth-child(4n+2) { --tag: #7cc0f2; }
.rcard:nth-child(4n+3) { --tag: #9fd8a6; }
.rcard:nth-child(4n+4) { --tag: #f4a88c; }
.rcard:hover, .rcard:target { transform: translateY(-4px); border-color: var(--tag); }
.rcard:target { background-color: rgba(255, 255, 255, 0.06); }
.rcard__head { display: flex; align-items: center; gap: 0.6rem; }
.rcard__num {
  display: grid; place-items: center; flex: none; inline-size: 2.1rem; block-size: 2.1rem;
  border-radius: 50%; background: var(--tag); color: var(--navy-900);
  font-size: var(--step--2); font-weight: 800;
}
.rcard__name { font-size: var(--step-1); font-weight: 800; color: #fff; }
.rcard__note { font-size: var(--step--2); line-height: 1.5; color: rgba(255, 255, 255, 0.7); }
.rcard__list { display: grid; margin: auto 0 0; }
.rcard__list > div {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.6rem; align-items: baseline;
  padding-block: 0.5rem; border-block-start: 1px solid rgba(255, 255, 255, 0.12);
}
.rcard__list dt {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.rcard__list dd { margin: 0; font-size: var(--step--1); font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.rcard__list dd.is-pending { font-weight: 500; font-style: italic; color: rgba(255, 255, 255, 0.5); }
.rcard__cus dd:not(.is-pending) { font-family: var(--font-display); font-size: var(--step-2); font-weight: 800; line-height: 1; color: var(--tag); }

/* ==========================================================================
   Statement of faith
   ========================================================================== */
.faith { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 64rem) { .faith { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-3xl); } }
.faith__intro { position: sticky; top: calc(var(--header-h) + 1.5rem); }
@media (max-width: 63.99rem) { .faith__intro { position: static; } }
.faith__intro .lead { margin-top: var(--space-sm); }
.faith__list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.faith__item {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--space-md); align-items: start;
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
  border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.faith__item:hover { transform: translateX(4px); border-color: var(--navy-200, #B3CDEF); box-shadow: var(--shadow-sm); }
.faith__num {
  display: grid; place-items: center;
  inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%;
  background: var(--navy-50); color: var(--primary);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step--1);
}
.faith__item:nth-child(odd) .faith__num { background: var(--gold-100); color: var(--gold-800, #6B4B10); }
.faith__item p { font-size: var(--step-0); line-height: 1.6; color: var(--text); }
.faith__source { margin-top: var(--space-xl); font-size: var(--step--2); color: var(--text-subtle); text-align: center; }

/* Footer line about IFES */
.footer__ifes { margin-top: var(--space-sm); font-size: var(--step--2); color: rgba(255, 255, 255, 0.7); }
.footer__ifes a { text-decoration: underline; }

/* ---- STEM cohort + the year in steps ---------------------------------------
   One portrait beside the invitation, then the year itself as numbered cards.  */
.cohort { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 62rem) { .cohort { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-2xl); } }
.cohort__portrait {
  margin: 0; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-lg); max-inline-size: 22rem;
}
.cohort__portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.cohort__copy p + p { margin-top: var(--space-md); color: var(--text-muted); line-height: var(--leading-relaxed); }
.cohort__note {
  margin-top: var(--space-xl); padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  font-size: var(--step--1); color: var(--text-subtle); max-inline-size: 60ch;
}

.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.step {
  position: relative; padding: var(--space-lg) var(--space-md) var(--space-md);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, var(--shadow-lg)); }
.step::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px;
  background: linear-gradient(90deg, var(--gold-400), rgba(241, 186, 24, 0));
}
.step__num {
  display: block; font-family: var(--font-display); font-size: var(--step-3);
  font-weight: 700; line-height: 1; color: var(--navy-100); margin-bottom: 0.35rem;
}
.step__title { font-family: var(--font-display); font-size: var(--step-0); font-weight: 600; color: var(--text-heading); }
.step__text { margin-top: 0.3rem; font-size: var(--step--1); color: var(--text-muted); line-height: var(--leading-relaxed); }

/* ---- Wide banner photo with a caption underneath -------------------------- */
.handover { margin: 0; }
.handover img, .handover picture { display: block; inline-size: 100%; border-radius: var(--r-lg); }
.handover figcaption {
  margin-top: var(--space-md);
  margin-inline: auto;
  max-inline-size: 62ch;
  text-align: center;
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}
.handover figcaption strong { color: var(--text-heading); }

.media-frame__cap {
  padding: 0.7rem var(--space-md);
  font-size: var(--step--2);
  color: var(--text-subtle);
  background: var(--surface);
  border-block-start: 1px solid var(--border);
}

/* ---- STEM posting line on a person card ------------------------------------ */
.person__post {
  margin-top: 0.35rem; padding-top: 0.4rem;
  border-top: 1px dashed var(--border);
  font-size: var(--step--2); line-height: 1.35; color: var(--text-heading); font-weight: 600;
}
.person__post span {
  display: block; margin-bottom: 0.1rem;
  font-size: 0.6rem; font-weight: 700; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-subtle);
}
.person__post--pending { color: var(--text-subtle); font-weight: 500; font-style: italic; }

/* A landscape group photograph in the cohort band instead of a portrait. */
.cohort__portrait--wide { max-inline-size: none; aspect-ratio: 3 / 2; }
@media (min-width: 62rem) { .cohort:has(.cohort__portrait--wide) { grid-template-columns: 1.1fr 0.9fr; } }

/* ---- Governance: Council header, officers, members ------------------------- */
.gov-head { display: grid; gap: var(--space-lg); align-items: end; margin-bottom: var(--space-xl); }
@media (min-width: 62rem) { .gov-head { grid-template-columns: 1.4fr 1fr; gap: var(--space-2xl); } }
.gov-head__copy .lead { max-inline-size: 58ch; }
.gov-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; }
.gov-stats > div {
  padding: var(--space-md) var(--space-sm);
  background: var(--surface); border: 1px solid var(--border);
  border-block-start: 3px solid var(--gold-400); border-radius: var(--r-lg);
}
.gov-stats dt { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; line-height: 1; color: var(--primary); }
.gov-stats dd { margin: 0.35rem 0 0; font-size: var(--step--2); line-height: 1.35; color: var(--text-muted); }
.gov-sub {
  display: flex; align-items: center; gap: var(--space-sm);
  margin: var(--space-xl) 0 var(--space-md);
  font-family: var(--font-body, inherit); font-size: var(--step--1); font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle);
}
.gov-sub::after { content: ""; flex: 1; block-size: 1px; background: var(--border); }
.gov-head + .gov-sub { margin-top: 0; }
@media (min-width: 48rem) {
  .people--officers { grid-template-columns: repeat(4, minmax(0, 1fr)); max-inline-size: 60rem; }
}

/* A cohort of seven reads as one row on a laptop rather than six and an orphan. */
@media (min-width: 75rem) {
  .people--cohort { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.25rem), 1fr)); }
}

/* ---- FOCUS Committees: a simple list of names on the governance page ---- */
.clist {
  display: grid; gap: var(--space-sm); margin: 0 auto; padding: 0; list-style: none;
  max-inline-size: 60rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.clist__item {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.9rem 1.1rem; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  border-inline-start: 4px solid var(--gold-400);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--header-h) + 1rem);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.clist__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.clist__icon {
  display: grid; place-items: center; flex: none; inline-size: 2.4rem; block-size: 2.4rem;
  border-radius: 50%; background: var(--navy-50); color: var(--navy-700);
}
.clist__icon svg { inline-size: 1.2rem; block-size: 1.2rem; }
.clist__name { font-weight: 700; color: var(--text-heading); }

/* ---- Staff page: buttons under a team, placeholder cards ------------------ */
.staff-team__more { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.person--placeholder .person__name { color: var(--text-subtle); font-style: italic; font-weight: 600; }

/* ==========================================================================
   Podcasts & sermons — the episode list
   ========================================================================== */
.episodes { display: grid; gap: var(--space-sm); max-inline-size: 52rem; margin: 0 auto; padding: 0; list-style: none; }
.episode {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-md); align-items: center;
  padding: var(--space-md) var(--space-lg); border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.episode:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--navy-200); }
.episode__num {
  display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: var(--r-lg);
  background: var(--grad-blue); color: #fff; font-family: var(--font-display); font-weight: 800;
}
.episode__meta { font-size: var(--step--2); font-weight: 600; letter-spacing: 0.02em; color: var(--text-subtle); }
.episode__title { margin-top: 0.15rem; font-size: var(--step-1); }
.episode__text { margin-top: 0.3rem; font-size: var(--step--1); color: var(--text-muted); }
.episode__audio { inline-size: 100%; margin-top: var(--space-sm); }
.episode__play {
  display: grid; place-items: center; inline-size: 3.2rem; block-size: 3.2rem; border-radius: 50%;
  background: var(--gold-400); color: var(--navy-900); box-shadow: 0 8px 20px rgba(241, 186, 24, 0.35);
  transition: transform var(--dur) var(--ease-out);
}
.episode__play svg { inline-size: 1.3rem; block-size: 1.3rem; margin-inline-start: 0.15rem; }
.episode__play:hover { transform: scale(1.08); }
@media (max-width: 39.99rem) {
  .episode { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-md); }
  .episode__play { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   Pray with us
   ========================================================================== */
.prayers {
  display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.prayer {
  position: relative; overflow: hidden; display: grid; gap: 0.5rem; align-content: start;
  padding: var(--space-lg); border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.prayer::before { content: ""; position: absolute; inset: 0 0 auto; block-size: 4px; background: var(--grad-gold); }
.prayer:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.prayer__num {
  position: absolute; inset-block-start: 0.6rem; inset-inline-end: 1rem;
  font-family: var(--font-display); font-size: var(--step-4); font-weight: 800; line-height: 1;
  color: var(--navy-50);
}
.prayer__icon {
  position: relative; display: grid; place-items: center; inline-size: 2.8rem; block-size: 2.8rem;
  border-radius: 50%; background: var(--gold-100); color: var(--navy-700);
}
.prayer__icon svg { inline-size: 1.35rem; block-size: 1.35rem; }
.prayer__title { position: relative; font-size: var(--step-1); }
.prayer__text { position: relative; font-size: var(--step--1); color: var(--text-muted); line-height: 1.6; }

.pray-band {
  position: relative; overflow: hidden; padding-block: var(--space-2xl); color: #fff;
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(26, 95, 180, 0.7), transparent 60%),
    radial-gradient(50% 80% at 100% 100%, rgba(241, 186, 24, 0.2), transparent 60%),
    linear-gradient(135deg, var(--navy-900), var(--navy-700));
  scroll-margin-top: var(--header-h);
}
.pray-band__inner { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 62rem) { .pray-band__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-2xl); } }
.pray-band h2 { margin-top: var(--space-lg); color: #fff; font-size: var(--step-3); }
.pray-band__verse { margin: 0; padding-inline-start: var(--space-md); border-inline-start: 4px solid var(--gold-400); }
.pray-band__verse p { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1.3; color: #fff; }
.pray-band__verse cite { display: block; margin-top: 0.4rem; font-style: normal; font-size: var(--step--1); font-weight: 700; color: var(--gold-300); }
.pray-band__media { margin: 0; border-radius: var(--r-2xl); overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); aspect-ratio: 4 / 3; }
.pray-band__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pray-ways { display: grid; gap: 0.6rem; margin: var(--space-md) 0 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .pray-ways { grid-template-columns: 1fr 1fr; } }
.pray-ways a {
  display: flex; align-items: center; gap: 0.75rem; block-size: 100%;
  padding: 0.8rem 1rem; border-radius: var(--r-lg); color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.pray-ways a:hover { background: rgba(255, 255, 255, 0.15); border-color: var(--gold-400); transform: translateY(-2px); }
.pray-ways__icon {
  display: grid; place-items: center; flex: none; inline-size: 2.4rem; block-size: 2.4rem;
  border-radius: 50%; background: var(--gold-400); color: var(--navy-900);
}
.pray-ways__icon svg { inline-size: 1.15rem; block-size: 1.15rem; }
.pray-ways strong { display: block; font-size: var(--step--1); }
.pray-ways small { display: block; font-size: var(--step--2); color: rgba(255, 255, 255, 0.72); }

/* ==========================================================================
   Work with us
   ========================================================================== */
.serve { display: grid; gap: var(--space-lg); }
@media (min-width: 62rem) { .serve { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.serve__card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-2xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
  scroll-margin-top: calc(var(--header-h) + 1rem);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.serve__card:hover, .serve__card:target { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.serve__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.serve__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.serve__card:hover .serve__media img { transform: scale(1.05); }
.serve__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(8, 35, 71, 0.55)); }
.serve__kicker {
  position: absolute; z-index: 1; inset-block-start: 1rem; inset-inline-start: 1rem;
  padding: 0.3rem 0.8rem; border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.92); color: var(--navy-700);
  font-size: var(--step--2); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}
.serve__body { position: relative; display: flex; flex-direction: column; flex: 1; gap: 0.6rem; padding: 2.2rem var(--space-lg) var(--space-lg); }
.serve__icon {
  position: absolute; inset-block-start: -1.7rem; inset-inline-start: var(--space-lg);
  display: grid; place-items: center; inline-size: 3.4rem; block-size: 3.4rem; border-radius: 50%;
  background: var(--gold-400); color: var(--navy-900); border: 4px solid var(--surface); box-shadow: var(--shadow-md);
}
.serve__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
.serve__title { font-size: var(--step-3); }
.serve__text { color: var(--text-muted); }
.serve__points { display: grid; gap: 0.4rem; margin: 0.2rem 0 0; padding: 0; list-style: none; font-size: var(--step--1); }
.serve__points li { display: flex; gap: 0.5rem; align-items: flex-start; }
.serve__points svg { flex: none; inline-size: 1.1rem; block-size: 1.1rem; margin-top: 0.15rem; padding: 0.15rem; border-radius: 50%; background: var(--navy-50); color: var(--navy-600); }
.serve__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: auto; padding-top: var(--space-md); }

.serve-steps {
  display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.serve-steps li { display: flex; gap: 0.8rem; align-items: center; }
.serve-steps span {
  display: grid; place-items: center; flex: none; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%;
  background: var(--grad-blue); color: #fff; font-weight: 800;
}
.serve-steps strong { display: block; color: var(--text-heading); }
.serve-steps small { display: block; font-size: var(--step--1); color: var(--text-muted); }

/* ==========================================================================
   Child Support Program
   ========================================================================== */
.cp-impact { position: relative; z-index: 2; margin-top: calc(var(--space-xl) * -1); }
.cp-impact__grid {
  display: grid; margin: 0; padding: 0; list-style: none; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  border-radius: var(--r-2xl); background: var(--surface); box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.cp-impact__item {
  display: grid; gap: 0.25rem; align-content: center; text-align: center;
  padding: var(--space-lg) var(--space-sm);
}
.cp-impact__item + .cp-impact__item { border-inline-start: 1px solid var(--border); }
.cp-impact__item strong {
  font-family: var(--font-display); font-size: var(--step-5); font-weight: 800; line-height: 1;
  background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cp-impact__item:nth-child(even) strong { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; }
.cp-impact__item span { font-size: var(--step--1); font-weight: 600; color: var(--text-muted); }
@media (max-width: 47.99rem) {
  .cp-impact__item + .cp-impact__item { border-inline-start: 0; border-block-start: 1px solid var(--border); }
}

.cp-about { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 62rem) { .cp-about { grid-template-columns: 0.95fr 1.05fr; gap: var(--space-2xl); } }
.cp-about__media { position: relative; margin: 0; border-radius: var(--r-2xl); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); }
.cp-about__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cp-about__copy { display: grid; gap: var(--space-sm); }
.cp-note {
  display: flex; gap: 0.6rem; align-items: flex-start; margin: 0;
  font-size: var(--step--1); color: var(--text-muted);
}
.cp-note svg { flex: none; inline-size: 1.2rem; block-size: 1.2rem; margin-top: 0.1rem; color: var(--navy-500); }

.cp-serve {
  margin-top: var(--space-xl); padding: var(--space-lg); border-radius: var(--r-2xl);
  background: var(--grad-tint); border: 1px solid var(--border);
}
.cp-serve h3 { font-size: var(--step-1); text-align: center; }
.cp-serve ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.cp-serve li {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.9rem 0.45rem 0.5rem;
  border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border);
  font-size: var(--step--1); font-weight: 600; color: var(--text-heading);
}
.cp-serve svg { inline-size: 1.25rem; block-size: 1.25rem; padding: 0.2rem; border-radius: 50%; background: var(--gold-400); color: var(--navy-900); }

.cp-goals { display: grid; gap: var(--space-sm); align-items: start; }
@media (min-width: 62rem) { .cp-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cp-goal {
  border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.cp-goal[open] { border-color: var(--navy-200); box-shadow: var(--shadow-md); }
.cp-goal summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-md); align-items: center;
  padding: var(--space-md) var(--space-lg); cursor: pointer; list-style: none;
}
.cp-goal summary::-webkit-details-marker { display: none; }
.cp-goal__icon {
  display: grid; place-items: center; inline-size: 2.9rem; block-size: 2.9rem; border-radius: 50%;
  background: var(--grad-blue); color: #fff;
}
.cp-goal__icon svg { inline-size: 1.35rem; block-size: 1.35rem; }
.cp-goal__head { display: grid; gap: 0.1rem; }
.cp-goal__head small { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-600); }
.cp-goal__head strong { font-family: var(--font-display); font-size: var(--step-1); color: var(--text-heading); }
.cp-goal__head em { font-style: normal; font-size: var(--step--1); color: var(--text-muted); }
.cp-goal__toggle {
  position: relative; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--navy-50);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.cp-goal__toggle::before, .cp-goal__toggle::after {
  content: ""; position: absolute; inset: 50% auto auto 50%; inline-size: 0.8rem; block-size: 2px;
  background: var(--navy-700); translate: -50% -50%;
}
.cp-goal__toggle::after { rotate: 90deg; transition: rotate var(--dur) var(--ease-out); }
.cp-goal[open] .cp-goal__toggle { background: var(--gold-400); }
.cp-goal[open] .cp-goal__toggle::after { rotate: 0deg; }
.cp-goal__body { padding: 0 var(--space-lg) var(--space-lg); }
.cp-goal__body p { padding-top: var(--space-sm); border-top: 1px solid var(--border); color: var(--text); }
.cp-goal__body ul { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.cp-goal__body li { padding: 0.3rem 0.75rem; border-radius: var(--r-full); background: var(--navy-50); font-size: var(--step--2); font-weight: 600; color: var(--navy-700); }

.cp-levels { max-inline-size: 60rem; margin: 0 auto; }
.cp-levels__bar { display: flex; gap: 4px; block-size: 1.1rem; border-radius: var(--r-full); overflow: hidden; }
.cp-levels__seg { flex-basis: 0; }
.cp-levels__seg--1, .cp-levels__item--1 { --lvl: var(--gold-400); }
.cp-levels__seg--2, .cp-levels__item--2 { --lvl: var(--navy-500); }
.cp-levels__seg--3, .cp-levels__item--3 { --lvl: #7cc0f2; }
.cp-levels__seg--4, .cp-levels__item--4 { --lvl: #9fd8a6; }
.cp-levels__seg--5, .cp-levels__item--5 { --lvl: #f4a88c; }
.cp-levels__seg { background: var(--lvl); }
.cp-levels__list {
  display: grid; gap: var(--space-sm); margin: var(--space-lg) 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
}
.cp-levels__item {
  display: grid; gap: 0.2rem; align-content: start; padding: var(--space-md);
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border);
  border-block-start: 4px solid var(--lvl);
}
.cp-levels__item strong { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; color: var(--text-heading); }
.cp-levels__name { font-weight: 700; color: var(--text-heading); }
.cp-levels__item small { font-size: var(--step--2); color: var(--text-muted); line-height: 1.45; }

.cp-need {
  position: relative; overflow: hidden; padding-block: var(--space-2xl); color: #fff;
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(26, 95, 180, 0.7), transparent 60%),
    radial-gradient(50% 80% at 100% 100%, rgba(241, 186, 24, 0.22), transparent 60%),
    linear-gradient(135deg, var(--navy-900), var(--navy-700));
  scroll-margin-top: var(--header-h);
}
.cp-need__top { display: grid; gap: var(--space-lg); align-items: center; max-inline-size: 58rem; margin: 0 auto; }
@media (min-width: 48rem) { .cp-need__top { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xl); } }
.cp-need__ring {
  --share: 0;
  display: grid; place-items: center; justify-self: center; inline-size: 11rem; block-size: 11rem; border-radius: 50%;
  background: conic-gradient(var(--gold-400) calc(var(--share) * 1%), rgba(255, 255, 255, 0.14) 0);
}
.cp-need__ring span {
  display: grid; place-items: center; align-content: center; inline-size: 8.4rem; block-size: 8.4rem; border-radius: 50%;
  background: var(--navy-800); font-size: var(--step--1); color: rgba(255, 255, 255, 0.75);
}
.cp-need__ring strong { font-family: var(--font-display); font-size: var(--step-5); line-height: 1; color: #fff; }
.cp-need__copy h2 { margin-top: var(--space-2xs); color: #fff; font-size: var(--step-3); }
.cp-need__copy p { margin-top: var(--space-sm); color: rgba(255, 255, 255, 0.82); }
.cp-ways { display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
@media (min-width: 48rem) { .cp-ways { grid-template-columns: 1.2fr 1fr 1fr; } }
.cp-way {
  display: flex; flex-direction: column; gap: 0.5rem; padding: var(--space-lg); border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16);
}
.cp-way--main { background: rgba(241, 186, 24, 0.12); border-color: rgba(241, 186, 24, 0.55); }
.cp-way__tag { font-size: var(--step--2); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-300); }
.cp-way__big { font-family: var(--font-display); font-size: var(--step-5); line-height: 1; color: #fff; }
.cp-way__big small { font-size: var(--step-0); font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.cp-way p { color: rgba(255, 255, 255, 0.8); font-size: var(--step--1); }
.cp-way .btn { align-self: flex-start; margin-top: auto; }

.cp-gets {
  display: grid; gap: 0.5rem 1.5rem; margin: 0 auto; padding: 0; list-style: none; max-inline-size: 64rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.cp-gets li { display: flex; gap: 0.6rem; align-items: flex-start; padding-block: 0.55rem; border-block-end: 1px dashed var(--border); font-size: var(--step--1); color: var(--text-heading); }
.cp-gets svg { flex: none; inline-size: 1.25rem; block-size: 1.25rem; padding: 0.2rem; border-radius: 50%; background: var(--navy-50); color: var(--navy-600); }

.cp-committee {
  display: grid; gap: var(--space-sm); margin: 0 auto; padding: 0; list-style: none; max-inline-size: 64rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}
.cp-committee li {
  display: grid; gap: 0.15rem; padding: var(--space-md); border-radius: var(--r-lg); text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-block-start: 3px solid var(--gold-400);
}
.cp-committee strong { color: var(--text-heading); }
.cp-committee span { font-size: var(--step--1); color: var(--text-muted); }
.cp-verse { max-inline-size: 44rem; margin: var(--space-2xl) auto 0; text-align: center; }
.cp-verse p { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1.35; color: var(--navy-700); }
.cp-verse cite { display: block; margin-top: var(--space-xs); font-style: normal; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--step--1); color: var(--gold-600); }

/* ==========================================================================
   FOCUS Van Der Molen
   ========================================================================== */
.vdm-uses {
  display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.vdm-uses li {
  display: grid; justify-items: center; gap: 0.35rem; text-align: center;
  padding: var(--space-lg) var(--space-md); border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.vdm-uses li:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #9fd8a6; }
.vdm-uses span {
  display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; margin-bottom: 0.3rem;
  border-radius: 50%; background: linear-gradient(135deg, #9fd8a6, #5fb4c8); color: var(--navy-900);
}
.vdm-uses span svg { inline-size: 1.4rem; block-size: 1.4rem; }
.vdm-uses strong { color: var(--text-heading); }
.vdm-uses small { font-size: var(--step--1); color: var(--text-muted); }

.vdm-mosaic { display: grid; gap: var(--space-sm); }
@media (min-width: 62rem) {
  .vdm-mosaic { grid-template-columns: 1.6fr 1fr; grid-template-rows: repeat(2, 15rem); }
  .vdm-mosaic__big { grid-row: span 2; }
}
.vdm-mosaic figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-xl); min-block-size: 14rem; }
.vdm-mosaic img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.vdm-mosaic figure:hover img { transform: scale(1.05); }
.vdm-mosaic figcaption {
  position: absolute; inset: auto 0 0; padding: 2.5rem 1rem 0.8rem;
  background: linear-gradient(transparent, rgba(8, 35, 71, 0.8)); color: #fff; font-size: var(--step--1); font-weight: 600;
}
.vdm-story { display: grid; gap: var(--space-lg); align-items: center; margin-top: var(--space-xl); }
@media (min-width: 62rem) { .vdm-story { grid-template-columns: 1fr 1.2fr; gap: var(--space-2xl); } }
.vdm-story .checks svg { flex: none; inline-size: 1.25rem; block-size: 1.25rem; padding: 0.2rem; border-radius: 50%; background: var(--gold-400); color: var(--navy-900); }

.vdm-build {
  padding-block: var(--space-2xl); color: #fff;
  background:
    radial-gradient(55% 90% at 100% 0%, rgba(159, 216, 166, 0.25), transparent 60%),
    linear-gradient(135deg, var(--navy-900), #0b4a5c);
}
.vdm-build__inner { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 62rem) { .vdm-build__inner { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-2xl); } }
.vdm-build__media { margin: 0; border-radius: var(--r-2xl); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.vdm-build__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.vdm-build h2 { color: #fff; font-size: var(--step-4); margin-top: var(--space-2xs); }
.vdm-build p { margin-top: var(--space-sm); color: rgba(255, 255, 255, 0.85); max-inline-size: 38rem; }
.vdm-build strong { color: var(--gold-300); }

.vdm-book {
  display: grid; gap: var(--space-lg); align-items: center; padding: var(--space-xl);
  border-radius: var(--r-2xl); background: var(--grad-accent); border: 1px solid var(--border);
}
@media (min-width: 62rem) { .vdm-book { grid-template-columns: 0.8fr 1.2fr; } }
.vdm-book__ways { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.vdm-book__ways a {
  display: grid; gap: 0.15rem; padding: var(--space-md); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.vdm-book__ways a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.vdm-book__ways span { display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; margin-bottom: 0.3rem; border-radius: 50%; background: var(--navy-500); color: #fff; }
.vdm-book__ways span svg { inline-size: 1.1rem; block-size: 1.1rem; }
.vdm-book__ways small { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.vdm-book__ways strong { color: var(--text-heading); overflow-wrap: anywhere; }

/* Conferences & Missions: a photograph in place of the AGM card. */
.eng-photo { position: relative; margin: 0; min-block-size: 16rem; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.eng-photo img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.eng-photo figcaption {
  position: absolute; inset: auto 0 0; padding: 2.5rem 1rem 0.8rem;
  background: linear-gradient(transparent, rgba(8, 35, 71, 0.8)); color: #fff; font-size: var(--step--1); font-weight: 600;
}

/* ---- Trustees: every card on one line, narrower as the row grows ---------- */
.people.people--row {
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
@media (min-width: 62rem) { .people.people--row { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (min-width: 40rem) and (max-width: 61.99rem) { .people.people--row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 39.99rem) { .people.people--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.people--row .person__name { font-size: var(--step--1); }
.people--row .person__role { font-size: var(--step--2); }

/* ---- Regional chairpersons card under the Council ------------------------ */
.cps { max-inline-size: 48rem; margin: var(--space-xl) auto 0; text-align: center; }
.cps__title { font-size: var(--step-1); margin-bottom: var(--space-sm); }
.cps__grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.cps__grid a {
  display: grid; gap: 0.2rem; padding: var(--space-md) var(--space-lg); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border); border-block-start: 3px solid var(--gold-400);
  text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.cps__grid a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cps__grid span { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.cps__grid strong { color: var(--text-heading); }
.cps__grid small { font-size: var(--step--1); font-weight: 600; color: var(--primary); }

/* ---- FATT team sizes by region ------------------------------------------- */
.fatt-table { max-inline-size: 40rem; margin: 0 auto; overflow-x: auto; }
.fatt-table table {
  inline-size: 100%; border-collapse: separate; border-spacing: 0;
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--surface);
}
.fatt-table th, .fatt-table td { padding: 0.75rem 1.1rem; text-align: start; }
.fatt-table thead th {
  background: var(--grad-blue); color: #fff;
  font-size: var(--step--2); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.fatt-table tbody th { font-weight: 700; color: var(--text-heading); }
.fatt-table tbody tr + tr th, .fatt-table tbody tr + tr td { border-block-start: 1px solid var(--border); }
.fatt-table tbody tr:nth-child(even) { background: var(--ink-25); }
.fatt-table td { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy-700); }
.fatt-table td.is-pending { font-weight: 500; font-style: italic; color: var(--text-subtle); }