/* ---------------------------------------------------------------------------
   KIT WALL (template-parts/kit-wall.php) - For your business page.
   Neon line-art comms wall: rack (firewall, switch, backups), ceiling Wi-Fi
   access point, desk (laptop, IP phone), AI chip. Pure SVG + CSS, no JS,
   no images, no external requests. Copy in the template is DRAFT.

   Layout: mobile-first card grid (2 columns, 3 from 821px); from 1024px the
   devices sit on one wall, absolutely positioned in a 1180 x 620 grid that
   matches .kw-scene and .kw-cables (same viewBox), so cables meet the ports.

   CONTRAST (WCAG 2.x, computed by script on 2026-10-24; 34 pairs, 0 fail).
   'body' needs 4.5:1, 'large' 3:1, 'ui' (line art, focus rings) 3:1.
   Wall worst case #1B2E36 = ink-4 + teal glow .07 + violet glow .07 + teal grid
   .06 stacked (the CSS uses .06/.06/.05). Hover-halo rows assume the same-colour
   glow reaches .18 next to the stroke: an ESTIMATE from blur size and alpha, not
   measured. If a colour, opacity or glow changes, re-measure it.
     #FFC24D on #131418  11.46:1  body  PASS  Kicker "The kit" (gold) on ink
     #F4F1EA on #131418  16.32:1  large PASS  Section heading on ink
     #B9BCC4 on #131418   9.69:1  body  PASS  Intro text on ink
     #F4F1EA on #1C1E24  14.77:1  body  PASS  Device label on label pill (ink-2)
     #F4F1EA on #25282F  13.08:1  body  PASS  Hover caption on caption pill (ink-3), wide layout
     #B9BCC4 on #1C1E24   8.77:1  body  PASS  Caption on device card (ink-2), narrow layout
     #F4F1EA on #1C1E24  14.77:1  body  PASS  Device label on device card (ink-2), narrow layout
     #FF6A3C on #1B2E36   4.95:1  ui    PASS  Line art coral (Firewall) on wall, glow + grid (worst case)
     #FF6A3C on #101318   6.54:1  ui    PASS  Line art coral (Firewall) on device body
     #FF6A3C on #1C1E24   5.85:1  ui    PASS  Line art coral (Firewall) on device card, narrow layout
     #FF6A3C on #443937   3.91:1  ui    PASS  Line art coral (Firewall) over its own hover halo (worst case)
     #2AC3BD on #1B2E36   6.47:1  ui    PASS  Line art teal (Switch) on wall, glow + grid (worst case)
     #2AC3BD on #101318   8.54:1  ui    PASS  Line art teal (Switch) on device body
     #2AC3BD on #1C1E24   7.65:1  ui    PASS  Line art teal (Switch) on device card, narrow layout
     #2AC3BD on #1E494E   4.55:1  ui    PASS  Line art teal (Switch) over its own hover halo (worst case)
     #A99BFF on #1B2E36   5.92:1  ui    PASS  Line art violet (Wifi, AI) on wall, glow + grid (worst case)
     #A99BFF on #101318   7.82:1  ui    PASS  Line art violet (Wifi, AI) on device body
     #A99BFF on #1C1E24   7.00:1  ui    PASS  Line art violet (Wifi, AI) on device card, narrow layout
     #A99BFF on #35425A   4.24:1  ui    PASS  Line art violet (Wifi, AI) over its own hover halo (worst case)
     #FFC24D on #1B2E36   8.77:1  ui    PASS  Line art gold (Backups) on wall, glow + grid (worst case)
     #FFC24D on #101318  11.59:1  ui    PASS  Line art gold (Backups) on device body
     #FFC24D on #1C1E24  10.37:1  ui    PASS  Line art gold (Backups) on device card, narrow layout
     #FFC24D on #44493A   5.79:1  ui    PASS  Line art gold (Backups) over its own hover halo (worst case)
     #8BE15A on #1B2E36   8.73:1  ui    PASS  Line art lime (Phones) on wall, glow + grid (worst case)
     #8BE15A on #101318  11.53:1  ui    PASS  Line art lime (Phones) on device body
     #8BE15A on #1C1E24  10.33:1  ui    PASS  Line art lime (Phones) on device card, narrow layout
     #8BE15A on #2F4E3C   5.72:1  ui    PASS  Line art lime (Phones) over its own hover halo (worst case)
     #FF5C93 on #1B2E36   4.83:1  ui    PASS  Line art magenta (Websites, AI) on wall, glow + grid (worst case)
     #FF5C93 on #101318   6.38:1  ui    PASS  Line art magenta (Websites, AI) on device body
     #FF5C93 on #1C1E24   5.72:1  ui    PASS  Line art magenta (Websites, AI) on device card, narrow layout
     #FF5C93 on #443647   3.86:1  ui    PASS  Line art magenta (Websites, AI) over its own hover halo (worst case)
     #FFC24D on #1B2E36   8.77:1  ui    PASS  Focus ring gold on wall (worst case)
     #FFC24D on #131418  11.46:1  ui    PASS  Focus ring gold on ink (narrow layout, ring sits outside card)
     #FFC24D on #1C1E24  10.37:1  ui    PASS  Focus ring gold next to device card edge (ink-2)
   Not rated (decorative, aria-hidden): wall frame, rack, desk, cables, data
   pulses, faded detail lines (.kw-d), tints (.kw-t), Wi-Fi arcs.
   --------------------------------------------------------------------------- */

.kit-wall{--kw-body:#101318;--kw-frame:#3A414E;border-top:1px solid rgba(244,241,234,.06)}
.kit-wall .intro{margin-bottom:40px}

/* ---------- device colours (--kc stroke, --kg glow at alpha .5) ---------- */
.kw-i-fw{--kc:var(--coral);--kg:rgba(255,106,60,.5)}
.kw-i-sw{--kc:var(--teal);--kg:rgba(42,195,189,.5)}
.kw-i-nas{--kc:var(--gold);--kg:rgba(255,194,77,.5)}
.kw-i-ap{--kc:var(--violet);--kg:rgba(169,155,255,.5)}
.kw-i-lap{--kc:var(--magenta);--kg:rgba(255,92,147,.5)}
.kw-i-ph{--kc:var(--lime);--kg:rgba(139,225,90,.5)}
.kw-i-ai{--kc:var(--violet);--kg:rgba(169,155,255,.5)}

/* ---------- the list / cards (narrow first) ---------- */
.kw-wall{position:relative;isolation:isolate}
.kw-scene,.kw-cables{display:none}
.kw-kit{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kw-item{min-width:0}
.kw-i-ai{grid-column:1/-1}

.kit-wall .kw-dev{display:flex;flex-direction:column;align-items:center;gap:10px;height:100%;padding:18px 12px 16px;text-align:center;text-decoration:none;color:var(--kc);background:var(--ink-2);border:1px solid rgba(244,241,234,.10);border-radius:14px;transition:border-color .25s ease,box-shadow .25s ease}
.kit-wall .kw-dev:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:14px}

.kw-art{display:block;width:100%;height:76px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px var(--kg));transition:filter .3s ease,transform .3s ease}
.kw-label{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.2;letter-spacing:-.01em;color:var(--on-dark)}
.kw-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--kc);box-shadow:0 0 8px var(--kc);flex:none}
.kw-cap{font-size:.85rem;line-height:1.4;color:var(--on-dark-muted)}

/* AI card spans the row: art left, words right */
.kw-i-ai .kw-dev{display:grid;grid-template-columns:72px auto;column-gap:16px;row-gap:4px;justify-content:center;align-items:center;text-align:left}
.kw-i-ai .kw-art{grid-row:1/3;height:66px}
.kw-i-ai .kw-label{align-self:end}
.kw-i-ai .kw-cap{align-self:start}

.kit-wall .kw-dev:hover{border-color:var(--kc);box-shadow:0 0 22px -8px var(--kc)}
.kit-wall .kw-dev:hover .kw-art,.kit-wall .kw-dev:focus-visible .kw-art{filter:drop-shadow(0 0 7px var(--kg)) drop-shadow(0 0 18px var(--kg));transform:translateY(-2px)}

@media (min-width:821px){
  .kw-kit{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .kw-art{height:92px}
}

/* ---------- line-art parts ---------- */
.kw-b{fill:var(--kw-body)}
.kw-f{fill:currentColor;stroke:none}
.kw-t{fill:currentColor;fill-opacity:.16}
.kw-d{stroke-opacity:.5}
.kw-hl{stroke-width:4}
.kw-restore{stroke-width:1.4}
.kw-star{fill-opacity:.22}
.kw-spark{fill-opacity:.5}
.kw-arc{stroke-width:2.2}
.kw-a1{opacity:.95}.kw-a2{opacity:.7}.kw-a3{opacity:.45}

/* ---------- the wall (1024px and wider) ---------- */
@media (min-width:1024px){
  .kw-wall{aspect-ratio:1180/620;background-color:var(--ink-4);background-image:radial-gradient(38% 46% at 66% 22%,rgba(169,155,255,.06),transparent 70%),radial-gradient(34% 60% at 20% 55%,rgba(42,195,189,.06),transparent 70%),linear-gradient(rgba(42,195,189,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(42,195,189,.05) 1px,transparent 1px);background-size:auto,auto,40px 40px,40px 40px;background-position:0 0,0 0,-1px -1px,-1px -1px;border:1px solid rgba(42,195,189,.20);border-radius:var(--radius);box-shadow:inset 0 0 80px rgba(0,0,0,.45),0 0 60px -20px rgba(42,195,189,.25);overflow:hidden}
  .kw-scene,.kw-cables{display:block;position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
  .kw-scene{z-index:0;stroke:var(--kw-frame);stroke-width:1.5}
  .kw-cables{z-index:2}

  .kw-kit{display:block;position:absolute;inset:0}
  .kw-item{position:absolute;z-index:1}
  .kw-item:hover,.kw-item:focus-within{z-index:3}
  .kw-i-fw{left:8.475%;top:17.742%;width:25.424%}
  .kw-i-sw{left:8.475%;top:38.710%;width:25.424%}
  .kw-i-nas{left:8.475%;top:59.677%;width:25.424%}
  .kw-i-ap{left:59.322%;top:5.806%;width:16.949%}
  .kw-i-lap{left:51.695%;top:48.387%;width:25.424%}
  .kw-i-ph{left:80.508%;top:59.677%;width:12.712%}
  .kw-i-ai{left:81.356%;top:27.419%;width:11.864%}

  .kit-wall .kw-dev,.kit-wall .kw-dev:hover,.kw-i-ai .kw-dev{display:flex;flex-direction:column;align-items:center;gap:0;height:auto;padding:0;background:none;border:0;border-radius:10px;box-shadow:none;text-align:center;position:relative}
  .kw-art,.kw-i-ai .kw-art{height:auto;grid-row:auto}
  .kw-i-ai .kw-label{align-self:auto}
  .kw-label{margin-top:8px;padding:5px 12px 5px 10px;font-size:.9rem;white-space:nowrap;background:var(--ink-2);border:1px solid rgba(244,241,234,.14);border-radius:999px;transition:border-color .25s ease,box-shadow .25s ease}
  .kw-i-lap .kw-label,.kw-i-ph .kw-label{margin-top:18px}
  .kw-cap{position:absolute;top:100%;left:50%;margin-top:8px;padding:6px 12px;white-space:nowrap;font-size:.85rem;color:var(--on-dark);background:var(--ink-3);border:1px solid rgba(244,241,234,.12);border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.45);opacity:0;transform:translate(-50%,-4px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
  .kw-i-ph .kw-cap,.kw-i-ai .kw-cap{left:auto;right:0;transform:translateY(-4px)}
  .kit-wall .kw-dev:hover .kw-cap,.kit-wall .kw-dev:focus-visible .kw-cap{opacity:1;transform:translate(-50%,0)}
  .kw-i-ph .kw-dev:hover .kw-cap,.kw-i-ph .kw-dev:focus-visible .kw-cap,.kw-i-ai .kw-dev:hover .kw-cap,.kw-i-ai .kw-dev:focus-visible .kw-cap{transform:none}
  .kit-wall .kw-dev:hover .kw-label,.kit-wall .kw-dev:focus-visible .kw-label{border-color:var(--kc);box-shadow:0 0 16px -4px var(--kc)}
  .kit-wall .kw-dev:focus-visible{outline-offset:6px}

  /* wall drawing details */
  .kw-mark{stroke:rgba(42,195,189,.45)}
  .kw-dash{stroke-dasharray:6 8}
  .kw-dim{stroke:rgba(42,195,189,.40);stroke-width:1}
  .kw-inner{fill:rgba(255,255,255,.015);stroke-width:2}
  .kw-vent{stroke-dasharray:14 8;stroke-width:3;stroke-opacity:.7}
  .kw-holes{stroke:#272C35;stroke-width:5;stroke-dasharray:3 9}
  .kw-desk{fill:#15181E}

  /* cables: base line + travelling data pulse */
  .kw-c{stroke-width:2.5;transition:stroke-opacity .25s ease}
  .kw-c>path:first-child{stroke-opacity:.55}
  .kw-c-fw{stroke:var(--coral)}
  .kw-c-ap{stroke:var(--violet)}
  .kw-c-nas{stroke:var(--gold)}
  .kw-c-ph{stroke:var(--lime)}
  .kw-c-lap{stroke:var(--magenta)}
  .kw-pulse{stroke-width:3.5;stroke-dasharray:5 95;stroke-dashoffset:100;animation:kw-flow var(--t,4s) linear var(--d,0s) infinite;filter:drop-shadow(0 0 4px currentColor)}
  .kw-c-fw .kw-pulse{color:var(--coral)}.kw-c-ap .kw-pulse{color:var(--violet)}.kw-c-nas .kw-pulse{color:var(--gold)}.kw-c-ph .kw-pulse{color:var(--lime)}.kw-c-lap .kw-pulse{color:var(--magenta)}

  /* hovering a device lights its cable (the switch lights all of them) */
  .kw-wall:has(.kw-i-fw .kw-dev:hover,.kw-i-fw .kw-dev:focus-visible) .kw-c-fw>path:first-child,
  .kw-wall:has(.kw-i-ap .kw-dev:hover,.kw-i-ap .kw-dev:focus-visible) .kw-c-ap>path:first-child,
  .kw-wall:has(.kw-i-nas .kw-dev:hover,.kw-i-nas .kw-dev:focus-visible) .kw-c-nas>path:first-child,
  .kw-wall:has(.kw-i-ph .kw-dev:hover,.kw-i-ph .kw-dev:focus-visible) .kw-c-ph>path:first-child,
  .kw-wall:has(.kw-i-lap .kw-dev:hover,.kw-i-lap .kw-dev:focus-visible) .kw-c-lap>path:first-child,
  .kw-wall:has(.kw-i-sw .kw-dev:hover,.kw-i-sw .kw-dev:focus-visible) .kw-c>path:first-child{stroke-opacity:1}
}

/* ---------- motion (calm, all off for reduced motion) ---------- */
.kw-blink{animation:kw-blink 2.6s ease-in-out var(--d,0s) infinite}
.kw-chase{animation:kw-chase 2.4s linear var(--d,0s) infinite}
.kw-flick{animation:kw-flick var(--t,2.4s) steps(1,end) var(--d,0s) infinite}
.kw-ring{animation:kw-blink 1.2s ease-in-out infinite}
.kw-arc{animation:kw-arc 3s ease-in-out infinite}
.kw-a2{animation-delay:.4s}.kw-a3{animation-delay:.8s}
.kw-caret{animation:kw-caret 1.1s steps(1,end) infinite}
.kw-card{animation:kw-card 4.5s ease-in-out var(--d,0s) infinite}
.kw-spark{transform-box:fill-box;transform-origin:center;animation:kw-twinkle 3.2s ease-in-out infinite}
.kw-spark-2{animation-delay:1.4s}
.kw-wave{stroke-dasharray:60;animation:kw-wave 3s ease-in-out infinite}

@keyframes kw-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes kw-blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes kw-chase{0%,8%{opacity:1}14%,100%{opacity:.3}}
@keyframes kw-flick{0%{opacity:1}35%{opacity:.35}42%{opacity:1}64%{opacity:.4}70%{opacity:1}}
@keyframes kw-arc{0%,100%{stroke-opacity:.35}30%{stroke-opacity:1}}
@keyframes kw-caret{0%{opacity:1}50%{opacity:0}}
@keyframes kw-card{0%,100%{fill-opacity:.16}40%{fill-opacity:.4}}
@keyframes kw-twinkle{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.55}}
@keyframes kw-wave{0%{stroke-dashoffset:60}50%,100%{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .kit-wall *,.kit-wall *::before,.kit-wall *::after{animation:none!important;transition:none!important}
  .kw-pulse{display:none}
  .kit-wall .kw-dev:hover .kw-art,.kit-wall .kw-dev:focus-visible .kw-art{transform:none}
}