@charset "utf-8";

/* =========================================================================
   Twan Kanters v2 — wit, ruim, met de drie pictogrammen uit het logo als
   ingang naar de diensten.
   ====================================================================== */

:root{
  --wit:#FFFFFF;
  --zand:#F7F4EF;
  --zand-2:#EFE9E0;
  --lijn:rgba(20,22,26,.10);
  --inkt:#14161A;
  --zacht:#5B6069;
  --zacht-2:#8C929B;
  --rood:#CE1141;
  --rood-licht:#E31B4B;
  --rood-mist:rgba(206,17,65,.08);
  --wa:#25D366;

  --r:20px;
  --r-klein:12px;
  --pil:999px;
  --schaduw:0 2px 6px rgba(20,22,26,.04),0 14px 32px -14px rgba(20,22,26,.18);
  --schaduw-hoog:0 6px 12px rgba(20,22,26,.05),0 28px 56px -18px rgba(20,22,26,.26);

  --display:'Familjen Grotesk',system-ui,sans-serif;
  --body:'Inter Tight',system-ui,sans-serif;

  --marge:clamp(20px,4vw,48px);
  --max:1200px;
  --soepel:cubic-bezier(.16,1,.3,1);
  --stuiter:cubic-bezier(.34,1.4,.5,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--wit);color:var(--inkt);font-family:var(--body);
  font-size:clamp(16px,.95rem + .2vw,17.5px);line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--rood);text-decoration:none}
a:hover{color:var(--rood-licht)}
:focus-visible{outline:2px solid var(--rood);outline-offset:3px;border-radius:6px}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
[hidden]{display:none!important}
.omhulsel{max-width:var(--max);margin:0 auto;padding-inline:var(--marge)}
.verborgen{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:999;background:var(--inkt);color:#fff;
  padding:12px 18px;border-radius:var(--r-klein)}

/* ---------- typografie ---------- */
.kop1,.kop2,.kop3{font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  line-height:1.04;margin:0;color:var(--inkt);text-wrap:balance}
.kop1{font-size:clamp(2.3rem,5.4vw,4rem)}
.kop2{font-size:clamp(1.8rem,3.6vw,2.9rem)}
.kop3{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.25}
.opmaat{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;
  font-size:.84rem;font-weight:500;color:var(--rood)}
.opmaat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rood)}
.inleiding{font-size:clamp(1.05rem,1.2vw,1.25rem);line-height:1.6;color:var(--zacht);
  max-width:56ch;margin:22px 0 0}
.fijn{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:.92rem;color:var(--zacht-2)}
.fijn svg{flex:none;color:var(--rood)}
.fijn--los{display:flex;margin-top:28px;padding-top:20px;box-shadow:inset 0 1px 0 var(--lijn)}

.tekst p{font-size:1.05rem;line-height:1.75;color:var(--zacht);margin:0 0 1.15em}
.tekst h2{font-family:var(--display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.4rem,2.2vw,1.8rem);margin:2em 0 .55em;color:var(--inkt)}
.tekst h3{font-family:var(--display);font-weight:700;font-size:1.15rem;margin:1.7em 0 .45em}
.tekst ul{margin:0 0 1.4em;padding:0;list-style:none}
.tekst ul li{position:relative;padding-left:28px;margin-bottom:.65em;color:var(--zacht)}
.tekst ul li::before{content:"";position:absolute;left:4px;top:.68em;width:9px;height:2px;
  border-radius:2px;background:var(--rood)}
.tekst > :last-child{margin-bottom:0}
.tekst--smal{max-width:68ch}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 24px;min-height:54px;border-radius:var(--pil);font-size:1rem;font-weight:600;
  white-space:nowrap;transition:transform .25s var(--soepel),background .25s,color .25s,box-shadow .25s}
.knop:hover{transform:translateY(-2px)}
.knop--rood{background:var(--rood);color:#fff;box-shadow:0 8px 22px -10px rgba(206,17,65,.65)}
.knop--rood:hover{background:var(--rood-licht);color:#fff}
.knop--lijn{color:var(--inkt);box-shadow:inset 0 0 0 1.5px var(--lijn)}
.knop--lijn:hover{color:var(--inkt);box-shadow:inset 0 0 0 1.5px var(--inkt)}
.knop--vol{width:100%}
.knoprij{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- kop ---------- */
/* De achtergrond van de balk zit in een pseudo-element. Zet je backdrop-filter op .kop zelf,
   dan wordt die een containing block en blijft het mobiele menu opgesloten in de balk. */
.kop{position:sticky;top:0;z-index:200;box-shadow:inset 0 -1px 0 var(--lijn);
  transition:box-shadow .4s}
.kop__binnen{position:relative;z-index:2}
.kop__binnen::before{content:"";position:absolute;inset:0 calc(var(--marge) * -1);z-index:-1;
  background:rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(160%)}
.kop.los{box-shadow:inset 0 -1px 0 var(--lijn),0 10px 30px -18px rgba(20,22,26,.55)}
.kop__binnen{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:14px}
.merk img{height:44px;width:auto}
.menu{margin-left:auto}
.menu__lijst{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.menu__lijst a{display:flex;padding:10px 16px;border-radius:var(--pil);font-size:.98rem;font-weight:500;
  color:var(--zacht);transition:color .2s,background .2s}
.menu__lijst a:hover{color:var(--inkt);background:rgba(20,22,26,.05)}
.menu .current-menu-item > a,.menu .current_page_item > a{color:var(--inkt);background:rgba(20,22,26,.07)}
.menu__acties{display:none}
.kop__acties{position:relative;z-index:3;display:flex;align-items:center;gap:10px}
.merk{position:relative;z-index:3}
.beltje{position:relative;display:inline-flex;align-items:center;gap:9px;
  background:var(--rood);color:#fff;padding:11px 20px;border-radius:var(--pil);
  font-size:.94rem;font-weight:600;white-space:nowrap;overflow:hidden;
  box-shadow:0 8px 20px -10px rgba(206,17,65,.8);
  transition:rotate .35s var(--stuiter),scale .35s var(--stuiter),background .25s}
.beltje::before{content:"";position:absolute;inset:0;translate:-110% 0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transition:translate .7s var(--soepel)}
.beltje:hover{background:var(--rood-licht);color:#fff;rotate:-2deg;scale:1.04}
.beltje:hover::before{translate:110% 0}
.beltje__hoorn{display:grid;place-items:center}
.beltje:hover .beltje__hoorn{animation:tk-rinkel .6s ease-in-out}
@keyframes tk-rinkel{
  0%,100%{rotate:0deg}
  20%{rotate:-18deg}40%{rotate:14deg}60%{rotate:-10deg}80%{rotate:6deg}}
.menuknop{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;background:var(--inkt);color:#fff}
.menuknop__lijnen{position:relative;display:block;width:18px;height:12px}
.menuknop__lijnen i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:currentColor;transition:transform .4s var(--soepel),width .4s var(--soepel)}
.menuknop__lijnen i:nth-child(1){top:0}
.menuknop__lijnen i:nth-child(2){bottom:0;width:70%}
.menuknop[aria-expanded="true"]{background:var(--rood)}
.menuknop[aria-expanded="true"] i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menuknop[aria-expanded="true"] i:nth-child(2){width:100%;transform:translateY(-5px) rotate(-45deg)}

@media(max-width:900px){
  .menuknop{display:inline-flex}
  .menu{position:fixed;inset:0;margin:0;background:var(--wit);z-index:1;
    display:flex;flex-direction:column;
    padding:calc(env(safe-area-inset-top,0px) + 92px) var(--marge)
      calc(env(safe-area-inset-bottom,0px) + 28px);
    overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .35s var(--soepel),transform .45s var(--soepel),visibility .35s}
  .menu.open{opacity:1;visibility:visible;transform:none}
  .menu__lijst{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .menu__lijst li{width:100%}
  .menu__lijst a{padding:18px 4px;font-family:var(--display);font-weight:700;
    font-size:clamp(1.6rem,7vw,2.2rem);color:var(--inkt);border-radius:0;
    box-shadow:inset 0 -1px 0 var(--lijn)}
  .menu__acties{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:30px}
  .menu__adres{margin:12px 0 0;font-size:.92rem;color:var(--zacht-2);text-align:center}
  body.menu-open{overflow:hidden}
}

/* =========================================================================
   Hero
   ====================================================================== */
.hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  isolation:isolate;min-height:clamp(560px,86svh,860px);background:var(--inkt);overflow:hidden;
  padding:clamp(96px,14vh,150px) 0 clamp(170px,22vh,240px)}
.hero__beeld{position:absolute;inset:-8% 0;z-index:-2;will-change:transform}
.hero__beeld img{width:100%;height:100%;object-fit:cover}
.hero__waas{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(12,13,16,.78) 0%,rgba(12,13,16,.52) 42%,
    rgba(12,13,16,.24) 74%,rgba(12,13,16,.4) 100%)}
/* onderin loopt het beeld weg in de achtergrond, maar minder ver dan eerst */
.hero__waas::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--inkt) 0%,rgba(20,22,26,.6) 14%,rgba(20,22,26,0) 42%)}

/* --- achtergrondvideo --- */
.hero__film{position:absolute;inset:0;z-index:-3;overflow:hidden;background:var(--inkt)}
.hero__film iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border:0;pointer-events:none;
  width:max(116vw,200vh);height:max(66vw,113vh)}
@supports (container-type:size){
  .hero__film{container-type:size}
  .hero__film iframe{width:max(116cqw,200cqh);height:max(66cqw,113cqh)}
}
/* de foto blijft eronder liggen als eerste beeld tot de video draait */
.hero--beeld .hero__beeld{z-index:-4}
.hero:not(.hero--beeld) .hero__waas{
  background:radial-gradient(76% 86% at 8% 6%,rgba(206,17,65,.5),transparent 60%),
    radial-gradient(60% 70% at 92% 96%,rgba(206,17,65,.22),transparent 62%),
    linear-gradient(150deg,#1D2028 0%,#101216 62%)}

.hero__binnen{position:relative;width:100%;max-width:var(--max);margin-inline:auto;
  display:flex;flex-direction:column;align-items:flex-start}
.hero__label{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;
  font-size:.82rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  padding:9px 18px;border-radius:var(--pil);background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.hero__label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rood-licht);
  box-shadow:0 0 0 0 rgba(227,27,75,.6);animation:tk-puls 2.6s ease-out infinite}
@keyframes tk-puls{0%{box-shadow:0 0 0 0 rgba(227,27,75,.55)}
  70%{box-shadow:0 0 0 10px rgba(227,27,75,0)}100%{box-shadow:0 0 0 0 rgba(227,27,75,0)}}

.hero__titel{margin:0;max-width:18ch;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4);font-family:var(--display);font-weight:700;
  letter-spacing:-.038em;line-height:1;font-size:clamp(2.3rem,5.8vw,4.6rem)}
.hero__tekst{margin:24px 0 0;max-width:50ch;text-shadow:0 1px 12px rgba(0,0,0,.6);font-size:clamp(1.02rem,1.2vw,1.22rem);
  line-height:1.6;color:rgba(255,255,255,.8)}
.hero__knoppen{margin-top:36px}
.knop--glas{color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.knop--glas:hover{background:#fff;color:var(--inkt);box-shadow:none}

/* =========================================================================
   Diensten: kaarten die half over de hero heen vallen
   ====================================================================== */
.diensten{position:relative;z-index:2;scroll-margin-top:120px;
  margin-top:clamp(-190px,-16vw,-120px);
  padding-bottom:clamp(72px,9vw,120px)}
.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:clamp(18px,2.4vw,28px);align-items:stretch}

.kaart{--schijf:clamp(70px,7vw,84px);
  position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  padding:0 0 clamp(26px,3vw,34px);overflow:hidden;
  border-radius:var(--r);background:var(--wit);
  box-shadow:0 2px 6px rgba(20,22,26,.05),0 24px 50px -22px rgba(20,22,26,.4);
  transition:transform .5s var(--soepel),box-shadow .5s}
.kaart::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--lijn);transition:box-shadow .5s}
.kaart:hover{transform:translateY(-8px);
  box-shadow:0 4px 10px rgba(20,22,26,.05),0 36px 70px -26px rgba(20,22,26,.5)}
.kaart:hover::before{box-shadow:inset 0 0 0 1px rgba(206,17,65,.28)}

.kaart__beeld{display:block;width:100%;overflow:hidden;background:var(--zand)}
.kaart__beeld img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform .8s var(--soepel)}
.kaart:hover .kaart__beeld img{transform:scale(1.05)}

.kaart__schijf{position:relative;z-index:1;display:block;
  width:var(--schijf);height:var(--schijf);margin:calc(var(--schijf) / -2) 0 18px
    clamp(20px,2.4vw,28px);border-radius:22px;background:#fff;padding:9px;
  box-shadow:0 10px 26px -12px rgba(20,22,26,.45);
  transition:box-shadow .5s,rotate .6s var(--stuiter),scale .6s var(--stuiter),
    border-radius .5s var(--soepel)}
.kaart:hover .kaart__schijf{box-shadow:0 16px 32px -12px rgba(206,17,65,.55);
  scale:1.05;rotate:-5deg;border-radius:50%}
.pictogram{width:100%;height:100%;display:block;object-fit:contain;aspect-ratio:1}

.kaart__nr{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.06em;
  color:var(--rood)}
.kaart__titel{margin:0 clamp(20px,2.4vw,28px);font-family:var(--display);font-weight:700;
  letter-spacing:-.025em;font-size:clamp(1.1rem,1.5vw,1.28rem);line-height:1.2;text-wrap:balance;
  hyphens:auto}
.kaart__kort{margin:10px clamp(20px,2.4vw,28px) 24px;font-size:1rem;line-height:1.65;
  color:var(--zacht)}
.kaart__link{margin-left:clamp(20px,2.4vw,28px);margin-right:clamp(20px,2.4vw,28px)}
.kaart__link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;
  font-weight:600;font-size:.96rem;color:var(--rood)}
.kaart__link span{box-shadow:inset 0 -1px 0 rgba(206,17,65,.3);transition:box-shadow .3s}
.kaart__link svg{transition:transform .35s var(--soepel)}
.kaart:hover .kaart__link span{box-shadow:inset 0 -1px 0 var(--rood)}
.kaart:hover .kaart__link svg{transform:translateX(5px)}

.diensten__onder{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 30px;margin-top:clamp(34px,4vw,52px);padding-top:24px;
  box-shadow:inset 0 1px 0 var(--lijn)}
.tekstlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--inkt)}
.tekstlink svg{transition:transform .35s var(--soepel);color:var(--rood)}
.tekstlink:hover{color:var(--rood)}
.tekstlink:hover svg{transform:translateX(5px)}

/* de val, alleen bij het eerste bezoek van de sessie */
.tk-eerste .kaart__schijf{animation:tk-val 1.05s var(--stuiter) backwards;
  animation-delay:calc(.35s + var(--beurt,1) * .17s)}
@keyframes tk-val{
  0%{opacity:0;transform:translateY(-70vh);rotate:-12deg}
  55%{opacity:1}
  100%{opacity:1;transform:translateY(0);rotate:0deg}}
.tk-eerste .kaart{animation:tk-kaart-op .8s var(--soepel) backwards;
  animation-delay:calc(.2s + var(--beurt,1) * .17s)}
@keyframes tk-kaart-op{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.tk-eerste .kaart__nr,.tk-eerste .kaart__titel,.tk-eerste .kaart__kort,.tk-eerste .kaart__link{
  animation:tk-op .7s var(--soepel) backwards;
  animation-delay:calc(.85s + var(--beurt,1) * .17s)}
@keyframes tk-op{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* =========================================================================
   Werkwijze
   ====================================================================== */
.werkwijze{padding-top:0}
.sporen{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(24px,3vw,44px);list-style:none;margin:0;padding:0}
.spoor{position:relative;padding-top:34px}
.spoor::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--lijn)}
.spoor::after{content:"";position:absolute;top:0;left:0;width:0;height:2px;background:var(--rood);
  transition:width .8s var(--soepel)}
.spoor.zichtbaar::after{width:38%}
.spoor:hover::after{width:100%}
.spoor__kop{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.spoor__icoon{display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:50%;
  background:var(--rood-mist);color:var(--rood);
  transition:background .4s,color .4s,rotate .5s var(--stuiter),scale .5s var(--stuiter)}
.spoor:hover .spoor__icoon{background:var(--rood);color:#fff;rotate:-7deg;scale:1.06}
.spoor__nr{font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.06em;
  color:var(--zacht-2);transition:color .4s}
.spoor:hover .spoor__nr{color:var(--rood)}
.spoor .kop3{margin:0 0 8px}
.spoor p{margin:0;font-size:1rem;line-height:1.65;color:var(--zacht)}

/* ---------- blokken ---------- */
.blok{padding:clamp(72px,10vw,136px) 0;scroll-margin-top:96px}
.blok--zand{background:var(--zand)}
.blokkop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:18px 40px;margin-bottom:clamp(36px,4.5vw,60px)}
.blokkop > div{max-width:34ch}

/* ---------- paginakop ---------- */
.paginakop{position:relative;overflow:hidden;background:var(--zand);
  padding:clamp(64px,8vw,110px) 0 clamp(44px,5vw,72px)}
.paginakop::before{content:"";position:absolute;top:-40%;right:-10%;width:52%;height:180%;
  background:radial-gradient(closest-side,var(--rood-mist),transparent 70%);pointer-events:none}
.paginakop > *{position:relative}
.paginakop--dienst .kop1{margin-top:20px;font-size:clamp(1.9rem,4.2vw,3.1rem);
  max-width:22ch}
.paginakop__schijf{display:block;width:88px;height:88px;aspect-ratio:1;
  filter:drop-shadow(0 16px 30px rgba(206,17,65,.4))}
.kruimels{font-size:.88rem;color:var(--zacht-2);margin-bottom:18px}
.kruimels a{color:var(--zacht-2)}
.kruimels a:hover{color:var(--rood)}

/* ---------- dienstenrijen ---------- */
.rijen{display:flex;flex-direction:column;gap:12px}
.rij{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);
  padding:clamp(18px,2.4vw,26px);border-radius:var(--r);background:var(--wit);
  color:var(--inkt);box-shadow:inset 0 0 0 1px var(--lijn);
  transition:transform .4s var(--soepel),box-shadow .4s}
.rij:hover{color:var(--inkt);transform:translateX(6px);
  box-shadow:inset 0 0 0 1px transparent,var(--schaduw-hoog)}
.rij__beeld{display:block;width:clamp(120px,16vw,190px);flex:none;border-radius:14px;
  overflow:hidden;background:var(--zand)}
.rij__beeld img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block;
  transition:transform .7s var(--soepel)}
.rij:hover .rij__beeld img{transform:scale(1.06)}
.rij__schijf{display:block;width:62px;height:62px;aspect-ratio:1;flex:none;
  transition:transform .5s var(--stuiter)}
@media(max-width:640px){.rij__beeld{width:100%;order:-1}}
.rij:hover .rij__schijf{transform:scale(1.06) rotate(-5deg)}
.rij{position:relative;overflow:hidden}
.rij::after{content:"";position:absolute;left:0;top:50%;width:4px;height:0;
  background:var(--rood);border-radius:0 4px 4px 0;transform:translateY(-50%);
  transition:height .5s var(--soepel)}
.rij:hover::after{height:62%}
.rij__tekst{display:flex;flex-direction:column;gap:4px}
.rij__nr{font-family:var(--display);font-weight:700;font-size:.82rem;color:var(--rood)}
.rij__titel{font-family:var(--display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.2;text-wrap:balance}
.rij__kort{font-size:1rem;color:var(--zacht);max-width:52ch}
.rij__pijl{display:grid;place-items:center;width:52px;height:52px;flex:none;margin-left:auto;
  border-radius:50%;background:var(--zand);color:var(--inkt);
  transition:background .35s,color .35s}
.rij:hover .rij__pijl{background:var(--rood);color:#fff}
@media(max-width:640px){
  .rij{flex-wrap:wrap}
  .rij__schijf{width:58px;height:58px}
  .rij__pijl{width:46px;height:46px}
}

/* ---------- dienstdetail ---------- */
.detail{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(270px,.85fr);
  gap:clamp(32px,4vw,64px);align-items:start}
@media(max-width:960px){.detail{grid-template-columns:1fr}}
.detail__foto{margin:0 0 32px;border-radius:var(--r);overflow:hidden}
.detail__foto img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.zijkant{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px}
@media(max-width:960px){.zijkant{position:static}}
.zijblok{padding:26px;border-radius:var(--r);background:var(--zand)}
.zijblok p{margin:12px 0 18px;font-size:.96rem;line-height:1.6;color:var(--zacht)}
.zijblok .kop3 + .knop{margin-top:18px}
.zijblok .knop + .knop{margin-top:8px}
.zijblok--links{display:flex;flex-direction:column;gap:6px}
.zijblok--links a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-klein);
  color:var(--inkt);font-size:.98rem;transition:background .25s}
.zijblok--links a:hover{background:var(--wit)}
.zijblok--links a svg:last-child{margin-left:auto;color:var(--rood)}
.zijlink__icoon{display:block;width:44px;height:44px;aspect-ratio:1;flex:none}

/* ---------- ons bedrijf ---------- */
.bedrijf{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:900px){.bedrijf{grid-template-columns:1fr}}
.bedrijf__foto{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw-hoog)}
.bedrijf__foto img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .8s var(--soepel)}
.bedrijf__foto:hover img{transform:scale(1.04)}
.punten{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(18px,2.6vw,34px);margin-top:clamp(44px,6vw,72px)}
.punt{padding-top:22px;box-shadow:inset 0 2px 0 var(--lijn);transition:box-shadow .4s}
.punt:hover{box-shadow:inset 0 2px 0 var(--rood)}
.punt svg{color:var(--rood);margin-bottom:12px;transition:transform .4s var(--stuiter)}
.punt:hover svg{transform:scale(1.15) rotate(-6deg)}
.punt p{margin:6px 0 0;font-size:.96rem;line-height:1.6;color:var(--zacht)}

/* ---------- werkgebied ---------- */
.werkgebied{position:relative;overflow:hidden;padding:clamp(30px,4.5vw,56px);
  border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw)}
.werkgebied::before{content:"";position:absolute;top:-30%;right:-6%;width:38%;height:160%;
  background:radial-gradient(closest-side,var(--rood-mist),transparent 72%)}
.werkgebied > *{position:relative}
.blok--zand .werkgebied{background:var(--wit)}
.werkgebied__groot{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2.4vw,32px);
  margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1;
  font-size:clamp(2rem,5vw,3.8rem)}
.werkgebied__groot span{transition:color .3s}
.werkgebied__groot span:hover{color:var(--rood)}
.werkgebied__groot i{width:10px;height:10px;border-radius:50%;background:var(--rood);flex:none}
.werkgebied__rest{display:flex;flex-wrap:wrap;gap:6px 0;list-style:none;margin:24px 0 0;padding:0}
.werkgebied__rest li{position:relative;padding-right:16px;margin-right:10px;
  font-size:1rem;color:var(--zacht);transition:color .25s}
.werkgebied__rest li::after{content:"";position:absolute;right:0;top:50%;width:4px;height:4px;
  border-radius:50%;background:var(--lijn);transform:translateY(-50%)}
.werkgebied__rest li:last-child::after{display:none}
.werkgebied__rest li:hover{color:var(--inkt)}
.werkgebied__slot{color:var(--zacht-2)!important;font-style:italic}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(24px,4vw,56px);align-items:start}
.kaartje{padding:clamp(26px,3vw,40px);border-radius:var(--r);background:var(--zand)}
.adres{font-style:normal;font-size:1.1rem;line-height:1.9;color:var(--inkt)}
.adres strong{display:block;font-family:var(--display);font-weight:700;font-size:1.25rem;
  letter-spacing:-.02em;margin-bottom:4px}
.grootnr{display:inline-block;margin:6px 0 22px;font-family:var(--display);font-weight:700;
  letter-spacing:-.04em;font-size:clamp(2rem,4vw,2.8rem);line-height:1.05;color:var(--inkt)}
.grootnr:hover{color:var(--rood)}
.gegevens{display:flex;flex-direction:column;margin:26px 0 0}
.gegevens > div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;
  box-shadow:inset 0 -1px 0 var(--lijn)}
.gegevens dt{margin:0;font-size:.92rem;color:var(--zacht-2)}
.gegevens dd{margin:0;font-size:1rem;text-align:right}
.stappen{list-style:none;margin:0;padding:0;counter-reset:stap}
.stappen li{position:relative;counter-increment:stap;padding:20px 0 20px 60px}
.stappen li + li{box-shadow:inset 0 1px 0 var(--lijn)}
.stappen li::before{content:counter(stap,decimal-leading-zero);position:absolute;left:0;top:20px;
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--rood-mist);color:var(--rood);font-family:var(--display);font-weight:700;
  font-size:.86rem;transition:background .35s,color .35s,transform .45s var(--stuiter)}
.stappen li:hover::before{background:var(--rood);color:#fff;transform:scale(1.06)}
.stappen li p{margin:6px 0 0;font-size:1rem;line-height:1.65;color:var(--zacht)}

/* ---------- afsluitende band ---------- */
.band{padding:clamp(56px,7vw,92px) 0;background:var(--zand);box-shadow:inset 0 1px 0 var(--lijn)}
.band__binnen{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(24px,4vw,48px);align-items:center}
.band p{margin:12px 0 0;font-size:1.05rem;line-height:1.6;color:var(--zacht);max-width:44ch}
@media(min-width:900px){.band .knoprij{justify-content:flex-end}}

/* ---------- voet ---------- */
.voet{padding:clamp(52px,6vw,88px) 0 24px;background:var(--zand-2)}
.voet__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(28px,4vw,56px);align-items:start}
.voet__logo{display:inline-flex;background:#fff;padding:12px 16px;border-radius:var(--r-klein);
  margin-bottom:18px;box-shadow:var(--schaduw)}
.voet__logo img{height:48px;width:auto}
.voet p{margin:0;font-size:1rem;line-height:1.65;color:var(--zacht);max-width:32ch}
.voet__kop{font-size:.8rem;color:var(--zacht-2);margin-bottom:16px}
.voet__lijst{display:flex;flex-direction:column;gap:11px;list-style:none;margin:0;padding:0}
.voet__lijst a,.voet__tekst{font-size:1rem;color:var(--zacht);line-height:1.6}
.voet__lijst a{transition:color .25s,transform .3s var(--soepel)}
.voet__lijst a:hover{color:var(--rood);transform:translateX(3px)}
.voet__tel{font-family:var(--display);font-weight:700;font-size:1.35rem!important;
  letter-spacing:-.03em;color:var(--inkt)!important}
.voet__tel:hover{color:var(--rood)!important}
.voet__onder{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  max-width:var(--max);margin:clamp(36px,5vw,60px) auto 0;padding:22px var(--marge) 0;
  box-shadow:inset 0 1px 0 var(--lijn);font-size:.86rem;color:var(--zacht-2)}
.voet__onder a{color:var(--zacht)}
.voet__onder a:hover{color:var(--rood)}

/* ---------- zwevende WhatsApp ---------- */
.wa-zwevend{position:fixed;right:20px;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);
  z-index:180;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--wa);color:#08110B;box-shadow:0 14px 32px -12px rgba(37,211,102,.65);
  transition:transform .3s var(--soepel)}
.wa-zwevend:hover{transform:translateY(-3px);color:#08110B}
body.menu-open .wa-zwevend{opacity:0;pointer-events:none}

/* ---------- verschijnen bij scrollen ---------- */
.toon{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--soepel),transform .8s var(--soepel);
  transition-delay:var(--vertraging,0ms)}
.toon.zichtbaar{opacity:1;transform:none}

/* ---------- paginering ---------- */
.pagination{margin-top:40px;display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{display:grid;place-items:center;min-width:46px;min-height:46px;
  padding:0 14px;border-radius:var(--pil);background:var(--zand);color:var(--inkt)}
.pagination .current{background:var(--rood);color:#fff}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .toon,.kaart__schijf,.kaart__titel,.kaart__kort{opacity:1!important;transform:none!important}
}


/* -------------------------------------------------------------------------
   Mobiel
   ---------------------------------------------------------------------- */
@media(max-width:760px){
  /* een 16:9-video moet in een staand scherm fors opgeschaald worden om te vullen;
     een lagere hero scheelt flink in dat inzoomen */
  .hero{min-height:auto;padding:calc(env(safe-area-inset-top,0px) + clamp(56px,10vh,88px)) 0
    clamp(120px,18vh,160px)}
  .hero__titel{max-width:100%}
  .hero__knoppen{width:100%}
  .hero__knoppen .knop{flex:1 1 auto;justify-content:center}

  .diensten{margin-top:-96px}
  .kaart{--schijf:66px}

  .blokkop{align-items:flex-start}
  .bedrijf__foto img{aspect-ratio:3/4}
  .werkgebied__groot{gap:10px}
  .band .knoprij .knop{flex:1 1 auto;justify-content:center}
  .voet__onder{flex-direction:column;gap:6px}
}
@media(max-width:400px){
  .knop{padding:14px 20px;font-size:.95rem}
  .omhulsel{padding-inline:18px}
}


/* =========================================================================
   Speels: sticker, wisselend woord en scheve kaarten
   ====================================================================== */

/* --- de sticker in de hero --- */
.sticker{position:absolute;right:2%;bottom:-6px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
  width:clamp(156px,15vw,186px);aspect-ratio:1;border-radius:50%;
  padding:18px;background:var(--rood);color:#fff;rotate:-9deg;
  box-shadow:0 18px 40px -16px rgba(206,17,65,.85);
  animation:tk-wiebel 4.5s ease-in-out infinite;
  transition:rotate .4s var(--stuiter),scale .4s var(--stuiter)}
.sticker::before{content:"";position:absolute;inset:8px;border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.sticker:hover{color:#fff;rotate:0deg;scale:1.06;animation-play-state:paused}
.sticker__klein{font-size:.78rem;line-height:1.2;opacity:.9;max-width:12ch;margin-top:auto}
.sticker__groot{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.1rem,1.5vw,1.28rem);line-height:1.05}
.sticker__nr{font-size:.82rem;font-weight:600;letter-spacing:.01em}
.sticker__pijl{display:grid;place-items:center;width:26px;height:26px;margin:2px auto auto;
  border-radius:50%;background:rgba(255,255,255,.2)}
.sticker:hover .sticker__pijl{background:#fff;color:var(--rood)}
@keyframes tk-wiebel{0%,100%{rotate:-9deg}50%{rotate:-4deg}}


/* --- wisselend woord in de titel ---
   Het woord krijgt een eigen regel. Daardoor kan de zin nooit opnieuw afbreken als er een
   langer woord verschijnt, zonder dat er een gat in de zin valt. De krabbel zit als
   achtergrond op het woord zelf, dus hij is precies zo breed als het woord. */
.wissel{display:block;color:var(--rood-licht);white-space:nowrap}
.wissel__stapel{display:inline-grid;align-items:baseline}
.wissel__woord{grid-area:1/1;opacity:0;visibility:hidden;padding-bottom:.1em;
  transform:translateY(-.28em) rotate(-2deg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8C34 3 62 10 96 6s58 6 101 1' fill='none' stroke='%23E31B4B' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left bottom;background-size:0 .15em;
  transition:opacity .28s var(--soepel),transform .28s var(--soepel),visibility .28s}
.wissel__woord.actief{opacity:1;visibility:visible;transform:none;background-size:100% .15em;
  transition:opacity .45s var(--stuiter),transform .45s var(--stuiter),
    background-size .55s var(--soepel) .12s}
.wissel__woord.komt{transform:translateY(.3em) rotate(2deg)}

/* --- kaarten net niet recht --- */
.kaart:nth-child(1){rotate:-1.4deg}
.kaart:nth-child(2){rotate:.8deg}
.kaart:nth-child(3){rotate:-.6deg}
.kaart{transition:transform .5s var(--soepel),box-shadow .5s,rotate .5s var(--stuiter)}
.kaart:hover{rotate:0deg}

/* --- knoppen stuiteren een tikje --- */
.knop:active{scale:.97}
.knop--rood:hover{animation:tk-hop .5s var(--stuiter)}
@keyframes tk-hop{0%{translate:0 0}40%{translate:0 -5px}100%{translate:0 0}}

/* --- punten met een kwinkslag --- */
.punt svg{padding:8px;border-radius:50%;background:var(--rood-mist);width:36px;height:36px}
.punt:hover svg{background:var(--rood);color:#fff}

/* --- werkgebied: plaatsen als losse stickers --- */
.werkgebied__rest li{padding:6px 14px;margin:0 8px 8px 0;border-radius:var(--pil);
  background:var(--zand);transition:background .25s,color .25s,rotate .35s var(--stuiter)}
.werkgebied__rest li::after{display:none}
.werkgebied__rest li:hover{background:var(--rood);color:#fff;rotate:-3deg}
.blok--zand .werkgebied__rest li{background:var(--zand)}
.werkgebied__slot{background:transparent!important}

@media (prefers-reduced-motion:reduce){
  .sticker{animation:none!important}
  .wissel__streep path{stroke-dashoffset:0}
  .kaart{rotate:0deg!important}
}


/* =========================================================================
   Kop met karakter
   ====================================================================== */
/* z-index hoger dan de balkachtergrond (.kop__binnen staat op 2), anders schuift het
   witte vlak van de kop eroverheen en zie je de lijn niet meer. */
.kop__balk{position:absolute;left:0;bottom:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--rood),#FF6B8F);border-radius:0 3px 3px 0;
  transition:width .12s linear;z-index:5;pointer-events:none;
  box-shadow:0 0 12px -2px rgba(206,17,65,.6)}

.merk{display:inline-block;transition:rotate .45s var(--stuiter),scale .45s var(--stuiter)}
.merk:hover{rotate:-2.5deg;scale:1.03}

/* menu-items: rood stipje dat opduikt, tekst wipt op */
.menu__lijst > li > a{position:relative;transition:color .25s,translate .35s var(--stuiter)}
.menu__lijst > li > a::after{content:"";position:absolute;left:50%;bottom:3px;translate:-50% 0;
  width:6px;height:6px;border-radius:50%;background:var(--rood);
  opacity:0;scale:0;transition:opacity .3s,scale .35s var(--stuiter)}
.menu__lijst > li > a:hover{background:transparent;color:var(--inkt);translate:0 -2px}
.menu__lijst > li > a:hover::after{opacity:1;scale:1}
.menu .current-menu-item > a,.menu .current_page_item > a{background:transparent;color:var(--inkt)}
.menu .current-menu-item > a::after,.menu .current_page_item > a::after{opacity:1;scale:1}

/* de hamburger krijgt ook een tikje */
.menuknop{transition:rotate .35s var(--stuiter),background .3s}
.menuknop:hover{rotate:-6deg}

@media(max-width:900px){
  /* in de balk staan alleen het logo en de hamburger; bellen en WhatsApp zitten
     in het uitgeklapte menu, de zwevende WhatsApp-knop blijft rechtsonder staan */
  .beltje{display:none}
  .menu__lijst > li > a::after{display:none}
}

@media (prefers-reduced-motion:reduce){
  .beltje,.merk,.menuknop,.menu__lijst > li > a{rotate:0deg!important;scale:1!important;
    translate:0!important}
}


/* -------------------------------------------------------------------------
   Mobiel: video, sticker en menu
   ---------------------------------------------------------------------- */
@media (orientation:portrait) and (max-width:760px){
  .hero__film iframe{width:max(116vw,232vh);height:max(66vw,131vh)}
}
@supports (container-type:size){
  @media (orientation:portrait) and (max-width:760px){
    .hero__film iframe{width:max(116cqw,232cqh);height:max(66cqw,131cqh)}
  }
}

@media(max-width:900px){
  /* op telefoon staat bellen al in het menu en zweeft WhatsApp rechtsonder;
     de sticker erbij maakt het te druk */
  .sticker{display:none}
  .hero__knoppen .knop--glas{display:none}
  .hero__knoppen .knop{flex:1 1 auto;justify-content:center}
}

@media(max-width:520px){
  .hero__titel{font-size:clamp(2rem,9vw,2.8rem)}
  .hero__label{font-size:.74rem;padding:7px 14px}
  .kaarten{gap:36px}
  .kaart:nth-child(n){rotate:0deg}
  .werkgebied__groot{font-size:clamp(1.8rem,11vw,2.4rem)}
  .voet__grid{gap:30px}
}


/* -------------------------------------------------------------------------
   Zones en vergunningen: donkere strook als rustpunt tussen de lichte blokken
   ---------------------------------------------------------------------- */
.zones{background:var(--inkt);color:#fff;padding:clamp(56px,7vw,96px) 0}
.zones__rooster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
  gap:clamp(36px,6vw,80px);align-items:center}
@media(max-width:860px){.zones__rooster{grid-template-columns:1fr;gap:44px}}

.zones__label{margin:0 0 14px;font-size:.8rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rood-licht)}

.borden{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,34px);margin:0}
.borden figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.bord{width:clamp(104px,12vw,140px);height:auto;display:block;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.5));
  transition:transform .5s var(--stuiter)}
.borden figure:hover .bord{transform:translateY(-5px) rotate(-2deg)}
.borden figcaption{font-size:.86rem;font-weight:600;color:rgba(255,255,255,.72);
  letter-spacing:.01em}
.zones__tekst{margin:26px 0 0;max-width:42ch;font-size:clamp(1rem,1.15vw,1.15rem);
  line-height:1.6;color:rgba(255,255,255,.72)}

.zones__papieren ul{list-style:none;margin:0;padding:0}
.zones__papieren li{display:flex;align-items:center;gap:14px;padding:20px 4px;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.16);transition:padding-left .35s var(--soepel)}
.zones__papieren li:first-child{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
  inset 0 -1px 0 rgba(255,255,255,.16)}
.zones__papieren li:hover{padding-left:12px}
.zones__papieren strong{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.15rem,1.7vw,1.4rem);color:#fff}
.zones__papieren em{font-style:normal;font-size:.95rem;color:rgba(255,255,255,.55)}
.zones__papieren svg{margin-left:auto;flex:none;color:var(--rood-licht);
  transition:transform .4s var(--stuiter)}
.zones__papieren li:hover svg{transform:scale(1.2) rotate(-8deg)}

/* -------------------------------------------------------------------------
   Kleine schermen: rond blijft rond
   ---------------------------------------------------------------------- */
@media(max-width:520px){
  .kaart{--schijf:62px}
  .rij__schijf{width:64px;height:64px}
  .paginakop__schijf{width:74px;height:74px}
}


/* -------------------------------------------------------------------------
   Regel onder het werkgebied: leest als gewone tekst, helpt bij het vindbaar zijn
   ---------------------------------------------------------------------- */
.zoekregel{margin:clamp(26px,3vw,38px) 0 0;max-width:80ch;font-size:1rem;line-height:1.7;
  color:var(--zacht)}