/* Halloran Electric · showcase build · session ddac9b85
   One dark page, lit by the current. Cold slate at the top, warm charcoal by the ground rod.
   Everything on this page is drawn: canvas (hero), SVG (wire, house, street, circuit), CSS (panel, boxes). */

@font-face{font-family:"Big Shoulders";font-weight:700;font-display:swap;src:url(fonts/bigshoulders-700.woff2) format("woff2")}
@font-face{font-family:"Work Sans";font-weight:400;font-display:swap;src:url(fonts/worksans-400.woff2) format("woff2")}
@font-face{font-family:"Work Sans";font-weight:700;font-display:swap;src:url(fonts/worksans-700.woff2) format("woff2")}

:root{
  /* the temperature dial: 0 = cold slate (top of page), 1 = warm charcoal (ground rod). site.js writes --warm-pct */
  --warm-pct:0%;
  --bg-cold:oklch(17% 0.022 255);
  --bg-warm:oklch(15.5% 0.02 50);
  --bg:color-mix(in oklch, var(--bg-cold), var(--bg-warm) var(--warm-pct));
  --bg-2:color-mix(in oklch, var(--bg), white 3.5%);
  --bg-3:color-mix(in oklch, var(--bg), white 7%);
  --line:color-mix(in oklch, var(--bg), white 14%);
  --line-2:color-mix(in oklch, var(--bg), white 24%);
  --ink:oklch(93% 0.012 80);
  --ink-2:oklch(74% 0.016 80);
  --ink-3:oklch(63% 0.016 80);
  --copper:oklch(70% 0.14 50);
  --copper-2:oklch(60% 0.12 50);
  --copper-dim:oklch(44% 0.07 50);
  --tungsten:oklch(94% 0.08 88);
  --tungsten-2:oklch(86% 0.12 80);
  --dead:oklch(36% 0.02 250);
  --display:"Big Shoulders","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Work Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(16px,4vw,40px);
  --wire-x:max(22px, calc(50% - 574px));
  --nav-h:64px;
  color-scheme:dark;
}
@media (max-width:719.98px){ :root{ --gutter:16px; --wire-x:20px } }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--bg);color:var(--ink);font:400 clamp(16px,1.05vw + 12px,18px)/1.55 var(--body);overflow-x:clip;position:relative;min-height:100vh}
main{position:relative;z-index:2}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:.005em;line-height:.95;margin:0;text-wrap:balance}
h1{font-size:clamp(3.4rem,11vw,7.5rem)}
h2{font-size:clamp(2.6rem,7vw,5rem)}
h3{font-size:clamp(1.45rem,2.4vw,1.85rem);line-height:1.05}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
svg{display:block}
.skip{position:absolute;left:-999px;top:8px;background:var(--copper);color:#1a1108;padding:8px 12px;border-radius:6px;z-index:50}
.skip:focus{left:8px}
.kicker{font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.lede{color:var(--ink-2);max-width:52ch;font-size:clamp(1rem,1.2vw,1.15rem)}
.wrap{max-width:1080px;margin-inline:auto;padding-inline:var(--gutter)}
@media (max-width:719.98px){ .wrap{padding-left:calc(var(--wire-x) + 22px)} }

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;min-height:46px;padding:.65em 1.25em;border-radius:999px;border:1px solid var(--line-2);background:var(--bg-3);text-decoration:none;font-weight:700;font-size:.95rem;letter-spacing:.01em;cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .35s var(--ease),transform .2s var(--ease)}
.btn:hover{border-color:var(--copper-2)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--tungsten);outline-offset:3px}
.btn-primary{background:var(--copper);border-color:var(--copper);color:#1c1208}
.btn-primary:hover{background:oklch(76% 0.14 55);border-color:oklch(76% 0.14 55)}
.btn-ghost{background:transparent}
.btn-dot{width:8px;height:8px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 0 transparent;transition:box-shadow .4s var(--ease),background .4s}
.btn-call{padding-inline:1em}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);display:flex;align-items:center;gap:20px;padding:0 var(--gutter);z-index:20;background:linear-gradient(to bottom,color-mix(in oklch,var(--bg),transparent 12%),transparent);pointer-events:none}
.nav>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;padding:5px 0;text-decoration:none;font-family:var(--display);font-size:1.5rem;letter-spacing:.02em;text-transform:uppercase}
.brand b{color:var(--copper);font-weight:700}
.brand-mark{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.6}
.brand-toggle{fill:var(--copper);stroke:none;transition:transform .35s var(--ease)}
html[data-current="on"] .brand-toggle{transform:translateY(5px)}
.nav-links{display:none;gap:22px;margin-left:auto;font-size:.9rem;color:var(--ink-2)}
.nav-links a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav-links a:hover{color:var(--ink);border-color:var(--copper)}
.btn-call{margin-left:auto}
@media (min-width:900px){ .nav-links{display:flex} .btn-call{margin-left:0} }

/* ---------- hero ---------- */
.hero{position:relative;height:1140svh;height:1140vh;z-index:1}
@supports (height:1svh){ .hero{height:1140svh} }
@media (max-width:719.98px){ .hero{height:1330vh} @supports (height:1svh){ .hero{height:1330svh} } }   /* v3.5: 900 x 1.262 for the two slow stretches, see warp() in site.js */   /* v3.3, Miguel: slower, so the sequences are not flown through. Was 620 / 760 */
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg-cold)}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-shade{position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(to top,rgba(10,12,18,.72),transparent);pointer-events:none}
.hero-shade::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:120vh;height:120svh;background:linear-gradient(to bottom,rgba(10,12,18,.62) 0,rgba(10,12,18,.42) 34%,transparent 58%);pointer-events:none}
@media (min-width:900px){ .hero-shade::before{background:linear-gradient(to bottom,rgba(10,12,18,.5) 0,rgba(10,12,18,.28) 30%,transparent 55%)} }
.hero-head,.hero-end{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(var(--nav-h) + 3vh);max-width:640px;opacity:var(--o,1);transform:translateY(calc((1 - var(--o,1)) * -14px));transition:none}
.hero-head .lede,.hero-end .lede{margin-top:14px;color:var(--ink);text-shadow:0 1px 2px rgba(10,12,18,.9),0 2px 18px rgba(10,12,18,.85)}
.hero-head h1,.hero-end h2,.hero-head .kicker,.hero-end .kicker{text-shadow:0 2px 3px rgba(10,12,18,.7),0 6px 28px rgba(10,12,18,.6)}
.cap{text-shadow:0 1px 2px rgba(10,12,18,.9),0 2px 14px rgba(10,12,18,.8)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-end{--o:0;pointer-events:none}
.hero-end.is-on{pointer-events:auto}
@media (min-width:900px){ .hero-head,.hero-end{left:calc(50% - 540px + var(--gutter))} }
@media (max-width:719.98px){ .hero-end .lede{font-size:.98rem} .hero-end h2{font-size:clamp(2.8rem,13vw,4.4rem)} }
.caps{list-style:none;margin:0;padding:0;position:absolute;left:var(--gutter);right:var(--gutter);bottom:max(28px,env(safe-area-inset-bottom));max-width:520px}
@media (min-width:900px){ .caps{left:calc(50% - 540px + var(--gutter))} }
.cap{position:absolute;left:0;right:0;bottom:0;display:flex;gap:14px;align-items:baseline;opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 10px));color:var(--ink)}
.cap b{font-family:var(--display);font-size:1.6rem;color:var(--copper);line-height:1}
.cap span{font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.4;color:var(--ink-2)}
.cap strong{color:var(--ink)}
.scroll-hint{position:absolute;right:var(--gutter);bottom:max(28px,env(safe-area-inset-bottom));font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:10px;opacity:var(--o,1)}
.scroll-hint span{width:1px;height:38px;background:linear-gradient(var(--copper),transparent)}
html.no-gl .hero{height:auto}
html.no-gl .hero-stage{height:auto;min-height:100svh;background:oklch(12% 0.03 265) url(img/m-house-dark-1000.webp) center 70%/cover no-repeat;padding-bottom:120px}
html.no-gl .hero-canvas,html.no-gl .caps,html.no-gl .scroll-hint,html.no-gl .hero-end{display:none}
html.no-gl .hero-head{position:relative;top:auto;padding-top:calc(var(--nav-h) + 40px)}
html.no-js .hero{height:auto}
html.no-js .jbox-lid{display:none}
html.no-js .jbox-in{opacity:1;transform:none}
html.no-js .quote{opacity:1;transform:none}
html.no-js .bk-text h3{color:var(--ink)}
html.no-js .bk-text p{color:var(--ink-2)}
html.no-js .hero-stage{height:auto;min-height:80vh;padding-bottom:120px}
html.no-js .hero-canvas,html.no-js .caps,html.no-js .scroll-hint{display:none}
html.no-js .hero-head{position:relative;top:auto;padding-top:calc(var(--nav-h) + 40px)}

/* ---------- the wire ---------- */
.wire{position:absolute;left:0;top:0;width:100%;height:0;z-index:1;pointer-events:none;overflow:visible}
.wire path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.wire-dead{stroke:var(--dead);stroke-width:2}
.wire-halo{stroke:var(--copper);stroke-width:9;opacity:.16}
.wire-live{stroke:var(--copper);stroke-width:2.5}
.pulse{opacity:0}
.glow{position:fixed;left:0;top:0;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;pointer-events:none;z-index:4;opacity:0;background:radial-gradient(closest-side,oklch(70% 0.14 50 / .09),transparent 70%);will-change:transform;mix-blend-mode:screen}
html.no-js .wire,html.no-js .glow{display:none}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(100px,18vh,210px) 0 clamp(80px,12vh,165px)}   /* v3.6, Miguel: slower scroll after the hero, 1.5x the room per section */
.sec-head{margin-bottom:clamp(32px,5vh,56px)}
.sec-head .lede{margin-top:16px}
.sec-head h2{margin-top:10px}

/* ---------- services: the panel ---------- */
.panel-grid{display:grid;gap:28px;align-items:start}
@media (min-width:860px){ .panel-grid{grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:48px} .house-fig{order:2;position:sticky;top:calc(var(--nav-h) + 24px)} }
.house-fig{margin:0;position:sticky;top:var(--nav-h);z-index:3;background:var(--bg);box-shadow:0 34px 26px -12px var(--bg);padding:8px 0 12px}
@media (max-width:859.98px){ .house{max-width:250px;margin-inline:auto} }
.house{width:100%;height:auto}
.h-line{fill:none;stroke:var(--line-2);stroke-width:1.5}
.h-roof{fill:url(#roofG);stroke:color-mix(in oklch,var(--bg),white 22%);stroke-width:1.5}
.h-shell{fill:url(#wallG);stroke:color-mix(in oklch,var(--bg),white 22%);stroke-width:2.5}
.h-slab{stroke:color-mix(in oklch,var(--bg),white 26%);stroke-width:3}
.room{fill:url(#roomG);opacity:0;transition:opacity .55s var(--ease)}
.room.is-lit{opacity:1;filter:drop-shadow(0 0 14px color-mix(in oklch,var(--tungsten),transparent 35%))}
.fx{fill:none;stroke:var(--line-2);stroke-width:1.5;transition:stroke .4s var(--ease),fill .4s var(--ease)}
.fx.is-lit{stroke:var(--tungsten);fill:color-mix(in oklch,var(--tungsten),transparent 60%);filter:drop-shadow(0 0 6px var(--tungsten))}
.h-label{font:600 9px var(--body);letter-spacing:.14em;text-transform:uppercase;fill:var(--ink-3)}
.house-cap{font-size:.8rem;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;text-align:center;margin-top:6px}
.house-cap span{color:var(--tungsten);font-weight:700}

.panel{position:relative;border:1px solid var(--line-2);border-radius:14px;background:linear-gradient(180deg,var(--bg-3),var(--bg-2));box-shadow:inset 0 1px 0 color-mix(in oklch,white,transparent 90%),0 30px 60px -40px black;padding:0 clamp(12px,2.5vw,26px)}
.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;border:6px solid color-mix(in oklch,var(--bg),white 5%);pointer-events:none;opacity:.6}
:root{--steel:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.6  0 0 0 0 0.62  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.panel::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--steel);opacity:.14;mix-blend-mode:overlay;pointer-events:none}
.panel>*{position:relative;z-index:1}
.panel-top,.panel-foot{display:flex;align-items:center;gap:14px;height:64px;color:var(--ink-3)}
.panel-foot{height:56px}
.panel-label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.panel-lug,.panel-ground{width:22px;height:22px;flex:0 0 auto;border-radius:4px;border:1.5px solid var(--line-2);background:var(--bg-2)}
.breakers{list-style:none;margin:0;padding:0;display:grid}
.breaker{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2.5vw,26px);align-items:start;padding:clamp(24px,3.6vh,36px) 0;border-top:1px solid var(--line)}
.bk{display:grid;justify-items:center;gap:6px;background:none;border:0;padding:6px 6px;min-width:46px;cursor:pointer;border-radius:8px;touch-action:manipulation}
.bk:focus-visible{outline:2px solid var(--tungsten);outline-offset:2px}
.bk-toggle{position:relative;width:34px;height:64px;border-radius:6px;background:linear-gradient(180deg,color-mix(in oklch,var(--bg),white 12%),color-mix(in oklch,var(--bg),white 4%));border:1px solid var(--line-2);box-shadow:inset 0 1px 0 color-mix(in oklch,white,transparent 88%)}
.bk-nub{position:absolute;left:5px;right:5px;height:26px;top:32px;border-radius:4px;background:linear-gradient(180deg,oklch(40% 0.015 250),oklch(28% 0.015 250));box-shadow:0 2px 0 oklch(18% 0.01 250),inset 0 1px 0 rgba(255,255,255,.12);transition:top .28s cubic-bezier(.3,1.6,.5,1),background .3s var(--ease),box-shadow .3s var(--ease)}
.bk-nub::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:rgba(255,255,255,.18);border-radius:1px}
.bk-amps{font:700 .68rem var(--body);letter-spacing:.1em;color:var(--ink-3)}
.breaker.is-on .bk-nub{top:6px;background:linear-gradient(180deg,oklch(78% 0.13 55),oklch(62% 0.13 50));box-shadow:0 2px 0 oklch(40% 0.08 50),0 0 18px -2px var(--copper),inset 0 1px 0 rgba(255,255,255,.3)}
.breaker.is-on .bk-amps{color:var(--copper)}
.bk-text h3{color:var(--ink-2);transition:color .35s var(--ease)}
.bk-text p{margin-top:8px;color:var(--ink-3);max-width:48ch;transition:color .35s var(--ease)}
.breaker.is-on .bk-text h3{color:var(--ink)}
.breaker.is-on .bk-text p{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){ .bk-nub,.room,.fx{transition:none} }

/* ---------- process: junction boxes ---------- */
.boxes{list-style:none;margin:0;padding:0;display:grid;gap:clamp(84px,15vh,180px);max-width:1080px}
.jbox{position:relative;width:min(100%,560px);min-height:190px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg-2);perspective:900px;justify-self:start}
.jbox:nth-child(even){justify-self:end}
@media (max-width:719.98px){ .jbox:nth-child(even){justify-self:start} }
.jbox::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;bottom:-1px;border-radius:inherit;box-shadow:0 0 0 0 transparent;transition:box-shadow .6s var(--ease);pointer-events:none}
.jbox.is-open::before{box-shadow:0 0 40px -14px var(--copper)}
.jbox-in{padding:clamp(22px,3vw,34px) clamp(20px,3vw,32px);display:grid;grid-template-columns:auto 1fr;gap:6px 18px;opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease) .18s,transform .45s var(--ease) .18s}
.jbox-n{grid-row:1/3;font-family:var(--display);font-size:2.6rem;line-height:.9;color:var(--copper)}
.jbox-in p{color:var(--ink-2);margin-top:6px;max-width:44ch}
.jbox.is-open .jbox-in{opacity:1;transform:none}
.jbox-lid{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,color-mix(in oklch,var(--bg),white 10%),color-mix(in oklch,var(--bg),white 3%));border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 24px -16px black;transform-origin:50% 0;transform:rotateX(0) translateY(0);transition:transform .6s var(--ease),opacity .45s var(--ease) .12s;backface-visibility:hidden}
.jbox-lid i{position:absolute;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--bg-3)}
.jbox-lid i::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:1.5px;margin:-.75px 0 0 -3px;background:var(--line-2);transform:rotate(38deg)}
.jbox-lid i:first-child{left:14px;top:14px}
.jbox-lid i:nth-child(2){right:14px;bottom:14px}
.jbox-lid b{position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);font:700 3.4rem/1 var(--display);color:color-mix(in oklch,var(--bg),white 16%);letter-spacing:.02em}
.jbox-lid small{position:absolute;right:18px;top:16px;font:700 .62rem var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.jbox-lid::after{content:"";position:absolute;inset:10px;border-radius:8px;border:1px solid color-mix(in oklch,white,transparent 92%);pointer-events:none}
.jbox-lid::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--steel);opacity:.16;mix-blend-mode:overlay}
.jbox.is-open .jbox-lid{transform:rotateX(-78deg) translateY(-6px);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .jbox-lid,.jbox-in{transition:none} }

/* ---------- testimonials: the street ---------- */
.street-grid{display:grid;gap:28px;align-items:start}
@media (min-width:860px){ .street-grid{grid-template-columns:minmax(0,1fr) minmax(320px,500px);gap:48px} .street-fig{order:2;position:sticky;top:calc(var(--nav-h) + 24px)} }
.street-fig{margin:0;position:sticky;top:var(--nav-h);z-index:3;background:var(--bg);box-shadow:0 40px 30px -14px var(--bg);padding:8px 0 10px}
.street{width:100%;height:auto;border-radius:12px;overflow:hidden}
.sky{fill:url(#skyG)}
.stars circle{fill:var(--ink-2);opacity:.6}
.moon{fill:oklch(92% 0.02 90);opacity:.85;filter:drop-shadow(0 0 10px oklch(90% 0.04 90 / .5))}
.ground{stroke:var(--line-2);stroke-width:1.5}
.poles line{stroke:var(--line-2);stroke-width:2}
.h-wall{fill:color-mix(in oklch,var(--bg),white 4%);stroke:var(--line-2);stroke-width:1.5}
.win,.door{fill:color-mix(in oklch,var(--bg),white 2%);stroke:var(--line-2);stroke-width:1;transition:fill .5s var(--ease)}
.porch{fill:var(--line-2);transition:fill .4s var(--ease)}
.hs.is-lit .win{fill:var(--tungsten);filter:drop-shadow(0 0 5px color-mix(in oklch,var(--tungsten),transparent 25%))}
.hglow{fill:var(--tungsten);opacity:0;transition:opacity .7s var(--ease)}
.hglow.is-lit{opacity:.14}
.hs.is-lit .door{fill:color-mix(in oklch,var(--tungsten),transparent 55%)}
.hs.is-lit .porch{fill:var(--tungsten)}
.hs.is-lit .h-wall{fill:color-mix(in oklch,var(--bg),oklch(60% 0.1 60) 10%)}
.street-anchor{position:absolute;top:8px;width:10px;height:26px}
.street-anchor-l{left:calc(3.75% - 5px)}
.street-anchor-r{right:calc(3.75% - 5px)}
.quotes{list-style:none;margin:0;padding:0;display:grid;gap:clamp(60px,10.5vh,120px)}
.quote{opacity:.58;transform:translateX(-4px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.quote.is-lit{opacity:1;transform:none}
.quote blockquote{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.05;letter-spacing:.005em}
.quote cite{display:block;margin-top:14px;font-style:normal;color:var(--copper);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
@media (prefers-reduced-motion:reduce){ .quote,.win,.door,.porch{transition:none} }

/* ---------- contact: the circuit ---------- */
.circuit-sec .sec-head{margin-bottom:clamp(56px,9vh,84px)}
.circuit-grid{display:grid;gap:28px;align-items:start}
@media (min-width:860px){ .circuit-grid{grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:56px} .circuit-fig{position:sticky;top:calc(var(--nav-h) + 24px)} }
.circuit-fig{margin:0;position:relative;max-width:280px;background:var(--bg)}
@media (max-width:859.98px){ .circuit-fig{max-width:220px} }
.circuit{width:100%;height:auto}
.c-trace{fill:none;stroke:var(--dead);stroke-width:2;transition:stroke .5s var(--ease)}
.c-node{fill:var(--bg);stroke:var(--line-2);stroke-width:1.5;transition:stroke .4s}
.c-blade{stroke:var(--ink-2);stroke-width:2.5;stroke-linecap:round;transform-origin:0 0;transform:rotate(-38deg);transition:transform .45s cubic-bezier(.3,1.4,.5,1),stroke .4s}
.c-gap{stroke:transparent}
.sw.is-closed .c-blade{transform:rotate(0);stroke:var(--copper)}
.sw.is-closed .c-node{stroke:var(--copper)}
.c-lamp-glow{fill:var(--tungsten);opacity:0;transition:opacity .6s var(--ease)}
.c-lamp-glass{fill:color-mix(in oklch,var(--bg),white 3%);stroke:var(--line-2);stroke-width:1.5;transition:fill .6s var(--ease),stroke .6s}
.c-fil{fill:none;stroke:var(--line-2);stroke-width:1.5;transition:stroke .5s}
.c-lamp-lead{stroke:var(--dead);stroke-width:2;transition:stroke .5s}
.c-txt{font:600 8.5px var(--body);letter-spacing:.14em;text-transform:uppercase;fill:var(--ink-3)}
.circuit-fig.is-fed .c-trace:first-of-type{stroke:var(--copper-2)}
.circuit.is-live .c-trace{stroke:var(--copper)}
.circuit.is-live .c-lamp-glow{opacity:.22;filter:blur(6px)}
.circuit.is-live .c-lamp-glass{filter:drop-shadow(0 0 8px var(--tungsten))}
.circuit.is-live .c-lamp-glass{fill:var(--tungsten);stroke:var(--tungsten-2)}
.circuit.is-live .c-fil{stroke:oklch(60% 0.12 50)}
.circuit.is-live .c-lamp-lead{stroke:var(--copper)}
.circuit-anchor{position:absolute;left:calc(55.6% - 5px);top:0;width:10px;height:100%}
.fields{display:grid;gap:18px;max-width:560px}
.field{display:grid;gap:8px}
.field-l{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-3);transition:color .3s}
.field input,.field textarea{font:inherit;color:var(--ink);background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;padding:14px 16px;min-height:52px;width:100%;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.field textarea{resize:vertical;min-height:110px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.7}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--copper-2);box-shadow:0 0 0 3px color-mix(in oklch,var(--copper),transparent 80%)}
.field.is-closed .field-l{color:var(--copper)}
.field.is-closed input,.field.is-closed textarea{border-color:var(--copper-dim)}
.contacts-left{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.contacts-left span{color:var(--ink)}
.btn-send{justify-self:start;min-height:52px;padding-inline:1.5em}
.btn-send:disabled{cursor:not-allowed;color:var(--ink-3);border-color:var(--line)}
.btn-send:disabled .btn-dot{background:var(--dead)}
.btn-send:not(:disabled){background:var(--tungsten);border-color:var(--tungsten);color:#1d1508;box-shadow:0 0 34px -6px var(--tungsten-2)}
.btn-send:not(:disabled) .btn-dot{background:#1d1508}
.form-note{color:var(--ink);padding:14px 16px;border:1px solid var(--copper-dim);border-radius:10px;background:color-mix(in oklch,var(--copper),transparent 92%)}

/* ---------- footer: the ground rod ---------- */
.ground-sec{position:relative;z-index:2;padding:clamp(48px,8vh,96px) 0 max(40px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.ground-grid{display:grid;gap:28px;align-items:start}
@media (min-width:720px){ .ground-grid{grid-template-columns:120px minmax(0,1fr);gap:40px} .demo-note{grid-column:1/-1} }
.rod{position:relative;display:grid;justify-items:center;gap:6px;width:120px;padding-top:48px}
.rod-in{position:absolute;left:calc(50% - 5px);top:0;width:10px;height:48px}
.rod-sym{width:60px;height:60px;stroke:var(--copper);stroke-width:2.5;stroke-linecap:round;fill:none}
.rod-label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.brand-foot{font-family:var(--display);font-size:2rem;text-transform:uppercase;letter-spacing:.02em}
.brand-foot b{color:var(--copper)}
.ground-copy p+p{margin-top:12px;color:var(--ink-2);max-width:60ch}
.ground-copy a,.demo-note a{display:inline-block;padding:12px 0}
.demo-note{font-size:.85rem;color:var(--ink-3);border-top:1px solid var(--line);padding-top:20px;max-width:none}
.demo-note a{color:var(--ink-2)}