@font-face { font-family:'Roxborough'; src:url('fonts/roxborough-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Goudy'; src:url('fonts/goudy-italic.woff2') format('woff2'); font-style:italic; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/montserrat-regular.woff2') format('woff2'); font-display:swap; }
:root {
  --aubergine:#3F1A2E; --diep:#2A1220; --vlak:#54293F;
  --creme:#EFE7DD; --gips:#F9F5F0; --zand:#D9CBBE; --lijn:#E4D8CC;
  --roze:#913F6E; --malve:#C08AA6; --salie:#7C9285; --inkt-zacht:#6B5560;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--creme); color:var(--aubergine); font-family:'Montserrat',sans-serif; font-size:16px; line-height:1.7; }
h1,h2,h3 { font-family:'Roxborough',serif; font-weight:400; line-height:1.15; text-wrap:balance; }
p { text-wrap:pretty; }
a { color:inherit; }
a[href^="tel:"], a[href*="wa.me"] { white-space:nowrap; }
a[href^="mailto:"] { overflow-wrap:anywhere; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
.goudy { font-family:'Goudy',serif; font-style:italic; }

/* zachte binnenkomst per sectie */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.zichtbaar { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } }

header { background:var(--creme); position:sticky; top:0; z-index:10; border-bottom:1px solid var(--lijn); }
.header-in { display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:24px; }
.logo-h { width:190px; color:var(--aubergine); transition:color .3s; }
.logo-h:hover { color:var(--roze); }
.logo-h svg { width:100%; height:auto; display:block; }
nav { display:flex; gap:28px; align-items:center; font-size:13px; letter-spacing:.06em; text-transform:uppercase; }
nav a { text-decoration:none; opacity:.8; transition:opacity .2s; }
nav a:hover { opacity:1; }
.knop { display:inline-block; background:var(--diep); color:var(--creme); text-decoration:none;
  padding:13px 26px; border-radius:100px; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  transition:background .25s, color .25s, transform .25s; }
.knop:hover { background:#1C0A12; transform:translateY(-1px); }
.knop.omlijnd { background:transparent; color:var(--aubergine); border:1px solid rgba(63,26,46,.4); }
.knop.omlijnd:hover { background:var(--aubergine); color:var(--creme); border-color:var(--aubergine); }

/* donker statement-vlak: de binnenkomer */
.hero { background:var(--diep); color:var(--creme); overflow:hidden; position:relative; }
.hero-in { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding:96px 0; }
.hero h1 { font-size:clamp(36px,5.2vw,58px); margin-bottom:22px; }
.hero .goudy { color:var(--malve); }
.hero p { max-width:46ch; margin-bottom:34px; opacity:.85; }
.hero-knoppen { display:flex; gap:14px; flex-wrap:wrap; }
.hero .knop { background:var(--creme); color:var(--aubergine); }
.hero .knop:hover { background:var(--gips); }
.hero .knop.omlijnd { background:transparent; color:var(--creme); border-color:rgba(239,231,221,.5); }
.hero .knop.omlijnd:hover { background:var(--creme); color:var(--aubergine); }
.hero-foto { border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.hero-foto img { width:100%; height:100%; max-height:500px; object-fit:cover; display:block; }
.badge { display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--malve); border:1px solid rgba(192,138,166,.45); border-radius:100px; padding:6px 16px; margin-bottom:24px; }

nav a.actief { opacity:1; color:var(--roze); }

/* subpagina-kop: donker statement-vlak, kleiner dan de hero */
.paginakop { background:var(--diep); color:var(--creme); padding:72px 0; }
.paginakop h1 { font-size:clamp(32px,4.6vw,50px); margin-bottom:18px; }
.paginakop .goudy { color:var(--malve); }
.paginakop p { max-width:60ch; opacity:.85; }
.paginakop p.groot { font-size:19px; opacity:1; }

.notitie { margin-top:26px; background:#fff; border:1px solid var(--lijn); border-radius:16px; padding:32px 38px; }
.notitie .goudy { color:var(--roze); font-size:19px; margin-bottom:8px; }
.notitie p:last-child { font-size:15px; color:var(--inkt-zacht); }

.beleid { background:var(--creme); border-top:1px solid var(--lijn); }
.beleid-tekst { max-width:68ch; margin-top:34px; }
.beleid-tekst p { margin-bottom:16px; }
.beleid-tekst .goudy { color:var(--roze); font-size:19px; }

.tijden ul { list-style:none; max-width:340px; }
.tijden li { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--lijn); }

.juridisch { max-width:760px; }
.juridisch h2 { font-size:24px; margin:40px 0 12px; }
.juridisch h2:first-child { margin-top:0; }
.juridisch p { margin-bottom:14px; color:var(--inkt-zacht); }
.juridisch a { color:var(--roze); }

section { padding:88px 0; }
.sectiekop { max-width:560px; margin-bottom:44px; }
.sectiekop h2 { font-size:clamp(26px,3.4vw,38px); margin-bottom:14px; }
.sectiekop p { color:var(--inkt-zacht); }

.behandelingen { background:var(--gips); }
.kaarten { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.kaart { background:#fff; border:1px solid var(--lijn); border-radius:16px; padding:38px;
  transition:transform .3s ease, box-shadow .3s ease; }
.kaart:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(63,26,46,.10); }
.kaart h3 { font-size:22px; margin-bottom:6px; }
.kaart .meta { font-family:'Goudy',serif; font-style:italic; color:var(--roze); font-size:18px; margin-bottom:14px; }
.kaart p { font-size:15px; color:var(--inkt-zacht); }
.opmerking { margin-top:26px; font-size:14px; color:var(--inkt-zacht); }
.opmerking a { color:var(--roze); }

.overmij { background:var(--creme); }
.overmij-in { display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.foto-vlak { background:linear-gradient(160deg, var(--malve), var(--roze)); border-radius:16px;
  aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; color:var(--creme); }
.foto-vlak svg { width:42%; height:auto; opacity:.9; }
.overmij p { margin-bottom:16px; }
.overmij .goudy { font-size:20px; color:var(--roze); }

.studio { background:var(--gips); border-top:1px solid var(--lijn); }
.kolommen { display:grid; grid-template-columns:1fr 1fr 1fr; gap:22px; }
.blok { background:#fff; border:1px solid var(--lijn); border-radius:16px; padding:32px; font-size:15px;
  transition:transform .3s ease, box-shadow .3s ease; }
.blok:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(63,26,46,.10); }
.blok h3 { font-size:19px; margin-bottom:10px; }
.blok p { color:var(--inkt-zacht); }
.blok a { color:var(--roze); }

/* contactkaarten: klikbaar, met ikoon en vaste actieregel onderin */
.contactkaart { display:flex; flex-direction:column; align-items:flex-start; text-decoration:none; }
.contactkaart p { margin-bottom:18px; }
.ikoon { width:46px; height:46px; border-radius:50%; background:rgba(192,138,166,.18);
  display:flex; align-items:center; justify-content:center; color:var(--roze); margin-bottom:18px;
  transition:background .25s, color .25s; }
.ikoon svg { width:21px; height:21px; }
.contactkaart:hover .ikoon { background:var(--roze); color:#fff; }
.actie { margin-top:auto; color:var(--roze); font-size:14px; letter-spacing:.04em; white-space:nowrap;
  border-bottom:1px solid rgba(145,63,110,.35); padding-bottom:2px; transition:border-color .25s; }
.contactkaart:hover .actie { border-color:var(--roze); }

/* donker slotakkoord */
.contact { background:var(--aubergine); color:var(--creme); text-align:center; }
.contact h2 { font-size:clamp(26px,3.4vw,38px); margin-bottom:12px; }
.contact > .wrap > p { max-width:52ch; margin:0 auto 34px; opacity:.85; }
.contact-regels { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.contact .knop { background:var(--creme); color:var(--aubergine); }
.contact .knop:hover { background:var(--gips); }
.contact .knop.omlijnd { background:transparent; color:var(--creme); border-color:rgba(239,231,221,.5); }
.contact .knop.omlijnd:hover { background:var(--creme); color:var(--aubergine); }
.contact small { display:block; margin-top:26px; font-size:13px; opacity:.65; }

footer { background:var(--diep); color:var(--creme); padding:56px 0 40px; font-size:14px; }
.footer-in { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; }
.footer-in h4 { font-family:'Roxborough',serif; font-weight:400; font-size:17px; margin-bottom:12px; }
.footer-in p, .footer-in li { opacity:.8; }
.footer-in ul { list-style:none; }
.footer-in li { display:flex; justify-content:space-between; max-width:230px; }
.footer-logo { width:150px; margin-bottom:16px; color:var(--creme); }
.footer-logo svg { width:100%; height:auto; }
.footer-onder { border-top:1px solid rgba(239,231,221,.15); margin-top:40px; padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; opacity:.65; }
.footer-onder a { color:inherit; }

@media (max-width:820px) {
  nav .verberg-mobiel { display:none; }
  .hero-in, .overmij-in { grid-template-columns:1fr; padding:56px 0; }
  .hero-foto img { max-height:320px; }
  .kaarten, .kolommen, .footer-in { grid-template-columns:1fr; }
  section { padding:56px 0; }
}