/* ==========================================================================
   WyllBell — design system v4 "precision"
   --------------------------------------------------------------------------
   Loaded last, after base.css and families.css.

   Why this file exists
   --------------------
   base.css was written against design tokens (--accent, --line, --surface,
   --muted …) that were only ever defined inside `.f1 … .f5` in families.css.
   No page carries an `.f1`-style body class, so 259 of those references
   resolved to nothing: buttons lost their fill, borders fell back to
   `currentColor` black, muted text turned black, and the whole site rendered
   like a wireframe. This file defines every token at :root, once, and then
   builds the visual layer on top of it.

   Design rules
   ------------
   1. One type family (Archivo). Mono only for numeric spec values.
   2. Near-monochrome. Brand orange appears at most twice per viewport.
   3. No decorative borders. Separation comes from space, then shadow.
   4. One radius scale: 8 / 14 / 22 / pill.
   5. Section rhythm is generous and identical on every page.
   6. Nothing that has to be explained is decoration.
   ========================================================================== */

:root {
  /* ---- ink ------------------------------------------------------------- */
  --ink:        #0B0D0F;
  --ink-2:      #41484F;
  --ink-3:      #79818A;
  --ink-4:      #A8AFB6;

  /* ---- paper ----------------------------------------------------------- */
  --paper:      #FFFFFF;
  --paper-1:    #FAFAFB;
  --paper-2:    #F1F3F5;
  --paper-3:    #E7EAED;

  /* ---- hairlines ------------------------------------------------------- */
  --hairline:   rgba(11, 13, 15, 0.09);
  --hairline-2: rgba(11, 13, 15, 0.16);

  /* ---- brand ----------------------------------------------------------- */
  --brand:      #FF5A00;
  --brand-2:    #E24E00;
  --brand-soft: rgba(255, 90, 0, 0.09);

  /* ---- legacy aliases --------------------------------------------------
     base.css and families.css still reference the old token names. Pointing
     them at the new scale fixes those rules instead of rewriting 1960 lines. */
  --bg:           var(--paper);
  --surface:      var(--paper);
  --surface-2:    var(--paper-2);
  --line:         var(--hairline);
  --line-strong:  var(--hairline-2);
  --text:         var(--ink);
  --muted:        var(--ink-3);
  --dim:          var(--ink-4);
  --panel:        var(--paper-2);
  --accent:       var(--brand);
  --accent-strong: var(--brand-2);
  --accent-text:  var(--brand-2);
  --wrap:         1280px;
  --hero-img:     none;
  --hero-pos:     center;

  /* ---- radius ---------------------------------------------------------- */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --pill: 999px;

  /* ---- elevation ------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(11, 13, 15, .04), 0 6px 20px -10px rgba(11, 13, 15, .10);
  --shadow-2: 0 1px 2px rgba(11, 13, 15, .05), 0 18px 40px -18px rgba(11, 13, 15, .16);
  --shadow-3: 0 2px 4px rgba(11, 13, 15, .05), 0 28px 64px -24px rgba(11, 13, 15, .22);

  /* ---- rhythm ---------------------------------------------------------- */
  --pad-section: clamp(64px, 7.2vw, 112px);
  --pad-section-tight: clamp(44px, 5vw, 72px);
  --gutter: clamp(20px, 3.2vw, 40px);
}

/* ---------------------------------------------------------------- base --- */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--brand); color: #fff; }

.wrap {
  max-width: var(--wrap);
  padding-inline: clamp(20px, 3.4vw, 40px);
}

/* One rule for the whole type scale. base.css sizes headings twice (a generic
   block and a later v3 block); this replaces both. */
h1, h2, h3, h4, h1.model-title, .hero--image h1 {
  font-weight: 700;
  letter-spacing: -0.028em;
}
h1, .hero--image h1, h1.model-title {
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.032em;
}
h2 {
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.024em;
}
h3 { font-size: 19px; line-height: 1.32; letter-spacing: -0.012em; }

p { color: var(--ink-2); }
.lead {
  font-size: clamp(15.5px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
}

/* uppercase technical label — the only place mono is allowed outside tables */
.kicker, .eyebrow, .mono {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kicker { display: block; margin-bottom: 18px; }
.hero--image .kicker { color: var(--brand); }

/* ------------------------------------------------------------- header --- */

.topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, .66);
  font-size: 13px;
  border: 0;
}
.topbar a { color: rgba(255, 255, 255, .66); }
.topbar a:hover { color: #fff; }
.topbar__left { color: rgba(255, 255, 255, .5); }
.topbar .wrap { min-height: 38px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 28px);
  min-height: 70px;
}

.wordmark {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.nav { gap: clamp(6px, 1.1vw, 22px); }
.nav > li > a,
.nav > a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 8px 2px;
  position: relative;
}
.nav > li > a:hover,
.nav > a:hover { color: var(--ink); }
.nav > li > a[aria-current='true'],
.nav > a[aria-current='true'] { color: var(--ink); }

.header-enquiry { margin-left: auto; }

/* product mega-menu */
.pmenu__panel {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  background: var(--paper);
  padding: 24px;
}
.pmenu__n {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-4);
}

/* language menu */
.langmenu > summary { color: var(--ink-3); font-size: 14px; }
.langmenu > summary:hover { color: var(--ink); }
.langmenu ul {
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
  padding: 8px;
  min-width: 180px;
}
.langmenu li a { border-radius: var(--r-sm); padding: 9px 12px; font-size: 14px; }
.langmenu li a:hover { background: var(--paper-2); color: var(--ink); }
.langmenu li a[aria-current='true'] { color: var(--brand-2); font-weight: 600; }

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: 15px 26px;
  border-radius: var(--pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  white-space: nowrap;
}

.btn--solid,
.btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(226, 78, 0, .28), 0 10px 24px -12px rgba(255, 90, 0, .55);
}
.btn--solid:hover,
.btn--primary:hover {
  background: var(--brand-2);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-2);
}
.btn--ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* on a dark hero the ghost button has to invert */
.hero--image .btn--ghost,
.hero .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .34);
}
.hero--image .btn--ghost:hover,
.hero .btn--ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.btn--sm { padding: 11px 20px; font-size: 14px; }

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

.hero--image {
  min-height: clamp(460px, 62vh, 720px);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: clamp(16px, 2vw, 28px);
  /* No background here. The hero photo and its scrim are painted at z-index
     -2 / -1; a background on this element would sit on top of both and turn
     the whole hero into a black slab. `isolation` keeps those negative layers
     inside this block so they still paint above the page. */
  isolation: isolate;
}
/* The old scrim was 94% opaque at the left edge, so the machine was invisible.
   A bottom-weighted gradient keeps the type legible and the photograph visible. */
.hero--image::before {
  background:
    linear-gradient(180deg, rgba(8, 10, 12, .18) 0%, rgba(8, 10, 12, 0) 22%),
    linear-gradient(0deg, rgba(8, 10, 12, .88) 0%, rgba(8, 10, 12, .62) 32%, rgba(8, 10, 12, .12) 58%, rgba(8, 10, 12, .10) 100%);
}
.hero__inner {
  max-width: var(--wrap);
  padding: 0 clamp(24px, 4vw, 64px) clamp(36px, 5vh, 64px);
}
.hero--image h1 {
  color: #fff;
  max-width: 17ch;
  margin: 12px 0 0;
  text-shadow: 0 1px 30px rgba(0, 0, 0, .28);
}
.hero--image .lead {
  color: rgba(255, 255, 255, .80);
  max-width: 48ch;
  margin-top: 18px;
}
.hero__actions { margin-top: 30px; gap: 10px; }

/* three figures under the hero copy — these used to render as bare inline text */
.statrow {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3.4vw, 56px);
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.statrow .stat {
  display: block;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.stat b {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

/* ------------------------------------------------------------ sections --- */

.section { padding: var(--pad-section) 0; }
.section--tight { padding: var(--pad-section-tight) 0; }
/* A hairline between every section is what made the page read as a form.
   Keep it only where two dense blocks would otherwise merge. */
.section + .section { border-top: 0; }
.section > h2 + .lead { margin-top: 14px; }

/* --------------------------------------------------------------- cards --- */

/* Range cards. The border was the only thing holding them together because
   --line was undefined; with a shadow they no longer need one. */
.dgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  margin-top: 40px;
}
.dcard {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 0;
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: box-shadow .22s ease, transform .22s ease;
}
.dcard:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.dcard__media,
.dcard img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: contain;
  background: var(--paper-2);
  padding: 18px;
  margin: 0;
}
.dcard__body { padding: 20px 22px 24px; }
.dcard__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dcard__count {
  margin-top: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-4);
}
.dcard h3, .dcard__name {
  margin-top: 12px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.dcard p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

/* Model cards */
.mgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
  margin-top: 40px;
}
.mcard {
  display: block;
  background: var(--paper);
  border: 0;
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  padding: 18px 18px 20px;
  transition: box-shadow .22s ease, transform .22s ease;
}
.mcard:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.mcard__code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-3);
}
.mcard__name {
  margin-top: 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.mcard__note { margin-top: 4px; font-size: 13.5px; color: var(--ink-3); }

/* Product cards (category pages) */
.pgrid, .mgrid--3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}
.pcard {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 0;
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: box-shadow .22s ease, transform .22s ease;
}
.pcard:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.pcard__media {
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pcard__media img { width: 100%; height: 100%; object-fit: contain; }
.pcard__body { padding: 18px 20px 22px; }
.pcard__type {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pcard__name {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.pcard__spec {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}
.pcard__foot {
  margin-top: auto;
  padding: 0 20px 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-2);
}

/* honest empty tile — still needs to look deliberate, not broken */
.photo-pending {
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--paper-1);
  border: 1px dashed var(--hairline-2);
  border-radius: 0;
  color: var(--ink-3);
  text-align: center;
  padding: 20px;
}
.photo-pending__code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink-2);
}
.photo-pending__note { font-size: 12px; line-height: 1.45; color: var(--ink-4); max-width: 26ch; }

/* --------------------------------------------------------------- pills --- */

.pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: var(--pill);
  background: var(--paper-2);
  border: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background-color .16s ease, color .16s ease;
}
.pill:hover { background: var(--ink); color: #fff; }

/* --------------------------------------------------------------- table --- */

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.spec-table th,
.spec-table td {
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  text-align: left;
}
.spec-table th {
  width: 46%;
  font-weight: 400;
  color: var(--ink-3);
  padding-right: 20px;
}
.spec-table td { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------- model page layout --- */

.mpane, .mpage { gap: clamp(28px, 3.4vw, 56px); }

.maside {
  position: sticky;
  top: 96px;
  background: var(--paper);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 26px;
}
.maside h3 { font-size: 17px; }
.maside .btn { width: 100%; }

/* --------------------------------------------------------------- proof --- */

blockquote, .quote {
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.022em;
  font-weight: 600;
  color: var(--ink);
}

/* ---------------------------------------------------------------- cta ---- */

.cta {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(40px, 5vw, 72px);
}
.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, .66); }

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

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .58);
  margin-top: clamp(56px, 6vw, 96px);
  padding: clamp(48px, 5vw, 80px) 0 clamp(28px, 3vw, 40px);
  font-size: 14px;
}
.site-footer a { color: rgba(255, 255, 255, .58); }
.site-footer a:hover { color: #fff; }
.site-footer h3,
.site-footer h4 {
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.site-footer .wordmark { color: #fff; }

/* --------------------------------------------------- whatsapp dock ---- */

.wa-dock__toggle {
  background: var(--brand);
  box-shadow: 0 6px 20px -6px rgba(255, 90, 0, .6);
}
.wa-dock__panel {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
}

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

@media (max-width: 1080px) {
  .mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dgrid, .pgrid, .mgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mpage, .mpane { grid-template-columns: minmax(0, 1fr); }
  .maside { position: static; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .dgrid, .pgrid, .mgrid, .mgrid--3 { grid-template-columns: minmax(0, 1fr); }
  .section { padding: 52px 0; }
  .hero--image { min-height: 66vh; border-radius: var(--r); }
  .hero--image::before {
    background:
      linear-gradient(180deg, rgba(8, 10, 12, .22) 0%, rgba(8, 10, 12, 0) 18%),
      linear-gradient(0deg, rgba(8, 10, 12, .94) 0%, rgba(8, 10, 12, .72) 46%, rgba(8, 10, 12, .18) 100%);
  }
  .hero--image h1 { max-width: none; }
  .hero .btn, .hero--image .btn { padding: 14px 22px; font-size: 14.5px; }
  .site-header .wrap { min-height: 62px; }
  .statrow { gap: 22px; }
}

/* ==========================================================================
   v4.1 — composition fixes
   --------------------------------------------------------------------------
   The first pass fixed the tokens and the palette. These rules deal with the
   parts that still read as unfinished: boxed stat strips, stacked full-width
   buttons, a CTA that is not a panel, and pill rows with no rhythm.
   ========================================================================== */

/* ---- stat strip ---------------------------------------------------------
   base.css styles .statrow as a bordered 1px-gap table with white cells. That
   is fine on a document but wrong under a hero headline, so reset it here and
   restate the two contexts properly. */
.statrow {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3.4vw, 56px);
  margin: 40px 0 0;
  padding: 24px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  overflow: visible;
}
.statrow .stat {
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.statrow .stat b {
  display: block;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.statrow .stat span {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* on the dark hero the strip has to invert */
.hero--image .statrow { border-top-color: rgba(255, 255, 255, .16); }
.hero--image .statrow .stat b { color: #fff; }
.hero--image .statrow .stat span { color: rgba(255, 255, 255, .55); }

/* ---- category hero ------------------------------------------------------
   Title, range photo and the figures sat in a 1.12fr/0.88fr split with the
   buttons stacked underneath, which pushed the image out of alignment. The
   photo now gets a tinted bed and the actions sit in one row. */
.model-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(28px, 3.4vw, 48px) 0 clamp(20px, 2.6vw, 36px);
}
.model-hero__body .kicker { margin-bottom: 16px; }
.model-hero__media {
  margin: 0;
  border-radius: var(--r-lg);
  background: var(--paper-2);
  padding: clamp(20px, 2.4vw, 36px);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.model-hero__media img {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.model-hero__media .photo-pending {
  border: 0;
  background: transparent;
  aspect-ratio: auto;
}

/* ---- contact row -------------------------------------------------------
   Three full-width buttons stacked read as a form. One filled primary plus two
   quiet secondary buttons, wrapping on narrow screens. */
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}
.contact-actions .btn { width: auto; flex: 0 1 auto; }
.contact-actions .btn--block { width: auto; }

/* ---- application pills ------------------------------------------------- */
.pillrow, .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

/* ---- CTA band ---------------------------------------------------------- */
.section--cta {
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(40px, 5vw, 76px);
  margin: clamp(32px, 4vw, 64px) 0 0;
  color: #fff;
}
.section--cta h2 {
  color: #fff;
  max-width: 20ch;
}
.section--cta .lead { color: rgba(255, 255, 255, .68); margin-top: 14px; }
.section--cta .contact-actions { margin-top: 32px; }
.section--cta .btn--ghost {
  color: rgba(255, 255, 255, .88);
  border-color: rgba(255, 255, 255, .28);
}
.section--cta .btn--ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

/* ---- small print ------------------------------------------------------- */
.note {
  margin-top: 28px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 68ch;
}

/* ---- breadcrumbs ------------------------------------------------------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: clamp(16px, 1.8vw, 24px) 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { color: var(--ink-4); }

/* ---- key figures block on a model page --------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 26px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  overflow: hidden;
}
.facts__cell { background: var(--paper); padding: 14px 16px; }
.facts__cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
.facts__v {
  display: block;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.facts__k {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 900px) {
  .model-hero { grid-template-columns: minmax(0, 1fr); }
  .model-hero__media { order: -1; }
  .statrow { gap: 28px; }
}

/* ---- photo gallery -----------------------------------------------------
   Five equal tiles read like a contact sheet. The first frame is the machine;
   it gets two columns and the rest sit beside it. */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 16px);
  margin-top: 28px;
}
.gallery__item {
  margin: 0;
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper-2);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.gallery__item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery__item:first-child img { aspect-ratio: auto; height: 100%; }
.gallery__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 22px 14px 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(0deg, rgba(8, 10, 12, .72), rgba(8, 10, 12, 0));
  pointer-events: none;
}
.media-note {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--paper-1);
  border-left: 2px solid var(--brand);
  font-size: 13.5px;
  color: var(--ink-2);
  max-width: 72ch;
}

@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__item:first-child { grid-column: span 2; grid-row: auto; }
  .gallery__item:first-child img { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   v4.2 — contrast and density
   --------------------------------------------------------------------------
   Screenshots at 1440 showed three problems that no token fix cures:

   1. The hero headline landed on the machine bodies. The scrim was weighted to
      the bottom, but the copy is bottom-aligned, so the two overlapped.
   2. .contact-actions was still a column — base.css sets flex-direction, and
      overriding display alone does not reset it.
   3. "Most specified" was six columns of grey text with no anchor.
   ========================================================================== */

/* ---- hero: give the copy its own quiet zone ---------------------------- */
.hero--image::before {
  background:
    linear-gradient(180deg, rgba(8, 10, 12, .10) 0%, rgba(8, 10, 12, 0) 16%),
    linear-gradient(90deg, rgba(8, 10, 12, .82) 0%, rgba(8, 10, 12, .62) 34%, rgba(8, 10, 12, .18) 62%, rgba(8, 10, 12, .06) 100%),
    linear-gradient(0deg, rgba(8, 10, 12, .72) 0%, rgba(8, 10, 12, .22) 30%, rgba(8, 10, 12, 0) 55%);
}
.hero__inner { padding-bottom: clamp(44px, 6vh, 76px); }
.hero--image h1 {
  text-shadow: 0 2px 40px rgba(0, 0, 0, .34);
  max-width: 15ch;
}

/* ---- contact actions: actually horizontal ------------------------------ */
.contact-actions {
  flex-direction: row;
  align-items: center;
}
.section--cta .contact-actions { margin-top: 34px; }

/* ---- "most specified": anchor the cards -------------------------------- */
.mgrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 16px);
}
.mcard {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px 22px 22px;
  background: var(--paper-1);
  box-shadow: none;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
}
.mcard:hover {
  background: var(--paper);
  border-color: transparent;
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.mcard__code {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--brand-2);
  text-transform: uppercase;
}
.mcard__name {
  margin-top: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.mcard__note {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ---- tighter section rhythm where the content is short ----------------- */
.section--tight { padding: clamp(36px, 4vw, 56px) 0; }

/* ---- spare-parts band: heading left, action right ---------------------- */
.section--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
  padding: var(--pad-section-tight) 0;
  border-top: 1px solid var(--hairline);
}
.section--split .lead { margin-top: 10px; }
.section--split > .btn { justify-self: end; }

@media (max-width: 760px) {
  .mgrid { grid-template-columns: minmax(0, 1fr); }
  .section--split { grid-template-columns: minmax(0, 1fr); }
  .section--split > .btn { justify-self: start; }
  .hero--image::before {
    background:
      linear-gradient(180deg, rgba(8, 10, 12, .18) 0%, rgba(8, 10, 12, 0) 14%),
      linear-gradient(0deg, rgba(8, 10, 12, .94) 0%, rgba(8, 10, 12, .74) 42%, rgba(8, 10, 12, .26) 78%, rgba(8, 10, 12, .1) 100%);
  }
}

/* A model with a single photograph gets one honest wide frame, not a
   half-empty grid with a double-width tile in it. */
.gallery:has(.gallery__item:only-child) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 900px;
}
.gallery:has(.gallery__item:only-child) .gallery__item:first-child {
  grid-column: auto;
  grid-row: auto;
}
.gallery:has(.gallery__item:only-child) .gallery__item:first-child img {
  aspect-ratio: 16 / 10;
}

/* ==========================================================================
   v4.3 — mobile header, section density, secondary blocks
   ========================================================================== */

/* Section padding was set for pages with three paragraphs per block. Model and
   category pages have short blocks, so 112px top and bottom left them floating
   in white. 88px keeps the rhythm and closes the gaps. */
.section { padding: clamp(56px, 6vw, 88px) 0; }
.section--tight { padding: clamp(32px, 3.6vw, 52px) 0; }

/* ---- mobile header -----------------------------------------------------
   At 390px the desktop nav row survived and clipped its last item mid-word,
   which is the first thing a buyer sees. The nav collapses to the burger and
   only the wordmark, the language switch and the quote button stay. */
@media (max-width: 980px) {
  .site-header .wrap {
    flex-wrap: nowrap;
    gap: 10px;
    min-height: 62px;
  }
  .nav,
  .site-header .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow-2);
    padding: 8px 16px 16px;
    z-index: 60;
  }
  /* The panel is positioned against .wrap, which itself carries the page
     gutter. Pinning left/right to the same negative value plus a width made it
     hang 20px off the left edge and left a strip on the right, clipping the
     first glyph of five labels. Stretch it instead of sizing it. */
  .nav.open,
  .site-header .nav.open {
    display: flex;
    left: 0;
    right: 0;
    width: auto;
    padding: 4px 20px 18px;
  }
  .nav > li > a,
  .nav > a {
    display: block;
    padding: 13px 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--hairline);
  }
  .langmenu { margin-left: auto; }
  .header-enquiry {
    margin-left: 0;
    padding: 11px 18px;
    font-size: 13.5px;
  }
  .menu-toggle { display: inline-flex; }
  .wordmark { font-size: 17px; }
}

@media (max-width: 430px) {
  .header-enquiry { display: none; }
}

/* ---- wear-parts and similar link lists --------------------------------- */
.linklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 24px;
  margin-top: 20px;
}
.linklist a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14.5px;
  color: var(--ink-2);
}
.linklist a:hover { color: var(--ink); }



/* A wide tile is not a fix for an odd card count: doubling the column blew a
   4:3 photograph up to a 2:1 billboard. The empty cell stays empty. */
.dgrid > .dcard:last-child { grid-column: auto; }

/* ---- hero scrim, final ------------------------------------------------
   The copy is bottom-left and the machines are centre-left, so a bottom-only
   gradient put the headline straight across the forklift body. This one is
   weighted to the left edge and falls away before the right third, which keeps
   the product visible and the type on near-solid ink. */
.hero--image::before {
  background:
    linear-gradient(90deg, rgba(8, 10, 12, .90) 0%, rgba(8, 10, 12, .80) 30%, rgba(8, 10, 12, .40) 56%, rgba(8, 10, 12, .08) 80%, rgba(8, 10, 12, .04) 100%),
    linear-gradient(0deg, rgba(8, 10, 12, .52) 0%, rgba(8, 10, 12, .10) 26%, rgba(8, 10, 12, 0) 48%);
}
.hero--image h1 { max-width: 13ch; }
@media (max-width: 760px) {
  .hero--image::before {
    background:
      linear-gradient(0deg, rgba(8, 10, 12, .95) 0%, rgba(8, 10, 12, .82) 40%, rgba(8, 10, 12, .38) 74%, rgba(8, 10, 12, .12) 100%);
  }
}

/* ---- model code must never wrap ---------------------------------------
   "CPC(D)35 · 3.5 t" in a 380px tile broke after the decimal point and left a
   stray "t" on its own line, which reads as corrupted data. The code line stays
   on one line; the capacity, if it does not fit, moves to its own row. */
.mcard__code {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcard__name {
  overflow-wrap: break-word;
  hyphens: none;
}
.mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1240px) {
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}