/* =========================================================
   Hallelujah Village Church Trust — styles.css
   Palette: deep navy, warm gold, ivory cream, dusk rose
   ========================================================= */

:root{
  --navy-900: #07142e;
  --navy-800: #0a1a3a;
  --navy-700: #122553;
  --navy-600: #1c3675;
  --gold-500: #c8954b;
  --gold-400: #d6a868;
  --gold-300: #e6c590;
  --cream-50:  #fbf8f1;
  --cream-100: #f4ecdc;
  --cream-200: #ece1c7;
  --rose-100:  #e9d4c4;
  --rose-200:  #d6b39c;
  --ink-900: #0c0e13;
  --ink-700: #2a2f3a;
  --ink-500: #565d6b;
  --ink-400: #7a8090;
  --ink-300: #b2b6c1;
  --line: rgba(12,14,19,.10);
  --line-light: rgba(255,255,255,.14);

  --radius-sm: 8px;
  --radius:    16px;
  --radius-lg: 28px;

  --maxw: 1200px;
  --pad-x: clamp(20px, 5vw, 56px);

  --t-fast: .25s cubic-bezier(.2,.7,.2,1);
  --t: .45s cubic-bezier(.2,.7,.2,1);
  --t-slow: .9s cubic-bezier(.2,.7,.2,1);

  --shadow-sm: 0 2px 8px rgba(7,20,46,.06), 0 1px 2px rgba(7,20,46,.04);
  --shadow:    0 12px 30px rgba(7,20,46,.10), 0 4px 10px rgba(7,20,46,.05);
  --shadow-lg: 0 30px 60px -20px rgba(7,20,46,.30), 0 18px 36px -18px rgba(7,20,46,.20);
}

*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  max-width:100%;
}
/* Reduced motion: collapse animations to ~0ms but PRESERVE hover/state feedback
   (color/background/border transitions). Previous *{animation:none!important} was
   too aggressive and stripped legitimate accessibility-friendly micro-feedback. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Skip-to-content link for keyboard users (WCAG 2.4.1) */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:#0a1838;
  color:#fff;
  padding:.75rem 1.25rem;
  z-index:9999;
  border-radius:0 0 6px 0;
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
}
.skip-link:focus{ left:0; outline:2px solid var(--gold-500); outline-offset:2px; }

/* Universal focus-visible ring - brand-consistent, zero specificity via :where() */
:where(a, button, [role=button], summary, [tabindex]):focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
  border-radius:4px;
}

body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink-900);
  background:var(--cream-50);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  max-width:100%;
  position:relative;
  line-height:1.6;
}
img, svg, video, canvas{max-width:100%;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit;}
em{font-style:italic;}

/* ---------- HVCT brand mark (cross + rays) ---------- */
.hvct-mark{
  display:block;
  overflow:visible;
}
.hvct-cross{
  /* Cross stays solid */
}
.hvct-rays{
  transform-origin:12px 12px;
  animation:hvct-rays-pulse 5.2s ease-in-out infinite;
  will-change:opacity, transform;
}
@keyframes hvct-rays-pulse{
  0%, 100%{ opacity:.32; transform:scale(.96); }
  50%     { opacity:1;   transform:scale(1.04); }
}
@media (prefers-reduced-motion: reduce){
  .hvct-rays{ animation:none; opacity:.65; transform:none; }
}

/* ---------- Loader ---------- */
.loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--navy-900);
  display:grid; place-items:center;
  transition:opacity .6s ease, visibility .6s ease;
}
.loader.is-done{opacity:0; visibility:hidden;}
.loader-mark{width:54px; height:54px; animation:pulse 1.4s ease-in-out infinite;}
.loader-mark .hvct-mark{width:100%; height:100%;}
@keyframes pulse{
  0%,100%{opacity:.4; transform:scale(.96);}
  50%{opacity:1; transform:scale(1.02);}
}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:16px;
  padding:18px var(--pad-x);
  background:rgba(251,248,241,.0);
  transition:background var(--t), padding var(--t), box-shadow var(--t), backdrop-filter var(--t);
  max-width:100vw;
  width:100%;
}
.nav.is-scrolled{
  background:rgba(251,248,241,.85);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 var(--line);
  padding:12px var(--pad-x);
}
.nav-brand{
  display:flex; align-items:center; gap:12px;
  flex:0 1 auto; min-width:0;
  text-decoration:none;
}
.nav-mark{
  width:38px; height:38px; border-radius:11px;
  background:var(--navy-800);
  display:grid; place-items:center;
  flex-shrink:0;
  transition:transform var(--t);
  overflow:hidden;
}
.nav-mark .hvct-mark{width:26px; height:26px;}
.nav-brand:hover .nav-mark{transform:rotate(-6deg) scale(1.05);}
.nav-brand-text{display:flex; flex-direction:column; line-height:1.1; min-width:0;}
.nav-brand-name{
  font-family:'Fraunces', serif; font-weight:600;
  font-size:18px; color:var(--navy-800); letter-spacing:.01em;
  white-space:nowrap;
}
.nav-brand-sub{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-500);
  white-space:nowrap;
}
.nav.is-light .nav-brand-name{color:var(--cream-50);}
.nav.is-light .nav-brand-sub{color:var(--cream-200);}
.nav.is-light .nav-mark{background:rgba(255,255,255,.10); color:var(--gold-300);}

.nav-links{margin-left:auto; display:flex; gap:4px; flex-wrap:nowrap;}
.nav-links a{
  padding:8px 14px; border-radius:999px;
  font-size:14px; color:var(--navy-800);
  transition:background var(--t-fast), color var(--t-fast);
}
.nav.is-light .nav-links a{color:rgba(251,248,241,.85);}
.nav-links a:hover{background:rgba(12,14,19,.06);}
.nav.is-light .nav-links a:hover{background:rgba(255,255,255,.10); color:#fff;}

.nav-toggle{
  display:none;
  width:42px; height:42px;
  background:transparent; border:0;
  margin-left:auto;
  cursor:pointer;
  position:relative;
  flex-shrink:0;
  z-index:2;
}
.nav-toggle span{
  position:absolute; left:10px; right:10px; height:2px;
  background:var(--navy-800); border-radius:2px;
  transition:transform var(--t), opacity var(--t), top var(--t);
}
.nav-toggle span:nth-child(1){top:14px;}
.nav-toggle span:nth-child(2){top:20px;}
.nav-toggle span:nth-child(3){top:26px;}
.nav.is-light .nav-toggle span{background:var(--cream-50);}
body.drawer-open .nav-toggle span:nth-child(1){top:20px; transform:rotate(45deg);}
body.drawer-open .nav-toggle span:nth-child(2){opacity:0;}
body.drawer-open .nav-toggle span:nth-child(3){top:20px; transform:rotate(-45deg);}

@media (max-width: 1024px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
}
@media (max-width: 380px){
  .nav-brand-sub{display:none;}
  .nav-brand-name{font-size:16px;}
  .nav{padding:14px 16px;}
  .nav.is-scrolled{padding:10px 16px;}
}

/* ---------- Drawer ----------
   Closed state uses display:none so the drawer literally does not render
   anywhere — no transform percentages, no stuck animations, no leftover
   chrome at the top of the viewport on iOS Safari. */
.drawer{
  position:fixed;
  top:0; left:0; right:0;
  height:100vh;             /* fallback for old browsers */
  height:100dvh;            /* dynamic viewport - tracks iOS URL-bar resize */
  width:100%;
  z-index:90;
  background:linear-gradient(180deg, var(--navy-900), var(--navy-800));
  display:none;
  flex-direction:column;
  gap:8px;
  /* Respect notch (top) and home indicator (bottom) on iPhone X/11/12/13/14/15 */
  padding:
    calc(env(safe-area-inset-top, 0px) + 88px)
    var(--pad-x)
    calc(env(safe-area-inset-bottom, 0px) + 36px);
  overflow-y:auto;
  /* iOS-critical: prevent drawer scroll from bouncing into the body */
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  /* iOS momentum scroll fix */
  scrollbar-width:none;
}
.drawer::-webkit-scrollbar{display:none;}
.drawer.is-open{
  display:flex;
  animation: drawer-slide-in .5s cubic-bezier(.7,0,.2,1) both;
}
@keyframes drawer-slide-in{
  from{ transform: translateY(-100%); opacity: .8; }
  to  { transform: translateY(0);     opacity: 1; }
}
.drawer a{
  font-family:'Fraunces', serif;
  font-size:30px; color:var(--cream-50);
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  /* Tap targets stay generous */
  min-height:48px;
  display:flex;
  align-items:center;
}
.drawer a.btn{display:flex; margin-top:18px; border-bottom:0;}

/* iOS-safe scroll lock when drawer is open.
   position:fixed prevents the underlying page from bouncing or jumping.
   --drawer-scroll-y is set by JS to the captured scrollY (negative) so the
   page visually stays where it was. */
body.drawer-open{
  position:fixed;
  width:100%;
  overflow:hidden;
  top:var(--drawer-scroll-y, 0);
  left:0; right:0;
}

/* Defensive — no Donate or other button may ever render inside the header */
.nav .btn,
.nav .btn-gold,
.nav .nav-cta{display:none !important;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px;
  border-radius:999px;
  font-weight:500; font-size:15px; letter-spacing:.01em;
  background:#fff; color:var(--navy-800);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--t), background var(--t), color var(--t), box-shadow var(--t), border-color var(--t);
  white-space:nowrap;
}
.btn svg{width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--t);}
.btn:hover svg{transform:translateX(3px);}
.btn-sm{padding:10px 16px; font-size:13px;}
.btn-lg{padding:16px 26px; font-size:15px;}
.btn-gold{background:var(--gold-500); color:#fff; box-shadow:var(--shadow-sm);}
.btn-gold:hover{background:#b07f3a; transform:translateY(-1px); box-shadow:var(--shadow);}

/* Hero Donate — large, pulsing, glowing */
.btn-donate-hero{
  position:relative;
  display:inline-flex; align-items:center; gap:14px;
  padding:20px 32px;
  border-radius:999px;
  background:linear-gradient(135deg, #d6a868 0%, #c8954b 55%, #b07f3a 100%);
  color:#fff;
  font-family:'Inter', system-ui, sans-serif;
  font-weight:600; font-size:17px; letter-spacing:.01em;
  text-decoration:none;
  isolation:isolate;
  box-shadow:
    0 10px 30px -6px rgba(200,149,75,.55),
    0 2px 0 rgba(255,255,255,.18) inset,
    0 -2px 0 rgba(0,0,0,.10) inset;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, background .35s ease;
  animation:donate-breathe 4s ease-in-out infinite;
  min-height:60px;
}
.btn-donate-glow{
  position:absolute; inset:-4px; z-index:-1;
  border-radius:inherit;
  background:radial-gradient(closest-side, rgba(214,168,104,.55), transparent 70%);
  filter:blur(14px);
  opacity:.85;
  animation:donate-glow 4s ease-in-out infinite;
}
.btn-donate-hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  border-radius:inherit;
  box-shadow:0 0 0 0 rgba(214,168,104,.55);
  animation:donate-ring 2.6s cubic-bezier(.2,.7,.2,1) infinite;
  pointer-events:none;
}
.btn-donate-icon{
  display:grid; place-items:center;
  width:30px; height:30px;
  border-radius:50%;
  background:rgba(255,255,255,.20);
  z-index:1;
}
.btn-donate-icon svg{width:16px; height:16px; fill:#fff;}
.btn-donate-label{z-index:1; position:relative;}
.btn-donate-arrow{
  display:grid; place-items:center;
  width:24px; height:24px;
  z-index:1;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.btn-donate-arrow svg{width:18px; height:18px; stroke:#fff; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;}

.btn-donate-hero:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:
    0 18px 40px -6px rgba(200,149,75,.7),
    0 2px 0 rgba(255,255,255,.22) inset,
    0 -2px 0 rgba(0,0,0,.10) inset;
  background:linear-gradient(135deg, #e6b876 0%, #d6a468 55%, #b8853c 100%);
}
.btn-donate-hero:hover .btn-donate-arrow{transform:translateX(4px);}
.btn-donate-hero:active{transform:translateY(0) scale(.99);}
.btn-donate-hero:focus-visible{outline:2px solid #fff; outline-offset:4px;}

@keyframes donate-breathe{
  0%, 100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-2px) scale(1.015);}
}
@keyframes donate-glow{
  0%, 100%{opacity:.55; transform:scale(1);}
  50%{opacity:.95; transform:scale(1.05);}
}
@keyframes donate-ring{
  0%{box-shadow:0 0 0 0 rgba(214,168,104,.55);}
  70%{box-shadow:0 0 0 22px rgba(214,168,104,0);}
  100%{box-shadow:0 0 0 0 rgba(214,168,104,0);}
}

@media (prefers-reduced-motion: reduce){
  .btn-donate-hero,
  .btn-donate-glow,
  .btn-donate-hero::before{animation:none;}
}

@media (max-width: 480px){
  .btn-donate-hero{
    padding:18px 26px;
    font-size:16px;
    gap:12px;
    min-height:58px;
  }
  .btn-donate-icon{width:28px; height:28px;}
  .btn-donate-icon svg{width:14px; height:14px;}
}
.btn-navy{background:var(--navy-800); color:var(--cream-50); box-shadow:var(--shadow-sm);}
.btn-navy:hover{background:var(--navy-700); transform:translateY(-1px); box-shadow:var(--shadow);}
.btn-ghost{background:transparent; color:var(--cream-50); border:1px solid rgba(255,255,255,.30);}
.btn-ghost:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.55);}
.btn-ghost-light{background:transparent; color:rgba(255,255,255,.65); border:1px dashed rgba(255,255,255,.35); cursor:default;}
.btn-link{color:var(--navy-700); text-decoration:none; padding:14px 4px; font-weight:500;}
.btn-link:hover{color:var(--gold-500);}

/* ---------- Layout primitives ---------- */
.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x);}
.section{padding:clamp(80px, 11vw, 140px) 0; position:relative; max-width:100vw; overflow-x:clip;}
.section + .section{border-top:1px solid var(--line);}

.eyebrow{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-500);
  margin:0 0 18px;
  font-weight:600;
}
.eyebrow.center{text-align:center;}
.eyebrow.light{color:var(--gold-300);}

.display{
  font-family:'Fraunces', serif;
  font-weight:400;
  color:var(--navy-900);
  font-size:clamp(34px, 4.6vw, 60px);
  line-height:1.05;
  letter-spacing:-0.015em;
  margin:0 0 28px;
}
.display.center{text-align:center; max-width:18ch; margin-left:auto; margin-right:auto;}
.display.large{font-size:clamp(36px, 5.4vw, 72px);}
.display.light{color:var(--cream-50);}
.display em{font-style:italic; color:var(--gold-500);}
.display.light em{color:var(--gold-300);}

.lede{
  font-size:clamp(17px, 1.4vw, 19px);
  color:var(--ink-700);
  max-width:62ch;
  margin:0 0 22px;
}
.lede.light{color:rgba(251,248,241,.92); max-width:64ch; margin-left:auto; margin-right:auto;}

.two-col{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
  gap:clamp(36px, 6vw, 88px);
  align-items:center;
}
.two-col > *{min-width:0;}
.two-col.reverse .col-text{order:2;}
.two-col.reverse .col-media{order:1;}
@media (max-width: 900px){
  .two-col{grid-template-columns:minmax(0, 1fr);}
  .two-col.reverse .col-text{order:1;}
  .two-col.reverse .col-media{order:2;}
}

.cta-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:26px;}
.cta-row.centered{justify-content:center;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  padding:140px var(--pad-x) 80px;
  display:flex; align-items:center;
  color:var(--cream-50);
  background:#07142e;
  overflow:hidden;
  isolation:isolate;
  width:100%;
  max-width:100vw;
}
/* Cinematic crossfade slideshow - bottom layer */
.hero-slideshow{
  position:absolute; inset:0; z-index:-3;
  overflow:hidden;
}
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transform:scale(1.08);
  transition:opacity 2.2s ease, transform 12s linear;
  will-change:opacity, transform;
}
.hero-slide.is-active{
  opacity:1;
  transform:scale(1);
  animation:hero-kenburns 12s ease-out forwards;
}
@keyframes hero-kenburns{
  from{ transform:scale(1.04); }
  to  { transform:scale(1.12); }
}
@media (prefers-reduced-motion: reduce){
  .hero-slide.is-active{ animation:none; transform:scale(1); }
}
/* Vignette + atmospheric tint over the slideshow */
/* Hero canvas (Three.js starfield) - must fill the entire hero */
#heroCanvas{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  width:100%; height:100%;
  z-index:-1;
  display:block;
  pointer-events:none;
}
/* Cinematic vignette - photos shine through on the right where the subject is,
   left side darkens toward the text so the title and body stay legible
   even when the photo behind them is mostly bright (white robes, etc). */
.hero-vignette{
  position:absolute; inset:0; z-index:-2;
  pointer-events:none;
  background:
    /* Left → right gradient: dark text-side, cleaner photo-side */
    linear-gradient(95deg, rgba(7,20,46,.72) 0%, rgba(7,20,46,.55) 30%, rgba(7,20,46,.30) 60%, rgba(7,20,46,.12) 100%),
    /* Bottom vignette so meta strip stays readable */
    linear-gradient(180deg, rgba(7,20,46,.20) 0%, rgba(7,20,46,.0) 25%, rgba(7,20,46,.35) 75%, rgba(7,20,46,.70) 100%),
    /* Soft top edge */
    linear-gradient(180deg, rgba(7,20,46,.40) 0%, transparent 18%);
}
@media (max-width: 760px){
  .hero-vignette{
    background:
      linear-gradient(180deg, rgba(7,20,46,.55) 0%, rgba(7,20,46,.30) 25%, rgba(7,20,46,.45) 70%, rgba(7,20,46,.75) 100%),
      linear-gradient(95deg, rgba(7,20,46,.55) 0%, rgba(7,20,46,.30) 100%);
  }
}
.hero-veil{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 50% at 80% 20%, rgba(214,168,104,.10), transparent 60%),
    radial-gradient(50% 40% at 10% 80%, rgba(214,168,104,.08), transparent 60%);
  pointer-events:none;
}

.hero-inner{
  max-width:var(--maxw); margin:0 auto; width:100%;
  position:relative;
}
.hero-title{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:clamp(48px, 7.2vw, 108px);
  line-height:.98; letter-spacing:-0.02em;
  margin:0 0 30px;
  color:var(--cream-50);
  text-shadow:0 2px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45);
}
.hero-title .line{display:block; overflow:hidden; padding-bottom:.18em; margin-bottom:-.10em;}
.hero-title .line > span{display:inline-block; transform:translateY(110%);}
.hero-title em{font-style:italic; color:var(--gold-400);}

.hero-sub{
  max-width:58ch; font-size:clamp(17px, 1.5vw, 20px);
  color:rgba(251,248,241,.94);
  margin:0 0 18px;
  text-shadow:0 1px 14px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.55);
}
.hero-welcome{
  max-width:62ch;
  font-size:15px;
  color:rgba(251,248,241,.86);
  margin:0 0 36px;
  line-height:1.7;
  text-shadow:0 1px 12px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.5);
}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:64px;}

.hero-meta{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  max-width:760px;
  padding-top:34px; border-top:1px solid rgba(255,255,255,.14);
}
.hero-meta > div{display:flex; flex-direction:column; gap:4px;}
.hero-meta-label{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-300); font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.55);}
.hero-meta-value{font-family:'Fraunces', serif; font-size:17px; color:var(--cream-50); text-shadow:0 1px 8px rgba(0,0,0,.65);}

@media (max-width: 700px){
  .hero-meta{grid-template-columns:1fr; gap:14px;}
}

.hero-scroll{
  position:absolute; right:var(--pad-x); bottom:34px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(251,248,241,.55);
}
.hero-scroll-line{
  width:1px; height:60px; background:linear-gradient(180deg, var(--gold-400), transparent);
  animation:scrollline 2.2s ease-in-out infinite;
  transform-origin:top;
}
@keyframes scrollline{
  0%{transform:scaleY(0); opacity:0;}
  40%{opacity:1;}
  100%{transform:scaleY(1); opacity:0;}
}
@media (max-width: 700px){.hero-scroll{display:none;}}

/* ---------- ABOUT ---------- */
.about{background:var(--cream-50);}
.pillars{list-style:none; padding:0; margin:36px 0 0; display:grid; gap:14px;}
.pillars li{
  display:flex; align-items:center; gap:18px;
  padding:18px 22px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  transition:transform var(--t), border-color var(--t), box-shadow var(--t);
}
.pillars li:hover{transform:translateY(-2px); border-color:var(--gold-400); box-shadow:var(--shadow-sm);}
.pill-num{
  font-family:'Fraunces', serif; font-style:italic;
  font-size:22px; color:var(--gold-500); min-width:30px;
}
.pill-text{color:var(--ink-700); font-size:15px;}

.stacked-frame{
  position:relative; margin:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio:4/5;
}
.stacked-frame img{width:100%; height:100%; object-fit:cover;}
.stacked-frame figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px 26px;
  background:linear-gradient(180deg, transparent, rgba(7,20,46,.85));
  color:var(--cream-50);
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:15px;
}
.floating-frame{
  position:absolute; right:-30px; bottom:-50px;
  width:48%; aspect-ratio:1/1;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:6px solid var(--cream-50);
  margin:0;
}
.floating-frame--right{left:auto; right:-30px;}
.floating-frame img{width:100%; height:100%; object-fit:cover;}
.col-media{position:relative;}
@media (max-width: 1100px){
  .floating-frame{right:-10px; bottom:-30px;}
}
@media (max-width: 900px){
  .floating-frame, .floating-frame--right{right:0; bottom:-20px; width:45%;}
}

/* ---------- MISSION ---------- */
.mission{
  background:
    radial-gradient(50% 60% at 50% 0%, rgba(200,149,75,.10), transparent 70%),
    var(--cream-100);
  text-align:center;
}
.verse{
  max-width:720px; margin:48px auto 0;
  padding:36px 28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  position:relative;
  text-align:center;
}
.verse p{
  font-family:'Fraunces', serif; font-style:italic;
  font-size:clamp(20px, 2.2vw, 26px);
  line-height:1.35;
  color:var(--navy-900);
  margin:0 0 14px;
}
.verse cite{
  font-style:normal;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-500); font-weight:600;
}
.verse-mark{
  position:absolute; top:-28px; left:50%; transform:translateX(-50%);
  width:54px; height:54px;
  background:var(--gold-500); color:#fff;
  border-radius:50%;
  display:grid; place-items:center;
  font-family:'Fraunces', serif;
  font-size:42px; line-height:1; padding-top:10px;
  box-shadow:var(--shadow);
}

/* ---------- MINISTRIES ---------- */
.ministries{background:var(--cream-50);}
.ministries-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:48px;
}
@media (max-width: 900px){.ministries-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width: 600px){.ministries-grid{grid-template-columns:1fr;}}

.ministry-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 28px;
  transition:transform var(--t), border-color var(--t), box-shadow var(--t);
  position:relative;
}
.ministry-card:hover{transform:translateY(-4px); border-color:var(--gold-400); box-shadow:var(--shadow);}
.ministry-icon{
  width:54px; height:54px; border-radius:14px;
  background:linear-gradient(135deg, var(--navy-800), var(--navy-600));
  color:var(--gold-300);
  display:grid; place-items:center;
  margin-bottom:22px;
}
.ministry-icon svg{width:24px; height:24px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.ministry-card h3{
  font-family:'Fraunces', serif; font-weight:500;
  font-size:22px; color:var(--navy-900);
  margin:0 0 10px;
}
.ministry-card p{color:var(--ink-700); font-size:15px; margin:0;}

/* ---------- BELIEFS ---------- */
.beliefs{background:var(--cream-100);}
.beliefs-list{
  margin-top:42px;
  display:grid; gap:10px;
  border-top:1px solid var(--line);
}
.belief{
  background:transparent;
  border-bottom:1px solid var(--line);
  padding:0;
}
.belief summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:24px;
  padding:24px 4px;
  font-family:'Fraunces', serif;
  font-size:clamp(20px, 2vw, 26px);
  color:var(--navy-900);
  transition:color var(--t-fast);
}
.belief summary::-webkit-details-marker{display:none;}
.belief summary:hover{color:var(--gold-500);}
.belief-num{
  font-style:italic; font-size:14px;
  color:var(--gold-500); min-width:22px;
  letter-spacing:.05em;
}
.belief-title{flex:1;}
.belief-chev{
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  position:relative;
  transition:background var(--t-fast), border-color var(--t-fast), transform var(--t);
  flex-shrink:0;
}
.belief-chev::before, .belief-chev::after{
  content:''; position:absolute; background:var(--navy-800);
  width:12px; height:1.5px; transition:transform var(--t);
}
.belief-chev::after{transform:rotate(90deg);}
.belief[open] .belief-chev{background:var(--navy-800); border-color:var(--navy-800);}
.belief[open] .belief-chev::before, .belief[open] .belief-chev::after{background:var(--gold-300);}
.belief[open] .belief-chev::after{transform:rotate(0);}
.belief-body{
  padding:6px 4px 28px 50px;
  max-width:80ch;
  color:var(--ink-700);
  font-size:16px;
  animation:fadeUp .5s ease both;
}
.belief-body p{margin:0 0 10px;}
.belief-body .refs{
  font-size:13px; color:var(--gold-500); font-weight:500;
  letter-spacing:.04em;
}
@keyframes fadeUp{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:none;}
}
@media (max-width: 600px){.belief-body{padding-left:0;}}

/* ---------- SPONSOR (split) ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  padding:0;
  align-items:stretch;
  min-height:600px;
  background:var(--cream-50);
}
.split + .section{border-top:1px solid var(--line);}
.split-media{
  position:relative;
  overflow:hidden;
  background:var(--navy-800);
  min-height:min(100vh, 720px);
}
.split-media > img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.split-media-grid{
  position:absolute; right:24px; bottom:24px;
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  width:55%;
}
.split-media-grid img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:12px;
  border:4px solid var(--cream-50);
  box-shadow:var(--shadow);
}
.split-text{
  padding:clamp(60px, 8vw, 110px) clamp(28px, 5vw, 70px);
  background:var(--cream-50);
  display:flex; flex-direction:column; justify-content:center;
}
@media (max-width: 900px){
  .split{grid-template-columns:1fr;}
  .split-media{min-height:380px;}
  .split-media-grid{display:none;}
}

/* ---------- VISIT ---------- */
.visit{background:var(--cream-100);}
.serve-list{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:8px;}
.serve-list li{
  display:grid;
  grid-template-columns:200px 1fr auto;
  align-items:baseline;
  gap:18px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.serve-list li > span:first-child{
  font-family:'Fraunces', serif; font-size:18px; color:var(--navy-900);
}
.serve-list li i{
  display:block; height:1px;
  background:linear-gradient(90deg, var(--gold-400), transparent);
}
.serve-list li > span:last-child{color:var(--ink-500); font-size:14px;}
@media (max-width: 600px){
  .serve-list li{grid-template-columns:1fr; gap:4px; padding:14px 0;}
  .serve-list li i{display:none;}
}

/* ---------- GALLERY ---------- */
.gallery{background:var(--cream-50);}
.gallery-tabs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:30px 0 32px;
}
.g-tab{
  padding:10px 18px; border-radius:999px;
  background:transparent; border:1px solid var(--line);
  color:var(--ink-700); font-size:14px;
  cursor:pointer;
  transition:all var(--t-fast);
}
.g-tab:hover{border-color:var(--gold-400); color:var(--navy-800);}
.g-tab.active{background:var(--navy-800); color:var(--cream-50); border-color:var(--navy-800);}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  grid-auto-rows:200px;
}
@media (max-width: 1000px){.gallery-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width: 700px){.gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:160px;}}

.g-item{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  display:block;
  background:var(--navy-900);
  cursor:zoom-in;
  transition:transform var(--t), opacity var(--t-fast);
}
.g-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.2,1), filter var(--t);
}
.g-item:hover img{transform:scale(1.06); filter:brightness(.95);}
.g-item::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(7,20,46,.50));
  opacity:0; transition:opacity var(--t-fast);
}
.g-item:hover::after{opacity:1;}

/* legacy bento sizing intentionally removed - JS now computes spans per image */
.g-item.is-tall{grid-row:auto;}
.g-item.is-wide{grid-column:auto;}
.g-item.is-hidden{display:none;}

@media (max-width: 700px){
  .g-item.is-tall{grid-row:span 1;}
  .g-item.is-wide{grid-column:span 1;}
}

/* ---------- DONATE ---------- */
.donate{
  padding:clamp(80px, 11vw, 140px) 0;
  background:var(--cream-50);
}
.donate-card{
  position:relative;
  border-radius:var(--radius-lg);
  padding:clamp(40px, 6vw, 80px);
  color:var(--cream-50);
  overflow:hidden;
  text-align:center;
  box-shadow:var(--shadow-lg);
  isolation:isolate;
  background:linear-gradient(135deg, var(--navy-900), var(--navy-700));
}
.donate-card-bg{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(214,168,104,.32), transparent 60%),
    radial-gradient(80% 100% at 100% 100%, rgba(28,54,117,.55), transparent 60%),
    linear-gradient(135deg, var(--navy-900), var(--navy-700));
}
.donate-card > *:not(.donate-card-bg){position:relative; z-index:1;}
.donate-card .display{margin-bottom:18px;}

.paypal-box{
  max-width:620px; margin:36px auto 0;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:28px;
  backdrop-filter:blur(6px);
}
.paypal-label{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-300); font-weight:600; margin:0 0 12px;
}
.paypal-email{
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:'Fraunces', serif; font-size:clamp(20px, 2.4vw, 28px);
  color:var(--cream-50);
  margin:0 0 14px;
  flex-wrap:wrap;
}
.copy-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:transparent; color:var(--cream-50);
  font-size:12px; letter-spacing:.04em; cursor:pointer;
  transition:all var(--t-fast);
}
.copy-btn:hover{background:rgba(255,255,255,.10); border-color:var(--gold-300);}
.copy-btn svg{width:14px; height:14px; fill:currentColor;}
.copy-btn.is-copied{background:var(--gold-500); border-color:var(--gold-500);}
.paypal-note{
  font-size:13.5px; color:rgba(251,248,241,.82);
  max-width:46ch; margin:0 auto;
  line-height:1.65;
}
.donate-foot{
  margin:30px auto 0;
  max-width:50ch;
  font-size:14.5px;
  color:rgba(251,248,241,.85);
  font-style:italic;
}
.eyebrow.light{color:var(--gold-300);}

/* ---------- CONTACT ---------- */
.contact{background:var(--cream-100);}
.contact-list{list-style:none; padding:0; margin:28px 0 0;}
.contact-list li{
  display:grid; grid-template-columns:130px 1fr; gap:18px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.c-label{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-500); font-weight:600;
  padding-top:3px;
}
.c-value{color:var(--ink-900); line-height:1.6;}
.c-value a{border-bottom:1px solid var(--line); transition:border-color var(--t-fast), color var(--t-fast);}
.c-value a:hover{color:var(--gold-500); border-color:var(--gold-500);}
@media (max-width: 600px){
  .contact-list li{grid-template-columns:1fr; gap:6px;}
}

.contact-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(28px, 4vw, 40px);
  box-shadow:var(--shadow-sm);
}
.contact-card-eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-500); font-weight:600;
  margin:0 0 14px;
}
.contact-card-title{
  font-family:'Fraunces', serif; font-weight:500;
  font-size:clamp(22px, 2.2vw, 28px);
  line-height:1.2;
  color:var(--navy-900);
  margin:0 0 10px;
  letter-spacing:-0.01em;
}
.contact-card-note{
  font-size:14px; color:var(--ink-500);
  margin:0 0 24px;
  line-height:1.6;
}

.contact-method{
  display:flex; align-items:center; gap:16px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:10px;
  background:#fff;
  transition:transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t-fast);
  color:var(--ink-900);
}
.contact-method:hover{
  transform:translateY(-2px);
  border-color:var(--gold-400);
  box-shadow:var(--shadow-sm);
}
.contact-method-icon{
  flex-shrink:0;
  width:44px; height:44px;
  border-radius:12px;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  transition:transform var(--t);
}
.contact-method-icon--navy{background:var(--navy-800); color:var(--gold-300);}
.contact-method-icon--gold{background:var(--gold-500); color:#fff;}
.contact-method-icon svg{width:22px; height:22px;}
.contact-method-icon--navy svg, .contact-method-icon--gold svg{
  stroke:currentColor; stroke-width:1.7; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
.contact-method:hover .contact-method-icon{transform:scale(1.06) rotate(-3deg);}

.contact-method-body{
  flex:1; display:flex; flex-direction:column; gap:2px; min-width:0;
}
.contact-method-label{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-500); font-weight:600;
}
.contact-method-value{
  font-family:'Fraunces', serif;
  font-size:17px; color:var(--navy-900);
  letter-spacing:-0.005em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  min-width:0;
}
.contact-method-arrow{
  flex-shrink:0;
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink-400);
  transition:transform var(--t), color var(--t-fast), background var(--t-fast);
}
.contact-method-arrow svg{width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.contact-method:hover .contact-method-arrow{transform:translateX(4px); color:var(--gold-500);}

.contact-method--wa{
  background:linear-gradient(135deg, rgba(37,211,102,.06), rgba(37,211,102,0));
  border-color:rgba(37,211,102,.25);
}
.contact-method--wa:hover{border-color:#25D366;}
.contact-method--wa .contact-method-value{color:var(--navy-900);}

@media (max-width: 420px){
  .contact-method-value{font-size:15px;}
  .contact-method{gap:12px; padding:14px;}
  .contact-method-icon{width:40px; height:40px;}
  .contact-method-arrow{display:none;}
}

.contact-card-foot{
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px dashed var(--line);
  font-size:13px;
  color:var(--ink-500);
  text-align:center;
}
.contact-card-foot em{color:var(--gold-500); font-style:italic;}

/* ---------- FOOTER ---------- */
.footer{
  background:var(--navy-900);
  color:var(--cream-200);
  padding:80px 0 0;
}
.footer-inner{
  display:grid;
  grid-template-columns:1.2fr 2fr;
  gap:50px;
  padding-bottom:50px;
}
.footer-brand{display:flex; gap:14px; align-items:flex-start;}
.footer-mark{
  width:46px; height:46px; flex-shrink:0;
  background:rgba(255,255,255,.06);
  border-radius:12px;
  display:grid; place-items:center;
}
.footer-mark .hvct-mark{width:32px; height:32px;}
.footer-name{
  font-family:'Fraunces', serif;
  font-size:22px; color:var(--cream-50);
  margin:0 0 6px;
}
.footer-tag{font-size:14px; color:var(--cream-200); margin:0; max-width:30ch;}
.footer-cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
}
.footer-h{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-300); font-weight:600;
  margin:0 0 14px;
}
.footer-cols a, .footer-cols span{
  display:block; color:var(--cream-200); font-size:14px;
  padding:5px 0;
  transition:color var(--t-fast);
}
.footer-cols a:hover{color:var(--gold-300);}
.footer-base{
  padding:22px var(--pad-x);
  max-width:var(--maxw); margin:0 auto;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:12px; color:rgba(236,225,199,.55); font-style:italic;
}
@media (max-width: 800px){
  .footer-inner{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:1fr 1fr;}
}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(7,20,46,.92);
  display:none;
  align-items:center; justify-content:center;
  padding:40px;
}
.lightbox.is-open{display:flex;}
.lightbox img{
  max-width:min(1100px, 92vw);
  max-height:88vh;
  border-radius:12px;
  box-shadow:var(--shadow-lg);
  animation:fadeUp .35s ease both;
}
.lb-close, .lb-prev, .lb-next{
  position:absolute;
  background:rgba(255,255,255,.08); color:var(--cream-50);
  border:1px solid rgba(255,255,255,.18);
  width:48px; height:48px; border-radius:50%;
  font-size:22px; cursor:pointer;
  display:grid; place-items:center;
  transition:background var(--t-fast);
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover{background:rgba(255,255,255,.18);}
.lb-close{top:24px; right:24px; font-size:28px; line-height:1; padding-bottom:4px;}
.lb-prev{left:24px; top:50%; transform:translateY(-50%);}
.lb-next{right:24px; top:50%; transform:translateY(-50%);}

/* ---------- Floating WhatsApp ---------- */
.fab-wa{
  position:fixed; bottom:24px; left:24px; z-index:80;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.55);
  transition:transform var(--t), box-shadow var(--t);
}
.fab-wa:hover{transform:scale(1.06) translateY(-2px);}
.fab-wa svg{width:28px; height:28px;}
@media (max-width: 600px){
  .fab-wa{bottom:18px; left:18px; width:50px; height:50px;}
}

/* ---------- Reveal animations baseline ----------
   Reveals only hide once JS confirms it's running (body.js-ready).
   If JS fails to load, everything stays fully visible — no stuck content. */
.reveal, .reveal-rise{transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal-rise{transition-duration:1.1s;}
body.js-ready .reveal{opacity:0; transform:translateY(18px);}
body.js-ready .reveal-rise{opacity:0; transform:translateY(40px);}
body.js-ready .reveal.is-visible,
body.js-ready .reveal-rise.is-visible{opacity:1; transform:none;}

.reveal-line > span{display:inline-block; transition:transform 1.0s cubic-bezier(.7,0,.2,1);}
body.js-ready .reveal-line > span{transform:translateY(110%);}
body.js-ready .reveal-line.is-visible > span{transform:none;}

/* Stagger child reveals when GSAP not used */
.ministry-card.is-visible{transition-delay:calc(var(--d, 0) * 80ms);}

/* ============================================================
   ===  21st.dev-INSPIRED POLISH — gallery, videos, give,   ===
   ===  map, social, drawer-donate                          ===
   ============================================================ */

/* ---------- Gallery: folder sections ---------- */
.gallery .lede{max-width:62ch; margin-bottom:48px;}
/* Editorial spread: each section gets its own breathing room */
.gallery-section{margin-top:clamp(120px, 14vw, 200px);}
.gallery-section:first-of-type{margin-top:64px;}
.gallery-section .gallery-section-head{margin-bottom:48px;}
.gallery-section-head{
  display:flex; flex-direction:column; gap:6px;
  margin-bottom:28px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.gallery-section-title{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(24px, 2.6vw, 34px);
  color:var(--navy-900);
  letter-spacing:-0.015em;
  margin:0;
}
.gallery-section-caption{
  font-size:15px;
  color:var(--ink-500);
  margin:0;
  max-width:60ch;
}

/* Gallery grid: bento with a feature on the first item */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
.gallery-grid--single{grid-template-columns:1fr; max-width:520px;}
.gallery-grid .g-item{
  position:relative; display:block;
  aspect-ratio:1/1;
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
  background:var(--cream-100);
}
.gallery-grid .g-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  filter:saturate(.95);
}
.gallery-grid .g-item::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(7,20,46,.35));
  opacity:0; transition:opacity .4s ease;
}
.gallery-grid .g-item:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.gallery-grid .g-item:hover img{transform:scale(1.06); filter:saturate(1.05);}
.gallery-grid .g-item:hover::after{opacity:1;}
.gallery-grid .g-feature{
  grid-column:span 2; grid-row:span 2;
  aspect-ratio:1/1;
}
@media (max-width: 900px){
  .gallery-grid{grid-template-columns:repeat(3, 1fr); gap:10px;}
  .gallery-grid .g-feature{grid-column:span 2; grid-row:span 2;}
}
@media (max-width: 600px){
  .gallery-grid{grid-template-columns:repeat(2, 1fr); gap:8px;}
  .gallery-grid .g-feature{grid-column:span 2; grid-row:auto; aspect-ratio:4/3;}
}

/* ---------- Videos section ---------- */
.videos .lede{max-width:62ch; margin-bottom:48px;}
.video-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
}
.video-card{
  margin:0;
  background:var(--navy-900);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .5s ease, box-shadow .5s ease;
}
.video-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.video-card video{
  display:block; width:100%; height:auto;
  max-height:560px;
  background:#000;
}
.video-card figcaption{
  padding:14px 18px 18px;
  font-size:13px; color:var(--cream-50);
  letter-spacing:.04em;
  background:var(--navy-900);
}
@media (max-width: 760px){
  .video-grid{grid-template-columns:1fr; gap:18px;}
}

/* ---------- Donate: give tracks ---------- */
.give-tracks{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
  margin:36px 0 24px;
  text-align:left;
}
@media (max-width: 900px){
  .give-tracks{grid-template-columns:minmax(0, 1fr);}
}
.give-track{
  position:relative;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  padding:24px;
  display:flex; flex-direction:column;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.give-track-head{
  display:flex; align-items:center; gap:14px;
  margin-bottom:18px;
}
.give-track-icon{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--gold-500); color:#fff;
  flex-shrink:0;
}
.give-track-icon svg{width:22px; height:22px;}
.give-track-label{
  font-family:'Fraunces', serif;
  font-size:20px; color:var(--cream-50);
  margin:0; letter-spacing:-0.01em;
}
.give-track-sub{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-300);
  margin:2px 0 0;
}
.give-track-note{
  font-size:13px; color:rgba(251,248,241,.65);
  margin:12px 0 18px;
  line-height:1.55;
}
.give-track-cta{
  display:inline-flex; align-items:center; gap:8px;
  align-self:flex-start;
  margin-top:auto;
  padding:12px 18px;
  border-radius:999px;
  background:var(--gold-500); color:#fff;
  font-size:14px; font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
  box-shadow:0 6px 18px rgba(200,149,75,.30);
}
.give-track-cta:hover{background:#b07f3a; transform:translateY(-1px); box-shadow:0 10px 22px rgba(200,149,75,.45);}
.give-track-cta svg{width:16px; height:16px; stroke:#fff; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;}

/* Copy fields */
.bank-grid{
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:18px;
}
.copy-field{
  display:grid;
  grid-template-columns:120px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  transition:border-color .3s ease, background .3s ease;
}
.copy-field:hover{border-color:rgba(214,168,104,.45); background:rgba(0,0,0,.28);}
.copy-field-label{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-300); font-weight:600;
}
.copy-field-value{
  font-family:'Inter', system-ui, sans-serif;
  font-size:14px; color:var(--cream-50);
  word-break:break-word;
  overflow-wrap:anywhere;
  min-width:0;
}
.copy-field-value.monospaced{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.02em;}
.copy-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  color:var(--cream-50);
  font-size:12px; font-weight:600;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
  flex-shrink:0;
}
.copy-btn:hover{background:var(--gold-500); border-color:var(--gold-500); color:#fff; transform:translateY(-1px);}
.copy-btn svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.copy-btn.is-copied{background:#1a8054; border-color:#1a8054; color:#fff;}
.copy-btn.is-copied svg{stroke:#fff;}
@media (max-width: 560px){
  .copy-field{grid-template-columns:1fr; gap:8px; padding:12px;}
  .copy-field .copy-btn{justify-self:start;}
}

/* ---------- Map section ---------- */
.map .lede{max-width:62ch; margin-bottom:36px;}
.map-card{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  height:clamp(360px, 50vw, 540px);
  background:var(--cream-100);
}
.map-card iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
.map-directions{
  position:absolute;
  bottom:24px; left:24px;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px;
  background:#fff;
  color:var(--navy-900);
  border-radius:999px;
  font-size:15px; font-weight:600;
  text-decoration:none;
  box-shadow:0 12px 24px rgba(0,0,0,.18), 0 4px 8px rgba(0,0,0,.08);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.map-directions:hover{transform:translateY(-2px); background:var(--gold-500); color:#fff; box-shadow:0 16px 32px rgba(200,149,75,.40);}
.map-directions:hover .map-directions-icon{background:#fff; color:var(--gold-500);}
.map-directions:hover .map-arrow{transform:translateX(4px);}
.map-directions-icon{
  display:grid; place-items:center;
  width:28px; height:28px;
  border-radius:50%;
  background:var(--gold-500); color:#fff;
  transition:background .3s ease, color .3s ease;
}
.map-directions-icon svg{width:16px; height:16px;}
.map-arrow{width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s ease;}
@media (max-width: 560px){
  .map-directions{
    bottom:14px; left:14px; right:14px;
    justify-content:center;
    padding:14px 18px;
  }
}

/* ---------- Footer social ---------- */
.footer-social{
  grid-column:1 / -1;
  padding-top:24px;
  margin-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-social .footer-h{margin-bottom:14px;}
.social-row{display:flex; gap:12px;}
.social-link{
  display:grid; place-items:center;
  width:42px; height:42px;
  border-radius:50%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:var(--cream-50);
  transition:transform .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
}
.social-link:hover{
  background:var(--gold-500); border-color:var(--gold-500); color:#fff;
  transform:translateY(-2px) scale(1.05);
}
.social-link svg{width:20px; height:20px;}

/* ---------- Drawer Donate button (in mobile drawer) ---------- */
/* Premium gold pill - full width, centered, big enough for thumbs */
.drawer-donate{
  display:flex !important;
  align-items:center;
  justify-content:center;
  margin:32px auto 8px !important;
  padding:20px 36px !important;
  background:linear-gradient(135deg, #e8c084 0%, #d6a868 40%, #c8954b 100%) !important;
  color:#fff !important;
  font-family:'Inter', sans-serif !important;
  font-size:19px !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
  border-radius:999px !important;
  border:0 !important;
  border-bottom:0 !important;
  box-shadow:
    0 14px 36px rgba(200,149,75,.45),
    0 6px 14px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.20) inset,
    0 -1px 0 rgba(0,0,0,.10) inset !important;
  text-align:center;
  text-decoration:none !important;
  width:100% !important;
  max-width:320px !important;
  min-height:60px !important;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.drawer-donate:active{
  transform:scale(.97);
  box-shadow:
    0 8px 20px rgba(200,149,75,.40),
    0 3px 8px rgba(0,0,0,.18) !important;
}

/* ---------- Hero CTA on mobile: stack neatly ---------- */
@media (max-width: 480px){
  .hero-cta{gap:12px;}
  .hero-cta > a{width:100%; justify-content:center;}
}

/* ============================================================
   ===  WOW POLISH (21st.dev-inspired patterns, vanilla)    ===
   ============================================================ */

/* ---------- 1. SHINY GOLD TEXT (Shiny Text pattern) ---------- */
/* Moving gradient mask creates a metallic shimmer running across the gold italic */
.hero-title em.shine{
  font-style:italic;
  background:linear-gradient(
    100deg,
    #b08534 0%,
    #c9a356 20%,
    #f5e1a8 40%,
    #ffffff 50%,
    #f5e1a8 60%,
    #c9a356 80%,
    #b08534 100%
  );
  background-size:300% 100%;
  background-position:0% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:shine-sweep 5.5s linear infinite;
  text-shadow:0 0 30px rgba(214,168,104,.35);
}
@keyframes shine-sweep{
  0%   { background-position:120% 50%; }
  100% { background-position:-20% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .hero-title em.shine{ animation:none; background-position:50% 50%; }
}

/* ---------- 2. MAGNETIC DONATE BUTTON ---------- */
/* JS sets --mx/--my on .btn-donate-hero on mousemove */
/* While magnetic is active, freeze the breathe animation and let JS transform take over */
.btn-donate-hero.is-magnetic{
  animation-play-state:paused;
  transform:translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition:transform .12s linear, box-shadow .35s ease, background .35s ease;
}
.btn-donate-hero.is-magnetic .btn-donate-arrow{transform:translateX(4px);}
@media (prefers-reduced-motion: reduce){
  .btn-donate-hero.is-magnetic{transform:none !important; --mx:0; --my:0;}
}

/* ---------- 3. SPOTLIGHT CARDS (Spotlight Card pattern) ---------- */
/* Radial gradient overlay follows the mouse using --mx/--my */
.ministry-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  --mx:50%; --my:50%;
}
.ministry-card::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(380px circle at var(--mx) var(--my), rgba(214,168,104,.22), transparent 50%);
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
  z-index:0;
}
.ministry-card:hover::before{ opacity:1; }
.ministry-card > *{ position:relative; z-index:1; }

/* Spotlight on give-tracks too */
.give-track{
  --mx:50%; --my:50%;
}
.give-track::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(214,168,104,.14), transparent 55%);
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
  z-index:0;
}
.give-track:hover::before{ opacity:1; }
.give-track > *{ position:relative; z-index:1; }

/* ---------- 4. SCROLL PROGRESS BAR ---------- */
/* Thin gold bar at very top - scales horizontally with scroll progress */
.scroll-progress{
  position:fixed; top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, #b07f3a 0%, #d6a868 40%, #f5e1a8 60%, #d6a868 80%, #b07f3a 100%);
  transform-origin:0 50%;
  transform:scaleX(0);
  z-index:200;
  pointer-events:none;
  box-shadow:0 0 12px rgba(214,168,104,.55);
  transition:transform .08s linear;
}

/* ---------- 5. SCRIPTURE MARQUEE (Infinite Marquee pattern) ---------- */
.marquee{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, var(--cream-50) 0%, var(--cream-100) 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 0;
  z-index:1;
}
.marquee::before, .marquee::after{
  content:'';
  position:absolute; top:0; bottom:0;
  width:80px;
  z-index:2;
  pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg, var(--cream-50), transparent); }
.marquee::after{ right:0; background:linear-gradient(-90deg, var(--cream-50), transparent); }
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee-slide 50s linear infinite;
}
.marquee-group{
  display:flex; align-items:center;
  gap:32px;
  padding:0 16px;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:18px;
  color:var(--navy-700);
  white-space:nowrap;
}
.marquee-group .dot{
  color:var(--gold-500);
  font-weight:700;
  font-style:normal;
  font-family:'Inter', sans-serif;
}
@keyframes marquee-slide{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
  .marquee-group{ flex-wrap:wrap; }
}
.marquee:hover .marquee-track{ animation-play-state:paused; }

/* ============================================================
   ===  $22K GALLERY POLISH                                  ===
   ===  Masonry + editorial captions + sticky title +        ===
   ===  gold ornament dividers + gold-tinted hover shadow +  ===
   ===  lazy fade-in + upgraded lightbox                     ===
   ============================================================ */

/* ----- Section head: refined typography, sticky on scroll ----- */
.gallery-section{
  position:relative;
  margin-top:0 !important;
  padding-top:8px;
}
.gallery-section:first-of-type{margin-top:0;}
.gallery-section-head{
  position:sticky;
  top:74px;
  z-index:5;
  background:linear-gradient(180deg, var(--cream-50) 78%, rgba(251,248,241,0));
  padding:18px 0 28px;
  margin-bottom:24px;
  border-bottom:0 !important;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr);
  gap:32px;
  align-items:end;
}
.gallery-section-head > div{display:flex; flex-direction:column; gap:6px; min-width:0;}
.gallery-section-eyebrow{
  font-family:'Inter', sans-serif;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-500); font-weight:600;
  margin:0;
}
.gallery-section-title{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(28px, 3.2vw, 42px);
  color:var(--navy-900);
  letter-spacing:-0.02em;
  line-height:1.05;
  margin:0;
}
.gallery-section-caption{
  font-size:15px;
  color:var(--ink-500);
  margin:0;
  max-width:50ch;
  line-height:1.55;
  font-family:'Fraunces', serif;
  font-style:italic;
}
@media (max-width: 760px){
  .gallery-section-head{
    grid-template-columns:1fr;
    gap:12px;
    top:64px;
  }
}

/* ----- Gold ornament divider between sections ----- */
.gallery-divider{
  display:flex; align-items:center; justify-content:center;
  gap:18px;
  margin:80px auto;
  max-width:340px;
  opacity:.85;
}
.gallery-divider::before, .gallery-divider::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(201,168,76,.55) 50%, transparent 100%);
}
.gallery-divider svg{flex-shrink:0; opacity:.9;}
@media (max-width: 600px){
  .gallery-divider{margin:48px auto; max-width:260px;}
}

/* ----- Editorial photo-essay grid -----
   3 calm columns, 40-60px gutters, natural photo aspect ratios.
   National Geographic feel - generous, spaced out, not packed. */
.gallery-grid{
  display:grid !important;
  position:relative;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:48px;
  row-gap:60px;
  align-items:start;
  margin-top:64px;
  min-height:0;
  /* clear column-count from old masonry */
  column-count:initial !important;
}
.gallery-grid--single{
  display:block !important;
  max-width:760px;
  margin:0 auto;
}
@media (max-width: 1100px){
  .gallery-grid{column-gap:36px; row-gap:48px;}
}
@media (max-width: 760px){
  .gallery-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:20px; row-gap:32px; margin-top:40px;}
}

.gallery-grid .g-item{
  position:relative;
  display:block;
  width:100%;
  margin:0 !important;
  border-radius:8px;
  overflow:hidden;
  background:var(--cream-100);
  box-shadow:0 8px 24px -16px rgba(7,20,46,.22);
  transition:transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s cubic-bezier(.2,.7,.2,1), filter .55s ease;
  aspect-ratio:auto !important;
  isolation:isolate;
  cursor:zoom-in;
  grid-row-end:auto !important;
  grid-column:auto !important;
  /* override absolute positioning from old masonry */
  top:auto !important; left:auto !important;
  height:auto !important;
}
.gallery-grid--single .g-item{width:100%;}
.gallery-grid .g-item img{
  display:block;
  position:static !important;
  inset:auto !important;
  width:100% !important;
  height:auto !important;
  object-fit:initial !important;
  aspect-ratio:auto !important;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s ease, opacity .9s ease;
  filter:saturate(.95) contrast(1.03);
  will-change:transform;
}
.gallery-grid .g-item img.is-loading{opacity:0;}
.gallery-grid .g-item img.is-loaded{opacity:1;}

/* The dark editorial overlay on hover */
.gallery-grid .g-item::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(7,20,46,.78) 100%);
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
  z-index:1;
}

/* Photo number badge in upper-left, gold serif */
.g-num{
  position:absolute;
  top:14px; left:14px;
  z-index:2;
  font-family:'Fraunces', serif;
  font-size:12px;
  letter-spacing:.16em;
  color:#fff;
  background:rgba(7,20,46,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}

/* Caption inferred via attr() */
.gallery-grid .g-item::before{
  content:attr(data-caption);
  position:absolute;
  left:18px; right:18px; bottom:16px;
  z-index:2;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:15px;
  line-height:1.35;
  color:#fff;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* Hover state: lift, color comes alive, overlay/caption appear */
.gallery-grid .g-item:hover{
  transform:translateY(-6px);
  box-shadow:
    0 20px 38px -14px rgba(201,168,76,.40),
    0 12px 24px -12px rgba(7,20,46,.30);
}
.gallery-grid .g-item:hover img{
  transform:scale(1.04);
  filter:saturate(1.08) contrast(1.02);
}
.gallery-grid .g-item:hover::after{opacity:1;}
.gallery-grid .g-item:hover::before{opacity:1; transform:translateY(0);}
.gallery-grid .g-item:hover .g-num{opacity:1; transform:translateY(0);}

/* Focus-visible for keyboard users */
.gallery-grid .g-item:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
}

/* Override the older universal g-item rule from earlier in the file */
.gallery-grid .g-feature{
  grid-column:auto !important;
  grid-row:auto !important;
}

/* Single-column blind-family layout */
.gallery-grid--single .g-item{
  aspect-ratio:auto !important;
  max-height:680px;
}
.gallery-grid--single .g-item img{max-height:680px; object-fit:cover !important;}

/* ----- Upgraded lightbox ----- */
.lightbox{
  position:fixed; inset:0;
  z-index:1000;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(7,20,46,.94);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}
.lightbox.is-open{
  display:flex;
  animation:lb-bg-in .3s ease-out;
}
@keyframes lb-bg-in{
  from{opacity:0;}
  to{opacity:1;}
}
.lb-stage{
  position:relative;
  width:92vw; max-width:1300px;
  height:78vh;
  display:flex; align-items:center; justify-content:center;
  z-index:1;
}
#lbImg{
  display:block;
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  opacity:0;
  transform:scale(.985);
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
#lbImg.is-loaded{opacity:1; transform:scale(1);}

.lb-top{
  position:absolute;
  top:24px; left:24px; right:90px;
  display:flex; align-items:center; gap:12px;
  z-index:2;
  color:#fff;
}
.lb-section{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:15px;
  letter-spacing:.01em;
}
.lb-count{
  font-family:'Inter', sans-serif;
  font-size:12px;
  letter-spacing:.22em;
  color:rgba(255,255,255,.55);
  margin-left:auto;
  padding-left:14px;
  border-left:1px solid rgba(255,255,255,.18);
}
.lb-bottom{
  position:absolute;
  left:24px; right:24px; bottom:24px;
  text-align:center;
  z-index:2;
  pointer-events:none;
}
.lb-caption{
  margin:0;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:17px;
  color:rgba(255,255,255,.86);
  line-height:1.5;
  max-width:760px;
  margin:0 auto;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* Lightbox buttons */
.lb-close, .lb-prev, .lb-next{
  position:absolute;
  display:grid; place-items:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  cursor:pointer;
  z-index:3;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:50%;
}
.lb-close{
  top:22px; right:22px;
  width:44px; height:44px;
  font-size:0;
}
.lb-prev, .lb-next{
  top:50%; transform:translateY(-50%);
  width:54px; height:54px;
}
.lb-prev{left:22px;}
.lb-next{right:22px;}
.lb-close:hover, .lb-prev:hover, .lb-next:hover{
  background:var(--gold-500);
  border-color:var(--gold-500);
}
.lb-prev:hover{transform:translateY(-50%) translateX(-3px);}
.lb-next:hover{transform:translateY(-50%) translateX(3px);}

@media (max-width: 760px){
  .lb-stage{width:96vw; height:70vh;}
  .lb-top{top:16px; left:16px; right:70px; font-size:13px;}
  .lb-count{font-size:11px;}
  .lb-bottom{left:16px; right:16px; bottom:16px;}
  .lb-caption{font-size:14px;}
  .lb-close{top:14px; right:14px; width:40px; height:40px;}
  .lb-prev, .lb-next{width:42px; height:42px;}
  .lb-prev{left:10px;} .lb-next{right:10px;}
}

@media (prefers-reduced-motion: reduce){
  .gallery-grid .g-item img{transition:none;}
  #lbImg{transition:opacity .2s ease; transform:none !important;}
}

/* ============================================================
   ===  TIER 1-3 NEXT LEVEL                                  ===
   ============================================================ */

/* ---------- Custom selection color (brand gold) ---------- */
::selection{background:rgba(214,168,104,.45); color:var(--navy-900);}
::-moz-selection{background:rgba(214,168,104,.45); color:var(--navy-900);}

/* ---------- Back-to-top floating button ---------- */
.fab-top{
  position:fixed;
  right:24px; bottom:24px;
  width:52px; height:52px;
  border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color:#fff;
  border:0;
  cursor:pointer;
  box-shadow:0 12px 28px -8px rgba(200,149,75,.6), 0 4px 10px rgba(7,20,46,.18);
  opacity:0;
  transform:translateY(20px) scale(.85);
  pointer-events:none;
  transition:opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  z-index:80;
}
.fab-top.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.fab-top:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 16px 36px -8px rgba(200,149,75,.75), 0 6px 14px rgba(7,20,46,.22);
}
.fab-top svg{width:22px; height:22px;}
@media (max-width: 600px){
  .fab-top{right:16px; bottom:90px; width:46px; height:46px;}
  .fab-top svg{width:20px; height:20px;}
}
@media (prefers-reduced-motion: reduce){
  .fab-top{transition:opacity .2s ease;}
  .fab-top.is-visible{transform:none;}
}

/* ---------- Scroll-spy active nav state ---------- */
.nav-links a{
  position:relative;
  transition:color var(--t-fast);
}
.nav-links a.is-current{
  color:var(--gold-500);
}
.nav-links a.is-current::after{
  content:'';
  position:absolute;
  left:12px; right:12px; bottom:4px;
  height:1.5px;
  background:linear-gradient(90deg, transparent, var(--gold-500), transparent);
  animation:nav-underline-in .4s cubic-bezier(.2,.7,.2,1);
}
@keyframes nav-underline-in{
  from{transform:scaleX(.2); opacity:0;}
  to{transform:scaleX(1); opacity:1;}
}

/* ---------- Language toggle ---------- */
.lang-toggle{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(7,20,46,.04);
  border:1px solid var(--line);
  padding:7px 12px;
  border-radius:999px;
  font-family:'Inter', sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--ink-500);
  cursor:pointer;
  margin-left:10px;
  transition:border-color var(--t-fast), background var(--t-fast);
}
.lang-toggle:hover{
  border-color:var(--gold-400);
  background:rgba(214,168,104,.08);
}
.lang-toggle [data-lang]{
  transition:color var(--t-fast);
}
.lang-toggle [data-lang].is-active{
  color:var(--gold-500);
}
.lang-toggle .lang-sep{
  color:var(--ink-300);
  font-weight:400;
}
.nav.is-scrolled .lang-toggle{
  background:rgba(7,20,46,.04);
}
@media (max-width: 1024px){
  .lang-toggle{
    margin-left:auto;
    margin-right:8px;
  }
}
@media (max-width: 380px){
  .lang-toggle{padding:6px 10px; font-size:11px;}
}

/* Tamil typography tweaks (more breathing room) */
body.lang-ta .nav-links a,
body.lang-ta .drawer a{
  letter-spacing:.01em;
}

/* ---------- Meet Pastor John section ---------- */
.section.pastor{padding:clamp(80px, 10vw, 140px) 0;}
.pastor-portrait{
  position:relative;
  margin:0;
  border-radius:18px;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 30px 60px -20px rgba(7,20,46,.4), 0 18px 36px -18px rgba(7,20,46,.25);
  aspect-ratio:4/5;
}
.pastor-portrait img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 25%;
  display:block;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.pastor-portrait:hover img{transform:scale(1.03);}
.pastor-portrait-frame{
  position:absolute; inset:0;
  border:1px solid rgba(214,168,104,.35);
  border-radius:inherit;
  pointer-events:none;
  z-index:1;
}
.pastor-portrait::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(7,20,46,.7) 100%);
  z-index:0;
  pointer-events:none;
}
.pastor-portrait figcaption{
  position:absolute;
  left:24px; right:24px; bottom:22px;
  z-index:2;
  display:flex; flex-direction:column;
  color:#fff;
}
.pastor-portrait-name{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:22px;
  letter-spacing:-0.01em;
  line-height:1.15;
}
.pastor-portrait-role{
  font-family:'Inter', sans-serif;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-300);
  margin-top:6px;
}
@media (max-width: 900px){
  .pastor-portrait{aspect-ratio:1/1;}
  .section.pastor .col-media{order:1;}
  .section.pastor .col-text{order:2;}
}

/* ---------- Buttery cinematic reveals (Apple-style easing + blur-in) ---------- */
/* Long 1.1s ease-out-quart with subtle blur-in feels like a film fade,
   not a snap. The blur dissolves as the element settles into place.
   NOTE: filter:blur disabled on mobile - many blurred elements on iOS Safari
   blow past the GPU memory budget and tab-crash the page. Opacity + transform
   alone still feel premium. */
body.js-ready .reveal,
body.js-ready .reveal-rise{
  transition:
    opacity 1.1s cubic-bezier(.16,.84,.30,1),
    transform 1.1s cubic-bezier(.16,.84,.30,1),
    filter 1.1s cubic-bezier(.16,.84,.30,1);
  filter:blur(6px);
}
body.js-ready .reveal.is-visible,
body.js-ready .reveal-rise.is-visible{
  filter:blur(0);
}
body.js-ready .reveal-rise{transform:translateY(36px);}
body.js-ready .reveal-rise.is-visible{transform:translateY(0);}

/* Mobile: drop the blur filter to prevent iOS WebKit GPU-memory crashes */
@media (max-width: 760px){
  body.js-ready .reveal,
  body.js-ready .reveal-rise,
  body.js-ready .auto-reveal{
    filter:none !important;
    transition:
      opacity 0.85s cubic-bezier(.16,.84,.30,1),
      transform 0.85s cubic-bezier(.16,.84,.30,1) !important;
  }
}

/* Stagger reveals inside same section by index for natural cascade */
.section .reveal:nth-child(1),
.section .reveal-rise:nth-child(1){transition-delay:0ms;}
.section .reveal:nth-child(2),
.section .reveal-rise:nth-child(2){transition-delay:80ms;}
.section .reveal:nth-child(3),
.section .reveal-rise:nth-child(3){transition-delay:160ms;}
.section .reveal:nth-child(4),
.section .reveal-rise:nth-child(4){transition-delay:240ms;}
.section .reveal:nth-child(5),
.section .reveal-rise:nth-child(5){transition-delay:320ms;}
.section .reveal:nth-child(6),
.section .reveal-rise:nth-child(6){transition-delay:400ms;}

/* Auto-reveals applied by JS - same buttery treatment.
   Blur disabled on mobile via the @media block above. */
body.js-ready .auto-reveal{
  opacity:0;
  transform:translateY(28px);
  filter:blur(5px);
  transition:
    opacity 1.0s cubic-bezier(.16,.84,.30,1),
    transform 1.0s cubic-bezier(.16,.84,.30,1),
    filter 1.0s cubic-bezier(.16,.84,.30,1);
}
body.js-ready .auto-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* Mobile: also lighten the Ken-Burns slow zoom and slideshow scale */
@media (max-width: 760px){
  .hero-slide,
  .hero-slide.is-active,
  .parallax-frame .parallax-inner img,
  .pastor-portrait.parallax-frame .parallax-inner img{
    animation:none !important;
    transform:none !important;
  }
  .parallax-frame .parallax-inner{
    /* JS scroll parallax also disabled on mobile via reduceMotion proxy */
    transform:none !important;
    inset:0 !important;
    top:0 !important;
    bottom:0 !important;
  }
}

/* Smoother snap-free scroll behavior */
html{
  scroll-behavior:smooth;
  /* Anchor links land below the fixed nav */
  scroll-padding-top:90px;
}
@media (max-width: 760px){
  html{scroll-padding-top:70px;}
}

/* Reduced motion: instant, no blur, no transform */
@media (prefers-reduced-motion: reduce){
  body.js-ready .reveal,
  body.js-ready .reveal-rise,
  body.js-ready .auto-reveal{
    transition:none !important;
    filter:none !important;
    transform:none !important;
    opacity:1 !important;
  }
  html{scroll-behavior:auto;}
}

/* ---------- FAQ tweaks ---------- */
.section.faq .belief-num{font-style:normal; letter-spacing:.04em;}

/* ---------- Single focal image per section (no overlap) ---------- */
.solo-frame{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  box-shadow:
    0 30px 60px -20px rgba(7,20,46,.30),
    0 18px 36px -18px rgba(7,20,46,.18);
  position:relative;
  isolation:isolate;
  aspect-ratio:4/5;
  background:var(--cream-100);
}
.solo-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.solo-frame:hover img{transform:scale(1.02);}
.solo-frame figcaption{
  position:absolute;
  left:24px; right:24px; bottom:22px;
  z-index:2;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:15px;
  line-height:1.4;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.55);
  max-width:36ch;
}
.solo-frame::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(7,20,46,.55) 100%);
  pointer-events:none;
  z-index:1;
}
@media (max-width: 900px){
  .solo-frame{aspect-ratio:4/3;}
}

/* ============================================================
   ===  EDITORIAL CINEMATIC POLISH                           ===
   ===  Bigger photos + Ken Burns + scroll parallax +        ===
   ===  typographic breathing moments                        ===
   ============================================================ */

/* ----- Make key photos magazine-sized (60-70vh) ----- */
.about .col-media .solo-frame,
.section.visit .col-media .solo-frame{
  aspect-ratio:auto;
  min-height:clamp(440px, 62vh, 700px);
  height:clamp(440px, 62vh, 700px);
}
.section.pastor .col-media .pastor-portrait{
  aspect-ratio:auto;
  min-height:clamp(460px, 66vh, 760px);
  height:clamp(460px, 66vh, 760px);
}
.section.sponsor.split .split-media{
  min-height:clamp(440px, 70vh, 780px);
}
@media (max-width: 900px){
  .about .col-media .solo-frame,
  .section.visit .col-media .solo-frame,
  .section.pastor .col-media .pastor-portrait{
    height:clamp(360px, 56vh, 560px);
    min-height:clamp(360px, 56vh, 560px);
  }
  .section.sponsor.split .split-media{min-height:clamp(360px, 56vh, 560px);}
}

/* ----- Parallax frame: inner wrapper translates, img scales (Ken Burns) ----- */
.parallax-frame{
  position:relative;
  overflow:hidden;
}
.parallax-frame .parallax-inner{
  position:absolute;
  top:-10%; left:0; right:0; bottom:-10%;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.parallax-frame .parallax-inner img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  animation:ken-zoom 22s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes ken-zoom{
  from{ transform:scale(1); }
  to  { transform:scale(1.055); }
}
.section.pastor .pastor-portrait.parallax-frame .parallax-inner img{
  animation-duration:24s;
  object-position:center 22%;
}
@media (prefers-reduced-motion: reduce){
  .parallax-frame .parallax-inner{transform:none !important;}
  .parallax-frame .parallax-inner img{animation:none; transform:none;}
}

/* The pastor portrait gradient & frame need to sit ABOVE the parallax */
.pastor-portrait.parallax-frame .pastor-portrait-frame,
.pastor-portrait.parallax-frame::before,
.pastor-portrait.parallax-frame figcaption{z-index:3;}
.solo-frame.parallax-frame figcaption,
.solo-frame.parallax-frame::after{z-index:3;}

/* The captions on solo-frame already use position absolute with z-index :2.
   Bump the gradient and caption above the parallax inner. */

/* ----- Editorial breathing moment: pull-quote ----- */
.editorial-quote{
  padding:clamp(80px, 14vw, 180px) 0;
  background:var(--cream-50);
  text-align:center;
  position:relative;
}
.editorial-quote .editorial-quote-mark{
  font-family:'Fraunces', serif;
  font-size:clamp(80px, 14vw, 180px);
  line-height:.6;
  color:var(--gold-400);
  margin:0 0 .15em;
  opacity:.85;
  letter-spacing:-.04em;
}
.editorial-quote blockquote{
  font-family:'Fraunces', serif;
  font-weight:300;
  font-style:italic;
  font-size:clamp(30px, 5vw, 72px);
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--navy-900);
  margin:0 auto;
  max-width:18ch;
}
.editorial-quote cite{
  display:block;
  font-family:'Inter', sans-serif;
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-500);
  margin-top:36px;
  font-style:normal;
}

/* ----- Editorial breathing moment: giant word ----- */
.editorial-word{
  padding:clamp(80px, 12vw, 160px) 0;
  background:var(--navy-900);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.editorial-word::before, .editorial-word::after{
  content:'';
  position:absolute;
  left:50%; transform:translateX(-50%);
  width:80px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-500), transparent);
}
.editorial-word::before{top:clamp(40px, 6vw, 80px);}
.editorial-word::after{bottom:clamp(40px, 6vw, 80px);}
.editorial-word-eyebrow{
  font-family:'Inter', sans-serif;
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-400);
  margin:0 0 28px;
  font-weight:600;
}
.editorial-word-text{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:clamp(64px, 14vw, 200px);
  line-height:.95;
  letter-spacing:.06em;
  color:var(--cream-50);
  margin:0;
  display:flex;
  justify-content:center;
  gap:clamp(2px, .4vw, 8px);
}
.editorial-word-text span{
  display:inline-block;
  background:linear-gradient(180deg, var(--cream-50) 0%, var(--cream-50) 55%, var(--gold-300) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  transform:translateY(20px);
  opacity:0;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1), opacity 1.1s cubic-bezier(.2,.7,.2,1);
}
.editorial-word.is-visible .editorial-word-text span{
  transform:translateY(0);
  opacity:1;
}
.editorial-word.is-visible .editorial-word-text span:nth-child(1){transition-delay:0ms;}
.editorial-word.is-visible .editorial-word-text span:nth-child(2){transition-delay:60ms;}
.editorial-word.is-visible .editorial-word-text span:nth-child(3){transition-delay:120ms;}
.editorial-word.is-visible .editorial-word-text span:nth-child(4){transition-delay:180ms;}
.editorial-word.is-visible .editorial-word-text span:nth-child(5){transition-delay:240ms;}
.editorial-word.is-visible .editorial-word-text span:nth-child(6){transition-delay:300ms;}
.editorial-word.is-visible .editorial-word-text span:nth-child(7){transition-delay:360ms;}
.editorial-word-foot{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:clamp(13px, 1.4vw, 17px);
  color:rgba(251,248,241,.65);
  margin:28px 0 0;
}
@media (prefers-reduced-motion: reduce){
  .editorial-word-text span{transform:none; opacity:1;}
}

/* ============================================================
   ===  CINEMATIC SITE BACKGROUND (static, lightweight)      ===
   ============================================================ */

/* Warm cream base + radial vignette + heavenly gold light from above */
body{
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(214,168,104,.10) 0%, transparent 55%),
    radial-gradient(100% 100% at 50% 100%, rgba(7,20,46,.05) 0%, transparent 60%),
    linear-gradient(180deg, #fbf7ec 0%, #faf6e9 40%, #f7f1dd 100%);
  background-attachment:fixed;
}

/* Subtle paper grain texture (one tiny SVG, fixed) */
body::before{
  content:'';
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.10  0 0 0 0 0.18  0 0 0 0.35 0'/></filter><rect width='240' height='240' filter='url(%23n)' /></svg>");
  background-size:240px 240px;
  opacity:.5;
  mix-blend-mode:multiply;
}
/* All sections sit above the background layers */
.section, .editorial-quote, .editorial-word, footer{position:relative; z-index:1;}

/* Per-section faint gold accent halo - reverent, restrained */
.section:not(.hero):not(.donate):not(.mission):not(.beliefs)::after{
  content:'';
  position:absolute;
  top:-1px; left:50%; transform:translateX(-50%);
  width:120px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,168,76,.45), transparent);
  pointer-events:none;
}

/* ============================================================
   ===  GALLERY POLISH                                       ===
   ===  Remove number badges, richer image treatment         ===
   ============================================================ */

/* Hide any legacy number badges */
.g-num{display:none !important;}

/* Richer photo treatment - more saturated, deeper shadow on hover */
.gallery-grid .g-item img{
  filter:saturate(.94) contrast(1.04) brightness(1.02);
}
.gallery-grid .g-item:hover img{
  filter:saturate(1.10) contrast(1.05) brightness(1.03);
}
.gallery-grid .g-item{
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 6px 22px -10px rgba(7,20,46,.18);
}
.gallery-grid .g-item:hover{
  box-shadow:
    0 0 0 1px rgba(201,168,76,.55) inset,
    0 24px 44px -14px rgba(201,168,76,.30),
    0 12px 28px -12px rgba(7,20,46,.30);
}
/* Caption overlay: softer Fraunces italic, slightly larger */
.gallery-grid .g-item::before{
  font-size:16px;
}
.gallery-grid .g-item::after{
  background:linear-gradient(180deg, transparent 38%, rgba(7,20,46,.82) 100%);
}

/* ============================================================
   ===  BLIND FAMILY VISIT: full-width editorial feature     ===
   ============================================================ */
.gallery-section--feature{
  margin-top:48px;
}
.g-feature{
  display:block;
  position:relative;
  text-decoration:none;
  color:inherit;
  cursor:zoom-in;
}
.g-feature figure{
  position:relative;
  margin:0;
  border-radius:20px;
  overflow:hidden;
  box-shadow:
    0 40px 80px -30px rgba(7,20,46,.50),
    0 24px 48px -20px rgba(201,168,76,.20);
  isolation:isolate;
  aspect-ratio:16/10;
  background:var(--cream-100);
  transition:box-shadow .6s ease, transform .6s ease;
}
@media (max-width: 760px){.g-feature figure{aspect-ratio:4/5;}}
.g-feature:hover figure{
  transform:translateY(-4px);
  box-shadow:
    0 50px 90px -30px rgba(7,20,46,.60),
    0 30px 56px -20px rgba(201,168,76,.30);
}
.g-feature .parallax-frame{position:relative; inset:auto;}
.g-feature img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.96) contrast(1.04);
}
.g-feature figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  padding:clamp(28px, 4vw, 56px);
  background:linear-gradient(180deg, transparent 0%, rgba(7,20,46,.85) 100%);
  display:flex; flex-direction:column; gap:10px;
  color:#fff;
}
.g-feature-eyebrow{
  font-family:'Inter', sans-serif;
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-300);
  font-weight:600;
}
.g-feature-quote{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(20px, 2.6vw, 32px);
  line-height:1.3;
  letter-spacing:-.01em;
  max-width:50ch;
  color:#fff;
}

/* ============================================================
   ===  CINEMATIC VIDEO PLAYER                               ===
   ===  Custom poster + gold play button; click-to-load      ===
   ============================================================ */
.video-card{
  margin:0;
  background:transparent;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.video-card:hover{
  transform:translateY(-4px);
  box-shadow:none;
}
.video-stage{
  position:relative;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  background:#000;
  box-shadow:
    0 30px 60px -20px rgba(7,20,46,.45),
    0 16px 32px -16px rgba(201,168,76,.15);
  cursor:pointer;
  isolation:isolate;
  transition:box-shadow .5s ease;
}
.video-stage:hover, .video-stage:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 1px rgba(201,168,76,.55) inset,
    0 36px 70px -20px rgba(7,20,46,.55),
    0 24px 44px -16px rgba(201,168,76,.30);
}
.video-poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  filter:saturate(.92) contrast(1.05) brightness(.85);
}
.video-stage:hover .video-poster{
  transform:scale(1.04);
  filter:saturate(1.05) contrast(1.05) brightness(.90);
}

/* Dark gradient tint for elegance */
.video-tint{
  position:absolute; inset:0;
  z-index:1;
  background:
    radial-gradient(50% 60% at 50% 50%, rgba(7,20,46,0) 0%, rgba(7,20,46,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 25%, transparent 65%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}

/* Letterbox top hairline */
.video-rule{
  position:absolute;
  top:18px; left:50%; transform:translateX(-50%);
  width:60px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,168,76,.8), transparent);
  z-index:2;
  pointer-events:none;
}

.video-play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:78px; height:78px;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:3;
  color:var(--gold-400);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), color .3s ease, filter .4s ease;
  filter:drop-shadow(0 8px 20px rgba(201,168,76,.45));
}
.video-play svg{width:100%; height:100%;}
.video-stage:hover .video-play{
  transform:translate(-50%,-50%) scale(1.08);
  color:var(--gold-300);
  filter:drop-shadow(0 12px 28px rgba(201,168,76,.65));
}
.video-stage:focus-visible .video-play{
  transform:translate(-50%,-50%) scale(1.06);
}

/* Subtle "play" pulse - reverent, slow */
.video-play::after{
  content:'';
  position:absolute;
  inset:-12px;
  border-radius:50%;
  border:1px solid rgba(201,168,76,.35);
  animation:video-pulse 3.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes video-pulse{
  0%, 100%{ transform:scale(.94); opacity:.5; }
  50%     { transform:scale(1.10); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .video-play::after{animation:none; opacity:.4;}
  .video-poster{transition:none;}
}

/* Meta label bottom-left, elegant */
.video-meta{
  position:absolute;
  left:18px; bottom:18px;
  z-index:2;
  display:flex; flex-direction:column;
  pointer-events:none;
  color:#fff;
}
.video-meta-eyebrow{
  font-family:'Inter', sans-serif;
  font-size:10px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-300);
  font-weight:600;
}
.video-meta-place{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:14px;
  color:rgba(255,255,255,.92);
  margin-top:3px;
}

/* When user clicks, JS replaces stage contents with <video> */
.video-stage.is-playing{cursor:default;}
.video-stage.is-playing .video-poster,
.video-stage.is-playing .video-tint,
.video-stage.is-playing .video-rule,
.video-stage.is-playing .video-play,
.video-stage.is-playing .video-meta{display:none;}
.video-stage video{
  width:100%; height:100%;
  display:block;
  background:#000;
}

/* Caption below stays clean */
.video-card figcaption{
  padding:18px 4px 0;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:15px;
  color:var(--navy-700);
  background:transparent;
  text-align:center;
  letter-spacing:.005em;
}

/* ============================================================
   ===  EDITORIAL QUOTE: faint cross watermark behind it     ===
   ============================================================ */
.editorial-quote::before{
  content:'';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:clamp(180px, 24vw, 360px);
  height:clamp(180px, 24vw, 360px);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='10.6' y='4' width='2.8' height='16' rx='.6' fill='%23c9a84c' opacity='.10'/><rect x='6.3' y='8.4' width='11.4' height='2.8' rx='.6' fill='%23c9a84c' opacity='.10'/></svg>") center/contain no-repeat;
  z-index:0;
  pointer-events:none;
}
.editorial-quote .container{position:relative; z-index:1;}

/* ============================================================
   ===  MOVING CINEMATIC AMBIENT BACKGROUND                  ===
   ===  Drifting gold light orbs (Linear / Vercel-style)     ===
   ============================================================ */
.cinematic-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  /* Sits behind every section. Hero has its own opaque navy bg so orbs
     only appear on the cream sections below the hero. */
}
.cinematic-bg .orb{
  position:absolute;
  border-radius:50%;
  filter:blur(50px);
  opacity:.85;
  will-change:transform;
  /* Removed mix-blend-mode so orbs ADD light to the cream instead of
     darkening it - reads as elegant glow rather than muddy patches */
}
.cinematic-bg .orb-1{
  width:60vw; height:60vw;
  max-width:880px; max-height:880px;
  background:radial-gradient(circle, rgba(232,194,120,.62) 0%, rgba(232,194,120,0) 65%);
  top:-18%; left:-15%;
  animation:orb-drift-1 38s ease-in-out infinite alternate;
}
.cinematic-bg .orb-2{
  width:55vw; height:55vw;
  max-width:780px; max-height:780px;
  background:radial-gradient(circle, rgba(214,168,104,.55) 0%, rgba(214,168,104,0) 65%);
  top:30%; right:-18%;
  animation:orb-drift-2 46s ease-in-out infinite alternate;
}
.cinematic-bg .orb-3{
  width:45vw; height:45vw;
  max-width:660px; max-height:660px;
  background:radial-gradient(circle, rgba(245,225,168,.55) 0%, rgba(245,225,168,0) 65%);
  bottom:-12%; left:25%;
  animation:orb-drift-3 52s ease-in-out infinite alternate;
}
.cinematic-bg .orb-4{
  width:35vw; height:35vw;
  max-width:520px; max-height:520px;
  background:radial-gradient(circle, rgba(255,235,180,.50) 0%, rgba(255,235,180,0) 65%);
  top:55%; left:-12%;
  animation:orb-drift-4 42s ease-in-out infinite alternate;
}
@keyframes orb-drift-1{
  0%   { transform:translate3d(0,0,0) scale(1); }
  100% { transform:translate3d(35vw, 25vh, 0) scale(1.18); }
}
@keyframes orb-drift-2{
  0%   { transform:translate3d(0,0,0) scale(1); }
  100% { transform:translate3d(-30vw, 18vh, 0) scale(.85); }
}
@keyframes orb-drift-3{
  0%   { transform:translate3d(0,0,0) scale(1.05); }
  100% { transform:translate3d(20vw, -25vh, 0) scale(.95); }
}
@keyframes orb-drift-4{
  0%   { transform:translate3d(0,0,0) scale(.92); }
  100% { transform:translate3d(28vw, -18vh, 0) scale(1.15); }
}
@media (prefers-reduced-motion: reduce){
  .cinematic-bg .orb{animation:none;}
}
/* Mobile: orbs imperceptible at small sizes, save GPU/battery */
@media (max-width: 760px){
  .cinematic-bg{display:none;}
  .hero::after{animation:none;}
}

/* ============================================================
   ===  HERO GOD RAYS — slow rotating conic gradient         ===
   ============================================================ */
.hero::after{
  content:'';
  position:absolute;
  top:-20%; left:-20%;
  width:140%; height:140%;
  z-index:-1;
  pointer-events:none;
  background:
    conic-gradient(from 0deg at 50% 0%,
      transparent 0deg,
      rgba(245,225,168,.06) 8deg,
      transparent 16deg,
      transparent 60deg,
      rgba(245,225,168,.04) 70deg,
      transparent 80deg,
      transparent 130deg,
      rgba(245,225,168,.05) 145deg,
      transparent 155deg,
      transparent 220deg,
      rgba(245,225,168,.04) 235deg,
      transparent 250deg,
      transparent 320deg,
      rgba(245,225,168,.06) 335deg,
      transparent 350deg,
      transparent 360deg);
  animation:god-rays 140s linear infinite;
  mix-blend-mode:screen;
  opacity:.9;
}
@keyframes god-rays{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .hero::after{animation:none;}
}

/* ============================================================
   ===  APPLE-STYLE GALLERY: feature hero + grid             ===
   ============================================================ */

/* Each gallery-section--feature renders the feature hero, then the grid */
.gallery-section--feature{
  padding-top:8px;
}
.gallery-section--feature .g-feature{
  display:block;
  width:100%;
  margin:32px 0 56px;
  position:relative;
  text-decoration:none;
  color:inherit;
  cursor:zoom-in;
}
.gallery-section--feature .g-feature figure{
  position:relative;
  margin:0;
  width:100%;
  border-radius:24px;
  overflow:hidden;
  box-shadow:
    0 50px 90px -30px rgba(7,20,46,.55),
    0 28px 56px -20px rgba(201,168,76,.18);
  isolation:isolate;
  aspect-ratio:16/10;
  background:var(--cream-100);
  transition:box-shadow .6s ease, transform .6s ease;
  display:block;
}
@media (max-width: 760px){
  .gallery-section--feature .g-feature figure{aspect-ratio:4/5;}
}
/* Per-section object-position so important content stays in frame */
.gallery-section--feature .g-feature .parallax-frame .parallax-inner img{
  object-position:center 40%;
}
.gallery-section--feature[data-section="Blind Family Visit"] .parallax-frame .parallax-inner img{
  object-position:center 45%;
}
.gallery-section--feature[data-section="Gipsy Camp Outreach"] .parallax-frame .parallax-inner img{
  object-position:center 70%;
}
.gallery-section--feature[data-section="Pastors Meeting"] .parallax-frame .parallax-inner img{
  object-position:center 35%;
}
.gallery-section--feature[data-section="Pastors Teaching"] .parallax-frame .parallax-inner img{
  object-position:center 30%;
}
.gallery-section--feature[data-section="VBS Children Ministry"] .parallax-frame .parallax-inner img{
  object-position:center 40%;
}
.gallery-section--feature .g-feature:hover figure{
  transform:translateY(-6px);
  box-shadow:
    0 60px 100px -30px rgba(7,20,46,.65),
    0 36px 64px -20px rgba(201,168,76,.30);
}
/* Keep the figure (which IS the parallax-frame) in normal flow so the
   link/section gives it height. The figure already has aspect-ratio set. */
.gallery-section--feature .g-feature .parallax-frame{position:relative !important; inset:auto !important;}
.gallery-section--feature .g-feature .parallax-frame .parallax-inner img{
  filter:saturate(.96) contrast(1.05);
}
.gallery-section--feature .g-feature figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  padding:clamp(32px, 5vw, 64px);
  background:linear-gradient(180deg, transparent 0%, rgba(7,20,46,.30) 35%, rgba(7,20,46,.88) 100%);
  display:flex; flex-direction:column; gap:12px;
  color:#fff;
}
.gallery-section--feature .g-feature .g-feature-eyebrow{
  font-family:'Inter', sans-serif;
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-300);
  font-weight:600;
}
.gallery-section--feature .g-feature .g-feature-quote{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(22px, 2.8vw, 38px);
  line-height:1.25;
  letter-spacing:-.015em;
  max-width:54ch;
  color:#fff;
}

/* The grid below the feature - slightly tighter & more refined */
.gallery-section--feature .gallery-grid{
  margin-top:8px;
}

/* Tighten grid gaps for editorial Apple feel */
.gallery-grid{
  --gap:18px;
}
@media (max-width: 1100px){.gallery-grid{--gap:14px;}}
@media (max-width: 760px){.gallery-grid{--gap:10px;}}

/* Editorial Apple-style item: cleaner border, smoother lift, gold focus on hover */
.gallery-grid .g-item{
  border-radius:14px;
  transition:transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s cubic-bezier(.2,.7,.2,1), top .5s cubic-bezier(.2,.7,.2,1), left .5s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
@media (max-width: 760px){.gallery-grid .g-item{border-radius:10px;}}

/* Apple Photos-style: subtle desaturation pulses to full color when hovered */
.gallery-grid .g-item img{
  filter:saturate(.88) contrast(1.04) brightness(1.02);
}
.gallery-grid .g-item:hover img{
  filter:saturate(1.10) contrast(1.06) brightness(1.03);
}

/* (Firefly light particles removed - the orbs above carry the ambient
   animation now, behind every section, hidden by the hero's opaque navy.) */


/* ===================================================================
   TESTIMONY SECTION
   Pastor John's life testimony, baptism gallery, credentials wall.
   =================================================================== */

.section.testimony{
  position:relative;
  padding-top:clamp(80px, 10vw, 140px);
  padding-bottom:clamp(80px, 10vw, 140px);
}

/* Narrow readable column for the testimony narrative */
.testimony-narrative{
  max-width:780px;
  margin:clamp(48px, 6vw, 80px) auto 0;
  display:flex;
  flex-direction:column;
  gap:clamp(28px, 3.5vw, 48px);
}

.testimony-part{
  position:relative;
}

.testimony-heading{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-style:italic;
  font-size:clamp(1.35rem, 2.2vw, 1.7rem);
  line-height:1.25;
  color:var(--gold, #c9a84c);
  margin:0 0 .55em;
  letter-spacing:.005em;
}

.testimony-part p{
  font-size:clamp(1rem, 1.15vw, 1.125rem);
  line-height:1.78;
  color:rgb(42, 47, 58);
  margin:0;
}

.testimony-part p + p{
  margin-top:1.1em;
}

/* Photo break inside narrative column */
.testimony-photo{
  margin:clamp(16px, 2vw, 28px) auto;
  max-width:560px;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 24px 50px rgba(12, 14, 19, .22), 0 8px 18px rgba(12, 14, 19, .15);
}
.testimony-photo .parallax-inner{ display:block; }
.testimony-photo img{
  width:100%; height:auto; display:block;
  border-radius:14px;
}
.testimony-photo figcaption{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:400;
  font-size:.92rem;
  color:rgba(12, 14, 19, .58);
  text-align:center;
  padding:14px 8px 4px;
  letter-spacing:.01em;
}

/* Closing benediction & byline */
.testimony-sign{
  font-family:'Fraunces', serif !important;
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.4rem, 2vw, 1.65rem) !important;
  line-height:1.4 !important;
  text-align:center;
  color:var(--gold, #c9a84c) !important;
  margin:clamp(28px, 3vw, 40px) 0 .35em !important;
  letter-spacing:.005em;
}
.testimony-byline{
  font-family:'Inter', sans-serif !important;
  font-size:.95rem !important;
  font-weight:500 !important;
  text-align:center;
  color:rgba(12, 14, 19, .55) !important;
  margin:0 !important;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* Sub-section blocks (baptism gallery + credentials) */
.testimony-block{
  margin-top:clamp(80px, 10vw, 140px);
}

/* === BAPTISM GALLERY === */
.baptism-grid{
  margin-top:clamp(40px, 5vw, 64px);
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-auto-rows:120px;
  gap:14px;
}

/* Tall portrait lake baptism gets a hero-style placement */
.baptism-grid .g-item:nth-child(1){
  grid-column:span 5;
  grid-row:span 4;
}
.baptism-grid .g-item:nth-child(2){
  grid-column:span 4;
  grid-row:span 2;
}
.baptism-grid .g-item:nth-child(3){
  grid-column:span 3;
  grid-row:span 2;
}
.baptism-grid .g-item:nth-child(4){
  grid-column:span 4;
  grid-row:span 2;
}
.baptism-grid .g-item:nth-child(5){
  grid-column:span 3;
  grid-row:span 2;
}

.baptism-grid .g-item{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  background:rgba(12, 14, 19, .08);
  box-shadow:0 10px 28px rgba(12, 14, 19, .15);
  cursor:zoom-in;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.baptism-grid .g-item img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.baptism-grid .g-item:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 50px rgba(12, 14, 19, .28);
}
.baptism-grid .g-item:hover img{
  transform:scale(1.05);
}

@media (max-width: 900px){
  .baptism-grid{
    grid-template-columns:repeat(6, 1fr);
    grid-auto-rows:100px;
  }
  .baptism-grid .g-item:nth-child(1){ grid-column:span 6; grid-row:span 4; }
  .baptism-grid .g-item:nth-child(2){ grid-column:span 3; grid-row:span 2; }
  .baptism-grid .g-item:nth-child(3){ grid-column:span 3; grid-row:span 2; }
  .baptism-grid .g-item:nth-child(4){ grid-column:span 3; grid-row:span 2; }
  .baptism-grid .g-item:nth-child(5){ grid-column:span 3; grid-row:span 2; }
}

@media (max-width: 560px){
  .baptism-grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .baptism-grid .g-item{ grid-column:span 1 !important; grid-row:auto !important; aspect-ratio:4/3; }
  .baptism-grid .g-item:nth-child(1){ aspect-ratio:3/4; }
}

/* === CREDENTIALS WALL === */
.credentials-grid{
  margin-top:clamp(40px, 5vw, 64px);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:clamp(20px, 2.5vw, 32px);
}

.credential{
  display:block;
  text-decoration:none;
  color:inherit;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.credential:hover{
  transform:translateY(-4px);
}

.credential figure{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.credential-frame{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:#f4ecd8;
  box-shadow:
    0 20px 44px rgba(12, 14, 19, .18),
    0 8px 18px rgba(12, 14, 19, .12),
    inset 0 0 0 1px rgba(201, 168, 76, .35);
  padding:8px;
  transition:box-shadow .5s ease;
}
.credential:hover .credential-frame{
  box-shadow:
    0 28px 60px rgba(12, 14, 19, .25),
    0 12px 24px rgba(12, 14, 19, .18),
    inset 0 0 0 1px rgba(201, 168, 76, .7);
}
.credential-frame img{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
  background:#fff;
  aspect-ratio:auto;
}

.credential figcaption{
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:0 6px;
}
.credential figcaption strong{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:1.05rem;
  color:var(--gold, #c9a84c);
  letter-spacing:.005em;
}
.credential figcaption span{
  font-size:.875rem;
  line-height:1.5;
  color:rgba(12, 14, 19, .6);
}

@media (max-width: 560px){
  .credentials-grid{
    grid-template-columns:1fr;
  }
}