/* ==========================================================================
   Faith Community Church — 1:1 build
   Design frame 1536 CSS px, content container 1280 (128px gutters).
   Verified against Figma node 60:787 and the live-site capture
   (1920 device px @ 1.25 DPR = 1536 CSS px).
   ========================================================================== */

:root{
  --blue:      #1f3089;
  --blue-dk:   #182563;
  --dark:      #1d1d1d;
  --cream:     #f8f1e6;
  --orange:    #ed5a2f;
  --orange-lt: #fe9446;
  --gold:      #ffc646;
  --body:      #252628;
  --green:     #404f40;
  --border:    #dedede;
  --lilac:     #c5b2ff;

  --f-display: "Bebas Neue", Impact, sans-serif;
  --f-sans:    "Barlow", Helvetica, Arial, sans-serif;
  --f-cond:    "Barlow Condensed", "Barlow", Helvetica, Arial, sans-serif;
  --f-serif:   "Lora", Georgia, serif;
  --f-script:  "Caveat", "Segoe Script", cursive;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:#fff; color:var(--body);
  font-family:var(--f-sans); overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ text-decoration:none; color:inherit; }
h1,h2,h3,p,ul{ margin:0; }
ul{ list-style:none; padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.container{ width:1280px; max-width:calc(100% - 80px); margin:0 auto; }

/* ---------- shared type ---------- */
.h-bebas-74{ font-family:var(--f-display); font-weight:400; font-size:74px; line-height:70.3px; letter-spacing:-1px; color:var(--dark); }
.h-bebas-70{ font-family:var(--f-display); font-weight:400; font-size:70px; line-height:70px;   letter-spacing:-1px; color:var(--dark); }
.lead{ font-family:var(--f-serif); font-size:18px; line-height:27.99px; color:var(--body); }
.lead--center{ text-align:center; }
.accent{ color:var(--orange); }

/* gradient headings — angles derived from Figma gradientTransform matrices */
.grad-lilac,.grad-orange-up,.grad-orange-down,.grad-orange-tl{
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad-lilac{       background-image:linear-gradient(66deg,  var(--lilac) -55%, var(--cream) 48%); }
.grad-orange-up{   background-image:linear-gradient(72deg,  var(--dark) 58%,   var(--orange-lt) 100%); }
.grad-orange-down{ background-image:linear-gradient(197deg, var(--orange-lt) 0%, var(--dark) 30%); }
/* scripture verse uses the mirrored transform: orange enters from the top-left */
.grad-orange-tl{   background-image:linear-gradient(163deg, var(--orange) 0%, var(--dark) 25%); }

/* ---------- handwritten annotations ---------- */
.script{
  font-family:var(--f-script); font-weight:600; line-height:1;
  display:inline-block; white-space:nowrap;
}
.script--gold{ color:var(--gold); }
.script--orange{ color:var(--orange); }
.script--blue{ color:var(--blue); }
.script--green{ color:var(--green); }

/* ---------- chip / eyebrow ---------- */
.chip{
  display:inline-block; padding:3px 10px; background:var(--cream); color:var(--dark);
  font-family:var(--f-cond); font-weight:500; font-size:18px;
  line-height:25.92px; letter-spacing:2px; text-transform:uppercase;
}
.chip--dark{ background:var(--dark); color:#fff; padding:5px 10px; }
.chip--cream{ background:var(--cream); color:var(--dark); }
.chip--cream-text{ color:var(--cream); padding:3px 10px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:60px; padding:0 41px; border:.8px solid transparent;
  font-family:var(--f-cond); font-weight:700; font-size:20px; line-height:28px;
  letter-spacing:.5px; text-transform:uppercase; white-space:nowrap;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--blue{ background:var(--blue); border-color:var(--blue); color:#fff; }
.btn--blue:hover{ background:var(--blue-dk); border-color:var(--blue-dk); }
.btn--white{ background:#fff; border-color:#fff; color:var(--dark); }
.btn--white:hover{ background:var(--cream); border-color:var(--cream); }
.btn--orange{ background:var(--orange); border-color:var(--orange); color:#fff; }
.btn--orange:hover{ background:#d44a22; border-color:#d44a22; }
.btn--icon svg{ width:18px; height:18px; flex:none; }

/* ---------- arrow links ---------- */
.link-arrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-cond); font-weight:700; font-size:20px; line-height:28px;
  letter-spacing:.5px; text-transform:uppercase;
}
.ico-ne{ width:12px; height:12px; flex:none; }
.link-arrow--cream{ color:var(--cream); }
.link-arrow--dark{ color:var(--dark); }

/* ---------- rails ---------- */
.rail{ display:flex; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
.rail::-webkit-scrollbar{ display:none; }

/* ==========================================================================
   NAV — transparent, overlaid on the hero
   ========================================================================== */
.nav{ position:absolute; top:0; left:0; right:0; z-index:20; }
.nav__inner{
  display:flex; align-items:center; gap:40px;
  height:124px; padding:0 40px 0 40px;
}
.nav__logo img{ width:230px; height:40px; object-fit:contain; }
.nav__menu{ display:flex; align-items:center; gap:26px; margin-left:56px; }
.nav__menu a{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--f-cond); font-weight:500; font-size:18px; letter-spacing:1px;
  text-transform:uppercase; color:#fff; transition:opacity .2s ease;
}
.nav__menu a:hover{ opacity:.75; }
.nav__menu a.is-active{ border-bottom:1.5px solid #fff; padding-bottom:2px; }
.caret{
  width:0; height:0; border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:4px solid currentColor; display:inline-block;
}
.nav__right{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.nav__social svg{ width:18px; height:18px; color:#fff; }
.nav__social:hover svg{ opacity:.75; }
.nav__give{
  display:inline-flex; align-items:center; justify-content:center;
  width:102px; height:52px; background:var(--blue); color:#fff;
  font-family:var(--f-cond); font-weight:700; font-size:19px; letter-spacing:1px;
  text-transform:uppercase; transition:background-color .2s ease;
}
.nav__give:hover{ background:var(--blue-dk); }

/* ==========================================================================
   1. HERO  (1536 x 730)
   ========================================================================== */
.hero{
  position:relative; height:730px; padding:194px 0 0 40px;
  background:url("img/hero-bg.jpg") center/cover no-repeat;
}
.hero__stack{ position:relative; z-index:2; width:966px; max-width:100%; }
.hero__title{ font-family:var(--f-display); font-weight:400; letter-spacing:-2px; }
.hero__line1{ display:block; font-size:150px; line-height:127.5px; color:var(--cream); text-transform:uppercase; }
.hero__line2{ display:block; font-size:123px; line-height:104.55px; color:var(--cream); text-transform:uppercase; }
.hero__line2 em{ font-style:normal; color:var(--gold); }
.hero__sub{ margin-top:50px; font-size:32px; line-height:40px; letter-spacing:-1px; color:#fff; }
.hero__actions{ display:flex; gap:20px; margin-top:50px; }

/* SUNDAYS panel — bottom-right, 250px top-left radius */
.services{
  position:absolute; right:0; bottom:0; z-index:2;
  width:490px; height:408px;
  padding:100px 56px 0 120px;
  background:var(--blue); border-top-left-radius:250px;
  color:#fff;
}
.services__script{ position:absolute; top:66px; right:44px; font-size:50px; transform:rotate(-11deg); }
.services__title{
  margin-top:20px; font-family:var(--f-display); font-weight:400;
  font-size:90px; line-height:76px; letter-spacing:0; color:#fff;
}
.services__times{ margin-top:30px; font-size:20px; line-height:24px; font-weight:400; }
.services__note{
  margin-top:10px; max-width:250px;
  font-size:18px; line-height:26px; color:#fff; text-align:center;
}

/* ==========================================================================
   2. INTRO + LIVE STREAM  (1536 x 1265)
   ========================================================================== */
.intro{ position:relative; z-index:1; padding-top:80px; }
.intro__head{ text-align:center; }
.intro__title{
  font-family:var(--f-display); font-weight:400; font-size:74px;
  line-height:70.3px; letter-spacing:-1px; color:var(--dark); text-transform:uppercase;
}
.intro__sub{ margin:40px auto 0; max-width:676px; font-size:24px; line-height:31.92px; color:var(--body); }

.stream{ position:relative; margin-top:130px; }
.stream__script{
  position:absolute; right:6px; top:-94px; font-size:34px; transform:rotate(-8deg);
}
.script__arrow{ position:absolute; left:14px; top:32px; width:42px; height:42px; transform:rotate(6deg); }
.stream__caption{ text-align:center; font-size:24px; line-height:31.92px; color:var(--green); }
.stream__frame{
  position:relative; display:block; margin-top:20px;
  aspect-ratio:16/9; background:#eee; border-radius:20px; overflow:hidden;
}
.stream__frame img{ width:100%; height:100%; object-fit:cover; }
.stream__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:68px; height:48px; opacity:.92; transition:opacity .2s ease;
}
.stream__frame:hover .stream__play{ opacity:1; }
.stream__play svg{ width:100%; height:100%; }

/* ==========================================================================
   3. MORE LIVE STREAMS  (dark panel, pulled up 150px)
   ========================================================================== */
.streams__panel{
  margin-top:-150px; height:640px; padding-top:200px;
  background:var(--dark) url("img/dark-texture.jpg") center/cover no-repeat;
}
.streams__head{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.streams__title{ font-family:var(--f-display); font-weight:400; font-size:74px; line-height:70.3px; letter-spacing:-1px; text-transform:uppercase; }
.rail--streams{ margin-top:60px; gap:30px; }
.stream-card{
  position:relative; flex:none; width:297px; height:210px;
  border-radius:15px; overflow:hidden;
}
.stream-card img{ width:100%; height:100%; object-fit:cover; }
.play-dot{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.85);
}
.play-dot::after{
  content:""; position:absolute; left:53%; top:50%; transform:translate(-50%,-50%);
  border-left:11px solid var(--dark);
  border-top:7px solid transparent; border-bottom:7px solid transparent;
}

/* ==========================================================================
   4. OUR MINISTRIES  (1536 x 1046)
   ========================================================================== */
.ministries{
  padding:70px 0 100px; text-align:center;
  background:var(--dark) url("img/dark-texture.jpg") center/cover no-repeat;
}
.ministries__title{
  display:inline-block;
  font-family:var(--f-display); font-weight:400; font-size:100px;
  line-height:90px; letter-spacing:-1px; text-transform:uppercase;
}
.ministries__carousel{ position:relative; margin-top:80px; padding:3px 0; }
.rail--ministries{ gap:40px; padding:0 40px; }
.min-card{
  position:relative; flex:none; width:448px; height:560px;
  border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; padding:30px;
}
.min-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.min-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%);
}
.min-card h3,.min-card .link-arrow{ position:relative; z-index:1; }
.min-card h3{ font-size:32px; line-height:40px; letter-spacing:-1px; font-weight:400; color:var(--cream); text-align:center; }
.min-card .link-arrow{ align-self:center; gap:10px; }
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:56px; height:56px; border-radius:50%;
  background:var(--cream); color:var(--dark);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(0,0,0,.35); transition:background-color .2s ease;
}
.carousel-btn:hover{ background:#fff; }
.carousel-btn svg{ width:16px; height:16px; }
.carousel-btn--prev{ left:24px; }
.carousel-btn--next{ right:24px; }
.ministries__cta{ margin-top:80px; text-align:center; }

/* ==========================================================================
   5. MISSION / VISION / VALUES  (1536 x 398)
   ========================================================================== */
.mvv{ padding:50px 0 70px; }
.mvv .container{ position:relative; }
.mvv__card{
  display:grid; grid-template-columns:repeat(3,1fr);
  height:278px; border:.8px solid var(--border); border-radius:20px;
}
.mvv__cell{
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:20px;
  padding:0 50px; text-align:center;
}
.mvv__cell + .mvv__cell{ border-left:.8px solid var(--border); }
.mvv__cell h3{ font-size:32px; line-height:40px; letter-spacing:-1px; font-weight:500; color:var(--dark); }
.mvv__cell p{ font-family:var(--f-serif); font-size:18px; line-height:27.99px; color:var(--body); }
.mvv__ribbon{
  position:absolute; left:50%; transform:translateX(-50%); bottom:-28px;
  padding:0 14px; background:#fff;
  font-size:44px; line-height:56px; white-space:nowrap;
}

/* ==========================================================================
   6. PRAYER  (1536 x 580), 1px rule on top
   ========================================================================== */
.prayer{ border-top:1px solid var(--dark); padding:82px 0 100px; }
.prayer__inner{ display:flex; align-items:flex-start; justify-content:space-between; }
.prayer__media{ flex:none; width:576px; margin-top:-50px; }
.prayer__media img{ width:576px; height:398px; object-fit:cover; border-radius:20px; background:#968b87; }
.prayer__body{
  flex:none; width:576px; min-height:398px;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:30px;
}

/* ==========================================================================
   7. COMMUNITY / WHATSAPP  (1536 x 755)
   ========================================================================== */
.community{ display:flex; min-height:755px; background:var(--cream); }
.community__media{ flex:0 0 50%; }
.community__media img{ width:100%; height:100%; object-fit:cover; }
.community__body{ flex:0 0 50%; min-width:0; display:flex; align-items:center; padding:0 104px; }
.community__stack{ display:flex; flex-direction:column; align-items:flex-start; gap:30px; width:560px; max-width:100%; }

/* ==========================================================================
   8. FEATURED SERMONS  (1536 x 772)
   ========================================================================== */
.sermons{ padding:60px 0 100px; background:var(--blue); }
.sermons__head{ display:flex; flex-direction:column; align-items:flex-start; gap:30px; }
.sermons__title{
  font-family:var(--f-display); font-weight:400; font-size:100px;
  line-height:90px; letter-spacing:-1px; color:var(--cream); text-transform:uppercase;
}
.rail--sermons{ margin-top:80px; gap:40px; }
.sermon{ flex:none; width:400px; display:flex; flex-direction:column; }
.sermon__img{ display:block; border-radius:20px; overflow:hidden; }
.sermon__img img{ width:400px; height:225px; object-fit:cover; transition:transform .4s ease; }
.sermon__img:hover img{ transform:scale(1.04); }
.sermon__date{ margin-top:25px; font-size:13px; line-height:20.15px; letter-spacing:1px; color:var(--cream); text-transform:uppercase; }
.sermon__title{ margin-top:15px; font-size:24px; line-height:31.92px; font-weight:500; color:var(--cream); }
.sermon__by{ display:flex; align-items:center; height:48px; margin-top:15px; color:var(--cream); }
.sermon__by .avatar{ width:63px; height:48px; flex:none; }
.sermon__by span:last-child{ font-size:16px; line-height:24px; font-weight:500; }

/* ==========================================================================
   9. MEET OUR PASTORS  (1536 x 929)
   ========================================================================== */
.pastors{ padding:80px 0 5px; }
.pastors__head{
  width:1456px; max-width:calc(100% - 80px); margin:0 auto;
  display:flex; flex-direction:column; align-items:flex-start; gap:30px;
}
.pastors__title{ font-family:var(--f-display); font-weight:400; font-size:100px; line-height:90px; letter-spacing:-1px; text-transform:uppercase; }
.pastors__viewport{ width:1456px; max-width:calc(100% - 80px); margin:80px auto 0; overflow:hidden; }
.rail--pastors{ gap:30px; }
.pastor{
  position:relative; flex:none; width:465px; height:550px;
  border-radius:20px; overflow:hidden;
  display:flex; align-items:flex-end; padding:25px;
}
.pastor img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pastor::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%);
}
.pastor h3{ position:relative; z-index:1; font-size:32px; line-height:40px; letter-spacing:-1px; font-weight:500; color:var(--cream); }

/* ==========================================================================
   10. GET INVOLVED  (1536 x 1240)
   ========================================================================== */
.involve{ padding:160px 0 0; }
.involve__head{ position:relative; width:680px; max-width:100%; margin:0 auto; text-align:center; }
.involve__title{ display:inline-block; font-family:var(--f-display); font-weight:400; font-size:150px; line-height:127.5px; letter-spacing:-2px; text-transform:uppercase; }
.involve__script{ position:absolute; right:22px; top:195px; font-size:42px; transform:rotate(-14deg); }
.involve__head .lead{ margin-top:50px; }
.involve__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:80px; }
.involve-card{
  background:var(--cream); border-radius:10px; padding:60px 50px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.involve-card h3{
  display:flex; align-items:center; justify-content:center; min-height:80px;
  font-size:32px; line-height:40px; letter-spacing:-1px; font-weight:500; color:var(--dark);
}
.involve-card figure{ margin:0; width:273px; height:273px; max-width:100%; }
.involve-card figure img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.involve-card p{ margin-top:40px; font-family:var(--f-serif); font-size:18px; line-height:27.99px; color:var(--body); }
.involve-card .btn{ margin-top:10px; }

/* ==========================================================================
   11. FAQ  (1536 x 716)
   ========================================================================== */
.faq{ padding:160px 0 0; }
.faq__inner{ display:flex; align-items:flex-start; }
.faq__aside{ flex:none; width:486px; display:flex; flex-direction:column; align-items:flex-start; gap:30px; }
.faq__list{ flex:none; width:691px; margin-top:-25px; }
.faq-item{ border-bottom:.8px solid var(--border); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:82px; padding:25px 0; cursor:pointer; list-style:none;
  font-size:24px; line-height:31.92px; font-weight:500; color:var(--dark);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item[open] summary{ color:var(--orange); }
.faq-icon{ position:relative; flex:none; width:16px; height:16px; }
.faq-icon::before,.faq-icon::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor; transform:translate(-50%,-50%);
}
.faq-icon::before{ width:13px; height:1.6px; }
.faq-icon::after{ width:1.6px; height:13px; transition:opacity .2s ease; }
.faq-item[open] .faq-icon::after{ opacity:0; }
.faq-item p{ padding:15px 0 40px; font-family:var(--f-serif); font-size:18px; line-height:27.99px; color:var(--body); }

/* ==========================================================================
   12. SCRIPTURE  (1536 x 622)
   ========================================================================== */
.scripture{ padding:150px 0 0; }
.scripture__inner{ width:860px; max-width:calc(100% - 80px); margin:0 auto; text-align:center; }
.scripture__verse{ display:inline-block; font-family:var(--f-display); font-weight:400; font-size:150px; line-height:127.5px; letter-spacing:-2px; text-transform:uppercase; }
.scripture__ref{ margin-top:13px; font-size:19px; line-height:23.75px; letter-spacing:-1px; font-weight:500; color:var(--dark); }
.scripture__cta{ margin-top:13px; font-size:32px; line-height:40px; letter-spacing:-1px; font-weight:500; color:var(--dark); }

/* ==========================================================================
   13. PHOTO STRIP  (1536 x 256)
   ========================================================================== */
.strip{ display:grid; grid-template-columns:repeat(6,1fr); margin-top:160px; }
.strip--flush{ margin-top:0; }
.strip__cell{ aspect-ratio:1; }
.strip__cell img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   14. FOOTER  (1536 x 610)
   ========================================================================== */
.footer{
  padding:120px 0 60px;
  background:var(--dark) url("img/footer-bg.jpg") center/cover no-repeat;
  color:#fff;
}
.footer__cols{ display:flex; justify-content:space-between; gap:60px; }
.footer__brand{ width:515px; }
.footer__brand h2{ font-size:32px; line-height:40px; letter-spacing:-1px; font-weight:500; }
.footer__brand p{ margin-top:20px; font-family:var(--f-serif); font-size:18px; line-height:27.99px; color:rgba(255,255,255,.74); }
.footer__col h3{ font-size:24px; line-height:31.92px; font-weight:500; }
.footer__col ul{ margin-top:30px; }
.footer__col li + li{ margin-top:16px; }
.footer__col a,.footer__addr{ font-family:var(--f-serif); font-size:18px; line-height:27.99px; }
.footer__col a{ color:#fff; transition:opacity .2s ease; }
.footer__col a:hover{ opacity:.7; }
.footer__col--pages{ width:146px; }
.footer__col--location{ width:211px; }
.footer__col--contact{ width:227px; }
.footer__addr{ margin-top:30px; color:rgba(255,255,255,.68); }
.footer__social{ display:flex; gap:25px; margin-top:30px; }
.footer__social svg{ width:20px; height:20px; color:var(--cream); }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:150px; }
.footer__logo img{ width:322px; height:58px; object-fit:contain; }
.footer__copy{ font-family:var(--f-serif); font-size:16px; line-height:24px; color:rgba(255,255,255,.99); }
.footer__copy span{ font-size:18px; line-height:18px; color:rgba(255,255,255,.6); margin-right:4px; }

/* back-to-top */
.to-top{
  position:fixed; right:28px; bottom:28px; z-index:30;
  width:44px; height:44px; border-radius:6px;
  background:var(--orange); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.to-top svg{ width:18px; height:18px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1400px){
  .services{ width:420px; padding:90px 40px 0 96px; border-top-left-radius:200px; }
  .hero__line1{ font-size:11vw; line-height:.85em; }
  .hero__line2{ font-size:9vw; line-height:.85em; }
  .intro__title,.streams__title,.h-bebas-74{ font-size:5.4vw; line-height:.95em; }
  .ministries__title,.sermons__title,.pastors__title{ font-size:7vw; line-height:.9em; }
  .involve__title,.scripture__verse{ font-size:10vw; line-height:.85em; }
  .nav__menu{ margin-left:24px; gap:18px; }
}

@media (max-width:1100px){
  .nav__menu{ display:none; }
}

@media (max-width:1000px){
  .hero{ height:auto; padding:180px 24px 100px; }
  .hero__sub{ font-size:24px; margin-top:30px; }
  .services{ position:static; width:100%; height:auto; margin-top:60px;
             padding:60px 32px 48px; border-top-left-radius:120px; }
  .services__script{ top:24px; right:32px; }
  .services__note{ max-width:none; }
  .container{ max-width:calc(100% - 48px); }
  .prayer__inner,.faq__inner{ flex-direction:column; gap:50px; }
  .prayer__media,.prayer__body,.faq__aside,.faq__list{ width:100%; }
  .prayer__media{ margin-top:0; }
  .prayer__media img{ width:100%; }
  .faq__list{ margin-top:0; }
  .community{ flex-direction:column; }
  .community__media{ flex:none; height:400px; }
  .community__body{ flex:none; padding:60px 24px; }
  .community__stack{ width:100%; }
  .involve__grid{ grid-template-columns:1fr; }
  .involve__script{ right:0; top:auto; bottom:-8px; }
  .mvv__card{ grid-template-columns:1fr; height:auto; }
  .mvv__cell{ padding:40px 30px; }
  .mvv__cell + .mvv__cell{ border-left:0; border-top:.8px solid var(--border); }
  .mvv__ribbon{ position:static; transform:none; display:block; text-align:center; margin-top:30px; white-space:normal; }
  .footer__cols{ flex-wrap:wrap; }
  .footer__brand{ width:100%; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; margin-top:80px; }
  .strip{ grid-template-columns:repeat(3,1fr); }
  .pastors__viewport{ max-width:calc(100% - 48px); }
  .involve,.faq,.scripture{ padding-top:80px; }
  .stream__script{ right:0; top:-76px; }
  .carousel-btn{ display:none; }
}

@media (max-width:640px){
  .hero__actions{ flex-wrap:wrap; }
  .btn{ padding:0 28px; }
  .min-card,.pastor,.stream-card,.sermon{ width:80vw; }
  .min-card,.pastor{ height:70vw; }
  .sermon__img img{ width:100%; }
  .strip{ grid-template-columns:repeat(2,1fr); }
  .rail--ministries{ padding:0 24px; }
}

/* ==========================================================================
   PAGE BANNER + TEAM GRID  (Ministering Team — Figma node 61:1956)
   ========================================================================== */
.page-hero{
  position:relative; height:760px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 0 119px 128px;
  background:#1d1d1d url("img/team-hero.jpg") center/cover no-repeat;
}
.page-hero::before{
  content:""; position:absolute; inset:0; background:var(--dark); opacity:.2;
}
.page-hero__title,
.page-hero__crumbs{ position:relative; z-index:1; }
.page-hero__title{
  font-family:var(--f-display); font-weight:400; font-size:150px;
  line-height:127.5px; letter-spacing:-2px; color:#fff; text-transform:uppercase;
}
.page-hero__crumbs{
  display:flex; align-items:center; margin-top:20px;
  font-size:13px; line-height:20.15px; letter-spacing:1px; text-transform:uppercase;
}
.page-hero__crumbs a{ color:#fff; }
.page-hero__crumbs a:hover{ opacity:.75; }
.page-hero__crumbs .sep{ color:rgba(255,255,255,.7); margin:0 20px; }
.page-hero__crumbs .here{ color:rgba(255,255,255,.7); }

.team{ padding:150px 0; }
.team__grid{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:30px; row-gap:40px; }
.team-card{
  position:relative; height:550px; border-radius:20px; overflow:hidden;
  display:flex; align-items:flex-end; padding:0 25px 30px;
}
.team-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.team-card::after{ content:""; position:absolute; inset:0; background:#000; opacity:.3; }
.team-card h3{
  position:relative; z-index:1;
  font-size:32px; line-height:40px; letter-spacing:-1px; font-weight:500; color:var(--cream);
}
.team--ministries{ padding-top:0; }
.team__head{ max-width:720px; margin-bottom:60px; }
.team__head .h-bebas-74{ margin-top:22px; }
.team__head .lead{ margin-top:18px; }
.team-card__content{ position:relative; z-index:1; }
.team-card__role{
  margin-bottom:10px; font-family:var(--f-cond); font-weight:700; font-size:15px;
  letter-spacing:1.8px; text-transform:uppercase; color:var(--gold);
}
.team-card__status{ margin-top:18px; font-family:var(--f-serif); font-size:17px; color:var(--cream); }
.team-card__link{
  display:inline-flex; align-items:center; gap:9px; margin-top:18px;
  font-family:var(--f-cond); font-size:17px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--cream);
}
.team-card__link:hover{ color:var(--gold); }
.team-card--pending{
  align-items:center; padding:40px; border:1px dashed rgba(24,37,99,.45);
  background:linear-gradient(145deg, #24358a, #182563);
}
.team-card--pending::after{ display:none; }
.team-card--pending .team-card__content{ max-width:270px; }
.team-card--pending .team-card__role{ color:var(--gold); }
.team-card--elvis img{ object-position:center top; }
.team-card--mercy img{ object-position:center 35%; }

.pager{ display:flex; align-items:center; gap:15px; margin-top:30px; }
.pager a,.pager span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 8px;
  border:.8px solid var(--border);
  font-family:var(--f-serif); font-size:18px; line-height:18px;
  transition:border-color .2s ease, color .2s ease;
}
.pager .is-current{ color:var(--body); }
.pager a{ color:var(--green); }
.pager a:hover{ border-color:var(--green); }
.pager .pager__next{ width:40px; }
.pager .pager__next svg{ width:18px; height:9px; }

@media (max-width:1000px){
  .page-hero{ height:auto; padding:220px 24px 60px; }
  .page-hero__title{ font-size:13vw; line-height:.85em; }
  .team{ padding:80px 0; }
  .team--ministries{ padding-top:0; }
  .team__grid{ grid-template-columns:repeat(2,1fr); column-gap:20px; row-gap:24px; }
  .team-card{ height:66vw; }
}
@media (max-width:640px){
  .team__grid{ grid-template-columns:1fr; }
  .team-card{ height:110vw; }
  .team__head{ margin-bottom:40px; }
  .team__head .h-bebas-74{ font-size:54px; line-height:.94; }
  .team-card--pending{ height:72vw; min-height:300px; }
}

/* ==========================================================================
   EXTENDED PAGES (about / ministries / sermons / contact)
   Not in Figma — composed from the tokens and components above.
   ========================================================================== */

/* section heading block */
.sec-head{ display:flex; flex-direction:column; align-items:flex-start; gap:30px; }
.sec-head--center{ align-items:center; text-align:center; }
.sec-head__title{
  font-family:var(--f-display); font-weight:400; font-size:100px;
  line-height:90px; letter-spacing:-1px; color:var(--dark); text-transform:uppercase;
}
.sec-head__title--onblue{ color:var(--cream); }
.sec-head .lead{ max-width:760px; }

.section{ padding:150px 0; }
.section--tight{ padding:100px 0; }
.section--cream{ background:var(--cream); }
.section--dark{ background:var(--dark) url("img/dark-texture.jpg") center/cover no-repeat; }
.section--blue{ background:var(--blue); }

/* alternating image + text block */
.duo{ display:flex; align-items:center; gap:128px; }
.duo--flip{ flex-direction:row-reverse; }
.duo__media{ flex:none; width:576px; }
.duo__media img{ width:100%; height:430px; object-fit:cover; border-radius:20px; }
.duo__body{ flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:30px; }
.duo__body .lead + .lead{ margin-top:-10px; }

/* rich text */
.prose p + p{ margin-top:20px; }
.prose{ font-family:var(--f-serif); font-size:18px; line-height:27.99px; color:var(--body); }

/* value / info tiles */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.tiles--2{ grid-template-columns:repeat(2,1fr); }
.tile{ background:var(--cream); border-radius:10px; padding:50px 40px; }
.tile h3{ font-size:32px; line-height:40px; letter-spacing:-1px; font-weight:500; color:var(--dark); }
.tile p{ margin-top:20px; font-family:var(--f-serif); font-size:18px; line-height:27.99px; color:var(--body); }
.tile__num{
  font-family:var(--f-display); font-size:56px; line-height:56px; color:var(--orange);
  display:block; margin-bottom:14px;
}

/* ministries listing */
.min-list{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:30px; row-gap:40px; }
.min-tile{ display:flex; flex-direction:column; }
.min-tile__media{
  position:relative; height:420px; border-radius:20px; overflow:hidden;
  display:flex; align-items:flex-end; padding:30px;
}
.min-tile__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.min-tile__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.65) 100%);
}
.min-tile__media h3{
  position:relative; z-index:1;
  font-size:32px; line-height:40px; letter-spacing:-1px; font-weight:500; color:var(--cream);
}
.min-tile p{ margin-top:20px; font-family:var(--f-serif); font-size:18px; line-height:27.99px; color:var(--body); }
.min-tile .min-tile__leader{
  margin-top:12px; font-family:var(--f-cond); font-size:16px; font-weight:700;
  letter-spacing:.6px; color:var(--green);
}
.min-tile .link-arrow{ margin-top:20px; }

/* sermon archive grid */
.sermon-grid{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:40px; row-gap:50px; }
.sermon-grid .sermon{
  width:auto; overflow:hidden; padding-bottom:26px; background:#fff;
  border:1px solid var(--border); border-radius:16px;
  transition:transform .22s ease, box-shadow .22s ease;
}
.sermon-grid .sermon:hover{ transform:translateY(-5px); box-shadow:0 15px 30px rgba(24,37,99,.12); }
.sermon-grid .sermon__img{ position:relative; cursor:pointer; }
.sermon-grid .sermon__img{ border-radius:0; }
.sermon-grid .sermon__img img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.sermon-grid .sermon__title{ margin:10px 24px 0; color:var(--dark); }
.sermon-grid .sermon__date{ margin:22px 24px 0; color:var(--green); }
.sermon-grid .sermon__by{ min-height:24px; margin:14px 24px 0; color:var(--body); }
.sermons--light .sermon__title{ color:var(--dark); }
.sermons-page__head .lead,.sermons-page__archive-head .lead{ max-width:680px; margin-top:22px; }
.sermons-page__archive-head{ margin-bottom:60px; }
.featured-sermon{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);
  margin-top:70px; overflow:hidden; border:1px solid var(--border);
  border-radius:20px; background:#fff;
}
.featured-sermon__media{ position:relative; min-height:420px; border-radius:0; cursor:pointer; }
.featured-sermon__media img{ display:block; width:100%; height:100%; object-fit:cover; }
.featured-sermon__body{ display:flex; flex-direction:column; align-items:flex-start; padding:56px; }
.featured-sermon__label{
  font-family:var(--f-cond); font-weight:700; font-size:16px; letter-spacing:2px;
  text-transform:uppercase; color:var(--green);
}
.featured-sermon__body h2{ margin-top:18px; font-family:var(--f-bebas); font-size:64px; line-height:.94; letter-spacing:.5px; color:var(--dark); }
.featured-sermon__meta{ margin-top:22px; font-family:var(--f-cond); font-size:18px; letter-spacing:.8px; color:var(--body); }
.featured-sermon__body > p:not(.featured-sermon__label):not(.featured-sermon__meta){ margin-top:24px; font-family:var(--f-serif); font-size:18px; line-height:1.6; color:var(--body); }
.featured-sermon__body .btn{ margin-top:auto; }
.play-badge{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:62px; height:44px; opacity:.92; transition:opacity .2s ease, transform .2s ease;
}
.sermon__img:hover .play-badge{ opacity:1; transform:translate(-50%,-50%) scale(1.06); }
.play-badge svg{ width:100%; height:100%; }

/* video modal */
.vmodal{
  position:fixed; inset:0; z-index:60; display:none;
  align-items:center; justify-content:center; padding:40px;
  background:rgba(15,15,15,.88);
}
.vmodal.is-open{ display:flex; }
.vmodal__inner{ width:min(1100px,100%); }
.vmodal__frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:20px; overflow:hidden; }
.vmodal__frame iframe{ width:100%; height:100%; border:0; }
.vmodal__cap{ margin-top:16px; color:var(--cream); font-size:20px; line-height:28px; }
.vmodal__close{
  position:absolute; top:-52px; right:0; width:40px; height:40px;
  color:var(--cream); display:flex; align-items:center; justify-content:center;
}
.vmodal__close svg{ width:22px; height:22px; }

/* contact */
.contact-grid{ display:flex; gap:128px; align-items:flex-start; }
.contact-info{ flex:none; width:486px; display:flex; flex-direction:column; align-items:flex-start; gap:30px; }
.info-list{ display:flex; flex-direction:column; gap:26px; width:100%; }
.info-row{ display:flex; gap:18px; align-items:flex-start; }
.info-row__ico{
  flex:none; width:44px; height:44px; border-radius:50%;
  background:var(--cream); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
}
.info-row__ico svg{ width:20px; height:20px; }
.info-row h4{
  font-family:var(--f-cond); font-weight:700; font-size:18px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--dark); margin-bottom:4px;
}
.info-row p,.info-row a{ font-family:var(--f-serif); font-size:18px; line-height:27.99px; color:var(--body); }
.info-row a:hover{ color:var(--blue); }

.form{ flex:1; display:flex; flex-direction:column; gap:20px; }
.form__row{ display:flex; gap:20px; }
.form__field{ flex:1; display:flex; flex-direction:column; gap:8px; }
.form__field label{
  font-family:var(--f-cond); font-weight:700; font-size:16px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--dark);
}
.form__field input,.form__field textarea,.form__field select{
  font-family:var(--f-serif); font-size:18px; line-height:27.99px; color:var(--body);
  padding:14px 18px; background:#fff;
  border:.8px solid var(--border); border-radius:0; outline:none;
  transition:border-color .2s ease;
}
.form__field input:focus,.form__field textarea:focus,.form__field select:focus{ border-color:var(--blue); }
.form__field textarea{ resize:vertical; min-height:150px; }
.form__note{ font-family:var(--f-serif); font-size:15px; line-height:24px; color:var(--green); }
.form__status{ font-family:var(--f-serif); font-size:17px; line-height:26px; min-height:26px; }
.form__status.is-ok{ color:var(--green); }
.form__status.is-err{ color:var(--orange); }

.map{ width:100%; height:420px; border:0; border-radius:20px; display:block; }

/* CTA band */
.cta-band{ background:var(--blue); padding:100px 0; }
.cta-band__inner{ display:flex; align-items:center; justify-content:space-between; gap:60px; }
.cta-band h2{
  font-family:var(--f-display); font-weight:400; font-size:74px; line-height:70.3px;
  letter-spacing:-1px; color:var(--cream); text-transform:uppercase; max-width:760px;
}

@media (max-width:1200px){
  .duo,.contact-grid{ gap:60px; }
}
@media (max-width:1000px){
  .section{ padding:80px 0; }
  .section--tight{ padding:60px 0; }
  .sec-head__title{ font-size:9vw; line-height:.9em; }
  .duo,.duo--flip,.contact-grid{ flex-direction:column; gap:40px; }
  .duo__media,.contact-info{ width:100%; }
  .tiles,.min-list,.sermon-grid{ grid-template-columns:repeat(2,1fr); }
  .featured-sermon{ grid-template-columns:1fr; }
  .featured-sermon__media{ min-height:360px; }
  .cta-band__inner{ flex-direction:column; align-items:flex-start; }
  .cta-band h2{ font-size:9vw; line-height:.9em; }
  .vmodal{ padding:20px; }
  .vmodal__close{ top:-44px; }
}
@media (max-width:640px){
  .tiles,.min-list,.sermon-grid{ grid-template-columns:1fr; }
  .featured-sermon{ margin-top:44px; border-radius:14px; }
  .featured-sermon__media{ min-height:240px; }
  .featured-sermon__body{ padding:30px 24px; }
  .featured-sermon__body h2{ font-size:48px; }
  .featured-sermon__meta{ margin-top:18px; font-size:16px; }
  .featured-sermon__body > p:not(.featured-sermon__label):not(.featured-sermon__meta){ margin-top:18px; font-size:16px; }
  .featured-sermon__body .btn{ margin-top:30px; }
  .sermons-page__archive-head{ margin-bottom:40px; }
  .sermon-grid .sermon{ padding-bottom:22px; }
  .sermon-grid .sermon__date{ margin:18px 20px 0; }
  .sermon-grid .sermon__title{ margin:8px 20px 0; }
  .sermon-grid .sermon__by{ margin:12px 20px 0; }
  .form__row{ flex-direction:column; }
}

/* ===========================================================================
   PUBLISHING-DRAFT HARDENING
   Keeps the Figma desktop rhythm intact while making all page types usable
   from a 320px phone through tablet and desktop widths.
   =========================================================================== */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--gold); outline-offset:3px;
}
.duo__body,.contact-grid > *, .footer__col, .tile, .min-tile, .sermon,
.faq__aside, .faq__list{ min-width:0; }
.footer__addr,.footer__col a{ overflow-wrap:anywhere; }

/* The dark section heading was inheriting a dark fallback fill, making it
   unreadable whenever gradient text rendering was unavailable. */
.section--dark .sec-head__title{
  color:var(--cream); -webkit-text-fill-color:var(--cream); background-image:none;
}

.nav__toggle{ display:none; }

@media (max-width:1320px){
  .nav__inner{ height:86px; padding:0 32px; gap:18px; }
  .nav__logo img{ width:200px; height:38px; }
  .nav__toggle{
    display:inline-flex; flex:none; flex-direction:column; align-items:center;
    justify-content:center; gap:5px; width:44px; height:44px; margin-left:auto;
    color:#fff; border:1px solid rgba(255,255,255,.55); border-radius:6px;
  }
  .nav__toggle > span:not(.sr-only){ display:block; width:20px; height:2px; background:currentColor; }
  .nav__right{ margin-left:0; gap:0; }
  .nav__social{ display:none; }
  .nav__give{ width:88px; height:44px; font-size:18px; }
  .nav__menu{
    position:absolute; top:86px; left:0; right:0; display:none;
    flex-direction:column; align-items:stretch; gap:2px; margin:0;
    padding:18px 32px 24px; background:rgba(24,37,99,.98);
    box-shadow:0 14px 28px rgba(0,0,0,.24);
  }
  .nav.is-open .nav__menu{ display:flex; }
  .nav__menu a{ min-height:44px; padding:9px 0; justify-content:space-between; }
  .nav__menu a.is-active{ border-bottom:1.5px solid #fff; }
}

@media (max-width:1000px){
  .h-bebas-74{ font-size:clamp(46px,7vw,64px); line-height:.92; }
  .intro__title{ font-size:clamp(48px,7.5vw,68px); line-height:.92; }
  .streams__title{ font-size:clamp(46px,7vw,64px); line-height:.92; }
  .ministries__title,.sermons__title,.pastors__title{ font-size:clamp(56px,8.5vw,78px); line-height:.9; }
  .duo__media img{ height:clamp(300px,52vw,430px); }
  .cta-band{ padding:80px 0; }
  .cta-band h2{ font-size:clamp(48px,7.5vw,68px); line-height:.92; }
  .footer{ padding:80px 0 48px; }
  .footer__cols{ row-gap:48px; }
  .footer__bottom{ margin-top:80px; }
  .map{ height:340px; }
}

@media (max-width:640px){
  .container{ max-width:calc(100% - 40px); }
  .nav__inner{ height:76px; padding:0 20px; gap:12px; }
  .nav__logo img{ width:160px; height:34px; }
  .nav__toggle{ width:40px; height:40px; gap:4px; }
  .nav__give{ width:76px; height:40px; font-size:16px; }
  .nav__menu{ top:76px; padding:14px 20px 20px; }

  .hero{ padding:118px 20px 52px; }
  .hero__line1{ font-size:clamp(54px,15vw,68px); line-height:.86; }
  .hero__line2{ font-size:clamp(46px,12.5vw,58px); line-height:.9; }
  .hero__sub{ margin-top:28px; font-size:22px; line-height:1.25; }
  .hero__actions{ gap:12px; margin-top:32px; }
  .btn{ min-height:52px; height:auto; padding:12px 22px; font-size:18px; line-height:1.1; white-space:normal; text-align:center; }
  .services{ margin-top:36px; padding:52px 28px 38px; border-top-left-radius:100px; }
  .services__title{ font-size:68px; line-height:.88; }
  .services__times{ margin-top:24px; font-size:18px; }
  .services__note{ font-size:16px; line-height:1.45; }

  .intro{ padding-top:56px; }
  .intro__sub{ margin-top:24px; font-size:20px; line-height:1.35; }
  .stream{ margin-top:86px; }
  .stream__caption{ font-size:19px; line-height:1.35; }
  .stream__frame{ border-radius:14px; }
  .streams__panel{ height:auto; margin-top:-74px; padding:130px 0 64px; }
  .streams__head{ height:auto; align-items:flex-start; flex-direction:column; gap:20px; }
  .rail--streams{ margin-top:34px; gap:18px; }
  .stream-card{ width:78vw; height:auto; aspect-ratio:1.414; border-radius:14px; }
  .ministries{ padding:56px 0 64px; }
  .ministries__carousel{ margin-top:48px; }
  .min-card{ width:80vw; height:100vw; max-height:480px; padding:24px; border-radius:16px; }
  .ministries__cta{ margin-top:48px; }
  .mvv{ padding:40px 0 56px; }
  .mvv__card{ border-radius:14px; }
  .mvv__cell{ padding:32px 22px; }
  .mvv__cell h3{ font-size:28px; line-height:1.1; }
  .mvv__ribbon{ font-size:34px; line-height:1.15; }
  .prayer{ padding:64px 0; }
  .prayer__media img{ height:auto; border-radius:14px; }
  .prayer__body{ min-height:0; gap:24px; }
  .community__media{ height:280px; }
  .community__body{ padding:56px 20px; }
  .community__stack{ gap:24px; }
  .sermons{ padding:52px 0 64px; }
  .rail--sermons{ margin-top:48px; gap:20px; }
  .sermon{ width:80vw; }
  .sermon__img{ border-radius:14px; }
  .pastors{ padding-top:64px; }
  .pastors__head,.pastors__viewport{ max-width:calc(100% - 40px); }
  .pastors__viewport{ margin-top:48px; }
  .pastor{ width:80vw; height:100vw; max-height:480px; border-radius:16px; }
  .involve{ padding-top:72px; }
  .involve__head .lead{ margin-top:32px; }
  .involve__grid{ gap:20px; margin-top:48px; }
  .involve-card{ padding:40px 24px; }
  .involve-card figure{ width:min(250px,80vw); height:min(250px,80vw); }
  .involve-card p{ margin-top:28px; }
  .faq{ padding-top:72px; }
  .faq__aside{ gap:22px; }
  .faq-item summary{ min-height:68px; padding:18px 0; font-size:21px; line-height:1.25; }
  .faq-item p{ padding:10px 0 28px; font-size:16px; line-height:1.55; }
  .scripture{ padding-top:72px; }
  .scripture__inner{ max-width:calc(100% - 40px); }
  .scripture__verse{ font-size:clamp(52px,15vw,64px); line-height:.9; }
  .scripture__cta{ font-size:24px; line-height:1.2; }
  .strip{ margin-top:80px; }

  .page-hero{ min-height:420px; padding:148px 20px 44px; }
  .page-hero__title{ font-size:clamp(58px,15vw,76px); line-height:.9; letter-spacing:-1px; }
  .page-hero__crumbs{ margin-top:14px; font-size:11px; line-height:1.3; }
  .page-hero__crumbs .sep{ margin:0 12px; }
  .team{ padding:64px 0; }
  .team-card{ height:112vw; max-height:470px; border-radius:16px; padding:0 20px 24px; }
  .team-card h3{ font-size:28px; line-height:1.1; }
  .pager{ gap:10px; margin-top:24px; }

  .section{ padding:72px 0; }
  .section--tight{ padding:52px 0; }
  .sec-head{ gap:22px; }
  .sec-head__title{ font-size:clamp(54px,15vw,70px); line-height:.9; }
  .sec-head .lead,.lead,.prose,.tile p,.min-tile p,.info-row p,.info-row a{ font-size:16px; line-height:1.55; }
  .duo,.duo--flip{ gap:32px; }
  .duo__media img{ height:280px; border-radius:14px; }
  .duo__body{ gap:22px; }
  .tiles{ gap:16px; }
  .tile{ padding:30px 24px; border-radius:14px; }
  .tile h3{ font-size:28px; line-height:1.1; }
  .min-list{ gap:32px; }
  .min-tile__media{ height:340px; padding:24px; border-radius:16px; }
  .min-tile__media h3{ font-size:28px; line-height:1.1; }
  .min-tile .link-arrow{ margin-top:16px; }
  .sermon-grid{ gap:36px; }
  .sermon-grid .sermon{ width:100%; }
  .vmodal{ padding:16px; }
  .vmodal__frame{ border-radius:12px; }
  .contact-info{ gap:22px; }
  .info-list{ gap:20px; }
  .form{ gap:16px; }
  .form__field input,.form__field textarea,.form__field select{ font-size:16px; padding:12px 14px; }
  .map{ height:280px; border-radius:14px; }
  .cta-band{ padding:64px 0; }
  .cta-band__inner{ gap:28px; }

  .footer{ padding:64px 0 32px; }
  .footer__cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 20px; }
  .footer__brand{ grid-column:1 / -1; width:auto; }
  .footer__brand h2{ font-size:28px; line-height:1.1; }
  .footer__brand p{ margin-top:14px; font-size:16px; line-height:1.5; }
  .footer__col--pages,.footer__col--location,.footer__col--contact{ width:auto; }
  .footer__col h3{ font-size:21px; line-height:1.2; }
  .footer__col ul{ margin-top:16px; }
  .footer__col li + li{ margin-top:10px; }
  .footer__col a,.footer__addr{ font-size:14px; line-height:1.5; }
  .footer__addr{ margin-top:16px; }
  .footer__social{ gap:16px; margin-top:18px; }
  .footer__bottom{ gap:28px; margin-top:56px; }
  .footer__logo img{ width:220px; height:auto; }
  .footer__copy{ font-size:13px; line-height:1.4; }
  .to-top{ right:16px; bottom:16px; width:42px; height:42px; }
}

@media (max-width:360px){
  .nav__inner{ padding:0 16px; gap:8px; }
  .nav__logo img{ width:132px; height:30px; }
  .nav__toggle{ width:36px; height:36px; }
  .nav__give{ width:64px; height:36px; font-size:15px; }
  .nav__menu{ padding-left:16px; padding-right:16px; }
  .hero{ padding-left:16px; padding-right:16px; }
  .services{ padding-left:24px; padding-right:24px; }
  .container{ max-width:calc(100% - 32px); }
  .footer__cols{ gap:30px 14px; }
}
