/* =====================================================================
   Gentle Wax & Laser Clinic, variant ATELIER.

   De tegenhanger van Nocturne. Waar die donker en filmisch is, is deze
   licht en redactioneel: warm papier, olijfgroene inkt, veel wit, en
   een indeling die meer op een tijdschriftpagina lijkt dan op een
   website. De wachtruimte met de olijfboom is hier het hoofdbeeld,
   want die foto zegt precies wat de tekst probeert te zeggen: het is
   hier rustig en je hoeft niets.

   Palet: muga papier als grond, olijfzwart als letter, lush olive als
   merkkleur voor vlakken en kaders, en mild pruim als enige accent op
   alles waar je op klikt. Zelfde kleuren als Nocturne, omgekeerd
   ingezet.

   Letters: Zodiak voor de koppen. Een serif is hier verdedigbaar omdat
   de hele opzet redactioneel is, als een gedrukt boekje dat in de
   wachtruimte zou liggen. Switzer eronder, die leest klein nog goed in
   een prijslijst.

   Ronding, en dit is de regel voor de hele variant:
     knoppen en chips  999px (pil)
     kaarten en beeld  18px
     invoervelden      10px
   Geen enkele uitzondering.

   Beweging: bescheiden. Blokken komen rustig binnen, kaarten liften
   iets bij hover, de keuzehulp wisselt met een korte overgang. Niets
   kaapt het scrollen.
   ===================================================================== */

:root{
  color-scheme: light;

  --papier:    #F2EBDD;   /* muga, de grond */
  --papier-2:  #E8DECB;   /* tweede vlak */
  --kaart:     #FBF7EF;   /* kaarten, net lichter dan de grond */

  --inkt:      #23281C;   /* olijfzwart, de letter */
  --inkt-2:    #454B37;
  --zacht:     #5F5B4A;   /* rustige tekst, haalt AA op papier */

  --olijf:     #59653A;   /* lush olive, merkvlak en kader */
  --olijf-diep:#3C452A;
  --olijf-mist:#E2E3D0;   /* olijf verdund, voor zachte vlakken */

  --pruim:     #7A3F58;   /* mild plum, het enige accent */
  --pruim-mist:#EFE0E6;

  --lijn:      #DCD2BE;

  --pil: 999px;
  --kaart-r: 18px;
  --veld-r: 10px;

  --marge: clamp(1.15rem, 4.5vw, 4.5rem);
  --lucht: clamp(4.5rem, 9vw, 8.5rem);
  --max: 1280px;

  --soepel: cubic-bezier(.16,1,.3,1);
  --schaduw: 0 1px 2px rgba(60,69,42,.05), 0 12px 34px -12px rgba(60,69,42,.18);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--papier);
  color:var(--inkt);
  font-family:Switzer,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--pruim);outline-offset:3px}

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

/* ---------- letters ---------- */
.titel{
  font-family:Zodiak,Georgia,"Times New Roman",serif;
  font-weight:400;line-height:1.04;letter-spacing:-.015em;color:var(--inkt);
  text-wrap:balance;
}
h1.titel{font-size:clamp(2.4rem,4.6vw,4rem);line-height:1.04}
h2.titel{font-size:clamp(1.9rem,3.8vw,3.1rem)}
h3.titel{font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.18}
.oog{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--olijf)}
.lood{color:var(--zacht);font-size:clamp(1.02rem,1.4vw,1.14rem);max-width:56ch}
.klein{font-size:.85rem;color:var(--zacht);line-height:1.62}

/* ---------- reveal ---------- */
.op{opacity:0;transform:translateY(20px);transition:opacity .8s var(--soepel),transform .8s var(--soepel)}
.op.in{opacity:1;transform:none}
.op[style*="--i"]{transition-delay:calc(var(--i,0) * 80ms)}
@media (prefers-reduced-motion:reduce){
  .op{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ---------- knoppen: allemaal pil ---------- */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.92rem 1.7rem;border-radius:var(--pil);font-weight:600;font-size:.97rem;
  border:1px solid transparent;transition:background .25s,color .25s,border-color .25s,transform .15s,box-shadow .25s;
}
.knop:active{transform:translateY(1px)}
.knop-vol{background:var(--pruim);color:#fff;box-shadow:0 8px 22px -12px rgba(122,63,88,.8)}
.knop-vol:hover{background:#8C4A66}
.knop-rand{border-color:var(--olijf);color:var(--olijf-diep)}
.knop-rand:hover{background:var(--olijf-mist)}
.knop-donker{background:var(--olijf-diep);color:#F6F2E7}
.knop-donker:hover{background:var(--olijf)}
.knop-groep{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}

/* ---------- voorstelbalk ---------- */
.voorstel{background:var(--olijf-diep);color:#CFCDB8;font-size:.76rem;line-height:1.5;padding:.5rem 0;position:relative;z-index:60}
.voorstel .wrap{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;justify-content:center;text-align:center}
.voorstel b{color:#F1EEE0;font-weight:600}
.voorstel a{color:#E8C7D5;text-decoration:underline;text-underline-offset:3px}

/* ---------- kop ---------- */
.kop{position:sticky;top:0;z-index:50;background:rgba(242,235,221,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.kop[data-vast="ja"]{border-bottom-color:var(--lijn);box-shadow:0 10px 30px -24px rgba(60,69,42,.6)}
.kop-in{display:flex;align-items:center;gap:1.3rem;height:70px}
.merk{margin-right:auto;display:flex;flex-direction:column;line-height:1.14}
.merk .naam{font-family:Zodiak,serif;font-size:1.08rem;letter-spacing:-.01em;white-space:nowrap}
.merk small{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--zacht);white-space:nowrap}
.nav{display:flex;gap:.2rem;font-size:.9rem;flex:none}
.nav a{padding:.45rem .8rem;white-space:nowrap;border-radius:var(--pil);color:var(--inkt-2);transition:background .22s,color .22s}
.nav a:hover{background:var(--olijf-mist);color:var(--olijf-diep)}
.nu{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--zacht);white-space:nowrap;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--pil);padding:.34rem .8rem}
.stip{width:7px;height:7px;border-radius:50%;background:var(--olijf);flex:none}
.stip.dicht{background:#B0A894}
.knopje{display:inline-flex;align-items:center;border-radius:var(--pil);padding:.66rem 1.2rem;background:var(--pruim);color:#fff;font-weight:600;font-size:.9rem;white-space:nowrap;transition:background .25s}
.knopje:hover{background:#8C4A66}

.menuknop{position:relative;z-index:56;display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto}
.menuknop i{width:22px;height:1.5px;background:var(--inkt);transition:transform .35s var(--soepel),opacity .2s}
.menuknop[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menuknop[aria-expanded="true"] i:nth-child(2){opacity:0}
.menuknop[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:55;background:var(--papier);display:flex;flex-direction:column;justify-content:center;padding:var(--marge);transform:translateY(-100%);transition:transform .5s var(--soepel);visibility:hidden}
.menu[data-open="ja"]{transform:none;visibility:visible}
.menu a{font-family:Zodiak,serif;font-size:1.85rem;padding-block:.55rem;border-bottom:1px solid var(--lijn)}
.menu .menu-cta{color:var(--pruim);border-bottom:0;margin-top:1.3rem}
.menu-voet{margin-top:1.5rem;font-size:.82rem;color:var(--zacht)}

/* ---------- hero: scheve tweedeling ---------- */
.hero{padding-block:clamp(2.5rem,5vw,4.5rem) clamp(3rem,6vw,5.5rem)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{max-width:16ch}
.hero .lood{margin-top:1.5rem;max-width:42ch;font-size:clamp(1.05rem,1.6vw,1.22rem)}
.hero-beeld{position:relative}
.hero-beeld figure{position:relative;border-radius:var(--kaart-r);overflow:hidden;box-shadow:var(--schaduw);aspect-ratio:4/5}
.hero-beeld img{width:100%;height:100%;object-fit:cover;object-position:46% 26%}
/* het olijfvlak dat er schuin achter vandaan komt */
.hero-beeld::before{
  content:"";position:absolute;inset:auto -1.6rem -1.6rem 3.5rem;height:62%;
  background:var(--olijf-mist);border-radius:var(--kaart-r);z-index:-1;
}
/* ---------- sectie ---------- */
.sectie{padding-block:var(--lucht)}
.sectie-kop{max-width:24ch}

/* ---------- keuzehulp ---------- */
.hulp{background:var(--olijf-mist);border-block:1px solid var(--lijn)}
.hulp-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.hulp h2{max-width:15ch}
.hulp .lood{margin-top:1rem;color:var(--inkt-2)}
.hulp-doos{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--kaart-r);padding:clamp(1.4rem,3vw,2.3rem);box-shadow:var(--schaduw)}
.hulp-voortgang{display:flex;align-items:center;gap:.7rem;font-size:.78rem;color:var(--zacht);letter-spacing:.08em}
.hulp-balk{flex:1;height:3px;background:var(--papier-2);border-radius:var(--pil);overflow:hidden}
.hulp-balk i{display:block;height:100%;background:var(--pruim);border-radius:var(--pil);transition:width .45s var(--soepel);width:33%}
.hulp-vraag{margin-top:1.4rem}
.hulp-vraag h3{font-family:Zodiak,serif;font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.16}
.hulp-opties{display:grid;gap:.6rem;margin-top:1.3rem}
.hulp-opties button{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;
  padding:.95rem 1.2rem;border:1px solid var(--lijn);border-radius:var(--kaart-r);
  background:var(--papier);transition:border-color .22s,background .22s,transform .15s;
}
.hulp-opties button:hover{border-color:var(--olijf);background:var(--olijf-mist)}
.hulp-opties button:active{transform:translateY(1px)}
.hulp-opties b{font-weight:600}
.hulp-opties span{display:block;font-size:.83rem;color:var(--zacht);font-weight:400;margin-top:.1rem}
.hulp-opties .pijl{color:var(--pruim);font-weight:600}
.hulp-terug{margin-top:1.1rem;font-size:.86rem;color:var(--zacht);text-decoration:underline;text-underline-offset:3px}
.hulp-uit{display:none}
.hulp-uit[data-aan="ja"]{display:block}
.hulp-uit .u-oog{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--olijf);font-weight:600}
.hulp-uit h3{font-family:Zodiak,serif;font-size:clamp(1.4rem,2.6vw,2rem);margin-top:.7rem;line-height:1.14}
.hulp-uit p{color:var(--zacht);margin-top:.8rem}
.hulp-uit .u-prijs{
  display:inline-flex;align-items:baseline;gap:.55rem;margin-top:1.2rem;
  background:var(--pruim-mist);border-radius:var(--pil);padding:.5rem 1.1rem;
  font-weight:600;color:var(--pruim);
}
.hulp-uit .u-prijs s{color:var(--zacht);font-weight:400}
@media (prefers-reduced-motion:no-preference){
  .hulp-stap,.hulp-uit[data-aan="ja"]{animation:zacht-in .45s var(--soepel)}
}
@keyframes zacht-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hulp-stap[hidden]{display:none}

/* ---------- redactionele tweeluik ---------- */
.tweeluik{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--kaart-r);overflow:hidden;margin-top:clamp(2rem,4vw,3rem)}
.tweeluik > article{background:var(--kaart);padding:clamp(1.6rem,3.4vw,2.8rem);display:flex;flex-direction:column}
.tweeluik h3{font-family:Zodiak,serif;font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.1}
.tweeluik .t-tekst{margin-top:1rem;color:var(--zacht)}
.tweeluik .t-lijst{margin-top:1.4rem;display:grid;gap:.55rem;font-size:.94rem}
.tweeluik .t-lijst > div{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--lijn)}
.tweeluik .t-lijst b{white-space:nowrap}
.tweeluik .t-lijst .r-duur{display:block;font-size:.8rem;color:var(--zacht)}
.tweeluik .t-lijst s{color:var(--zacht);font-weight:400;margin-right:.35rem}
.tweeluik .knop{margin-top:auto;align-self:flex-start}
.tweeluik .t-mee{margin-top:1.6rem;background:var(--olijf-mist);border-radius:var(--kaart-r);padding:.9rem 1.1rem;font-size:.88rem;color:var(--olijf-diep)}

/* ---------- bezoekroute ---------- */
.route-band{position:relative;border-radius:var(--kaart-r);overflow:hidden;aspect-ratio:21/8;box-shadow:var(--schaduw)}
.route-band img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.route-band figcaption{
  position:absolute;left:1.2rem;bottom:1.2rem;background:rgba(242,235,221,.94);
  border-radius:var(--pil);padding:.5rem 1.1rem;font-size:.84rem;font-weight:600;color:var(--olijf-diep);
}
.stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:clamp(2rem,4vw,3rem)}
.stap{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--kaart-r);padding:1.4rem;transition:transform .3s var(--soepel),box-shadow .3s var(--soepel)}
.stap:hover{transform:translateY(-4px);box-shadow:var(--schaduw)}
.stap .s-merk{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pruim);font-weight:600}
.stap h3{font-family:Zodiak,serif;font-size:1.25rem;margin-top:.7rem;line-height:1.18}
.stap p{margin-top:.6rem;font-size:.93rem;color:var(--zacht)}

/* ---------- prijzen: uitklappers ---------- */
.prijzen-lijst{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--lijn)}
.groep{border-bottom:1px solid var(--lijn)}
.groep summary{
  display:flex;align-items:center;gap:1rem;padding:1.35rem .25rem;cursor:pointer;list-style:none;
  font-family:Zodiak,serif;font-size:clamp(1.25rem,2.2vw,1.7rem);
}
.groep summary::-webkit-details-marker{display:none}
.groep summary .g-aantal{margin-left:auto;font-family:Switzer,sans-serif;font-size:.82rem;color:var(--zacht);font-weight:500}
.groep summary .g-teken{
  width:30px;height:30px;flex:none;border:1px solid var(--lijn);border-radius:50%;
  display:grid;place-items:center;font-family:Switzer,sans-serif;font-size:1.1rem;color:var(--olijf-diep);
  transition:transform .3s var(--soepel),background .25s;
}
.groep[open] summary .g-teken{transform:rotate(45deg);background:var(--olijf-mist)}
.groep-in{padding-bottom:1.6rem;display:grid;grid-template-columns:1fr 1fr;gap:.1rem 2.5rem}
.groep-in .g-noot{grid-column:1/-1;font-size:.85rem;color:var(--zacht);margin-top:.9rem}
.regel{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--lijn)}
.regel .r-duur{display:block;font-size:.8rem;color:var(--zacht)}
.regel b{white-space:nowrap;font-weight:600}
.regel s{color:var(--zacht);font-weight:400;margin-right:.35rem}

/* ---------- oordelen ---------- */
.oordeel{background:var(--papier-2);border-block:1px solid var(--lijn)}
.oordeel-kop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem}
.score{display:flex;align-items:baseline;gap:1rem}
.score strong{font-family:Zodiak,serif;font-size:clamp(3.4rem,7vw,5.4rem);font-weight:400;line-height:.9}
.score span{color:var(--zacht);font-size:.92rem;max-width:22ch}
.per-behandeling{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 2rem;min-width:min(100%,26rem)}
.per-behandeling > div{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;color:var(--zacht);border-bottom:1px solid var(--lijn);padding-bottom:.35rem}
.per-behandeling b{color:var(--inkt)}
.stemmen{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:clamp(2rem,4vw,3rem);padding-bottom:.8rem;scrollbar-width:thin}
.stemmen blockquote{
  flex:0 0 min(82vw,25rem);scroll-snap-align:start;
  background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--kaart-r);padding:1.5rem;
}
.stemmen p{font-family:Zodiak,serif;font-size:1.16rem;line-height:1.36}
.stemmen cite{display:block;margin-top:1rem;font-style:normal;font-size:.82rem;color:var(--zacht)}

/* ---------- voorbereiding ---------- */
.klaar{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(0,auto);gap:1.1rem;margin-top:clamp(2rem,4vw,3rem)}
.klaar > *{border-radius:var(--kaart-r)}
.klaar .tip{background:var(--kaart);border:1px solid var(--lijn);padding:1.4rem;grid-column:span 1}
.klaar .tip h3{font-family:Zodiak,serif;font-size:1.16rem;line-height:1.2}
.klaar .tip p{margin-top:.55rem;font-size:.92rem;color:var(--zacht)}
.klaar .beeld{overflow:hidden;position:relative;min-height:190px}
.klaar .beeld img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.klaar .breed{grid-column:span 2}
.klaar .zacht{background:var(--olijf-mist);border:1px solid var(--lijn);padding:1.4rem;display:flex;flex-direction:column;justify-content:center}
.klaar .zacht h3{font-family:Zodiak,serif;font-size:1.3rem;line-height:1.16}
.klaar .zacht p{margin-top:.55rem;font-size:.92rem;color:var(--olijf-diep)}

/* ---------- boeken ---------- */
.boeken-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.kaartje{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--kaart-r);padding:clamp(1.3rem,2.6vw,2rem);box-shadow:var(--schaduw)}
.uren{width:100%;border-collapse:collapse;font-size:.95rem;margin-top:1rem}
.uren th,.uren td{padding:.55rem 0;border-bottom:1px solid var(--lijn);text-align:left;font-weight:400}
.uren td{text-align:right;font-variant-numeric:tabular-nums;color:var(--zacht)}
.uren tr:last-child th,.uren tr:last-child td{border-bottom:0}
.uren tr.dicht th,.uren tr.dicht td{color:#98917E}
.uren tr.vandaag th,.uren tr.vandaag td{color:var(--inkt);font-weight:600}
.adres{margin-top:1.5rem;font-size:.95rem;color:var(--zacht);line-height:1.7}
.adres b{display:block;color:var(--inkt)}
.adres a{color:var(--pruim);text-decoration:underline;text-underline-offset:3px}
.boekdoos{border:1px solid var(--lijn);border-radius:var(--kaart-r);overflow:hidden;background:var(--kaart);margin-top:1.4rem}
.boekdoos iframe{width:100%;height:min(76vh,740px);border:0;display:block}

/* ---------- voet ---------- */
.voet{background:var(--olijf-diep);color:#D3D2BF;padding-block:clamp(3rem,6vw,4.5rem) 4rem}
.voet-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(2rem,4vw,3.5rem)}
.voet b,.voet .voet-kop{color:#F4F1E4}
.voet p,.voet a{font-size:.92rem}
.voet a{display:block;padding-block:.28rem;transition:color .2s}
.voet a:hover{color:#fff}
.voet-kop{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:.8rem;opacity:.8}
.voet .klein{color:#B7B6A3}
.voet .klein a{display:inline;color:#E8C7D5;text-decoration:underline;text-underline-offset:3px}

/* ---------- mobiele balk ---------- */
.balk{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;gap:.6rem;padding:.6rem var(--marge) calc(.6rem + env(safe-area-inset-bottom));background:rgba(242,235,221,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--lijn)}
.balk a{flex:1;text-align:center;padding:.8rem .5rem;border-radius:var(--pil);font-weight:600;font-size:.92rem}
.balk .boek{background:var(--pruim);color:#fff}
.balk .app{border:1px solid var(--olijf);color:var(--olijf-diep)}

/* ---------- breekpunten ---------- */
@media (max-width:1024px){
  .hero-in,.hulp-in,.boeken-in{grid-template-columns:1fr}
  .hero-beeld{max-width:520px}
  .hero-beeld::before{inset:auto -1rem -1rem 3rem}
  .stappen{grid-template-columns:1fr 1fr}
  .klaar{grid-template-columns:1fr 1fr}
  .klaar .breed{grid-column:span 2}
  .voet-in{grid-template-columns:1fr 1fr}
}
@media (max-width:1120px){
  .nav a{padding:.45rem .6rem;font-size:.86rem}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav,.kop .knopje,.kop .nu{display:none}
  .menuknop{display:flex}
  .balk{display:flex}
  .voet{padding-bottom:6rem}
  .tweeluik{grid-template-columns:1fr}
  .stappen{grid-template-columns:1fr}
  .groep-in{grid-template-columns:1fr}
  .per-behandeling{grid-template-columns:1fr}
  .klaar{grid-template-columns:1fr}
  .klaar .breed{grid-column:span 1}
  .voet-in{grid-template-columns:1fr}
  .route-band{aspect-ratio:16/10}
}