/* Pride Destroy — design system ("Divine Light"; CBA family).
   Light, airy, minimalist white-and-tint canvas with ONE vivid door hue
   (PRIDE DESTROY = DEEP RED --home) as the only accent color — colorful yet simple,
   big legible type, generous whitespace, one idea per section. Display type
   is Poppins, body type is Inter (BRAND-FAMILY.md §3); Fraunces is kept ONLY
   as the optional warm-serif accent for Scripture verses/pull-quotes, never
   as the default heading face.

   Single source of truth: every page (_build/) renders against these class
   names; the legacy class names (page-hero, band, sky-band, resource-note,
   button.dark/ghost/light, etc.) are mapped here so the inner pages inherit
   the Divine Light look without markup changes. */

:root {
  /* ---- Site redesign kit v1 tokens (approved 2026-09-24), mapped onto the
     Divine Light neutral names so every existing class keeps working ---- */
  --paper: #FAF8F4;       /* kit --bg: page background */
  --paper-2: #ffffff;     /* kit --surface: cards / raised surfaces / header */
  --mist: #F1EFE9;        /* kit --band: soft section tint */
  --ink: #1E2124;         /* kit --ink: headings, primary button fill */
  --ink-soft: #4F5457;    /* kit --text-2: secondary text (--muted) */
  /* kit --muted: tertiary/meta text, 4.5:1+ on both --paper and --mist. */
  --ink-faint: #6E6A63;   /* tertiary / meta */
  --line: #E6E1D8;        /* kit --line: hairline borders */
  --line-strong: #CFC8BC; /* kit outline-button border: stronger hairline */

  /* ---- The divine spectrum (one hue owns each door; BRAND-FAMILY.md §2) ---- */
  --home: #8b0000;        /* Pride Destroy — Deep Red (primary here) */
  --call: #f4a72c;        /* God's Calling — Sunrise Amber */
  --word: #f2624c;        /* Pray Then Act — Living Coral */
  --way: #7a5af0;         /* Discover Jesus — Royal Violet */
  --waters: #16b5c4;      /* To The Waters — Living-Water Cyan (baptism) */

  /* ---- Pride Destroy's own door — Deep Red (primary and ONLY accent) ---- */
  --red: #7a0000;       /* deep, AA-on-light red for type/links */
  --red-deep: #4a0000;  /* deepest red — emphasis word, headings on tint */
  --red-bright: #a52a2a;/* brighter red — gradient top */

  /* ---- "Gold" tokens repointed to green (BRAND-FAMILY.md: ONE vivid color
     per door — CBA never introduces a second accent hue). Kept as --gold-*
     names only so every existing eyebrow/numeral/hairline/status class below
     keeps working unchanged; the rendered color is CBA's own green. ---- */
  --gold: var(--red);          /* eyebrows, numerals, hairlines */
  --gold-2: var(--red-bright); /* secondary emphasis */
  --red-soft: #f5e6e6;          /* soft green — underline glow */
  --gold-line: rgba(139, 0, 0, 0.28);

  /* ---- Skylight atmosphere (subtle, green-tinted, not gold) ---- */
  --glow-warm: rgba(255, 255, 255, 0.95);
  --glow-gold: rgba(139, 0, 0, 0.10);

  --shadow: 0 24px 60px -28px rgba(16, 33, 58, 0.24);
  --shadow-soft: 0 14px 40px -24px rgba(16, 33, 58, 0.18);
  --shadow-sm: 0 12px 30px -20px rgba(16, 33, 58, 0.14);

  --radius: 6px;
  /* Site redesign kit v1 (approved 2026-09-24): display/heading face is
     Cormorant Garamond, body/UI face is Manrope. --serif now matches
     --display so verse/pull-quote flourishes stay in the same family. */
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: var(--sans); /* BRAND-FAMILY.md token name for family chrome */
  --wrap: 1180px;

  /* ---- Legacy aliases — keep old class names rendering against Divine Light tokens -- */
  --bg: var(--paper);
  --bg-tint: var(--mist);
  --white: #ffffff;
  --muted: var(--ink-soft);
  --soft: var(--mist);
  --sky: var(--mist);
  --forest: var(--home);
  --accent: var(--home);
  --accent-strong: var(--red);
  --accent-2: var(--gold);       /* eyebrows / kickers — CBA green */
  --copper-strong: var(--red-deep);
  --coral: var(--word);
  --deep: var(--red-deep);     /* old "dark section" → deep green */
  --deep-2: var(--red-deep);
  /* This site's own door hue, consumed by the Donate pill (BRAND-FAMILY.md §9). */
  --site-hue: var(--home);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h1 {
  margin-bottom: 1rem;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 1.05;
  font-weight: 500;
}

h2 {
  margin-bottom: 0.85rem;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
}

h3 {
  margin-bottom: 0.45rem;
  font-size: 1.3rem;
  line-height: 1.26;
  font-weight: 600;
}

/* The emphasis word: deep-green with a soft green underline glow (matches the
   prototype's <span class="lit"> / inner-page <span class="gold">). Upright,
   not italic — Poppins/Inter is a clean geometric system, not a serif one. */
.gold,
.lit {
  color: var(--red-deep);
  font-style: normal;
  font-weight: 600;
  position: relative;
}

.lit::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 0.42em;
  z-index: -1;
  background: linear-gradient(180deg, transparent 40%, var(--gold-soft) 40%);
  opacity: 0.55;
}

/* The fixed, gently-breathing skylight — the ONLY background atmosphere.
   Applied via body::before so it works without a .skylight div in the HTML. */
body::before,
.skylight {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 88vh;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(62% 60% at 50% -8%, var(--glow-warm), transparent 68%),
    radial-gradient(42% 46% at 68% -4%, var(--glow-gold), transparent 60%);
  animation: breathe 12s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .skylight { animation: none; }
  .rise { animation: none !important; }
  html { scroll-behavior: auto; }
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 60;
  background: var(--red-deep);
  color: #fff;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
}

.skip-link:focus {
  top: 1rem;
}

/* ---- Header / nav ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.2);
}

.nav-wrap {
  width: min(var(--wrap), calc(100% - 2.5rem));
  margin: 0 auto;
  min-height: 74px;
  padding: 0.7rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  min-width: 0;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
}

/* The CBA mark — inline SVG (BRAND-FAMILY.md §4), rendered at 36px in the
   header. The svg itself carries the green fill + white cross-over-water
   glyph; this wrapper sizes it and adds the lift shadow. */
.brand-mark {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  box-shadow: 0 4px 14px -4px rgba(74, 0, 0, 0.5);
  flex: none;
}

.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-text {
  display: grid;
  line-height: 1.12;
}

.brand-text > span:first-child {
  font-size: 1.16rem;
  letter-spacing: -0.01em;
}

.brand-text small {
  font-family: var(--sans);
  color: var(--ink-faint);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.nav-toggle {
  display: none;
  border: 1px solid var(--line-strong);
  background: var(--paper-2);
  color: var(--ink);
  border-radius: 9px;
  padding: 0.55rem 0.75rem;
  font: 600 0.92rem var(--sans);
}

/* Three-zone bar: brand pinned left, links centered in the leftover space
   (auto margins), flags + Give pinned right. */
.main-nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
}

.main-nav a {
  position: relative;
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  right: 100%;
  bottom: 0.1rem;
  height: 1.5px;
  background: var(--gold);
  transition: right 0.3s ease;
}

.main-nav a:hover,
.main-nav a:focus,
.main-nav a[aria-current="page"] {
  color: var(--ink);
}

.main-nav a:hover::after,
.main-nav a:focus::after,
.main-nav a[aria-current="page"]::after {
  right: 0.4rem;
}

/* Header right cluster — flag switcher + the single Donate pill (BRAND §12). */
.header-right {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  flex: none;
}

/* Language switcher = small FLAGS (BRAND-FAMILY.md §11). */
.langs {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.langs a,
.langs .on {
  display: inline-flex;
  width: 25px;
  height: 18px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  opacity: 0.5;
  transition: opacity 0.15s, transform 0.15s;
}

.langs a:hover,
.langs a:focus {
  opacity: 1;
  transform: translateY(-1px);
}

.langs .on {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--site-hue, #8b0000);
}

.langs .flag {
  width: 100%;
  height: 100%;
  display: block;
}

/* The flag switcher is duplicated inside the dropdown (.nav-langs) for mobile;
   on desktop the bar copy is used, so the dropdown copy stays hidden. */
.nav-langs {
  display: none;
}

/* ---- Buttons — pill (solid-green primary / hairline ghost) ---- */
.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.86rem 1.6rem;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.15;
  cursor: pointer;
  transition: transform 0.16s, box-shadow 0.16s, background 0.2s, color 0.2s, border-color 0.2s;
}

.button:hover,
.button:focus {
  transform: translateY(-2px);
}

/* Primary = solid green gradient pill (the confident door hue).
   WCAG AA fix: the lighter --green-bright endpoint measured only 3.12:1 for
   white button text (fails the 4.5:1 small-text requirement — button labels
   are ~16px, below the "large text" carve-out). Both endpoints below are
   verified >= 5.3:1 against white. */
.button.primary,
.button.warm,
.button.dark {
  background: linear-gradient(160deg, var(--red), var(--red-deep));
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(122, 0, 0, 0.6);
}

.button.primary:hover,
.button.primary:focus,
.button.warm:hover,
.button.warm:focus,
.button.dark:hover,
.button.dark:focus {
  box-shadow: 0 20px 38px -14px rgba(122, 0, 0, 0.7);
  color: #fff;
}

/* Ghost / outline / light = hairline pill on the light canvas. */
.button.ghost,
.button.outline,
.button.light {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--line-strong);
}

.button.ghost:hover,
.button.ghost:focus,
.button.outline:hover,
.button.outline:focus,
.button.light:hover,
.button.light:focus {
  border-color: var(--red);
  color: var(--red-deep);
  background: var(--paper-2);
}

/* ---- Shared layout ---- */

/* WhatsApp button — green brand, used on baptism / decision pages */
.button.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0E7A40;
  color: #fff;
  border-color: #0E7A40;
}
.button.whatsapp-btn:hover,
.button.whatsapp-btn:focus {
  background: #0B5F33;
  border-color: #0B5F33;
  color: #fff;
}
.section-inner,
.footer-inner {
  position: relative;
  z-index: 1;
  width: min(var(--wrap), calc(100% - 2.5rem));
  margin: 0 auto;
}

main {
  position: relative;
  z-index: 1;
}

main section {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.eyebrow,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1rem;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.eyebrow::before,
.section-kicker::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.section-head {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 2.6rem;
  max-width: 46ch;
}

.section-head .section-kicker {
  margin-bottom: 0.4rem;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  justify-items: center;
}

/* Center the eyebrow hairline on both sides when the head is centered. */
.section-head.center .section-kicker::after {
  content: "";
  width: 26px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.section-head p,
.muted {
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* ---- Page hero (inner pages) — now LIGHT and airy under the skylight ---- */
.hero,
.page-hero {
  position: relative;
  z-index: 1;
  background: transparent;
  color: var(--ink);
  padding: clamp(3.25rem, 8vh, 6rem) 0 clamp(2.75rem, 5vh, 4rem);
}

.hero .eyebrow,
.page-hero .eyebrow {
  color: var(--gold);
  justify-content: center;
}

.hero .verse-whisper {
  margin: 2.5rem auto 0;
  text-align: left;
  max-width: 34em;
}

.hero h1,
.page-hero h1 {
  color: var(--ink);
}

.hero-lede,
.page-hero p {
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 1.7vw, 1.28rem);
  line-height: 1.6;
}

.page-hero .actions {
  margin-top: 1.8rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.8rem;
}

/* ---- Emergency strip — calm light strip (no longer a dark slab) ---- */
.urgent-strip {
  background: var(--mist);
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
  color: var(--ink);
}

.urgent-strip .section-inner {
  padding: 1.1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}

.urgent-strip p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.urgent-strip strong {
  color: var(--red-deep);
}

.urgent-strip a:not(.button) {
  color: var(--red-deep);
  font-weight: 600;
}

/* ---- Grids + cards (hairline cells with a hover lift) ---- */
.grid {
  display: grid;
  gap: 1.1rem;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.6rem;
  box-shadow: none;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: var(--line-strong);
}

.card p:last-child,
.split-copy p:last-child,
.resource-note p:last-child {
  margin-bottom: 0;
}

.card.is-urgent {
  border-left: 4px solid var(--word);
}

.card h3 {
  font-size: 1.28rem;
}

.card p {
  color: var(--ink-soft);
}

/* Gold serif numeral (matches the prototype's italic-gold index). */
.number {
  display: inline-flex;
  align-items: baseline;
  margin-bottom: 0.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--gold);
}

.status {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.7rem;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  background: rgba(165, 42, 42, 0.12);
  color: var(--red-deep);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* "Planned" is a neutral state (not yet live) — kept off the brand green so it
   reads distinctly from the "active" pill above, without adding a second hue. */
.status.planned {
  background: var(--mist);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
}

/* ---- Split sections ---- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.media-frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.media-frame img {
  width: 100%;
  object-fit: cover;
}

.check-list,
.plain-list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: grid;
  gap: 0.7rem;
}

.check-list li,
.plain-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-soft);
}

.check-list li::before,
.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--gold-2);
}

/* ---- Bands (soft tint) ---- */
.band {
  background: var(--mist);
}

.sky-band {
  background: linear-gradient(180deg, var(--mist), var(--paper));
  border-top: 1px solid var(--gold-line);
}

/* ---- Leadership ---- */
.leader-card strong {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
}

.leader-card span {
  display: block;
  color: var(--ink-soft);
}

/* Neutral avatar placeholder until real leadership photos arrive (BRAND-FAMILY.md §11). */
.leader-card .leader-avatar {
  display: block;
  width: 88px;
  height: 88px;
  margin-bottom: 0.5rem;
}

.leader-card .leader-photo-soon {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--mist);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  margin-bottom: 0.6rem;
}

/* ---- Schedule ---- */
.schedule {
  display: grid;
  gap: 0.5rem;
}

.schedule-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.schedule-row:last-child {
  border-bottom: 0;
}

.schedule-row strong {
  color: var(--red-deep);
}

/* ---- Callout card (formerly the dark "resource-note") — now a warm tint card -- */
.resource-note {
  background: var(--mist);
  color: var(--ink);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  padding: 1.8rem;
}

.resource-note h3 {
  color: var(--red-deep);
}

.resource-note p,
.resource-note .muted {
  color: var(--ink-soft);
}

/* ---- Directory ---- */
.directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.directory-card {
  display: grid;
  gap: 0.55rem;
}

.directory-card a {
  color: var(--red);
  font-weight: 600;
}

/* ---- Article (resources) ---- */
.article {
  display: grid;
  gap: 2rem;
  max-width: 760px;
}

.prose > h2 {
  margin: 2.4rem 0 0.6rem;
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
}

.prose > h2:first-child {
  margin-top: 0;
}

.prose > h3 {
  margin: 1.8rem 0 0.4rem;
}

.prose p {
  margin: 0 0 1rem;
  line-height: 1.78;
}

.prose ul,
.prose ol {
  margin: 0 0 1rem;
  padding-left: 1.3rem;
  display: grid;
  gap: 0.5rem;
  color: var(--ink-soft);
}

.prose li {
  line-height: 1.7;
}

.prose li::marker {
  color: var(--gold);
}

.prose a {
  color: var(--red);
  font-weight: 600;
  border-bottom: 1px solid var(--gold-line);
}

.prose a:hover {
  border-bottom-color: currentColor;
}

.article-related {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.article-related a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--red-deep);
}

.article-related a:hover,
.article-related a:focus {
  background: var(--mist);
  border-color: var(--line-strong);
}

/* ---- Forms (help / serve / start / care intake) ---- */
.form {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow-sm);
  max-width: 780px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field.wide,
.choices,
.form-grid > .seg-field {
  grid-column: 1 / -1;
}

.field > span {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
}

.field i {
  font-style: normal;
  font-weight: 500;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

.field input,
.field textarea {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.72rem 0.85rem;
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: var(--red);
}

.field textarea {
  resize: vertical;
}

.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  background: var(--paper);
}

.choice:has(input:checked) {
  border-color: var(--red);
  background: rgba(165, 42, 42, 0.08);
  box-shadow: inset 0 0 0 1px var(--red);
}

.choice input {
  margin-top: 0.2rem;
  accent-color: var(--red);
}

.choice span {
  font-weight: 600;
}

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.seg label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
}

.seg label:has(input:checked) {
  border-color: var(--red);
  background: rgba(165, 42, 42, 0.08);
  color: var(--red-deep);
}

.seg input {
  accent-color: var(--red);
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.urgent-note {
  margin: 0 0 0.4rem;
  grid-column: 1 / -1;
  border-radius: 10px;
  padding: 0.85rem 0.95rem;
  background: #fbeede;
  color: #8a4a17;
  border: 1px solid var(--gold-line);
  font-weight: 600;
}

.urgent-note strong {
  color: #8a4a17;
}

.form .button {
  grid-column: 1 / -1;
  justify-self: start;
}

.form-status {
  margin: 0.6rem 0 0;
  font-weight: 600;
  color: var(--ink-soft);
}

.form-status.ok {
  color: var(--red);
}

.form-status.err {
  color: var(--word);
}

.form-privacy {
  margin: 0.8rem 0 0;
  color: var(--ink-faint);
  font-size: 0.9rem;
}

/* ---- "Explore the family" cross-link bar (slim strip above the footer) ---- */
.cba-family-bar {
  position: relative;
  z-index: 1;
  width: min(var(--wrap), calc(100% - 2.5rem));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.5rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  font-weight: 500;
}

.cba-family-bar .cba-family-eyebrow {
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--ink-faint);
  margin-right: 0.4rem;
}

.cba-family-bar a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.cba-family-bar a:hover,
.cba-family-bar a:focus {
  color: var(--ink);
}

.cba-family-bar .dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--c, var(--home));
}

/* ---- Footer — light + airy (Glory) ---- */
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.footer-inner {
  padding: clamp(3rem, 5vw, 4.2rem) 0 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(120px, 0.6fr));
  gap: 1.75rem 2rem;
}

.site-footer a {
  color: var(--ink-soft);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--red-deep);
}

.site-footer h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
}

.site-footer h3 {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}

.site-footer p {
  color: var(--ink-soft);
  max-width: 32ch;
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.legal-line {
  border-top: 1px solid var(--line);
  padding: 1rem 0;
  color: var(--ink-faint);
  font-size: 0.84rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
}

.legal-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}

.legal-links a {
  color: var(--ink-faint);
  text-decoration: none;
}

.legal-links a:hover,
.legal-links a:focus {
  color: var(--red-deep);
}

/* Colophon — "A ministry of CBA Orlando" (light footer). */
.cba-colophon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.cba-colophon .cba-mark {
  flex: none;
  border-radius: 7px;
}

.cba-colophon strong {
  color: var(--ink);
  font-weight: 600;
}

.site-footer a.cba-colophon:hover strong,
.site-footer a.cba-colophon:focus strong {
  text-decoration: underline;
}

/* Shared family legal line — sits just above the operational legal line. */
.family-legal {
  border-top: 1px solid var(--line);
  padding: 1rem 0 0.25rem;
  color: var(--ink-faint);
  font-size: 0.84rem;
  line-height: 1.7;
}

.family-legal + .legal-line {
  border-top: 0;
  padding-top: 0.5rem;
}

/* ---- Giving panel (Tithe.ly embed + security cues) ---- */
.give-panel {
  max-width: 640px;
  margin: 0 auto;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.85rem;
}

.give-secure {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: var(--red-deep);
}

.give-lock {
  flex: none;
  color: var(--red-deep);
}

.give-embed {
  margin-top: 1.25rem;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}

.give-embed-help {
  margin: 0 0 1rem;
}

.give-embed-btn.cba-give {
  font-size: 1.05rem !important;
  padding: 0.85rem 2rem !important;
}

.give-embed-fallback {
  margin-top: 1.5rem;
  background: var(--mist);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.give-embed-fallback h3 {
  margin-top: 0;
}

/* ---- Transparency / legal facts ---- */
.legal-facts {
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.legal-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.5fr) 1fr;
  gap: 0.5rem 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.legal-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.legal-row dt {
  font-weight: 600;
  color: var(--red-deep);
}

.legal-row dd {
  margin: 0;
  color: var(--ink);
}

.subhead {
  text-align: center;
  margin: 2rem 0 1rem;
  color: var(--red-deep);
}

/* ---- Header Donate button — the ONLY header CTA (BRAND-FAMILY.md §9) ---- */
.header-give {
  flex: none;
}

.cba-give,
button.tithely-give-button.cba-give {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* WCAG AA fix: --green/--green-deep (not --green-bright) so white button
     text clears 4.5:1 at this ~15px size (verified 5.3:1 / 9.6:1). */
  background: linear-gradient(160deg, var(--red), var(--red-deep)) !important;
  color: #fff !important;
  font: 600 0.95rem/1 var(--sans) !important;
  padding: 0.6rem 1.5rem !important;
  border-radius: 999px !important;
  border: none !important;
  cursor: pointer;
  text-shadow: none !important;
  box-shadow: 0 8px 20px -8px rgba(122, 0, 0, 0.6);
  min-height: 0;
  transition: transform 0.15s, box-shadow 0.15s;
}

.cba-give:hover,
.cba-give:focus {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -10px rgba(122, 0, 0, 0.7);
}

/* ---- The Spectrum — Ministries hub door-coded spoke cards (BRAND-FAMILY.md §2) */
.spoke-spectrum {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.spoke-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-top: 4px solid var(--door, var(--home));
  border-radius: var(--radius);
  padding: 1.7rem 1.6rem 1.6rem;
  box-shadow: none;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

.spoke-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.spoke-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--door, var(--home)) 14%, white);
  color: var(--door, var(--home));
}

.spoke-icon svg {
  width: 26px;
  height: 26px;
}

.spoke-card h3 {
  margin: 0.2rem 0 0;
}

.spoke-card p {
  margin: 0;
  color: var(--ink-soft);
}

.spoke-card .button.spoke-cta {
  margin-top: auto;
  /* WCAG AA fix: --door-btn is a deepened, per-door variant (set inline by
     ministries.mjs) verified >= 4.5:1 for white text; the raw --door hue
     (used for the border/icon above) measured as low as 2.0:1. Falls back to
     --door itself if --door-btn is ever absent. */
  background: var(--door-btn, var(--door, var(--home)));
  color: #fff;
  border-color: transparent;
  align-self: flex-start;
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--door, var(--home)) 80%, black);
}

.spoke-card .button.spoke-cta:hover,
.spoke-card .button.spoke-cta:focus {
  filter: brightness(0.96);
  color: #fff;
}

.spoke-card .muted {
  margin: 0;
  font-size: 0.85rem;
}

/* ======================================================================
   HOMEPAGE — Glory in the Light (matches cba-glory.html faithfully)
   ====================================================================== */

/* ---- Hero ---- */
.home-hero {
  position: relative;
  z-index: 1;
  padding: clamp(3.5rem, 9vh, 7rem) 0 clamp(3rem, 6vh, 5rem);
  /* Clip the decorative .hero-sun (absolute, right:-3%); without this it escapes
     body's overflow-x:hidden and shifts/clips the whole page on mobile. */
  overflow: hidden;
}

/* Hero background image — full-bleed, soft overlay, behind the text. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  filter: brightness(1.15) saturate(0.9);
}

/* On mobile, let the image breathe a bit more. */
@media (max-width: 640px) {
  .hero-bg-img {
    opacity: 0.18;
  }
}

.home-hero .hero-inner {
  width: min(var(--wrap), calc(100% - 2.5rem));
  margin: 0 auto;
  max-width: 920px;
}

.home-hero .eyebrow {
  margin-bottom: 0;
}

.home-hero h1 {
  font-size: clamp(3rem, 7.2vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 1.6rem 0 0;
  max-width: 16ch;
}

.home-hero .hero-lede {
  font-size: clamp(1.12rem, 2vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 33em;
  margin: 1.6rem 0 0;
}

.home-hero .actions {
  margin-top: 2.2rem;
}

.verse-whisper {
  margin: 2.5rem 0 0;
  padding-left: 1.3rem;
  border-left: 2px solid var(--gold-line);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 34em;
}

.verse-whisper cite {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.5rem;
  font-weight: 600;
}

.meta-line {
  margin-top: 2.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.4rem;
  align-items: center;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.meta-line .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-2);
}

/* Faint rotating sun behind the hero. */
.hero-sun {
  position: absolute;
  top: 6%;
  right: -3%;
  width: min(36vw, 400px);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
  animation: spin 90s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-sun { animation: none; }
}

/* ---- Three open doors ---- */
.doors .section-head {
  margin-bottom: 2.6rem;
}

.doors .grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.door {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2.1rem 1.9rem 1.8rem;
  overflow: hidden;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

.door::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red-bright), var(--gold-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s;
}

.door:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: var(--line-strong);
}

.door:hover::before {
  transform: scaleX(1);
}

.door .idx {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold);
}

.door h3 {
  font-size: 1.45rem;
  margin: 0.7rem 0 0.55rem;
}

.door p {
  margin: 0 0 1.3rem;
  color: var(--ink-soft);
  font-size: 0.99rem;
}

.door .go {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--red-deep);
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.door .go .arr,
.button .arr,
.door:hover .go .arr {
  transition: transform 0.2s;
}

.door:hover .go .arr,
.button:hover .arr {
  transform: translateX(4px);
}

/* ---- Offerings grid (hairline cells) ---- */
.offer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--gold-line);
}

.offer .cell {
  padding: 1.9rem 1.6rem;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  transition: background 0.25s;
}

.offer .cell:nth-child(3n) {
  border-right: none;
}

.offer .cell:hover {
  background: var(--mist);
}

.offer .cell .ic {
  width: 30px;
  height: 30px;
  color: var(--red);
  margin-bottom: 0.9rem;
}

.offer .cell h3 {
  font-size: 1.18rem;
  margin: 0 0 0.35rem;
}

.offer .cell p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ---- Community mosaic — 4-image responsive strip ---- */
.mosaic {
  background: var(--mist);
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}

.mosaic-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.mosaic-item {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s, box-shadow 0.25s;
}

.mosaic-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  display: block;
}

@media (max-width: 980px) {
  .mosaic-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .mosaic-strip {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
}

/* ---- Visit image (left of the visit text on desktop) ---- */
.visit-image {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.visit-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  display: block;
}

/* ---- The glory Scripture band (faint gold conic rays) ---- */
.glory {
  position: relative;
  margin: clamp(3rem, 6vw, 5rem) 0;
  padding: clamp(4.5rem, 11vw, 8rem) 0;
  text-align: center;
  overflow: hidden;
}

.glory::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 120% at 50% 0%, rgba(139, 0, 0, 0.14), transparent 70%),
    linear-gradient(180deg, var(--mist), var(--paper));
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}

.glory .rays {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 140%;
  z-index: -1;
  opacity: 0.4;
  pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%,
    transparent 0deg, rgba(139, 0, 0, 0.10) 12deg, transparent 24deg,
    rgba(139, 0, 0, 0.10) 36deg, transparent 48deg, rgba(139, 0, 0, 0.10) 60deg, transparent 72deg);
}

.glory blockquote {
  margin: 0 auto;
  max-width: 18ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.12;
  color: var(--red-deep);
  letter-spacing: -0.02em;
}

.glory cite {
  display: block;
  margin-top: 1.6rem;
  font-style: normal;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.glory .sub {
  margin-top: 1.1rem;
  color: var(--ink-faint);
  font-size: 0.92rem;
}

/* ---- Visit + "This week" gather card ---- */
.visit-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.gather {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 2.2rem;
  box-shadow: var(--shadow);
}

.gather .tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-deep);
  background: rgba(165, 42, 42, 0.12);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}

.gather .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.gather .row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.gather .row .k {
  font-family: var(--serif);
  font-size: 1.1rem;
}

.gather .row .v {
  color: var(--ink-soft);
  font-size: 0.92rem;
  text-align: right;
}

/* ---- Orchestrated page-load motion (one staggered fade-up) ---- */
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.rise {
  animation: rise 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* ---- Responsive ---- */
/* Hamburger takes over below 1200px: the 7-item primary nav only fits one line
   alongside the brand lockup + flag switcher + Give pill on wider desktops. */
@media (max-width: 1200px) {
  /* Brand pushes Give + hamburger to the right edge of the bar. */
  .brand {
    margin-right: auto;
  }

  .nav-toggle {
    display: inline-flex;
    order: 3;
  }

  .header-right {
    order: 2;
    margin-left: 0;
    gap: 0.6rem;
  }

  /* Bar keeps only the Donate pill on mobile; the flag switcher moves into the
     dropdown so brand + Give + hamburger always fit a phone-width header. */
  .header-right > .langs {
    display: none;
  }

  /* Tighten the bar so brand + Give + hamburger clear narrow (~360px) phones. */
  .nav-wrap {
    gap: 0.6rem;
    width: min(var(--wrap), calc(100% - 1.5rem));
  }

  .main-nav {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    top: calc(100% + 0.5rem);
    margin: 0;
    display: none;
    align-items: stretch;
    flex-direction: column;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.5rem;
    box-shadow: var(--shadow);
    z-index: 50;
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav a {
    color: var(--ink);
    padding: 0.6rem 0.65rem;
  }

  .main-nav a::after {
    display: none;
  }

  /* Flag switcher at the top of the open dropdown. */
  .main-nav .nav-langs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem 0.6rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--line);
  }

  .main-nav .nav-langs a,
  .main-nav .nav-langs .on {
    width: 30px;
    height: 21px;
    padding: 0;
  }
}

@media (max-width: 980px) {
  .split,
  .grid.three,
  .grid.four,
  .footer-inner,
  .directory-grid,
  .doors .grid,
  .offer,
  .visit-grid {
    grid-template-columns: 1fr;
  }

  .doors .grid,
  .offer {
    grid-template-columns: 1fr 1fr;
  }

  .offer .cell:nth-child(3n) {
    border-right: 1px solid var(--line);
  }

  .offer .cell:nth-child(2n) {
    border-right: none;
  }

  .urgent-strip .section-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-hero .hero-sun {
    opacity: 0.3;
  }
}

@media (max-width: 640px) {
  /* The brand subtitle is wider than the name and wraps the header to two lines
     on phones; drop it so the lockup + Give + hamburger stay on one tidy row. */
  .brand-text small {
    display: none;
  }

  main section {
    padding: 3.4rem 0;
  }

  .grid.two,
  .form-grid,
  .choices,
  .spoke-spectrum,
  .doors .grid,
  .offer {
    grid-template-columns: 1fr;
  }

  .offer .cell {
    border-right: none;
  }

  .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .button {
    width: 100%;
  }

  .schedule-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .gather .row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }

  .gather .row .v {
    text-align: left;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .footer-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .cba-family-bar {
    gap: 0.35rem 1.1rem;
  }
}

:focus-visible{outline:2px solid var(--green,#7a0000);outline-offset:2px;border-radius:4px}

/* ========================================================================
   Pride Destroy — Content-specific styles
   Maps Pride HTML class names to the CBA Divine Light design system
   ======================================================================== */

/* ---- Layout containers ---- */
.wrap {
  width: min(var(--wrap), calc(100% - 2.5rem));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.wrap.narrow {
  max-width: var(--narrow, 760px);
}

.wrap.center {
  text-align: center;
}

/* ---- Sections ---- */
.section {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  position: relative;
  z-index: 1;
}

.section-alt {
  background: var(--mist);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-cta {
  background: linear-gradient(180deg, var(--mist), var(--paper));
  border-top: 1px solid var(--gold-line);
  text-align: center;
}

/* ---- Hero (homepage) ---- */
.hero {
  padding: clamp(4rem, 10vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero-headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.hero-sub {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: var(--red-deep);
  margin: 0 0 1.5rem;
}

.hero-body {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 36em;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-top: 2rem;
}

/* ---- Buttons (Pride naming: .btn) mapped to CBA pill buttons ---- */
.btn {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.86rem 1.6rem;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.15;
  cursor: pointer;
  transition: transform 0.16s, box-shadow 0.16s, background 0.2s, color 0.2s, border-color 0.2s;
}

.btn:hover,
.btn:focus {
  transform: translateY(-2px);
}

.btn.primary {
  background: linear-gradient(160deg, var(--red), var(--red-deep));
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(122, 0, 0, 0.5);
}

.btn.primary:hover,
.btn.primary:focus {
  box-shadow: 0 20px 38px -14px rgba(122, 0, 0, 0.6);
  color: #fff;
}

.btn.secondary {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn.secondary:hover,
.btn.secondary:focus {
  border-color: var(--red);
  color: var(--red-deep);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

.btn-outline:hover,
.btn-outline:focus {
  border-color: var(--red);
  color: var(--red-deep);
}

.btn-lg {
  min-height: 54px;
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

.btn-sm {
  min-height: 38px;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
}

/* ---- Lead text ---- */
.lead {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 36em;
}

.wrap.center .lead {
  margin: 0 auto;
}

/* ---- Muted text ---- */
.muted {
  color: var(--ink-soft);
  font-size: 1.02rem;
}

/* ---- Center utility ---- */
.center {
  text-align: center;
}

/* ---- 70 Fruits category cards ---- */
.fruit-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.1rem;
  margin-top: 2rem;
}

.fruit-cat-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.5rem;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

.fruit-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: var(--line-strong);
}

.fruit-cat-card .cat-range {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--red);
  margin-bottom: 0.5rem;
}

.fruit-cat-card h3 {
  font-size: 1.15rem;
  margin: 0;
}

/* ---- Fruit grid (full fruits page) ---- */
.fruit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.1rem;
  margin-top: 2rem;
}

.fruit-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

.fruit-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: var(--line-strong);
}

.fruit-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--red);
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.fruit-card h3 {
  font-size: 1.1rem;
  margin: 0 0 0.4rem;
}

.fruit-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
}

/* ---- Category header ---- */
.cat-header {
  margin-bottom: 2rem;
}

.cat-range-badge {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--red);
  margin-bottom: 0.4rem;
}

/* ---- The Root of Pride section ---- */
.root-block {
  background: var(--mist);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  padding: 2rem;
  margin-top: 1.5rem;
}

.root-text {
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 1rem;
}

.root-text strong {
  color: var(--red-deep);
}

.root-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
}

.root-list li {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 1rem;
  text-align: center;
  font-weight: 600;
  color: var(--red-deep);
  font-size: 0.95rem;
}

/* ---- Verse blocks ---- */
.verse-block {
  margin: 2rem 0 0;
  padding: 1.5rem 1.8rem;
  background: var(--mist);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.verse-block p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--red-deep);
  margin: 0 0 0.5rem;
  line-height: 1.5;
}

.verse-block cite {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}

.verse-large p {
  font-size: clamp(1.4rem, 3vw, 2rem);
}

/* ---- Split section (image + text side by side, CBA-style) ---- */
.split-section {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split-image {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.split-image img,
.rounded-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  display: block;
}

/* ---- Glory verse band (CBA-style Scripture showcase) ---- */
.glory-band {
  position: relative;
  margin: clamp(3rem, 6vw, 5rem) 0;
  padding: clamp(4.5rem, 11vw, 8rem) 0;
  text-align: center;
  overflow: hidden;
}

.glory-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 120% at 50% 0%, rgba(139, 0, 0, 0.10), transparent 70%),
    linear-gradient(180deg, var(--mist), var(--paper));
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}

.glory-band blockquote {
  margin: 0 auto;
  max-width: 18ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.12;
  color: var(--red-deep);
  letter-spacing: -0.02em;
}

.glory-band cite {
  display: block;
  margin-top: 1.6rem;
  font-style: normal;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}

.glory-band .sub {
  margin-top: 1.1rem;
  color: var(--ink-faint);
  font-size: 0.92rem;
}

/* ---- Arrow icon in buttons ---- */
.arr {
  transition: transform 0.2s;
}

.btn:hover .arr,
.btn:focus .arr {
  transform: translateX(4px);
}

/* ---- Mosaic section already has .mosaic from CBA CSS ---- */
/* Override: Pride uses .section.mosaic for padding */
.section.mosaic {
  background: var(--mist);
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}

/* ---- Responsive split sections ---- */
@media (max-width: 980px) {
  .split-section {
    grid-template-columns: 1fr;
  }

  .split-image {
    order: -1;
  }
}

/* ---- Breadcrumbs ---- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-faint);
}

.breadcrumb a {
  color: var(--ink-soft);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--red-deep);
}

.breadcrumb-sep {
  color: var(--ink-faint);
}

.breadcrumb-current {
  color: var(--ink);
  font-weight: 600;
}

/* ---- Article body ---- */
.article-body {
  max-width: 42em;
  margin: 0 auto;
}

.article-body h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.8rem;
}

.article-body h3 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.article-body p {
  margin: 0 0 1.2rem;
  line-height: 1.78;
  color: var(--ink);
}

.article-body ul,
.article-body ol {
  margin: 0 0 1.2rem;
  padding-left: 1.4rem;
  display: grid;
  gap: 0.5rem;
  color: var(--ink-soft);
}

.article-body li {
  line-height: 1.7;
}

.article-body li::marker {
  color: var(--red);
}

.article-body a {
  color: var(--red);
  font-weight: 600;
  border-bottom: 1px solid var(--gold-line);
}

.article-body a:hover {
  border-bottom-color: currentColor;
}

.article-body blockquote {
  margin: 1.8rem 0;
  padding: 1.2rem 1.6rem;
  background: var(--mist);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--red-deep);
}

.article-body blockquote p {
  margin: 0;
  color: var(--red-deep);
}

.article-body blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}

/* ---- Pride Test form ---- */
.test-form {
  max-width: 680px;
  margin: 2rem auto 0;
}

.test-question {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  margin-bottom: 1rem;
  transition: border-color 0.2s;
}

.test-question:hover {
  border-color: var(--line-strong);
}

.test-q-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--red);
  margin-bottom: 0.3rem;
}

.test-q-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.8rem;
}

.test-options {
  display: grid;
  gap: 0.5rem;
}

.test-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  font-size: 0.92rem;
  transition: border-color 0.2s, background 0.2s;
}

.test-opt:hover {
  border-color: var(--red);
}

.test-opt input {
  accent-color: var(--red);
}

.test-result {
  background: var(--mist);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  margin-top: 2rem;
}

/* ---- Steps list (humility page) ---- */
.steps-list {
  display: grid;
  gap: 1.1rem;
  margin-top: 2rem;
}

.step-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.5rem;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

.step-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: var(--line-strong);
}

.step-card h3 {
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
}

.step-card p {
  color: var(--ink-soft);
  margin: 0;
  font-size: 0.97rem;
}

/* Step card with image (humility page) */
.step-card-with-image {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 1.5fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
}

.step-card-with-image .step-image {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.step-card-with-image .step-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  display: block;
}

.step-card-with-image .step-content h2 {
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
}

.step-card-with-image .step-content p {
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .step-card-with-image {
    grid-template-columns: 1fr;
  }

  .step-card-with-image .step-image {
    order: -1;
  }
}

/* ---- Reflection list ---- */
.reflection-list {
  display: grid;
  gap: 0.8rem;
  margin-top: 2rem;
}

/* ---- Share page ---- */
.share-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
  margin-top: 2rem;
}

.share-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

.share-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: var(--line-strong);
}

.share-card-inner {
  display: grid;
  gap: 0.5rem;
}

.share-card-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--red);
}

.share-card-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.5;
}

.share-card-ref {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}

.share-card-actions,
.quote-card-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.btn-share {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.btn-share:hover {
  border-color: var(--red);
  color: var(--red-deep);
}

.btn-share-fb { color: #0B5EC7; }
.btn-share-tw { color: #000; }
.btn-share-wa { color: #0E7A40; }

.share-big-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 2rem;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.16s, border-color 0.2s, color 0.2s;
}

.share-btn:hover {
  transform: translateY(-2px);
  border-color: var(--red);
  color: var(--red-deep);
}

.share-fb { border-color: #0B5EC7; color: #0B5EC7; }
.share-tw { border-color: #000; color: #000; }
.share-wa { border-color: #0E7A40; color: #0E7A40; }

/* ---- Share copy blocks ---- */
.share-copy-blocks {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.share-copy-block {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.share-copy-block h3 {
  font-size: 1.1rem;
  margin: 0 0 0.8rem;
}

.share-pre {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem;
  font-family: 'Courier New', monospace;
  font-size: 0.88rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
  margin: 0 0 0.6rem;
  line-height: 1.5;
}

.share-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.share-copy:hover {
  border-color: var(--red);
  color: var(--red-deep);
}

/* ---- Embed code block ---- */
.embed-code-block {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.embed-code-block pre {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
  margin: 0 0 0.6rem;
  line-height: 1.5;
}

/* ---- Email signup ---- */
.email-form {
  background: var(--paper-2);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  padding: 1.8rem;
  max-width: 480px;
  margin: 2rem auto 0;
}

.email-input {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}

.email-input input {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.72rem 0.85rem;
}

.email-input input:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: var(--red);
}

.email-privacy {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: 0.6rem;
}

.email-success {
  color: var(--red-deep);
  font-weight: 600;
  padding: 0.8rem;
  text-align: center;
}

/* ---- Quote cards ---- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
  margin-top: 2rem;
}

.quote-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

.quote-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: var(--line-strong);
}

.quote-card-info {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

/* ---- Hero share section ---- */
.hero-share {
  padding: clamp(3rem, 6vw, 5rem) 0;
  text-align: center;
}

/* ---- Sitemap ---- */
.sitemap-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.5rem;
  list-style: none;
  padding: 0;
}

.sitemap-item {
  border-bottom: 1px solid var(--line);
  padding: 0.6rem 0;
}

.sitemap-link {
  color: var(--red-deep);
  font-weight: 600;
  text-decoration: none;
}

.sitemap-link:hover {
  text-decoration: underline;
}

.sitemap-url {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: 0.2rem;
}

/* ---- Ministries grid ---- */
.ministries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.ministry-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.6rem 1.6rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
  position: relative;
  overflow: hidden;
}

.ministry-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--c, var(--home));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s;
}

.ministry-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: var(--line-strong);
}

.ministry-card:hover::before {
  transform: scaleX(1);
}

.ministry-card-current {
  border-color: var(--home);
  box-shadow: 0 0 0 1px var(--home), var(--shadow-sm);
}

.ministry-card-current::before {
  transform: scaleX(1);
}

.ministry-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.2);
}

.ministry-icon svg {
  width: 100%;
  height: 100%;
}

.ministry-card h3 {
  font-size: 1.3rem;
  margin: 0;
}

.ministry-tag {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

.ministry-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.ministry-go {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--red-deep);
  margin-top: 0.4rem;
}

.ministry-card:hover .ministry-go .arr,
.ministry-card:hover .ministry-go {
  color: var(--home);
}

@media (max-width: 640px) {
  .ministries-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .fruit-cats,
  .fruit-grid,
  .share-grid,
  .quote-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .fruit-cats,
  .fruit-grid,
  .share-grid,
  .quote-grid {
    grid-template-columns: 1fr;
  }

  .root-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-ctas,
  .share-big-btns {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-headline {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}

/* ---- Focus visible (Pride-specific override) ---- */
:focus-visible {
  outline: 2px solid var(--red, #7a0000);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Verse of the Day (shared family block) ---- */
.vod {
  max-width: 44em;
  margin: 2.5rem auto 0;
  padding: 1.8rem 2rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--gold-line);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(122, 0, 0, 0.07);
  backdrop-filter: blur(8px);
  text-align: left;
}
.vod-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.vod-kicker {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
}
.vod-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.vod-verse {
  margin: 0.85rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  line-height: 1.35;
  color: var(--ink);
}
.vod-teach {
  margin: 0.75rem 0 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.vod-player {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  background: rgba(245, 230, 230, 0.35);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vod-player-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--red-deep);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.vod-audio {
  width: 100%;
  height: 36px;
  border-radius: 6px;
  outline: none;
}
.vod-promo {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--gold-line);
}
.vod-promo-kicker {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.vod-promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}
.vod-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  background: var(--mist, #f8f9fc);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: all 0.2s ease;
}
.vod-card:hover {
  background: #ffffff;
  border-color: var(--red);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(122, 0, 0, 0.08);
}
.vod-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c, var(--red));
  flex-shrink: 0;
}
.vod-meta {
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
  line-height: 1.3;
}
.vod-meta strong {
  color: var(--ink);
  font-weight: 600;
}
.vod-meta span {
  color: var(--red-deep);
  font-size: 0.76rem;
}

/* CBA canonical chrome 2026-09-03 — family grid, copyright, fallback hero */
.cba-family-bar{position:relative;z-index:1;background:var(--mist,#f6f7fb);border-top:1px solid var(--line,#e7e9f2);padding:clamp(2.4rem,4vw,3.4rem) 0 clamp(2.2rem,4vw,3rem)}
.cba-family-bar .family-head{text-align:center;max-width:62ch;margin:0 auto clamp(1.5rem,3vw,2.1rem)}
.cba-family-bar .cba-family-eyebrow{display:block;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;color:var(--red,#7a0000);margin-bottom:.6rem}
.cba-family-bar .family-intro{margin:0;color:var(--ink-soft,#5a6478);font-size:.97rem;line-height:1.65}
.family-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;max-width:1000px;margin:0 auto;width:min(1000px,calc(100% - 2.5rem))}
.family-door{display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.85rem .7rem;min-height:56px;background:#fff;border:1px solid var(--line,#e7e9f2);border-radius:12px;text-align:center;font-size:.88rem;font-weight:600;color:var(--ink-soft,#5a6478);text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,color .18s ease}
.family-door .dot{width:.55rem;height:.55rem;flex:none;border-radius:50%;background:var(--c,var(--home,#8b0000))}
.family-door:hover,.family-door:focus-visible{color:var(--ink,#16213a);border-color:var(--c,var(--home,#8b0000));box-shadow:0 6px 18px -8px rgba(18,49,79,.28);transform:translateY(-2px)}
.family-door.is-here{background:#faf0f0;border-color:var(--c,var(--home,#8b0000));color:var(--ink,#16213a);cursor:default}
@media (max-width:900px){.family-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.family-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.family-door{font-size:.82rem;padding:.75rem .55rem;min-height:50px}}
.site-footer .footer-inner{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(120px,.7fr));gap:2rem 1.5rem}
@media (max-width:860px){.site-footer .footer-inner{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.site-footer .footer-inner{grid-template-columns:minmax(0,1fr)}}
.copyright-line{border-top:1px solid var(--line,#e7e9f2);padding:.9rem 0 1.4rem;color:var(--ink-faint,#657085);font-size:.82rem;text-align:center}
.copyright-line span{display:block;line-height:1.7}
.copyright-line .soli{letter-spacing:.22em;text-transform:uppercase;font-size:.74rem;font-weight:600;color:var(--red,#7a0000)}
.page-hero-fallback{padding-top:clamp(1.5rem,4vh,2.5rem);padding-bottom:0}
.page-hero-fallback-img{display:block;margin:0 auto;max-width:min(100%,340px);height:auto;border-radius:14px}

/* ============================================================
   Site redesign kit v1 (approved 2026-09-24) — scoped component
   styles for the mockup-matched pages (Home, Pride Test, 70 Fruits,
   Humility). Scoped under .rk-main so the 788 other generated pages
   are unaffected. Colours/fonts/radius reuse the tokens above. */
.rk-main{background:var(--paper)}
.rk-main .wrap{padding-left:72px;padding-right:72px;max-width:1440px;margin:0 auto}
.rk-main .section{padding-top:120px}
.rk-main .band{margin-top:120px;padding-top:110px;padding-bottom:110px;background:var(--mist)}
.rk-main .eyebrow2{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.rk-main .h2{font-family:var(--display);font-weight:500;font-size:clamp(34px,3.8vw,52px);line-height:1.05;color:var(--ink);margin:0}
.rk-main .h3{font-size:20px;font-weight:600;line-height:1.3;color:var(--ink);margin:0}
.rk-main .lead{font-size:16px;line-height:1.7;color:var(--ink-soft);margin:0}
.rk-main .body2{font-size:15px;line-height:1.7;color:#5A5F62;margin:0}
.rk-main .small2{font-size:14px;color:var(--ink-faint)}
.rk-main .head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:64px;flex-wrap:wrap;margin-bottom:0}
.rk-main .head-center{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.rk-main .btn2{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;font-size:14px;font-weight:600;border:1px solid transparent;cursor:pointer;font-family:var(--sans);white-space:nowrap;text-decoration:none}
.rk-main .btn2-primary{background:var(--ink);color:#fff}
.rk-main .btn2-primary:hover{background:#34393d;color:#fff}
.rk-main .btn2-outline{border-color:var(--line-strong);color:var(--ink);background:transparent}
.rk-main .btn2-outline:hover{border-color:var(--ink)}
.rk-main .btn2-accent{background:var(--red);color:#fff;font-weight:700}
.rk-main .btn2-accent:hover{background:var(--red-deep)}
.rk-main .link-arrow{font-size:14px;font-weight:700;color:var(--red)}
.rk-main .hero{position:relative;height:760px;overflow:hidden;background:var(--mist);padding:0;box-sizing:border-box}
.rk-main .hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.rk-main .hero-slide.is-active{opacity:1;visibility:visible}
.rk-main .hero-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 7s ease}
.rk-main .hero-slide.is-active img{transform:scale(1.04)}
.rk-main .hero-card{position:absolute;left:72px;bottom:136px;width:min(580px,calc(100% - 144px));padding:44px 48px;background:rgba(255,255,255,.94);border-radius:var(--radius);display:flex;flex-direction:column;gap:18px}
.rk-main .hero-card .actions{display:flex;gap:12px;flex-wrap:wrap;padding-top:6px}
.rk-main .hero-controls{position:absolute;right:72px;bottom:136px;display:flex;align-items:center;gap:16px;z-index:3}
.rk-main .hero-counter{font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--ink);background:rgba(255,255,255,.9);padding:8px 14px;border-radius:999px}
.rk-main .round-btn{width:48px;height:48px;border-radius:999px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.rk-main .round-btn svg{width:18px;height:18px}
.rk-main .hero-bars{position:absolute;left:72px;right:72px;bottom:104px;display:flex;gap:8px;z-index:3}
.rk-main .hero-bars button{flex:1;height:3px;border:0;padding:0;border-radius:2px;background:rgba(122,43,38,.28);cursor:pointer}
.rk-main .hero-bars button[aria-current="true"]{background:var(--red)}
.rk-main .page-hero{position:relative;height:480px;overflow:hidden;background:var(--mist);padding:0;box-sizing:border-box}
.rk-main .page-hero>img{width:100%;height:100%;object-fit:cover}
.rk-main .page-hero .hero-card{bottom:56px;width:min(620px,calc(100% - 144px))}
.rk-main .quick-lead{position:relative;z-index:4;margin:-64px 72px 0;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 18px 40px rgba(30,33,36,.06);padding:28px 32px;display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.rk-main .quick-lead .ql-title{width:250px;flex-shrink:0;display:flex;flex-direction:column;gap:6px}
.rk-main .quick-lead .ql-title strong{font-family:var(--display);font-size:26px;font-weight:600;color:var(--ink);line-height:1.1}
.rk-main .quick-lead label{flex:1;min-width:160px;display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.rk-main .field,.rk-main .quick-lead select,.rk-main .quick-lead input{height:48px;width:100%;border:1px solid #E0DAD0;border-radius:4px;padding:0 14px;font-size:15px;color:var(--ink);background:var(--paper);font-family:var(--sans)}
.rk-main textarea.field{height:auto;padding:12px 14px;resize:vertical;min-height:110px}
.rk-main .trust{padding-top:56px;display:flex;justify-content:center;flex-wrap:wrap;gap:14px 40px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);text-align:center}
.rk-main .trust span+span::before{content:"·";color:#D6CFC3;margin-right:40px}
.rk-main .mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:310px 310px;gap:16px}
.rk-main .mosaic>*:first-child{grid-column:span 2;grid-row:span 2}
.rk-main .mosaic img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.rk-main .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.rk-main .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.rk-main .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.rk-main .split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px;align-items:center}
.rk-main .split>img{width:100%;height:540px;object-fit:cover;border-radius:4px}
.rk-main .card2{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;color:inherit}
.rk-main .card2>img{width:100%;height:220px;object-fit:cover}
.rk-main .card2-body{padding:26px 28px 32px;display:flex;flex-direction:column;gap:10px}
.rk-main .card2-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rk-main .num{font-family:var(--display);font-size:28px;color:var(--home)}
.rk-main .tag2{font-size:13px;font-weight:600;color:var(--red)}
.rk-main .audience .card2>img{height:340px}
.rk-main .audience .card2-body{padding:48px 52px 52px;gap:16px}
.rk-main .photo-band{position:relative;margin-top:120px;height:580px;overflow:hidden}
.rk-main .photo-band>img{width:100%;height:100%;object-fit:cover}
.rk-main .photo-band .band-card{position:absolute;right:72px;top:50%;transform:translateY(-50%);width:min(480px,calc(100% - 144px));padding:48px;background:rgba(255,255,255,.95);border-radius:4px;display:flex;flex-direction:column;gap:16px}
.rk-main .rows2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.rk-main .rows2>div{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.rk-main .rows2 span.strike{font-family:var(--display);font-size:26px;color:var(--ink);text-decoration:line-through;text-decoration-color:var(--home);text-decoration-thickness:1.5px}
.rk-main .rows2 span.n{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--ink-faint)}
.rk-main .step2{display:flex;flex-direction:column;gap:14px}
.rk-main .step2 img{width:100%;height:220px;object-fit:cover;border-radius:4px}
.rk-main .step2 .step-n{padding-top:10px;font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--red);text-transform:uppercase}
.rk-main .gallery-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px)/3);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.rk-main .gallery-track::-webkit-scrollbar{display:none}
.rk-main .gallery-track figure{margin:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:12px}
.rk-main .gallery-track img{width:100%;height:440px;object-fit:cover;border-radius:4px;background:#fff;border:1px solid var(--line)}
.rk-main .gallery-track figcaption{font-size:14px;color:var(--ink-faint)}
.rk-main .gallery-controls{display:flex;align-items:center;gap:12px}
.rk-main .quote-mark{width:36px;height:28px;color:var(--home)}
.rk-main .quote2{font-family:var(--display);font-size:32px;line-height:1.3;color:#9A948A;font-style:italic;margin:0}
.rk-main .lead-panel{margin:120px 72px 0;background:#F4ECEA;border-radius:6px;padding:72px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px}
.rk-main .lead-panel .eyebrow2{color:var(--red-deep)}
.rk-main .lead-panel>.stack-lg img{width:100%;height:280px;object-fit:cover;border-radius:4px;margin-top:8px}
.rk-main .form2{background:#fff;border-radius:4px;padding:40px;display:flex;flex-direction:column;gap:20px;border:1px solid var(--line)}
.rk-main .form2 label,.rk-main .form2 legend{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600;color:#3F4447}
.rk-main .form2 fieldset{border:0;margin:0;padding:0}
.rk-main .form2 legend{padding:0 0 10px}
.rk-main .form2 .row-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rk-main .chips2{display:flex;flex-wrap:wrap;gap:8px}
.rk-main .chips2 button{min-height:40px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:500;cursor:pointer;background:#fff;color:#3F4447;border:1px solid #D9D2C6;font-family:var(--sans)}
.rk-main .chips2 button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.rk-main .form2-status{font-size:14px;font-weight:600;color:var(--red-deep)}
.rk-main .stack{display:flex;flex-direction:column;gap:16px}
.rk-main .stack-lg{display:flex;flex-direction:column;gap:22px}
.rk-main .pill-tag{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--red);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.rk-main .checks2{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.rk-main .checks2 li{display:flex;gap:10px;font-size:15px;line-height:1.5;color:#3F4447}
.rk-main .checks2 li::before{content:"";flex-shrink:0;width:14px;height:8px;margin-top:6px;border-left:2px solid var(--home);border-bottom:2px solid var(--home);transform:rotate(-45deg)}
.rk-main .faq2{border-top:1px solid #E0DAD0}
.rk-main .faq2 details{border-bottom:1px solid #E0DAD0}
.rk-main .faq2 summary{list-style:none;min-height:72px;display:flex;justify-content:space-between;align-items:center;gap:24px;cursor:pointer;font-size:18px;font-weight:600;color:var(--ink)}
.rk-main .faq2 summary::-webkit-details-marker{display:none}
.rk-main .faq2 summary::after{content:"+";font-size:22px;font-weight:400;color:var(--home)}
.rk-main .faq2 details[open] summary::after{content:"\2212"}
.rk-main .faq2 details p{padding:0 40px 24px 0;font-size:15px;line-height:1.7;color:#5A5F62;margin:0}
@media (max-width:1100px){
.rk-main .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.rk-main .quick-lead{flex-wrap:wrap}
.rk-main .quick-lead .ql-title{width:100%}
.rk-main .lead-panel{grid-template-columns:1fr;padding:56px}
.rk-main .split{gap:48px}
}
@media (max-width:760px){
.rk-main .wrap{padding-left:16px;padding-right:16px}
.rk-main .section{padding-top:72px}
.rk-main .band{margin-top:72px;padding-top:56px;padding-bottom:56px}
.rk-main .hero{height:620px}
.rk-main .hero-card{left:16px;right:16px;bottom:88px;width:auto;padding:26px 22px;gap:12px}
.rk-main .hero-controls{right:16px;bottom:22px}
.rk-main .hero-counter{display:none}
.rk-main .hero-bars{left:16px;right:130px;bottom:44px}
.rk-main .page-hero{height:340px}
.rk-main .page-hero .hero-card{bottom:22px}
.rk-main .quick-lead{margin:16px 16px 0;padding:22px;flex-direction:column;align-items:stretch}
.rk-main .quick-lead .btn2{width:100%}
.rk-main .trust{gap:10px 18px;font-size:12px}
.rk-main .trust span+span::before{margin-right:18px}
.rk-main .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:150px}
.rk-main .mosaic>*:first-child{grid-column:span 2;grid-row:span 1;height:220px}
.rk-main .grid-2,.rk-main .grid-3,.rk-main .grid-4,.rk-main .split,.rk-main .rows2,.rk-main .checks2{grid-template-columns:1fr}
.rk-main .split>img{height:280px}
.rk-main .card2>img{height:200px}
.rk-main .audience .card2>img{height:220px}
.rk-main .audience .card2-body{padding:28px 22px}
.rk-main .photo-band{height:420px}
.rk-main .photo-band .band-card{left:16px;right:16px;width:auto;transform:translateY(-50%);padding:26px 22px}
.rk-main .gallery-track{grid-auto-columns:85%}
.rk-main .gallery-track img{height:300px}
.rk-main .lead-panel{margin-left:16px;margin-right:16px;padding:28px 20px}
.rk-main .form2{padding:22px 18px}
.rk-main .quote2{font-size:24px}
.rk-main .head-row{margin-bottom:0;gap:24px}
}

/* ---- Category chip nav (inner pages) ---- */
.chip-row{padding:28px 72px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;background:var(--paper-2);border-bottom:1px solid var(--line)}
.chip-row a{min-height:40px;padding:0 18px;display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:999px;font-size:14px;font-weight:500;color:var(--ink-soft);background:var(--paper)}
.chip-row a:hover{border-color:var(--red);color:var(--ink)}
@media (max-width:760px){.chip-row{padding:20px 16px}}