/* --- Fonts, self-hosted ---------------------------------------------------
   These were loaded from fonts.googleapis.com. Serving them ourselves removes
   two third-party origins from the critical path -- a DNS lookup and a TLS
   handshake each, which is most of the cost on a mobile connection -- and a
   render-blocking stylesheet from a server we do not control. It also lets
   them be cached with our own immutable headers; a cross-origin font is no
   longer shared between sites anyway, since browsers partition that cache.

   Archivo and Inter are variable fonts: one file covers every weight, which is
   why the same src appears under several font-weight ranges. IBM Plex Mono is
   static, so it needs a file per weight.

   Only the latin subset is hosted, plus greek for Inter. Every character on
   the site is inside latin except the ohm sign in the instrumentation specs,
   and that is Inter. A browser fetches a face only when the page actually
   contains a character in its unicode-range, so the greek file is downloaded
   on those pages alone.

   font-display: swap matches what Google served: text paints immediately in
   the fallback and reflows when the face arrives, rather than being invisible.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url('../fonts/archivo-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: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/inter-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: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/inter-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/plexmono-400-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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/plexmono-500-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: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/plexmono-700-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;
}

/* =========================================================================
   K&N AUTOMATION — Design System v2
   Siemens Authorized System House
   Deliberately distinct from Siemens' own visual language:
   K&N red leads, deep ink structures, petrol used only as a technical accent.
   ========================================================================= */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Ink */
  --ink-950: #070C12;
  --ink-900: #0B131C;
  --ink-850: #101B27;
  --ink-800: #16232F;
  --ink-700: #22344A;
  --ink-600: #33495F;

  /* Brand */
  --red-700: #A9151B;
  --red-600: #C8202A;
  --red-500: #D8232A;
  --red-100: #FDE7E8;
  --red-050: #FEF4F4;

  /* Technical accent (used sparingly) */
  --pet-700: #00696B;
  --pet-600: #008083;
  --pet-500: #009B9E;
  --pet-100: #DFF3F3;
  --pet-050: #F0FAFA;

  /* Brand orange, sampled from the logo artwork (#F65802 is the exact value
     used on the K and the N). 500 is the logo colour; 600/700 are darkened for
     hover states and for text that has to stay legible on a light ground. */
  --org-700: #B23F02;
  --org-600: #D94D02;
  --org-500: #F65802;
  --org-100: #FCE0CE;
  --org-050: #FFF5EF;

  /* Neutral */
  --n-000: #FFFFFF;
  --n-025: #FAFBFC;
  --n-050: #F4F6F8;
  --n-100: #EBEEF2;
  --n-200: #DDE3EA;
  --n-300: #C3CCD7;
  --n-400: #97A4B4;
  --n-500: #6B7B8F;
  --n-600: #4E5D70;
  --n-700: #364456;

  /* Status */
  --ok-600: #0E7A50;
  --ok-100: #DCF5E9;
  --warn-600: #A96A00;
  --warn-100: #FDF0D8;

  /* Semantic */
  --bg: var(--n-000);
  --bg-sunken: var(--n-050);
  --text: var(--ink-800);
  --text-mute: var(--n-600);
  --text-soft: var(--n-500);
  --line: var(--n-200);
  --line-soft: var(--n-100);

  /* Type */
  --f-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --f-ui: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Type scale */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   1.25rem;

  /* Metrics */
  --wrap: 1300px;
  --wrap-narrow: 900px;
  --gutter: clamp(1.125rem, 3.5vw, 2.5rem);
  /* Vertical rhythm. Was clamp(3.5rem, 7vw, 6.5rem) -- 104px top and bottom at
     1440px, so 208px of nothing sat between every pair of sections and roughly
     a quarter of a page's height was padding. Tightened to 64px, which still
     separates the blocks clearly at a glance but stops the pages running on. */
  --sec-y: clamp(2.5rem, 4.2vw, 4rem);
  --hdr-h: 72px;
  --bar-h: 38px;

  /* Radius */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 100px;

  /* Elevation */
  --e-1: 0 1px 2px rgba(11,19,28,.05), 0 1px 3px rgba(11,19,28,.06);
  --e-2: 0 2px 4px rgba(11,19,28,.05), 0 4px 10px -2px rgba(11,19,28,.07);
  --e-3: 0 8px 16px -4px rgba(11,19,28,.09), 0 4px 8px -4px rgba(11,19,28,.06);
  --e-4: 0 18px 36px -12px rgba(11,19,28,.16), 0 8px 16px -8px rgba(11,19,28,.08);
  --e-5: 0 32px 64px -18px rgba(11,19,28,.24);

  /* Motion */
  --ease: cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-1: .16s;
  --dur-2: .26s;
  --dur-3: .42s;

  --z-header: 100;
  --z-mega: 110;
  --z-scrim: 150;
  --z-drawer: 160;
  --z-toast: 200;
}

/* --- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 20px);
}
body {
  font-family: var(--f-ui);
  font-size: var(--t-base);
  line-height: 1.62;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
:focus-visible {
  outline: 2px solid var(--pet-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
::selection { background: var(--red-500); color: #fff; }

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

/* --- 3. Typography ------------------------------------------------------ */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.022em;
  color: var(--ink-900);
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); letter-spacing: -.032em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.125rem, 1.7vw, 1.375rem); letter-spacing: -.018em; }
h4 { font-size: var(--t-md); font-weight: 600; letter-spacing: -.012em; }
p { color: var(--text-mute); text-wrap: pretty; }

.display {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.038em;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-600);
  margin-bottom: .875rem;
}
.kicker::before {
  content: "";
  width: 24px; height: 2px;
  background: currentColor;
  flex: none;
}
.kicker--pet { color: var(--pet-600); }
.kicker--light { color: #7FD4D6; }
.kicker--onred { color: #FFC7CA; }

.lede { font-size: clamp(var(--t-md), 1.5vw, 1.1875rem); line-height: 1.68; color: var(--text-mute); }
.mono { font-family: var(--f-mono); font-size: var(--t-sm); letter-spacing: .01em; }

.sec-head { max-width: 60ch; margin-bottom: clamp(1.5rem, 2.5vw, 2.125rem); }
.sec-head p { margin-top: .875rem; }
.sec-head--mid { margin-inline: auto; text-align: center; }
.sec-head--mid .kicker { justify-content: center; }

/* Heading on the left, one action on the right. The 60ch measure moves to the
   text block, since it is the prose that needs a readable line length, not the
   row. `margin-bottom: 0` because a split head is the whole section — there is
   nothing below it to space away from. Stacks under 720px, where the two would
   otherwise squeeze each other. */
.sec-head--split {
  max-width: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 0;
}
.sec-head--split > div { max-width: 60ch; }
.sec-head--split > .btn { flex: none; }
@media (max-width: 720px) {
  .sec-head--split { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .sec-head--split > .btn { width: 100%; }
}

/* --- 4. Layout ---------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--sec-y); }
.section--sm { padding-block: clamp(1.75rem, 3vw, 2.75rem); }
.section--sunken { background: var(--bg-sunken); }

/* Two plain sections in a row each pay their own padding, so the visible gap
   between them is double what either asked for. Trimming the second one's top
   halves that: the blocks still read as separate, without the void.

   Only when NEITHER has a background. On a sunken or ink band the padding is
   the band's own inset, and cutting it would push the heading up against the
   coloured edge. */
.section:not(.section--sunken):not(.section--ink)
  + .section:not(.section--sunken):not(.section--ink) {
  padding-top: calc(var(--sec-y) * .5);
}

.section--ink { background: var(--ink-900); color: #B9C6D4; }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink p { color: #92A2B5; }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split--wide-l { grid-template-columns: 1.25fr .75fr; }
.split--wide-r { grid-template-columns: .8fr 1.2fr; }
.split--top { align-items: start; }

@media (max-width: 1000px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .split, .split--wide-l, .split--wide-r { grid-template-columns: 1fr; }
}
@media (max-width: 820px) { .g3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.stack > * + * { margin-top: var(--stack-gap, 1rem); }
.flow > * + * { margin-top: 1.5rem; }

/* --- 5. Buttons --------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink-800);
  --btn-fg: #fff;
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8125rem 1.5rem;
  font-family: var(--f-ui);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              background var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--e-3); }
.btn:active { transform: translateY(0); box-shadow: var(--e-1); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn .ico-r { transition: transform var(--dur-2) var(--ease); }
.btn:hover .ico-r { transform: translateX(3px); }

.btn--primary { --btn-bg: var(--red-600); }
.btn--primary:hover { --btn-bg: var(--red-700); }
.btn--ink { --btn-bg: var(--ink-800); }
.btn--ink:hover { --btn-bg: var(--ink-900); }
.btn--pet { --btn-bg: var(--pet-600); }
.btn--pet:hover { --btn-bg: var(--pet-700); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink-800); --btn-bd: var(--n-300); }
.btn--ghost:hover { --btn-bg: var(--ink-800); --btn-fg: #fff; --btn-bd: var(--ink-800); }
.btn--soft { --btn-bg: var(--n-050); --btn-fg: var(--ink-800); --btn-bd: var(--line); }
.btn--soft:hover { --btn-bg: var(--n-100); --btn-bd: var(--n-300); }
.btn--onink { --btn-bg: rgba(255,255,255,.09); --btn-fg: #fff; --btn-bd: rgba(255,255,255,.24); backdrop-filter: blur(8px); }
.btn--onink:hover { --btn-bg: #fff; --btn-fg: var(--ink-900); --btn-bd: #fff; }
.btn--sm { padding: .5625rem 1rem; font-size: var(--t-sm); }
.btn--lg { padding: 1rem 1.875rem; font-size: var(--t-md); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.tlink {
  display: inline-flex; align-items: center; gap: .4375rem;
  font-size: var(--t-base); font-weight: 600; color: var(--red-600);
  transition: gap var(--dur-2) var(--ease), color var(--dur-1) var(--ease);
}
.tlink svg { width: 15px; height: 15px; }
.tlink:hover { gap: .75rem; color: var(--red-700); }
.tlink--pet { color: var(--pet-600); }
.tlink--pet:hover { color: var(--pet-700); }

/* --- 6. Chips, tags, badges --------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .5rem;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: var(--r-xs);
  background: var(--n-100); color: var(--n-600);
}
.tag--red { background: var(--red-050); color: var(--red-700); }
.tag--pet { background: var(--pet-050); color: var(--pet-700); }
.tag--ok { background: var(--ok-100); color: var(--ok-600); }
.tag--warn { background: var(--warn-100); color: var(--warn-600); }
.tag--ink { background: var(--ink-800); color: #fff; }

.mlfb {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--ink-800);
  background: var(--n-050);
  border: 1px solid var(--line-soft);
  padding: .1875rem .4375rem;
  border-radius: var(--r-xs);
  white-space: nowrap;
}

/* --- 7. Utility bar ----------------------------------------------------- */
.ubar {
  background: var(--ink-950);
  color: #8496AA;
  font-size: var(--t-sm);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ubar__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--bar-h); }
.ubar__l, .ubar__r { display: flex; align-items: center; gap: 1.5rem; }
.ubar__i { display: inline-flex; align-items: center; gap: .4375rem; transition: color var(--dur-1) var(--ease); }
.ubar__i svg { width: 13px; height: 13px; color: var(--pet-500); flex: none; }
a.ubar__i:hover { color: #fff; }
.ubar__seal {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #7FD4D6;
}
.ubar__seal svg { width: 13px; height: 13px; }
@media (max-width: 900px) { .ubar__l { display: none; } .ubar__in { justify-content: center; } }
@media (max-width: 520px) { .ubar__r { gap: 1rem; font-size: var(--t-xs); } .ubar__i--mail { display: none; } }

/* --- 8. Header ---------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.hdr.is-stuck { box-shadow: var(--e-2); border-color: var(--n-200); }
.hdr__in { display: flex; align-items: center; gap: 1.25rem; min-height: var(--hdr-h); }

/* The logo artwork already reads "K&N AUTOMATION", so the header does not
   repeat the company name beside it — only the Siemens qualifier, divided off
   by a hairline rule. */
.brand { display: inline-flex; align-items: center; gap: .8125rem; flex: none; margin-right: auto; }
.brand__mk { height: 50px; width: auto; }
.brand__tx {
  display: flex; flex-direction: column; line-height: 1.08;
  padding-left: .8125rem; border-left: 1px solid var(--n-200);
}
/* Was 10px/600 in --n-500, which measured 4.34:1 against white — under the
   4.5:1 minimum for text this size, and it read as washed out next to the
   logo. Larger, heavier and considerably darker: 9.9:1. Letter-spacing eases
   off slightly so the extra size does not push it to a third line. */
.brand__sb {
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-800);
  max-width: 12em;
}
@media (max-width: 420px) { .brand__mk { height: 38px; } .brand__sb { font-size: 11px; } }

/* Primary nav */
.nav { display: flex; align-items: center; gap: .125rem; }
.nav__i { position: relative; }
.nav__l {
  position: relative;
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .5625rem .8125rem;
  font-size: var(--t-base); font-weight: 500; color: var(--n-700);
  border-radius: var(--r-sm);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav__l:hover { color: var(--ink-900); background: var(--n-050); }
.nav__l[aria-current="page"] { color: var(--red-600); font-weight: 600; }
.nav__l[aria-current="page"]::after {
  content: ""; position: absolute; left: .8125rem; right: .8125rem; bottom: -1px;
  height: 2px; background: var(--red-600); border-radius: 2px 2px 0 0;
}
.nav__cv { width: 11px; height: 11px; opacity: .5; transition: transform var(--dur-2) var(--ease); }
.nav__i.is-open .nav__cv { transform: rotate(180deg); }
.nav__i.is-open .nav__l { color: var(--ink-900); background: var(--n-050); }
@media (max-width: 1120px) { .nav { display: none; } }

/* Header actions */
.hdr__act { display: flex; align-items: center; gap: .5rem; flex: none; }

.cartbtn {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5625rem .875rem .5625rem .75rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-800);
  background: var(--n-050); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: all var(--dur-1) var(--ease);
}
.cartbtn:hover { background: var(--ink-800); color: #fff; border-color: var(--ink-800); }
.cartbtn svg { width: 17px; height: 17px; flex: none; }
.cartbtn__n {
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; line-height: 1;
  background: var(--red-600); color: #fff;
  border-radius: var(--r-pill);
  transition: transform var(--dur-2) var(--ease-spring);
}
.cartbtn__n[data-empty="true"] { display: none; }
.cartbtn.is-bump .cartbtn__n { transform: scale(1.45); }
@media (max-width: 520px) { .cartbtn__lb { display: none; } .cartbtn { padding: .5625rem .6875rem; } }

.burger {
  display: none; flex-direction: column; justify-content: center; gap: 4.5px;
  width: 42px; height: 42px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.burger span { display: block; height: 2px; width: 100%; background: var(--ink-800); border-radius: 2px;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 1120px) { .burger { display: flex; } }
@media (max-width: 1120px) { .hdr__act .btn--quote { display: none; } }

/* --- 9. Mega menu ------------------------------------------------------- */
.mega {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(.99);
  transform-origin: top center;
  width: min(980px, calc(100vw - 3rem));
  background: var(--n-000);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e-5);
  overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out),
              visibility var(--dur-2);
  z-index: var(--z-mega);
}
.nav__i.is-open .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.mega__hd {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--ink-900);
  color: #fff;
}
.mega__brand { display: flex; align-items: center; gap: .75rem; }
.mega__brand b { font-family: var(--f-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; }
.mega__brand span { font-size: var(--t-sm); color: #92A2B5; }
.mega__hd .tag { background: rgba(0,155,158,.18); color: #7FD4D6; }
.mega__bd { padding: 1.25rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; }
.mega__c {
  display: grid; grid-template-columns: 34px 1fr; gap: .75rem; align-items: start;
  padding: .625rem .75rem;
  border-radius: var(--r-sm);
  transition: background var(--dur-1) var(--ease);
}
.mega__c:hover { background: var(--n-050); }
.mega__c:hover .mega__c-t { color: var(--red-600); }
.mega__ico {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--pet-050); color: var(--pet-700);
  border-radius: var(--r-sm);
}
.mega__ico svg { width: 18px; height: 18px; }
.mega__c-t { font-size: var(--t-base); font-weight: 600; color: var(--ink-800); line-height: 1.3; transition: color var(--dur-1) var(--ease); }
.mega__c-s { font-size: var(--t-xs); color: var(--text-soft); line-height: 1.45; margin-top: .125rem; }
.mega__ft {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .9375rem 1.5rem;
  background: var(--n-025); border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm); color: var(--text-soft);
}
@media (max-width: 1120px) { .mega { display: none; } }

/* --- 10. Mobile drawer -------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: rgba(7,12,18,.5);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-3) var(--ease), visibility var(--dur-3);
}
.scrim.is-open { opacity: 1; visibility: visible; }
body.is-locked { overflow: hidden; }

.drw {
  position: fixed; inset: 0 0 0 auto; z-index: var(--z-drawer);
  width: min(420px, 90vw);
  display: flex; flex-direction: column;
  background: var(--n-000);
  box-shadow: -16px 0 48px rgba(7,12,18,.22);
  transform: translateX(100%);
  transition: transform var(--dur-3) var(--ease-out);
  overflow-y: auto; overscroll-behavior: contain;
}
.drw.is-open { transform: translateX(0); }
.drw__lg { height: 42px; width: auto; display: block; }
.drw__hd {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--gutter);
  background: var(--n-000);
  border-bottom: 1px solid var(--line);
}
.drw__x { width: 40px; height: 40px; display: grid; place-items: center; background: var(--n-050); border-radius: var(--r-sm); }
.drw__x svg { width: 18px; height: 18px; }
.drw__bd { padding: .5rem var(--gutter) 2rem; }
.drw__l {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9375rem .125rem;
  font-family: var(--f-display); font-size: 1.0625rem; font-weight: 600; color: var(--ink-800);
  border-bottom: 1px solid var(--line-soft);
  width: 100%; text-align: left;
}
.drw__l[aria-current="page"] { color: var(--red-600); }
.drw__l svg { width: 16px; height: 16px; opacity: .45; transition: transform var(--dur-2) var(--ease); }
.drw__l[aria-expanded="true"] svg { transform: rotate(180deg); }
.drw__sub {
  display: grid; gap: .125rem;
  max-height: 0; overflow: hidden;
  transition: max-height var(--dur-3) var(--ease);
}
.drw__sub.is-open { max-height: 900px; }
.drw__sub a {
  display: block; padding: .5625rem .875rem;
  font-size: var(--t-sm); color: var(--text-mute);
  border-left: 2px solid var(--line);
}
.drw__sub a:hover { color: var(--red-600); border-left-color: var(--red-600); background: var(--n-025); }
.drw__ft { margin-top: 1.5rem; display: grid; gap: .625rem; }

/* --- 11. Hero ----------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink-950); color: #fff;
  padding-block: clamp(1.875rem, 3.1vw, 2.875rem);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(1000px 560px at 82% 12%, rgba(0,155,158,.17), transparent 62%),
    radial-gradient(760px 460px at 8% 92%, rgba(216,35,42,.18), transparent 64%),
    linear-gradient(158deg, #0C1520 0%, #080F18 52%, #060B12 100%);
}
.hero__mesh {
  position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image:
    linear-gradient(rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.038) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 88% 74% at 50% 38%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 88% 74% at 50% 38%, #000 30%, transparent 100%);
}
.hero__in { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 1150px) { .hero__in { grid-template-columns: 1fr; } }
.hero h1 { color: #fff; max-width: 15ch; }
.hero h1 .hl { color: var(--red-500); }
.hero__lede { color: #B4C4D6; font-size: clamp(var(--t-md), 1.6vw, 1.1875rem); line-height: 1.65; max-width: 52ch; margin: 1.125rem 0 1.5rem; }

/* "Learn more" sits inline at the end of the lede so it reads as part of the
   sentence rather than a stray control. Teal, not white: it is a secondary
   action beside two real buttons and should not compete with them. */
.lede__more {
  display: inline-flex; align-items: center; gap: .3125rem;
  margin-left: .375rem; vertical-align: baseline;
  font-family: inherit; font-size: .9375rem; font-weight: 600;
  color: var(--pet-300, #7FD4D6);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.lede__more:hover { color: #A8E6E7; border-bottom-color: currentColor; }
.lede__more svg {
  width: 15px; height: 15px;
  transition: transform var(--dur-2) var(--ease);
}
.lede__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.lede__rest[hidden] { display: none; }

.seal {
  display: inline-flex; align-items: center; gap: .625rem;
  padding: .4375rem .9375rem .4375rem .5625rem;
  background: rgba(0,155,158,.12);
  border: 1px solid rgba(0,155,158,.36);
  border-radius: var(--r-pill);
  font-size: var(--t-sm); color: #8FDDDE;
  margin-bottom: 1.5rem;
}
.seal svg { width: 15px; height: 15px; flex: none; }
.seal b { color: #fff; font-weight: 600; }

.hstats { display: flex; flex-wrap: wrap; gap: 2.25rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.11); }
.hstat b {
  display: block; font-family: var(--f-display);
  font-size: clamp(1.625rem, 2.8vw, 2.125rem); font-weight: 800;
  color: #fff; line-height: 1; letter-spacing: -.03em;
}
/* Direct child only. As `.hstat span` this also matched the counter's own
   <span data-countup> inside the <b>, so every animated number rendered as a
   10px mono label while the one plain-text figure (2003) kept its 34px. */
.hstat > span {
  display: block; margin-top: .375rem;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
  /* Was #7286A0, 4.0:1 on the hero — under the 4.5 these 10px labels need. */
  color: #93A6BC;
}

/* --- 12. Page head ------------------------------------------------------ */
.phead {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink-900); color: #fff;
  padding-block: clamp(2.5rem, 5.5vw, 4.5rem);
}
.phead::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(760px 420px at 88% 8%, rgba(0,155,158,.16), transparent 60%),
    radial-gradient(500px 320px at 4% 100%, rgba(216,35,42,.13), transparent 62%),
    linear-gradient(152deg, #111D29 0%, #0A121B 100%);
}
.phead__mesh {
  position: absolute; inset: 0; z-index: -1; opacity: .4;
  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: 60px 60px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 92%);
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}
.phead h1 { color: #fff; max-width: 19ch; }
.phead__lede { color: #9FB2C7; max-width: 62ch; margin-top: 1rem; font-size: var(--t-md); }
.phead__in { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
@media (max-width: 860px) { .phead__in { grid-template-columns: 1fr; } }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4375rem; font-size: var(--t-sm); color: #7286A0; margin-bottom: 1rem; }
.crumbs a { transition: color var(--dur-1) var(--ease); }
.crumbs a:hover { color: #fff; }
.crumbs svg { width: 11px; height: 11px; opacity: .45; }
.crumbs [aria-current] { color: #B9C6D4; }

/* --- 13. Cards ---------------------------------------------------------- */
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--n-000);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.5rem;
  transition: border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}
.card:hover { border-color: var(--n-300); box-shadow: var(--e-3); transform: translateY(-2px); }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: var(--t-base); }
/* --- Card text trimmed to three lines, with "Read more" ------------------
   -webkit-line-clamp needs display:-webkit-box; the prefix is not legacy, it
   is still the only way to clamp by line count and every current browser
   supports it. The clamp is added by main.js, never in the markup, so a
   visitor without JavaScript reads the whole paragraph.
   ------------------------------------------------------------------------ */
.card__clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.card__more {
  display: inline-flex; align-items: center; gap: .3125rem;
  margin-top: .625rem;
  font-size: var(--t-sm); font-weight: 600;
  color: var(--pet-700);
  transition: color var(--dur-1) var(--ease);
}
.card__more:hover { color: var(--pet-600); text-decoration: underline; }
.card__more svg {
  width: 14px; height: 14px;
  transition: transform var(--dur-2) var(--ease);
}
.card__more[aria-expanded="true"] svg { transform: rotate(180deg); }

.card__ico {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-sm); margin-bottom: 1.125rem;
  background: var(--red-050); color: var(--red-600);
}
.card__ico svg { width: 22px; height: 22px; }
.card__ico--pet { background: var(--pet-050); color: var(--pet-700); }
.card__ico--ink { background: var(--n-100); color: var(--ink-800); }
.card--top { border-top: 3px solid var(--red-600); }
.card__foot { margin-top: auto; padding-top: 1.125rem; }

/* --- 14. Category grid (Siemens landing) -------------------------------- */
.catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.25rem; }
.catcard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--n-000);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.catcard::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--red-600), var(--pet-500));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}
.catcard:hover { border-color: var(--n-300); box-shadow: var(--e-4); transform: translateY(-3px); }
.catcard:hover::after { transform: scaleX(1); }
.catcard__hd { display: flex; align-items: flex-start; gap: .875rem; padding: 1.375rem 1.375rem .875rem; }
.catcard__ico {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: var(--pet-050); color: var(--pet-700); border-radius: var(--r-sm);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.catcard:hover .catcard__ico { background: var(--ink-800); color: #fff; }
.catcard__ico svg { width: 22px; height: 22px; }
.catcard__ttl { font-family: var(--f-display); font-size: var(--t-md); font-weight: 700; color: var(--ink-900); letter-spacing: -.018em; line-height: 1.25; }
.catcard__ln { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--red-600); display: block; margin-bottom: .25rem; }
.catcard__bd { padding: 0 1.375rem 1.125rem; }
.catcard__bd p { font-size: var(--t-sm); line-height: 1.58; }
.catcard__ft {
  margin-top: auto; padding: .875rem 1.375rem;
  background: var(--n-025); border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  font-family: var(--f-mono); font-size: var(--t-xs); color: var(--text-soft);
}
.catcard__ft .tlink { font-family: var(--f-ui); font-size: var(--t-sm); }

/* --- 15. Catalogue toolbar --------------------------------------------- */
.tbar {
  position: sticky; top: var(--hdr-h); z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-block: .75rem;
}
.tbar__in { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; }
.srch { position: relative; flex: 1 1 260px; max-width: 400px; }
.srch input {
  width: 100%; padding: .625rem .875rem .625rem 2.4rem;
  background: var(--n-050); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--t-base);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.srch input:focus { background: #fff; border-color: var(--pet-500); outline: none; box-shadow: 0 0 0 3px rgba(0,155,158,.13); }
.srch svg { position: absolute; left: .8125rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--n-400); pointer-events: none; }
.tbar__n { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--text-soft); white-space: nowrap; margin-left: auto; }

.fchips { display: flex; flex-wrap: wrap; gap: .4375rem; }
.fchip {
  padding: .375rem .75rem;
  font-size: var(--t-sm); font-weight: 500;
  background: var(--n-000); color: var(--text-mute);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  transition: all var(--dur-1) var(--ease);
}
.fchip:hover { border-color: var(--n-400); color: var(--ink-800); }
.fchip.is-on { background: var(--ink-800); border-color: var(--ink-800); color: #fff; }

/* --- 16. Family block --------------------------------------------------- */
.fam {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--n-000);
  scroll-margin-top: calc(var(--hdr-h) + 70px);
}
.fam + .fam { margin-top: 1.5rem; }
.fam.is-hidden { display: none; }

.fam__hd {
  display: grid; grid-template-columns: 160px 1fr auto;
  gap: 1.5rem; align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 860px) { .fam__hd { grid-template-columns: 110px 1fr; } .fam__hd .btn { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 520px) { .fam__hd { grid-template-columns: 1fr; gap: 1rem; } }

.fam__img {
  width: 100%; aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background: var(--n-025);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
  padding: .625rem;
}
.fam__img img, .fam__img svg { width: 100%; height: 100%; object-fit: contain; }
.fam__ln { font-family: var(--f-mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--red-600); display: block; margin-bottom: .3125rem; }
.fam__nm { font-family: var(--f-display); font-size: 1.3125rem; font-weight: 700; letter-spacing: -.022em; color: var(--ink-900); }
.fam__sum { font-size: var(--t-base); color: var(--text-mute); margin-top: .5rem; max-width: 70ch; line-height: 1.6; }
.fam__meta { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .75rem; }

/* Spec table
   ---------------------------------------------------------------------------
   The table used to carry min-width:680px inside an overflow-x:auto wrapper, so
   a horizontal scrollbar appeared under every family and the Add button sat off
   the right edge. Two things made the table wider than its column:
   nowrap on the product name, and 1rem of padding on seven columns (~140px of
   padding alone).

   Now the name wraps, padding is tighter, and only the article number keeps
   nowrap -- an MLFB broken across two lines is unreadable and uncopyable.

   Below 1000px the family sidebar stacks and there is genuinely not enough
   width for seven columns, so the table becomes one card per article instead
   (see the block further down). Nothing scrolls sideways at any width.
   --------------------------------------------------------------------------- */
.spec-wrap { }
.spec { width: 100%; font-size: var(--t-sm); table-layout: auto; }
.spec thead th {
  position: sticky; top: 0;
  text-align: left; font-weight: 600; white-space: nowrap;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-soft);
  background: var(--n-025);
  padding: .75rem .625rem;
  border-bottom: 1px solid var(--line);
}
.spec thead th:first-child, .spec td:first-child { padding-left: 1rem; }
.spec thead th:last-child,  .spec td:last-child  { padding-right: 1rem; }
.spec tbody tr { border-bottom: 1px solid var(--line-soft); transition: background var(--dur-1) var(--ease); }
.spec tbody tr:last-child { border-bottom: 0; }
.spec tbody tr:hover { background: var(--n-025); }
.spec tbody tr.is-in { background: var(--pet-050); }
.spec td { padding: .8125rem .625rem; vertical-align: middle; color: var(--text-mute); }
/* An article number must never wrap: it is meant to be read and copied whole. */
.spec td.c-art { white-space: nowrap; }
.spec td.c-nm { color: var(--ink-800); font-weight: 600; min-width: 8.5rem; }
.spec .c-act { text-align: right; white-space: nowrap; }
.spec tr.is-hidden { display: none; }

/* Below 1000px the family sidebar stacks and seven columns cannot fit honestly.
   Rather than scroll sideways, each row becomes its own card: the product name
   and article number lead, the specifications become labelled rows underneath,
   and the stepper and Add button sit together at the foot.

   Each cell prints its own column heading from data-label, which the generator
   writes from the same specCols the <thead> is built from — so a new
   specification column appears here automatically with no extra work. */
@media (max-width: 1000px) {
  .spec thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .spec, .spec tbody, .spec tr, .spec td { display: block; width: auto; }

  .spec tbody tr {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: .875rem 1rem 1rem;
    margin-bottom: .75rem;
    background: var(--n-000);
  }
  .spec tbody tr:last-child { margin-bottom: 0; }
  .spec tbody tr:hover { background: var(--n-000); }
  .spec tbody tr.is-in { background: var(--pet-050); border-color: var(--pet-300, #7FD4D6); }

  .spec td { padding: 0; }

  .spec td.c-nm {
    font-family: var(--f-display); font-size: 1.0625rem; font-weight: 700;
    color: var(--ink-900); min-width: 0; margin-bottom: .5rem;
  }
  .spec td.c-art { margin-bottom: .75rem; }

  /* specification rows: label left, value right, on one line each */
  .spec td:not(.c-nm):not(.c-art):not(.c-act):not([data-label="Quantity"]) {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .4375rem 0;
    border-top: 1px solid var(--line-soft);
  }
  .spec td[data-label]:not(.c-nm):not(.c-art):not(.c-act):not([data-label="Quantity"])::before {
    content: attr(data-label);
    font-family: var(--f-mono); font-size: 9.5px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft);
    flex: none; padding-top: .15rem;
  }

  /* stepper and Add share the last row */
  .spec td[data-label="Quantity"] {
    display: inline-flex; align-items: center;
    margin-top: .875rem; padding-top: .875rem;
    border-top: 1px solid var(--line-soft);
    width: 100%;
  }
  .spec td.c-act {
    display: inline-flex; justify-content: flex-end;
    margin-top: -2.6rem; width: 100%; text-align: right;
  }
  .spec td.c-act .addbtn { min-width: 6.5rem; justify-content: center; }
}

/* An em dash on its own reads as a broken cell once the columns are gone. */
@media (max-width: 1000px) {
  .spec td[data-label]:not(.c-nm):not(.c-art):not(.c-act) { color: var(--ink-800); }
}

/* Quantity stepper */
.qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden; background: var(--n-000);
}
.qty button {
  width: 28px; height: 30px; display: grid; place-items: center;
  color: var(--text-mute);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.qty button:hover { background: var(--n-100); color: var(--ink-900); }
.qty svg { width: 12px; height: 12px; }
.qty input {
  width: 38px; height: 30px; text-align: center;
  border: 0; border-inline: 1px solid var(--line);
  font-family: var(--f-mono); font-size: var(--t-sm);
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: none; background: var(--pet-050); }

/* Add button */
.addbtn {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .4375rem .75rem;
  font-size: var(--t-sm); font-weight: 600;
  background: var(--ink-800); color: #fff;
  border: 1px solid var(--ink-800); border-radius: var(--r-sm);
  transition: all var(--dur-1) var(--ease);
}
.addbtn svg { width: 14px; height: 14px; }
.addbtn:hover { background: var(--red-600); border-color: var(--red-600); transform: translateY(-1px); box-shadow: var(--e-2); }
.addbtn.is-added { background: var(--ok-600); border-color: var(--ok-600); }
.addbtn.is-added:hover { background: var(--ok-600); }

.fam__note {
  padding: .8125rem 1.5rem;
  background: var(--n-025); border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs); color: var(--text-soft);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.fam__note svg { width: 14px; height: 14px; color: var(--n-400); flex: none; }

/* Family side index */
.famnav { position: sticky; top: calc(var(--hdr-h) + 68px); align-self: start; }
.famnav__t { font-family: var(--f-mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--text-soft); margin-bottom: .75rem; }
.famnav a {
  display: block; padding: .4375rem .75rem;
  font-size: var(--t-sm); color: var(--text-mute);
  border-left: 2px solid var(--line);
  transition: all var(--dur-1) var(--ease);
}
.famnav a:hover { color: var(--ink-900); border-left-color: var(--n-400); background: var(--n-025); }
.famnav a.is-cur { color: var(--red-600); font-weight: 600; border-left-color: var(--red-600); background: var(--red-050); }
/* The article table needs ~852px of its own. Below ~1210px the 220px family
   sidebar squeezes it under that, so the sidebar steps aside and the table gets
   the full width instead of being scrolled sideways. */
@media (max-width: 1210px) { .famnav { display: none; } }

.cat-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 1210px) { .cat-layout { grid-template-columns: 1fr; gap: 0; } }

/* --- Office maps --------------------------------------------------------
   The iframe is Google's, so it cannot be styled from here. It sits inside a
   figure that supplies the border, the radius and the caption, and overflow
   is clipped so Google's square corners take the card's radius.
   ------------------------------------------------------------------------ */
.mapbox {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--n-050);
  box-shadow: var(--e-1);
}
.mapbox iframe {
  display: block; width: 100%;
  height: clamp(220px, 24vw, 300px);
  border: 0;
}
.mapbox figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem;
  background: var(--n-000);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
}
.mapbox figcaption b { color: var(--ink-900); }
.mapbox figcaption a { color: var(--pet-700); font-weight: 600; white-space: nowrap; }
.mapbox figcaption a:hover { text-decoration: underline; }

/* The embed is queried by lat/long, which draws a bare pin and no place card,
   so the office has to be named from this side. Top right is the one corner
   Google leaves empty - its own button is top left, the logo bottom left, the
   fullscreen control bottom right - and pointer-events:none keeps the tag from
   swallowing a drag that starts on it. */
.mapbox { position: relative; }
.mapbox__tag {
  position: absolute; top: .625rem; right: .625rem; z-index: 1;
  max-width: min(16rem, calc(100% - 8rem));
  margin: 0; padding: .4375rem .625rem;
  background: var(--n-000);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--e-1);
  font-size: var(--t-xs); line-height: 1.35;
  pointer-events: none;
}
.mapbox__tag b { display: block; color: var(--ink-900); font-weight: 700; }
.mapbox__tag span { display: block; color: var(--text-mute); }
@media (max-width: 640px) {
  .mapbox__tag { max-width: calc(100% - 5rem); }
  .mapbox__tag span { display: none; }
}

/* --- 17. Cart page ------------------------------------------------------ */
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 2.5rem; align-items: start; }
@media (max-width: 1000px) { .cart-layout { grid-template-columns: 1fr; } }

.clines { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--n-000); }
.clines__hd {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--n-025); border-bottom: 1px solid var(--line);
}
.clines__hd h2 { font-size: var(--t-md); }
.cline {
  display: grid; grid-template-columns: 68px 1fr auto auto;
  gap: 1rem; align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line-soft);
  animation: lineIn var(--dur-3) var(--ease-out) both;
}
.cline:last-child { border-bottom: 0; }
@keyframes lineIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cline.is-going { animation: lineOut var(--dur-2) var(--ease) forwards; }
@keyframes lineOut { to { opacity: 0; transform: translateX(-14px); } }

.cline__img {
  width: 68px; height: 54px; display: grid; place-items: center;
  background: var(--n-025); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  padding: .3125rem; overflow: hidden;
}
.cline__img img, .cline__img svg { width: 100%; height: 100%; object-fit: contain; }
.cline__nm { font-weight: 600; color: var(--ink-800); font-size: var(--t-base); line-height: 1.35; }
.cline__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .3125rem; }
.cline__cat { font-size: var(--t-xs); color: var(--text-soft); }
.cline__rm {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--n-400); border-radius: var(--r-sm);
  transition: all var(--dur-1) var(--ease);
}
.cline__rm:hover { background: var(--red-050); color: var(--red-600); }
.cline__rm svg { width: 16px; height: 16px; }
@media (max-width: 620px) {
  .cline { grid-template-columns: 56px 1fr auto; row-gap: .75rem; }
  .cline__img { width: 56px; height: 46px; }
  .cline .qty { grid-column: 2; justify-self: start; }
  .cline__rm { grid-row: 1; grid-column: 3; }
}

.cempty { text-align: center; padding: 4rem 1.5rem; }
.cempty svg { width: 52px; height: 52px; color: var(--n-300); margin: 0 auto 1.25rem; }
.cempty h2 { font-size: var(--t-lg); margin-bottom: .5rem; }
.cempty p { max-width: 42ch; margin: 0 auto 1.75rem; }

.csum {
  position: sticky; top: calc(var(--hdr-h) + 24px);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--n-000); overflow: hidden;
}
.csum__hd { padding: 1rem 1.25rem; background: var(--ink-900); color: #fff; }
.csum__hd h2 { color: #fff; font-size: var(--t-md); }
.csum__hd p { color: #92A2B5; font-size: var(--t-xs); margin-top: .1875rem; }
.csum__bd { padding: 1.25rem; }
.csum__row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; font-size: var(--t-sm); }
.csum__row b { font-family: var(--f-mono); color: var(--ink-800); }
.csum__div { height: 1px; background: var(--line); margin: .75rem 0; }
.csum__note {
  display: flex; gap: .625rem; align-items: flex-start;
  padding: .75rem; margin-top: .875rem;
  background: var(--pet-050); border: 1px solid var(--pet-100); border-radius: var(--r-sm);
  font-size: var(--t-xs); color: var(--pet-700); line-height: 1.5;
}
.csum__note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

/* Two more numbers under the urgent-call button. Kept as quiet links rather
   than three identical buttons: one number should read as the one to ring,
   and three equal blocks in a sidebar say the opposite. */
.csum__tels {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .625rem;
  margin-top: .625rem;
  font-size: var(--t-xs); color: var(--text-mute);   /* not --text-soft: 4.33:1 at 12px */
}
.csum__tels a { color: var(--pet-700); font-weight: 600; white-space: nowrap; }
.csum__tels a:hover { text-decoration: underline; }

/* --- 18. Forms ---------------------------------------------------------- */
.form { display: grid; gap: 1rem; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .frow { grid-template-columns: 1fr; } }
.fld { display: grid; gap: .375rem; }
.fld label { font-size: var(--t-sm); font-weight: 600; color: var(--n-700); }
.fld label .rq { color: var(--red-600); }
.fld input, .fld select, .fld textarea {
  width: 100%; padding: .6875rem .8125rem;
  background: var(--n-000);
  border: 1px solid var(--n-300); border-radius: var(--r-sm);
  font-size: var(--t-base);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.fld input::placeholder, .fld textarea::placeholder { color: var(--n-400); }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none; border-color: var(--pet-500); box-shadow: 0 0 0 3px rgba(0,155,158,.13);
}
.fld textarea { resize: vertical; min-height: 110px; }
.fld__err { font-size: var(--t-xs); color: var(--red-600); display: none; }
.fld.bad input, .fld.bad select, .fld.bad textarea { border-color: var(--red-600); }
.fld.bad .fld__err { display: block; }
.fnote { font-size: var(--t-xs); color: var(--text-soft); }
.fmsg { padding: .8125rem .9375rem; border-radius: var(--r-sm); font-size: var(--t-sm); display: none; line-height: 1.55; }
.fmsg.ok { display: block; background: var(--ok-100); color: var(--ok-600); border: 1px solid rgba(14,122,80,.24); }
.fmsg.bad { display: block; background: var(--red-050); color: var(--red-700); border: 1px solid rgba(200,32,42,.22); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- 19. Toast ---------------------------------------------------------- */
.toasts {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: var(--z-toast);
  display: flex; flex-direction: column-reverse; gap: .625rem;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: .75rem;
  padding: .8125rem 1rem;
  min-width: 260px; max-width: min(400px, calc(100vw - 2.5rem));
  background: var(--ink-900); color: #fff;
  border-radius: var(--r-sm);
  box-shadow: var(--e-5);
  font-size: var(--t-sm);
  pointer-events: auto;
  animation: toastIn var(--dur-3) var(--ease-spring) both;
}
.toast.is-going { animation: toastOut var(--dur-2) var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(18px); } }
.toast__ico { width: 22px; height: 22px; flex: none; display: grid; place-items: center; background: var(--ok-600); border-radius: 50%; }
.toast__ico svg { width: 13px; height: 13px; }
.toast b { display: block; font-weight: 600; }
.toast span { color: #92A2B5; font-size: var(--t-xs); }
.toast a { color: #7FD4D6; font-weight: 600; margin-left: auto; white-space: nowrap; }
.toast a:hover { text-decoration: underline; }
@media (max-width: 520px) { .toasts { left: 1rem; right: 1rem; bottom: 1rem; } }

/* --- 20. Content blocks ------------------------------------------------- */
.ticks { display: grid; gap: .8125rem; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: .8125rem; align-items: start; font-size: var(--t-base); color: var(--text-mute); }
.ticks svg { width: 19px; height: 19px; color: var(--pet-600); margin-top: 2px; flex: none; }
.ticks b { color: var(--text); font-weight: 600; }
.section--ink .ticks li { color: #A2B2C6; }
.section--ink .ticks b { color: #fff; }
.section--ink .ticks svg { color: #7FD4D6; }

.dl { border-top: 1px solid var(--line); }
.dl__r { display: grid; grid-template-columns: 190px 1fr; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.dl__k { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--text-soft); padding-top: .1875rem; }
.dl__v { font-size: var(--t-base); color: var(--text); }
@media (max-width: 640px) { .dl__r { grid-template-columns: 1fr; gap: .3125rem; } }

.step { position: relative; padding-left: 3.75rem; }
.step__n {
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; display: grid; place-items: center;
  font-family: var(--f-display); font-size: 1rem; font-weight: 800;
  color: #fff; background: var(--ink-800); border-radius: var(--r-sm);
}
.step h3 { margin-bottom: .4375rem; }
.step p { font-size: var(--t-base); }
@media (max-width: 560px) { .step { padding-left: 0; } .step__n { position: static; margin-bottom: .875rem; } }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.stat { background: var(--n-000); padding: 1.75rem 1.25rem; text-align: center; }
.stat b { display: block; font-family: var(--f-display); font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.032em; color: var(--ink-900); line-height: 1; }
.stat > span { display: block; margin-top: .5rem; font-size: var(--t-xs); color: var(--text-mute); line-height: 1.45; }
.section--ink .stats { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.12); }
.section--ink .stat { background: var(--ink-900); }
.section--ink .stat b { color: #fff; }
.section--ink .stat span { color: #8496AA; }
@media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); } }

.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill {
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .5625rem 1rem;
  background: var(--n-000); border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 500; color: var(--n-700);
  transition: all var(--dur-2) var(--ease);
}
.pill:hover { border-color: var(--pet-500); color: var(--pet-700); background: var(--pet-050); transform: translateY(-1px); }
.pill svg { width: 15px; height: 15px; color: var(--n-400); }
.pill:hover svg { color: var(--pet-600); }
.section--ink .pill { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); color: #B9C6D4; }
.section--ink .pill:hover { background: rgba(0,155,158,.16); border-color: rgba(0,155,158,.45); color: #8FDDDE; }

.cta {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink-900); color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(2rem, 4.5vw, 3.5rem);
}
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(620px 320px at 92% 12%, rgba(0,155,158,.24), transparent 62%),
    radial-gradient(520px 300px at 4% 92%, rgba(216,35,42,.2), transparent 64%);
}
.cta h2 { color: #fff; max-width: 22ch; }
.cta p { color: #9FB2C7; max-width: 54ch; margin: .875rem 0 1.75rem; }
.cta__in { display: grid; grid-template-columns: 1.4fr auto; gap: 2.5rem; align-items: center; }

/* Opt-in, for a button row with more than two buttons.

   The second grid track is `auto`, so it grows to whatever the buttons need.
   With two that is fine. The home page's four made the track so wide the
   heading beside it was squeezed to five lines, and left to size themselves
   the buttons broke 1 + 2 + 1, which reads as a mistake. Capping the row and
   letting the buttons share it evenly gives a clean two-up and hands the
   width back to the copy. The other four .cta banners are untouched. */
.btn-row--even { max-width: 30rem; }   /* fits the quotation button + one number: 248 + 199 + 12 */
.btn-row--even .btn { flex: 1 1 11rem; }
@media (max-width: 860px) { .cta__in { grid-template-columns: 1fr; } }

.slot {
  display: grid; place-items: center; gap: .4375rem;
  min-height: 180px; padding: 1.5rem; text-align: center;
  background: repeating-linear-gradient(45deg, var(--n-025), var(--n-025) 10px, var(--n-000) 10px, var(--n-000) 20px);
  border: 2px dashed var(--n-300); border-radius: var(--r-md);
  color: var(--text-soft);
}
.slot svg { width: 28px; height: 28px; opacity: .45; }
.slot b { font-size: var(--t-sm); font-weight: 600; color: var(--text-mute); }
.slot span { font-family: var(--f-mono); font-size: var(--t-xs); }

/* --- 21. Footer --------------------------------------------------------- */
.ftr { background: var(--ink-950); color: #8496AA; font-size: var(--t-base); }
.ftr__main { padding-block: clamp(2.75rem, 5.5vw, 4.25rem); }
.ftr__cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.35fr; gap: clamp(1.75rem, 4vw, 3.25rem); }
@media (max-width: 960px) { .ftr__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr__cols { grid-template-columns: 1fr; } }
.ftr__brand { display: inline-flex; align-items: center; gap: .875rem; margin-bottom: 1.125rem; }
/* The wordmark and rules are mid-grey, which all but vanishes on the near-black
   footer. Rather than recolour the artwork, the logo sits on its own white
   plate — the ground it was drawn for. */
.ftr__brand .brand__mk {
  height: 58px; background: #fff;
  padding: 9px 13px; border-radius: 10px;
}
.ftr__brand .brand__tx { border-left-color: rgba(255,255,255,.16); }
.ftr__brand .brand__sb { color: #7B8EA6; }
.ftr__ab { font-size: var(--t-sm); line-height: 1.65; color: #7286A0; max-width: 40ch; }
.ftr__seal {
  display: inline-flex; align-items: center; gap: .5625rem; margin-top: 1.25rem;
  padding: .5625rem .875rem;
  background: rgba(0,155,158,.1); border: 1px solid rgba(0,155,158,.3); border-radius: var(--r-sm);
  font-size: var(--t-sm); color: #8FDDDE;
}
.ftr__seal svg { width: 15px; height: 15px; flex: none; }
.ftr h2 { font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.ftr__ls { display: grid; gap: .5625rem; }
.ftr__ls a { font-size: var(--t-sm); color: #8496AA; transition: color var(--dur-1) var(--ease); }
.ftr__ls a:hover { color: #fff; }
.ftr__off { font-size: var(--t-sm); line-height: 1.6; color: #7286A0; }
.ftr__off + .ftr__off { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.07); }
.ftr__off b { display: block; color: #B9C6D4; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .25rem; }
.ftr__off a:hover { color: #fff; }
/* Three numbers for Chennai. Laid out as a wrapping row rather than three
   stacked lines: the footer column is narrow, two fit per line, and each stays
   its own tap target — a single run of text with separators would be one long
   link or three links a thumb-width apart. */
.ftr__tel { display: flex; flex-wrap: wrap; gap: .0625rem .875rem; }
.ftr__tel a { white-space: nowrap; }
.ftr__bar { border-top: 1px solid rgba(255,255,255,.07); padding-block: 1.25rem; }
.ftr__bar-in { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; font-size: var(--t-sm); color: #5D7089; }
.ftr__lg { display: flex; gap: 1.125rem; flex-wrap: wrap; }
.ftr__lg a:hover { color: #fff; }
.ftr__dc { font-size: var(--t-xs); color: #4A5C73; line-height: 1.55; padding-bottom: 1.25rem; }

/* Everything inside a section that has scrolled out of view stops animating.
   main.js adds .is-idle from an IntersectionObserver. The marquees, the hero
   spotlight and the panel diagram all run `infinite` animations, and without
   this they keep running while nobody is looking at them.

   It matters most for the panel diagram: its flow dashes animate
   stroke-dashoffset, which repaints the SVG every frame instead of being
   composited on the GPU like transform and opacity. Twenty of those running
   forever is real battery on a laptop and real jank on a cheap phone. */
.is-idle,
.is-idle *,
.is-idle *::before,
.is-idle *::after { animation-play-state: paused !important; }

/* --- 22. Utilities & motion -------------------------------------------- */
.skip { position: absolute; left: -9999px; top: 0; z-index: 999; padding: .75rem 1.25rem; background: var(--red-600); color: #fff; font-weight: 600; font-size: var(--t-sm); }
.skip:focus { left: 1rem; top: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mt1 { margin-top: .5rem; } .mt2 { margin-top: 1rem; } .mt3 { margin-top: 1.5rem; }
.mt4 { margin-top: 2rem; } .mt6 { margin-top: 3rem; }
.mb2 { margin-bottom: 1rem; } .mb3 { margin-bottom: 1.5rem; } .mb4 { margin-bottom: 2rem; }
.mid { text-align: center; }

.rv { opacity: 0; transform: translateY(16px); transition: opacity .62s var(--ease-out), transform .62s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .06s; } .rv-d2 { transition-delay: .12s; }
.rv-d3 { transition-delay: .18s; } .rv-d4 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }


/* Entrance and attention pulse, shared by both launchers. The hidden start
   state comes only from the animation's fill, never from the base rule — if
   animations are unavailable the declaration is ignored and the buttons are
   simply visible, which is the safe way round for a persistent control. */
@keyframes supIn {
  from { opacity: 0; transform: translateY(16px) scale(.8); }
  to   { opacity: 1; transform: none; }
}
@keyframes supPulse {
  0%        { transform: scale(1);   opacity: .5; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}
/* --- Floating buttons: support and assistant -----------------------------
   Two independent launchers stacked above the back-to-top button. Positions
   come from one set of variables so the stack cannot drift apart when a size
   changes — measured bottom-up:

     back-to-top   1.25rem, 44px tall
     assistant     5.25rem, 50px tall   (primary — nearest the thumb)
     support       9.5rem,  46px tall
   ------------------------------------------------------------------------- */
.fab {
  position: fixed; right: 1.25rem; z-index: 95;
  display: flex; flex-direction: column; align-items: flex-end; gap: .625rem;
  animation: supIn .55s var(--ease) .9s both;
}
.fab--ai   { bottom: 5.25rem; }
.fab--help { bottom: 9.5rem; animation-delay: 1.05s; }

.fab__btn {
  position: relative;
  width: 50px; height: 50px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; color: #fff;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.fab--ai   .fab__btn { background: var(--org-500); box-shadow: 0 10px 24px -8px rgba(246, 88, 2, .55), var(--e-2); }
.fab--help .fab__btn { width: 46px; height: 46px; background: var(--pet-600); box-shadow: 0 10px 22px -8px rgba(0, 128, 131, .5), var(--e-2); }
.fab--ai   .fab__btn:hover { transform: translateY(-2px); background: var(--org-600); box-shadow: 0 14px 28px -8px rgba(246, 88, 2, .65), var(--e-4); }
.fab--help .fab__btn:hover { transform: translateY(-2px); background: var(--pet-700); box-shadow: 0 14px 26px -8px rgba(0, 128, 131, .6), var(--e-4); }
.fab__btn:active { transform: translateY(0); }
.fab__btn svg { width: 23px; height: 23px; grid-area: 1 / 1; transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.fab--help .fab__btn svg { width: 21px; height: 21px; }
.fab__ico-close { opacity: 0; transform: rotate(-45deg) scale(.7); }
.fab[data-open] .fab__ico-open  { opacity: 0; transform: rotate(45deg) scale(.7); }
.fab[data-open] .fab__ico-close { opacity: 1; transform: none; }
.fab[data-open] .fab__btn { background: var(--ink-800); box-shadow: var(--e-4); }

/* Only the assistant pulses — two pulsing rings in one corner is noise. */
.fab--ai .fab__btn::before,
.fab--ai .fab__btn::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--org-500); opacity: 0; pointer-events: none;
  animation: supPulse 3.4s cubic-bezier(.22, .61, .36, 1) infinite;
}
.fab--ai .fab__btn::after { animation-delay: 1.7s; }
.fab--ai .fab__btn:hover::before, .fab--ai .fab__btn:hover::after,
.fab--ai[data-open] .fab__btn::before, .fab--ai[data-open] .fab__btn::after {
  animation-play-state: paused; opacity: 0;
}

/* ---- panels ---- */
.fab__panel {
  width: min(23.5rem, calc(100vw - 2.5rem));
  display: flex; flex-direction: column;
  background: var(--n-000);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 24px 48px -20px rgba(11, 19, 28, .45), var(--e-4);
  transform-origin: bottom right;
  animation: supIn var(--dur-2) var(--ease);
  overflow: hidden;
}
.fab__panel[hidden] { display: none; }

/* The chat panel is the tall one and scrolls internally.

   max-height was `min(34rem, calc(100vh - 11rem))`. On a short viewport that
   subtraction goes to zero or negative and the panel collapses to nothing —
   it looks open but there is nothing to click, type into or select. The max()
   floor stops it disappearing.

   The 16.5rem allows for the stack below the panel (1.25rem gap + 50px button
   + 5.25rem offset = 9rem) plus 7.5rem of headroom, because the sticky header
   sits at z-index 100 and would otherwise clip the panel title. Below 620px
   tall the panel becomes a sheet spanning the viewport instead of trying to
   grow upward from the button. */
.fab__panel--chat { max-height: min(34rem, max(17rem, calc(100vh - 16.5rem))); }

@media (max-height: 620px) {
  .fab--ai { top: 6.5rem; bottom: 1.25rem; justify-content: flex-end; }
  .fab--ai .fab__panel--chat { max-height: none; flex: 1 1 auto; min-height: 0; }
  .fab--help { display: none; }   /* no room for a second launcher */
}

.fab__hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  padding: 1rem 1rem .75rem; border-bottom: 1px solid var(--line); flex: none;
}
.fab__ttl { font-family: var(--f-display); font-size: 1rem; font-weight: 700; color: var(--ink-900); }
.fab__sub {
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); margin-top: .25rem;
}
.fab__x {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-xs); color: var(--text-soft);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.fab__x:hover { background: var(--n-100); color: var(--ink-900); }
.fab__x svg { width: 15px; height: 15px; }

.fab__body { padding: .875rem 1rem 1rem; }
.fab__txt { font-size: var(--t-sm); line-height: 1.55; color: var(--text-mute); margin-bottom: .75rem; }
.fab__mail, .fab__tel {
  display: flex; align-items: center; gap: .5rem;
  padding: .5625rem .75rem; margin-bottom: .5rem;
  border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600;
  word-break: break-all;
  background: var(--pet-050); border: 1px solid var(--pet-100); color: var(--pet-700);
  transition: background var(--dur-1) var(--ease);
}

/* The phone line is orange, the email teal, so the two routes are told apart
   at a glance in a panel where both rows are otherwise identical. Same 050 /
   100 / 700 steps as the teal, so the weight matches: --org-700 on --org-050
   measures 5.4:1. */
.fab__tel {
  margin-bottom: 0;
  background: var(--org-050); border-color: var(--org-100); color: var(--org-700);
}
.fab__mail:hover { background: var(--pet-100); }
.fab__tel:hover  { background: var(--org-100); }
.fab__mail svg, .fab__tel svg { width: 16px; height: 16px; flex: none; }

@media (max-width: 560px) {
  .fab { right: 1rem; }
  .fab--ai .fab__btn { width: 46px; height: 46px; }
  .fab--ai .fab__btn svg { width: 21px; height: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .fab { animation: none; opacity: 1; transform: none; }
  .fab--ai .fab__btn::before, .fab--ai .fab__btn::after { animation: none; opacity: 0; }
  .fab__panel { animation: none; }
  .fab__btn:hover { transform: none; }
}


/* --- Assistant panel ------------------------------------------------------
   Shares .sup positioning and the launcher button with what was the support
   popover; only the panel contents differ. The panel is taller and scrolls
   internally, so it is capped against the viewport rather than given a fixed
   height — on a short laptop screen a fixed 30rem would run off the top.
   ------------------------------------------------------------------------- */

.cw__hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  padding: 1rem 1rem .75rem;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.cw__sub {
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft);
  margin-top: .25rem;
}
.cw__x {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-xs); color: var(--text-soft);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.cw__x:hover { background: var(--n-100); color: var(--ink-900); }
.cw__x svg { width: 15px; height: 15px; }

.cw__log {
  flex: 1 1 auto; min-height: 8rem;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: .875rem 1rem;
  display: flex; flex-direction: column; gap: .625rem;
  background: var(--n-025);
}

.cw__msg {
  max-width: 92%;
  padding: .625rem .8125rem;
  border-radius: var(--r-md);
  font-size: var(--t-sm); line-height: 1.55;
  white-space: pre-wrap;            /* the model replies in short paragraphs */
  overflow-wrap: anywhere;          /* article numbers must not widen the panel */
}
.cw__msg--bot  { align-self: flex-start; background: var(--n-000); border: 1px solid var(--line); color: var(--ink-800); }
.cw__msg--user { align-self: flex-end;  background: var(--ink-800); color: #fff; }
.cw__msg--err  { align-self: flex-start; background: var(--red-050); border: 1px solid #F6CFD2; color: #8E1B22; }
.cw__msg p + p { margin-top: .5rem; }
.cw__msg a { color: var(--org-700); font-weight: 600; text-decoration: underline; }
.cw__msg--user a { color: #fff; }

/* typing indicator */
.cw__dots { display: inline-flex; gap: 4px; align-items: center; height: 1.1em; }
.cw__dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-soft);
  animation: cwBlink 1.2s ease-in-out infinite;
}
.cw__dots i:nth-child(2) { animation-delay: .18s; }
.cw__dots i:nth-child(3) { animation-delay: .36s; }
@keyframes cwBlink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* suggested openers, and the part cards the reply cites */
.cw__chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.cw__chip {
  font-size: 12px; line-height: 1.3;
  padding: .4375rem .625rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--n-000); color: var(--ink-800);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.cw__chip:hover { border-color: var(--org-500); background: var(--org-050); }

.cw__part {
  align-self: flex-start; width: 92%;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--n-000); padding: .625rem .75rem;
}
.cw__part b { display: block; font-size: var(--t-sm); color: var(--ink-900); }
.cw__part code {
  display: inline-block; margin-top: .25rem;
  font-family: var(--f-mono); font-size: 11.5px;
  background: var(--org-050); border: 1px solid var(--org-100);
  color: var(--org-700); padding: .1875rem .375rem; border-radius: var(--r-xs);
}
.cw__part-add {
  margin-top: .5rem; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .4375rem .625rem;
  background: var(--ink-800); color: #fff;
  border-radius: var(--r-sm); font-size: 12px; font-weight: 600;
  transition: background var(--dur-1) var(--ease);
}
.cw__part-add:hover { background: var(--org-500); }
.cw__part-add[disabled] { background: var(--ok-600, #2E7D4F); cursor: default; }
.cw__part-add svg { width: 13px; height: 13px; }

.cw__form {
  flex: none; display: flex; gap: .5rem; align-items: center;
  padding: .75rem 1rem; border-top: 1px solid var(--line);
}
.cw__form input {
  flex: 1 1 auto; min-width: 0;
  padding: .5625rem .75rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--n-050); font-size: var(--t-sm); color: var(--ink-900);
}
.cw__form input:focus { outline: none; border-color: var(--org-500); background: var(--n-000); }
.cw__form button {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--org-500); color: #fff; border-radius: var(--r-sm);
  transition: background var(--dur-1) var(--ease);
}
.cw__form button:hover { background: var(--org-600); }
.cw__form button[disabled] { background: var(--n-300, #C7D0DB); cursor: default; }
.cw__form button svg { width: 16px; height: 16px; }

.cw__foot {
  flex: none; padding: .625rem 1rem .8125rem;
  font-size: 10.5px; line-height: 1.5; color: var(--text-soft);
  border-top: 1px solid var(--line-soft);
}
.cw__foot a { color: var(--org-700); font-weight: 600; }

@media (max-width: 560px) {
  .sup__panel { max-height: min(30rem, calc(100vh - 12rem)); }
}
@media (prefers-reduced-motion: reduce) {
  .cw__dots i { animation: none; opacity: .5; }
}

.totop {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--ink-800); color: #fff; border-radius: var(--r-sm);
  box-shadow: var(--e-4);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all var(--dur-2) var(--ease);
}
.totop.on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--red-600); }
.totop svg { width: 17px; height: 17px; }
@media (max-width: 520px) { .totop { bottom: 4.75rem; } }

@media print {
  .ubar, .hdr, .drw, .scrim, .totop, .cta, .tbar, .toasts { display: none !important; }
  body { color: #000; font-size: 10.5pt; }
  .hero, .phead, .section--ink, .ftr { background: #fff !important; color: #000 !important; }
  .hero h1, .phead h1, .section--ink h2, .section--ink h3, .ftr h2 { color: #000 !important; }
  .fam, .card, .clines { break-inside: avoid; border-color: #bbb; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; }
}

/* --- 23. Overflow containment -------------------------------------------
   Grid and flex items default to min-width:auto, which lets a wide child
   (a spec table inside its own scroller) stretch the track instead of
   scrolling. An explicit min-width:0 keeps horizontal scrolling where it
   belongs — inside .spec-wrap — rather than on the whole page.
   ------------------------------------------------------------------------ */
.cat-layout > *,
.cart-layout > *,
.split > *,
.grid > *,
.hero__in > *,
.phead__in > *,
.cta__in > *,
.ftr__cols > * { min-width: 0; }

.spec-wrap { max-width: 100%; }
.fam { overflow: hidden; }

/* The off-canvas drawer must never widen the document while closed. */
.drw { will-change: transform; }
/* NOTE: overflow-x:hidden on <html> turns it into a scroll container, which
   breaks position:sticky on all descendants AND breaks window.scrollTo().
   overflow-x:clip on body clips without creating a scroll container. */
body { overflow-x: clip; }

/* --- 24. Mega menu motion & hover intent --------------------------------
   The panel sits 12px below the trigger. Without a bridge the pointer
   crosses a dead zone on its way down and the panel closes. This invisible
   strip keeps the item hovered across the gap.
   ------------------------------------------------------------------------ */
.nav__i--mega { position: relative; }
.nav__i--mega::after {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 16px;
  pointer-events: none;
}
.nav__i--mega:hover::after,
.nav__i--mega.is-open::after { pointer-events: auto; }

/* Slower, softer panel motion */
.mega {
  transition: opacity .3s var(--ease-out),
              transform .34s var(--ease-out),
              visibility .34s;
  transform: translateX(-50%) translateY(-10px) scale(.985);
}
.nav__i--mega.is-open .mega {
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Category tiles fade up in sequence once the panel opens */
.mega__c {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), background var(--dur-1) var(--ease);
}
.nav__i--mega.is-open .mega__c { opacity: 1; transform: none; }
.nav__i--mega.is-open .mega__c:nth-child(3n+1) { transition-delay: .05s; }
.nav__i--mega.is-open .mega__c:nth-child(3n+2) { transition-delay: .09s; }
.nav__i--mega.is-open .mega__c:nth-child(3n+3) { transition-delay: .13s; }

@media (prefers-reduced-motion: reduce) {
  .mega, .mega__c { transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .mega__c { opacity: 1; transform: none; }
}

/* --- 25. Page-load polish ----------------------------------------------- */
/* Prevent the layout shifting as web fonts arrive. */
body { font-synthesis-weight: none; }

/* Give the sticky catalogue toolbar a real backdrop while scrolling under it */
.tbar { background: rgba(255,255,255,.96); }

/* Cards and rows should not animate their box-shadow on first paint */
@media (prefers-reduced-motion: no-preference) {
  .catcard, .card { will-change: auto; }
}

/* --- 26. Page head with a photograph ------------------------------------
   Text on the left, product photograph on the right. The frame lifts the
   image off the dark hero so a light panel photo does not look pasted on.
   ------------------------------------------------------------------------ */
/* Trimmed from clamp(2.5rem, 5vw, 4rem). The layout drawing is taller than
   the schematic it replaced, so the band no longer needs generous padding to
   feel substantial -- it needed less. */
.phead--img { padding-block: clamp(1.5rem, 2.8vw, 2.25rem); }
.phead--img .phead__in {
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: center;
}
/* Single column earlier than the 940px this used to be. The machine shop
   drawing needs about 520px to keep its labels legible; below roughly
   1180px the right-hand column drops under that and the sheet starts
   scrolling sideways inside a narrow well, which reads worse than simply
   giving the drawing the full width of the page. */
@media (max-width: 1180px) {
  .phead--img .phead__in { grid-template-columns: 1fr; }
}

.pshot {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.7), 0 8px 20px -10px rgba(0,0,0,.5);
  padding: 10px;
}
.pshot__inner {
  position: relative;
  border-radius: calc(var(--r-lg) - 5px);
  overflow: hidden;
  background: #0E1721;
}
.pshot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.pshot:hover img { transform: scale(1.035); }

/* Caption strip across the bottom of the photo */
.pshot__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.5rem 1rem .85rem;
  background: linear-gradient(to top, rgba(7,12,18,.92), rgba(7,12,18,.55) 55%, transparent);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #C6D3E2;
}
.pshot__cap b { color: #7FD4D6; font-weight: 500; }

/* Small floating credential chip on the photo */
.pshot__chip {
  position: absolute; top: 1rem; left: 1rem;
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .375rem .6875rem;
  background: rgba(7,12,18,.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; color: #fff;
}
.pshot__chip svg { width: 13px; height: 13px; color: #7FD4D6; }

@media (max-width: 940px) {
  .pshot img { aspect-ratio: 16 / 10; }
}

/* --- Photo strip used further down a page -------------------------------- */
.pstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 820px) { .pstrip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pstrip { grid-template-columns: 1fr; } }

.pcard {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--n-000);
  box-shadow: var(--e-1);
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.pcard:hover { box-shadow: var(--e-4); transform: translateY(-3px); border-color: var(--n-300); }
.pcard img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--n-050);
  transition: transform .9s var(--ease-out);
}
.pcard:hover img { transform: scale(1.04); }
.pcard__cap {
  padding: .875rem 1rem;
  border-top: 1px solid var(--line-soft);
  background: var(--n-025);
}
.pcard__cap b { display: block; font-size: var(--t-base); font-weight: 600; color: var(--ink-800); }
.pcard__cap span { display: block; font-size: var(--t-xs); color: var(--text-soft); margin-top: .1875rem; }

/* --- 27. Machine shop layout drawing -------------------------------------
   A plan view of a shop floor: the electrical room feeds an overhead busway
   that drops to two CNC machines, a weld cell, a conveyor and a palletiser,
   with a PROFINET ring closing back to the controller. Four layers can be
   switched off independently so a visitor can read one system at a time.

   PALETTE. It sits on .phead, which is dark whatever the visitor's settings,
   so dark is the default rather than the exception. The light set is applied
   by .msl--light, for a light surface -- it is not tied to
   prefers-color-scheme, because the surface behind the drawing does not
   change with the operating system and a pale sheet would be stranded on a
   near-black header.
   ------------------------------------------------------------------------ */
.msl {
  --msl-sheet: #0E1720;
  --msl-rule:  #26343F;
  --msl-ink:   #DDE4EB;
  --msl-ink2:  #8394A2;
  --msl-body:  #17222C;   /* machine bodies, so they read against the sheet */
  --msl-power: #F0A63C;
  --msl-net:   #35C79E;
  --msl-safe:  #A48CF7;
  --msl-live:  #35C79E;
  --msl-chip:  rgba(255,255,255,.05);
  --msl-chipb: rgba(255,255,255,.16);

  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.msl--light {
  --msl-sheet: #FBFAF7;
  --msl-rule:  #C8C5BC;
  --msl-ink:   #1B222A;
  --msl-ink2:  #5C6773;
  --msl-body:  #FFFFFF;
  --msl-power: #C07610;
  --msl-net:   #0D7D64;
  --msl-safe:  #6247BE;
  --msl-live:  #0D7D64;
  --msl-chip:  #FFFFFF;
  --msl-chipb: #D6D3CA;
}

/* ---- layer switches ---- */
.msl__bar { display: flex; flex-wrap: wrap; gap: .375rem; }
.msl__t {
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .3125rem .625rem;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--msl-ink2);
  background: var(--msl-chip);
  border: 1px solid var(--msl-chipb);
  border-radius: var(--r-xs);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.msl__t:hover { color: var(--msl-ink); }
.msl__t[aria-pressed="true"] { color: var(--msl-ink); border-color: var(--msl-ink2); }
.msl__sw { width: 9px; height: 9px; border-radius: 2px; flex: none; opacity: .3; transition: opacity var(--dur-1) var(--ease); }
.msl__t[aria-pressed="true"] .msl__sw { opacity: 1; }
.msl__sw--p { background: var(--msl-power); }
.msl__sw--n { background: var(--msl-net); }
.msl__sw--s { background: var(--msl-safe); }
.msl__sw--a { background: var(--msl-ink2); }

/* ---- the sheet ---- */
.msl__sheet {
  background: var(--msl-sheet);
  border: 1px solid var(--msl-rule);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* A 680-unit drawing squeezed into a 320px phone renders its 11px labels at
   about 5px, which is unreadable. Below the point where that happens the
   sheet scrolls sideways at a legible minimum instead -- the same treatment
   the article tables get. */
.msl__scroll { overflow-x: auto; overscroll-behavior-x: contain; padding: .75rem .75rem 0; }
.msl__svg { display: block; width: 100%; height: auto; min-width: 520px; }

.msl__tb {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--msl-rule); margin-top: .75rem;
}
.msl__tb div {
  padding: .4375rem .75rem; border-right: 1px solid var(--msl-rule);
  font-size: 11.5px; color: var(--msl-ink); line-height: 1.35;
}
.msl__tb div:last-child { border-right: 0; }
.msl__tb b {
  display: block; font-family: var(--f-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--msl-ink2); margin-bottom: .125rem;
}
.msl__sched {
  border-top: 1px solid var(--msl-rule);
  padding: .5625rem .75rem .625rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .125rem .75rem;
  font-size: 11.5px; color: var(--msl-ink2);
}
.msl__sched code {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
  color: var(--msl-ink); margin-right: .4375rem;
}

/* ---- SVG type ---- */
.msl__svg text { font-family: var(--f-body); }
.msl__svg .t  { font-size: 12px; fill: var(--msl-ink); }
.msl__svg .tm { font-family: var(--f-mono); font-size: 11px; font-weight: 500; fill: var(--msl-ink2); letter-spacing: .03em; }
.msl__svg .tr { font-family: var(--f-mono); font-size: 11px; fill: var(--msl-ink2); }

/* ---- motion ---- */
@keyframes mslDash  { to { stroke-dashoffset: -24; } }
@keyframes mslSpin  { to { transform: rotate(360deg); } }
@keyframes mslArm1  { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(30deg); } }
@keyframes mslArm2  { 0%, 100% { transform: rotate(36deg); }  50% { transform: rotate(-28deg); } }
@keyframes mslPal   { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(170px); opacity: 0; } }
@keyframes mslAgv   { 0% { transform: translateX(0); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translateX(358px); opacity: 0; } }
@keyframes mslBlink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

.msl-pw  { stroke-dasharray: 7 5; animation: mslDash 1.1s linear infinite; }
.msl-dt  { stroke-dasharray: 3 6; animation: mslDash 1.5s linear infinite; }
.msl-sp  { animation: mslSpin 1.4s linear infinite; transform-box: fill-box; transform-origin: center; }
.msl-pl  { animation: mslPal 3.6s linear infinite; }
.msl-ag  { animation: mslAgv 9s linear infinite; }
.msl-led { animation: mslBlink 1.9s ease-in-out infinite; }
#mslArm1 { animation: mslArm1 4.4s ease-in-out infinite; }
#mslArm2 { animation: mslArm2 3.6s ease-in-out infinite; }
#mslArm1, #mslArm2 { transform-box: fill-box; transform-origin: 0 50%; }

/* Switched-off layers stay in the drawing rather than disappearing, so the
   reader keeps their bearings while comparing one system against another. */
#msl-pw, #msl-dt, #msl-sf, #msl-ag { transition: opacity var(--dur-2) var(--ease); }
.is-off { opacity: .07; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .msl-pw, .msl-dt, .msl-sp, .msl-pl, .msl-ag, .msl-led,
  #mslArm1, #mslArm2 { animation: none !important; }
  .msl-pw, .msl-dt { stroke-dasharray: none; }
}
@media (max-width: 560px) {
  .msl__tb { grid-template-columns: repeat(2, 1fr); }
  .msl__tb div:nth-child(2) { border-right: 0; }
}
/* --- 28. Small-phone header ---------------------------------------------
   Below ~480px the brand lockup, cart button and menu button no longer fit
   on one row and pushed the header past the viewport. Tighten progressively.
   ------------------------------------------------------------------------ */
@media (max-width: 480px) {
  .hdr__in { gap: .5rem; min-height: 62px; }
  .brand { gap: .5rem; }
  .brand__tx { display: none; }          /* empty text block would leave a stray divider */
  .brand__mk { height: 40px; }
  .hdr__act { gap: .375rem; }
  .cartbtn { padding: .5rem .5625rem; gap: .375rem; }
  .cartbtn svg { width: 16px; height: 16px; }
  .burger { width: 38px; height: 38px; padding: 0 9px; }
  :root { --hdr-h: 62px; }
}

@media (max-width: 360px) {
  .brand__mk { height: 34px; }
}

/* --- 29. Very narrow screens (320px and under) ---------------------------
   Three things overflowed at 320px:
     1. .brand and .hdr__act are both flex:none, so neither could shrink
     2. .btn is white-space:nowrap, so a long label could not wrap
     3. .catgrid used minmax(290px, 1fr) - a hard 290px floor
   ------------------------------------------------------------------------ */

/* Grid tracks must never demand more than the container can give */
.catgrid { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }

@media (max-width: 420px) {
  /* Buttons wrap instead of pushing the page wider, and fill the row */
  .btn { white-space: normal; text-align: center; }
  .btn--lg { padding: .875rem 1.125rem; font-size: var(--t-base); }
  .btn-row { gap: .625rem; }
  .btn-row > .btn { flex: 1 1 100%; }
}

@media (max-width: 360px) {
  /* Logo mark only - the wordmark no longer fits beside the cart and menu */
  .brand__tx { display: none; }
  .brand { min-width: 0; }
  .brand__mk { height: 34px; }
  .hdr__in { gap: .375rem; }
  .hdr__act { gap: .3125rem; }
  .ubar__r { gap: .75rem; font-size: 11.5px; }
}

/* --- 30. Panel marquee ---------------------------------------------------
   Continuously scrolling strip of panel photographs. The track holds the set
   twice and translates exactly -50%, so the loop is seamless. Spacing uses
   margin-right (not flex gap) so half the track is exactly one full set —
   with flex gap the halves differ and the loop visibly jumps.
   ------------------------------------------------------------------------ */
.pmarq {
  position: relative;
  overflow: hidden;
  padding-block: .5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.pmarq__track {
  display: flex;
  width: max-content;
  animation: pmarqRun 52s linear infinite;
  will-change: transform;
}
@keyframes pmarqRun {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Second row drifts the other way for a calmer, layered feel */
.pmarq__track--rev { animation-name: pmarqRunRev; animation-duration: 61s; }
@keyframes pmarqRunRev {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Let people stop it to actually look */
.pmarq:hover .pmarq__track,
.pmarq:focus-within .pmarq__track { animation-play-state: paused; }

.pmarq__item {
  flex: 0 0 auto;
  width: clamp(230px, 25vw, 340px);
  margin-right: 1.125rem;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--n-050);
  border: 1px solid var(--line);
  box-shadow: var(--e-1);
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.pmarq__item:hover { box-shadow: var(--e-4); transform: translateY(-3px); }

.pmarq__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.pmarq__item:hover img { transform: scale(1.05); }

/* Type label sitting on the image */
.pmarq__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.75rem .875rem .75rem;
  background: linear-gradient(to top, rgba(7,12,18,.88), rgba(7,12,18,.45) 55%, transparent);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -.005em;
  pointer-events: none;
}

/* Dark-section variant */
.section--ink .pmarq__item { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }

/* Reduced motion: stop the drift, let it be swiped instead */
@media (prefers-reduced-motion: reduce) {
  .pmarq {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .pmarq__track { animation: none !important; transform: none !important; }
  .pmarq__item { scroll-snap-align: start; }
}

/* --- 31. Panel zoning diagram -------------------------------------------
   Built from real HTML, not SVG. An SVG scales its text down with the
   drawing, so on a 320px phone the labels rendered at ~4.6px and were
   unreadable. Real text reflows and stays legible at every width, and it
   is selectable, translatable and screen-reader friendly.
   ------------------------------------------------------------------------ */
.zd {
  background: linear-gradient(180deg, #111E2C, #0A121B);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-lg);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  overflow: hidden;
}

.zd__head { padding-bottom: .875rem; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 1rem; }
.zd__kick {
  display: block;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: #7FD4D6; margin-bottom: .4375rem;
}
.zd__head p { font-size: var(--t-base); color: #9FB2C7; margin: 0; }

/* --- enclosure --- */
.zd__case {
  border: 1px solid rgba(255,255,255,.15);
  border-left: 5px solid rgba(255,255,255,.09);
  border-radius: var(--r-md);
  padding: .875rem;
  display: grid;
  gap: .5rem;
}

/* --- one zone --- */
.zd__zone {
  display: grid;
  grid-template-columns: 4px 34px 1fr auto;
  align-items: center;
  gap: 0 .875rem;
  padding: .875rem 1rem .875rem .75rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--zc-line, rgba(255,255,255,.16));
  background: var(--zc-bg, rgba(255,255,255,.04));
}
.zd__bar { width: 4px; height: 100%; min-height: 44px; border-radius: 2px; background: var(--zc, #fff); }
.zd__ico { width: 34px; height: 34px; display: grid; place-items: center; color: var(--zc, #fff); }
.zd__ico svg { width: 22px; height: 22px; }

.zd__t { min-width: 0; }
.zd__n {
  display: block;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--zc, #fff); margin-bottom: .3125rem;
}
.zd__m { font-size: var(--t-base); color: #D3DEEB; margin: 0; line-height: 1.45; }
.zd__s { font-size: var(--t-sm); color: #7C90A8; margin: .25rem 0 0; line-height: 1.4; }

.zd__v {
  justify-self: end;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; white-space: nowrap;
  padding: .3125rem .75rem;
  border-radius: var(--r-pill);
  color: var(--zc, #fff);
  background: var(--zc-chip, rgba(255,255,255,.12));
  border: 1px solid var(--zc-line, rgba(255,255,255,.3));
}

/* zone colour themes */
.zd__zone--prot  { --zc:#FF8A8F; --zc-bg:rgba(200,32,42,.11);  --zc-line:rgba(200,32,42,.45); --zc-chip:rgba(200,32,42,.22); }
.zd__zone--pwr   { --zc:#FFC65C; --zc-bg:rgba(255,176,32,.09); --zc-line:rgba(255,176,32,.38); --zc-chip:rgba(255,176,32,.18); }
.zd__zone--drv   { --zc:#FFB06B; --zc-bg:rgba(255,152,56,.09); --zc-line:rgba(255,152,56,.36); --zc-chip:rgba(255,152,56,.18); }
.zd__zone--ctrl  { --zc:#7FD4D6; --zc-bg:rgba(0,155,158,.11);  --zc-line:rgba(0,155,158,.48); --zc-chip:rgba(0,155,158,.2); }
.zd__zone--field { --zc:#A9C6F5; --zc-bg:rgba(96,148,224,.10); --zc-line:rgba(96,148,224,.38); --zc-chip:rgba(96,148,224,.18); }

/* --- HV/LV barrier --- */
.zd__barrier {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin: .375rem 0;
  min-height: 26px;
}
.zd__barrier::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 2px dashed rgba(127,212,214,.65);
}
.zd__barrier span {
  position: relative;
  background: #0C1620;
  padding: .25rem .875rem;
  border: 1px solid rgba(127,212,214,.45);
  border-radius: var(--r-pill);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #7FD4D6;
  text-align: center;
}

/* --- earth bar --- */
.zd__earth {
  display: flex; align-items: center; gap: .625rem;
  margin-top: .75rem;
  padding: .6875rem .9375rem;
  background: rgba(52,211,153,.14);
  border: 1px solid rgba(52,211,153,.5);
  border-radius: var(--r-sm);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: #6EE7B7;
}
.zd__earth svg { width: 18px; height: 18px; flex: none; }

/* --- legend --- */
.zd__leg {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  margin-top: 1rem; padding-top: .875rem;
  border-top: 1px solid rgba(255,255,255,.11);
}
.zd__leg span { display: inline-flex; align-items: center; gap: .4375rem; font-size: var(--t-sm); color: #9FB2C7; }
.zd__leg i { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* --- narrow screens: drop the icon, let the chip sit above the text --- */
@media (max-width: 620px) {
  .zd__zone { grid-template-columns: 4px 1fr; gap: 0 .75rem; row-gap: .5rem; align-items: start; padding: .875rem; }
  .zd__ico { display: none; }
  .zd__bar { min-height: 100%; }
  .zd__v { grid-column: 2; justify-self: start; }
  .zd__n { font-size: 11px; }
}
@media (max-width: 380px) {
  .zd__earth { font-size: 10.5px; letter-spacing: .05em; }
  .zd__barrier span { font-size: 10.5px; letter-spacing: .07em; }
}


/* --- 31b. Customer logo strip (Industries page) --------------------------
   Full colour, deliberately. Greyscale-until-hover is the usual treatment for
   a logo wall, but a touch screen has no hover, so on a phone it would never
   resolve and half the visitors would only ever see grey.

   The supplied artwork ranges from 0.9:1 to 5:1 in aspect, so constraining
   width alone would leave a square mark tiny and a wordmark enormous. Each
   logo is instead capped on BOTH axes inside a fixed cell and centred with
   object-fit: contain — a wide wordmark is limited by the cell width, a
   compact mark by its height, and they end up reading as the same weight.
   ------------------------------------------------------------------------- */
.pmarq--clients { padding-block: .25rem; }

/* The tile is a plain block, not a grid. It was `display: grid` with the image
   sized by `max-width/max-height: 100%`, and the max-height never applied: an
   auto grid row track sizes itself to its content, so 100% resolved against the
   image's own overflowing height rather than the tile's. Only max-width bound
   anything, so every logo rendered exactly one tile wide and tall ones spilled
   out of the strip — ZF is square, so it came out 176x176 in a 76px row.

   A block box with a definite height gives the image a real percentage to
   resolve against. The image then fills the tile exactly and object-fit does
   the letterboxing, so a wide wordmark is bound by the tile width and a square
   mark by its height, both centred. */
.cmarq__item {
  flex: 0 0 auto;
  width: clamp(132px, 13vw, 176px);
  height: clamp(62px, 6.6vw, 88px);
  margin-right: clamp(1.75rem, 3.5vw, 3.25rem);
}
.cmarq__item img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  /* No filter: the brief was colour, and three of these logos carry their
     brand's own coloured ground which greyscale would destroy. */
  transition: transform var(--dur-2) var(--ease);
}
.cmarq__item:hover img { transform: scale(1.06); }

/* Slower than the product strip: there are fewer items and they carry names a
   visitor may want to read as they pass. */
.pmarq__track--clients { animation-duration: 46s; }

/* The second row travels the other way. Not decoration: two rows sliding the
   same direction read as one thick band, and opposed they stay legible as two
   separate lines. A different duration as well, so the rows do not fall into
   step and start looking like a single grid.

   pmarqRunRev starts at -50% and ends at 0, so the row is already correctly
   filled on the first frame — starting from 0 and running positive would drag
   the track off its left edge and leave a gap. */
.pmarq__track--clients-2 { animation-name: pmarqRunRev; animation-duration: 53s; }

/* The rows are separate .pmarq elements so each can be paused on its own;
   this closes the gap the block margin would otherwise leave between them. */
.pmarq--clients + .pmarq--clients { padding-top: 0; margin-top: clamp(.75rem, 1.6vw, 1.5rem); }

@media (max-width: 560px) {
  .cmarq__item { margin-right: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cmarq__item:hover img { transform: none; }
}

/* --- 32. Product marquee (home page) ------------------------------------
   Two rows of square product images drifting in opposite directions.
   Row 1 runs left to right, row 2 right to left. Same seamless-loop rule as
   the panel marquee: the set is duplicated and spacing uses margin-right,
   never flex gap, so half the track is exactly one full set.
   ------------------------------------------------------------------------ */
.pmarq--prod { padding-block: .5rem; }   /* room for the card border + shadow inside overflow:hidden */
.pmarq--prod + .pmarq--prod { margin-top: .375rem; }  /* 8px pad + 6px + 8px pad = 22px card-to-card */

.pmarq--prod .pmarq__item {
  width: clamp(118px, 11vw, 156px);
  margin-right: .5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
  overflow: hidden;
}
.pmarq--prod .pmarq__item:hover {
  border-color: var(--n-300);
  box-shadow: var(--e-3);
  transform: translateY(-2px);
}

/* Square, and contained — these images carry their own labels and a white
   background, so cropping them would cut the product name off. */
.pmarq--prod .pmarq__item img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  padding: 5px;
  transition: transform .8s var(--ease-out);
}
.pmarq--prod .pmarq__item:hover img { transform: scale(1.04); }

/* Row 1 travels left to right, row 2 right to left */
.pmarq__track--ltr { animation-name: pmarqRunRev; animation-duration: 64s; }
.pmarq__track--rtl { animation-name: pmarqRun;    animation-duration: 72s; }

/* On a dark section the cards keep their white product background */
.section--ink .pmarq--prod .pmarq__item { border-color: rgba(255,255,255,.18); }

@media (max-width: 560px) {
  .pmarq--prod .pmarq__item { width: 104px; margin-right: .4375rem; }
  .pmarq--prod + .pmarq--prod { margin-top: .25rem; }
}

/* Empty-state note shown until the image files are supplied */
.pmarq-empty {
  display: grid; place-items: center; gap: .5rem;
  padding: 2.5rem 1.5rem; text-align: center;
  background: repeating-linear-gradient(45deg, var(--n-025), var(--n-025) 10px, var(--n-000) 10px, var(--n-000) 20px);
  border: 2px dashed var(--n-300); border-radius: var(--r-md);
  color: var(--text-soft);
}
.pmarq-empty b { font-size: var(--t-base); color: var(--text-mute); }
.pmarq-empty code {
  font-family: var(--f-mono); font-size: var(--t-sm);
  background: var(--n-100); padding: .1875rem .4375rem; border-radius: 3px; color: var(--ink-800);
}

/* --- 33. Marquee load handling ------------------------------------------
   A marquee scrolls horizontally, but lazy-loading only anticipates vertical
   scrolling, so tiles popped in blank as they slid into view. JS now preloads
   the whole strip as the section approaches and holds the animation until the
   images are decoded. The hold class is added by JS, so with JavaScript off
   the marquee still animates normally.
   ------------------------------------------------------------------------ */
.pmarq.is-holding .pmarq__track { animation-play-state: paused; }

.pmarq__item img { opacity: 1; transition: opacity .45s var(--ease-out); }
.pmarq.is-holding .pmarq__item img { opacity: 0; }

/* Quiet placeholder tint while the strip warms up */
.pmarq.is-holding .pmarq__item { background: var(--n-050); }

@media (prefers-reduced-motion: reduce) {
  .pmarq__item img { transition: none; }
}
/* --- 34. Hero product spotlight -----------------------------------------
   The products we actually sell, shown one at a time. Each component fades
   in, holds long enough to be read, fades out, and the next one takes its
   place. Nothing overlaps because only one slide is ever visible.

   Timing is driven by two custom properties. Every slide gets the same
   animation and the same duration; they are separated only by their
   animation-delay, which is --i multiplied by --shw-each. The keyframe
   percentages below are therefore expressed as a fraction of the WHOLE
   cycle, not of one slide:

       one slide window = 100% / 5 slides = 20%

   So a slide fades up over 0%-3.2%, holds to 16.8%, fades out by 19.84%, and
   stays hidden for the remaining 80.16% while the other four take their
   turn. The 0.16% of dead air before the next slide begins is what keeps
   two components from ever being on screen together.

   If you add or remove a slide you must change --shw-slides AND recompute
   those percentages, or the sequence will drift out of step.
   ------------------------------------------------------------------------ */
.shw {
  --shw-slides: 5;
  --shw-each: 3s;
  --shw-cycle: calc(var(--shw-each) * var(--shw-slides));

  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* The spotlight sets the hero's height. Was clamp(30rem, 46vw, 46rem), which
     at 1280px came to 589px and pushed the whole hero past a laptop screen. */
  min-height: clamp(21rem, 30vw, 31rem);
  padding: clamp(1.1rem, 1.7vw, 1.6rem);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--r-lg, 18px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0, 155, 158, .13), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .85);
  overflow: hidden;
}

/* faint technical grid behind the component */
.shw::before {
  content: '';
  position: absolute; inset: 0;
  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: 46px 46px;
  mask-image: radial-gradient(75% 60% at 50% 45%, #000, transparent 78%);
  pointer-events: none;
}

.shw > * { position: relative; z-index: 1; }

/* ---- header strip ---- */
.shw__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.shw__eyebrow {
  font-family: var(--f-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--pet-300, #7FD4D6);
}
.shw__live {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .48);
}
.shw__live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #34D399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .18);
  animation: shwLive 2.4s ease-in-out infinite;
}
@keyframes shwLive { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ---- stage: every slide occupies the same grid cell ---- */
.shw__stage {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding-block: clamp(.75rem, 1.6vw, 1.4rem);
  min-height: 0;
}
.shw__slide {
  grid-area: 1 / 1;                  /* stacked, so nothing can ever overlap */
  width: 100%;
  margin: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(.9rem, 1.8vw, 1.5rem);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  animation: shwFade var(--shw-cycle) ease-in-out infinite;
  animation-delay: calc(var(--i) * var(--shw-each));
}

@keyframes shwFade {
  0%            { opacity: 0; transform: translate3d(0, 16px, 0) scale(.965); }
  3.2%          { opacity: 1; transform: translate3d(0, 0, 0)    scale(1); }
  16.8%         { opacity: 1; transform: translate3d(0, 0, 0)    scale(1); }
  19.84%, 100%  { opacity: 0; transform: translate3d(0, -14px, 0) scale(.975); }
}

/* ---- the component drawing ---- */
.shw__art {
  width: min(100%, 27rem);
  aspect-ratio: 320 / 220;
}
.shw__art svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Shared component vocabulary. Every illustration is built from these five
   classes so all eight products look like they came out of the same catalogue. */
.sh-b   { fill: #16212E; stroke: #92A8C2; stroke-width: 2; }      /* housing   */
.sh-p   { fill: #0E1826; stroke: #6F869F; stroke-width: 1.6; }    /* recess    */
.sh-m   { fill: #22313F; stroke: #7E93AC; stroke-width: 1.6; }    /* metal     */
.sh-s   { fill: #0A2A31; stroke: #2E7F86; stroke-width: 1.6; }    /* screen    */
.sh-l   { stroke: #6F869F; stroke-width: 1.6; fill: none; }       /* detail    */
.sh-a   { stroke: #7FD4D6; stroke-width: 2;   fill: none; }       /* accent    */
.sh-led { fill: #34D399; }

/* ---- caption (HTML, not SVG text, so it stays legible at every width) ---- */
.shw__cap {
  display: flex; flex-direction: column; align-items: center;
  gap: .4rem; text-align: center;
  max-width: 30rem;
}
.shw__kick {
  font-family: var(--f-mono); font-size: .69rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--pet-300, #7FD4D6);
}
.shw__name {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  line-height: 1.12; letter-spacing: -.01em; color: #fff;
}
.shw__spec {
  font-size: clamp(.86rem, 1.05vw, .95rem);
  line-height: 1.6; color: rgba(255, 255, 255, .62);
  text-wrap: balance;
}

/* ---- progress ticks: the active one fills across its own slide window ---- */
.shw__dots {
  display: flex; justify-content: center; gap: .4rem;
  padding-bottom: .9rem;
}
.shw__dot {
  width: 26px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .13);
  overflow: hidden;
}
.shw__dot i {
  display: block; height: 100%; width: 100%;
  background: var(--red-500, #D8232A);
  transform: scaleX(0); transform-origin: left;
  animation: shwTick var(--shw-cycle) linear infinite;
  animation-delay: calc(var(--i) * var(--shw-each));
}
@keyframes shwTick {
  0%          { transform: scaleX(0); }
  20%         { transform: scaleX(1); }
  20.16%, 100% { transform: scaleX(0); }
}

/* ---- footer strip ---- */
.shw__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .13em; text-transform: uppercase;
  /* White: it started at rgba(255,255,255,.4), 3.0:1 against the panel. */
  color: #fff;
}

.hero__panel-wrap { position: relative; align-self: stretch; display: flex; }
.hero__panel-wrap > .shw { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
  .shw__slide, .shw__dot i, .shw__live i { animation: none !important; }
  .shw__slide { opacity: 0; transform: none; }
  .shw__slide:first-child { opacity: 1; }   /* show one, hold it still */
  .shw__dot:first-child i { transform: scaleX(1); }
}

/* On a phone the spotlight sits under the headline, buttons and stats. It was
   hidden here originally because a 46rem-tall panel pushed everything else off
   screen; instead of dropping it, the whole component scales down — shorter
   frame, smaller drawing, smaller type — so it reads as a closing flourish to
   the hero rather than a second screenful. */
@media (max-width: 640px) {
  .shw {
    height: auto;
    min-height: 0;
    padding: 1rem .9rem .8rem;
    border-radius: 14px;
  }
  .shw::before { background-size: 34px 34px; }
  .shw__eyebrow, .shw__live { font-size: .64rem; letter-spacing: .12em; }
  .shw__top { padding-bottom: .7rem; }
  .shw__stage { padding-block: .85rem; }
  .shw__slide { gap: .85rem; }
  .shw__art { width: min(100%, 16.5rem); }
  .shw__kick { font-size: .62rem; letter-spacing: .17em; }
  .shw__name { font-size: 1.3rem; }
  .shw__spec { font-size: .84rem; line-height: 1.55; max-width: 26rem; }
  .shw__dots { padding-bottom: .55rem; }
  .shw__dot { width: 18px; }
  .shw__foot {
    justify-content: center; gap: .3rem .8rem;
    padding-top: .7rem; font-size: .63rem; letter-spacing: .1em;
  }
}