/* ===== NCRepairBench — base / nav / subpages ===== */
:root{
  --ink:#1e293b;
  --ink-soft:#55657a;
  --bg:#eef1f5;
  --card:#ffffff;
  --accent:#0e7490;
  --accent-hi:#06b6d4;
  --line:#dde3ea;
  --wood:#e8d9bf;
  --wood-dark:#d3bd97;
  --steel:#c8d0d8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  /* branded, subtle tap flash on touch devices instead of the gray default */
  -webkit-tap-highlight-color:rgba(14,116,144,.14);
}
body.home{background:#e6ebf1}

/* ---------- top nav ---------- */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;row-gap:8px;
  padding:14px 28px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.brand{
  font-size:1.15rem;font-weight:800;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px;
}
.brand span:not(.brand-mark){color:var(--accent)}
.brand-mark{
  width:22px;height:22px;border-radius:6px;
  background:linear-gradient(135deg,var(--accent-hi),var(--accent));
  box-shadow:0 2px 6px rgba(14,116,144,.4);
  position:relative;
}
.brand-mark::after{
  content:"";position:absolute;inset:6px 5px 9px 5px;
  border:2px solid #fff;border-bottom:none;border-radius:3px 3px 0 0;
}
.topnav-links{display:flex;flex-wrap:wrap;gap:6px}
.topnav-links a{
  color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:.9rem;
  padding:7px 13px;border-radius:8px;transition:all .2s;
}
.topnav-links a:hover,.topnav-links a.active{color:var(--accent);background:rgba(14,116,144,.08)}

/* hamburger toggle (CSS-only checkbox pattern; shown <=860px, see below).
   DOM order in every nav: .brand, input.nav-check, label.nav-burger,
   .topnav-links — the input must precede both for the ~ selectors to work. */
.nav-check{display:none}
.nav-burger{display:none}

/* ---------- footer ---------- */
.site-footer{
  position:relative;z-index:5;
  background:#132030;color:#c4d0dd;
  padding:56px 28px 40px;
}
.foot-inner{max-width:1000px;margin:0 auto;display:grid;gap:22px}
.foot-inner strong{color:#fff;font-size:1.2rem}
.foot-inner p{color:#8ea1b5;margin-top:4px}
.foot-links{display:flex;flex-wrap:wrap;gap:18px}
.foot-links a{color:#c4d0dd;text-decoration:none;font-weight:600;font-size:.92rem}
.foot-links a:hover{color:#4dd0e1}
.copy{font-size:.82rem;border-top:1px solid rgba(255,255,255,.1);padding-top:18px}

/* ---------- subpages ---------- */
.subpage main{max-width:1000px;margin:0 auto;padding:120px 24px 70px}
.page-hero{display:flex;align-items:center;gap:22px;margin-bottom:14px}
.page-hero .icon-chip{
  width:72px;height:72px;flex:none;border-radius:20px;
  background:linear-gradient(135deg,var(--accent-hi),var(--accent));
  display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(14,116,144,.35);
}
.page-hero .icon-chip svg{width:38px;height:38px;fill:#fff}
.page-hero h1{font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:-.01em}
.page-hero .kicker{color:var(--accent);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.12em}
.lead{font-size:1.08rem;color:var(--ink-soft);max-width:62ch;margin:10px 0 36px}

.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-bottom:44px}
.svc-card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:20px 20px 18px;
  box-shadow:0 2px 10px rgba(20,40,60,.05);
  transition:transform .2s,box-shadow .2s;
}
.svc-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(20,40,60,.1)}
.svc-card h3{font-size:1.02rem;margin-bottom:6px}
.svc-card p{font-size:.9rem;color:var(--ink-soft);line-height:1.5}
.svc-card .price{display:inline-block;margin-top:10px;font-weight:800;color:var(--accent);font-size:.92rem}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:48px}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.step b{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.9rem;margin-bottom:10px;
}
.step h4{font-size:.95rem;margin-bottom:4px}
.step p{font-size:.85rem;color:var(--ink-soft);line-height:1.45}

.cta{
  background:linear-gradient(135deg,#0e7490,#155e75);
  color:#fff;border-radius:18px;padding:34px 30px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  box-shadow:0 16px 40px rgba(14,116,144,.3);
}
.cta h2{font-size:1.35rem}
/* was opacity:.85, which computed to 4.35:1 against the light end of the
   gradient (#0e7490) and failed WCAG AA. A solid tint measures 4.86:1. */
.cta p{color:#eaf6f9;margin-top:4px;font-size:.95rem}
.cta .btn{
  background:#fff;color:var(--accent);font-weight:800;text-decoration:none;
  padding:13px 26px;border-radius:12px;white-space:nowrap;transition:transform .2s;
}
.cta .btn:hover{transform:scale(1.05)}

h2.sec{font-size:1.25rem;margin:0 0 16px}

/* highlighted "Book a Repair" nav link */
.topnav-links a.nav-cta{
  color:#fff;background:linear-gradient(135deg,var(--accent-hi),var(--accent));
  box-shadow:0 4px 12px rgba(14,116,144,.3);
}
.topnav-links a.nav-cta:hover{color:#fff;filter:brightness(1.06)}

/* mail-in / drop-off notice strip */
.method-note{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:rgba(14,116,144,.07);border:1px solid rgba(14,116,144,.18);
  border-radius:12px;padding:12px 16px;margin:0 0 30px;
  font-size:.9rem;color:var(--ink);
}
.method-note strong{color:var(--accent)}

/* ---------- repair request form ---------- */
.form-wrap{display:grid;grid-template-columns:1.35fr .85fr;gap:26px;align-items:start;margin-bottom:44px}
.repair-form{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 24px;box-shadow:0 2px 12px rgba(20,40,60,.06)}
.repair-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;margin-bottom:16px}
.field label{font-size:.82rem;font-weight:700;color:var(--ink);margin-bottom:6px}
.field .req{color:#c0392b}
.field input,.field select,.field textarea{
  font:inherit;font-size:.92rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent-hi);box-shadow:0 0 0 3px rgba(6,182,212,.15);
}
.field textarea{min-height:120px;resize:vertical}
.method-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.method{position:relative;border:1px solid var(--line);border-radius:12px;padding:14px 14px 13px;cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s}
.method input{position:absolute;top:12px;right:12px}
.method h4{font-size:.92rem;margin-bottom:2px}
.method p{font-size:.78rem;color:var(--ink-soft);line-height:1.4}
.method.sel,.method:has(input:checked){
  border-color:var(--accent);background:rgba(14,116,144,.06);box-shadow:0 0 0 2px rgba(14,116,144,.25)}
.form-submit{
  margin-top:4px;display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#0e7490,#155e75);color:#fff;font-weight:800;
  border:none;border-radius:12px;padding:14px 28px;font-size:.98rem;cursor:pointer;
  transition:transform .15s,box-shadow .15s;box-shadow:0 10px 24px rgba(14,116,144,.3)}
.form-submit:hover{transform:translateY(-2px)}
.form-note{font-size:.8rem;color:var(--ink-soft);margin-top:12px}
.form-ok{
  display:none;background:#e7f7ef;border:1px solid #b6e5cd;color:#1a7a4d;
  border-radius:12px;padding:16px 18px;font-size:.92rem;line-height:1.5;margin-bottom:20px}
.form-ok.show{display:block}
.form-ok a{color:#0e7490;font-weight:700}
.aside-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;
  box-shadow:0 2px 12px rgba(20,40,60,.06)}
.aside-card + .aside-card{margin-top:18px}
.aside-card h3{font-size:1rem;margin-bottom:8px}
.aside-card p{font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.aside-card address{font-style:normal;font-size:.9rem;color:var(--ink);line-height:1.55;margin-top:6px}
.aside-card .muted{font-size:.8rem;color:var(--ink-soft);margin-top:8px}

/* =========================================================================
   RESPONSIVE — the layout should read well from a 320px phone up to an
   ultrawide monitor. The 3D bench scales itself in bench.js (fit()); these
   rules cover the flat page chrome: nav, subpage content, grids and the form.
   Breakpoints, largest to smallest, each only tightening the previous.
   ========================================================================= */

/* form: side-by-side aside -> stacked */
@media (max-width:820px){
  .form-wrap{grid-template-columns:1fr}
}

/* ultrawide: let long-form pages use a little more of the width */
@media (min-width:1500px){
  .subpage main{max-width:1120px}
}

/* tablets / large phones: links collapse into a hamburger dropdown. The nav
   stays one slim row, so subpages need far less top padding than the old
   two-row wrap did. */
@media (max-width:860px){
  .topnav{padding:10px 16px}
  .nav-burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:40px;padding:0 10px;cursor:pointer;
    border:1px solid var(--line);border-radius:10px;background:#fff;
  }
  .nav-burger span{
    display:block;height:2px;border-radius:2px;background:var(--ink);
    transition:transform .25s,opacity .2s;
  }
  .nav-check:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-check:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-check:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .topnav-links{
    display:none;width:100%;flex-direction:column;align-items:stretch;gap:4px;
    padding:10px 2px 6px;margin-top:9px;border-top:1px solid var(--line);
  }
  .nav-check:checked ~ .topnav-links{display:flex}
  .topnav-links a{padding:12px 14px;font-size:.95rem;border-radius:10px}
  .topnav-links a:active{background:rgba(14,116,144,.12)}
  .topnav-links a.nav-cta{text-align:center;margin-top:4px}
  .subpage main{padding-top:100px}
}

/* phones */
@media (max-width:560px){
  .topnav{padding:8px 12px}
  .brand{font-size:1rem;gap:7px}
  .brand-mark{width:18px;height:18px}
  .subpage main{padding:92px 18px 60px}
  /* 16px inputs stop iOS Safari auto-zooming the page on focus */
  .field input,.field select,.field textarea{font-size:16px}
  /* store reads like a shop: two compact cards per row (main-qualified so this
     beats the base .store-grid rule that appears later in the file) */
  main .store-grid{grid-template-columns:1fr 1fr;gap:12px}
  .product-thumb{height:112px}
  .product-body{padding:12px 12px 14px}
  .product-body h3{font-size:.92rem}
  .product-body .spec{font-size:.78rem;margin-bottom:10px}
  .product-foot{flex-wrap:wrap;gap:8px}
  .product-foot .price{font-size:1rem}
  .product-foot .buy{padding:8px 12px;font-size:.76rem}
  .page-hero{gap:14px}
  .page-hero .icon-chip{width:56px;height:56px;border-radius:16px}
  .page-hero .icon-chip svg{width:30px;height:30px}
  .lead{font-size:1rem}
  .cta{padding:26px 22px;flex-direction:column;align-items:flex-start}
  .cta .btn{width:100%;text-align:center}
  .hero .hero-sub{font-size:.8rem}
  .repair-form .row{grid-template-columns:1fr}
}

/* small phones: single-column grids, tighter type (store stays 2-up above
   360px so it keeps its shop feel) */
@media (max-width:400px){
  .subpage main{padding-left:14px;padding-right:14px}
  .svc-grid,.steps{grid-template-columns:1fr}
  .page-hero h1{font-size:1.5rem}
}
@media (max-width:360px){
  main .store-grid{grid-template-columns:1fr}
}

/* ---------- store: refurbished electronics ---------- */
.store-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;margin-bottom:40px;
}
.product-card{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:0 2px 10px rgba(20,40,60,.05);
  transition:transform .2s,box-shadow .2s;
}
.product-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(20,40,60,.12)}
.product-thumb{
  position:relative;height:150px;display:grid;place-items:center;
  background:linear-gradient(135deg,#eef3f7,#dbe4ec);border-bottom:1px solid var(--line);
}
.product-thumb svg{width:76px;height:76px;fill:none;stroke:#5b7085;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.product-badge{
  position:absolute;top:10px;left:10px;
  font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:#0a6b4f;background:#d6f5e6;border:1px solid #a9e6c9;border-radius:20px;padding:4px 10px;
}
.product-badge.b-fair{color:#8a5a12;background:#fbeecd;border-color:#f0d79a}
.product-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.product-body h3{font-size:1.02rem;margin-bottom:4px}
.product-body .spec{font-size:.85rem;color:var(--ink-soft);line-height:1.5;margin-bottom:14px;flex:1}
.product-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.product-foot .price{font-weight:800;color:var(--accent);font-size:1.12rem}
.product-foot .buy{
  font-size:.82rem;font-weight:700;color:#fff;text-decoration:none;white-space:nowrap;
  background:linear-gradient(135deg,var(--accent-hi),var(--accent));
  padding:9px 15px;border-radius:10px;transition:transform .15s;
}
.product-foot .buy:hover{transform:scale(1.05)}
.store-cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.store-cats:empty{display:none}
.store-cats span{
  font-size:.82rem;font-weight:700;color:var(--ink-soft);
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 14px;
}
/* product photo (from the sheet) fills the thumb; icon fallback stays centered */
.product-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.product-thumb.no-img{background:linear-gradient(135deg,#eef3f7,#dbe4ec)}
/* in-stock count / sold-out chip, bottom-right of the photo */
.stock{
  position:absolute;right:10px;bottom:10px;
  font-size:.68rem;font-weight:800;letter-spacing:.02em;
  color:#25526a;background:rgba(255,255,255,.9);border:1px solid var(--line);
  border-radius:20px;padding:3px 9px;backdrop-filter:blur(2px);
}
.stock.out{color:#8a2b2b;background:rgba(255,236,236,.92);border-color:#f0c2c2}
/* sold-out cards read muted, and the button is disabled */
.product-card.sold-out{opacity:.72}
.product-card.sold-out .product-thumb{filter:grayscale(.5)}
.product-foot .buy.disabled{
  /* #8a97a5 measured 2.48:1 on #e6ebf0; #5a6572 measures 4.95:1. The grey
     fill and the not-allowed cursor still read as disabled. */
  background:#e6ebf0;color:#5a6572;cursor:not-allowed;pointer-events:none;
}
/* live/sample status line under the category chips */
.store-status{font-size:.85rem;color:var(--ink-soft);margin:0 0 20px}
.store-status:empty{display:none}
.store-empty{
  grid-column:1/-1;font-size:.95rem;color:var(--ink-soft);
  background:#fff;border:1px dashed var(--line);border-radius:14px;padding:26px 22px;text-align:center;
}
.store-empty a{color:var(--accent);font-weight:700}

/* =========================================================================
   v0.0.13 — CSP-safe utilities, focus, form state, 404 page
   -------------------------------------------------------------------------
   The site is served under a strict CSP: style-src 'self' with no
   'unsafe-inline'. Static pages get no nonce, so there can be no <style>
   blocks and no style="" attributes anywhere. Everything that used to be an
   inline style lives here as a class instead.

   NOTHING IN THIS SECTION MAY TOUCH THE 3D SCENE. No rule below names
   .stage, .scale, .scene, .drawer, .folders or .folder, and none of them
   introduces overflow, opacity or filter on a preserve-3d ancestor. Scene
   styling stays in bench.css / bench-items.css.
   ========================================================================= */

/* ---------- visually hidden ----------
   Hides content from sight while leaving it in the layout, in the a11y tree
   and, critically, still fillable. Used for:
     1. the spam honeypot wrapper on the repair form. A bot that renders CSS
        skips display:none and visibility:hidden fields, so neither of those
        can be used here. The clip-rect pattern keeps the input "real".
     2. off-screen labels and status text for screen readers.
   Do not add display:none or visibility:hidden to this rule. */
.vh,
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- skip to content ----------
   Markup: first element inside <body>:
     <a class="skip" href="#main">Skip to content</a>
   and the target is <main id="main" tabindex="-1">.
   Off-screen until it takes focus, then pinned top-left over the fixed nav.
   :focus (not :focus-visible) so it appears for every keyboard user. */
.skip{
  position:fixed;top:0;left:12px;z-index:100;
  transform:translateY(-120%);
  background:#fff;color:var(--accent);
  font-weight:800;font-size:.95rem;text-decoration:none;
  padding:12px 20px;border:2px solid var(--accent);border-top:none;
  border-radius:0 0 10px 10px;
  box-shadow:0 6px 18px rgba(20,40,60,.22);
  transition:transform .15s;
}
.skip:focus{transform:translateY(0)}
/* the skip target is focused programmatically; no ring needed for that */
main:focus:not(:focus-visible){outline:none}

/* ---------- focus-visible ----------
   Keyboard users could not see where they were: only form controls had a
   focus style. This covers every interactive element. Accent on the page
   background measures 4.73:1, well over the 3:1 non-text minimum. */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}
/* form controls keep their own inset ring (see .field ... :focus above) and
   add the outline on top, so they read the same as everything else */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}
/* on the dark footer and the teal CTA panel, the accent ring is too close to
   the background. White measures 16.4:1 on the footer and 5.36:1 on the CTA. */
.site-footer a:focus-visible,
.cta a:focus-visible{outline-color:#fff}
/* Inert today. If the nav agent drops aria-hidden from #navMenu and swaps
   .nav-check{display:none} for the .vh pattern, the checkbox becomes
   keyboard reachable and this gives the burger it controls a visible ring. */
.nav-check:focus-visible ~ .nav-burger{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- CTA link ----------
   Replaces style="color:#fff;text-decoration:underline" on the six service /
   store CTA links. The white pill button in the same panel is unaffected:
   .cta .btn scores (0,2,0) against this rule's (0,1,1), so it keeps its own
   accent-on-white colours no matter which order the two appear in. */
.cta a{color:#fff;text-decoration:underline}
.cta a:hover{text-decoration-thickness:2px}

/* ---------- form state ----------
   Per-field validation messages come back from POST /api/repair-request as
   400 { error, fields:{ name:"...", email:"..." } } and get written into the
   .field-error slot for the matching field. */
.field-error{
  display:block;margin-top:6px;
  font-size:.82rem;font-weight:600;line-height:1.4;
  /* #b3261e measures 6.54:1 on the white form panel and 5.77:1 on the page
     background. The message never relies on colour alone: it sits under the
     field it belongs to and is wired up with aria-describedby. */
  color:#b3261e;
}
.field-error:empty{display:none}
.field.has-error label{color:#b3261e}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color:#b3261e;
  background:#fff7f6;
}
.field.has-error input:focus,
.field.has-error select:focus,
.field.has-error textarea:focus{
  border-color:#b3261e;
  box-shadow:0 0 0 3px rgba(179,38,30,.18);
}

/* Success panel. Put the `hidden` attribute on it in the markup; reveal it by
   removing `hidden` OR by adding .show - both work, so it does not matter
   which idiom the form script uses. Give it role="status" so the ticket
   number is announced. */
.form-success{
  background:#e7f7ef;border:1px solid #b6e5cd;color:#12633d;
  border-radius:16px;padding:24px 22px;margin-bottom:22px;
  font-size:.95rem;line-height:1.55;
}
.form-success[hidden]{display:none}
.form-success[hidden].show{display:block}
.form-success h2,.form-success h3{font-size:1.15rem;margin-bottom:6px;color:#0f5c39}
.form-success p{margin-top:10px}
.form-success a{color:#0e7490;font-weight:700}

/* The ticket number is the single most important thing a customer reads on
   this site. They write it down off the screen, so: big, monospace, spaced,
   and 11.7:1 against white. user-select:all makes one click grab all of it. */
.ticket-label{
  display:block;
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);
}
.ticket-number{
  display:block;
  font-family:Consolas,"Cascadia Mono","SFMono-Regular",Menlo,"Liberation Mono",monospace;
  font-size:clamp(2.1rem,7vw,3.1rem);
  font-weight:700;line-height:1.15;
  letter-spacing:.14em;
  /* letter-spacing adds a trailing gap; the indent puts it back on centre */
  text-indent:.14em;
  text-align:center;
  color:#0b3d4d;
  background:#fff;
  border:2px solid var(--accent);border-radius:14px;
  padding:16px 14px;margin:10px 0 4px;
  user-select:all;-webkit-user-select:all;
}

/* ---------- 404 ---------- */
.err-code{
  font-family:Consolas,"Cascadia Mono","SFMono-Regular",Menlo,"Liberation Mono",monospace;
  font-size:.85rem;font-weight:700;letter-spacing:.18em;
  color:var(--accent);
}
.link-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin:0 0 40px;padding:0;list-style:none;
}
.link-list a{
  display:block;height:100%;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;text-decoration:none;
  color:var(--ink);font-weight:700;font-size:.95rem;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.link-list a:hover{
  border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(20,40,60,.1);
}
.link-list a span{
  display:block;margin-top:3px;
  font-weight:500;font-size:.84rem;color:var(--ink-soft);line-height:1.45;
}

/* ---------- reduced motion ----------
   Every transition and hover transform site.css owns, switched off. Named
   selectors rather than a * rule on purpose: a universal !important override
   would reach into the 3D scene, which owns its own reduced-motion handling
   in bench.css and must not be touched from here. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .topnav-links a,
  .nav-burger span,
  .svc-card,
  .cta .btn,
  .field input,.field select,.field textarea,
  .method,
  .form-submit,
  .product-card,
  .product-foot .buy,
  .link-list a,
  .skip{transition:none}
  .svc-card:hover,
  .product-card:hover,
  .cta .btn:hover,
  .form-submit:hover,
  .product-foot .buy:hover,
  .link-list a:hover{transform:none}
  .skip:focus{transform:translateY(0)}
}