/* heightselectric.ca
   The header is ev-pro.ca's, rule for rule, minus the two things that belong to
   the estimator (the EV PRO wordmark and the EN/中 toggle) — Chuck wants the two
   sites to read as one business. If you change a header measurement here, it
   has probably been measured on ev-pro.ca first; read the comments there. */

:root{
  --page:#EDF0F2;
  --card:#FFFFFF;
  --card-2:#F7F9FA;
  --ink:#11161A;
  --muted:#5C6771;
  --line:#DCE2E6;
  --line-strong:#C4CDD3;
  --accent:#FF8200;
  --accent-ink:#9E5000;
  --accent-wash:#FFF4E8;
  --bar:#101519;
  --bar-2:#161B20;
  --bar-ink:#F2F4F5;
  --good:#1E7A57;
  --promo-bg:#FFF1E0;
  --promo-ink:#B85800;
  --shadow:0 1px 2px rgba(16,21,25,.06), 0 12px 32px -16px rgba(16,21,25,.28);
  --sans:"Segoe UI","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --label:var(--sans);
  --r:10px;
  --w:1200px;   /* content column; was 940 (ev-pro.ca's). Chuck, 29 Oct 2026, after comparing 940/1140/1200/1320 at 1920 and 1366 */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--page); color:var(--ink); font-family:var(--sans);
     font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased}
img:where(:not(.evp *)){max-width:100%; height:auto}
a:where(:not(.evp *)){color:var(--accent-ink)}
.skiplink{position:absolute; left:-9999px}
.skiplink:focus{left:12px; top:12px; z-index:99; background:#fff; padding:8px 12px}
.draftbar{background:#7A1F1F; color:#fff; font:600 12px/1 var(--sans); letter-spacing:.06em;
          text-transform:uppercase; text-align:center; padding:7px}
.draftbar.review{background:#8A5A00}

/* ================================================================ header */
.bar{background:var(--bar); color:var(--bar-ink); border-bottom:2px solid var(--accent)}
.bar-in{max-width:var(--w); margin:0 auto; padding:12px 20px; display:flex;
        align-items:center; gap:10px 16px; flex-wrap:wrap}
.mark{display:flex; flex-direction:column; gap:7px; margin-right:auto}
.lockup{display:flex; align-items:center; gap:11px}
.lockup:focus-visible, .lockup-sq:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.lockup-sq{display:none; position:relative; overflow:hidden; width:124px; height:73px; flex:none}
.lockup-sq img{position:absolute; width:155px; height:112px; left:-17.6px; top:-16.3px; max-width:none}
.glyph{position:relative; overflow:hidden; width:78px; height:46px; flex:none}
.glyph img{position:absolute; left:0; top:0; width:212px; height:46px; max-width:none}
.word{position:relative; overflow:hidden; width:95px; height:29px; flex:none}
.word img{position:absolute; left:-62px; top:-5px; width:157px; height:36px; max-width:none}
.mark-txt{display:flex; flex-direction:column; gap:2px; line-height:1.3}
.slogan{font-family:var(--label); font-size:11px; font-weight:600; letter-spacing:.06em;
        text-transform:uppercase; color:#C9D2D8}
.slogan i{font-style:normal; color:var(--accent); margin:0 7px; font-weight:400}
.lic{font-family:var(--label); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#C9D2D8}
.bar-side{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.trust{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.seal{display:inline-flex; align-items:center; gap:7px; text-decoration:none;
      border:1px solid #333D45; border-radius:8px; padding:5px 10px; color:#C9D2D8; background:var(--bar-2)}
a.seal:hover{border-color:var(--accent)}
.seal svg.g{width:15px; height:15px; flex:none}
.seal-txt{display:flex; flex-direction:column; line-height:1.2}
.seal-txt b{font-size:12px; color:var(--bar-ink); font-weight:600; white-space:nowrap}
.seal-txt small{font-size:10px; color:#8E9AA3; white-space:nowrap}
.seal .stars{color:var(--accent); letter-spacing:.5px; font-size:10.5px}
.esaseal{padding:4px 10px; text-decoration:none}
.esamark{display:block; width:61.7px; height:33px; background:var(--esa) no-repeat;
         background-size:76.4px 36.8px; background-position:-7.35px -1.7px}
.bbbseal{display:inline-flex; align-items:center; border:1px solid #333D45; border-radius:8px;
         padding:0.5px 10px; background:var(--bar-2); line-height:0}
.bbbseal:hover{border-color:var(--accent)}
.bbbseal span{display:block; position:relative; overflow:hidden; width:83px; height:40px}
.bbbseal img{position:absolute; left:0; top:0; width:83px; height:42.4px; max-width:none; border:0}
.bar-actions{display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.bar .tel{display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 13px;
          border:1px solid #333D45; border-radius:8px; font-family:var(--label); font-size:12.5px;
          line-height:1; background:var(--bar-2); color:var(--bar-ink); white-space:nowrap; text-decoration:none}
.bar .contact{background:var(--accent); color:#151005; border-color:var(--accent);
              font-weight:700; text-transform:uppercase; letter-spacing:.07em}
.bar .contact:hover{filter:brightness(1.07)}
@media (min-width:641px){
  .bar-side{gap:7px}
  .trust,.bar-actions{gap:8px}
  .trust > .seal, .bar-actions > .seal{height:43px}
  .bar .bar-side .contact{height:43px; padding:0 10px; font-size:12px; letter-spacing:.05em}
  .trust > .seal{padding:0.5px 10px}
  .bar .trust > .seal svg.g{width:19px; height:19px}
  .bar .trust > .seal .seal-txt b{font-size:13.5px}
  .bar .trust > .seal .seal-txt small{font-size:11px}
  .bar .trust > .seal .stars{font-size:12px}
  .bbbseal, .bar .bar-side .contact{width:105px; justify-content:center}
}

/* ---- the menu row: the one thing ev-pro.ca's header does not have ----
   A single line under the bar, on the same dark ground so header and menu
   read as one block. EV Charger and Panel Upgrade are the two jobs Chuck is
   pushing (LinkNow ticket, Part 2), so they get the accent. */
.site-nav{background:var(--bar); border-bottom:1px solid #232B31}
.nav-in{max-width:var(--w); margin:0 auto; padding:0 12px; display:flex; align-items:stretch; gap:2px}
.nav-in > a, .dd-top{display:flex; align-items:center; gap:6px; padding:0 12px; height:42px;
  color:#C9D2D8; text-decoration:none; font-size:14px; font-weight:500; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px}
.nav-in > a:hover, .dd-top:hover{color:#fff}
.nav-in > a.on, .dd-top.on{color:#fff; border-bottom-color:#C9D2D8}
.nav-in > a.hl{color:var(--accent); font-weight:700}
.nav-in > a.hl:hover{color:#FFA040}
.nav-in > a.hl.on{border-bottom-color:var(--accent)}
.dd{position:relative; display:flex}
.dd-top svg{width:10px; height:6px; fill:none; stroke:currentColor; stroke-width:1.6}
.dd-menu{display:none; position:absolute; top:100%; left:0; z-index:20; min-width:270px;
  background:#fff; border:1px solid var(--line); border-radius:0 0 var(--r) var(--r);
  box-shadow:var(--shadow); padding:6px 0}
.dd:hover .dd-menu, .dd:focus-within .dd-menu{display:block}
.dd-menu a{display:block; padding:7px 16px; color:var(--ink); text-decoration:none; font-size:14px}
.dd-menu a:hover{background:var(--card-2); color:var(--accent-ink)}
.dd-menu a.hl{color:var(--accent-ink); font-weight:700}
.dd-menu a.dd-sep{border-top:1px solid var(--line); margin-top:6px; padding-top:10px; color:var(--muted)}

@media (max-width:640px){
  .bar-in{padding:12px 14px; gap:8px; flex-wrap:nowrap; align-items:center}
  .mark{margin-right:auto; min-width:0}
  .bar-side{width:auto; flex:none; flex-direction:column; align-items:stretch; gap:6px; max-width:118px}
  .trust,.bar-actions{justify-content:stretch}
  .trust .seal{padding:4px 8px; width:100%}
  .seal-txt b{font-size:11.5px}
  .seal-txt small{font-size:9.5px}
  .bar-actions{width:100%}
  .bar .contact{width:100%; height:30px; font-size:12px}
  .lic, .esaseal, .bbbseal, .slogan, .lockup{display:none}
  .lockup-sq{display:block; width:120px; height:71px}
  .lockup-sq img{width:150.4px; height:108.2px; left:-17px; top:-15.7px}
  /* Phone menu: the same items in one row, no hamburger — the two highlighted
     jobs are visible without a tap. The logo already goes home, so Home drops. */
  .nav-in{padding:0 6px; gap:0; justify-content:space-between}
  .nav-in > a, .dd-top{padding:0 7px; height:38px; font-size:13px}
  .nav-in > a.n-home{display:none}
  .dd-top svg{display:none}
  .dd-menu{display:none !important}
}

/* ================================================================ page */
.wrap{max-width:var(--w); margin:0 auto; padding:0 20px}
section:where(:not(.evp *)){padding:44px 0}
section:where(:not(.evp *)) + section{padding-top:0}
:where(h1,h2,h3):not(.evp *){line-height:1.2; margin:0 0 .5em; letter-spacing:-.01em}
h1:where(:not(.evp *)){font-size:38px; font-weight:750}
h2:where(:not(.evp *)){font-size:27px; font-weight:700}
h3:where(:not(.evp *)){font-size:19px; font-weight:700}
p:where(:not(.evp *)){margin:0 0 1em}
.lede{font-size:19px; color:#2B343B; max-width:640px}
.muted{color:var(--muted)}
.small{font-size:14px}
.kicker{font:600 12px/1 var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:12px}

/* ---- buttons: sentence case; paired buttons are the same size (ticket Part 6.2) */
.btns{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:22px 0 8px}
.cta{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px;
     padding:0 22px; border-radius:var(--r); font-size:16px; font-weight:700; text-decoration:none;
     border:2px solid var(--accent); background:var(--accent); color:#151005; min-width:228px}
.cta:hover{filter:brightness(1.06)}
.cta.cta-alt{background:transparent; color:var(--ink); border-color:var(--ink)}
.cta.cta-alt:hover{background:var(--ink); color:#fff; filter:none}
.or{font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.cta svg{width:17px; height:17px; flex:none}

/* ---- hero */
.hero{background:var(--card); border-bottom:1px solid var(--line); padding:40px 0 38px}
.hero-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:32px; align-items:center}
.hero h1{margin-bottom:14px}
.proof{display:flex; flex-wrap:wrap; gap:6px 18px; margin:18px 0 0; padding:0; list-style:none;
       font-size:14px; color:var(--muted)}
.proof li{display:flex; align-items:center; gap:6px}
.proof li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--good)}
.proof b{color:var(--ink)}
.photo-slot{aspect-ratio:4/3; border-radius:var(--r); background:
  repeating-linear-gradient(135deg, #F3F5F6 0 12px, #ECEFF1 12px 24px);
  border:1px dashed var(--line-strong); display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; color:var(--muted); font-size:13px; padding:20px}
.photo-slot b{color:var(--ink); font-size:14px; margin-bottom:4px}
.photo{border-radius:var(--r); overflow:hidden; aspect-ratio:4/3}
.photo img{width:100%; height:100%; object-fit:cover; display:block}

/* ---- service tiles */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px}
.tile{display:flex; flex-direction:column; gap:6px; background:var(--card); border:1px solid var(--line);
      border-radius:var(--r); padding:18px 16px 16px; text-decoration:none; color:var(--ink);
      transition:border-color .15s, transform .15s}
.tile:hover{border-color:var(--accent); transform:translateY(-1px)}
.tile .ic{width:34px; height:34px; border-radius:8px; background:var(--accent-wash); color:var(--accent-ink);
          display:flex; align-items:center; justify-content:center; margin-bottom:6px}
.tile .ic svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.tile b{font-size:16px; line-height:1.25}
.tile span{font-size:13.5px; color:var(--muted); line-height:1.4}
.tile .from{margin-top:auto; padding-top:6px; font-size:13px; color:var(--accent-ink); font-weight:600}
.tile.hl{border-color:var(--accent); box-shadow:inset 0 3px 0 var(--accent)}
.more{display:inline-block; margin-top:16px; font-weight:600; text-decoration:none}
.more:hover{text-decoration:underline}

/* ---- cards and bands */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px 26px 12px}
.band{background:var(--bar); color:var(--bar-ink); border-radius:var(--r); padding:30px 30px 26px}
.band h2{color:#fff}
.band p{color:#C9D2D8}
.band .cta.cta-alt{color:#fff; border-color:#5A656E}
.band .cta.cta-alt:hover{background:#fff; color:var(--ink)}
.doors{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px}
.door{display:flex; flex-direction:column; background:var(--bar-2); border:1px solid #333D45; border-radius:var(--r);
      padding:18px; text-decoration:none; color:var(--bar-ink)}
.door:hover{border-color:var(--accent)}
.door small{font:600 11px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; color:#8E9AA3}
.door b{font-size:18px; margin:8px 0 4px}
.door .fig{font-size:14px; color:#C9D2D8}
.door .fig strong{color:var(--accent); font-size:20px}
.door .door-go{margin-top:14px; font-size:14px; font-weight:700; color:var(--accent)}

.cols{display:grid; grid-template-columns:repeat(2,1fr); gap:28px}
.why{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0 0; padding:0; list-style:none}
.why li{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px}
.why b{display:block; font-size:16px; margin-bottom:4px}
.why span{font-size:14px; color:var(--muted)}

/* ---- the limited-time chip: Chuck's standing rule — a limited-time offer is
   always highlighted, and the deadline sits in the chip, never a sentence tail */
.offer{background:var(--promo-bg); border:1px solid #F5D2A8; border-radius:var(--r); padding:18px 20px 6px; margin:24px 0}
.offer h3{color:var(--promo-ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.chip{display:inline-block; background:var(--promo-bg); color:var(--promo-ink); border:1px solid #F0C48F;
      border-radius:999px; font-size:12.5px; font-weight:700; padding:3px 10px; white-space:nowrap}
.offer .chip{background:#fff}

/* ---- long-form service pages */
.prose{max-width:720px}
.prose h2{margin-top:1.6em; font-size:24px}
.prose h3{margin-top:1.3em}
.prose ul, .prose ol{padding-left:1.25em; margin:0 0 1em}
.prose li{margin-bottom:.35em}
.prose .note{font-size:14px; color:var(--muted); font-style:italic}
table.prices{border-collapse:collapse; width:100%; max-width:520px; margin:10px 0 14px; font-size:15px;
             background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
table.prices th, table.prices td{padding:10px 14px; text-align:left; border-bottom:1px solid var(--line)}
table.prices tr:last-child td{border-bottom:0}
table.prices th{font:600 11.5px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--card-2)}
table.prices td:last-child, table.prices th:last-child{text-align:right; white-space:nowrap}
table.prices td strong{font-size:16px}
.pagehead{background:var(--card); border-bottom:1px solid var(--line); padding:32px 0 30px}
.pagehead .lede{margin-bottom:0}
.crumbs{font-size:13px; color:var(--muted); margin-bottom:10px}
.crumbs a{color:var(--muted)}
.side-cta{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px}

/* ================================================================ footer */
.site-foot{background:var(--bar); color:#C9D2D8; margin-top:40px; font-size:14px; border-top:2px solid var(--accent)}
.foot-in{max-width:var(--w); margin:0 auto; padding:36px 20px 20px; display:grid;
         grid-template-columns:1.4fr 1fr 1fr 1fr; gap:24px}
.site-foot h2{font:600 11.5px/1 var(--label); letter-spacing:.1em; text-transform:uppercase; color:#8E9AA3; margin:6px 0 12px}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li{margin-bottom:6px}
.site-foot a{color:#E4E8EB; text-decoration:none}
.site-foot a:hover{color:var(--accent)}
.f-logo{width:212px; height:auto; margin-bottom:12px}
.f-tel{font-size:18px; font-weight:700}
.foot-base{max-width:var(--w); margin:0 auto; padding:16px 20px 22px; border-top:1px solid #232B31; font-size:12.5px; color:#8E9AA3}

/* sticky CALL US / MESSAGE US on phones — kept exactly as LinkNow had it (ticket 9.5) */
.sticky{display:none}
@media (max-width:640px){
  .sticky{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; height:64px;
          background:var(--bar); border-top:2px solid var(--accent)}
  .sticky-btn{flex:1; display:flex; align-items:center; justify-content:center; color:#fff;
              font-weight:700; letter-spacing:.07em; text-transform:uppercase; text-decoration:none; font-size:15px}
  .sticky-btn:first-child{background:var(--accent); color:#151005}
  body{padding-bottom:64px}
}

/* ================================================================ smaller screens */
@media (max-width:860px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:repeat(3,1fr)}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  section{padding:30px 0}
  h1{font-size:28px}
  h2{font-size:22px}
  .lede{font-size:17px}
  .hero{padding:24px 0 26px}
  .hero-grid{grid-template-columns:1fr; gap:20px}
  .hero .photo-slot, .hero .photo{order:2}
  .btns{gap:8px}
  .cta{width:100%; min-width:0}
  .or{width:100%; text-align:center}
  .doors{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr; gap:10px}
  .tile{padding:14px 12px}
  .tile span{display:none}
  .band{padding:22px 18px 18px}
  .panel{padding:20px 18px 8px}
  .foot-in{grid-template-columns:1fr; gap:10px}
}

/* ---- forms (contact page) */
label.f{display:block; font-size:14px; font-weight:600; margin-bottom:12px}
label.f input, label.f textarea{display:block; width:100%; margin-top:5px; padding:11px 12px; font:16px/1.4 var(--sans);
  border:1px solid var(--line-strong); border-radius:8px; background:#fff; color:var(--ink)}
label.f input:focus, label.f textarea:focus{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
#ts{margin:4px 0 10px}

/* ---- hero: the three instant estimates (stands in for a job photo for now) */
.quick{background:var(--bar); color:var(--bar-ink); border-radius:var(--r); padding:20px 20px 8px; border-top:3px solid var(--accent)}
.quick .kicker{color:var(--accent); margin-bottom:10px}
.q-row{display:flex; align-items:center; gap:10px; padding:12px 12px; margin:0 -8px; border-radius:8px;
       text-decoration:none; color:var(--bar-ink); border-bottom:1px solid #232B31}
.q-row:hover{background:var(--bar-2)}
.q-row span{display:flex; flex-direction:column; flex:1; line-height:1.25}
.q-row b{font-size:16px}
.q-row small{font-size:12.5px; color:#8E9AA3}
.q-row strong{color:var(--accent); font-size:19px; white-space:nowrap}
.q-row i{font-style:normal; color:#8E9AA3}
.quick p{font-size:13px; color:#9AA6AE; margin:12px 0 10px}

/* the first section after the hero keeps its breathing room */
.hero + section{padding-top:36px}
@media (max-width:640px){ .hero + section{padding-top:26px} }

/* ---- Google reviews section — after the Elfsight layout on the LinkNow site */
.reviews .rv-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px 18px; margin:14px 0 12px}
.rv-brand{font-size:18px; font-weight:700; display:flex; align-items:center; gap:6px}
.gw i{font-style:normal; font-weight:700; letter-spacing:-.5px}
.gw i:nth-child(1),.gw i:nth-child(4){color:#4285F4} .gw i:nth-child(2),.gw i:nth-child(6){color:#EA4335}
.gw i:nth-child(3){color:#FBBC05} .gw i:nth-child(5){color:#34A853}
.rv-score{font-size:17px; margin-top:2px}
.rv-score b{font-size:20px}
.rv-stars{color:#FBBC05; letter-spacing:1px}
.rv-write{background:#1A73E8; color:#fff; text-decoration:none; font-weight:700; font-size:14px; padding:10px 16px; border-radius:999px; white-space:nowrap}
.rv-write:hover{background:#1765CC}
.rv-wrap{position:relative}
.rv-track{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:2px 0 4px}
.rv-track::-webkit-scrollbar{display:none}
.rv-card{flex:0 0 calc((100% - 36px)/4); scroll-snap-align:start; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:8px}
.rv-top{display:flex; align-items:center; gap:10px}
.rv-av{width:38px; height:38px; border-radius:50%; background:#5C6BC0; color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:700; overflow:hidden; flex:none}
.rv-av img{width:100%; height:100%; object-fit:cover}
.rv-who{display:flex; flex-direction:column; line-height:1.25; min-width:0; flex:1}
.rv-name{font-weight:700; color:var(--ink); text-decoration:none; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
a.rv-name:hover{text-decoration:underline}
.rv-who small{color:var(--muted); font-size:12.5px}
.rv-g svg{width:18px; height:18px; display:block}
.rv-card .rv-stars{font-size:16px}
.rv-text{margin:0; font-size:14.5px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.rv-card.open .rv-text{-webkit-line-clamp:unset; display:block}
.rv-more{align-self:flex-start; background:none; border:0; padding:0; color:#1A73E8; font:600 14px var(--sans); cursor:pointer}
.rv-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line-strong); background:#fff; box-shadow:var(--shadow); font-size:22px; line-height:1; cursor:pointer; color:var(--ink)}
.rv-arrow.prev{left:-16px} .rv-arrow.next{right:-16px}
@media (max-width:860px){ .rv-card{flex-basis:calc((100% - 12px)/2)} }
@media (max-width:640px){
  .rv-card{flex-basis:84%}
  .rv-arrow{display:none}
  .reviews .rv-head{padding:12px 14px}
}

/* ---- trust strip under the home hero (after Smiley Electric's), 29 Oct 2026 */
.trust-strip{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.hero{border-bottom:0}
.ts-grid{display:grid; grid-template-columns:repeat(4,1fr); padding-top:14px; padding-bottom:14px}
.ts-item{display:flex; align-items:center; gap:10px; padding:4px 14px; border-left:1px solid var(--line)}
.ts-item:first-child{border-left:0; padding-left:0}
.ts-ic{width:40px; height:40px; border-radius:50%; background:var(--accent-wash); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; flex:none}
.ts-ic svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
/* esa-mark.png: the ESA mark alone, cropped square from esa.png (whose white lettering
   is invisible on white but still pushed the mark off-centre) — 29 Oct 2026 */
.ts-ic .ts-esa{width:24px; height:24px; display:block}
.ts-item b{display:block; font-size:14.5px; line-height:1.25}
.ts-item small{display:block; font-size:12.5px; color:var(--muted); line-height:1.3}
.trust-strip + section{padding-top:36px}
@media (max-width:860px){ .ts-grid{grid-template-columns:repeat(2,1fr); gap:10px 0} .ts-item:nth-child(3){border-left:0; padding-left:0} }
@media (max-width:640px){
  .ts-grid{padding-top:12px; padding-bottom:12px}
  .ts-item{padding:2px 8px; gap:8px} .ts-item:nth-child(odd){padding-left:0}
  .ts-ic{width:34px; height:34px} .ts-ic svg{width:18px; height:18px}
  .ts-item b{font-size:13px} .ts-item small{font-size:12px}
  .trust-strip + section{padding-top:26px}
}

/* three "Why" boxes since 29 Oct: one column on a phone, so none sits alone */
@media (max-width:640px){ .why{grid-template-columns:1fr; gap:8px} .why li{padding:14px} }

/* ---- home page rhythm, 29 Oct 2026 (Chuck: "make similar sections similar length")
   Every home section gets the same padding; reviews and "where we work" sit on
   white bands so the page alternates grey / white instead of running together. */
.p-home main > section:not(.hero){padding:52px 0}
.p-home main > section:not(.hero) + section{padding-top:52px}
.p-home main > section > .wrap > h2{margin-bottom:18px}
.band-white{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band-white .rv-head{background:var(--card-2)}
.band-white .side-cta{background:var(--card-2)}
.reviews .rv-head{margin-top:0}
.tiles{margin-top:0}
.tile b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tile .from{font-size:13.5px}
.tile .muted-go{color:var(--muted); font-weight:600}
.tile:hover .muted-go{color:var(--accent-ink)}
.offer-bar{display:flex; align-items:center; gap:14px; margin-top:14px; padding:12px 16px; background:var(--promo-bg);
  border:1px solid #F5D2A8; border-radius:var(--r)}
.offer-bar p{margin:0; flex:1; font-size:14.5px; color:#5A3A12}
.offer-bar b{color:var(--promo-ink)}
.offer-bar a{font-weight:700; color:var(--promo-ink); text-decoration:none; white-space:nowrap}
.offer-bar .chip{background:#fff; flex:none}
.why li{display:flex; flex-direction:column}
@media (max-width:640px){
  .p-home main > section:not(.hero){padding:36px 0}
  .p-home main > section:not(.hero) + section{padding-top:36px}
  .tile b{white-space:normal}
  .offer-bar{flex-wrap:wrap; gap:8px 12px}
  .offer-bar p{flex-basis:100%; order:2}
  .offer-bar a{order:3}
}
/* home ends on a white band: no grey gap before the footer */
.p-home .site-foot{margin-top:0}

/* rating first in the strip (Chuck, 29 Oct): links down to the reviews section */
a.ts-item{text-decoration:none; color:var(--ink)}
a.ts-item:hover b{color:var(--accent-ink)}
.ts-star{color:#E8A400; font-size:22px; line-height:1}
.why{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){ .why{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .why{grid-template-columns:1fr} }
/* phone: "2-year full warranty" needs 120px of a 113px column at 13px; 12px keeps all four strip titles on one line */
@media (max-width:640px){ .ts-item b{font-size:12px} }

/* ================================================================ promo block
   "Get your price in about a minute" — our own build of LinkNow's graphic, at the
   top of the EV, panel and estimate pages (Chuck, 29 Oct 2026). The phone is
   iPhone-proportioned (about 2.1 : 1) and its screen is drawn, not a screenshot. */
.promo-est{background:#fff; border-bottom:1px solid var(--line); overflow:hidden}
.pe-grid{display:grid; grid-template-columns:1fr 300px; gap:30px; align-items:center; padding-top:34px; padding-bottom:30px}
.pe-h{font-size:44px; line-height:1.05; font-weight:800; letter-spacing:-.03em; color:#0F1B33; margin:0 0 16px}
.pe-h em{font-style:normal; color:var(--accent); position:relative; display:inline-block}
.pe-h em svg{position:absolute; left:-2px; bottom:-11px; width:104%; height:15px}
.pe-p{font-size:16px; line-height:1.45; color:#3A4550; margin:0 0 18px; max-width:400px}
.pe-list{list-style:none; margin:0 0 20px; padding:0; display:grid; gap:10px}
.pe-list li{display:flex; align-items:center; gap:12px; font-size:15px; font-weight:700; color:#0F1B33; line-height:1.2}
.pe-list .ic{width:38px; height:38px; border-radius:50%; background:#FFF0D9; color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none}
.pe-list .ic svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.pe-cta{min-width:0}
.pe-phone{position:relative; display:block; justify-self:center; width:236px; text-decoration:none; color:inherit; margin:6px 0}
.pe-glow{position:absolute; width:380px; height:380px; border-radius:50%; background:#FFF1D6; left:40px; top:110px}
.pe-spark{position:absolute; right:-26px; top:-22px; width:64px; height:52px}
.pf{position:relative; display:block; background:#15191D; border-radius:44px; padding:10px; transform:rotate(6deg);
    box-shadow:0 30px 50px -22px rgba(16,21,25,.5), inset 0 0 0 2px #3A4148}
.pe-phone:hover .pf{transform:rotate(6deg) translateY(-3px)}
.pf-screen{display:flex; flex-direction:column; background:#fff; border-radius:35px; overflow:hidden; position:relative;
  height:478px; padding:38px 13px 10px; font-family:var(--sans); color:#11161A; text-align:left}
.pf-status{position:absolute; top:11px; left:0; right:0; height:18px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; font:700 12px/1 var(--sans); color:#111}
.pf-island{position:absolute; left:50%; top:0; transform:translateX(-50%); width:74px; height:22px; background:#15191D; border-radius:12px}
.pf-icons{width:44px; height:11px; display:block}
.ps-rail{display:flex; gap:4px; margin-top:6px}
.ps-rail i{flex:1; height:3px; border-radius:2px; background:#DCE2E6}
.ps-rail i.on{background:var(--accent)}
.ps-labels{display:flex; align-items:baseline; margin-top:5px; font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:#9AA6AE}
.ps-labels b{color:var(--accent-ink); font-weight:700; width:50%}
.ps-labels span{flex:1}
.ps-labels em{font-style:normal; text-transform:none; letter-spacing:0; font-size:8.5px; color:#5C6771}
.ps-q{font-size:16px; font-weight:700; line-height:1.2; margin:14px 0 5px}
.ps-s{font-size:10px; line-height:1.45; color:#5C6771; margin-bottom:10px}
.ps-opt{display:flex; align-items:flex-start; gap:8px; border:1px solid #DCE2E6; border-radius:9px; padding:9px 8px; margin-bottom:7px}
.ps-radio{width:11px; height:11px; border:1.3px solid #C4CDD3; border-radius:50%; flex:none; margin-top:9px}
.ps-ic{width:30px; height:30px; border:1px solid #DCE2E6; border-radius:6px; display:flex; align-items:center; justify-content:center; flex:none; color:#1F2B37}
.ps-ic svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.ps-txt b{display:block; font-size:10.5px; line-height:1.25}
.ps-txt small{display:block; font-size:8.8px; line-height:1.35; color:#5C6771; margin-top:2px}
.ps-btn{margin-top:auto; background:#FFD3A6; color:#A58E78; font-weight:700; font-size:12px; text-align:center; border-radius:8px; padding:11px 0}
.pf-home{display:block; width:84px; height:4px; border-radius:3px; background:#111; margin:9px auto 0}
/* estimate page: the block above carries the headline, so the tool's own intro hides */
.evp main > .eyebrow, .evp main > .evp-intro, .evp main > .sub{display:none !important}
@media (max-width:860px){ .pe-grid{grid-template-columns:1fr 260px} .pe-h{font-size:38px} }
@media (max-width:640px){
  .pe-grid{grid-template-columns:1fr; gap:10px; padding-top:22px; padding-bottom:20px}
  /* Chuck, 29 Oct: the wording above the phone is smaller on a phone */
  .pe-h{font-size:28px; margin-bottom:12px}
  .pe-h em svg{bottom:-8px; height:11px}
  .pe-p{font-size:14.5px; margin-bottom:12px}
  .pe-list{gap:8px; margin-bottom:16px}
  .pe-list li{font-size:14px; gap:10px}
  .pe-list .ic{width:32px; height:32px} .pe-list .ic svg{width:16px; height:16px}
  .pe-cta{width:100%}
  /* same drawn phone as on a laptop: its screen is laid out for 236px */
  .pe-phone{margin-top:14px}
  .pe-glow{width:300px; height:300px; left:30px; top:90px}
}

/* ---- middle of the header: "Instant Online Price" + Get my estimate (29 Oct 2026,
   after LinkNow's header). .mark already takes margin-right:auto; giving this one
   the same splits the slack so it sits centred between logo and seals. */
.bar-mid{display:flex; flex-direction:column; align-items:center; gap:8px; margin-right:auto; text-align:center}
.bm-line{font-size:13px; font-weight:600; color:#E4E8EB; letter-spacing:.01em; white-space:nowrap}
.bm-btn{display:inline-flex; align-items:center; height:32px; padding:0 16px; border-radius:7px; background:var(--accent);
  color:#151005; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none}
.bar .bm-btn:hover{filter:brightness(1.07); color:#151005}
@media (max-width:980px){ .bar-mid{display:none} }

/* the estimator's EN/中 strip has ev-pro.ca's 940px built in; line it up with the site column */
html .evp .bar-in{max-width:var(--w)}

/* trust strip: fuller second lines on laptops (.tl), the short ones on phones (.ts) — 29 Oct 2026 */
.ts-item .ts{display:none}
@media (max-width:640px){ .ts-item .tl{display:none} .ts-item .ts{display:inline} }
/* strip second lines at 13px on laptops (Chuck asked if the size was right: 12px was the
   smallest text on the page). Each item is sized to its own text, so the longest line
   — "Contractor #7015891 · Master Electrician" — gets the room it needs: one line, 48px,
   at 1280+; all four wrap together (60px) on narrower laptops. 29 Oct 2026 */
@media (min-width:641px){ .ts-item{gap:8px} .ts-item small{font-size:13px} }
@media (min-width:861px){ .ts-grid{grid-template-columns:repeat(4,auto)} }