/* Fysio Eemkade · Compleet — licht en warm. De plek draagt de site: de warme behandelkamer in film en groot
   beeld, de naam langs de onderrand. Linnen, walnoot en tan uit de foto's zelf; een rustige serif voor de koppen. */
:root {
  --bg: #efede9;
  --surface: #e6ded3;
  --tan: #cdb8a1;
  --ink: #2a2119;
  --muted: #554a3f;
  --deep: #2a2119;
  --deep-ink: #efede9;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
  --m: clamp(16px, 3.4vw, 48px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--step-body); line-height: 1.55; overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 0.98; }
h2 { font-size: var(--step-head); }
h3 { font-size: 36px; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 10px 16px; z-index: 99; }
.skip:focus { left: 8px; }
.arrow { width: 1.1em; height: 1.1em; flex: none; transition: transform .25s var(--ease); }

.button { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 24px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 500; border: 0; font: inherit; font-weight: 500; cursor: pointer; transition: background-color .25s, transform .25s var(--ease); }
.button:hover { background: #45372a; transform: translateY(-2px); }
.button:hover .arrow, .link:hover .arrow { transform: translateX(4px); }
.button:active { transform: scale(.98); }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-underline-offset: 5px; min-height: 44px; }
.link:hover { text-decoration-thickness: 2px; }

/* kopbalk */
.top { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: 32px; padding: 14px var(--m); background: var(--bg); transition: background-color .3s, color .3s, transform .35s var(--ease); }
.top--over { background: rgba(30, 23, 17, .38); color: var(--deep-ink); }
.top--over.is-solid { background: var(--bg); color: var(--ink); }
.top.is-hidden { transform: translateY(-100%); }
.wordmark { font-family: var(--serif); font-size: 36px; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.top__nav { display: flex; gap: 24px; margin-left: auto; font-size: 16px; font-weight: 500; }
.top__nav a { text-decoration: none; padding: 8px 0; }
.top__nav a:hover, .top__nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.top__cta { min-height: 46px; display: inline-flex; align-items: center; padding: 0 20px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 500; font-size: 16px; transition: transform .25s var(--ease); }
.top--over .top__cta { background: var(--deep-ink); color: var(--ink); }
.top--over.is-solid .top__cta { background: var(--ink); color: var(--bg); }
.top__cta:hover { transform: translateY(-2px); }
.top__menu { display: none; }
.menu { position: fixed; inset: 0; z-index: 39; background: var(--bg); color: var(--ink); padding: 96px var(--m) 32px; display: flex; flex-direction: column; justify-content: space-between; }
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: 6px; }
.menu nav a { font-family: var(--serif); font-size: 36px; line-height: 1.15; text-decoration: none; }
.menu p { font-size: 19px; }

/* hero: de film over het hele scherm, de naam langs de onderrand */
.hero { position: relative; height: 100svh; min-height: 620px; color: var(--deep-ink); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__film { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__low { position: absolute; inset: auto 0 0; padding: 0 var(--m) 18px; background: rgba(30, 23, 17, .42); padding-top: 28px; }
.hero__sub { font-size: 19px; line-height: 1.35; max-width: 44ch; }
.hero__name { font-size: 13.6vw; line-height: .82; letter-spacing: -0.035em; white-space: nowrap; margin-top: 10px; margin-left: -0.04em; }
.hero__name span { display: inline-block; }
.film-toggle { position: absolute; right: var(--m); top: 92px; z-index: 3; width: 44px; height: 44px; border: 0; background: rgba(30, 23, 17, .55); color: #fff; cursor: pointer; display: grid; place-items: center; }
.film-toggle .i-pause { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.film-toggle .i-play { display: none; width: 0; height: 0; border-left: 13px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
.film-toggle[aria-pressed="true"] .i-pause { display: none; }
.film-toggle[aria-pressed="true"] .i-play { display: block; }

/* intro */
.intro { padding: 160px var(--m) 120px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px 24px; }
.intro h2 { grid-column: 1 / 9; max-width: 16ch; }
.intro__cols { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.intro__cols > p { grid-column: 1 / 7; font-size: var(--step-lead); line-height: 1.4; }
.intro__facts { grid-column: 8 / 13; margin: 0; display: grid; gap: 4px; align-content: start; }
.intro__facts div { display: flex; justify-content: space-between; gap: 16px; background: var(--surface); padding: 18px 22px; }
.intro__facts dt { color: var(--muted); }
.intro__facts dd { margin: 0; font-weight: 600; text-align: right; }

/* lichaamskaart */
.body { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px 24px; padding: 120px var(--m); background: var(--surface); }
.body__head { grid-column: 1 / 5; }
.body__head p { margin-top: 20px; max-width: 34ch; }
.body__map { grid-column: 5 / 8; position: relative; aspect-ratio: 1 / 2; max-height: 76svh; justify-self: center; height: 76svh; }
.body__fig { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--tan); transition: opacity .35s var(--ease), transform .5s var(--ease); }
.body__fig .fig-line { fill: none; stroke: #b39c84; stroke-width: 4; stroke-linecap: round; }
[data-toon="voor"] .body__fig--achter, [data-toon="achter"] .body__fig--voor { opacity: 0; transform: scaleX(-1); }
[data-toon="voor"] .spot--achter { opacity: 0; pointer-events: none; }
.spot { transition: opacity .3s; }
.body__kant { display: flex; gap: 6px; margin-top: 28px; }
.body__kant button { font: inherit; font-size: 16px; min-height: 44px; padding: 0 16px; border: 0; background: var(--bg); color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s; }
.body__kant button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.spot { position: absolute; transform: translate(-50%, -50%); width: 44px; height: 44px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.spot::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--ink); transition: transform .25s var(--ease), background-color .25s; }
.spot[aria-pressed="true"]::before { background: #b5532f; transform: scale(1.35); }
.spot:hover::before { transform: scale(1.3); }
.spot span { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 16px; font-weight: 600; background: var(--bg); padding: 4px 10px; pointer-events: none; }
.spot[data-plek="schouder"] span, .spot[data-plek="pols"] span, .spot[data-plek="heup"] span, .spot[data-plek="knie"] span, .spot[data-plek="enkel"] span { left: auto; right: 44px; }
.body__out { grid-column: 8 / 13; align-self: center; background: var(--bg); padding: 36px; outline: none; }
.body__out h3 { font-size: 36px; }
.body__out > p { margin-top: 14px; }
.body__out dl { margin: 22px 0 26px; display: grid; gap: 4px; }
.body__out dl div { display: flex; justify-content: space-between; gap: 16px; background: var(--surface); padding: 12px 16px; font-size: 16px; }
.body__out dd { margin: 0; font-weight: 600; text-align: right; }

/* zo gaat het: een vaste foto, de stappen lopen omlaag */
.steps { position: relative; height: 320vh; }
.steps__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: 5fr 7fr; }
.steps__bg { grid-column: 2; grid-row: 1; width: 100%; height: 100%; object-fit: cover; }
.steps__list { grid-column: 1; grid-row: 1; align-self: center; list-style: none; margin: 0; padding: 0 var(--m); display: grid; gap: 12px; }
.steps__list li { font-size: 24px; color: var(--muted); transition: color .3s; }
.steps__list li.is-on { color: var(--ink); font-weight: 600; }
.steps__list h2 { font-size: var(--step-head); color: var(--ink); margin-bottom: 20px; font-weight: 400; }
.steps__pics > div { position: absolute; inset: 0; pointer-events: none; }
.sp { position: absolute; object-fit: cover; opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.sp--l { left: 46%; top: 50%; width: 220px; aspect-ratio: 4 / 5; }
.sp--r { right: 6%; top: 16%; width: 240px; aspect-ratio: 16 / 11; }
.steps__pics > div.is-on .sp { opacity: 1; transform: none; }
.steps__marks { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(6, 1fr); pointer-events: none; }

/* band van ongelijke panelen */
.band { padding: 160px 0 120px; }
.band h2 { padding-left: calc(var(--m) + (100vw - 2 * var(--m)) / 6); margin-bottom: 64px; }
.band__row { display: flex; height: 68svh; }
.band__p { flex: var(--g) 1 0; position: relative; overflow: hidden; transition: flex-grow .5s var(--ease); color: var(--deep-ink); }
.band__p:hover { flex-grow: 6; }
.band__p img { width: 100%; height: 100%; object-fit: cover; }
.band__p span { position: absolute; left: 24px; top: 24px; font-family: var(--serif); font-size: 36px; line-height: 1.05; background: rgba(30, 23, 17, .5); padding: 10px 14px; }
.band__cap { padding: 18px var(--m) 0; font-size: 16px; }

/* over: brede foto, kleurtegel met kaartje, feiten */
.about { padding: 120px var(--m); }
.about h2 { max-width: 14ch; }
.about__lead { margin-top: 24px; max-width: 48ch; font-size: 24px; line-height: 1.45; }
.about__tiles { margin-top: 72px; display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.about__photo { position: relative; }
.about__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.about__photo p { position: absolute; right: 0; top: 0; width: 320px; background: var(--bg); padding: 20px; font-size: 16px; }
.about__map { background: var(--tan); aspect-ratio: 16 / 16; display: grid; align-content: space-between; padding: 24px; }
.about__map svg { width: 100%; fill: var(--ink); }
.about__map svg circle { fill: #b5532f; }
.about__map dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 16px; }
.about__map dl div, .groep__facts div { display: flex; flex-direction: column-reverse; }
.about__map dt { color: var(--ink); opacity: 1; }
.about__map dd { margin: 0; font-family: var(--serif); font-size: 36px; line-height: 1; }

/* citaat */
.quote { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; padding: 160px var(--m); }
.quote__portrait { grid-column: 2 / 6; width: 100%; height: 70svh; object-fit: cover; }
.quote__text { grid-column: 7 / 13; padding-top: 120px; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--serif); font-size: 36px; line-height: 1.15; max-width: 26ch; }
.quote__who { margin-top: 32px; font-size: 16px; color: var(--muted); }
.quote .link { margin-top: 8px; }
.quote__small { width: 200px; aspect-ratio: 1; object-fit: cover; margin: 64px 0 0 calc(100% / 6 * 3); }

/* prijzen als menukaart */
.prices { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; padding: 120px var(--m) 160px; }
.prices__left { grid-column: 1 / 4; }
.prices__left h2 { font-size: 64px; }
.prices__left img { margin-top: 40px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.prices__list { grid-column: 5 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.prices h3 { font-family: var(--sans); font-size: 24px; font-weight: 500; letter-spacing: 0; display: flex; justify-content: space-between; align-items: baseline; }
.prices h3 span { font-size: 16px; color: var(--muted); font-weight: 400; }
.prices ul { list-style: none; margin: 28px 0 32px; padding: 0; display: grid; gap: 22px; }
.prices li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; font-size: 19px; }
.prices b { font-weight: 500; font-variant-numeric: tabular-nums; }
.prices small { grid-column: 1 / -1; font-size: 16px; color: var(--muted); }

/* vragen naast een hoge foto */
.faq { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; background: var(--surface); padding: 0 var(--m); }
.faq__text { grid-column: 1 / 6; padding: 120px 0; }
.faq__facts { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 6px; font-size: 19px; }
.acc details { padding: 14px 0; }
.acc summary { font-size: 19px; font-weight: 500; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; min-height: 44px; align-items: center; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease); }
.acc details[open] summary::after { transform: rotate(-135deg); }
.acc details p { margin-top: 8px; color: var(--muted); font-size: 16px; max-width: 52ch; }
.faq__go { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.faq__pics { grid-column: 7 / 13; position: relative; padding-bottom: 80px; }
.faq__tall { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; margin-top: -60px; }
.faq__sq { position: absolute; left: -40px; bottom: 40px; width: 33%; aspect-ratio: 1; object-fit: cover; border: 8px solid var(--surface); }

/* bezoek: kaartje op een foto */
.visit { position: relative; height: 100svh; min-height: 640px; }
.visit__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visit__card { position: relative; margin: 60px var(--m) 0 auto; width: 380px; background: var(--bg); padding: 32px 32px 0; display: grid; gap: 16px; }
.visit__card h2 { font-size: 36px; }
.visit__card dl { margin: 0; display: grid; gap: 6px; font-size: 16px; }
.visit__card dl div { display: flex; justify-content: space-between; }
.visit__card dd { margin: 0; font-variant-numeric: tabular-nums; }
.visit__book { margin: 8px -32px 0; min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 500; }
.visit__book:hover .arrow { transform: translateX(4px); }

/* paginakop subpagina's */
.phead { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding: 120px var(--m) 0; align-items: end; min-height: 92svh; }
.phead__text { grid-column: 1 / 6; padding-bottom: 48px; display: grid; gap: 24px; justify-items: start; }
.phead h1 { font-size: clamp(3.5rem, 7vw, 7rem); line-height: .92; }
.phead__text > p { font-size: var(--step-lead); line-height: 1.35; max-width: 30ch; }
.phead__img { grid-column: 6 / 13; position: relative; height: 78svh; overflow: hidden; }
.phead__img img, .phead__img video { width: 100%; height: 100%; object-fit: cover; }
.phead__img .film-toggle { top: 16px; }
.phead__lines { display: grid; gap: 6px; font-size: 19px; }
.score { font-size: 19px; }
.score b { font-family: var(--serif); font-size: 64px; font-weight: 400; line-height: 1; margin-right: 6px; }

/* klachten per stuk */
.klachten { padding: 160px var(--m) 80px; }
.klachten > h2 { margin-bottom: 80px; }
.kl { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; margin-bottom: 120px; }
.kl__img { grid-column: 1 / 7; }
.kl__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kl__text { grid-column: 8 / 13; display: grid; gap: 16px; justify-items: start; }
.kl--r .kl__img { grid-column: 7 / 13; grid-row: 1; }
.kl--r .kl__text { grid-column: 1 / 6; grid-row: 1; }
.kl__n { font-weight: 600; }
.vormen, .toegang { padding: 120px var(--m) 160px; background: var(--surface); }
.vormen h2, .toegang h2 { margin-bottom: 56px; }
.vormen__list { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; }
.vormen__list dt { font-family: var(--serif); font-size: 36px; line-height: 1.05; }
.vormen__list dd { margin: 10px 0 0; font-size: 16px; }

/* team */
.people { padding: 120px var(--m); display: grid; gap: 160px; }
.person { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.person__img { grid-column: 1 / 6; position: sticky; top: 100px; }
.person__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.person__text { grid-column: 7 / 13; display: grid; gap: 18px; justify-items: start; }
.person--r .person__img { grid-column: 8 / 13; grid-row: 1; }
.person--r .person__text { grid-column: 1 / 7; grid-row: 1; }
.person__role { font-weight: 600; font-size: 19px; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { background: var(--surface); padding: 6px 14px; font-size: 16px; }
.person__days { font-size: 16px; color: var(--muted); }
.person__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.person__row img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* galerij */
.gallery { padding: 140px var(--m) 120px; }
.gallery__top { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button, .chips span, .days button, .times button, .week button { font: inherit; font-size: 16px; min-height: 44px; padding: 0 16px; border: 0; background: var(--surface); color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.gal { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 12px; }
.gal li { break-inside: avoid; margin-bottom: 12px; }
.gal li[hidden] { display: none; }
.gal a { display: block; overflow: hidden; }
.gal img { width: 100%; transition: transform .6s var(--ease); }
.gal a:hover img { transform: scale(1.04); }
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(20, 15, 11, .94); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: 64px 16px 24px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-height: calc(100svh - 120px); margin: 0 auto; }
.lightbox button { font: inherit; background: var(--bg); color: var(--ink); border: 0; min-width: 48px; min-height: 48px; cursor: pointer; }
.lightbox__close { position: absolute; top: 12px; right: 12px; padding: 0 16px; }
.groep { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding: 40px var(--m) 160px; align-items: center; }
.groep__film { grid-column: 1 / 8; position: relative; }
.groep__film video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.groep__film .film-toggle { top: 16px; }
.groep__text { grid-column: 8 / 13; display: grid; gap: 20px; justify-items: start; }
.groep__facts { margin: 0; display: flex; gap: 32px; }
.groep__facts dd { margin: 0; font-family: var(--serif); font-size: 36px; }
.groep__facts dt { font-size: 16px; color: var(--muted); }
.vormen__list--4 { grid-template-columns: repeat(4, 1fr); }
.toegang .vormen__list { grid-template-columns: repeat(4, 1fr); }

/* rekenhulp */
.calc { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding: 120px var(--m); background: var(--deep); color: var(--deep-ink); }
.calc__text { grid-column: 1 / 5; }
.calc__text p { margin-top: 20px; max-width: 36ch; }
.calc__box { grid-column: 6 / 13; display: grid; gap: 28px; }
.calc fieldset { border: 0; margin: 0; padding: 0; }
.calc legend { font-weight: 600; margin-bottom: 12px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips label { position: relative; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; }
.calc .chips span { background: #45372a; color: var(--deep-ink); }
.chips input:checked + span, .calc .chips input:checked + span { background: var(--tan); color: var(--ink); }
.chips input:focus-visible + span { outline: 3px solid currentColor; outline-offset: 2px; }
.calc__range { display: grid; gap: 12px; font-weight: 600; }
.calc__range input { width: 100%; accent-color: var(--tan); height: 32px; }
.calc__out { display: grid; gap: 6px; background: var(--bg); color: var(--ink); padding: 24px 28px; }
.calc__out strong { font-family: var(--serif); font-weight: 400; font-size: 64px; line-height: 1; }
.calc__note { font-size: 16px; color: #d8cfc4; }

/* reviews */
.rv { padding: 40px var(--m) 140px; }
.rv h2 { margin-bottom: 56px; }
.rv__list { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 40px; }
.rv__list li { break-inside: avoid; margin-bottom: 48px; }
.rv__list blockquote { margin: 0; }
.rv__list blockquote p { font-family: var(--serif); font-size: 24px; line-height: 1.2; }
.rv__who { margin-top: 12px; font-size: 16px; color: var(--muted); }
.rv__go { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; margin-top: 24px; }
.strip ul { list-style: none; margin: 0; padding: 0 var(--m) 120px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 8px; align-items: start; }
.strip li:nth-child(2) { margin-top: 64px; }
.strip li:nth-child(4) { margin-top: 32px; }
.strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* afspraak */
.book { padding: 130px var(--m) 120px; }
.book__head { max-width: 760px; }
.book h1 { font-size: clamp(3.5rem, 7vw, 7rem); line-height: .92; }
.book__head p { margin-top: 20px; font-size: var(--step-lead); line-height: 1.35; max-width: 38ch; }
.book__form { margin-top: 72px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 96px 24px; align-items: start; }
.book__step { grid-column: 1 / 8; border: 0; margin: 0; padding: 0; min-width: 0; }
.book__step legend { font-family: var(--serif); font-size: 36px; line-height: 1; padding: 0; margin-bottom: 24px; }
.who { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.who label { position: relative; }
.who input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.who span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; min-height: 84px; padding: 12px 16px; background: var(--surface); transition: background-color .2s; }
.who span img { grid-row: 1 / 3; width: 56px; height: 56px; object-fit: cover; object-position: 50% 25%; }
.who b { font-weight: 600; }
.who small { font-size: 16px; color: var(--muted); grid-column: 2; }
.who span:not(:has(img)) b, .who span:not(:has(img)) small { grid-column: 1 / 3; }
.who input:checked + span { background: var(--tan); }
.who input:focus-visible + span { outline: 3px solid var(--ink); }
.week { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.week p { font-weight: 600; }
.days { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.days button { display: grid; justify-items: center; gap: 0; padding: 10px 4px; min-height: 84px; }
.days button span { font-size: 16px; text-transform: none; }
.days button strong { font-size: 24px; font-weight: 600; line-height: 1.1; }
.days button small { font-size: 16px; color: var(--muted); }
.days button:disabled { opacity: .45; cursor: not-allowed; }
.days button[aria-pressed="true"], .times button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.days button[aria-pressed="true"] small { color: var(--deep-ink); }
.times { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 48px; align-items: center; }
.times button { font-variant-numeric: tabular-nums; }
.days button:not(:disabled):hover, .times button:hover, .filters button:hover, .chips label:hover span, .week button:hover { background: var(--tan); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fields label, .ask__form label { display: grid; gap: 6px; font-weight: 500; font-size: 16px; }
.fields .wide { grid-column: 1 / -1; }
input, textarea { font: inherit; font-size: 16px; border: 0; background: var(--surface); color: var(--ink); padding: 14px 16px; min-height: 52px; width: 100%; }
input:focus, textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; }
.book__sum { grid-column: 9 / 13; grid-row: 1 / span 4; position: sticky; top: 100px; background: var(--deep); color: var(--deep-ink); padding: 32px; display: grid; gap: 20px; }
.book__sum h2 { font-size: 36px; }
.book__sum dl { margin: 0; display: grid; gap: 12px; }
.book__sum dt { font-size: 16px; color: #d8cfc4; }
.book__sum dd { margin: 0; font-weight: 500; }
.book__sum .button { background: var(--tan); color: var(--ink); justify-content: space-between; }
.book__err { background: #f3d9cd; color: #5a1f0c; padding: 12px 14px; font-size: 16px; }
.book__note { font-size: 16px; color: #d8cfc4; }
.book__done { margin-top: 72px; background: var(--surface); padding: 48px; max-width: 760px; display: grid; gap: 16px; outline: none; }
.book__done h2 { font-size: 64px; }

/* contact */
.ask { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding: 140px var(--m); }
.ask__text { grid-column: 1 / 6; display: grid; gap: 20px; align-content: start; }
.ask__text img { margin-top: 20px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ask__form { grid-column: 7 / 13; display: grid; gap: 16px; align-content: start; justify-items: stretch; }
.ask__form .button { justify-self: start; }
.ask__ok { background: var(--surface); padding: 14px 16px; }
.phead__lines a { text-underline-offset: 5px; }

/* voet */
.foot { background: var(--deep); color: var(--deep-ink); padding: 96px var(--m) 32px; overflow: hidden; }
.foot__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; font-size: 16px; }
.foot__h { font-weight: 600; margin-bottom: 10px; }
.foot__grid a { text-underline-offset: 4px; }
.foot__name { font-family: var(--serif); font-size: 14.2vw; line-height: .9; letter-spacing: -0.03em; white-space: nowrap; margin: 72px 0 24px -0.04em; color: var(--tan); }
.foot__small { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px 48px; font-size: 16px; color: #d8cfc4; }
.foot__small p { max-width: 60ch; }
.callbar { display: none; }

/* bewegen */
.js .rise { opacity: 0; transform: translateY(26px); animation: rise .9s var(--ease) forwards; animation-delay: var(--d, 0ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.js .hero__film { animation: slow 14s ease-out both; }
@keyframes slow { from { transform: scale(1.08); } }
.js .shutter { clip-path: inset(0 0 100% 0); animation: shutter 1.1s var(--ease) .15s forwards; }
@keyframes shutter { to { clip-path: inset(0 0 0 0); } }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 1180px) {
  .top__nav { gap: 16px; font-size: 16px; }
  .prices__list { grid-template-columns: 1fr; gap: 24px; }
  .vormen__list, .toegang .vormen__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1020px) {
  .top__nav, .top__cta { display: none; }
  .top__menu { display: inline-flex; margin-left: auto; align-items: center; min-height: 44px; padding: 0 18px; border: 0; font: inherit; font-weight: 600; background: var(--ink); color: var(--bg); cursor: pointer; }
  .top--over .top__menu { background: var(--deep-ink); color: var(--ink); }
  .top--over.is-solid .top__menu, .menu-open .top__menu { background: var(--ink); color: var(--bg); }
  .menu-open .top { background: var(--bg); color: var(--ink); }
}

@media (max-width: 860px) {
  body { padding-bottom: 72px; }
  h2 { font-size: 36px; }
  .wordmark { font-size: 24px; }
  .hero { height: 100svh; min-height: 560px; }
  .hero__film { object-position: 52% 50%; }
  .hero__low { padding-top: 20px; padding-bottom: 12px; }
  .hero__sub { font-size: 16px; }
  .hero__name { font-size: 15.4vw; white-space: normal; }
  .film-toggle { top: 76px; }
  .intro { display: block; padding: 96px var(--m) 72px; }
  .intro__cols { display: block; margin-top: 28px; }
  .intro__cols > p { font-size: 19px; }
  .intro__facts { margin-top: 28px; }
  .body { display: block; padding: 88px var(--m); }
  .body__map { height: 64svh; margin: 32px auto; width: auto; }
  .spot span { font-size: 16px; }
  .body__out { padding: 24px; }
  .steps { height: 260vh; }
  .steps__stage { grid-template-columns: 1fr; grid-template-rows: 58svh 1fr; }
  .steps__bg { grid-column: 1; grid-row: 1; }
  .steps__list { grid-row: 2; align-self: center; padding: 20px var(--m); gap: 6px; }
  .steps__list li { font-size: 19px; }
  .steps__list h2 { font-size: 36px; margin-bottom: 10px; }
  .sp--l { display: none; }
  .sp--r { right: 16px; top: 64px; width: 40vw; }
  .band { padding: 96px 0 72px; }
  .band h2 { padding-left: var(--m); font-size: 36px; margin-bottom: 32px; }
  .band__row { display: grid; grid-template-columns: 64fr 36fr; grid-template-rows: 1fr 1fr; height: 84svh; }
  .band__p:nth-child(3) { grid-column: 1; grid-row: 2; }
  .band__p:nth-child(4) { grid-column: 2; grid-row: 2; }
  .band__p:nth-child(3) { grid-column: 2; }
  .band__p:nth-child(4) { grid-column: 1; grid-row: 2; }
  .band__p:nth-child(2) { grid-column: 2; grid-row: 1; }
  .band__p:nth-child(3) { grid-column: 2; grid-row: 2; }
  .band__p:nth-child(4) { grid-column: 1; grid-row: 2; }
  .band__p span { font-size: 24px; left: 12px; top: 12px; }
  .about { padding: 72px var(--m) 24px; }
  .about__lead { font-size: 19px; }
  .about__tiles { grid-template-columns: 1fr; margin-top: 40px; }
  .about__photo img { aspect-ratio: 4 / 3; }
  .about__photo p { position: static; width: auto; padding: 16px 0 0; }
  .about__map { aspect-ratio: auto; gap: 28px; }
  .quote { display: block; padding: 72px var(--m) 56px; }
  .quote__portrait { width: 72%; height: auto; aspect-ratio: 3 / 4; }
  .quote__text { padding-top: 32px; }
  .quote blockquote p { font-size: 24px; }
  .quote__small { width: 44%; margin: 24px 0 0 auto; }
  .prices { display: block; padding: 56px var(--m) 88px; }
  .prices__left h2 { font-size: 36px; }
  .prices__left img { width: 60%; margin: 24px 0 40px; }
  .prices li { font-size: 16px; }
  .faq { display: flex; flex-direction: column-reverse; padding: 0 var(--m); }
  .faq__text { padding: 40px 0 88px; }
  .faq__pics { padding: 0; margin: 0 calc(-1 * var(--m)); }
  .faq__tall { margin-top: 0; aspect-ratio: 4 / 5; }
  .faq__sq { left: auto; right: 16px; bottom: -32px; width: 38%; }
  .visit { height: auto; min-height: 0; padding-bottom: 32px; }
  .visit__bg { position: relative; height: 70svh; }
  .visit__card { position: relative; top: auto; margin: -80px 16px 0; width: auto; }
  .phead { display: block; min-height: 0; padding: 104px var(--m) 0; }
  .phead__text { padding-bottom: 32px; }
  .phead h1 { font-size: 15vw; }
  .phead__text > p { font-size: 19px; }
  .phead__img { height: 60svh; margin: 0 calc(-1 * var(--m)); }
  .klachten { padding: 96px var(--m) 40px; }
  .klachten > h2 { margin-bottom: 40px; }
  .kl { display: block; margin-bottom: 72px; }
  .kl__text { margin-top: 20px; }
  .vormen, .toegang { padding: 88px var(--m); }
  .vormen__list, .toegang .vormen__list { grid-template-columns: 1fr; gap: 32px; }
  .vormen__list dt { font-size: 24px; }
  .people { padding: 88px var(--m); gap: 96px; }
  .person { display: block; }
  .person__img { position: static; margin-bottom: 28px; }
  .person h2 { font-size: 36px; }
  .gallery { padding: 88px var(--m); }
  .gal { columns: 2; column-gap: 8px; }
  .gal li { margin-bottom: 8px; }
  .groep { display: block; padding: 24px var(--m) 96px; }
  .groep__film { margin: 0 calc(-1 * var(--m)) 32px; }
  .calc { display: block; padding: 88px var(--m); }
  .calc__box { margin-top: 32px; }
  .calc__out strong { font-size: 64px; }
  .rv { padding: 24px var(--m) 88px; }
  .rv__list { columns: 1; }
  .rv__list blockquote p { font-size: 23px; }
  .strip ul { grid-template-columns: 1fr 1fr; padding-bottom: 88px; }
  .strip li:nth-child(n) { margin-top: 0; }
  .strip li:nth-child(even) { margin-top: 40px; }
  .book { padding: 104px var(--m) 88px; }
  .book h1 { font-size: 15vw; }
  .book__head p { font-size: 19px; }
  .book__form { display: block; margin-top: 48px; }
  .book__step { margin-bottom: 80px; }
  .book__step legend { font-size: 36px; }
  .who { grid-template-columns: 1fr; }
  .days { grid-template-columns: repeat(3, 1fr); }
  .fields { grid-template-columns: 1fr; }
  .book__sum { position: static; padding: 24px; }
  .book__done { padding: 28px; }
  .ask { display: block; padding: 88px var(--m); }
  .ask__form { margin-top: 40px; }
  .foot { padding: 72px var(--m) 32px; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot__name { font-size: 15vw; }
  .callbar { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; transform: translateY(140%); transition: transform .35s var(--ease); }
  .callbar.is-on { transform: none; }
  .callbar a { min-height: 52px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--bg); font-weight: 600; text-decoration: none; }
  .callbar a + a { background: var(--tan); color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rise, .js .reveal { opacity: 1; transform: none; animation: none; transition: none; }
  .js .shutter { clip-path: none; animation: none; }
  .js .hero__film { animation: none; }
  .steps { height: auto; }
  .steps__stage { position: relative; }
  .sp { transition: none; }
  .band__p, .gal img, .button, .top, .callbar { transition: none; }
}
.book__done[hidden], .ask__ok[hidden] { display: none; }