/* ─── RESET & TOKENS ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Vervangfonts met dezelfde maten als de webfonts (size-adjust uit @capsizecss/metrics):
   de tekst verspringt niet als Inter en Cormorant Garamond binnenkomen (CLS 0). */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Liberation Sans'), local('Roboto'); size-adjust: 107.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; }
@font-face { font-family: 'Cormorant Fallback'; src: local('Times New Roman'), local('Liberation Serif'), local('Noto Serif'); size-adjust: 96.98%; ascent-override: 95.27%; descent-override: 29.59%; line-gap-override: 0%; }
:root {
  --c-bg:      #fafaf8;
  --c-bg2:     #f4f1eb;
  --c-bg3:     #eeeae1;
  --c-dark:    #141210;
  --c-dark2:   #2a2620;
  --c-text:    #3d3830;
  --c-muted:   #6b645b;   /* was #7a736a: 4,1:1 op crème, nu 5,1:1 */
  --c-gold:    #b8965a;
  --c-gold2:   #d4b07a;
  --c-gold-dk: #7f6333;   /* goud voor tekst en knopvlakken: 5,6:1 met wit, 5,0:1 op crème #f4f1eb */
  --c-gold-dk2: #6f5628;  /* hover van goud-dk */
  --c-white:   #ffffff;
  --c-border:  #e4ddd4;
  --r:         10px;
  --sh:        0 2px 16px rgba(0,0,0,.07);
  --sh-lg:     0 8px 40px rgba(0,0,0,.12);
}

html  { scroll-behavior: smooth; overflow-x: hidden; }
body  { font-family: 'Inter', 'Inter Fallback', sans-serif; background: var(--c-bg); color: var(--c-text); line-height: 1.65; overflow-x: hidden; width: 100%; }
h1,h2,h3,h4 { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif; line-height: 1.15; color: var(--c-dark); }
h1 { font-size: clamp(2.6rem,6vw,4.4rem); font-weight: 400; }
h2 { font-size: clamp(1.9rem,4vw,3rem); font-weight: 400; }
h3 { font-size: 1.55rem; font-weight: 500; }
h4 { font-size: 1.1rem; }
a  { text-decoration: none; color: inherit; }
address { font-style: normal; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

.label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-gold-dk);
  margin-bottom: 10px;
}

.sec-head { text-align: center; margin-bottom: 56px; }
.sec-head h2 { margin-bottom: 14px; }
.sec-head p  { color: var(--c-muted); max-width: 540px; margin: 0 auto; }
.sec-head.light h2 { color: var(--c-white); }
.sec-head.light p  { color: rgba(255,255,255,.6); }
.sec-head.light .label { color: var(--c-gold2); }

/* BUTTONS */
.btn-fill {
  display: inline-block;
  background: var(--c-gold-dk);
  color: var(--c-white);
  padding: 13px 34px;
  border-radius: 50px;
  font-size: .9rem;
  font-weight: 600;
  border: 2px solid var(--c-gold-dk);
  cursor: pointer;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  transition: background .22s, transform .18s, box-shadow .22s;
}
.btn-fill:hover { background: var(--c-gold-dk2); border-color: var(--c-gold-dk2); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(184,150,90,.35); }

.btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--c-white);
  padding: 13px 34px;
  border-radius: 50px;
  font-size: .9rem;
  font-weight: 500;
  border: 2px solid rgba(255,255,255,.55);
  transition: all .22s;
}
.btn-ghost:hover { border-color: var(--c-white); background: rgba(255,255,255,.1); }

.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--c-gold-dk);
  padding: 11px 28px;
  border-radius: 50px;
  font-size: .88rem;
  font-weight: 600;
  border: 2px solid var(--c-gold-dk);
  transition: all .22s;
}
.btn-outline:hover { background: var(--c-gold-dk); color: var(--c-white); }

.btn-back {
  background: none;
  border: 1px solid var(--c-border);
  color: var(--c-muted);
  padding: 11px 22px;
  border-radius: 50px;
  cursor: pointer;
  font-size: .86rem;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  transition: all .2s;
}
.btn-back:hover { border-color: var(--c-gold); color: var(--c-gold-dk); }

.hidden { display: none !important; }

/* ─── NAV ─── */
#nav {
  position: fixed; inset: 0 0 auto;
  z-index: 900;
  padding: 22px 0;
  transition: background .3s, padding .3s, box-shadow .3s;
}
#nav.scrolled {
  background: rgba(250,250,248,.96);
  backdrop-filter: blur(14px);
  padding: 12px 0;
  box-shadow: 0 1px 0 var(--c-border);
}
#nav.scrolled .logo-h { color: var(--c-dark); }
#nav.scrolled .logo-s { color: var(--c-gold); }
#nav.scrolled .nav-menu a { color: var(--c-muted); }
#nav.scrolled .nav-menu a:hover { color: var(--c-dark); }
.nav-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; flex-direction: column; line-height: 1; }
.logo-h { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif; font-size: 1.35rem; font-weight: 500; color: var(--c-white); letter-spacing: .04em; }
.logo-s { font-size: .55rem; letter-spacing: .3em; text-transform: uppercase; color: var(--c-gold2); margin-top: 1px; }
.nav-menu { list-style: none; display: flex; align-items: center; gap: 32px; }
.nav-menu a { color: rgba(255,255,255,.8); font-size: .86rem; font-weight: 500; transition: color .2s; }
.nav-menu a:hover { color: var(--c-white); }
.has-drop { position: relative; }
.caret { font-size: .6rem; margin-left: 3px; opacity: .6; }
.dropdown {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r); padding: 8px 0; min-width: 160px;
  box-shadow: var(--sh-lg); list-style: none;
  opacity: 0; visibility: hidden; transition: all .22s;
}
.has-drop:hover .dropdown { opacity: 1; visibility: visible; }
.dropdown a { display: block; padding: 9px 18px; color: var(--c-text) !important; font-size: .84rem; transition: background .15s, color .15s; }
.dropdown a:hover { background: var(--c-bg2); color: var(--c-gold) !important; }
.nav-book {
  background: var(--c-gold-dk) !important;
  color: var(--c-white) !important;
  padding: 9px 22px !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  transition: background .22s !important;
}
.nav-book:hover { background: var(--c-gold-dk) !important; }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; z-index: 901; }
.burger span { width: 24px; height: 2px; background: var(--c-white); border-radius: 2px; display: block; transition: all .3s; }
#nav.scrolled .burger span { background: var(--c-dark); }

/* ─── HERO ─── */
.hero {
  height: 100vh; min-height: 640px;
  position: relative; display: flex; align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: url('/images/prp-treatment.webp') center/cover no-repeat;
  filter: brightness(.38) saturate(.5);
  transform: scale(1.08);
  transform-origin: center center;
}
.hero-fade {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(20,18,16,.82) 38%, rgba(20,18,16,.25) 78%, transparent 100%);
}
.hero-content {
  position: relative; z-index: 2;
  width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 28px;
  padding-top: 80px;
}
.hero-label {
  font-size: .72rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--c-gold2); margin-bottom: 18px;
}
.hero h1 { color: var(--c-white); margin-bottom: 22px; max-width: 620px; }
.hero h1 em { font-style: italic; color: var(--c-gold2); }
.hero-sub { color: rgba(255,255,255,.7); font-size: 1.05rem; max-width: 480px; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ─── STRIP ─── */
.strip { background: var(--c-white); border-bottom: 1px solid var(--c-border); box-shadow: var(--sh); }
.strip-inner {
  max-width: 1160px; margin: 0 auto; padding: 22px 28px;
  display: flex; align-items: center; justify-content: center;
  gap: 28px; flex-wrap: wrap;
}
.strip-item { display: flex; align-items: center; gap: 10px; font-size: .86rem; font-weight: 500; }
.strip-item svg { width: 18px; height: 18px; color: var(--c-gold); flex-shrink: 0; }
.strip-div { width: 1px; height: 28px; background: var(--c-border); }

/* ─── ABOUT ─── */
.about { padding: 100px 0; }
.about-inner { max-width: 1160px; margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-img-wrap { position: relative; }
.about-img-bg {
  position: relative;
  width: 100%; aspect-ratio: 4/5; border-radius: 14px;
  background: linear-gradient(135deg, var(--c-dark2) 0%, #3a2e20 50%, var(--c-dark2) 100%);
  overflow: hidden;
}
/* Lichte verdonkering onderaan, zodat de ronde badge leesbaar blijft. */
.about-img-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,20,16,.35), transparent 55%);
  border-radius: 14px;
}
.about-badge {
  position: absolute; bottom: -18px; right: -18px;
  width: 90px; height: 90px; border-radius: 50%;
  background: var(--c-gold); color: var(--c-white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(184,150,90,.4);
}
.about-img-wrap { overflow: visible; }
.about-badge strong { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif; font-size: 1.3rem; line-height: 1; }
.about-badge span   { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 1px; }
.about-stat-row { display: flex; gap: 0; margin-top: 32px; border: 1px solid var(--c-border); border-radius: var(--r); overflow: hidden; }
.about-stat { flex: 1; padding: 16px 0; text-align: center; border-right: 1px solid var(--c-border); }
.about-stat:last-child { border-right: none; }
.about-stat strong { display: block; font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif; font-size: 1.4rem; color: var(--c-dark); }
.about-stat span   { font-size: .75rem; color: var(--c-muted); }
.about-text h2 { margin-bottom: 16px; }
.about-text p  { color: var(--c-muted); margin-bottom: 14px; }
.about-text strong { color: var(--c-dark); }
.check-list { list-style: none; margin: 22px 0 28px; display: flex; flex-direction: column; gap: 9px; }
.check-list li { padding-left: 22px; position: relative; font-size: .92rem; }
.check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--c-gold); font-weight: 700; }

/* ─── TREATMENTS ─── */
.treatments { padding: 100px 0; background: var(--c-bg2); }
.treat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.treat-card { background: var(--c-white); border-radius: 16px; overflow: hidden; box-shadow: var(--sh); border: 1px solid var(--c-border); transition: transform .25s, box-shadow .25s; }
.treat-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.treat-img { position: relative; height: 260px; }
.haar-img { background: url('/images/prp-tubes.webp') center/cover; filter: brightness(.7) saturate(.7); }
.huid-img { background: url('/images/skin-treatment.webp') center/cover; filter: brightness(.7) saturate(.7); }
.treat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,18,16,.7) 0%, transparent 60%);
  display: flex; align-items: flex-end; padding: 20px;
}
.treat-overlay span { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif; font-size: 1.1rem; letter-spacing: .22em; color: var(--c-white); font-weight: 500; }
.treat-body { padding: 32px; }
.treat-body h3 { margin-bottom: 10px; }
.treat-body p  { color: var(--c-muted); font-size: .92rem; margin-bottom: 18px; }
.treat-list { list-style: none; margin-bottom: 26px; display: flex; flex-direction: column; gap: 7px; }
.treat-list li { font-size: .86rem; color: var(--c-muted); padding-left: 14px; position: relative; }
.treat-list li::before { content: '·'; position: absolute; left: 0; color: var(--c-gold); font-size: 1.1rem; line-height: 1.5; }

/* ─── METHOD / PRP STEPS ─── */
.method { padding: 100px 0; background: var(--c-dark); }
.steps { display: flex; align-items: stretch; justify-content: center; gap: 0; flex-wrap: wrap; margin-top: 0; }
.step {
  flex: 1; min-width: 160px; max-width: 210px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r); padding: 32px 22px;
  text-align: center; transition: background .25s;
}
.step:hover { background: rgba(184,150,90,.08); }
.step-nr { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif; font-size: 2.6rem; color: var(--c-gold); opacity: .45; margin-bottom: 10px; line-height: 1; }
.step h3 { color: var(--c-white); margin-bottom: 8px; font-size: 1rem; }
.step p  { color: rgba(255,255,255,.55); font-size: .84rem; line-height: 1.6; }
.step-arrow { color: var(--c-gold); font-size: 1.3rem; opacity: .35; display: flex; align-items: center; padding: 0 6px; }

/* ─── BOOKING ─── */
.booking { padding: 100px 0; }
.book-box {
  max-width: 820px; margin: 0 auto;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: 20px; box-shadow: var(--sh-lg); padding: 48px;
}

/* Steps bar */
.book-steps-bar { display: flex; align-items: center; margin-bottom: 40px; }
.book-step-dot {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: default;
}
.book-step-dot span {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--c-border); display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 600; color: var(--c-muted);
  transition: all .25s;
}
.book-step-dot small { font-size: .68rem; color: var(--c-muted); letter-spacing: .04em; }
.book-step-dot.active span { border-color: var(--c-gold); background: var(--c-gold); color: var(--c-white); }
.book-step-dot.done span   { border-color: var(--c-gold); background: var(--c-gold); color: var(--c-white); }
.book-step-line { flex: 1; height: 1px; background: var(--c-border); margin: 0 10px 18px; }

.book-panel h3 { margin-bottom: 24px; font-size: 1.35rem; }
.book-panel { animation: fadeUp .3s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* Treatment options */
.treat-opts { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.treat-opt { cursor: pointer; }
.treat-opt input { display: none; }
.topt-card {
  border: 2px solid var(--c-border); border-radius: var(--r);
  padding: 18px 22px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
  transition: border-color .2s, background .2s;
}
.topt-card:hover { border-color: var(--c-gold2); }
.treat-opt input:checked + .topt-card { border-color: var(--c-gold); background: #fdf8f0; }
.topt-left strong { display: block; font-size: .95rem; color: var(--c-dark); margin-bottom: 3px; }
.topt-left p { color: var(--c-muted); font-size: .84rem; margin-bottom: 4px; }
.topt-dur { font-size: .76rem; color: var(--c-muted); }
.topt-price { font-weight: 600; color: var(--c-gold); font-size: .9rem; white-space: nowrap; }

/* Calendar */
.cal-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 28px; }
.cal-box { border: 1px solid var(--c-border); border-radius: var(--r); padding: 20px; }
.cal-nav-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-nav-row span { font-weight: 600; font-size: .92rem; color: var(--c-dark); }
.cal-nav-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--c-border); background: none;
  cursor: pointer; font-size: 1.1rem; color: var(--c-muted);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.cal-nav-btn:hover { border-color: var(--c-gold); color: var(--c-gold); }
.cal-wd { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 6px; }
.cal-wd b { text-align: center; font-size: .68rem; font-weight: 600; color: var(--c-muted); letter-spacing: .05em; padding: 3px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.cd {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 7px; font-size: .82rem; cursor: pointer;
  transition: all .15s; font-weight: 500; color: var(--c-text);
}
.cd:hover:not(.cd-past):not(.cd-empty):not(.cd-sun) { background: var(--c-gold2); color: var(--c-dark); }
.cd-past  { color: #ccc; cursor: not-allowed; }
.cd-empty { cursor: default; }
.cd-today { border: 2px solid var(--c-gold); color: var(--c-gold); font-weight: 700; }
.cd-sel   { background: var(--c-gold) !important; color: var(--c-white) !important; font-weight: 700; }
.cd-sat   { color: var(--c-gold-dk); }
.cd-sun   { color: #bbb; cursor: not-allowed; }

/* Time slots */
.time-box h4 { font-size: .95rem; margin-bottom: 14px; }
.time-hint { color: var(--c-muted); font-size: .84rem; font-style: italic; }
#timeList { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }
.tslot {
  border: 1px solid var(--c-border); border-radius: 8px;
  padding: 10px 14px; cursor: pointer; font-size: .88rem; font-weight: 500;
  display: flex; justify-content: space-between; align-items: center;
  transition: all .18s;
}
.tslot:hover { border-color: var(--c-gold); color: var(--c-gold); }
.tslot.sel { background: var(--c-gold); color: var(--c-white); border-color: var(--c-gold); }
.tslot.blocked { opacity: .45; cursor: not-allowed; pointer-events: none; }
.tslot.blocked .tslot-tag { color: #c0392b; opacity: 1; }

.inline-book-row { padding: 10px 0 4px; animation: fadeSlideIn .2s ease; }
.inline-book-btn { width: 100%; font-size: .88rem; padding: 12px 20px; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.tslot-tag { font-size: .72rem; opacity: .65; }

/* Form */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 0; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field label { font-size: .82rem; font-weight: 600; color: var(--c-dark); }
.field input, .field textarea {
  border: 1px solid var(--c-border); border-radius: 8px;
  padding: 11px 14px; font-size: .9rem; font-family: 'Inter', 'Inter Fallback', sans-serif;
  color: var(--c-text); background: var(--c-bg); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(184,150,90,.13); }
.field textarea { resize: vertical; }
.privacy-check { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; color: var(--c-muted); margin-bottom: 24px; cursor: pointer; }
.privacy-check input { margin-top: 2px; accent-color: var(--c-gold); flex-shrink: 0; }
.privacy-check a { color: var(--c-gold); }
.step-btns { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }

/* Book summary */
.book-summary { background: #fdf8f0; border: 1px solid rgba(184,150,90,.25); border-radius: var(--r); padding: 14px 18px; font-size: .87rem; color: var(--c-text); margin-bottom: 24px; }

/* Confirm */
.confirm-wrap { text-align: center; padding: 20px 0; }
.confirm-icon { width: 68px; height: 68px; border-radius: 50%; background: #edf7ed; color: #3a853a; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; }
.confirm-wrap h3 { margin-bottom: 12px; }
.confirm-wrap p  { color: var(--c-muted); margin-bottom: 8px; }
.confirm-note { font-size: .84rem; margin-bottom: 28px !important; }
.confirm-note a  { color: var(--c-gold); }

/* ─── CONTACT ─── */
.contact { padding: 100px 0; background: var(--c-bg2); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.contact-info h2 { margin-bottom: 12px; }
.contact-intro { color: var(--c-muted); margin-bottom: 32px; }
.contact-items { display: flex; flex-direction: column; gap: 20px; margin-bottom: 36px; }
/* Op een volledige paginabreedte (Over ons) staan vier regels onder elkaar te
   verloren; daar zetten we ze in twee kolommen. */
.contact-items.breed {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 24px 48px; max-width: 780px; margin-left: auto; margin-right: auto;
}
.contact-item { display: flex; gap: 14px; align-items: flex-start; }
.ci-icon { font-size: 1.3rem; width: 40px; height: 40px; background: var(--c-white); border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh); flex-shrink: 0; }
.contact-item strong { display: block; font-size: .82rem; color: var(--c-dark); margin-bottom: 2px; }
.contact-item span, .contact-item a { color: var(--c-muted); font-size: .88rem; display: block; line-height: 1.5; }
.contact-item a { color: var(--c-gold); transition: color .2s; }
.contact-item a:hover { color: var(--c-gold-dk); }
.map-col { height: 100%; min-height: 400px; }
.map-col iframe { height: 100%; min-height: 400px; }

/* ─── FOOTER ─── */
.footer { background: var(--c-dark); color: rgba(255,255,255,.6); padding: 72px 0 0; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 44px; padding-bottom: 52px; border-bottom: 1px solid rgba(255,255,255,.07); }
.footer-brand .logo-h { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif; font-size: 1.3rem; color: var(--c-white); display: block; margin-bottom: 2px; }
.footer-brand .logo-s { font-size: .54rem; letter-spacing: .28em; color: var(--c-gold); display: block; margin-bottom: 14px; }
.footer-brand p { font-size: .84rem; line-height: 1.7; }
.footer-col h3 { color: var(--c-white); font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-family: 'Inter', 'Inter Fallback', sans-serif; margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-col a { font-size: .84rem; color: rgba(255,255,255,.55); transition: color .2s; }
.footer-col a:hover { color: var(--c-gold); }
.footer-col address { font-size: .84rem; line-height: 1.7; margin-bottom: 10px; }
.footer-col a { display: block; margin-bottom: 4px; }
.footer-bar { text-align: center; padding: 20px; font-size: .76rem; color: #8f8a83; }

/* ─── TREATMENT CATEGORIES ─── */
.treat-category { margin-bottom: 64px; }
.cat-header { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid var(--c-border); }
.cat-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; }
.skin-col { background: #fce8e8; color: #c05a5a; }
.hair-col { background: #e8f0fc; color: #4a6aaa; }
.rem-col  { background: #e8fce8; color: #4aaa5a; }
.well-col { background: #f5ede0; color: #9a6c38; }
.cat-header h2 { font-size: 1.5rem; margin: 0; }
.treat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.tcard { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r); padding: 26px 24px; transition: box-shadow .22s, transform .22s; position: relative; }
.tcard:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); }
.tcard h3 { font-size: 1.1rem; margin-bottom: 8px; }
.tcard p  { color: var(--c-muted); font-size: .86rem; margin-bottom: 14px; }
.tcard ul { list-style: none; margin-bottom: 16px; display: flex; flex-direction: column; gap: 7px; }
.tcard li { display: flex; justify-content: space-between; font-size: .86rem; padding-bottom: 6px; border-bottom: 1px dashed var(--c-border); }
.tcard li span { font-weight: 600; color: var(--c-gold); }
.tcard .note { font-size: .74rem; color: var(--c-muted); margin-bottom: 14px; font-style: italic; }
.featured-card { border-color: var(--c-gold); background: linear-gradient(135deg, #fdf8f0 0%, #fff 100%); }
.featured-badge { position: absolute; top: -10px; right: 20px; background: var(--c-gold-dk); color: var(--c-white); font-size: .68rem; font-weight: 700; letter-spacing: .1em; padding: 3px 12px; border-radius: 50px; }
.wide-card { grid-column: span 2; }
.deal-box { background: #fdf8f0; border: 1px solid rgba(184,150,90,.2); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: .84rem; }
.deal-box p { margin-bottom: 3px; color: var(--c-text); }
.deal-box s { color: var(--c-muted); font-size: .8rem; margin-left: 4px; }
.deal-title { font-weight: 600; color: var(--c-gold); margin-bottom: 6px !important; }
.btn-outline-sm { display: inline-block; border: 1.5px solid var(--c-gold-dk); color: var(--c-gold-dk); padding: 8px 18px; border-radius: 50px; font-size: .82rem; font-weight: 600; transition: all .2s; }
.btn-outline-sm:hover { background: var(--c-gold); color: var(--c-white); }
.btn-fill-sm { display: inline-block; background: var(--c-gold-dk); color: var(--c-white); padding: 8px 18px; border-radius: 50px; font-size: .82rem; font-weight: 600; border: none; cursor: pointer; transition: background .2s; }
.btn-fill-sm:hover { background: var(--c-gold-dk); }

/* Price table inside card */
.price-table { margin-bottom: 16px; font-size: .82rem; }
.pt-col { display: flex; flex-direction: column; gap: 0; }
.pt-row { display: grid; grid-template-columns: 1fr 70px 70px; gap: 4px; padding: 5px 0; border-bottom: 1px solid var(--c-bg2); }
.pt-row.header { font-weight: 700; font-size: .74rem; letter-spacing: .05em; color: var(--c-muted); }
.pt-row.highlight { font-weight: 700; color: var(--c-dark); background: #fdf8f0; padding: 6px 4px; border-radius: 4px; }
.pt-row span:not(:first-child) { text-align: right; font-weight: 600; color: var(--c-gold); }
.pt-row.header span:not(:first-child) { color: var(--c-muted); font-weight: 700; }

/* ─── PRICING SECTION ─── */
/* Uitleg per behandeling (gegenereerd blok op behandelingen.html) */
.kennis-links { padding: 60px 0 20px; }
.kennis-links h2 { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif; font-size: 2rem; color: var(--c-dark); margin-bottom: 8px; }
.kennis-links p { margin-bottom: 18px; }
.kennis-links ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 28px; padding: 0; }
.kennis-links li { border-bottom: 1px dashed var(--c-border); padding: 10px 0; }
.kennis-links a { color: var(--c-gold-dk); text-decoration: none; font-weight: 500; }
.kennis-links a:hover { text-decoration: underline; }

.pricing { padding: 80px 0; background: var(--c-bg2); }
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-bottom: 20px; }
.price-col { background: var(--c-white); border-radius: var(--r); padding: 28px 24px; border: 1px solid var(--c-border); }
.price-col h3 { font-size: 1.1rem; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--c-gold); color: var(--c-dark); }
.price-list { display: flex; flex-direction: column; gap: 0; }
.pl-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--c-border); font-size: .86rem; }
.pl-item span:last-child { font-weight: 600; color: var(--c-gold-dk); white-space: nowrap; margin-left: 8px; }
.pl-item s { color: var(--c-muted); font-size: .78rem; }
.pl-item.deal { background: #fdf8f0; padding: 8px 6px; border-radius: 4px; border-bottom: none; margin-bottom: 2px; }
.price-note { text-align: center; font-size: .8rem; color: var(--c-muted); font-style: italic; }

/* ── BETALING TER PLAATSE — melding in stap 3 ── */
.pay-notice {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; margin: 20px 0 4px;
  border: 1px solid rgba(184,150,90,.3); border-left: 3px solid var(--c-gold);
  border-radius: 10px; background: #fdf8f0;
}
.pay-notice-icon { font-size: 1.3rem; line-height: 1.2; flex-shrink: 0; }
.pay-notice strong { display: block; font-size: .92rem; color: var(--c-dark); margin-bottom: 3px; }
.pay-notice span { font-size: .84rem; color: var(--c-muted); line-height: 1.55; }
@media (max-width: 680px) { .pay-notice { padding: 14px; gap: 11px; } }

/* ─── TREAT OPTS (booking) ─── */
.treat-group { margin-bottom: 24px; }
.treat-group-label { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold); margin-bottom: 10px; }
.topt-price.free { color: #3a853a; }
.form-error { background: #fde8e8; border: 1px solid #e08080; color: #a02020; border-radius: 8px; padding: 12px 16px; font-size: .86rem; margin-bottom: 12px; }

/* ─── CONFIRM ─── */
.confirm-contact { font-size: .84rem; color: var(--c-muted); margin-bottom: 28px !important; }
.confirm-contact a { color: var(--c-gold); }

/* ─── GALLERY SLIDER ─── */
.gallery-section { padding: 80px 0; background: var(--c-bg2); }
.gallery-slider-wrap {
  position: relative;
  margin-top: 40px;
}
.gallery-slider {
  display: flex;
  gap: 14px;
  overflow: hidden;
  scroll-behavior: smooth;
  border-radius: 14px;
}
.gallery-slide {
  position: relative;
  flex: 0 0 calc(33.333% - 10px);
  height: 300px;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}
.gallery-slide img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.gallery-slide:hover img { transform: scale(1.05); }
.gallery-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(20,18,16,.72));
  color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: 28px 14px 14px;
  opacity: 0; transition: opacity .3s;
}
.gallery-slide:hover .gallery-label { opacity: 1; }
.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; background: var(--c-white); border: 1px solid var(--c-border);
  color: var(--c-dark); width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; cursor: pointer; transition: all .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  line-height: 1;
}
.gallery-arrow:hover { background: var(--c-gold); color: #fff; border-color: var(--c-gold); }
.gallery-prev { left: -20px; }
.gallery-next { right: -20px; }
.gallery-cta { text-align: center; margin-top: 36px; }

/* ─── TREAT-GROUP ACCORDION (afspraak) ─── */
.treat-group-header {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; padding: 16px 20px;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: 10px; margin-bottom: 4px;
  transition: all .2s;
  user-select: none;
}
.treat-group-header:hover { border-color: var(--c-gold); background: var(--c-bg2); }
.treat-group-header.open { border-color: var(--c-gold); background: var(--c-bg2); border-radius: 10px 10px 0 0; margin-bottom: 0; }
.treat-group-header .tgh-left { display: flex; align-items: center; gap: 12px; }
.treat-group-header .tgh-icon { font-size: 1.1rem; }
.treat-group-header .tgh-title { font-weight: 600; font-size: 1rem; color: var(--c-dark); }
.treat-group-header .tgh-sub { font-size: .82rem; color: var(--c-muted); margin-top: 2px; }
.treat-group-header .tgh-arrow { font-size: 1.1rem; color: var(--c-muted); transition: transform .25s; }
.treat-group-header.open .tgh-arrow { transform: rotate(180deg); color: var(--c-gold); }
.treat-group-body {
  display: none;
  border: 1px solid var(--c-gold); border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 4px 0 8px;
  margin-bottom: 10px;
  background: var(--c-white);
}
.treat-group-body.open { display: block; }
.treat-group + .treat-group { margin-top: 6px; }

/* ─── RESPONSIVE ─── */
@media (max-width: 980px) {
  .about-inner    { grid-template-columns: 1fr; gap: 48px; }
  .about-img-wrap { max-width: 400px; }
  .treat-grid     { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
  .treat-cards    { grid-template-columns: 1fr; }
  .wide-card      { grid-column: span 1; }
  .price-grid     { grid-template-columns: 1fr; }
  .contact-grid   { grid-template-columns: 1fr; }
  .footer-inner   { grid-template-columns: 1fr 1fr; }
  .cal-time-grid  { grid-template-columns: 1fr; }
  .steps          { gap: 12px; }
  .step-arrow     { display: none; }
}
@media (max-width: 680px) {
  .nav-menu {
    display:none; flex-direction: column; position: fixed;
    inset: 0; background: #141210;
    align-items: center; justify-content: center; gap: 28px;
    z-index: 950;
    overflow-y: auto; padding: 80px 24px 40px;
  }
  .nav-menu a { color: #fff !important; }
  #nav.scrolled .nav-menu.open a { color: #fff !important; }
  .burger { z-index: 960; position: relative; }
  .burger.open span { background: #fff !important; }
  .nav-menu.open { display: flex; }
  .nav-menu a { font-size: 1.1rem; }
  .burger { display: flex; }
  .contact-items.breed { grid-template-columns: 1fr; gap: 20px; }
  .strip-div  { display: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-fade { background: rgba(20,18,16,.72); }
  .form-row { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .book-box { padding: 24px 18px; }
  .step-btns { flex-direction: column-reverse; }
  .step-btns .btn-back, .step-btns .btn-fill { width: 100%; text-align: center; }
  .gallery-slide { flex: 0 0 calc(50% - 7px); height: 240px; }
  .gallery-prev { left: -12px; }
  .gallery-next { right: -12px; }
  .price-grid { grid-template-columns: 1fr; }
  .about-badge { right: 8px; bottom: -8px; width: 76px; height: 76px; }
  .about-badge strong { font-size: 1.1rem; }
  .about-stat-row { flex-wrap: wrap; }
  .about-stat { min-width: 33%; }
  .container { padding: 0 18px; }
  .nav-inner { padding: 0 18px; }
  .hero-content { padding-left: 18px; padding-right: 18px; }
  .section { padding: 72px 0; }
  .about, .treatments, .method, .booking, .contact { padding: 72px 0; }
  .book-box { border-radius: 14px; }
  .treat-cards { grid-template-columns: 1fr; }
}

/* ── PAGE HERO ── */
.page-hero {
  background: var(--c-bg2);
  border-bottom: 1px solid var(--c-border);
  padding: 120px 0 56px;
  text-align: center;
}
.page-hero .label { display: block; margin-bottom: 12px; }
.page-hero h1 { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif; font-size: clamp(2.2rem,5vw,3.4rem); font-weight: 400; margin-bottom: 16px; }
.page-hero p { color: var(--c-muted); font-size: 1.05rem; max-width: 560px; margin: 0 auto; }

/* ── NAV ACTIVE ── */
.nav-active { color: var(--c-gold) !important; }

/* ── CATEGORY OVERVIEW TILES (homepage) ── */
.cat-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.cat-tile {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: 14px; padding: 28px 24px; text-decoration: none;
  color: var(--c-text); transition: all .22s; gap: 10px;
}
.cat-tile:hover { border-color: var(--c-gold); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.07); }
.cat-tile-icon { font-size: 1.3rem; margin-bottom: 4px; }
.cat-tile h3 { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif; font-size: 1.5rem; font-weight: 500; color: var(--c-dark); }
.cat-tile p { font-size: .85rem; color: var(--c-muted); line-height: 1.55; flex: 1; }
.cat-tile-link { font-size: .8rem; font-weight: 600; color: var(--c-gold); letter-spacing: .04em; margin-top: 4px; }
.cat-tile p { overflow-wrap: break-word; hyphens: auto; }

/* Bewust ná de basisregel hierboven. Stond dit in het algemene gsm-blok
   verderop in het bestand, dan won de basisregel (4 kolommen) en vielen
   twee kaartjes buiten het scherm, zonder dat je kon scrollen.
   minmax(0, 1fr) houdt beide kolommen even breed, ook bij een lang woord. */
@media (max-width: 980px) {
  .cat-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .cat-overview { gap: 12px; margin-top: 32px; }
  .cat-tile { padding: 20px 16px; }
  .cat-tile h3 { font-size: 1.35rem; }
}

/* ── CTA BANNER ── */
/* ─── REVIEWS ─── */
.reviews-section { padding: 90px 0; background: var(--c-bg2); }
.reviews-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.review-card {
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: 14px; padding: 24px 22px; box-shadow: var(--sh);
  display: flex; flex-direction: column;
}
.review-sterren { color: var(--c-gold); font-size: 1rem; letter-spacing: 2px; margin-bottom: 10px; }
.review-tekst { color: var(--c-text); font-size: .94rem; line-height: 1.7; flex: 1; }
.review-tekst.leeg { color: var(--c-muted); font-style: italic; }
.review-voet {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-border);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.review-naam { font-weight: 600; font-size: .88rem; color: var(--c-dark); }
.review-meta { color: var(--c-muted); font-size: .78rem; text-align: right; }

.cta-banner { background: var(--c-dark); padding: 64px 0; }
.cta-banner-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
}
.cta-banner h2 { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif; font-size: 2rem; font-weight: 400; color: var(--c-white); margin-bottom: 8px; }
.cta-banner p { color: rgba(255,255,255,.65); font-size: .95rem; }
.btn-lg { padding: 16px 40px; font-size: 1rem; white-space: nowrap; }
@media (max-width: 680px) {
  .cta-banner-inner { flex-direction: column; gap: 20px; text-align: center; }
}

/* ── LOGO IMAGE ── */
a.logo-img-wrap {
  display: block !important;  /* simpel block, geen flex column */
  width: auto !important;
  height: auto !important;
  line-height: 0;             /* geen extra witruimte onder inline img */
}
.nav-logo-img {
  display: block;
  height: 46px;               /* vaste hoogte */
  width: auto;                /* breedte automatisch → GEEN uitrekken */
  max-width: 220px;
  filter: brightness(0) invert(1);   /* zwart logo → wit op donkere nav */
  transition: filter .3s;
}
#nav.scrolled .nav-logo-img {
  filter: brightness(0);             /* wit nav na scroll → logo wordt zwart */
}
.footer-logo-img {
  display: block;
  height: 54px;
  width: auto;
  max-width: 240px;
  filter: brightness(0) invert(1);   /* zwart logo → wit op donkere footer */
  margin-bottom: 14px;
}
@media (max-width: 680px) {
  .nav-logo-img { height: 34px; max-width: 160px; }
}

/* ── NEWS / BLOG ── */
.news-section { padding: 90px 0; background: var(--c-white); }
.news-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.news-card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.news-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.news-img { height: 200px; background-size: cover; background-position: center; }
.news-body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.news-tag { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gold-dk); }
.news-body h3 { font-size: 1.15rem; color: var(--c-dark); line-height: 1.3; }
.news-body p { color: var(--c-muted); font-size: .86rem; line-height: 1.55; flex: 1; }
.news-link { font-size: .82rem; font-weight: 600; color: var(--c-gold-dk); margin-top: 8px; }
@media (max-width: 980px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .news-grid { grid-template-columns: 1fr; } }

/* ── SCROLL ANIMATIONS ── */
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-left { opacity: 0; transform: translateX(-30px); transition: opacity .7s ease, transform .7s ease; }
.fade-left.visible { opacity: 1; transform: translateX(0); }
.fade-right { opacity: 0; transform: translateX(30px); transition: opacity .7s ease, transform .7s ease; }
.fade-right.visible { opacity: 1; transform: translateX(0); }
.stagger-1 { transition-delay: .1s; }
.stagger-2 { transition-delay: .2s; }
.stagger-3 { transition-delay: .3s; }
.stagger-4 { transition-delay: .4s; }

/* ── COUNTER ANIMATION ── */
.count-num { display: inline-block; }

/* ── HERO PARALLAX ── */
.hero-bg { will-change: transform; }
/* Op een telefoon volstaat 800 px breed voor de herofoto (41 KB i.p.v. 93 KB): sneller LCP. */
@media (max-width: 768px) { .hero-bg { background-image: url('/images/prp-treatment-800.webp') !important; } }

/* ── FLOATING SHAPES ── */
@keyframes float1 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-12px) rotate(3deg)} }
@keyframes float2 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-8px) rotate(-2deg)} }
.hero-shape { position: absolute; border-radius: 50%; opacity: .07; pointer-events: none; }
.hero-shape-1 { width: 300px; height: 300px; background: var(--c-gold); top: 10%; right: 8%; animation: float1 6s ease-in-out infinite; }
.hero-shape-2 { width: 180px; height: 180px; background: var(--c-gold2); bottom: 15%; right: 20%; animation: float2 8s ease-in-out infinite; }

/* ── TCARD ANIMATIONS ── */
.tcard { animation: none; }
.treat-cards .tcard { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease, box-shadow .22s, border-color .22s; }
.treat-cards .tcard.visible { opacity: 1; transform: translateY(0); }

/* ── STRIP COUNTER ── */
@keyframes pulse-gold { 0%,100%{box-shadow:0 0 0 0 rgba(184,150,90,.3)} 50%{box-shadow:0 0 0 8px rgba(184,150,90,0)} }
.nav-book { animation: pulse-gold 3s ease-in-out infinite; }

/* ── SECTION REVEAL ── */
.sec-head { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.sec-head.visible { opacity: 1; transform: translateY(0); }

/* ── AIO / ACCESSIBILITY ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ── BLOG PAGE STYLES ── */
.blog-hero { background: var(--c-bg2); border-bottom: 1px solid var(--c-border); padding: 120px 0 56px; text-align: center; }
.blog-hero .label { display: block; margin-bottom: 12px; }
.blog-hero h1 { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif; font-size: clamp(2rem,5vw,3.2rem); font-weight: 400; margin-bottom: 16px; }
.blog-hero p { color: var(--c-muted); font-size: 1rem; max-width: 600px; margin: 0 auto; }
.blog-meta { display: flex; gap: 20px; justify-content: center; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.blog-meta span { font-size: .8rem; color: var(--c-muted); }
.blog-meta .tag { background: var(--c-gold-dk); color: #fff; padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.blog-content { max-width: 780px; margin: 0 auto; padding: 60px 28px 80px; }
.blog-content h2 { font-size: 1.9rem; margin: 48px 0 16px; color: var(--c-dark); }
.blog-content h3 { font-size: 1.4rem; margin: 32px 0 12px; color: var(--c-dark); }
.blog-content p a { color: var(--c-gold-dk); text-decoration: underline; text-underline-offset: 2px; }
.blog-content p { margin-bottom: 20px; line-height: 1.75; color: var(--c-text); }
.blog-content ul, .blog-content ol { margin: 0 0 20px 24px; }
.blog-content li { margin-bottom: 8px; line-height: 1.65; }
.blog-content .featured-img { width: 100%; border-radius: 16px; margin: 32px 0; object-fit: cover; height: 420px; }
.blog-cta { background: var(--c-dark); border-radius: 20px; padding: 40px; text-align: center; margin: 48px 0; }
.blog-cta h3 { color: var(--c-white); font-size: 1.6rem; margin-bottom: 12px; }
.blog-cta p { color: rgba(255,255,255,.7); margin-bottom: 24px; }
.faq-section { background: var(--c-bg2); border-radius: 16px; padding: 40px; margin: 48px 0; }
.faq-section h2 { margin-bottom: 28px; }
.faq-item { border-bottom: 1px solid var(--c-border); padding: 20px 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { font-size: 1.05rem; font-family: 'Inter', 'Inter Fallback', sans-serif; font-weight: 600; color: var(--c-dark); margin-bottom: 8px; }
.faq-item p { color: var(--c-muted); font-size: .9rem; margin: 0; }
.blog-back { display: inline-flex; align-items: center; gap: 6px; color: var(--c-gold-dk); font-size: .85rem; font-weight: 600; margin-bottom: 32px; }
.blog-overview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 48px; }
@media (max-width: 900px) { .blog-overview-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-overview-grid { grid-template-columns: 1fr; } .blog-content .featured-img { height: 240px; } }

/* ─── JURIDISCHE PAGINA'S ─── */
.legal-body { max-width: 760px; margin: 0 auto; padding: 64px 24px 88px; }
.legal-body h2 {
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif; font-weight: 500;
  font-size: 1.6rem; color: var(--c-dark);
  margin: 44px 0 14px; padding-top: 22px; border-top: 1px solid var(--c-border);
}
.legal-body h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal-body h3 { font-size: 1rem; font-weight: 600; color: var(--c-dark); margin: 26px 0 8px; }
.legal-body p, .legal-body li { color: var(--c-text); font-size: .95rem; line-height: 1.75; }
.legal-body p { margin-bottom: 14px; }
.legal-body ul { margin: 0 0 16px 0; padding-left: 22px; }
.legal-body li { margin-bottom: 7px; }
.legal-body a { color: var(--c-gold); }
.legal-body strong { color: var(--c-dark); }
.legal-updated { font-size: .82rem; color: var(--c-muted); margin-bottom: 40px; }

.legal-card {
  background: #fdf8f0; border: 1px solid rgba(184,150,90,.28);
  border-radius: var(--r); padding: 22px 26px; margin: 0 0 34px;
}
.legal-card dl { display: grid; grid-template-columns: 190px 1fr; gap: 9px 18px; margin: 0; }
.legal-card dt { font-size: .82rem; color: var(--c-muted); }
.legal-card dd { margin: 0; font-size: .9rem; color: var(--c-dark); font-weight: 500; }

.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: .88rem; }
.legal-table th {
  text-align: left; padding: 10px 12px; background: #f4f1eb;
  border: 1px solid var(--c-border); color: var(--c-dark);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.legal-table td { padding: 10px 12px; border: 1px solid var(--c-border); vertical-align: top; color: var(--c-text); }
.legal-scroll { overflow-x: auto; }

@media (max-width: 680px) {
  .legal-body { padding: 40px 18px 64px; }
  .legal-card { padding: 18px; }
  .legal-card dl { grid-template-columns: 1fr; gap: 2px; }
  .legal-card dd { margin-bottom: 10px; }
}

/* ─── GOOGLE MAPS: pas laden na toestemming ─── */
.map-consent {
  min-height: 420px; height: 100%;
  border: 1px solid var(--c-border); border-radius: 12px;
  background: var(--c-bg2);
  display: flex; align-items: center; justify-content: center;
  padding: 32px 24px;
}
.map-consent-inner { text-align: center; max-width: 320px; }
.map-consent-pin { font-size: 2rem; margin-bottom: 12px; }
.map-consent-inner strong { display: block; color: var(--c-dark); font-size: .98rem; margin-bottom: 10px; }
.map-consent-inner p { color: var(--c-muted); font-size: .83rem; line-height: 1.6; margin-bottom: 20px; }
.map-consent-inner p a { color: var(--c-gold); }
.map-consent-alt { display: block; margin-top: 14px; font-size: .82rem; color: var(--c-muted); }
.map-consent-alt:hover { color: var(--c-gold); }


/* Pagina vastzetten zolang het mobiele menu openstaat */
body.menu-open { overflow: hidden; }

/* Een backdrop-filter maakt van #nav het kader voor alles wat erin
   position:fixed staat. Het menu (inset:0) werd daardoor zo hoog als de
   balk, ±120 px, in plaats van het hele scherm: je zag enkel "Over ons" en
   "Contact". Op subpagina's staat .scrolled altijd aan, dus daar gebeurde
   het telkens. Zonder filter is het venster weer het kader. */
body.menu-open #nav,
body.menu-open #nav.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Inlogknop naast de burger op gsm */
.nav-inlog { display: none; }
@media (max-width: 680px) {
  .nav-inlog {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: auto; margin-right: 12px;
    padding: 7px 15px; border-radius: 50px;
    background: var(--c-gold-dk); color: #fff;
    font-size: .8rem; font-weight: 600; white-space: nowrap;
  }
  .nav-inlog:hover { background: var(--c-gold-dk); }
}

/* Over ons: wie u behandelt */
.behandelaar { padding: 96px 0; background: var(--c-white); }
.behandelaar-inner { max-width: 1160px; margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 440px 1fr; gap: 64px; align-items: start; }
.behandelaar-foto { margin: 0; }
.behandelaar-foto img { width: 100%; height: auto; display: block; border-radius: 4px; }
.behandelaar-tekst h2 { margin: 10px 0 18px; }
.behandelaar-tekst p { margin-bottom: 14px; }
.certificaten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.certificaten img { width: 100%; height: auto; display: block; border-radius: 4px; border: 1px solid var(--c-border); }
@media (max-width: 980px) {
  .behandelaar { padding: 64px 0; }
  .behandelaar-inner { grid-template-columns: 1fr; gap: 36px; }
  .behandelaar-foto { max-width: 400px; }
}
@media (max-width: 680px) { .certificaten { grid-template-columns: 1fr; } }