/* Ehman Electric — bespoke preview build. Black + bolt yellow, Roboto Slab / Roboto (the business's own palette and fonts). */
:root{
  --ink:#0b0b0b; --coal:#161616; --paper:#ffffff; --mist:#f6f3ea; --line:#e5dfc9;
  --bolt:#fec831; --bolt-deep:#7a5200; --txt:#1d1d1b; --mut:#4d4a42;
  --rad:18px; --head:'Roboto Slab',serif; --body:'Roboto',sans-serif;
}
*{box-sizing:border-box}
html{overflow-x:clip; scroll-behavior:smooth}
body{margin:0; font-family:var(--body); color:var(--txt); background:var(--paper); line-height:1.6; overflow-x:clip; padding-bottom:64px}
img{max-width:100%; display:block}
a{color:var(--ink)}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px}
h1,h2,h3{font-family:var(--head); line-height:1.12; margin:0 0 .45em; color:var(--ink)}
h1{font-size:clamp(2rem,5.2vw,3.4rem); font-weight:800}
h2{font-size:clamp(1.55rem,3.4vw,2.3rem); font-weight:700}
h3{font-size:1.18rem; font-weight:700}
p{margin:0 0 1em}
.eyebrow{display:inline-flex; align-items:center; gap:.55em; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; color:var(--bolt-deep); margin-bottom:.9em}
.eyebrow::before{content:""; width:26px; height:10px; background:var(--bolt); clip-path:polygon(38% 0,100% 0,62% 100%,0 100%); display:inline-block}
.on-dark .eyebrow{color:var(--bolt)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:52px; padding:.8em 1.5em; border-radius:999px; font-weight:700; text-decoration:none; border:2px solid var(--ink); font-size:1rem; cursor:pointer}
.btn-call{background:var(--bolt); color:var(--ink)}
.btn-call:hover{background:#ffd34d}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:#2a2a2a}
.btn-ghost{background:transparent; color:#fff; border-color:#fff}
.btn-ghost:hover{background:#fff; color:var(--ink)}
:focus-visible{outline:3px solid var(--bolt-deep); outline-offset:2px}
.on-dark :focus-visible, .site-head :focus-visible, .sbar :focus-visible{outline-color:var(--bolt)}

/* skip link: fully off-canvas, appears on focus above everything */
.skip{position:fixed; top:0; left:16px; z-index:10001; background:var(--bolt); color:var(--ink); font-weight:700; padding:.9em 1.4em; border-radius:0 0 12px 12px; text-decoration:none; transform:translateY(-400%)}
.skip:focus{transform:translateY(0)}

/* preview banner + watermark */
.pv-banner{background:repeating-linear-gradient(45deg,var(--ink) 0 26px,#1d1d1d 26px 52px); color:#fff; text-align:center; font-size:.82rem; font-weight:600; letter-spacing:.04em; padding:.55em 1em; position:relative; z-index:60}
.pv-banner b{color:var(--bolt)}
.watermark{position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.30; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Ctext x='40' y='270' font-family='Arial' font-size='64' font-weight='bold' fill='%236a6a6a' fill-opacity='0.55' transform='rotate(-32 260 260)'%3EPREVIEW%3C/text%3E%3C/svg%3E"); background-size:520px 520px}

/* header */
.site-head{position:sticky; top:0; z-index:800; background:var(--ink); box-shadow:0 2px 14px rgba(0,0,0,.35)}
.head-in{display:flex; align-items:center; gap:14px; max-width:1180px; margin:0 auto; padding:8px 20px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; min-width:0}
.brand img{height:46px; width:auto}
.brand-name{color:#fff; font-family:var(--head); font-weight:800; font-size:1.05rem; line-height:1.05; white-space:nowrap}
.brand-name small{display:block; font-family:var(--body); font-weight:600; font-size:.68rem; letter-spacing:.22em; color:var(--bolt); text-transform:uppercase}
.head-call{min-height:48px; padding:.55em 1.2em; font-size:.95rem}
.menu-btn{display:inline-flex; align-items:center; gap:10px; background:transparent; color:#fff; border:2px solid #fff; border-radius:999px; min-height:48px; padding:.55em 1.15em; font-weight:700; font-size:.95rem; cursor:pointer; font-family:var(--body)}
.menu-btn .bars{display:inline-flex; flex-direction:column; gap:4px; width:20px}
.menu-btn .bars i{display:block; height:2px; background:var(--bolt); border-radius:2px}
.menu-panel{position:absolute; top:100%; right:0; left:0; background:var(--ink); border-top:3px solid var(--bolt); max-height:0; overflow:hidden; transition:max-height .3s ease; overscroll-behavior:contain}
.menu-panel.open{max-height:min(78vh,640px); overflow-y:auto}
.menu-panel nav{max-width:1180px; margin:0 auto; padding:14px 20px 22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2px 26px}
.menu-panel a{color:#fff; text-decoration:none; font-weight:600; padding:.62em .4em; border-bottom:1px solid #2c2c2c; display:block}
.menu-panel a:hover{color:var(--bolt)}
@media (max-width:560px){ .brand-name{display:none} .head-call{padding:.55em .9em} }

/* hero */
.hero{background:var(--ink); color:#fff; position:relative; padding:56px 0 0; overflow:clip}
.hero::after{content:""; position:absolute; right:-70px; top:-40px; width:300px; height:520px; background:var(--bolt); opacity:.16; clip-path:polygon(58% 0,100% 0,42% 100%,0 100%)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:start; position:relative; z-index:2}
.hero h1{color:#fff}
.hero h1 .y{color:var(--bolt)}
.hero-sub{font-size:1.12rem; color:#e9e6da; max-width:34em}
.trust{display:flex; flex-wrap:wrap; gap:10px 22px; margin:20px 0 26px; font-weight:600; font-size:.95rem}
.trust span{display:inline-flex; gap:.5em; align-items:center}
.trust b{color:var(--bolt)}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px}
.hero-photo{clip-path:polygon(9% 0,100% 0,100% 100%,0 100%); border-radius:0 0 var(--rad) 0; position:relative}
.hero-photo img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/2}
.hero-form-col{background:#fff; color:var(--txt); border-radius:var(--rad); padding:24px 24px 8px; box-shadow:0 24px 50px rgba(0,0,0,.45); border-top:8px solid var(--bolt); margin-bottom:-64px; position:relative; z-index:5}
.hero-form-col h2{font-size:1.3rem}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} .hero-form-col{margin-bottom:-40px} .hero-photo{clip-path:none; border-radius:var(--rad)} }

/* forms */
form.lead{display:grid; gap:13px}
form.lead label{font-weight:700; font-size:.92rem; display:block; margin-bottom:4px}
form.lead .why{font-weight:400; font-size:.82rem; color:var(--mut); display:block}
form.lead input, form.lead select{width:100%; min-height:50px; padding:.65em .8em; border:2px solid #b9b2a0; border-radius:10px; font:inherit; background:#fff; color:var(--txt)}
form.lead input[aria-invalid="true"], form.lead select[aria-invalid="true"]{border-color:#b3261e}
.form-err{display:none; background:#fdecea; border:2px solid #b3261e; color:#7c1a14; border-radius:10px; padding:.7em 1em; font-weight:600}
.form-err.show{display:block}
form.lead .btn{width:100%}
.form-note{font-size:.82rem; color:var(--mut)}

/* sections */
.band{padding:74px 0}
.band.mist{background:var(--mist)}
.band.dark{background:var(--ink); color:#e9e6da}
.band.dark h2, .band.dark h3{color:#fff}
.band.bolt{background:var(--bolt)}
.spacer-hero{height:96px}
@media (max-width:900px){ .spacer-hero{height:64px} }
.quick{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:2px solid var(--line)}
.quick a{display:block; padding:20px 18px; text-decoration:none; font-family:var(--head); font-weight:700; font-size:1.05rem; border-bottom:2px solid var(--line); background:#fff}
.quick a small{display:block; font-family:var(--body); font-weight:400; color:var(--mut); font-size:.88rem; margin-top:4px; line-height:1.45}
.quick a:hover{background:var(--mist)}
@media (max-width:800px){ .quick{grid-template-columns:1fr} }

/* service rows: offset, alternating, not a card grid */
.svc-row{display:grid; grid-template-columns:220px 1fr auto; gap:24px; align-items:center; text-decoration:none; padding:22px 10px; border-bottom:2px solid var(--line); background:#fff}
.svc-row:nth-child(even){grid-template-columns:auto 1fr 220px; background:var(--mist)}
.svc-row img{width:220px; height:150px; object-fit:cover; border-radius:12px}
.svc-row h3{margin-bottom:.25em}
.svc-row p{margin:0; color:var(--mut)}
.svc-row .go{font-family:var(--head); font-weight:800; font-size:1.5rem; color:var(--bolt-deep); background:var(--bolt); width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center}
@media (max-width:760px){ .svc-row, .svc-row:nth-child(even){grid-template-columns:1fr} .svc-row img{width:100%; height:190px} .svc-row .go{display:none} }

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:8px}
.step{position:relative; padding:26px 22px 10px; background:#1d1d1d; border-radius:var(--rad); color:#e9e6da}
.step .num{font-family:var(--head); font-weight:800; font-size:2rem; color:var(--ink); background:var(--bolt); display:inline-flex; width:58px; height:58px; align-items:center; justify-content:center; clip-path:polygon(22% 0,100% 0,78% 100%,0 100%); margin-bottom:12px}
.step h3{color:#fff}
@media (max-width:800px){ .steps{grid-template-columns:1fr} }

/* split / gallery / faq */
.split{display:grid; grid-template-columns:1fr 1fr; gap:38px; align-items:center}
.split>*, .hero-grid>*, .foot-grid>*, .steps>*, .quick>*{min-width:0}
.split img{border-radius:var(--rad); width:100%; object-fit:cover}
.split .tilt{transform:rotate(-1.6deg); box-shadow:18px 18px 0 var(--bolt)}
@media (max-width:800px){ .split{grid-template-columns:1fr} }
.gal-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:18px}
.gal-grid figure{margin:0}
.gal-grid img{width:100%; height:250px; object-fit:cover; border-radius:12px}
.gal-grid figcaption{font-size:.88rem; color:var(--mut); padding-top:7px}
.faq{border-bottom:2px solid var(--line)}
.faq button{width:100%; background:none; border:0; text-align:left; font:inherit; font-family:var(--head); font-weight:700; font-size:1.05rem; padding:1em .2em; cursor:pointer; display:flex; justify-content:space-between; gap:14px; color:var(--ink)}
.faq button .pm{color:var(--bolt-deep); font-size:1.3rem; line-height:1}
.faq .ans{padding:0 .2em 1.1em; max-width:46em}
.faq .ans[hidden]{display:none}
.checks{list-style:none; padding:0; margin:0 0 1em; display:grid; gap:.55em}
.checks li{padding-left:2em; position:relative}
.checks li::before{content:""; position:absolute; left:0; top:.28em; width:18px; height:12px; background:var(--bolt); clip-path:polygon(38% 0,100% 0,62% 100%,0 100%)}
.towns{display:grid; grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); gap:16px}
.towns a{display:block; background:#fff; border:2px solid var(--line); border-left:10px solid var(--bolt); border-radius:12px; padding:18px; text-decoration:none; font-family:var(--head); font-weight:700}
.towns a small{display:block; font-family:var(--body); font-weight:400; color:var(--mut); margin-top:4px; line-height:1.45}
.big-call{font-family:var(--head); font-size:clamp(1.5rem,4vw,2.2rem); font-weight:800}
.stars{color:var(--bolt-deep); letter-spacing:.18em; font-size:1.25rem}
.map{width:100%; height:380px; border:0; border-radius:var(--rad)}

/* page heads */
.pagehead{background:var(--ink); color:#fff; padding:52px 0 46px; position:relative; overflow:clip}
.pagehead::after{content:""; position:absolute; right:-60px; top:0; width:220px; height:100%; background:var(--bolt); opacity:.16; clip-path:polygon(58% 0,100% 0,42% 100%,0 100%)}
.pagehead h1{color:#fff; max-width:16em}
.pagehead p{color:#e9e6da; max-width:42em; font-size:1.08rem}
.pagehead .wrap{position:relative; z-index:2}

/* footer */
footer{background:var(--ink); color:#cfccc2; padding:56px 0 34px; margin-top:0}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px}
footer h3{color:#fff; font-size:1rem}
footer a{color:#cfccc2; text-decoration:none}
footer a:hover{color:var(--bolt)}
footer ul{list-style:none; padding:0; margin:0; display:grid; gap:.45em}
.socials{display:flex; gap:12px; margin-top:14px}
.socials a{width:46px; height:46px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center}
.socials svg{width:23px; height:23px; fill:var(--ink)}
.foot-base{border-top:1px solid #333; margin-top:36px; padding-top:20px; font-size:.86rem; display:grid; gap:6px}
@media (max-width:800px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }

/* sticky mobile bar */
.sbar{position:fixed; left:0; right:0; bottom:0; z-index:850; display:none; background:var(--ink); padding-bottom:env(safe-area-inset-bottom,0px); box-shadow:0 -3px 16px rgba(0,0,0,.35)}
.sbar a{flex:1; min-height:56px; display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; font-weight:700; font-size:.95rem; padding:.4em}
.sbar a.mid{background:var(--bolt); color:var(--ink); font-size:1.02rem}
.sbar.hide{transform:translateY(110%)}
.sbar{transition:transform .25s ease}
@media (max-width:820px){ .sbar{display:flex} }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none !important} }
.head-call{white-space:nowrap}
@media (max-width:560px){ .brand img{height:40px} .head-call{font-size:.88rem; padding:.55em .95em} }