/* ==========================================================================
   New Life Fellowship of Phoenix
   Sections: tokens, base, layout, buttons, header, hero, band, cards,
   flyers, stats, video, accountability, steps, questions, banner, forms,
   closing call, footer, back to top, motion, breakpoints.
   Breakpoints appear once each: 1150 / 1000 / 560.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------ */
:root{
  --navy:#19294D;
  --ink:#0D1526;
  --flame:#C64D11;
  --ember:#E8A87C;
  --paper:#FAF7F2;
  --stone:#E4DDD2;
  --line:#D9D2C7;
  --muted:#5C6478;
  --body:#26314C;
  --max:1200px;
  --pad:30px;
  --topbar-h:34px;
  --header-h:78px;
}

/* --- base -------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--topbar-h))}
body{
  background:var(--paper);color:var(--body);
  font-family:'Figtree',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;line-height:1.07;letter-spacing:-.012em;color:var(--navy)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--flame);outline-offset:3px}
.skip{position:absolute;left:-9999px;background:var(--navy);color:#fff;padding:12px 20px;z-index:200}
.skip:focus{left:16px;top:16px}

/* --- layout ------------------------------------------------------------ */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
section{padding:104px 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:74px;align-items:start}
.row{display:flex;gap:14px;flex-wrap:wrap}

.eyebrow{
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--flame);margin-bottom:20px;display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:24px;height:1.5px;background:var(--flame);flex:none}

.sec-head{max-width:46rem;margin-bottom:58px}
.sec-head h2{font-size:clamp(35px,4.6vw,56px);margin-bottom:22px}
.sec-head p{font-size:19px;color:var(--muted)}

.dark{background:var(--navy);color:#E7EBF3}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark p{color:#B9C2D6}
.dark .eyebrow{color:var(--ember)}
.dark .eyebrow::before{background:var(--ember)}

/* --- buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;text-decoration:none;
  padding:14px 28px;border-radius:2px;font-size:14.5px;font-weight:600;
  border:1px solid var(--navy);cursor:pointer;white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s;
}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn.flame{background:var(--flame);border-color:var(--flame)}
.btn.flame:hover{background:#A84210;border-color:#A84210}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.light{background:#fff;color:var(--navy);border-color:#fff}
.btn.light:hover{background:var(--ember);border-color:var(--ember);color:var(--ink)}

/* --- header ------------------------------------------------------------ */
.topbar{background:var(--navy);color:#C9D2E4;font-size:13px}
.topbar .wrap{
  display:flex;justify-content:center;align-items:center;
  gap:10px 26px;flex-wrap:wrap;text-align:center;
  padding-top:9px;padding-bottom:9px;
}
.topbar b{color:#fff;font-weight:600}
.topbar a{color:#C9D2E4;text-decoration:none}
.topbar a:hover{color:#fff}
.topbar .dot{opacity:.5}

header{
  position:sticky;top:0;z-index:80;
  background:rgba(250,247,242,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:20px 0 18px;
}
.brand{display:flex;align-items:center;justify-content:center;gap:14px;text-decoration:none;flex:none}
.brand img{height:48px}
.brand b{font-family:'Instrument Serif',serif;font-size:22px;font-weight:400;line-height:1.05;display:block;color:var(--navy)}
.brand i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:3px}

.menu{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:24px;row-gap:12px;max-width:100%}
.menu a{
  text-decoration:none;font-size:14px;font-weight:500;color:var(--muted);
  padding:4px 0;border-bottom:2px solid transparent;white-space:nowrap;
  transition:color .2s,border-color .2s;
}
.menu a:hover{color:var(--navy)}
.menu a.on{color:var(--navy);border-bottom-color:var(--flame)}
.menu a.btn{color:#fff;border-bottom:1px solid var(--navy);margin-left:6px;padding:12px 22px}
.menu a.btn:hover{color:#fff}

.burger{position:absolute;right:var(--pad);top:16px;display:none;background:none;border:none;cursor:pointer;padding:10px}
.burger i{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0}

/* --- hero -------------------------------------------------------------- */
.hero{padding:100px 0 0;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-150px;right:-170px;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(198,77,17,.07),transparent 66%);pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:70px;align-items:center;position:relative}
.hero h1{font-size:clamp(48px,7vw,92px);margin-bottom:28px}
.hero h1 em{font-style:italic;color:var(--flame)}
.hero-mark{display:flex;justify-content:center}
.hero-mark img{width:100%;max-width:330px}
.lead{font-size:20.5px;color:var(--muted);max-width:34em;margin-bottom:36px}

.when{
  display:grid;grid-template-columns:repeat(3,1fr);margin-top:74px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.when div{padding:28px 34px 28px 0;border-right:1px solid var(--line)}
.when div:last-child{border-right:none;padding-right:0}
.when dt{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:8px}
.when dd{font-size:18px;font-weight:500;color:var(--navy)}

.now{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.now p{margin:0;font-size:16.5px;font-weight:600;color:var(--navy)}
.now p.live{color:var(--flame)}
.now .sm{
  background:transparent;border:1px solid var(--line);color:var(--navy);
  padding:9px 16px;font:inherit;font-size:14px;font-weight:600;border-radius:2px;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.now .sm:hover{border-color:var(--navy);background:var(--navy);color:#fff}

/* --- language band ----------------------------------------------------- */
.band{background:var(--navy);color:#fff;padding:24px 0;overflow:hidden}
.ticker{display:flex;width:max-content;animation:slide 42s linear infinite}
.ticker span{
  font-family:'Instrument Serif',serif;font-size:30px;padding:0 32px;
  white-space:nowrap;display:flex;align-items:center;gap:32px;
}
.ticker span::after{content:"";width:6px;height:6px;background:var(--ember);border-radius:50%;flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* --- cards, tiles, people ---------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.card{background:var(--paper);padding:42px 34px;text-decoration:none;transition:background .25s}
.card:hover{background:#fff}
.card h3{font-size:26px;margin-bottom:14px}
.card p{color:var(--muted);font-size:16px}
.card .kicker{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--flame);font-weight:700;display:block;margin-bottom:16px}
.card a.more{display:inline-block;margin-top:18px;font-size:14.5px;font-weight:600;color:var(--navy);text-decoration:none;border-bottom:1.5px solid var(--flame);padding-bottom:2px}

.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.tile{background:var(--paper);padding:34px 32px}
.tile h3{font-size:23px;margin-bottom:10px}
.tile p{font-size:15.5px;color:var(--muted)}

.people{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.person{background:var(--paper);padding:30px 26px}
.person b{display:block;font-size:17.5px;font-weight:600;color:var(--navy);margin-bottom:4px}
.person span{font-size:13.5px;color:var(--muted)}

/* --- flyers ------------------------------------------------------------ */
.flyers{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px;align-items:start}
.flyer{
  display:block;border:1px solid var(--line);background:#fff;overflow:hidden;border-radius:2px;
  transition:transform .25s,box-shadow .25s;
}
.flyer:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(13,21,38,.14)}
.flyer img{width:100%;height:auto;display:block}
.flyer figcaption{padding:14px 16px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
.flyer figcaption b{display:block;color:var(--navy);font-size:16px;font-weight:600;margin-bottom:3px}

/* --- stats ------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:70px;padding-top:46px;border-top:1px solid rgba(255,255,255,.18)}
.stat b{display:block;font-family:'Instrument Serif',serif;font-size:56px;line-height:1;color:#fff;margin-bottom:10px}
.stat span{font-size:13.5px;color:#B9C2D6}

/* --- video panel ------------------------------------------------------- */
.frame{
  aspect-ratio:16/9;background:var(--ink);position:relative;border-radius:3px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
}
.frame::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(198,77,17,.38),transparent 64%)}
.play{
  position:relative;z-index:2;width:82px;height:82px;border-radius:50%;background:var(--flame);
  display:flex;align-items:center;justify-content:center;transition:transform .25s;
}
.frame:hover .play{transform:scale(1.1)}
.play::before{content:"";border-left:20px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:5px}

/* --- accountability list ----------------------------------------------- */
.ways{border-top:1px solid rgba(255,255,255,.2)}
.way{padding:22px 0;border-bottom:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;gap:26px;align-items:baseline}
.way b{font-weight:600;font-size:16.5px;color:#fff}
.way span{color:#B9C2D6;font-size:15px;text-align:right}

/* --- numbered steps ---------------------------------------------------- */
.steps{counter-reset:s;display:grid;gap:1px;background:var(--line)}
.step{background:var(--paper);padding:32px;display:grid;grid-template-columns:64px 1fr;gap:24px;align-items:start}
.step::before{counter-increment:s;content:counter(s);font-family:'Instrument Serif',serif;font-size:40px;color:var(--flame);line-height:1}
.step h3{font-size:22px;margin-bottom:8px}
.step p{color:var(--muted);font-size:16px}

/* --- questions --------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q summary{
  padding:24px 0;cursor:pointer;font-size:19px;font-weight:600;color:var(--navy);
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";font-family:'Instrument Serif',serif;font-size:28px;color:var(--flame);transition:transform .2s}
.q[open] summary::after{transform:rotate(45deg)}
.q p{padding:0 0 24px;color:var(--muted);max-width:52em}

/* --- banner, info list, map -------------------------------------------- */
.banner{padding:84px 0 70px;border-bottom:1px solid var(--line)}
.banner h1{font-size:clamp(42px,6vw,76px);margin-bottom:20px}
.banner p{font-size:20px;color:var(--muted);max-width:36em}

.info dt{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:28px 0 7px}
.info dt:first-child{margin-top:0}
.info dd{font-size:18px;font-weight:500;color:var(--navy)}
.info dd a{text-decoration:none;border-bottom:1px solid var(--line)}
.info dd a:hover{border-color:var(--flame)}
.map{width:100%;height:360px;border:1px solid var(--line);filter:grayscale(.35) contrast(1.04)}

/* --- forms ------------------------------------------------------------- */
form{display:grid;gap:20px}
label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:8px}
input,select,textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line);background:#fff;
  font-family:inherit;font-size:16px;color:var(--body);border-radius:2px;
}
input:focus,select:focus,textarea:focus{border-color:var(--navy);outline:none}
textarea{min-height:150px;resize:vertical}
.err{display:block;color:#9C2A2A;font-size:13.5px;margin-top:6px;font-weight:600}
[aria-invalid="true"]{border-color:#9C2A2A}
.note{margin-top:14px;font-size:15px;color:var(--muted)}
.note.good{color:#1F5C2E;font-weight:600}
.note.bad{color:#9C2A2A;font-weight:600}

/* --- closing call ------------------------------------------------------ */
.cta{background:var(--ink);color:#fff;padding:84px 0;text-align:center}
.cta h2{color:#fff;font-size:clamp(32px,4.4vw,50px);margin-bottom:18px}
.cta p{color:#B9C2D6;font-size:18px;max-width:34em;margin:0 auto 30px}

/* --- footer ------------------------------------------------------------ */
footer{background:var(--ink);color:#fff;padding:76px 0 42px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:52px;margin-bottom:52px}
.foot img{height:58px;margin-bottom:22px}
.foot p{color:#9FA9C2;font-size:15px}
.foot h2.fh{
  font-family:'Figtree',system-ui,sans-serif;font-size:11.5px;letter-spacing:.17em;
  text-transform:uppercase;margin-bottom:18px;color:#fff;font-weight:700;line-height:1.4;
}
.foot ul{list-style:none}
.foot li{margin-bottom:11px;color:#9FA9C2;font-size:15px}
.foot a{color:#9FA9C2;text-decoration:none}
.foot a:hover{color:#fff}
.legal{
  border-top:1px solid rgba(255,255,255,.14);padding-top:28px;
  display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;
  color:#7A85A0;font-size:13.5px;
}

/* --- back to top ------------------------------------------------------- */
.to-top{
  position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
  border:none;background:var(--navy);color:#fff;font-size:19px;cursor:pointer;
  opacity:0;pointer-events:none;z-index:70;
  transition:opacity .25s,transform .25s,background .25s;
}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{background:var(--flame);transform:translateY(-2px)}

/* --- motion ------------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .ticker{animation:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   Breakpoints — 1150, 1000, 560. Each appears once.
   ========================================================================== */

@media(max-width:1150px){
  .menu{gap:18px}
  .menu a{font-size:13.5px}
  .menu a.btn{padding:11px 18px;font-size:13.5px}
  .two{gap:52px}
  .hero-grid{gap:48px}
}

@media(max-width:1000px){
  :root{--pad:22px}

  .nav{flex-direction:row;justify-content:space-between;align-items:center;height:var(--header-h);padding:0}
  .brand{justify-content:flex-start}
  .burger{display:block;position:static}

  .menu{
    position:fixed;inset:auto 0 auto 0;top:calc(var(--header-h) + var(--topbar-h));
    display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:22px var(--pad) 30px;gap:16px;
    max-height:calc(100vh - var(--header-h) - var(--topbar-h));overflow:auto;
  }
  .menu.open{display:flex}
  .menu a{font-size:16px;padding:6px 0;border-bottom:none}
  .menu a.on{border-bottom:none;color:var(--flame)}
  .menu a.btn{width:100%;margin-left:0;padding:14px 22px;font-size:15px}

  section{padding:70px 0}
  .hero{padding-top:64px}
  .hero-grid,.two{grid-template-columns:1fr;gap:44px}
  .hero-mark{order:-1}
  .hero-mark img{max-width:210px}

  .when,.cards,.people,.grid2,.flyers{grid-template-columns:1fr}
  .when div{border-right:none;border-bottom:1px solid var(--line);padding-right:0}
  .when div:last-child{border-bottom:none}

  .stats{grid-template-columns:1fr 1fr;gap:28px}
  .foot{grid-template-columns:1fr 1fr;gap:34px}
  .step{grid-template-columns:1fr;gap:12px}
  .topbar{font-size:12px}
  .topbar .wrap{gap:6px 14px}
}

@media(max-width:560px){
  .foot{grid-template-columns:1fr}
  .ticker span{font-size:24px;padding:0 22px;gap:22px}
  .banner{padding:56px 0 46px}
  .now{gap:12px}
}

/* --- WhatsApp button --------------------------------------------------- */
.wa{
  position:fixed;left:22px;bottom:22px;z-index:70;
  display:inline-flex;align-items:center;gap:10px;
  background:#25D366;color:#0B2E13;text-decoration:none;
  padding:12px 18px;border-radius:999px;font-size:14.5px;font-weight:700;
  box-shadow:0 8px 24px rgba(13,21,38,.22);
  transition:transform .2s,box-shadow .2s;
}
.wa:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(13,21,38,.28)}
.wa svg{width:20px;height:20px;flex:none}
@media(max-width:560px){.wa span{display:none}.wa{padding:14px;border-radius:50%}}

/* ==========================================================================
   Additions — language toggle, countdown, count-up stats, giving chart,
   timeline, ledger, lightbox, stagger, header shadow.
   ========================================================================== */

/* --- language toggle ---------------------------------------------------- */
.lang-toggle{
  position:absolute;right:var(--pad);top:22px;z-index:5;
  display:inline-flex;align-items:center;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:3px;cursor:pointer;font:inherit;
}
.lang-toggle span{
  font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);
  padding:5px 12px;border-radius:999px;transition:background .2s,color .2s;
}
.lang-toggle span.on{background:var(--navy);color:#fff}
.lang-toggle:hover{border-color:var(--navy)}
@media(max-width:1000px){
  .lang-toggle{position:static;order:2;margin-left:auto}
  .burger{order:3}
  .nav{gap:10px}
}

/* --- header scroll state ------------------------------------------------ */
header.scrolled{box-shadow:0 6px 24px rgba(13,21,38,.09)}

/* --- live countdown ----------------------------------------------------- */
.count-grid{display:flex;gap:10px;margin-left:auto}
.count-cell{
  min-width:64px;text-align:center;background:var(--navy);color:#fff;
  border-radius:3px;padding:9px 8px 7px;
}
.count-cell b{display:block;font-family:'Instrument Serif',serif;font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.count-cell span{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#B9C2D6;margin-top:4px}
.count-cell.live{background:var(--flame)}
@media(max-width:560px){
  .count-grid{margin-left:0;width:100%;justify-content:flex-start}
  .count-cell{min-width:0;flex:1}
}

/* --- giving: where the money goes --------------------------------------- */
.money{display:grid;gap:26px}
.money-row{display:grid;grid-template-columns:200px 1fr 90px;gap:18px;align-items:center}
.money-row .lbl{font-weight:600;color:var(--navy);font-size:16px}
.money-row .lbl small{display:block;font-weight:500;color:var(--muted);font-size:13px}
.money-row .amt{font-family:'Instrument Serif',serif;font-size:22px;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums}
.bar{height:14px;background:var(--stone);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--navy);transition:width 1.2s cubic-bezier(.22,.7,.3,1)}
.bar i.flame{background:var(--flame)}
.bar i.ember{background:var(--ember)}
.money-note{
  margin-top:34px;padding:26px 30px;background:#fff;border-left:3px solid var(--flame);
  font-size:17px;color:var(--body);
}
.money-note b{color:var(--navy)}
@media(max-width:560px){.money-row{grid-template-columns:1fr 70px;gap:10px}.money-row .bar{grid-column:1/-1}}

/* --- fact strip --------------------------------------------------------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.fact{background:#fff;padding:24px 22px}
.fact b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:8px}
.fact span{font-size:16.5px;font-weight:600;color:var(--navy)}
@media(max-width:1000px){.facts{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.facts{grid-template-columns:1fr}}

/* --- commitments (donor promises) --------------------------------------- */
.promise{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.promise:last-child{border-bottom:none}
.promise .tick{
  width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:13px;margin-top:2px;
}
.promise p{color:var(--body);font-size:16px}
.promise p b{color:var(--navy)}

/* --- timeline ------------------------------------------------------------ */
.tl{position:relative;padding-left:34px}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding:0 0 34px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-32px;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--paper);border:3px solid var(--flame);
}
.tl-item b{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--flame);font-weight:700;margin-bottom:6px}
.tl-item h3{font-size:23px;margin-bottom:6px}
.tl-item p{color:var(--muted);font-size:15.5px;max-width:36em}

/* --- lightbox ------------------------------------------------------------ */
.lightbox{
  position:fixed;inset:0;z-index:120;background:rgba(13,21,38,.92);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;
  padding:34px;opacity:0;pointer-events:none;transition:opacity .25s;
}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:min(92vw,860px);max-height:78vh;width:auto;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox figcaption{color:#C9D2E4;font-size:15px;text-align:center;max-width:46em}
.lightbox .close{
  position:absolute;top:20px;right:24px;background:none;border:none;color:#fff;
  font-size:34px;line-height:1;cursor:pointer;padding:8px;
}
.flyer,.zoomable{cursor:zoom-in}

/* --- staggered reveals --------------------------------------------------- */
.reveal.in > .card, .reveal.in > .tile, .reveal.in > .person, .reveal.in > .fact{animation:rise .7s ease both}
.reveal > .card, .reveal > .tile, .reveal > .person, .reveal > .fact{animation-delay:calc(var(--d,0)*90ms)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .reveal.in > .card,.reveal.in > .tile,.reveal.in > .person,.reveal.in > .fact{animation:none}
  .bar i{transition:none}
}

/* --- inline player ------------------------------------------------------- */
.frame{cursor:pointer}
.frame.playing::after,.frame.playing .play{display:none}

/* ==========================================================================
   Professional polish layer — refined interactions, depth, and rhythm.
   ========================================================================== */

/* selection + rendering */
::selection{background:var(--navy);color:#fff}
.dark ::selection,.cta ::selection,footer ::selection{background:var(--flame);color:#fff}
img{height:auto}

/* buttons: subtle lift and depth */
.btn{border-radius:3px;transition:background .2s,border-color .2s,color .2s,transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-1.5px);box-shadow:0 8px 20px rgba(13,21,38,.16)}
.btn:active{transform:none;box-shadow:none}
.btn.flame:hover{box-shadow:0 8px 22px rgba(198,77,17,.32)}
.menu a.btn:hover{transform:none;box-shadow:0 6px 16px rgba(13,21,38,.18)}

/* cards and tiles: gentle lift on hover */
.card,.tile,.person,.fact{transition:background .25s,transform .25s,box-shadow .25s}
.card:hover,.fact:hover{background:#fff;transform:translateY(-4px);box-shadow:0 16px 36px rgba(13,21,38,.10);position:relative;z-index:2}
.dark .tile:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.28);position:relative;z-index:2}
.person:hover{background:#fff}

/* banner: quiet ember flourish to match the hero */
.banner{position:relative;overflow:hidden}
.banner::before{
  content:"";position:absolute;top:-190px;right:-150px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(198,77,17,.06),transparent 65%);pointer-events:none;
}
.banner .wrap{position:relative}

/* media surfaces */
.frame{box-shadow:0 22px 54px rgba(13,21,38,.18);border-radius:4px}
.map{border-radius:4px;box-shadow:0 10px 30px rgba(13,21,38,.08)}
.flyer{border-radius:4px}

/* numeric alignment everywhere numbers appear */
.stat b,.money-row .amt,.count-cell b{font-variant-numeric:tabular-nums}

/* links inside prose: cleaner underline */
main p a{text-decoration:none;border-bottom:1.5px solid var(--ember);transition:border-color .2s}
main p a:hover{border-color:var(--flame)}

/* forms: focused fields glow softly */
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(25,41,77,.10)}
input,select,textarea{border-radius:3px;transition:border-color .2s,box-shadow .2s}

/* details/faq: smoother affordance */
.q summary{transition:color .2s}
.q summary:hover{color:var(--flame)}

/* footer links */
.foot a{transition:color .2s}
.legal a:hover{color:#fff}

/* tighter small-screen rhythm */
@media(max-width:560px){
  section{padding:56px 0}
  .sec-head{margin-bottom:38px}
  .stats{gap:20px}
  .stat b{font-size:44px}
}

/* print: keep it readable, drop chrome */
@media print{
  header,.wa,.to-top,.lang-toggle,.count-grid,.cta,iframe{display:none !important}
  body{background:#fff;color:#000}
  section{padding:24px 0}
}

/* --- Scripture verse band ------------------------------------------------ */
.verse{padding:76px 0;text-align:center}
.verse .v-text{
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(24px,3.4vw,40px);line-height:1.35;color:#fff;
  max-width:30em;margin:0 auto 18px;
}
.verse .v-ref{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--ember);margin:0;
}

/* ==========================================================================
   Polish pass 3 — entrance motion, richer surfaces, micro-interactions.
   ========================================================================== */

/* hero entrance: headline, lead and buttons rise in on load */
@keyframes enter{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero .eyebrow{animation:enter .7s .05s cubic-bezier(.22,.7,.3,1) both}
.hero h1{animation:enter .8s .15s cubic-bezier(.22,.7,.3,1) both}
.hero .lead{animation:enter .8s .3s cubic-bezier(.22,.7,.3,1) both}
.hero .row{animation:enter .8s .42s cubic-bezier(.22,.7,.3,1) both}
.hero-mark img{animation:enter 1s .3s cubic-bezier(.22,.7,.3,1) both}
.hero .when,.hero .now{animation:enter .9s .55s cubic-bezier(.22,.7,.3,1) both}

/* soft halo behind the hero logo */
.hero-mark{position:relative}
.hero-mark::before{
  content:"";position:absolute;width:120%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(198,77,17,.10),rgba(25,41,77,.05) 55%,transparent 72%);
  z-index:-1;
}

/* language band: fade the edges, pause on hover */
.band{position:relative}
.band::before,.band::after{
  content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none;
}
.band::before{left:0;background:linear-gradient(90deg,var(--navy),transparent)}
.band::after{right:0;background:linear-gradient(270deg,var(--navy),transparent)}
.band:hover .ticker{animation-play-state:paused}

/* nav links: animated underline */
.menu a:not(.btn){position:relative;border-bottom:none}
.menu a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:var(--flame);transition:width .25s cubic-bezier(.22,.7,.3,1);
}
.menu a:not(.btn):hover::after,.menu a.on:not(.btn)::after{width:100%}
@media(max-width:1000px){.menu a:not(.btn)::after{display:none}}

/* flyers: image eases larger under the cursor */
.flyer{overflow:hidden}
.flyer img{transition:transform .5s cubic-bezier(.22,.7,.3,1)}
.flyer:hover img{transform:scale(1.035)}

/* dark closing call: quiet ember glow */
.cta{position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;left:50%;top:-260px;transform:translateX(-50%);
  width:720px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(198,77,17,.16),transparent 65%);
}
.cta .wrap{position:relative}

/* FAQ answers: ease in when opened */
@keyframes qfade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.q[open] p{animation:qfade .3s ease both}

/* verse band: ember glow behind the words */
.verse{position:relative;overflow:hidden}
.verse::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:640px;height:420px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(198,77,17,.13),transparent 65%);
}
.verse .wrap{position:relative}

/* respect reduced motion for all of the above */
@media (prefers-reduced-motion:reduce){
  .hero .eyebrow,.hero h1,.hero .lead,.hero .row,.hero-mark img,.hero .when,.hero .now{animation:none}
  .flyer:hover img{transform:none}
  .q[open] p{animation:none}
}

/* --- small-phone header fix: keep brand, toggle and menu button on screen -- */
@media(max-width:1000px){
  .nav{flex-wrap:nowrap}
  .brand{min-width:0;gap:10px}
}
@media(max-width:560px){
  .nav{gap:6px}
  .brand img{height:36px}
  .brand b{font-size:17px}
  .brand i{display:none}
  .lang-toggle{padding:2px}
  .lang-toggle span{padding:4px 9px;font-size:11px}
  .burger{padding:8px;flex:none}
}

/* --- accessibility: deepen the flame tone for small label text so it meets
       WCAG AA contrast on white as well as paper backgrounds --- */
.eyebrow,.card .kicker{color:#A8430E}
.eyebrow::before{background:#A8430E}
.dark .eyebrow{color:var(--ember)}
.dark .eyebrow::before{background:var(--ember)}

/* ==========================================================================
   On-page quick links + tablet responsive layer.
   ========================================================================== */

/* --- subnav: chip row under each page banner --------------------------- */
.subnav{background:#fff;border-bottom:1px solid var(--line)}
.subnav .wrap{
  display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding-top:12px;padding-bottom:12px;scrollbar-width:none;
}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{
  flex:none;text-decoration:none;font-size:13.5px;font-weight:600;color:var(--muted);
  padding:8px 16px;border:1px solid var(--line);border-radius:999px;white-space:nowrap;
  transition:color .2s,border-color .2s,background .2s;
}
.subnav a:hover{color:#fff;background:var(--navy);border-color:var(--navy)}

/* --- tablet layer: use the width between phone and desktop -------------- */
@media(max-width:1000px) and (min-width:641px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .people{grid-template-columns:repeat(2,1fr)}
  .flyers{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1000px) and (min-width:701px){
  .when{grid-template-columns:repeat(3,1fr)}
  .when div{border-right:1px solid var(--line);border-bottom:none;padding:28px 24px 28px 0}
  .when div:last-child{border-right:none}
  .stats{grid-template-columns:repeat(4,1fr)}
}

/* tablet: when a 2-column row ends with an odd card, let it span the row */
@media(max-width:1000px) and (min-width:641px){
  .cards > .card:last-child:nth-child(odd){grid-column:1/-1}
  .people > .person:last-child:nth-child(odd){grid-column:1/-1}
  .grid2 > .tile:last-child:nth-child(odd){grid-column:1/-1}
}

/* --- logo breathing room: restore side padding in the mobile header ----- */
@media(max-width:1000px){
  .nav{padding:0 var(--pad)}
  .burger{margin-right:calc(var(--pad) * -0.4)}
}

/* --- logo sizing guard: dimension attributes reserve space (no layout
       shift) while CSS keeps the rendered size correct ------------------- */
.brand img{height:48px;width:auto}
.foot img{height:58px;width:auto}
.hero-mark img{width:100%;max-width:330px;height:auto}
@media(max-width:1000px){.hero-mark img{max-width:210px}}
@media(max-width:560px){.brand img{height:36px}}

/* ==========================================================================
   Footer, rebuilt — info strip, social icons, tidier columns.
   ========================================================================== */
.foot-strip{
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  padding-bottom:44px;margin-bottom:52px;border-bottom:1px solid rgba(255,255,255,.14);
}
.foot-when b{display:block;font-size:20px;color:#fff;font-weight:600;margin-bottom:5px}
.foot-when span{color:#9FA9C2;font-size:15px}
.social{display:flex;gap:10px;margin-top:22px}
.social a{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:#C9D2E4;transition:background .2s,color .2s,transform .2s;
}
.social a:hover{background:var(--flame);color:#fff;transform:translateY(-2px)}
.social svg{width:18px;height:18px}
.foot li a{border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.foot li a:hover{color:#fff;border-bottom-color:var(--ember)}
.legal a{color:#7A85A0}
.legal a:hover{color:#fff}
@media(max-width:560px){
  .foot-strip{padding-bottom:32px;margin-bottom:38px}
  .foot-strip .btn{width:100%}
}