@charset "utf-8";
/* ===========================================================================
   Chenal Valley Baptist Church — design system
   ---------------------------------------------------------------------------
   Palette is derived from the 2019 logo and nothing else: the centre cross is
   #BF1E2E, the wordmark is black. Measured contrast (see brand guidelines):
     crimson  on white 6.10:1 · on warm 5.72:1   -> AA for BODY text
     crimson  on charcoal        2.87:1          -> FAILS. Dark grounds must use
                                                    --crimson-lt (7.05:1).
   That light/dark split is the single rule most easily broken here. There are
   deliberately TWO accent tokens; never "simplify" them into one.
   =========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root{
  --crimson:      #BF1E2E;   /* brand accent — light grounds, AA body text     */
  --crimson-deep: #8E1622;   /* hover / pressed                                */
  --crimson-lt:   #F2848E;   /* accent on DARK grounds only                    */

  --ink:          #14100F;   /* body text — warm near-black, softer than #000  */
  --ink-soft:     #4A4442;   /* secondary text, 9.56:1 on white                */
  --paper:        #FFFFFF;
  --warm:         #FAF7F4;   /* section wash                                   */
  --warm-deep:    #F2ECE6;
  --line:         #E8E2DC;
  --charcoal:     #1C1917;   /* footer + dark panels                           */
  --charcoal-2:   #2A2522;

  --font-head: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  /* Brush script echoing the "Chenal Valley" lettering in the church's own logo.
     Used ONLY as an accent line above a display heading — never for body copy,
     never for anything that has to be read at small size. */
  --font-script: "Yellowtail", "Brush Script MT", cursive;

  --nav-h: 76px;
  --wrap: 1180px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(20,16,15,.05), 0 8px 28px -12px rgba(20,16,15,.16);
  --shadow-lg: 0 2px 4px rgba(20,16,15,.05), 0 24px 56px -20px rgba(20,16,15,.24);
}

/* ---- 2. Reset ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}          /* kills the 8px edge slivers under full-bleed rows */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Declared BEFORE any width/height attribute exists on an <img>, so the UA's
   presentational hints can never stretch a picture (the 1.93x footer-logo bug). */
img,svg,video{max-width:100%;height:auto;display:block}
body{
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.7;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);margin:0 0 .5em;line-height:1.15;
  font-weight:700;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(2.25rem,1.5rem + 3.2vw,3.75rem);letter-spacing:-.03em}
/* The hero H1 carries the church's full slogan (a sentence, not a phrase), so it
   needs a smaller step and tighter leading than a page H1 or it dominates the fold. */
.hero__title{font-size:clamp(1.9rem,1.15rem + 2.5vw,2.9rem);line-height:1.14}
h2{font-size:clamp(1.75rem,1.25rem + 2.1vw,2.75rem)}
h3{font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem)}
h4{font-size:1.125rem}
p{margin:0 0 1.15em}
a{color:var(--crimson);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{color:var(--crimson-deep)}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin-bottom:.4em}
:focus-visible{outline:3px solid var(--crimson);outline-offset:3px;border-radius:3px}
::selection{background:var(--crimson);color:#fff}

/* ---- 3. Layout helpers -------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.wrap--narrow{max-width:760px}
.section{padding-block:clamp(3.5rem,7vw,6rem)}
.section--warm{background:var(--warm)}
.section--dark{background:var(--charcoal);color:#fff}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
/* ⚠ :not(.btn) is load-bearing. `.section--dark a` is (0,1,1) and `.btn--primary`
   is only (0,1,0), so without this the dark-ground accent colour won the cascade
   and painted --crimson-lt text onto the crimson button — 2.46:1, unreadable.
   Caught by PSI's color-contrast audit; it is the same specificity trap that has
   shipped three times on this fleet. Re-assert EVERY property the winning
   selector sets, and verify the COMPUTED value, never the declaration. */
.section--dark a:not(.btn){color:var(--crimson-lt)}
.section--dark .btn--primary{background:var(--crimson);color:#fff}
.section--dark .btn--primary:hover{background:var(--crimson-deep);color:#fff}
.section--dark p{color:#E4DFDA}
.eyebrow{font-family:var(--font-head);font-weight:700;font-size:.8125rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--crimson);margin:0 0 .75rem}
.section--dark .eyebrow{color:var(--crimson-lt)}
.lede{font-size:clamp(1.125rem,1.02rem + .45vw,1.3125rem);line-height:1.65;color:var(--ink-soft)}
.section--dark .lede{color:#D8D2CC}
.center{text-align:center}

/* ── Display type ──────────────────────────────────────────────────────────
   The house display treatment: light-weight, WIDELY letterspaced caps, with an
   optional script accent line above it. Letterspacing this wide only works at
   large sizes and low weight — it is deliberately not available to h3/h4.      */
.display{font-family:var(--font-head);font-weight:300;text-transform:uppercase;
  letter-spacing:.16em;line-height:1.08;margin:0}
.display--xl{font-size:clamp(2.1rem,1.1rem + 4.4vw,5rem);letter-spacing:.13em}
.display--lg{font-size:clamp(1.7rem,1.1rem + 2.6vw,3rem)}
.display--sm{font-size:clamp(1.25rem,1rem + 1.2vw,1.85rem);letter-spacing:.2em}
.script{font-family:var(--font-script);font-weight:400;text-transform:none;
  letter-spacing:0;line-height:1;color:var(--crimson);
  font-size:clamp(1.5rem,1.1rem + 1.8vw,2.5rem)}
.section--dark .script,.tile .script,.hero-full .script{color:var(--crimson-lt)}
.kicker{font-family:var(--font-head);font-weight:600;font-size:.78rem;
  letter-spacing:.26em;text-transform:uppercase;margin:0 0 .9rem;color:var(--crimson)}
.hero-full .kicker,.tile .kicker,.section--dark .kicker{color:#fff;opacity:.92;
  text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* ── Full-bleed cinematic hero ─────────────────────────────────────────────
   ⚠ The photograph is a 960px source upscaled to 1920. That is only acceptable
   BECAUSE of the scrim below — the eye reads the display type, not the brick.
   Do not remove the scrim to "show the photo better"; it is load-bearing.      */
.hero-full{position:relative;min-height:clamp(520px,78vh,760px);display:grid;
  place-items:center;text-align:center;overflow:hidden;background:var(--charcoal)}
.hero-full__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:0}
/* On tall/narrow phones the wide sign photo was trimmed hard at the sides,
   cutting the church sign wording off both edges. Rather than crop or letterbox
   the photo behind the text, on phones we STACK the hero: the photo sits at the
   top at its full width (nothing cut off, whole sign visible), and the text
   block drops below it on the solid charcoal ground. The scrim overlay is only
   there to make text readable OVER the photo, so it is switched off here. */
@media (max-width:640px){
  .hero-full{display:block;min-height:0;overflow:visible}
  .hero-full__bg{position:static;width:100%;height:auto;object-fit:contain}
  .hero-full::after{display:none}
  .hero-full__in{padding:clamp(2rem,7vw,2.75rem) clamp(1.1rem,4vw,2rem) clamp(2.5rem,8vw,3.25rem)}
}
.hero-full::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,16,15,.62) 0%,rgba(20,16,15,.45) 42%,rgba(20,16,15,.78) 100%)}
.hero-full__in{position:relative;z-index:2;padding:clamp(4rem,9vw,6.5rem) clamp(1.1rem,4vw,2rem);
  max-width:1100px;color:#fff}
.hero-full__in .display,.hero-full__in h1,.hero-full__in h2{color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.34)}
.hero-full__in .script{display:block;margin-bottom:.35rem;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.hero-full__sub{margin:1.6rem auto 0;max-width:56ch;font-size:clamp(1.02rem,.96rem + .35vw,1.2rem);
  line-height:1.65;color:#EDE8E3;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero-full .btn-row{justify-content:center;margin-top:2.1rem}
.hero-full .btn--outline{border-color:#fff;color:#fff;background:rgba(255,255,255,.06)}
.hero-full .btn--outline:hover{background:#fff;color:var(--ink)}
.hero-full .btn--primary{background:var(--crimson);color:#fff}
.hero-full .btn--primary:hover{background:var(--crimson-deep);color:#fff}

/* Service strip pinned under the hero */
.hero-strip{background:var(--charcoal);color:#fff;border-top:1px solid rgba(255,255,255,.1)}
.hero-strip__in{display:flex;flex-wrap:wrap;gap:.4rem 2.5rem;justify-content:center;
  align-items:center;padding:1.15rem 0;font-family:var(--font-head);font-size:.95rem}
.hero-strip b{font-weight:700;letter-spacing:.04em}
.hero-strip span{color:#B9B0A8}
.hero-strip a{color:#fff;text-decoration:none;border-bottom:1px solid var(--crimson-lt);padding-bottom:1px}

/* ── Photo-tile mosaic ─────────────────────────────────────────────────────
   Image tiles with a tinted scrim and display type over them. Every tile is a
   real <a> wrapping the whole card, so the entire tile is the target.          */
.mosaic{display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:680px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(270px,28vw,340px);padding:clamp(1.6rem,2.8vw,2.25rem);
  overflow:hidden;text-decoration:none;color:#fff;isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .5s ease}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,16,15,.52) 0%,rgba(20,16,15,.66) 42%,rgba(20,16,15,.90) 100%);
  transition:background .35s ease}
.tile:hover img{transform:scale(1.045)}
.tile:hover::before{background:linear-gradient(180deg,rgba(142,22,34,.62) 0%,rgba(20,16,15,.92) 100%)}
.tile--accent::before{background:linear-gradient(180deg,rgba(142,22,34,.72) 0%,rgba(20,16,15,.92) 100%)}
/* ⚠ color:#fff is NOT redundant. .tile sets color on the ANCESTOR, but the base
   `h1,h2,h3,...{color:var(--ink)}` rule applies DIRECTLY to this h3 — and a direct
   rule always beats an inherited value regardless of specificity. Without this the
   titles render ink-on-photograph and are effectively invisible. The .script spans
   escaped it only because `.tile .script` sets their colour explicitly. */
.tile__t{color:#fff;font-family:var(--font-head);font-weight:400;text-transform:uppercase;
  letter-spacing:.1em;font-size:clamp(1.4rem,1.1rem + 1vw,2rem);line-height:1.1;margin:0;
  text-shadow:0 2px 16px rgba(0,0,0,.55)}
.tile__t .script{text-shadow:0 2px 16px rgba(0,0,0,.6)}
.tile__s{margin:.6rem 0 0;font-size:.95rem;color:#EDE8E3;max-width:34ch;line-height:1.55;
  text-shadow:0 1px 10px rgba(0,0,0,.6)}
.tile__go{margin-top:1.1rem;width:40px;height:40px;border:1px solid rgba(255,255,255,.55);
  display:grid;place-items:center;transition:background-color .25s,border-color .25s}
.tile:hover .tile__go{background:var(--crimson);border-color:var(--crimson)}
.tile__go svg{width:17px;height:17px}

/* ── Section heading block (centred, script + display) ─────────────────────── */
.shead{text-align:center;max-width:720px;margin:0 auto clamp(2.25rem,4vw,3.25rem)}
.shead .display{margin-bottom:.6rem}
.shead p{color:var(--ink-soft)}

/* Mission figure — a PORTRAIT photograph, deliberately taller than the text
   column it sits beside. Capped by aspect-ratio rather than a fixed height so it
   scales, and `height:auto` is re-asserted because the width/height attributes
   on the img would otherwise fight object-fit. */
.mission-fig{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.mission-fig img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 38%}
@media (min-width:760px){.mission-fig img{aspect-ratio:4/5}}
.section--dark .shead p{color:#D8D2CC}
.stack-sm>*+*{margin-top:.75rem}

/* Skip link — first focusable element in <body> */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--crimson);color:#fff;
  padding:.75rem 1.25rem;font-family:var(--font-head);font-weight:700;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---- 4. The three-cross motif -------------------------------------------
   Lifted from the logo (outer crosses ink, centre crimson) and reused as the
   site's one recurring graphic device, so the mark and the page agree.        */
.crosses{display:flex;align-items:flex-end;justify-content:center;gap:.42rem;height:30px}
.crosses i{position:relative;display:block;width:2px;background:var(--ink);border-radius:1px}
.crosses i::before{content:"";position:absolute;left:50%;translate:-50% 0;height:2px;
  background:inherit;border-radius:1px}
.crosses i:nth-child(1),.crosses i:nth-child(3){height:20px}
.crosses i:nth-child(1)::before,.crosses i:nth-child(3)::before{top:5px;width:11px}
.crosses i:nth-child(2){height:30px;background:var(--crimson);width:2.5px}
.crosses i:nth-child(2)::before{top:7px;width:15px}
.section--dark .crosses i{background:#8A817A}
.section--dark .crosses i:nth-child(2){background:var(--crimson-lt)}
.rule{display:flex;align-items:center;gap:1rem;margin-block:1.5rem}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--line)}
.section--dark .rule::before,.section--dark .rule::after{background:#3A3330}

/* ---- 5. Buttons --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-head);font-weight:600;font-size:1rem;letter-spacing:.01em;
  padding:.85rem 1.6rem;min-height:48px;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s,transform .18s}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--crimson);color:#fff}
.btn--primary:hover{background:var(--crimson-deep);color:#fff}
.btn--outline{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--outline:hover{background:var(--ink);color:#fff}
.section--dark .btn--outline{border-color:#fff;color:#fff}
.section--dark .btn--outline:hover{background:#fff;color:var(--ink)}
.btn--ghost{color:var(--crimson);padding-inline:.25rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* ---- 6. Header ---------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:1rem;min-height:var(--nav-h);max-width:1280px}
.hdr__logo{flex:0 0 auto;display:flex;align-items:center}
.hdr__logo img{height:46px;width:auto}
.hdr__nav{display:flex;align-items:center;gap:.25rem;margin-left:auto}
.hdr__nav a{font-family:var(--font-head);font-weight:500;font-size:.9rem;color:var(--ink-soft);
  text-decoration:none;padding:.5rem .58rem;border-radius:8px;white-space:nowrap;transition:color .15s,background-color .15s}
.hdr__nav a:hover{color:var(--ink);background:var(--warm-deep)}
.hdr__nav a[aria-current="page"]{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--crimson)}
.hdr__cta{display:flex;align-items:center;gap:.5rem;margin-left:.5rem;flex:0 0 auto}
.hdr__cta .btn{white-space:nowrap;padding:.7rem 1.15rem;font-size:.9rem;min-height:44px}
/* Give: outlined in the brand crimson so it reads as a second, distinct action
   next to the solid primary CTA rather than competing with it. */
.btn--give{border-color:var(--crimson);color:var(--crimson);background:transparent;gap:.4rem}
.btn--give:hover{background:var(--crimson);color:#fff;border-color:var(--crimson)}
.hdr__phone{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-head);
  font-weight:600;font-size:.9rem;color:var(--ink);text-decoration:none;padding:.5rem .55rem;
  border-radius:8px;white-space:nowrap}
.hdr__phone:hover{color:var(--crimson);background:var(--warm-deep)}
.hdr__burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:10px;width:46px;height:46px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.hdr__burger svg{width:22px;height:22px}
.mnav{display:none;border-top:1px solid var(--line);background:var(--paper);padding:.5rem 0 1.25rem}
.mnav.is-open{display:block}
/* ⚠ :not(.btn) is load-bearing — this is the FOURTH time this family of bug has
   appeared in this build. `.mnav a` is (0,1,1) and `.btn` only (0,1,0), so without
   the exclusion this rule clobbered every button in the mobile menu: display:block
   killed the flex centring (text jumped left), the border-bottom broke the pill
   shape, and color:var(--ink) painted DARK text onto the crimson Give pill.
   Nothing on desktop showed it, because the menu is display:none there — which is
   also why the contrast sweep missed it. Verify with the menu OPEN. */
.mnav a:not(.btn){display:block;font-family:var(--font-head);font-weight:500;font-size:1.0625rem;
  color:var(--ink);text-decoration:none;padding:.8rem .25rem;border-bottom:1px solid var(--line)}
.mnav a:not(.btn)[aria-current="page"]{color:var(--crimson);font-weight:700}
/* Re-assert every property the buttons need, rather than relying on inheritance. */
.mnav .btn{display:flex;width:100%;margin-top:.75rem;text-align:center;
  border-bottom:0;padding:.85rem 1.6rem;min-height:48px}
.mnav .btn--primary{background:var(--crimson);color:#fff;border-color:transparent}
.mnav .btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.mnav .btn--give{background:transparent;color:var(--crimson);border-color:var(--crimson)}
@media (max-width:1150px){
  .hdr__nav,.hdr__cta{display:none}
  .hdr__burger{display:inline-flex}
}

/* ---- 7. Breadcrumb ------------------------------------------------------ */
.bc{background:var(--warm);border-bottom:1px solid var(--line);font-family:var(--font-head);font-size:.875rem}
.bc ol{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;list-style:none;margin:0;padding:.7rem 0}
.bc li{margin:0;display:flex;align-items:center;gap:.4rem;color:var(--ink-soft)}
.bc a{color:var(--ink-soft);text-decoration:none;display:inline-block;padding:.15rem 0;min-height:24px}
.bc a:hover{color:var(--crimson);text-decoration:underline}
.bc li+li::before{content:"";width:5px;height:5px;border-right:1.5px solid #B9B0A8;
  border-bottom:1.5px solid #B9B0A8;rotate:-45deg;translate:0 -1px}
.bc [aria-current="page"]{color:var(--ink);font-weight:600}

/* ---- 8. Hero ------------------------------------------------------------
   Split, not full-bleed. The best available exterior photograph is 960px wide;
   a 100vw background would be visibly soft, whereas a ~600px panel is sharp.  */
.hero{background:var(--warm);border-bottom:1px solid var(--line);overflow:hidden}
.hero__in{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);
  align-items:center;padding-block:clamp(3rem,6vw,5.25rem)}
@media (min-width:900px){.hero__in{grid-template-columns:1.02fr .98fr}}
.hero__title{margin:0 0 1rem}
.hero__title em{font-style:normal;color:var(--crimson);display:block}
.hero__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.hero__media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.hero__badge{position:absolute;left:1rem;bottom:1rem;right:1rem;display:flex;flex-wrap:wrap;
  gap:.35rem 1rem;background:rgba(28,25,23,.86);backdrop-filter:blur(8px);color:#fff;
  border-radius:12px;padding:.7rem .95rem;font-family:var(--font-head);font-size:.875rem}
.hero__badge b{color:#fff;font-weight:700}
.hero__badge span{color:#D8D2CC}

/* ---- 9. Page hero (interior pages) -------------------------------------- */
/* Interior page header. The photograph is a CSS BACKGROUND, not an <img> — an
   img under a scrim has previously failed to paint on this fleet while the DOM
   insisted it was visible. Set per page with style="--phero-img:url(...)"; with
   no image it degrades to the flat charcoal band, which is a valid state. */
.phero{position:relative;background:var(--charcoal);color:#fff;
  padding-block:clamp(3.25rem,6vw,5.25rem);overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--phero-img,none);background-size:cover;background-position:center;
  opacity:.42}
.phero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,16,15,.55) 0%,rgba(20,16,15,.82) 100%)}
.phero > *{position:relative;z-index:2}
.phero h1{color:#fff;margin-bottom:.5rem}
.phero p{color:#E4DFDA;margin:0;max-width:62ch;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.phero .eyebrow,.phero .kicker{color:#fff;opacity:.9}
/* Page titles take the house display treatment, matching the homepage hero. */
.phero h1{font-family:var(--font-head);font-weight:300;text-transform:uppercase;
  letter-spacing:.11em;line-height:1.1;
  font-size:clamp(1.85rem,1.2rem + 2.4vw,3.1rem);text-shadow:0 2px 20px rgba(0,0,0,.45)}
.phero .script{display:block;margin-bottom:.15rem}

/* ---- 10. Cards ---------------------------------------------------------- */
.grid{display:grid;gap:clamp(1.1rem,2.2vw,1.75rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid--3{grid-template-columns:1fr}
@media (min-width:700px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grid--4{grid-template-columns:1fr}
@media (min-width:640px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.35rem,2.4vw,1.85rem);box-shadow:var(--shadow);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.card--link:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#D9D0C8}
.card h3{margin-bottom:.4rem}
.card p:last-child{margin-bottom:0}
.card__icon{width:44px;height:44px;border-radius:11px;background:var(--warm-deep);
  display:grid;place-items:center;margin-bottom:1rem;color:var(--crimson)}
.card__icon svg{width:22px;height:22px}
.section--dark .card{background:var(--charcoal-2);border-color:#3A3330}
.section--dark .card p{color:#D8D2CC}
.section--dark .card__icon{background:#3A3330;color:var(--crimson-lt)}

/* ---- 11. Service times -------------------------------------------------- */
.times{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:820px){.times{grid-template-columns:repeat(3,minmax(0,1fr))}}
.times__day{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.times__hd{background:var(--charcoal);color:#fff;padding:.9rem 1.25rem;
  font-family:var(--font-head);font-weight:700;font-size:1.0625rem;letter-spacing:-.01em}
.times__body{padding:.5rem 1.25rem 1.25rem}
.times__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--line)}
.times__row:last-child{border-bottom:0}
.times__row dt{font-family:var(--font-head);font-weight:600;color:var(--ink);margin:0}
.times__row dd{margin:0;font-variant-numeric:tabular-nums;color:var(--crimson);
  font-family:var(--font-head);font-weight:600;white-space:nowrap}
.times__note{font-size:.875rem;color:var(--ink-soft);margin:.35rem 0 0}

/* ---- 12. Leadership ----------------------------------------------------- */
.people{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.person{text-align:center}
.person__ph{width:118px;height:118px;border-radius:50%;margin:0 auto .9rem;object-fit:cover;
  background:var(--warm-deep);border:3px solid var(--paper);box-shadow:var(--shadow);overflow:hidden}
/* A photo dropped inside the circle must fill it and be clipped to the round
   shape — without this the <img> renders at its own aspect ratio as a square. */
.person__ph img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* Initials are DECORATIVE but VISIBLE, so 1.4.3 still applies — aria-hidden does
   not exempt them. The old #B9B0A8 measured 1.82:1 on the warm circle. Brand
   crimson is 5.16:1 and reads as intentional rather than as a faded fallback. */
.person__ph--none{display:grid;place-items:center;color:var(--crimson);font-family:var(--font-head);
  font-weight:700;font-size:2rem;letter-spacing:.02em;background:var(--warm-deep)}
.person h3{font-size:1.125rem;margin-bottom:.15rem}
.person p{font-size:.9375rem;color:var(--ink-soft);margin:0}

/* ---- 13. Forms ---------------------------------------------------------- */
.form{display:grid;gap:1.1rem}
.field{display:grid;gap:.4rem}
.field label{font-family:var(--font-head);font-weight:600;font-size:.9375rem;color:var(--ink)}
.field .req{color:var(--crimson)}
.field input,.field textarea,.field select{
  font-family:var(--font-body);font-size:1rem;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line);border-radius:10px;padding:.8rem .95rem;width:100%;
  min-height:48px;transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--crimson);
  box-shadow:0 0 0 3px rgba(191,30,46,.14)}
.field__hint{font-size:.8125rem;color:var(--ink-soft);margin:0}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.form__note{font-size:.8125rem;color:var(--ink-soft);margin:0}
.alert{border-radius:10px;padding:.9rem 1.1rem;font-size:.9375rem;margin:0 0 1.25rem;border:1.5px solid}
.alert--err{background:#FDF1F2;border-color:#F0C4C8;color:#8E1622}
.alert--ok{background:#F0F7F1;border-color:#C2DFC7;color:#1F5C2B}

/* ---- 14. Gallery -------------------------------------------------------- */
.gal{display:grid;gap:.9rem;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.gal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.gal{grid-template-columns:1fr}}
.gal__link{display:block;border-radius:var(--radius);overflow:hidden;background:var(--warm-deep);
  box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.gal__link:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.gal__link img{width:100%;aspect-ratio:4/3;object-fit:cover}
.lb{position:fixed;inset:0;z-index:300;background:rgba(20,16,15,.94);display:none;
  align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)}
.lb[open],.lb.is-open{display:flex}
.lb img{max-width:100%;max-height:82vh;width:auto;border-radius:8px;box-shadow:var(--shadow-lg)}
.lb__cap{color:#E4DFDA;font-family:var(--font-head);font-size:.9375rem;text-align:center;margin-top:1rem}
.lb__btn{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  color:#fff;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  transition:background-color .15s}
.lb__btn:hover{background:rgba(255,255,255,.24)}
.lb__x{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lb__prev{left:clamp(.5rem,2vw,2rem);top:50%;translate:0 -50%}
.lb__next{right:clamp(.5rem,2vw,2rem);top:50%;translate:0 -50%}
.lb__btn svg{width:22px;height:22px}

/* ---- 15. Calendar ------------------------------------------------------- */
.cal__month{margin-bottom:2.25rem}
.cal__month h3{display:flex;align-items:baseline;gap:.75rem;padding-bottom:.6rem;
  border-bottom:2px solid var(--crimson);margin-bottom:.25rem}
.cal__ev{display:flex;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.cal__ev:last-child{border-bottom:0}
.cal__d{flex:0 0 auto;min-width:3rem;font-family:var(--font-head);font-weight:700;
  color:var(--crimson);font-variant-numeric:tabular-nums}
.cal__t{margin:0}

/* ---- 16. Prose ---------------------------------------------------------- */
.prose h2{margin-top:2.5rem}
.prose h3{margin-top:1.85rem}
.prose>*:first-child{margin-top:0}
.prose blockquote{margin:2rem 0;padding:1.5rem 1.75rem;background:var(--warm);
  border-left:4px solid var(--crimson);border-radius:0 var(--radius) var(--radius) 0;
  font-size:1.1875rem;line-height:1.6;color:var(--ink)}
.prose blockquote p:last-child{margin-bottom:0}
.prose figure{margin:2rem 0}
.prose figure img{border-radius:var(--radius);box-shadow:var(--shadow)}
.prose figcaption{font-size:.875rem;color:var(--ink-soft);margin-top:.6rem;font-family:var(--font-head)}

/* ---- 17. Footer --------------------------------------------------------- */
.ftr{background:var(--charcoal);color:#D8D2CC;padding-block:clamp(3rem,5vw,4.25rem) 0}
.ftr a{color:#D8D2CC;text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr__grid{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:1fr}
@media (min-width:760px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr}}
.ftr__logo{height:52px;width:auto;margin-bottom:1rem}
.ftr__h{font-family:var(--font-head);font-weight:700;color:#fff;font-size:.8125rem;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem}
.ftr nav{margin:0}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.55rem}
.ftr li a{display:inline-block;padding:.2rem 0;min-height:24px}
/* Links inside an <address> are inline and were measuring 23px — just under the
   WCAG 2.2 24px target minimum. Applies site-wide (footer, contact, service times). */
address a{display:inline-block;padding:.15rem 0;min-height:24px}
/* A paragraph whose ONLY content is a link is a standalone control, not an inline
   link in a sentence — WCAG 2.5.8's inline exception does not cover it, and it
   measured 23px. Links genuinely inside prose are left alone. */
.card p > a:only-child,.prose p > a:only-child{display:inline-block;padding:.15rem 0;min-height:24px}
.bc a{display:inline-block;padding:.15rem 0;min-height:24px}
.ftr__social{display:flex;gap:.6rem;margin-top:1.25rem}
.ftr__social a{width:42px;height:42px;border-radius:50%;background:#332C29;display:grid;
  place-items:center;color:#fff;transition:background-color .15s}
.ftr__social a:hover{background:var(--crimson)}
.ftr__social svg{width:19px;height:19px}
.ftr__credit{border-top:1px solid #2A2522;padding-block:1rem;text-align:center;
  font-family:var(--font-head);font-size:.8125rem;color:#8A817A;letter-spacing:.03em}
.ftr__credit a{color:#B9B0A8;text-decoration:none;font-weight:600;
  display:inline-block;padding:.15rem .1rem;min-height:24px}
.ftr__credit a:hover{color:#fff;text-decoration:underline}
.ftr__bar{border-top:1px solid #332C29;margin-top:clamp(2.5rem,4vw,3.25rem);padding-block:1.5rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font-size:.875rem;font-family:var(--font-head);color:#A79E97}
.ftr__bar a{color:#A79E97}

/* ---- 18. CTA strip ------------------------------------------------------ */
.cta{background:var(--crimson);color:#fff;text-align:center}
.cta h2{color:#fff}
.cta p{color:#FBE4E6;max-width:58ch;margin-inline:auto}
.cta .btn--primary{background:#fff;color:var(--crimson)}
.cta .btn--primary:hover{background:var(--warm);color:var(--crimson-deep)}
.cta .btn--outline{border-color:rgba(255,255,255,.7);color:#fff}
.cta .btn--outline:hover{background:#fff;color:var(--crimson)}
.cta .crosses i{background:rgba(255,255,255,.75)}
.cta .crosses i:nth-child(2){background:#fff}

/* ---- 19. Misc ----------------------------------------------------------- */
.note{background:var(--warm);border:1px solid var(--line);border-left:4px solid var(--crimson);
  border-radius:0 var(--radius) var(--radius) 0;padding:1.1rem 1.35rem;font-size:.9375rem}
.note p:last-child{margin-bottom:0}
.embed{position:relative;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);background:var(--warm-deep)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--warm-deep)}
.map iframe{width:100%;height:380px;border:0;display:block}