/* ═══════════════════════════════════════════════════
   THE DUTCH MRO — design system
   Colours derived from the plant itself.
   ═══════════════════════════════════════════════════ */
:root{
  --graphite:#04051C;   /* NEAR-BLACK NAVY — the dark surface (owner, 25 Sep 2026). The logo keeps its own navy. */
  --carbon:#0B0C2A;     /* one step up, for dark-section panels */
  --rule-d:#1B1E46;     /* the lattice rule INSIDE a dark section */
  --accent:#B85F1E;     /* DUTCH ORANGE on light surfaces — buttons, links, numbering. Brand, not instrument. */
  --accent-lt:#E08A4A;  /* the orange on dark surfaces */
  --accent-btn:#D4712E; /* the orange of the primary button */
  --ink:#2A2F6E;
  --steel:#767F88;      /* stainless */
  --steel-l:#9AA3AB;
  --rule:#C4C9D2;
  --rule-l:#D5D9E0;
  --surface:#E0E3EA;    /* the deeper light surface: tinted sections */
  --paper:#F7F8FA;
  --white:#ECEEF3;      /* the page: grey-navy paper, never pure white. Cards and fields are #fff and stand on it. */
  --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 #2A2F6E}
.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(--accent-lt)}
.nl .lang{font-family:var(--mono);font-size:.7rem;color:var(--steel);
          border:1px solid #33397A;padding:5px 9px;border-bottom:1px solid #33397A}
.nl .lang:hover{color:#fff;border-color:var(--steel)}
.burger{display:none;background:none;border:1px solid #33397A;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:var(--white);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:#33397A}
.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:#33397A;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:#33397A}
.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:#33397A}
.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:#2A2F6E}
.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:#2A2F6E}
.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:#2A2F6E;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 ─────── */
.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(--accent);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 .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:#2A2F6E}
.btn-s{background:#fff;color:var(--graphite)}
.btn-s:hover{background:var(--surface)}
.btn-wa{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff}
.btn-wa:hover{background:#B85F1E}
.sec-dark .btn-s{background:transparent;color:#fff;border-color:#4A545D}
.sec-dark .btn-s:hover{background:#2A2F6E}
.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(--accent-btn);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 #2A2F6E}
.tblock>div{padding:17px 0;padding-right:20px;border-left:1px solid #2A2F6E;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 #2A2F6E;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 #2A2F6E}
  .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 #2A2F6E}
  .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,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. */
.cell .v p{margin:0 0 10px}
.cell .v p:last-child{margin-bottom:0}
.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 #2A2F6E;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}

/* footer: the entity row aligns with the columns above it */
@media(min-width:941px){.tblock{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.tblock .v small{font-family:var(--mono);font-size:.68rem;font-weight:400;color:#C3CAD1;margin-left:8px;letter-spacing:.06em}

/* ⚠ 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}
}

/* ══ 24 SEP 2026 LAYOUT ═══════════════════════════════════════════════ */
html{font-size:106%}
.eyebrow{font-size:.72rem}
.sec-h p,.lede{color:var(--ink)}
.sec-dark .sec-h p,.sec-dark .lede{color:#C3CAD1}
.pane .verdict{min-height:176px}   /* three lines at the larger type size, so a state change never reflows the rig */
/* brand in the chrome */
.logo{gap:0;padding:6px 0}
.logo img{height:46px;width:auto;display:block}
.logo .m{display:none}
.nv .tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:#8A949E;text-transform:uppercase;
  margin-left:18px;padding-left:18px;border-left:1px solid var(--rule-d)}
footer .logo img{height:54px}
.fbot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.fbot .stamp{height:78px;opacity:.85}.fbot .stamp svg{height:100%;width:auto;display:block}
.nl a.on{color:var(--accent-lt)}                       /* the current page reads orange in the header */
@media(max-width:1100px){.nv .tag{display:none}}
@media(max-width:940px){
 /* the tagline stays on phones: two small lines beside the logo */
 .nv{gap:10px}.logo{flex:none}
 .nv .tag{display:block;flex:1;min-width:0;font-size:.5rem;letter-spacing:.08em;line-height:1.4;margin-left:0;padding-left:10px;white-space:normal;max-width:150px}
 /* the open menu: centred, full-width rows, the whole row is the link */
 .nl.open{align-items:stretch;padding:6px 0 4px;gap:0}
 .nl.open a{display:block;width:100%;text-align:center;padding:15px 20px;font-size:1rem;border-bottom:1px solid var(--rule-d);border-radius:0}
 .nl.open a:last-child{border-bottom:none}
 .nl.open a.on{color:var(--accent-lt);background:rgba(224,138,74,.06)}
}
/* hero */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:54px;align-items:center}
.hero h1{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.12;margin-top:14px}
.hero .lede{margin-top:18px}
.hero .btns{margin-top:26px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:34px;border-top:1px solid var(--rule-d)}
.facts div{padding:14px 8px 0;text-align:center;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#AEB6BD;border-left:1px solid var(--rule-d)}
.facts div:first-child{border-left:none}
.facts div b{display:block;color:#fff;font-family:var(--sans);font-size:1.05rem;letter-spacing:0;text-transform:none;font-weight:600;margin-bottom:3px}
.photo{border:1px dashed #4A548A;background:var(--carbon);min-height:380px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:#6B757E;text-transform:uppercase;line-height:1.9}
.photo.lt{border-color:var(--rule);background:var(--surface);color:var(--steel);min-height:220px}
.photo img,.photo picture{width:100%;height:100%;object-fit:cover;display:block}
.photos3 .photo{aspect-ratio:4/3;min-height:0;padding:0}
.hero .photo{aspect-ratio:4/3;min-height:0}
.photo[data-photo="owner"]{aspect-ratio:4/5;min-height:0;max-width:380px;margin-left:auto}
.photo[data-photo="owner"] img{object-position:center 15%}
@media(max-width:940px){.photo[data-photo="owner"]{margin:0 auto}}
/* how it works */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.steps4 div{background:#fff;padding:20px 20px 18px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.steps4 .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--accent);margin-bottom:12px}
.steps4 h3{font-size:1.05rem;margin-bottom:8px}
.steps4 p{font-size:.9rem;color:var(--ink);margin:0}
.steps4 .r{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--steel);margin-top:14px;padding-top:10px;border-top:1px solid var(--rule-l)}
/* the process line */
.linewrap{border:1px solid var(--rule);background:#fff;padding:18px 18px 10px;position:relative}
.linewrap .zone{position:absolute;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--steel)}
.linewrap .zone.tr{top:10px;right:14px}.linewrap .zone.bl{bottom:8px;left:14px}
.lrows{display:none}
.lconn{display:block;width:100%;height:auto;margin:0}
.lrows svg{display:block}
.line .hot{cursor:pointer}
.line .hot circle{fill:#fff;stroke:var(--accent);stroke-width:1.6;transition:.12s}
.line .hot text{fill:var(--accent);font-family:var(--mono);font-size:10px;font-weight:600;text-anchor:middle;pointer-events:none}
.line .hot:hover circle,.line .hot.on circle{fill:var(--accent)}
.line .hot:hover text,.line .hot.on text{fill:#fff}
.legend{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-left:1px solid var(--rule);border-top:1px solid var(--rule)}
.legend>div{background:#fff;padding:20px 20px 16px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.legend .gh{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--steel);margin-bottom:4px}
.legend .gd{font-size:.82rem;color:var(--steel);margin-bottom:14px;min-height:2.6em}
.legend a{display:flex;gap:10px;align-items:baseline;text-decoration:none;color:var(--graphite);padding:8px 0;border-top:1px solid var(--rule-l);font-size:.92rem;font-weight:600}
.legend a:hover,.legend a.on{color:var(--accent)}
.legend a span{font-family:var(--mono);font-size:.68rem;color:var(--accent);font-weight:600;flex:none;width:22px}
.legend a i{font-style:normal;font-weight:400;font-size:.78rem;color:var(--steel);display:block;margin-top:2px}
/* parts index */
.ghead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:34px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--graphite)}
.ghead:first-child{margin-top:0}
.ghead h2{font-size:1.35rem;margin:0}
.ghead p{color:var(--steel);font-size:.92rem;margin:0}
.ghead .gn{font-family:var(--mono);font-size:.72rem;color:var(--accent);font-weight:600}
.pgrid2{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.pc{background:#fff;display:grid;grid-template-columns:104px 1fr;gap:16px;padding:18px;text-decoration:none;color:inherit;
    border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);transition:background .12s}
.pc:hover{background:var(--surface)}
.pc .img{background:var(--paper);border:1px solid var(--rule-l);padding:8px;aspect-ratio:1/1;display:flex;align-items:center;align-self:start}
.pc .img svg{width:100%;height:auto}
.pc .cn{font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--accent);margin-bottom:8px;display:flex;justify-content:space-between}
.pc h3{font-size:1.05rem;margin-bottom:4px;line-height:1.25}
.pc .ex{font-size:.82rem;color:var(--ink);line-height:1.5}
.pc .cf{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--steel)}
.pc:hover .cf{color:var(--accent)}
.photos3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.dnote{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin:10px 0 18px}
/* ── the finish: motion, depth, focus ───────────────────────────────── */
:focus-visible{outline:2px solid var(--accent-lt);outline-offset:3px}
.btn{transition:background .16s,transform .16s,box-shadow .16s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(14,16,73,.16)}
.btn:active{transform:none;box-shadow:none}
.nl a{transition:color .14s,border-color .14s}
.fnav a{transition:color .14s,transform .14s}.fnav a:hover{transform:translateX(2px)}
.pc,.steps4 div,.legend>div,.ccard,.cell,.kit{transition:transform .22s ease,box-shadow .22s ease,background .18s,filter .18s}
.pc:hover,a.cell:hover,.pcard:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(14,16,73,.10);position:relative;z-index:1}
/* the numbered cells (how it works, the annual kit): lift, grow, brighten */
.steps4 div:hover,.grid3 .cell:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 34px rgba(14,16,73,.14);background:#fff;filter:brightness(1.03);position:relative;z-index:1}
.sec-dark .grid3 .cell:hover{background:var(--carbon);filter:brightness(1.12)}
/* photographs: the image grows inside its frame, the frame stays put */
.photo{overflow:hidden}.photo img{transition:transform .6s ease}.photo:hover img{transform:scale(1.05)}
/* the process line draws itself when scrolled into view, then the callouts appear in order */
.linewrap.armed .line .hot{opacity:0;transition:opacity .35s ease}
.linewrap.draw .line .hot{opacity:1;transition-delay:calc(1.05s + var(--n) * .11s)}
.linewrap.armed :is(.line,.lconn) :is(rect,circle,line,path):not(.hot *){stroke-dasharray:1200;stroke-dashoffset:1200}
.linewrap.draw :is(.line,.lconn) :is(rect,circle,line,path):not(.hot *){animation:lddraw .4s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--i) * .7ms)}
.linewrap.armed .line text{opacity:0;transition:opacity .4s}.linewrap.draw .line text{opacity:1;transition-delay:.9s}
@media(prefers-reduced-motion:reduce){.line .hot{opacity:1}.linewrap.armed .line *{stroke-dashoffset:0;opacity:1;animation:none}}
.pcard{transition:transform .18s ease,box-shadow .18s ease}
.line .hot circle{transition:.16s}.line .hot:hover circle{r:13}
.sec-dark{background:radial-gradient(1200px 600px at 85% -10%,rgba(212,113,46,.14),transparent 60%),var(--graphite)}
nav{transition:box-shadow .2s}nav.scrolled{box-shadow:0 6px 24px rgba(14,16,73,.28)}
table tr:hover td{background:rgba(14,86,160,.035)}
::selection{background:var(--accent);color:#fff}
/* the light surfaces: cards, fields and the drawing sheet are white and stand on the grey-navy page */
.steps4 div,.legend>div,.pc,.kit,.linewrap,.pcard,.ccard,.grid3 .cell,.sec-tint .cell{background:#fff}
.ribbon{background:var(--white)}
.bw.lg img{height:26px;width:auto;max-width:132px;display:block;margin:0 auto 6px;opacity:.9}
.bw.lg{min-width:150px}
.rib-tm{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--steel);margin-top:10px;text-transform:uppercase}
/* reveal on scroll — sections rise 14px as they enter; off under reduced motion */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.btn:hover,.pc:hover,a.cell:hover{transform:none}}
@media(max-width:940px){
 .hero,.steps4,.legend,.pgrid2,.photos3{grid-template-columns:1fr}
 .hero{gap:28px;text-align:center}
 .hero .btns{justify-content:center}
 .facts{grid-template-columns:1fr 1fr}.facts div:nth-child(3){border-left:none}
 .photo{min-height:220px;margin:0 auto;width:100%}
 .photos3{gap:10px}.photo.lt{min-height:150px}
 .pc{grid-template-columns:88px 1fr;padding:14px}
 .ghead{gap:4px;margin-top:28px}.ghead .gn{width:100%}
 .linewrap{padding:26px 10px 8px;overflow:hidden}
 .linewrap svg.ld{display:none}.lrows{display:block}.lrows svg{width:100%;height:auto;display:block}
 .linewrap .zone.tr,.linewrap .zone.bl{display:none}
 .legend>div{padding:16px 18px 12px}.legend .gd{min-height:0}
 .steps4 div{padding:16px 18px}
 .sec-h{margin-bottom:22px}
 .logo img{height:36px}
 .fbot{flex-direction:column;align-items:flex-start;gap:18px}.fbot .stamp{height:70px}
}

/* ── the quotation form ─────────────────────────────────────────────── */
.form{background:var(--surface);border:1px solid var(--rule);padding:22px 24px 24px}
.form .fh{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:600;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.form .fh .fn{font-family:var(--mono);font-size:.7rem;color:var(--accent);font-weight:600}
.form .fh.second{margin-top:18px}
.form .fr{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form label{font-size:.84rem;font-weight:600;color:var(--graphite)}
.form label i{font-style:normal;color:var(--signal)}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{
  width:100%;background:#fff;border:1px solid #C3CAD1;padding:11px 12px;font:400 .95rem var(--sans);color:var(--graphite);
  border-radius:0;transition:border-color .14s,box-shadow .14s;-webkit-appearance:none;appearance:none}
.form input::placeholder,.form textarea::placeholder{color:#9AA3AB}
.form select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E1049' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;padding-right:34px;cursor:pointer}
.form select:invalid,.form select.empty{color:#9AA3AB}
.form textarea{min-height:130px;resize:vertical;line-height:1.5}
.form :is(input,select,textarea):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,95,30,.16)}
.form :is(input,select,textarea).bad{border-color:var(--signal);box-shadow:0 0 0 3px rgba(200,67,27,.12)}
.form .fhint{font-size:.8rem;color:var(--steel);line-height:1.45}
.form .fchk{display:flex;gap:18px;flex-wrap:wrap}
.form .fchk label{display:flex;align-items:center;gap:7px;font-weight:500;cursor:pointer}
.form .fchk input{accent-color:var(--accent);width:16px;height:16px}
.form .fa{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px;padding-top:18px;border-top:1px solid var(--rule)}
.form .fnote{font-size:.8rem;color:var(--steel)}
.form .hp{position:absolute;left:-9999px}
.form .ferr{display:none;font-size:.84rem;color:var(--signal);font-weight:600;width:100%}
@media(max-width:640px){.form{padding:16px}.form .fr{grid-template-columns:1fr;gap:0}}