/* =================================================================
   Gentle Wax & Laser Clinic, Hoog Catharijne, Utrecht.
   Gedeelde stijl over vijf pagina's.

   Waar het bij deze om draait: mensen zijn zenuwachtig. Een brazilian
   laten doen bij iemand die je nog nooit hebt gezien is spannend, en
   dat staat letterlijk in haar beoordelingen terug. Prisje heeft daar
   zelfs een aparte prijs voor: 'First time brazilian'. De pagina moet
   die zenuwen wegnemen, niet nog een keer benadrukken hoe luxe het is.

   Vandaar de honingkleur: warm, zacht, en het is ook nog letterlijk de
   kleur van wax. Het diepe groenblauw ernaast is het enige koele; dat
   houdt het weg bij zoetigheid.

   Fraunces voor de koppen omdat hij warm en een tikje eigenwijs is,
   Archivo eronder omdat die klein nog goed leest in een prijslijst.

   Gebouwd op DE-LAT-BEAUTY.md: ronding 0, hero vult het scherm, één knop.
   ================================================================= */

:root{
  --honing:#f8eeda;
  --was:#f1e0c1;
  --wit:#fdf8ef;
  --espresso:#2b1f18;
  --teal:#1d4b48;
  --teal-licht:#8fc0bb;
  --grijs:#6a5748;
  --lijn:#e2d3b8;
  --rond:0px;
  --marge:clamp(1.15rem,4.5vw,4.5rem);
  --lucht:clamp(4.5rem,10vw,8rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--honing);color:var(--espresso);font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--marge)}
.smal{max-width:820px}

.display{font-family:Fraunces,Georgia,serif;font-weight:400;overflow-wrap:break-word;line-height:1.06;letter-spacing:-.012em}
h1.display{font-size:clamp(2.6rem,6.6vw,5.3rem)}
h2.display{font-size:clamp(2rem,4.8vw,3.6rem)}
h3.display{font-size:clamp(1.4rem,2.7vw,2rem)}
.label{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--teal);font-weight:600}
.intro{margin-top:1.4rem;color:var(--grijs);font-size:clamp(1.02rem,2vw,1.16rem);max-width:56ch}

/* ---- voorstelbalk ---- */
.voorstel{background:var(--espresso);color:#b3a292;font-size:.78rem;padding:.55rem 0;line-height:1.45}
.voorstel .wrap{display:flex;flex-wrap:wrap;gap:.3rem 1rem;justify-content:center;text-align:center}
.voorstel b{color:var(--honing);font-weight:600}
.voorstel a{font-weight:600;text-underline-offset:2px}

/* ---- kop ---- */
.kop{position:sticky;top:0;z-index:60;background:rgba(248,238,218,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--lijn)}
.kop-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:78px}
.merk{text-decoration:none;line-height:1.05}
.merk .naam{display:block;font-family:Fraunces,Georgia,serif;font-size:1.24rem;letter-spacing:-.01em}
.merk small{display:block;margin-top:.1rem;font-size:.59rem;letter-spacing:.22em;color:var(--grijs);
  text-transform:uppercase}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{text-decoration:none;font-size:.88rem;color:var(--grijs);transition:color .18s;padding-block:.4rem}
.nav a:hover,.nav a[aria-current=page]{color:var(--espresso)}
.nav a[aria-current=page]{border-bottom:1px solid var(--teal)}
@media(max-width:960px){.nav{display:none}}
.kop-cta{background:var(--teal);color:var(--honing);text-decoration:none;font-weight:600;font-size:.86rem;
  padding:.72rem 1.35rem;border-radius:var(--rond);white-space:nowrap;transition:background .18s,transform .1s}
.kop-cta:hover{background:var(--espresso)}
.kop-cta:active{transform:translateY(1px)}
@media(max-width:520px){.kop-cta{display:none}}

/* ---- knoppen ---- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;
  font-weight:600;font-size:.95rem;border-radius:var(--rond);padding:1.05rem 2.1rem;
  border:1px solid transparent;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,transform .1s}
.knop-vol{background:var(--teal);color:var(--honing);border-color:var(--teal)}
.knop-vol:hover{background:var(--espresso);border-color:var(--espresso)}
.knop-licht{border-color:rgba(248,238,218,.5);color:var(--honing)}
.knop-licht:hover{background:var(--honing);color:var(--espresso);border-color:var(--honing)}
.knop-rand{border-color:var(--espresso);color:var(--espresso)}
.knop-rand:hover{background:var(--espresso);color:var(--honing)}
.knop:active{transform:translateY(1px)}
.knop-groep{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.1rem}

/* ---- hero ---- */
.hero{min-height:clamp(540px,calc(100vh - 112px),900px);display:flex;align-items:center;
  padding-block:clamp(2.8rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.2rem,5vw,4rem);align-items:center;width:100%}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.15fr .85fr}}
.hero h1.display{margin-top:1.2rem;max-width:13ch}
.hero-onder{margin-top:1.5rem;color:var(--grijs);font-size:clamp(1.05rem,2vw,1.22rem);max-width:42ch}
.hero-beeld{order:-1}
@media(min-width:1000px){.hero-beeld{order:0}}

.plaat{background:var(--wit);border:1px solid var(--lijn);padding:clamp(.7rem,1.4vw,1rem);
  max-width:460px;margin-inline:auto}
.plaat img{width:100%}

/* De hero stond stil. Een langzame beweging over twintig seconden maakt
   hem levend zonder dat er iets van kwaliteit af gaat; wie beweging heeft
   uitgezet krijgt gewoon het stilstaande beeld. */
.plaat-hero{overflow:hidden}
.plaat-hero img{transform-origin:52% 40%;animation:adem 24s ease-in-out infinite alternate}
@keyframes adem{from{transform:scale(1)}to{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.plaat-hero img{animation:none}}
.plaat figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:.8rem;padding-top:.65rem;
  border-top:1px solid var(--lijn);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grijs)}
.plaat figcaption b{color:var(--teal);font-weight:600}

/* ---- kleine hero ---- */
.hero-klein{background:var(--espresso);color:var(--honing);padding-block:clamp(3rem,7vw,5.5rem)}
.hero-klein .label{color:var(--teal-licht)}
.hero-klein h1.display{margin-top:1rem;font-size:clamp(2.2rem,5.4vw,4.2rem);max-width:16ch}
.hero-klein .hero-onder{color:#b3a292;max-width:54ch}

/* ---- secties ---- */
.sectie{padding-block:var(--lucht)}
.sectie-was{background:var(--was)}
.sectie-donker{background:var(--espresso);color:var(--honing)}
.sectie-donker .label{color:var(--teal-licht)}
.sectie-donker .intro{color:#b3a292}
.sectie-teal{background:var(--teal);color:var(--honing)}
.sectie-teal .label{color:var(--teal-licht)}
.sectie-teal .intro{color:#b6d3cf}

/* ---- geruststelling: vier stappen bij binnenkomst ---- */
.stappen{display:grid;grid-template-columns:1fr;gap:0;margin-top:3rem;counter-reset:st}
@media(min-width:900px){.stappen{grid-template-columns:repeat(4,1fr);gap:1.4rem}}
.stappen div{counter-increment:st;padding:1.8rem 0;border-top:1px solid var(--lijn)}
@media(min-width:900px){.stappen div{padding:1.6rem 0 0}}
.stappen div::before{content:counter(st,decimal-leading-zero);display:block;font-size:.7rem;
  letter-spacing:.18em;color:var(--teal);font-weight:600;margin-bottom:.6rem}
.stappen h3{font-family:Fraunces,Georgia,serif;font-size:1.28rem;line-height:1.2;margin-bottom:.5rem}
.stappen p{color:var(--grijs);font-size:.97rem}
.sectie-donker .stappen div{border-color:#493a2f}
.sectie-donker .stappen p{color:#b3a292}
.sectie-donker .stappen div::before{color:var(--teal-licht)}

/* ---- ruwe lijsten ---- */
.regels{display:grid;gap:0;margin-top:3rem;max-width:1000px}
.regels > div{padding:2rem 0;border-top:1px solid var(--lijn);display:grid;gap:.5rem}
@media(min-width:820px){.regels > div{grid-template-columns:.8fr 1.2fr;gap:2.6rem;align-items:baseline}}
.regels > div:last-child{border-bottom:1px solid var(--lijn)}
.regels dt{font-family:Fraunces,Georgia,serif;font-size:clamp(1.35rem,2.9vw,2rem);line-height:1.16}
.regels dd{color:var(--grijs);font-size:1.02rem;max-width:50ch}
.sectie-donker .regels > div,.sectie-teal .regels > div{border-color:#493a2f}
.sectie-teal .regels > div{border-color:#356964}
.sectie-donker .regels dd{color:#b3a292}
.sectie-teal .regels dd{color:#b6d3cf}

/* ---- prijzen ---- */
.prijslijst{margin-top:2.8rem;max-width:860px}
.prijsgroep + .prijsgroep{margin-top:3.4rem}
.prijsgroep h3{margin-bottom:.4rem}
.prijsgroep > p{color:var(--grijs);margin-bottom:1.4rem;max-width:54ch;font-size:1rem}
.prijsregel{display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:baseline;
  padding:1.05rem 0;border-top:1px solid var(--lijn)}
.prijsregel:last-child{border-bottom:1px solid var(--lijn)}
.prijsregel .duur{display:block;font-size:.86rem;color:var(--grijs);margin-top:.1rem}
.prijsregel .bedrag{font-family:Fraunces,Georgia,serif;font-size:1.35rem;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.prijsregel .weg{text-decoration:line-through;color:var(--grijs);font-size:.95rem;margin-right:.4rem;
  font-family:Archivo,sans-serif}
.prijsnoot{margin-top:1.6rem;font-size:.94rem;color:var(--grijs);max-width:60ch}
.sectie-donker .prijsregel{border-color:#493a2f}
.sectie-donker .prijsregel .duur,.sectie-donker .prijsnoot{color:#b3a292}

/* ---- het bewijsblok: 990 beoordelingen verdienen meer dan een rijtje ---- */
.bewijs{display:grid;grid-template-columns:1fr;gap:2.6rem;margin-top:3rem;align-items:start}
@media(min-width:900px){.bewijs{grid-template-columns:.9fr 1.1fr;gap:4rem}}

.cijfer-groot{display:flex;align-items:baseline;gap:.9rem}
.cijfer-groot strong{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:clamp(4rem,10vw,6.5rem);
  line-height:.9;letter-spacing:-.03em}
.cijfer-groot span{font-size:.95rem;color:var(--grijs);max-width:14ch;line-height:1.4}
.sectie-donker .cijfer-groot span{color:#b3a292}

/* De verdeling over de sterren, als staafjes die iets zeggen. */
.verdeling{margin-top:2rem;display:grid;gap:.55rem}
.verdeling div{display:grid;grid-template-columns:2.6rem 1fr 3rem;gap:.8rem;align-items:center;
  font-size:.86rem;color:var(--grijs)}
.sectie-donker .verdeling div{color:#b3a292}
.verdeling .staaf{height:8px;background:var(--lijn);position:relative;overflow:hidden}
.sectie-donker .verdeling .staaf{background:#493a2f}
.verdeling .staaf i{position:absolute;inset:0 auto 0 0;background:var(--teal);display:block}
.sectie-donker .verdeling .staaf i{background:var(--teal-licht)}
.verdeling .aantal{text-align:right;font-variant-numeric:tabular-nums}

/* Cijfers per behandeling: waar ze het hoogst scoort staat vooraan. */
.per-behandeling{margin-top:2.4rem;display:grid;gap:0}
.per-behandeling div{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:.72rem 0;
  border-top:1px solid var(--lijn);font-size:.95rem}
.per-behandeling div:last-child{border-bottom:1px solid var(--lijn)}
.sectie-donker .per-behandeling div{border-color:#493a2f}
.per-behandeling b{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:1.15rem;
  font-variant-numeric:tabular-nums}

/* ---- stemmen ---- */
.stem-lijst{margin-top:2.8rem;display:grid;gap:0}
.stem-lijst blockquote{margin:0;padding:2.2rem 0;border-top:1px solid var(--lijn)}
.stem-lijst blockquote:last-child{border-bottom:1px solid var(--lijn)}
.stem-lijst p{font-family:Fraunces,Georgia,serif;font-size:clamp(1.3rem,2.8vw,2rem);line-height:1.3;
  max-width:30ch}
.stem-lijst cite{display:block;margin-top:.9rem;font-style:normal;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal)}
.sectie-donker .stem-lijst blockquote{border-color:#493a2f}
.sectie-donker .stem-lijst cite{color:var(--teal-licht)}

/* ---- beeldstrook ---- */
.strook{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin-top:3rem}
@media(min-width:820px){.strook{grid-template-columns:repeat(3,1fr);gap:1.2rem}}
.strook figure{margin:0;background:var(--wit);border:1px solid var(--lijn);padding:.5rem}
.strook img{width:100%;aspect-ratio:3/4;object-fit:cover}
.strook figcaption{margin-top:.55rem;font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grijs)}

/* ---- uren en adres ---- */
.uren{width:100%;border-collapse:collapse;font-size:1rem;margin-top:1.6rem;max-width:420px}
.uren th,.uren td{text-align:left;padding:.66rem 0;border-bottom:1px solid var(--lijn)}
.uren th{font-weight:400;color:var(--grijs)}
.uren td{text-align:right;font-variant-numeric:tabular-nums}
.uren tr.dicht th,.uren tr.dicht td{color:#72604f}
.uren tr.vandaag th,.uren tr.vandaag td{color:var(--teal);font-weight:600}
.nu{display:flex;align-items:center;gap:.55rem;font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grijs)}
.stip{width:7px;height:7px;border-radius:50%;background:#3f8a5f;flex:0 0 auto}
.stip.dicht{background:#9a8877}
.adres{margin-top:2rem;line-height:1.9}
.adres b{display:block;font-family:Fraunces,Georgia,serif;font-size:1.28rem;font-weight:400}
.adres a{font-weight:600;text-underline-offset:3px;display:inline-block;padding-block:.3rem}

/* ---- het boekscherm van Treatwell, in de pagina zelf ---- */
.boekdoos{border:1px solid var(--lijn);background:var(--wit);overflow:hidden;margin-top:1.6rem}
.boekdoos iframe{width:100%;height:820px;border:0;display:block;background:var(--wit)}
@media(max-width:640px){.boekdoos iframe{height:640px}}

.twee{display:grid;grid-template-columns:1fr;gap:2.6rem;margin-top:2.8rem;align-items:start}
@media(min-width:1000px){.twee{grid-template-columns:1fr 1fr;gap:4rem}}

/* ---- afsluiter ---- */
.slot{background:var(--teal);color:var(--honing)}
.slot-in{padding-block:clamp(4.5rem,11vw,8rem);text-align:center}
.slot .intro{margin-inline:auto;color:#b6d3cf}
.slot .knop-groep{justify-content:center}

/* ---- voet ---- */
.voet{background:var(--espresso);color:#b3a292;padding-block:3rem;font-size:.9rem;border-top:1px solid #493a2f}
.voet-in{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:760px){.voet-in{grid-template-columns:1.3fr 1fr 1fr}}
.voet b{color:var(--honing);font-weight:400;font-family:Fraunces,Georgia,serif;font-size:1.1rem}
.voet a{color:#b3a292;text-decoration:none;display:block;padding-block:.22rem}
.voet a:hover{color:var(--honing)}
.voet .voet-kop{color:var(--honing);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:.7rem}

/* ---- vaste balk op mobiel ---- */
.balk{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:.5rem;
  padding:.6rem var(--marge) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(248,238,218,.97);backdrop-filter:blur(12px);border-top:1px solid var(--lijn)}
.balk a{flex:1;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font-weight:600;font-size:.92rem;line-height:1.25;white-space:nowrap;padding:.85rem .9rem;
  border-radius:var(--rond)}
.balk .boek{background:var(--teal);color:var(--honing)}
.balk .app{background:#25d366;color:#04250f}
@media(max-width:760px){
  .balk{display:flex}
  body{padding-bottom:calc(4.9rem + env(safe-area-inset-bottom))}
}

@media(max-width:640px){
  .voorstel{font-size:.72rem;padding:.45rem 0}
  .hero{padding-top:1.6rem;padding-bottom:3rem;min-height:0}
  .hero-grid{gap:1.8rem}
  .plaat{padding:.5rem}
  .plaat img{aspect-ratio:4/3;object-fit:cover;max-height:min(27vh,215px);width:100%}
  .plaat figcaption{margin-top:.55rem;padding-top:.5rem;font-size:.62rem;letter-spacing:.1em}
}

/* ---- beweging ---- */
.js .op{opacity:0;transform:translateY(16px)}
.js .op.in{opacity:1;transform:none;transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){
  .js .op{opacity:1;transform:none}
  .js .op.in{transition:none}
}


/* ---- menu op de telefoon ---- */
/* De kopnavigatie verdwijnt onder de 1000 pixels. Daar hoort dus iets voor
   in de plaats te staan, en dat ontbrak. Nu: een knop rechts in de kop die
   een schermvullend menu opent met dezelfde pagina's, groter gezet. */
.menuknop{display:none;font:inherit;background:none;border:0;cursor:pointer;padding:.55rem;
  margin-right:-.55rem;color:inherit;line-height:0;-webkit-tap-highlight-color:transparent}
.menuknop svg{display:block;width:26px;height:26px}
.menuknop rect{fill:currentColor;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s}
@media(max-width:1000px){.menuknop{display:block}}

.menu{position:fixed;inset:0;z-index:90;background:#2b1f18;color:#fdf8ef;
  display:flex;flex-direction:column;justify-content:center;
  padding:5.5rem var(--marge) 2.5rem;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s ease,transform .35s cubic-bezier(.16,1,.3,1),visibility .3s}
.menu[data-open=ja]{opacity:1;visibility:visible;transform:none}
.menu a{display:block;text-decoration:none;color:#fdf8ef;
  font-family:Fraunces,Georgia,serif;font-size:clamp(1.7rem,7.4vw,3.1rem);line-height:1.16;
  padding:.42rem 0;border-bottom:1px solid #514a47;
  overflow-wrap:break-word}
.menu a:first-of-type{border-top:1px solid #514a47}
.menu a[aria-current=page]{color:#e2d3b8}
/* Let op de selector: .menu a (0,2,0) wint anders van .menu-cta (0,1,0),
   waardoor de knoptekst de menukleur kreeg en onleesbaar werd op het accent. */
.menu a.menu-cta{margin-top:2rem;display:inline-flex;align-items:center;justify-content:center;
  background:#e2d3b8;color:#2b1f18;font-weight:700;font-size:1rem;
  padding:1.05rem 2rem;border-radius:var(--rond);text-decoration:none;align-self:flex-start}
.menu-voet{margin-top:1.6rem;font-size:.82rem;color:#c5c2bd;line-height:1.6}
html[data-menu=open],html[data-menu=open] body{overflow:hidden}

/* De knop wordt een kruis zodra het menu open staat. */
.menuknop[aria-expanded=true]{position:fixed;right:var(--marge);top:calc(var(--kop-top,0px) + .9rem);
  z-index:95;color:#fdf8ef}
.menuknop[aria-expanded=true] rect:nth-child(1){transform:translate(0,7px) rotate(45deg)}
.menuknop[aria-expanded=true] rect:nth-child(2){opacity:0}
.menuknop[aria-expanded=true] rect:nth-child(3){transform:translate(0,-7px) rotate(-45deg)}
.menuknop rect{transform-origin:center;transform-box:fill-box}

@media (prefers-reduced-motion:reduce){
  .menu,.menuknop rect{transition:none}
}