/* Startpagina RV GeoDesign — 'het kaartblad'.
   Papier, inkt en hoogtelijnen; groen voor het merk, elektrisch blauw alleen voor wat 'GPS' is.
   Koppen in DM Sans, nadruk in DM Serif Display cursief, labels en coördinaten in Barlow Condensed.
   De kop, de knoppen, het formulier en de voet komen uit rvg.css. */
:root{
  --papier:#f4f5f0; --papier-2:#eceee6; --inkt:#10242a; --inkt-2:#41535a; --inkt-3:#66767c;
  --merk:#1d6b52; --merk-d:#145340; --merk-l:#dcebe2; --fix:#2f5bff;
  --kaartlijn:#cfe0d6; --raam:#10242a;
  --label:'Barlow Condensed','DM Sans',system-ui,sans-serif;
  --serif:'DM Serif Display',Georgia,serif;
}
body{background:var(--papier)}
.h-kop{background:rgba(244,245,240,.9)}
.h-label{font:600 13px/1.2 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--merk);margin-bottom:14px}
.h-label span{color:var(--inkt-3);padding:0 .3em}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;color:var(--merk)}

/* ── 1. kaartblad ─────────────────────────────────────── */
.h-blad{padding:18px 18px 0}
.h-raam{position:relative;max-width:1400px;margin:0 auto;border:1.5px solid var(--raam);border-radius:4px;overflow:hidden;
  background:#f8f9f5;min-height:min(78vh,720px);display:flex;align-items:center;cursor:crosshair}
/* maatstreepjes langs de rand, zoals op een kaartblad */
.h-raam::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
   repeating-linear-gradient(90deg,var(--raam) 0 1px,transparent 1px 80px) top/100% 9px no-repeat,
   repeating-linear-gradient(90deg,var(--raam) 0 1px,transparent 1px 80px) bottom/100% 9px no-repeat,
   repeating-linear-gradient(0deg,var(--raam) 0 1px,transparent 1px 80px) left/9px 100% no-repeat,
   repeating-linear-gradient(0deg,var(--raam) 0 1px,transparent 1px 80px) right/9px 100% no-repeat}
.h-hoek{position:absolute;z-index:2;font:600 11.5px/1 var(--label);letter-spacing:.08em;color:var(--inkt-2);background:#f8f9f5;padding:3px 6px}
.h-hoek.lb{left:14px;top:14px}.h-hoek.rb{right:14px;top:14px}.h-hoek.lo{left:14px;bottom:14px}.h-hoek.ro{right:14px;bottom:14px}
.h-binnen{position:relative;z-index:3;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:56px;align-items:center;padding-top:72px;padding-bottom:88px;cursor:inherit}
.h-tekst>*,.h-legenda{cursor:auto}
.h-tekst{max-width:760px}
.h-tekst h1{font-size:clamp(38px,5.6vw,74px);line-height:1.02;letter-spacing:-.035em;font-weight:720;color:var(--inkt)}
.h-tekst h1 em{display:block;font-size:.8em;line-height:1.08;margin-top:.18em}
.h-lead{font-size:clamp(17px,1.5vw,19.5px);line-height:1.6;color:var(--inkt-2);max-width:620px;margin-top:26px}
.h-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:32px}
.h-tweede{font-weight:600;color:var(--inkt);text-decoration:none;border-bottom:1.5px solid var(--merk);padding-bottom:2px}
.h-tweede:hover{color:var(--merk)}
.h-tekst,.h-legenda{background:none}
.h-tekst>*{position:relative}
/* legenda */
.h-legenda{background:rgba(255,255,255,.94);border:1.5px solid var(--raam);border-radius:3px;padding:16px 18px 12px;box-shadow:6px 6px 0 var(--merk-l)}
.h-legenda-kop{font:700 13px/1 var(--label);letter-spacing:.18em;text-transform:uppercase;border-bottom:1.5px solid var(--raam);padding-bottom:10px;margin-bottom:6px}
.h-legenda ul{list-style:none;margin:0;padding:0}
.h-legenda a{display:flex;align-items:center;gap:12px;padding:9px 4px;color:var(--inkt);text-decoration:none;font-weight:550;font-size:15.5px;border-bottom:1px dashed var(--lijn)}
.h-legenda li:last-child a{border-bottom:0}
.h-legenda a:hover{color:var(--merk)}
.h-legenda a:hover .sym{transform:scale(1.12)}
.h-legenda-voet{font:600 11.5px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-3);border-top:1.5px solid var(--raam);padding-top:9px;margin-top:4px}
.sym{width:28px;height:20px;flex:none;color:var(--merk);transition:transform .2s}
.sym.gps{color:var(--fix)}
/* schaal en noordpijl */
.h-schaal{position:absolute;z-index:2;left:28px;bottom:42px;display:flex;align-items:center;gap:6px;font:600 11px var(--label);color:var(--inkt-2)}
.h-schaal i{width:120px;height:6px;border:1.2px solid var(--raam);background:linear-gradient(90deg,var(--raam) 0 25%,transparent 25% 50%,var(--raam) 50% 75%,transparent 75%)}
.h-noord{position:absolute;z-index:2;right:30px;bottom:40px;width:22px;height:38px}
.h-noord path{fill:var(--raam)}.h-noord text{font:700 9px var(--label);text-anchor:middle;fill:var(--raam)}
/* jouw positie */
.h-hier{position:absolute;z-index:2;transform:translate(-50%,-50%);pointer-events:none}
.h-hier i{display:block;width:14px;height:14px;border-radius:50%;background:var(--fix);border:2.5px solid #fff;box-shadow:0 0 0 1px var(--fix)}
.h-hier i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--fix);opacity:.35;animation:h-puls 2.4s ease-out infinite}
.h-hier span{position:absolute;left:20px;top:-3px;font:600 12.5px/1 var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--fix);white-space:nowrap}
@keyframes h-puls{from{transform:scale(1);opacity:.45}to{transform:scale(4.2);opacity:0}}
/* vizier dat de muis volgt */
.h-vizier{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .25s}
.h-raam.meet .h-vizier{opacity:1}
.h-vizier .hx,.h-vizier .hy{position:absolute;background:var(--fix);opacity:.55}
.h-vizier .hx{left:0;right:0;height:1px;top:var(--y,50%)}
.h-vizier .hy{top:0;bottom:0;width:1px;left:var(--x,50%)}
.h-vizier b{position:absolute;left:var(--x,50%);top:var(--y,50%);transform:translate(12px,12px);background:var(--fix);color:#fff;font:600 12.5px/1 var(--label);letter-spacing:.05em;padding:6px 8px;border-radius:2px;white-space:pre;font-variant-numeric:tabular-nums}
.h-vizier.links b{transform:translate(calc(-100% - 12px),12px)}

/* band */
.h-band{padding:0 18px}
.h-band .omslag{max-width:1400px;padding:0}
.h-band p{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;background:var(--inkt);color:#e7efe9;border-radius:0 0 4px 4px;padding:13px 18px;font:600 14px/1.2 var(--label);letter-spacing:.1em;text-transform:uppercase}
.h-band span{padding:0 18px;border-left:1px solid #2f4a4f}
.h-band span:first-child{border-left:0}

/* ── secties ──────────────────────────────────────────── */
.h-sectie{padding:104px 0}
.h-wit{background:#fff;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.h-sectiekop{max-width:720px;margin-bottom:48px}
.h-sectiekop.breed{max-width:860px}
.h-sectiekop h2,.h-gis h2,.h-over h2,.h-aanvraag h2{font-size:clamp(31px,4vw,52px);line-height:1.06;letter-spacing:-.03em;font-weight:700;margin-bottom:18px}
.h-sectiekop>p:not(.h-label){font-size:18px;color:var(--inkt-2);line-height:1.6}

/* ── 2. diensten als kaartlagen ───────────────────────── */
.h-lagen{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--inkt)}
.h-laag{display:grid;grid-template-columns:56px minmax(0,1.05fr) minmax(0,1.3fr) minmax(0,1fr);gap:8px 32px;align-items:start;padding:30px 12px;border-bottom:1px solid #cdd3cc;transition:background .2s;scroll-margin-top:90px}
.h-laag:hover{background:#fff}
.h-laag .nr{font:600 15px/1.6 var(--label);color:var(--inkt-3);letter-spacing:.08em}
.h-laag h3{display:flex;align-items:center;gap:14px;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em}
.h-laag h3 .sym{width:36px;height:26px}
.h-laag .laagtekst{color:var(--inkt-2);font-size:16.5px}
.h-laag ul{margin:0;padding:0;list-style:none;font-size:15px;color:var(--inkt)}
.h-laag ul li{padding:2px 0 2px 18px;position:relative}
.h-laag ul li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1.5px;background:var(--merk)}
.h-laag .meer{grid-column:3;font-weight:600;font-size:15px;color:var(--merk-d);text-decoration:none}
.h-laag .meer:hover{text-decoration:underline}
#d-gps .h3,#d-gps h3 .sym{color:var(--fix)}

/* ── 3. websites ──────────────────────────────────────── */
.h-websites{background:linear-gradient(var(--papier-2),var(--papier))}
.h-beloften{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-bottom:52px}
.h-beloften div{border-top:3px solid var(--merk);padding-top:16px}
.h-beloften h3{font-size:19px;margin-bottom:8px}
.h-beloften p{color:var(--inkt-2);font-size:15.5px}
.h-pakketten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.h-pakket{position:relative;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--inkt);border-radius:3px;padding:0 26px 26px}
.h-pakket .pk-blad{display:flex;justify-content:space-between;margin:0 -26px 22px;padding:10px 26px;border-bottom:1.5px solid var(--inkt);font:600 12.5px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-3)}
.h-pakket .pk-blad span{color:var(--merk)}
.h-pakket h3{font-size:24px;letter-spacing:-.02em}
.h-pakket .prijs{display:flex;align-items:baseline;gap:8px;margin:10px 0 6px}
.h-pakket .prijs b{font-size:44px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.h-pakket .prijs small{font-size:15px;color:var(--inkt-3)}
.h-pakket .prijs span{font-size:14px;color:var(--inkt-3)}
.h-pakket .voor{color:var(--inkt-2);font-size:15.5px;min-height:3.2em}
.h-pakket ul{list-style:none;margin:18px 0 16px;padding:16px 0 0;border-top:1px dashed #c9cfc8;display:grid;gap:8px;font-size:15px;flex:1}
.h-pakket li{padding-left:26px;position:relative}
.h-pakket li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:7px;border-left:2px solid var(--merk);border-bottom:2px solid var(--merk);transform:rotate(-45deg)}
.h-pakket .lever{font:600 13px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-3);margin-bottom:16px}
.h-pakket .knop{width:100%}
.h-pakket.uit{background:var(--inkt);color:#eef3ef;border-color:var(--inkt);box-shadow:8px 8px 0 var(--merk)}
.h-pakket.uit .pk-blad{border-color:#2f4a4f;color:#9fb3ae}.h-pakket.uit .pk-blad span{color:#7fd3ae}
.h-pakket.uit .voor,.h-pakket.uit .prijs span,.h-pakket.uit .prijs small,.h-pakket.uit .lever{color:#b5c5c0}
.h-pakket.uit ul{border-color:#2f4a4f}
.h-pakket.uit li::before{border-color:#7fd3ae}
.h-hosting{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;align-items:center;margin-top:22px;background:#fff;border:1.5px dashed var(--merk);border-radius:3px;padding:24px 28px}
.h-hosting h3{font-size:20px}
.h-hosting .prijs{margin-top:6px}.h-hosting .prijs b{font-size:30px;letter-spacing:-.02em;margin-right:8px}.h-hosting .prijs span{color:var(--inkt-3);font-size:14.5px}
.h-hosting ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;font-size:15px;color:var(--inkt-2)}
.h-hosting li{padding-left:18px;position:relative}
.h-hosting li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--merk)}
.h-noot{margin-top:18px;font-size:14.5px;color:var(--inkt-3)}
.h-noot a{font-weight:600}

/* ── 4. GIS en GPS, donker ────────────────────────────── */
.h-donker{background:#10242a url(home-kaart-donker.svg) center/cover no-repeat;color:#e4ece8}
.h-donker .h-label{color:#7fd3ae}
.h-donker h2 em{color:#7fd3ae}
.h-donker .h-lead{color:#b9c9c4}
.h-gis{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px;align-items:center}
.h-gis-lijst{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:34px 0}
.h-gis-lijst h3{font:700 14px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:#fff;padding-bottom:10px;border-bottom:1px solid #2f4a4f;margin-bottom:10px}
.h-gis-lijst ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15.5px;color:#cfdcd7}
.h-gis-lijst li{padding-left:18px;position:relative}
.h-gis-lijst li::before{content:"+";position:absolute;left:0;color:#7fd3ae;font-weight:700}
.h-gps{margin:0}
.h-gps-scherm{background:#0b1a1e;border:1.5px solid #2f4a4f;border-radius:14px;padding:14px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.h-gps-scherm svg{width:100%;height:auto;border-radius:6px;background:#0f2226}
.h-gps .st,.h-gps .co{display:flex;gap:14px;font:600 13px/1 var(--label);letter-spacing:.08em;color:#9fb3ae;font-variant-numeric:tabular-nums}
.h-gps .st{margin-bottom:12px}.h-gps .st b{background:#3fb68b;color:#0b1a1e;padding:3px 7px;border-radius:2px}.h-gps .st span{margin-left:auto;color:#7fd3ae}
.h-gps .co{margin-top:12px;justify-content:space-between}

/* ── 5. werkwijze als route ───────────────────────────── */
.h-route{position:relative}
.h-routelijn{position:absolute;left:20px;right:0;top:33px;border-top:2.5px dotted var(--fix)}
.h-route ol{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;counter-reset:wp}
.h-route li{counter-increment:wp;padding-top:74px;position:relative}
.h-route li::before{content:counter(wp);position:absolute;top:14px;left:0;width:40px;height:40px;border-radius:50%;background:var(--papier);border:2px solid var(--fix);color:var(--fix);display:flex;align-items:center;justify-content:center;font:700 17px var(--label)}
.h-route li:last-child::before{background:var(--fix);color:#fff}
.h-route b{display:block;font-size:19px;letter-spacing:-.01em;margin-bottom:8px}
.h-route p{color:var(--inkt-2);font-size:15.5px}

/* ── 6. al gebouwd ────────────────────────────────────── */
.h-producten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.h-product{background:var(--papier);border:1px solid var(--lijn);border-radius:6px;padding:24px;display:flex;flex-direction:column;gap:8px;scroll-margin-top:90px}
.h-product .soort{font:600 12.5px/1.2 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--merk)}
.h-product h3{font-size:22px;letter-spacing:-.02em}
.h-product h3 a{color:var(--inkt);text-decoration:none;background:linear-gradient(var(--merk),var(--merk)) 0 100%/0 2px no-repeat;transition:background-size .25s}
.h-product h3 a:hover{background-size:100% 2px}
.h-product h3 a::after{content:"";position:absolute;inset:0}
.h-product{position:relative}
.h-product>p:not(.soort):not(.prijs){color:var(--inkt-2);font-size:15.5px}
.h-product .prijs{margin-top:auto;padding-top:8px;font-weight:700;font-size:20px}
.h-product .prijs span{font-weight:400;font-size:14px;color:var(--inkt-3)}
.h-product.groot{grid-column:span 2;grid-row:span 1;flex-direction:row;gap:28px;align-items:center}
.h-product.groot>div{flex:1;display:flex;flex-direction:column;gap:8px}
.h-producten{grid-auto-flow:dense}
.h-product.breed{grid-column:span 2;flex-direction:row;gap:28px;align-items:center}
.h-product.breed>div{flex:1;display:flex;flex-direction:column;gap:8px}
.h-product .beeld{flex:1.2;min-width:0;border:1px solid var(--lijn);border-radius:4px;overflow:hidden;display:block}
.h-product .beeld img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.h-product.jouw{background:var(--inkt);border-color:var(--inkt);color:#e4ece8}
.h-product.jouw .soort{color:#7fd3ae}.h-product.jouw h3 a{color:#fff}.h-product.jouw>p:not(.soort):not(.prijs){color:#b9c9c4}
.h-product.jouw .prijs span{color:#9fb3ae}

/* ── 7. prijzen ───────────────────────────────────────── */
.h-staat{display:grid;grid-template-columns:1fr 1fr;gap:20px 56px}
.h-staat h3{grid-row:1;font:700 14px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;padding-bottom:12px;border-bottom:1.5px solid var(--inkt)}
.h-staat dl{grid-row:2;margin:0}
.h-staat dl div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid #d5dbd4}
.h-staat dt{font-weight:550}
.h-staat dt a{color:var(--inkt)}
.h-staat dd{margin:0;text-align:right;color:var(--inkt-2);font-variant-numeric:tabular-nums}
.h-meer{margin-top:36px}
.h-meer summary{cursor:pointer;font-weight:600;color:var(--merk-d)}
.h-meer .pakketten{margin-top:20px}

/* ── 8. over ──────────────────────────────────────────── */
.h-over{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:72px;align-items:center}
.h-over p:not(.h-label){color:var(--inkt-2);font-size:17px;margin-bottom:14px;max-width:620px}
.h-over .h-gebied{font-size:15px;color:var(--inkt-3);border-left:3px solid var(--merk);padding-left:14px;margin-top:22px}
.h-cijfers{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;border:1.5px solid var(--inkt);border-radius:3px}
.h-cijfers div{padding:22px;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;border-bottom:1px solid #d5dbd4}
.h-cijfers div:nth-child(odd){border-right:1px solid #d5dbd4}
.h-cijfers div:nth-last-child(-n+2){border-bottom:0}
.h-cijfers dd{margin:0;font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.h-cijfers dd small{font-size:16px;font-weight:500;letter-spacing:0;color:var(--inkt-3)}
.h-cijfers dt{font:600 12.5px/1.2 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-3)}

/* ── 9. vragen ────────────────────────────────────────── */
.h-vragen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:64px;align-items:start}
.h-vragen details{border-bottom:1px solid #cdd3cc}
.h-vragen details:first-child{border-top:1.5px solid var(--inkt)}
.h-vragen summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-weight:600;font-size:17.5px}
.h-vragen summary::-webkit-details-marker{display:none}
.h-vragen summary::after{content:"+";font:400 26px/0.8 var(--tekst);color:var(--merk);transition:transform .2s}
.h-vragen details[open] summary::after{transform:rotate(45deg)}
.h-vragen details p{padding:0 40px 22px 0;color:var(--inkt-2)}

/* ── 10. aanvragen ────────────────────────────────────── */
.h-aanvraag{background:var(--merk-l);padding:104px 0}
.h-aanvraag .h-mail{margin-top:26px;font-size:15.5px;color:var(--inkt-2)}
.h-aanvraag form{border:1.5px solid var(--inkt);border-radius:4px;box-shadow:8px 8px 0 var(--merk)}
.h-aanvraag .keuze input[type=radio]:checked+span{background:var(--inkt);border-color:var(--inkt)}

/* ── telefoon en tablet ───────────────────────────────── */
@media (max-width:1020px){
  .h-binnen{grid-template-columns:1fr;gap:36px}
  .h-legenda{max-width:440px}
  .h-laag{grid-template-columns:44px minmax(0,1fr) minmax(0,1fr)}
  .h-laag h3{grid-column:2/-1}.h-laag .laagtekst{grid-column:2}.h-laag ul{grid-column:3}.h-laag .meer{grid-column:2/-1}
  .h-gis{grid-template-columns:1fr;gap:44px}.h-gps{max-width:460px}
  .h-producten{grid-template-columns:1fr 1fr}.h-product.groot,.h-product.breed{grid-column:1/-1}
  .h-over,.h-vragen{grid-template-columns:1fr;gap:40px}
}
@media (max-width:860px){
  html{scroll-padding-top:112px}
  .kop .omslag{height:auto;flex-wrap:wrap;gap:0 12px;padding-top:10px}
  .kop .rechts{margin-left:auto}
  .kop nav{display:flex;order:3;flex:1 0 100%;margin:6px -6px 0;padding-bottom:6px}
  .kop nav a{font-size:14px;padding:7px 9px}
}
@media (max-width:760px){
  .h-blad,.h-band{padding-left:10px;padding-right:10px}
  .h-blad{padding-top:10px}
  .h-raam{min-height:0;cursor:auto}
  .h-binnen{padding-top:52px;padding-bottom:84px}
  .h-hoek.rb,.h-hoek.ro{display:none}
  .h-tekst h1{font-size:clamp(34px,9.4vw,46px)}
  .h-legenda{box-shadow:4px 4px 0 var(--merk-l)}
  .h-hier{left:62%!important;top:auto!important;bottom:50px}
  .h-noord{display:none}
  .h-band p{justify-content:flex-start;font-size:12.5px;padding:12px 8px}
  .h-band span{padding:3px 10px;border-left:0}
  .h-sectie,.h-aanvraag{padding:68px 0}
  .h-sectiekop{margin-bottom:32px}
  .h-laag{grid-template-columns:1fr;padding:24px 4px;gap:10px}
  .h-laag .nr{display:none}
  .h-laag h3,.h-laag .laagtekst,.h-laag ul,.h-laag .meer{grid-column:1}
  .h-beloften,.h-pakketten,.h-hosting,.h-hosting ul,.h-gis-lijst,.h-producten,.h-staat{grid-template-columns:1fr}
  .h-staat h3,.h-staat dl{grid-row:auto}
  .h-staat dl{margin-bottom:22px}
  .h-beloften{gap:22px;margin-bottom:36px}
  .h-pakket .voor{min-height:0}
  .h-pakket.uit{box-shadow:5px 5px 0 var(--merk)}
  .h-product.groot,.h-product.breed{flex-direction:column;align-items:stretch;grid-column:auto}
  .h-route ol{grid-template-columns:1fr;gap:6px}
  .h-routelijn{display:none}
  .h-route ol{border-left:2px dotted var(--fix);margin-left:19px;padding-left:0}
  .h-route li{padding:0 0 22px 40px}
  .h-route li::before{left:-21px;top:-6px}
  .h-cijfers dd{font-size:32px}
  .h-aanvraag form{box-shadow:5px 5px 0 var(--merk)}
}
@media (prefers-reduced-motion:reduce){
  .h-hier i::after{animation:none}
}

/* ── dienstpagina's ───────────────────────────────────── */
.h-raam.klein{min-height:0}
.h-binnen.enkel{grid-template-columns:minmax(0,1fr);padding-top:64px;padding-bottom:72px}
.h-tekst .pad{font:600 13px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-3);margin-bottom:18px}
.h-tekst .pad a{color:var(--merk)}
.h-blad-dienst .h-tekst h1{font-size:clamp(36px,5vw,64px)}
.h-uitleg{display:grid;grid-template-columns:1fr 1fr;gap:52px 64px}
.h-uitleg h2{font-size:clamp(23px,2.4vw,30px);letter-spacing:-.02em;margin-bottom:14px;padding-top:16px;border-top:3px solid var(--merk)}
.h-uitleg p{color:var(--inkt-2);font-size:16.5px;margin-bottom:12px}
.h-uitleg ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;color:var(--inkt-2);font-size:16.5px}
.h-uitleg li{padding-left:20px;position:relative}
.h-uitleg li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1.5px;background:var(--merk)}
.h-gebied-k{font-size:15px!important;color:var(--inkt-3)!important;border-left:3px solid var(--merk);padding-left:14px}
.h-slot{text-align:center}.h-slot .omslag{max-width:760px}
.h-slot h2{font-size:clamp(30px,3.6vw,46px);letter-spacing:-.03em;margin-bottom:14px}
.h-slot .uitleg{font-size:17.5px;color:var(--inkt-2)}
.h-slot .h-knoppen{justify-content:center}
@media (max-width:760px){.h-uitleg{grid-template-columns:1fr;gap:36px}.h-binnen.enkel{padding-top:48px;padding-bottom:56px}}

/* op aanvraag */
.h-pakket .prijs b.aanvraag{font-size:30px}
.h-staat .aanvraaglijst dt::after{content:"op aanvraag";float:right;font-weight:400;color:var(--inkt-3)}
.h-staat .aanvraaglijst dt{width:100%}
.h-staat dt small{font-weight:400;color:var(--inkt-3);font-size:13.5px}
#prijzen .h-knoppen{margin-top:32px}

/* Mail mij */
.h-mailknop{background:var(--inkt);border-color:var(--inkt);color:#fff;gap:10px}
.h-mailknop:hover{background:#1f3a40;border-color:#1f3a40;color:#fff}
.h-mailknop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.h-adres{font-size:15px;color:var(--inkt-2)}
.h-aanvraag .h-mail{margin-top:26px}
.h-aanvraag .h-knoppen{margin-top:10px}
@media (max-width:760px){.h-knoppen .knop.groot{width:100%}}

/* ══ Beweging: de kaart tekent zich, de route rijdt naar Werkhoven ══ */
.h-hoogtes{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);z-index:0;pointer-events:none}
.h-hoogtes-in{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.h-hoogtes path{fill:none;stroke-linejoin:round}
.h-hoogtes .l{stroke:#cfe0d6;stroke-width:1}
.h-hoogtes .h{stroke:#a9cbb9;stroke-width:1.7}
.js .h-hoogtes-in path{stroke-dasharray:1;stroke-dashoffset:1;animation:h-teken 2.4s cubic-bezier(.45,.05,.3,1) forwards;animation-delay:calc(var(--i) * 55ms)}
@keyframes h-teken{to{stroke-dashoffset:0}}
.h-spoor{display:none}
.h-reis{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.h-reis path{fill:none;stroke:var(--fix);stroke-width:3;stroke-linecap:round;opacity:0}
.h-reis.rijdt path{opacity:1}
.h-rijder{position:absolute;z-index:2;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--fix);border:3px solid #fff;box-shadow:0 0 0 1px var(--fix),0 0 22px 6px rgba(47,91,255,.35);opacity:0;pointer-events:none}
.h-hier small{display:block;font:600 11px/1.3 var(--label);letter-spacing:.08em;color:var(--inkt-2);text-transform:uppercase;opacity:0;transform:translateY(-3px);transition:.4s .2s}
.h-hier.aangekomen small{opacity:1;transform:none}
.h-hier.aangekomen i{animation:h-plof .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes h-plof{0%{transform:scale(.3)}100%{transform:scale(1)}}
.js .h-hier{opacity:0;transition:opacity .3s}
.js .h-hier.aangekomen{opacity:1}
/* kop komt binnen */
.js .h-tekst>*{opacity:0;transform:translateY(18px);animation:h-in .8s cubic-bezier(.2,.7,.2,1) forwards}
.js .h-tekst>:nth-child(1){animation-delay:.1s}.js .h-tekst>:nth-child(2){animation-delay:.22s}
.js .h-tekst>:nth-child(3){animation-delay:.4s}.js .h-tekst>:nth-child(4){animation-delay:.55s}.js .h-tekst>:nth-child(5){animation-delay:.68s}
.js .h-legenda{opacity:0;transform:translateX(24px);animation:h-in .9s .5s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes h-in{to{opacity:1;transform:none}}
.h-tekst h1 .r1{display:block}
/* snel antwoord */
.h-snel{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:7px 14px 7px 12px;background:#fff;border:1.5px solid var(--merk);border-radius:999px;font-weight:600;font-size:15px;color:var(--merk-d)}
.h-snel i{position:relative;width:10px;height:10px;border-radius:50%;background:#22a06b}
.h-snel i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#22a06b;animation:h-puls 1.8s ease-out infinite}
.h-snel+.h-knoppen{margin-top:18px}
/* lopende band */
.h-band p{border-radius:0}
.h-band .omslag{overflow:hidden;background:var(--inkt);border-radius:0 0 4px 4px}
.h-ticker{display:flex;width:max-content;animation:h-loop 38s linear infinite}
.h-ticker p{flex:none;flex-wrap:nowrap;justify-content:flex-start;padding:13px 0}
.h-ticker span{white-space:nowrap;padding:0 26px;border-left:0;position:relative}
.h-ticker span::before{content:"";position:absolute;left:-3px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#7fd3ae}
.h-band:hover .h-ticker{animation-play-state:paused}
@keyframes h-loop{to{transform:translateX(-50%)}}
/* onthullen bij scrollen */
.js [data-onthul]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js [data-onthul].zicht{opacity:1;transform:none}
/* websites: Google en de snelheidsringen */
.h-webrij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;margin-bottom:56px}
.h-webrij .h-beloften{grid-template-columns:1fr;gap:26px;margin:0}
.h-zoek{margin:0;background:#fff;border:1.5px solid var(--inkt);border-radius:14px;padding:22px;box-shadow:10px 10px 0 var(--merk-l);position:relative}
.h-zoekbalk{display:flex;align-items:center;gap:10px;border:1px solid #dfe3e0;border-radius:999px;padding:10px 16px;font-size:16px;box-shadow:0 2px 8px rgba(16,36,42,.06)}
.h-zoekbalk svg{width:18px;height:18px;fill:none;stroke:var(--inkt-3);stroke-width:2;stroke-linecap:round}
.h-zoekbalk .typ::after{content:"";display:inline-block;width:1.5px;height:1.1em;background:var(--fix);margin-left:2px;vertical-align:-3px;animation:h-knip 1s steps(1) infinite}
@keyframes h-knip{50%{opacity:0}}
.h-resultaat{position:relative;margin-top:18px;padding:14px 16px;border-radius:10px;background:#f2f7ff;border:1px solid #d9e4ff}
.h-resultaat .url{font-size:13px;color:#2b3a3f}.h-resultaat .url span{color:var(--inkt-3)}
.h-resultaat .titel{font-size:19px;color:#1a0dab;margin:3px 0 4px;font-weight:500}
.h-resultaat .oms{font-size:14px;color:var(--inkt-2)}
.h-resultaat .nr1{position:absolute;right:-12px;top:-12px;background:var(--fix);color:#fff;font:700 15px/1 var(--label);letter-spacing:.04em;padding:8px 10px;border-radius:999px;box-shadow:0 6px 16px rgba(47,91,255,.35)}
.h-resultaat.vaag{background:none;border-color:transparent;opacity:.4;filter:blur(1.2px);margin-top:6px;padding-top:6px}
.h-ringen{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;padding-top:18px;border-top:1px dashed #cfd5cf;text-align:center}
.ring{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.ring svg{width:64px;height:64px;transform:rotate(-90deg)}
.ring circle{fill:#e9f6ef;stroke:#e2ebe5;stroke-width:3}
.ring circle.v{fill:none;stroke:#18a05e;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s cubic-bezier(.3,0,.2,1);transition-delay:calc(var(--n) * .15s)}
.h-zoek.zicht .ring circle.v,.h-zoek:not([data-onthul]) .ring circle.v{stroke-dashoffset:0}
.ring b{position:absolute;top:20px;left:0;right:0;font-size:19px;color:#0c7a43;font-variant-numeric:tabular-nums}
.ring span{font-size:12px;color:var(--inkt-2);line-height:1.2}
.h-zoek figcaption{margin-top:14px;font-size:13.5px;color:var(--inkt-3);text-align:center}
@media (max-width:1020px){.h-webrij{grid-template-columns:1fr;gap:36px}}
@media (max-width:760px){.h-zoek{padding:16px;box-shadow:5px 5px 0 var(--merk-l)}.ring svg{width:54px;height:54px}.ring b{top:16px;font-size:16px}.h-resultaat .titel{font-size:17px}}
/* diensten-rij: lijn die oplicht */
.h-laag{position:relative}
.h-laag::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--merk);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.h-laag:hover::before{width:100%}
.h-laag:hover h3 .sym{transform:scale(1.15) rotate(-4deg)}
/* knoppen met een tikje leven */
.knop.groot{transition:transform .15s,box-shadow .15s,background .15s}
.knop.groot:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(16,36,42,.18)}
@media (prefers-reduced-motion:reduce){
  .js .h-hoogtes-in path{animation:none;stroke-dashoffset:0}
  .js .h-tekst>*,.js .h-legenda{animation:none;opacity:1;transform:none}
  .js [data-onthul]{opacity:1;transform:none;transition:none}
  .h-ticker{animation:none;flex-wrap:wrap}.h-ticker p[aria-hidden]{display:none}
  .js .h-hier{opacity:1}
  .ring circle.v{transition:none;stroke-dashoffset:0}
}