/* Sid's Heating & Air — shared design system. Sid palette + Travis-Crawford polish + mobile-first. */
/* --mid darkened from #6b7280 -> #5c636e (2026-07-23): #6b7280 on the --grey
   (#f5f5f5) section background measured 4.43:1, under the WCAG AA 4.5:1 floor
   for body copy. #5c636e measures 5.56:1 on --grey and 6.06:1 on white. */
:root{--navy:#002868;--red:#BF0A30;--red-dk:#9a0824;--blue:#3c6ea4;--grey:#f5f5f5;--text:#1a202c;--mid:#5c636e;--white:#fff;--max:1140px;--font-display:'Anton',sans-serif;--font:'Inter',sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
html,body{overflow-x:hidden;width:100%}
body{font-family:var(--font);color:var(--text);line-height:1.7;-webkit-text-size-adjust:100%}
img,video{max-width:100%;height:auto;display:block}
/* iframes deliberately EXCLUDED from height:auto. A cross-origin iframe cannot be
   measured, so height:auto collapses it to the 150px UA default and beats any
   height the embed's own resize script sets via the HTML attribute. That silently
   flattened the Google reviews widget (GHL sets height="680" desktop / "2540"
   mobile; CSS won, so visitors saw an empty navy band). Keep max-width so an embed
   still can't cause horizontal scroll, but let embeds own their height. */
iframe{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2{font-family:var(--font-display);font-weight:400;line-height:1.12;letter-spacing:.01em}
.inner{max-width:var(--max);margin:0 auto}

/* ---- 2-tier nav: phone ALWAYS visible ---- */
.nav{position:sticky;top:0;z-index:100;background:var(--white)}
.nav-top{background:var(--navy);color:rgba(255,255,255,.85);font-size:.8rem}
.nav-top .inner{display:flex;justify-content:space-between;align-items:center;padding:6px 24px;gap:12px}
.nav-top .vet{font-weight:600;letter-spacing:.02em}
.nav-main{box-shadow:0 1px 4px rgba(0,0,0,.08)}
.nav-main .inner{display:flex;align-items:center;justify-content:space-between;height:74px;padding:0 24px;gap:14px}
.nav-logo{display:flex;align-items:center;gap:10px;font-size:1.35rem;font-weight:800;color:var(--navy)}
.nav-logo img{height:44px;width:auto}
.nav-links{display:flex;gap:26px;list-style:none}
.nav-links a{color:var(--navy);font-weight:600;font-size:.95rem}
.nav-links a:hover{color:var(--red);text-decoration:none}
.btn-call{display:inline-flex;align-items:center;gap:7px;background:var(--red);color:var(--white);padding:11px 18px;border-radius:8px;font-weight:700;font-size:.95rem;min-height:44px;transition:background .2s}
.btn-call:hover{background:var(--red-dk);text-decoration:none;color:var(--white)}
/* secondary nav action: Text — navy so it reads as distinct from the red Call button.
   Shares .btn-call sizing so both collapse to icon-only at <=860px, never hidden. */
.btn-text{background:var(--navy);flex-shrink:0}
.btn-text:hover{background:#001a45;text-decoration:none;color:var(--white)}
.hamburger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:10px;min-width:44px;min-height:44px}
.hamburger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px}

/* ---- hero: photo + navy overlay + subtle flag ---- */
.hero{position:relative;padding:96px 24px;text-align:center;background:linear-gradient(rgba(0,20,55,.74),rgba(0,20,55,.80)),url('/images/6a08f6de19e1ac5f52680881.jpeg') center top/cover no-repeat}
.hero-inner{max-width:var(--max);margin:0 auto;position:relative}
.badge{display:inline-block;background:var(--red);color:#fff;font-family:var(--font);font-size:.75rem;font-weight:700;letter-spacing:.09em;padding:7px 15px;border-radius:4px;margin-bottom:18px}
.hero h1{color:#fff;font-size:clamp(2.1rem,5.4vw,3.4rem);margin-bottom:10px}
.hero .tagline{color:#fff;font-family:var(--font-display);font-size:clamp(1.05rem,2.2vw,1.35rem);letter-spacing:.04em;margin-bottom:14px}
.hero .sub{color:rgba(255,255,255,.85);font-size:1.08rem;max-width:640px;margin:0 auto 28px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--red);color:#fff;padding:15px 30px;border-radius:100px;font-weight:700;font-size:1.02rem;min-height:52px;transition:transform .15s,background .2s}
.btn-primary:hover{background:var(--red-dk);transform:translateY(-2px);text-decoration:none;color:#fff}
.btn-primary .arw{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.22)}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55);padding:15px 28px;border-radius:100px;font-weight:600;font-size:1.02rem;min-height:52px;transition:all .2s}
.btn-secondary:hover{border-color:#fff;background:rgba(255,255,255,.08);text-decoration:none;color:#fff}

/* ---- homepage split hero: navy copy column + a real, visible photo of Sid.
   SCOPED to .hero-split so the shared .hero rule above (still a darkened
   background photo on every city page, service-areas, and hvac-services) is
   untouched. The homepage no longer uses that background image — a real <img>
   carries Sid, and a flat navy gradient (NOT an overlay-on-photo) keeps the
   white copy high-contrast. Desktop >=860px: copy left, photo right. */
.hero.hero-split{padding:64px 24px;text-align:left;background:linear-gradient(135deg,#0d1a2b 0%,var(--navy) 58%,#0a2f66 100%)}
.hero-split .hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.hero-split .hero-copy{min-width:0}
.hero-split .hero-copy .badge{margin-bottom:16px}
.hero-split .sub{margin-left:0;margin-right:0}       /* was 0 auto — left-align inside the split column */
.hero-split .hero-btns{justify-content:flex-start}
.hero-split .hero-photo{align-self:stretch;border-radius:16px;overflow:hidden;box-shadow:0 20px 44px rgba(0,0,0,.34)}
.hero-split .hero-photo img{width:100%;height:100%;min-height:430px;max-height:560px;object-fit:cover;object-position:center top}
/* Mobile <860px: single column, copy FIRST (badge -> h1 -> tagline -> sub ->
   CTAs), photo AFTER the CTAs so the headline and both buttons stay above the
   fold. Copy re-centers (matches the original hero); photo height is capped. */
@media(max-width:860px){
  .hero.hero-split{padding:34px 24px}
  .hero-split .hero-inner{grid-template-columns:1fr;gap:24px}
  .hero-split .hero-copy{text-align:center}
  .hero-split .hero-copy .badge{margin-bottom:14px}
  .hero-split .sub{margin-left:auto;margin-right:auto}
  .hero-split .hero-btns{justify-content:center}
  .hero-split .hero-photo{align-self:auto}
  .hero-split .hero-photo img{width:100%;height:auto;min-height:0;max-height:300px;object-fit:cover;object-position:center top}
}
@media(max-width:520px){
  .hero.hero-split{padding:26px 20px}
}
/* Smallest phones (<=374px, e.g. 2016 iPhone SE @320x568): the full-size copy
   alone overruns the short 568px viewport and pushes the CTAs below the fold.
   Tighten the hero type/margins here ONLY so both buttons stay above the fold;
   375px+ keeps the larger sizes. */
@media(max-width:374px){
  .hero.hero-split{padding:8px 16px}
  .hero-split .hero-copy .badge{margin-bottom:6px;padding:5px 12px}
  .hero-split h1{font-size:1.4rem;line-height:1.1}
  .hero-split .tagline{font-size:.95rem;margin-bottom:6px}
  .hero-split .sub{font-size:.84rem;line-height:1.42;margin-bottom:10px}
  .hero-split .hero-btns{gap:9px}
  .hero-split .hero-btns .btn-primary,.hero-split .hero-btns .btn-secondary{min-height:46px;padding:11px 20px}
  .hero-split .hero-photo img{max-height:220px}
}

/* ---- trust strip ---- */
.trust{background:var(--grey);border-bottom:1px solid #e5e7eb;padding:22px 24px}
.trust-inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:center;gap:26px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--navy)}
.trust-item svg{flex-shrink:0}

/* ---- sections ---- */
section{padding:56px 24px}
.section-alt{background:var(--grey)}
.section-dark{background:var(--navy)}
.section-title{font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--navy);margin-bottom:12px}
.section-title.center{text-align:center}
.section-title.center::after{content:"";display:block;width:56px;height:3px;margin:14px auto 0;background:linear-gradient(90deg,var(--navy),var(--blue))}
.section-title-white{color:#fff}
.section-sub{color:var(--mid);margin-bottom:34px;font-family:var(--font)}
.section-sub.center{text-align:center;max-width:640px;margin-left:auto;margin-right:auto}

/* ---- honest-difference: type-led proof block (replaces icon-card slop) ---- */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
.proof-item{padding-left:16px;border-left:3px solid var(--red)}
.proof-key{font-family:var(--font-display);font-size:2.1rem;color:var(--navy);line-height:1}
.proof-item p{margin-top:8px;font-size:.95rem;color:var(--text)}

/* ---- service cards ---- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.svc-card{background:#fff;border:1px solid #e5e7eb;border-top:3px solid var(--navy);border-radius:10px;padding:24px;transition:box-shadow .2s,transform .2s}
.svc-card:hover{box-shadow:0 8px 22px rgba(0,0,0,.09);transform:translateY(-2px)}
.svc-card h3{font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.svc-card p{font-size:.9rem;color:var(--mid);line-height:1.55;margin-bottom:12px}
.svc-link{font-size:.9rem;font-weight:700;color:var(--red)}

/* ---- pricing box ---- */
.pricing-box{max-width:680px;margin:34px auto 0;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 14px 36px rgba(27,58,92,.12);overflow:hidden}
.pricing-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 26px;border-bottom:1px solid #eef1f4}
.pricing-row:last-child{border-bottom:none}
.pricing-row .lbl{font-weight:600;color:var(--navy)}
.pricing-row .amt{font-family:var(--font-display);font-size:1.7rem;color:var(--red)}
.pricing-why{padding:18px 26px;background:var(--grey);color:var(--text);font-size:.95rem;font-style:italic}

/* ---- reviews ---- */
.reviews-wrap{margin-top:8px}

/* ---- service area ---- */
.local-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:30px}
.area-list{list-style:none}
.area-list li{padding:9px 0;font-size:.95rem;color:#4b5563;border-bottom:1px solid #e5e7eb;display:flex;gap:10px}
.area-list li::before{content:"\2713";color:var(--navy);font-weight:700}
.stat-box{background:var(--navy);color:#fff;border-radius:12px;padding:36px;text-align:center}
.stat-num{font-family:var(--font-display);font-size:3.4rem;line-height:1;display:block}

/* ---- FAQ ---- */
.faq{margin:34px auto 0;max-width:760px}
.faq-item{border-bottom:1px solid #e5e7eb;padding:20px 0}
.faq-item:last-child{border-bottom:none}
.faq-q{font-size:1.02rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.faq-a{font-size:.95rem;color:#4b5563;line-height:1.65}

/* ---- CTA band ---- */
.cta-sec{background:linear-gradient(162deg,#122538 0%,var(--navy) 42%,#3c6ea4 100%);padding:72px 24px;text-align:center}
.cta-sec h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:12px}
.cta-sec p{color:rgba(255,255,255,.85);margin-bottom:8px}
.cta-phone{font-family:var(--font-display);color:#fff;font-size:1.9rem;display:block;margin:14px 0 22px}
.cta-btns{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
/* "Also serving:" cross-link line under a page CTA. Colors live HERE, never inline:
   the old inline color:rgba(255,255,255,.6) measured 3.70-4.27:1 on the .cta-sec gradient
   (below the 4.5:1 AA floor at 13.6px) and survived earlier contrast sweeps precisely
   because it was inline. Two classes beats `.cta-sec p`, so this wins without !important. */
.cta-sec .also-serving{color:rgba(255,255,255,.85);font-size:.85rem;margin-top:24px}
.cta-sec .also-serving a{color:rgba(255,255,255,.92)}
.cta-sec .also-serving a:hover{color:var(--white);text-decoration:underline}
.btn-white{background:#fff;color:var(--red);padding:15px 32px;border-radius:100px;font-weight:700;min-height:52px;display:inline-flex;align-items:center}
.btn-white:hover{background:#f0f0f0;text-decoration:none;color:var(--red)}
.btn-outline-white{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7);padding:15px 32px;border-radius:100px;font-weight:600;min-height:52px;display:inline-flex;align-items:center}
.btn-outline-white:hover{border-color:#fff;text-decoration:none;color:#fff}

/* ---- footer ---- */
footer{background:var(--navy);padding:48px 24px 24px}
.footer-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.footer-brand strong{color:#fff;font-size:1.1rem}
.footer-brand p{color:rgba(255,255,255,.6);font-size:.875rem;margin-top:10px;line-height:1.6}
.footer-col h4{color:#fff;font-weight:700;font-size:.9rem;margin-bottom:14px;text-transform:uppercase;letter-spacing:.05em}
.footer-col a{display:block;color:rgba(255,255,255,.6);font-size:.875rem;margin-bottom:8px}
.footer-col a:hover{color:var(--red);text-decoration:none}
.footer-bar{max-width:var(--max);margin:32px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
/* .45 alpha on navy measured 3.6–3.9:1 — under AA. .65 measures 6.6:1. */
.footer-bar p,.footer-bar a{font-size:.8rem;color:rgba(255,255,255,.65)}

/* ---- photo grid + gallery ---- */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.photo-grid img{width:100%;height:260px;object-fit:cover;object-position:center;border-radius:8px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.gallery-item img{width:100%;height:280px;object-fit:cover;object-position:center;border-radius:10px}
.gallery-item figcaption{font-size:.85rem;color:var(--mid);margin-top:8px}

/* ---- sticky mobile call bar (hidden on desktop) ---- */
.mobile-callbar{display:none}

/* ===================== MOBILE-FIRST ===================== */
@media(max-width:900px){
  .services-grid{grid-template-columns:1fr 1fr}
  .proof{grid-template-columns:1fr 1fr}
  .local-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
}
@media(max-width:860px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;padding:12px 24px;gap:0;box-shadow:0 8px 20px rgba(0,0,0,.12)}
  .nav-links.open li{border-bottom:1px solid #eef1f4}
  .nav-links.open a{display:block;padding:14px 0}
  /* phone AND text buttons STAY visible next to hamburger — never hidden */
  .nav-main .inner{gap:8px}
  .btn-call .lbl{display:none}      /* compact to icon-only on small screens (applies to .btn-text too) */
}
@media(max-width:520px){
  /* both CTA buttons must survive down to 320px — tighten chrome, never drop a button */
  .nav-main .inner{padding:0 12px;gap:6px}
  .nav-logo{font-size:1rem}
  /* min-width:44px is the tap-target floor: label is hidden below 860px, so the
     16px icon + 26px padding measured 42px wide — under the 44x44 minimum. */
  .btn-call{padding:11px 13px;min-width:44px;justify-content:center}
  .hamburger{padding:10px 5px;min-width:34px}
}
@media(max-width:600px){
  section{padding:44px 20px}
  .hero{padding:72px 20px}
  .services-grid{grid-template-columns:1fr}
  .proof{grid-template-columns:1fr}
  .photo-grid,.gallery-grid{grid-template-columns:1fr}
  .photo-grid img{height:220px}
  .hero-btns .btn-primary,.hero-btns .btn-secondary,.cta-btns a{width:100%}
  body{padding-bottom:72px}                 /* clear the sticky call bar */
  .mobile-callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:200;box-shadow:0 -2px 12px rgba(0,0,0,.18)}
  .mobile-callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;font-weight:700;font-size:1rem}
  .mobile-callbar .mc-call{background:var(--red);color:#fff}
  .mobile-callbar .mc-text{background:var(--navy);color:#fff}
}
/* prevent iOS zoom-on-focus */
input,select,textarea{font-size:16px}

/* ============================================================================
   RESTORED PAGE-BODY CLASSES (city / service / legal / thank-you templates)
   ----------------------------------------------------------------------------
   The chrome swap (_build/apply_chrome.py) replaced every inherited page's
   inline <style> block with a link to this file, but this file only ever
   re-implemented the CHROME (nav, hero, footer, .svc-card, .faq, .photo-grid,
   .cta-sec, .inner, .section-title...). Everything below is the page-BODY half
   of those inline blocks, recovered verbatim from commit 79d13346 and de-duped
   into a union. Nothing here re-declares a selector the redesign already owns.

   Adaptations applied while restoring:
     * the old --orange token  ->  --red   (renamed in the redesign)
     * font-weight:700 dropped from restored h1/h2 rules — the redesign puts
       Anton (single weight 400) on h1,h2; 700 would force synthetic bold.
     * Template variants that genuinely differ in structure are split with
       :has() — the BASE rule is always the majority variant, so a browser
       without :has() still renders a fully styled page.
   ============================================================================ */

/* ---- shared layout primitives (order matters: .narrow must beat
        .section-inner / .inner on `class="section-inner narrow"`) ---- */
.section-inner{max-width:var(--max);margin:0 auto}
.container{max-width:var(--max);margin:0 auto}
.narrow{max-width:800px;margin:0 auto}
.text-center{text-align:center}

/* ---- page hero: flat navy on about/contact/legal, gradient on service pages
        (service pages are the ones carrying a .sub under the h1) ---- */
.page-hero{background:var(--navy);padding:56px 24px;text-align:center}
.page-hero h1{color:var(--white);font-size:clamp(1.8rem,4vw,2.5rem)}
.page-hero p{color:rgba(255,255,255,.7);margin-top:10px;font-size:1rem}
.page-hero:has(.sub){background:linear-gradient(135deg,#0d1a2b 0%,var(--navy) 60%,#1e3350 100%);padding:72px 24px}
.page-hero:has(.sub) h1{font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.2;margin-bottom:14px}
.page-hero .sub{color:rgba(255,255,255,.8);font-size:1.05rem;margin-bottom:28px;max-width:620px;margin-left:auto;margin-right:auto}
.hero-badge{display:inline-block;background:var(--red);color:var(--white);font-size:.78rem;font-weight:700;letter-spacing:.08em;padding:5px 14px;border-radius:4px;margin-bottom:20px;text-transform:uppercase}
.hero-sub{color:rgba(255,255,255,.8);font-size:1.02rem;margin-bottom:34px;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.65}
.hero-ctas{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---- intro band ---- */
.intro{background:var(--white)}
.intro-inner{max-width:800px;margin:0 auto}
.intro h2{color:var(--navy);font-size:1.5rem;margin-bottom:16px}
.intro p{font-size:1.05rem}

/* ---- About "Our Story": owner photo beside the story text. Keeps the
   .intro-inner container width (800px); 2-col on desktop, stacked on mobile
   (photo below the text). aspect-ratio 3/4 matches the source photo exactly
   (1200x1600) so there is no crop and zero layout shift. ---- */
.intro-inner.story-grid{display:grid;grid-template-columns:1fr 280px;gap:40px;align-items:center}
.story-photo{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center top;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.14)}
@media(max-width:768px){
  .intro-inner.story-grid{grid-template-columns:1fr;gap:26px}
  .story-photo{max-width:340px;margin-left:auto;margin-right:auto}
}

/* ---- intro grid + navy info box (city pages; buford/wesley use a
        single .info-text row instead of label/value pairs) ---- */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:16px}
.intro-grid:has(.info-text){grid-template-columns:1fr 340px;margin-top:0}
.intro-body p{font-size:1.05rem;color:#4b5563;margin-bottom:16px;line-height:1.75}
.info-box{background:var(--navy);color:var(--white);border-radius:12px;padding:32px}
.info-box h3{color:var(--white);font-size:1rem;font-weight:700;margin-bottom:16px;text-transform:uppercase;letter-spacing:.06em}
.info-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.9rem}
.info-row:last-child{border-bottom:none}
.info-label{color:rgba(255,255,255,.6)}
.info-val{color:var(--white);font-weight:600}
.info-row:has(.info-text){justify-content:flex-start;gap:12px;align-items:flex-start;padding:0;margin-bottom:14px;border-bottom:none}
.info-text{font-size:.95rem;line-height:1.5}
.info-text strong{color:var(--white)}

/* ---- navy trust bar (city pages) ---- */
.trust-bar{background:var(--navy);padding:32px 24px}
.trust-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.trust-block .big{font-size:2.6rem;font-weight:700;color:var(--white);display:block;line-height:1}
.trust-block .label{color:rgba(255,255,255,.65);font-size:.9rem;margin-top:8px;display:block}
.trust-dot{width:6px;height:6px;background:var(--red);border-radius:50%;flex-shrink:0}

/* ---- "why us" bullet list (city pages) ---- */
.why-bullets{display:grid;gap:28px;max-width:760px;margin:28px auto 0}
.why-bullet{padding-left:16px;border-left:3px solid var(--navy);margin-bottom:4px}
.why-bullet h3{color:var(--navy);font-weight:700;margin-bottom:6px;font-size:1.05rem}
.why-bullet p{color:var(--mid);font-size:.95rem}

/* ---- "why us" card grid (buford/wesley = plain grey cards,
        monroe = white cards with an SVG badge) ---- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:32px}
.why-card{background:var(--grey);border-radius:10px;padding:24px 20px}
.why-card h3{font-size:.95rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.why-card p{font-size:.9rem;color:var(--mid)}
.why-card .icon{font-size:1.5rem;margin-bottom:10px}
.why-icon{width:48px;height:48px;background:var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.why-grid:has(.why-icon){grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
.why-card:has(.why-icon){background:var(--white);border:1px solid #e5e7eb;padding:24px;text-align:center}
.why-card:has(.why-icon) h3{font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}
.why-card:has(.why-icon) p{font-size:.875rem;line-height:1.55}

/* ---- service cards (buford / wesley chapel template) ---- */
.service-card{background:var(--white);border:1px solid #e5e7eb;border-radius:10px;padding:24px 20px;transition:box-shadow .2s}
.service-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1)}
.service-card .icon{font-size:1.8rem;margin-bottom:12px}
.service-card h3{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.service-card p{font-size:.9rem;color:var(--mid)}
.service-card a{display:inline-block;margin-top:12px;font-size:.9rem;font-weight:600;color:var(--red)}

/* ---- stacked FAQ list wrapper ---- */
.faq-list{margin-top:28px;display:flex;flex-direction:column;gap:0}

/* ---- navy CTA band + its trailing links (city / buford / all-services) ---- */
.cta-band{background:var(--navy);padding:52px 24px;text-align:center}
.cta-band h2{color:var(--white);font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:10px}
.cta-band p{color:rgba(255,255,255,.75);max-width:540px;margin:0 auto 28px}
.cta-band>.inner>p{color:rgba(255,255,255,.75);font-size:.97rem;margin-bottom:6px}
.cta-band .links{margin-top:24px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:.9rem}
.cta-band .links a{color:rgba(255,255,255,.7)}
.cta-band .links a:hover{color:var(--white)}
.cta-note{margin-top:18px;font-size:.8rem;color:rgba(255,255,255,.45)}
.cta-link{color:rgba(255,255,255,.7);font-size:.9rem;margin-top:18px;display:block}
.cta-link:hover{color:var(--white);text-decoration:underline}
.back-link{text-align:center;margin-top:24px}
.back-link a{color:rgba(255,255,255,.7);font-size:.9rem}
.back-link a:hover{color:var(--white)}

/* ---- legal pages (privacy policy / terms of service) ---- */
.legal-wrap{max-width:780px;margin:0 auto;padding:64px 24px}
.legal-wrap h2{color:var(--navy);font-size:1.15rem;margin:36px 0 12px;padding-left:12px;border-left:3px solid var(--red)}
.legal-wrap p{margin-bottom:14px}
.legal-wrap ul{margin:8px 0 14px 24px}
.legal-wrap ul li{margin-bottom:6px}
.legal-wrap strong{color:var(--navy)}
.eff{background:var(--grey);border-left:4px solid var(--red);padding:16px 20px;border-radius:4px;margin-bottom:32px;font-size:.95rem}
.contact-card{background:var(--grey);border-radius:8px;padding:24px;margin-top:8px}
.contact-card p{margin-bottom:4px}

/* ---- contact page: the two 2-column bands (call/form, hours/service-area).
        These lived as INLINE grid-template-columns on contact.html until
        2026-07-23. Inline layout beats every media query, so both bands stayed
        two-up on phones and squeezed the GHL "Request Service Online" iframe —
        the site's only lead-capture form — into a ~63px column with labels
        breaking one character per line. Layout belongs here, never inline.
        Horizontal padding tightens below 430px so the form column clears 280px
        even at a 320px viewport. ---- */
.contact-sec{background:var(--white);padding:72px 24px}
.contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;max-width:1000px;margin:0 auto;align-items:start}
.contact-meta{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:800px;margin:0 auto}
@media(max-width:768px){
  .contact-cols,.contact-meta{grid-template-columns:1fr;gap:36px}
}
@media(max-width:600px){
  .contact-sec{padding:44px 16px}
}
@media(max-width:430px){
  .contact-sec{padding:40px 12px}
}

/* ---- service detail pages: warning signs + 3-step process ---- */
.signs-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.sign-item{background:var(--white);border:1px solid #e5e7eb;border-left:4px solid var(--red);border-radius:6px;padding:16px 20px}
.sign-item h3{font-size:.95rem;font-weight:700;color:var(--navy);margin-bottom:4px}
.sign-item p{font-size:.875rem;color:var(--mid)}
.signs-list{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.signs-list li{background:var(--white);border:1px solid #e5e7eb;border-left:4px solid var(--red);border-radius:6px;padding:14px 18px;font-size:.9rem;color:#374151}
.process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.step{text-align:center;padding:28px 20px;background:var(--white);border:1px solid #e5e7eb;border-radius:10px}
.step-num{width:48px;height:48px;background:var(--navy);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;margin:0 auto 16px}
.step h3{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.step p{font-size:.875rem;color:var(--mid);line-height:1.55}

/* ---- systems / brands / related (service + all-services pages) ---- */
.systems-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.sys-card{background:var(--white);border:1px solid #e5e7eb;border-radius:8px;padding:20px;border-top:3px solid var(--navy)}
.sys-card h3{font-size:.95rem;font-weight:700;color:var(--navy);margin-bottom:6px}
.sys-card p{font-size:.875rem;color:var(--mid);line-height:1.5}
.brands-bar{background:var(--navy);border-radius:10px;padding:28px 32px;margin-top:28px;text-align:center}
.brands-bar p{color:rgba(255,255,255,.8);font-size:.95rem;margin-bottom:12px}
.brands-list{color:var(--white);font-weight:600;font-size:.9rem;line-height:2}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.related-card{background:var(--white);border:1px solid #e5e7eb;border-radius:8px;padding:22px;transition:box-shadow .2s,transform .2s}
.related-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.09);transform:translateY(-2px)}
.related-card h3{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:6px}
.related-card p{font-size:.875rem;color:var(--mid);line-height:1.5;margin-bottom:12px}
.related-card a{font-size:.875rem;font-weight:600;color:var(--red)}

/* ---- all-services page: alternating split sections ---- */
.service-split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-top:8px}
.service-split.flip{direction:rtl}
.service-split.flip>*{direction:ltr}
.service-body h2{font-size:clamp(1.4rem,2.8vw,1.85rem);color:var(--navy);margin-bottom:14px}
.service-body p{font-size:.97rem;color:var(--text);line-height:1.75;margin-bottom:14px}
.service-full h2{font-size:clamp(1.4rem,2.8vw,1.85rem);color:var(--navy);margin-bottom:14px}
.service-full p{font-size:.97rem;color:var(--text);line-height:1.75;margin-bottom:14px}
.service-img{width:100%;height:370px;object-fit:cover;border-radius:12px;display:block}
.service-cta{margin-top:18px;display:inline-flex;align-items:center;gap:6px;font-size:.92rem;font-weight:600;color:var(--red)}
.service-cta:hover{text-decoration:underline}
.included-list{margin:20px 0;display:flex;flex-direction:column;gap:11px}
.included-item{padding-left:16px;border-left:3px solid var(--navy);font-size:.93rem;color:var(--text);line-height:1.55}
.included-item strong{color:var(--navy)}
.price-box{background:var(--navy);border-radius:10px;padding:22px 24px;margin-top:20px}
.price-box h4{color:var(--white);font-size:.82rem;font-weight:700;margin-bottom:7px;text-transform:uppercase;letter-spacing:.06em}
.price-box p{color:rgba(255,255,255,.8);font-size:.9rem;line-height:1.65}
.internal-links{display:flex;gap:24px;flex-wrap:wrap;margin-top:12px}
.internal-links a{font-weight:600;color:var(--navy);font-size:.93rem}
.internal-links a:hover{color:var(--red);text-decoration:underline}
.link-arrow{font-size:.88rem;font-weight:600;color:var(--red)}
.link-arrow:hover{text-decoration:underline}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}

/* ---- service-areas page: map + state/city directory ---- */
.map-cities{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.map-embed{width:100%;height:400px;border-radius:12px;border:none;box-shadow:0 2px 12px rgba(0,0,0,.1)}
.state-group{margin-bottom:28px}
.state-label{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:700;color:var(--navy);border-bottom:2px solid var(--red);padding-bottom:8px;margin-bottom:14px}
.state-badge{background:var(--navy);color:var(--white);border-radius:4px;padding:3px 8px;font-size:.72rem;font-weight:700}
.state-badge.sc{background:var(--red)}
.city-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.city-card{background:var(--white);border:1px solid #e5e7eb;border-radius:8px;padding:10px 14px;font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:8px;transition:border-color .2s,box-shadow .2s}
.city-card.linked{color:var(--red)}
.city-card.linked:hover{border-color:var(--red);box-shadow:0 2px 8px rgba(191,10,48,.12);text-decoration:none}
.cta-dark{background:var(--navy);padding:48px 24px;text-align:center}
.cta-dark h2{color:var(--white);font-size:clamp(1.4rem,3vw,2rem);margin-bottom:10px}
.cta-dark p{color:rgba(255,255,255,.75);margin-bottom:28px;font-size:1rem}
.stat-label{color:rgba(255,255,255,.7);font-size:.9rem;margin-top:6px;display:block}
.stat-quote{color:rgba(255,255,255,.75);font-size:.875rem;font-style:italic;line-height:1.6}

/* ---- thank-you page: <main> is the dark canvas .ty-card's white text sits on.
        Only thank-you.html uses <main>, so this element rule is scoped by
        markup, not by class. Without it .ty-card renders white-on-white. ---- */
main{flex:1;display:flex;align-items:center;justify-content:center;padding:72px 24px;background:linear-gradient(135deg,#0d1a2b 0%,var(--navy) 60%,#1e3350 100%)}
.ty-card{max-width:600px;text-align:center;color:var(--white)}
.ty-check{width:72px;height:72px;background:var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:2rem;color:var(--white);font-weight:700}
.ty-card h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:16px}
.ty-card p{color:rgba(255,255,255,.82);font-size:1.05rem;margin-bottom:14px}
.ty-steps{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:24px 28px;margin:28px 0;text-align:left}
.ty-steps h2{font-size:1rem;margin-bottom:12px;color:var(--white)}
.ty-steps li{color:rgba(255,255,255,.78);font-size:.95rem;margin-bottom:8px;margin-left:20px}
.ty-phone{display:inline-flex;align-items:center;background:var(--white);color:var(--navy);padding:14px 32px;border-radius:8px;font-weight:700;font-size:1.1rem;margin-top:8px}
.ty-phone:hover{background:var(--grey);text-decoration:none;color:var(--navy)}
.ty-back{display:block;margin-top:20px;color:rgba(255,255,255,.7);font-size:.9rem}

/* ---- descendant rules the redesign left uncovered ----
   .pricing-box was navy-with-white-text pre-swap and is a white card now, so
   these two are re-coloured for the new box instead of ported verbatim.
   .svc-card a is guarded with :not(.svc-link) so it can never outrank the
   redesigned .svc-link. .faq-item h3 is self-scoping — buford-sc and
   wesley-chapel-nc are the only pages that put an <h3> inside a .faq-item. */
.pricing-box h3{color:var(--navy);font-size:1.15rem;font-weight:700;margin:0;padding:24px 26px 0}
.pricing-box p{color:var(--text);font-size:.95rem;line-height:1.65;padding:10px 26px 24px}
.svc-card a:not(.svc-link){font-size:.875rem;font-weight:600;color:var(--red)}
.faq-item h3{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.faq-item h3~p{font-size:.95rem;color:var(--mid);line-height:1.6}

/* ---- responsive rules that shipped with the blocks above ---- */
@media(max-width:900px){
  .why-grid:has(.why-icon){grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  /* kept as two rules, not a selector list: an unsupported :has() would
     invalidate the whole list, and the :has() base rule outranks a bare
     .intro-grid override regardless of source order */
  .intro-grid{grid-template-columns:1fr}
  .intro-grid:has(.info-text){grid-template-columns:1fr}
  .info-box{order:-1}
  .trust-grid{grid-template-columns:1fr;gap:32px}
  .legal-wrap{padding:48px 20px}
  .signs-grid,.signs-list{grid-template-columns:1fr}
  .process-steps{grid-template-columns:1fr}
  .systems-grid{grid-template-columns:1fr 1fr}
  .related-grid{grid-template-columns:1fr}
  .service-split{grid-template-columns:1fr;direction:ltr!important}
  .service-split.flip,.service-split.flip>*{direction:ltr}
  .service-img{height:240px}
  .internal-links{flex-direction:column;gap:12px}
  .map-cities{grid-template-columns:1fr;gap:28px}
  .map-embed{height:280px}
  .city-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .why-grid:has(.why-icon){grid-template-columns:1fr 1fr}
}
@media(max-width:500px){
  .systems-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .city-grid{grid-template-columns:1fr}
}