/* Mathie Electrical — freshen-up, Sept 2026.
   Targeted fixes only. Keeps the existing design language. */

/* --- homepage header: wordmark was wrapping and colliding with the nav --- */
#nav .logo{white-space:nowrap;display:flex;align-items:center;gap:8px;flex:none;line-height:1;}
#nav .logo span{display:none;}           /* "PTY LTD" — was colliding with the menu */
#nav .nl{flex-wrap:nowrap;}
#nav .nl a{white-space:nowrap;}
#nav .nl .ncta{white-space:nowrap;}

/* --- hero headline was overflowing the viewport at desktop widths --- */
.hero h1{font-size:clamp(3.2rem,7.2vw,7.4rem);overflow-wrap:normal;}
@media(max-width:1000px){.hero h1{font-size:clamp(3rem,11vw,5.4rem);}}

/* --- Google review toast was sitting on top of the hero call buttons --- */
#gToast{left:auto!important;right:18px!important;bottom:18px!important;max-width:260px!important;}
@media(max-width:1000px){#gToast{display:none!important;}}

/* --- the same four numbers appeared three times on one page: keep the hero bar --- */
#page-home .ctr,#page-home .wstat{display:none!important;}

/* --- sub-page header: menu was wrapping to two lines at 1440px --- */
header.site .nav-links{flex-wrap:nowrap;gap:16px;}
header.site .nav-links a{white-space:nowrap;font-size:.78rem;letter-spacing:.05em;}
header.site .logo b,header.site .logo span{white-space:nowrap;}
@media(max-width:1180px){header.site .nav-links{display:none;}}

/* --- respect reduced motion (was missing on the polish layer) --- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

/* --- second pass --- */
/* two quote buttons side by side in the header; keep the main one */
#nav .nl .ncta{display:none!important;}
#nav .logo{font-size:1.15rem;}
/* hero trust line had lost its spacing */
.hero-badges{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;}
.hero-badges .hb{white-space:nowrap;}
/* hero copy was hard to read over the photo in light mode */
html.theme-light .hero .hero-shade{opacity:1;}
html.theme-light .hero h1,html.theme-light .hero .hero-sub,html.theme-light .hero .lede,
html.theme-light .hero p{text-shadow:0 1px 2px rgba(255,255,255,.55);}
.hero h1{line-height:.92;}

/* ===== still mode: no moving parts ===== */
*,*::before,*::after{animation:none!important;transition:none!important;}
html{scroll-behavior:auto!important;}
.fbl-glow,.hero-aurora,.scrollhint{display:none!important;}
.mqs,.mq,.marquee{animation:none!important;}
.mqs *,.marquee *{animation:none!important;transform:none!important;}
.sr,.sr-l,.sr-r{opacity:1!important;transform:none!important;}
.hero-slides .hero-slide-wrap:not(:first-child),.hero-slides .hero-photo:not(.act):not(:first-of-type){display:none!important;}
.hero-slides .hero-photo{opacity:1!important;}
#gToast{display:none!important;}
.ctr-n,.wstat-n{opacity:1!important;}
img,.work-card img,.gal img,.cell img{transform:none!important;}
a:hover img,.work-card:hover img{transform:none!important;}
.hero-video{display:none!important;}
video{display:block;}
/* still mode: elements that used an entrance animation to become visible */
.hero h1,.hero-tagline,.hero-sub,.hero-btns,.hero-badge,.hero-badges,.hst,.hero-bar,.hero-bar-in,
.hq,.hq-body,.hq-step.on,.cta-block,.hero .wrap>*{opacity:1!important;transform:none!important;
  visibility:visible!important;animation:none!important;}
.hero-slides .hero-slide.act,.hero-slides .hero-slide:first-child{opacity:1!important;}
/* still mode: the word-by-word headline reveal wraps each word in a span that starts hidden */
.hero h1 .w,.hero h1 .w>span,.hero h1 span{opacity:1!important;transform:none!important;
  clip-path:none!important;animation:none!important;}

/* quote widget: twelve chips now — tighten so the card doesn't run past the hero */
.hq-chips{gap:7px}
.hq-chip{padding:9px 10px;font-size:.78rem;letter-spacing:.03em;text-transform:none;font-weight:600}
.hq-chip svg{width:15px;height:15px}

/* accessibility pass */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:9999;background:#000;color:#fff;padding:10px 14px;font-weight:700;text-decoration:none}
.skip-link:focus{left:8px;outline:3px solid #03cfd1}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #03cfd1!important;outline-offset:2px}
.fb-soc{margin-top:12px;display:flex;gap:16px;flex-wrap:wrap}
.fb-soc a{font-size:.85rem;color:rgba(255,255,255,.75);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.fb-soc a:hover{color:#fff;border-bottom-color:#03cfd1}

/* share bar on guides */
.share-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:34px 0 8px;padding:16px 0;border-top:1px solid #d8dbde;border-bottom:1px solid #d8dbde;font-size:.9rem}
.share-bar .share-l{font-weight:700;color:#000;margin-right:6px}
.share-bar a,.share-bar button{font:600 .88rem Barlow,system-ui,sans-serif;color:#000;background:#fff;border:1.5px solid #d8dbde;padding:7px 12px;text-decoration:none;cursor:pointer;min-height:36px}
.share-bar a:hover,.share-bar button:hover{border-color:#03cfd1;background:#e9fbfb}
.share-bar .share-native{background:#000;color:#fff;border-color:#000}
.share-bar .share-follow{margin-left:auto;color:#5b6166}
.share-bar .share-follow a{border:none;padding:0;background:none;color:#046b6d;font-weight:600;min-height:0}
@media(max-width:640px){.share-bar .share-follow{margin-left:0;width:100%;margin-top:4px}}
.byline{margin:8px 0 0;font-size:.9rem;color:#5b6166}

/* contact page: service-area map */
.mapwrap{position:relative;width:100%;aspect-ratio:16/9;max-height:420px;border:1px solid #d8dbde;background:#eef0f1;margin-top:18px}
.mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.maparea{margin-top:12px;font-size:.92rem;color:#5b6166}
@media(max-width:640px){.mapwrap{aspect-ratio:4/3}}
/* homepage contact: service-area map (the contact page block is dark, so this sits on white) */
#page-contact .mapsec{background:#fff;padding:70px 0}
#page-contact .mapsec .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
#page-contact .mapsec h2{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(1.8rem,3.2vw,2.5rem);color:#000;margin:0 0 10px;text-transform:none;border-top:3px solid #03cfd1;padding-top:14px}
#page-contact .mapsec p{color:#5b6166;max-width:62ch;margin:0}
@media(max-width:640px){#page-contact .mapsec{padding:44px 0}}
/* Text us — three even actions on one row */
.hero .cta-alt{display:flex;flex-wrap:nowrap;align-items:stretch;gap:8px}
.hero .cta-alt .cta-or{display:none}
.hero .cta-alt > a{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;
  text-align:center;white-space:nowrap;padding-left:8px;padding-right:8px}
@media(max-width:900px){
  .hero .cta-alt{flex-wrap:wrap}
  .hero .cta-alt > a{flex:1 1 46%}
  .hero .cta-alt > a.cta-sms{flex:1 1 100%}
}
#mob-cta{grid-template-columns:1fr 1fr 1fr!important}
#mob-cta .mc-sms{background:#fff!important;color:#000!important;font-weight:700}
.byline{margin:10px 0 0;font-size:.88rem;color:#5b6166}
/* Text button: Messages green, pill, bubble icon */
.hero .cta-alt .cta-sms.imsg,.imsg{background:#34c759!important;border:1.5px solid #34c759!important;color:#fff!important;border-radius:999px!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:8px;text-transform:none!important;letter-spacing:0!important;font-family:'Barlow',system-ui,sans-serif!important;font-weight:600!important;font-size:1rem!important}
.hero .cta-alt .cta-sms.imsg:hover,.imsg:hover{background:#2db24e!important;border-color:#2db24e!important;color:#fff!important}
#mob-cta .mc-sms.imsg{border-radius:0!important;font-family:'Barlow',system-ui,sans-serif!important;font-weight:700!important}
#mob-cta .mc-sms.imsg{background:#34c759!important;color:#fff!important;border:none!important}

/* postcode chip on suburb pages */
.pcode{display:inline-block;background:#03cfd1;color:#000;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:.92rem;letter-spacing:.04em;padding:2px 8px;margin-right:8px;vertical-align:1px}

/* supplier strip */
.sup{background:#f4f5f6;border-top:1px solid #cfeeee;border-bottom:1px solid #cfeeee;padding:26px 0}
.sup .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.sup p{font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#5b6166;margin:0 0 14px}
.sup ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 12px}
.sup li{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.05rem;color:#000;
  border:1.5px solid #d8dbde;background:#fff;padding:8px 14px;letter-spacing:.01em}
.sup li.t{border-color:#03cfd1}
@media(max-width:640px){.sup li{font-size:.95rem;padding:7px 11px}}
.sup li .tag{display:block;font-family:'Barlow',system-ui,sans-serif;font-weight:500;font-size:.72rem;
  letter-spacing:.04em;text-transform:uppercase;color:#046b6d;margin-top:1px}
.sup li.badge{padding:0!important;border:none!important;background:none!important;display:flex;align-items:center}
.sup li.badge img{display:block;width:200px;height:auto;border:1.5px solid #d8dbde;background:#fff}
@media(max-width:640px){.sup li.badge img{width:170px}}


.sup li .tag{display:block;font-family:'Barlow',system-ui,sans-serif;font-weight:500;font-size:.72rem;
  letter-spacing:.04em;text-transform:uppercase;color:#046b6d;margin-top:1px}

.sup li.badge{padding:0!important;border:none!important;background:none!important;display:flex;align-items:center}
.sup li.badge img{display:block;width:200px;height:auto;border:1.5px solid #d8dbde;background:#fff}
@media(max-width:640px){.sup li.badge img{width:170px}}

/* =====================================================================
   HOMEPAGE HERO — single consolidated block (replaces the earlier layers)
   Container 1240px · height driven by content, capped 650–780 on desktop
   ===================================================================== */
:root{--mx:1240px}

/* ---- header ---- */
#nav{background:#0b0d0e!important;height:64px!important;display:flex!important;align-items:center!important;
  gap:0!important;padding:0 max(20px,calc((100vw - var(--mx))/2))!important;justify-content:flex-start!important}
#nav .logo,#nav .logo em{color:#fff!important}
#nav .logo{font-size:1.12rem!important;letter-spacing:.01em!important;white-space:nowrap!important;flex:none!important}
#nav .logo em{color:#03cfd1!important}
#nav .logo span{display:none!important}
#nav .nl{display:flex!important;gap:20px!important;margin:0 0 0 36px!important;padding:0!important;align-items:center!important}
#nav .nl li:first-child{display:none!important}
#nav .nl a{font:500 .95rem 'Barlow',system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;
  color:rgba(255,255,255,.75)!important;white-space:nowrap!important;padding:6px 0!important}
#nav .nl a:hover,#nav .nl a.act{color:#fff!important}
#nav .nl .ncta{display:none!important}
#nav .nav-cta{margin-left:auto!important;flex:none!important;background:#03cfd1!important;color:#000!important;border:none!important;
  border-radius:8px!important;padding:11px 20px!important;box-shadow:none!important;
  font:700 .95rem 'Barlow',system-ui,sans-serif!important;letter-spacing:.01em!important;text-transform:none!important;white-space:nowrap!important}
#nav .nav-cta:hover{background:#fff!important}
@media(max-width:1080px){#nav .nl{display:none!important}}
@media(max-width:600px){#nav .nav-cta{display:none!important}#nav{padding:0 18px!important}}

/* ---- hero shell ---- */
.hero{position:relative;background:#0b0d0e!important;display:block!important;
  min-height:0!important;padding:0!important;overflow:hidden}
.hero-slides,.hero-slides .hero-slide-wrap{position:absolute!important;inset:0!important}
.hero-slides .hero-photo{width:100%!important;height:100%!important;object-fit:cover!important;object-position:64% 32%!important}
.hero .hero-shade,.hero-shade{position:absolute!important;inset:0!important;opacity:1!important;
  background:linear-gradient(100deg,rgba(7,9,10,.95) 0%,rgba(7,9,10,.88) 34%,rgba(7,9,10,.55) 58%,rgba(7,9,10,.18) 82%,rgba(7,9,10,.05) 100%)!important}
.hero .hero-aurora,.hero .fbl-glow,.hero .scrollhint,.hero-badge,.hero .hst,.hero-tagline,.hero-bot{display:none!important}

.hero-content{position:relative!important;z-index:2!important;
  max-width:var(--mx)!important;margin:0 auto!important;padding:0 20px!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) 420px!important;gap:56px!important;
  align-items:center!important;min-height:660px!important}
.hero-txt{max-width:36ch}

/* ---- type ---- */
.hero h1{color:#fff!important;text-shadow:none!important;text-transform:none!important;
  font-size:clamp(2.7rem,4.6vw,4.2rem)!important;line-height:1.02!important;letter-spacing:-.02em!important;
  font-weight:800!important;margin:0!important}
.hero h1 em,.hero h1 .hl{color:#03cfd1!important;-webkit-text-fill-color:#03cfd1!important;background:none!important;
  text-shadow:none!important;filter:none!important;font-style:normal!important}
.hero h1 .h1-sub{display:block!important;margin-top:16px!important;
  font:600 1.15rem 'Barlow',system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;line-height:1.35!important}
.hero-sub,.hero .lede,.hero-txt>p{margin:18px 0 0!important;color:rgba(255,255,255,.82)!important;text-shadow:none!important;
  font-size:1.0625rem!important;line-height:1.65!important;max-width:44ch!important}
.hero-badges{display:flex!important;flex-wrap:wrap!important;gap:8px 20px!important;margin:20px 0 0!important}
.hero-badges .hb{color:rgba(255,255,255,.92)!important;opacity:1!important;text-shadow:none!important;
  font:500 .9375rem 'Barlow',system-ui,sans-serif!important}

/* ---- actions: one primary, one secondary ---- */
.cta-block{margin:26px 0 0!important;display:block!important;width:max-content!important;max-width:100%!important}
.cta-main{background:#03cfd1!important;border:none!important;border-radius:10px!important;box-shadow:none!important;
  padding:15px 30px!important;animation:none!important;transform:none!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:48px!important}
.cta-main .cta-ico,.cta-main .cta-arrow,.cta-main small{display:none!important}
.cta-main .cta-txt b{font:700 1.0625rem 'Barlow',system-ui,sans-serif!important;color:#000!important;
  text-transform:none!important;letter-spacing:.01em!important}
.hero .cta-alt{margin:12px 0 0!important;display:flex!important;flex-wrap:wrap!important;gap:10px!important;align-items:center!important}
.hero .cta-alt .cta-or{display:none!important}
.hero .cta-alt>a{border-radius:10px!important;box-shadow:none!important;background:transparent!important;
  border:1.5px solid rgba(255,255,255,.45)!important;color:#fff!important;
  font:600 .9375rem 'Barlow',system-ui,sans-serif!important;text-transform:none!important;letter-spacing:0!important;
  padding:12px 20px!important;min-height:44px!important;display:inline-flex!important;align-items:center!important}
.hero .cta-alt>a:hover{background:#fff!important;color:#000!important;border-color:#fff!important}
.hero .cta-alt>a.cta-sms.imsg{background:#34c759!important;border-color:#34c759!important;color:#fff!important;border-radius:999px!important}
.hero .cta-alt>a.cta-sms.imsg:hover{background:#2db24e!important;color:#fff!important}

/* ---- Google rating: in the flow, under the actions ---- */
.grev{position:static!important;display:inline-flex!important;width:auto!important;margin:22px 0 0!important;
  border-radius:10px!important;box-shadow:none!important;animation:none!important;
  background:rgba(255,255,255,.96)!important;padding:10px 16px!important}

/* ---- quote form ---- */
.hero-content>.hq{grid-column:2!important;grid-row:1!important;justify-self:end!important;align-self:center!important;
  width:420px!important;max-width:100%!important;margin:0!important;
  background:#fff!important;border:1px solid #e2e5e7!important;border-radius:12px!important;
  box-shadow:0 8px 28px rgba(0,0,0,.18)!important;padding:26px 26px 22px!important;opacity:1!important;animation:none!important}
.hq::before{display:none!important}
.hq-dot{display:none!important}
.hq h2{font:700 1.375rem 'Barlow Condensed',sans-serif!important;text-transform:none!important;letter-spacing:0!important;
  color:#000!important;margin:0!important}
.hq-sub{font-size:.9375rem!important;color:#5b6166!important;margin:6px 0 0!important;line-height:1.5!important}
.hq-prog{margin:16px 0 14px!important}
.hq-prog i{border-radius:2px!important}
.hq-chips{gap:8px!important}
.hq-chip{border-radius:10px!important;box-shadow:none!important;border:1.5px solid #e2e5e7!important;background:#fff!important;
  font:600 .875rem 'Barlow',system-ui,sans-serif!important;text-transform:none!important;letter-spacing:0!important;
  min-height:44px!important;padding:10px 12px!important;color:#000!important}
.hq-chip:hover{border-color:#03cfd1!important;background:#f0fdfd!important;transform:none!important}
.hq-chip:focus-visible{outline:3px solid #03cfd1!important;outline-offset:2px!important}
.hq-chip[aria-pressed="true"],.hq-chip.on{background:#03cfd1!important;border-color:#03cfd1!important;color:#000!important}
.hq-field input{border-radius:10px!important;box-shadow:none!important;border:1.5px solid #e2e5e7!important;
  min-height:46px!important;font-size:1rem!important}
.hq-field input:focus{border-color:#000!important;outline:3px solid #03cfd1!important;outline-offset:1px!important}
.hq-field input:invalid:not(:placeholder-shown){border-color:#c0392b!important}
.hq-send{border-radius:10px!important;background:#000!important;color:#fff!important;box-shadow:none!important;
  min-height:48px!important;font:700 1.0625rem 'Barlow',system-ui,sans-serif!important;text-transform:none!important}
.hq-send:hover{background:#046b6d!important;transform:none!important}
.hq-alt{font-size:.875rem!important}
.hq-err{font-size:.875rem!important;color:#c0392b!important}

/* ---- stat bar under the hero ---- */
.hero-bar{background:#0b0d0e!important;border-top:1px solid rgba(255,255,255,.12)!important}
.hero-bar .ctr-n,.hero-bar b,.hero-bar strong{color:#fff!important;background:none!important;
  -webkit-text-fill-color:#fff!important;text-shadow:none!important;filter:none!important}
.hero-bar small,.hero-bar span{color:rgba(255,255,255,.6)!important}

/* ---- after-hours widget: compact, never over the form ---- */
#mchat{right:18px!important;bottom:18px!important;z-index:400!important}
#mchat-b{border-radius:999px!important;box-shadow:0 4px 14px rgba(0,0,0,.25)!important}

/* ---- tablet ---- */
@media(max-width:1080px){
  .hero-content{grid-template-columns:1fr!important;gap:30px!important;min-height:0!important;
    padding-top:48px!important;padding-bottom:48px!important}
  .hero-content>.hq{grid-column:1!important;grid-row:2!important;justify-self:stretch!important;width:100%!important;display:block!important}
  .hero-txt{max-width:none}
  .hero .hero-shade{background:linear-gradient(180deg,rgba(7,9,10,.62) 0%,rgba(7,9,10,.88) 52%,rgba(7,9,10,.96) 100%)!important}
  .hero-slides .hero-photo{object-position:62% 30%!important}
}
/* ---- mobile ---- */
@media(max-width:640px){
  .hero-content{padding:36px 18px 40px!important;gap:24px!important}
  .hero h1{font-size:2.5rem!important}
  .hero h1 .h1-sub{font-size:1.0625rem!important;margin-top:12px!important}
  .hero-sub,.hero .lede,.hero-txt>p{font-size:1rem!important;margin-top:14px!important}
  .cta-block{width:100%!important}
  .cta-main{width:100%!important}
  .hero .cta-alt>a{flex:1 1 calc(50% - 5px)!important;justify-content:center!important}
  .hero .cta-alt>a.cta-sms.imsg{flex:1 1 100%!important}
  .grev{display:flex!important;width:100%!important}
  .hero-content>.hq{padding:20px!important}
  #mchat{bottom:80px!important;right:12px!important}
  #mchat-b{width:46px!important;height:46px!important;padding:0!important;font-size:0!important;justify-content:center!important}
  #mchat-b i{width:16px!important;height:16px!important;margin:0!important;border-radius:50%!important}
}
/* base sheet still sets min-height:100vh and hides the form below 1140 — override both */
html body .hero{min-height:0!important;height:auto!important;align-items:stretch!important}
html body .hero-content{padding:0 20px!important;max-width:var(--mx)!important;width:100%!important}
@media(min-width:1081px){html body .hero-content{min-height:700px!important}}
@media(max-width:1139px) and (min-width:641px){html body .hq{display:block!important}}
@media(max-width:640px){html body .hq{display:block!important}}
html body .grev{margin:22px 0 0!important}
@media(max-width:640px){
  html body #mchat{bottom:86px!important}
  html body .hero-content{padding:34px 18px 38px!important}
}
/* secondary actions were overlapping: give the row real flow */
html body .hero .cta-alt{display:flex!important;flex-wrap:wrap!important;gap:10px!important;
  align-items:center!important;width:100%!important;position:static!important}
html body .hero .cta-alt>a{position:static!important;float:none!important;flex:0 0 auto!important;white-space:nowrap!important}
html body .hero .cta-alt .cta-or{display:none!important}
/* text column: the headline was clipping mid-word */
html body .hero-txt{max-width:none!important;min-width:0!important}
html body .hero h1{max-width:13ch!important;overflow-wrap:normal!important}
/* review card under the actions, aligned left */
html body .grev{margin:22px 0 0!important;align-self:start!important}
/* tablet: chat bubble above the form, not on it */
@media(max-width:1080px){html body #mchat{bottom:18px!important;right:14px!important}
  html body .hero-content>.hq{margin-bottom:8px!important}}
@media(max-width:820px){html body #mchat-b{width:46px!important;height:46px!important;padding:0!important;font-size:0!important;justify-content:center!important}
  html body #mchat-b i{width:16px!important;height:16px!important;margin:0!important;border-radius:50%!important}}
/* the bubble is fixed to the viewport, so on narrow screens it can sit over the form while
   the form is in view. Hide it while the hero form is on screen. */
@media(max-width:1080px){html body #mchat.hero-hide{display:none!important}}
@media(max-width:640px){
  html body .hero-content{padding-top:84px!important}   /* clear the fixed header */
  html body .hero .cta-alt>a{flex:1 1 calc(50% - 5px)!important;justify-content:center!important}
  html body .hero .cta-alt>a.cta-sms.imsg{flex:1 1 100%!important}
}

/* ---------------- refinement pass ---------------- */
/* 1. one container edge: logo, headline, trust bar and supplier strip all align */
html body #nav{padding:0 max(20px,calc((100vw - 1240px)/2 + 20px))!important}
html body .hero-content{padding-left:max(20px,calc((100vw - 1240px)/2 + 20px))!important;
  padding-right:max(20px,calc((100vw - 1240px)/2 + 20px))!important}
html body .hero-bar .hero-bar-in,html body .sup .wrap{max-width:1240px!important;margin:0 auto!important;
  padding-left:20px!important;padding-right:20px!important}

/* 2. kill the dead space under the hero content */
@media(min-width:1081px){html body .hero-content{min-height:0!important;padding-top:64px!important;padding-bottom:64px!important;align-items:start!important}}

/* 3. tighten the join: trust bar -> supplier strip -> first section */
html body .hero-bar{padding:18px 0!important}
html body .sup{margin:0!important;padding:22px 0!important}
html body .hero-bar + *,html body .sup + *{margin-top:0!important}

/* 4. the primary action shouldn't span the whole column */
html body .cta-block{width:max-content!important}
html body .cta-main{padding:15px 34px!important}
html body .hero .cta-alt{margin-top:10px!important}

/* 5. next section headings match the hero's voice */
html body main h2,html body .vsplit h2,html body .vsplit-txt h2{text-transform:none!important;letter-spacing:-.01em!important}
html body .eyebrow,html body .vsplit .tag,html body .sec-tag{font:600 .78rem 'Barlow',system-ui,sans-serif!important;
  letter-spacing:.1em!important;text-transform:uppercase!important;color:#046b6d!important}

/* photo: keep Mitch clear of the form column */
html body .hero-slides .hero-photo{object-position:56% 34%!important}
@media(max-width:1080px){html body .hero-slides .hero-photo{object-position:58% 30%!important}}
/* hero-content already has the container padding; hero-txt was adding its own */
html body .hero-txt{padding-left:0!important;margin-left:0!important}
html body .hero-content>div:first-child{padding-left:0!important}
html body .sup .wrap{padding-left:max(20px,calc((100vw - 1240px)/2 + 20px))!important;
  padding-right:max(20px,calc((100vw - 1240px)/2 + 20px))!important;max-width:none!important}
html body .hero-bar .hero-bar-in{padding-left:max(20px,calc((100vw - 1240px)/2 + 20px))!important;
  padding-right:max(20px,calc((100vw - 1240px)/2 + 20px))!important;max-width:none!important}
/* hero-content was getting both an auto margin (max-width:1240) AND the container padding */
html body .hero-content{max-width:none!important;margin:0!important;width:100%!important}
/* headline was clipping under the fixed header; give the hero its own top clearance */
@media(min-width:1081px){html body .hero-content{padding-top:96px!important;padding-bottom:72px!important}}
/* trust bar: it sat on a black band with a gap above it */
html body .hero-bar{margin-top:0!important;border-top:none!important}
html body .hero + .hero-bar,html body .hero-bar{background:#f4f5f6!important}
html body .hero-bar .ctr-n,html body .hero-bar b,html body .hero-bar strong,html body .hero-bar .hst{color:#000!important;-webkit-text-fill-color:#000!important}
html body .hero-bar small,html body .hero-bar span{color:#5b6166!important}
@media(max-width:640px){
  /* the actions column was narrower than the copy — match the container */
  html body .cta-block,html body .cta-main,html body .hero .cta-alt{width:100%!important;max-width:none!important}
  html body .hero .cta-alt>a{flex:1 1 100%!important}
}

/* ---- EV page: price line, text button, quick form, one hero image on phones ---- */
.price-line{margin:12px 0 0;font-size:1.05rem;color:#1a1d1f;background:#e9fbfb;border-left:4px solid #03cfd1;padding:10px 14px;max-width:60ch}
.price-line b{color:#000}
.cta-alt .cta-sms.imsg{background:#34c759!important;border-color:#34c759!important;color:#fff!important;border-radius:999px!important;
  display:inline-flex!important;align-items:center;gap:8px;font:600 1rem 'Barlow',system-ui,sans-serif!important;text-transform:none!important;letter-spacing:0!important;padding:11px 18px!important}
.cta-alt .cta-sms.imsg::before{content:"";width:16px;height:16px;background:#fff;border-radius:50% 50% 50% 0}
.quick{background:#fff;border-bottom:1px solid #d8dbde}
.quick .wrap{max-width:1180px;margin:0 auto;padding:22px 28px}
.qform--quick{max-width:none!important;border:1px solid #d8dbde!important;border-top:4px solid #03cfd1!important;padding:18px 20px!important;border-radius:12px!important;background:#fff!important}
.quick-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.quick-head h2{margin:0!important;border:none!important;padding:0!important;font-size:1.35rem!important}
.quick-head p{margin:0;color:#5b6166;font-size:.95rem}
.quick-row{display:grid;grid-template-columns:1fr 1fr 1.3fr auto;gap:10px;align-items:end}
.quick-row label{display:block;font-size:.85rem;font-weight:600;color:#000}
.quick-row input[type=text],.quick-row input[type=tel]{display:block;width:100%;margin-top:4px;min-height:46px;border:1.5px solid #d8dbde;border-radius:10px;padding:10px 12px;font:1rem 'Barlow',system-ui,sans-serif}
.quick-row input:focus{border-color:#000;outline:3px solid #03cfd1;outline-offset:1px}
.quick-tick{display:flex!important;align-items:center;gap:8px;font-weight:500!important;min-height:46px;color:#1a1d1f!important}
.quick-tick input{width:18px;height:18px;accent-color:#03cfd1}
.quick-row .fsub{min-height:48px;border-radius:10px!important;background:#03cfd1!important;color:#000!important;border:none!important;font:700 1.05rem 'Barlow',system-ui,sans-serif!important;padding:0 22px!important;text-transform:none!important;white-space:nowrap}
.quick-row .fsub:hover{background:#000!important;color:#fff!important}
.qform--quick .form-trust{margin:10px 0 0;font-size:.82rem}
@media(max-width:900px){.quick-row{grid-template-columns:1fr 1fr}.quick-row .fsub{grid-column:1/-1}.quick-tick{grid-column:1/-1;min-height:0}}
@media(max-width:640px){
  .quick .wrap{padding:16px 18px}
  .quick-row{grid-template-columns:1fr}
  /* one hero image on phones: the first, and nothing else */
  .hero .hero-gallery img:not(:first-child),.hero .hero-pics img:not(:first-child),.hero picture:not(:first-of-type){display:none!important}
  .hero img[loading=lazy]{display:none!important}
  .price-line{font-size:.98rem;padding:9px 12px}
  .cta-alt .cta-sms.imsg{width:100%;justify-content:center}
}
/* EV hero on phones: first photo only */
@media(max-width:640px){.hero-ev-media .hem-row img:not(:first-child),.hero-ev-media .hem-row picture:not(:first-of-type){display:none!important}
  .hero-ev-media .hem-row{grid-template-columns:1fr!important}}

/* ---- sub-page header + hero on phones: get the copy and Call above the fold ---- */
@media(max-width:640px){
  .topbar{display:none!important}
  header.site{position:sticky;top:0;z-index:500}
  header.site .nav{height:58px!important;gap:10px!important}
  header.site .logo small{display:none!important}
  header.site .logo b{font-size:1rem!important}
  header.site .call-btn{font-size:.85rem!important;padding:8px 10px!important;white-space:nowrap!important;margin-left:auto!important}
  header.site .nav-cta{display:none!important}             /* the sticky bar has Get a quote */
  .hero{padding:22px 0 26px!important}
  .crumbs{margin-bottom:12px!important}
  .hero-ev-grid{display:flex!important;flex-direction:column!important;gap:16px!important;margin-top:0!important}
  .hero-ev-copy{order:0}
  .hero-ev-media{order:1}
  .hero-ev-media .hem-row{grid-template-columns:1fr!important}
  .hero-ev-media .hem-row img:not(:first-child),.hero-ev-media .hem-row picture:not(:first-of-type){display:none!important}
  .hero-ev-copy .mega{font-size:2.3rem!important}
  .hero .gbadge{margin:8px 0!important}
}
@media(max-width:640px){
  /* header: the call button was running off the right edge */
  header.site .call-btn{font-size:.82rem!important;padding:8px 9px!important}
  header.site .logo b{font-size:.95rem!important}
  /* hero: 110px of nothing above the crumbs, and the sub copy was invisible dark-on-dark */
  html body .hero{padding:14px 0 22px!important}
  .hero .wrap{padding-top:0!important}
  .hero-ev-copy .sub,.hero .sub{color:rgba(255,255,255,.85)!important;font-size:.98rem!important;line-height:1.5!important;margin:12px 0 0!important}
  .hero .byline{display:none!important}                   /* it's on the page below; not first-screen content */
  .hero .gbadge{transform:none!important;margin:10px 0!important;padding:8px 12px!important}
  .hero-ev-copy .mega{font-size:2.15rem!important;line-height:1.02!important}
  .price-line{margin-top:10px!important}
  .cta-block{margin-top:14px!important}
}
@media(max-width:640px){
  header.site .nav{padding:0 12px!important}
  header.site .call-btn{font-size:.8rem!important;padding:8px 8px!important;letter-spacing:0!important}
  header.site .logo{gap:6px!important}
  header.site .logo .bolt{width:14px!important}
}
.callbar--3{display:grid!important;grid-template-columns:1fr 1fr 1fr!important}
.callbar--3 a{border-radius:0!important;font:700 1rem 'Barlow',system-ui,sans-serif!important;text-transform:none!important;letter-spacing:0!important;min-height:56px;display:flex;align-items:center;justify-content:center}
.callbar--3 .c3{background:#34c759!important;color:#fff!important}

/* ---- extra (optional) quote details ---- */
.qmore{margin-top:14px;padding-top:14px;border-top:1px dashed #d8dbde}
.qmore-h{margin:0 0 10px;font-size:.92rem;font-weight:600;color:#000}
.qmore-h span{font-weight:400;color:#5b6166}
.qmore-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.qmore-grid label{display:block;font-size:.84rem;font-weight:600;margin-bottom:4px;color:#000}
.qmore-grid input,.qmore-grid select{width:100%;min-height:44px;border:1.5px solid #d8dbde;border-radius:10px;padding:10px 12px;font:1rem 'Barlow',system-ui,sans-serif;background:#fff;color:#000}
.qmore-grid input:focus,.qmore-grid select:focus{border-color:#000;outline:3px solid #03cfd1;outline-offset:1px}
@media(max-width:640px){.qmore-grid{grid-template-columns:1fr}}
/* callback modal: extra rows */
.cb-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cb-opt{font-weight:400;opacity:.65;text-transform:none;letter-spacing:0}
.cb-field select{width:100%;min-height:46px}
@media(max-width:560px){.cb-row{grid-template-columns:1fr}}