/* ==========================================================================
   22 ELECTRICAL WORKS — Concept 3 "CALLOUT"
   Qualifier funnel. Mobile first, built for paid traffic and phone screens.
   ========================================================================== */

:root{
  --blue:#00A2E2;
  --blue-d:#0089C0;
  --blue-l:#4FC5F5;
  --ice:#CFF9FE;
  --navy:#212F6E;
  --navy-d:#151F4C;
  --navy-x:#0D1435;
  --ink:#141422;
  --line:rgba(255,255,255,.14);
  --line2:rgba(255,255,255,.24);
  --txt:#EAEEF6;
  --mut:#9FAAC6;
  --paper:#F6F5F6;
  --grey:#6F6E77;
  --hd:'Manrope',system-ui,sans-serif;
  --bd:'Poppins',system-ui,sans-serif;
  --wrap:1120px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--navy-x);color:var(--txt);font-family:var(--bd);font-size:16px;
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:0}
img{max-width:100%;display:block}
figure{margin:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--hd);font-weight:800;line-height:1.08;letter-spacing:-.025em;margin:0}
p{margin:0}
button{font:inherit}
::selection{background:var(--blue);color:#05121c}
section{scroll-margin-top:80px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* ---------- concept ribbon ---------- */
.cnote{position:relative;z-index:90;background:#0A1029;color:#9FAAC6;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 46px 9px 18px;
  text-align:center;border-bottom:1px solid var(--line)}
.cnote strong{color:var(--ice);font-weight:600}
.cnote button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;
  color:#8791ad;font-size:19px;line-height:1;cursor:pointer;padding:6px 9px;border-radius:8px}
.cnote button:hover{background:rgba(255,255,255,.09);color:#fff}

/* ---------- emergency bar ---------- */
.ebar{background:linear-gradient(90deg,var(--blue-d),var(--blue));color:#04121c;
  font-family:var(--hd);font-weight:700;font-size:13.5px;text-align:center;padding:10px 18px}
.ebar a{text-decoration:underline;text-underline-offset:3px}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:100;background:rgba(13,20,53,.86);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:70px}
.brand img{height:38px;width:auto}
.hd .tel{display:inline-flex;align-items:center;gap:9px;font-family:var(--hd);font-weight:700;
  font-size:15px;color:#04121c;background:var(--blue);padding:11px 20px;border-radius:999px;
  box-shadow:0 6px 20px rgba(0,162,226,.32);transition:transform .25s var(--ease),box-shadow .25s}
.hd .tel:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,162,226,.45)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--hd);
  font-weight:700;font-size:16px;padding:17px 30px;border-radius:12px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s;
  white-space:nowrap}
.btn-p{background:var(--blue);color:#04121c;box-shadow:0 10px 30px rgba(0,162,226,.34)}
.btn-p:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,162,226,.5);background:#19b2ee}
.btn-p:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn-g{background:rgba(255,255,255,.06);color:#fff;border-color:var(--line2)}
.btn-g:hover{border-color:var(--blue);background:rgba(0,162,226,.14)}
.btn-sm{padding:12px 20px;font-size:14.5px;border-radius:10px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:56px 0 64px;
  background:radial-gradient(80% 70% at 20% 0%,rgba(0,162,226,.2),transparent 60%),
    linear-gradient(180deg,var(--navy-d) 0%,var(--navy-x) 100%)}
.hero::after{content:'';position:absolute;inset:0;opacity:.4;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:66px 66px;
  mask-image:radial-gradient(70% 60% at 40% 30%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 40% 30%,#000,transparent 78%)}
/* copy in the left column, qualifier pinned right across both rows,
   supporting proof underneath the copy */
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 456px;
  gap:0 52px;align-items:start}
.hero-copy{grid-column:1;grid-row:1}
.hero-below{grid-column:1;grid-row:2}
.qz{grid-column:2;grid-row:1/3}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--hd);font-weight:700;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ice);
  background:rgba(0,162,226,.16);border:1px solid rgba(0,162,226,.36);padding:8px 15px;
  border-radius:999px;margin-bottom:20px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,162,226,.75)}70%{box-shadow:0 0 0 11px rgba(0,162,226,0)}100%{box-shadow:0 0 0 0 rgba(0,162,226,0)}}

.h1{font-size:clamp(34px,5.2vw,58px);margin-bottom:18px;max-width:16ch}
.h1 em{font-style:normal;color:var(--blue)}
.hero p.sub{font-size:17px;color:#c0c9de;max-width:48ch;margin-bottom:26px}
.hero-ticks{display:grid;gap:12px;margin-bottom:30px}
.hero-ticks div{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:#dfe5f0;font-weight:500}
.hero-ticks .ck{width:24px;height:24px;border-radius:50%;background:rgba(0,162,226,.18);
  color:var(--blue);display:grid;place-items:center;flex-shrink:0;margin-top:1px}

.proof{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:22px}
.proof .stars{display:flex;gap:3px;color:#FFC93C}
.proof b{font-family:var(--hd);font-size:15px;color:#fff}
.proof span{font-size:13.5px;color:var(--mut)}

/* ---------- qualifier card ---------- */
.qz{background:rgba(255,255,255,.045);border:1px solid var(--line2);border-radius:22px;
  padding:28px 26px 26px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 30px 80px rgba(0,0,0,.42);position:sticky;top:88px}
.qz-h{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px}
.qz-h h3{font-size:21px;color:#fff}
.qz-h span{font-size:12px;color:var(--mut);font-family:var(--hd);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.qz-p{font-size:13.5px;color:var(--mut);margin-bottom:20px}
.qz-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:24px}
.qz-bar i{display:block;height:100%;width:33.33%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--ice));transition:width .5s var(--ease)}

.qstep{display:none}
.qstep.on{display:block;animation:qin .45s var(--ease)}
@keyframes qin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.qlabel{display:block;font-family:var(--hd);font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);margin-bottom:11px}

.chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:flex;align-items:center;gap:10px;min-height:56px;padding:12px 14px;
  border:1.5px solid var(--line2);border-radius:13px;background:rgba(255,255,255,.03);
  font-size:14px;font-weight:500;color:#dfe5f0;cursor:pointer;line-height:1.3;
  transition:border-color .22s,background .22s,transform .22s var(--ease)}
.chip span svg{color:var(--blue);flex-shrink:0}
.chip span:hover{border-color:rgba(0,162,226,.55);background:rgba(0,162,226,.08)}
.chip input:checked + span{border-color:var(--blue);background:rgba(0,162,226,.18);color:#fff;
  box-shadow:0 0 0 3px rgba(0,162,226,.15)}
.chip input:focus-visible + span{outline:2px solid var(--ice);outline-offset:2px}
.chips.one{grid-template-columns:1fr}
.chips.one span{min-height:52px}

.qf{margin-bottom:16px}
.qf label{display:block;font-family:var(--hd);font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.qf input,.qf textarea{width:100%;background:rgba(6,10,28,.7);border:1.5px solid var(--line2);
  border-radius:12px;padding:15px 16px;color:#fff;font-family:var(--bd);font-size:16px;
  transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.qf textarea{resize:vertical;min-height:92px}
.qf input:focus,.qf textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,162,226,.16)}
.qf input::placeholder,.qf textarea::placeholder{color:#6c7595}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.consent{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--mut);
  margin:4px 0 18px;line-height:1.55}
.consent input{width:19px;height:19px;flex-shrink:0;margin-top:2px;accent-color:var(--blue)}

.qnav{display:flex;gap:11px}
.qnav .btn{flex:1}
.qnav .back{flex:0 0 auto;padding-left:20px;padding-right:20px}
.qnote{font-size:11.5px;color:#6c7595;text-align:center;margin-top:13px;line-height:1.5}

.qok{display:none;text-align:center;padding:22px 4px 10px}
.qok.on{display:block}
.qok .tick{width:64px;height:64px;border-radius:50%;background:rgba(0,162,226,.18);
  border:1px solid rgba(0,162,226,.45);display:grid;place-items:center;margin:0 auto 18px;color:var(--blue)}
.qok h4{font-family:var(--hd);font-size:21px;color:#fff;margin-bottom:9px}
.qok p{font-size:14.5px;color:var(--mut);margin-bottom:20px}

/* ---------- logos / trust row ---------- */
.trow{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.trow-in{display:grid;grid-template-columns:repeat(4,1fr)}
.trow-in div{padding:24px 22px;text-align:center;border-left:1px solid var(--line)}
.trow-in div:first-child{border-left:0}
.trow b{display:block;font-family:var(--hd);font-weight:800;font-size:30px;color:#fff;
  letter-spacing:-.03em;line-height:1;margin-bottom:6px}
.trow b i{font-style:normal;color:var(--blue)}
.trow span{font-size:13px;color:var(--mut)}

/* ---------- sections ---------- */
.sec{padding:84px 0}
.shead{max-width:64ch;margin-bottom:44px}
.shead.mid{margin:0 auto 44px;text-align:center}
.klabel{display:inline-flex;align-items:center;gap:9px;font-family:var(--hd);font-weight:700;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.klabel::before{content:'';width:24px;height:2px;background:var(--blue);border-radius:2px}
.shead.mid .klabel{justify-content:center}
.h2{font-size:clamp(27px,4vw,44px);margin-bottom:14px}
.h2 em{font-style:normal;color:var(--blue)}
.lead{color:var(--mut);font-size:16.5px}

.rv{opacity:0;transform:translateY(24px);filter:blur(5px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;filter:none;transition:none}}

/* ---------- service list ---------- */
.slist{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sl{display:flex;gap:15px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;
  padding:22px 22px;background:rgba(255,255,255,.03);transition:border-color .3s,transform .38s var(--ease)}
.sl:hover{border-color:rgba(0,162,226,.5);transform:translateY(-4px)}
.sl .ic{width:44px;height:44px;border-radius:12px;background:rgba(0,162,226,.15);color:var(--blue);
  display:grid;place-items:center;flex-shrink:0}
.sl b{display:block;font-family:var(--hd);font-size:16.5px;color:#fff;margin-bottom:4px}
.sl span{font-size:14px;color:var(--mut);line-height:1.55}

/* ---------- work strip ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.st{border-radius:14px;overflow:hidden;position:relative;border:1px solid var(--line);background:#0a1029}
.st img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease)}
.st:hover img{transform:scale(1.06)}
.st figcaption{padding:12px 14px 14px;font-size:12.5px;color:#c2cbdf;font-weight:600;line-height:1.4}

/* ---------- guarantee ---------- */
.gbox{border:1px solid rgba(0,162,226,.35);border-radius:22px;padding:44px 40px;
  background:linear-gradient(130deg,rgba(0,162,226,.14),rgba(33,47,110,.32));
  display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center}
.gbox .seal{width:96px;height:96px;border-radius:50%;border:2px solid rgba(0,162,226,.55);
  display:grid;place-items:center;color:var(--blue);flex-shrink:0;background:rgba(0,162,226,.1)}
.gbox h3{font-size:clamp(22px,2.8vw,30px);color:#fff;margin-bottom:10px}
.gbox p{color:#c3cce0;font-size:16px;max-width:62ch}

/* ---------- founder strip ---------- */
.fdr{display:grid;grid-template-columns:132px 1fr;gap:26px;align-items:center;
  border:1px solid var(--line);border-radius:18px;padding:26px 30px;background:rgba(255,255,255,.03)}
.fdr-img{width:132px;height:132px;border-radius:50%;overflow:hidden;border:2px solid rgba(0,162,226,.5);
  background:#0a1029;flex-shrink:0}
.fdr-img img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.fdr blockquote{margin:0;font-family:var(--hd);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(17px,1.9vw,21px);line-height:1.48;color:#fff}
.fdr blockquote span{color:var(--blue)}
.fdr-sign{margin-top:14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fdr-sign .nm{font-family:var(--hd);font-weight:800;font-size:16px;color:#fff}
.fdr-sign .rl{font-size:12px;color:var(--blue);font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* ---------- reviews ---------- */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev{border:1px solid var(--line);border-radius:16px;padding:26px 24px;background:rgba(255,255,255,.03);
  display:flex;flex-direction:column}
.rev .stars{display:flex;gap:3px;color:#FFC93C;margin-bottom:14px}
.rev p{font-size:14.6px;color:#cfd6e6;line-height:1.7;flex:1}
.rev-w{display:flex;align-items:center;gap:11px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.av{width:38px;height:38px;border-radius:50%;background:linear-gradient(140deg,var(--blue),var(--navy));
  display:grid;place-items:center;font-family:var(--hd);font-weight:800;font-size:13px;color:#04121c;flex-shrink:0}
.rev-w b{display:block;font-family:var(--hd);font-size:14px;color:#fff}
.rev-w span{font-size:12px;color:var(--mut)}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.fq{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);overflow:hidden;
  transition:border-color .3s}
.fq.open{border-color:rgba(0,162,226,.45)}
.fq button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:none;border:0;color:#fff;font-family:var(--hd);font-weight:700;font-size:16.5px;
  text-align:left;padding:20px 22px;cursor:pointer;line-height:1.35}
.fq .pm{width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);flex-shrink:0;
  display:grid;place-items:center;color:var(--blue);transition:transform .35s var(--ease),background .3s}
.fq.open .pm{transform:rotate(45deg);background:rgba(0,162,226,.16)}
.fq .ans{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.fq .ans p{padding:0 22px 22px;font-size:15px;color:var(--mut);line-height:1.7}

/* ---------- final cta ---------- */
.fcta{text-align:center;padding:76px 0 84px;
  background:radial-gradient(70% 90% at 50% 0%,rgba(0,162,226,.2),transparent 62%),var(--navy-d);
  border-top:1px solid var(--line)}
.fcta h2{margin-bottom:14px}
.fcta p{color:#c0c9de;max-width:52ch;margin:0 auto 30px;font-size:16.5px}
.fcta-b{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* ---------- footer ---------- */
.ft{background:#080D22;border-top:1px solid var(--line);padding:44px 0 30px}
.ft-in{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:26px}
.ft-in img{height:42px}
.ft-c{display:flex;gap:24px;flex-wrap:wrap;font-size:14.5px;color:var(--mut)}
.ft-c a:hover{color:var(--blue)}
.ft-bot{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;
  align-items:center;gap:18px;flex-wrap:wrap;font-size:12.5px;color:#5f6a8a}
.scalus-badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#8792ae;
  border:1px solid var(--line);border-radius:999px;padding:7px 15px;transition:.25s}
.scalus-badge b{color:var(--ice);font-weight:600}
.scalus-badge:hover{border-color:rgba(0,162,226,.5);color:#cfd6e0}

.mbar{display:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1040px){
  /* on a phone the qualifier jumps straight under the headline, so the
     first thing after the hook is the thing we want them to do */
  .hero-in{display:flex;flex-direction:column;gap:32px}
  .hero-copy{order:1}
  .qz{order:2;position:static;max-width:560px;width:100%}
  .hero-below{order:3}
  .hero-ticks{margin-bottom:24px}
  .slist{grid-template-columns:repeat(2,1fr)}
  .strip{grid-template-columns:repeat(2,1fr)}
  .revs{grid-template-columns:1fr}
  .trow-in{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .wrap{padding:0 16px}
  section{scroll-margin-top:74px}
  .ebar{font-size:12.5px;padding:9px 14px;line-height:1.45}
  .hd-in{height:62px}
  .brand img{height:31px}
  .hd .tel{padding:10px 16px;font-size:14px}
  .hero{padding:34px 0 44px}
  .h1{font-size:clamp(29px,8.4vw,40px);margin-bottom:14px;max-width:none}
  .hero p.sub{font-size:15.5px;margin-bottom:22px}
  .hero-ticks{gap:10px;margin-bottom:24px}
  .hero-ticks div{font-size:14.5px}
  .proof{padding-top:18px;gap:10px}
  .proof span{font-size:12.5px}

  .qz{padding:22px 18px 20px;border-radius:18px}
  .qz-h{flex-direction:column;align-items:flex-start;gap:4px}
  .qz-h h3{font-size:19px}
  .chips{grid-template-columns:1fr;gap:9px}
  .chip span{min-height:54px;font-size:14.5px}
  .qrow{grid-template-columns:1fr;gap:0}
  .qnav{flex-direction:column-reverse;gap:9px}
  .qnav .btn{width:100%}
  .qnav .back{width:100%}

  .trow-in{grid-template-columns:1fr 1fr}
  .trow-in div{padding:18px 12px}
  .trow b{font-size:25px}
  .trow span{font-size:12px}

  .sec{padding:56px 0}
  .shead{margin-bottom:30px}
  .h2{font-size:clamp(25px,7.2vw,32px)}
  .lead{font-size:15.5px}
  .slist{grid-template-columns:1fr;gap:12px}
  .sl{padding:18px}
  .strip{grid-template-columns:1fr 1fr;gap:11px}
  .st figcaption{padding:10px 11px 12px;font-size:11.8px}
  .fdr{grid-template-columns:1fr;gap:18px;padding:24px 20px;text-align:center;justify-items:center}
  .fdr-img{width:104px;height:104px}
  .fdr blockquote{font-size:16.5px;line-height:1.55}
  .fdr-sign{justify-content:center;margin-top:13px}
  .gbox{grid-template-columns:1fr;gap:20px;padding:30px 22px;text-align:center;justify-items:center}
  .gbox .seal{width:76px;height:76px}
  .gbox p{font-size:15px}
  .fq button{font-size:15.5px;padding:17px 18px;gap:14px}
  .fq .ans p{padding:0 18px 19px;font-size:14.5px}
  .fcta{padding:56px 0 62px}
  .fcta p{font-size:15.5px;margin-bottom:24px}
  .fcta-b{flex-direction:column}
  .fcta-b .btn{width:100%}
  .ft{padding:36px 0 96px}
  .ft-in{gap:18px}
  .ft-c{gap:14px;font-size:14px;flex-direction:column}
  .ft-bot{flex-direction:column;align-items:flex-start;gap:13px}

  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:105;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(8,13,34,.95);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line2)}
  .mbar .btn{width:100%;padding:15px 10px;font-size:15px}
}