/* ═══════════════════════════════════════════════════
   THE DUTCH MRO — design system
   Colours derived from the plant itself.
   ═══════════════════════════════════════════════════ */
:root{
  --graphite:#1B2128;   /* EPDM black, lifted. 13 Jul 2026: the site read as a black hole */
  --carbon:#242C33;     /* one step up, for dark-section panels */
  --rule-d:#2E3740;     /* the lattice rule INSIDE a dark section */
  --ink:#2A3037;
  --steel:#767F88;      /* stainless */
  --steel-l:#9AA3AB;
  --rule:#D7DBDF;
  --rule-l:#E7EAEC;
  --surface:#F3F4F5;    /* the washed-down hygienic surface */
  --paper:#FBFBFC;
  --white:#FFF;
  --foodsafe:#0E56A0;   /* blue: used in food plants BECAUSE it isn't a food colour */
  --foodsafe-lt:#2C7BC9;
  --foodsafe-l:#E3EDF6;
  --signal:#C8431B;     /* FAILURE ONLY. Never decoration. */
  --signal-l:#FBF0EC;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ar:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--graphite);background:var(--white);
     line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
svg{display:block;width:100%;height:auto}
a{color:inherit}
.wrap{max-width:1220px;margin:0 auto;padding:0 34px}

/* ── NAV ───────────────────────────────────────── */
nav{background:var(--graphite);position:sticky;top:0;z-index:100;
    border-bottom:1px solid #2A3037}
.nv{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;
      font-weight:700;font-size:.98rem;letter-spacing:-.012em;flex:none}
.logo .m{width:10px;height:10px;background:var(--foodsafe-lt);flex:none}
.nl{display:flex;gap:26px;align-items:center}
.nl a{color:#C3CAD1;text-decoration:none;font-size:.845rem;font-weight:500;
      padding:4px 0;border-bottom:1px solid transparent;transition:.13s}
.nl a:hover,.nl a.on{color:#fff;border-bottom-color:var(--foodsafe-lt)}
.nl .lang{font-family:var(--mono);font-size:.7rem;color:var(--steel);
          border:1px solid #333B43;padding:5px 9px;border-bottom:1px solid #333B43}
.nl .lang:hover{color:#fff;border-color:var(--steel)}
.burger{display:none;background:none;border:1px solid #333B43;color:#fff;
        padding:7px 10px;font-family:var(--mono);font-size:.72rem;cursor:pointer}

/* ── TYPE ──────────────────────────────────────── */
.eyebrow{font-family:var(--mono);font-size:.685rem;letter-spacing:.145em;
         text-transform:uppercase;color:var(--steel);margin-bottom:15px}
h1{font-size:clamp(1.95rem,4.3vw,3.05rem);font-weight:600;line-height:1.1;
   letter-spacing:-.03em}
h2{font-size:1.82rem;font-weight:600;letter-spacing:-.026em;line-height:1.2}
h3{font-size:1.02rem;font-weight:600;letter-spacing:-.012em}
.em{color:var(--foodsafe)}
.rd{color:var(--signal)}
.lede{font-size:1.08rem;color:var(--ink);max-width:56ch}
p{margin-bottom:14px}
strong{font-weight:600;color:var(--graphite)}

/* ── SECTIONS + RHYTHM ─────────────────────────── */
section{padding:76px 0}
.sec-lite{background:#fff;border-top:1px solid var(--rule)}
.sec-tint{background:var(--surface);border-top:1px solid var(--rule)}
.sec-dark{background:var(--graphite);color:#fff;border:none}
.sec-dark h2,.sec-dark h1,.sec-dark h3{color:#fff}
.sec-dark .lede,.sec-dark p{color:#AEB6BD}
.sec-dark strong{color:#fff}
.sec-dark .eyebrow{color:#6B757E}
.sec-h{margin-bottom:36px;max-width:64ch}
.sec-h h2{margin-bottom:9px}
.sec-h p{color:var(--steel);font-size:.97rem;margin:0}
.sec-dark .sec-h p{color:#7C868F}

/* ── ⭐ THE DRAWING SHEET — the texture that was missing ── */
.sheet{position:relative;background:
   linear-gradient(rgba(0,0,0,.028) 1px,transparent 1px) 0 0/22px 22px,
   linear-gradient(90deg,rgba(0,0,0,.028) 1px,transparent 1px) 0 0/22px 22px,
   var(--paper);
   border:1px solid var(--rule);padding:26px}
.sheet.dk{background:
   linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/22px 22px,
   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/22px 22px,
   var(--carbon);
   border-color:#333B43}
.sheet:before,.sheet:after{content:'';position:absolute;width:13px;height:13px;
   border:1px solid var(--steel);opacity:.5}
.sheet:before{top:7px;left:7px;border-right:none;border-bottom:none}
.sheet:after{bottom:7px;right:7px;border-left:none;border-top:none}
.sheet.dk:before,.sheet.dk:after{border-color:var(--steel);opacity:.6}
.zone{position:absolute;font-family:var(--mono);font-size:.6rem;color:var(--steel);
      opacity:.65;letter-spacing:.08em}
.zone.tr{top:9px;right:12px}
.zone.bl{bottom:9px;left:12px}

/* ── RIG (technical panels) ────────────────────── */
.rig{border:1px solid var(--rule);background:var(--surface);margin-top:34px}
.rig.dk{border-color:#333B43;background:var(--carbon)}
.rig-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;
        padding:12px 18px;border-bottom:1px solid var(--rule);background:#fff;flex-wrap:wrap}
.rig.dk .rig-hd{background:var(--graphite);border-bottom-color:#333B43}
.rig-t{font-family:var(--mono);font-size:.695rem;letter-spacing:.1em;
       text-transform:uppercase;color:var(--steel)}
.rig-t b{color:var(--graphite);font-weight:600}
.rig.dk .rig-t b{color:#fff}
.chip{font-family:var(--mono);font-size:.715rem;padding:3px 9px;font-weight:600;
      letter-spacing:.04em;background:var(--foodsafe-l);color:var(--foodsafe)}
.chip.warn{background:var(--signal-l);color:var(--signal)}
.rig.dk .chip{background:#123659;color:#6FAEE8}
.rig.dk .chip.warn{background:#3A1E14;color:#E8724B}
.rig-ft{background:#fff;border-top:1px solid var(--rule);padding:15px 18px;
        display:flex;gap:26px;flex-wrap:wrap}
.rig.dk .rig-ft{background:var(--graphite);border-top-color:#333B43}
.key{display:flex;align-items:center;gap:8px;font-size:.79rem;color:var(--ink)}
.rig.dk .key{color:#AEB6BD}
.rig.dk .key b{color:#fff}
.call{font-family:var(--mono);font-size:.655rem;font-weight:600;color:var(--foodsafe);
      border:1px solid var(--foodsafe);width:19px;height:19px;display:inline-flex;
      align-items:center;justify-content:center;border-radius:50%;flex:none}
.rig.dk .call{color:var(--foodsafe-lt);border-color:var(--foodsafe-lt)}

/* gauges */
.g{border-top:1px solid var(--rule);padding:12px 0}
.rig.dk .g{border-top-color:#2A3037}
.g:first-of-type{border-top:none;padding-top:0}
.g-k{font-family:var(--mono);font-size:.645rem;letter-spacing:.1em;text-transform:uppercase;
     color:var(--steel);margin-bottom:5px}
.g-v{font-family:var(--mono);font-size:1.4rem;font-weight:600;letter-spacing:-.02em;line-height:1}
.rig.dk .g-v{color:#fff}
.g-v small{font-size:.76rem;font-weight:400;color:var(--steel);margin-left:3px}
.g-v.warn{color:var(--signal)!important}
.bar{height:3px;background:var(--rule);margin-top:8px;position:relative;overflow:hidden}
.rig.dk .bar{background:#2A3037}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--foodsafe-lt);width:0}
.bar i.warn{background:var(--signal)}
.verdict{margin-top:auto;padding-top:16px;border-top:1px solid var(--rule);
         font-size:.845rem;color:var(--ink);min-height:80px}
.rig.dk .verdict{border-top-color:#2A3037;color:#AEB6BD}
.rig.dk .verdict b{color:#fff}
.verdict.warn b{color:var(--signal)!important}

/* ── QUOTES / BOXES ────────────────────────────── */
.quote{border-left:3px solid var(--foodsafe);padding-left:20px;margin:20px 0}
.quote p{font-size:1.02rem;font-weight:500;color:var(--graphite);margin-bottom:7px}
.quote cite{font-family:var(--mono);font-size:.685rem;color:var(--steel);font-style:normal}
.sec-dark .quote{border-left-color:var(--foodsafe-lt)}
.sec-dark .quote p{color:#fff}
.box{border:1px solid var(--rule);padding:20px 22px;margin:22px 0;background:var(--surface)}
.box.blue{border-color:var(--foodsafe);background:var(--foodsafe-l)}
.box.red{border-color:var(--signal);background:var(--signal-l)}
.box .bt{font-family:var(--mono);font-size:.655rem;letter-spacing:.1em;text-transform:uppercase;
         font-weight:600;margin-bottom:9px}
.box.blue .bt{color:var(--foodsafe)} .box.red .bt{color:var(--signal)}
.box p:last-child{margin-bottom:0}
.thesis{font-size:1.28rem;font-weight:600;line-height:1.45;text-align:center;
        border-top:2px solid var(--graphite);border-bottom:2px solid var(--graphite);
        padding:22px 0;margin:28px 0}
.sec-dark .thesis{border-color:var(--foodsafe-lt);color:#fff}

/* ── TABLES ────────────────────────────────────── */
table{width:100%;border-collapse:collapse;border:1px solid var(--rule);font-size:.885rem}
th{background:var(--surface);font-family:var(--mono);font-size:.625rem;letter-spacing:.09em;
   text-transform:uppercase;color:var(--steel);font-weight:500;padding:11px 13px;
   text-align:left;border-bottom:1px solid var(--rule)}
td{padding:12px 13px;border-bottom:1px solid var(--rule-l);vertical-align:top;color:var(--ink)}
tr:last-child td{border-bottom:none}
td.k{font-weight:600;color:var(--graphite)}
td.b{color:var(--foodsafe);font-weight:500}
td.r{color:var(--signal);font-weight:600}
.src{font-family:var(--mono);font-size:.635rem;color:var(--steel);margin-top:6px}

/* ── ⭐ PRODUCT GRID — depth on one scroll ─────── */
.catblock{margin-bottom:56px;scroll-margin-top:80px}
.cat-hd{display:flex;align-items:baseline;gap:14px;padding-bottom:11px;
        border-bottom:2px solid var(--graphite);margin-bottom:2px}
.cat-hd .n{font-family:var(--mono);font-size:.78rem;color:var(--foodsafe);font-weight:600}
.cat-hd h2{font-size:1.3rem}
.cat-hd .brands{margin-left:auto;font-family:var(--mono);font-size:.665rem;
                color:var(--steel);letter-spacing:.04em;text-align:right}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
       gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.pcard{background:#fff;padding:16px 15px 15px;text-decoration:none;color:inherit;
       display:flex;flex-direction:column;transition:background .12s;
       border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pcard:hover{background:var(--surface)}
.pcard .img{background:var(--paper);border:1px solid var(--rule-l);margin-bottom:11px;
   padding:8px;
   background-image:linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px);
   background-size:14px 14px}
.pcard h3{font-size:.9rem;margin-bottom:4px;line-height:1.25}
.pcard .d{font-size:.755rem;color:var(--steel);line-height:1.4;margin-bottom:8px;flex:1}
.pcard .pn{font-family:var(--mono);font-size:.685rem;color:var(--foodsafe);
           display:block;line-height:1.6}
.pcard .tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;
   background:var(--foodsafe);color:#fff;padding:2px 5px;align-self:flex-start;margin-top:6px}
.pcard .tag.n{background:var(--signal)}

/* jump bar */
.jump{position:sticky;top:62px;z-index:50;background:rgba(255,255,255,.97);
      backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);
      padding:10px 0;overflow-x:auto;white-space:nowrap}
.jump .wrap{display:flex;gap:6px}
.jump a{font-family:var(--mono);font-size:.68rem;color:var(--steel);text-decoration:none;
        padding:5px 10px;border:1px solid var(--rule);flex:none}
.jump a:hover{color:var(--foodsafe);border-color:var(--foodsafe)}

/* ── BRAND WALL ────────────────────────────────── */
/* ── THE RIBBON ─────────────────────────────────
   Replaces .bwall. A grid with an incomplete row printed empty grey cells;
   a marquee has no rows. Text only. Edge-masked. Paused on hover. Frozen
   under prefers-reduced-motion. */
.ribbon{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
        background:#fff;padding:22px 0;position:relative;
        -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
        mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.rib-t{display:flex;width:max-content;animation:rib 62s linear infinite;will-change:transform}
.ribbon:hover .rib-t{animation-play-state:paused}
@keyframes rib{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bw{flex:none;padding:0 30px;border-right:1px solid var(--rule-l);text-align:center;
    display:flex;flex-direction:column;justify-content:center;min-width:172px}
.bw b{font-weight:600;font-size:.94rem;letter-spacing:-.01em;color:var(--graphite);
      display:block;margin-bottom:3px}
.bw i{font-family:var(--mono);font-size:.62rem;color:var(--steel);letter-spacing:.08em;
      font-style:normal;text-transform:uppercase;display:block}
.rib-n{font-size:.885rem;color:var(--steel);margin-top:18px;max-width:88ch;line-height:1.6}
.rib-n strong{color:var(--graphite)}
@media(prefers-reduced-motion:reduce){
  .rib-t{animation:none}
  .ribbon{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
}
.sec-dark .bw .n{color:#fff}

/* ── CARDS / STEPS ─────────────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
       border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.sec-dark .grid3{border-top-color:var(--rule-d);border-left-color:var(--rule-d)}
.cell{background:#fff;padding:24px 22px;
      border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sec-dark .cell{background:var(--graphite);border-right-color:var(--rule-d);border-bottom-color:var(--rule-d)}
.sec-tint .cell{background:#fff}
.cell .k{font-family:var(--mono);font-size:.655rem;letter-spacing:.1em;text-transform:uppercase;
         color:var(--steel);margin-bottom:10px}
.cell .v{font-size:.92rem;color:var(--ink);line-height:1.55}
.sec-dark .cell .v{color:#DFE4E8}
.two{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}

/* ── CTA / BUTTONS ─────────────────────────────── */
.btns{display:flex;gap:11px;flex-wrap:wrap}
.btn{padding:13px 24px;font-size:.885rem;font-weight:500;text-decoration:none;
     border:1px solid var(--graphite);display:inline-flex;align-items:center;gap:8px}
.btn-p{background:var(--graphite);color:#fff}
.btn-p:hover{background:#2A3037}
.btn-s{background:#fff;color:var(--graphite)}
.btn-s:hover{background:var(--surface)}
.btn-wa{background:var(--foodsafe);border-color:var(--foodsafe);color:#fff}
.btn-wa:hover{background:#0A4580}
.sec-dark .btn-s{background:transparent;color:#fff;border-color:#4A545D}
.sec-dark .btn-s:hover{background:#2A3037}
.cta{text-align:center}
.cta h2{margin-bottom:9px}
.cta p{color:var(--steel);margin-bottom:24px}
.cta .btns{justify-content:center}

/* ── FOOTER (title block) ──────────────────────── */
footer{background:var(--graphite);border-top:2px solid var(--foodsafe-lt);color:#fff}
.fnav{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding:44px 0 34px}
.fnav h4{font-family:var(--mono);font-size:.635rem;letter-spacing:.11em;text-transform:uppercase;
         color:var(--steel);margin-bottom:13px;font-weight:500}
.fnav a{display:block;color:#C3CAD1;text-decoration:none;font-size:.85rem;padding:4px 0}
.fnav a:hover{color:#fff}
.fnav p{color:#8D959D;font-size:.85rem}
.tblock{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;border-top:1px solid #2A3037}
.tblock>div{padding:17px 0;padding-right:20px;border-left:1px solid #2A3037;padding-left:20px}
.tblock>div:first-child{border-left:none;padding-left:0}
.tblock .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
           color:var(--steel);margin-bottom:6px}
.tblock .v{font-size:.85rem;font-weight:500;line-height:1.5;color:#fff}
.tblock .v .n{font-family:var(--mono);font-size:.755rem;color:#C3CAD1;display:block;font-weight:400}
.fbot{padding:16px 0;border-top:1px solid #2A3037;font-family:var(--mono);
      font-size:.68rem;color:var(--steel)}

/* ── RESPONSIVE ────────────────────────────────── */
@media(max-width:940px){
  .two,.grid3,.fnav,.tblock{grid-template-columns:1fr;gap:22px}
  .tblock>div{border-left:none;padding-left:0;border-top:1px solid #2A3037}
  .nl{display:none}
  .nl.open{display:flex;position:absolute;top:62px;left:0;right:0;background:var(--graphite);
           flex-direction:column;align-items:flex-start;padding:16px 34px;gap:14px;
           border-bottom:1px solid #2A3037}
  .burger{display:block}
  .wrap{padding:0 20px}
  .cat-hd{flex-wrap:wrap}.cat-hd .brands{margin-left:0;width:100%;text-align:left}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{nav,.jump,footer .fnav{display:none}}

/* ══════════════════════════════════════════════════════════════════
   RTL — ARABIC
   Mirror the LAYOUT. Never mirror the DRAWINGS: an engineering
   cross-section reads left-to-right in every language, and flipping
   it would put the inlet on the wrong side of the pump.
   ══════════════════════════════════════════════════════════════════ */
[dir="rtl"]{text-align:right}
[dir="rtl"] body{font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",var(--sans);
  line-height:1.85;letter-spacing:0}
[dir="rtl"] .nv,[dir="rtl"] .nl,[dir="rtl"] .btns,[dir="rtl"] .meta,
[dir="rtl"] .fnav,[dir="rtl"] .steps{flex-direction:row-reverse}
[dir="rtl"] .logo{flex-direction:row-reverse}
[dir="rtl"] table{direction:rtl}
[dir="rtl"] th,[dir="rtl"] td{text-align:right}
[dir="rtl"] .ah .an{margin-inline:0 12px}
[dir="rtl"] .box,[dir="rtl"] .thesis{border-left:none;border-right:3px solid var(--foodsafe)}
[dir="rtl"] .box.red,[dir="rtl"] .box.blue{border-right-color:var(--signal)}
[dir="rtl"] .src{text-align:right}
/* the drawings, the gauges and the rig readouts stay LTR — they are instruments */
[dir="rtl"] svg,[dir="rtl"] .sheet,[dir="rtl"] .zone{direction:ltr}
[dir="rtl"] .pane,[dir="rtl"] .g-v,[dir="rtl"] .chip{direction:rtl;text-align:right}
[dir="rtl"] .g-v{font-variant-numeric:tabular-nums}
/* the ribbon scrolls the other way */
[dir="rtl"] .btrack{animation-direction:reverse}
[dir="rtl"] .kit .kn{text-align:right}
/* the kits break out of the reading column — in RTL the anchor is the RIGHT edge,
   so left:50%/translateX(-50%) pushes the grid off-canvas and the page scrolls. */
[dir="rtl"] .kits{left:auto;right:50%;transform:translateX(50%)}
@media(max-width:900px){[dir="rtl"] .kits{right:auto;transform:none}}
/* the kits break out of the reading column — in RTL the anchor is the RIGHT edge,
   so left:50%/translateX(-50%) pushes the grid off-canvas and the page scrolls. */
[dir="rtl"] .kits{left:auto;right:50%;transform:translateX(50%)}
@media(max-width:900px){[dir="rtl"] .kits{right:auto;transform:none}}

/* ── ⭐ THE KITS BREAK OUT OF THE READING COLUMN ───────────────────
   .art is 840px — correct for prose, far too narrow for three cards.
   Break out to the full .wrap content width (1220 − 2×34 = 1152) so the
   kits align exactly with the cost chart above them. */
.kits{position:relative;left:50%;transform:translateX(-50%);
      width:min(1152px, calc(100vw - 68px))}
@media(max-width:900px){.kits{position:static;left:auto;transform:none;width:100%;
      grid-template-columns:1fr}}

/* ── ⭐ #10 THE THREE KITS — a ladder, not a menu ─────────────────── */
.kits{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:22px 0 8px;
      border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.kit{background:#fff;padding:22px 20px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.kit .kn{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--foodsafe);margin-bottom:8px}
.kit h3{font-size:1.05rem;margin:0 0 8px;letter-spacing:-.01em}
.kit .kd{font-size:.88rem;color:var(--ink);margin-bottom:12px}
.kit table{margin:0 0 10px;font-size:.8rem}
.kit .src{font-size:.78rem;color:var(--steel);margin:0}
.kit:first-child{background:var(--foodsafe-l)}
@media(max-width:820px){.kits{grid-template-columns:1fr}}

/* ── ⭐ #16 HOVER TO PAUSE ─────────────────────────────────────────
   The rig is a readable instrument, not a screensaver. Hovering holds
   the clock so the gauges can actually be read. */
.rig{cursor:crosshair;outline:none}
.rig.held{box-shadow:inset 0 0 0 1px var(--foodsafe-lt)}
.rig.held::after{content:"SLOW MOTION — MOVE AWAY FOR FULL SPEED";position:absolute;right:12px;bottom:10px;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--foodsafe-lt);
  background:rgba(0,0,0,.55);padding:3px 7px;border-radius:2px;pointer-events:none}
@media(hover:none){.rig{cursor:default}.rig.held::after{content:"SLOW MOTION — TAP AWAY"}}

/* ── ⭐ CATEGORY GRID (parts index) — 12 CELLS ─────
   gap:0 + per-card borders. An incomplete row now renders as nothing,
   not as an empty grey cell. The old gap:1px-over-grey trick is gone
   from every grid in this build. */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
       border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.ccard{background:#fff;padding:24px 22px 20px;text-decoration:none;color:inherit;
       display:flex;flex-direction:column;min-height:210px;transition:background .12s;
       border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ccard:hover{background:var(--surface)}
.ccard:hover .co{color:var(--foodsafe)}
/* the two cards that do the work the part numbers used to do */
.ccard.act{background:var(--foodsafe-l);border-color:var(--rule)}
.ccard.act:hover{background:#D6E5F3}
.ccard.act .cn{color:var(--foodsafe)}
.ccard.act .cb{color:var(--foodsafe)}
.ccard .ico{margin:2px 0 12px}
.ccard .ico svg{max-width:118px;height:auto}
.tag.nw{font-family:var(--mono);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;
        background:var(--foodsafe);color:#fff;padding:2px 6px}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cn{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--foodsafe)}
.ccard h3{font-size:1.06rem;margin-bottom:8px;line-height:1.25}
.cd{font-size:.855rem;color:var(--steel);line-height:1.5;flex:1}
.cf{margin-top:16px;padding-top:12px;border-top:1px solid var(--rule-l);
    display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.cb{font-family:var(--mono);font-size:.6rem;letter-spacing:.07em;color:var(--steel)}
.co{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--steel);white-space:nowrap}
/* About → Origin: three paragraphs, so the cell takes the whole row and the
   remaining two share the next. A 3-up row would stretch to the tallest cell
   and leave two-thirds of it empty. */
.grid3.g2{grid-template-columns:1fr 1fr}
.cell.span-all{grid-column:1/-1}
.cell .v p{margin:0 0 10px}
.cell .v p:last-child{margin-bottom:0}
@media(max-width:760px){.grid3.g2{grid-template-columns:1fr}}
.cat10 .cell{min-height:150px}
/* the two cards that close the last row of the homepage catalogue */
.cat10 .cell.act{background:var(--foodsafe-l)}
.cat10 .cell.act:hover{background:#D6E5F3}
.cat10 .cell.act .k{color:var(--foodsafe)}
.nl .lang.off{opacity:.42;cursor:default}

/* ── ⭐ SEND-US-THE-NAMEPLATE (every category page) ─ */
.nplate{margin:0;border-top:none}
.np{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:center}
.np p{font-size:.94rem;color:var(--ink);max-width:60ch}
.npdraw svg{max-width:280px;margin-left:auto}

/* ── ⭐ ANIMATION RIG on category / article pages ─── */
.animgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:0}
.animgrid>.sheet{border-right:1px solid var(--rule-d)}
.animgrid .sheet{padding:20px 18px}
.pane{background:var(--carbon);padding:20px 20px 18px;display:flex;flex-direction:column}
.pane .g:first-of-type{padding-top:0;border-top:none}
.pane .verdict{min-height:96px}

/* ── CATEGORY PREV/NEXT ──────────────────────────── */
.catnav{display:grid;grid-template-columns:1fr auto 1fr;gap:0;
        border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.catnav a{background:#fff;padding:18px 20px;text-decoration:none;color:var(--graphite);
          font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:10px;
          border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.catnav a:hover{background:var(--surface);color:var(--foodsafe)}
.catnav a span{font-family:var(--mono);font-size:.72rem;color:var(--foodsafe)}
.catnav a:last-child{justify-content:flex-end}
.catnav .mid{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
             color:var(--steel);font-weight:500;justify-content:center}

/* ── ⭐ KNOWLEDGE ARTICLES ─────────────────────────── */
.art{max-width:840px}
.meta{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;padding-top:16px;
      border-top:1px solid #2A3037;font-family:var(--mono);font-size:.645rem;
      letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.ah{display:flex;align-items:baseline;gap:14px;font-size:1.35rem;margin:44px 0 4px;
    padding-bottom:11px;border-bottom:2px solid var(--graphite)}
.ah .an{font-family:var(--mono);font-size:.78rem;color:var(--foodsafe);font-weight:600;flex:none}
.ah em{font-style:italic;color:var(--foodsafe)}
.asec{padding-top:18px}
.asec p{font-size:1rem;color:var(--ink);max-width:70ch}
.asec table{margin:18px 0 4px}
.asec .box p,.asec .quote p{max-width:none}
.nk{border-left:3px solid var(--steel);padding-left:22px;margin-top:6px;background:var(--paper)}
.nk p:last-child{margin-bottom:0}
.pn{font-family:var(--mono);color:var(--foodsafe);font-weight:500;font-size:.94em}
.steps{margin:20px 0}
.st{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--rule-l)}
.st:first-child{border-top:none}
.st>div{font-size:.95rem;color:var(--ink);line-height:1.55}
.sec-dark .st>div{color:#AEB6BD}
.st .call{margin-top:2px}
.qa{padding:16px 0;border-top:1px solid var(--rule)}
.qa:first-child{border-top:none;padding-top:0}
.qa h3{margin-bottom:6px}
.qa p{font-size:.93rem;color:var(--steel);margin:0;max-width:74ch}
.srct{border:none}
.srct td.s{font-family:var(--mono);font-size:.7rem;color:var(--steel);line-height:1.45}
.relg .cell{text-decoration:none;display:flex;flex-direction:column}
.relg .cell:hover{background:var(--surface)}
.sec-dark .relg .cell:hover{background:var(--carbon)}
.relg .rdm{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--foodsafe);
           margin-top:auto;padding-top:14px}

/* ⚠ PRE-EXISTING BUG IN THE ORIGINAL BUILD: five inline grids on the homepage
   never collapsed → 123px horizontal overflow on every phone. */
@media(max-width:940px){
  .rig>div[style*="grid-template-columns"]{display:block!important}
  .sheet{overflow-x:auto}
  .cgrid{grid-template-columns:1fr}
  .animgrid{grid-template-columns:1fr}
  .catnav{grid-template-columns:1fr}
  .catnav a:last-child{justify-content:flex-start}
  .relg{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .np{grid-template-columns:1fr;gap:22px}
  .npdraw svg{margin:0 auto}
  .two{grid-template-columns:1fr;gap:30px}
  .ah{font-size:1.15rem}
}
@media(max-width:640px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .ribbon{padding:18px 0}
  .bw{min-width:140px;padding:0 20px}
}