/* ==========================================================================
   TCG Deklerck — Richting C "Waarmee kan ik u helpen?"
   Complaint first. Beige + cream base, one deep-green stage for the
   complaint tabs, sage for the photo panel, moss for every action.
   ========================================================================== */

:root {
  --beige: #EBE6D3;
  --creme: #F5F2E8;
  --salie: #ABB3A8;
  --salie-licht: #D5DACF;
  --groen: #2F5A3A;
  --groen-diep: #244A2E;
  --mos: #263A1F;
  --inkt: #26301F;
  --inkt-zacht: #4E5847;
  --lijn: rgba(38, 58, 31, .16);
  --lijn-sterk: rgba(38, 58, 31, .32);
  --op-groen: #F5F2E8;
  --op-groen-zacht: #CBD5C4;

  --display: "Bebas Neue", "Arial Narrow", sans-serif;
  --tekst: "Raleway", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --goot: clamp(16px, 4.5vw, 48px);
  --max: 1200px;
  --band-h: 76px;
  --r: 6px;
  --r-pil: 999px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: calc(var(--band-h) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--beige);
  color: var(--inkt);
  font-family: var(--tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variant-numeric: lining-nums;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
figure, blockquote { margin: 0; }

:focus-visible { outline: 3px solid var(--groen); outline-offset: 3px; border-radius: 4px; }
.klachten :focus-visible, .voet :focus-visible, .tarief--start :focus-visible { outline-color: var(--creme); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 12px; left: 12px; z-index: 50; background: var(--mos); color: var(--creme); padding: 10px 16px; border-radius: var(--r); }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--goot)); margin-inline: auto; padding-inline: var(--goot); }

.mono { font-family: var(--mono); font-size: .8125rem; font-weight: 500; letter-spacing: .01em; line-height: 1.4; }

.titel-l { font-family: var(--display); font-size: clamp(2.75rem, 5.2vw, 4.25rem); line-height: .95; letter-spacing: .01em; color: var(--mos); }
.titel-m { font-family: var(--display); font-size: clamp(2.25rem, 3.6vw, 3rem); line-height: 1; letter-spacing: .01em; color: var(--mos); }
.inleiding { font-size: 1.1875rem; line-height: 1.6; font-weight: 500; }

/* ---------- Buttons ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .7em 1.4em;
  background: var(--mos); color: var(--creme);
  border: 1.5px solid var(--mos); border-radius: var(--r-pil);
  font-family: var(--tekst); font-weight: 700; font-size: .9375rem; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.knop:hover { background: var(--groen); border-color: var(--groen); }
.knop--lijn { background: transparent; color: var(--mos); border-color: var(--lijn-sterk); }
.knop--lijn:hover { background: var(--creme); border-color: var(--mos); color: var(--mos); }
.knop--lijn .mono { font-weight: 400; color: var(--inkt-zacht); }
.knop--licht { background: var(--creme); color: var(--mos); border-color: var(--creme); }
.knop--licht:hover { background: #fff; border-color: #fff; color: var(--mos); }

.tekstlink {
  display: inline-block; font-weight: 700; color: var(--mos);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em;
  text-decoration-color: var(--salie);
  transition: text-decoration-color .2s;
}
.tekstlink:hover { text-decoration-color: var(--mos); }

/* ---------- Header band ---------- */
.band {
  position: sticky; top: 0; z-index: 30;
  background: rgba(235, 230, 211, .94);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--lijn);
}
.band__in { display: flex; align-items: center; gap: 20px; min-height: var(--band-h); }

.merk { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--groen); }
.merk__enso { width: 50px; height: 50px; flex: none; }
.merk__tekst { display: flex; flex-direction: column; }
.merk__naam { font-family: var(--display); font-size: 1.75rem; line-height: .9; letter-spacing: .12em; color: var(--mos); }
.merk__sub { font-size: .6875rem; font-weight: 600; letter-spacing: .02em; color: var(--inkt-zacht); margin-top: 3px; }
.merk--licht, .merk--licht .merk__naam { color: var(--creme); }
.merk--licht .merk__enso { color: var(--salie-licht); }
.merk--licht .merk__sub { color: var(--op-groen-zacht); }

.menu { margin-left: auto; }
.menu__lijst { display: flex; gap: 4px; }
.menu__lijst a {
  display: block; padding: 8px 10px; border-radius: var(--r-pil);
  font-size: .875rem; font-weight: 600; text-decoration: none; color: var(--inkt);
  transition: background-color .2s;
}
.menu__lijst a:hover { background: var(--creme); }
.menu__lijst a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--groen); border-radius: 0; }
.knop--band .kort { display: none; }

.menu-knop { display: none; }

@media (max-width: 1120px) {
  .menu-knop {
    display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none;
    background: transparent; border: 1.5px solid var(--lijn-sterk); border-radius: 50%; cursor: pointer; color: var(--mos);
  }
  .menu-knop__streep, .menu-knop__streep::before, .menu-knop__streep::after {
    display: block; width: 18px; height: 1.6px; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s, opacity .2s;
  }
  .menu-knop__streep::before, .menu-knop__streep::after { content: ""; position: absolute; left: 0; }
  .menu-knop__streep::before { top: -6px; }
  .menu-knop__streep::after { top: 6px; }
  .band.is-open .menu-knop__streep { background: transparent; }
  .band.is-open .menu-knop__streep::before { transform: translateY(6px) rotate(45deg); }
  .band.is-open .menu-knop__streep::after { transform: translateY(-6px) rotate(-45deg); }

  .knop--band { margin-left: auto; }
  .menu { position: absolute; top: 100%; left: 0; right: 0; margin: 0; display: none; background: var(--beige); border-bottom: 1px solid var(--lijn); }
  .band.is-open .menu { display: block; }
  .menu__lijst { flex-direction: column; gap: 0; padding: 8px var(--goot) 20px; }
  .menu__lijst a { padding: 14px 0; border-radius: 0; font-size: 1.0625rem; border-bottom: 1px solid var(--lijn); }
  .menu__lijst a:hover { background: none; }
  .menu__lijst a[aria-current="page"] { box-shadow: none; color: var(--groen); }
}

@media (max-width: 560px) {
  :root { --band-h: 66px; }
  .band__in { gap: 10px; }
  .merk { gap: 8px; }
  .merk__enso { width: 40px; height: 40px; }
  .merk__naam { font-size: 1.375rem; }
  .merk__sub { font-size: .5625rem; max-width: 12.5em; line-height: 1.25; }
  .knop--band { min-height: 44px; padding: .5em 1.05em; }
  .knop--band .lang { display: none; }
  .knop--band .kort { display: inline; }
  .menu-knop { width: 44px; height: 44px; }
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: min(760px, calc(100vh - var(--band-h)));
}
.hero__tekst {
  padding: clamp(48px, 7vw, 96px) clamp(24px, 4vw, 64px) clamp(48px, 6vw, 80px) max(var(--goot), calc((100vw - var(--max)) / 2));
  display: flex; flex-direction: column; justify-content: center;
}
.hero__titel {
  font-family: var(--display);
  font-size: clamp(4rem, 8.4vw, 7.75rem);
  line-height: .86; letter-spacing: .005em;
  color: var(--mos);
  max-width: 7ch;
  margin-bottom: .32em;
}
.hero__vraag { font-weight: 600; margin-bottom: 14px; color: var(--inkt); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; max-width: 36rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px; padding: .5em 1.05em .5em .85em;
  background: var(--creme); color: var(--mos);
  border: 1px solid var(--lijn); border-radius: var(--r-pil);
  font-weight: 600; font-size: .9375rem; text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip .ico { width: 20px; height: 20px; color: var(--groen); transition: color .2s; }
.chip:hover { background: var(--mos); border-color: var(--mos); color: var(--creme); }
.chip:hover .ico { color: var(--salie-licht); }

.hero__intro { max-width: 34rem; color: var(--inkt-zacht); font-size: 1rem; padding-top: 24px; border-top: 1px solid var(--lijn); }
.acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

.hero__paneel {
  position: relative;
  background: var(--salie);
  min-height: 480px;
}
.hero__foto {
  position: absolute; top: clamp(32px, 4vw, 56px); right: 0; bottom: 0;
  width: 78%; height: auto;
  object-fit: cover; object-position: 50% 18%;
  border-radius: 0;
}
.hero__kaart {
  position: absolute; left: clamp(20px, 3vw, 40px); bottom: clamp(24px, 4vw, 48px);
  display: flex; flex-direction: column; gap: 4px;
  width: 210px; padding: 18px 20px 16px;
  background: var(--creme); color: var(--mos); text-decoration: none;
  border-radius: var(--r);
  transition: transform .2s;
}
.hero__kaart:hover { transform: translateY(-2px); }
.hero__duur { font-family: var(--display); font-size: 3.25rem; line-height: 1; letter-spacing: .01em; color: var(--groen); padding: 6px 0 8px; border-bottom: 1px solid var(--lijn); }
.hero__kaart-link { font-size: .875rem; font-weight: 700; color: var(--mos); padding-top: 4px; text-decoration: underline; text-decoration-color: var(--salie); text-underline-offset: .3em; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__tekst { padding: 40px var(--goot) 40px; }
  .hero__titel { font-size: clamp(4.25rem, 21vw, 6.5rem); }
  .hero__paneel { min-height: 0; height: clamp(420px, 110vw, 620px); }
  .hero__foto { width: 74%; top: 28px; }
}
@media (max-width: 560px) {
  .chip { font-size: .875rem; padding: .45em .9em .45em .7em; }
  .acties .knop { flex: 1 1 100%; }
  .hero__kaart { width: 168px; padding: 14px 14px 12px; left: 16px; bottom: 20px; }
  .hero__duur { font-size: 2.5rem; }
}

/* ---------- Sections ---------- */
.sectie { padding-block: clamp(64px, 9vw, 128px); }
.sectie--creme { background: var(--creme); }

/* ---------- Complaint tabs (signature) ---------- */
.klachten {
  background: var(--groen);
  color: var(--op-groen);
  padding-block: clamp(64px, 9vw, 120px);
  position: relative;
}
.klachten .titel-l { color: var(--op-groen); }
.klachten__kop { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.klachten__kop p { margin: 0; color: var(--op-groen-zacht); max-width: 36rem; font-size: 1.0625rem; }

.tabs { display: grid; grid-template-columns: 1fr; gap: 0; }
.tabs.is-actief { grid-template-columns: minmax(220px, 3fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 56px); }

.tabs__lijst { display: flex; flex-direction: column; gap: 2px; align-self: start; position: sticky; top: calc(var(--band-h) + 24px); }
.tabs__lijst[hidden] { display: none; }
.tab {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 56px; padding: 12px 16px;
  background: transparent; color: var(--op-groen-zacht);
  border: 0; border-radius: var(--r);
  font: 600 1.0625rem/1.2 var(--tekst); text-align: left; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.tab .ico { width: 24px; height: 24px; color: var(--salie); transition: color .2s; }
.tab:hover { background: rgba(245, 242, 232, .07); color: var(--op-groen); }
.tab[aria-selected="true"] { background: var(--creme); color: var(--mos); }
.tab[aria-selected="true"] .ico { color: var(--groen); }

.tabs__panelen { display: grid; gap: 16px; }
.paneel {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 4vw, 48px);
  background: var(--groen-diep);
  border: 1px solid rgba(245, 242, 232, .12);
  border-radius: var(--r);
}
.paneel[hidden] { display: none; }
.paneel--vol { grid-template-columns: 1fr; }
.paneel:focus-visible { outline-offset: 4px; }
.paneel__titel { font-family: var(--display); font-size: clamp(2.5rem, 4.4vw, 3.75rem); line-height: .95; letter-spacing: .01em; color: var(--op-groen); margin-bottom: 16px; }
.paneel__lede { font-size: 1.125rem; line-height: 1.6; color: var(--op-groen); max-width: 34rem; margin-bottom: 28px; }
.paneel__label { color: var(--op-groen-zacht); margin-bottom: 12px; }

.combi { border-top: 1px solid rgba(245, 242, 232, .2); max-width: 40rem; }
.combi li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 2px 20px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(245, 242, 232, .2); }
.combi a { font-weight: 700; color: var(--op-groen); text-decoration: underline; text-decoration-color: rgba(245, 242, 232, .35); text-underline-offset: .28em; text-decoration-thickness: 1.5px; transition: text-decoration-color .2s; }
.combi a:hover { text-decoration-color: var(--op-groen); }
.combi span { font-style: italic; color: var(--op-groen-zacht); font-size: .9375rem; line-height: 1.5; }
.combi span::before { content: "\201C"; }
.combi span::after { content: "\201D"; }

.stem {
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: 28px 28px 24px;
  background: var(--salie); color: var(--mos);
  border-radius: var(--r);
  position: relative;
}
.stem::before {
  content: "\201C"; font-family: var(--display); font-size: 6rem; line-height: .6; color: var(--groen); height: .4em;
}
.stem blockquote p { font-size: 1.25rem; line-height: 1.45; font-weight: 500; font-style: italic; margin: 0; }
.stem figcaption { display: flex; align-items: baseline; gap: 10px; font-size: .875rem; color: var(--mos); border-top: 1px solid rgba(38, 58, 31, .25); padding-top: 12px; }
.stem figcaption .mono { font-size: .875rem; }
.stem--annelien { background: var(--beige); }
.stem--lijst { background: var(--beige); justify-content: flex-start; gap: 14px; }
.stem--lijst::before { content: none; }
.stem--lijst .mono { margin: 0; color: var(--inkt-zacht); }
.stem--lijst .knop { margin-top: auto; align-self: flex-start; }
.kindlijst { columns: 2 9rem; column-gap: 20px; }
.kindlijst li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--lijn); font-size: .9375rem; font-weight: 500; }

.klachten__voet {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  margin-top: clamp(32px, 4vw, 48px); padding-top: 24px;
  border-top: 1px solid rgba(245, 242, 232, .18);
}
.klachten__voet .mono { margin: 0; color: var(--op-groen-zacht); }
.ookbij { display: flex; flex-wrap: wrap; gap: 4px 0; flex: 1 1 400px; color: var(--op-groen); font-size: .9375rem; }
.ookbij li:not(:last-child)::after { content: ","; margin-right: .4em; }

@media (max-width: 900px) {
  .klachten__kop { grid-template-columns: 1fr; }
  .tabs.is-actief { grid-template-columns: 1fr; gap: 16px; }
  .tabs__lijst { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .tab { width: auto; min-height: 44px; padding: 8px 14px 8px 12px; gap: 8px; font-size: .9375rem; border: 1px solid rgba(245, 242, 232, .3); border-radius: var(--r-pil); }
  .tab .ico { width: 20px; height: 20px; }
  .tab[aria-selected="true"] { border-color: var(--creme); }
  .paneel { grid-template-columns: 1fr; padding: 24px 20px; }
  .stem { padding: 24px 20px 20px; justify-content: flex-start; }
  .stem blockquote p { font-size: 1.125rem; }
}

@media (max-width: 560px) {
  .combi li { grid-template-columns: 1fr; }
}

/* ---------- Five elements ---------- */
.wiel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.wiel__tekst .titel-l { margin-bottom: 24px; max-width: 13ch; }
.wiel__tekst p:not(.inleiding) { color: var(--inkt-zacht); max-width: 34rem; }
.elementen { margin-top: 28px; border-top: 1px solid var(--lijn); }
.elementen div { display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.elementen dt { font-family: var(--display); font-size: 1.5rem; line-height: 1; letter-spacing: .02em; color: var(--groen); }
.elementen dd { font-weight: 500; }
.elementen dd .mono { display: inline-block; min-width: 6.5em; color: var(--inkt-zacht); font-weight: 400; }

.wiel__figuur { max-width: 520px; justify-self: center; width: 100%; }
.wiel__svg { width: 100%; height: auto; overflow: visible; }
.wiel__kring { fill: none; stroke: var(--groen); stroke-width: 1.4; }
.wiel__ster { fill: none; stroke: var(--salie); stroke-width: 1.2; stroke-dasharray: 4 6; }
.wiel__pijlen path { fill: none; stroke: var(--groen); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wiel__knoop circle { fill: var(--beige); stroke: var(--groen); stroke-width: 1.4; }
.wiel__naam { font-family: var(--display); font-size: 30px; letter-spacing: .03em; fill: var(--mos); text-anchor: middle; }
.wiel__seizoen { font-family: var(--mono); font-size: 13px; fill: var(--inkt-zacht); text-anchor: middle; }
.wiel__legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 20px; font-size: .875rem; color: var(--inkt-zacht); }
.wiel__legende span { display: inline-flex; align-items: center; gap: 10px; }
.wiel__legende svg { width: 32px; height: 8px; fill: none; stroke-width: 1.6; }
.wiel__legende span:first-child svg { stroke: var(--groen); }
.wiel__legende span:last-child svg { stroke: var(--salie); stroke-width: 2; }

@media (max-width: 900px) {
  .wiel { grid-template-columns: 1fr; }
  .wiel__figuur { order: -1; max-width: 420px; }
  .wiel__tekst .titel-l { max-width: none; }
}

/* ---------- First appointment + booking ---------- */
.afspraak__kop { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; margin-bottom: clamp(36px, 5vw, 56px); }
.afspraak__kop .titel-l { max-width: 20ch; }
.afspraak__kop p { margin: 0; color: var(--inkt-zacht); }

.stappen { --g: clamp(20px, 3vw, 40px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--g); position: relative; margin-bottom: clamp(48px, 6vw, 80px); }
.stap:not(:last-child)::before { content: ""; position: absolute; top: 22px; left: 52px; right: calc(8px - var(--g)); height: 1.4px; background: var(--groen); opacity: .45; }
.stap { position: relative; padding-right: 8px; }
.stap__nr {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px;
  background: var(--beige); border: 1.4px solid var(--groen); border-radius: 50%;
  font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--groen); position: relative;
}
.stap h3 { font-family: var(--tekst); font-weight: 700; font-size: 1.1875rem; color: var(--mos); margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.stap h3 .mono { color: var(--groen); background: var(--creme); padding: 2px 8px; border-radius: var(--r-pil); font-size: .75rem; }
.stap p { color: var(--inkt-zacht); margin: 0; max-width: 30rem; }

.boek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.boek__groepnaam { font-family: var(--mono); font-size: .8125rem; font-weight: 500; color: var(--inkt-zacht); padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--lijn-sterk); }
.boek__kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.tarief {
  display: flex; flex-direction: column;
  padding: 24px 22px 22px;
  background: var(--creme);
  border: 1px solid var(--lijn); border-radius: var(--r);
}
.tarief__naam { font-family: var(--tekst); font-weight: 700; font-size: 1.125rem; color: var(--mos); }
.tarief__duur { font-family: var(--display); font-size: 3.25rem; line-height: .9; color: var(--groen); margin: 14px 0 22px; padding: 14px 0; border-block: 1px solid var(--lijn); }
.tarief .knop { margin-top: auto; width: 100%; white-space: normal; text-align: center; }

.tarief--start { background: var(--groen); border-color: var(--groen); color: var(--op-groen); }
.tarief--start .tarief__naam, .tarief--start .tarief__duur { color: var(--op-groen); }
.tarief--start .tarief__duur { border-color: rgba(245, 242, 232, .2); }

.bel {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch;
  margin-top: clamp(32px, 4vw, 48px);
  background: var(--salie-licht); border-radius: var(--r); overflow: hidden;
}
.bel img { width: 100%; height: 100%; object-fit: cover; min-height: 240px; }
.bel__tekst { padding: clamp(24px, 4vw, 48px); align-self: center; }
.bel__tekst h3 { font-family: var(--display); font-size: clamp(2rem, 3vw, 2.5rem); line-height: 1; color: var(--mos); margin-bottom: 10px; }
.bel__tekst p { color: var(--inkt); max-width: 32rem; }
.bel__tekst .knop { margin: 4px 0 18px; }
.bel__noot { font-size: .875rem; color: var(--inkt-zacht) !important; margin: 0; }

@media (max-width: 1000px) {
  .boek { grid-template-columns: 1fr; }
  .stappen { grid-template-columns: 1fr; --g: 28px; gap: var(--g); }
  .stap:not(:last-child)::before { top: 52px; bottom: calc(8px - var(--g)); left: 21.3px; right: auto; width: 1.4px; height: auto; }
  .stap { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; }
  .stap__nr { grid-row: span 2; margin: 0; }
}
@media (max-width: 760px) {
  .bel { grid-template-columns: 1fr; }
  .bel img { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
}
@media (max-width: 560px) {
  .boek__kaarten { grid-template-columns: 1fr; }
  .tarief { padding: 20px 18px 18px; }
  .tarief__duur { font-size: 2.75rem; margin: 10px 0 16px; padding: 10px 0; }
  .bel__tekst .knop { white-space: normal; flex-wrap: wrap; }
}

/* ---------- Treatments ---------- */
.behandel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.behandel__intro .titel-l { margin-bottom: 20px; }
.behandel__intro p { color: var(--inkt-zacht); }
.behandel__intro img { margin-top: 28px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--r); }

.therapielijst { border-top: 1px solid var(--lijn-sterk); margin-bottom: 28px; }
.therapielijst a {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 24px; align-items: baseline;
  padding: 18px 8px; border-bottom: 1px solid var(--lijn);
  text-decoration: none; transition: background-color .2s;
}
.therapielijst a:hover { background: var(--beige); }
.therapielijst__naam { font-family: var(--display); font-size: 1.75rem; line-height: 1; letter-spacing: .02em; color: var(--mos); }
.therapielijst__wat { color: var(--inkt-zacht); font-size: .9375rem; }

@media (max-width: 900px) {
  .behandel { grid-template-columns: 1fr; }
  .behandel__intro img { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .therapielijst a { grid-template-columns: 1fr; padding: 14px 0; }
}

/* ---------- Kindertuina + qigong ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 40px); align-items: stretch; }
.duo__deel .titel-m { margin: 24px 0 12px; }
.duo__deel p { color: var(--inkt-zacht); max-width: 36rem; }
.duo__deel--foto img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--r); }
.duo__deel--salie { background: var(--salie); padding: clamp(24px, 4vw, 44px); border-radius: var(--r); display: flex; flex-direction: column; }
.duo__deel--salie .titel-m { margin-top: 0; }
.duo__deel--salie p { color: var(--inkt); }
.feiten { margin: 8px 0 24px; border-top: 1px solid rgba(38, 58, 31, .25); }
.feiten div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(38, 58, 31, .25); }
.feiten dt { color: var(--mos); }
.feiten dd { font-weight: 600; text-align: right; }
.duo__deel--salie .tekstlink { margin-top: auto; text-decoration-color: var(--mos); }

@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; }
}

/* ---------- Annelien ---------- */
.over { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.over img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.over__tekst .titel-l { margin-bottom: 20px; }
.over__tekst p:not(.inleiding) { color: var(--inkt-zacht); }
@media (max-width: 900px) { .over { grid-template-columns: 1fr; } }

/* ---------- Testimonials ---------- */
.getuigen { background: var(--beige); }
.getuigen__kop { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; margin-bottom: clamp(32px, 4vw, 56px); }
.getuigen__kop p { margin: 0; color: var(--inkt-zacht); }
.getuigen__raster { columns: 3 300px; column-gap: 16px; }
.getuige {
  break-inside: avoid; margin-bottom: 16px;
  padding: 26px 26px 22px;
  background: var(--creme); border-radius: var(--r);
  border: 1px solid var(--lijn);
}
.getuige__over { display: inline-block; margin-bottom: 16px; padding: 3px 10px; border-radius: var(--r-pil); background: var(--beige); color: var(--groen); }
.getuige blockquote p { margin: 0; font-size: 1rem; line-height: 1.65; }
.getuige figcaption { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--lijn); font-family: var(--display); font-size: 1.375rem; letter-spacing: .06em; color: var(--mos); }

/* ---------- Footer ---------- */
.voet { background: var(--mos); color: var(--op-groen); padding: clamp(56px, 7vw, 88px) 0 32px; }
.voet__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.voet__merk { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.voet h2 { color: var(--salie); margin-bottom: 10px; font-weight: 400; }
.voet p { color: var(--op-groen); }
.voet a { text-underline-offset: .25em; text-decoration-color: rgba(245, 242, 232, .4); }
.voet a:hover { text-decoration-color: currentColor; }
.voet .merk, .voet .knop { text-decoration: none; }
.voet__noot { font-size: .875rem; color: var(--op-groen-zacht) !important; }
.voet__wettelijk {
  margin: 48px 0 0; padding: 18px 0 0;
  border-top: 1px solid rgba(245, 242, 232, .16);
  font-family: var(--mono); font-size: .75rem; line-height: 1.6; color: var(--op-groen-zacht) !important; max-width: 62rem;
}
.voet__onder { display: flex; justify-content: space-between; gap: 16px; margin-top: 20px; font-size: .8125rem; color: var(--op-groen-zacht); }

@media (max-width: 900px) {
  .voet__grid { grid-template-columns: 1fr 1fr; }
  .voet__merk { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .voet__grid { grid-template-columns: 1fr; gap: 28px; }
}

.paneel__meer { display: inline-block; margin-top: 24px; font-weight: 700; font-size: .9375rem; color: var(--op-groen); text-decoration: underline; text-decoration-color: rgba(245, 242, 232, .45); text-underline-offset: .3em; text-decoration-thickness: 1.5px; }
.paneel__meer:hover { text-decoration-color: var(--op-groen); }

/* ---------- Mobile action bar ---------- */
.balk { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .balk {
    display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(245, 242, 232, .96); backdrop-filter: blur(8px);
    border-top: 1px solid var(--lijn);
  }
  .balk a {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
    border-radius: var(--r-pil); font-weight: 700; text-decoration: none; font-size: 1rem;
  }
  .balk__boek { background: var(--mos); color: var(--creme); }
  .balk__bel { border: 1.5px solid var(--lijn-sterk); color: var(--mos); }
}

/* ==========================================================================
   Therapieën page
   ========================================================================== */
.paginakop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; padding-block: clamp(48px, 7vw, 96px) clamp(32px, 4vw, 48px); }
.paginakop h1 { font-family: var(--display); font-size: clamp(4rem, 9vw, 8rem); line-height: .86; color: var(--mos); }
.paginakop p { margin: 0; max-width: 36rem; }
@media (max-width: 900px) { .paginakop { grid-template-columns: 1fr; } }

.filter {
  position: sticky; top: var(--band-h); z-index: 20;
  background: rgba(235, 230, 211, .96); backdrop-filter: blur(8px);
  border-block: 1px solid var(--lijn);
}
.filter[hidden] { display: none; }
.filter__in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-block: 14px; }
.filter__vraag { margin: 0; font-weight: 700; color: var(--mos); font-size: .9375rem; }
.filter__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter .chip { cursor: pointer; font-family: var(--tekst); min-height: 40px; }
.filter .chip[aria-pressed="true"] { background: var(--mos); border-color: var(--mos); color: var(--creme); }
.filter .chip[aria-pressed="true"] .ico { color: var(--salie-licht); }
.filter__teller { margin: 0 0 0 auto; color: var(--inkt-zacht); }

.therapieen { padding-block: clamp(16px, 3vw, 32px) clamp(64px, 8vw, 112px); }
.therapie {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr);
  gap: 24px clamp(24px, 4vw, 56px);
  padding-block: clamp(36px, 5vw, 64px);
  border-bottom: 1px solid var(--lijn-sterk);
}
.therapie[hidden] { display: none; }
.therapie:first-child { padding-top: clamp(24px, 3vw, 40px); }
.therapie__kop h2 { font-family: var(--display); font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: .92; color: var(--mos); margin-bottom: 14px; }
.therapie__lede { font-style: italic; font-weight: 500; color: var(--inkt-zacht); max-width: 22rem; }
.therapie__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.therapie__tags .mono { margin: 0 0 4px; width: 100%; color: var(--inkt-zacht); font-weight: 400; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: var(--r-pil); background: var(--creme); border: 1px solid var(--lijn); font-size: .8125rem; font-weight: 600; color: var(--mos); }
.tag .ico { width: 16px; height: 16px; color: var(--groen); }
.therapie__tekst { max-width: 40rem; }
.therapie__tekst h3 { font-family: var(--tekst); font-weight: 700; font-size: 1rem; color: var(--mos); margin: 24px 0 10px; }
.therapie__tekst > p:last-child { margin-bottom: 0; }
.puntlijst { columns: 2 12rem; column-gap: 24px; }
.puntlijst li { break-inside: avoid; padding: 6px 0 6px 18px; position: relative; border-bottom: 1px solid var(--lijn); font-size: .9375rem; }
.puntlijst li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 7px; height: 7px; border-radius: 50%; border: 1.4px solid var(--groen); }
.kader { margin-top: 20px; padding: 16px 18px; background: var(--creme); border-left: 3px solid var(--groen); font-size: .9375rem; border-radius: 0 var(--r) var(--r) 0; }
.therapie__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); position: sticky; top: calc(var(--band-h) + 90px); }

#laseracupunctuur img { object-position: 50% 82%; }
#tuina img { object-position: 50% 42%; }
#guasha img { object-position: 50% 32%; }
#cupping img { object-position: 50% 62%; }
.leeg { padding: 48px 0; color: var(--inkt-zacht); }
.kinderen-noot { margin: 32px 0 0; color: var(--inkt-zacht); }
.leeg[hidden] { display: none; }

@media (max-width: 1000px) {
  .therapie { grid-template-columns: minmax(0, 1fr) minmax(0, 14rem); }
  .therapie__tekst { grid-column: 1 / -1; grid-row: 2; }
  .therapie__foto { grid-column: 2; grid-row: 1; }
}
@media (max-width: 600px) {
  .filter { position: static; }
  .filter__teller { margin-left: 0; width: 100%; }
  .therapie { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .therapie__foto { grid-column: 1; grid-row: 2; }
  .therapie__tekst { grid-column: 1; grid-row: 3; }
  .therapie__foto img { aspect-ratio: 4 / 3; position: static; }
  .therapie__lede { max-width: none; }
}

/* Compact booking strip at the end of the therapy page */
.afsluit { background: var(--groen); color: var(--op-groen); padding-block: clamp(56px, 8vw, 104px); }
.afsluit__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.afsluit .titel-l { color: var(--op-groen); margin-bottom: 16px; }
.afsluit p { color: var(--op-groen-zacht); max-width: 30rem; }
.afsluit .knop--lijn { color: var(--op-groen); border-color: rgba(245, 242, 232, .4); }
.afsluit .knop--lijn:hover { background: var(--creme); color: var(--mos); }
.afsluit .knop--lijn .mono { color: inherit; }
.tarieflijst { border-top: 1px solid rgba(245, 242, 232, .2); }
.tarieflijst li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 20px; padding: 16px 0; border-bottom: 1px solid rgba(245, 242, 232, .2); }
.tarieflijst__naam { font-weight: 700; }
.tarieflijst__naam small { display: block; font-family: var(--mono); font-size: .75rem; font-weight: 400; color: var(--op-groen-zacht); }
.afsluit__tekst { margin-bottom: 20px; }
.tarieflijst__duur { font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--salie-licht); }
.tarieflijst .knop { min-height: 40px; padding: .45em 1.1em; font-size: .875rem; }
@media (max-width: 900px) { .afsluit__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .tarieflijst li { grid-template-columns: minmax(0, 1fr) auto; }
  .tarieflijst .knop { grid-column: 1 / -1; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}