/* ==========================================================================
   LASERSTUDIO DENISE — mobile first
   Foto's: eigen materiaal (laser1-4.jpeg, denisekvk.jpeg) in dezelfde map.
   ========================================================================== */
:root{
  --ink:#16110d;
  --brown:#6b5b4c;
  --brown-dark:#4a3d31;
  --gold:#c9a86c;
  --gold-light:#dcc199;
  --cream:#f7f3ec;
  --paper:#fbf8f3;
  --beige:#e9e3da;
  --card:#faf8f4;
  --text:#4f463e;
  --muted:#8f8478;
  --heading:#2c251f;
  --line:#ded6ca;

  /* De twee lettertypen van de site, zodat ze op één plek staan. */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;

  --img-hero:url('../../laser2.jpeg');
  --img-hero-d:url('../../laser2.jpeg');
  --img-welkom:url('../../denisekvk.jpeg');
  --img-ontharing:url('../../laser4.jpeg');
  --img-tattoo:url('../../laser3.jpeg');
  --img-pmu:url('../../laser2.jpeg');
  --img-carbon:url('../../laser1.jpeg');
  --img-pigment:url('../../pigmentvlekken.jpg');
  --img-studio:url('../../studio-behandelkamer.jpg');
  --img-moment:url('../../laser4.jpeg');
  --wa:#25d366;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',system-ui,sans-serif;font-weight:300;
  color:var(--text);background:var(--cream);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;color:var(--heading)}
.script{font-family:'Parisienne',cursive;font-weight:400}
.only-desktop{display:none}

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;
  padding:14px 28px;border-radius:999px;transition:background .25s,color .25s,border-color .25s;
}
.btn-gold{background:var(--gold);color:#2b2118}
.btn-gold:hover{background:#b8955a}
.btn-outline{border:1px solid var(--gold);color:var(--gold-light);background:transparent;border-radius:0}
.btn-outline:hover{background:var(--gold);color:#2b2118}
.link-gold{
  display:inline-flex;align-items:center;gap:12px;color:var(--gold);
  font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;
}

/* ---------- logo ---------- */
/* In de balk: het embleem met de naam ernaast. "Denise" staat in het
   sierlijke schrift, zoals het voor de omzetting naar het volledige logo
   ook was. Het complete logo met de regel eronder staat in de footer. */
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:50px;width:auto;flex:none}
.logo .word{line-height:1;text-align:center}
.logo .word b{
  display:block;font-family:'Cormorant Garamond',serif;font-weight:500;
  color:var(--heading);font-size:.98rem;letter-spacing:.2em;text-transform:uppercase;
}
.logo .word i{
  display:block;font-family:'Parisienne',cursive;font-style:normal;
  color:var(--gold);font-size:1.55rem;margin-top:-4px;
}

/* In de donkere footer: het volledige logo met de regel eronder. */
.site-footer .logo.logo-volledig{display:block;gap:0}
.site-footer .logo.logo-volledig img{
  height:auto;width:min(340px,78vw);
  filter:invert(1) hue-rotate(180deg) brightness(1.15);
}

/* ---------- header ---------- */
.site-header{background:var(--paper);position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;padding:10px 22px}
.nav-toggle{background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:26px;height:1.5px;background:var(--gold);margin:6px 0}
.nav{display:none;flex-direction:column;padding:4px 22px 18px;background:var(--paper)}
.nav.open{display:flex}
.nav a{
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brown);padding:11px 0;border-bottom:1px solid var(--line);
}
.nav a:last-child{border-bottom:0}

.strip{
  background:var(--ink);border-top:1px solid rgba(201,168,108,.16);
  padding:9px 22px 12px;text-align:center;
  font-size:.68rem;letter-spacing:.03em;color:#d3c8b8;
}
.strip i{font-style:normal;color:var(--gold);margin:0 9px}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:330px;display:flex;align-items:center;
  background:
    linear-gradient(95deg,rgba(15,11,8,.93) 0%,rgba(15,11,8,.72) 38%,rgba(20,14,9,.15) 72%),
    var(--img-hero) 70% 30%/cover no-repeat,
    linear-gradient(120deg,#241a12,#6b4e30);
  padding:44px 0;
}
.hero .eyebrow{
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:#ddd2c1;line-height:1.9;max-width:11ch;
}
/* Het woordmerk in de hero is geen kop maar een logo in tekstvorm; het
   staat daarom in een <p>. De opmaak hangt dus aan de klasse en niet aan
   het element, anders valt hij weg zodra dat element verandert. */
.hero h1,
.hero .d-title{
  color:#fff;font-size:clamp(1.85rem,7.6vw,2.4rem);line-height:1.22;
  margin-top:10px;max-width:11ch;
  /* Zelfde schreefletter als h1/h2/h3; er bestaat geen --serif variabele. */
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
}
.hero .rule{display:block;width:44px;height:1px;background:var(--gold);margin:20px 0 22px}

/* ---------- usp-balk (mobiel) ---------- */
.usps{background:var(--ink);display:grid;grid-template-columns:repeat(3,1fr);padding:20px 6px}
.usp{text-align:center;padding:2px 10px;border-left:1px solid rgba(201,168,108,.22)}
.usp:first-child{border-left:0}
.usp svg{color:var(--gold);margin:0 auto 10px}
.usp span{display:block;font-size:.7rem;line-height:1.5;color:#e3d9c9}

/* ---------- welkom ---------- */
.welkom{position:relative;background:var(--cream);padding:38px 0 34px;overflow:hidden}
.welkom .wrap{position:static}
.welkom .txt{position:relative;z-index:2;max-width:60%}
.welkom .script{color:var(--gold);font-size:2rem;line-height:1.1}
.welkom h2{
  font-size:1.12rem;letter-spacing:.14em;text-transform:uppercase;
  margin:2px 0 16px;line-height:1.3;
}
.welkom h2 em{
  display:block;font-family:'Parisienne',cursive;font-style:normal;text-transform:none;
  letter-spacing:0;color:var(--gold);font-size:1.9em;line-height:1;margin:2px 0 0 1.2em;
}
.welkom p{font-size:.85rem;line-height:1.75;margin-bottom:20px}
.welkom .photo{
  position:absolute;top:0;right:0;bottom:0;width:44%;z-index:1;
  border-radius:190px 0 0 190px;
  background:var(--img-welkom) center 20%/cover no-repeat,linear-gradient(140deg,#2a2018,#5c452c);
}

/* ---------- behandelingen ---------- */
.behandelingen{background:var(--paper);padding:34px 0 38px}
.behandelingen .head{text-align:center;margin-bottom:24px}
.behandelingen h2{font-size:1.75rem}
.behandelingen .head span{display:block;width:52px;height:1px;background:var(--gold);margin:10px auto 0}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:11px}
.tile{
  position:relative;grid-column:span 2;height:132px;overflow:hidden;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.tile:nth-child(n+4){grid-column:span 3}
.tile::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 32%,rgba(12,8,5,.78));
}
.tile .label{
  position:absolute;left:12px;bottom:9px;z-index:2;color:#fff;
  font-family:'Cormorant Garamond',serif;font-size:.86rem;line-height:1.3;
}
.tile .label em{display:block;font-style:normal;margin-top:1px;color:#e9dfcd}
.tile:nth-child(1){background-image:var(--img-ontharing)}
.tile:nth-child(2){background-image:var(--img-tattoo)}
.tile:nth-child(3){background-image:var(--img-pmu)}
.tile:nth-child(4){background-image:var(--img-carbon)}
.tile:nth-child(5){background-image:var(--img-pigment)}

/* desktopvariant van de behandelkaarten */
.cards{display:none;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:var(--card);display:flex;flex-direction:column}
.card .thumb{aspect-ratio:16/8.6;background-position:center;background-size:cover}
.card:nth-child(1) .thumb{background-image:var(--img-ontharing)}
.card:nth-child(2) .thumb{background-image:var(--img-tattoo)}
.card:nth-child(3) .thumb{background-image:var(--img-pmu)}
.card:nth-child(4) .thumb{background-image:var(--img-carbon)}
.card .body{padding:22px 20px 24px;display:flex;flex-direction:column;flex:1}
.card h3{
  font-family:'Jost',sans-serif;font-weight:400;color:var(--heading);
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px;
}
.card p{font-size:.84rem;line-height:1.7;flex:1}
.card .arrow{margin-top:18px;color:var(--muted);transition:transform .25s,color .25s}
.card:hover .arrow{color:var(--gold);transform:translateX(5px)}

/* ---------- moment / cta ---------- */
.moment{
  text-align:center;padding:38px 0 42px;color:#f2e9db;
  background:
    linear-gradient(rgba(88,74,60,.86),rgba(74,61,49,.9)),
    var(--img-moment) center/cover no-repeat,var(--brown);
}
.moment h2{color:#fff;font-size:1.6rem;margin-bottom:10px}
.moment p{font-size:.8rem;color:#ded3c3;max-width:38ch;margin:0 auto 22px}

/* ---------- studio ---------- */
.studio{display:grid}
.studio .photo{
  /* De foto staat rechtop (1100x1452). Het vak krijgt diezelfde verhouding,
     zodat 'cover' de hele kamer laat zien zonder dat er lege ruimte naast
     of onder de foto overblijft. */
  aspect-ratio:1100/1452;
  /* op een smal scherm anders beeldvullend hoog */
  width:100%;max-width:330px;margin:0 auto;
  background:var(--img-studio) center/cover no-repeat,#2a2018;
}
.studio .panel{
  background:var(--brown-dark);color:#ded3c3;padding:36px 22px;
  /* tekst gecentreerd in het bruine vlak */
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
}
.studio .panel .eyebrow{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:#bdae9a}
.studio .panel h2{color:#fff;font-size:1.5rem;line-height:1.3;margin:12px 0 16px}
.studio .panel p{font-size:.86rem;max-width:44ch;margin-left:auto;margin-right:auto}

/* ---------- behandelingen detail ---------- */
.detail{background:var(--cream);padding:40px 0 10px}
.detail .head{text-align:center;margin-bottom:26px}
.detail .eyebrow{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.detail h2{font-size:1.6rem;margin-top:8px}
.beh{display:grid;gap:18px;align-items:center;padding:22px 0;border-top:1px solid var(--line);scroll-margin-top:110px}
.beh:first-of-type{border-top:0}
.beh .img{aspect-ratio:4/3;background-position:center;background-size:cover}
.beh h3{font-size:1.35rem;margin-bottom:8px}
.beh p{font-size:.86rem;margin-bottom:12px}
.beh ul{list-style:none;font-size:.82rem;color:var(--brown);margin-bottom:16px}
.beh ul li{padding:3px 0 3px 18px;position:relative}
.beh ul li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--gold)}

/* ---------- prijzen ---------- */
.prijzen{background:var(--paper);padding:40px 0 44px;scroll-margin-top:90px}
.prijzen .head{text-align:center;margin-bottom:24px}
.prijzen .eyebrow{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.prijzen h2{font-size:1.6rem;margin-top:8px}
.prijs-groep{margin-bottom:26px}
.prijs-groep h3{
  font-family:'Jost',sans-serif;font-weight:400;font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--heading);padding-bottom:8px;border-bottom:1px solid var(--gold);margin-bottom:6px;
}
.prijs{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.86rem}
.prijs span:last-child{color:var(--heading);white-space:nowrap}
.prijs-note{font-size:.76rem;color:var(--muted);text-align:center;margin-top:14px}

/* ---------- faq ---------- */
.faq{background:var(--cream);padding:40px 0 44px;scroll-margin-top:90px}
.faq .head{text-align:center;margin-bottom:24px}
.faq .eyebrow{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.faq h2{font-size:1.6rem;margin-top:8px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
  padding:15px 0;font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--heading);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.3rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{font-size:.86rem;padding:0 0 16px}

/* ---------- contact ---------- */
.contact{background:var(--brown-dark);color:#ded3c3;padding:44px 0 48px;scroll-margin-top:90px}
.contact .eyebrow{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:#bdae9a}
.contact h2{color:#fff;font-size:1.6rem;margin:10px 0 14px}
.contact p{font-size:.86rem;max-width:46ch;margin-bottom:22px}
.contact .acties{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.btn-wa{background:var(--wa);color:#fff;justify-content:center}
.btn-wa:hover{background:#1ebe5b}
.btn-wa svg{flex:none}
.contact .btn-outline{justify-content:center;color:#f0e7d8;border-radius:999px}
.contact .gegevens{display:grid;gap:10px;font-size:.84rem}
.contact .gegevens p{display:flex;align-items:flex-start;gap:10px;margin:0;max-width:none}
.contact .gegevens svg{color:var(--gold);flex:none;margin-top:4px}
.contact .gegevens a:hover{color:#fff}

/* ---------- zwevende whatsapp-knop ---------- */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:70;
  width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28);transition:transform .2s,background .2s;
}
.wa-float:hover{transform:translateY(-2px);background:#1ebe5b}

/* ---------- reviews ---------- */
.reviews{background:var(--cream);padding:38px 0 42px}
.reviews .head{text-align:center;margin-bottom:26px}
.reviews .eyebrow{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.reviews h2{font-size:1.6rem;margin-top:8px}
.quotes{display:grid;gap:28px;text-align:center}
.stars{color:var(--gold);letter-spacing:.28em;font-size:.78rem;margin-bottom:12px}
.quote p{font-size:.86rem;line-height:1.75;max-width:34ch;margin:0 auto 10px}
.quote cite{font-style:normal;color:var(--muted);font-size:.8rem}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#a99e91;padding:36px 0 26px;font-size:.8rem}
.site-footer .top{display:grid;gap:26px;justify-items:center;text-align:center}
.f-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.f-links a:hover{color:#fff}
.f-social{display:flex;gap:18px;justify-content:center;color:#efe6d6;margin-bottom:14px}
.f-meta{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:6px}
.f-meta svg{color:var(--gold);flex:none}
.f-bottom{margin-top:26px;font-size:.7rem;color:#6f665c;text-align:center}

/* ==========================================================================
   DESKTOP
   ========================================================================== */
@media (min-width:900px){
  .only-desktop{display:block}
  .only-mobile{display:none!important}
  .btn.only-desktop{display:inline-flex}
  .welkom .btn{border-radius:2px}

  /* op desktop staat de CTA onderaan, vlak boven de footer */
  body{display:flex;flex-direction:column}
  .moment{order:1}
  .site-footer{order:2}

  .site-header .bar{max-width:1180px;margin:0 auto;height:82px;padding:0 28px}
  .logo img{height:60px}
  .logo .word b{font-size:1.1rem;letter-spacing:.24em}
  .logo .word i{font-size:1.75rem}
  .nav-toggle{display:none}
  .nav{display:flex;flex-direction:row;align-items:center;gap:32px;padding:0;background:transparent}
  .nav a{padding:0 0 5px;border-bottom:1px solid transparent}
  .nav a:hover{color:var(--heading)}
  .nav a.active{color:var(--heading);border-color:var(--gold)}
  .nav .ig{display:flex;align-items:center;color:var(--brown);padding:0}
  .nav .ig:hover{color:var(--gold)}
  .strip{display:none}

  .hero{
    min-height:520px;padding:92px 0;
    background:
      linear-gradient(90deg,rgba(14,10,7,.92) 0%,rgba(14,10,7,.7) 45%,rgba(20,14,9,.12) 80%),
      var(--img-hero-d) 90% 35%/cover no-repeat,
      linear-gradient(120deg,#241a12,#6b4e30);
  }
  .hero .wrap{padding:0 28px}
  .hero .d-title{
    font-size:clamp(2.4rem,5.4vw,3.9rem);line-height:1.06;letter-spacing:.05em;
    text-transform:uppercase;max-width:none;margin-top:0;
  }
  /* "Denise" in hetzelfde sierlijke schrift als in het logo bovenin.
     text-transform moet expliciet uit: de h1 eromheen staat op uppercase. */
  .hero .d-title em{
    display:block;
    font-family:'Parisienne',cursive;
    font-style:normal;
    text-transform:none;
    color:var(--gold-light);
    font-size:1.45em;
    line-height:.98;
    letter-spacing:.01em;
    margin-top:.02em;
  }
  /* Vijf behandelingen op een rij: mag over twee regels breken, dan blijft
     het leesbaar zonder de hero uit elkaar te trekken. */
  .hero .d-services{
    margin:24px 0 32px;color:#e2d8ca;font-size:.86rem;letter-spacing:.05em;
    max-width:780px;line-height:2;
  }
  .hero .d-services i{font-style:normal;color:var(--gold);margin:0 10px}
  .hero .d-usps{margin-top:32px;color:#cbc0b1;font-size:.76rem;letter-spacing:.08em}
  .hero .d-usps i{font-style:normal;color:var(--gold);margin:0 13px}

  /* Hero gecentreerd: titel, behandelingen en knop onder elkaar in het
     midden. De regel met behandelingen is een flexrij, dus die moet apart
     gecentreerd worden — text-align raakt flexitems niet. */
  .hero .only-desktop{text-align:center}
  .hero .d-title{margin-left:auto;margin-right:auto}
  .hero .d-services{margin-left:auto;margin-right:auto;justify-content:center}
  .hero .d-usps{margin-left:auto;margin-right:auto}
  .usps{display:none}

  .welkom{padding:86px 0}
  .welkom .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .welkom .txt{max-width:none;order:2}
  .welkom .script{font-size:2.6rem}
  .welkom h2{
    font-family:'Cormorant Garamond',serif;font-size:1.85rem;
    letter-spacing:.1em;margin:4px 0 22px;
  }
  .welkom h2 em{font-size:1.5em;margin:0 0 0 1.6em}
  .welkom p{font-size:.9rem;max-width:46ch;margin-bottom:28px}
  .welkom .photo{position:relative;width:100%;max-width:440px;order:1;border-radius:0;aspect-ratio:3/3.7;justify-self:end}

  .behandelingen{background:var(--beige);padding:80px 0}
  .behandelingen .head{margin-bottom:40px}
  .behandelingen .eyebrow{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
  .behandelingen h2{font-size:2.1rem;margin-top:12px}
  .tiles{display:none}
  .cards{display:grid}

  .waarom{background:var(--cream);padding:78px 0}
  .waarom .head{text-align:center;margin-bottom:44px}
  .waarom .eyebrow{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
  .waarom h2{font-size:2.1rem;margin-top:12px}
  .pillars{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
  .pillar{padding:0 26px;border-left:1px solid var(--line)}
  .pillar:first-child{border-left:0}
  .pillar svg{color:var(--heading);margin:0 auto 18px}
  .pillar h3{font-family:'Jost',sans-serif;font-weight:400;font-size:.88rem;margin-bottom:8px}
  .pillar p{font-size:.82rem;line-height:1.7;max-width:24ch;margin:0 auto}

  /* 273 x 360 is exact de verhouding van de foto: geen bruine rand ernaast. */
  .studio{grid-template-columns:273px 1fr}
  .studio .photo{aspect-ratio:auto;min-height:360px;max-width:none;margin:0}
  .studio .panel{padding:74px 62px}
  .studio .panel h2{font-size:2.1rem}

  .detail{padding:80px 0 30px}
  .detail h2{font-size:2.1rem}
  .beh{grid-template-columns:1fr 1fr;gap:56px;padding:44px 0;scroll-margin-top:100px}
  .beh:nth-of-type(even) .img{order:2}
  .beh .img{aspect-ratio:4/3.2}
  .beh h3{font-size:1.8rem}
  .beh p{font-size:.9rem;max-width:48ch}

  .prijzen{padding:80px 0}
  .prijzen h2{font-size:2.1rem}
  .prijs-lijst{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;max-width:960px;margin:0 auto}

  .faq{padding:80px 0}
  .faq h2{font-size:2.1rem}
  .faq-lijst{max-width:760px;margin:0 auto}

  .contact{padding:84px 0}
  .contact .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
  .contact h2{font-size:2.1rem}
  .contact .acties{flex-direction:row;flex-wrap:wrap}
  .contact .gegevens{padding-top:14px}
  .wa-float{right:28px;bottom:28px;width:60px;height:60px}

  .reviews{padding:74px 0}
  .reviews h2{font-size:2rem}
  .quotes{grid-template-columns:repeat(3,1fr);gap:0}
  .quote{padding:0 34px;border-left:1px solid var(--line)}
  .quote:first-child{border-left:0}

  .moment{padding:66px 0}
  .moment h2{font-size:1.95rem}
  .moment p{font-size:.86rem;margin-bottom:28px}

  .site-footer{padding:52px 0 30px}
  .site-footer .top{grid-template-columns:1fr 1.2fr 1fr;align-items:start;justify-items:stretch;text-align:left}
  .f-right{text-align:right}
  .f-social,.f-meta{justify-content:flex-end}
  .f-bottom{text-align:left}
}

@media (max-width:899px){
  .waarom{display:none}
  .only-desktop{display:none!important}
}
@media (max-width:359px){
  .tile{height:112px}
  .welkom .txt{max-width:66%}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto}
}

/* ==========================================================================
   UITBREIDING — meerdere pagina's, uitklapmenu, formulier, juridische teksten
   ========================================================================== */

/* ---------- menupaneel (hamburger op alle schermen) ---------- */
.nav-toggle{display:block;position:relative;z-index:120}
.nav-toggle span{transition:transform .28s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.nav-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(15,11,8,.55);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.nav-overlay.open{opacity:1;visibility:visible}

.menu-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:100;
  width:min(370px,86vw);background:var(--paper);
  border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
}
.menu-panel.open{transform:translateX(0)}
.menu-panel .panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line);flex:none;
}
.menu-panel .panel-head .titel{
  font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}
.panel-close{background:none;border:0;cursor:pointer;color:var(--brown);padding:6px;line-height:0}
.panel-close:hover{color:var(--gold)}

.menu-list{list-style:none;padding:8px 22px 22px;flex:1}
.menu-list > li{border-bottom:1px solid var(--line)}
.menu-list > li:last-child{border-bottom:0}
.menu-row{display:flex;align-items:stretch}
.menu-row > a{
  flex:1;padding:14px 0;font-size:.75rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--brown);
}
.menu-row > a:hover{color:var(--heading)}
.menu-row > a.active{color:var(--gold)}
.sub-toggle{
  background:none;border:0;cursor:pointer;color:var(--gold);
  padding:0 2px 0 14px;line-height:0;flex:none;
}
.sub-toggle svg{transition:transform .25s}
.sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

.submenu{list-style:none;max-height:0;overflow:hidden;transition:max-height .3s ease}
.submenu.open{max-height:420px}
.submenu li a{
  display:block;padding:9px 0 9px 16px;font-size:.8rem;color:var(--text);
  border-left:1px solid var(--line);margin-left:2px;
}
.submenu li a:hover{color:var(--gold);border-color:var(--gold)}
.submenu li:last-child a{padding-bottom:16px}

.panel-foot{
  flex:none;padding:20px 22px 26px;border-top:1px solid var(--line);
  background:var(--cream);
}
.panel-foot .btn{width:100%;justify-content:center;margin-bottom:12px}
.panel-foot .pf-contact{font-size:.8rem;color:var(--text);line-height:1.9}
.panel-foot .pf-contact a:hover{color:var(--gold)}
.panel-foot .pf-social{display:flex;gap:16px;margin-top:14px;color:var(--brown)}
.panel-foot .pf-social a:hover{color:var(--gold)}

/* snelkoppelingen in de balk, naast de hamburger */
.bar-right{display:flex;align-items:center;gap:20px}
.bar-links{display:none;gap:24px}
.bar-links a{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brown);
  padding-bottom:4px;border-bottom:1px solid transparent;
}
.bar-links a:hover,.bar-links a.active{color:var(--heading);border-color:var(--gold)}

/* ---------- compacte hero voor subpagina's ---------- */
.page-hero{
  position:relative;padding:54px 0 46px;text-align:center;color:#f2e9db;
  background:
    linear-gradient(rgba(15,11,8,.82),rgba(15,11,8,.88)),
    var(--img-hero) center 35%/cover no-repeat,
    linear-gradient(120deg,#241a12,#6b4e30);
}
.page-hero .eyebrow{font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:#cbbfab}
.page-hero h1{color:#fff;font-size:clamp(1.7rem,6vw,2.5rem);line-height:1.2;margin-top:10px}
.page-hero .rule{display:block;width:46px;height:1px;background:var(--gold);margin:18px auto 0}
.page-hero p{font-size:.86rem;color:#ded3c3;max-width:52ch;margin:16px auto 0}

/* ---------- kruimelpad ---------- */
.kruimels{background:var(--paper);border-bottom:1px solid var(--line);padding:11px 0;font-size:.72rem;color:var(--muted)}
.kruimels a:hover{color:var(--gold)}
.kruimels i{font-style:normal;margin:0 8px;color:var(--line)}

/* ---------- sectienavigatie binnen een pagina ---------- */
.sectienav{background:var(--beige);padding:18px 0;border-bottom:1px solid var(--line)}
.sectienav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center}
.sectienav a{
  display:block;padding:8px 15px;border:1px solid var(--line);background:var(--paper);
  font-size:.7rem;letter-spacing:.09em;color:var(--brown);border-radius:999px;
  transition:border-color .2s,color .2s,background .2s;
}
.sectienav a:hover{border-color:var(--gold);color:var(--heading);background:#fff}

/* ---------- lopende tekst (behandel- en juridische pagina's) ---------- */
.artikel{background:var(--cream);padding:44px 0 52px}
.artikel .wrap{max-width:820px}
.blok{padding:34px 0;border-top:1px solid var(--line);scroll-margin-top:96px}
.blok:first-of-type{border-top:0;padding-top:6px}
.blok > .eyebrow{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px}
.blok h2{font-size:clamp(1.5rem,5vw,2rem);line-height:1.22;margin-bottom:6px}
.blok h3{
  font-family:'Jost',sans-serif;font-weight:400;color:var(--heading);
  font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;
  margin:30px 0 12px;padding-bottom:9px;border-bottom:1px solid var(--gold);
}
.blok h4{font-family:'Cormorant Garamond',serif;font-weight:500;color:var(--heading);font-size:1.22rem;margin:24px 0 8px}
.blok p{font-size:.89rem;line-height:1.85;margin-bottom:14px}
.blok p.lead{font-family:'Cormorant Garamond',serif;font-size:1.3rem;line-height:1.5;color:var(--heading);margin:14px 0 20px}
.blok ul,.blok ol{margin:0 0 18px;padding-left:0;list-style:none}
.blok ul li{position:relative;padding:5px 0 5px 20px;font-size:.88rem;line-height:1.75}
.blok ul li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:1px;background:var(--gold)}
.blok ol{counter-reset:n}
.blok ol li{position:relative;padding:5px 0 5px 26px;font-size:.88rem;line-height:1.75;counter-increment:n}
.blok ol li::before{content:counter(n) ".";position:absolute;left:0;top:5px;color:var(--gold);font-size:.82rem}
.blok a:not(.btn):not(.link-gold){color:var(--gold);border-bottom:1px solid rgba(201,168,108,.45)}
.blok a:not(.btn):not(.link-gold):hover{color:var(--brown-dark);border-color:var(--brown-dark)}
.blok .meta{font-size:.76rem;color:var(--muted);margin-bottom:22px}

/* kolommenlijst, bv. behandelzones */
.zones{display:grid;grid-template-columns:1fr;gap:22px;margin:18px 0 22px}
.zone-groep h4{margin-top:0}
.zone-groep ul{margin-bottom:0}

/* accentkader */
.kader{
  background:var(--paper);border:1px solid var(--line);border-left:2px solid var(--gold);
  padding:20px 22px;margin:22px 0;
}
.kader p:last-child{margin-bottom:0}
.kader h4{margin-top:0}

/* melding: nog in te vullen / volgt nog */
.melding{
  background:var(--paper);border:1px dashed var(--gold);
  padding:26px 24px;margin:22px 0;text-align:center;
}
.melding .icoon{color:var(--gold);margin:0 auto 12px}
.melding h3{border:0;padding:0;margin:0 0 8px;font-size:.8rem}
.melding p{font-size:.86rem;max-width:46ch;margin:0 auto 6px;color:var(--text)}
.melding p:last-child{margin-bottom:0}
.melding .btn{margin-top:16px}

/* ---------- formulier ---------- */
.formulier{background:var(--paper);padding:44px 0 52px}
.formulier .wrap{max-width:760px}
.formulier .head{text-align:center;margin-bottom:28px}
.formulier .eyebrow{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.formulier h2{font-size:clamp(1.5rem,5vw,2rem);margin-top:8px}
.formulier .intro{text-align:center;font-size:.86rem;max-width:52ch;margin:0 auto 30px}

.veld-rij{display:grid;grid-template-columns:1fr;gap:0}
.veld{margin-bottom:18px}
.veld label{
  display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--heading);margin-bottom:7px;
}
.veld label .req{color:var(--gold)}
.veld input[type=text],.veld input[type=tel],.veld input[type=email],.veld select,.veld textarea{
  width:100%;font-family:'Jost',sans-serif;font-weight:300;font-size:.9rem;color:var(--text);
  background:#fff;border:1px solid var(--line);border-radius:2px;padding:12px 14px;
  transition:border-color .2s,box-shadow .2s;
}
.veld textarea{min-height:130px;resize:vertical;line-height:1.7}
.veld select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,108,.16);
}
.veld .hint{font-size:.74rem;color:var(--muted);margin-top:6px}
.veld input[aria-invalid="true"],.veld select[aria-invalid="true"],.veld textarea[aria-invalid="true"]{
  border-color:#c08878;background:#fdf7f6;
}

fieldset.veld{border:0}
fieldset.veld legend{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--heading);margin-bottom:9px;padding:0;
}
.keuzes{display:grid;gap:9px}
.keuze{display:flex;align-items:flex-start;gap:10px;font-size:.87rem;line-height:1.6;cursor:pointer}
.keuze input{margin-top:4px;accent-color:var(--gold);width:16px;height:16px;flex:none;cursor:pointer}

.akkoord{
  display:flex;align-items:flex-start;gap:12px;background:var(--cream);
  border:1px solid var(--line);padding:16px 18px;margin:6px 0 22px;
  font-size:.83rem;line-height:1.65;cursor:pointer;
}
.akkoord input{margin-top:3px;accent-color:var(--gold);width:17px;height:17px;flex:none;cursor:pointer}
.akkoord a{color:var(--gold);border-bottom:1px solid rgba(201,168,108,.45)}

.formulier button[type=submit]{
  border:0;cursor:pointer;font-family:'Jost',sans-serif;font-weight:400;width:100%;justify-content:center;
}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.bericht{padding:16px 18px;margin-bottom:24px;font-size:.87rem;line-height:1.65;border:1px solid}
.bericht.ok{background:#f1f6f0;border-color:#b9cfb2;color:#31502a}
.bericht.fout{background:#fbf1ef;border-color:#dcb8b0;color:#7a3a2c}
.bericht ul{margin:8px 0 0;padding-left:0;list-style:none}
.bericht ul li{padding:2px 0 2px 16px;position:relative}
.bericht ul li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:1px;background:currentColor}

/* ---------- contactgegevens blok ---------- */
.contactblok{background:var(--brown-dark);color:#ded3c3;padding:44px 0 48px}
.contactblok .wrap{display:grid;gap:34px}
.contactblok .eyebrow{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:#bdae9a}
.contactblok h2{color:#fff;font-size:clamp(1.5rem,5vw,2rem);margin:10px 0 14px}
.contactblok p{font-size:.87rem;max-width:46ch}
.contactblok .gegevens{display:grid;gap:12px;font-size:.87rem;margin-top:22px}
.contactblok .gegevens p{display:flex;align-items:flex-start;gap:11px;margin:0;max-width:none}
.contactblok .gegevens svg{color:var(--gold);flex:none;margin-top:4px}
.contactblok .gegevens a:hover{color:#fff}
.contactblok .acties{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.contactblok .btn-outline{justify-content:center;color:#f0e7d8;border-radius:999px}

/* ---------- footer, vier kolommen ---------- */
.site-footer .kolommen{display:grid;gap:30px;text-align:left;justify-items:start}
.site-footer .kol{width:100%}
.site-footer .kol h3{
  font-family:'Jost',sans-serif;font-weight:400;color:#efe6d6;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:6px;
}
.site-footer .kol h3::after{content:"";display:block;width:26px;height:1px;background:var(--gold);margin-top:10px}
.site-footer .kol ul{list-style:none;margin-top:14px}
.site-footer .kol ul li a{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:7px 0;color:#a99e91;font-size:.82rem;
}
.site-footer .kol ul li a:hover{color:#fff}
.site-footer .kol ul li a span{color:var(--gold);font-size:.8rem}
.site-footer .kol .gegeven{display:flex;align-items:flex-start;gap:11px;padding:7px 0;font-size:.82rem;color:#a99e91}
.site-footer .kol .gegeven svg{color:var(--gold);flex:none;margin-top:4px}
.site-footer .kol .gegeven a:hover{color:#fff}
.site-footer .kol .streep{height:1px;background:rgba(201,168,108,.22);margin:14px 0 6px;width:100%}
.site-footer .socials{display:flex;gap:12px;margin-top:16px}
.site-footer .socials a{
  width:38px;height:38px;border-radius:50%;background:rgba(201,168,108,.18);color:#efe6d6;
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;
}
.site-footer .socials a:hover{background:var(--gold);color:#2b2118}
.site-footer .kol .script{
  display:block;font-family:'Parisienne',cursive;color:var(--gold);
  font-size:1.5rem;margin-top:22px;line-height:1.2;
}
.site-footer .kol .script::after{content:"";display:block;width:70px;height:1px;background:var(--gold);margin-top:6px}

.f-legal{
  margin-top:32px;padding-top:22px;border-top:1px solid rgba(201,168,108,.18);
  display:grid;gap:14px;font-size:.72rem;color:#6f665c;
}
.f-legal nav{display:flex;flex-wrap:wrap;gap:8px 0}
.f-legal nav a{color:#8d8276;padding:0 13px;border-left:1px solid rgba(201,168,108,.22)}
.f-legal nav a:first-child{padding-left:0;border-left:0}
.f-legal nav a:hover{color:#fff}

/* ==========================================================================
   DESKTOP — uitbreiding
   ========================================================================== */
@media (min-width:900px){
  .site-header .bar{height:82px}
  .bar-links{display:flex}
  .nav-toggle{display:block}
  .strip{display:block}

  .page-hero{padding:88px 0 76px}
  .page-hero p{font-size:.92rem}

  .sectienav{padding:22px 0}
  .sectienav a{font-size:.72rem;padding:9px 18px}

  .artikel{padding:76px 0 84px}
  .blok{padding:48px 0;scroll-margin-top:110px}
  .blok p{font-size:.94rem}
  .blok ul li,.blok ol li{font-size:.92rem}
  .blok p.lead{font-size:1.5rem}
  .zones{grid-template-columns:repeat(3,1fr);gap:34px}

  .formulier{padding:76px 0 84px}
  .veld-rij{grid-template-columns:1fr 1fr;gap:0 22px}
  .keuzes{grid-template-columns:1fr 1fr;gap:10px 22px}
  .formulier button[type=submit]{width:auto;padding:16px 46px}

  .contactblok{padding:84px 0}
  .contactblok .wrap{grid-template-columns:1fr .5fr;gap:48px;align-items:center}
  .contactblok .acties{flex-direction:row;flex-wrap:wrap}

  .site-footer .top{display:block}
  .site-footer .kolommen{grid-template-columns:1fr 1fr 1.15fr .85fr;gap:44px}
  .f-legal{grid-template-columns:auto 1fr;align-items:center;gap:24px}
  .f-legal nav{justify-content:flex-end}
}

@media (max-width:899px){
  .site-header .bar{padding:10px 22px}
}

/* ---------- vraag-en-antwoord binnen een tekstblok ---------- */
.vragen{margin-top:6px}
.vragen details{border-bottom:1px solid var(--line)}
.vragen summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center;
  padding:16px 0;font-family:'Cormorant Garamond',serif;font-size:1.12rem;color:var(--heading);
}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";color:var(--gold);font-size:1.3rem;line-height:1;flex:none}
.vragen details[open] summary::after{content:"\2212"}
.vragen details p{font-size:.88rem;line-height:1.8;padding:0 0 6px}
.vragen details > *:last-child{margin-bottom:18px}
.vragen details ul{margin-bottom:18px}
.vragen h3{margin-top:34px}
.vragen h3:first-child{margin-top:0}

/* ---------- overzichtskaarten behandelingen ---------- */
.overzicht{background:var(--beige);padding:44px 0 52px}
.overzicht .head{text-align:center;margin-bottom:30px}
.overzicht .eyebrow{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.overzicht h2{font-size:clamp(1.5rem,5vw,2.1rem);margin-top:8px}
.overzicht .head span.rule{display:block;width:52px;height:1px;background:var(--gold);margin:12px auto 0}
.keuzekaarten{display:grid;gap:22px}
.keuzekaart{background:var(--card);display:flex;flex-direction:column;overflow:hidden}
.keuzekaart .thumb{aspect-ratio:16/9;background-position:center;background-size:cover;background-repeat:no-repeat}
.keuzekaart:nth-child(1) .thumb{background-image:var(--img-ontharing)}
.keuzekaart:nth-child(2) .thumb{background-image:var(--img-tattoo)}
.keuzekaart:nth-child(3) .thumb{background-image:var(--img-pmu)}
.keuzekaart:nth-child(4) .thumb{background-image:var(--img-carbon)}
.keuzekaart:nth-child(5) .thumb{background-image:var(--img-pigment)}
.keuzekaart .body{padding:24px 22px 26px;display:flex;flex-direction:column;flex:1}
.keuzekaart h3{
  font-family:'Cormorant Garamond',serif;font-weight:400;color:var(--heading);
  font-size:1.45rem;margin-bottom:4px;
}
.keuzekaart .sub{font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.keuzekaart p{font-size:.86rem;line-height:1.75;flex:1;margin-bottom:18px}
.keuzekaart .link-gold{align-self:flex-start}
.keuzekaart .link-gold svg{transition:transform .25s}
.keuzekaart:hover .link-gold svg{transform:translateX(5px)}

@media (min-width:900px){
  .overzicht{padding:80px 0}
  .overzicht .head{margin-bottom:44px}
  .keuzekaarten{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
  .keuzekaart p{font-size:.88rem}
}

/* keuzelabels zijn gewone tekst, niet de hoofdletterstijl van een veldlabel */
.veld label.keuze{
  text-transform:none;letter-spacing:0;color:var(--text);
  font-size:.87rem;font-weight:300;margin-bottom:0;
}

/* ---------- geneste opsomming binnen een opsomming ---------- */
.blok ul li > ul.sublijst{margin:6px 0 2px}
.blok ul li > ul.sublijst li{padding:2px 0 2px 18px;font-size:.86rem;color:var(--brown)}
.blok ul li > ul.sublijst li::before{
  width:4px;height:4px;border-radius:50%;background:var(--gold);
  top:12px;left:2px;
}

/* submenu met meer items moet ook volledig kunnen uitklappen */
.submenu.open{max-height:520px}

/* ==========================================================================
   Koppenstructuur — zelfde uiterlijk, correcte HTML-niveaus
   ========================================================================== */

/* h2 die eruitziet als een tussenkop (juridische pagina's) */
.blok h2.kop{
  font-family:'Jost',sans-serif;font-weight:400;color:var(--heading);
  font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;
  margin:30px 0 12px;padding-bottom:9px;border-bottom:1px solid var(--gold);
  line-height:1.5;
}
.blok h2.kop:first-of-type{margin-top:0}

/* subkop binnen een sectie, bv. de behandelzones */
.blok h3.zone-kop{
  font-family:'Cormorant Garamond',serif;font-weight:500;color:var(--heading);
  font-size:1.22rem;margin:24px 0 8px;padding:0;border:0;text-transform:none;letter-spacing:0;
}
.zone-groep h3.zone-kop{margin-top:0}

/* titel van een accentkader of melding: een label, geen kop in de structuur */
.kader-titel{
  font-family:'Cormorant Garamond',serif;font-weight:500;color:var(--heading);
  font-size:1.22rem;line-height:1.35;margin:0 0 8px;
}
.melding-titel{
  font-family:'Jost',sans-serif;font-weight:400;color:var(--heading);
  font-size:.8rem;letter-spacing:.17em;text-transform:uppercase;
  margin:0 0 8px;
}

/* ruimer klikgebied voor de snelkoppelingen in de balk */
@media (min-width:900px){
  .site-header .bar-links a{padding:12px 0 10px}
}

/* ==========================================================================
   LEESBAARHEID — donkerder goud en grijs voor kleine tekst
   --------------------------------------------------------------------------
   Het lichte goud (--gold) blijft voor lijnen, iconen, knoppen en het logo.
   Voor kleine tekst en links is dat te licht om goed leesbaar te zijn,
   daarom gebruiken die --gold-text. Beide halen de toegankelijkheidsnorm
   (WCAG AA, minimaal 4.5:1) op alle achtergronden van de site.
   ========================================================================== */
:root{
  --gold-text:#7a6029;   /* goud voor tekst en links op een lichte achtergrond */
  --muted:#6b6259;       /* grijs voor bijschriften, was #8f8478 */
}

/* labels boven een kop, bv. GESCHIKTHEID / STAP 1 */
.blok > .eyebrow{color:var(--gold-text)}

/* links in lopende tekst */
.blok a:not(.btn):not(.link-gold){color:var(--gold-text);border-bottom-color:rgba(122,96,41,.45)}
.blok a:not(.btn):not(.link-gold):hover{color:var(--brown-dark);border-bottom-color:var(--brown-dark)}
.akkoord a{color:var(--gold-text);border-bottom-color:rgba(122,96,41,.45)}
.formulier .intro a:not(.btn){color:var(--gold-text)}

/* "Bekijk behandelingen"-achtige links op een lichte achtergrond */
.link-gold{color:var(--gold-text)}
.keuzekaart .sub{color:var(--gold-text)}
.kruimels a:hover{color:var(--gold-text)}
.submenu li a:hover{color:var(--gold-text)}
.panel-close:hover,.panel-foot .pf-contact a:hover,.panel-foot .pf-social a:hover{color:var(--gold-text)}
.menu-row > a.active{color:var(--gold-text)}
.reviews .quote .link-gold{color:var(--gold-text)}

/* op een donkere ondergrond blijft het lichte goud juist wél leesbaar */
.contact .link-gold,.contactblok .link-gold,.hero .link-gold,.moment .link-gold,
.site-footer .link-gold{color:var(--gold-light)}

/* ==========================================================================
   LEESBAARHEID, deel 2
   ========================================================================== */
:root{
  /* WhatsApp-groen, iets dieper dan het merkgroen (#25d366) zodat de witte
     tekst op de knop goed leesbaar is (4.55:1 in plaats van 1.98:1).
     Wil je toch precies het merkgroen? Zet hieronder #25d366 terug. */
  --wa:#12883e;
  --wa-hover:#0d6e31;
}
.btn-wa:hover{background:var(--wa-hover)}
.wa-float:hover{background:var(--wa-hover)}

/* lichte toelichtingsregel op de donkere achtergrond van het contactblok */
.contactblok .gegevens .toelichting,
.site-footer .kol .toelichting{color:#c4bbb0}

/* grote sierletters iets dieper goud, zodat ze ook leesbaar zijn */
.welkom .script{color:#9a7a34}
.welkom h2 em{color:#9a7a34}

/* sterren bij een review */
.stars{color:var(--gold-text)}

/* copyrightregel in de footer leesbaar houden */
.f-bottom,.f-legal{color:#978c7f}
.f-legal nav a{color:#a99e91}

/* ==========================================================================
   TEKSTGROOTTE — leesbaarder
   --------------------------------------------------------------------------
   De lopende tekst was 15px (14px op mobiel). De aanbevolen maat voor
   leestekst op een website is 16 tot 18px. Alles hieronder is daarop
   afgestemd; de kleinste tekst op de site is nu 11,5px in plaats van 10px.
   ========================================================================== */

/* ---------- lopende tekst ---------- */
.blok p{font-size:1rem;line-height:1.8}
.blok ul li,.blok ol li{font-size:1rem;line-height:1.75}
.blok ul li::before{top:16px}
.blok p.lead{font-size:1.35rem;line-height:1.5}
.blok .meta{font-size:.82rem}
.blok h3,.blok h2.kop{font-size:.82rem}
.blok h4,.kader-titel,.blok h3.zone-kop{font-size:1.3rem}
.blok ul li > ul.sublijst li{font-size:.95rem}

/* ---------- vraag en antwoord ---------- */
.vragen summary{font-size:1.2rem}
.vragen details p{font-size:1rem;line-height:1.8}
.faq summary{font-size:1.18rem}
.faq details p{font-size:1rem}

/* ---------- labels, knoppen en navigatie ---------- */
.btn{font-size:.78rem}
.link-gold{font-size:.74rem}
.blok > .eyebrow{font-size:.72rem}
.kruimels{font-size:.8rem}
.sectienav a{font-size:.8rem}
.menu-row > a{font-size:.8rem}
.submenu li a{font-size:.88rem}
.bar-links a{font-size:.74rem}
.panel-foot .pf-contact{font-size:.88rem}
.menu-panel .panel-head .titel{font-size:.72rem}

/* ---------- kaarten en meldingen ---------- */
.keuzekaart p{font-size:.95rem}
.keuzekaart .sub{font-size:.75rem}
.keuzekaart h3{font-size:1.5rem}
.melding p{font-size:.95rem}
.melding-titel{font-size:.85rem}
.overzicht .eyebrow,.reviews .eyebrow,.formulier .eyebrow{font-size:.72rem}

/* ---------- formulier ---------- */
.veld label,fieldset.veld legend{font-size:.74rem}
.veld input[type=text],.veld input[type=tel],.veld input[type=email],
.veld select,.veld textarea{font-size:1rem}
.veld .hint{font-size:.82rem}
.keuze{font-size:.95rem}
.akkoord{font-size:.9rem}
.bericht{font-size:.95rem}
.formulier .intro{font-size:.95rem}

/* ---------- donkere blokken ---------- */
.page-hero .eyebrow{font-size:.72rem}
.page-hero p{font-size:.95rem}
.contactblok p{font-size:.95rem}
.contactblok .gegevens{font-size:.95rem}
.contactblok .eyebrow{font-size:.72rem}
.site-footer{font-size:.88rem}
.site-footer .kol ul li a{font-size:.9rem}
.site-footer .kol .gegeven{font-size:.9rem}
.site-footer .kol h3{font-size:.72rem}
.f-legal{font-size:.8rem}

/* ---------- regellengte: prettiger leesbaar ---------- */
.artikel .wrap{max-width:680px}

@media (min-width:900px){
  .blok p{font-size:1.0625rem}            /* 17px */
  .blok ul li,.blok ol li{font-size:1.0625rem}
  .blok p.lead{font-size:1.55rem}
  .vragen details p{font-size:1.0625rem}
  .page-hero p{font-size:1.05rem}
  .contactblok p,.contactblok .gegevens{font-size:1rem}
  .keuzekaart p{font-size:1rem}
  .sectienav a{font-size:.8rem}
  .artikel .wrap{max-width:664px}   /* ~75 tekens per regel: prettig leesbaar */
}

/* ==========================================================================
   HERO — behandelingen als doorklikbare links
   (de zwarte balk onder de header is vervallen)
   ========================================================================== */
.hero-diensten{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.hero-diensten a{
  color:#e2d8ca;border-bottom:1px solid transparent;
  padding:4px 0;transition:color .2s,border-color .2s;
}
.hero-diensten a:hover,.hero-diensten a:focus-visible{color:var(--gold-light);border-bottom-color:var(--gold)}
.hero-diensten i{font-style:normal;color:var(--gold);margin:0 12px}

/* mobiele variant: gestapelde, goed aantikbare links */
.hero .only-mobile .hero-diensten{
  flex-direction:column;align-items:flex-start;gap:0;margin:0 0 22px;
}
.hero .only-mobile .hero-diensten a{
  font-size:.85rem;padding:7px 0;border-bottom:1px solid rgba(201,168,108,.18);
  width:100%;max-width:19rem;
}
.hero .only-mobile .hero-diensten a:last-child{border-bottom-color:transparent}

@media (min-width:900px){
  .hero .d-services.hero-diensten{margin:24px 0 32px;font-size:.9rem;letter-spacing:.05em}
}

/* ==========================================================================
   OPENINGSBERICHT (pop-up)
   ========================================================================== */
.popup-laag{
  position:fixed;inset:0;z-index:200;background:rgba(15,11,8,.72);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.popup-laag.open{opacity:1;visibility:visible}

.popup{
  position:fixed;z-index:210;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.97);
  width:min(560px,calc(100vw - 32px));
  max-height:min(86vh,760px);
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 24px 70px rgba(15,11,8,.42);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,transform .3s;
}
.popup.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}

.popup::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold));
}

.popup-sluit{
  position:absolute;top:12px;right:12px;z-index:2;
  background:var(--cream);border:1px solid var(--line);border-radius:50%;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--brown);transition:background .2s,color .2s;
}
.popup-sluit:hover{background:var(--gold);color:#2b2118;border-color:var(--gold)}

.popup-inhoud{padding:34px 26px 28px;overflow-y:auto;overscroll-behavior:contain}
.popup-eyebrow{
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:8px;
}
.popup h2{
  font-size:clamp(1.45rem,5.4vw,1.85rem);line-height:1.22;color:var(--heading);
  padding-right:34px;
}
.popup-rule{display:block;width:46px;height:1px;background:var(--gold);margin:16px 0 20px}
.popup p{font-size:.95rem;line-height:1.75;margin-bottom:14px}
.popup-accent{
  background:var(--cream);border-left:2px solid var(--gold);
  padding:13px 16px;margin:18px 0;font-size:1rem;
}
.popup-accent strong{color:var(--heading);font-weight:400}

.popup-knoppen{display:flex;flex-wrap:wrap;gap:11px;margin:24px 0 22px}
.popup-knoppen .btn{flex:1 1 200px;justify-content:center}
.btn-lijn{
  border:1px solid var(--gold);color:var(--gold-text);background:transparent;
  transition:background .25s,color .25s;
}
.btn-lijn:hover{background:var(--gold);color:#2b2118}

.popup-contact{
  display:flex;flex-direction:column;gap:2px;
  border-top:1px solid var(--line);padding-top:16px;
}
.popup-contact a{
  display:flex;align-items:center;gap:11px;padding:9px 0;
  font-size:.92rem;color:var(--text);transition:color .2s;
}
.popup-contact a svg{color:var(--gold-text);flex:none}
.popup-contact a:hover{color:var(--gold-text)}
.popup-contact .pc-wa svg{color:var(--wa)}

.popup-social{
  display:flex;align-items:center;gap:12px;
  border-top:1px solid var(--line);margin-top:14px;padding-top:16px;
}
.popup-social-label{
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin-right:2px;
}
.popup-social a{
  width:38px;height:38px;border-radius:50%;background:var(--cream);
  border:1px solid var(--line);color:var(--brown);
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,border-color .2s;
}
.popup-social a:hover{background:var(--gold);color:#2b2118;border-color:var(--gold)}

/* knopje om het bericht opnieuw te openen */
.popup-heropen{
  background:none;border:0;padding:0;cursor:pointer;color:#a99e91;
  font:inherit;font-size:inherit;border-bottom:1px solid rgba(201,168,108,.3);
}
.popup-heropen:hover{color:#fff}

@media (min-width:900px){
  .popup-inhoud{padding:44px 44px 36px}
  .popup p{font-size:1rem}
  .popup-knoppen .btn{flex:0 1 auto}
}

@media (max-width:420px){
  .popup{max-height:92vh}
  .popup-inhoud{padding:30px 20px 24px}
  .popup-knoppen .btn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  .popup,.popup-laag{transition:none}
  .popup.open{transform:translate(-50%,-50%)}
}

/* knoppen op de bedankpagina */
.bedankt-knoppen{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}
.bedankt-knoppen .btn{justify-content:center}
@media (max-width:520px){.bedankt-knoppen .btn{flex:1 1 100%}}

/* ==========================================================================
   De vijf behandelingen naast elkaar
   --------------------------------------------------------------------------
   Staat bewust achteraan: er zit verderop een @media (min-width:900px) met
   een eigen regel voor dit raster, en die zou deze anders overschrijven.
   Onder 1080px breekt het raster vanzelf af naar drie, twee of een kolom.
   ========================================================================== */
@media (min-width:1080px){
  .keuzekaarten{grid-template-columns:repeat(5,1fr);gap:18px}
  .keuzekaart .body{padding:20px 18px 22px}
  .keuzekaart p{font-size:.83rem;line-height:1.7}
}

/* ==========================================================================
   Foto in het contactblok
   --------------------------------------------------------------------------
   Rechts naast de gegevens. Onder 900px valt hij onder de tekst, dan staat
   hij boven de knoppen in de weg — daar tonen we hem daarom niet.
   ========================================================================== */
/* Tekst gecentreerd in de eigen kolom, foto ernaast. */
.contactblok .wrap > div{text-align:center}
.contactblok p{margin-left:auto;margin-right:auto}
.contactblok .acties{align-items:center}
@media (min-width:900px){ .contactblok .acties{justify-content:center} }

.contactblok .foto{display:none}
@media (min-width:900px){
  .contactblok .foto{display:block;margin:0}
  /* Geen vaste verhouding: de foto is al bijgesneden op zijn inhoud, dus
     hij wordt hier in zijn geheel getoond zonder dat er iets afvalt. */
  /* Op hoogte begrensd in plaats van op breedte: zo blijft de hele foto
     zichtbaar terwijl het blok niet hoger wordt dan voorheen. */
  .contactblok .foto img{
    display:block;margin:0 auto;border-radius:4px;
    max-height:380px;width:auto;max-width:100%;height:auto;
  }
}



/* ==========================================================================
   ZELF EEN AFSPRAAK INPLANNEN (/boeken en /afspraak)
   ========================================================================== */

/* ---------- stappenbalk ---------- */
.stappen{
  display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0 0 28px;padding:0;
  counter-reset:stap;
}
.stappen li{
  flex:1 1 140px;display:flex;align-items:center;gap:9px;
  padding:10px 12px;background:#f6f2ec;border-radius:3px;color:#8a8076;font-size:.78rem;
}
.stappen .nr{
  flex:0 0 22px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:#ddd6cb;color:#fff;font-size:.72rem;
}
.stappen li.nu{background:#2a2018;color:#f3ece2}
.stappen li.nu .nr{background:var(--gold);color:#2a2018}
.stappen li.gedaan{background:#efe8dd;color:#5d5349}
.stappen li.gedaan .nr{background:var(--gold);color:#fff}

/* ---------- keuzes met een onderregel ---------- */
.boeken .keuze small{display:block;color:#8a8076;font-size:.76rem;margin-top:2px}

/* het datumveld bij een vraag met wachttijd */
.boeken .wanneer{margin:-4px 0 10px 30px;font-size:.8rem;color:#6b6259}
.boeken .wanneer input{margin-left:8px;padding:5px 8px}
.boeken .wanneer .hint{display:block;margin-top:3px;font-size:.74rem}

/* ---------- maand heen en weer ---------- */
.maandbalk{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:4px 0 20px;padding:10px 4px;border-bottom:1px solid #e6ded2;
}
.maandbalk strong{font-family:var(--serif);font-size:1.1rem;font-weight:500;text-transform:capitalize}
.btn-klein{padding:7px 12px;font-size:.74rem}
.maandbalk .btn[disabled]{opacity:.35;cursor:default}

/* ---------- vrije tijden ---------- */
.boeken .dag{margin:0 0 18px}
.boeken .dag h3{
  font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8a8076;font-weight:400;margin:0 0 8px;
}
.boeken .tijden{display:flex;flex-wrap:wrap;gap:7px}
.boeken .tijd{
  border:1px solid #ddd6cb;background:#fff;color:#3d352c;
  padding:9px 14px;border-radius:3px;font:inherit;font-size:.84rem;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.boeken .tijd:hover,.boeken .tijd:focus-visible{border-color:var(--gold);background:#fdfaf5}

/* ---------- samenvatting ---------- */
.samenvatting{
  background:#faf8f4;border:1px solid #e6ded2;border-radius:3px;
  padding:18px 20px;margin:0 0 24px;
}
.samenvatting h2,.samenvatting h3{
  font-family:var(--serif);font-size:1.25rem;font-weight:500;margin:0 0 12px;color:#2a2018;
}
.samenvatting ul{list-style:none;margin:0;padding:0}
.samenvatting li{
  display:flex;justify-content:space-between;gap:16px;
  padding:6px 0;border-bottom:1px solid #eee6da;font-size:.88rem;
}
.samenvatting li:last-child{border-bottom:0}
.samenvatting li span{color:#8a8076;white-space:nowrap}
.samenvatting .totaal{margin:12px 0 0;font-size:.84rem;color:#6b6259}
.samenvatting .hint{margin-top:8px}

@media (min-width:700px){
  .stappen li{font-size:.82rem}
  .samenvatting{padding:22px 26px}
}

/* ==========================================================================
   TWEEDE VERSIE VAN DE HOMEPAGE (/index-b)
   --------------------------------------------------------------------------
   Alleen wat afwijkt van de gewone homepage staat hier. Wordt index-b de
   nieuwe homepage, dan kan dit blok gewoon blijven staan.
   ========================================================================== */

.hero-b{min-height:420px;padding:56px 0}
.hero-b .eyebrow{max-width:none}
.hero-b h1{max-width:17ch;font-size:clamp(1.6rem,6.2vw,2.3rem);text-wrap:balance}
.hero-b .rule{margin:18px 0}
.hero-b .lead{color:#ded3c3;font-size:.88rem;max-width:46ch;line-height:1.75}
.hero-b .acties{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hero-b .hero-punten{
  list-style:none;margin:26px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 20px;
}
.hero-b .hero-punten li{
  color:#cbbfab;font-size:.76rem;letter-spacing:.04em;
  padding-left:16px;position:relative;
}
.hero-b .hero-punten li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}

/* ---------- zo gaat het in zijn werk ---------- */
.hoegaathet{padding:44px 0;background:var(--zand,#faf8f4)}
.hoegaathet .head{text-align:center;margin-bottom:28px}
.hoegaathet .head .rule{display:block;width:44px;height:1px;background:var(--gold);margin:16px auto 0}
.stappenlijst{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.stappenlijst li{
  position:relative;padding-left:52px;
}
.stappenlijst .nr{
  position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--gold);color:var(--gold);
  font-family:var(--serif);font-size:1.05rem;
}
.stappenlijst h3{
  font-family:var(--serif);font-size:1.12rem;font-weight:500;
  margin:4px 0 6px;color:#2a2018;
}
.stappenlijst p{font-size:.86rem;color:#5d5349;margin:0;max-width:52ch}

@media (min-width:700px){
  .hero-b{min-height:480px}
  .hero-b .lead{font-size:.95rem}
  .stappenlijst{grid-template-columns:1fr 1fr;gap:26px 36px}
}
@media (min-width:1080px){
  .hoegaathet{padding:64px 0}
  .stappenlijst{grid-template-columns:repeat(4,1fr);gap:28px}
  .stappenlijst p{font-size:.88rem}
}

/* ---------- actiefoto of flyer in het openingsbericht ---------- */
.popup-foto{
  margin:0 0 20px;border-radius:4px;overflow:hidden;
  background:#f1ebe1;
}
.popup-foto img{display:block;width:100%;height:auto}
.popup-foto a{display:block}

/* ==========================================================================
   ACTIEBALK — smalle strook bovenaan bij een lopende actie
   ========================================================================== */
.actiebalk{
  background:var(--brown-dark,#2a2018);
  color:#f3ece2;
  font-size:.82rem;
  line-height:1.5;
  padding:9px 0;
}
.actiebalk .wrap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:4px 16px;text-align:center;
}
.actiebalk p{margin:0;color:#ece3d6}
.actiebalk a{
  color:var(--gold);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid rgba(201,168,108,.45);padding-bottom:1px;
}
.actiebalk a:hover,.actiebalk a:focus-visible{border-bottom-color:var(--gold)}
.actiebalk svg{vertical-align:-1px}

@media (max-width:560px){
  .actiebalk{font-size:.76rem;padding:8px 0}
}

/* ==========================================================================
   BETAALMERKEN — rijtje boven de juridische regel in de footer
   ========================================================================== */
.betaalmerken{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:20px 0 4px;border-top:1px solid rgba(255,255,255,.08);margin-top:28px;
}
.betaalmerken .bm-kop{
  margin:0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);
}
.betaalmerken ul{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.betaalmerken .bm-tegel{
  display:block;width:42px;height:27px;background:#fff;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.betaalmerken .bm-tegel svg{display:block;width:100%;height:100%}
.betaalmerken .bm-extra{margin:0;font-size:.76rem;color:#b8ad9d}

@media (max-width:620px){
  .betaalmerken{gap:8px 10px;padding-top:16px;margin-top:22px}
  .betaalmerken .bm-kop{width:100%}
  .betaalmerken .bm-extra{width:100%}
}