:root { --navy:#0b1f33; --midnight:#071522; --amber:#f5a623; --cream:#f5f3ee; --slate:#66788a; --ink:#102236; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.utility-bar { min-height:42px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--navy); color:#fff; font-size:14px; }
.utility-bar div { display:flex; gap:34px; }
.site-header { height:92px; padding:0 5vw; display:flex; align-items:center; gap:34px; background:#fff; position:sticky; top:0; z-index:20; box-shadow:0 6px 30px #0715220c; }
.brand { display:flex; align-items:center; gap:12px; margin-right:auto; }
.brand-mark { width:48px; height:55px; display:grid; place-items:center; color:var(--amber); background:var(--navy); clip-path:polygon(25% 0,100% 0,72% 38%,100% 38%,18% 100%,38% 54%,0 54%); font-size:0; }
.brand-mark:after { content:""; width:10px; height:38px; background:var(--amber); transform:skew(-16deg); }
.brand strong { display:block; color:var(--navy); font-size:21px; letter-spacing:.03em; }
.brand small { display:block; color:var(--slate); letter-spacing:.1em; margin-top:3px; }
nav { display:flex; gap:26px; font-size:15px; }
nav a { padding:12px 0; border-bottom:2px solid transparent; }
nav a:hover, nav a:focus-visible { border-color:var(--amber); }
.header-phone { font-weight:700; white-space:nowrap; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:56px; padding:0 26px; border-radius:7px; background:var(--amber); color:var(--midnight); font-weight:800; transition:transform .18s ease, background .18s ease; }
.button:hover { transform:translateY(-2px); background:#dd8e10; }
.button-small { min-height:48px; padding:0 22px; }
.hero { min-height:585px; position:relative; overflow:hidden; background:var(--midnight); color:#fff; }
.hero-image { position:absolute; inset:0; left:38%; background:url('/hero-electrician.png') center/cover no-repeat; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg, #071522 0%, #071522 37%, #071522e8 45%, #07152218 72%, transparent 100%); }
.hero-content { width:min(710px, 50vw); padding:80px 0 80px 5vw; position:relative; z-index:2; }
.eyebrow { margin:0 0 18px; color:#fff; font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow:after { content:""; display:inline-block; width:42px; height:2px; margin:0 0 3px 14px; background:var(--amber); }
.eyebrow.dark { color:var(--amber); }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:22px; font-size:clamp(48px,5vw,76px); line-height:1.02; letter-spacing:-.04em; }
h1 em { color:var(--amber); font-style:normal; }
.hero-copy { max-width:600px; color:#e7edf3; font-size:21px; line-height:1.6; }
.hero-actions { margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; }
.button-outline { border:1px solid var(--amber); background:#0b1f33cc; color:#fff; }
.button-outline:hover { background:var(--amber); color:var(--midnight); }
.trust { display:grid; grid-template-columns:repeat(3,1fr); max-width:1180px; margin:0 auto; padding:34px 24px; }
.trust>div { display:flex; align-items:center; justify-content:center; gap:16px; padding:7px 32px; border-right:1px solid #d7dde2; }
.trust>div:last-child { border:0; }
.trust b { min-width:48px; color:var(--amber); font-size:26px; }
.trust strong,.trust small { display:block; }
.trust small { margin-top:5px; color:var(--slate); }
.section { max-width:1240px; margin:auto; padding:100px 5vw; }
.services { background:var(--cream); max-width:none; }
.services>* { max-width:1140px; margin-left:auto; margin-right:auto; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:60px; }
.section-heading>p { max-width:500px; color:#526578; line-height:1.7; }
h2 { font-size:clamp(38px,4vw,58px); line-height:1.06; letter-spacing:-.035em; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }
.service-grid article { min-height:290px; padding:30px; border:1px solid #dadfe3; border-radius:14px; background:#fff; transition:.2s ease; }
.service-grid article:hover { transform:translateY(-4px); box-shadow:0 16px 34px #0b1f3312; border-color:#f5a62388; }
.service-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:10px; background:#fff4db; color:var(--amber); font-size:25px; font-weight:900; }
.service-grid h3 { margin:24px 0 12px; font-size:23px; }
.service-grid p { color:#56697a; line-height:1.6; }
.service-grid a,.text-link,.area a { color:#b56e00; font-weight:800; }
.about { display:grid; grid-template-columns:.9fr 1.1fr; gap:9vw; align-items:center; max-width:1200px; margin:auto; padding:110px 5vw; }
.about-art { min-height:460px; padding:60px; display:flex; flex-direction:column; justify-content:end; border-radius:18px; background:linear-gradient(145deg,#102b45,#071522); color:#fff; position:relative; overflow:hidden; }
.about-art:before { content:""; position:absolute; width:270px; height:270px; top:-70px; right:-50px; border:55px solid #f5a623; border-radius:50%; opacity:.95; }
.about-art span { color:var(--amber); font-size:100px; font-weight:900; line-height:.85; }
.about-art small { margin-top:18px; font-size:22px; line-height:1.25; }
.about>div:last-child>p:not(.eyebrow) { color:#56697a; line-height:1.75; }
.about ul { display:grid; gap:14px; padding:0; list-style:none; margin:28px 0; }
.about li:before { content:"✓"; color:var(--amber); font-weight:900; margin-right:12px; }
.reputation { padding:95px max(5vw,calc((100vw - 1140px)/2)); background:var(--cream); }
.reputation-inner { display:grid; grid-template-columns:1.25fr .75fr; gap:70px; align-items:center; }
.reputation-copy { max-width:670px; }
.reputation-copy h2 { margin-bottom:20px; }
.reputation-copy>p:not(.eyebrow) { max-width:650px; margin-bottom:0; color:#56697a; font-size:18px; line-height:1.75; }
.rating-card { min-height:245px; padding:34px; display:flex; flex-direction:column; justify-content:center; border-radius:18px; background:var(--navy); color:#fff; box-shadow:0 18px 45px #0b1f331c; transition:transform .18s ease, box-shadow .18s ease; }
.rating-card:hover { transform:translateY(-4px); box-shadow:0 24px 50px #0b1f3329; }
.rating-label { color:#dce5ec; font-size:14px; font-weight:700; letter-spacing:.04em; }
.rating-row { display:flex; align-items:center; gap:16px; margin:12px 0 14px; }
.rating-row strong { font-size:66px; line-height:1; }
.rating-row .stars { color:var(--amber); font-size:20px; letter-spacing:.04em; white-space:nowrap; }
.review-count { color:#dce5ec; font-size:14px; }
.review-count b { display:block; margin-top:10px; color:#fff; font-size:15px; }
.profile-links { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:36px; }
.profile-links a { min-height:116px; padding:20px; display:grid; grid-template-columns:36px 1fr; grid-template-rows:auto auto; column-gap:12px; align-content:center; border:1px solid #d5dce2; border-radius:12px; background:#fff; color:var(--navy); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.profile-links a:hover { transform:translateY(-3px); border-color:#f5a62388; box-shadow:0 12px 26px #0b1f3312; }
.profile-links span { grid-row:1 / 3; width:36px; height:36px; display:grid; place-items:center; align-self:center; border-radius:50%; background:#e9edf1; font-size:18px; font-weight:900; }
.profile-links b { align-self:end; font-size:16px; }
.profile-links small { align-self:start; margin-top:4px; color:var(--slate); font-size:12px; line-height:1.25; }
.profile-links .profile-google span { background:#eef3ff; color:#4285f4; }
.profile-links .profile-facebook span { background:#e9f1ff; color:#1877f2; }
.profile-links .profile-yelp span { background:#fff0f0; color:#d32323; }
.profile-links .profile-angi span { background:#e9fbf8; color:#00a99d; }
.profile-links .profile-nextdoor span { background:#e9f8ee; color:#00a36c; }
.area { text-align:center; }
.area>p:not(.eyebrow) { max-width:800px; margin:0 auto 24px; color:#56697a; line-height:1.75; }
.contact { display:flex; justify-content:space-between; align-items:center; gap:50px; padding:80px 7vw; background:var(--navy); color:#fff; }
.contact>div:first-child { max-width:720px; }
.contact p:not(.eyebrow) { color:#cbd6df; line-height:1.7; }
.contact-actions { display:flex; flex-direction:column; align-items:center; gap:12px; min-width:300px; }
.contact-actions .button { width:100%; }
.text-button { width:100%; padding:15px 20px; border:1px solid #f5a62399; border-radius:7px; color:#fff; font-weight:800; text-align:center; }
footer { padding:38px 5vw; display:flex; justify-content:space-between; align-items:center; gap:30px; border-top:1px solid #e1e5e8; color:var(--slate); font-size:14px; }
.footer-brand { margin:0; }
.footer-brand .brand-mark { width:35px; height:40px; }
.footer-brand strong { font-size:16px; }

@media (max-width:1050px) { nav,.header-phone { display:none; } .site-header { height:78px; } .hero-content { width:65vw; } .service-grid { grid-template-columns:repeat(2,1fr); } .profile-links { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px) {
  .utility-bar { min-height:36px; justify-content:center; font-size:12px; } .utility-bar>div { display:none; }
  .site-header { padding:0 20px; } .brand strong { font-size:17px; } .brand small { font-size:10px; } .brand-mark { width:38px; height:44px; } .button-small { padding:0 14px; font-size:12px; }
  .hero { min-height:660px; } .hero-image { left:0; opacity:.48; } .hero-shade { background:linear-gradient(90deg,#071522f7,#071522a8),linear-gradient(0deg,#071522 0%,transparent 70%); }
  .hero-content { width:100%; padding:70px 22px; } h1 { font-size:48px; } .hero-copy { font-size:18px; } .hero-actions .button { width:100%; }
  .trust { grid-template-columns:1fr; padding:20px; } .trust>div { justify-content:flex-start; border-right:0; border-bottom:1px solid #d7dde2; padding:18px; }
  .section,.about { padding:72px 22px; } .section-heading { align-items:start; flex-direction:column; gap:0; } .service-grid { grid-template-columns:1fr; } .service-grid article { min-height:auto; }
  .about { grid-template-columns:1fr; gap:45px; } .about-art { min-height:330px; padding:38px; } .about-art span { font-size:78px; }
  .reputation { padding:68px 22px; } .reputation-inner { grid-template-columns:1fr; gap:32px; } .rating-card { min-height:210px; } .profile-links { grid-template-columns:1fr 1fr; } .profile-links a:last-child { grid-column:1 / -1; }
  .contact { padding:68px 22px; align-items:flex-start; flex-direction:column; } .contact-actions { width:100%; min-width:0; }
  footer { align-items:flex-start; flex-direction:column; } footer p { order:3; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }