/* ==========================================================================
   NYNA: "Backlit"
   The page is one of NYNA's own boards. A light held behind it (your cursor,
   or on its own when you rest) makes it glow NYNA blue and shows the copper
   inside, with small charges running along the traces. Every colour is a
   material; blue is light.
   ========================================================================== */

/* Archivo in two fixed widths (normal and wide), so no browser has to vary the width itself */
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Wide"; src: url("assets/fonts/archivo-wide.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("assets/fonts/unbounded-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --wide: "Archivo Wide", "Archivo", system-ui, sans-serif;
  color-scheme: light;

  /* materials, white solder mask */
  --mask: #EEF1F2;
  --mask-deep: #DCE3E6;     /* mask over copper: traces read faintly through */
  --ghost: #E2E8EB;         /* the routing, seen through the mask without the light */
  --ghost-net: #C2CFD7;     /* the printed circuits' own copper, clear enough to follow */
  --pkg: #F7F9FA;           /* top of a raised part */
  --pkg-lit: #F2F9FC;
  --silk-deco: rgba(13, 17, 22, .5);
  --led-off: #C3CBD0;
  --led-on: #1DB3F0;        /* a printed circuit's LED, lit */
  --halo: rgba(255, 255, 255, .55);
  --silk: #0D1116;          /* silkscreen ink */
  --silk-hover: #28313A;
  --ink-2: #384249;
  --ink-3: #56626A;         /* still 5:1 on the mask */
  --rule: rgba(13, 17, 22, .14);
  --tint: rgba(13, 17, 22, .06);
  --hasl: #B3BABE;          /* tin pad finish */
  --lead: #979FA4;          /* IC legs */
  --bench: #1A222C;         /* what the board sits on */
  --edge: #C4CCD0;          /* the board's cut edge */
  --board-hi: rgba(255, 255, 255, .75);
  --btn-edge: #000;
  --wall: rgba(3, 9, 14, .3);
  /* an LED set into an ink-coloured key: unlit, lit, and its glow */
  --kled-off: rgba(255, 255, 255, .24);
  --kled-on: #D8F4FF;
  --kled-glow: 0 0 0 1px rgba(12, 143, 203, .45), 0 0 5px 1px rgba(94, 207, 249, .8), 0 0 12px 3px rgba(94, 207, 249, .3);
  --mark: brightness(0);    /* client marks printed in silkscreen ink */
  --sheen: rgba(255, 255, 255, .42);

  /* NYNA blue */
  --glow: #5ECFF9;
  --accent: #0C8FCB;
  --focus: rgba(94, 207, 249, .55);

  --field: rgba(255, 255, 255, .55);
  --field-on: rgba(255, 255, 255, .92);
  --field-line: var(--silk);
  --glass: rgba(240, 243, 244, .68);
  --glass-strong: rgba(240, 243, 244, .78);
  --glass-rule: rgba(13, 17, 22, .1);
  --glass-hi: rgba(255, 255, 255, .7);
  --err: #A3261C;
  --shade: 6, 20, 32;       /* rgb of cast shadows */

  /* where the light is: main.js writes these onto the few things you can see it through */
  --lx: -9999; --ly: -9999; --li: 0; --lr: 300;

  /* honeycomb fallback until main.js sizes a whole-hex mask */
  --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='45' viewBox='0 0 26 45'%3E%3Cpath d='M23.392 6 13 12 2.608 6V-6L13-12l10.392 6ZM23.392 51 13 57 2.608 51V39L13 33l10.392 6ZM10.392 28.5 0 34.5l-10.392-6v-12L0 10.5l10.392 6ZM36.392 28.5 26 34.5l-10.392-6v-12L26 10.5l10.392 6Z'/%3E%3C/svg%3E");

  /* space */
  --gap: clamp(8px, 1.3vw, 18px);          /* board to viewport edge */
  --pad: clamp(20px, 5.2vw, 78px);         /* board edge to content */
  --r-board: clamp(14px, 1.7vw, 24px);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 1840px) { :root { --pad: calc((100vw - 1680px) / 2); } }

/* black solder mask, white silkscreen */
:root[data-theme="dark"] {
  color-scheme: dark;
  --mask: #13181E;
  --mask-deep: #1E252D;
  --ghost: #1A2028;
  --ghost-net: #2B3744;
  --pkg: #1A2129;
  --pkg-lit: #1B2631;
  --silk-deco: rgba(242, 242, 242, .44);
  --led-off: #2E3843;
  --led-on: #C6F1FF;
  --halo: rgba(0, 0, 0, .45);
  --silk: #F2F2F2;
  --silk-hover: #FFFFFF;
  --ink-2: #B4BDC5;
  --ink-3: #8D98A2;
  --rule: rgba(242, 242, 242, .13);
  --tint: rgba(242, 242, 242, .07);
  --hasl: #7D868D;
  --lead: #5B656C;
  --bench: #07090C;
  --edge: #28313A;
  --board-hi: rgba(255, 255, 255, .06);
  --btn-edge: #A7B0B7;
  --wall: rgba(0, 0, 0, .42);
  --kled-off: rgba(13, 17, 22, .2);
  --kled-on: #0E9BDD;
  --kled-glow: 0 0 0 1px rgba(12, 143, 203, .3), 0 0 6px 1px rgba(14, 155, 221, .45);
  --mark: brightness(0) invert(.94);
  --sheen: rgba(255, 255, 255, .1);
  --accent: #5ECFF9;
  --field: rgba(255, 255, 255, .035);
  --field-on: rgba(255, 255, 255, .075);
  --field-line: rgba(242, 242, 242, .55);
  --glass: rgba(20, 25, 31, .62);
  --glass-strong: rgba(22, 27, 33, .74);
  --glass-rule: rgba(242, 242, 242, .1);
  --glass-hi: rgba(255, 255, 255, .06);
  --err: #FF8F85;
  --shade: 0, 0, 0;
}

/* The light, declared only on the things that show it and written onto them by main.js.
   (Writing it onto the page root would restyle every element on the page every frame.) */
.brand-v, .perf, .window, .model-stage {
  --light:
    radial-gradient(circle calc(var(--lr) * 1px) at calc(var(--lx) * 1px) calc(var(--ly) * 1px),
      rgba(226, 246, 254, calc(var(--li) * .6)) 0%,
      rgba(164, 229, 252, calc(var(--li) * .52)) 18%,
      rgba(94, 207, 249, calc(var(--li) * .4)) 42%,
      rgba(12, 143, 203, calc(var(--li) * .16)) 72%,
      rgba(12, 143, 203, 0) 100%);
  --hole-bg: var(--light), var(--bench);
  --wall-bg: linear-gradient(var(--wall), var(--wall)), var(--light), var(--bench);
}
/* Only without WebGL do the big holes need the light pinned to the screen; with it, they're
   cut through the board. (Screen-pinned backgrounds make every scroll repaint the page.) */
:is(.perf, .window, .model-stage) {
  --light:
    radial-gradient(circle calc(var(--lr) * 1px) at calc(var(--lx) * 1px) calc(var(--ly) * 1px),
      rgba(226, 246, 254, calc(var(--li) * .6)) 0%,
      rgba(164, 229, 252, calc(var(--li) * .52)) 18%,
      rgba(94, 207, 249, calc(var(--li) * .4)) 42%,
      rgba(12, 143, 203, calc(var(--li) * .16)) 72%,
      rgba(12, 143, 203, 0) 100%) fixed;
}
.no-fixed-bg :is(.perf, .window, .model-stage) { --light: linear-gradient(transparent, transparent); }
/* small plated holes glow as a whole, by how close the light is (main.js writes --hl) */
.mhole, .tp-pad, .pin-pad, .tab {
  --hole-bg:
    radial-gradient(circle at 50% 42%, rgba(226, 246, 254, calc(var(--hl, 0) * .7)), rgba(94, 207, 249, calc(var(--hl, 0) * .55)) 55%, rgba(12, 143, 203, calc(var(--hl, 0) * .3))),
    var(--bench);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--bench);
  color: var(--silk);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--glow); color: #0D1116; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--silk); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  padding: 12px 16px; border-radius: 6px;
  background: var(--silk); color: var(--mask); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 16px; }

/* ---------------------------------------------------------------- the board */

.board {
  position: relative;
  margin: var(--gap);
  border-radius: var(--r-board);
  background: var(--mask);
  overflow: clip;
  isolation: isolate;
  /* a lit top edge, the 1.6 mm cut edge, then the board's shadow on the bench */
  box-shadow:
    inset 0 1px 0 var(--board-hi),
    0 0 0 1px var(--edge),
    0 2px 0 1px var(--edge),
    0 30px 60px -24px rgba(0, 0, 0, .5);
}

.tiles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* once main.js draws the surface (with the honeycomb and the work window cut right through),
   the board itself is transparent and the moving bench shows through the holes */
.has-surface .board { background: transparent; }
.surface { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.surface .s-fill { fill: var(--mask); fill-rule: evenodd; }
.surface .s-wall { fill: rgba(var(--shade), .34); fill-rule: evenodd; }
.bench { position: fixed; left: 0; top: 0; z-index: -1; display: block; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; }
.tiles canvas { position: absolute; left: 0; display: block; }

/* the silkscreen: parts, pads, references and honeycomb frames, printed over the light */
.silk { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.silk .k-silk { fill: none; stroke: var(--silk-deco); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.silk .k-pad { fill: var(--hasl); }
.silk .k-drill { fill: var(--bench); }
.silk .k-ref { fill: var(--silk-deco); font-family: var(--wide); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; }
.silk .k-body { fill: var(--pkg); stroke: var(--silk-deco); stroke-width: 1; }
.silk .k-shadow { fill: rgba(var(--shade), .12); }
.silk .k-lead { fill: var(--lead); }
.silk .k-dot { fill: var(--silk-deco); }
.silk .k-icref, .silk .k-mark { text-anchor: middle; dominant-baseline: central; font-family: var(--wide); }
.silk .k-net { fill: var(--ink-3); font-family: var(--wide); font-size: 7.5px; font-weight: 600; letter-spacing: .14em; }
.silk .k-vip { fill: var(--bench); }
.silk .k-icref { fill: var(--silk); font-size: 7.4px; font-weight: 600; letter-spacing: .1em; }
.silk .k-mark { fill: var(--ink-3); font-size: 5.4px; font-weight: 500; letter-spacing: .08em; }
/* each circuit is named, as the blocks on a real board are */
.silk .k-title { fill: var(--ink-2); font-family: var(--wide); font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.silk .k-fibre { fill: none; stroke: var(--silk-deco); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
/* anything that lights: a dull lens, and over it the lit lens and its glow, switched by main.js as the circuit runs */
.silk .k-lens { fill: var(--led-off); }
.silk .k-led { opacity: 0; transition: opacity .1s linear; }
.silk .k-led.is-on { opacity: 1; }
.silk .k-lit { fill: var(--led-on); }
.silk .k-halo { fill: url(#led-halo); }
/* an antenna is bare copper, and while it is sending the waves leave it */
.silk .k-cu { fill: none; stroke: var(--hasl); stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.silk .k-wave { fill: none; stroke: var(--led-on); stroke-width: 1.3; stroke-linecap: round; }

/* the routing, faintly visible through the mask everywhere, even without the light */
.ghost { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ghost path, .ghost rect { fill: none; stroke: var(--ghost); stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.ghost .g-thin, .ghost .g-via { stroke-width: 1.2; }
.ghost .g-wide, .ghost .g-ring { stroke-width: 2.4; }
.ghost .g-net-thin, .ghost .g-net-wide { stroke: var(--ghost-net); }
.ghost .g-net-thin { stroke-width: 1.2; }
.ghost .g-net-wide { stroke-width: 2.4; }

.nav, main, .foot { position: relative; z-index: 1; }

/* plated mounting holes, with a soft sliver of bore wall */
.mhole {
  position: absolute; z-index: 2;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--hole-bg);
  box-shadow: inset 0 2px 3px -1px var(--wall), 0 0 0 6px var(--hasl), 0 0 0 7px var(--rule);
}
.mhole--tl { top: 20px; left: 20px; }
.mhole--tr { top: 20px; right: 20px; }
.mhole--bl { bottom: 20px; left: 20px; }
.mhole--br { bottom: 20px; right: 20px; }

/* honeycomb perforation, cut through the board like NYNA's real boards.
   The element is the front opening; ::before is the soft-edged back opening,
   nudged toward the middle of the screen by main.js, so a little of the bore
   wall shows on the far side and shifts as you scroll. */
.perf {
  position: relative;
  background: var(--wall-bg);
  -webkit-mask: var(--hexmask, var(--hex)) 0 0 / var(--mw, 26px) var(--mh, 45px) var(--mrep, repeat);
          mask: var(--hexmask, var(--hex)) 0 0 / var(--mw, 26px) var(--mh, 45px) var(--mrep, repeat);
}
.has-surface .perf { background: none; -webkit-mask: none; mask: none; }
.has-surface .perf::before { content: none; }
.perf::before {
  content: ""; position: absolute; inset: 0;
  background: var(--hole-bg);
  -webkit-mask: var(--hexback, var(--hexmask, var(--hex))) var(--bx, 0px) var(--by, 0px) / var(--bw, 26px) var(--bh, 45px) var(--mrep, repeat);
          mask: var(--hexback, var(--hexmask, var(--hex))) var(--bx, 0px) var(--by, 0px) / var(--bw, 26px) var(--bh, 45px) var(--mrep, repeat);
}

/* fab text printed near the board edge */
.fab {
  margin: 0;
  font-size: .68rem; font-weight: 600; font-family: var(--wide);
  letter-spacing: .08em; color: var(--ink-3);
}

/* a surface-mount LED, powered */
.led {
  position: relative; flex: none; display: inline-block;
  width: 9px; height: 5px; border-radius: 1.5px;
  background: #D8F4FF;
  box-shadow: 0 0 0 1px rgba(12, 143, 203, .45), 0 0 5px 1px rgba(94, 207, 249, .75), 0 0 12px 3px rgba(94, 207, 249, .22);
}

/* ---------------------------------------------------------------- type */

.h2 {
  margin: 0;
  font-family: var(--wide);
  font-weight: 570;
  font-size: clamp(1.9rem, 1.15rem + 2.45vw, 3.35rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.sec-head { display: grid; gap: 18px; max-width: 60rem; }
.sec-lead { margin: 0; max-width: 42ch; font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem); line-height: 1.5; color: var(--ink-2); }

/* ---------------------------------------------------------------- controls */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px;
  border: 0; border-radius: 6px;
  font: inherit; font-size: 1rem; font-weight: 600; font-family: var(--wide); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .16s var(--ease-out), background-color .2s var(--ease-out), box-shadow .16s var(--ease-out);
}
/* a key cap: lit top edge, a darker skirt, a soft shadow; it travels down when pressed */
.btn--solid {
  background: var(--silk); color: var(--mask);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 0 var(--btn-edge), 0 12px 22px -12px rgba(var(--shade), .6);
}
.btn--solid::before, .float-btn--solid::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(94, 207, 249, .26) 50%, transparent 68%) no-repeat;
  background-size: 260% 100%; background-position: 140% 0;
}
.btn--solid:hover {
  background: var(--silk-hover); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 3px 0 var(--btn-edge), 0 0 0 3px rgba(94, 207, 249, .1), 0 16px 26px -14px rgba(var(--shade), .5);
}
.btn--solid:hover::before, .float-btn--solid:hover::before { background-position: -40% 0; transition: background-position .85s var(--ease-out); }
.btn--solid:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 var(--btn-edge), 0 5px 12px -8px rgba(var(--shade), .5);
  transition-duration: .08s;
}
.btn--line { background: transparent; color: var(--silk); box-shadow: inset 0 0 0 1.5px var(--silk); isolation: isolate; overflow: hidden; transition: transform .16s var(--ease-out), color .3s var(--ease-out), box-shadow .16s var(--ease-out); }
/* ink wipes in from the left and back out to the right */
.btn--line::before, .menu-open::before, .float-btn:not(.float-btn--solid)::before, .arrow::before, .viewer-tabs button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--silk); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.viewer-tabs button::before { background: var(--tint); }
.btn--line:hover, .menu-open:hover, .float-btn:not(.float-btn--solid):hover, .arrow:not(:disabled):hover { color: var(--mask); }
:is(.btn--line, .menu-open, .float-btn, .arrow:not(:disabled), .viewer-tabs button):hover::before { transform: scaleX(1); transform-origin: left; }
.btn--line:active { transform: translateY(1px) scale(.98); transition-duration: .08s; }
.btn:focus-visible { outline: 2px solid var(--silk); outline-offset: 3px; }
.btn--solid:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 0 var(--btn-edge), 0 0 0 8px var(--focus); }
.btn--line:focus-visible { box-shadow: inset 0 0 0 1.5px var(--silk), 0 0 0 7px var(--focus); }

/* a blue ring that calls for attention once the page has been left alone */
.hero-ctas .btn--solid::after, .float-btn--solid::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
}

/* settings rows in the menu: a label, its state, and an indicator LED */
.set {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px;
  background: none; font: inherit; font-size: 1rem; font-weight: 500; color: var(--silk);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .15s;
}
.set:hover { background: var(--tint); }
.set:focus-visible { outline: 2px solid var(--silk); outline-offset: -2px; }
.set-state {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--wide); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.set[aria-checked="true"] .set-off, .set[aria-checked="false"] .set-on { display: none; }
.set[aria-checked="true"] .set-state { color: var(--silk); }
/* an unlit LED */
.set[aria-checked="false"] .led, .pwr[aria-pressed="false"] .led {
  background: var(--led-off); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); animation: none;
}

/* dark mode: a half-filled disc that turns over */
.mode {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--silk); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .2s var(--ease-out), transform .14s var(--ease-out);
}
.mode:hover { background: var(--tint); }
.mode:hover .mode-half { transform: rotate(-24deg); }
[data-theme="dark"] .mode:hover .mode-half { transform: rotate(156deg); }
.mode:active { transform: scale(.9); }
.mode svg { width: 22px; height: 22px; }
.mode-ring { fill: none; stroke: currentColor; stroke-width: 1.6; }
.mode-half { fill: currentColor; transform-origin: 12px 12px; transition: transform .55s var(--ease-out); }
[data-theme="dark"] .mode-half { transform: rotate(180deg); }

.menu-open {
  position: relative; isolation: isolate; overflow: hidden;
  display: none; align-items: center; min-height: 42px; padding: 0 16px;
  border: 0; border-radius: 8px; background: none; box-shadow: inset 0 0 0 1.5px var(--silk);
  font: inherit; font-size: .92rem; font-weight: 600; font-family: var(--wide); color: var(--silk); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .12s var(--ease-out), background-color .2s, color .3s var(--ease-out);
}
.menu-open:active { transform: scale(.95); }
.menu-open[aria-expanded="true"] { background: var(--silk); color: var(--mask); }

/* ---------------------------------------------------------------- nav */

.nav {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding: clamp(18px, 2.4vw, 30px) var(--pad);
}
@media (min-width: 901px) { .nav { padding-inline: max(var(--pad), 68px); } }
.logo {
  font-family: "Unbounded", system-ui, sans-serif; font-weight: 500;
  font-size: 1.5rem; letter-spacing: .06em; line-height: 1;
  color: var(--silk); text-decoration: none;
}
/* trim the text boxes to the capitals so everything in the bar centres optically */
.logo, .float-logo, .pwr-label { text-box: trim-both cap alphabetic; }
.pwr-label { line-height: 1; margin-right: -.16em; }   /* no trailing letter-space inside the pill */
/* the board's power LED, next to the name: it is also the backlight switch */
.pwr {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 0 calc(2px - clamp(16px, 3vw, 40px)); padding: 8px 10px; border: 0; border-radius: 999px;
  background: none; font: inherit; font-family: var(--wide); font-size: .56rem; font-weight: 700; letter-spacing: .16em;
  color: var(--ink-3); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.pwr:hover { background: var(--tint); color: var(--silk); }
.pwr:active .led { transform: scale(.85); }
.pwr:focus-visible { outline: 2px solid var(--silk); outline-offset: 1px; }
.nav-links { display: flex; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
.nav-links a { position: relative; padding: 6px 0; font-size: .98rem; font-weight: 500; text-decoration: none; }
/* the underline is drawn in, then drawn out the far side */
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.pop-foot a:hover {
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .32em;
}
.nav-tools { display: flex; align-items: center; gap: clamp(8px, 1.2vw, 16px); }

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: clamp(16px, 2vw, 30px);
  min-height: calc(100svh - 2 * var(--gap) - 86px);
  padding: clamp(28px, 5vw, 80px) var(--pad) clamp(52px, 6vw, 88px);
}
.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0; padding-right: clamp(0px, 3vw, 48px); padding-bottom: clamp(0px, 4vh, 48px);
}
.hero-h {
  margin: 0;
  font-family: var(--wide);
  font-weight: 570;
  font-size: clamp(2.35rem, 1.1rem + 5.6vw, 6.7rem);
  line-height: .95;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.hero-h .w { display: inline-block; }
.hero-foot {
  display: grid; grid-template-columns: minmax(0, 36rem);
  gap: 22px clamp(24px, 4vw, 56px); align-items: end;
  margin-top: clamp(30px, 4vw, 54px);
}
@media (min-width: 1400px) { .hero-foot { grid-template-columns: minmax(0, 34rem) auto; } }
.lead { margin: 0; font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); line-height: 1.5; color: var(--ink-2); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hint {
  grid-column: 1 / -1; margin: 4px 0 0;
  font-size: .86rem; color: var(--ink-3);
  transition: opacity .7s var(--ease-out);
}
.hint.is-done { opacity: 0; }
.flow .hint { display: none; }

/* vertical branding, set the way it is printed on NYNA's boards */
/* the tag and the name are one lockup: the tag runs the full length of the letters beside it */
.brand-lock { align-self: center; display: flex; align-items: stretch; gap: clamp(10px, 1.1vw, 16px); }
.tag-v {
  margin: 0;
  writing-mode: vertical-rl;
  font-size: clamp(.68rem, .3rem + .62vw, .98rem); font-weight: 600; font-family: var(--wide);
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  text-align: justify; text-align-last: justify;
  color: var(--ink-3);
}
/* outlined letters, and the light shows through them like it does through the holes */
.brand-v {
  align-self: start;
  margin: 0;
  writing-mode: vertical-rl;
  font-family: "Unbounded", system-ui, sans-serif; font-weight: 500;
  font-size: clamp(3.8rem, 1.2rem + 6.2vw, 9.2rem);
  line-height: .9; letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--silk);
  background: var(--light);
  -webkit-background-clip: text; background-clip: text;
  user-select: none;
}
.perf { --hex: s; }
.perf--hero { --hex: l; width: clamp(124px, 13.4vw, 214px); margin-block: 4px; }

/* the headline comes into focus as the light warms up */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-h .w { opacity: 0; filter: blur(14px); }
  .js.is-ready .hero-h .w { animation: word-in 1s var(--ease-out) calc(var(--i) * 60ms) both; }
}
@keyframes word-in {
  from { opacity: 0; filter: blur(14px); }
  to { opacity: 1; filter: none; }
}
/* a case study's title resolves the same way */
.case-h .w { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .case-h .w { opacity: 0; filter: blur(14px); }
  .js.is-ready .case-h .w { animation: word-in 1s var(--ease-out) calc(var(--i) * 60ms) both; }
}

/* ---------------------------------------------------------------- services as chips */

.services { --pt: clamp(90px, 10vw, 150px); padding: var(--pt) var(--pad) 0; }
.has-side { position: relative; --side: clamp(124px, 10.6vw, 172px); }
.has-side .sec-head { max-width: min(60rem, calc(100% - var(--side) - 64px)); }
.perf--side { --hex: m; position: absolute; top: var(--side-top, calc(var(--pt) * .45)); right: var(--pad); width: var(--side); height: var(--side-h, 340px); }
.case-sec .perf--side { right: 0; }   /* a case section is already inside the page margin */
.perf--note { width: 100%; height: 106px; margin-top: clamp(40px, 4vw, 56px); }
@media (max-width: 1099px) {
  .perf--side { display: none; }
  .has-side .sec-head { max-width: 60rem; }
}
.chips { display: grid; gap: clamp(76px, 7vw, 108px); margin-top: clamp(70px, 6.5vw, 96px); }

.chip {
  --pl: clamp(36px, 3.8vw, 56px);
  --pr: clamp(24px, 3vw, 44px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 14px clamp(24px, 3.4vw, 54px);
  align-items: start;
  padding: clamp(30px, 3vw, 40px) var(--pr) clamp(30px, 3vw, 40px) var(--pl);
}
/* the package: a raised body with the pin-1 notch cut out of its left edge */
.chip-outline {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: 1.5px solid var(--silk); border-radius: 6px;
  background: var(--pkg);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 12px, #000 12.6px);
          mask: radial-gradient(circle at 0 50%, transparent 12px, #000 12.6px);
}
.chip-notch {
  position: absolute; left: -12px; top: 50%; z-index: -1; pointer-events: none;
  width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;
  border: 1.5px solid var(--silk);
  clip-path: inset(0 0 0 50%);
}
/* the part casts a soft shadow on the board */
.chip::before {
  content: ""; position: absolute; inset: 3px 2px; z-index: -2; pointer-events: none;
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(var(--shade), .08), 0 16px 32px -18px rgba(var(--shade), .38);
  transition: box-shadow .45s var(--ease-out), transform .45s var(--ease-out);
}
/* gull-wing legs from the body onto the pads, 24px pitch */
.chip-leads::before, .chip-leads::after,
.chip::after {
  content: ""; position: absolute; left: var(--pl); right: var(--pr); pointer-events: none;
}
.chip-leads { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.chip-leads::before, .chip-leads::after {
  height: 10px;
  background: repeating-linear-gradient(90deg, transparent 0 2px, var(--lead) 2px 7px, transparent 7px 24px);
}
.chip-leads::before { top: -10px; }
.chip-leads::after { bottom: -10px; }
/* SMD pads along both long edges; main.js fans traces out of these */
.chip::after {
  top: -18px; bottom: -18px; z-index: -3;
  background:
    repeating-linear-gradient(90deg, var(--hasl) 0 9px, transparent 9px 24px) 0 0 / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--hasl) 0 9px, transparent 9px 24px) 0 100% / 100% 12px no-repeat;
}
.chip-ref {
  position: absolute; top: 10px; left: 16px;
  font-size: .66rem; font-weight: 600; font-family: var(--wide); letter-spacing: .08em;
  color: var(--ink-3);
}
/* hover a part: its outline lights up and what it does comes into focus. Nothing moves.
   Touch screens have no hover, so they always show the details (so do narrow windows). */
.chip { cursor: default; }
.chip-outline { transition: border-color .35s var(--ease-out), background-color .35s var(--ease-out); }
.chip:is(:hover, :focus-visible) .chip-outline { border-color: var(--accent); background-color: var(--pkg-lit); }
.chip:is(:hover, :focus-visible)::before { box-shadow: 0 1px 1px rgba(var(--shade), .08), 0 0 0 1px rgba(94, 207, 249, .12), 0 16px 34px -20px rgba(12, 143, 203, .26); }
.chip:focus-visible { outline: none; }
.chip-name { align-self: center; }
/* only in the three-column layout: when the boxes stack, hiding the text would just leave empty boxes */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .chip .chip-desc { opacity: 0; filter: blur(8px); transition: opacity .3s var(--ease-out), filter .3s var(--ease-out); }
  .chip .chip-inc li::before { opacity: 0; }
  .chip:is(:hover, :focus-visible) .chip-inc li::before { opacity: 1; }
  .chip .chip-inc li > span { display: inline-block; opacity: 0; filter: blur(6px); transform: translateX(-4px); transition: opacity .25s var(--ease-out), filter .25s var(--ease-out), transform .25s var(--ease-out); }
  .chip:is(:hover, :focus-visible) .chip-desc { opacity: 1; filter: none; transition: opacity .6s var(--ease-out) .06s, filter .7s var(--ease-out) .06s; }
  .chip:is(:hover, :focus-visible) .chip-inc li > span {
    opacity: 1; filter: none; transform: none;
    transition: opacity .55s var(--ease-out), filter .6s var(--ease-out), transform .6s var(--ease-out);
    transition-delay: calc(.16s + var(--n, 0) * 80ms);
  }
}

.chip-name {
  margin: 0;
  font-family: var(--wide); font-weight: 570;
  font-size: clamp(1.4rem, .95rem + 1.25vw, 2.15rem);
  line-height: 1.04; letter-spacing: -.03em;
  text-wrap: balance;
}
.chip-desc { margin: 0; max-width: 34ch; }
.chip-inc { margin: 0; padding: 0; list-style: none; font-size: .94rem; line-height: 1.75; color: var(--ink-2); }
/* bullets are the board's surface-mount LEDs: dark until you point at their line
   (on touch screens, the line in the middle of the screen lights up instead) */
.chip-inc li, .bom li { position: relative; padding-left: 21px; transition: color .25s var(--ease-out); }
.chip-inc li::before, .bom li::before {
  content: ""; position: absolute; left: 0; top: .875em;
  width: 9px; height: 5px; margin-top: -2.5px; border-radius: 1.5px;
}
.chip-inc li::before, .bom li::before, .feat::before, .leds li::before {
  background: var(--led-off); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
  transition: background-color .5s var(--ease-out), box-shadow .5s var(--ease-out), opacity .35s var(--ease-out);
}
:is(.chip-inc li, .bom li, .feat, .leds li):is(:hover, .is-lit)::before {
  background: #D8F4FF;
  box-shadow: 0 0 0 1px rgba(12, 143, 203, .45), 0 0 4px 1px rgba(94, 207, 249, .7), 0 0 10px 2px rgba(94, 207, 249, .2);
  transition-duration: .12s;
}
.chip-inc li:hover { color: var(--silk); }
.bom li::before { top: calc(12px + .7em); }
.chip-inc li:nth-child(2) { --n: 1; }
.chip-inc li:nth-child(3) { --n: 2; }
.chip-inc li:nth-child(4) { --n: 3; }

/* ---------------------------------------------------------------- hardware */

.hardware {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 90px); align-items: center;
  padding: clamp(120px, 13vw, 190px) var(--pad) 0;
}
.hw-copy .sec-lead { margin-top: 18px; }
.perf--divider { display: none; }
@media (min-width: 1100px) {
  .hardware { grid-template-columns: minmax(0, 5fr) auto minmax(0, 7fr); column-gap: clamp(30px, 3.2vw, 58px); }
  .perf--divider { display: block; align-self: stretch; width: clamp(68px, 5.4vw, 92px); }
  :is(.hardware, .contact) .perf--note { display: none; }
}
.feats { display: grid; gap: 22px; margin: clamp(30px, 3vw, 44px) 0 0; }
.feat { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; }
.feat:nth-child(2) { --n: 1; }
.feat:nth-child(3) { --n: 2; }
/* an LED beside each point */
.feat::before {
  content: ""; grid-row: 1 / 3;
  width: 9px; height: 5px; margin: 11px 6px 0; border-radius: 1.5px;
}
.feat dt { font-weight: 600; font-family: var(--wide); font-size: 1.08rem; }
.feat dd { margin: 4px 0 0; max-width: 44ch; color: var(--ink-2); }

.viewer { display: grid; gap: 24px; min-width: 0; margin: 0; }
.viewer-stage { position: relative; aspect-ratio: 5 / 4; min-height: 0; perspective: 1100px; }
/* PCB1: the board shown sits in a placement courtyard, named in silkscreen */
.viewer-stage::after {
  content: ""; position: absolute; inset: -12px; pointer-events: none;
  --c: linear-gradient(var(--silk-deco), var(--silk-deco));
  background:
    var(--c) 0 0 / 18px 1px no-repeat, var(--c) 0 0 / 1px 18px no-repeat,
    var(--c) 100% 0 / 18px 1px no-repeat, var(--c) 100% 0 / 1px 18px no-repeat,
    var(--c) 0 100% / 18px 1px no-repeat, var(--c) 0 100% / 1px 18px no-repeat,
    var(--c) 100% 100% / 18px 1px no-repeat, var(--c) 100% 100% / 1px 18px no-repeat;
}
.viewer-ref {
  position: absolute; left: -12px; top: -32px; z-index: 1;
  font-family: var(--wide); font-size: .6rem; font-weight: 600; letter-spacing: .14em; color: var(--silk-deco);
}
.viewer-ref b { margin-left: 6px; font-weight: 600; color: var(--silk); }
/* the board tips toward your cursor and floats a little above the page */
.viewer-tilt {
  position: absolute; inset: 0;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .8s var(--ease-out);
}
.viewer-float { position: absolute; inset: 0; }
.viewer-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  user-select: none; -webkit-user-drag: none;
  /* the shadow follows the board's outline */
  filter: blur(0) drop-shadow(0 26px 22px rgba(var(--shade), .26)) drop-shadow(0 3px 3px rgba(var(--shade), .18));
  transition: opacity .32s var(--ease-out), filter .32s var(--ease-out), transform .5s var(--ease-out);
}
.viewer-img.is-out {
  opacity: 0; transform: scale(.975);
  filter: blur(12px) drop-shadow(0 26px 22px rgba(var(--shade), 0)) drop-shadow(0 3px 3px rgba(var(--shade), 0));
  transition-duration: .2s;
}
@media (prefers-reduced-motion: no-preference) {
  .viewer-float { animation: board-float 7s ease-in-out infinite; }
}
@keyframes board-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(.35deg); }
}
.viewer-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.viewer-tabs button {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 42px; padding: 0 16px;
  border: 0; border-radius: 6px; background: none;
  box-shadow: inset 0 0 0 1.5px var(--rule);
  font: inherit; font-size: .9rem; font-weight: 550; font-family: var(--wide); color: var(--ink-2);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .2s var(--ease-out), color .2s, box-shadow .2s, transform .12s var(--ease-out);
}
.viewer-tabs button:hover { color: var(--silk); box-shadow: inset 0 0 0 1.5px var(--silk); }
.viewer-tabs button:active { transform: scale(.96); }
.viewer-tabs button[aria-pressed="true"] { background: var(--silk); color: var(--mask); box-shadow: none; }

/* ---------------------------------------------------------------- work: a production panel */

.work { padding-top: clamp(120px, 12vw, 180px); }
.work-head { display: grid; gap: 14px; padding: 0 var(--pad); }
.work-head .h2 { max-width: 16em; }
.work-note { margin: 0; max-width: 46ch; color: var(--ink-2); }
/* under the window: how far along the panel you are, which boards are in view, and the arrows */
.panel-foot { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 28px); margin-top: clamp(18px, 2vw, 26px); padding: 0 var(--pad); }
.panel-pos { position: relative; flex: 1; height: 14px; }
.panel-pos::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px;
  background: var(--rule);
}
.panel-thumb {
  position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px;
  width: calc(var(--pw, .3) * 100%); background: var(--silk);
  transform: translateX(calc(var(--pp, 0) * (100% / var(--pw, .3) - 100%)));
}
.panel-count {
  margin: 0; min-width: 6.2em; text-align: right; white-space: nowrap;
  font-family: var(--wide); font-size: .72rem; font-weight: 600; letter-spacing: .1em; font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.panel-count span { color: var(--silk); }
.panel-ctrl { display: flex; gap: 10px; }
.arrow {
  display: grid; place-items: center;
  width: 50px; height: 50px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--silk); box-shadow: inset 0 0 0 1.5px var(--silk);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .14s var(--ease-out), background-color .2s var(--ease-out), opacity .2s;
}
.arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.arrow { position: relative; isolation: isolate; overflow: hidden; }
.arrow svg { transition: transform .35s var(--ease-out); }
.arrow[data-panel-next]:not(:disabled):hover svg { transform: translateX(3px); }
.arrow[data-panel-prev]:not(:disabled):hover svg { transform: translateX(-3px); }
.arrow:active { transform: scale(.93); }
.arrow:disabled { opacity: .3; cursor: default; }
.arrow:disabled:active { transform: none; }

/* the window routed out of the main board. A soft bore wall shows on the far side
   (main.js moves it with scroll). The boards slide beneath its edges, into the shadow
   the main board casts on them, wherever there are more hidden past that edge. */
.window {
  position: relative;
  margin: clamp(30px, 4vw, 50px) max(clamp(10px, 1.6vw, 22px), calc(var(--pad) - 64px)) 0;
  border-radius: clamp(12px, 1.4vw, 18px);
  background: var(--hole-bg);
  overflow: hidden;
  box-shadow: inset 0 3px 10px -4px var(--wall), inset 0 0 0 1px var(--wall), inset 0 14px 26px -22px rgba(0, 0, 0, .4);
}
.has-surface .window, .has-surface [data-hole] { background: none; }
.window-edge {
  position: absolute; top: 0; bottom: 0; z-index: 2;
  width: clamp(28px, 4.4vw, 68px);
  pointer-events: none;
  transition: opacity .3s var(--ease-out);
}
.window-edge--l { left: 0; opacity: var(--bl, 0); background: linear-gradient(90deg, rgba(4, 8, 12, .5), rgba(4, 8, 12, 0)); }
.window-edge--r { right: 0; opacity: var(--br, 1); background: linear-gradient(270deg, rgba(4, 8, 12, .5), rgba(4, 8, 12, 0)); }

.panel {
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--rail-pad);
  padding-block: clamp(26px, 3vw, 42px);
  cursor: grab;
  --rail-pad: clamp(18px, 2.4vw, 36px);
  --tabw: clamp(26px, 2.6vw, 36px);
}
.panel::-webkit-scrollbar { display: none; }
.panel:focus-visible { outline: 2px solid var(--glow); outline-offset: -4px; border-radius: 12px; }
.panel.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

.track { width: max-content; padding: 0 var(--rail-pad); }

/* a strip of boards, each floating over the bench and tied to the next by a break-off tab */
.boards { display: flex; align-items: stretch; gap: var(--tabw); margin: 0; padding: 0; list-style: none; }
.pcb { position: relative; flex: none; width: clamp(272px, 25.5vw, 356px); scroll-snap-align: start; }
/* mouse-bite tab to the next board, perforated at both break lines */
.tab {
  position: absolute; top: 50%; right: calc(-1 * var(--tabw));
  width: var(--tabw); height: 24px; margin-top: -12px;
  background: var(--mask);
}
.pcb:last-child .tab { display: none; }
.tab::before, .tab::after {
  content: ""; position: absolute; top: 3px; bottom: 3px; width: 6px;
  background: var(--hole-bg);
  -webkit-mask: radial-gradient(circle, #000 1.7px, transparent 2.2px) 50% 0 / 6px 6px repeat-y;
          mask: radial-gradient(circle, #000 1.7px, transparent 2.2px) 50% 0 / 6px 6px repeat-y;
}
.tab::before { left: 1px; }
.tab::after { right: 1px; }

.pcb-link {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%; padding: 12px 12px 18px;
  border-radius: 12px; background: var(--mask);
  box-shadow: inset 0 1px 0 var(--board-hi), 0 16px 26px -14px rgba(0, 0, 0, .5);
  color: var(--silk); text-decoration: none;
  -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;
  transition: transform .14s var(--ease-out);
}
.pcb-link:active { transform: scale(.985); }
.pcb-link:focus-visible { outline: 2px solid var(--silk); outline-offset: 3px; box-shadow: 0 0 0 7px var(--focus); }
.pcb-fid {
  position: absolute; right: 16px; bottom: 18px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--hasl); box-shadow: 0 0 0 4px var(--mask), 0 0 0 5px var(--rule);
}
/* the picture is mounted on the board like a display, in its own bezel */
.pcb-art {
  flex: none; display: grid; place-items: center;
  aspect-ratio: 4 / 3; border-radius: 7px; overflow: hidden;
  box-shadow: inset 0 0 0 1.5px var(--silk);
}
.pcb-art--photo { position: relative; background: var(--mask-deep); }
.pcb-art--photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.pcb-art--photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--silk); pointer-events: none; }
.pcb-link:hover .pcb-art--photo img { transform: scale(1.04); }
.pcb-art--dark { background: #0C0F14; }

/* title and line under the picture; who it was for sits on the board's bottom edge */
.pcb-meta { flex: 1; display: grid; grid-template-rows: auto auto 1fr; gap: 6px; padding: 16px 22px 0 4px; }
.pcb-title { font-family: var(--wide); font-weight: 600; font-size: 1.12rem; line-height: 1.15; letter-spacing: -.015em; }
.pcb-link:hover .pcb-title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.pcb-line { font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
.pcb-ctx { align-self: end; padding-top: 14px; font-size: .8rem; color: var(--ink-3); }

/* ---------------------------------------------------------------- why: test points */

.why { --pt: clamp(120px, 12vw, 180px); padding: var(--pt) var(--pad) 0; }
.tps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px;
  margin: clamp(50px, 5.5vw, 72px) 0 0; padding: 0; list-style: none;
}
.tp { position: relative; --n: 0; }
.tp:nth-child(2) { --n: 1; }
.tp:nth-child(3) { --n: 2; }
.tp:nth-child(4) { --n: 3; }
/* the trace between test points, faintly visible through the mask */
.tp:not(:last-child)::after {
  content: ""; position: absolute; left: 20px; right: -30px; top: 8px; height: 4px; border-radius: 2px;
  background: var(--mask-deep);
}
.tp-pad {
  display: block; width: 10px; height: 10px; margin: 5px; border-radius: 50%;
  background: var(--hole-bg);
  box-shadow: inset 0 1.5px 2px -1px var(--wall), 0 0 0 5px var(--hasl);
  transition: box-shadow .3s var(--ease-out);
}
/* hover a pillar and you probe its test point */
.tp:hover .tp-pad {
  box-shadow: inset 0 1.5px 2px -1px var(--wall), 0 0 0 5px var(--glow), 0 0 0 8px rgba(94, 207, 249, .12), 0 0 16px 4px rgba(94, 207, 249, .18);
}
.tp-ref {
  position: absolute; left: 0; top: -17px;
  font-family: var(--wide); font-size: .56rem; font-weight: 600; letter-spacing: .14em; color: var(--silk-deco);
}
.tp h3 { margin: 22px 0 8px; font-family: var(--wide); font-weight: 600; font-size: 1.28rem; line-height: 1.2; letter-spacing: -.015em; }
.tp p { margin: 0; max-width: 30ch; font-size: .98rem; line-height: 1.5; color: var(--ink-2); }

/* ---------------------------------------------------------------- capabilities: parts lists */

.capabilities { --pt: clamp(120px, 12vw, 180px); padding: var(--pt) var(--pad) 0; }
.boms {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.2vw, 52px);
  margin-top: clamp(44px, 5vw, 66px);
}
.bom:nth-child(2) { --c: 1; }
.bom:nth-child(3) { --c: 2; }
.bom h3 {
  margin: 0; padding-bottom: 12px;
  border-bottom: 1.5px solid var(--silk);
  font-family: var(--wide); font-weight: 600; font-size: 1.2rem; letter-spacing: -.01em;
}
.bom ul { margin: 0; padding: 0; list-style: none; }
.bom li { position: relative; padding: 12px 0 12px 21px; font-size: 1rem; line-height: 1.4; }   /* room for the LED bullet */
.bom li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--rule); transform-origin: left;
}
.bom li:nth-child(2) { --n: 1; }
.bom li:nth-child(3) { --n: 2; }
.bom li:nth-child(4) { --n: 3; }
.bom li:nth-child(5) { --n: 4; }
.bom li:nth-child(6) { --n: 5; }

/* ---------------------------------------------------------------- clients */

.clients { --pt: clamp(120px, 12vw, 180px); padding: var(--pt) var(--pad) 0; }
.quotes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 3.4vw, 56px);
  margin-top: clamp(46px, 5vw, 70px);
}
/* each quote sits inside a placement courtyard, corners only */
.quote {
  position: relative;
  display: grid; gap: 22px; align-content: start;
  margin: 0; padding: clamp(24px, 2.6vw, 36px);
}
.quote::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  --c: linear-gradient(var(--silk), var(--silk));
  background:
    var(--c) 0 0 / 16px 1.5px no-repeat, var(--c) 0 0 / 1.5px 16px no-repeat,
    var(--c) 100% 0 / 16px 1.5px no-repeat, var(--c) 100% 0 / 1.5px 16px no-repeat,
    var(--c) 0 100% / 16px 1.5px no-repeat, var(--c) 0 100% / 1.5px 16px no-repeat,
    var(--c) 100% 100% / 16px 1.5px no-repeat, var(--c) 100% 100% / 1.5px 16px no-repeat;
}
/* client marks, printed in the same ink as everything else, sized by eye so they weigh the same */
.quote-mark { display: flex; align-items: center; height: 66px; }
.mark { width: auto; max-width: 200px; filter: var(--mark); opacity: .88; }
.mark--mh { height: 66px; }
.mark--shc { height: 50px; }
.mark--spoton { height: 66px; }
.mark--onway { height: 30px; }
.quote blockquote { margin: 0; }
.quote blockquote p {
  margin: 0; max-width: 34ch;
  font-size: clamp(1.12rem, 1rem + .45vw, 1.34rem); line-height: 1.42; letter-spacing: -.01em;
}
.quote figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: .95rem; }
.quote figcaption strong { font-weight: 600; }
.quote figcaption span { color: var(--ink-3); }

/* ---------------------------------------------------------------- contact */

.contact {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: "intro form" "kit form"; grid-template-rows: auto 1fr;
  column-gap: clamp(44px, 6vw, 100px); align-items: start;
  padding: clamp(120px, 13vw, 190px) var(--pad) clamp(100px, 10vw, 150px);
}
.contact-intro { grid-area: intro; }
.enquiry { grid-area: form; }
.contact .perf--divider { grid-area: div; }
/* the form's own transmitter stands at the foot of the left column, level with the send key */
.contact .kit { grid-area: kit; align-self: end; margin: clamp(34px, 3.6vw, 52px) 0 0; }
@media (min-width: 1100px) {
  .contact {
    grid-template-columns: minmax(0, 5fr) auto minmax(0, 6fr); grid-template-areas: "intro div form" "kit div form";
    column-gap: clamp(30px, 3.2vw, 58px);
  }
}
.contact-intro p { margin: 1.2em 0 0; max-width: 30em; font-size: 1.1rem; color: var(--ink-2); }
.contact-intro .contact-sub {
  margin-top: .55em;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); font-weight: 500; font-family: var(--wide); letter-spacing: -.015em;
  color: var(--silk);
}

/* J1: the direct lines are the pins of a header, each with a short trace out to what it carries */
.direct { --pitch: 46px; position: relative; display: grid; margin: 52px 0 0; }
.direct::after {
  content: "J1"; position: absolute; left: 1px; top: -19px;
  font-family: var(--wide); font-size: .6rem; font-weight: 600; letter-spacing: .14em; line-height: 1; color: var(--silk-deco);
}
.direct > div {
  position: relative; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); column-gap: 10px; align-items: baseline;
  min-height: var(--pitch); padding-left: 66px;
}
/* the header's outline, drawn a pin at a time, so it keeps to its pads however the lines wrap */
.direct > div::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 30px;
  border-inline: 1px solid var(--silk-deco);
}
.direct > div:first-child::before { border-top: 1px solid var(--silk-deco); border-radius: 3px 3px 0 0; }
.direct > div:last-child::before { bottom: auto; height: 32px; border-bottom: 1px solid var(--silk-deco); border-radius: 0 0 3px 3px; }
.direct > div::after {
  content: ""; position: absolute; left: 30px; top: 15px; width: 26px; height: 2px; border-radius: 0 1px 1px 0;
  background: var(--ghost-net);
}
/* a plated pad with its hole: pin 1 is the square one */
.pin-pad {
  position: absolute; left: 7px; top: 8px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--hasl);
  transition: background-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.direct > div:first-child .pin-pad { border-radius: 3px; }
.pin-pad::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--hole-bg); box-shadow: inset 0 1.5px 2px -1px var(--wall);
}
.direct dt {
  font-family: var(--wide); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.direct dd { margin: 0; font-size: 1.05rem; font-weight: 500; line-height: 1.45; }
.direct a {
  display: block; min-height: var(--pitch); padding-top: 4px;
  text-decoration-thickness: 1.5px; text-underline-offset: .25em;
}
/* point at a line (on a touch screen, bring it to the middle) and its pin is probed */
.direct > div:is(.is-lit, :has(a:hover), :has(a:focus-visible)) .pin-pad {
  background: var(--glow);
  box-shadow: 0 0 0 3px rgba(94, 207, 249, .16), 0 0 14px 3px rgba(94, 207, 249, .24);
}
.direct > div:is(.is-lit, :has(a:hover), :has(a:focus-visible)) dt { color: var(--silk); }
@media (prefers-reduced-motion: no-preference) {
  .direct > div:is(.is-lit, :has(a:hover), :has(a:focus-visible))::after {
    background: linear-gradient(90deg, transparent, rgba(94, 207, 249, .95), transparent) -26px 0 / 26px 100% no-repeat, var(--ghost-net);
    animation: pin-run .85s linear infinite;
  }
}
@keyframes pin-run { to { background-position: 52px 0, 0 0; } }

.enquiry { display: grid; }
.keys-set { min-width: 0; margin: 0 0 8px; padding: 0; border: 0; }
.keys-set legend { margin-bottom: 16px; padding: 0; font-weight: 600; font-size: 1.05rem; }
.keys-set .opt { margin-left: 6px; font-weight: 400; font-size: .9rem; color: var(--ink-3); }

/* four illuminated keys, one for each thing NYNA does: press one and it latches down with its LED on */
/* (four in a row where the form is wide enough to hold them, otherwise two and two: never three and one) */
.keys {
  display: grid; gap: 13px 10px; padding-bottom: 3px;
  grid-template-columns: repeat(auto-fit, minmax(clamp(25% - 8px, (540px - 100%) * 999, 50% - 6px), 1fr));
}
.key { position: relative; display: block; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.key input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.key-cap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start;
  height: 100%; min-height: 84px; padding: 12px 13px 13px;
  border-radius: 7px; background: var(--pkg); color: var(--silk);
  box-shadow: inset 0 0 0 1.5px var(--silk), 0 3px 0 var(--silk), 0 14px 20px -14px rgba(var(--shade), .5);
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.key-led {
  width: 12px; height: 6px; margin-top: 2px; border-radius: 2px;
  background: var(--led-off); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
  transition: background-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.key-ref { font-family: var(--wide); font-size: .56rem; font-weight: 600; letter-spacing: .14em; line-height: 1; opacity: .5; }
.key-name { grid-column: 1 / -1; margin-top: 16px; font-family: var(--wide); font-weight: 600; font-size: 1rem; line-height: 1.15; letter-spacing: -.01em; }
.key-sub { grid-column: 1 / -1; margin-top: 3px; font-size: .8rem; line-height: 1.3; color: var(--ink-3); transition: color .2s var(--ease-out); }
@media (hover: hover) {
  .key:hover .key-cap { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--silk), 0 4px 0 var(--silk), 0 16px 22px -14px rgba(var(--shade), .5); }
}
.key:active .key-cap, .key input:checked + .key-cap {
  transform: translateY(3px);
  box-shadow: inset 0 0 0 1.5px var(--silk), 0 0 0 var(--silk), 0 6px 12px -8px rgba(var(--shade), .4);
}
.key:active .key-cap { transition-duration: .08s; }
.key input:checked + .key-cap { background: var(--silk); color: var(--mask); }
.key input:checked + .key-cap .key-sub { color: inherit; opacity: .72; }
.key input:checked + .key-cap .key-led { background: var(--kled-on); box-shadow: var(--kled-glow); }
.key input:focus-visible + .key-cap { outline: 2px solid var(--silk); outline-offset: 4px; }

.field { display: grid; gap: 8px; margin-top: 24px; }
.field label { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: .98rem; }
/* the LED beside each label comes on once its field holds something usable */
.fled {
  flex: none; width: 9px; height: 5px; border-radius: 1.5px;
  background: var(--led-off); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.field.is-set .fled {
  background: #D8F4FF;
  box-shadow: 0 0 0 1px rgba(12, 143, 203, .45), 0 0 4px 1px rgba(94, 207, 249, .7), 0 0 10px 2px rgba(94, 207, 249, .2);
}
.field input, .field textarea {
  width: 100%; padding: 13px 14px;
  border: 1.5px solid var(--field-line); border-radius: 6px;
  background: var(--field); color: var(--silk);
  font: inherit; font-size: 1rem;
  transition: box-shadow .18s var(--ease-out), background-color .2s var(--ease-out), border-color .2s;
}
.field textarea { min-height: 136px; line-height: 1.5; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--silk); background: var(--field-on); box-shadow: 0 0 0 4px var(--focus); }
.field [aria-invalid="true"] { border-color: var(--err); }
.err { margin: 0; font-size: .9rem; color: var(--err); }
.send-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 28px; }
/* the send key's LED comes on when there is enough to send */
.send { gap: 11px; }
.send-led {
  width: 12px; height: 6px; border-radius: 2px; background: var(--kled-off);
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.enquiry.is-ready .send-led { background: var(--kled-on); box-shadow: var(--kled-glow); }
.status { flex: 1 1 14rem; margin: 0; font-size: .95rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- footer */

.foot { padding: 0 var(--pad) 30px; }
.perf--foot { --hex: m; height: clamp(90px, 8vw, 124px); margin: 0 calc(-1 * var(--pad) + clamp(16px, 2.2vw, 30px)) clamp(44px, 4.8vw, 64px); }
/* centred, one size and one colour throughout, and every piece of contact info is a link */
.foot-main { display: grid; justify-items: center; gap: 18px; text-align: center; }
.foot .logo { font-size: 1.6rem; }
.foot-tag, .foot-links a, .foot-contact a, .foot-row p, .top-link {
  font-size: 1rem; font-weight: 450; line-height: 1.5; color: var(--ink-2);
}
.foot-tag { margin: 0; max-width: 34ch; }
.foot-links, .foot-contact {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 28px; margin: 0; font-style: normal;
}
.foot-contact { margin-top: 2px; }
/* a small pad between items, like the rest of the board */
.foot-links a + a::before, .foot-contact a + a::before {
  content: ""; position: absolute; left: -16px; top: 50%;
  width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: var(--hasl);
}
.foot-links a, .foot-contact a, .top-link {
  position: relative; text-decoration: none;
  transition: color .2s var(--ease-out);
}
.foot-links a:hover, .foot-contact a:hover, .top-link:hover { color: var(--silk); }
.foot-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 28px; margin-top: clamp(40px, 5vw, 60px); padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.foot-row p { margin: 0; }
/* a dimension line that measures itself, like a fab drawing */
.dim {
  --c: var(--silk-deco);
  position: relative; display: flex; justify-content: center; align-items: center;
  height: 18px; margin: clamp(34px, 4vw, 48px) 0 0;
  border-inline: 1px solid var(--c);
  background: linear-gradient(var(--c), var(--c)) 0 50% / 100% 1px no-repeat;
}
.dim::before, .dim::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 7px; margin-top: -3.5px; background: var(--c);
}
.dim::before { left: 1px; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.dim::after { right: 1px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.dim-val {
  padding: 0 12px; background: var(--mask);
  font-family: var(--wide); font-size: .62rem; font-weight: 600; letter-spacing: .12em; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
/* the board's title block, as printed on its back: a grid of fab notes and a contact code */
.tblock {
  display: flex; width: max-content; max-width: 100%; margin: 22px auto 0;
  border: 1px solid var(--silk-deco); border-radius: 3px;
}
.tb-grid { display: grid; grid-template-columns: repeat(3, auto); margin: 0; }
.tb-grid > div { display: grid; align-content: center; padding: 9px 16px 10px; border-right: 1px solid var(--silk-deco); border-bottom: 1px solid var(--silk-deco); }
.tb-grid > div:nth-child(3n) { border-right: 0; }
.tb-grid > div:nth-last-child(-n + 3) { border-bottom: 0; }
.tb-grid dt { font-family: var(--wide); font-size: .54rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.tb-grid dd { margin: 3px 0 0; font-family: var(--wide); font-size: .8rem; font-weight: 600; letter-spacing: .06em; color: var(--silk); }
.tb-mask::after { content: "WHITE"; }
[data-theme="dark"] .tb-mask::after { content: "BLACK"; }
.tb-qr { display: grid; justify-items: center; align-content: center; gap: 6px; margin: 0; padding: 10px 14px; border-left: 1px solid var(--silk-deco); }
.tb-code { width: 147px; height: 147px; }   /* 49 modules at exactly 3px each, so it scans off a standard screen */
.tb-code path { fill: var(--silk); }
.tb-code-bg { fill: transparent; }
/* on the black mask the code is a filled silkscreen patch, so it still reads dark-on-light */
[data-theme="dark"] .tb-code-bg { fill: var(--silk); }
[data-theme="dark"] .tb-code path { fill: var(--mask); }
.tb-qr figcaption { font-family: var(--wide); font-size: .5rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 700px) {
  .tb-qr { display: none; }
  .tblock { width: 100%; }
  .tb-grid { flex: 1; }
  .tb-grid > div { padding: 8px 11px 9px; }
}
/* on a phone the lists wrap, so they drop the separators and the contact details stack */
@media (max-width: 700px) {
  .foot-links a + a::before, .foot-contact a + a::before { display: none; }
  .foot-links { gap: 10px 24px; }
  .foot-contact { flex-direction: column; gap: 8px; }
  .foot-contact a { max-width: 30ch; }
}

/* ---------------------------------------------------------------- vertical section marker */

/* anchored at its top so it never re-centres; labels grow downward */
.rail-v {
  position: fixed; z-index: 30;
  top: calc(50% - 150px);
  left: max(calc(var(--gap) + clamp(14px, 1.3vw, 22px)), calc(var(--pad) - 64px));
  display: none; align-items: center; gap: 16px;
  writing-mode: vertical-rl;
  font-size: .68rem; font-weight: 600; font-family: var(--wide);
  letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink-3);
  opacity: 0; transition: opacity .7s var(--ease-out);
  pointer-events: none;
}
.rail-v.is-on { opacity: 1; }
.rail-v.is-on.is-under { opacity: 0; }   /* steps aside while the work window passes behind it */
.rail-v-brand { font-family: "Unbounded", system-ui, sans-serif; font-weight: 500; letter-spacing: .12em; color: var(--silk); }
.rail-v-track { position: relative; flex: none; inline-size: 110px; block-size: 1.5px; background: var(--rule); }
.rail-v-fill {
  position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--p, 0));
  background: var(--accent);
}
/* a charge riding the track as you scroll */
.rail-v-dot {
  position: absolute; left: 50%; top: 0;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 1.5px rgba(94, 207, 249, .55), 0 0 9px 2px rgba(94, 207, 249, .9);
  transform: translateY(calc(var(--p, 0) * 110px));
}
.rail-v-labels { position: relative; flex: none; inline-size: 260px; block-size: 1.3em; }
.rail-v-label {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  transition: opacity .55s var(--ease-out), transform .7s var(--ease-out), filter .55s var(--ease-out);
}
.rail-v-label.is-enter { opacity: 0; transform: translateY(16px); filter: blur(4px); }
.rail-v-label.is-leave { opacity: 0; transform: translateY(-16px); filter: blur(4px); }
@media (min-width: 1100px) { .rail-v { display: flex; } }

/* ---------------------------------------------------------------- floating control */

.float {
  position: fixed; top: calc(var(--gap) + 10px); right: calc(var(--gap) + 10px); z-index: 40;
  display: flex; align-items: center; gap: 6px; padding: 6px;
  border-radius: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--glass-rule), inset 0 1px 0 var(--glass-hi), 0 18px 40px -16px rgba(var(--shade), .55);
  transform: translateY(calc(-100% - 40px));
  transition: transform .34s var(--ease-out);
}
.float.is-on { transform: none; }
.float-logo { padding: 0 10px 0 8px; font-family: "Unbounded", system-ui, sans-serif; font-weight: 500; font-size: 1.02rem; letter-spacing: .06em; color: var(--silk); text-decoration: none; }
.float-btn {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px;
  border: 0; border-radius: 9px; background: none; box-shadow: inset 0 0 0 1.5px var(--silk);
  font: inherit; font-size: .9rem; font-weight: 600; font-family: var(--wide);
  color: var(--silk); text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .12s var(--ease-out), background-color .2s;
}
.float-btn { position: relative; isolation: isolate; overflow: hidden; }
.float-btn[aria-expanded="true"] { background: var(--silk); color: var(--mask); }
.float-btn--solid { position: relative; overflow: visible; background: var(--silk); color: var(--mask); box-shadow: none; }
.float-btn--solid:hover { background: var(--silk-hover); }
.float-btn:active { transform: scale(.95); }

/* ---------------------------------------------------------------- menu popover */

.pop {
  position: fixed; z-index: 70; top: 0; right: 0;
  width: min(300px, calc(100vw - 24px));
  overflow: hidden;
  border-radius: 18px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7);
  box-shadow:
    inset 0 0 0 1px var(--glass-rule), inset 0 1px 0 var(--glass-hi),
    0 32px 64px -24px rgba(var(--shade), .55), 0 8px 18px -10px rgba(var(--shade), .32);
  transform-origin: var(--ox, 88%) 0;
}
.pop[hidden] { display: none; }
/* a single sweep of light across the glass as it opens */
.pop::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, var(--sheen) 50%, transparent 64%);
  transform: translateX(-120%);
}
.pop.is-in { animation: pop-in .32s var(--ease-out) both; }
.pop.is-in::after { animation: pop-sheen 1.15s var(--ease-out) .1s both; }
.pop.is-in .pop-nav a { animation: row-in .5s var(--ease-out) calc(70ms + var(--i, 0) * 32ms) backwards; }
.pop.is-in .pop-set, .pop.is-in .pop-foot { animation: row-in .5s var(--ease-out) .3s backwards; }
.pop.is-out { animation: pop-out .16s cubic-bezier(.4, 0, 1, 1) both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-8px) scale(.9); } }
@keyframes pop-out { to { opacity: 0; transform: translateY(-6px) scale(.96); } }
@keyframes pop-sheen { to { transform: translateX(120%); } }
@keyframes row-in { from { opacity: 0; transform: translateY(6px); filter: blur(4px); } }

.pop-in { padding: 8px; }
.pop-nav { display: grid; }
.pop-nav a {
  display: flex; align-items: center;
  min-height: 44px; padding: 0 12px; border-radius: 10px;
  font-size: 1.02rem; font-weight: 550; font-family: var(--wide); letter-spacing: -.01em;
  text-decoration: none;
  transition: background-color .15s;
}
.pop-nav a > span { flex: none; }
/* hover a row and a trace routes from its pad to the name, with current running along it */
.pop-trace {
  position: relative; flex: 1; align-self: center;
  height: 1.5px; margin: 0 10px 0 14px; border-radius: 1px;
  background: linear-gradient(90deg, rgba(94, 207, 249, .15), var(--glow));
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.pop-trace::after {
  content: ""; position: absolute; top: 50%; right: 0;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 0 6px 2px rgba(94, 207, 249, .9);
  opacity: 0;
}
.pop-nav a:hover .pop-trace, .pop-nav a:focus-visible .pop-trace { transform: scaleX(1); }
/* each row ends in a pad; the section you're in is lit */
.pop-nav a::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--hasl);
  transition: box-shadow .2s var(--ease-out), background-color .2s;
}
.pop-nav a:hover { background: var(--tint); }
.pop-nav a:hover::after, .pop-nav a:focus-visible::after { box-shadow: inset 0 0 0 1.5px var(--glow), 0 0 8px rgba(94, 207, 249, .6); }
.pop-nav a[aria-current="true"]::after { background: var(--glow); box-shadow: 0 0 0 3px rgba(94, 207, 249, .18), 0 0 10px rgba(94, 207, 249, .85); }
.pop-nav a:focus-visible { outline-offset: -2px; border-radius: 10px; }
.pop-set { display: grid; margin: 6px 0 0; padding: 6px 0; border-top: 1px solid var(--rule); }

.pop-foot { display: grid; gap: 2px; margin: 0 4px; padding: 10px 8px 8px; border-top: 1px solid var(--rule); font-size: .9rem; }
.pop-foot a { padding: 3px 0; color: var(--ink-2); text-decoration: none; }
.pop-status {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 2px; font-size: .8rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- motion that keeps the board alive */

@media (prefers-reduced-motion: no-preference) {
  .led { animation: led-breathe 3.4s ease-in-out infinite; }
  .led.is-blink { animation: led-breathe 3.4s ease-in-out infinite, led-blink .12s steps(1, end) 3; }

  .is-idle .hero-ctas .btn--solid::after,
  .is-idle .float.is-on .float-btn--solid::after { animation: nudge 2.8s var(--ease-out) infinite; }

  .pop-nav a:hover .pop-trace::after { animation: trace-run 1.1s linear .35s infinite; }
  .pop-nav a[aria-current="true"]::after { animation: pad-breathe 2.4s ease-in-out infinite; }

  /* current moves along the chain of test points while they're on screen */
  .tps.is-in.is-live .tp:not(:last-child)::after {
    background:
      linear-gradient(90deg, transparent, rgba(94, 207, 249, .95), transparent) -48px 0 / 48px 100% no-repeat,
      var(--mask-deep);
    animation: tp-flow 3.2s linear infinite;
    animation-delay: calc(var(--n) * .8s);
  }
}
@keyframes led-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes led-blink { 0% { opacity: .1; } 50% { opacity: 1; } }
@keyframes nudge {
  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(94, 207, 249, .45); }
  60%, 100% { opacity: 0; box-shadow: 0 0 0 16px rgba(94, 207, 249, 0); }
}
@keyframes trace-run {
  0% { right: 0; opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { right: calc(100% - 5px); opacity: 0; }
}
@keyframes pad-breathe {
  50% { box-shadow: 0 0 0 5px rgba(94, 207, 249, .1), 0 0 16px rgba(94, 207, 249, 1); }
}
@keyframes tp-flow {
  0% { background-position: -48px 0, 0 0; }
  25%, 100% { background-position: calc(100% + 48px) 0, 0 0; }
}
@keyframes tp-flow-v {
  0% { background-position: 0 -48px, 0 0; }
  25%, 100% { background-position: 0 calc(100% + 48px), 0 0; }
}
@keyframes tp-probe {
  30% { box-shadow: inset 0 1.5px 2px -1px var(--wall), 0 0 0 5px var(--glow), 0 0 0 9px rgba(94, 207, 249, .12), 0 0 16px 5px rgba(94, 207, 249, .2); }
}
@keyframes focus-in { from { opacity: 0; filter: blur(6px); } }
@keyframes chip-place { from { opacity: 0; transform: translateY(-20px); } 50% { opacity: 1; } }
@keyframes chip-land { from { opacity: 0; transform: translateY(12px) scale(1.03); } }
@keyframes rule-draw { from { transform: scaleX(0); } }
@keyframes print { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* things arriving as you reach them (main.js adds .reveals only when motion is welcome) */
.reveals .h2 .w { display: inline-block; }
.reveals :is(.sec-head, .work-head, .hw-copy, .contact-intro):not(.is-in) .h2 .w { opacity: 0; filter: blur(10px); }
.reveals :is(.sec-head, .work-head, .hw-copy, .contact-intro).is-in .h2 .w { animation: word-in .9s var(--ease-out) calc(var(--i) * 45ms) backwards; }
.reveals :is(.sec-head, .hw-copy, .contact-intro):not(.is-in) :is(.sec-lead, .contact-sub) { opacity: 0; filter: blur(6px); }
.reveals :is(.sec-head, .hw-copy, .contact-intro).is-in :is(.sec-lead, .contact-sub) { animation: focus-in .9s var(--ease-out) .3s backwards; }
.reveals .contact-intro:not(.is-in) .direct > div { opacity: 0; }
.reveals .contact-intro.is-in .direct > div { animation: row-in .7s var(--ease-out) calc(.45s + var(--n, 0) * .12s) backwards; }
.direct > div:nth-child(2) { --n: 1; }
.direct > div:nth-child(3) { --n: 2; }
.reveals .hw-copy:not(.is-in) .feat { opacity: 0; }
.reveals .hw-copy.is-in .feat { animation: row-in .7s var(--ease-out) calc(.4s + var(--n, 0) * .12s) backwards; }

/* services: each part fades in where it sits */
.reveals .chip:not(.is-in) { opacity: 0; }
.reveals .chip.is-in { animation: focus-in .8s var(--ease-out) backwards; }

/* why: each test point is probed in turn */
.reveals .tps:not(.is-in) .tp :is(h3, p) { opacity: 0; filter: blur(6px); }
.reveals .tps.is-in .tp :is(h3, p) { animation: focus-in .8s var(--ease-out) calc(.1s + var(--n) * .16s) backwards; }
.reveals .tps.is-in .tp-pad { animation: tp-probe 1.3s var(--ease-out); animation-delay: calc(var(--n) * .16s); }

/* capabilities: the parts lists are drawn in, rule by rule */
.reveals .bom:not(.is-in) li { opacity: 0; }
.reveals .bom:not(.is-in) li::after { transform: scaleX(0); }
.reveals .bom.is-in li { animation: row-in .6s var(--ease-out) backwards; animation-delay: calc((var(--n, 0) + var(--c, 0) * 1.5) * 70ms); }
.reveals .bom.is-in li::after { animation: rule-draw .9s var(--ease-out) backwards; animation-delay: calc((var(--n, 0) + var(--c, 0) * 1.5) * 70ms); }

/* clients: marks print across, the words come into focus */
.reveals .quote:not(.is-in) .mark { clip-path: inset(0 100% 0 0); }
.reveals .quote.is-in .mark { animation: print 1s var(--ease-out) .1s backwards; }
.reveals .quote:not(.is-in) :is(blockquote, figcaption) { opacity: 0; filter: blur(6px); }
.reveals .quote.is-in :is(blockquote, figcaption) { animation: focus-in .9s var(--ease-out) .25s backwards; }

/* ---------------------------------------------------------------- cursor */

.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor :is(input, textarea, select) { cursor: text !important; }
.cursor { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-out); --d: 34px; }
.cursor.is-on { opacity: 1; }
.cursor-dot, .cursor-ring { position: absolute; left: 0; top: 0; will-change: transform; }
.cursor-dot::before {
  content: ""; position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 1.5px var(--halo), 0 0 8px rgba(94, 207, 249, .7);
  transition: transform .3s var(--ease-out), opacity .2s;
}
.cursor-ring::before {
  content: ""; position: absolute;
  left: calc(var(--d) / -2); top: calc(var(--d) / -2); width: var(--d); height: var(--d);
  border-radius: 50%; border: 1.5px solid var(--silk);
  box-shadow: 0 0 0 1px var(--halo);
  transition: left .4s var(--ease-out), top .4s var(--ease-out), width .4s var(--ease-out), height .4s var(--ease-out),
    background-color .3s var(--ease-out), border-color .3s var(--ease-out), opacity .3s var(--ease-out);
}
.cursor-label {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  font-family: var(--wide); font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--mask); opacity: 0; transition: opacity .2s var(--ease-out);
}
.cursor.is-link { --d: 50px; }
.cursor.is-link .cursor-ring::before { border-color: var(--accent); background: rgba(94, 207, 249, .14); }
.cursor.is-link .cursor-dot::before { transform: scale(.5); }
.cursor.is-label { --d: 76px; }
.cursor.is-label .cursor-ring::before { border-color: var(--silk); background: var(--silk); }
.cursor.is-label .cursor-label { opacity: 1; transition-delay: .08s; }
.cursor.is-label .cursor-dot::before { opacity: 0; }
.cursor.is-down { --d: 26px; }
.cursor.is-down.is-label { --d: 64px; }
.cursor.is-text { opacity: 0; }

/* ---------------------------------------------------------------- theme change */

::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ================================================================ case studies */

:root { --risk-high: #B42318; --risk-med: #8A6A00; --risk-low: #16794C; }
:root[data-theme="dark"] { --risk-high: #FF8A7A; --risk-med: #E3C14E; --risk-low: #5BD6A0; }

.case { position: relative; --side: clamp(124px, 10.6vw, 172px); padding: clamp(24px, 4vw, 56px) var(--pad) 0; }
.back {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: var(--wide); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; transition: color .2s var(--ease-out);
}
.back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease-out); }
.back:hover { color: var(--silk); }
.back:hover svg { transform: translateX(-4px); }

.case-head { max-width: min(62rem, calc(100% - var(--side) - 56px)); margin-top: clamp(18px, 2.6vw, 34px); }
.case-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: .95rem; font-weight: 500; color: var(--ink-2); }
.case-h {
  margin: 0; font-family: var(--wide); font-weight: 570;
  font-size: clamp(2.3rem, 1.1rem + 4.4vw, 5.2rem); line-height: .98; letter-spacing: -.04em;
  text-wrap: balance;
}
.case-lead { margin: clamp(22px, 2.6vw, 34px) 0 0; max-width: 62ch; font-size: clamp(1.05rem, .96rem + .38vw, 1.24rem); line-height: 1.55; color: var(--ink-2); }
@media (max-width: 1099px) { .case { --side: 0px; } }

/* photographs on the board, and the viewer that enlarges them */
.shot {
  position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 12px; overflow: hidden;
  background: var(--pkg); cursor: zoom-in;
  box-shadow: 0 1px 1px rgba(var(--shade), .08), 0 18px 36px -22px rgba(var(--shade), .45);
  -webkit-tap-highlight-color: transparent;
}
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.shot:hover img { transform: scale(1.035); }
.shot:focus-visible { outline: 2px solid var(--silk); outline-offset: 3px; }
.contain .shot img, .shot.contain img { object-fit: contain; padding: 10px; }
.case-hero { margin: clamp(40px, 5vw, 72px) 0 0; }
.case-hero .shot { max-height: 82vh; }
.case-hero figcaption, .fig-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 16px; font-size: .92rem; line-height: 1.45; color: var(--ink-3); }
:is(.case-hero figcaption, .fig-cap) strong { color: var(--silk); font-weight: 600; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(10px, 1.2vw, 16px); margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; list-style: none; }
.gallery .shot { aspect-ratio: 4 / 3; }
.gallery--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.gallery--wide .shot { aspect-ratio: 14 / 9; }

/* the key numbers, set out like a parts list */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); column-gap: 24px; margin: clamp(40px, 5vw, 64px) 0 0; border-top: 1.5px solid var(--silk); }
.spec { padding: 20px 0 22px; border-bottom: 1px solid var(--rule); }
.spec dt { font-family: var(--wide); font-weight: 570; font-size: clamp(1.45rem, 1.05rem + 1.15vw, 2.1rem); letter-spacing: -.03em; line-height: 1.05; }
.spec dt small { margin-left: 3px; font-size: .5em; letter-spacing: 0; color: var(--ink-3); }
.spec dd { margin: 10px 0 0; font-size: .92rem; line-height: 1.4; color: var(--ink-3); }

.case-sec { margin-top: clamp(90px, 10vw, 150px); }
.case-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 84px); align-items: start; }
.sec-head + :is(.case-cols, .gallery, .verdicts, .table-wrap, .model, .video, .arch-cols, .pipeline) { margin-top: clamp(30px, 3.4vw, 46px); }
.case-cols + .case-cols { margin-top: clamp(40px, 5vw, 70px); }
.case-h3 { margin: 0 0 14px; font-family: var(--wide); font-weight: 600; font-size: clamp(1.18rem, 1rem + .55vw, 1.46rem); letter-spacing: -.02em; line-height: 1.2; }
.prose { max-width: 68ch; color: var(--ink-2); line-height: 1.65; }
.prose p { margin: 0; }
.prose p + p { margin-top: 1em; }
.prose strong { color: var(--silk); font-weight: 600; }
.leds { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); line-height: 1.5; }
.leds li { position: relative; padding-left: 22px; }
.leds li::before {
  content: ""; position: absolute; left: 0; top: .74em;
  width: 9px; height: 5px; margin-top: -2.5px; border-radius: 1.5px;
}
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tags li { padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--rule); font-size: .86rem; color: var(--ink-2); }

/* a statement lit from the side */
.pull {
  display: grid; grid-template-columns: 3px minmax(0, 1fr); column-gap: 24px;
  max-width: 30ch; margin: clamp(70px, 8vw, 110px) 0 0;
  font-family: var(--wide); font-weight: 570; font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.4rem); line-height: 1.16; letter-spacing: -.03em;
}
.pull::before { content: ""; border-radius: 2px; background: var(--glow); box-shadow: 0 0 14px rgba(94, 207, 249, .75); }

/* the research pipeline, drawn as parts joined by traces */
.pipeline { display: flex; flex-wrap: wrap; align-items: center; row-gap: 14px; margin: 0; padding: 0; list-style: none; }
.pipeline li { display: flex; align-items: center; }
.pipeline li + li::before {
  content: ""; width: clamp(18px, 2.6vw, 38px); height: 2px; border-radius: 1px;
  background: var(--hasl);
}
.node {
  padding: 12px 16px; border-radius: 8px;
  background: var(--pkg); box-shadow: inset 0 0 0 1.5px var(--silk), 0 12px 24px -18px rgba(var(--shade), .5);
  font-family: var(--wide); font-size: .84rem; font-weight: 600; white-space: nowrap;
}
.node--key { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px rgba(94, 207, 249, .14), 0 0 24px rgba(94, 207, 249, .32); }
@media (prefers-reduced-motion: no-preference) {
  .pipeline.is-live li + li::before {
    background: linear-gradient(90deg, transparent, rgba(94, 207, 249, .95), transparent) -30px 0 / 30px 100% no-repeat, var(--hasl);
    animation: tp-flow 2.8s linear infinite;
  }
  .pipeline li:nth-child(3)::before { animation-delay: .5s; }
  .pipeline li:nth-child(4)::before { animation-delay: 1s; }
  .pipeline li:nth-child(5)::before { animation-delay: 1.5s; }
}

/* firmware and test code */
.code { margin: 0; min-width: 0; }
.code figcaption { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-family: var(--wide); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.code pre {
  margin: 0; padding: 18px 20px; overflow-x: auto; border-radius: 12px;
  background: #0E131A; color: #D7DEE8;
  font: 400 .8rem/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 18px 36px -24px rgba(var(--shade), .6);
  -webkit-text-size-adjust: 100%;
}
.code .cm { color: #7D90A5; }

/* data tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .96rem; }
.data th {
  padding: 0 12px 12px; border-bottom: 1.5px solid var(--silk);
  font-family: var(--wide); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  text-align: center;
}
.data td { padding: 14px 12px; border-bottom: 1px solid var(--rule); text-align: center; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.data :is(th, td):first-child { padding-left: 0; text-align: left; }
.data td:first-child { color: var(--silk); font-weight: 500; }
.risk { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.risk::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.risk--high { color: var(--risk-high); }
.risk--med { color: var(--risk-med); }
.risk--low { color: var(--risk-low); }

/* assessment cards */
.verdicts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin: 0; padding: 0; list-style: none; }
.verdict {
  padding: clamp(20px, 2.2vw, 28px); border-radius: 12px;
  background: var(--pkg); box-shadow: inset 0 0 0 1.5px var(--rule), 0 14px 30px -24px rgba(var(--shade), .5);
}
.verdict h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--wide); font-size: 1.08rem; font-weight: 600; }
.verdict p { margin: 0; color: var(--ink-2); line-height: 1.6; font-size: .98rem; }
.fail {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px currentColor; color: var(--risk-high);
  font-family: var(--wide); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.fail::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.callout { margin: clamp(26px, 3vw, 40px) 0 0; max-width: 72ch; padding-left: 22px; border-left: 3px solid var(--glow); color: var(--ink-2); line-height: 1.6; }
.callout strong { color: var(--silk); }

/* class structure, as parts joined by traces */
.arch { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.arch li { position: relative; padding: 16px 18px; border-radius: 10px; background: var(--pkg); box-shadow: inset 0 0 0 1.5px var(--silk); }
.arch li + li::before { content: ""; position: absolute; left: 28px; top: -23px; width: 2px; height: 22px; background: var(--mask-deep); }
.arch h3 { margin: 0 0 4px; font-family: var(--wide); font-size: 1rem; font-weight: 600; }
.arch p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.review { display: grid; gap: 18px; margin: 0; }
.review blockquote { margin: 0; padding-left: 20px; border-left: 3px solid var(--glow); font-size: 1.08rem; line-height: 1.55; color: var(--ink-2); }

/* the buggy's demo video */
.video { margin: 0; border-radius: 14px; overflow: hidden; background: #05070A; box-shadow: 0 24px 48px -28px rgba(var(--shade), .7); }
.video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #05070A; }

/* the 3D optics, turning in a window cut through the board */
.model { margin: 0; }
.model-stage {
  position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: var(--hole-bg);
  box-shadow: inset 0 3px 10px -4px var(--wall), inset 0 0 0 1px var(--wall), inset 0 14px 26px -22px rgba(0, 0, 0, .4);
  touch-action: pan-y;
}
@media (min-width: 901px) { .model-stage { min-height: 300px; } }
.model-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.model-fallback { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; transition: opacity .5s var(--ease-out); }
.model-stage.has3d .model-fallback { opacity: 0; }
.model-note {
  position: absolute; left: 16px; top: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--wide); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #E6F6FD;
}
.model .viewer-tabs { margin-top: 18px; }

/* the interactive strategy chart: a trading screen set into the board */
.tv { margin: 0; border-radius: 16px; overflow: hidden; background: #0E131A; color: #E6EDF3; box-shadow: 0 30px 60px -32px rgba(var(--shade), .75); }
.tv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 26px) 0; }
.tv-name { margin: 0; font-family: var(--wide); font-size: clamp(1.02rem, .9rem + .5vw, 1.3rem); font-weight: 600; }
.tv-desc { margin: 6px 0 0; max-width: 62ch; font-size: .92rem; line-height: 1.5; color: #9FB0C1; }
.tv-badge { flex: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--wide); font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9FB0C1; white-space: nowrap; }
.tv-switch { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px clamp(18px, 2.4vw, 26px); }
.tv-switch button {
  min-height: 38px; padding: 0 14px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px rgba(230, 237, 243, .16);
  font: inherit; font-size: .86rem; font-weight: 550; color: #9FB0C1;
  transition: color .2s, box-shadow .2s, background-color .2s;
}
.tv-switch button:hover { color: #E6EDF3; box-shadow: inset 0 0 0 1.5px rgba(230, 237, 243, .4); }
.tv-switch button[aria-pressed="true"] { color: #0E131A; background: #5ECFF9; box-shadow: none; }
.tv-stage { position: relative; padding: 0 clamp(6px, 1.2vw, 14px) 14px; }
#tvCanvas { display: block; width: 100%; height: clamp(300px, 42vw, 470px); }
.tv-tip {
  position: absolute; z-index: 2; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  padding: 8px 10px; border-radius: 8px; background: rgba(8, 11, 15, .9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(230, 237, 243, .14);
  font-size: .74rem; line-height: 1.55; color: #E6EDF3; font-variant-numeric: tabular-nums;
}
.tv-tip b { font-weight: 500; color: #7D90A5; }
.tv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 26px; margin: 0 clamp(18px, 2.4vw, 26px); padding: 18px 0 22px; border-top: 1px solid rgba(230, 237, 243, .1); }
.tv-stats { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.tv-stat { display: grid; gap: 4px; }
.tv-stat span, .tv-eq span { font-family: var(--wide); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7D90A5; }
.tv-stat b { font-family: var(--wide); font-size: 1.2rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.tv-stat b.pos { color: #2BBE8C; }
.tv-stat b.neg { color: #E0566A; }
.tv-eq { display: grid; gap: 6px; }
#tvEq { display: block; width: 190px; height: 56px; }

/* write-ups still in progress */
.stub { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 64px); align-items: start; margin-top: clamp(44px, 5vw, 72px); }
.stub-art {
  display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 14px;
  background: var(--pkg); box-shadow: inset 0 0 0 1.5px var(--silk), 0 22px 44px -30px rgba(var(--shade), .55);
}
.stub-art { position: relative; overflow: hidden; }
.stub-art img { width: 100%; height: 100%; object-fit: cover; }
.stub-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--silk); pointer-events: none; }
.case-hero .stub-art { aspect-ratio: 16 / 7; }      /* a write-up opens with a wide cut of its picture */
.stub-meta { display: grid; gap: 16px; margin: 0; }
.stub-meta div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 12px; align-items: baseline; }
.stub-meta dt { font-size: .9rem; color: var(--ink-3); }
.stub-meta dd { margin: 0; font-weight: 500; }
.stub-quote { margin: clamp(30px, 3.4vw, 44px) 0 0; }
.stub-quote blockquote { margin: 0; }
.stub-quote p { margin: 0; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.45; letter-spacing: -.01em; }
.stub-quote figcaption { margin-top: 14px; font-size: .92rem; color: var(--ink-3); }
.stub-note { display: flex; align-items: flex-start; gap: 12px; margin: clamp(30px, 3.4vw, 44px) 0 0; color: var(--ink-2); }
.stub-note .led { margin-top: .62em; }
.stub-cta { margin-top: 26px; }

/* honeycomb bands on the case studies */
.perf--band { --hex: m; height: clamp(90px, 7.4vw, 116px); margin: clamp(90px, 10vw, 140px) var(--pad) 0; }
.perf--band + .case-next { margin-top: clamp(48px, 5.6vw, 72px); }
.perf--band-head { display: none; }
@media (max-width: 1099px) {
  .perf--band-head { display: block; height: clamp(70px, 12vw, 96px); margin: clamp(36px, 6vw, 56px) 0 0; }
}

/* previous and next project */
.case-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: clamp(100px, 11vw, 160px) var(--pad) 0; }
.next-link {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 10px; padding: clamp(22px, 2.6vw, 30px);
  border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--silk);
  text-decoration: none; transition: color .35s var(--ease-out);
}
.next-link::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--silk);
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out);
}
.next-link:hover { color: var(--mask); }
.next-link:hover::before { transform: scaleX(1); transform-origin: left; }
.next-link--next { text-align: right; }
.next-link--next::before { transform-origin: left; }
.next-link--next:hover::before { transform-origin: right; }
.next-dir { font-family: var(--wide); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); transition: color .35s var(--ease-out); }
.next-link:hover .next-dir { color: inherit; }
.next-title { font-family: var(--wide); font-weight: 570; font-size: clamp(1.18rem, 1rem + .9vw, 1.7rem); line-height: 1.12; letter-spacing: -.02em; }
.case-page .foot { margin-top: clamp(80px, 9vw, 130px); }

/* the image viewer */
.lb {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: clamp(56px, 7vw, 90px) clamp(12px, 6vw, 90px);
  background: rgba(7, 9, 12, .74);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.lb[hidden] { display: none; }
.lb.is-on { opacity: 1; }
.lb-img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85); transform: scale(.97); transition: transform .5s var(--ease-out); }
.lb.is-on .lb-img { transform: none; }
.lb-cap { position: absolute; left: 50%; bottom: clamp(14px, 2.4vw, 28px); transform: translateX(-50%); width: min(90%, 60ch); margin: 0; text-align: center; font-size: .9rem; color: rgba(236, 242, 246, .8); }
.lb-btn {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(236, 242, 246, .1); color: #ECF2F6; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(236, 242, 246, .18);
  transition: background-color .2s var(--ease-out), transform .15s var(--ease-out);
}
.lb-btn:hover { background: rgba(236, 242, 246, .2); }
.lb-btn:active { transform: scale(.93); }
.lb-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-close { top: clamp(10px, 2vw, 24px); right: clamp(10px, 2vw, 24px); }
.lb-prev, .lb-next { top: 50%; margin-top: -24px; }
.lb-prev { left: clamp(8px, 2vw, 24px); }
.lb-next { right: clamp(8px, 2vw, 24px); }

@media (max-width: 900px) {
  .case-cols, .verdicts, .stub { grid-template-columns: minmax(0, 1fr); }
  .pipeline { flex-direction: column; align-items: flex-start; }
  .pipeline li { flex-direction: column; align-items: flex-start; }
  .pipeline li + li::before { width: 2px; height: 18px; margin-left: 22px; }
  @media (prefers-reduced-motion: no-preference) {
    .pipeline.is-live li + li::before {
      background: linear-gradient(180deg, transparent, rgba(94, 207, 249, .95), transparent) 0 -18px / 100% 18px no-repeat, var(--hasl);
      animation-name: tp-flow-v;
    }
  }
  .model-stage { aspect-ratio: 1 / 1; }
  .tv-head { flex-direction: column; }
}
@media (max-width: 700px) {
  /* a wide table becomes one card per row on a phone */
  .table-wrap { overflow: visible; }
  table.data { min-width: 0; }
  .data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data, .data tbody, .data tr { display: block; }
  .data tr { padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .data tr:first-child { border-top: 1.5px solid var(--silk); }
  .data td { display: inline-flex; align-items: baseline; gap: 6px; margin: 8px 16px 0 0; padding: 0; border: 0; text-align: left; }
  .data td::before { content: attr(data-l); font-family: var(--wide); font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .data td:first-child { display: block; margin: 0 0 4px; font-size: 1.02rem; }
  .data td:first-child::before { content: none; }
  .case-next { grid-template-columns: minmax(0, 1fr); }
  .next-link--next { text-align: left; }
  .stub-meta div { grid-template-columns: 5rem minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1099px) {
  .tps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .tp:nth-child(2)::after { display: none; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-tools { margin-left: auto; }
  .menu-open { display: inline-flex; }
  .mhole { display: none; }
  .logo { font-size: 1.32rem; }

  .hero {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    min-height: 0; padding-top: clamp(24px, 8vw, 56px);
  }
  .hero-copy { grid-column: 1 / -1; padding-right: 0; }
  .perf--hero { --hex: m; grid-column: 1; grid-row: 2; width: auto; margin: 40px 0 0; }
  .perf--foot { margin-inline: 0; }
  .brand-lock { grid-column: 2; grid-row: 2; margin-top: 40px; }
  .tag-v { font-size: .56rem; letter-spacing: .1em; }
  .brand-v { font-size: clamp(3rem, 15vw, 4.8rem); }

  .chip { grid-template-columns: minmax(0, 1fr); }

  .hardware { grid-template-columns: minmax(0, 1fr); }
  .viewer-stage { aspect-ratio: 1 / 1; }

  .panel-count { min-width: 0; }
  .arrow { width: 46px; height: 46px; }
  .pcb { width: min(78vw, 300px); }

  .tps { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-left: 50px; }
  .tp:not(:last-child)::after, .tp:nth-child(2)::after { display: block; left: -42px; right: auto; top: 20px; bottom: -34px; width: 4px; height: auto; }
  .tp-pad { position: absolute; left: -50px; top: 0; }
  .tp h3 { margin-top: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .tps.is-in.is-live .tp:not(:last-child)::after {
      background:
        linear-gradient(180deg, transparent, rgba(94, 207, 249, .95), transparent) 0 -48px / 100% 48px no-repeat,
        var(--mask-deep);
      animation-name: tp-flow-v;
    }
  }

  .boms { grid-template-columns: minmax(0, 1fr); }
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .contact { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "kit"; grid-template-rows: auto; }
  .enquiry { margin-top: clamp(44px, 8vw, 60px); }
  .contact .kit { margin-top: 40px; }
}

/* ---------------------------------------------------------------- circuit rows */

/* A row of printed circuits before a section. The slot is an ordinary box in the page, so the row
   is exactly as wide as the text and as tall as this says at every width; main.js lays the circuits
   into it, scaled to its height, and reflows them when it changes. */
.kit { height: clamp(142px, 86px + 4.6vw, 178px); margin: clamp(22px, 2.4vw, 38px) var(--pad) 0; pointer-events: none; }
main > .kit + section { padding-top: clamp(26px, 2.8vw, 44px); }
.case .kit { margin-inline: 0; }
.case .kit + .case-sec { margin-top: clamp(26px, 2.8vw, 44px); }
/* a phone stacks a row's circuits two lines deep, so those rows are taller there */
@media (max-width: 576px) {
  .kit[data-kit="link"] { height: 224px; }             /* the transmitter above the receiver, the fibre looping round */
}
@media (max-width: 480px) {
  .kit[data-kit="power"] { height: 196px; }
  .kit[data-kit="sense"] { height: 224px; }
  .kit[data-kit="output"] { height: 218px; }
  .kit[data-kit="battery"] { height: 190px; }
}
@media (max-width: 900px) {
  .tp-ref { left: -27px; top: 28px; writing-mode: vertical-rl; }
}

@media (max-width: 420px) {
  .hero-h { font-size: clamp(2rem, .9rem + 5.6vw, 2.45rem); }
  .pwr-label { display: none; }
  .direct > div { grid-template-columns: 4.2rem minmax(0, 1fr); padding-left: 62px; }
  .quote-mark { height: 58px; }
  .mark--mh, .mark--spoton { height: 58px; }
  .mark--shc { height: 44px; }
  .mark--onway { height: 27px; }
}

@media (hover: none) {
  .hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}