:root{
  --ink:#000000;
  --text:#1a1a1a;
  --cream:#F4F2EE;
  --lightest:#FAF9F7;
  --paper:#ffffff;
  --muted:#626262;
  --muted-2:#8F8F8F;
  --line:#CECBC6;
  --warm:#CFCAC0;
  /* department accents */
  --kids:#6E9FB0;
  --youth:#4E9F5B;
  --groups:#F5D46B;
  --for:#DA2D2F;
  --display:"Outfit","Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Cardo",Georgia,serif;
  --maxw:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

/* Type scale on small screens.
   Every font-size in this file is in rem; every dimension is in px. That split
   is deliberate and load-bearing, because it means changing the root size here
   scales all the text and moves no layout at all. Keep it that way: a rem in a
   padding or a width would start shifting the design at this breakpoint.
   At 375px the body text was 15.2px, under the 16px that reads comfortably on
   a phone. 109% lifts it to 16.6px and everything else by the same ratio.
   A percentage rather than a pixel value, so a reader who has set a larger
   default font size in their browser still gets it. */
@media (max-width:760px){
  :root{font-size:109%;}
}
body{
  margin:0;background:var(--cream);color:var(--text);
  font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display);line-height:1.06;letter-spacing:-.02em;margin:0;font-weight:800;}
/* Section headings — uppercase Outfit, matching the hero */
.subhero h1,.welcome h2,.section-head h2,.visit__card h2,.watch h2,.give h2,.prose h2{
  text-transform:uppercase;font-weight:600;letter-spacing:.01em;line-height:1.1;
}
img{max-width:100%;display:block;}
a{color:inherit;}
/* Anchors land clear of the sticky header. --navh is measured in menu.js
   (74px desktop, 67px mobile); the 72px is the pre-JS fallback. */
section{scroll-margin-top:calc(var(--navh,72px) + 8px);}

/* Eyebrow — serif italic accent */
.kicker{display:block;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.kicker--light{color:var(--warm);}

/* Buttons — squared, geometric */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;padding:16px 32px;border-radius:0;border:2px solid transparent;
  /* <button> would otherwise take the browser's gray buttonface, which makes
     .btn--ghost unreadable on the dark bands. Modifiers below override this. */
  background:transparent;
  transition:background .15s ease,color .15s ease;white-space:nowrap;cursor:pointer;
}
/* nowrap above keeps short labels on one line, which is right nearly always.
   On a phone at the larger type size the longest label on the site, "Complete
   the Partner Agreement", no longer fits 375px and pushed the whole page
   sideways. Let labels wrap there and tighten the side padding. A two-line
   button is fine; a page that scrolls horizontally is not.
   This block must stay AFTER .btn: a media query adds no specificity, so the
   plain .btn rule would win on source order alone if this sat above it. */
@media (max-width:760px){
  .btn{white-space:normal;padding-left:24px;padding-right:24px;text-align:center;}
}
.btn--solid{background:var(--ink);color:#fff;}
.btn--solid:hover{background:#262626;}
.btn--invert{background:#fff;color:var(--ink);}
/* White button flips to black on hover */
.btn--invert:hover{background:var(--ink);color:#fff;}
.btn--outline{color:var(--ink);border-color:var(--ink);}
.btn--outline:hover{background:var(--ink);color:#fff;}
.btn--ghost{color:#fff;border-color:rgba(255,255,255,.55);}
.btn--ghost:hover{background:rgba(255,255,255,.12);}
.btn--sm{padding:11px 20px;font-size:.7rem;}

/* The hidden attribute must beat any display rule we set on an element.
   Without this, .le-modules{display:grid} keeps showing while JS thinks it
   is hidden. */
[hidden]{display:none !important;}

/* Header */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px clamp(16px,4vw,40px);
  background:rgba(247,245,241,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand__mark{height:36px;width:auto;display:block;}
/* Fluid gap so the six items still clear the logo on narrow desktops */
.nav__links{display:flex;align-items:center;gap:clamp(15px,2.2vw,30px);}
.nav__links a{text-decoration:none;font-family:var(--display);font-weight:600;font-size:.9rem;letter-spacing:.04em;}
.nav__links a:not(.btn){color:var(--ink);position:relative;}
/* Hover draws a rule ABOVE the word, not under it. Scaled from the centre so it
   grows outward instead of wiping in from one edge. The text colour deliberately
   holds steady: dimming it on hover reads as disabled once a line is doing the
   work of showing which item is live. */
.nav__links a:not(.btn)::before{
  content:"";position:absolute;left:0;right:0;top:-7px;height:3px;
  background:var(--a-teal);border-radius:2px;
  transform:scaleX(0);transform-origin:center;
  transition:transform .22s ease;
}
.nav__links a:not(.btn):hover::before,
.nav__links a:not(.btn):focus-visible::before{transform:scaleX(1);}
@media (prefers-reduced-motion:reduce){
  .nav__links a:not(.btn)::before{transition:none;}
}
/* In the stacked mobile drawer the items already carry a divider, and there is no
   hover on touch, so the upperline would only ever flash on focus. */
@media (max-width:760px){
  .nav__links a:not(.btn)::before{display:none;}
}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.nav__toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.2s;}

/* Hero */
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:#fff;
  min-height:clamp(520px,76vh,840px);display:flex;align-items:center;justify-content:center;
  padding:clamp(90px,10vh,150px) clamp(16px,4vw,40px);}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__video,.hero__img{width:100%;height:100%;object-fit:cover;display:block;}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.78) 100%);}
.hero__inner{position:relative;z-index:2;max-width:900px;margin:0 auto;text-align:center;}
/* Hides the autoplay video on reduced-motion. The hero currently uses a plain
   image element instead of the video, and that image is opaque and covers this
   element completely, so the old 6MB hero-poster.png fallback was downloaded
   and then painted over. It is no longer requested. assets/hero-poster.png is
   still on disk: if the video block ever goes back into index.html, restore
   `center/cover no-repeat url('assets/hero-poster.png')` on the line below. */
@media (prefers-reduced-motion:reduce){
  .hero__video{display:none;}
  .hero__media{background:#000;}
}
.hero__eyebrow{font-family:"Outfit",sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--warm);margin-bottom:22px;}
.hero__title{font-family:"Outfit","Montserrat",sans-serif;font-weight:400;text-transform:uppercase;white-space:nowrap;font-size:clamp(1.1rem,6vw,3.9rem);line-height:1.1;letter-spacing:.03em;}
.hero__sub{max-width:52ch;margin:26px auto 36px;font-size:clamp(0.95rem,2.2vw,1.25rem);color:rgba(255,255,255,.8);}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}

/* Info strip — white cards floating over the hero edge */
.strip{
  max-width:var(--maxw);margin:-44px auto 0;position:relative;z-index:5;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.14);width:calc(100% - 32px);
}
.strip__item{padding:26px 28px;text-decoration:none;border-right:1px solid var(--line);transition:background .15s;}
.strip__item:last-child{border-right:0;}
.strip__item:hover{background:var(--lightest);}
.strip__label{display:block;font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;}
.strip__big{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em;}

/* Welcome */
.welcome{padding:clamp(32px,5vw,58px) clamp(16px,4vw,40px);}
.welcome__inner{max-width:820px;margin:0 auto;}
.welcome h2{font-size:clamp(2rem,5.2vw,3.2rem);margin-bottom:18px;}
.welcome p{font-size:clamp(1.05rem,2.1vw,1.2rem);color:var(--muted);margin:0 0 20px;line-height:1.7;}
.welcome .welcome__lead{font-family:var(--body);font-weight:600;color:var(--ink);font-size:clamp(1.2rem,2.6vw,1.55rem);line-height:1.35;margin:0 0 22px;}
.link-arrow{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:3px;}

/* Plan a visit */
.visit{padding:0 clamp(16px,4vw,40px) clamp(38px,6vw,66px);}
.visit__card{
  max-width:var(--maxw);margin:0 auto;background:var(--paper);color:var(--ink);
  border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.08);
  padding:clamp(34px,6vw,68px);
  display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,60px);align-items:center;
}
.visit__card h2{font-size:clamp(1.9rem,4.5vw,2.9rem);}
.visit__intro>p{color:var(--muted);max-width:52ch;margin:18px 0 28px;}
.visit__cta{display:flex;flex-wrap:wrap;gap:14px;}
.visit__facts{list-style:none;padding:0;margin:0;display:grid;gap:18px;}
.visit__facts li{border-top:1px solid var(--line);padding-top:14px;font-size:1.02rem;}
.visit__facts strong{display:block;font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
/* Homepage visit card — image panel on the left (intro), white facts on the right */
#visit .visit__card{padding:0;gap:0;overflow:hidden;align-items:stretch;}
#visit .visit__intro{background:linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,.46)),url('assets/visit-bg.jpg') center/cover;color:#fff;padding:clamp(34px,5vw,60px);display:flex;flex-direction:column;justify-content:center;}
#visit .visit__intro h2,#visit .visit__intro>p{text-shadow:0 1px 18px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5);}
#visit .visit__facts{padding:clamp(34px,5vw,60px);}
#visit .visit__intro h2{color:#fff;}
#visit .visit__intro>p{color:#fff;}

/* Connect / departments */
/* Bottom padding is deliberately small: "Stay up to date" reads as the tail of the
   next-step row, so the two sections sit close instead of drifting apart. */
.connect{padding:0 clamp(16px,4vw,40px) clamp(18px,2.4vw,26px);max-width:var(--maxw);margin:0 auto;}
.section-head{max-width:640px;margin:0 0 44px;}
.section-head h2{font-size:clamp(1.9rem,5vw,3rem);}
.section-head p{color:var(--muted);margin:14px 0 0;font-size:1.08rem;}
.cards{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);}
.card{
  position:relative;display:flex;flex-direction:column;background:var(--lightest);padding:30px 26px 28px;
  text-decoration:none;color:inherit;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .15s ease;
}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--c);}
.card:hover{background:#fff;}
.card__tag{display:inline-block;font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c);margin-bottom:14px;}
.card h3{font-size:1.3rem;color:var(--ink);margin-bottom:8px;}
.card p{color:var(--muted);margin:0 0 18px;font-size:.94rem;}
.card__arrow{margin-top:auto;padding-top:18px;font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.04em;color:var(--ink);}
/* Photo cards — colour image behind text with dark overlay (swap assets/step-1..4.jpg) */
.cards--photo .card{padding:0;position:relative;overflow:hidden;aspect-ratio:1.28/1;}
.cards--photo .card::before{display:none;}
.card__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.card__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.46) 50%,rgba(0,0,0,.82) 100%);}
.card__content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;flex:1;padding:24px 26px;}
.cards--photo .card__tag{color:#fff;}
.cards--photo .card h3{color:#fff;}
.cards--photo .card__arrow{margin-top:14px;padding-top:0;color:#fff;}
/* These photo tiles are whole-card links, so hover has to announce it. The image
   pushes in (same 1.06 the sermon thumbs use), the scrim deepens to keep the type
   legible while the picture moves, and the arrow steps toward its edge. */
.cards--photo .card__bg{transition:transform .4s ease;}
.cards--photo .card__scrim{transition:background .3s ease;}
.cards--photo .card__arrow{transition:transform .25s ease;}
.cards--photo .card:hover .card__bg,
.cards--photo .card:focus-visible .card__bg{transform:scale(1.06);}
.cards--photo .card:hover .card__scrim,
.cards--photo .card:focus-visible .card__scrim{
  background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.56) 50%,rgba(0,0,0,.88) 100%);
}
.cards--photo .card:hover .card__arrow,
.cards--photo .card:focus-visible .card__arrow{transform:translateX(7px);}
@media (prefers-reduced-motion:reduce){
  .cards--photo .card__bg,.cards--photo .card__arrow{transition:none;}
  .cards--photo .card:hover .card__bg,
  .cards--photo .card:focus-visible .card__bg,
  .cards--photo .card:hover .card__arrow,
  .cards--photo .card:focus-visible .card__arrow{transform:none;}
}

/* Watch / Sermons */
.watch{background:var(--ink);color:#fff;padding:clamp(24px,3vw,38px) clamp(16px,4vw,40px);text-align:center;}
.watch__bar{max-width:var(--maxw);margin:0 auto;text-align:center;}
.watch h2{font-size:clamp(1.6rem,4vw,2.4rem);}
.watch__all{display:inline-block;margin-top:10px;font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#fff;white-space:nowrap;}
.watch__all:hover{color:var(--warm);}

/* Latest messages — horizontal scroll row */
.sermons{
  display:flex;gap:18px;overflow-x:auto;max-width:var(--maxw);margin:14px auto 0;
  padding:4px 2px 16px;text-align:left;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent;
}
.sermons::-webkit-scrollbar{height:8px;}
.sermons::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:99px;}
.sermons::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:99px;}
.sermon{flex:0 0 300px;scroll-snap-align:start;text-decoration:none;color:#fff;}
.sermon__thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#000;}
.sermon__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
.sermon:hover .sermon__thumb img{transform:scale(1.06);}
.sermon__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.92;transition:opacity .2s;}
.sermon:hover .sermon__play{opacity:1;}
.sermon__play svg{width:52px;height:52px;}
.sermon__title{display:block;font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;line-height:1.25;margin-top:14px;}
.sermon__meta{display:block;color:rgba(255,255,255,.6);font-size:.85rem;margin-top:5px;}
@media(max-width:520px){.sermon{flex-basis:78vw;}}

/* ---------- Sermons archive (sermons.html) ---------- */
/* Deliberately dark, which lets the whole page reuse .sermon above rather than
   restating a card. The only override needed is turning off the flex sizing
   that the homepage's horizontal row depends on. */

.sx-hero{position:relative;min-height:clamp(320px,46vh,520px);display:flex;
  align-items:flex-end;background:var(--ink);overflow:hidden;
  border-bottom:7px solid var(--a-teal);}
.sx-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Weighted to the bottom because the text sits there; the top stays open so the
   thumbnail's own artwork is still readable. */
.sx-hero__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.86) 100%);}
.sx-hero__inner{position:relative;z-index:2;max-width:var(--maxw);width:100%;
  margin:0 auto;padding:clamp(28px,5vw,56px) clamp(16px,4vw,40px);color:#fff;}
.sx-hero__eyebrow{display:block;font-family:var(--display);font-weight:700;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--warm);margin-bottom:12px;}
.sx-hero__title{font-family:var(--display);font-weight:800;
  font-size:clamp(1.7rem,5vw,3.2rem);line-height:1.05;letter-spacing:-.02em;
  text-wrap:balance;max-width:18ch;}
.sx-hero__meta{margin:12px 0 22px;color:rgba(255,255,255,.82);
  font-size:clamp(.95rem,1.6vw,1.05rem);}

.sx{background:var(--ink);color:#fff;
  padding:clamp(28px,4vw,52px) clamp(16px,4vw,40px) clamp(44px,6vw,80px);}
.sx__inner{max-width:var(--maxw);margin:0 auto;}

.sx-tools{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;
  justify-content:space-between;}
.sx-search{flex:1 1 260px;max-width:380px;}
/* Visible label rather than placeholder-only: a placeholder disappears the
   moment someone types, taking the only explanation with it. */
.sx-search__label{display:block;font-family:var(--display);font-weight:700;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:7px;}
.sx-search input{width:100%;font:inherit;font-size:1rem;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
  border-radius:3px;padding:11px 14px;}
.sx-search input::placeholder{color:rgba(255,255,255,.4);}
.sx-search input:focus-visible{outline:2px solid var(--a-teal);outline-offset:2px;
  background:rgba(255,255,255,.12);}

.sx-chips{display:flex;flex-wrap:wrap;gap:8px;}
.sx-chip{font-family:var(--display);font-weight:700;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  padding:9px 15px;border-radius:99px;
  background:transparent;color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.28);
  transition:background .15s ease,color .15s ease,border-color .15s ease;}
.sx-chip:hover{color:#fff;border-color:rgba(255,255,255,.6);}
.sx-chip:focus-visible{outline:2px solid var(--a-teal);outline-offset:2px;}
.sx-chip.is-on{background:#fff;color:var(--ink);border-color:#fff;}

.sx-count{margin:22px 0 0;color:rgba(255,255,255,.5);font-size:.85rem;}

/* The homepage row is a horizontal scroller; here the same cards go in a grid.
   Everything else about .sermon carries over unchanged. */
.sx-grid{display:grid;overflow:visible;scroll-snap-type:none;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(22px,3vw,34px);max-width:none;margin:18px 0 0;padding:0;}
.sx-grid .sermon{flex:none;}
@media(max-width:520px){.sx-grid .sermon{flex-basis:auto;}}

.sx-empty,.sx-note{margin:34px 0 0;color:rgba(255,255,255,.7);font-size:1rem;}
.sx-note a{color:var(--warm);}
.sx-clear{font:inherit;font-size:1rem;color:#fff;background:none;cursor:pointer;
  border:0;border-bottom:1px solid rgba(255,255,255,.5);padding:0;}
.sx-clear:hover{border-bottom-color:#fff;}
.sx-clear:focus-visible{outline:2px solid var(--a-teal);outline-offset:3px;}

/* Give */
/* Tight on top so it hugs the next-step cards, unchanged on the bottom so the
   footer seam stays where it was. */
.give{padding:clamp(16px,2.2vw,24px) clamp(16px,4vw,40px) clamp(40px,6vw,64px);text-align:center;}
.give__inner{max-width:640px;margin:0 auto;}
.give h2{font-size:clamp(1.9rem,5vw,3rem);}
.give p{color:var(--muted);font-size:1.1rem;margin:16px 0 28px;}

/* Why Four19 */
.why{padding:clamp(32px,5vw,54px) clamp(16px,4vw,40px);}
.why__inner{max-width:var(--maxw);margin:0 auto;}
.why .section-head{margin-bottom:36px;}
.why-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.why-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--ink);padding:30px 28px;}
.why-card__ref{font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px;}
.why-card__ref b{color:var(--ink);}
.why-card h3{font-size:1.35rem;color:var(--ink);margin:0 0 16px;}
.why-card__quote{border-left:2px solid var(--ink);padding-left:14px;font-size:1.02rem;color:var(--ink);line-height:1.5;margin:0 0 16px;font-weight:500;}
.why-card__text{color:var(--muted);font-size:.95rem;line-height:1.6;margin:0;}
@media (max-width:820px){.why-cards{grid-template-columns:1fr;}}

/* Sub-hero (interior) */
.subhero{background:var(--ink);color:#fff;padding:clamp(80px,12vw,140px) clamp(16px,4vw,40px) clamp(50px,8vw,90px);}
.subhero__inner{max-width:var(--maxw);margin:0 auto;}
.subhero__eyebrow{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--warm);margin-bottom:18px;}
.subhero h1{font-size:clamp(2.4rem,7vw,4.2rem);font-weight:600;}
.subhero p{max-width:52ch;margin:20px 0 0;font-size:clamp(1.05rem,2.2vw,1.25rem);color:rgba(255,255,255,.78);}

/* Prose */
.prose{max-width:780px;margin:0 auto;padding:clamp(64px,10vw,110px) clamp(16px,4vw,40px);}
.prose h2{font-size:clamp(1.7rem,4.5vw,2.6rem);margin-bottom:18px;}
.prose p{font-size:clamp(1.05rem,2.2vw,1.2rem);color:#3a3a3a;margin:0 0 18px;}

/* ---------- Privacy policy and SMS terms ---------- */
/* Long documents nobody reads for pleasure, so the job is scannability: a
   narrow measure, generous spacing between sections, and the clauses a carrier
   or a worried visitor is actually looking for pulled out where the eye lands. */
.lg-hero{background:var(--ink);color:#fff;
  padding:clamp(46px,7vw,86px) clamp(16px,4vw,40px) clamp(38px,5vw,60px);
  border-bottom:7px solid var(--a-teal);}
.lg-hero__inner{max-width:780px;margin:0 auto;}
.lg-hero h1{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(2rem,5.5vw,3.2rem);line-height:1.05;margin:10px 0 0;}
.lg-hero__date{margin:14px 0 0;color:rgba(255,255,255,.62);font-size:.95rem;}

.legal{background:var(--paper);padding:clamp(44px,6vw,78px) clamp(16px,4vw,40px) clamp(56px,8vw,96px);}
/* 68ch rather than the site's usual wider measure: this is dense reading and a
   long line is where people lose their place. */
.legal__inner{max-width:68ch;margin:0 auto;}
.legal__lede{font-size:clamp(1.1rem,2.2vw,1.28rem);line-height:1.6;color:var(--ink);
  margin:0 0 12px;padding-bottom:26px;border-bottom:1px solid var(--line);}
.legal h2{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;font-size:clamp(1.15rem,2.2vw,1.45rem);
  margin:44px 0 12px;color:var(--ink);}
.legal h3{font-family:var(--display);font-weight:700;font-size:1.02rem;
  margin:26px 0 8px;color:var(--ink);}
.legal p{font-size:1.04rem;line-height:1.65;color:var(--text);margin:0 0 16px;}
.legal ul{margin:0 0 18px;padding-left:22px;}
.legal li{font-size:1.04rem;line-height:1.6;color:var(--text);margin-bottom:10px;}
.legal a{color:var(--a-teal-t);text-underline-offset:3px;}
/* The sentences a carrier reviewer and an anxious visitor both look for:
   the no-selling promise, STOP, and HELP. */
.legal__callout{background:var(--cream);border-left:4px solid var(--a-teal);
  padding:16px 20px;margin:0 0 20px;border-radius:0 6px 6px 0;font-weight:600;}

/* Four19 Life */
.four19{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.four19__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,10vw,110px) clamp(16px,4vw,40px);}
.four19__grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);margin-top:40px;}
.pillar{padding:30px 28px 30px 0;border-right:1px solid var(--line);}
.pillar:last-child{border-right:0;}
.pillar__num{font-family:var(--display);font-weight:800;font-size:2.6rem;color:var(--ink);line-height:1;display:block;margin-bottom:18px;}
.pillar__truth{font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px;}
.pillar h3{font-size:1.5rem;color:var(--ink);}
.pillar__open{font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:10px 0 14px;}
.pillar p{color:var(--muted);font-size:.95rem;margin:0 0 16px;}
.pillar cite{font-family:var(--body);font-style:normal;font-size:.95rem;color:var(--text);display:block;border-left:2px solid var(--ink);padding-left:14px;}

/* Footer */
.foot{background:var(--ink);color:rgba(255,255,255,.72);padding:clamp(50px,8vw,80px) clamp(16px,4vw,40px) 28px;}
/* Five columns now: the brand block carries the address and socials, then Visit,
   Connect, About and Church. */
.foot__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:30px;}
.foot__brand img{height:52px;width:auto;margin-bottom:14px;}
.foot__tag{margin:0;font-family:var(--body);color:var(--warm);font-size:1.02rem;line-height:1.5;max-width:26ch;}
.foot__addr{margin:18px 0 0;font-size:.92rem;line-height:1.75;color:rgba(255,255,255,.7);}
.foot__addr a{color:rgba(255,255,255,.7);text-decoration:none;}
.foot__addr a:hover{color:#fff;}
.foot__social{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;}
.foot__social a{color:rgba(255,255,255,.7);text-decoration:none;font-size:.92rem;}
.foot__social a:hover{color:#fff;}
.foot__col h3,.foot__col h4{font-family:var(--display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:14px;font-weight:700;}
.foot__col a,.foot__col p{display:block;text-decoration:none;color:rgba(255,255,255,.7);margin-bottom:8px;font-size:.95rem;}
.foot__col a:hover{color:#fff;}
.foot__bar{max-width:var(--maxw);margin:40px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:.82rem;color:rgba(255,255,255,.5);}
.foot__bar span{color:var(--warm);}
/* Quieter than the motto beside it. These need to be present on every page and
   easy to find when looked for, not competing for attention. On a phone they
   drop to their own line rather than crowding the motto. */
.foot__bar .foot__legal{display:inline-block;margin-left:10px;color:rgba(255,255,255,.5);}
.foot__bar .foot__legal a{color:rgba(255,255,255,.62);text-decoration:none;text-underline-offset:3px;}
.foot__bar .foot__legal a:hover{color:#fff;text-decoration:underline;}
@media(max-width:560px){.foot__bar .foot__legal{display:block;margin:10px 0 0;}}

/* Responsive */
/* Five columns need an extra step down before the 2-up breakpoint. */
@media (max-width:1080px){
  .foot__grid{grid-template-columns:1.4fr 1fr 1fr;}
}
@media (max-width:860px){
  .cards{grid-template-columns:1fr 1fr;}
  .foot__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:820px){
  .four19__grid{grid-template-columns:1fr;}
  .pillar{border-right:0;border-bottom:1px solid var(--line);padding:28px 0;}
  .pillar:last-child{border-bottom:0;}
}
@media (max-width:760px){
  .visit__card{grid-template-columns:1fr;}
}
/* Nav collapses to the hamburger at 760px, not 900px. The labels are short now
   (Visit, Connect, NextGen, About, Watch, Merch, Give), so the seven-item row
   still clears the logo by 88px at 780px wide and only touches it at 660px.
   760px keeps iPad portrait (768px) on the full inline nav. */
@media (max-width:760px){
  .nav__links{
    position:fixed;top:60px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid var(--line);
    padding:10px 20px 20px;transform:translateY(-130%);transition:transform .25s ease;
  }
  .nav__links.open{transform:translateY(0);}
  .nav__links a{padding:14px 4px;border-bottom:1px solid var(--line);font-size:1rem;}
  .nav__links a.btn{margin-top:12px;justify-content:center;border-bottom:0;}
  /* Give is a plain link now, so the last item would otherwise trail a divider
     with nothing under it. */
  .nav__links a:last-child{border-bottom:0;}
  .nav__toggle{display:block;}
}
@media (max-width:720px){
  .hero__video{display:none;}
  /* Poster removed here too: see the reduced-motion block above. This was the
     rule that put 6MB on every phone load. */
  .hero__media{background:#000;}
  .strip{grid-template-columns:1fr;}
  .strip__item{border-right:0;border-bottom:1px solid var(--line);}
  .strip__item:last-child{border-bottom:0;}
}
@media (max-width:520px){
  .cards{grid-template-columns:1fr;}
  .foot__grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   0419 KIDS page (kids.html)
   Teal (--kids) is the department accent and is used ONLY on this page.
   ========================================================================== */
.kids-page,.ng-page{background:var(--paper);
  /* Soft lift on photos and cards. Corners stay square: the brand is squared. */
  --kx-shadow:0 6px 30px rgba(0,0,0,.20);}
/* Teal is an ACCENT here (rules, labels, the serve band), not a button colour:
   white on #6E9FB0 is only ~2.8:1 contrast. Buttons stay black/white. */
.kx-hero h1,.kx-promo h2,.kx-mission h2,.kx-ages h2,.kx-expect h2,.kx-faq h2,.kx-serve h2{
  text-transform:uppercase;font-weight:600;letter-spacing:.01em;line-height:1.1;
}

/* Hero — three photo panels behind a dark + teal wash */
.kx-hero{position:relative;overflow:hidden;background:#000;text-align:center;
  min-height:clamp(440px,62vh,640px);display:flex;align-items:center;justify-content:center;
  padding:clamp(60px,9vw,110px) clamp(16px,4vw,40px);}
.kx-hero__panels{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
/* Three separate kids photos, one per panel. These were all slices of the same
   worship-stage shot, which had nothing to do with this page. Panel A is the only
   one that survives the phone breakpoint below, so it carries the most weight. */
.kx-hero__panel{background-size:cover;background-position:center;}
.kx-hero__panel--a{background-image:url('assets/kids-hero-a.jpg');}
.kx-hero__panel--b{background-image:url('assets/kids-hero-b.jpg');}
.kx-hero__panel--c{background-image:url('assets/kids-hero-c.jpg');}
.kx-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.62)),
             linear-gradient(115deg,rgba(110,159,176,.5),rgba(110,159,176,.1));}
.kx-hero__inner{position:relative;z-index:2;max-width:760px;}
.kx-hero h1{color:#fff;font-size:clamp(2.6rem,8vw,5rem);text-shadow:0 2px 24px rgba(0,0,0,.45);}
.kx-hero p{color:#fff;font-size:clamp(1rem,2.2vw,1.2rem);margin:16px auto 0;max-width:46ch;
  text-shadow:0 1px 14px rgba(0,0,0,.5);}
.kx-hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px;}

/* Event promo strip */
.kx-promo{background:var(--ink);color:#fff;padding:clamp(28px,4vw,44px) clamp(16px,4vw,40px);}
.kx-promo__inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:22px;
  align-items:center;justify-content:space-between;}
.kx-promo__label{display:block;font-family:var(--display);font-weight:700;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--kids);margin-bottom:8px;}
.kx-promo h2{font-size:clamp(1.5rem,3.4vw,2.1rem);}
.kx-promo p{color:rgba(255,255,255,.72);margin:8px 0 0;max-width:52ch;}

/* Mission */
.kx-mission{background:var(--cream);padding:clamp(56px,8vw,96px) clamp(16px,4vw,40px);}
.kx-mission__inner{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center;}
.kx-mission h2{font-size:clamp(1.9rem,4.6vw,3rem);}
.kx-mission__copy>p{color:var(--muted);font-size:1.06rem;margin:20px 0 0;}
/* The 20px above assumed a heading sat on top of this copy. With the heading
   gone the paragraph leads the column, so drop the orphaned gap. */
.kx-mission__copy>p:first-child{margin-top:0;}
.kx-mission__photo{width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:var(--kx-shadow);}
.kx-times{margin:28px 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.kx-times strong{display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:1.05rem;}
.kx-times span{color:var(--muted);font-size:.95rem;}

/* Age environments */
.kx-ages{padding:clamp(56px,8vw,96px) clamp(16px,4vw,40px);max-width:var(--maxw);margin:0 auto;}
/* Section head — Zeal's scale: accent eyebrow, big headline, 18px body, all centered */
.kx-ages__head{max-width:720px;margin:0 auto clamp(34px,4.5vw,52px);text-align:center;}
.kx-ages__head .kicker{font-size:.84rem;letter-spacing:.14em;color:var(--kids);margin-bottom:16px;}
.kx-ages h2{font-size:clamp(2.1rem,5.2vw,3.4rem);}
.kx-ages__head p{color:var(--muted);margin:18px 0 0;font-size:1.12rem;line-height:1.5;}
.kx-ages__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,30px);}
.kx-age{background:var(--paper);overflow:hidden;border-radius:10px;box-shadow:var(--kx-shadow);}
/* PLACEHOLDER photos: crops of the VBS shot. Swap assets/kids-nursery|preschool|elementary.jpg
   for real room photos, same filenames, and nothing else needs to change. */
.kx-age__photo{width:100%;aspect-ratio:4/3;object-fit:cover;}
/* Age cards — centred, Zeal's scale: 36px uppercase heading, 14px range, 17px body */
.kx-age__body{padding:clamp(26px,3.2vw,38px);text-align:center;}
.kx-age__rule{display:block;width:46px;height:4px;background:var(--kids);margin:0 auto 22px;}
.kx-age h3{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.6rem,2.7vw,2.15rem);letter-spacing:.01em;line-height:1.1;}
.kx-age__range{display:block;font-family:var(--display);font-weight:700;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--kids);margin:12px 0 16px;}
.kx-age p{color:var(--muted);font-size:1.06rem;line-height:1.5;margin:0;}

/* Next steps — pre-registration, dedication, baptism.
   Type sits OVER the photo, content pinned to the bottom of a tall card.
   Second row of the "Find your child's place" group, so the row gap matches
   the grid gap and the columns line up with the age cards above. */
.kx-next__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,30px);
  margin-top:clamp(18px,2.5vw,30px);}
.kx-next__card{position:relative;overflow:hidden;border-radius:10px;box-shadow:var(--kx-shadow);color:#fff;
  min-height:clamp(430px,44vw,540px);display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(24px,3vw,32px);background:#1a1a1a;}
.kx-next__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
/* Scrim so white type stays readable over a bright photo */
.kx-next__card::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(0,0,0,.12) 0%,rgba(0,0,0,.42) 45%,rgba(0,0,0,.84) 100%);}
.kx-next__body{position:relative;z-index:2;display:flex;flex-direction:column;
  text-shadow:0 1px 14px rgba(0,0,0,.5);}
.kx-next__card h3{font-family:var(--display);font-weight:700;color:#fff;letter-spacing:0;
  font-size:clamp(1.35rem,2.3vw,1.8rem);}
.kx-next__label{display:block;font-family:var(--display);font-weight:700;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--kids);margin:8px 0 12px;}
.kx-next__card p{color:rgba(255,255,255,.88);font-size:.95rem;margin:0 0 22px;}
.kx-next__card .btn{align-self:flex-start;text-shadow:none;}

/* These read as tappable tiles, so the whole tile is the link. They used to be
   an <article> with only the small button clickable and no hover response at
   all, which is the gap between looking like a button and behaving like one.
   The button inside is a <span>, not a second anchor, so there is exactly one
   link per card and nothing nested.

   Same language as the photo cards on the homepage: the image pushes in, the
   scrim deepens to hold the type legible while it moves, and the button lifts. */
.kx-next__card{text-decoration:none;cursor:pointer;}
.kx-next__photo{transition:transform .4s ease;}
.kx-next__card::after{transition:background .3s ease;}
.kx-next__card .btn{transition:background .15s ease,color .15s ease,transform .25s ease;}

.kx-next__card:hover .kx-next__photo,
.kx-next__card:focus-visible .kx-next__photo{transform:scale(1.06);}
.kx-next__card:hover::after,
.kx-next__card:focus-visible::after{
  background:linear-gradient(rgba(0,0,0,.22) 0%,rgba(0,0,0,.52) 45%,rgba(0,0,0,.9) 100%);}
.kx-next__card:hover .btn,
.kx-next__card:focus-visible .btn{transform:translateY(-2px);}
/* Keyboard users get the same outline the rest of the site uses. */
.kx-next__card:focus-visible{outline:3px solid var(--a-teal);outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  .kx-next__photo,.kx-next__card .btn{transition:none;}
  .kx-next__card:hover .kx-next__photo,
  .kx-next__card:focus-visible .kx-next__photo,
  .kx-next__card:hover .btn,
  .kx-next__card:focus-visible .btn{transform:none;}
}

/* What to expect */
.kx-expect{background:var(--cream);padding:clamp(56px,8vw,96px) clamp(16px,4vw,40px);}
.kx-expect__inner{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:1.25fr 1fr;gap:clamp(30px,5vw,64px);align-items:start;}
.kx-expect h2{font-size:clamp(1.9rem,4.6vw,3rem);}
.kx-expect__copy p{color:var(--muted);margin:18px 0 0;}
.kx-expect__copy .btn{margin-top:28px;}
.kx-safety{list-style:none;padding:0;margin:0;display:grid;gap:18px;}
.kx-safety li{border-top:1px solid var(--line);padding-top:14px;color:var(--muted);font-size:.96rem;}
.kx-safety strong{display:block;font-family:var(--display);font-weight:700;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:6px;}

/* FAQs */
.kx-faq{padding:clamp(56px,8vw,96px) clamp(16px,4vw,40px);}
.kx-faq__inner{max-width:780px;margin:0 auto;}
.kx-faq h2{font-size:clamp(1.7rem,4vw,2.5rem);margin-bottom:12px;}
.kx-faq details{border-bottom:1px solid var(--line);padding:18px 0;}
.kx-faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;
  font-size:1.05rem;display:flex;justify-content:space-between;gap:18px;align-items:center;}
.kx-faq summary::-webkit-details-marker{display:none;}
.kx-faq summary::after{content:"+";color:var(--kids);font-size:1.5rem;line-height:1;flex:none;}
.kx-faq details[open] summary::after{content:"\2013";}
.kx-faq details p{color:var(--muted);margin:14px 0 0;font-size:.98rem;}

/* Serve — the teal moment. Black on teal reads at ~7.6:1, white would be ~2.8:1. */
.kx-serve{background:var(--kids);color:var(--ink);padding:clamp(56px,8vw,96px) clamp(16px,4vw,40px);text-align:center;}
.kx-serve__inner{max-width:680px;margin:0 auto;}
.kx-serve h2{color:var(--ink);font-size:clamp(1.8rem,4.2vw,2.7rem);}
.kx-serve p{color:rgba(0,0,0,.78);margin:18px 0 28px;}
.kx-serve .kicker--light{color:rgba(0,0,0,.6);}
.kx-serve .btn--invert{background:var(--ink);color:#fff;}
.kx-serve .btn--invert:hover{background:#262626;}

@media (max-width:860px){
  .kx-ages__grid{grid-template-columns:1fr;}
  .kx-next__grid{grid-template-columns:1fr;}
  .kx-expect__inner{grid-template-columns:1fr;}
  .kx-mission__inner{grid-template-columns:1fr;}
  .kx-mission__photo{order:-1;}
}
@media (max-width:560px){
  .kx-hero__panels{grid-template-columns:1fr;}
  .kx-hero__panel--b,.kx-hero__panel--c{display:none;}
  .kx-promo__inner{flex-direction:column;align-items:flex-start;}
}

/* ==========================================================================
   NEXT GENERATION page (nextgen.html)
   Mirrors Zeal's next-gen layout: banner, then tall photo panels with white
   type anchored toward the top of each card.
   ========================================================================== */
.ng-hero{position:relative;overflow:hidden;background:#000;text-align:center;
  min-height:clamp(380px,50vh,560px);display:flex;align-items:center;justify-content:center;
  padding:clamp(70px,10vw,120px) clamp(16px,4vw,40px);}
.ng-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.ng-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.66));}
.ng-hero__inner{position:relative;z-index:2;max-width:760px;}
.ng-hero h1{color:#fff;text-transform:uppercase;font-weight:600;letter-spacing:.01em;
  line-height:1.05;font-size:clamp(2.4rem,7vw,4.4rem);text-shadow:0 2px 24px rgba(0,0,0,.45);}
.ng-hero p{color:#fff;margin:16px auto 0;max-width:46ch;font-size:clamp(1rem,2.1vw,1.15rem);
  text-shadow:0 1px 14px rgba(0,0,0,.5);}

.ng{padding:clamp(56px,8vw,96px) clamp(16px,4vw,40px);max-width:var(--maxw);margin:0 auto;}
.ng__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,30px);}
/* Connect page: 9 cards, and no age-range line, so they can sit a little shorter */
.ng__grid--3x3 .ng-card{min-height:clamp(430px,46vw,545px);}
/* Zeal's card: photo behind, content pinned toward the top, generous top padding */
/* Rounded here (10px, matching Zeal) even though the brand is otherwise squared.
   overflow:hidden clips the photo and scrim to the radius. */
.ng-card{position:relative;overflow:hidden;border-radius:10px;box-shadow:var(--kx-shadow);
  color:#fff;background:#1a1a1a;
  min-height:clamp(510px,56vw,640px);display:flex;flex-direction:column;justify-content:flex-start;
  /* deeper bottom padding lifts the pinned button off the card floor */
  padding:clamp(80px,11vw,140px) clamp(26px,3vw,36px) clamp(52px,6.5vw,84px);}
.ng-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
/* Darkest through the text band (roughly 25-70% down), lighter at the foot
   so the lower half of the photo still reads */
.ng-card::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(0,0,0,.42) 0%,rgba(0,0,0,.6) 32%,
                             rgba(0,0,0,.55) 68%,rgba(0,0,0,.3) 100%);}
/* flex:1 lets the body fill the card so the button can be pushed to the floor */
.ng-card__body{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;
  align-items:flex-start;text-shadow:0 1px 14px rgba(0,0,0,.55);}
/* Zeal's card scale: 46px title, 13px range, 18px body */
.ng-card h2{color:#fff;text-transform:uppercase;font-weight:700;letter-spacing:.01em;
  line-height:1.05;font-size:clamp(1.95rem,3.5vw,2.9rem);}
.ng-card__range{display:block;font-family:var(--display);font-weight:700;font-size:.82rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);margin:14px 0 18px;}
.ng-card p{color:rgba(255,255,255,.9);font-size:1.12rem;line-height:1.55;margin:0 0 24px;}
/* Slightly larger than the shared .btn--sm (.7rem), closer to Zeal's 14px.
   margin-top:auto pins every button to the card floor so they line up across a row. */
.ng-card .btn{text-shadow:none;font-size:.81rem;padding:13px 24px;margin-top:auto;}

@media (max-width:860px){
  .ng__grid{grid-template-columns:1fr;}
  .ng-card{min-height:400px;padding:clamp(60px,10vw,90px) clamp(24px,5vw,34px) clamp(30px,5vw,40px);}
}

/* ==========================================================================
   ABOUT US page (about.html)
   ========================================================================== */
/* About cards sit 2-up (Zeal's about layout) rather than 3-up.
   --tight matches the trimmed spacing of the other About sections;
   Connect and Next Gen keep the roomier default. */
.ng--tight{padding-top:clamp(38px,5.2vw,66px);padding-bottom:clamp(38px,5.2vw,66px);}
.ng__grid--2up{grid-template-columns:repeat(2,1fr);}
.ng__grid--2up .ng-card{min-height:clamp(480px,44vw,600px);}

/* Mission: copy left, three photos stacked down the right */
.ab-mission{background:var(--cream);padding:clamp(38px,5.2vw,66px) clamp(16px,4vw,40px);}
/* Text column is deliberately narrow so the photo collage gets the room,
   the way Harris Creek weights it */
.ab-mission__inner{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:.82fr 1.18fr;gap:clamp(30px,4vw,56px);align-items:center;}
.ab-mission h2{font-size:clamp(2.1rem,5.2vw,3.4rem);text-transform:uppercase;
  font-weight:600;letter-spacing:.01em;line-height:1.1;}
.ab-mission__copy p{color:var(--muted);font-size:1.08rem;line-height:1.65;margin:20px 0 0;}
.ab-mission__copy .ab-mission__lead{color:var(--ink);font-size:clamp(1.2rem,2.1vw,1.45rem);
  font-weight:500;line-height:1.45;}
.ab-mission__copy .btn{margin-top:32px;}
/* Two-photo overlap, proportioned from Harris Creek's own layout:
   a tall shot on the right at 65% width / full height, and a WIDER landscape
   (72%) laid across its middle starting at the left edge of the zone. */
.ab-mission__photos{position:relative;aspect-ratio:11/10;}
.ab-mission__photos img{position:absolute;object-fit:cover;display:block;
  border-radius:10px;box-shadow:var(--kx-shadow);}
.ab-mission__photos img:nth-child(1){right:0;top:0;width:65%;height:100%;z-index:1;}
.ab-mission__photos img:nth-child(2){left:0;top:42%;width:72%;height:53%;z-index:2;}

/* Have questions */
.ab-questions{background:var(--ink);color:#fff;text-align:center;
  padding:clamp(38px,5.2vw,66px) clamp(16px,4vw,40px);}
.ab-questions__inner{max-width:620px;margin:0 auto;}
.ab-questions h2{color:#fff;text-transform:uppercase;font-weight:600;letter-spacing:.01em;
  line-height:1.1;font-size:clamp(1.9rem,4.4vw,2.9rem);}
.ab-questions p{color:rgba(255,255,255,.78);margin:18px 0 30px;font-size:1.08rem;}
.ab-questions__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}

/* Core values — numbered grid. Names only; no descriptions written yet. */
.ab-values{padding:clamp(38px,5.2vw,66px) clamp(16px,4vw,40px);max-width:var(--maxw);margin:0 auto;}
.ab-values__head{max-width:720px;margin:0 auto clamp(34px,4.5vw,52px);text-align:center;}
.ab-values h2{font-size:clamp(2rem,4.8vw,3.1rem);text-transform:uppercase;
  font-weight:600;letter-spacing:.01em;line-height:1.1;}
.ab-values__grid{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,30px);}

/* Flip card: front shows the number + name, back shows the explanation.
   :focus-within keeps it reachable by keyboard. */
.ab-value{perspective:1200px;outline:none;}
.ab-value__inner{position:relative;min-height:250px;height:100%;
  transition:transform .55s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d;}
.ab-value:hover .ab-value__inner,
.ab-value:focus-within .ab-value__inner,
.ab-value:focus .ab-value__inner{transform:rotateY(180deg);}
.ab-value__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:10px;box-shadow:var(--kx-shadow);padding:clamp(24px,3vw,32px);
  display:flex;flex-direction:column;justify-content:center;gap:14px;}
.ab-value__front{background:var(--lightest);}
/* Subtle "there's more here" cue, replaces the old hover hint line */
.ab-value__front::after{content:"+";position:absolute;
  right:clamp(18px,2.2vw,26px);bottom:clamp(16px,2vw,22px);
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--kids);color:var(--kids);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:600;font-size:1rem;line-height:1;
  opacity:.65;transition:opacity .25s ease,background .25s ease,color .25s ease;}
.ab-value:hover .ab-value__front::after{opacity:1;background:var(--kids);color:#fff;}
.ab-value__back{background:var(--ink);color:#fff;transform:rotateY(180deg);gap:10px;}
.ab-value__num{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.16em;
  color:var(--kids);}
.ab-value__front h3{font-family:var(--display);font-weight:700;
  font-size:clamp(1.15rem,1.9vw,1.4rem);letter-spacing:0;line-height:1.2;margin:0;}
.ab-value__back h4{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--kids);margin:0;}
.ab-value__back p{color:rgba(255,255,255,.9);font-size:.98rem;line-height:1.5;margin:0;}

/* Touch devices have no hover, so drop the flip and show both faces stacked */
@media (hover:none){
  /* description is already visible on touch, so the cue would be misleading */
  .ab-value__front::after{display:none;}
  .ab-value{perspective:none;background:var(--lightest);border-radius:10px;
    box-shadow:var(--kx-shadow);padding:clamp(24px,4vw,32px);}
  .ab-value__inner{transform:none !important;min-height:0;transform-style:flat;}
  .ab-value__face{position:relative;inset:auto;backface-visibility:visible;
    -webkit-backface-visibility:hidden;box-shadow:none;border-radius:0;padding:0;transform:none;}
  .ab-value__back{background:transparent;color:inherit;margin-top:12px;}
  .ab-value__back h4{display:none;}
  .ab-value__back p{color:var(--muted);}
}

@media (max-width:860px){
  .ab-mission__inner{grid-template-columns:1fr;}
  .ab-mission__photos{margin-top:16px;}
  .ng__grid--2up{grid-template-columns:1fr;}
  .ab-values__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .ab-values__grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   GIVE page (give.html)
   ========================================================================== */
.gv-hero .ng-hero__inner{max-width:900px;}
.gv-hero__sub{max-width:34ch;font-size:clamp(1.05rem,2.2vw,1.3rem);line-height:1.45;}
.gv-hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px;}

/* Short viewports: the hero's 380px floor plus 70px of padding top and bottom can
   push a hero CTA below the fold once the browser's URL bar takes its share. On a
   short screen the hero collapses to its content so the button stays visible.
   Applies to every ng-hero, but Give Now on this page is the one that must not
   drop. Also covers phones held in landscape. */
@media (max-height:640px){
  .ng-hero{min-height:0;padding-top:clamp(38px,7vw,64px);padding-bottom:clamp(38px,7vw,64px);}
  .ng-hero h1{font-size:clamp(2rem,6.4vw,3.4rem);}
  .gv-hero__cta{margin-top:22px;}
  .gv-hero__sub{margin-top:12px;}
}
/* Phone held in landscape leaves roughly 265px of usable height. Tighten hard so
   the CTA still lands above the fold rather than hiding under the crease. */
@media (max-height:460px){
  .ng-hero{padding-top:20px;padding-bottom:22px;}
  .ng-hero h1{font-size:clamp(1.5rem,4.6vw,2.1rem);}
  .ng-hero p{margin-top:8px;font-size:.95rem;}
  .gv-hero__cta{margin-top:14px;}
}

/* Statement band — tightened: less vertical air, smaller than a pull-quote */
.gv-statement{background:var(--cream);padding:clamp(32px,4.2vw,52px) clamp(16px,4vw,40px);}
.gv-statement__inner{max-width:880px;margin:0 auto;text-align:center;}
.gv-statement p{margin:0;font-family:var(--display);font-weight:500;line-height:1.45;
  font-size:clamp(1.02rem,1.8vw,1.3rem);color:var(--ink);}

/* Alternating image / text rows.
   Copy is short, so wide-ish images (16:10) keep each row from towering
   over its text and leaving dead space beside it. */
.gv-rows{max-width:var(--maxw);margin:0 auto;
  padding:clamp(40px,5.2vw,64px) clamp(16px,4vw,40px);
  display:grid;gap:clamp(34px,4.4vw,56px);}
.gv-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,52px);align-items:center;}
.gv-row--flip .gv-row__img{order:2;}
.gv-row__img{width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:10px;box-shadow:var(--kx-shadow);}
.gv-row h2{text-transform:uppercase;font-weight:600;letter-spacing:.01em;line-height:1.1;
  font-size:clamp(1.7rem,3.5vw,2.4rem);}
.gv-row__copy p{color:var(--muted);font-size:1.05rem;line-height:1.55;margin:14px 0 26px;}
/* inline prose link, darker than the body text so it reads as clickable */
.gv-row__copy p a{color:var(--ink);text-underline-offset:3px;transition:opacity .2s ease;}
.gv-row__copy p a:hover{opacity:.6;}

@media (max-width:860px){
  .gv-row{grid-template-columns:1fr;}
  .gv-row--flip .gv-row__img{order:0;}
}

/* ==========================================================================
   PLAN A VISIT page (visit.html)
   Reuses the give page's alternating rows, plus a facts list and FAQ.
   ========================================================================== */
.vs-rows{padding-top:clamp(40px,5.2vw,64px);padding-bottom:clamp(40px,5.2vw,64px);}
.vs-facts{list-style:none;padding:0;margin:20px 0 28px;display:grid;gap:16px;}
.vs-facts li{border-top:1px solid var(--line);padding-top:14px;font-size:1.05rem;line-height:1.5;}
.vs-facts strong{display:block;font-family:var(--display);font-weight:700;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
/* address doubles as the directions link now that the button is gone */
.vs-facts a{color:inherit;text-underline-offset:3px;transition:opacity .2s ease;}
.vs-facts a:hover{opacity:.6;}
.vs-lede{color:var(--muted);font-size:1.02rem;line-height:1.55;margin:0 0 24px;}
.vs-cta{display:flex;flex-wrap:wrap;gap:14px;}

/* Weekend FAQ */
/* Plan your visit form. Reuses .cr-form and .cr-field from the care page, so
   every form on the site looks and behaves the same; only the surround is new. */
.vs-plan{background:var(--paper);padding:clamp(46px,6vw,78px) clamp(16px,4vw,40px);
  border-top:7px solid var(--a-teal);}
.vs-plan__inner{max-width:660px;margin:0 auto;}
.vs-plan h2{text-transform:uppercase;font-weight:600;letter-spacing:.01em;line-height:1.15;
  font-size:clamp(1.5rem,3vw,2.1rem);margin:10px 0 12px;}
.vs-plan__lede{color:var(--muted);font-size:1.02rem;line-height:1.55;margin:0 0 28px;}
/* Pairs that belong together sit side by side, and stack before they get
   cramped. 380px is where two of these fields stop being comfortably tappable. */
.vs-form__row{display:grid;gap:18px;grid-template-columns:1fr 1fr;}
@media(max-width:560px){.vs-form__row{grid-template-columns:1fr;}}

.vs-faq{background:var(--cream);padding:clamp(46px,6vw,78px) clamp(16px,4vw,40px);}
.vs-faq__inner{max-width:860px;margin:0 auto;}
.vs-faq h2{text-transform:uppercase;font-weight:600;letter-spacing:.01em;line-height:1.1;
  font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:14px;}
.vs-faq details{border-bottom:1px solid var(--line);padding:18px 0;}
.vs-faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;
  font-size:1.05rem;display:flex;justify-content:space-between;gap:18px;align-items:center;}
.vs-faq summary::-webkit-details-marker{display:none;}
.vs-faq summary::after{content:"+";color:var(--kids);font-size:1.5rem;line-height:1;flex:none;}
.vs-faq details[open] summary::after{content:"\2013";}
.vs-faq details p{color:var(--muted);margin:14px 0 0;font-size:1rem;line-height:1.6;}

/* The times/location photo is decorative; drop it on phones so the facts
   and the Plan Your Visit button sit right at the top. */
@media (max-width:860px){
  .vs-row--times .gv-row__img{display:none;}
  .vs-row--times{gap:0;}
}

/* ==========================================================================
   NEXT STEPS directory (nextsteps.html)
   Seven numbered categories, each with three resource cards.
   Backgrounds alternate so the long list still reads in chunks.
   ========================================================================== */
.ns-intro__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px;}

.ns-cat{padding:clamp(40px,5.4vw,68px) clamp(16px,4vw,40px);background:var(--paper);}
.ns-cat:nth-of-type(even){background:var(--cream);}
.ns-cat__inner{max-width:var(--maxw);margin:0 auto;}
.ns-cat__head{max-width:760px;margin-bottom:clamp(26px,3.4vw,40px);}
/* "I'm Interested" sits under the area description, above its role cards. */
.ns-cat__head .btn{margin-top:20px;}
.ns-cat__num{display:block;font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.18em;color:var(--kids);margin-bottom:12px;}
.ns-cat h2{text-transform:uppercase;font-weight:600;letter-spacing:.01em;line-height:1.1;
  font-size:clamp(1.7rem,3.6vw,2.5rem);}
.ns-cat__desc{color:var(--ink);font-size:clamp(1.02rem,1.9vw,1.18rem);line-height:1.5;
  margin:14px 0 0;font-weight:500;}
/* the "impact" line, set apart with the teal rule used elsewhere on the site */
.ns-cat__impact{color:var(--muted);font-size:1rem;line-height:1.6;margin:16px 0 0;
  padding-left:16px;border-left:3px solid var(--kids);}

.ns-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px);}
.ns-card{background:var(--paper);border-radius:10px;box-shadow:var(--kx-shadow);
  padding:clamp(24px,2.8vw,32px);display:flex;flex-direction:column;}
.ns-cat:nth-of-type(even) .ns-card{background:var(--lightest);}
.ns-card h3{font-family:var(--display);font-weight:700;letter-spacing:0;line-height:1.25;
  font-size:clamp(1.08rem,1.7vw,1.25rem);margin:0;}
.ns-card p{color:var(--muted);font-size:.98rem;line-height:1.55;margin:12px 0 22px;}
.ns-card .btn{margin-top:auto;align-self:flex-start;}
/* role cards carry no CTA, so drop the space reserved for one */
.ns-card--role p{margin-bottom:0;}
/* not-yet-available resources: a label, not a button that goes nowhere */
.ns-soon{margin-top:auto;align-self:flex-start;font-family:var(--display);font-weight:700;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
  border:1px dashed var(--line);border-radius:999px;padding:9px 16px;}

@media (max-width:900px){
  .ns-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  .ns-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   NEXT STEP ASSESSMENT (assessment.html)
   ========================================================================== */
.as-hero .ng-hero__inner{max-width:820px;}
.as-wrap{background:var(--cream);padding:clamp(40px,5.4vw,68px) clamp(16px,4vw,40px);}
.as-panel{max-width:760px;margin:0 auto;background:var(--paper);border-radius:10px;
  box-shadow:var(--kx-shadow);padding:clamp(28px,4vw,52px);}
.as-panel--wide{max-width:var(--maxw);}
.as-panel h2{text-transform:uppercase;font-weight:600;letter-spacing:.01em;line-height:1.15;
  font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 16px;}
.as-panel > p{color:var(--muted);font-size:1.05rem;line-height:1.6;margin:0 0 24px;}
.as-list{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:12px;}
.as-list li{color:var(--muted);font-size:1rem;padding-left:26px;position:relative;}
.as-list li::before{content:"";position:absolute;left:0;top:.55em;
  width:10px;height:10px;border-radius:50%;background:var(--kids);}

/* progress */
.as-progress{margin-bottom:26px;}
.as-step{display:block;font-family:var(--display);font-weight:700;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.as-bar{height:4px;background:var(--line);border-radius:999px;overflow:hidden;}
.as-bar span{display:block;height:100%;width:0;background:var(--kids);
  transition:width .35s cubic-bezier(.4,.2,.2,1);}

/* options */
.as-options{display:grid;gap:12px;margin-bottom:30px;}
.as-option{text-align:left;cursor:pointer;font-family:var(--body);font-size:1.02rem;
  line-height:1.4;color:var(--ink);background:var(--lightest);
  border:1px solid var(--line);border-radius:10px;padding:16px 20px;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;}
.as-option:hover{border-color:var(--kids);background:#fff;}
.as-option.is-selected{border-color:var(--kids);background:#fff;
  box-shadow:inset 0 0 0 1px var(--kids);}

.as-nav{display:flex;gap:12px;justify-content:space-between;}
.as-nav--end{justify-content:flex-end;flex-wrap:wrap;margin-top:34px;}
.as-nav .btn:disabled{opacity:.35;pointer-events:none;}

/* results */
.as-result{margin-top:clamp(28px,3.4vw,42px);padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--line);}
.as-result:first-child{border-top:0;padding-top:0;}
.as-result h3{text-transform:uppercase;font-weight:600;letter-spacing:.01em;line-height:1.1;
  font-size:clamp(1.5rem,3vw,2.1rem);margin:0;}
.as-result .ns-card{background:var(--lightest);}
.as-result .ns-card h4{font-family:var(--display);font-weight:700;letter-spacing:0;
  line-height:1.25;font-size:1.05rem;margin:0;}
.as-result .ns-grid{margin-top:22px;}

/* ==========================================================================
   FAITH FOUNDATIONS (foundations.html + foundations-1..7.html)
   ========================================================================== */
/* index cards */
.fd-index{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,5.4vw,68px) clamp(16px,4vw,40px);}
.fd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px);}
.fd-card{display:flex;flex-direction:column;text-decoration:none;background:var(--paper);
  border-radius:10px;box-shadow:var(--kx-shadow);padding:clamp(24px,2.8vw,32px);
  transition:transform .2s ease,box-shadow .2s ease;}
.fd-card:hover{transform:translateY(-3px);box-shadow:0 12px 38px rgba(0,0,0,.24);}
.fd-card__num{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--kids);margin-bottom:12px;}
.fd-card h2,.fd-card h3{font-family:var(--display);font-weight:700;letter-spacing:0;line-height:1.2;
  font-size:clamp(1.15rem,1.9vw,1.4rem);margin:0;}
.fd-card__sub{font-family:var(--display);font-weight:500;color:var(--ink);
  font-size:.98rem;margin:6px 0 0;}
.fd-card__idea{color:var(--muted);font-size:.95rem;line-height:1.55;margin:14px 0 22px;}
.fd-card__go{margin-top:auto;font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}

/* session header */
.fd-hero{background:var(--cream);padding:clamp(46px,6vw,80px) clamp(16px,4vw,40px) clamp(34px,4vw,52px);}
.fd-hero__inner{max-width:820px;margin:0 auto;text-align:center;}
.fd-hero__num{display:block;font-family:var(--display);font-weight:700;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--kids);margin-bottom:14px;}
.fd-hero h1{text-transform:uppercase;font-weight:600;letter-spacing:.01em;line-height:1.08;
  font-size:clamp(2rem,5vw,3.2rem);}
.fd-hero p{color:var(--muted);font-size:clamp(1.02rem,2vw,1.2rem);margin:14px 0 0;}
.fd-progress{height:4px;background:var(--line);border-radius:999px;overflow:hidden;
  max-width:420px;margin:26px auto 0;}
.fd-progress span{display:block;height:100%;background:var(--kids);}

/* big idea + challenge, the two dark bands */
.fd-idea,.fd-challenge{background:var(--ink);color:#fff;
  padding:clamp(38px,5vw,62px) clamp(16px,4vw,40px);}
.fd-idea__inner,.fd-challenge__inner{max-width:820px;margin:0 auto;}
.fd-idea .ns-cat__num,.fd-challenge .ns-cat__num{color:var(--kids);}
.fd-idea p{margin:0;font-family:var(--display);font-weight:500;line-height:1.4;
  font-size:clamp(1.25rem,2.6vw,1.85rem);}
.fd-challenge h2{color:#fff;text-transform:uppercase;font-weight:600;letter-spacing:.01em;
  line-height:1.15;font-size:clamp(1.4rem,2.8vw,1.9rem);margin:0 0 14px;}
.fd-challenge p{color:rgba(255,255,255,.85);font-size:1.05rem;line-height:1.6;margin:0;}
.fd-challenge__list{margin:16px 0 0;padding-left:20px;color:rgba(255,255,255,.85);
  display:grid;gap:10px;font-size:1.02rem;line-height:1.55;}

/* body sections */
.fd-body{max-width:820px;margin:0 auto;padding:clamp(40px,5.4vw,68px) clamp(16px,4vw,40px);}
.fd-block + .fd-block{margin-top:clamp(38px,4.6vw,58px);}
.fd-block h2{text-transform:uppercase;font-weight:600;letter-spacing:.01em;line-height:1.15;
  font-size:clamp(1.4rem,2.8vw,1.95rem);margin:0 0 18px;}
.fd-lede{color:var(--muted);font-size:1.05rem;margin:0 0 18px;}
.fd-passages{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.fd-passages li{font-family:var(--display);font-weight:600;font-size:1.05rem;
  padding-left:22px;position:relative;}
.fd-passages li::before{content:"";position:absolute;left:0;top:.55em;
  width:8px;height:8px;border-radius:50%;background:var(--kids);}
.fd-reads{display:grid;gap:16px;}
.fd-read{background:var(--lightest);border-left:3px solid var(--kids);
  border-radius:0 10px 10px 0;padding:clamp(20px,2.4vw,26px);}
.fd-read h3{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:0;margin:0;}
.fd-read p{color:var(--muted);font-size:1rem;line-height:1.55;margin:10px 0 0;}
.fd-read__mark{font-size:.92rem !important;color:var(--muted-2) !important;}
.fd-questions{margin:0;padding-left:22px;display:grid;gap:14px;
  color:var(--ink);font-size:1.05rem;line-height:1.5;}
.fd-questions li::marker{color:var(--kids);font-family:var(--display);font-weight:700;}
.fd-applies{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.fd-apply{background:var(--lightest);border-radius:10px;box-shadow:var(--kx-shadow);
  padding:clamp(20px,2.4vw,28px);}
.fd-apply h3{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:0;margin:0;}
.fd-apply p{color:var(--muted);font-size:.98rem;line-height:1.55;margin:10px 0 0;}

/* prev / next */
.fd-nav{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px) clamp(46px,6vw,80px);}
.fd-nav__inner{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:28px;}
.fd-move{text-decoration:none;display:flex;flex-direction:column;gap:5px;
  font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink);
  transition:opacity .2s ease;}
.fd-move:hover{opacity:.6;}
.fd-move span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.fd-move--next{text-align:right;align-items:flex-end;}

@media (max-width:900px){ .fd-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){
  .fd-grid{grid-template-columns:1fr;}
  .fd-applies{grid-template-columns:1fr;}
}

/* ==========================================================================
   PRAYER & CARE (care.html)
   ========================================================================== */
.cr-intro{max-width:var(--maxw);margin:0 auto;padding:clamp(36px,4.6vw,58px) clamp(16px,4vw,40px) 0;}
.cr-intro__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px);}

.cr-wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(36px,4.6vw,58px) clamp(16px,4vw,40px) clamp(46px,6vw,76px);}
.cr-panel{max-width:760px;margin:0 auto;background:var(--paper);border-radius:10px;
  box-shadow:var(--kx-shadow);overflow:hidden;}

.cr-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);}
.cr-tab{cursor:pointer;background:var(--lightest);border:0;padding:18px 14px;
  font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;}
.cr-tab:hover{color:var(--ink);}
.cr-tab.is-active{background:var(--paper);color:var(--ink);
  box-shadow:inset 0 -3px 0 var(--kids);}

.cr-pane{padding:clamp(26px,3.4vw,42px);}
.cr-pane h2{text-transform:uppercase;font-weight:600;letter-spacing:.01em;line-height:1.15;
  font-size:clamp(1.35rem,2.6vw,1.85rem);margin:0 0 12px;}
.cr-lede{color:var(--muted);font-size:1.02rem;line-height:1.55;margin:0 0 26px;}

.cr-form{display:grid;gap:18px;}
.cr-field{display:grid;gap:7px;}
.cr-field > span{font-family:var(--display);font-weight:700;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.cr-field em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--muted-2);}
.cr-field input,.cr-field textarea,.cr-field select{font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--lightest);border:1px solid var(--line);border-radius:8px;
  padding:13px 15px;width:100%;transition:border-color .18s ease,background .18s ease;}
.cr-field input:focus,.cr-field textarea:focus,.cr-field select:focus{outline:none;border-color:var(--kids);background:#fff;}
.cr-field textarea{resize:vertical;line-height:1.55;}
/* Native select needs the appearance reset or Safari ignores the padding and
   corner radius above. The caret is drawn back on as a background image. */
.cr-field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6b6b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;}

.cr-choice{border:0;padding:0;margin:0;display:grid;gap:10px;}
.cr-choice legend{font-family:var(--display);font-weight:700;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;padding:0;}
.cr-choice label,.cr-check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  font-size:1rem;line-height:1.45;color:var(--ink);}
.cr-choice input,.cr-check input{margin-top:3px;accent-color:var(--kids);flex:none;}
.cr-check{margin-top:2px;}

.cr-form .btn{justify-self:start;margin-top:6px;}
.cr-status{margin:0;font-size:.98rem;line-height:1.5;padding:14px 16px;border-radius:8px;
  background:var(--lightest);border-left:3px solid var(--kids);color:var(--ink);}
.cr-status.is-error{border-left-color:var(--for);}
.cr-hp{position:absolute;left:-9999px;}

/* Open House ---------------------------------------------------------------
   Sits inside .ns-cat sections, so var(--accent) is whatever colour that
   section drew from the rotation. Nothing here sets its own palette. */
.oh-lead{font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 16px;}
.oh-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:56ch;}
.oh-list li{position:relative;padding-left:28px;font-size:1.05rem;line-height:1.5;color:var(--ink);}
.oh-list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;
  border-radius:50%;background:var(--accent,#1F7489);}
.oh-after{max-width:60ch;margin:26px 0 0;font-size:1.05rem;line-height:1.6;color:var(--ink);}
.oh-note{max-width:60ch;margin:26px 0 0;font-size:.95rem;line-height:1.55;color:var(--muted-2);
  padding-left:15px;border-left:3px solid var(--accent,#1F7489);}
.oh-cta{margin-top:6px;}
.oh-form-wrap{max-width:560px;}
.oh-form-title{font-size:1.15rem;margin:0 0 20px;}

/* Partnership form ---------------------------------------------------------
   A long form, so each numbered block is separated by a rule rather than a
   card. Cards would imply the sections are independent; they are one document. */
.pf-page{padding:clamp(34px,5vw,60px) clamp(16px,4vw,40px);}
.pf-wrap{max-width:640px;margin:0 auto;}
.pf-intro{margin:0 0 34px;font-size:1.05rem;line-height:1.6;color:var(--muted);}
.pf-sec{display:grid;gap:18px;}
.pf-sec + .pf-sec{margin-top:16px;padding-top:34px;border-top:1px solid var(--line);}
.pf-sec__title{display:flex;align-items:center;gap:12px;margin:0;
  font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--ink);}
.pf-sec__num{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex:none;border-radius:50%;
  background:var(--a-teal);color:#fff;font-size:.82rem;}
.pf-statement{margin:0;font-size:1.04rem;line-height:1.6;color:var(--ink);}
.pf-aside{margin:0;font-size:.95rem;color:var(--muted-2);}
/* Section 4 is the church's half of the agreement, so it reads as a quote
   rather than another list of boxes to tick. */
.pf-ours{margin:0;padding:20px 22px;background:var(--lightest);
  border-left:4px solid var(--a-gold);font-size:1.02rem;line-height:1.62;color:var(--ink);}
.pf-checks{display:grid;gap:14px;}
.pf-sign-date{max-width:260px;}
.pf-sign-date input{background:var(--cream);color:var(--muted);cursor:default;}
.pf-link{color:var(--a-teal-t);font-weight:600;}
.pf-form .btn{margin-top:22px;}

.cr-urgent{max-width:760px;margin:22px auto 0;text-align:center;
  color:var(--muted);font-size:.98rem;line-height:1.55;}
.cr-urgent a{color:var(--ink);text-underline-offset:3px;}

@media (max-width:760px){
  .cr-intro__grid{grid-template-columns:1fr;}
  .cr-tab{font-size:.7rem;letter-spacing:.1em;padding:16px 8px;}
}

/* ==========================================================================
   ASSESSMENTS (assessments.html, divine-design.html, ministry-match.html)
   Reuses the .as-* quiz shell; these are the result styles.
   ========================================================================== */
.fd-grid--2{grid-template-columns:repeat(2,1fr);}

.asmt-headline{margin-bottom:clamp(26px,3.2vw,38px);}
.asmt-headline h3{text-transform:uppercase;font-weight:600;letter-spacing:.01em;line-height:1.1;
  font-size:clamp(1.7rem,3.6vw,2.6rem);margin:0;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap;}
.asmt-headline h3 em{font-style:normal;font-weight:500;color:var(--muted);
  font-size:clamp(1rem,1.9vw,1.3rem);text-transform:none;letter-spacing:0;}
.asmt-dot{width:22px;height:22px;border-radius:50%;flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.12) inset;}
.asmt-desc{color:var(--muted);font-size:1.06rem;line-height:1.6;margin:16px 0 0;}

.asmt-split{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  margin-top:clamp(22px,2.8vw,32px);}
.asmt-card{background:var(--lightest);border-radius:10px;padding:clamp(20px,2.4vw,26px);}
.asmt-card h4,.asmt-list h4,.asmt-block h4{font-family:var(--display);font-weight:700;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;}
.asmt-card p{color:var(--ink);font-size:1rem;line-height:1.55;margin:0;}

.asmt-block{margin-top:clamp(26px,3.2vw,38px);padding-top:clamp(22px,2.8vw,30px);
  border-top:1px solid var(--line);}
.asmt-block--dark{background:var(--ink);color:#fff;border-top:0;border-radius:10px;
  padding:clamp(24px,3vw,34px);}
.asmt-block--dark .ns-cat__num{color:var(--kids);}
.asmt-block--dark p{color:rgba(255,255,255,.86);font-size:1.02rem;line-height:1.6;margin:12px 0 0;}
.asmt-scripture{font-family:var(--display);font-weight:500;color:#fff !important;
  font-size:1.08rem !important;padding-left:16px;border-left:3px solid var(--kids);}
.asmt-block > p{color:var(--muted);font-size:1.02rem;line-height:1.6;margin:0;}

.asmt-dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0;}
.asmt-dl dt{font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--kids);padding-top:3px;}
.asmt-dl dd{margin:0;color:var(--ink);font-size:1rem;line-height:1.5;}

.asmt-bar{margin-top:12px;}
.asmt-bar__label{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--display);font-weight:600;font-size:.92rem;margin-bottom:6px;}
.asmt-bar__label em{font-style:normal;font-weight:700;color:var(--muted);font-size:.82rem;}
.asmt-bar__track{display:block;height:8px;border-radius:999px;background:var(--line);overflow:hidden;}
.asmt-bar__track > span{display:block;height:100%;border-radius:999px;}

.asmt-note{color:var(--muted-2);font-size:.95rem;line-height:1.5;margin:0 0 26px;}
.asmt-team{border-top:1px solid var(--line);padding-top:clamp(22px,2.8vw,32px);
  margin-top:clamp(22px,2.8vw,32px);}
.asmt-team:first-of-type{border-top:0;padding-top:0;margin-top:0;}
.asmt-team h3{text-transform:uppercase;font-weight:600;letter-spacing:.01em;line-height:1.1;
  font-size:clamp(1.35rem,2.6vw,1.9rem);margin:0 0 4px;}
.asmt-team .asmt-bar{max-width:340px;}
.asmt-list ul{margin:0;padding-left:20px;display:grid;gap:7px;
  color:var(--muted);font-size:.97rem;line-height:1.5;}
.asmt-team .asmt-split{grid-template-columns:repeat(3,1fr);}
.asmt-team .asmt-list{background:var(--lightest);border-radius:10px;padding:clamp(18px,2.2vw,24px);}

@media (max-width:860px){
  .fd-grid--2{grid-template-columns:1fr;}
  .asmt-split,.asmt-team .asmt-split{grid-template-columns:1fr;}
  .asmt-dl{grid-template-columns:1fr;gap:4px 0;}
  .asmt-dl dd{margin-bottom:12px;}
}

/* ==========================================================================
   SHARING YOUR FAITH (faith-sharing.html)
   Reuses the .cr-* tab shell with five tabs.
   ========================================================================== */
.cr-panel--wide{max-width:var(--maxw);}
.cr-tabs--3{grid-template-columns:repeat(3,1fr);}
.cr-tabs--5{grid-template-columns:repeat(5,1fr);}

.fs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px;}
.fs-sub{font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 14px;}
.fs-block{margin-top:clamp(26px,3.2vw,38px);padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--line);}
.fs-block h3{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:0;margin:0 0 12px;}
.fs-block > p{color:var(--muted);font-size:1.02rem;line-height:1.6;margin:0 0 14px;}
.fs-list{margin:0;padding-left:20px;display:grid;gap:9px;
  color:var(--muted);font-size:1rem;line-height:1.55;}
.fs-list strong{color:var(--ink);}
.fs-list li::marker{color:var(--kids);}

.fs-truth{background:var(--lightest);border-radius:10px;padding:clamp(20px,2.4vw,26px);}
.fs-truth h4{font-family:var(--display);font-weight:700;font-size:1.08rem;letter-spacing:0;margin:0 0 10px;}
.fs-truth p{color:var(--muted);font-size:1rem;line-height:1.55;margin:0;}
.fs-verse{margin-top:12px !important;padding-left:14px;border-left:3px solid var(--kids);
  color:var(--ink) !important;font-family:var(--display);font-weight:500;font-size:.98rem !important;}

.fs-dl{display:grid;gap:14px;margin:0;}
.fs-dl dt{font-family:var(--display);font-weight:700;font-size:1.05rem;}
.fs-dl dd{margin:4px 0 0;color:var(--muted);font-size:.98rem;}

.fs-steps{display:grid;gap:18px;}
.fs-step{background:var(--lightest);border-radius:10px;padding:clamp(22px,2.6vw,30px);}
.fs-step h3{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:0;margin:0 0 8px;}
.fs-step > p{color:var(--muted);font-size:1rem;margin:0 0 14px;}

.fs-qs{display:grid;}
.fs-qs details{border-bottom:1px solid var(--line);padding:18px 0;}
.fs-qs summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;
  font-size:1.05rem;display:flex;justify-content:space-between;gap:18px;align-items:center;}
.fs-qs summary::-webkit-details-marker{display:none;}
.fs-qs summary::after{content:"+";color:var(--kids);font-size:1.5rem;line-height:1;flex:none;}
.fs-qs details[open] summary::after{content:"\2013";}
.fs-qs details > p{color:var(--muted);font-size:1rem;line-height:1.6;margin:14px 0;}
/* An inline link in an answer would otherwise inherit the muted body colour and
   be distinguished only by its underline. The -t accent is the darker sibling
   built for text, so this stays above 4.5:1 on both the cream and white panels.
   Both FAQ components are covered: .fs-qs is used on most pages, .vs-faq only on
   Plan a Visit, and a link should not change appearance between them. */
.fs-qs details > p a,
.vs-faq details p a{color:var(--a-teal-t);font-weight:600;}

@media (max-width:860px){
  .cr-tabs--3,.cr-tabs--5{grid-template-columns:repeat(2,1fr);}
  .fs-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   30 DAYS OF PRAYER (prayer-guide.html)
   One day at a time. The picker strip sticks under the header; the pager sits
   below the card. Both are revealed by prayer-guide.js, so a no-JS visitor
   just gets all thirty days stacked.
   ========================================================================== */
.pg-pick{position:sticky;top:var(--navh,74px);z-index:20;background:var(--cream);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px clamp(18px,4vw,64px);display:flex;align-items:center;gap:16px;}
.pg-pick > span{font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);flex:none;}
.pg-pick__nums{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding:2px;}
.pg-pick__nums::-webkit-scrollbar{display:none;}
.pg-pick__nums button{flex:none;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:none;cursor:pointer;
  display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:.8rem;
  color:var(--muted);transition:background .2s,color .2s,border-color .2s;}
.pg-pick__nums button:hover{background:var(--ink);border-color:var(--ink);color:#fff;}
.pg-pick__nums button.is-current{background:var(--ink);border-color:var(--ink);color:#fff;}

.pg-days{max-width:820px;margin:0 auto;padding:clamp(40px,5.5vw,66px) clamp(18px,4vw,64px) 0;}
.pg-day{background:#fff;border-radius:10px;box-shadow:var(--kx-shadow);overflow:hidden;
  margin-bottom:clamp(18px,2.2vw,26px);}
.pg-day__head{background:var(--ink);color:#fff;padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,38px);}
.pg-day__num{display:block;font-family:var(--display);font-weight:700;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px;}
.pg-day__head h2{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.75rem);
  letter-spacing:.01em;text-transform:uppercase;margin:0;}
.pg-day__body{padding:clamp(24px,3vw,38px);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,2.6vw,30px);}
.pg-field--wide{grid-column:1 / -1;}
.pg-field h3{font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px;}
.pg-field p{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.62;}
.pg-quote{color:var(--ink) !important;font-family:var(--display);font-weight:500;
  font-size:1.1rem !important;line-height:1.5 !important;}
.pg-verse{padding-left:16px;border-left:3px solid var(--kids);color:var(--ink) !important;
  font-family:var(--display);font-weight:500;font-size:1rem !important;}
.pg-challenge{background:var(--lightest);border-radius:10px;padding:18px 20px;}

.pg-pager{max-width:820px;margin:0 auto;padding:clamp(22px,2.6vw,30px) clamp(18px,4vw,64px)
  clamp(44px,6vw,72px);display:flex;align-items:center;justify-content:space-between;gap:16px;}
.pg-pager__count{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);text-align:center;}
.pg-pager .btn:disabled{opacity:.32;pointer-events:none;}

@media (max-width:760px){
  .pg-pick > span{display:none;}
  .pg-day__body{grid-template-columns:1fr;}
  .pg-pager{gap:10px;}
  .pg-pager .btn{padding-left:16px;padding-right:16px;}
}

@media print{
  .nav,.ng-hero,.pg-pick,.pg-pager,.ab-questions,.foot,.gv-statement{display:none !important;}
  .pg-days{max-width:none;padding:0;}
  .pg-day{box-shadow:none;border:1px solid #999;page-break-inside:avoid;margin-bottom:14px;}
  .pg-day__head{background:none;color:#000;border-bottom:1px solid #999;}
  .pg-day__num{color:#555;}
}

/* ==========================================================================
   BIBLE READING PLAN (bible-plan.html)
   Track chooser, then a week at a time. Reuses .pg-pick and .pg-pager.
   ========================================================================== */
.bp-tracks{max-width:var(--maxw);margin:0 auto;padding:clamp(44px,6vw,76px) clamp(18px,4vw,64px);}
.bp-tracks__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,26px);}
.bp-track{display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer;
  padding:clamp(28px,3.2vw,38px);transition:box-shadow .25s,border-color .25s,transform .25s;}
.bp-track:hover{border-color:var(--ink);box-shadow:var(--kx-shadow);transform:translateY(-3px);}
.bp-track h2{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2.1vw,1.55rem);
  text-transform:uppercase;letter-spacing:.01em;margin:10px 0 12px;}
.bp-track__sub{color:var(--muted);font-size:1rem;line-height:1.6;margin:0 0 16px;}
.bp-track__meta{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:22px;}
.bp-track .btn{margin-top:auto;}
/* The whole card is the button, so its hover drives the inner label. */
.bp-track:hover .btn--outline{background:var(--ink);color:#fff;}

.bp-reader{max-width:var(--maxw);margin:0 auto;}
.bp-reader__head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:clamp(40px,5vw,64px) clamp(18px,4vw,64px) clamp(24px,3vw,32px);}
.bp-reader__head h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3vw,2.1rem);text-transform:uppercase;margin:8px 0 10px;}
.bp-reader__head p{color:var(--muted);font-size:1.02rem;line-height:1.6;margin:0;max-width:62ch;}
.bp-reader__head .btn{flex:none;}

.bp-week{padding:clamp(30px,4vw,48px) clamp(18px,4vw,64px) 0;}
.bp-week__head{margin-bottom:clamp(24px,3vw,34px);}
.bp-week__head h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.4rem,2.6vw,1.9rem);text-transform:uppercase;margin:8px 0 10px;}
.bp-week__head > p{color:var(--muted);font-size:1.05rem;line-height:1.6;margin:0;}
.bp-verse{margin-top:14px !important;padding-left:14px;border-left:3px solid var(--kids);
  color:var(--ink) !important;font-family:var(--display);font-weight:500;}

.bp-days{display:grid;gap:clamp(16px,2vw,22px);}
.bp-day{background:#fff;border-radius:10px;box-shadow:var(--kx-shadow);overflow:hidden;}
.bp-day__head{background:var(--ink);color:#fff;padding:clamp(18px,2.2vw,24px) clamp(22px,2.8vw,32px);}
.bp-day__num{display:block;font-family:var(--display);font-weight:700;font-size:.64rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:7px;}
.bp-day__head h3{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,2vw,1.4rem);
  text-transform:uppercase;letter-spacing:.01em;margin:0;}
.bp-day__theme{color:var(--muted-2);font-size:.95rem;margin:6px 0 0;}
.bp-day__body{padding:clamp(22px,2.8vw,32px);}
.bp-day--rest .bp-day__head{background:var(--kids);}
.bp-day--rest .bp-day__num{color:rgba(255,255,255,.72);}

.bp-enc{color:var(--ink);font-family:var(--display);font-weight:500;
  font-size:1.06rem;line-height:1.55;margin:0 0 20px;}
.bp-day--rest .bp-enc{margin:0;}
.bp-field{margin-top:18px;}
.bp-field h4{font-family:var(--display);font-weight:700;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 9px;}
.bp-field > p{color:var(--muted);font-size:1rem;line-height:1.6;margin:0;}
.bp-mark{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);}
.bp-mark:first-child{border-top:0;padding-top:0;}
.bp-mark span{font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--kids);flex:none;min-width:74px;}
.bp-mark em{font-style:normal;color:var(--muted);font-size:.97rem;}

.bp-journal{background:var(--lightest);border-radius:10px;
  padding:clamp(22px,2.8vw,32px);margin-top:clamp(18px,2.2vw,26px);}
.bp-journal h3{font-family:var(--display);font-weight:700;font-size:1.05rem;
  letter-spacing:0;margin:0 0 12px;}

.bp-res{padding:0 clamp(18px,4vw,64px) clamp(44px,6vw,72px);}
.bp-res h3{font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 16px;}
.bp-res__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.bp-res__card{background:var(--lightest);border-radius:10px;padding:22px 24px;}
.bp-res__card h4{font-family:var(--display);font-weight:700;font-size:1rem;margin:0 0 7px;}
.bp-res__card p{color:var(--muted);font-size:.95rem;line-height:1.55;margin:0;}

@media (max-width:900px){
  .bp-tracks__grid,.bp-res__grid{grid-template-columns:1fr;}
  .bp-reader__head{flex-direction:column;}
}
@media (max-width:760px){
  .bp-mark{flex-direction:column;gap:2px;}
}

/* ==========================================================================
   FAITH STORY BUILDER (story-builder.html)
   Section pills, one card of questions at a time, live preview below.
   ========================================================================== */
.sb{max-width:900px;margin:0 auto;padding:clamp(40px,5.5vw,66px) clamp(18px,4vw,64px) 0;}
.sb-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:clamp(22px,2.8vw,32px);}
.sb-steps button{display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
  background:none;border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--muted);
  transition:border-color .2s,color .2s,background .2s;}
.sb-steps button span{flex:none;width:24px;height:24px;border-radius:50%;display:grid;
  place-items:center;border:1px solid currentColor;font-size:.72rem;}
.sb-steps button:hover{border-color:var(--ink);color:var(--ink);}
.sb-steps button.is-current{background:var(--ink);border-color:var(--ink);color:#fff;}

.sb-card{background:#fff;border-radius:10px;box-shadow:var(--kx-shadow);
  padding:clamp(26px,3.2vw,40px);}
.sb-card__head h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.35rem,2.6vw,1.85rem);text-transform:uppercase;margin:8px 0 8px;}
.sb-card__head p{color:var(--muted);font-size:1.02rem;line-height:1.6;margin:0 0 clamp(22px,2.6vw,30px);}

.sb-fields{display:grid;gap:20px;}
.sb-field{display:block;}
.sb-field span{display:block;font-family:var(--display);font-weight:600;font-size:1rem;
  line-height:1.45;margin-bottom:9px;}
.sb-field textarea{width:100%;border:1px solid var(--line);border-radius:10px;
  padding:13px 15px;font-family:var(--body);font-size:1rem;line-height:1.55;color:var(--ink);
  background:var(--lightest);resize:vertical;}
.sb-field textarea:focus{outline:none;border-color:var(--ink);background:#fff;}

.sb-tips{margin-top:clamp(24px,3vw,34px);padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid var(--line);}
.sb-tips h3{font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 11px;}

.sb-preview{background:var(--lightest);border-radius:10px;
  padding:clamp(26px,3.2vw,40px);margin-bottom:clamp(44px,6vw,72px);}
.sb-preview__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:clamp(18px,2.2vw,26px);}
.sb-preview__head h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.2rem,2.2vw,1.5rem);text-transform:uppercase;margin:0;}
.sb-preview__meta{font-family:var(--display);font-weight:600;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.sb-story__part{padding-top:18px;margin-top:18px;border-top:1px solid var(--line);}
.sb-story__part:first-child{padding-top:0;margin-top:0;border-top:0;}
.sb-story__part h3{font-family:var(--display);font-weight:700;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;}
.sb-story__part p{color:var(--ink);font-size:1.03rem;line-height:1.65;margin:0 0 10px;}
.sb-empty{color:var(--muted-2) !important;font-style:italic;}

.sb-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.6vw,30px);
  padding-top:clamp(20px,2.4vw,26px);border-top:1px solid var(--line);}
.sb-status{margin:14px 0 0;font-size:.95rem;color:var(--muted);}
.sb-status.is-error{color:var(--outreach,#DA2D2F);}
.sb-manual{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);}
.sb-manual p{color:var(--muted);font-size:.95rem;margin:0 0 10px;}
.sb-manual textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:13px 15px;
  font-family:var(--body);font-size:.95rem;line-height:1.55;color:var(--ink);background:#fff;resize:vertical;}


@media (max-width:760px){
  .sb-steps{grid-template-columns:1fr 1fr;}
  .sb-steps button{font-size:.76rem;padding:12px 13px;}
}

@media print{
  .nav,.ng-hero,.gv-statement,.sb-steps,.sb-card,.pg-pager,.sb-actions,
  .ab-questions,.foot,.sb-preview__meta,.sb-manual{display:none !important;}
  .sb{max-width:none;padding:0;}
  .sb-preview{background:none;padding:0;}
  .sb-story__part{page-break-inside:avoid;}
  .sb-empty{display:none !important;}
}

/* ==========================================================================
   LEADERSHIP ESSENTIALS (leadership.html)
   Module grid, then a lesson reader with completion tracking.
   ========================================================================== */
.le{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,5.5vw,66px) clamp(18px,4vw,64px)
  clamp(44px,6vw,72px);}

.le-progress{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--lightest);border-radius:10px;padding:16px 20px;
  margin-bottom:clamp(24px,3vw,34px);}
.le-progress__label{font-family:var(--display);font-weight:700;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:none;}
.le-progress__track{flex:1;min-width:140px;height:6px;border-radius:3px;
  background:var(--line);overflow:hidden;}
.le-progress__track > span{display:block;height:100%;background:var(--kids);
  transition:width .35s ease;}

.le-modules{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);}
.le-mod{display:flex;flex-direction:column;align-items:flex-start;text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:clamp(24px,2.8vw,32px);transition:box-shadow .25s,border-color .25s,transform .25s;}
.le-mod:hover{border-color:var(--ink);box-shadow:var(--kx-shadow);transform:translateY(-3px);}
.le-mod h2{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,2vw,1.4rem);
  text-transform:uppercase;letter-spacing:.01em;margin:9px 0 10px;}
.le-mod > p{color:var(--muted);font-size:.98rem;line-height:1.55;margin:0 0 16px;}
.le-mod__list{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:6px;width:100%;}
.le-mod__list li{color:var(--muted);font-size:.9rem;padding-left:20px;position:relative;}
.le-mod__list li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;
  border-radius:50%;border:1px solid var(--line);}
.le-mod__list li.is-done{color:var(--ink);}
.le-mod__list li.is-done::before{background:var(--kids);border-color:var(--kids);}
.le-mod__meta{margin-top:auto;font-family:var(--display);font-weight:700;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);}

.le-reader__head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;margin-bottom:clamp(22px,2.6vw,30px);}
.le-reader__head h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.4rem,2.8vw,2rem);text-transform:uppercase;margin:8px 0 9px;}
.le-reader__head p{color:var(--muted);font-size:1.02rem;line-height:1.6;margin:0;max-width:60ch;}
.le-reader__head .btn{flex:none;}

.le-lessons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin-bottom:clamp(20px,2.4vw,28px);}
.le-lessons button{display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
  background:none;border:1px solid var(--line);border-radius:10px;padding:13px 15px;
  font-family:var(--display);font-weight:600;font-size:.8rem;color:var(--muted);
  transition:border-color .2s,color .2s,background .2s;}
.le-lessons button span{flex:none;width:23px;height:23px;border-radius:50%;display:grid;
  place-items:center;border:1px solid currentColor;font-size:.7rem;}
.le-lessons button:hover{border-color:var(--ink);color:var(--ink);}
.le-lessons button.is-done{color:var(--ink);border-color:var(--kids);}
.le-lessons button.is-done span{background:var(--kids);border-color:var(--kids);color:#fff;}
.le-lessons button.is-current{background:var(--ink);border-color:var(--ink);color:#fff;}
.le-lessons button.is-current span{border-color:rgba(255,255,255,.6);}

.le-lesson{background:#fff;border-radius:10px;box-shadow:var(--kx-shadow);
  padding:clamp(26px,3.2vw,40px);}
.le-lesson__head h3{font-family:var(--display);font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.7rem);text-transform:uppercase;margin:8px 0 9px;}
.le-lesson__head > p{color:var(--muted);font-size:1.02rem;line-height:1.6;margin:0;}

.le-verse{background:var(--lightest);border-left:3px solid var(--kids);border-radius:0 10px 10px 0;
  padding:20px 22px;margin:clamp(22px,2.6vw,30px) 0;}
.le-verse span{display:block;font-family:var(--display);font-weight:700;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--kids);margin-bottom:9px;}
.le-verse p{margin:0;color:var(--ink);font-family:var(--display);font-weight:500;
  font-size:1.02rem;line-height:1.55;}
.le-verse__app{margin-top:11px !important;color:var(--muted) !important;
  font-family:var(--body) !important;font-weight:400 !important;font-size:.97rem !important;}

.le-intro{color:var(--muted);font-size:1.04rem;line-height:1.65;margin:0 0 6px;}
.le-block{margin-top:clamp(22px,2.6vw,30px);}
.le-block h4{font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 11px;}

.le-example{background:var(--lightest);border-radius:10px;padding:18px 20px;margin-bottom:12px;}
.le-example p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.6;}
.le-example__s{color:var(--ink) !important;font-family:var(--display);font-weight:600;
  margin-bottom:8px !important;}

.le-panel{border:1px solid var(--line);border-radius:10px;
  padding:clamp(22px,2.6vw,30px);margin-top:clamp(22px,2.6vw,30px);}
.le-panel h4{font-family:var(--display);font-weight:700;font-size:1.1rem;
  letter-spacing:0;text-transform:none;color:var(--ink);margin:8px 0 10px;}
.le-panel > p{color:var(--muted);font-size:1rem;line-height:1.6;margin:0 0 14px;}
.le-panel--dark{background:var(--ink);border-color:var(--ink);color:#fff;}
.le-panel--dark h4{color:#fff;}
.le-panel--dark > p,.le-panel--dark li{color:rgba(255,255,255,.78);}
.le-panel--dark .ns-cat__num{color:var(--muted-2);}
.le-reflect{margin:14px 0 0 !important;padding-top:14px;border-top:1px solid rgba(255,255,255,.2);
  font-family:var(--display);font-weight:500;color:#fff !important;}

.le-ol,.le-ul{margin:0;padding-left:20px;display:grid;gap:9px;
  color:var(--muted);font-size:1rem;line-height:1.55;}
.le-ol li::marker,.le-ul li::marker{color:var(--kids);}

.le-res{list-style:none;padding:0;margin:0;display:grid;gap:9px;}
.le-res li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.le-res a{color:var(--ink);font-size:.99rem;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line);}
.le-res a:hover{text-decoration-color:var(--ink);}
.le-res__type{font-family:var(--display);font-weight:700;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);border:1px solid var(--line);
  border-radius:20px;padding:2px 9px;}

.le-done{display:flex;align-items:center;gap:11px;cursor:pointer;
  margin-top:clamp(24px,3vw,34px);padding-top:clamp(20px,2.4vw,26px);border-top:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:.95rem;}
.le-done input{width:19px;height:19px;accent-color:var(--kids);flex:none;}

@media (max-width:980px){
  .le-modules{grid-template-columns:1fr 1fr;}
  .le-lessons{grid-template-columns:1fr 1fr;}
}
@media (max-width:700px){
  .le-modules{grid-template-columns:1fr;}
  .le-reader__head{flex-direction:column;}
  .le-progress{gap:12px;}
  .le-progress__track{order:3;width:100%;flex-basis:100%;}
}

/* ==========================================================================
   BUDGET BUILDER (budget.html)
   Income and expense rows, percentage inputs, summary panel, goal tracker.
   ========================================================================== */
.bg-section{margin-top:clamp(26px,3.2vw,38px);padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--line);}
.bg-section__head{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:8px;}
.bg-section__head h3{font-family:var(--display);font-weight:700;font-size:1.2rem;
  letter-spacing:0;margin:0;}
.bg-hint{color:var(--muted);font-size:.96rem;line-height:1.55;margin:0 0 16px;}

.bg-rows{display:grid;gap:10px;}
.bg-row{display:grid;grid-template-columns:1fr 190px 40px;gap:10px;align-items:center;}
.bg-row input{width:100%;border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--lightest);}
.bg-row input:focus{outline:none;border-color:var(--ink);background:#fff;}
.bg-row__amt{position:relative;display:flex;align-items:center;}
.bg-row__amt > span{position:absolute;left:14px;color:var(--muted);font-size:1rem;
  pointer-events:none;}
.bg-row__amt input{padding-left:30px;text-align:right;font-variant-numeric:tabular-nums;}
.bg-row__x{border:1px solid var(--line);border-radius:10px;background:none;cursor:pointer;
  width:40px;height:44px;font-size:1.3rem;line-height:1;color:var(--muted);
  transition:border-color .2s,color .2s,background .2s;}
.bg-row__x:hover{border-color:var(--ink);color:#fff;background:var(--ink);}

.bg-pct{display:flex;align-items:center;gap:10px;margin-top:14px;}
.bg-pct input{width:100px;border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font-family:var(--body);font-size:1rem;color:var(--ink);
  background:#fff;text-align:right;font-variant-numeric:tabular-nums;}
.bg-pct input:focus{outline:none;border-color:var(--ink);}
.bg-pct span{font-family:var(--display);font-weight:600;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}

.bg-summary{background:var(--ink);color:#fff;border-radius:10px;
  padding:clamp(24px,3vw,34px);margin-top:clamp(26px,3.2vw,38px);}
.bg-summary h3{font-family:var(--display);font-weight:700;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin:0 0 18px;}
.bg-summary__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.bg-summary__grid span{display:block;font-size:.9rem;color:rgba(255,255,255,.7);margin-bottom:5px;}
.bg-summary__grid strong{font-family:var(--display);font-weight:700;
  font-size:clamp(1.15rem,2.2vw,1.5rem);font-variant-numeric:tabular-nums;}
.bg-summary__left{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.22);}
.bg-summary__left span{display:block;font-size:.9rem;color:rgba(255,255,255,.7);margin-bottom:5px;}
.bg-summary__left strong{font-family:var(--display);font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.3rem);font-variant-numeric:tabular-nums;color:#8FD6A4;}
.bg-summary__left strong.is-negative{color:#FF8A8A;}
.bg-summary__left p{color:rgba(255,255,255,.72);font-size:.97rem;line-height:1.55;margin:10px 0 0;}

.bg-goals{display:grid;gap:16px;}
.bg-goal{position:relative;background:var(--lightest);border-radius:10px;
  padding:clamp(20px,2.4vw,26px);}
.bg-goal__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.bg-goal__grid label{display:block;}
.bg-goal__grid label > span{display:block;font-family:var(--display);font-weight:700;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
.bg-goal__grid input,.bg-goal__grid select{width:100%;border:1px solid var(--line);
  border-radius:10px;padding:11px 13px;font-family:var(--body);font-size:.98rem;
  color:var(--ink);background:#fff;}
.bg-goal__grid input:focus,.bg-goal__grid select:focus{outline:none;border-color:var(--ink);}
.bg-goal__grid .bg-row__amt input{padding-left:28px;text-align:right;}
.bg-goal__bar{margin-top:18px;}
.bg-goal__label{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--display);font-weight:700;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.bg-goal__label em{font-style:normal;color:var(--ink);font-size:.9rem;letter-spacing:0;}
.bg-goal__left{display:block;margin-top:8px;font-size:.9rem;color:var(--muted);}
.bg-goal__x{position:absolute;top:14px;right:14px;height:34px;width:34px;background:#fff;}

@media (max-width:860px){
  .bg-summary__grid{grid-template-columns:1fr 1fr;}
  .bg-goal__grid{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .bg-row{grid-template-columns:1fr 40px;grid-template-areas:"label x" "amt amt";}
  .bg-row__label{grid-area:label;}
  .bg-row__amt{grid-area:amt;}
  .bg-row__x{grid-area:x;}
}

@media print{
  .nav,.ng-hero,.gv-statement,.cr-tabs,.ab-questions,.foot,
  .sb-actions,.bg-row__x,.bg-goal__x,[data-add]{display:none !important;}
  .cr-panel{box-shadow:none;padding:0;max-width:none;}
  /* Print only the tab the button belongs to. */
  .printing-budget #bgLearnPane,.printing-budget #bgGoalsPane,
  .printing-goals #bgLearnPane,.printing-goals #bgBuildPane{display:none !important;}
  .printing-goals #bgGoalsPane,.printing-budget #bgBuildPane{display:block !important;}
  .bg-summary{background:none;color:#000;border:1px solid #999;}
  .bg-summary h3,.bg-summary__grid span,.bg-summary__left span,.bg-summary__left p{color:#555;}
  .bg-summary__left strong{color:#000;}
  .bg-goal{page-break-inside:avoid;}
}

/* ==========================================================================
   SMALL GROUPS (groups.html)
   Two large doors, the four study tracks, the lead-a-group steps, and an FAQ.
   ========================================================================== */
.gr-cards{max-width:var(--maxw);margin:0 auto;
  padding:clamp(44px,6vw,76px) clamp(18px,4vw,64px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px);}
.gr-card{position:relative;overflow:hidden;border-radius:10px;box-shadow:var(--kx-shadow);
  min-height:clamp(420px,46vw,520px);display:flex;align-items:flex-end;color:#fff;
  background:#1a1a1a;}
.gr-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.gr-card::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(0,0,0,.22) 0%,rgba(0,0,0,.5) 42%,rgba(0,0,0,.88) 100%);}
.gr-card__body{position:relative;z-index:2;padding:clamp(28px,3.4vw,44px);}
.gr-card__body h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.7rem,3.4vw,2.4rem);text-transform:uppercase;letter-spacing:.01em;
  margin:0 0 12px;text-shadow:0 1px 18px rgba(0,0,0,.55);}
.gr-card__body p{color:rgba(255,255,255,.86);font-size:1.03rem;line-height:1.6;
  margin:0 0 22px;max-width:44ch;text-shadow:0 1px 10px rgba(0,0,0,.5);}

.gr-tracks{background:var(--cream);padding:clamp(44px,6vw,76px) clamp(18px,4vw,64px);}
.gr-tracks__inner{max-width:var(--maxw);margin:0 auto;text-align:center;}
.gr-tracks__inner h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.4rem);text-transform:uppercase;margin:9px 0 12px;}
.gr-tracks__lede{color:var(--muted);font-size:1.05rem;line-height:1.6;
  max-width:56ch;margin:0 auto clamp(28px,3.4vw,40px);}
.gr-tracks__grid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,20px);margin-bottom:clamp(28px,3.4vw,38px);text-align:left;}
.gr-track{background:#fff;border-radius:10px;padding:clamp(22px,2.6vw,30px);
  border-top:4px solid var(--track);}
.gr-track h3,.gr-track h4{font-family:var(--display);font-weight:800;font-size:1.15rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--track);margin:0 0 5px;}
.gr-track__sub{font-family:var(--display);font-weight:600;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;}
.gr-track p:last-child{color:var(--muted);font-size:.97rem;line-height:1.55;margin:0;}

.gr-lead{position:relative;overflow:hidden;background:#1a1a1a;color:#fff;
  padding:clamp(52px,7vw,92px) clamp(18px,4vw,64px);text-align:center;}
.gr-lead__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.32;z-index:0;}
.gr-lead__inner{position:relative;z-index:1;max-width:660px;margin:0 auto;}
.gr-lead__inner h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.8rem,4vw,2.7rem);text-transform:uppercase;margin:0 0 16px;
  text-shadow:0 1px 18px rgba(0,0,0,.5);}
.gr-lead__inner p{color:rgba(255,255,255,.85);font-size:1.05rem;line-height:1.65;margin:0;
  text-shadow:0 1px 10px rgba(0,0,0,.45);}

.gr-steps{max-width:var(--maxw);margin:0 auto;
  padding:clamp(40px,5.2vw,64px) clamp(18px,4vw,64px);}
.gr-steps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);}
.gr-step{display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--lightest);border-radius:10px;padding:clamp(28px,3.2vw,40px);}
/* Circled line icon, echoing the three circles on the reference page */
.gr-step__icon{display:grid;place-items:center;flex:none;
  width:clamp(78px,9vw,96px);height:clamp(78px,9vw,96px);
  border-radius:50%;background:#fff;border:1px solid var(--line);
  color:var(--kids);margin-bottom:20px;}
.gr-step__icon svg{width:52%;height:52%;display:block;}
.gr-step h4{font-family:var(--display);font-weight:700;font-size:1.25rem;
  text-transform:uppercase;letter-spacing:.01em;margin:9px 0 10px;}
.gr-step p{color:var(--muted);font-size:1rem;line-height:1.6;margin:0 0 18px;}
.gr-step .btn{margin-top:auto;}

.gr-faq{background:var(--cream);padding:clamp(44px,6vw,72px) clamp(18px,4vw,64px);}
.gr-faq__inner{max-width:820px;margin:0 auto;}
.gr-faq__inner h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.3rem);text-transform:uppercase;margin:9px 0 clamp(20px,2.4vw,30px);}

@media (max-width:900px){
  .gr-tracks__grid{grid-template-columns:1fr 1fr;}
  .gr-steps__grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .gr-cards{grid-template-columns:1fr;}
  .gr-tracks__grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   SALVATION (salvation.html)
   Two columns: the photo sticks while the four gospel points scroll past it.
   ========================================================================== */
.sv-gospel{max-width:var(--maxw);margin:0 auto;
  padding:clamp(48px,6.5vw,86px) clamp(18px,4vw,64px);}
.sv-gospel__inner{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);align-items:start;}
.sv-gospel__media{position:sticky;top:calc(var(--navh,74px) + 28px);}
.sv-gospel__media img{width:100%;height:auto;display:block;
  border-radius:10px;box-shadow:var(--kx-shadow);}

.sv-gospel__body h2{font-family:var(--display);font-weight:700;
  font-size:clamp(2.1rem,4.6vw,3.2rem);line-height:1.04;text-transform:uppercase;
  letter-spacing:.01em;margin:10px 0 clamp(28px,3.4vw,42px);}

.sv-points{display:grid;gap:clamp(26px,3vw,38px);}
.sv-point{padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line);}
.sv-point:first-child{padding-top:0;border-top:0;}
.sv-point h3{font-family:var(--display);font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.7rem);text-transform:uppercase;
  letter-spacing:.01em;margin:0 0 12px;}
.sv-point p{color:var(--muted);font-size:1.05rem;line-height:1.65;margin:0;}
.sv-point__ref{margin-top:14px !important;font-family:var(--display);font-weight:700;
  font-size:.68rem !important;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kids) !important;}

@media (max-width:820px){
  .sv-gospel__inner{grid-template-columns:1fr;}
  /* Sticky is pointless once the columns stack. */
  .sv-gospel__media{position:static;}
  .sv-gospel__media img{max-height:420px;object-fit:cover;}
}

/* ==========================================================================
   BAPTISM (baptism.html)
   Photo beside the explanation and the signup, then the FAQ (.gr-faq shell).
   ========================================================================== */
.bp-what{max-width:var(--maxw);margin:0 auto;
  padding:clamp(48px,6.5vw,86px) clamp(18px,4vw,64px);}
.bp-what__inner{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,68px);align-items:center;}
.bp-what__media img{width:100%;height:auto;display:block;
  border-radius:10px;box-shadow:var(--kx-shadow);}
.bp-what__body h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.9rem,4.2vw,2.9rem);text-transform:uppercase;
  letter-spacing:.01em;line-height:1.06;margin:0 0 18px;}
.bp-what__body p{color:var(--muted);font-size:1.06rem;line-height:1.65;margin:0 0 16px;}
.bp-what__body .btn{margin-top:10px;}

/* Scripture reference inside an FAQ answer */
.bp-ref{display:block;margin-top:12px;font-family:var(--display);font-weight:700;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--kids);}

@media (max-width:820px){
  .bp-what__inner{grid-template-columns:1fr;}
}

/* ==========================================================================
   OUTREACH (outreach.html)
   "Get Involved" tiles: photo on top, heading, blurb, and a way in.
   ========================================================================== */
.or-involved{background:var(--cream);padding:clamp(46px,6vw,80px) clamp(18px,4vw,64px);}
.or-involved__inner{max-width:var(--maxw);margin:0 auto;text-align:center;}
.or-involved__inner h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.7rem,3.6vw,2.5rem);text-transform:uppercase;margin:9px 0 12px;}
.or-involved__lede{color:var(--muted);font-size:1.05rem;line-height:1.6;
  max-width:56ch;margin:0 auto clamp(30px,3.6vw,44px);}

.or-grid{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.4vw,28px);text-align:left;}
.or-tile{display:flex;flex-direction:column;background:#fff;border-radius:10px;
  overflow:hidden;box-shadow:var(--kx-shadow);
  transition:transform .25s ease,box-shadow .25s ease;}
.or-tile:hover{transform:translateY(-3px);box-shadow:0 14px 44px rgba(0,0,0,.26);}
.or-tile__img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;}
.or-tile__body{display:flex;flex-direction:column;flex:1;
  padding:clamp(24px,2.8vw,34px);}
.or-tile__body h3{font-family:var(--display);font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.7rem);text-transform:uppercase;
  letter-spacing:.01em;margin:0 0 11px;}
.or-tile__body p{color:var(--muted);font-size:1.01rem;line-height:1.6;margin:0 0 20px;}
.or-tile__body .btn{margin-top:auto;align-self:flex-start;}

@media (max-width:760px){
  .or-grid{grid-template-columns:1fr;}
}

/* Give page: two-up resource bar at the foot of the page, no imagery. */
.gv-bar{background:var(--cream);border-top:1px solid var(--line);
  padding:clamp(44px,5.6vw,72px) clamp(18px,4vw,64px);}
.gv-bar__inner{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(30px,4.4vw,64px);}
.gv-bar__item{display:flex;flex-direction:column;align-items:flex-start;}
.gv-bar__item h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.4rem,2.8vw,1.95rem);text-transform:uppercase;
  letter-spacing:.01em;line-height:1.1;margin:0 0 14px;}
.gv-bar__item p{color:var(--muted);font-size:1.03rem;line-height:1.65;margin:0 0 24px;}
.gv-bar__item .btn{margin-top:auto;}

@media (max-width:760px){
  .gv-bar__inner{grid-template-columns:1fr;}
}

/* YTH0419: scripture line under the mission statement */
.gv-statement p.yth-verse{margin:18px auto 0;padding-top:16px;
  border-top:1px solid var(--line);max-width:62ch;
  font-family:var(--display);font-weight:500;font-size:1rem;color:var(--muted);}

/* ==========================================================================
   YTH0419 (yth.html)
   ========================================================================== */
.gv-statement p.yth-verse{margin:18px auto 0;padding-top:16px;
  border-top:1px solid var(--line);max-width:62ch;
  font-family:var(--display);font-weight:500;font-size:1rem;color:var(--muted);}

/* Gliding photo strip, used on more than one page. The track holds the images
   twice, so wrapping at the halfway point lands on the duplicate and loops with
   no seam.
   This is a real scroll container, not a transform animation, which is what
   lets someone drag or swipe through the photos at their own pace. photo-strip.js
   advances it and gets out of the way while they are doing that. With no JS it
   stays a plain scrollable strip, which is a fine outcome.
   Per-page colour lives on a modifier class next to .pstrip, down in the seams
   section, so the behaviour here stays shared. */
.pstrip{overflow-x:auto;overflow-y:hidden;background:var(--ink);padding:0;
  /* html has scroll-behavior:smooth; this must not inherit it or every frame of
     the animation would be queued as a smooth scroll. */
  scroll-behavior:auto;
  /* Stops a horizontal swipe here from triggering browser back-navigation. */
  overscroll-behavior-x:contain;
  /* The strip is decorative, so the scrollbar is noise. It stays scrollable. */
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;}
.pstrip::-webkit-scrollbar{display:none;}
.pstrip.is-dragging{cursor:grabbing;}
.pstrip.is-dragging img{pointer-events:none;}
.pstrip__track{display:flex;width:max-content;}
.pstrip__track img{display:block;flex:none;
  width:clamp(220px,26vw,340px);aspect-ratio:3/2;object-fit:cover;
  /* Otherwise a drag turns into the browser's native image drag. */
  user-select:none;-webkit-user-drag:none;}

.yth-social{background:var(--cream);text-align:center;
  padding:clamp(40px,5.2vw,66px) clamp(18px,4vw,64px);}
.yth-social__inner{max-width:640px;margin:0 auto;}
.yth-social__inner h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3.2vw,2.2rem);text-transform:uppercase;margin:9px 0 12px;}
.yth-social__inner p{color:var(--muted);font-size:1.03rem;line-height:1.6;
  margin:0 0 clamp(22px,2.6vw,30px);}
.yth-social__links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}

/* The eyebrow above a row heading (Grades 6 to 8, For adults, ...) */
.gv-row__copy .ns-cat__num{margin-bottom:8px;}

/* ==========================================================================
   YOUNG ADULTS (young-adults.html)
   Welcome band, three photo cards, texting-group band.
   ========================================================================== */
/* Full-height hero, matching the reference */
.ng-hero--tall{min-height:min(92vh,900px);}
.ya-hero__ages{margin-top:14px !important;font-family:var(--display);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;font-size:.86rem !important;}

/* Let's Do Life Together: centered copy with photos scattered around it */
.ya-intro{position:relative;overflow:hidden;
  /* Needs real height or the scattered photos stack on top of each other. */
  min-height:clamp(560px,68vh,880px);display:flex;align-items:center;
  padding:clamp(56px,8vw,110px) clamp(18px,4vw,64px);}
.ya-intro__inner{position:relative;z-index:2;max-width:660px;margin:0 auto;text-align:center;}
.ya-intro h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.9rem,4.4vw,3rem);text-transform:uppercase;
  letter-spacing:.01em;margin:0 0 20px;}
.ya-intro p{color:var(--muted);font-size:1.06rem;line-height:1.68;margin:0 0 14px;}

.ya-scatter{position:absolute;z-index:1;width:clamp(150px,15vw,215px);
  aspect-ratio:6/7;object-fit:cover;border-radius:10px;box-shadow:var(--kx-shadow);}
.ya-scatter--1{left:6%;top:9%;}
.ya-scatter--2{right:4%;top:5%;}
.ya-scatter--3{left:2%;bottom:7%;}
.ya-scatter--4{right:9%;bottom:9%;}

/* Below 1100px the copy would collide with the photos, so they step aside. */
@media (max-width:1100px){
  .ya-scatter{width:clamp(115px,12.5vw,150px);}
  .ya-scatter--1{left:1%;top:5%;}
  .ya-scatter--2{right:1%;top:3%;}
  .ya-scatter--3{left:0;bottom:5%;}
  .ya-scatter--4{right:1%;bottom:4%;}
}
@media (max-width:900px){
  .ya-scatter{display:none;}
}

.ya-cards{max-width:var(--maxw);margin:0 auto;
  padding:0 clamp(18px,4vw,64px) clamp(44px,6vw,72px);}
/* Two cards, not three. A hard repeat(3,1fr) would leave the pair stranded in the
   left two thirds; letting them split the full width would balloon the 17/20
   portrait photos by ~200px. The cap keeps them near their original size and
   centres the pair. */
.ya-cards__grid{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.4vw,28px);max-width:1000px;margin:0 auto;}
.ya-card{display:flex;flex-direction:column;background:#fff;border-radius:10px;
  overflow:hidden;box-shadow:var(--kx-shadow);
  transition:transform .25s ease,box-shadow .25s ease;}
.ya-card:hover{transform:translateY(-3px);box-shadow:0 14px 44px rgba(0,0,0,.26);}
/* 3/2 rather than the original 17/20 portrait. With only two cards the tall crop
   made them ~725px high. The sources are 900x1060 and their subjects sit mid
   frame, so a centred 3/2 window trims dead space (bunting overhead in one, dark
   ceiling in the other) and keeps every face. */
.ya-card__img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;}
.ya-card__body{display:flex;flex-direction:column;flex:1;padding:clamp(24px,2.8vw,32px);}
.ya-card__body h3{font-family:var(--display);font-weight:700;
  font-size:clamp(1.25rem,2.2vw,1.55rem);text-transform:uppercase;
  letter-spacing:.01em;margin:0 0 11px;}
.ya-card__body p{color:var(--muted);font-size:1rem;line-height:1.6;margin:0 0 20px;}
.ya-card__body .btn{margin-top:auto;align-self:flex-start;}

.ya-stay{background:var(--ink);color:#fff;text-align:center;
  padding:clamp(46px,6vw,78px) clamp(18px,4vw,64px);}
.ya-stay__inner{max-width:640px;margin:0 auto;}
.ya-stay__inner h2{font-family:var(--display);font-weight:700;color:#fff;
  font-size:clamp(1.7rem,3.6vw,2.5rem);text-transform:uppercase;margin:9px 0 14px;}
.ya-stay__inner p{color:rgba(255,255,255,.8);font-size:1.04rem;line-height:1.65;margin:0 0 14px;}
.ya-stay__text{font-family:var(--display);font-weight:600;color:#fff !important;
  font-size:clamp(1.1rem,2.2vw,1.35rem) !important;letter-spacing:.02em;
  margin:20px 0 26px !important;}
.ya-stay__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.ya-stay .ns-cat__num{color:var(--muted-2);}

@media (max-width:860px){
  .ya-cards__grid{grid-template-columns:1fr;max-width:460px;margin:0 auto;}
}

/* ==========================================================================
   OUR TEAM (team.html)
   Lead pastor feature, then grouped portrait cards.
   ========================================================================== */
.tm-lead{max-width:var(--maxw);margin:0 auto;
  padding:clamp(48px,6.5vw,86px) clamp(18px,4vw,64px);}
/* Shorter bio, so the two columns are centered against each other rather than
   top-aligned, and the portrait is a touch less tall to sit closer in height. */
.tm-lead__inner{display:grid;grid-template-columns:1fr 1.04fr;
  gap:clamp(32px,5vw,64px);align-items:center;}

.tm-lead__media img{width:100%;height:auto;display:block;
  border-radius:10px;box-shadow:var(--kx-shadow);}
.tm-lead__portrait{aspect-ratio:4/5;object-fit:cover;object-position:50% 16%;}
.tm-lead__copy h2{font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,4.4vw,3rem);text-transform:uppercase;
  letter-spacing:.01em;margin:8px 0 18px;}
.tm-lead__copy p{color:var(--muted);font-size:1.04rem;line-height:1.7;margin:0 0 16px;}
.tm-lead__copy .btn{margin-top:10px;}

.tm-group{padding:clamp(44px,6vw,74px) clamp(18px,4vw,64px);}
.tm-group--alt{background:var(--cream);}
.tm-group__inner{max-width:var(--maxw);margin:0 auto;}
.tm-group__inner h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3vw,2.1rem);text-transform:uppercase;
  letter-spacing:.01em;text-align:center;margin:0 0 clamp(28px,3.4vw,42px);}

.tm-grid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2.2vw,26px);}
.tm-card{background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:var(--kx-shadow);
  transition:transform .25s ease,box-shadow .25s ease;}
.tm-card:hover{transform:translateY(-3px);box-shadow:0 14px 44px rgba(0,0,0,.26);}
.tm-card__img{width:100%;aspect-ratio:3/4;object-fit:cover;
  object-position:50% 22%;display:block;}
.tm-card__body{padding:clamp(18px,2.2vw,24px);}
.tm-card__body h3{font-family:var(--display);font-weight:700;
  font-size:clamp(1.05rem,1.8vw,1.25rem);letter-spacing:0;margin:0 0 5px;}
.tm-card__role{color:var(--muted);font-size:.93rem;line-height:1.45;margin:0 0 10px;}
.tm-card__mail{font-size:.85rem;color:var(--kids);text-decoration:none;
  word-break:break-all;}
.tm-card__mail:hover{text-decoration:underline;}

@media (max-width:1000px){ .tm-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:820px){
  .tm-lead__inner{grid-template-columns:1fr;}
  .tm-lead__portrait{max-height:560px;}
}
@media (max-width:640px){ .tm-grid{grid-template-columns:repeat(2,1fr);} }

/* ==========================================================================
   OUR BELIEFS (beliefs.html)
   Grouped statement of faith, the three 4:19 verses, and the values grid.
   ========================================================================== */
.bl-faith{max-width:860px;margin:0 auto;
  padding:clamp(46px,6vw,80px) clamp(18px,4vw,64px);}
.bl-faith__inner h2,.bl-journey__inner h2,.bl-values__inner h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.7rem,3.6vw,2.5rem);text-transform:uppercase;margin:9px 0 12px;}
.bl-faith__lede,.bl-journey__lede,.bl-values__lede{
  color:var(--muted);font-size:1.04rem;line-height:1.6;margin:0 0 clamp(26px,3.2vw,38px);}

.bl-item{border-top:1px solid var(--line);}
.bl-item:last-of-type{border-bottom:1px solid var(--line);}
.bl-item summary{cursor:pointer;list-style:none;padding:20px 0;
  font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,2vw,1.28rem);
  line-height:1.4;display:flex;justify-content:space-between;gap:20px;align-items:center;}
.bl-item summary::-webkit-details-marker{display:none;}
.bl-item summary::after{content:"+";color:var(--kids);font-size:1.6rem;line-height:1;flex:none;}
.bl-item[open] summary::after{content:"\2013";}
.bl-item__body{padding:0 0 12px;}

/* Statement of Faith articles are plain statements now, with no sub-heading and
   no scripture references, so each grouping is a bullet list rather than the
   old label + paragraph + refs stack. */
.bl-list{list-style:none;margin:0;padding:4px 0 10px;display:grid;gap:15px;}
.bl-list li{position:relative;padding-left:26px;color:var(--muted);
  font-size:1rem;line-height:1.65;}
.bl-list li::before{content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--a-teal);}
.bl-article{padding:18px 0;border-top:1px solid var(--line);}
.bl-article:first-child{border-top:0;padding-top:4px;}
.bl-article h3,.bl-article h4{font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 9px;}
.bl-article p{color:var(--muted);font-size:1rem;line-height:1.65;margin:0;}
.bl-refs{margin-top:10px !important;font-size:.85rem !important;
  color:var(--kids) !important;line-height:1.5;}

.bl-journey{background:var(--ink);color:#fff;
  padding:clamp(48px,6.4vw,84px) clamp(18px,4vw,64px);}
.bl-journey__inner{max-width:var(--maxw);margin:0 auto;text-align:center;}
.bl-journey__inner h2{color:#fff;}
.bl-journey__lede{color:rgba(255,255,255,.78) !important;max-width:60ch;
  margin-left:auto;margin-right:auto;}
.bl-journey .ns-cat__num{color:var(--muted-2);}
.bl-journey__grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.6vw,32px);text-align:left;}
.bl-journey__item{border-top:2px solid var(--kids);padding-top:22px;}
.bl-journey__item h3{font-family:var(--display);font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.7rem);text-transform:uppercase;
  color:#fff;margin:8px 0 14px;}
.bl-journey__verse{font-family:var(--display);font-weight:500;color:#fff;
  font-size:1rem;line-height:1.55;margin:0 0 14px;}
.bl-journey__item > p:last-child{color:rgba(255,255,255,.74);font-size:.99rem;
  line-height:1.62;margin:0;}

.bl-values{background:var(--cream);
  padding:clamp(46px,6vw,80px) clamp(18px,4vw,64px);}
.bl-values__inner{max-width:var(--maxw);margin:0 auto;text-align:center;}
.bl-values__lede{max-width:58ch;margin-left:auto;margin-right:auto;}
.bl-values__grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,20px);text-align:left;}
.bl-value{background:#fff;border-radius:10px;padding:clamp(22px,2.6vw,30px);
  display:flex;flex-direction:column;gap:12px;}
.bl-value span{font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.16em;color:var(--kids);}
.bl-value h3{font-family:var(--display);font-weight:700;
  font-size:clamp(1.02rem,1.8vw,1.2rem);letter-spacing:0;margin:0;line-height:1.3;}

@media (max-width:900px){
  .bl-journey__grid{grid-template-columns:1fr;}
  .bl-values__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){ .bl-values__grid{grid-template-columns:1fr;} }


/* A short gold rule under each photo-card headline. Carried over from the
   colour variation, which used a deepened gold (#D9971F) rather than the
   paler --groups tan, because it reads better on the dark card. */
.ng-card__body h2::after,.gr-card__body h2::after{content:"";display:block;
  width:56px;height:5px;background:#D9971F;margin:14px 0 0;border-radius:3px;}

/* ==========================================================================
   Colour accents on the numbered-section pages, carried over from the colour
   variation. Backgrounds deliberately left alone: the sections keep the
   original paper/cream alternation.

   Scoped to .ns-cat so it only touches the pages built from numbered
   sections (Next Steps, Serving) and does not recolour buttons site-wide.
   Colours rotate on nth-of-type(5n+k) so the cycle works whatever precedes
   the run on a given page.
   ========================================================================== */
.ns-cat{--accent:#1F7489;}                        /* teal */
.ns-cat:nth-of-type(5n+2){--accent:#C4432F;}      /* terracotta */
.ns-cat:nth-of-type(5n+3){--accent:#3E8455;}      /* green */
.ns-cat:nth-of-type(5n+4){--accent:#1B4F8A;}      /* blue */
.ns-cat:nth-of-type(5n+5){--accent:#6B3A62;}      /* plum */

/* The section number becomes a filled chip. Scoped to .ns-cat: the same class
   is used as a plain eyebrow label all over the site, and an unscoped rule
   turned every one of those into white text on a white background. */
.ns-cat .ns-cat__num{display:inline-block;background:var(--accent);color:#fff;
  padding:6px 13px;border-radius:20px;margin-bottom:16px;}

/* a short rule under the section heading */
.ns-cat h2::after{content:"";display:block;width:64px;height:5px;
  border-radius:3px;margin:16px 0 0;background:var(--accent);}

/* cards get a colour cap matching their section */
.ns-cat .ns-card{border-top:5px solid var(--accent);}

/* and their buttons pick it up, inside these sections only */
.ns-cat .ns-card .btn--outline{color:var(--accent);border-color:var(--accent);}
.ns-cat .ns-card .btn--outline:hover{background:var(--accent);border-color:var(--accent);color:#fff;}

/* the impact line's rule follows the section colour too */
.ns-cat .ns-cat__impact{border-left-color:var(--accent);}

/* ==========================================================================
   Colour accents across the rest of the site, carried over from the colour
   variation. Frames, buttons, chips and small decorative bars only.

   Deliberately NOT carried over: every background. Section tints, the warmer
   paper and cream, the navy ink, the hero scrim and the dark band fills all
   stay exactly as they were.

   Accents live in their own variables rather than overwriting --kids etc, so
   the department colours keep their existing meaning elsewhere.
   ========================================================================== */
:root{
  --a-teal:#1F7489;
  --a-teal-t:#1A6274;   /* darker sibling, for text on white */
  --a-green:#3E8455;
  --a-gold:#D9971F;
  --a-terra:#C4432F;
  --a-blue:#1B4F8A;
  --a-plum:#6B3A62;
}

/* ---------- buttons ---------- */
.btn--solid{background:var(--a-teal);}
.btn--solid:hover{background:#17606F;}
.btn--outline{color:var(--a-teal-t);border-color:var(--a-teal);}
.btn--outline:hover{background:var(--a-teal);border-color:var(--a-teal);color:#fff;}

/* ---------- a colour cap on the card grids, rotating per grid ---------- */
.or-tile{border-top:5px solid var(--a-teal);}
.or-tile:nth-child(2){border-top-color:var(--a-green);}
.or-tile:nth-child(3){border-top-color:var(--a-terra);}
.or-tile:nth-child(4){border-top-color:var(--a-gold);}

.ya-card{border-top:5px solid var(--a-teal);}
.ya-card:nth-child(2){border-top-color:var(--a-gold);}
.ya-card:nth-child(3){border-top-color:var(--a-terra);}

.tm-card{border-top:5px solid var(--a-teal);}
.tm-card:nth-child(3n+2){border-top-color:var(--a-terra);}
.tm-card:nth-child(3n){border-top-color:var(--a-green);}

.bp-track{border-top:5px solid var(--a-teal);}
.bp-track:nth-child(2){border-top-color:var(--a-terra);}
.bp-track:nth-child(3){border-top-color:var(--a-gold);}

.le-mod{border-top:5px solid var(--a-teal);}
.le-mod:nth-child(3n+2){border-top-color:var(--a-terra);}
.le-mod:nth-child(3n){border-top-color:var(--a-green);}

.bl-value{border-left:6px solid var(--a-teal);}
.bl-value:nth-child(3n+2){border-left-color:var(--a-terra);}
.bl-value:nth-child(3n){border-left-color:var(--a-gold);}

.gr-step{border-top:5px solid var(--a-teal);}
.gr-step:nth-child(2){border-top-color:var(--a-terra);}
.gr-step:nth-child(3){border-top-color:var(--a-green);}

/* ---------- seams: a colour edge where big blocks meet ---------- */
.ng-hero,.hero{border-bottom:7px solid var(--a-teal);}
.gv-statement{border-top:4px solid var(--a-gold);border-bottom:4px solid var(--a-gold);}
.ab-questions{border-top:7px solid var(--a-gold);}
.bl-journey{border-top:7px solid var(--a-teal);}
.ya-stay{border-top:7px solid var(--a-gold);}
/* Strip edges follow the page they sit on: gold for students, teal for the
   visit page, matching the seam under each hero. */
.yth-strip{border-top:6px solid var(--a-gold);border-bottom:6px solid var(--a-gold);}
.vs-strip{border-top:6px solid var(--a-teal);border-bottom:6px solid var(--a-teal);}

/* ---------- accordion markers ---------- */
.fs-qs summary::after,.bl-item summary::after{color:var(--a-terra);}

/* ---------- small labels and rules that were flat teal ---------- */
.sv-point{border-top-color:var(--line);}
.sv-point__ref{color:var(--a-teal-t) !important;}
.bl-refs{color:var(--a-teal-t) !important;}

/* Eyebrow labels outside the numbered sections stay text, not chips, and take
   the darker teal. The original light --kids (#6E9FB0) only managed 2.4:1 on
   white, so this fixes a pre-existing legibility problem at the same time. */
.ns-cat__num{color:var(--a-teal-t);}
.bl-journey .ns-cat__num,.ya-stay .ns-cat__num,.le-panel--dark .ns-cat__num,
.ab-questions .ns-cat__num{color:var(--muted-2);}

/* ==========================================================================
   Whole-card click targets, site-wide.

   The "stretched link" pattern: a card's existing link stays the one real
   link, and a transparent pseudo-element extends its hit area over the whole
   card. No wrapper anchor, so no nested links, and a screen reader still
   announces one link per card using the button's own label.

   Everything is gated behind :has(a) so cards WITHOUT a link never get a
   pointer cursor or a hover lift. That matters: 36 of the 57 .ns-card
   instances are role cards or "coming soon" panels with nothing to click.
   Where :has() is unsupported the rules simply do not apply and the button
   keeps working on its own.

   .bp-track and .le-mod are already <button> elements wrapping their whole
   card, so they need nothing.
   ========================================================================== */
.ng-card:has(a),.gr-card:has(a),.ns-card:has(a),
.or-tile:has(a),.ya-card:has(a),.tm-card:has(a),.gr-step:has(a){
  position:relative;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease;}

/* the inner wrapper must not become the containing block, or the stretched
   area would stop at the padded box instead of covering the card */
.ng-card__body,.gr-card__body{position:static;}

.ng-card:has(a) a::after,.gr-card:has(a) a::after,.ns-card:has(a) a::after,
.or-tile:has(a) a::after,.ya-card:has(a) a::after,.tm-card:has(a) a::after,
.gr-step:has(a) a::after{
  content:"";position:absolute;inset:0;z-index:3;}

/* hover and focus feedback, so a clickable card looks clickable */
.ng-card:has(a):hover,.gr-card:has(a):hover,.ns-card:has(a):hover,
.or-tile:has(a):hover,.ya-card:has(a):hover,.tm-card:has(a):hover,
.gr-step:has(a):hover{transform:translateY(-4px);
  box-shadow:0 18px 50px rgba(0,0,0,.28);}

.ng-card:has(a):focus-within,.gr-card:has(a):focus-within,.ns-card:has(a):focus-within,
.or-tile:has(a):focus-within,.ya-card:has(a):focus-within,.tm-card:has(a):focus-within,
.gr-step:has(a):focus-within{transform:translateY(-4px);}

/* hovering the card flips its button, since the button is what you activate */
.ng-card:hover .btn--invert,.gr-card:hover .btn--invert{background:var(--ink);color:#fff;}
.ns-card:has(a):hover .btn--outline,.or-tile:hover .btn--outline,
.ya-card:hover .btn--outline,.gr-step:hover .btn--outline{
  background:var(--a-teal);border-color:var(--a-teal);color:#fff;}
.ns-cat .ns-card:has(a):hover .btn--outline{
  background:var(--accent);border-color:var(--accent);color:#fff;}

/* focus ring belongs on the card, not the small button */
.ng-card a:focus-visible::after,.gr-card a:focus-visible::after,
.ns-card a:focus-visible::after,.or-tile a:focus-visible::after,
.ya-card a:focus-visible::after,.tm-card a:focus-visible::after,
.gr-step a:focus-visible::after{
  outline:3px solid var(--a-teal);outline-offset:-3px;border-radius:10px;}