/* ============================================================
   OVERFLOW CHURCH — EDITORIAL MINIMALISM
   "Still Waters" — Playfair Display + Hanken Grotesk
   Mobile-first. Dark/light via CSS variables only.
   Full-width layout. Transparent auto-hiding header.
   ============================================================ */

/* ----------------------------------------------------------
   RESET & BASE
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 1rem;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  font-weight: 400;
  color: var(--color-ink);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); }
address { font-style: normal; }

/* ----------------------------------------------------------
   LAYOUT UTILITIES
   ---------------------------------------------------------- */

/* Full-width wrapper with responsive side padding */
.full-width {
  width: 100%;
  padding-inline: clamp(1.25rem, 4vw, 4rem);
}

/* Container — centers content with responsive gutters */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 4rem);
}

/* Container that breaks out to full edge within a section that already has padding
   Use when the section itself manages padding-inline */
.container-flush {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

/* Body text limiter — keeps long-form prose readable on wide screens */
.prose-limit {
  max-width: 68ch;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--color-deep); color: #fff;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  z-index: 200;
}
.skip-link:focus { left: var(--space-2); }

/* Section typography helpers */
.section-label {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.section-label--light { color: rgba(255,255,255,0.7); }

.section-heading {
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 400;
  margin: 0 0 var(--space-3);
  text-align: center;
  max-width: 68ch;
}
.section-heading em {
  font-style: italic;
  color: var(--color-primary);
}
.section-heading--left { text-align: left; }

.section-sub {
  color: var(--color-muted);
  font-size: 1.05rem;
  max-width: 48ch;
  margin: 0 0 var(--space-4);
  text-align: center;
}
.section-sub--left { text-align: left; }

/* Centered section heads/labels/subs (opt-in) */
.section-label--center { text-align: center; }
.section-heading--center { text-align: center; margin-inline: auto; }
.section-sub--center { text-align: center; margin-inline: auto; }

/* Fully centered section: centers heading, label, sub, prose, cards and button
   rows inside. Used on supplemental CTA / intro sections. */
.section-center { text-align: center; }
.section-center .section-label { text-align: center; }
.section-center .section-heading { text-align: center; margin-inline: auto; }
.section-center .section-sub { text-align: center; margin-inline: auto; }
.section-center .prose-body,
.section-center .visit-cta-card { margin-inline: auto; }
.section-center .visit-cta-card > div { justify-content: center; }
.section-center .fivefold-badges { justify-content: center; }

/* Full-width body measure — content fills the container so the left and right
   page gaps are equal (no narrow right-hand gutter). Higher specificity than
   .prose-body so it wins regardless of source order. */
.prose-body.prose-wide,
.prose-wide { max-width: none; }

/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  min-height: 44px;
  border: none;
  cursor: pointer;
  transition: opacity 150ms ease, transform 150ms ease, background-color 150ms ease;
  border-radius: var(--radius);
}
.btn:hover { opacity: 0.88; transform: translateY(-1px); }

.btn-primary-solid {
  background: var(--color-accent);
  color: #fff;
}
.btn-outline-white {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.1);
  opacity: 1;
}
.btn-teal {
  background: var(--color-primary);
  color: #fff;
}
.btn-give {
  background: #fff;
  color: var(--color-deep);
  font-weight: 700;
}
.btn-give:hover { opacity: 0.92; }

/* ----------------------------------------------------------
   PLACEHOLDER BADGE
   ---------------------------------------------------------- */
.placeholder-badge {
  display: inline-block;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-family: var(--font-sans);
  background: #fff3cc;
  color: #7a5200;
  border: 1px dashed #d4a017;
  padding: 0.1rem 0.45rem;
  border-radius: 2px;
  vertical-align: middle;
  margin-inline: 0.15rem;
}
.hero .placeholder-badge {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.35);
  margin-bottom: var(--space-2);
  display: block;
  width: fit-content;
}

/* ----------------------------------------------------------
   SCROLL REVEAL
   ---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}

/* ----------------------------------------------------------
   HEADER — transparent over hero, solid on scroll
   ---------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  /* Start transparent over the hero */
  background: transparent;
  border-bottom: 1px solid transparent;
  /* Only the slide animates; background/border switch instantly so the header
     never flashes a color while hiding (it stays transparent as it slides up) */
  transition: transform 300ms ease;
}

/* Solid state — activated via JS when scrolled past hero */
.site-header.is-solid {
  background: var(--color-bg);
  border-bottom-color: var(--color-line);
  box-shadow: 0 1px 12px rgba(0,0,0,0.06);
}

/* Hidden state — slide up out of view */
.site-header.is-hidden {
  transform: translateY(-100%);
}

/* When is-hidden and is-solid are both set, the slide-up still applies */
.site-header.is-solid.is-hidden {
  transform: translateY(-100%);
}

/* Header inner — full-width with responsive padding */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--header-h);
  padding-inline: clamp(1.25rem, 4vw, 4rem);
  gap: var(--space-3);
  width: 100%;
}

/* Logo / wordmark — flush left */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  /* Push the nav, hamburger, and toggle as a group to the far right */
  margin-right: auto;
}
.brand-logo {
  display: block;
  height: 2.125rem; /* 34px in a 64px bar */
  width: auto;
}
/* White logo over the hero (transparent header, any theme); the full-color
   logo on the solid header in both light and dark mode. */
.brand-logo--color { display: none; }
.site-header.is-solid .brand-logo--white { display: none; }
.site-header.is-solid .brand-logo--color { display: block; }

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

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(var(--space-3), 3vw, var(--space-5));
}
.nav-item { position: relative; }
.nav-link {
  display: block;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--header-text, #fff);
  text-decoration: none;
  padding: 0.4rem 0;
  white-space: nowrap;
  transition: color 150ms ease, opacity 150ms ease;
  opacity: 0.88;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transition: width 200ms ease;
}
.nav-link:hover { opacity: 1; }
.nav-link:hover::after { width: 100%; }

/* When solid, update header text to ink */
.site-header.is-solid {
  --header-text: var(--color-ink-soft);
}

/* Header actions — sits with the nav, grouped to the far right.
   The brand's margin-right:auto pushes this whole cluster right; no auto
   margin here (that would strand the nav in the middle). */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   THEME TOGGLE — sliding pill switch
   ---------------------------------------------------------- */
.theme-toggle {
  position: relative;
  width: 68px;
  height: 32px;
  min-height: 44px;
  padding: 6px 0;
  border: none;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-pill);
}

/* The pill track */
.theme-toggle-track {
  position: relative;
  display: flex;
  align-items: center;
  width: 56px;
  height: 28px;
  border-radius: var(--radius-pill);
  /* Over hero: semi-transparent white track; solid: theme-matched */
  background: rgba(255,255,255,0.22);
  border: 1.5px solid rgba(255,255,255,0.4);
  transition: background 280ms ease, border-color 280ms ease;
  padding: 0 5px;
}
.site-header.is-solid .theme-toggle-track {
  background: var(--color-bg-soft);
  border-color: var(--color-line);
}

/* Sun glyph (left end) */
.theme-toggle-sun,
.theme-toggle-moon {
  font-size: 0.6rem;
  line-height: 1;
  color: rgba(255,255,255,0.75);
  transition: color 280ms ease, opacity 280ms ease;
  user-select: none;
  pointer-events: none;
  flex-shrink: 0;
}
.site-header.is-solid .theme-toggle-sun,
.site-header.is-solid .theme-toggle-moon {
  color: var(--color-muted);
}
.theme-toggle-sun { margin-right: auto; }
.theme-toggle-moon { margin-left: auto; }

/* Sliding knob */
.theme-toggle-knob {
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: left 260ms cubic-bezier(0.34, 1.56, 0.64, 1), background 280ms ease, box-shadow 280ms ease;
}
.site-header.is-solid .theme-toggle-knob {
  background: var(--color-ink);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* Dark theme: knob slides right */
[data-theme="dark"] .theme-toggle-knob {
  left: calc(100% - 23px);
}
[data-theme="dark"] .site-header.is-solid .theme-toggle-knob {
  background: var(--color-accent-light);
}

/* ----------------------------------------------------------
   HAMBURGER toggle — three-bar, ALL widths
   ---------------------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 10px;
  border-radius: var(--radius);
  transition: background 150ms ease;
  flex-shrink: 0;
}
.nav-toggle:hover { background: rgba(255,255,255,0.12); }
.site-header.is-solid .nav-toggle:hover { background: var(--color-bg-soft); }
.nav-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* Single SVG icon — the three bars are drawn in one rasterization pass, so they
   stay even and crisp even on scaled/HiDPI displays that round per-element hairlines. */
.nav-toggle-icon {
  display: block;
  width: 24px;
  height: 18px;
  overflow: visible; /* let the rotated X arms show */
}
.nav-toggle-bar {
  fill: var(--header-text, #fff);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 250ms ease, opacity 200ms ease, fill 280ms ease;
}
/* Open state: X — top and bottom bars meet in the middle and cross; middle fades */
[aria-expanded="true"] .nav-toggle-bar--top { transform: translateY(8px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle-bar--mid { opacity: 0; }
[aria-expanded="true"] .nav-toggle-bar--bot { transform: translateY(-8px) rotate(-45deg); }

/* ----------------------------------------------------------
   MEGA MENU
   ---------------------------------------------------------- */
.mega-menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  z-index: 99;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, transform 250ms ease, visibility 0s 250ms;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.mega-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity 250ms ease, transform 250ms ease;
}

.mega-menu-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-5);
  padding-block: var(--space-4);
  padding-bottom: var(--space-5);
  padding-inline: clamp(1.25rem, 4vw, 4rem);
}

.mega-col {}

.mega-col-heading {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-line);
}
.mega-col-heading:hover { color: var(--color-primary); }

.mega-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mega-link {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  text-decoration: none;
  padding: 0.55rem 0;
  min-height: 44px;
  border-bottom: 1px solid transparent;
  transition: color 150ms ease;
}
.mega-link:hover { color: var(--color-ink); }

.mega-close {
  position: absolute;
  top: var(--space-2);
  right: clamp(1.25rem, 4vw, 4rem);
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.4rem;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, color 150ms ease;
}
.mega-close:hover { background: var(--color-bg-soft); color: var(--color-ink); }
.mega-close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.mega-overlay {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(0,0,0,0.3);
  z-index: 98;
  backdrop-filter: blur(2px);
}
.mega-overlay.is-active { display: block; }

/* ----------------------------------------------------------
   HERO — full-bleed to the top, starts behind transparent header
   ---------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  /* Extend to very top of page — header overlays it */
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: #fff;
  /* No top margin — hero goes edge-to-edge */
}

/* Layered background: brand-blue gradient mesh — no photo required */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 35%, #1772c2 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 70%, #0a3a66 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 50% 10%, #4dc4e8 0%, transparent 50%),
    linear-gradient(170deg, #082742 0%, #0e4f86 45%, #061d33 100%);
}
/* SVG noise grain for depth */
.hero-bg-grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ----------------------------------------------------------
   HERO — full-bleed looping river video
   ---------------------------------------------------------- */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

/* Scrim for headline legibility over the moving video (light touch — the panel
   carries most of the contrast now) */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(6,20,33,0.42) 0%, rgba(6,20,33,0.14) 42%, rgba(6,20,33,0) 70%),
    linear-gradient(to top, rgba(6,20,33,0.28) 0%, rgba(6,20,33,0) 45%);
}

/* Frosted panel behind the hero copy — keeps text legible over the moving video */
.hero-panel {
  width: fit-content;
  max-width: 100%;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border-radius: 18px;
  background: rgba(6, 20, 33, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

/* Reduced motion: no video — fall back to the calm gradient-mesh hero */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

.hero-inner {
  position: relative;
  z-index: 4;
  width: 100%;
  padding-inline: clamp(1.25rem, 4vw, 4rem);
  /* Top padding clears the transparent fixed header */
  padding-top: calc(var(--header-h) + var(--space-6));
  padding-bottom: var(--space-7);
  /* Wide enough that "Overflow Church" stays on one line inside the panel */
  max-width: 72rem;
}

.hero-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  margin: 0 0 var(--space-3);
  /* Crisp + soft shadow keeps small text readable over bright video */
  text-shadow: 0 1px 3px rgba(6,20,33,0.7), 0 1px 12px rgba(6,20,33,0.4);
}

/* Bigger, bolder, editorial hero headline. Lower clamp floor so "Overflow Church"
   stays on one line down through phone widths (it needs ~39px at 390px). */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 9vw, 6.5rem);
  font-weight: 700;
  line-height: 1.02;
  margin: 0 0 var(--space-3);
  color: #fff;
  /* No max-width cap — let "Overflow Church" stay on one line where there's room */
  max-width: none;
  /* Soft halo lifts the headline off the bright, moving video */
  text-shadow: 0 2px 20px rgba(6, 20, 33, 0.45);
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
  /* Brighter brand blue (was the darker primary) for legibility over the video */
  color: var(--color-accent-light);
}

.hero-sub {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 400;
  color: #fff;
  /* No width cap — one line on desktop; wraps naturally on small screens */
  max-width: none;
  margin: 0 0 var(--space-3);
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(6,20,33,0.7), 0 1px 12px rgba(6,20,33,0.4);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Staggered delay for reveal animations in hero */
[data-delay="0"] { transition-delay: 0ms; }
[data-delay="80"] { transition-delay: 80ms; }
[data-delay="160"] { transition-delay: 160ms; }
[data-delay="240"] { transition-delay: 240ms; }
[data-delay="320"] { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  [data-delay] { transition-delay: 0ms !important; }
}

/* ----------------------------------------------------------
   VISIT INVITE (Section 2)
   ---------------------------------------------------------- */
.visit-invite {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-line);
  /* Section spans full width; .container inside handles side padding */
}
.visit-inner {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
.visit-detail-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.visit-detail {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--space-2);
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-line);
  align-items: baseline;
}
.visit-detail-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.visit-detail-value {
  font-size: 0.98rem;
  color: var(--color-ink);
}
.visit-lead {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-4);
  max-width: 54ch;
}
/* Home "Plan Your Visit" photo (scoped to .visit-invite so it doesn't affect
   the Visit page, which reuses .visit-aside for a text box). */
.visit-invite .visit-aside {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  align-self: center;
}
.visit-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Visit page "What to Expect" text aside */
.visit-aside-card {
  padding: var(--space-4);
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-tint);
}
.visit-aside-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
  margin: 0;
  max-width: 56ch;
}

/* ----------------------------------------------------------
   CORE VALUES (Section 3)
   ---------------------------------------------------------- */
.values {
  padding-block: var(--space-6);
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-line);
  /* Full-width background; .container inside handles side padding */
}
.values-inner {
  max-width: var(--container);
  margin-inline: auto;
}
.values .section-label,
.values .section-heading {
  text-align: center;
  display: block;
}
.value-grid {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  grid-template-columns: 1fr;
}
.value-card {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
/* Hover: lift the card slightly and float it on a soft shadow, with the accent
   border picking up to match the Connect cards. Restrained, not flashy. */
.value-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(8, 39, 66, 0.12);
}
.value-number {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 400;
  color: var(--color-line);
  line-height: 1;
  user-select: none;
  /* No transition on the base state, so leaving hover snaps straight back */
}
/* Hover: bring the number up to the deeper brand blue (not the bright cyan),
   fading in smoothly. Opacity stays at 1 so there is no flash on the way out. */
.value-card:hover .value-number {
  color: var(--color-primary);
  transition: color 180ms ease;
}
.value-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}
.value-text {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.65;
  max-width: 38ch;
}

/* ----------------------------------------------------------
   CONNECT (Section 4)
   ---------------------------------------------------------- */
.connect-section {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-line);
}
.connect-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.connect-grid {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  width: 100%;
  text-align: left;
}
.connect-card {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  background: var(--color-bg-soft);
  /* Flex column so the inline link can be pinned to the bottom of every card,
     keeping all the links aligned on one horizontal line across the row. */
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.connect-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(8, 39, 66, 0.12);
}
.connect-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  margin: 0 0 var(--space-1);
  color: var(--color-ink);
  /* Keep every title on a single line so the cards read uniformly */
  white-space: nowrap;
}
.connect-card-text {
  font-size: 0.92rem;
  color: var(--color-muted);
  margin: 0 0 var(--space-3);
  line-height: 1.55;
  max-width: 36ch;
}
.inline-link {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  text-decoration: none;
}
/* Inside a connect card, push the link to the bottom so links align across cards */
.connect-card .inline-link { margin-top: auto; }

/* Dark mode: a plain drop shadow disappears on the dark background, so the
   hovered card lifts on a soft accent glow instead. */
:root[data-theme="dark"] .value-card:hover,
:root[data-theme="dark"] .connect-card:hover {
  box-shadow: 0 0 0 1px rgba(77, 196, 232, 0.35), 0 14px 38px rgba(77, 196, 232, 0.16);
}
.inline-link:hover { text-decoration: underline; }

/* ----------------------------------------------------------
   WATCH (Section 5)
   ---------------------------------------------------------- */
.watch-section {
  padding-block: var(--space-6);
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-line);
}
.watch-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
/* YouTube facade: thumbnail + play button until clicked, then swapped for the
   real player by main.js. Keeps the landing page from loading the YT player. */
.yt-facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  background-color: var(--color-deep);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
  transition: opacity 200ms ease;
}
.yt-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  transition: background 200ms ease;
}
.yt-facade:hover::after,
.yt-facade:focus-visible::after { background: rgba(0, 0, 0, 0.05); }
.yt-facade-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  padding-left: 0.35rem;
  font-size: 1.6rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  transition: background 200ms ease, transform 200ms ease;
}
.yt-facade:hover .yt-facade-play,
.yt-facade:focus-visible .yt-facade-play {
  background: var(--color-teal, rgba(0, 0, 0, 0.75));
  transform: translate(-50%, -50%) scale(1.06);
}
/* The injected iframe fills the same 16:9 box. */
.watch-thumb iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: var(--radius);
}

/* ----------------------------------------------------------
   EVENTS (Section 6)
   ---------------------------------------------------------- */
.events-section {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-line);
}
.events-section .section-label,
.events-section .section-heading {
  text-align: left;
  display: block;
}
.events-inner {
  /* inner container applied via .container in template */
}
.events-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.event-card {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  background: var(--color-bg-soft);
  align-items: start;
  transition: border-color 200ms ease;
}
.event-card:hover { border-color: var(--color-accent); }
.event-card-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid var(--color-line);
  padding-right: var(--space-3);
}
.event-month {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.event-day {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--color-ink);
  line-height: 1;
}
.event-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  margin: 0 0 0.35rem;
  color: var(--color-ink);
}
.event-meta {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 0;
}
.events-footer { margin-top: var(--space-2); }

/* ----------------------------------------------------------
   GIVE BAND (Section 7)
   ---------------------------------------------------------- */
.give-band {
  background:
    radial-gradient(ellipse 70% 80% at 100% 50%, #1772c2 0%, transparent 60%),
    linear-gradient(135deg, #082742 0%, #0e4f86 100%);
  color: #fff;
  padding-block: var(--space-6);
}
.give-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
.give-content { min-width: 0; }
.give-verse {
  margin: 0;
}
.give-verse-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.55rem, 3.8vw, 2.4rem);
  line-height: 1.35;
  color: #fff;
  margin: 0 0 var(--space-3);
}
.give-verse-ref {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.give-heading {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 400;
  margin: 0 0 var(--space-3);
  color: #fff;
  max-width: 22ch;
}
.give-heading em {
  font-style: italic;
  color: var(--color-accent);
}
.give-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.65);
  max-width: 44ch;
  margin: 0 0 var(--space-4);
  line-height: 1.65;
}
.give-band .placeholder-badge {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.35);
}

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */
.site-footer {
  background: var(--color-footer);
  color: rgba(255,255,255,0.62);
  font-size: 0.9rem;
}
.footer-inner {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6) var(--space-3);
  grid-template-columns: 1fr;
}
.site-footer a { color: rgba(255,255,255,0.7); text-decoration: none; }
.site-footer a:hover { color: #fff; }

.footer-address {
  line-height: 1.9;
}
.footer-address p { margin: 0; }
.footer-heading {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.65rem; }
/* Nav columns: brighter links so Explore / Resources stand out from the address */
.footer-col--nav a { color: rgba(255,255,255,0.88); }
.footer-col--nav a:hover { color: var(--color-accent); }
.footer-copy {
  margin: var(--space-4) 0 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.40);
}

/* Oversized brand wordmark (the logo lockup) spanning the full width at the
   very bottom of the footer. Shown whole, sitting large near the bottom edge. */
.footer-wordmark-band {
  padding-top: var(--space-3);
  /* No bottom padding so the wordmark sits flush with the bottom of the page. */
  padding-bottom: 0;
  /* Inset to the same gutter as the rest of the footer so the wordmark sits
     intentionally rather than bleeding off the screen edges. */
  padding-inline: clamp(1.25rem, 4vw, 4rem);
}
.footer-wordmark-giant {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.16;
  user-select: none;
  pointer-events: none;
}

/* Center both nav columns (heading + links) so they read symmetrically */
.footer-col--nav { text-align: center; }
/* Explore: two columns of links under the centered heading */
.footer-col--explore ul {
  column-count: 2;
  column-gap: calc(var(--space-5) / 2);
}
.footer-col--explore li { break-inside: avoid; }

/* ----------------------------------------------------------
   DESKTOP BREAKPOINTS (48rem+)
   ---------------------------------------------------------- */
@media (min-width: 48rem) {

  /* Desktop inline nav — shown alongside hamburger */
  .primary-nav { display: block; }
  /* Hamburger stays visible at desktop (unlike previous design) */

  /* Mega menu grid: more columns on desktop */
  .mega-menu-inner {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5) var(--space-6);
    padding-block: var(--space-5);
  }

  /* Visit section 2-col */
  .visit-inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  /* Home Plan Your Visit: intro + details stacked on the left, photo on the
     right spanning both (vertically centered). On mobile (below this query) the
     three blocks simply stack in source order: intro, photo, details. */
  .visit-invite .visit-inner {
    grid-template-areas:
      "intro photo"
      "details photo";
  }
  .visit-invite .visit-intro { grid-area: intro; }
  .visit-invite .visit-aside { grid-area: photo; }
  .visit-invite .visit-details { grid-area: details; }

  /* Values 2-col */
  .value-grid { grid-template-columns: repeat(2, 1fr); }

  /* Connect 2-col */
  .connect-grid { grid-template-columns: repeat(2, 1fr); }

  /* Watch 2-col */
  .watch-inner { grid-template-columns: 1fr 1fr; }

  /* Events 2-col */
  .events-row { grid-template-columns: repeat(2, 1fr); }

  /* Give band: content pinned to the page-container left edge, verse extends
     right into the full-width band with a generous gap. */
  /* Content + verse sit as one block, centered in the band with equal margins
     to both screen edges, while keeping the same column widths (and verse
     width) as before. Splitting the container slack in four puts an equal
     margin on each side. */
  .give-inner {
    width: auto;
    max-width: none;
    margin-inline: max(0px, calc((100% - var(--container)) / 4));
    grid-template-columns: minmax(26rem, 34rem) minmax(0, 1fr);
    gap: var(--space-6);
  }

  /* Footer 3-col */
  .footer-inner { grid-template-columns: 2fr 1fr 1fr; }
}

@media (min-width: 64rem) {
  /* Values 4-col */
  .value-grid { grid-template-columns: repeat(4, 1fr); }

  /* Connect 4-col */
  .connect-grid { grid-template-columns: repeat(4, 1fr); }

  /* Mega menu: all 6 cols */
  .mega-menu-inner { grid-template-columns: repeat(6, 1fr); }
  .mega-col-list { gap: 0; }
}

/* ----------------------------------------------------------
   FOCUS STYLES (accessibility)
   ---------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
a:focus-visible,
button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* ----------------------------------------------------------
   REDUCED MOTION — skip header slide animation
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
  .site-header.is-hidden {
    /* Still hide but without animation */
    transform: translateY(-100%);
    transition: none;
  }
}

/* ----------------------------------------------------------
   INTERIOR PAGE HERO — lighter variant for inner pages
   Shares brand-blue DNA with the home hero but at ~40vh height.
   ---------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  min-height: 36vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  padding-bottom: var(--space-6);
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 10% 40%, #1772c2 0%, transparent 55%),
    radial-gradient(ellipse 55% 70% at 90% 60%, #0a3a66 0%, transparent 50%),
    radial-gradient(ellipse 40% 50% at 60% 0%, #4dc4e8 0%, transparent 45%),
    linear-gradient(160deg, #082742 0%, #0e4f86 55%, #061d33 100%);
}
.page-hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-inline: clamp(1.25rem, 4vw, 4rem);
  padding-top: calc(var(--header-h) + var(--space-5));
  max-width: var(--container);
  margin-inline: auto;
  text-align: center;
}
/* Hidden on the supplementary pages: the eyebrow just restated the page title,
   which read oddly. Kept in the markup for structure/breadcrumb context. */
.page-hero-eyebrow {
  display: none;
}
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.8rem);
  font-weight: 600;
  line-height: 1.06;
  margin: 0 auto var(--space-2);
  color: #fff;
  max-width: 24ch;
}
.page-hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
}
.page-hero-sub {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  font-weight: 300;
  color: rgba(255,255,255,0.72);
  max-width: 48ch;
  margin: 0 auto;
  line-height: 1.6;
}

/* ----------------------------------------------------------
   INTERIOR CONTENT SECTIONS
   ---------------------------------------------------------- */

/* Generic padded section */
.content-section {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-line);
}
.content-section:last-child { border-bottom: none; }

/* Prose section — constrained measure */
.prose-section {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-line);
}
.prose-section:last-child { border-bottom: none; }
.prose-body {
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-ink-soft);
}
.prose-body p { margin: 0 0 var(--space-3); }
.prose-body p:last-child { margin-bottom: 0; }
.prose-body ul {
  margin: 0 0 var(--space-3);
  padding-left: 1.4em;
}
.prose-body li { margin-bottom: 0.5rem; line-height: 1.65; }
.prose-body strong { color: var(--color-ink); font-weight: 600; }
.prose-body a { color: var(--color-primary); }
.prose-body a:hover { text-decoration: underline; }

/* ----------------------------------------------------------
   ACCORDION (details / summary — native HTML, no JS)
   ---------------------------------------------------------- */
.accordion-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}
.accordion-item {
  border-bottom: 1px solid var(--color-line);
}
.accordion-item details {
  /* Removes native disclosure marker fully in most browsers */
}
.accordion-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) 0;
  gap: var(--space-3);
  min-height: 44px;
  user-select: none;
}
/* Hide the native marker in WebKit */
.accordion-item summary::-webkit-details-marker { display: none; }
/* Hide in Firefox */
.accordion-item summary::marker { display: none; }

.accordion-summary-text {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 400;
  color: var(--color-ink);
  line-height: 1.2;
}
/* Clean minimal chevron (a thin "v"), no circle */
.accordion-caret {
  flex-shrink: 0;
  position: relative;
  width: 18px;
  height: 18px;
  color: transparent;
  font-size: 0;
  transition: transform 280ms ease;
}
.accordion-caret::before {
  content: "";
  position: absolute;
  top: 35%;
  left: 50%;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transition: border-color 200ms ease;
}
details[open] .accordion-caret {
  transform: rotate(180deg);
}
details[open] .accordion-caret::before {
  border-color: var(--color-accent);
}
.accordion-body {
  padding: 0 0 var(--space-4);
  max-width: none;
}
.accordion-body p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-3);
}
.accordion-body p:last-child { margin-bottom: 0; }
.accordion-body a { color: var(--color-primary); }
.accordion-body a:hover { text-decoration: underline; }

/* Core value blocks (full text inside the About accordion) */
.value-block { margin-bottom: var(--space-4); }
.value-block:last-child { margin-bottom: 0; }
.value-block-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0 0 var(--space-1);
  color: var(--color-ink);
}
.value-block-tagline {
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 var(--space-1);
}

/* Belief topic list (summary on the About accordion) */
.belief-topic-list {
  margin: var(--space-2) 0 var(--space-3);
  padding-left: 1.1rem;
  columns: 2;
  color: var(--color-ink-soft);
}
.belief-topic-list li { margin-bottom: 0.3rem; }

/* Full-vision lead sentence */
.vision-lead {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  line-height: 1.4;
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}

/* ----------------------------------------------------------
   VISIT PAGE — location block + map
   ---------------------------------------------------------- */
.visit-map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.visit-map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.visit-cta-card {
  background: var(--color-bg-tint);
  border: 1px solid var(--color-line);
  padding: var(--space-4);
  margin-top: var(--space-4);
}
.visit-cta-card p {
  font-size: 1.05rem;
  color: var(--color-ink-soft);
  line-height: 1.7;
  margin: 0 0 var(--space-3);
}
.visit-cta-card p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------
   VISIT PAGE — community heat map
   ---------------------------------------------------------- */
.heatmap-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.12);
  margin-top: var(--space-4);
}
.heatmap-img {
  display: block;
  width: 100%;
  height: auto;
}
/* Default: show light image via <picture>, hide theme-dark img */
.heatmap-img--theme-dark {
  display: none;
}
/* When site dark theme is active via data-theme="dark" on <html> */
:root[data-theme="dark"] .heatmap-img--default {
  display: none;
}
:root[data-theme="dark"] .heatmap-img--theme-dark {
  display: block;
}
/* Driven purely by the site theme (data-theme is always set on load), so the
   light map shows on the light site and the dark map on the dark site,
   regardless of the OS color preference. */
:root[data-theme="light"] .heatmap-img--default {
  display: block;
}
:root[data-theme="light"] .heatmap-img--theme-dark {
  display: none;
}

/* ----------------------------------------------------------
   STAFF / TEAM GRID
   ---------------------------------------------------------- */
.team-grid {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Mobile: one card per row so the names/titles get the full width */
  flex: 0 1 100%;
  border: 1px solid var(--color-line);
  background: var(--color-bg-soft);
  padding: var(--space-4) var(--space-3);
  transition: border-color 200ms ease;
}
/* Tablet: a few across */
@media (min-width: 48rem) {
  .team-card { flex: 0 1 160px; }
}
/* Exactly five across on desktop; partial last row stays centered */
@media (min-width: 64rem) {
  .team-card { flex: 0 0 calc((100% - 4 * var(--space-3)) / 5 - 2px); }
}
.team-card:hover { border-color: var(--color-accent); }
.team-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}
.team-photo {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--color-bg-soft);
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}
.team-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--color-ink);
  margin: 0 0 0.3rem;
}
.team-title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
}

/* ----------------------------------------------------------
   CONNECT PAGE — full hub cards
   ---------------------------------------------------------- */
.connect-hub-grid {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.connect-hub-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  background: var(--color-bg-soft);
  padding: var(--space-4);
  transition: border-color 200ms ease;
}
.connect-hub-card:hover { border-color: var(--color-accent); }
/* Push each card's CTA link to the bottom so they align across a row */
.connect-hub-card .inline-link { margin-top: auto; }
.connect-hub-number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--color-line);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.connect-hub-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
}
.connect-hub-text {
  font-size: 0.97rem;
  color: var(--color-muted);
  margin: 0 0 var(--space-3);
  line-height: 1.6;
  max-width: 52ch;
}
.connect-hub-card:hover .connect-hub-number {
  color: var(--color-accent);
  transition: color 180ms ease;
}

@media (min-width: 48rem) {
  .connect-hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  .connect-hub-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ----------------------------------------------------------
   BELIEFS / LONG-FORM DOC — belief items
   ---------------------------------------------------------- */
.beliefs-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.belief-item {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-3);
}
.belief-heading {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
}
.belief-text {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
  margin: 0;
}

/* Single full-width column so each statement spans the page; shorter rows */
.beliefs-list {
  grid-template-columns: 1fr;
}

/* ----------------------------------------------------------
   ABOUT PAGE FIVE-FOLD TEASER
   ---------------------------------------------------------- */
.fivefold-teaser {
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  background: var(--color-bg-tint);
  border-top: 3px solid var(--color-primary);
  margin-top: var(--space-4);
}
.fivefold-teaser p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-2);
}
.fivefold-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-2) 0 var(--space-3);
}
.fivefold-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  background: transparent;
}

/* ----------------------------------------------------------
   MOBILE-ONLY ADJUSTMENTS (below 48rem)
   ---------------------------------------------------------- */
@media (max-width: 47.99rem) {
  /* Home header eyebrow: stack on three lines, drop the separator dot */
  .hero-eyebrow .he-dot { display: none; }
  .hero-eyebrow .he-part { display: block; }

  /* Tighten the gap above and below the Plan Your Visit photo on mobile */
  .visit-invite .visit-inner { gap: var(--space-3); }

  /* Smaller Give verse on mobile */
  .give-verse-text { font-size: 1.25rem; }

  /* Five-fold badges: compact enough to wrap 3 + 2 (no orphaned single row) */
  .fivefold-badges { gap: 0.3rem; }
  .fivefold-badge {
    font-size: 0.6rem;
    letter-spacing: 0.03em;
    padding: 0.24rem 0.4rem;
  }
}