/* Babyon, babymassage en zwangerschapsmassage Utrecht.
   Eigen ontwerp: zacht, licht, rond, warm. Geen generator gebruikt. */

:root{
  --room: #FBF5EF;
  --room-deep: #F3E7DC;
  --ink: #3C332E;
  --ink-zacht: #6E6159;
  --rose: #E3A79C;
  --rose-deep: #D4897D;
  --sage: #AEBFA0;
  --sage-deep: #8FA480;
  --krijt: #FFFDFB;
  --lijn: #E9DCD0;
  --radius: 28px;
  --radius-klein: 16px;
  --wrap: 1160px;
  --vrij: clamp(20px, 5vw, 48px);
  --topruimte: 84px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--room);
  color:var(--ink);
  font-family:"Nunito Sans", "Segoe UI", system-ui, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--vrij)}
h1,h2,h3{
  font-family:"Fraunces", Georgia, serif;
  font-weight:500;
  margin:0 0 .5em;
  color:var(--ink);
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.2rem, 5.5vw, 3.6rem);line-height:1.08}
h2{font-size:clamp(1.7rem, 3.6vw, 2.5rem);line-height:1.15}
h3{font-size:clamp(1.2rem, 2.2vw, 1.5rem)}
p{margin:0 0 1em}
.label{
  display:inline-block;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rose-deep);
  font-weight:700;
  margin-bottom:.9em;
}
.sectie{padding:clamp(56px,9vw,120px) 0}
.sectie--room{background:var(--room-deep)}
.midden{text-align:center;max-width:680px;margin-left:auto;margin-right:auto}
.werkwijze__cta{display:block;margin:40px auto 0;width:fit-content}

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.85em 1.6em;
  border-radius:100px;
  font-weight:700;
  font-size:.98rem;
  border:1.5px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn--rose{
  background:var(--rose);
  color:var(--krijt);
  box-shadow:0 10px 24px -10px rgba(212,137,125,.65);
}
.btn--rose:hover{background:var(--rose-deep);transform:translateY(-2px)}
.btn--buiten{
  border-color:var(--ink);
  color:var(--ink);
}
.btn--buiten:hover{background:var(--ink);color:var(--krijt)}
.btn--klein{padding:.65em 1.3em;font-size:.88rem}

/* ---------- header ---------- */
.kop{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(251,245,239,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.kop.vast{border-color:var(--lijn);box-shadow:0 8px 24px -18px rgba(60,51,46,.4)}
.kop__in{
  max-width:var(--wrap);margin:0 auto;padding:16px var(--vrij);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.merk{display:flex;flex-direction:column;line-height:1.1}
.merk__naam{font-family:"Fraunces",serif;font-weight:600;font-size:1.4rem;color:var(--ink)}
.merk__tag{font-size:.72rem;letter-spacing:.08em;color:var(--ink-zacht);text-transform:uppercase}
.nav{display:flex;gap:28px;font-size:.95rem;font-weight:600}
.nav a{color:var(--ink-zacht);transition:color .2s}
.nav a:hover{color:var(--rose-deep)}
.kop__cta{display:flex;align-items:center;gap:10px}
.burger{
  display:none;width:42px;height:42px;border-radius:50%;
  border:1.5px solid var(--lijn);background:var(--krijt);
  position:relative;cursor:pointer;flex:none;
}
.burger span,.burger span::before,.burger span::after{
  content:"";position:absolute;left:11px;right:11px;height:2px;
  background:var(--ink);border-radius:2px;transition:transform .25s ease, opacity .25s ease;
}
.burger span{top:50%;transform:translateY(-50%)}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:rotate(45deg) translate(5px,5px)}
.burger[aria-expanded="true"] span::after{transform:rotate(-45deg) translate(5px,-5px)}

.paneel{
  position:fixed;inset:0;z-index:49;
  background:var(--room);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  opacity:0;pointer-events:none;transform:translateY(-12px);
  transition:opacity .3s ease, transform .3s ease;
}
.paneel.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.paneel nav{display:flex;flex-direction:column;align-items:center;gap:22px}
.paneel nav a{font-family:"Fraunces",serif;font-size:1.7rem;color:var(--ink)}
.paneel__sluit{
  position:absolute;top:18px;right:var(--vrij);
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--lijn);
  background:var(--krijt);cursor:pointer;
}
.paneel__sluit::before,.paneel__sluit::after{
  content:"";position:absolute;top:50%;left:50%;width:16px;height:2px;background:var(--ink);
}
.paneel__sluit::before{transform:translate(-50%,-50%) rotate(45deg)}
.paneel__sluit::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  padding-top:calc(var(--topruimte) + 40px);
  padding-bottom:clamp(40px,7vw,80px);
}
.hero__in{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);
  align-items:center;
}
.hero__tekst p.lead{font-size:1.14rem;color:var(--ink-zacht);max-width:46ch}
.hero__cta{display:flex;align-items:center;gap:16px;margin-top:1.6em;flex-wrap:wrap}
.hero__cta .mini{font-size:.86rem;color:var(--ink-zacht)}
.hero__foto{
  position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/5;box-shadow:0 30px 60px -28px rgba(60,51,46,.45);
}
.hero__foto img{width:100%;height:100%;object-fit:cover}
.hero__badge{
  position:absolute;bottom:18px;left:18px;right:18px;
  background:rgba(255,253,251,.9);backdrop-filter:blur(6px);
  border-radius:var(--radius-klein);padding:14px 18px;
  display:flex;align-items:center;gap:12px;
}
.hero__badge .stip{width:10px;height:10px;border-radius:50%;background:var(--sage);flex:none}
.hero__badge span{font-size:.88rem;color:var(--ink-zacht)}

/* ---------- uitgelicht ---------- */
.uitgelicht__in{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);
  align-items:center;
}
.uitgelicht__foto{
  border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;
  box-shadow:0 26px 50px -26px rgba(60,51,46,.4);
}
.uitgelicht__foto img{width:100%;height:100%;object-fit:cover}
.uitgelicht__lijst{list-style:none;margin:1.4em 0;padding:0;display:flex;flex-direction:column;gap:12px}
.uitgelicht__lijst li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-zacht);font-size:.98rem}
.uitgelicht__lijst li::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--rose);
  margin-top:.6em;flex:none;
}
.uitgelicht__prijs{
  display:flex;gap:18px;align-items:baseline;margin:1.2em 0 1.6em;
  padding:16px 20px;background:var(--krijt);border-radius:var(--radius-klein);
  border:1px solid var(--lijn);width:fit-content;
}
.uitgelicht__prijs b{font-family:"Fraunces",serif;font-size:1.5rem}
.uitgelicht__prijs span{color:var(--ink-zacht);font-size:.86rem}

/* ---------- behandelingen ---------- */
.kaarten{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;
}
.kaart{
  background:var(--krijt);border-radius:var(--radius);
  border:1px solid var(--lijn);padding:32px 28px;
  display:flex;flex-direction:column;gap:14px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.kaart:hover{transform:translateY(-6px);box-shadow:0 24px 44px -26px rgba(60,51,46,.35)}
.kaart__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.kaart__icoon{
  width:48px;height:48px;border-radius:50%;background:var(--room-deep);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.kaart__meta{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.kaart__prijs{font-family:"Fraunces",serif;font-size:1.35rem;color:var(--rose-deep)}
.kaart__duur{font-size:.8rem;color:var(--ink-zacht)}
.kaart p{color:var(--ink-zacht);font-size:.96rem;margin-bottom:.3em}
.kaart__sessies{font-size:.82rem;color:var(--sage-deep);font-weight:700}

/* ---------- over ---------- */
.over__in{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);
  align-items:center;
}
.over__cirkel{
  width:min(100%,360px);aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  margin:0 auto;box-shadow:0 26px 50px -26px rgba(60,51,46,.4);
  border:10px solid var(--krijt);
}
.over__cirkel img{width:100%;height:100%;object-fit:cover}
.over__punten{display:flex;gap:28px;margin-top:1.6em;flex-wrap:wrap}
.over__punt b{display:block;font-family:"Fraunces",serif;font-size:1.3rem;color:var(--rose-deep)}
.over__punt span{font-size:.84rem;color:var(--ink-zacht)}

/* ---------- werkwijze ---------- */
.stappen{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;
}
.stap{
  background:var(--krijt);border-radius:var(--radius);padding:30px 26px;
  border:1px solid var(--lijn);scroll-snap-align:start;
}
.stap p{color:var(--ink-zacht);font-size:.95rem;margin-bottom:0}

/* ---------- contact ---------- */
.contact{
  background:var(--ink);color:var(--krijt);border-radius:var(--radius);
  padding:clamp(40px,7vw,72px);display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:18px;
}
.contact h2{color:var(--krijt)}
.contact p{color:#D9CEC6;max-width:52ch}
.contact .label{color:var(--rose)}
.contact__stad{
  display:flex;align-items:center;gap:8px;font-size:.92rem;color:#D9CEC6;margin-top:4px;
}

/* ---------- footer ---------- */
.voet{padding:60px 0 28px;border-top:1px solid var(--lijn)}
.voet__boven{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px}
.voet__merk p{margin-top:14px;color:var(--ink-zacht);font-size:15px;max-width:320px}
.voet h4{font-family:"Fraunces",serif;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-zacht);margin-bottom:14px}
.voet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.voet ul a{font-size:15px;color:var(--ink)}
.voet ul a:hover{color:var(--rose-deep)}
.voet__in{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
}
.voet__merk{display:flex;flex-direction:column;gap:2px}
.voet__nav{display:flex;gap:22px;font-size:.9rem;color:var(--ink-zacht)}
.voet__onder{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--lijn);
  font-size:.8rem;color:var(--ink-zacht);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}

/* ---------- boeken ---------- */
.boekkop{text-align:center;max-width:620px;margin:0 auto 32px}
.widget{
  max-width:720px;margin:0 auto;border-radius:var(--radius);overflow:hidden;
  background:var(--krijt);border:1px solid var(--lijn);
  box-shadow:0 30px 60px -32px rgba(60,51,46,.4);
}
.widget iframe{width:100%;height:640px;border:0;display:block}
.boek__onder{text-align:center;margin-top:24px;color:var(--ink-zacht);font-size:.9rem}

/* ---------- mobiel ---------- */
@media (max-width: 860px){
  .nav{display:none}
  .burger{display:block}
  .hero__in,.uitgelicht__in,.over__in{grid-template-columns:1fr}
  .uitgelicht__in .uitgelicht__foto{order:-1}
  .over__in .over__cirkel{order:-1}
  .kaarten{grid-template-columns:1fr}
  .stappen{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;
    overflow-x:auto;scroll-snap-type:x mandatory;margin:32px calc(var(--vrij) * -1) 0;
    padding:4px var(--vrij) 10px;
  }
  .stappen::-webkit-scrollbar{display:none}
  .voet__boven{grid-template-columns:1fr 1fr;gap:28px}
  .voet__merk{grid-column:1 / -1}
}

@media (max-width: 480px){
  :root{--topruimte:72px}
  body{font-size:16px}
  .kop__in{padding:12px var(--vrij)}
  .merk__naam{font-size:1.2rem}
  .btn--klein{padding:.6em 1.05em;font-size:.84rem}
  .voet__boven{grid-template-columns:1fr;gap:26px}
  .voet__onder{flex-direction:column;text-align:center}
  .hero__cta{gap:12px}
  .uitgelicht__prijs{flex-direction:column;gap:4px;align-items:flex-start}
  .contact{padding:32px 20px;border-radius:20px}
}