/* ==== brand.css ==== */
/* ============================================================
   brand.css — DE ENIGE BRON VAN WAARHEID VOOR HET MERK-DESIGN.
   Renier Hydraulics — De Buf-look: industrieel, strak, beeldgedreven.

   Vaste stijl (HARD):
   - Nooit gekleurde schaduwen, geen box-shadow als styling-truc.
   - Geen afgeronde hoeken (--radius: 0). Geen pill-shapes.
   - Geen decoratieve borders; enkel functionele haarlijnen (--line).
   - Eén accent: rood #ED2F2F. Wit ↔ #f2f2f2 secties voor ritme.
   - Signatuur: skew-knop (parallellogram) + diagonale clip-corner.
   - Alle transities 0.4s (--dur), micro 0.2s (--dur-fast).

   ZOWEL de frontend (via main.css) ALS de CMS-admin laden dit bestand.
   Eén plek wijzigen = frontend én CMS volgen.
   ============================================================ */

:root {
    /* ── Kleur ── */
    --brand:        #ed2f2f;   /* primair rood — het ene accent */
    --brand-dark:   #d01b0b;   /* hover/active */
    --steel-green:  #1f6b3a;   /* Steelwrist-accent (enkel tiltrotators) */
    --steel-black:  #16181b;   /* Steelwrist-accent (enkel tiltrotators) */
    --ink:          #1f1e1e;   /* zware titels */
    --body:         #4d4d4d;   /* lopende tekst — nooit puur zwart */
    --muted:        #797878;
    --line:         #e0e0e0;   /* functionele haarlijn */
    --bg:           #ffffff;
    --bg-soft:      #f2f2f2;   /* afwisselende sectie-achtergrond */
    --bg-dark:      #16181b;

    /* ── Typografie ── */
    --font-head:    'Unbounded', system-ui, -apple-system, sans-serif;  /* koppen, statements, specs */
    --font-body:    'Montserrat', system-ui, -apple-system, sans-serif; /* lopende tekst, UI, labels */

    /* ── Ruimte ── */
    --maxw:         1180px;
    --measure:      600px;     /* max. leesbare tekstbreedte */
    --gutter:       clamp(1.25rem, 4vw, 3.75rem);
    /* ── Sectie-ritme (site-brede schaal, "royaal") ──
       Eén vaste verticale ademschaal voor álle secties. Kies per sectie de maat
       via een utility-class (.sec / .sec--sm / .sec--lg / .sec--xl) of het token.
       clamp(min, vw, max): min = mobiel, max = groot scherm, vw = vloeiend ertussen. */
    --sec-sm:       clamp(3rem, 6vw, 5rem);        /* compacte sectie / tussenblok */
    --sec:          clamp(5.5rem, 11vw, 10rem);    /* STANDAARD sectie */
    --sec-lg:       clamp(7rem, 14vw, 14rem);      /* ruim: home/werkgebied-blokken */
    --sec-xl:       clamp(9rem, 18vw, 20rem);      /* statement / grote CTA */

    /* Aliassen zodat bestaande regels blijven werken (nu op de royale schaal). */
    --sec-pad:      var(--sec);
    --sec-pad-xl:   var(--sec-xl);

    /* ── Vorm ── */
    --radius:       0;         /* HARD: geen afgeronde hoeken */
    --notch:        22px;      /* clip-corner hap (schaal 20–160) */
    --skew:         -10deg;    /* skew-knop hoek */

    /* ── Motion ── */
    --dur:          .4s;
    --dur-fast:     .2s;
    --ease-out:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-inout:   cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

/* ── Basis-typografie (gedeeld) ── */
body {
    font-family: var(--font-body);
    color: var(--body);
    line-height: 1.56;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
    font-family: var(--font-head);
    color: var(--ink);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.01em;
}
a { color: var(--brand); transition: color var(--dur) var(--ease-out); }
p { margin-bottom: 1.5rem; }
p:last-child { margin-bottom: 0; }
/* Vet erft de tekstkleur (leesbaar op licht én donker); enkel zwaarder gewicht.
   Op lichte tekst geven we via .prose/paragraaf-context desgewenst extra nadruk. */
strong, b { color: inherit; font-weight: 700; }

/* Media zijn volledig recht (eigen vormtaal — geen afgesneden hoek).
   .clip-corner blijft als klasse bestaan maar snijdt niets meer af. */
.clip-corner { clip-path: none; }

/* ── Knoppen (gedeeld door frontend + CMS) ──
   Signatuur skew-knop: de knop staat schuin (parallellogram),
   het label wordt terug-geskewd zodat de tekst recht blijft. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    padding: .95rem 1.75rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    transform: skewX(var(--skew));
    transition: background var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                opacity var(--dur) var(--ease-out);
}
.btn > * { transform: skewX(calc(-1 * var(--skew))); color: inherit; white-space: nowrap; } /* label recht + op één regel */
/* Knoppen-groep: ademruimte via `gap` (zowel horizontaal als verticaal bij
   wrappen). BASIS hier in brand.css zodat ELKE pagina hetzelfde gedrag heeft —
   niet enkel pagina's die home.css laden (dat gaf gestapelde knoppen zonder gap
   op o.a. aanbouwdelen). Géén margin-hack meer. Home-hero overschrijft naar
   nowrap in home.css. */
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
/* Onder de tabletgrens is de site één kolom. Een lang knoplabel (bv. "Bekijk de
   elektrische modellen") past daar niet op één regel; met nowrap duwt het de
   hele kolom breder dan het scherm en krijgt de pagina een horizontale
   schuifbalk. Daar mag het label dus breken. */
@media (max-width: 760px) {
    .btn { max-width: 100%; }
    .btn > * { white-space: normal; }
}
/* Knop-varianten. Voorkeur: rood of wit — nooit zwart. De hover-fill wordt door
   de fill-sweep (.btn::before, main.css) verzorgd in merkkleur; hier enkel de
   rusttoestand + tekstkleur. */
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { color: #fff; }
/* btn-dark bestaat nog voor uitzonderingen, maar in merkrood i.p.v. zwart. */
.btn-dark { background: var(--brand); color: #fff; }
.btn-dark:hover { color: #fff; }
.btn-light { background: #fff; color: var(--brand); }
.btn-light:hover { color: #fff; }
/* Outline: rode rand + rode tekst; sweep vult rood met witte tekst bij hover. */
.btn-outline { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.btn-outline:hover { color: #fff; }
/* Outline op donkere/rode achtergrond (witte rand). */
.btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.btn-ghost:hover { color: #fff; }
/* Steelwrist-uitzondering (enkel tiltrotators) */
.btn-steel { background: var(--steel-green); color: #fff; }
.btn-steel:hover { background: var(--steel-black); color: #fff; }

/* Niet-skew variant voor tekstlinks/kleine knoppen */
.btn-plain { transform: none; }
.btn-plain > * { transform: none; }

/* ── "De beller is sneller!"-accent (gedeeld, sitebreed) ──
   Neemt de knop-VORM (schuin parallellogram) maar is géén knop: puur een subtiel
   accent dat druk opbouwt. Absoluut linksboven in een CTA-container geplaatst.
   De container moet position:relative + overflow:hidden hebben (of ruimte laten).
   Kleur past zich aan de achtergrond aan via modifiers hieronder. */
.cta-caller {
    position: absolute; top: 0; left: 0; z-index: 2;
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-head); font-weight: 700;
    font-size: .72rem; letter-spacing: .5px; text-transform: uppercase;
    /* Ruimere linkerpadding: de skew scheert de linkerbovenhoek, dus de tekst
       moet verder van die rand starten (anders wordt de 1e letter afgesneden). */
    padding: .4rem 1.1rem .4rem 1.9rem; white-space: nowrap;
    transform: skewX(var(--skew)); transform-origin: left top;
    margin: 0; pointer-events: none;
}
.cta-caller > * { display: inline-block; transform: skewX(calc(-1 * var(--skew))); }
/* Op DONKERE/RODE achtergrond: subtiel wit-transparant vlak, witte tekst. */
.cta-caller { background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); }
/* Op LICHTE achtergrond: subtiel rood vlak, rode tekst — nooit zwart. */
.cta-caller--light { background: rgba(237,47,47,.1); color: var(--brand); }

/* ── Presentatie-varianten ─────────────────────────────────────────────────
   DEZELFDE tekst ("De beller is sneller!") maar op verschillende manieren in
   beeld gebracht: andere positie, vorm of stijl per sectie. De boodschap
   verandert nooit — enkel de weergave. */

/* Variant: PULSE — kloppend bolletje vóór de tekst (zoals de 24/7-belknop).
   Suggereert "nu, live". Zelfde chip, linksboven. */
.cta-caller--pulse { gap: .55rem; }
.cta-caller--pulse::before {
    content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%;
    background: currentColor; transform: skewX(calc(-1 * var(--skew)));
    animation: caller-pulse 1.8s var(--ease-out) infinite;
}
@keyframes caller-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
    70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Variant: BR — dezelfde chip maar in de RECHTERONDERHOEK i.p.v. linksboven,
   met de skew-hoek naar de andere kant. */
.cta-caller--br {
    top: auto; left: auto; bottom: 0; right: 0;
    padding: .4rem 1.9rem .4rem 1.1rem;
    transform-origin: right bottom;
}

/* Variant: UNDERLINE — géén vlak, enkel de tekst met een rood/wit streepje
   eronder. Subtieler; bedoeld in de flow (met --inline), niet als hoekchip. */
.cta-caller--underline {
    background: none;
    padding: 0 0 .3rem; border-bottom: 2px solid currentColor;
}

/* Variant: INLINE — niet absoluut: staat mee in de flow (bv. gecentreerd boven
   de titel in een text-align:center sectie). Combineerbaar met --underline. */
.cta-caller--inline {
    position: static; display: inline-flex; margin: 0 0 1.25rem;
    transform: skewX(var(--skew)); transform-origin: center;
}

/* ── Losse "tussen-de-tekst"-varianten (staan in de flow, niet op een CTA) ──
   Deze mogen in willekeurige content-secties, als accent tussen alinea's. */

/* MARK — grotere, zelfverzekerde regel met een rood streepje ervoor. Voor op
   LICHTE achtergrond, tussen tekstblokken. Schuine huisstijl-toets. */
.caller-mark {
    display: inline-flex; align-items: center; gap: .7rem; margin: 1.5rem 0;
    font-family: var(--font-head); font-weight: 800;
    font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: -.01em;
    color: var(--ink); transform: skewX(var(--skew)); transform-origin: left center;
}
.caller-mark > * { display: inline-block; transform: skewX(calc(-1 * var(--skew))); }
.caller-mark::before {
    content: ""; width: 30px; height: 4px; flex: none; background: var(--brand);
    transform: skewX(calc(-1 * var(--skew)));
}
.caller-mark em { font-style: normal; color: var(--brand); }


/* (verwijderd) .caller-note-meldingsvakje — vervangen door de knop-stijl
   (.caller-btn), zodat de "de beller is sneller"-melding overal dezelfde
   huisstijl-knopvorm heeft als op de productpagina's. */

/* ── CALLER-BTN — de boodschap in de KNOP-stijl (skew-parallellogram) ─────────
   Zelfde vormtaal als .btn (schuin, Unbounded, haakse hoeken) maar als subtiel
   accent náást de echte actieknoppen. Klikbaar naar bellen. Géén vol rood vlak:
   een outline-variant zodat het niet met de primaire "Bel Arno"-knop concurreert
   maar wel duidelijk in dezelfde familie zit. */
.caller-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-head); font-weight: 700; font-size: .82rem;
    text-transform: uppercase; letter-spacing: 1px; text-decoration: none;
    padding: .7rem 1.4rem; color: var(--brand);
    background: transparent; box-shadow: inset 0 0 0 2px var(--brand);
    transform: skewX(var(--skew));
    transition: color var(--dur) var(--ease-out);
    position: relative; z-index: 0; overflow: hidden;
}
.caller-btn > * { transform: skewX(calc(-1 * var(--skew))); position: relative; z-index: 1; }
/* fill-sweep zoals de echte knoppen (rood in, witte tekst) */
.caller-btn::before {
    content: ""; position: absolute; inset: 0; z-index: 0; background: var(--brand);
    clip-path: inset(0 100% 0 0); transition: clip-path var(--dur) var(--ease-out);
}
.caller-btn:hover::before { clip-path: inset(0 0 0 0); }
.caller-btn:hover { color: #fff; }
.caller-btn svg { width: 15px; height: 15px; flex: none; }
/* Kleine "phone"-pulse-stip i.p.v. icoon (optioneel, subtieler). */
.caller-btn__dot {
    width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
}
/* Wide: over de volle kolombreedte, gecentreerd (bv. onder een beschrijving). */
.caller-btn--wide { display: flex; width: 100%; justify-content: center; margin-top: 1.4rem; }
/* Zichtbaarheid per viewport (sitebreed, in brand.css zodat het overal werkt).
   --desktop: enkel ≥980px · --mobile: enkel <980px. Zo kunnen we per plek kiezen
   waar de bel-knop hoort (bv. onder de beschrijving op desktop, in de melding-
   plek op mobiel). */
@media (max-width: 980px) { .caller-btn--desktop { display: none !important; } }
@media (min-width: 981px) { .caller-btn--mobile  { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .caller-btn::before { transition: none; } }

/* ── Formuliervelden (gedeeld) — haakse hoeken ── */
input, textarea, select {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: .8rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--brand);
}

/* ── Reduced motion respecteren ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==== fonts.css ==== */
/* fonts.css — lokaal gehoste webfonts (geen render-blocking Google-request meer).
 *
 * Unbounded (koppen) en Montserrat (lopende tekst) worden als variable-font woff2
 * lokaal geladen. Eén bestand per familie dekt het hele gewichtsbereik. Met
 * font-display:swap verschijnt de tekst meteen in de fallback en wisselt naadloos
 * naar het webfont zodra het geladen is → snellere First Contentful Paint.
 *
 * Bestanden: assets/fonts/*.woff2 (latin-subset, uit Google Fonts).
 * De families/gewichten komen 1-op-1 overeen met wat brand-identity.css verwacht
 * (--font-head: Unbounded, --font-body: Montserrat).
 */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600 900;              /* variable: dekt 600-900 (koppen/statements) */
  font-display: swap;
  src: url('../fonts/unbounded-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;              /* variable: dekt 400-700 (tekst/UI/labels) */
  font-display: swap;
  src: url('../fonts/montserrat-var.woff2') format('woff2');
}


/* ==== main.css ==== */
/* ════════════════════════════════════════════
   Renier Hydraulics — frontend layout (De Buf-look).
   Merk-tokens (kleuren/fonts/knoppen) komen uit brand.css — DE bron van
   waarheid die ook de CMS-admin laadt. Pas het merk daar aan.
   Vaste stijl: geen schaduwen, geen ronde hoeken, één rood accent.
   ════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--body);
    background: var(--bg);
    line-height: 1.56;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* ════════ Header / navigatie ════════
   Sticky, wit. Op pagina's met een full-bleed hero kan .header--overlay
   de nav transparant over de hero leggen tot bij het scrollen. */
/* ── Bovenbalk (laag 1): subtiel rood, 24/7-service + contacteer Ruben ──
   Sticky bovenaan; verbergt bij naar-beneden scrollen en komt terug bij
   omhoog scrollen. Animatie via transform (géén layout-verandering → geen
   jitter). De witte header (laag 2) kleeft eronder en volgt de topbar-hoogte. */
.topbar {
    background: var(--brand); color: #fff; font-size: .88rem;
    position: sticky; top: 0; z-index: 101;
    transform: translateY(0);
    transition: transform var(--dur) var(--ease-out);
    will-change: transform;
}
body.topbar-hidden .topbar { transform: translateY(-100%); }
/* Op mobiel schuift de rode topbar smooth weg bij naar-beneden scrollen en komt
   terug bij omhoog scrollen — identiek aan desktop. De transform-animatie hierboven
   is gedeeld; er zijn geen mobiele overrides meer die het hide-gedrag tegenhouden. */
.topbar__inner { max-width: var(--maxw); margin: 0 auto; padding: .45rem var(--gutter); display: flex; align-items: center; justify-content: flex-end; gap: 1.75rem; }
.topbar a { position: relative; }
.topbar a + a::before { content: ''; position: absolute; left: -.9rem; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: rgba(255,255,255,.35); }
.topbar a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.topbar a:hover { opacity: .85; }
.topbar__label { opacity: .85; }
.topbar .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse-dot 1.8s var(--ease-out) infinite; }
@media (max-width: 700px) {
    .topbar__label { display: none; }
    .topbar { font-size: .72rem; }
    /* 5 links: krappere gap + geen wrap; scroll horizontaal als het écht niet past. */
    .topbar__inner {
        justify-content: flex-start; gap: 1rem;
        flex-wrap: nowrap; overflow-x: auto; white-space: nowrap;
        scrollbar-width: none;
    }
    .topbar__inner::-webkit-scrollbar { display: none; }
    .topbar a { flex: none; }
    .topbar a + a::before { left: -.5rem; }
}
@media (max-width: 420px) {
    .topbar { font-size: .68rem; }
    .topbar__inner { gap: .8rem; }
    .topbar a + a::before { display: none; }   /* streepjes weg op heel smal */
}

.site-header {
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    /* Kleeft ONDER de zichtbare topbar; schuift mee naar de top zodra de
       topbar verborgen is. --topbar-h wordt door JS gezet (echte hoogte). */
    top: var(--topbar-h, 2.6rem);
    z-index: 100;
    transition: top var(--dur) var(--ease-out),
                background var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}
body.topbar-hidden .site-header { top: 0; }
/* Mobiel volgt desktop: zodra de topbar verborgen is, schuift de witte header
   mee naar top:0 (de transition op `top` maakt dat smooth). */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem var(--gutter);
    max-width: var(--maxw);
    margin: 0 auto;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: none;
    font-family: var(--font-head);
    font-weight: 800;
    text-decoration: none;
    color: var(--ink);
    font-size: 1.05rem;
    letter-spacing: -.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.logo__mark { height: 34px; width: auto; display: block; flex: none; }
.logo span { color: var(--brand); }
/* Wordmark verdwijnt vroeger zodat het menu ademruimte houdt. */
@media (max-width: 1340px) { .logo__text { display: none; } }

/* ── Hoofdmenu ── */
.nav-menu {
    display: flex;
    gap: 1.35rem;
    list-style: none;
    align-items: center;
    margin-left: auto;
    white-space: nowrap;
}
.nav-menu > li { position: relative; }
.nav-menu > li > a:not(.btn):not(.btn-emergency) {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    text-decoration: none;
    color: var(--ink);
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .2px;
    padding: .4rem 0;
    transition: color var(--dur) var(--ease-out);
}
.nav-menu > li > a:not(.btn):not(.btn-emergency):hover,
.nav-menu > li.is-open > a:not(.btn) { color: var(--brand); }
.nav-menu .caret { width: 10px; height: 10px; transition: transform var(--dur) var(--ease-out); }
.nav-menu > li.is-open .caret { transform: rotate(180deg); }

/* ── Dropdowns ── */
.has-dropdown > .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--line);
    padding: .5rem;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                visibility var(--dur);
    z-index: 120;
}
.has-dropdown:hover > .dropdown,
.has-dropdown.is-open > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .7rem;
    text-decoration: none;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 500;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.dropdown a:hover { background: var(--bg-soft); color: var(--brand); }
.dropdown .menu-icon { width: 22px; height: 22px; flex: none; color: currentColor; }

/* ── Nav-acties (rechts) ── */
.nav-actions { display: flex; align-items: center; gap: .75rem; margin-left: .5rem; }

/* 24/7 service-knop → Ruben (rode bol) */
.btn-emergency {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--brand);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
    padding: .6rem 1rem;
    transform: skewX(var(--skew));
    transition: background var(--dur) var(--ease-out);
}
.btn-emergency > * { transform: skewX(calc(-1 * var(--skew))); }
.btn-emergency:hover { background: var(--brand-dark); color: #fff; }
.btn-emergency .dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #fff; flex: none;
    animation: pulse-dot 1.8s var(--ease-out) infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.nav-toggle {
    display: none;
    background: none; border: none;
    width: 40px; height: 40px;
    cursor: pointer; color: var(--ink);
    align-items: center; justify-content: center;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* ════════ Layout-primitieven ════════ */
.section {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--sec-pad) var(--gutter);
}
/* ── Sectie-ritme utilities (site-breed) ──
   Zet alleen verticale padding; horizontale ruimte regelt .wrap/.section.
   Gebruik op elke <section>: klasse .sec (standaard) of een maat-variant. */
.sec    { padding-top: var(--sec);    padding-bottom: var(--sec); }
.sec--sm{ padding-top: var(--sec-sm); padding-bottom: var(--sec-sm); }
.sec--lg{ padding-top: var(--sec-lg); padding-bottom: var(--sec-lg); }
.sec--xl{ padding-top: var(--sec-xl); padding-bottom: var(--sec-xl); }
/* Fijnafstelling per zijde (bv. twee secties tegen elkaar zonder dubbele lucht). */
.sec--tight-top    { padding-top: 0; }
.sec--tight-bottom { padding-bottom: 0; }

/* Alle content-secties wit; scheiding via subtiele haarlijn i.p.v. grijs vlak.
   Ruimte boven de haarlijn zodat die niet tegen de vorige sectie plakt. */
.section--soft { background: #fff; border-top: 1px solid var(--line); margin-top: clamp(2rem, 5vw, 4rem); }
.section-soft { background: #fff; }
.section-full { width: 100%; }         /* full-bleed wrapper */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.eyebrow {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: .75rem;
}
.section-head { max-width: 820px; margin-bottom: 2.5rem; }
.section-head h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.06; margin-bottom: .75rem; text-wrap: balance; }
.section-head p { color: var(--muted); font-size: 1.05rem; max-width: var(--measure); }

.measure { max-width: var(--measure); }

/* ── Subpagina-hero (full-bleed, donker) ── */
.page-hero {
    position: relative;
    background: var(--bg-dark);
    color: #fff;
    padding: clamp(3.5rem, 9vw, 7rem) 0;
    overflow: hidden;
}
/* Merk-R als watermerk rechtsonder in elke subpagina-hero (huisstijl). */
.page-hero::after {
    content: ''; position: absolute; right: -2%; bottom: -18%; z-index: 1;
    width: 300px; height: 300px; opacity: .06; pointer-events: none;
    background: #fff;
    -webkit-mask: url('../images/r-mark.svg') no-repeat center / contain;
            mask: url('../images/r-mark.svg') no-repeat center / contain;
}
/* Rode diagonale accentstrook onderaan de hero. */
.page-hero::before {
    content: ''; position: absolute; left: 0; bottom: 0; z-index: 2;
    width: 240px; height: 6px; background: var(--brand);
    transform: skewX(-32deg); transform-origin: left;
}
/* De hero-inhoud gebruikt dezelfde container als navigatie en secties: de
   maximale breedte is inclusief de vaste zijgutter. */
.page-hero__inner { max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }
.page-hero .eyebrow { color: #fff; opacity: .8; }
.page-hero h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.04; letter-spacing: -.01em; margin-bottom: .9rem; text-wrap: balance; hyphens: none; overflow-wrap: normal; }
/* Mobiel: titel altijd binnen beeld. Ondergrens meeschalen met de viewport en
   lange woorden (bv. "Machineonderhoud") laten afbreken als vangnet, zodat de
   kop nooit buiten de schermrand loopt op smalle toestellen. */
@media (max-width: 560px) {
    .page-hero h1 { font-size: clamp(1.7rem, 8.5vw, 2.4rem); overflow-wrap: break-word; word-break: break-word; }
}
.page-hero p { color: rgba(255,255,255,.82); font-size: 1.1rem; max-width: var(--measure); }
.page-hero__bg {
    position: absolute; inset: 0; z-index: 0;
    object-fit: cover; width: 100%; height: 100%;
    opacity: .38;
}
.page-hero__bg--bottom { object-position: center 62%; }
.page-hero__bg:not([src]) { display: none; }
/* Globaal placeholder-gedrag voor clip-corner media (ook op pagina's zonder home.css). */
.split-block__media img:not([src]) { display: none; }
.split-block__media img[src] ~ .ph { display: none; }

/* ══ Gedeelde blok-primitieven (home + service + overige) ══ */
.home-section { padding: var(--sec-pad) 0; }
.home-section .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.home-section__head { max-width: var(--measure); margin-bottom: 2.5rem; }
.home-section__head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: .6rem; }
.home-section__head p { color: var(--muted); font-size: 1.05rem; }
.split-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split-block--reverse .split-block__media { order: 2; }
.split-block__body { max-width: var(--measure); }
.split-block__body h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 1rem; }
.split-block__media { position: relative; aspect-ratio: 4 / 3; background: var(--bg-soft); overflow: hidden; --notch: 90px; }
.split-block__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-block__media .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-style: italic; font-size: .95rem; text-align: center; padding: 1rem; }
.disc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 760px) {
    .split-block { grid-template-columns: 1fr; }
    .split-block--reverse .split-block__media { order: 0; }
    .split-block__media { --notch: 48px; }
}
@media (max-width: 980px) { .disc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .disc-grid { grid-template-columns: 1fr; } }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.75rem; }

/* ── Service-keuzerij (onder de hero op /service/) ──
   Snelkeuze naar de 3 diensten, net als in het mega-menu. Gevulde kaarten (geen
   decoratieve borders, huisstijlregel); hover vult rood, één accent. De border-
   bottom van de band is een functionele scheidingslijn (toegestaan). */
.svc-chooser { background: #fff; border-bottom: 1px solid var(--line); }
.svc-chooser__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1.25rem var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.svc-chooser__item {
    display: flex; flex-direction: column; gap: .2rem;
    padding: 1rem 1.25rem; background: var(--bg-soft);
    text-decoration: none; color: var(--ink);
    transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.svc-chooser__item span { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; }
.svc-chooser__item small { color: var(--text-muted); font-size: .82rem; transition: color var(--dur) var(--ease-out); }
.svc-chooser__item:hover,
.svc-chooser__item:focus-visible { background: var(--brand); color: #fff; outline: none; }
.svc-chooser__item:hover small,
.svc-chooser__item:focus-visible small { color: rgba(255, 255, 255, .85); }
.svc-chooser__item.is-current { background: var(--brand); color: #fff; }
.svc-chooser__item.is-current small { color: rgba(255, 255, 255, .85); }
@media (max-width: 760px) {
    .svc-chooser__inner { grid-template-columns: 1fr; gap: .55rem; padding: 1rem var(--gutter); }
    .svc-chooser__item { padding: .85rem 1.1rem; }
}

/* ── Tekst-content ── */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.7rem; margin: 2.25rem 0 .85rem; }
.prose p { margin-bottom: 1.25rem; }
.prose ul { margin: 0 0 1.5rem 1.25rem; }
.prose li { margin-bottom: .45rem; }

/* ── Feature/icoon-grid ── */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}
.feature {
    background: #fff;
    border: 1px solid var(--line);
    padding: 1.9rem 1.6rem;
    transition: border-color var(--dur) var(--ease-out);
}
.feature:hover { border-color: var(--brand); }
.feature h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.feature p { color: var(--muted); font-size: .95rem; margin-bottom: 0; }
.feature__icon { width: 44px; height: 44px; color: var(--ink); margin-bottom: 1rem; transition: color var(--dur) var(--ease-out); }
.feature:hover .feature__icon { color: var(--brand); }

/* ── Contact CTA-band (gedeeld) ── */
.contact-cta { background: var(--brand); color: #fff; text-align: center; }
.contact-cta h2 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.06; margin-bottom: .5rem; text-wrap: balance; }
.contact-cta p { color: rgba(255,255,255,.92); margin-bottom: 1.75rem; font-size: 1.1rem; }
/* Subtiele "de beller is sneller!"-accent: linksonder, klein, schuine huisstijl-
   toets. Overrulet .contact-cta p (geen extra ondermarge, kleiner, links). */
.contact-cta .caller-tip {
    margin: 1.4rem 0 0; font-family: var(--font-head); font-weight: 700;
    font-size: .82rem; letter-spacing: .5px; text-transform: uppercase;
    color: rgba(255,255,255,.6); text-align: left; width: fit-content;
    transform: skewX(var(--skew)); transform-origin: left center;
    padding-left: .1rem;
}
/* Mobiel: de twee lange belknoppen (naam + telefoonnummer) passen niet naast
   elkaar. De skew + nowrap-labels duwden de tekst dan buiten de knopvorm (tekst
   liep door de knoppen heen). Onder 640px: onder elkaar, volle breedte, recht
   (geen skew) en labels mogen afbreken zodat alles binnen de knop blijft. */
@media (max-width: 640px) {
    .contact-cta .hero__actions { flex-direction: column; align-items: stretch; gap: .75rem; }
    .contact-cta .hero__actions .btn {
        width: 100%;
        justify-content: center;
        transform: none;
        padding: 1rem 1.1rem;
    }
    .contact-cta .hero__actions .btn > * {
        transform: none;
        white-space: normal;
        text-align: center;
        line-height: 1.3;
    }
    .contact-cta .caller-tip { transform: none; text-align: center; width: 100%; margin-top: 1.1rem; }
}

/* ════════ Scroll-reveal (reveal.js) ════════ */
[data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
    will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Sterkere, gestaggerde inkomende animatie voor de "Ons werk"-fotostrip
   (geïnspireerd op de Barrier/Soft Touch A/B-varianten): foto's faden en
   schuiven duidelijker omhoog + iets scale, één voor één. Alleen deze galerij;
   de subtiele reveal elders blijft ongewijzigd. */
.image-strip > [data-reveal] {
    transform: translateY(64px) scale(.96);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.image-strip > [data-reveal].is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .image-strip > [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ════════ "Werken bij ons" — Barrier-stijl (getekende rand + tegels) ════════ */
/* Dunne rode lijn boven de sectiekop die zich uittekent zodra hij in beeld komt. */
.border-draw {
    display: block; height: 3px; width: 0; background: var(--brand);
    margin-bottom: 1.4rem; transition: width 1s var(--ease-out);
}
[data-reveal].is-visible .border-draw { width: 72px; }
@media (prefers-reduced-motion: reduce) { .border-draw { width: 72px; transition: none; } }

.job-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 2rem 0; }
.job-tile {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.6rem 1.5rem; border: 1px solid var(--line); background: #fff;
    text-decoration: none; color: var(--ink);
    font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.job-tile::after { content: "→"; color: var(--brand); transition: color var(--dur-fast) var(--ease-out); }
.job-tile:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.job-tile:hover::after { color: #fff; }
@media (max-width: 720px) { .job-tiles { grid-template-columns: 1fr; } }

/* ════════ CTA-hover: fill-sweep op elke knop — IN MERKKLEUR, nooit zwart ════════
   Eén consistente animatie site-breed: een vlak veegt van links over de knop
   (clip-path, blijft binnen de knopvorm → tekst nooit afgekapt). De sweep-kleur
   is ALTIJD een merkkleur: rode knoppen → donkerder rood, witte/outline knoppen
   → rood. Geen zwarte vlakken. */
.btn { position: relative; z-index: 0; transition: color var(--dur) var(--ease-out); }
.btn > * { position: relative; z-index: 1; }
.btn::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: var(--brand);          /* default sweep = merkrood */
    clip-path: inset(0 100% 0 0);      /* volledig weggeknipt (rechterkant) */
    transition: clip-path var(--dur) var(--ease-out);
    will-change: clip-path;
}
.btn:hover::before { clip-path: inset(0 0 0 0); }  /* veegt open van links → rechts */
.btn:hover { color: #fff; }
/* KERNPRINCIPE: de tekst flipt ALTIJD naar een kleur die contrasteert met de
   INKOMENDE sweep — nooit kleur-op-kleur, nooit zwart als het niet moet.
   Rode knop (op wit) → sweep donkerrood, tekst blijft wit. */
.btn-primary::before { background: var(--brand-dark); }
/* Witte knop (op rood, bv. hero/CTA) → sweep donkerrood, tekst wordt wit.
   Geen zwart: donkerrood contrasteert genoeg met het rode vlak eromheen. */
.btn-light::before { background: var(--brand-dark); }
.btn-light:hover { color: #fff; }
/* Ghost (wit-outline op rood/donker) → sweep WIT, dus de tekst moet ROOD worden
   (wit-op-wit zou onzichtbaar zijn — dat was de bug). */
.btn-ghost::before { background: #fff; }
.btn-ghost:hover { color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
    .btn::before { transition: none; }
}

/* ── Skeleton loading ── */
.skeleton {
    position: relative; overflow: hidden; min-height: 1.2em;
    background: var(--line);
}
.skeleton::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
    0% { transform: translateX(-100%); } 100% { transform: translateX(100%); }
}

/* ── Error state ── */
.load-error {
    padding: 1rem; color: #991b1b; background: #fef2f2;
    border: 1px solid #fecaca;
    font-size: .9rem; text-align: center;
}

/* ════════ Mobiel menu ════════ */
@media (max-width: 1100px) {
    .logo__text { display: none; }
    .nav-toggle { display: inline-flex; }
    .nav-menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 1rem var(--gutter);
        gap: .25rem;
        margin: 0;
    }
    .nav-menu.nav-open { display: flex; }
    /* Hoofd-titels groot in het heading-lettertype. */
    .nav-menu > li > a:not(.btn):not(.btn-emergency) {
        padding: .95rem 0;
        font-family: var(--font-head); font-weight: 700;
        font-size: 1.5rem; letter-spacing: .2px;
        border-bottom: 1px solid var(--line);
    }
    .nav-menu > li:not(.nav-actions) { border: 0; }
    .has-dropdown > .dropdown {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        border: 0; padding: 0 0 .5rem 1rem;
        min-width: 0;
        display: none;
    }
    .has-dropdown.is-open > .dropdown { display: block; }
    /* Mega-menu op mobiel: ingeklapt tenzij open (accordion), geen absolute overlay. */
    .nav-menu > li.has-mega { position: static; }
    .has-mega > .mega {
        position: static; width: auto;
        opacity: 1; visibility: visible; transform: none;
        border: 0; border-top: 0; padding: 0;
        display: none;
    }
    .has-mega.is-open > .mega { display: block; }
    .has-mega .mega__inner { padding: .75rem 0 1rem; }
    /* Categorieën als grote vierkantjes, 2 per rij. */
    .has-mega .mega__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: .75rem; }
    .has-mega .mega__grid--svc { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-bottom: .75rem; }
    .has-mega .mega__cat {
        flex-direction: column; align-items: center; justify-content: center;
        gap: .5rem; border: 1px solid var(--line); padding: 1.1rem .75rem; text-align: center;
    }
    .has-mega .mega__cat img { height: 44px; }
    .has-mega .mega__cat img[src*="Wielladers.svg"] { height: 44px; transform: scale(.86); transform-origin: center bottom; }
    .has-mega .mega__cat span { font-size: 1.05rem; }
    .has-mega .mega__cat--svc { flex-direction: row; justify-content: flex-start; text-align: left; padding: .9rem 1rem; }
    .has-mega .mega__cat small { display: none; }
    .has-mega .mega__all { display: inline-flex; margin-top: .25rem; }
    /* 24/7-knop helemaal onderaan, volle breedte. */
    .nav-actions { display: block; margin: 1.25rem 0 0; }
    .nav-actions .btn-emergency {
        display: flex; width: 100%; justify-content: center;
        padding: 1.1rem 1rem; font-size: 1.1rem;
    }
}

/* ── Mega-menu (Machines kopen) — volledige header-breedte ── */
.nav-menu > li.has-mega { position: static; }
/* Scrim achter een open mega-menu: de pagina-inhoud dimt en vervaagt licht, zodat
   de focus naar het open menu gaat. Ligt ONDER de header (z-index 100/101) en het
   mega-menu (z-index 200), dus de nav én het menu blijven scherp — alleen de pagina
   erachter dimt. pointer-events:none → puur visueel, blokkeert nooit een klik.
   Het element wordt door main.js in elke pagina geïnjecteerd (body.mega-open toggelt). */
.nav-scrim {
    position: fixed; inset: 0; z-index: 99;
    background: rgba(12, 12, 14, .30);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}
body.mega-open .nav-scrim { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .nav-scrim { transition: none; } }
.mega { position: absolute; top: 100%; left: 0; right: 0; width: 100%; background: #fff; border-top: 3px solid var(--brand); border-bottom: 1px solid var(--line); box-shadow: none; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dur) var(--ease-out), transform var(--dur), visibility var(--dur); z-index: 200; }
.has-mega:hover > .mega, .has-mega.is-open > .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__inner { max-width: var(--maxw); margin: 0 auto; padding: 2rem var(--gutter); }
.mega__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.mega__cat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; padding: 1.25rem .75rem; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color var(--dur) var(--ease-out), background var(--dur); }
.mega__cat:hover { border-color: var(--brand); background: var(--bg-soft); }
/* Alle icoon-boxen even hoog (60px) zodat de titels eronder op één lijn staan,
   ongeacht de schaal van de SVG. object-fit centreert het beeld in de box. */
.mega__cat img { height: 60px; width: auto; object-fit: contain; }
/* De wiellader-SVG oogt optisch groter (minder witruimte in het pad). Visueel
   iets kleiner via scale i.p.v. een kleinere height, zodat de box 60px blijft
   en de titel op gelijke hoogte met de andere kaarten uitlijnt. */
.mega__cat img[src*="Wielladers.svg"] { transform: scale(.86); transform-origin: center bottom; }
/* De schranklader-SVG oogt optisch kleiner (meer witruimte in het pad). Iets
   groter via scale, box blijft 60px → titel/vakje wijzigen niet. */
.mega__cat img[src*="Schrankladers.svg"] { transform: scale(1.22); transform-origin: center bottom; }
.mega__cat span { font-family: var(--font-head); font-weight: 700; font-size: .9rem; }
.mega__cat small { color: var(--muted); font-size: .75rem; }
.mega__all { display: block; }
@media (max-width: 1100px) { .mega { position: static; box-shadow: none; } .mega__grid { grid-template-columns: repeat(3,1fr); } }

/* Service-mega (tekstueel, geen icoon) */
.mega__grid--svc { grid-template-columns: repeat(3, 1fr); }
.mega__cat--svc { justify-content: center; }
.mega__cat--svc span { font-size: 1rem; }

/* ══ Merk-logostrip (site-breed): subtiele merken-in-kleur ══
   Duidelijk welke merken we verdelen, rustig en stijlvol; niet dominant. */
.brand-line { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem clamp(1.25rem, 3vw, 2.5rem); margin: 0; }
.brand-line__label { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: .72rem; color: var(--muted); white-space: nowrap; }
.brand-line__logos { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.5rem); }
/* Logo's mogen klikbaar zijn (uitgaande link naar de fabrikant): de <a> gedraagt
   zich als het logo zelf, geen onderlijn/linkkleur. */
.brand-line__logos a { display: inline-flex; text-decoration: none; line-height: 0; }
.brand-line__logos img { height: 26px; width: auto; max-width: 96px; object-fit: contain; opacity: .8; transition: opacity var(--dur) var(--ease-out); }
.brand-line__logos img:hover,
.brand-line__logos a:hover img { opacity: 1; }
/* Cormidi-logo heeft veel witruimte → optisch groter tonen zodat het meetelt. */
.brand-line__logos img[alt="Cormidi"] { height: 40px; max-width: 132px; }
/* Shell-logo op de smeermiddelen-pagina groter (enkel daar: .svc-intro-scope). */
.svc-intro .brand-line__logos img[alt="Shell"] { height: 52px; max-width: 150px; }
@media (max-width: 560px) {
    .brand-line__logos img { height: 22px; max-width: 78px; }
    .brand-line__logos img[alt="Cormidi"] { height: 34px; max-width: 108px; }
    .svc-intro .brand-line__logos img[alt="Shell"] { height: 42px; max-width: 120px; }
}

/* ══ Cookiebanner (GDPR/ePrivacy — Clarity pas na toestemming) ══
   Compacte, subtiele kaart LINKSONDER (geen volle balk). De Buf-look: haaks,
   geen afgeronde hoeken, dunne haarlijn. Boven alle lagen (mobiel menu = 200).
   Twee gelijkwaardige knoppen: Weigeren én Accepteren (juridisch vereist). */
.cookie-banner {
    position: fixed; left: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
    z-index: 500; max-width: 360px;
    background: var(--bg-dark); color: #fff;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 12px 32px rgba(0,0,0,.28);
    opacity: 0; transform: translateY(12px);
    transition: opacity var(--dur, .3s) var(--ease-out, ease),
                transform var(--dur, .3s) var(--ease-out, ease);
}
.cookie-banner.is-visible { opacity: 1; transform: translateY(0); }
.cookie-banner__inner {
    padding: 1.1rem 1.25rem;
    display: flex; flex-direction: column; gap: .9rem;
}
.cookie-banner__text {
    margin: 0;
    font-size: .82rem; line-height: 1.5; color: rgba(255,255,255,.82);
}
.cookie-banner__text a { color: #fff; text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: .6rem; }
.cookie-banner__btn { flex: 1 1 0; justify-content: center; text-align: center;
    padding: .6rem 1rem; font-size: .78rem; letter-spacing: .5px; }
/* Kernprincipe (Buf-look): de knoptekst contrasteert ALTIJD met de knopkleur.
   We zetten harde kleuren en schakelen de sweep-pseudo (.btn::before) hier uit,
   zodat die de tekst nooit overdekt. Kleur op zowel de knop als het label
   (.btn > * heeft color: inherit én ligt boven de sweep). */
.cookie-banner__btn::before { display: none; }
/* Accepteren: rode container → witte tekst. */
.cookie-banner .btn-primary,
.cookie-banner .btn-primary > *,
.cookie-banner .btn-primary:hover { background: var(--brand); color: #fff; }
/* Weigeren: witte container → zwarte tekst. */
.cookie-banner .btn-light,
.cookie-banner .btn-light > *,
.cookie-banner .btn-light:hover { background: #fff; color: var(--ink); box-shadow: none; }
/* Mobiel: op smalle schermen tot bijna volle breedte (kaart heeft geen ruimte),
   maar nog steeds verankerd linksonder met wat marge. */
@media (max-width: 560px) {
    .cookie-banner { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; }
    .cookie-banner__inner { padding: 1rem; }
}


/* ==== brand-identity.css ==== */
/* ════════════════════════════════════════════
   brand-identity.css — Renier huisstijl-elementen (diagonalen + R-motief).
   Doorgetrokken merktaal uit de screenshots: schuine doorsneden, rode
   hoekvlakken die naar de skew-knop verwijzen, R-logo als terugkerend accent.
   Minder zwart, meer rood + foto's.
   ════════════════════════════════════════════ */

/* ── Diagonale hero: foto ╱ donker vlak (huisstijl) ──
   Foto links met schuine snede, donker tekstvlak rechts, tekst verticaal
   gecentreerd. De schuine naad = de skew van onze knoppen. */
.hero--diag {
    position: relative; min-height: 88vh;
    display: grid; grid-template-columns: 1fr 1fr;
    overflow: hidden; background: var(--bg-dark);
}
.hero--diag .hero__photo {
    position: relative; grid-column: 1; overflow: hidden;
}
.hero--diag .hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Rood vlak schuift met een schuine snede over de foto (parallellogram-naad). */
.hero--diag .hero__panel {
    grid-column: 2;
    position: relative; z-index: 1;
    background: var(--brand);
    margin-left: -14vw;                 /* overlap zodat de snede over de foto valt */
    clip-path: polygon(14vw 0, 100% 0, 100% 100%, 0 100%);
}
/* Op het rode vlak: nooit rood-op-rood. Accenten worden wit/donker. */
.hero--diag .eyebrow--r::before { background: #fff; }          /* R-motief wit i.p.v. rood */
.hero--diag .hero__accent { display: none; }                   /* geen scheidingslijn onder de hero */
/* Knoppen op het rode vlak. De HOVER wordt volledig door de fill-sweep
   (.btn::before in main.css) verzorgd — hier NOOIT de basis-achtergrond op
   :hover wijzigen (dat gaf een zwarte flits). Enkel de rusttoestand.
   Principe: de tekst moet ALTIJD contrasteren met de INKOMENDE sweep-kleur. */
.hero--diag .btn-primary { background: #fff; color: var(--brand); }
/* Wit vlak op rood → sweep in donkerrood (merk, geen zwart), tekst wordt wit. */
.hero--diag .btn-primary::before { background: var(--brand-dark); }
.hero--diag .btn-primary:hover { color: #fff; }
.hero--diag .btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); }
/* Ghost heeft een WITTE sweep → tekst moet bij hover ROOD worden (wit-op-wit was
   onzichtbaar). Deze hero-scope moet de basis-.btn-ghost:hover overschrijven. */
.hero--diag .btn-ghost:hover { color: var(--brand); }
.hero--diag .hero__content {
    position: relative; z-index: 2;
    height: 100%; display: flex; flex-direction: column; justify-content: center;
    padding: clamp(2rem, 5vw, 4.5rem) clamp(2rem, 4vw, 4rem) clamp(2rem, 5vw, 4.5rem) 16vw;
    color: #fff;
}
.hero--diag .hero__content > * { max-width: 34ch; }
.hero--diag .eyebrow--r { flex-wrap: nowrap; white-space: nowrap; }
.hero--diag .eyebrow { color: #fff; opacity: .8; }
.hero--diag .eyebrow--r { margin-bottom: 1rem; }
.hero--diag h1 { color: #fff; font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.05; margin-bottom: 1.25rem; overflow-wrap: break-word; hyphens: auto; }
.hero--diag .hero__tagline { color: rgba(255,255,255,.85); max-width: 40ch; margin-bottom: 1.5rem; font-size: 1.05rem; line-height: 1.6; }
.hero--diag .hero__content > * { max-width: 38ch; }
/* rode diagonale accentstrook onderaan, in lijn met de snede */
.hero--diag .hero__accent { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--brand); z-index: 3; }
/* Twee hero-knoppen op één regel (no-wrap) — óók op desktop. De sitebrede basis
   in brand.css zet flex-wrap:wrap; deze scope overschrijft dat voor de home-hero.
   De inhoudsbox is 38ch breed, dus de knoppen krijgen hun natuurlijke breedte. */
.hero--diag .hero__actions { flex-wrap: nowrap; max-width: none; }

@media (max-width: 860px) {
    /* Hero vult EXACT het scherm (dvh houdt rekening met de mobiele browser-balk),
       zodat bij aankomst enkel de hero zichtbaar is — geen zwart gat. Aanpak:
       een flex-kolom van 100dvh. Het rode PANEEL is content-hoog (titel + knoppen
       + badge) en de FOTO groeit om alle resterende ruimte te vullen. Zo is er
       nooit een lege (donkere) zone, op elk toestel. */
    .hero--diag {
        display: flex; flex-direction: column;
        /* De topbar + sticky header staan BOVEN de hero in de flow. Trek hun
           hoogte af zodat de hero exact de rest van het scherm vult en de
           volledige inhoud (t/m reviews-badge) zonder scrollen zichtbaar is.
           --chrome-h wordt door main.js gezet; fallback 98px vóór JS.
           BEWUST alleen svh (small viewport height), GEEN dvh: dvh verandert
           terwijl de mobiele adresbalk (Google/Chrome) wegscrollt, waardoor de
           hero groeit en de afstand H1↔foto verspringt. svh is de STABIELE
           kleine-viewport-hoogte en beweegt niet mee → geen sprong bij scrollen. */
        height: calc(100svh - var(--chrome-h, 98px));
        min-height: 440px;
        background: var(--brand);   /* eventuele naadkleur = rood, nooit zwart */
    }
    /* Verhouding: MINDER foto, MEER rood vlak. De FOTO krijgt een VASTE hoogte in
       rem (niet vh), zodat ze niet meebeweegt met de mobiele browser-balk en de
       afstand tussen H1 en foto constant blijft. Het rode PANEEL (flex:1) vangt
       alle resterende ruimte op, dus de hero blijft het scherm vullen zonder dat
       de foto↔titel-afstand verspringt. */
    .hero--diag .hero__photo {
        flex: 0 0 auto; height: 15rem; min-height: 130px; max-height: 15rem;
        width: 100%; position: relative; overflow: hidden;
    }
    /* Foto-inhoud (het team) staat wat hoger, zodat de mannen zichtbaar blijven
       ook nu de foto lager is. */
    .hero--diag .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
    /* Het rode PANEEL vult de resterende (grotere) ruimte. Grotere schuine overlap
       over de foto; de inhoud staat verticaal gecentreerd in dat rode vlak. */
    .hero--diag .hero__panel {
        flex: 1 1 auto; margin-left: 0; min-height: 0;
        clip-path: polygon(0 64px, 100% 0, 100% 100%, 0 100%); margin-top: -64px;
    }
    /* Content BOVENAAN het rode vlak uitgelijnd (niet verticaal gecentreerd):
       zo houdt de titel een VASTE afstand tot de foto erboven. Bij center zou de
       titel meezakken als het paneel groeit (mobiele adresbalk weg) → dat gaf de
       verspringende H1↔foto-afstand. De top-padding houdt de kop onder de schuine
       bovenrand (de -64px hap). */
    .hero--diag .hero__content {
        /* Het tekstblok (H1 + knoppen + Google-badge) verticaal GECENTREERD in het
           rode vlak. Dit geeft geen sprong meer: de foto heeft een vaste hoogte en
           de container staat op svh (beweegt niet mee met de mobiele adresbalk), dus
           het paneel groeit niet bij het wegscrollen. De schuine hap (-64px) waarmee
           het paneel over de foto valt, vangen we met een top-padding zodat de H1
           bij een KORT scherm nooit ín de hap terechtkomt. */
        height: 100%; display: flex; flex-direction: column; justify-content: center;
        padding: 5.5rem var(--gutter) 3.75rem; max-width: none;
    }
    .hero--diag .hero__content > * { max-width: none; }
    /* Ondergrens meeschalen met de viewport + lange woorden afbreken, zodat de
       titel op smalle toestellen altijd binnen beeld blijft. */
    .hero--diag h1 { font-size: clamp(1.7rem, 8.5vw, 3.1rem); margin-bottom: 1.1rem; word-break: break-word; }
    .hero--diag .hero__actions { margin-top: 1.25rem; }
    /* Mobiel: de twee hero-knoppen ONDER ELKAAR en over de volle breedte. */
    .hero--diag .hero__actions {
        flex-direction: column; align-items: stretch; gap: .75rem;
    }
    .hero--diag .hero__actions .btn {
        width: 100%; justify-content: center; padding: 1rem 1.25rem;
        font-size: .95rem; letter-spacing: .5px;
    }
}

/* ── Foto met rood skew-label (R-logo + tekst), linksonder ──
   Idee: het label KRIJGT bewust een kleine linker-overhang (-5px) én een
   schuine snede, precies zoals de huisstijl. De foto-wrapper werkt als een
   MASKER (overflow:hidden): alles wat buiten de foto valt — die -5px links
   én de onderkant — wordt weggeknipt en is dus nooit zichtbaar buiten de
   afbeelding. Binnen de foto blijft het volledige label mooi zichtbaar. */
.branded-media { position: relative; overflow: hidden; background: var(--bg-soft); }
.branded-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-label {
    position: absolute; left: -12px; bottom: 1.25rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .6rem;
    background: var(--brand); color: #fff;
    font-family: var(--font-head); font-weight: 800; font-size: .95rem;
    text-transform: uppercase; letter-spacing: .5px;
    /* ruime linkerpadding: de skew + de -5px worden geklipt, de tekst niet */
    padding: .7rem 1.5rem .7rem 1.6rem;
    transform: skewX(var(--skew));
    transform-origin: left bottom;
}
.media-label > * { transform: skewX(calc(-1 * var(--skew))); }
.media-label__r { width: 20px; height: 22px; flex: none; background: #fff; -webkit-mask: url('../images/r-mark.svg') no-repeat center / contain; mask: url('../images/r-mark.svg') no-repeat center / contain; }

/* ── Diagonaal hoekvlak: vierkant met rode skew-driehoek rechtsonder ── */
.corner-plane { position: relative; }
.corner-plane::after {
    content: ''; position: absolute; right: 0; bottom: 0; z-index: 1;
    width: 46%; height: 42%;
    background: var(--brand);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
/* variant: R-logo in de rode hoek */
.corner-plane--r::before {
    content: ''; position: absolute; right: 6%; bottom: 5%; z-index: 2;
    width: 34px; height: 34px; background: #fff;
    -webkit-mask: url('../images/r-mark.svg') no-repeat center / contain;
            mask: url('../images/r-mark.svg') no-repeat center / contain;
}

/* ── Rood → wit diagonale sectie-overgang ── */
.diag-section { position: relative; background: var(--brand); color: #fff; }
.diag-section h2 { color: #fff; }
.diag-section p { color: rgba(255,255,255,.92); }
.diag-section--to-white { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 90px)); }
.diag-section--from-white { clip-path: polygon(0 90px, 100% 0, 100% 100%, 0 100%); }
@media (max-width: 640px) {
    .diag-section--to-white { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 40px)); }
    .diag-section--from-white { clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); }
}

/* ── Sectie-eyebrow met R-motief ── */
.eyebrow--r { display: inline-flex; align-items: center; gap: .5rem; }
.eyebrow--r::before {
    content: ''; width: 18px; height: 18px; background: var(--brand);
    -webkit-mask: url('../images/r-mark.svg') no-repeat center / contain;
            mask: url('../images/r-mark.svg') no-repeat center / contain;
}


/* ==== components/components.css ==== */
/* ─────────────────────────────────────────────
   Universal GEO Components — base styles
   Werkt voor elk business-type. Gebruikt CSS custom properties
   zodat per project gemakkelijk te overschrijven via main.css.
   ───────────────────────────────────────────── */

:root {
  --geo-fg:           #111;
  --geo-muted:        #555;
  --geo-bg:           #fff;
  --geo-bg-soft:      #f6f7f9;
  --geo-border:       #e5e7eb;
  --geo-accent:       #ed2f2f;
  --geo-accent-soft:  #fdecec;
  --geo-radius:       0;
  --geo-radius-lg:    0;
  --geo-gap:          1rem;
  --geo-gap-lg:       1.5rem;
  --geo-font-sm:      0.875rem;
  --geo-font-md:      1rem;
  --geo-font-lg:      1.125rem;
}

/* Common: hidden state respecteren (componenten verbergen zich bij lege data) */
[data-cms-component][hidden] { display: none !important; }

/* ─────────────── Quick Answer ─────────────── */
.quick-answer {
  margin: var(--geo-gap-lg) 0;
  padding: 1rem 1.25rem;
  background: var(--geo-accent-soft);
  border-left: 4px solid var(--geo-accent);
  border-radius: var(--geo-radius);
}
.quick-answer__text {
  margin: 0;
  font-size: var(--geo-font-lg);
  line-height: 1.55;
  color: var(--geo-fg);
}

/* ─────────────── FAQ ─────────────── */
.faq {
  margin: 3rem 0;
}
.faq__container {
  max-width: 56rem;
  margin: 0 auto;
}
.faq__title {
  font-size: 1.5rem;
  margin: 0 0 1.5rem 0;
  color: var(--geo-fg);
}
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq__item {
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-radius);
  background: var(--geo-bg);
  overflow: hidden;
}
.faq__item[open] {
  border-color: var(--geo-accent);
}
.faq__question {
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: var(--geo-font-md);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
  color: var(--geo-fg);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--geo-muted);
  transition: transform 0.15s ease;
}
.faq__item[open] .faq__question::after {
  content: "−";
  transform: translateY(-50%) rotate(180deg);
}
.faq__answer {
  padding: 0 1.25rem 1rem 1.25rem;
  font-size: var(--geo-font-md);
  line-height: 1.6;
  color: var(--geo-muted);
}
.faq__answer p:first-child { margin-top: 0; }
.faq__answer p:last-child { margin-bottom: 0; }

/* ─────────────── Key Facts ─────────────── */
.key-facts {
  margin: var(--geo-gap-lg) 0;
}
.key-facts__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--geo-gap-lg);
  list-style: none;
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--geo-bg-soft);
  border-radius: var(--geo-radius);
}
.key-facts__item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.key-facts__label {
  font-size: var(--geo-font-sm);
  color: var(--geo-muted);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.key-facts__value {
  font-size: var(--geo-font-lg);
  font-weight: 600;
  color: var(--geo-fg);
}

/* ─────────────── Author Bio ─────────────── */
.author-bio {
  margin: 2.5rem 0;
  padding: 1.5rem;
  background: var(--geo-bg-soft);
  border-radius: var(--geo-radius-lg);
}
.author-bio__container {
  display: flex;
  gap: var(--geo-gap-lg);
  align-items: flex-start;
}
.author-bio__image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.author-bio__content {
  flex: 1;
  min-width: 0;
}
.author-bio__role {
  font-size: var(--geo-font-sm);
  color: var(--geo-muted);
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.author-bio__name {
  font-size: 1.25rem;
  margin: 0 0 0.25rem 0;
  color: var(--geo-fg);
}
.author-bio__job {
  font-size: var(--geo-font-sm);
  color: var(--geo-muted);
  margin: 0 0 0.75rem 0;
}
.author-bio__text {
  font-size: var(--geo-font-md);
  line-height: 1.55;
  color: var(--geo-fg);
  margin: 0 0 0.75rem 0;
}
.author-bio__links {
  display: flex;
  gap: var(--geo-gap);
  flex-wrap: wrap;
}
.author-bio__links a {
  font-size: var(--geo-font-sm);
  color: var(--geo-accent);
  text-decoration: none;
}
.author-bio__links a:hover {
  text-decoration: underline;
}

/* ─────────────── Comparison Table ─────────────── */
.comparison-table {
  margin: 2.5rem 0;
}
.comparison-table__container {
  max-width: 56rem;
  margin: 0 auto;
}
.comparison-table__title {
  font-size: 1.5rem;
  margin: 0 0 1rem 0;
  color: var(--geo-fg);
}
.comparison-table__wrap {
  overflow-x: auto;
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-radius);
}
.comparison-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--geo-font-md);
  background: var(--geo-bg);
}
.comparison-table__table th,
.comparison-table__table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--geo-border);
}
.comparison-table__table thead th {
  background: var(--geo-bg-soft);
  font-weight: 600;
  color: var(--geo-fg);
}
.comparison-table__table tbody th {
  font-weight: 500;
  color: var(--geo-muted);
  background: var(--geo-bg-soft);
}
.comparison-table__table tr:last-child td,
.comparison-table__table tr:last-child th {
  border-bottom: none;
}

/* ─────────────── Breadcrumbs ─────────────── */
.breadcrumbs {
  margin: 0.75rem 0 var(--geo-gap) 0;
}
.breadcrumbs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: var(--geo-font-sm);
  color: var(--geo-muted);
}
.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.breadcrumbs__item:not(:last-child)::after {
  content: "/";
  color: var(--geo-border);
  margin-left: 0.375rem;
}
.breadcrumbs__link {
  color: var(--geo-muted);
  text-decoration: none;
}
.breadcrumbs__link:hover {
  color: var(--geo-accent);
  text-decoration: underline;
}
.breadcrumbs__item--current {
  color: var(--geo-fg);
  font-weight: 500;
}

/* ─────────────── Review Card ─────────────── */
.review-card {
  padding: 1.5rem;
  background: var(--geo-bg);
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-radius-lg);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.review-card__rating {
  color: #f59e0b;
  font-size: var(--geo-font-md);
  letter-spacing: 0.0625em;
}
.review-card__text {
  margin: 0;
  font-size: var(--geo-font-md);
  line-height: 1.55;
  color: var(--geo-fg);
  font-style: italic;
}
.review-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: var(--geo-font-sm);
  color: var(--geo-muted);
  align-items: baseline;
}
.review-card__author {
  font-style: normal;
  font-weight: 600;
  color: var(--geo-fg);
}
.review-card__location::before { content: "·"; margin-right: 0.5rem; }
.review-card__date::before { content: "·"; margin-right: 0.5rem; }

/* ─────────────── Responsive ─────────────── */
@media (max-width: 640px) {
  .author-bio__container {
    flex-direction: column;
    align-items: flex-start;
  }
  .key-facts__list {
    gap: var(--geo-gap);
  }
  .key-facts__item {
    flex: 1 1 calc(50% - var(--geo-gap));
  }
}

/* ─────────────────────────────────────────────
   SEO-blok "Waarvoor kan je bij ons terecht" (site.seoblock.*)
   Redactioneel 2-koloms + rood skew-badge met R-merkteken.
   Staat op elke hoofdpagina tussen de CTA-band en de footer.
   Idioom: parallellogram-skew (zoals de knoppen), geen afgekante hoek.
   ───────────────────────────────────────────── */
.seo-block {
  padding: var(--sec, clamp(4rem, 8vw, 6rem)) 0;
  background: var(--bg-soft, #f2f2f2);
}
.seo-block__inner {
  max-width: var(--maxw, 1180px);
  margin: 0 auto;
  padding: 0 var(--gutter, 1.5rem);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

/* Rood vlak: recht rechthoekig blok, harde hoeken (radius 0) — zoals alle
   content-vlakken op de site. De schuine signatuur zit in de knop erin. */
.seo-block__badge {
  position: relative;
  background: var(--brand, #ed2f2f);
  color: #fff;
  padding: 2.5rem 2.75rem;
  border-radius: var(--radius, 0);
  align-self: stretch;            /* groeit mee met de tekstkolom → geen gat */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.seo-block__badge > * { font-style: normal; }
/* Groot, subtiel R-watermerk in de hoek */
.seo-block__badge::after {
  content: "";
  position: absolute;
  right: 4px; bottom: -18px;
  width: 150px; height: 175px;
  opacity: .12;
  background: #fff;
  -webkit-mask: url('../images/r-mark.svg') no-repeat center / contain;
          mask: url('../images/r-mark.svg') no-repeat center / contain;
  z-index: 0;
  pointer-events: none;
}
.seo-block__eyebrow {
  font-family: var(--font-head, sans-serif);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .9rem;
  position: relative; z-index: 1;
}
.seo-block__eyebrow::before {
  content: "";
  width: 16px; height: 19px;
  flex: none;
  background: #fff;
  -webkit-mask: url('../images/r-mark.svg') no-repeat center / contain;
          mask: url('../images/r-mark.svg') no-repeat center / contain;
}
.seo-block__badge h2 {
  color: #fff;
  font-family: var(--font-head, sans-serif);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.2;
  position: relative; z-index: 1;
}
.seo-block__badge p {
  margin-top: .9rem;
  font-size: .97rem;
  line-height: 1.65;
  color: rgba(255,255,255,.92);
  position: relative; z-index: 1;
}
.seo-block__badge-actions { margin-top: 1.5rem; position: relative; z-index: 1; }
.seo-block__badge-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head, sans-serif);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid rgba(255,255,255,.5);
  padding-bottom: 2px;
  transition: border-color var(--dur, .4s) var(--ease-out, ease);
}
.seo-block__badge-link:hover { border-color: #fff; }

.seo-block__body { padding-top: .25rem; }
.seo-block__body h3 {
  font-family: var(--font-head, sans-serif);
  color: var(--ink, #1f1e1e);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.seo-block__cols { columns: 2; column-gap: 2.5rem; }
.seo-block__cols p {
  margin-bottom: 1rem;
  font-size: .98rem;
  line-height: 1.72;
  break-inside: avoid;
  color: var(--body, #4d4d4d);
}
.seo-block__cols a {
  color: var(--brand, #ed2f2f);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(237,47,47,.3);
  text-underline-offset: 2px;
}
.seo-block__cols a:hover { text-decoration-color: var(--brand, #ed2f2f); }

@media (max-width: 820px) {
  .seo-block__inner { grid-template-columns: 1fr; }
  .seo-block__cols { columns: 1; }
}


/* ==== footer.css ==== */
/* Footer — Renier Hydraulics (donker thema) */
footer {
    background: var(--bg-dark, #16181b);
    color: #c9ced3;
    margin-top: 0;
}

.footer-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: 2.5rem;
    padding: 3.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer-section h3,
.footer-section h4 {
    font-family: var(--font-head, sans-serif);
    color: #fff;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}
.footer-section h3 { font-size: 1.3rem; }

.footer-section p { color: #9aa1a8; line-height: 1.7; margin-bottom: .5rem; }

.footer-section ul { list-style: none; padding: 0; }
.footer-section li { margin-bottom: .55rem; }

.footer-section a { color: #c9ced3; text-decoration: none; transition: color .2s ease; }
.footer-section a:hover { color: var(--brand, #ed2f2f); }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-legal { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer-legal p { color: #9aa1a8; margin: 0; font-size: .9rem; }

.legal-links { display: flex; align-items: center; gap: .5rem; }
.legal-links a { color: #9aa1a8; text-decoration: none; font-size: .9rem; transition: color .2s ease; }
.legal-links a:hover { color: var(--brand, #ed2f2f); }

.separator, .creator-separator { color: #5a6066; font-size: .8rem; }

.footer-creator { display: flex; align-items: center; gap: .5rem; color: #9aa1a8; font-size: .9rem; }
.footer-creator a { color: var(--brand, #ed2f2f); text-decoration: none; font-weight: 600; }
.footer-creator a:hover { text-decoration: underline; }

.cms-lock-link {
    display: inline-flex; align-items: center;
    padding: 4px 8px;
    color: #c9ced3;
    transition: color .2s ease;
}
.cms-lock-link:hover { color: var(--brand); }
.cms-lock-link svg { width: 14px; height: 14px; }

@media (max-width: 860px) {
    .footer-content { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
    .footer-content { grid-template-columns: 1fr; text-align: center; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-legal { flex-direction: column; gap: .5rem; }
    .legal-links, .footer-creator { justify-content: center; }
}


/* ==== pages/region.css ==== */
/* ════════════════════════════════════════════
   Werkgebied — geografisch correcte kaart + lokale pagina's
   ════════════════════════════════════════════ */

/* Werkgebied krijgt bewust de ruime maat voor een rustiger ritme. */
.region-wrap { max-width: var(--maxw); margin: 0 auto; padding: var(--sec-lg) var(--gutter); }
.region-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.region-grid__body { max-width: var(--measure); }

/* ── Kaart ── */
.region-map-frame { background: #fff; }
.region-map { width: 100%; height: auto; display: block; }
.region-map .ctx { fill: #e2e2e2; stroke: #fff; stroke-width: 1; }
.region-map .area { fill: #f7c9c9; stroke: #fff; stroke-width: 1.2; transition: fill var(--dur) var(--ease-out); }
.region-map .pin circle { fill: var(--brand); stroke: #fff; stroke-width: 2; }
.region-map .pin--hq circle { fill: var(--ink); stroke-width: 3; }
.region-map .pin-label { font-family: var(--font-body); font-weight: 600; font-size: 17px; text-anchor: middle; fill: #2a2a2a; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.region-map .pin-label--hq { font-family: var(--font-head); font-weight: 800; font-size: 22px; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
/* Plaatsing-varianten zodat labels nooit over elkaar of over een pin vallen. */
.region-map .pin-label--left  { text-anchor: end; }
.region-map .pin-label--right { text-anchor: start; }
.region-map .pin-hq-ring { fill: none; stroke: var(--brand); stroke-width: 2.5; opacity: .5; transform-origin: center; transform-box: fill-box; animation: hq-pulse 2.4s var(--ease-out) infinite; }
@keyframes hq-pulse { 0% { transform: scale(1); opacity: .6; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .region-map .pin-hq-ring { animation: none; opacity: .5; } }

/* Gestaffelde pin-inval — alleen als beweging gewenst is. */
@media (prefers-reduced-motion: no-preference) {
    /* Pins vallen in wanneer de kaart in beeld komt (frame krijgt .is-visible via reveal.js).
       Standaard verborgen; animatie start pas bij is-visible → werkt ook op de home. */
    .region-map-frame [data-reveal] .region-map .pin,
    .region-map .pin { opacity: 0; transform: translateY(-14px); }
    .is-visible .region-map .pin,
    .region-map-frame.is-visible .region-map .pin {
        animation: pin-drop .5s var(--ease-out) forwards;
        animation-delay: calc(var(--i) * 70ms + 150ms);
    }
    @keyframes pin-drop { to { opacity: 1; transform: translateY(0); } }
}

/* ── Steden-lijst ── */
.region-cities { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.region-city {
    display: inline-block; background: #fff; border: 1px solid var(--line);
    padding: .5rem 1rem; text-decoration: none; color: var(--ink);
    font-family: var(--font-head); font-weight: 700; font-size: .9rem;
    transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.region-city:hover { border-color: var(--brand); color: var(--brand); }

/* ── Lokale pagina: nabijgelegen ── */
.local-near { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

@media (max-width: 860px) {
    .region-grid { grid-template-columns: 1fr; }
}

/* ── Steden gegroepeerd per dienst ── */
.region-services { display: grid; gap: 2rem; }
.region-service { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.region-service:first-of-type { border-top: 0; padding-top: 0; }
.region-service > h3 { font-size: 1.15rem; margin: .2rem 0 1rem; }

/* ── Lokale FAQ op werkgebied-servicepagina's — interactieve accordion ──
   Was een statisch 2-koloms grid; nu klikbare <details>-items met +/– toggle,
   in de huisstijl (haaks, geen kaders behalve dunne scheidingslijn, rood accent). */
.local-faq { max-width: 820px; }
.local-faq__item { border-bottom: 1px solid var(--line); }
.local-faq__item:first-child { border-top: 1px solid var(--line); }
.local-faq__item summary {
    cursor: pointer; list-style: none; position: relative;
    padding: 1.15rem 2.5rem 1.15rem 0;
    font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink);
    transition: color var(--dur) var(--ease-out);
}
.local-faq__item summary::-webkit-details-marker { display: none; }
.local-faq__item summary::after {
    content: '+'; position: absolute; right: .1rem; top: 50%; transform: translateY(-50%);
    font-family: var(--font-head); font-size: 1.6rem; line-height: 1; color: var(--brand);
    transition: transform var(--dur) var(--ease-out);
}
.local-faq__item[open] summary::after { content: '–'; }
.local-faq__item summary:hover { color: var(--brand); }
.local-faq__a { padding: 0 0 1.3rem; }
.local-faq__a p { color: var(--body); line-height: 1.7; margin: 0; max-width: 70ch; }

/* "Wat we doen"-lijst op lokale servicepagina's (ab-specs uit overige.css
   herhaald zodat het ook hier klopt zonder overige.css te laden). */
.svc-intro .ab-specs { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .5rem; }
.svc-intro .ab-specs li { position: relative; padding-left: 1.4rem; color: var(--body); }
.svc-intro .ab-specs li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--brand); transform: skewX(-10deg); }


/* ==== pages/service.css ==== */
/* ════════════════════════════════════════════
   Service-pijlers — Renier Hydraulics
   Rode 24/7-bol → Ruben. De Buf-look: haaks, clip-corner, geen schaduwen.
   ════════════════════════════════════════════ */

/* ══ 24/7-servicebol (signatuur, → Ruben) ══ */
.emergency-bol {
    display: inline-flex; align-items: center; gap: .85rem;
    background: var(--brand); color: #fff;
    font-family: var(--font-head); font-weight: 800;
    text-decoration: none; padding: 1rem 1.6rem;
    text-transform: uppercase; letter-spacing: .5px;
    transform: skewX(var(--skew));
    transition: background var(--dur) var(--ease-out);
}
.emergency-bol > * { transform: skewX(calc(-1 * var(--skew))); }
.emergency-bol:hover { background: var(--brand-dark); color: #fff; }
.emergency-bol__pulse {
    width: 14px; height: 14px; border-radius: 50%; background: #fff; flex: none;
    animation: pulse-dot 1.8s var(--ease-out) infinite;
}
.emergency-bol small { display: block; font-size: .7rem; font-weight: 600; opacity: .85; letter-spacing: 1px; }
.emergency-bol strong { font-size: 1.15rem; }

/* ══ Wat we doen — tekstblok binnen measure ══ */
.svc-intro { max-width: var(--measure); }
/* Sectie-kop binnen svc-intro (bv. "Je machine onderhouden...op locatie of bij
   ons?"): even groot als andere sectie-koppen, niet de kleine h2-default. */
.svc-intro h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; margin-bottom: .9rem; text-wrap: balance; }
/* Een svc-intro die alleen een kop bevat (geen leestekst) mag de volle breedte
   nemen i.p.v. de smalle measure, zodat de titel niet op te veel korte regels valt. */
.svc-intro--wide { max-width: none; }
.svc-intro p { margin-bottom: 1.25rem; }

/* ══ Atelier én op locatie — twee kolommen ══ */
.svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.svc-col {
    background: #fff; border: 1px solid var(--line);
    padding: 2rem 1.75rem;
}
.svc-col__icon { width: 44px; height: 44px; color: var(--brand); margin-bottom: 1rem; }
.svc-col h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.svc-col p { color: var(--body); font-size: .97rem; margin-bottom: 0; }

/* ══ Troeven / USP's ══ */
.svc-usps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.svc-usp {
    border-top: 3px solid var(--brand);
    padding-top: 1rem;
}
.svc-usp h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.svc-usp p { color: var(--muted); font-size: .9rem; margin-bottom: 0; }
/* Subtiele bel-knop binnen een troef-kaart (i.p.v. een losse knop "in the middle
   of nowhere"). Klein, in de sectie, met telefoon-icoon. */
.svc-usp__call {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem;
    font-family: var(--font-head); font-weight: 700; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--brand); text-decoration: none;
    transition: color var(--dur) var(--ease-out);
}
.svc-usp__call svg { width: 14px; height: 14px; flex: none; }
.svc-usp__call:hover { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ══ Grote 24/7 CTA-band (donker) ══ */
.svc-cta {
    position: relative; overflow: hidden;
    background: var(--brand); color: #fff;
    padding: var(--sec-pad-xl) var(--gutter); text-align: center;
}
.svc-cta h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 1.5rem; }
/* Rode CTA-sectie: de bel-knop niet rood-op-rood → wit vlak, rode tekst,
   hover naar donkerrood (merk, geen zwart) met witte tekst. */
.svc-cta .emergency-bol { background: #fff; color: var(--brand); }
.svc-cta .emergency-bol:hover { background: var(--brand-dark); color: #fff; }
.svc-cta .emergency-bol__pulse { background: var(--brand); }
/* Bij hover wordt het vlak donkerrood: het rode bolletje zou dan rood-op-rood
   verdwijnen → maak het mee wit, net als de tekst. */
.svc-cta .emergency-bol:hover .emergency-bol__pulse { background: #fff; }
/* Vangnet: een RODE knop (.btn-primary) op het RODE svc-cta-vlak zou onzichtbaar
   zijn (rood-op-rood). Forceer hem daarom naar wit vlak + rode tekst, met een
   donkerrode sweep en witte tekst bij hover — nooit rood-op-rood, nooit zwart. */
.svc-cta .btn-primary { background: #fff; color: var(--brand); }
.svc-cta .btn-primary::before { background: var(--brand-dark); }
.svc-cta .btn-primary:hover { color: #fff; }
.svc-cta p { color: rgba(255,255,255,.82); max-width: 42ch; margin: 0 auto 1.75rem; }

/* ══ Responsive ══ */
@media (max-width: 860px) {
    .svc-cols { grid-template-columns: 1fr; }
    .svc-usps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .svc-usps { grid-template-columns: 1fr; }
}

/* ══ Atelier/locatie als foto-kaarten i.p.v. iconen ══ */
.svc-col--photo { padding: 0; overflow: hidden; border: 1px solid var(--line); }
.svc-col--photo img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.svc-col--photo .svc-col__body { padding: 1.5rem 1.75rem 1.75rem; }
/* Foto-kaart-kop groter: deze kaarten nemen een halve breedte met een groot
   beeld erboven, dus de titel mag prominenter zijn (niet zo'n kleine kop). */
.svc-col--photo h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; margin-bottom: .5rem; }

/* ══ Full-width foto tussen secties (De Buf-stijl beeld) ══ */
.svc-fullphoto { width: 100%; margin: 0; }
.svc-fullphoto img { width: 100%; height: clamp(280px, 100vh, 800px); object-fit: cover; display: block; }
/* Een .section--soft dwars ná de full-width foto trekt een scheidingslijn
   (border-top) die er los/verdwaald bijhangt onder het beeld. Onder een foto
   hoort die lijn niet → weghalen wanneer de sectie direct op de foto volgt. */
.svc-fullphoto + .section--soft { border-top: 0; margin-top: 0; }

/* ══ Machineonderhoud: keuze-knoppen (atelier / op locatie) + anchors ══ */
.page-hero__lead { color: rgba(255,255,255,.9); max-width: 46ch; margin: 1rem 0 0; font-size: 1.05rem; line-height: 1.6; }
.svc-choice { gap: 1rem; }
/* Sticky header + zichtbare topbar afstand: anchor niet onder de header laten vallen. */
.scroll-anchor { scroll-margin-top: calc(var(--topbar-h, 2.6rem) + 5.5rem); }

/* Onderhoud ≠ depannage — korte kaderende notitie. */
.svc-note {
    max-width: var(--measure);
    border-left: 3px solid var(--brand);
    padding: .25rem 0 .25rem 1.5rem;
}
.svc-note h2 { margin-bottom: .6rem; }
.svc-note p { color: var(--body); margin-bottom: 1.25rem; }

/* ══ Snelkeuze-knoppen (anchors) — machine-knopstijl, wat groter ══ */
.svc-jump__row { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn-lg { padding: 1.05rem 2.4rem; font-size: 1.05rem; }
@media (max-width: 560px) {
    .svc-jump__row { flex-direction: column; }
    .svc-jump__row .btn { width: 100%; justify-content: center; }
}

/* ══ Keuze-kaarten als anchor-links (naar #op-locatie / #atelier) ══ */
.svc-cols--links .svc-col {
    text-decoration: none; color: inherit; overflow: hidden;
    transition: border-color var(--dur) var(--ease-out);
}
.svc-cols--links .svc-col img { transition: transform var(--dur) var(--ease-out); }
.svc-cols--links .svc-col:hover { border-color: var(--brand); }
.svc-cols--links .svc-col:hover img { transform: scale(1.04); }
.svc-cols--links .svc-col:hover .svc-col__more { color: var(--brand-dark); }
.svc-col__more {
    display: inline-block; margin-top: 1rem;
    color: var(--brand); font-family: var(--font-head); font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; font-size: .82rem;
}

/* ══ Contactformulier (dynamisch) ══ */
.contact-form-wrap { max-width: 760px; }
.contact-form { margin-top: 1.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: block; margin-bottom: 1rem; }
.form-field > span { display: block; font-family: var(--font-head); font-weight: 700; font-size: .85rem; margin-bottom: .4rem; color: var(--ink); }
.form-field em { color: var(--brand); font-style: normal; }
.form-field input, .form-field textarea {
    width: 100%; font-family: var(--font-body); font-size: 1rem;
    padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 0;
    background: #fff; color: var(--ink);
    transition: border-color var(--dur) var(--ease-out);
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--brand); }
.form-field textarea { resize: vertical; min-height: 120px; }
.form-foot { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: .5rem; }
.form-status { font-size: .95rem; margin: 0; }
.form-status--ok { color: #1a7f37; font-weight: 600; }
.form-status--err { color: var(--brand); font-weight: 600; }
button[disabled].btn { opacity: .6; cursor: default; }

/* Geselecteerde machines (offerte): lijst + "toevoegen"-knop */
.form-machines[hidden] { display: none; }
.form-machines { margin-bottom: 1.5rem; }
.form-machines__list { display: flex; flex-direction: column; gap: .75rem; }
.form-machines__add {
    display: inline-flex; align-items: center; margin-top: .9rem;
    font-family: var(--font-head); font-weight: 700; font-size: .85rem;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--brand); text-decoration: none;
}
.form-machines__add:hover { color: var(--brand-dark); }

/* Machine-kaartje (bij een offerte-aanvraag) */
.form-machine {
    position: relative;
    display: flex; gap: 1.25rem; align-items: center;
    border: 1px solid var(--line); padding: 1rem; margin: 0;
    background: var(--bg-soft);
}
.form-machine[hidden] { display: none; }
.form-machine__remove {
    position: absolute; top: .4rem; right: .5rem;
    width: 28px; height: 28px; line-height: 1; font-size: 1.4rem;
    border: 0; background: none; color: var(--muted); cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}
.form-machine__remove:hover { color: var(--brand); }
.form-machine__media { flex: 0 0 140px; aspect-ratio: 4/3; overflow: hidden; background: #fff; }
.form-machine__media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; display: block; }
.form-machine__brand { font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--brand); font-weight: 700; }
.form-machine__body h3 { font-size: 1.2rem; margin: .1rem 0 .5rem; }
.form-machine__specs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .9rem; color: var(--body); }
.form-machine__specs strong { font-family: var(--font-head); color: var(--ink); }
@media (max-width: 480px) { .form-machine { flex-direction: column; align-items: flex-start; } .form-machine__media { flex-basis: auto; width: 100%; } }

/* Secundaire link onder de 24/7-bol in de service-CTA. */
.svc-cta__alt { margin: 1.1rem 0 0; font-size: .95rem; color: rgba(255,255,255,.8); }
.svc-cta__alt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.svc-cta__alt a:hover { opacity: .85; }

/* ══ "Plan je onderhoud" — proactief plan-veld + bevestigingskaart ══
   Bezoeker vult plaats in, krijgt zijn eigen plaats terug + Ruben als vast punt.
   Huisstijl: haaks, geen borders, donkere resultaatkaart naast een licht veld. */
.plan__grid {
    max-width: var(--maxw); margin: 0 auto;
    display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.plan__form h2 { margin-bottom: .6rem; }
.plan__form > p { color: var(--body); max-width: 46ch; margin: 0; }
.plan__field { display: block; margin: 1.5rem 0 1.1rem; }
.plan__field > span { display: block; font-family: var(--font-head); font-weight: 700; font-size: .85rem; margin-bottom: .5rem; color: var(--ink); }
.plan__input {
    width: 100%; padding: .95rem 1.1rem; font-size: 1rem; font-family: var(--font-body);
    background: var(--bg-soft); border: 0; border-radius: 0; color: var(--ink);
    box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--dur) var(--ease-out);
}
.plan__input:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--brand); }
.plan__submit { margin-top: .25rem; }
/* Donkere resultaatkaart: wachtstand → gevulde bevestiging (aria-live). */
.plan__result { background: var(--bg-dark); color: #fff; padding: clamp(1.75rem, 4vw, 2.5rem); }
.plan__empty { color: rgba(255,255,255,.6); margin: 0; font-size: 1.05rem; line-height: 1.6; }
.plan__card[hidden] { display: none; }
.plan__card-title { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.1; margin: 0 0 .6rem; }
.plan__card-sub { color: rgba(255,255,255,.8); margin: 0 0 1.5rem; }
.plan__card .emergency-bol { margin-bottom: .9rem; }
.plan__result .btn-outline { display: inline-flex; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.plan__result .btn-outline:hover { box-shadow: inset 0 0 0 2px #fff; }
@media (max-width: 860px) { .plan__grid { grid-template-columns: 1fr; } }

/* ══ Plan-kaart + suggesties (interactief) ══ */
.plan__side { display: flex; flex-direction: column; gap: 1.25rem; }
/* Kaart-frame: wit vlak met haakse hoek (clip-path, geen border). */
.plan__map-frame { background: #fff; padding: 1rem 1rem .5rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.plan__map .region-map { width: 100%; height: auto; display: block; }
.plan__map-caption { margin: .4rem 0 0; font-size: .82rem; color: var(--muted); text-align: center; }
/* Highlight: rust = zachte roze (uit region.css); actief = merk-rood, rest dimt. */
.plan__map.has-active .area { fill: #efe3e3; }
.plan__map .area.is-active { fill: var(--brand); }
.plan__map .pin.is-active circle { fill: var(--ink); }
@media (prefers-reduced-motion: reduce) { .plan__map .area { transition: none; } }

/* Combobox + suggestie-dropdown. */
.plan__combo { position: relative; }
.plan__suggs {
    position: absolute; left: 0; right: 0; top: calc(100% + .3rem); z-index: 20;
    list-style: none; margin: 0; padding: .3rem 0; max-height: 280px; overflow-y: auto;
    background: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.14);
}
.plan__suggs[hidden] { display: none; }
.plan__sugg {
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    padding: .6rem 1rem; cursor: pointer; font-size: .95rem;
}
.plan__sugg:hover, .plan__sugg.is-active { background: var(--bg-soft); }
.plan__sugg strong { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.plan__sugg mark { background: rgba(237,47,47,.18); color: inherit; padding: 0 .1em; }
.plan__sugg-prov { color: var(--muted); font-size: .82rem; }
.plan__nomatch { margin: .85rem 0 0; font-size: .9rem; color: var(--body); }
.plan__card-time { color: rgba(255,255,255,.7); font-size: .9rem; margin: 0 0 .9rem; }
.plan__card-time[hidden] { display: none; }
/* Op mobiel: kaart onder het formulier, resultaat eronder — grid stapelt al. */


/* ==== pages/machines.css ==== */
/* ════════════════════════════════════════════
   Machines — catalogus (hub, categorie, detail)
   De Buf-look: haakse hoeken, clip-corner op media, geen schaduwen.
   ════════════════════════════════════════════ */

/* ══ Hub: 6 categorie-kaarten met machine-iconen ══ */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.cat-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line);
    padding: 2rem 1.75rem; text-decoration: none;
    transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.cat-card:hover { border-color: var(--brand); background: var(--bg-soft); }
.cat-card__art { height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; overflow: hidden; }
.cat-card__art img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; transition: transform var(--dur) var(--ease-out); }
.cat-card:hover .cat-card__art img { transform: scale(1.06); }
.cat-card h3 { font-size: 1.3rem; margin-bottom: .25rem; }
.cat-card__count { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }
.cat-card__more { margin-top: auto; color: var(--brand); font-weight: 700; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .5px; font-size: .85rem; }

/* ══ Categorie-layout ══ */
.cat-layout { max-width: var(--maxw); margin: 0 auto; padding: var(--sec-pad) var(--gutter); }
/* Detailpagina: veel minder witruimte bovenaan dan een categorie-overzicht — de
   "← Alle …"-link + galerij mogen dichter onder de header beginnen. */
.cat-layout--detail { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.cat-intro { max-width: var(--measure); margin-bottom: 2rem; }

/* ── Filterbalk ── */
.filters {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
    padding: 1.25rem; background: var(--bg-soft);
    border: 1px solid var(--line); margin-bottom: 2rem;
}
.filter-field { display: flex; flex-direction: column; gap: .35rem; }
.filter-field label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.filter-field select { min-width: 160px; }
.filters__meta { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.filters__count { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.filters__reset {
    background: none; border: 0; color: var(--brand); font-weight: 700;
    font-family: var(--font-head); cursor: pointer; text-transform: uppercase;
    letter-spacing: .5px; font-size: .85rem; padding: 0;
}
.filters__reset:hover { color: var(--brand-dark); }

/* ── Modelgrid ── */
.model-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.model-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line);
    text-decoration: none; overflow: hidden;
    transition: border-color var(--dur) var(--ease-out);
}
.model-card:hover { border-color: var(--brand); }
.model-card__media {
    position: relative; aspect-ratio: 4 / 3; background: #fff;
    overflow: hidden; --notch: 40px;
}
/* Machinefoto's wisselen sterk van compositie/kwaliteit (soms machine groot,
   soms klein, soms buiten kader). 'contain' + witte bg houdt ELKE machine
   volledig in beeld i.p.v. bijgesneden — de klant wil de machine altijd volledig
   zien. Iets padding zodat ze niet tegen de rand plakken. Werkt overal omdat de
   renders op witte achtergrond staan en het media-vak ook wit is. */
.model-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 3%; transition: transform var(--dur) var(--ease-out); }
.model-card:hover .model-card__media img { transform: scale(1.03); }
.model-card__media .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .8rem; }
.model-card__body { padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.model-card__brand { font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--brand); font-weight: 700; margin-bottom: .2rem; }
.model-card h3 { font-size: 1.15rem; margin-bottom: .3rem; }
/* Spreektaal-klasse-tag onder de modelnaam op de card ("de 4,2-tonner"). */
.model-card__klasse { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .6rem; }
.model-card__specs { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.model-card__specs li { font-size: .85rem; color: var(--body); }
.model-card__specs strong { font-family: var(--font-head); color: var(--ink); }
/* Exacte kilo's naast het tonnage: kleiner, grijs, subtiel — precies maar niet luid. */
.model-card__specs-sub { display: block; font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.model-card__more { margin-top: auto; color: var(--brand); font-weight: 700; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .5px; font-size: .82rem; }

.model-empty { padding: 3rem 1rem; text-align: center; color: var(--muted); grid-column: 1 / -1; }

/* ══ Detail-weergave ══ */
.detail-back { display: inline-flex; align-items: center; gap: .4rem; color: var(--brand); font-weight: 700; text-decoration: none; margin-bottom: 1.5rem; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .5px; font-size: .85rem; }
.detail-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.detail-gallery__main { position: relative; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; --notch: 70px; }
/* Hoofdfoto altijd 'contain' zodat de machine volledig in beeld staat (nooit
   bijgesneden), ongeacht de compositie van de bronfoto. Witte bg = naadloos. */
.detail-gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.detail-gallery__main .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.detail-gallery__thumbs { display: flex; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.detail-gallery__thumbs button { width: 72px; height: 56px; padding: 0; border: 1px solid var(--line); background: #fff; cursor: pointer; overflow: hidden; }
.detail-gallery__thumbs button.is-active { border-color: var(--brand); }
/* Thumbnails ook 'contain' + witte bg zodat de hele machine zichtbaar blijft. */
.detail-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 4%; }
/* Pijltjes-navigatie over de hoofdfoto: wit vlak, rode pijl; hover → rood vlak,
   witte pijl (geen kleur-op-kleur, geen zwart). */
.detail-gallery__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.9); color: var(--brand); border: 0; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    z-index: 2;
}
.detail-gallery__nav svg { width: 22px; height: 22px; }
.detail-gallery__nav:hover { background: var(--brand); color: #fff; }
.detail-gallery__nav--prev { left: 0; }
.detail-gallery__nav--next { right: 0; }
/* Verwijzing na verkoop → onderhoud/depannage (in het info-blok). */
.detail-info__after { margin-top: 1rem; font-size: .92rem; color: var(--muted); }
.detail-info__after a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
/* Mobiel: het aftersales-blok ("Ook na de verkoop...") ná de "Bekijk de
   technische fiche"-knop tonen. .detail-info wordt flex-column zodat we met
   order het aftersales-blok naar onder de fiche-knop kunnen duwen. Desktop
   ongewijzigd (aftersales blijft op zijn plek boven de spec-tabel). */
@media (max-width: 760px) {
    .detail-info { display: flex; flex-direction: column; }
    .detail-info .aftersales { order: 10; }
}

/* ── Na-verkoop-melding (aftersales) ──────────────────────────────────────────
   Rustig melding-blok: enkel een zacht achtergrondvlak, GEEN borders/kaderlijnen
   (huisstijl). Haakse hoeken. */
.aftersales {
    margin-top: 1.5rem; background: var(--bg-soft); padding: 1.15rem 1.3rem;
}
.aftersales__title {
    font-family: var(--font-head); font-weight: 800; font-size: .95rem; color: var(--ink);
    margin: 0 0 .4rem; display: flex; align-items: center; gap: .5rem;
}
.aftersales__title svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
.aftersales p { font-size: .9rem; color: var(--body); margin: 0; line-height: 1.5; }
.aftersales a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
/* Korte opsomming i.p.v. een lopende zin: onderhoud · depannage · aanbouwdelen · smeermiddelen. */
.aftersales__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.aftersales__list li { position: relative; font-size: .9rem; }
.aftersales__list li + li::before { content: "·"; color: var(--muted); position: absolute; left: -.7rem; }
/* De subtiele belregel onderaan: "De beller is sneller · Bel Arno" — klein, niet
   als knop maar als klikbare tekstlink met telefoon-icoon. */
.aftersales__call {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .7rem;
    font-family: var(--font-head); font-weight: 700; font-size: .82rem;
    color: var(--brand); text-decoration: none;
}
.aftersales__call svg { width: 14px; height: 14px; flex: none; }
.aftersales__call strong { font-weight: 800; }
.aftersales__call:hover .aftersales__call-label { text-decoration: underline; text-underline-offset: 2px; }
.aftersales__call-sep { color: var(--muted); }
/* Enkel op mobiel tonen: op desktop belt men niet vanaf de pagina. */
@media (min-width: 981px) { .aftersales__call { display: none; } }

.detail-info__brand { font-size: .82rem; text-transform: uppercase; letter-spacing: 1px; color: var(--brand); font-weight: 700; }
.detail-info h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: .2rem 0 .5rem; }
/* Spreektaal-klasse-label ("In de volksmond: de 4,2-tonner") — herkenbaar,
   klein, rustig grijs met een sterke ton-klasse. */
.detail-info__klasse { font-size: .92rem; color: var(--muted); margin: 0 0 .6rem; }
.detail-info__klasse strong { color: var(--ink); font-family: var(--font-head); font-weight: 700; }
.detail-info__sub { color: var(--muted); margin-bottom: 1.25rem; }
.detail-info__desc { max-width: var(--measure); margin-bottom: 1.5rem; }
.detail-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.5rem; }

.spec-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.spec-table th, .spec-table td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); font-size: .95rem; }
.spec-table th { font-family: var(--font-body); font-weight: 600; color: var(--muted); width: 45%; }
.spec-table td { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
/* Exacte kilo's naast het tonnage in de fiche: kleiner, grijs, lichter gewicht. */
.spec-table__sub { font-family: var(--font-body); font-weight: 400; color: var(--muted); font-size: .82rem; margin-left: .3rem; }

.detail-cta { position: relative; overflow: hidden; background: var(--brand); color: #fff; padding: var(--sec-pad) var(--gutter); text-align: center; }
.detail-cta h2 { color: #fff; margin-bottom: 1.25rem; }
.detail-cta .hero__actions { justify-content: center; }
/* Rode CTA-sectie → knop niet rood-op-rood: wit vlak, rode tekst; sweep in
   donkerrood (merk, geen zwart), tekst wordt wit. */
.detail-cta .btn-primary { background: #fff; color: var(--brand); }
.detail-cta .btn-primary::before { background: var(--brand-dark); }
.detail-cta .btn-primary:hover { color: #fff; }

/* ── Productbeschrijving (detail-desc) — in linkerkolom, onder de galerij ── */
.detail-media-col { display: flex; flex-direction: column; }
.detail-desc { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.detail-desc h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin-bottom: .9rem; }
.detail-desc p { color: var(--muted); line-height: 1.75; margin: 0 0 1rem; max-width: 65ch; }
.detail-desc p:last-child { margin-bottom: 0; }

/* Rode "bekijk fiche"-anker onder de specs (met lucht t.o.v. de tabel-borderline). */
.detail-info__fiche { display: inline-flex; align-items: center; margin-top: 1.25rem; }
.detail-info__fiche svg { width: 1.05em; height: 1.05em; margin-left: .5rem; }

/* ── Technische fiche (detail-fiche) — PDF-preview (embed) + download-kaart ──
   De <object> toont de fiche inline waar het kan; lukt dat niet (mobiel, PDF-
   blokkade), dan valt hij terug op de kaart. Zo is de preview er én werkt het
   overal. Huisstijl: zacht achtergrondvlak, geen kaderlijnen, haakse hoeken. */
.detail-fiche { scroll-margin-top: 90px; }
.detail-fiche { padding: var(--sec-pad) var(--gutter); }
.detail-fiche .wrap { max-width: 1100px; margin: 0 auto; }
/* PDF-preview-box: vaste hoogte, zacht vlak; op mobiel verbergen we de embed
   (die werkt daar toch niet) en laten we alleen de kaart eronder staan. */
.detail-fiche__preview { width: 100%; height: min(75vh, 780px); background: var(--bg-soft); margin-bottom: 1.25rem; overflow: hidden; }
.detail-fiche__preview object { display: block; width: 100%; height: 100%; }
@media (max-width: 760px) { .detail-fiche__preview { display: none; } }
.detail-fiche__card {
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
    background: var(--bg-soft); padding: 1.5rem 1.75rem;
}
.detail-fiche__card-icon { flex: none; color: var(--brand); }
.detail-fiche__card-icon svg { width: 40px; height: 40px; display: block; }
.detail-fiche__card-body { flex: 1 1 240px; }
.detail-fiche__card-title { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--ink); margin: 0 0 .2rem; }
.detail-fiche__card-sub { font-size: .9rem; color: var(--muted); margin: 0; }
.detail-fiche__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
@media (max-width: 560px) {
    .detail-fiche__actions { width: 100%; }
    .detail-fiche__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ══ Responsive ══ */
@media (max-width: 980px) {
    .cat-grid, .model-grid { grid-template-columns: repeat(2, 1fr); }
    .detail-top { grid-template-columns: 1fr; }
    /* .caller-btn--desktop wordt sitebreed verborgen <980px (zie brand.css). */
}
@media (max-width: 560px) {
    .cat-grid, .model-grid { grid-template-columns: 1fr; }
    .filters__meta { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ════════════════════════════════════════════
   NIEUWE CATALOGUS-LAYOUT — visuele filters links + productfeed rechts
   (Cebeko/Key-Tec-stijl). Geen page-hero; korte uitleg boven de feed.
   ════════════════════════════════════════════ */
.cat-intro-band { max-width: var(--maxw); margin: 0 auto; padding: clamp(2rem,5vw,3.5rem) var(--gutter) 1.5rem; }
.cat-intro-band .eyebrow--r { color: var(--brand); }
.cat-intro-band h1 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: .75rem; }
.cat-intro-band p { max-width: 70ch; color: var(--body); }
.cat-intro-band .usp-row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.25rem; }
.cat-intro-band .usp-row span { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--ink); }
.cat-intro-band .usp-row span::before { content: ''; width: 16px; height: 16px; background: var(--brand); -webkit-mask: url('../images/r-mark.svg') no-repeat center/contain; mask: url('../images/r-mark.svg') no-repeat center/contain; }

/* ── Categorie-wisselaar (horizontale pills) — ALLEEN op mobiel/tablet ──
   Op desktop navigeer je via het hoofdmenu; daar is deze balk verborgen. */
.cat-switch { display: none; }
@media (max-width: 900px) {
  /* Categoriepagina: cat-switch is een losse child → eigen max-width + gutter
     zodat hij met .cat-intro-band en .catalog uitlijnt. */
  .cat-switch { display: block; max-width: var(--maxw); margin: 0 auto 1rem; padding: 0 var(--gutter); }
  /* Detailpagina: zit al binnen .cat-layout (die max-width + gutter regelt) →
     geen dubbele beperking, anders staat de balk smaller/verschoven. */
  .cat-layout .cat-switch { max-width: none; margin: 0 0 1rem; padding: 0; }
}
.cat-switch__scroll {
  display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .5rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;   /* momentum-scroll, geen snap = smooth */
  cursor: grab;
}
.cat-switch__scroll::-webkit-scrollbar { display: none; }
.cat-switch__scroll.is-grabbing { cursor: grabbing; }
.cat-switch__scroll.is-grabbing a { pointer-events: none; }
.cat-switch__item img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.cat-switch__item {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem; border: 1px solid var(--line);   /* hoekig, geen border-radius */
  font-family: var(--font-head); font-weight: 700; font-size: .85rem; color: var(--ink);
  text-decoration: none; white-space: nowrap; transition: border-color .15s, background .15s;
}
.cat-switch__item img { width: 22px; height: 22px; object-fit: contain; }
.cat-switch__item:hover { border-color: var(--brand); }
.cat-switch__item.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.cat-switch__item.is-active img { filter: brightness(0) invert(1); }

.catalog { max-width: var(--maxw); margin: 0 auto; padding: 1rem var(--gutter) var(--sec-pad); display: grid; grid-template-columns: 280px 1fr; gap: 2.5rem; align-items: start; }

/* ── Filterpaneel (links, sticky, scrollbaar bij veel filters) ── */
.filter-panel { position: sticky; top: 90px; display: flex; flex-direction: column; max-height: calc(100vh - 110px); }
/* Scrollbaar, maar zonder zichtbare scrollbalk (scroll blijft werken). */
.filter-panel [data-filters] { overflow-y: auto; overscroll-behavior: contain; padding-right: .5rem; margin-right: -.5rem; flex: 1 1 auto; scrollbar-width: none; -ms-overflow-style: none; }
.filter-panel [data-filters]::-webkit-scrollbar { width: 0; height: 0; display: none; }
.filter-group.is-gone, .filter-chip.is-gone, .filter-more.is-gone { display: none !important; }
.filter-panel__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 2px solid var(--ink); flex: 0 0 auto; }
.filter-panel__head h2 { font-size: 1.15rem; margin-right: auto; }
.filter-reset { background: none; border: 0; color: var(--brand); font-family: var(--font-head); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; }
.filter-reset:hover { color: var(--brand-dark); }
.filter-group { margin-bottom: 1.75rem; }
.filter-group__label { font-family: var(--font-head); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--ink); margin-bottom: .75rem; }
/* keuze-chips (geen dropdown) */
.filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .85rem; border: 1px solid var(--line); background: #fff;
    font-family: var(--font-body); font-size: .85rem; font-weight: 600; color: var(--ink);
    cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
}
.filter-chip:hover { border-color: var(--brand); }
.filter-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.filter-chip svg { width: 18px; height: 18px; }
.filter-chip .count { opacity: .6; font-size: .75rem; }
.filter-chip.is-active .count { opacity: .85; }

/* Ingeklapte chips (zichtbaarheid door JS via .is-hidden) + "toon meer"-knop. */
.filter-chip.is-hidden { display: none; }
.filter-chip__icon { width: 20px; height: 20px; object-fit: contain; }

/* ── Merk-chip: compact vierkantje met enkel het logo (grijs) + het aantal ── */
.filter-chip--merk {
  flex: 0 0 auto;                 /* niet oprekken in de flex-wrap rij */
  flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  width: 80px; height: 80px; padding: .5rem;
  background: #fff;               /* logo's blijven ALTIJD op wit → altijd leesbaar */
}
.filter-chip__logo {
  max-width: 100%; max-height: 30px; object-fit: contain;
  filter: grayscale(1);          /* rustig grijs; bij selectie → kleur (zie hieronder) */
  opacity: .7;
  transition: filter var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.filter-chip--merk:hover .filter-chip__logo { opacity: 1; }
/* Selectie: NIET vol rood vullen (dan verdwijnt het logo), maar de tegel wit houden
   met een dikke rode kader + het logo in echte kleur. Zo blijft elk logo — ook de
   wit-op-transparante of het Thwaites-blok — helder en herkenbaar. */
.filter-chip--merk.is-active {
  background: #fff; color: var(--ink);
  border-color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand);
}
.filter-chip--merk.is-active .filter-chip__logo { filter: none; opacity: 1; }
.filter-chip--merk .count { display: block; line-height: 1; font-size: .72rem; color: var(--muted); }
.filter-chip--merk.is-active .count { color: var(--brand); font-weight: 700; opacity: 1; }

.filter-more {
  margin-top: .6rem; background: none; border: none; padding: 0; cursor: pointer;
  color: var(--brand); font-family: var(--font-head); font-weight: 700;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .5px;
}
.filter-more:hover { text-decoration: underline; }

/* "Toon meer" onder het productgrid. */
.model-more-wrap { display: flex; justify-content: center; margin-top: 2rem; }
.model-more-wrap:empty { margin-top: 0; }

/* ── Gewicht-range-slider (dual-handle) ── */
/* --thumb = diameter; de track/fill krijgen half-thumb padding zodat de
   gekleurde lijn exact onder de bolletjes-middens loopt (synchroon). */
.filter-group--range .range-slider { position: relative; height: 24px; margin-top: .4rem; --thumb: 20px; }
.range-slider__track {
  position: absolute; left: calc(var(--thumb) / 2); right: calc(var(--thumb) / 2);
  top: 50%; transform: translateY(-50%); height: 5px; border-radius: 3px; background: var(--line);
}
.range-slider__fill { position: absolute; top: 0; bottom: 0; background: var(--brand); border-radius: 3px; }
/* De inputs vullen de VOLLE breedte; de browser plaatst de thumb-middens dan
   op dezelfde reeks als de track (die met half-thumb is ingekort). */
.range-slider__input {
  position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 24px;
  /* Reset de globale input-styling uit brand.css (border/box/achtergrond weg). */
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  pointer-events: none; -webkit-appearance: none; appearance: none;
}
.range-slider__input:focus { outline: none; }
.range-slider__input::-webkit-slider-runnable-track { background: transparent; border: 0; height: 24px; }
.range-slider__input::-moz-range-track { background: transparent; border: 0; height: 24px; }
.range-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: var(--thumb); height: var(--thumb); border-radius: 50%; background: #fff;
  border: 2px solid var(--brand); box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; margin-top: 0;
}
.range-slider__input::-moz-range-thumb {
  pointer-events: auto; box-sizing: border-box;
  width: var(--thumb); height: var(--thumb); border-radius: 50%; background: #fff;
  border: 2px solid var(--brand); box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
}
.range-slider__readout {
  margin-top: .5rem; font-family: var(--font-head); font-weight: 700;
  font-size: .85rem; color: var(--ink);
}

/* ── Feed (rechts) ── */
.catalog__feed { min-width: 0; }
.feed-head { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1.5rem; }
.feed-count { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; margin-right: auto; }
/* Sorteer-dropdown rechts in de feed-header. */
.feed-sort { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.feed-sort__label { font-family: var(--font-head); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); white-space: nowrap; }
.feed-sort select { padding: .55rem .8rem; font-size: .9rem; cursor: pointer; max-width: 100%; }
.feed-filter-toggle { display: none; }
.filter-close { display: none; }  /* alleen zichtbaar op mobiel */

/* Mobiel: filters als uitklap boven de feed */
@media (max-width: 900px) {
    .catalog { grid-template-columns: 1fr; }
    .filter-panel { position: static; display: none; border: 1px solid var(--line); padding: 1.25rem; margin-bottom: 1.5rem; max-height: none; }
    .filter-panel.is-open { display: flex; flex-direction: column; }
    .filter-panel [data-filters] { overflow: visible; max-height: none; }
    /* Sluitknop rechtsboven in het paneel. */
    .filter-close { display: inline-flex; align-items: center; gap: .35rem; background: var(--ink); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; padding: .5rem .9rem; border: 0; cursor: pointer; }
    .filter-panel__head { align-items: center; }
    .feed-filter-toggle { display: inline-flex; align-items: center; gap: .5rem; background: var(--ink); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .85rem; text-transform: uppercase; padding: .6rem 1rem; border: 0; cursor: pointer; }
    .feed-filter-toggle.is-active { background: var(--brand); }
    /* Rij 1: FILTERS + Sorteer naast elkaar. Count komt HELEMAAL onderaan,
       vlak boven de producten. Label verbergen zodat de dropdown smal blijft. */
    .feed-head { align-items: stretch; }
    .feed-filter-toggle { order: 1; flex: 0 0 auto; }
    .feed-sort { order: 2; flex: 1 1 0; min-width: 0; }
    .feed-sort__label { display: none; }
    .feed-sort select { flex: 1 1 auto; min-width: 0; width: 100%; }
    .feed-count { order: 3; flex: 1 0 100%; margin: .25rem 0 0; }
}


/* ── Responsive model-grid + gerelateerde producten (mobiel) ── */
.model-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (max-width: 1024px) { .model-grid, .model-grid[style] { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .model-grid, .model-grid[style] { grid-template-columns: 1fr !important; gap: 1.25rem; } }

/* ── FAQ (detailpagina) — veelgestelde vragen, uitklapbaar ── */
/* .wrap loopt op --maxw + --gutter, gelijk aan de nav/hero/home-secties. */
.page-faq { padding: var(--sec-pad) 0; }
.page-faq .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
/* Detailpagina's zitten in .cat-layout, dat zelf al zijpadding heeft. Laat de
   FAQ daarover uitlopen zodat de vragen exact dezelfde maximale breedte hebben
   als op de categoriepagina's. */
.cat-layout--detail > .page-faq { width: calc(100% + (2 * var(--gutter))); margin-left: calc(-1 * var(--gutter)); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; padding: 1.1rem 2rem 1.1rem 0; position: relative; font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--brand); line-height: 1; }
.faq-item[open] summary::after { content: '–'; }
.faq-item summary:hover { color: var(--brand); }
.faq-item__a { padding: 0 0 1.2rem; }
.faq-item__a p { color: var(--muted); line-height: 1.75; margin: 0; max-width: 70ch; }
/* Keuze-FAQ ("welke machine voor taak X"): link naar het aangeraden model. */
.faq-item__link { margin-top: .7rem !important; }
.faq-item__link a { color: var(--brand); font-weight: 600; text-decoration: none; }
.faq-item__link a:hover { text-decoration: underline; }

/* ── Statische model-index (hub-index): crawlbare <a href> naar ALLE
   productpagina's (alle categorieën), gegroepeerd per categorie. Volledige
   interne verbinding voor crawlen/AI-search + handige "alle machines"-lijst. ── */
.hub-index { padding: var(--sec-pad) var(--gutter); }
.hub-index .wrap { max-width: 1100px; margin: 0 auto; }
/* Groep per categorie, met tussenkop. */
.hub-index__group { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.hub-index__group:first-of-type { margin-top: 1.25rem; }
.hub-index__cat {
    font-family: var(--font-head); font-weight: 700;
    font-size: 1.05rem; text-transform: uppercase; letter-spacing: .5px;
    color: var(--ink); margin: 0 0 .5rem;
    padding-bottom: .5rem; border-bottom: 2px solid var(--brand);
    display: inline-block;
}
.hub-index__list {
    list-style: none; margin: .5rem 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .1rem 1.5rem;
}
.hub-index__list li { border-bottom: 1px solid var(--line); }
.hub-index__list a {
    display: block; padding: .6rem .2rem;
    color: var(--body); text-decoration: none; font-size: .95rem;
    transition: color var(--dur-fast) var(--ease-out);
}
.hub-index__list a:hover { color: var(--brand); }


/* ==== pages/machine-advies.css ==== */
/* Machine-adviseur (verborgen testpagina, fase 4).
 *
 * Indeling zoals een chatvenster: een leeg vlak dat het scherm vult met de
 * typbalk vast onderaan. Geen kop, geen begroeting, geen voorgestelde vragen;
 * de bezoeker begint zelf te typen. Het gesprek vult daarna het vlak van boven
 * naar beneden en de balk blijft staan waar hij staat.
 *
 * Wel in huisstijl, en dat is meer dan een kleurtje: GEEN afgeronde hoeken
 * (--radius: 0), rood is het enige accent, geen borders als decoratie.
 */

.advies {
    display: flex;
    flex-direction: column;
    /* Vult het scherm onder topbar + header. Valt terug op een veilige waarde
       als de kop ooit van hoogte verandert. */
    min-height: calc(100dvh - 132px);
    background: var(--bg);
}

.advies__wrap {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.advies__scroll {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* Ruime onderrand: de balk is sticky en blijft in beeld, dus het gesprek
       schuift eronder door. Zonder deze ruimte verdwijnt de laatste regel van
       het laatste kaartje erachter. */
    padding: 2rem 0 3.5rem;
}

/* Duidelijk zichtbaar dat dit nog niet live is. Weg bij uitrol. */
.advies__proef {
    display: inline-block;
    margin: 0 0 1.25rem;
    padding: .3rem .6rem;
    background: var(--bg-soft);
    color: var(--muted);
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}


.advies__intro {
    max-width: var(--measure);
    color: var(--body);
    margin: 0;
}

/* ── De balk: blijft onderaan in beeld ───────────────────────────────── */
.advies__dock {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 1rem 0 1.25rem;
    background: var(--bg);
}

/* Zachte overgang zodat tekst niet hard achter de balk verdwijnt. */
.advies__dock::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 100%;
    height: 2.5rem;
    background: linear-gradient(to top, var(--bg), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.advies__balk {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--bg-soft);
    transition: box-shadow var(--dur-fast) var(--ease-out);
}

.advies__balk:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }

.advies__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.1rem 1.25rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: var(--radius);
}

.advies__input::placeholder { color: var(--muted); }
.advies__input:focus { outline: none; }

.advies__verstuur {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    padding: 0;
    background: var(--brand);
    border: 0;
    color: #fff;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}

.advies__verstuur svg { width: 1.15rem; height: 1.15rem; }
.advies__verstuur:hover { background: var(--brand-dark); }
.advies__verstuur[disabled] { opacity: .45; pointer-events: none; }

/* ── Chips: wat we begrepen hebben ───────────────────────────────────── */
.advies__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .75rem;
}

.advies__chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .5rem .3rem .65rem;
    background: var(--bg-soft);
    color: var(--body);
    font-size: .8rem;
    line-height: 1.2;
}

.advies__chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}

.advies__chip button:hover { color: var(--brand); }

/* ── Gesprek ─────────────────────────────────────────────────────────── */
.advies__gesprek { display: flex; flex-direction: column; gap: 2.25rem; }

.advies__beurt { display: flex; flex-direction: column; gap: 1rem; }

/* Een blok van de assistent: het R-merkje links, de tekst ernaast. Zonder dat
   merkje leest een antwoord als losse tekst op een pagina; met het merkje ziet
   het eruit als iemand die iets zegt. */
.advies__van-ons {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
}

/* Het merkteken uit de favicon: rode R met de sleutel erin, op transparant.
   Dus geen rood vlakje eronder, daar valt hij tegen weg. */
.advies__merk {
    flex: 0 0 auto;
    width: 1.6rem;
    height: auto;
    margin-top: .3rem;
    user-select: none;
}

/* Typende puntjes: het beeld dat iedereen kent van "hij is aan het typen".
   Een statisch "Even zoeken..." voelt als wachten, dit als iemand die
   antwoordt. */
.advies__typt {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 1.85rem;
}

.advies__typt span {
    width: .45rem;
    height: .45rem;
    background: var(--muted);
    animation: adviesTypt 1.2s var(--ease-inout) infinite;
}

.advies__typt span:nth-child(2) { animation-delay: .18s; }
.advies__typt span:nth-child(3) { animation-delay: .36s; }

@keyframes adviesTypt {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-.25rem); }
}

@media (prefers-reduced-motion: reduce) {
    .advies__typt span { animation: none; opacity: .55; }
}

/* De vraag van de bezoeker: rechts, in een blok. Het antwoord links, als
   lopende tekst naast het merkteken. Dat is de indeling die iedereen kent. */
.advies__vraag {
    align-self: flex-end;
    max-width: 80%;
    margin: 0;
    padding: .7rem 1rem;
    background: var(--ink);
    color: #fff;
    font-size: .95rem;
}

.advies__antwoord {
    max-width: var(--measure);
    margin: 0;
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1.6;
}

.advies__bezig { color: var(--muted); font-style: italic; }
.advies__fout { color: var(--brand); }

/* ── Machinekaartjes ─────────────────────────────────────────────────── */
/* Uitgelijnd met de tekst naast het merkje, niet met de rand van het blok. */
.advies__machines {
    margin-left: 2.4rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .85rem;
}

.advies__kaart {
    display: flex;
    flex-direction: column;
    background: var(--bg-soft);
    color: inherit;
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-out);
}

.advies__kaart:hover { transform: translateY(-3px); }

.advies__kaart figure {
    margin: 0;
    aspect-ratio: 4 / 3;
    background: #fff;
    overflow: hidden;
}

/* Machinefoto's altijd volledig in beeld, nooit bijsnijden. Vaste huisregel. */
.advies__kaart img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.advies__kaart-tekst { padding: .75rem .9rem .9rem; }

.advies__kaart-naam {
    display: block;
    /* Twee regels ruimte: sommige namen breken af ("Case Construction
       CX145D"), en dan zouden de specs eronder verspringen tussen kaartjes. */
    min-height: 2.3em;
    font-family: var(--font-head);
    font-size: .9rem;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: .3rem;
}

.advies__kaart-spec {
    display: block;
    font-size: .78rem;
    color: var(--muted);
    line-height: 1.5;
}

/* ── Vervolgvraag ────────────────────────────────────────────────────── */
.advies__vervolg { display: flex; flex-direction: column; gap: .7rem; margin-left: 2.4rem; }

.advies__vervolg-tekst {
    margin: 0;
    font-family: var(--font-head);
    font-size: .95rem;
    line-height: 1.4;
    color: var(--ink);
}

.advies__opties { display: flex; flex-wrap: wrap; gap: .5rem; }

.advies__optie {
    padding: .55rem .9rem;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: .88rem;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.advies__optie:hover { background: var(--bg-soft); border-color: var(--ink); }
.advies__optie:disabled { opacity: .4; pointer-events: none; }
.advies__optie small { color: var(--muted); margin-left: .3rem; }

/* ── Doorschakelen naar een mens ─────────────────────────────────────── */
.advies__mens {
    margin: .85rem 0 0;
    color: var(--muted);
    font-size: .82rem;
}

.advies__mens a { color: var(--brand); font-weight: 600; }

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

@media (max-width: 560px) {
    .advies { min-height: calc(100dvh - 104px); }
    .advies__machines,
    .advies__vervolg { margin-left: 0; }
    .advies__machines { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Het aanbod om verder te gaan waar u gebleven was. Bewust rustiger dan een
   antwoordbubbel: het is geen antwoord op een vraag, het is een aanbod. */
.advies__eerder {
    margin: 1rem 0 0 3rem;
    padding: .85rem 1rem;
    background: var(--bg-soft);
    font-size: .95rem;
    color: var(--body);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.advies__eerder .advies__optie { margin: 0; }

@media (max-width: 640px) {
    .advies__eerder { margin-left: 0; }
}


/* ==== pages/home.css ==== */
/* ════════════════════════════════════════════
   Homepage — Renier Hydraulics (De Buf-look)
   Full-bleed foto's, blok-per-blok, haakse hoeken, clip-corner,
   tekst binnen measure-breedte, geen schaduwen/ronde hoeken.
   ════════════════════════════════════════════ */

/* ══ HERO — full-bleed foto + tekst-overlay ══ */
.hero {
    position: relative;
    min-height: min(88vh, 760px);
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
    background: var(--bg-dark);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media img:not([src]) { display: none; }
.hero__media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(15,16,18,.85) 0%, rgba(15,16,18,.6) 45%, rgba(15,16,18,.25) 100%);
}
/* placeholder tot de foto geüpload is */
.hero__media--empty { background: linear-gradient(115deg, #16181b 0%, #2a2c30 60%, #3a1414 100%); }

.hero__inner {
    position: relative; z-index: 1;
    max-width: var(--maxw);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.hero__body { max-width: 640px; }
.hero .eyebrow { color: #fff; opacity: .85; }
.hero h1 {
    color: #fff;
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    line-height: 1.05;
    margin-bottom: 1.1rem;
}
.hero__tagline {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    color: rgba(255,255,255,.9);
    max-width: 34ch;
    margin-bottom: 2rem;
}
/* .hero__actions basis staat nu in brand.css (flex + wrap + gap, sitebreed).
   De home-HERO wil no-wrap: dat wordt gescoped in brand-identity.css
   (.hero--diag .hero__actions). De contact-cta hier mag wél wrappen. */
.hero__accent { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--brand); z-index: 2; }
/* Branding: groot wit R-merk als OUTLINE-watermerk rechtsonder in de hero.
   Geen gevuld silhouet maar een dunne witte contour (r-mark-outline.svg), subtiel
   en deels buiten beeld (geklipt door hero overflow:hidden) zodat het als
   merkaccent aanvoelt. Iets hoger geplaatst dan de onderrand. */
.hero__brandmark {
    position: absolute; right: -2%; bottom: -5%; z-index: 1;
    width: clamp(180px, 26vw, 200px); aspect-ratio: 73 / 85;
    opacity: .38; pointer-events: none;
    background: url('../images/r-mark-outline.svg') no-repeat center / contain;
}
/* Op mobiel verbergen: op de kleine hero neemt het R-merk te veel plaats /
   overlapt het de content. */
@media (max-width: 760px) { .hero__brandmark { display: none; } }

/* Google-reviews in de hero — live score via /api/reviews (reviews.js).
   Als BADGE linksonder in het rode hero-vlak, met een negatieve linker-overhang
   (zoals de "Ons team"-media-labels): steekt links uit en wordt geklipt door
   .hero--diag (overflow:hidden). Witte kaart zodat het Google-logo leesbaar is. */
.hero__reviews {
    position: absolute; left: -5px; bottom: 0; z-index: 3;
    display: inline-flex; align-items: center; gap: .5rem;
    text-decoration: none;
    /* Subtieler: donker-transparant i.p.v. hard wit, zodat de titel eerst
       leidt en de badge pas daarna opvalt. Kleiner + compacter. */
    background: rgba(15,16,18,.4); color: #fff;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    padding: .4rem .8rem .4rem 1.15rem;
    font-family: var(--font-body); font-weight: 600;
    transform: skewX(var(--skew)); transform-origin: left bottom;
    transition: background var(--dur-fast) var(--ease-out);
}
.hero__reviews > * { transform: skewX(calc(-1 * var(--skew))); }   /* inhoud recht */
.hero__reviews:hover { background: rgba(15,16,18,.6); }
.hero__reviews-g { width: 17px; height: 17px; flex: none; }
.hero__reviews-rating { display: inline-flex; align-items: center; gap: .4rem; line-height: 1; }
.hero__reviews-stars { color: #FBBC05; letter-spacing: 1px; font-size: .82rem; }
.hero__reviews-score {
    font-family: var(--font-head); font-weight: 800; font-size: .82rem; color: #fff;
    letter-spacing: .3px;
}
.hero__reviews-text {
    white-space: nowrap; color: rgba(255,255,255,.75);
    font-size: .72rem; padding-left: .55rem; border-left: 1px solid rgba(255,255,255,.25);
}
.hero__reviews:hover .hero__reviews-text { color: #fff; }
/* Mobiel: badge ECHT onderaan de hero, linksonder, met de schuine (skew)
   huisstijl-rand + negatieve overhang — net als op desktop. Absoluut t.o.v.
   het rode panel; de overhang wordt geklipt door .hero--diag (overflow:hidden).
   Extra onderpadding op de content zodat de tekst niet onder de badge valt. */
@media (max-width: 900px) {
    /* Badge = ALTIJD de onderste laag van de hero: absoluut linksonder tegen de
       onderrand van het rode panel, met de schuine huisstijl-rand + negatieve
       overhang (geklipt door .hero--diag overflow:hidden). De content krijgt
       extra onderpadding zodat titel/knoppen nooit onder de badge vallen; de
       badge staat zo vlak op de bodem met goed leesbare tekst. */
    .hero--diag .hero__panel { position: relative; }
    .hero--diag .hero__content { padding-bottom: 3.75rem; }
    .hero__reviews {
        position: absolute; left: -8px; bottom: 0; margin: 0; z-index: 3;
        width: fit-content; padding: .45rem 1.1rem .45rem 1.3rem;
        transform: skewX(var(--skew)); transform-origin: left bottom;
    }
    .hero__reviews > * { transform: skewX(calc(-1 * var(--skew))); }
}

/* Mobiel: twee knoppen naast elkaar op één regel (no-wrap). Compacter font +
   krappe letter-spacing zodat het langste label ("Machine onderhoud") volledig
   past zonder afkappen of wrappen. */
@media (max-width: 600px) {
    .hero__actions { gap: .5rem; }
    .hero__actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: .8rem .5rem; font-size: .72rem; letter-spacing: .2px; }
    .hero__actions .btn + .btn { margin-left: 0; }
}
@media (max-width: 360px) {
    .hero__actions .btn { font-size: .66rem; padding: .8rem .35rem; }
}

/* ══ Sectie-koppen binnen gutter ══
   Home krijgt bewust de ruime maat (--sec-lg) voor een rustiger ritme. */
.home-section { padding: var(--sec-lg) 0; }
.home-section .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.home-section__head { max-width: 820px; margin-bottom: clamp(2.75rem, 5vw, 4rem); }
/* Galerij-hint boven de kop ("Een greep uit ons werk"): de standaard huisstijl-
   eyebrow MET het Renier R-motief (.eyebrow--r) i.p.v. een streepje. */
.home-section__head--hinted h2 { margin-bottom: 0; }
.home-section__head--hinted .eyebrow--r { color: var(--muted); margin-bottom: .6rem; }
/* Sprekende koppen: groter. De kop krijgt zelf ruime breedte (geen krappe
   measure) zodat grote tekst niet onnodig op 2-3 regels valt. De begeleidende
   <p> blijft wél op leesbare measure-breedte. */
.home-section__head h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.05; margin-bottom: .7rem; }
.home-section__head p { color: var(--muted); font-size: 1.05rem; max-width: var(--measure); }
/* Statement-koppen: evenwichtige regels, nooit een woord afbreken of losse
   woorden op een regel. Gestuurde <br> op mobiel uit zodat het natuurlijk vloeit. */
.home-section__head h2, .hero__content h1, .service-statement h2 {
    text-wrap: balance; hyphens: none; -webkit-hyphens: none; overflow-wrap: normal;
}
@media (max-width: 560px) {
    .home-section__head h2 br, .hero__content h1 br, .service-statement h2 br { display: none; }
}

/* ══ 3 disciplines / 6 machine-categorieën — icoonkaarten ══ */
.disc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.mach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.icon-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    padding: 2rem 1.75rem;
    text-decoration: none;
    transition: border-color var(--dur) var(--ease-out),
                background var(--dur) var(--ease-out);
}
.icon-card:hover { border-color: var(--brand); background: var(--bg-soft); }
.icon-card__art {
    height: 130px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.icon-card__art img {
    max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain;
    transition: transform var(--dur) var(--ease-out);
}
.icon-card:hover .icon-card__art img { transform: none; }
.icon-card h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.icon-card p { color: var(--muted); font-size: .95rem; margin-bottom: 1rem; }
.icon-card__more {
    margin-top: auto;
    color: var(--brand); font-weight: 700; font-family: var(--font-head);
    font-size: .9rem; text-transform: uppercase; letter-spacing: .5px;
}

/* ══ Horizontale categorie-slider (machines kopen) — FULL WIDTH + cursor-drag ══ */
.cat-slider {
    display: flex; gap: 1.25rem;
    overflow-x: auto; overflow-y: hidden;
    padding: .5rem clamp(1.25rem, 4vw, 3.75rem) 1.5rem;
    width: 100%;                 /* full-bleed */
    scrollbar-width: none;       /* geen scrollbalk: scroll via cursor-drag */
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}
.cat-slider::-webkit-scrollbar { display: none; }
.cat-slider.is-grabbing { cursor: grabbing; }
.cat-slider.is-grabbing a { pointer-events: none; }
/* Bij slepen nooit een afbeelding/tekst "vastnemen": geen native image-drag,
   geen tekstselectie. Zo scrol je altijd vlot, ook boven een SVG. */
.cat-slider img, .cat-slider a { -webkit-user-drag: none; user-select: none; }
.cat-slider img { pointer-events: none; }   /* muis raakt de kaart, niet de SVG */
.cat-slide {
    flex: 0 0 clamp(240px, 22vw, 320px);
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line);
    text-decoration: none; padding: 1.75rem;
    transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.cat-slide:hover { border-color: var(--brand); background: var(--bg-soft); }
.cat-slide__art { height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; overflow: hidden; }
.cat-slide__art img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; transition: transform var(--dur) var(--ease-out); }
/* Wiellader-SVG oogt optisch groter dan de andere machine-iconen → iets kleiner. */
.cat-slide__art img[src*="Wielladers.svg"] { max-height: 104px; }
.cat-slide:hover .cat-slide__art img { transform: none; }
.cat-slide h3 { font-size: 1.25rem; margin-bottom: .2rem; }
.cat-slide__more { margin-top: auto; color: var(--brand); font-weight: 700; font-family: var(--font-head); font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; }
.cat-slider-hint { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); color: var(--muted); font-size: .85rem; }

/* ══ Merk-logo-treintje (auto-slider, links → rechts) ══ */
/* Merken-strip: horizontaal sleepbaar met de cursor (zoals de categorie-slider). */
.logo-train { overflow-x: auto; overflow-y: hidden; padding: 2rem clamp(1.25rem, 4vw, 3.75rem); cursor: grab; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.logo-train::-webkit-scrollbar { display: none; }
.logo-train.is-grabbing { cursor: grabbing; }
.logo-train.is-grabbing a { pointer-events: none; }
.logo-train img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.logo-train__track { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); width: max-content; }
.logo-train__item { min-height: 74px; display: flex; align-items: center; filter: grayscale(1); opacity: .65; transition: filter var(--dur), opacity var(--dur); }
.logo-train__item:hover { filter: grayscale(0); opacity: 1; }
.logo-train__item img { max-height: 54px; max-width: 150px; width: auto; object-fit: contain; }
/* Deze drie logo's hebben veel witruimte in het bestand → optisch kleiner.
   Iets groter schalen zodat ze visueel gelijk staan met de rest. */
.logo-train__item img[alt="Cormidi"],
.logo-train__item img[alt="Zeitfeld"],
.logo-train__item img[alt="Zijtveld"],
.logo-train__item img[alt="Shell"] { max-height: 74px; max-width: 180px; }
.logo-train__name { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--muted); text-transform: uppercase; }
@keyframes train { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-train__track { animation: none; } }

/* ══ Merk-logo-strip ("wij verdelen deze merken") ══ */
.brand-strip {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    padding: 2rem 0 .5rem;
}
.brand-strip__item {
    display: flex; align-items: center; justify-content: center;
    height: 52px; min-width: 90px;
    filter: grayscale(1); opacity: .7;
    transition: filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.brand-strip__item:hover { filter: grayscale(0); opacity: 1; }
.brand-strip__item img { max-height: 52px; max-width: 150px; width: auto; object-fit: contain; }
/* Fallback: merknaam als tekst wanneer er (nog) geen logo is. */
.brand-strip__name { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

/* ══ Split-blok: foto (clip-corner) + tekst binnen measure ══ */
.split-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.split-block--reverse .split-block__media { order: 2; }
.split-block__body { max-width: var(--measure); }
/* Kop mag breder dan de body-measure zodat een grote statement-kop niet
   onnodig in extra regels valt; de body-tekst blijft op measure-breedte. */
.split-block__body h2 { font-size: clamp(2rem, 3.9vw, 3rem); line-height: 1.06; margin-bottom: 1rem; max-width: none; }
.split-block__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--bg-soft);
    overflow: hidden;
    --notch: 90px;
}
.split-block__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Placeholder-gedrag: img zonder src verbergen, caption tonen; met src omgekeerd. */
.split-block__media img:not([src]), .image-strip img:not([src]) { display: none; }
.split-block__media img[src] ~ .ph, .image-strip img[src] ~ .ph { display: none; }
.split-block__media .ph {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-style: italic; font-size: .95rem;
    text-align: center; padding: 1rem;
}

/* ══ Beeldstrook ══ */
.image-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.image-strip figure {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-soft);
    overflow: hidden;
}
.image-strip img { width: 100%; height: 100%; object-fit: cover; }
.image-strip .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .8rem; font-style: italic; }

/* ══ Service in de kijker — rood diagonaal blok (huisstijl) ══ */
.service-spot { color: #fff; padding-bottom: calc(var(--sec-pad) + 90px); }
.service-spot h2 { color: #fff; }
.service-spot p { color: rgba(255,255,255,.9); }
.service-spot .home-section__head { margin-bottom: 1.75rem; }
.service-spot__list { list-style: none; padding: 0; margin: 0 0 2rem; max-width: var(--measure); }
.service-spot__list li { position: relative; padding-left: 1.75rem; margin-bottom: .6rem; color: rgba(255,255,255,.9); }
.service-spot__list li::before { content: ''; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; background: #fff; transform: skewX(-10deg); }

/* ══ Werkgebied-teaser ══ */
.region-teaser__body { max-width: var(--measure); }

/* ══ Jobs / vacatures ══ */
.jobs { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 2rem; }
.job-chip {
    display: inline-flex; align-items: center; gap: .55rem;
    background: #fff; border: 1px solid var(--line);
    padding: .65rem 1.2rem;
    font-family: var(--font-head); font-weight: 700; color: var(--ink);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.job-chip:hover { border-color: var(--brand); color: var(--brand); }
.job-chip::before { content: ''; width: 8px; height: 8px; background: var(--brand); flex: none; }

/* ══ Responsive ══ */
@media (max-width: 980px) {
    .disc-grid, .mach-grid { grid-template-columns: repeat(2, 1fr); }
    .image-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .split-block { grid-template-columns: 1fr; }
    .split-block--reverse .split-block__media { order: 0; }
    .split-block__media { --notch: 48px; }
}
@media (max-width: 520px) {
    .disc-grid, .mach-grid { grid-template-columns: 1fr; }
}

/* Kaart in de home werkgebied-teaser */
.home-region-map { padding: 0; }
.home-region-map .region-map { max-height: 420px; }

/* ══ Service-statement — De Buf-stijl: veel ademruimte, één focus ══ */
.service-statement {
    background: var(--brand); color: #fff;
    min-height: 70vh; display: flex; align-items: center;
    padding: var(--sec-pad-xl) 0;
}
.service-statement .eyebrow--r::before { background: #fff; }
/* De gestuurde <br> bepaalt de regels ("Machine in panne?" / "24/7 depannage.").
   GÉÉN white-space:nowrap: cms-bind vult deze kop via textContent, waardoor de
   <br> verdwijnt en alles op één regel komt. Met nowrap liep die ene lange regel
   buiten beeld op desktop (onleesbaar). Zonder nowrap breekt de kop netjes af —
   text-wrap:balance (zie boven) verdeelt de regels evenwichtig, mét of zonder <br>. */
.service-statement h2 {
    color: #fff; font-size: clamp(2.4rem, 6.2vw, 5rem);
    line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 1.75rem;
    max-width: none;
}
@media (max-width: 560px) {
    .service-statement h2 { font-size: clamp(2rem, 9vw, 3rem); }
}
.service-statement__sub { color: rgba(255,255,255,.9); font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 46ch; }

/* ══ Subtiele merk-strip in kleur (onder de "Machines kopen"-kop) ══
   Doel: duidelijk WELKE merken we verdelen, in kleur, maar rustig — niet
   dominanter dan de categorie-slider eronder. Klein, ingetogen, stijlvol. */
/* Hoort bij de TEKST: staat er strak onder, met daarna ruim wit vóór de slider. */
.home-section__head:has(+ .brand-line) { margin-bottom: 1rem; }
/* Ruimte tussen de merk-strip (in .wrap) en de categorie-slider eronder. */
.home-section .cat-slider { margin-top: clamp(2.5rem, 5vw, 4rem); }
/* .brand-line zelf staat nu in main.css (site-breed herbruikbaar). */

/* ══ Uitgelichte machines op de homepage (4 model-cards + CTA) ══
   Hergebruikt .model-card uit machines.css; hier 4-koloms i.p.v. 2. */
.model-grid--home { grid-template-columns: repeat(4, 1fr); margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 1024px) { .model-grid--home { grid-template-columns: repeat(2, 1fr); } }
/* Mobiel: horizontale scroll door alle machines i.p.v. een verticale stapel.
   Van grid naar flex, kaarten krijgen een vaste breedte en krimpen niet, zodat
   de rij overloopt en horizontaal scrollt. Snap + momentum voor prettig vegen. */
@media (max-width: 560px) {
    .model-grid--home {
        display: flex;
        grid-template-columns: none;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* volle breedte + negatieve marge zodat de rij tot de schermrand scrollt */
        margin-left: calc(var(--gutter) * -1);
        margin-right: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        scroll-padding-inline: var(--gutter);
    }
    .model-grid--home > .model-card {
        flex: 0 0 78%;
        max-width: 78%;
        scroll-snap-align: start;
    }
    /* scrollbar discreet houden */
    .model-grid--home { scrollbar-width: thin; }
    .model-grid--home::-webkit-scrollbar { height: 4px; }
    .model-grid--home::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
}
.home-section__cta { margin-top: clamp(1.75rem, 4vw, 2.5rem); }


/* ==== pages/merken.css ==== */
/* ════════════════════════════════════════════
   Merken — hub (/merken/) en merkpagina's (/merken/<merk>/)
   Hergebruikt de bestaande huisstijl-componenten (model-card, icon-card,
   split-block, branded-media, service-statement). Dit bestand voegt alleen
   toe wat die componenten hier extra nodig hebben.
   Huisstijl: haakse hoeken, geen decoratieve borders, skew als signatuur.
   ════════════════════════════════════════════ */

/* ── Merk-kaart: model-card mét lopende tekst in de body ──
   De model-card is elders een pure spec-kaart (alleen <ul>). Hier staat er ook
   een alinea in. Die erft anders de linkkleur van de omhullende <a> en wordt
   dus volledig rood. Expliciet op de body-kleur zetten. */
.merk-card__text {
    color: var(--body);
    font-size: .95rem;
    line-height: 1.55;
    margin: 0 0 1.1rem;
}
.merk-card__text strong { color: var(--ink); }
/* De hele kaart is een link: bij hover mag de tekst rustig blijven staan. */
.model-card:hover .merk-card__text { color: var(--body); }

/* Merk-kaart-media: machinefoto's zijn uitsneden op wit. Iets meer lucht
   rondom dan de standaard model-card zodat de machine niet tegen de rand plakt. */
.merk-card .model-card__media { aspect-ratio: 5 / 4; }
.merk-card .model-card__media img { padding: 6%; }

/* Kaart zonder foto (de adviseur-tegel): rustig vlak met het R-motief groot
   uitvergroot, plus het bestaande diagonale hoekvlak. Geen lege witte doos. */
.merk-card--plain .model-card__media {
    background: var(--bg-soft);
    display: flex; align-items: center; justify-content: center;
}
.merk-card--plain .model-card__media::before {
    content: ''; width: 46%; height: 46%;
    background: var(--brand); opacity: .12;
    -webkit-mask: url('../images/r-mark.svg') no-repeat center / contain;
            mask: url('../images/r-mark.svg') no-repeat center / contain;
}

/* ── Kerncijfers ──
   Eerst waren dit vier grote rode getallen zonder scheiding: ze plakten aan
   elkaar en de wisselende maten (56 naast "1,3 tot 30,2 t") maakten het een
   rommeltje. Nu het patroon dat de site zelf voor troeven gebruikt (.svc-usp):
   een rode bovenlijn per item, daaronder de waarde en het label. Duidelijk
   gescheiden, en alle waarden op dezelfde maat zodat de rij rustig blijft. */
.merk-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(2rem, 4.5vw, 4rem);
    margin-bottom: clamp(4.5rem, 9vw, 7rem);
}
.merk-stats__item { border-top: 3px solid var(--brand); padding-top: 1.15rem; }
.merk-stats__n {
    display: block;
    font-family: var(--font-head); font-weight: 800;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1;
    color: var(--ink); margin-bottom: .3rem;
    text-wrap: balance;
}
.merk-stats__l {
    display: block;
    font-family: var(--font-body); font-weight: 500;
    font-size: .92rem; line-height: 1.45; color: var(--muted);
    text-transform: none; letter-spacing: 0;
}
/* Alle waarden op dezelfde maat: de aparte "wide"-uitzondering is niet meer
   nodig nu de rode lijn de scheiding doet. */
.merk-stats__n--wide { font-size: clamp(1.5rem, 2.4vw, 2.1rem); white-space: normal; }
/* Twee regels ruimte voor de waarde, zodat de labels op één lijn blijven ook als
   een van de waarden afbreekt. */
.merk-stats__n { min-height: 2.2em; }
@media (max-width: 760px) { .merk-stats { grid-template-columns: repeat(2, 1fr); } }

/* ── Merkbalk boven de cijfers: logo groter dan de standaard brand-line ── */
.merk-head { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap; }
.merk-head__logo { max-height: 54px; width: auto; }

/* ── Sectieritme ──
   .home-section staat sitebreed op --sec-lg (tot 14rem boven én onder). Op de
   home werkt dat omdat daar grote beeldblokken tussen staan; hier volgen de
   secties elkaar sneller op en stapelen twee keer 14rem tot een leeg gat.
   Op de merkenpagina's dus het standaard-ritme (--sec), met tight-varianten
   waar twee blokken inhoudelijk bij elkaar horen. */
.merken-page .home-section { padding: clamp(6.5rem, 13vw, 12rem) 0; }
.merken-page .home-section--tight { padding-top: clamp(1.75rem, 3.5vw, 2.75rem); padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.merken-page .home-section--tight-top { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.merken-page .home-section--tight-bottom { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
/* Kop dichter op de kaarten eronder dan de home-standaard (tot 4rem). */
.merken-page .home-section__head { margin-bottom: clamp(2.75rem, 5vw, 4rem); }

/* ── Gamma-blokken op de merkpagina ──
   Drie split-blocks onder elkaar. De machinefoto's zijn uitsneden, dus 'contain'
   op wit i.p.v. de standaard 'cover'; anders wordt de machine bijgesneden. */
.gamma-block + .gamma-block { margin-top: clamp(7rem, 14vw, 13rem); }
.gamma-block .split-block__media { background: #fff; aspect-ratio: 4 / 3; }
.gamma-block .split-block__media img { object-fit: contain; padding: 4%; }
/* Actiefoto's (machine in de omgeving) mogen wél vullen. */
.gamma-block .split-block__media--photo img { object-fit: cover; padding: 0; }
.gamma-block .split-block__body h3 {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; margin-bottom: .85rem;
}
.gamma-block .split-block__body .btn { margin-top: 1.4rem; }

/* ── Werk-kaarten ("welk merk voor welk werk") ──
   icon-card met een merknaam-regel eronder. De merknaam is het antwoord op de
   vraag in de kop, dus die krijgt de merkkleur en wat gewicht. */
.werk-card__merk {
    font-family: var(--font-head); font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    font-size: .78rem; color: var(--brand);
    margin: -.15rem 0 .7rem;
}
.werk-card__text { color: var(--body); font-size: .93rem; line-height: 1.55; margin: 0 0 1.1rem; }
.werk-card__text strong { color: var(--ink); }
.icon-card:hover .werk-card__text { color: var(--body); }
/* Alleen op de merkenpagina's: de icon-card-kop is hier een werk-omschrijving
   ("Werken in de stal of door een poort") i.p.v. een korte dienstnaam. */
.merken-page .icon-card h3 { font-size: 1.15rem; margin-bottom: .25rem; }

/* ── Linkregel in een split-blok ──
   Twee skew-knoppen naast elkaar passen niet in een split-kolom (die is door
   --measure smaller dan de knoppen samen) en vallen dan onder elkaar. Zoals op
   de home: één knop, en de nevendiensten als linkregel erboven. */
.split-links { color: var(--muted); font-size: .95rem; margin: 1.4rem 0 0; }
.split-links a { font-weight: 600; }
.split-links span { margin: 0 .45rem; color: var(--line); }

/* ── Rust in de lopende tekst ──
   Deze pagina's zijn tekstrijk. Ruimere regelafstand en meer lucht tussen
   alinea's leest merkbaar rustiger dan de site-standaard, die vooral voor korte
   blokjes op de home is gemaakt. */
.merken-page .split-block__body p,
.merken-page .svc-intro p { line-height: 1.72; margin-bottom: 1.35rem; }
.merken-page .split-block__body p:last-of-type { margin-bottom: 0; }
.merken-page .home-section__head p { line-height: 1.7; }

/* Leadzin boven een spec-tabel: iets groter dan de body, zet de toon voor het
   blok. De cijfers staan eronder in de tabel, niet in de zin zelf. */
.gamma-lead { font-size: 1.06rem; line-height: 1.65; color: var(--body); margin-bottom: 1.6rem; }
.gamma-lead strong { color: var(--ink); }

/* De merkomschrijving. Stond eerst in de hero, maar die doet op een pagina met
   catalogus maar één ding. Hier blijft de zin waar hij hoort: hoog op de
   pagina, direct onder het merklogo, als eerste wat er over het merk staat. */
.merk-intro {
    max-width: var(--measure);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.6; color: var(--body);
    margin: 1.4rem 0 0;
}
.merk-intro strong { color: var(--ink); }

/* Spec-tabel in een gamma-blok: rustiger dan de fiche-variant (meer regelhoogte,
   label smaller zodat de waarde ademt). De haarlijn per rij is functioneel. */
.gamma-block .spec-table { margin: 0 0 1.75rem; }
.gamma-block .spec-table th,
.gamma-block .spec-table td { padding: .85rem 0; }
.gamma-block .spec-table th { width: 38%; font-weight: 500; }
.gamma-block .spec-table td { font-size: 1rem; }
.gamma-block .spec-table__sub { display: block; margin: .15rem 0 0; }
.gamma-block .spec-table tr:last-child th,
.gamma-block .spec-table tr:last-child td { border-bottom: 0; }

/* Beeld en tekst in balans: de foto mag wat ruimer dan 4/3 zodat de kolommen
   optisch even zwaar wegen. */
.gamma-block .split-block__media { aspect-ratio: 5 / 4; }
.merken-page .split-block { gap: clamp(2.5rem, 6vw, 5.5rem); }

/* Kaarten: meer binnenruimte, minder opeengepakt. */
.merken-page .model-card__body { padding: 1.6rem 1.6rem 1.75rem; }
.merken-page .icon-card { padding: 2.25rem 2rem; }
.merken-page .merk-card__text,
.merken-page .werk-card__text { line-height: 1.65; }

/* ── Indeling in leesbare blokken ──
   .section--soft is sitebreed wit met een haarlijn erboven. Op de home werkt dat,
   want daar staan grote beeldblokken tussen. Op een tekstrijke merkpagina leest
   alles daardoor als één lange witte rol zonder herkenbare hoofdstukken.
   Hier krijgen de afwisselende secties een echt rustvlak, en de decoratieve
   haarlijn vervalt (zie huisstijl: geen decoratieve borders). */
.merken-page .home-section.section--soft {
    background: var(--bg-soft);
    border-top: 0;
    margin-top: 0;
}
/* Kaarten blijven wit op het grijze vlak, dan blijft het contrast kloppen. */
.merken-page .section--soft .model-card,
.merken-page .section--soft .icon-card { background: #fff; }
.merken-page .section--soft .icon-card:hover { background: #fff; }
.merken-page .section--soft .gamma-block .split-block__media { background: #fff; }

/* De FAQ is een eigen hoofdstuk en stond als derde wit vlak op rij. Eigen
   rustvlak, en wat meer lucht rond de vragen zodat het geen lijstje wordt. */
.merken-page .page-faq { background: var(--bg-soft); padding: clamp(4rem, 8vw, 6.5rem) 0; }
.merken-page .page-faq .faq-item summary { padding-top: 1.35rem; padding-bottom: 1.35rem; }
.merken-page .page-faq .home-section__head { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ── Merklogo in de kaart (hub) ──
   Vervangt de losse logobalk boven de kaarten: daar stonden dezelfde vijf merken
   een tweede keer, wat de pagina druk maakte. Klein en rustig, puur als
   herkenningspunt; de naam eronder blijft de kop van de kaart. */
/* Vakhoogte volgt het HOOGSTE logo (Cormidi staat optisch groter omdat het een
   vierkant beeldmerk is). Anders steekt dat ene logo uit zijn vak en snijdt
   overflow het af. */
.merk-card__logo {
    height: 38px; margin-bottom: .85rem;
    display: flex; align-items: center; justify-content: flex-start;
}
.merk-card__logo img { max-height: 30px; max-width: 130px; width: auto; height: auto; object-fit: contain; opacity: .9; }
.merk-card__logo img[src*="cormidi"] { max-height: 38px; }

/* ── Kerncijfers ──
   Staan nu bij het gamma. Rustiger dan eerst: alleen het eerste cijfer in de
   merkkleur, de rest in inkt. Vier felrode getallen op een rij trokken alle
   aandacht weg van de tekst eromheen. */

/* ── Hero van de merkenpagina's ──
   Gebruikt .hero--diag, de signatuur-hero van de home: foto links, rood paneel
   rechts met een schuine snede eroverheen. Reden voor die keuze boven .page-hero:
   daar ligt de foto op 38% dekking onder een donker vlak, waardoor de machine
   wegvalt. Hier staat ze vol in beeld.
   Verschil met de home: dit is geen landingspagina, dus lager dan 88vh. */
/* HOOGTE, niet alleen min-height: de foto zit in een grid-cel en een staande
   uitsnede (de Magni is 1500x2000) rekt de rij anders op tot ver boven het
   scherm. Met een vaste hoogte bepaalt de hero de maat en letterboxt de foto. */
.hero--merk { min-height: clamp(28rem, 58vh, 38rem); }
@media (min-width: 861px) { .hero--merk { height: clamp(28rem, 58vh, 38rem); } }
/* Alleen op desktop: het paneel is daar hoog en de inhoud staat gecentreerd. */
@media (min-width: 861px) {
    .hero--merk .hero__content { padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
}
.hero--merk h1 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
.hero--merk .hero__tagline { margin-bottom: 1.75rem; }

/* Merken zonder omgevingsfoto (alle Giant-beelden zijn uitsneden op wit):
   toon de machine dan volledig op een wit vlak in plaats van bij te snijden.
   Beter een eerlijk productbeeld dan een sfeerfoto met een ander merk erop. */
.hero--merk .hero__photo--contain { background: #fff; }
.hero--merk .hero__photo--contain img { object-fit: contain; padding: clamp(1.5rem, 4vw, 3rem); }
/* Transparante PNG: geen wit vlak eronder, de machine staat vrij op het donkere
   hero-vlak. Scherper dan de op wit genormaliseerde versie (900px vs 1000px op
   een witte plaat) en het leest als een productbeeld in plaats van een doos. */
.hero--merk .hero__photo--transparant { background: var(--bg-dark); }
.hero--merk .hero__photo--transparant img { object-fit: contain; padding: clamp(1.5rem, 4vw, 3rem); }

@media (max-width: 860px) {
    /* Anders dan de home vult deze hero het scherm niet: het rode paneel is
       content-hoog. De schuine snede hapt 64px uit de linkerbovenhoek, dus de
       kop heeft daar ruimte onder nodig, anders loopt de eerste regel eronder. */
    .hero--merk { height: auto; min-height: 0; }
    .hero--merk .hero__photo { height: 13rem; max-height: 13rem; }
    .hero--merk .hero__photo--contain img,
    .hero--merk .hero__photo--transparant img { padding: 1rem; }
    .hero--merk .hero__content { padding: 5.25rem var(--gutter) 3rem; height: auto; }
    .hero--merk .hero__actions { flex-direction: column; align-items: stretch; }
    .hero--merk .hero__actions .btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════
   RUST: gemeten tegen de bestaande site, niet op gevoel
   Vergelijking merkpagina vs /machineonderhoud/ (1440px):
     grid-gap        24px   vs  64px   ← grootste oorzaak van "alles op elkaar"
     body            16,8px vs  17,6px
     regelafstand    26,9px vs  28,2px
     hero-h1         49,6px vs  70,4px
   Hieronder de correcties, allemaal gescoped op .merken-page.
   ════════════════════════════════════════════ */

/* ── Ruimte tussen kaarten ──
   De site gebruikt 24px voor drie kolommen op de home, maar daar staan er
   minder kaarten per sectie. Hier zitten zes kaarten in een blok en dan plakken
   ze aan elkaar. Ruim gutter, iets minder dan de 64px die de site voor twee
   kolommen aanhoudt. */
.merken-page .mach-grid,
.merken-page .model-grid { gap: clamp(2.25rem, 4.2vw, 3.5rem); }

/* ── Lopende tekst gelijk aan de rest van de site ── */
.merken-page main p,
.merken-page .split-block__body p,
.merken-page .home-section__head p { font-size: 1.1rem; line-height: 1.75; }
.merken-page .merk-card__text,
.merken-page .werk-card__text { font-size: 1rem; line-height: 1.7; }
.merken-page .gamma-lead { font-size: 1.12rem; line-height: 1.7; }

/* ── Kaarten: meer binnenruimte, minder opeengepakt ── */
.merken-page .model-card__body { padding: 2rem 1.9rem 2.1rem; }
.merken-page .icon-card { padding: 2.5rem 2.25rem; }
/* Het icoonvak is hier lager dan de site-standaard (112 i.p.v. 130px), maar de
   basisregel liet het beeld tot 130px hoog worden. Met overflow:hidden werd er
   dan onderaan 18px afgesneden. Het beeld volgt nu altijd het vak, in beide
   richtingen, zodat een icoon nooit afgekapt kan worden. */
.merken-page .icon-card__art { height: 112px; margin-bottom: 1.6rem; }
.merken-page .icon-card__art img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.merken-page .model-card__specs { gap: .5rem 1.25rem; margin-bottom: 1.15rem; }

/* ── Hero-kop op de maat van de site ──
   49,6px was klein naast de 70,4px van een servicepagina. Een grotere kop met
   lucht eromheen leest rustiger dan een middelmaat die tegen de tekst aanschuurt. */
/* De 16vw linkerpadding van de home-hero blijft staan: die houdt de tekst vrij
   van de schuine snede. Bij minder padding valt de bovenste regel eronder.
   Een merkkop is langer dan de home-kop, dus hier de KOPMAAT bijstellen en de
   breedtebeperking van 38ch loslaten, zodat hij op twee regels blijft. */
.hero--merk .hero__content > *:not(.hero__tagline) { max-width: none; }
.hero--merk .hero__tagline { max-width: 42ch; }
.hero--merk h1 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); margin-bottom: 1.4rem; }
.hero--merk .hero__tagline { font-size: 1.1rem; line-height: 1.7; margin-bottom: 2rem; }

/* ── Koppen niet met elkaar laten concurreren ──
   De sectiekop stond op 48px, groter dan de h2 van de site (46,4px) en bijna
   even groot als de hero-h1. Iets terug zodat de hiërarchie klopt. */
.merken-page .home-section__head h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.merken-page .home-section__head { margin-bottom: clamp(3rem, 5.5vw, 4.5rem); }
.merken-page .split-block__body h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }

/* ── Spec-tabel: meer regelhoogte, rustiger te scannen ── */
.gamma-block .spec-table th,
.gamma-block .spec-table td { padding: 1.25rem 0; }

/* Machine-uitsnede in een verhaalblok: volledig in beeld op wit i.p.v.
   bijgesneden. Gebruikt waar een merk geen omgevingsfoto heeft, zodat er nooit
   een machine van een ander merk op een merkpagina staat. */
.split-block__media--contain { background: #fff; }
.split-block__media--contain img { object-fit: contain; padding: 5%; }

/* ── Troeven in een verhaalblok ──
   Zelfde device als .svc-usp op de servicepagina's: een rode bovenlijn, korte
   kop, één regel eronder. Hier gestapeld in plaats van in vier kolommen, want
   het staat naast een foto in een split-blok.
   Dit vervangt twee alinea's proza: even veel inhoud, maar je scant het. */
.merk-troeven { display: grid; gap: clamp(2rem, 3.6vw, 3rem); margin-top: 2.4rem; }
.merk-troef { border-top: 3px solid var(--brand); padding-top: .95rem; }
.merk-troef h3 {
    font-family: var(--font-head); font-weight: 700;
    font-size: 1.06rem; line-height: 1.25; color: var(--ink); margin-bottom: .3rem;
}
.merken-page .merk-troef p {
    font-size: .98rem; line-height: 1.6; color: var(--muted); margin: 0;
}
.merk-troef p strong { color: var(--ink); }
/* De leadzin boven de troeven mag iets zwaarder dan de lijst eronder. */
.merken-page .split-block__body .gamma-lead { margin-bottom: 0; }

/* Opsommingen in een kaart mogen ook ademen. */
.merken-page .model-card__specs { gap: .7rem 1.5rem; }
.merken-page .faq-item summary { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* ════════════════════════════════════════════
   CATALOGUS-AANVRAAG IN DE HERO (nu alleen Cormidi)
   Vervangt de gewone hero-knop. Blijft binnen het hero-patroon: één veld,
   één knop, en verder niets. De cover zweeft op de diagonale naad tussen de
   foto en het rode paneel; dat is de plek waar de huisstijl toch al breekt,
   dus daar valt hij op zonder dat er een schaduw of kader aan te pas komt
   (de huisstijl kent er geen).
   ════════════════════════════════════════════ */
.catalogus { max-width: 34rem; }
.catalogus__label {
    font-family: var(--font-body); font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    font-size: .74rem; color: #fff; opacity: .85;
    margin: 0 0 .35rem;
}
.catalogus__titel {
    font-family: var(--font-head); font-weight: 800;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.25;
    color: #fff; margin: 0 0 1.1rem;
}
.catalogus__form { display: flex; flex-wrap: wrap; gap: .7rem; align-items: stretch; }
.catalogus__veld {
    flex: 1 1 15rem; min-width: 0;
    background: #fff; color: var(--ink);
    border: 0; border-radius: var(--radius);
    padding: 1rem 1.1rem;
    font-family: var(--font-body); font-size: 1rem;
}
.catalogus__veld::placeholder { color: var(--muted); }
.catalogus__veld:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* Knop op het rode vlak: wit met rode tekst, nooit rood-op-rood. */
.catalogus__form .btn-primary { background: #fff; color: var(--brand); flex: 0 0 auto; }
.catalogus__form .btn-primary::before { background: var(--brand-dark); }
.catalogus__form .btn-primary:hover { color: #fff; }
.catalogus__form .btn-primary.is-bezig { opacity: .6; pointer-events: none; }

/* Honeypot: onzichtbaar voor mensen, wel invulbaar voor bots. Geen
   display:none, want sommige bots slaan verborgen velden juist over. */
.catalogus__hp {
    position: absolute; left: -9999px; width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}
/* Label alleen voor schermlezers. */
.catalogus__sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.catalogus__fout {
    margin: .75rem 0 0; color: #fff; font-weight: 600; font-size: .95rem;
    background: var(--brand-dark); padding: .6rem .9rem; display: inline-block;
}
/* display:inline-block wint anders van het hidden-attribuut, waardoor een leeg
   rood blokje zichtbaar blijft. Expliciet terugzetten. */
.catalogus__fout[hidden] { display: none; }
/* Zelfde valkuil bij het formulier (display:flex): dat wordt verborgen zodra
   de catalogus klaarstaat. Eén vangnet voor het hele blok. */
.catalogus [hidden], .catalogus__form[hidden] { display: none !important; }
.catalogus__klein { margin: .85rem 0 0; font-size: .82rem; }
.catalogus__klein a { color: #fff; opacity: .75; text-decoration: underline; }
.catalogus__klein a:hover { opacity: 1; color: #fff; }

/* Na verzenden: het formulier maakt plaats voor de knop naar de catalogus. */
.catalogus__klaar-titel {
    font-family: var(--font-head); font-weight: 800;
    font-size: clamp(1.2rem, 2vw, 1.5rem); color: #fff; margin: 0 0 .35rem;
}
.catalogus__klaar-tekst { color: rgba(255,255,255,.85); margin: 0 0 1.25rem; }
.catalogus__klaar .btn-primary { background: #fff; color: var(--brand); }
.catalogus__klaar .btn-primary::before { background: var(--brand-dark); }
.catalogus__klaar .btn-primary:hover { color: #fff; }

/* ── De pijl en de cover ──
   De hero doet hier één ding: een adres vragen. Daarom staat onder het veld
   wát je ervoor krijgt. De pijl loopt van het veld naar de cover, zodat het
   oog die weg vanzelf aflegt.

   Uitlijning: pijl en cover zitten in één kolom die exact zo breed is als de
   cover. De pijl staat daarin gecentreerd (margin-inline:auto), dus hij wijst
   altijd precies naar het midden van de cover, hoe breed die ook wordt.
   De coördinaten zijn hele getallen op een viewBox die 1:1 met pixels
   meeschaalt (24x60 units, 24x60 px), zodat de lijn op een pixelgrens valt en
   niet vervaagt. */
.catalogus__gids { width: clamp(9rem, 12vw, 11.5rem); margin-top: 1.3rem; }

.catalogus__pijl { display: block; margin: 0 auto .85rem; overflow: visible; }
.catalogus__pijl path {
    fill: none; stroke: #fff; stroke-width: 2;
    stroke-linecap: butt; stroke-linejoin: miter;
    shape-rendering: geometricPrecision;
}
/* Vaste, zachte rail; daaroverheen loopt een fel segment naar beneden. De lijn
   eindigt exact op de punt van de chevron en heeft platte eindes, anders steekt
   er een blokje onder de punt uit zodra de puls beneden aankomt. */
.catalogus__pijl .pijl__rail { opacity: .22; }
.catalogus__pijl .pijl__puls {
    stroke-dasharray: 18 82; stroke-dashoffset: 100;
    animation: pijl-puls 2.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
.catalogus__pijl .pijl__punt {
    opacity: .45; transform-box: fill-box; transform-origin: center;
    animation: pijl-punt 2.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes pijl-puls {
    0%   { stroke-dashoffset: 100; opacity: 0; }
    10%  { opacity: 1; }
    60%  { stroke-dashoffset: 0; opacity: 1; }
    70%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes pijl-punt {
    0%, 45%   { opacity: .45; transform: translateY(0); }
    62%       { opacity: 1;   transform: translateY(3px); }
    80%, 100% { opacity: .45; transform: translateY(0); }
}

/* De cover: licht gekanteld zodat hij als een boekje leest en niet als een
   plaatje in een vak. Geen schaduw (die kent de huisstijl niet), wel een witte
   rand zodat hij loskomt van het rode vlak. Het kantelen gebeurt om het
   midden, dus de pijl blijft er precies op wijzen. */
.catalogus__cover {
    display: block; width: 100%; height: auto;
    outline: 6px solid #fff; transform: rotate(-3deg);
    transition: transform var(--dur) var(--ease-out);
}
.catalogus__gids:hover .catalogus__cover { transform: rotate(-1deg) scale(1.03); }

@media (prefers-reduced-motion: reduce) {
    .catalogus__pijl .pijl__puls,
    .catalogus__pijl .pijl__punt { animation: none; }
    .catalogus__pijl .pijl__puls { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; }
    .catalogus__pijl .pijl__punt { opacity: 1; }
    .catalogus__cover { transition: none; }
}

/* Een hero met catalogus draagt meer: titel, veld, knop, pijl en cover.
   Die heeft dus meer hoogte nodig dan een hero met alleen een knop. */
.hero--merk-cat { min-height: clamp(40rem, 92vh, 56rem); }

@media (max-width: 860px) {
    /* Mobiel stapelt de hero: foto boven, rood paneel eronder. De cover staat
       daar gewoon onder het veld, dus er is geen aparte positie nodig. */
    .hero--merk-cat { min-height: 0; }
    .catalogus__gids { width: 9.5rem; margin-top: 1.1rem; }
    .catalogus__form .btn-primary { flex: 1 1 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════
   POPUP na het aanvragen van de catalogus
   Bevestigt dat het gelukt is en zet de download meteen onder de duim.
   Wit vlak op een donker waas, met de schuine hoek die de site overal
   gebruikt. Geen ronde hoeken, geen schaduw.
   ════════════════════════════════════════════ */
.cat-popup {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem;
}
.cat-popup[hidden] { display: none; }
.cat-popup__waas {
    position: absolute; inset: 0;
    background: rgba(23, 23, 23, .72);
    animation: popup-waas .25s var(--ease-out) both;
}
.cat-popup__venster {
    position: relative; z-index: 1;
    width: min(32rem, 100%);
    background: #fff;
    padding: 2.75rem 2.5rem 2.25rem;
    text-align: center;
    /* Dezelfde afgesneden hoek als de media-blokken op de site. */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
    animation: popup-op .32s var(--ease-out) both;
}
/* Rode bovenlijn: het signaal dat de site overal gebruikt voor "dit telt". */
.cat-popup__venster::before {
    content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px;
    background: var(--brand);
}
@keyframes popup-waas { from { opacity: 0; } to { opacity: 1; } }
@keyframes popup-op {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cat-popup__x {
    position: absolute; top: .6rem; right: .6rem;
    width: 2.25rem; height: 2.25rem;
    display: grid; place-items: center;
    background: none; border: 0; cursor: pointer;
    color: var(--muted);
    transition: color var(--dur) var(--ease-out);
}
.cat-popup__x:hover { color: var(--ink); }
.cat-popup__x svg { fill: none; stroke: currentColor; stroke-width: 2; }
.cat-popup__x:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Het vinkje tekent zichzelf: eerst de ring, dan de haak. */
.cat-popup__vink { display: block; margin: 0 auto 1.1rem; }
.cat-popup__vink path { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: butt; stroke-linejoin: miter; }
.cat-popup__vink .vink__ring {
    stroke-dasharray: 100; stroke-dashoffset: 100;
    animation: vink-ring .55s var(--ease-out) .1s forwards;
}
.cat-popup__vink .vink__haak {
    stroke-dasharray: 100; stroke-dashoffset: 100;
    animation: vink-haak .3s var(--ease-out) .5s forwards;
}
@keyframes vink-ring { to { stroke-dashoffset: 0; } }
@keyframes vink-haak { to { stroke-dashoffset: 0; } }

.cat-popup__label {
    font-family: var(--font-body); font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    font-size: .74rem; color: var(--brand);
    margin: 0 0 .5rem;
}
.cat-popup__titel {
    font-family: var(--font-head); font-weight: 800;
    font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.15;
    color: var(--ink); margin: 0 0 .55rem;
    /* Verdeelt de regels gelijkmatig, zodat er geen los woord op regel twee
       blijft hangen. Browsers die het niet kennen breken gewoon zoals altijd. */
    text-wrap: balance;
}
.cat-popup__tekst { color: var(--body); margin: 0 0 1.6rem; }
.cat-popup__venster .btn { justify-content: center; }
.cat-popup__klein { margin: 1.1rem 0 0; font-size: .82rem; color: var(--muted); }

@media (max-width: 480px) {
    .cat-popup__venster { padding: 2.25rem 1.5rem 1.9rem; }
    .cat-popup__venster .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .cat-popup__waas, .cat-popup__venster,
    .cat-popup__vink .vink__ring, .cat-popup__vink .vink__haak { animation: none; }
    .cat-popup__vink .vink__ring, .cat-popup__vink .vink__haak { stroke-dashoffset: 0; }
}


/* ==== pages/overige.css ==== */
/* ════════════════════════════════════════════
   Overige pagina's — aanbouwdelen, tweedehands, constructie,
   smeermiddelen, over-ons, contact. De Buf-look: haaks, geen schaduw.
   ════════════════════════════════════════════ */

/* ══ Aanbouwdelen ══ */
.ab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.ab-card { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brand); padding: 1.75rem; }
.ab-card h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.ab-card p { color: var(--body); font-size: .97rem; margin-bottom: 0; }
.ab-card__tag { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--brand); margin-bottom: .5rem; }
.ab-card__brands { margin-top: .9rem !important; padding-top: .7rem; border-top: 1px solid var(--line); font-family: var(--font-head); font-weight: 700; font-size: .8rem; color: var(--muted) !important; text-transform: uppercase; letter-spacing: .5px; }
.ab-card--steel .ab-card__tag { color: var(--steel-green); }
/* Steelwrist-uitzondering: zwart-groen accent voor tiltrotators */
.ab-card--steel { border-top-color: var(--steel-green); background: #12181400; }
.ab-card--steel { background: linear-gradient(180deg, rgba(31,107,58,.06), transparent 60%); }
.ab-card--steel h3 { color: var(--steel-black); }

/* ══ Smeermiddelen — oliegamma's ══ */
.oil-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.oil-card { background: #fff; border: 1px solid var(--line); padding: 1.6rem 1.4rem; }
.oil-card__brand { font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; color: #dd1d21; font-weight: 700; }
.oil-card h3 { font-size: 1.25rem; margin: .2rem 0 .1rem; }
.oil-card__sub { font-family: var(--font-head); font-weight: 700; font-size: .85rem; color: var(--muted); margin-bottom: .75rem; }
.oil-card p:last-child { color: var(--body); font-size: .9rem; margin-bottom: 0; }

/* ══ Team ══ */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.team-card__photo { position: relative; aspect-ratio: 3 / 4; background: var(--bg-soft); overflow: hidden; --notch: 40px; margin-bottom: 1rem; }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__photo img:not([src]) { display: none; }
.team-card__photo img[src] ~ .ph { display: none; }
.team-card__photo .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-style: italic; font-size: .9rem; }
.team-card h3 { font-size: 1.3rem; margin-bottom: .15rem; }
.team-card p { color: var(--muted); font-size: .92rem; margin-bottom: 0; }

/* ══ Contact-kaarten ══ */
.contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.contact-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--brand); padding: 2rem 1.75rem; }
.contact-card--service { border-top-color: var(--brand); }
.contact-card__tag { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; color: var(--brand); margin-bottom: .75rem; }
.contact-card h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.contact-card p { color: var(--body); font-size: .97rem; margin-bottom: 1rem; }
.contact-card__name { font-family: var(--font-head); font-weight: 800; color: var(--ink); font-size: 1.1rem; margin-bottom: 1rem !important; }

/* ══ Tweedehands ══ */
.th-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.th-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 2.5rem 1rem; }
.th-card { background: #fff; border: 1px solid var(--line); overflow: hidden; text-decoration: none; }
.th-card__media { aspect-ratio: 4 / 3; background: var(--bg-soft); }
.th-card__media img { width: 100%; height: 100%; object-fit: cover; }
.th-card__body { padding: 1.25rem; }
.th-card h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.th-card p { color: var(--muted); font-size: .9rem; margin-bottom: .75rem; }

@media (max-width: 900px) {
    .oil-grid { grid-template-columns: repeat(2, 1fr); }
    .team-grid { grid-template-columns: repeat(3, 1fr); }
    .th-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .ab-grid, .contact-cards, .oil-grid, .team-grid, .th-grid { grid-template-columns: 1fr; }
}

/* Overzichtskaarten als anchor-links naar de detail-secties */
.ab-grid--links .ab-card { display: block; text-decoration: none; color: inherit; transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.ab-grid--links .ab-card:hover { border-color: var(--brand); }
.ab-grid--links .ab-card:hover h3 { color: var(--brand); }
.ab-grid--links .ab-card--steel:hover { border-color: var(--steel-green); }
.ab-grid--links .ab-card--steel:hover h3 { color: var(--steel-green); }

/* Detail-secties: opsommingen + scroll-offset onder de sticky header */
.scroll-anchor { scroll-margin-top: calc(var(--topbar-h, 2.6rem) + 5.5rem); }
.ab-specs { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.ab-specs li { position: relative; padding-left: 1.4rem; color: var(--body); font-size: .97rem; }
.ab-specs li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--brand); transform: skewX(-10deg); }


/* ==== pages/privacy.css ==== */
/* Privacy pagina specifieke styles */
.privacy-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

.privacy-section {
    margin-bottom: 3rem;
}

.privacy-section h2 {
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f0f0f0;
}

.privacy-section h3 {
    color: #555;
    font-size: 1.2rem;
    margin: 1.5rem 0 1rem 0;
}

.privacy-section p {
    line-height: 1.6;
    margin-bottom: 1rem;
    color: #666;
}

.privacy-section ul {
    margin: 1rem 0;
    padding-left: 2rem;
}

.privacy-section li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
    color: #666;
}

.page-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 0;
}

.page-header h1 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 1rem;
}

.page-intro {
    color: #888;
    font-style: italic;
}

@media (max-width: 768px) {
    .privacy-content {
        padding: 1rem;
    }
    
    .page-header h1 {
        font-size: 2rem;
    }
    
    .privacy-section h2 {
        font-size: 1.3rem;
    }
    
    .privacy-section h3 {
        font-size: 1.1rem;
    }
}

/* Printen uitgeschakeld op deze pagina: de inhoud wordt niet afgedrukt.
   (De print-knop is ook uit de JS verwijderd.) */
@media print {
    body * { visibility: hidden !important; }
    body::before {
        content: "Deze pagina kan niet worden afgedrukt. Raadpleeg ze online.";
        visibility: visible; display: block;
        position: fixed; top: 40%; left: 0; right: 0; text-align: center;
        font-family: Arial, sans-serif; font-size: 16px; color: #000;
    }
}


/* ==== pages/cookies.css ==== */
/* Algemene voorwaarden pagina specifieke styles */
.terms-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

.terms-section {
    margin-bottom: 3rem;
}

.terms-section h2 {
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f0f0f0;
}

.terms-section h3 {
    color: #555;
    font-size: 1.2rem;
    margin: 1.5rem 0 1rem 0;
}

.terms-section p {
    line-height: 1.6;
    margin-bottom: 1rem;
    color: #666;
}

.terms-section ul {
    margin: 1rem 0;
    padding-left: 2rem;
}

.terms-section li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
    color: #666;
}

.page-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 0;
}

.page-header h1 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 1rem;
}

.page-intro {
    color: #888;
    font-style: italic;
}

@media (max-width: 768px) {
    .terms-content {
        padding: 1rem;
    }
    
    .page-header h1 {
        font-size: 2rem;
    }
    
    .terms-section h2 {
        font-size: 1.3rem;
    }
    
    .terms-section h3 {
        font-size: 1.1rem;
    }
}

/* Printen uitgeschakeld op deze pagina: de inhoud wordt niet afgedrukt.
   (De print-knop is ook uit de JS verwijderd.) */
@media print {
    body * { visibility: hidden !important; }
    body::before {
        content: "Deze pagina kan niet worden afgedrukt. Raadpleeg ze online.";
        visibility: visible; display: block;
        position: fixed; top: 40%; left: 0; right: 0; text-align: center;
        font-family: Arial, sans-serif; font-size: 16px; color: #000;
    }
}