/* =========================================================
   SABAOTH CHURCH LONDON — Design system
   Light-first: paper grey is the ground, white the alternate band,
   black is kept for the pauses (hero, map panel, drawer, footer),
   and yellow is the one accent.
   Type: Helvetica Now Display — Bold for display/headings,
         Regular for body, Light for large lead text.

   COLOUR MODEL
   Every surface declares a handful of variables and all the
   components read them, so a section only states which band it is:
     (default)         paper grey  #f2f2f3
     .section--paper   white
     .section--mist    mist blue   #c3cfdb
     .section--accent  yellow      #f4df50
     .section--dark    black — and in this band the accent itself
                       turns white, so the section stays monochrome
   ========================================================= */

/* ---------- Fonts: Helvetica Now Display ---------- */
@font-face {
  font-family: 'HelveticaNow';
  src: url('../fonts/HelveticaNowDisplay-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'HelveticaNow';
  src: url('../fonts/HelveticaNowDisplay-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'HelveticaNow';
  src: url('../fonts/HelveticaNowDisplay-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'HelveticaNow';
  src: url('../fonts/HelveticaNowDisplay-ExtLt.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'HelveticaNow';
  src: url('../fonts/HelveticaNowDisplay-RegIta.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'HelveticaNow';
  src: url('../fonts/HelveticaNowDisplay-LightIta.otf') format('opentype');
  font-weight: 300; font-style: italic; font-display: swap;
}

/* ---------- Tokens ----------
   Palette
     #f2f2f3  paper   the page ground
     #c3cfdb  mist    soft bands, chips, quiet controls
     #767f8b  slate   hairlines, icons, secondary type
     #f4df50  yellow  the one accent
     #000000 / #ffffff  the monochrome sections

   Every colour on the site comes from a variable below. The surface
   variables (--bg, --fg, --line, --accent…) are re-declared per band, so a
   section only has to say which band it is and everything inside follows.
   -------------------------------------------------------------------- */
:root {
  --black: #000000;
  --white: #ffffff;
  --ink: #14171b;          /* text on light: near-black, tinted with the slate */
  --paper: #f2f2f3;        /* the page ground */
  --surface: #ffffff;      /* cards and panels standing on the ground */
  --surface-2: #dee5ec;    /* chips, arrows, quiet controls: mist, lightened */
  --mist: #c3cfdb;
  --slate: #767f8b;
  --accent: #f4df50;
  /* the true accent, never overridden: the map pins stay yellow on black */
  --yellow: #f4df50;

  /* slate, darkened until small text passes AA on both paper and white */
  --slate-600: #5d6672;
  --slate-700: #4b535e;
  --grey-500: var(--slate-700);
  --grey-400: var(--slate-600);
  --grey-300: var(--mist);

  /* Surface variables — overridden per band below */
  --bg: var(--paper);
  --fg: var(--ink);
  --lead-c: #39414b;
  --muted-c: #5d6672;
  --line: rgba(118, 127, 139, 0.32);
  --line-soft: rgba(118, 127, 139, 0.18);
  --soft: var(--surface);
  --soft-2: var(--surface-2);
  --accent-fg: var(--ink);
  --chip-bg: var(--surface-2);
  --chip-fg: #39414b;
  --btn-bg: var(--ink);
  --btn-fg: var(--white);

  --radius: 8px;
  --radius-sm: 8px;
  --radius-pill: 8px;

  --max: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(48px, 6vw, 92px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- the monochrome band: black and white only, no accent colour ---- */
.section--dark, .hero--dark, .footer, .map, .drawer, .topbar {
  --bg: var(--black);
  --fg: var(--white);
  --lead-c: rgba(255, 255, 255, 0.8);
  --muted-c: rgba(255, 255, 255, 0.62);
  --line: rgba(255, 255, 255, 0.18);
  --line-soft: rgba(255, 255, 255, 0.1);
  --soft: rgba(255, 255, 255, 0.07);
  --soft-2: rgba(255, 255, 255, 0.13);
  /* the accent turns white here, so every component that uses it stays
     inside the two colours this band is allowed */
  --accent: var(--white);
  --accent-fg: var(--white);
  --chip-bg: var(--white);
  --chip-fg: var(--black);
  --btn-bg: var(--white);
  --btn-fg: var(--black);
}

/* ---- the white band, for rhythm against the paper ground ---- */
.section--paper { --bg: var(--white); }

/* ---- the mist band ---- */
.section--mist {
  --bg: var(--mist);
  --fg: var(--ink);
  --lead-c: #2b323a;
  --muted-c: #3f4854;
  --line: rgba(20, 23, 27, 0.22);
  --line-soft: rgba(20, 23, 27, 0.12);
  --soft: rgba(255, 255, 255, 0.5);
  --soft-2: rgba(255, 255, 255, 0.7);
  --chip-bg: var(--ink);
  --chip-fg: var(--white);
}

/* ---- the accent band ---- */
.section--accent {
  --bg: var(--accent);
  --fg: var(--black);
  --lead-c: rgba(0, 0, 0, 0.8);
  --muted-c: rgba(0, 0, 0, 0.66);
  --line: rgba(0, 0, 0, 0.24);
  --line-soft: rgba(0, 0, 0, 0.14);
  --soft: rgba(0, 0, 0, 0.06);
  --soft-2: rgba(0, 0, 0, 0.1);
  --accent-fg: var(--black);
  --chip-bg: var(--black);
  --chip-fg: var(--white);
  --btn-bg: var(--black);
  --btn-fg: var(--white);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
/* added by initSmoothScroll after the first click or keypress, so a link that
   lands on #faqs jumps straight there instead of scrolling past everything */
html.smooth { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'HelveticaNow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.05vw, 17.5px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;        /* not `hidden`: that would break position: sticky */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.section--dark :focus-visible, .hero--dark :focus-visible,
.footer :focus-visible, .map :focus-visible, .drawer :focus-visible { outline-color: var(--accent); }
::selection { background: var(--accent); color: var(--black); }

[id] { scroll-margin-top: 104px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; background: var(--bg); color: var(--fg); }
.section--tight { padding-block: clamp(34px, 4vw, 60px); }

.grid { display: grid; gap: clamp(20px, 2.4vw, 34px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
#our-story .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.split--top { align-items: start; }
/* the column of copy sits on the bottom edge of the picture beside it */
.split--bottom { align-items: end; }
.split--bottom > * { align-self: end; }
.split--stretch.split--bottom .photo { align-self: start; }

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Typography ---------- */
.display {
  font-family: 'HelveticaNow', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.03em;
  margin: 0;
  overflow-wrap: break-word;
}
.display--xl { font-size: clamp(2.6rem, 7vw, 6rem); }
/* Inside a two-column split there is less room, and long words
   like EXPERIENCE / CONVERSATION would otherwise break mid-word. */
.split .display--xl { font-size: clamp(2.2rem, 4.3vw, 3.8rem); }
.display--l  { font-size: clamp(2.1rem, 4.6vw, 3.7rem); }
.display--m  { font-size: clamp(1.45rem, 2.7vw, 2.2rem); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
.h-l  { font-size: clamp(1.9rem, 3.6vw, 2.9rem); text-transform: uppercase; }
.h-m  { font-size: clamp(1.2rem, 1.9vw, 1.55rem); }
.h-s  { font-size: clamp(1.02rem, 1.4vw, 1.15rem); }

.lead { font-size: clamp(1.05rem, 1.5vw, 1.32rem); line-height: 1.5; font-weight: 300; color: var(--lead-c); }
/* A block of running copy uses one size and one weight throughout: a .lead
   that is followed by more paragraphs stops being a lead and joins them. */
.lead:has(~ p:not(.btn-row):not([class*="meta"])) {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--lead-c);
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.muted { color: var(--muted-c); }
.measure { max-width: 62ch; }
strong, b { font-weight: 700; }
.accent-text { color: var(--accent-fg); }
.section--dark .accent-text, .hero--dark .accent-text { color: var(--accent); }

/* Eyebrow chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
.chip--accent { background: var(--accent); color: var(--black); }
.chip--dark { background: var(--ink); color: var(--white); }
.section--paper .chip:not(.chip--dark):not(.chip--accent),
.section:not(.section--dark):not(.section--accent) .chip:not(.chip--dark):not(.chip--accent) { background: var(--surface-2); color: var(--chip-fg); }
.chip--outline { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }

.num {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted-c);
  display: block;
  margin-bottom: 10px;
}
/* a photo inside a card needs air beneath it, or the number that follows
   reads as a caption stuck to the image */
.card > .photo { margin-bottom: clamp(20px, 2.2vw, 28px); }
.card > .photo + .num { margin-top: 0; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease), background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.btn:hover { transform: translateY(-2px); }
.btn--accent { background: var(--accent); color: var(--black); }
.btn--accent:hover { background: var(--ink); color: var(--white); }
.section--dark .btn--accent:hover, .hero--dark .btn--accent:hover,
.footer .btn--accent:hover, .drawer .btn--accent:hover { background: var(--white); color: var(--black); }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: var(--accent); color: var(--black); }
.btn--white { background: var(--white); color: var(--black); }
.btn--white:hover { background: var(--accent); box-shadow: none; }
.btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--ghost:hover { background: var(--ink); color: var(--white); box-shadow: none; }
.section--dark .btn--ghost:hover, .hero--dark .btn--ghost:hover,
.footer .btn--ghost:hover { background: var(--white); color: var(--black); }
.section--accent .btn--ghost:hover { background: var(--black); color: var(--accent); }
.btn--sm { padding: 11px 18px; font-size: 0.78rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  padding-bottom: 3px;
  border-bottom: 1.5px solid currentColor;
  transition: gap 0.25s var(--ease);
}
.link-arrow:hover { gap: 16px; }
.section--dark .link-arrow, .hero--dark .link-arrow, .footer .link-arrow { color: var(--accent); }

/* ---------- Photo slots (replace with real photography) ---------- */
.photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: none;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.photo::after {
  content: attr(data-slot);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-c);
  text-align: center;
  padding: 12px 18px;
  max-width: 80%;
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
/* a filled slot has no caption to show */
.photo:has(img)::after { content: none; }
/* every photograph on the site sits in the same box: one portrait ratio.
   The modifiers stay in the markup so intent is still readable. */
.photo, .photo--sq, .photo--tall, .photo--wide { aspect-ratio: 3 / 4; }

/* The mark stands on the page itself — no tile, no background.
   The artwork ships white, so it is inverted to black here. */
.logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2vw, 30px);
}
.logo-mark img {
  width: clamp(220px, 30vw, 440px);
  height: auto;
  filter: invert(1);
}
.section--dark .logo-mark img, .hero--dark .logo-mark img { filter: none; }

/* Sabaoth Kids wordmark, where the section label used to be */
.kids-logo { width: clamp(104px, 11vw, 148px); height: auto; margin-bottom: 22px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  color: var(--fg);
  border-radius: var(--radius);
  padding: clamp(20px, 2.2vw, 30px);
  box-shadow: none;
  height: 100%;
  transition: transform 0.35s var(--ease), box-shadow 0.35s, background-color 0.35s;
}
.section--paper .card { background: var(--surface); }
.section--dark .card { background: rgba(255, 255, 255, 0.05); }
/* the hover outline is a quiet grey, not a hard black rule */
.card--hover:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px rgba(13, 14, 16, 0.3); }
.section--dark .card { background: rgba(255, 255, 255, 0.05); }
.section--dark .card--hover:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3); }
.card--paper { background: var(--surface); }
.card--accent { background: var(--accent); color: var(--black); box-shadow: none; }
.card--accent .card__body, .card--accent .card__meta { color: rgba(0, 0, 0, 0.68); }
.card__title { margin-bottom: 10px; }
.card__body { color: var(--lead-c); font-size: 1rem; }
.card__meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-c); margin-bottom: 12px;
}
.ecard {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;              /* the photo runs to the card's edges */
  overflow: hidden;
}
.ecard .photo {
  flex: 0 0 auto;
  /* a shallower frame here: the words are the point of these cards */
  aspect-ratio: 16 / 11;
  border-radius: 0;        /* the card's own radius does the clipping */
  box-shadow: none;
  margin: 0;
}
.ecard > div:last-child { padding: clamp(20px, 2.2vw, 28px); }

/* ---------- Header ---------- */
/* The bar takes the colour of whatever band is passing behind it: the
   section's own background is read in initHeaderBand and written into
   --header-bg, and the type flips to white over a dark band. */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--header-bg, rgba(255, 255, 255, 0.88));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* no rule under the bar: it sits on the band and shares its colour */
  color: var(--header-fg, var(--ink));
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.header[data-dark='true'] { --header-fg: var(--white); }
.header[data-dark='true'] .burger span { background: var(--white); }
.header[data-dark='true'] .brand img { filter: none; }
/* over the yellow band a yellow button would vanish */
.header[data-onaccent='true'] .btn--accent { background: var(--ink); color: var(--white); }
.header[data-onaccent='true'] .btn--accent:hover { background: var(--white); color: var(--ink); }
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}
.brand { display: flex; align-items: center; }
.brand img { width: clamp(126px, 14vw, 168px); height: auto; }
/* The supplied logo artwork is white — invert it on light surfaces */
.header .brand img { filter: invert(1); transition: filter 0.35s var(--ease); }

.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); }
.nav__link {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
  background: none;
  border: 0;
  color: inherit;
}
.nav__link::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: currentColor;
  transition: width 0.3s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current='page']::after { width: 100%; }

.nav__item { position: relative; }
.nav__toggle { display: inline-flex; align-items: center; gap: 7px; }
.nav__caret { width: 9px; height: 9px; transition: transform 0.3s var(--ease); }
.nav__item[data-open='true'] .nav__caret { transform: rotate(180deg); }
.nav__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  min-width: 258px;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s, transform 0.25s var(--ease), visibility 0.25s;
}
.nav__item[data-open='true'] .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__menu a {
  display: block;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.nav__menu a span { display: block; font-weight: 400; font-size: 0.7rem; color: var(--slate-600); letter-spacing: 0; margin-top: 2px; }
.nav__menu a:hover { background: var(--accent); color: var(--black); }
.nav__menu a:hover span { color: rgba(0, 0, 0, 0.6); }

.header__cta { display: flex; align-items: center; gap: 10px; }
.header .btn--accent:hover { background: var(--ink); color: var(--white); }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--radius-pill);
  background: rgba(13, 14, 16, 0.08);
  position: relative;
}
.burger span {
  position: absolute; left: 12px; width: 20px; height: 2px; background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
body.menu-open .burger { background: rgba(255, 255, 255, 0.16); }
body.menu-open .burger span { background: var(--white); }
body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav, .header__cta .btn { display: none; }
  .burger { display: block; }
}

/* Mobile drawer — dark on purpose, so it reads as an overlay */
.drawer {
  position: fixed;
  inset: 72px 0 0 0;
  z-index: 80;
  background: var(--black);
  color: var(--white);
  padding: 26px var(--gutter) 44px;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s var(--ease), visibility 0.3s;
}
body.menu-open .drawer { opacity: 1; visibility: visible; transform: translateY(0); }
body.menu-open { overflow: hidden; }
.drawer a.drawer__link {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.7rem, 8vw, 2.4rem);
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.drawer__sub { padding: 6px 0 16px; display: grid; gap: 2px; }
.drawer__sub a {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lead-c); padding: 8px 0;
}
.drawer__sub a::before { content: '— '; color: var(--accent); }
.drawer .btn { width: 100%; margin-top: 20px; background: var(--accent); color: var(--black); }

/* ---------- Announcement bar ---------- */
.topbar {
  background: var(--ink);
  color: var(--white);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px var(--gutter);
}
.topbar a { color: var(--accent); border-bottom: 1.5px solid currentColor; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(48px, 7vw, 96px) clamp(44px, 6vw, 84px);
  overflow: hidden;
}
.hero--dark::before {
  content: '';
  position: absolute; inset: -20% -10% auto -10%; height: 90%;
  background: radial-gradient(60% 60% at 30% 20%, rgba(255, 255, 255, 0.1), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* ---------- Hero with a background film ----------
   The film is the hero image, so the photo slot and the accent
   glow come off, the grid goes to one column and the text
   keeps to a readable measure over the darkest part. */
.hero--video { isolation: isolate; min-height: min(80vh, 760px); display: grid; align-items: center; }
.hero--video::before { content: none; }
.hero--video .wrap { position: relative; z-index: 2; }
.hero--video .hero__grid { grid-template-columns: minmax(0, 1fr); align-items: center; }
.hero--video .hero__grid > div { max-width: 60ch; }
/* With only a 20% scrim the film shows through brightly, so the type
   carries its own shadow rather than the whole frame being darkened. */
/* No text shadows: the 50% layer carries the legibility on its own.
   The intro still goes white rather than grey, over film. */
.hero--video .lead { color: var(--white); }
@media (max-width: 980px) { .hero--video { min-height: min(88vh, 680px); } }
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--black) center / cover no-repeat;
  background-image: image-set(url('../img/hero-south-london.jpg') 1x);
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;   /* keep the street level, not the rooftops */
  display: block;
}
/* One flat black layer at 50%, as specified. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(28px, 4vw, 64px); align-items: end; position: relative; }
@media (max-width: 980px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } }
/* a shallower frame beside the words: the picture stops driving the height
   of the whole hero (used on the giving page) */
.hero--low .photo { aspect-ratio: 4 / 3; }
.hero__title { font-size: clamp(2.9rem, 8vw, 6.8rem); }
.hero__title em { font-style: normal; color: var(--accent-fg); }
.hero--dark .hero__title em { color: var(--accent); }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-c);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta span::before { content: ''; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.hero--dark .hero__meta span::before { background: var(--accent); }

/* ---------- Sunday / Grand Opening panels ---------- */
.opening {
  background: var(--accent);
  color: var(--black);
  border-radius: var(--radius);
  padding: clamp(24px, 3.2vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(22px, 3vw, 48px);
  align-items: center;
}
@media (max-width: 860px) { .opening { grid-template-columns: minmax(0, 1fr); } }
.opening__date { font-weight: 700; text-transform: uppercase; line-height: 0.92; letter-spacing: -0.03em; font-size: clamp(2rem, 4.6vw, 3.2rem); }
.opening__where { margin-top: 14px; font-size: 1rem; }
.opening__where strong { display: block; font-size: 1.08rem; }

.gopen { text-align: center; }
.gopen__title {
  margin: 0;
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
/* the hour keeps the scale of the headline; the venue rides small on both
   sides of it, so the line reads as one block */
.gopen__hour {
  margin-top: clamp(6px, 0.8vw, 12px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
}
.gopen__time {
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.gopen__hour .gopen__where {
  font-size: clamp(0.7rem, 0.85vw, 0.82rem);
  line-height: 1.45;
  text-align: right;
}
.gopen__hour .gopen__where:last-child { text-align: left; }
@media (max-width: 700px) {
  .gopen__hour { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; }
  .gopen__hour .gopen__where { text-align: center; }
  .gopen__hour .gopen__where:last-child { display: none; }
}
.gopen__where { margin: 0; }
.gopen__where strong { display: block; }
.gopen__where span { color: var(--muted); }
.gopen__lede { margin: 0; font-size: 1rem; color: var(--muted); }
.gopen__meta {
  margin: clamp(26px, 3vw, 36px) 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
/* the countdown sits above the headline, as a quiet line of type */
.gopen .cd {
  justify-content: center;
  margin: 0 auto clamp(18px, 2.2vw, 28px);
  padding-bottom: clamp(16px, 2vw, 22px);
  border-bottom: 1.5px solid var(--line);
  max-width: 520px;
}
/* kids ministry gets its own badge, with the Skids mark */
.gopen__kids {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  padding: 12px 20px 12px 16px;
  border-radius: 8px;
  background: var(--surface-2);
}
.gopen__kids img { width: 54px; height: auto; display: block; }
.gopen__kids span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* countdown as one quiet line, not a slab competing with the date */
.cd {
  margin: 0;
  display: flex;
  gap: 22px;
  align-items: baseline;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}
.cd b {
  font-size: 1.9rem;
  letter-spacing: -0.03em;
  color: var(--black);
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) {
  .cd { gap: 16px; }
  .cd b { font-size: 1.6rem; }
}

/* ---------- Stats ---------- */
.stat__n { font-weight: 700; font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--fg); }
.section--dark .stat__n { color: var(--accent); }
.stat__l { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 8px; color: var(--muted-c); }

/* ---------- The church network, as cards ----------
   Twelve countries and seventy-three cities used to be one long
   column of names. Now each country is a card: flag, name, count,
   and its cities set as quiet chips. Italy, being most of the
   network, takes the full width and flows into columns. */
.netgrid {
  margin-top: clamp(34px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  align-items: start;
}
.net {
  background: var(--surface);
  border-radius: var(--radius);
  padding: clamp(18px, 1.8vw, 24px);
  height: 100%;
}
.net--wide { grid-column: 1 / -1; }

.net__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1.5px solid var(--line);
}
.net__flag { font-size: 1.05rem; line-height: 1; }
.net__country {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0;
}
.net__count {
  margin-left: auto;
  min-width: 26px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--black);
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}
.net__cities { display: flex; flex-wrap: wrap; gap: 6px; }
.net--wide .net__cities { gap: 7px; }
.net__cities li {
  background: rgba(13, 14, 16, 0.05);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--fg);
}
.net__cities li.is-new::after {
  content: 'NEW';
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--accent);
  color: var(--black);
  border-radius: 8px;
  padding: 1px 5px;
  margin-left: 7px;
  vertical-align: 1px;
}


/* ---------- Timeline ---------- */
.timeline { position: relative; display: grid; gap: clamp(34px, 7vw, 120px); }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(var(--ink), var(--line));
}
.section--dark .timeline::before { background: linear-gradient(var(--accent), rgba(255, 255, 255, 0.1)); }
.tl { position: relative; padding-left: 40px; }
.tl::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 3px var(--ink);
}
.section--dark .tl::before { box-shadow: inset 0 0 0 3px var(--accent); }
.tl__year { font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1; letter-spacing: -0.03em; margin-bottom: 12px; }
.tl__body { color: var(--lead-c); max-width: 60ch; font-size: 1rem; line-height: 1.6; }

/* ---------- Accordion ---------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; background: none; border: 0; color: inherit; text-align: left;
  display: flex; align-items: center; gap: 18px; padding: 24px 0;
}
.acc__i { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; color: var(--muted-c); min-width: 26px; }
.acc__t { flex: 1; font-size: clamp(1.1rem, 2.1vw, 1.6rem); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; }
.acc__sign { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
.acc__sign::before, .acc__sign::after {
  content: ''; position: absolute; background: currentColor; border-radius: 8px;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.acc__sign::before { top: 8px; left: 0; width: 18px; height: 2px; }
.acc__sign::after { left: 8px; top: 0; width: 2px; height: 18px; }
.acc__item[data-open='true'] .acc__sign::after { transform: rotate(90deg); opacity: 0; }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.acc__item[data-open='true'] .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; min-height: 0; }
.acc__panel p { padding: 0 0 26px 44px; color: var(--lead-c); max-width: 70ch; }
@media (max-width: 620px) { .acc__panel p { padding-left: 0; } }

/* ---------- Forms ---------- */
.form { display: grid; gap: 15px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-c); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem;
  background: var(--white);
  border: 1.5px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  width: 100%;
  transition: border-color 0.2s;
}
.section--dark .field input, .section--dark .field select, .section--dark .field textarea,
.footer .field input, .footer .field select, .footer .field textarea {
  background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.2); color: var(--white);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--slate-600); }
.field--row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
@media (max-width: 620px) { .field--row { grid-template-columns: minmax(0, 1fr); } }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.8rem; color: var(--muted-c); }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); flex: 0 0 auto; }
.form__note { font-size: 0.74rem; color: var(--muted-c); }

/* ---------- Booking (cal.com inline embed) ---------- */
.booking {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 460px;
  position: relative;
}
.booking iframe { display: block; }
.booking__fallback {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  color: var(--ink); padding: 40px; gap: 14px; align-content: center;
}

/* =========================================================
   NETWORK LOCATOR — zoomable world map + city finder
   Built by assets/js/network.js; geometry from world.js
   (real Natural Earth coastlines, equirectangular).

   --u = map units per screen pixel, rewritten on every zoom,
   so markers, strokes and labels keep a constant SCREEN size
   however far the map is zoomed.
   The panel stays black on purpose: the white pins need it.
   ========================================================= */
.locator { display: grid; gap: clamp(20px, 2.6vw, 34px); }

.map {
  --u: 3.3;
  position: relative;
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius);
  padding: clamp(10px, 1.2vw, 16px);
  overflow: hidden;
}
.map svg {
  width: 100%;
  height: auto;
  display: block;
  cursor: grab;
  touch-action: pan-y;              /* one finger keeps scrolling the page */
  border-radius: 8px;
}
.map[data-dragging] svg { cursor: grabbing; }
.map svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Land and borders */
.map__land { fill: #2b2b2b; stroke: none; }
.map__borders { fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.7; }

/* ---- pins ----
   .map__hit    invisible, generous touch target
   .map__bubble the visible dot
   Every church is a dot at every zoom: the spread of them is the
   message. They grow as you zoom in, and pick up names at the end. */
.map__layer { transition: opacity 0.28s var(--ease); }
.map__text { pointer-events: none; }

.map__marker { cursor: pointer; }
.map__marker:focus-visible { outline: none; }
.map__hit { fill: transparent; r: calc(var(--u) * 12); }
.map__bubble {
  fill: var(--yellow);
  stroke: rgba(0, 0, 0, 0.85);
  stroke-width: calc(var(--u) * 1.1);
  r: calc(var(--u) * 4.2);
  transition: r 0.18s var(--ease);
}
.map[data-tier='labels'] .map__bubble { r: calc(var(--u) * 5); }
.map__marker:hover .map__bubble,
.map__marker[data-active='true'] .map__bubble { r: calc(var(--u) * 7.5); }
.map__marker:focus-visible .map__bubble { stroke: var(--white); stroke-width: calc(var(--u) * 2.5); }

.map__citylabel {
  fill: var(--white);
  font-weight: 700;
  font-size: calc(var(--u) * 11px);
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.88);
  stroke-width: calc(var(--u) * 3.2);
  transform: translate(calc(var(--u) * 9px), calc(var(--u) * 4px));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
/* names only once there is room for them; hovering always wins one back */
.map[data-tier='labels'] .map__citylabel { opacity: 1; }
.map__citylabel[data-hide='true'] { opacity: 0; }
.map__citylabel[data-force='true'] { opacity: 1; }

.map__halo {
  fill: none;
  stroke: var(--yellow);
  stroke-width: calc(var(--u) * 1.5);
  opacity: 0;
  r: calc(var(--u) * 6);
  pointer-events: none;
}
.map__halo[data-pulse='true'] { animation: pulse 1.5s ease-out 2; }
@keyframes pulse { 0% { opacity: 0.9; r: calc(var(--u) * 6); } 100% { opacity: 0; r: calc(var(--u) * 26); } }

/* Filtered-out markers stay as context, but out of the way */
.map[data-filtered='true'] .map__marker[data-match='false'] { opacity: 0.14; pointer-events: none; }

/* Controls */
.map__ui {
  position: absolute;
  right: clamp(14px, 1.8vw, 22px);
  top: clamp(14px, 1.8vw, 22px);
  display: grid;
  gap: 6px;
  z-index: 4;
}
.map__btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  font-weight: 700; font-size: 1.05rem; line-height: 1;
  transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}
.map__btn:hover { background: var(--accent); color: var(--black); }
.map__btn svg { width: 15px; height: 15px; }
.map__btn--reset { font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; }
.map[data-zoomed='false'] .map__btn--reset { opacity: 0.3; pointer-events: none; }

.map__hint {
  position: absolute;
  left: clamp(14px, 1.8vw, 22px);
  right: clamp(60px, 8vw, 70px);
  bottom: clamp(12px, 1.6vw, 20px);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  margin: 0;
}
/* the desktop wording does not fit a phone, and the short version
   is the one that matters there */
.map__hint span { display: none; }
@media (max-width: 700px) {
  .map__hint b { display: none; }
  .map__hint span { display: inline; }
}

/* Gesture nudge: shown when a plain wheel or one finger is used */
.map__gesture {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
  z-index: 3;
}
.map[data-hint='true'] .map__gesture { opacity: 1; visibility: visible; }

.map__tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--white);
  color: var(--black);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 11px;
  border-radius: 8px;
  white-space: nowrap;
  transform: translate(-50%, -145%);
  opacity: 0;
  transition: opacity 0.16s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.map__tip[data-show='true'] { opacity: 1; }
.map__tip span { display: block; font-weight: 400; font-size: 0.64rem; color: var(--muted-c); }

/* Finder */
.finder { display: grid; gap: 18px; }
.finder__bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.finder__search { position: relative; flex: 1 1 260px; max-width: 380px; }
.finder__search input {
  width: 100%; font: inherit; font-size: 0.9rem;
  padding: 12px 16px 12px 42px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--ink);
}
.finder__search input:focus { outline: none; border-color: var(--ink); }
.finder__search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; opacity: 0.45; }
.finder__count { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-c); }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  border: 0; border-radius: var(--radius-pill);
  background: var(--soft-2); color: inherit;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 9px 15px; transition: background-color 0.2s, color 0.2s;
}
.tab:hover { background: var(--accent); color: var(--black); }
.tab[aria-pressed='true'] { background: var(--ink); color: var(--white); }
.tab em { font-style: normal; opacity: 0.55; margin-left: 6px; }

.cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 26px 24px; align-items: start; }
.cities__group[data-span='3'] { grid-column: span 3; }
.cities__group[data-span='2'] { grid-column: span 2; }
@media (max-width: 1000px) { .cities__group[data-span='3'] { grid-column: span 2; } }
@media (max-width: 620px) {
  .cities__group[data-span='3'], .cities__group[data-span='2'] { grid-column: span 1; }
}
.cities__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1.5px solid var(--line);
}
.cities__head b { margin-left: auto; color: var(--muted-c); font-weight: 700; }
.cities__list { display: flex; flex-wrap: wrap; gap: 6px; }
.city {
  border: 0; border-radius: 8px;
  background: var(--soft); color: inherit;
  font: inherit; font-size: 0.8rem; line-height: 1.2;
  padding: 7px 11px;
  transition: background-color 0.2s, color 0.2s;
}
.city:hover, .city[data-active='true'] { background: var(--accent); color: var(--black); }
.city--new::after { content: 'NEW'; font-size: 0.5rem; letter-spacing: 0.1em; font-weight: 700; background: var(--accent); color: var(--black); border-radius: 8px; padding: 1px 5px; margin-left: 7px; vertical-align: 1px; }
.city--new:hover::after, .city--new[data-active='true']::after { background: var(--black); color: var(--accent); }
.city--muted { opacity: 0.5; cursor: default; }
.city--muted:hover { background: var(--soft); color: inherit; }

/* ---------- Footer (dark) ---------- */
.footer { background: var(--black); color: var(--white); padding-block: clamp(44px, 5.5vw, 80px) 28px; }
.footer__find {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px;
}
.footer__findlabel {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 8px;
}
.footer__find .display { max-width: 22ch; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.5fr; gap: clamp(28px, 3vw, 52px); }
@media (max-width: 980px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }
.footer h4 { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.footer ul li { padding: 5px 0; font-size: 0.9rem; color: var(--lead-c); }
.footer ul li a:hover { color: var(--accent); }
.footer__brand img { width: 180px; margin-bottom: 20px; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.09);
  transition: background-color 0.25s, color 0.25s;
}
.socials a:hover { background: var(--accent); color: var(--black); }
.socials svg { width: 18px; height: 18px; }
.footer__bottom {
  margin-top: clamp(34px, 4vw, 60px); padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  font-size: 0.74rem; color: var(--muted-c);
}
.footer__bottom a:hover { color: var(--accent); }

/* ---------- Cookie banner ---------- */
.cookie {
  position: fixed; z-index: 120; left: var(--gutter); right: var(--gutter); bottom: 20px;
  max-width: 620px;
  background: var(--ink); color: var(--white);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  display: none;
  gap: 16px;
}
.cookie[data-show='true'] { display: grid; }
body.menu-open .cookie { display: none; }
.cookie p { font-size: 0.84rem; }
.cookie .btn-row { gap: 10px; }
.cookie .btn--dark { background: var(--accent); color: var(--black); }
.cookie .btn--ghost:hover { background: var(--white); color: var(--black); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
}

/* ---------- Utilities ---------- */
.stack-sm > * + * { margin-top: 12px; }
.stack > * + * { margin-top: 20px; }
.center { text-align: center; }
.center .measure { margin-inline: auto; }
.sticky-col { position: sticky; top: 104px; }
@media (max-width: 900px) { .sticky-col { position: static; } }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; top: -60px; left: var(--gutter); z-index: 200;
  background: var(--accent); color: var(--black); padding: 12px 20px; border-radius: 0 0 8px 8px;
  font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em;
  transition: top 0.2s;
}
.skip:focus { top: 0; }
.hidden { display: none !important; }

/* =========================================================
   NATIONS RAIL — the countries, under the map
   A horizontal shelf: it scrolls with the wheel, a drag, the
   arrows or the keyboard, snaps card by card, and fades at
   both edges so it is obvious there is more to the side.
   ========================================================= */
.nations { margin-top: clamp(44px, 5vw, 76px); }
.nations__head { text-align: center; display: grid; gap: 18px; justify-items: center; margin-bottom: clamp(28px, 3.4vw, 44px); }
.nations__head--band { margin: 0 0 clamp(28px, 3.4vw, 44px); }
.nations__head--band .display { max-width: 22ch; }
.nations__head p { margin: 0; }

/* the shelf breaks out of the page gutters and runs to both screen edges */
.nations__rail {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.nations__track {
  display: flex;
  gap: clamp(12px, 1.4vw, 18px);
  overflow-x: auto;
  /* no snapping: the shelf loops, and snap fights the seamless jump */
  padding: 4px clamp(20px, 5vw, 64px) 16px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  /* No edge mask: over a light section its fade washed the first and
     last card out. The shelf simply runs off both screen edges. */
}
.nations__track::-webkit-scrollbar { display: none; }
.nations__track:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: var(--radius); }

.ncard {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: none;

  width: clamp(280px, 32vw, 400px);
  min-height: 440px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 2vw, 24px);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
  transition: transform 0.3s var(--ease);
}
/* ---- a card carrying a photograph ---- */
.ncard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ncard--photo::before {
  /* a gradient that holds the name and fades out towards the top,
     so the photograph is only darkened where the type needs it */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.20) 0%,
    rgba(0, 0, 0, 0.14) 40%,
    rgba(0, 0, 0, 0.06) 75%,
    rgba(0, 0, 0, 0) 100%);
}
.ncard--photo .ncard__flag,
.ncard--photo .ncard__count,
.ncard--photo .ncard__new { z-index: 2; }
.ncard__flag { position: relative; z-index: 2; font-size: 1.35rem; line-height: 1; }
.ncard__body { margin-top: auto; display: grid; gap: 6px; position: relative; z-index: 1; }
.ncard__country {
  font-size: clamp(2rem, 3vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-transform: uppercase;
}

.ncard__count {
  position: absolute;
  top: clamp(18px, 2vw, 24px);
  right: clamp(18px, 2vw, 24px);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--black);
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ncard__new {
  position: absolute;
  left: clamp(18px, 2vw, 24px);
  bottom: calc(clamp(18px, 2vw, 24px) + 62px);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* the arrows float over the ends of the shelf rather than sitting in the
   flow — in the flow their hit area ended up underneath the cards */
.nations__arrow {
  position: absolute;
  top: calc(50% - 28px);
  z-index: 2;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--white);
  color: var(--fg);
  transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}
.nations__arrow[data-rail='prev'] { left: clamp(10px, 2vw, 28px); }
.nations__arrow[data-rail='next'] { right: clamp(10px, 2vw, 28px); }
.nations__arrow:hover { background: var(--ink); color: var(--white); }
.nations__arrow svg { width: 16px; height: 16px; }
@media (max-width: 700px) { .nations__arrow { display: none; } }

/* ---------- Vision ----------
   The statement sits high and large; the three points below become
   proper cards with a photograph, a number and readable body copy.
   The client's text is used word for word. */
.vision__top { max-width: 68ch; }
.vision__lede {
  margin: 0;
  font-size: clamp(1.25rem, 2.1vw, 1.85rem);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.012em;
}
.vision__lede mark {
  background: linear-gradient(transparent 60%, var(--accent) 60%);
  color: inherit;
  padding: 0 0.06em;
}



/* =========================================================
   NATIONS RAIL — the countries, under the map
   A horizontal shelf: it scrolls with the wheel, a drag, the
   arrows or the keyboard, snaps card by card, and fades at
   both edges so it is obvious there is more to the side.
   ========================================================= */
.nations { margin-top: clamp(44px, 5vw, 76px); }
.nations__head { text-align: center; display: grid; gap: 18px; justify-items: center; margin-bottom: clamp(28px, 3.4vw, 44px); }
.nations__head--band { margin: 0 0 clamp(28px, 3.4vw, 44px); }
.nations__head--band .display { max-width: 22ch; }
.nations__head p { margin: 0; }

/* the shelf breaks out of the page gutters and runs to both screen edges */
.nations__rail {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.nations__track {
  display: flex;
  gap: clamp(12px, 1.4vw, 18px);
  overflow-x: auto;
  /* no snapping: the shelf loops, and snap fights the seamless jump */
  padding: 4px clamp(20px, 5vw, 64px) 16px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  /* No edge mask: over a light section its fade washed the first and
     last card out. The shelf simply runs off both screen edges. */
}
.nations__track::-webkit-scrollbar { display: none; }
.nations__track:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: var(--radius); }

.ncard {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: none;

  width: clamp(280px, 32vw, 400px);
  min-height: 440px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 2vw, 24px);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
  transition: transform 0.3s var(--ease);
}
/* ---- a card carrying a photograph ---- */
.ncard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ncard--photo::before {
  /* a gradient that holds the name and fades out towards the top,
     so the photograph is only darkened where the type needs it */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.20) 0%,
    rgba(0, 0, 0, 0.14) 40%,
    rgba(0, 0, 0, 0.06) 75%,
    rgba(0, 0, 0, 0) 100%);
}
.ncard--photo .ncard__flag,
.ncard--photo .ncard__count,
.ncard--photo .ncard__new { z-index: 2; }
.ncard__flag { position: relative; z-index: 2; font-size: 1.35rem; line-height: 1; }
.ncard__body { margin-top: auto; display: grid; gap: 6px; position: relative; z-index: 1; }
.ncard__country {
  font-size: clamp(2rem, 3vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-transform: uppercase;
}

.ncard__count {
  position: absolute;
  top: clamp(18px, 2vw, 24px);
  right: clamp(18px, 2vw, 24px);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--black);
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ncard__new {
  position: absolute;
  left: clamp(18px, 2vw, 24px);
  bottom: calc(clamp(18px, 2vw, 24px) + 62px);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* the arrows float over the ends of the shelf rather than sitting in the
   flow — in the flow their hit area ended up underneath the cards */
.nations__arrow {
  position: absolute;
  top: calc(50% - 28px);
  z-index: 2;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--white);
  color: var(--fg);
  transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}
.nations__arrow[data-rail='prev'] { left: clamp(10px, 2vw, 28px); }
.nations__arrow[data-rail='next'] { right: clamp(10px, 2vw, 28px); }
.nations__arrow:hover { background: var(--ink); color: var(--white); }
.nations__arrow svg { width: 16px; height: 16px; }
@media (max-width: 700px) { .nations__arrow { display: none; } }

/* ---------- Vision ----------
   A statement first, then three short columns underneath. The client's
   text is used word for word; only the typography does the work. */
.vision__lede {
  font-size: clamp(1.3rem, 2.3vw, 1.95rem);
  font-weight: 300;
  line-height: 1.34;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 34ch;
}
.vision__lede mark {
  background: linear-gradient(transparent 60%, var(--accent) 60%);
  color: inherit;
  padding: 0 0.06em;
}
.vision__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1.5px solid var(--line);
}
@media (max-width: 860px) { .vision__cols { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
.vision__col p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--lead-c); }
.vision__col .num { color: var(--ink); margin-bottom: 12px; }

/* =========================================================
   WHAT'S COMING UP — white panel, photo cards that scroll
   ========================================================= */
.upnext {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 3.4vw, 56px);
  background: var(--white);
  border-radius: 8px;
  padding: clamp(26px, 3.2vw, 48px);
  align-items: center;
}
@media (max-width: 900px) { .upnext { grid-template-columns: minmax(0, 1fr); } }

.upnext__intro { display: grid; justify-items: start; }
.upnext__counter {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  line-height: 1;
}
.upnext__counter b { font-size: clamp(2.6rem, 4vw, 3.4rem); font-weight: 700; letter-spacing: -0.04em; }
.upnext__counter span { font-size: 1rem; font-weight: 700; color: var(--muted-c); }
.upnext__blurb {
  margin: 16px 0 0;
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--lead-c);
  min-height: 4.6em;
}
.upnext__nav { display: flex; gap: 10px; margin-top: clamp(24px, 3vw, 38px); }
.upnext__arrow {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}
.upnext__arrow:hover { background: var(--surface-2); }
.upnext__arrow--solid { background: var(--ink); color: var(--white); }
.upnext__arrow--solid:hover { background: var(--accent); color: var(--black); }
.upnext__arrow svg { width: 17px; height: 17px; }
.upnext__arrow[disabled] { opacity: 0.3; pointer-events: none; }

.upnext__track {
  display: flex;
  gap: clamp(12px, 1.4vw, 18px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.upnext__track::-webkit-scrollbar { display: none; }
.upnext__track:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: var(--radius); }

.upcard {
  position: relative;
  flex: 0 0 auto;
  width: clamp(230px, 27vw, 340px);
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(16px, 1.8vw, 22px);
  color: var(--white);
  isolation: isolate;
}
/* the whole card is one link: it carries the layout so the content
   still sits at the bottom of the frame */
.upcard__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: clamp(16px, 1.8vw, 22px);
  color: inherit;
  text-decoration: none;
}
.upcard__tag { align-self: flex-start; }
.upcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.upcard::before {
  /* a gradient scrim: dark where the type sits, clear over the picture */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.96) 0%,
    rgba(0, 0, 0, 0.92) 26%,
    rgba(0, 0, 0, 0.74) 48%,
    rgba(0, 0, 0, 0.4) 72%,
    rgba(0, 0, 0, 0.14) 100%);
}
.upcard__tag {
  position: absolute;
  top: clamp(16px, 1.8vw, 22px);
  left: clamp(16px, 1.8vw, 22px);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.upcard__body { display: grid; gap: 8px; }
.upcard__title { font-size: clamp(1.2rem, 1.7vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.upcard__blurb { font-size: 0.82rem; line-height: 1.45; color: rgba(255, 255, 255, 0.88); }
@media (max-width: 700px) { .upcard__blurb { display: none; } }

/* ---------- Our story: the photograph rides along ----------
   It fills the right half of the screen and stays pinned for the whole
   timeline, sliding away only when the last entry has passed. */
.story__media {
  position: sticky;
  top: 96px;
  align-self: start;
  /* a fixed portrait frame: it never changes size, and stays pinned
     while the timeline runs past it */
  height: auto;
  aspect-ratio: 3 / 4;
  max-height: 92vh;
}

.photo__caption {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .story__media { position: static; height: auto; }
  .story__media .photo { aspect-ratio: 3 / 4; }
}

/* ---------- Our story: the photographs change as the timeline runs ---------- */
.story__stack {
  position: relative;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.story__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.story__shot[data-active='true'] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .story__shot { transition: none; } }

/* =========================================================
   VISION — the statement lights up as you scroll past it
   ========================================================= */
/* a full screen given to one sentence, centred, with the client's line breaks */
.vision-full {
  min-height: 100vh;
  display: grid;
  align-items: center;
}
.vfill { display: grid; justify-items: center; }
.vfill__text {
  margin: 0;
  font-size: clamp(2.1rem, 5.6vw, 5.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}
@media (max-width: 700px) {
  /* the four hand-set breaks are for the desktop measure */
  .vfill__text br { display: none; }
}
.vfill__text span { color: rgba(255, 255, 255, 0.42); transition: color 1.6s var(--ease); }
.vfill__text span.is-lit { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .vfill__text span { transition: none; color: var(--accent); }
}

/* ---------- Our story: the frame is half the screen, with its own arrows ---------- */
.story__arrow {
  position: absolute;
  bottom: 18px;
  z-index: 3;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0;
  background: none;
  color: var(--white);
  opacity: 0.85;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
  transition: opacity 0.2s, transform 0.2s var(--ease);
}
.story__arrow:hover { opacity: 1; transform: scale(1.12); }
.story__arrow svg { width: 22px; height: 22px; }
.story__arrow[data-story='prev'] { right: 58px; }
.story__arrow--next { right: 16px; }
.story__dots {
  position: absolute;
  right: 18px;
  top: 16px;
  z-index: 3;
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* ---------- About: the hero wording sits on the photograph's baseline ---------- */
.hero__grid--bottom { align-items: end; }
.hero__grid--bottom > div:first-child { padding-bottom: clamp(0px, 1vw, 14px); }

/* ---------- The pastors: portrait and wording as one balanced block ---------- */
.pastors__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); }
@media (max-width: 900px) { .pastors__grid { grid-template-columns: minmax(0, 1fr); } }
.pastors__grid .photo--tall { position: sticky; top: 104px; }
@media (max-width: 900px) { .pastors__grid .photo--tall { position: static; } }
.pastors__grid .stat__n { font-size: clamp(2rem, 3.4vw, 2.8rem); }

/* ---------- The founder note follows straight on from the pastors ---------- */


/* =========================================================
   CITY SLIDER — every city, drifting past in two lanes
   ========================================================= */
.cityslider {
  margin-top: clamp(30px, 3.5vw, 48px);
  display: grid;
  gap: clamp(10px, 1.2vw, 16px);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cityline { overflow: hidden; }
.cityline__track {
  display: flex;
  gap: clamp(8px, 0.9vw, 12px);
  width: max-content;
  will-change: transform;
}
/* a glass tile: the map and the page show through it, so the belt reads as
   one calm surface rather than a row of grey pills */
.ctick {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 24px -14px rgba(13, 14, 16, 0.35);
  white-space: nowrap;
}
.ctick b {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.ctick i {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-c);
}
@media (prefers-reduced-motion: reduce) {
  .cityline { overflow-x: auto; }
  .cityline__track { transform: none !important; }
}

/* =========================================================
   LAYOUT REFINEMENTS
   ========================================================= */

/* a column whose first block sits at the top and last at the foot,
   so wording lines up with the top and bottom of the photo beside it */
.stack-split { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(28px, 4vw, 56px); height: 100%; }
.split--stretch { align-items: stretch; }
.split--stretch .photo { align-self: start; }
.hero__grid--split { align-items: stretch; }
.hero__grid--split .photo { align-self: start; }
@media (max-width: 980px) {
  .split--stretch .photo, .hero__grid--split .photo { height: auto; min-height: 0; }
  .stack-split { display: grid; gap: 26px; }
}

/* a section that belongs with the one above it */
.section--joined { padding-top: 0; }

/* ---------- Vision: alternating rows ---------- */

/* ---------- Leaders: one block, mirrored for the founder ---------- */
.leader {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(28px, 4vw, 68px);
  align-items: center;
}
.leader--flip .leader__text { order: 2; }
@media (max-width: 900px) {
  .leader { grid-template-columns: minmax(0, 1fr); }
  .leader--flip .leader__text { order: 0; }
}
.leader__shot { aspect-ratio: 3 / 4; }
.leader__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(28px, 3vw, 40px);
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1.5px solid var(--line);
}
.leader__stats .stat__n { font-size: clamp(1.8rem, 3vw, 2.6rem); }

/* ---------- three promises, as ruled lines instead of a loose list ---------- */
.ptlist {
  list-style: none;
  margin: clamp(24px, 3vw, 32px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  max-width: 46ch;
}
.ptlist__item {
  border-bottom: 1px solid var(--line);
  padding: 14px 2px 14px 26px;
  position: relative;
  font-size: 1rem;
  line-height: 1.4;
}
.ptlist__item::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 1.25em;
  width: 8px;
  height: 8px;
  background: var(--accent-fg);
  border-radius: 8px;
}
.section--dark .ptlist,
.section--dark .ptlist__item { border-color: rgba(255, 255, 255, 0.16); }

/* ---------- What we believe: label column + numbered accordion ---------- */
.creed {
  display: grid;
  grid-template-columns: minmax(200px, 0.62fr) minmax(0, 1.6fr);
  gap: clamp(30px, 5vw, 90px);
  align-items: start;
}
@media (max-width: 900px) { .creed { grid-template-columns: minmax(0, 1fr); } }

.creed__side { position: sticky; top: 110px; }
@media (max-width: 900px) { .creed__side { position: static; } }
.creed__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.creed__label::before { content: ''; width: 9px; height: 9px; background: var(--ink); }
.creed__note { margin-top: 16px; font-size: 1rem; max-width: 30ch; }

.creed__list { border-top: 1px solid var(--line); }
.creed__row { border-bottom: 1px solid var(--line); }
.creed__btn {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: clamp(18px, 2.2vw, 28px) 0;
  cursor: pointer;
}
.creed__n {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted-c);
}
.creed__title {
  font-size: clamp(1.35rem, 3.1vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.creed__plus {
  width: clamp(38px, 4vw, 50px);
  height: clamp(38px, 4vw, 50px);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.07);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.creed__btn:hover .creed__plus { background: var(--accent); }
.creed__row[data-open='true'] .creed__plus { background: var(--ink); color: var(--white); }
.creed__panel p {
  padding: 0 clamp(0px, 6vw, 90px) 26px 54px;
  color: var(--lead-c);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 68ch;
}
.creed__panel .creed__ref {
  padding-top: 0;
  padding-bottom: 28px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted-c);
}
.creed__panel p + .creed__ref { margin-top: -18px; }
@media (max-width: 620px) {
  .creed__btn { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .creed__panel p { padding-left: 34px; padding-right: 0; }
}

/* ---------- Light hero (About) ---------- */
.hero--light { background: var(--white); color: var(--ink); }
.hero--light .hero__bg, .hero--light .hero__scrim { display: none; }

/* ---------- Leader names, smaller than a page title ---------- */
.leader__name {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* =========================================================
   EVENTS PAGE COMPONENTS
   A label, a two-tone headline with one link on the right,
   then either a picture-plus-rows feature or a card shelf.
   ========================================================= */

/* eyebrow: a small star and the section name */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '\2726';
  /* the yellow is too light to read as a small mark on a light ground,
     so marks follow the surface: ink on light, white on black */
  color: var(--accent-fg);
  font-size: 0.85rem;
  line-height: 1;
}
.section--accent .eyebrow::before { color: var(--ink); }

/* the headline holds the left, its one call to action the right */
.headrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 48px);
  flex-wrap: wrap;
}
.headrow .display { margin: 0; }
.tone-soft { color: var(--muted-c); }

.arrow-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  padding-bottom: 4px;
}
.arrow-cta i {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  transition: background-color 0.2s, color 0.2s, transform 0.2s var(--ease);
}
.arrow-cta i svg { width: 16px; height: 16px; }
.arrow-cta:hover i { background: var(--accent); color: var(--black); transform: translate(2px, -2px); }

/* picture on one side, the detail rows on the other */
.feature {
  margin-top: clamp(28px, 3.4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  /* both columns end on the same line: all of an event's copy sits beside its
     photograph, and the photograph never runs on past the words */
  align-items: stretch;
}
.feature + .feature { margin-top: clamp(20px, 2.4vw, 34px); }
@media (max-width: 900px) { .feature { grid-template-columns: minmax(0, 1fr); } }
.feature--flip .feature__media { order: 2; }
@media (max-width: 900px) { .feature--flip .feature__media { order: 0; } }
.feature__media {
  position: relative;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  /* square frames on the events page */
  aspect-ratio: 1 / 1;
  align-self: start;
  background: var(--surface-2);
}
/* where the copy is shorter than the square, it spreads to meet it, so the two
   columns still finish on the same line */
.feature--level .feature__side { display: flex; flex-direction: column; }
.feature--level .deets { margin-top: auto; }
.feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.feature__tag {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.feature__tag b { color: var(--muted-c); margin-right: 6px; }
.feature__lede { margin: 0 0 clamp(20px, 2.4vw, 30px); font-size: 1rem; line-height: 1.6; color: var(--lead-c); max-width: 46ch; }
.feature__note { margin: clamp(20px, 2.4vw, 28px) 0 0; font-size: 1rem; }

/* accordion rows in the events style: hairlines and a round plus */
.acc--rows { border-top: 1px solid var(--line); }
.acc--rows .acc__item { border-bottom: 1px solid var(--line); }
.acc--rows .acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 1.8vw, 22px) 0;
  cursor: pointer;
}
.acc--rows .acc__t { font-size: clamp(1.05rem, 1.6vw, 1.28rem); font-weight: 700; letter-spacing: -0.02em; text-transform: none; }
.acc__plus {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.07);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.acc--rows .acc__btn:hover .acc__plus { background: var(--accent); }
.acc--rows .acc__item[data-open='true'] .acc__plus { background: var(--ink); color: var(--white); }
.acc--rows .acc__panel p { padding: 0 0 24px; max-width: 52ch; }

/* the WhatsApp buttons: one per Lifegroup */
.btn--wa { background: #25d366; color: #05300f; }
.btn--wa:hover { background: var(--ink); color: var(--white); }
.btn--wa svg { width: 19px; height: 19px; margin-right: 2px; }

/* small stacked cards for the conversation class */
.minicards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(10px, 1.2vw, 14px); }
.minicard {
  padding: clamp(16px, 1.8vw, 22px);
  border-radius: 8px;
  background: var(--white);
}
.minicard__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-c);
  margin-bottom: 10px;
}
.minicard__title { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.minicard__text { margin: 8px 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--lead-c); }

/* =========================================================
   CALENDAR PAGE
   ========================================================= */
.cal__bar {
  margin-top: clamp(28px, 3.4vw, 44px);
  display: flex;
  align-items: end;
  gap: clamp(12px, 1.6vw, 20px);
  flex-wrap: wrap;
  padding-bottom: clamp(18px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
}
.cal__control { display: grid; gap: 7px; }
.cal__control > span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.cal__control select {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 12px 40px 12px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.cal__count {
  margin: 0 0 12px auto;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-c);
}
@media (max-width: 700px) { .cal__count { margin-left: 0; } }

.cal__grid {
  margin-top: clamp(24px, 3vw, 36px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  /* every day box is the same size, empty space and all: the grid reads as a
     grid rather than a ragged stack */
  grid-auto-rows: 1fr;
  gap: clamp(14px, 1.6vw, 20px);
  align-items: stretch;
}
.calday {
  height: 100%;
  background: var(--white);
  border-radius: 8px;
  padding: clamp(18px, 2vw, 24px);
}
.calday--today { box-shadow: inset 0 0 0 2px var(--ink); }
.calday__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.calday__num {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.calday__num span { font-size: 0.66rem; letter-spacing: 0.1em; color: var(--muted-c); }
.calday__dow { margin: 0; font-size: 1rem; font-weight: 700; }
.calday__dow b {
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--black);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.calday__list { list-style: none; margin: 0; padding: 0; }
.calev { padding: 16px 0; border-bottom: 1px solid var(--line-soft, rgba(0,0,0,0.07)); position: relative; }
.calev:last-child { border-bottom: 0; padding-bottom: 0; }
.calev__title {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding-right: 70px;
}
.calev__title:hover { border-bottom: 1.5px solid currentColor; }
.calev__when { margin: 6px 0 0; font-size: 0.86rem; color: var(--lead-c); }
.calev__note { margin: 6px 0 0; font-size: 0.82rem; color: var(--muted-c); }
.calev__cat {
  position: absolute;
  right: 0;
  top: 16px;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.calev--special .calev__cat { background: var(--accent); color: var(--black); }

.calempty {
  grid-column: 1 / -1;
  padding: clamp(30px, 4vw, 54px);
  border-radius: 8px;
  background: var(--surface);
  text-align: center;
}
.calempty .muted { margin-top: 10px; }

.cal__pending {
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line);
}
.cal__pending ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.cal__pending li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: 8px;
  background: var(--surface);
}
.cal__pending li a { font-weight: 700; }
.cal__pending li a:hover { border-bottom: 1.5px solid currentColor; }
.cal__pending li span { font-size: 0.82rem; color: var(--muted-c); }

/* the first section of an inner page clears the sticky header */
.section--pagetop { padding-top: clamp(56px, 7vw, 104px); }

/* the practical details of one event, set beside its picture */
.deets { margin: clamp(20px, 2.4vw, 28px) 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.deets > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 520px) { .deets > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.deets dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-c);
  padding-top: 3px;
}
.deets dd { margin: 0; font-size: 1rem; line-height: 1.5; }
.feature__side .btn--wa { margin-top: clamp(20px, 2.4vw, 28px); }
.feature__side .gopen__kids { margin-top: clamp(20px, 2.4vw, 28px); }
.feature__side .cd { margin: 0; }

/* =========================================================
   OUR EVENTS — four cards to a strip, each opening a dialog
   ========================================================= */
/* two groups: what happens every week, and what happens once */
.evgroup, .mgroup { margin-top: clamp(34px, 4.4vw, 62px); }
.evgroup__head {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 28px);
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--ink);
}
.evgroup__title {
  margin: 0;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.evgroup__title::before {
  content: '';
  width: 9px;
  height: 9px;
  background: var(--accent-fg);
  border-radius: 50%;
}
.evgroup:last-child .evgroup__title::before,
.mgroup:last-child .evgroup__title::before { background: var(--ink); }
.evgroup__note { margin: 0; font-size: 0.92rem; color: var(--muted-c); max-width: 52ch; }

.evcards {
  margin-top: clamp(18px, 2.2vw, 28px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* every card in a strip is the same height, whatever the copy does */
  grid-auto-rows: 1fr;
  gap: clamp(14px, 1.6vw, 20px);
}
@media (max-width: 1080px) { .evcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .evcards { grid-template-columns: minmax(0, 1fr); } }

.evcard {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  padding: 0 0 clamp(16px, 1.8vw, 20px);
  cursor: pointer;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.evcard:hover { box-shadow: inset 0 0 0 1px rgba(13, 14, 16, 0.3); transform: translateY(-2px); }
.evcard:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
.evcard__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
}
.evcard__tag {
  align-self: flex-start;
  margin: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 20px) 0;
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.evcard__title { margin: 10px clamp(16px, 1.8vw, 20px) 0; font-size: 1.16rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.evcard__open {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.evcard__open::after { content: ''; position: absolute; inset: 0; }   /* the whole card is the target */
.evcard { position: relative; }
.evcard__blurb {
  margin: 9px clamp(16px, 1.8vw, 20px) 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--lead-c);
}
.evcard__meta {
  margin: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 20px) 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  font-size: 0.82rem;
}
.evcard__meta > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
.evcard__meta dt { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-c); padding-top: 2px; }
.evcard__meta dd { margin: 0; line-height: 1.4; }
.evcard__cta {
  position: relative;
  z-index: 1;                     /* stays clickable above the card overlay */
  margin: clamp(16px, 1.8vw, 20px) clamp(16px, 1.8vw, 20px) 0;
  justify-content: center;
  margin-top: auto;
}

/* ---------- the dialog ---------- */
.modal {
  width: min(680px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  overflow: auto;
  position: fixed;
  inset: 0;
  margin: auto;
}
.modal::backdrop { background: rgba(13, 14, 16, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal__body { padding: clamp(26px, 3.4vw, 44px); }
.modal__close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 2;
  margin: 14px 14px 0 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.07);
  color: var(--ink);
  cursor: pointer;
}
.modal__close:hover { background: var(--accent); }
.modal__close svg { width: 16px; height: 16px; }
.modal__tag {
  margin: 0 0 12px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.modal__title { margin: 0 0 clamp(16px, 2vw, 22px); font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.02; letter-spacing: -0.035em; text-transform: uppercase; }
.modal__body p { margin: 0 0 14px; font-size: 1rem; line-height: 1.6; color: var(--lead-c); max-width: 58ch; }
.modal__body .deets { margin-top: clamp(18px, 2.2vw, 26px); }
.modal__cta { margin-top: clamp(20px, 2.4vw, 28px); }

/* a form with no column of copy beside it: centred, and no wider than it needs */
.formbox { max-width: 620px; margin-inline: auto; }

/* =========================================================
   I'M NEW
   ========================================================= */

/* the hero carries a photograph instead of the film */
.hero--photo .hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero--photo .hero__title { font-size: clamp(3.4rem, 12vw, 9rem); line-height: 0.88; }

/* label on the left, one large paragraph on the right */
.introrow {
  display: grid;
  grid-template-columns: minmax(150px, 0.5fr) minmax(0, 1.7fr);
  gap: clamp(20px, 4vw, 70px);
  align-items: start;
}
@media (max-width: 860px) { .introrow { grid-template-columns: minmax(0, 1fr); } }
.introrow .eyebrow { margin-top: 8px; }
.introrow__text {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-size: clamp(1.2rem, 2.3vw, 1.9rem);
  line-height: 1.35;
  font-weight: 300;
  letter-spacing: -0.02em;
  max-width: 40ch;
}
.introrow__text strong { font-weight: 700; }

/* four steps through the morning */
.steps {
  list-style: none;
  margin: clamp(26px, 3.2vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  counter-reset: step;
}
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step {
  padding-top: 18px;
  border-top: 1.5px solid var(--ink);
}
.step__n {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-fg);
  margin-bottom: 12px;
}
.step__title { margin: 0; font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-weight: 700; letter-spacing: -0.02em; }
.step__text { margin: 10px 0 0; font-size: 0.94rem; line-height: 1.55; color: var(--lead-c); }

/* the three practical facts */
.wherebox {
  margin-top: clamp(30px, 3.6vw, 52px);
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: 8px;
  background: var(--surface);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
@media (max-width: 820px) { .wherebox { grid-template-columns: minmax(0, 1fr); } }
.wherebox__label {
  margin: 0 0 10px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.wherebox__big { margin: 0 0 6px; font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.wherebox__where { margin: 0; font-size: 1rem; line-height: 1.45; }
.wherebox__where strong { display: block; }
.wherebox__where span { color: var(--muted-c); }

/* FAQs: the label column, then a stack of cards that open */
.faqs {
  display: grid;
  grid-template-columns: minmax(200px, 0.7fr) minmax(0, 1.6fr);
  gap: clamp(26px, 4vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .faqs { grid-template-columns: minmax(0, 1fr); } }
.faqs__side { position: sticky; top: 110px; }
@media (max-width: 900px) { .faqs__side { position: static; } }
.faqs__list { border-top: 0; display: grid; gap: 10px; }
.faq {
  border-bottom: 0 !important;
  background: var(--surface);
  border-radius: 8px;
  padding: 0 clamp(16px, 2vw, 24px);
}
.faq .acc__btn { padding: clamp(15px, 1.8vw, 20px) 0; }
.faq .acc__t { font-size: clamp(1rem, 1.4vw, 1.12rem); }
.faq .acc__panel p { padding-bottom: clamp(15px, 1.8vw, 20px); max-width: 62ch; }
.faq[data-open='true'] { background: var(--surface-2); }

/* a closing band with the words on one side and the buttons on the other */
.cta-band {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: clamp(22px, 4vw, 60px);
  flex-wrap: wrap;
}

/* ---------- Ministries ---------- */
/* the small cards come in a four-up or two-up row */
.minicards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.minicards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.minicards--4, .minicards--2 { margin-top: clamp(18px, 2.2vw, 26px); gap: clamp(12px, 1.5vw, 18px); }
@media (max-width: 1000px) { .minicards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .minicards--4, .minicards--2 { grid-template-columns: minmax(0, 1fr); } }
.minicards--4 .minicard, .minicards--2 .minicard { height: 100%; }
.minicard h4.minicard__title { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }

/* the named projects: a name and its one job, on a ruled grid */
.tiles {
  list-style: none;
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 clamp(16px, 2vw, 28px);
  border-top: 1px solid var(--line);
}
@media (max-width: 1080px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .tiles { grid-template-columns: minmax(0, 1fr); } }
.tile { padding: 16px 0; border-bottom: 1px solid var(--line); }
.tile__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.tile__role { margin: 5px 0 0; font-size: 0.86rem; line-height: 1.4; color: var(--muted-c); }

/* ---------- The four age bands, on the yellow home band ---------- */
.gens {
  list-style: none;
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}
@media (max-width: 700px) { .gens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gen { padding-top: 12px; border-top: 1.5px solid var(--line); }
.gen__age {
  display: block;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.gen__name {
  display: block;
  margin-top: 7px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-c);
}

/* =========================================================
   BLOG
   ========================================================= */
.blogbar {
  margin-top: clamp(26px, 3.2vw, 40px);
  padding-bottom: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 9px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.pill:hover { background: var(--accent); }
.pill[aria-pressed='true'] { background: var(--ink); color: var(--white); }
.blogbar__count {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-c);
}

.artcards {
  margin-top: clamp(22px, 2.8vw, 34px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(14px, 1.8vw, 22px);
}
@media (max-width: 1000px) { .artcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .artcards { grid-template-columns: minmax(0, 1fr); } }
.artcard {
  height: 100%;
  background: var(--surface);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.artcard:hover { box-shadow: inset 0 0 0 1px rgba(13, 14, 16, 0.3); transform: translateY(-2px); }
.artcard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}
.artcard__media { aspect-ratio: 16 / 10; margin: 0; border-radius: 0; }
.artcard__cat {
  align-self: flex-start;
  margin: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 20px) 0;
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.artcard__title {
  margin: 10px clamp(16px, 1.8vw, 20px) 0;
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
}
.artcard__excerpt {
  margin: 9px clamp(16px, 1.8vw, 20px) 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--lead-c);
}
.artcard__meta {
  margin: 14px clamp(16px, 1.8vw, 20px) 0;
  font-size: 0.76rem;
  color: var(--muted-c);
  display: flex;
  gap: 8px;
}
.artcard__more {
  margin: auto clamp(16px, 1.8vw, 20px) clamp(16px, 1.8vw, 20px);
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.artcard:hover .artcard__more { color: var(--accent-fg); }

/* ---------- one post ---------- */
.prose { max-width: 760px; margin-inline: auto; }
.crumbs {
  display: flex;
  gap: 8px;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.crumbs a:hover { color: var(--fg); border-bottom: 1.5px solid currentColor; }
.prose h1 { margin: 0; }
.prose__stand {
  margin: clamp(16px, 2vw, 22px) 0 0;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.45;
  font-weight: 300;
  color: var(--lead-c);
}
.artmeta {
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-c);
}
/* an article header image is landscape: a portrait frame at this width would
   push the first paragraph off the screen */
.prose__hero { margin: clamp(24px, 3vw, 38px) 0 0; aspect-ratio: 16 / 9; }
.prose__body { margin-top: clamp(26px, 3.2vw, 40px); }
.prose__lede { margin: 0 0 18px; font-size: 1.05rem; line-height: 1.65; }
.prose__step { margin-top: clamp(28px, 3.4vw, 44px); }
.prose__n {
  margin: 0 0 6px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted-c);
}
.prose__step h2 {
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-transform: uppercase;
}
.prose__step p { margin: 0; font-size: 1rem; line-height: 1.65; }
.pullbox {
  margin-top: clamp(30px, 3.6vw, 48px);
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 8px;
  background: var(--surface-2);
}
.pullbox h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.pullbox p { margin: 0; font-size: 0.95rem; line-height: 1.6; }
.prose__cta {
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1.5px solid var(--ink);
}
.prose__next { margin-top: clamp(38px, 4.5vw, 64px); }
.prose__next .artcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .prose__next .artcards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- prose: a testimony rather than a numbered list ---------- */
.prose__body > p { margin: 0 0 18px; font-size: 1.05rem; line-height: 1.7; }
.prose__h2 {
  margin: clamp(28px, 3.4vw, 40px) 0 14px;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-transform: uppercase;
}
.prose__quote {
  margin: clamp(26px, 3.2vw, 38px) 0;
  padding: 0 0 0 clamp(18px, 2.4vw, 28px);
  border-left: 3px solid var(--ink);
}
.prose__quote p {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.35;
  font-weight: 300;
  letter-spacing: -0.02em;
}

/* ---------- Ministries: a banner, a label and the words ---------- */
.mcards {
  list-style: none;
  margin: clamp(18px, 2.2vw, 28px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(14px, 1.7vw, 22px);
}
@media (max-width: 1000px) { .mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .mcards { grid-template-columns: minmax(0, 1fr); } }
.mcard {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 8px;
  overflow: hidden;
}
.mcard__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
}
.mcard__img--empty { display: block; }
.mcard__body { padding: clamp(15px, 1.8vw, 20px); }
.mcard__label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted-c);
  margin-bottom: 8px;
}
.mcard__title {
  margin: 0 0 8px;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-transform: uppercase;
}
.mcard__text { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--lead-c); }

/* ---------- Ministries: six drawers ---------- */
.mgroups { margin-top: clamp(30px, 3.6vw, 50px); }
.mgroups .mgroup { margin-top: 0; }
.mgroups .acc__btn { padding: clamp(11px, 1.1vw, 15px) 0; gap: 14px; }
.mgroups .acc__plus { width: 28px; height: 28px; }
.mgroups .acc__sign { width: 14px; height: 14px; }
.mgroups .acc__sign::before { top: 6px; width: 14px; }
.mgroups .acc__sign::after { left: 6px; height: 14px; }
.mgroup__title {
  flex: 1;
  font-size: clamp(0.98rem, 1.25vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-align: left;
}
.mgroup__count {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-c);
  white-space: nowrap;
}
.mgroup__note {
  margin: 0 0 clamp(16px, 2vw, 22px);
  font-size: 0.95rem;
  color: var(--muted-c);
  max-width: 62ch;
}
.mgroups .mcards { margin-bottom: clamp(24px, 3vw, 36px); }
.mgroups .mcards { margin-top: 0; }

/* ---------- A plain white hero: the title, one line, one button ---------- */
.hero--plain {
  background: var(--white);
  color: var(--ink);
  padding-block: clamp(56px, 9vw, 130px) clamp(30px, 4vw, 54px);
  text-align: center;
}
.hero--plain::before { content: none; }          /* no glow on a white ground */
.hero__centre {
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.4vw, 28px);
}
.hero--plain .hero__title {
  margin: 0;
  font-size: clamp(3.4rem, 13vw, 10rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
}
.hero__sub {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.02rem, 1.5vw, 1.28rem);
  line-height: 1.45;
  font-weight: 300;
  color: var(--lead-c);
}
/* the way down to the rest of the page */
.hero__down {
  margin-top: clamp(10px, 2vw, 22px);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  transition: background-color 0.2s, transform 0.3s var(--ease);
  animation: nudge 2.4s var(--ease) infinite;
}
.hero__down svg { width: 20px; height: 20px; }
.hero__down:hover { background: var(--accent); animation: none; transform: translateY(3px); }
@keyframes nudge {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) { .hero__down { animation: none; } }

/* ---------- Gift Aid: inline errors, honeypot, confirmation ---------- */
.field__error {
  margin: 6px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #a3241b;
  min-height: 0;
}
.section--dark .field__error { color: #ff9b91; }
.field input[aria-invalid='true'],
.field select[aria-invalid='true'],
.field textarea[aria-invalid='true'] { border-color: #a3241b; }
.check input[aria-invalid='true'] { outline: 2px solid #a3241b; outline-offset: 2px; }

/* the field only a robot can see */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form__note--error { color: #a3241b; font-weight: 700; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.submitrow { display: inline-block; }

/* the block that takes the form's place */
.formdone {
  padding: clamp(24px, 3vw, 36px);
  border-radius: 8px;
  background: var(--surface);
}
.formdone h3 { margin: 0 0 10px; }
.formdone p { margin: 0; color: var(--lead-c); }

/* the note shown when someone lands back from Stripe */
.giftback {
  margin-bottom: clamp(18px, 2.2vw, 26px);
  padding: clamp(16px, 2vw, 22px);
  border-radius: 8px;
  background: var(--accent);
  color: var(--black);
}
.giftback p { margin: 0; font-size: 0.98rem; font-weight: 700; line-height: 1.45; }

/* the quiet way out */
.skipstep { margin: clamp(18px, 2.2vw, 26px) 0 0; font-size: 0.88rem; }
.skipstep a { color: var(--muted-c); border-bottom: 1px solid currentColor; }
.skipstep a:hover { color: var(--fg); }