/* ============================================================
   WADIXX VASTGOED ONDERHOUD — ontwerpsysteem "Laag over laag"
   Display  Archivo (variabel, wdth 100-125)
   Tekst    Public Sans
   ============================================================ */


:root{
  /* Kleur — gemeten uit het logo, niet uit het merkblad overgenomen */
  --inkt:#0E1620;          /* de logowand, diepste laag */
  --staal:#182231;         /* donkere sectie */
  --leisteen:#2E3344;      /* merkdonker */
  --leisteen-op:#3A3F52;   /* primair uit merkblad */
  --teal:#00CACE;          /* accent, alleen op donker als vlak */
  --teal-helder:#22DEE1;
  --teal-diep:#0B8E96;     /* accent dat op licht leesbaar is */
  --teal-wash:#E4F6F6;
  --kalk:#F5F3EF;          /* warme kalkwit, geen steriel #fff */
  --kalk-2:#EBE7E0;
  --wit:#FFFFFF;
  --tekst:#141A22;
  --tekst-zacht:#5B6573;
  --lijn:rgba(20,26,34,.12);
  --lijn-donker:rgba(255,255,255,.12);

  --maat:clamp(1.1rem,4vw,3rem);
  --sectie:clamp(5.5rem,10vw,9.5rem);
  --veer:cubic-bezier(.16,1,.3,1);
  --zacht:cubic-bezier(.32,.72,0,1);
  --r:26px;
}

*,*::before,*::after{box-sizing:border-box}
/* Safari op iOS kleurt de strook onder de statusbalk en achter de zwevende
   adresbalk met de achtergrond van html én body. Beide randen van deze pagina
   zijn donker (hero boven, voet onder), dus staan html en body op inkt en
   draagt <main> de lichte kleur van de inhoud. Alleen html donker zetten is
   niet genoeg: dan blijft die strook wit. */
html{background:var(--inkt);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--inkt);color:var(--tekst);
  font-family:'Public Sans',system-ui,sans-serif;font-size:clamp(1rem,.35vw + .95rem,1.075rem);
  line-height:1.65;font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
  /* referentiekader voor de korrellaag hieronder */
  position:relative;
}
/* height:auto is hier niet cosmetisch: zonder deze regel wint het
   height-attribuut op de <img> van aspect-ratio, en dan bepaalt het
   bestand de hoogte van het kader in plaats van het ontwerp. */
main{background:var(--kalk)}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Archivo',system-ui,sans-serif;font-weight:700;letter-spacing:-.03em;line-height:1.02;margin:0;font-variation-settings:"wdth" 112}
p{margin:0}
::selection{background:var(--teal);color:var(--inkt)}

/* filmkorrel over alles — vast, nooit in een scrollende laag */
/* De korrel ligt over de pagina en scrollt mee. Niet als vaste laag: Safari op
   iOS trekt vaste lagen aan de schermrand door in de stroken achter de
   statusbalk en de adresbalk, en dan zie je daar een waas in plaats van de
   pagina. BAM Diensten heeft zo'n laag niet en is daar wel doorzichtig. */
body::after{
  content:"";position:absolute;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Twee breedtes: de balk en de hero lopen tot 1520px, de secties eronder
   tot 1440px — dat houdt de leesregels behapbaar zonder smal te ogen. */
.wrap{width:min(100% - 2*var(--maat),1440px);margin-inline:auto}
.wrap--breed{width:min(100% - 2*var(--maat),1520px);margin-inline:auto}
.smal{width:min(100% - 2*var(--maat),980px);margin-inline:auto}

/* ---------- typografie-schaal ---------- */
.kop-xl{font-size:clamp(2.9rem,7.6vw,6.2rem)}
.kop-l {font-size:clamp(2.2rem,4.6vw,3.9rem)}
.kop-m {font-size:clamp(1.45rem,2vw,1.9rem);letter-spacing:-.02em}
.kop-s {font-size:1.12rem;letter-spacing:-.01em;font-variation-settings:"wdth" 106}
.lead{font-size:clamp(1.06rem,.5vw + 1rem,1.25rem);color:var(--tekst-zacht);max-width:52ch}
.op-donker .lead,.op-donker p{color:rgba(255,255,255,.72)}

.opschrift{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--teal-diep);
}
.op-donker .opschrift{color:var(--teal)}
.opschrift::before{content:"";width:26px;height:2px;background:currentColor;opacity:.55}

/* ---------- kwaststreek onder een woord ---------- */
.streek{position:relative;display:inline-block;white-space:nowrap}
.streek>span{position:relative;z-index:1}
.streek::before{
  content:"";position:absolute;left:-.12em;right:-.12em;bottom:-.06em;height:.46em;z-index:0;
  background:var(--teal);
  -webkit-mask:url('../images/streek.svg') left center/100% 100% no-repeat;
          mask:url('../images/streek.svg') left center/100% 100% no-repeat;
  transform:scaleX(var(--verf,1));transform-origin:left center;
}
.streek--diep::before{background:var(--teal-diep);opacity:.22}

/* ---------- geschilderde sectierand ---------- */
.verfrand{position:absolute;left:0;right:0;height:64px;pointer-events:none;z-index:2}
.verfrand--onder{bottom:-63px;
  -webkit-mask:url('../images/verfrand.svg') top center/100% 100% no-repeat;
          mask:url('../images/verfrand.svg') top center/100% 100% no-repeat;}
.verfrand--onder-2{bottom:-63px;
  -webkit-mask:url('../images/verfrand-2.svg') top center/100% 100% no-repeat;
          mask:url('../images/verfrand-2.svg') top center/100% 100% no-repeat;}

/* ---------- knoppen ---------- */
.knop{
  --bg:var(--teal);--fg:var(--inkt);
  position:relative;display:inline-flex;align-items:center;gap:.9rem;
  padding:.62rem .62rem .62rem 1.5rem;border-radius:999px;border:0;cursor:pointer;
  background:var(--bg);color:var(--fg);
  font-family:'Public Sans',sans-serif;font-size:.98rem;font-weight:600;letter-spacing:-.01em;
  transition:transform .5s var(--zacht),background-color .5s var(--zacht),box-shadow .5s var(--zacht);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 14px 30px -18px rgba(0,0,0,.6);
}
.knop:hover{transform:translateY(-2px)}
.knop:active{transform:scale(.985)}
.knop__cirkel{
  width:34px;height:34px;border-radius:999px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(0,0,0,.14);
  transition:transform .5s var(--zacht),background-color .5s var(--zacht);
}
.knop:hover .knop__cirkel{transform:translate(3px,-2px) scale(1.06);background:rgba(0,0,0,.2)}
.knop svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none}
.knop--leeg{--bg:transparent;--fg:var(--wit);box-shadow:none;border:1px solid rgba(255,255,255,.26)}
.knop--leeg .knop__cirkel{background:rgba(255,255,255,.12)}
.knop--leeg:hover{background:rgba(255,255,255,.07)}
.knop--leeg:hover .knop__cirkel{background:rgba(255,255,255,.18)}
.knop--donker{--bg:var(--leisteen);--fg:var(--wit)}
.knop--donker .knop__cirkel{background:rgba(255,255,255,.14)}

.tekstlink{
  display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.95rem;
  color:var(--teal-diep);
}
.tekstlink svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none;transition:transform .45s var(--zacht)}
.tekstlink:hover svg{transform:translateX(4px)}
.op-donker .tekstlink{color:var(--teal)}

/* ============================================================
   NAVIGATIE
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:1.15rem 0;transition:padding .6s var(--zacht)}
.nav__binnen{
  position:relative;display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem);
  width:min(100% - 2*var(--maat),1520px);
  padding:.5rem .5rem .5rem 1.4rem;border-radius:999px;
  border:1px solid transparent;transition:border-color .6s var(--zacht),box-shadow .6s var(--zacht);
}
/* Het glas zit op een pseudo-element en niet op de balk zelf: een element met
   backdrop-filter wordt het referentiekader voor alles wat erin fixed staat,
   en dan schuift de menulade niet meer over het hele scherm. */
.nav__binnen::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  background:rgba(14,22,32,.9);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  transition:opacity .6s var(--zacht);
}
.nav.is-vast{padding:.7rem 0}
.nav.is-vast .nav__binnen{border-color:rgba(255,255,255,.1);box-shadow:0 20px 44px -30px rgba(0,0,0,.9)}
.nav.is-vast .nav__binnen::before{opacity:1}

.nav__logo img{height:48px;width:auto}

/* De vijf items staan midden in de balk, los van de breedte links en rechts. */
.nav__links{
  position:absolute;left:48%;transform:translateX(-50%);
  display:flex;gap:clamp(1rem,1.9vw,1.9rem);align-items:center;
}
.nav__links a{
  position:relative;font-size:.95rem;font-weight:500;color:rgba(255,255,255,.76);
  transition:color .4s var(--zacht);white-space:nowrap;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--teal);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--veer);
}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{transform:scaleX(1)}

.nav__tel{
  display:inline-flex;align-items:center;gap:.6rem;color:#fff;font-weight:600;font-size:.93rem;
  font-variant-numeric:tabular-nums;padding:.35rem 1.05rem .35rem .35rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);margin-left:auto;
  transition:background-color .45s var(--zacht),border-color .45s var(--zacht);
}
.nav__tel:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.nav__tel i{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;flex:0 0 auto;
  background:color-mix(in srgb,var(--teal) 22%,transparent)}
.nav__tel svg{width:14px;height:14px;stroke:var(--teal);stroke-width:1.8;fill:none}

.nav .knop{padding:.5rem .5rem .5rem 1.15rem;font-size:.9rem}
.nav .knop__cirkel{width:30px;height:30px}

/* ============================================================
   MENULADE (mobiel)
   Een <details>, zodat het menu ook zonder JavaScript open en dicht kan.
   ============================================================ */
/* Geen transform op dit element: dat zou het referentiekader worden voor het
   paneel eronder, en dan schuift de lade niet meer over het hele scherm. */
.lade{position:absolute;top:50%;margin-top:-23px;right:calc(var(--maat) + .6rem);z-index:3;display:none}
.lade > summary{
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);
  color:#fff;cursor:pointer;list-style:none;
  transition:background-color .4s var(--zacht),border-color .4s var(--zacht);
}
.lade > summary::-webkit-details-marker{display:none}
.lade > summary::marker{content:''}
.lade > summary svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round}
.lade > summary .lade__sluit{display:none}
.lade[open] > summary{background:var(--teal);border-color:transparent;color:var(--inkt)}
.lade[open] > summary .lade__open{display:none}
.lade[open] > summary .lade__sluit{display:block}
/* Met JavaScript sluit de ronde knop in de lade; dan mag het kruisje in de
   balk onder de verduistering verdwijnen. Zonder JS blijft het bovenop. */
.js .lade[open] > summary{z-index:0}

/* Zolang de lade openstaat is het document zelf donker — html én body. De
   stroken achter de statusbalk en de adresbalk van een telefoon krijgen hun
   kleur van het document en niet van het paneel; met een lichte body kleurden
   ze wit en leek de lade daar afgekapt. */
html.lade-op,html.lade-op body{background:var(--inkt)}

.lade__waas{
  position:fixed;inset:0;z-index:60;
  background:rgba(6,10,15,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  overscroll-behavior:none;touch-action:none;
}

.lade__paneel{
  /* top én bottom op 0: het paneel loopt altijd door tot achter de balken van
     de telefoon, ook als die in- of uitschuiven. Een vaste hoogte (100dvh)
     liet daar juist een strook vrij. */
  position:fixed;inset:0 0 0 auto;z-index:61;width:min(86vw,360px);
  display:flex;flex-direction:column;gap:clamp(1.2rem,3.5vh,1.9rem);
  padding:calc(clamp(1.3rem,5vw,1.8rem) + env(safe-area-inset-top)) clamp(1.2rem,4.5vw,1.5rem) calc(clamp(1.4rem,5vw,1.9rem) + env(safe-area-inset-bottom));
  background:radial-gradient(120% 55% at 100% 0%,color-mix(in srgb,var(--teal) 14%,transparent),transparent 60%),var(--inkt);
  border-left:1px solid rgba(255,255,255,.1);box-shadow:-30px 0 80px rgba(0,0,0,.55);
  /* De lade scrollt desnoods zelf, maar geeft dat niet door aan de pagina. */
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
}
/* Het paneel loopt onder de adresbalk door; het verschil tussen het hele
   scherm (lvh) en het zichtbare deel (dvh) is precies de hoogte van die balk,
   en die telt onderaan bij de ruimte op. Schuift de balk weg, dan wordt het
   verschil vanzelf nul. */
@supports (height:100dvh){
  .lade__paneel{
    padding-bottom:calc(clamp(1.4rem,5vw,1.9rem) + env(safe-area-inset-bottom) + 100lvh - 100dvh);
  }
}
.lade__paneel::-webkit-scrollbar{display:none}

@media (prefers-reduced-motion:no-preference){
  .lade:not(.is-verbeterd)[open] .lade__paneel{animation:lade-in 460ms var(--veer)}
  .lade:not(.is-verbeterd)[open] .lade__waas{animation:lade-waas 300ms ease}
  @keyframes lade-in{from{transform:translateX(100%)}to{transform:none}}
  @keyframes lade-waas{from{opacity:0}to{opacity:1}}
}

/* ---------- de menulaag (met JavaScript) ----------
   Altijd aanwezig, direct in <body>, en alleen onzichtbaar als het menu dicht
   is. Een laag die helemaal verdwijnt laat de balk onderin Safari wit achter;
   een laag die blijft staan houdt die strook de kleur van de pagina. */
.lade-laag{
  position:fixed;inset:0;z-index:60;
  visibility:hidden;pointer-events:none;transition:visibility 0s linear 280ms;
}
.lade-laag.is-aan{visibility:visible;pointer-events:auto;transition-delay:0s}
.lade-laag .lade__waas,.lade-laag .lade__paneel{position:absolute}
.lade-laag .lade__waas{opacity:0;transition:opacity .24s ease}
.lade-laag.is-aan .lade__waas{opacity:1}
.lade-laag .lade__paneel{transform:translateX(100%);transition:transform .28s var(--zacht)}
.lade-laag.is-aan .lade__paneel{transform:none;transition:transform .46s var(--veer)}
@media (min-width:1061px){.lade-laag{display:none}}

/* Met JavaScript blijft de <details> dicht; de knop toont zijn toestand met
   aria-expanded. */
.lade.is-verbeterd > summary[aria-expanded="true"]{background:var(--teal);border-color:transparent;color:var(--inkt)}
.lade.is-verbeterd > summary[aria-expanded="true"] .lade__open{display:none}
.lade.is-verbeterd > summary[aria-expanded="true"] .lade__sluit{display:block}

.lade__kop{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.lade__merk img{height:40px;width:auto}
.lade__dicht{
  width:44px;height:44px;border-radius:999px;flex:0 0 auto;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;
}
.lade__dicht svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}

.lade__lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lade__lijst a{
  display:flex;align-items:center;gap:.9rem;padding:.85rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);color:#fff;
}
.lade__lijst li:last-child a{border-bottom:0}
.lade__icoon{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  background:color-mix(in srgb,var(--teal) 14%,transparent);
  transition:background-color .4s var(--zacht),transform .5s var(--veer);
}
.lade__icoon svg{width:20px;height:20px;stroke:var(--teal);stroke-width:1.6;fill:none}
.lade__label{flex:1;font-family:'Archivo',sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:-.015em;font-variation-settings:"wdth" 104}
.lade__chev{flex:none;width:17px;height:17px;stroke:rgba(255,255,255,.4);stroke-width:1.8;fill:none;transition:transform .45s var(--veer),stroke .4s ease}
.lade__lijst a:hover .lade__icoon{background:color-mix(in srgb,var(--teal) 26%,transparent);transform:scale(1.04)}
.lade__lijst a:hover .lade__chev{stroke:var(--teal);transform:translateX(3px)}
.lade__lijst a[aria-current="page"] .lade__label{color:var(--teal)}
.lade__lijst a[aria-current="page"] .lade__chev{stroke:var(--teal)}

@media (prefers-reduced-motion:no-preference){
  .lade[open] .lade__lijst a,
  .lade-laag.is-aan .lade__lijst a{animation:item-in 420ms var(--veer) both}
  .lade[open] .lade__lijst li:nth-child(1) a,
  .lade-laag.is-aan .lade__lijst li:nth-child(1) a{animation-delay:90ms}
  .lade[open] .lade__lijst li:nth-child(2) a,
  .lade-laag.is-aan .lade__lijst li:nth-child(2) a{animation-delay:140ms}
  .lade[open] .lade__lijst li:nth-child(3) a,
  .lade-laag.is-aan .lade__lijst li:nth-child(3) a{animation-delay:190ms}
  .lade[open] .lade__lijst li:nth-child(4) a,
  .lade-laag.is-aan .lade__lijst li:nth-child(4) a{animation-delay:240ms}
  .lade[open] .lade__lijst li:nth-child(5) a,
  .lade-laag.is-aan .lade__lijst li:nth-child(5) a{animation-delay:290ms}
  .lade[open] .lade__cta,
  .lade-laag.is-aan .lade__cta{animation:item-in 420ms var(--veer) 390ms both}
  @keyframes item-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
}

.lade__cta{
  display:flex;align-items:center;gap:.8rem;min-height:54px;padding-inline:1.3rem;border-radius:999px;
  background:var(--teal);color:var(--inkt);font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 14px 30px -18px rgba(0,0,0,.6);
}
.lade__cta span{flex:1}
.lade__cta svg{flex:none;width:20px;height:20px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}

.lade__hulp{margin-top:auto;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.1)}
.lade__hulp strong{display:block;color:#fff;font-weight:600}
.lade__hulp > span{display:block;margin-top:2px;font-size:.87rem;color:rgba(255,255,255,.55)}
.lade__acties{display:flex;gap:.6rem;margin-top:.9rem}
.lade__acties a{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;
  transition:background-color .4s var(--zacht),border-color .4s var(--zacht);
}
.lade__acties a:hover{background:color-mix(in srgb,var(--teal) 20%,transparent);border-color:color-mix(in srgb,var(--teal) 45%,transparent)}
.lade__acties svg{width:19px;height:19px;stroke:var(--teal);stroke-width:1.7;fill:none}

/* ============================================================
   HERO — één scherm, foto over de volle breedte
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  background:var(--inkt);color:#fff;overflow:hidden;
  /* Ronde onderhoeken alleen op mobiel (zie de mediaquery onderaan): daar
     loopt het donkere blok over in de lichte sectie eronder. */
  padding:clamp(6rem,11vh,8.5rem) 0 clamp(1.1rem,2.6vh,1.9rem);
}

/* de foto zelf: beeldvullend, uitsnede op de schilder */
.hero__foto{position:absolute;inset:0;z-index:0}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:68% center}
/* Verloop van links donker naar rechts open, zodat de kop leesbaar is en de
   schilder vrij blijft. Onderin een extra dempende laag voor de witte kaart. */
.hero__foto::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(9,15,22,.4) 0%,transparent 18%,transparent 66%,rgba(9,15,22,.42) 100%),
    linear-gradient(97deg,rgba(9,15,22,.94) 0%,rgba(9,15,22,.86) 24%,rgba(9,15,22,.56) 42%,rgba(9,15,22,.14) 60%,transparent 74%);
}
/* de kwaststreek uit het merk, linksonder over de foto — zoals in het ontwerp */
.hero__streek{
  position:absolute;left:-3%;bottom:3%;width:24%;height:clamp(44px,6.5vh,78px);z-index:1;
  background:#fff;pointer-events:none;opacity:.13;
  -webkit-mask:url('../images/streek.svg') left center/100% 100% no-repeat;
          mask:url('../images/streek.svg') left center/100% 100% no-repeat;
}

.hero__inhoud{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center}
.hero__kolom{max-width:min(54rem,60%)}
.hero .opschrift{color:rgba(255,255,255,.72);font-size:.78rem}
br.op-smal{display:none}
.hero .opschrift::before{background:var(--teal);opacity:1}
.hero h1{
  font-size:clamp(2.6rem,min(7.2vw,12.4vh),6.6rem);line-height:.93;margin:1.2rem 0 0;
  font-variation-settings:"wdth" 106;
}
.hero h1 em{font-style:normal;display:block;color:var(--teal)}
.hero__lead{margin-top:1.3rem;font-size:clamp(1.05rem,.5vw + .95rem,1.32rem);color:rgba(255,255,255,.82);max-width:46ch}
.hero__knoppen{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.2rem,2.6vh,1.9rem)}

/* drie beloftes plus het handgeschreven merkzinnetje */
/* Laptop en desktop: de drie beloftes met vinkjes, met het merkzinnetje
   ernaast achter een haarlijn — zoals in het ontwerp. */
.hero__onder{display:flex;align-items:center;gap:clamp(1.4rem,3vw,2.6rem);margin-top:clamp(1rem,2.6vh,1.8rem);flex-wrap:wrap}
.vinkjes{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.vinkjes li{display:flex;align-items:center;gap:.75rem;font-size:1rem;color:rgba(255,255,255,.9)}
.vinkjes i{width:24px;height:24px;border-radius:999px;background:var(--teal);display:grid;place-items:center;flex:0 0 auto}
.vinkjes svg{width:12px;height:12px;stroke:var(--inkt);stroke-width:3;fill:none}
.hero__onder .handschrift{margin:0;padding-left:clamp(1.4rem,3vw,2.6rem);border-left:1px solid rgba(255,255,255,.18)}
.hero__onder .handschrift::after{left:clamp(1.4rem,3vw,2.6rem)}

/* Telefoon en tablet: de projectteller met rondjes plus de icoonrij. */
/* De projectteller staat op elk formaat; de vinkjesrij en de icoonrij
   wisselen elkaar af op 860px. */
.bewijsrij{display:flex}

/* projectteller met drie werkfoto's als rondjes */
.bewijsrij{align-items:center;gap:.9rem;margin-top:clamp(1rem,2.4vh,1.7rem);flex-wrap:wrap}
.stapel{display:flex;flex:0 0 auto}
.stapel img{
  width:46px;height:46px;border-radius:999px;object-fit:cover;
  border:2px solid rgba(255,255,255,.85);box-shadow:0 8px 20px -10px rgba(0,0,0,.9);
}
.stapel img + img{margin-left:-14px}
.bewijsrij__tekst b{
  display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(1.4rem,2vw,1.8rem);
  letter-spacing:-.03em;line-height:1;color:#fff;font-variation-settings:"wdth" 108;
}
.bewijsrij__tekst span{display:block;margin-top:.2rem;font-size:.86rem;color:rgba(255,255,255,.62)}

/* drie beloftes met een icoon, gescheiden door haarlijnen */
.punten{
  display:none;grid-template-columns:repeat(3,1fr);
  margin-top:clamp(1rem,2.4vh,1.7rem);padding-top:clamp(.9rem,2vh,1.4rem);
  border-top:1px solid rgba(255,255,255,.14);
}
.punt{padding:0 clamp(.6rem,1.6vw,1.4rem);border-left:1px solid rgba(255,255,255,.14)}
.punt:first-child{padding-left:0;border-left:0}
.punt i{
  display:grid;place-items:center;width:40px;height:40px;border-radius:13px;margin-bottom:.6rem;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
}
.punt svg{width:19px;height:19px;stroke:var(--teal);stroke-width:1.6;fill:none}
.punt b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:1.02rem;
  letter-spacing:-.02em;color:#fff;font-variation-settings:"wdth" 104}
.punt span{display:block;font-size:.84rem;color:rgba(255,255,255,.6);line-height:1.35}
.handschrift{
  position:relative;display:inline-block;
  font-family:'Caveat','Segoe Script',cursive;font-weight:600;
  font-size:clamp(1.6rem,2.7vw,2.45rem);line-height:1.15;color:#fff;
}
.handschrift::after{
  content:"";position:absolute;left:0;bottom:-.35em;width:6.5rem;height:.42em;
  background:var(--teal);
  -webkit-mask:url('../images/streek.svg') left center/100% 100% no-repeat;
          mask:url('../images/streek.svg') left center/100% 100% no-repeat;
}

/* Zwevende kaart over de foto: vult het rechtervlak en zet meteen de
   belangrijkste belofte neer. */


/* Op een laag scherm (veel laptops zijn 768 of 720 hoog) wordt alles een slag
   compacter. Er verdwijnt niets: liever een hero die een stukje doorloopt dan
   een bezoeker die informatie mist. */
@media (min-width:561px) and (max-height:880px){
  .hero{padding-top:clamp(5rem,10vh,8.5rem);padding-bottom:clamp(.9rem,2vh,1.5rem)}
  .hero h1{font-size:clamp(2.4rem,min(6.4vw,10.8vh),5.4rem)}
  .hero__lead{font-size:1.04rem;margin-top:.9rem}
  .bewijsrij{margin-top:.8rem}
  .punten{margin-top:.8rem;padding-top:.75rem}
  .punt i{width:36px;height:36px;margin-bottom:.45rem}
  .punt b{font-size:.98rem}
  .punt span{font-size:.8rem}
  .stapel img{width:42px;height:42px}
  .troef{padding-block:.75rem}
  .troef__item i{width:38px;height:38px}
}

/* witte troefkaart onderaan de hero */
.troef{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(1rem,2.4vh,1.8rem);
  background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:20px;padding:clamp(.85rem,1.7vh,1.3rem) clamp(.7rem,1.2vw,1.2rem);
  box-shadow:0 34px 60px -40px rgba(0,0,0,.75);
  opacity:0;transform:translateY(24px);animation:opkomen .95s var(--zacht) .62s forwards;
}
.troef__item{
  display:flex;align-items:center;gap:.85rem;min-width:0;
  padding:0 clamp(.7rem,1.5vw,1.5rem);border-left:1px solid var(--lijn);
}
.troef__item:first-child{border-left:0}
.troef__item i{width:42px;height:42px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--teal-wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal-diep) 16%,transparent)}
.troef__item svg{width:19px;height:19px;stroke:var(--teal-diep);stroke-width:1.6;fill:none}
.troef__item b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:-.015em;font-variation-settings:"wdth" 104;color:var(--tekst)}
.troef__item span{display:block;font-size:.8rem;line-height:1.35;color:var(--tekst-zacht)}

@media (max-width:1100px){
  .hero__streek{left:0;width:38%}
  .hero__kolom{max-width:min(40rem,68%)}
  .hero__foto img{object-position:76% center}
}
@media (max-width:860px){
  .hero{border-radius:0 0 38px 38px}
  .hero__onder{display:none}
  .bewijsrij{display:flex}
  .punten{display:grid}
  /* Ook op een telefoon binnen een scherm blijven: de uitsnede schuift naar de
     lege kamer, zodat de tekst niet over de zwarte jas valt. */
  .hero{padding-top:clamp(5.5rem,10vh,7rem);padding-bottom:clamp(1rem,2.5vh,1.6rem)}
  /* De tekst hangt tegen de troefkaart aan in plaats van in het midden te
     zweven; daarboven blijft de foto vrij. Dat leest als een blok in plaats
     van als losse regels. */
  .hero__inhoud{flex:1;justify-content:flex-end}
  /* Twee knoppen even breed: anders staat de rechterkant rafelig. */
  .hero__knoppen{flex-direction:column;align-items:flex-start;gap:.7rem}
  /* Niet over de volle breedte: dat oogt als een formulier in plaats van als
     een keuze. Zestig procent laat de foto ernaast staan. */
  .hero__knoppen .knop{width:60%;min-width:15rem;justify-content:space-between}
  .hero__kolom{max-width:none}
  .hero__foto img{object-position:55% top}
  .hero h1{font-size:clamp(2.6rem,13.2vw,4rem)}
  .hero__lead{font-size:1rem;margin-top:1rem;max-width:38ch}
  .hero__knoppen{gap:.6rem;margin-top:1.2rem}
  .hero__knoppen .knop{padding:.55rem .55rem .55rem 1.25rem;font-size:.95rem}
  .hero__foto::after{
    /* Boven blijft de foto zichtbaar, onder wordt hij zo donker dat het logo
       op de jas niet meer door de tekst heen schemert. */
    background:
      linear-gradient(180deg,rgba(9,15,22,.72) 0%,rgba(9,15,22,.48) 24%,rgba(9,15,22,.9) 46%,rgba(9,15,22,.95) 70%,rgba(9,15,22,.96) 100%);
  }
  .handschrift{font-size:1.45rem}
  .troef{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 0;padding:1rem .6rem}
  .troef__item{padding:0 .8rem}
  .troef__item:nth-child(odd){border-left:0}
}
@media (max-width:640px){
  /* De hoogte volgt de inhoud: zo komt de volgende sectie al in beeld en is
     meteen zichtbaar dat de pagina doorloopt. */
  .hero{min-height:0;padding-bottom:.7rem}
  .diensten{padding-top:1.6rem}
  .sectiekop{margin-bottom:1.6rem}
}
@media (max-width:560px){
  .hero__streek{display:none}
  .hero .opschrift{font-size:.66rem;letter-spacing:.12em;display:block;line-height:1.75}
  .hero .opschrift::before{display:inline-block;vertical-align:middle;margin-right:.55rem}
  br.op-smal{display:inline}
  /* de drie beloftes gecentreerd in hun kolom */
  .punt{text-align:center;padding:0 .35rem}
  .punt i{margin-inline:auto}
  /* Alles wat informatie draagt blijft staan; alleen het merkzinnetje gaat
     eraf, zodat de hero op een telefoon niet te lang wordt. */
  .hero .handschrift{display:none}
  .bewijsrij{margin-top:.8rem;gap:.75rem}
  .bewijsrij__tekst b{font-size:1.35rem}
  .punten{margin-top:.8rem;padding-top:.75rem}
  .punt{padding:0 .5rem}
  .punt i{width:34px;height:34px;border-radius:11px;margin-bottom:.4rem}
  .punt svg{width:17px;height:17px}
  .punt b{font-size:.95rem}
  .punt span{font-size:.78rem;line-height:1.25}
  .stapel img{width:40px;height:40px}
  .stapel img + img{margin-left:-12px}
  .handschrift{font-size:1.5rem}
  .troef{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 0;padding:.9rem .4rem}
  .troef__item{padding:0 .7rem;gap:.65rem}
  .troef__item i{width:36px;height:36px;border-radius:11px}
  .troef__item svg{width:17px;height:17px}
  .troef__item b{font-size:.88rem}
  .troef__item > span > span{display:none}
}

/* ============================================================
   KERNPUNTEN
   ============================================================ */
.kern{background:var(--kalk);position:relative;z-index:3}
.kern__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:clamp(2.2rem,4vw,3.2rem) 0}
.kern__item{padding:0 clamp(1rem,2vw,2rem);border-left:1px solid var(--lijn)}
.kern__item:first-child{padding-left:0;border-left:0}
.kern__item i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;margin-bottom:1rem;
  background:var(--teal-wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal-diep) 16%,transparent)}
.kern__item svg{width:19px;height:19px;stroke:var(--teal-diep);stroke-width:1.6;fill:none}
.kern__item h3{font-size:1rem;font-variation-settings:"wdth" 104;margin-bottom:.35rem}
.kern__item p{font-size:.88rem;color:var(--tekst-zacht);line-height:1.5}

/* ============================================================
   DIENSTEN — genummerde regels met beeld dat de muis volgt
   ============================================================ */
.diensten{background:var(--kalk);padding:clamp(2.6rem,6vw,var(--sectie)) 0 calc(var(--sectie) - 1rem);position:relative}
.sectiekop{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sectiekop h2{margin-top:1.1rem;max-width:16ch}

.dienstlijst{border-top:1px solid var(--lijn)}
.dienst{
  position:relative;display:grid;grid-template-columns:5.5rem minmax(0,1fr) minmax(0,25ch) auto;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.5rem,2.6vw,2.1rem) 0;border-bottom:1px solid var(--lijn);
  isolation:isolate;
}
.dienst__nr{font-family:'Archivo',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.12em;color:var(--tekst-zacht);font-variant-numeric:tabular-nums}
.dienst__naam{font-family:'Archivo',sans-serif;font-size:clamp(1.35rem,2.6vw,2.15rem);font-weight:700;letter-spacing:-.03em;font-variation-settings:"wdth" 108}
.dienst__om{font-size:.9rem;color:var(--tekst-zacht);max-width:34ch}
.dienst__pijl{width:38px;height:38px;border-radius:999px;border:1px solid var(--lijn);display:grid;place-items:center}
.dienst__pijl svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none}
@media (max-width:820px){
  .dienst{grid-template-columns:3rem 1fr;row-gap:.4rem}
  .dienst__om{grid-column:2}
  .dienst__pijl{display:none}
}


/* ============================================================
   WERKWIJZE — donkere sectie met geschilderde randen
   ============================================================ */
.werkwijze{position:relative;background:var(--staal);color:#fff;padding:calc(var(--sectie) + 1rem) 0 calc(var(--sectie) + 1rem)}
.werkwijze .verfrand{background:var(--staal)}
.werkwijze::before{
  content:"";position:absolute;inset:0;opacity:.45;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 80% 0%,color-mix(in srgb,var(--teal) 18%,transparent),transparent 70%);
}
.stappen{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.5vw,2.2rem);margin-top:clamp(2.5rem,5vw,3.8rem)}
.stappen::before{ /* de geschilderde lijn door de stappen */
  content:"";position:absolute;left:3%;right:3%;top:14px;height:12px;background:color-mix(in srgb,var(--teal) 42%,transparent);
  -webkit-mask:url('../images/streek.svg') center/100% 100% no-repeat;mask:url('../images/streek.svg') center/100% 100% no-repeat;
}
.stap__bol{
  position:relative;width:38px;height:38px;border-radius:999px;display:grid;place-items:center;
  background:var(--staal);border:1px solid rgba(255,255,255,.2);
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.9rem;color:var(--teal);
}
.stap h3{margin:1.4rem 0 .5rem;font-size:1.15rem;font-variation-settings:"wdth" 104}
.stap p{font-size:.9rem;color:rgba(255,255,255,.62);line-height:1.6}

/* ============================================================
   PROJECTEN
   ============================================================ */
.projecten{background:var(--kalk);padding:var(--sectie) 0}
.proj-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.9rem,1.6vw,1.4rem)}
.proj{
  position:relative;overflow:hidden;border-radius:var(--r);background:var(--leisteen);color:#fff;
  display:flex;align-items:flex-end;min-height:280px;isolation:isolate;
  transition:transform .7s var(--zacht),box-shadow .7s var(--zacht);
}
.proj:hover{transform:translateY(-6px);box-shadow:0 46px 70px -50px rgba(0,0,0,.65)}
.proj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s var(--zacht),filter .7s ease;filter:saturate(.92)}
.proj:hover img{transform:scale(1.045);filter:saturate(1.05)}
.proj::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,16,24,.92) 6%,rgba(10,16,24,.55) 42%,rgba(10,16,24,.12) 78%)}
.proj__in{padding:clamp(1.2rem,2vw,1.7rem)}
.proj__meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem}
.chip{
  font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .62rem;border-radius:999px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.chip--teal{background:var(--teal);color:var(--inkt);border-color:transparent}
.proj h3{font-size:clamp(1.15rem,1.8vw,1.55rem);font-variation-settings:"wdth" 106}
.proj p{margin-top:.5rem;font-size:.88rem;color:rgba(255,255,255,.7);max-width:46ch}
.proj--groot{grid-column:span 4;min-height:min(58vh,480px)}
.proj--half{grid-column:span 2;min-height:min(58vh,480px)}
.proj--derde{grid-column:span 2}
@media (max-width:900px){
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .proj--groot,.proj--half,.proj--derde{grid-column:span 2;min-height:300px}
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{background:var(--kalk-2);padding:var(--sectie) 0;position:relative;overflow:hidden}
.veeghint{display:none;align-items:center;gap:.5rem;margin-top:1.4rem;font-size:.85rem;color:var(--tekst-zacht)}
.veeghint svg{width:16px;height:16px;stroke:var(--teal-diep);stroke-width:1.8;fill:none}
.rev-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1rem,2vw,1.6rem);align-items:start}
.rev-groot{
  background:var(--wit);border-radius:var(--r);padding:clamp(1.8rem,3.4vw,2.9rem);
  box-shadow:0 30px 60px -50px rgba(20,26,34,.5);position:relative;overflow:hidden;
}
.rev-groot::before{
  content:"";position:absolute;right:-56px;bottom:-70px;width:300px;height:300px;opacity:.035;z-index:0;
  background:var(--leisteen);
  -webkit-mask:url('../images/mark-donker.png') center/contain no-repeat;mask:url('../images/mark-donker.png') center/contain no-repeat;
}
.rev-groot>*{position:relative;z-index:1}
.rev-groot > :first-child{margin-top:0}
.rev-klein > p:first-child{margin-top:0}
.rev-groot blockquote{
  margin:0;font-family:'Archivo',sans-serif;font-size:clamp(1.25rem,2.1vw,1.7rem);
  font-weight:600;letter-spacing:-.025em;line-height:1.3;font-variation-settings:"wdth" 104;
}
.rev-klein{background:var(--wit);border-radius:18px;padding:1.4rem 1.5rem;box-shadow:0 20px 40px -44px rgba(20,26,34,.6)}
.rev-klein + .rev-klein,
.rev-groot + .rev-klein{margin-top:clamp(1rem,2vw,1.6rem)}
.rev-klein p{font-size:.92rem;color:var(--tekst-zacht);margin-top:.7rem;line-height:1.6}
.rev-naam{display:flex;align-items:center;gap:.7rem;margin-top:1.4rem;font-size:.88rem}
.rev-naam b{font-weight:600}
.rev-naam span{color:var(--tekst-zacht)}
.initiaal{
  width:36px;height:36px;border-radius:999px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--leisteen);color:#fff;font-family:'Archivo',sans-serif;font-weight:700;font-size:.85rem;
}
.teller{display:inline-flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--tekst-zacht)}
@media (max-width:900px){.rev-grid{grid-template-columns:1fr}}

/* ============================================================
   OVER — de vakman
   ============================================================ */
.over{background:var(--kalk);padding:var(--sectie) 0}
.over__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.over__beeld{position:relative;border-radius:var(--r);overflow:hidden;background:var(--leisteen)}
.over__beeld img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center}
.over__beeld figcaption{
  position:absolute;left:1rem;bottom:1rem;right:1rem;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.7rem .95rem;border-radius:14px;color:#fff;font-size:.82rem;
  background:rgba(14,22,32,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);
}
.feiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2rem;margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--lijn)}
.feit dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tekst-zacht);font-weight:600}
.feit dd{margin:.35rem 0 0;font-family:'Archivo',sans-serif;font-size:1.05rem;font-weight:600;letter-spacing:-.02em;font-variation-settings:"wdth" 104}
@media (max-width:900px){.over__grid{grid-template-columns:1fr}}

/* ============================================================
   CONTACT / CTA
   ============================================================ */
.contact{position:relative;background:var(--inkt);color:#fff;padding:calc(var(--sectie) + 1rem) 0 var(--sectie);overflow:hidden}
.contact .verfrand{background:var(--inkt)}
.contact::before{
  content:"";position:absolute;right:-10%;bottom:-20%;width:60vw;height:60vw;max-width:800px;max-height:800px;
  background:radial-gradient(circle,color-mix(in srgb,var(--teal) 24%,transparent),transparent 62%);filter:blur(100px);opacity:.55;
}
.contact--rand{
  padding-bottom:calc(var(--sectie) + 58px);
  -webkit-mask-image:linear-gradient(#000,#000),url('../images/verfrand-2.svg');
          mask-image:linear-gradient(#000,#000),url('../images/verfrand-2.svg');
  -webkit-mask-size:100% calc(100% - 58px),100% 60px;
          mask-size:100% calc(100% - 58px),100% 60px;
  -webkit-mask-position:top left,bottom left;
          mask-position:top left,bottom left;
  -webkit-mask-repeat:no-repeat,no-repeat;
          mask-repeat:no-repeat,no-repeat;
}
.contact__grid{position:relative;display:grid;grid-template-columns:1fr .92fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.kanalen{display:grid;gap:.7rem;margin-top:2.4rem}
.kanaal{
  display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  transition:background-color .5s var(--zacht),transform .5s var(--zacht),border-color .5s var(--zacht);
}
.kanaal:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);transform:translateX(5px)}
.kanaal__icoon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--teal) 20%,transparent);flex:0 0 auto}
.kanaal__icoon svg{width:17px;height:17px;stroke:var(--teal);stroke-width:1.7;fill:none}
.kanaal b{display:block;font-weight:600;font-size:.98rem}
.kanaal span{font-size:.83rem;color:rgba(255,255,255,.55)}

.formulier{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:calc(var(--r) + 4px);
  padding:clamp(1.4rem,2.6vw,2.1rem);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.veld{display:block;margin-bottom:1rem}
.veld span{display:block;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:.45rem;font-weight:600}
.veld input,.veld textarea,.veld select{
  width:100%;padding:.85rem 1rem;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);color:#fff;font:inherit;font-size:.95rem;
  transition:border-color .4s var(--zacht),background-color .4s var(--zacht),box-shadow .4s var(--zacht);
}
.veld textarea{min-height:110px;resize:vertical}
.veld input::placeholder,.veld textarea::placeholder{color:rgba(255,255,255,.32)}
.veld input:focus,.veld textarea:focus,.veld select:focus{
  outline:0;border-color:var(--teal);background:rgba(255,255,255,.08);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 18%,transparent);
}
.veld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.veld select option{background:var(--staal)}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr}}
@media (max-width:520px){.rij{grid-template-columns:1fr;gap:0}}

/* ============================================================
   FOOTER
   ============================================================ */
.voet{background:var(--inkt);color:rgba(255,255,255,.6);padding:0 0 2.5rem;font-size:.88rem}
.voet__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding:3rem 0;border-top:1px solid rgba(255,255,255,.1)}
.voet h4{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:1rem;font-weight:600;font-family:'Public Sans',sans-serif}
.voet a:hover{color:#fff}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.voet__logo{height:44px;width:auto;margin-bottom:1.1rem}
/* De bouwcredit is een link naar buiten: merkkleur, en bij hover onderstreept. */
.voet__onder .bouwer{color:var(--teal);font-weight:600}
.voet__onder .bouwer:hover{color:var(--teal-helder);text-decoration:underline;text-underline-offset:3px}
.voet__onder{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.08);font-size:.8rem;color:rgba(255,255,255,.4)}
@media (max-width:820px){.voet__grid{grid-template-columns:1fr 1fr}}

/* voortgangsbalk — de roller die de pagina uitrolt */
.voortgang{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none;
  background:linear-gradient(90deg,var(--teal-diep),var(--teal) 60%,var(--teal-helder));
  transform:scaleX(0);transform-origin:left center;
  box-shadow:0 0 18px color-mix(in srgb,var(--teal) 55%,transparent);}
/* Alleen op laptop. Vanaf hier neemt de menulade het over — op een telefoon of
   tablet scrollt de balk mee met de adresbalk in beeld en is het een streepje
   te veel. */
@media (max-width:1060px){.voortgang{display:none}}

/* ============================================================
   MOTION — scroll-onthullingen
   ============================================================ */
.toon{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .9s var(--zacht),transform .9s var(--zacht),filter .9s var(--zacht)}
.toon.is-zichtbaar{opacity:1;transform:none;filter:none}
.toon.direct{transition:none}
.toon[data-vertraag="1"]{transition-delay:.08s}
.toon[data-vertraag="2"]{transition-delay:.16s}
.toon[data-vertraag="3"]{transition-delay:.24s}
.toon[data-vertraag="4"]{transition-delay:.32s}

/* openingschoreografie */
.intro>*{opacity:0;transform:translateY(24px);animation:opkomen .95s var(--zacht) forwards}
.intro>*:nth-child(1){animation-delay:.15s}
.intro>*:nth-child(2){animation-delay:.25s}
.intro>*:nth-child(3){animation-delay:.35s}
.intro>*:nth-child(4){animation-delay:.45s}
.intro>*:nth-child(5){animation-delay:.58s}
@keyframes opkomen{to{opacity:1;transform:none}}
.streek::before{animation:verven 1.1s var(--veer) .85s both}
@keyframes verven{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .toon{opacity:1;transform:none;filter:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIEF
   ============================================================ */
@media (max-width:1060px){
  .kern__grid{grid-template-columns:repeat(2,1fr);gap:2rem 0}
  .kern__item:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:640px){
  .kern__grid{grid-template-columns:1fr;gap:1.6rem}
  .kern__item{padding-left:0;border-left:0}
  .feiten{grid-template-columns:1fr}
}

/* ============================================================
   ONDERDELEN VOOR DE VERVOLGPAGINA'S
   ============================================================ */

/* actieve pagina in de navigatie */
.nav__links a[aria-current="page"]{color:#fff}
.nav__links a[aria-current="page"]::after{transform:scaleX(1);opacity:.5}
.menu a[aria-current="page"]{color:var(--teal)}

/* ---------- paginakop ---------- */
.paginakop{
  position:relative;background:var(--inkt);color:#fff;overflow:hidden;
  padding:clamp(8rem,13vw,10.5rem) 0 calc(clamp(4rem,7vw,6rem) + 58px);
  /* De geverfde onderrand zit in het masker van de sectie zelf. Een los
     element eronder zou door overflow:hidden worden weggeknipt, en dat
     is nodig om de tealgloed binnen de sectie te houden. */
  -webkit-mask-image:linear-gradient(#000,#000),url('../images/verfrand.svg');
          mask-image:linear-gradient(#000,#000),url('../images/verfrand.svg');
  -webkit-mask-size:100% calc(100% - 58px),100% 60px;
          mask-size:100% calc(100% - 58px),100% 60px;
  -webkit-mask-position:top left,bottom left;
          mask-position:top left,bottom left;
  -webkit-mask-repeat:no-repeat,no-repeat;
          mask-repeat:no-repeat,no-repeat;
}
.paginakop--rand2{
  -webkit-mask-image:linear-gradient(#000,#000),url('../images/verfrand-2.svg');
          mask-image:linear-gradient(#000,#000),url('../images/verfrand-2.svg');
}

.paginakop::before{
  content:"";position:absolute;left:-10%;top:-20%;width:50vw;height:50vw;max-width:680px;max-height:680px;
  background:radial-gradient(circle,color-mix(in srgb,var(--teal) 26%,transparent),transparent 65%);
  filter:blur(90px);opacity:.5;pointer-events:none;
}
.paginakop::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 25% 40%,#000 15%,transparent 72%);
          mask-image:radial-gradient(ellipse 70% 70% at 25% 40%,#000 15%,transparent 72%);
}
.paginakop .wrap{position:relative;z-index:1}
.paginakop h1{font-size:clamp(2.5rem,5.6vw,4.4rem);margin:1.2rem 0 0;max-width:15ch}
.paginakop .lead{margin-top:1.5rem}
.paginakop__feiten{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.1)}
.paginakop__feiten span{font-size:.86rem;color:rgba(255,255,255,.62)}
.paginakop__feiten strong{color:#fff;font-weight:600}

/* kruimelpad */
.kruimels{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:rgba(255,255,255,.5);margin-bottom:.9rem}
.kruimels a:hover{color:#fff}
.kruimels svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.6;fill:none}

/* ---------- ankerbalk ---------- */
.ankers{position:sticky;top:0;z-index:30;background:var(--kalk);border-bottom:1px solid var(--lijn)}
.ankers__rij{display:flex;gap:.5rem;overflow-x:auto;padding:.9rem 0;scrollbar-width:none}
.ankers__rij::-webkit-scrollbar{display:none}
.ankers a{
  flex:0 0 auto;padding:.45rem .95rem;border-radius:999px;font-size:.85rem;font-weight:500;
  border:1px solid var(--lijn);color:var(--tekst-zacht);white-space:nowrap;
  transition:background-color .4s var(--zacht),color .4s var(--zacht),border-color .4s var(--zacht);
}
.ankers a:hover{background:var(--leisteen);border-color:var(--leisteen);color:#fff}

/* ---------- dienstblok (detailpagina) ---------- */
.dienstblok{padding:clamp(3.5rem,7vw,6rem) 0;border-bottom:1px solid var(--lijn);scroll-margin-top:5.5rem}
.dienstblok:last-of-type{border-bottom:0}
.dienstblok__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.dienstblok--gedraaid .dienstblok__figuur{order:-1}
.dienstblok__nr{
  font-family:'Archivo',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.18em;
  color:var(--teal-diep);font-variant-numeric:tabular-nums;
}
.dienstblok h2{font-size:clamp(1.8rem,3.4vw,2.7rem);margin:.9rem 0 0}
.dienstblok p{color:var(--tekst-zacht);margin-top:1.1rem;max-width:56ch}
.dienstblok__figuur{position:relative;border-radius:var(--r);overflow:hidden;background:var(--leisteen)}
.dienstblok__figuur img{width:100%;aspect-ratio:5/4;object-fit:cover;transition:transform 1.2s var(--zacht)}
.dienstblok__figuur:hover img{transform:scale(1.03)}
.dienstblok__figuur figcaption{
  position:absolute;left:1rem;bottom:1rem;padding:.5rem .85rem;border-radius:999px;font-size:.76rem;
  color:#fff;background:rgba(14,22,32,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);
}
@media (max-width:900px){
  .dienstblok__grid{grid-template-columns:1fr}
  .dienstblok--gedraaid .dienstblok__figuur{order:0}
}

/* vinklijst met de kwaststreek als opsommingsteken */
.vinklijst{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.65rem}
.vinklijst li{position:relative;padding-left:1.9rem;font-size:.95rem}
.vinklijst li::before{
  content:"";position:absolute;left:0;top:.42em;width:1.1rem;height:.5rem;background:var(--teal-diep);
  -webkit-mask:url("../images/streek-2.svg") center/100% 100% no-repeat;
          mask:url("../images/streek-2.svg") center/100% 100% no-repeat;
}
.op-donker .vinklijst li::before{background:var(--teal)}

/* ---------- projectblok (detailpagina) ---------- */
.projectblok{padding:clamp(3.5rem,7vw,6rem) 0;border-bottom:1px solid var(--lijn);scroll-margin-top:5.5rem}
.projectblok:last-of-type{border-bottom:0}
.projectblok__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4.5vw,4rem);align-items:start}
.projectblok__beeld{border-radius:var(--r);overflow:hidden;background:var(--leisteen);position:relative}
.projectblok__beeld img{width:100%;aspect-ratio:4/3;object-fit:cover}
.projectblok h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-top:1rem}
.projectblok p{color:var(--tekst-zacht);margin-top:1rem}
.projectblok .proj__meta{margin-bottom:0}
.projectblok .chip{color:var(--tekst-zacht);border-color:var(--lijn);background:transparent}
.projectblok .chip--teal{background:var(--teal-diep);color:#fff;border-color:transparent}
.werkkaart{
  background:var(--wit);border-radius:var(--r);padding:clamp(1.4rem,2.4vw,2rem);
  box-shadow:0 30px 60px -55px rgba(20,26,34,.55);border:1px solid var(--lijn);
}
.werkkaart h3{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tekst-zacht);font-family:'Public Sans',sans-serif;font-weight:600}
@media (max-width:900px){.projectblok__grid{grid-template-columns:1fr}}

/* ---------- veelgestelde vragen ---------- */
.vragen{display:grid;gap:.7rem;margin-top:clamp(2rem,4vw,3rem)}
.vraag{
  background:var(--wit);border:1px solid var(--lijn);border-radius:18px;overflow:hidden;
  transition:border-color .5s var(--zacht),box-shadow .5s var(--zacht);
}
.vraag[open]{border-color:color-mix(in srgb,var(--teal-diep) 35%,transparent);box-shadow:0 24px 50px -50px rgba(20,26,34,.6)}
.vraag summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;cursor:pointer;list-style:none;
  padding:1.15rem 1.4rem;font-family:'Archivo',sans-serif;font-weight:600;font-size:1.02rem;
  letter-spacing:-.015em;font-variation-settings:"wdth" 104;
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{
  content:"";flex:0 0 auto;width:11px;height:11px;border-right:2px solid var(--teal-diep);border-bottom:2px solid var(--teal-diep);
  transform:rotate(45deg) translateY(-3px);transition:transform .5s var(--veer);
}
.vraag[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.vraag summary:focus-visible{outline:2px solid var(--teal-diep);outline-offset:-3px}
.vraag__tekst{padding:0 1.4rem 1.35rem;color:var(--tekst-zacht);font-size:.95rem;max-width:72ch}

/* ---------- oproepbalk onderaan de vervolgpagina's ---------- */
.oproep{position:relative;background:var(--staal);color:#fff;padding:clamp(3.5rem,7vw,5.5rem) 0;overflow:hidden}
.oproep::before{
  content:"";position:absolute;right:-8%;top:-40%;width:52vw;height:52vw;max-width:700px;max-height:700px;
  background:radial-gradient(circle,color-mix(in srgb,var(--teal) 22%,transparent),transparent 65%);
  filter:blur(90px);opacity:.6;pointer-events:none;
}
.oproep__grid{position:relative;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.oproep h2{font-size:clamp(1.8rem,3.6vw,2.8rem);max-width:18ch}
.oproep .knoppen{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---------- lopende tekst (privacyverklaring) ---------- */
.prose{padding:clamp(3rem,6vw,5rem) 0;max-width:72ch}
.prose h2{font-size:clamp(1.35rem,2.4vw,1.75rem);margin:2.6rem 0 .9rem}
.prose h2:first-of-type{margin-top:0}
.prose p,.prose li{color:var(--tekst-zacht);margin-top:.9rem}
.prose ul{padding-left:1.2rem;margin:0}
.prose a{color:var(--teal-diep);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- contactkaarten ---------- */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.6vw,1.4rem);margin-top:clamp(2rem,4vw,3rem)}
.info-kaart{
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:clamp(1.3rem,2.2vw,1.8rem);
  box-shadow:0 28px 55px -55px rgba(20,26,34,.5);
}
.info-kaart i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;margin-bottom:1rem;
  background:var(--teal-wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal-diep) 16%,transparent)}
.info-kaart svg{width:19px;height:19px;stroke:var(--teal-diep);stroke-width:1.6;fill:none}
.info-kaart h3{font-size:1.05rem;margin-bottom:.4rem}
.info-kaart p{font-size:.9rem;color:var(--tekst-zacht)}
.info-kaart a{color:var(--teal-diep);font-weight:600}
@media (max-width:860px){.info-grid{grid-template-columns:1fr}}

/* toetsenbordfocus overal zichtbaar */
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}

/* ---------- formulier: foutmeldingen en statusregel ---------- */
.veld__fout{display:none;margin-top:.45rem;font-size:.82rem;color:#FFB4A8;letter-spacing:0}
.veld[data-fout] .veld__fout{display:block}
.veld[data-fout] input,.veld[data-fout] select,.veld[data-fout] textarea{
  border-color:#E2725B;background:color-mix(in srgb,#E2725B 10%,transparent);
}
.veld[data-fout] input:focus,.veld[data-fout] textarea:focus,.veld[data-fout] select:focus{
  box-shadow:0 0 0 4px color-mix(in srgb,#E2725B 22%,transparent);
}
.formulier__status{
  display:none;align-items:flex-start;gap:.7rem;margin-bottom:1.2rem;padding:.9rem 1.1rem;border-radius:14px;
  font-size:.88rem;line-height:1.5;border:1px solid transparent;
}
.formulier__status[data-soort]{display:flex}
.formulier__status svg{width:19px;height:19px;flex:0 0 auto;margin-top:.1rem}
.formulier__status strong{display:block;font-weight:600}
.formulier__status a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.formulier__status[data-soort="bezig"]{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.8)}
.formulier__status[data-soort="gelukt"]{background:color-mix(in srgb,var(--teal) 14%,transparent);border-color:color-mix(in srgb,var(--teal) 45%,transparent);color:#CFF7F8}
.formulier__status[data-soort="fout"]{background:color-mix(in srgb,#E2725B 16%,transparent);border-color:color-mix(in srgb,#E2725B 45%,transparent);color:#FFD9D2}
.formulier__status:focus{outline:2px solid var(--teal);outline-offset:3px}

/* de verplicht-ster hoort bij het label, niet in de plaatshouder */
.veld span sup{color:var(--teal);font-size:.9em;margin-left:.15em}

/* ============================================================
   ONE-PAGER
   ============================================================ */

/* Springen naar een anker mag niet onder de vaste navigatie eindigen. */
section[id]{scroll-margin-top:5.5rem}

/* De navigatie licht op bij de sectie waar de bezoeker is. Zelfde
   opmaak als aria-current op de vervolgpagina's, maar zachter: dit
   volgt het scrollen en hoort niet te schreeuwen. */
.nav__links a.is-hier{color:#fff}
.nav__links a.is-hier::after{transform:scaleX(1);opacity:.45}
.menu a.is-hier{color:var(--teal)}

/* ============================================================
   KLEINE SCHERMEN — gemeten op 320, 360, 390, 430 en 768px
   ============================================================ */

/* De hero-kop staat op één regel ("onze expertise." mag niet breken, anders
   klopt de kwaststreek niet meer). Op 320px was 2,9rem daardoor breder dan
   het scherm; de ondergrens gaat omlaag, de bovengrens blijft gelijk. */
.hero h1{font-size:clamp(2.15rem,7.2vw,5.9rem)}
.paginakop h1{font-size:clamp(2.05rem,5.6vw,4.4rem)}

/* Lange woorden zonder afbreekpunt (e-mailadres, "vastgoedbeheerders") mogen
   een raster niet oprekken. */
.voet ul,.voet p,.kanaal,.info-kaart p,.feit dd{overflow-wrap:anywhere}

/* Tikdoelen: minstens 24px hoog met ruimte eromheen (WCAG 2.5.8), en de
   knoppen en formuliervelden ruim boven de 44px. */
.voet ul{gap:.75rem}
.voet ul a{display:inline-block;padding:.2rem 0}
.tekstlink{padding-block:.4rem}
.kruimels a{display:inline-block;padding:.25rem 0}
.ankers a{padding:.6rem 1rem}

/* Etiketten waren met 10,9px net te klein om prettig te lezen op een telefoon. */
.chip{font-size:.72rem}
.opschrift{font-size:.72rem}

@media (max-width:640px){
  /* Twee kolommen naast elkaar: het merkblok en de contactgegevens over de
     volle breedte (daar staan de lange regels), de twee lijstjes ernaast. */
  .voet{padding-bottom:1.8rem}
  .voet__grid{grid-template-columns:1fr 1fr;gap:1.6rem 1.2rem;padding:2.2rem 0}
  .voet__grid > div:first-child,
  .voet__grid > div:last-child{grid-column:1 / -1}
  .voet ul{gap:.35rem}
  .voet ul a{padding:.15rem 0}
  .voet h4{margin-bottom:.6rem}
  .voet__logo{height:38px;margin-bottom:.8rem}
  .voet__onder{flex-direction:column;gap:.4rem;padding-top:1.2rem}
  .sectiekop{gap:1.2rem}
}

@media (max-width:380px){
  /* Op de kleinste telefoons (iPhone SE) schuift alles nog een slag terug. */
  .hero h1{font-size:2.05rem}
  .kop-l{font-size:1.85rem}
}

/* Een lange samenstelling ("Nieuwbouwappartement") in een kop rekte op 320px
   de rasterkolom op, waardoor de hele pagina breder werd dan het scherm.
   min-width:0 haalt de automatische minimumbreedte van de rasteritems weg,
   en de kop mag als laatste redmiddel binnen het woord afbreken. */
.projectblok__grid > *,.dienstblok__grid > *,.over__grid > *,.contact__grid > *{min-width:0}
.projectblok h2,.dienstblok h2,.proj h3,.kop-l,.hero h1,.paginakop h1{overflow-wrap:break-word}
.projectblok h2{font-size:clamp(1.45rem,3vw,2.3rem)}

/* iOS zoomt automatisch in zodra een invoerveld kleiner is dan 16px en zoomt
   daarna niet terug. Op smalle schermen dus exact 16px aanhouden. */
@media (max-width:820px){
  .veld input,.veld select,.veld textarea{font-size:16px}
}


/* ---------- de balk op smallere schermen ---------- */
@media (max-width:1400px){
  /* Vanaf hier zouden de gecentreerde items tegen de telefoonpil lopen; het
     nummer staat ook in de lade en in de footer. */
  .nav__tel{display:none}
  /* de telefoonpil droeg de auto-marge die de knop naar rechts duwt */
  .nav__knop{margin-left:auto}
}
@media (max-width:1060px){
  /* Onder deze breedte neemt de lade het over: alleen logo, offerteknop
     en de ladeknop blijven staan. */
  .nav__links{display:none}
  .lade{display:block}
  .nav__binnen{padding-right:4rem}
  .nav .knop{margin-left:auto}
}
@media (max-width:720px){
  .nav .knop{display:none}
  .nav__logo img{height:42px}
  .nav__binnen{padding-left:1.1rem}
  .rev-groot::before{display:none}
}

/* ============================================================
   DRIE SECTIES OP MOBIEL
   Alleen onder 880px; op laptop blijft alles zoals het is.
   ============================================================ */

@media (max-width:880px){

  /* ---------- Werkwijze: een verticale tijdlijn ----------
     Vier losse blokken onder elkaar lazen als een opsomming. Met de lijn
     erdoorheen en de bollen erop zie je in één oogopslag dat het een
     volgorde is. */
  .stappen{
    grid-template-columns:1fr;row-gap:0;position:relative;
    padding-left:66px;margin-top:clamp(2rem,5vw,2.8rem);
  }
  .stappen::before{
    display:block;content:"";position:absolute;
    left:19px;top:14px;bottom:14px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--teal),color-mix(in srgb,var(--teal) 25%,transparent));
    -webkit-mask:none;mask:none;
  }
  .stap{position:relative;padding-bottom:1.9rem}
  .stap:last-child{padding-bottom:0}
  .stap__bol{
    position:absolute;left:-66px;top:-2px;width:40px;height:40px;
    background:var(--staal);border-color:color-mix(in srgb,var(--teal) 55%,transparent);
    font-size:.95rem;
  }
  .stap h3{margin:0 0 .4rem}
  .stap p{font-size:.92rem}

  /* ---------- Reviews: een veegbare rij ----------
     Vijf kaarten onder elkaar maakten de sectie bijna twee schermen lang.
     Als rij met scroll-snap veeg je erdoorheen; de halve kaart aan de rand
     laat zien dat er meer staat. Zonder JavaScript werkt dit gewoon. */
  .rev-grid{
    display:flex;gap:.9rem;align-items:stretch;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    margin-inline:calc(var(--maat) * -1);padding-inline:var(--maat);
    scroll-padding-inline:var(--maat);
    overflow-y:hidden;padding-block:.4rem;scrollbar-width:none;-ms-overflow-style:none;
  }
  /* In de rij schuiven de kaarten niet omhoog bij het onthullen: die 26px
     zouden onder de verborgen overloop wegvallen. */
  .rev-grid .toon{transform:none;filter:none
  }
  .rev-grid::-webkit-scrollbar{display:none}
  .rev-grid > div{display:contents}
  .rev-groot,.rev-klein{
    flex:0 0 min(20.5rem,84%);scroll-snap-align:start;margin-top:0;
    display:flex;flex-direction:column;
  }
  .rev-klein + .rev-klein,
  .rev-groot + .rev-klein{margin-top:0}
  /* In de veegrij staan de kaarten naast elkaar in plaats van in een
     compositie. Het verschil in maat en gewicht tussen de grote en de kleine
     kaart leest daar niet als rangschikking maar als slordigheid, dus krijgen
     alle vijf exact dezelfde vorm: hetzelfde kader en dezelfde tekst.
     Op laptop blijft de compositie ongemoeid. */
  .rev-groot{
    border-radius:18px;padding:1.4rem 1.5rem;
    box-shadow:0 20px 40px -44px rgba(20,26,34,.6);
  }
  .rev-groot::before{display:none}
  .rev-groot blockquote{
    font-family:inherit;font-size:.92rem;font-weight:400;line-height:1.6;
    letter-spacing:normal;color:var(--tekst-zacht);font-variation-settings:normal;
  }
  .rev-naam{margin-top:auto;padding-top:1.1rem}
  .veeghint{display:flex}

  /* ---------- Over Wadixx ---------- */
  .over__grid{gap:1.8rem}
  /* Een verschoven teal vlak achter de foto, als een verfstaal dat eronder
     uit piept. Als schaduw, want de foto zelf klipt zijn eigen hoeken. */
  .over__beeld{box-shadow:12px 12px 0 -2px color-mix(in srgb,var(--teal) 32%,transparent)}
  .over{padding-block:clamp(2.6rem,7vw,var(--sectie))}
  .over .lead{font-size:1rem}
  /* De feiten als vier tegels in plaats van een lijstje onder elkaar. */
  .feiten{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:1.8rem;padding-top:0;
    border-top:0;border-radius:18px;overflow:hidden;background:var(--kalk-2);
  }
  .feit{padding:1rem 1.1rem;border-top:1px solid var(--lijn);border-left:1px solid var(--lijn)}
  .feit:nth-child(-n+2){border-top:0}
  .feit:nth-child(odd){border-left:0}
  .feit dt{font-size:.66rem;letter-spacing:.14em}
  .feit dd{font-size:.95rem;margin-top:.3rem}
}

@media (max-width:520px){
  .stappen{padding-left:58px}
  .stap__bol{left:-58px;width:36px;height:36px}
  .stappen::before{left:17px}
}