@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700;800;900&family=Roboto+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ==========================================================
   JCC AGAPE CHAVAKALI — Shared Stylesheet
   All common styles for every page on this site.
   ========================================================== */

/* ── Variables ─────────────────────────────────────────── */
:root {
  /* Brand palette — JCC Agape Chavakali official colours */
  --red:          #C74375;               /* Fuchsia Rose */
  --red-hover:    #9E194D;               /* Hydrangea Red */
  --red-dim:      rgba(199,67,117,.13);
  --navy:         #1D2951;               /* Space Cadet */
  --navy-dark:    #111D3A;               /* Space Cadet darkened */
  --navy-dim:     rgba(29,41,81,.10);
  --gold:         #F3D19F;               /* Vespa Yellow */
  --gold-dim:     rgba(243,209,159,.22);

  /* Light surfaces */
  --bg-light:     #F6F4EC;               /* Decorator White */
  --bg-warm:      rgba(243,209,159,.25); /* Vespa Yellow glass */
  --surface:      rgba(173,182,172,.25); /* Blue Fescue glass */
  --border:       rgba(29,41,81,.11);    /* Space Cadet 11% */

  /* Dark surfaces (hero, footer, CTA) */
  --dark-surface:  #1D2951;             /* Space Cadet */
  --dark-surface2: #253468;             /* Space Cadet lighter tint */

  /* Text — light sections */
  --text:         #1D2951;              /* Space Cadet */
  --text-body:    #2E3B5E;              /* Space Cadet 20% lighter */
  --text-muted:   #6273A0;              /* Space Cadet 50% lighter */

  /* Text — dark sections */
  --white:        #ffffff;
  --body-dark:    rgba(255,255,255,.88);
  --muted-dark:   rgba(255,255,255,.72);
  --border-dark:  rgba(255,255,255,.14);
  --dim:          rgba(255,255,255,.12);

  /* Typography */
  --font:         'Roboto Condensed', Arial Narrow, Arial, sans-serif;
  --font-display: 'Raleway', Arial, sans-serif;
  --ease:         cubic-bezier(.4,0,.2,1);
  --ease-out:     cubic-bezier(.16,.84,.44,1);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);
  --topbar-h:     38px;
  --nav-scroll-bg: rgba(29,41,81,.97);  /* Space Cadet nav */
}

/* ── Reset ─────────────────────────────────────────────── */
html { scroll-padding-top: 100px; scroll-behavior: smooth; font-size: 16px; font-family: 'Roboto Condensed', Arial Narrow, Arial, sans-serif; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; }
p { font-size: 17px; line-height: 1.8; margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
body {
  font-family: var(--font);
  font-size: 19px;         /* 14pt */
  font-weight: 400;
  background: #E2DFD6;
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ── Type Scale ───────────────────────────────────────────────────────── */
/* H1 — Raleway Heavy, uppercase, 75pt (≈100px) */
h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(52px, 7vw, 100px);
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
}
/* H2 — Raleway Heavy, uppercase */
h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 4.5vw, 60px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
}
/* H3 — Roboto Condensed, uppercase, 32pt (≈43px) */
h3 {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 43px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text);
}
/* H4 — Roboto Condensed, uppercase */
h4 {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(17px, 2vw, 28px);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
}
/* H5 — Roboto Condensed, uppercase */
h5 {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(13px, 1.5vw, 20px);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}
/* H6 — Roboto Condensed, uppercase, small label */
h6 {
  font-family: var(--font);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
/* Paragraph — Roboto Condensed, 14pt (≈19px), normal case */
p {
  font-family: var(--font);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-body);
}
/* Verse / pull-quotes — keep normal case override */
.verse-italic { text-transform: none; }

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  background: linear-gradient(90deg, var(--red) 0%, var(--navy) 100%);
  padding: 10px 0; font-size: 13px; letter-spacing: .5px;
  margin: 8px 24px 0;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; }
.topbar-loc { color: #fff; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.topbar-soc { display: flex; gap: 2px; }
.topbar-soc a {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  color: #fff; border-radius: 50%; font-size: 12px; transition: color .2s, background .2s;
}
.topbar-soc a:hover { background: rgba(255,255,255,.15); }
.lang-toggle {
  display: flex; align-items: center;
  background: rgba(255,255,255,.12);
  border-radius: 999px; padding: 3px;
  gap: 2px; margin-left: 12px;
}
.lang-opt {
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font); font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  padding: 5px 12px; border-radius: 999px;
  transition: background .2s, color .2s;
}
.lang-opt.active { background: #fff; color: var(--navy); }

/* ── Mobile address bar (visible only on mobile) ─────────── */
.mobile-addr-bar {
  display: none;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border);
  padding: 10px 20px;
  font-size: 12px;
  color: var(--text-muted);
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.mobile-addr-bar i { color: var(--red); margin-right: 4px; }
.mobile-addr-bar a { color: var(--red); font-weight: 600; }

/* ── Navbar ─────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 8px;
  width: calc(100% - 48px);
  margin: 8px auto;
  z-index: 900;
  padding: 12px 0;
  background: rgba(17,29,58,.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,.24);
  transition: background .35s var(--ease), box-shadow .35s;
}
.navbar.scrolled {
  background: rgba(17,29,58,.98);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 6px 32px rgba(0,0,0,.34);
}
/* Inner pages: always show solid background */
.navbar.navbar-solid {
  background: rgba(17,29,58,.98);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 6px 32px rgba(0,0,0,.34);
}
.navbar .container { display: flex; justify-content: space-between; align-items: center; }
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-brand img { height: 68px; width: auto; transition: height .35s var(--ease); }
.navbar.scrolled .nav-brand img, .navbar.navbar-solid .nav-brand img { height: 52px; }
.nav-brand-name { font-size: 26px; font-weight: 900; font-family: var(--font-display); color: var(--white); letter-spacing: 0.04em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a { font-size: 16px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--white); transition: color .2s; }
.nav-links a:hover { color: rgba(255,255,255,.75); }
.nav-links a.active { color: var(--white); border-bottom: 2px solid var(--red); padding-bottom: 3px; }
.nav-give-link {
  background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.35);
  padding: 8px 20px; font-family: var(--font); font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer; border-radius: 999px;
  transition: background .25s, border-color .25s, color .25s; display: inline-block;
}
.nav-give-link:hover, .nav-links .nav-give-link:hover { background: var(--white); color: #000; border-color: var(--white); }

/* Nav dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  background: transparent; border: none; color: var(--white); font-family: var(--font);
  font-size: 16px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 0;
  transition: color .2s;
}
.nav-dropdown-toggle i { font-size: 9px; transition: transform .25s var(--ease); color: var(--red); }
.nav-dropdown-toggle:hover, .nav-dropdown.active-parent .nav-dropdown-toggle { color: rgba(255,255,255,.75); }
.nav-dropdown.active-parent .nav-dropdown-toggle { border-bottom: 2px solid var(--red); padding-bottom: 3px; }
.nav-dropdown.open .nav-dropdown-toggle i { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 280px; background: var(--dark-surface); border: 1px solid var(--border-dark);
  border-radius: 16px; padding: 8px; list-style: none;
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  box-shadow: 0 12px 32px rgba(0,0,0,.5); z-index: 1000;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown-menu::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-dropdown-menu li { margin: 0; }
.nav-dropdown-menu a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 14px; font-size: 16px; font-weight: 600; letter-spacing: .5px;
  text-transform: none; color: var(--body-dark); border-radius: 12px; border: none;
  transition: background .2s, color .2s;
}
.nav-dropdown-menu a .dd-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.nav-dropdown-menu a i { color: var(--red); font-size: 13px; width: 16px; text-align: center; }
.nav-dropdown-menu a .dd-desc { display: block; font-size: 11px; font-weight: 400; color: var(--muted-dark); text-transform: none; letter-spacing: .2px; margin-top: 2px; }
.nav-dropdown-menu a:hover { background: rgba(255,255,255,.08); color: var(--white); }
.nav-dropdown-menu a.active { background: var(--red-dim); color: var(--white); }

/* Nav toggle (hamburger) */
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; cursor: pointer; background: none; border: none; padding: 5px; }
.nav-toggle span { display: block; width: 100%; height: 1.5px; background: var(--white); border-radius: 1px; transition: all .3s var(--ease); transform-origin: center; }
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile nav ─────────────────────────────────────────── */
.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 850;
  flex-direction: column; justify-content: flex-start; align-items: flex-start;
  background: var(--navy); padding: 80px 40px 40px; overflow-y: auto; transition: none;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-size: clamp(28px, 6vw, 42px); font-weight: 800; color: var(--body-dark);
  padding: 10px 0; letter-spacing: -1px; transition: color .2s;
  border-bottom: 1px solid var(--border-dark); width: 100%;
}
.mobile-nav a:last-of-type { border-bottom: none; }
.mobile-nav a:hover, .mobile-nav a.active { color: var(--white); }
.mobile-nav-sub { font-size: clamp(20px, 4vw, 26px) !important; font-weight: 700 !important; padding-left: 18px !important; color: var(--body-dark); }
.mobile-nav-sub.active { color: var(--white); }
.mobile-nav-give { margin-top: 32px; }

/* Mobile Connect accordion */
.mobile-connect-toggle {
  font-size: clamp(28px, 6vw, 42px); font-weight: 800; color: var(--body-dark);
  padding: 10px 0; letter-spacing: -1px; font-family: var(--font);
  border: none; border-bottom: 1px solid var(--border-dark); width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  background: none; cursor: pointer; text-align: left; transition: color .2s;
}
.mobile-connect-toggle:hover, .mobile-connect-toggle.open { color: var(--white); }
.mobile-connect-chevron { font-size: 0.55em; transition: transform .3s var(--ease); opacity: .6; }
.mobile-connect-toggle.open .mobile-connect-chevron { transform: rotate(180deg); opacity: 1; }
.mobile-connect-sub { display: none; flex-direction: column; }
.mobile-connect-sub.open { display: flex; border-bottom: 1px solid var(--border-dark); }
.mobile-connect-sub .mobile-nav-sub { border-bottom: 1px solid rgba(255,255,255,.06) !important; }
.mobile-connect-sub .mobile-nav-sub:last-child { border-bottom: none !important; }

/* Mobile lang toggle */
.mobile-nav-lang {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  width: 100%;
}
.mobile-nav-lang .lang-toggle { margin-left: 0; }

/* Mobile nav stagger animation */
.mobile-nav.open a, .mobile-nav.open .mobile-connect-toggle, .mobile-nav.open .mobile-nav-give {
  animation: mnIn .5s var(--ease-out) backwards;
}
.mobile-nav.open a:nth-child(1)  { animation-delay: .05s; }
.mobile-nav.open a:nth-child(2)  { animation-delay: .10s; }
.mobile-nav.open .mobile-connect-toggle { animation-delay: .15s; }
.mobile-nav.open a:nth-child(5)  { animation-delay: .20s; }
.mobile-nav.open a:nth-child(6)  { animation-delay: .25s; }
.mobile-nav.open a:nth-child(7)  { animation-delay: .30s; }
.mobile-nav.open a:nth-child(8)  { animation-delay: .35s; }
@keyframes mnIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ── Page Hero (inner pages) ────────────────────────────── */
.page-hero { position: relative; height: 65vh; min-height: 480px; display: flex; align-items: flex-end; overflow: hidden; margin: 0 24px 32px; border-radius: 24px; }
.page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-attachment: fixed; }
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,8,40,.98)     0%,    /* near-black at bottom — title text sits here */
    rgba(11,14,38,.90)   30%,    /* dark Space Cadet through label & breadcrumb */
    rgba(29,41,81,.65)   60%,    /* Space Cadet mid — image still shows through */
    rgba(0,0,0,.45)     100%    /* neutral dark scrim at top */
  );
}
.page-hero-content { position: relative; z-index: 2; width: 100%; padding-bottom: 72px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 10px; color: rgba(255,255,255,.45); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 3px; font-weight: 600; }
.breadcrumb a { color: rgba(255,255,255,.45); transition: color .2s; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb i { font-size: 7px; }
.page-hero-title { font-size: clamp(52px, 7vw, 100px); font-weight: 900; color: #fff; line-height: 1.0; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-display); }
.page-hero-title span { color: #F3D19F; }
.page-hero-label { font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 16px; display: block; }
.page-hero-sub { font-size: clamp(15px, 2vw, 18px); color: rgba(255,255,255,.78); max-width: 540px; margin-top: 20px; line-height: 1.75; }
/* Dark-gradient page hero for pages without a background image */
.page-hero.page-hero-dark { background: linear-gradient(160deg, var(--navy-dark) 0%, var(--navy) 60%, #111D3A 100%); }
.page-hero.page-hero-dark .container { position: relative; z-index: 2; width: 100%; padding-bottom: 72px; align-self: flex-end; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; font-family: var(--font); font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .2s;
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--text); border-color: rgba(0,0,0,.25); }
.btn-outline:hover { background: var(--text); color: var(--white); border-color: var(--text); }
.btn-red { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 4px 20px rgba(199,67,117,.40); }
.btn-red:hover { background: var(--red-hover); border-color: var(--red-hover); box-shadow: 0 8px 32px rgba(199,67,117,.60); }
.btn-ghost { background: transparent; color: var(--text); border-color: transparent; padding-left: 0; padding-right: 0; }
.btn-ghost:hover { color: var(--navy); }
.btn-ghost::after { content: ' →'; }
.btn-dark { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-dark:hover { background: var(--navy-dark); border-color: var(--navy-dark); }
.btn-white { background: #fff; color: var(--red); border-color: #fff; }
.btn-white:hover { background: transparent; color: #fff; border-color: #fff; }
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-outline-white:hover { background: rgba(255,255,255,.12); border-color: #fff; }
/* Buttons on dark sections — force white text/border */
.hero .btn-ghost, .cta-band .btn-ghost, .page-hero .btn-ghost, .statement .btn-ghost { color: var(--white); }
.hero .btn-ghost:hover, .cta-band .btn-ghost:hover, .page-hero .btn-ghost:hover, .statement .btn-ghost:hover { color: rgba(255,255,255,.75); }
.hero .btn-outline, .cta-band .btn-outline, .page-hero .btn-outline { border-color: rgba(255,255,255,.35); color: var(--white); }
.hero .btn-outline:hover, .cta-band .btn-outline:hover, .page-hero .btn-outline:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn-wa { background: #25d366; color: #fff; border-color: #25d366; box-shadow: 0 4px 16px rgba(37,211,102,.35); }
.btn-wa:hover { background: #1ebe57; border-color: #1ebe57; box-shadow: 0 6px 22px rgba(37,211,102,.5); }
.btn-yt { background: #ff0000; color: #fff; border-color: #ff0000; }
.btn-yt:hover { background: #cc0000; border-color: #cc0000; }

/* ── Section helpers ────────────────────────────────────── */
.section { padding: 80px 0; background: var(--bg-light); }
.section-sm { padding: 56px 0; background: var(--bg-light); }

/* ── Global card layout — every content block floats as a card ── */
section:not(.hero),
.cta-band,
.times-strip,
.verse-band,
.countdown-band,
.yt-cta,
.quick-actions,
.map-section,
.visit-tabs,
.intro-sec,
.sermons-grid-sec {
  margin: 0 24px 32px;
  padding: 80px 0;
  border-radius: 24px;
  overflow: hidden;
}

/* Restore compact padding for .section-sm (overrides global 80px above) */
section.section-sm { padding: 56px 0; }

/* Light-section cards */
.section,
.section-sm,
.quick-actions,
.yt-cta,
.methods,
.faq-sec,
.growth,
.ages-sec,
.expect-sec,
.rsvp-sec,
.timeline-sunday,
.form-sec,
.why-sec,
.filter-sec,
.groups-sec,
.cta-sec,
.wa-broadcast,
.map-section,
.visit-tabs,
.intro-sec,
.sermons-grid-sec {
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(29,41,81,.07);
}

/* Dark-section cards */
.stats,
.cta-band,
.times-strip,
.statement,
.verse-band,
.countdown-band,
.why-give,
.safety-sec,
.etiquette-sec,
.prayer-section,
.prayer-sec,
.faq-section,
.teams-sec {
  margin: 0 24px 32px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 4px 32px rgba(0,0,0,.18);
}

.sec-label { font-size: 10px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: var(--red); margin-bottom: 16px; display: block; }
.sec-title { font-size: clamp(32px, 4.5vw, 56px); font-weight: 900; line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); font-family: var(--font-display); }
.sec-body { font-size: 19px; color: var(--text-body); line-height: 1.7; font-family: var(--font); }
.sec-sub { font-size: 19px; color: var(--text-body); line-height: 1.7; max-width: 580px; margin-top: 12px; font-family: var(--font); }
.divider { width: 100%; height: 1px; background: var(--border); }
/* Section helpers on dark backgrounds — force white text */
.stats .sec-title, .cta-band .sec-title, .statement .sec-title, .footer .sec-title,
.has-dark-bg .sec-title, .why-give .sec-title, .safety-sec .sec-title,
.prayer-section .sec-title, .faq-section .sec-title,
.teams-sec .sec-title, .etiquette-sec .sec-title { color: var(--white); }

.stats .sec-label, .cta-band .sec-label, .statement .sec-label, .footer .sec-label,
.has-dark-bg .sec-label, .page-hero .sec-label,
.why-give .sec-label, .safety-sec .sec-label,
.prayer-section .sec-label, .faq-section .sec-label,
.teams-sec .sec-label, .etiquette-sec .sec-label { color: var(--red); }

.stats .sec-body, .cta-band .sec-body, .statement .sec-body, .footer .sec-body,
.has-dark-bg .sec-body { color: var(--body-dark); }

.has-dark-bg .sec-sub, .safety-sec .sec-sub, .teams-sec .sec-sub,
.prayer-section .sec-sub, .faq-section .sec-sub,
.why-give .sec-sub, .etiquette-sec .sec-sub { color: var(--body-dark); }

.has-dark-bg .kicker, .why-give .kicker, .safety-sec .kicker,
.prayer-section .kicker, .faq-section .kicker,
.teams-sec .kicker, .etiquette-sec .kicker { color: var(--muted-dark); }
.has-dark-bg .kicker::before, .why-give .kicker::before, .safety-sec .kicker::before,
.prayer-section .kicker::before, .faq-section .kicker::before,
.teams-sec .kicker::before, .etiquette-sec .kicker::before { background: var(--muted-dark); }

/* ── Stats ──────────────────────────────────────────────── */
.stats { background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, #111D3A 100%); padding: 80px 0; }
.stats-grid { display: flex; flex-wrap: wrap; }
.stat-item { flex: 1 1 180px; padding: 40px 32px; text-align: center; border-right: 1px solid var(--border-dark); background: rgba(255,255,255,.04); border-radius: 20px; transition: background .3s; }
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: rgba(255,255,255,.09); }
.stat-val { font-size: clamp(48px, 6vw, 72px); font-weight: 900; color: var(--white); line-height: 1; letter-spacing: -0.01em; font-family: var(--font-display); text-shadow: 0 0 48px rgba(199,67,117,.45); }
.stat-val span { font-size: .55em; color: var(--red); vertical-align: super; }
.stat-lbl { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--muted-dark); margin-top: 10px; }

/* ── Gallery grid ───────────────────────────────────────── */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.gallery-item { position: relative; overflow: hidden; cursor: pointer; height: 240px; }
.gallery-item.wide { grid-column: span 2; }
.gallery-item.tall { grid-row: span 2; height: auto; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .8s var(--ease); will-change: transform; display: block; filter: saturate(0.8) brightness(0.9); }
.gallery-item:hover img { transform: scale(1.07); filter: saturate(1.25) brightness(1.08); }
.gallery-cap { position: absolute; inset: 0; background: rgba(10,10,10,0); display: flex; align-items: center; justify-content: center; transition: background .4s var(--ease); }
.gallery-item:hover .gallery-cap { background: rgba(10,10,10,.55); }
.gallery-icon { color: #fff; font-size: 22px; opacity: 0; transform: scale(.8); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.gallery-item:hover .gallery-icon { opacity: 1; transform: scale(1); }

/* ── Horizontal gallery scroll ──────────────────────────── */
.gallery-h-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 3px; cursor: grab; scrollbar-width: none; -ms-overflow-style: none; }
.gallery-h-scroll::-webkit-scrollbar { display: none; }
.gallery-h-scroll:active { cursor: grabbing; }
.gallery-h-item { flex: 0 0 380px; height: 520px; scroll-snap-align: start; overflow: hidden; position: relative; }
.gallery-h-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease), filter .8s var(--ease); filter: saturate(0.8) brightness(0.9); }
.gallery-h-item:hover img { transform: scale(1.06); filter: saturate(1.25) brightness(1.08); }

/* ── CTA Band ───────────────────────────────────────────── */
.cta-band { background: linear-gradient(135deg, var(--red) 0%, var(--navy) 55%, var(--navy-dark) 100%); padding: 80px 0; }
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.cta-band-title { font-size: clamp(28px, 4vw, 44px); font-weight: 900; color: #fff; letter-spacing: -1px; line-height: 1.1; }
.cta-band-sub { font-size: 16px; color: rgba(255,255,255,.75); margin-top: 10px; }
.cta-band-actions { display: flex; gap: 14px; flex-wrap: wrap; flex-shrink: 0; }

/* ── Footer ─────────────────────────────────────────────── */
.footer { background: var(--navy-dark); padding: 80px 0 0; margin: 0 24px 32px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); box-shadow: 0 4px 32px rgba(0,0,0,.22); }
.footer-grid { display: flex; flex-wrap: wrap; gap: 48px; padding-bottom: 64px; border-bottom: 1px solid var(--border-dark); }
.footer-grid > div { flex: 1 1 200px; }
.footer-grid > div:first-child { flex: 2 1 260px; }
.footer-logo { height: 48px; margin-bottom: 16px; opacity: .85; }
.footer-brand { font-size: 16px; font-weight: 800; color: var(--white); margin-bottom: 10px; }
.footer-desc { font-size: 16px; color: var(--body-dark); line-height: 1.8; margin-bottom: 24px; }
.footer-social { display: flex; gap: 8px; }
.footer-social a { width: 34px; height: 34px; border: 1px solid var(--border-dark); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 13px; border-radius: 50%; transition: border-color .2s, color .2s, background .2s; }
.footer-social a:hover { border-color: var(--red); background: var(--red); }
.footer-heading { font-size: 10px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--white); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border-dark); }
.footer-links li { margin-bottom: 10px; }
.footer-links a { font-size: 16px; color: var(--body-dark); transition: color .2s; }
.footer-links a:hover { color: var(--white); }
.footer-contact li { display: flex; gap: 12px; margin-bottom: 14px; font-size: 16px; color: var(--body-dark); align-items: flex-start; line-height: 1.6; }
.footer-contact i { color: var(--red); margin-top: 3px; flex-shrink: 0; width: 14px; }
.footer-bottom { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--body-dark); }
.footer-bottom a { color: var(--body-dark); transition: color .2s; }
.footer-bottom a:hover { color: var(--white); }

/* ── Lightbox ───────────────────────────────────────────── */
.lb { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.96); align-items: center; justify-content: center; }
.lb.open { display: flex; }
.lb-img { max-width: 90vw; max-height: 88vh; object-fit: contain; }
.lb-close { position: absolute; top: 20px; right: 24px; color: rgba(255,255,255,.7); font-size: 26px; cursor: pointer; background: none; border: none; transition: color .2s, transform .25s; }
.lb-close:hover { color: #fff; transform: rotate(90deg); }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.5); font-size: 28px; cursor: pointer; background: rgba(255,255,255,.07); border: none; padding: 16px 18px; transition: color .2s, background .2s; }
.lb-prev { left: 0; } .lb-next { right: 0; }
.lb-prev:hover, .lb-next:hover { color: #fff; background: rgba(255,255,255,.14); }

/* ── Reveal animation ───────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
.reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; }

/* ── Page transition overlay ────────────────────────────── */
.page-transition { position: fixed; inset: 0; background: #111D3A; z-index: 99999; opacity: 1; pointer-events: none; transition: opacity .5s ease; }
.page-transition.loaded { opacity: 0; }

/* ── Word reveal ────────────────────────────────────────── */
.text-reveal .word-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; }
.text-reveal .word { display: inline-block; transform: translateY(110%); transition: transform .75s cubic-bezier(.16,1,.3,1); }
.text-reveal .word.up { transform: translateY(0); }

/* ── Film grain on dark hero sections only ─────────────── */
.page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .03;
  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)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ── Visual upgrades ────────────────────────────────────── */
.has-grain { position: relative; }
.has-grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .08; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>"); z-index: 3; }
.kicker { display: inline-block; font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--red); margin-bottom: 16px; position: relative; padding-left: 32px; }
.kicker::before { content: ''; position: absolute; left: 0; top: 50%; width: 22px; height: 1px; background: var(--red); }
.verse-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; line-height: 1.35; color: var(--gold); }
.drop-cap::first-letter { font-family: var(--font-display); font-size: 4.2em; float: left; line-height: .85; padding: 6px 12px 0 0; color: var(--red); font-weight: 900; }
.divider-motif { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 28px auto; }
.divider-motif::before, .divider-motif::after { content: ''; width: 40px; height: 1px; background: var(--red); }
.divider-motif i { color: var(--red); font-size: 12px; }
.duotone { position: relative; overflow: hidden; }
.duotone img { filter: grayscale(1) contrast(1.1); transition: filter .6s var(--ease); }
.duotone::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(29,41,81,.70) 0%, rgba(199,67,117,.50) 100%); mix-blend-mode: multiply; pointer-events: none; transition: opacity .6s var(--ease); }
.duotone:hover img { filter: grayscale(.3) contrast(1.05); }
.duotone:hover::after { opacity: .6; }
.link-underline { background-image: linear-gradient(var(--red), var(--red)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .35s var(--ease); padding-bottom: 2px; }
.link-underline:hover { background-size: 100% 1px; }
.btn-fill { position: relative; overflow: hidden; isolation: isolate; transition: color .3s var(--ease); }
.btn-fill::before { content: ''; position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); z-index: -1; }
.btn-fill:hover { color: var(--white); }
.btn-fill:hover::before { transform: scaleX(1); }
.wm-monogram { position: relative; }
.wm-monogram::before { content: 'JCC'; position: absolute; font-family: var(--font-display); font-weight: 900; font-size: clamp(180px, 30vw, 400px); color: rgba(255,255,255,.025); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; letter-spacing: -0.05em; z-index: 0; }
.wm-monogram > * { position: relative; z-index: 1; }
.card-lift { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), border-color .35s; box-shadow: 0 1px 3px rgba(29,41,81,.07), 0 4px 16px rgba(29,41,81,.05); }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(29,41,81,.14); }

/* Modern default card baseline — subtle shadow + smooth lift */
.mission, .pillar, .event-card, .testi-card, .qa-card, .why-card, .info-card, .group-card, .age-card, .step-card, .method-card, .team-card, .form-wrap {
  box-shadow: 0 1px 3px rgba(29,41,81,.07), 0 4px 16px rgba(29,41,81,.06);
  transition: box-shadow .35s var(--ease-out), transform .35s var(--ease-out), background .3s, border-color .3s;
}
.mission:hover, .pillar:hover, .event-card:hover, .testi-card:hover, .qa-card:hover, .why-card:hover, .info-card:hover, .group-card:hover, .age-card:hover, .step-card:hover, .method-card:hover {
  box-shadow: 0 8px 32px rgba(29,41,81,.12);
  transform: translateY(-3px);
}
.clip-diag { position: relative; }
.clip-diag::after { content: ''; position: absolute; bottom: -38px; left: 0; width: 100%; height: 80px; background: inherit; clip-path: polygon(0 0, 100% 60%, 100% 100%, 0 100%); z-index: 2; }

/* ── WhatsApp float + Scroll top ────────────────────────── */
.wa-btn { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; z-index: 999; box-shadow: 0 4px 16px rgba(37,211,102,.45); transition: transform .2s var(--ease), box-shadow .2s; }
.wa-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(37,211,102,.6); }
.scroll-top { position: fixed; bottom: 90px; right: 24px; width: 44px; height: 44px; background: var(--bg-light); border: 1px solid var(--border); border-radius: 50%; color: var(--text); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s; z-index: 998; box-shadow: 0 2px 12px rgba(29,41,81,.10); }
.scroll-top.visible { opacity: 1; transform: translateY(0); }
.scroll-top:hover { background: var(--surface); }

/* Live dot animation */
.live-dot { width: 8px; height: 8px; background: var(--red); border-radius: 50%; animation: pulseDot 1.6s infinite; }
@keyframes pulseDot { 0%{box-shadow:0 0 0 0 rgba(199,67,117,.8);} 70%{box-shadow:0 0 0 14px rgba(199,67,117,0);} 100%{box-shadow:0 0 0 0 rgba(199,67,117,0);} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

/* Accessibility */
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Skeleton loader */
@keyframes shimmer { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
.skel { background: linear-gradient(90deg, var(--surface) 25%, rgba(173,182,172,.45) 50%, var(--surface) 75%); background-size: 1200px 100%; animation: shimmer 1.4s infinite linear; border-radius: 2px; }

/* ── Sermon cards (shared across sermons page & homepage preview) ── */
.sermon-card { background: var(--bg-light); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; transition: background .3s var(--ease), box-shadow .3s var(--ease); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.sermon-card:hover { background: var(--bg-warm); box-shadow: 0 6px 24px rgba(0,0,0,.10); }
.sermon-thumb { position: relative; padding-bottom: 56.25%; overflow: hidden; background: #000; }
.sermon-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.sermon-card:hover .sermon-thumb img { transform: scale(1.05); }
.sermon-thumb-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; }
.sermon-card:hover .sermon-thumb-overlay { opacity: 1; }
.play-btn { width: 56px; height: 56px; background: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; padding-left: 3px; }
.sermon-body { padding: 24px; }
.sermon-tag { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.sermon-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 10px; line-height: 1.3; letter-spacing: -.2px; }
.sermon-meta { display: flex; flex-direction: column; gap: 4px; }
.sermon-meta span { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.sermon-meta i { color: var(--navy); width: 12px; }
.sermon-watch { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); transition: color .2s; }
.sermon-watch:hover { color: var(--navy); }

/* ── Sermons grid (horizontal scroll) ───────────────────── */
.sermons-preview-grid { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 40px; }
.sermons-preview-grid .sermon-card { flex: 1 1 260px; }

/* ── YT CTA ─────────────────────────────────────────────── */
.yt-cta { background: var(--bg-warm); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 56px 0; }
.yt-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.yt-cta-text h3 { font-size: clamp(22px, 3vw, 32px); font-weight: 900; color: var(--text); letter-spacing: -.5px; margin-bottom: 8px; }
.yt-cta-text p { font-size: 15px; color: var(--text-body); }
.yt-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

/* ── Large-screen section padding ───────────────────────── */
@media (min-width: 1200px) {
  section.welcome, section.stats, section.pillars, section.events, section.gallery,
  section.new-here, section.testimonials, section.cta-band, section.page-hero,
  section.trio-grid, section.expect, section.rsvp, section.faq-section,
  section.methods, section.where, section.steps, section.groups-list,
  section.teams, section.apply, section.ages, section.safety,
  section.sermon-preview { padding-top: 120px; padding-bottom: 120px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — applied globally
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .mobile-addr-bar { display: flex; }
  /* Tighten card margins on small screens */
  section:not(.hero),
  .cta-band, .times-strip, .verse-band, .countdown-band,
  .stats, .why-give, .safety-sec, .etiquette-sec,
  .prayer-section, .prayer-sec, .faq-section, .teams-sec,
  .statement, .yt-cta, .quick-actions, .map-section,
  .visit-tabs, .intro-sec, .sermons-grid-sec {
    margin: 0 8px 20px;
    padding: 56px 0;
    border-radius: 16px;
  }
  section.section-sm { padding: 40px 0; }
  .footer { margin: 0 8px 20px; border-radius: 16px; }
  .hero { margin: 0 8px 20px !important; border-radius: 16px !important; }
}
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .navbar { width: calc(100% - 32px); margin: 8px auto; }
}
@media (max-width: 768px) {
  .topbar { display: none !important; }
  .navbar { width: calc(100% - 16px) !important; margin: 6px auto !important; top: 6px; border-radius: 14px; }
  .nav-brand img { height: 40px !important; }
  .nav-brand-name { font-size: 16px !important; letter-spacing: 0.02em !important; }
  .page-hero { margin: 0 8px 20px !important; border-radius: 16px !important; padding: 0 !important; min-height: 320px !important; height: 55vh !important; }
  .page-hero-title { font-size: clamp(36px, 12vw, 72px) !important; letter-spacing: 0.04em !important; }
  .section { padding: 56px 0 !important; }
  .section-sm { padding: 40px 0 !important; }
  .welcome-grid, .new-here-inner, .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ministry-card { flex-direction: column !important; }
  .ministry-card-img { width: 100% !important; height: 220px !important; }
  .cta-band .container { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item.wide { grid-column: span 1; }
  .gallery-h-item { flex: 0 0 280px; height: 380px; }
  .stat-item { flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--border-dark); }
  .stat-item:nth-child(odd) { border-right: 1px solid var(--border-dark); }
  .stat-item:last-child, .stat-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .yt-cta .container { flex-direction: column; align-items: flex-start; }
  .sermons-preview-grid .sermon-card { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .pillars-grid, .testi-grid, .ministry-row, .why-grid, .teams-grid,
  .ages-grid, .steps-track, .track, .method-cards, .where-grid,
  .trio-grid, .expect-grid, .steps-grid, .quick-actions-grid,
  .faq-grid { grid-template-columns: 1fr !important; }
  /* Flex items wrap to single column */
  .footer-grid > div, .footer-grid > div:first-child { flex: 1 1 100%; }
  .sec-title { font-size: clamp(26px, 7vw, 38px) !important; letter-spacing: 0.04em !important; }
  .statement-big { font-size: clamp(28px, 8vw, 44px) !important; letter-spacing: 0.04em !important; }
  .page-hero-title { font-size: clamp(36px, 12vw, 64px) !important; }
  .form-row { flex-direction: column !important; gap: 16px !important; }
  .form-input, .form-select, .form-textarea { font-size: 16px !important; }
  .sermons-preview-grid { grid-template-columns: 1fr !important; }
  .sermons-grid .sermon-card { flex: 0 0 82vw !important; }
  .timeline { padding-left: 50px; }
  .timeline::before { left: 20px; }
  .timeline li::before { left: -38px; }
  .countdown-band .container { flex-direction: column !important; gap: 16px !important; align-items: center !important; }
}
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .gallery-grid { grid-template-columns: 1fr; }
  .qa-card { padding: 18px 16px; gap: 14px; }
  .qa-icon { width: 42px; height: 42px; font-size: 16px; }
  .testi-card { padding: 24px 20px; }
  .phone-mockup { max-width: 160px; }
  .kicker { font-size: 10px; letter-spacing: 2px; }
  .drop-cap::first-letter { font-size: 3em; }
}
@media (max-width: 640px) {
  .wm-monogram::before { display: none; }
}
/* Overflow prevention */
* { max-width: 100%; }
img { max-width: 100%; height: auto; }
table { width: 100%; overflow-x: auto; display: block; }