/* ============================================================
   SOUTHERN PERFORMANCE, HOUSE STYLE
   The locked scaffold, not another alternative.

   Structure and palette come from the v3 concept Justin picked.
   Every colour below was sampled off that page rather than
   guessed: page #07121D, panel #11263E, CTA #1F7DE3, glow
   #7CC2FF, and the chrome on the headline running #EAEFF5 down
   to #B1BCCA.

   Two things are carried in from the Shop Blue concept: the
   transparent hero, where a subdued photograph sits behind the
   headline instead of beside it, and the brand wall that lights
   up under the cursor.

   The top bar is deliberately almost empty. Contact, prayer
   requests, the phone number and Shop. Everything else lives
   behind MENU on the left.
   ============================================================ */
:root{
  --bg:#07121D;          /* page */
  --panel:#11263E;       /* cards, stats, drawer */
  --panel-2:#0C2038;     /* ribbon, hovers */
  --deep:#050D16;        /* footer */
  --line:#1B3350;
  --fg:#EEF3F8;
  --fg-2:#8FA3B8;
  --blue:#1F7DE3;        /* buttons */
  --blue-hi:#3E97F5;
  --glow:#7CC2FF;        /* the glowing headline and accents */
  /* Six stops with a hard dark band at 50%. That step is the whole trick:
     it reads as the edge catching light, and a smooth ramp does not. */
  --chrome:linear-gradient(180deg,#f4f8fc 0%,#c9d3df 38%,#79879a 50%,#aab7c6 55%,
           #e6edf5 78%,#98a5b5 100%);
  /* Verbatim from the v3 stylesheet. Bahnschrift is a Windows system font,
     which is why nothing off Google Fonts looked right. font-stretch:condensed
     is the other half of it: Bahnschrift is variable width and v3 narrows it. */
  --disp:"Bahnschrift","DIN Alternate","Arial Narrow","Franklin Gothic Medium",Arial,sans-serif;
  --body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --grid:linear-gradient(rgba(47,155,255,.05) 1px,transparent 1px),
         linear-gradient(90deg,rgba(47,155,255,.05) 1px,transparent 1px);
  --gut:clamp(18px,4vw,52px);
  --r:4px;
  --fast:.18s cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--fg);font-family:var(--body);font-size:16px;
  background:var(--bg) radial-gradient(1300px 700px at 75% -10%,rgba(47,155,255,.13),transparent 70%) no-repeat;
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-stretch:condensed;font-weight:700;
  font-style:italic;text-transform:uppercase;line-height:1.02;letter-spacing:.01em}
p{margin:0 0 1em}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut)}

/* the small tracked label that sits over every headline */
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--body);font-size:17px;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--glow);margin-bottom:12px}
.eyebrow::before{content:'';width:20px;height:2px;background:var(--glow);
  box-shadow:0 0 8px rgba(124,194,255,.9)}

/* the glow. Used on one line of the hero and on accents, never
   on body copy, or the page starts to hum. */
/* One wide, weak glow and nothing near the letterform. The 14px shadow that
   was here before bled into the strokes and made the whole line look soft. */
.glow{color:var(--glow);text-shadow:0 0 34px rgba(47,155,255,.5)}
.chrome{background:var(--chrome);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* v3 cuts its buttons into a parallelogram rather than rounding them. */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--blue);color:#fff;
  border:0;padding:13px 26px;text-decoration:none;
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
  font-family:var(--disp);font-stretch:condensed;font-size:15px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:var(--fast)}
.btn:hover{background:var(--blue-hi);border-color:var(--blue-hi);
  box-shadow:0 0 22px rgba(62,151,245,.4)}
.btn--ghost{background:rgba(21,39,67,.5);color:var(--fg);
  box-shadow:inset 0 0 0 1px rgba(120,180,245,.3)}
.btn--ghost:hover{background:transparent;border-color:var(--glow);color:var(--glow);
  box-shadow:0 0 18px rgba(124,194,255,.22)}
/* Long and short labels for the same button. The short one only appears on narrow
   screens, where the full wording would push the logo out of the header. */
.btn__sm{display:none}

/* ---------- ribbon ---------- */
.ribbon{background:var(--panel-2);border-bottom:1px solid var(--line);text-align:center;
  padding:7px 14px;font-size:11.5px;letter-spacing:.1em;color:var(--fg-2)}
.ribbon b{color:var(--glow);font-weight:600}

/* ---------- top bar, deliberately almost empty ---------- */
.top{position:sticky;top:0;z-index:60;background:rgba(7,18,29,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.top__in{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:26px;
  padding:12px var(--gut);max-width:1400px;margin:0 auto}
/* A grid item stretches to its track by default, which is why this was a long
   bar reaching to the logo rather than a button. */
.menubtn{justify-self:start;display:inline-flex;align-items:center;gap:8px;background:transparent;
  border:1px solid var(--line);border-radius:var(--r);color:var(--fg);padding:10px 16px;
  font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;transition:var(--fast)}
.menubtn:hover{border-color:var(--glow);color:var(--glow);box-shadow:0 0 16px rgba(124,194,255,.2)}
.menubtn i{display:block;width:15px;height:10px;position:relative}
.menubtn i::before,.menubtn i::after,.menubtn i span{content:'';position:absolute;left:0;right:0;
  height:2px;background:currentColor}
.menubtn i::before{top:0} .menubtn i span{top:4px} .menubtn i::after{bottom:0}
.top__logo{justify-self:start}
.top__logo img{height:58px;width:auto}
/* Address and hours, so the whole right hand side reads as one block:
   where we are, when we are open, what to call. */
.deets{justify-self:start;display:flex;align-items:center;gap:22px;margin-left:10px}
.deets div{display:flex;flex-direction:column;line-height:1.3}
.deets b{font-size:12.5px;font-weight:600;color:var(--fg)}
.deets span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6E8399}
.deets i{width:1px;height:26px;background:var(--line)}
.deets a{text-decoration:none;transition:var(--fast)}
.deets a:hover b{color:var(--glow)}
.top__right{justify-self:end;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.top__link{text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-2);padding:9px 12px;border-radius:var(--r);
  transition:var(--fast)}
.top__link:hover{color:var(--glow)}
.top__tel{text-decoration:none;font-family:var(--disp);font-style:italic;font-weight:700;
  font-size:18px;color:var(--fg);padding:0 6px}
.top__tel:hover{color:var(--glow)}

/* ---------- the left menu ---------- */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(3,8,14,.55);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .22s}
/* The panel hangs off the MENU button rather than sliding in from the page edge,
   so the button needs a positioned wrapper for it to anchor to. Being inside the
   sticky header also means it travels with the bar on scroll for free. */
.menuwrap{position:relative;justify-self:start}
.menu{position:absolute;top:calc(100% + 10px);left:0;z-index:80;
  width:min(400px,calc(100vw - 2*var(--gut)));background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 26px 64px rgba(3,8,14,.62);
  max-height:calc(100vh - 130px);overflow-y:auto;
  display:flex;flex-direction:column;
  transform-origin:top left;opacity:0;transform:translateY(-8px) scale(.985);
  pointer-events:none;transition:opacity .18s,transform .18s cubic-bezier(.4,0,.2,1)}
body.open .menu{opacity:1;transform:none;pointer-events:auto}
body.open .scrim{opacity:1;pointer-events:auto}
.closebtn{background:transparent;border:1px solid var(--line);border-radius:var(--r);color:var(--fg);
  width:36px;height:36px;font-size:19px;line-height:1;cursor:pointer;transition:var(--fast)}
.closebtn:hover{border-color:var(--glow);color:var(--glow)}
.menu nav{padding:18px 0;flex:1}
.menu nav a{display:flex;align-items:baseline;gap:14px;padding:13px 26px;text-decoration:none;
  font-family:var(--disp);font-style:italic;font-weight:700;text-transform:uppercase;
  font-size:21px;color:var(--fg);transition:var(--fast);border-left:2px solid transparent}
.menu nav a em{font-style:normal;font-family:var(--body);font-size:11px;font-weight:600;
  letter-spacing:.16em;color:var(--fg-2);width:22px}
.menu nav a:hover{background:var(--panel-2);border-left-color:var(--glow);color:var(--glow);
  text-shadow:0 0 16px rgba(124,194,255,.45)}
/* A page that is coming but is not built. Same row, same rhythm, so the shape of
   the finished site is visible, but it is a span rather than a link so nothing
   404s. Swap the span back to an <a href="/page"> as each one ships. */
.menu nav span{display:flex;align-items:baseline;gap:14px;padding:13px 26px;
  font-family:var(--disp);font-style:italic;font-weight:700;text-transform:uppercase;
  font-size:21px;color:#54677D;border-left:2px solid transparent;cursor:default}
.menu nav span em{font-style:normal;font-family:var(--body);font-size:11px;font-weight:600;
  letter-spacing:.16em;color:#3E4F63;width:22px}
.menu nav span i{margin-left:auto;font-style:normal;font-family:var(--body);
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-2);border:1px solid var(--line);border-radius:2px;padding:2px 6px;
  align-self:center}
.menu__foot{padding:20px 26px 26px;border-top:1px solid var(--line);font-size:13.5px;color:var(--fg-2)}
.menu__foot a{color:var(--fg);text-decoration:none}
.menu__foot a:hover{color:var(--glow)}
.menu__soc{display:flex;gap:8px;margin-top:14px}
.menu__soc a{width:34px;height:34px;border:1px solid var(--line);border-radius:var(--r);
  display:grid;place-items:center;font-size:11px;letter-spacing:.06em;transition:var(--fast)}
.menu__soc a:hover{border-color:var(--glow);color:var(--glow)}

/* ---------- hero, photograph behind the type ---------- */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:52% 58%;
  filter:saturate(.8) contrast(1.08) brightness(1.16)}
/* Two washes: one vertical so the type has a floor, one from the
   left so the headline never fights the picture. */
/* v3's single diagonal wash, which fades to a blue cast rather than to black.
   The vertical layer that used to sit on top of this is what was burying the car. */
.hero__bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,15,29,.95) 0%,rgba(8,15,29,.78) 42%,
             rgba(8,15,29,.4) 75%,rgba(13,92,196,.34) 100%)}
/* Fine horizontal scan, straight out of v3. Gives the photograph a surface. */
.hero__scan{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.16) 3px 4px)}
.hero__in{position:relative;z-index:2;width:100%;padding:clamp(60px,9vw,110px) 0}
.pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:100px;
  padding:7px 16px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-2);background:rgba(17,38,62,.6);margin-bottom:22px;text-decoration:none;
  transition:color .18s,border-color .18s,background .18s}
/* the pill is a link to the shop on Google Maps, so it needs an affordance and a
   focus ring; the underline the UA adds to an anchor would fight the pill shape */
a.pill:hover,a.pill:focus-visible{color:var(--fg);border-color:var(--glow);
  background:rgba(17,38,62,.85)}
a.pill:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--glow);
  box-shadow:0 0 10px var(--glow)}
.hero h1{font-size:clamp(3rem,8.2vw,6.4rem)}
.hero h1 span{display:block}
.hero p{max-width:52ch;color:#B6C6D6;font-size:clamp(15px,1.6vw,18px);margin-top:22px}
.hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel);overflow:hidden;margin-top:-38px;position:relative;z-index:3}
.stats div{padding:22px 20px;border-right:1px solid var(--line);text-align:center}
.stats div:last-child{border-right:0}
.stats b{display:block;font-family:var(--disp);font-style:italic;font-weight:800;
  font-size:clamp(24px,3.2vw,34px);line-height:1}
.stats span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-2);margin-top:8px}
.stats em{font-style:normal;color:var(--glow)}

/* ---------- generic section ---------- */
.sec{padding:clamp(48px,7vw,96px) 0}
.sec--alt{background:var(--panel-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec h2{font-size:clamp(32px,5vw,55px)}
.sec__lede{color:var(--fg-2);max-width:56ch;margin-top:14px}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(24px,4vw,42px)}
/* Text on the left, one photograph on the right. flex-wrap would let the
   picture fall underneath at desktop width, which reads as an accident. */
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,4vw,60px);align-items:center}
.split figure{margin:0}
.split img{width:100%;border:1px solid var(--line);border-radius:var(--r)}

/* ---------- service cards ---------- */
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.svc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px 20px;
  transition:var(--fast)}
.svc:hover{border-color:var(--glow);box-shadow:0 0 26px rgba(124,194,255,.14);transform:translateY(-2px)}
.svc__ico{width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r);display:grid;
  place-items:center;margin-bottom:16px;color:var(--glow);transition:var(--fast)}
.svc:hover .svc__ico{border-color:var(--glow);box-shadow:0 0 16px rgba(124,194,255,.3)}
.svc h3{font-size:19px;margin-bottom:8px}
.svc p{color:var(--fg-2);font-size:14px;margin:0}

/* ---------- the estimate modal ----------
   ShopMonkey's form lives in an overlay rather than in the page. Its own scrim, not
   the menu's, so the two never fight. The header strip stays in our palette and only
   the form itself is white, which keeps our identity on the frame around content we
   cannot restyle across the origin boundary.
   The iframe is given a real height and scrolls internally rather than being sized to
   its content: it is cross origin, and ShopMonkey's snippet posts analytics events
   but never a height, so it can never self size. */
.req{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:22px}
body.req-on .req{display:grid}
body.req-on{overflow:hidden}
.req__scrim{position:absolute;inset:0;background:rgba(3,8,14,.78);backdrop-filter:blur(4px)}
.req__panel{position:relative;display:flex;flex-direction:column;overflow:hidden;
  width:min(880px,100%);height:min(88vh,940px);background:#fff;border-radius:var(--r);
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.req__hd{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;background:var(--panel);border-bottom:1px solid var(--line)}
.req__hd h3{font-size:23px;color:var(--fg)}
.req__hd p{margin:2px 0 0;font-size:12px;color:var(--fg-2);
  font-family:var(--body);letter-spacing:.04em}
.req__bd{flex:1;background:#fff;min-height:0}
.req__bd iframe{display:block;width:100%;height:100%;border:0}
/* Full bleed on a phone. A centred card with margins wastes the only space there is. */
@media(max-width:640px){
  .req{padding:0}
  .req__panel{width:100%;height:100%;border-radius:0}
}

/* ---------- featured deal, sits right under the stats ---------- */
.deal{display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,28px);
  flex-wrap:wrap;background:linear-gradient(100deg,rgba(31,125,227,.18),rgba(124,194,255,.05));
  border:1px solid rgba(124,194,255,.35);border-radius:var(--r);
  padding:clamp(20px,3vw,30px) clamp(22px,3.5vw,34px);margin:clamp(30px,4.5vw,46px) 0}
.deal h3{font-size:clamp(23px,2.9vw,30px);margin-bottom:6px}
.deal p{color:#B6C6D6;font-size:14.5px;margin:0;max-width:52ch}
.deal .btn{flex:0 0 auto}

/* ---------- instagram feed ---------- */
.ig{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,16px)}
.ig a{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--r);text-decoration:none}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ig a:hover img{transform:scale(1.06)}
.ig__cap{position:absolute;inset:auto 0 0 0;padding:16px 16px 12px;opacity:0;transition:opacity var(--fast);
  background:linear-gradient(0deg,rgba(5,13,22,.94) 15%,rgba(5,13,22,.6) 60%,transparent 100%)}
.ig a:hover .ig__cap{opacity:1}
.ig__cap b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--glow);margin-bottom:5px}
.ig__cap span{display:block;font-size:12.5px;color:#CBD8E5;line-height:1.35}

/* ---------- reviews, scrolling ---------- */
.rev__top{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;
  margin-bottom:28px}
.rev__score{text-align:right}
.rev__score b{font-family:var(--disp);font-style:italic;font-weight:800;font-size:clamp(38px,5vw,58px);
  line-height:1;display:block}
.rev__stars{color:#F5B841;letter-spacing:3px;font-size:14px}
.rev__score span{display:block;font-size:11.5px;color:var(--fg-2);margin-top:6px}
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;gap:18px;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rev{flex:0 0 360px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;transition:var(--fast)}
.rev:hover{border-color:var(--glow)}
.rev p{font-size:14.5px;color:#CBD8E5}
.rev .who{font-family:var(--disp);font-style:italic;font-weight:700;text-transform:uppercase;
  font-size:14px;margin-top:14px}
.rev .src{font-size:11px;color:var(--fg-2);letter-spacing:.1em}
@media(prefers-reduced-motion:reduce){ .marquee__track{animation:none} }

/* ---------- brand wall, lights up under the cursor ---------- */
.brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.brands div{background:var(--panel);display:grid;place-items:center;padding:22px 16px;
  transition:background var(--fast)}
.brands img{max-height:30px;width:auto;opacity:.5;filter:grayscale(1) brightness(1.8);
  transition:opacity var(--fast),filter var(--fast)}
.brands div:hover{background:var(--panel-2)}
.brands div:hover img{opacity:1;filter:none}

/* ---------- closing band ---------- */
/* Flat gradient reads as a placeholder. v3 lays its 44px grid over the top at
   half opacity, plus a soft light from the upper right so it is not uniform. */
.band{position:relative;overflow:hidden;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:clamp(34px,5vw,60px) 0;
  background:linear-gradient(100deg,#0a2c4d 0%,#0d5cc4 62%,#2f9bff 100%)}
.band::before{content:'';position:absolute;inset:0;background-image:var(--grid);
  background-size:44px 44px;opacity:.5}
.band::after{content:'';position:absolute;inset:0;
  background:radial-gradient(900px 380px at 82% -30%,rgba(255,255,255,.22),transparent 70%),
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.07) 3px 4px)}
.band__in{position:relative;z-index:2}
.band__in{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.band h2{font-size:clamp(31px,4.3vw,48px)}
.band p{color:#CFE4FA;margin:10px 0 0;max-width:46ch}
.band .btn{background:#fff;color:#0B2136;border-color:#fff}
.band .btn:hover{background:#EAF3FD;border-color:#EAF3FD;box-shadow:0 0 24px rgba(255,255,255,.35)}
.band .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.band .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* ---------- footer ---------- */
footer{background:var(--deep);border-top:1px solid var(--line);padding:clamp(38px,6vw,68px) 0 28px}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:32px}
.fg h5{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-2);margin:0 0 12px}
.fg a{display:block;text-decoration:none;padding:4px 0;font-size:14.5px;color:#B9C8D8;
  transition:var(--fast)}
.fg a:hover{color:var(--glow)}
.fine{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;
  color:#5E738A;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* The bar runs out of room before the page does. Drop the hours first, then
   the address, rather than letting the whole row wrap. Targeted by class, not
   by :last-child, which also matched the address div nested inside its link
   and took the whole block out one breakpoint early. */
/* .deets div{display:flex} is class+element, so a bare .deets__hrs loses to it
   and the hours stayed visible. Qualified to outrank it. */
@media(max-width:1320px){ .deets i,.deets div.deets__hrs{display:none} }
@media(max-width:1120px){ .deets{display:none} }
@media(max-width:1040px){
  .four{grid-template-columns:1fr 1fr}
  .fg{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  /* The logo used to sit in the 1fr track, so once the header CTA grew from "Shop"
     to "Request an estimate" the track was narrower than the logo's natural 3.3:1
     width. Combined with the global img{max-width:100%} and a fixed height, that
     crushed it into a sliver. The logo now gets an auto track, which is its real
     width, and the spare space sits in a third track behind it. max-width:none
     makes the squeeze impossible to reintroduce. */
  .top__in{grid-template-columns:auto auto 1fr;gap:16px}
  .top__logo{justify-self:start}
  .top__logo img{height:42px;width:auto;max-width:none}
  /* The address and hours are in the footer and the menu too, so losing them
     here costs nothing and keeps the bar from wrapping onto two lines. */
  .deets,.top__link,.top__tel{display:none}
  .stats{grid-template-columns:1fr 1fr;margin-top:0;border-radius:0;border-left:0;border-right:0}
  .stats div:nth-child(2){border-right:0}
  .split{grid-template-columns:1fr}
  .ig{grid-template-columns:repeat(2,1fr)}
  .rev{flex-basis:300px}
}
@media(max-width:560px){
  .four,.fg{grid-template-columns:1fr}
  /* Three things have to share about 350px on a phone: MENU at ~103px, the logo at
     its true 138px, and the CTA. They do not fit at full size, so the logo comes
     down to 36px, the gaps and button padding tighten, and the CTA drops to its
     short label. Shrinking the logo is the last resort, not the first: it stays
     the correct shape either way. */
  .top__in{gap:12px;padding-left:14px;padding-right:14px}
  .top__logo img{height:36px}
  .top__right .btn{padding:11px 14px;font-size:14px}
  .btn__lg{display:none}
  .btn__sm{display:inline}
}
/* Below about 380px the three items still overflowed and forced the whole page to
   scroll sideways. The MENU label goes and the hamburger carries it alone, which
   is the cheapest thing to lose here: the icon is universally understood, whereas
   shrinking the logo again would start to hurt the brand. aria-label on the button
   already says "Open menu", so nothing is lost for a screen reader. */
@media(max-width:380px){
  .menubtn b{display:none}
  .menubtn{padding:10px 12px}
  .top__in{gap:10px}
  .top__logo img{height:34px}
}


/* ============================================================
   BACKGROUND: ATMOSPHERE + PHOTOGRAPHIC BANDS
   Justin picked A and B together on 2026-08-06. C, the angled
   seams, was rejected.

   A does the work everywhere: the faint blue grid already
   defined in :root, which the page only ever used on one
   section, now sits under every section, and the alt blocks
   fade into the page colour instead of butting against it
   behind a 1px rule. That is what killed the stacked-slab look.

   B is the punctuation: a real shop photograph behind one
   section, washed back hard so the type still wins. Use it
   sparingly. Two of these on one page is plenty.
   ============================================================ */
.sec{position:relative}
.sec>.wrap{position:relative;z-index:2}
.sec::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--grid);background-size:58px 58px;opacity:.8}
.sec--alt{border-top:0;border-bottom:0;background:
  radial-gradient(820px 340px at 12% 6%,rgba(47,155,255,.12),transparent 72%),
  radial-gradient(680px 300px at 92% 96%,rgba(47,155,255,.08),transparent 72%),
  linear-gradient(180deg,var(--bg) 0,var(--panel-2) 120px,
                  var(--panel-2) calc(100% - 120px),var(--bg) 100%)}

/* To put a photograph behind a section, add sec--photo to it and set --shot:
     <section class="sec sec--photo" id="x" style="--shot:url(/assets/photos/FILE.webp)">
   The grid stays off these, the picture is texture enough. */
/* How hard the picture is pushed back. Defaults are the original values, so a
   section that sets only --shot looks exactly as it always did. Override per
   section when a photograph is worth actually seeing:
     --shot-sat    colour left in it
     --shot-bright how lit it is
     --shot-dim    opacity of the dark wash over it, the strongest lever by far
   Going much past dim .65 starts eating the lede text wherever the picture is
   pale, which on the racetrack shot is the sky. */
.sec--photo{overflow:hidden;background:var(--deep)}
.sec--photo::before{background-image:var(--shot);background-size:cover;
  background-position:center;opacity:1;
  filter:saturate(var(--shot-sat,.5)) brightness(var(--shot-bright,.6)) contrast(1.05)}
.sec--photo::after{content:'';position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,var(--bg) 0,
    rgba(7,18,29,var(--shot-dim,.9)) 18%,
    rgba(7,18,29,var(--shot-dim,.9)) 82%,var(--bg) 100%)}

/* ============================================================
   INNER PAGES
   Components that only the About, FAQ and Prayer pages use.
   Everything above this line is shared with the homepage.
   ============================================================ */

/* ---------- bio cards, About ---------- */
.bio{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3vw,30px)}
.bio__role{font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--glow);margin-bottom:10px}
.bio h3{font-size:clamp(22px,2.6vw,28px);margin-bottom:14px}
.bio p{color:var(--fg-2);font-size:15px}
.bio p:last-child{margin-bottom:0}

/* ---------- FAQ accordion ----------
   <details> rather than a script: it opens without JavaScript, it is keyboard
   operable for free, and the browser exposes it to screen readers correctly. */
.qa{max-width:860px}
.q{border-bottom:1px solid var(--line)}
.q summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:var(--disp);font-stretch:condensed;font-style:italic;font-weight:700;
  text-transform:uppercase;font-size:clamp(17px,2vw,21px);color:var(--fg);
  transition:var(--fast)}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--glow)}
/* The plus becomes a minus when open. Two bars, one rotated, so no icon font. */
.q summary::after,.q summary::before{content:'';position:absolute;right:6px;top:50%;
  background:var(--glow);transition:var(--fast)}
.q summary::before{width:14px;height:2px;margin-top:-1px}
.q summary::after{width:2px;height:14px;margin-top:-7px;right:12px}
.q[open] summary::after{transform:rotate(90deg);opacity:0}
.q p{color:var(--fg-2);font-size:15.5px;max-width:70ch;padding:0 0 22px}

/* ---------- prayer request form ---------- */
.pray{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3vw,32px)}
.pray__lab{display:block;font-family:var(--body);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);margin:16px 0 7px}
.pray__lab:first-of-type{margin-top:0}
.pray__lab em{font-style:normal;letter-spacing:.04em;text-transform:none;
  font-weight:400;color:#6E8399}
.pray__in{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  color:var(--fg);font-family:var(--body);font-size:15px;padding:12px 14px;
  transition:var(--fast);resize:vertical}
.pray__in:focus{outline:0;border-color:var(--glow);box-shadow:0 0 0 3px rgba(124,194,255,.14)}
.pray__in::placeholder{color:#5A6D82}
.pray__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pray__opt{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin:20px 0 4px}
.pray__opt strong{font-size:14px;color:var(--fg)}
.pray__opt p{margin:6px 0 0;font-size:13.5px;color:var(--fg-2)}
/* Off screen rather than display:none, which some bots skip. */
.pray__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.pray__note{margin:14px 0 0;font-size:14px;min-height:1.2em}
.pray__note.ok{color:var(--glow)}
.pray__note.bad{color:#FF8A8A}
.pray__alt{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
@media(max-width:640px){ .pray__row{grid-template-columns:1fr} }

/* ---------- current page in the menu ---------- */
.menu nav a[aria-current="page"]{border-left-color:var(--glow);color:var(--glow);
  background:var(--panel-2)}