/* esf.tdgdigital.com — "Als u naar huis gaat, komen wij."
   Motief: de schuine haal uit het ESF-logo (donker | licht, vóór | na) als sectierand, label en opening. */
@font-face{font-family:"Chakra";src:url(/fonts/chakra-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Chakra";src:url(/fonts/chakra-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plex";src:url(/fonts/plex-var.woff2) format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"Plex";src:url(/fonts/plex-400-i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
  --nacht:#070d24;--diep:#0b1a4a;--navy:#000791;--blauw:#08adf7;--lucht:#bfe9fd;--ijs:#eaf7fe;
  --papier:#f5f7f9;--inkt:#0a1226;--grijs:#5b6477;--lijn:#d6dce5;--licht:#fff6dc;
  --rand:clamp(1rem,4vw,3.5rem);--schuin:clamp(1.5rem,5vw,5rem);
  --kop:"Chakra",system-ui,sans-serif;--tekst:"Plex",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:5rem}
/* Brede schermen (Joost 2026-10-10): het 1440-ontwerp schaalt vanaf 1440 px als geheel mee. */
@media (min-width:1440px){html{font-size:clamp(100%,1.1111vw,200%)}:where(button,input,select,textarea){font-size:.8333rem}}
body{margin:0;background:var(--papier);color:var(--inkt);font-family:var(--tekst);font-size:1.0625rem;line-height:1.6}
::selection{background:var(--blauw);color:#fff}
img,video,svg{display:block;max-width:100%}
img{height:auto}
[hidden]{display:none!important}
p,li,dd{hyphens:auto;overflow-wrap:break-word}
h1,h2,h3{hyphens:manual;overflow-wrap:normal;text-wrap:balance;font-family:var(--kop);font-weight:700;line-height:1.02;letter-spacing:-.01em;margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--blauw);outline-offset:3px}
a[href^=mailto],a[href^=tel]{hyphens:none;overflow-wrap:anywhere}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.5rem 1rem}
.wrap{width:min(100% - 2*var(--rand),88rem);margin-inline:auto}
.leeskolom{max-width:42rem}

/* ---------- labels en knoppen */
.label{display:inline-flex;align-items:baseline;gap:.6rem;font-family:var(--kop);font-weight:600;font-size:.95rem;letter-spacing:.02em;color:var(--blauw);margin:0 0 1rem}
.label::before{content:"";width:1.1rem;height:.62rem;background:currentColor;transform:skewX(-34deg);flex-shrink:0}
.knop{display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;padding:.75rem 1.4rem;border:0;border-radius:999px;background:var(--blauw);color:#04112c;
  font:600 1rem/1.1 var(--tekst);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.knop:hover{background:#fff;color:var(--navy)}
.knop.rand{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.knop.rand:hover{background:#fff;color:var(--navy);box-shadow:none}
.knop.navy{background:var(--navy);color:#fff}.knop.navy:hover{background:var(--nacht)}
.knoppen{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.pijl{width:1.1em;height:1.1em;flex-shrink:0}

/* ---------- kop */
.kop{position:sticky;top:0;z-index:40;background:rgba(7,13,36,.92);color:#fff;transition:background .3s}
.kop-in{display:flex;align-items:center;gap:1.5rem;min-height:4.5rem}
.kop-logo{display:block;flex-shrink:0;min-height:44px}
.kop-logo img{height:2.9rem;width:auto}
.menu{display:flex;gap:.25rem;margin-left:auto;align-items:center}
.menu>li{list-style:none;position:relative}
.menu{padding:0;margin-block:0}
.menu>li>a,.menu>li>button{display:flex;align-items:center;gap:.35rem;min-height:44px;padding:.5rem .85rem;background:none;border:0;color:inherit;
  font:500 1rem var(--tekst);text-decoration:none;cursor:pointer;border-radius:999px}
.menu>li>a:hover,.menu>li>button:hover,.menu>li>button[aria-expanded=true]{background:rgba(255,255,255,.1)}
.menu .uit{position:absolute;top:calc(100% + .4rem);left:0;min-width:17rem;background:#fff;color:var(--inkt);border-radius:1rem;padding:.6rem;
  box-shadow:0 1.2rem 2.5rem rgba(7,13,36,.25)}
.menu .uit a{display:block;padding:.55rem .8rem;border-radius:.6rem;text-decoration:none}
.menu .uit a:hover{background:var(--ijs)}
.menu .uit small{display:block;padding:.6rem .8rem .2rem;color:var(--grijs);font-size:.8rem;font-weight:600;letter-spacing:.04em}
.menu .menu-offerte a{background:var(--blauw);color:#04112c;font-weight:600;margin-left:.4rem}
.menu .menu-offerte a:hover{background:#fff}
.kop-tel{display:none}
.menu-knop{display:none}
@media (max-width:1060px){
  .menu{display:none}
  .kop-tel{display:inline-flex;margin-left:auto;min-height:44px;align-items:center;padding:0 .9rem;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);color:#fff;text-decoration:none;font-weight:600;white-space:nowrap}
  .menu-knop{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:.5rem;min-width:48px;min-height:48px;padding:0 1rem;border:0;border-radius:999px;background:var(--blauw);color:#04112c;font:600 1rem var(--tekst);cursor:pointer}
}
@media (max-width:420px){.kop-tel span{display:none}.kop-tel{padding:0 .75rem}.kop-logo img{height:2.5rem}}
.lade{position:fixed;inset:0;z-index:60;background:var(--nacht);color:#fff;overflow-y:auto;padding:1rem var(--rand) 3rem;max-height:100dvh}
.lade-kop{display:flex;justify-content:space-between;align-items:center;min-height:4rem}
.lade-sluit{min-width:48px;min-height:48px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:600 1rem var(--tekst);cursor:pointer;padding:0 1rem}
.lade nav>ul{list-style:none;padding:0;margin:1rem 0}
.lade nav>ul>li{border-bottom:1px solid rgba(255,255,255,.12)}
.lade nav>ul>li>a,.lade nav>ul>li>button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:3.5rem;background:none;border:0;color:#fff;font:700 1.5rem var(--kop);text-decoration:none;text-align:left;cursor:pointer;padding:0}
.lade .sub{list-style:none;padding:0 0 1rem;margin:0}
.lade .sub a{display:flex;align-items:center;min-height:44px;color:var(--lucht);text-decoration:none;font-size:1.05rem}
.lade-plus{transition:transform .2s}
[aria-expanded=true] .lade-plus{transform:rotate(45deg)}
body.lade-open{overflow:hidden}

/* ---------- opening: het logo splitst en de twee helften schuiven langs de haal uit elkaar */
.opening{position:fixed;inset:0;z-index:80;pointer-events:none}
.opening .helft{position:absolute;inset:-10%;transition:transform 1.05s cubic-bezier(.76,0,.24,1)}
.opening .donker{background:var(--navy);clip-path:polygon(0 0,62% 0,40% 100%,0 100%)}
.opening .licht{background:var(--blauw);clip-path:polygon(62% 0,100% 0,100% 100%,40% 100%)}
.opening .haal{position:absolute;left:50%;top:50%;width:min(62vw,34rem);transform:translate(-50%,-50%);transition:opacity .35s}
.opening .haal img{width:100%;height:auto;opacity:0;transform:scale(.94);animation:opLogo .55s .1s forwards}
.opening.weg .donker{transform:translate(-62%,22%)}
.opening.weg .licht{transform:translate(62%,-22%)}
.opening.weg .haal{opacity:0}
.opening.klaar{display:none}
@keyframes opLogo{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.opening{display:none}}

/* ---------- hero */
.hero{position:relative;min-height:min(100svh,62rem);max-height:100svh;color:#fff;background:var(--nacht);overflow:hidden;display:flex;align-items:flex-end}
.hero-beeld{position:absolute;inset:0}
.hero-beeld img,.hero-beeld video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-beeld video{opacity:0;transition:opacity .6s}
.hero-beeld video.speelt{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,13,36,.15) 0,rgba(7,13,36,0) 35%,rgba(7,13,36,.55) 70%,rgba(7,13,36,.92) 100%),
  linear-gradient(90deg,rgba(7,13,36,.55),rgba(7,13,36,0) 60%)}
.hero-tekst{position:relative;z-index:2;padding:7rem 0 calc(var(--schuin) + 2.5rem)}
.hero h1{font-size:clamp(2.6rem,7.4vw,7.2rem);max-width:12ch}
.hero h1 em{font-style:normal;color:var(--blauw)}
.hero-sub{font-size:clamp(1.05rem,1.4vw,1.3rem);max-width:36rem;margin:1.25rem 0 0;color:#dfe8f6}
.nu{display:inline-flex;align-items:center;gap:.6rem;margin:1.5rem 0 0;font-size:.98rem;color:#fff;background:rgba(7,13,36,.55);border-radius:999px;padding:.45rem .9rem .45rem .7rem}
.nu i{width:.6rem;height:.6rem;border-radius:50%;background:var(--licht);box-shadow:0 0 0 .3rem rgba(255,246,220,.18);flex-shrink:0}
.nu.uit i{background:#7d8aa6;box-shadow:none}
@media (max-width:700px){
  .hero{min-height:100svh;align-items:stretch;flex-direction:column}
  .hero-beeld{position:relative;inset:auto;height:52svh;flex-shrink:0}
  .hero-beeld img,.hero-beeld video{object-position:42% 50%}
  .hero::after{background:linear-gradient(180deg,rgba(7,13,36,0) 0,rgba(7,13,36,0) 38%,var(--nacht) 52%)}
  .hero-tekst{padding:0 0 calc(var(--schuin) + 2rem);margin-top:-4.5rem}
}
@media (orientation:landscape) and (max-height:520px){
  .hero{min-height:100svh}.hero-tekst{padding:5rem 0 3rem}.hero h1{font-size:min(9vw,15svh)}.hero-sub{display:none}.knoppen{margin-top:1rem}
}

/* ---------- secties en de schuine haal */
.sectie{position:relative;padding:clamp(4.5rem,9vw,9rem) 0}
.schuin{clip-path:polygon(0 var(--schuin),100% 0,100% 100%,0 100%);margin-top:calc(-1 * var(--schuin));padding-top:calc(clamp(4.5rem,9vw,9rem) + var(--schuin))}
.sectie.nacht{background:var(--nacht);color:#fff}
.sectie.navy{background:var(--navy);color:#fff}
.sectie.blauw{background:var(--blauw);color:#04112c}
.sectie.blauw .label{color:#04112c}
.sectie.wit{background:#fff}
.sectie.ijs{background:var(--ijs)}
.sectie h2{font-size:clamp(2.2rem,5.4vw,5rem);max-width:16ch}
.sectie h2+p,.intro{font-size:clamp(1.05rem,1.3vw,1.25rem);max-width:40rem;margin:1.25rem 0 0}
.nacht .intro,.navy .intro{color:#c9d4ea}
.kopregel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2rem 4rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.kopregel .intro{margin:0}
@media (max-width:860px){.kopregel{grid-template-columns:1fr}}

/* ---------- signatuur: het gebouw van uw week */
.week{display:grid;grid-template-columns:minmax(0,25rem) minmax(0,1fr);gap:clamp(2rem,4vw,4.5rem);align-items:start}
.week-bedien fieldset{border:0;padding:0;margin:0 0 1.75rem}
.week-bedien legend{font-family:var(--kop);font-weight:600;font-size:1.05rem;margin-bottom:.7rem;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{min-height:44px;padding:.5rem .95rem;border-radius:999px;border:0;background:rgba(255,255,255,.08);color:#dfe8f6;font:500 .95rem var(--tekst);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.chip[aria-pressed=true]{background:var(--blauw);color:#04112c;box-shadow:none;font-weight:600}
.ruimte{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.55rem 0;border-top:1px solid rgba(255,255,255,.1)}
.ruimte:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.ruimte span{font-size:.98rem}
.ruimte span small{display:block;color:#8c9ab8;font-size:.82rem}
.stap{display:flex;align-items:center;gap:.25rem}
.stap button{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font:600 1.25rem/1 var(--tekst);cursor:pointer}
.stap button:hover{background:rgba(255,255,255,.2)}
.stap output{min-width:2.4rem;text-align:center;font-family:var(--kop);font-weight:700;font-size:1.3rem}
.week-gevel{position:relative}
.gevel-svg{height:min(76svh,46rem);width:auto;max-width:100%;aspect-ratio:var(--gevel-ar,620/700);border-radius:.4rem;margin-inline:auto}
@media (max-width:960px){.gevel-svg{width:100%;height:auto}}
.gevel-svg .lucht-stop1,.gevel-svg .lucht-stop2{transition:stop-color .8s}
.gevel-svg .raam{cursor:pointer;transition:fill .45s}
.gevel-svg .raam.aan{fill:url(#licht)}
.gevel-svg .raam:hover{stroke:var(--blauw);stroke-width:3}
.gevel-svg text{font-family:var(--kop);font-weight:600;fill:#c9d4ea}
.gevel-svg .vloer-naam{font-family:var(--tekst);font-weight:500;fill:#fff}
.week-som{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14)}
.week-som p{margin:0;font-size:1.1rem;max-width:34rem}
.week-som strong{font-family:var(--kop);font-size:1.35rem;color:var(--blauw)}
.week-noot{font-size:.85rem;color:#8c9ab8;margin:.9rem 0 0}
@media (max-width:960px){.week{grid-template-columns:1fr}.week-gevel{order:-1}}

/* ---------- diensten-index */
.index{list-style:none;padding:0;margin:0;border-top:1px solid var(--lijn)}
.index li{border-bottom:1px solid var(--lijn)}
.index a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) auto;gap:.5rem 3rem;align-items:baseline;padding:1.6rem 0;text-decoration:none;transition:padding .3s}
.index h3{font-size:clamp(1.5rem,2.6vw,2.4rem)}
.index p{margin:0;color:var(--grijs)}
.index .pijl{width:1.6rem;height:1.6rem;align-self:center;color:var(--blauw);transition:transform .3s}
.index a:hover .pijl{transform:translateX(.4rem)}
.index a:hover h3{color:var(--navy)}
.groep-kop{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:3.5rem 0 .5rem}
.groep-kop:first-child{margin-top:0}
.groep-kop h3{font-size:1.15rem;font-weight:600;color:var(--grijs);letter-spacing:.02em}
@media (max-width:760px){.index a{grid-template-columns:minmax(0,1fr) auto}.index p{grid-column:1/-1;grid-row:2}}

/* ---------- glas: film + telescoopsteel */
.film{position:relative;overflow:hidden;border-radius:.4rem;background:#1a2235}
.film::before{content:"";display:block;padding-top:56.25%}
.film img,.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film video{opacity:0;transition:opacity .5s}.film video.speelt{opacity:1}
.glas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center;margin-top:clamp(3rem,6vw,5rem)}
.steel{display:flex;flex-direction:column;align-items:center;gap:1rem}
.steel-svg{height:min(68svh,36rem);width:auto;max-width:100%;aspect-ratio:410/520}
.steel-schuif{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;width:min(100%,26rem);font-family:var(--kop);font-weight:600}
.steel-schuif input{width:100%;height:44px;accent-color:var(--navy);touch-action:pan-y;cursor:ew-resize}
.steel-uit{font-family:var(--kop);font-weight:700;font-size:clamp(3rem,6vw,5.5rem);line-height:.9;color:var(--navy)}
.steel-uit small{font-size:.4em}
.steel-lees{font-size:1.15rem;margin:.75rem 0 0}
.feitjes{list-style:none;padding:0;margin:2rem 0 0}
.feitjes li{position:relative;padding:.7rem 0 .7rem 2rem;border-top:1px solid rgba(4,17,44,.15)}
.feitjes li::before{content:"";position:absolute;left:0;top:1.25rem;width:1rem;height:.55rem;background:var(--navy);transform:skewX(-34deg)}
@media (max-width:860px){.glas{grid-template-columns:1fr}.steel-svg{max-height:60svh}}
@media (max-width:860px){.steel-svg{width:100%;height:auto}.glas .steel{order:-1}}

/* ---------- vloeren: poetsen */
.vloer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.vloer-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:2rem 0 0}
.vloer-tab{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:.5rem;border:0;border-radius:.6rem;background:rgba(255,255,255,.06);color:#dfe8f6;font:500 .92rem/1.25 var(--tekst);text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);min-height:44px}
.vloer-tab img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:.35rem}
.vloer-tab[aria-selected=true]{background:#fff;color:var(--inkt);box-shadow:none;font-weight:600}
.vloer-tab span{padding:0 .2rem .2rem}
.vloer-podium{position:relative;border-radius:.5rem;overflow:hidden;touch-action:pan-y;cursor:none;background:#222}
.vloer-podium::before{content:"";display:block;padding-top:100%}
.vloer-podium canvas{position:absolute;inset:0;width:100%;height:100%}
.vloer-pad{position:absolute;left:0;top:0;width:28%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 38%,rgba(255,255,255,.65) 39% 41%,rgba(255,255,255,0) 42% 64%,rgba(8,173,247,.9) 65% 70%,rgba(255,255,255,0) 71%);
  transform:translate(-50%,-50%);transition:opacity .3s}
.vloer-hint{position:absolute;left:1rem;bottom:1rem;right:1rem;margin:0;color:#fff;font-size:.9rem;background:rgba(7,13,36,.6);border-radius:999px;padding:.4rem .9rem;width:max-content;max-width:calc(100% - 2rem);pointer-events:none}
.vloer-methode{margin:1.5rem 0 0;font-size:1.05rem;min-height:3.4em}
.vloer-methode strong{font-family:var(--kop);font-size:1.25rem;display:block}
.vloer-meter{height:.35rem;background:rgba(255,255,255,.12);border-radius:1rem;margin-top:.9rem;overflow:hidden}
.vloer-meter i{display:block;height:100%;width:0;background:var(--blauw);transition:width .2s}
@media (max-width:860px){.vloer{grid-template-columns:1fr}.vloer-podium{max-width:34rem}}
@media (hover:none){.vloer-podium{cursor:auto}}

/* ---------- vaste mensen */
.mensen{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);align-items:start}
.citaat{font-family:var(--kop);font-weight:600;font-size:clamp(1.9rem,3.8vw,3.6rem);line-height:1.08;margin:0;text-wrap:balance}
.citaat b{color:var(--navy);font-weight:700}
.foto{margin:0;border-radius:.4rem;overflow:hidden;background:#ccd3de}
.foto img{width:100%;height:100%;object-fit:cover}
.drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 3rem;margin-top:clamp(3rem,6vw,5rem)}
.drie h3{font-size:1.4rem;margin-bottom:.6rem}
.drie p{margin:0 0 .6rem;color:var(--grijs)}
.drie a{font-weight:600;color:var(--navy)}
@media (max-width:860px){.mensen,.drie{grid-template-columns:1fr}}
@media (min-width:600px) and (max-width:860px){.drie{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- kwaliteit */
.keur{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:0;margin:0;border-top:1px solid var(--lijn)}
.keur dt,.keur dd{padding:1.2rem 0;border-bottom:1px solid var(--lijn);margin:0}
.keur dt{font-family:var(--kop);font-weight:700;font-size:1.25rem;padding-right:2rem}
.keur dd{color:var(--grijs)}
@media (max-width:640px){.keur{grid-template-columns:1fr}.keur dt{border-bottom:0;padding-bottom:0}}
.docs{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem}
.docs a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem 1rem;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--lijn);text-decoration:none;font-weight:500}
.docs a:hover{box-shadow:inset 0 0 0 1.5px var(--navy)}

/* ---------- particulier (volle merkkleur) */
.thuis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.thuis-twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;margin-top:2rem}
.thuis-twee h3{font-size:1.6rem;margin-bottom:.5rem}
.thuis-twee p{margin:0 0 1rem}
.thuis-twee a{font-weight:600}
@media (max-width:860px){.thuis{grid-template-columns:1fr}}
@media (max-width:520px){.thuis-twee{grid-template-columns:1fr}}

/* ---------- werken bij */
.vac{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:1rem}
.vac a{display:block;padding:clamp(1.5rem,3vw,2.5rem);border-radius:.5rem;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);text-decoration:none;transition:background .25s}
.vac a:hover{background:rgba(255,255,255,.12)}
.vac h3{font-size:clamp(1.6rem,2.6vw,2.4rem);margin-bottom:.8rem}
.vac p{margin:0;color:#c9d4ea}
.vac .tijden{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem}
.vac .tijden span{font-family:var(--kop);font-weight:600;background:var(--blauw);color:#04112c;border-radius:.3rem;padding:.15rem .55rem}
@media (max-width:760px){.vac{grid-template-columns:1fr}}

/* ---------- contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(2rem,5vw,5rem)}
.adressen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.adressen h3{font-size:1.15rem;margin-bottom:.4rem}
.adressen p{margin:0;color:var(--grijs)}
.groot-tel{display:block;font-family:var(--kop);font-weight:700;font-size:clamp(2.2rem,5vw,4.4rem);line-height:1;text-decoration:none;color:var(--navy);margin:.5rem 0 1rem;white-space:nowrap;min-height:44px;display:flex;align-items:center}
.groot-tel:hover{color:var(--blauw)}
.bereik{display:inline-flex;align-items:center;gap:.55rem;font-weight:500}
.bereik i{width:.6rem;height:.6rem;border-radius:50%;background:#1eb24c}
.bereik.dicht i{background:#b8c0cf}
@media (max-width:960px){.contact{grid-template-columns:1fr}}
@media (max-width:640px){.adressen{grid-template-columns:1fr}}

/* ---------- voet */
.voet{background:var(--nacht);color:#c9d4ea;padding:clamp(4rem,8vw,7rem) 0 2rem;clip-path:polygon(0 var(--schuin),100% 0,100% 100%,0 100%);margin-top:calc(-1 * var(--schuin))}
.voet-in{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:2.5rem}
.voet img{height:3.4rem;width:auto;margin-bottom:1.25rem}
.voet h3{font-size:1rem;color:#fff;margin-bottom:.8rem}
.voet ul{list-style:none;padding:0;margin:0}
.voet li a{display:inline-flex;min-height:36px;align-items:center;text-decoration:none}
.voet a:hover{color:#fff}
.voet p{margin:0 0 .4rem}
.voet-onder{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);font-size:.9rem}
.voet-onder a{text-decoration:none}
@media (max-width:860px){.voet-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.voet-in{grid-template-columns:1fr}}

/* ---------- subpagina's */
.pkop{position:relative;background:var(--nacht);color:#fff;padding:clamp(4rem,9vw,8rem) 0 calc(clamp(3rem,6vw,5rem) + var(--schuin));overflow:hidden}
.pkop h1{font-size:clamp(2.6rem,6.4vw,6rem);max-width:15ch}
.pkop .intro{color:#c9d4ea}
.pkop-beeld{position:absolute;inset:0;opacity:.38}
.pkop-beeld img{width:100%;height:100%;object-fit:cover}
.pkop::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--nacht) 0,rgba(7,13,36,.6) 55%,rgba(7,13,36,.2));pointer-events:none}
.pkop .wrap{position:relative;z-index:2}
.kruimel{font-size:.9rem;color:#8c9ab8;margin:0 0 1.5rem}
.kruimel a{text-decoration:none}.kruimel a:hover{color:#fff}
.inhoud{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);align-items:start}
.inhoud p{margin:0 0 1.1rem;font-size:1.08rem}
.inhoud .eerste{font-size:clamp(1.15rem,1.5vw,1.35rem)}
.lijst h3{font-size:1.3rem;margin:0 0 .6rem}
.lijst ul{list-style:none;padding:0;margin:0 0 2rem}
.lijst li{position:relative;padding:.55rem 0 .55rem 1.8rem;border-top:1px solid var(--lijn)}
.lijst li::before{content:"";position:absolute;left:0;top:1.05rem;width:.9rem;height:.5rem;background:var(--blauw);transform:skewX(-34deg)}
.zij{position:sticky;top:6rem}
.zij .foto{aspect-ratio:4/3;margin-bottom:1.5rem}
.cta{background:var(--navy);color:#fff;border-radius:.5rem;padding:1.75rem}
.cta h3{font-size:1.5rem;margin-bottom:.6rem}
.cta p{margin:0 0 1rem;color:#c9d4ea}
@media (max-width:900px){.inhoud{grid-template-columns:1fr}.zij{position:static}}
.waarden{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;list-style:none;padding:0;margin:2rem 0 0;font-family:var(--kop);font-weight:600;font-size:clamp(1.3rem,2.4vw,2.1rem);line-height:1.2}
.waarden li{display:inline-flex;align-items:baseline;gap:.6rem}
.waarden li::after{content:"";width:.7rem;height:.38rem;background:var(--blauw);transform:skewX(-34deg)}
.waarden li:last-child::after{display:none}
.tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--lijn)}
.tegels>div{padding:1.4rem 1.5rem 1.4rem 0;border-bottom:1px solid var(--lijn)}
.tegels h3{font-size:1.25rem;margin-bottom:.4rem}
.tegels p{margin:0;color:var(--grijs);font-size:.98rem}
@media (max-width:860px){.tegels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.tegels{grid-template-columns:1fr}}

/* ---------- formulieren */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.25rem}
.form .vol{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:.35rem;font-weight:500;font-size:.95rem}
.form input,.form select,.form textarea{font:inherit;font-size:1rem;padding:.8rem .9rem;border:1.5px solid var(--lijn);border-radius:.5rem;background:#fff;color:var(--inkt);min-height:48px;width:100%}
.form textarea{min-height:8rem;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blauw)}
.form fieldset{border:0;padding:0;margin:0}
.form legend{font-weight:600;margin-bottom:.5rem}
.vink{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1rem}
.vink label{flex-direction:row;align-items:flex-start;gap:.6rem;font-weight:400;min-height:44px;padding:.5rem 0}
.vink input{width:1.2rem;height:1.2rem;min-height:0;margin-top:.15rem;accent-color:var(--navy);flex-shrink:0}
.form-noot{font-size:.88rem;color:var(--grijs);margin:0}
@media (max-width:640px){.form,.vink{grid-template-columns:1fr}}
.juridisch h2{font-size:1.6rem;margin:2.2rem 0 .6rem}
.juridisch p,.juridisch li{max-width:46rem}

/* ---------- inloop */
.rv{opacity:0;transform:translateY(1.5rem);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}
/* tikdoelen ≥ 44 px voor losse tekstlinks */
.drie a,.thuis-twee a,.voet-onder a,.voet li a,.docs a{display:inline-flex;align-items:center;min-height:44px}
.voet p a,.contact p a{display:inline-flex;align-items:center;min-height:44px}
.form select{-webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%230a1226' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .9rem center;padding-right:2.4rem}
.vloer-tab span{hyphens:auto;overflow-wrap:anywhere}
@media (max-width:420px){.vloer-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pkop h1{hyphens:manual}