/* The Potter's House — Carson, CA | J316 Digital */
:root{
  --ink:#16120E; --ink-soft:#3A322A; --warm-gray:#6E6358;
  --navy:#0E3A6B; --navy-deep:#082744; --navy-line:#1B5391;
  --red:#C4162A; --red-bright:#E0233A;
  --cream:#FBF7F0; --sand:#F1E7D7; --sand-deep:#E3D4BC;
  --gold:#C8933F;
  --maxw:1180px;
  --shadow:0 18px 50px -18px rgba(22,18,14,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.display{font-family:'Anton',Impact,sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.01em;line-height:.94}
.eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--red)}
.scripture{font-family:'Source Serif 4',Georgia,serif;font-style:italic}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:80;background:rgba(251,247,240,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--sand-deep);
  transition:box-shadow .3s var(--ease)}
.hdr.scrolled{box-shadow:0 6px 30px -12px rgba(22,18,14,.28)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:12px 24px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex-shrink:0}
.brand img{width:48px;height:48px;object-fit:contain}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-txt b{font-family:'Anton',sans-serif;font-weight:400;font-size:1.08rem;
  text-transform:uppercase;letter-spacing:.02em}
.brand-txt span{font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--warm-gray);font-weight:600}
.nav{display:flex;align-items:center;gap:30px}
.nav a{text-decoration:none;font-size:.8rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);position:relative;padding:4px 0}
.nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--red);transition:width .3s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:2px;text-decoration:none;font-weight:800;
  font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;border:2px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-bright)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-light{border-color:rgba(255,255,255,.55);color:#fff}
.btn-light:hover{background:#fff;color:var(--navy-deep);border-color:#fff}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;
  transition:transform .3s var(--ease),opacity .2s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(560px,86vh,860px);display:flex;
  align-items:flex-end;overflow:hidden;background:var(--navy-deep)}
.hero-media{position:absolute;inset:0}
.hero-media figure{position:absolute;inset:0;margin:0;opacity:0;
  animation:kb 24s infinite var(--ease)}
.hero-media figure:nth-child(1){animation-delay:0s}
.hero-media figure:nth-child(2){animation-delay:8s}
.hero-media figure:nth-child(3){animation-delay:16s}
.hero-media img{width:100%;height:100%;object-fit:cover}
@keyframes kb{
  0%{opacity:0;transform:scale(1.14)}
  6%{opacity:1}
  33%{opacity:1;transform:scale(1.0)}
  40%{opacity:0}
  100%{opacity:0;transform:scale(1.0)}
}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,39,68,.55) 0%,rgba(8,39,68,.30) 38%,rgba(8,39,68,.88) 100%)}
.hero-warm{position:absolute;inset:0;mix-blend-mode:soft-light;
  background:radial-gradient(120% 90% at 22% 12%,rgba(255,214,150,.75),transparent 62%)}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 24px 74px;color:#fff}
.hero .eyebrow{color:#FFD9A0}
.hero h1{margin:16px 0 10px;font-size:clamp(2.7rem,7.4vw,6rem);color:#fff}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>i{display:block;font-style:normal;transform:translateY(105%);
  animation:rise .95s var(--ease) forwards}
.hero h1 .ln:nth-child(1)>i{animation-delay:.15s}
.hero h1 .ln:nth-child(2)>i{animation-delay:.30s}
.hero h1 .ln:nth-child(3)>i{animation-delay:.45s}
@keyframes rise{to{transform:translateY(0)}}
.hero-sub{max-width:52ch;font-size:1.06rem;color:rgba(255,255,255,.9);
  opacity:0;animation:fade .9s var(--ease) .7s forwards}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;
  opacity:0;animation:fade .9s var(--ease) .9s forwards}
@keyframes fade{to{opacity:1}}

/* ---------- marquee ---------- */
.marquee{background:var(--red);color:#fff;padding:15px 0;overflow:hidden;
  border-top:3px solid var(--navy-deep);border-bottom:3px solid var(--navy-deep)}
.marquee-track{display:flex;gap:44px;width:max-content;animation:slide 34s linear infinite}
.marquee span{font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:1.02rem;letter-spacing:.11em;white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,9vw,116px) 0}
.sec-cream{background:var(--cream)}
.sec-sand{background:var(--sand)}
.sec-navy{background:var(--navy-deep);color:#fff}
.sec-navy .eyebrow{color:#FFD9A0}
.sec h2{font-size:clamp(2rem,4.6vw,3.5rem);margin:14px 0 20px}
.lead{font-size:1.12rem;max-width:62ch;color:var(--ink-soft)}
.sec-navy .lead{color:rgba(255,255,255,.86)}
.reveal{opacity:0;transform:translateY(30px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.rule{width:64px;height:4px;background:var(--red);border:0;margin:0 0 8px}

/* ---------- welcome / pastors ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.pastor-card{background:var(--cream);border:1px solid var(--sand-deep);padding:26px;
  box-shadow:var(--shadow);position:relative}
.pastor-card::before{content:'';position:absolute;left:0;top:0;width:100%;height:5px;background:var(--red)}
.pastor-card img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--sand-deep)}
.pastor-card h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  margin:18px 0 4px;font-size:1.4rem}
.pastor-card p{margin:0;color:var(--warm-gray);font-size:.9rem;
  letter-spacing:.13em;text-transform:uppercase;font-weight:700}

/* ---------- photo mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
.mosaic figure{margin:0;overflow:hidden;background:var(--sand-deep);position:relative}
.mosaic img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease),filter .5s}
.mosaic figure:hover img{transform:scale(1.07)}
.mosaic .tall{grid-row:span 2}
.mosaic .wide{grid-column:span 2}
.mosaic figure{aspect-ratio:1}
.mosaic .tall{aspect-ratio:1/2.06}
.mosaic .wide{aspect-ratio:2.06/1}

/* ---------- schedule ---------- */
.sched{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:2px;
  margin-top:42px;background:rgba(255,255,255,.14)}
.sched-cell{background:var(--navy-deep);padding:30px 26px;transition:background .35s}
.sched-cell:hover{background:#0B3357}
.sched-cell .d{font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:.86rem;letter-spacing:.19em;color:#FFD9A0;margin-bottom:14px}
.sched-cell ul{list-style:none;margin:0;padding:0}
.sched-cell li{display:flex;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.13);font-size:.94rem}
.sched-cell li:last-child{border-bottom:0}
.sched-cell li b{font-weight:800;white-space:nowrap}
.note-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.chip{display:inline-flex;align-items:center;gap:9px;padding:11px 19px;
  border:1px solid rgba(255,255,255,.32);border-radius:999px;font-size:.83rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sec-cream .chip,.sec-sand .chip{border-color:var(--sand-deep);color:var(--ink-soft)}

/* ---------- events ---------- */
.events{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:26px;margin-top:44px}
.ev{background:var(--cream);border:1px solid var(--sand-deep);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s}
.ev:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.ev-img{aspect-ratio:16/9;background:var(--sand-deep);object-fit:cover;width:100%}
.ev-body{padding:24px;flex:1;display:flex;flex-direction:column}
.ev-date{font-size:.74rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--red)}
.ev h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:1.28rem;margin:10px 0 10px}
.ev p{margin:0 0 18px;color:var(--warm-gray);font-size:.95rem;flex:1}
.empty-slot{border:2px dashed var(--sand-deep);background:transparent;
  display:flex;align-items:center;justify-content:center;min-height:270px;
  color:var(--warm-gray);text-align:center;padding:28px;font-size:.9rem}

/* ---------- calendar ---------- */
.cal{background:var(--cream);border:1px solid var(--sand-deep);
  box-shadow:var(--shadow);max-width:760px;margin-top:44px}
.cal-top{display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;background:var(--navy-deep);color:#fff}
.cal-top h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  margin:0;font-size:1.24rem;letter-spacing:.03em}
.cal-nav{display:flex;gap:8px}
.cal-nav button{width:38px;height:38px;border:1px solid rgba(255,255,255,.34);
  background:transparent;color:#fff;cursor:pointer;font-size:1.1rem;line-height:1;
  transition:background .25s,border-color .25s}
.cal-nav button:hover{background:rgba(255,255,255,.14)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  background:var(--sand-deep);padding:1px}
.cal-dow{background:var(--sand);padding:10px 4px;text-align:center;
  font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--warm-gray)}
.cal-day{background:var(--cream);min-height:72px;padding:8px 6px;text-align:left;
  border:0;cursor:pointer;font:inherit;position:relative;transition:background .2s}
.cal-day:hover:not(.blank){background:var(--sand)}
.cal-day.blank{background:#F7F2E9;cursor:default}
.cal-day .num{font-size:.86rem;font-weight:700;color:var(--ink-soft)}
.cal-day.today .num{background:var(--navy-deep);color:#fff;border-radius:50%;
  width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}
.cal-day.sel{background:var(--navy-deep)}
.cal-day.sel .num{color:#fff}
.dots{display:flex;gap:3px;margin-top:6px;flex-wrap:wrap}
.dot{width:6px;height:6px;border-radius:50%;background:var(--navy-line)}
.dot.ev{background:var(--red)}
.cal-detail{padding:22px 24px;border-top:1px solid var(--sand-deep);min-height:104px}
.cal-detail h4{margin:0 0 12px;font-size:.78rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--red);font-weight:800}
.cal-detail ul{list-style:none;margin:0;padding:0}
.cal-detail li{display:flex;gap:14px;padding:7px 0;font-size:.95rem;
  border-bottom:1px solid var(--sand);align-items:baseline}
.cal-detail li:last-child{border-bottom:0}
.cal-detail li b{min-width:88px;font-weight:800;color:var(--navy)}
.cal-detail .none{color:var(--warm-gray);font-style:italic;margin:0}
.cal-legend{display:flex;gap:20px;margin-top:16px;font-size:.78rem;color:var(--warm-gray)}
.cal-legend span{display:inline-flex;align-items:center;gap:7px}

/* ---------- rotating badge ---------- */
.badge{position:fixed;right:26px;bottom:26px;z-index:70;width:124px;height:124px;
  text-decoration:none;display:grid;place-items:center;
  opacity:0;transform:scale(.6);animation:pop .7s var(--ease) 1.4s forwards}
@keyframes pop{to{opacity:1;transform:scale(1)}}
.badge-disc{position:absolute;inset:0;background:var(--red);border-radius:50%;
  box-shadow:0 14px 34px -8px rgba(196,22,42,.55);transition:transform .45s var(--ease)}
.badge:hover .badge-disc{transform:scale(1.08)}
.badge svg{position:absolute;inset:0;width:100%;height:100%;
  animation:spin 18s linear infinite}
.badge:hover svg{animation-duration:7s}
@keyframes spin{to{transform:rotate(360deg)}}
.badge text{fill:#fff;font-family:'Anton',sans-serif;font-size:9.4px;letter-spacing:.19em;
  text-transform:uppercase}
.badge-core{position:relative;z-index:2;color:#fff;display:grid;place-items:center;
  text-align:center;line-height:1}
.badge-core b{display:block;font-family:'Anton',sans-serif;font-weight:400;
  font-size:.62rem;letter-spacing:.11em;text-transform:uppercase}
.badge-core .arrow{font-size:1.15rem;display:block;margin-top:3px;
  transition:transform .35s var(--ease)}
.badge:hover .badge-core .arrow{transform:translateX(4px)}

/* ---------- find us ---------- */
.findus{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.findus-photo{border:1px solid var(--sand-deep);box-shadow:var(--shadow);background:var(--sand)}
.findus-photo img{width:100%}
.findus-photo figcaption{padding:14px 18px;font-size:.78rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;color:var(--warm-gray);background:var(--cream)}
.nap{list-style:none;margin:26px 0 0;padding:0}
.nap li{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--sand-deep);
  align-items:flex-start}
.nap li:last-child{border-bottom:0}
.nap .k{min-width:96px;font-size:.72rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--red);padding-top:3px}
.nap a{text-decoration:none;border-bottom:1px solid var(--sand-deep)}
.nap a:hover{border-color:var(--red)}

/* ---------- give ---------- */
.give-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:24px;margin-top:44px}
.give-card{background:var(--cream);border:1px solid var(--sand-deep);padding:32px 28px;
  position:relative;transition:transform .4s var(--ease),box-shadow .4s}
.give-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.give-card .n{font-family:'Anton',sans-serif;font-size:2.6rem;color:var(--sand-deep);
  line-height:1;margin-bottom:14px}
.give-card h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:1.3rem;margin:0 0 10px}
.give-card p{margin:0 0 16px;color:var(--warm-gray);font-size:.95rem}
.reveal-val{display:inline-flex;align-items:center;gap:10px;font-weight:800;
  font-size:.95rem;word-break:break-all}
.copy-btn{border:1px solid var(--sand-deep);background:transparent;cursor:pointer;
  padding:6px 12px;font-size:.68rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;transition:background .25s,color .25s}
.copy-btn:hover{background:var(--ink);color:var(--cream)}

/* ---------- belief accordion ---------- */
.beliefs{margin-top:40px;border-top:1px solid var(--sand-deep)}
.belief{border-bottom:1px solid var(--sand-deep)}
.belief summary{cursor:pointer;padding:24px 0;display:flex;align-items:center;gap:20px;
  list-style:none;font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:1.22rem;transition:color .25s}
.belief summary::-webkit-details-marker{display:none}
.belief summary:hover{color:var(--red)}
.belief summary .idx{color:var(--red);font-size:.86rem;min-width:34px}
.belief summary .caret{margin-left:auto;transition:transform .3s var(--ease);font-size:1.1rem}
.belief[open] summary .caret{transform:rotate(45deg)}
.belief-body{padding:0 0 26px 54px;color:var(--ink-soft);max-width:70ch}
.belief-body .ref{display:block;margin-top:12px;color:var(--navy);
  font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-size:1rem}
.faith-list{list-style:none;counter-reset:f;margin:38px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2px;
  background:var(--sand-deep)}
.faith-list li{counter-increment:f;background:var(--cream);padding:26px 24px;
  font-size:.96rem;color:var(--ink-soft);position:relative;padding-top:52px}
.faith-list li::before{content:counter(f,decimal-leading-zero);position:absolute;
  top:20px;left:24px;font-family:'Anton',sans-serif;color:var(--red);font-size:.9rem;letter-spacing:.1em}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:rgba(255,255,255,.74);padding:70px 0 34px}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
.ftr h4{color:#fff;font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:.86rem;letter-spacing:.17em;margin:0 0 18px}
.ftr a{color:rgba(255,255,255,.74);text-decoration:none}
.ftr a:hover{color:#fff}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{padding:6px 0;font-size:.92rem}
.ftr-brand img{width:74px;margin-bottom:18px;filter:brightness(1.1)}
.ftr-bottom{margin-top:52px;padding-top:26px;border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:.79rem;
  color:rgba(255,255,255,.5)}
.ftr-bottom a{font-size:.79rem}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .split,.findus{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .mosaic .tall,.mosaic .wide{grid-row:auto;grid-column:auto;aspect-ratio:1}
}
@media(max-width:780px){
  body{font-size:16px}
  .nav{position:fixed;inset:64px 0 auto;flex-direction:column;gap:0;
    background:var(--cream);border-bottom:1px solid var(--sand-deep);padding:8px 24px 22px;
    transform:translateY(-125%);transition:transform .38s var(--ease);
    box-shadow:0 18px 40px -18px rgba(22,18,14,.35)}
  .nav.open{transform:translateY(0)}
  .nav a{padding:15px 0;width:100%;border-bottom:1px solid var(--sand)}
  .nav .btn{margin-top:14px;width:100%}
  .burger{display:block}
  .hero-in{padding-bottom:56px}
  .badge{width:96px;height:96px;right:16px;bottom:16px}
  .badge text{font-size:9.8px}
  .ftr-grid{grid-template-columns:1fr}
  .cal-day{min-height:58px}
  .belief-body{padding-left:0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero-media figure:first-child{opacity:1}
  .hero h1 .ln>i{transform:none}
  .hero-sub,.hero-cta,.badge{opacity:1;transform:none}
}

/* ==================================================================
   V2 — 7-slide hero, full-view calendar, logo badge
   ================================================================== */

/* ---- hero: 7 slides, varied motion ---- */
.hero-media figure{animation:none;opacity:0}
.hero-media figure{animation:slide7 49s infinite linear}
.hero-media figure:nth-child(1){animation-delay:0s}
.hero-media figure:nth-child(2){animation-delay:7s}
.hero-media figure:nth-child(3){animation-delay:14s}
.hero-media figure:nth-child(4){animation-delay:21s}
.hero-media figure:nth-child(5){animation-delay:28s}
.hero-media figure:nth-child(6){animation-delay:35s}
.hero-media figure:nth-child(7){animation-delay:42s}
@keyframes slide7{
  0%{opacity:0} 2%{opacity:1} 14.3%{opacity:1} 16.3%{opacity:0} 100%{opacity:0}
}
.hero-media img{width:100%;height:100%;object-fit:cover;transform-origin:center;
  animation:drift 49s infinite linear}
.hero-media figure:nth-child(1) img{animation-delay:0s;  animation-name:kbIn}
.hero-media figure:nth-child(2) img{animation-delay:7s;  animation-name:kbLeft}
.hero-media figure:nth-child(3) img{animation-delay:14s; animation-name:kbOut}
.hero-media figure:nth-child(4) img{animation-delay:21s; animation-name:kbRight}
.hero-media figure:nth-child(5) img{animation-delay:28s; animation-name:kbIn}
.hero-media figure:nth-child(6) img{animation-delay:35s; animation-name:kbLeft}
.hero-media figure:nth-child(7) img{animation-delay:42s; animation-name:kbOut}
@keyframes kbIn   {0%{transform:scale(1.02)}16%{transform:scale(1.13)}100%{transform:scale(1.13)}}
@keyframes kbOut  {0%{transform:scale(1.15)}16%{transform:scale(1.03)}100%{transform:scale(1.03)}}
@keyframes kbLeft {0%{transform:scale(1.12) translateX(2.2%)}16%{transform:scale(1.12) translateX(-2.2%)}100%{transform:scale(1.12) translateX(-2.2%)}}
@keyframes kbRight{0%{transform:scale(1.12) translateX(-2.2%)}16%{transform:scale(1.12) translateX(2.2%)}100%{transform:scale(1.12) translateX(2.2%)}}

/* ---- "THIS IS US" ---- */
.bigstate{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  color:var(--ink);font-size:clamp(2.6rem,7vw,5.6rem);line-height:.9;margin:6px 0 18px;
  letter-spacing:-.005em}

/* ---- calendar: everything visible, no clicking ---- */
.cal{max-width:100%}
.cal-grid{grid-template-columns:repeat(7,1fr)}
.cal-day{min-height:132px;cursor:default;display:flex;flex-direction:column;
  align-items:stretch;padding:7px 7px 9px;gap:5px}
.cal-day:hover:not(.blank){background:var(--cream)}
.cal-day .num{font-size:.9rem;font-weight:800;color:var(--ink-soft);text-align:left}
.cal-day.today{background:#FFF6E6;box-shadow:inset 0 0 0 2px var(--red)}
.cal-items{display:flex;flex-direction:column;gap:3px;text-align:left;overflow:hidden}
.ci{font-size:.665rem;line-height:1.28;padding:2px 5px;border-radius:2px;
  white-space:normal;overflow-wrap:anywhere}
.ci-svc{background:#E7EEF7;color:#0E3A6B;font-weight:700}
.ci-ev{background:var(--red);color:#fff;font-weight:800;letter-spacing:.01em}
.ci-pr{background:#F2EADC;color:#6E6358;font-weight:700}
.cal-verse{background:var(--navy-deep);color:#fff;padding:26px 28px;text-align:center}
.cal-verse p{font-family:'Source Serif 4',Georgia,serif;font-style:italic;
  font-size:1.16rem;margin:0 auto;max-width:60ch;line-height:1.5}
.cal-verse cite{display:block;margin-top:10px;font-style:normal;font-size:.72rem;
  letter-spacing:.19em;text-transform:uppercase;font-weight:800;color:#FFD9A0}
.cal-agenda{display:none}

@media(max-width:820px){
  .cal-grid,.cal-dow{display:none}
  .cal-agenda{display:block;padding:6px 0}
  .ag-day{display:grid;grid-template-columns:66px 1fr;gap:14px;padding:14px 20px;
    border-bottom:1px solid var(--sand-deep)}
  .ag-day:last-child{border-bottom:0}
  .ag-day.today{background:#FFF6E6}
  .ag-date{text-align:center}
  .ag-date b{display:block;font-family:'Anton',sans-serif;font-size:1.5rem;line-height:1}
  .ag-date span{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-gray);font-weight:800}
  .ag-items{display:flex;flex-direction:column;gap:4px}
  .ag-items .ci{font-size:.8rem;padding:4px 9px}
}

/* ---- badge: white disc, logo centre ---- */
.badge{width:150px;height:150px}
.badge-disc{background:#fff;box-shadow:0 16px 40px -10px rgba(22,18,14,.42);
  border:1px solid var(--sand-deep)}
.badge svg{animation:spin 22s linear infinite}
.badge:hover svg{animation-duration:8s}
.badge text{fill:var(--red);font-size:8.6px;letter-spacing:.2em}
.badge-core{width:56%;height:56%;display:grid;place-items:center}
.badge-core img{width:100%;height:100%;object-fit:contain}
@media(max-width:780px){
  .badge{width:112px;height:112px;right:14px;bottom:14px}
  .badge text{font-size:9px}
}

/* ==================================================================
   V3 — hero framing, badge fit, pastor card
   ================================================================== */

/* ---- hero: full-bleed cover with per-slide focal point ---- */
.hero-media figure{display:block}
.hero-media picture{position:absolute;inset:0;display:block}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hero-media figure:nth-child(1) img{object-position:center 58%}  /* group photo - faces low */
.hero-media figure:nth-child(2) img{object-position:center 22%}  /* pastors - heads high */
.hero-media figure:nth-child(3) img{object-position:center 40%}  /* worship band */
.hero-media figure:nth-child(4) img{object-position:center 46%}  /* street outreach */
.hero-media figure:nth-child(5) img{object-position:center 42%}  /* building */
.hero-media figure:nth-child(6) img{object-position:center 40%}  /* know jesus */
.hero-media figure:nth-child(7) img{object-position:center 44%}  /* congregation */

/* ---- badge: text fitted exactly, logo spins ---- */
.badge text{fill:var(--red);font-size:7.6px;letter-spacing:0;font-weight:400}
.badge-core{width:52%;height:52%}
.badge-core img{animation:spin 22s linear infinite;transform-origin:center}
.badge:hover .badge-core img{animation-duration:8s}

/* ---- pastor card: no red bar, no frame, wider crop ---- */
.pastor-card{background:transparent;border:0;padding:0;box-shadow:var(--shadow);overflow:hidden}
.pastor-card::before{display:none}
.pastor-card picture{display:block}
.pastor-card img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 28%;
  display:block;background:var(--sand-deep)}
.pastor-card h3{background:var(--cream);margin:0;padding:20px 24px 2px}
.pastor-card p{background:var(--cream);margin:0;padding:0 24px 22px}

/* ==================================================================
   V4 — plain calendar, clean badge, daylight exterior
   ================================================================== */

/* ---- calendar: black text, colour reserved for special events ---- */
.ci{background:none!important;padding:1px 0;font-size:.7rem;line-height:1.3;
  color:var(--ink);font-weight:600;letter-spacing:0}
.ci-svc,.ci-pr{color:var(--ink);font-weight:600}
.ci-ev{background:#DCEBF7!important;color:#0B3357!important;font-weight:800;
  padding:2px 6px!important;border-radius:2px;border-left:3px solid #2E7FC2}
.cal-day.today{background:#FFF9EE;box-shadow:inset 0 0 0 2px var(--navy-deep)}
.cal-day .num{color:var(--ink);font-weight:800}
.cal-legend span:first-child i{background:#2E7FC2}
.cal-legend span:nth-child(2) i,.cal-legend span:nth-child(3) i{background:var(--ink-soft)}

/* ---- badge: no stray stroke, clear ring, logo clear of text ---- */
.badge{width:158px;height:158px}
.badge svg *{stroke:none}
.badge svg path{fill:none;stroke:none}
.badge text{fill:var(--red);font-size:7.1px;letter-spacing:0;font-weight:400;
  stroke:none;paint-order:normal}
.badge-core{width:44%;height:44%}
.badge-disc{background:#fff;border:1px solid #E6DCC9}
@media(max-width:780px){.badge{width:116px;height:116px}.badge text{font-size:7.4px}}

/* ==================================================================
   V5 — video hero
   ================================================================== */
.hero-video{position:absolute;inset:0;overflow:hidden;background:var(--navy-deep)}
.hero-video video{width:100%;height:100%;object-fit:cover;object-position:center center;
  display:block}
.hero-video img.vposter{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-video video{opacity:0;transition:opacity .9s var(--ease)}
.hero-video video.ready{opacity:1}
@media(prefers-reduced-motion:reduce){
  .hero-video video{display:none}
  .hero-video img.vposter{display:block}
}

/* ==================================================================
   V6 — faster hero rotation (7 slides x 4s = 28s cycle)
   ================================================================== */
.hero-video{display:none}
.hero-media figure{animation:slideFast 28s infinite linear}
.hero-media figure:nth-child(1){animation-delay:0s}
.hero-media figure:nth-child(2){animation-delay:4s}
.hero-media figure:nth-child(3){animation-delay:8s}
.hero-media figure:nth-child(4){animation-delay:12s}
.hero-media figure:nth-child(5){animation-delay:16s}
.hero-media figure:nth-child(6){animation-delay:20s}
.hero-media figure:nth-child(7){animation-delay:24s}
@keyframes slideFast{
  0%{opacity:0} 2.6%{opacity:1} 14.3%{opacity:1} 16.9%{opacity:0} 100%{opacity:0}
}
.hero-media img{animation-duration:28s}
.hero-media figure:nth-child(1) img{animation-delay:0s}
.hero-media figure:nth-child(2) img{animation-delay:4s}
.hero-media figure:nth-child(3) img{animation-delay:8s}
.hero-media figure:nth-child(4) img{animation-delay:12s}
.hero-media figure:nth-child(5) img{animation-delay:16s}
.hero-media figure:nth-child(6) img{animation-delay:20s}
.hero-media figure:nth-child(7) img{animation-delay:24s}
@keyframes kbIn   {0%{transform:scale(1.02)}17%{transform:scale(1.11)}100%{transform:scale(1.11)}}
@keyframes kbOut  {0%{transform:scale(1.13)}17%{transform:scale(1.03)}100%{transform:scale(1.03)}}
@keyframes kbLeft {0%{transform:scale(1.10) translateX(1.8%)}17%{transform:scale(1.10) translateX(-1.8%)}100%{transform:scale(1.10) translateX(-1.8%)}}
@keyframes kbRight{0%{transform:scale(1.10) translateX(-1.8%)}17%{transform:scale(1.10) translateX(1.8%)}100%{transform:scale(1.10) translateX(1.8%)}}

/* ==================================================================
   V7 — fast cinematic hero (7 slides x 2s = 14s cycle)
   ================================================================== */
.hero-media figure{animation:slideSnap 14s infinite linear}
.hero-media figure:nth-child(1){animation-delay:0s}
.hero-media figure:nth-child(2){animation-delay:2s}
.hero-media figure:nth-child(3){animation-delay:4s}
.hero-media figure:nth-child(4){animation-delay:6s}
.hero-media figure:nth-child(5){animation-delay:8s}
.hero-media figure:nth-child(6){animation-delay:10s}
.hero-media figure:nth-child(7){animation-delay:12s}
@keyframes slideSnap{
  0%{opacity:0} 2.4%{opacity:1} 14.3%{opacity:1} 16.7%{opacity:0} 100%{opacity:0}
}
.hero-media img{animation-duration:14s;animation-timing-function:cubic-bezier(.16,.62,.3,1)}
.hero-media figure:nth-child(1) img{animation-delay:0s}
.hero-media figure:nth-child(2) img{animation-delay:2s}
.hero-media figure:nth-child(3) img{animation-delay:4s}
.hero-media figure:nth-child(4) img{animation-delay:6s}
.hero-media figure:nth-child(5) img{animation-delay:8s}
.hero-media figure:nth-child(6) img{animation-delay:10s}
.hero-media figure:nth-child(7) img{animation-delay:12s}

/* punchier motion - has to read inside 2 seconds */
@keyframes kbIn{
  0%{transform:scale(1.00)} 17%{transform:scale(1.13)} 100%{transform:scale(1.13)}}
@keyframes kbOut{
  0%{transform:scale(1.16)} 17%{transform:scale(1.02)} 100%{transform:scale(1.02)}}
@keyframes kbLeft{
  0%{transform:scale(1.12) translateX(3.4%)} 17%{transform:scale(1.12) translateX(-3.4%)}
  100%{transform:scale(1.12) translateX(-3.4%)}}
@keyframes kbRight{
  0%{transform:scale(1.12) translate(-3.4%,1.6%)} 17%{transform:scale(1.12) translate(3.4%,-1.6%)}
  100%{transform:scale(1.12) translate(3.4%,-1.6%)}}

/* headline settles faster so it isn't still animating on slide three */
.hero h1 .ln>i{animation-duration:.62s}
.hero h1 .ln:nth-child(1)>i{animation-delay:.08s}
.hero h1 .ln:nth-child(2)>i{animation-delay:.18s}
.hero h1 .ln:nth-child(3)>i{animation-delay:.28s}
.hero-sub{animation-delay:.42s;animation-duration:.6s}
.hero-cta{animation-delay:.56s;animation-duration:.6s}

/* ==================================================================
   V8 — globe static, only lettering rotates
   ================================================================== */
.badge-core img{animation:none!important;transform:none!important}
.badge svg{animation:spin 22s linear infinite}
.badge:hover svg{animation-duration:9s}
/* prayer slide is a portrait phone photo - frame it high on the subjects */
.hero-media figure:nth-child(2) img{object-position:center 34%}

/* ==================================================================
   V9 — categorised gallery + lightbox
   ================================================================== */
.galgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px;margin-top:44px}
.galcard{position:relative;border:0;padding:0;cursor:pointer;overflow:hidden;
  background:var(--sand-deep);aspect-ratio:4/3;display:block;font:inherit;text-align:left;
  transition:transform .4s var(--ease),box-shadow .4s}
.galcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.galcard img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);display:block}
.galcard:hover img{transform:scale(1.07)}
.galcard-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,25,45,.05) 0%,rgba(8,25,45,.42) 52%,rgba(8,25,45,.86) 100%)}
.galcard-txt{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 20px;color:#fff}
.galcard-txt h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  margin:0 0 4px;font-size:1.42rem;line-height:1.02;letter-spacing:.01em}
.galcard-txt span{font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;
  font-weight:800;color:#FFD9A0;display:flex;align-items:center;gap:9px}
.galcard-txt span::after{content:'';height:1px;flex:1;background:rgba(255,217,160,.42)}

.lb{position:fixed;inset:0;z-index:200;background:rgba(10,8,6,.96);
  display:none;flex-direction:column;backdrop-filter:blur(6px)}
.lb.open{display:flex}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 26px;border-bottom:1px solid rgba(255,255,255,.14);flex-shrink:0}
.lb-bar h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  color:#fff;margin:0;font-size:1.24rem;letter-spacing:.02em}
.lb-bar p{margin:2px 0 0;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:#B9AFA4;font-weight:700}
.lb-x{background:none;border:1px solid rgba(255,255,255,.32);color:#fff;width:44px;height:44px;
  cursor:pointer;font-size:1.3rem;line-height:1;flex-shrink:0;transition:background .25s}
.lb-x:hover{background:rgba(255,255,255,.14)}
.lb-body{flex:1;overflow-y:auto;padding:24px 26px 44px}
.lb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;
  max-width:1300px;margin:0 auto}
.lb-grid figure{margin:0;aspect-ratio:1;overflow:hidden;background:#1E1913;cursor:zoom-in}
.lb-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),opacity .5s}
.lb-grid figure:hover img{transform:scale(1.06)}
.lb-full{position:fixed;inset:0;z-index:210;background:rgba(6,5,4,.985);display:none;
  align-items:center;justify-content:center;padding:34px;cursor:zoom-out}
.lb-full.open{display:flex}
.lb-full img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 30px 90px -20px #000}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.3);color:#fff;width:52px;height:52px;cursor:pointer;
  font-size:1.5rem;line-height:1;transition:background .25s}
.lb-nav:hover{background:rgba(255,255,255,.25)}
.lb-prev{left:20px} .lb-next{right:20px}
@media(max-width:600px){
  .lb-grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .lb-nav{width:42px;height:42px}
  .lb-full{padding:14px}
}

/* ==================================================================
   V10 — Carson monument video hero
   ================================================================== */
.hero-video{display:block}
.hero-media{display:none}
.hero-video video{object-position:center center}

/* V11 — video always visible, never waits on JS */
.hero-video video{opacity:1!important;transition:none}
.hero-video img.vposter{display:none}
.hero-video{background:var(--navy-deep)}

/* ==================================================================
   V12 — mixed video + photo hero sequence (JS driven)
   ================================================================== */
.hero-video{display:none}
.hero-media{display:block;position:absolute;inset:0;overflow:hidden;background:var(--navy-deep)}
.hero-media .hs{position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity .9s var(--ease);animation:none!important}
.hero-media .hs.on{opacity:1}
.hero-media .hs picture{position:absolute;inset:0;display:block}
.hero-media .hs img,.hero-media .hs video{width:100%;height:100%;object-fit:cover;display:block}
.hero-media .hs-vid video{object-position:center center}

/* photo framing (kept from before) */
.hero-media .hs:nth-child(2) img{object-position:center 58%}
.hero-media .hs:nth-child(3) img{object-position:center 34%}
.hero-media .hs:nth-child(4) img{object-position:center 40%}
.hero-media .hs:nth-child(5) img{object-position:center 46%}
.hero-media .hs:nth-child(6) img{object-position:center 42%}
.hero-media .hs:nth-child(7) img{object-position:center 40%}
.hero-media .hs:nth-child(8) img{object-position:center 44%}

/* drift only while a photo is on screen - 3s, so it has to read fast */
.hero-media .hs-img img{transform:scale(1.02)}
.hero-media .hs-img.on img{animation-duration:3.9s;animation-timing-function:cubic-bezier(.17,.6,.32,1);
  animation-fill-mode:forwards;animation-iteration-count:1}
.hero-media .kb0.on img{animation-name:hkIn}
.hero-media .kb1.on img{animation-name:hkLeft}
.hero-media .kb2.on img{animation-name:hkOut}
.hero-media .kb3.on img{animation-name:hkRight}
@keyframes hkIn   {from{transform:scale(1.01)} to{transform:scale(1.10)}}
@keyframes hkOut  {from{transform:scale(1.11)} to{transform:scale(1.02)}}
@keyframes hkLeft {from{transform:scale(1.09) translateX(2.4%)} to{transform:scale(1.09) translateX(-2.4%)}}
@keyframes hkRight{from{transform:scale(1.09) translateX(-2.4%)} to{transform:scale(1.09) translateX(2.4%)}}

/* ==================================================================
   V13 — 2s photos, prayer slide shown whole, no extra magnification
   ================================================================== */
.hero-media .hs-img.on img{animation-duration:2.7s}
/* prayer photo is already composed to 16:9 - never crop or magnify it further */
.hero-media .nokb img{object-fit:contain!important;object-position:center center!important;
  transform:none!important;animation:none!important;background:var(--navy-deep)}
.hero-media .nokb.on img{animation:none!important;transform:none!important}
/* re-map framing after the building slide was dropped */
.hero-media .hs:nth-child(2) img{object-position:center 58%}
.hero-media .hs:nth-child(4) img{object-position:center 40%}
.hero-media .hs:nth-child(5) img{object-position:center 46%}
.hero-media .hs:nth-child(6) img{object-position:center 40%}
.hero-media .hs:nth-child(7) img{object-position:center 44%}

/* V14 — prayer slide full-bleed, no panels */
.hero-media .nokb img{object-fit:cover!important;object-position:center 52%!important;background:none}

/* ==================================================================
   V15 — story sequence: city -> people -> life -> prayer -> city
   ================================================================== */
.hero-media .hs img,.hero-media .hs video{object-fit:cover!important;background:none}
.hero-media .hs:nth-child(2) img{object-position:center 55%}
.hero-media .hs:nth-child(6) img{object-position:center 50%}
.hero-media .hs-vid video{object-position:center center}
.hero-media .hs-img.on img{animation-duration:3.8s}

/* V16 — schedule strip under the headline */
.hero-sched{display:flex;flex-wrap:wrap;gap:8px 26px;max-width:none}
.hero-sched span{display:inline-flex;align-items:baseline;gap:8px;font-size:1rem;
  color:rgba(255,255,255,.94);letter-spacing:.005em}
.hero-sched b{font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold,#FFD9A0);font-weight:800}
.hero h1 .ln>i{font-size:clamp(2.5rem,6.2vw,5.6rem)}
@media(max-width:700px){
  .hero-sched{flex-direction:column;gap:7px}
  .hero-sched span{font-size:.94rem}
}

/* ==================================================================
   V17 — subpages
   ================================================================== */
body.subpage{padding-top:0}
.pagehead{background:var(--navy-deep);color:#fff;padding:118px 0 62px;position:relative;overflow:hidden}
.pagehead::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--red)}
.pagehead .eyebrow{color:#FFD9A0}
.pagehead h1{color:#fff;font-size:clamp(2.6rem,6vw,4.9rem);line-height:.94;margin:8px 0 0}
.pagehead .lead{color:rgba(255,255,255,.8);margin-top:18px;max-width:56ch}
.center{text-align:center}
.cta-band{background:var(--navy-deep);color:#fff;padding:76px 0}
.cta-band h2,.cta-band .lead{color:#fff}
.cta-band .lead{opacity:.82;margin-bottom:26px}

.pills{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:22px;margin-top:40px}
.pill{background:var(--cream);padding:30px 28px 32px;position:relative;border-top:4px solid var(--red)}
.pill-n{font-family:'Anton',sans-serif;font-size:2.5rem;color:var(--sand-deep);line-height:1;display:block}
.pill h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:1.34rem;margin:6px 0 3px;letter-spacing:.01em}
.pill-ref{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--red);font-weight:800}
.pill p{margin-top:13px;font-size:.96rem;line-height:1.62}

.faith{list-style:none;counter-reset:f;margin:38px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:2px}
.faith li{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:20px 22px;background:var(--sand)}
.faith li span{font-family:'Anton',sans-serif;color:var(--red);font-size:1.16rem}
.faith li p{margin:0;font-size:.95rem;line-height:1.6}

.times{margin-top:36px;border-top:1px solid var(--sand-deep)}
.time-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:19px 4px;border-bottom:1px solid var(--sand-deep)}
.time-row b{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:1.2rem;letter-spacing:.01em}
.time-row span{font-size:1.02rem;color:var(--navy);font-weight:700;white-space:nowrap}

.faqs{margin-top:38px;max-width:860px}
.faq{border-bottom:1px solid var(--sand-deep);padding:4px 0}
.faq summary{cursor:pointer;padding:19px 4px;font-family:'Anton',sans-serif;font-weight:400;
  text-transform:uppercase;font-size:1.1rem;letter-spacing:.012em;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.5rem;color:var(--red);line-height:1;flex-shrink:0}
.faq[open] summary::after{content:'\2212'}
.faq p{padding:0 4px 20px;margin:0;font-size:1rem;line-height:1.66;max-width:64ch}

.give-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px;margin-top:40px}
.give-card{background:var(--sand);padding:30px 28px 32px;border-top:4px solid var(--navy-deep)}
.give-card h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:1.4rem;margin:0 0 12px}
.give-card p{font-size:.97rem;line-height:1.62}
.zelle-out{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.zelle-out code{background:var(--cream);padding:9px 14px;font-size:.95rem;font-weight:700}
.btn-line{background:none;border:1px solid var(--ink);color:var(--ink);margin-top:14px;cursor:pointer}
.btn-line:hover{background:var(--ink);color:var(--cream)}

.prose{max-width:70ch}
.prose p{font-size:1.02rem;line-height:1.72;margin-bottom:19px}
@media(max-width:700px){
  .pagehead{padding:96px 0 46px}
  .faith{grid-template-columns:1fr}
  .time-row{flex-direction:column;gap:3px}
}

/* ==================================================================
   V18 — full-frame clips, address link, footer strapline
   ================================================================== */
/* vertical clips shown whole on a solid field - no crop, no blur */
.hero-media .hs-vid.clip video{object-fit:contain!important;background:var(--navy-deep)}
.hero-media .hs-vid.clip{background:var(--navy-deep)}

.addr-link{display:inline-flex;flex-direction:column;gap:2px;text-decoration:none;
  padding:20px 32px;border:1px solid rgba(255,255,255,.28);margin-top:8px;
  transition:background .3s var(--ease),border-color .3s}
.addr-link span{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  color:#fff;font-size:1.5rem;line-height:1.12;letter-spacing:.01em}
.addr-link em{font-style:normal;font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;
  color:#FFD9A0;font-weight:800;margin-top:9px}
.addr-link:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.5)}
.sec-sand .addr-link{border-color:var(--sand-deep)}
.sec-sand .addr-link span{color:var(--ink)}
.sec-sand .addr-link em{color:var(--red)}
.sec-sand .addr-link:hover{background:var(--cream)}

.foot-tag{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  color:#FFD9A0;margin:14px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:11px}
.chip{border:1px solid var(--sand-deep);border-radius:999px;padding:10px 20px;
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--ink)}
/* V19 — clips fill the hero again */
.hero-media .hs-vid video{object-fit:cover!important;background:none}

/* V20 — giving headline */
.give-head .tithe{font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:.96;color:#fff;
  text-transform:uppercase;margin:8px 0 0}
.give-head .scripture{color:#fff;opacity:.9;font-size:.96rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;margin-top:18px}


/* ==================================================================
   V21 — white schedule labels, white badge lettering
   ================================================================== */
/* hero schedule strip: day labels white, not gold */
.hero-sched b{color:#fff}

/* rotating badge: lettering white (CSS beats the SVG fill attribute) */
.badge text{fill:#fff}
.badge svg{filter:drop-shadow(0 1px 2px rgba(8,20,36,.55))}


/* ==================================================================
   V22 — badge identical site-wide, phone under address link
   ================================================================== */
/* badge: no disc on any page (matches homepage). White lettering needs a
   dark halo so it still reads when it floats over cream/sand sections. */
.badge-disc{display:none}
.badge text{fill:#fff}
.badge svg{filter:
  drop-shadow(0 0 2px rgba(8,20,36,.85))
  drop-shadow(0 1px 3px rgba(8,20,36,.65))}
.badge-core img{filter:drop-shadow(0 2px 5px rgba(8,20,36,.45))}

/* phone sits directly beneath the tappable address block, centred */
.addr-phone{max-width:none;margin:18px auto 0;text-align:center;
  font-size:1.02rem;line-height:1.5;color:var(--ink)}
.addr-phone a{color:var(--red);font-weight:800;text-decoration:none;
  border-bottom:1px solid rgba(196,22,42,.38)}
.addr-phone a:hover{border-bottom-color:var(--red)}
.sec-navy .addr-phone,.cta-band .addr-phone{color:rgba(255,255,255,.9)}
.sec-navy .addr-phone a,.cta-band .addr-phone a{color:#FFD9A0;
  border-bottom-color:rgba(255,217,160,.42)}


/* ==================================================================
   V23 — hero triptych: three portrait clips, full frame, no crop
   ================================================================== */
/* V19 forced object-fit:cover on every hero video. The triptych columns
   must override that with contain so the whole frame is visible. */
.hero-media .hs-trip{display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--navy-deep);width:100%;height:100%}
.hero-media .hs-trip video{width:100%;height:100%;min-width:0;display:block;
  object-fit:contain!important;background:var(--navy-deep)}

/* phones: one clip, shown whole — three columns would be unreadably narrow */
@media(max-width:700px){
  .hero-media .hs-trip{grid-template-columns:1fr}
  .hero-media .hs-trip video:nth-child(n+2){display:none}
}


/* ==================================================================
   V24 — triptych removed; clips are individual full-bleed pan slides
   ================================================================== */
/* V23's .hs-trip rules are inert now (no .hs-trip element exists).
   Each clip is its own 3s slide, encoded 1920x1080 with the crop window
   travelling the full height of the portrait frame — same treatment as the
   monument videos. V19's object-fit:cover still applies and is correct. */
.hero-media .hs-vid video{object-fit:cover!important;object-position:center center}

/* pastors photo on the About page */
.pastor-card{margin:34px 0 0;max-width:720px}
.pastor-card img{aspect-ratio:3/2;object-fit:cover;object-position:center 30%}
@media(max-width:780px){.pastor-card{max-width:none}}


/* ==================================================================
   V25 — mobile: bottom tab bar + touch polish
   ================================================================== */
.tabbar{display:none}

@media(max-width:780px){
  /* ---- persistent bottom tabs ---- */
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:140;
    background:var(--cream);border-top:1px solid var(--sand-deep);
    box-shadow:0 -10px 28px -14px rgba(22,18,14,.4);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;min-height:58px;padding:8px 2px 7px;text-decoration:none;
    color:var(--warm-gray);-webkit-tap-highlight-color:transparent}
  .tabbar svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;display:block}
  .tabbar span{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800}
  .tabbar .tab.on{color:var(--red)}
  .tabbar .tab.on svg{stroke-width:2}
  .tabbar .tab:active{background:var(--sand)}

  /* content must clear the bar */
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}

  /* the rotating badge collides with the tab bar — the tabs replace it */
  .badge{display:none}

  /* ---- hero: leave room for the tabs, keep the CTA reachable ---- */
  .hero{min-height:clamp(520px,80vh,720px)}
  /* the tab bar is fixed to the viewport bottom, so it sits over the hero
     CTAs when the page is scrolled to the top — clear it */
  .hero-in{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  /* the open menu must win over the tab bar on short screens */
  .hdr{z-index:150}
  .nav{z-index:150}
  .hero h1 .ln>i{font-size:clamp(2.1rem,8.4vw,3.2rem)}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 auto;text-align:center;padding:15px 18px}

  /* ---- touch targets ---- */
  .nav a{padding:16px 0;font-size:1rem}
  .btn{padding:15px 22px}
  .addr-link{padding:18px 24px;width:100%}
  .addr-link span{font-size:1.24rem}

  /* ---- no sideways scroll ---- */
  html,body{max-width:100%;overflow-x:hidden}
  .wrap{padding-left:20px;padding-right:20px}
  img,video,picture,svg{max-width:100%}

  /* ---- gallery: one clear card per row ---- */
  .galgrid{grid-template-columns:1fr;gap:14px;margin-top:26px}
  .galcard{aspect-ratio:3/2}
  .galcard-txt{padding:16px 18px 15px}
  .galcard-txt h3{font-size:1.18rem}

  /* ---- sections breathe less on a phone ---- */
  .sec{padding-top:52px;padding-bottom:52px}
  .pastor-card{margin-top:24px}
}

@media(max-width:420px){
  .tabbar span{font-size:.53rem;letter-spacing:.06em}
  .tabbar svg{width:19px;height:19px}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
}


/* ==================================================================
   V26 — mobile: 9:16 congregation photo, full width kept
   ================================================================== */
/* The hero itself is UNCHANGED — tall, full-bleed, headline over the media,
   exactly as V25 left it. Do not restructure it again; Drew reverted that.
   Only the photo is treated, and it is treated in the IMAGE: index.html serves
   a 2:1-tall build via <picture>. It is deliberately TALLER than 9:16 (aspect
   0.50) because some phone heroes are narrower than 9:16 — at exactly 9:16
   `cover` was cropping the sides and clipping the outermost people. At 0.50 the
   crop is always vertical, so the full width, all 33, is guaranteed. */
@media(max-width:780px){
  .hero-media .hs-img img{object-fit:cover!important;
    object-position:center 53%!important}
}


/* ==================================================================
   V27 — ghost button on dark sections
   ================================================================== */
/* .btn-ghost is ink (near-black) on ink — invisible against the navy band */
.sec-navy .btn-ghost,.cta-band .btn-ghost,.hero .btn-ghost{
  border-color:rgba(255,255,255,.62);color:#fff}
.sec-navy .btn-ghost:hover,.cta-band .btn-ghost:hover,.hero .btn-ghost:hover{
  background:#fff;color:var(--navy-deep);border-color:#fff}