/* ==========================================================================
   Light For Life Ukrainian Pentecostal Church
   Design system + site styles. Mobile-first, no framework, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand colours sampled from the logo. --navy-900 is the primary ink for
     headings and now matches --navy-surface exactly, per Ted. */
  --navy-900: #061d2c;
  --navy-800: #0a3a5c;
  --navy-700: #14527a;
  --navy-500: #3c7ba3;
  --navy-200: #b9d2e2;
  --navy-050: #eef5f9;

  --gold-600: #c9a52b;
  --gold-500: #e8c741;
  --gold-cta: #ffbb0e; /* Figma: Give button */
  --gold-cta-dark: #f0ab00;
  --gold-300: #fdc873;
  --gold-100: #fbeec4;
  --gold-050: #fdf8e9;

  /* Neutrals — a cool, quiet off-white. Replaced the earlier warm sand
     tones, which read brownish against the navy. Names kept so every
     existing .section--sand rule keeps working. */
  --paper: #ffffff;
  --sand-50: #f4f3f1;
  --sand-100: #e9e7e4;
  --ink: #061d2c;
  --ink-70: #46596a;
  --ink-50: #6d7f8d;
  --line: rgba(5, 46, 74, 0.11);
  --line-strong: rgba(5, 46, 74, 0.2);

  /* Type — Inter Tight throughout, per Ted. One family, all weights.
     --font-display and --font-serif are kept as aliases so component rules
     that reference them keep working if a second face is reintroduced. */
  --font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-serif: var(--font-sans);

  /* Dark surface for the flat navy blocks and the footer. Kept as its own
     name so the intent stays readable, but aliased to --navy-900 so the two
     can never drift apart. */
  --navy-surface: var(--navy-900);

  /* Plus Jakarta Sans — specified by the Figma tag design (node 10:1083),
     used only for the eyebrow pills. */
  --font-tag: "Plus Jakarta Sans", var(--font-sans);

  /* Bona Nova SC — small-caps serif, used only for the mission statement. */
  --font-mission: "Bona Nova SC", ui-serif, Georgia, "Times New Roman", serif;
  --mission-ink: #56707f;
  --mission-ink-strong: var(--navy-surface);

  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.375rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --step-3: clamp(1.65rem, 1.4rem + 1.2vw, 2.35rem);
  --step-4: clamp(2rem, 1.55rem + 2.1vw, 3.1rem);
  --step-5: clamp(2.4rem, 1.6rem + 3.6vw, 4.25rem);

  /* Space */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --section-y: clamp(3.75rem, 9vw, 7.5rem);

  /* Shape */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-pill: 999px;

  --shadow-s: 0 1px 2px rgba(5, 46, 74, 0.05),
    0 4px 14px -6px rgba(5, 46, 74, 0.1);
  --shadow-m: 0 2px 4px rgba(5, 46, 74, 0.04),
    0 18px 40px -20px rgba(5, 46, 74, 0.28);

  --wrap: 1200px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
picture,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: normal;
  font-weight: 600;
  text-wrap: balance;
  color: var(--navy-900);
}

h1 {
  font-size: var(--step-5);
  letter-spacing: normal;
}
h2 {
  font-size: var(--step-4);
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}

p {
  text-wrap: pretty;
}

a {
  color: var(--navy-700);
  text-decoration-color: var(--gold-500);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

a:hover {
  color: var(--navy-900);
}

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--gold-100);
  color: var(--navy-900);
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Wide enough to clear the mission statement's 1203px measure plus the page
   gutter, so the headline is never the thing being clamped. */
.wrap--mission {
  max-width: calc(1203px + var(--gutter) * 2);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.section--sand {
  background: var(--sand-50);
}


.stack > * + * {
  margin-top: var(--space-s);
}

.center {
  text-align: center;
  margin-inline: auto;
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--navy-900);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-s);
  text-decoration: none;
  transition: top 0.2s var(--ease);
}

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

/* --------------------------------------------------------------------------
   4. Typographic components
   -------------------------------------------------------------------------- */
/* Figma node 10:1083 — outlined pill tag.
   The border is derived from currentColor at 50% so the four eyebrows that
   sit on navy panels (overridden to gold inline) get a matching outline
   instead of an invisible dark one. The rgba line above it is the fallback
   for browsers without color-mix. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  /* Several eyebrows sit inside grid/flex parents (.visit__aside, the hero),
     where an inline-flex child gets blockified and stretched to fill its
     track. fit-content keeps the pill hugging its label everywhere, while
     still centring under a parent's text-align. */
  width: fit-content;
  padding-block: 4px;
  /* Right padding sheds one tracking unit, since letter-spacing adds a
     trailing gap after the final letter and would sit the text off-centre. */
  padding-inline: 10px calc(10px - 0.14em);
  border: 1px solid rgba(6, 29, 44, 0.5);
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
  border-radius: var(--radius-pill);
  font-family: var(--font-tag);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.65;
  text-transform: uppercase;
  color: var(--navy-900);
}

/* The leading gold rule was removed from every eyebrow, per Ted. The
   --center modifier is kept as a no-op alias so existing markup that still
   carries it stays valid. */
.eyebrow--center {
  justify-content: center;
}

.section-head {
  max-width: 46rem;
}

/* Centred variant. The eyebrow is a flex row with a leading gold rule, so it
   needs its own justify — text-align alone won't move it. */
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

.section-head .eyebrow {
  margin-bottom: var(--space-s);
}

.section-head p {
  margin-top: var(--space-s);
  color: var(--ink-70);
  font-size: var(--step-1);
  line-height: 1.6;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-70);
}

.muted {
  color: var(--ink-50);
}

.serif-quote {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.45;
  color: var(--navy-800);
  font-weight: 400;
  letter-spacing: normal;
}

.ref {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-600);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 3.125rem; /* Figma: 50px */
  padding: 0.75rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: 8px; /* Figma: 8px, not a pill */
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
    border-color 0.18s var(--ease), color 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}

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

.btn:active {
  transform: translateY(0);
}

.btn svg {
  flex: none;
}

.btn--primary {
  background: var(--navy-900);
  color: #fff;
  box-shadow: var(--shadow-s);
}

.btn--primary:hover {
  background: var(--navy-800);
  color: #fff;
  box-shadow: var(--shadow-m);
}

.btn--gold {
  background: var(--gold-cta);
  color: var(--navy-900);
}

.btn--gold:hover {
  background: var(--gold-cta-dark);
  color: var(--navy-900);
}


.btn--scrim {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding-inline: 1.625rem;
}

.btn--scrim:hover {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--navy-900);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--navy-900);
  background: var(--navy-050);
  color: var(--navy-900);
}


.btn--sm {
  min-height: 2.5rem; /* Figma: 40px */
  padding: 0.625rem 1.125rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  text-decoration: none;
  color: var(--navy-800);
  border-bottom: 2px solid var(--gold-500);
  padding-bottom: 2px;
  transition: gap 0.18s var(--ease), color 0.18s var(--ease);
}

.link-arrow:hover {
  gap: 0.8em;
  color: var(--navy-900);
}

/* --------------------------------------------------------------------------
   6. Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -24px rgba(5, 46, 74, 0.5);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: none;
}

.brand img {
  width: auto;
  height: 2.5rem;
}

.brand-text {
  display: none;
  line-height: 1.05;
}

.brand-text strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: normal;
  color: var(--navy-900);
}

.brand-text span {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4a6a7f; /* Figma: wordmark subtitle */
  margin-top: 2px;
}

@media (min-width: 30em) {
  .brand-text {
    display: block;
  }
}

/* Desktop nav */
.primary-nav {
  display: none;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  padding: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-s);
  font-family: var(--font-display);
  font-size: 0.9375rem; /* Figma: 15px */
  font-weight: 500;
  color: var(--navy-900);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}

.nav-link:hover,
.nav-item.is-open > .nav-link {
  background: var(--navy-050);
  color: var(--navy-900);
}

.nav-link .chev {
  width: 0.7em;
  height: 0.7em;
  transition: transform 0.2s var(--ease);
  opacity: 0.55;
}

.nav-item.is-open .chev {
  transform: rotate(180deg);
}

.nav-item {
  position: relative;
}

.dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 15rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease),
    visibility 0.18s;
}

.nav-item.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown a {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-s);
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.dropdown a:hover {
  background: var(--navy-050);
  color: var(--navy-900);
}

.header-actions {
  display: none;
  align-items: center;
  gap: 0.6rem;
}

/* Mobile toggle */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: #fff;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--navy-900);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 4.5rem 0 0 0;
  z-index: 99;
  background: var(--paper);
  padding: var(--space-m) var(--gutter) var(--space-xl);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
    visibility 0.25s;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.nav-open {
  overflow: hidden;
}

.m-group + .m-group {
  border-top: 1px solid var(--line);
}

.m-toplink,
.m-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  padding: 1.05rem 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--navy-900);
  text-decoration: none;
  cursor: pointer;
}

.m-trigger .chev {
  width: 0.85rem;
  height: 0.85rem;
  opacity: 0.5;
  transition: transform 0.22s var(--ease);
}

.m-trigger[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

.m-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s var(--ease);
}

.m-panel > div {
  overflow: hidden;
}

.m-trigger[aria-expanded="true"] + .m-panel {
  grid-template-rows: 1fr;
}

.m-panel a {
  display: block;
  padding: 0.7rem 0 0.7rem 1rem;
  border-left: 2px solid var(--line);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink-70);
  text-decoration: none;
}

.m-panel a:hover {
  border-left-color: var(--gold-500);
  color: var(--navy-900);
}

.m-panel > div > :last-child {
  margin-bottom: 1rem;
}

.mobile-cta {
  display: grid;
  gap: 0.7rem;
  margin-top: var(--space-l);
}

/* Desktop switch — declared last so it wins over the mobile defaults above */
@media (min-width: 62.5em) {
  .primary-nav,
  .header-actions {
    display: flex;
  }
  .nav-toggle,
  .mobile-nav {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
/* --- Base hero shell, shared by the homepage and inner pages --- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* --- Inner-page hero: the light, airy treatment --- */
.hero--page {
  padding-block: clamp(3rem, 9vw, 6.5rem) clamp(4.5rem, 11vw, 8rem);
  background-color: #fffdf7;
  background-image: radial-gradient(
      120% 70% at 50% -8%,
      rgba(255, 224, 158, 0.6) 0%,
      rgba(255, 232, 186, 0) 62%
    ),
    linear-gradient(180deg, #fffdf7 0%, #fbf9f5 46%, #ffffff 100%);
}

/* --------------------------------------------------------------------------
   7b. Homepage hero — full-bleed photo, per the Figma design
   -------------------------------------------------------------------------- */
.hero--home {
  display: flex;
  flex-direction: column;
  min-height: clamp(34rem, 78vh, 50rem); /* Figma: 800px tall */
  color: #fff;
}

/* The photo. Layered so that if hero.jpg is missing or still loading, the
   gradient underneath renders on its own and the hero never looks broken. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #0c2436;
  background-image: url("../img/hero.jpg"),
    radial-gradient(120% 90% at 50% 0%, rgba(58, 122, 163, 0.85) 0%, rgba(12, 36, 54, 0) 62%),
    linear-gradient(180deg, #17486b 0%, #0c2436 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 42%;
}

/* Scrim: flat 40% black from the design, plus a soft vertical gradient so the
   headline and the chips both keep contrast wherever the photo is bright. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.32) 0%,
      rgba(0, 0, 0, 0.1) 32%,
      rgba(0, 0, 0, 0.34) 100%
    ),
    rgba(0, 0, 0, 0.4);
}

.hero--home .hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  text-align: center;
  padding-block: clamp(3.5rem, 9vw, 6rem) clamp(1.5rem, 4vw, 2.5rem);
}

.hero--home .eyebrow {
  color: #fff;
  font-size: clamp(0.8125rem, 0.7rem + 0.4vw, 1rem);
  letter-spacing: 0.126em; /* Figma: 2.016px at 16px */
  font-weight: 600;
}

.hero--home .eyebrow::before {
  display: none;
}

.hero--home h1 {
  color: #fff;
  font-size: clamp(2.5rem, 1.35rem + 5.1vw, 6.25rem); /* Figma: 100px */
  line-height: 1.1;
  letter-spacing: normal;
  font-weight: 600;
  max-width: 16ch;
}

.hero--home .hero__lede {
  font-size: clamp(1rem, 0.95rem + 0.22vw, 1.125rem); /* Figma: 18px */
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
  max-width: 36rem;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

.hero--home .btn-row {
  justify-content: center;
}

.hero--home .hero__times {
  justify-content: center;
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
  padding-inline: var(--gutter);
}

.hero--home .time-chip {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  box-shadow: none;
  padding: 0.5rem 1.0625rem; /* Figma: 8px / 17px */
  font-size: clamp(0.8125rem, 0.75rem + 0.25vw, 1rem);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.hero--home .time-chip strong {
  color: #fff;
  font-weight: 600;
}

.hero--home .time-chip span {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 400;
}

.hero__rays {
  position: absolute;
  inset: -12% -20% auto -20%;
  height: 78%;
  z-index: -2;
  pointer-events: none;
}

.hero__mark {
  position: absolute;
  right: -6%;
  bottom: 12%;
  width: min(46%, 26rem);
  opacity: 0.05;
  z-index: -2;
  pointer-events: none;
}

.hero__waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: -1;
  pointer-events: none;
}

.hero--page .hero__inner {
  display: grid;
  gap: var(--space-l);
  justify-items: start;
}

.hero--page .hero__inner > * {
  max-width: 44rem;
}

.hero h1 {
  margin-top: var(--space-s);
}

.hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--navy-700);
}

.hero__lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 34rem;
}

.hero__times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.time-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-s);
  font-size: var(--step--1);
}

.time-chip strong {
  font-weight: 700;
  color: var(--navy-900);
}

.time-chip span {
  color: var(--ink-70);
}

/* --------------------------------------------------------------------------
   8. Visit / location card
   -------------------------------------------------------------------------- */
.visit {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-m);
  /* Previously calc(--section-y * -0.55), which pulled the card ~66px up into
     the hero. Now it clears the hero entirely and sits below it. */
  margin-top: clamp(1rem, 2.5vw, 2.5rem);
  position: relative;
  z-index: 2;
}

/* Taller than it is wide: the vertical breathing room Ted asked for, without
   the 112px left inset that was pushing the content too far off the edge. */
.visit__main {
  padding: clamp(2rem, 6vw, 5.5rem) clamp(1.75rem, 4.5vw, 4.5rem);
}

/* The aside sits in the narrower 1fr track, so it takes a smaller inset —
   matching --main's 112px here would leave it ~246px of text and force
   "You are welcome here" to wrap. */
.visit__aside {
  padding: clamp(2rem, 4.75vw, 4.5rem);
  background: var(--navy-surface);
  color: #cfe0ea;
  display: grid;
  align-content: center;
  gap: var(--space-s);
}

.visit__aside h3 {
  color: #fff;
}

.visit__address {
  font-style: normal;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--navy-900);
  font-weight: 600;
}

.visit__address span {
  display: block;
  font-size: var(--step-0);
  font-weight: 400;
  color: var(--ink-70);
}

.schedule {
  list-style: none;
  padding: 0;
  margin-top: var(--space-m);
  display: grid;
  gap: 0.15rem;
}

.schedule li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--line);
}

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

.schedule dt,
.schedule .day {
  font-weight: 600;
  color: var(--navy-900);
}

.schedule .time {
  font-variant-numeric: tabular-nums;
  color: var(--ink-70);
  white-space: nowrap;
  flex: none;
}

.schedule .tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-600);
  background: var(--gold-050);
  border: 1px solid var(--gold-100);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  margin-left: 0.5rem;
  white-space: nowrap;
}

@media (max-width: 25em) {
  .schedule .tag {
    display: none;
  }
}

@media (min-width: 48em) {
  .visit {
    grid-template-columns: 1.35fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   9. Mission band
   -------------------------------------------------------------------------- */
.mission {
  text-align: center;
}

/* The mission statement is the one place a second face earns its keep.
   Bona Nova SC is a small-caps serif — it needs positive tracking and a
   looser line-height than the tight sans headings elsewhere. Sized and
   measured to break onto exactly two lines from ~700px up. */
.mission__statement {
  font-family: var(--font-mission);
  font-size: clamp(1.9rem, 1.05rem + 3.5vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.26;
  color: var(--mission-ink);
  margin-inline: auto;
  text-wrap: balance;
}

/* "full life in Christ." — one weight throughout; the emphasis is depth of
   colour alone, so the small caps stay even across both lines. */
.mission__accent {
  font-weight: inherit;
  color: var(--mission-ink-strong);
}

.beliefs {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-xl);
  text-align: left;
}

.belief {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--radius-m);
  background: #fff;
  border: 1px solid var(--line);
}

.belief h3 {
  font-size: var(--step-0);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold-600);
  font-weight: 700;
}

.belief p {
  margin-top: 0.5rem;
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: normal;
  color: var(--navy-900);
  line-height: 1.2;
}

@media (min-width: 48em) {
  .beliefs {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   10. Cards / next steps
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-xl);
}

@media (min-width: 40em) {
  .card-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 60em) {
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.5rem, 3.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
    border-color 0.22s var(--ease);
}

a.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-m);
  border-color: var(--navy-200);
}

.card__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--gold-050);
  border: 1px solid var(--gold-100);
  color: var(--navy-800);
  margin-bottom: 0.4rem;
}

.card__icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.card h3 {
  font-size: var(--step-1);
}

.card p {
  color: var(--ink-70);
  font-size: 0.98rem;
  flex: 1;
}

.card .link-arrow {
  align-self: flex-start;
  margin-top: 0.6rem;
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   11. Next Gen split panels
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-xl);
}

@media (min-width: 48em) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
}

.panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
  padding: clamp(1.75rem, 4.5vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 19rem;
  border: 1px solid var(--line);
}

.panel--kids {
  background: linear-gradient(160deg, var(--gold-050), #fff 70%);
}

.panel--youth {
  background: linear-gradient(160deg, var(--navy-050), #fff 70%);
}

.panel__tag {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-600);
}

.panel--youth .panel__tag {
  color: var(--navy-500);
}

.panel p {
  color: var(--ink-70);
  flex: 1;
}

.panel__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--navy-900);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.85rem;
  align-self: flex-start;
}

.values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-top: 0.5rem;
  list-style: none;
  padding: 0;
}

.values li {
  font-size: 0.85rem;
  line-height: 1.35;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
}

.values strong {
  display: block;
  color: var(--navy-900);
}

.values span {
  color: var(--ink-50);
}

/* --------------------------------------------------------------------------
   12. Events
   -------------------------------------------------------------------------- */
.events {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-xl);
  list-style: none;
  padding: 0;
}

.event {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-m);
  align-items: center;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: #fff;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.event:hover {
  border-color: var(--navy-200);
  transform: translateX(3px);
}

.event__date {
  display: grid;
  place-items: center;
  width: 4.25rem;
  padding: 0.6rem 0.25rem;
  border-radius: var(--radius-s);
  background: var(--navy-900);
  color: #fff;
  line-height: 1;
  flex: none;
}

.event__date .m {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-500);
}

.event__date .d {
  font-size: 1.6rem;
  font-weight: 800;
  margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}

.event__date .y {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  opacity: 0.7;
  margin-top: 0.25rem;
}

.event h3 {
  font-size: var(--step-1);
}

.event p {
  font-size: 0.92rem;
  color: var(--ink-50);
  margin-top: 0.2rem;
}

/* --------------------------------------------------------------------------
   13. Outreach
   -------------------------------------------------------------------------- */
.outreach-grid {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-xl);
}

@media (min-width: 52em) {
  .outreach-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-xl);
    align-items: center;
  }
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin-top: var(--space-m);
}

.pill-list li {
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
}

.outreach-callout {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: var(--radius-l);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.outreach-callout h3 {
  font-size: var(--step-1);
}

.outreach-callout p {
  margin-top: 0.5rem;
  color: #b7cbd9;
  font-size: 0.98rem;
}

/* --------------------------------------------------------------------------
   14. Leadership strip
   -------------------------------------------------------------------------- */
.people {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: var(--space-l);
}

@media (min-width: 40em) {
  .people {
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
  }
}

.people img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-m);
  filter: saturate(0.92);
  transition: transform 0.3s var(--ease), filter 0.3s var(--ease);
}

.people a:hover img,
.people img:hover {
  transform: translateY(-4px);
  filter: saturate(1.05);
}

/* --------------------------------------------------------------------------
   15. Give + Watch
   -------------------------------------------------------------------------- */
.give {
  background: linear-gradient(150deg, var(--navy-surface) 0%, #0d3a5a 100%);
  color: #d9e7f0;
  border-radius: var(--radius-l);
  padding: clamp(1.75rem, 5vw, 3.5rem);
  position: relative;
  overflow: hidden;
}

.give h2 {
  color: #fff;
  max-width: 18ch;
}

.give p {
  margin-top: var(--space-s);
  max-width: 44ch;
  color: #b7cbd9;
}

.give .btn-row {
  margin-top: var(--space-m);
}

.give__glow {
  position: absolute;
  right: -10%;
  top: -40%;
  width: 28rem;
  height: 28rem;
  background: radial-gradient(
    circle,
    rgba(232, 199, 65, 0.28) 0%,
    transparent 62%
  );
  pointer-events: none;
}

.ways {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

@media (min-width: 48em) {
  .ways {
    grid-template-columns: repeat(3, 1fr);
  }
}

.way {
  padding: 1.25rem;
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
}

.way h3 {
  color: #fff;
  font-size: var(--step-0);
}

.way p {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: #a9c0d1;
  max-width: none;
}

.watch {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

@media (min-width: 52em) {
  .watch {
    grid-template-columns: 1fr 1.15fr;
    gap: var(--space-xl);
  }
}

.watch__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: linear-gradient(150deg, #0a3a5c, #052e4a);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-m);
}

.watch__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.play {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--gold-500);
  display: grid;
  place-items: center;
  color: var(--navy-900);
  box-shadow: 0 0 0 0 rgba(232, 199, 65, 0.55);
  animation: pulse 2.6s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 22px rgba(232, 199, 65, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(232, 199, 65, 0);
  }
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--space-m);
}

.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--navy-900);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
    transform 0.18s var(--ease);
}

.social:hover {
  background: var(--navy-900);
  color: #fff;
  transform: translateY(-2px);
}

.social svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-surface);
  color: #a9c0d1;
  padding-block: var(--space-xl) var(--space-l);
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 48em) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-xl);
  }
}

.site-footer img {
  height: 4.5rem;
  width: auto;
}

.site-footer h2 {
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

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

.footer-links a {
  color: #a9c0d1;
  text-decoration: none;
}

.footer-links a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--gold-500);
}

.footer-bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #7f9bad;
}

/* --------------------------------------------------------------------------
   17. Motion
   -------------------------------------------------------------------------- */
/* Scroll reveal is progressive enhancement only. The hidden state is applied by a
   class that JS sets on <html>, so if the script never runs, is blocked, or the
   page is embedded in an iframe, every section is visible by default. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

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

/* ==========================================================================
   17. Homepage redesign — Figma node 14:3424
   A light, editorial treatment for the hero, visit and mission sections.
   Every selector here is homepage-only (.hero--home, .visit, .mission) or
   opt-in (.site-header--hero), so the other 12 pages are untouched.
   ========================================================================== */
:root {
  --rd-ink: #1b1b1b;
  --rd-body: #454545;
  --rd-muted: #616161;
  --rd-soft: #aeaeae;
  --rd-blue: #034cd9;
  --rd-surface: #f6f6f6;
  --rd-rule: rgba(41, 41, 41, 0.3);
  --rd-edge: #f0f0f0;

  /* Figma's layered drop shadow on the raised pill buttons. */
  --rd-lift: 0 2px 2.5px rgba(27, 27, 27, 0.2), 0 10px 5px rgba(27, 27, 27, 0.17),
    0 22px 6.5px rgba(27, 27, 27, 0.1), 0 40px 8px rgba(27, 27, 27, 0.03);
  --rd-card-shadow: -1px 8px 8.5px rgba(0, 0, 0, 0.06),
    -3px 30px 15.5px rgba(0, 0, 0, 0.05), -7px 69px 20.5px rgba(0, 0, 0, 0.03),
    -13px 122px 24.5px rgba(0, 0, 0, 0.01);

  /* Libertinus Serif (Google Fonts) — replaced Trust 3B Trial, which was a
     licensed TRIAL face that could not be redistributed AND carried no
     Cyrillic at all, so every Ukrainian heading was silently falling back.
     Libertinus ships 400/600/700 plus italics and covers Latin, full Cyrillic
     (Є І Ї Ґ), Greek and Hebrew. Real weights, so no synthetic bold. */
  --font-serif-display: "Libertinus Serif", "Source Serif 4", Georgia,
    "Times New Roman", serif;
  --font-ui: "Inter", var(--font-sans);
}

/* ⚠ Libertinus Serif does NOT cover Ukrainian, despite the note above.
   As served by Google Fonts its `cyrillic` face declares unicode-range
   U+0400–045F but ships no glyph for і (U+0456) or ї (U+0457) — the two
   commonest Ukrainian-specific letters. Because the range *claims* them, the
   browser never falls through to the next font in the stack; it just paints
   nothing. "Віра, зрозуміла дітям" came out as "В ра, зрозум ла д тям".
   Rasterising each glyph confirms it: и and І return ink, і and ї return
   exactly zero pixels. 74% of the Ukrainian strings in i18n.js contain one of
   the two, so this hit nearly every heading on the Ukrainian site.

   Ukrainian therefore takes Source Serif 4, which is already loaded for the
   fallback stack and has full Cyrillic. Redirecting just those two codepoints
   was rejected — a single letter in a different serif inside almost every word
   reads worse than one consistent face per language.

   This is the second display face to fail this way (Trust 3B had no Cyrillic
   at all). Rasterise і, ї, Є and Ґ before adopting the next one. */
html[lang="uk"] {
  --font-serif-display: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* --- Shared redesign pieces ------------------------------------------- */
.rd-eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2.016px;
  line-height: 23.76px;
  text-transform: uppercase;
  color: var(--rd-muted);
}
.rd-eyebrow--blue { color: var(--rd-blue); }
.rd-eyebrow--light { color: #fff; font-family: var(--font-tag); font-weight: 600; font-size: 16px; }

.rd-display {
  font-family: var(--font-serif-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--rd-ink);
  text-wrap: balance;
}

/* Raised pill button, light and dark. Figma pairs a soft outer lift with an
   inset bottom highlight, which is what gives the button its domed edge. */
.btn--raised,
.btn--raised-dark {
  border: 2px solid var(--rd-edge);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  line-height: 23.76px;
  filter: drop-shadow(0 2px 2.5px rgba(27, 27, 27, 0.2))
    drop-shadow(0 10px 5px rgba(27, 27, 27, 0.12));
  position: relative;
  isolation: isolate;
}
.btn--raised {
  background: linear-gradient(180deg, #fff, #f3f3f3);
  color: var(--rd-ink);
  box-shadow: inset 0 -2px 4px rgba(99, 99, 99, 0.35);
}
.btn--raised-dark {
  background: linear-gradient(180deg, #313131, #1b1b1b);
  color: #fff;
  box-shadow: inset 0 -2px 4px rgba(99, 99, 99, 0.55);
}
.btn--raised:hover { background: linear-gradient(180deg, #fff, #ececec); color: var(--rd-ink); }
.btn--raised-dark:hover { background: linear-gradient(180deg, #3a3a3a, #232323); color: #fff; }
.btn--raised img,
.btn--raised-dark img { width: auto; height: 1em; }
.btn--raised-dark img { filter: brightness(0) invert(1); }

.btn--plain-white {
  background: #fff;
  color: var(--rd-ink);
  border-radius: var(--radius-pill);
  padding: 13px 26px;
  gap: 6px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
}
.btn--plain-white:hover { background: #f1f1f1; color: var(--rd-ink); }
.btn--plain-white img { width: 24px; height: 24px; }

.btn--outline-quiet {
  border: 1px solid rgba(5, 46, 74, 0.2);
  border-radius: var(--radius-pill);
  background: transparent;
  padding: 13px 26px;
  font-family: var(--font-tag);
  font-weight: 600;
  font-size: 18px;
  color: var(--rd-ink);
}
.btn--outline-quiet:hover { background: rgba(27, 27, 27, 0.04); color: var(--rd-ink); }

/* --- Header over the hero (homepage only) ----------------------------- */
/* Stays sticky. Transparent while it sits on the hero photo, then main.js's
   existing .is-stuck class restores the solid header on scroll. */
.site-header--hero:not(.is-past-hero) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.site-header--hero:not(.is-past-hero) .brand img { filter: brightness(0) invert(1); }
.site-header--hero:not(.is-past-hero) .brand-text strong,
.site-header--hero:not(.is-past-hero) .brand-text span,
.site-header--hero:not(.is-past-hero) .nav-link { color: #fff; }
.site-header--hero:not(.is-past-hero) .nav-link:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.site-header--hero:not(.is-past-hero) .nav-toggle span { background: #fff; }
/* Figma's header carries Give alone. */
.site-header--hero .header-actions .btn--ghost { display: none; }
.site-header--hero:not(.is-past-hero) .btn--gold {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(243, 243, 243, 0.1));
  border: 1px solid var(--rd-edge);
  color: #fff;
}
.site-header--hero:not(.is-past-hero) .btn--gold:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.nav-link img { width: 1.125em; height: auto; }
.site-header--hero:not(.is-past-hero) .nav-link img { filter: brightness(0) invert(1); }

/* --- Hero -------------------------------------------------------------- */
/* The header is sticky, so it occupies flow space. Pull the hero up by the
   header's height (and pad it back) so the photo runs to the top of the page
   and the transparent header overlays it, as in the design. */
.hero--home {
  min-height: 911px;
  justify-content: center;
  margin-top: -4.5rem;
  padding-top: 4.5rem;
}
.hero--home .hero__media {
  background-color: #1b1b1b;
  background-image: url("../img/redesign/hero-church.jpg");
  background-size: cover;
  background-position: center 38%;
}
/* Figma: flat 60% black over the photo. */
.hero--home .hero__scrim { background: rgba(0, 0, 0, 0.6); }

.hero--home .hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
  text-align: center;
  /* Wide enough to hold "A place to know God" on one line at the full 100px,
     so the headline breaks where the <br> says and not before. */
  max-width: 1240px;
}
.hero--home .hero__inner .eyebrow {
  border: 0;
  padding: 0;
  color: #fff;
  font-family: var(--font-tag);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2.016px;
  line-height: 23.76px;
}
.hero--home h1 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 1.1rem + 6.6vw, 6.25rem); /* Figma: 100px */
  line-height: 1.1;
  letter-spacing: normal;
  color: #fff;
  margin: 0;
}
.hero--home .hero__lede {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
  max-width: 577px;
  margin-inline: auto;
}
.hero--home .btn-row { justify-content: center; gap: 24px; margin: 0; }

/* Service-times bar tucked against the bottom edge of the hero. */
.hero__hours {
  margin-top: auto;
  display: flex;
  justify-content: center;
  width: 100%;
}
.hero__hours-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px;
  background: #fff;
  padding: 25px 36px;
  border-radius: 12px 12px 0 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 23.76px;
  color: var(--rd-ink);
}
.hero__hours-inner span { display: inline-flex; gap: 6px; }
.hero__hours-inner strong { font-weight: 600; }
.hero__hours-inner em { font-style: normal; font-weight: 400; }

/* --- Visit / location -------------------------------------------------- */
.section--visit {
  background: #fff;
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
/* Faint church line-drawing watermark, bottom-right. */
.section--visit::after {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -18%;
  width: 94%;
  aspect-ratio: 1808 / 870;
  background: url("../img/redesign/church-sketch.jpg") center / contain no-repeat;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}
.visit {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  /* The left column is shorter than the card, so centre it against the card
     rather than letting it hang from the top. */
  align-items: center;
  position: relative;
  z-index: 1;
  /* Reset of the old card treatment. */
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-top: 0;
  overflow: visible;
}
@media (min-width: 62em) {
  .visit { grid-template-columns: 1fr 551px; }
}
.visit__main { padding: 0; }
.visit__main h2 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4rem); /* Figma: 64px */
  line-height: 1.1;
  color: var(--rd-ink);
  margin-top: 18px;
}

.schedule { margin-top: 40px; max-width: 545px; }
.schedule li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 9px;
  border-bottom: 1px dashed var(--rd-rule);
}
.schedule li:last-child { border-bottom: 0; }
.schedule .day {
  font-family: var(--font-tag);
  font-weight: 600;
  font-size: 18px;
  line-height: 33px;
  color: var(--rd-ink);
  display: block;
}
.schedule .time {
  font-family: var(--font-tag);
  font-weight: 600;
  font-size: 14px;
  line-height: 29.7px;
  color: var(--rd-ink);
  text-align: right;
  white-space: nowrap;
}
/* Sub-label under Sunday Worship — was an inline gold pill, now a blue
   caption on its own line, so the pill's border/offset are cleared too. */
.schedule .tag {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  margin-left: 0;
  border-radius: 0;
  font-family: var(--font-tag);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.12px;
  line-height: 18.48px;
  text-transform: uppercase;
  color: var(--rd-blue);
}

/* The right-hand card is now white on white, carried by shadow alone. */
.visit__aside {
  background: #fff;
  color: var(--rd-body);
  border-radius: 16px;
  box-shadow: var(--rd-card-shadow);
  padding: 53px 43px 76px 44px;
  display: block;
}
.visit__aside h3 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.5rem); /* Figma: 56px */
  line-height: 1.1;
  color: var(--rd-ink);
  margin-top: 18px;
}
.visit__aside p {
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 1.5;
  color: var(--rd-body);
  margin-top: 22px;
}
.visit__address-block { margin-top: 56px; }
.visit__address-row {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 24px;
}
.visit__address-row img { width: 37px; height: auto; flex: none; }
.visit__address-row strong {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 24px;
  line-height: 33px;
  color: var(--rd-ink);
}
.visit__address-row span {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 27px;
  color: #555;
}

/* --- Mission ----------------------------------------------------------- */
.section--mission {
  background: var(--rd-surface);
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(4rem, 9vw, 7rem);
}
/* Oversized "Our mission" ghosted into the background, anchored to the
   bottom of the section and bleeding past both edges (Figma node 14:3852).
   Shipped as outlined SVG rather than live text so the wordmark keeps its
   exact shape whatever display face is in use. */
.section--mission::before {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -10px;
  height: clamp(5.5rem, 15.2vw, 18.3rem); /* Figma: 292.5px */
  background: url("../img/redesign/mission-watermark.svg") center bottom / 100% 100%
    no-repeat;
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}
/* Both wraps in this section (statement and belief cards) take the wider
   measure — the default 1200px left only 1104px of content, which is 57px
   short of the three 363px cards plus their 36px gaps. */
.section--mission > .wrap {
  position: relative;
  z-index: 1;
  max-width: calc(1203px + var(--gutter) * 2);
}

.mission__statement {
  font-family: var(--font-serif-display);
  font-weight: 600; /* Figma drew this Medium; 600 is Libertinus\u2019s nearest real weight */
  font-size: clamp(2rem, 0.9rem + 4.4vw, 5rem); /* Figma: 80px */
  line-height: 1.2;
  letter-spacing: normal;
  margin-inline: auto;
  max-width: 1203px; /* Figma frame width — needs .wrap--mission to allow it */
  text-wrap: balance;
  color: var(--rd-soft);
}
/* Scroll-driven fill: each word interpolates from --rd-soft to --rd-ink as
   the section travels through the viewport. --p (0..1) is set by main.js;
   --i is the word index, --n the total. Without JS or with reduced motion
   the words simply render filled. */
.mission__word {
  /* --spread widens the leading edge so ~3 words are mid-fill at any moment,
     which reads as a sweep rather than words snapping on one at a time. */
  --spread: 3;
  --t: clamp(
    0,
    calc((var(--p, 1) * (var(--n) + var(--spread)) - var(--i)) / var(--spread)),
    1
  );
  color: color-mix(in srgb, var(--rd-ink) calc(var(--t) * 100%), var(--rd-soft));
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .mission__word { color: var(--rd-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .mission__word { color: var(--rd-ink); }
}

.section--mission .lede {
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 1.5;
  color: var(--rd-body);
  max-width: 926px;
  margin: 34px auto 0;
}
.section--mission .btn-row { justify-content: center; gap: 16px; margin-top: 38px; }

/* --- Mission: belief cards (Figma node 14:3024) ------------------------- */
/* Three white cards riding above the ghosted wordmark. */
.section--mission .beliefs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px;
  margin-top: 64px;
  /* Centred to match the statement-of-faith tiles on the about pages — these
     are single-line statements, not paragraphs. */
  text-align: center;
  position: relative;
  z-index: 1;
}
.section--mission .belief {
  background: #fff;
  border: 0;
  border-radius: 12px;
  padding: 24px 36px;
  box-shadow: var(--rd-card-shadow);
  /* Sized off the widest label ("In non-essential beliefs" needs 291px) so
     every label holds one line and all three cards stay identical. */
  width: 363px;
  max-width: 100%;
}
/* Figma node 14:3857 — Inter Bold, 2.016px tracking, kept on one line so
   "In non-essential beliefs" doesn't wrap and make that card taller. */
.section--mission .belief h3 {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2.016px;
  line-height: 23.76px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rd-muted);
}
.section--mission .belief p {
  font-family: var(--font-serif-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--rd-ink);
  margin-top: 16px;
}
/* Figma node 14:3861 — Inter Medium and no tracking, unlike the label above. */
.section--mission .belief .ref {
  display: block;
  margin-top: 16px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 23.76px;
  text-transform: uppercase;
  color: var(--rd-blue);
}

/* Figma swapped the mission CTAs from outlined to the same raised dark pill
   used by "Get directions", at a fixed 230px — but without the 2px #f0f0f0
   edge, so these read as a solid slug rather than a ringed button. */
.section--mission .btn-row .btn {
  border: 0;
  width: 230px;
  height: 51px;
  font-size: 16px;
}

/* --- Next steps (Figma node 14:3896) ----------------------------------- */
.section--steps {
  background: #fff;
  padding-block: clamp(4rem, 8vw, 8.125rem);
}
/* Three 402px cards plus two 40px gaps need 1286px — wider than the default
   1200px wrap, which was pushing the third card onto its own row. */
.section--steps > .wrap {
  max-width: calc(1286px + var(--gutter) * 2);
}
.section--steps .section-head {
  max-width: 790px;
  margin-inline: auto;
  text-align: center;
}
.section--steps .section-head h2 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4rem); /* Figma: 64px */
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--rd-ink);
  margin-top: 24px;
}
.section--steps .section-head p {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--rd-body);
  margin-top: 24px;
}

.step-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-top: 64px;
}
.step-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 402px;
  max-width: 100%;
  padding-bottom: 32px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: -1px 8px 17px rgba(0, 0, 0, 0.06), -3px 30px 31px rgba(0, 0, 0, 0.05),
    -7px 69px 41px rgba(0, 0, 0, 0.03), -13px 122px 49px rgba(0, 0, 0, 0.01);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.step-card:hover {
  transform: translateY(-4px);
  color: inherit;
  box-shadow: -1px 10px 20px rgba(0, 0, 0, 0.08), -3px 34px 36px rgba(0, 0, 0, 0.06),
    -7px 76px 46px rgba(0, 0, 0, 0.04);
}
.step-card__media {
  height: 220px;
  background: var(--rd-surface);
  overflow: hidden;
  flex: none;
}
.step-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.step-card__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-inline: 30px;
}
.step-card h3 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--rd-ink);
}
.step-card p {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--rd-body);
  margin-top: 12px;
}
.step-card__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--rd-ink);
}
.step-card__link img { width: 15px; height: 15px; }
.step-card:hover .step-card__link img { transform: translateX(3px); }
.step-card__link img { transition: transform 0.25s var(--ease); }

/* --- Upcoming events (Figma node 14:3935) ------------------------------- */
.section--events {
  background: #fff;
  padding-block: clamp(4rem, 8vw, 8.125rem);
}
.section--events > .wrap {
  max-width: calc(993px + var(--gutter) * 2);
}
.section--events .section-head {
  max-width: 790px;
  margin-inline: auto;
  text-align: center;
}
.section--events .section-head h2 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4rem); /* Figma: 64px */
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--rd-ink);
  margin-top: 24px;
}
.section--events .section-head p {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--rd-body);
  margin-top: 24px;
}

.events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin-top: 44px;
  list-style: none;
  padding: 0;
}
.event {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 30px;
  border: 1px solid #cfcfcf;
  border-radius: 16px;
  background: #fff;
  /* The pre-redesign .event rule centres its children; Figma is items-start. */
  align-items: flex-start;
}
/* Date chip: dark tile with a lighter band behind the month.
   padding is reset because the old chip carried its own, which would offset
   the absolutely positioned month/day/year against the padding box. */
.event__date {
  position: relative;
  width: 90px;
  height: 90px;
  flex: none;
  padding: 0;
  border-radius: 10px;
  background: var(--rd-ink);
  overflow: hidden;
  display: block;
  color: #fff;
  text-align: center;
}
.event__date::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 25px;
  background: #393939;
}
.event__date .m,
.event__date .d,
.event__date .y {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
}
.event__date .m {
  top: 1px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 23.76px;
  letter-spacing: 2.016px;
  text-transform: uppercase;
  /* White, not the old gold — the pre-redesign rule still sets --gold-500. */
  color: #fff;
  /* Tracking adds a trailing gap; shed it so the month sits optically centred. */
  text-indent: 2.016px;
}
.event__date .d {
  top: 30px;
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: 41px;
  line-height: 41px;
  color: #fff;
  /* The old rule forced tabular figures, which fight the serif's proportions. */
  font-variant-numeric: normal;
}
.event__date .y {
  top: 73px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 11px;
  line-height: 9.92px;
  letter-spacing: 0.992px;
  text-indent: 0.992px;
  color: #f2f2f2;
}
.event h3 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--rd-ink);
}
.event p {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--rd-body);
  margin-top: 6px; /* Figma node 14:3959 stacks title and location on a 6px gap */
}
.events-more {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}
.events-more a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--rd-ink);
  text-decoration: none;
}
.events-more img { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.events-more a:hover img { transform: translateX(3px); }

/* --- Events: dark treatment (Figma node 14:3935, updated) --------------- */
.section--events {
  background: #151515;
}
.section--events .rd-eyebrow { color: #81acff; }
.section--events .section-head h2 {
  color: #fff;
  font-size: clamp(2.5rem, 1.1rem + 4.4vw, 4.625rem); /* Figma: 74px */
}
.section--events .section-head p { color: #e8e8e8; }
.event {
  background: #272727;
  border: 0;
}
.event h3 {
  color: #fff;
  font-size: 24px;
  line-height: 1.4;
}
.event p {
  color: #e8e8e8;
  font-weight: 400;
  line-height: 1.6;
}
/* Centred to match the belief cards. Scoped to the section so it outranks the
   bare `.event { align-items: flex-start }` rules further down the file. */
.section--events .event {
  align-items: center;
  text-align: center;
}
.events-more a { color: #fff; }

/* --- Senior pastors (Figma node 14:4116) -------------------------------- */
.section--pastors {
  background: #151515;
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 7.5vw, 7.5rem) 0;
  color: #fff;
}
/* Figma lays this out as a 595px portrait + 82px gap + 648px column = 1325px.
   The default 1200px wrap left the bio only ~427px, which read as squished. */
.section--pastors > .wrap {
  max-width: calc(1325px + var(--gutter) * 2);
}
.section--pastors .section-head {
  max-width: 608px;
  margin-inline: auto;
  text-align: center;
}
.section--pastors .rd-eyebrow { color: #f5f5f5; }
.section--pastors .section-head h2 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.1rem + 4.4vw, 4.625rem); /* Figma: 74px */
  line-height: 1.1;
  letter-spacing: normal;
  color: #fff;
  margin-top: 24px;
}
.section--pastors .section-head > p {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
  margin-top: 24px;
}

.pastors {
  display: grid;
  gap: clamp(2.5rem, 5vw, 82px); /* Figma: 82px between portrait and copy */
  align-items: center;
  margin-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: clamp(4rem, 8vw, 8rem);
  position: relative;
  z-index: 1;
}
@media (min-width: 62em) {
  .pastors { grid-template-columns: 595px 1fr; }
}
.pastors__photo {
  position: relative;
}
.pastors__photo img {
  width: 100%;
  height: auto;
  display: block;
}
/* Handwritten signature, overlapping the lower-left of the portrait. */
.pastors__signature {
  position: absolute;
  left: -6%;
  bottom: -7%;
  width: 46%;
  max-width: 260px;
  pointer-events: none;
}
.pastors__body h3 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 2.875rem); /* Figma: 46px */
  line-height: 1.1;
  letter-spacing: normal;
  color: #fff;
}
.pastors__body p {
  font-family: var(--font-ui);
  font-weight: 300; /* Figma: Inter Light */
  font-size: 20px;
  line-height: 1.6;
  color: #e8e8e8;
  margin-top: 31px;
}
/* Ghosted "Our Pastors" wordmark bleeding off the bottom of the section. */
.section--pastors::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3%;
  height: clamp(5rem, 14vw, 16.8rem);
  background: url("../img/redesign/pastors-watermark.svg") center bottom / 100% 100%
    no-repeat;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

/* --- Directional leadership team (Figma node 14:4150) ------------------- */
.section--team {
  background: #1c1c1c;
  padding-block: clamp(3.5rem, 7vw, 7.5rem);
  color: #fff;
}
.section--team > .wrap {
  max-width: calc(1440px + var(--gutter) * 2);
}
.section--team h2 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.1rem + 4.4vw, 4.625rem); /* Figma: 74px */
  line-height: 1.1;
  letter-spacing: normal;
  color: #fff;
  text-align: center;
  max-width: 724px;
  margin-inline: auto;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 330px));
  justify-content: center;
  gap: 95px 40px;
  margin-top: clamp(3rem, 6vw, 5.5rem);
}
.team-member__photo {
  display: block;
  height: 302px;
  background: #2d2d2d;
  overflow: hidden;
}
.team-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchored to the top: these are tall portraits in a landscape well, so
     bottom-anchoring cropped the heads off. */
  object-position: center top;
}
.team-member h3 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: normal;
  color: #fff;
  margin-top: 27px;
  /* Two lines' worth, so a wrapped name ("Boris and Yelena Bogdanets")
     doesn't push its role out of line with the rest of the row. */
  min-height: calc(28px * 1.1 * 2);
}
.team-member p {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.1;
  color: #e8e8e8;
  margin-top: 16px;
}

/* --- Remaining sections brought onto the redesign system ---------------- */
/* Shared: serif display headings, Inter body, no gold. */
.section--nextgen,
.section--outreach,
.section--give,
.section--watch {
  padding-block: clamp(4rem, 8vw, 8.125rem);
}
.section--nextgen h2,
.section--outreach h2,
.section--give h2,
.section--watch h2 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.1rem + 4.4vw, 4.625rem); /* Figma: 74px */
  line-height: 1.1;
  letter-spacing: normal;
  margin-top: 24px;
}
.section--nextgen h3,
.section--outreach h3,
.section--give h3,
.section--watch h3 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
}
.section--nextgen p,
.section--outreach p,
.section--give p,
.section--watch p {
  font-family: var(--font-ui);
}
.rd-eyebrow--onDark { color: #f5f5f5; }

/* Next Gen — light band, panels become white cards. */
.section--nextgen { background: var(--rd-surface); }
.section--nextgen h2 { color: var(--rd-ink); }
.section--nextgen .section-head p {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--rd-body);
  margin-top: 24px;
}
.section--nextgen .panel {
  background: #fff;
  border: 0;
  border-radius: 16px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--rd-card-shadow);
  color: var(--rd-body);
}
.section--nextgen .panel__tag {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2.016px;
  line-height: 23.76px;
  text-transform: uppercase;
  color: var(--rd-blue);
  background: none;
}
.section--nextgen .panel h3 { font-size: 34px; color: var(--rd-ink); margin-top: 16px; }
.section--nextgen .panel p { font-size: 18px; line-height: 1.5; color: var(--rd-body); }
.section--nextgen .values li {
  background: var(--rd-surface);
  border: 0;
  border-radius: 10px;
}
.section--nextgen .values strong { font-family: var(--font-ui); color: var(--rd-ink); }
.section--nextgen .values span { font-family: var(--font-ui); color: var(--rd-body); }
.section--nextgen .panel__meta {
  font-family: var(--font-ui);
  color: var(--rd-ink);
  background: var(--rd-surface);
  border: 0;
}
.section--nextgen .link-arrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 20px;
  color: var(--rd-ink);
  background-image: none;
}

/* Outreach — dark band matching events/pastors. */
.section--outreach { background: #1c1c1c; color: #e8e8e8; }
.section--outreach h2 { color: #fff; }
.section--outreach h3 { color: #fff; font-size: 28px; margin-top: 16px; }
.section--outreach p { font-size: 18px; line-height: 1.6; color: #e8e8e8; margin-top: 20px; }
.section--outreach .pill-list li {
  background: #272727;
  border: 0;
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 500;
}
.section--outreach .outreach-callout {
  background: #272727;
  border: 0;
  border-radius: 16px;
  padding: 30px;
}

/* Giving — light band, dark feature card. */
.section--give { background: #fff; }
.section--give .give {
  background: #1b1b1b;
  border-radius: 16px;
  color: #e8e8e8;
  padding: clamp(2rem, 4.5vw, 4rem);
}
.section--give .give h2 { color: #fff; }
.section--give .give > p { font-size: 20px; line-height: 1.6; color: #e8e8e8; margin-top: 24px; }
.section--give .give__glow { display: none; }
.section--give .way {
  background: #272727;
  border: 0;
  border-radius: 12px;
  padding: 24px;
}
.section--give .way h3 { color: #fff; font-size: 24px; }
.section--give .way p { color: #e8e8e8; font-size: 16px; line-height: 1.6; margin-top: 8px; }

/* Watch — light band. */
.section--watch { background: var(--rd-surface); }
.section--watch h2 { color: var(--rd-ink); }
.section--watch p { font-size: 20px; line-height: 1.5; color: var(--rd-body); margin-top: 24px; }

/* Footer — darkest band, closing the page. */
.site-footer { background: #151515; color: #b9b9b9; }
.site-footer h2 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2.016px;
  text-transform: uppercase;
  color: #f5f5f5;
}
.site-footer a { color: #e8e8e8; }
.site-footer a:hover { color: #fff; }

/* Hero CTAs sized to match each other (Figma draws them at different widths). */
.hero--home .btn-row .btn {
  width: 210px;
  justify-content: center;
}

/* --- Header legibility over the hero photo ------------------------------ */
/* A top-down scrim so the nav stays readable when the headline scrolls
   under it. Sits behind the header's own content, above the hero. */
.site-header--hero:not(.is-past-hero)::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 200%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: -1;
}
.site-header--hero { position: sticky; isolation: isolate; }

/* Give: pill, matching the height of the other header controls (Figma 14:3669). */
.site-header--hero .btn--gold {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

/* Service-times bar: a soft cast below it, plus an inset along the top edge
   so the bar reads as sliding out from behind the hero photo. */
.hero__hours-inner {
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.45),
    inset 0 6px 12px -8px rgba(0, 0, 0, 0.5);
}

/* "What to expect" card rises in on scroll. Uses the existing .reveal
   observer, with a longer travel and a slight scale so it reads as a card
   settling into place rather than the generic section fade. */
.js-reveal .reveal--card {
  opacity: 0;
  transform: translateY(46px) scale(0.975);
  transition: opacity 0.85s var(--ease) 0.1s, transform 0.85s var(--ease) 0.1s;
  will-change: transform, opacity;
}
.js-reveal .reveal--card.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal--card { opacity: 1; transform: none; transition: none; }
}

/* --- Every button onto the redesign's raised pill ----------------------- */
.btn {
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: normal;
}

/* Solid dark action — the "Get directions" treatment. */
.btn--primary,
.section--watch .btn--primary {
  background: linear-gradient(180deg, #313131, #1b1b1b);
  border: 0;
  color: #fff;
  box-shadow: inset 0 -2px 4px rgba(99, 99, 99, 0.55);
  filter: drop-shadow(0 2px 2.5px rgba(27, 27, 27, 0.2))
    drop-shadow(0 10px 5px rgba(27, 27, 27, 0.12));
}
.btn--primary:hover { background: linear-gradient(180deg, #3a3a3a, #232323); color: #fff; }


/* Quiet outline — on dark surfaces it borrows white, on light it stays ink. */
.section--give .btn--ghost,
.btn--scrim {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  filter: none;
  box-shadow: none;
}
.section--give .btn--ghost:hover,
.btn--scrim:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

/* Hours bar: cast below only — the earlier inset sat on the top edge. */
.hero__hours-inner {
  box-shadow: 0 22px 45px -12px rgba(0, 0, 0, 0.55);
}

/* Give — the brand action, now blue rather than gold. */
.btn--gold,
.section--give .btn--gold {
  background: linear-gradient(180deg, #0a56e6, #034cd9);
  border: 0;
  color: #fff;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.28);
  filter: drop-shadow(0 2px 2.5px rgba(27, 27, 27, 0.2))
    drop-shadow(0 10px 5px rgba(27, 27, 27, 0.12));
}
.btn--gold:hover,
.section--give .btn--gold:hover {
  background: linear-gradient(180deg, #0b5cf5, #0442bd);
  color: #fff;
}
/* Over the hero photo the Give pill stays the translucent outline from Figma. */
.site-header--hero:not(.is-past-hero) .btn--gold {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(243, 243, 243, 0.1));
  border: 1px solid var(--rd-edge);
  color: #fff;
  box-shadow: none;
  filter: none;
}

/* Dark raised pills carry no edge — matching the mission CTAs. The 2px
   #f0f0f0 border stays only on the light "Visit us" pill, where Figma
   uses it to lift the button off the hero photo. */
.btn--raised-dark { border: 0; }

/* --- Outreach: light treatment ------------------------------------------ */
.section--outreach {
  background: #fff;
  color: var(--rd-body);
}
.section--outreach .rd-eyebrow,
.section--outreach .rd-eyebrow--onDark { color: var(--rd-blue); }
.section--outreach h2 { color: var(--rd-ink); }
.section--outreach h3 { color: var(--rd-ink); }
.section--outreach p { color: var(--rd-body); }
.section--outreach .pill-list li {
  background: var(--rd-surface);
  border: 1px solid #e4e4e4;
  color: var(--rd-ink);
}

/* Right-hand callout: white card, roomier than the flush 30px it had. */
.section--outreach .outreach-callout {
  background: #fff;
  border: 0;
  border-radius: 16px;
  box-shadow: var(--rd-card-shadow);
  padding: clamp(2rem, 3.4vw, 3rem);
}
.section--outreach .outreach-callout h3 {
  font-size: 28px;
  margin-top: 18px;
}
.section--outreach .outreach-callout p {
  font-size: 18px;
  line-height: 1.6;
  margin-top: 20px;
}
.section--outreach .outreach-callout .btn {
  margin-top: 32px;
}

/* Next Gen panel CTAs: dark pills like the rest, not underlined text links.
   (The old .link-arrow carried a gold rule beneath it.) */
.nextgen-cta {
  align-self: flex-start;
  margin-top: 28px;
  padding: 10px 22px;
  gap: 10px;
}
.nextgen-cta svg { width: 15px; height: 15px; }

/* Staggered rise for card rows — each card carries its own --d index so the
   three arrive in sequence rather than as one block. */
.js-reveal .reveal--rise {
  opacity: 0;
  transform: translateY(46px) scale(0.985);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--d, 0) * 130ms);
  will-change: transform, opacity;
}
.js-reveal .reveal--rise.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal--rise { opacity: 1; transform: none; transition: none; }
}

/* Event cards lift instead of sliding right (the pre-redesign rule used
   translateX). */
.event {
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.event:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
}

/* Roomier date chip — the three lines were crowding each other at 90px. */
.event__date {
  width: 104px;
  height: 104px;
}
.event__date::before { height: 26px; }
.event__date .d { top: 38px; }
.event__date .y { top: 84px; }

/* Watch: live embed fills the frame that used to hold the play placeholder. */
.watch__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #1b1b1b;
  box-shadow: var(--rd-card-shadow);
}
.watch__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Hero CTAs: a touch more type, and the arrow brought down to the 15px used
   by every other arrow on the page. */
.hero--home .btn-row .btn { font-size: 17px; }
.hero--home .btn-row .btn img[src*="arrow"] { width: 15px; height: 15px; }

/* Service-times bar — Figma node 14:3316.
   The bottom edge darkens via a gradient rather than a cast shadow, which is
   what sells the bar sliding out from behind the hero. Stops are taken
   verbatim from Figma (the 112.93% stop lands past the box, so the visible
   bottom colour resolves to roughly #e8e8e8). */
.hero__hours-inner {
  background: linear-gradient(179.67deg, #ffffff 80.189%, #dcdcdc 112.93%);
  box-shadow: none;
  padding: 25px 36px;
  border-radius: 12px 12px 0 0;
  gap: 36px;
  font-size: 16px;
  line-height: 23.76px;
  color: var(--rd-ink);
}
.hero__hours-inner span { gap: 6px; align-items: flex-start; }
.hero__hours-inner strong { font-weight: 600; }
.hero__hours-inner em { font-weight: 400; }

/* ==========================================================================
   18. Inner pages — same system as the homepage redesign
   ========================================================================== */
.page-hero {
  background: var(--rd-surface);
  padding-block: clamp(3.5rem, 8vw, 7.5rem) clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.page-hero .wrap { max-width: calc(860px + var(--gutter) * 2); }
.page-hero h1 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.1rem + 4.4vw, 4.625rem); /* Figma: 74px */
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--rd-ink);
  margin-top: 24px;
}
.page-hero p {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--rd-body);
  margin-top: 24px;
  max-width: 62ch;
  margin-inline: auto;
}

/* Content band. --band-dark flips it to the dark treatment. */
.band { padding-block: clamp(3.5rem, 7vw, 6.5rem); background: #fff; }
.band--tint { background: var(--rd-surface); }
.band--dark { background: #151515; color: #e8e8e8; }
.band--darker { background: #1c1c1c; color: #e8e8e8; }
.band--dark h2, .band--dark h3, .band--darker h2, .band--darker h3 { color: #fff; }
.band--dark .rd-eyebrow, .band--darker .rd-eyebrow { color: #81acff; }

.band h2 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--rd-ink);
  margin-top: 18px;
}
.band h3 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--rd-ink);
}
.band__head { max-width: 790px; }
.band__head--center { margin-inline: auto; text-align: center; }

/* Long-form copy */
.prose { max-width: 68ch; }
.prose p {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  color: var(--rd-body);
}
.prose p + p { margin-top: 1.25em; }
.prose--lead p { font-size: 20px; line-height: 1.6; }
.band--dark .prose p, .band--darker .prose p { color: #e8e8e8; }

/* Image placeholder — Ted drops real photography in later. */
.img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  background: var(--rd-surface);
  border: 1px dashed #c9c9c9;
  border-radius: 16px;
  aspect-ratio: 4 / 3;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.img-ph--wide { aspect-ratio: 16 / 9; }
.img-ph--portrait { aspect-ratio: 3 / 4; }
.band--dark .img-ph, .band--darker .img-ph {
  background: #272727;
  border-color: #3d3d3d;
  color: #9a9a9a;
}

/* --- Real photography ----------------------------------------------------
   Fills the slots the dashed .img-ph boxes used to hold. Nearly all of the
   supplied photos are portrait (1365x2048), so each frame sets its own focal
   point rather than trusting a centre crop — the subjects usually sit above
   the middle, and a default crop cuts heads off. */
.media-frame {
  aspect-ratio: var(--ratio, 4 / 3);
  border-radius: 16px;
  overflow: hidden;
  background: var(--rd-surface);
  margin: 0;
}
.media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, center);
}

/* Collage: portrait photos read best in a mixed grid where one image leads.
   Row height is fixed so the tiles line up despite differing crops. */
.collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 40px;
}
.collage figure { margin: 0; border-radius: 14px; overflow: hidden; background: var(--rd-surface); }
.collage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, center);
}
.collage__tall { grid-row: span 2; }
@media (min-width: 48em) {
  .collage {
    grid-template-columns: repeat(4, 1fr);
    /* Row height is what sets the collage's overall height — the tall tile
       spans two of these, so a change here scales the whole block. */
    grid-auto-rows: 210px;
    gap: 14px;
  }
  .collage__wide { grid-column: span 2; }
}
@media (max-width: 47.99em) {
  .collage { grid-auto-rows: 165px; }
}

/* Generic card grid used across the inner pages */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 48px;
}
.tile {
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: var(--rd-card-shadow);
}
.band--tint .tile { background: #fff; }
.band--dark .tile, .band--darker .tile { background: #272727; box-shadow: none; }
.tile h3 { font-size: 24px; }
.tile p {
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  color: var(--rd-body);
  margin-top: 12px;
}
.band--dark .tile p, .band--darker .tile p { color: #e8e8e8; }
.tile__label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2.016px;
  line-height: 23.76px;
  text-transform: uppercase;
  color: var(--rd-blue);
  display: block;
}

/* Two-column split for text + image */
.split-2 {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 62em) {
  .split-2 { grid-template-columns: 1fr 1fr; }
  .split-2--wide-text { grid-template-columns: 1.2fr 1fr; }
}

/* Scripture reference */
.verse {
  display: block;
  margin-top: 12px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--rd-blue);
}
.band--dark .verse, .band--darker .verse { color: #81acff; }

/* Definition-style rows (service times, ways to give) */
.rowlist { margin-top: 40px; max-width: 620px; }
.rowlist li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
  border-bottom: 1px dashed var(--rd-rule);
  list-style: none;
}
.rowlist li:last-child { border-bottom: 0; }
.rowlist .k {
  font-family: var(--font-tag);
  font-weight: 600;
  font-size: 18px;
  color: var(--rd-ink);
}
.rowlist .v {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--rd-body);
  text-align: right;
}
.band--dark .rowlist li, .band--darker .rowlist li { border-color: rgba(255,255,255,.18); }
.band--dark .rowlist .k, .band--darker .rowlist .k { color: #fff; }
.band--dark .rowlist .v, .band--darker .rowlist .v { color: #e8e8e8; }

.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

/* Shared header/footer onto the redesign ink (was still the old navy). */
.nav-link { color: var(--rd-ink); font-family: var(--font-display); }
.nav-link:hover { background: rgba(27, 27, 27, 0.06); color: var(--rd-ink); }
.dropdown a { color: var(--rd-body); }
.dropdown a:hover { color: var(--rd-ink); }
.brand-text strong { color: var(--rd-ink); }
.brand-text span { color: var(--rd-muted); }
.btn--ghost {
  border-color: #d8d8d8;
  color: var(--rd-ink);
  background: #fff;
}
.btn--ghost:hover { background: var(--rd-surface); border-color: #c2c2c2; color: var(--rd-ink); }
.m-trigger, .m-toplink, .m-panel a { color: var(--rd-ink); font-family: var(--font-display); }

/* Hero headline at Medium rather than Bold — lighter strokes at 100px. */
/* Figma drew this Medium; 600 is Libertinus’s nearest real weight. */
.hero--home h1 { font-weight: 600; }

/* --- Dark-band text colours, at winning specificity ---------------------
   The generic `.band h2 { color: var(--rd-ink) }` rule is declared after the
   `.band--dark h2` override and matches at the same specificity, so it was
   winning and painting dark ink on the dark bands. These use two classes so
   they take precedence regardless of source order. */
.band.band--dark h2,
.band.band--dark h3,
.band.band--darker h2,
.band.band--darker h3 {
  color: #fff;
}
.band.band--dark p,
.band.band--darker p,
.band.band--dark .prose p,
.band.band--darker .prose p {
  color: #e8e8e8;
}
.band.band--dark .rd-eyebrow,
.band.band--darker .rd-eyebrow {
  color: #81acff;
}
.band.band--dark .tile,
.band.band--darker .tile {
  background: #272727;
  box-shadow: none;
}
.band.band--dark .tile h3,
.band.band--darker .tile h3 { color: #fff; }
.band.band--dark .tile p,
.band.band--darker .tile p { color: #e8e8e8; }
.band.band--dark .tile__label,
.band.band--darker .tile__label,
.band.band--dark .verse,
.band.band--darker .verse { color: #81acff; }

/* --- Serving team cards (Figma node 28:4) --------------------------------
   Photo on top, title and copy beneath. Figma draws the photo through a mask,
   but the mask turns out to be a plain 404×196 rectangle, so the card's own
   radius plus overflow:hidden reproduces it exactly — no mask image needed.

   Figma specifies Lora for the titles; the site's display serif is used
   instead so these match every other heading on the site.

   Every source photo is portrait cropped into a 2.06:1 band, which is a hard
   crop, so each card sets its own --focus. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  margin-top: 48px;
}
.team-card {
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03), 0 16px 32px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}
.team-card__media {
  aspect-ratio: 404 / 196;
  overflow: hidden;
  background: var(--rd-surface);
}
.team-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, center);
}
.team-card__body { padding: 20px 36px 36px; }
.team-card h3 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: normal;
  color: #1f2124;
}
.team-card p {
  margin-top: 12px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #53585f;
}
@media (max-width: 47.99em) {
  .team-grid { gap: 20px; margin-top: 36px; }
  .team-card__body { padding: 18px 24px 28px; }
  .team-card h3 { font-size: 26px; }
}

/* Statement-of-faith tiles are single lines rather than paragraphs, so they
   read better centred than ranged left. */
.tile-grid--center .tile { text-align: center; }
/* The verse trigger is a 38px pill with its icon, so .verse's 12px margin
   reads much larger than it measures — most of the gap is the pill's own
   height. Symmetric padding also keeps the pill optically centred; the base
   rule pads only the right. */
.tile-grid--center .verse { margin-top: 2px; }
.tile-grid--center .verse[data-verse-trigger] { padding-inline: 10px; }

/* Exactly-four grids read better as a true 2×2 than as auto-fit, which
   breaks them 3 + 1 at desktop widths. */
.tile-grid--2x2 {
  grid-template-columns: 1fr;
  max-width: 900px;
  margin-inline: auto;
}
@media (min-width: 48em) {
  .tile-grid--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Nav icons ship from Figma with stroke="white" (drawn for the dark hero
   header), so on a light header they were white-on-white. Invert them dark
   by default and leave them untouched only while the header is on the hero. */
.nav-link img { filter: invert(1); }
.site-header--hero:not(.is-past-hero) .nav-link img { filter: none; }

/* Link underlines were still gold from the old palette. */
a { text-decoration-color: var(--rd-blue); }
.site-footer a,
.band--dark a,
.band--darker a,
.section--events a,
.section--pastors a,
.section--team a { text-decoration-color: #81acff; }

/* Split hero — copy on the left, the giving form alongside it. Used on the
   give page so the form is the first thing on screen. */
.page-hero--split { text-align: left; }
.page-hero--split .wrap { max-width: calc(1180px + var(--gutter) * 2); }
.hero-split {
  display: grid;
  /* 540px is the floor: below roughly 520px Tithely's frequency pills
     (One Time … Monthly) overflow the frame instead of wrapping. */
  grid-template-columns: minmax(0, 1fr) minmax(540px, 580px);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.page-hero--split p { margin-inline: 0; }
/* The form column is far taller than the copy, so the copy rides along with
   it instead of stranding a column of whitespace. */
.hero-split__copy { position: sticky; top: calc(var(--header-h, 73px) + 32px); }

@media (max-width: 1080px) {
  .hero-split { grid-template-columns: minmax(0, 1fr); }
  .hero-split__copy { position: static; }
  .hero-split__form { max-width: 580px; }
}

/* Slot for the Tithely giving form. The frame can't report its own height to
   us across origins, so the height is fixed generously enough that the form
   never scrolls inside itself — it grows when a payment method is added. */
.tithely-embed { margin-top: 32px; }
.tithely-embed__frame {
  display: block;
  width: 100%;
  /* The column is capped at 580px on desktop and runs full-bleed on a phone —
     both stay below Tithely's own breakpoint, so the name/email/phone fields
     always stack. This is the card-entry height;
     main.js swaps in the shorter one when it detects a payment wallet, since
     Apple Pay / Google Pay collapse those fields into a single button. */
  height: 1140px;
  border: 0;
  border-radius: 16px;
  background: var(--rd-surface);
}
.has-payment-wallet .tithely-embed__frame { height: 800px; }
/* .page-hero p sets 20px and outranks a lone class, so this has to match its
   specificity to stay the quiet footnote it is meant to be. */
.tithely-embed .tithely-embed__fallback {
  margin-top: 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: #6b6b6b;
}

@media (max-width: 47.99em) {
  /* The form is cross-origin, so its internals cannot be restyled — the only
     lever we have is how much width we hand it. Both placements let it run to
     the viewport edge on a phone. The fallback line is padded back in so it
     still lines up with the rest of the copy. */
  .hero-split__form { margin-inline: calc(var(--gutter) * -1); }
  .hero-split__form .tithely-embed__frame { border-radius: 0; }
  .hero-split__form .tithely-embed__fallback { padding-inline: var(--gutter); }

  /* The homepage placement breaks out of the giving card entirely — see the
     .give--form .give__form rule further down, which has to sit after
     `.give__form { margin-inline: auto }` to win. */
  .give__form .tithely-embed__frame { border-radius: 0; }

  /* Height on a phone is deliberately generous, and that matters more here
     than the dead space it can leave. Tithely's own <main> is `h-screen;
     overflow-y: auto`, so it takes exactly the height we hand the iframe and
     scrolls inside itself the moment its content is taller — and an inner
     scroller under a thumb swallows the page scroll. Measured content at
     375px wide is ~880px plus ~90px for the "Giving App" banner; real iOS
     Safari renders taller than that, so these carry a few hundred px of
     headroom. If the form ever leaves too much empty grey below the Give
     button, trim these two numbers — do not trim them to a snug fit.
     Re-checked 2026-08-22: the frame still posts no resize message (only
     Pendo analytics), so the height cannot be driven from the content. */
  .tithely-embed__frame { height: 1400px; }
  .has-payment-wallet .tithely-embed__frame { height: 1050px; }
}

/* --- Scripture popover --------------------------------------------------
   References reveal their verse on hover (desktop) or tap (touch). The
   popover is a single shared element moved around the page rather than one
   node per reference. */
.verse[data-verse-trigger],
.ref[data-verse-trigger] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  height: 38px;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0 10px 0 0;
  font: inherit;
  color: #1b5bd3;
  vertical-align: middle;
  transition: color 0.18s var(--ease), background 0.18s var(--ease),
    transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.verse[data-verse-trigger]:hover,
.verse[data-verse-trigger]:focus-visible,
.ref[data-verse-trigger]:hover,
.ref[data-verse-trigger]:focus-visible {
  color: #1046a8;
  background: rgba(27, 91, 211, 0.15);
  box-shadow: 0 5px 16px rgba(27, 91, 211, 0.16);
  transform: translateY(-1px);
  outline: none;
}
.verse[data-verse-trigger]:focus-visible,
.ref[data-verse-trigger]:focus-visible {
  box-shadow: 0 0 0 3px rgba(27, 91, 211, 0.22),
    0 5px 16px rgba(27, 91, 211, 0.16);
}
.verse-trigger__icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  overflow: visible;
  border-radius: 50%;
  background: rgba(27, 91, 211, 0.08);
}
.verse-trigger__icon img {
  display: block;
  width: 20px;
  height: 20px;
}
.verse-trigger__reference {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.verse-pop-backdrop {
  position: fixed;
  inset: 0;
  z-index: 299;
  background: rgba(7, 13, 24, 0.46);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), visibility 0s linear 0.2s;
}
.verse-pop-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.verse-pop {
  position: absolute;
  z-index: 300;
  max-width: min(360px, calc(100vw - 2rem));
  padding: 18px 20px;
  border-radius: 14px;
  background: #1b1b1b;
  color: #f2f2f2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18), 0 18px 40px -12px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease),
    visibility 0s linear 0.18s;
  pointer-events: none;
}
.verse-pop.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
  pointer-events: auto;
}
.verse-pop__close {
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font: 400 24px/1 var(--font-ui);
  cursor: pointer;
  transition: background 0.16s var(--ease), transform 0.16s var(--ease);
}
.verse-pop__close:hover,
.verse-pop__close:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.06);
  outline: 2px solid rgba(129, 172, 255, 0.7);
  outline-offset: 2px;
}
.verse-pop.is-modal {
  position: fixed;
  left: 50% !important;
  top: 50% !important;
  width: min(420px, calc(100vw - 2rem));
  max-width: none;
  max-height: min(76vh, 680px);
  overflow-y: auto;
  padding: 22px 24px;
  transform: translate(-50%, calc(-50% + 8px));
}
.verse-pop.is-open.is-modal {
  transform: translate(-50%, -50%);
}
.verse-pop__ref {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #81acff;
  margin-bottom: 8px;
}
.verse-pop__text {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: #f2f2f2;
}
.verse-pop__version {
  display: block;
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9a9a9a;
}
@media (prefers-reduced-motion: reduce) {
  .verse-pop,
  .verse-pop-backdrop,
  .verse[data-verse-trigger],
  .ref[data-verse-trigger] { transition: none; }
  .verse-trigger__icon { animation: none !important; }
}

@keyframes verse-bible-nudge {
  0%, 84%, 100% { transform: rotate(0) translateY(0); }
  87% { transform: rotate(-5deg) translateY(-1px); }
  90% { transform: rotate(4deg) translateY(0); }
  93% { transform: rotate(-2deg) translateY(-1px); }
  96% { transform: rotate(0) translateY(0); }
}

@media (hover: none), (pointer: coarse) {
  .verse-trigger__icon {
    animation: verse-bible-nudge 4.8s ease-in-out infinite;
    transform-origin: 50% 75%;
  }
}

/* --- Giving card: light treatment, centred ------------------------------ */
.section--give { background: var(--rd-surface); }
.section--give .give {
  background: #fff;
  color: var(--rd-body);
  border-radius: 16px;
  box-shadow: var(--rd-card-shadow);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
  max-width: 1060px;
  margin-inline: auto;
}
.section--give .give h2 {
  color: var(--rd-ink);
  margin-inline: auto;
  max-width: 20ch;
}
.section--give .give .rd-eyebrow { color: var(--rd-blue); }
.section--give .give > p {
  color: var(--rd-body);
  margin-inline: auto;
  max-width: 56ch;
}
.section--give .give .btn-row { justify-content: center; }
.section--give .way {
  background: var(--rd-surface);
  border: 1px solid #ececec;
  text-align: left;
}
.section--give .way h3 { color: var(--rd-ink); }
.section--give .way p { color: var(--rd-body); }
/* --- Giving card with the form embedded ---------------------------------
   The form is the point of the section, so the heading steps down out of its
   way and the offline options and link sit under it as a quieter footnote. */
/* Scoped to .section--give because `.section--give .give h2` sets max-width:
   20ch and would otherwise outrank a lone class here and force three lines. */
.section--give .give--form h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.875rem);
  /* Sized to break the line after "can do" — wide enough for two lines, tight
     enough that it never runs to one. */
  max-width: 34rem;
}
.section--give .give--form > p { font-size: 18px; max-width: 52ch; }
.give__form { max-width: 580px; margin-inline: auto; }
.give--form .ways { margin-top: 40px; }
.ways--compact { max-width: 760px; margin-inline: auto; }
@media (min-width: 48em) {
  .ways--compact { grid-template-columns: repeat(2, 1fr); }
}
.section--give .ways--compact .way h3 { font-size: 19px; }
.section--give .ways--compact .way p { font-size: 15px; margin-top: 6px; }
.give--form .btn-row { margin-top: 28px; }

/* The quiet outline button was tuned for the dark card. */
.section--give .btn--ghost {
  background: #fff;
  border: 1px solid #d8d8d8;
  color: var(--rd-ink);
}
.section--give .btn--ghost:hover {
  background: var(--rd-surface);
  border-color: #c2c2c2;
  color: var(--rd-ink);
}

/* Open-dropdown state over the hero.
   `.nav-item.is-open > .nav-link` still carried the old light --navy-050
   pill, while the hero rule forces the label white — light chip, white text,
   unreadable. Give the open state the same translucent treatment as hover. */
.site-header--hero:not(.is-past-hero) .nav-item.is-open > .nav-link {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
/* On light headers, bring the open state onto the redesign ink. */
.nav-item.is-open > .nav-link {
  background: rgba(27, 27, 27, 0.06);
  color: var(--rd-ink);
}

/* Hero stack was a touch airy — tighten the gaps between eyebrow, headline,
   lede and buttons. */
.hero--home .hero__inner { gap: 30px; }

/* "Get directions" reads cramped now the pin icon is gone — widen it. */
.visit__main .btn--raised-dark,
.section--visit .btn--raised-dark {
  padding-inline: 34px;
}

/* Each verse on its own line, with its number, so a multi-verse reference
   doesn't read as a single run-on quotation. */
.verse-pop__line {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: #f2f2f2;
}
.verse-pop__line + .verse-pop__line { margin-top: 10px; }
.verse-pop__num {
  display: inline-block;
  margin-right: 8px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #81acff;
  vertical-align: 1px;
}

/* --- Language switcher -------------------------------------------------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: rgba(27, 27, 27, 0.06);
}
.lang-switch button {
  border: 0;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rd-muted);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.lang-switch button:hover { color: var(--rd-ink); }
.lang-switch button.is-active {
  background: #fff;
  color: var(--rd-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
/* Over the hero photo it inverts, like the rest of the header. */
.site-header--hero:not(.is-past-hero) .lang-switch {
  background: rgba(255, 255, 255, 0.16);
}
.site-header--hero:not(.is-past-hero) .lang-switch button { color: rgba(255, 255, 255, 0.75); }
.site-header--hero:not(.is-past-hero) .lang-switch button:hover { color: #fff; }
.site-header--hero:not(.is-past-hero) .lang-switch button.is-active {
  background: rgba(255, 255, 255, 0.92);
  color: var(--rd-ink);
}
.lang-switch--mobile { margin-top: 12px; align-self: flex-start; }

/* Address block: the two lines were sitting too far apart. */
.visit__address-row strong { line-height: 1.25; }
.visit__address-row span span { display: block; margin-top: 2px; }

/* Header spans wider than the 1200px content wrap — with the language
   switcher added, the nav had too little room and read cramped in the middle
   of wide screens. Applies to both header states (over-hero and solid). */
.site-header > .wrap {
  max-width: calc(1560px + var(--gutter) * 2);
}

/* "Ways to give" — drop the outline; the raised lift alone defines it,
   matching the light pill in the hero. */
.section--give .btn--ghost,
.section--give .btn--ghost:hover {
  border: 0;
  background: linear-gradient(180deg, #fff, #f3f3f3);
  color: var(--rd-ink);
  box-shadow: inset 0 -2px 4px rgba(99, 99, 99, 0.3);
  filter: drop-shadow(0 2px 2.5px rgba(27, 27, 27, 0.16))
    drop-shadow(0 8px 5px rgba(27, 27, 27, 0.1));
}
.section--give .btn--ghost:hover { background: linear-gradient(180deg, #fff, #ececec); }


/* Step cards: keep the internals on a shared baseline whatever the title
   length. Ukrainian wraps "Служіть разом із нами" to two lines while its
   neighbours stay on one, which knocked the body copy and links out of line. */
.step-card__body {
  flex: 1;
  justify-content: flex-start;
}
.step-card h3 {
  /* two lines' worth, so body copy starts at the same height in every card */
  min-height: calc(34px * 1.1 * 2);
}
.step-card__link {
  margin-top: auto;
  align-self: flex-start;
}

/* Give the player more of the row — 1.15fr left it smaller than the copy
   block deserved, and the service video is the point of this section. */
@media (min-width: 52em) {
  /* .social-row is a direct child of .watch so that on a phone the source
     order is already copy → video → socials. On desktop it is placed back
     under the copy column explicitly, with the video spanning both rows, so
     the two-column layout is unchanged. It could not simply be reordered
     from inside the copy column: `display: contents` would have removed that
     column's box, and .reveal starts at opacity 0 and needs a box for the
     IntersectionObserver to ever un-hide it. */
  .watch {
    grid-template-columns: 1fr 1.55fr;
    align-items: start;
    row-gap: var(--space-m);
  }
  .watch__copy { grid-column: 1; grid-row: 1; }
  .watch__frame { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .watch > .social-row { grid-column: 1; grid-row: 2; margin-top: 0; }
}
/* And let the whole band run wider than the 1200px text measure. */
.section--watch > .wrap {
  max-width: calc(1400px + var(--gutter) * 2);
}

/* Footer now carries four columns: brand, visit, about, get involved. */
@media (min-width: 48em) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* Footer link hover: light blue, not the retired gold. */
.footer-links a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: #81acff;
  text-underline-offset: 4px;
}

/* Location page: real photo replaces the placeholder, sized a little larger
   than the box it sat in. */
.visit-photo {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--rd-card-shadow);
}
.visit-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}
@media (min-width: 62em) {
  /* give the image a touch more of the row than the copy */
  .band .split-2:has(.visit-photo) { grid-template-columns: 1fr 1.15fr; }
}

/* The schedule list kept the browser's default <ul> indent, so the rows sat
   inset from the heading and address above them. */
.rowlist {
  padding-left: 0;
  margin-left: 0;
  list-style: none;
}

/* The pastors intro was capped at 608px, which broke a short headline onto
   three lines with room to spare either side. */
.section--pastors .section-head { max-width: 940px; }

/* --- Founders (dark band, mirrored from the pastors layout) -------------- */
.section--founders {
  background: #151515;
  color: #e8e8e8;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}
.section--founders > .wrap { max-width: calc(1325px + var(--gutter) * 2); }
.section--founders .section-head { max-width: 940px; margin-inline: auto; text-align: center; }
.section--founders .rd-eyebrow { color: #81acff; }
.section--founders h2 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.1rem + 4.4vw, 4.625rem);
  line-height: 1.1;
  letter-spacing: normal;
  color: #fff;
  margin-top: 24px;
}
.founders {
  display: grid;
  gap: clamp(2.5rem, 5vw, 82px);
  align-items: center;
  margin-top: clamp(3rem, 6vw, 5rem);
}
/* The founders photo was removed (2026-08-22), so this is a single centred
   column of copy rather than the copy/photo split it used to be. */
.founders__body { max-width: 72ch; margin-inline: auto; }
.founders__body h3 {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: normal;
  color: #fff;
}
.founders__body p {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  color: #e8e8e8;
  margin-top: 24px;
}

/* Location photo a little taller — 16:10 left it shallow next to the
   schedule column. */
.visit-photo img { aspect-ratio: 4 / 3; }

/* --- Scripture trigger: icon and reference on one line, no underline -----
   The homepage `.ref` was still display:block from the old belief-card rule,
   which stacked the icon above the text. Both variants now share the same
   inline row, and the whole unit is the hover target. */
.ref[data-verse-trigger],
.verse[data-verse-trigger] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  text-decoration: none;
  border-radius: var(--radius-pill);
  padding: 4px 10px 4px 4px;
  margin-left: -4px;
  transition: background-color 0.18s var(--ease);
}
.verse-trigger__reference {
  text-decoration: none;
}
/* Affordance now comes from the whole chip lifting, not an underline. */
.ref[data-verse-trigger]:hover,
.verse[data-verse-trigger]:hover,
.ref[data-verse-trigger]:focus-visible,
.verse[data-verse-trigger]:focus-visible {
  background: rgba(3, 76, 217, 0.08);
  text-decoration: none;
}
.band--dark .verse[data-verse-trigger]:hover,
.band--darker .verse[data-verse-trigger]:hover,
.section--events .verse[data-verse-trigger]:hover {
  background: rgba(129, 172, 255, 0.14);
}
.verse-trigger__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
}

/* `.section--mission .belief .ref` (0,3,0) outranked the trigger rule above,
   so the chip kept display:block and lost its gap/padding. Match it. */
.section--mission .belief .ref[data-verse-trigger],
.band .tile .ref[data-verse-trigger],
.band .tile .verse[data-verse-trigger] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

/* Footer legal line: neutral grey, not the old navy-tinted blue. */
.footer-bottom,
.footer-bottom span {
  color: #8f8f8f;
}

/* Leadership page portraits — real photos in place of the placeholders. */
.leader-photo {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--rd-card-shadow);
}
.leader-photo img {
  width: 100%;
  aspect-ratio: 1190 / 792;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  filter: grayscale(1);
}

/* The founders block on the leadership page lost its photo (2026-08-22) and
   is now a single centred measure, not a split. */
.founders-copy { max-width: 72ch; margin-inline: auto; }

/* Leadership page: portrait crop so the photos fill the column height next
   to their bios. Cropped from the 3:2 originals, biased slightly high so
   faces stay well inside the frame. */
.leader-photo img {
  aspect-ratio: 4 / 5;
  object-position: center 30%;
}

/* Leadership page team portraits. The renamed sources are already ~4:5, so
   a 4:5 frame with a centred position crops almost nothing and keeps each
   person centred rather than drifting to one side. */
.member-photo {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #2d2d2d;
}
.member-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: grayscale(1);
}
.leader-photo img {
  object-position: center center;
}

/* Homepage team wells are landscape while the leadership portraits are 4:5,
   so bias the crop high — centring vertically would cut heads off. */
.team-member__photo img { object-position: center 20%; filter: grayscale(1); }

/* ==========================================================================
   19. Mobile refinements

   Everything above was drawn from the desktop Figma frames and scaled down
   with clamps. This section is the pass in the other direction: what the
   page actually needs on a phone. Kept in one block, and gated behind
   max-width queries or touch-only queries, so nothing here can reach the
   desktop layout the design was signed off on.
   ========================================================================== */

/* --- Global touch behaviour -------------------------------------------- */
html {
  /* Grey flash on every tap reads as a rendering glitch on a site this
     quiet; the :active states below give the feedback instead. */
  -webkit-tap-highlight-color: transparent;
}

/* Landscape on a notched phone puts the safe area inside the gutter. */
.wrap {
  padding-inline: max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right));
}

/* Hover lifts stay pressed after a tap on touch devices — the finger leaves,
   the hover state does not. Give touch a press-down instead. */
@media (hover: none) {
  .btn:hover,
  .social:hover,
  a.card:hover,
  .step-card:hover {
    transform: none;
  }
  .btn:active {
    transform: scale(0.97);
  }
  .step-card:active,
  a.card:active {
    transform: scale(0.99);
  }
  .m-trigger:active,
  .m-toplink:active,
  .nav-toggle:active {
    opacity: 0.6;
  }
}

/* --- Header ------------------------------------------------------------- */
/* The hamburger bars are forced white while the header sits on the hero
   photo, but the button kept its solid white fill — three white bars on a
   white pill, i.e. an empty circle where the only navigation on mobile
   should be. Give the button the same translucent treatment as the rest of
   the over-hero header. */
.site-header--hero:not(.is-past-hero) .nav-toggle {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* The wordmark was hidden below 30em, which took it off every phone. It
   fits comfortably from 360px up — only the smallest handsets need the
   mark on its own. */
@media (min-width: 22.5em) {
  .brand-text {
    display: block;
  }
}
@media (max-width: 29.99em) {
  .brand-text strong {
    font-size: 1rem;
  }
  .brand-text span {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }
}

/* Sticky header slides away as you read down and comes straight back on any
   upward scroll. On a phone the bar is 73px of a ~650px viewport, and over
   the dark bands it reads as a light stripe across the design. */
@media (max-width: 62.4375em) {
  .site-header {
    transition: transform 0.28s var(--ease), border-color 0.25s var(--ease),
      background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  }
  .site-header.is-hidden {
    transform: translateY(-100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
  .site-header.is-hidden {
    transform: none;
  }
}

/* --- Mobile drawer ------------------------------------------------------ */
.mobile-nav {
  /* 4.5rem was the header height as a constant; main.js keeps this in step
     with what the header actually measures. */
  inset: var(--header-h, 4.5rem) 0 0 0;
  padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
}

/* The switcher is a grid item inside .mobile-cta, so align-self did nothing
   and it stretched into a full-width pill. */
.lang-switch--mobile {
  justify-self: start;
  width: fit-content;
}

/* --- Hero --------------------------------------------------------------- */
@media (max-width: 47.99em) {
  /* A flat 911px pushed the service-times bar below the fold on every phone.
     Filling the small viewport instead lands it exactly on the bottom edge,
     which is where the design puts it. */
  .hero--home {
    min-height: min(911px, 100svh);
  }
  .hero--home .hero__inner {
    gap: 22px;
  }
  .hero--home .btn-row {
    gap: 14px;
  }
  .hero--home .hero__lede {
    font-size: 17px;
  }
  .hero__hours-inner {
    gap: 4px 22px;
    padding: 18px 22px;
    font-size: 15px;
    line-height: 1.5;
  }
}

/* --- Cards: desktop padding, phone measure ------------------------------ */
/* These paddings are lifted straight from Figma at desktop widths. Left at
   full size on a 375px screen they eat a third of the line, and the copy
   inside wraps every four or five words. */
@media (max-width: 47.99em) {
  .visit__aside {
    padding: 32px 24px 36px;
  }
  .visit__aside p {
    font-size: 17px;
    margin-top: 16px;
  }
  .visit__address-block {
    margin-top: 34px;
  }
  .visit__address-row {
    gap: 16px;
  }
  .visit__address-row img {
    width: 28px;
  }
  .visit__address-row strong {
    font-size: 20px;
  }
  .schedule {
    margin-top: 28px;
  }

  .section--mission .belief {
    padding: 22px 20px;
  }
  /* Sized to hold "In non-essential beliefs" on one line at the card's
     desktop width; at 320px that line is 47px wider than the card. */
  .section--mission .belief h3 {
    white-space: normal;
  }
  .section--mission .beliefs {
    gap: 16px;
    margin-top: 44px;
  }
  .section--mission .btn-row .btn {
    width: 100%;
    max-width: none;
  }

  .tile {
    padding: 24px 20px;
  }
  .event {
    padding: 22px 20px;
    gap: 18px;
  }
  /* On a phone the giving card is dropped altogether: the Tithely form runs
     full-bleed (it is dense and cross-origin, so every pixel of width keeps
     its fields from cramping), and a card behind it only reads as two cut
     edges either side of the form. The section goes white so the copy keeps
     the card's ground, and the form's own grey block separates itself. */
  .section--give { background: #fff; }
  .section--give .give {
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    padding: 30px 0 34px;
  }
  .give--form .give__form {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
  }
  .section--give .give > p {
    font-size: 17px;
  }
  .section--give .way {
    padding: 20px 18px;
  }
  .section--nextgen .panel {
    padding: 24px 20px;
  }
  .section--outreach .outreach-callout {
    padding: 24px 20px;
  }
}

/* Two chips per row leaves ~140px for "Because God did His best for us". */
@media (max-width: 26em) {
  .values {
    grid-template-columns: 1fr;
  }
}

/* --- Vertical rhythm ---------------------------------------------------- */
/* Both of these min-heights exist to hold a row of cards on a shared
   baseline. In a single column there is no row to align to, so all they do
   is open a gap under every one-line heading.

   The step cards drop the reservation at every width: .step-card is a fixed
   402px regardless of viewport, so all three headings are one line always and
   the two-line reservation only ever opened ~37px of dead space. If a longer
   heading is ever added here and wraps, restore the min-height below — the
   card links stay aligned either way, via .step-card__link's margin-top:auto. */
.step-card h3 {
  min-height: 0;
}
.team-member h3 {
  min-height: 0;
}
@media (min-width: 36em) {
  .team-member h3 {
    min-height: calc(28px * 1.1 * 2);
  }
}

@media (max-width: 47.99em) {
  .step-card {
    gap: 22px;
    padding-bottom: 26px;
  }
  .step-card__media {
    height: 190px;
  }
  .step-card__body {
    gap: 18px;
    padding-inline: 22px;
  }
  .step-card h3 {
    font-size: 28px;
  }
  .step-card p {
    font-size: 17px;
    margin-top: 14px;
  }
  .step-grid {
    gap: 26px;
    margin-top: 44px;
  }

  /* Nine portraits at 302px with a 95px gutter between them made this the
     tallest section on the page by some margin. */
  .team-grid {
    gap: 44px 20px;
    margin-top: 40px;
  }
  .team-member__photo {
    height: clamp(210px, 58vw, 302px);
  }
  .team-member h3 {
    font-size: 24px;
    margin-top: 18px;
  }
  .team-member p {
    font-size: 16px;
    margin-top: 10px;
  }
}

/* --- Decorative layers -------------------------------------------------- */
/* Both watermarks are drawn with preserveAspectRatio="none" and stretched to
   the box, so the box has to keep the artwork's own ratio or the letterforms
   distort and bleed past the section. The vw terms already do that — it was
   the clamp minimums (80px and 88px) that took over on phones. */
.section--pastors::after {
  height: clamp(3rem, 14vw, 16.8rem);
}
.section--mission::before {
  height: clamp(3.4rem, 15.2vw, 18.3rem);
}
/* `bottom: -3%` is 3% of the section height — a modest crop under a 200px
   band on desktop, but nearly all of a 52px one on a phone, which left the
   wordmark as a sliver of letter-tops. */
@media (max-width: 47.99em) {
  .section--pastors::after {
    bottom: -4px;
  }
}

/* `.pastors__photo img` (0,2,1) was beating `.pastors__signature` (0,1,0),
   so the signature took width:100% and was only held back by its 260px cap —
   fine next to a 595px portrait, three-quarters of the width of a phone. */
.pastors__photo .pastors__signature {
  width: 46%;
  max-width: 260px;
}
@media (max-width: 47.99em) {
  .pastors__photo .pastors__signature {
    left: 2%;
    width: 52%;
    max-width: 190px;
    bottom: -5%;
  }
}

/* Backdrop photography sits under body copy on a phone, where there is no
   empty column for it to fall into. */
@media (max-width: 47.99em) {
  .section--visit::after {
    opacity: 0.13;
  }
}

/* --- Reading order ------------------------------------------------------ */
/* Where a split section is authored image-first, the single column puts the
   photo above the heading it belongs to. Text first on a phone. */
@media (max-width: 61.99em) {
  .split-2 > .leader-photo:first-child,
  .split-2 > .visit-photo:first-child,
  .split-2 > .member-photo:first-child,
  .split-2 > .img-ph:first-child {
    order: 2;
  }
}

/* --- Inner pages -------------------------------------------------------- */
@media (max-width: 47.99em) {
  .page-hero p {
    font-size: 18px;
  }
  .prose p {
    font-size: 17px;
  }
  .prose--lead p {
    font-size: 18px;
  }
  .band h3 {
    font-size: 25px;
  }
  .tile h3 {
    font-size: 22px;
  }
  .tile-grid {
    gap: 20px;
    margin-top: 36px;
  }
  .rowlist {
    margin-top: 30px;
  }
  /* Long service labels and their times were colliding at the 24px desktop
     gap; stack them instead of squeezing both onto one line. */
  .rowlist li {
    gap: 6px 16px;
    flex-wrap: wrap;
  }
  .rowlist .v {
    text-align: left;
  }
  /* --- Buttons: full width, stacked ------------------------------------
     Every action becomes the same thumb-sized target rather than a row of
     differently-sized pills. .btn is inline-flex with justify-content:center
     already, so widening it centres the label for free. The header actions
     are display:none below 62.5em and the drawer CTAs are already a grid, so
     neither needs excluding here. */
  .btn-row,
  .cta-row,
  /* .give .btn-row carries a fixed 28rem from the old desktop card — wider
     than a phone. Named here so the 100% below outranks it. */
  .give .btn-row {
    flex-direction: column;
    align-items: stretch;
    /* The hero centres its children, which shrink-wraps the row — without
       this the buttons stretch only to the width of the longest label. */
    width: 100%;
  }
  main .btn,
  .btn-row .btn,
  .cta-row .btn,
  /* These two hard-code desktop widths (210px / 230px) at three-class
     specificity, so each has to be named explicitly to lose here. */
  .hero--home .btn-row .btn,
  .section--mission .btn-row .btn {
    width: 100%;
    max-width: none;
  }

  /* --- Watch: centred, with the video above the social links -----------
     The source order is already copy → video → socials (the desktop grid
     puts the socials back under the copy column), so stacking needs no
     reordering here — only centring. */
  .watch { text-align: center; }
  .watch .social-row { justify-content: center; }

  /* --- Next Gen cards: centred, pill matching the button ---------------
     The schedule pill is inline-flex and shrink-wraps to its label on
     desktop; here it stretches to the same width as the CTA below it, so
     the card reads as one centred column. */
  .section--nextgen .panel__body { text-align: center; }
  .section--nextgen .panel__meta {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* --- Outreach: country pills on one line, callout centred ------------
     Four pills share the row equally instead of wrapping 3+1. The font
     clamp is what keeps "Guatemala" inside its quarter on narrow phones —
     equal flex shares alone run out of room below ~360px. */
  .pill-list { flex-wrap: nowrap; gap: 6px; }
  .pill-list li {
    flex: 1;
    text-align: center;
    padding: 0.55rem 0.25rem;
    font-size: clamp(11px, 3.45vw, 13px);
  }
  .outreach-callout { text-align: center; }

  /* The "Serve locally" intro sits beside a photo on desktop; stacked on a
     phone it centres to match the callout and collage below it. */
  .outreach-intro { text-align: center; }
}

/* --- LFL Kids lockup on the Next Gen card -------------------------------
   The ministry has its own bright, playful identity, deliberately unlike the
   restrained editorial system around it — so it gets to sit as artwork at the
   head of the card rather than being restyled to match. Capped well below its
   native 1294px: the source is oversized on purpose so it stays crisp on
   retina at any of these sizes. The eyebrow underneath carries only the age
   range, because the lockup already says the name. */
.panel__logo {
  display: block;
  width: 100%;
  max-width: 176px;
  height: auto;
  margin-bottom: 2px;
}
@media (max-width: 47.99em) {
  .panel__logo { max-width: 150px; }
}

/* --- Next Gen: three ministries, evenly weighted -------------------------
   One column on a phone, three across once there is room. No two-up step in
   between: with three cards that always strands one on a row of its own. */
.split--3 { grid-template-columns: 1fr; }
@media (min-width: 62em) {
  .split--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* `.panel p { flex: 1 }` stretched EVERY paragraph, so a card with two of them
   grew two gaps and its schedule pill drifted into the middle — which is what
   made these cards look unbalanced next to each other. Let the copy sit at its
   natural height and push only the button down, so the three CTAs line up
   along the bottom however much text each card carries. */
.section--nextgen .panel p { flex: 0 0 auto; }
.section--nextgen .panel__meta { margin-top: 4px; }
.section--nextgen .nextgen-cta { margin-top: auto; }

/* --- Next Gen cards with photography (Figma node 30:4) -------------------
   The card takes a photo across its full width, so its padding moves off the
   card and onto .panel__body — otherwise the image would sit inside the
   padding box and float. The body stays the flex column, which is what the
   `margin-top:auto` on the CTA above is measuring against, so the three
   buttons still line up along the bottom whatever the copy length. */
.section--nextgen .panel {
  padding: 0;
  gap: 0;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.panel__media {
  aspect-ratio: 404 / 220;
  overflow: hidden;
  background: var(--rd-surface);
}
/* Every supplied photo is portrait cropped into a landscape band, so each
   card sets its own focal point — a centre crop takes the heads off. */
.panel__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, center);
}
.panel__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(1.5rem, 2.4vw, 1.75rem);
}
/* Figma sets these at 22px. The site's 34px was tuned for a card with no
   photo in it; with the image carrying the top half, 34px wrapped every
   title to three lines and swamped the copy. 26px keeps the site's serif
   voice at roughly the Figma proportion. */
.section--nextgen .panel h3 { font-size: 26px; margin-top: 4px; }
.section--nextgen .panel p { font-size: 16px; }
/* Figma pairs the schedule with a calendar glyph; the pill is ours. */
.panel__meta-icon {
  width: 13px;
  height: 13px;
  flex: none;
  display: block;
}

/* Three narrower cards leave the value chips about 165px each — enough for the
   label but not for "Because God did His best for us" beside it. */
@media (min-width: 62em) and (max-width: 81.24em) {
  .section--nextgen .values { grid-template-columns: 1fr; }
}

/* --- Photo marquee (Figma node 19:535) ----------------------------------
   Ten photographs drifting past on a loop, alternating between two heights
   and centred on a shared axis, as in the design.

   The track holds the set TWICE and translates by exactly -50%. At the moment
   the animation wraps, copy two is sitting precisely where copy one started,
   so the loop has no visible seam. That only holds if half the track is
   exactly one set wide — which is why the spacing is margin on every item
   rather than `gap`: `gap` puts space *between* items, leaving 19 gaps across
   20 items, and half of that lands half a gap out of register. A trailing
   margin on all 20 keeps both halves identical.

   It is one transform on one element, composited on the GPU: no per-frame
   JavaScript, no layout being recalculated as it moves. */
.marquee {
  --marquee-gap: clamp(14px, 4.7vw, 91px);
  --marquee-short: clamp(190px, 30vw, 365px); /* Figma: 244 × 365 */
  --marquee-tall: clamp(240px, 38vw, 463px);  /* Figma: 310 × 463 */
  --marquee-speed: 70s;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  /* Runs the full width of the viewport, past the content wrap on both sides. */
  overflow: hidden;
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-drift var(--marquee-speed) linear infinite;
}
/* Let people stop it to actually look at a photo. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}
.marquee__item {
  flex: none;
  height: var(--marquee-short);
  aspect-ratio: 244 / 365;
  margin-inline-end: var(--marquee-gap);
  border-radius: 8px;
  overflow: hidden;
  background: #e4e4e4; /* holds the shape while the photo loads */
}
.marquee__item:nth-child(even) {
  height: var(--marquee-tall);
  aspect-ratio: 310 / 463;
}
.marquee__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes marquee-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Motion off: the strip becomes an ordinary swipeable rail rather than
   vanishing, so the photographs are still there to be looked at. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .marquee__track {
    animation: none;
  }
}

/* --- Read-more panel ----------------------------------------------------
   The founders' story runs long enough to swamp the section, so the closing
   reflection folds away behind a toggle.

   The panel is authored OPEN and collapsed by main.js on load, so with no
   JavaScript the whole story is simply there — the copy never depends on a
   script running.

   Collapsing uses the `hidden` attribute rather than an animated height. Both
   height techniques were tried first: `grid-template-rows: 1fr → 0fr` (what
   the mobile nav accordions use) sticks on whichever value it starts at in
   this engine and never animates, and the measured max-height version was no
   more reliable. `hidden` cannot half-work, and it takes the collapsed copy
   out of the accessibility tree and the tab order for free — which the height
   tricks only fake. The fade below keeps it from snapping in. */
.readmore__panel[hidden] { display: none; }
.readmore__panel { animation: readmore-in 0.32s var(--ease); }
@keyframes readmore-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .readmore__panel { animation: none; }
}

.readmore__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 17px;
  color: var(--rd-blue);
}
.readmore__toggle:hover { text-decoration: underline; text-underline-offset: 4px; }
.readmore__toggle .chev {
  width: 12px;
  height: 12px;
  transition: transform 0.28s var(--ease);
}
/* Chevron points down to open, up to close. */
.readmore:not(.is-collapsed) .readmore__toggle .chev { transform: rotate(180deg); }
/* Both labels live in the markup and are swapped with CSS rather than by
   rewriting textContent — the language switcher caches the original text of
   every node it walks, and mutating it from JS would poison that cache. */
.readmore:not(.is-collapsed) .readmore__more,
.readmore.is-collapsed .readmore__less { display: none; }

/* On the dark homepage band the link blue is too dim to read. */
.section--founders .readmore__toggle { color: #81acff; }

@media (prefers-reduced-motion: reduce) {
  .readmore__toggle .chev { transition: none; }
}

/* The founders' opening line carries the section — set it a step up. */
.founders__lede {
  font-size: clamp(1.25rem, 0.9rem + 1.1vw, 1.625rem);
  line-height: 1.35;
  font-weight: 500;
}
.section--founders .founders__lede { color: #fff; }
.band .founders__lede { color: var(--rd-ink); }

/* --- Feature photo (inner pages) ----------------------------------------
   A photo that keeps its own proportions rather than being cropped to a
   fixed ratio — height:auto, so a wide source stays wide. */
.feature-photo {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--rd-card-shadow);
}
.feature-photo img {
  display: block;
  width: 100%;
  height: auto;
}
/* Taller variant: the source is a wide 1.85:1 frame, which reads short beside
   a full column of copy. Cropped to 4:3 from the centre — the three figures
   sit in the middle of the frame, so only sea and sky are lost. */
.feature-photo--tall img {
  aspect-ratio: 4 / 3;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* --- Mission statement, oversized variant -------------------------------
   The beliefs page gives the statement a section of its own, so it can run
   larger than the homepage's. Capped at the source's own measure so it still
   breaks onto two or three lines rather than one very long ribbon. */
.mission__statement--xl {
  font-size: clamp(2.25rem, 1rem + 5.4vw, 6rem);
  max-width: 18ch;
}

/* ==========================================================================
   20. LFL Kids page

   The children's ministry has its own bright identity, so this page borrows
   the four logo colours rather than the site's restrained blue. Everything is
   scoped to .page-kids so none of it leaks into the rest of the site.
   Colours sampled from the lockup itself.
   ========================================================================== */
.page-kids {
  --kids-coral: #f85858;
  --kids-yellow: #f8c820;
  --kids-purple: #603890;
  --kids-teal: #28d0a0;
}

/* Hero: the lockup does the talking, so the <h1> is visually hidden and the
   heading level is preserved for structure. */
.kids-hero__logo {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 24px auto 0;
}
/* A soft wash of all four colours behind the hero, so the page opens warm
   rather than on the same grey as every other inner page. */
.page-kids .page-hero {
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(248, 88, 88, 0.16), transparent 70%),
    radial-gradient(55% 75% at 88% 6%, rgba(40, 208, 160, 0.18), transparent 70%),
    radial-gradient(70% 90% at 50% 100%, rgba(248, 200, 32, 0.16), transparent 70%),
    var(--rd-surface);
}

/* One value, one colour — carried by the heading alone. */
.kids-tile h3 { color: var(--kids-accent); }
.kids-tile--coral { --kids-accent: var(--kids-coral); }
.kids-tile--yellow { --kids-accent: #d99e00; } /* the raw yellow fails contrast on white */
.kids-tile--purple { --kids-accent: var(--kids-purple); }
.kids-tile--teal { --kids-accent: #12a37a; }   /* likewise the raw teal */

/* Eyebrows on this page pick up the purple from the lockup. */
.page-kids .rd-eyebrow--blue { color: var(--kids-purple); }


/* --- Drifting waves -----------------------------------------------------
   A very quiet nod to the lighthouse in the mark, sat behind the baptism
   copy. Three tiling wave bands at different widths, speeds and directions;
   because the periods never line up, the water never visibly repeats.

   Each layer is one seamless SVG tile repeated on x, moved by a transform on
   a pseudo-element rather than by animating background-position — transforms
   are composited, so this costs nothing per frame. Opacities are in the 3–5%
   range: it should read as texture, not decoration.
   -------------------------------------------------------------------------- */
.section--waves {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section--waves > * { position: relative; z-index: 1; }
.section--waves::before,
.section--waves::after {
  content: "";
  position: absolute;
  left: -50%;
  width: 200%;
  height: 260px;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat-x;
  background-position: 0 bottom;
}
.section--waves::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%20100C150%2040%20450%2040%20600%20100S1050%20160%201200%20100V200H0Z%22%20fill%3D%22rgba%285%2C46%2C74%2C0.045%29%22%2F%3E%3C%2Fsvg%3E");
  background-size: 1200px 200px;
  animation: wave-drift 46s linear infinite;
}
.section--waves::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%20100C150%2040%20450%2040%20600%20100S1050%20160%201200%20100V200H0Z%22%20fill%3D%22rgba%285%2C46%2C74%2C0.032%29%22%2F%3E%3C%2Fsvg%3E");
  background-size: 900px 150px;
  height: 200px;
  animation: wave-drift-rev 67s linear infinite;
}
@keyframes wave-drift {
  from { transform: translateX(0); }
  to { transform: translateX(1200px); }
}
@keyframes wave-drift-rev {
  from { transform: translateX(0); }
  to { transform: translateX(-900px); }
}
@media (prefers-reduced-motion: reduce) {
  .section--waves::before,
  .section--waves::after { animation: none; }
}

/* The values intro broke onto three lines at the 68ch prose measure, with a
   two-word orphan on the last. Widened so it sets on two — 733px is the bare
   minimum for two lines, so this leaves room for the wrap to fall naturally
   rather than sitting one word away from breaking again. */
.page-kids .band--tint .band__head,
.page-kids .band--tint .band__head .prose {
  max-width: 880px;
}

/* --- Header + hero fixes ------------------------------------------------
   1. The menu button had no flex guard, so on the Ukrainian header — where
      the wordmark reads "Українська п'ятидесятницька церква", far longer than
      the English — the flex row squeezed it from a 46px circle into an empty
      sliver with the bars crushed out of sight. It is the only navigation on
      mobile, so it must never shrink; `.brand` gives way instead.
   2. Hero sizing is measured against the real container (335px of content at
      375px wide). Libertinus holds "A place to know God" up to 37.5px there
      and 31px at 320px, so the ramp below lands just inside both. The
      Ukrainian headline is a far longer sentence and would need 24px to sit
      on two lines — too small for a hero — so it wraps, which is fine. */
.nav-toggle {
  flex: none;
}
/* `.brand` is `flex: none` further up, so with the nowrap below it could not
   shrink and the long Ukrainian subtitle pushed the whole header past the
   viewport on every page. Let it shrink, and let the text truncate instead. */
.brand {
  flex: 0 1 auto;
  min-width: 0;
}
.brand-text {
  min-width: 0;
}
.brand-text strong,
.brand-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The headline carries an explicit <br> marking where it should break, but
   two inherited rules kept overriding it: the original hero rule caps the
   measure at `max-width: 16ch`, and `text-wrap: balance` (set globally on
   h1–h4) re-splits the lines to even them out. In Trust 3B the 16ch cap was
   wider than the line needed so nobody noticed; Libertinus is wider, so 16ch
   lands short at every size — 281px against 318px on a phone, ~760px against
   ~810px at the full 100px — and forced a third line. Both stand down here at
   all widths; `.hero__inner` still caps the hero at 1240px. */
.hero--home h1 {
  max-width: none;
  text-wrap: wrap;
}

@media (max-width: 47.99em) {
  .hero--home h1 {
    font-size: clamp(1.9rem, 0.2rem + 8.7vw, 3.25rem);
  }
}

/* "Місце, де можна пізнати Бога" is about a third longer than "A place to
   know God", so at the shared size it wraps and strands "Бога" on a line of
   its own — the explicit <br> then makes it three lines. Scaling the
   Ukrainian down restores the intended two. Specificity beats both the base
   rule and the mobile one above, so this single clamp covers the whole
   range. i18n.js sets the lang attribute when the language is switched. */
html[lang="uk"] .hero--home h1 {
  font-size: clamp(1.75rem, 0.5rem + 5.6vw, 4.5rem);
}

/* --- LFL Kids value icons -----------------------------------------------
   One illustration per value, above its heading. Attached as a background on
   ::before rather than as <img> tags for two reasons: the icons are purely
   decorative (each card's heading already says "Love God", so an <img> would
   only add noise for a screen reader), and a missing background renders as
   nothing at all — an <img> with a missing file shows a broken-image glyph.
   Files live in assets/img/kids/. */
.kids-tile::before {
  content: "";
  display: block;
  width: clamp(56px, 14vw, 76px);
  aspect-ratio: 1;
  margin-bottom: 16px;
  background: var(--kids-icon) center / contain no-repeat;
}
.kids-tile--coral  { --kids-icon: url("../img/kids/love-god.png"); }
.kids-tile--yellow { --kids-icon: url("../img/kids/love-others.png"); }
.kids-tile--purple { --kids-icon: url("../img/kids/do-your-best.png"); }
.kids-tile--teal   { --kids-icon: url("../img/kids/have-fun.png"); }