/* Sangar Electrical Contracting: "The Panel" (sample website concept)
   Type: Big Shoulders Display 800 (display), Libre Franklin (body). Scale 1.333 from 17px. */
:root{
  --steel:#E4E6E0; --steel-2:#D3D6CE; --ink:#14181C; --ink-2:#1D242A; --ink-3:#2B333A;
  --wire:#FFC700; --blue:#1F4E9C; --slate:#3C454D; --paper:#F3F4EF;
  --hf:"Big Shoulders Display","Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif;
  --bf:"Libre Franklin","Helvetica Neue",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* type scale, ratio 1.333 */
  --t-1:14px; --t0:17px; --t1:22.7px; --t2:30.2px; --t3:40.3px; --t4:53.7px; --t5:71.6px;
  /* spacing, 8px based */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --pad:28px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px;scroll-padding-bottom:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--steel);color:var(--ink);font:400 var(--t0)/1.55 var(--bf);overflow-x:hidden;padding-bottom:72px}
img,svg{display:block;max-width:100%}
a{color:var(--blue)}
h1,h2,p,ul,ol,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s2);top:-80px;z-index:100;background:var(--ink);color:#fff;padding:12px 20px;min-height:44px;font-weight:700}
.skip:focus{top:var(--s1)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.board :focus-visible,.callsec :focus-visible{outline-color:#fff}
.top :focus-visible{outline-color:var(--ink)}
.top .btn:focus-visible,.callsec .btn:focus-visible{outline-color:var(--blue);box-shadow:0 0 0 3px #fff}
.kicker{font:700 var(--t-1)/1.3 var(--bf);letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-variant-numeric:tabular-nums}

/* buttons: yellow is reserved for Call */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s3);background:var(--wire);color:var(--ink);font:700 var(--t0)/1 var(--bf);text-decoration:none;border:2px solid var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.btn.big{min-height:56px;font-size:var(--t1);padding:0 var(--s4)}

/* header */
.top{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--pad);min-height:72px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font:800 var(--t1)/1 var(--hf);text-transform:uppercase;letter-spacing:.04em;min-height:44px}
.brand .logo{width:36px;height:36px}
.top nav{display:flex;gap:var(--s1);margin-left:auto}
.top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid transparent}
.top nav a:hover{border-bottom-color:var(--blue)}
.top .btn{min-height:44px}
@media(max-width:820px){.top nav{display:none}.top .btn{display:none}}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s4);align-items:start;padding:var(--s3) var(--pad) var(--s7) 0;overflow:hidden}
.hero-copy{padding-left:0;min-width:0}
.hero .kicker{padding-left:var(--pad);margin-bottom:var(--s2)}
.hero h1{line-height:.8;font-family:var(--hf);font-weight:800;text-transform:uppercase;margin-left:-.03em}
.since{display:block;font-size:var(--t4);letter-spacing:.14em;color:transparent;-webkit-text-stroke:2px var(--ink);padding-left:calc(var(--pad) + .03em);margin-bottom:var(--s2);line-height:1}
.year{display:block;font-size:clamp(9rem,25.5vw,24rem);letter-spacing:-.02em;color:var(--ink);line-height:.78;margin-left:0;padding-left:.04em}
.promise{font:800 var(--t3)/1.05 var(--hf);text-transform:uppercase;margin:var(--s4) 0 var(--s2) var(--pad);max-width:16ch}
.lede{margin-left:var(--pad);max-width:44ch;color:var(--slate)}
.hero-cta{margin:var(--s4) 0 0 var(--pad);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.textlink{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--blue)}
.hero-panel{position:sticky;top:var(--s3);padding-top:var(--s2)}
.panel-svg{width:100%;height:auto;max-width:480px;margin-left:auto;filter:drop-shadow(8px 8px 0 rgba(20,24,28,.18))}

/* panel svg parts */
.pb{fill:var(--ink)} .pi{fill:var(--ink-2);stroke:#4C5760;stroke-width:1.5}
.screw{fill:#4C5760} .ptitle{font:800 15px var(--hf);letter-spacing:.18em;fill:#C9CEC8}
.pl{stroke:#4C5760;stroke-width:1.5;stroke-dasharray:3 5}
.brk .bh{fill:var(--ink-3);stroke:#56616A;stroke-width:1.5}
.brk .bl{fill:var(--steel)} .brk .bt{font:800 13.5px var(--hf);letter-spacing:.03em;fill:var(--ink)}
.brk .slot{fill:var(--ink);stroke:#56616A}
.brk .knob{fill:#8A949B;transition:transform .12s cubic-bezier(.3,1.5,.5,1),fill .12s}
.brk.on .knob{fill:var(--wire);transform:translateY(calc(var(--up,0px) * -1))}
.glow.on .bh{stroke:var(--wire);animation:glow 3.2s ease-in-out infinite}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,199,0,0))}50%{filter:drop-shadow(0 0 7px rgba(255,199,0,.75))}}

/* wires: fully drawn by default; JS only animates when motion is allowed */
.rail{position:absolute;left:0;top:0;width:24px;height:100%;pointer-events:none;overflow:visible}
.wire{stroke:var(--blue);stroke-width:2}
.node{fill:#7FA7E8}
.js.anim .rail{clip-path:inset(-8px -8px calc((1 - var(--draw,0)) * 100%) -8px)}

/* section scaffolding */
.panel,.dir,.callsec{position:relative;padding:var(--s7) var(--pad) var(--s7) calc(var(--pad) + 40px)}
.panel-head{max-width:760px;margin-bottom:var(--s5)}
h2{font:800 var(--t3)/1.02 var(--hf);text-transform:uppercase;margin:var(--s1) 0 var(--s2)}
.sub{max-width:52ch;color:var(--slate)}

/* the board */
.panel{background:var(--steel-2)}
.board{background:var(--ink);color:var(--paper);padding:var(--s3);position:relative;box-shadow:12px 12px 0 rgba(20,24,28,.2);max-width:1100px}
.board::before,.board::after{content:"";position:absolute;top:10px;width:8px;height:8px;border-radius:50%;background:#4C5760}
.board::before{left:10px}.board::after{right:10px}
.board-bar{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;justify-content:space-between;padding:var(--s2) 0 var(--s3);border-bottom:2px dashed #4C5760;margin-bottom:var(--s2)}
.count{font:700 var(--t-1)/1.3 var(--bf);letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:#D5D9D3}
.all{display:none;min-height:44px;padding:0 var(--s2);background:transparent;color:var(--paper);font:700 var(--t-1)/1 var(--bf);letter-spacing:.1em;text-transform:uppercase;border:2px solid #8A949B;cursor:pointer}
.js .all{display:inline-flex;align-items:center}
.all:hover{border-color:#fff}
.rows{display:grid;gap:0}
.rows.two{grid-template-columns:1fr 1fr;column-gap:var(--s5)}
.row{position:relative;padding:var(--s2) 0;border-bottom:1px solid #343D45;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s1)}
.sw{position:relative;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:var(--s2);width:100%;min-height:56px;padding:0;background:none;border:0;color:var(--paper);font:800 var(--t2)/1 var(--hf);letter-spacing:.03em;text-transform:uppercase;text-align:left;cursor:pointer}
.sw::after{content:"";position:absolute;inset:-16px -4px -4px -4px}
.sw .nm{min-width:0}
.sw .st{font:700 var(--t-1)/1 var(--bf);letter-spacing:.12em;color:#C5CBC4;font-variant-numeric:tabular-nums}
.lever{position:relative;display:block;width:44px;height:56px;background:var(--ink-3);border:2px solid #6B767E;box-shadow:inset 0 0 0 4px var(--ink)}
.knob{position:absolute;left:6px;right:6px;bottom:6px;height:22px;background:#8A949B;transition:transform .12s cubic-bezier(.3,1.6,.5,1),background .12s}
.sw[aria-pressed="true"] .knob{background:var(--wire);transform:translateY(-20px)}
.sw[aria-pressed="true"] .st{color:var(--wire)}
.sw:hover .lever{border-color:#fff}
.strip{margin-left:calc(44px + var(--s2));padding:12px var(--s2);background:var(--ink-2);color:#D5D9D3;font-size:16px;line-height:1.5;border-left:4px solid #56616A;transition:transform .16s ease-out,background .16s,color .16s,border-color .16s}
.row.is-on .strip{background:var(--steel);color:var(--ink);border-left-color:var(--wire);transform:translateX(6px)}
.sw:focus-visible{outline:3px solid #fff;outline-offset:6px}
/* the emergency-service switch: permanently on, not a control that reads as off */
.row.emerg{padding-top:var(--s1)}
.row.emerg .sw{cursor:default;font-size:var(--t3)}
.row.emerg .sw[aria-disabled="true"]{pointer-events:auto}
.row.emerg .sw .st{color:var(--ink);background:var(--wire);padding:8px 10px}
.row.emerg .lever{box-shadow:inset 0 0 0 4px var(--ink),0 0 14px rgba(255,199,0,.45);border-color:var(--wire)}
.row.emerg .strip{font-size:var(--t0)}
.row.emerg.nudge .lever{animation:nudge .24s}
@keyframes nudge{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.rows.two .row:nth-last-child(-n+1){border-bottom:0}

/* directory (reviews) */
.dir{background:var(--steel)}
.dirlist{max-width:980px;border-top:3px solid var(--ink);margin-top:var(--s4)}
.rv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--ink)}
.rv:nth-child(2){margin-left:var(--s5)}
.rv:nth-child(3){margin-left:calc(var(--s5) * 2)}
.rv .no{font:700 var(--t-1)/1.5 var(--bf);letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--slate);border-right:1px dashed var(--slate);padding-top:4px}
.rv blockquote p{font:600 var(--t1)/1.4 var(--bf);max-width:36ch;text-wrap:pretty}
.rv footer{margin-top:var(--s2)}
.rv cite{font:700 var(--t-1)/1.3 var(--bf);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--steel-2);padding:6px 10px;display:inline-block}

/* call section */
.callsec{background:var(--ink);color:var(--paper);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:var(--s5);align-items:center}
.callsec .kicker{color:#C5CBC4}
.callsec .wire{stroke:#7FA7E8}
.phone{display:block;white-space:nowrap;font:800 clamp(3rem,9.5vw,8.5rem)/.9 var(--hf);color:#fff;text-decoration:none;letter-spacing:.01em;margin:var(--s2) 0;font-variant-numeric:tabular-nums;min-height:44px}
.phone:hover{text-decoration:underline;text-decoration-thickness:6px;text-underline-offset:8px}
.call-note{max-width:40ch;color:#D5D9D3;margin-bottom:var(--s3)}
.outlet{width:100%;max-width:360px;margin-left:auto}
.outlet *{fill:none;stroke:#C9CEC8;stroke-width:3}
.outlet .plug rect:first-child{fill:var(--ink-3)}
.outlet .plate rect:first-child{fill:var(--steel);stroke:#fff}
.outlet .fc{fill:var(--steel-2);stroke:none}
.outlet .face rect{fill:var(--ink);stroke:none}
.outlet .slotv{fill:var(--wire)!important}
.outlet .cord{stroke:#7FA7E8;stroke-width:4}
.outlet .screw2{fill:#6B767E;stroke:none}

/* footer */
.foot{background:var(--steel);padding:var(--s3) var(--pad);border-top:3px solid var(--ink)}
.foot p{font-weight:600;color:var(--slate)}

/* sticky call bar (phones) */
.callbar{display:none}
@media(max-width:820px){
  :root{--pad:24px}
  .hero{grid-template-columns:minmax(0,1fr);gap:var(--s4);padding-bottom:var(--s5)}
  .hero-panel{position:static;padding:0 var(--pad)}
  .panel-svg{margin:0 auto}
  .year{font-size:clamp(7.5rem,52vw,18rem)}
  .since{font-size:var(--t3)}
  .promise{font-size:var(--t2)}
  .panel,.dir,.callsec{padding:var(--s6) var(--pad) var(--s6) calc(var(--pad) + 16px)}
  .callsec{grid-template-columns:minmax(0,1fr)}
  .phone{font-size:min(15.5vw,6rem)}
  .outlet{max-width:260px;margin:0}
  .rows.two{grid-template-columns:minmax(0,1fr)}
  .rows.two .row:nth-last-child(-n+1){border-bottom:1px solid #343D45}
  h2{font-size:var(--t2)}
  .sw{font-size:var(--t1)}
  .row.emerg .sw{font-size:var(--t2)}
  .rv{grid-template-columns:minmax(0,1fr);gap:var(--s1)}
  .rv:nth-child(n){margin-left:0}
  .rv .no{border-right:0;border-bottom:1px dashed var(--slate);padding:0 0 6px}
  .rv blockquote p{font-size:19px}
  .board{padding:var(--s2)}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;align-items:center;justify-content:center;min-height:56px;padding:0 var(--s2) env(safe-area-inset-bottom);background:var(--wire);color:var(--ink);font:800 var(--t1)/1 var(--hf);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-top:3px solid var(--ink)}
  .callbar:focus-visible{outline:3px solid var(--ink);outline-offset:-8px}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}
@media(min-width:821px){.callbar{display:none}body{padding-bottom:0}}
@media(max-width:360px){.sw{grid-template-columns:44px 1fr;}.sw .st{grid-column:2;margin-top:-8px}.row.emerg .sw{font-size:var(--t1)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js.anim .rail{clip-path:none}
}

.btn{white-space:nowrap}
@media(max-width:440px){.row.emerg .sw{grid-template-columns:44px minmax(0,1fr);font-size:var(--t1)}.row.emerg .sw .st{grid-column:2;justify-self:start;margin-top:4px}}
@media(max-width:359px){.btn{padding:0 var(--s2);font-size:calc(var(--t0)*.94)}}