/* self-hosted fonts — generated by tools/_fonts-fetch.mjs; latin subset only */
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/geist-400-700-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/geist-mono-400-600-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ═══════════════════════════════════════════════════════════════════════════
   SkyLap v3 — "precision repair lab + premium laptop showroom"
   Warm paper for reading · graphite for product moments · orange = action · green = WhatsApp only
   Type: Geist (display + text), Geist Mono (labels, numerals). Self-hosted, no third-party requests.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══ THEMES ═══
   Light is the "warm studio" direction the owner picked (B): cream ground, warm ink, soft rounded
   cards. Dark is the "precision dark" direction (A): near-black lab, crisp borders, one hot orange.
   Both are the same markup; only these tokens and a handful of flourishes differ.

   Every colour a component uses must come from a token here. A literal #fff on a card background
   is what breaks a dark theme: the card stays white on a black page.

   Light is the default. Dark applies when the visitor chose it with the header switch, or when
   their device is set to dark and they have not chosen. */
:root {
  color-scheme: light;
  --paper: #FBF6EE; --paper-2: #F4ECDF; --paper-3: #EAE0D0;
  --surface: #FFFFFF;                 /* cards, form fields, tables */
  --plate: #FFFFFF;                   /* the white plate behind product photos, same in both themes */
  --on-plate: #585E66;                /* text on that plate: fixed, because the plate never changes */
  --ink: #1B1712; --ink-2: #5A5147; --ink-3: #685E53;
  --on-ink: #FFFFFF;                  /* text on an ink-filled chip or pressed button */
  --line: rgba(64, 42, 14, .12); --line-2: rgba(64, 42, 14, .22);
  --graphite: #1B1712; --graphite-2: #26211A; --graphite-3: #332C23; --g-line: rgba(255, 255, 255, .11); --g-text: #F4EEE5; --g-muted: #C2B7A8;
  --orange: #E6801A; --orange-2: #CF6E0C; --orange-ink: #8A4A06; /* orange-ink: the only orange used as text on paper */
  --on-accent: #1A1208;              /* text on the orange button */
  --wa: #25D366; --wa-2: #1EBE5A;
  --note-warn: #FFF1E0;
  --shadow: 0 1px 2px rgba(64, 42, 14, .05), 0 10px 30px -18px rgba(64, 42, 14, .35);
  --shadow-lg: 0 40px 80px -40px rgba(64, 42, 14, .45);
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --r: 12px; --r-lg: 20px;
  --wrap: 1280px; --gut: 24px;
  --dock-h: 60px;
}
/* dark, chosen explicitly */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #08090B; --paper-2: #0E1013; --paper-3: #16191E;
  --surface: #111317;
  --plate: #FFFFFF;
  --ink: #ECEEF1; --ink-2: #AEB5BF; --ink-3: #9098A2;
  --on-ink: #0A0B0D;
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .17);
  --graphite: #0E1014; --graphite-2: #15181D; --graphite-3: #1D2127; --g-line: rgba(255, 255, 255, .09); --g-text: #ECEEF1; --g-muted: #A2A9B3;
  --orange: #F59023; --orange-2: #FFA23D; --orange-ink: #FFB15C;
  --on-accent: #0A0B0D;
  --note-warn: rgba(245, 144, 35, .1);
  --shadow: 0 0 0 1px rgba(255, 255, 255, .06);
  --shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, .8);
  --r: 8px; --r-lg: 14px;
}
/* dark, from the device setting, unless the visitor chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #08090B; --paper-2: #0E1013; --paper-3: #16191E;
    --surface: #111317;
    --plate: #FFFFFF;
    --ink: #ECEEF1; --ink-2: #AEB5BF; --ink-3: #9098A2;
    --on-ink: #0A0B0D;
    --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .17);
    --graphite: #0E1014; --graphite-2: #15181D; --graphite-3: #1D2127; --g-line: rgba(255, 255, 255, .09); --g-text: #ECEEF1; --g-muted: #A2A9B3;
    --orange: #F59023; --orange-2: #FFA23D; --orange-ink: #FFB15C;
    --on-accent: #0A0B0D;
    --note-warn: rgba(245, 144, 35, .1);
    --shadow: 0 0 0 1px rgba(255, 255, 255, .06);
    --shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, .8);
    --r: 8px; --r-lg: 14px;
  }
}
@media (min-width: 1024px) { :root { --gut: 40px; } }
@media (min-width: 1700px) { :root { --wrap: 1380px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
@media (max-width: 640px) { body { font-size: 16px; padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); } }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(40px, 5.6vw, 84px); letter-spacing: -.035em; line-height: 1.02; }
h2 { font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -.03em; }
h3 { font-size: clamp(19px, 1.5vw, 22px); letter-spacing: -.015em; line-height: 1.25; }
p { margin: 0; }
.wrap { width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--on-ink); padding: 10px 14px; border-radius: var(--r); z-index: 100; }
.skip:focus { left: 8px; }
svg { width: 1em; height: 1em; flex: none; }

/* ── type utilities ── */
.eyebrow { font: 500 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.lead { font-size: clamp(17px, 1.25vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 56ch; }
.fine { font-size: 14px; color: var(--ink-3); line-height: 1.55; }
.fine a { color: var(--ink); }
.center { text-align: center; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 10px 0; min-height: 44px; border-bottom: 1px solid transparent; }
.text-link svg { width: 18px; height: 18px; transition: transform .25s ease; }
.text-link:hover { border-bottom-color: var(--ink); }
.text-link:hover svg { transform: translateX(4px); }
.sec-head { max-width: 62ch; margin-bottom: 40px; }
.sec-head p:not(.eyebrow) { margin-top: 14px; color: var(--ink-2); font-size: 18px; }
.sec-head.row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sec-head.row > div:first-child { max-width: 62ch; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: var(--r); font: 500 16px/1 var(--font); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .2s ease, border-color .2s ease, transform .15s ease; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn.lg { min-height: 54px; padding: 0 26px; font-size: 17px; }
.btn.sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.btn-primary { background: var(--orange); color: var(--on-accent); }
.btn-primary:hover { background: var(--orange-2); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-wa { background: var(--wa); color: var(--on-accent); }
.btn-wa:hover { background: var(--wa-2); }
.dark .btn-ghost, .shop .btn-ghost, .ft .btn-ghost { color: var(--g-text); border-color: var(--g-line); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

/* ═══ theme flourishes ═══ */
.cell, .rv, .quote, .aside-card, .qa, .diagram-card, .prod { box-shadow: var(--shadow); }
.hdr { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); }
body { background: var(--paper); transition: background-color .25s ease, color .25s ease; }

/* the switch in the header */
.theme-toggle { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--line-2);
  border-radius: var(--r); background: transparent; color: var(--ink); cursor: pointer; }
.theme-toggle:hover { background: var(--paper-2); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .ic-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .ic-moon { display: none; }
}

/* the logo file is dark on transparent; in dark mode it is flipped to white */
:root[data-theme="dark"] .logo img { filter: invert(1) hue-rotate(180deg) brightness(1.05); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo img { filter: invert(1) hue-rotate(180deg) brightness(1.05); } }

/* ── dark (A): the diagnostic lab ── */
:root[data-theme="dark"] .btn-primary { box-shadow: 0 0 0 1px var(--orange), 0 10px 36px -10px rgba(245, 144, 35, .6); }
:root[data-theme="dark"] .hero-board { background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; }
:root[data-theme="dark"] .hero-board .hero-display em { text-decoration: none; background: linear-gradient(90deg, #F59023, #FFC37A); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .hero-board h1.h1-kw { color: var(--orange-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary { box-shadow: 0 0 0 1px var(--orange), 0 10px 36px -10px rgba(245, 144, 35, .6); }
  :root:not([data-theme="light"]) .hero-board { background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; }
  :root:not([data-theme="light"]) .hero-board .hero-display em { text-decoration: none; background: linear-gradient(90deg, #F59023, #FFC37A); -webkit-background-clip: text; background-clip: text; color: transparent; }
  :root:not([data-theme="light"]) .hero-board h1.h1-kw { color: var(--orange-ink); }
}

/* ── light (B): the warm studio ── */
/* the board sits on a white card with a soft shadow in light mode, as in the warm-studio sample;
   the dark lab frame and its vignette belong to dark mode only */
:root:not([data-theme="dark"]) .board-photo { background: radial-gradient(90% 80% at 50% 40%, #FFFFFF, #F6EFE4 85%); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
:root:not([data-theme="dark"]) .board-photo .grain { display: none; }
:root:not([data-theme="dark"]) .board-photo img { filter: drop-shadow(0 22px 26px rgba(64, 42, 14, .28)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .board-photo { background: radial-gradient(120% 95% at 50% 18%, #2C3138, #12151A 72%); border: 0; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .75); }
  :root:not([data-theme="light"]) .board-photo .grain { display: block; }
  :root:not([data-theme="light"]) .board-photo img { filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .6)); }
}
:root:not([data-theme="dark"]) .btn-primary { box-shadow: 0 12px 26px -14px rgba(224, 123, 20, .8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary { box-shadow: 0 0 0 1px var(--orange), 0 10px 36px -10px rgba(245, 144, 35, .6); } }

/* ── header ── */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.hdr-in { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.logo img { height: 44px; width: auto; }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--ink-2); padding: 10px 12px; border-radius: var(--r); min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { color: var(--ink); background: var(--paper-2); }
.hdr-act { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hdr-tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 500 15px/1 var(--mono); color: var(--ink-2); padding: 10px 12px; min-height: 44px; border-radius: var(--r); }
.hdr-tel:hover { color: var(--ink); background: var(--paper-2); }
.hdr-tel svg { width: 17px; height: 17px; }
.mnav { display: none; position: relative; }
.mnav summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary svg { width: 22px; height: 22px; }
.mnav .ic-close, .mnav[open] .ic-open { display: none; }
.mnav[open] .ic-close { display: block; }
.sheet { position: fixed; left: 0; right: 0; top: 60px; bottom: 0; background: var(--paper); padding: 20px var(--gut) 32px; overflow: auto; border-top: 1px solid var(--line); }
.sheet nav { display: grid; }
.sheet nav a { text-decoration: none; font-size: 22px; font-weight: 500; padding: 14px 0; border-bottom: 1px solid var(--line); min-height: 52px; display: flex; align-items: center; }
.sheet-act { display: grid; gap: 10px; margin: 22px 0 18px; }
.sheet-meta { font-size: 14px; color: var(--ink-3); line-height: 1.6; }
@media (max-width: 1023px) {
  .nav, .hdr-tel { display: none; }
  .mnav { display: block; }
  .hdr-in { min-height: 60px; gap: 12px; }
  .logo img { height: 38px; }
  .hdr-act .btn-primary { min-height: 40px; padding: 0 14px; font-size: 14px; }
}
@media (min-width: 1024px) and (max-width: 1180px) { .nav a { padding: 10px 9px; font-size: 14px; } }

/* ── hero ── */
.hero { position: relative; overflow-x: clip; padding: clamp(40px, 6vw, 88px) 0 clamp(24px, 4vw, 56px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px; min-height: 560px; } }
.hero-copy h1 em { font-style: normal; color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: .09em; text-underline-offset: .12em; }
.hero-copy .lead { margin: 26px 0 32px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-copy .text-link { margin-top: 16px; }

/* studio backdrop + stage */
.hero-visual { position: relative; --s: 1; }
.stage { position: relative; width: min(100%, 560px); height: 560px; margin: 0 auto; perspective: 1500px; perspective-origin: 50% 35%; transform: translateY(var(--sy, 0px)) scale(var(--s)); transform-origin: top center; }
.hero-visual::before { content: ''; position: absolute; inset: -10% -20% -10%; background: radial-gradient(60% 55% at 55% 45%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%); z-index: -1; pointer-events: none; }
.floor { position: absolute; left: 50%; top: 66%; width: 520px; height: 130px; margin-left: -250px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(20, 23, 27, .34), rgba(20, 23, 27, 0) 70%); filter: blur(8px); transform: translateY(calc(var(--p) * 24px)); }
.lap { position: absolute; left: 50%; top: 60%; width: 440px; height: 300px; margin: -150px 0 0 -220px; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-30deg); }
.p { position: absolute; transform-style: preserve-3d; border-radius: 10px; }
.base { inset: 0; background: linear-gradient(135deg, #2B313A, #1A1F26 60%, #161A20); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 12px 0 -1px #0B0E12, 0 13px 0 -1px #07090B, 0 40px 60px rgba(0, 0, 0, .25); transform: translateZ(0); }
.base::after { content: ''; position: absolute; left: 24px; right: 24px; bottom: 6px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .05); }
.board { left: 32px; top: 32px; width: 376px; height: 236px; border-radius: 6px; background: #1C2530 repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 14px), #1C2530; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 14px); box-shadow: 0 2px 0 -0px #0E141B; transform: translateZ(calc(10px + max(0, var(--p) - .3) * 20px)); }
.chip { position: absolute; background: #0B0E12; border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset; }
.c1 { left: 150px; top: 40px; width: 64px; height: 64px; }
.c2 { left: 236px; top: 56px; width: 36px; height: 36px; }
.c3 { left: 150px; top: 124px; width: 90px; height: 22px; }
.batt { left: 70px; top: 206px; width: 300px; height: 66px; border-radius: 6px; background: linear-gradient(#2A3038, #1E2329); box-shadow: 0 6px 0 -1px #0C0F13, 0 1px 0 rgba(255, 255, 255, .08) inset; transform: translateZ(calc(14px + max(0, var(--p) - .3) * 66px)); }
.batt::after { content: ''; position: absolute; left: 14px; top: 14px; width: 84px; height: 10px; border-radius: 2px; background: rgba(255, 255, 255, .10); }
.ssd { left: 300px; top: 62px; width: 84px; height: 22px; border-radius: 3px; background: #12161B; box-shadow: 0 3px 0 -1px #06080A; transform: translateZ(calc(16px + max(0, var(--p) - .3) * 106px)); }
.ssd::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; background: repeating-linear-gradient(90deg, #C9A227 0 2px, transparent 2px 4px); opacity: .8; }
.ram { left: 62px; top: 70px; width: 132px; height: 20px; border-radius: 3px; background: #13171C; box-shadow: 0 3px 0 -1px #06080A; transform: translateZ(calc(16px + max(0, var(--p) - .3) * 123px)); }
.ram::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; background: repeating-linear-gradient(90deg, #C9A227 0 2px, transparent 2px 3px); opacity: .7; }
.r2 { top: 98px; transform: translateZ(calc(16px + max(0, var(--p) - .3) * 143px)); }
.fan { left: 318px; top: 128px; width: 92px; height: 92px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #2A3038 0deg 14deg, #171B21 14deg 30deg); box-shadow: 0 0 0 6px #0E1115, 0 5px 0 5px #06080A; transform: translateZ(calc(16px + max(0, var(--p) - .3) * 89px)); }
.fan::after { content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #0B0E12; box-shadow: 0 0 0 2px #2A3038 inset; }
.deck { inset: 0; background: linear-gradient(160deg, #262C34, #1E242B); box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 6px 0 -1px #0B0E12, 0 7px 0 -1px #07090B; transform: translateZ(calc(20px + max(0, var(--p) - .3) * 214px)); }
.keys { position: absolute; left: 34px; right: 34px; top: 30px; height: 150px; border-radius: 4px; background-color: #0F1317; background-image: repeating-linear-gradient(0deg, #0F1317 0 3px, #2B323B 3px 22px), repeating-linear-gradient(90deg, #0F1317 0 3px, transparent 3px 27px); background-blend-mode: normal; }
.keys::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 3px, rgba(15, 19, 23, 0) 3px 27px), repeating-linear-gradient(90deg, #0F1317 0 3px, transparent 3px 27px); }
.pad { position: absolute; left: 50%; bottom: 22px; width: 130px; height: 74px; margin-left: -65px; border-radius: 6px; background: #2B323B; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset; }
.lid { inset: 0 0 auto 0; height: 292px; transform-origin: 50% 0; background: linear-gradient(160deg, #1A1F26, #0F1216); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 -6px 0 -1px #07090B; transform: translateZ(calc(20px + max(0, var(--p) - .3) * 214px)) rotateX(calc(60deg + var(--p) * 34deg)); }
.screen { position: absolute; inset: 12px 12px 16px; border-radius: 5px; background: radial-gradient(120% 90% at 20% 0%, #26313F 0%, #0C1017 60%, #070A0E 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset; }
.screen::after { content: ''; position: absolute; left: 12%; top: 18%; width: 34%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(245, 144, 35, .9), rgba(245, 144, 35, .2)); }
.cam { position: absolute; left: 50%; top: 5px; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: #2A3038; }

/* labels: fade in with progress, hairline leaders */
.tags { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; opacity: clamp(0, calc((var(--p) - .6) * 3), 1); }
.tags li { position: absolute; font: 500 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding-left: 44px; }
.tags li::before { content: ''; position: absolute; left: 0; top: 50%; width: 34px; height: 1px; background: var(--line-2); }
.tags li::after { content: ''; position: absolute; left: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--orange); }
.t-screen { right: 6%; top: 8%; }
.t-keys { right: 2%; top: 44%; }
.t-fan { right: 2%; top: 70%; }
.t-batt { left: 44%; top: 92%; }
.tags li.l { padding-left: 0; padding-right: 44px; text-align: right; }
.tags li.l::before { left: auto; right: 0; }
.tags li.l::after { left: auto; right: -3px; }
.t-ssd { left: -3%; top: 71%; }
.t-ram { left: -3%; top: 58%; }
.t-board { left: -3%; top: 84%; }
.tags-inline { display: none; font: 500 13px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.eyebrow .sm { display: none; }
@media (max-width: 1023px) {
  .hero-visual { --s: .78; height: 440px; }
  .stage { transform: scale(var(--s)); }
  .tags { display: none; }
  .tags-inline { display: block; margin-top: -8px; }
}
@media (max-width: 640px) {
  .hero-visual { --s: .6; height: 420px; padding-top: 80px; }
  .lap { margin-left: -204px; }
  .tags-inline { margin-top: -10px; font-size: 13px; letter-spacing: .03em; }
  .eyebrow .lg { display: none; }
  .eyebrow .sm { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .floor, .p, .tags { transition: none; } }

/* ── proof strip ── */
.proof { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.proof-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf { padding: 22px 0; display: grid; gap: 4px; border-right: 1px solid var(--line); padding-inline: 20px; }
.pf:first-child { padding-left: 0; }
.pf .num { font: 500 clamp(26px, 2.4vw, 36px)/1 var(--mono); letter-spacing: -.02em; }
.pf span { font-size: 14px; color: var(--ink-3); }
.pf-link { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 10px; padding: 16px 0; text-decoration: none; font-weight: 500; font-size: 15px; border-top: 1px solid var(--line); }
.pf-link svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .pf:nth-child(2n) { border-right: 0; } .pf:nth-child(-n + 2) { border-bottom: 1px solid var(--line); } .pf:nth-child(3) { padding-left: 0; } }
@media (min-width: 641px) {
  .proof-in { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; }
  .pf-link { grid-column: auto; border-top: 0; padding-left: 28px; justify-self: end; }
  .pf:nth-child(4) { border-right: 0; }
}

/* ── sections rhythm ── */
/* Measured 11 gaps of ~200px between sections, 2,200px of the page spent on nothing. Tightened
   so sections read as deliberate blocks rather than drifting apart. */
section { padding: clamp(44px, 5vw, 78px) 0; }
.hero { padding-bottom: clamp(24px, 4vw, 56px); }
.proof { padding: 0; }
.dark, .shop, .ft { background: var(--graphite); color: var(--g-text); }
.dark .eyebrow, .shop .eyebrow, .ft .eyebrow { color: var(--g-muted); }

/* ── diagnostic ── */
.dx { background: var(--paper-2); }
.dx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 641px) { .dx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dx-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } }
.dx-tile { appearance: none; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: 18px 14px 16px; min-height: 104px; display: grid; gap: 12px; align-content: start; justify-items: start; text-align: left; font: 500 15px/1.3 var(--font); cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .15s ease; }
.dx-tile svg { width: 26px; height: 26px; color: var(--ink-2); }
.dx-tile:hover { border-color: var(--line-2); transform: translateY(-2px); }
.dx-tile[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.dx-tile[aria-pressed="true"] svg { color: var(--orange); }
.dx-panel { margin-top: 18px; display: grid; gap: 20px; padding: 26px 28px; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--r-lg); }
@media (min-width: 1024px) { .dx-panel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.dx-panel .eyebrow { margin-bottom: 8px; color: var(--ink); }
.dx-text { color: var(--ink-2); max-width: 70ch; }
.dx-act { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }

/* ── services bento ── */
.bento { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cell { display: grid; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; color: var(--ink); transition: border-color .2s ease, transform .2s ease; }
.cell:hover { border-color: var(--line-2); transform: translateY(-3px); }
.cell-img { background: var(--plate); display: grid; place-items: center; padding: 18px; }
.cell-img img { width: 100%; max-width: 220px; height: auto; mix-blend-mode: multiply; }
.cell-txt { padding: 22px 24px 24px; display: grid; gap: 10px; align-content: start; }
.cell-txt p:not(.eyebrow) { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.cell-txt .eyebrow { margin-bottom: 0; }
.cell.big .cell-txt p:not(.eyebrow) { font-size: 17px; }
.cell.big .cell-img { padding: 40px 44px; background: linear-gradient(180deg, #FFFFFF, #F1EEE8); }
.cell.big .cell-img img { max-width: 420px; }
/* screen tile: drawn, not photographed — the only screen photos available carry third-party watermarks */
.panel-ill { position: relative; display: block; width: min(100%, 360px); aspect-ratio: 16 / 10; transform: rotate(-5deg); margin: 6px auto 14px; }
.pi-screen { position: absolute; inset: 0; border-radius: 7px; background: #0F1216; box-shadow: 0 34px 50px -20px rgba(20, 23, 27, .45), 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.pi-screen::before { content: ''; position: absolute; inset: 9px; border-radius: 3px; background: radial-gradient(120% 90% at 18% 0%, #26313F 0%, #0C1017 60%, #070A0E 100%); }
.pi-screen::after { content: ''; position: absolute; left: 16%; top: 24%; width: 30%; height: 5px; border-radius: 3px; background: linear-gradient(90deg, rgba(245, 144, 35, .95), rgba(245, 144, 35, .25)); }
.pi-conn { position: absolute; left: 14%; bottom: -7px; width: 34%; height: 8px; border-radius: 2px; background: repeating-linear-gradient(90deg, #C9A227 0 2px, #3A3F46 2px 5px); }
.cell.dark { background: var(--graphite); border-color: var(--graphite); color: var(--g-text); }
.cell.dark .cell-txt p:not(.eyebrow) { color: var(--g-muted); }
.cell.dark .cell-img { background: var(--graphite-2); }
.cell.dark .cell-img img { mix-blend-mode: normal; border-radius: 8px; }
.cell.dark .text-link { color: var(--orange); }
.cell.dark:hover { border-color: var(--g-line); }
.cell .text-link { min-height: 0; padding: 4px 0; }
@media (max-width: 640px) { .bento { grid-template-columns: minmax(0, 1fr); } .cell { grid-template-columns: 110px minmax(0, 1fr); } .cell.big, .cell.wide { grid-template-columns: minmax(0, 1fr); } .cell .cell-img { padding: 12px; } .cell-txt { padding: 16px 18px 18px; } }
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); }
  .cell.big { grid-column: 1 / 3; grid-row: 1 / 3; }
  .cell.big .cell-img { order: 0; }
  .cell.wide { grid-column: 3 / 5; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
  .cell.wide .cell-img { height: 100%; }
}
.svc-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 641px) { .svc-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .svc-list { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.svc-list a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; font-weight: 500; font-size: 14.5px; background: var(--paper); }
.svc-list a:hover { border-color: var(--ink); }
.svc-list svg { width: 20px; height: 20px; color: var(--ink-3); }

/* ── process ── */
.proc { background: var(--paper-2); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.steps li { position: relative; padding: 26px 0 26px 64px; border-top: 1px solid var(--line-2); display: grid; gap: 8px; }
.steps li b { position: absolute; left: 0; top: 26px; font: 500 15px/1 var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.steps p { color: var(--ink-2); font-size: 15.5px; }
@media (min-width: 1024px) {
  /* Six steps in five columns orphaned the last one on a row of its own and let the headings sit at
     different heights. Three columns divide six evenly, and each cell lays out on its own baseline
     grid so every heading and paragraph starts on the same line across the row. */
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 44px; }
  .steps li { padding: 30px 0 34px; grid-template-rows: auto auto 1fr; }
  .steps li:nth-child(-n+3) { border-top: 1px solid var(--ink); }
  .steps li { padding: 28px 0 0; }
  .steps li b { position: static; margin-bottom: 8px; }
}

/* ── showroom ── */
.shop .sec-head h2 { color: #fff; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs [role=tab] { appearance: none; background: transparent; color: var(--g-muted); border: 1px solid var(--g-line); border-radius: 999px; padding: 0 16px; min-height: 44px; font: 500 14.5px/1 var(--font); cursor: pointer; }
.tabs [role=tab][aria-selected="true"] { background: #fff; color: #14171B; border-color: #fff; }
.prod-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prod-grid[hidden] { display: none; }
@media (min-width: 641px) { .prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .prod-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .prod-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prod { background: var(--graphite-2); border: 1px solid var(--g-line); border-radius: var(--r-lg); padding: 16px; display: grid; gap: 8px; align-content: start; }
.prod h3 { font-size: 17px; color: #fff; }
.prod .spec { font-size: 13.5px; color: var(--g-muted); line-height: 1.5; }
/* Operator preference (17 Sep): the part photos keep their original white studio plate. A cut-out
   version was tried and rejected. */
.prod-img { aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; border-radius: 8px; background: var(--plate); display: grid; place-items: center; padding: 14px; margin-bottom: 6px; }
.prod-img img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.prod.dev .prod-img { background: var(--graphite-3); border: 1px dashed var(--g-line); }
.dev-tag { font: 500 12.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--g-muted); }
.prod .btn-ghost { justify-self: start; opacity: .7; }
.lap-sil { width: 62%; display: grid; gap: 3px; }
.lap-sil i { display: block; height: 46px; border-radius: 6px 6px 2px 2px; background: #2A3038; border: 1px solid var(--g-line); }
.lap-sil i + i { height: 6px; border-radius: 2px 2px 6px 6px; width: 112%; margin-left: -6%; background: #1E242B; }
.wa-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; font-size: 14.5px; color: #fff; text-decoration: none; }
.wa-link svg { width: 18px; height: 18px; color: var(--wa); }
.wa-link:hover { text-decoration: underline; }
.shop-note { margin-top: 22px; font-size: 14px; color: var(--g-muted); max-width: 70ch; }

/* ── why (evidence) ── */
.why-grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .why-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; } }
.why-copy .lead { margin: 18px 0 32px; }
.ev { margin: 0; display: grid; }
.ev div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--line-2); align-items: baseline; }
.ev div:last-child { border-bottom: 1px solid var(--line-2); }
.ev dt { font: 500 clamp(28px, 2.6vw, 40px)/1 var(--mono); letter-spacing: -.02em; }
.ev dd { margin: 0; color: var(--ink-2); font-size: 16.5px; }
.ev dd strong { color: var(--ink); font-weight: 500; }
.why-copy .fine { margin-top: 16px; }
.why-side { display: grid; gap: 18px; }
.ph { margin: 0; display: grid; place-items: center; background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--r-lg); aspect-ratio: 4 / 3; padding: 24px; text-align: center; }
.ph.tall { aspect-ratio: 4 / 4.2; }
.ph span { display: grid; justify-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); max-width: 26ch; }
.ph svg { width: 26px; height: 26px; color: var(--ink-2); margin-bottom: 6px; }
.ph b { font: 500 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.quote { margin: 0; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: grid; gap: 12px; }
.quote p { font-size: 17px; line-height: 1.55; }
.quote cite { font-style: normal; font-size: 14px; color: var(--ink-3); }
.stars { display: inline-flex; gap: 2px; color: var(--orange); }
.stars svg { width: 15px; height: 15px; }
/* the Google mark that sits at the end of every star row */
.stars-g { display: inline-flex; align-items: center; margin-right: 5px; }
.stars-g svg { width: 14px; height: 14px; }

/* ── review wall ── */
.wall { background: var(--paper-2); }
.wall .num-inline { font-family: var(--mono); font-weight: 500; }
.wall h2 svg { width: .8em; height: .8em; color: var(--orange); vertical-align: -.06em; }
.wall-grid { columns: 1; column-gap: 14px; }
@media (min-width: 641px) { .wall-grid { columns: 2; } }
@media (min-width: 1024px) { .wall-grid { columns: 3; } }
.rv { break-inside: avoid; margin-bottom: 14px; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: grid; gap: 12px; }
.rv p { font-size: 16px; line-height: 1.6; color: var(--ink); }
.rv footer { display: grid; gap: 2px; font-size: 14px; color: var(--ink-3); }
.rv footer strong { color: var(--ink); font-weight: 500; }
.wall .fine { margin-top: 20px; }

/* ── location ── */
.loc-grid { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .loc-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: center; } }
.loc address { font-style: normal; margin: 22px 0 18px; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.loc address strong { color: var(--ink); font-weight: 500; }
.meta { margin: 0 0 28px; display: grid; }
.meta div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15.5px; }
.meta div:last-child { border-bottom: 1px solid var(--line); }
.meta dt { color: var(--ink-3); }
.meta dd { margin: 0; color: var(--ink); }
@media (max-width: 480px) { .meta div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* real Google Maps embed; the footer strip below it carries the upstairs warning */
.map-card { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper-2); }
.map-frame { display: block; width: 100%; aspect-ratio: 5 / 4; border: 0; }
.map-foot { display: flex; gap: 12px; align-items: flex-start; padding: 15px 17px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; background: var(--paper-2); }
.map-foot svg { width: 20px; height: 20px; flex: none; color: var(--orange-ink); margin-top: 1px; }
.map-foot span { display: grid; gap: 3px; }
.map-foot strong { color: var(--ink); font-weight: 500; }
.map-foot:hover strong { text-decoration: underline; }
@media (max-width: 640px) { .map-frame { aspect-ratio: 4 / 3; } }







/* ── quote ── */
.quote-sec { background: var(--surface); border-top: 1px solid var(--line); }
.quote-grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .quote-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; } }
.quote-sec .lead { margin: 18px 0 24px; }
.ticks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.ticks svg { width: 20px; height: 20px; color: var(--orange-ink); }
.qf { display: grid; gap: 18px; padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
@media (max-width: 640px) { .qf { padding: 20px; } }
.f { display: grid; gap: 8px; }
.f label { font-weight: 500; font-size: 15px; }
.f .opt { color: var(--ink-3); font-weight: 400; }
.f input, .f select, .f textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); font: 400 16px/1.4 var(--font); color: var(--ink); }
.f textarea { resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 3px solid var(--orange); outline-offset: 1px; border-color: var(--ink); }
.qf .btn { justify-self: start; }
.qf-note { font-size: 14px; color: var(--ink-2); min-height: 1.5em; }

/* ── footer ── */
.ft { padding: 64px 0 28px; }
.ft-grid { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 641px) { .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ft-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 48px; } }
.ft-brand img { height: 44px; width: auto; filter: invert(1) brightness(1.4); opacity: .95; }
.ft-brand p { margin-top: 18px; color: var(--g-muted); font-size: 15px; max-width: 34ch; }
.ft-social a { color: #fff; text-decoration: none; }
.ft-social a:hover { text-decoration: underline; }
.ft h3, .ft .ft-h { font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--g-muted); margin-bottom: 14px; }
.ft-col a { display: block; color: var(--g-text); text-decoration: none; padding: 6px 0; font-size: 15px; }
.ft-col a:hover { color: #fff; text-decoration: underline; }
.ft-col address { font-style: normal; color: var(--g-text); font-size: 15px; line-height: 1.55; }
.ft-col p { margin-top: 12px; color: var(--g-muted); font-size: 15px; line-height: 1.7; }
.ft-col p a { display: inline; padding: 0; color: #fff; }
.ft-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--g-line); color: var(--g-muted); font-size: 13.5px; }

/* ── mobile dock: two actions, compact, safe-area aware ── */
.dock { display: none; }
@media (max-width: 640px) {
  .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding-bottom: env(safe-area-inset-bottom); background: var(--ink); }
  .dock a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--dock-h); background: var(--orange); color: var(--on-accent); text-decoration: none; font-weight: 500; font-size: 16px; }
  .dock a.wa { background: var(--wa); }
  .dock svg { width: 20px; height: 20px; }
}

/* ═══ page-family components (v3-templates.mjs) ═══ */
/* breadcrumbs */
.crumbs { font-size: 14px; color: var(--ink-3); padding: 18px 0 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.crumbs li + li::before { content: '›'; margin-right: 10px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; padding: 6px 0; display: inline-block; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs li[aria-current] { color: var(--ink); }
@media (max-width: 600px) { .crumbs li:last-child { display: none; } }

/* page hero (non-home): light, editorial, optional aside */
.phero { padding: 16px 0 clamp(32px, 4vw, 56px); }
.phero h1 { font-size: clamp(34px, 4.4vw, 64px); margin-top: 14px; max-width: 22ch; }
.phero .lead { margin-top: 20px; }
.phero-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .phero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; } }
.phero-aside { display: grid; gap: 12px; }
.phero .cta-row { margin-top: 28px; }
.phero.dark { background: var(--graphite); color: var(--g-text); }
.phero.dark h1 { color: #fff; }
.phero.dark .lead, .phero.dark .crumbs, .phero.dark .crumbs a, .phero.dark .eyebrow { color: var(--g-muted); }

/* quick answer (answer-first pages) */
.qa { border-left: 4px solid var(--orange); background: var(--surface); border: 1px solid var(--line); border-left-width: 4px; border-left-color: var(--orange); border-radius: var(--r-lg); padding: 22px 26px; margin: 8px 0 28px; }
.qa .eyebrow { margin-bottom: 8px; color: var(--ink); }
.qa-text { font-size: clamp(17px, 1.2vw, 19px); line-height: 1.55; }

/* prose */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: clamp(26px, 2.4vw, 34px); margin-top: 2.2em; }
.prose h3 { margin-top: 1.6em; }
.prose p, .prose li { color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose a { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.two-col { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .two-col { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; align-items: start; } .two-col > aside { position: sticky; top: 88px; } }
.aside-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; display: grid; gap: 14px; }
.aside-card h3 { font-size: 17px; }
.aside-card .btn { justify-self: start; }
.aside-card .fine a { color: var(--ink); }

/* fact lists, notes */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.facts li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.facts svg { width: 20px; height: 20px; color: var(--orange-ink); flex: none; margin-top: 2px; }
.facts.dont svg { color: var(--ink-3); }
.note { display: flex; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper-2); color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.note svg { width: 22px; height: 22px; flex: none; color: var(--ink-2); margin-top: 2px; }
.note.warn { background: var(--note-warn); border-color: rgba(245, 144, 35, .4); }
.note.warn svg { color: var(--orange-2); }

/* tables */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 520px; }
.tbl th, .tbl td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font: 500 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--paper-2); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.num { font-family: var(--mono); white-space: nowrap; }
.tbl .proposed { display: inline-block; font: 500 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--orange-ink); border: 1px dashed rgba(143, 77, 4, .55); border-radius: 4px; padding: 3px 6px; margin-left: 8px; vertical-align: middle; }

/* faq */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 44px 18px 0; font-weight: 500; font-size: 17px; position: relative; min-height: 52px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 14px; font: 400 26px/1 var(--font); color: var(--ink-3); }
.faq details[open] summary::after { content: '–'; }
.faq-a { padding: 0 0 20px; color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 70ch; }
.faq-a p + p { margin-top: .8em; }

/* related links */
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 641px) { .related ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .related ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.related a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 16px 4px; border-top: 1px solid var(--line-2); text-decoration: none; min-height: 64px; }
.related li:last-child a, .related li:nth-last-child(-n+3) a { border-bottom: 1px solid var(--line-2); }
.related a:hover .rl-title { text-decoration: underline; }
.related a:hover svg { color: var(--ink); transform: translateX(3px); }
.rl-kind { grid-column: 1; font: 500 12.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.rl-title { grid-column: 1; font-weight: 500; }
.related svg { grid-column: 2; grid-row: 1 / 3; width: 18px; height: 18px; color: var(--ink-3); }

/* mini review wall + final cta */
.wall-mini { background: var(--paper-2); }
.wall-grid.cols-1 { columns: 1; } .wall-grid.cols-2 { columns: 2; }
@media (max-width: 640px) { .wall-grid.cols-2, .wall-grid.cols-3 { columns: 1; } }
.final { background: var(--graphite); color: var(--g-text); }
.final-in { display: grid; gap: 28px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .final-in { grid-template-columns: minmax(0, 7fr) auto; gap: 48px; } }
.final h2 { color: #fff; }
.final .lead, .final .eyebrow { color: var(--g-muted); }
.final .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .3); }

/* counters (about) */
.counters { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .counters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.counters div { padding: 22px 0 0; border-top: 1px solid var(--line-2); display: grid; gap: 6px; }
.counters b { font: 500 clamp(32px, 3vw, 46px)/1 var(--mono); letter-spacing: -.02em; }
.counters span { color: var(--ink-3); font-size: 14.5px; }

/* decision helper */
.decider fieldset { border: 0; margin: 0 0 18px; padding: 0; }
.decider legend { font-weight: 500; margin-bottom: 10px; font-size: 16.5px; }
.decider .opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.decider label { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); cursor: pointer; font-size: 15.5px; }
.decider label:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.decider input { accent-color: var(--orange); }
.decider-out { margin-top: 10px; padding: 22px 24px; border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--r-lg); background: var(--surface); }

/* article meta */
.meta-line { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--ink-3); margin-top: 18px; }
.meta-line svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }

/* ═══ template-specific ═══ */
/* symptom line + service hero (graphite band with component) */
.symptom-line { font: 500 clamp(13px, 1vw, 14px)/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-ink); margin: 14px 0 12px; }
.svc-hero { background: var(--graphite); color: var(--g-text); padding: 0 0 clamp(40px, 5vw, 72px); }
.svc-hero .crumbs, .svc-hero .crumbs a, .svc-hero .crumbs li[aria-current] { color: var(--g-muted); }
.svc-hero .symptom-line { color: var(--orange); }
.svc-hero h1 { color: #fff; font-size: clamp(34px, 4.4vw, 62px); max-width: 20ch; }
.svc-hero .lead { color: var(--g-muted); margin-top: 18px; }
.svc-hero .cta-row { margin-top: 28px; }
.svc-hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .3); }
.svc-hero .hero-fine { color: var(--g-muted); margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.svc-hero .hero-fine svg { width: 15px; height: 15px; vertical-align: -3px; }
.svc-hero-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; margin-top: 18px; }
@media (min-width: 1024px) { .svc-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } }
.svc-visual { position: relative; }
.svc-img { background: var(--graphite-2); border: 1px solid var(--g-line); border-radius: var(--r-lg); padding: 28px; display: grid; place-items: center; aspect-ratio: 4 / 3; }
.svc-img img { max-width: 78%; height: auto; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
.svc-img .ph { width: 100%; height: 100%; aspect-ratio: auto; background: var(--graphite-3); border-color: var(--g-line); }
.svc-img .ph span, .svc-img .ph b, .svc-img .ph svg { color: var(--g-muted); }
.svc-labels { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--g-muted); }
.svc-labels li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-right: 8px; vertical-align: 1px; }

/* causes ledger with plain-word likelihood */
.causes { margin: 0; display: grid; }
.causes > div { padding: 16px 0; border-top: 1px solid var(--line-2); display: grid; gap: 6px; }
.causes > div:last-child { border-bottom: 1px solid var(--line-2); }
.causes dt { font-weight: 500; font-size: 17px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--ink); }
.causes dd { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.causes dd a { color: var(--ink); white-space: nowrap; }
.causes dd a svg { width: 14px; height: 14px; vertical-align: -2px; }
.lk { font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--ink-2); }
.lk-common { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.lk-sometimes { background: var(--paper-3); }
.lk-rare { color: var(--ink-3); }
.diag { padding-left: 0; list-style: none; counter-reset: d; margin: 0; display: grid; gap: 12px; }
.diag li { position: relative; padding-left: 44px; color: var(--ink-2); font-size: 16.5px; line-height: 1.55; }
.diag li::before { counter-increment: d; content: counter(d, decimal-leading-zero); position: absolute; left: 0; top: 2px; font: 500 13px/1 var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.compare-mini { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 641px) { .compare-mini { grid-template-columns: 1fr 1fr; gap: 32px; position: relative; } .compare-mini::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-2); } }
.answer-sec .prose.wide { max-width: 78ch; }
.aside-links { list-style: none; margin: 0; padding: 0; display: grid; }
.aside-links a { display: block; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 15px; }
.aside-links a:hover { text-decoration: underline; }
.tbl.price td:first-child { font-weight: 500; color: var(--ink); }
.faq-sec, .rel-sec, .answer-sec { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
.rel-sec { background: var(--paper-2); }
.two-col > aside .aside-card + .aside-card, .two-col > aside .aside-card + .diagram-card { margin-top: 14px; }

/* cost guide range rows */
.range-rows { display: grid; }
.rr { padding: 18px 0; border-top: 1px solid var(--line-2); display: grid; gap: 8px; }
.rr:last-child { border-bottom: 1px solid var(--line-2); }
.rr-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.rr-head a { font-weight: 500; color: var(--ink); text-decoration: none; font-size: 17px; }
.rr-head a:hover { text-decoration: underline; }
.rr-head .num { font: 500 clamp(18px, 1.5vw, 22px)/1 var(--mono); letter-spacing: -.01em; white-space: nowrap; }
.rr-bar { height: 6px; background: var(--paper-3); border-radius: 3px; position: relative; overflow: hidden; }
.rr-bar i { position: absolute; top: 0; bottom: 0; left: var(--lo); right: calc(100% - var(--hi)); background: var(--ink); border-radius: 3px; }
.rr .fine { margin: 0; }

/* diagram card, radius */
.diagram-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; color: var(--ink); }
.radius { width: 100%; height: auto; display: block; }
.meta.compact div { grid-template-columns: 70px minmax(0, 1fr); padding: 8px 0; font-size: 14.5px; }
.meta.compact { margin: 12px 0 14px; }

/* counters + chapters (about) */
.counters-sec { padding: clamp(24px, 3vw, 40px) 0 0; }
.chapter { padding: clamp(40px, 5vw, 72px) 0; }
.chapter + .chapter { border-top: 1px solid var(--line); }
.chapter-in { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1024px) { .chapter-in { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; } .chapter.flip .chapter-photo { order: 2; } }
.chapter-text h2 { font-size: clamp(26px, 2.6vw, 38px); margin: 8px 0 16px; }
.chapter-text p { color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.chapter-text p + p { margin-top: 1em; }
.chapter-photo .ph { aspect-ratio: 3 / 2; }
/* A chapter whose subject has no photograph yet carries a real Google review on that subject
   instead. A chapter with neither runs full width rather than leaving a hole in the grid. */
.chapter-rv .rv { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; }
.chapter-rv .rv p { font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.chapter-rv .rv footer { margin-top: 14px; }
.chapter.no-media .chapter-in { grid-template-columns: minmax(0, 1fr); }
.chapter.no-media .chapter-text { max-width: 68ch; }

/* A service with no part photograph shows its parts list on its own, not an empty frame. */
.svc-visual.labels-only {
  display: grid; align-content: center; gap: 16px; min-height: 210px;
  background: var(--graphite-2); border: 1px solid var(--g-line); border-radius: var(--r-lg); padding: 30px 32px;
}
.svc-visual.labels-only .lo-head { font: 500 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--g-muted); margin: 0; }
.svc-visual.labels-only .svc-labels { flex-direction: column; gap: 13px; margin: 0; font-size: 14.5px; color: var(--g-text); text-transform: none; letter-spacing: 0; }


/* contact */
.contact-hero { padding: 0 0 clamp(40px, 5vw, 72px); }
.big-tel { font: 500 clamp(28px, 10vw, 104px)/1 var(--mono); letter-spacing: -.04em; margin: 12px 0 18px; }
.big-tel a { text-decoration: none; color: var(--ink); }
.big-tel a:hover { color: var(--orange-ink); }
.contact-grid { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: start; } }
.contact-col { display: grid; gap: 18px; }
.contact-col .meta { margin: 0; }

/* reviews page chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chips button { appearance: none; background: transparent; border: 1px solid var(--line-2); border-radius: 999px; padding: 0 14px; min-height: 40px; font: 500 14px/1 var(--font); color: var(--ink-2); cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* exploded-part interface (home) */
.parts-sec { background: var(--paper-2); }
.parts-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1024px) { .parts-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; } }
.part-list { list-style: none; margin: 0; padding: 0; display: grid; }
.part-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 14px 4px; border-top: 1px solid var(--line-2); text-decoration: none; color: var(--ink); min-height: 56px; }
.part-list li:last-child a { border-bottom: 1px solid var(--line-2); }
.pl-name { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 16.5px; }
.pl-name svg { width: 20px; height: 20px; color: var(--ink-3); }
.pl-blurb { grid-column: 1; color: var(--ink-3); font-size: 14.5px; }
.part-list a > svg { grid-column: 2; grid-row: 1 / 3; width: 18px; height: 18px; color: var(--ink-3); }
.part-list a:hover, .part-list a:focus-visible { background: rgba(20, 23, 27, .03); }
.part-list a:hover .pl-name svg { color: var(--orange-ink); }
.hero-visual.small { --s: .78; height: 480px; }
.hero-visual.small .stage { margin-top: -20px; }
.lap [data-part].is-hot { outline: 2px solid var(--orange); outline-offset: 2px; }
.part-tip { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); background: var(--ink); color: var(--on-ink); padding: 12px 16px; border-radius: 10px; display: grid; gap: 2px; min-width: 200px; }
.part-tip .eyebrow { color: var(--g-muted); margin: 0; }
.part-tip b { font-weight: 500; }
.part-tip a { color: var(--orange); font-size: 14px; }
@media (max-width: 1023px) { .hero-visual.small { height: 380px; --s: .62; } }

/* real work + knowledge + cost teaser */
.work-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.work-grid .ph { aspect-ratio: 1 / 1; padding: 16px; }
.cost-teaser { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.know .related a { background: transparent; }
.text-link.light { color: #fff; }
.shop .sec-head p, .shop .sec-head h2 { color: #fff; }

/* 404 */
.nf { padding: clamp(40px, 6vw, 88px) 0; }
.nf-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1024px) { .nf-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.nf .facts a { color: var(--ink); }
.hero-visual.missing .lap .batt { opacity: 0; }
.hero-visual.missing .stage { height: 480px; }

/* ── motion: sparing, reversible ── */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .cell, .dx-tile, .text-link svg, .btn { transition: none; }
}

/* clip the CSS-laptop stage so a scaled scene never widens the page */
.parts-sec, .nf, .hero { overflow-x: clip; }
@supports not (overflow: clip) { .parts-sec, .nf, .hero { overflow-x: hidden; } }
@media (max-width: 640px) { .stage { width: min(100%, 340px); } .hero-visual.small { --s: .55; } }

/* product cards: never let a long part name or the WhatsApp label widen the grid */
.prod { min-width: 0; }
.prod h3, .prod .spec { overflow-wrap: anywhere; }
.wa-link { flex-wrap: wrap; min-width: 0; }
.wa-link svg { flex: none; }
.prod > *, .prod-img, .prod-img img { min-width: 0; }
.prod-img img { max-width: 100%; }

.prod .prod-name { font: 500 17px/1.25 var(--font); color: #fff; letter-spacing: -.015em; margin: 0; }
.prod.light .prod-name { color: #fff; }
.parts-stage { position: relative; }

/* Below-the-fold sections do not pay layout/paint cost until they are near the viewport.
   Intrinsic sizes are set so scroll height stays stable and CLS stays 0. */
@media (min-width: 0px) {
  .parts-sec, .proc, .svc, .work, .cost-teaser, .wall, .know, .loc, .quote-sec, .faq-sec, .rel-sec, .counters-sec, .chapter, .wall-mini { content-visibility: auto; contain-intrinsic-size: auto 900px; }
}

/* breadcrumbs on a dark hero */
.phero.dark .crumbs li[aria-current], .svc-hero .crumbs li[aria-current] { color: #fff; }

/* showroom enquiry panel (launch build, before inventory is supplied) */
.stock-panel { background: var(--graphite-2); border: 1px solid var(--g-line); border-radius: var(--r-lg); padding: 28px; max-width: 62ch; }
.stock-panel p:not(.eyebrow) { color: var(--g-muted); font-size: 16.5px; line-height: 1.6; }
.stock-panel .soon { font-size: 26px; line-height: 1.2; color: #fff; font-weight: 500; margin: 2px 0 10px; }
.stock-panel .soon-note { margin-top: 12px; }
.stock-panel .soon-note strong { color: #fff; font-weight: 500; }
.stock-panel .cta-row { margin-top: 20px; }

/* quote form status line: it has to be obvious whether an enquiry actually left the page */
.qf-note.is-ok { color: #17663A; font-weight: 500; }
.qf-note.is-error { color: #A3261B; font-weight: 500; }
.stock-panel .cta-row { margin-top: 22px; }
.stock-panel .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }

/* spacing fixes found in review renders */
.rr-head .num .proposed { margin-left: 8px; }
.phero + .answer-sec { padding-top: clamp(8px, 1.5vw, 20px); }
.svc-hero + .answer-sec { padding-top: clamp(32px, 4vw, 56px); }

/* ── touch targets and minimum text size (WCAG 2.5.8; project floor 13px) ── */
.ft-col a { padding: 11px 0; min-height: 44px; display: flex; align-items: center; }
.aside-links a { padding: 12px 0; min-height: 44px; display: flex; align-items: center; }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.rl-kind, .dev-tag, .proposed, .svc-labels, .tbl th, .ft .ft-h, .eyebrow, .lk { font-size: 13px; }
.chips button { min-height: 44px; }
.dx-tile { min-height: 108px; }
.wa-link, .text-link { min-height: 44px; }
/* breadcrumb links are inline running text (WCAG 2.5.8 inline exception); generous padding keeps them tappable */
.crumbs a { display: inline; padding: 12px 2px; }
.ft-social a { display: inline-flex; align-items: center; min-height: 44px; }
.decider input { width: 20px; height: 20px; }

/* remaining touch targets found in the rendered inspection */
.rr-head a { display: inline-flex; align-items: center; min-height: 44px; }
.part-tip a { display: inline-flex; align-items: center; min-height: 44px; }
.facts a { display: inline-block; padding: 10px 0; }
.decider label { min-height: 48px; }

/* ═══ hero: the board, not the laptop (chosen direction, 11 Sep) ═══
   The CSS-drawn laptop was removed from the site: it read as an illustration rather than a real
   machine, which undercut a workshop whose whole claim is hands-on hardware work. */
/* ── shared: shimmer on the primary action (the one pattern worth borrowing) ── */
.btn-shimmer { position: relative; overflow: hidden; isolation: isolate; }
.btn-shimmer::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -140%; width: 60%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  transform: skewX(-18deg); animation: shimmer 4.2s ease-in-out infinite; animation-delay: 1.2s;
}
@keyframes shimmer { 0% { left: -140%; } 28%, 100% { left: 160%; } }
@media (prefers-reduced-motion: reduce) { .btn-shimmer::after { display: none; } }

/* ── D · "the part that failed" — the board, not the laptop ──────────────────────
   Every laptop repair site shows a laptop. The one thing this workshop does that the
   others do not is repair the board at component level: 24 reviews describe arriving
   after another centre said "not repairable" or quoted a whole new board. So the hero
   shows a board with the failed component found, which is the actual product.
   The board is drawn in CSS for now and sized so a real macro photograph drops straight
   into the same frame when the workshop supplies one. */
.hero-board .h-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1024px) { .hero-board .h-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 52px; } }
/* the H1 carries the search terms; the big line is the visual headline */
.hero-board h1.h1-kw { font-size: 13px; line-height: 1.4; letter-spacing: .08em; margin: 0 0 14px; }
.hero-board .hero-display { margin: 0 0 26px; font-weight: 500; text-wrap: balance; font-size: clamp(31px, 3.9vw, 54px); letter-spacing: -.03em; line-height: 1.07; max-width: 19ch; margin-bottom: 26px; }
.hero-board .hero-display em { font-style: normal; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: .085em; text-underline-offset: .14em; text-decoration-skip-ink: none; }
.hero-board .said { display: grid; gap: 10px; margin-bottom: 18px; padding-left: 16px; border-left: 3px solid var(--line-2); }
.hero-board .said p { font-size: 16.5px; line-height: 1.5; color: var(--ink-2); font-style: italic; margin: 0; }
.hero-board .said cite { font-style: normal; font-size: 13.5px; color: var(--ink-3); }
.hero-board .h-ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 15.5px; color: var(--ink-2); }
.hero-board .h-ticks span { display: inline-flex; align-items: center; gap: 8px; }
.hero-board .h-ticks svg { width: 18px; height: 18px; color: var(--orange-ink); }
.hero-board .strip { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.hero-board .strip-label { font: 500 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.hero-board .chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-board .chip-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 15px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); text-decoration: none;
  color: var(--ink); font: 500 14.5px/1 var(--font); transition: border-color .18s ease, background .18s ease;
}
.hero-board .chip-link svg { width: 17px; height: 17px; color: var(--ink-3); }
.hero-board .chip-link:hover { border-color: var(--ink); background: var(--paper-2); }
.hero-board .chip-link:hover svg { color: var(--orange-ink); }

/* the board: a frame a real macro photo can replace without touching the layout */
.board-shot {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden;
  background: #0E2A1C; box-shadow: 0 40px 70px -40px rgba(20, 23, 27, .75);
}
.board-shot .pcb {
  position: absolute; inset: 0;
  background-color: #123A26;
  background-image:
    repeating-linear-gradient(90deg, rgba(190, 230, 200, .09) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(190, 230, 200, .07) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(58deg, rgba(214, 178, 58, .10) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(-34deg, rgba(214, 178, 58, .07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(190, 230, 200, .05) 0 1px, transparent 1px 9px),
    radial-gradient(70% 60% at 30% 20%, rgba(255, 255, 255, .10), transparent 70%);
}
.board-shot i { position: absolute; border-radius: 2px; background: #0B0E12; box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset, 0 3px 8px rgba(0, 0, 0, .45); }
.board-shot .c-big { left: 18%; top: 30%; width: 30%; height: 34%; border-radius: 3px; background: linear-gradient(150deg, #1B1F26, #0B0E12); }
.board-shot .c-big::after { content: ''; position: absolute; inset: 14% 12%; border: 1px solid rgba(255, 255, 255, .07); border-radius: 2px; }
.board-shot .c-2 { left: 58%; top: 20%; width: 16%; height: 13%; }
.board-shot .c-3 { left: 60%; top: 56%; width: 21%; height: 9%; }
.board-shot .c-4 { left: 12%; top: 72%; width: 12%; height: 7%; }
.board-shot .c-5 { left: 40%; top: 12%; width: 10%; height: 8%; }
.board-shot .c-6 { left: 64%; top: 40%; width: 9%; height: 7%; }
.board-shot .r { position: absolute; width: 2.2%; height: 3.4%; background: #C7C9CC; border-radius: 1px; opacity: .85; }
.board-shot .r1 { left: 52%; top: 40%; } .board-shot .r2 { left: 52%; top: 46%; } .board-shot .r3 { left: 52%; top: 52%; }
.board-shot .r4 { left: 30%; top: 70%; } .board-shot .r5 { left: 34%; top: 70%; } .board-shot .r6 { left: 38%; top: 70%; }
.board-shot .r7 { left: 46%; top: 24%; } .board-shot .r8 { left: 46%; top: 30%; } .board-shot .r9 { left: 82%; top: 44%; }
.board-shot .r10 { left: 82%; top: 50%; } .board-shot .r11 { left: 82%; top: 56%; } .board-shot .r12 { left: 24%; top: 20%; }
.board-shot .r13 { left: 28%; top: 20%; } .board-shot .r14 { left: 66%; top: 72%; } .board-shot .r15 { left: 70%; top: 72%; }
.board-shot .cap { position: absolute; width: 4.2%; height: 5.6%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6E7480, #2A2E35); box-shadow: 0 2px 5px rgba(0,0,0,.5); }
.board-shot .cap1 { left: 13%; top: 52%; } .board-shot .cap2 { left: 19%; top: 52%; } .board-shot .cap3 { left: 74%; top: 26%; }
.board-shot .conn { position: absolute; background: #E8E3D8; border-radius: 2px; box-shadow: 0 2px 5px rgba(0,0,0,.45); opacity: .92; }
.board-shot .conn1 { left: 33%; top: 84%; width: 22%; height: 5%; }
.board-shot .conn2 { left: 84%; top: 70%; width: 9%; height: 14%; }
.board-shot .pads { position: absolute; left: 6%; top: 12%; width: 6%; height: 62%; background: repeating-linear-gradient(180deg, #D6B23A 0 5px, transparent 5px 11px); border-radius: 1px; opacity: .9; }
/* the found fault */
.board-shot .fault { position: absolute; left: 57%; top: 18%; width: 18%; height: 17%; border: 2px solid var(--orange); border-radius: 5px; box-shadow: 0 0 0 6px rgba(245, 144, 35, .18); }
.board-shot .fault::after { content: ''; position: absolute; inset: -10px; border-radius: 9px; border: 1px solid rgba(245, 144, 35, .5); animation: faultpulse 2.6s ease-out infinite; }
@keyframes faultpulse { 0% { transform: scale(.92); opacity: .9; } 70%, 100% { transform: scale(1.12); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .board-shot .fault::after { animation: none; opacity: .5; } }
.board-shot .callout { position: absolute; left: 57%; top: 8%; transform: translateY(-100%); display: flex; align-items: center; gap: 9px; }
.board-shot .callout b { font: 500 12.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: #fff; background: rgba(12, 18, 25, .85); border: 1px solid rgba(255, 255, 255, .16); padding: 7px 10px; border-radius: 5px; white-space: nowrap; }
.board-shot .grain { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(0, 0, 0, .45) 100%); }
.board-cap { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 640px) { .board-shot { aspect-ratio: 5 / 4; } .board-shot .callout b { font-size: 11.5px; } }

/* hero board, photographed
   The drawn board read as artificial, so the hero carries a real photograph of a laptop
   motherboard, cut out of its white studio background and set on the dark bench. It is shown
   at its native width so it stays sharp; the frame around it is bench, not an upscaled crop. */
.board-photo {
  position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-lg); overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(120% 95% at 50% 18%, #2C3138, #12151A 72%);
  box-shadow: 0 40px 70px -40px rgba(20, 23, 27, .75);
}
.board-photo .shot { position: relative; z-index: 1; display: block; width: min(90%, 480px); }
.board-photo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .6)); }
.board-photo .grain { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(115% 88% at 50% 6%, transparent 42%, rgba(0, 0, 0, .5) 100%); }
/* the ring marks the main processor package, the level this workshop works at */
.board-photo .fault {
  position: absolute; left: 35%; top: 25%; width: 14%; height: 19%;
  border: 2px solid var(--orange); border-radius: 5px; box-shadow: 0 0 0 6px rgba(245, 144, 35, .18);
}
.board-photo .fault::after {
  content: ''; position: absolute; inset: -10px; border-radius: 9px;
  border: 1px solid rgba(245, 144, 35, .5); animation: faultpulse 2.6s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) { .board-photo .fault::after { animation: none; opacity: .5; } }
.board-photo .callout { position: absolute; left: 35%; top: 22%; transform: translateY(-100%); }
.board-photo .callout b {
  font: 500 12.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: #fff;
  background: rgba(12, 18, 25, .88); border: 1px solid rgba(255, 255, 255, .18);
  padding: 7px 10px; border-radius: 5px; white-space: nowrap;
}
@media (max-width: 640px) {
  .board-photo { aspect-ratio: 5 / 4; }
  .board-photo .shot { width: 94%; }
  .board-photo .callout b { font-size: 11px; padding: 6px 8px; }
}

/* 404 art without the drawn laptop */
.nf-art { display: grid; place-items: center; min-height: 220px; }
.nf-code { font: 500 clamp(90px, 16vw, 190px)/1 var(--mono); letter-spacing: -.04em; color: #7f7d77; }
/* the components photo frame in the choose-the-part section */
.parts-stage .ph.wide { aspect-ratio: 4 / 3; }

/* ═══ brands we repair ═══
   A slow marquee: it gives the page a piece of continuous motion without anything pretending to be
   a photograph, pauses on hover and stops entirely for reduced-motion. Logos are shown in mono so
   one loud brand colour cannot fight the orange. */
.brands { background: var(--plate); color: var(--ink-2); padding: 34px 0; overflow: hidden; border-block: 1px solid var(--line); }
.brands-lbl { font: 500 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-plate); text-align: center; margin: 0 0 22px; }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
/* left to right: the track starts shifted a full copy back and slides forward, so the loop is seamless */
@keyframes marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 26px 44px; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track > .mq-dup { display: none; }
}
/* screen blending drops the solid black background of each logo file into the graphite band,
   leaving only the white mark; opacity keeps any single brand from shouting over the others */
.brand-mark { display: inline-flex; align-items: center; justify-content: center; height: 46px; flex: none; }
/* the logo file is a colourless silhouette; it masks a block of the brand's own colour */
/* inline SVG, so the logo needs no mask and no second request */
.brand-mark svg { width: 100%; height: 100%; }
.brand-mark { width: 54px; height: 40px; opacity: .92; transition: opacity .2s ease; }
.marquee:hover .brand-mark { opacity: 1; }

/* 700 at 22px counts as large text, so each brand colour is judged at 3:1 rather than 4.5:1 */
.brand-word { flex: none; font: 700 22px/1 var(--font); letter-spacing: -.015em; color: var(--bc); white-space: nowrap; opacity: .9; }
.marquee:hover .brand-word { opacity: 1; }
@media (max-width: 640px) { .marquee-track { gap: 38px; } .brand-mark { height: 36px; } .brand-word { font-size: 19px; } }

/* real component photographs, presented as what they are rather than dressed up as bench shots */
.part-photo { margin: 0; background: var(--plate); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: grid; gap: 12px; justify-items: center; }
.part-photo img { width: 100%; max-width: 420px; height: auto; mix-blend-mode: multiply; }
.part-photo figcaption { font-size: 14px; color: var(--on-plate); text-align: center; max-width: 44ch; }
.work-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 641px) { .work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.work-grid a { display: grid; gap: 6px; justify-items: start; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: var(--ink); height: 100%; transition: border-color .18s ease, transform .18s ease; }
.work-grid a:hover { border-color: var(--ink); transform: translateY(-2px); }
.work-grid .w-img { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 4px; background: var(--plate); border-radius: var(--r); }
.work-grid .w-img img { max-width: 82%; height: auto; mix-blend-mode: multiply; }
.work-grid b { font-weight: 500; font-size: 16.5px; }
.work-grid .w-blurb { font-size: 14px; color: var(--ink-3); line-height: 1.45; }

/* A frame still waiting on a photograph should look like a considered placeholder, not a broken
   image. Faint ruled ground, camera mark, and a plain label saying what belongs there. */
.ph { background: linear-gradient(180deg, var(--paper-2), var(--paper-3)); border: 1px dashed var(--line-2); position: relative; }
.ph::before { content: ''; position: absolute; inset: 10px; border-radius: 8px; background-image: repeating-linear-gradient(90deg, rgba(20,23,27,.05) 0 1px, transparent 1px 22px), repeating-linear-gradient(0deg, rgba(20,23,27,.05) 0 1px, transparent 1px 22px); pointer-events: none; }
.ph span { position: relative; z-index: 1; }
.ph b { color: var(--ink-2); }

/* ═══════════ MOTION ═══════════
   Driven by assets/motion.js (GSAP). These rules only set starting states and hover feel;
   every one of them is inert when motion is off. */

/* the secondary hero pieces wait for their cue; the headline and photo are never hidden */
.motion-pending .hero-board .h1-kw, .motion-pending .hero-board .said, .motion-pending .hero-board .cta-row .btn,
.motion-pending .hero-board .h-ticks > span, .motion-pending .hero-board .strip-label, .motion-pending .hero-board .chip-link,
.motion-pending .svc-hero .symptom-line, .motion-pending .svc-hero .lead, .motion-pending .svc-hero .cta-row .btn,
.motion-pending .svc-hero .hero-fine, .motion-pending .phero .lead { opacity: 0; }

/* GSAP animates the contents of each section, so the old whole-section fade stands down */
.motion-on .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* "the part that failed": the underline draws itself left to right */
.hero-board .hero-display em { text-decoration: none;
  background-image: linear-gradient(var(--orange), var(--orange)); background-repeat: no-repeat;
  background-position: 0 94%; background-size: 100% .085em; transition: background-size 1.1s cubic-bezier(.16, 1, .3, 1); }
.motion-on .hero-board .hero-display em:not(.drawn) { background-size: 0% .085em; }

/* cards lift a little under the pointer; photos inside them lean in */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cell, .rv, .prod, .work-grid a, .dx-tile, .chip-link, .aside-card, .related a {
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease, border-color .25s ease, background .25s ease; }
  .cell:hover, .prod:hover, .work-grid a:hover, .aside-card:hover, .related a:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
  .rv:hover { transform: translateY(-3px); }
  .dx-tile:hover, .chip-link:hover { transform: translateY(-2px); }
  .cell-img img, .prod-img img, .work-grid .w-img img { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
  .cell:hover .cell-img img, .prod:hover .prod-img img, .work-grid a:hover .w-img img { transform: scale(1.06); }
  .text-link svg, .cell svg:last-child { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
  .text-link:hover svg, .cell:hover svg:last-child { transform: translateX(4px); }
  .btn { transition: background .2s ease, border-color .2s ease, box-shadow .3s ease, transform .15s ease; }
}

/* the hero board breathes gently while it sits there */
@media (prefers-reduced-motion: no-preference) {
  .motion-on .hx-stage img, .motion-on .board-photo .shot { animation: board-float 7s ease-in-out infinite; transform-style: preserve-3d; }
}
@keyframes board-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* a hairline of progress across the top */
.scroll-progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, var(--orange), var(--orange-2)); transform-origin: 0 50%; transform: scaleX(0); }

/* the header tightens and gains a shadow once the page moves */
.hdr { transition: box-shadow .3s ease, background .3s ease; }
.hdr.is-scrolled { box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .45); }
.hdr .hdr-in { transition: min-height .3s ease; }
.hdr.is-scrolled .hdr-in { min-height: 60px; }

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .hero-board .hero-display em { transition: none; background-size: 100% .085em !important; }
}

/* ═══════════ HOME HERO (.hx) ═══════════
   One markup, two looks: light renders the warm-studio sample (B), dark renders the
   precision-dark sample (A). Built to those samples, not a recolour of the old hero. */
.hx { position: relative; padding: clamp(28px, 5vw, 64px) 0 clamp(48px, 6vw, 84px); overflow: hidden; }
.hx-grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1024px) { .hx-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; } }

.hx-proof { display: inline-flex; align-items: center; gap: 11px; padding: 7px 16px 7px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 14.5px; color: var(--ink-2); text-decoration: none; }
.hx-proof b { color: var(--ink); }
.hx-av { display: inline-flex; }
.hx-av i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); margin-left: -9px; }
.hx-av i:first-child { margin-left: 0; background: linear-gradient(135deg, #9BC4A8, #4E8A64); }
.hx-av i:nth-child(2) { background: linear-gradient(135deg, #9FB6D8, #4C6FA5); }
.hx-av i:nth-child(3) { background: linear-gradient(135deg, #F6B26B, #E07B14); }

.hx-kw { margin: 22px 0 10px; font: 500 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hx-title { margin: 0 0 20px; font-weight: 600; font-size: clamp(42px, 5.4vw, 70px); line-height: 1.01; letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.hx-title em { font-style: normal; color: #C4630A; }  /* 3.8:1 on cream: passes as large text, and reads as orange */
.hx-sub { margin: 0 0 30px; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 50ch; }
.hx-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hx-cta .btn { border-radius: 14px; }
.hx-stats { display: flex; gap: clamp(22px, 4vw, 44px); margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.hx-stats b { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.hx-stats span { font-size: 13.5px; color: var(--ink-3); }
.hx-star { color: var(--orange); font-size: .8em; margin-left: 2px; }

.hx-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 24px; box-shadow: var(--shadow-lg); }
.hx-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.hx-card-top b { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.hx-card-top span { font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: #E8F5EC; color: #1F7A45; white-space: nowrap; }
.hx-stage { position: relative; border-radius: 18px; padding: 26px 18px; background: radial-gradient(90% 80% at 50% 40%, #FFFFFF, #F5EDE2 88%); display: grid; place-items: center; overflow: hidden; }
.hx-stage img { width: 96%; height: auto; filter: drop-shadow(0 22px 24px rgba(64, 42, 14, .3)); }
.hx-stage .fault { position: absolute; left: 41%; top: 36%; width: 13%; height: 19%; border: 2px solid var(--orange); border-radius: 6px;
  box-shadow: 0 0 0 6px rgba(245, 144, 35, .16); }
.hx-stage .fault::after { content: ""; position: absolute; inset: -10px; border-radius: 10px; border: 1px solid rgba(245, 144, 35, .5); animation: faultpulse 2.6s ease-out infinite; }
.hx-pin { position: absolute; left: 39%; top: 22%; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  background: #14171B; color: #FFE2BD; padding: 7px 10px; border-radius: 6px; white-space: nowrap; }
.hx-steps { list-style: none; margin: 18px 4px 2px; padding: 0; display: grid; gap: 10px; }
.hx-steps li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-3); }
.hx-steps li.done, .hx-steps li.now { color: var(--ink); }
.hx-steps i { flex: none; width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--font); font-style: normal;
  background: var(--paper-2); color: var(--ink-3); }
.hx-steps li.done i { background: var(--orange); color: var(--on-accent); }
.hx-steps li.now i { background: transparent; border: 2px solid var(--orange); color: var(--orange-ink); }

/* ── quote band: the review, big ── */
.qband { padding-top: 0; }
.qband-in { margin: 0; display: grid; gap: 24px; align-items: center; grid-template-columns: minmax(0, 1fr);
  background: #1B1712; color: #F6EEE3; border-radius: 28px; padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px); }
@media (min-width: 820px) { .qband-in { grid-template-columns: auto minmax(0, 1fr); gap: 40px; } }
.qband-score b { display: block; font-size: clamp(56px, 6vw, 76px); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: #fff; }
.qband-score span { font-size: 14px; color: #CDBFAE; }
.qband blockquote { margin: 0; }
.qband blockquote p:not(.qband-by) { margin: 0 0 14px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; color: #F6EEE3; }
.qband .qband-by { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #CDBFAE; }
.qband .qband-by svg { width: 17px; height: 17px; }

/* ── dark (A): the diagnostic lab ── */
:root[data-theme="dark"] .hx { background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; }
:root[data-theme="dark"] .hx-proof { background: rgba(245,144,35,.07); border-color: rgba(245,144,35,.35); box-shadow: none; font: 500 12.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--orange-ink); padding: 8px 14px; }
:root[data-theme="dark"] .hx-proof b { color: var(--orange-ink); }
:root[data-theme="dark"] .hx-av { display: none; }
:root[data-theme="dark"] .hx-proof::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px var(--orange); }
:root[data-theme="dark"] .hx-title em { background: linear-gradient(90deg, #F59023, #FFC37A); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .hx-cta .btn { border-radius: 9px; }
:root[data-theme="dark"] .hx-card { background: radial-gradient(80% 70% at 50% 30%, #1C2027, #0C0E11 78%); border-color: rgba(255,255,255,.09); border-radius: 16px; box-shadow: 0 50px 90px -40px rgba(0,0,0,.9); }
:root[data-theme="dark"] .hx-card-top b { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #9AA1AB; }
:root[data-theme="dark"] .hx-card-top span { background: rgba(245,144,35,.1); color: var(--orange-ink); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
:root[data-theme="dark"] .hx-stage { background: transparent; }
:root[data-theme="dark"] .hx-stage img { filter: drop-shadow(0 30px 40px rgba(0,0,0,.75)); }
:root[data-theme="dark"] .hx-pin { background: rgba(8,9,11,.92); border: 1px solid rgba(245,144,35,.5); }
:root[data-theme="dark"] .hx-steps { gap: 0; margin: 16px 0 0; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; overflow: hidden; }
:root[data-theme="dark"] .hx-steps li { gap: 14px; padding: 11px 14px; font-size: 14px; background: rgba(255,255,255,.015); border-top: 1px solid rgba(255,255,255,.06); }
:root[data-theme="dark"] .hx-steps i { width: auto; height: auto; background: none !important; border: 0 !important; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; color: #7D848E; }
:root[data-theme="dark"] .hx-steps li.done i, :root[data-theme="dark"] .hx-steps li.now i { color: var(--orange-ink); }
:root[data-theme="dark"] .qband-in { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; }
:root[data-theme="dark"] .qband-score b { background: linear-gradient(90deg, #F59023, #FFC37A); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hx { background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; }
  :root:not([data-theme="light"]) .hx-proof { background: rgba(245,144,35,.07); border-color: rgba(245,144,35,.35); box-shadow: none; font: 500 12.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--orange-ink); padding: 8px 14px; }
  :root:not([data-theme="light"]) .hx-proof b { color: var(--orange-ink); }
  :root:not([data-theme="light"]) .hx-av { display: none; }
  :root:not([data-theme="light"]) .hx-proof::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px var(--orange); }
  :root:not([data-theme="light"]) .hx-title em { background: linear-gradient(90deg, #F59023, #FFC37A); -webkit-background-clip: text; background-clip: text; color: transparent; }
  :root:not([data-theme="light"]) .hx-cta .btn { border-radius: 9px; }
  :root:not([data-theme="light"]) .hx-card { background: radial-gradient(80% 70% at 50% 30%, #1C2027, #0C0E11 78%); border-color: rgba(255,255,255,.09); border-radius: 16px; box-shadow: 0 50px 90px -40px rgba(0,0,0,.9); }
  :root:not([data-theme="light"]) .hx-card-top b { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #9AA1AB; }
  :root:not([data-theme="light"]) .hx-card-top span { background: rgba(245,144,35,.1); color: var(--orange-ink); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  :root:not([data-theme="light"]) .hx-stage { background: transparent; }
  :root:not([data-theme="light"]) .hx-stage img { filter: drop-shadow(0 30px 40px rgba(0,0,0,.75)); }
  :root:not([data-theme="light"]) .hx-pin { background: rgba(8,9,11,.92); border: 1px solid rgba(245,144,35,.5); }
  :root:not([data-theme="light"]) .hx-steps { gap: 0; margin: 16px 0 0; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; overflow: hidden; }
  :root:not([data-theme="light"]) .hx-steps li { gap: 14px; padding: 11px 14px; font-size: 14px; background: rgba(255,255,255,.015); border-top: 1px solid rgba(255,255,255,.06); }
  :root:not([data-theme="light"]) .hx-steps i { width: auto; height: auto; background: none !important; border: 0 !important; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; color: #7D848E; }
  :root:not([data-theme="light"]) .hx-steps li.done i, :root:not([data-theme="light"]) .hx-steps li.now i { color: var(--orange-ink); }
  :root:not([data-theme="light"]) .qband-in { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; }
  :root:not([data-theme="light"]) .qband-score b { background: linear-gradient(90deg, #F59023, #FFC37A); -webkit-background-clip: text; background-clip: text; color: transparent; }
}

.motion-pending .hx-proof, .motion-pending .hx-kw, .motion-pending .hx-sub, .motion-pending .hx-cta .btn, .motion-pending .hx-stats > div, .motion-pending .hx-card-top, .motion-pending .hx-steps li, .motion-pending .hx-pin { opacity: 0; }
/* dark readout rows: number column, then status on the right for the step in progress */
:root[data-theme="dark"] .hx-steps li:first-child { border-top: 0; }
:root[data-theme="dark"] .hx-steps i { min-width: 22px; }
:root[data-theme="dark"] .hx-steps li.now { background: rgba(245,144,35,.07); }
:root[data-theme="dark"] .hx-steps li.now::after { content: "In progress"; margin-left: auto; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hx-steps li:first-child { border-top: 0; }
  :root:not([data-theme="light"]) .hx-steps i { min-width: 22px; }
  :root:not([data-theme="light"]) .hx-steps li.now { background: rgba(245,144,35,.07); }
  :root:not([data-theme="light"]) .hx-steps li.now::after { content: "In progress"; margin-left: auto; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); }
}
/* the label sits clearly above the ring rather than touching it */
.hx-pin { top: 17%; }

/* scroll animations measure section positions; content-visibility swaps real heights for
   placeholders as you scroll, which left below-fold sections stuck invisible. Off when motion runs. */
.motion-on .parts-sec, .motion-on .proc, .motion-on .svc, .motion-on .work, .motion-on .cost-teaser, .motion-on .wall, .motion-on .know, .motion-on .loc, .motion-on .quote-sec, .motion-on .faq-sec, .motion-on .rel-sec, .motion-on .counters-sec, .motion-on .chapter, .motion-on .wall-mini { content-visibility: visible; }
/* ═══════════ BELOW THE HERO, in the sample language ═══════════ */

/* part tiles: the 900px photos were sizing the grid track, so plates spilled out of their cards
   and cut the caption off. One flexible column, and the photo fits inside it. */
.work-grid li { min-width: 0; }
.work-grid a { grid-template-columns: minmax(0, 1fr); justify-items: stretch; align-content: start; }
.work-grid .w-img img { width: auto; max-width: 82%; max-height: 86%; object-fit: contain; }

/* process: six cards instead of a ruled list. Light = warm tiles (B), dark = lab readout cards (A) */
.steps { gap: 14px; }
.steps li, .steps li:nth-child(-n+3) { padding: 24px 24px 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); align-content: start; }
.steps li b { position: static; justify-self: start; display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%;
  background: var(--orange); color: var(--on-accent); font: 700 13px/1 var(--font); letter-spacing: 0; }
.steps li:nth-child(n+4) b { background: transparent; border: 2px solid var(--orange); color: var(--orange-ink); }
.steps h3 { margin: 0; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 640px) { .steps li, .steps li:nth-child(-n+3) { padding: 20px; } }

:root[data-theme="dark"] .steps li, :root[data-theme="dark"] .steps li:nth-child(-n+3) { border-radius: 14px; border-color: rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); box-shadow: none; }
:root[data-theme="dark"] .steps li b, :root[data-theme="dark"] .steps li:nth-child(n+4) b { width: auto; height: auto; margin-bottom: 26px; border: 0; border-radius: 0; background: none; font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--orange-ink); }
:root[data-theme="dark"] .steps li:hover { border-color: rgba(245,144,35,.35); }

/* the part explorer plate: white stays (the photos are shot on white), but in dark it is a
   framed specimen, not a floodlight */
:root[data-theme="dark"] .part-photo { max-width: 520px; justify-self: center; border-color: rgba(255,255,255,.12); box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 6px rgba(255,255,255,.03); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .steps li, :root:not([data-theme="light"]) .steps li:nth-child(-n+3) { border-radius: 14px; border-color: rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); box-shadow: none; }
  :root:not([data-theme="light"]) .steps li b, :root:not([data-theme="light"]) .steps li:nth-child(n+4) b { width: auto; height: auto; margin-bottom: 26px; border: 0; border-radius: 0; background: none; font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--orange-ink); }
  :root:not([data-theme="light"]) .steps li:hover { border-color: rgba(245,144,35,.35); }
  :root:not([data-theme="light"]) .part-photo { max-width: 520px; justify-self: center; border-color: rgba(255,255,255,.12); box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 6px rgba(255,255,255,.03); }
}

/* phone: the proof pill stays on one or two tidy lines, and the two actions fill the width */
@media (max-width: 640px) {
  .hx-proof { font-size: 13.5px; padding-right: 14px; }
  :root .hx-proof { letter-spacing: .02em; }
  .hx-cta .btn { width: 100%; justify-content: center; }
  .hx-stats { gap: 18px; justify-content: space-between; }
  .hx-stats b { font-size: 24px; }
}
@media (max-width: 640px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hx-proof { font-size: 11px; } }
@media (max-width: 640px) { :root[data-theme="dark"] .hx-proof { font-size: 11px; } }

/* dark (A): the brand strip is a quiet mono row on the lab surface, not a white floodlight bar */
:root[data-theme="dark"] .brands { background: transparent; border-color: rgba(255,255,255,.07); }
:root[data-theme="dark"] .brands-lbl { color: #8E959F; }
:root[data-theme="dark"] .brands svg { filter: brightness(0) invert(.82); opacity: .8; transition: opacity .2s, filter .2s; }
:root[data-theme="dark"] .brands a:hover svg { filter: none; opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brands { background: transparent; border-color: rgba(255,255,255,.07); }
  :root:not([data-theme="light"]) .brands-lbl { color: #8E959F; }
  :root:not([data-theme="light"]) .brands svg { filter: brightness(0) invert(.82); opacity: .8; transition: opacity .2s, filter .2s; }
  :root:not([data-theme="light"]) .brands a:hover svg { filter: none; opacity: 1; }
}
/* ═══════════ SERVICE HERO, in the home-hero language ═══════════
   Light (B): cream page, the part shown in a white studio card. Dark (A): grid lab, the part on a
   lit plate inside a readout card. Same markup as before; only the look changes. */
.svc-hero { background: var(--paper); color: var(--ink); }
.svc-hero .crumbs, .svc-hero .crumbs a { color: var(--ink-3); }
.svc-hero .crumbs li[aria-current] { color: var(--ink); }
.svc-hero .symptom-line { color: var(--orange-ink); }
.svc-hero h1 { color: var(--ink); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; }
.svc-hero .lead { color: var(--ink-2); }
.svc-hero .btn-ghost { color: var(--ink); border-color: var(--line-2); }
.svc-hero .hero-fine { color: var(--ink-3); }
.svc-hero .cta-row .btn { border-radius: 14px; }
.svc-img { position: relative; aspect-ratio: auto; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-lg); }
.svc-img::before { content: ""; position: absolute; inset: 22px; border-radius: 18px; background: radial-gradient(90% 80% at 50% 40%, #FFFFFF, #F5EDE2 88%); }
.svc-img img { position: relative; mix-blend-mode: multiply; filter: none; padding: 20px 0; }
.svc-img .ph { position: relative; }
.svc-labels { color: var(--ink-3); }
.svc-visual.labels-only { background: var(--surface); border-color: var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.svc-visual.labels-only .lo-head { color: var(--ink-3); }
.svc-visual.labels-only .svc-labels { color: var(--ink); }
.svc-hero .crumbs li[aria-current], .phero.dark .crumbs li[aria-current] { color: var(--ink); }

:root[data-theme="dark"] .svc-hero { background-color: var(--paper); background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; }
:root[data-theme="dark"] .svc-hero .cta-row .btn { border-radius: 9px; }
:root[data-theme="dark"] .svc-img { background: radial-gradient(80% 70% at 50% 30%, #1C2027, #0C0E11 78%); border-color: rgba(255,255,255,.09); border-radius: 16px; box-shadow: 0 50px 90px -40px rgba(0,0,0,.9); }
:root[data-theme="dark"] .svc-img::before { background: #fff; border-radius: 10px; box-shadow: 0 0 0 6px rgba(255,255,255,.03); }
:root[data-theme="dark"] .svc-labels { color: #9AA1AB; }
:root[data-theme="dark"] .svc-visual.labels-only { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); border-color: rgba(255,255,255,.08); border-radius: 14px; box-shadow: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .svc-hero { background-color: var(--paper); background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; }
  :root:not([data-theme="light"]) .svc-hero .cta-row .btn { border-radius: 9px; }
  :root:not([data-theme="light"]) .svc-img { background: radial-gradient(80% 70% at 50% 30%, #1C2027, #0C0E11 78%); border-color: rgba(255,255,255,.09); border-radius: 16px; box-shadow: 0 50px 90px -40px rgba(0,0,0,.9); }
  :root:not([data-theme="light"]) .svc-img::before { background: #fff; border-radius: 10px; box-shadow: 0 0 0 6px rgba(255,255,255,.03); }
  :root:not([data-theme="light"]) .svc-labels { color: #9AA1AB; }
  :root:not([data-theme="light"]) .svc-visual.labels-only { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); border-color: rgba(255,255,255,.08); border-radius: 14px; box-shadow: none; }
}
/* ═══════════ PAGE HEROES (.phero): answers, guides, brands, areas, about ═══════════
   Same typography as the home hero; the breadcrumb gets air above the label; light carries a warm
   studio glow on the empty side, dark carries the lab grid. */
.phero { position: relative; padding-top: 22px; background: radial-gradient(55% 90% at 88% 20%, rgba(245,144,35,.09), transparent 62%), var(--paper); }
.phero .crumbs { margin-bottom: 30px; }
.phero .eyebrow, .phero .symptom-line { margin-top: 0; }
.phero h1 { font-weight: 600; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.phero .cta-row .btn { border-radius: 14px; }
.phero.dark { background: var(--paper); color: var(--ink); }
.phero.dark h1 { color: var(--ink); }
.phero.dark .lead, .phero.dark .crumbs, .phero.dark .crumbs a, .phero.dark .eyebrow { color: var(--ink-2); }
.svc-hero .crumbs { margin-bottom: 18px; }

:root[data-theme="dark"] .phero { background-color: var(--paper); background-image: radial-gradient(50% 80% at 85% 20%, rgba(245,144,35,.07), transparent 60%), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: auto, 48px 48px, 48px 48px; }
:root[data-theme="dark"] .phero .cta-row .btn { border-radius: 9px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phero { background-color: var(--paper); background-image: radial-gradient(50% 80% at 85% 20%, rgba(245,144,35,.07), transparent 60%), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: auto, 48px 48px, 48px 48px; }
  :root:not([data-theme="light"]) .phero .cta-row .btn { border-radius: 9px; }
}

/* product cards outside the dark showroom band (the parts page) follow the page theme: white
   tiles on cream in light (B), glass cards in dark (A) */
section:not(.shop) .prod { background: var(--surface); border-color: var(--line); border-radius: 22px; box-shadow: var(--shadow); }
section:not(.shop) .prod h3, section:not(.shop) .prod .prod-name { color: var(--ink); }
section:not(.shop) .prod .spec { color: var(--ink-3); }
section:not(.shop) .prod .btn-ghost { color: var(--ink); border-color: var(--line-2); }
.contact-hero .crumbs { margin-bottom: 30px; }
section:not(.shop) .prod .wa-link, section:not(.shop) .prod .wa-link.dark { background: transparent; color: var(--ink); }
/* the laptops hero now follows the theme, so its tabs do too */
.phero .tabs [role=tab] { color: var(--ink-2); border-color: var(--line-2); }
.phero .tabs [role=tab][aria-selected="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.phero .tabs { margin-top: 26px; }

/* phone/tablet menu: backdrop-filter on the header makes it the containing block for the fixed
   .sheet, which squeezed the whole menu into the 60px header. Solid header below desktop. */
@media (max-width: 1023px) {
  .hdr { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
  .mnav[open] .sheet { z-index: 60; }
}
/* anything the scripts hide stays hidden, whatever display a component sets (review filter showed all 120) */
[hidden] { display: none !important; }
/* open menu: the fixed Call/WhatsApp dock sat above the sheet and covered its last button */
body:has(.mnav[open]) .dock { display: none; }
.sheet { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.svc-ill .panel-ill { position: relative; width: 78%; }
/* small phones: 44px tap targets in the header. The header quote button gives way below 380px;
   the bottom Call / WhatsApp dock carries the action there. */
@media (max-width: 1023px) { .theme-toggle, .mnav summary { width: 44px; height: 44px; min-width: 44px; } }
@media (max-width: 379px) { .hdr-act > .btn-primary { display: none; } }
.theme-toggle { width: 44px; min-width: 44px; height: 44px; }
/* form: +91 prefix, per-field errors, message counter */
.f-tel { display: flex; align-items: stretch; }
.f-cc { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line-2); border-right: 0; border-radius: var(--r) 0 0 var(--r); background: var(--paper-2); color: var(--ink-2); font: 500 16px/1 var(--font); }
.f-tel input { border-radius: 0 var(--r) var(--r) 0; min-width: 0; }
.f-err { margin: -2px 0 0; min-height: 1.35em; font-size: 14px; line-height: 1.35; font-weight: 500; color: #A3261B; } /* space reserved: an error appearing on blur must never move the submit button out from under a tap */

.f.has-err input, .f.has-err select, .f.has-err .f-cc { border-color: #C0392B; }
.f.has-err input, .f.has-err select { box-shadow: 0 0 0 1px #C0392B inset; }
.f-count { margin: 0; font-size: 13px; color: var(--ink-3); text-align: right; }
:root[data-theme="dark"] .f-err { color: #FF8A7A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .f-err { color: #FF8A7A; } }