@font-face{font-family:'Archivo';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/archivo.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/public-sans.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500.woff2) format('woff2')}

:root{
  --papier:#f4f4f2; --wit:#ffffff; --tegel:#ececeb; --paneel:#15181b;
  --inkt:#15181b; --gedempt:#5a6068; --flauw:#6f757c;
  --op-donker:#ffffff; --op-donker-zacht:rgba(255,255,255,.86);
  --focus:#15181b;
  --lijn:#d8d8d4; --haarlijn:#e8e8e5; --lijn-donker:rgba(255,255,255,.16);
  --diep:#35506e; --goed:#2d6a4f;
  --merkblauw:#002060;
  --r:2px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:40px; --s8:56px; --s9:80px; --s10:112px;
  --kop:"Archivo",Arial,Helvetica,sans-serif;
  --tekst:"Public Sans",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --data:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--inkt);font-family:var(--tekst);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--s8)}

h1,h2,h3,h4{font-family:var(--kop);font-weight:700;line-height:1.05;letter-spacing:-.018em;margin:0;text-wrap:balance}
h1{font-size:clamp(44px,5vw,68px)}
h2{font-size:clamp(34px,3.4vw,46px)}
h3{font-size:22px;letter-spacing:-.008em;line-height:1.2}
h4{font-size:17px;letter-spacing:-.005em;line-height:1.3;font-weight:600}
p{margin:0}
.lead{font-size:19px;line-height:1.55;color:var(--gedempt);max-width:56ch}
.klein{font-size:14px;line-height:1.5;color:var(--gedempt)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.klein.klaar{color:var(--inkt);font-size:16px}
.klein.fout{color:var(--inkt)}
.label{font-family:var(--data);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--gedempt)}
.data{font-family:var(--data);font-size:14px;font-variant-numeric:tabular-nums}
.alleen-lezer{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--kop);font-weight:600;font-size:15px;letter-spacing:.01em;text-decoration:none;cursor:pointer;
  padding:13px 22px;min-height:46px;border:1px solid transparent;border-radius:var(--r);
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.knop-vol{background:var(--inkt);color:var(--wit);border-color:var(--inkt)}
.knop-vol:hover{background:#000;border-color:#000}
.knop-lijn{background:transparent;color:var(--inkt);border-color:var(--inkt)}
.knop-lijn:hover{background:var(--inkt);color:var(--wit)}
.knop-licht{background:var(--wit);color:var(--inkt);border-color:var(--wit)}
.knop-licht:hover{background:var(--papier);border-color:var(--papier)}
.knop-licht-lijn{background:transparent;color:var(--wit);border-color:rgba(255,255,255,.5)}
.knop-licht-lijn:hover{background:rgba(255,255,255,.1);border-color:var(--wit)}
.knop-tekst{background:none;border:0;padding:0;min-height:0;color:var(--inkt);border-bottom:1px solid var(--inkt);border-radius:0}
.knop-tekst:hover{color:var(--gedempt);border-color:var(--gedempt)}
.knop-klein{padding:9px 15px;min-height:38px;font-size:14px}

.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--data);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.1em;padding:6px 11px;border:1px solid var(--lijn);border-radius:var(--r);color:var(--gedempt)}
.status .stip{width:7px;height:7px;background:currentColor}
.status-goed{color:var(--goed);border-color:var(--goed)}

.balk{background:var(--paneel);color:var(--op-donker);font-size:13px}
.balk .wrap{display:flex;justify-content:space-between;gap:var(--s5);max-width:none;padding:10px var(--s7)}
.balk .label{color:rgba(255,255,255,.72)}
.balk .midden{color:rgba(255,255,255,.5)}
.nav{position:sticky;top:0;z-index:40;background:var(--wit);border-bottom:1px solid var(--lijn)}
.nav .wrap{display:flex;align-items:center;gap:var(--s6);height:84px;max-width:none;padding:0 var(--s7)}
.merk{font-family:var(--kop);font-weight:700;font-size:23px;letter-spacing:-.02em;text-decoration:none}
.merklogo{height:50px;width:auto;display:block}
main>section:not(.hero),footer{content-visibility:auto;contain-intrinsic-size:auto 600px}
.navlinks{display:flex;gap:var(--s6)}
.navlinks a{font-family:var(--kop);font-weight:600;font-size:15px;text-decoration:none}
.navlinks a:hover{color:var(--gedempt)}
.navlinks a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--inkt)}
.navrechts{margin-left:auto;flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:var(--s3)}
.navrechts .data{text-decoration:none;color:var(--gedempt)}
.menuknop{display:none;margin-left:auto;font-family:var(--kop);font-weight:600;font-size:15px;background:none;border:1px solid var(--inkt);border-radius:var(--r);padding:9px 15px;min-height:38px;cursor:pointer;color:var(--inkt)}
.lade{display:none;background:var(--wit);border-bottom:1px solid var(--lijn)}
.lade.open{display:block}
.lade .wrap{padding-top:var(--s3);padding-bottom:var(--s5)}
.lade a{display:block;padding:13px 0;border-bottom:1px solid var(--haarlijn);font-family:var(--kop);font-weight:600;font-size:17px;text-decoration:none}
.lade .knop{margin-top:var(--s4);width:100%}

.hero{position:relative;background:var(--paneel);color:var(--op-donker);min-height:640px;display:grid;place-items:center;overflow:hidden;text-align:left}
.hero video,.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:rgba(21,24,27,.58)}
.hero .in{
  position:relative;z-index:1;padding:var(--s10) var(--s8);width:100%;max-width:1280px;
  display:grid;grid-template-columns:1.15fr .85fr;column-gap:var(--s8);row-gap:var(--s5);
  align-items:center;
}
.hero h1{color:var(--wit);grid-column:1;grid-row:1 / span 2;align-self:center;margin:0}
.hero p{color:var(--op-donker-zacht);font-size:18px;line-height:1.55;margin:0;max-width:46ch;grid-column:2;grid-row:1;align-self:end}
.hero .knoppen{display:flex;gap:var(--s3);justify-content:flex-start;flex-wrap:wrap;grid-column:2;grid-row:2;align-self:start}
@media (max-width:900px){
  .hero .in{grid-template-columns:1fr;row-gap:var(--s5)}
  .hero h1,.hero p,.hero .knoppen{grid-column:1;grid-row:auto}
  .hero p{max-width:56ch}
}

.intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s10);align-items:center}
.intro .lead{margin-top:var(--s5)}
.intro .cijfers{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6);margin-top:var(--s7)}
.cijfer b{display:block;font-family:var(--kop);font-weight:700;font-size:40px;letter-spacing:-.02em;line-height:1;color:var(--merkblauw)}
.cijfer span{display:block;margin-top:6px;font-family:var(--data);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--gedempt)}
.cijfer.woord .label{margin-top:0}
.cijfer.woord b{margin-top:6px;font-size:17px;line-height:1.4;letter-spacing:-.005em;font-weight:600;color:var(--inkt)}
.jaarkaart{position:relative;padding:0 var(--s7) var(--s7) 0}
.jaarkaart img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.jaarkaart .tegel{
  position:absolute;right:0;bottom:0;background:var(--merkblauw);color:var(--wit);border-radius:var(--r);
  padding:var(--s6) var(--s6) var(--s5);width:46%;min-width:190px;
}
.jaarkaart .tegel b{display:block;font-family:var(--kop);font-weight:700;font-size:64px;line-height:1;letter-spacing:-.03em}
.jaarkaart .tegel span{display:block;font-family:var(--data);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.72);margin-bottom:10px;line-height:1.5}
.intro h2 em{font-style:normal;color:var(--merkblauw)}

.band{padding:var(--s10) 0}
.band-wit{background:var(--wit)}
.band-papier{background:var(--papier)}
.band-diep{background:var(--paneel);color:var(--op-donker)}
.band-diep h2,.band-diep h3{color:var(--wit)}
.band-diep .lead,.band-diep p{color:var(--op-donker-zacht)}
.band-klein{padding:var(--s8) 0}
.band-lijn{border-top:1px solid var(--lijn)}
.bandkop{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s7);margin-bottom:var(--s7)}
.bandkop .lead{margin-top:var(--s4)}
.bandkop .knop{flex:none}

.spoor-wrap{position:relative}
.spoor{
  display:flex;gap:var(--s5);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--s4);scrollbar-width:none;
}
.spoor::-webkit-scrollbar{display:none}
.spoor .kaart{
  flex:0 0 calc(33.333% - 16px);scroll-snap-align:start;position:relative;
  aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--wit);background:var(--paneel);
}
.spoor .kaart img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.spoor .kaart:hover img{transform:scale(1.04)}
.spoor .kaart::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(21,24,27,.9) 0%,rgba(21,24,27,.35) 50%,rgba(21,24,27,.05) 100%);transition:opacity .4s ease}
.spoor .kaart::before{content:"";position:absolute;inset:0;z-index:1;opacity:0;background:linear-gradient(to top,rgba(21,24,27,.96) 0%,rgba(21,24,27,.7) 45%,rgba(21,24,27,.3) 100%);transition:opacity .4s ease}
.spoor .kaart:hover::before{opacity:1}
.spoor .kaart .in{position:absolute;left:var(--s5);right:var(--s5);bottom:var(--s5);z-index:1}
.spoor .kaart h3{color:var(--wit);font-size:24px}
.spoor .kaart .knop{margin-top:var(--s4)}
.spoorbalk{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s4)}
.spoorlijn{flex:1;height:1px;background:var(--lijn);position:relative}
.spoorlijn i{position:absolute;left:0;top:-1px;height:3px;width:22%;background:var(--inkt);transition:left .3s ease}
.spoorpijl{width:44px;height:44px;border:1px solid var(--inkt);border-radius:var(--r);background:var(--wit);cursor:pointer;font-size:18px;display:grid;place-items:center;color:var(--inkt)}
.spoorpijl:hover{background:var(--inkt);color:var(--wit)}

.markten{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.markt{position:relative;overflow:hidden;background:var(--paneel);border-radius:var(--r);padding:var(--s6) var(--s5);text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;color:var(--wit)}
.markt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .5s ease}
.markt::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(21,24,27,.92) 0%,rgba(21,24,27,.55) 45%,rgba(21,24,27,.15) 100%)}
.markt:hover img{transform:scale(1.06)}
@media (hover:none){.markt img{transform:none}}
.markt h3,.markt p,.markt .pijl{position:relative;z-index:1}
.markt h3{margin-bottom:var(--s3);color:var(--wit)}
.markt p{font-size:15px;color:rgba(255,255,255,.82);line-height:1.55}
.markt .pijl{margin-top:var(--s5);font-size:20px}

.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.split .beeld{position:relative;background:var(--tegel)}
.split .beeld img{width:100%;height:100%;object-fit:cover;min-height:520px}
.split .tekst{display:flex;flex-direction:column;justify-content:center;padding:var(--s9) var(--s9)}
.split .tekst .lead{margin-top:var(--s5)}
.split.omgekeerd .beeld{order:2}
.split .specs{margin-top:var(--s6);border-top:1px solid var(--lijn);max-width:520px}
.spec{display:grid;grid-template-columns:190px 1fr;gap:var(--s4);padding:13px 0;border-bottom:1px solid var(--haarlijn);font-size:15px}
.spec .k{font-family:var(--data);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--gedempt);padding-top:2px}
.band-diep .specs{border-color:var(--lijn-donker)}
.band-diep .spec{border-color:var(--lijn-donker)}
.band-diep .spec .k{color:rgba(255,255,255,.55)}
.split .tekst .knop{margin-top:var(--s6);align-self:flex-start}

.waarde{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s9);align-items:start}
.waarde .lead{margin-top:var(--s5)}
.waarde .punten{margin-top:var(--s7);display:grid;gap:var(--s4)}
.punt{display:grid;grid-template-columns:40px 1fr;gap:var(--s4);padding:var(--s5);background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r)}
.punt .vink{width:28px;height:28px;border:1px solid var(--inkt);border-radius:var(--r);display:grid;place-items:center;font-family:var(--data);font-size:14px}
.punt b{display:block;font-family:var(--kop);font-weight:600;font-size:18px;margin-bottom:4px}
.punt p{font-size:15px;color:var(--gedempt);line-height:1.55}
.waarde .plak{position:sticky;top:74px;height:calc(100vh - 74px);display:flex;align-items:center}
.waarde img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.lintkop{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--lijn);margin-bottom:var(--s5)}
.lint{margin-top:var(--s8);padding-top:var(--s7);border-top:1px solid var(--lijn);overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.lintbaan{display:flex;align-items:center;width:max-content;animation:lint 60s linear infinite}
.lint:hover .lintbaan{animation-play-state:paused}
.lintbaan > [aria-hidden]{display:contents}
.lintitem{flex:0 0 auto;padding:0 var(--s7);display:flex;align-items:center;height:48px}
.lintitem img{height:30px;width:auto;max-width:150px;object-fit:contain}
.lintitem.woord{font-family:var(--kop);font-weight:700;font-size:24px;letter-spacing:.02em;text-transform:uppercase;color:var(--inkt)}
@keyframes lint{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.lintbaan{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.lint{mask-image:none;-webkit-mask-image:none}}
.lint.stil{-webkit-mask-image:none;mask-image:none}
.lint.stil .lintbaan{animation:none;width:auto;justify-content:center;flex-wrap:wrap}
.lint.stil .lintbaan > [aria-hidden]{display:none}

.merkenkop{text-align:center;margin-bottom:var(--s6)}
.merken{display:flex;align-items:center;justify-content:center;gap:clamp(var(--s5),6vw,var(--s9));flex-wrap:wrap}
.merken img{height:36px;width:auto}

.offerte{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:start}
.offerte .lead{margin-top:var(--s5)}
.offerte .proza p{margin-top:var(--s5);font-size:17px;line-height:1.6;color:var(--gedempt)}
.controledatum{font-family:var(--data);font-size:12px;color:var(--gedempt);padding-top:var(--s5);padding-bottom:var(--s7);margin:0}
.veld{display:block;margin-bottom:var(--s5)}
.veld > label{display:block;font-family:var(--data);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--gedempt);margin-bottom:var(--s2)}
.veld > label .moet{color:var(--inkt)}
.veld input,.veld textarea{width:100%;font:inherit;font-size:16px;color:var(--inkt);background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:13px 14px}
.veld input:focus,.veld textarea:focus{border-color:var(--inkt)}
.veld textarea{min-height:120px;resize:vertical}
.rij2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.offerte form .knop{width:100%}
.offerte form .klein{margin-top:var(--s4)}
.contactlijst{margin-top:var(--s6);border-top:1px solid var(--lijn)}
.contactrij{display:flex;justify-content:space-between;gap:var(--s5);padding:15px 0;border-bottom:1px solid var(--haarlijn);text-decoration:none;font-size:15px}
.contactrij .label{color:var(--inkt)}
.contactrij .w{color:var(--gedempt)}
.contactrij:hover .w{color:var(--inkt)}

footer{background:var(--paneel);color:var(--op-donker);padding:var(--s9) 0 var(--s6)}
footer .grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--s8)}
footer h2{font-family:var(--data);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.5);margin:0 0 var(--s4)}
footer a{display:block;font-size:15px;color:rgba(255,255,255,.82);text-decoration:none;padding:5px 0}
footer a:hover{color:var(--wit)}
footer p{color:rgba(255,255,255,.72);font-size:15px;line-height:1.6}
footer .merk{color:var(--wit)}
footer .over{margin-top:var(--s4);max-width:32ch}
footer .adres{margin-bottom:var(--s3)}
.voetbalk{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--lijn-donker);display:flex;justify-content:space-between;gap:var(--s5);font-size:13px;color:rgba(255,255,255,.5);flex-wrap:wrap}

.zweef{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;flex-direction:column-reverse;
  align-items:flex-end;gap:var(--s4)}
.zweefknop{position:relative;display:grid;place-items:center;width:52px;height:52px;padding:0;
  border:1px solid var(--inkt);border-radius:var(--r);background:var(--wit);color:var(--inkt);
  cursor:pointer;font:inherit}
.zweefknop:hover,.zweefknop.aan{background:var(--paneel);color:var(--wit);border-color:var(--paneel)}
.zweefknop .woord{position:absolute;right:calc(100% + 8px);white-space:nowrap;
  background:var(--paneel);color:var(--wit);border-radius:var(--r);padding:7px 11px;
  font-size:13px;font-weight:600;opacity:0;transform:translateX(4px);pointer-events:none;
  transition:opacity .15s ease,transform .15s ease}
.zweefknop:hover .woord,.zweefknop:focus-visible .woord{opacity:1;transform:none}
.zweefknop.aan .woord{opacity:0}
.zweefknop svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.zweefknop .dicht{display:none}
.zweefknop.aan .dicht{display:inline-flex}
.zweefknop.aan .open{display:none}
.zweefpaneel{width:296px;max-width:calc(100vw - 44px);background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--r);padding:var(--s5);
  max-height:calc(100vh - 120px);overflow:auto}
.zweeflabel{font-family:var(--data);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--gedempt);margin:var(--s4) 0 6px}
.zweeflabel:first-child{margin-top:0}
.zweefrij{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:center;
  padding:9px 0;text-decoration:none;color:var(--inkt)}
.zweefrij + .zweefrij{border-top:1px solid var(--haarlijn)}
.zweefrij svg{width:22px;height:22px;fill:none;stroke:var(--inkt);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.zweefrij.wa svg{fill:#25d366;stroke:none}
.zweefrij b{display:block;font-size:15px;font-weight:600}
.zweefrij i{display:block;font-style:normal;font-size:13px;color:var(--gedempt)}
.zweefrij:hover b{text-decoration:underline}
@media (max-width:640px){.zweefknop .woord{display:none}}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.band-diep,footer,.balk{--focus:#ffffff}
html{scroll-padding-top:96px}

.kruimel{font-family:var(--data);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gedempt);margin-bottom:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s2)}
.kruimel a{text-decoration:none}
.kruimel a:hover{color:var(--inkt)}
.kruimel span{color:var(--lijn)}
.paginakop{padding:var(--s8) 0 var(--s8)}
.paginakop h1{font-size:clamp(34px,3.4vw,46px);max-width:22ch}
.paginakop .lead{margin-top:var(--s5);max-width:62ch}
.paginakop .lead p+p{margin-top:var(--s4)}
.paginakop-beeld{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s9);align-items:center}
.paginakop-beeld img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--tegel)}
.paginakop-beeld .uitgesneden img{object-fit:contain;padding:var(--s6)}
.paginakop .knoppen{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}

.proza{max-width:68ch}
.proza p{margin:0 0 var(--s4)}
.proza h2{font-size:26px;line-height:1.15;margin:var(--s8) 0 var(--s3)}
.proza h2:first-child{margin-top:0}
.proza h3{font-size:20px;margin:var(--s6) 0 var(--s2)}
.proza h4{margin:var(--s5) 0 var(--s2)}
.proza ul,.proza ol{margin:0 0 var(--s4);padding-left:var(--s5)}
.proza li{margin:0 0 var(--s2)}
.proza li p{margin:0}
.proza strong{font-weight:600}
.proza em{font-style:normal;color:var(--gedempt);font-size:14px}
.proza a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--lijn)}
.proza a:hover{text-decoration-color:var(--inkt)}
.proza hr{border:0;border-top:1px solid var(--lijn);margin:var(--s7) 0}
.proza p>strong:first-child{display:block}
.proza .tabelwrap{max-width:none}

.tabelwrap{overflow-x:auto;margin:var(--s4) 0 var(--s6);background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--haarlijn);vertical-align:top}
th{font-family:var(--data);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--gedempt);white-space:nowrap;background:var(--papier)}
tbody tr:last-child td{border-bottom:0}

.vragen{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7) var(--s9);margin-top:var(--s7)}
.vraag h3{font-size:20px;margin-bottom:var(--s3)}
.vraag p{color:var(--gedempt);font-size:15px;line-height:1.6}
.vraag p+p{margin-top:var(--s3)}

.productrijen{display:grid;gap:var(--s5)}
.productrij{display:grid;grid-template-columns:260px 1fr;gap:var(--s7);align-items:center;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:var(--s5);text-decoration:none}
.productrij:hover{border-color:var(--inkt)}
.productrij .beeld{background:var(--tegel);border-radius:var(--r);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.productrij .beeld img{width:100%;height:100%;object-fit:contain;padding:var(--s4)}
.productrij .beeld.foto img{object-fit:cover;padding:0}
.productrij h3{margin-bottom:var(--s2)}
.productrij p{color:var(--gedempt);font-size:15px;line-height:1.55;max-width:60ch}
.productrij .link{display:inline-block;margin-top:var(--s4);font-family:var(--kop);font-weight:600;font-size:15px;border-bottom:1px solid var(--inkt)}

.tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.tegels.twee{grid-template-columns:1fr 1fr}
.tegelkaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);text-decoration:none;display:flex;flex-direction:column;overflow:hidden}
.tegelkaart:hover{border-color:var(--inkt)}
.tegelkaart .beeld{background:var(--tegel);aspect-ratio:4/3;overflow:hidden}
.tegelkaart .beeld img{width:100%;height:100%;object-fit:cover}
.tegelkaart .beeld.uit img{object-fit:contain;padding:var(--s5)}
.tegelkaart .statussen{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.tegelkaart .links{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s4)}
.tegelkaart .link{font-family:var(--kop);font-weight:600;font-size:15px;text-decoration:none;border-bottom:1px solid var(--inkt)}
.tegelkaart .in{padding:var(--s5);display:flex;flex-direction:column;flex:1}
.tegelkaart h3{margin-bottom:var(--s2)}
.tegelkaart p{color:var(--gedempt);font-size:15px;line-height:1.55;margin-bottom:auto}
.tegelkaart .pijl{margin-top:var(--s5);font-size:20px}

.document{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s9);align-items:start}
.zijkaart{position:sticky;top:98px;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:var(--s5)}
.zijkaart h3{font-size:20px;margin-bottom:var(--s3)}
.zijkaart p{font-size:15px;color:var(--gedempt);line-height:1.55}
.zijkaart .knop{width:100%;margin-top:var(--s4)}
.zijkaart .contactlijst{margin-top:var(--s4)}
.zijkaart .contactrij{padding:11px 0;font-size:14px}
.zijkaart .inhoud a{display:block;padding:9px 0;border-bottom:1px solid var(--haarlijn);font-size:15px;text-decoration:none;color:var(--gedempt)}
.zijkaart .inhoud a:hover{color:var(--inkt)}

.r{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.r.in{opacity:1;transform:none}
.r-groep > *{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.r-groep.in > *{opacity:1;transform:none}
.r-groep.in > :nth-child(1){transition-delay:0ms}
.r-groep.in > :nth-child(2){transition-delay:90ms}
.r-groep.in > :nth-child(3){transition-delay:180ms}
.r-groep.in > :nth-child(4){transition-delay:270ms}
.r-groep.in > :nth-child(5){transition-delay:360ms}
.r-groep.in > :nth-child(6){transition-delay:450ms}
.r-groep.in > :nth-child(7){transition-delay:540ms}
.r-groep.in > :nth-child(8){transition-delay:630ms}
.r-links{transform:translateX(-36px)}
.r-rechts{transform:translateX(36px)}
body{overflow-x:clip}
.r-links.in,.r-rechts.in{transform:none}
@media (prefers-reduced-motion:reduce){
  .r,.r-groep > *,.r-links,.r-rechts{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

@media (max-width:1080px){
  .wrap{padding:0 var(--s5)}
  .balk .wrap{padding:10px var(--s5)}
  .intro,.waarde,.offerte,.paginakop-beeld,.document,footer .grid{grid-template-columns:1fr;gap:var(--s7)}
  .markten{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .split.omgekeerd .beeld{order:0}
  .split .beeld img{min-height:300px;max-height:400px}
  .split .tekst{padding:var(--s8) var(--s5)}
  .spoor .kaart{flex-basis:calc(50% - 12px)}
  .waarde img{position:static}
  .band{padding:var(--s9) 0}
  .tegels{grid-template-columns:1fr 1fr}
  .zijkaart{position:static}
}
@media (max-width:640px){
  .balk .midden,.balk .rechts{display:none}
  .markten,.rij2,.vragen,.tegels,.tegels.twee{grid-template-columns:1fr}
  .spoor .kaart{flex-basis:84%}
  .bandkop{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .hero{min-height:540px}
  .productrij{grid-template-columns:1fr;gap:var(--s4)}
  .spec{grid-template-columns:1fr;gap:var(--s1)}
  .paginakop{padding:var(--s7) 0}
  .jaarkaart{padding:0 var(--s5) var(--s5) 0}
  .jaarkaart .tegel b{font-size:48px}
}

.productrij .statussen{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.productrij .links{display:flex;gap:var(--s5);flex-wrap:wrap}
.paginakop .statussen{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5)}
.zijkaart .inhoud{margin-top:var(--s3)}
.dienstkruimel{display:none}
.dienstkop{font-size:clamp(34px,3.4vw,46px)}
.balk .label{white-space:nowrap}
@media (max-width:1080px){.balk .midden{display:none}}

.kaartpaar{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s5);padding:var(--s6) 0 0}
.kaartpaar .kaart-tekst{background:var(--papier);border-radius:var(--r);padding:var(--s9) var(--s8);display:flex;flex-direction:column;justify-content:center}
.kaartpaar .kaart-tekst h1{font-size:clamp(34px,3.4vw,46px);max-width:18ch}
.kaartpaar .kaart-tekst .lead{margin-top:var(--s5);max-width:48ch}
.kaartpaar .kaart-tekst .knoppen{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
.kaartpaar .kaart-beeld{background:var(--tegel);border-radius:var(--r);overflow:hidden;min-height:420px}
.kaartpaar .kaart-beeld img{width:100%;height:100%;object-fit:cover}
.kaartpaar .kaart-beeld.uit img{object-fit:contain;padding:var(--s7)}
.statement{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:start}
.statement .groot{font-family:var(--kop);font-weight:500;font-size:clamp(24px,2.2vw,30px);line-height:1.3;letter-spacing:-.01em;color:var(--gedempt)}
.statement .rest p{font-size:16px;line-height:1.6;margin:0 0 var(--s4)}
.cijferband{background:var(--merkblauw);color:var(--wit);border-radius:var(--r);padding:var(--s8);display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s8);align-items:center}
.cijferband h2{color:var(--wit);font-size:clamp(28px,2.6vw,36px)}
.cijferband .tegels-cijfer{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
.cijfertegel{background:var(--wit);color:var(--inkt);border-radius:var(--r);padding:var(--s5)}
.cijfertegel b{display:block;font-family:var(--kop);font-weight:700;font-size:40px;letter-spacing:-.02em;line-height:1;color:var(--merkblauw)}
.cijfertegel span{display:block;margin-top:var(--s3);font-size:14px;line-height:1.45;color:var(--gedempt)}
.band-diep .tegelkaart{border-color:transparent}
.band-diep .tegelkaart h3{color:var(--inkt)}
.band-diep .tegelkaart p{color:var(--gedempt)}
.uitklap{border-top:1px solid var(--lijn)}
.uitklap:last-child{border-bottom:1px solid var(--lijn)}
.uitklap summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s5);padding:var(--s5) 0;font-family:var(--kop);font-weight:600;font-size:19px}
.uitklap summary::-webkit-details-marker{display:none}
.uitklap summary::after{content:"+";font-family:var(--data);font-size:20px;color:var(--gedempt);flex:none}
.uitklap[open] summary::after{content:"\2013"}
.uitklap .proza{padding:0 0 var(--s6);max-width:none;column-gap:var(--s9)}
.uitklap .proza p,.uitklap .proza ul{max-width:68ch}
.uitklappen{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s9);align-items:start}
.uitklappen .kolom{display:block}
.waarom{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.waarom .punt{grid-template-columns:1fr;gap:var(--s3)}
@media (max-width:1080px){
  .kaartpaar,.statement,.cijferband,.uitklappen{grid-template-columns:1fr}
  .waarom{grid-template-columns:1fr 1fr}
  .kaartpaar .kaart-beeld{min-height:300px}
  .kaartpaar .kaart-tekst{padding:var(--s7) var(--s5)}
}
@media (max-width:640px){
  .cijferband{padding:var(--s5)}
  .cijferband .tegels-cijfer,.waarom{grid-template-columns:1fr}
  .intro .cijfers{grid-template-columns:1fr}
}

.cijfertegel.woord b{font-size:17px;line-height:1.4;letter-spacing:-.005em;color:var(--inkt);font-weight:600}
.cijfertegel.woord .label{display:block}

.tegels{grid-template-columns:repeat(4,1fr)}
.tegelkaart .beeld img{transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.tegelkaart:hover .beeld img{transform:scale(1.06)}
.tegelkaart h3{font-size:19px}
.tegelkaart .in{padding:var(--s4) var(--s4) var(--s5)}
@media (max-width:1080px){.tegels{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.tegels{grid-template-columns:1fr}}
.band-diep .tegelkaart .link{color:var(--inkt);border-color:var(--inkt)}

.vink svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.waarom .punt{grid-template-columns:1fr}
.cijfertegel .vink{display:inline-grid;place-items:center;border:1px solid var(--inkt);border-radius:var(--r);margin-bottom:var(--s3);color:var(--inkt)}
.punt .vink{font-size:0}
.punt .vink,.cijfertegel .vink{width:44px;height:44px}

.taalwissel{display:flex;border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;flex:none}
.taalwissel a{font-family:var(--data);font-weight:500;font-size:12px;letter-spacing:.1em;
  padding:9px 10px;text-decoration:none;color:var(--gedempt);line-height:1}
.taalwissel a:hover{color:var(--inkt)}
.taalwissel a.nu{background:var(--inkt);color:var(--wit)}

.zoek{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0;max-width:560px;margin-right:auto}
.zoekveld{width:100%;min-width:0;height:44px;font:inherit;font-size:15px;color:var(--inkt);background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--r);padding:0 14px 0 42px;-webkit-appearance:none;appearance:none}
.zoekveld::-webkit-search-cancel-button{display:none}
.zoekveld:focus{border-color:var(--inkt)}
.zoekveld::placeholder{color:var(--flauw)}
.zoekknop{position:absolute;left:0;top:0;width:42px;height:44px;display:grid;place-items:center;
  background:none;border:0;border-radius:var(--r);cursor:pointer;color:var(--gedempt)}
.zoekknop:hover{color:var(--inkt)}
.zoekknop svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.zoeklijst{position:absolute;top:calc(100% + 4px);left:0;width:100%;min-width:380px;max-height:66vh;overflow-y:auto;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);z-index:50}
.zoekrij{display:block;padding:12px 16px;border-bottom:1px solid var(--haarlijn);text-decoration:none}
.zoeklijst .zoekrij:last-child{border-bottom:0}
.zoekrij:hover,.zoekrij.nu{background:var(--papier)}
.zoektitel{display:block;font-family:var(--kop);font-weight:600;font-size:15px;line-height:1.25}
.zoekkort{display:block;margin-top:var(--s1);font-size:13px;line-height:1.45;color:var(--gedempt)}
.lade .zoek{width:100%;margin-bottom:var(--s3)}
.lade .zoekveld{width:100%}
.lade .zoeklijst{position:static;width:auto;border-left:0;border-right:0}
.lade .zoeklijst a{padding:12px 16px;font-family:var(--tekst);font-weight:400;font-size:15px}
.lade .taalwissel{margin-top:var(--s4);width:max-content}

.zoek-groot{display:block;width:100%;max-width:560px;margin-top:var(--s6)}
.zoek-groot .zoekveld{width:100%;height:52px;font-size:17px;padding:0 48px 0 16px}
.zoek-groot .zoekknop{width:48px;height:52px}
.zoek-groot .zoekknop svg{width:20px;height:20px}
.zoek-groot .zoeklijst{width:100%}
.zoekresultaten:not(:empty){margin-bottom:var(--s9)}
.zoekresultaten h2{font-size:26px;margin-bottom:var(--s5)}
.zoekresultaten .knoppen{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
.zoekrijen{border-top:1px solid var(--lijn)}
.zoekrij.groot{padding:var(--s5) 0;border-bottom:1px solid var(--haarlijn)}
.zoekrij.groot:hover{background:none}
.zoekrij.groot .zoektitel{font-size:19px}
.zoekrij.groot .zoekkort{font-size:15px;max-width:78ch}
.zoekboom{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6)}
.zoekkolom h3{font-size:17px;margin-bottom:var(--s3)}
.zoekkolom a{display:block;padding:7px 0;font-size:15px;color:var(--gedempt);text-decoration:none;
  border-bottom:1px solid var(--haarlijn)}
.zoekkolom a:hover{color:var(--inkt)}
.zoekkolom h3 a{color:var(--inkt);border:0;padding:0;text-decoration:none}

.kalibratie{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:var(--s6);align-items:start}
.kalibratie-in{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);padding:var(--s5)}
.kalibratie-in .veld:last-child{margin-bottom:0}
.kalibratie-in select{width:100%;font:inherit;font-size:16px;color:var(--inkt);background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--r);padding:12px 13px;min-height:46px}
.kalibratie-in select:focus,.kalibratie-in input:focus{border-color:var(--inkt)}
.kalibratie-in .hint{margin-top:var(--s2);font-size:13px;color:var(--flauw)}
.kalibratie-in .keuze{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);
  font-family:var(--tekst);font-size:14px;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--gedempt);cursor:pointer}
.kalibratie-in .keuze input{width:16px;height:16px;margin:0;accent-color:var(--inkt);cursor:pointer}
.kalibratie-in input[type=date]:disabled{opacity:.45;cursor:not-allowed}
.kalibratie-uit{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r)}
.kalibratie-uit .kopregel{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--haarlijn);flex-wrap:wrap}
.kalibratie-uit .kopregel h3{font-size:19px}
.kalibratie-uit .rijen{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--haarlijn)}
.kalibratie-uit .rij{padding:var(--s5);border-right:1px solid var(--haarlijn)}
.kalibratie-uit .rij:last-child{border-right:0}
.kalibratie-uit .rij b{display:block;font-family:var(--kop);font-weight:700;font-size:26px;
  letter-spacing:-.02em;line-height:1.15;margin-top:var(--s2)}
.kalibratie-uit .rij .onder{display:block;margin-top:var(--s2);font-size:14px;color:var(--gedempt)}
.kalibratie-uit .tel{padding:var(--s4) var(--s5);border-bottom:1px solid var(--haarlijn);
  background:var(--papier);font-size:15px}
.kalibratie-uit .acties{display:flex;gap:var(--s3);flex-wrap:wrap;padding:var(--s5)}
.kalibratie-uit .voet{padding:0 var(--s5) var(--s5);font-size:13px;color:var(--flauw)}
.kalibratie-uit .kal-leeg{padding:var(--s8) var(--s5);text-align:center;color:var(--gedempt)}
.status-attentie{color:var(--diep);border-color:var(--diep)}
.status-verlopen{color:var(--inkt);border-color:var(--inkt);background:var(--tegel)}
.kalibratie-tweede{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--lijn);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.kalibratie-tweede h3{font-size:19px;margin-bottom:var(--s2)}
.kalibratie-tweede p{font-size:15px;line-height:1.55;color:var(--gedempt);max-width:72ch}
.kalibratie-tweede .knop{flex:none}

.navrechts .data{display:none}
.navlinks a,.navrechts .knop{white-space:nowrap}
@media (max-width:1400px){
  .nav .wrap{gap:var(--s5);padding:0 var(--s5)}
  .balk .wrap{padding:10px var(--s5)}
  .navlinks{gap:var(--s5)}
}
@media (max-width:1060px){
  .navlinks,.navrechts .data,.navrechts .zoek,.navrechts .taalwissel,.navrechts .knop-lijn{display:none}
  .menuknop{display:inline-flex}
  .navrechts{margin-left:0}
  .nav .wrap{gap:var(--s4)}
}
@media (max-width:1080px){
  .zoekboom{grid-template-columns:1fr 1fr}
  .kalibratie{grid-template-columns:1fr}
  .kalibratie-uit .rijen{grid-template-columns:1fr}
  .kalibratie-uit .rij{border-right:0;border-bottom:1px solid var(--haarlijn)}
}
@media (max-width:640px){
  .zoekboom{grid-template-columns:1fr}
  .zoeklijst{width:calc(100vw - 48px)}
  .lade .zoeklijst{width:auto}
}

.tegels.kol-2{grid-template-columns:repeat(2,1fr)}
.tegels.kol-3{grid-template-columns:repeat(3,1fr)}
.tegels.kol-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1080px){.tegels.kol-2,.tegels.kol-3,.tegels.kol-5{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.tegels.kol-2,.tegels.kol-3,.tegels.kol-5{grid-template-columns:1fr}}

.contactkop{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:start;
  padding-top:var(--s8);padding-bottom:var(--s8)}
.contactkop h1{max-width:14ch}
.contactkop .lead{margin-top:var(--s4);max-width:46ch}
.contactpunten{margin-top:var(--s7);display:grid;gap:var(--s5)}
.contactpunt{display:grid;grid-template-columns:28px 1fr;gap:var(--s4);align-items:start}
.contactpunt .vink svg{width:28px;height:28px;fill:none;stroke:var(--inkt);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.contactpunt b{display:block;font-size:17px}
.contactpunt p{margin-top:4px;font-size:15px;line-height:1.55;color:var(--gedempt)}
.contactkaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  padding:var(--s7)}
.contactkaart h2{font-size:24px;margin-bottom:var(--s6)}
.contactkaart .knop{width:100%}
.contactkaart .klein{margin-top:var(--s4)}
.kantoren{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.kantoor{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:var(--s6)}
.kantoor h3{font-size:22px}
.kantoor .adres{margin-top:var(--s3);font-size:15px;line-height:1.6;color:var(--gedempt)}
.kantoorlijst{margin-top:var(--s5);display:grid;grid-template-columns:auto 1fr;gap:0;
  border-top:1px solid var(--haarlijn)}
.kantoorlijst dt{padding:11px var(--s5) 11px 0;font-family:var(--data);font-size:12px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--gedempt);
  border-bottom:1px solid var(--haarlijn)}
.kantoorlijst dd{margin:0;padding:11px 0;font-size:15px;text-align:right;
  border-bottom:1px solid var(--haarlijn)}
.kantoor .knoppen{margin-top:var(--s5);display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
@media (max-width:1080px){
  .contactkop,.kantoren{grid-template-columns:1fr}
  .contactkop h1{max-width:none}
}
.proza.breed{max-width:none}
.rest-tekst{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:var(--s7) var(--s9);align-items:start}
@media (max-width:1080px){.rest-tekst{grid-template-columns:1fr}}
.kaartembeds{margin-top:var(--s5);display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.kaartembed{width:100%;aspect-ratio:16/10;border:1px solid var(--lijn);border-radius:var(--r);display:block}@media (max-width:1080px){.kaartembeds{grid-template-columns:1fr}}