/* ============================================================================
   Defined Beauty — opmaak van de hele site
   ----------------------------------------------------------------------------
   Opgebouwd vanaf de mobiele telefoon: de basisregels zijn de mobiele weergave,
   de blokken met @media (min-width: …) maken het breder voor tablet en laptop.
   ========================================================================== */

/* ============================== KLEUREN & LETTERS ========================= */
:root{
  --room:#FBF1E7;
  --room-2:#F6E8DE;
  --blush:#F4E3DE;
  --blush-2:#EBD3CE;
  --roze:#E5AFB4;
  --roze-2:#DB9CA3;
  --roze-diep:#C27C87;
  --inkt:#5E4C48;
  --inkt-2:#8B7A74;
  --inkt-3:#A99A94;
  --lijn:#EAD6CA;
  --wit:#FFFDFB;

  --schaduw:20px 34px 70px -44px rgba(120,80,70,.55);
  --schaduw-zacht:0 20px 40px -34px rgba(120,80,70,.7);
  --soepel:cubic-bezier(.22,1,.36,1);

  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --gut:clamp(1.15rem,5vw,3rem);
  --ruim:clamp(3.4rem,9vw,7rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans);font-weight:300;line-height:1.65;
  background:var(--room);color:var(--inkt);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.op-slot{overflow:hidden}

img,svg,video{display:block;max-width:100%}
img{height:auto}                    /* hoort altijd bij width/height op <img> */
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none !important}
::selection{background:var(--roze);color:var(--wit)}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--roze-diep);outline-offset:3px;border-radius:6px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:.005em}
em{font-style:italic;color:var(--roze-diep)}

.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gut)}

.skip{position:absolute;left:-9999px;top:0;z-index:10001;background:var(--roze-diep);
  color:var(--wit);padding:.8rem 1.2rem;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ============================== KOPPEN & TEKST ============================ */
.bovenkop{display:block;font-family:var(--sans);font-weight:400;font-size:.7rem;
  letter-spacing:.36em;text-transform:uppercase;color:var(--roze-diep)}
.bovenkop--licht{color:rgba(255,253,251,.85)}

.kop{max-width:62ch}
.kop h1,.kop h2{font-size:clamp(2rem,6.4vw,3.5rem);margin-top:.9rem}
.kop p{margin-top:1.1rem;color:var(--inkt-2);max-width:54ch}
.kop--midden{margin-inline:auto;text-align:center}
.kop--midden p{margin-inline:auto}

.lood{font-size:clamp(1rem,3.6vw,1.12rem);color:var(--inkt-2)}

/* ============================== ANIMATIE-HULPJES ==========================
   BELANGRIJK: tekst wordt ALLEEN verborgen als de klasse "beweegt" op <html>
   staat. Die klasse wordt gezet door het scriptje in de <head> en wordt weer
   weggehaald zodra blijkt dat assets/site.js niet werkt. Zo kan er nooit tekst
   onzichtbaar blijven staan als er iets misgaat met de scripts.

   Er wordt bewust NIET met overflow:hidden gewerkt. Dat gaf afgesneden koppen:
   de losse woorden zijn inline-blocks en maken de regel iets hoger dan de doos,
   waardoor de onderkant van de letters wegviel. Nu schuiven de woorden alleen
   een klein stukje omhoog terwijl ze verschijnen - niets kan meer worden
   afgeknipt.
   ========================================================================= */
.reveal-text .word{display:inline-block;vertical-align:top}

.beweegt .reveal-text .word{opacity:0;transform:translateY(.5em);
  transition:opacity .7s ease,transform .7s var(--soepel)}
.beweegt .reveal-text.in .word{opacity:1;transform:none}

.beweegt [data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .8s ease,transform .8s var(--soepel)}
.beweegt [data-reveal].in{opacity:1;transform:none}

/* Het laadscherm hoort bij de animatielaag: zonder werkende scripts nooit tonen,
   anders blijft het over de pagina heen liggen. */
.laadscherm{display:none}
.beweegt .laadscherm{display:grid}

@media (prefers-reduced-motion:reduce){
  .beweegt .reveal-text .word,.beweegt [data-reveal]{transform:none !important;opacity:1 !important;transition:none}
  .marquee__rail{animation:none !important}
  .beweegt .laadscherm{display:none}
}

/* ============================== LAADSCHERM ================================ */
.laadscherm{position:fixed;inset:0;z-index:10000;background:var(--blush);
  place-items:center;transition:transform .9s var(--soepel);overflow:hidden}
.laadscherm.klaar{transform:translateY(-101%)}
.laadscherm__in{text-align:center;padding:2rem}
.laadscherm__logo{width:min(190px,46vw);height:auto;margin-inline:auto;
  opacity:0;transform:translateY(14px);animation:opkomen .9s var(--soepel) .1s forwards}
.laadscherm__terugval{display:none;font-family:var(--serif);font-size:clamp(2rem,9vw,3.2rem);
  color:var(--roze-diep);line-height:1.1}
.laadscherm__terugval span{display:block;font-family:var(--sans);font-size:.6rem;
  letter-spacing:.42em;text-transform:uppercase;color:var(--inkt-2);margin-top:.5rem}
.laadscherm__lijn{width:0;height:1px;background:var(--roze-diep);margin:1.6rem auto 0;
  max-width:200px;transition:width .6s ease}
@keyframes opkomen{to{opacity:1;transform:none}}

/* ============================== MENUBALK ================================== */
.balk{position:fixed;inset:0 0 auto 0;z-index:900;padding-block:.85rem;
  transition:background .45s var(--soepel),padding .45s var(--soepel),box-shadow .45s}
.balk.vast{background:rgba(251,241,231,.9);backdrop-filter:blur(14px);
  padding-block:.5rem;box-shadow:0 1px 0 var(--lijn)}
.balk__in{display:flex;align-items:center;justify-content:space-between;gap:1rem}

.merk{display:flex;align-items:center;gap:.6rem}
.merk__mark{width:34px;height:auto;flex:none}
.merk__tekst{font-family:var(--serif);font-size:1.32rem;line-height:1;color:var(--roze-diep);
  display:flex;flex-direction:column}
.merk__tekst span{font-family:var(--sans);font-size:.48rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--inkt-2);margin-top:3px}

.menu{display:none}
.balk__cta{display:none}

.hamburger{display:flex;flex-direction:column;gap:6px;padding:8px;z-index:951}
.hamburger span{width:26px;height:1.5px;background:var(--inkt);border-radius:2px;
  transition:transform .4s var(--soepel),opacity .3s}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* schermvullend mobiel menu */
.mobielmenu{position:fixed;inset:0;z-index:950;background:var(--blush);
  transform:translateY(-100%);visibility:hidden;overflow-y:auto;
  transition:transform .6s var(--soepel),visibility .6s}
.mobielmenu.open{transform:none;visibility:visible}
.mobielmenu__in{min-height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:5.5rem var(--gut) 2rem}
.mobielmenu a{font-family:var(--serif);font-size:clamp(1.7rem,8.5vw,2.5rem);color:var(--inkt);
  padding:.4rem 0;border-bottom:1px solid var(--lijn);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.mobielmenu a span{font-family:var(--sans);font-size:.65rem;letter-spacing:.3em;color:var(--roze-diep)}
.mobielmenu a.actief{color:var(--roze-diep)}
.mobielmenu__cta{font-family:var(--sans) !important;font-size:.95rem !important;
  letter-spacing:.06em;color:var(--wit) !important;background:var(--roze-diep);
  border:0 !important;border-radius:100px;justify-content:center !important;
  margin-top:1.6rem;padding:1.05rem !important;text-transform:uppercase}
.mobielmenu__voet{margin-top:2rem;font-size:.8rem;color:var(--inkt-2);letter-spacing:.05em}

/* ============================== KNOPPEN =================================== */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--sans);font-size:.88rem;letter-spacing:.04em;
  padding:.95rem 1.7rem;border-radius:100px;border:1px solid transparent;
  transition:transform .35s var(--soepel),background .35s,color .35s,border-color .35s;
  text-align:center}
.knop:hover{transform:translateY(-2px)}
.knop .pijl{transition:transform .35s var(--soepel)}
.knop:hover .pijl{transform:translateX(4px)}
.knop--roze{background:var(--roze-diep);color:var(--wit)}
.knop--roze:hover{background:var(--inkt)}
.knop--wit{background:var(--wit);color:var(--roze-diep)}
.knop--wit:hover{background:var(--inkt);color:var(--wit)}
.knop--rand{border-color:var(--lijn);color:var(--inkt);background:transparent}
.knop--rand:hover{border-color:var(--roze-diep);color:var(--roze-diep)}
.knop--rand-licht{border-color:rgba(255,253,251,.55);color:var(--wit);background:transparent}
.knop--rand-licht:hover{background:rgba(255,255,255,.14);border-color:var(--wit)}
.knop--klein{padding:.75rem 1.3rem;font-size:.82rem}
.knoprij{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
.knoprij--midden{justify-content:center}

/* ============================== GOLVEN ==================================== */
.golf{display:block;width:100%;height:56px}
.golf path{fill:var(--roze)}
.golf--boven{position:absolute;top:0;left:0;transform:translateY(-99%)}
.golf--room path{fill:var(--room)}
.golf--blush path{fill:var(--blush)}
.golf--wit path{fill:var(--wit)}

/* ============================== HERO (startpagina) ========================
   Nagebouwd naar de aangeleverde ontwerpschets: logo linksboven, foto rechts,
   en een roze golfvlak linksonder waar de slagzin in staat.
   De golfvorm zelf komt uit de <clipPath> onderaan inc/head.php.
   ========================================================================= */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(168deg,var(--blush) 0%,#FAEDE6 48%,var(--room) 100%)}

.hero__top{position:relative;z-index:3;padding-block:5.6rem 1.2rem}
.hero__logo{width:min(150px,36vw);height:auto}

.hero__foto{position:relative;z-index:1;margin-top:1.4rem;overflow:hidden;
  background:var(--blush-2);aspect-ratio:4/3}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:58% 40%;
  will-change:transform}

.hero__paneel{position:relative;z-index:2;margin-top:-2px;background:var(--roze);color:var(--wit);
  padding-block:4.2rem 2.8rem;
  -webkit-clip-path:url(#golf-mobiel);clip-path:url(#golf-mobiel)}
.hero__paneelin{width:100%;max-width:1200px;margin-inline:auto;
  padding-inline:max(var(--gut), calc((100vw - 1200px) / 2 + var(--gut)))}
.hero__paneel h1{font-family:var(--sans);font-weight:300;color:var(--wit);
  font-size:clamp(1.6rem,6.6vw,2.4rem);letter-spacing:.07em;text-transform:uppercase;line-height:1.34}
.hero__paneel h1 em{font-style:normal;color:var(--wit);font-weight:400}
.hero__paneel p{margin-top:.7rem;color:rgba(255,253,251,.92);font-size:1rem;max-width:34ch}
.hero__streep{width:64px;height:1px;background:rgba(255,253,251,.75);margin-top:1.4rem}
.hero__paneel .knoprij{margin-top:1.5rem}

.hero__badge{display:inline-flex;align-items:center;gap:.55rem;
  background:var(--wit);color:var(--inkt);border-radius:100px;padding:.6rem 1.1rem;
  font-size:.76rem;letter-spacing:.03em;box-shadow:var(--schaduw-zacht)}
.hero__badge b{color:var(--roze-diep);font-weight:500}
.hero__badge i{width:8px;height:8px;border-radius:50%;background:var(--roze);
  box-shadow:0 0 0 4px rgba(229,175,180,.32);flex:none}
.hero__onder{position:relative;z-index:3;padding-block:1.4rem 2.4rem}

/* ============================== PAGINAKOP (andere pagina's) =============== */
.paginakop{position:relative;background:linear-gradient(168deg,var(--blush),var(--room) 82%);
  padding-block:7.4rem 3.4rem;overflow:hidden}
.paginakop__in{position:relative;z-index:2}
.paginakop h1{font-size:clamp(2.1rem,8vw,3.8rem);margin-top:.8rem}
.paginakop p{margin-top:1rem;color:var(--inkt-2);max-width:52ch}
.paginakop__mark{position:absolute;right:-24px;top:2.6rem;width:150px;opacity:.16;
  z-index:1;pointer-events:none}

/* ============================== SECTIES =================================== */
.sectie{position:relative;padding-block:var(--ruim)}
.sectie--room{background:var(--room)}
.sectie--room2{background:var(--room-2)}
.sectie--blush{background:linear-gradient(180deg,var(--room),var(--blush))}
.sectie--wit{background:var(--wit)}
.sectie--strak{padding-block:clamp(2.6rem,7vw,4rem)}

/* ============================== PILLEN =================================== */
.pillen{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.8rem}
.pil{border:1px solid var(--lijn);border-radius:100px;padding:.5rem 1rem;
  font-size:.8rem;letter-spacing:.02em;color:var(--inkt);background:var(--wit)}
.pil b{color:var(--roze-diep);font-weight:500}

/* ============================== TWEELUIK (tekst + beeld) ================== */
.tweeluik{display:grid;gap:2rem;align-items:center}
.tweeluik__beeld{position:relative;border-radius:24px;overflow:hidden;
  background:var(--blush-2);box-shadow:var(--schaduw);aspect-ratio:4/5}
.tweeluik__beeld img{width:100%;height:100%;object-fit:cover}
.tweeluik__beeld--nagel{border-radius:200px 200px 24px 24px}
.tweeluik__label{position:absolute;top:1rem;left:1rem;background:rgba(251,241,231,.92);
  backdrop-filter:blur(6px);border-radius:100px;padding:.45rem .95rem;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--roze-diep);z-index:2}
/* Bij de nagelvorm zit de bovenkant rond — het labeltje dus onderaan zetten. */
.tweeluik__beeld--nagel .tweeluik__label{top:auto;bottom:1rem}
.tweeluik__tekst h2{font-size:clamp(1.75rem,5.4vw,2.7rem)}
.tweeluik__tekst p{margin-top:1.1rem;color:var(--inkt-2)}
.tweeluik__tekst p:first-of-type{margin-top:1.3rem}

/* Nog aan te leveren tekst — valt op zodat hij niet per ongeluk blijft staan. */
.eigenverhaal-nogtedoen{color:var(--inkt-3) !important;font-style:italic;
  border-left:2px solid var(--roze);padding-left:1rem}

/* ============================== BEHANDELINGEN (kaarten) ================== */
.kaartrij{display:grid;gap:1.1rem;margin-top:clamp(2rem,6vw,3rem)}
.dienstkaart{position:relative;display:flex;flex-direction:column;background:var(--wit);
  border:1px solid var(--lijn);border-radius:22px;overflow:hidden;
  transition:transform .4s var(--soepel),border-color .4s,box-shadow .4s}
.dienstkaart:hover{transform:translateY(-5px);border-color:var(--roze);box-shadow:var(--schaduw)}
.dienstkaart__beeld{aspect-ratio:4/3;overflow:hidden;background:var(--blush-2)}
.dienstkaart__beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--soepel)}
.dienstkaart:hover .dienstkaart__beeld img{transform:scale(1.06)}
.dienstkaart__tekst{padding:1.3rem 1.35rem 1.5rem;display:flex;flex-direction:column;flex:1}
.dienstkaart__nr{font-size:.66rem;letter-spacing:.3em;color:var(--roze-diep)}
.dienstkaart h3{font-size:1.6rem;margin:.4rem 0 .5rem}
.dienstkaart p{font-size:.94rem;color:var(--inkt-2);margin-bottom:1.1rem}
.dienstkaart__vanaf{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--lijn);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-size:.82rem;letter-spacing:.03em;color:var(--roze-diep)}
.dienstkaart__vanaf span:last-child{transition:transform .35s var(--soepel)}
.dienstkaart:hover .dienstkaart__vanaf span:last-child{transform:translateX(4px)}

/* ============================== BEHANDELING IN DETAIL ==================== */
.dienst{padding-block:clamp(2.6rem,8vw,4.6rem);border-top:1px solid var(--lijn);
  scroll-margin-top:5rem}
.dienst:first-of-type{border-top:0}
.dienst__grid{display:grid;gap:1.8rem;align-items:center}
.dienst__beeld{position:relative;border-radius:200px 200px 24px 24px;overflow:hidden;
  background:var(--blush-2);box-shadow:var(--schaduw);aspect-ratio:4/5}
.dienst__beeld img{width:100%;height:100%;object-fit:cover}
.dienst__nr{font-size:.68rem;letter-spacing:.32em;color:var(--roze-diep)}
.dienst h2{font-size:clamp(1.9rem,7vw,2.9rem);margin:.5rem 0 .3rem}
.dienst__sub{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--inkt-3)}
.dienst__tekst p{margin-top:1.1rem;color:var(--inkt-2)}
.dienst__punten{list-style:none;margin-top:1.4rem;display:grid;gap:.55rem}
.dienst__punten li{position:relative;padding-left:1.6rem;font-size:.94rem;color:var(--inkt)}
.dienst__punten li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  border-radius:50%;background:var(--roze);box-shadow:0 0 0 3px rgba(229,175,180,.28)}
.dienst__voet{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin-top:1.8rem}
.dienst__prijs{font-family:var(--serif);font-size:1.5rem;color:var(--roze-diep)}

/* ============================== LOPENDE BAND ============================= */
.marquee{overflow:hidden;white-space:nowrap;background:var(--blush);
  border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);padding-block:1.2rem}
.marquee__rail{display:inline-flex;gap:1.8rem;align-items:center;
  animation:schuif 42s linear infinite;will-change:transform}
.marquee__rail span{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.4rem,5vw,2.3rem);color:var(--roze-diep)}
.marquee__rail i{width:8px;height:8px;border-radius:50%;background:var(--roze);flex:none}
@keyframes schuif{to{transform:translateX(-50%)}}

/* ============================== ZO WERKT HET ============================= */
.stappen{display:grid;gap:1.6rem;margin-top:clamp(2rem,6vw,3.4rem)}
.stap{position:relative;padding-top:2.2rem}
.stap__balk{position:absolute;top:0;left:0;right:0;height:2px;background:var(--lijn);
  border-radius:2px;overflow:hidden}
.stap__balk i{position:absolute;inset:0;width:0;background:var(--roze-diep);
  transition:width 1s var(--soepel)}
.stap.aan .stap__balk i{width:100%}
.stap__k{font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--roze-diep)}
.stap h3{font-size:1.25rem;margin:.25rem 0 .45rem}
.stap p{font-size:.92rem;color:var(--inkt-2)}
.stap__ook{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.7rem}
.stap__ook a{color:var(--roze-diep);text-decoration:none;font-weight:500;
  border-bottom:1px solid currentColor;padding-bottom:1px;transition:opacity .3s}
.stap__ook a:hover{opacity:.7}
.stap__ook span{color:var(--lijn)}

/* ============================= BIJ TE BOEKEN ============================= */
.bijrij{display:grid;gap:1rem;margin-top:clamp(1.8rem,5vw,2.6rem)}
.bijkaart{background:var(--wit);border-radius:16px;padding:1.5rem 1.6rem;
  box-shadow:var(--schaduw-zacht);display:flex;flex-direction:column;align-items:flex-start}
.bijkaart h3{font-size:1.3rem;margin:0}
.bijkaart__sub{font-family:var(--serif);font-style:italic;font-size:1.05rem;
  color:var(--roze-diep);margin-top:.15rem}
.bijkaart p{font-size:.92rem;color:var(--inkt-2);margin:.7rem 0 0}
.bijkaart__prijs{margin-top:auto;padding-top:1rem;font-family:var(--serif);
  font-size:1.2rem;color:var(--roze-2)}
@media(min-width:760px){.bijrij{grid-template-columns:repeat(3,1fr)}}

/* ============================== PRIJSLIJST =============================== */
.prijsblok{max-width:820px;margin-inline:auto}
.prijsgroep{margin-top:2.4rem}
.prijsgroep h2{font-size:clamp(1.5rem,5.4vw,2.1rem);color:var(--roze-2);
  padding-bottom:.6rem;border-bottom:1px solid var(--lijn)}
.prijsregel{display:flex;align-items:baseline;gap:.8rem;padding-block:.85rem;
  border-bottom:1px solid var(--lijn)}
.prijsregel__naam{font-size:.98rem;color:var(--inkt)}
.prijsregel__stip{flex:1;border-bottom:1px dotted var(--blush-2);transform:translateY(-4px)}
.prijsregel__bedrag{font-family:var(--serif);font-size:1.25rem;color:var(--roze-diep);white-space:nowrap}
.prijsnoot{margin-top:1.6rem;font-size:.86rem;color:var(--inkt-3)}

/* ============================== GALERIJ ================================== */
.filters{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem}
.filter{border:1px solid var(--lijn);background:var(--wit);border-radius:100px;
  padding:.55rem 1.15rem;font-size:.82rem;letter-spacing:.03em;color:var(--inkt);
  transition:background .3s,color .3s,border-color .3s}
.filter[aria-pressed="true"]{background:var(--roze-diep);border-color:var(--roze-diep);color:var(--wit)}

.galerij{display:grid;gap:.9rem;margin-top:clamp(1.8rem,5vw,2.6rem);grid-template-columns:repeat(2,1fr)}
.gfoto{position:relative;overflow:hidden;border-radius:16px;background:var(--blush-2);
  aspect-ratio:1/1;box-shadow:var(--schaduw-zacht);width:100%;
  transition:transform .45s var(--soepel),opacity .35s}
.gfoto img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--soepel);
  pointer-events:none;-webkit-user-drag:none}
.gfoto:hover img{transform:scale(1.07)}
.gfoto.weg{display:none}

/* vergrootglas */
.licht{position:fixed;inset:0;z-index:1000;background:rgba(64,44,42,.94);
  display:none;place-items:center;padding:1rem;touch-action:none}
.licht.open{display:grid}
.licht__doek{position:relative;max-width:min(94vw,760px);width:100%}
.licht__doek img{width:100%;height:auto;border-radius:16px;max-height:78vh;object-fit:contain;
  -webkit-user-drag:none}
.licht__knop{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border-radius:50%;background:rgba(255,255,255,.16);color:var(--wit);display:grid;place-items:center;
  font-size:1.2rem;backdrop-filter:blur(6px);transition:background .3s}
.licht__knop:hover{background:rgba(255,255,255,.3)}
.licht__knop--vorige{left:-6px}
.licht__knop--volgende{right:-6px}
.licht__sluit{position:fixed;top:1rem;right:1rem;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.16);color:var(--wit);display:grid;place-items:center;font-size:1.3rem}

/* ============================== REVIEWS ================================== */
.reviews{background:var(--blush);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  padding-block:clamp(3rem,9vw,4.6rem);text-align:center}
.reviews .sterren{font-size:1.15rem;color:var(--roze-diep);letter-spacing:.3em}
.reviews .sterren .off{color:var(--blush-2)}
.reviews h2{font-size:clamp(1.7rem,6vw,2.7rem);margin:.7rem 0 .8rem}
.rv-score{display:inline-flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:center;
  background:var(--wit);border:1px solid var(--lijn);border-radius:999px;padding:.5rem 1.2rem;
  box-shadow:var(--schaduw-zacht)}
.rv-score .cijfer{font-family:var(--serif);font-size:1.55rem;line-height:1;color:var(--roze-diep)}
.rv-score .sterren{font-size:.9rem;letter-spacing:.18em}
.rv-score .bron{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-3)}
.g-logo{width:1em;height:1em;flex:none}
.rv-score .bron .g-logo{font-size:1rem}

.rv-grid{display:grid;gap:1.1rem;margin:2rem auto 2.2rem;
  grid-template-columns:1fr;width:min(880px,100%);text-align:left}
.rv-kaart{position:relative;background:var(--wit);border:1px solid var(--lijn);border-radius:20px;
  padding:1.5rem 1.5rem 1.3rem;display:flex;flex-direction:column;gap:.8rem;box-shadow:var(--schaduw-zacht)}
.rv-kaart::before{content:"\201C";position:absolute;top:.2rem;right:1.1rem;font-family:var(--serif);
  font-size:4rem;line-height:1;color:var(--blush-2)}
.rv-kaart .sterren{font-size:.9rem;letter-spacing:.2em;color:var(--roze-diep);position:relative}
.rv-kaart .sterren .off{color:var(--blush-2)}
.rv-kaart blockquote{font-size:1rem;line-height:1.65;color:var(--inkt);position:relative}
.rv-wie{margin-top:auto;display:flex;align-items:center;gap:.65rem;padding-top:.85rem;
  border-top:1px solid var(--lijn)}
.rv-initiaal{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--blush);color:var(--roze-diep);font-family:var(--serif);font-size:1.1rem}
.rv-naam{font-size:.93rem;color:var(--inkt)}
.rv-datum{display:block;font-size:.74rem;color:var(--inkt-3)}
.rv-bron{margin-left:auto;flex:none;font-size:1.1rem;line-height:0;opacity:.9}
.rv-vraag{color:var(--inkt-2);max-width:48ch;margin:0 auto 1.4rem;font-size:.94rem}

/* ============================== FORMULIER ================================ */
.formulier{background:var(--wit);border:1px solid var(--lijn);border-radius:22px;
  padding:clamp(1.3rem,5vw,2.1rem);box-shadow:var(--schaduw);scroll-margin-top:5rem}
.veld{margin-bottom:1rem}
.veld label{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--inkt-2);margin-bottom:.45rem}
.veld input,.veld textarea{width:100%;font-family:var(--sans);font-size:1rem;color:var(--inkt);
  background:var(--room);border:1px solid var(--lijn);border-radius:12px;padding:.85rem 1rem;
  transition:border-color .3s,background .3s}
.veld input:focus,.veld textarea:focus{outline:none;border-color:var(--roze-diep);background:var(--wit)}
.veld textarea{resize:vertical;min-height:130px}
.veld.fout input,.veld.fout textarea{border-color:#cf6b6b;background:#fdf3f2}
.veld__melding{font-size:.76rem;color:#cf6b6b;margin-top:.35rem;display:none}
.veld.fout .veld__melding{display:block}
.formulier button[type=submit]{width:100%}
.formulier__noot{font-size:.78rem;color:var(--inkt-3);margin-top:.7rem;text-align:center}
.gelukt{display:none;align-items:center;gap:.65rem;background:var(--blush);border:1px solid var(--roze);
  border-radius:12px;padding:.9rem 1rem;color:var(--roze-diep);font-size:.9rem;margin-bottom:1rem}
.gelukt.toon{display:flex}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================== CONTACTLIJST ============================= */
.contactlijst{display:flex;flex-direction:column;gap:.8rem;margin-top:1.8rem}
.contactlijst a,.contactlijst div{display:flex;align-items:center;gap:.9rem;font-size:.95rem;
  color:var(--inkt);padding:.9rem 1.1rem;border:1px solid var(--lijn);border-radius:16px;
  background:var(--wit);transition:border-color .3s,transform .3s var(--soepel)}
.contactlijst a:hover{border-color:var(--roze-diep);transform:translateX(4px)}
.contactlijst .ico{width:38px;height:38px;border-radius:50%;background:var(--blush);
  display:grid;place-items:center;color:var(--roze-diep);flex:none}
.contactlijst b{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--inkt);font-weight:500}
.contactlijst small{color:var(--inkt-2);font-size:.8rem}

/* ============================== AFSLUITENDE OPROEP ======================= */
.oproep{position:relative;background:linear-gradient(160deg,var(--roze),var(--roze-diep));
  color:var(--wit);text-align:center;padding-block:clamp(4.4rem,10vw,6.4rem) clamp(3rem,8vw,5rem);
  margin-top:56px}
.oproep .golf path{fill:var(--roze)}
.oproep__in{position:relative;z-index:2}
.oproep h2{font-size:clamp(2rem,7.6vw,3.6rem);color:var(--wit);margin-top:.8rem}
.oproep h2 em{color:var(--wit);font-style:italic}
.oproep p{max-width:44ch;margin:1rem auto 0;color:rgba(255,253,251,.92)}
.oproep .knoprij{justify-content:center}
.oproep__klein{margin-top:1.6rem;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,253,251,.8)}

/* ============================== FOOTER =================================== */
.voet{background:var(--inkt);color:var(--room);padding-block:clamp(3rem,8vw,4.4rem) 1.6rem}
.voet__grid{display:grid;gap:2.2rem}
/* Het logo is dieproze; op de donkere footer wordt het als wit weergegeven,
   anders valt het weg tegen de achtergrond. */
.voet__logo{width:118px;height:auto;filter:brightness(0) invert(1);opacity:.92}
.voet__terugval{display:none;font-family:var(--serif);font-size:1.7rem;color:var(--roze)}
.voet__terugval span{display:block;font-family:var(--sans);font-size:.5rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--inkt-3);margin-top:4px}
.voet__intro{margin-top:1rem;color:var(--blush-2);max-width:34ch;font-size:.93rem}
.voet__merk .knop{margin-top:1.1rem}
.voet__kolom h2{font-family:var(--sans);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--inkt-3);margin-bottom:.8rem;font-weight:400}
.voet__kolom a,.voet__kolom p{display:block;color:var(--room-2);font-size:.93rem;
  padding-block:.24rem;transition:color .3s}
.voet__kolom a:hover{color:var(--roze)}
.voet__klein{color:var(--inkt-3) !important;font-size:.82rem !important;margin-top:.5rem}
.voet__onder{border-top:1px solid rgba(255,255,255,.12);margin-top:2.6rem;padding-top:1.4rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;
  font-size:.78rem;color:var(--inkt-3)}
.naarboven{border:1px solid rgba(255,255,255,.22);color:var(--room);border-radius:100px;
  padding:.45rem 1rem;font-size:.76rem;letter-spacing:.1em;transition:border-color .3s}
.naarboven:hover{border-color:var(--roze)}

/* ============================== MOBIELE KNOPPENBALK ====================== */
.mbalk{position:fixed;left:0;right:0;bottom:0;z-index:880;display:flex;gap:.6rem;
  padding:.65rem var(--gut) calc(.65rem + env(safe-area-inset-bottom));
  background:rgba(251,241,231,.94);backdrop-filter:blur(14px);border-top:1px solid var(--lijn);
  transform:translateY(130%);transition:transform .5s var(--soepel)}
.mbalk.toon{transform:none}
.mbalk a{flex:1;display:flex;align-items:center;justify-content:center;
  font-size:.85rem;padding:.9rem .6rem;border-radius:100px;letter-spacing:.02em}
.mbalk__boek{background:var(--roze-diep);color:var(--wit);flex:1.5}
.mbalk__prijs{background:var(--wit);color:var(--inkt);border:1px solid var(--lijn)}
body{padding-bottom:74px}

/* ==========================================================================
   VANAF 620px — twee kolommen waar dat past
   ========================================================================== */
@media (min-width:620px){
  .kaartrij{grid-template-columns:repeat(2,1fr);gap:1.3rem}
  .stappen{grid-template-columns:repeat(2,1fr);gap:1.8rem}
  .galerij{grid-template-columns:repeat(3,1fr)}
  .rv-grid{grid-template-columns:repeat(2,1fr)}
  .hero__foto{aspect-ratio:16/10}
}

/* (De hero van de startpagina wordt onderaan dit bestand opnieuw gezet —
   zie "HERO — doorschijnende roze golf".) */

/* ==========================================================================
   VANAF 900px — bureaubladweergave
   ========================================================================== */
@media (min-width:900px){
  body{padding-bottom:0}
  .mbalk{display:none}
  .hamburger{display:none}

  .menu{display:flex;align-items:center;gap:1.5rem;font-size:.82rem;letter-spacing:.05em}
  .menu a{position:relative;color:var(--inkt);padding-block:.2rem;white-space:nowrap;transition:color .3s}
  .menu a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;
    background:var(--roze-diep);transition:width .35s var(--soepel)}
  .menu a:hover{color:var(--roze-diep)}
  .menu a:hover::after,.menu a.actief::after{width:100%}
  .menu a.actief{color:var(--roze-diep)}

  .balk__cta{display:inline-flex;align-items:center;font-size:.79rem;letter-spacing:.04em;
    color:var(--wit);background:var(--roze-diep);padding:.65rem 1.3rem;border-radius:100px;
    white-space:nowrap;transition:background .35s,transform .35s var(--soepel)}
  .balk__cta:hover{background:var(--inkt);transform:translateY(-2px)}
  .merk__mark{width:40px}
  .merk__tekst{font-size:1.5rem}

  /* --- hero: foto rechts, roze golfvlak linksonder eroverheen --- */
  .hero{min-height:min(90svh,820px);display:flex;flex-direction:column;justify-content:space-between}
  .hero__foto{position:absolute;top:0;right:0;bottom:0;width:56%;margin:0;
    aspect-ratio:auto;z-index:1}
  .hero__foto::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,var(--blush) 0%,rgba(246,232,222,.86) 6%,rgba(246,232,222,.35) 18%,transparent 34%)}
  .hero__top{padding-block:8.2rem 0}
  .hero__logo{width:min(210px,17vw)}
  .hero__paneel{margin-top:0;width:66vw;
    padding-block:5.4rem 3.4rem;
    -webkit-clip-path:url(#golf-breed);clip-path:url(#golf-breed)}
  /* De tekst mag nooit voorbij ongeveer 68% van het roze vlak komen: daarna
     buigt de golfvorm naar beneden weg en zou witte tekst op de crème
     achtergrond belanden. 68% is een percentage van het vlak zelf, dus het
     klopt op elk schermformaat. */
  .hero__paneelin{max-width:68%;margin-inline:0;padding-right:1rem}
  .hero__paneel h1{font-size:clamp(1.25rem,1.75vw,1.6rem);letter-spacing:.09em;line-height:1.6}
  .hero__paneel p{font-size:1rem;max-width:32ch}
  .hero__onder{position:absolute;right:0;bottom:2.6rem;width:auto;padding-block:0;
    padding-right:max(var(--gut), calc((100vw - 1200px) / 2 + var(--gut)));z-index:4}

  .paginakop{padding-block:9.4rem 4.4rem}
  .paginakop__mark{width:230px;right:2vw;top:5rem;opacity:.2}

  .tweeluik{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem)}
  .tweeluik--omgekeerd .tweeluik__beeld{order:2}
  .tweeluik__beeld{max-width:none}

  .kaartrij{grid-template-columns:repeat(4,1fr)}
  .kaartrij--drie{grid-template-columns:repeat(3,1fr)}

  .dienst__grid{grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,4.5rem)}
  .dienst--omgekeerd .dienst__beeld{order:2}
  .dienst__beeld{max-width:420px}
  .dienst--omgekeerd .dienst__beeld{margin-left:auto}

  .stappen{grid-template-columns:repeat(4,1fr)}
  .galerij{grid-template-columns:repeat(4,1fr);gap:1.1rem}
  .rv-grid{grid-template-columns:repeat(2,1fr);gap:1.3rem}
  .rv-grid.veel{grid-template-columns:repeat(3,1fr);width:min(1120px,100%)}

  .voet__grid{grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:2.4rem}

  .licht__knop--vorige{left:-58px}
  .licht__knop--volgende{right:-58px}
}

/* ==========================================================================
   VANAF 1180px — iets meer lucht
   ========================================================================== */
@media (min-width:1180px){
  /* LET OP: hier stond eerder .hero__paneel{width:min(700px,58%)}. Dat maakte
     het roze vlak op brede schermen juist SMALLER, terwijl de tekst er links
     steeds verder in werd geduwd (die lijnt uit met het menu). Op een breed
     scherm bleef er dan nog maar een paar centimeter over voor de slagzin:
     één woord per regel, en de rest liep buiten het roze — wit op crème, dus
     onleesbaar. De breedte staat nu op één plek: 66vw hierboven. */
  .galerij{gap:1.2rem}
}

/* ==========================================================================
   HERO — doorschijnende roze golf (startpagina)
   --------------------------------------------------------------------------
   Dit blok staat bewust HELEMAAL onderaan en zonder media-query: het geldt
   dus op elk schermformaat en overschrijft de hero-regels hierboven. Zo staat
   de hele hero op één plek bij elkaar en hoeft er niets in de rest van het
   bestand veranderd te worden.

   De opzet:
     - de foto vult de hele hero (geen los blok meer rechts);
     - linksboven ligt er een crème sluier overheen, zodat het logo rustig
       leesbaar blijft;
     - onderin ligt een HALF DOORZICHTIG roze vlak over de volle breedte, met
       een golvende bovenrand. Omdat het doorschijnend is, zie je de foto —
       de arm, de handen, het roze matje — er gewoon doorheen.

   Alleen de startpagina heeft deze klassen; de andere pagina's gebruiken
   .paginakop en blijven ongemoeid.
   ========================================================================== */
.hero{position:relative;overflow:hidden;min-height:min(88svh,700px);
  display:flex;flex-direction:column;justify-content:space-between;
  background:var(--room)}

/* --- foto over de volle hero --- */
.hero__foto{position:absolute;inset:0;width:auto;height:auto;margin:0;
  aspect-ratio:auto;overflow:hidden;z-index:1;background:var(--blush-2)}
/* 45% schuift het gezicht naar rechts, weg van het logo, en brengt tegelijk
   de handen van de klant in beeld. Stond dit hoger, dan kwam het gezicht in
   de crème sluier terecht en zag je alleen nog haar en schort. */
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:45% 40%}

/* --- crème sluier: links voor het logo, boven voor het menu ---
   De bovenste sluier is nodig omdat de menubalk bovenaan doorzichtig is
   zolang er niet gescrold is; zonder die sluier valt "Behandelingen … Over
   mij" weg tegen het donkere haar op de foto. */
.hero__foto::after{content:"";position:absolute;inset:0;
  background:
    /* Crème gloed precies achter het logo, zodat "Defined Beauty / Beauty
       Salon" niet wegvalt tegen de foto. Het middelpunt hangt aan dezelfde
       berekening als de inhoudskolom, dus de gloed schuift mee met het logo
       als het scherm breder wordt. */
    /* Op een telefoon staan het logo en haar gezicht dicht bij elkaar. De
       gloed blijft daarom krap om het logo heen en de sluier links dooft snel
       uit — anders wast het gezicht mee weg. */
    radial-gradient(10rem 13rem at
      calc(max(var(--gut), (100vw - 1200px) / 2 + var(--gut)) + 3rem) 12.5rem,
      rgba(251,241,231,.97) 0%,rgba(251,241,231,.88) 45%,
      rgba(251,241,231,0) 100%),
    linear-gradient(180deg,rgba(251,241,231,.82) 0%,rgba(251,241,231,.4) 8%,
      transparent 17%),
    linear-gradient(100deg,var(--room) 0%,rgba(251,241,231,.95) 24%,
      rgba(251,241,231,.6) 34%,rgba(251,241,231,.16) 44%,transparent 54%)}

.hero__top{position:relative;z-index:3;padding-block:6.2rem 0}
.hero__logo{width:min(140px,29vw)}

/* --- de doorschijnende roze golf ---
   Links iets dekkender dan rechts: daar staat de witte slagzin, en die moet
   leesbaar blijven ook als er net een lichte plek van de foto onder zit.
   Rechts is het vlak transparanter, zodat de foto er duidelijk doorheen komt. */
.hero__paneel{position:relative;z-index:2;margin-top:0;width:100%;
  background:linear-gradient(90deg,rgba(229,175,180,.62) 0%,
    rgba(229,175,180,.58) 58%,rgba(229,175,180,.36) 100%);color:var(--wit);
  /* De bovenrand moet ruim zijn: de golf zakt weg tot voorbij een kwart van de
     hoogte van dit vlak. Zou de eerste tekstregel daarboven beginnen, dan
     staat het rechterdeel van die regel wit-op-foto in plaats van op roze —
     en dan lees je hem niet meer. */
  padding-block:9rem 4.2rem;
  -webkit-clip-path:url(#golf-wash);clip-path:url(#golf-wash)}

/* LET OP: hier geen max-width + margin-inline:auto. De padding-inline hieronder
   rekent de centrering van de inhoudskolom (1200px) er AL in. Stond de doos dan
   óók nog gecentreerd, dan telde die verspringing twee keer mee en stond de
   slagzin op een breed scherm veel te ver naar rechts — niet meer onder het
   logo. Zo lijnt hij netjes uit met het logo en het menu. */
.hero__paneelin{width:100%;max-width:none;margin-inline:0;
  padding-inline:max(var(--gut), calc((100vw - 1200px) / 2 + var(--gut)))}
/* De zachte schaduw is nauwelijks te zien, maar houdt de witte slagzin
   leesbaar op de plekken waar er een lichte plek van de foto door het roze
   heen schemert. */
.hero__paneel h1{font-size:clamp(1.02rem,4.2vw,1.35rem);letter-spacing:.08em;
  line-height:1.55;max-width:22ch;text-shadow:0 1px 16px rgba(90,55,50,.55),0 1px 3px rgba(90,55,50,.5)}

/* --- balkje "Online boeken via Salonized" rechtsonder --- */
.hero__onder{position:absolute;right:0;bottom:1.5rem;width:auto;padding-block:0;
  padding-right:max(var(--gut), calc((100vw - 1200px) / 2 + var(--gut)));z-index:4}

@media (min-width:900px){
  .hero{min-height:min(92svh,860px)}
  .hero__top{padding-block:8.2rem 0}
  .hero__logo{width:min(210px,17vw)}
  .hero__foto img{object-position:50% 46%}
  .hero__foto::after{
    background:
      radial-gradient(23rem 27rem at
        calc(max(var(--gut), (100vw - 1200px) / 2 + var(--gut)) + 6.5rem) 19rem,
        rgba(251,241,231,.97) 0%,rgba(251,241,231,.91) 45%,
        rgba(251,241,231,0) 100%),
      linear-gradient(180deg,rgba(251,241,231,.8) 0%,rgba(251,241,231,.38) 7%,
        transparent 15%),
      linear-gradient(100deg,var(--room) 0%,rgba(251,241,231,.96) 20%,
        rgba(251,241,231,.72) 30%,rgba(251,241,231,.26) 42%,transparent 56%)}
  /* Breed scherm: de slagzin staat links in het dekkende deel, de foto komt
     rechts duidelijk door het roze heen. */
  /* Breed scherm: dieper dal (de slagzin is hier smal ten opzichte van het
     scherm, dus daar is ruimte voor). */
  .hero__paneel{padding-block:10rem 4.6rem;
    -webkit-clip-path:url(#golf-wash-breed);clip-path:url(#golf-wash-breed);
    background:linear-gradient(90deg,rgba(229,175,180,.62) 0%,
      rgba(229,175,180,.55) 28%,rgba(229,175,180,.38) 62%,
      rgba(229,175,180,.3) 100%)}
  .hero__paneel h1{font-size:clamp(1.25rem,1.75vw,1.6rem);letter-spacing:.09em;
    line-height:1.6;max-width:30ch}
  .hero__onder{bottom:2.6rem}
}

/* --- de diavoorstelling in de hero ---
   De foto's uit $HERO_DIA liggen op elkaar in hetzelfde kader. Er verandert
   niets aan het ontwerp: de uitsnede, de crème sluier links en de roze golf
   onderaan liggen er allemaal net zo overheen als bij één vaste foto.

   De uitsnede (object-fit / object-position) blijft van ".hero__foto img"
   hierboven komen, zodat elke foto precies zo staat als het ontwerp bedoelde.
   Alleen als een foto in inc/config.php een eigen 'positie' meekrijgt, zet die
   deze regel opzij.

   Er vloeit er altijd één ÓVER de vorige heen (site.js zet de nieuwe even
   bovenop), want twee foto's die tegelijk half doorzichtig zijn laten de
   achtergrond doorschemeren — dat geeft een lichte flits halverwege.
   Verander je hieronder de duur van 1.4s, pas hem dan ook aan in site.js. */
/* De "z-index:0" hieronder is geen opsmuk maar noodzaak: hij houdt de
   laagvolgorde van de foto's BINNEN dit doosje. Zonder die regel klimmen de
   foto's uit het doosje en gaan ze over de crème sluier heen liggen — dan
   staat het logo ineens dwars over de foto in plaats van op een rustig vlak. */
.hero__dias{position:absolute;inset:0;z-index:0}
.hero__dia{position:absolute;inset:0;z-index:0;opacity:0;
  transition:opacity 1.4s ease}
.hero__dia.aan{opacity:1;z-index:1}

/* Beweging uit? Dan blijft de eerste foto gewoon staan (site.js wisselt dan
   niet), en vloeit er dus ook niets. */
@media (prefers-reduced-motion:reduce){
  .hero__dia{transition:none}
}