/* ══════════════════════════════════════════════════════════════
   BURNING BUSH BAPTIST CHURCH — MASTER STYLESHEET
   Revision 2 · July 2026

   BRAND
     Burgundy  #8a1712   lines, borders, primary actions
     Gold      #fdbc12   accents, key headings in dark mode
     Georgia (headings) · Open Sans (body)

   WHAT CHANGED IN THIS REVISION
     · Real elevation system — three shadow depths plus colored glows
     · Gradient surfaces on cards, buttons, icon tiles and headers
     · Inset top highlights so every raised surface catches light
     · Hover states on every interactive element (lift, glow, shift)
     · Higher contrast between page, card and raised surfaces
     · Mobile never collapses to a single column — two minimum
     · Reduced-motion and keyboard-focus support

   HOW TO EDIT SAFELY
     Colors, shadows, gradients and spacing all live in the token
     block below. Change a token once and it updates everywhere.
     ══════════════════════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ─────────────────────────────────────────────
   TOKENS — LIGHT MODE
   ───────────────────────────────────────────── */
:root{
  /* Brand */
  --burg:#8a1712; --burg-lt:#a81e17; --burg-dk:#63100c;
  --gold:#fdbc12; --gold-lt:#ffd24a; --gold-dk:#cf9a08;

  /* Surfaces — deliberately stepped so cards separate from the page */
  --bg:#E5E0D7;          /* page — darker than before so cards pop */
  --surface:#FBF9F5;     /* card / raised */
  --surface-2:#F2EDE3;   /* recessed panel */
  --white:#FFFFFF;
  --cream:#F5F0E6;

  /* Type */
  --text:#191512; --text-m:#5A534B; --text-l:#8B8378;
  --bdr:#CFC7B9; --bdr-soft:#E2DACC;

  /* Chrome */
  --hdr-bg:rgba(251,249,245,.88);
  --ftr-bg:#8a1712;
  --ftr-text:rgba(255,255,255,.82);

  /* Gradients */
  --g-burg:linear-gradient(145deg,#a81e17 0%,#8a1712 55%,#6b110d 100%);
  --g-gold:linear-gradient(145deg,#ffd24a 0%,#fdbc12 55%,#dfa30a 100%);
  --g-card:linear-gradient(180deg,#FFFFFF 0%,#F7F3EB 100%);
  --g-panel:linear-gradient(180deg,#F7F2E8 0%,#EDE7DA 100%);
  --g-rule:linear-gradient(90deg,transparent,var(--burg) 18%,var(--gold) 82%,transparent);

  /* Elevation */
  --sh-1:0 1px 2px rgba(35,25,18,.05), 0 2px 6px rgba(35,25,18,.05);
  --sh-2:0 2px 4px rgba(35,25,18,.06), 0 10px 26px rgba(35,25,18,.09);
  --sh-3:0 4px 10px rgba(35,25,18,.08), 0 20px 48px rgba(35,25,18,.14);
  --sh-burg:0 6px 20px rgba(138,23,18,.28);
  --sh-gold:0 6px 20px rgba(207,154,8,.34);
  --hl-top:inset 0 1px 0 rgba(255,255,255,.85);
  --hl-ring:inset 0 0 0 1px rgba(255,255,255,.5);

  /* Motion */
  --ease:cubic-bezier(.2,.8,.25,1);
  --fast:.18s; --mid:.32s;

  /* Type stacks */
  --hd:Georgia,'Times New Roman',serif;
  --bd:'Open Sans',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ─────────────────────────────────────────────
   TOKENS — DARK MODE
   Burgundy and gold both stay in play. Only key
   headings flip to gold; icons, rules, dots and
   date numerals stay burgundy so the palette
   keeps its variety.
   ───────────────────────────────────────────── */
html.dark{
  --burg:#c4291f; --burg-lt:#e03a2c; --burg-dk:#8a1712;

  --bg:#0B0A09;
  --surface:#17140F;
  --surface-2:#100E0B;
  --white:#131109;
  --cream:#17140F;

  --text:#EDE7DD; --text-m:#A39A8D; --text-l:#6E655A;
  --bdr:#332C22; --bdr-soft:#241F18;

  --hdr-bg:rgba(19,17,13,.86);
  --ftr-bg:#0A0908;
  --ftr-text:rgba(255,255,255,.66);

  --g-burg:linear-gradient(145deg,#c4291f 0%,#9c1c14 55%,#71120d 100%);
  --g-gold:linear-gradient(145deg,#ffd24a 0%,#fdbc12 55%,#c79408 100%);
  --g-card:linear-gradient(180deg,#1D1913 0%,#141109 100%);
  --g-panel:linear-gradient(180deg,#171410 0%,#100E0A 100%);

  --sh-1:0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
  --sh-2:0 2px 6px rgba(0,0,0,.55), 0 12px 30px rgba(0,0,0,.5);
  --sh-3:0 4px 12px rgba(0,0,0,.6), 0 24px 56px rgba(0,0,0,.6);
  --sh-burg:0 6px 24px rgba(196,41,31,.34);
  --sh-gold:0 6px 24px rgba(253,188,18,.26);
  --hl-top:inset 0 1px 0 rgba(255,255,255,.07);
  --hl-ring:inset 0 0 0 1px rgba(255,255,255,.05);
}

html{scroll-behavior:smooth}
body{
  font-family:var(--bd);color:var(--text);line-height:1.7;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
  transition:background var(--mid) var(--ease),color var(--mid) var(--ease);
}
/* ── The layer the whole site sits on ──
   Three stacked layers: a fine grain, a warm glow behind the page,
   and the base colour. Fixed so it does not scroll with content. */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 110% 70% at 50% -8%, rgba(138,23,18,.13) 0%, transparent 62%),
    radial-gradient(ellipse 90% 60% at 50% 108%, rgba(207,154,8,.11) 0%, transparent 60%),
    linear-gradient(178deg, #EFEAE0 0%, #E2DCD1 46%, #D8D1C4 100%);
  background-size:180px 180px, 100% 100%, 100% 100%, 100% 100%;
  transition:background .4s var(--ease);
}
html.dark body::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 100% 62% at 50% -6%, rgba(196,41,31,.2) 0%, transparent 58%),
    radial-gradient(ellipse 86% 55% at 50% 106%, rgba(253,188,18,.09) 0%, transparent 58%),
    linear-gradient(178deg, #14120F 0%, #0B0A08 52%, #050505 100%);
  background-size:180px 180px, 100% 100%, 100% 100%, 100% 100%;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* Keyboard focus — visible for keyboard users, invisible for mouse */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* The page shell now floats above the background */
.page{
  max-width:1500px;margin:0 auto;
  background:var(--white);
  box-shadow:var(--sh-3);
  transition:background var(--mid) var(--ease);
}
/* Long-form reading stays comfortable even on a wide monitor */
.prose,.mission-line,.tl-text{max-width:78ch}
@media(min-width:1360px){
  .content{padding-left:clamp(24px,4vw,64px);padding-right:clamp(24px,4vw,64px)}
}

/* ══════════════════════════════════════════════
   HEADER — frosted glass, gradient hairline
   ══════════════════════════════════════════════ */
.hdr{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:0 clamp(16px,3vw,34px);height:70px;
  position:sticky;top:0;z-index:1000;
  background:var(--hdr-bg);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--bdr-soft);
  box-shadow:0 1px 0 rgba(0,0,0,.03), 0 6px 24px rgba(35,25,18,.07);
  transition:background var(--mid) var(--ease),box-shadow var(--mid) var(--ease);
}
.hdr::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:linear-gradient(90deg,var(--burg),var(--gold) 45%,var(--gold) 55%,var(--burg));
}
.hdr-logo{display:flex;align-items:center;gap:11px;flex:0 0 auto;min-width:0;transition:transform var(--fast) var(--ease)}
.hdr-logo:hover{transform:translateY(-1px)}
.hdr-logo img{height:44px;width:auto;filter:drop-shadow(0 2px 5px rgba(138,23,18,.28))}
.logo-txt{font-family:var(--hd);line-height:1.03}
.logo-txt .t1{display:block;font-size:.8rem;font-weight:700;color:var(--burg);letter-spacing:.055em}
.logo-txt .t2{display:block;font-size:1.2rem;font-weight:700;color:var(--burg);letter-spacing:.03em}
html.dark .logo-txt .t1,html.dark .logo-txt .t2{color:var(--gold)}

.hdr-right{display:flex;align-items:center;min-width:0}
.nav{display:flex;align-items:center;min-width:0}
.nav-item{
  position:relative;font-family:var(--bd);font-weight:700;font-size:12px;
  color:var(--text-m);letter-spacing:.09em;text-transform:uppercase;
  padding:0 13px;height:70px;display:flex;align-items:center;
  cursor:pointer;background:none;border:none;white-space:nowrap;
  transition:color var(--fast) var(--ease);
}
/* Underline grows outward from the center on hover */
.nav-item::after{
  content:'';position:absolute;left:50%;right:50%;bottom:20px;height:2px;
  background:var(--gold);border-radius:2px;
  transition:left var(--mid) var(--ease),right var(--mid) var(--ease);
}
.nav-item:hover{color:var(--burg)}
html.dark .nav-item:hover{color:var(--gold)}
.nav-item:hover::after{left:13px;right:13px}
.nav-item .arr{font-size:8px;margin-left:4px;transition:transform var(--fast) var(--ease)}

.dd{position:relative;display:flex;align-items:center}
.dd:hover .nav-item{color:var(--burg)}
html.dark .dd:hover .nav-item{color:var(--gold)}
.dd:hover .nav-item::after{left:13px;right:13px}
.dd:hover .nav-item .arr{transform:rotate(180deg)}
.dd::after{content:'';position:absolute;top:100%;left:0;right:0;height:8px;display:none}
.dd:hover::after{display:block}
.dd-pan{
  display:none;position:absolute;top:70px;left:0;min-width:214px;z-index:200;
  background:var(--surface);
  border:1px solid var(--bdr-soft);border-top:3px solid var(--gold);
  border-radius:0 0 6px 6px;
  box-shadow:var(--sh-3);
  overflow:hidden;
}
.dd:hover .dd-pan{display:block;animation:ddIn var(--mid) var(--ease)}
@keyframes ddIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.dd-pan a{
  display:block;padding:12px 18px;font-size:12px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text);
  border-bottom:1px solid var(--bdr-soft);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),padding-left var(--fast) var(--ease);
}
.dd-pan a:last-child{border-bottom:none}
.dd-pan a:hover{background:var(--g-panel);color:var(--burg);padding-left:24px}
html.dark .dd-pan a:hover{color:var(--gold)}

.give-btn{
  font-family:var(--bd);font-weight:800;font-size:13px;letter-spacing:.11em;
  text-transform:uppercase;color:#231A06;
  background:var(--g-gold);
  padding:11px 28px;margin-left:10px;border:none;border-radius:4px;
  cursor:pointer;display:flex;align-items:center;
  box-shadow:var(--sh-gold),var(--hl-top);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),filter var(--fast) var(--ease);
}
.give-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(207,154,8,.48),var(--hl-top);filter:saturate(115%)}
.give-btn:active{transform:translateY(0)}

.dm-toggle{
  background:var(--surface-2);border:1px solid var(--bdr-soft);border-radius:50%;
  cursor:pointer;width:38px;height:38px;font-size:15px;color:var(--text-m);
  display:flex;align-items:center;justify-content:center;margin-left:10px;
  box-shadow:var(--sh-1),var(--hl-top);
  transition:all var(--fast) var(--ease);
}
.dm-toggle:hover{color:var(--gold);border-color:var(--gold);transform:rotate(-18deg) scale(1.08);box-shadow:var(--sh-gold)}
html.dark .dm-toggle .dm-sun{display:none}
html:not(.dark) .dm-toggle .dm-moon{display:none}

.ham{
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--bdr-soft);border-radius:6px;
  padding:9px 10px;margin-left:8px;box-shadow:var(--sh-1),var(--hl-top);
  transition:all var(--fast) var(--ease);
}
.ham:hover{border-color:var(--gold)}
.ham span{display:block;width:20px;height:2px;background:var(--burg);border-radius:2px;transition:all var(--fast) var(--ease)}
html.dark .ham span{background:var(--gold)}

/* ══════════════════════════════════════════════
   HERO CAROUSEL
   ══════════════════════════════════════════════ */
.hero{
  position:relative;margin:18px;overflow:hidden;height:0;padding-bottom:41%;
  background:#1A1512;border-radius:8px;
  box-shadow:var(--sh-3),inset 0 0 0 1px rgba(255,255,255,.06);
}
.hero-track{position:absolute;inset:0;display:flex;width:500%;height:100%;transition:transform .85s var(--ease)}
.hero-slide{width:20%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}
.hero-slide .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02)}
/* Layered scrim — darker at the edges, lighter behind the type */
.hero-slide::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%,rgba(0,0,0,.18) 0%,rgba(0,0,0,.52) 100%),
    linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.16) 42%,rgba(0,0,0,.62) 100%);
}
.hero-txt{position:relative;z-index:2;text-align:center;padding:14px 24px}
.hero-txt .sub{
  font-family:var(--hd);font-size:clamp(.9rem,1.6vw,1.24rem);
  color:var(--gold);text-transform:uppercase;letter-spacing:.28em;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.hero-txt h1{
  font-family:var(--hd);font-weight:700;
  font-size:clamp(2.2rem,5.6vw,4.4rem);color:#fff;line-height:.94;
  text-transform:uppercase;letter-spacing:.02em;margin:6px 0 16px;
  text-shadow:0 3px 10px rgba(0,0,0,.55), 0 12px 40px rgba(0,0,0,.4);
}
.hero-emblem{width:clamp(58px,10vw,100px);margin:0 auto;position:relative}
/* Warm glow behind the emblem */
.hero-emblem::before{
  content:'';position:absolute;inset:-46%;border-radius:50%;
  background:radial-gradient(circle,rgba(253,188,18,.32) 0%,transparent 68%);
}
.hero-emblem img{width:100%;height:auto;position:relative;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}
.hero-arr{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:48px;height:48px;border-radius:50%;
  background:rgba(20,16,12,.4);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(253,188,18,.34);color:var(--gold);
  font-size:1.6rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--fast) var(--ease);
}
.hero-arr:hover{background:rgba(138,23,18,.82);border-color:var(--gold);transform:translateY(-50%) scale(1.1);box-shadow:var(--sh-gold)}
.hero-arr.p{left:14px}.hero-arr.n{right:14px}

/* ══════════════════════════════════════════════
   WORSHIP BLOCK
   ══════════════════════════════════════════════ */
.worship{
  display:flex;margin:0 18px 18px;overflow:hidden;border-radius:8px;
  box-shadow:var(--sh-2),var(--hl-ring);
}
.w-photo{
  flex:0 0 47%;min-height:400px;position:relative;
  background:linear-gradient(150deg,#3A2410,#1C1008);
  background-size:cover;background-position:center;
}
.w-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.w-body{
  flex:1;min-height:390px;background:var(--g-card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:44px 32px;text-align:center;
  box-shadow:var(--hl-top);
}
.w-body h2{
  font-family:var(--hd);font-weight:700;font-size:clamp(1.45rem,2.9vw,2.2rem);
  color:var(--burg);letter-spacing:.02em;line-height:1.04;
}
html.dark .w-body h2{color:var(--gold)}
.w-body .wsub{
  font-family:var(--hd);font-weight:700;font-size:clamp(.9rem,1.3vw,1.06rem);
  color:var(--text);letter-spacing:.09em;text-transform:uppercase;
}
.wline{width:72px;height:3px;margin:11px auto;border-radius:2px;background:var(--g-gold);box-shadow:0 1px 5px rgba(207,154,8,.5)}
/* Divider between the Sunday and Wednesday groups */
.wline.sm{width:44px;height:2px;margin:20px auto 16px;background:var(--bdr);box-shadow:none;opacity:.9}
.w-body .wnote{
  font-size:.82rem;font-style:italic;color:var(--text-l);margin-top:5px;line-height:1.5;
}
.w-body .wlbl{font-weight:700;font-size:.96rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.w-body .wtm{font-size:.96rem;color:var(--text-m);margin:3px 0}
/* A second block of times, for the midweek gathering */
.w-body .wgroup{margin-top:18px;padding-top:16px;border-top:1px solid var(--bdr-soft);width:100%;max-width:340px}
.w-body .wgroup:first-of-type{margin-top:0;padding-top:0;border-top:none}
.w-body .wtm strong{color:var(--burg);font-weight:700}
html.dark .w-body .wtm strong{color:var(--gold)}
.w-body .wtag{
  display:inline-block;margin-left:7px;font-family:var(--bd);font-size:9.5px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;padding:2px 7px;border-radius:3px;
  background:var(--g-gold);color:var(--burg-dk);vertical-align:2px;
}
.wbtns{display:flex;gap:11px;margin-top:20px;flex-wrap:wrap;justify-content:center}

/* ══════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════ */
.bf,.bo,.bva{
  display:inline-block;font-family:var(--bd);font-weight:700;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;border-radius:4px;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),
             background var(--fast) var(--ease),color var(--fast) var(--ease),
             border-color var(--fast) var(--ease),filter var(--fast) var(--ease);
}
.bf{
  color:#fff;background:var(--g-burg);padding:12px 26px;
  border:1px solid var(--burg-dk);
  box-shadow:var(--sh-burg),inset 0 1px 0 rgba(255,255,255,.16);
}
.bf:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(138,23,18,.42),inset 0 1px 0 rgba(255,255,255,.22);filter:saturate(118%)}
.bf:active{transform:translateY(0)}

.bo{
  color:var(--burg);background:var(--surface);padding:12px 26px;
  border:2px solid var(--burg);
  box-shadow:var(--sh-1),var(--hl-top);
}
.bo:hover{background:var(--g-gold);border-color:var(--gold-dk);color:#231A06;transform:translateY(-2px);box-shadow:var(--sh-gold)}
.bo:active{transform:translateY(0)}
html.dark .bo{color:var(--gold);border-color:var(--gold);background:transparent}
html.dark .bo:hover{color:#231A06;background:var(--g-gold)}

.bva{
  display:block;width:172px;margin:22px auto 0;text-align:center;
  color:#fff;background:var(--g-burg);padding:11px 18px;border-radius:22px;
  border:1px solid var(--burg-dk);
  box-shadow:var(--sh-burg),inset 0 1px 0 rgba(255,255,255,.16);
}
.bva:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(138,23,18,.42)}

/* ══════════════════════════════════════════════
   UPCOMING EVENTS
   ══════════════════════════════════════════════ */
.events{padding:34px 18px 24px}
.ev-h{
  text-align:center;font-family:var(--hd);font-weight:700;font-size:1.5rem;
  letter-spacing:.09em;color:var(--burg);text-transform:uppercase;
  padding:14px 0;margin-bottom:26px;position:relative;
}
html.dark .ev-h{color:var(--gold)}
.ev-h::before,.ev-h::after{content:'';position:absolute;left:8%;right:8%;height:2px;background:var(--g-rule)}
.ev-h::before{top:0}.ev-h::after{bottom:0}

.evc{
  display:flex;overflow:hidden;margin:0 auto 16px;max-width:800px;
  background:var(--g-card);border-radius:8px;
  border:1px solid var(--bdr-soft);
  box-shadow:var(--sh-1),var(--hl-top);
  transition:transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease),border-color var(--mid) var(--ease);
}
.evc:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--gold)}
.evd{
  flex:0 0 104px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px 8px;background:var(--g-panel);
  border-right:1px solid var(--bdr-soft);
  box-shadow:inset -6px 0 12px -8px rgba(35,25,18,.2);
}
.evd .mo{
  font-weight:700;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:var(--g-burg);padding:4px 11px;border-radius:3px;
  box-shadow:0 2px 7px rgba(138,23,18,.34);
}
.evd .dy{font-family:var(--hd);font-weight:700;font-size:2.9rem;color:var(--burg);line-height:1.05;margin-top:3px}
.evi{flex:1;padding:16px 20px;min-width:0}
.evi h4{
  font-family:var(--hd);font-weight:700;font-size:1.08rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--burg);margin-bottom:5px;
}
html.dark .evi h4{color:var(--gold)}
.evi .desc{font-size:.88rem;color:var(--text-m);line-height:1.6;margin-bottom:9px}
.evi .meta{display:flex;gap:18px;font-size:12px;font-weight:700;color:var(--text);flex-wrap:wrap}
.evi .meta span{display:inline-flex;align-items:center;gap:5px}
.evi .meta .fa-clock{color:var(--burg)}
.evi .meta .fa-location-dot{color:var(--gold-dk)}
html.dark .evi .meta .fa-location-dot{color:var(--gold)}
.ev-loading{text-align:center;padding:26px;color:var(--text-l);font-size:.9rem}

/* ══════════════════════════════════════════════
   NEW HERE PANEL
   ══════════════════════════════════════════════ */
.new-here{
  margin:0 18px 18px;padding:40px 32px;text-align:center;border-radius:8px;
  background:var(--g-panel);
  border:1px solid var(--bdr-soft);
  box-shadow:var(--sh-1),var(--hl-top);
  position:relative;overflow:hidden;
}
.new-here::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--burg),var(--gold))}
.new-here h3{font-family:var(--hd);font-weight:700;font-size:1.6rem;color:var(--burg);margin-bottom:10px}
html.dark .new-here h3{color:var(--gold)}
.new-here p{font-size:.96rem;color:var(--text-m);line-height:1.75;max-width:640px;margin:0 auto 22px}

/* ══════════════════════════════════════════════
   QUICK LINK TILES
   ══════════════════════════════════════════════ */
.quick{padding:16px 18px 40px}
.quick-title{
  font-family:var(--hd);font-weight:700;font-size:1.3rem;color:var(--burg);
  text-align:center;margin-bottom:22px;
}
html.dark .quick-title{color:var(--gold)}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.qcard{
  background:var(--g-card);border:1px solid var(--bdr-soft);border-radius:8px;
  padding:30px 20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:13px;
  box-shadow:var(--sh-1),var(--hl-top);
  position:relative;overflow:hidden;
  transition:transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease),border-color var(--mid) var(--ease);
}
/* Signature: burgundy-to-gold bar sweeps in from the left on hover */
.qcard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--burg),var(--gold));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--mid) var(--ease);
}
.qcard:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--gold)}
.qcard:hover::before{transform:scaleX(1)}
.qcard .q-icon{
  width:60px;height:60px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  transition:transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease);
}
.qcard:hover .q-icon{transform:scale(1.09) rotate(-4deg)}
.q-icon.red{background:var(--g-burg);color:#fff;box-shadow:var(--sh-burg),inset 0 1px 0 rgba(255,255,255,.2)}
.q-icon.gold{background:var(--g-gold);color:var(--burg-dk);box-shadow:var(--sh-gold),inset 0 1px 0 rgba(255,255,255,.5)}
.q-icon.burg{background:linear-gradient(145deg,#7a130e,#4c0b07);color:var(--gold);box-shadow:var(--sh-burg),inset 0 1px 0 rgba(255,255,255,.14)}
.q-icon.salv{
  background:linear-gradient(180deg,#FFFFFF,#F0E9DA);color:var(--burg);
  border:2px solid var(--burg);box-shadow:var(--sh-2),var(--hl-top);
}
html.dark .q-icon.salv{background:var(--g-card);color:var(--gold);border-color:var(--gold);box-shadow:var(--sh-gold)}
.qcard h4{font-family:var(--hd);font-weight:700;font-size:1.02rem;color:var(--text);line-height:1.24}
.qcard p{font-size:.83rem;color:var(--text-m);line-height:1.55}

/* ══════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════ */
.crumb{
  padding:13px clamp(16px,3vw,34px) 0;font-size:11.5px;color:var(--text-l);
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;
}
.crumb a{color:var(--text-m);transition:color var(--fast) var(--ease)}
.crumb a:hover{color:var(--burg)}
html.dark .crumb a:hover{color:var(--gold)}

/* ══════════════════════════════════════════════
   PAGE HERO (inner pages)
   ══════════════════════════════════════════════ */
.page-hero{
  margin:16px 18px;overflow:hidden;position:relative;min-height:268px;
  background-size:cover;background-position:center;
  display:flex;align-items:flex-end;border-radius:8px;
  box-shadow:var(--sh-2),inset 0 0 0 1px rgba(255,255,255,.06);
}
.page-hero::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.34) 52%,rgba(0,0,0,.78) 100%),
    radial-gradient(ellipse 90% 70% at 20% 100%,rgba(138,23,18,.34),transparent 70%);
}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero .ph-inner{position:relative;z-index:2;padding:34px clamp(20px,4vw,40px);width:100%}
.page-hero h1{
  font-family:var(--hd);font-weight:700;font-size:clamp(1.7rem,4.2vw,2.8rem);
  color:#fff;line-height:1.08;
  text-shadow:0 2px 8px rgba(0,0,0,.6), 0 10px 34px rgba(0,0,0,.45);
}
.page-hero h1 span{color:var(--gold)}

/* ══════════════════════════════════════════════
   CONTENT & TYPE
   ══════════════════════════════════════════════ */
.content{padding:0 clamp(16px,3vw,34px) 48px}
.page-title{
  font-family:var(--hd);font-weight:700;font-size:clamp(1.7rem,4vw,2.6rem);
  color:var(--burg);line-height:1.08;padding:28px 0 10px;margin-bottom:10px;
  border-bottom:4px solid transparent;
  border-image:linear-gradient(90deg,var(--burg),var(--gold)) 1;
  display:inline-block;
}
html.dark .page-title{color:var(--gold)}

.section{padding:34px 0;position:relative}
.section+.section::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--g-rule);opacity:.55;
}
.section-label{
  font-weight:800;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--burg);margin-bottom:9px;display:inline-flex;align-items:center;gap:9px;
}
.section-label::before{content:'';width:26px;height:2px;background:var(--g-gold);border-radius:2px}
html.dark .section-label{color:var(--gold)}
.section h2{
  font-family:var(--hd);font-weight:700;font-size:clamp(1.35rem,2.7vw,1.9rem);
  color:var(--text);line-height:1.2;margin-bottom:18px;letter-spacing:-.01em;
}
html.dark .section h2{color:var(--gold)}
.section h2 em{font-style:italic;color:var(--burg)}
html.dark .section h2 em{color:var(--gold-dk)}
.section h3{
  font-family:var(--hd);font-weight:700;font-size:1.18rem;color:var(--burg);
  margin:24px 0 8px;letter-spacing:-.005em;
}
html.dark .section h3{color:var(--gold)}

.prose{font-size:1rem;color:var(--text);line-height:1.85}
.prose+.prose{margin-top:18px}
.prose strong,.prose b{font-weight:700;color:var(--burg)}
html.dark .prose strong,html.dark .prose b{color:var(--gold)}
.prose em{font-style:italic}
.prose a{
  color:var(--burg);font-weight:700;
  background:linear-gradient(var(--gold),var(--gold)) no-repeat left bottom/0 2px;
  transition:background-size var(--mid) var(--ease),color var(--fast) var(--ease);
  padding-bottom:1px;
}
.prose a:hover{background-size:100% 2px}
html.dark .prose a{color:var(--gold)}

.pull{
  font-family:var(--hd);font-style:italic;font-weight:700;font-size:1.28rem;
  color:var(--burg);line-height:1.5;margin:30px 0;max-width:640px;
  padding:20px 26px;border-radius:0 8px 8px 0;
  background:var(--g-panel);
  border-left:4px solid var(--gold);
  box-shadow:var(--sh-1);
}
html.dark .pull{color:var(--gold)}
.mission-line{
  font-family:var(--hd);font-weight:700;font-size:clamp(1.04rem,2vw,1.26rem);
  color:var(--text);line-height:1.55;margin:32px 0 18px;
}
.mission-line em{color:var(--burg);font-style:normal;font-weight:700}
html.dark .mission-line em{color:var(--gold)}

.changing{text-align:center;padding:20px 0;font-family:var(--hd);font-weight:700;font-style:italic}
.changing span{display:block;margin:7px 0;color:var(--burg)}
html.dark .changing span{color:var(--gold)}
.changing .c1{font-size:1.44rem}.changing .c2{font-size:1.56rem}
.changing .c3{font-size:1.68rem}.changing .c4{font-size:1.68rem}
.oasis{
  text-align:center;padding:32px 0 10px;font-family:var(--hd);font-weight:700;
  font-size:clamp(1.34rem,3vw,1.9rem);color:var(--text);letter-spacing:.02em;
}
/* "A Place to Belong" tagline treatment */
.belong{
  text-align:center;margin:36px 0 8px;padding:30px 24px;border-radius:8px;
  background:var(--g-panel);border:1px solid var(--bdr-soft);
  box-shadow:var(--sh-1),var(--hl-top);position:relative;overflow:hidden;
}
.belong::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--burg),var(--gold))}
.belong span{
  display:block;font-family:var(--hd);font-style:italic;font-weight:700;
  font-size:clamp(1.5rem,3.6vw,2.2rem);color:var(--burg);letter-spacing:.01em;
}
html.dark .belong span{color:var(--gold)}
.belong small{display:block;margin-top:8px;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-l)}

/* ══════════════════════════════════════════════
   SCHEDULE TABLE — hover / tap descriptions
   ══════════════════════════════════════════════ */
.sched{
  margin:26px 0 8px;border-collapse:separate;border-spacing:0;width:100%;font-size:.94rem;
  border-radius:8px;overflow:hidden;box-shadow:var(--sh-2),var(--hl-ring);
}
.sched th{
  background:var(--g-burg);color:#fff;padding:14px 16px;text-align:left;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.sched td{padding:14px 16px;border-bottom:1px solid var(--bdr-soft);color:var(--text);background:var(--surface);transition:background var(--fast) var(--ease)}
.sched tr:nth-child(even) td{background:var(--surface-2)}
.sched tr:hover td{background:var(--cream)}
.sched .day{font-weight:700;color:var(--burg)}
html.dark .sched .day{color:var(--gold)}
/* Service name with a description that reveals on hover, focus or tap */
.sched .svc{position:relative;cursor:pointer}
.sched .svc .svc-name{border-bottom:1px dotted var(--text-l)}
.sched .svc .svc-desc{
  display:block;font-size:.8rem;color:var(--text-m);line-height:1.5;white-space:normal;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height var(--mid) var(--ease),opacity var(--mid) var(--ease),margin-top var(--mid) var(--ease);
}
.sched .svc:hover .svc-desc,
.sched .svc:focus-within .svc-desc,
.sched .svc.open .svc-desc{max-height:140px;opacity:1;margin-top:6px}

/* ══════════════════════════════════════════════
   TIMELINE
   ══════════════════════════════════════════════ */
.timeline{position:relative;padding-left:34px;margin:26px 0 12px}
.timeline::before{
  content:'';position:absolute;left:9px;top:8px;bottom:8px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold),var(--burg));
}
.tl-item{position:relative;padding-bottom:28px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{
  position:absolute;left:-31px;top:5px;width:17px;height:17px;border-radius:50%;
  background:var(--g-burg);border:3px solid var(--white);
  box-shadow:0 0 0 2px var(--gold),0 3px 8px rgba(138,23,18,.4);
}
.tl-year{font-weight:800;font-size:13px;letter-spacing:.11em;color:var(--burg);margin-bottom:4px}
html.dark .tl-year{color:var(--gold)}
.tl-text{font-size:.95rem;color:var(--text-m);line-height:1.78}
.tl-text strong{color:var(--text);font-weight:700}

/* ══════════════════════════════════════════════
   CARDS — ministries, outreach, features
   ══════════════════════════════════════════════ */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px;margin:26px 0 10px}
.card{
  background:var(--g-card);padding:24px 20px;border-radius:8px;
  border:1px solid var(--bdr-soft);display:block;position:relative;overflow:hidden;
  box-shadow:var(--sh-1),var(--hl-top);
  transition:transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease),border-color var(--mid) var(--ease);
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--burg),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform var(--mid) var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--gold)}
.card:hover::before{transform:scaleX(1)}
.card .c-icon{
  width:48px;height:48px;border-radius:10px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;font-size:1.24rem;
  background:var(--g-panel);color:var(--burg);
  border:1px solid var(--bdr-soft);
  box-shadow:var(--sh-1),var(--hl-top);
  transition:all var(--mid) var(--ease);
}
.card:hover .c-icon{background:var(--g-burg);color:#fff;border-color:var(--burg-dk);box-shadow:var(--sh-burg);transform:scale(1.06) rotate(-4deg)}
html.dark .card .c-icon{color:var(--gold)}
.card h4{font-family:var(--hd);font-weight:700;font-size:1.02rem;color:var(--burg);margin-bottom:7px;line-height:1.24}
html.dark .card h4{color:var(--gold)}
.card p{font-size:.87rem;color:var(--text-m);line-height:1.6}
.card .leader{
  font-size:.79rem;color:var(--text);font-weight:600;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--bdr-soft);
}
.card .scripture{font-family:var(--hd);font-style:italic;font-size:.82rem;color:var(--gold-dk);margin-top:4px}
html.dark .card .scripture{color:var(--gold)}

.tag{
  display:inline-block;margin-top:10px;font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;padding:4px 11px;border-radius:3px;
}
.tag-active{background:var(--g-gold);color:var(--burg-dk);box-shadow:0 2px 7px rgba(207,154,8,.36)}
.tag-past{background:var(--surface-2);color:var(--text-l);border:1px solid var(--bdr-soft)}

/* ══════════════════════════════════════════════
   MINISTRY DETAIL HEADER
   ══════════════════════════════════════════════ */
.ministry-intro{display:flex;gap:24px;align-items:flex-start;margin-bottom:16px}
.ministry-intro .m-icon{
  flex-shrink:0;width:66px;height:66px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;
  background:var(--g-gold);color:var(--burg-dk);margin-top:4px;
  box-shadow:var(--sh-gold),inset 0 1px 0 rgba(255,255,255,.55);
}
.ministry-intro .m-text{flex:1;min-width:0}
/* Scripture reference chip under a ministry heading */
.scripture-ref{
  display:inline-block;font-family:var(--hd);font-style:italic;font-size:.92rem;
  color:var(--burg);background:var(--g-panel);
  padding:5px 14px;border-radius:20px;margin-top:8px;
  border:1px solid var(--bdr-soft);box-shadow:var(--sh-1);
}
html.dark .scripture-ref{color:var(--gold)}
.leader-line{
  font-size:.9rem;color:var(--text);font-weight:600;margin-top:10px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.leader-line i{color:var(--burg)}
html.dark .leader-line i{color:var(--gold)}
/* Sub-section band used on the combined Next Generation page */
.subgroup{
  margin:30px 0;padding:26px 24px;border-radius:8px;
  background:var(--g-card);border:1px solid var(--bdr-soft);
  box-shadow:var(--sh-1),var(--hl-top);position:relative;overflow:hidden;
}
.subgroup::before{content:'';position:absolute;top:0;left:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--gold),var(--burg))}
.subgroup h3{
  font-family:var(--hd);font-weight:700;font-size:1.24rem;color:var(--burg);
  margin:0 0 4px;display:flex;align-items:center;gap:11px;
}
html.dark .subgroup h3{color:var(--gold)}
.subgroup h3 i{font-size:1.06rem;color:var(--gold-dk)}
html.dark .subgroup h3 i{color:var(--gold)}
.subgroup .ages{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;padding:3px 11px;border-radius:3px;margin-bottom:10px;
  background:var(--g-gold);color:var(--burg-dk);box-shadow:0 2px 6px rgba(207,154,8,.3);
}
.subgroup p{font-size:.95rem;color:var(--text-m);line-height:1.8}

/* ══════════════════════════════════════════════
   TEAM GRID
   ══════════════════════════════════════════════ */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px;margin:26px 0}
.team-card{
  background:var(--g-card);border:1px solid var(--bdr-soft);border-radius:8px;
  padding:26px 18px;text-align:center;
  box-shadow:var(--sh-1),var(--hl-top);
  transition:transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease),border-color var(--mid) var(--ease);
}
.team-card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--gold)}
.team-card .t-photo{
  width:96px;height:96px;border-radius:50%;margin:0 auto 15px;overflow:hidden;
  background:var(--g-panel);
  border:3px solid var(--gold);
  box-shadow:var(--sh-2);
  transition:transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease);
}
.team-card:hover .t-photo{transform:scale(1.06);box-shadow:var(--sh-gold)}
.team-card .t-photo img{width:100%;height:100%;object-fit:cover}
.team-card h4{font-family:var(--hd);font-weight:700;font-size:1rem;color:var(--burg);margin-bottom:4px;line-height:1.25}
html.dark .team-card h4{color:var(--gold)}
.team-card p{font-size:.82rem;color:var(--text-m)}

/* ══════════════════════════════════════════════
   GIVING
   ══════════════════════════════════════════════ */
.give-methods{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:18px;margin:26px 0}
.give-method{
  background:var(--g-card);border:1px solid var(--bdr-soft);border-radius:8px;
  padding:30px 22px;text-align:center;position:relative;overflow:hidden;
  box-shadow:var(--sh-1),var(--hl-top);
  transition:transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease),border-color var(--mid) var(--ease);
}
.give-method::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--burg),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform var(--mid) var(--ease);
}
.give-method:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--gold)}
.give-method:hover::before{transform:scaleX(1)}
.give-method .gm-icon{
  width:60px;height:60px;margin:0 auto 15px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;
  background:var(--g-panel);color:var(--burg);
  border:1px solid var(--bdr-soft);box-shadow:var(--sh-1),var(--hl-top);
  transition:all var(--mid) var(--ease);
}
.give-method:hover .gm-icon{background:var(--g-burg);color:#fff;box-shadow:var(--sh-burg);transform:scale(1.07)}
html.dark .give-method .gm-icon{color:var(--gold)}
.give-method h4{font-family:var(--hd);font-weight:700;font-size:1.08rem;color:var(--burg);margin-bottom:8px}
html.dark .give-method h4{color:var(--gold)}
.give-method p{font-size:.87rem;color:var(--text-m);line-height:1.6}
.give-method .gm-val{font-family:var(--bd);font-weight:700;font-size:1rem;color:var(--text);margin-top:10px;line-height:1.5}

/* ══════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.contact-card{
  background:var(--g-card);padding:26px 22px;border-radius:8px;
  border:1px solid var(--bdr-soft);
  box-shadow:var(--sh-1),var(--hl-top);
  transition:transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease),border-color var(--mid) var(--ease);
}
.contact-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--gold)}
.contact-card h4{
  font-family:var(--hd);font-weight:700;font-size:1.1rem;color:var(--burg);
  margin-bottom:9px;display:flex;align-items:center;gap:10px;
}
html.dark .contact-card h4{color:var(--gold)}
.contact-card p{font-size:.93rem;color:var(--text-m);line-height:1.75}
.contact-card a{color:var(--burg);font-weight:600;transition:color var(--fast) var(--ease)}
.contact-card a:hover{color:var(--gold-dk)}
html.dark .contact-card a{color:var(--gold)}

/* Action buttons (Get Baptized / Bereavement / Become a Member / Partners) */
.action-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:16px;margin:26px 0}
.action-btn{
  background:var(--g-card);border:1px solid var(--bdr-soft);border-radius:8px;
  padding:26px 20px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:12px;position:relative;overflow:hidden;cursor:pointer;
  box-shadow:var(--sh-1),var(--hl-top);
  transition:transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease),border-color var(--mid) var(--ease);
}
.action-btn::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--burg),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform var(--mid) var(--ease);
}
.action-btn:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--gold)}
.action-btn:hover::before{transform:scaleX(1)}
.action-btn.open{border-color:var(--gold);box-shadow:var(--sh-gold)}
.action-btn.open::before{transform:scaleX(1)}
.action-btn .ab-icon{
  width:56px;height:56px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  background:var(--g-burg);color:#fff;
  box-shadow:var(--sh-burg),inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform var(--mid) var(--ease);
}
.action-btn:hover .ab-icon{transform:scale(1.08) rotate(-5deg)}
.action-btn h4{font-family:var(--hd);font-weight:700;font-size:1.04rem;color:var(--burg)}
html.dark .action-btn h4{color:var(--gold)}
.action-btn p{font-size:.83rem;color:var(--text-m);line-height:1.55}

/* Reveal panel — holds the baptism photo and each action's copy */
.action-reveal{
  display:none;margin:0 0 26px;border-radius:8px;overflow:hidden;
  background:var(--g-card);border:1px solid var(--gold);
  box-shadow:var(--sh-2);
}
.action-reveal.open{display:block;animation:revealIn var(--mid) var(--ease)}
@keyframes revealIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.action-reveal .ar-photo{
  min-height:240px;background:linear-gradient(150deg,#2B4A5E,#14242E);
  background-size:cover;background-position:center;position:relative;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.32);font-family:var(--hd);font-size:1rem;text-align:center;padding:24px;
}
.action-reveal .ar-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.action-reveal .ar-body{padding:28px 26px}
.action-reveal .ar-body h3{font-family:var(--hd);font-weight:700;font-size:1.34rem;color:var(--burg);margin:0 0 12px}
html.dark .action-reveal .ar-body h3{color:var(--gold)}
.action-reveal .ar-body p{font-size:.95rem;color:var(--text-m);line-height:1.8}
.action-reveal .ar-body p+p{margin-top:12px}

.map-embed,.cal-embed{
  margin-top:26px;overflow:hidden;border-radius:8px;
  border:1px solid var(--bdr-soft);box-shadow:var(--sh-2);
}
.map-embed iframe{width:100%;height:380px;border:0;display:block}
.cal-embed{background:var(--surface)}
.cal-embed iframe{width:100%;height:620px;border:0;display:block}

/* ══════════════════════════════════════════════
   EVENTS PAGE — flyer carousel
   ══════════════════════════════════════════════ */
.flyer{
  position:relative;margin:26px 0 14px;border-radius:8px;overflow:hidden;
  background:#14100C;box-shadow:var(--sh-3),inset 0 0 0 1px rgba(255,255,255,.06);
}
.flyer-track{display:flex;transition:transform .85s var(--ease)}
.flyer-slide{min-width:100%;position:relative}
.flyer-slide img{width:100%;height:auto;display:block}
.flyer-slide .fs-placeholder{
  aspect-ratio:4/5;max-height:620px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(160deg,#2A1A10,#120A06);color:#7A6C5C;
  font-family:var(--hd);font-size:1.06rem;text-align:center;padding:34px;
}
.flyer-slide .fs-placeholder i{font-size:2.4rem;color:rgba(253,188,18,.34)}
.flyer-arr{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;
  background:rgba(20,16,12,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(253,188,18,.36);color:var(--gold);
  font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all var(--fast) var(--ease);
}
.flyer-arr:hover{background:rgba(138,23,18,.85);transform:translateY(-50%) scale(1.1);box-shadow:var(--sh-gold)}
.flyer-arr.p{left:14px}.flyer-arr.n{right:14px}
.flyer-dots{display:flex;gap:9px;justify-content:center;margin-top:4px}
.flyer-dots button{
  width:10px;height:10px;border-radius:50%;border:1px solid var(--bdr);
  background:var(--surface-2);cursor:pointer;padding:0;
  transition:all var(--fast) var(--ease);
}
.flyer-dots button.on{background:var(--g-burg);border-color:var(--burg);transform:scale(1.3);box-shadow:0 2px 8px rgba(138,23,18,.4)}

/* ══════════════════════════════════════════════
   CONNECT FORM
   ══════════════════════════════════════════════ */
.w3f{
  margin:30px 0;padding:34px 30px;border-radius:8px;
  background:var(--g-card);border:1px solid var(--bdr-soft);
  box-shadow:var(--sh-2),var(--hl-top);
}
.w3f label{display:block;font-size:.9rem;font-weight:600;color:var(--text);margin:20px 0 6px}
.w3f label:first-of-type{margin-top:0}
.w3f input,.w3f select,.w3f textarea{
  width:100%;font-family:var(--bd);font-size:.94rem;padding:13px 15px;
  border:1px solid var(--bdr);border-radius:5px;
  background:var(--surface);color:var(--text);outline:none;
  box-shadow:inset 0 1px 3px rgba(35,25,18,.06);
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),background var(--fast) var(--ease);
}
html.dark .w3f input,html.dark .w3f select,html.dark .w3f textarea{background:var(--surface-2);box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.w3f input:focus,.w3f select:focus,.w3f textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(253,188,18,.2),inset 0 1px 3px rgba(35,25,18,.05);
}
.w3f textarea{min-height:120px;resize:vertical}
.w3f button{
  margin-top:24px;font-family:var(--bd);font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:var(--g-burg);padding:15px 38px;border:1px solid var(--burg-dk);
  border-radius:5px;cursor:pointer;
  box-shadow:var(--sh-burg),inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),filter var(--fast) var(--ease);
}
.w3f button:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(138,23,18,.44);filter:saturate(118%)}
.w3f button:active{transform:translateY(0)}
.w3f .cond{display:none;margin-top:14px}
.w3f .cond.show{display:block;animation:revealIn var(--mid) var(--ease)}
.w3f .checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.w3f .checks label{
  display:flex;align-items:center;gap:9px;font-size:.87rem;font-weight:400;
  margin:0;cursor:pointer;padding:10px 13px;border-radius:5px;
  background:var(--surface-2);border:1px solid var(--bdr-soft);
  transition:all var(--fast) var(--ease);
}
.w3f .checks label:hover{border-color:var(--gold);background:var(--cream)}
.w3f .checks input[type=checkbox]{width:auto;margin:0;accent-color:var(--burg);box-shadow:none}
.w3f .what-to-expect{
  padding:22px 24px;margin-top:20px;font-size:.9rem;line-height:1.75;color:var(--text-m);
  background:var(--g-panel);border-left:4px solid var(--gold);border-radius:0 8px 8px 0;
  box-shadow:var(--sh-1);
}
.w3f .what-to-expect strong{color:var(--burg);display:block;margin-bottom:6px;font-size:.96rem}
html.dark .w3f .what-to-expect strong{color:var(--gold)}
.w3f .rating{display:flex;gap:11px;margin-top:9px;flex-wrap:wrap}
.w3f .rating label{
  display:flex;align-items:center;gap:6px;font-weight:400;font-size:.87rem;
  cursor:pointer;margin:0;padding:9px 15px;border-radius:20px;
  background:var(--surface-2);border:1px solid var(--bdr-soft);
  transition:all var(--fast) var(--ease);
}
.w3f .rating label:hover{border-color:var(--gold);background:var(--cream)}
.w3f .rating input{width:auto;accent-color:var(--burg);box-shadow:none}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.ftr{
  background:var(--ftr-bg);color:#fff;padding:0;position:relative;
  transition:background var(--mid) var(--ease);
}
/* Gradient wash plus a gold top edge so the footer reads as its own plane */
.ftr::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,transparent 24%,rgba(0,0,0,.28) 100%);
}
.ftr::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--burg) 50%,var(--gold))}
.ftr-5{
  position:relative;display:grid;
  grid-template-columns:1.15fr 1fr .85fr .85fr 1fr;
  gap:clamp(16px,2.6vw,32px);
  padding:clamp(28px,4vw,42px) clamp(18px,3vw,34px) 26px;
  border-bottom:1px solid rgba(255,255,255,.11);
}
.ftr-5 h4{
  font-family:var(--hd);font-weight:700;font-size:13px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px;
  padding-bottom:8px;border-bottom:1px solid rgba(253,188,18,.26);
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.ftr-5 > div > p{font-size:12.5px;line-height:1.72;color:var(--ftr-text)}
.ftr-5 > div > a{
  display:block;font-size:12.5px;line-height:1.7;padding:3px 0;color:var(--ftr-text);
  transition:color var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.ftr-5 > div > a:hover{color:var(--gold);transform:translateX(4px)}
.ftr-5 .hl{color:var(--gold);font-weight:600}
.ftr-5 p a{color:var(--ftr-text);transition:color var(--fast) var(--ease)}
.ftr-5 p a:hover{color:var(--gold)}

/* Social — always full color, larger glyphs */
.soc{display:flex;gap:11px;flex-wrap:wrap}
.ftr .soc a{
  display:flex!important;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:11px;font-size:1.62rem;color:#fff;padding:0;
  box-shadow:0 4px 14px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.24);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.ftr .soc a:hover{transform:translateY(-4px) scale(1.06)}
.soc .s-fb{background:linear-gradient(150deg,#4293ff,#1877F2 60%,#0d5fc4)}
.soc .s-fb:hover{box-shadow:0 8px 26px rgba(24,119,242,.62),inset 0 1px 0 rgba(255,255,255,.3)}
.soc .s-ig{background:linear-gradient(45deg,#f9ce34,#ee2a7b 45%,#6228d7)}
.soc .s-ig:hover{box-shadow:0 8px 26px rgba(238,42,123,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.soc .s-yt{background:linear-gradient(150deg,#ff4a3d,#FF0000 60%,#c50000)}
.soc .s-yt:hover{box-shadow:0 8px 26px rgba(255,0,0,.56),inset 0 1px 0 rgba(255,255,255,.3)}

/* App badge — roomier, legible, properly raised */
.appb{display:flex;flex-direction:column;gap:10px;margin-top:6px;align-items:flex-start}
.ftr .appb a{
  display:inline-flex!important;align-items:center;gap:11px;color:#fff;
  padding:11px 18px;border-radius:9px;min-width:172px;
  background:linear-gradient(165deg,#2A2622,#0D0B09);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 4px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.13);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.ftr .appb a:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18)}
.ftr .appb a i{font-size:1.7rem;line-height:1;flex-shrink:0}
.ftr .appb a small{display:block;font-size:10px;letter-spacing:.03em;opacity:.86;line-height:1.35;white-space:nowrap}
.ftr .appb a strong{display:block;font-size:15px;line-height:1.25;white-space:nowrap;letter-spacing:.01em}

.ftr-brand{
  position:relative;display:flex;align-items:center;justify-content:center;gap:15px;
  padding:26px 20px 4px;
}
.ftr-brand img{height:52px;width:auto;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}
.ftr-brand .ftxt{
  font-family:var(--hd);font-weight:700;font-size:1rem;color:#fff;
  letter-spacing:.045em;line-height:1.08;text-shadow:0 2px 6px rgba(0,0,0,.45);
}
.ftr-brand .ftxt span{display:block;font-size:1.24rem}
.ftr-copy{
  position:relative;text-align:center;padding:16px 20px 20px;margin-top:14px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:11px;letter-spacing:.03em;color:rgba(255,255,255,.36);
}
.ftr-copy a{color:rgba(255,255,255,.36);transition:color var(--fast) var(--ease)}
.ftr-copy a:hover{color:var(--gold)}

/* ══════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════ */
@media print{
  .hdr,.ham,.dm-toggle,.hero-arr,.flyer-arr,.flyer-dots,.ftr,.crumb,
  .wbtns,.quick,.new-here,.events{display:none!important}
  body{background:#fff}
  .page{max-width:100%;box-shadow:none}
  .card,.qcard,.team-card,.give-method,.evc,.sched,.subgroup{box-shadow:none;border:1px solid #ccc}
  .sched,.card,.team-card,.subgroup{break-inside:avoid}
  .sched .svc .svc-desc{max-height:none;opacity:1;margin-top:4px}
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   Two columns is the floor. Nothing collapses to
   a single stacked column except the largest
   feature blocks.
   ══════════════════════════════════════════════ */
@media(max-width:1024px){
  .ftr-5{grid-template-columns:1fr 1fr 1fr}
  .hero{padding-bottom:46%}
}
/* Just before the menu collapses, tighten it so nothing overlaps the logo */
@media(max-width:1180px){
  .nav-item{padding:0 9px;font-size:11.5px;letter-spacing:.06em}
  .give-pin{padding:10px 18px;font-size:12px}
}
/* Between roughly 1000px and 1180px the menu and the wordmark were
   close enough to touch. Squeeze the menu first, then collapse it. */
@media(max-width:1180px){
  .nav-item{padding:0 9px;font-size:11.5px;letter-spacing:.06em}
  .give-pin{padding:10px 20px;font-size:12px}
  .hdr{padding:0 18px}
}
@media(max-width:1040px){
  .nav-item{padding:0 7px;font-size:11px;letter-spacing:.04em}
  .logo-txt .t1{font-size:.72rem}
  .logo-txt .t2{font-size:1.05rem}
  .hdr-logo img{height:38px}
}
@media(max-width:960px){
  .nav{display:none}
  .ham{display:flex}
  .ham{display:flex}
  .nav.open{
    display:flex;flex-direction:column;position:absolute;top:70px;left:0;right:0;
    background:var(--surface);padding:16px;
    border-bottom:3px solid var(--gold);box-shadow:var(--sh-3);
    animation:ddIn var(--mid) var(--ease);
  }
  .nav.open .nav-item{
    height:auto;padding:14px 16px;font-size:13px;width:100%;
    justify-content:center;border-bottom:1px solid var(--bdr-soft);
  }
  .nav.open .nav-item::after{display:none}
  .nav.open .dd{display:block;width:100%}
  .nav.open .give-btn{margin:14px auto 4px;justify-content:center}
  .dd-pan{position:static;box-shadow:none;border:none;background:var(--surface-2);border-radius:0}
  .dd-pan a{color:var(--text);text-align:center}
  .worship{flex-direction:column;margin:0 14px 14px}
  .w-photo{min-height:240px;flex:none}
  .hero{padding-bottom:56%;margin:14px}
  .page-hero{margin:14px;min-height:220px}
  .contact-grid{grid-template-columns:1fr 1fr}
  .ministry-intro{gap:16px}
  .new-here{margin:0 14px 14px}
}
@media(max-width:640px){
  .ftr-5{grid-template-columns:1fr 1fr}
  /* Contact and Hours span the full row; the three link
     columns pair up beneath them */
  .ftr-5 > div:nth-child(1),.ftr-5 > div:nth-child(2){grid-column:span 2}
  .cards,.give-methods,.action-grid,.team-grid{grid-template-columns:1fr 1fr;gap:13px}
  .quick-grid{grid-template-columns:1fr 1fr}
  .w3f .checks{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .hdr{padding:0 14px;height:62px}
  .hdr-logo img{height:36px}
  .logo-txt .t1{font-size:.68rem}
  .logo-txt .t2{font-size:1rem}
  .nav.open,.dd-pan{top:62px}
  .hero{margin:10px;padding-bottom:64%;border-radius:6px}
  .hero-arr{width:38px;height:38px;font-size:1.2rem}
  .worship{margin:0 10px 10px}
  .new-here{margin:0 10px 10px;padding:30px 20px}
  .page-hero{margin:10px;min-height:180px}
  .content{padding:0 14px 32px}
  .events{padding:26px 10px 18px}
  /* Event cards keep the date rail but tighten it */
  .evd{flex:0 0 78px;padding:12px 4px}
  .evd .dy{font-size:2.1rem}
  .evi{padding:13px 14px}
  /* Cards stay two-up — type scales instead of the grid collapsing */
  .cards,.give-methods,.action-grid,.team-grid,.quick-grid{grid-template-columns:1fr 1fr;gap:10px}
  .card,.qcard,.give-method,.action-btn{padding:18px 13px}
  .card h4,.qcard h4,.give-method h4,.action-btn h4{font-size:.9rem}
  .card p,.qcard p,.give-method p,.action-btn p{font-size:.78rem}
  .card .c-icon{width:40px;height:40px;font-size:1.06rem;margin-bottom:10px}
  .qcard .q-icon,.give-method .gm-icon,.action-btn .ab-icon{width:48px;height:48px;font-size:1.22rem}
  .team-card{padding:18px 11px}
  .team-card .t-photo{width:74px;height:74px}
  .team-card h4{font-size:.86rem}
  .team-card p{font-size:.74rem}
  .w3f{padding:22px 16px}
  .w3f .checks{grid-template-columns:1fr}
  .ministry-intro{flex-direction:column;align-items:center;text-align:center}
  .subgroup{padding:20px 18px}
  .ftr-5{gap:18px 14px;padding:26px 16px 22px}
  .ftr .appb a{min-width:0;width:100%;padding:10px 14px}
  .ftr-brand{flex-direction:column;text-align:center;gap:10px}
  /* Table scrolls sideways rather than crushing */
  .sched{display:block;overflow-x:auto}
  .sched td,.sched th{padding:11px 12px}
}

/* Respect the visitor's motion preference */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .card:hover,.qcard:hover,.team-card:hover,.give-method:hover,.action-btn:hover,.evc:hover,.bf:hover,.bo:hover{transform:none}
}

a.scripture-ref:hover{
  transform:translateY(-2px);border-color:var(--gold);
  box-shadow:var(--sh-gold);
}

/* ══════════════════════════════════════════════
   SCRIPTURE VERSE BLOCK
   Sits under each ministry heading. The reference and
   translation are set; the verse text is pasted in.
   ══════════════════════════════════════════════ */
.verse{
  margin:22px 0 26px;padding:24px 28px;border-radius:0 8px 8px 0;
  background:var(--g-panel);border-left:4px solid var(--gold);
  box-shadow:var(--sh-1),var(--hl-top);position:relative;
}
.verse::before{
  content:'\201C';position:absolute;top:6px;right:20px;
  font-family:var(--hd);font-size:4.2rem;line-height:1;
  color:var(--gold);opacity:.17;pointer-events:none;
}
.verse p{
  font-family:var(--hd);font-style:italic;font-size:1.16rem;line-height:1.72;
  color:var(--burg);margin:0;position:relative;z-index:1;
}
html.dark .verse p{color:var(--gold)}
.verse .verse-empty{
  font-style:normal;font-family:var(--bd);font-size:.9rem;color:var(--text-l);
  border:1px dashed var(--bdr);border-radius:5px;padding:14px 16px;display:block;
}
.verse cite{
  display:block;margin-top:12px;font-style:normal;font-family:var(--bd);
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-m);
}
.verse cite span{
  display:inline-block;margin-left:9px;padding:2px 9px;border-radius:3px;
  background:var(--g-gold);color:var(--burg-dk);letter-spacing:.1em;
  box-shadow:0 1px 4px rgba(207,154,8,.3);
}
/* Publisher notice required when quoting a licensed translation */
.verse-notice{
  margin-top:30px;padding-top:16px;border-top:1px solid var(--bdr-soft);
  font-size:10.5px;line-height:1.65;color:var(--text-l);
}
@media(max-width:520px){
  .verse{padding:18px 18px}
  .verse p{font-size:1.04rem}
  .verse::before{font-size:3rem;right:12px}
}

/* ══════════════════════════════════════════════
   ANNOUNCEMENT BAR
   Sitewide strip under the header. Controlled in
   the Site Manager; hidden unless switched on.
   ══════════════════════════════════════════════ */
.annbar{
  position:relative;z-index:900;
  background:linear-gradient(100deg,var(--burg-dk),var(--burg) 45%,var(--burg-lt));
  box-shadow:0 3px 14px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.13);
}
.annbar-in{
  max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px;
  padding:11px clamp(16px,3vw,34px);
}
.annbar-txt{
  flex:1;color:#fff;font-size:13.5px;font-weight:600;line-height:1.45;
  text-shadow:0 1px 3px rgba(0,0,0,.3);
}
.annbar-cta{
  flex-shrink:0;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#231A06;background:var(--g-gold);padding:8px 16px;border-radius:4px;
  box-shadow:0 2px 9px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.annbar-cta:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(0,0,0,.3)}
.annbar-x{
  flex-shrink:0;background:none;border:none;color:rgba(255,255,255,.6);
  font-size:1.35rem;line-height:1;cursor:pointer;padding:0 2px;transition:color var(--fast) var(--ease);
}
.annbar-x:hover{color:#fff}
@media(max-width:600px){
  .annbar-in{gap:10px;padding:10px 14px;flex-wrap:wrap}
  .annbar-txt{font-size:12.5px;flex-basis:100%}
  .annbar-cta{padding:7px 13px;font-size:11px}
}

/* ══════════════════════════════════════════════
   LIVE SERVICE
   ══════════════════════════════════════════════ */
.livewrap{
  margin:0 18px 18px;border-radius:10px;overflow:hidden;
  background:linear-gradient(170deg,#1C1713,#0D0B09);
  border:1px solid rgba(253,188,18,.28);
  box-shadow:var(--sh-3),0 0 0 1px rgba(255,255,255,.04) inset,0 0 40px rgba(196,41,31,.14);
}
.live-head{
  display:flex;align-items:center;gap:12px;padding:14px 20px;
  background:linear-gradient(100deg,rgba(138,23,18,.6),rgba(0,0,0,.2));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.live-dot{
  width:11px;height:11px;border-radius:50%;background:#FF3B30;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,59,48,.75);animation:livePulse 1.9s infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(255,59,48,.7)}
  70%{box-shadow:0 0 0 12px rgba(255,59,48,0)}
  100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}
}
.live-label{
  font-family:var(--bd);font-weight:800;font-size:11.5px;letter-spacing:.19em;
  text-transform:uppercase;color:#fff;
}
.live-sub{flex:1;font-family:var(--hd);font-size:1rem;color:var(--gold);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-min{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:5px;
  color:rgba(255,255,255,.8);font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:6px 12px;cursor:pointer;transition:all var(--fast) var(--ease);
}
.live-min:hover{background:rgba(255,255,255,.16);color:#fff}
.live-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.live-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.live-frame .live-off{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;color:#6E655A;font-family:var(--hd);font-size:1.02rem;
  text-align:center;padding:26px;
}
.live-frame .live-off i{font-size:2.4rem;color:rgba(253,188,18,.3)}
.live-links{display:flex;gap:11px;padding:16px 20px;flex-wrap:wrap;background:rgba(0,0,0,.28)}
.live-links .bo{color:var(--gold);border-color:rgba(253,188,18,.5);background:transparent;
  display:inline-flex;align-items:center;gap:8px}
.live-links .bo:hover{background:var(--g-gold);color:#231A06;border-color:var(--gold)}
@media(max-width:820px){.livewrap{margin:0 14px 14px}}
@media(max-width:520px){
  .livewrap{margin:0 10px 10px}
  .live-head{padding:12px 14px;gap:9px;flex-wrap:wrap}
  .live-sub{font-size:.9rem;flex-basis:100%;order:3}
  .live-links{padding:13px 14px}
  .live-links .bo{flex:1;justify-content:center;padding:11px 12px}
}

/* Draft-preview ribbon, shown only when previewing unpublished edits */
.draftflag{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:linear-gradient(100deg,#B57200,#E0A32A);color:#241A03;
  font-family:var(--bd);font-size:12.5px;font-weight:700;text-align:center;
  padding:9px 14px;box-shadow:0 -3px 16px rgba(0,0,0,.3);
}
.draftflag a{text-decoration:underline;margin-left:10px}


/* ══════════════════════════════════════════════
   GIVE — pinned in the header at every width.
   It sits outside the collapsing menu so it never
   disappears behind the hamburger on a phone.
   ══════════════════════════════════════════════ */
.give-pin{
  font-family:var(--bd);font-weight:800;font-size:13px;letter-spacing:.11em;
  text-transform:uppercase;color:#231A06;background:var(--g-gold);
  padding:11px 26px;margin-left:10px;border:none;border-radius:4px;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  box-shadow:var(--sh-gold),var(--hl-top);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),filter var(--fast) var(--ease);
}
.give-pin:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(207,154,8,.48),var(--hl-top);filter:saturate(115%)}
.give-pin:active{transform:translateY(0)}
.give-pin i{font-size:.94em}
/* Hide the old in-menu copy so GIVE never shows twice */
.nav .give-btn{display:none!important}
@media(max-width:820px){
  .give-pin{padding:10px 18px;font-size:12px;margin-left:6px}
}
@media(max-width:520px){
  .give-pin{padding:9px 13px;font-size:11px;letter-spacing:.08em;margin-left:4px}
  .give-pin i{display:none}
}
@media(max-width:380px){
  .give-pin{padding:8px 11px;font-size:10.5px}
}

/* ══════════════════════════════════════════════
   LIVE PLAYER INSIDE THE WORSHIP BLOCK
   The photo panel becomes the player while a
   service is streaming, then reverts to the photo.
   ══════════════════════════════════════════════ */
.w-photo{overflow:hidden}
.w-live{position:absolute;inset:0;z-index:3;background:#000;display:flex;flex-direction:column}
/* [hidden] must win over the display rule above, or the player can never
   be switched off. Same guard applied to every element we toggle. */
[hidden]{display:none!important}
.w-live iframe{flex:1;width:100%;border:0;display:block}
.w-live-tag{
  display:flex;align-items:center;gap:9px;padding:9px 14px;
  background:linear-gradient(100deg,rgba(138,23,18,.95),rgba(0,0,0,.75));
  border-bottom:1px solid rgba(253,188,18,.3);
}
.w-live-tag .live-dot{width:9px;height:9px}
.w-live-tag b{
  font-family:var(--bd);font-size:10.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;
}
.w-live-tag span{
  flex:1;font-family:var(--hd);font-size:.9rem;color:var(--gold);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.w-live-tag button{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:4px;
  color:rgba(255,255,255,.85);font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 9px;cursor:pointer;
}
.w-live-tag button:hover{background:rgba(255,255,255,.18);color:#fff}
/* A gold ring on the worship block signals a live service */
.worship.is-live{box-shadow:var(--sh-2),0 0 0 2px var(--gold),0 0 44px rgba(196,41,31,.22)}

/* ══════════════════════════════════════════════
   SERVICE / CLASS LISTS
   Rows are managed in the Site Manager, so times
   and classes can be added or removed without code.
   ══════════════════════════════════════════════ */
.slist{margin:24px 0 8px;display:grid;gap:12px}
.srow{
  display:grid;grid-template-columns:auto 1fr auto;gap:8px 18px;align-items:start;
  padding:18px 20px;border-radius:9px;
  background:var(--g-card);border:1px solid var(--bdr-soft);
  box-shadow:var(--sh-1),var(--hl-top);position:relative;overflow:hidden;
  transition:transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease),border-color var(--mid) var(--ease);
}
.srow::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--gold),var(--burg));
  transform:scaleY(0);transform-origin:top;transition:transform var(--mid) var(--ease);
}
.srow:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--gold)}
.srow:hover::before{transform:scaleY(1)}
.srow .s-when{
  grid-row:span 2;min-width:104px;font-family:var(--bd);font-weight:800;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:#fff;
  background:var(--g-burg);border-radius:5px;padding:9px 11px;text-align:center;
  box-shadow:0 2px 8px rgba(138,23,18,.3),inset 0 1px 0 rgba(255,255,255,.16);
}
.srow .s-when em{display:block;font-style:normal;font-family:var(--hd);font-size:1.02rem;
  letter-spacing:.02em;text-transform:none;margin-top:2px}
.srow .s-name{
  font-family:var(--hd);font-weight:700;font-size:1.06rem;color:var(--burg);line-height:1.25;
}
html.dark .srow .s-name{color:var(--gold)}
.srow .s-note{grid-column:2;font-size:.88rem;color:var(--text-m);line-height:1.6}
.srow .s-where{
  align-self:start;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:20px;white-space:nowrap;
  background:var(--surface-2);color:var(--text-m);border:1px solid var(--bdr-soft);
}
.srow .s-where.online{background:var(--g-gold);color:var(--burg-dk);border-color:transparent}
.srow .s-ages{
  display:inline-block;margin-left:9px;font-family:var(--bd);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:3px;
  background:var(--surface-2);color:var(--text-m);border:1px solid var(--bdr-soft);vertical-align:2px;
}
@media(max-width:640px){
  .srow{grid-template-columns:auto 1fr;padding:15px 16px;gap:6px 13px}
  .srow .s-when{min-width:84px;font-size:10px;padding:8px}
  .srow .s-name{font-size:.98rem}
  .srow .s-where{grid-column:2;justify-self:start;margin-top:4px}
  .srow .s-note{grid-column:2}
}

/* ══════════════════════════════════════════════
   ANNOUNCEMENT BAR — appearance options
   All of these are set in the Site Manager. The
   bar carries data attributes and the runtime
   writes CSS variables onto it.
   ══════════════════════════════════════════════ */
.annbar{
  --ann-bg1:#63100c; --ann-bg2:#8a1712; --ann-bg3:#a81e17;
  --ann-fg:#ffffff; --ann-size:13.5px; --ann-weight:600;
  --ann-font:var(--bd); --ann-align:left;
  background:linear-gradient(100deg,var(--ann-bg1),var(--ann-bg2) 45%,var(--ann-bg3));
}
.annbar .annbar-txt{
  color:var(--ann-fg);font-size:var(--ann-size);font-weight:var(--ann-weight);
  font-family:var(--ann-font);text-align:var(--ann-align);
}
.annbar-x{color:var(--ann-fg);opacity:.6}
.annbar-x:hover{opacity:1;color:var(--ann-fg)}

/* Centred layout pushes the text to the middle of the bar */
.annbar[data-align="center"] .annbar-in{justify-content:center}
.annbar[data-align="center"] .annbar-txt{flex:0 1 auto}

/* Flat fill instead of the gradient */
.annbar[data-fill="flat"]{background:var(--ann-bg2)}

/* Scrolling ticker, for a long message */
.annbar[data-scroll="on"] .annbar-txt{
  flex:1;overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.annbar[data-scroll="on"] .annbar-txt > span{
  display:inline-block;padding-left:100%;
  animation:annScroll var(--ann-speed,26s) linear infinite;
}
.annbar[data-scroll="on"]:hover .annbar-txt > span{animation-play-state:paused}
@keyframes annScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}
/* A gentle pulse for something urgent */
.annbar[data-emphasis="pulse"]{animation:annPulse 2.6s ease-in-out infinite}
@keyframes annPulse{
  0%,100%{filter:saturate(100%) brightness(1)}
  50%{filter:saturate(135%) brightness(1.13)}
}
@media(prefers-reduced-motion:reduce){
  .annbar[data-scroll="on"] .annbar-txt > span{animation:none;padding-left:0}
  .annbar[data-emphasis="pulse"]{animation:none}
}


/* ══════════════════════════════════════════════
   HEADER FIT
   Between about 1010px and 1200px the menu is tight
   beside the wordmark, so the spacing closes up
   rather than letting anything overlap.
   ══════════════════════════════════════════════ */
@media(max-width:1200px) and (min-width:1011px){
  .nav-item{padding:0 9px;font-size:11px;letter-spacing:.06em}
  .give-pin{padding:10px 18px;font-size:11.5px}
  .logo-txt .t2{font-size:1.08rem}
  .logo-txt .t1{font-size:.72rem}
}
@media(max-width:1010px){
  /* Wordmark has the row to itself once the menu collapses */
  .logo-txt .t1{font-size:.76rem}
  .logo-txt .t2{font-size:1.14rem}
}

/* ══════════════════════════════════════════════
   WORSHIP BLOCK — taller, and room for more services
   ══════════════════════════════════════════════ */
.w-photo{min-height:400px}
.w-body{padding:44px 32px}
.w-body .wgroup{margin-top:14px}
.w-body .wgroup:first-of-type{margin-top:10px}
.w-body .wlbl{
  font-weight:800;font-size:.86rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--burg);margin-bottom:5px;
}
html.dark .w-body .wlbl{color:var(--gold)}
.w-body .wtm{font-size:.95rem;color:var(--text-m);margin:3px 0}
.w-body .wtm b{color:var(--text);font-weight:700}
.w-body .wnote{
  display:inline-block;margin-top:5px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 10px;border-radius:20px;
  background:var(--surface-2);color:var(--text-m);border:1px solid var(--bdr-soft);
}
@media(max-width:820px){.w-photo{min-height:280px}}
@media(max-width:520px){.w-body{padding:32px 20px}}

/* ══════════════════════════════════════════════
   ANNOUNCEMENT BAR — appearance set in the Site Manager
   ══════════════════════════════════════════════ */
.annbar-in.a-center{justify-content:center;text-align:center}
.annbar-in.a-center .annbar-txt{flex:0 1 auto}
.annbar-txt.a-bold{font-weight:800}
.annbar-txt.a-sm{font-size:12px}
.annbar-txt.a-lg{font-size:15.5px}
.annbar-txt.a-xl{font-size:17.5px}
.annbar-txt.a-serif{font-family:var(--hd)}
.annbar-txt.a-caps{text-transform:uppercase;letter-spacing:.09em}
.annbar-txt.a-italic{font-style:italic}
/* Scrolling variant, for a longer notice */
.annbar-in.a-scroll{overflow:hidden}
.annbar-in.a-scroll .annbar-txt{
  flex:1;white-space:nowrap;overflow:hidden;
  animation:annScroll 26s linear infinite;
}
@keyframes annScroll{
  0%{transform:translateX(6%)}
  100%{transform:translateX(-100%)}
}
.annbar-in.a-scroll:hover .annbar-txt{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .annbar-in.a-scroll .annbar-txt{animation:none;white-space:normal}
}

/* ══════════════════════════════════════════════
   WORSHIP BLOCK — grouped times, more presence
   ══════════════════════════════════════════════ */
.w-photo{min-height:420px}
.w-body{padding:44px 34px;gap:0}
.wgroup{margin-bottom:18px;width:100%}
.wgroup:last-of-type{margin-bottom:6px}
.w-body .wlbl{
  font-weight:800;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--burg);margin-bottom:7px;display:flex;align-items:center;gap:10px;
  justify-content:center;
}
html.dark .w-body .wlbl{color:var(--gold)}
.w-body .wlbl::before,.w-body .wlbl::after{
  content:'';height:1px;flex:1;max-width:36px;
  background:linear-gradient(90deg,transparent,var(--bdr));
}
.w-body .wlbl::after{background:linear-gradient(270deg,transparent,var(--bdr))}
.w-body .wtm{font-size:.97rem;color:var(--text-m);margin:4px 0;line-height:1.5}
.w-body .wtm b{
  font-family:var(--bd);font-weight:800;color:var(--text);
  letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
html.dark .w-body .wtm b{color:var(--gold-lt)}
@media(max-width:820px){.w-photo{min-height:300px}.w-body{padding:34px 24px}}
@media(max-width:520px){.w-photo{min-height:240px}.w-body{padding:28px 18px}.wgroup{margin-bottom:15px}}

/* ══════════════════════════════════════════════
   HEADER — stop the menu colliding with the logo
   Between roughly 820px and 1080px the nav used to
   ride over the wordmark. The logo now shrinks and
   the menu tightens before the hamburger takes over.
   ══════════════════════════════════════════════ */
.hdr{gap:14px}
.hdr-logo{flex-shrink:0;min-width:0}
.hdr-right{min-width:0;flex-shrink:1}
.nav{flex-wrap:nowrap;min-width:0}
@media(max-width:1180px){
  .nav-item{padding:0 9px;font-size:11.5px;letter-spacing:.06em}
  .give-pin{padding:10px 20px;font-size:12px}
}
@media(max-width:1040px){
  .logo-txt .t1{font-size:.7rem;letter-spacing:.03em}
  .logo-txt .t2{font-size:1.02rem}
  .hdr-logo img{height:38px}
  .nav-item{padding:0 7px;font-size:11px}
  .give-pin{padding:9px 15px;font-size:11.5px;margin-left:6px}
  .dm-toggle{width:34px;height:34px;margin-left:6px}
}
@media(max-width:900px){
  /* Wordmark drops away before anything can overlap it */
  .logo-txt{display:none}
  .hdr-logo img{height:42px}
}


/* ══════════════════════════════════════════════
   ANNOUNCEMENT BAR — appearance options
   All of these are set in the Site Manager, so the
   bar can be restyled without touching any code.
   ══════════════════════════════════════════════ */
.annbar[data-align="center"] .annbar-in{justify-content:center;text-align:center}
.annbar[data-align="center"] .annbar-txt{flex:0 1 auto}
.annbar[data-align="right"] .annbar-in{justify-content:flex-end;text-align:right}

.annbar[data-size="s"] .annbar-txt{font-size:12px}
.annbar[data-size="m"] .annbar-txt{font-size:13.5px}
.annbar[data-size="l"] .annbar-txt{font-size:16px}
.annbar[data-size="xl"] .annbar-txt{font-size:19px}

.annbar[data-weight="normal"] .annbar-txt{font-weight:400}
.annbar[data-weight="bold"] .annbar-txt{font-weight:700}
.annbar[data-weight="black"] .annbar-txt{font-weight:800;letter-spacing:.02em}

.annbar[data-face="body"] .annbar-txt{font-family:var(--bd)}
.annbar[data-face="display"] .annbar-txt{font-family:var(--hd)}
.annbar[data-face="caps"] .annbar-txt{
  font-family:var(--bd);text-transform:uppercase;letter-spacing:.14em;font-size:.88em;
}

/* Ready-made colour schemes */
.annbar[data-theme="burgundy"]{background:linear-gradient(100deg,var(--burg-dk),var(--burg) 45%,var(--burg-lt))}
.annbar[data-theme="gold"]{background:linear-gradient(100deg,#dfa30a,#fdbc12 45%,#ffd24a)}
.annbar[data-theme="gold"] .annbar-txt{color:#231A06;text-shadow:none}
.annbar[data-theme="gold"] .annbar-x{color:rgba(35,26,6,.55)}
.annbar[data-theme="gold"] .annbar-x:hover{color:#231A06}
.annbar[data-theme="gold"] .annbar-cta{background:linear-gradient(145deg,#3a2a08,#1a1204);color:#FFD86B}
.annbar[data-theme="dark"]{background:linear-gradient(100deg,#14120F,#25211A 55%,#14120F)}
.annbar[data-theme="green"]{background:linear-gradient(100deg,#1E5138,#2C6B4F 45%,#3A8663)}
.annbar[data-theme="alert"]{background:linear-gradient(100deg,#7A1410,#B01C15 45%,#D9241B)}

/* Scrolling ticker, for a longer message */
.annbar[data-scroll="on"] .annbar-in{overflow:hidden}
.annbar[data-scroll="on"] .annbar-txt{
  white-space:nowrap;animation:annScroll 26s linear infinite;padding-left:100%;
}
@keyframes annScroll{from{transform:translateX(0)}to{transform:translateX(-200%)}}
.annbar[data-scroll="on"]:hover .annbar-txt{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .annbar[data-scroll="on"] .annbar-txt{animation:none;padding-left:0;white-space:normal}
}