/* ==========================================================================
   FIVER COMPRESSOR — UI Kit "Plate & Rule"
   An engineering-catalogue / editorial system for an A/C compressor maker.

   Deliberately NOT the house style used for the sibling autoparts kit:
   no rounded soft-shadow cards, no full-bleed scrim hero, no pill buttons,
   no floating stat card. Everything here is flat, ruled and numbered —
   paper, hairlines, plates with captions, and a serif/mono editorial voice.

   Palette is taken from the client's own logo:
     steel blue #3D7FAC (wordmark) · copper #B4691C (coil) · gear grey #606F84
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Paper stock */
  --paper:      #F1EFE8;
  --paper-2:    #E8E5DA;
  --paper-3:    #FBFAF6;
  --paper-4:    #DCD8CB;

  /* Ink */
  --ink:        #15181A;
  --ink-2:      #23282B;
  --ink-3:      #3B4246;
  --ink-4:      #555D62;

  /* Rules */
  --rule:       #C2BCAB;
  --rule-2:     #D8D3C4;
  --rule-dark:  #2E3438;

  /* Brand */
  --accent:     #1F5C8B;   /* FIVER wordmark blue */
  --accent-600: #164766;
  --accent-soft:#E1EAF1;
  --copper:     #B4691C;   /* the coil in the gear */
  --brand-gear: #606F84;   /* the cog */
  --copper-soft:#F5E9DA;

  /* Type */
  --font-display: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:    'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', 'SFMono-Regular', Consolas, monospace;

  /* Layout */
  --wrap: 1340px;
  --gutter: 32px;
  --header-h: 118px;

  /* Spacing scale -- the only permitted rhythm.
     4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;

  /* Signature: a single accent rule that marks the current section */
  --accent-rule: linear-gradient(90deg, var(--accent) 0%, var(--copper) 100%);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.68 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; transition: color .16s linear; }
a:hover { color: var(--copper); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.08; }
p { margin: 0; }
/* The browser gives <figure> a 1em/40px margin and <dd> a 40px indent.
   Both are silently inherited by the plate grids and the facts strip, so
   the pictures and the labels sit off the column edge. */
figure, dl, dd { margin: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper); padding: var(--sp-3) var(--sp-5);
  font: 500 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Typographic primitives
   -------------------------------------------------------------------------- */

/* The display voice — a high-contrast serif, used large and sparingly */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.015em;
}
.display em { font-style: italic; color: var(--accent); }
.display--xl { font-size: clamp(44px, 6.2vw, 86px); }
.display--lg { font-size: clamp(34px, 4.4vw, 60px); }
.display--md { font-size: clamp(26px, 2.8vw, 38px); }

/* Monospace technical voice — labels, part numbers, captions */
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.mono--accent { color: var(--accent); }
.mono--copper { color: var(--copper); }
.mono--onink { color: #8C9498; }

/* A ruled section index — § 01 */
.section-no {
  display: flex; align-items: center; gap: var(--sp-4);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.section-no::after {
  content: ''; flex: 1; height: 1px; background: var(--rule);
}
.section-no--copper { color: var(--copper); }
.on-ink .section-no { color: #9FB6C6; }
.on-ink .section-no::after { background: var(--rule-dark); }

/* Running head — the line that names the document */
.folio {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-4);
}
.on-ink .folio { color: #7E868A; }

.lede { font-size: 18px; line-height: 1.72; color: var(--ink-3); max-width: 62ch; }
.on-ink .lede { color: #A8AFB3; }

.mark { background: linear-gradient(transparent 62%, var(--copper-soft) 0); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 880px; }

.section { padding: var(--sp-12) 0; border-top: 1px solid var(--rule); }
.section--flush { padding: 0; border-top: 0; }
.section--paper2 { background: var(--paper-2); }
.section--paper3 { background: var(--paper-3); }
.section--ink { background: var(--ink); color: var(--paper); border-top: 0; }
.section--ink a { color: #9FB6C6; }
.section--ink a:hover { color: var(--copper); }
.section--tight { padding: var(--sp-10) 0; }

.on-ink { color: var(--paper); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: var(--sp-10); align-items: start; }
.split--left { grid-template-columns: var(--rail) minmax(0, 1fr); }
.split__side {
  position: sticky; top: 32px;
  display: flex; flex-direction: column; gap: var(--sp-6);
}
:root { --rail: 320px; }

/* Section heading block */
.sec-head { margin-bottom: var(--sp-10); max-width: 780px; }
.sec-head__title { margin-top: var(--sp-6); }
/* in the flex variant the row gap already spaces the title -- the extra
   margin-top would stack on top of it */
.sec-head__row .sec-head__title { margin-top: 0; }
.sec-head__sub { margin-top: var(--sp-5); }
.sec-head__row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-8); row-gap: var(--sp-6); flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   5. Buttons & links — square, ruled, monospaced
   -------------------------------------------------------------------------- */

/* Tags & status chips — square, ruled, no pills */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--rule); background: transparent;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  transition: border-color .16s linear, color .16s linear;
}
.chip--frost { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.chip--heat  { border-color: var(--copper); color: var(--copper); background: var(--copper-soft); }
.chip--ok    { border-color: #2E7D5B; color: #2E7D5B; }
.chip--grey  { color: var(--ink-4); }
.chip--solid-frost { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip--solid-frost:hover { background: var(--accent-600); color: #fff; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-7);
  background: var(--ink); color: var(--paper-3);
  border: 1px solid var(--ink);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background .16s linear, color .16s linear, border-color .16s linear;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-600); border-color: var(--accent-600); }
.btn--copper { background: var(--copper); border-color: var(--copper); color: #fff; }
.btn--copper:hover { background: #96601A; border-color: #96601A; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper-3); }
.btn--onink { background: transparent; color: var(--paper); border-color: #3A4246; }
.btn--onink:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--sm { padding: var(--sp-3) var(--sp-5); font-size: 11px; }
.btn--lg { padding: var(--sp-5) var(--sp-7); font-size: 13px; }
.btn--block { width: 100%; }
.btn__arrow { transition: transform .16s linear; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Underlined text link with a sliding rule */
.link {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid currentColor; padding-bottom: var(--sp-1);
}
.link::after { content: '→'; transition: transform .16s linear; }
.link:hover::after { transform: translateX(4px); }
.on-ink .link { color: #9FB6C6; }

/* --------------------------------------------------------------------------
   6. Plates — images with a numbered caption rule
   -------------------------------------------------------------------------- */
.plate { margin: 0; position: relative; }
.plate img { width: 100%; display: block; background: var(--paper-4); }
.plate figcaption {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding-top: var(--sp-3); border-top: 1px solid var(--rule);
  margin-top: 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4);
}
.plate figcaption b { color: var(--accent); font-weight: 500; }
.on-ink .plate figcaption { color: #7E868A; border-top-color: var(--rule-dark); }
.on-ink .plate figcaption b { color: var(--copper); }

/* --------------------------------------------------------------------------
   7. Masthead & contents bar
   -------------------------------------------------------------------------- */

/* The 3 px accent rule that tops every page */
.toprule { height: 3px; background: var(--accent-rule); }

/* Utility strip */
.util {
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-4);
}
.util__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); min-height: 38px; }
.util__links { display: flex; align-items: center; gap: var(--sp-5); }
.util a { color: var(--ink-4); padding: var(--sp-1) 0; }
.util a:hover { color: var(--accent); }
.util__dot { width: 5px; height: 5px; background: var(--copper); flex: none; }
.util__links > span, .util a { white-space: nowrap; }
.util__tel, .util__sep--tel { display: none; }

/* Masthead */
.masthead { border-bottom: 1px solid var(--rule); background: var(--paper); }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-8); min-height: 74px;
}
.brand { display: flex; align-items: center; gap: var(--sp-4); }
.brand__logo { height: 42px; width: auto; }
.brand__word {
  font-family: var(--font-display); font-size: 25px; line-height: 1;
  letter-spacing: .02em; color: var(--ink);
}
.brand__word b { font-weight: 400; }
.brand__sub {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4); margin-top: var(--sp-1);
}
.masthead__contact { text-align: right; }
.masthead__contact a { color: var(--ink); }
.masthead__contact a:hover { color: var(--accent); }

/* Contents bar — a catalogue's table of contents, not a pill nav */
.contents {
  border-top: 1px solid var(--rule); background: var(--paper);
  position: sticky; top: 0; z-index: 90;
}
.contents.is-stuck { box-shadow: 0 6px 22px rgba(21,24,26,.07); }
.contents__inner { display: flex; align-items: stretch; justify-content: space-between; gap: var(--sp-7); }
.contents__list { display: flex; align-items: stretch; }
.contents__item { position: static; }
.contents__link {
  position: relative;
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  border-right: 1px solid var(--rule);
  transition: color .16s linear, background .16s linear;
}
.contents__item:first-child .contents__link { border-left: 1px solid var(--rule); }
.contents__link em {
  font-style: normal; font-size: 10px; color: var(--ink-4);
  letter-spacing: .06em;
}
.contents__link:hover { color: var(--accent); background: var(--paper-2); }
.contents__link.is-current { color: var(--accent); background: var(--paper-3); }
.contents__link.is-current::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--accent-rule);
}
.contents__tools { display: flex; align-items: center; gap: var(--sp-4); padding-left: var(--sp-5); }

.searchbox { position: relative; }
.searchbox input {
  width: 210px; padding: var(--sp-3) var(--sp-8) var(--sp-3) var(--sp-7);
  background: transparent;
  border: 1px solid var(--rule); border-radius: 0;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink);
  transition: width .2s linear, border-color .16s linear;
}
.searchbox input::placeholder { color: var(--ink-4); text-transform: uppercase; letter-spacing: .08em; }
.searchbox input:focus { width: 270px; border-color: var(--accent); outline: none; }
.searchbox__icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-4); pointer-events: none; }
.searchbox__btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: grid; place-items: center;
  color: var(--ink-4);
}
.searchbox__btn:hover { color: var(--accent); }

.contents__toggle {
  display: none; width: 40px; height: 38px; border: 1px solid var(--rule);
  align-items: center; justify-content: center; color: var(--ink);
}

/* Flat contents panel — a contents page, not a shadowed drop-down */
.contents__panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 80;
  background: var(--paper-3);
  border-bottom: 1px solid var(--rule);
  padding: var(--sp-7) 0 var(--sp-8);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s linear, transform .16s linear, visibility .16s;
}
.contents__item:hover .contents__panel,
.contents__item.is-open .contents__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.contents__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--sp-9); }
.contents__group { padding-top: var(--sp-4); border-top: 1px solid var(--rule); }
.contents__group:first-child { padding-top: 0; border-top: 0; }
.contents__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--sp-4);
}
.contents__linklist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-6); }
.contents__entry {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule-2);
  font-size: 14.5px; color: var(--ink-2);
}
.contents__entry:hover { color: var(--accent); }
.contents__entry span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }

/* --------------------------------------------------------------------------
   8. Title page — the editorial hero
   -------------------------------------------------------------------------- */
.titlepage { border-bottom: 1px solid var(--rule); }
.titlepage__grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: var(--sp-10); align-items: center;
  padding-block: var(--sp-11) var(--sp-10);
}
.titlepage__text { max-width: 640px; }
.titlepage__title { margin-top: var(--sp-6); }
.titlepage__lede { margin-top: var(--sp-6); }
.titlepage__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }

/* Facts strip — a ruled table, not floating cards */
.facts {
  margin-top: var(--sp-9); display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.facts__cell { padding: var(--sp-5) var(--sp-5) var(--sp-5) 0; border-right: 1px solid var(--rule); }
.facts__cell:last-child { border-right: 0; }
.facts__num {
  font-family: var(--font-display); font-size: 38px; line-height: 1;
  color: var(--ink); letter-spacing: -.01em;
}
.facts__num em { font-style: normal; color: var(--accent); }
.facts__label {
  margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4);
}

.titlepage__plate { position: relative; }
.titlepage__plate img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.titlepage__strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-5); }
.titlepage__strip img { aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(.55); transition: filter .2s linear; }
.titlepage__strip a:hover img { filter: none; }
.titlepage__strip figcaption { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--ink-4); margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   9. Inner-page banner
   -------------------------------------------------------------------------- */
.pagehead {
  border-bottom: 1px solid var(--rule);
  padding: var(--sp-8) 0 var(--sp-9);
  background: var(--paper-2);
}
.pagehead__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap; }
.pagehead__title { margin-top: var(--sp-5); }
.pagehead__sub { margin-top: var(--sp-4); }
.pagehead--ink { background: var(--ink); color: var(--paper); border-bottom: 0; }
.pagehead--ink .pagehead__sub { color: #A8AFB3; }
.pagehead--ink .folio { color: #7E868A; }

/* Breadcrumb */
.crumb { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.crumb a { color: var(--ink-4); }
.crumb a:hover { color: var(--accent); }
.crumb span[aria-current] { color: var(--ink); }
.crumb .sep { color: var(--rule); }

/* --------------------------------------------------------------------------
   10. Catalogue — ruled product rows
   -------------------------------------------------------------------------- */
.cat { border-top: 1px solid var(--ink); }
.cat__head {
  display: grid; align-items: center; gap: var(--sp-5);
  grid-template-columns: 48px 1fr 190px 130px 40px;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4);
}
.cat__row {
  display: grid; align-items: center; gap: var(--sp-5);
  grid-template-columns: 48px 1fr 190px 130px 40px;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--rule);
  transition: background .16s linear;
}
.cat__row:hover { background: var(--paper-3); }
.cat__no { font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); }
.cat__body { display: flex; align-items: center; gap: var(--sp-5); min-width: 0; }
.cat__plate {
  width: 78px; height: 78px; flex: none;
  border: 1px solid var(--rule-2); background: var(--paper-3);
  display: grid; place-items: center; overflow: hidden;
}
.cat__plate img { width: 88%; height: 88%; object-fit: contain; }
.cat__text { min-width: 0; }
.cat__meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-2); }
.cat__title { font-size: 16px; line-height: 1.42; font-weight: 500; }
.cat__title a { color: var(--ink); }
.cat__title a:hover { color: var(--accent); }
.cat__oe { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); word-break: break-word; }
.cat__spec { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-3); }
.cat__spec b { display: block; color: var(--ink); font-weight: 500; }
.cat__go {
  width: 34px; height: 34px; border: 1px solid var(--rule);
  display: grid; place-items: center; color: var(--ink-4);
  transition: all .16s linear;
}
.cat__row:hover .cat__go { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Filter rail — a specification index, ruled */
.filter {
  border: 1px solid var(--rule); background: var(--paper-3);
}
.filter__head {
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.filter__body { padding: var(--sp-1) var(--sp-5) var(--sp-4); }
.filter__group { border-bottom: 1px solid var(--rule-2); }
.filter__group:last-child { border-bottom: 0; }
.filter__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) 0; text-align: left;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.filter__btn:hover { color: var(--accent); }
.filter__btn::after { content: '+'; color: var(--accent); font-size: 15px; }
.filter__group.is-open .filter__btn::after { content: '−'; }
.filter__panel { display: none; padding-bottom: var(--sp-3); }
.filter__group.is-open .filter__panel { display: block; }
.filter__opt { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) 0; font-size: 14px; color: var(--ink-3); cursor: pointer; }
.filter__opt input { accent-color: var(--accent); width: 14px; height: 14px; }
.filter__opt span:last-child { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }

/* Toolbar */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4); border-bottom: 1px solid var(--rule);
}
.toolbar__count { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.toolbar__count b { color: var(--ink); font-weight: 500; }
.viewtoggle { display: flex; border: 1px solid var(--rule); }
.viewtoggle button {
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4); display: flex; align-items: center; gap: var(--sp-2);
}
.viewtoggle button + button { border-left: 1px solid var(--rule); }
.viewtoggle button.is-active { background: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   11. Product detail — the datasheet
   -------------------------------------------------------------------------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-10); align-items: start; }

/* Plate stage */
.stage { position: relative; border: 1px solid var(--rule); background: var(--paper-3); }
.stage__img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: 6%; }
.stage__badge {
  position: absolute; top: 0; left: 0;
  padding: var(--sp-2) var(--sp-3); background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
}
.stage__spec {
  position: absolute; right: 0; bottom: 0;
  padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
  background: var(--paper-3);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4);
}
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-3); }
.thumb {
  aspect-ratio: 1/1; border: 1px solid var(--rule); background: var(--paper-3);
  display: grid; place-items: center; padding: var(--sp-2);
  transition: border-color .16s linear;
}
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.pdp__chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pdp__title { margin-top: var(--sp-6); }
.pdp__oe {
  margin-top: var(--sp-6); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
  padding: var(--sp-4) 0;
}
.pdp__oe dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.pdp__oe dd { margin: var(--sp-2) 0 0; font-family: var(--font-mono); font-size: 14px; color: var(--ink); word-break: break-word; }
.pdp__oe dd + dt { margin-top: var(--sp-4); }
.pdp__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-7); }
.pdp__note { margin-top: var(--sp-7); padding: var(--sp-6) var(--sp-6); border: 1px solid var(--rule); background: var(--paper-3); }
.pdp__note h3 { font-family: var(--font-display); font-size: 22px; margin-bottom: var(--sp-4); }
.pdp__note li { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule-2); font-size: 14.5px; color: var(--ink-3); }
.pdp__note li:last-child { border-bottom: 0; }
.pdp__note li b { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--accent); flex: none; }

/* Spec table — ruled rows */
.spec { border-top: 1px solid var(--ink); }
.spec__row {
  display: grid; grid-template-columns: 230px 1fr; gap: var(--sp-6);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--rule);
}
.spec__key { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.spec__val { font-size: 15.5px; font-weight: 500; }

/* Cold / hot split */
.split2 { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); }
.split2__half { padding: var(--sp-7) var(--sp-7); }
.split2__half + .split2__half { border-left: 1px solid var(--rule); }
.split2__half--cold { background: var(--accent-soft); }
.split2__half--hot { background: var(--copper-soft); }
.split2__tag {
  display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.split2__half--hot .split2__tag { color: var(--copper); }
.split2__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid rgba(0,0,0,.09); }
.split2__row:last-child { border-bottom: 0; }
.split2__key { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.split2__val { font-size: 15px; font-weight: 500; text-align: right; }

/* Cutaway diagram */
.cutaway { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: var(--sp-10); align-items: center; }
.cutaway__fig { border: 1px solid var(--rule); background: var(--paper-3); padding: var(--sp-6); }
.cutaway__fig svg { width: 100%; height: auto; }
.cutaway__item { display: grid; grid-template-columns: 34px 1fr; gap: var(--sp-5); padding: var(--sp-4) 0; border-bottom: 1px solid var(--rule); }
.cutaway__item:last-child { border-bottom: 0; }
.cutaway__key {
  width: 28px; height: 28px; border: 1px solid var(--accent); color: var(--accent);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px;
}
.cutaway__name { font-weight: 600; font-size: 15.5px; }
.cutaway__desc { margin-top: var(--sp-1); font-size: 14px; color: var(--ink-3); }

/* Fitment table */
.tablewrap { overflow-x: auto; border-top: 1px solid var(--ink); }
.tablewrap table { min-width: 620px; }
.tablewrap th {
  text-align: left; padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-4); border-bottom: 1px solid var(--rule);
}
.tablewrap td { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.tablewrap tbody tr:hover { background: var(--paper-3); }

/* --------------------------------------------------------------------------
   12. Editorial body
   -------------------------------------------------------------------------- */
.prose { font-size: 17px; line-height: 1.78; color: var(--ink-2); }
.prose h2 {
  font-family: var(--font-display); font-size: 32px; margin: var(--sp-9) 0 var(--sp-5);
  padding-top: var(--sp-6); border-top: 1px solid var(--rule);
}
.prose h3 { font-family: var(--font-display); font-size: 24px; margin: var(--sp-7) 0 var(--sp-4); }
.prose p { margin-bottom: var(--sp-5); }
.prose ul, .prose ol { margin: 0 0 var(--sp-6); padding-left: var(--sp-6); list-style: none; }
.prose li { margin-bottom: var(--sp-3); padding-left: var(--sp-5); position: relative; }
.prose li::before { content: '—'; position: absolute; left: 0; color: var(--accent); }
.prose strong { color: var(--ink); }
.prose blockquote {
  margin: var(--sp-7) 0; padding: var(--sp-6) 0 var(--sp-6) var(--sp-7);
  border-left: 3px solid var(--accent);
  font-family: var(--font-display); font-size: 26px; line-height: 1.35; color: var(--ink);
}
.prose img { margin: var(--sp-3) 0 var(--sp-6); border: 1px solid var(--rule); }
.dropcap::first-letter {
  float: left; font-family: var(--font-display); font-size: 68px; line-height: .8;
  color: var(--accent); margin: var(--sp-2) var(--sp-4) 0 0;
}

/* --------------------------------------------------------------------------
   13. Process — numbered, ruled, no circles
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.steps--5 { grid-template-columns: repeat(5, 1fr); }
.steps__step { padding: var(--sp-6) var(--sp-6) var(--sp-6) 0; border-right: 1px solid var(--rule); position: relative; }
.steps__step:last-child { border-right: 0; }
.on-ink .steps { border-top-color: var(--rule-dark); }
.on-ink .steps__step { border-right-color: var(--rule-dark); }
.steps__no {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  color: var(--accent); margin-bottom: var(--sp-4);
}
.on-ink .steps__no { color: var(--copper); }
.steps__title { font-family: var(--font-display); font-size: 24px; margin-bottom: var(--sp-3); }
.steps__text { font-size: 14.5px; color: var(--ink-3); line-height: 1.65; }
.on-ink .steps__text { color: #97A0A5; }

/* --------------------------------------------------------------------------
   14. Plate grid — magazine layout
   -------------------------------------------------------------------------- */
.plates { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-7); }
.plates__item { grid-column: span 4; min-width: 0; }
.plates__item--lead { grid-column: span 7; }
.plates__item--side { grid-column: span 5; }
.plates__stack { grid-column: span 5; display: grid; gap: var(--sp-7); min-width: 0; }
.plates__stack > .plates__item { grid-column: auto; }
.plates__item img { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.plates__item--lead img { aspect-ratio: 16 / 10; }
/* The side plate fills the height the lead sets, so the row closes on one
   line. Below 1024px it is alone in its row and keeps its own ratio. */
.plates__item--side { display: flex; flex-direction: column; }
.plates__item--side img {
  flex: 1 1 auto; min-height: 0; object-fit: cover;
}
.plates__caption { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--rule); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.plates__caption b { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-2); font-weight: 500; }
.on-ink .plates__caption { color: #A8AFB3; border-top-color: var(--rule-dark); }
.on-ink .plates__caption b { color: var(--copper); }

/* --------------------------------------------------------------------------
   15. Brand index — a printed table of vehicle brands
   -------------------------------------------------------------------------- */
.brandindex { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.brandindex__cell {
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-family: var(--font-display); font-size: 22px; color: var(--ink-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  transition: color .16s linear, padding .16s linear;
}
.brandindex__cell:hover { color: var(--accent); padding-left: var(--sp-2); }
.brandindex__cell span { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); }

/* --------------------------------------------------------------------------
   16. News — editorial
   -------------------------------------------------------------------------- */
.lead {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border: 1px solid var(--rule); background: var(--paper-3);
}
.lead__media { position: relative; }
.lead__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lead__badge {
  position: absolute; top: 0; left: 0; z-index: 2;
  padding: var(--sp-2) var(--sp-3); background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
}
.lead__body { padding: var(--sp-8) var(--sp-8); display: flex; flex-direction: column; justify-content: center; }
.lead__title { font-family: var(--font-display); font-size: 34px; line-height: 1.1; margin-top: var(--sp-4); }
.lead__title a { color: var(--ink); }
.lead__title a:hover { color: var(--accent); }
.lead__excerpt { margin-top: var(--sp-4); color: var(--ink-3); font-size: 16px; line-height: 1.7; }
.lead__foot { margin-top: var(--sp-6); display: flex; align-items: center; gap: var(--sp-5); }

.rows { border-top: 1px solid var(--ink); }
.row {
  display: grid; grid-template-columns: 120px minmax(0,1fr) 150px 30px;
  gap: var(--sp-7); align-items: center;
  padding: var(--sp-6) 0; border-bottom: 1px solid var(--rule);
  transition: padding .16s linear, background .16s linear;
}
.row:hover { padding-inline: var(--sp-4); background: var(--paper-3); }
.row__date { font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); }
.row__title { font-size: 17.5px; font-weight: 500; line-height: 1.45; }
.row__title a { color: var(--ink); }
.row__title a:hover { color: var(--accent); }
.row__cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.row__go { color: var(--ink-4); justify-self: end; }
.row:hover .row__go { color: var(--accent); }

/* --------------------------------------------------------------------------
   17. Contact console
   -------------------------------------------------------------------------- */
.console { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.console__cell { padding: var(--sp-7) var(--sp-6) var(--sp-7) 0; border-right: 1px solid var(--rule); }
.console__cell:last-child { border-right: 0; }
.console__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--sp-3); display: block; }
.console__value { font-size: 17px; font-weight: 500; line-height: 1.45; word-break: break-word; }
.console__value a { color: var(--ink); }
.console__value a:hover { color: var(--accent); }
.console__note { margin-top: var(--sp-2); font-size: 13.5px; color: var(--ink-4); }

.sla { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.sla__cell { padding: var(--sp-6) var(--sp-6) var(--sp-6) 0; border-right: 1px solid var(--rule); }
.sla__cell:last-child { border-right: 0; }
.sla__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.sla__v { margin-top: var(--sp-3); font-family: var(--font-display); font-size: 28px; }

/* --------------------------------------------------------------------------
   18. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-6); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.field { display: grid; gap: var(--sp-2); }
.field--full { grid-column: 1 / -1; }
.field__label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4);
}
.field__req { color: var(--copper); }
.field input, .field select, .field textarea {
  width: 100%; padding: var(--sp-3) var(--sp-4);
  background: var(--paper-3); border: 1px solid var(--rule); border-radius: 0;
  font-size: 15px; color: var(--ink);
  transition: border-color .16s linear, box-shadow .16s linear;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
}
.field textarea { min-height: 150px; resize: vertical; }
.field__hint { font-size: 12.5px; color: var(--ink-4); }
.field__err { font-size: 12.5px; color: #A8321E; display: none; }
.field.has-error input, .field.has-error textarea { border-color: #A8321E; }
.field.has-error .field__err { display: block; }
.field__wrap { position: relative; }
.field__prefix {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); pointer-events: none;
}
.field__wrap input { padding-left: var(--sp-9); }
.captcha { display: flex; align-items: center; gap: var(--sp-3); }
.captcha img { border: 1px solid var(--rule); height: 44px; width: auto; cursor: pointer; }

/* Request brief panel */
.brief { border: 1px solid var(--rule); background: var(--paper-3); }
.brief__head { padding: var(--sp-6) var(--sp-7); border-bottom: 1px solid var(--rule); }
.brief__title { font-family: var(--font-display); font-size: 28px; }
.brief__sub { margin-top: var(--sp-2); color: var(--ink-4); font-size: 14.5px; }
.brief__body { padding: var(--sp-7); }

/* --------------------------------------------------------------------------
   19. Sidebar widgets — ruled index cards
   -------------------------------------------------------------------------- */
.widget { border: 1px solid var(--rule); background: var(--paper-3); }
/* widgets are spaced by their container's gap, never by a sibling margin */
.widgetgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--sp-6); align-items: start;
}
.widget__head {
  padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
}
.widget__head h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
.widget__body { padding: var(--sp-5); }

.acc { border-bottom: 1px solid var(--rule-2); }
.acc:last-child { border-bottom: 0; }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0; text-align: left;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.acc__btn:hover { color: var(--accent); }
.acc__btn::after { content: '+'; color: var(--accent); font-size: 15px; }
.acc.is-open .acc__btn::after { content: '−'; }
.acc__panel { display: none; padding-bottom: var(--sp-3); }
.acc.is-open .acc__panel { display: block; }
.acc__link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; font-size: 14px; color: var(--ink-3); }
.acc__link:hover, .acc__link.is-current { color: var(--accent); }
.acc__link span:last-child { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }

/* Tag / catalogue index */
.tagcloud { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.tagcloud a {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--rule); background: var(--paper-3);
  font-size: 14px; color: var(--ink-2);
  transition: border-color .16s linear, color .16s linear;
}
.tagcloud a:hover { border-color: var(--accent); color: var(--accent); }
.tagcloud a span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }

.letters { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: var(--sp-8); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.letters a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-4);
}
.letters a:hover, .letters a.is-current { background: var(--ink); color: var(--paper); }

.catindex { border-top: 1px solid var(--ink); }
.catindex__letter {
  padding: var(--sp-7) 0 0; font-family: var(--font-display); font-size: 48px; color: var(--rule);
  border-bottom: 1px solid var(--rule);
}
.catindex__list { columns: 3; column-gap: var(--sp-9); padding: var(--sp-5) 0 var(--sp-7); }
.catindex__item { break-inside: avoid; padding: var(--sp-2) 0; font-size: 15px; border-bottom: 1px solid var(--rule-2); }
.catindex__item a { color: var(--ink); }
.catindex__item a:hover { color: var(--accent); }
.catindex__item span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); margin-left: var(--sp-2); }

/* --------------------------------------------------------------------------
   20. CTA & footer
   -------------------------------------------------------------------------- */
.cta { background: var(--ink); color: var(--paper); padding: var(--sp-12) 0; }
.cta__inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--sp-10); align-items: center; }
.cta__title { margin-top: var(--sp-6); }
.cta__text { margin-top: var(--sp-5); color: #A8AFB3; max-width: 56ch; }
.cta__actions { display: flex; flex-direction: column; gap: var(--sp-3); align-items: stretch; }

.footer { background: var(--ink); color: #9AA2A6; padding: var(--sp-10) 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: var(--sp-9); padding-bottom: var(--sp-9); }
.footer__brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.footer__brand img { height: 38px; width: auto; }
.footer__brand span { font-family: var(--font-display); font-size: 22px; color: var(--paper); }
.footer__about { font-size: 14px; line-height: 1.75; max-width: 42ch; }
.footer__h {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--copper); margin-bottom: var(--sp-4); font-weight: 500;
}
.footer__list li { padding: var(--sp-1) 0; font-size: 14.5px; }
.footer__list a { color: #9AA2A6; }
.footer__list a:hover { color: var(--paper); }
.footer__bar {
  border-top: 1px solid var(--rule-dark); padding: var(--sp-5) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6E7679;
}
.footer__links { display: flex; gap: var(--sp-5); flex-wrap: wrap; }

/* Edge dock — a ruled tab, not a stack of circles */
.dock { position: fixed; right: 0; bottom: 84px; z-index: 90; display: flex; flex-direction: column; }
.dock__btn {
  display: grid; place-items: center;
  padding: var(--sp-3) var(--sp-3);
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--rule-dark); border-right: 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  writing-mode: vertical-rl;
  transition: background .16s linear, color .16s linear;
}
.dock__btn:hover { background: var(--accent); color: #fff; }
.dock__btn--top { opacity: 0; visibility: hidden; }
.dock__btn--top.is-visible { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   21. Misc
   -------------------------------------------------------------------------- */
.pagination { display: flex; gap: 0; margin-top: var(--sp-9); border-top: 1px solid var(--rule); }
.pagination a, .pagination span {
  min-width: 44px; height: 44px; padding-inline: var(--sp-4);
  display: grid; place-items: center;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-4);
}
.pagination a:hover { background: var(--ink); color: var(--paper); }
.pagination .is-current { background: var(--ink); color: var(--paper); }
.pagination .gap { border-right: 0; background: none; }

.toast {
  position: fixed; left: 0; bottom: 0; transform: translateY(20px);
  background: var(--ink); color: var(--paper); padding: var(--sp-4) var(--sp-6);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  z-index: 200; opacity: 0; visibility: hidden;
  transition: opacity .2s linear, transform .2s linear;
  border-left: 3px solid var(--copper);
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

.reveal { opacity: 1; }
.js .reveal.is-armed { opacity: 0; transform: translateY(16px); }
.js .reveal.is-armed.is-in { opacity: 1; transform: none; transition: opacity .55s linear, transform .55s linear; }

.gauge { display: grid; place-items: center; }
.gauge svg { width: 230px; height: 230px; }

/* 404 hero */
.err__grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sp-10); align-items: center; }
@media (max-width: 760px) { .err__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-9); } }

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .split { grid-template-columns: minmax(0, 1fr) 290px; gap: var(--sp-9); }
  .split--left { grid-template-columns: 290px minmax(0, 1fr); }
  .pdp { gap: var(--sp-9); }
  .console { grid-template-columns: repeat(2, 1fr); }
  .titlepage__grid { gap: var(--sp-9); }
  .brandindex { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .util__place, .util__sep--place { display: none; }
  .contents__tools { padding-left: 0; }
  .contents__inner { flex-wrap: wrap; }
  .contents__list { display: none; width: 100%; flex-direction: column; }
  .contents__list.is-open { display: flex; }
  .contents__link { border-left: 0 !important; border-bottom: 1px solid var(--rule); width: 100%; }
  .contents__panel { position: static; display: none; padding: var(--sp-5) 0 var(--sp-6); }
  .contents__item.is-open .contents__panel { display: block; }
  .contents__cols { grid-template-columns: 1fr; gap: var(--sp-6); }
  .contents__linklist { grid-template-columns: 1fr; }
  .contents__toggle { display: flex; }
  .searchbox { display: none; }
  .split, .split--left { grid-template-columns: minmax(0, 1fr); }
  .split__side { position: static; }
  .pdp { grid-template-columns: minmax(0, 1fr); }
  .cutaway { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .lead { grid-template-columns: minmax(0, 1fr); }
  .lead__media { min-height: 240px; }
  .titlepage__grid { grid-template-columns: minmax(0, 1fr); padding-block: var(--sp-10); }
  .cat__head { display: none; }
  .cat__row { grid-template-columns: 40px 1fr 34px; }
  .cat__spec, .cat__row .cat__meta { display: none; }
  .plates__item, .plates__item--lead, .plates__item--side, .plates__stack { grid-column: span 1; }
  .plates { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps__step:nth-child(2n) { border-right: 0; }
  .steps--5 { grid-template-columns: repeat(2, 1fr); }
  .catindex__list { columns: 2; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }
  .section { padding: var(--sp-10) 0; }
  .section--tight { padding: var(--sp-8) 0; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts__cell:nth-child(2n) { border-right: 0; }
  .facts__cell:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .facts__num { font-size: 30px; }
  .brandindex { grid-template-columns: repeat(2, 1fr); }
  .console { grid-template-columns: 1fr; }
  .console__cell { border-right: 0; border-bottom: 1px solid var(--rule); }
  .sla { grid-template-columns: 1fr; }
  .sla__cell { border-right: 0; border-bottom: 1px solid var(--rule); }
  .form__grid { grid-template-columns: 1fr; }
  .split2 { grid-template-columns: 1fr; }
  .split2__half + .split2__half { border-left: 0; border-top: 1px solid var(--rule); }
  .row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .row__go { display: none; }
  .cta__inner { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .catindex__list { columns: 1; }
  .spec__row { grid-template-columns: 1fr; gap: var(--sp-1); }
  .lead__body { padding: var(--sp-6) var(--sp-6); }
  .brief__body, .brief__head { padding: var(--sp-6); }
  .brand__sub { display: none; }
  .titlepage__strip { grid-template-columns: repeat(2, 1fr); }
  .steps, .steps--5 { grid-template-columns: 1fr; }
  .steps__step { border-right: 0; border-bottom: 1px solid var(--rule); }
  .dock { display: none; }
}

@media (max-width: 900px) {
  .masthead__contact { display: none; }
  .util__tel { display: inline; }
  .util__sep--tel { display: inline; }
}
@media (max-width: 700px) {
  .util__inner { justify-content: center; }
  .util__links:first-child { display: none; }
  .util__links { gap: var(--sp-3); }
}

/* ---------------------------------------------------------------------------
   Long legacy OE strings are unbroken tokens ("88310-0T020,883100T020,…");
   without an explicit break opportunity they force the catalogue row track
   wider than the viewport on narrow screens. Keep the design but let the
   title wrap anywhere inside its own column.
   --------------------------------------------------------------------------- */
.cat__title,
.cat__title a,
.cat__oe {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cat__row > * { min-width: 0; }


/* --------------------------------------------------------------------------
   fivercompressor preview additions — appended by cms/scripts/build-site.py.
   The UI-kit source in ui-template/ is never modified.
   -------------------------------------------------------------------------- */
.pdp__title, .pdp__pn, .pdp__oe dd { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.prose { overflow-wrap: anywhere; }
.prose p, .prose li, .prose td, .prose th { overflow-wrap: anywhere; word-break: break-word; }
.prose img { max-width: 100%; height: auto; }
.prose .tablewrap { margin: var(--sp-6) 0 var(--sp-8); border-top: 0; }
.prose .tablewrap table { min-width: 560px; }
.prose table { border-collapse: collapse; width: 100%; }

/* ---------------------------------------------------------------------------
   Product page narrow-viewport safety (2026-11-14 follow-up):
   the thumbnail strip is a 4-column grid whose 1fr tracks default to
   min-content (an image's intrinsic width), which pushed the page wider than
   the viewport on 375px; the description paragraph carries long unbroken OE
   strings. Contain both without changing the desktop look.
   --------------------------------------------------------------------------- */
.thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 100%; }
.thumb { min-width: 0; }
.pdp__desc { overflow-wrap: anywhere; word-break: break-word; }
.pdp .tablewrap, .prose .tablewrap { max-width: 100%; }

/* Data-sheet rows: 230px key column + 1fr value column whose min-content was
   the longest unbroken OE/application token. Constrain the value track and let
   text break on narrow screens; the desktop two-column look is preserved. */
.spec__row { grid-template-columns: 230px minmax(0, 1fr); }
.spec__key, .spec__val,
.split2__row, .split2__key, .split2__val { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 700px) {
  .spec__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .spec__key { margin-bottom: var(--sp-1); }
}

/* ---------------------------------------------------------------------------
   Newsroom (2026-11-14): original articles shipped with the migration.
   Reuses the kit's editorial row list (.rows/.row) and .prose body styles.
   --------------------------------------------------------------------------- */
.news-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.news-tabs .btn.is-current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.news-tabs__count { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); }
.news-tabs .is-current .news-tabs__count { color: var(--paper-3); }
.article__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
  padding-bottom: var(--sp-4); border-bottom: 1px solid var(--rule); margin-bottom: var(--sp-7);
}
.article__note { margin-top: var(--sp-7); color: var(--ink-4); font-size: 11px; letter-spacing: .06em; }
.article__foot { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.article__more { margin-top: var(--sp-10); padding-top: var(--sp-8); border-top: 1px solid var(--ink); }
.article__more-title { margin-bottom: var(--sp-6); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--ink); }
.prose ol { list-style: none; }
.prose ol li { padding-left: var(--sp-5); position: relative; }
.prose h2 + p, .prose h3 + p { margin-top: 0; }
@media (max-width: 760px) {
  .news-tabs { width: 100%; }
  .news-tabs .btn { padding: var(--sp-2) var(--sp-4); }
  .article__meta { gap: var(--sp-3); }
}

/* ---------------------------------------------------------------------------
   Hero rhythm (2026-11-14): target gap from the bottom edge of the primary
   navigation to the hero eyebrow (.folio): ~64px desktop, ~52px tablet,
   40px phones (<=640). The previous desktop value was inflated by
   `align-items: center` on a two-column grid; top-aligning the text column
   makes the gap deterministic and removes the small-screen blank space.
   Hero bottom whitespace is tightened proportionally.
   --------------------------------------------------------------------------- */
.titlepage__grid { align-items: start; padding-block: 64px 48px; }
@media (max-width: 1024px) {
  .titlepage__grid { padding-block: 52px 40px; }
}
@media (max-width: 640px) {
  .titlepage__grid { padding-block: 40px 32px; }
}

/* ---------------------------------------------------------------------------
   Catalogue rows, 1080px and phone widths (2026-11-14 UI audit):
   with the sidebar present at 1080px the 1fr title column shrank to ~92px and
   product titles stacked into tall thin "vertical bars". Collapse the fixed
   spec column one breakpoint earlier and give the phone row more room by
   dropping the 78px thumbnail plate and the row number on very small screens.
   --------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .cat__head { display: none; }
  .cat__row { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: var(--sp-4); }
  .cat__row .cat__spec { display: none; }
  .cat__row .cat__meta { display: none; }
}
@media (max-width: 760px) {
  .cat__row { grid-template-columns: 28px minmax(0, 1fr) 34px; gap: var(--sp-3); }
  .cat__plate { width: 56px; height: 56px; }
  .cat__body { gap: var(--sp-3); }
}
@media (max-width: 480px) {
  .cat__row { grid-template-columns: minmax(0, 1fr) 30px; }
  .cat__no { display: none; }
  .cat__plate { display: none; }
}

/* Contents bar at the 1025–1180px band: six primary items + search no longer
   fit on one line after the newsroom was added; tighten the links and the
   search box instead of letting labels wrap into a two-line nav. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .contents__link { padding: var(--sp-4) var(--sp-3); font-size: 11px; letter-spacing: .07em; white-space: nowrap; }
  .contents__link em { font-size: 9px; }
  .searchbox input { width: 160px; }
  .searchbox input:focus { width: 190px; }
}

/* ---------------------------------------------------------------------------
   UI-audit fixes (2026-11-14)
   --------------------------------------------------------------------------- */

/* 1) Catalogue rows: the row has 4 grid children while the head declares 5
   tracks, so the action tab was auto-placed in the 130px "Pulley" track
   (right edge 156px short of the row on desktop). Place spec across 3-4 and
   the tab explicitly in column 5. */
@media (min-width: 1181px) {
  .cat__row > .cat__spec { grid-column: 3 / span 2; }
  .cat__row > .cat__go { grid-column: 5; justify-self: end; }
}

/* 2) Plate photography: every plant photo in the UI kit is 1396x602 (2.32:1).
   Rendering them in 5/4, 4/3 or 16/10 cover boxes cropped 31-52% of each
   frame. The editorial plate areas now use the source panorama ratio with
   cover = zero crop; the Photo album page keeps its native 4:3 boxes. */
.titlepage__plate img { aspect-ratio: 1396 / 602; }
.titlepage__strip img { aspect-ratio: 1396 / 602; }
.plates--panorama .plates__item img,
.plates--panorama .plates__item--lead img,
.plates--panorama .plates__item--side img { aspect-ratio: 1396 / 602; }
.plates--panorama .plates__item--side { display: block; }
.plates--panorama .plates__item--side img { flex: none; }

/* 3) ≤1024px: the catalogue/contact rail was rendered before the page's own
   content, pushing results/forms ~1,400px below the pagehead. Content first,
   rail after (mobile reading order). */
@media (max-width: 1024px) {
  .split--left { align-items: start; }
  .split--left > .split__side { order: 2; }
  .split--left > :not(.split__side) { order: 1; }
}

/* 4) 404 hero followed an inline 96px padding; use the responsive section
   rhythm so it matches the rest of the site on phones. */
.section--tight.section--ink { padding-top: var(--sp-8); }
@media (max-width: 760px) { .section--tight.section--ink { padding-top: var(--sp-7); } }

/* News row is itself an <a>, so the title span inherited the link colour;
   keep the editorial ink title and only turn accent on hover. */
a.row { color: inherit; text-decoration: none; }
a.row .row__title { color: var(--ink); }
a.row:hover .row__title { color: var(--accent); }
a.row .row__date, a.row .row__cat { text-decoration: none; }