/* ==========================================================================
   Praktijk Nova — stijlblad
   Huisstijl: Mulberry Dusk, Drift Sand, Sage Haze, Soft Linen, Earthwood + Lato
   Alle kleuren staan hieronder bij :root. Pas ze daar aan, niet verderop.
   ========================================================================== */

/* --- Lettertype Lato (staat in assets/fonts, geen externe verbinding nodig) - */
@font-face{font-family:Lato;src:url(../fonts/lato-300.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url(../fonts/lato-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url(../fonts/lato-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Lato;src:url(../fonts/lato-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* --- Huisstijlwaarden ----------------------------------------------------- */
:root{
  --mulberry:#59466B;        /* primaire kleur */
  --mulberry-diep:#3D3050;   /* donkere vlakken */
  --mulberry-licht:#9C8AB4;
  --zand:#D8CBB8;            /* Drift Sand */
  --salie:#A8B0A0;           /* Sage Haze */
  --linnen:#F5F1EC;          /* Soft Linen */
  --linnen-warm:#FBF8F4;
  --zand-vlak:#EFE7DC;       /* zachte zandband */
  --aardehout:#6F5A4E;       /* Earthwood */
  --tekst:#38304A;
  --tekst-zacht:#6B6377;
  --oranje:#FF7300;          /* accent van Creative&Co */

  --lees:64ch;
  --rand:clamp(1.25rem,5vw,4rem);
  --breed:1220px;
  --soepel:cubic-bezier(.22,.61,.36,1);
}

/* --- Basis ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--linnen);color:var(--tekst);
  font-family:Lato,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;font-size:clamp(1.02rem,.55vw + .9rem,1.15rem);
  line-height:1.78;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:var(--mulberry);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--aardehout)}
:focus-visible{outline:2px solid var(--mulberry);outline-offset:3px;border-radius:4px}
::selection{background:var(--zand);color:var(--mulberry-diep)}

h1,h2,h3,h4{font-weight:300;line-height:1.14;letter-spacing:-.012em;color:var(--mulberry);margin:0 0 .6em}
h1{font-size:clamp(2.4rem,6.2vw,4.25rem)}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:400;letter-spacing:0}
p{margin:0 0 1.15em;max-width:var(--lees)}
strong{font-weight:700;color:var(--mulberry)}

.container{width:min(100% - var(--rand)*2,var(--breed));margin-inline:auto}
.smal{max-width:760px}
.sectie{padding-block:clamp(3.5rem,9vw,7.5rem);position:relative}
.sectie--kort{padding-block:clamp(2.5rem,6vw,4.5rem)}

/* gecentreerde inleiding boven een sectie */
.mid{text-align:center;max-width:720px;margin-inline:auto}
.mid p{margin-inline:auto}
.mid .knoppen{justify-content:center}
.mid .lijst{text-align:left;display:inline-block}

/* --- Gekleurde vlakken met organische randen ------------------------------ */
.vlak{position:relative}
.vlak--zand{background:var(--zand-vlak)}
.vlak--diep{background:var(--mulberry-diep);color:#E3DCE8}
.vlak--diep h1,.vlak--diep h2,.vlak--diep h3{color:#fff}
.vlak--diep p{color:#D5CDDC}
.vlak--diep a:not(.knop){color:var(--zand)}
.vlak--diep strong{color:var(--zand)}

/* de golf die een vlak van de rest scheidt */
.golf{position:absolute;left:0;width:100%;line-height:0;pointer-events:none;z-index:2}
.golf svg{width:100%;height:clamp(40px,6vw,90px);display:block}
.golf--boven{top:0;transform:translateY(-99%)}
.golf--onder{bottom:0;transform:translateY(99%) scaleY(-1)}
/* golf die over een fotoband heen ligt */
.golf--dek-boven{top:0;transform:scaleY(-1)}
.golf--dek-onder{bottom:0}

/* --- Kop van de pagina ---------------------------------------------------- */
.kop{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;gap:1.5rem;
  padding:clamp(.8rem,1.6vw,1.4rem) var(--rand);
  transition:background .45s var(--soepel),box-shadow .45s var(--soepel),padding .45s var(--soepel);
}
.kop.vast{background:rgba(245,241,236,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(89,70,107,.12);padding-block:.55rem}
.kop__logo{display:block;flex:0 0 auto;transition:opacity .4s var(--soepel)}
body.is-home .kop:not(.vast) .kop__logo{opacity:0;pointer-events:none}
.kop__logo img{width:clamp(150px,17vw,220px);transition:width .45s var(--soepel)}
.kop.vast .kop__logo img{width:clamp(132px,13vw,172px)}

.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2vw,2rem)}
.nav a{position:relative;color:var(--mulberry);text-decoration:none;font-size:clamp(.82rem,.8vw,.98rem);padding-block:.35rem}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:.05rem;height:1px;background:var(--mulberry);transition:right .45s var(--soepel)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:var(--aardehout)}
.nav a[aria-current="page"]::after{background:var(--aardehout)}

/* --- Knoppen -------------------------------------------------------------- */
.knop{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85em 1.9em;border-radius:999px;border:1px solid var(--mulberry);
  background:var(--mulberry);color:var(--linnen);text-decoration:none;
  font-size:1rem;line-height:1;cursor:pointer;
  transition:background .3s var(--soepel),color .3s var(--soepel),transform .3s var(--soepel);
}
.knop:hover{background:var(--mulberry-diep);border-color:var(--mulberry-diep);color:#fff;transform:translateY(-2px)}
.knop--lijn{background:transparent;color:var(--mulberry)}
.knop--lijn:hover{background:var(--mulberry);color:var(--linnen)}
.knop--licht{background:var(--zand);border-color:var(--zand);color:var(--mulberry-diep)}
.knop--licht:hover{background:#fff;border-color:#fff;color:var(--mulberry-diep)}
.knoppen{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}

/* --- Mobiel menu ---------------------------------------------------------- */
.menu-knop{display:none;margin-left:auto;width:46px;height:46px;border:0;background:none;cursor:pointer;padding:0;position:relative;z-index:80}
.menu-open .kop{z-index:80;background:transparent;box-shadow:none;backdrop-filter:none}
.menu-open .kop__logo{opacity:0;pointer-events:none}
.menu-knop span{display:block;height:1.5px;width:26px;margin:6px auto;background:var(--mulberry);transition:transform .4s var(--soepel),opacity .3s}
.menu-open .menu-knop span{background:var(--linnen)}
.menu-open .menu-knop span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-open .menu-knop span:nth-child(2){opacity:0}
.menu-open .menu-knop span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.overlay{
  position:fixed;inset:0;z-index:70;background:var(--mulberry-diep);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--rand) 3rem;
  clip-path:circle(0% at calc(100% - 3rem) 3rem);
  transition:clip-path .7s var(--soepel);visibility:hidden;
}
.menu-open .overlay{clip-path:circle(150% at calc(100% - 3rem) 3rem);visibility:visible}
.overlay__logo{position:relative;width:min(58vw,260px);margin-bottom:2.5rem;opacity:0}
.menu-open .overlay__logo{animation:menu-in .6s var(--soepel) .12s forwards}
.overlay nav{display:flex;flex-direction:column;gap:.35rem;position:relative}
.overlay nav a{color:var(--linnen);text-decoration:none;font-weight:300;font-size:clamp(1.9rem,7vw,2.8rem);line-height:1.35;opacity:0;transform:translateY(14px)}
.menu-open .overlay nav a{animation:menu-in .55s var(--soepel) forwards}
.menu-open .overlay nav a:nth-child(1){animation-delay:.18s}
.menu-open .overlay nav a:nth-child(2){animation-delay:.24s}
.menu-open .overlay nav a:nth-child(3){animation-delay:.30s}
.menu-open .overlay nav a:nth-child(4){animation-delay:.36s}
.menu-open .overlay nav a:nth-child(5){animation-delay:.42s}
.menu-open .overlay nav a:nth-child(6){animation-delay:.48s}
.menu-open .overlay nav a:nth-child(7){animation-delay:.54s}
.menu-open .overlay nav a:nth-child(8){animation-delay:.60s}
@keyframes menu-in{to{opacity:1;transform:none}}
.overlay__contact{margin-top:2.5rem;color:var(--zand);position:relative}
.overlay__contact a{color:var(--zand)}

/* --- Hero ----------------------------------------------------------------- */
.hero{position:relative;min-height:min(94svh,860px);display:flex;align-items:flex-end;overflow:hidden}
.hero__beeld{position:absolute;inset:0}
.hero__beeld img{width:100%;height:100%;object-fit:cover}
.hero__beeld::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(245,241,236,.50) 0%,rgba(245,241,236,0) 30%),
    linear-gradient(90deg,rgba(245,241,236,.88) 0%,rgba(245,241,236,.55) 38%,rgba(245,241,236,0) 72%),
    linear-gradient(0deg,var(--linnen) 1%,rgba(245,241,236,.72) 22%,rgba(89,70,107,.06) 62%);
}
.hero__inhoud{position:relative;width:min(100% - var(--rand)*2,var(--breed));margin-inline:auto;padding-bottom:clamp(3rem,8vw,6rem)}
.hero__logo{width:min(84vw,520px);margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.hero h1{max-width:18ch;margin-bottom:.45em}
.hero__onder{max-width:52ch;color:var(--tekst);font-size:clamp(1.05rem,1.3vw,1.25rem)}

/* handschrift-onthulling van het logo bij het laden */
.js .hero__logo{clip-path:inset(0 100% 0 0)}
.js .hero__logo.getekend{animation:schrijf 1.5s var(--soepel) .15s forwards}
@keyframes schrijf{to{clip-path:inset(0 0 0 0)}}
.js .hero h1,.js .hero__onder,.js .hero .knoppen{opacity:0;transform:translateY(16px)}
.js .hero.klaar h1{animation:op .8s var(--soepel) .75s forwards}
.js .hero.klaar .hero__onder{animation:op .8s var(--soepel) .95s forwards}
.js .hero.klaar .knoppen{animation:op .8s var(--soepel) 1.1s forwards}
@keyframes op{to{opacity:1;transform:none}}

/* --- Paginakop op de binnenpagina's --------------------------------------- */
.paginakop{padding-top:clamp(7.5rem,15vw,11.5rem);padding-bottom:clamp(1.5rem,4vw,3rem);text-align:center}
.paginakop p{margin-inline:auto;color:var(--tekst-zacht);font-size:clamp(1.05rem,1.3vw,1.22rem)}
.paginakop .knoppen{justify-content:center}

/* --- Spreads (beeld + tekst) ---------------------------------------------- */
.spread{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(min-width:900px){
  .spread{grid-template-columns:1fr 1fr}
  .spread--beeldrechts .spread__beeld{order:2}
  .spread--smal{grid-template-columns:.85fr 1.15fr}
}
.spread__tekst>*:last-child{margin-bottom:0}

/* --- Organische beeldvormen ----------------------------------------------- */
.vorm{overflow:hidden;position:relative;background:var(--zand);
  border-radius:58% 42% 48% 52% / 52% 46% 54% 48%;
  transition:border-radius 1.2s var(--soepel)}
.vorm img{width:100%;height:100%;object-fit:cover}
.vorm--a{border-radius:62% 38% 44% 56% / 56% 48% 52% 44%}
.vorm--b{border-radius:40% 60% 58% 42% / 46% 58% 42% 54%}
.vorm--c{border-radius:54% 46% 36% 64% / 42% 54% 46% 58%}
.vorm--d{border-radius:36% 64% 54% 46% / 58% 42% 60% 40%}
/* portret: rustiger vorm zodat een gezicht heel blijft */
.vorm--portret{border-radius:50% 50% 46% 54% / 40% 42% 58% 60%}
.vorm--hek-contact{aspect-ratio:4 / 5}
.vorm--hek-contact img{width:100%;height:100%;object-position:center 38%}
.kunstwerk{
  display:grid;place-items:center;padding:clamp(1rem,3vw,2.25rem);
  border-radius:46% 54% 52% 48% / 48% 44% 56% 52%;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.88),rgba(216,203,184,.38) 72%,rgba(216,203,184,.12));
}
.kunstwerk img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(61,48,80,.13))}
.kunstwerk--lijn{
  isolation:isolate;overflow:visible;
  background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.78),rgba(216,203,184,.22) 64%,rgba(216,203,184,0) 78%);
}
.kunstwerk--lijn .kunstwerk__olifant{display:block;width:100%;height:auto;overflow:visible;mix-blend-mode:multiply;filter:saturate(.72) contrast(1.03) drop-shadow(0 18px 28px rgba(61,48,80,.08))}
.olifant-schets{color:var(--mulberry);opacity:0}
.js .olifant-detail{opacity:0}
.js .olifant-schets{opacity:.72}
.js .olifant-schets__lijn{stroke-dasharray:1;stroke-dashoffset:1}
.js .onthul.zichtbaar .olifant-schets__lijn{animation:olifant-lijn 1.65s cubic-bezier(.22,.7,.2,1) forwards}
.js .onthul.zichtbaar .olifant-schets__lijn--links{animation-delay:.5s}
.js .onthul.zichtbaar .olifant-schets__lijn--rechts{animation-delay:.65s}
.js .onthul.zichtbaar .olifant-schets__lijn--gezicht{animation-delay:.86s}
.js .onthul.zichtbaar .olifant-schets__lijn--slurf{animation-delay:1.02s}
.js .onthul.zichtbaar .olifant-schets__lijn--detail{animation-delay:1.18s}
.js .onthul.zichtbaar .olifant-detail{animation:olifant-detail .95s ease 2.05s forwards}
.js .onthul.zichtbaar .olifant-schets{animation:olifant-schets-weg .8s ease 2.45s forwards}
.js .onthul.zichtbaar .kunstwerk__olifant{animation:olifant-ademen 9s ease-in-out 3.5s infinite}
@keyframes olifant-lijn{to{stroke-dashoffset:0}}
@keyframes olifant-detail{to{opacity:1}}
@keyframes olifant-schets-weg{to{opacity:0}}
@keyframes olifant-ademen{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.006)}
}

/* heel langzaam bewegende rand: organisch, bijna onmerkbaar */
.js .vorm--leeft{animation:ademen 24s ease-in-out infinite}
@keyframes ademen{
  0%,100%{border-radius:62% 38% 44% 56% / 56% 48% 52% 44%}
  33%   {border-radius:48% 52% 58% 42% / 44% 58% 42% 56%}
  66%   {border-radius:56% 44% 40% 60% / 52% 40% 60% 48%}
}
.rond{border-radius:28px;overflow:hidden}

/* volle band over de hele breedte */
.band{position:relative;min-height:min(66svh,520px);display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(61,48,80,.58),rgba(61,48,80,.36))}
.band--diep{background:var(--mulberry-diep);min-height:min(52svh,420px)}
.band--diep::after{background:radial-gradient(circle at 50% 50%,rgba(156,138,180,.19),rgba(61,48,80,.12) 58%,rgba(61,48,80,.4))}
.band__inhoud{position:relative;z-index:1;width:min(100% - var(--rand)*2,780px);color:#fff}
.band__inhoud p{color:#EFE9F2;margin-inline:auto}

/* --- Zachte inhoudsblokken ------------------------------------------------ */
.blokken{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
@media(min-width:760px){.blokken--2{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.blokken--3{grid-template-columns:repeat(3,1fr)}}
.blok{
  background:var(--linnen-warm);border-radius:34px;
  padding:clamp(1.6rem,3vw,2.4rem);
  border:1px solid rgba(89,70,107,.10);
  transition:transform .5s var(--soepel),box-shadow .5s var(--soepel);
}
.blok:hover{transform:translateY(-4px);box-shadow:0 18px 40px -28px rgba(89,70,107,.5)}
.blok h3{margin-bottom:.5em}
.blok p:last-child{margin-bottom:0}
.vlak--diep .blok{background:rgba(255,255,255,.05);border-color:rgba(216,203,184,.22)}

/* genummerde stappen */
.stappen{counter-reset:stap;display:grid;gap:clamp(1.8rem,3vw,2.5rem)}
@media(min-width:860px){.stappen{grid-template-columns:repeat(3,1fr)}}
.stap{position:relative;padding-top:3.6rem;text-align:center}
.stap::before{
  counter-increment:stap;content:counter(stap);
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:2.8rem;height:2.8rem;border-radius:999px;
  border:1px solid var(--salie);color:var(--mulberry);
  display:grid;place-items:center;font-size:1rem;line-height:1;
}
.stap p{margin-inline:auto}
.stap h3{margin-bottom:.4em}

/* inhoudelijke opsomming met een subtiel Nova-lichtpunt */
.lijst{list-style:none;margin:0 0 1.5em;padding:0;max-width:var(--lees)}
.lijst li{position:relative;padding-left:1.85rem;margin-bottom:.7em}
.lijst li::before{
  content:"";
  position:absolute;
  left:.08rem;
  top:.52em;
  width:.86rem;
  height:.86rem;
  background:var(--salie);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
  opacity:.9;
  filter:drop-shadow(0 0 4px rgba(89,70,107,.18));
}
.vlak--diep .lijst li::before{
  background:var(--zand);
  filter:drop-shadow(0 0 5px rgba(216,203,184,.28));
}

/* --- Citaat --------------------------------------------------------------- */
.citaat{
  max-width:26ch;font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:300;
  line-height:1.3;color:var(--mulberry);margin:0 auto;letter-spacing:-.01em;text-align:center
}
.citaat--wit{color:#fff}

.sectie>.container,.band__inhoud{position:relative;z-index:1}

/* --- Meelopende lijn langs de pagina -------------------------------------- */
.draad{position:fixed;left:clamp(.6rem,2vw,1.6rem);top:0;height:100vh;width:60px;z-index:5;pointer-events:none;display:none}
@media(min-width:1180px){.js .draad{display:block}}
.draad svg{height:100%;width:100%}
.draad__grond{stroke:rgba(89,70,107,.15)}
.draad__voor{stroke:var(--mulberry);opacity:.5}
.draad__stip{fill:var(--mulberry);opacity:.6}

/* --- Veelgestelde vragen -------------------------------------------------- */
.vragen{max-width:820px;margin-inline:auto}
.vraag{border-bottom:1px solid rgba(89,70,107,.16)}
.vraag summary{cursor:pointer;list-style:none;padding:1.25rem 3rem 1.25rem 0;position:relative;font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--mulberry);font-weight:400}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"";position:absolute;right:.6rem;top:50%;width:13px;height:13px;border-right:1.5px solid var(--mulberry);border-bottom:1.5px solid var(--mulberry);transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--soepel)}
.vraag[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.vraag__antwoord{padding:0 2rem 1.5rem 0;color:var(--tekst-zacht)}
.vraag__antwoord p{max-width:none}
.vraag__antwoord p:last-child{margin-bottom:0}
.vraag[open] .vraag__antwoord{animation:open-zacht .45s var(--soepel)}
@keyframes open-zacht{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- Tarieven ------------------------------------------------------------- */
.tarieven{width:100%;border-collapse:collapse;max-width:820px;margin:0 auto 2rem}
.tarieven th,.tarieven td{text-align:left;padding:1.05rem .8rem;border-bottom:1px solid rgba(89,70,107,.16);vertical-align:top}
.tarieven th{font-weight:400;color:var(--mulberry);font-size:.95rem}
.tarieven td:first-child{color:var(--mulberry)}
.tarieven td:last-child,.tarieven th:last-child{text-align:right;white-space:nowrap}

/* --- Afstemmen (bioresonantie) -------------------------------------------- */
.afstem{background:var(--linnen-warm);border:1px solid rgba(89,70,107,.12);border-radius:34px;padding:clamp(1.5rem,3.5vw,3rem);max-width:820px;margin-inline:auto}
.afstem__golf{width:100%;height:130px;display:block;color:var(--mulberry)}
.afstem__regel{display:flex;align-items:center;gap:1rem;margin-top:1.25rem}
.afstem__regel label{font-size:.95rem;color:var(--tekst-zacht);white-space:nowrap}
.afstem input[type=range]{flex:1;accent-color:var(--mulberry);height:28px}
.afstem__uitleg{margin:1rem auto 0;color:var(--tekst-zacht);min-height:3.4em;text-align:center;max-width:56ch}

/* --- Contact -------------------------------------------------------------- */
.gegevens{list-style:none;margin:0 0 2rem;padding:0}
.gegevens li{display:flex;gap:1rem;padding:.7rem 0;border-bottom:1px solid rgba(89,70,107,.14)}
.gegevens span:first-child{flex:0 0 8.5rem;color:var(--tekst-zacht)}
.gegevens a{text-decoration:none}

.formulier{display:grid;gap:1.1rem;max-width:620px;margin-inline:auto}
.veld{display:grid;gap:.4rem}
.veld label{font-size:.95rem;color:var(--mulberry)}
.veld input,.veld textarea,.veld select{
  font:inherit;font-size:1rem;color:var(--tekst);background:var(--linnen-warm);
  border:1px solid rgba(89,70,107,.25);border-radius:18px;padding:.85rem 1.1rem;width:100%;
  transition:border-color .3s,background .3s
}
.veld textarea{min-height:150px;resize:vertical}
.veld input:focus,.veld textarea:focus,.veld select:focus{border-color:var(--mulberry);background:#fff;outline:none}
.pot{position:absolute;left:-9999px}
.formulier__klein{font-size:.9rem;color:var(--tekst-zacht);max-width:52ch;margin-inline:auto;text-align:center}

/* --- Voettekst ------------------------------------------------------------ */
.voet{background:var(--mulberry-diep);color:#D5CDDC;padding-block:clamp(3.5rem,7vw,5.5rem) 2rem;position:relative;overflow:hidden}
.voet a:not(.knop){color:var(--zand);text-decoration:none}
.voet a:not(.knop):hover{color:#fff;text-decoration:underline}
.voet__raster{display:grid;gap:2.5rem;position:relative;z-index:1}
@media(min-width:820px){.voet__raster{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.voet__logo{width:230px;margin-bottom:1.25rem}
.voet h4{color:#fff;font-weight:400;font-size:1rem;margin-bottom:.9em;letter-spacing:.01em}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{margin-bottom:.45em}
.voet__stempel{position:absolute;right:1%;top:10%;width:min(20%,190px);opacity:.13;pointer-events:none}
@media(max-width:1100px){.voet__stempel{display:none}}
.voet__disclaimer{font-size:.85rem;color:#B6ACC0;position:relative;z-index:1;margin-top:clamp(2.5rem,5vw,4rem)}
.voet__disclaimer p{max-width:78ch}
.voet__onder{
  margin-top:1.75rem;padding-top:1.5rem;
  border-top:1px solid rgba(216,203,184,.22);font-size:.85rem;color:#B6ACC0;
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;justify-content:space-between
}
.voet__onder p{max-width:none;margin:0}
.maker{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:#B6ACC0 !important;font-size:.82rem;opacity:.82}
.maker:hover{color:#fff !important;opacity:1;text-decoration:underline !important}
.maker img{width:16px;height:auto}

/* --- Zachte onthulling bij scrollen --------------------------------------- */
.js .onthul{opacity:0;transform:translateY(20px);transition:opacity 1s var(--soepel),transform 1s var(--soepel)}
.js .onthul.zichtbaar{opacity:1;transform:none}

/* --- Juridische pagina's -------------------------------------------------- */
.juridisch{max-width:760px;margin-inline:auto}
.juridisch h2{font-size:clamp(1.35rem,2.2vw,1.8rem);margin-top:2.75rem}
.juridisch h2:first-of-type{margin-top:0}
.juridisch p,.juridisch li{max-width:none}
.juridisch ul{padding-left:1.2rem}
.juridisch li{margin-bottom:.4em}
.juridisch__datum{color:var(--tekst-zacht);font-size:.92rem}

/* --- Nog invullen (verwijder de class zodra de tekst klopt) ---------------- */
.nog-invullen{background:#F6E6C8;box-shadow:0 0 0 .25em #F6E6C8;border-radius:3px;color:#6B4E14}

.overslaan{position:absolute;left:-9999px;top:0;background:var(--mulberry);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 12px 0;z-index:100}
.overslaan:focus{left:0}

/* --- Kleinere schermen ---------------------------------------------------- */
@media(max-width:860px){
  .nav{display:none}
  .menu-knop{display:block}
  .gegevens span:first-child{flex-basis:6.5rem}
}
@media(max-width:699px){
  .hero__logo{width:112vw;max-width:none;margin-left:-10vw}
  .vorm--hek-contact{aspect-ratio:2 / 3}
  .vorm--hek-contact img{object-position:center center}
}

/* --- Minder beweging ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js .hero__logo,.js .hero h1,.js .hero__onder,.js .hero .knoppen{clip-path:none;opacity:1;transform:none}
  .js .onthul{opacity:1;transform:none}
  .js .olifant-detail{opacity:1}
  .js .olifant-schets{display:none}
  .js .kunstwerk--lijn .kunstwerk__olifant{transform:none}
  .draad{display:none !important}
}