/* ==========================================================================
   Psalm Spa Pedicure, Enschede
   Richting: "Het heiligdom". Warm travertijn, bouclé-creme, walnoot en messing,
   met de boog als terugkerende vorm (haar salon heeft er een, en Psalm 91 gaat
   over een schuilplaats).
   ========================================================================== */

:root{
  /* kleur */
  --creme:#F7F2EA;          /* papier, de basis */
  --creme-diep:#EFE7DA;     /* tweede lichte vlak */
  --zand:#E4D6C1;           /* travertijn */
  --klei:#C9A78C;           /* zachte terracotta, secundair */
  --messing:#AC8450;        /* accent, gedempt messing */
  --messing-licht:#C9A470;
  --inkt:#221A13;           /* warm bijna-zwart */
  --inkt-zacht:#3A2E23;
  /* Stond op .58 en dat haalde het net niet: 4.09:1 op creme en 3.97:1 op
     creme-diep, allebei onder de 4.5 die je nodig hebt. Op .70 is het 5.99 en
     5.69, en het blijft duidelijk zachter dan de koppen. Gemeten 17 sep, de
     lopende tekst boven "Lees het verhaal" was het voorbeeld. */
  --mist:rgba(34,26,19,.70);/* lopende tekst op licht */
  --mist-om:rgba(247,242,234,.68); /* lopende tekst op donker */
  --lijn:rgba(34,26,19,.14);
  --lijn-om:rgba(247,242,234,.18);

  /* ruimte */
  --pad:clamp(20px,5vw,72px);
  --sectie:clamp(72px,10vw,140px);
  --max:1320px;
  --balk-h:38px;
  --kop-h:clamp(64px,5.4vw,84px);
  --topruimte:calc(var(--balk-h) + var(--kop-h));

  /* vorm */
  --boog:999px 999px 6px 6px / 46% 46% 4% 4%;  /* de boogvorm */
  --pil:999px;
  --r:4px;
}

/* --- grondslag ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
/* overflow-x:clip en niet hidden: hidden zet position:sticky uit */
html,body{max-width:100%;overflow-x:clip}
@supports not (overflow-x:clip){body{overflow-x:hidden}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
  margin:0;
  background:var(--creme);
  color:var(--inkt);
  font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(15.5px,1.02vw,17px);
  font-weight:300;
  line-height:1.72;
  letter-spacing:.008em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.012em}

/* Het lichte korrelvlies over alles, haalt de digitale vlakheid eruit. */
body::after{
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.6'/></svg>");
}

/* --- typografie ---------------------------------------------------------- */
.display{
  font-family:"Fraunces","Times New Roman",serif;
  font-weight:300;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 120;
  line-height:.98;
  letter-spacing:-.022em;
}
.d1{font-size:clamp(44px,8.4vw,116px)}
.d2{font-size:clamp(34px,5.4vw,74px)}
.d3{font-size:clamp(25px,3vw,42px)}
.d4{font-size:clamp(20px,2vw,27px);line-height:1.18}
em,.cursief{font-style:italic;font-variation-settings:"SOFT" 80,"WONK" 1}

.label{
  font-size:11px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;
  color:var(--messing);margin:0 0 20px
}
.label--om{color:var(--messing-licht)}
.label span{display:inline-block}

.lead{font-size:clamp(16.5px,1.32vw,20px);line-height:1.66;color:var(--mist);max-width:56ch}
.lead--om{color:var(--mist-om)}
.klein{font-size:13.5px;letter-spacing:.02em;color:var(--mist)}

/* --- opmaakhulp ---------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sectie{padding-block:var(--sectie)}
.donker{background:var(--inkt);color:var(--creme)}
.donker .lead{color:var(--mist-om)}
.donker .klein{color:var(--mist-om)}
.zand{background:var(--creme-diep)}
.streep{height:1px;background:var(--lijn);border:0;margin:0}
.donker .streep{background:var(--lijn-om)}

/* --- knoppen ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:16px 30px;border-radius:var(--pil);border:1px solid var(--inkt);
  background:var(--inkt);color:var(--creme);
  font-size:13.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  line-height:1;cursor:pointer;position:relative;overflow:hidden;
  transition:background .4s cubic-bezier(.22,1,.36,1),color .4s cubic-bezier(.22,1,.36,1),
             border-color .4s,transform .5s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.btn .pijl{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.btn:hover{background:var(--messing);border-color:var(--messing);color:#fff}
.btn:hover .pijl{transform:translateX(5px)}
.btn:focus-visible{outline:2px solid var(--messing);outline-offset:3px}

.btn--licht{background:var(--creme);border-color:var(--creme);color:var(--inkt)}
.btn--licht:hover{background:var(--messing-licht);border-color:var(--messing-licht);color:var(--inkt)}
.btn--leeg{background:transparent;color:var(--inkt);border-color:var(--lijn)}
.btn--leeg:hover{background:var(--inkt);border-color:var(--inkt);color:var(--creme)}
.donker .btn--leeg{color:var(--creme);border-color:var(--lijn-om)}
.donker .btn--leeg:hover{background:var(--creme);color:var(--inkt);border-color:var(--creme)}
.btn--klein{padding:12px 22px;font-size:12px}

/* tekstlink met onderstreping die uitschuift */
.link{
  display:inline-flex;align-items:center;gap:10px;position:relative;
  font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;padding-bottom:6px;
}
.link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform-origin:right;transform:scaleX(1);
  transition:transform .5s cubic-bezier(.76,0,.24,1);
}
.link:hover::after{transform:scaleX(0)}
.link .pijl{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.link:hover .pijl{transform:translateX(5px)}

/* --- vaste bovenlaag: balk + kop ----------------------------------------- */
/* Buiten #smooth-wrapper, dus vast en niet sticky (sticky werkt niet in een
   getransformeerde ScrollSmoother-container). */
.top{position:fixed;top:0;left:0;right:0;z-index:100}

.balk{
  background:var(--inkt);color:var(--mist-om);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  text-align:center;height:var(--balk-h);
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding-inline:var(--pad);overflow:hidden;
  transition:height .55s cubic-bezier(.76,0,.24,1),opacity .35s ease;
}
.balk b{color:var(--messing-licht);font-weight:400}
.balk span{opacity:.5}
.top.vast .balk{height:0;opacity:0}

.kop{
  background:var(--creme);
  border-bottom:1px solid transparent;
  transition:border-color .5s ease,box-shadow .5s ease;
}
.top.vast .kop{border-bottom-color:var(--lijn);box-shadow:0 14px 34px -30px rgba(34,26,19,.7)}
.kop__in{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--kop-h);
  width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);
  position:relative;
}
.merk{display:flex;align-items:baseline;gap:9px;line-height:1;color:var(--inkt)}
.merk__naam{font-family:"Fraunces",serif;font-size:clamp(19px,1.7vw,23px);letter-spacing:.01em;font-variation-settings:"SOFT" 40,"WONK" 1}
.merk__tag{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;opacity:.62}

.nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)}
.nav a{
  position:relative;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--inkt);opacity:.78;transition:opacity .3s ease;padding-block:6px;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--messing);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.76,0,.24,1);
}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{opacity:1}

.kop__cta{display:flex;align-items:center;gap:14px}
.kop .btn--nav{padding:12px 24px;font-size:11.5px}

/* hamburger */
.burger{
  display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  align-items:center;justify-content:center;padding:0;margin-left:-11px;
}
.burger span{display:block;width:22px;height:1.4px;background:var(--inkt);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:22px;height:1.4px;background:inherit;
  transition:transform .45s cubic-bezier(.76,0,.24,1);
}
.burger span::before{top:-7px}
.burger span::after{top:7px}

/* uitschuifmenu */
.paneel{
  position:fixed;inset:0;z-index:120;background:var(--inkt);color:var(--creme);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--pad) + 40px) var(--pad) var(--pad);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .8s cubic-bezier(.76,0,.24,1),visibility 0s linear .8s;
}
.paneel.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .8s cubic-bezier(.76,0,.24,1),visibility 0s}
.paneel__sluit{
  position:absolute;top:22px;right:var(--pad);width:46px;height:46px;border:1px solid var(--lijn-om);
  border-radius:var(--pil);background:transparent;cursor:pointer;display:grid;place-items:center;
  transition:background .4s ease,border-color .4s ease;
}
.paneel__sluit:hover{background:rgba(247,242,234,.1);border-color:var(--creme)}
.paneel__sluit::before,.paneel__sluit::after{
  content:"";position:absolute;width:17px;height:1.4px;background:var(--creme)
}
.paneel__sluit::before{transform:rotate(45deg)}
.paneel__sluit::after{transform:rotate(-45deg)}
.paneel nav{display:flex;flex-direction:column;gap:clamp(6px,1.6vh,16px)}
.paneel nav a{
  font-family:"Fraunces",serif;font-size:clamp(30px,8.6vw,46px);line-height:1.08;
  font-variation-settings:"SOFT" 40,"WONK" 1;
  display:flex;align-items:baseline;gap:14px;opacity:0;
}
.paneel nav a i{
  font-style:normal;font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.2em;
  color:var(--messing-licht);
}
.paneel__cta{margin-top:clamp(24px,5vh,46px);opacity:0}

/* --- video achter de opening --------------------------------------------- */
/* De film liep eerst door tot en met de drie pijlers. Dat oogde goedkoop: een
   halfdonker vlak met tekst erop terwijl de film er niets meer aan toevoegde.
   Robin, 17 sep. Hij staat nu alleen achter de opening. Niet opnieuw doortrekken.
   Geen position:fixed, want dat werkt niet binnen de ScrollSmoother-wrapper
   (die transformeert zijn inhoud, en een transform maakt van fixed een gewone
   absolute).
   Terugdraaien: dit blok plus .opening.opening--film weg, en in bouw.py de
   .doorloop-wrapper om de opening halen. */
.doorloop{position:relative;isolation:isolate}
.doorloop__film{position:absolute;inset:0;z-index:0;pointer-events:none}
/* Niet position:sticky. Gemeten op 17 sep: binnen de ScrollSmoother-wrapper
   schuift een sticky element gewoon mee omhoog, want de smoother verplaatst de
   hele inhoud met een transform en dan is er voor de browser niets aan het
   scrollen. Op telefoon (geen smoother) werkte sticky wel, dus het verschil
   zat precies daar. Nu staat hij bovenaan het blok en verschuift app.js hem
   met een scrub. Zonder JS blijft de film boven in beeld staan, ook goed. */
.doorloop__kleef{position:absolute;top:0;left:0;right:0;height:100svh;overflow:hidden}
.doorloop__film video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;
}
/* De sluier maakt de film donker genoeg om creme tekst op te lezen. Bovenaan
   het zwaarst, want daar staat de vaste kop. */
.doorloop__doek{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(24,17,11,.80) 0%, rgba(24,17,11,.40) 24%,
                               rgba(24,17,11,.50) 58%, rgba(24,17,11,.86) 100%),
    rgba(24,17,11,.34);
}
.doorloop > section{position:relative;z-index:1}

/* De opening staat nu op de film: geen creme vlak, geen boog ernaast, tekst
   over de volle breedte in plaats van in een halve kolom.
   Let op de dubbele klasse in de selectors hieronder. Dit blok staat boven
   `.opening` in het bestand, dus met alleen `.opening--film` (0,1,0) wint
   `.opening{background:var(--creme)}` op volgorde en dan staat er crème tekst
   op een crème vlak met de video onzichtbaar eronder. Gemeten op 17 sep. */
.opening.opening--film{background:transparent;color:var(--creme)}
/* min-height en align-items staan bewust achter min-width:981px. Zonder die
   media query wint deze regel (drie klassen, specificiteit 0,3,0) altijd van
   de mobiele .opening__in hieronder (een klasse, 0,1,0), media query of niet.
   Zo bleef .opening op telefoon vaste `100svh - topruimte` hoog in plaats van
   de bedoelde volle 100svh, en stak de vastgeplakte .doorloop__kleef (altijd
   100svh) er onderaan overheen: de donkere film liep door in de pijlers.
   Gemeten en gefixt 17 sep 2026, Beauty Sestra's (bleek ook al zo te staan op
   de live psalm-spa). Mobiel zet grid-template-columns, align-items en
   min-height zelf al, dus dit blok hoeft er op smalle schermen niet bij. */
@media (min-width:981px){
  .opening.opening--film .opening__in{
    grid-template-columns:1fr;
    min-height:min(calc(100svh - var(--topruimte)),1000px);
    align-items:end;
  }
}
/* De kop stond in de oude opzet in een halve kolom, dus 116px kon daar. Op de
   volle breedte van de film is dat te groot: hij liep op 1440 over zes regels
   en schoot onder het scherm door. Kleiner, en de tekstkolom op ruim de helft. */
.opening.opening--film .opening__tekst{max-width:min(58ch,60vw)}
.opening.opening--film .d1{max-width:15ch;font-size:clamp(40px,5.6vw,84px)}
.opening.opening--film .opening__lead{color:rgba(247,242,234,.84);max-width:46ch}
.opening.opening--film .btn{background:var(--creme);border-color:var(--creme);color:var(--inkt)}
.opening.opening--film .btn:hover{background:var(--messing-licht);border-color:var(--messing-licht)}
.opening.opening--film .btn--leeg{background:transparent;color:var(--creme);border-color:rgba(247,242,234,.45)}
.opening.opening--film .btn--leeg:hover{background:var(--creme);color:var(--inkt);border-color:var(--creme)}
.opening.opening--film .scrolhint{color:rgba(247,242,234,.7)}
.opening.opening--film .scrolhint i{background:rgba(247,242,234,.35)}

/* --- opening (hero) ------------------------------------------------------ */
.opening{
  position:relative;
  padding-top:var(--topruimte);
  background:var(--creme);
  overflow:hidden;
}
.opening__in{
  width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,72px);align-items:center;
  min-height:min(calc(100svh - var(--topruimte)),1000px);
  padding-block:clamp(30px,5vh,72px);
}
.opening__tekst{position:relative;z-index:2}
.opening .d1{margin:0 0 26px;max-width:13ch}
/* SplitText zet elke regel in een .rgl-doosje met overflow, zodat hij er
   onderuit kan komen zonder de regel erboven te raken. */
/* SplitText zet elke regel in zo'n doosje om hem van onderaf te laten opkomen.
   De padding geeft de staarten van g, j en y ruimte, de negatieve marge haalt
   die ruimte er weer af zodat de regelafstand niet verandert. */
.rgl{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.rgl > *{display:block}
.opening__lead{margin:0 0 36px;max-width:42ch}
.opening__knoppen{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* de boog met het beeld erin */
.boog{
  position:relative;border-radius:var(--boog);overflow:hidden;
  aspect-ratio:3/4;max-height:min(74vh,760px);margin-inline:auto;width:100%;
  background:var(--zand);
}
.boog img{width:100%;height:100%;object-fit:cover;will-change:transform}
.boog__rand{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(247,242,234,.34);
}
/* Een warme sluier over het beeld. Op desktop staat hij uit; op telefoon vult
   het beeld het hele scherm en moet de tekst er leesbaar op staan. De sluier
   is onderaan het zwaarst, precies waar de kop en de knoppen staan. */
.boog__doek{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;
  background:linear-gradient(to top,
    rgba(24,17,11,.94) 0%, rgba(24,17,11,.88) 20%, rgba(24,17,11,.6) 34%,
    rgba(24,17,11,.22) 52%, rgba(24,17,11,.06) 74%, rgba(24,17,11,.14) 100%);
}
.opening__boog{position:relative}
/* de messing lijn die de boog natekent */
.boogsvg{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);pointer-events:none;overflow:visible}
.boogsvg path{fill:none;stroke:var(--messing);stroke-width:1;opacity:.6}

/* het zwevende kaartje bij de boog */
.zwever{
  position:absolute;left:clamp(-10px,-2vw,-34px);bottom:clamp(18px,4vw,42px);
  background:var(--creme);border:1px solid var(--lijn);border-radius:var(--r);
  padding:16px 20px;max-width:220px;box-shadow:0 22px 50px -28px rgba(34,26,19,.5);
}
.zwever b{display:block;font-family:"Fraunces",serif;font-size:19px;font-weight:400;margin-bottom:2px}
.zwever span{font-size:12px;letter-spacing:.06em;color:var(--mist);line-height:1.45;display:block}

.scrolhint{
  position:absolute;left:var(--pad);bottom:22px;display:flex;align-items:center;gap:12px;
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--mist);z-index:3;
}
.scrolhint i{display:block;width:44px;height:1px;background:var(--lijn);position:relative;overflow:hidden}
.scrolhint i::after{
  content:"";position:absolute;inset:0;background:var(--messing);
  animation:veeg 2.6s cubic-bezier(.76,0,.24,1) infinite;
}
@keyframes veeg{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* --- pijlers (waarom) ---------------------------------------------------- */
.pijlers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px)}
.pijler{border-top:1px solid var(--lijn);padding-top:26px}
.pijler__nr{
  font-family:"Fraunces",serif;font-size:12px;letter-spacing:.2em;color:var(--messing);
  display:block;margin-bottom:16px;
}
.pijler h3{font-family:"Fraunces",serif;font-size:clamp(20px,1.7vw,25px);margin-bottom:10px;font-variation-settings:"SOFT" 40,"WONK" 1}
.pijler p{margin:0;font-size:15px;color:var(--mist);line-height:1.65}

/* --- behandelingen ------------------------------------------------------- */
.dienstenkop{
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;
  margin-bottom:clamp(34px,4vw,56px);
}
.dienstenkop h2{max-width:16ch}

/* --- één uitgelichte behandeling op de home ------------------------------ */
/* De home liet eerst alle zeven behandelingen in een raster zien. "Veel te vol"
   (Robin, 17 sep). Nu staat er één groot, met de doorverwijzing naar de pagina
   met alle zeven. Het raster hieronder blijft in gebruik op behandelingen.html. */
.uit{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  background:var(--creme);border:1px solid var(--lijn);border-radius:var(--r);
  overflow:hidden;
  transition:border-color .5s ease,box-shadow .6s ease;
}
.uit:hover{border-color:rgba(172,132,80,.5);box-shadow:0 34px 70px -44px rgba(34,26,19,.44)}
.uit__beeld{
  position:relative;display:block;overflow:hidden;background:var(--zand);
  min-height:clamp(340px,40vw,560px);
}
.uit__beeld img{transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.uit:hover .uit__beeld img{transform:scale(1.045)}
.uit__vink{
  position:absolute;top:16px;left:16px;z-index:2;background:rgba(247,242,234,.93);color:var(--inkt);
  border-radius:var(--pil);padding:7px 15px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
}
.uit__in{
  padding:clamp(30px,3.4vw,58px);
  display:flex;flex-direction:column;justify-content:center;
}
.uit__in .d3{margin-bottom:16px}
.uit__in .lead{color:var(--mist);margin:0;font-size:clamp(15.5px,1.1vw,18px);max-width:46ch}
.uit__feiten{
  display:flex;flex-wrap:wrap;margin:clamp(26px,2.8vw,38px) 0;
  border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
}
.uit__feiten > div{flex:1 1 130px;padding:18px 0}
.uit__feiten > div + div{border-left:1px solid var(--lijn);padding-left:clamp(16px,1.6vw,26px)}
.uit__feiten dt{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--messing);margin-bottom:8px}
.uit__feiten dd{
  margin:0;font-family:"Fraunces",serif;font-size:clamp(17px,1.4vw,22px);line-height:1.2;
  font-variation-settings:"SOFT" 40,"WONK" 1;
}
.uit__knoppen{display:flex;flex-wrap:wrap;gap:12px}

.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,34px)}
.raster--2{grid-template-columns:repeat(2,1fr)}

.dienst{
  display:flex;flex-direction:column;background:var(--creme);
  border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;
  transition:border-color .5s ease,transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s ease;
}
.dienst:hover{border-color:rgba(172,132,80,.55);transform:translateY(-5px);box-shadow:0 26px 54px -34px rgba(34,26,19,.42)}
.dienst__beeld{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--zand)}
.dienst__beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.dienst:hover .dienst__beeld img{transform:scale(1.045)}
.dienst__vink{
  position:absolute;top:12px;left:12px;background:rgba(247,242,234,.93);color:var(--inkt);
  border-radius:var(--pil);padding:6px 13px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
}
.dienst__in{padding:24px clamp(18px,2vw,26px) clamp(20px,2.4vw,28px);display:flex;flex-direction:column;flex:1}
.dienst__titel{
  font-family:"Fraunces",serif;font-size:clamp(19px,1.6vw,24px);line-height:1.18;margin-bottom:10px;
  font-variation-settings:"SOFT" 40,"WONK" 1;
}
.dienst p{margin:0 0 20px;font-size:14.5px;line-height:1.62;color:var(--mist)}
/* wrapt op smalle kaarten: de prijs mag niet afbreken, dus de boek-link
   zakt naar de volgende regel in plaats van buiten de kaart te steken */
.dienst__voet{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:10px 16px;flex-wrap:wrap;
  border-top:1px solid var(--lijn);padding-top:16px;
}
.dienst__voet > div{min-width:0}
.dienst__prijs{font-family:"Fraunces",serif;font-size:20px}
.dienst__duur{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.dienst__boek{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--messing);
  display:inline-flex;align-items:center;gap:7px;flex:none;
}
.dienst__boek .pijl{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.dienst:hover .dienst__boek .pijl{transform:translateX(4px)}

/* de prijslijst (behandelingen-pagina), maximaal leesbaar */
.lijst__rij{
  display:grid;grid-template-columns:1fr auto auto;gap:clamp(14px,2vw,34px);align-items:baseline;
  padding-block:clamp(18px,2vw,26px);border-bottom:1px solid var(--lijn);
  transition:background .4s ease,padding-inline .4s ease;
}
.lijst__rij:hover{background:rgba(228,214,193,.34);padding-inline:14px}

/* de prijslijst staat per soort bij elkaar, anders lezen zeven bijna gelijke
   namen als één lange brij */
.groep + .groep{margin-top:clamp(40px,5vw,72px)}
.groep__kop{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px 28px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--inkt);
}
.groep__kop h3{
  margin:0;font-family:"Fraunces",serif;font-weight:400;
  font-size:clamp(21px,2vw,29px);line-height:1.2;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 60;
}
.groep__kop p{margin:0;font-size:14px;color:var(--mist);max-width:46ch}
.lijst__naam{font-family:"Fraunces",serif;font-size:clamp(18px,1.6vw,23px);line-height:1.22}
.lijst__naam small{display:block;font-family:"Jost",sans-serif;font-size:14px;color:var(--mist);margin-top:5px;line-height:1.6;max-width:62ch;letter-spacing:0}
.lijst__duur{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);white-space:nowrap}
.lijst__prijs{font-family:"Fraunces",serif;font-size:clamp(18px,1.5vw,22px);white-space:nowrap;text-align:right;min-width:4.5ch}

/* --- het psalmvlak (scrubbed quote) -------------------------------------- */
.psalm{position:relative;background:var(--inkt);color:var(--creme);overflow:hidden}
.psalm__beeld{position:absolute;inset:0;opacity:.2}
.psalm__beeld img{width:100%;height:100%;object-fit:cover}
.psalm__in{position:relative;z-index:2;text-align:center;padding-block:clamp(90px,14vw,190px)}
.psalm__tekst{
  font-family:"Fraunces",serif;font-weight:300;
  font-size:clamp(26px,4.1vw,60px);line-height:1.22;letter-spacing:-.015em;
  font-variation-settings:"SOFT" 60,"WONK" 1;
  max-width:19ch;margin:0 auto;
}
.psalm__tekst .w{color:rgba(247,242,234,.2)} /* GSAP tilt ze een voor een op */
.psalm__bron{margin-top:34px;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--messing-licht)}
.ornament{display:block;margin:0 auto 34px;width:74px;height:38px;overflow:visible}
.ornament path{fill:none;stroke:var(--messing-licht);stroke-width:1.1}

/* --- verhaal / beeld naast tekst ----------------------------------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,88px);align-items:center}
.duo--om .duo__beeld{order:2}
.duo__beeld{position:relative;border-radius:var(--boog);overflow:hidden;aspect-ratio:4/5;background:var(--zand)}
.duo__beeld img{width:100%;height:100%;object-fit:cover;will-change:transform}
.duo__tekst h2{margin-bottom:22px}
/* Deze kop staat in een halve kolom en moet op één regel blijven, anders valt
   er een los woord onderaan. Daarom schaalt hij met de kolom mee, niet met d2. */
.duo__tekst .d2{font-size:clamp(30px,4.2vw,60px)}
.duo__tekst p{color:var(--mist);margin:0 0 20px}
.duo__tekst .btn,.duo__tekst .link{margin-top:10px}

/* --- cijfers ------------------------------------------------------------- */
.cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,40px)}
.cijfer{text-align:center}
.cijfer b{
  display:block;font-family:"Fraunces",serif;font-weight:300;
  font-size:clamp(34px,4.2vw,60px);line-height:1;margin-bottom:12px;
  font-variation-settings:"SOFT" 40,"WONK" 1;
}
.cijfer span{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.donker .cijfer span{color:var(--mist-om)}

/* --- stappen ------------------------------------------------------------- */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,52px);counter-reset:s}
.stap{position:relative;padding-top:30px;border-top:1px solid var(--lijn-om)}
.donker .stap{border-top-color:var(--lijn-om)}
.stap b{
  position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--messing);display:block;
}
.stap__nr{font-family:"Fraunces",serif;font-size:12px;letter-spacing:.2em;color:var(--messing-licht);display:block;margin-bottom:14px}
.stap h3{font-family:"Fraunces",serif;font-size:clamp(19px,1.7vw,24px);margin-bottom:10px;font-variation-settings:"SOFT" 40,"WONK" 1}
.stap p{margin:0;font-size:15px;color:var(--mist-om);line-height:1.62}

/* --- slot-oproep --------------------------------------------------------- */
.slot{position:relative;background:var(--inkt);color:var(--creme);overflow:hidden;text-align:center}
/* .slot zet zijn eigen donkere achtergrond, maar heeft nooit de class
   "donker" zelf. Zonder deze regel valt de bel-knop terug op de standaard
   .btn--leeg (inkt-tekst op een lijn van --lijn), en dat is inkt-op-inkt: de
   tekst is dan onzichtbaar tot je eroverheen hovert. Zelfde kleuren als
   ".donker .btn--leeg" hierboven, nu ook zonder die ouderclass. */
.slot .btn--leeg{color:var(--creme);border-color:var(--lijn-om)}
.slot .btn--leeg:hover{background:var(--creme);color:var(--inkt);border-color:var(--creme)}
.slot__in{position:relative;z-index:2;padding-block:clamp(80px,11vw,150px)}
.slot h2{margin:0 auto 22px;max-width:15ch}
.slot .lead{margin:0 auto 38px;text-align:center}
.slot__knoppen{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
/* Hier stond een boogcontour achter de tekst. Die las als een kader om de
   sectie heen in plaats van als vorm, dus hij is weg. De boog blijft waar hij
   wel werkt: om een beeld heen. */

/* --- voet ---------------------------------------------------------------- */
.voet{background:var(--creme-diep);padding-block:clamp(54px,7vw,84px) 28px}
.voet__boven{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(24px,3vw,50px);
  padding-bottom:clamp(38px,5vw,60px);border-bottom:1px solid var(--lijn);
}
/* De kopjes waren messing op creme: mooi, maar te licht om als kop te werken.
   Nu vet en in inkt, zodat je de vier kolommen meteen uit elkaar houdt. */
.voet h4{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--inkt);margin-bottom:20px;
}
.voet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
/* --mist (58% zwart) haalde op dit crème net geen leesbaar contrast. De
   lopende tekst staat nu op inkt-zacht, dat is 4.5:1 of beter. */
.voet li,.voet p{font-size:14.5px;color:var(--inkt-zacht);margin:0;line-height:1.6}
.voet li a{color:var(--inkt-zacht)}
.voet a:hover{color:var(--messing)}
.voet__merk .merk{color:var(--inkt);margin-bottom:16px}
.voet__merk p{max-width:34ch}
.voet__tijden{display:flex;flex-direction:column;gap:9px}
.voet__tijd{display:flex;justify-content:space-between;gap:14px;font-size:14px;color:var(--inkt-zacht)}
.voet__tijd b{font-weight:500;color:var(--inkt)}
.voet__onder{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:24px;font-size:13px;color:var(--inkt-zacht);
}
.voet__onder a{color:var(--inkt-zacht);border-bottom:1px solid rgba(34,26,19,.3)}

/* --- recensies ------------------------------------------------------------ */
/* Twee eerdere versies afgekeurd: doosjes met een sterretje erin (goedkoop) en
   daarna drie kolommen onder een haarlijn (Robin: "afscheidingslijnen, niet
   heel netjes"). Dit is versie drie en die doet wat hij vroeg: kaarten die er
   uitzien alsof ze rechtstreeks van Google komen, want daar gaan de echte
   reacties straks ook vandaan. Vandaar het echte vierkleurenlogo, de gele
   Google-sterren (#FBBC04) en de witte kaart. Wit, niet creme: op het creme
   vlak van de sectie licht de kaart dan net op, zoals op Google zelf.
   Ze staan in een carrousel, ook op desktop, zie .carrousel hieronder. */
.carrousel{--kgap:clamp(16px,1.8vw,26px);position:relative}
.carrousel__spoor{
  display:flex;gap:var(--kgap);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  /* ruimte voor de schaduw van de kaarten, anders knipt de scroller die af */
  padding:6px 2px 14px;margin:-6px -2px -14px;
}
.carrousel__spoor::-webkit-scrollbar{display:none}

.recensie{
  flex:0 0 calc((100% - 2 * var(--kgap)) / 3);
  scroll-snap-align:start;
  margin:0;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--lijn);border-radius:var(--r);
  padding:clamp(22px,2.1vw,30px);
  box-shadow:0 20px 44px -34px rgba(34,26,19,.4);
}
.recensie__kop{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.recensie__rondje{
  flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;color:#fff;line-height:1;
  font-family:"Fraunces",serif;font-size:17px;
}
.recensie__wie{display:flex;flex-direction:column;min-width:0;flex:1}
.recensie__wie b{
  font-weight:500;font-size:14.5px;color:var(--inkt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.recensie__datum{font-size:12.5px;color:var(--inkt-zacht);margin-top:3px}
.goog{flex:0 0 20px;width:20px;height:20px}
.sterren{display:inline-flex;gap:2px;color:#FBBC04;line-height:0}
.sterren .ster{width:15px;height:14px;fill:currentColor}
.recensie .sterren{margin-bottom:13px}
.recensie blockquote{margin:0;font-size:14.8px;line-height:1.66;color:var(--mist)}

/* de beoordeling boven de carrousel */
.cijfer{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin:calc(-1 * clamp(16px,1.8vw,26px)) 0 clamp(24px,2.8vw,34px);
  font-size:13.5px;color:var(--inkt-zacht);
}
.cijfer .goog{flex:0 0 22px;width:22px;height:22px}
.cijfer b{font-family:"Fraunces",serif;font-weight:400;font-size:22px;color:var(--inkt);line-height:1}
.cijfer .sterren .ster{width:16px;height:15px}

/* --- de reviewpagina ------------------------------------------------------ */
/* "Zie alle reviews" gaat naar een eigen pagina op de site, niet naar Google
   zelf: de bezoeker moet hier blijven. Robin, 17 sep. Alleen "schrijf een
   review" wijst naar buiten, want dat kan alleen bij Google. */
.score{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(30px,4vw,66px);align-items:center;
}
.score__links{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.score__groot{
  font-family:"Fraunces",serif;font-weight:200;line-height:.9;
  font-size:clamp(66px,7vw,104px);color:var(--inkt);
  font-variation-settings:"SOFT" 40,"WONK" 1;
}
.score__links .sterren .ster{width:20px;height:19px}
.score__bij{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px;color:var(--inkt-zacht)}
.verdeling{display:flex;flex-direction:column;gap:9px}
.verdeling__rij{display:flex;align-items:center;gap:12px}
.verdeling__cijfer{font-size:12.5px;color:var(--inkt-zacht);width:9px;text-align:right}
.verdeling__baan{flex:1;height:7px;border-radius:var(--pil);background:rgba(34,26,19,.1);overflow:hidden}
.verdeling__baan i{display:block;height:100%;border-radius:var(--pil);background:#FBBC04}
.verdeling__aantal{font-size:12.5px;color:var(--inkt-zacht);width:22px}
.score__doen{border-left:1px solid var(--lijn);padding-left:clamp(20px,2.4vw,36px)}
.score__doen p{margin:0 0 18px;font-size:14.5px;line-height:1.62;color:var(--mist)}

/* Alle recensies onder elkaar in kolommen. Met CSS-columns en niet met een grid,
   want kaarten van ongelijke lengte houden elkaar in een grid op een rij vast
   en dan staan er gaten tussen. */
.kolommen{columns:3;column-gap:clamp(16px,1.8vw,26px)}
.kolommen .recensie{
  flex:none;display:block;break-inside:avoid;
  margin-bottom:clamp(16px,1.8vw,26px);
}

.carrousel__voet{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:clamp(22px,2.4vw,32px);
}
/* passen alle kaarten al naast elkaar, dan valt er niets te bedienen */
.carrousel--vol .carrousel__voet{display:none}
.carrousel__stippen{display:flex;align-items:center;gap:8px}
.stip{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(34,26,19,.2);
  transition:background .4s ease,width .4s cubic-bezier(.22,1,.36,1);
}
.stip[aria-current="true"]{background:var(--messing);width:24px;border-radius:var(--pil)}
.stip[hidden]{display:none}
.carrousel__pijlen{display:flex;gap:10px}
.rond{
  width:46px;height:46px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid var(--lijn);background:transparent;color:var(--inkt);
  display:grid;place-items:center;
  transition:background .4s ease,border-color .4s ease,color .4s ease,opacity .3s ease;
}
.rond svg{width:15px;height:9px}
.rond:hover{background:var(--inkt);border-color:var(--inkt);color:var(--creme)}
.rond:focus-visible{outline:2px solid var(--messing);outline-offset:3px}
.rond[disabled]{opacity:.3;pointer-events:none}

/* --- paginakop (subpagina's) --------------------------------------------- */
.pkop{
  position:relative;
  padding-top:calc(var(--topruimte) + clamp(48px,7vw,100px));
  padding-bottom:clamp(52px,7.5vw,104px);
  background:var(--inkt);color:var(--creme);overflow:hidden;
}
/* De beelden zijn in beelden.py al op helderheid 92 gezet omdat er tekst
   overheen gaat. Hier dus licht doseren, anders blijft er van de foto niets
   over en is de kop een zwarte balk. */
.pkop__beeld{position:absolute;inset:0;opacity:.74}
.pkop__beeld img{width:100%;height:100%;object-fit:cover}
.pkop::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(34,26,19,.6),rgba(34,26,19,.34) 45%,rgba(34,26,19,.8));
}
.pkop__in{position:relative;z-index:2}
.pkop h1{margin:0 0 18px;max-width:15ch}
.pkop .lead{color:rgba(247,242,234,.84)}
.kruimel{display:flex;gap:10px;align-items:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--messing-licht);margin-bottom:22px}
.kruimel span{opacity:.5}

/* --- contact ------------------------------------------------------------- */
.contactraster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,70px)}
.infoblok{border-top:1px solid var(--lijn);padding-top:26px;margin-bottom:34px}
.infoblok h3{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--messing);margin-bottom:16px;font-family:"Jost",sans-serif}
.infoblok p,.infoblok a{font-size:clamp(17px,1.5vw,21px);font-family:"Fraunces",serif;line-height:1.5;margin:0;display:block}
.infoblok a:hover{color:var(--messing)}
.kaart{border-radius:var(--r);overflow:hidden;border:1px solid var(--lijn);min-height:340px;height:100%;background:var(--zand)}
.kaart iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:grayscale(.5) sepia(.14)}

.tijdtabel{width:100%;border-collapse:collapse}
.tijdtabel td{padding-block:13px;border-bottom:1px solid var(--lijn);font-size:15px}
.tijdtabel td:last-child{text-align:right;color:var(--mist)}
.tijdtabel tr.nu td{color:var(--messing)}
.tijdtabel tr.nu td:first-child::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--messing);margin-right:9px;vertical-align:middle}

/* --- boekflow ------------------------------------------------------------ */
.boekwrap{max-width:860px;margin-inline:auto}

/* --- de echte Boekbaar-widget ------------------------------------------- */
.boekkop{margin-bottom:clamp(28px,3.4vw,44px)}
.boekkop .d2{margin:0 0 16px;max-width:18ch}
.boekkop .lead{margin:0;max-width:46ch}
.widget{
  border:1px solid var(--lijn);border-radius:20px;overflow:hidden;
  background:#fff;box-shadow:0 22px 60px -38px rgba(34,26,19,.45);
}
/* de hoogte komt via postMessage binnen, dit is alleen wat er staat zolang
   de widget nog niets heeft teruggestuurd */
.widget iframe{display:block;width:100%;height:640px;border:0}
.balkje{display:flex;gap:8px;margin-bottom:clamp(26px,3vw,40px)}
.balkje i{flex:1;height:2px;background:var(--lijn);position:relative;overflow:hidden;border-radius:2px}
.balkje i::after{content:"";position:absolute;inset:0;background:var(--messing);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.76,0,.24,1)}
.balkje i.aan::after{transform:scaleX(1)}
.stapkop{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.stapkop h2{font-family:"Fraunces",serif;font-size:clamp(23px,2.4vw,34px);font-variation-settings:"SOFT" 40,"WONK" 1}
.stapkop .klein{white-space:nowrap}

.keuze{display:grid;gap:12px}
.keuze--2{grid-template-columns:repeat(2,1fr)}
.optie{
  display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;
  width:100%;padding:20px 24px;border:1px solid var(--lijn);border-radius:var(--r);
  background:var(--creme);cursor:pointer;transition:border-color .35s ease,background .35s ease,transform .35s cubic-bezier(.22,1,.36,1);
}
.optie:hover{border-color:var(--messing);background:rgba(228,214,193,.36);transform:translateX(4px)}
.optie.aan{border-color:var(--messing);background:rgba(228,214,193,.5)}
.optie__naam{font-family:"Fraunces",serif;font-size:clamp(17px,1.4vw,20px);line-height:1.3;display:block}
.optie__sub{display:block;font-size:13px;color:var(--mist);margin-top:4px}
.optie__prijs{font-family:"Fraunces",serif;font-size:17px;white-space:nowrap}

.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.slot-btn{
  padding:14px 8px;text-align:center;border:1px solid var(--lijn);border-radius:var(--pil);
  background:var(--creme);cursor:pointer;font-size:14px;letter-spacing:.04em;
  transition:border-color .3s ease,background .3s ease,color .3s ease;
}
.slot-btn:hover{border-color:var(--messing);color:var(--messing)}
.slot-btn.aan{background:var(--inkt);border-color:var(--inkt);color:var(--creme)}
.dagkiezer{display:flex;gap:10px;overflow-x:auto;padding-bottom:12px;margin-bottom:22px;scrollbar-width:thin}
.dag{
  flex:0 0 auto;min-width:78px;padding:13px 6px;text-align:center;border:1px solid var(--lijn);
  border-radius:var(--r);background:var(--creme);cursor:pointer;transition:all .3s ease;
}
.dag.aan{background:var(--inkt);border-color:var(--inkt);color:var(--creme)}
.dag.dicht{opacity:.32;cursor:not-allowed}
.dag b{display:block;font-family:"Fraunces",serif;font-size:19px;font-weight:400;line-height:1.1}
.dag span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:4px;opacity:.7}

.veldrij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.veld{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.veld label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.veld input,.veld textarea{
  font:inherit;font-size:15.5px;padding:15px 17px;border:1px solid var(--lijn);border-radius:var(--r);
  background:var(--creme);color:var(--inkt);transition:border-color .3s ease;
}
.veld input:focus,.veld textarea:focus{outline:0;border-color:var(--messing)}
.veld.fout input{border-color:#A8443B}
.veld .foutje{font-size:12.5px;color:#A8443B;display:none}
.veld.fout .foutje{display:block}

.overzicht{border:1px solid var(--lijn);border-radius:var(--r);padding:22px 24px;background:rgba(228,214,193,.3);margin-bottom:26px}
.overzicht dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 22px;font-size:14.5px}
.overzicht dt{color:var(--mist);letter-spacing:.02em}
.overzicht dd{margin:0;text-align:right;font-family:"Fraunces",serif;font-size:16px}

.boekvoet{display:flex;justify-content:space-between;gap:14px;margin-top:28px;align-items:center;flex-wrap:wrap}
.klaar{text-align:center;padding-block:20px}
.klaar__vink{
  width:72px;height:72px;border-radius:50%;border:1px solid var(--messing);margin:0 auto 26px;
  display:grid;place-items:center;
}
.klaar__vink svg{width:30px;height:30px;overflow:visible}
.klaar__vink path{fill:none;stroke:var(--messing);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.hulp{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px);
  margin-top:clamp(50px,7vw,86px);padding-top:clamp(34px,4vw,52px);border-top:1px solid var(--lijn);
}
.hulp h4{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--messing);margin-bottom:12px}
.hulp p,.hulp a{font-size:15px;color:var(--mist);margin:0;line-height:1.6}
.hulp a:hover{color:var(--inkt)}

/* --- scroll-reveal (vangnet) --------------------------------------------- */
/* Verbergen gebeurt via JS (html.js-klaar), zodat zonder JS niets wegvalt. */
.js-klaar .stil{opacity:0}

/* --- het doek ------------------------------------------------------------
   Staat bewust buiten #smooth-wrapper: position:fixed werkt niet binnen een
   container die door ScrollSmoother getransformeerd wordt. Zonder JS is er
   geen `doek-dicht` en haalt app.js het element meteen weg, dus het kan de
   site nooit blokkeren. */
.doek{
  position:fixed;inset:0;z-index:200;background:var(--inkt);
  display:flex;align-items:center;justify-content:center;will-change:transform;
}
.doek__in{text-align:center}
.doek__lijn{display:block;width:clamp(120px,17vw,190px);height:auto;margin:0 auto 22px}
.doek__lijn path{fill:none;stroke:var(--messing);stroke-width:1.1}
.doek__naam{opacity:0}
.doek__naam b{
  display:block;font-family:"Fraunces",serif;font-weight:400;color:var(--creme);
  font-size:clamp(30px,4.6vw,54px);line-height:1;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 120;
}
.doek__naam span{
  display:block;margin-top:14px;font-size:10px;letter-spacing:.38em;
  text-transform:uppercase;color:var(--messing-licht);
}
body.doek-dicht{overflow:hidden}

/* Beelden die meebewegen met de scroll staan bewust hoger dan hun kader,
   anders loopt de rand in beeld op het uiterste punt van de parallax. */
.diep{position:absolute;left:0;top:-14%;width:100%;height:128%;object-fit:cover}

/* --- ScrollSmoother ------------------------------------------------------ */
#smooth-content{will-change:transform}

/* ==========================================================================
   Smalle schermen
   ========================================================================== */
@media (max-width:1100px){
  .voet__boven{grid-template-columns:1fr 1fr;row-gap:38px}
  .cijfers{grid-template-columns:repeat(2,1fr);row-gap:34px}
  .raster{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:980px){
  :root{--balk-h:34px;--kop-h:62px}
  .nav{display:none}
  .burger{display:inline-flex}
  .kop__in{gap:12px}
  .balk{font-size:10px;letter-spacing:.14em}
  /* Alleen het logo in de kop wordt gecentreerd. Zonder .kop ervoor pakte ook
     het logo in de voettekst dit op; dat staat in een .voet__merk zonder
     position, dus het sprong naar het midden van een heel andere ouder en
     kwam op telefoon dwars over de recensiekop te staan. Gemeten 17 sep. */
  .kop .merk{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  .kop__cta .btn--nav{padding:11px 18px;font-size:10.5px}
  /* Op telefoon is de opening één beeld dat het hele scherm vult, met de tekst
     eroverheen. De vorige opzet (eerst een foto, dan een lap tekst, dan pas de
     knoppen) las als een folder en de CTA's zakten onder de vouw. Nu staat de
     tekst onderin het beeld, dus beide knoppen zijn altijd in zicht. */
  .opening{padding-top:0;background:var(--inkt);color:var(--creme)}
  /* de home-hero staat op de video, dus daar geen eigen inkt-vlak */
  .opening.opening--film{background:transparent}
  .opening__in{
    grid-template-columns:1fr;gap:0;align-items:end;
    min-height:100svh;
    padding-block:calc(var(--topruimte) + 12px) clamp(30px,6vh,56px);
  }
  .opening.opening--film .opening__tekst{max-width:none}
  .opening__boog{position:absolute;inset:0;order:0;pointer-events:none}
  .boog{aspect-ratio:auto;width:100%;height:100%;max-height:none;border-radius:0;margin:0}
  /* schermvullend snijdt de zijkanten weg; iets hoger uitsnijden houdt het
     voetenbad in beeld in plaats van alleen de badrand */
  .boog img{object-position:50% 42%}
  .boog__doek{opacity:1}
  .boog__rand{display:none}
  .boogsvg{display:none}
  .opening .label{color:var(--messing-licht)}
  .opening .d1{max-width:none;margin-bottom:16px}
  .opening__lead{margin-bottom:24px;color:rgba(247,242,234,.82)}
  .opening__knoppen .btn{background:var(--creme);border-color:var(--creme);color:var(--inkt)}
  .opening__knoppen .btn:hover{background:var(--messing-licht);border-color:var(--messing-licht)}
  .opening__knoppen .btn--leeg{background:transparent;color:var(--creme);border-color:rgba(247,242,234,.4)}
  .zwever{display:none}
  .scrolhint{display:none}
  .pijlers{grid-template-columns:1fr;gap:26px}
  .duo{grid-template-columns:1fr;gap:30px}
  .duo--om .duo__beeld{order:-1}
  .duo__beeld{aspect-ratio:4/3;max-height:52vh}
  .stappen{grid-template-columns:1fr;gap:26px}
  .contactraster{grid-template-columns:1fr}
  .hulp{grid-template-columns:1fr;gap:24px}
  .uit{grid-template-columns:1fr}
  .uit__beeld{min-height:0;aspect-ratio:16/10}
  .recensie{flex-basis:calc((100% - var(--kgap)) / 2)}
  .kolommen{columns:2}
  /* het cijfer en de balkjes naast elkaar, de oproep eronder over de volle breedte */
  .score{grid-template-columns:auto minmax(0,1fr);gap:28px 34px}
  .score__doen{grid-column:1 / -1;border-left:0;padding-left:0;border-top:1px solid var(--lijn);padding-top:24px}
}

@media (max-width:720px){
  /* De swipe-carrousel van 17 sep is er weer uit. Halve kaarten die aan de rand
     worden afgesneden oogden goedkoop. Kaarten staan op telefoon weer gewoon op
     volle breedte onder elkaar. Deze twee regels stonden in het carrouselblok,
     dus zonder dat blok bleven het twee kolommen van 180px op een telefoon. */
  .raster{grid-template-columns:1fr}
  /* De recensies zijn wel een carrousel, op elke maat, want dat vroeg Robin.
     Op telefoon staan ze op volle breedte: kaarten die half aan de rand worden
     afgesneden zijn hier eerder afgekeurd. De stippen en de pijlen eronder
     maken duidelijk genoeg dat er meer is. */
  .recensie{flex-basis:100%}
  .dienst__beeld{aspect-ratio:16/10}
  .kolommen{columns:1}
  .score{grid-template-columns:1fr;gap:24px}
  .uit__feiten > div{flex-basis:100%;padding:14px 0}
  .uit__feiten > div + div{border-left:0;border-top:1px solid var(--lijn);padding-left:0}
  .uit__knoppen .btn{width:100%;justify-content:center}
  .dienstenkop{align-items:flex-start;gap:18px}
  .veldrij{grid-template-columns:1fr}
  .keuze--2{grid-template-columns:1fr}
  .voet__boven{grid-template-columns:1fr;row-gap:32px}
  /* op telefoon staat er onderaan al genoeg: naam, nummer, credit. De
     Instagram-regel staat hierboven ook al in het menu en valt hier weg. */
  .voet__onder{flex-direction:column;align-items:flex-start;gap:8px}
  /* .label span hierboven is specifieker dan .smal-weg alleen, dus die moet
     hier expliciet genoemd worden, anders blijft de regel gewoon staan */
  .smal-weg,.label .smal-weg{display:none}
  .lijst__rij{grid-template-columns:auto 1fr;row-gap:6px;column-gap:14px}
  .lijst__duur{grid-column:2;font-size:11.5px}
  .lijst__prijs{grid-column:2;text-align:left;font-size:19px}
  .lijst__rij:hover{padding-inline:8px}
  .psalm__tekst{max-width:15ch}
  .cijfers{gap:26px}
  .overzicht dl{grid-template-columns:1fr;gap:3px 0}
  .overzicht dd{text-align:left;margin-bottom:10px}
  .boekvoet{flex-direction:column-reverse;align-items:stretch}
  .boekvoet .btn{width:100%}
}

/* het logo staat op mobiel absoluut gecentreerd, dus het telt niet mee in de
   breedte. Vanaf hier wordt de knop korter, anders schuift de pil eroverheen. */
@media (max-width:560px){
  .kop__cta .btn--nav .mr{display:none}
  .kop__cta .btn--nav{padding:11px 15px}

  /* Beide knoppen moeten binnen het eerste scherm vallen, anders ziet niemand
     "Bekijk de behandelingen". De kop schaalt daarom mee met de hoogte en niet
     alleen met de breedte. */
  .opening .label{margin-bottom:13px}
  .opening .d1{font-size:clamp(32px,min(8.6vw,5.2vh),46px);margin-bottom:12px}
  .opening__lead{margin-bottom:20px}
}

/* Een heel kort scherm (oude SE) heeft nauwelijks hoogte. Alles een maat
   kleiner, anders zakken de knoppen alsnog onder de vouw. */
@media (max-width:560px) and (max-height:660px){
  .opening .label{margin-bottom:10px}
  .opening .d1{font-size:clamp(26px,7.6vw,32px);margin-bottom:10px}
  .opening__lead{margin-bottom:14px}
}

@media (max-width:420px){
  .merk__tag{display:none}
  .opening__knoppen{gap:10px}
  .opening__knoppen .btn{width:100%}
  .slot__knoppen .btn{width:100%}
}

/* heel breed: laat de inhoud niet uit elkaar vallen */
@media (min-width:1700px){
  :root{--max:1440px}
}

/* Lage maar brede schermen: de opening moet binnen het scherm blijven. */
@media (min-width:981px){
  .opening .d1{font-size:clamp(40px,min(6.4vw,9.2vh),104px)}
  .boog{max-height:min(70vh,720px)}
}

@media print{
  .kop,.balk,.paneel,.scrolhint,body::after{display:none !important}
  .stil{opacity:1 !important}
}