@charset "utf-8";
/* ==========================================================================
   GS AGRO — Design System
   Style: Swiss Modernism 2.0 — strict grid, mathematical spacing,
          high contrast, single accent (brand green), no decoration.
   Type:  Space Grotesk (display) / Inter (UI + body) / JetBrains Mono (data)
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */
:root {
  /* Brand — sampled from the GS Agro logo */
  --green:        #406B3A;
  --green-700:    #35592F;
  --green-800:    #2A4726;
  --green-100:    #E9F0E6;
  --green-050:    #F4F8F2;

  /* Neutral ink & paper */
  --ink:          #0D100E;
  --ink-800:      #1C211E;
  --ink-700:      #333A36;
  --ink-500:      #5C6560;
  --ink-400:      #7C857F;
  --paper:        #FFFFFF;
  --paper-2:      #F5F6F4;
  --paper-3:      #EAECE8;
  --line:         #DCDFD9;
  --line-strong:  #C3C7BF;

  --danger:       #B4231F;
  --focus:        #1F6FEB;

  /* Type */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Modular type scale (1.25) */
  --fs-xs:    0.75rem;    /* 12 */
  --fs-sm:    0.8125rem;  /* 13 */
  --fs-base:  1rem;       /* 16 */
  --fs-md:    1.125rem;   /* 18 */
  --fs-lg:    1.375rem;   /* 22 */
  --fs-xl:    1.75rem;    /* 28 */
  --fs-2xl:   2.25rem;    /* 36 */
  --fs-3xl:   3rem;       /* 48 */
  --fs-4xl:   4rem;       /* 64 */

  /* Space — 8px base, mathematical */
  --s-1:  0.25rem;  --s-2:  0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5:  1.5rem;   --s-6:  2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9:  6rem;     --s-10: 8rem;

  /* Grid */
  --container: 1320px;
  --gutter: 1.25rem;
  --grid-gap: 1.5rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  220ms;

  --z-nav: 100;
  --z-drawer: 200;
  --z-tray: 300;
  --z-lightbox: 400;
}

@media (min-width: 768px)  { :root { --gutter: 2rem; } }
@media (min-width: 1280px) { :root { --gutter: 2.5rem; } }

/* --- 2. RESET ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px;
  z-index: 999; background: var(--ink); color: #fff;
  padding: var(--s-3) var(--s-5); font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Spam honeypot. Must be display:none, not .sr-only: a clipped field is still
   rendered and can be filled by browser autofill, which would mark a genuine
   enquiry as spam. */
.hp { display: none; }

/* --- 3. TYPOGRAPHY ------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 6vw, var(--fs-4xl)); }
h2 { font-size: clamp(1.75rem, 4.2vw, var(--fs-2xl)); }
h3 { font-size: clamp(1.25rem, 2.4vw, var(--fs-lg)); letter-spacing: -0.012em; }
h4 { font-size: var(--fs-md); letter-spacing: -0.006em; line-height: 1.25; }

/* Size utilities so heading LEVELS can stay semantically correct while the
   visual scale matches the design. Class beats the bare element selector. */
.h-lg { font-size: clamp(1.75rem, 4.2vw, var(--fs-2xl)); letter-spacing: -0.022em; }
.h-md { font-size: var(--fs-md); letter-spacing: -0.006em; line-height: 1.25; }

p { text-wrap: pretty; }
.lede {
  font-size: clamp(var(--fs-md), 2.1vw, var(--fs-lg));
  line-height: 1.55;
  color: var(--ink-700);
  max-width: 62ch;
}
.body-copy { max-width: 68ch; color: var(--ink-700); }
.body-copy + .body-copy { margin-top: var(--s-4); }

/* Eyebrow / section label — the Swiss signature */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  display: flex; align-items: center; gap: var(--s-3);
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--green); flex: none;
}
.eyebrow--plain::before { display: none; }
/* Dark contexts: any of these wrappers flips the child styling below. */
:is(.on-dark, .section--dark, .hero) .eyebrow { color: #9DC194; }
:is(.on-dark, .section--dark, .hero) .eyebrow::before { background: #9DC194; }

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* --- 4. LAYOUT ---------------------------------------------------------- */
.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
}
.container--narrow { max-width: 900px; }

.section { padding-block: var(--s-8); }
@media (min-width: 768px) { .section { padding-block: var(--s-9); } }
.section--tight { padding-block: var(--s-7); }
.section--dark { background: var(--ink); color: #EDEFEC; }
.section--paper2 { background: var(--paper-2); }
.section--rule { border-top: 1px solid var(--line); }

.on-dark { color: #EDEFEC; }
:is(.on-dark, .section--dark, .hero) :is(h1, h2, h3, h4) { color: #fff; }
:is(.on-dark, .section--dark, .hero) :is(.lede, .body-copy) { color: #B9BFB9; }

.grid { display: grid; gap: var(--grid-gap); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.section-head {
  display: grid; gap: var(--s-4);
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.section--dark .section-head { border-color: #2C312E; }
@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: end; gap: var(--s-7);
  }
}
.section-head :is(h1, h2) { margin-top: var(--s-1); }

/* --- 5. BUTTONS --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1.5px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  text-align: center;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn--primary:hover { background: var(--green-800); border-color: var(--green-800); }
.btn--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--dark:hover { background: var(--green); border-color: var(--green); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
:is(.on-dark, .section--dark, .hero) .btn--ghost { border-color: #5A615A; color: #fff; }
:is(.on-dark, .section--dark, .hero) .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--sm { min-height: 40px; padding: 0 var(--s-4); font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--green); border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  transition: gap var(--dur) var(--ease);
}
.link-arrow:hover { gap: var(--s-3); }
:is(.on-dark, .section--dark, .hero) .link-arrow { color: #9DC194; }

/* --- 6. HEADER / NAV ---------------------------------------------------- */
.topbar {
  background: var(--ink); color: #B9BFB9;
  font-size: var(--fs-xs); letter-spacing: 0.02em;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 40px; flex-wrap: wrap;
}
.topbar a { color: #D6DAD5; }
.topbar a:hover { color: #fff; }
.topbar__group { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.topbar__item svg { width: 13px; height: 13px; opacity: 0.75; }
.topbar__badge {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #9DC194;
  border: 1px solid #3A4A36; padding: 3px var(--s-2);
}
@media (max-width: 767px) { .topbar__group--desk { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 76px;
}
.brand { display: flex; align-items: center; gap: var(--s-3); flex: none; min-height: 44px; }
.brand img { height: 42px; width: auto; }
.brand__text { display: none; }
@media (min-width: 480px) {
  .brand__text { display: block; line-height: 1.15; }
  .brand__name {
    display: block;
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base);
    letter-spacing: -0.01em; color: var(--ink); white-space: nowrap;
  }
  .brand__est {
    display: block;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-400); white-space: nowrap;
  }
}

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: var(--s-6); }
  .nav a {
    font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--ink-700);
    padding-block: var(--s-2); position: relative;
    transition: color var(--dur) var(--ease);
  }
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px; background: var(--green);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }
  .nav a:hover { color: var(--ink); }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
}
.header__actions { display: flex; align-items: center; gap: var(--s-3); }
.header__actions .btn { display: none; }
@media (min-width: 1024px) { .header__actions .btn { display: inline-flex; } }

.burger {
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 1.5px solid var(--line-strong);
}
.burger span {
  display: block; width: 20px; height: 1.5px; background: var(--ink);
  position: relative; transition: background var(--dur) var(--ease);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1.5px;
  background: var(--ink); transition: transform var(--dur) var(--ease);
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
[aria-expanded="true"].burger span { background: transparent; }
[aria-expanded="true"].burger span::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"].burger span::after  { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1024px) { .burger { display: none; } }

.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--paper); padding: var(--s-5) 0 var(--s-8);
  overflow-y: auto; visibility: hidden; opacity: 0;
  /* Never interpolate `visibility` — step it instead: instant on open, delayed
     until after the fade on close. Interpolating it leaves the panel stuck
     hidden whenever transitions are throttled (background tab, reduced motion). */
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.drawer[data-open="true"] {
  visibility: visible; opacity: 1;
  transition: opacity var(--dur) var(--ease), visibility 0s linear 0s;
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-6); }
.drawer__close { width: 48px; height: 48px; display: grid; place-items: center; border: 1.5px solid var(--line-strong); }
.drawer__close svg { width: 20px; height: 20px; }
.drawer nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700;
  letter-spacing: -0.015em;
}
.drawer nav a svg { width: 18px; height: 18px; color: var(--green); }
.drawer__cta { margin-top: var(--s-6); display: grid; gap: var(--s-3); }

/* --- 6b. NAV DROPDOWN (gear unit categories) ---------------------------- */
.nav__group { position: relative; display: none; align-items: center; gap: 2px; }
@media (min-width: 1024px) { .nav__group { display: inline-flex; } }
.nav__toggle {
  display: grid; place-items: center; width: 26px; height: 40px;
  color: var(--ink-500); transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav__toggle svg { width: 13px; height: 13px; }
.nav__group:hover .nav__toggle,
.nav__toggle[aria-expanded="true"] { color: var(--green); }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-panel {
  position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%);
  width: min(680px, calc(100vw - 2 * var(--gutter)));
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(13,16,14,0.14);
  padding: var(--s-5); z-index: calc(var(--z-nav) + 1);
}
.nav-panel[hidden] { display: none; }
/* panel links sit inside .nav, so cancel the nav-link underline sweep */
.nav-panel a::after { display: none; }
.nav-panel::before {                      /* keeps hover alive across the gap */
  content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px;
}
.nav-panel__head {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-500);
  padding-bottom: var(--s-3); margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.nav-panel__list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px var(--s-5);
}
@media (min-width: 700px) { .nav-panel__list { grid-template-columns: repeat(3, 1fr); } }
.nav-panel__list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 40px; padding: var(--s-2) var(--s-2);
  font-size: var(--fs-sm); text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-panel__list a:hover { background: var(--green-050); color: var(--green-800); }
.nav-panel__list em {
  font-family: var(--font-mono); font-style: normal; font-size: var(--fs-xs);
  color: var(--ink-400);
}
.nav-panel__list a:hover em { color: var(--green); }
.nav-panel__all {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--line); width: 100%;
  font-size: var(--fs-sm); font-weight: 600; color: var(--green);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.nav-panel__all svg { width: 14px; height: 14px; }
.nav-panel__all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- mobile drawer submenu --------------------------------------------- */
.drawer__group { position: relative; border-bottom: 1px solid var(--line); }
.drawer__group > a { border-bottom: 0; padding-right: 60px; }
.drawer__toggle {
  position: absolute; right: 0; top: 0; width: 56px; height: 62px;
  display: grid; place-items: center; color: var(--ink-500);
}
.drawer__toggle svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.drawer__toggle[aria-expanded="true"] { color: var(--green); }
.drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__sub { display: grid; padding: 0 0 var(--s-4) var(--s-4); }
.drawer__sub[hidden] { display: none; }
.drawer__sub a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 46px; padding: var(--s-2) 0;
  font-family: var(--font-body); font-size: var(--fs-base); font-weight: 500;
  letter-spacing: 0; border-bottom: 1px solid var(--line);
}
.drawer__sub em {
  font-family: var(--font-mono); font-style: normal; font-size: var(--fs-xs);
  color: var(--ink-400);
}

/* --- category page: other families ------------------------------------- */
.cat-links {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.cat-links a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  background: var(--paper); padding: var(--s-4) var(--s-5);
  font-size: var(--fs-sm); font-weight: 500; min-height: 56px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cat-links a:hover { background: var(--green-050); color: var(--green-800); }
.cat-links em {
  font-family: var(--font-mono); font-style: normal; font-size: var(--fs-xs);
  color: var(--ink-400);
}

/* --- 7. HERO ------------------------------------------------------------ */
.hero { background: var(--ink); color: #EDEFEC; position: relative; overflow: hidden; }
.hero__inner {
  display: grid; gap: var(--s-7);
  padding-block: var(--s-8) var(--s-8);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--s-8); padding-block: var(--s-9);
  }
}
.hero h1 { color: #fff; margin-block: var(--s-4) var(--s-5); }
.hero h1 em { font-style: normal; color: #9DC194; }
.hero__lede { color: #B9BFB9; font-size: clamp(var(--fs-base), 1.6vw, var(--fs-md)); max-width: 54ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
/* Product "plate": a white panel holding the render, set on the dark hero.
   Avoids background-keying artefacts and echoes the catalogue's white spec
   pages against its black section dividers. */
.hero__media { position: relative; }
.hero__plate {
  background: #fff; border: 1px solid #2C312E;
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  padding: clamp(0.5rem, 1.5vw, 1rem);
}
.hero__plate img { width: 100%; height: 100%; object-fit: contain; }
/* Reserve the frame while the model streams in, so nothing shifts. */
.hero__plate { min-height: 240px; }

/* Interactive 3D view. The static render carries the hero; the 4.6 MB model and
   its 250 KB viewer are fetched only when the visitor asks for them, so the
   initial page weight is unaffected. */
.hero__3d-status {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500);
  text-align: center; max-width: 80%;
}
.hero__3d-status::after {
  content: ""; width: 13px; height: 13px; flex: none;
  border: 2px solid var(--line-strong); border-top-color: var(--green);
  border-radius: 50%; animation: gs-spin 700ms linear infinite;
}
@keyframes gs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hero__3d-status::after { animation: none; }
}
.hero__3d-status:empty { display: none; }

.hero__plate model-viewer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: #fff; --poster-color: transparent;
  z-index: 0;   /* the canvas sits under the caption and overlays */
}
/* We render our own loading state, so hide the built-in progress bar and the
   AR prompt that would otherwise sit on top of the frame. */
.hero__plate model-viewer::part(default-progress-bar) { display: none; }
.hero__plate model-viewer::part(default-ar-button) { display: none; }
.hero__hint {
  position: absolute; right: var(--s-3); top: var(--s-3); z-index: 2;
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-500);
  background: rgba(255,255,255,0.9); padding: var(--s-2) var(--s-3);
  pointer-events: none;
}
.hero__hint svg { width: 12px; height: 12px; }
.hero__plate figcaption { z-index: 2;
  position: absolute; left: 0; bottom: 0;
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--ink); color: #9DC194;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: var(--s-3) var(--s-4); border-top: 1px solid #2C312E; border-right: 1px solid #2C312E;
}
.hero__plate figcaption b { color: #fff; font-weight: 500; }
.hero__stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: #2C312E; border: 1px solid #2C312E;
  margin-top: var(--s-7);
}
@media (min-width: 640px) { .hero__stats { grid-template-columns: repeat(4, 1fr); } }
.hero__stat { background: var(--ink); padding: var(--s-4) var(--s-4); }
.hero__stat dt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #7C857F; margin-bottom: var(--s-2);
}
.hero__stat dd {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700;
  color: #fff; letter-spacing: -0.02em; line-height: 1;
}
.hero__stat dd small { font-size: var(--fs-sm); font-weight: 500; color: #9DC194; }

/* --- 8. MARQUEE / TRUST STRIP ------------------------------------------- */
.trust {
  border-bottom: 1px solid var(--line); background: var(--paper-2);
  padding-block: var(--s-5);
}
.trust__inner {
  display: grid; gap: var(--s-5); align-items: center;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .trust__inner { grid-template-columns: repeat(4, 1fr); } }
.trust__item { display: flex; gap: var(--s-3); align-items: flex-start; }
.trust__item svg { width: 22px; height: 22px; color: var(--green); flex: none; margin-top: 2px; }
.trust__item strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.trust__item span { display: block; font-size: var(--fs-xs); color: var(--ink-500); }

/* --- 9. CARDS ----------------------------------------------------------- */
.card {
  background: var(--paper); border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { border-color: var(--green); }
@media (hover: hover) { .card--lift:hover { transform: translateY(-3px); } }

/* Category card */
.cat-card { position: relative; }
.cat-card__media {
  aspect-ratio: 4 / 3; background: var(--paper-2);
  display: grid; place-items: center; padding: var(--s-3);
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.cat-card__media img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform 400ms var(--ease);
}
@media (hover: hover) { .cat-card:hover .cat-card__media img { transform: scale(1.05); } }
.cat-card__body { padding: var(--s-5); flex: 1; display: flex; flex-direction: column; gap: var(--s-2); }
.cat-card__count {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--green);
}
/* The title reserves two lines whether or not it needs them, so the blurb
   below starts at the same height on every card. Without this, a title that
   wraps at one breakpoint drops its blurb while its neighbours' stay put. */
.cat-card h3 {
  font-size: var(--fs-md);
  min-height: calc(2 * 1.06 * var(--fs-md));
}
/* Was `.cat-card p`, which also matched the model count above the title. Two
   elements with `margin-top: auto` in one flex column split the free space
   between them, so the blurb's position moved with its own line count and the
   cards never lined up. Scoped to the blurb, and no auto margin: content flows
   from the top, which is what keeps a row level.

   The blurbs run two to four lines depending on the wording, so aligning only
   their tops still left the text ending at three different heights across a
   row. Reserving four lines, the longest any of them runs, makes every card
   occupy the same block and the row end level. Shorter blurbs pad with space.

   Deliberately no line-clamp. This grid is four columns above 900px, so cards
   get narrow on an ordinary laptop and a clamp starts hiding the end of the
   longer blurbs. Losing text is worse than a little unevenness at a width
   where every card is running long anyway. */
.cat-card__desc {
  font-size: var(--fs-sm); color: var(--ink-500);
  min-height: calc(4 * 1.6em);
}
.cat-card__link { position: absolute; inset: 0; }

/* Product card */
.p-card { position: relative; }
.p-card__media {
  aspect-ratio: 4 / 3; background: #fff; padding: var(--s-2);
  display: grid; place-items: center; border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.p-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 400ms var(--ease); }
@media (hover: hover) { .p-card:hover .p-card__media img { transform: scale(1.06); } }
.p-card__body { padding: var(--s-4) var(--s-5) var(--s-5); display: grid; gap: var(--s-3); }
.p-card__cat {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-400);
}
.p-card__model {
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.15;
}
.p-card__model a { position: relative; z-index: 1; }
.p-card dl {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4);
  font-size: var(--fs-xs); border-top: 1px solid var(--line); padding-top: var(--s-3);
}
.p-card dt { color: var(--ink-400); text-transform: uppercase; letter-spacing: 0.07em; }
.p-card dd { font-family: var(--font-mono); font-weight: 500; text-align: right; }
.p-card__foot {
  margin-top: var(--s-1); display: flex; align-items: center;
  justify-content: space-between; gap: var(--s-3);
}
.p-card__cover { position: absolute; inset: 0; }

/* Compare checkbox on card */
.cmp-toggle {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-500);
  min-height: 44px; padding-right: var(--s-2);
}
.cmp-toggle input { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; }
.cmp-toggle:hover { color: var(--green); }

/* --- 10. CATALOGUE / SELECTOR ------------------------------------------- */
.cat-layout { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) {
  .cat-layout { grid-template-columns: 268px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
}
.filters { display: grid; gap: var(--s-5); }
@media (min-width: 1024px) { .filters { position: sticky; top: 100px; } }
.filters__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.filters__head h2 { font-size: var(--fs-md); }
/* The close button belongs to the mobile filter drawer only. */
@media (min-width: 1024px) { #filters-close { display: none; } }
.fgroup { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.fgroup > h3 {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-500);
  margin-bottom: var(--s-3);
}
.fgroup ul { display: grid; gap: 2px; }
.fopt {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 40px; font-size: var(--fs-sm); cursor: pointer;
  padding: var(--s-1) 0;
}
.fopt input { width: 17px; height: 17px; accent-color: var(--green); flex: none; cursor: pointer; }
.fopt span { flex: 1; }
.fopt em {
  font-family: var(--font-mono); font-style: normal; font-size: var(--fs-xs);
  color: var(--ink-400);
}
.fopt:hover { color: var(--green); }

.range-row { display: flex; align-items: center; gap: var(--s-3); }
.range-row input[type="range"] { flex: 1; accent-color: var(--green); min-height: 44px; }
.range-val {
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500;
  min-width: 4.5ch; text-align: right;
}

.catalogue__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding-bottom: var(--s-4); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.result-count { font-size: var(--fs-sm); color: var(--ink-500); }
.result-count strong { font-family: var(--font-mono); color: var(--ink); }
.control-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap select {
  appearance: none; -webkit-appearance: none;
  min-height: 44px; padding: 0 var(--s-7) 0 var(--s-4);
  border: 1.5px solid var(--line-strong); background: var(--paper);
  font-size: var(--fs-sm); cursor: pointer;
}
.select-wrap svg {
  position: absolute; right: var(--s-3); width: 14px; height: 14px;
  pointer-events: none; color: var(--ink-500);
}
.search-wrap { position: relative; flex: 1; min-width: 200px; }
.search-wrap input {
  width: 100%; min-height: 44px; padding: 0 var(--s-4) 0 var(--s-8);
  border: 1.5px solid var(--line-strong); background: var(--paper);
  font-size: var(--fs-sm);
}
.search-wrap svg {
  position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--ink-400); pointer-events: none;
}

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 36px; padding: 0 var(--s-3);
  background: var(--green-100); color: var(--green-800);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em;
}
.chip button { display: grid; place-items: center; width: 20px; height: 20px; }
.chip svg { width: 12px; height: 12px; }

/* Primary control on mobile — keep it at the full 44px touch target. */
.filters-toggle { display: flex; min-height: 44px; }
@media (min-width: 1024px) { .filters-toggle { display: none; } }
@media (max-width: 1023px) {
  .filters {
    position: fixed; inset: 0; z-index: var(--z-drawer);
    background: var(--paper); padding: var(--s-5) var(--gutter) var(--s-8);
    overflow-y: auto; display: none;
  }
  .filters[data-open="true"] { display: block; }
}

.empty-state {
  border: 1px dashed var(--line-strong); padding: var(--s-8) var(--s-5);
  text-align: center; display: grid; gap: var(--s-4); place-items: center;
}
.empty-state svg { width: 40px; height: 40px; color: var(--ink-400); }
.empty-state p { color: var(--ink-500); max-width: 42ch; }

/* --- 11. COMPARE TRAY --------------------------------------------------- */
.cmp-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tray);
  background: var(--ink); color: #fff;
  transform: translateY(105%);
  transition: transform 280ms var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.cmp-tray[data-open="true"] { transform: translateY(0); }
.cmp-tray__inner {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 72px; flex-wrap: wrap; padding-block: var(--s-3);
}
.cmp-tray__label {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: #9DC194;
}
.cmp-tray__items { display: flex; gap: var(--s-2); flex-wrap: wrap; flex: 1; }
.cmp-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  border: 1px solid #4A5049; padding: var(--s-2) var(--s-3);
  font-family: var(--font-mono); font-size: var(--fs-xs);
}
.cmp-pill button { display: grid; place-items: center; width: 18px; height: 18px; color: #9DC194; }
.cmp-pill svg { width: 11px; height: 11px; }

/* --- 12. PRODUCT DETAIL ------------------------------------------------- */
.breadcrumb {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--ink-500);
  padding-block: var(--s-4);
}
.breadcrumb a:hover { color: var(--green); text-decoration: underline; }
.breadcrumb svg { width: 11px; height: 11px; opacity: 0.5; }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

.pd-head { display: grid; gap: var(--s-6); padding-bottom: var(--s-7); }
@media (min-width: 1024px) {
  .pd-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
}
.pd-gallery { display: grid; gap: var(--s-3); }
.pd-figure {
  border: 1px solid var(--line); background: #fff;
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  padding: var(--s-3); position: relative; overflow: hidden;
}
.pd-figure img { width: 100%; height: 100%; object-fit: contain; }
.pd-figure figcaption {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-400);
  background: rgba(255,255,255,0.92); padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--line); border-right: 1px solid var(--line);
}
.pd-zoom {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(255,255,255,0.94); border: 1px solid var(--line);
  color: var(--ink-700); transition: all var(--dur) var(--ease);
}
.pd-zoom:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.pd-zoom svg { width: 16px; height: 16px; }
.pd-thumbs { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pd-thumb {
  width: 96px; border: 1.5px solid var(--line);
  background: #fff; display: grid; grid-template-rows: 62px auto;
  transition: border-color var(--dur) var(--ease);
}
.pd-thumb > span:first-child { display: grid; place-items: center; padding: 5px; overflow: hidden; }
.pd-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Section drawings are faint line art and read as an empty box at this size,
   so every thumbnail carries a short label. */
.pd-thumb__label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-400);
  border-top: 1px solid var(--line); padding: 4px 2px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-thumb[aria-selected="true"] { border-color: var(--green); }
.pd-thumb[aria-selected="true"] .pd-thumb__label { color: var(--green); border-color: var(--green); }
.pd-thumb:hover { border-color: var(--ink-400); }

.pd-title { display: grid; gap: var(--s-3); }
.pd-model {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 5vw, var(--fs-3xl)); letter-spacing: -0.028em; line-height: 1;
}
.pd-name { font-size: var(--fs-md); color: var(--ink-500); }
.pd-app-badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  align-self: start;
  background: var(--green-100); color: var(--green-800);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: var(--s-2) var(--s-3);
}

/* Key figures strip */
/* auto-fit so a unit with only two published figures fills the row cleanly
   instead of leaving two empty cells */
.pd-keys {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); margin-top: var(--s-5);
}
.pd-key { background: var(--paper); padding: var(--s-4); }
.pd-key dt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-400); margin-bottom: var(--s-2);
}
.pd-key dd {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1;
}
.pd-key dd small { font-size: var(--fs-sm); color: var(--ink-500); font-weight: 500; }

.pd-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* Spec tables */
.spec-table { font-size: var(--fs-sm); border: 1px solid var(--line); }
.spec-table caption {
  text-align: left; font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-500);
  padding: var(--s-3) var(--s-4); background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.spec-table th, .spec-table td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; }
.spec-table tbody tr { border-top: 1px solid var(--line); }
.spec-table tbody tr:first-child { border-top: 0; }
.spec-table th {
  font-weight: 500; color: var(--ink-500); width: 45%;
  background: var(--paper); font-size: var(--fs-xs);
  letter-spacing: 0.05em; text-transform: uppercase;
}
.spec-table td { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.spec-table tbody tr:nth-child(even) { background: var(--paper-2); }

/* Comparison table — fixed layout so columns share width evenly and the
   product images always get a definite box to size against. */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table { table-layout: fixed; min-width: 720px; font-size: var(--fs-sm); border: 1px solid var(--line); }
.cmp-table caption {
  text-align: left; font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-500);
  padding: var(--s-3) var(--s-4); background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.cmp-table col.cmp-col--label { width: 22%; }
.cmp-table th, .cmp-table td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; }
.cmp-table tbody tr { border-top: 1px solid var(--line); }
.cmp-table tbody tr:nth-child(even) { background: var(--paper-2); }
.cmp-table tbody th {
  font-weight: 500; color: var(--ink-500); font-size: var(--fs-xs);
  letter-spacing: 0.05em; text-transform: uppercase;
}
.cmp-table tbody td { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.cmp-table thead th { padding: var(--s-4); vertical-align: bottom; }
.cmp-head { display: grid; gap: var(--s-3); }
.cmp-media {
  background: #fff; border: 1px solid var(--line);
  aspect-ratio: 4 / 3; display: grid; place-items: center; padding: var(--s-3);
}
.cmp-media img { width: 100%; height: 100%; object-fit: contain; }
.cmp-model {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
  letter-spacing: -0.01em; color: var(--ink);
}
.cmp-model:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.cmp-differs {
  display: inline-block; margin-left: var(--s-2);
  color: var(--green); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em;
}
.cmp-none { color: var(--ink-400); }

.notes { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.note {
  display: flex; gap: var(--s-3); font-size: var(--fs-sm);
  color: var(--ink-700); padding-left: var(--s-3);
  border-left: 2px solid var(--green);
}

.pd-tabs { border-top: 1px solid var(--line); }
.pd-tabs__list { display: flex; gap: 0; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.pd-tabs__btn {
  padding: var(--s-4) var(--s-5); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-500);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pd-tabs__btn[aria-selected="true"] { color: var(--ink); border-color: var(--green); }
.pd-tabs__btn:hover { color: var(--ink); }
.pd-panel { padding-top: var(--s-6); }
.pd-panel[hidden] { display: none; }

.drawing-frame {
  border: 1px solid var(--line); background: #fff; padding: var(--s-5);
  position: relative; display: grid; place-items: center;
}
.drawing-frame img { width: 100%; max-width: 900px; }

/* --- 13. LIGHTBOX ------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  background: rgba(10,12,11,0.94);
  display: grid; grid-template-rows: auto 1fr;
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.lightbox[data-open="true"] {
  visibility: visible; opacity: 1;
  transition: opacity var(--dur) var(--ease), visibility 0s linear 0s;
}
.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-4) var(--gutter); color: #EDEFEC;
}
.lightbox__title { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; }
.lightbox__close { width: 48px; height: 48px; display: grid; place-items: center; border: 1.5px solid #4A5049; color: #fff; }
.lightbox__close svg { width: 20px; height: 20px; }
.lightbox__stage { overflow: auto; padding: 0 var(--gutter) var(--s-6); display: grid; place-items: center; }
.lightbox__stage img { background: #fff; max-width: 100%; }

/* --- 14. FORMS ---------------------------------------------------------- */
.form-grid { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.field { display: grid; gap: var(--s-2); }
.field > label { font-size: var(--fs-sm); font-weight: 600; }
.field .req { color: var(--danger); }
.field .hint { font-size: var(--fs-xs); color: var(--ink-500); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--line-strong); background: var(--paper);
  font-size: var(--fs-base); transition: border-color var(--dur) var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-400); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); }
.field .err { font-size: var(--fs-xs); color: var(--danger); font-weight: 600; display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--danger); }
.field[data-invalid="true"] .err { display: flex; gap: var(--s-2); align-items: center; }
.field .err svg { width: 13px; height: 13px; flex: none; }

.form-note { font-size: var(--fs-xs); color: var(--ink-500); max-width: 56ch; }
.form-status { display: none; padding: var(--s-4); font-size: var(--fs-sm); font-weight: 500; gap: var(--s-3); align-items: flex-start; }
.form-status svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.form-status[data-state="ok"]   { display: flex; background: var(--green-100); color: var(--green-800); }
.form-status[data-state="err"]  { display: flex; background: #FBEAE9; color: var(--danger); }

.form-panel {
  background: var(--paper); border: 1px solid var(--line); padding: var(--s-6);
}
@media (min-width: 768px) { .form-panel { padding: var(--s-7); } }

/* --- 15. CAPABILITY / EDITORIAL ---------------------------------------- */
.split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); }
  .split--reverse > *:first-child { order: 2; }
}
.split__media img { width: 100%; border: 1px solid var(--line); }
.section--dark .split__media img { border-color: #2C312E; }

.feature-list { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
/* Used where the section has no image beside it, so the features can run wide. */
.feature-list--2 { margin-top: 0; }
@media (min-width: 860px) {
  .feature-list--2 { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-8); row-gap: var(--s-6); }
}
.feature {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  padding-top: var(--s-5); border-top: 1px solid var(--line);
}
.section--dark .feature { border-color: #2C312E; }
.feature__n {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.1em; color: var(--green);
}
.section--dark .feature__n { color: #9DC194; }
.feature :is(h3, h4) { margin-bottom: var(--s-2); }
.feature p { font-size: var(--fs-sm); color: var(--ink-500); }
.section--dark .feature p { color: #969D96; }

.stat-band {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
@media (min-width: 900px) { .stat-band { grid-template-columns: repeat(4, 1fr); } }
.stat-band > div { background: var(--paper); padding: var(--s-5); }
.stat-band dt {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-400); margin-bottom: var(--s-2);
}
.stat-band dd {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1;
}

.cert-card {
  display: grid; gap: var(--s-5); border: 1px solid var(--line);
  background: var(--paper); padding: var(--s-5);
}
@media (min-width: 640px) { .cert-card { grid-template-columns: 200px minmax(0,1fr); align-items: start; gap: var(--s-6); } }
.cert-card img { width: 100%; border: 1px solid var(--line); }
.cert-card dl { display: grid; gap: var(--s-3); margin-top: var(--s-4); font-size: var(--fs-sm); }
.cert-card dl > div { display: grid; grid-template-columns: 150px 1fr; gap: var(--s-3); }
.cert-card dt { color: var(--ink-500); }
.cert-card dd { font-family: var(--font-mono); font-weight: 500; }

/* --- 15b. FULL-BLEED FIELD BAND ---------------------------------------- */
.field-band { position: relative; background: var(--ink); overflow: hidden; }
.field-band__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.42;
}
.field-band__inner {
  position: relative; padding-block: var(--s-8);
  display: grid; gap: var(--s-5);
}
@media (min-width: 900px) {
  .field-band__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end; gap: var(--s-8); padding-block: var(--s-9);
  }
}
.field-band h2 { color: #fff; max-width: 26ch; }
.field-band p { color: #D2D7D1; max-width: 52ch; }
.field-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,16,14,.92) 0%, rgba(13,16,14,.72) 55%, rgba(13,16,14,.45) 100%);
}
.field-band__inner { z-index: 1; }

/* --- 15c. MAP (click to load) ------------------------------------------ */
.map {
  border: 1px solid var(--line); background: var(--paper-2);
  aspect-ratio: 16 / 9; position: relative; overflow: hidden;
}
@media (max-width: 640px) { .map { aspect-ratio: 4 / 3; } }
.map__placeholder {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: var(--s-4); padding: var(--s-6); text-align: center;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
}
.map__placeholder > svg { width: 34px; height: 34px; color: var(--green); }
.map__address {
  font-size: var(--fs-md); font-weight: 500; line-height: 1.5;
  background: var(--paper-2); padding: 0 var(--s-3);
}
.map__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; }
.map__note {
  font-size: var(--fs-xs); color: var(--ink-500);
  background: var(--paper-2); padding: 0 var(--s-3);
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- 16. CTA BAND ------------------------------------------------------- */
.cta-band { background: var(--green); color: #fff; }
.cta-band__inner {
  display: grid; gap: var(--s-6); padding-block: var(--s-8); align-items: center;
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0,1fr) auto; gap: var(--s-8); }
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 54ch; margin-top: var(--s-3); }
.cta-band .btn--ghost { border-color: rgba(255,255,255,0.5); color: #fff; }
.cta-band .btn--ghost:hover { background: #fff; color: var(--green-800); border-color: #fff; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --- 17. FOOTER --------------------------------------------------------- */
.site-footer { background: var(--ink); color: #969D96; font-size: var(--fs-sm); }
.site-footer__top { padding-block: var(--s-8); display: grid; gap: var(--s-7); }
@media (min-width: 900px) {
  .site-footer__top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-7); }
}
.site-footer h3 {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
  margin-bottom: var(--s-4);
}
.site-footer ul { display: grid; gap: var(--s-3); }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-lockup { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.footer-lockup img { height: 40px; width: auto; }
.footer-lockup span { display: block; line-height: 1.15; }
.footer-lockup b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-md); letter-spacing: -0.01em; color: #fff;
}
.footer-lockup em {
  display: block; font-family: var(--font-mono); font-style: normal;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #7C857F;
}
.site-footer__brand p { max-width: 40ch; }
.site-footer address { font-style: normal; display: grid; gap: var(--s-3); }
.footer-map {
  display: inline-flex; align-items: center; gap: var(--s-2);
  align-self: start; min-height: 40px;
  color: #9DC194; font-weight: 500;
}
.footer-map svg { width: 15px; height: 15px; flex: none; }
.footer-map:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__badges { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-5); flex-wrap: wrap; }
.site-footer__badge {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #9DC194;
  border: 1px solid #3A4A36; padding: var(--s-2) var(--s-3);
}
.site-footer__bottom {
  border-top: 1px solid #2C312E; padding-block: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: space-between; font-size: var(--fs-xs);
}

/* --- 17b. CONSENT BANNER (only present when Google Ads is configured) --- */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-tray) + 10);
  background: var(--ink); color: #D2D7D1;
  border-top: 2px solid var(--green);
  padding-bottom: env(safe-area-inset-bottom);
}
.consent[hidden] { display: none; }
.consent__inner {
  display: grid; gap: var(--s-4); padding-block: var(--s-4);
  align-items: center;
}
@media (min-width: 860px) {
  .consent__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); }
}
.consent__text { font-size: var(--fs-sm); line-height: 1.55; max-width: 78ch; }
.consent__text a { color: #9DC194; text-decoration: underline; text-underline-offset: 3px; }
.consent__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.consent .btn--ghost { border-color: #5A615A; color: #fff; }
.consent .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* keep the WhatsApp button clear of the banner */
body[data-consent-open="true"] .wa-float { bottom: calc(var(--s-4) + 96px); }

/* --- 18. WHATSAPP FLOAT ------------------------------------------------- */
.wa-float {
  position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: calc(var(--z-tray) - 1);
  display: inline-flex; align-items: center; gap: var(--s-3);
  /* Darkened from WhatsApp brand green so white 13px/600 label clears
     WCAG AA 4.5:1 (brand #25D366 and #1F9D5B both fail at this size). */
  background: #0E7A45; color: #fff;
  min-height: 52px; padding: 0 var(--s-4);
  box-shadow: 0 6px 24px rgba(10,12,11,0.22);
  font-size: var(--fs-sm); font-weight: 600;
  transition: background var(--dur) var(--ease);
}
.wa-float:hover { background: #0A5F35; }
.wa-float svg { width: 22px; height: 22px; flex: none; }
.wa-float span { display: none; }
@media (min-width: 640px) { .wa-float span { display: inline; } }
body[data-tray-open="true"] .wa-float { bottom: calc(72px + var(--s-4)); }

/* --- 19. REVEAL ANIMATION ---------------------------------------------- */
/* The hidden start state is gated behind `.js` (set by an inline script in
   <head>). Without JavaScript — or if site.js fails to load — the content is
   simply visible rather than stuck at opacity 0. A timer in that same inline
   script is the second safety net. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.js .reveal-stagger > * { opacity: 0; transform: translateY(14px); }
.js .reveal-stagger.is-in > * {
  opacity: 1; transform: none;
  transition: opacity 460ms var(--ease), transform 460ms var(--ease);
}
.js .reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: 55ms; }
.js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: 110ms; }
.js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: 165ms; }
.js .reveal-stagger.is-in > *:nth-child(5) { transition-delay: 200ms; }
.js .reveal-stagger.is-in > *:nth-child(6) { transition-delay: 235ms; }
.js .reveal-stagger.is-in > *:nth-child(n+7) { transition-delay: 265ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* --- 19b. NOT-FOUND SUGGESTIONS ---------------------------------------- */
/* Filled in by the 404 page's script once it has matched the requested path
   against the catalogue. Starts [hidden], so with JavaScript off it never
   appears and the server-rendered family list below carries the page. */
.nf-suggest {
  margin-top: var(--s-7); padding: var(--s-5) var(--s-5) var(--s-4);
  background: var(--green-050); border-left: 3px solid var(--green);
}
.nf-suggest[hidden] { display: none; }
.nf-suggest > ul { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: 1px; }
.nf-suggest a {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  min-height: 44px; padding: var(--s-3) 0;
  border-bottom: 1px solid rgba(64, 107, 58, 0.18);
}
.nf-suggest li:last-child a { border-bottom: 0; }
.nf-suggest a::after { display: none; }   /* cancel the nav underline sweep */
.nf-suggest strong { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--green-800); }
.nf-suggest span { font-size: var(--fs-sm); color: var(--ink-400); }
.nf-suggest a:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* --- 19c. NOT-FOUND CATEGORY LIST -------------------------------------- */
/* The 404 page's main recovery route. Most visitors reach it from an old Wix
   URL that named an implement, so this list is the useful thing on the page
   and gets more presence than the header dropdown version it echoes. */
.nf-cats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 600px) { .nf-cats { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-6); } }
@media (min-width: 900px) { .nf-cats { grid-template-columns: repeat(3, 1fr); } }
.nf-cats a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 44px; padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nf-cats a::after { display: none; }   /* cancel the nav underline sweep */
.nf-cats a:hover { background: var(--green-050); color: var(--green-800); }
.nf-cats span {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-400);
  white-space: nowrap;
}
.nf-cats a:hover span { color: var(--green); }

/* --- 20. UTILITIES ----------------------------------------------------- */
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); }
.text-center { text-align: center; }
.no-print { }
.rule { border: 0; border-top: 1px solid var(--line); }
.section--dark .rule { border-color: #2C312E; }

/* --- 21. PRINT — product pages become clean A4 datasheets -------------- */
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  :root { --gutter: 0; }
  html { scroll-behavior: auto; }
  body { background: #fff; color: #000; font-size: 10pt; line-height: 1.4; }

  .topbar, .site-header, .drawer, .wa-float, .cmp-tray, .lightbox, .nav-panel,
  .pd-actions, .pd-zoom, .pd-thumbs, .cta-band, .site-footer,
  .breadcrumb, .related, .no-print, .filters, .catalogue__bar { display: none !important; }

  .section, .section--dark { padding-block: 0 !important; background: #fff !important; color: #000 !important; }
  .container { max-width: none; padding: 0; }
  .pd-head { grid-template-columns: 1fr 1fr; gap: 8mm; padding-bottom: 6mm; }
  .pd-figure { border: 0.4pt solid #999; aspect-ratio: 4/3; padding: 2mm; }
  .pd-model { font-size: 20pt; }
  .pd-keys { border-color: #999; background: #999; }
  .pd-key { padding: 2.5mm; }
  .pd-key dd { font-size: 12pt; }
  .spec-table { border-color: #999; font-size: 9pt; page-break-inside: avoid; }
  .spec-table th, .spec-table td { padding: 1.6mm 2.5mm; }
  .spec-table tbody tr, .spec-table caption { border-color: #999; }
  .spec-table tbody tr:nth-child(even) { background: #F2F2F2 !important; }
  .pd-tabs__list { display: none; }
  .pd-panel[hidden] { display: block !important; }
  .pd-panel { page-break-inside: avoid; padding-top: 5mm; }
  .drawing-frame { border: 0.4pt solid #999; padding: 2mm; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  a[href]::after { content: ""; }

  /* Datasheet header/footer injected for print only */
  .print-head { display: flex !important; align-items: center; justify-content: space-between;
                border-bottom: 1pt solid #000; padding-bottom: 3mm; margin-bottom: 6mm; }
  .print-head img { height: 14mm; }
  .print-head div { text-align: right; font-size: 8pt; line-height: 1.35; }
  .print-foot { display: block !important; border-top: 0.4pt solid #999; margin-top: 6mm;
                padding-top: 2.5mm; font-size: 7.5pt; color: #444; }
}
.print-head, .print-foot { display: none; }