/* Stijl voor alle pagina's naast de homepage: de vijf machinepagina's en de offertepagina.
   Eén gedeeld bestand, dus een kleurwijziging is hier één regel in plaats van zes.
   Het bestand staat in de root en niet in machines/, zodat pagina's op beide niveaus het
   kunnen gebruiken. Verwijzingen naar beeld staan relatief tot DIT bestand (images/...),
   want site.css staat in de root van de site.
   LET OP: in de HTML zijn de paden ook relatief en NIET root-relatief (/images/...). Een
   preview staat namelijk in een submap (media.sparc.nl/klanten/<map>/) en daar wijst een
   root-relatief pad naar het verkeerde niveau. Gevolg: de header en de footer hebben per
   maplaag een eigen prefix (../ op een machinepagina, niets in de root).
   De tokens, de basisstijl, de knoppen, de header en de footer zijn letterlijk
   overgenomen uit index.html; er is niets nieuws bij verzonnen.
   LET OP: de tokens staan hierdoor op twee plekken (index.html en dit bestand).
   Verander je een kleur of een font, pas dan beide aan. */

/* Terugvalletter met bijgestelde maat, om verschuiving bij het inladen te voorkomen.
   Het probleem: Noto Serif Display komt via Google Fonts met font-display:swap. Tot dat
   bestand er is tekent de browser de kop in Georgia, en die is 10,8 procent breder. Bij een
   kop van meerdere regels verandert daardoor het AANTAL regels zodra het echte font landt,
   en schuift alles eronder. Op de roomijsturbine-pagina kostte dat CLS 0,164 (norm 0,1).
   Gemeten met dezelfde tekst op 100px: Noto op wdth 85 is 3147px breed, Georgia 3486px,
   dus 3147/3486 = 90,3 procent. Met size-adjust neemt Georgia daardoor evenveel ruimte in
   en breekt de kop op hetzelfde aantal regels. Hermeet dit als het kopfont of de
   breedte-as verandert. */
@font-face{
  font-family:'Kop terugval';
  src:local('Georgia'),local('Times New Roman');
  size-adjust:90.3%;
  font-weight:100 900;
  font-style:normal;
}
@font-face{
  font-family:'Kop terugval';
  src:local('Georgia Italic'),local('Georgia'),local('Times New Roman Italic');
  size-adjust:90.3%;
  font-weight:100 900;
  font-style:italic;
}

:root{
  --navy:#061637;
  --navy-mid:#10275a;
  --navy-deep:#030b1e;
  --ink:#231f20;            /* lopende tekst: alleen zwart of wit, geen grijstinten */
  --accent:#f58020;         /* merkoranje, ook voor de oranje teksten: één oranje op de site */
  --cream:#fffaf7;
  --cream-2:#fef4ec;
  --peach:#f9e2cd;
  --peach-soft:#fdeee0;
  /* Lichtplas achter een machine, overal dezelfde. Het sleutelwoord `circle` in plaats van
     twee percentages: percentages rekenen per as, dus in een niet-vierkante doos werd de
     plas een ovaal. Met `circle closest-side` kan dat niet meer gebeuren, ongeacht de vorm
     van de doos. Vervaagd merkoranje werkt op beide achtergronden: op wit komt het op
     rgb(253,227,206) uit, vrijwel gelijk aan --peach, en op de creme hero blijft het
     zichtbaar waar perzik dat niet was. */
  --glow:radial-gradient(circle closest-side at 50% 50%, rgba(245,128,32,.30) 0%, rgba(245,128,32,.22) 34%, rgba(245,128,32,.10) 60%, rgba(245,128,32,0) 82%);
  /* Contactschaduw onder de machine, hoort bij --glow. */
  --glow-shadow:radial-gradient(50% 50% at 50% 50%, rgba(6,22,55,.26) 0%, rgba(6,22,55,0) 72%);
  /* Eén tandwieltand, overal even groot. VASTE PIXELMATEN en geen percentage van de breedte:
     met een percentage kropen de tanden op een kleiner scherm naar elkaar toe en werd het
     een kam. Nu blijft de tand op elk scherm 52 bij 11px en past er alleen een ander aantal
     in. De tegels staan op `space`, dus er staat nooit een halve tand tegen een rand en de
     restruimte wordt over de valleien verdeeld. */
  --tand-b:52px;
  --tand-h:11px;
  /* De tandvorm en de golf staan hier als data-URI, niet als los bestand (06-10). Een masker
     uit een los bestand laadt Chrome niet als je de pagina via file:// opent: maskers worden
     opgehaald met een CORS-controle en een lokaal bestand haalt die niet. Dan vielen de
     tandwielranden en de golf lokaal weg, terwijl ze op de server wel stonden. Zo werken ze
     overal, en live scheelt het losse verzoeken. De bestanden in images/ blijven de bron met
     uitleg; verander je een vorm, zet hem dan hier ook: zonder commentaar, met ' in plaats van "
     en # als %23. */
  --masker-tand:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18.15' preserveAspectRatio='none'%3E%3Cpath d='M13 0L24 18.15L76 18.15L87 0Z' fill='%23fff'/%3E%3C/svg%3E");
  --masker-tand-boven:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18.15' preserveAspectRatio='none'%3E%3Cpath d='M13 18.15L24 0L76 0L87 18.15Z' fill='%23fff'/%3E%3C/svg%3E");
  --line:rgba(35,31,32,.18);
  --overgang:.3s ease-in-out;   /* hover-overgang van alle links, knoppen en kaarten (wens 24-09) */
  --line-strong:rgba(35,31,32,.5);
  --font-head:'Noto Serif Display','Kop terugval',Georgia,serif;
  --font-body:Arial,Helvetica,sans-serif;
  --max:1240px;
  --px:clamp(22px,5vw,72px);
  --sy:clamp(64px,9vw,120px);
}
/* Breder op zeer grote schermen, zelfde stappen als in index.html. Vaste regel voor dit
   project: onder 1900px niets aanpassen, daarboven groeit de kolom in drie stappen mee.
   Neem dit blok mee in elke nieuwe pagina. */
@media(min-width:1900px){:root{--max:1560px}}
@media(min-width:2560px){:root{--max:2040px}}
@media(min-width:3400px){:root{--max:2560px}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:145px}
@media(min-width:920px){html{scroll-padding-top:90px}}
body{margin:0; font-family:var(--font-body); color:var(--ink); background:var(--cream); line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none;
  transition:color var(--overgang), background-color var(--overgang), border-color var(--overgang), text-decoration-color var(--overgang)}
summary{transition:color var(--overgang)}
p{margin:0}

h1,h2,h3{
  font-family:var(--font-head); margin:0; line-height:1.12;
  text-transform:uppercase; letter-spacing:.02em;
  font-weight:500; font-variation-settings:"wdth" 85;
}
h1{font-size:clamp(30px,4.4vw,54px)}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:19px; letter-spacing:.04em; font-weight:600; font-variation-settings:"wdth" 88}
h1 em,h2 em{font-style:italic; color:var(--accent)}

/* Koppen en lopende tekst iets groter op zeer brede schermen. Alleen de maat verandert;
   het font, het gewicht (500) en de breedte-as (wdth 85) blijven zoals afgesproken. */
@media(min-width:1900px){
  h1{font-size:64px}
  h2{font-size:48px}
  body{font-size:17px}
}
@media(min-width:2560px){
  h1{font-size:76px}
  h2{font-size:56px}
  body{font-size:18px}
}

.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--px)}
/* Twee regels die het afbreken netter maken en niets kosten:
   balance verdeelt een kop over even lange regels, wat vooral bij een gecentreerde kop
   scheelt, en pretty voorkomt dat er een los woord op de laatste regel van een alinea
   overblijft. Browsers die het niet kennen negeren het gewoon. */
h1,h2,h3{text-wrap:balance}
p,.eyebrow{text-wrap:pretty}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:700; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.16em; color:var(--accent);
}
.eyebrow::before{content:""; width:15px; height:27px; flex:none; background:url("images/collet-ijsje.svg") center/contain no-repeat}

/* Knoppen: exact dezelfde set als op de homepage. */
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:999px;
  font-family:var(--font-body); font-weight:700; font-size:15px; border:1.5px solid transparent;
  cursor:pointer; transition:transform var(--overgang), background var(--overgang), color var(--overgang), border-color var(--overgang)}
.btn:hover{transform:translateY(-2px)}
.btn-accent{background:var(--accent); color:var(--navy)}
.btn-accent:hover{background:var(--navy); color:#fff}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--accent); color:var(--navy)}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--navy)}
.btn-ghost:hover{background:var(--navy); color:#fff}
.btn-light{background:#fff; color:var(--navy)}
.btn-light:hover{background:var(--peach)}
.btn-outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.btn-outline-light:hover{background:#fff; color:var(--navy); border-color:#fff}
.btn-sm{padding:11px 22px; font-size:14px}

/* Header. Zelfde vorm als op de homepage, maar alle links wijzen terug naar index.html,
   want een machinepagina heeft de homepage-secties niet zelf. Geen announcementbar:
   die staat op één plek (de homepage), zodat Ymke hem niet zes keer hoeft bij te werken. */
.header{position:sticky; top:0; z-index:50; background:var(--cream); border-bottom:1px solid var(--line)}
.header-in{display:flex; align-items:center; justify-content:space-between; height:78px; gap:24px}
.brand img{height:52px; width:auto}
@media(min-width:640px){.brand img{height:60px}}
.nav{display:none; gap:34px}
.nav a{font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink)}
.nav a:hover{color:var(--accent)}
.header .btn{display:none}
@media(min-width:920px){.nav{display:flex} .header .btn{display:inline-flex}}
.subnav{border-top:1px solid var(--line); position:relative}
.subnav::after{content:""; position:absolute; right:0; top:0; bottom:0; width:44px; pointer-events:none;
  background:linear-gradient(to right, rgba(255,250,247,0), var(--cream))}
.subnav-in{display:flex; gap:24px; overflow-x:auto; scrollbar-width:none; padding-block:11px}
.subnav-in::-webkit-scrollbar{display:none}
.subnav-in a{flex:none; font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink); padding-block:5px}
.subnav-in a:hover{color:var(--accent)}
@media(min-width:920px){.subnav{display:none}}
.header-mob .btn{display:inline-flex}
@media(min-width:920px){.header-mob{display:none}}

/* Kruimelpad: op een subpagina moet zichtbaar zijn waar je bent en hoe je terugkomt.
   Platte tekst met scheidingstekens, geen nieuw motief. De huidige pagina is geen link
   en krijgt aria-current, zodat een screenreader dat ook doorgeeft. */
.crumbs{padding-top:clamp(18px,2.4vw,26px)}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em}
.crumbs li{display:inline-flex; align-items:center; gap:10px}
.crumbs li+li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent)}
/* Navy in plaats van zwart: dat zet op elke subpagina meteen bovenaan een beetje
   merkkleur, en het contrast op creme blijft ruim boven de norm. */
.crumbs a{color:var(--navy); text-decoration:underline; text-underline-offset:3px}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--navy)}

/* Hero van een machinepagina. Zelfde tweekolomsopzet en hetzelfde perzikvlak met
   gestippelde ring als in de hero op de homepage; de "Nieuw in Nederland"-vlag en het
   losse ijsje blijven daar, want die horen bij de openingssectie van de site. */
.mhero{position:relative; overflow:hidden}
.mhero-in{display:grid; grid-template-columns:1fr; gap:clamp(32px,5vw,56px); align-items:center;
  padding-block:clamp(30px,4.6vw,60px)}
/* Beeld links, tekst rechts. Vaste opzet voor elke machinepagina, ook de komende.
   De DOM-volgorde blijft tekst eerst: de H1 hoort vooraan te staan voor een schermlezer en
   voor de zoekmachine. Het omwisselen gebeurt daarom met gridplaatsing en niet door de
   blokken in de HTML te verwisselen. Onder 940px valt de plaatsing weg en staat de tekst
   weer boven het beeld, wat daar de juiste volgorde is. */
@media(min-width:940px){
  .mhero-in{grid-template-columns:.98fr 1.02fr}
  .mhero-visual{grid-column:1; grid-row:1}
  .mhero-copy{grid-column:2; grid-row:1}
}
.mhero h1{margin-top:20px; max-width:20ch}
.mhero-lead{margin-top:22px; font-size:clamp(16.5px,1.4vw,18.5px); max-width:46ch}
/* Modelcodes in dezelfde opmaak als op de machinekaarten, tussen haarlijnen zodat de rij
   als spec-regel leest en niet als knop. */
.mhero-models{margin-top:26px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:13px}
.mhero-models b{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; color:var(--navy); margin-bottom:5px}
.mhero-models span{font-weight:700; font-size:14px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent)}
.mhero-cta{margin-top:30px; display:flex; flex-wrap:wrap; gap:14px}
.mhero-visual{position:relative; min-height:340px; display:grid; place-items:center;
  max-width:520px; margin-inline:auto; width:100%;
  /* Zelfde afspraak als op de homepage: de machinemaat staat in een variabele, want de plas
     erachter is daaraan geijkt. Verander deze waarde, niet de twee losse. */
  --machine:min(460px,60vw)}
/* Zelfde behandeling als in de hero van de homepage: alleen de ronde lichtplas (--glow) met
   de contactschaduw eronder, en geen lijncirkel meer eromheen. */
.mhero-visual .disc{position:absolute; width:calc(var(--machine) * 1.4); aspect-ratio:1/1;
  border-radius:50%; background:var(--glow)}
/* VLOERSCHADUW IN DE HERO, zelfde regel als op de kaarten (Jarco 06-10): midden op de voetlijn
   en even breed als de machine. De machine is --machine hoog en staat gecentreerd; de plas is
   1,4 keer zo hoog en ook gecentreerd, dus de voetlijn ligt 0,2 x --machine boven de onderkant
   van de plas. Daar komt het midden van de ovaal. Eerst stond hij op 6% van de plas, zo'n 0,1 x
   --machine onder de voeten, en was hij altijd 0,7 x --machine breed, ook onder een smalle
   machine. De breedte is --machine maal de verhouding van de foto (--r), via :has() gekoppeld
   aan de bestandsnaam, net als in MACHINEVERHOUDINGEN bij de kaarten. */
.mhero-visual{--r:.45}
.mhero-visual .disc::before{content:""; position:absolute; left:50%; bottom:calc(var(--machine) * .2);
  translate:-50% 50%; width:calc(var(--machine) * var(--r) * 1.15); height:22px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(6,22,55,.38) 0%, rgba(6,22,55,0) 72%)}
.mhero-visual:has(img[src*="machine-pasteuriseerder.webp"]){--r:.634}
.mhero-visual:has(img[src*="machine-roomijsturbine.webp"]){--r:.468}
.mhero-visual:has(img[src*="machine-gecombineerd.webp"]){--r:.49}
.mhero-visual:has(img[src*="machine-multifunctioneel.webp"]){--r:.704}
.mhero-visual:has(img[src*="machine-slagroom.webp"]){--r:.946}
.mhero-visual .machine{grid-area:1/1; position:relative; z-index:2; width:auto;
  height:var(--machine); filter:drop-shadow(0 34px 40px rgba(6,22,55,.26))}
/* Compacte hero voor een inhoudspagina, nu Over ons. Bewust ANDERS dan .mhero op een
   machinepagina: daar is de machinefoto het onderwerp en mag de hero het scherm vullen,
   hier is de hero een titelblok.

   NAVY, en de lichtplas is eruit (verzoek 14-09). Twee redenen. De plas was oranje op
   oranje en voegde vrijwel niets toe: gemeten liep de achtergrond onder de tekst van
   #fdeee0 naar #fbcda6, een verschil dat je nauwelijks ziet. En op navy gaat de oranje
   eyebrow van 2,31:1 naar 6,79:1, dus juist het enige element dat hier onder de norm zat
   is nu ruim in orde. De lopende tekst was nooit het probleem: die stond op 14,3:1 en in
   het slechtste punt onder de plas nog altijd op 11,2:1.

   Er hebben ook drie feiten onder de regel gestaan; die zijn er op verzoek weer uit
   (14-09). De band is nu bewust kort: label, titel, één regel. Wil je hem later toch
   voller, doe dat dan met inhoud en niet met een verloop. */
.paghero{position:relative; overflow:hidden; background:var(--navy); color:#fff;
  padding-bottom:calc(var(--tand-h) + clamp(30px,3.8vw,50px));
  /* Getande onderrand, dezelfde tand en dezelfde maat als de bovenkant van de CTA-band op
     de homepage (de banden zelf hebben sinds 06-10 rechte scheidingen). Twee lagen: de
     tandenstrook onderaan en een blok dat de rest vult. De +1px voorkomt een haarlijn
     tussen die twee door afronding. */
  -webkit-mask:
    var(--masker-tand) left bottom/var(--tand-b) var(--tand-h) space no-repeat,
    linear-gradient(#000,#000) left top/100% calc(100% - var(--tand-h) + 1px) no-repeat;
  mask:
    var(--masker-tand) left bottom/var(--tand-b) var(--tand-h) space no-repeat,
    linear-gradient(#000,#000) left top/100% calc(100% - var(--tand-h) + 1px) no-repeat}
.paghero h1{color:#fff; font-weight:550}
.paghero h1 em{color:var(--accent)}
/* Het kruimelpad staat BINNEN de hero, net als op de contactpagina, en moet daar dus wit
   zijn: de navy-versie die elders geldt zou hier onzichtbaar zijn. De oranje stip tussen
   de kruimels haalt op navy 6,79:1 en blijft dus staan. */
.paghero .crumbs{position:relative; z-index:1; padding-top:clamp(16px,2.2vw,24px)}
.paghero .crumbs a{color:#fff}
.paghero .crumbs a:hover{color:var(--accent)}
.paghero .crumbs [aria-current]{color:rgba(255,255,255,.72)}
/* GEEN eigen max-width op dit blok. Dat stond er eerst wel, en dan wordt het smaller dan de
   .wrap van het kruimelpad erboven en schuift het naar het midden: het kruimelpad begon dan
   op 88px en de kop op 238px. Nu volgt het blok gewoon de .wrap en lijnt alles links uit op
   dezelfde as. De leesbreedte wordt geregeld op de kop en de regel zelf, in ch. */
.paghero-in{position:relative; z-index:1; padding-top:clamp(18px,2.4vw,30px)}
/* Breder laten lopen: op 19ch viel de kop over drie regels en werd het blok onnodig hoog.
   Op 30ch past hij op twee regels en zakt de hoogte mee. */
.paghero h1{margin-top:10px; font-size:clamp(28px,3.4vw,44px); max-width:30ch}
.paghero-lead{margin-top:14px; font-size:clamp(16px,1.3vw,17.5px); max-width:64ch}

/* Persoonlijk blok: één staande foto links, verhaal rechts. Zelfde tweekolomsritme als de
   fotostrook op een machinepagina, maar met één groot beeld in plaats van vier kleine.
   De foto staat in een eigen figure zodat er later een bijschrift bij kan zonder dat de
   opzet verandert. */
.verhaal{padding-block:var(--sy)}
.verhaal-in{display:grid; grid-template-columns:1fr; gap:clamp(26px,3.6vw,52px); align-items:center}
@media(min-width:940px){.verhaal-in{grid-template-columns:.86fr 1.14fr}}
.verhaal-foto{margin:0; border-radius:14px; overflow:hidden; background:var(--peach);
  aspect-ratio:4/5; max-width:420px}
.verhaal-foto img{width:100%; height:100%; object-fit:cover; display:block}
.verhaal h2{margin-top:16px}
.verhaal p{margin-top:16px; max-width:56ch}

/* Servicegebied op de servicepagina (24-09): tekst links, kaart van Nederland rechts, zelfde
   ritme en breekpunt als het verhaalblok. De kaart is een los SVG-bestand met vaste kleuren
   (navy land, oranje pin), gemaakt uit CBS-data, zie scripts/kaart-nederland.py. De verplichte
   bronvermelding staat op algemene-voorwaarden.html, niet onder de kaart. */
.gebied{padding-block:var(--sy)}
.gebied-in{display:grid; grid-template-columns:1fr; gap:clamp(30px,4vw,56px); align-items:center}
@media(min-width:940px){.gebied-in{grid-template-columns:1.1fr .9fr}}
.gebied h2{margin-top:16px}
.gebied p{margin-top:16px; max-width:52ch}
.gebied-kaart{margin:0; justify-self:center; width:min(100%,400px)}
.gebied-kaart img{display:block; width:100%; height:auto}

/* Juridische pagina's (privacyverklaring, algemene voorwaarden, 24-09): lopende tekst op
   leesbreedte. De koppen zijn kleiner dan elders op de site, want het zijn er veel en het is
   naslag, geen verkoop. Links zijn onderstreept, anders zijn ze in lopende tekst niet te zien. */
.juridisch{padding-block:var(--sy)}
/* De leesbreedte op de tekst zelf, niet op .wrap: dan lijnt de tekst links uit met de kop erboven. */
.juridisch-in>*{max-width:74ch}
.juridisch h2{margin-top:clamp(34px,4vw,48px); font-size:clamp(20px,1.8vw,24px)}
.juridisch h2:first-child{margin-top:0}
.juridisch p,.juridisch ul,.juridisch ol{margin-top:14px}
.juridisch ul,.juridisch ol{padding-left:1.2em}
.juridisch li+li{margin-top:6px}
.juridisch a{color:var(--navy); text-decoration:underline; text-underline-offset:2px}
.juridisch a:hover{color:var(--accent)}

/* ZES FEITEN ALS BANDEN, op Over ons en Service. Zelfde vorm als het serviceblok op de
   homepage: vlakken in wit, --peach-soft en --peach met RECHTE scheidingen en dezelfde ronde
   hoeken boven en onder (verzoek Jarco 06-10). Tot 06-10 hadden ze een getande onderrand die
   over de band eronder schoof; Marinka vond die te speels (mail 16-09).
   Verschil met de homepage: daar zijn het er drie onder elkaar, hier zes. Zes onder elkaar
   wordt een halve meter, dus vanaf 820px staan ze in twee kolommen, en dan is elke kolom
   een eigen stapel met eigen ronde hoeken. */
.feitbanden{list-style:none; margin:clamp(34px,4.6vw,52px) 0 0; padding:0;
  display:grid; grid-template-columns:1fr; column-gap:clamp(20px,2.6vw,34px); row-gap:0}
@media(min-width:820px){.feitbanden{grid-template-columns:1fr 1fr}}
.feitband{padding:22px clamp(20px,2.2vw,28px); background:var(--vlak)}
/* ÉÉN KOLOM: de tinten wisselen per band, ronde hoeken op de eerste en de laatste. */
.feitband:nth-child(3n+1){--vlak:#fff}
.feitband:nth-child(3n+2){--vlak:var(--peach-soft)}
.feitband:nth-child(3n+3){--vlak:var(--peach)}
.feitband:first-child{border-radius:14px 14px 0 0}
.feitband:last-child{border-radius:0 0 14px 14px}
@media(min-width:820px){
  /* TWEE KOLOMMEN: de tint gaat per RIJ. Twee dezelfde tinten NAAST elkaar mag, die raken
     elkaar niet. Twee dezelfde tinten ONDER elkaar mag niet, dan zie je de scheiding niet.
     Ronde hoeken bovenaan op de eerste rij en onderaan op de laatste rij. */
  .feitband:nth-child(-n+2){--vlak:#fff; border-radius:14px 14px 0 0}
  .feitband:nth-child(3),.feitband:nth-child(4){--vlak:var(--peach-soft); border-radius:0}
  .feitband:nth-child(n+5){--vlak:var(--peach); border-radius:0 0 14px 14px}
}
.feitband b{display:block; font-family:var(--font-body); font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--navy); margin-bottom:7px}
.feitband p{font-size:14.5px; max-width:62ch}

/* De andere bedrijven van de familie. Drie kaarten naast elkaar met een logo, de naam en
   in twee regels wat het bedrijf doet. Bewust een ANDERE vorm dan de sectie erboven: die
   gebruikt regels tussen haarlijnen, en twee van die blokken achter elkaar lezen als één
   lange lijst. Een kaart met een logo leest bovendien als een merk, en dat is precies wat
   dit blok moet doen: vertrouwen lenen van bedrijven die er al zijn. */
.bedrijven{padding-block:var(--sy)}
/* Beurzen op Over ons (overleg 05-10): een wit blok onder de familiebedrijven, met links de tekst
   en rechts de knop naar Facebook, waar de details per beurs staan. Staat op de gewone
   paginakleur, zodat de getande bovenrand van de afsluitband eronder blijft kloppen. De
   ruimte boven komt van .bedrijven. */
.beurzen{padding-bottom:var(--sy)}
.beurzen-blok{background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:clamp(26px,3.4vw,40px); display:grid; gap:24px; align-items:center; justify-items:start}
@media(min-width:820px){.beurzen-blok{grid-template-columns:1fr auto; gap:48px}}
.beurzen-tekst h2{margin-top:16px}
.beurzen-tekst p{margin-top:14px; max-width:62ch}
/* De beurzen en demodagen zelf (08-10): twee lijsten naast elkaar, kopjes in dezelfde stijl als de
   labels in de feitband, de datum vet ervoor. */
.beurzen-lijsten{margin-top:24px; display:grid; gap:22px}
@media(min-width:600px){.beurzen-lijsten{grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px}}
.beurzen-lijsten h3{font-family:var(--font-body); font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--navy); font-variation-settings:normal}
.beurzen-lijst{list-style:none; margin:10px 0 0; padding:0}
.beurzen-lijst li{font-size:15px; padding-block:9px; border-top:1px solid var(--line)}
.beurzen-lijst li:last-child{border-bottom:1px solid var(--line)}
.beurzen-lijst b{display:block; color:var(--navy)}
.bedrijf-kaarten{margin-top:clamp(30px,4.2vw,46px); display:grid; grid-template-columns:1fr; gap:22px}
/* Twee bij twee sinds er vier bedrijven zijn (24-09): vier naast elkaar maakt smalle tekstkolommen. */
@media(min-width:760px){.bedrijf-kaarten{grid-template-columns:repeat(2,1fr)}}
.bedrijf{position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:14px; padding:26px 24px 28px; min-width:0;
  transition:transform var(--overgang), box-shadow var(--overgang)}
.bedrijf:hover{transform:translateY(-4px); box-shadow:0 26px 50px rgba(6,22,55,.12)}
/* De HELE kaart is klikbaar, maar er staat maar ÉÉN link in: de bedrijfsnaam, met een
   pseudo-element dat over de kaart heen ligt. Dat is de nette manier. Van de kaart zelf een
   <a> maken zou de alinea en het logo mee in de linknaam trekken, en drie losse links per
   kaart geven een schermlezer drie keer hetzelfde doel. */
.bedrijf h3 a{color:inherit; text-decoration:none}
.bedrijf h3 a::after{content:""; position:absolute; inset:0; border-radius:14px}
.bedrijf:hover h3 a{color:var(--accent)}
/* De focusring hoort om de hele kaart, want dat is ook het klikvlak. */
.bedrijf h3 a:focus-visible::after{outline:3px solid var(--navy); outline-offset:3px}
.bedrijf h3 a:focus-visible{outline:none}
/* Het adres onderaan, zodat zichtbaar is waar de kaart naartoe gaat. aria-hidden, want een
   schermlezer krijgt het doel al via de link zelf. */
.bedrijf-site{margin-top:auto; padding-top:16px; font-family:var(--font-body); font-size:12px;
  font-weight:700; letter-spacing:.06em; text-transform:lowercase; color:var(--navy)}
.bedrijf-site::after{content:" \2197"}
/* Navy tegel met een vaste hoogte. Twee redenen: de namen eronder staan zo op één lijn
   ook als het ene logo breed en laag is en het andere vierkant, en het geeft de kaart een
   anker. Bij een logo in de eigen kleuren (.bedrijf--origineel, hieronder) vervalt de tegel. */
.bedrijf-logo{height:104px; display:grid; place-items:center; margin-bottom:20px;
  background:var(--navy); border-radius:10px; padding:14px 18px}
.bedrijf-logo img{max-width:100%; max-height:62px; width:auto; height:auto; object-fit:contain}
/* Een staand logo op dezelfde hoogte oogt half zo groot als een liggend, want het is veel
   smaller. Daarom mag dat wat hoger worden binnen dezelfde tegel. */
.bedrijf-logo--staand img{max-height:80px}
.bedrijf h3{margin:0 0 10px; line-height:1.2; font-size:19px; font-weight:600;
  font-variation-settings:"wdth" 88; letter-spacing:.04em}
.bedrijf p{font-size:14.5px; line-height:1.55; max-width:90%}   /* tekst maximaal 90% van de kaart (Jarco 06-10) */
/* Kaart met het logo in de EIGEN kleuren, rechtstreeks op wit (Jarco 06-10): Bakkerij Service
   Hagel en B&O Bakkerijtechniek. Geen tegel: het logo staat links, gelijk met de tekst, en is
   kleiner (48px liggend, 64px staand, tegen 62 en 80 in de navy tegels). Het logovak houdt de
   hoogte van die tegels (104px), zodat de namen in beide kolommen op één lijn staan.
   Een modifier en geen :nth-child, want het hoort bij het logo en niet bij de plek in het raster.
   Eerder op 06-10 geprobeerd en afgekeurd: een navy kaart met een witte tegel (over de volle
   breedte, daarna 300px gecentreerd, daarna 240px links). */
.bedrijf--origineel .bedrijf-logo{background:none; padding:0; place-items:center start}
.bedrijf--origineel .bedrijf-logo img{max-height:48px}
.bedrijf--origineel .bedrijf-logo--staand img{max-height:64px}
/* Subtiele achtergrondfoto in de twee kaarten met een eigen logo (Jarco 06-10): de steeksleutel
   bij Bakkerij Service Hagel, het tandwiel bij B&O Bakkerijtechniek. Aangeleverd door Jarco
   (achtergronden_los.zip; de originelen staan in assets/aangeleverd/achtergronden/). De warme
   achtergrond van de foto (#fbf7f3) is naar zuiver wit getrokken, zodat hij wegvalt in de witte
   kaart en alleen het staal overblijft, en het lichte kader van 10px rond de foto is eraf
   gesneden (dat werd anders een witte streep waar het staal de rand raakt). Een witte waas eroverheen maakt het subtiel en houdt
   de tekst leesbaar. --waas is de sterkte van die waas: 0 is de foto vol, 1 is onzichtbaar.
   Het voorwerp staat rechts in de foto en loopt rechts en onder van de kaart af. */
.bedrijf--sleutel,.bedrijf--tandwiel,.bedrijf--mixer,.bedrijf--brood{--waas:.7}
.bedrijf--sleutel{background:
  linear-gradient(rgba(255,255,255,var(--waas)),rgba(255,255,255,var(--waas))),
  url("images/achtergrond-sleutel.webp") right bottom/auto 100% no-repeat, #fff}
.bedrijf--tandwiel{background:
  linear-gradient(rgba(255,255,255,var(--waas)),rgba(255,255,255,var(--waas))),
  url("images/achtergrond-tandwiel.webp") right bottom/auto 100% no-repeat, #fff}
.bedrijf--mixer{background:
  linear-gradient(rgba(255,255,255,var(--waas)),rgba(255,255,255,var(--waas))),
  url("images/achtergrond-mixer.webp") right bottom/auto 100% no-repeat, #fff}
.bedrijf--brood{background:
  linear-gradient(rgba(255,255,255,var(--waas)),rgba(255,255,255,var(--waas))),
  url("images/achtergrond-brood.webp") right bottom/auto 100% no-repeat, #fff}

/* Afsluitende band op een inhoudspagina: navy vlak met een gecentreerd kopblok en twee
   knoppen. Zelfde kleur en ritme als de offerteband op een machinepagina, maar zonder
   formulier: op Over ons hoort geen aanvraagformulier maar een doorstap. Bewust een eigen
   klasse en niet .quote meegeleend, want die naam betekent offerte en dat zou een volgende
   lezer op het verkeerde been zetten. Herbruikbaar op elke pagina die zo wil afsluiten. */
.afsluiter{background:var(--navy); color:#fff;
  padding-top:calc(var(--sy) + var(--tand-h)); padding-bottom:var(--sy);
  /* Getande BOVENrand: dezelfde tand, gespiegeld, precies zoals de CTA op de homepage.
     Dit en de onderkant van de hero zijn de enige twee plekken op deze pagina met het
     motief; meer maakt van een accent een patroon. */
  -webkit-mask:
    var(--masker-tand-boven) left top/var(--tand-b) var(--tand-h) space no-repeat,
    linear-gradient(#000,#000) left bottom/100% calc(100% - var(--tand-h) + 1px) no-repeat;
  mask:
    var(--masker-tand-boven) left top/var(--tand-b) var(--tand-h) space no-repeat,
    linear-gradient(#000,#000) left bottom/100% calc(100% - var(--tand-h) + 1px) no-repeat}
.afsluiter .eyebrow{color:var(--accent)}
.afsluiter h2{color:#fff; font-weight:550; margin-top:16px}
.afsluiter h2 em{color:var(--accent)}
.afsluiter-in{max-width:min(80%,860px); margin-inline:auto; text-align:center}
.afsluiter-in p{margin:16px auto 0; max-width:62ch}
/* De knoppen staan in een flexrij, dus text-align van de ouder raakt ze niet: centreren
   gebeurt hier met justify-content. */
.afsluiter-cta{margin-top:clamp(26px,3.4vw,34px); display:flex; flex-wrap:wrap; gap:14px;
  justify-content:center}

/* Varianten: één kaart per model, met de specs die per model verschillen. Bewust geen
   brede tabel, want die kan op 375px niet zonder horizontaal schuiven, en bewust niet de
   volledige brochure: alleen de waarden waarop iemand een maat kiest. */
.specs{background:var(--cream-2); padding-block:var(--sy)}
.specs-head{max-width:min(78%,920px)}
.specs-head h2{margin-top:16px}
.specs-head p{margin-top:16px}
.variants{margin-top:clamp(32px,4.6vw,48px); display:grid; grid-template-columns:1fr; gap:22px}
@media(min-width:700px){.variants{grid-template-columns:repeat(3,1fr)}}
.variant{background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 24px 24px}
.variant h3{margin:0}
.variant .cap{margin-top:6px; font-size:15px; font-weight:700; color:var(--navy)}
/* Geen kolomtussenruimte: met een gap krijgt elke rij twee losse streepjes in plaats van
   één doorlopende haarlijn. De ruimte tussen label en waarde zit daarom in de padding. */
.variant dl{margin:20px 0 0; display:grid; grid-template-columns:1fr auto; gap:0}
.variant dt,.variant dd{margin:0; padding:11px 0; border-top:1px solid var(--line); font-size:13.5px}
.variant dt{font-weight:400; padding-right:14px}
.variant dd{font-weight:700; text-align:right}
.variant dl>dt:nth-last-of-type(1),.variant dl>dd:nth-last-of-type(1){border-bottom:1px solid var(--line)}
/* Slagroomautomaat: die heeft maar één model, dus geen raster van drie. De kaart houdt de
   breedte van één kolom aan in plaats van uit te rekken over de volle sectiebreedte. */
@media(min-width:700px){.variants--een{grid-template-columns:minmax(0,360px)}}
/* Voetnoot uit de brochure zelf: de procestijd is een indicatie, geen belofte. */
.specs-note{margin-top:22px; font-size:13px; max-width:70ch}

/* Kenmerken die voor alle maten gelijk zijn: tekstregels tussen haarlijnen, dezelfde vorm
   als de servicepunten en de contactkanalen op de homepage. Geen tweede iconenrij. */
.features{margin-top:clamp(34px,4.6vw,52px)}
/* Het raster zit op de ul, niet op de wrapper: anders is de ul één gridcel en blijven de
   punten onder elkaar staan. */
.features ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:0 clamp(28px,4vw,56px)}
@media(min-width:820px){.features ul{grid-template-columns:1fr 1fr}}
.features li{padding:18px 0; border-top:1px solid var(--line)}
.features b{display:block; font-family:var(--font-body); font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--navy); margin-bottom:6px}
.features p{font-size:14.5px}
/* Knop onder een kenmerkenlijst. In een p en niet los, zodat de marge van de lijst erboven
   niet doorloopt en de knop netjes op de tekstlijn begint. */
.features-cta{margin:clamp(22px,3vw,30px) 0 0}

/* Andere machines: dezelfde kaartvorm als het assortiment op de homepage, compacter.
   Staat onder de productinformatie, zodat iemand vanaf hier verder kan kijken. */
.others{padding-block:var(--sy)}
.others h2{margin-top:16px}
.other-cards{margin-top:clamp(30px,4.4vw,44px); display:grid; grid-template-columns:1fr; gap:22px}
@media(min-width:620px){.other-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.other-cards{grid-template-columns:repeat(4,1fr)}}
.other{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:22px 22px 24px; transition:transform var(--overgang), box-shadow var(--overgang)}
.other:hover{transform:translateY(-4px); box-shadow:0 26px 50px rgba(6,22,55,.12)}
.other-media{position:relative; height:170px; display:grid; grid-template-rows:1fr; place-items:center; margin-bottom:16px}
/* Zelfde behandeling als de kaarten op de homepage: zachte lichtplas zonder rand plus een
   contactschaduw, en niet meer om en om twee kleuren. */
.other-media .disc{position:absolute; width:min(100%,210px); aspect-ratio:1/1; border-radius:50%;
  background:var(--glow)}
/* Vloerschaduw: zie VLOERSCHADUW bij .card-media. */
.other-media{--h:170px; --maxb:100%; --r:.45}
.other-media img{position:relative; z-index:1; width:100%; height:100%; max-height:var(--h);
  object-fit:contain; object-position:50% 100%; align-self:end;
  filter:drop-shadow(0 14px 18px rgba(6,22,55,.22))}
/* De slagroomautomaat is breed en laag en dekt de cirkel anders volledig af. */
.other--compact .other-media{--h:120px; --maxb:60%}
.other--compact .other-media img{max-width:60%}
.other__models{font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent)}
.other h3{margin:9px 0 10px; line-height:1.2}
.other p{font-size:14px; line-height:1.55; flex:1}
.other .btn{margin-top:18px; align-self:stretch; justify-content:center; text-align:center}

/* Inlaadanimaties. Bewust minimaal gehouden: alleen opacity en transform, want die twee
   draait de browser op de compositor en kosten dus geen layout- of paintwerk. Eén
   IntersectionObserver voor de hele pagina, en zodra een blok in beeld is geweest gaat de
   observer eraf en verwijdert de JS de klassen weer. Daarna staat er niets meer op het
   element, dus geen achterblijvende transitions die de hover-effecten in de weg zitten.
   De hero doet NIET mee: die bevat het grootste beeld van de pagina, en een fade daarop
   vertraagt de LCP-meting. Alleen de perzikcirkel eronder komt zachtjes op.
   Het `data-reveal`-attribuut wordt door een regel in de <head> gezet, en niet als iemand
   in het systeem heeft aangegeven bewegingen te willen beperken. Zonder JS of met
   beperkte beweging is er dus geen enkele verborgen staat. */
[data-reveal] .reveal{opacity:0; transform:translateY(14px)}
[data-reveal] .reveal.in{opacity:1; transform:translateY(0);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1)}
/* Blokken in een reeks komen na elkaar op, met kleine stappen zodat het niet traag voelt. */
[data-reveal] .stagger>.reveal:nth-child(2),[data-reveal] .stagger>*:nth-child(2)>.reveal{transition-delay:.07s}
[data-reveal] .stagger>.reveal:nth-child(3),[data-reveal] .stagger>*:nth-child(3)>.reveal{transition-delay:.14s}
[data-reveal] .stagger>.reveal:nth-child(4),[data-reveal] .stagger>*:nth-child(4)>.reveal{transition-delay:.21s}
[data-reveal] .stagger>.reveal:nth-child(5){transition-delay:.28s}
[data-reveal] .stagger>.reveal:nth-child(6){transition-delay:.35s}
@media(prefers-reduced-motion:reduce){[data-reveal] .reveal{opacity:1; transform:none; transition:none}}

/* De cirkel achter de machine komt zachtjes op. Een gradient telt niet mee voor de
   LCP-meting, dus dit kan zonder de score te raken. */
@media(prefers-reduced-motion:no-preference){
  .mhero-visual .disc{animation:cirkel-op .9s cubic-bezier(.2,.7,.3,1) both}
}
@keyframes cirkel-op{from{opacity:0; transform:scale(.94)}to{opacity:1; transform:scale(1)}}

/* Alleen voor schermlezers: geeft een korte knoptekst de context die iemand met het oog
   uit de kaart haalt. Zo blijft de knop klein zonder dat het linkdoel onduidelijk wordt. */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Kaartknoppen op de machinepagina compact: één woord, links in de kaart, niet over de
   volle breedte. Twee of drie regels knoptekst maakte de kaarten rommelig. De context
   staat in de sr-only tekst, dus het linkdoel blijft duidelijk. */
.other .btn{margin-top:18px; align-self:start}

/* Foto's van de machine, als compacte strook. Dit is de derde vorm:
   1. vier gelijke foto's met elk een tekst eronder: te veel informatie in een keer, en niet
      te zien dat je erop kon klikken.
   2. een groot beeld met keuzefoto's ernaast: wel duidelijk en speels, maar het nam bijna
      900px hoogte en drong zich daarmee op.
   Nu: links de kop met een regel uitleg, rechts vier kleine foto's met alleen een korte
   naam. Wie meer wil zien klikt een foto open op volle grootte. De sectie is daarmee rond
   de 300px hoog in plaats van 900, en de informatie is er nog steeds voor wie ernaar zoekt. */
/* NAVY in plaats van creme (verzoek 14-09: meer blauw op de andere pagina's dan home).
   Dit is de plek waar dat het meeste doet: een productfoto op een donkere ondergrond leest
   als een studio-opname, en de machinepagina had verder alleen de offerteband in navy. */
.shots{background:var(--navy); color:#fff; padding-block:clamp(40px,4.8vw,68px)}
.shots .eyebrow{color:var(--accent)}
.shots h2{color:#fff; font-weight:550}
.shots h2 em{color:var(--accent)}
/* De naam onder een foto was navy en zou nu wegvallen. Wit op navy is 17,8:1. */
.shots .thumb span{color:#fff}
.shots .thumb:focus-visible{outline-color:var(--accent)}
.shots-in{display:grid; grid-template-columns:1fr; gap:clamp(22px,3vw,44px); align-items:center}
/* Foto's links, kop en tekst rechts. Dit is de sectie die de pagina breekt: de hero heeft
   het beeld rechts, hier staat het aan de andere kant.
   De DOM-volgorde blijft kop eerst, want een kop hoort voor de inhoud die erbij hoort te
   staan voor een schermlezer. Het omwisselen gebeurt met gridplaatsing. Op mobiel valt die
   plaatsing weg en staat de kop dus weer boven de foto's, wat daar de juiste volgorde is. */
@media(min-width:900px){
  .shots-in{grid-template-columns:1.08fr .92fr}
  .gal-thumbs{grid-column:1; grid-row:1}
  .shots-head{grid-column:2; grid-row:1}
}
.shots-head h2{margin-top:14px}
.shots-head p{margin-top:14px; max-width:40ch}
/* De regel onder de kop is geen lopende tekst maar een bedieningshint, dus die staat een
   stuk kleiner dan een alinea. Sinds de sectie navy is, is de kleur wit: 17,8:1, dus ook
   op 12px ruim boven de norm, en een gedempte tint zou een grijs zijn. */
.shots-head .shots-hint{margin-top:10px; font-size:12px; color:#fff}

/* Onder 560px twee foto's per rij. Op 320px is een kolom van vier maar 61px breed, en dan
   past het woord HOMOGENISEREN (105px in kapitalen) niet in zijn cel: de cel kan niet
   kleiner dan zijn inhoud, dus de hele rij liep 14px buiten het scherm. */
.gal-thumbs{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.4vw,18px)}
@media(min-width:560px){.gal-thumbs{grid-template-columns:repeat(4,1fr)}}
.thumb{width:100%; padding:0; border:0; background:none; cursor:zoom-in; display:block;
  text-align:left; color:inherit; font:inherit}
.thumb img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-radius:10px;
  transition:transform var(--overgang), box-shadow var(--overgang)}
.thumb:hover img{transform:translateY(-3px); box-shadow:0 18px 34px rgba(6,22,55,.18)}
.thumb:focus-visible{outline:3px solid var(--navy); outline-offset:3px; border-radius:10px}
/* Alleen een korte naam onder de foto. De hele uitleg staat in de vergroting, want vier
   volledige zinnen naast elkaar was precies het probleem van de eerste versie. */
.thumb span{display:block; margin-top:10px; font-family:var(--font-body); font-size:11.5px;
  font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--navy)}

.lb{width:min(1100px,92vw); max-width:none; border:0; padding:0; background:transparent}
.lb::backdrop{background:rgba(6,22,55,.86)}
.lb-frame{background:#fff; border-radius:14px; overflow:hidden}
/* De vergroting moet met balk en al in het scherm passen; een staande foto liep er anders
   onderuit en dan viel de sluitknop buiten beeld. */
.lb img{width:100%; height:auto; max-height:74vh; object-fit:contain; display:block; background:var(--cream-2)}
.lb-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px 20px; padding:16px 20px}
.lb-cap{font-size:14px}

/* Offerteformulier onder aan een machinepagina. Bewust een ANDER vlak dan het
   contactformulier op de homepage (dat is een witte kaart op creme): dit staat op navy met
   witte labels. Zo ziet iemand in een oogopslag dat dit een offerteaanvraag is en geen
   contactbericht. */
.quote{background:var(--navy); color:#fff; padding-block:var(--sy)}
.quote .eyebrow{color:var(--accent)}
.quote h2{color:#fff; font-weight:550; margin-top:16px}
.quote h2 em{color:var(--accent)}
/* Kop en formulier staan gecentreerd in de sectie. Links uitgelijnd stond het formulier
   als een smalle kolom tegen de rand terwijl de band zelf breed is, en dat las scheef.
   text-align:center staat ALLEEN op het kopblok. Op het formulier zou het de labels van de
   velden meecentreren, en een gecentreerd label boven een invoerveld leest slechter. */
.quote-head{max-width:min(80%,860px); margin-inline:auto; text-align:center}
.quote-head p{margin-inline:auto}
.quote-head p{margin-top:16px; max-width:62ch}
/* Smaller dan de sectie zelf. Een regel die van een label links naar een keuzelijst
   rechts over 1100px loopt, leest niet: je oog moet te ver terug. 780px houdt de regel
   overzichtelijk en past bij de leesbreedte van de rest van de pagina. */
.quote form{margin-top:clamp(30px,4.4vw,44px); max-width:780px; margin-inline:auto}
.quote fieldset{margin:0 0 28px; padding:0; border:0}
.quote legend{padding:0; font-family:var(--font-body); font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin-bottom:6px}
.quote .hint{font-size:13.5px; margin-bottom:14px}
/* Eén regel per machine: aanvinken, en dan wordt de keuzelijst met de varianten bruikbaar.
   Een uitgeschakelde keuzelijst wordt niet meeverstuurd, dus er komt nooit een variant mee
   van een machine die niet is aangevinkt. */
.pick{list-style:none; margin:0; padding:0}
.pick li{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;
  padding:14px 0; border-top:1px solid rgba(255,255,255,.28)}
.pick li:last-child{border-bottom:1px solid rgba(255,255,255,.28)}
.pick label{display:inline-flex; align-items:center; gap:11px; font-size:15.5px; font-weight:700;
  flex:1 1 240px; cursor:pointer}
.pick input[type=checkbox]{width:22px; height:22px; flex:none; accent-color:var(--accent); cursor:pointer}
.pick select{flex:0 1 300px; font-family:var(--font-body); font-size:14.5px; color:var(--ink);
  background:#fff; border:1px solid #fff; border-radius:10px; padding:11px 40px 11px 14px;
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23061637' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:12px 8px}
/* Uitgeschakeld blijft leesbaar (4,8:1 tegen navy), maar duidelijk niet actief. Op .35
   dekking werd de tekst modderig. Uitgeschakelde velden vallen buiten de contrasteis,
   maar onleesbaar hoeft het niet te zijn. */
.pick select:disabled{background-color:rgba(255,255,255,.55); color:var(--navy); cursor:not-allowed}
.combi{display:inline-flex; align-items:flex-start; gap:12px; margin-top:18px; font-size:15px; cursor:pointer}
.combi input{width:22px; height:22px; flex:none; margin-top:1px; accent-color:var(--accent); cursor:pointer}
.quote .field label{color:#fff}
.quote .field label i{color:#fff}
.quote .field input,.quote .field select,.quote .field textarea{border-color:#fff}
.quote .field input:focus-visible,.quote .field select:focus-visible,.quote .field textarea:focus-visible{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(245,128,32,.55)}
.quote [data-form-status].ok{background:#fff; color:var(--navy)}
.quote [data-form-status].err{background:var(--accent); color:var(--navy)}
.quote .form-note{color:#fff}

/* Uitklap voor de andere machines in het offerteformulier op een machinepagina. In beeld
   staat alleen de machine van deze pagina; de rest komt pas als iemand erom vraagt.
   Bewust een <details> en geen knop met JS: dat werkt met het toetsenbord, wordt door een
   schermlezer als in- en uitgeklapt aangekondigd, en blijft ook zonder JS bruikbaar. */
.uitbreiden{margin-top:20px}
.uitbreiden>summary{display:inline-flex; align-items:center; gap:11px; cursor:pointer;
  padding:13px 26px; border-radius:999px; border:1.5px solid rgba(255,255,255,.45);
  font-family:var(--font-body); font-weight:700; font-size:14.5px; color:#fff;
  list-style:none; transition:background var(--overgang), color var(--overgang), border-color var(--overgang)}
.uitbreiden>summary::-webkit-details-marker{display:none}
/* Plusje dat een minnetje wordt. Geen los icoon, alleen twee streepjes uit de tekstkleur. */
.uitbreiden>summary::before{content:""; width:13px; height:13px; flex:none;
  background:linear-gradient(currentColor,currentColor) center/13px 1.5px no-repeat,
             linear-gradient(currentColor,currentColor) center/1.5px 13px no-repeat}
.uitbreiden[open]>summary::before{background:linear-gradient(currentColor,currentColor) center/13px 1.5px no-repeat}
.uitbreiden>summary:hover{background:#fff; color:var(--navy); border-color:#fff}
.uitbreiden>summary:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.uitbreiden .pick{margin-top:22px}
.qform .uitbreiden>summary{color:var(--navy); border-color:var(--navy)}
.qform .uitbreiden>summary:hover{background:var(--navy); color:#fff; border-color:var(--navy)}
.qform .uitbreiden>summary:focus-visible{outline-color:var(--navy)}

/* Losse offertepagina. Weer een derde vorm: geen witte kaart en geen navy vlak, maar een
   open blok op creme met een navy kopbalk. Zo is ook deze pagina op het eerste gezicht te
   onderscheiden van de twee andere formulieren. De pagina heeft bewust een kale header
   zonder menu, zodat er zo weinig mogelijk afleiding is. */
/* ======================================================================================
   ASSORTIMENT. Deze regels staan OOK in index.html, want de homepage houdt zijn CSS in het
   bestand zelf. Ze zijn hierheen gekopieerd zodat machines.html dezelfde sectie kan tonen.
   LET OP: verander je hier iets, verander het dan ook in index.html, precies zoals dat al
   voor de tokens geldt. Dat is de prijs van de gedupliceerde sectie.
   ====================================================================================== */
/* Assortiment */
.assort{padding-block:var(--sy)}
/* Volgt het assortiment direct op de hero, zoals op machines.html, dan is er geen kopblok
   meer en staan de kaarten anders in een gat van bijna 180px: de sectiepadding plus de
   marge die de kaarten van dat kopblok hadden geërfd. Allebei terug. */
.paghero+.assort,.paghero+.faq,.paghero+.contact .contact-in{padding-top:clamp(38px,4.6vw,62px)}
.paghero+.assort .cards{margin-top:0}
.assort-head{max-width:min(78%,920px)}
.assort-head h2{margin-top:16px}
.assort-head p{margin-top:16px}
.cards{margin-top:clamp(36px,5vw,56px); display:grid; grid-template-columns:1fr; gap:24px}
@media(min-width:620px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{display:flex; flex-direction:column; background:#fff; border-radius:14px; padding:28px 26px 30px;
  border:1px solid var(--line); transition:transform var(--overgang), box-shadow var(--overgang)}
.card:hover{transform:translateY(-4px); box-shadow:0 26px 50px rgba(6,22,55,.12)}
/* Beeld: het hele product blijft zichtbaar, nooit afgesneden */
.card-media{position:relative; height:240px; display:grid; grid-template-rows:1fr; place-items:center; margin-bottom:18px}
/* Achtergrond achter de machine: een zachte lichtplas die naar transparant uitloopt, plus
   een contactschaduw onder de machine. Geen harde cirkelrand meer, en niet meer om en om
   perzik en blauwgrijs.
   Waarom: de klant vond de gevulde cirkels met wisselende kleur te kinderachtig. Een vlak
   zonder zichtbare rand leest als een studio-achtergrond in plaats van als een sticker, en
   de schaduw eronder zet de machine op een vloer. Beide gebruiken alleen bestaande kleuren:
   perzik voor het licht, navy met lage dekking voor de schaduw. */
.card-media .disc{position:absolute; width:min(100%,300px); aspect-ratio:1/1; border-radius:50%;
  background:var(--glow)}
/* VLOERSCHADUW: een ovaal precies onder de voeten en even breed als de machine (Jarco 06-10).
   Twee dingen maken dat het altijd klopt:
   1. Elke machine staat met de voeten op de onderrand van de mediadoos (align-self:end plus
      object-position onderaan). Eerst stond een kleinere machine gecentreerd in de doos, met
      de voeten 36px boven de schaduw (de slagroomautomaat).
   2. De ovaal is zo breed als de machine: hoogte (--h) maal de verhouding van de foto (--r),
      begrensd door de maximale breedte (--maxb). --r hangt via :has() aan de bestandsnaam van
      de foto, dus het klopt op elke pagina vanzelf (zie MACHINEVERHOUDINGEN hieronder).
   De foto zelf houdt een zachte drop-shadow voor diepte. */
.card-media{--h:240px; --maxb:100%; --r:.45}
.card-media img{position:relative; z-index:1; width:100%; height:100%;
  max-height:var(--h); object-fit:contain; object-position:50% 100%; align-self:end;
  filter:drop-shadow(0 16px 20px rgba(6,22,55,.22))}
.card-media::after,.other-media::after{content:""; position:absolute; left:50%; bottom:0;
  translate:-50% 50%; width:calc(min(var(--maxb), var(--h) * var(--r)) * 1.15); height:18px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(6,22,55,.38) 0%, rgba(6,22,55,0) 72%)}
.other-media::after{height:14px}
.card--soon .card-media::after{display:none}
/* MACHINEVERHOUDINGEN: breedte gedeeld door hoogte van de foto (strak bijgesneden, gemeten
   06-10). Nieuwe machinefoto? Zet hem hier bij, anders valt de ovaal terug op .45. */
.card-media:has(img[src*="machine-pasteuriseerder.webp"]),.other-media:has(img[src*="machine-pasteuriseerder.webp"]){--r:.634}
.card-media:has(img[src*="machine-roomijsturbine.webp"]),.other-media:has(img[src*="machine-roomijsturbine.webp"]){--r:.468}
.card-media:has(img[src*="machine-gecombineerd.webp"]),.other-media:has(img[src*="machine-gecombineerd.webp"]){--r:.49}
.card-media:has(img[src*="machine-multifunctioneel.webp"]),.other-media:has(img[src*="machine-multifunctioneel.webp"]){--r:.704}
.card-media:has(img[src*="machine-slagroom.webp"]),.other-media:has(img[src*="machine-slagroom.webp"]){--r:.946}
.card__models{font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent)}
/* h2 en h3 gelijk: op de homepage staan de kaarttitels onder een sectiekop van h2 en zijn
   het h3's, op machines.html staan ze onder de h1 van de pagina en zijn het h2's. Zelfde
   typografie, alleen een ander niveau, zodat de koppenvolgorde nergens een stap overslaat. */
.card h3,.card h2{margin:10px 0 12px; line-height:1.2;
  font-size:19px; font-weight:600; font-variation-settings:"wdth" 88; letter-spacing:.04em}
.card__desc{font-size:14.5px; line-height:1.55; flex:1}
/* Ruimte tussen omschrijving en knop. Die gaf eerst de "Geschikt voor"-regel; die is weg (Jarco 06-10). */
.card__desc+.btn{margin-top:20px}
/* Over de volle kaartbreedte en gecentreerd. De labels verschillen in lengte, en
   links uitgelijnd gaven ze bij de tweekoloms-breedte ongelijke knopbreedtes en
   twee knoppen die naar een tweede regel omsloegen. */
/* Smalle zijmarge, want de langste labels ("Bekijk de gecombineerde machines") sloegen
   anders om naar een tweede regel. De knop is toch al zo breed als de kaart, dus die
   ruimte is niet nodig. */
/* Kaartknoppen: elke kaart heeft zijn eigen productlabel, want dat converteert beter dan
   vijf keer hetzelfde woord. Twee labels passen bij de smalste kaartbreedtes niet op één
   regel (gemeten: bij 620px is er 207px ruimte en het langste label is 233px). Daarom
   line-height 1 plus een smalle zijmarge: slaat het label om, dan blijven de twee regels
   strak tegen elkaar en groeit de knop nauwelijks. Onder 1 kan niet, dan lopen de staarten
   van de j en de g in de regel eronder. */
.card .btn{align-self:stretch; justify-content:center; text-align:center;
  padding-inline:12px; line-height:1; padding-block:13px}
/* Laatste kaart: logo direct op de kaartachtergrond, geen cirkel erachter */
/* De slagroomautomaat is breed en laag. Op volle breedte dekt hij de cirkel volledig af,
   vandaar een eigen, kleinere maat: de machine is in het echt ook de kleinste. */
.card--compact .card-media{--h:168px; --maxb:56%}
.card--compact .card-media img{max-width:56%}
.card--soon{background:var(--navy); color:#fff; border-color:transparent}
/* Het logo staat op dezelfde hoogte als de foto's op de andere kaarten (media blijft 240px),
   en de rest wordt met space-between over de resterende hoogte verdeeld. Daardoor is er niet
   boven of onder een gat. Let op: .card__desc moet dan op flex:none, anders slokt hij de
   ruimte op en werkt space-between niet. */
.card--soon .card-media{margin-bottom:0}
.card--soon .card-media .disc{display:none}
/* Even groot als de machinefoto's ernaast; place-items:center op .card-media zet het
   logo dan op dezelfde optische hoogte. */
.card--soon .card-media img{max-height:212px; max-width:82%; filter:none}
/* De drie tekstdelen staan strak onder elkaar, en het blok als geheel staat gecentreerd
   in de ruimte die na het logo overblijft. Daardoor staat het lager dan bij de andere
   kaarten, zonder dat er onderaan een gat valt. */
.card--soon .soon-body{flex:1; display:flex; flex-direction:column; justify-content:center}
.card--soon .card__desc{flex:none; margin-top:2px}
.card--soon .card__models{color:var(--accent)}
/* Label en titel horen bij elkaar, dus in een groep. Zonder die groep verdeelt
   space-between ze los van elkaar over de kaart en zweeft het label. */
.card--soon .card__models{display:block}
/* Zeer brede schermen, hetzelfde blok als in index.html. De plas is vierkant met
   aspect-ratio, dus alleen de breedte instellen; een losse hoogte zou de doos weer
   rechthoekig maken. */
@media(min-width:1900px){
  .card-media{height:300px}
  .card-media .disc{width:min(100%,360px)}
  .card-media{--h:300px}
  .card--soon .card-media img{max-height:266px}
  .card--compact .card-media{--h:210px}
}
@media(min-width:2560px){
  .card-media{height:360px}
  .card-media .disc{width:min(100%,420px)}
  .card-media{--h:360px}
  .card--soon .card-media img{max-height:318px}
  .card--compact .card-media{--h:252px}
}
/* Leesbreedte, zelfde twee regels als op de homepage. */
.assort-head p{max-width:70ch}
@media(max-width:759px){.assort-head,.assort-head p{max-width:none}}

/* Veelgestelde vragen. Twee kolommen met hetzelfde ritme als de servicesectie op de
   homepage: links de kop, rechts de inhoud. Elke vraag is een <details>, precies zoals de
   uitklap in het offerteformulier, dus geen nieuw patroon en geen JS.
   Het plusje dat een minnetje wordt is twee verlopen uit currentColor, geen los icoon. */
.faq{padding-block:var(--sy)}
/* Eén kolom sinds de kop naar de hero is verhuisd (14-09). Het tweekolomsraster met de
   sticky linkerkolom is daarmee vervallen; de vragen gebruiken nu de volle breedte, met een
   leesbreedte op het antwoord zelf. */
.faq-in{display:block}
/* Pas vanaf 1100px meelopen: daaronder is de kolom zo hoog als het scherm en heeft plakken
   geen zin, het zou de kop alleen maar laten verspringen. */
.faq-lijst{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.faq-lijst li{border-bottom:1px solid var(--line)}
.vraag>summary{display:flex; align-items:flex-start; gap:20px; cursor:pointer; list-style:none;
  padding:19px 0; font-family:var(--font-body); font-size:16px; font-weight:700;
  line-height:1.45; color:var(--navy)}
.vraag>summary::-webkit-details-marker{display:none}
/* Plus en min in één element: het horizontale streepje blijft staan, het verticale gaat weg
   zodra de vraag openstaat. */
.vraag>summary::after{content:""; flex:none; width:15px; height:15px; margin-left:auto; margin-top:5px;
  background:linear-gradient(currentColor,currentColor) center/15px 1.6px no-repeat,
             linear-gradient(currentColor,currentColor) center/1.6px 15px no-repeat}
.vraag[open]>summary::after{background:linear-gradient(currentColor,currentColor) center/15px 1.6px no-repeat}
.vraag>summary:hover{color:var(--accent)}
.vraag>summary:focus-visible{outline:3px solid var(--navy); outline-offset:3px}
/* Leesbreedte op het antwoord zelf. Sinds de lijst over de volle paginabreedte loopt is
   dit de enige rem: zonder deze regel komt een antwoord op 1900px op ruim 150 tekens per
   regel uit. */
.vraag-antwoord{padding-bottom:22px; max-width:78ch}
.vraag-antwoord p{font-size:15px}
.vraag-antwoord p+p{margin-top:12px}
.vraag-antwoord a{color:var(--navy); text-decoration:underline; text-underline-offset:2px}

.slim-header{background:var(--cream); border-bottom:1px solid var(--line)}
.slim-in{display:flex; align-items:center; justify-content:space-between; gap:20px; height:78px}
.slim-in .back{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  text-decoration:underline; text-underline-offset:3px}
.slim-in .back:hover{color:var(--accent)}
.qpage{padding-block:clamp(34px,4.6vw,58px)}
/* Zelfde keuze als bij het formulier op een machinepagina: het kopblok en het formulier
   staan gecentreerd, de velden erin blijven links uitgelijnd. */
/* Het kopblok is breder dan de alinea erin. Op 64ch brak de H1 na "OFFERTE" en bleef
   "AAN." alleen op de tweede regel staan, en gecentreerd valt dat op. De kop heeft nu de
   ruimte van het blok, de alinea houdt zijn eigen leesbreedte. */
.qpage-head{max-width:900px; margin-inline:auto; text-align:center}
.qpage-head p{max-width:62ch; margin-inline:auto}
.qpage-head h1{margin-top:16px}
.qpage-head p{margin-top:16px}
/* Ook hier een leesbare breedte in plaats van de volle kolom. Iets ruimer dan het
   formulier op een machinepagina, want dit is de hoofdinhoud van de pagina. */
.qform{margin-top:clamp(28px,3.6vw,40px); max-width:880px; margin-inline:auto;
  background:var(--cream-2); border-radius:14px; overflow:hidden}
.qform-bar{background:var(--navy); color:#fff; padding:16px clamp(20px,3vw,34px); text-align:center;
  font-family:var(--font-body); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.11em}
.qform-body{padding:clamp(24px,3.4vw,38px)}
.qform fieldset{margin:0 0 30px; padding:0; border:0}
.qform legend{padding:0; font-family:var(--font-body); font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--navy); margin-bottom:6px}
.qform .hint{font-size:13.5px; margin-bottom:14px}
.qform .pick li{border-top-color:var(--line)}
.qform .pick li:last-child{border-bottom-color:var(--line)}
.qform .pick select{border-color:var(--line-strong)}
.qform .pick select:disabled{background-color:rgba(35,31,32,.07); color:var(--ink)}
.qform .field input,.qform .field select,.qform .field textarea{background:#fff}

/* Contactsectie. Deze regels stonden alleen in index.html; contact.html gebruikt dezelfde
   sectie met hetzelfde formulier, dus ze horen hier in de gedeelde stijl.
   De kop is op de homepage een h2 en op de contactpagina een h1, vandaar beide selectors. */
.contact{background:var(--cream-2)}
/* Staat het kruimelpad in de sectie, dan zit er al ruimte boven de kop en hoeft de volle
   sectiepadding er niet nog eens overheen. */

/* De kop is naar de hero verhuisd (14-09); links staan nu alleen nog de kanalen en de
   contactpersoon, rechts het formulier. Het raster blijft dus, alleen de inhoud links is
   korter geworden. */
.contact-in{display:grid; grid-template-columns:1fr; gap:clamp(34px,5vw,58px); align-items:start; padding-block:var(--sy)}
@media(min-width:940px){.contact-in{grid-template-columns:.86fr 1.14fr}}
.contact-intro h1,.contact-intro h2{margin-top:16px}
.contact-intro p{margin-top:16px; max-width:38ch}
/* Kanalen als platte tekstregels tussen haarlijnen, in dezelfde taal als de
   voormalige "Geschikt voor"-regel op de machinekaarten (weg sinds 06-10). Bewust geen knoppen of icoonrondjes,
   en elk kanaal staat maar op één plek in deze sectie. */
.channels{list-style:none; margin:clamp(26px,4vw,38px) 0 0; padding:0}
.channels li{padding:15px 0; border-top:1px solid var(--line)}
.channels li:last-child{border-bottom:1px solid var(--line)}
.channels b{display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--navy); margin-bottom:5px}
.channels a{font-size:18px; font-weight:700; color:var(--ink)}
.channels a:hover{color:var(--accent)}
/* Bereikbaarheid in de kanalenlijst (overleg 05-10): openingstijden en storingen. Zelfde opmaak
   als telefoon en e-mail erboven (Jarco 06-10), ook al is het gewone tekst en geen link. */
.channels span{display:block; font-size:18px; font-weight:700; color:var(--ink)}
.channels span a{font-size:inherit}
/* Reactietijd bovenaan elk formulier (Jarco 06-10): eerst het belangrijkste vet, dan het
   alternatief voor wie haast heeft. Kleur volgt het vlak, dus ook wit op de navy offerteformulieren. */
.form-intro{font-size:15px; line-height:1.5; margin:0 0 22px}
.form-intro b{font-weight:700}
.form-intro a{color:inherit; text-decoration:underline; text-underline-offset:2px}

/* Op de contactpagina heeft de kaart een navy kopbalk gekregen, dezelfde als op de
   offertepagina (verzoek 14-09: meer blauw op de andere pagina's dan home). De padding zit
   daardoor op de body en niet meer op de kaart zelf, anders staat de balk niet tegen de
   rand. De kaart in de homepage-sectie heeft die balk NIET; die staat in de <style> van
   index.html en blijft ongemoeid. */
.form-card{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden}
.form-card-bar{background:var(--navy); color:#fff; padding:16px clamp(20px,3vw,34px); text-align:center;
  font-family:var(--font-body); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.11em}
.form-card-body{padding:clamp(24px,3.4vw,40px)}

/* Portret, PLACEHOLDER: images/portret-placeholder.svg is een getekend portret, geen foto en
   geen echt persoon. Vervangen door de foto van de contactpersoon zodra blocker 5 en 8 rond
   zijn; een vierkante of staande JPG kan er zo in.
   Zonder de maat hieronder rekt de SVG op tot de volle kolombreedte. */
.portrait{flex:none; border-radius:50%; overflow:hidden; background:var(--peach)}
.portrait img{width:100%; height:100%; object-fit:cover; display:block}
.contact .portrait{width:88px; height:88px; box-shadow:0 0 0 3px var(--navy)}
/* Geen flex-wrap op desktop: met de bredere kop sloeg het portret anders naar een eigen
   regel boven de tekst. Pas onder 640px mag het onder elkaar. */
.who{display:flex; align-items:center; gap:16px; margin-top:clamp(26px,4vw,36px)}
.who b{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--navy); margin-bottom:5px}
.who span{font-size:16px; font-weight:700}


/* Footer licht oranje op alle pagina's behalve de homepage (verzoek 05-10, bijgesteld 06-10).
   De homepage houdt haar navy footer met het staande witte logo; die staat in de eigen
   <style> van index.html en is niet aangeraakt. --peach is het licht oranje dat al op de site
   staat; --peach-soft valt te dicht bij de creme secties die op vier pagina's direct boven de
   footer liggen. Alle tekst is zwart, 13,0:1. Eerst stond hier het volle merkoranje met navy
   tekst; dat vond Jarco te hard. Het logo is het liggende logo uit de header, in eigen
   kleuren. */
.footer{background:var(--peach); color:var(--ink)}
/* De drie kolommen lopen op één lijn, uitgelijnd op de BOVENKANT van het logo (verzoek
   14-09). Daarvoor stonden de labels onderaan een kopvak van 96px, even hoog als het logo;
   dat lijnde de onderkanten uit en liet boven de labels een gat van tachtig pixels.
   Nu begint elke kolom gewoon bovenaan. De correctie zit in de optische uitlijning: een
   afbeelding begint op de pixel, een regel tekst heeft eerst nog witruimte boven de
   hoofdletter. Die witruimte wordt weggehaald met een negatieve marge ter grootte van het
   verschil tussen de regelhoogte en de kaphoogte, zodat de bovenkant van de C van CONTACT
   gelijk ligt met de bovenkant van het logo.
   Eerst met `subgrid` geprobeerd, dat gaf een rijhoogte van 77px terwijl het logo 96px is,
   doordat de eigen row-gap van een subgrid botst met die van de ouder. Niet opnieuw
   proberen.
   Sinds 05-10 staat hier het liggende logo (icoon met de tekst ernaast) in plaats van het
   staande; dat is breder en lager, dus --kop is van 96 naar 72px gegaan. */
.footer-in{display:grid; grid-template-columns:1fr; gap:clamp(34px,5vw,56px);
  padding-block:clamp(48px,6vw,76px); --kop:72px}
@media(min-width:820px){.footer-in{grid-template-columns:1.2fr .9fr .9fr}}
.footer-brand img{height:var(--kop); width:auto}
.footer-brand p{margin-top:18px; font-size:14.5px; max-width:30ch}
/* Het label staat bovenaan zijn kolom, op dezelfde hoogte als de bovenkant van het logo.
   De negatieve marge haalt de witruimte boven de hoofdletter weg; onder 820px staan de
   kolommen onder elkaar en is die correctie niet nodig. */
.footer-col b{display:block; font-family:var(--font-body); font-size:11.5px; line-height:1.2;
  font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--ink); margin-bottom:0}
@media(min-width:820px){.footer-col b{margin-top:-2px}}
.footer-col ul{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:11px}
/* Hover is een onderstreping die invloeit, geen kleurwissel: oranje haalt op dit vlak maar
   2,1:1, en zwart naar navy zie je niet. */
.footer-col a{font-size:15.5px; color:var(--ink); text-decoration:underline;
  text-decoration-color:transparent; text-underline-offset:3px}
.footer-col a:hover{text-decoration-color:currentColor}
.footer-bottom{border-top:1px solid var(--line); padding-block:22px;
  display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; justify-content:space-between}
.footer-bottom p{font-size:11.5px}
/* Onderstreept, want deze links staan midden in een regel zwarte tekst en zijn dan niet aan
   kleur alleen te herkennen. Bij hover gaat de streep weg. */
.footer-bottom p a{color:var(--ink); text-decoration:underline; text-underline-offset:2px}
.footer-bottom p a:hover{text-decoration-color:transparent}

/* WhatsApp-knop, vast rechtsonder op elke pagina, ook de offertepagina (wens klant 24-09).
   Oranje met het teken in --ink, net als de oranje knoppen; bij hover navy met wit. Geen
   schaduw, die hoort niet in deze stijl: het oranje valt zowel op het creme als op de licht
   oranje footer op. De focusring is wit met navy eromheen, zodat hij overal zichtbaar is. */
.wa-knop{position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom));
  z-index:40; width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:var(--ink); transition:background-color var(--overgang), color var(--overgang)}
.wa-knop svg{width:30px; height:30px; fill:currentColor}
.wa-knop:hover{background:var(--navy); color:#fff}
.wa-knop:focus-visible{outline:3px solid #fff; outline-offset:0; box-shadow:0 0 0 6px var(--navy)}
@media(min-width:820px){.wa-knop{right:28px; bottom:28px; width:60px; height:60px}}
/* Ruimte onder de footer, anders ligt de knop helemaal onderaan over "Met trots gebouwd door Sparc". */
body:has(.wa-knop) .footer-bottom{padding-bottom:96px}
@media print{.wa-knop{display:none}}

/* Formuliervelden, dezelfde vorm als op de homepage. */
.form-grid{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:580px){.form-grid{grid-template-columns:1fr 1fr}}
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.field--full{grid-column:1/-1}
.field label{font-family:var(--font-body); font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; color:var(--navy)}
.field label i{font-style:normal; font-weight:400; text-transform:none; letter-spacing:.02em; color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--font-body); font-size:15px; line-height:1.5; color:var(--ink);
  background:#fff; border:1px solid var(--line-strong); border-radius:10px; padding:13px 15px;
  transition:border-color .16s ease, box-shadow .16s ease}
.field textarea{min-height:132px; resize:vertical}
.field select{appearance:none; padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23061637' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(6,22,55,.2)}
/* Hinttekst in een veld: vervaagd zwart, geen nieuw grijs. De browserstandaard is een
   losse grijstint en die mag hier niet. Op wit haalt dit 4,9:1. */
.field ::placeholder{color:rgba(35,31,32,.62); opacity:1}
.hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none}
[data-form-status]{margin:0}
[data-form-status].ok,[data-form-status].err{margin:22px 0 0; padding:14px 18px; border-radius:14px;
  font-size:14.5px; font-weight:700}
[data-form-status].ok{background:var(--navy); color:#fff}
[data-form-status].err{background:var(--accent); color:var(--navy)}
.form-foot{margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px}
/* Breder (Jarco 06-10): de regel vult de ruimte naast de knop, tot 64 tekens per regel. */
.form-note{font-size:13px; max-width:64ch; flex:1 1 260px}
.btn[disabled]{opacity:.65; cursor:not-allowed; transform:none}

/* Zeer brede schermen. De inhoudskolom groeit hier mee (zie de --max-stappen bovenaan), dus
   het beeld moet ook mee, anders staat er een grote machine-in-een-klein-cirkeltje in een
   halfleeg vlak. Onder 1900px verandert er niets. Neem dit blok mee in elke nieuwe pagina. */
@media(min-width:1900px){
  /* Alleen --machine aanpassen: de machine EN de plas erachter hangen daaraan. Zet je hier
     een losse hoogte op .machine of een losse breedte op .disc, dan lopen ze uit elkaar. */
  .mhero-visual{max-width:640px; --machine:min(560px,30vw)}
  .other-media{height:210px}
  .other-media .disc{width:min(100%,270px)}
  .other-media{--h:210px}
  .other--compact .other-media{--h:150px}
}
@media(min-width:2560px){
  .mhero-visual{max-width:800px; --machine:min(680px,28vw)}
  .other-media{height:250px}
  .other-media .disc{width:min(100%,320px)}
  .other-media{--h:250px}
  .other--compact .other-media{--h:180px}
}

/* Leesbreedte per schermmaat, zelfde twee regels als op de homepage:
   onder 760px geen maxima, want die braken de tekst op een telefoon te vroeg af, en op
   zeer brede schermen begrenzen de ch-maten het aantal tekens per regel automatisch.
   Neem dit blok mee in elke nieuwe pagina. */
/* Zelfde reden als op de homepage: deze alinea's erfden de breedte van hun kopblok en
   kwamen op 4K boven de 100 tekens per regel uit. */
.features p{max-width:62ch}
.specs-head p{max-width:70ch}
.shots-head p{max-width:40ch}
.variant .cap,.variant dl{max-width:46ch}
@media(max-width:759px){
  .mhero h1,.mhero-lead,.specs-head,.specs-note,.shots-head p,.quote-head,.quote-head p,
  .qpage-head,.qpage-head p,.form-note,.footer-brand p,.specs-head p,.quote-head p,
  .features p,.variant .cap,.variant dl{max-width:none}
}

/* Pagina-overgang (wens 24-09): bij het klikken naar een andere pagina van de site vloeit de
   nieuwe pagina in 0,4 s ease-in-out over de oude. Dit zijn de ingebouwde overgangen van de
   browser (View Transitions), dus geen JavaScript en geen wachttijd bij het klikken. Chrome,
   Edge en Safari doen het; Firefox wisselt de pagina zoals voorheen. De kop en de WhatsApp-knop
   hebben een eigen naam en blijven daardoor staan terwijl de inhoud wisselt. Staat uit voor wie
   in zijn systeem minder beweging heeft ingesteld. De aanmelding zelf (@view-transition) staat NIET
   hier maar in een klein <style>-blok bovenin de <head> van elke pagina: alleen in site.css ging
   de overgang ongeveer de helft van de keren niet door. Hieronder alleen de duur en de namen;
   die staan in site.css en in de eigen <style> van index.html. */
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.4s; animation-timing-function:ease-in-out}
.header{view-transition-name:kop}
.wa-knop{view-transition-name:whatsapp}