/* ==========================================================================
   The Journey Church — site.css
   Palette and type sampled directly from the live site.
   Change brand colours in ONE place: the :root block below.
   ========================================================================== */

:root{
  --olive:#3A4522;        /* page header bands, olive sections, accordions */
  --olive-dark:#2C3419;   /* hover / deeper olive                          */
  --ink:#0F172A;          /* all body text, headings, card borders         */
  --muted:#59606C;        /* secondary copy                                */
  --amber:#F7B83C;        /* primary CTA, accent words on dark             */
  --amber-dark:#B87A00;   /* amber for underlines/borders on white         */
  --amber-text:#BE8400;   /* accent WORDS on white (3.24:1, large text)    */
  --white:#FFFFFF;
  --black:#110D0D;        /* footer                                        */
  --line:#D8DCE3;

  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --gut:clamp(1.25rem,4vw,2.5rem);
  --sec:clamp(3.5rem,8vw,6.5rem);
  --nav-h:88px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1rem)}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);
  font-size:1.0625rem;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:2px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--amber);color:var(--ink);
  padding:.75rem 1.25rem;font-weight:700;font-size:.9rem}
.skip:focus{left:0}

/* --- Layout --------------------------------------------------------------- */
.wrap{width:min(100% - (var(--gut) * 2),1200px);margin-inline:auto}
.narrow{width:min(100% - (var(--gut) * 2),820px);margin-inline:auto}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.center{text-align:center}

/* --- Type ----------------------------------------------------------------- */
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.028em;line-height:1.08;text-wrap:balance}
.h-hero{font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.06}
.h-page{font-size:clamp(2.3rem,5.2vw,4rem);color:var(--white)}
.h-sec{font-size:clamp(1.85rem,3.6vw,2.75rem)}
.h-card{font-size:1.0625rem;font-weight:700;letter-spacing:-.012em}
.amber{color:var(--amber-text)}
.lede{font-size:clamp(1.02rem,.4vw + .95rem,1.15rem);line-height:1.7}
.prose p{margin:0 0 1.35em}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:700}
.measure{max-width:68ch}
.center .measure{margin-inline:auto}

/* --- Buttons --------------------------------------------------------------
   Shape: left end fully rounded, right end cut on a diagonal.
   The shape lives on ::before, not the button itself, so the focus outline
   and the outlined variant are not sliced off by clip-path.
   --cut controls how deep the angle bites.                                  */
.btns{display:flex;flex-wrap:wrap;gap:.9rem 1.75rem;align-items:center;margin-top:2rem}
.center .btns{justify-content:center}

.btn{
  --cut:22px;
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-weight:700;font-size:.97rem;letter-spacing:-.004em;
  padding:1.05rem calc(1.5rem + var(--cut)) 1.05rem 1.9rem;
  min-height:54px;border:0;background:transparent;color:var(--ink);
  transition:transform .18s ease;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--amber);
  border-radius:999px 0 0 999px;
  clip-path:polygon(0 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);
  transition:background .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:hover::before{background:#FFC95C}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hero .btn:focus-visible,.oband .btn:focus-visible,.cta .btn:focus-visible,
.nav .btn:focus-visible,.acc .btn:focus-visible{outline-color:var(--white)}

.btn--olive{color:var(--white)}
.btn--olive::before{background:var(--olive)}
.btn--olive:hover::before{background:var(--olive-dark)}
.btn--olive:focus-visible{outline-color:var(--ink)}

/* outlined: a solid shape behind, inset by 2px with a white shape on top,
   so the "border" follows the diagonal instead of stopping at it */
.btn--ghost{color:var(--ink)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost::after{
  content:"";position:absolute;inset:2px;z-index:-1;background:var(--white);
  border-radius:999px 0 0 999px;
  clip-path:polygon(0 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);
  transition:background .18s ease;
}
.btn--ghost:hover{color:var(--white)}
.btn--ghost:hover::before{background:var(--ink)}
.btn--ghost:hover::after{background:var(--ink)}

.tlink{
  display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;
  font-weight:700;font-size:.95rem;letter-spacing:-.004em;
  padding:.85rem .15rem;min-height:48px;border-bottom:1.5px solid var(--line);
  transition:border-color .18s ease;
}
.tlink:hover{border-bottom-color:var(--amber-dark)}
.tlink .arw{transition:transform .18s ease}
.tlink:hover .arw{transform:translateX(3px)}
.hero .tlink,.oband .tlink,.cta .tlink{color:var(--white);border-bottom-color:rgba(255,255,255,.55)}
.hero .tlink:hover,.oband .tlink:hover,.cta .tlink:hover{border-bottom-color:var(--amber)}

/* --- Nav ------------------------------------------------------------------ */
.nav{position:absolute;inset:0 0 auto;z-index:100;height:var(--nav-h);
  display:flex;align-items:center}
/* The header sits at the top of the page and scrolls away with the content.
   It is not fixed, so it does not follow the reader down the page.
   A soft gradient keeps the white logo and links legible over the hero.    */
.nav::before{
  content:"";position:absolute;inset:0;height:calc(var(--nav-h) * 1.9);
  background:linear-gradient(to bottom,
    rgba(14,19,8,.88) 0%,
    rgba(14,19,8,.62) 52%,
    rgba(14,19,8,0) 100%);
  pointer-events:none;
}
/* Interior pages open on a solid olive band, so the scrim is a flat bar */
.nav--solid::before{height:100%;background:rgba(22,29,13,.55)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;position:relative;z-index:1}
.nav__brand{display:block;flex:0 0 auto}
.nav__brand img{width:auto;height:54px}
.nav__links{display:flex;align-items:center;gap:.2rem;list-style:none;margin:0;padding:0}
.nav__links a{display:flex;align-items:center;min-height:44px;padding:.55rem .8rem;border-radius:999px;
  text-decoration:none;color:var(--white);font-weight:700;font-size:.94rem;transition:color .18s ease}
.nav__links a:hover,.nav__links a[aria-current="page"]:not(.btn){color:var(--amber)}
.nav__links a.btn{--cut:15px;margin-left:.75rem;min-height:44px;
  padding:.6rem calc(1rem + var(--cut)) .6rem 1.35rem;color:var(--ink)}
.nav__links a.btn:hover{color:var(--ink)}
/* Account icon. Icon only; the link is named for screen readers via aria-label. */
.nav__account a{padding:0 0 0 .55rem;min-width:44px;min-height:44px;justify-content:center}
.nav__account svg{flex:0 0 auto;display:block;transition:opacity .18s ease}
/* icon only on desktop; the overlay shows the words too */
.nav__acctxt{display:none}
.nav__social{display:none}
.nav__account a:hover svg{opacity:.82}

/* --- Connect mega menu ----------------------------------------------------
   Desktop: a full-bleed white panel that drops below the bar, with the
   links in titled columns and a feature card on the right.
   Mobile: the same markup collapses into an indented accordion.
   The panel is position:fixed so it can span the viewport without the
   100vw scrollbar overflow bug; the nav scrolls away, so JS closes the
   panel on scroll rather than letting it float.                          */
.nav__droptog{
  display:flex;align-items:center;gap:.4rem;min-height:44px;
  padding:.55rem .8rem;border:0;background:transparent;border-radius:999px;
  color:var(--white);font-family:var(--font);font-weight:700;font-size:.94rem;
  letter-spacing:inherit;cursor:pointer;transition:color .18s ease;
}
.nav__droptog:hover,
.nav__drop.is-open > .nav__droptog,
.nav__drop.is-current > .nav__droptog{color:var(--amber)}
.nav__droptog .chev{flex:0 0 auto;transition:transform .2s ease}
.nav__drop.is-open > .nav__droptog .chev{transform:rotate(180deg)}
.nav__col ul{list-style:none;margin:0;padding:0}

@media (min-width:1081px){
  /* The panel and the bar share one colour so they read as a single block
     with no seam. While the panel is open the header drops its gradient
     and goes solid olive to match; it returns to the gradient on close. */
  .nav:not(.is-esc):has(.nav__drop:hover)::before,
  .nav:not(.is-esc):has(.nav__drop.is-open)::before,
  .nav.has-drop:not(.is-esc)::before{height:100%;background:var(--olive)}
  .nav__sub{
    --amber-text:var(--amber);
    position:fixed;left:0;right:0;top:var(--nav-h);z-index:10;
    background:var(--olive);border-top:0;color:var(--white);
    box-shadow:0 24px 46px rgba(0,0,0,.26);
    padding:clamp(2.1rem,3vw,2.9rem) 0 clamp(2.3rem,3.4vw,3.1rem);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
  }
  /* invisible bridge across the gap between the button and the panel, so
     the pointer can travel down without the hover dropping out */
  .nav__sub::before{content:"";position:absolute;top:-26px;left:0;right:0;height:26px}
  .nav__sub{padding-bottom:clamp(1.9rem,2.6vw,2.5rem)}
  /* no :focus-within: it would hold the panel open against Escape, since
     focus stays on the button. Enter/Space fires click and sets .is-open. */
  .nav__drop:hover .nav__sub,
  .nav__drop.is-open .nav__sub{opacity:1;visibility:visible;transform:none}
  /* once the header has scrolled off, a fixed panel would hang in mid-air */
  .nav.is-past-top .nav__drop .nav__sub,
  .nav.is-esc .nav__drop .nav__sub{opacity:0;visibility:hidden;transform:translateY(-10px)}

  /* tight link columns on the left, feature card taking the rest on the
     right, so the panel is no taller than the content inside it */
  .nav__mega{display:grid;align-items:center;
    grid-template-columns:minmax(0,210px) minmax(0,250px) minmax(0,1fr);
    gap:clamp(1.75rem,3vw,3.25rem)}
  .nav__col h3{font-size:.78rem;font-weight:800;letter-spacing:.13em;
    text-transform:uppercase;color:rgba(255,255,255,.62);margin:0 0 1.1rem}
  .nav__links .nav__col a{display:block;min-height:0;padding:.62rem 0;
    border-radius:0;border-bottom:0;color:var(--white);
    font-weight:700;font-size:1.04rem;letter-spacing:-.014em}
  .nav__links .nav__col a:hover,
  .nav__links .nav__col a[aria-current="page"]{color:var(--amber-text)}

  /* capped and pushed right, so a wide screen does not blow the image up
     and drag the height of the whole panel with it */
  .nav__links .nav__feat{display:block;min-height:0;padding:0;border-radius:10px;
    border-bottom:0;color:var(--white);overflow:hidden;max-width:460px;margin-left:auto}
  .nav__feat img{display:block;width:100%;aspect-ratio:3/1;object-fit:cover;border-radius:10px}
  /* inline-flex, not flex: the underline should hug the words rather than
     run the full width of the column */
  .nav__feat span{display:inline-flex;align-items:center;gap:.55rem;margin-top:.95rem;
    font-weight:800;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;
    text-decoration:underline;text-underline-offset:5px;
    text-decoration-color:rgba(255,255,255,.35);
    transition:text-decoration-color .18s ease,color .18s ease}
  .nav__links .nav__feat:hover span{color:var(--amber);text-decoration-color:var(--amber)}
  .nav__feat .arw{transition:transform .18s ease}
  .nav__links .nav__feat:hover .arw{transform:translateX(3px)}
}


.nav__toggle{display:none;background:transparent;border:2px solid rgba(255,255,255,.55);
  border-radius:999px;color:var(--white);padding:.6rem 1.1rem;font-weight:700;font-size:.9rem;min-height:44px}


/* --- Hero ----------------------------------------------------------------- */
.hero{position:relative;min-height:min(88svh,780px);display:flex;align-items:center;
  padding-block:calc(var(--nav-h) + 3rem) clamp(3rem,7vw,5rem);
  background:var(--olive);color:var(--white);overflow:hidden}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(40,49,22,.94) 0%,rgba(44,54,25,.84) 48%,rgba(52,63,29,.62) 100%)}
.hero{--amber-text:var(--amber)}
.hero__in{position:relative;z-index:2;max-width:44rem}
.hero__kicker{margin:1.25rem 0 0;font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:700;
  letter-spacing:-.01em;line-height:1.45;max-width:62ch}
.br-lg{display:none}
@media (min-width:700px){.br-lg{display:inline}}

/* --- Page header band ----------------------------------------------------- */
.phead{--amber-text:var(--amber);position:relative;background:var(--olive);color:var(--white);overflow:hidden;text-align:center;
  padding-block:calc(var(--nav-h) + clamp(2.5rem,6vw,4.5rem)) clamp(2.5rem,6vw,4.5rem)}
.phead__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18}
.phead::after{content:"";position:absolute;inset:0;background:rgba(58,69,34,.74)}
.phead .wrap{position:relative;z-index:2}

/* --- Split ---------------------------------------------------------------- */
.split{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--flip .split__media{order:2}
}
.split__media img{width:100%;border-radius:14px;object-fit:cover;aspect-ratio:1/1}
.split__media--wide img{aspect-ratio:3/2}

/* --- Olive feature band --------------------------------------------------- */
.oband{--amber-text:var(--amber);position:relative;background:var(--olive);color:var(--white);overflow:hidden;padding-block:var(--sec)}
.oband__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24}
.oband::after{content:"";position:absolute;inset:0;background:rgba(48,58,28,.82)}
.oband .wrap{position:relative;z-index:2}
.oband__inner{max-width:44rem;margin-left:auto;text-align:right}
.oband__inner .btns{justify-content:flex-end}
@media (max-width:760px){
  .oband__inner{text-align:left;margin-left:0}
  .oband__inner .btns{justify-content:flex-start}
}

/* --- Video ---------------------------------------------------------------- */
.video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--ink)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- Ministry cards -------------------------------------------------------
   Photo with the team name laid over it, copy beneath, then a secondary
   button. No border: the photo's own rounded edge is the card edge.
   Buttons are pushed to the bottom so they line up across a row whatever
   the copy length.                                                         */
.mcards{display:grid;gap:clamp(1.9rem,3vw,2.6rem);grid-template-columns:1fr;
  margin-top:2.75rem;text-align:left}
@media (min-width:700px){.mcards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.mcards{grid-template-columns:repeat(3,1fr)}}

.mcard{display:flex;flex-direction:column}
.mcard__fig{position:relative;margin:0;border-radius:14px;overflow:hidden}
.mcard__fig img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  object-position:center var(--pos,40%);transition:transform .55s cubic-bezier(.2,.7,.3,1)}
/* --pos is set per photo in the markup: a 4:3 window out of a portrait
   source cuts faces unless each one says where its subject sits. */
.mcard:hover .mcard__fig img{transform:scale(1.045)}
/* the name has to stay legible whatever the photo does underneath it */
.mcard__fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,14,6,.74) 0%,rgba(10,14,6,.3) 36%,rgba(10,14,6,0) 64%)}
.mcard__name{position:absolute;z-index:2;
  left:clamp(1.05rem,2vw,1.5rem);bottom:clamp(.85rem,1.8vw,1.2rem);right:1rem;
  margin:0;color:var(--white);font-size:clamp(1.45rem,2.1vw,1.85rem);
  font-weight:800;letter-spacing:-.028em;line-height:1.06;
  text-shadow:0 2px 14px rgba(0,0,0,.42)}
.mcard__copy{margin:1.15rem 0 1.4rem;font-size:1.02rem;line-height:1.65;
  color:var(--ink);text-wrap:pretty}
.mcard .btn{align-self:flex-start;margin-top:auto}

/* --- Bible reading plan ---------------------------------------------------
   One row per day: numbered marker, date, passage. Built to be edited by
   hand each month, so the markup stays flat and obvious.                   */
.rmonth{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
  margin:clamp(2.4rem,5vw,3.4rem) 0 .35rem}
.rmonth h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.rmonth span{font-size:.78rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.rplan{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.7rem}
.rplan li{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.2rem);
  border:1.5px solid var(--line);border-radius:12px;
  padding:.9rem clamp(1rem,2vw,1.3rem)}
.rplan__n{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:#EAEEE0;
  color:var(--olive);font-weight:800;font-size:1rem;font-variant-numeric:tabular-nums}
.rplan__d{margin:0;font-size:1.06rem;font-weight:700;letter-spacing:-.014em}
.rplan__p{margin:.12rem 0 0;font-size:1rem;color:var(--muted)}
.rnote{margin:2rem 0 0;color:var(--muted);font-size:.98rem}

/* --- Link cards ----------------------------------------------------------- */
.lcards{display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:2.5rem}
@media (min-width:760px){.lcards{grid-template-columns:repeat(2,1fr)}}
.lcard{--amber-text:var(--amber);position:relative;display:block;border-radius:12px;overflow:hidden;text-decoration:none;
  color:var(--white);min-height:300px}
.lcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.lcard:hover img{transform:scale(1.04)}
.lcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,15,28,.90) 0%,rgba(10,15,28,.34) 60%,rgba(10,15,28,.14) 100%)}
.lcard__body{position:relative;z-index:2;padding:1.75rem;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:300px}
.lcard__body h3{font-size:1.45rem}
.lcard__body span{display:inline-flex;align-items:center;gap:.5rem;margin-top:.7rem;font-weight:700;
  font-size:.93rem;font-weight:700;letter-spacing:-.004em;padding-bottom:.5rem;
  border-bottom:1.5px solid rgba(255,255,255,.75);align-self:flex-start}

/* --- Accordion ------------------------------------------------------------ */
.acc{margin-top:2.5rem;display:grid;gap:.85rem;text-align:left}
.acc details{--amber-text:var(--amber);background:var(--olive);border-radius:12px;overflow:hidden}
.acc summary{display:flex;align-items:center;gap:1rem;list-style:none;cursor:pointer;
  padding:1.15rem 1.5rem;color:var(--white);font-weight:700;font-size:1.0625rem;min-height:56px}
.acc summary::-webkit-details-marker{display:none}
.acc summary .chev{margin-left:auto;flex:0 0 auto;transition:transform .25s ease}
.acc details[open] summary .chev{transform:rotate(180deg)}
.acc__body{padding:0 1.5rem 1.4rem;color:#E9ECE1}
.acc__body p{margin:0 0 .6rem;max-width:70ch}
.acc__body p:last-child{margin-bottom:0}
.acc .ref{font-size:.92rem;color:var(--amber);font-weight:600}

/* --- Forms ---------------------------------------------------------------- */
.form{margin-top:2.5rem;text-align:left}
.field{margin-bottom:1.5rem}
.field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}
.field .hint{display:block;margin-top:.4rem;font-size:.86rem;color:var(--muted);font-weight:400}
.field input,.field textarea,.field select{width:100%;padding:.9rem 1rem;font:inherit;font-size:1rem;
  color:var(--ink);background:var(--white);border:2px solid #334156;border-radius:6px;
  transition:border-color .18s ease,box-shadow .18s ease}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--olive);
  box-shadow:0 0 0 3px rgba(58,69,34,.16);outline:none}
.field textarea{min-height:150px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#5C6472}
.row{display:grid;gap:1.5rem}
@media (min-width:640px){.row--2{grid-template-columns:1fr 1fr}}
.checks{display:grid;gap:.4rem;margin-top:.3rem}
@media (min-width:640px){.checks{grid-template-columns:1fr 1fr}}
.check{display:flex;align-items:center;gap:.7rem;font-size:1rem;cursor:pointer;min-height:48px;padding:.2rem 0}
.check input{width:20px;height:20px;accent-color:var(--olive);flex:0 0 auto}
.hp{position:absolute!important;left:-9999px!important}
.form__note{font-size:.86rem;color:var(--muted);margin-top:1rem}
.form__msg{margin-top:1.2rem;padding:1rem 1.15rem;border-radius:8px;font-size:.98rem;display:none}
.form__msg.ok{display:block;background:#EDF2E4;border:2px solid var(--olive)}
.form__msg.err{display:block;background:#FDF3DE;border:2px solid var(--amber-dark)}

/* --- Info list ------------------------------------------------------------ */
.info{display:grid;gap:1.75rem;margin-top:2rem;text-align:left}
.info h3{font-size:.86rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.5rem}
.info p{margin:0;line-height:1.7}
.info a{display:inline-block;min-height:44px;padding:.55rem 0;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.info a:hover{text-decoration-color:var(--amber-dark)}

/* --- CTA band ------------------------------------------------------------- */
.cta{--amber-text:var(--amber);position:relative;overflow:hidden;background:var(--olive);color:var(--white);
  padding-block:clamp(3.5rem,8vw,5.5rem);text-align:center}
.cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24}
.cta::after{content:"";position:absolute;inset:0;background:rgba(46,56,26,.82)}
.cta .wrap{position:relative;z-index:2}
/* .cta centres its text, but .btns is a flex row and needs its own rule */
.cta .btns{justify-content:center}
.cta p{margin:1.25rem auto 0;max-width:52ch;color:#E9ECE1}

/* --- Footer --------------------------------------------------------------- */
.foot{--amber-text:var(--amber);background:var(--black);color:var(--white);padding-block:clamp(3rem,6vw,4rem) 2rem;text-align:center}
.foot__social{display:flex;justify-content:center;gap:.35rem;margin:0 0 2rem}
.foot__social a{display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:50%;color:var(--white);transition:color .18s ease,background .18s ease}
.foot__social a:hover{color:var(--amber);background:rgba(255,255,255,.08)}
.foot__social svg{width:22px;height:22px;fill:currentColor}
.foot__gather{margin:0 auto 1.75rem;max-width:64ch;color:#D7DACF;
  font-size:1rem;line-height:1.65;text-wrap:pretty}
@media (max-width:620px){.foot__gather br{display:none}}
.foot__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.25rem;list-style:none;
  margin:0 0 1.5rem;padding:0}
.foot__nav a{display:flex;align-items:center;min-height:48px;padding:.5rem .4rem;text-decoration:none;
  font-weight:700;font-size:1rem;transition:color .18s ease}
.foot__nav a:hover{color:var(--amber)}
/* --- Legal / policy pages -------------------------------------------------
   Long-form text. Section headings and lists need their own rhythm, since
   .prose only covers paragraphs elsewhere on the site.                    */
.legal h2{font-size:clamp(1.35rem,2.1vw,1.6rem);margin:2.9rem 0 1rem}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.04rem;margin:1.9rem 0 .6rem}
.legal p{margin:0 0 1.2em;line-height:1.75}
.legal ul{margin:0 0 1.35em;padding-left:1.3rem}
.legal li{margin:0 0 .6em;line-height:1.72}
.legal li:last-child{margin-bottom:0}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line);font-weight:600}
.legal a:hover{text-decoration-color:var(--amber-dark)}
.legal__date{color:var(--muted);font-size:.97rem;margin:0 0 2.6rem}

/* privacy / terms line under the copyright */
.foot__legal{margin:.85rem 0 0}
.foot__legal a{color:#A8ADB3;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.26);transition:color .18s ease}
.foot__legal a:hover{color:var(--amber)}

.foot__base{color:#A8ADB3;font-size:.95rem}
.foot__base p{margin:0 0 .4rem}

/* --- "New Here?" tab ------------------------------------------------------
   A plain link pinned to the right edge at every scroll position.
   Two stacked lines keep the tab short instead of one very long one.
   Add class "nh--left" on .nh to move it to the left edge.                 */
:root{--nh:#F6C14B;--nh-ink:#1A2109}

.nh{position:fixed;top:50%;right:0;z-index:120;transform:translateY(-50%)}

.nh__tab{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  writing-mode:vertical-rl;text-decoration:none;
  background:var(--nh);color:var(--nh-ink);
  font-family:var(--font);line-height:1.25;
  padding:1.5rem .62rem;border-radius:9px 0 0 9px;
  box-shadow:-3px 0 14px rgba(0,0,0,.22);
  transition:background .18s ease,padding-right .18s ease;
}
.nh__tab:hover{background:#FFD36E;padding-right:.9rem}
.nh__lead{font-weight:800;font-size:.95rem;letter-spacing:.015em}
.nh__tab .arw{transition:transform .18s ease}
.nh__tab:hover .arw{transform:translateY(3px)}
.nh__tab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* left-edge variant */
.nh--left{right:auto;left:0}
.nh--left .nh__tab{border-radius:0 9px 9px 0;box-shadow:3px 0 14px rgba(0,0,0,.22)}
.nh--left .nh__tab:hover{padding-right:.62rem;padding-left:.9rem}

/* phones: a full-width bar across the bottom */
@media (max-width:620px){
  .nh{top:auto;bottom:0;right:0;left:0;transform:none}
  .nh__tab{writing-mode:horizontal-tb;flex-direction:row;align-items:center;gap:.55rem;
    padding:.95rem 1.2rem;border-radius:0;min-height:52px;
    box-shadow:0 -3px 14px rgba(0,0,0,.22)}
  .nh__tab:hover{padding:.95rem 1.2rem}
  .nh__lead{font-size:1rem}
  .nh__tab .arw{transform:none}
  .nh__tab:hover .arw{transform:translateX(3px)}
  /* keep the footer clear of the fixed bar */
  .foot{padding-bottom:5.5rem}
}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --- Black and white filmstrip -------------------------------------------
   Full-bleed marquee of photos, no labels. The track holds the same set
   twice and slides exactly -50%, so the loop is seamless. Height is fixed
   and width is auto, so portrait and landscape shots give a varied rhythm. */
.filmstrip{
  --fs-h:clamp(190px,24vw,310px);
  --fs-gap:14px;
  position:relative;overflow:hidden;
  padding-top:clamp(1.5rem,3vw,2.5rem);
  padding-bottom:clamp(2.5rem,6vw,4.5rem);
  background:var(--white);
  /* soft fade at both edges */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
}
.filmstrip__track{display:flex;width:max-content;gap:var(--fs-gap);
  animation:filmstrip 64s linear infinite;will-change:transform}
.filmstrip__set{display:flex;gap:var(--fs-gap);flex:0 0 auto}
.filmstrip img{
  height:var(--fs-h);width:auto;flex:0 0 auto;display:block;
  object-fit:cover;border-radius:5px;
  filter:grayscale(1) contrast(1.06);
  transition:filter .35s ease;
}
/* -50% lands exactly on the start of the duplicated set */
@keyframes filmstrip{from{transform:translateX(0)}to{transform:translateX(calc(-50% - (var(--fs-gap) / 2)))}}
.filmstrip:hover .filmstrip__track{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .filmstrip{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .filmstrip__track{animation:none}
}

/* --- Why Another Church: photo collage ----------------------------------
   Two columns on desktop, collage left and copy right. The photos overlap
   using absolute positioning inside a ratio box, so the arrangement holds
   at any width. Below 900px the collage becomes a simple three-up row.   */
.oband__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:900px){
  .oband__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .oband__grid .oband__inner{margin-left:0;max-width:none}
}

.collage{position:relative;aspect-ratio:1/1.02;width:100%}
.collage img{
  position:absolute;border-radius:8px;object-fit:cover;
  box-shadow:0 18px 40px rgba(0,0,0,.34);
  border:3px solid rgba(255,255,255,.9);
  /* matches the filmstrip treatment; delete this line to go back to colour */
  filter:grayscale(1) contrast(1.06);
}
.collage__a{width:54%;top:0;left:0;aspect-ratio:3/4}
.collage__b{width:42%;top:11%;right:0;aspect-ratio:3/4}
.collage__c{width:58%;bottom:0;left:9%;aspect-ratio:3/2}

@media (max-width:899px){
  .collage{aspect-ratio:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .collage img{position:static;width:100%;height:100%;border-width:2px;
    box-shadow:0 10px 22px rgba(0,0,0,.3)}
  .collage__a,.collage__b,.collage__c{aspect-ratio:3/4}
}
@media (max-width:460px){
  .collage{grid-template-columns:1fr 1fr;gap:8px}
  .collage__c{grid-column:span 2;aspect-ratio:16/9}
}
/* between 621 and 899px the collage is full width and the Plan A Visit tab
   is still a side tab, so leave room for it */
@media (min-width:621px) and (max-width:899px){
  .collage{padding-right:58px}
}

/* --- Text cards (New Here page) -------------------------------------------
   Same border and radius as the photo cards, but no image, so the padding
   has to carry the top of the box on its own.                              */
.vcards{display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:2.5rem}
@media (min-width:700px){.vcards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.vcards--3{grid-template-columns:repeat(3,1fr)}}
.vcard{border:2px solid var(--ink);border-radius:10px;background:var(--white);
  padding:1.7rem 1.55rem 1.8rem;text-align:left}
/* --muted, not --amber-text: the gold measures 3.24:1 on white, which only
   clears AA at large sizes, and this label is 13.8px. Same treatment as
   .info h3 on the contact page. */
.vcard h3{font-size:.86rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .85rem}
.vcard p{margin:0;line-height:1.68;font-size:1.04rem}

/* --- Service times --------------------------------------------------------
   64ch, not the 52ch that .cta p sets, so the forced <br> lands after
   "Civic Center," instead of leaving "Center," orphaned on line two. */
.cta p.gather{max-width:64ch}

/* --- Beliefs at a glance -------------------------------------------------
   Titles only. The wording of each belief lives on /what-we-believe/ so
   there is one copy to edit, not two.                                      */
.glance{display:grid;gap:.85rem 2.5rem;grid-template-columns:1fr;margin:2.5rem 0 0;
  padding:0;list-style:none;text-align:left}
@media (min-width:720px){.glance{grid-template-columns:repeat(2,1fr)}}
.glance li{display:flex;gap:.8rem;align-items:flex-start;line-height:1.55;
  font-weight:600;font-size:1.02rem}
.glance svg{flex:0 0 auto;width:21px;height:21px;margin-top:.2rem;color:var(--amber)}

@media (max-width:1080px){
  .nav__brand img{height:46px}
  /* the brand and the toggle sit above the overlay, like the reference */
  .nav__brand,.nav__toggle{position:relative;z-index:2}

  .nav__toggle{display:flex;align-items:center;justify-content:center;
    width:46px;height:46px;padding:0;border:0;background:transparent;color:var(--white)}
  .nav__toggle .ico{display:block}
  .nav__toggle .ico--close{display:none}
  .nav__toggle[aria-expanded="true"] .ico--menu{display:none}
  .nav__toggle[aria-expanded="true"] .ico--close{display:block}

  /* --- Full-screen centred overlay ---------------------------------------
     One olive field, no dividers, tiers separated by space rather than
     rules: primary links, then the Connect group, then social and account. */
  .nav__links{
    position:fixed;inset:0;z-index:1;
    flex-direction:column;align-items:center;justify-content:flex-start;gap:0;
    background:var(--olive);text-align:center;
    padding:calc(var(--nav-h) + clamp(1.25rem,5vh,3rem)) var(--gut) 2.5rem;
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(-100%);opacity:0;visibility:hidden;
    transition:transform .34s cubic-bezier(.2,.7,.3,1),opacity .22s ease,visibility .34s;
    box-shadow:none;
  }
  .nav__links.is-open{transform:none;opacity:1;visibility:visible}
  .nav__links > li{width:100%}

  /* primary tier */
  .nav__links > li > a{
    display:flex;justify-content:center;align-items:center;
    padding:.72rem .25rem;min-height:48px;border-bottom:0;border-radius:0;
    font-size:1.05rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  }
  /* Give Online moves up beside the other primary links and drops the pill:
     a lone gold button in a centred stack fights the flow. */
  .nav__give{order:2}
  .nav__links a.btn{margin:0;padding:.72rem .25rem;min-height:48px;
    background:transparent;color:var(--amber)}
  .nav__links a.btn::before{display:none}
  .nav__links a.btn:hover{color:var(--amber)}

  /* Connect group, always open. An accordion control in a centred stack
     reads as a widget; the reference flows as plain tiers instead. */
  .nav__drop{order:3;margin-top:clamp(1.4rem,4vh,2.3rem)}
  .nav__droptog{display:none}
  .nav__sub{display:block;padding:0;background:none;box-shadow:none}
  .nav__mega{display:block;width:auto;padding:0}
  .nav__col + .nav__col{margin-top:1.35rem}
  .nav__col h3{font-size:.7rem;font-weight:800;letter-spacing:.17em;
    text-transform:uppercase;color:rgba(255,255,255,.62);margin:0 0 .1rem}
  .nav__links .nav__col a{display:flex;justify-content:center;align-items:center;
    min-height:46px;padding:.55rem .25rem;border-bottom:0;
    font-size:1rem;font-weight:600;letter-spacing:0;text-transform:none;color:#DCE0D4}
  .nav__links .nav__col a[aria-current="page"]{color:var(--amber)}
  .nav__links .nav__feat{display:none}

  .nav__social{order:4;display:flex;justify-content:center;gap:.4rem;
    margin-top:clamp(1.6rem,5vh,2.6rem)}
  .nav__links .nav__social a{display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;min-height:48px;padding:0;border-radius:50%;border-bottom:0;
    color:var(--white)}
  .nav__social svg{width:21px;height:21px;fill:currentColor}
  .nav__links .nav__social a:hover{color:var(--amber);background:rgba(255,255,255,.08)}

  .nav__account{order:5;margin-top:.9rem}
  .nav__acctxt{display:inline}
  .nav__links .nav__account a{display:flex;justify-content:center;align-items:center;gap:.6rem;
    min-height:48px;padding:.5rem .25rem;border-bottom:0;
    font-size:.95rem;font-weight:600;letter-spacing:0;text-transform:none;color:#DCE0D4}
  .nav__account svg{width:24px;height:24px}
  .nav__links .nav__account a:hover{color:var(--amber)}

  /* the bar behind the overlay matches it exactly, so there is no seam */
  .nav.is-menu-open::before{height:100%;background:var(--olive)}

  /* The Plan A Visit tab is z-index 120, above the header, so it would
     float on top of the open overlay. Body class, because .nh is a sibling
     of the header and cannot be reached from .nav. */
  body.is-menu-open .nh{opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .2s ease,visibility .2s}

  /* Give Online is amber as the CTA, so the current page needs a second
     signal or the two ambers are indistinguishable on the homepage. */
  .nav__links > li > a[aria-current="page"]{
    text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px}
}