/* ==========================================================================
   Grace Palace Chapel International
   Layout Proof stylesheet, v11.1 background usage repair

   CORRECTION APPLIED IN THIS VERSION
   The GPCI abstract assets are atmospheric BACKGROUND assets. In this file
   they appear only as CSS background-image on full sections. They are never
   used as an img element, never as a right hand column, never as a half page
   panel and never as a repeated split screen block.

   The only img elements on the rebuilt pages are the GPCI logo and the
   approved portrait of the founder.

   Layout discipline, spacing, text sizing and section rhythm follow the
   supplied reference screenshots. No reference branding, wording, colour,
   imagery or code is used.
   Loaded AFTER app.css so it takes precedence where it overlaps.
   ========================================================================== */

:root {
  /* GPCI palette, unchanged */
  --lp-navy: #0B2A55;
  --lp-navy-dark: #071C38;
  --lp-gold: #C9A227;
  --lp-gold-deep: #8A6500;
  --lp-gold-light: #E4C464;
  --lp-cream: #FBF6EA;
  --lp-cream-deep: #F5EDDC;
  --lp-paper: #FFFFFF;
  --lp-ink: #17243A;
  --lp-ink-soft: #55627A;
  --lp-hair: rgba(11, 42, 85, .14);

  /* Layout rhythm measured from the reference screenshots */
  --lp-wide: 1240px;
  --lp-narrow: 720px;
  --lp-gutter: 28px;
  --lp-section-y: clamp(4.5rem, 8.5vw, 8.5rem);
  --lp-ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- containers ---------- */
.lp-wrap { width: min(var(--lp-wide), calc(100% - (var(--lp-gutter) * 2))); margin-inline: auto; position: relative; z-index: 1; }
.lp-read { width: min(var(--lp-narrow), calc(100% - (var(--lp-gutter) * 2))); margin-inline: auto; position: relative; z-index: 1; }

/* ==========================================================================
   HEADER, calm and low
   ========================================================================== */
.site-header { background: var(--lp-navy-dark); border-bottom: 1px solid rgba(201,162,39,.20); box-shadow: none; }
.header-inner { min-height: 76px; align-items: center; }
.brand img { width: 40px; height: 40px; }
.brand-name { font-size: 1rem; font-weight: 600; letter-spacing: .005em; }

.site-nav { gap: 1.6rem; }
.nav-list { gap: 1.45rem; }
.nav-list a {
  font-family: Inter, system-ui, sans-serif;
  font-size: .715rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.86); white-space: nowrap; min-height: 34px;
}
.nav-list a::after { bottom: 3px; height: 1px; background: rgba(242,210,106,.9); }
.nav-actions { gap: .9rem; }

.nav-actions .btn-watch {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: .4rem 0; min-height: 34px;
  font-size: .715rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(242,210,106,.55); white-space: nowrap;
}
.nav-actions .btn-watch:hover, .nav-actions .btn-watch:focus-visible { color: #fff; border-bottom-color: var(--lp-gold); transform: none; }

.nav-actions .btn-give {
  background: var(--lp-gold); border: 1px solid var(--lp-gold); color: var(--lp-navy-dark);
  min-height: 36px; padding: .5rem 1.15rem; border-radius: 2px; box-shadow: none;
  font-size: .715rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.nav-actions .btn-give:hover, .nav-actions .btn-give:focus-visible { background: #D9B23A; border-color: #D9B23A; transform: none; }

@media (max-width: 1200px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: grid; gap: 1rem; padding: 1.3rem var(--lp-gutter) 1.5rem;
    background: var(--lp-navy-dark); border-bottom: 1px solid rgba(201,162,39,.24);
    opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
    transition: opacity .22s var(--lp-ease), transform .22s var(--lp-ease), visibility .22s;
  }
  .site-nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .nav-list { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1rem; }
  .nav-list a { justify-content: flex-start; min-height: 42px; }
  .nav-actions { justify-content: flex-start; gap: 1.2rem; }
}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.lp-sec { position: relative; padding: var(--lp-section-y) 0; background: var(--lp-paper); }
.lp-sec-cream { background: var(--lp-cream); }
.lp-sec-navy { background: var(--lp-navy-dark); color: rgba(255,255,255,.86); }
.lp-sec-tight { padding: clamp(3.2rem, 5.5vw, 5rem) 0; }

.lp-head { text-align: center; max-width: 640px; margin: 0 auto clamp(2.6rem, 5vw, 4.2rem); }
.lp-head h2 { margin: 0; }
.lp-head p { margin: 1.1rem auto 0; max-width: 52ch; color: var(--lp-ink-soft); font-size: 1rem; line-height: 1.75; }

.lp-eyebrow {
  margin: 0 0 .9rem; color: var(--lp-gold-deep);
  font-family: Inter, system-ui, sans-serif;
  font-size: .69rem; font-weight: 700; letter-spacing: .21em; text-transform: uppercase; line-height: 1.4;
}

/* ---------- typography, restrained on purpose ---------- */
.lp-sec h2, .lp-hero h1 {
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  color: var(--lp-navy-dark); font-weight: 600; letter-spacing: .005em; line-height: 1.16;
}
.lp-sec h2 { font-size: clamp(1.45rem, 2.3vw, 2rem); }
.lp-sec h3 {
  margin: 0 0 .7rem; font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: clamp(1.08rem, 1.35vw, 1.28rem); font-weight: 600; line-height: 1.25; color: var(--lp-navy-dark);
}
.lp-sec p { color: var(--lp-ink-soft); font-size: 1rem; line-height: 1.78; }

.lp-prose > * + * { margin-top: 1.15rem; }
.lp-prose p { margin: 0; max-width: 62ch; }
.lp-prose ul { margin: 0; padding-left: 1.15rem; color: var(--lp-ink-soft); line-height: 1.8; }
.lp-prose li + li { margin-top: .4rem; }

.lp-rule { width: 68px; height: 2px; margin: 1.35rem 0; background: var(--lp-gold); border: 0; }
.lp-head .lp-rule { margin-inline: auto; }

/* ---------- buttons ---------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: .8rem 1.6rem;
  border: 1px solid transparent; border-radius: 2px;
  font-family: Inter, system-ui, sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; line-height: 1; cursor: pointer;
  transition: background .2s var(--lp-ease), color .2s var(--lp-ease), border-color .2s var(--lp-ease);
}
.lp-btn-primary { background: var(--lp-navy-dark); color: #fff; border-color: var(--lp-navy-dark); }
.lp-btn-primary:hover, .lp-btn-primary:focus-visible { background: var(--lp-navy); border-color: var(--lp-navy); }
.lp-btn-gold { background: var(--lp-gold); color: var(--lp-navy-dark); border-color: var(--lp-gold); }
.lp-btn-gold:hover, .lp-btn-gold:focus-visible { background: #D9B23A; border-color: #D9B23A; }
.lp-btn-line { background: transparent; color: var(--lp-navy-dark); border-color: rgba(11,42,85,.34); }
.lp-btn-line:hover, .lp-btn-line:focus-visible { border-color: var(--lp-navy-dark); background: rgba(11,42,85,.04); }
.lp-btn-onnavy { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.lp-btn-onnavy:hover, .lp-btn-onnavy:focus-visible { border-color: #fff; background: rgba(255,255,255,.10); }
.lp-btns { display: flex; flex-wrap: wrap; gap: .85rem; }
.lp-btns-center { justify-content: center; }

.lp-link {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--lp-gold-deep); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
}
.lp-link::after { content: "\2192"; }
.lp-link:hover, .lp-link:focus-visible { color: var(--lp-navy-dark); }

/* ==========================================================================
   ATMOSPHERE LAYER
   The GPCI abstract assets are applied here, and only here, as CSS
   background-image on a whole section. Three intensities are available.
   ========================================================================== */
.lp-atmos { position: relative; background-color: var(--lp-navy-dark); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; }
.lp-atmos > * { position: relative; z-index: 1; }
.lp-atmos::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* 1. HERO intensity: navy wash, heavier on the reading side, so white text is always legible */
.lp-atmos-hero::before {
  background:
    linear-gradient(100deg, rgba(7,28,56,.90) 0%, rgba(7,28,56,.80) 38%, rgba(7,28,56,.48) 68%, rgba(7,28,56,.34) 100%),
    linear-gradient(180deg, rgba(7,28,56,.30) 0%, rgba(7,28,56,0) 30%, rgba(7,28,56,.34) 100%);
}

/* 2. SOFT intensity: the texture stays as a faint warm atmosphere, dark text on cream reads normally */
.lp-atmos-soft::before { background: linear-gradient(180deg, rgba(251,246,234,.955) 0%, rgba(251,246,234,.925) 50%, rgba(251,246,234,.955) 100%); }
.lp-atmos-soft { background-color: var(--lp-cream); }

/* 3. FAINT intensity: barely there, used behind white cards */
.lp-atmos-faint::before { background: linear-gradient(180deg, rgba(255,255,255,.965) 0%, rgba(255,255,255,.94) 50%, rgba(255,255,255,.965) 100%); }
.lp-atmos-faint { background-color: var(--lp-paper); }

/* 4. DEEP intensity: closing band, white text on a deep navy wash */
.lp-atmos-deep::before { background: linear-gradient(180deg, rgba(7,28,56,.93) 0%, rgba(7,28,56,.88) 100%); }

/* the approved GPCI abstract assets, mapped to sections */
.lp-bg-home     { background-image: url('/assets/images/bg/home.jpg'); }
.lp-bg-newhere  { background-image: url('/assets/images/bg/new-here.jpg'); }
.lp-bg-community{ background-image: url('/assets/images/bg/community.jpg'); }
.lp-bg-about    { background-image: url('/assets/images/bg/about.jpg'); }
.lp-bg-online   { background-image: url('/assets/images/bg/online.jpg'); }
.lp-bg-connect  { background-image: url('/assets/images/bg/connect.jpg'); }

@media (max-width: 900px) {
  .lp-bg-home      { background-image: url('/assets/images/bg/home-m.jpg'); }
  .lp-bg-newhere   { background-image: url('/assets/images/bg/new-here-m.jpg'); }
  .lp-bg-community { background-image: url('/assets/images/bg/community-m.jpg'); }
  .lp-bg-about     { background-image: url('/assets/images/bg/about-m.jpg'); }
  .lp-bg-online    { background-image: url('/assets/images/bg/online-m.jpg'); }
  .lp-bg-connect   { background-image: url('/assets/images/bg/connect-m.jpg'); }
}

/* ==========================================================================
   HERO. One full width section. Background covers the whole hero.
   Controlled text block on the left. No split, no image column.
   ========================================================================== */
.lp-hero { padding: clamp(4.5rem, 10vw, 9rem) 0 clamp(4.5rem, 10vw, 9rem); }
.lp-hero-copy { max-width: 36rem; }
.lp-hero h1 {
  margin: 0; color: #fff;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.14;
  text-shadow: 0 2px 18px rgba(4,16,34,.42);
}
.lp-hero .lp-eyebrow { color: var(--lp-gold-light); }
.lp-hero-support {
  margin: 1.5rem 0 0; color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: .82rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
}
.lp-hero-support::after { content: ""; display: block; width: 56px; height: 2px; margin-top: 1.1rem; background: var(--lp-gold); }
.lp-hero-lead { margin: 1.3rem 0 0; max-width: 42ch; color: rgba(255,255,255,.90); font-size: 1.03rem; line-height: 1.8; }
.lp-hero .lp-btns { margin-top: 2.3rem; }
.lp-hero .lp-btn-line { color: #fff; border-color: rgba(255,255,255,.55); }
.lp-hero .lp-btn-line:hover, .lp-hero .lp-btn-line:focus-visible { border-color: #fff; background: rgba(255,255,255,.10); }

/* a smaller hero for inner pages */
.lp-hero-inner { padding: clamp(3.6rem, 7vw, 6.5rem) 0; }
.lp-hero-inner h1 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }

/* ==========================================================================
   PANELS. Readable cream or white content panels that sit on top of an
   atmospheric section. Text never sits directly on the texture.
   ========================================================================== */
.lp-panel {
  background: var(--lp-paper);
  border: 1px solid var(--lp-hair);
  padding: clamp(1.8rem, 4vw, 3.4rem);
}
.lp-panel-cream { background: var(--lp-cream); border-color: rgba(201,162,39,.26); }
.lp-panel-wide { width: min(920px, 100%); margin-inline: auto; }
.lp-panel h2 { margin: 0; }
.lp-panel > p { margin: 1.1rem 0 0; max-width: 62ch; }
.lp-panel .lp-btns { margin-top: 2rem; }

/* two column content inside a panel, text only, no image column */
.lp-panel-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.8rem, 3.5vw, 3.2rem); align-items: start; }

/* fact rows */
.lp-facts { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.lp-facts li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--lp-hair); }
.lp-facts li:last-child { border-bottom: 1px solid var(--lp-hair); }
.lp-fact-key {
  color: var(--lp-navy-dark); font-family: Inter, system-ui, sans-serif;
  font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; line-height: 1.6;
}
.lp-fact-val { color: var(--lp-ink); font-size: .98rem; line-height: 1.65; }
.lp-facts a { color: var(--lp-navy); }

/* ==========================================================================
   CLOSING BAND. Deep atmospheric background, centred white text.
   ========================================================================== */
.lp-close { padding: clamp(4rem, 7vw, 6.5rem) 0; text-align: center; }
.lp-close .lp-eyebrow { color: var(--lp-gold-light); }
.lp-close h2 {
  margin: 0 auto; max-width: 20ch; color: #fff;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: clamp(1.45rem, 2.3vw, 2rem); font-weight: 600; line-height: 1.2;
  text-shadow: 0 2px 16px rgba(4,16,34,.4);
}
.lp-close p { margin: 1.2rem auto 0; max-width: 50ch; color: rgba(255,255,255,.88); font-size: 1rem; line-height: 1.75; }
.lp-close .lp-btns { margin-top: 2.2rem; }

/* ==========================================================================
   CARDS. Flat, hairline bordered, roomy. No shadow, no lift, no icon badges.
   ========================================================================== */
.lp-cards { display: grid; gap: clamp(1.1rem, 2vw, 1.75rem); }
.lp-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.lp-card {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  background: var(--lp-paper);
  border: 1px solid var(--lp-hair);
  text-decoration: none;
  transition: border-color .2s var(--lp-ease), background .2s var(--lp-ease);
}
.lp-sec-cream .lp-card, .lp-atmos-soft .lp-card { background: var(--lp-paper); }
a.lp-card:hover, a.lp-card:focus-visible { border-color: rgba(201,162,39,.75); background: #FFFDF7; }
.lp-card h3 { margin: 0 0 .6rem; }
.lp-card p { margin: 0; color: var(--lp-ink-soft); font-size: .96rem; line-height: 1.7; }
.lp-card p + p { margin-top: .8rem; }
.lp-card .lp-eyebrow { font-size: .64rem; margin-bottom: .7rem; }
.lp-card .lp-link { margin-top: auto; padding-top: 1.3rem; align-self: flex-start; }
.lp-card .lp-facts { margin-top: .6rem; }
.lp-card .lp-facts li:first-child { border-top: 0; padding-top: 0; }

/* ==========================================================================
   PORTRAIT. The only img based layout on these pages, used for the approved
   founder photograph. Abstract assets are never placed here.
   ========================================================================== */
.lp-portrait-row {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
  width: min(920px, 100%); margin-inline: auto;
}
.lp-portrait { margin: 0; background: var(--lp-navy-dark); overflow: hidden; }
.lp-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.lp-portrait-copy h3 { margin-top: 0; }
.lp-portrait-role { margin: 0 0 1.1rem; color: var(--lp-gold-deep); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.lp-portrait-copy .lp-btns { margin-top: 1.9rem; }

/* ==========================================================================
   FAQ accordion, quiet
   ========================================================================== */
.lp-faq { width: min(760px, 100%); margin-inline: auto; }
.lp-faq .acc-item { background: transparent; border: 0; border-top: 1px solid var(--lp-hair); border-radius: 0; }
.lp-faq .acc-item:last-child { border-bottom: 1px solid var(--lp-hair); }
.lp-faq .acc-trig { padding: 1.25rem 0; font-family: Fraunces, 'Source Serif 4', Georgia, serif; font-size: 1.05rem; font-weight: 600; color: var(--lp-navy-dark); }
.lp-faq .acc-trig .acc-ic { flex: 0 0 auto; width: auto; height: auto; background: none; box-shadow: none; color: var(--lp-gold-deep); font-size: 1.3rem; line-height: 1; }
.lp-faq .acc-trig .acc-ic::before { content: "+"; }
.lp-faq .acc-trig[aria-expanded="true"] .acc-ic::before { content: "\2212"; }
.lp-faq .acc-panel { padding: 0 0 1.35rem; color: var(--lp-ink-soft); font-size: .98rem; line-height: 1.78; max-width: 62ch; }

/* ==========================================================================
   MOTION, restrained and reduced motion aware
   ========================================================================== */
.lp-rise { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--lp-ease), transform .6s var(--lp-ease); }
.lp-rise.in { opacity: 1; transform: none; }
html:not(.js) .lp-rise { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-rise { opacity: 1; transform: none; transition: none; }
  .lp-btn, a.lp-card { transition: none; }
}

/* ==========================================================================
   RESPONSIVE. Single column, reading order preserved.
   ========================================================================== */
@media (max-width: 1040px) {
  .lp-cards-4, .lp-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .lp-hero { padding: clamp(3.2rem, 12vw, 4.6rem) 0; }
  .lp-hero-copy { max-width: none; }
  /* strengthen the wash on small screens where the texture is closer to the text */
  .lp-atmos-hero::before {
    background:
      linear-gradient(180deg, rgba(7,28,56,.88) 0%, rgba(7,28,56,.82) 55%, rgba(7,28,56,.86) 100%);
  }
  .lp-portrait-row { grid-template-columns: 1fr; gap: 1.8rem; }
  .lp-portrait img { aspect-ratio: 4 / 3; }
  .lp-panel-split { grid-template-columns: 1fr; }
  .lp-facts li { grid-template-columns: 1fr; gap: .3rem; }
}

@media (max-width: 620px) {
  .lp-cards-2, .lp-cards-3, .lp-cards-4 { grid-template-columns: 1fr; }
  .lp-btns .lp-btn { width: 100%; }
  .lp-panel { padding: 1.6rem 1.3rem; }
}

/* ==========================================================================
   Align the shared header and footer containers to the layout proof width
   ========================================================================== */
.container { width: min(var(--lp-wide), calc(100% - (var(--lp-gutter) * 2))); }
.footer-cta-inner, .footer-main, .footer-bottom { padding-block: clamp(1.6rem, 3.2vw, 2.5rem); }
.footer-cta .btn { border-radius: 2px; letter-spacing: .13em; text-transform: uppercase; font-size: .72rem; }



/* ==========================================================================
   HOMEPAGE ONLY, v11.3
   Everything below is scoped to body.page-home. No other page is affected.
   Navigation, header, footer, forms and all inner pages are untouched.

   Hero background: GPCI_BG_01_APPROVED_HOME_HERO.png, applied as a CSS
   background-image. No img element, no right hand panel, no split screen.
   ========================================================================== */

/* ---------- HERO ---------- */
.page-home .lp-hero-home {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: clamp(620px, 86vh, 820px);
  padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(3rem, 5.5vw, 4.75rem);
  background-color: #0B2A55;
  background-image: url('/assets/images/bg/GPCI_BG_01_APPROVED_HOME_HERO.png');
  background-position: center 6%;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Readability scrim. The top of the artwork is left almost untouched so the
   warm gold stays vibrant and welcoming. The scrim rises only where the
   content sits. Measured vibrance retention in the top band: 80 percent
   saturation, 94 percent brightness. */
.page-home .lp-hero-home::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(11,42,85,0)    0%,
    rgba(11,42,85,.03) 11%,
    rgba(11,42,85,.15) 19%,
    rgba(11,42,85,.44) 27%,
    rgba(11,42,85,.70) 35%,
    rgba(11,42,85,.83) 44%,
    rgba(11,42,85,.87) 68%,
    rgba(11,42,85,.90) 100%);
}
.page-home .lp-hero-home > .lp-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
}

/* Vertical composition.
   The hero column is split by two flexible spacers so that the logo and
   headline settle into the middle visual area with clear air around them,
   while the action buttons drop into their own lower group. */
.page-home .hh-inner {
  max-width: 70rem;
  margin-inline: auto;
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* space above the logo */
.page-home .hh-inner::before {
  content: "";
  display: block;
  flex: 1 1 0;
  min-height: .5rem;
}
/* space between the lower gold line and the buttons, weighted so the
   buttons sit clearly lower and read as a separate group */
.page-home .hh-gap {
  flex: 1.45 1 0;
  min-height: clamp(2.2rem, 6vh, 4.5rem);
  /* capped so the separation stays generous without becoming an empty void
     on very tall screens. Any surplus height settles above the logo. */
  max-height: clamp(5.5rem, 15vh, 10rem);
  width: 100%;
}

/* Logo, tasteful entrance */
.page-home .hh-logo {
  display: block;
  flex: 0 0 auto;
  width: clamp(76px, 8vw, 108px);
  height: auto;
  margin: 0 auto clamp(1.4rem, 2.4vw, 1.95rem);
  filter: drop-shadow(0 6px 18px rgba(4,16,34,.45));
}

/* Headline: white to soft pearl, elegant, never oversized */
.page-home .hh-title {
  margin: 0;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 8.4vw, 2.625rem);     /* mobile, scales to fit, up to 42px */
  line-height: 1.24;
  letter-spacing: .004em;
  color: #FFFFFF;
}
.page-home .hh-title,
.page-home .hh-support { width: 100%; flex: 0 0 auto; }
.page-home .hh-l1,
.page-home .hh-l2 { display: block; }
.page-home .hh-l1 { margin-bottom: .12em; }
/* keep the church name held together, never awkwardly broken */
.page-home .hh-a,
.page-home .hh-b { display: inline-block; white-space: nowrap; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .page-home .hh-title {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 42%, #E4EAF2 78%, #D4DDE9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 14px rgba(4,16,34,.42));
  }
}

/* Lower hero line, gold and graceful */
.page-home .hh-support {
  margin: clamp(1.15rem, 2.2vw, 1.6rem) 0 0;
  color: #E8C86A;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);   /* mobile 17px to 20px */
  line-height: 1.5;
  letter-spacing: .012em;
  text-shadow: 0 2px 12px rgba(4,16,34,.45);
}

/* Buttons, grouped well below the text */
.page-home .hh-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .85rem;
  margin-top: 0;
  flex: 0 0 auto;
}
.page-home .hh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .85rem 1.65rem;
  border: 1px solid transparent; border-radius: 2px;
  font-family: Inter, system-ui, sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; line-height: 1;
  transition: background .22s var(--lp-ease), border-color .22s var(--lp-ease), color .22s var(--lp-ease);
}
.page-home .hh-btn-gold { background: #C9A227; color: #071C38; border-color: #C9A227; }
.page-home .hh-btn-gold:hover,
.page-home .hh-btn-gold:focus-visible { background: #DCB63C; border-color: #DCB63C; }
.page-home .hh-btn-line { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.62); }
.page-home .hh-btn-line:hover,
.page-home .hh-btn-line:focus-visible { background: rgba(255,255,255,.14); border-color: #fff; }

/* Gentle hover refinement. A small lift and a soft shadow, nothing more. */
.page-home .hh-btn {
  transform: translateY(0);
  box-shadow: 0 0 0 rgba(4,16,34,0);
  transition: background .22s var(--lp-ease), border-color .22s var(--lp-ease),
              color .22s var(--lp-ease), transform .22s var(--lp-ease),
              box-shadow .22s var(--lp-ease);
}
.page-home .hh-btn:hover,
.page-home .hh-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(4,16,34,.28); }
.page-home .hh-btn:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(4,16,34,.24); }

/* Desktop typography: headline 52px to 66px, lower line 20px to 26px */
@media (min-width: 1024px) {
  .page-home .hh-title { font-size: clamp(3.25rem, 4.4vw, 3.75rem); }
  .page-home .hh-support { font-size: clamp(1.25rem, 1.6vw, 1.625rem); }
}

/* Hero entrance. Slow, dignified, one sequence. */
@keyframes hhLogoIn {
  from { opacity: 0; transform: translateY(14px) scale(.965); }
  to   { opacity: 1; transform: none; }
}
@keyframes hhRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hhGlow {
  0%, 100% { filter: drop-shadow(0 6px 18px rgba(4,16,34,.45)); }
  50%      { filter: drop-shadow(0 6px 22px rgba(201,162,39,.34)); }
}
html.js .page-home .hh-logo {
  animation: hhLogoIn 1.15s cubic-bezier(.22,1,.36,1) both,
             hhGlow 7s ease-in-out 1.6s infinite;
}
html.js .page-home .hh-title   { animation: hhRise 1s cubic-bezier(.22,1,.36,1) .30s both; }
html.js .page-home .hh-support { animation: hhRise 1s cubic-bezier(.22,1,.36,1) .62s both; }
/* the three buttons arrive last, with a soft stagger */
html.js .page-home .hh-actions .hh-btn { animation: hhRise .85s cubic-bezier(.22,1,.36,1) both; }
html.js .page-home .hh-actions .hh-btn:nth-child(1) { animation-delay: .92s; }
html.js .page-home .hh-actions .hh-btn:nth-child(2) { animation-delay: 1.04s; }
html.js .page-home .hh-actions .hh-btn:nth-child(3) { animation-delay: 1.16s; }

/* Very subtle background drift. Barely perceptible, never distracting. */
@keyframes hhDrift {
  from { transform: scale(1.045) translate3d(0, 0, 0); }
  to   { transform: scale(1.045) translate3d(0, -1.1%, 0); }
}
.page-home .lp-hero-home { isolation: isolate; }
html.js .page-home .lp-hero-home::after {
  content: "";
  position: absolute; inset: -3%; z-index: -1; pointer-events: none;
  background-image: inherit;
  background-position: center 6%;
  background-size: cover;
  background-repeat: no-repeat;
  animation: hhDrift 26s ease-in-out infinite alternate;
}

/* Mobile hero */
@media (max-width: 860px) {
  .page-home .lp-hero-home {
    min-height: clamp(540px, 88vh, 680px);
    padding: clamp(2.6rem, 9vw, 3.6rem) 0 clamp(3rem, 9vw, 4rem);
    background-image: url('/assets/images/bg/GPCI_BG_01_APPROVED_HOME_HERO-m.png');
    background-position: center 8%;
  }
  .page-home .hh-inner { max-width: none; }
  /* three graceful lines on narrow screens */
  .page-home .hh-a, .page-home .hh-b { display: block; }
  .page-home .hh-b { margin-top: .04em; }
  /* headline stays comfortably in the middle, buttons still clearly lower */
  .page-home .hh-inner::before { flex: .85 1 0; }
  .page-home .hh-gap { flex: 1.25 1 0; min-height: clamp(1.8rem, 5vh, 3rem); max-height: clamp(4rem, 12vh, 7rem); }
  /* no background drift on phones, the approved artwork is shown exactly as is */
  html.js .page-home .lp-hero-home::after { display: none; }
  /* the headline now sits higher on phones, so the readability wash meets it
     a little sooner. The top band stays warm and vibrant. */
  .page-home .lp-hero-home::before {
    background: linear-gradient(180deg,
      rgba(11,42,85,0)    0%,
      rgba(11,42,85,.04) 10%,
      rgba(11,42,85,.22) 17%,
      rgba(11,42,85,.58) 24%,
      rgba(11,42,85,.78) 31%,
      rgba(11,42,85,.86) 40%,
      rgba(11,42,85,.88) 66%,
      rgba(11,42,85,.90) 100%);
  }
}

@media (max-width: 560px) {
  .page-home .hh-actions { gap: .7rem; }
  .page-home .hh-btn { width: 100%; }
  /* a little more room so 'Chapel International' never breaks */
  .page-home .lp-hero-home > .lp-wrap { width: calc(100% - 44px); }
}

/* Very small phones only: allow the last line to wrap rather than clip */
@media (max-width: 359px) {
  .page-home .hh-b { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .page-home .hh-logo,
  html.js .page-home .hh-title,
  html.js .page-home .hh-support,
  html.js .page-home .hh-actions,
  html.js .page-home .hh-actions .hh-btn,
  html.js .page-home .lp-hero-home::after { animation: none; opacity: 1; transform: none; }
  .page-home .hh-btn { transition: none; }
  .page-home .hh-btn:hover,
  .page-home .hh-btn:focus-visible { transform: none; box-shadow: none; }
}

/* ---------- BELOW THE HERO: simple colour separated flow ---------- */

/* Section headings: desktop 32px to 44px, mobile 26px to 34px */
.page-home .lp-sec h2 { font-size: clamp(1.625rem, 4.4vw, 2.125rem); line-height: 1.2; }
@media (min-width: 1024px) {
  .page-home .lp-sec h2 { font-size: clamp(2rem, 2.9vw, 2.75rem); }
}
.page-home .lp-sec h3 { font-size: clamp(1.08rem, 1.4vw, 1.3rem); }
.page-home .lp-sec p  { font-size: 1.0125rem; line-height: 1.78; }

/* A hairline gold join between the colour bands, so the page reads as one flow */
.page-home .lp-sec + .lp-sec { border-top: 1px solid rgba(201,162,39,.22); }

/* Cards stay flat and calm, with a light lift on hover only */
.page-home a.lp-card { transition: border-color .22s var(--lp-ease), background .22s var(--lp-ease), transform .22s var(--lp-ease); }
.page-home a.lp-card:hover,
.page-home a.lp-card:focus-visible { transform: translateY(-3px); }

/* The Sunday panel sits as a clean white card on the cream band */
.page-home #this-sunday .lp-panel { border-color: rgba(201,162,39,.30); }

/* Closing band: a soft navy panel rather than a background image */
.page-home .lp-close-navy {
  background: linear-gradient(180deg, #0B2A55 0%, #071C38 100%);
  border-top: 3px solid #C9A227;
}
.page-home .lp-close-navy h2 { font-size: clamp(1.625rem, 4.4vw, 2.125rem); }
@media (min-width: 1024px) {
  .page-home .lp-close-navy h2 { font-size: clamp(2rem, 2.9vw, 2.75rem); }
}

@media (prefers-reduced-motion: reduce) {
  .page-home a.lp-card { transition: none; }
  .page-home a.lp-card:hover, .page-home a.lp-card:focus-visible { transform: none; }
}

/* ==========================================================================
   HOMEPAGE, LIGHT SPACING REFINEMENTS, v11.4
   Scoped to body.page-home. Layout, colour bands and structure are unchanged.
   These are small breathing space corrections only.
   ========================================================================== */

/* a little more air under an intro block before the content it introduces */
.page-home .lp-head { margin-bottom: clamp(2.9rem, 5.2vw, 4.5rem); }
.page-home .lp-head p { margin-top: 1.25rem; }

/* paragraphs inside panels and cards are given room to breathe */
.page-home .lp-panel > p { margin-top: 1.25rem; }
.page-home .lp-panel p + p { margin-top: 1.05rem; }
.page-home .lp-panel .lp-btns { margin-top: 2.25rem; }
.page-home .lp-card h3 { margin-bottom: .7rem; }
.page-home .lp-card p { line-height: 1.72; }
.page-home .lp-card .lp-link { padding-top: 1.45rem; }

/* the split panel keeps its two columns aligned on a shared baseline */
.page-home .lp-panel-split { align-items: start; row-gap: clamp(1.8rem, 3.5vw, 2.6rem); }

/* closing band, slightly calmer rhythm */
.page-home .lp-close p { margin-top: 1.35rem; }
.page-home .lp-close .lp-btns { margin-top: 2.4rem; }

/* gentle card lift below the hero, a soft shadow joins the existing rise */
.page-home a.lp-card {
  box-shadow: 0 0 0 rgba(11,42,85,0);
  transition: border-color .22s var(--lp-ease), background .22s var(--lp-ease),
              transform .22s var(--lp-ease), box-shadow .22s var(--lp-ease);
}
.page-home a.lp-card:hover,
.page-home a.lp-card:focus-visible { box-shadow: 0 10px 26px rgba(11,42,85,.10); }

/* section buttons, matching restraint on hover */
.page-home .lp-sec .lp-btn,
.page-home .lp-close .lp-btn {
  transition: background .2s var(--lp-ease), color .2s var(--lp-ease),
              border-color .2s var(--lp-ease), transform .2s var(--lp-ease);
}
.page-home .lp-sec .lp-btn:hover,
.page-home .lp-sec .lp-btn:focus-visible,
.page-home .lp-close .lp-btn:hover,
.page-home .lp-close .lp-btn:focus-visible { transform: translateY(-2px); }

@media (max-width: 720px) {
  /* stop the split panel columns reading as one cramped block */
  .page-home .lp-panel-split { grid-template-columns: minmax(0, 1fr); }
  .page-home .lp-facts li { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home a.lp-card,
  .page-home .lp-sec .lp-btn,
  .page-home .lp-close .lp-btn { transition: none; }
  .page-home a.lp-card:hover,
  .page-home a.lp-card:focus-visible,
  .page-home .lp-sec .lp-btn:hover,
  .page-home .lp-sec .lp-btn:focus-visible,
  .page-home .lp-close .lp-btn:hover,
  .page-home .lp-close .lp-btn:focus-visible { transform: none; box-shadow: none; }
}

/* ==========================================================================
   HOMEPAGE ELEVATION, v11.5
   Two changes only, both scoped to body.page-home:
   1. The founder portrait is presented properly, with the full head visible.
   2. Gentle, dignified movement so the page feels alive rather than flat.
   No other page is affected. Hero background, hero wording, navigation,
   section order, forms and links are all untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FOUNDER PORTRAIT
   The supplied artwork is a transparent cut out, 800 by 1066, and the top of
   the head sits 1.78 percent from the top edge. There is almost no headroom
   in the source, so any object-fit: cover crop removes part of the head.
   On the previous 4 by 5 frame it removed 3.1 percent, and on the phone 4 by 3
   frame it removed 21.9 percent.

   The portrait is therefore shown with object-fit: contain inside a refined
   card that supplies its own breathing space. Nothing is cropped, stretched
   or squeezed, and the aspect ratio of the artwork is preserved exactly.
   -------------------------------------------------------------------------- */
.page-home .founder-home-portrait {
  position: relative;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 5 / 6;
  box-sizing: border-box;
  /* generous headroom, comfortable sides, the figure stands on the base */
  padding: clamp(1.6rem, 3.2vw, 2.4rem) clamp(1.3rem, 2.6vw, 2rem) 0;
  overflow: hidden;
  border: 1px solid rgba(201,162,39,.34);
  border-radius: 3px;
  /* a warm light behind the head, settling into a calm navy */
  background:
    radial-gradient(116% 62% at 50% 16%, rgba(201,162,39,.22) 0%, rgba(201,162,39,.07) 42%, rgba(201,162,39,0) 68%),
    radial-gradient(90% 46% at 50% 100%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(168deg, #14356A 0%, #0B2A55 48%, #071C38 100%);
  /* gentle, never harsh */
  box-shadow: 0 16px 40px rgba(11,42,85,.16), 0 2px 6px rgba(11,42,85,.08);
  transition: transform .35s var(--lp-ease), box-shadow .35s var(--lp-ease), border-color .35s var(--lp-ease);
}

/* A quiet gold mat just inside the frame. It has no bottom edge and it sits
   behind the figure, so no line is ever drawn across him. */
.page-home .founder-home-portrait::after {
  content: "";
  position: absolute; inset: 7px 7px 0; z-index: 1;
  border: 1px solid rgba(201,162,39,.16);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  pointer-events: none;
}

.page-home .founder-home-portrait img {
  position: relative;
  z-index: 2;                      /* the figure stands in front of the mat */
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;              /* releases the old 4/5 and 4/3 frames */
  object-fit: contain;             /* the whole head is always visible */
  object-position: center bottom;  /* he stands naturally on the base */
  filter: drop-shadow(0 10px 26px rgba(4,16,34,.34));
}

/* Founder card, very gentle hover. A small lift and a soft gold edge glow. */
.page-home .founder-home-portrait:hover,
.page-home .founder-home-portrait:focus-within {
  transform: translateY(-4px);
  border-color: rgba(201,162,39,.58);
  box-shadow: 0 22px 52px rgba(11,42,85,.20),
              0 0 0 1px rgba(201,162,39,.20),
              0 0 34px rgba(201,162,39,.16);
}

/* The portrait column stays a comfortable width and the copy sits level with it */
.page-home .lp-portrait-row { align-items: center; }

@media (max-width: 860px) {
  /* centred and capped on phones and small tablets, still dignified */
  .page-home .founder-home-portrait {
    width: min(300px, 100%);
    margin-inline: auto;
    aspect-ratio: 5 / 6;
    /* headroom stays generous on small screens too */
    padding: 2rem 1.3rem 0;
  }
  .page-home .lp-portrait-row { align-items: start; }
}

/* --------------------------------------------------------------------------
   2. MOVEMENT AND VISUAL LIFE
   All motion below is plain CSS, slow, low contrast and low amplitude.
   Nothing spins, bounces, flashes or zooms, and no library is used.
   -------------------------------------------------------------------------- */

/* Hero light sweep. A single soft band of light crossing the hero very
   slowly, with a long rest between passes. Peak brightness is 5 percent,
   so hero text contrast is not affected. */
.page-home .hh-sheen {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 46%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(104deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.035) 42%,
    rgba(255,255,255,.05) 52%,
    rgba(255,255,255,.02) 66%,
    rgba(255,255,255,0) 100%);
}
@keyframes hhSheen {
  0%   { transform: translateX(-60%); opacity: 0; }
  12%  { opacity: 1; }
  46%  { opacity: 1; }
  58%  { transform: translateX(260%); opacity: 0; }
  100% { transform: translateX(260%); opacity: 0; }
}
html.js .page-home .hh-sheen { animation: hhSheen 19s linear 3.2s infinite; }

/* Gold accent rules draw themselves in as their section arrives */
@keyframes lpRuleDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.page-home .lp-rule { transform-origin: center; }
html.js .page-home .lp-rise.in .lp-rule { animation: lpRuleDraw .85s cubic-bezier(.22,1,.36,1) .18s both; }

/* Closing band. A very slow warm glow breathing behind the text, plus two
   faint points of gold light drifting. Text sits above it and keeps its
   full contrast. */
.page-home .lp-close-navy { position: relative; overflow: hidden; }
.page-home .lp-close-navy > .lp-wrap { position: relative; z-index: 1; }
.page-home .lp-close-light {
  position: absolute; inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 52% at 50% 44%, rgba(201,162,39,.16) 0%, rgba(201,162,39,0) 68%),
    radial-gradient(8% 12% at 22% 30%, rgba(232,200,106,.20) 0%, rgba(232,200,106,0) 70%),
    radial-gradient(7% 10% at 79% 66%, rgba(232,200,106,.16) 0%, rgba(232,200,106,0) 70%);
}
@keyframes lpCloseBreathe {
  0%   { transform: translate3d(0, 0, 0) scale(1);    opacity: .78; }
  50%  { transform: translate3d(0, -1.6%, 0) scale(1.05); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) scale(1);    opacity: .78; }
}
html.js .page-home .lp-close-light { animation: lpCloseBreathe 22s ease-in-out infinite; }

/* Reduced motion. Everything added above comes to rest.
   The founder card keeps its full presentation, it simply stops moving. */
@media (prefers-reduced-motion: reduce) {
  .page-home .founder-home-portrait { transition: none; }
  .page-home .founder-home-portrait:hover,
  .page-home .founder-home-portrait:focus-within { transform: none; box-shadow: 0 16px 40px rgba(11,42,85,.16); }
  html.js .page-home .hh-sheen { animation: none; opacity: 0; }
  html.js .page-home .lp-rise.in .lp-rule { animation: none; transform: none; }
  html.js .page-home .lp-close-light { animation: none; opacity: .85; transform: none; }
}

/* Without JavaScript nothing depends on motion to be visible */
html:not(.js) .page-home .hh-sheen { display: none; }
html:not(.js) .page-home .lp-rule { transform: none; }

/* ==========================================================================
   NEW HERE PAGE, GHANA PATHWAY
   Scoped to body.page-new-here. Nothing here reaches the homepage or any
   other page. Visual language follows the approved homepage: flat hairline
   cards, restrained type, a gentle hover lift, motion on transform and
   opacity only, with a reduced motion counterpart.
   ========================================================================== */

/* A quiet gold hairline top and bottom, so this pathway reads as its own band
   between the plain white section above and the cream FAQs below. */
.page-new-here .gh-band {
  border-top: 1px solid rgba(201,162,39,.28);
  border-bottom: 1px solid rgba(201,162,39,.28);
}

.page-new-here .gh-band .lp-head p {
  margin-top: 1.15rem;
  max-width: 54ch;
}

/* Five short cards. Flex rather than grid, so the final row centres itself
   instead of leaving a ragged gap. Five across on a wide screen, three then
   two centred on a tablet, one per row on a phone. */
.page-new-here .gh-cards {
  --gh-gap: clamp(.9rem, 1.6vw, 1.25rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gh-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The number per row is set explicitly rather than left to flex-basis, so the
   final row can never fall ragged at an awkward viewport width.
   Five across by default, three then two centred on a tablet, one on a phone. */
.page-new-here .gh-card {
  flex: 0 1 calc((100% - (var(--gh-gap) * 4)) / 5);
  box-sizing: border-box;
  /* a column, so the minister line can be pushed to the foot of every card
     and the divider rules line up across the row, exactly as the approved
     homepage aligns its card links */
  display: flex;
  flex-direction: column;
  padding: clamp(1.15rem, 1.9vw, 1.5rem);
  background: var(--lp-paper);
  border: 1px solid var(--lp-hair);
  border-radius: 2px;
  box-shadow: 0 0 0 rgba(11,42,85,0);
  transition: border-color .22s var(--lp-ease), transform .22s var(--lp-ease), box-shadow .22s var(--lp-ease);
}

/* the same gentle lift used by the cards on the approved homepage */
.page-new-here .gh-card:hover,
.page-new-here .gh-card:focus-within {
  border-color: rgba(201,162,39,.65);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(11,42,85,.10);
}

.page-new-here .gh-card h3 {
  margin: 0 0 .55rem;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.28;
  color: var(--lp-navy-dark);
}

.page-new-here .gh-place {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: .92rem;
  line-height: 1.62;
}

/* the minister, quietly set apart, sitting at the foot of every card */
.page-new-here .gh-minister {
  margin: .75rem 0 0;
  margin-top: auto;
  padding-top: .7rem;
  border-top: 1px solid var(--lp-hair);
  color: var(--lp-navy-dark);
  font-family: Inter, system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
}

.page-new-here .gh-actions { margin-top: clamp(2rem, 3.4vw, 2.8rem); }
.page-new-here .gh-actions .lp-btn { transition: background .2s var(--lp-ease), color .2s var(--lp-ease), border-color .2s var(--lp-ease), transform .2s var(--lp-ease); }
.page-new-here .gh-actions .lp-btn:hover,
.page-new-here .gh-actions .lp-btn:focus-visible { transform: translateY(-2px); }

@media (max-width: 1100px) {
  /* three across, the remaining two centre themselves */
  .page-new-here .gh-card { flex: 0 1 calc((100% - (var(--gh-gap) * 2)) / 3); }
}

@media (max-width: 720px) {
  /* two across */
  .page-new-here .gh-card { flex: 0 1 calc((100% - var(--gh-gap)) / 2); }
}

@media (max-width: 520px) {
  /* one per row, matching the page's existing mobile behaviour */
  .page-new-here .gh-card { flex: 0 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .page-new-here .gh-card,
  .page-new-here .gh-actions .lp-btn { transition: none; }
  .page-new-here .gh-card:hover,
  .page-new-here .gh-card:focus-within { transform: none; box-shadow: none; }
  .page-new-here .gh-actions .lp-btn:hover,
  .page-new-here .gh-actions .lp-btn:focus-visible { transform: none; }
}

/* ==========================================================================
   NEW HERE HERO, CENTRED COMPOSITION, and the GHANA NEW HERE PAGE
   Scoped to body.page-new-here, which the Ghana page also carries. Nothing
   here reaches the homepage or any other page. The visual language follows
   the approved homepage: centred hero block, restrained type, flat hairline
   cards, gentle hover lift, motion on transform and opacity only.
   ========================================================================== */

/* ---------- Centred hero ---------- */
.page-new-here .nh-hero-copy {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
/* the gold rule under the supporting line centres with the block */
.page-new-here .nh-hero-copy .lp-hero-support::after { margin-inline: auto; }
.page-new-here .nh-hero-copy .lp-hero-lead {
  max-width: 46ch;
  margin-inline: auto;
}
/* the supporting line is a sentence here, not a short label, so the wide
   uppercase tracking is eased back for readability */
.page-new-here .nh-hero-copy .lp-hero-support {
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: none;
  font-weight: 600;
}

/* Four actions, held as a calm centred group. On a wide screen they sit on
   one row. Below that they fall to two rows of two, which reads as a
   deliberate pair of pairs rather than a broken row. */
.page-new-here .nh-hero-btns {
  justify-content: center;
  gap: .75rem;
  margin-top: 2.1rem;
}
.page-new-here .nh-hero-btns .lp-btn {
  transition: background .2s var(--lp-ease), color .2s var(--lp-ease),
              border-color .2s var(--lp-ease), transform .2s var(--lp-ease);
}
.page-new-here .nh-hero-btns .lp-btn:hover,
.page-new-here .nh-hero-btns .lp-btn:focus-visible { transform: translateY(-2px); }

@media (max-width: 1080px) {
  /* two rows of two, each button taking just under half the group width */
  .page-new-here .nh-hero-btns .lp-btn { flex: 0 1 calc(50% - .75rem); }
}

@media (max-width: 620px) {
  /* the page already stacks buttons full width at this size, this keeps the
     hero group consistent with that */
  .page-new-here .nh-hero-btns .lp-btn { flex: 0 1 100%; }
}

/* ---------- Ghana branch detail cards ---------- */
.page-new-here-ghana .gb-cards {
  --gb-gap: clamp(1rem, 1.8vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gb-gap);
}

/* Three across on a wide screen, so five branches read as three then two
   centred. Two across on a tablet, one on a phone. Row counts are set
   explicitly so the final row can never fall ragged. */
.page-new-here-ghana .gb-card {
  flex: 0 1 calc((100% - (var(--gb-gap) * 2)) / 3);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  background: var(--lp-paper);
  border: 1px solid var(--lp-hair);
  border-top: 2px solid var(--lp-gold);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 0 0 rgba(11,42,85,0);
  transition: border-color .22s var(--lp-ease), transform .22s var(--lp-ease), box-shadow .22s var(--lp-ease);
}
.page-new-here-ghana .gb-card:hover,
.page-new-here-ghana .gb-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(11,42,85,.10);
}

.page-new-here-ghana .gb-card h3 {
  margin: 0 0 .4rem;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--lp-navy-dark);
}
.page-new-here-ghana .gb-loc {
  margin: 0 0 1.15rem;
  color: var(--lp-ink-soft);
  font-size: .93rem;
  line-height: 1.6;
}

/* A definition list, so each label is properly tied to its value rather than
   relying on visual order alone. */
.page-new-here-ghana .gb-facts { margin: 0; }
.page-new-here-ghana .gb-row {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  gap: .3rem 1rem;
  padding: .7rem 0;
  border-top: 1px solid var(--lp-hair);
}
.page-new-here-ghana .gb-row:last-child { border-bottom: 1px solid var(--lp-hair); }
.page-new-here-ghana .gb-row dt {
  margin: 0;
  color: var(--lp-navy-dark);
  font-family: Inter, system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1.7;
}
.page-new-here-ghana .gb-row dd {
  margin: 0;
  color: var(--lp-ink);
  font-size: .95rem;
  line-height: 1.6;
}
.page-new-here-ghana .gb-minister { color: var(--lp-navy-dark); font-weight: 600; }

.page-new-here-ghana .gb-times { margin: 0; padding: 0; list-style: none; }
.page-new-here-ghana .gb-times li + li { margin-top: .3rem; }

/* Numbers are read aloud and dialled, so they are given room and never wrap
   mid number. Each sits on its own line when a branch has two. */
.page-new-here-ghana .gb-nums a {
  display: block;
  color: var(--lp-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(11,42,85,.22);
  white-space: nowrap;
  width: fit-content;
  font-variant-numeric: tabular-nums;
}
.page-new-here-ghana .gb-nums a + a { margin-top: .35rem; }
.page-new-here-ghana .gb-nums a:hover,
.page-new-here-ghana .gb-nums a:focus-visible { color: var(--lp-gold-deep); border-bottom-color: var(--lp-gold); }

@media (max-width: 1000px) {
  .page-new-here-ghana .gb-card { flex: 0 1 calc((100% - var(--gb-gap)) / 2); }
}
@media (max-width: 640px) {
  .page-new-here-ghana .gb-card { flex: 0 1 100%; }
  /* labels above values, so the numbers keep their full width */
  .page-new-here-ghana .gb-row { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-new-here .nh-hero-btns .lp-btn,
  .page-new-here-ghana .gb-card { transition: none; }
  .page-new-here .nh-hero-btns .lp-btn:hover,
  .page-new-here .nh-hero-btns .lp-btn:focus-visible { transform: none; }
  .page-new-here-ghana .gb-card:hover,
  .page-new-here-ghana .gb-card:focus-within { transform: none; box-shadow: none; }
}

/* the link through to each existing full branch page, held at the card foot */
.page-new-here-ghana .gb-more { margin: 1.3rem 0 0; padding-top: 0; }
.page-new-here-ghana .gb-card .gb-more { margin-top: auto; padding-top: 1.3rem; }

/* ==========================================================================
   NEW HERE, FINAL MICRO CORRECTION, v11.10
   Scoped to body.page-new-here, which the Ghana page also carries. Nothing
   here reaches the homepage or any other page.
   ========================================================================== */

/* ---------- Quick visitor confidence strip ---------- */
.page-new-here .nh-strip-sec { background: var(--lp-cream); border-bottom: 1px solid rgba(201,162,39,.24); }
.page-new-here .nh-strip-title {
  margin: 0 0 clamp(1.2rem, 2vw, 1.7rem);
  text-align: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--lp-gold-deep);
}
.page-new-here .nh-strip {
  --nh-gap: clamp(.8rem, 1.4vw, 1.15rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--nh-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* four across, then two by two, then one. Set explicitly so the final row
   can never fall ragged. */
.page-new-here .nh-strip-card {
  flex: 0 1 calc((100% - (var(--nh-gap) * 3)) / 4);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: clamp(1.15rem, 1.8vw, 1.5rem);
  background: var(--lp-paper);
  border: 1px solid var(--lp-hair);
  border-top: 2px solid var(--lp-gold);
  border-radius: 0 0 2px 2px;
  text-align: center;
  box-shadow: 0 0 0 rgba(11,42,85,0);
  transition: transform .22s var(--lp-ease), box-shadow .22s var(--lp-ease), border-color .22s var(--lp-ease);
}
.page-new-here .nh-strip-card:hover,
.page-new-here .nh-strip-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(11,42,85,.10);
}
.page-new-here .nh-strip-label {
  margin: 0 0 .5rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lp-navy-dark);
}
.page-new-here .nh-strip-value {
  margin: auto 0 0;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--lp-navy-dark);
}

@media (max-width: 900px) {
  .page-new-here .nh-strip-card { flex: 0 1 calc((100% - var(--nh-gap)) / 2); }
}
@media (max-width: 460px) {
  .page-new-here .nh-strip-card { flex: 0 1 100%; }
}

/* ---------- What a Sunday includes ---------- */
.page-new-here .nh-includes-wrap {
  width: min(760px, 100%);
  margin: 0 auto clamp(2.4rem, 4vw, 3.4rem);
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.4rem, 2.6vw, 2.2rem);
  background: var(--lp-cream);
  border: 1px solid rgba(201,162,39,.28);
  border-radius: 2px;
}
.page-new-here .nh-includes-intro {
  margin: 0 0 1rem;
  text-align: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lp-gold-deep);
}
.page-new-here .nh-includes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem clamp(1.2rem, 2.4vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-new-here .nh-includes li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--lp-ink);
  font-size: 1rem;
  line-height: 1.6;
}
/* a small gold mark, decorative only, the text carries the meaning */
.page-new-here .nh-includes li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-gold);
}
@media (max-width: 620px) {
  .page-new-here .nh-includes { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ghana page footer call to action, two buttons ---------- */
.page-new-here-ghana .footer-cta-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.page-new-here-ghana .footer-cta-inner p { margin: 0; flex: 1 1 20rem; }

@media (prefers-reduced-motion: reduce) {
  .page-new-here .nh-strip-card { transition: none; }
  .page-new-here .nh-strip-card:hover,
  .page-new-here .nh-strip-card:focus-within { transform: none; box-shadow: none; }
}

/* ==========================================================================
   NEW HERE GATEWAY, BUTTON ARCHITECTURE, v12
   Scoped to body.page-new-here, which the London and Ghana pages also carry.
   Nothing here reaches the homepage or any other page.

   The hero now presents three equal pathways as the main action, with a
   quieter pair of support actions held clearly apart below them.
   ========================================================================== */

/* ---------- The three pathways ---------- */
.page-new-here .nh-ways-label,
.page-new-here .nh-support-label {
  margin: 0 0 .9rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.page-new-here .nh-ways-label { margin-top: clamp(2.1rem, 3.4vw, 2.9rem); color: var(--lp-gold-light); }

.page-new-here .nh-ways {
  --nh-way-gap: clamp(.7rem, 1.3vw, 1rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nh-way-gap);
}

/* Each pathway is a compact card sized button. All three are the same width
   and the same height, so no single one dominates and none can wrap awkwardly. */
.page-new-here .nh-way {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  min-height: 76px;
  padding: 1rem .9rem;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 2px;
  background: rgba(255,255,255,.07);
  text-decoration: none;
  text-align: center;
  box-shadow: 0 0 0 rgba(4,16,34,0);
  transition: background .22s var(--lp-ease), border-color .22s var(--lp-ease),
              transform .22s var(--lp-ease), box-shadow .22s var(--lp-ease);
}
.page-new-here .nh-way-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #fff;
}
.page-new-here .nh-way-note {
  font-family: Inter, system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.35;
  color: rgba(255,255,255,.78);
}

/* one gold pathway to give the row an anchor, the other two matched to it */
.page-new-here .nh-way-primary {
  background: #C9A227;
  border-color: #C9A227;
}
.page-new-here .nh-way-primary .nh-way-title { color: #071C38; }
.page-new-here .nh-way-primary .nh-way-note { color: rgba(7,28,56,.78); }

.page-new-here .nh-way:hover,
.page-new-here .nh-way:focus-visible {
  transform: translateY(-2px);
  border-color: #fff;
  background: rgba(255,255,255,.15);
  box-shadow: 0 10px 24px rgba(4,16,34,.26);
}
.page-new-here .nh-way-primary:hover,
.page-new-here .nh-way-primary:focus-visible {
  background: #DCB63C;
  border-color: #DCB63C;
}

/* ---------- The quieter support actions ---------- */
/* A hairline and generous space set these apart, so they read as a different
   kind of action rather than a fourth and fifth pathway. */
.page-new-here .nh-support-label {
  margin-top: clamp(2.2rem, 3.6vw, 3rem);
  padding-top: clamp(1.5rem, 2.6vw, 2.1rem);
  border-top: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.64);
}
.page-new-here .nh-support {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
}
.page-new-here .nh-support-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: .6rem 1.15rem;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 2px;
  background: transparent;
  color: rgba(255,255,255,.86);
  font-family: Inter, system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  transition: color .2s var(--lp-ease), border-color .2s var(--lp-ease), background .2s var(--lp-ease);
}
.page-new-here .nh-support-btn:hover,
.page-new-here .nh-support-btn:focus-visible {
  color: #fff;
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.08);
}

@media (max-width: 780px) {
  /* three equal full width pathways, stacked cleanly */
  .page-new-here .nh-ways { grid-template-columns: minmax(0, 1fr); }
  .page-new-here .nh-way { min-height: 64px; flex-direction: row; gap: .55rem; flex-wrap: wrap; }
  .page-new-here .nh-way-note::before { content: "\00b7"; margin-right: .55rem; opacity: .6; }
}

@media (max-width: 460px) {
  /* the note drops under the title rather than crowding it */
  .page-new-here .nh-way { flex-direction: column; gap: .32rem; padding: .95rem .8rem; }
  .page-new-here .nh-way-note::before { content: none; margin-right: 0; }
  .page-new-here .nh-support-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .page-new-here .nh-way,
  .page-new-here .nh-support-btn { transition: none; }
  .page-new-here .nh-way:hover,
  .page-new-here .nh-way:focus-visible { transform: none; box-shadow: none; }
}

/* ==========================================================================
   TEACHING PAGE, v13
   Scoped to body.page-teaching. Nothing here reaches the homepage, the New
   Here pages or any other page. Visual language follows the approved
   homepage and New Here pages: centred hero, flat hairline cards, restrained
   type, motion on transform and opacity only with a reduced motion
   counterpart.
   ========================================================================== */

/* Hero background. The teaching artwork from the approved background pack,
   applied as a CSS background image. No text is baked into the artwork. */
.lp-bg-teaching { background-image: url('/assets/images/bg/teaching.jpg'); }
@media (max-width: 860px) {
  .lp-bg-teaching { background-image: url('/assets/images/bg/teaching-m.jpg'); }
}

/* ---------- Centred hero, matching the New Here pages ---------- */
.page-teaching .th-hero-copy {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.page-teaching .th-hero-copy .lp-hero-support::after { margin-inline: auto; }
.page-teaching .th-hero-copy .lp-hero-lead { max-width: 46ch; margin-inline: auto; }
.page-teaching .th-hero-btns { justify-content: center; gap: .75rem; margin-top: 2.1rem; }
.page-teaching .th-hero-btns .lp-btn {
  transition: background .2s var(--lp-ease), color .2s var(--lp-ease),
              border-color .2s var(--lp-ease), transform .2s var(--lp-ease);
}
.page-teaching .th-hero-btns .lp-btn:hover,
.page-teaching .th-hero-btns .lp-btn:focus-visible { transform: translateY(-2px); }

@media (max-width: 620px) {
  .page-teaching .th-hero-btns .lp-btn { flex: 0 1 100%; }
}

/* ---------- Status marker ----------
   Used wherever a section is honestly awaiting real content. It is deliberately
   plain, so nothing on this page can be mistaken for live media. */
.page-teaching .th-status {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lp-gold-deep);
}

/* ---------- Latest teaching panel ---------- */
.page-teaching .th-latest { text-align: center; }
.page-teaching .th-latest .th-status { margin-bottom: .9rem; }
.page-teaching .th-latest h3 {
  margin: 0 0 1rem;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.28;
  color: var(--lp-navy-dark);
}
.page-teaching .th-latest > p { margin-inline: auto; max-width: 56ch; }
.page-teaching .th-latest .lp-btns { justify-content: center; margin-top: 2rem; }

/* ---------- Series cards ---------- */
.page-teaching .th-series {
  --th-gap: clamp(1rem, 1.8vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--th-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* three across, set explicitly so a final row cannot fall ragged */
.page-teaching .th-series-card {
  flex: 0 1 calc((100% - (var(--th-gap) * 2)) / 3);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  background: var(--lp-paper);
  border: 1px solid var(--lp-hair);
  border-top: 2px solid var(--lp-gold);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 0 0 rgba(11,42,85,0);
  transition: border-color .22s var(--lp-ease), transform .22s var(--lp-ease), box-shadow .22s var(--lp-ease);
}
.page-teaching .th-series-card:hover,
.page-teaching .th-series-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(11,42,85,.10);
}
.page-teaching .th-series-card h3 {
  margin: 0 0 .6rem;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--lp-navy-dark);
}
.page-teaching .th-series-card p {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: .95rem;
  line-height: 1.65;
}
/* the status sits at the foot of every card, so the markers line up across the row */
.page-teaching .th-series-card .th-status {
  margin-top: auto;
  padding-top: 1.3rem;
}

@media (max-width: 900px) {
  .page-teaching .th-series-card { flex: 0 1 calc((100% - var(--th-gap)) / 2); }
}
@media (max-width: 560px) {
  .page-teaching .th-series-card { flex: 0 1 100%; }
}

/* ---------- Scripture ---------- */
.page-teaching .th-scripture {
  margin: 0;
  text-align: center;
}
.page-teaching .th-scripture p {
  margin: 0;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--lp-navy-dark);
}
.page-teaching .th-scripture footer {
  margin-top: 1.1rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lp-gold-deep);
}

/* ---------- Weekly teaching rhythm ---------- */
.page-teaching .th-rhythm { margin: 0; padding: 0; list-style: none; }
.page-teaching .th-rhythm-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: .3rem 1.4rem;
  align-items: baseline;
  padding: 1rem 0;
  border-top: 1px solid var(--lp-hair);
}
.page-teaching .th-rhythm-row:last-child { border-bottom: 1px solid var(--lp-hair); }
.page-teaching .th-rhythm-name {
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--lp-navy-dark);
}
.page-teaching .th-rhythm-when {
  font-family: Inter, system-ui, sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: var(--lp-navy);
}
.page-teaching .th-rhythm-where {
  color: var(--lp-ink-soft);
  font-size: .92rem;
  line-height: 1.55;
}
.page-teaching .th-rhythm + .lp-btns { margin-top: 2rem; }

@media (max-width: 780px) {
  /* stacked, so nothing is squeezed on a phone */
  .page-teaching .th-rhythm-row { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-teaching .th-hero-btns .lp-btn,
  .page-teaching .th-series-card { transition: none; }
  .page-teaching .th-hero-btns .lp-btn:hover,
  .page-teaching .th-hero-btns .lp-btn:focus-visible { transform: none; }
  .page-teaching .th-series-card:hover,
  .page-teaching .th-series-card:focus-within { transform: none; box-shadow: none; }
}

/* ==========================================================================
   OUR COMMUNITY PAGE, v14
   Scoped to body.page-community. Nothing here reaches the homepage, the New
   Here pages, the Teaching page or any other page. Visual language follows the
   approved pages: centred hero, flat hairline cards, restrained type, motion
   on transform and opacity only with a reduced motion counterpart.
   ========================================================================== */

/* Hero background. The community artwork from the approved background pack.
   Named separately from the existing .lp-bg-community band class so the two
   cannot interfere with each other. */
.lp-bg-community-hero { background-image: url('/assets/images/bg/community.jpg'); }
@media (max-width: 860px) {
  .lp-bg-community-hero { background-image: url('/assets/images/bg/community-m.jpg'); }
}

/* ---------- Centred hero ---------- */
.page-community .cm-hero-copy {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.page-community .cm-hero-copy .lp-hero-support::after { margin-inline: auto; }
.page-community .cm-hero-copy .lp-hero-lead { max-width: 46ch; margin-inline: auto; }
.page-community .cm-hero-btns { justify-content: center; gap: .75rem; margin-top: 2.1rem; }
.page-community .cm-hero-btns .lp-btn {
  transition: background .2s var(--lp-ease), color .2s var(--lp-ease),
              border-color .2s var(--lp-ease), transform .2s var(--lp-ease);
}
.page-community .cm-hero-btns .lp-btn:hover,
.page-community .cm-hero-btns .lp-btn:focus-visible { transform: translateY(-2px); }

@media (max-width: 620px) {
  .page-community .cm-hero-btns .lp-btn { flex: 0 1 100%; }
}

/* ---------- Meet Our Ministers panel ---------- */
.page-community .cm-ministers { text-align: center; }
.page-community .cm-ministers > p { margin: 0 auto; max-width: 60ch; }
.page-community .cm-ministers .lp-btns { justify-content: center; margin-top: 2rem; }

/* ---------- Community life cards ---------- */
.page-community .cm-cards {
  --cm-gap: clamp(1rem, 1.8vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cm-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* three across, set explicitly so a final row cannot fall ragged */
.page-community .cm-card {
  flex: 0 1 calc((100% - (var(--cm-gap) * 2)) / 3);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  background: var(--lp-paper);
  border: 1px solid var(--lp-hair);
  border-top: 2px solid var(--lp-gold);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 0 0 rgba(11,42,85,0);
  transition: border-color .22s var(--lp-ease), transform .22s var(--lp-ease), box-shadow .22s var(--lp-ease);
}
.page-community .cm-card:hover,
.page-community .cm-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(11,42,85,.10);
}
.page-community .cm-card h3 {
  margin: 0 0 .5rem;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--lp-navy-dark);
}
/* the motto line, gold and quiet, sitting under the title */
.page-community .cm-motto {
  margin: 0 0 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--lp-hair);
  color: var(--lp-gold-deep);
  font-family: Inter, system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.5;
}
.page-community .cm-card > p:last-child {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: .95rem;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .page-community .cm-card { flex: 0 1 calc((100% - var(--cm-gap)) / 2); }
}
@media (max-width: 560px) {
  .page-community .cm-card { flex: 0 1 100%; }
}

/* ---------- Scripture ---------- */
.page-community .cm-scripture { margin: 0; text-align: center; }
.page-community .cm-scripture p {
  margin: 0;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--lp-navy-dark);
}
.page-community .cm-scripture footer {
  margin-top: 1.1rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lp-gold-deep);
}

/* ---------- Shared button hover refinement on this page ---------- */
.page-community .lp-sec .lp-btn,
.page-community .lp-close .lp-btn {
  transition: background .2s var(--lp-ease), color .2s var(--lp-ease),
              border-color .2s var(--lp-ease), transform .2s var(--lp-ease);
}
.page-community .lp-sec .lp-btn:hover,
.page-community .lp-sec .lp-btn:focus-visible,
.page-community .lp-close .lp-btn:hover,
.page-community .lp-close .lp-btn:focus-visible { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .page-community .cm-hero-btns .lp-btn,
  .page-community .cm-card,
  .page-community .lp-sec .lp-btn,
  .page-community .lp-close .lp-btn { transition: none; }
  .page-community .cm-hero-btns .lp-btn:hover,
  .page-community .cm-hero-btns .lp-btn:focus-visible,
  .page-community .lp-sec .lp-btn:hover,
  .page-community .lp-sec .lp-btn:focus-visible,
  .page-community .lp-close .lp-btn:hover,
  .page-community .lp-close .lp-btn:focus-visible { transform: none; }
  .page-community .cm-card:hover,
  .page-community .cm-card:focus-within { transform: none; box-shadow: none; }
}

/* ==========================================================================
   COMMUNITY CHILD PAGES, v14.1
   Scoped to body.page-community, which the three child pages also carry.
   Nothing here reaches the homepage, the New Here pages, the Teaching page or
   the approved Community overview.
   ========================================================================== */

/* ---------- Shared centred hero for the child pages ---------- */
.page-community .mn-hero-copy {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.page-community .mn-hero-copy .lp-hero-support::after { margin-inline: auto; }
.page-community .mn-hero-copy .lp-hero-lead { max-width: 46ch; margin-inline: auto; }
.page-community .mn-hero-btns { justify-content: center; gap: .75rem; margin-top: 2.1rem; }
.page-community .mn-hero-btns .lp-btn {
  transition: background .2s var(--lp-ease), color .2s var(--lp-ease),
              border-color .2s var(--lp-ease), transform .2s var(--lp-ease);
}
.page-community .mn-hero-btns .lp-btn:hover,
.page-community .mn-hero-btns .lp-btn:focus-visible { transform: translateY(-2px); }

@media (max-width: 620px) {
  .page-community .mn-hero-btns .lp-btn { flex: 0 1 100%; }
}

/* ---------- Minister portrait cards ----------
   The supplied portraits vary from 0.666 to 1.000 in shape, and head clearance
   ranges from 15.1 percent down to 1.8 percent on the founder. A single
   object-fit: cover crop would cut into the shortest one, so the portrait is
   shown with object-fit: contain inside a frame that supplies its own
   breathing space, exactly as the approved homepage founder card does.
   Nothing is cropped, stretched or squeezed. */
.page-community .mn-cards {
  --mn-gap: clamp(1rem, 1.8vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mn-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* three across by default, set explicitly so a final row cannot fall ragged */
.page-community .mn-card {
  flex: 0 1 calc((100% - (var(--mn-gap) * 2)) / 3);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--lp-paper);
  border: 1px solid var(--lp-hair);
  border-top: 2px solid var(--lp-gold);
  border-radius: 0 0 2px 2px;
  overflow: hidden;
  box-shadow: 0 0 0 rgba(11,42,85,0);
  transition: border-color .22s var(--lp-ease), transform .22s var(--lp-ease), box-shadow .22s var(--lp-ease);
}
.page-community .mn-card:hover,
.page-community .mn-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(11,42,85,.12);
}
/* a two card row for the founders, and a single centred card for Croydon */
.page-community .mn-cards-2 .mn-card { flex: 0 1 calc((100% - var(--mn-gap)) / 2); max-width: 24rem; }
.page-community .mn-cards-1 .mn-card { flex: 0 1 100%; max-width: 22rem; }

/* the portrait frame, supplying the breathing space the artwork lacks */
.page-community .mn-photo {
  position: relative;
  /* 9/10 rather than a taller frame. Measured across all six supplied
     portraits, this lifts the near square ones from filling 80 percent of the
     available height to 87 percent, while the founder still keeps 12.4 percent
     clear space above his head. */
  aspect-ratio: 9 / 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  /* No frame padding. The normalised portraits carry their own measured
     breathing space, 18 percent above the crown on every one, so the artwork
     fills the frame edge to edge and every face lands at the same size and the
     same height. */
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(116% 60% at 50% 16%, rgba(201,162,39,.20) 0%, rgba(201,162,39,.06) 44%, rgba(201,162,39,0) 70%),
    radial-gradient(88% 44% at 50% 100%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(168deg, #14356A 0%, #0B2A55 48%, #071C38 100%);
}
.page-community .mn-photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;            /* the whole head is always visible */
  object-position: center bottom; /* each minister stands on the base */
  filter: drop-shadow(0 8px 22px rgba(4,16,34,.34));
}

/* Where no approved portrait exists, a dignified monogram rather than an
   invented or borrowed image. */
.page-community .mn-photo-mono {
  align-items: center;
  padding: 0;
}
.page-community .mn-photo-mono span {
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(232,200,106,.92);
  text-shadow: 0 2px 18px rgba(4,16,34,.5);
}

.page-community .mn-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(1.15rem, 1.9vw, 1.5rem);
  text-align: center;
}
.page-community .mn-body h3 {
  margin: 0 0 .4rem;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--lp-navy-dark);
}
.page-community .mn-role {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: .92rem;
  line-height: 1.55;
}
/* the link sits at the foot of every card, so links align across a row */
.page-community .mn-body .lp-link {
  margin-top: auto;
  padding-top: 1.1rem;
  align-self: center;
}

@media (max-width: 900px) {
  .page-community .mn-cards .mn-card { flex: 0 1 calc((100% - var(--mn-gap)) / 2); }
}
@media (max-width: 560px) {
  .page-community .mn-cards .mn-card { flex: 0 1 100%; max-width: 20rem; }
}

/* ---------- Men, Women and Children panels ---------- */
.page-community .mwc-panel { text-align: center; }
.page-community .mwc-panel h2 { margin: 0; }
.page-community .mwc-panel > p:not(.mwc-motto):not(.lp-eyebrow) {
  margin: 0 auto;
  max-width: 58ch;
}
.page-community .mwc-motto {
  margin: .9rem auto 1.5rem;
  padding-bottom: 1.2rem;
  max-width: 46ch;
  border-bottom: 1px solid var(--lp-hair);
  color: var(--lp-gold-deep);
  font-family: Inter, system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
}
.page-community .mwc-panel .lp-btns { justify-content: center; margin-top: 1.9rem; }

@media (prefers-reduced-motion: reduce) {
  .page-community .mn-hero-btns .lp-btn,
  .page-community .mn-card { transition: none; }
  .page-community .mn-hero-btns .lp-btn:hover,
  .page-community .mn-hero-btns .lp-btn:focus-visible { transform: none; }
  .page-community .mn-card:hover,
  .page-community .mn-card:focus-within { transform: none; box-shadow: none; }
}

/* ==========================================================================
   LOCATIONS SECTION, v15
   Scoped to body.page-locations. Nothing here reaches the homepage, the New
   Here pages, the Teaching page or the Community pages. The minister card
   styles are reused from the Community section, which is why the Locations
   pages carry the page-community class alongside their own.
   ========================================================================== */

/* Hero background, the locations artwork from the approved background pack. */
.lp-bg-locations { background-image: url('/assets/images/bg/locations.jpg'); }
@media (max-width: 860px) {
  .lp-bg-locations { background-image: url('/assets/images/bg/locations-m.jpg'); }
}

/* ---------- Centred hero ---------- */
.page-locations .lo-hero-copy {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.page-locations .lo-hero-copy .lp-hero-support::after { margin-inline: auto; }
.page-locations .lo-hero-copy .lp-hero-lead { max-width: 46ch; margin-inline: auto; }
.page-locations .lo-hero-btns { justify-content: center; gap: .75rem; margin-top: 2.1rem; }
.page-locations .lo-hero-btns .lp-btn {
  transition: background .2s var(--lp-ease), color .2s var(--lp-ease),
              border-color .2s var(--lp-ease), transform .2s var(--lp-ease);
}
.page-locations .lo-hero-btns .lp-btn:hover,
.page-locations .lo-hero-btns .lp-btn:focus-visible { transform: translateY(-2px); }

@media (max-width: 620px) {
  .page-locations .lo-hero-btns .lp-btn { flex: 0 1 100%; }
}

/* ---------- Fact rows, shared by the overview, London and Ghana ---------- */
.page-locations .lo-facts { margin: 1.4rem 0 0; }
.page-locations .lo-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: .3rem 1.1rem;
  padding: .7rem 0;
  border-top: 1px solid var(--lp-hair);
}
.page-locations .lo-row:last-child { border-bottom: 1px solid var(--lp-hair); }
.page-locations .lo-row dt {
  margin: 0;
  color: var(--lp-navy-dark);
  font-family: Inter, system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1.7;
}
.page-locations .lo-row dd {
  margin: 0;
  color: var(--lp-ink);
  font-size: .95rem;
  line-height: 1.6;
}
.page-locations .lo-min { color: var(--lp-navy-dark); font-weight: 600; }
.page-locations .lo-facts-wide .lo-row { grid-template-columns: 10rem minmax(0, 1fr); }

/* Numbers are dialled and read aloud, so they never wrap mid number. */
.page-locations .lo-nums a,
.page-locations .lo-row dd > a[href^="mailto:"] {
  display: block;
  width: fit-content;
  color: var(--lp-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(11,42,85,.22);
}
.page-locations .lo-nums a { white-space: nowrap; font-variant-numeric: tabular-nums; }
.page-locations .lo-nums a + a { margin-top: .35rem; }
.page-locations .lo-nums a:hover,
.page-locations .lo-nums a:focus-visible,
.page-locations .lo-row dd > a[href^="mailto:"]:hover,
.page-locations .lo-row dd > a[href^="mailto:"]:focus-visible {
  color: var(--lp-gold-deep); border-bottom-color: var(--lp-gold);
}

/* ---------- Overview: the two pathway cards ---------- */
.page-locations .lo-cards {
  --lo-gap: clamp(1rem, 1.8vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lo-gap);
  margin: 0; padding: 0; list-style: none;
}
.page-locations .lo-card {
  flex: 0 1 calc((100% - var(--lo-gap)) / 2);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  background: var(--lp-paper);
  border: 1px solid var(--lp-hair);
  border-top: 2px solid var(--lp-gold);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 0 0 rgba(11,42,85,0);
  transition: border-color .22s var(--lp-ease), transform .22s var(--lp-ease), box-shadow .22s var(--lp-ease);
}
.page-locations .lo-card:hover,
.page-locations .lo-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(11,42,85,.10);
}
.page-locations .lo-card h3 {
  margin: 0 0 .6rem;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--lp-navy-dark);
}
.page-locations .lo-card > p { margin: 0; color: var(--lp-ink-soft); font-size: .98rem; line-height: 1.7; }
/* the action sits at the foot of both cards, so the buttons line up */
.page-locations .lo-card-btns { margin-top: auto; padding-top: 1.8rem; }

.page-locations .lo-list {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lp-hair);
}
.page-locations .lo-list li {
  padding: .62rem 0 .62rem 1.4rem;
  position: relative;
  border-bottom: 1px solid var(--lp-hair);
  color: var(--lp-ink);
  font-size: .95rem;
}
.page-locations .lo-list li::before {
  content: "";
  position: absolute; left: .1rem; top: 1.15em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lp-gold);
}

@media (max-width: 760px) {
  .page-locations .lo-card { flex: 0 1 100%; }
}

/* ---------- London: what a Sunday includes ---------- */
.page-locations .lo-includes-wrap {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.4rem, 2.6vw, 2.2rem);
  background: var(--lp-paper);
  border: 1px solid rgba(201,162,39,.28);
  border-radius: 2px;
}
.page-locations .lo-includes-intro {
  margin: 0 0 1rem;
  text-align: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: .69rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lp-gold-deep);
}
.page-locations .lo-includes { margin: 0; padding: 0; list-style: none; }
.page-locations .lo-includes li {
  position: relative;
  padding: .5rem 0 .5rem 1.4rem;
  color: var(--lp-ink);
  font-size: 1rem;
  line-height: 1.6;
}
.page-locations .lo-includes li + li { border-top: 1px solid var(--lp-hair); }
.page-locations .lo-includes li::before {
  content: "";
  position: absolute; left: .1rem; top: 1.05em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lp-gold);
}
.page-locations .lo-includes strong { color: var(--lp-navy-dark); font-weight: 600; }

/* ---------- Quiet online invitation ---------- */
.page-locations .lo-online {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  text-align: center;
  background: var(--lp-cream);
  border: 1px solid var(--lp-hair);
  border-radius: 2px;
}
.page-locations .lo-online h2 { margin: 0 0 .9rem; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.page-locations .lo-online > p { margin: 0 auto; max-width: 54ch; }
.page-locations .lo-online .lp-btns { justify-content: center; margin-top: 1.7rem; }

/* ---------- Ghana branch cards, portrait beside the detail ---------- */
.page-locations .lo-branches {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  margin: 0; padding: 0; list-style: none;
}
.page-locations .lo-branch {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2rem);
  align-items: start;
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  background: var(--lp-paper);
  border: 1px solid var(--lp-hair);
  border-top: 2px solid var(--lp-gold);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 0 0 rgba(11,42,85,0);
  transition: border-color .22s var(--lp-ease), transform .22s var(--lp-ease), box-shadow .22s var(--lp-ease);
}
.page-locations .lo-branch:hover,
.page-locations .lo-branch:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(11,42,85,.10);
}
/* the portrait frame reuses the Community treatment, so the normalised
   artwork behaves identically here */
.page-locations .lo-branch .mn-photo { border-radius: 2px; }
.page-locations .lo-branch-body { min-width: 0; }
.page-locations .lo-branch-body h3 {
  margin: 0 0 .35rem;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: 1.2rem; font-weight: 600; line-height: 1.25;
  color: var(--lp-navy-dark);
}
.page-locations .lo-branch-loc { margin: 0; color: var(--lp-ink-soft); font-size: .95rem; line-height: 1.6; }
.page-locations .lo-branch .lo-facts { margin-top: 1.1rem; }
.page-locations .lo-branch .lo-card-btns { margin-top: 1.4rem; padding-top: 0; }

@media (max-width: 720px) {
  .page-locations .lo-branch { grid-template-columns: minmax(0, 1fr); }
  .page-locations .lo-branch .mn-photo { max-width: 260px; margin-inline: auto; }
  .page-locations .lo-row { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-locations .lo-hero-btns .lp-btn,
  .page-locations .lo-card,
  .page-locations .lo-branch { transition: none; }
  .page-locations .lo-hero-btns .lp-btn:hover,
  .page-locations .lo-hero-btns .lp-btn:focus-visible { transform: none; }
  .page-locations .lo-card:hover,
  .page-locations .lo-card:focus-within,
  .page-locations .lo-branch:hover,
  .page-locations .lo-branch:focus-within { transform: none; box-shadow: none; }
}

/* ==========================================================================
   LOCATIONS SECTION, FINAL REFINEMENT, v15.1
   Scoped to body.page-locations. The London leadership levels and the Ghana
   branch page split panels. Nothing here reaches a locked page.
   ========================================================================== */

/* ---------- London: the two leadership levels ----------
   The founding level is presented first and given the wider two card row, so
   the founders read as the senior level and the local pastoral card cannot
   appear more prominent. Cards are the same size throughout. */
.page-locations .lo-level + .lo-level { margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.page-locations .lo-level-title {
  margin: 0 0 clamp(1.2rem, 2vw, 1.7rem);
  text-align: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lp-gold-deep);
}
/* the card heading level differs here, h4 inside a level, so it is styled to
   match the h3 used by the minister cards elsewhere */
.page-locations .mn-body h4 {
  margin: 0 0 .4rem;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--lp-navy-dark);
}
/* a single card in a level stays the same width as a card in a pair, so the
   local pastoral card is never larger than the founding cards */
.page-locations .lo-level .mn-cards-2 .mn-card { flex: 0 1 calc((100% - var(--mn-gap)) / 2); max-width: 22rem; }
.page-locations .lo-level .mn-cards-2 { justify-content: center; }

@media (max-width: 620px) {
  .page-locations .lo-level .mn-cards-2 .mn-card { flex: 0 1 100%; max-width: 20rem; }
}

/* ---------- Ghana branch pages: location beside service times ---------- */
.page-locations .lo-branch-split {
  --lo-gap: clamp(1rem, 1.8vw, 1.5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lo-gap);
  align-items: start;
  width: min(920px, 100%);
  margin-inline: auto;
}
.page-locations .lo-branch-split .lp-panel { height: 100%; }
.page-locations .lo-branch-split h3 {
  margin: 0;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--lp-navy-dark);
}

@media (max-width: 760px) {
  .page-locations .lo-branch-split { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   MEET OUR FOUNDERS PAGE, v20
   Scoped to body.page-founders. Nothing here reaches a locked page. The
   minister portrait frame is reused from the Community section, which is why
   this page also carries the page-community class.

   Image framing principle: each couple portrait is given a frame matching its
   own aspect ratio, so object-fit: contain fits it exactly with no crop and no
   letterboxing. The formal and warm artworks fill their canvas edge to edge
   with only half a percent of margin above the heads, so any crop at all would
   cut into them.
   ========================================================================== */

.lp-bg-about { background-image: url('/assets/images/bg/about.jpg'); }
@media (max-width: 860px) {
  .lp-bg-about { background-image: url('/assets/images/bg/about-m.jpg'); }
}

/* ---------- Centred hero ---------- */
.page-founders .fd-hero-copy {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.page-founders .fd-hero-copy .lp-hero-support::after { margin-inline: auto; }
.page-founders .fd-hero-copy .lp-hero-lead { max-width: 48ch; margin-inline: auto; }
.page-founders .fd-hero-btns { justify-content: center; gap: .75rem; margin-top: 2.1rem; }
.page-founders .fd-hero-btns .lp-btn {
  transition: background .2s var(--lp-ease), color .2s var(--lp-ease),
              border-color .2s var(--lp-ease), transform .2s var(--lp-ease);
}
.page-founders .fd-hero-btns .lp-btn:hover,
.page-founders .fd-hero-btns .lp-btn:focus-visible { transform: translateY(-2px); }

@media (max-width: 620px) {
  .page-founders .fd-hero-btns .lp-btn { flex: 0 1 100%; }
}

/* ---------- Featured couple portraits ---------- */
.page-founders .fd-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.6vw, 3rem);
  align-items: center;
  width: min(1000px, 100%);
  margin: 0 auto;
}
/* alternating side, so the page has rhythm without either founder being
   consistently placed second */
.page-founders .fd-feature-flip .fd-feature-media { order: 2; }

.page-founders .fd-feature-media {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201,162,39,.30);
  border-radius: 3px;
  background:
    radial-gradient(112% 58% at 50% 14%, rgba(201,162,39,.18) 0%, rgba(201,162,39,.05) 44%, rgba(201,162,39,0) 70%),
    linear-gradient(168deg, #14356A 0%, #0B2A55 48%, #071C38 100%);
  box-shadow: 0 16px 40px rgba(11,42,85,.14);
}
/* frames matched to each artwork, so contain never crops or letterboxes */
.page-founders .fd-square { aspect-ratio: 1 / 1; }
.page-founders .fd-tall   { aspect-ratio: 3 / 4; }

.page-founders .fd-feature-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;      /* full heads always visible, nothing cropped */
  object-position: center bottom;
  filter: drop-shadow(0 10px 26px rgba(4,16,34,.30));
}

.page-founders .fd-feature-copy { margin: 0; }
.page-founders .fd-feature-copy p {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: 1.0125rem;
  line-height: 1.8;
}
.page-founders .fd-feature-copy p + p { margin-top: 1.15rem; }
.page-founders .fd-lead-line {
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--lp-navy-dark);
}

@media (max-width: 820px) {
  .page-founders .fd-feature { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .page-founders .fd-feature-flip .fd-feature-media { order: 0; }
  .page-founders .fd-feature-media { max-width: 26rem; margin-inline: auto; width: 100%; }
}

/* ---------- Individual founder profiles ----------
   Both profiles use identical structure, identical portrait size and identical
   heading level, so neither founder is presented as secondary. */
.page-founders .fd-profile {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.6vw, 3rem);
  align-items: start;
  width: min(1000px, 100%);
  margin: 0 auto;
}
.page-founders .fd-profile-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.page-founders .fd-profile-flip .fd-profile-media { order: 2; }

.page-founders .fd-profile-media .mn-photo {
  border: 1px solid rgba(201,162,39,.30);
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(11,42,85,.14);
}
.page-founders .fd-profile-copy h2 { margin: 0 0 .35rem; }
.page-founders .fd-role {
  margin: 0 0 1.5rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--lp-hair);
  color: var(--lp-gold-deep);
  font-family: Inter, system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1.5;
}
.page-founders .fd-profile-copy p:not(.fd-role):not(.lp-eyebrow) {
  margin: 0;
  max-width: 62ch;
  color: var(--lp-ink-soft);
  font-size: 1.0125rem;
  line-height: 1.8;
}
.page-founders .fd-profile-copy p + p:not(.fd-role) { margin-top: 1.15rem; }

@media (max-width: 820px) {
  .page-founders .fd-profile,
  .page-founders .fd-profile-flip { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .page-founders .fd-profile-flip .fd-profile-media { order: 0; }
  .page-founders .fd-profile-media { max-width: 20rem; margin-inline: auto; width: 100%; }
}

/* ---------- Ministry foundations ---------- */
.page-founders .fd-cards {
  --fd-gap: clamp(.9rem, 1.6vw, 1.25rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fd-gap);
  margin: 0; padding: 0; list-style: none;
}
/* three across, so five read as three then two centred */
.page-founders .fd-card {
  flex: 0 1 calc((100% - (var(--fd-gap) * 2)) / 3);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: clamp(1.2rem, 2vw, 1.6rem);
  background: var(--lp-paper);
  border: 1px solid var(--lp-hair);
  border-top: 2px solid var(--lp-gold);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 0 0 rgba(11,42,85,0);
  transition: border-color .22s var(--lp-ease), transform .22s var(--lp-ease), box-shadow .22s var(--lp-ease);
}
.page-founders .fd-card:hover,
.page-founders .fd-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(11,42,85,.10);
}
.page-founders .fd-card h3 {
  margin: 0 0 .55rem;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: 1.06rem; font-weight: 600; line-height: 1.28;
  color: var(--lp-navy-dark);
}
.page-founders .fd-card p {
  margin: 0; color: var(--lp-ink-soft); font-size: .95rem; line-height: 1.65;
}

@media (max-width: 900px) {
  .page-founders .fd-card { flex: 0 1 calc((100% - var(--fd-gap)) / 2); }
}
@media (max-width: 560px) {
  .page-founders .fd-card { flex: 0 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .page-founders .fd-hero-btns .lp-btn,
  .page-founders .fd-card { transition: none; }
  .page-founders .fd-hero-btns .lp-btn:hover,
  .page-founders .fd-hero-btns .lp-btn:focus-visible { transform: none; }
  .page-founders .fd-card:hover,
  .page-founders .fd-card:focus-within { transform: none; box-shadow: none; }
}

/* ==========================================================================
   ABOUT GPCI PAGE, v22
   Scoped to body.page-about-gpci. Nothing here reaches a locked page. Reuses
   the approved card and hero patterns; adds only the calling and values grids.
   ========================================================================== */

/* ---------- Centred hero ---------- */
.page-about-gpci .ag-hero-copy {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.page-about-gpci .ag-hero-copy .lp-hero-lead { max-width: 48ch; margin-inline: auto; }
.page-about-gpci .ag-hero-btns { justify-content: center; gap: .75rem; margin-top: 2.1rem; }
.page-about-gpci .ag-hero-btns .lp-btn {
  transition: background .2s var(--lp-ease), color .2s var(--lp-ease),
              border-color .2s var(--lp-ease), transform .2s var(--lp-ease);
}
.page-about-gpci .ag-hero-btns .lp-btn:hover,
.page-about-gpci .ag-hero-btns .lp-btn:focus-visible { transform: translateY(-2px); }

@media (max-width: 620px) {
  .page-about-gpci .ag-hero-btns .lp-btn { flex: 0 1 100%; }
}

/* ---------- Locations block, centred narrow ---------- */
.page-about-gpci .ag-narrow { text-align: center; }
.page-about-gpci .ag-narrow .lp-prose { text-align: left; }
.page-about-gpci .ag-loc-btns { justify-content: center; margin-top: 1.9rem; }

/* ---------- Calling and values cards ---------- */
.page-about-gpci .ag-cards {
  --ag-gap: clamp(.9rem, 1.6vw, 1.25rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ag-gap);
  margin: 0; padding: 0; list-style: none;
}
/* five values: three then two, centred. Row counts explicit so no ragged row. */
.page-about-gpci .ag-card {
  flex: 0 1 calc((100% - (var(--ag-gap) * 2)) / 3);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: clamp(1.2rem, 2vw, 1.6rem);
  background: var(--lp-paper);
  border: 1px solid var(--lp-hair);
  border-top: 2px solid var(--lp-gold);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 0 0 rgba(11,42,85,0);
  transition: border-color .22s var(--lp-ease), transform .22s var(--lp-ease), box-shadow .22s var(--lp-ease);
}
/* four calling pillars: two by two on wide, so they read as an even block */
.page-about-gpci .ag-cards-4 .ag-card { flex: 0 1 calc((100% - (var(--ag-gap) * 3)) / 4); }
.page-about-gpci .ag-card:hover,
.page-about-gpci .ag-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(11,42,85,.10);
}
.page-about-gpci .ag-card h3 {
  margin: 0 0 .55rem;
  font-family: Fraunces, 'Source Serif 4', Georgia, serif;
  font-size: 1.06rem; font-weight: 600; line-height: 1.28;
  color: var(--lp-navy-dark);
}
.page-about-gpci .ag-card p {
  margin: 0; color: var(--lp-ink-soft); font-size: .95rem; line-height: 1.65;
}

@media (max-width: 980px) {
  .page-about-gpci .ag-cards-4 .ag-card { flex: 0 1 calc((100% - var(--ag-gap)) / 2); }
}
@media (max-width: 900px) {
  .page-about-gpci .ag-card { flex: 0 1 calc((100% - var(--ag-gap)) / 2); }
}
@media (max-width: 560px) {
  .page-about-gpci .ag-card,
  .page-about-gpci .ag-cards-4 .ag-card { flex: 0 1 100%; }
}

/* ---------- Founders gateway, text led ---------- */
.page-about-gpci .ag-founders { text-align: center; }
.page-about-gpci .ag-founders h2 { margin: 0 0 1rem; }
.page-about-gpci .ag-founders > p { margin: 0 auto; max-width: 60ch; }
.page-about-gpci .ag-founders .lp-btns { justify-content: center; margin-top: 1.9rem; }

@media (prefers-reduced-motion: reduce) {
  .page-about-gpci .ag-hero-btns .lp-btn,
  .page-about-gpci .ag-card { transition: none; }
  .page-about-gpci .ag-hero-btns .lp-btn:hover,
  .page-about-gpci .ag-hero-btns .lp-btn:focus-visible { transform: none; }
  .page-about-gpci .ag-card:hover,
  .page-about-gpci .ag-card:focus-within { transform: none; box-shadow: none; }
}

/* =====================================================================
   About GPCI, authoritative content correction (v23). Append only.
   Scoped to body.page-about-gpci. Nothing here reaches a locked page.
   Adds prominent Vision / Mission / Purpose statement blocks, the
   Statement of Faith creed and supporting identity lines. Reuses the
   existing v22 hero, founders and location button rules above.
   ===================================================================== */

/* Hero motto, quiet gold expression under the lead line */
.page-about-gpci .ag-hero-motto {
  margin: 1.4rem 0 0;
  font-family: var(--lp-serif, Georgia, serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  letter-spacing: .01em;
  color: var(--grace-gold, #C9A227);
}

/* Grace definition, a single dignified serif line in Who We Are */
.page-about-gpci .ag-grace {
  margin-top: 1.6rem;
  padding-left: 1.15rem;
  border-left: 3px solid var(--grace-gold, #C9A227);
  font-family: var(--lp-serif, Georgia, serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.5;
  color: var(--grace-navy, #1B2F5B);
}

/* Vision / Mission / Purpose statement block. Foundational and prominent. */
.page-about-gpci .ag-statement {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.page-about-gpci .ag-ref {
  margin: .45rem 0 1.1rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .82rem;
  color: var(--grace-gold, #C9A227);
}
.page-about-gpci .ag-statement-text {
  margin: 0;
  font-family: var(--lp-serif, Georgia, serif);
  font-weight: 500;
  line-height: 1.28;
  font-size: clamp(1.7rem, 4.4vw, 2.75rem);
  color: var(--grace-navy, #1B2F5B);
  text-wrap: balance;
}
/* On the tinted / dark atmospheric sections keep the statement legible */
.page-about-gpci .lp-atmos .ag-statement-text { color: var(--grace-navy, #1B2F5B); }
.page-about-gpci .ag-statement-note {
  margin: 1.35rem auto 0;
  max-width: 40ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--grace-charcoal, #2D2D2D);
}

/* Mission five expressions. Restrained numbered steps, not loud cards. */
.page-about-gpci .ag-mission {
  list-style: none;
  margin: 2.4rem auto 0;
  padding: 0;
  max-width: 60rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  counter-reset: agm;
}
.page-about-gpci .ag-mission-step {
  counter-increment: agm;
  flex: 0 1 calc((100% - (0.9rem * 4)) / 5);
  min-width: 9.5rem;
  background: var(--grace-white, #FFFFFF);
  border: 1px solid rgba(27, 47, 91, .12);
  border-radius: 14px;
  padding: 1.25rem 1rem 1.15rem;
  text-align: center;
  box-shadow: 0 6px 20px rgba(27, 47, 91, .05);
}
.page-about-gpci .ag-mission-step::before {
  content: counter(agm);
  display: block;
  margin: 0 auto .55rem;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  border-radius: 50%;
  background: var(--grace-navy, #1B2F5B);
  color: var(--grace-gold, #C9A227);
  font-weight: 700;
  font-size: .95rem;
}
.page-about-gpci .ag-mission-p {
  font-weight: 600;
  color: var(--grace-navy, #1B2F5B);
  font-size: 1.02rem;
}
.page-about-gpci .ag-mission-note {
  margin: 2rem auto 0;
  max-width: 46ch;
  text-align: center;
  color: var(--grace-charcoal, #2D2D2D);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .page-about-gpci .ag-mission-step { flex: 0 1 calc((100% - (0.9rem * 2)) / 3); }
}
@media (max-width: 560px) {
  .page-about-gpci .ag-mission-step { flex: 0 1 calc((100% - 0.9rem) / 2); }
}

/* Statement of Faith creed. All seven fully visible, nothing hidden. */
.page-about-gpci .ag-creed {
  list-style: none;
  margin: 2.4rem auto 0;
  padding: 0;
  max-width: 52rem;
  counter-reset: agc;
  display: grid;
  gap: 1rem;
}
.page-about-gpci .ag-creed-item {
  counter-increment: agc;
  position: relative;
  background: var(--grace-white, #FFFFFF);
  border: 1px solid rgba(27, 47, 91, .12);
  border-left: 4px solid var(--grace-gold, #C9A227);
  border-radius: 12px;
  padding: 1.3rem 1.5rem 1.35rem 3.6rem;
  box-shadow: 0 6px 20px rgba(27, 47, 91, .05);
}
.page-about-gpci .ag-creed-item::before {
  content: counter(agc);
  position: absolute;
  left: 1.15rem;
  top: 1.35rem;
  font-family: var(--lp-serif, Georgia, serif);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--grace-gold, #C9A227);
}
.page-about-gpci .ag-creed-item h3 {
  margin: 0 0 .4rem;
  font-size: 1.14rem;
  color: var(--grace-navy, #1B2F5B);
}
.page-about-gpci .ag-creed-item p {
  margin: 0;
  line-height: 1.6;
  color: var(--grace-charcoal, #2D2D2D);
}
.page-about-gpci .ag-soli {
  margin: 2.2rem 0 0;
  text-align: center;
  font-family: var(--lp-serif, Georgia, serif);
  font-style: italic;
  font-size: 1.2rem;
  letter-spacing: .02em;
  color: var(--grace-navy, #1B2F5B);
}
@media (max-width: 560px) {
  .page-about-gpci .ag-creed-item { padding: 1.15rem 1.15rem 1.2rem 3.2rem; }
}

/* =====================================================================
   Connect page (build and functional review). Append only.
   Scoped to body.page-connect. Reuses the sitewide hero, band, feature,
   gpci-form and btn components from app.css; adds only the pathway grid,
   the narrow form column, the direct-contact method cards and small
   form helper text. Nothing here reaches a locked page.
   ===================================================================== */

/* Four connect pathways. Restrained cards, responsive down to one column. */
.page-connect .path-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  text-align: left;
}
@media (max-width: 900px) {
  .page-connect .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .page-connect .path-grid { grid-template-columns: 1fr; }
}

/* Narrow reading column for the two forms so they stay comfortable to read. */
.page-connect .narrow-col { max-width: 720px; }

/* Small helper and notice text under form fields. */
.page-connect .field-help {
  margin: .1rem 0 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--muted, #5a6473);
  font-weight: 500;
}
.page-connect .notice-line {
  margin: .2rem 0 0;
  padding: .85rem 1rem;
  background: #FBF5E6;
  border: 1px solid rgba(201, 162, 39, .32);
  border-radius: 12px;
  font-size: .92rem;
  line-height: 1.55;
  color: #5a4a1e;
}
.page-connect .alt-route {
  margin: 1.4rem 0 .8rem;
  text-align: center;
  color: var(--muted, #5a6473);
}
.page-connect .form-card .btn-row { justify-content: center; }

/* Direct contact method cards. */
.page-connect .method-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 900px;
  margin: 0 auto 1.8rem;
}
@media (max-width: 720px) {
  .page-connect .method-grid { grid-template-columns: 1fr; }
}
.page-connect .method-card {
  background: #fff;
  border: 1px solid rgba(11, 42, 85, .10);
  border-radius: 16px;
  padding: 1.3rem 1.1rem;
  box-shadow: 0 8px 20px rgba(11, 42, 85, .05);
}
.page-connect .method-label {
  margin: 0 0 .35rem;
  color: var(--gold, #C9A227);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.page-connect .method-value {
  margin: 0;
  color: var(--navy-dark, #1B2F5B);
  font-weight: 700;
  font-size: 1.05rem;
  word-break: break-word;
}

/* Centred button rows for the contact, visit and location sections. */
.page-connect .btn-row-center { justify-content: center; }

/* Connect direct-contact grid, four approved contact methods (email architecture
   update). Append only, scoped to body.page-connect. Keeps the three email
   addresses and the telephone line at equal, restrained prominence. */
.page-connect .method-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1040px; }
@media (max-width: 900px) { .page-connect .method-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .page-connect .method-grid-4 { grid-template-columns: 1fr; } }

/* Connect form status messages (validation, consent and send errors).
   Append only, scoped to body.page-connect. No display property is set here
   so the hidden attribute continues to hide the region until JavaScript
   reveals it. The message text carries the meaning, not colour alone. */
.page-connect .form-status {
  margin: 0 0 1.4rem;
  padding: 1rem 1.15rem;
  background: #FBEFEF;
  border: 1px solid #C0392B;
  border-left: 5px solid #C0392B;
  border-radius: 12px;
  color: #5a1e18;
  font-weight: 600;
  line-height: 1.55;
}
.page-connect .form-status:focus { outline: 3px solid #C0392B; outline-offset: 2px; }
.page-connect .form-status-msg { margin: 0; }
.page-connect .form-status-msg a { color: #5a1e18; font-weight: 700; }

/* =====================================================================
   Our Network page. Append only, scoped to body.page-network.
   Reuses sitewide hero, band, grid, netcard and btn components from
   app.css; adds only the ministry panels, connection statements and the
   network reading column. Nothing here reaches a locked page.
   ===================================================================== */

.page-network .net-read { max-width: 760px; margin-inline: auto; }

/* Distinct ministry panels, each visually separated with a restrained gold accent. */
.page-network .ministry-panel {
  max-width: 820px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid rgba(11, 42, 85, .10);
  border-top: 4px solid var(--gold, #C9A227);
  border-radius: 18px;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow: 0 10px 26px rgba(11, 42, 85, .05);
}
.page-network .ministry-panel h2 { margin: .2rem 0 1rem; }
.page-network .ministry-panel .btn-row { margin-top: 1.5rem; }

.page-network .ministry-expressions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .9rem;
  margin: 1.3rem 0 0;
}
.page-network .ministry-expressions span {
  font-family: Fraunces, Georgia, serif;
  font-style: italic;
  color: var(--navy-dark, #1B2F5B);
  background: #F6F8FB;
  border: 1px solid rgba(201, 162, 39, .28);
  border-radius: 999px;
  padding: .4rem .95rem;
  font-size: .98rem;
}
.page-network .ministry-motto {
  margin: 1.3rem 0 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--gold, #C9A227);
  font-family: Fraunces, Georgia, serif;
  font-style: italic;
  font-size: 1.08rem;
  color: var(--navy-dark, #1B2F5B);
}
.page-network .ministry-contact {
  margin: 1.2rem 0 0;
  color: var(--muted, #5a6473);
  font-size: .98rem;
}
.page-network .ministry-contact a { color: var(--navy-dark, #1B2F5B); font-weight: 700; }

/* Connection statements: three equal, non-hierarchical cards. */
.page-network .connect-stmt {
  background: #fff;
  border: 1px solid rgba(11, 42, 85, .10);
  border-radius: 16px;
  padding: 1.4rem 1.3rem;
  box-shadow: 0 8px 20px rgba(11, 42, 85, .05);
  margin-top: auto;
}
.page-network .connect-label {
  margin: 0 0 .5rem;
  color: var(--gold, #C9A227);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.page-network .connect-stmt p:last-child { margin: 0; color: var(--muted, #5a6473); line-height: 1.6; }
.page-network .net-unify {
  max-width: 640px;
  margin: 2rem auto 0;
  text-align: center;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--navy-dark, #1B2F5B);
}

/* Explore the Network destination cards. */
.page-network .net-links { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: 1rem; }
.page-network .net-links .card-link { font-weight: 700; }
.page-network .net-founders .prose p:last-child { margin-bottom: 0; }
.page-network .net-close-text { max-width: 620px; margin: 0 auto 1.6rem; }

/* =====================================================================
   Give page. Append only, scoped to body.page-give. Reuses sitewide hero,
   band and btn components from app.css; adds the bank-detail card, copy
   buttons, giving-support cards, contact lines and scripture emphasis.
   Nothing here reaches a locked page.
   ===================================================================== */

.page-give .give-subline { margin: .9rem 0 0; color: rgba(255,255,255,.9); font-family: Fraunces, Georgia, serif; font-style: italic; }
.page-give .hero-page .give-subline, .page-give .give-subline { color: inherit; }
.page-give .give-read { max-width: 720px; margin-inline: auto; }

.page-give .give-scripture {
  margin: 1.8rem auto 0;
  max-width: 620px;
  padding: 1.1rem 1.4rem;
  border-left: 4px solid var(--gold, #C9A227);
  background: #F6F8FB;
  border-radius: 12px;
}
.page-give .give-scripture p {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--navy-dark, #1B2F5B);
}
.page-give .give-scripture footer { margin-top: .5rem; font-weight: 700; color: var(--gold, #C9A227); font-size: .9rem; letter-spacing: .04em; }

/* Bank detail card: secure, official, high contrast, selectable plain text. */
.page-give .bank-panel {
  max-width: 620px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(11,42,85,.16);
  border-top: 4px solid var(--navy-dark, #1B2F5B);
  border-radius: 16px;
  padding: clamp(1.3rem, 3vw, 2rem);
  box-shadow: 0 10px 26px rgba(11,42,85,.08);
}
.page-give .bank-dl { margin: 0; display: grid; gap: .2rem; }
.page-give .bank-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .9rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(11,42,85,.10);
}
.page-give .bank-row:last-child { border-bottom: 0; }
.page-give .bank-dl dt {
  flex: 0 0 9.5rem;
  color: var(--gold, #C9A227);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.page-give .bank-dl dd { margin: 0; color: var(--navy-dark, #1B2F5B); font-weight: 700; font-size: 1.05rem; }
.page-give .bank-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  word-spacing: .1em;
  white-space: nowrap;
  -webkit-user-select: all; user-select: all;
}
.page-give .copy-btn {
  margin-left: .3rem;
  padding: .3rem .7rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy-dark, #1B2F5B);
  background: #F5F6F8;
  border: 1px solid rgba(11,42,85,.22);
  border-radius: 999px;
  cursor: pointer;
  min-height: 32px;
}
.page-give .copy-btn:hover { background: #edeff3; }
.page-give .copy-btn:focus-visible { outline: 3px solid var(--gold, #C9A227); outline-offset: 2px; }
.page-give .bank-copy-status { margin: 1rem 0 0; min-height: 1.2em; color: var(--navy-dark, #1B2F5B); font-weight: 600; }
@media (max-width: 480px) {
  .page-give .bank-dl dt { flex: 0 0 100%; }
  .page-give .bank-value { white-space: normal; }
}

/* Giving support cards. */
.page-give .give-support-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
  max-width: 1000px;
  margin: 0 auto;
}
.page-give .support-card {
  background: #fff;
  border: 1px solid rgba(11,42,85,.10);
  border-radius: 14px;
  padding: 1.3rem 1.2rem;
  box-shadow: 0 8px 20px rgba(11,42,85,.05);
}
.page-give .support-card h3 { margin: 0 0 .45rem; color: var(--navy-dark, #1B2F5B); font-size: 1.08rem; }
.page-give .support-card p { margin: 0; color: var(--muted, #5a6473); line-height: 1.55; }
@media (max-width: 860px) { .page-give .give-support-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .page-give .give-support-grid { grid-template-columns: 1fr; } }

/* Contact lines shared by Give Safely and Giving Enquiries. */
.page-give .give-contact-line { max-width: 620px; margin: 1.4rem auto 0; text-align: center; }
.page-give .give-contact-line p { margin: .35rem 0; }
.page-give .give-contact-label { display: inline-block; min-width: 12rem; color: var(--gold, #C9A227); font-weight: 800; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.page-give .btn-row-center { justify-content: center; margin-top: 1.6rem; }
.page-give .give-close-text { max-width: 640px; margin: 0 auto 1.6rem; }

/* =====================================================================
   Final visual defect correction (22 July 2026). Append only.
   The shared card appearance rule in app.css boxes .prose (background,
   border, radius, shadow) but the matching padding rule omits .prose,
   so bordered prose panels had content touching the edge. This adds the
   established responsive card padding to .prose without altering app.css.
   .lp-prose is a separate unboxed system and is intentionally excluded.
   Also defines the previously missing Services Online schedule layout.
   ===================================================================== */

.prose { padding: clamp(1.1rem, 2.2vw, 1.6rem); }

/* Services Online schedule: separate day/time from service name and platform. */
.online-list {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}
.online-list li {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding: 1rem 0;
  border-top: 1px solid var(--line, rgba(15,38,72,.13));
}
.online-list li:last-child { border-bottom: 1px solid var(--line, rgba(15,38,72,.13)); }
.ol-day { color: var(--navy-dark, #1B2F5B); font-weight: 700; }
@media (max-width: 700px) {
  .online-list li { grid-template-columns: 1fr; gap: .35rem; }
}

/* =====================================================================
   Full-background heroes (v35, extended v36). Append only.
   Pages using this system: Give, Watch/Join Online, Connect and the Join the
   WhatsApp Platform page. Scoped to .hero-full-bg so no other hero is affected.
   The app.css .hero-page system forces a white background and a two-column
   grid with the artwork shown in a right-side .hero-media panel. For these
   two pages only, .hero-full-bg restores the approved atmospheric asset to
   its proper role: a full hero-section CSS background with a navy readability
   scrim and a single left-aligned content column. Scoped to .hero-full-bg,
   so no other inner-page hero is affected. Uses !important only where needed
   to override the app.css shorthand background:#fff !important.
   ===================================================================== */

.hero-page.hero-full-bg {
  background-color: #0f2648 !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  color: #fff;
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  display: flex;
  align-items: center;
  min-height: clamp(340px, 42vw, 480px);
}
.hero-page.hero-full-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9,24,48,.88) 0%, rgba(9,24,48,.74) 44%, rgba(9,24,48,.40) 100%),
    linear-gradient(180deg, rgba(9,24,48,.28), rgba(9,24,48,.52));
  pointer-events: none;
}
.hero-full-bg .hero-inner {
  position: relative;
  z-index: 1;
  display: block !important;
  grid-template-columns: none !important;
}
.hero-full-bg .hero-media { display: none !important; }
.hero-full-bg .hero-copy { max-width: 620px; }
.hero-full-bg h1 { color: #fff; }
.hero-full-bg .hero-lead,
.hero-full-bg .give-subline { color: rgba(255,255,255,.92); }
.hero-full-bg .eyebrow { color: var(--gold, #C9A227); }

/* Secondary button: light transparent treatment over the dark hero. */
.hero-page.hero-full-bg .btn-ghost {
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.55);
}
.hero-page.hero-full-bg .btn-ghost:hover,
.hero-page.hero-full-bg .btn-ghost:focus-visible { background: rgba(255,255,255,.18); }
.hero-full-bg .btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Approved background assets, desktop and mobile. */
.hero-bg-give.hero-full-bg { background-image: url('/assets/images/bg/give.jpg') !important; }
.hero-bg-online.hero-full-bg { background-image: url('/assets/images/bg/online.jpg') !important; }
.hero-bg-connect.hero-full-bg { background-image: url('/assets/images/bg/connect.jpg') !important; }
@media (max-width: 700px) {
  .hero-bg-give.hero-full-bg { background-image: url('/assets/images/bg/give-m.jpg') !important; }
  .hero-bg-online.hero-full-bg { background-image: url('/assets/images/bg/online-m.jpg') !important; }
  .hero-bg-connect.hero-full-bg { background-image: url('/assets/images/bg/connect-m.jpg') !important; }
  .hero-page.hero-full-bg { min-height: clamp(300px, 70vw, 420px); }
}

/* =====================================================================
   v37 Homepage motion enhancement. Append only, scoped to body.page-home.
   Strengthens the existing (previously too faint) hero drift, sheen and
   entrance, adds one restrained gold ambient light, a discreet scroll
   indicator, and a gentle staggered reveal for the below-hero cards.
   Transform and opacity only. All motion is gated on html.js and fully
   disabled under prefers-reduced-motion. No framework, no new media.
   ===================================================================== */

/* A. Stronger, still-gentle background drift (redefines the v-earlier keyframe;
      a later same-name @keyframes wins). Slight upward drift plus a very small
      sideways move, within the approved 1.5 to 2 percent range. */
@keyframes hhDrift {
  from { transform: scale(1.05) translate3d(0.5%, 0.6%, 0); }
  to   { transform: scale(1.05) translate3d(-0.5%, -1.8%, 0); }
}
html.js .page-home .lp-hero-home::after { animation: hhDrift 22s ease-in-out infinite alternate; }

/* B. Restrained ambient gold light. Soft radial bloom behind the logo and
      title, low opacity, always behind the text, breathing and drifting a
      short distance. Never a hard spotlight, never flashing. */
.page-home .hh-glow {
  position: absolute;
  top: 14%; left: 50%;
  width: min(70vw, 760px);
  height: min(46vh, 430px);
  transform: translate(-50%, 0);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(201,162,39,.22) 0%,
    rgba(201,162,39,.12) 38%,
    rgba(201,162,39,.05) 62%,
    rgba(201,162,39,0) 100%);
  filter: blur(6px);
  opacity: .9;
}
@keyframes hhGlowDrift {
  0%   { transform: translate(-52%, 0) scale(1); opacity: .78; }
  50%  { transform: translate(-48%, -2%) scale(1.06); opacity: 1; }
  100% { transform: translate(-52%, 0) scale(1); opacity: .78; }
}
html.js .page-home .hh-glow { animation: hhGlowDrift 16s ease-in-out infinite; }

/* C. Refined entrance choreography. The headline arrives line by line:
      "Welcome to" then the church name, then the support line, then the
      buttons. The whole sequence completes at about 1.85s. */
html.js .page-home .hh-title { animation: none; }
html.js .page-home .hh-l1 { animation: hhRise .8s cubic-bezier(.22,1,.36,1) .26s both; }
html.js .page-home .hh-l2 { animation: hhRise .8s cubic-bezier(.22,1,.36,1) .46s both; }
html.js .page-home .hh-support { animation: hhRise .9s cubic-bezier(.22,1,.36,1) .66s both; }
html.js .page-home .hh-actions .hh-btn:nth-child(1) { animation-delay: .84s; }
html.js .page-home .hh-actions .hh-btn:nth-child(2) { animation-delay: .96s; }
html.js .page-home .hh-actions .hh-btn:nth-child(3) { animation-delay: 1.08s; }

/* D. Stronger light sweep: one clearly but gently visible pass, long rest. */
@keyframes hhSheen {
  0%   { transform: translateX(-70%); opacity: 0; }
  8%   { opacity: 1; }
  34%  { opacity: 1; }
  46%  { transform: translateX(300%); opacity: 0; }
  100% { transform: translateX(300%); opacity: 0; }
}
.page-home .hh-sheen {
  background: linear-gradient(104deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.05) 42%,
    rgba(255,255,255,.085) 52%,
    rgba(255,255,255,.03) 66%,
    rgba(255,255,255,0) 100%);
}
html.js .page-home .hh-sheen { animation: hhSheen 22s ease-in-out 3s infinite; }

/* E. Discreet scroll indicator. Fine gold line, small word, gentle bob. */
.page-home .hh-scroll {
  position: absolute;
  left: 50%; bottom: clamp(1rem, 2.4vh, 1.9rem);
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  color: rgba(255,255,255,.9);
}
.page-home .hh-scroll-word {
  font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold, #C9A227);
  order: 2;
}
.page-home .hh-scroll-line {
  order: 1; width: 1px; height: clamp(22px, 3.4vh, 34px);
  background: linear-gradient(180deg, rgba(201,162,39,0), rgba(201,162,39,.9));
  position: relative;
}
.page-home .hh-scroll-line::after {
  content: ""; position: absolute; left: 50%; bottom: -1px;
  width: 7px; height: 7px; border-right: 1.5px solid var(--gold, #C9A227);
  border-bottom: 1.5px solid var(--gold, #C9A227);
  transform: translateX(-50%) rotate(45deg);
}
.page-home .hh-scroll:focus-visible { outline: 3px solid var(--gold, #C9A227); outline-offset: 4px; border-radius: 4px; }
@keyframes hhScrollBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
html.js .page-home .hh-scroll-line { animation: hhScrollBob 2.6s ease-in-out infinite; }
@media (max-height: 640px) { .page-home .hh-scroll-line { display: none; } }
@media (max-width: 380px) { .page-home .hh-scroll { display: none; } }

/* F. Below-hero card reveal stagger. Cards inside a revealing card group fade
      and rise with a small stagger. Gated on html.js; no-JS shows them at once. */
html.js .page-home .lp-cards .lp-card {
  opacity: 0; transform: translateY(16px);
  transition: opacity .62s cubic-bezier(.22,1,.36,1), transform .62s cubic-bezier(.22,1,.36,1);
}
html.js .page-home .lp-cards.in .lp-card { opacity: 1; transform: none; }
html.js .page-home .lp-cards.in .lp-card:nth-child(1) { transition-delay: .04s; }
html.js .page-home .lp-cards.in .lp-card:nth-child(2) { transition-delay: .13s; }
html.js .page-home .lp-cards.in .lp-card:nth-child(3) { transition-delay: .22s; }
html.js .page-home .lp-cards.in .lp-card:nth-child(4) { transition-delay: .31s; }
html:not(.js) .page-home .lp-cards .lp-card { opacity: 1; transform: none; }

/* G. Card and link microinteraction: 3px lift, stronger shadow, arrow nudge. */
.page-home .lp-card { transition: transform .2s var(--lp-ease), box-shadow .2s var(--lp-ease), border-color .2s var(--lp-ease); }
.page-home .lp-card:hover, .page-home .lp-card:focus-visible { transform: translateY(-3px); }
.page-home .lp-card .lp-eyebrow { transition: transform .2s var(--lp-ease); }

/* H. Founder portrait gentle rise (kept restrained, hover treatment preserved). */
html.js .page-home .founder-home-portrait { transition: transform .3s var(--lp-ease), box-shadow .3s var(--lp-ease); }

/* Reduced motion: stop all v37 continuous and staggered motion, show at once. */
@media (prefers-reduced-motion: reduce) {
  html.js .page-home .lp-hero-home::after,
  html.js .page-home .hh-glow,
  html.js .page-home .hh-sheen,
  html.js .page-home .hh-l1,
  html.js .page-home .hh-l2,
  html.js .page-home .hh-scroll-line { animation: none; opacity: 1; transform: none; }
  html.js .page-home .hh-l1, html.js .page-home .hh-l2 { transform: none; }
  html.js .page-home .hh-glow { opacity: .82; transform: translate(-50%, 0); }
  html.js .page-home .lp-cards .lp-card { opacity: 1; transform: none; transition: none; }
  html.js .page-home .lp-cards.in .lp-card { transition-delay: 0s; }
  .page-home .lp-card { transition: none; }
  .page-home .lp-card:hover, .page-home .lp-card:focus-visible { transform: none; }
}

/* =====================================================================
   v37.1 Homepage motion runtime correction. Append only, scoped to
   body.page-home. Fixes: (1) the H1 that went transparent when the two
   title lines were animated separately, (2) the Explore indicator
   overlapping the hero buttons, (3) the founder portrait and copy that
   revealed together, (4) the card arrow nudge that was never implemented.
   Transform and opacity only, gated on html.js, fully reset under
   prefers-reduced-motion. app.css and app.js are not changed.
   ===================================================================== */

/* 1. H1 VISIBILITY. Use a stable solid pearl colour instead of clipped
      transparent gradient text, and animate the whole .hh-title as one
      element (proven reliable) rather than the two child lines. This removes
      the root cause: transformed child spans not inheriting the parent clip. */
.page-home .hh-title {
  background: none !important;
  color: #F4F7FB !important;
  -webkit-text-fill-color: #F4F7FB !important;
  text-shadow: 0 2px 16px rgba(4,16,34,.42);
}
html.js .page-home .hh-title { animation: hhRise 1s cubic-bezier(.22,1,.36,1) .30s both; }
html.js .page-home .hh-l1,
html.js .page-home .hh-l2 { animation: none; opacity: 1; transform: none; }

/* 2. EXPLORE INDICATOR. Hidden at 560px and below, and on short heights.
      At larger widths a little extra hero bottom padding reserves a clear
      gap below the buttons, and the indicator sits low and short. */
@media (max-width: 560px) { .page-home .hh-scroll { display: none; } }
@media (max-height: 700px) { .page-home .hh-scroll { display: none; } }
@media (min-width: 561px) {
  .page-home .lp-hero-home { padding-bottom: calc(clamp(3rem, 5.5vw, 4.75rem) + 3.1rem); }
  .page-home .hh-scroll { bottom: clamp(.75rem, 1.6vh, 1.25rem); gap: .3rem; }
  .page-home .hh-scroll-line { height: clamp(16px, 2.4vh, 24px); }
}

/* 3. FOUNDER ENTRANCE SEQUENCE. The row becomes a passive container; the
      portrait rises first, the copy follows after a short delay. */
html.js .page-home .lp-portrait-row.lp-rise { opacity: 1; transform: none; transition: none; }
html.js .page-home .lp-portrait-row .lp-portrait,
html.js .page-home .lp-portrait-row .lp-portrait-copy {
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
html.js .page-home .lp-portrait-row .lp-portrait { opacity: 0; transform: translateY(18px); }
html.js .page-home .lp-portrait-row .lp-portrait-copy { opacity: 0; transform: translateY(14px); }
html.js .page-home .lp-portrait-row.in .lp-portrait { opacity: 1; transform: none; transition-delay: 0s; }
html.js .page-home .lp-portrait-row.in .lp-portrait-copy { opacity: 1; transform: none; transition-delay: .12s; }
html:not(.js) .page-home .lp-portrait-row .lp-portrait,
html:not(.js) .page-home .lp-portrait-row .lp-portrait-copy { opacity: 1; transform: none; }

/* 4. CARD ARROW NUDGE. Animate the existing lp-link arrow (a pseudo-element
      containing a right arrow) 3px to the right on card hover and keyboard
      focus. No new arrow is created. */
.page-home .lp-card .lp-link::after { transition: transform .2s var(--lp-ease); }
.page-home .lp-card:hover .lp-link::after,
.page-home .lp-card:focus-visible .lp-link::after { transform: translateX(3px); }

/* Reduced motion: show everything at once, no delays, no arrow movement. */
@media (prefers-reduced-motion: reduce) {
  html.js .page-home .hh-title { animation: none; opacity: 1; transform: none; }
  html.js .page-home .lp-portrait-row .lp-portrait,
  html.js .page-home .lp-portrait-row .lp-portrait-copy { opacity: 1; transform: none; transition: none; }
  html.js .page-home .lp-portrait-row.in .lp-portrait,
  html.js .page-home .lp-portrait-row.in .lp-portrait-copy { transition-delay: 0s; }
  .page-home .lp-card .lp-link::after { transition: none; }
  .page-home .lp-card:hover .lp-link::after,
  .page-home .lp-card:focus-visible .lp-link::after { transform: none; }
}

/* =====================================================================
   v37.2 Header tagline removal and homepage hero message. Append only.
   The visible header tagline was removed sitewide, so GPCI is now the
   only brand text. Centre it cleanly beside the logo (no phantom line
   beneath it). The homepage hero supporting message changed from
   "You belong here" to "The Word Works!"; it keeps the existing gold
   italic treatment with a small prominence increase, still well below
   the H1. app.css and app.js are not changed.
   ===================================================================== */

/* Header: GPCI centred as one horizontal unit with the logo. */
.brand-text { display: flex; align-items: center; }

/* Homepage hero message: gold ministry declaration, subordinate to the H1. */
.page-home .hh-support {
  font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
}

/* =======================================================================
   v38.2 Narrow-width contact-link wrapping correction. Append only.
   Long email (mailto) and telephone (tel) links inside main content could
   not wrap at narrow widths, causing slight horizontal overflow on the
   London and Ghana branch pages, Our Network and the Privacy Notice at
   320px, and on the London page also at 375px. This lets those specific
   links wrap safely inside their container. It changes no address, number,
   href or accessible name, and does not affect navigation, buttons, hero
   calls to action, card titles or the footer (which is outside main).
   ======================================================================= */
main a[href^="mailto:"],
main a[href^="tel:"] {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
/* Location and branch phone links carried an intentional nowrap that
   prevented wrapping at very narrow widths. Allow them to wrap. */
.page-locations .lo-nums a {
  white-space: normal;
}
/* A long email address written as plain text (not a link) inside policy
   prose could still push a page a few pixels wide at 320px. Allow long
   unbroken tokens in prose to wrap. Normal words wrap at spaces as usual. */
main .prose {
  overflow-wrap: break-word;
}

/* =======================================================================
   v40 Weekly programme integration on /new-here/london/. Append only.
   Scoped to the Join Us Through the Week section (#weekly-programme).
   The flyers are portrait (1122x1402). The featured overview is capped so
   it introduces the section without dominating the page, and every flyer
   image scales to its container with its natural aspect ratio, so nothing
   is cropped and no horizontal overflow occurs at any width.
   ======================================================================= */
#weekly-programme .wk-intro { margin: 0 0 .6rem; }
#weekly-programme .wk-tz { margin: 0 0 1.6rem; color: var(--lp-gold-deep, #8a6d12); }
#weekly-programme .wk-tz strong { letter-spacing: .01em; }

#weekly-programme .wk-featured {
  margin: 0 auto 1.8rem;
  max-width: 760px;
}
#weekly-programme .wk-featured img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(11, 26, 51, .18);
}
#weekly-programme .wk-cap {
  margin: .7rem auto 0;
  max-width: 760px;
  text-align: center;
  font-size: .92rem;
  color: var(--lp-ink-soft, #4a5568);
}

#weekly-programme .wk-tt-title { margin: 0 0 .8rem; }
#weekly-programme .wk-timetable { margin-top: 0; }

#weekly-programme .wk-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: 1.8rem;
}
#weekly-programme .wk-card { display: flex; flex-direction: column; min-width: 0; }
#weekly-programme .wk-thumb { margin: 0 0 1rem; }
#weekly-programme .wk-thumb img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(11, 26, 51, .14);
}
#weekly-programme .wk-when { margin: 0 0 .4rem; color: var(--lp-navy, #1B2F5B); }

@media (max-width: 560px) {
  #weekly-programme .wk-featured { max-width: 100%; }
  #weekly-programme .wk-cap { max-width: 100%; }
  #weekly-programme .wk-cards { grid-template-columns: minmax(0, 1fr); }
}

/* =======================================================================
   v40.1 Weekly programme correction. Append only.
   Enlarges the featured overview flyer (handled above, 760px desktop) and
   gives every service card its own action button, aligned to the bottom of
   the card so cards of different text lengths stay tidy. Buttons wrap and
   never cause horizontal overflow.
   ======================================================================= */
#weekly-programme .wk-card-btns {
  margin-top: auto;
  padding-top: 1.1rem;
  flex-wrap: wrap;
}
#weekly-programme .wk-card-btns .lp-btn { max-width: 100%; }