/* ==========================================================================
   The Freedom Church — Homepage
   Vanilla HTML5 / CSS3 / JS. Fluid, rem-based layout system.
   Breakpoints standardized to 768px (tablet) and 1024px (desktop).
   ========================================================================== */

:root {
  /* --- Color System --- */
  --white: #FFFFFF;
  --cream: #FBEAE5;
  --ink: #000000;
  --body-light: #696969;

  --dark-1: #131313;
  --dark-2: #090808;

  --accent: #B83D1E;
  --accent-bright: #EB4D25;
  --tag-dark: #EAEAEA;

  /* --- Gradient System --- */
  --grad-primary: linear-gradient(90deg, #080808 -5.34%, #EB4D25 125.77%);
  --grad-card: linear-gradient(145deg, #B83D1E -36.92%, #170D0A 100.69%);
  --grad-evolve: linear-gradient(90deg, #B83D1E 0%, #FFFFFF 100%);
  --grad-footer: linear-gradient(180deg, #1B0D0F 0%, #030101 100%);

  /* --- Shadows --- */
  --shadow-hard: 0.1875rem 0.25rem 0 0 #000000;
  --shadow-outline: 0.25rem 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.60);

  --radius: 0.5rem;      /* 8px — the one radius used everywhere, no pills */
  --shell: 90rem;        /* 1440px */

  --font: "Manrope", "Segoe UI", sans-serif;

  /* Fluid section rhythm */
  --section-pad-mobile: clamp(3rem, 8vw, 4rem) 1.5rem;   /* ~48-64px vertical, 24px horizontal */
  --section-pad-mobile-y: clamp(3rem, 8vw, 4rem);           /* vertical only, for .section (horizontal comes from .shell) */
  --section-pad-desktop-y: 7rem;                            /* 112px */
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 100%; overflow-x: hidden; max-width: 100vw; } /* 1rem = 16px */
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
  max-width: 100vw;
  overflow-wrap: break-word; /* safety net for long emails/URLs on narrow phones */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; background: none; border: none; }
input { font-family: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font); }
p { margin: 0; }

:focus-visible { outline: 0.125rem solid var(--accent); outline-offset: 0.1875rem; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-left: auto;
  margin-right: auto;
  padding-inline: 1.5rem;
}

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

/* ==========================================================================
   Typography — fluid clamp() scale
   ========================================================================== */

/* Hero word stack - clamp(2rem, 6vw, 4rem) approx 32px-64px */
.hero-word {
  display: block;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.08;
}
.hero-word--regular { font-weight: 500; color: var(--white); }
.hero-word--accent {
  font-weight: 800;
  background: var(--grad-evolve);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* H2 - major section headings: clamp(2rem, 4vw, 3.5rem) approx 32px-56px, 700 */
.h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.12;
}

/* H3 - general card titles (event cards etc.): 1.25rem-2rem, 700 */
.h3 {
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}

/* Body / descriptions: clamp(1rem, 1.6vw, 1.25rem) approx 16px-20px */
.body-text {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
}

/* Tags / sub-labels: clamp(0.75rem, 1.2vw, 1rem) approx 12px-16px, 600, uppercase */
.tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: clamp(0.75rem, 1.2vw, 1rem);
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 0.875rem;
}
.tag--left { justify-content: flex-start; }
.tag__star { color: var(--accent); }

/* Light background: gradient-clipped tag text */
.tag--on-light .tag__label,
.tag--on-light .tag__star {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Dark background: gradient-clipped tag text (matches --on-light and
   --vert-light so every tag on the site reads as a gradient consistently).
   Uses a bright orange-to-rust gradient rather than one that fades toward
   black, so it stays visible against a dark section background. */
.tag--on-dark .tag__label,
.tag--on-dark .tag__star {
  background: linear-gradient(180deg, #EB4D25 0%, #B83D1E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Micro / legal text */
.micro { font-size: 0.75rem; font-weight: 400; line-height: 1.4; }

/* ==========================================================================
   Button System - one radius (0.5rem), no pills, anywhere
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 1rem;
  border-radius: var(--radius);
  font-family: var(--font);
  white-space: nowrap;
  transition: transform 0.15s ease;
}
.btn:hover { transform: translateY(-0.0625rem); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1rem; height: 1rem; }

.btn--primary {
  background: var(--grad-primary);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  box-shadow: var(--shadow-hard);
  border: none;
}

.btn--outline-dark {
  border: 1px solid var(--white);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--shadow-outline);
  background: transparent;
}

.btn--outline-light {
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--shadow-outline);
  background: transparent;
}

.btn--full { width: 100%; }
.btn--uppercase { text-transform: uppercase; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  background: var(--dark-2);
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.25);
}
/* Mobile menu always needs a solid backing so links stay readable
   regardless of what's behind the transparent header. */
.site-header .site-header__mobile-menu {
  background: var(--dark-2);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
  gap: 2rem;
}
.logo { display: flex; align-items: center; gap: 0.625rem; order: 1; }
.logo img { height: 2.5rem; width: 2.5rem; }
.logo__word {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  border-left: 1px solid rgba(255,255,255,0.3);
  padding-left: 0.625rem;
}

.nav { display: none; order: 2; }
.nav__list { display: flex; align-items: center; gap: 2.125rem; }
.nav__link {
  font-size: 0.875rem; font-weight: 500; color: #cfcfcf;
  transition: color 0.15s ease;
}
.nav__link:hover { color: var(--white); }
.nav__link.is-active { color: var(--accent); }

.header__cta { display: none; order: 3; margin-left: 0.5rem; }

.nav-toggle {
  display: inline-flex; order: 4; color: var(--white); padding: 0.375rem;
  position: relative;
}
.nav-toggle svg { width: 1.625rem; height: 1.625rem; }
.nav-toggle__icon--close { display: none; }
.site-header.is-open .nav-toggle__icon--open { display: none; }
.site-header.is-open .nav-toggle__icon--close { display: block; }

@media (min-width: 64rem) { /* 1024px */
  .nav { display: flex; }
  .header__cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

.site-header__mobile-menu {
  display: none;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 1rem 1.5rem 1.5rem;
}
.site-header.is-open .site-header__mobile-menu { display: block; }
.site-header__mobile-menu .nav__list { flex-direction: column; align-items: flex-start; gap: 1.125rem; }
.site-header__mobile-menu .btn { margin-top: 1rem; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 44rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  background: var(--dark-2);
  padding: 9rem 1.5rem;
  overflow: hidden;
}
@media (max-width: 47.9375rem) {
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
  }
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 2.2s ease-in-out;
}
.hero__slide.is-active { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,8,12,0.55) 0%, rgba(6,8,12,0.45) 40%, rgba(6,8,12,0.85) 100%);
}
.hero__inner { position: relative; z-index: 1; max-width: 40rem; }
.hero__eyebrow {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.125rem;
  letter-spacing: normal;
  text-transform: uppercase;
  margin-bottom: 1.125rem;
  background: linear-gradient(90deg, #B83D1E 0%, #FFFFFF 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.375rem;
  padding: 0.25rem 1rem;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--white);
  background: linear-gradient(90deg, #070707 -20.79%, #EA5128 438.39%);
  border: 0.04375rem solid #10100F; /* 0.7px */
  border-radius: 6.25rem;
}
.hero__actions {
  margin-top: 1.75rem; display: flex; align-items: center; justify-content: center;
  gap: 0.875rem; flex-wrap: wrap; width: 100%;
}
.hero__actions .btn { width: 100%; max-width: 22rem; }
@media (min-width: 30rem) {
  .hero__actions { width: auto; }
  .hero__actions .btn { width: auto; max-width: none; }
}
.hero__actions .btn { text-transform: uppercase; }

/* ==========================================================================
   Standard section spacing - mobile: content-driven; desktop: min-height floor
   ========================================================================== */
.section {
  width: 100%;
  padding-block: var(--section-pad-mobile-y);
  min-height: auto;
}
@media (min-width: 64rem) { /* 1024px */
  .section {
    padding-top: var(--section-pad-desktop-y);
    padding-bottom: var(--section-pad-desktop-y);
    min-height: 50rem; /* 800px floor */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
/* .section always wraps a single .shell child — .shell is the one and only
   source of horizontal padding here, matching Welcome Home's pattern
   exactly (24px mobile, 64px desktop). Never add horizontal padding to
   .section itself, or it will double up with .shell's own padding. */
.section > .shell {
  padding-inline: 1.5rem;
}
@media (min-width: 64rem) {
  .section > .shell { padding-inline: 4rem; }
}
.section--dark { background: var(--dark-1); color: var(--white); }

/* ==========================================================================
   Welcome / From the Lead Pastor
   ========================================================================== */
.welcome { display: flex; flex-direction: column; width: 100%; }
@media (min-width: 64rem) {
  .welcome { flex-direction: row; align-items: stretch; justify-content: space-between; }
}
.welcome__text {
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--section-pad-mobile-y);
  padding-bottom: var(--section-pad-mobile-y);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  flex: 1 1 0%;
  min-width: 0;
}
@media (min-width: 64rem) {
  .welcome__text {
    padding-top: var(--section-pad-desktop-y);
    padding-bottom: var(--section-pad-desktop-y);
    padding-left: 4rem;
    padding-right: 4rem;
    min-height: 50rem;
  }
}
.welcome__text .h2 { margin-bottom: 1.25rem; }
.welcome__text .body-text { color: var(--body-light); max-width: 29rem; margin-bottom: 1.375rem; }
.welcome__signature { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); text-transform: uppercase; }
.welcome__media {
  position: relative; min-height: 21.25rem; background-size: cover; background-position: center 20%;
  flex: 1 1 0%;
  order: -1;
}
@media (min-width: 64rem) { .welcome__media { min-height: 50rem; order: 0; } }
.play-button {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 5rem; height: 5rem; border-radius: 50%;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-hard);
}
.play-button svg { width: 1.625rem; height: 1.625rem; margin-left: 0.1875rem; fill: var(--white); }

/* ==========================================================================
   Who We Are
   ========================================================================== */
.who-wrap { width: 100%; }
.who-wrap .shell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3rem;
  padding-top: var(--section-pad-mobile-y);
  padding-bottom: var(--section-pad-mobile-y);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  min-height: auto;
}
@media (min-width: 64rem) {
  .who-wrap .shell {
    flex-direction: row; justify-content: center; align-items: center;
    gap: 6.25rem;
    padding: 7rem 4rem;
    min-height: 50rem;
  }
}
.who__badge {
  width: 100%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: flex-start;
}
@media (min-width: 64rem) { .who__badge { width: auto; justify-content: flex-start; } }
.who__badge img {
  width: 100%; max-width: 20rem; aspect-ratio: 1 / 1; border-radius: 50%;
  overflow: hidden; object-fit: cover; background: #d9d9d9;
  flex-shrink: 0;
}
@media (min-width: 64rem) { .who__badge img { width: 40.625rem; max-width: 40.625rem; height: 40.625rem; } }
.who__text { text-align: left; width: 100%; order: -1; }
.who__text .tag { justify-content: flex-start; }
@media (min-width: 64rem) {
  .who__text { flex: 1; order: 0; }
}
.who__text .h2 { margin-bottom: 1.125rem; max-width: 34rem; }
.who__text .body-text { color: var(--body-light); max-width: 34rem; margin-bottom: 1.625rem; }

/* ==========================================================================
   Experience - "Find The Right Experience For You"
   ========================================================================== */
.experience__head { text-align: center; max-width: 40rem; margin: 0 auto 3rem; }
.experience__head .h2 { margin-bottom: 0.875rem; }
.experience__head .body-text { color: var(--body-light); }

.experience__grid {
  display: flex; flex-direction: column; gap: 1.5rem; width: 100%;
}
@media (min-width: 64rem) {
  .experience__grid { flex-direction: row; align-items: stretch; justify-content: space-between; }
}

/* Physical Location - 640px equivalent, flex row, cream bg */
.exp-card--location {
  background: var(--cream);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  overflow: hidden;
}
@media (min-width: 40rem) {
  .exp-card--location { flex-direction: row; }
}
@media (min-width: 64rem) {
  .exp-card--location { width: 40rem; flex-shrink: 0; }
}
.exp-card--location .exp-card__body {
  flex: 1; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  align-self: stretch;
}
.exp-card--location .exp-card__body p { color: #5b4c47; }
.exp-card--location .exp-card__image {
  flex: 1;
  min-height: 12.5rem;
  align-self: stretch;
  width: 100%;
  overflow: hidden;
}
.exp-card--location .exp-card__image img {
  width: 100%;
  height: 100%;
  min-height: 12.5rem;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 39.9375rem) {
  .exp-card--location .exp-card__image {
    flex: none;
    aspect-ratio: 350 / 230;
  }
  .exp-card--location .exp-card__image img {
    aspect-ratio: 350 / 230;
    height: auto;
  }
}

/* Watch Online / Become a Member */
.exp-card--dark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem;
  gap: 1.5rem;
  flex: 1 0 0;
  align-self: stretch;
  min-height: 21.25rem;
  border-radius: var(--radius);
  background: var(--grad-card);
  color: var(--white);
}
.exp-card--dark .exp-card__body p { color: var(--white); margin-top: 0.75rem; }
.exp-card--dark .btn { margin-top: auto; }

/* Experience card typography + button width overrides (spec section 2) */
.exp-card__body h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  font-family: var(--font);
}
.exp-card__body .body-text {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 400;
  font-family: var(--font);
}
.exp-card--location .btn,
.exp-card--dark .btn {
  align-self: flex-start;
  width: 100%;
  max-width: 9.1875rem; /* 147px, standardized across all three cards */
}

/* ==========================================================================
   Programs / Happening at TFC
   ========================================================================== */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem; margin-bottom: 2.5rem; flex-wrap: wrap; width: 100%;
}

.event-feature-mobile { display: block; margin-bottom: 1.75rem; width: 100%; }
.event-feature-mobile img { width: 100%; height: auto; display: block; border-radius: 0; }
.event-feature-mobile__body { padding-top: 1.25rem; }
.event-feature-mobile__date { color: var(--accent); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; margin-bottom: 0.625rem; }
.event-feature-mobile__body .h3 { margin-bottom: 0.75rem; }
.event-feature-mobile__body .body-text { color: var(--body-light); margin-bottom: 1.375rem; }
@media (min-width: 40rem) { .event-feature-mobile { display: none; } }

.event-feature {
  position: relative; border-radius: 0; overflow: hidden;
  min-height: 34rem; display: flex; flex-direction: column; justify-content: flex-end;
  background-size: cover; background-position: center; margin-bottom: 1.75rem;
  width: 100%;
}
@media (max-width: 39.9375rem) { .event-feature { display: none; } }
.event-feature::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0.25) 100%);
}
.event-feature__content { position: relative; padding: 2rem 1.5rem 0; color: var(--white); }
@media (min-width: 40rem) { .event-feature__content { padding: 2.5rem 2.75rem 0; } }
.event-feature__date { color: var(--accent-bright); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; margin-bottom: 0.625rem; }
.event-feature__content h3 { font-size: clamp(1.875rem, 3.5vw, 2.5rem); font-weight: 500; margin-bottom: 0.875rem; color: var(--white); }
.event-feature__location { display: flex; gap: 0.625rem; font-size: 0.875rem; color: rgba(255,255,255,0.85); max-width: 26.25rem; }
.event-feature__location svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: 0.125rem; }
.event-feature__cta {
  display: inline-flex;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: opacity 0.25s ease, max-height 0.25s ease, margin-top 0.25s ease;
}
.event-feature:hover .event-feature__cta,
.event-feature:focus-within .event-feature__cta {
  opacity: 1;
  max-height: 5rem;
  margin-top: 1.25rem;
}
/* Touch devices have no real hover state — keep the CTA visible by default there */
@media (hover: none) {
  .event-feature__cta {
    opacity: 1;
    max-height: 5rem;
    margin-top: 1.25rem;
  }
}
.event-feature__bar {
  position: relative; margin-top: 2.125rem; padding: 1rem 1.5rem;
  background: rgba(240,238,235,0.94); display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
@media (min-width: 40rem) { .event-feature__bar { padding: 1rem 2.75rem; } }
.event-feature__reg { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8125rem; color: #222; flex-wrap: wrap; }
.event-feature__reg .tag-pill {
  background: #b0281d; color: var(--white); font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; padding: 0.375rem 0.75rem; border-radius: 0.25rem;
}
.event-feature__social { display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; color: #333; }

.event-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; width: 100%; }
@media (min-width: 40rem) { .event-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
.event-card__image {
  border-radius: 0; overflow: hidden; aspect-ratio: 16/9.2; margin-bottom: 1.375rem;
}
.event-card__image-inner {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  transition: transform 0.4s ease;
}
.event-card:hover .event-card__image-inner { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .event-card__image-inner { transition: none; }
}
.event-card h3 { margin-bottom: 0.75rem; }
.event-card .body-text { color: var(--body-light); margin-bottom: 1.375rem; max-width: 28.75rem; }

/* ==========================================================================
   Sermons banner
   ========================================================================== */
.sermons {
  position: relative; min-height: 40rem; display: flex; align-items: flex-end;
  background-size: cover; background-position: center; color: var(--white);
}
.sermons::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4,5,7,0.82) 0%, rgba(4,5,7,0.35) 55%, rgba(4,5,7,0.15) 100%);
}
.sermons__inner {
  position: relative; width: 100%; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 1.5rem; padding-block: 6rem; flex-wrap: wrap;
}
.sermons__copy { max-width: 35rem; }
.sermons__label { color: var(--accent-bright); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; margin-bottom: 0.875rem; }
.sermons__copy h2 { color: var(--white); margin-bottom: 1.625rem; }

/* ==========================================================================
   Book of the Month
   ========================================================================== */
.book { display: flex; flex-direction: column; gap: 3rem; align-items: center; width: 100%; }
@media (min-width: 64rem) { .book { flex-direction: row; justify-content: space-between; gap: 3.75rem; } }
.book__text { width: 100%; }
@media (min-width: 64rem) { .book__text { flex: 1; } }
.book__text .body-text { color: var(--body-light); max-width: 28.75rem; margin: 1.125rem 0; }
.book__available { font-weight: 600; margin-bottom: 1.5rem; }
.book__media {
  border-radius: 1.25rem; /* 20px */
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}
@media (max-width: 63.9375rem) {
  .book__media {
    justify-content: flex-start;
  }
}
@media (min-width: 64rem) {
  .book__media {
    order: 0;
    flex: 1 0 0;
    height: 40.0696rem; /* 641.113px */
    aspect-ratio: 73 / 72;
  }
}
.book__media img {
  width: 100%; height: 100%;
  max-width: 26rem;
  border-radius: 1.25rem;
  object-fit: cover;
  background-color: lightgray;
  box-shadow: 0 1.875rem 3.125rem -1.25rem rgba(0,0,0,0.4);
  margin: 0 auto;
}
@media (min-width: 64rem) {
  .book__media img { max-width: none; height: 100%; }
}
@media (max-width: 63.9375rem) {
  .book__media img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    box-shadow: none;
    margin: 0;
  }
}

/* ==========================================================================
   Need Prayer
   ========================================================================== */
.prayer {
  position: relative; min-height: 30rem; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--white); background-size: cover; background-position: center;
  padding-block: 4rem;
}
.prayer::before { content: ""; position: absolute; inset: 0; background: rgba(6,5,5,0.62); }
.prayer__inner { position: relative; max-width: 35rem; }
.prayer__inner h2 { color: var(--white); margin-bottom: 1rem; }
.prayer__inner .body-text { color: var(--white); margin-bottom: 1.625rem; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials__carousel { overflow: hidden; }
.testimonials__grid {
  display: flex;
  gap: 0.25rem;
  width: max-content;
  animation: testimonials-scroll 45s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .testimonials__grid { animation: none; }
}
@keyframes testimonials-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* exactly the width of the first, non-duplicated half */
}
.testimonial {
  display: flex;
  width: 18rem;
  min-height: 20rem;
  padding: 2.5rem 1.5rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.625rem;
  flex: 0 0 auto;
  color: var(--white);
}
.testimonial:nth-child(4n+1) { background: linear-gradient(165deg, #0e2038 0%, #0a0a12 100%); }
.testimonial:nth-child(4n+2) { background: linear-gradient(165deg, #2a0f0d 0%, #0c0605 100%); }
.testimonial:nth-child(4n+3) { background: linear-gradient(165deg, #2a2350 0%, #14101f 100%); }
.testimonial:nth-child(4n+4) { background: linear-gradient(165deg, #2a2350 0%, #17131f 100%); }
@media (min-width: 64rem) {
  .testimonial { width: 24rem; height: 40.5rem; padding: 3.5rem 2rem; }
}
.testimonial__quote { font-family: Georgia, serif; font-size: 1.875rem; color: var(--accent-bright); line-height: 1; }
.testimonial__text { font-size: 0.90625rem; color: rgba(255,255,255,0.9); margin-bottom: 0.625rem; }
.testimonial__person { display: flex; align-items: center; gap: 0.75rem; }
.testimonial__avatar { width: 2.375rem; height: 2.375rem; border-radius: 50%; object-fit: cover; }
.testimonial__name { font-size: 0.875rem; font-weight: 600; }
.testimonial__role { font-size: 0.75rem; color: rgba(255,255,255,0.6); }

/* ==========================================================================
   Stay in the Loop - WhatsApp banner
   ========================================================================== */
.newsletter-wrap { padding-block: 2.5rem; width: 100%; }
.newsletter {
  display: flex; flex-direction: column; gap: 2rem;
  padding: 2.5rem 1.5rem; background: var(--dark-2); border: 1px solid var(--ink);
}
@media (min-width: 64rem) {
  .newsletter { flex-direction: row; padding: 4rem 3rem; justify-content: space-between; }
}
.newsletter__text { flex: 1; }
.newsletter__text h2 { color: var(--white); margin-bottom: 0.875rem; }
.newsletter__text .body-text { color: var(--white); max-width: 23.75rem; }
.newsletter__form { flex: 1; display: flex; flex-direction: column; gap: 1rem; justify-content: flex-end; }
.newsletter__form input {
  width: 100%; padding: 1rem 1.125rem; background: #121212;
  border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius);
  color: var(--white); font-size: 0.875rem; font-weight: 400;
}
.newsletter__form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter__note { font-size: 0.75rem; color: rgba(255,255,255,0.5); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--grad-footer); color: #d9d2d0; }
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 3.5rem 1.5rem;
}
@media (min-width: 64rem) {
  .footer__inner { padding: 7rem 4rem; }
}
.footer__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  width: 100%;
  padding-block: 3rem;
}
@media (min-width: 43.75rem) {
  .footer__top {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .footer__brand { flex: 0 1 26rem; }
}
@media (min-width: 64rem) {
  .footer__top { padding: 3rem; }
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}
@media (min-width: 26rem) {
  .footer__links { flex-direction: row; flex-wrap: wrap; gap: 4rem; flex-shrink: 0; width: auto; }
}
.footer__brand .logo { margin-bottom: 1.375rem; }
.footer__brand .logo__word { display: block; color: var(--white); }
.footer__block { margin-top: 1.125rem; }
.footer__block h4 {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.55); margin: 0 0 0.5rem;
}
.footer__block p, .footer__block a { font-size: 0.875rem; color: #d9d2d0; display: block; }
.footer__block p + p, .footer__block a + a { margin-top: 0.75rem; }
.footer__campus {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--accent-bright); margin: 0 0 0.25rem;
}
.footer__block a + .footer__campus { margin-top: 0.75rem; }
.footer__phone-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; white-space: nowrap; }
.footer__phone-row a[href^="tel:"] { display: inline; }
.footer__block a.footer__whatsapp { display: inline-flex; align-items: center; line-height: 0; color: #d9d2d0; flex-shrink: 0; position: relative; top: 0.375rem; }
.footer__whatsapp svg { width: 1.125rem; height: 1.125rem; display: block; }
.footer__social { display: flex; gap: 0.625rem; margin-top: 1.25rem; }
.footer__social a {
  width: 2.125rem; height: 2.125rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); color: var(--accent-bright);
}
.footer__social svg { width: 1rem; height: 1rem; }
.footer__col h5 {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--accent-bright); margin: 0 0 1rem;
}
.footer__col ul li { margin-bottom: 0.75rem; }
.footer__col a { font-size: 0.875rem; color: #d9d2d0; }
.footer__col a:hover { color: var(--white); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; font-size: 0.8125rem; color: rgba(255,255,255,0.55);
  width: 100%;
}
.footer__legal { display: flex; gap: 1.375rem; flex-wrap: wrap; }
.footer__legal a:hover { color: var(--white); }

/* ==========================================================================
   Legal pages (Privacy Policy, Terms, Cookies)
   ========================================================================== */
.legal-content {
  max-width: 48rem;
  margin: 0 auto;
}
.legal-content .h3 { margin-top: 2.5rem; margin-bottom: 0.75rem; }
.legal-content .body-text { color: var(--body-light); margin-bottom: 1rem; }
.legal-content .body-text a { color: var(--accent); font-weight: 600; }
.legal-content ul.body-text {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}
.legal-content ul.body-text li { margin-bottom: 0.5rem; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Locate Us page — reuses the shared design tokens above. New rules here
   are limited to structures the homepage doesn't already have (dark hero
   glow, back-link, location cards, vertical-gradient tag variant).
   ========================================================================== */

/* Back link — same weight/size as nav links, per spec */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.15s ease;
}
.back-link:hover { color: var(--white); }
.back-link svg { width: 1rem; height: 1rem; }

/* Vertical-gradient tag variant (spec locks this exact gradient direction,
   distinct from the homepage's horizontal tag gradient). */
.tag--vert-light .tag__label,
.tag--vert-light .tag__star {
  background: linear-gradient(180deg, #EB4D25 0%, #B83D1E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.tag--vert-dark .tag__label,
.tag--vert-dark .tag__star {
  background: linear-gradient(180deg, #B83D1E 0%, #000000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- Sub-page dark hero ---- */
.locate-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--dark-1);
  padding-top: 6rem; /* clears the fixed header (~72px) with real breathing room */
  padding-bottom: 4rem;
}
@media (max-width: 47.9375rem) {
  .locate-hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
  }
}
@media (min-width: 64rem) {
  .locate-hero { padding-top: 12rem; padding-bottom: 8rem; }
}
.locate-hero__glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #080808 -5.34%, #EB4D25 125.77%);
  opacity: 0.18;
  filter: blur(4.5rem);
  pointer-events: none;
}
.locate-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.locate-hero__title {
  font-family: var(--font);
  font-size: clamp(2rem, 5vw, 3.5rem); /* 32px-56px, matches homepage .h2 scale */
  font-weight: 700;
  color: var(--white);
  margin: 1.5rem 0 1rem;
}
.locate-hero__subtitle {
  font-size: clamp(1rem, 3vw, 1.25rem); /* 16px-20px per spec */
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  max-width: 40rem;
}

/* ---- Worship With Us ---- */
.worship {
  width: 100%;
  background: var(--white);
  padding-block: 3rem;
}
@media (min-width: 64rem) {
  .worship { padding-block: 7rem; }
}
.worship__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  width: 100%;
}
@media (min-width: 64rem) {
  .worship__inner { gap: 5rem; }
}
.worship__head { text-align: left; max-width: 40rem; }
.worship__head .h2 { margin-top: 0.875rem; }
.worship__subtitle {
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 400;
  color: #4A4A4A;
  margin-top: 1rem;
}

/* ---- Location cards ---- */
.locate-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
@media (min-width: 64rem) {
  .locate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

.locate-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  min-height: 24.5rem; /* 392px */
  height: auto;
  flex: 1 0 0;
}
@media (min-width: 64rem) {
  .locate-card { height: 24.5rem; }
}
.locate-card--online {
  background: var(--white);
  border: 1px solid var(--accent);
}
.locate-card--dark {
  background: var(--accent);
  color: var(--white);
}

.locate-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: auto; /* pushes title/address/button into a tight group at the bottom */
}
.locate-card__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 1rem; /* space between the address block and the button */
}
.locate-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.125rem; /* 66px */
  padding: 0.375rem 0.625rem;
  border-radius: 6.25rem;
  border: 1px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
}
.locate-pin {
  width: 2.25rem;
  height: 2.25rem;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #B83D1E 0%, #000000 100%);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.locate-pin svg { width: 1.25rem; height: 1.25rem; }

.locate-card__body .locate-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
}
.locate-card__meta svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.locate-card--online .locate-card__meta { color: var(--body-light); }
.locate-card__body h3 {
  font-family: var(--font);
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  margin-bottom: 0.625rem;
}
.locate-card--online .locate-card__body h3 { color: var(--ink); }
.locate-card--dark .locate-card__body h3 { color: var(--white); }
.locate-card__body p {
  font-size: 1rem; /* 16px */
  font-weight: 400;
}
.locate-card--online .locate-card__body p { color: var(--body-light); }
.locate-card--dark .locate-card__body p { color: rgba(255,255,255,0.9); }

/* Card CTA reuses .btn.btn--primary as-is; this only resets full-width
   behaviour so it doesn't stretch beyond its natural size in the card. */
.locate-card .btn { align-self: stretch; width: 100%; }

/* ---- Bottom CTA banner ---- */
/* Full-bleed background + border span the entire viewport, matching the
   homepage's pattern; the content inside is what gets centered/padded. */
.locate-cta-wrap {
  width: 100%;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: #170B0D;
  padding-block: 3rem;
}
@media (min-width: 64rem) {
  .locate-cta-wrap { padding-block: 7rem; }
}
.locate-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: 1.5rem;
}
@media (min-width: 64rem) {
  .locate-cta { padding-inline: 4rem; }
}
.locate-cta__tag { margin-bottom: 0; }
.locate-cta__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
}
@media (min-width: 64rem) {
  .locate-cta__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
}
.locate-cta__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 46rem; /* widened so the heading fits on one line, matching the design */
}
.locate-cta__title {
  font-family: var(--font);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--white);
}
.locate-cta__desc {
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 400;
  color: rgba(255,255,255,0.8);
}

/* ==========================================================================
   About Us page
   ========================================================================== */

/* Pill badge — distinct from the star tag, used only in the About hero */
.pill-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border-radius: 6.25rem;
  background: var(--grad-primary);
  border: 1px solid rgba(0,0,0,0.4);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

/* ---- About hero (mirrors .locate-hero exactly) ---- */
.about-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--dark-1);
  padding-top: 6rem;
  padding-bottom: 4rem;
}
@media (max-width: 47.9375rem) {
  .about-hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
  }
}
@media (min-width: 64rem) {
  .about-hero { padding-top: 12rem; padding-bottom: 8rem; }
}
.about-hero__glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #080808 -5.34%, #EB4D25 125.77%);
  opacity: 0.18;
  filter: blur(4.5rem);
  pointer-events: none;
}
.about-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.about-hero__title {
  font-family: var(--font);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 1rem;
}
.about-hero__subtitle {
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  max-width: 30rem;
}

/* ---- Shared photo + two-column text pattern ---- */
.about-photo {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 2.5rem 0;
  aspect-ratio: 16 / 9;
}
.about-photo--tall { aspect-ratio: 4 / 3; }
@media (min-width: 48rem) { .about-photo--tall { aspect-ratio: 5 / 4; } }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-photo--tall img { object-position: 25% 20%; }

.about-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 48rem) {
  .about-two-col { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
.about-two-col .body-text { color: var(--body-light); }
.about-two-col > div p + p { margin-top: 1rem; }

/* ---- Stats row ---- */
.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
@media (min-width: 48rem) {
  .about-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.about-stat__num {
  font-family: var(--font);
  font-size: clamp(2rem, 4.5vw, 2.5rem); /* 32px-40px, Manrope */
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.about-stat__label {
  font-family: var(--font);
  font-size: clamp(1rem, 2vw, 1.5rem); /* 16px-24px, Manrope */
  color: var(--body-light);
  margin-top: 0.375rem;
}
@media (max-width: 47.9375rem) {
  .about-stat__num { font-size: 1.375rem; white-space: normal; }
  .about-stat__label { font-size: 0.8125rem; }
}

/* ---- Assignment panel (video + centered text on tinted bg) ---- */
.assignment {
  width: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #cfc9c4 100%);
  padding-block: 3rem;
}
@media (min-width: 64rem) {
  .assignment { padding-block: 5rem; }
}
.about-video {
  position: relative;
  width: 100%;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
@media (min-width: 64rem) {
  .about-video { aspect-ratio: 21 / 9; }
}
.about-video img { width: 100%; height: 100%; object-fit: cover; }
.about-video .play-button {
  background: var(--white);
  box-shadow: 0 0.75rem 1.75rem -0.5rem rgba(0,0,0,0.4);
}
.about-video .play-button svg { fill: var(--ink); }

.assignment__head {
  max-width: 40rem;
  margin: 3rem auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.assignment__logo { margin-bottom: 1.5rem; border-radius: 50%; }
.assignment__title { margin-top: 0.5rem; }
.assignment__desc {
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 400;
  color: var(--body-light);
  margin-top: 1rem;
}

/* ---- Centered section head (Vision/Mission, We Connect) ---- */
.about-center-head {
  max-width: 40rem;
  margin: 0 auto 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- Vision / Mission cards ---- */
.vm-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch; /* guarantees both cards match height exactly */
  gap: 1.5rem;
}
@media (min-width: 48rem) {
  .vm-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.vm-card {
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  padding: 3rem 2rem;
  text-align: center;
  min-height: 16rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.vm-card--light {
  background: var(--white);
  border: 1px solid var(--accent);
}
.vm-card--dark {
  background: var(--grad-card);
  color: var(--white);
}
.vm-card h3 {
  font-family: var(--font);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.vm-card--light p { color: var(--body-light); max-width: 17rem; }
.vm-card--dark p { color: rgba(255,255,255,0.9); max-width: 17rem; }

/* ---- Full-bleed closing photo ---- */
/* This closing section is short text only — the generic .section 800px
   floor (meant for major content sections) creates a huge empty gap here,
   so it gets its own compact sizing instead. */
.about-closing-head {
  min-height: auto;
  padding-bottom: 3rem;
}
@media (min-width: 64rem) {
  .about-closing-head { min-height: auto; padding-bottom: 4rem; }
}

.about-full-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 12 / 5;
  overflow: hidden;
}
@media (max-width: 47.9375rem) {
  .about-full-photo { aspect-ratio: 3 / 4; }
}
.about-full-photo__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top;
  opacity: 0;
  transition: opacity 2.2s ease-in-out;
}
.about-full-photo__slide.is-active { opacity: 1; }

/* ==========================================================================
   Programs page
   ========================================================================== */

/* ---- Programs hero (mirrors .about-hero exactly) ---- */
.prog-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--dark-1);
  padding-top: 6rem;
  padding-bottom: 4rem;
}
@media (max-width: 47.9375rem) {
  .prog-hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
  }
}
@media (min-width: 64rem) {
  .prog-hero { padding-top: 12rem; padding-bottom: 8rem; }
}
.prog-hero__glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #080808 -5.34%, #EB4D25 125.77%);
  opacity: 0.18;
  filter: blur(4.5rem);
  pointer-events: none;
}
.prog-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.prog-hero__title {
  font-family: var(--font);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 1rem;
}
.prog-hero__subtitle {
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  max-width: 38rem;
}

/* ---- Filter pills ---- */
.prog-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
}
.prog-filter {
  display: flex;
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  background: #FFF;
  border: none;
  box-shadow: 0 0.25rem 0.625rem 0 rgba(235, 77, 37, 0.30);
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.prog-filter.is-active {
  border: 0.03125rem solid #B83D1E; /* 0.5px */
  background: #EB4D25;
  box-shadow: 0 0.25rem 0.625rem 0 rgba(184, 61, 30, 0.50);
  color: var(--white);
}

/* ---- Program cards grid ---- */
.prog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
}
@media (min-width: 48rem) {
  .prog-grid { grid-template-columns: 1fr 1fr; gap: 0.25rem; }
}
.prog-card {
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.prog-card--light { background: var(--cream); }
.prog-card--dark { background: var(--grad-card); color: var(--white); }

.prog-card__image { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; }
.prog-card__image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.prog-card:hover .prog-card__image img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .prog-card__image img { transition: none; }
}

.prog-card__body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.prog-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.prog-card__head h3 {
  font-family: var(--font);
  font-size: 1.5rem;
  font-weight: 700;
}
.prog-card--light .prog-card__body p { color: var(--body-light); }
.prog-card--dark .prog-card__body p { color: rgba(255,255,255,0.9); }

.prog-badge {
  flex-shrink: 0;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.prog-card__body .btn { align-self: stretch; width: 100%; margin-top: 0.5rem; }
.prog-card__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.prog-card__actions .btn { flex: 1 1 100%; }
@media (min-width: 26rem) {
  .prog-card__body .btn { align-self: flex-start; width: auto; }
  .prog-card__actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Watch Live page
   ========================================================================== */

/* ---- Centered hero (distinct from the left-aligned hero on other pages) ---- */
.watch-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--dark-1);
  padding-top: 6rem;
  padding-bottom: 4rem;
  text-align: center;
}
@media (max-width: 47.9375rem) {
  .watch-hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
  }
}
@media (min-width: 64rem) {
  .watch-hero { padding-top: 12rem; padding-bottom: 8rem; }
}
.watch-hero__glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #080808 -5.34%, #EB4D25 125.77%);
  opacity: 0.18;
  filter: blur(4.5rem);
  pointer-events: none;
}
.watch-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.watch-hero__title {
  font-family: var(--font);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 1rem;
}
.watch-hero__subtitle {
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  max-width: 30rem;
}

/* ---- Featured event card (background image + overlaid content) ---- */
.watch-card-mobile { display: block; width: 100%; }
.watch-card-mobile img { width: 100%; height: auto; display: block; }
.watch-card-mobile__body { padding-top: 1.5rem; }
.watch-card-mobile__eyebrow {
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}
.watch-card-mobile__body .h3 { margin-bottom: 0.75rem; }
.watch-card-mobile__body .body-text { color: var(--body-light); margin-bottom: 1.5rem; }
.watch-card-mobile__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem; }
@media (min-width: 48rem) { .watch-card-mobile { display: none; } }

.watch-card {
  position: relative;
  width: 100%;
  min-height: 30rem;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
}
@media (max-width: 47.9375rem) { .watch-card { display: none; } }
.watch-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.25) 100%);
}
.watch-card__inner {
  position: relative;
  width: 100%;
  padding: 2rem 1.5rem;
  color: var(--white);
}
@media (min-width: 48rem) {
  .watch-card__inner { padding: 3rem 3rem 3.5rem; }
}
.watch-card__eyebrow {
  color: var(--accent-bright);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}
.watch-card__title {
  font-family: var(--font);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 1rem;
}
.watch-card__location {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.85);
  max-width: 26rem;
  margin-bottom: 1rem;
}
.watch-card__location svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: 0.125rem; }
.watch-card__desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  max-width: 34rem;
  margin-bottom: 1.75rem;
}
.watch-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ==========================================================================
   Books page
   ========================================================================== */
.book-intro {
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 400;
  color: var(--body-light);
  max-width: 44rem;
  margin: 1rem 0 3rem;
}

.book-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 30rem) {
  .book-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
@media (min-width: 64rem) {
  .book-grid { grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; }
}

.book-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background-color: #1c1c1c;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.book-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.1) 100%);
}
.book-tile__body {
  position: relative;
  padding: 2rem;
  color: var(--white);
}
.book-tile__body h3 {
  font-family: var(--font);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.book-tile__body p {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.85);
  max-width: 26rem;
}
.book-tile__cta {
  display: inline-flex;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: opacity 0.25s ease, max-height 0.25s ease, margin-top 0.25s ease;
}
.book-tile:hover .book-tile__cta,
.book-tile:focus-within .book-tile__cta {
  opacity: 1;
  max-height: 5rem;
  margin-top: 1.25rem;
}
/* Touch devices have no real hover state — keep the CTA visible by default there */
@media (hover: none) {
  .book-tile__cta {
    opacity: 1;
    max-height: 5rem;
    margin-top: 1.25rem;
  }
}

/* ==========================================================================
   Inquiries page
   ========================================================================== */

/* ---- Mission + form section (light gradient background) ---- */
.inquiry-form-section {
  width: 100%;
  background: linear-gradient(135deg, #FBEAE5 0%, #FFFFFF 60%);
  padding-block: 4rem;
}
@media (min-width: 64rem) {
  .inquiry-form-section { padding-block: 7rem; }
}
.inquiry-form-section .worship__subtitle { color: var(--body-light); }

.inquiry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
@media (min-width: 64rem) {
  .inquiry-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.inquiry-map {
  width: 100%;
  min-height: 24rem;
  border-radius: var(--radius);
  overflow: hidden;
}
.inquiry-map iframe { width: 100%; height: 100%; min-height: 24rem; border: 0; display: block; }

.inquiry-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.inquiry-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 40rem) {
  .inquiry-form__row { grid-template-columns: 1fr 1fr; }
}
.inquiry-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.inquiry-form__field label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.inquiry-form__field input,
.inquiry-form__field select,
.inquiry-form__field textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.6);
  font-family: var(--font);
  font-size: 1rem; /* 16px — prevents iOS Safari auto-zoom on focus */
  color: var(--ink);
}
.inquiry-form__field textarea { resize: vertical; min-height: 8rem; }

/* Formspree submission states — status text only appears once a form has
   actually been submitted; hidden by default so it never affects layout. */
.form-status {
  display: none;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
}
.form-status.is-visible { display: block; }
.form-status--success { color: #1a7a3c; }
.form-status--error { color: var(--accent); }
.inquiry-form .btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.inquiry-form__field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.125rem;
  padding-right: 2.75rem;
}
.inquiry-form .btn { align-self: flex-start; }

/* ---- Trusted logos strip ---- */
/* This strip is short, single-row content — the generic .section 800px
   floor (meant for major content sections) creates a huge empty gap here,
   so it gets its own compact sizing instead. */
.trusted-strip {
  min-height: auto;
  padding-block: 3rem;
}
@media (min-width: 64rem) {
  .trusted-strip { min-height: auto; padding-block: 4rem; }
}
.trusted-strip__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
@media (min-width: 64rem) {
  .trusted-strip__row { flex-direction: row; align-items: center; justify-content: space-between; }
}
.trusted-strip__label { font-size: 1rem; font-weight: 600; color: var(--ink); }
.trusted-strip__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}
.trusted-strip__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.55;
}
.trusted-strip__logo span {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---- Contact methods grid ---- */
/* Same generic .section min-height issue as the trusted strip above —
   this is a single row of compact content, not a full-height section. */
.contact-section {
  min-height: auto;
  padding-bottom: 3rem;
}
@media (min-width: 64rem) {
  .contact-section { min-height: auto; padding-bottom: 4rem; }
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 48rem) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .contact-grid { grid-template-columns: repeat(4, 1fr); }
}
.contact-item svg { width: 2rem; height: 2rem; color: var(--accent); margin-bottom: 1rem; }
.contact-item h3 {
  font-family: var(--font);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
}
.contact-item p { color: var(--body-light); font-size: 0.9375rem; margin-bottom: 0.75rem; }
.contact-item a { color: var(--accent); font-weight: 600; font-size: 0.9375rem; }

/* ==========================================================================
   Become a Member page
   ========================================================================== */

/* ---- Generic member section (light / dark tinted background, own
   compact sizing rather than the generic .section 800px floor) ---- */
.member-section {
  width: 100%;
  padding-block: 3rem;
}
@media (min-width: 64rem) {
  .member-section { padding-block: 5rem; }
}
.member-section--light { background: linear-gradient(135deg, #FBEAE5 0%, #FFFFFF 60%); }
.member-section--dark { background: var(--dark-1); color: var(--white); }
.member-section--glow { position: relative; overflow: hidden; }
.member-section--glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #080808 -5.34%, #EB4D25 125.77%);
  opacity: 0.18;
  filter: blur(4.5rem);
  pointer-events: none;
}
.member-section--glow .shell { position: relative; }
.member-section--dark .tag__label,
.member-section--dark h3 { color: var(--white); }
.member-section--dark .numbered-item p:not(.numbered-item__num),
.member-section--dark .journey-card p { color: rgba(255,255,255,0.75); }

/* ---- Numbered 3-up list (Connect / Evolve / Serve) ---- */
.numbered-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
@media (min-width: 48rem) {
  .numbered-grid { grid-template-columns: repeat(3, 1fr); }
}
.numbered-item__num {
  font-family: 'Manufacturing Consent', var(--font);
  font-size: 3.5rem; /* 56px */
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.numbered-item h3 {
  font-family: var(--font);
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  margin-bottom: 0.625rem;
}
.journey-card h3 {
  font-family: var(--font);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
}
.numbered-item p:not(.numbered-item__num) { color: var(--body-light); font-size: 1.25rem; /* 20px */ }

/* ---- What to Expect (dark bordered cards) ---- */
.journey-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
@media (min-width: 48rem) {
  .journey-grid { grid-template-columns: repeat(3, 1fr); }
}
.journey-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  flex: 1 0 0;
  padding: 2.5rem 1.5rem;
  border-radius: 1rem;
  background: #131313;
  box-shadow: 0 0 1.25rem 0 rgba(184, 61, 30, 0.40);
}

/* ---- Sign-up form section ---- */
.member-form-section {
  width: 100%;
  background: linear-gradient(135deg, #FBEAE5 0%, #FFFFFF 60%);
  padding-block: 4rem;
}
@media (min-width: 64rem) {
  .member-form-section { padding-block: 6rem; }
}
.member-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 3rem;
}
@media (min-width: 64rem) {
  .member-form-grid { grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: start; }
}

.member-testimonial {
  display: flex;
  flex-direction: column;
  min-height: 0; /* lets this grid item shrink/grow to the stretched row height rather than being pushed by its own content */
}

.member-testimonial__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
@media (min-width: 64rem) {
  /* Height is set precisely in JS to match the form column exactly —
     flexbox/grid alone couldn't reliably account for the quote and name
     text sitting below the photo, so this avoids that entirely. */
  .member-testimonial__photo { aspect-ratio: unset; }
}
.member-testimonial__photo img { width: 100%; height: 100%; object-fit: cover; }
.member-testimonial__quote {
  font-size: 1rem;
  font-style: italic;
  color: var(--body-light);
  margin-bottom: 1rem;
}
.member-testimonial__person {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 600;
  font-size: 0.9375rem;
}

.member-form { background: transparent; padding: 0; }
.member-form .btn { align-self: flex-start; }

/* ---- Membership carousel ---- */
.member-carousel { margin-top: 3rem; overflow: hidden; }
.member-carousel__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: member-carousel-scroll 125s linear infinite;
}
/* Respect users who've asked for reduced motion at the OS level too,
   not just the inline override for older browsers in the HTML above. */
@media (prefers-reduced-motion: reduce) {
  .member-carousel__track { animation: none; }
}
@keyframes member-carousel-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* exactly the width of the first, non-duplicated half */
}
.member-carousel__slide {
  flex: 0 0 auto;
  width: 18rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 48rem) {
  .member-carousel__slide { width: 22rem; }
}
.member-carousel__slide img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* ==========================================================================
   Subtle entrance animations
   ========================================================================== */

/* Scroll-triggered reveal — JS adds .is-visible via IntersectionObserver
   when an element enters the viewport (see js/main.js). Used site-wide. */
.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--d1 { transition-delay: 0.12s; }
.reveal--d2 { transition-delay: 0.24s; }

/* Hero entrance — runs immediately on load rather than on scroll, since
   the hero is already in view the moment the page loads. */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(1.25rem); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-animate {
  opacity: 0;
  animation: hero-fade-up 0.7s ease forwards;
}
.hero-animate--d1 { animation-delay: 0.12s; }
.hero-animate--d2 { animation-delay: 0.24s; }
.hero-animate--d3 { animation-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-animate { opacity: 1; animation: none; }
}


/* ==========================================================================
   Mobile typography audit — bring fixed-size card headings in line with
   the shared .h3 scale (was 24px vs 20px elsewhere), and shrink text that
   was disproportionately large relative to the rest of the mobile UI.
   ========================================================================== */
@media (max-width: 47.9375rem) {
  .locate-card__body h3,
  .vm-card h3,
  .prog-card__head h3,
  .numbered-item h3 {
    font-size: 1.25rem; /* 20px — matches .h3 / .journey-card h3 on mobile */
  }
  .numbered-item p:not(.numbered-item__num) {
    font-size: 1rem; /* 16px — matches standard body text elsewhere */
  }
  .numbered-item__num {
    font-size: 2.75rem; /* 44px — was a fixed 56px on all screens */
  }
}