/* ─────────────────────────────────────────────────────────────────────────────
   Liquid Beauty by de Graaf — kleur volgens Natasja, 6-8-2026.
   Koel lichtgrijs, taupe, warm wit, grafiet. Roze is een fluistering, geen vlak.
   Alles in OKLCH: gelijke stappen in lichtheid zien er ook gelijk uit, en dat is
   precies wat je nodig hebt als je hele ontwerp uit lichte grijstinten bestaat.
   Gedeeld door alle pagina's (index / artsen / rimpelbehandeling / bloedeigen-
   behandelingen) — één stylesheet, geen dubbele <style>-blokken per bestand.
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  --wit:        oklch(98.8% 0.003 75);
  --mist:       oklch(96.4% 0.004 250);
  --mist-diep:  oklch(94.2% 0.005 250);
  --lijn:       oklch(90.5% 0.005 250);
  --lijn-zacht: oklch(93.5% 0.004 250);
  --grafiet:    oklch(27.5% 0.010 255);
  --grafiet-op: oklch(21% 0.012 255);
  --gedempt:    oklch(51% 0.008 255);
  --taupe:      oklch(70% 0.014 65);
  --roze:       oklch(72% 0.045 12);
  --roze-diep:  oklch(54% 0.055 12);

  --kop: "Spectral", Georgia, serif;
  --tekst: "Schibsted Grotesk", system-ui, sans-serif;

  --s-2xs:4px; --s-xs:8px; --s-sm:12px; --s-md:16px;
  --s-lg:24px; --s-xl:32px; --s-2xl:48px; --s-3xl:64px; --s-4xl:96px;

  --breed:1240px;
  --rand:clamp(20px,5vw,64px);
  --soepel:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--wit); color:var(--grafiet); font-family:var(--tekst);
  font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--kop); font-weight:400; line-height:1.12; letter-spacing:-.015em; margin:0}
h1{font-size:clamp(2.5rem,5vw,4rem)}
h2{font-size:clamp(1.95rem,3.5vw,2.9rem)}
h3{font-size:1.2rem; line-height:1.3}
p{margin:0}
.wrap{max-width:var(--breed); margin-inline:auto; padding-inline:var(--rand)}
.smal{max-width:940px}

.eyebrow{font-size:.705rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--roze-diep); display:flex; align-items:center; gap:var(--s-sm); margin-bottom:var(--s-md)}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--roze); flex:none}
.eyebrow--licht{color:oklch(80% .03 12)}
.eyebrow--licht::before{background:oklch(62% .04 12)}
.lood{font-size:1.02rem; color:var(--gedempt); max-width:58ch}

.knop{display:inline-flex; align-items:center; gap:10px; font-family:var(--tekst); font-size:.83rem;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:15px 26px; border-radius:2px;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background .45s var(--soepel), color .45s var(--soepel), border-color .45s var(--soepel)}
.knop--vol{background:var(--grafiet); color:var(--wit)}
.knop--vol:hover{background:var(--grafiet-op)}
.knop--lijn{border-color:var(--lijn); color:var(--grafiet)}
.knop--lijn:hover{border-color:var(--grafiet); background:var(--mist)}
.knop--licht{background:var(--wit); color:var(--grafiet)}
.knop--licht:hover{background:var(--mist)}
.knop--lijn-licht{border-color:oklch(45% .01 255); color:oklch(94% .004 255)}
.knop--lijn-licht:hover{border-color:var(--wit); background:oklch(26% .011 255)}

.balk{background:var(--mist-diep); border-bottom:1px solid var(--lijn-zacht)}
.balk .wrap{display:flex; justify-content:center; gap:var(--s-sm); padding-block:9px;
  font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--gedempt)}
.sterren{color:var(--roze-diep); letter-spacing:.12em}

header{position:sticky; top:0; z-index:60; background:oklch(98.8% .003 75 / .93);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--lijn-zacht)}
header .wrap{display:flex; align-items:center; gap:var(--s-2xl); padding-block:var(--s-md)}
.merk img{height:34px; width:auto}
nav{display:flex; gap:var(--s-lg); margin-left:auto; font-size:.86rem; font-weight:500}
nav a{text-decoration:none; padding-block:4px; position:relative}
nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--grafiet); transition:right .5s var(--soepel)}
nav a:hover::after{right:0}
.kop-cta{margin-left:var(--s-lg)}
@media(max-width:1040px){ nav{display:none} .kop-cta{margin-left:auto} }

/* Hero — positionering eerst, dan pas de uitleg */
.hero{padding-block:clamp(56px,8vw,100px) 0;
  background:linear-gradient(180deg,var(--wit) 0%,var(--mist) 80%,var(--mist) 100%)}
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
.hero h1{margin-bottom:var(--s-md)}
.hero h1 em{font-style:normal; color:var(--taupe); display:block}
.hero .lood{margin-block:var(--s-lg) var(--s-xl)}
.hero-acties{display:flex; flex-wrap:wrap; gap:var(--s-sm)}
.hero-beeld{position:relative}
.hero-beeld img{width:100%; aspect-ratio:4/3.35; object-fit:cover; object-position:50% 22%;
  border-radius:2px; filter:saturate(.86) contrast(.97)}
.hero-beeld::after{content:""; position:absolute; inset:auto 0 0 0; height:36%; border-radius:0 0 2px 2px;
  background:linear-gradient(180deg,transparent,oklch(96.4% .004 250 / .5))}
.badge{position:absolute; left:-26px; bottom:34px; z-index:2; background:var(--wit);
  padding:16px 26px 16px 22px; display:flex; align-items:center; gap:16px;
  box-shadow:0 18px 44px -28px oklch(27.5% .01 255 / .5)}
.badge b{font-family:var(--kop); font-size:2rem; font-weight:400; line-height:1}
.badge span{font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gedempt); line-height:1.5}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr} .badge{left:12px} }

/* Hero enkel — subpagina's zonder beeldkolom (artsen / rimpelbehandeling / bloedeigen-behandelingen) */
.hero-enkel .wrap{max-width:820px}
.hero-enkel{padding-block:clamp(56px,8vw,100px) clamp(48px,7vw,84px)}

/* Cijferband — concrete, onderbouwde getallen i.p.v. "veel ervaring" */
.cijfers{background:var(--mist); border-top:1px solid var(--lijn)}
.cijfers .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px;
  background:var(--lijn); padding-inline:0; max-width:none}
.cijfer-vak{background:var(--mist); padding:var(--s-xl) var(--s-lg); text-align:center}
.cijfer-vak b{display:block; font-family:var(--kop); font-size:2.5rem; font-weight:300; line-height:1;
  margin-bottom:8px}
.cijfer-vak span{font-size:.71rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gedempt)}

section{padding-block:clamp(64px,8vw,108px)}
.sectie-kop{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s-2xl); align-items:end; margin-bottom:var(--s-2xl)}
@media(max-width:820px){ .sectie-kop{grid-template-columns:1fr; gap:var(--s-md)} }

/* Protocol — het eigen concept, krijgt een eigen donkere sectie met vol beeld */
.protocol{background:var(--grafiet-op); color:oklch(93% .004 255); position:relative; overflow:hidden}
.protocol h2,.protocol h3{color:var(--wit)}
.protocol .lood{color:oklch(76% .008 255)}
.protocol-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
.protocol-beeld{position:relative}
.protocol-beeld img{width:100%; aspect-ratio:4/4.4; object-fit:cover; border-radius:2px;
  filter:saturate(.7) contrast(1.02) brightness(.92)}
.protocol-lijst{display:grid; gap:1px; background:oklch(30% .01 255); margin-block:var(--s-xl)}
.protocol-rij{background:var(--grafiet-op); padding:var(--s-md) 0 var(--s-md) var(--s-md);
  display:grid; grid-template-columns:82px 1fr; gap:var(--s-md); align-items:baseline;
  text-decoration:none; color:inherit}
.protocol-rij b{font-size:.78rem; letter-spacing:.13em; color:var(--taupe)}
.protocol-rij p{font-size:.93rem; color:oklch(80% .006 255)}
@media(max-width:860px){ .protocol-grid{grid-template-columns:1fr} }

/* Behandelingen */
.kaarten{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s-lg)}
.kaart{display:flex; flex-direction:column; gap:var(--s-sm); text-decoration:none}
.kaart-beeld{position:relative; overflow:hidden; border-radius:2px; background:var(--mist)}
.kaart-beeld img{width:100%; aspect-ratio:4/3; object-fit:cover; filter:saturate(.84) contrast(.96);
  transition:transform 1.1s var(--soepel), filter .8s var(--soepel)}
.kaart:hover .kaart-beeld img{transform:scale(1.045); filter:saturate(.95) contrast(1)}
.kaart-nr{position:absolute; top:14px; left:14px; z-index:2; background:oklch(98.8% .003 75 / .93);
  font-size:.68rem; letter-spacing:.13em; padding:5px 9px; color:var(--gedempt)}
.kaart-label{font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--roze-diep); margin-top:var(--s-xs)}
.kaart p{font-size:.92rem; color:var(--gedempt)}
.kaart-meer{margin-top:auto; padding-top:var(--s-xs); font-size:.76rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; display:flex; gap:8px; align-items:center}
.kaart-meer::after{content:"→"; transition:transform .45s var(--soepel)}
.kaart:hover .kaart-meer::after{transform:translateX(5px)}

/* Waarom — eigen blok, zes redenen in één oogopslag */
.waarom-blok{background:var(--mist-diep)}
/* Zes redenen horen in DRIE kolommen, niet in auto-fit: bij vier kolommen blijven er twee
   vakken leeg en dat leest als een gat, niet als lucht. */
.redenen{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--lijn)}
@media(max-width:900px){ .redenen{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .redenen{grid-template-columns:1fr} }
.reden{background:var(--mist-diep); padding:var(--s-lg) var(--s-md) var(--s-xl)}
.reden b{display:block; font-family:var(--kop); font-size:1.5rem; font-weight:300; color:var(--taupe); margin-bottom:10px}
.reden h3{font-size:1.05rem; margin-bottom:6px}
.reden p{font-size:.9rem; color:var(--gedempt)}

/* Traject / stappen (ook hergebruikt op de behandel-pagina's: consult, behandeling) */
.stap-lijst{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px; background:var(--lijn)}
.stap{background:var(--wit); padding:var(--s-lg) var(--s-md) var(--s-xl)}
.stap b{display:block; font-family:var(--kop); font-size:1.5rem; font-weight:300; color:var(--taupe); margin-bottom:10px}
.stap h3{font-size:1.02rem; margin-bottom:6px}
.stap p{font-size:.9rem; color:var(--gedempt)}

/* Arts-uitgelicht — volle breedte, doorbreekt het ritme van de kaartenrijen */
.uitgelicht{background:var(--wit); padding-block:0}
.uitgelicht-grid{display:grid; grid-template-columns:.9fr 1fr; align-items:stretch; background:var(--mist)}
.uitgelicht-beeld{position:relative; background:var(--mist-diep); display:flex; align-items:flex-end; justify-content:center}
.uitgelicht-beeld img{width:100%; max-width:520px; object-fit:contain; filter:saturate(.85)}
.uitgelicht-tekst{padding:clamp(36px,5vw,72px) clamp(24px,4vw,64px)}
.uitgelicht-tekst q{display:block; font-family:var(--kop); font-size:clamp(1.3rem,2.2vw,1.75rem);
  line-height:1.42; quotes:none; margin-block:var(--s-md) var(--s-lg)}
.kwalificaties{display:grid; gap:9px; margin-block:var(--s-lg) var(--s-xl)}
.kwalificaties div{display:flex; gap:11px; font-size:.94rem; align-items:baseline}
.kwalificaties div::before{content:"—"; color:var(--taupe); flex:none}
@media(max-width:880px){ .uitgelicht-grid{grid-template-columns:1fr} }

/* Specialisten */
.artsen{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:var(--s-lg)}
.arts img{width:100%; aspect-ratio:3/3.6; object-fit:cover; object-position:50% 20%; border-radius:2px;
  filter:grayscale(.32) saturate(.8) contrast(.98); transition:filter .8s var(--soepel)}
.arts:hover img{filter:grayscale(0) saturate(.95) contrast(1)}
.arts-big{font-size:.66rem; letter-spacing:.12em; color:var(--gedempt); margin-top:var(--s-md)}
.arts h3{font-size:1.1rem; margin-block:4px 2px}
.arts-rol{font-size:.87rem; color:var(--gedempt); margin-bottom:var(--s-sm)}
.arts-titel{font-size:.79rem; color:var(--gedempt); margin-bottom:2px}
.arts-feit{display:grid; gap:3px; font-size:.79rem; color:var(--gedempt);
  border-top:1px solid var(--lijn); padding-top:var(--s-sm)}
.arts-feit span b{font-weight:600; color:var(--grafiet)}

/* Plaatshouder — velden die nog niet geverifieerd zijn (BIG-nummer, officiële titel).
   Bewust duidelijk als "nog niet ingevuld" leesbaar, geen verzonnen waarde. */
.plaatshouder{font-style:italic; color:oklch(60% .01 255); border-bottom:1px dashed var(--lijn); padding-bottom:2px;
  display:inline-block}

/* Beoordelingen */
.reviews{background:var(--grafiet-op); color:oklch(94% .004 255)}
.reviews h2{color:var(--wit)}
.reviews .lood{color:oklch(76% .008 255)}
.cijfer{display:flex; align-items:baseline; gap:var(--s-md); justify-content:flex-end}
.cijfer b{font-family:var(--kop); font-size:3.5rem; font-weight:300; color:var(--wit); line-height:1}
.cijfer span{font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:oklch(70% .008 255)}
.review-lijst{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:var(--s-lg)}
.review{background:oklch(26% .011 255); padding:var(--s-lg); border-radius:2px; display:flex; flex-direction:column; gap:var(--s-md)}
.review q{font-size:.95rem; line-height:1.7; color:oklch(90% .005 255); quotes:none}
.review footer{font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:oklch(66% .008 255); margin-top:auto}
@media(max-width:820px){ .cijfer{justify-content:flex-start} }

/* Locaties */
.locaties{background:var(--mist)}
.plek{position:relative; overflow:hidden; border-radius:2px; text-decoration:none; display:block}
.plek img{width:100%; aspect-ratio:4/3.4; object-fit:cover; filter:saturate(.8) contrast(.96);
  transition:transform 1.2s var(--soepel)}
.plek:hover img{transform:scale(1.04)}
.plek-op{position:absolute; inset:auto 0 0 0; padding:var(--s-lg) var(--s-md);
  background:linear-gradient(180deg,transparent,oklch(21% .012 255 / .78));
  display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s-md); color:var(--wit)}
.plek-op h3{font-size:1.45rem}
.plek-op p{font-size:.78rem; color:oklch(88% .005 255)}

/* Vragen */
.vraag{border-top:1px solid var(--lijn)}
.vraag:last-of-type{border-bottom:1px solid var(--lijn)}
.vraag summary{list-style:none; cursor:pointer; padding:var(--s-lg) var(--s-xs);
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-md);
  font-size:1rem; font-weight:500; transition:color .35s var(--soepel)}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary:hover{color:var(--roze-diep)}
.vraag summary::after{content:"+"; font-size:1.2rem; color:var(--taupe); flex:none; transition:transform .5s var(--soepel)}
.vraag[open] summary::after{transform:rotate(45deg)}
.vraag-inhoud{padding:0 var(--s-xs) var(--s-lg); max-width:66ch; color:var(--gedempt); font-size:.95rem}

/* Feitelijke lijsten — risico's/bijwerkingen op de behandel-pagina's */
.feiten-lijst{display:grid; gap:11px; margin:0; padding-left:1.15em; max-width:66ch}
.feiten-lijst li{font-size:.95rem; color:var(--gedempt); line-height:1.65}

/* Let-op — "wanneer niet geschikt", altijd feitelijk, nooit een verkoopblok */
.let-op{border:1px solid var(--lijn); border-left:3px solid var(--roze-diep); background:var(--mist);
  padding:var(--s-lg) var(--s-xl); max-width:66ch}
.let-op h3{margin-bottom:var(--s-sm)}

/* Contact */
.contact-lijst{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1px; background:var(--lijn)}
.contact-item{background:var(--wit); padding:var(--s-xl) var(--s-lg); display:flex; flex-direction:column; gap:6px;
  text-decoration:none; transition:background .4s var(--soepel)}
.contact-item:hover{background:var(--mist)}
.contact-item small{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--roze-diep)}
.contact-item b{font-family:var(--kop); font-size:1.4rem; font-weight:400}
.contact-item p{font-size:.86rem; color:var(--gedempt)}

.slot{background:var(--mist-diep); border-block:1px solid var(--lijn)}
.slot .wrap{display:grid; grid-template-columns:1fr auto; gap:var(--s-xl); align-items:center;
  padding-block:clamp(48px,6vw,76px)}
@media(max-width:820px){ .slot .wrap{grid-template-columns:1fr} }

footer.voet{background:var(--grafiet-op); color:oklch(78% .006 255); padding-block:var(--s-4xl) var(--s-xl)}
.voet-grid{display:grid; grid-template-columns:1.3fr repeat(3,.8fr) 1.1fr; gap:var(--s-xl); margin-bottom:var(--s-3xl)}
.voet h4{font-family:var(--kop); font-weight:400; font-size:1.12rem; color:var(--wit); margin:0 0 var(--s-md)}
.voet ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.88rem}
.voet a{text-decoration:none; transition:color .35s var(--soepel)}
.voet a:hover{color:var(--wit)}
.voet-logo img{height:30px; width:auto; margin-bottom:var(--s-md)}
.voet-onder{border-top:1px solid oklch(32% .01 255); padding-top:var(--s-lg); display:flex; flex-wrap:wrap;
  gap:var(--s-md); justify-content:space-between; font-size:.77rem; color:oklch(64% .008 255)}
@media(max-width:900px){ .voet-grid{grid-template-columns:1fr 1fr} }

/* CCBA — wettelijk verplichte slogan + oog-beeldmerk (Code medische Cosmetische
   Behandelingen uitgevoerd door Artsen). Op elke pagina, in de footer, goed leesbaar —
   geen kleine grijze bijzin. */
.ccba{display:flex; align-items:center; gap:var(--s-lg); padding-block:var(--s-xl);
  border-top:1px solid oklch(32% .01 255); margin-top:var(--s-lg)}
.ccba-oog{width:56px; height:auto; flex:none; color:var(--taupe)}
.ccba p{font-size:.92rem; line-height:1.6; color:oklch(90% .005 255); max-width:64ch}
.ccba strong{color:var(--wit)}
@media(max-width:620px){ .ccba{flex-direction:column; align-items:flex-start; gap:var(--s-md)} }

@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .9s var(--soepel), transform .9s var(--soepel)}
  .reveal.zichtbaar{opacity:1; transform:none}
}
:focus-visible{outline:2px solid var(--roze-diep); outline-offset:3px}