/* ============================================================
   Brightwell Electric — electrical demo template
   Identity: "Make and Break". See brightwell-brand.md.

   Seventh in the trade set, and by a distance the most animated.
   That is the client's explicit brief — blue, yellow and white, a
   plug entering a socket as you scroll, layering, page
   transitions — and explicit direction governs (CLAUDE.md §0).

   What it does NOT override is §11.4, the floor context never
   relaxes. So:
     · every animation is off under prefers-reduced-motion
     · the phone number is in the first viewport and is never
       inside a scroll-driven element
     · with no JavaScript the hero renders in its CONNECTED end
       state, so the page reads as a finished picture rather than
       an unstarted one
     · no motion large enough to trigger a vestibular response —
       the stage translates, it never spins or zooms the viewport

     collision  cool gray  / torch red      / Anton      / 1 page
     mechanical green-white/ teal+yellow    / Saira      / 1 page
     vet        oatmeal    / burgundy+sage  / Gabarito   / 6 pages
     remodel    graphite   / brass          / Archivo    / 9 pages
     tree       stone+loden/ marking orange / Aleo slab  / 6 pages
     pest       indigo     / scarlet        / Petrona    / 8 pages
     THIS       WHITE      / VOLT BLUE      / Sora       / 7 pages
                + night stages + HAZARD YELLOW  + Jakarta

   Pest is the other blue build. It is a dark indigo CASE holding
   bone mounts. This is a white page with dark ENERGIZED STAGES
   cut into it, and its blue is a saturated volt blue rather than
   a cabinet navy. Different ground, different role, different
   saturation.

   COLOR ROLES DECLARED UP FRONT — fill, text-on-white,
   text-on-night, for both signals. Standing practice now.
   ============================================================ */

:root{
  /* the page — white with a faint blue cast */
  --paper:hsl(210 24% 97%);
  --paper-2:hsl(210 22% 93%);
  --line:hsl(212 18% 84%);
  --ink:hsl(222 44% 12%);
  --ink-2:hsl(216 13% 36%);
  /* the stage — energized night */
  --night:hsl(226 64% 10%);
  --night-2:hsl(224 50% 15%);
  --night-line:hsl(220 30% 28%);
  --on-night:hsl(210 32% 96%);
  --on-night-2:hsl(214 20% 74%);
  /* volt blue — the structural signal */
  --volt:hsl(212 96% 52%);       /* FILL */
  --volt-ink:hsl(214 92% 36%);   /* TEXT on white */
  --volt-lit:hsl(204 100% 68%);  /* TEXT on night */
  /* hazard yellow — energy, warnings, the live conductor */
  --amp:hsl(48 98% 54%);         /* FILL. Dark ink sits on it */
  --amp-ink:hsl(38 96% 28%);     /* TEXT on white */
  --amp-lit:hsl(50 100% 64%);    /* TEXT on night */
  --danger:hsl(4 78% 46%);
  --w:hsl(210 40% 99%);          /* tinted white, never #fff (§12.0) */
  --r:10px;
  --pad:clamp(58px,7vw,112px);
  --gut:clamp(18px,2.2vw,32px);
  --p:1;                          /* stage progress. JS drives it; 1 = connected */
  --ow:min(23vw,215px);           /* outlet width — the plug and arc key off it */
  --ox:13%;                       /* how far in from the right the outlet sits */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.62 "Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Sora,system-ui,sans-serif;font-weight:600;margin:0;line-height:1.1;
  letter-spacing:-.026em}
p{margin:0 0 1em}
img{max-width:100%}
a{color:inherit}
ul,ol{list-style:none;margin:0;padding:0}
/* An email address is one unbreakable 29-character word. It sets a min-content
   floor that a grid column cannot go below, and at 320px that pushes the whole
   page wider than the screen. Handled once here rather than in each component
   that happens to print an address. */
p,li,cite,dd,dt,td,th,figcaption{overflow-wrap:anywhere}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--volt);outline-offset:3px}
.dark :focus-visible,.stage :focus-visible,.mast :focus-visible{outline-color:var(--amp)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--amp);color:var(--ink);
  padding:12px 18px;font-weight:700;text-decoration:none}
.skip:focus{left:8px;top:8px}

h1{font-size:clamp(35px,5vw,68px);letter-spacing:-.034em}
h2{font-size:clamp(27px,3.3vw,45px);letter-spacing:-.028em}
h3{font-size:clamp(19px,1.55vw,23px);letter-spacing:-.016em}
.lede{font-size:clamp(17px,1.55vw,21px);line-height:1.55;color:var(--ink-2);max-width:56ch;margin:20px 0 0}
.dark .lede,.stage .lede{color:var(--on-night-2)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--volt-ink);margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--amp);border-radius:2px}
.dark .eyebrow,.stage .eyebrow{color:var(--amp-lit)}

/* ---------- surfaces ---------- */
.section{padding:var(--pad) 0;position:relative}
.section.alt{background:var(--paper-2)}
.dark{background:var(--night);color:var(--on-night)}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--on-night)}
.head{margin-bottom:clamp(32px,3.8vw,54px)}
.head h2{max-width:19ch}
.head p{color:var(--ink-2);max-width:58ch;margin:16px 0 0;font-size:18px}
.dark .head p{color:var(--on-night-2)}

/* ---------- masthead ---------- */
.mast{background:var(--night);color:var(--on-night);position:sticky;top:0;z-index:60;
  border-bottom:1px solid var(--night-line)}
.mast .wrap{display:flex;align-items:center;gap:22px;min-height:74px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;padding:8px 0}
.logo .bolt{width:22px;height:22px;flex:0 0 22px}
.logo b{font-family:Sora,sans-serif;font-size:21px;font-weight:700;letter-spacing:-.03em}
.nav{display:flex;gap:24px}
.nav a{text-decoration:none;font-size:15px;color:var(--on-night-2);position:relative;
  display:flex;align-items:center;min-height:44px}
.nav a:hover{color:var(--on-night)}
.nav a.here{color:var(--on-night)}
.nav a.here::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:2px;
  background:var(--amp);box-shadow:0 0 10px var(--amp)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:14px 26px;
  border-radius:var(--r);border:2px solid transparent;text-decoration:none;font-weight:700;
  font-size:16px;cursor:pointer;font-family:inherit;position:relative;
  transition:transform .08s ease,background-color .18s ease,border-color .18s ease,
             color .18s ease,box-shadow .18s ease}
.btn-1{background:var(--amp);color:var(--ink);border-color:var(--amp)}
.btn-1:hover{box-shadow:0 0 0 4px hsl(48 98% 54% / .28),0 8px 22px hsl(48 98% 44% / .3)}
.btn-2{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-2:hover{border-color:var(--volt);color:var(--volt-ink)}
.dark .btn-2,.stage .btn-2{color:var(--on-night);border-color:var(--night-line)}
.dark .btn-2:hover,.stage .btn-2:hover{border-color:var(--volt-lit);color:var(--volt-lit)}
.btn:active{transform:translateY(2px)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ============================================================
   THE STAGE — the plug going into the socket.
   Layers move at different rates off a single --p (0 → 1) that
   JS writes while the pinned panel is in view. Everything here
   has a static fallback: --p defaults to 1, so with no script
   the plug is home and the scene is lit.
   ============================================================ */
.stage{background:var(--night);color:var(--on-night);position:relative}
.stage-track{height:280vh}                    /* the scroll the pin consumes */
.stage-pin{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:flex-start;padding-top:clamp(64px,10vh,124px)}
.stage-scene{position:absolute;inset:0;overflow:hidden}

/* layer 1 — the wall, slowest */
.lyr-wall{position:absolute;inset:-6% -4%;
  background:
    radial-gradient(120% 90% at 72% 50%, hsl(224 50% 16%) 0%, hsl(226 64% 10%) 62%),
    var(--night);
  transform:translate3d(calc(var(--p) * -18px), 0, 0);
  will-change:transform}
/* the faint conduit runs behind everything */
.lyr-conduit{position:absolute;left:0;right:0;top:68%;height:2px;
  background:linear-gradient(90deg,transparent,hsl(220 30% 30%) 12%,hsl(220 30% 30%) 88%,transparent);
  transform:translateY(-50%) translate3d(calc(var(--p) * -30px),0,0)}

/* layer 2 — the outlet, fixed right of center */
.lyr-outlet{position:absolute;top:68%;right:var(--ox);width:var(--ow);z-index:1;
  transform:translateY(-50%) translate3d(calc(var(--p) * -8px),0,0)}
.lyr-outlet svg{display:block;width:100%;height:auto}

/* layer 3 — plug and cord, travels furthest */
/* The plug travels along a band that crosses the whole scene, and the copy sits
   in the left half of that same band. The lane is a fixed box carrying a
   gradient mask, so the plug fades out before it reaches the copy column
   instead of sliding across the headline and the call button. The mask lives on
   the lane rather than the plug because a mask travels with a transform. */
.lyr-lane{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 38%,#000 58%);
          mask-image:linear-gradient(90deg,transparent 38%,#000 58%)}

/* The plug rests just left of the outlet with its prongs crossing the faceplate
   edge, and starts a full screen-width to the left of that. z-index puts it in
   front of the wall but behind the faceplate, so the prongs read as going in. */
.lyr-plug{position:absolute;top:calc(68% - var(--ow) * .225);
  right:calc(var(--ox) + var(--ow) * .655);
  width:calc(var(--ow) * 1.05);z-index:0;
  transform:translateY(-50%)
            translate3d(calc((1 - var(--p)) * -42vw), 0, 0);
  will-change:transform}
.lyr-plug svg{display:block;width:100%;height:auto;overflow:visible}

/* layer 4 — the arc, only once contact is made */
.lyr-arc{position:absolute;top:calc(68% - var(--ow) * .225);
  right:calc(var(--ox) + var(--ow) * .63);
  width:calc(var(--ow) * .62);z-index:2;aspect-ratio:1;transform:translate(50%,-50%);
  opacity:clamp(0, (var(--p) - .72) * 7, 1);
  background:radial-gradient(circle, hsl(48 100% 68% / .95) 0%, hsl(48 100% 60% / .5) 22%,
             hsl(212 96% 60% / .25) 46%, transparent 68%);
  filter:blur(2px);pointer-events:none}

/* the whole scene brightens on contact */
.stage-lit{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(70% 55% at 76% 68%, hsl(212 96% 52% / .17), transparent 70%);
  opacity:clamp(0, (var(--p) - .66) * 4, 1)}

/* stage copy sits above the scene and never moves */
.stage-copy{position:relative;z-index:3;max-width:min(620px,60%)}
.stage-copy h1{color:var(--on-night)}
.stage-copy .lede{color:var(--on-night-2)}
.stage-cap{position:absolute;left:0;right:0;bottom:26px;z-index:3;
  font-size:13px;color:var(--on-night-2);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.stage-cap b{color:var(--amp-lit);font-weight:600}
/* the scroll cue fades out once you have started */
.stage-cue{opacity:clamp(0, 1 - var(--p) * 4, 1)}

/* ---------- the running conductor: a live line down the page ---------- */
.rail{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line);overflow:hidden}
.rail::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--rail,0%);
  background:linear-gradient(180deg,var(--volt),var(--amp));
  box-shadow:0 0 12px hsl(212 96% 52% / .6)}
.dark .rail{background:var(--night-line)}
/* The rail needs a box to run down. Its own wrapper, rather than the section or
   the .wrap, so the fill length is the length of the sequence beside it and not
   of the heading above it. */
.railed{position:relative;padding-left:30px}
.railed .rail{left:0}

/* ---------- cards ---------- */
.cells{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.cell{background:var(--w);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.cell:hover{border-color:var(--volt);box-shadow:0 10px 30px hsl(212 60% 30% / .1);
  transform:translateY(-2px)}
.dark .cell{background:var(--night-2);border-color:var(--night-line)}
.cell .n{font-family:Sora,sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;
  color:var(--volt-ink)}
.dark .cell .n{color:var(--volt-lit)}
.cell p{font-size:15.5px;color:var(--ink-2);margin:0}
.dark .cell p{color:var(--on-night-2)}
.cell .price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font-size:14.5px;font-weight:600}
.dark .cell .price{border-color:var(--night-line)}

/* ---------- spec figures: amps, gauges, years ---------- */
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut)}
.spec{border-top:3px solid var(--amp);padding-top:16px}
.spec .n{display:block;font-family:Sora,sans-serif;font-size:clamp(30px,3.4vw,44px);
  font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.dark .spec .n{color:var(--on-night)}
.spec .l{display:block;font-size:14px;line-height:1.5;color:var(--ink-2);margin-top:9px;max-width:26ch}
.dark .spec .l{color:var(--on-night-2)}

/* ---------- rows ---------- */
.rows li{display:grid;grid-template-columns:170px 1fr;gap:8px 32px;padding:26px 0;
  border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.dark .rows li{border-color:var(--night-line)}
.rows .k{font-family:Sora,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--volt-ink);padding-top:5px}
.dark .rows .k{color:var(--volt-lit)}
.rows h3{margin-bottom:8px}
.rows p{color:var(--ink-2);max-width:64ch;margin:0 0 .7em}
.rows p:last-child{margin-bottom:0}
.dark .rows p{color:var(--on-night-2)}
.rows a{color:var(--volt-ink);font-weight:600}
.dark .rows a{color:var(--volt-lit)}

/* ---------- source / law panel ---------- */
.source{background:var(--night-2);color:var(--on-night);border-radius:var(--r);
  border-left:5px solid var(--amp);padding:clamp(24px,3vw,38px)}
.source h3{margin-bottom:12px;font-size:clamp(21px,2vw,28px);color:var(--on-night)}
.source p{color:var(--on-night-2);max-width:60ch}
.source cite{display:block;font-style:normal;font-size:13.5px;line-height:1.6;
  color:var(--on-night-2);border-top:1px solid var(--night-line);padding-top:14px;margin-top:8px}
.source cite a{color:var(--amp-lit);font-weight:600}

/* ---------- the stick figure: what not to do ---------- */
.zap{background:var(--night);border:1px solid var(--night-line);border-radius:var(--r);
  padding:clamp(20px,3vw,34px);display:grid;place-items:center;min-height:340px;position:relative}
.zap svg{width:100%;max-width:330px;height:auto;overflow:visible}
/* the same joke at hero size, where it is the point of the page rather than a
   teaser for it */
.zap-lg{min-height:min(520px,68vh)}
.zap-lg svg{max-width:440px}
.zap-cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:13px;
  color:var(--on-night-2)}

/* ---------- photographs ----------
   These are documentation, not decoration: real panels in real houses,
   photographed by other people. Nothing is cropped by default, because the
   whole frame is frequently the point — the panel photograph earns its place
   on the strength of a hand-written directory and an inspection sticker that a
   16:9 crop would cut off. .crop is opt-in, for the landscape frames where
   trimming costs nothing.

   The credit line is a license condition and not a courtesy. build.mjs
   generates it from img/credits.json and refuses to build without it, so it
   cannot be lost by editing a page. */
.shot{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--w)}
.shot img{display:block;width:100%;height:auto;background:var(--paper-2)}
.shot.crop img{aspect-ratio:16/10;object-fit:cover;object-position:center}
.shot figcaption{padding:15px 18px 0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.shot .credit{display:block;padding:9px 18px 15px;font-size:12px;line-height:1.5;
  color:var(--ink-2)}
.shot .credit a{color:var(--volt-ink)}
.dark .shot,.stage .shot{background:var(--night-2);border-color:var(--night-line)}
.dark .shot figcaption,.dark .shot .credit{color:var(--on-night-2)}
.dark .shot .credit a{color:var(--amp-lit)}

/* ---------- danger callout ---------- */
.danger{background:var(--w);border:1px solid var(--line);border-radius:var(--r);
  border-top:5px solid var(--danger);padding:24px 24px 26px}
.danger h3{color:var(--danger);margin-bottom:10px}
.danger p{color:var(--ink-2);margin:0 0 .7em}
.danger p:last-child{margin-bottom:0}

/* ---------- form ---------- */
.form{background:var(--w);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3vw,38px)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{display:flex;flex-direction:column;gap:6px}
.f.full{grid-column:1/-1}
.f label{font-size:14px;font-weight:600}
.f input,.f textarea,.f select{font:inherit;font-size:16px;padding:13px 14px;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);
  min-height:50px}
.f input:focus,.f textarea:focus{border-color:var(--volt)}
.f textarea{min-height:120px;resize:vertical}
.f .hint{font-size:13px;color:var(--ink-2)}
.f .err{display:none;font-size:13.5px;font-weight:600;color:var(--danger)}
.f.bad input,.f.bad textarea{border-color:var(--danger);border-width:2px}
.f.bad .err{display:block}
fieldset{border:0;padding:0;margin:0}
legend{font-size:14px;font-weight:600;padding:0 0 9px}
.f .grouplabel{font-family:Sora,sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);display:block;
  margin-bottom:10px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts label{display:flex;align-items:center;gap:10px;min-height:50px;padding:9px 14px;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);font-size:15px;
  font-weight:400;cursor:pointer}
.opts label:hover{border-color:var(--volt)}
.opts input{flex:none;width:20px;height:20px;min-height:0;accent-color:var(--volt-ink)}
.sent{background:var(--w);border:1px solid var(--line);border-radius:var(--r);
  border-left:5px solid var(--amp);padding:clamp(24px,3vw,36px)}
.sent h3{margin-bottom:10px}
.sent p{color:var(--ink-2);margin:0 0 .8em}
.sent p:last-child{margin-bottom:0}
.sent a{color:var(--volt-ink)}

/* ---------- grids ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,54px)}

/* ---------- footer ---------- */
.foot{background:var(--night);color:var(--on-night-2);padding:clamp(46px,5vw,74px) 0 40px;
  font-size:15px}
.foot .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px var(--gut)}
/* A grid item defaults to min-width:auto, which resolves to min-content. A
   <select> whose longest option is "Buying a house and want it looked at" then
   sets a floor wider than a 320px screen and pushes the whole page sideways.
   Same failure as the long email address; same one-line answer. */
.grid-2>*,.form-grid>*,.cells>*,.foot .wrap>*{min-width:0}
.foot h2{font-family:Sora,sans-serif;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-night);margin-bottom:14px;font-weight:700}
.foot ul li{margin-bottom:9px;line-height:1.5;overflow-wrap:anywhere}
.foot a{color:var(--on-night-2)}
.foot a:hover{color:var(--amp-lit)}
.foot .logo{margin-bottom:15px}
.foot .logo b{color:var(--on-night)}
.demo{grid-column:1/-1;border-top:1px solid var(--night-line);padding-top:22px;margin:8px 0 0;
  font-size:13.5px;line-height:1.65;max-width:104ch}
.demo b{color:var(--on-night)}
.demo a{color:var(--amp-lit)}

.callbar{display:none}

/* ---------- reveal on scroll (the secondary motion idea) ---------- */
.js .up{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js .up.in{opacity:1;transform:none}

@media(max-width:1040px){
  .cells{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr 1fr}
  .foot .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .nav{display:none}
  .grid-2,.form-grid,.opts{grid-template-columns:1fr}
  .rows li{grid-template-columns:1fr;gap:5px}
  .rows .k{padding-top:0}
  .stage-copy{max-width:none}
  .stage-track{height:220vh}
  /* On a phone the copy is the full width of the screen, so a travel band that
     crosses the viewport must cross the copy — no mask tuning fixes that, the
     plug ends up over the estimate button either way. So the scene stops being
     a layer behind the copy and becomes a row beneath it. Overlap is then
     impossible by construction rather than by arithmetic. */
  /* Sizing this to the viewport does not work here: the pin starts below the
     masthead and the call bar covers the last 78px, so any vh figure overshoots
     at both ends and the caption ends up behind the call bar. Let the rows size
     it instead — it only has to be shorter than the track to stay sticky. */
  .stage-pin{display:grid;grid-template-rows:auto minmax(176px,200px) auto;
    height:auto;
    /* the base rule is flex with align-items:flex-start; left in place it stops
       the scene row from stretching and the whole scene collapses to nothing */
    align-items:stretch;row-gap:10px;
    padding-top:clamp(24px,5vh,56px);padding-bottom:22px}
  .stage-pin>.wrap{grid-row:1}
  .stage-scene{position:relative;inset:auto;grid-row:2;width:100%}
  .stage-cap{grid-row:3}
  /* The scene row is whatever is left after the copy and the caption, roughly
     180px on a 390x844 screen. The outlet is 1.25x its own width tall, so it
     has to stay under about 140px wide or it pushes the caption off. */
  :root{--ow:min(30vw,132px);--ox:8%}
  /* the band is now measured against the scene's own height, not the screen's */
  .lyr-outlet{top:50%}
  .lyr-plug{top:calc(50% - var(--ow) * .225)}
  .lyr-conduit{top:50%}
  .lyr-arc{top:calc(50% - var(--ow) * .225)}
  .lyr-lane{-webkit-mask-image:linear-gradient(90deg,transparent 1%,#000 16%);
            mask-image:linear-gradient(90deg,transparent 1%,#000 16%)}
  .foot .wrap{grid-template-columns:1fr}
  body{padding-bottom:78px}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--night);
    border-top:1px solid var(--night-line);padding:10px;gap:9px}
  .callbar .btn{flex:1;min-height:54px;justify-content:center;font-size:15px;
    white-space:nowrap;padding:14px 12px}
  .callbar .btn-2{color:var(--on-night);border-color:var(--night-line)}
}
@media(max-width:560px){
  .specs{grid-template-columns:1fr}
  h1{font-size:clamp(31px,8.6vw,44px)}
}

/* ============================================================
   PAGE TRANSITIONS
   Chrome's multi-page view transitions. Every other browser
   navigates normally and loses nothing. Gated on the motion
   preference, so it never runs for someone who asked for less.
   ============================================================ */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-out .22s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:vt-in .3s cubic-bezier(0,0,.2,1) both}
  ::view-transition-old(mast),::view-transition-new(mast){animation:none}
}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
.mast{view-transition-name:mast}

/* ============================================================
   THE FLOOR. Everything above switches off here.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  /* the stage resolves to its connected end state and stops being a pin */
  :root{--p:1}
  .stage-track{height:auto}
  .stage-pin{position:static;height:auto;min-height:82vh;padding:clamp(40px,7vw,90px) 0}
  /* Nothing else is needed here. Every layer's transform is written in terms
     of --p, so pinning --p at 1 already resolves the scene to "connected".
     Zeroing the transforms instead broke it: it stripped the translateY(-50%)
     that centers the outlet on its band, and re-pinned the plug to the desktop
     band while the outlet stayed on the mobile one. */
  .stage-cue{display:none}
  .js .up{opacity:1;transform:none}
  .cell:hover{transform:none}
  .btn:active{transform:none}
  .zap svg *{animation:none!important}
}

/* ---------- Built by Iron Digital MI ----------
   currentColor throughout so the line inherits whatever the footer already is.
   The mark itself is never recolored. */
.id-by { margin: 1.6em 0 0; }
.id-by a { display: inline-flex; align-items: center; gap: .6em;
  color: inherit; text-decoration: none; font-size: .8125rem; line-height: 1.3; }
.id-by a:hover span, .id-by a:focus-visible span { text-decoration: underline; }
.id-by img { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.id-by b { font-weight: 700; }

/* September UI refinement */
@media(min-width:861px){.stage{--ow:min(27vw,290px);--ox:9%}.lyr-outlet{top:49%}.lyr-plug,.lyr-arc{top:calc(49% - var(--ow) * .225)}.stage-copy{max-width:52%}}.circuit-caption{position:absolute;z-index:3;right:7%;top:73%;width:34%;display:grid;gap:8px;color:#edf3fa;font-size:15px;line-height:1.5}.circuit-caption strong{font-size:19px;color:#fce56e}.circuit-caption a{color:inherit;text-decoration:underline}@media(max-width:860px){.circuit-caption{position:relative;inset:auto;width:auto;margin:16px 24px 32px}.stage-cap{font-size:14px}}
@media(max-width:600px){.mast .btn{font-size:14px;white-space:nowrap;padding-inline:12px}}