@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root{--grond:#16161A;--vlak:#22222A;--wit:#FFFFFF;--zacht:#B9B9C2;--dof:#7E7E8A;
  --rood:#ef4148;--roodvlak:#ec1c24;--lijn:rgba(255,255,255,.14);--lijn2:rgba(255,255,255,.26);
  --r:12px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{background:var(--grond);color:var(--wit);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
.wrap{max-width:1272px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
p{margin:0;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--rood);outline-offset:3px}
[hidden]{display:none!important}
.alleen-voorlezer{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Tikdoel ≥ 24×24 px (WCAG 2.5.8). Een tekstlink is van zichzelf ~19 px hoog;
   deze regel geeft elke losse link in een lijst of tabel genoeg vlees. */
footer a,.menu .mvoet a,.kruimel a,table a,.tabelnoot a,.voetstreep a,
.lees-lang p a,.form .voet a{display:inline-flex;align-items:center;min-height:24px}
.overslaan{position:absolute;left:-9999px;top:0;z-index:60;background:var(--roodvlak);
  color:#000;padding:12px 20px;border-radius:0 0 var(--r) 0;font-weight:700}
.overslaan:focus{left:0}

/* ── claimbalk: het eerste wat je leest ───────────────────────────────
   De referentie heeft dit niet; de bestaande LED-site wel, en dat was
   precies wat hier ontbrak. Vier dingen die waar zijn en die je anders
   pas drie schermen lager tegenkomt. */
.balk{background:var(--vlak);border-bottom:1px solid var(--lijn);position:relative;z-index:25}
.balk .in{display:flex;gap:22px;align-items:center;justify-content:center;
  padding:10px 24px;flex-wrap:wrap}
.balk i{display:flex;align-items:center;gap:7px;font-style:normal;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#C8C8D2;white-space:nowrap}
.balk i s{width:6px;height:6px;border-radius:50%;background:var(--roodvlak);
  text-decoration:none;flex:0 0 6px}
.balk i b{font-weight:700;color:var(--wit)}

/* ── kop: woordmerk gecentreerd (uit de referentie), met daaronder een
      smalle menurij. De hamburger blijft voor het volledige menu. ───── */
.top{position:absolute;top:0;left:0;right:0;z-index:20;padding:22px 30px 0}
/* Een donker verloop achter de hele kopbalk. Zonder dit staat het wit van de
   belknop, het woordmerk en het menu rechtstreeks op de hero-foto, en die
   verschilt per pagina: gemeten haalde /contact/ op desktop 3,51 en /verhuur/
   op mobiel 4,26, waar 4,5 de norm is. Een schaduw op de letter helpt het oog
   maar telt niet mee in die norm, dus de ondergrond zelf moet donkerder.
   Alleen op de foto-koppen, niet op de vastgeplakte balk (die heeft al een
   eigen grond). */
.top:not(.vast)::before{content:"";position:absolute;inset:-22px 0 auto 0;height:190px;
  pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom,rgba(8,8,10,.62) 0%,rgba(8,8,10,.40) 46%,rgba(8,8,10,0) 100%)}
.top.vast{position:sticky;background:var(--grond);border-bottom:1px solid var(--lijn)}
.toprij{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.topacties{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
.navrij{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;
  margin-top:16px;padding-bottom:14px}
.navrij a{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:#D6D6DE;padding:6px 0;min-height:24px;display:inline-flex;align-items:center;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.navrij a:hover,.navrij a[aria-current="page"]{color:var(--wit);border-bottom-color:var(--roodvlak)}
.knopmini{display:inline-flex;align-items:center;gap:8px;min-height:40px;
  padding:9px 18px;border-radius:999px;background:var(--roodvlak);color:#000;
  font-size:13.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  transition:background-color .2s,transform .2s}
.knopmini:hover{background:#ff2f36}
.knopmini:active{transform:scale(.96)}

/* ── zwevende aanvraagknop (desktop) ─────────────────────────────────── */
.zweef{position:fixed;right:24px;bottom:24px;z-index:30;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s,visibility .3s,transform .3s,background-color .2s;
  display:inline-flex;align-items:center;gap:10px;min-height:52px;
  padding:14px 24px;border-radius:999px;background:var(--roodvlak);color:#000;
  font-size:15px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:background-color .2s,transform .2s}
.zweef.aan{opacity:1;visibility:visible;transform:none}
.zweef.aan:hover{background:#ff2f36;transform:translateY(-2px)}

/* ── vaste balk onderaan (telefoon): bellen én aanvragen ─────────────── */
.mbalk{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;
  grid-template-columns:1fr 1fr;border-top:1px solid var(--lijn2);
  background:rgba(22,22,26,.97)}
.mbalk a{display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;font-size:15px;font-weight:700}
.mbalk a:first-child{color:var(--wit);border-right:1px solid var(--lijn)}
.mbalk a:last-child{background:var(--roodvlak);color:#000}
.mbalk svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.merk{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:7px}
.merk b{display:block;width:44px;height:26px;background:var(--roodvlak);
  box-shadow:inset 0 0 0 2px var(--grond),inset 0 0 0 3px var(--roodvlak)}
.merk span{font-size:20px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
/* Op een telefoon valt het nummer weg en blijft alleen het pictogram staan;
   het tikdoel moet dan zelf 44 px blijven (WCAG 2.5.8 vraagt 24, Apple 44). */
/* De belknop is een gewone regel in de kop, geen tweede knop. Hij stond als
   lichte pil mét rand, een kloppende ring en een schuddend hoorntje tegenover
   de rode knop rechts: twee dingen die tegelijk om aandacht vroegen, en het
   enige lichte vlak in een verder vlakke, donkere kop. Nu dezelfde toon als
   het menu eronder, zodat de rode knop rechts het enige accent blijft.
   (20-09, Lenny: "die belknop linksboven".) */
.top .bel{grid-column:1;justify-self:start;display:inline-flex;align-items:center;
  gap:9px;font-size:14px;font-weight:600;letter-spacing:.01em;
  min-height:44px;min-width:44px;color:var(--wit);
  padding:9px 4px;border-radius:8px;background:none;border:0;
  /* Zonder pil hangt de leesbaarheid af van de hero-foto eronder, en die
     verschilt per pagina. Op mobiel mat ik 4,39 waar 4,5 de norm is. Een
     zachte schaduw tilt hem overal boven de norm zonder dat er weer een
     vlak omheen komt te staan. */
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  transition:color .2s,opacity .2s}
.bel:hover{color:var(--roodvlak)}
.bel:hover svg{stroke:var(--roodvlak)}
.bel:focus-visible{outline:2px solid var(--roodvlak);outline-offset:3px}
.bel:active{opacity:.7}
.top .bel svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.ham{grid-column:3;justify-self:end;display:grid;gap:5px;padding:12px;
  background:none;border:0;cursor:pointer;min-height:44px}
.ham i{display:block;width:30px;height:2px;background:var(--wit);transition:transform .3s,opacity .2s}
.ham[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham[aria-expanded="true"] i:nth-child(2){opacity:0}
.ham[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── overlaymenu ──────────────────────────────────────────────────── */
.menu{position:fixed;inset:0;z-index:40;background:var(--grond);
  display:grid;grid-template-rows:auto 1fr;opacity:0;visibility:hidden;
  transition:opacity .34s cubic-bezier(.22,.61,.36,1),visibility .34s}
.menu.open{opacity:1;visibility:visible}
.menu .mtop{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:26px 30px}
.menu .mlijst{overflow-y:auto;padding:10px 0 60px}
.menu .mgroep{border-top:1px solid var(--lijn);padding:26px 0}
.menu .mgroep:last-child{border-bottom:1px solid var(--lijn)}
.menu .mlabel{display:block;color:var(--rood);font-size:11.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
.menu .mrij{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 26px}
.menu .mrij a{font-size:clamp(20px,2.6vw,29px);font-weight:600;letter-spacing:-.02em;
  padding:6px 0;display:flex;align-items:center;gap:12px;min-height:44px}
.menu .mrij a em{font-style:normal;color:var(--dof);font-size:14px;font-weight:400}
.menu .mrij a:hover{color:var(--rood)}
.menu .mvoet{display:flex;gap:26px;flex-wrap:wrap;padding:26px 0 0;color:var(--zacht);font-size:15px}
.menu .mvoet a:hover{color:var(--rood)}

/* ── hero ─────────────────────────────────────────────────────────── */
.hero{position:relative;height:min(calc(100svh - 40px),940px);overflow:hidden;background:#000}
.hero>.bz{position:absolute;inset:0;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover}
.hero .sluier{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,12,.86) 0%,rgba(10,10,12,.28) 44%,rgba(10,10,12,.44) 100%)}
.hero .onder{position:absolute;left:0;right:0;bottom:0;padding:0 30px 54px}
.hero h1{font-size:clamp(46px,9.4vw,136px);line-height:.94;letter-spacing:-.035em;
  text-transform:uppercase;font-weight:700;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--rood)}
.vlag{display:inline-block;background:var(--roodvlak);color:#000;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;margin-bottom:20px}

/* ── subhero: dezelfde taal, lager, met kruimelpad ────────────────── */
.subhero{position:relative;overflow:hidden;background:#000;
  min-height:min(64svh,560px);display:flex;align-items:flex-end}
.subhero>.bz{position:absolute;inset:0;overflow:hidden}
.subhero img{width:100%;height:100%;object-fit:cover}
.subhero .sluier{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,12,.9) 0%,rgba(10,10,12,.42) 52%,rgba(10,10,12,.5) 100%)}
.subhero .onder{position:relative;width:100%;padding:190px 0 52px}
.subhero h1{font-size:clamp(34px,6.4vw,84px);line-height:.98;letter-spacing:-.035em;
  text-transform:uppercase;font-weight:700;max-width:17ch}
.subhero h1 em{font-style:normal;color:var(--rood)}
.subhero .lead{color:var(--zacht);font-size:17.5px;max-width:58ch;margin-top:20px}
.kruimel{display:flex;gap:10px;flex-wrap:wrap;color:var(--zacht);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:18px}
.kruimel a:hover{color:var(--rood)}
.kruimel s{text-decoration:none;color:var(--dof)}

/* ── gecentreerde uitspraak ───────────────────────────────────────── */
.uitspraak{padding:110px 0}
.uitspraak p{font-size:clamp(21px,2.6vw,37px);line-height:1.28;font-weight:600;
  letter-spacing:-.018em;text-align:center;max-width:22ch;margin:0 auto}
.uitspraak p em{font-style:normal;color:var(--rood)}

/* ── ingezette beeldband met kapitalenkop eroverheen ──────────────── */
.band{padding:0 0 110px}
.band .in{position:relative;max-width:1272px;margin:0 auto;padding:0 28px}
.band .bz{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:16/9;background:#000}
.band img{width:100%;height:100%;object-fit:cover}
.band .over{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:24px;
  background:linear-gradient(to bottom,rgba(10,10,12,.34),rgba(10,10,12,.66))}
.bandlead{max-width:56ch;text-align:center;color:var(--wit);font-size:clamp(15px,1.5vw,18.5px);
  line-height:1.5;text-shadow:0 1px 14px rgba(10,10,12,.85)}
.band h2{font-size:clamp(24px,4.6vw,66px);text-transform:uppercase;text-align:center;
  letter-spacing:-.025em;line-height:1.02;font-weight:700}

/* ── sectiekop ────────────────────────────────────────────────────── */
.sec{padding:0 0 110px}
.sec.top0{padding-top:96px}
.sechead{text-align:center;max-width:56ch;margin:0 auto 46px}
.sechead.links{text-align:left;margin-left:0}
.sechead h2{font-size:clamp(26px,3.3vw,37px);letter-spacing:-.02em}
.sechead p{color:var(--zacht);font-size:17px;margin-top:14px}
.label{display:block;color:var(--rood);font-size:11.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}

/* ── kaartenrij: middelste groot, flanken klein ───────────────────── */
/* Doorlopende voorbeeldenrij. De kaarten staan twee keer in het spoor, dus
   op het moment dat de eerste set precies is weggeschoven staat de tweede op
   dezelfde plek en begint de lus opnieuw, zonder sprong. Alleen transform:
   de rij herberekent geen layout. Stilstaan bij aanwijzen of focus, en helemaal
   uit als de bezoeker beweging heeft uitgezet. */
.rail{overflow:hidden;padding:30px 0 34px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.railspoor{display:flex;gap:22px;width:max-content;
  animation:railloop calc(var(--aantal,7) * 7s) linear infinite}
.rail:hover .railspoor,.rail:focus-within .railspoor{animation-play-state:paused}
@keyframes railloop{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 11px))}}
.kaart{position:relative;flex:0 0 460px;max-width:78vw;
  border-radius:var(--r);overflow:hidden;background:var(--vlak);
  transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.rail:hover .kaart:hover{transform:translateY(-6px)}
.kaart .bz{aspect-ratio:16/9;overflow:hidden}
.kaart img{width:100%;height:100%;object-fit:cover}
.kaart figcaption{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  background:rgba(22,22,26,.82);color:var(--wit);padding:10px 18px;border-radius:999px;
  font-size:14.5px;font-weight:500;white-space:nowrap}
.railvoet{display:flex;justify-content:center}

/* ── omlijnde pilknop ─────────────────────────────────────────────── */
.pil{display:inline-flex;align-items:center;gap:10px;min-height:48px;
  padding:13px 30px;border-radius:999px;font-size:16px;font-weight:600;
  box-shadow:inset 0 0 0 1px var(--rood);color:var(--rood);cursor:pointer;
  background:none;border:0;font-family:inherit;
  transition:transform .2s cubic-bezier(.22,.61,.36,1),background-color .25s ease,color .25s ease}
.pil:hover{background:var(--roodvlak);color:#000;box-shadow:inset 0 0 0 1px var(--roodvlak)}
.pil:active{transform:scale(.96)}
.pil.vol{background:var(--roodvlak);color:#000;box-shadow:none}
.pil.vol:hover{background:#ff2f36}
.pil.stil{box-shadow:inset 0 0 0 1px var(--lijn2);color:var(--wit)}
.pil.stil:hover{background:rgba(255,255,255,.08);color:var(--wit);box-shadow:inset 0 0 0 1px var(--lijn2)}
.knoppen{display:flex;gap:12px;flex-wrap:wrap}
.knoppen.mid{justify-content:center}

/* ── kolommen: wat erbij zit ──────────────────────────────────────── */

/* ── kaarten ──────────────────────────────────────────────────────────────
   Eén vorm voor de hele site. Het vlak is lichter dan de grond eronder,
   anders is het geen kaart maar een stuk tekst met ruimte eromheen. */
.kgrid{display:grid;grid-template-columns:repeat(var(--kk-kol,4),1fr);gap:16px;margin-top:18px}
@media(max-width:1100px){.kgrid{grid-template-columns:repeat(min(var(--kk-kol,4),3),1fr)}}
@media(max-width:820px){.kgrid{grid-template-columns:repeat(min(var(--kk-kol,4),2),1fr)}}
@media(max-width:520px){.kgrid{grid-template-columns:1fr}}
.kgrid.breed{grid-template-columns:repeat(min(var(--kk-kol,3),3),1fr)}
.kk{position:relative;display:block;background:var(--vlak);border:1px solid var(--lijn);
  border-radius:var(--r);padding:22px 20px 24px;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),border-color .25s,background-color .25s}
.kk:hover{transform:translateY(-4px);border-color:var(--lijn2)}
.kk svg{width:20px;height:20px;fill:none;stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;display:block;margin-bottom:13px}
.kk.in svg{stroke:var(--roodvlak)}
.kk.meer svg,.kk.los svg{stroke:var(--zacht)}
.kk b{display:block;font-size:17.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.kk p{color:var(--zacht);font-size:15px;margin-top:7px;line-height:1.5}
.kk.klik{color:var(--wit)}
.kk.klik .pijl{display:inline-block;margin-top:14px;color:var(--rood);transition:transform .2s}
.kk.klik:hover{background:#292933}
.kk.klik:hover .pijl{transform:translateX(5px)}
.kmerk{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin:34px 0 0;color:var(--zacht)}
.kmerk s{width:12px;height:12px;border-radius:3px;text-decoration:none;flex:0 0 12px;
  background:var(--roodvlak)}
.kmerk.meer s{background:none;box-shadow:inset 0 0 0 2px var(--dof)}
/* de grens die uit de kolommen is gehaald, staat er nu onder als kleine regel */
.grensregel{color:var(--dof);font-size:14.5px;margin-top:22px;max-width:80ch}
.grensregel b{color:var(--zacht);font-weight:600}

/* knoppen in de hero — de referentie heeft ze niet, een verhuursite wel */
.heroknoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ── schermvullende uitspraak op textuur ──────────────────────────── */
.breed{position:relative;overflow:hidden;min-height:min(72svh,620px);
  display:grid;place-items:center;background:#000;margin-bottom:110px}
.breed .bz{position:absolute;inset:0;overflow:hidden}
.breed img{width:100%;height:100%;object-fit:cover;opacity:.34}
.breed .bz::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 50% 50%,rgba(10,10,12,.62),rgba(10,10,12,.20) 70%)}
.breed .in{position:relative;text-align:center;padding:60px 30px;max-width:860px}
.breed h2{font-size:clamp(26px,4.4vw,62px);line-height:1.06;letter-spacing:-.03em;
  text-transform:uppercase;font-weight:700}
.breed p{color:var(--zacht);margin-top:20px;font-size:17px;max-width:50ch;
  margin-left:auto;margin-right:auto}

/* ── genummerde stappen: alleen waar er écht een volgorde is ──────── */
.stappen{counter-reset:st;display:grid;gap:0;border-top:1px solid var(--lijn)}
.stap{display:grid;grid-template-columns:84px 1fr 1.1fr;gap:26px;padding:28px 0;
  border-bottom:1px solid var(--lijn);align-items:baseline}
.stap::before{counter-increment:st;content:counter(st,decimal-leading-zero);
  font-size:30px;font-weight:700;color:var(--rood);line-height:1;letter-spacing:-.02em}
.stap h3{font-size:clamp(19px,2vw,25px)}
.stap p{color:var(--zacht);font-size:16px}

/* ── haarlijnrijen zonder nummer (geen volgorde) ──────────────────── */

/* ── prijskaarten ─────────────────────────────────────────────────── */
.prijzen{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
.pk{background:var(--vlak);border-radius:var(--r);padding:28px 26px 30px;
  --rood:#f0545a;--dof:#8E8E9A;position:relative;display:flex;flex-direction:column;height:100%}
.pk.aanrader{box-shadow:inset 0 0 0 1px var(--roodvlak)}
.pk .tip{position:absolute;top:-11px;left:26px;background:var(--roodvlak);color:#000;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px}
.pk h3{font-size:25px;letter-spacing:-.02em}
.pk .maat{color:var(--zacht);font-size:15px;margin-top:2px}
.pk .bedrag{font-size:33px;font-weight:700;letter-spacing:-.03em;margin:16px 0 2px}
.pk .bedrag s{text-decoration:none;font-size:15px;font-weight:600;color:var(--zacht)}
.pk .excl{color:var(--dof);font-size:13px}
.pk ul{list-style:none;margin:20px 0 22px;padding:16px 0 0;display:grid;gap:10px;
  border-top:1px solid var(--lijn)}
.pk li{font-size:15px;color:var(--zacht);display:flex;gap:10px;align-items:flex-start}
.pk li s{text-decoration:none;color:var(--rood);flex:0 0 auto;font-weight:700}
.pk .pil{margin-top:auto;justify-content:center}
.opmaat{grid-column:1/-1;background:var(--vlak);border-radius:var(--r);padding:30px 30px 32px;
  --rood:#f0545a;--dof:#8E8E9A;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.opmaat h3{font-size:25px}
.opmaat p{color:var(--zacht);font-size:16px;margin-top:8px;max-width:70ch}

/* ── tabel ────────────────────────────────────────────────────────── */
.tabelvak{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:16px}
th,td{text-align:left;padding:16px 18px 16px 0;border-bottom:1px solid var(--lijn);vertical-align:top}
th{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rood);
  font-weight:700;border-bottom-color:var(--lijn2)}
td strong{font-weight:600}
td em{font-style:normal;color:var(--zacht)}
.tabelnoot{color:var(--dof);font-size:14px;margin-top:16px}

/* ── accordeon ────────────────────────────────────────────────────── */
.vragen{border-top:1px solid var(--lijn);max-width:900px;margin:0 auto}
.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:18.5px;font-weight:600;letter-spacing:-.01em;min-height:44px}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"";position:absolute;right:6px;top:32px;width:13px;height:13px;
  border-right:2px solid var(--rood);border-bottom:2px solid var(--rood);
  transform:rotate(45deg) translateY(-4px);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.vraag[open] summary::after{transform:rotate(225deg) translateY(-4px)}
.vraag .antw{color:var(--zacht);font-size:16.5px;padding:0 60px 24px 0;max-width:80ch}

/* ── review-vlak: er is er nog geen ───────────────────────────────── */
.review{border:1px dashed var(--lijn2);border-radius:var(--r);padding:30px 32px;
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
.review .pl{border-radius:999px;box-shadow:inset 0 0 0 1px var(--lijn2);padding:8px 16px;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.review p{color:var(--zacht);font-size:15.5px}

/* ── stedenraster ─────────────────────────────────────────────────── */
.steden{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.steden a{background:var(--vlak);border-radius:var(--r);padding:16px 18px;font-size:16px;
  font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:10px;
  min-height:44px;transition:background-color .22s}
.steden a:hover{background:#2A2A33}
.steden a s{text-decoration:none;color:var(--rood)}

/* ── artikelen ────────────────────────────────────────────────────── */
.artikelen{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.art{background:var(--vlak);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  --rood:#f0545a;--dof:#8E8E9A;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.art:hover{transform:translateY(-3px)}
.art .bz{aspect-ratio:16/10;overflow:hidden}
.art img{width:100%;height:100%;object-fit:cover}
.art .in{padding:24px 24px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.art .mrk{color:var(--rood);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.art h3{font-size:21px;line-height:1.2}
.art p{color:var(--zacht);font-size:15.5px}
.art .lees{margin-top:auto;padding-top:6px;font-size:14px;font-weight:600;color:var(--wit)}

.lees-lang{max-width:74ch}
.lees-lang h2{font-size:clamp(23px,2.6vw,31px);margin:48px 0 16px}
.lees-lang h3{font-size:20px;margin:32px 0 10px}
.lees-lang p{color:var(--zacht);font-size:17.5px;margin-bottom:18px}
.lees-lang p strong{color:var(--wit);font-weight:600}
.lees-lang ul{color:var(--zacht);font-size:17.5px;padding-left:20px;margin:0 0 22px}
.lees-lang li{margin-bottom:9px}
.lees-lang .intro{color:var(--wit);font-size:20px}

/* ── formulier ────────────────────────────────────────────────────── */
.form{background:var(--vlak);border-radius:var(--r);padding:34px 34px 38px;
  --rood:#f0545a;--dof:#8E8E9A;max-width:760px}
.veld{display:grid;gap:8px;margin-bottom:22px}
.veld label{font-size:14px;font-weight:600;letter-spacing:.02em}
.veld label s{text-decoration:none;color:var(--rood)}
.veld .hint{color:var(--dof);font-size:13.5px}
.veld input,.veld select,.veld textarea{
  background:var(--grond);color:var(--wit);border:1px solid var(--lijn2);border-radius:8px;
  padding:13px 15px;font-size:16px;font-family:inherit;min-height:48px;width:100%}
.veld textarea{min-height:120px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--rood);outline:none;
  box-shadow:0 0 0 2px rgba(239,65,72,.3)}
.tweeveld{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .voet{border-top:1px solid var(--lijn);margin-top:6px;padding-top:24px;
  display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.form .voet p{color:var(--dof);font-size:13.5px;max-width:40ch}
.melding{border-radius:8px;padding:14px 16px;font-size:15.5px;margin-bottom:22px}
.melding.goed{background:rgba(70,180,110,.14);box-shadow:inset 0 0 0 1px rgba(120,220,160,.5);color:#9BE7BC}
.melding.fout{background:rgba(236,28,36,.12);box-shadow:inset 0 0 0 1px rgba(240,84,90,.5);color:#F79A9E}
.honing{position:absolute;left:-9999px}
.honing input{min-height:24px}

/* ── contactkaarten ───────────────────────────────────────────────── */
.contactrij{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* Adres en bereikbaarheid staan als gewone regel boven de contactkanalen, zoals
   op de zustersite. Een KvK-nummer in een kaart of een knop zetten suggereert
   dat je erop kunt klikken; het is een gegeven, geen actie. Het staat in de voet. */
.contactregel{color:var(--zacht);font-size:16.5px;max-width:64ch;margin:0 0 6px}
.contactregel + .contactrij{margin-top:22px}
.ck{background:var(--vlak);border-radius:var(--r);padding:26px 26px 28px;--rood:#f0545a;--dof:#8E8E9A}
.ck .mrk{color:var(--rood);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;display:block;margin-bottom:12px}
.ck b{font-size:21px;font-weight:600;letter-spacing:-.01em;display:block;word-break:break-word}
.ck p{color:var(--zacht);font-size:15px;margin-top:6px}

/* ── aanvraagblok onderaan elke pagina ────────────────────────────── */
.aanvraag{text-align:center;padding:0 0 110px}
.aanvraag h2{font-size:clamp(30px,6vw,88px);text-transform:uppercase;line-height:1;
  letter-spacing:-.035em;font-weight:700}
.aanvraag h2 em{font-style:normal;color:var(--rood)}
.aanvraag p{color:var(--zacht);max-width:44ch;margin:22px auto 32px;font-size:17px}

/* ── voet ─────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--lijn);padding:56px 0 46px}
.voetraster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.voetraster .voetkop{color:var(--rood);font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:16px}
.voetraster ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.voetraster a{color:var(--zacht);font-size:15.5px}
.voetraster a:hover{color:var(--wit)}
.voetraster p{color:var(--zacht);font-size:15.5px}
.voetmerk{display:flex;flex-direction:column;gap:7px;align-items:flex-start;margin-bottom:16px}
.voetmerk b{display:block;width:44px;height:26px;background:var(--roodvlak)}
.voetmerk span{font-size:18px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.voetstreep{border-top:1px solid var(--lijn);margin-top:44px;padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--dof);font-size:13.5px}
.voetstreep a:hover{color:var(--wit)}

/* ── beweging: alleen onthullen. De referentie verplaatst 2 van 226
      elementen bij scrollen, dus geen parallax in deze richting. ──── */
[data-op]{opacity:0;transform:translateY(12px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
[data-op].op-in{opacity:1;transform:none}
.wrd{display:inline-block;opacity:0;transform:translateY(.34em);
  transition:opacity .72s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--wd,0ms)}
.op-in .wrd,.wrd.op-in{opacity:1;transform:none}
.pijl{display:inline-block;transition:transform .32s cubic-bezier(.22,.61,.36,1)}
a:hover .pijl{transform:translateX(5px)}

@media (prefers-reduced-motion:reduce){
 [data-op],.wrd{opacity:1!important;transform:none!important;transition:none!important}
   html{scroll-behavior:auto}
 .menu{transition:none}
 /* Beweging uit: de rij staat stil en wordt weer met de hand schuifbaar,
    anders is de helft van de voorbeelden onbereikbaar. */
 .railspoor{animation:none}
 .rail{overflow-x:auto;scrollbar-width:none}
}
@media(max-width:1100px){
 .artikelen{grid-template-columns:repeat(2,1fr)}
 .prijzen{grid-template-columns:repeat(2,1fr)}
 .steden{grid-template-columns:repeat(3,1fr)}
 .voetraster{grid-template-columns:1fr 1fr}
 .menu .mrij{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1000px){
  /* Op een telefoon neemt de hamburger het menu over en verhuizen de twee
    acties naar een vaste balk onderaan — daar staat je duim al. */
 .navrij{display:none}
 .top{padding:18px 20px 0}
 .top .knopmini span{display:none}
 .balk .in{gap:16px;padding:8px 20px;justify-content:flex-start;
   flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .balk .in::-webkit-scrollbar{display:none}
 .balk i em{display:none}
 .subhero .onder{padding-top:150px}
  .stap{grid-template-columns:60px 1fr;gap:18px}
 .stap p{grid-column:2}
  .uitspraak{padding:72px 0}
 .band,.sec,.aanvraag{padding-bottom:72px}
 .sec.top0{padding-top:64px}
 .breed{margin-bottom:72px}
 .kaart{flex:0 0 min(82vw,420px)}
 .contactrij{grid-template-columns:1fr}
 .artikelen{grid-template-columns:1fr}
 .opmaat{grid-template-columns:1fr}
 .top .bel span{display:inline}
}
/* De vaste balk onderaan pas op echte telefoonbreedte. Op een tablet blijft
   de zwevende knop staan: een balk over de volle breedte dekt daar de onderste
   regel van een tabel af, en dat meet je alleen als je ernaar zoekt. */
@media(max-width:640px){
 .zweef{display:none}
 .mbalk{display:grid}
 body{padding-bottom:56px}
 /* De aanvraagknop staat onderaan al vast; boven in de kop is hij dubbelop
    én duwt hij het woordmerk op twee regels. */
 .top .knopmini{display:none}
 .hero .onder{padding-bottom:86px}
 .subhero .onder{padding-bottom:78px}
}
@media(max-width:560px){
 .top{padding:18px 20px}
 .menu .mtop{padding:18px 20px}
 .merk span{font-size:15px}
 .merk b{width:32px;height:19px}
 .review{grid-template-columns:1fr;gap:14px}
 .knoppen .pil{width:100%;justify-content:center}
 /* Op telefoonbreedte staat "Bel direct" al in de vaste balk onderaan.
    De knop in de kop wordt daar een rond icoon, anders duwt hij het
    woordmerk op twee regels. */
 .top .bel{justify-content:center;padding:9px 11px;gap:0}
 .top .bel span{display:none}
 .top .bel::before{left:50%;margin-left:-11px}
 .hero .onder{padding-bottom:86px}
 .prijzen,.steden,.voetraster,.tweeveld{grid-template-columns:1fr}
 .menu .mrij{grid-template-columns:1fr}
 .form{padding:26px 20px 30px}
 .vraag .antw{padding-right:8px}
 .subhero .onder{padding-top:124px}
}