/* CEM UK v2 — editorial (Oswald/Lato) design system in the church's purple & gold.
   Layout & motion language adapted from the reference church template; built from
   scratch, no template markup/copy/imagery reused. */

:root{
  --purple:#771D64; --purple-ink:#771D64; --purple-accent:#771D64; --purple-bright:#771D64;
  --gold:#C9952A; --gold-light:#EBC974; --gold-mid:#E0B53D;
  --ink:#2F1728; --muted:#7E5973; --muted-2:#9F7992;
  --paper:#FFFFFF; --band:#FAF1F7; --line:#F1E6ED; --night:#771D64; --night-deep:#771D64;
  --display:'Oswald',system-ui,sans-serif; --body:'Lato',system-ui,sans-serif;
  --wrap:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#fff}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;text-transform:uppercase;color:var(--purple-ink);line-height:1.08;letter-spacing:0.01em}
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:0.24em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.eyebrow::before{content:"";width:38px;height:2px;background:var(--gold);flex:none}
.eyebrow.center{justify-content:center}
/* gold #C9952A is 3.65:1 on the #771D64 purple, below AA for small text: labels on purple use gold-light (6.1:1) */
.hero .eyebrow,.dark .eyebrow,.icard.feature .subrole,.icard.feature .gi{color:var(--gold-light)}
.section-head{max-width:660px}
.section-head.center{margin:0 auto;text-align:center}
.section-head h2{font-size:40px;font-weight:600;margin-bottom:0}
.section-head p{color:var(--muted);margin-top:16px;font-size:16.5px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:0.09em;font-size:13px;padding:15px 30px;border-radius:3px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn-gold{background:linear-gradient(135deg,var(--gold-mid),var(--gold));color:#2F1728;box-shadow:0 10px 24px rgba(201,149,42,0.28)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(201,149,42,0.42)}
.btn-outline{background:transparent;border:2px solid var(--purple-accent);color:var(--purple-accent)}
.btn-outline:hover{background:var(--purple-accent);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.4);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,0.2);transform:translateY(-2px)}
.readmore{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:0.12em;font-size:12.5px;color:var(--gold);display:inline-flex;align-items:center;gap:8px;transition:gap .2s ease}
.readmore:hover{gap:13px}

/* ---------- Top utility bar ---------- */
.topbar{background:var(--purple);color:#fff;font-size:12.5px;letter-spacing:0.04em}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.topbar a{color:#fff}.topbar a:hover{color:var(--gold-light)}
.topbar strong{color:var(--gold-light);font-weight:700}
.topbar .tb-links{display:flex;gap:20px;align-items:center}

/* ---------- Header / nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 4px 20px rgba(66,17,55,0.04)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:92px;width:auto}
.brand__wm{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:22px;color:var(--purple-ink);letter-spacing:0.02em}
.brand__tag{font-family:var(--body);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:2px}
.brand__title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:19px;line-height:1.14;
  color:var(--purple-ink);letter-spacing:0.03em}
.menu{display:flex;align-items:center;gap:6px}
.menu a{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:14px;letter-spacing:0.05em;color:var(--purple-ink);padding:10px 14px;border-radius:3px;white-space:nowrap;transition:color .18s ease,background .18s ease}
/* longer labels (Departments & Ministries) need the row tightened before the hamburger takes over */
@media (min-width:981px) and (max-width:1240px){
  .menu a{font-size:13.5px;letter-spacing:0.02em;padding:10px 9px}
  .menu .btn{margin-left:6px}
  .brand img{height:76px}
  .brand__name{font-size:19px}
  .brand__title{font-size:16.5px}
}
.menu a:hover{color:var(--gold)}
.menu a.is-active{color:var(--gold)}
.menu .btn{margin-left:12px}
.nav__toggle{display:none;background:transparent;border:none;color:var(--purple-ink);cursor:pointer;padding:8px}
.nt-bars{position:relative;display:block;width:26px;height:16px}
.nt-bars span{position:absolute;left:0;width:100%;height:2.5px;background:currentColor;border-radius:2px;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .2s ease}
.nt-bars span:nth-child(1){top:0}.nt-bars span:nth-child(2){top:7px}.nt-bars span:nth-child(3){top:14px}
.nav__toggle[aria-expanded="true"] .nt-bars span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nt-bars span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] .nt-bars span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero (full-bleed photo, purple overlay, ken-burns) ---------- */
.hero{position:relative;overflow:hidden;color:#fff}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02);animation:kenburns 18s ease-out forwards}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(119,29,100,0.90) 0%,rgba(119,29,100,0.66) 45%,rgba(119,29,100,0.33) 100%)}
.hero__inner{position:relative;padding-top:96px;padding-bottom:92px}
.hero h1{color:#fff;font-weight:700;font-size:56px;line-height:1.03;max-width:720px}
.hero p{color:#fff;font-size:19px;max-width:520px;margin-top:20px}
.hero .btns{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap}
.hero--tall .hero__inner{padding-top:150px;padding-bottom:140px}
@keyframes kenburns{to{transform:scale(1.12)}}

/* page hero (shorter, for interior pages) */
.phero{position:relative;overflow:hidden;color:#fff}
.phero__bg{position:absolute;inset:0;background:var(--purple)}
.phero__inner{position:relative;padding-top:74px;padding-bottom:70px}
.phero .crumb{font-size:13px;color:#fff;letter-spacing:0.06em;margin-bottom:14px;font-family:var(--display);text-transform:uppercase}
.phero .crumb a:hover{color:var(--gold-light)}
.phero h1{color:#fff;font-weight:700;font-size:48px}
.phero p{color:#fff;font-size:18px;max-width:560px;margin-top:16px}

/* page header in the main copy: title, then gold-rule label (matches the pastor profiles) */
.pagehead{max-width:820px;margin-bottom:46px}
.pagehead h1{font-family:var(--display);font-weight:600;text-transform:uppercase;color:var(--purple-ink);
  font-size:44px;line-height:1.04;letter-spacing:0.01em;margin-bottom:10px}
.pagehead__label{display:flex;align-items:center;gap:14px;font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:0.16em;font-size:14px;color:var(--gold)}
.pagehead__label::before{content:"";width:32px;height:2px;background:var(--gold);flex:none}
.pagehead p{margin-top:24px;font-size:17px;color:var(--muted);line-height:1.8}
@media (max-width:560px){.pagehead h1{font-size:32px}.pagehead{margin-bottom:34px}
  .pagehead__label{font-size:12px;letter-spacing:0.12em;gap:10px}.pagehead__label::before{width:24px}}

/* shared page header: pill breadcrumb above the title, gold-rule label beneath it */
.hlabel{display:flex;align-items:center;gap:14px;font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:0.16em;font-size:14px;color:var(--gold-light);margin-top:16px}
.hlabel::before{content:"";width:32px;height:2px;background:var(--gold);flex:none}
.hero .hlabel + p,.phero .hlabel + p{margin-top:18px}
@media (max-width:560px){.hlabel{font-size:12px;letter-spacing:0.12em;gap:10px}.hlabel::before{width:24px}}

/* ---------- Section rhythm ---------- */
.section{padding:88px 0}
.section.tight{padding:64px 0}
.band{background:var(--band)}
.dark{background:var(--purple);color:#fff}
.dark h1,.dark h2,.dark h3{color:#fff}

/* ---------- Feature trio (icon cards) ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(66,17,55,0.07)}
.trio .feat{padding:44px 34px;text-align:center;background:#fff;border-right:1px solid var(--line);transition:transform .25s ease,box-shadow .25s ease}
.trio .feat:last-child{border-right:none}
.trio .feat:hover{transform:translateY(-4px);box-shadow:0 24px 46px rgba(66,17,55,0.12);z-index:1}
.feat__icon{width:60px;height:60px;margin:0 auto 20px;border-radius:50%;background:rgba(201,149,42,0.12);color:var(--gold);display:flex;align-items:center;justify-content:center}
.feat h3{font-size:19px;font-weight:600;margin-bottom:12px}
.feat p{color:var(--muted);font-size:14.5px;margin-bottom:18px}

/* ---------- Story (media + text) ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.story.reverse .story__media{order:2}
.story__media{border-radius:14px;overflow:hidden;box-shadow:0 24px 54px rgba(66,17,55,0.16);aspect-ratio:4/3;position:relative}
.story__media img{width:100%;height:100%;object-fit:cover}
.story__media.ph{background:repeating-linear-gradient(135deg,#F4E5EF 0 16px,#FBF3F8 16px 32px);display:flex;align-items:center;justify-content:center}
.story__media .ph-label{font-family:var(--display);font-size:11px;letter-spacing:0.16em;color:#C8A3BC;text-transform:uppercase}
.story h2{font-size:38px;font-weight:600;margin-bottom:18px}
.story p{color:var(--muted);margin-bottom:16px}
.story .btns{margin-top:26px}

/* play button overlay for media */
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.play span{width:70px;height:70px;border-radius:50%;background:var(--gold);color:#2F1728;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,0.3);transition:transform .2s ease}
.story__media:hover .play span{transform:scale(1.08)}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.stat .num{font-family:var(--display);font-weight:700;font-size:52px;color:var(--gold-light);line-height:1}
.dark .stat .label{color:#fff;font-size:14px;margin-top:8px}
.stat .label{color:var(--muted);font-size:14px;margin-top:8px}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.member{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 16px 34px rgba(66,17,55,0.08);transition:transform .25s ease,box-shadow .25s ease}
.member:hover{transform:translateY(-5px);box-shadow:0 26px 50px rgba(66,17,55,0.16)}
.member__photo{aspect-ratio:1;overflow:hidden}
.member__photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.member__photo.ph{background:repeating-linear-gradient(135deg,#F4E5EF 0 14px,#FBF3F8 14px 28px);display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px}
.member__photo.ph span{font-family:var(--display);font-size:10px;letter-spacing:0.14em;color:#C8A3BC;text-transform:uppercase}
.member__body{padding:22px 20px 26px;text-align:center}
.member__body h3{font-size:17px;font-weight:600;margin-bottom:5px}
.member__role{font-size:12.5px;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:0.06em}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery a{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;display:block}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery a:hover img{transform:scale(1.07)}
.gallery a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(41,10,33,0.5));opacity:0;transition:opacity .3s ease}
.gallery a:hover::after{opacity:1}

/* ---------- Quote band ---------- */
.quote{text-align:center;max-width:820px;margin:0 auto}
.quote p{font-family:var(--display);font-weight:300;text-transform:none;font-size:30px;line-height:1.35;color:#fff;font-style:italic}
.quote .cite{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:0.14em;font-size:14px;color:var(--gold-light);margin-top:22px}

/* ---------- Newsletter ---------- */
.news{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.news form{display:flex;gap:12px;flex-wrap:wrap}
.news input{flex:1;min-width:220px;padding:15px 18px;border-radius:3px;border:1px solid rgba(255,255,255,0.28);background:rgba(255,255,255,0.08);color:#fff;font-family:var(--body);font-size:15px}
.news input::placeholder{color:rgba(255,255,255,0.75)}

/* ---------- Info cards (branches / times) ---------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.icard{background:#fff;border:1px solid rgba(66,17,55,0.10);border-radius:14px;padding:34px;box-shadow:0 18px 40px rgba(66,17,55,0.09)}
.icard.feature{background:var(--purple);color:#fff;border:none}
.icard h3{font-size:24px;font-weight:600;margin-bottom:6px}
.icard.feature h3{color:#fff}
.icard .subrole{color:var(--gold);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:18px}
.icard .row{display:flex;gap:11px;font-size:14.5px;color:var(--muted);margin:8px 0;line-height:1.5}
.icard.feature .row{color:#fff}
.icard .gi{color:var(--gold)}

/* ---------- Footer ---------- */
.footer{background:var(--night-deep);border-top:1px solid rgba(255,255,255,0.08);color:#fff;padding-top:70px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;padding-bottom:44px}
.footer h4{color:#fff;font-size:14px;font-weight:600;letter-spacing:0.1em;margin-bottom:18px}
.footer__links{display:flex;flex-direction:column;gap:11px}
.footer__links a{font-size:14.5px;color:#fff;transition:color .18s ease}
.footer__links a:hover{color:var(--gold-light)}
.footer .fbrand{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.footer .fbrand img{height:140px;width:auto}
.footer .fbrand .fn{font-family:var(--display);font-weight:700;text-transform:uppercase;color:#fff;font-size:19px;line-height:1.14;letter-spacing:0.03em}
.footer p.about{font-size:14px;line-height:1.7;color:#fff;max-width:320px}
.footer__bar{border-top:1px solid rgba(255,255,255,0.08)}
.footer__bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 32px;font-size:13px;color:#fff}
.footer__bar .tagline{font-family:var(--display);text-transform:uppercase;letter-spacing:0.1em;color:var(--gold-light)}

/* ---------- Scroll reveal ---------- */
.reveal{transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
html.reveal-ready .reveal:not(.in){opacity:0;transform:translateY(26px)}

/* ---------- Focus ---------- */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:#fff;border-bottom:1px solid var(--line);padding:14px 20px 20px;box-shadow:0 20px 40px rgba(66,17,55,0.14)}
  .menu.open{display:flex}
  .menu a{padding:13px 12px;min-height:46px;display:flex;align-items:center;white-space:normal}
  .menu .btn{margin-left:0;margin-top:8px;justify-content:center}
  .nav__inner{position:relative}
  .nav__toggle{display:flex}
  .story,.news{grid-template-columns:1fr;gap:38px}
  .story.reverse .story__media{order:0}
  .trio,.cards3{grid-template-columns:1fr}
  .trio{border-radius:14px}.trio .feat{border-right:none;border-bottom:1px solid var(--line)}.trio .feat:last-child{border-bottom:none}
  .team{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:34px 20px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:34px}
  .hero h1{font-size:42px}.hero p{font-size:17px}
  .section-head h2,.story h2{font-size:32px}
}
@media (max-width:560px){
  .wrap{padding:0 22px}
  .brand img{height:64px}.brand__tag{display:none}
  .brand__title{font-size:14.5px;letter-spacing:0.02em}
  .hero h1{font-size:34px}.phero h1{font-size:34px}
  .section{padding:60px 0}
  .team,.gallery{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  h1{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero__bg{animation:none;transform:none}
}

/* ---------- Branch switcher (top bar) ---------- */
.branch{position:relative}
.branch__btn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:none;color:#fff;font-family:var(--body);font-size:12.5px;letter-spacing:0.04em;cursor:pointer;padding:0}
.branch__btn:hover{color:var(--gold-light)}
.branch__btn .pin{color:var(--gold)}
.branch__menu{position:absolute;top:26px;left:-10px;background:#fff;border-radius:8px;box-shadow:0 18px 44px rgba(33,6,27,0.34);padding:6px;min-width:196px;z-index:60}
.branch__menu .bhead{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:0.12em;font-size:10px;color:var(--muted);padding:8px 12px 6px}
.branch__menu a{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:6px;color:var(--purple-ink);font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:13px;letter-spacing:0.03em}
.branch__menu a:hover{background:var(--band);color:var(--gold)}
.branch__menu a .m{font-size:9px;background:var(--gold-light);color:var(--ink);padding:2px 7px;border-radius:999px}

/* ---------- Branch page components (Harlow) ---------- */
.serve{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.schip{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 20px;display:flex;align-items:center;gap:13px;box-shadow:0 12px 26px rgba(66,17,55,0.06);transition:transform .25s ease,box-shadow .25s ease}
.schip:hover{transform:translateY(-3px);box-shadow:0 20px 38px rgba(66,17,55,0.12)}
.schip .si{width:40px;height:40px;flex:none;border-radius:10px;background:rgba(201,149,42,0.12);color:var(--gold);display:flex;align-items:center;justify-content:center}
.schip span{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:13px;letter-spacing:0.02em;color:var(--purple-ink);line-height:1.15}
.times3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{border-radius:14px;padding:32px 28px;position:relative;overflow:hidden}
.tcard.dark{background:var(--purple);color:#fff}
.tcard.light{background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px rgba(66,17,55,0.07)}
.tcard .day{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:0.1em;font-size:12px;margin-bottom:12px}
.tcard.dark .day{color:var(--gold-light)}.tcard.light .day{color:var(--gold)}
.tcard h3{font-size:22px;font-weight:600;margin-bottom:8px}.tcard.dark h3{color:#fff}
.tcard .time{font-family:var(--display);font-weight:700;font-size:24px}
.tcard.dark .time{color:var(--gold-light)}.tcard.light .time{color:var(--purple-accent)}
.tcard p{font-size:13.5px;margin-top:8px}.tcard.dark p{color:#fff}.tcard.light p{color:var(--muted)}
.lead-card{display:grid;grid-template-columns:0.8fr 1.2fr;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 22px 50px rgba(66,17,55,0.1)}
.lead-card .ph{aspect-ratio:4/5;overflow:hidden}
.lead-card .ph img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.lead-card .txt{padding:44px}
@media (max-width:980px){.serve{grid-template-columns:repeat(2,1fr)}.times3{grid-template-columns:1fr}.lead-card{grid-template-columns:1fr}}
@media (max-width:560px){.serve{grid-template-columns:1fr}}

/* small button (used in team cards) */
.btn.btn-sm{padding:10px 22px;font-size:12px;letter-spacing:0.07em}
/* profile page */
.profile{display:grid;grid-template-columns:0.75fr 1.25fr;gap:52px;align-items:start}
.profile__photo{border-radius:16px;overflow:hidden;box-shadow:0 24px 54px rgba(66,17,55,0.16);position:sticky;top:120px}
.profile__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%}
.profile__body p{font-size:16.5px;color:#54374C;line-height:1.85;margin-bottom:20px}
.profile__body .verse{background:var(--band);border-radius:14px;padding:26px 30px;margin:26px 0}
.profile__body .verse p{font-family:var(--display);font-weight:300;font-style:italic;font-size:20px;color:var(--purple-ink);margin:0;line-height:1.5}
.profile__meta{border-top:1px solid var(--line);margin-top:26px;padding-top:22px;font-size:14.5px;color:var(--muted)}
@media (max-width:900px){.profile{grid-template-columns:1fr;gap:32px}.profile__photo{position:static}}

/* ---------- Profile hero: prominent breadcrumb + full-width role bar ---------- */
.crumbs{display:inline-flex;align-items:center;gap:11px;flex-wrap:wrap;font-family:var(--display);font-weight:500;
  text-transform:uppercase;letter-spacing:0.13em;font-size:12.5px;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);
  padding:10px 20px;border-radius:999px;margin-bottom:28px}
.crumbs a{color:#fff;transition:color .18s ease}
.crumbs a:hover{color:var(--gold-light)}
.crumbs .sep{color:rgba(255,255,255,0.7);line-height:1}
.crumbs .cur{color:var(--gold-light);font-weight:600}
@media (max-width:560px){.crumbs{font-size:11px;letter-spacing:0.08em;padding:9px 15px;gap:8px}
}

/* profile: slim breadcrumb banner, name lives in the main copy */
.phero--slim .phero__inner{padding-top:34px;padding-bottom:30px}
.phero--slim .crumbs{margin-bottom:0}
.profile__name{font-family:var(--display);font-weight:600;text-transform:uppercase;color:var(--purple-ink);
  font-size:44px;line-height:1.04;letter-spacing:0.01em;margin-bottom:10px}
.profile__role{display:flex;align-items:center;gap:14px;font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:0.16em;font-size:14px;color:var(--gold);margin-bottom:30px}
.profile__role::before{content:"";width:32px;height:2px;background:var(--gold);flex:none}
@media (max-width:560px){.profile__name{font-size:32px}}

/* ---------- Nav dropdown (Contact group) ---------- */
.mdrop{position:relative}
.mdrop__btn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:none;cursor:pointer;
  font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:14px;letter-spacing:0.05em;
  color:var(--purple-ink);padding:10px 14px;border-radius:3px;transition:color .18s ease}
.mdrop__btn:hover,.mdrop.is-active .mdrop__btn{color:var(--gold)}
.mdrop__btn svg{transition:transform .2s ease}
.mdrop__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mdrop__menu{display:none;position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:0 22px 46px rgba(66,17,55,0.18);padding:6px;min-width:215px;z-index:60}
.mdrop__menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.mdrop:hover .mdrop__menu,.mdrop.open .mdrop__menu{display:block}
.mdrop:hover .mdrop__btn svg{transform:rotate(180deg)}
.mdrop__menu a{display:block;padding:11px 14px;border-radius:6px;font-family:var(--display);font-weight:500;
  text-transform:uppercase;font-size:13px;letter-spacing:0.04em;color:var(--purple-ink)}
.mdrop__menu a:hover{background:var(--band);color:var(--gold)}
@media (max-width:980px){
  .mdrop{width:100%}
  .mdrop__btn{width:100%;justify-content:space-between;padding:13px 12px;min-height:46px}
  .mdrop__menu{position:static;box-shadow:none;border:none;border-left:2px solid var(--line);border-radius:0;padding:0 0 6px 14px;margin-left:12px;min-width:0}
  .mdrop:hover .mdrop__menu{display:none}
  .mdrop.open .mdrop__menu{display:block}
}

/* ---------- 7 Pillars / Yearly themes / Doctrines ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pillar{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;
  box-shadow:0 12px 28px rgba(66,17,55,0.07);transition:transform .25s ease,box-shadow .25s ease}
.pillar:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(66,17,55,0.13)}
.pillar .pi{width:46px;height:46px;border-radius:11px;background:rgba(201,149,42,0.12);color:var(--gold);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.pillar h3{font-size:18px;font-weight:600;margin-bottom:6px}
.pillar .ref{font-size:13px;color:var(--muted)}
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.theme{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px;text-align:center;
  box-shadow:0 12px 28px rgba(66,17,55,0.07)}
.theme .yr{font-family:var(--display);font-weight:700;font-size:34px;color:var(--purple-accent);line-height:1}
.theme .nm{font-size:14.5px;color:var(--muted);margin-top:8px}
.theme--now{grid-column:1/-1;background:var(--purple);border:none;color:#fff;
  text-align:left;padding:44px;margin-bottom:18px;position:relative;overflow:hidden}
.theme--now .badge{display:inline-block;background:var(--gold-light);color:var(--ink);font-family:var(--display);
  font-weight:600;text-transform:uppercase;letter-spacing:0.1em;font-size:11px;padding:6px 14px;border-radius:999px;margin-bottom:16px}
.theme--now h3{font-size:40px;font-weight:700;color:#fff;line-height:1.05}
.doctrines{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.doc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px;box-shadow:0 10px 24px rgba(66,17,55,0.06)}
.doc h3{font-size:16px;font-weight:600;margin-bottom:7px}
.doc .ref{font-size:12.5px;color:var(--gold);font-weight:700;line-height:1.5}
@media (max-width:980px){.pillars,.doctrines{grid-template-columns:repeat(2,1fr)}.themes{grid-template-columns:1fr}
  .theme--now h3{font-size:30px}}
@media (max-width:560px){.pillars,.doctrines{grid-template-columns:1fr}}

/* ---------- Footer socials ---------- */
.fsocial{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
.fsocial a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.13);border-radius:9px;color:#fff;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.fsocial a:hover{transform:translateY(-2px)}
.fsocial svg{width:17px;height:17px}
.fsocial a:hover{background:rgba(235,201,116,0.14);border-color:rgba(235,201,116,0.42);color:var(--gold-light)}
.fsocial svg{flex:none}

/* ---------- Church calendar rows (community + branch connect pages) ---------- */
.evt{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 26px;display:flex;align-items:center;gap:26px;box-shadow:0 12px 28px rgba(66,17,55,0.08)}
.evt .d{text-align:center;flex:none;width:60px}
.evt .d .n{font-family:var(--display);font-weight:700;font-size:30px;color:var(--purple-accent);line-height:1}
.evt .d .m{font-family:var(--display);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em}
.evt .bar{width:1px;height:44px;background:rgba(66,17,55,0.1)}
.evt .t{flex:1}
.evt .t h4{font-size:18px;font-weight:600;color:var(--purple-ink)}
.evt .t p{font-size:13.5px;color:var(--muted)}
.evt .tag{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;font-size:11px;padding:6px 13px;border-radius:999px}
@media (max-width:560px){.evt{padding:16px 18px;gap:16px}.evt .d{width:46px}.evt .d .n{font-size:24px}.evt .tag{display:none}}

/* ---------- Article hero image ---------- */
.ahero{border-radius:14px;overflow:hidden;box-shadow:0 22px 50px rgba(66,17,55,0.14);margin-bottom:38px}
.ahero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media (max-width:560px){.ahero{border-radius:10px}}

/* nav "Back to London" button: sits beside Give, lighter weight than a primary CTA */
.btn-back{padding:11px 18px;font-size:12px;letter-spacing:0.07em;border-width:1.5px;gap:7px;margin-left:8px}
.btn-back svg{flex:none}
@media (min-width:981px) and (max-width:1240px){.btn-back{padding:10px 13px;font-size:11.5px;letter-spacing:0.04em;margin-left:4px}}
@media (max-width:980px){.btn-back{margin-left:0;margin-top:10px;justify-content:center;width:100%}}

/* Branch navs carry more items (Departments & Ministries, Gallery, Contact, Give, Back to London).
   nav--wide drops the wordmark strapline, tightens the row and lets the bar run slightly wider than the
   page. Below 1081px one row no longer fits, so it folds into the menu button (same panel as phones). */
.nav--wide .brand img{height:62px}
.nav--wide .brand__tag{display:none}
.nav--wide .menu{gap:2px}
.nav--wide .menu a{padding:10px 9px;letter-spacing:0.03em}
.nav--wide .mdrop__btn{padding:10px 9px;letter-spacing:0.03em}
.nav--wide .nav__inner{max-width:1264px}
@media (max-width:1080px){
  .nav--wide .nav__inner{position:relative}
  .nav--wide .nav__toggle{display:flex}
  .nav--wide .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:#fff;border-bottom:1px solid var(--line);padding:14px 20px 20px;box-shadow:0 20px 40px rgba(66,17,55,0.14)}
  .nav--wide .menu.open{display:flex}
  .nav--wide .menu a{font-size:14px;padding:13px 12px;min-height:46px;display:flex;align-items:center;white-space:normal;letter-spacing:0.05em}
  .nav--wide .menu .btn{margin-left:0;margin-top:8px;justify-content:center}
  .nav--wide .menu .btn-back{margin-top:10px;width:100%;padding:11px 18px;font-size:12px;letter-spacing:0.07em}
  .nav--wide .mdrop{width:100%}
  .nav--wide .mdrop__btn{width:100%;justify-content:space-between;padding:13px 12px;min-height:46px;letter-spacing:0.05em}
  .nav--wide .mdrop__menu{position:static;box-shadow:none;border:none;border-left:2px solid var(--line);border-radius:0;padding:0 0 6px 14px;margin-left:12px;min-width:0}
  .nav--wide .mdrop:hover .mdrop__menu{display:none}
  .nav--wide .mdrop.open .mdrop__menu{display:block}
}
@media (max-width:980px){.nav--wide .brand img{height:56px}}

/* gallery placeholder while a branch has no photos yet */
.gempty{border:1.5px dashed rgba(119,29,100,0.24);border-radius:16px;background:var(--band);padding:56px 28px;text-align:center}
.gempty__icon{width:66px;height:66px;margin:0 auto 18px;border-radius:50%;background:#fff;color:var(--purple);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(66,17,55,0.08)}
.gempty h2{font-size:28px;margin-bottom:10px}
.gempty p{color:var(--muted);max-width:520px;margin:0 auto;font-size:15.5px}
@media (max-width:560px){.gempty{padding:40px 20px}}


/* four-up card row (About convictions) and three-up stats (Home): column counts moved out of
   inline styles so the responsive steps apply. Doubled classes outrank the generic breakpoints. */
.cards3.cards3--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.cards3.cards3--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards3.cards3--4{grid-template-columns:1fr}}
.stats.stats--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){.stats.stats--3{grid-template-columns:1fr;gap:26px}}

/* About hero: three-line headline (Welcome to / Charismatic Evangelistic Ministry / London).
   Size scales so the long middle line holds on one line down to tablet, then wraps on phones. */
.hero h1.hero__lockup{max-width:none;font-size:clamp(30px,4.2vw,56px);text-wrap:balance}

/* About feature row with four cards (The Word, Serve the Church, Missions, Community Events):
   four across on desktop, 2x2 on tablet, stacked on phones, with dividers redrawn for each layout */
.trio.trio--4{grid-template-columns:repeat(4,1fr)}
.trio--4 .feat{padding:40px 24px}
@media (min-width:561px) and (max-width:980px){
  .trio.trio--4{grid-template-columns:repeat(2,1fr)}
  .trio.trio--4 .feat{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .trio.trio--4 .feat:nth-child(2n){border-right:none}
  .trio.trio--4 .feat:nth-last-child(-n+2){border-bottom:none}
}
@media (max-width:560px){
  .trio.trio--4{grid-template-columns:1fr}
  .trio.trio--4 .feat{border-right:none;border-bottom:1px solid var(--line)}
  .trio.trio--4 .feat:last-child{border-bottom:none}
}

/* pastor cards: equal height, View Profile buttons level along the bottom even when a name wraps */
.member{display:flex;flex-direction:column}
.member__body{flex:1;display:flex;flex-direction:column;align-items:center}
.member__role{margin-bottom:16px}
.member__body .btn{margin-top:auto}

/* keep hyphenated names together when a heading wraps */
.nowrap{white-space:nowrap}

/* Connect branch cards: equal height, action button pinned to the bottom so all three line up */
.cards3--branches .icard{display:flex;flex-direction:column}
.cards3--branches .icard > .btn{margin-top:auto;align-self:flex-start}

/* four service-time cards (Harlow): 2x2 on desktop instead of 3 + 1; stacked below 980px as before */
@media (min-width:981px){.times3.times3--4{grid-template-columns:repeat(2,1fr)}}

/* blog: related posts under each article */
.keep{margin:50px 0 28px;padding-top:34px;border-top:1px solid var(--line)}
.article .keep h2{font-size:24px;margin:0 0 18px}
.keep__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.keep__card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.keep__card:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(66,17,55,0.12)}
.keep__card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.keep__card .kcat{align-self:flex-start;margin:16px 18px 8px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;font-size:11px;color:var(--purple);background:rgba(119,29,100,0.1);padding:5px 12px;border-radius:999px}
.keep__card strong{margin:0 18px 20px;font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:17px;line-height:1.22;letter-spacing:0.01em;color:var(--purple-ink)}
.keep__card:hover strong{color:var(--purple)}
@media (max-width:560px){.keep__grid{grid-template-columns:1fr}}

/* gallery: photo groups, and the full-screen viewer that site.js opens from .gallery links */
.gallery-group + .gallery-group{margin-top:56px}
.gallery-group__head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.gallery-group__head h2{font-size:26px;margin:0}
.gallery-group__head span{font-size:14px;color:var(--muted)}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(28,8,23,0.94);display:flex;align-items:center;justify-content:center;padding:64px 76px}
.lightbox[hidden]{display:none}
.lightbox__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;max-height:100%}
.lightbox__fig img{max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,0.5)}
.lightbox__fig figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 18px;max-width:720px;color:#fff;font-size:15px;text-align:center}
.lightbox__count{font-family:var(--display);font-size:13px;letter-spacing:0.12em;color:var(--gold-light)}
.lightbox button{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,0.35);background:rgba(255,255,255,0.08);color:#fff;font-size:30px;line-height:1;cursor:pointer;transition:background .18s ease,border-color .18s ease}
.lightbox button:hover{background:rgba(255,255,255,0.18);border-color:#fff}
.lightbox button:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
.lightbox__close{top:16px;right:16px}
.lightbox__prev{left:16px;top:50%;transform:translateY(-50%)}
.lightbox__next{right:16px;top:50%;transform:translateY(-50%)}
html.lb-open{overflow:hidden}
@media (max-width:560px){
  .lightbox{padding:64px 12px 88px}
  .lightbox__prev,.lightbox__next{top:auto;bottom:18px;transform:none}
  .lightbox__prev{left:calc(50% - 60px)}
  .lightbox__next{right:calc(50% - 60px)}
}

/* entrance on load for content already on screen (hero, page header, article photo); scroll reveal handles the rest */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hero__inner > *,.phero__inner > .crumbs,.pagehead > *,.article > .ahero{animation:rise .8s cubic-bezier(.22,1,.36,1) both}
  .hero__inner > :nth-child(2),.pagehead > :nth-child(2){animation-delay:.08s}
  .hero__inner > :nth-child(3),.pagehead > :nth-child(3){animation-delay:.16s}
  .hero__inner > :nth-child(n+4),.pagehead > :nth-child(n+4){animation-delay:.24s}
}
/* branch cards are link targets from the footer; clear the sticky header */
.cards3--branches .icard{scroll-margin-top:130px}
/* comfortable tap targets on phones: small text links need height of their own */
.readmore{padding-block:5px}
.icard .row a{display:inline-block;padding-block:3px}
.footer p.about strong{font-weight:900;color:#fff;letter-spacing:0.005em}

/* event date stacks: month on top, then the day or the year underneath */
.evt .d .m{margin-bottom:3px}
.evt .d .n--year{font-size:22px;letter-spacing:0.01em}
@media (max-width:560px){.evt .d .n--year{font-size:18px}}
.evt .t p.evt__verse{font-family:var(--body);font-weight:400;font-style:italic;font-size:15px;line-height:1.55;color:var(--purple);margin-top:5px}
@media (max-width:560px){.evt .t p.evt__verse{font-size:14px}}

/* event flyers: a small poster on the card that opens full size in the viewer */
.evt__flyer{flex:none;display:block;width:58px;border-radius:8px;overflow:hidden;border:1px solid var(--line);box-shadow:0 8px 18px rgba(66,17,55,0.14);transition:transform .2s ease,box-shadow .2s ease}
.evt__flyer:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 26px rgba(66,17,55,0.2)}
.evt__flyer:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.evt__flyer img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.evt__tags{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
@media (max-width:560px){.evt__flyer{width:40px}.evt{gap:12px}.evt .bar{display:none}}

/* branch switcher in the top bar: both branches on show, the current one filled */
.branches{display:flex;align-items:center;gap:10px;min-width:0}
.branches__label{font-family:var(--display);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.75);white-space:nowrap}
.bsw{display:flex;align-items:center;gap:3px;padding:3px;border-radius:999px;border:1px solid rgba(255,255,255,0.32);background:rgba(0,0,0,0.14)}
.bsw a{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;font-size:11.5px;line-height:1;padding:6px 13px;border-radius:999px;color:#fff;opacity:0.88;white-space:nowrap;transition:background .18s ease,opacity .18s ease,color .18s ease}
.bsw a:hover{opacity:1;background:rgba(255,255,255,0.12)}
.bsw a.is-on{background:var(--gold);color:#3A0F31;font-weight:600;opacity:1}
.bsw a.is-on:hover{background:var(--gold-light)}
.bsw a:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
@media (max-width:560px){.branches__label{display:none}.bsw a{padding:6px 11px;font-size:11px;letter-spacing:0.06em}}