/* Zenine — thema L3 "Lotus en goud": wit doek, zwart en logogoud, in de bewegingstaal van bodyclinic.nl */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/poppins-300.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins Fallback'; src: local('Arial'); ascent-override: 93.6%; descent-override: 31.2%; line-gap-override: 8.9%; size-adjust: 112.2%; }

:root {
  --ink: #070b0b;
  --ink-2: #1e2323;
  --muted: #545a5a;
  --line: rgba(7, 11, 11, .1);
  --line-strong: #c9cdcd;
  --white: #fff;
  --sand: #fff;
  --stone: #f3f4f3;
  --gold: #f0cb82; /* logogoud, overal dezelfde tint */
  --gold-deep: var(--gold); /* Niek, 15 sep 2026: ook op wit het logogoud */
  --gold-soft: #fbf0da;
  --grad: #fff;
  --grad-diag: #fff;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;
  --ease: cubic-bezier(.625, .05, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(16px, 4vw, 40px);
  --max: 1296px;
  --offset: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  --topbar-h: 36px;
  --nav-h: 84px;
  --header-h: calc(var(--topbar-h) + var(--nav-h));
  --shadow: 0 18px 40px -18px rgba(13, 12, 11, .28), 0 2px 6px rgba(13, 12, 11, .05);
  color-scheme: light;
  interpolate-size: allow-keywords;
}
@media (max-width: 899px) { :root { --topbar-h: 0px; --nav-h: 68px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--white); color: var(--ink-2);
  font: 400 17px/1.65 'Poppins', 'Poppins Fallback', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 6px; }
.footer :focus-visible, .cta :focus-visible, .hero :focus-visible, .grow :focus-visible { outline-color: var(--gold); }
html { scrollbar-color: var(--gold) transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; transition: top .3s var(--ease); }
.skip:focus { top: 12px; }

.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.container--narrow { max-width: 920px; }
.container--mid { max-width: 1040px; }

/* ---------- typografie ---------- */
.kop { font-weight: 300; font-size: clamp(2rem, 1.35rem + 2.2vw, 3rem); line-height: 1.12; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.kop b, .hero__title b, .step__text h3 b { font-weight: 500; }
.kop--m { font-size: clamp(1.65rem, 1.2rem + 1.4vw, 2.3rem); }
.kop--xl { font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.4rem); line-height: 1.05; letter-spacing: -.035em; }
.kop--licht { color: #fff; }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; background-origin: content-box; padding-block: 8px; font-weight: 500; color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 100% 1px no-repeat; transition: background-size .6s var(--ease); }
.link-arrow .icon { width: 1em; height: 1em; transition: transform .6s var(--ease); }
.link-arrow:hover { background-size: 0 1px; background-position: 100% calc(100% - 8px); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ---------- knoppen ---------- */
.btn {
  --bg: var(--ink); --fg: #fff; --fill: var(--gold); --fg-hover: var(--ink); --border: transparent;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 20px 0 26px; border-radius: 999px;
  background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 1px var(--border);
  font-weight: 500; font-size: 1rem; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: color .6s var(--ease), box-shadow .6s var(--ease), transform .2s ease;
}
.btn__fill { position: absolute; inset: 0; z-index: -1; background: var(--fill); clip-path: circle(0% at 50% 50%); transition: clip-path .6s var(--ease); }
.btn__icon { width: 18px; height: 18px; transition: transform .6s var(--ease); }
.btn:hover { color: var(--fg-hover); }
.btn:hover .btn__fill { clip-path: circle(75% at 50% 50%); }
.btn:hover .btn__icon { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn--gold { --bg: var(--gold); --fg: var(--ink); --fill: #fff; --fg-hover: var(--ink); }
.btn--ghost { --bg: transparent; --fg: #fff; --border: rgba(255, 255, 255, .55); --fill: #fff; --fg-hover: var(--ink); }
.btn--ghost-dark { --bg: transparent; --fg: var(--ink); --border: var(--ink); --fill: var(--ink); --fg-hover: #fff; }
.btn--nav { min-height: 46px; padding: 0 16px 0 20px; font-size: .95rem; }

.circle-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .6s var(--ease), color .6s var(--ease), opacity .4s, box-shadow .6s var(--ease); text-decoration: none; }
.circle-btn .icon { width: 20px; height: 20px; }
.circle-btn:hover { background: var(--ink); color: var(--gold); }
.circle-btn--dark { background: var(--ink); color: #fff; box-shadow: none; }
.circle-btn--dark:hover { background: var(--gold); color: var(--ink); }
.circle-btn--line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.circle-btn--line:hover { background: var(--gold); color: var(--ink); box-shadow: none; }
.circle-btn:disabled { opacity: .35; cursor: default; background: var(--white); color: var(--ink); }
.circle-btn--dark:disabled { background: var(--ink); color: #fff; }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; transition: transform .6s var(--ease); }
.site-header.is-scrolled { transform: translateY(calc(-1 * var(--topbar-h))); }
.site-header.is-hidden { transform: translateY(calc(-1 * var(--header-h))); }
.topbar { height: var(--topbar-h); overflow: hidden; background: var(--white); font-size: .84rem; color: var(--muted); }
.topbar__inner { height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topbar span { display: inline-flex; align-items: center; gap: 8px; }
.topbar .icon { width: 16px; height: 16px; color: var(--gold-deep); }
.topbar__links { gap: 24px !important; }
.topbar__links a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.topbar__links a:hover { color: var(--ink); text-decoration: underline; }

.nav-shell { position: relative; background: var(--white); transition: background-color .6s var(--ease), box-shadow .6s var(--ease); }
.is-scrolled .nav-shell { box-shadow: 0 1px 0 var(--line), 0 12px 30px -24px rgba(13, 12, 11, .35); }
.nav { height: var(--nav-h); display: flex; align-items: center; gap: 12px; }
.nav__logo { display: block; margin-right: auto; }
.logo { height: 56px; width: auto; }
.logo--licht { display: none; }
.nav__menu { display: flex; align-items: center; gap: 4px; margin-right: 12px; }
.nav__link { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: 999px; font-weight: 500; font-size: .96rem; color: var(--ink); text-decoration: none; transition: background-color .4s var(--ease), color .6s var(--ease); }
.nav__link .icon { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.nav__link:hover { background: rgba(13, 12, 11, .06); }
.has-mega.is-open .nav__link .icon { transform: rotate(180deg); }
.nav__burger { display: none; width: 48px; height: 48px; border-radius: 50%; background: var(--sand); position: relative; }
.nav__burger span { position: absolute; left: 15px; right: 15px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .5s var(--ease), background-color .5s; }
.nav__burger span:first-child { top: 20px; }
.nav__burger span:last-child { top: 27px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* over een donkere hero, zolang er nog niet gescrold is */
.site-header--over:not(.is-scrolled):not(.menu-is-open) .nav-shell { background: transparent; }
.site-header--over:not(.is-scrolled):not(.menu-is-open) .logo--licht { display: block; }
.site-header--over:not(.is-scrolled):not(.menu-is-open) .logo--donker { display: none; }
.site-header--over:not(.is-scrolled):not(.menu-is-open) .nav__link { color: #fff; }
.site-header--over:not(.is-scrolled):not(.menu-is-open) .nav__link:hover { background: rgba(255, 255, 255, .14); }
.site-header--over:not(.is-scrolled):not(.menu-is-open) .btn--nav { --bg: rgba(255, 255, 255, .1); --fg: #fff; --border: rgba(255, 255, 255, .45); --fill: var(--gold); --fg-hover: var(--ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header--over:not(.is-scrolled):not(.menu-is-open) .nav__burger { background: rgba(255, 255, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header--over:not(.is-scrolled):not(.menu-is-open) .nav__burger span { background: #fff; }
.site-header--over .nav-shell { margin-inline: 8px; border-radius: 0; }
.site-header--over.is-scrolled .nav-shell, .site-header--over.menu-is-open .nav-shell { margin-inline: 0; }

.mega { position: absolute; top: 100%; left: 0; right: 0; padding-top: 6px; visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity .4s var(--ease), transform .6s var(--ease), visibility 0s linear .4s; }
.has-mega.is-open .mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.mega__inner { max-width: calc(var(--max) - 2 * var(--pad)); margin-inline: auto; display: grid; grid-template-columns: 1fr 300px; gap: 20px; padding: 20px; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.mega__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; align-content: start; }
.mega__list a { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; text-decoration: none; font-weight: 500; color: var(--ink); transition: background-color .4s var(--ease); }
.mega__list a:hover { background: var(--sand); }
.mega__icon, .row__icon, .iconrow__icon { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--sand); color: var(--gold-deep); }
.mega__icon .icon, .row__icon .icon { width: 24px; height: 24px; }
.mega__card { position: relative; display: block; min-height: 230px; border-radius: var(--r-md); overflow: hidden; color: #fff; text-decoration: none; }
.mega__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mega__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(13, 12, 11, .72)); }
.mega__card span { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px; display: block; font-size: 1.2rem; font-weight: 300; line-height: 1.25; }
.mega__card span .icon { width: 18px; height: 18px; vertical-align: -3px; }
.mega__card b { font-weight: 500; }
.mega__card:hover img { transform: scale(1.06); }

.menu { position: fixed; inset: var(--header-h) 0 0; z-index: 40; background: var(--white); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(-12px); transition: opacity .4s var(--ease), transform .6s var(--ease); }
.menu.is-open { opacity: 1; transform: none; }
.menu__inner { padding: 12px var(--pad) 40px; }
.menu__label { font-size: .85rem; color: var(--muted); margin: 8px 0 4px; }
.menu__list li { border-bottom: 1px solid var(--line); }
.menu__list a { display: flex; align-items: center; gap: 14px; min-height: 64px; font-size: 1.12rem; font-weight: 500; color: var(--ink); text-decoration: none; }
.menu__list a > .icon:last-child { margin-left: auto; width: 18px; height: 18px; color: var(--muted); }
.menu__list--plain { margin-top: 12px; }
.menu__foot { display: grid; gap: 12px; margin-top: 28px; }
.menu__foot .btn { width: 100%; }
.menu__tel { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; text-decoration: none; color: var(--ink); }
.menu.is-open .menu__list li { animation: menuIn .6s var(--ease-out) both; }
.menu.is-open .menu__list li:nth-child(2) { animation-delay: .03s; } .menu.is-open .menu__list li:nth-child(3) { animation-delay: .06s; }
.menu.is-open .menu__list li:nth-child(4) { animation-delay: .09s; } .menu.is-open .menu__list li:nth-child(5) { animation-delay: .12s; }
.menu.is-open .menu__list li:nth-child(6) { animation-delay: .15s; }
@keyframes menuIn { from { opacity: 0; transform: translateY(12px); } }
body.scrolled .menu { top: var(--nav-h); } /* topbar is dan weggeschoven */
body.menu-open { overflow: hidden; }

@media (max-width: 1099px) {
  .nav__menu { display: none; }
  .nav__burger { display: block; }
}
@media (max-width: 899px) {
  .logo { height: 44px; }
  .btn--nav { min-height: 44px; padding: 0 14px 0 16px; font-size: .9rem; }
  .btn--nav .btn__icon { display: none; }
}
@media (max-width: 359px) { .btn--nav { display: none; } }

/* ---------- hero ---------- */
body:not(.donker-hero) main { padding-top: var(--header-h); }
.hero { position: relative; padding: var(--topbar-h) 8px 0; }
.hero__wrap { --hp: 0; position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--ink); color: #fff; min-height: 560px; height: calc(100svh - var(--topbar-h) - 8px); max-height: 980px; transform: scale(calc(1 - var(--hp) * .045)); transform-origin: 50% 0; will-change: transform; }
.hero__media, .hero__slide { position: absolute; inset: 0; }
.hero__slide { opacity: 0; transition: opacity 1.4s ease; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img, .hero__slide video { width: 100%; height: 100%; object-fit: cover; }
/* alleen foto's zoomen in; een schalende video over het hele scherm kost te veel rekenkracht en laat hem haperen */
.hero__slide img { transform: scale(1.08); transition: transform 8s linear; }
.hero__slide.is-active img { transform: scale(1); }
.hero__media { transform: translateY(calc(var(--hp) * 60px)); }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 9, 8, .82) 0%, rgba(10, 9, 8, .45) 38%, rgba(10, 9, 8, .08) 64%, rgba(10, 9, 8, .5) 100%); }
.hero__content { position: absolute; inset: auto 0 0; padding-bottom: clamp(32px, 6vw, 72px); }
.hero__title { max-width: 14ch; font-weight: 300; font-size: clamp(2.35rem, 1.3rem + 4.2vw, 4.8rem); line-height: 1.02; letter-spacing: -.04em; color: #fff; text-wrap: balance; }
.hero__title span { display: block; }
.hero__title--sub { max-width: 16ch; font-size: clamp(2.2rem, 1.3rem + 2.3vw, 3.4rem); }
.hero__lead { max-width: 36rem; margin-top: 18px; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: rgba(255, 255, 255, .88); }
.hero__price { margin-top: 14px; font-size: 1.15rem; font-weight: 500; color: var(--gold); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.hero__actions--center { justify-content: center; }
.hero__open { font-size: .92rem; color: rgba(255, 255, 255, .78); padding-left: 6px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 22px; font-size: .88rem; color: rgba(255, 255, 255, .72); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs .icon { width: 14px; height: 14px; opacity: .7; }
.crumbs span[aria-current] { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.crumbs--dark { color: var(--muted); }
.crumbs--dark a:hover, .crumbs--dark span[aria-current] { color: var(--ink); }


.hero--sub .hero__wrap { height: auto; min-height: clamp(600px, 42vw, 760px); max-height: none; display: flex; flex-direction: column; justify-content: flex-end; }
.hero--sub .hero__content { position: relative; padding-top: calc(var(--nav-h) + 24px); } /* in de flow: een lange titel (T-away) maakt de hero hoger in plaats van onder logo en menu te schuiven */ /* lage, brede hero zoals bodyclinic; de sfeerfoto's zijn 2,5:1 met het onderwerp rond 58% */
@media (max-width: 899px) {
  .hero__slide[style*="--pos-m"] img { object-position: var(--pos-m) 50% !important; }
  /* sfeerfoto alleen in het bovenste deel: anders valt de glimlach of het gezicht achter kruimelpad en titel */
  .hero--sub .hero__media:has(.hero__slide[style*="--pos-m"]) { bottom: 32%; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
}
@media (min-width: 600px) and (max-width: 899px) { .hero__slide[style*="--pos-m"] img { object-position: calc(var(--pos-m) + 4%) 50% !important; } } /* tablet: bredere uitsnede, gezicht anders te ver rechts */
.hero--sub .hero__content { padding-right: max(var(--pad), calc(480px + var(--pad) - var(--offset))); } /* facts-paneel (400px + 40px rand) plus 40px lucht; --offset niet dubbel tellen, anders wordt de kolom op brede schermen smal */
.facts-wrap { position: absolute; right: 8px; bottom: 0; width: auto; max-width: none; padding: 0 clamp(16px, 2.5vw, 32px) clamp(24px, 3vw, 40px) 0; z-index: 2; pointer-events: none; }
.facts { pointer-events: auto; width: 400px; padding: 10px 24px; border-radius: 20px; background: rgba(13, 12, 11, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); color: #fff; }
.facts div { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; padding: 12px 0; font-size: .92rem; line-height: 1.45; }
.facts div + div { border-top: 1px solid rgba(255, 255, 255, .14); }
.facts dt { color: var(--gold); }
@media (max-width: 1099px) {
  .hero--sub .hero__content { padding-right: var(--pad); }
  .facts-wrap { position: static; padding: 8px 0 0; pointer-events: auto; }
  .facts { width: 100%; background: var(--white); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .facts div + div { border-top-color: var(--line); }
  .facts dt { color: var(--muted); }
  .facts dd { font-weight: 500; color: var(--ink); }
}
@media (min-width: 700px) and (max-width: 1099px) { .facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; } .facts div:nth-child(2) { border-top: 0; } }
@media (max-width: 899px) {
  .hero { padding-top: 8px; }
  .hero__wrap { height: calc(100svh - 16px); min-height: 600px; max-height: 900px; }
  .hero--sub .hero__wrap { min-height: clamp(600px, calc(100svh - 16px), 900px); }
  .hero__content { padding-top: calc(var(--nav-h) + 24px); }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero--sub .hero__open { display: none; }
}
@media (max-width: 420px) { .hero__actions .btn { width: 100%; } }


/* ---------- secties ---------- */
.section { padding-block: clamp(32px, 4vw, 56px); }
.section--tight { padding-block: clamp(32px, 4vw, 56px); } /* 17 sep 2026: zelfde ritme als .section */
.section--sand { margin-inline: 8px; border-radius: var(--r-lg); background: var(--grad); }
.section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p { max-width: 40rem; margin-top: 14px; color: var(--muted); }
.section-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.section-head--center { text-align: center; }
.section-head--center p { margin-inline: auto; }

.iconrow { padding: 20px 0 clamp(32px, 4vw, 56px); }
.iconrow__list { display: flex; justify-content: center; gap: clamp(8px, 3vw, 48px); overflow-x: auto; scrollbar-width: none; }
.iconrow__list::-webkit-scrollbar { display: none; }
.iconrow a { display: grid; justify-items: center; gap: 10px; min-width: 96px; padding: 8px 4px; text-align: center; font-size: .9rem; color: var(--ink-2); text-decoration: none; }
.iconrow__icon { width: 60px; height: 60px; transition: background-color .6s var(--ease), color .6s var(--ease), transform .6s var(--ease); }
.iconrow__icon .icon { width: 30px; height: 30px; }
.iconrow a:hover .iconrow__icon { background: var(--ink); color: var(--gold); transform: translateY(-3px); }
@media (max-width: 899px) { .iconrow__list { justify-content: flex-start; padding-inline: var(--pad); } }

.statement-section { padding-block: clamp(64px, 9vw, 128px) clamp(24px, 4vw, 56px); }
.statement { font-weight: 300; font-size: clamp(1.55rem, 1.05rem + 2.1vw, 2.65rem); line-height: 1.32; letter-spacing: -.022em; color: var(--ink); text-wrap: pretty; }
.statement em { font-style: normal; font-weight: 400; color: var(--gold-deep); }
.statement .w { transition: opacity .25s linear; }
.statement__ine { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.statement__ine small { display: block; font-weight: 400; font-size: .88rem; color: var(--muted); }
.avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }

/* behandelkaarten */
.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tcard { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; color: #fff; text-decoration: none; background: var(--ink); }
.tcard__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; }
.tcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
/* tekst onder de foto in plaats van erover: voor/na-foto's blijven helemaal zichtbaar */
.tcard:hover .tcard__img img { transform: scale(1.06); }
.tcard__price { position: absolute; z-index: 1; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(13, 12, 11, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .85rem; font-weight: 500; color: var(--gold); }
.tcard__body { position: relative; flex: 1; padding: 20px 24px 24px; display: grid; align-content: start; gap: 6px; }
.tcard__title { display: flex; align-items: center; gap: 6px; font-size: clamp(1.35rem, 1.1rem + .7vw, 1.7rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.15; }
.tcard__title .icon { width: 22px; height: 22px; transition: transform .6s var(--ease); }
.tcard:hover .tcard__title .icon { transform: translateX(4px); }
.tcard__text { font-size: .95rem; color: rgba(255, 255, 255, .86); line-height: 1.45; }
@media (max-width: 999px) { .tcards { grid-template-columns: repeat(2, 1fr); } .tcard--cta { grid-column: 1 / -1; } }
@media (max-width: 639px) {
  .tcards { grid-template-columns: 1fr; gap: 10px; }
  .tcard { aspect-ratio: auto; display: grid; grid-template-columns: 92px 1fr; grid-template-areas: 'img body' 'img price'; column-gap: 16px; align-items: center; padding: 10px; color: var(--ink); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-md); }
  .tcard::after { display: none; }
  .tcard__img { position: relative; grid-area: img; width: 92px; height: 92px; border-radius: 12px; overflow: hidden; align-self: start; }
  .tcard__body { position: static; grid-area: body; padding: 4px 0 0; gap: 2px; }
  .tcard__title { font-size: 1.12rem; font-weight: 500; }
  .tcard__text { color: var(--muted); font-size: .9rem; }
  .tcard__price { position: static; grid-area: price; justify-self: start; margin: 6px 0 4px; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--ink); font-weight: 500; font-size: .88rem; }
}

/* ---------- stappen (gepind) ---------- */
.steps { position: relative; margin-block: clamp(32px, 4vw, 56px); }
.steps__sticky { position: sticky; top: 0; height: 100svh; min-height: 640px; display: flex; flex-direction: column; overflow: hidden; padding-top: calc(var(--nav-h) + 24px); background: var(--grad-diag); margin-inline: 8px; border-radius: var(--r-lg); }
.steps__head { position: relative; z-index: 2; }
.steps__line { position: absolute; left: 0; top: 24%; width: 100%; height: 24%; z-index: 0; overflow: visible; }
.steps__path { fill: none; vector-effect: non-scaling-stroke; }
.steps__path--bg { stroke: rgba(13, 12, 11, .22); stroke-width: 1.2; stroke-dasharray: 3 7; }
.steps__path--fg { stroke: var(--gold-deep); stroke-width: 1.6; }
.steps__viewport { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; }
.steps__track { display: flex; gap: 10vw; padding-inline: var(--offset) 12vw; will-change: transform; }
.step { --rot: 0deg; flex: 0 0 min(780px, 68vw); display: grid; grid-template-columns: minmax(240px, 340px) 1fr; align-items: center; gap: clamp(24px, 3vw, 44px); }
.step__img { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); transform: rotate(var(--rot)); transition: transform .2s linear; background: var(--stone); }
.step__img img { display: block; width: 100%; height: auto; }
/* stap 03: het stapnummer valt over de lichte muur; een zacht donker verloop linksboven houdt het leesbaar */
.step__img:has(.step__img--wenkbrauw)::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 100% at 0% 0%, rgba(10, 9, 8, .55), rgba(10, 9, 8, .22) 38%, rgba(10, 9, 8, 0) 62%); }
.step__num { position: absolute; z-index: 1; top: 10px; left: 18px; font-size: clamp(3.5rem, 2.5rem + 3vw, 5.4rem); font-weight: 300; line-height: 1; letter-spacing: -.05em; color: rgba(255, 255, 255, .92); text-shadow: 0 2px 20px rgba(0, 0, 0, .25); }
.step__text h3 { font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.15; letter-spacing: -.025em; color: var(--ink); }
.step__text p { margin-top: 14px; max-width: 34ch; color: var(--muted); }
.steps__foot { position: relative; z-index: 2; display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding-bottom: 28px; }
.steps__counter { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 999px; background: var(--white); box-shadow: var(--shadow); font-size: .85rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.steps__counter span:last-child { color: var(--muted); }
.steps__counter i { position: relative; width: 44px; height: 1.5px; background: var(--line); overflow: hidden; }
.steps__counter b { position: absolute; inset: 0 auto 0 0; width: 25%; background: var(--ink); }
.steps__nav { display: none; }

@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .steps { height: auto !important; padding-block: 8px; }
  .steps__sticky { position: relative; height: auto; min-height: 0; padding-block: clamp(56px, 10vw, 88px) 24px; }
  .steps__line { display: none; }
  .steps__viewport { display: block; margin-top: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--offset); }
  .steps__viewport::-webkit-scrollbar { display: none; }
  .steps__track { gap: 12px; padding-inline: var(--offset); transform: none !important; width: max-content; }
  .step { flex: 0 0 min(340px, 80vw); grid-template-columns: 1fr; gap: 18px; align-items: start; scroll-snap-align: start; }
  .step__img { transform: none; }
  .step__text p { max-width: none; }
  .steps__foot { justify-content: space-between; padding-top: 24px; }
  .steps__counter { box-shadow: none; }
  .steps__nav { display: flex; }
}
/* ---------- groeiend beeld ---------- */
.grow { --g: 1; --gc: 1; position: relative; height: 230vh; margin-block: clamp(32px, 4vw, 56px); }
.js .grow { --g: 0; --gc: 0; }
.grow__sticky { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.grow__media { position: absolute; left: 50%; top: 50%; width: calc(30vw + (100vw - 16px - 30vw) * var(--g)); height: calc(42svh + (100svh - 16px - 42svh) * var(--g)); border-radius: calc(240px - 216px * var(--g)); overflow: hidden; transform: translate(-50%, -50%); background: var(--ink); }
.grow__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.25 - .25 * var(--g))); }
.grow__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 9, 8, .82), rgba(10, 9, 8, .25) 70%); opacity: calc(var(--g) * .95); }
.grow__content { position: relative; z-index: 1; display: grid; justify-items: start; gap: 18px; opacity: var(--gc); transform: translateY(calc((1 - var(--gc)) * 30px)); align-self: end; padding-bottom: clamp(48px, 8vw, 104px); }
.grow__content .kop { max-width: 16ch; font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); }
.grow__content p { max-width: 36rem; color: rgba(255, 255, 255, .86); font-size: 1.1rem; }
@media (max-width: 699px) { .grow__media { width: calc(58vw + (100vw - 16px - 58vw) * var(--g)); height: calc(34svh + (100svh - 16px - 34svh) * var(--g)); } }
@media (prefers-reduced-motion: reduce) {
  .grow, .js .grow { --g: 1; --gc: 1; height: auto; }
  .grow__sticky { position: relative; height: auto; min-height: 80svh; padding: 8px; }
}

/* ---------- carrousels ---------- */
.container-bleed { padding-inline: var(--offset); scroll-padding-inline: var(--offset); }
.carousel__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { flex-shrink: 0; scroll-snap-align: start; }
.carousel__bar { display: flex; align-items: center; gap: 24px; margin-top: 28px; }
.carousel__progress { position: relative; flex: 1; height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; }
.carousel__progress i { position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--ink); transition: transform .25s linear; }
.carousel__nav { display: flex; gap: 8px; }
.carousel.is-static .carousel__bar { display: none; }

/* voor en na */
.vn { --vn-w: min(580px, 88vw); width: var(--vn-w); display: flex; flex-direction: column; padding: 8px; border-radius: 22px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.vn__pair { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 6px; }
/* 18 sep 2026 (Niek): liggend paar (tanden) voor boven na, in een smallere kaart die precies zo hoog is als een vierkant paar;
   breedte = (hoogte vierkante foto - gat) / 2 * verhouding (--r uit de build) */
.vn--liggend { width: calc(((var(--vn-w) - 22px) / 2 - 6px) / 2 * var(--r) + 16px); }
.vn--liggend .vn__pair { grid-template-columns: 1fr; }
.vn--liggend .vn__tag { top: 6px; left: 6px; padding: 3px 9px; font-size: .72rem; }
@media (max-width: 599px) { .vn figcaption { font-size: .92rem; } .vn--liggend figcaption { padding-inline: 4px; } .vn--liggend figcaption a { white-space: normal; } }
/* 17 sep 2026 (Niek): resultaatfoto's nooit inzoomen - het vak volgt de verhouding van de foto */
.vn__half { position: relative; border-radius: 16px; overflow: hidden; background: var(--stone); }
.vn__half img { display: block; width: 100%; height: auto; }
.vn__tag { position: absolute; top: 10px; left: 10px; padding: 5px 12px; border-radius: 999px; background: rgba(13, 12, 11, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .8rem; font-weight: 500; }
.vn__tag--na { background: var(--gold); color: var(--ink); }
.vn__tag--vb { top: auto; left: auto; bottom: 10px; right: 10px; padding: 3px 9px; font-size: .7rem; }
.vn--liggend .vn__tag--vb { top: auto; left: auto; bottom: 6px; right: 6px; }
.vn figcaption { padding: 14px 10px 8px; font-weight: 500; color: var(--ink); }
.vn figcaption a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.vn figcaption a:hover { text-decoration: underline; }
.vn figcaption .icon { width: 18px; height: 18px; }

/* ontmoet Ine */
.meet { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 12px; }
.meet__img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 4; }
.meet__img img { width: 100%; height: 100%; object-fit: cover; }
.meet__card { display: grid; align-content: center; gap: 16px; padding: clamp(28px, 5vw, 72px); border-radius: var(--r-lg); background: var(--white); }
.meet__card p { max-width: 56ch; color: var(--muted); }
.meet__card .meet__rol { margin-top: -8px; color: var(--muted); font-weight: 500; }
.meet__card .link-arrow { justify-self: start; margin-top: 8px; }
@media (max-width: 799px) { .meet { grid-template-columns: 1fr; } .meet__img { aspect-ratio: 4 / 4.4; } }

/* reviews-collage */
.reviews { align-items: stretch; }
.rcol { height: clamp(360px, 32vw, 440px); border-radius: 20px; overflow: hidden; }
.rcol--img { width: clamp(260px, 26vw, 360px); }
.rcol--img img, .rcol--stack img { width: 100%; height: 100%; object-fit: cover; }
.rcol--stack { width: clamp(180px, 17vw, 240px); display: grid; grid-template-rows: 1fr 1fr; gap: 12px; overflow: visible; }
.rcol--stack img { border-radius: 20px; }
.rcol--quote { width: min(400px, 84vw); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 32px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.rcol--quote p { font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); }
.rcol--quote footer { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: center; padding-top: 18px; border-top: 1px solid var(--line); }
.rcol__foto { grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.rcol__naam, .rcol__over { grid-column: 2; }
.rcol__naam { align-self: end; }
.rcol__over { align-self: start; }
.rcol__naam { font-weight: 500; color: var(--ink); }
.rcol__over { font-size: .88rem; color: var(--gold-deep); }
.reviews-section { background: linear-gradient(180deg, var(--white), var(--sand)); }
@media (max-width: 699px) { .rcol--img { width: 70vw; } .rcol--stack { display: none; } .rcol { height: auto; min-height: 380px; } }

/* ---------- FAQ en accordeon ---------- */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 72px); padding: clamp(28px, 5vw, 80px); border-radius: var(--r-lg); background: var(--grad); }
.faq-section .container.faq { width: calc(100% - 16px); max-width: calc(var(--max) - 2 * var(--pad)); }
.faq__intro p { margin-top: 16px; color: var(--muted); max-width: 30ch; }
.faq__contact a { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ink); text-decoration: none; }
.faq__contact .icon { color: var(--gold-deep); }
.faq__list { display: grid; gap: 10px; align-content: start; }
.acc { border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 20px 16px 24px; font-weight: 500; color: var(--ink); cursor: pointer; list-style: none; line-height: 1.4; }
.acc summary::-webkit-details-marker { display: none; }
.acc__icon { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--ink); color: #fff; transition: transform .6s var(--ease), background-color .6s var(--ease); }
.acc__icon .icon { width: 18px; height: 18px; }
.acc[open] .acc__icon { transform: rotate(180deg); background: var(--gold); color: var(--ink); }
.acc summary:hover .acc__icon { background: var(--gold); color: var(--ink); }
.acc__body { padding: 0 24px 22px; color: var(--muted); }
.acc::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.acc[open]::details-content { block-size: auto; }
.acc__titel { display: flex; align-items: center; gap: 14px; }
.acc__titel small { display: block; margin-left: auto; padding-left: 12px; font-weight: 500; font-size: .88rem; color: var(--ink); }
.acc--prijs .acc__titel { flex: 1; }
.acc--prijs .acc__body table { margin-bottom: 18px; }
@media (max-width: 899px) { .faq { grid-template-columns: 1fr; } .faq__intro p { max-width: none; } }

/* ---------- CTA ---------- */
.cta { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px 40px; padding: clamp(32px, 5vw, 64px); border-radius: var(--r-lg); background: var(--ink); color: rgba(255, 255, 255, .8); }
.cta::before { content: ''; position: absolute; right: -120px; top: -160px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(240, 203, 130, .16), transparent 65%); pointer-events: none; }
.cta__lotus { color: var(--gold); }
.cta__lotus .icon { width: 56px; height: 56px; stroke-width: 1.1; }
.cta__lotus--dark { color: var(--gold-deep); display: flex; justify-content: center; margin-bottom: 20px; }
.cta__text p { margin-top: 10px; max-width: 46ch; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cta__tel { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); color: #fff; font-weight: 500; text-decoration: none; transition: box-shadow .6s var(--ease), color .6s var(--ease); }
.cta__tel:hover { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
.cta__tel .icon { color: var(--gold); }
.cta__open { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; font-size: .9rem; color: rgba(255, 255, 255, .62); }
.cta__open .icon { width: 16px; height: 16px; }
@media (max-width: 899px) {
  .cta { grid-template-columns: 1fr; }
  .cta__open { grid-column: auto; }
  .cta__actions .btn, .cta__tel { flex: 1 1 220px; justify-content: center; }
}

/* ---------- split-blokken ---------- */
.split { padding-block: 6px; }
.split:not(.split + .split) { padding-top: clamp(32px, 4vw, 56px); }
.split:has(+ :not(.split)) { padding-bottom: clamp(32px, 4vw, 56px); }
.split__grid { display: grid; grid-template-columns: .82fr 1fr; gap: 12px; } /* 17 sep 2026: fotokolom smaller, tekstblok krijgt de ruimte */
.split__img, .split__mark { min-height: clamp(330px, 31vw, 480px); border-radius: var(--r-lg); overflow: hidden; background: var(--stone); }
.split__img { position: relative; }
.split__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* hoogte volgt het tekstblok (minimaal de min-height), niet de foto: staande foto's rekten het blok anders op */
.split__mark { display: grid; place-items: center; background: var(--ink); color: var(--gold); }
.split__mark .icon { width: 30%; height: auto; stroke-width: .7; }
.split__card { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: clamp(26px, 4.2vw, 60px); border-radius: var(--r-lg); background: var(--grad-diag); }
.split__card .kop--m { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2rem); } /* kop schaalt mee met het smallere blok */
.split__card p { color: var(--muted); max-width: 60ch; }
.split__card .btn { align-self: flex-start; margin-top: 8px; }
/* citaat van Ine op de behandelpagina's: licht, rustig, geen achtergrondfoto */
.statement-section.statement-section--ine { background: transparent; margin-block: 0; padding-block: clamp(32px, 4vw, 56px); }
.ine-citaat { margin: 0; }
.statement-section--ine .ine-citaat .statement { color: var(--ink); }
.ine-citaat figcaption { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.ine-citaat figcaption small { display: block; font-weight: 400; font-size: .88rem; color: var(--muted); }
.ine-citaat .avatar { width: 64px; height: 64px; box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--gold); }
.split--rev .split__grid { grid-template-columns: 1fr .82fr; } /* fotokolom blijft de smalle, ook omgekeerd */
.split--rev .split__img, .split--rev .split__mark { order: 2; }
/* 17 sep 2026 (Niek): resultaatfoto's niet bijsnijden of inzoomen - eigen kader op de eigen verhouding */
.split__img--vol { min-height: 0; display: flex; align-items: center; justify-content: center; background: transparent; box-shadow: none; }
.split__img--vol img { position: static; width: auto; height: auto; max-width: 100%; max-height: 560px; border-radius: var(--r-lg); }
/* 17 sep 2026 (Niek): bij een eigen fotokader mag het tekstblok niet hoger worden dan de foto:
   compactere padding en lijstregels, zodat kaart en foto even groot zijn */
@media (min-width: 800px) {
  .split__grid:has(.split__img--vol) .split__card { padding: clamp(20px, 2.4vw, 34px); gap: 12px; }
  .split__grid:has(.split__img--vol) .split__card .checks li { padding: 7px 0; }
  .split__grid:has(.split__img--vol) .split__card p { margin: 0; }
}
.checks { display: grid; margin-top: 4px; }
.checks li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.checks .icon { width: 22px; height: 22px; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-deep); stroke-width: 2.2; }
@media (max-width: 799px) {
  .split__grid, .split--rev .split__grid { grid-template-columns: 1fr; }
  .split--rev .split__img, .split--rev .split__mark { order: 0; }
  .split__img, .split__mark { min-height: 0; aspect-ratio: 4 / 3.4; }
  .split__img--vol { aspect-ratio: auto; } /* eigen kader: hoogte volgt de foto, geen loze ruimte */
  .split__mark { aspect-ratio: 16 / 7; }
  .split__card .btn { align-self: stretch; }
}

/* procesbeschrijving */
.pcards { counter-reset: none; }
.pcard { position: relative; width: min(400px, 84vw); min-height: 280px; padding: 30px 32px; border-radius: 20px; background: var(--white); }
.pcard__num { position: absolute; top: 18px; right: 24px; font-size: 4.2rem; font-weight: 300; line-height: 1; letter-spacing: -.05em; color: var(--gold); }
.pcard h3 { margin-top: 64px; font-size: 1.3rem; font-weight: 500; color: var(--ink); }
.pcard p { margin-top: 10px; color: var(--muted); }

/* tijdlijn */
.timeline { --tp: 0; position: relative; display: grid; gap: 14px; padding-left: 48px; }
.timeline::before, .timeline::after { content: ''; position: absolute; left: 14px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--line); }
.timeline::after { background: var(--gold-deep); transform: scaleY(var(--tp)); transform-origin: top; }
.timeline__item { position: relative; }
.timeline__item::before { content: ''; position: absolute; left: -41px; top: 30px; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--line-strong); transition: background-color .4s, box-shadow .4s; }
.timeline__item.is-on::before { background: var(--gold); box-shadow: inset 0 0 0 2px var(--gold-deep); }
.tl-card { padding: 24px 28px; border-radius: 18px; background: var(--sand); }
.tl-card h3 { font-size: 1.12rem; font-weight: 500; color: var(--ink); }
.tl-card p, .tl-card ul { margin-top: 8px; max-width: 78ch; color: var(--muted); }
.tl-card ul { list-style: disc; padding-left: 1.1em; display: grid; gap: 4px; }
.tl-card li::marker { color: var(--gold-deep); }

/* prijzen */
.prices { padding: clamp(24px, 4vw, 56px); border-radius: var(--r-lg); background: var(--white); }
table { width: 100%; border-collapse: collapse; margin-top: 20px; font-variant-numeric: tabular-nums; }
th, td { padding: 13px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-weight: 400; color: var(--ink-2); padding-right: 16px; }
td { font-weight: 500; color: var(--ink); text-align: right; white-space: nowrap; }
tr:last-child th, tr:last-child td { border-bottom: 0; }
.prices__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.prices__foot > span { color: var(--muted); font-size: .95rem; max-width: 40ch; }

/* rijen andere behandelingen */
.rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.row { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 12px 20px 12px 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.row:hover { background: var(--sand); box-shadow: inset 0 0 0 1px var(--line-strong); }
.row__name { flex: 1; font-weight: 500; }
.row__price { font-size: .9rem; font-weight: 500; color: var(--gold-deep); }
.row > .icon { width: 18px; height: 18px; color: var(--muted); transition: transform .5s var(--ease); }
.row:hover > .icon { transform: translateX(3px); }
@media (max-width: 699px) { .rows { grid-template-columns: 1fr; } }

/* ---------- pagina-koppen ---------- */
.page-head { margin: 8px; padding-block: clamp(32px, 4vw, 56px); border-radius: var(--r-lg); background: var(--grad-diag); }
.page-head__lead { max-width: 44rem; margin-top: 20px; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--muted); }
.page-head--compact { padding-block: clamp(28px, 3.5vw, 48px); }
.page-head--center { text-align: center; padding-block: clamp(48px, 7vw, 96px); }
.page-head--center .page-head__lead { margin-inline: auto; }

.about-hero { position: relative; margin: 8px; min-height: min(84svh, 760px); display: grid; align-items: center; border-radius: var(--r-lg); background: var(--grad-diag); overflow: hidden; }
.about-hero__inner { position: relative; height: 100%; display: grid; place-items: center; padding-block: clamp(48px, 7vw, 96px); }
.about-hero__text { position: relative; z-index: 1; max-width: 40rem; text-align: center; }
.about-hero__text .crumbs { justify-content: center; }
.about-hero__text .page-head__lead { margin-inline: auto; }
.float { position: absolute; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); will-change: transform; }
.float img { width: 100%; height: 100%; object-fit: cover; }
.float--1 { top: 9%; left: 4%; width: clamp(120px, 14vw, 210px); aspect-ratio: 4 / 3; }
.float--2 { top: 12%; right: 7%; width: clamp(96px, 10vw, 150px); aspect-ratio: 3 / 4; }
.float--3 { bottom: 10%; left: 9%; width: clamp(120px, 15vw, 230px); aspect-ratio: 4 / 3; }
.float--4 { bottom: 7%; right: 4%; width: clamp(140px, 18vw, 280px); aspect-ratio: 4 / 3; }
@media (max-width: 899px) {
  .about-hero__inner { padding-block: 176px 64px; }
  .float--3, .float--4 { display: none; }
  .float--1 { top: 24px; left: 16px; }
  .float--2 { top: 24px; right: 16px; }
}
/* op telefoon bleef er 157px leeg tussen de twee zwevende foto's en de kop */
@media (max-width: 639px) {
  .about-hero { min-height: 0; }
  .about-hero__inner { padding-block: 146px 40px; }
  .float--1, .float--2 { top: 16px; }
}

.gallery figure { height: clamp(280px, 30vw, 440px); border-radius: 20px; overflow: hidden; }
.gallery img { height: 100%; width: auto; max-width: none; object-fit: cover; }

/* ---------- afspraakformulier ---------- */
.booking { display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(16px, 2.6vw, 40px); align-items: start; }
.form { padding: clamp(24px, 4vw, 52px); border-radius: var(--r-lg); background: var(--grad); }
.field { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { padding: 0; font-weight: 500; color: var(--ink); }
.field legend { margin-bottom: 10px; }
.optioneel { font-weight: 400; color: var(--muted); }
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea { width: 100%; min-height: 56px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--white); font: inherit; font-size: 1.05rem; color: var(--ink); transition: border-color .3s, box-shadow .3s; -webkit-appearance: none; appearance: none; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--gold-soft); }
.field input::placeholder, .field textarea::placeholder { color: #697070; }
.field input:user-invalid, .field select:user-invalid { border-color: #a3372a; }
/* Komt de bezoeker terug van een mislukte verzending, dan hoort ze te lezen wat er aan
   de hand is en hoe ze alsnog een afspraak maakt. Anders ziet ze een leeg formulier en
   denkt ze dat het gelukt is. */
.melding { display: flex; gap: 10px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid #a3372a; border-radius: var(--r-md); background: rgba(163, 55, 42, .05); color: var(--ink-2); font-size: .98rem; line-height: 1.5; }
.melding a { color: var(--ink); font-weight: 500; }
.select { position: relative; }
.select select { padding-right: 48px; cursor: pointer; }
.select .icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; transition: background-color .3s, color .3s, box-shadow .3s; user-select: none; }
.chip input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.chip input:focus-visible + span { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.form__privacy { margin: 4px 0 20px; font-size: .9rem; color: var(--muted); }
.btn--submit { width: 100%; min-height: 58px; font-size: 1.05rem; }
.contact { padding: clamp(24px, 4vw, 44px); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); }
.contact__list { margin-top: 12px; }
.contact__list li > * { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .9rem; text-decoration: none; line-height: 1.4; }
.contact__list b { display: block; font-size: 1.02rem; font-weight: 500; color: var(--ink); }
.contact__list a:hover b { text-decoration: underline; }
.contact__img { margin-top: 20px; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; }
.contact__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .booking { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .field-row { grid-template-columns: 1fr; } }

.prose h2 { margin: 1.8em 0 .5em; font-size: 1.35rem; font-weight: 500; color: var(--ink); }
.prose p { color: var(--muted); max-width: 68ch; }

/* ---------- afspraakpagina: drie stappen ---------- */
/* Zonder JavaScript staan alle stappen gewoon onder elkaar. Pas als de pagina JS heeft
   (de .js-klasse wordt bovenaan elke pagina gezet) wordt het een stappenflow. Anders zou
   een bezoeker zonder JS nooit bij de velden komen. */

.voortgang { display: flex; gap: 6px; margin-bottom: 26px; }
.voortgang i { flex: 1; height: 3px; border-radius: 999px; background: var(--line); transition: background-color .5s var(--ease); }
.voortgang i.aan { background: var(--gold); }

.stap { border: 0; padding: 0; margin: 0; }
.js .stap:not(.nu) { display: none; }
.js .stap.nu { animation: stapOp .45s var(--ease-out) both; }
@keyframes stapOp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.stap + .stap { margin-top: 40px; }
.js .stap + .stap { margin-top: 0; }
.stap__kop { display: block; padding: 0; margin-bottom: 18px; }
.stap__nr { display: block; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.stap__lead { margin: -8px 0 18px; color: var(--muted); font-size: .95rem; }

/* keuzerij: de bouwsteen van stap 1 en 2 */
.keus { display: grid; gap: 10px; }
.keus > label, .keus > .dag > label {
  display: flex; align-items: center; gap: 16px; padding: 15px 18px; border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--kaart-rand); cursor: pointer;
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.keus > label:hover, .keus > .dag > label:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.keus > label:has(input:checked), .keus > .dag > label:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); background: var(--warm); }
.keus input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.keus .row__icon { flex: none; }
.keus__tekst { flex: 1; min-width: 0; }
.keus__tekst b { display: block; font-weight: 500; color: var(--ink); font-size: 1.05rem; }
.keus__tekst small { color: var(--muted); font-size: .9rem; }
.keus__vink { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); color: transparent; transition: background-color .3s, color .3s, box-shadow .3s; }
.keus__vink .icon { width: 15px; height: 15px; stroke-width: 2.4; }
.keus input:checked ~ .keus__vink { background: var(--ink); color: #fff; box-shadow: none; }

.tijden { margin-top: 12px; padding: 16px 18px; border-radius: var(--r-md); background: var(--warm); }
.tijden__vraag { margin: 0 0 12px; font-size: .9rem; color: var(--muted); }
.dag:not(:has(input[type=checkbox]:checked)) .tijden { display: none; }

.form__acties { display: grid; gap: 10px; margin-top: 8px; }

/* vaste balk onderin met de samenvatting en de verder-knop */
.voet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: rgba(255,255,255,.93); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom)); }
.voet__in { display: flex; align-items: center; gap: 12px; max-width: var(--max); margin-inline: auto; }
.voet__sam { flex: 1; min-width: 0; font-size: .9rem; color: var(--muted); }
.voet__sam b { display: block; color: var(--ink); font-weight: 500; font-size: .98rem; }
.voet__sam b, .voet__sam span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voet .btn { flex: none; }
.voet__terug { padding: 0 18px; }
/* Compact: de eerste vraag moet binnen één oogopslag te zien zijn. Gemeten op 1440x800
   stond er eerst geen enkele behandeling boven de vouw; alles hieronder dient dat doel. */
.pagina-afspraak .page-head { padding-block: clamp(10px, 1.2vw, 16px); }
.pagina-afspraak .page-head h1 { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem); letter-spacing: -.03em; }
.pagina-afspraak .page-head__lead { margin-top: 10px; font-size: 1.02rem; max-width: 40rem; }
@media (max-width: 599px) {
  /* het vinkcirkeltje kost 36px breedte en duwt de naam naar een tweede regel; de gekozen
     staat is al te zien aan de dikke rand en het warme vlak */
  .pagina-afspraak .keus__vink { display: none; }
  /* space-between knijpt een lange behandelingsnaam plat tot twee regels; gestapeld met
     strakke regelhoogtes is de rij lager én leesbaarder */
  .pagina-afspraak .keus .keus__tekst { display: block; }
  .pagina-afspraak .stap[data-stap="1"] .keus > label { padding: 9px 12px; gap: 9px; }
  .pagina-afspraak .stap[data-stap="1"] .row__icon { display: none; }
  .pagina-afspraak .keus .keus__tekst b { font-size: .98rem; line-height: 1.25; }
  .pagina-afspraak .keus .keus__tekst small { display: block; font-size: .82rem; line-height: 1.2; }
  .pagina-afspraak .keus > label, .pagina-afspraak .keus > .dag > label { padding: 9px 14px; }
  .pagina-afspraak .keus .row__icon { width: 30px; height: 30px; }
}
.pagina-afspraak .crumbs { margin-bottom: 4px; }
/* Kop, intro en beoordeling staan onder elkaar op één linkerlijn. Naast elkaar scheelde
   een regelhoogte, maar dan begint de bladzijde met twee tekstblokken die om aandacht
   vechten; gestapeld lees je hem in één beweging tot de eerste vraag. */
.pagina-afspraak .page-head__lead { max-width: 38rem; }
.pagina-afspraak .voortgang { margin-bottom: 18px; }
.pagina-afspraak .stap__kop { margin-bottom: 14px; }
/* De icooncirkel is 46px en bepaalde daarmee de rijhoogte, niet de tekst.
   Kleiner maken levert per rij 12px op, en dat komt rechtstreeks boven de vouw terecht. */
/* naam en prijs naast elkaar in plaats van onder elkaar: scheelt ruim 20px per rij,
   en zo leest het als een prijslijst in plaats van als een formulier */
.pagina-afspraak .keus__tekst { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pagina-afspraak .keus__tekst b { min-width: 0; }
.pagina-afspraak .keus__tekst small { flex: none; }
.pagina-afspraak .keus .row__icon { width: 34px; height: 34px; }
.pagina-afspraak .keus .row__icon .icon { width: 18px; height: 18px; }
.pagina-afspraak .keus { gap: 8px; }
.pagina-afspraak .keus > label, .pagina-afspraak .keus > .dag > label { padding: 9px 15px; gap: 12px; }
.pagina-afspraak .keus__tekst b { font-size: 1rem; }
.pagina-afspraak .keus__tekst small { font-size: .86rem; }
/* Eén kaart in plaats van losse blokken: het formulier en de contactstrook zitten in
   hetzelfde vlak, met één gouden rand eromheen. Op mobiel onder elkaar, op een breed
   scherm naast elkaar, zodat bellen en appen tijdens elke stap in beeld blijven. */
.boeking {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border: 1px solid var(--kaart-rand); border-radius: var(--r-lg); background: var(--grad); overflow: hidden;
}
.boeking > form { padding: clamp(20px, 2.4vw, 32px); }
.strook { padding: 18px clamp(20px, 2.4vw, 32px) 20px; border-top: 1px solid var(--kaart-rand); background: #fff; }
.strook__kop { margin: 0 0 12px; font-size: .84rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.strook__lijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.strook__lijst li:last-child { grid-column: 1 / -1; }
.strook__lijst li > * { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--muted); font-size: .8rem; line-height: 1.3; text-decoration: none; }
.strook__lijst .icon { width: 20px; height: 20px; color: var(--gold); flex: none; }
.strook__lijst b { display: block; font-size: .94rem; font-weight: 500; color: var(--ink); }
.strook__lijst a:hover b { text-decoration: underline; }
/* Openingstijden lezen als een rooster: links de dagen, rechts de tijd eronder uitgelijnd.
   Als losse zin liep het over drie regels en week het af van de vier regels erboven. */
.strook__open > div { align-items: flex-start; padding-block: 2px; }
.strook__open .icon { margin-top: 2px; }
.strook__uren { display: grid; grid-template-columns: max-content auto; align-items: baseline; column-gap: 14px; row-gap: 2px; margin-top: 2px; }
/* dag en tijd staan op dezelfde regel, dus ook op dezelfde grootte en regelhoogte:
   met .8rem naast .94rem zakten de tijden zichtbaar onder de dagen */
.strook__uren i { font-style: normal; font-size: .94rem; font-weight: 400; line-height: 1.35; color: var(--muted); white-space: nowrap; }
.strook__uren b { line-height: 1.35; }

@media (min-width: 900px) {
  /* Het formulier leidt, de contactstrook staat als tweede weg ernaast: één kolom van
     320px die bij elke stap in beeld blijft. */
  .boeking { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  /* "Liever direct contact?" begint op dezelfde regel als "Stap 1 van 3": het formulier
     heeft de voortgangsbalk (3px) plus haar marge (18px) boven die regel staan, dus de
     strook krijgt diezelfde 21px extra boven op de padding van het formulier. */
  .boeking .strook { border-top: 0; border-left: 1px solid var(--kaart-rand); padding-top: calc(clamp(20px, 2.4vw, 32px) + 3px + 18px); padding-bottom: clamp(22px, 2.4vw, 32px); height: 100%; }
  .boeking .strook__lijst { grid-template-columns: 1fr; gap: 14px; }
  .boeking .strook__lijst li:last-child { grid-column: auto; }
}
/* Negen behandelingen op één rij per stuk is een lijst om doorheen te scrollen.
   In twee kolommen is het een overzicht dat je in één blik overziet. */
.pagina-afspraak .stap[data-stap="1"] .keus { grid-template-columns: 1fr 1fr; }
/* "Ik weet het nog niet" is geen behandeling maar een uitweg; over de volle breedte
   sluit het raster netjes af en leest hij als "geen van deze". */
.pagina-afspraak .stap[data-stap="1"] .keus > label:last-child { grid-column: 1 / -1; }
.pagina-afspraak .page-head + .section { padding-top: clamp(6px, 1vw, 14px); }
.pagina-afspraak .float-call { display: none !important; }
.pagina-afspraak .footer { padding-bottom: 120px; }

@media (prefers-reduced-motion: reduce) {
  .js .stap.nu { animation: none; }
}

/* ---------- footer ---------- */
.footer { margin: 8px; padding-block: clamp(56px, 7vw, 88px) 28px; border-radius: var(--r-lg); background: var(--ink); color: rgba(255, 255, 255, .7); font-size: .96rem; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px; }
.footer__brand img { width: 150px; height: auto; }
.footer__brand p { margin-top: 18px; }
.footer__social { display: flex; gap: 8px; margin-top: 20px; }
.footer__kop { margin-bottom: 14px; font-weight: 500; color: #fff; }
.footer ul { display: grid; gap: 8px; }
.footer a { text-decoration: none; transition: color .4s; }
.footer a:hover { color: var(--gold); }
.footer address { line-height: 1.8; }
.footer__open { margin-top: 12px; font-size: .9rem; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .86rem; }
@media (max-width: 899px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 499px) { .footer__grid { grid-template-columns: 1fr; } }

.float-call { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: none; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--ink); color: var(--gold); box-shadow: 0 12px 30px -8px rgba(13, 12, 11, .5); transform: translateY(100px); transition: transform .6s var(--ease); }
.float-call .icon { width: 26px; height: 26px; }
/* tapdoelen van 44px voor de doelgroep: de links stonden op 21-24px */
@media (max-width: 639px) {
  .footer ul { gap: 0; }
  .footer li a, .footer address a, .footer__bottom a, .vn figcaption a, .faq__contact a { display: inline-block; padding-block: 11px; }
  .crumbs a { display: inline-block; padding-block: 10px; }
  .crumbs { margin-bottom: 12px; }
  .footer address { line-height: 1.4; }
}
@media (max-width: 899px) { .footer { padding-bottom: 96px; } .float-call { display: grid; } .past-hero .float-call { transform: none; } .menu-open .float-call { transform: translateY(100px); } }

/* ---------- video-dialoog ---------- */

/* ---------- thema L3 "Lotus en goud" (gekozen door Niek, 15 sep 2026) ----------
   Eén wit doek: geen sectie met een eigen achtergrond (geen zand, geen zwarte band). Eén kaartstijl met een gouden
   haarlijn, zwarte knoppen, overal hetzelfde logogoud, de quote op gedimd kaarslicht en een lichte footer.
   Focusranden zijn zwart op wit en goud op donkere foto's. */
:root { --kaart-rand: rgba(240, 203, 130, .6); --warm: rgba(240, 203, 130, .07); }
html { scrollbar-color: var(--gold) transparent; }
:focus-visible, .chip input:focus-visible + span, .footer :focus-visible, .cta :focus-visible { outline-color: var(--ink); }

/* één doek */
.steps__sticky, .section--sand, .faq, .reviews-section, .page-head, .about-hero { background: transparent; box-shadow: none; }

/* één kaartstijl */
.tcard, .vn, .rcol--quote, .acc, .iconrow__icon, .mega__icon, .row__icon, .steps__counter, .split__card, .split__mark, .tl-card, .prices, .form, .contact, .pcard {
  background: #fff; box-shadow: inset 0 0 0 1px var(--kaart-rand);
}
@media (min-width: 640px) {
  .tcard { padding: 6px; border-radius: var(--r-lg); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(240, 203, 130, .85); transition: box-shadow .6s var(--ease); }
  .tcard:hover { box-shadow: inset 0 0 0 1.5px var(--gold), 0 30px 60px -34px rgba(7, 11, 11, .35); }
  .tcard__img { border-radius: 18px; }
  .tcard__price { top: 20px; left: 20px; }
  .tcard__body { padding: 16px 18px 18px; }
  .tcard__text { color: var(--muted); }
}
/* belregel onder het behandelingenraster */
.belregel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; margin-top: 28px; text-align: center; }
.belregel p { color: var(--muted); }
/* niet over de volle breedte: anders valt de zwevende belknop over de rechterkant */
@media (max-width: 639px) { .belregel { margin-top: 18px; } .belregel .btn { margin-inline: auto; } }

/* prijzen-tegel: zelfde kaart, met het logomerk in plaats van een foto (zoals .split__mark) */
.tcard__mark { display: grid; place-items: center; background: var(--white); }
.mark { display: block; width: 46%; height: auto; color: var(--gold); }
.mark__lotus, .mark__ster { fill: currentColor; }
/* de lotus tekent zichzelf zodra de tegel in beeld scrolt, daarna ploppen de sterretjes erbij.
   Let op: stroke-width staat in de eenheden van de <g> (scale 0.1), dus ~70 per schermpixel. */
.js .tcard--cta .mark__lotus { fill-opacity: 0; stroke: currentColor; stroke-width: 110; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .tcard--cta.is-in .mark__lotus { fill-opacity: 1; stroke-opacity: 0; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease-out) .25s, fill-opacity .5s ease 1.35s, stroke-opacity .5s ease 1.35s; }
.js .tcard--cta .mark__ster { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }
.js .tcard--cta.is-in .mark__ster { opacity: 1; transform: none; transition: opacity .45s var(--ease-out) calc(1.6s + var(--sd)), transform .55s var(--ease-out) calc(1.6s + var(--sd)); }
.tcard--cta .tcard__title { display: block; }
.tcard--cta .tcard__title b { font-weight: 500; color: var(--gold-deep); }
.tcard--cta .tcard__title .icon { display: inline-block; margin-left: 6px; vertical-align: -3px; }
/* de tegel loopt onder 1000px over de volle breedte, dus het merkvlak wordt een band */
@media (max-width: 999px) and (min-width: 640px) { .tcard__mark { aspect-ratio: 16 / 5; } .tcard__mark .mark { width: 16%; } .js .tcard--cta .mark__lotus { stroke-width: 170; } }
@media (max-width: 639px) { .tcard__mark .mark { width: 58%; } .js .tcard--cta .mark__lotus { stroke-width: 260; } }
.nav__burger { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.mega__list a:hover, .row:hover { background: #f5f6f5; }
.meet__card { background: transparent; }
.checks .icon { background: var(--gold); color: var(--ink); }
.float-call { box-shadow: inset 0 0 0 1.5px var(--gold), 0 12px 30px -8px rgba(7, 11, 11, .5); }

/* goud: het nadrukwoord in elke kop */
.kop b, .step__text h3 b, .statement em { color: var(--gold); }

/* stappen */
.steps__path--bg { stroke: rgba(7, 11, 11, .16); }
.steps__path--fg { stroke: var(--gold); stroke-width: 2.4; }
.steps__counter b { background: var(--gold); }

/* quote op gedimd kaarslicht */
.sfeer-bg { position: absolute; inset: 0; z-index: -1; margin: 0; }
.sfeer-bg img { width: 100%; height: 100%; object-fit: cover; }
.sfeer-bg::after { content: ''; position: absolute; inset: 0; }
.statement-section { position: relative; isolation: isolate; overflow: hidden; margin: clamp(32px, 4vw, 56px) 8px; border-radius: var(--r-lg); background: var(--ink); padding-block: clamp(96px, 13vw, 176px); }
.statement-section .sfeer-bg img { object-position: 50% 64%; transform: scaleX(-1); } /* bloemstuk en kaarsen in beeld (fotocheck); salonfoto krijgt 50% 35% inline */
.statement-section .sfeer-bg::after { background: linear-gradient(90deg, rgba(7, 11, 11, .93) 0%, rgba(7, 11, 11, .82) 50%, rgba(7, 11, 11, .6) 100%); }
.statement-section .statement { color: #fff; }
.statement__ine { color: #fff; }
.statement__ine small { color: rgba(255, 255, 255, .72); }
.statement__ine .avatar { box-shadow: 0 0 0 2px var(--ink), 0 0 0 3.5px var(--gold); }
.statement-section :focus-visible { outline-color: var(--gold); }

@media (max-width: 899px) { .statement-section .sfeer-bg::after { background: rgba(7, 11, 11, .82); } }

/* Ine vierkant, net als de voor/na-foto's erboven (Niek, 19 sep 2026) */
.meet__img { aspect-ratio: 1; align-self: center; }
.meet__img img { object-position: 50% 30%; }

/* Google-reviews */
.reviews-section .gr-score { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin-top: 14px; color: var(--muted); }
.gr-score b { font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--ink); }
.gr-score a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.gr-score a:hover { color: var(--gold); }
.gr-sterren { display: inline-flex; gap: 3px; color: var(--gold); }
.gr-sterren svg { width: 18px; height: 18px; fill: currentColor; }
.reviews-section .rcol--quote { justify-content: flex-start; }
.reviews-section .rcol--quote p { flex: 1; }
.gr__letter { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--ink); font-weight: 500; font-size: 1.15rem; }
.reviews-section .rcol__over { color: var(--muted); }

/* logo-lotus: afspraakblok, bedankt-pagina, tekstblok zonder foto */
.logo-lotus { display: block; width: 72px; height: auto; }
.cta__lotus--dark .logo-lotus { width: 104px; margin-inline: auto; }
.split__mark .logo-lotus { width: 42%; }

/* afspraakblok op wit, zonder gloed */
.cta { background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1px var(--kaart-rand); }
.cta::before { display: none; }
.cta .kop--licht { color: var(--ink); }
.cta .btn--gold { --bg: var(--ink); --fg: #fff; --fill: var(--gold); --fg-hover: var(--ink); }
.cta__tel { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cta__tel .icon { color: var(--gold); }
.cta__tel:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--gold); }
.cta__open { color: var(--muted); }

/* lichte footer, gescheiden door de gouden streep uit het logo */
.footer { margin: 0; border-radius: 0; background: #fff; color: var(--muted); box-shadow: inset 0 1.5px 0 var(--gold); }
.footer__kop { color: var(--ink); }
.footer a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); }
.footer__bottom { border-top-color: var(--line); }
.footer .circle-btn--line { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.footer .circle-btn--line:hover { background: var(--gold); color: var(--ink); box-shadow: none; }

/* ---------- onthullen ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .9s var(--ease-out) var(--rd, 0ms), transform 1s var(--ease-out) var(--rd, 0ms), filter .9s var(--ease-out) var(--rd, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.js [data-lines] { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity 1s var(--ease-out) var(--ld, 0ms), transform 1.1s var(--ease-out) var(--ld, 0ms), filter 1s var(--ease-out) var(--ld, 0ms); }
.js .is-loaded [data-lines] { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .js [data-lines] { opacity: 1; transform: none; filter: none; }
  .js .tcard--cta .mark__lotus { fill-opacity: 1; stroke: none; }
  .js .tcard--cta .mark__ster { opacity: 1; transform: none; }
  .hero__wrap, .hero__media { transform: none !important; }
}

/* 17 sep 2026: één verticaal ritme op de behandelpagina's. Alle secties 112px boven en onder (224 ertussen);
   de hero sloot met 110 te strak aan en het prijzenblok gaf 296 omdat de kaart zelf al 56px binnenruimte heeft. */
.section--sand:has(.prices) { padding-bottom: max(0px, calc(clamp(32px, 4vw, 56px) - clamp(24px, 4vw, 56px))); } /* kaart heeft zelf al binnenruimte */
/* het feitenpaneel zweeft op desktop over de hero, dus telt de hero-padding niet mee; het citaat eronder vangt dat op */
@media (min-width: 800px) { .hero--sub + .statement-section--ine { padding-top: clamp(48px, 4.6vw, 68px); } }
@media (max-width: 799px) { .hero--sub + .statement-section--ine { padding-top: 64px; } }

/* ---------- advies van Ine (18 sep 2026): leespagina's in hetzelfde witte doek ----------
   Eén leeskolom van ~68 tekens, koppen in het gesplitste gewicht, links met een gouden onderstreping. */
.container--artikel { max-width: calc(720px + 2 * var(--pad)); }
.kop--l { font-size: clamp(2.1rem, 1.35rem + 2.4vw, 3.3rem); line-height: 1.08; letter-spacing: -.032em; }
.byline { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.byline small { display: block; font-weight: 400; font-size: .88rem; color: var(--muted); }
.byline .avatar { width: 48px; height: 48px; box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--gold); }
.artikel { padding-top: 0; }
.kortweg { padding: 22px 26px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--kaart-rand); font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); }
.kortweg b { font-weight: 600; color: var(--ink); }
.artikel__beeld { margin-block: clamp(28px, 4vw, 44px); border-radius: var(--r-md); overflow: hidden; background: var(--stone); }
.artikel__beeld img { width: 100%; }
.artikel h2 { margin: 2.2em 0 .55em; font-weight: 400; font-size: clamp(1.4rem, 1.2rem + .7vw, 1.8rem); line-height: 1.2; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.artikel p { max-width: 68ch; margin-top: 1em; }
.artikel h2 + p { margin-top: 0; }
.artikel ul { max-width: 64ch; margin-top: 1em; display: grid; gap: .5em; }
.artikel li { position: relative; padding-left: 26px; }
.artikel li::before { content: ''; position: absolute; left: 4px; top: .72em; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gold); }
.artikel p a, .artikel li a { color: var(--ink); font-weight: 500; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color .4s var(--ease); }
.artikel p a:hover, .artikel li a:hover { text-decoration-color: var(--ink); }
.artikel strong { font-weight: 600; color: var(--ink); }
.artikel-beh { display: flex; align-items: center; gap: 16px; margin-top: clamp(36px, 5vw, 56px); padding: 16px 20px 16px 16px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--kaart-rand); color: var(--ink); text-decoration: none; transition: box-shadow .6s var(--ease); }
.artikel-beh:hover { box-shadow: inset 0 0 0 1.5px var(--gold), 0 24px 48px -30px rgba(7, 11, 11, .35); }
.artikel-beh__tekst { flex: 1; font-weight: 500; line-height: 1.35; }
.artikel-beh__tekst small { display: block; margin-top: 2px; font-weight: 400; font-size: .9rem; color: var(--muted); }
.artikel-beh > .icon { width: 20px; height: 20px; transition: transform .6s var(--ease); }
.artikel-beh:hover > .icon { transform: translateX(4px); }

/* lijst met artikelen: tekst eerst, geen kaartenmuur */
.alist { display: grid; border-top: 1px solid var(--line); }
.alist__item { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 22px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.alist__titel { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 400; line-height: 1.3; letter-spacing: -.01em; transition: color .5s var(--ease); }
.alist__kort { grid-column: 1; font-size: .95rem; line-height: 1.5; color: var(--muted); max-width: 62ch; }
.alist__meta { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); white-space: nowrap; }
.alist__meta .icon { width: 18px; height: 18px; color: var(--ink); transition: transform .5s var(--ease); }
.alist__item:hover .alist__titel { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.alist__item:hover .alist__meta .icon { transform: translateX(4px); }
@media (max-width: 599px) {
  .alist__item { grid-template-columns: 1fr; }
  .alist__meta { grid-column: 1; grid-row: auto; margin-top: 4px; }
}
.advies-groep__kop { display: flex; align-items: center; gap: 16px; }
.advies-groep + .advies-groep { padding-top: 0; }

/* reviewscore in de hero van de behandelpagina's */
.hero__reviews { margin-top: 10px; font-size: .92rem; }
.hero__reviews a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: rgba(255, 255, 255, .86); text-decoration: none; }
.hero__reviews a:hover { color: #fff; text-decoration: underline; }
.hero__reviews svg { width: 16px; height: 16px; fill: var(--gold); }
.hero__reviews b { font-weight: 600; color: #fff; }

/* ---------- cookiebanner (20 sep 2026) ----------
   Klein, onderaan, boven de zwevende belknop. Weigeren en accepteren even groot, want de keuze moet
   even makkelijk zijn. Verschijnt alleen als er een Analytics-ID is ingevuld. */
.cookiebar {
  position: fixed; z-index: 60; right: 8px; bottom: 8px; left: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  width: min(520px, calc(100vw - 16px)); padding: 16px 20px;
  border-radius: var(--r-md); background: #fff;
  box-shadow: inset 0 0 0 1px var(--kaart-rand), var(--shadow);
  animation: cookiebar-in .5s var(--ease-out) both;
}
.cookiebar p { flex: 1 1 260px; margin: 0; font-size: .92rem; line-height: 1.5; color: var(--muted); }
.cookiebar a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.cookiebar__acties { display: flex; gap: 8px; }
.cookiebar .btn { min-height: 44px; padding-inline: 20px; font-size: .92rem; }
@keyframes cookiebar-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .cookiebar { bottom: 80px; padding: 14px 16px; }
  .cookiebar__acties { width: 100%; }
  .cookiebar .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cookiebar { animation: none; } }

/* zolang de banner er staat, wijkt de videoknop: anders dekken ze elkaar rechtsonder af */
/* Op mobiel staat de banner bovenaan, onder de navigatie: onderaan dekte hij de knop Afspraak maken af. */
@media (max-width: 560px) {
  .cookiebar { left: 8px; right: 8px; width: auto; top: calc(var(--nav-h) + 12px); bottom: auto; }
  @keyframes cookiebar-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
}