/* ============================================================
   EV Charge San Diego — v2

   Direction: white, airy, one accent. The previous build used a
   dark panel hero, three competing accent colours and a condensed
   industrial display face. All three are gone.

   Single accent is the logo teal. The blue appears only on links
   and small marks; amber is removed entirely, so the teal button
   is the only saturated fill on any page and the eye goes there
   without being shouted at.

   One typeface. Plus Jakarta Sans is geometric with slightly
   rounded terminals, which is what the logo wordmark already is —
   so the page and the mark read as one thing.
   ============================================================ */

:root{
  /* Surfaces */
  --bg:#FFFFFF;
  --bg-soft:#F2FAF9;        /* barely-there teal wash for alternating bands */
  --bg-deep:#0E2A2F;        /* used once, in the footer */
  --line:#E3EDEE;

  /* Ink */
  --ink:#0E2A2F;            /* deep teal-black, softer than pure black */
  --muted:#5E7378;

  /* Brand */
  --teal:#00C9B7;
  --teal-dark:#00887B;      /* teal text on white that still passes AA */
  --blue:#01ABE6;
  --blue-dark:#0180AE;

  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --wrap:1140px;
  --narrow:760px;
  --r:14px;
  --r-lg:22px;
  --shadow:0 1px 2px rgba(14,42,47,.04), 0 12px 32px -12px rgba(14,42,47,.12);
}

/* ---------- Base ------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);font-size:17px;line-height:1.7;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{margin:0 0 .6em;line-height:1.14;letter-spacing:-.02em;font-weight:700;
  text-wrap:balance}   /* even line lengths: no single word left alone on the last line */
p,li,blockquote,figcaption,dd{text-wrap:pretty}   /* paragraphs avoid a one-word last line */
h1{font-size:clamp(2.3rem,5.4vw,3.85rem);letter-spacing:-.03em}
/* Grows steadily from phone (27px) through tablet to desktop (43px at ~1040px and up). */
h2{font-size:clamp(1.7rem,1rem + 2.6vw,2.7rem)}
h3{font-size:1.3rem;letter-spacing:-.01em}
p{margin:0 0 1.15rem}

a{color:var(--blue-dark);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.narrow{max-width:var(--narrow);margin-inline:auto}
.center{text-align:center}
.prose{max-width:68ch}
.prose h3{margin-top:2.4rem}
.guide-body h2{margin-top:2.8rem}
.guide-body h2:first-child{margin-top:0}
.guide-body li{margin-bottom:.4rem}

/* Guides (app/guides.php): tables that turn into stacked rows on phones,
   a short summary box, and the sources list. */
.guide-summary{background:var(--bg-soft);border-radius:var(--r);padding:1.1rem 1.3rem;margin:0 0 2rem}
.guide-summary p{margin:0}
.guide-summary ul{margin:.4rem 0 0;padding-left:1.2rem}
.guide-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;line-height:1.5;margin:1.25rem 0 2rem;
             background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.guide-table caption{caption-side:top;text-align:left;font-weight:600;padding-bottom:.55rem}
.guide-table th,.guide-table td{padding:.7rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.guide-table thead th{background:var(--bg-soft);font-size:.85rem;font-weight:600;color:var(--muted)}
.guide-table tbody tr:last-child>*{border-bottom:0}
.guide-table tbody th{font-weight:600}
.guide-table td.num,.guide-table th.num{text-align:right;white-space:nowrap}
.guide-sources{font-size:.9rem;color:var(--muted)}
.guide-sources li{margin-bottom:.3rem}
@media(max-width:620px){
  .guide-table thead{display:none}
  .guide-table,.guide-table tbody,.guide-table tr,.guide-table th,.guide-table td{display:block;width:100%}
  .guide-table tr{padding:.55rem 0;border-bottom:1px solid var(--line)}
  .guide-table tbody tr:last-child{border-bottom:0}
  .guide-table th,.guide-table td{border:0;padding:.2rem .9rem}
  .guide-table td.num{text-align:left}
  .guide-table td[data-label]::before{content:attr(data-label) ": ";font-weight:600;color:var(--muted)}
}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.6;color:var(--muted);max-width:56ch}
.center .lede{margin-inline:auto}
.center .chips{justify-content:center}
.muted{color:var(--muted)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:8px}

/* ---------- Header ----------------------------------------- */
/* No dark utility bar. The phone number lives in the nav where
   people already look for it. */
.mast{background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(12px);
      border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.mast>div{display:flex;align-items:center;gap:2rem;padding:1rem 0}
.mast img{width:178px;height:39px}
.nav{display:flex;gap:1.9rem;margin-left:auto;font-size:.99rem;font-weight:500}
.nav a{color:var(--ink)}
.nav a:hover{color:var(--teal-dark);text-decoration:none}
.mast-phone{font-weight:600;color:var(--ink)}
.burger{display:none;background:none;border:0;padding:.55rem;cursor:pointer;margin-left:auto}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}
/* Dropdown hangs off the sticky header, so it is always in view.
   Scrolls on its own if the screen is short. */
.m-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
       border-bottom:1px solid var(--line);padding:.5rem 1.25rem 1.5rem;
       box-shadow:0 18px 30px -18px rgba(14,42,47,.35);
       max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain}
.m-nav a{display:block;color:var(--ink);padding:.85rem 0;border-bottom:1px solid var(--line);font-size:1.05rem;font-weight:500}

/* ---------- Buttons ---------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:inherit;font-size:1.02rem;font-weight:600;line-height:1;
  padding:1.05rem 2rem;border:0;border-radius:999px;cursor:pointer;
  transition:background-color .15s ease,box-shadow .15s ease,color .15s ease;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--teal);color:var(--ink)}
.btn-primary:hover{background:#00B4A4;color:var(--ink)}
.btn-outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-outline:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.btn-light{background:#fff;color:var(--ink)}
.btn-row{display:flex;justify-content:center;gap:.85rem;flex-wrap:wrap;margin-top:2rem}
.home-hero-actions{justify-content:flex-start}
.center .btn-row{justify-content:center}

/* Home hero trust marks */
.home-proof{display:inline-flex;align-items:center;gap:1.15rem;margin-top:1.35rem;
            padding:.9rem 1rem;background:#fff;border:1px solid var(--line);
            border-radius:16px;box-shadow:var(--shadow)}
.proof-item{display:flex;align-items:center;gap:.7rem;min-width:0}
.proof-icon{width:38px;height:38px;border-radius:12px;background:var(--bg-soft);
            color:var(--teal-dark);display:grid;place-items:center;flex:none}
.proof-copy{display:grid;gap:.12rem;line-height:1.2}
.proof-copy strong{font-size:.92rem;letter-spacing:-.01em}
.proof-copy small{font-size:.75rem;color:var(--muted);white-space:nowrap}
.proof-divider{width:1px;height:38px;background:var(--line);flex:none}
.proof-rating{gap:.75rem}
.rating-stars{display:flex;gap:2px;color:#FFB020;padding:.4rem .5rem;
              background:#FFF8E7;border-radius:10px;flex:none}
.rating-stars svg{width:18px;height:18px}
a.proof-link{color:inherit;text-decoration:none}
a.proof-link small{color:var(--teal-dark);font-weight:600}
a.proof-link:hover small{text-decoration:underline}
.star-off{opacity:.25}

/* Arrow links, used instead of a second button weight */
.link-arrow{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--teal-dark)}
.link-arrow svg{width:17px;height:17px;flex:none;transition:transform .15s ease}
.link-arrow:hover svg{transform:translateX(3px)}

/* ---------- Breadcrumbs ------------------------------------ */
.crumbs{font-size:.87rem;border-bottom:1px solid var(--line)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0;padding:.85rem 0}
.crumbs li+li::before{content:"/";color:#A9BDBF;margin-right:.45rem}
.crumbs a{color:var(--muted)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

/* ---------- Hero ------------------------------------------- */
.hero{padding:clamp(3rem,6vw,5.5rem) 0 clamp(3rem,5vw,4.5rem);background:var(--bg)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
           gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{margin-bottom:.45em}
.hero-art{border-radius:var(--r-lg);overflow:hidden;background:var(--bg-soft)}
.hero-art img,.hero-art svg{width:100%;display:block}
.hero-art picture{display:block}
.hero-art picture img{height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 35%}

/* Simple centred hero for interior pages */
.hero-plain{padding:clamp(2.75rem,5vw,4.5rem) 0 clamp(2rem,3vw,3rem);text-align:center}
.hero-plain .lede{margin-inline:auto}

/* ---------- Trust strip ------------------------------------ */
.trust{border-block:1px solid var(--line);padding:1.5rem 0;background:var(--bg-soft)}
.trust ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
          justify-content:center;gap:.7rem 2.4rem;font-size:.95rem;font-weight:500;color:var(--muted)}
.trust li{display:flex;align-items:center;gap:.5rem}
.trust a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.trust svg{width:18px;height:18px;color:var(--teal-dark);flex:none}

/* ---------- Sections --------------------------------------- */
.band{padding:clamp(3.25rem,6vw,5.5rem) 0}
.band-soft{background:var(--bg-soft)}
/* Wide enough for a section heading to sit on one line on desktop;
   the intro paragraph under it keeps a comfortable reading width. */
.band-head{max-width:800px;margin:0 auto clamp(2rem,4vw,3rem);text-align:center}
.band-head .lede{max-width:640px;margin-inline:auto}
.band-head.center{margin-inline:auto}
.band-head.band-head-wide{max-width:960px}
.eyebrow{font-size:.95rem;font-weight:600;color:var(--teal-dark);margin-bottom:.7rem}

/* ---------- Why Level 2 ----------------------------------- */
.level2-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
             gap:clamp(1.5rem,3vw,2.25rem)}
.level2-image{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
              background:var(--bg-soft);margin-bottom:1.35rem}
.level2-item h3{font-size:1.2rem;margin-bottom:.5rem}
.level2-item>p{color:var(--muted);font-size:1rem;line-height:1.7;margin-bottom:0}

/* ---------- Feature trio ----------------------------------- */
/* No cards, no borders, no shadows. Whitespace does the grouping. */
.features{display:grid;gap:clamp(2rem,4vw,3.25rem);
          grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.feature .ficon{width:52px;height:52px;border-radius:16px;background:var(--bg-soft);
                display:grid;place-items:center;margin-bottom:1.15rem}
.band-soft .feature .ficon{background:#fff}
.feature .ficon svg{width:26px;height:26px;color:var(--teal-dark)}
.feature h3{margin-bottom:.45rem}
.feature p{color:var(--muted);margin-bottom:0;font-size:1rem}

/* ---------- Price callout ---------------------------------- */
.price-callout{background:var(--bg-soft);border-radius:var(--r-lg);
               padding:clamp(2.25rem,5vw,3.5rem);text-align:center}
.band-soft .price-callout{background:#fff}
.price-callout .figure{font-size:clamp(2.4rem,5.5vw,3.5rem);font-weight:700;
                       letter-spacing:-.03em;color:var(--ink);line-height:1.05;margin-bottom:.5rem}
.price-callout p{max-width:56ch;margin-inline:auto;color:var(--muted)}

/* ---------- Steps ------------------------------------------ */
.steps{display:grid;gap:clamp(1.25rem,2.5vw,1.75rem);
       grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:s}
.step{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--r);
      overflow:hidden;box-shadow:var(--shadow)}
.step-image{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--bg-soft)}
.step-body{padding:1.35rem 1.4rem 1.5rem}
.step-title{display:flex;align-items:flex-start;gap:.8rem;margin-bottom:.7rem}
.step .num{width:38px;height:38px;border-radius:999px;
           background:linear-gradient(135deg,#01ABE6 0%,#00C9B7 100%);color:#fff;
           display:grid;place-items:center;font-weight:700;font-size:1.02rem;flex:0 0 38px;
           box-shadow:0 7px 16px -9px rgba(1,128,174,.8)}
.step .num::before{content:counter(s)}
.step h3{font-size:1.15rem;margin:.25rem 0 0}
.step p{color:var(--muted);font-size:.98rem;margin-bottom:0}
.steps-compact{list-style:none;margin:0 0 1.5rem;padding:0;counter-reset:s;
               display:grid;gap:.75rem 2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.steps-compact li{counter-increment:s;display:flex;align-items:center;gap:.8rem;font-weight:600}
.steps-compact li::before{content:counter(s);width:32px;height:32px;flex:0 0 32px;border-radius:999px;
               background:linear-gradient(135deg,#01ABE6 0%,#00C9B7 100%);color:#fff;
               display:grid;place-items:center;font-size:.92rem}

/* ---------- Cards (chargers, projects, posts) --------------- */
.cards{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
      padding:1.5rem;display:flex;flex-direction:column}
.card img{border-radius:10px;margin-bottom:1rem;aspect-ratio:3/2;object-fit:cover;background:var(--bg-soft)}
.card h3{font-size:1.12rem;margin-bottom:.3rem}
.card .meta{font-size:.87rem;color:var(--muted);margin-bottom:.6rem}
.card p{font-size:.97rem;color:var(--muted)}
.card .price{margin-top:auto;padding-top:.9rem;font-weight:700;font-size:1.15rem;color:var(--ink)}
.card h3 a{color:inherit}

/* Service photographs retain the complete equipment in portrait and landscape shots. */
.service-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.service-card{padding:0;overflow:hidden}
.service-card-link{display:block;color:inherit}
.service-card-link:hover h2{text-decoration:underline;text-underline-offset:.2em}
.service-card-link:focus-visible{outline:3px solid var(--teal-dark);outline-offset:-3px}
.service-card .service-card-image{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;
  background:var(--bg-soft);border-radius:0;margin:0}
.service-card h2{font-size:1.12rem;line-height:1.4;letter-spacing:0;margin:1.25rem 1.5rem .4rem}
.service-card-summary{margin:0 1.5rem 1.5rem}
.service-photo{margin:0 0 1.75rem}
.service-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;
  border-radius:var(--r);background:var(--bg-soft)}
.service-photo figcaption{margin-top:.6rem;font-size:.88rem;line-height:1.5;color:var(--muted)}
@media(max-width:960px){.service-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.service-cards{grid-template-columns:minmax(0,1fr)}}

/* ---------- Reviews ---------------------------------------- */
.reviews{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(275px,1fr))}
.review{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem}
.band-soft .review{border-color:transparent;box-shadow:var(--shadow)}
.stars{display:flex;gap:2px;margin-bottom:.9rem}
.stars svg{width:17px;height:17px;color:#FFB020}
.review blockquote{margin:0 0 1rem;font-size:1rem;line-height:1.65}
.review figcaption{font-size:.89rem;color:var(--muted)}

/* Google rating card (settings in app/config.php) */
.g-rating{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.25rem 2rem;
          background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.6rem;margin-bottom:1.75rem}
.band-soft .g-rating{border-color:transparent;box-shadow:var(--shadow)}
.g-rating-score{display:flex;align-items:center;gap:1rem}
.g-rating-num{font-size:2.6rem;font-weight:700;line-height:1;letter-spacing:-.03em}
.g-rating-copy{display:grid;gap:.35rem}
.g-rating-copy .stars{margin:0}
.g-rating-copy .stars svg{width:20px;height:20px}
.g-rating-meta{font-size:.89rem;color:var(--muted)}
.g-rating-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.9rem 1.4rem}
@media(max-width:620px){.g-rating{padding:1.15rem}.g-rating-actions{width:100%}.g-rating-actions .btn{flex:1 1 100%}}

/* ---------- Below-the-fold rendering -------------------------
   Sections after the hero skip layout and paint until they near the
   viewport. contain-intrinsic-size keeps the scrollbar stable; "auto"
   remembers the real height once a section has rendered. */
.band{content-visibility:auto;contain-intrinsic-size:auto 640px}

/* ---------- About ------------------------------------------------ */
.about-owner{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.about-owner img{border-radius:var(--r-lg);width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.about-owner .prose h2{margin-top:0}
@media (max-width:720px){.about-owner{grid-template-columns:1fr}.about-owner img{max-width:240px}}

/* ---------- Area / city lists ------------------------------- */
.area-cols{columns:4;column-gap:2rem;font-size:.98rem;max-width:960px;
           margin-inline:auto;text-align:center}
.area-cols a,.area-cols>span{display:block;padding:.34rem 0;color:var(--ink)}
.area-cols a:hover{color:var(--teal-dark);text-decoration:none}
.service-area-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.15rem 2rem}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem}
.chips a{display:block;padding:.5rem 1.05rem;border:1px solid var(--line);border-radius:999px;
         font-size:.94rem;color:var(--ink);background:#fff}
.chips a:hover{border-color:var(--teal);color:var(--teal-dark);text-decoration:none}

/* Local facts — replaces the old dark faceplate panel */
.facts{margin:0;border-top:1px solid var(--line)}
.facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
           padding:.95rem 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted);font-size:.96rem;margin:0;flex:none}
.facts dd{margin:0;text-align:right;font-weight:500}

/* ---------- FAQ -------------------------------------------- */
.faq{max-width:var(--narrow);margin-inline:auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:1.35rem 2.5rem 1.35rem 0;position:relative;
             font-size:1.1rem;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.5rem;top:1.7rem;width:10px;height:10px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq-a{padding-bottom:1.4rem;color:var(--muted)}
.faq-a p:last-child{margin-bottom:0}

/* ---------- CTA -------------------------------------------- */
.cta{background:var(--bg-soft);padding:clamp(3.25rem,6vw,5rem) 0;text-align:center}
.cta p{max-width:48ch;margin-inline:auto;color:var(--muted)}
.cta-phone{margin-top:1.75rem;font-size:.97rem;color:var(--muted)}
.cta-phone a{font-weight:600}

/* ---------- Forms ------------------------------------------ */
.lead-form{max-width:680px}
.field-row{display:grid;gap:0 1.25rem;grid-template-columns:repeat(auto-fit,minmax(225px,1fr))}
.field{margin-bottom:1.3rem}
.field label{display:block;font-size:.93rem;font-weight:600;margin-bottom:.45rem}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;padding:.85rem 1rem;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,201,183,.18);outline:none}
.field textarea{resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.88rem;color:var(--muted)}
.notice{border-radius:var(--r);padding:1.15rem 1.35rem;margin-top:1.5rem;background:var(--bg-soft);
        border-left:3px solid var(--teal)}

/* ---------- Contact ---------------------------------------- */
.contact-hero{padding-block:clamp(3.5rem,7vw,6.5rem)}
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
              gap:clamp(2.5rem,7vw,6.5rem);align-items:start}
.contact-copy{padding-top:.75rem}
.contact-copy h1{max-width:10ch}

.contact-cards{display:grid;gap:.85rem;margin-top:2.25rem}
.contact-card{display:flex;align-items:flex-start;gap:1.1rem;padding:1.2rem 1.35rem;
  background:#fff;border:1px solid var(--line);border-radius:18px;color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
a.contact-card,a.contact-card:hover,a.contact-card *{text-decoration:none}
a.contact-card:hover{border-color:transparent;box-shadow:var(--shadow);transform:translateY(-2px)}
a.contact-card:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.contact-ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--bg-soft);color:var(--teal-dark)}
.contact-card-body{flex:1;min-width:0;display:flex;flex-direction:column}
.contact-label{display:flex;align-items:center;gap:.6rem;font-size:.8rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.contact-value{margin-top:.15rem;font-size:1.12rem;font-weight:700;line-height:1.4;letter-spacing:-.01em}
.contact-address{font-style:normal}
.contact-sub{margin-top:.3rem;font-size:.9rem;line-height:1.5;color:var(--muted)}
.contact-link{color:var(--blue-dark);font-weight:600}
.contact-actions{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem}
.contact-actions a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.contact-actions a:hover{text-decoration-color:currentColor}
.contact-go{flex:none;align-self:center;color:var(--muted);opacity:.55;
  transition:transform .2s ease,opacity .2s ease,color .2s ease}
a.contact-card:hover .contact-go{transform:translateX(3px);opacity:1;color:var(--teal-dark)}

/* The phone card leads on type size; its surface matches the other two. */
.contact-card-call .contact-value{font-size:1.5rem;letter-spacing:-.02em}

.contact-status{display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .6rem;border-radius:999px;
  background:#F1F4F5;color:var(--muted);font-size:.72rem;letter-spacing:.02em;text-transform:none}
.contact-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#9AABAE}
.contact-status.is-open{background:rgba(0,201,183,.13);color:var(--teal-dark)}
.contact-status.is-open::before{background:var(--teal);box-shadow:0 0 0 3px rgba(0,201,183,.25)}
.contact-hours{margin:.45rem 0 0;display:grid;gap:.2rem;max-width:250px}
.contact-hours div{display:flex;justify-content:space-between;gap:1rem;font-size:.95rem}
.contact-hours dt{color:var(--muted)}
.contact-hours dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}

.contact-trust{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;
  font-size:.9rem;font-weight:600;color:var(--muted)}
.contact-trust li{display:inline-flex;align-items:center;gap:.45rem}
.contact-trust svg{color:var(--teal-dark)}
.contact-trust a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.contact-trust a:hover{color:var(--ink)}
.contact-panel{background:var(--bg-soft);border-radius:var(--r-lg);padding:clamp(1.5rem,4vw,2.5rem)}
.contact-panel h2{font-size:1.35rem;margin-bottom:1.4rem}
.contact-panel .lead-form{max-width:none}
.contact-panel .btn-row{justify-content:flex-start;margin-top:.5rem}
.contact-panel .notice{margin-top:0;background:#fff}
.contact-panel .notice-err{margin-bottom:1.4rem}
.notice-err{border-left-color:#C2410C;background:#FFF4ED}
.field-error{display:block;margin-top:.4rem;font-size:.86rem;font-weight:600;color:#B42318}
.field [aria-invalid="true"]{border-color:#D92D20}
.field [aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(217,45,32,.15)}
.lead-form button[disabled]{opacity:.65;cursor:progress}

/* ---------- Quote ------------------------------------------ */
/* The quote page carries its own stylesheet (assets/css/quote.css),
   loaded after this file. Only the pieces shared with other forms
   stay here; the old single-column panel, the photo drop zone and
   the confirmation card moved out with the redesign. */
.req{color:#B42318}
.form-group{border:0;margin:0 0 .6rem;padding:1.4rem 0 0;border-top:1px solid var(--line);min-width:0}
.form-group:first-of-type{border-top:0;padding-top:0}
.form-group legend{float:left;width:100%;padding:0;margin:0 0 1rem;font-size:.8rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--teal-dark)}
.form-group legend + *{clear:both}
.field select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235E7378' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 1rem center}
.field ::placeholder{color:#9AABAE}
.field-hint{display:block;margin-top:.4rem;font-size:.85rem;color:var(--muted)}
.btn-block{width:100%}
.file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Footer ----------------------------------------- */
.foot{background:var(--bg-deep);color:#A7C0C3;padding:clamp(3rem,5vw,4.5rem) 0 1.75rem;font-size:.95rem}
.foot-grid{display:grid;gap:2.75rem;grid-template-columns:1.3fr 1fr 1fr 1.2fr}
.foot h3{color:#fff;font-size:.93rem;font-weight:600;margin-bottom:1rem;letter-spacing:0}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:.3rem 0}
.foot a{color:#C3D7D9}
.foot a:hover{color:var(--teal)}
.foot img{margin-bottom:1.25rem}
.foot-rating a{display:inline-flex;align-items:center;gap:.5rem}
.foot-stars{display:inline-flex;gap:1px;color:#FFB020}
.foot-stars svg{width:15px;height:15px}
.foot-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  border-top:1px solid #1E4046;margin-top:3rem;padding-top:1.5rem;font-size:.87rem;color:#7C9B9F}
.foot-legal p{margin:0}

/* ---------- Floating mobile quote button -------------------- */
/* Same gradient as the step numbers. */
.sticky-quote{display:none;position:fixed;right:1rem;z-index:60;
  bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(135deg,#01ABE6 0%,#00C9B7 100%);color:#fff;
  font-size:.95rem;font-weight:700;line-height:1;padding:.85rem 1.3rem;border-radius:999px;
  box-shadow:0 10px 24px -8px rgba(1,128,174,.75)}
.sticky-quote:hover,.sticky-quote:focus{color:#fff;text-decoration:none}

/* ---------- Responsive -------------------------------------- */
@media (max-width:1000px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .area-cols{columns:3}
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .hero-art{order:-1}
  .hero-art picture img{aspect-ratio:4/3;object-position:50% 45%}
  .area-cols{columns:2}
  .service-area-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .level2-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid{grid-template-columns:1fr}
  .contact-copy h1{max-width:14ch}
}
/* Four nav links plus phone and CTA need ~1,050px. Drop the phone
   number first, then fold the links into the menu button. */
@media (max-width:1100px){
  .mast-phone{display:none}
}
@media (max-width:960px){
  .nav{display:none}
  .mast-cta{margin-left:auto}
  .burger{display:block;margin-left:.25rem}
  .m-nav[data-open]{display:block}
}
@media (max-width:720px){
  body{font-size:16px;padding-bottom:4.5rem} /* keeps footer clear of the quote button */
  body.no-sticky-quote{padding-bottom:0}
  .nav,.mast-cta,.mast-phone{display:none}
  .burger{display:block;margin-left:auto}
  .m-nav[data-open]{display:block}
  .foot-grid{grid-template-columns:1fr}
  .sticky-quote{display:block}
  .facts dd{text-align:left}
  .facts>div{flex-direction:column;gap:.15rem}
  .steps{grid-template-columns:1fr}
  .home-proof{display:grid;grid-template-columns:1fr;width:100%;gap:.85rem;padding:1rem}
  .proof-divider{width:100%;height:1px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
@media print{
  .mast,.m-nav,.sticky-quote,.cta,.foot,.crumbs,.trust{display:none}
  body{font-size:12pt;padding:0}
}