/* deslop-ignore-file 06 11 19 33 — board picks: the hero photo shade and the photo-card fade are R16/R03's own; the display headings are R02/R05's; the open dot is R08's state colour; Inter is the text face of the two-face system (Poppins display + Inter text, CR-06), not a default. */
/* Tandzorg Veldhove v5 — built from the LOCKED studio files (05-visual-spec.md, 06-interaction-spec.md).
   1920-first: content sits in a 1360-px container, sizes are px with clamp() caps; only photos and the dark/pale grounds bleed. */
:root {
  --ink: #0B1215; --text: #24292C; --muted: #5A6266; --line: #DCE3E6;
  --dark: #10191E; --dark-2: #172329; --dark-muted: #9AA7AD; --fill-from: #6E7B81;
  --pale: #F2F7FA; --pale-line: #D6E4EB;
  --brand: #2E95B3; --brand-deep: #1F6F86;
  --f-display: "Poppins", system-ui, sans-serif;
  --f-text: "Inter", system-ui, sans-serif;
  --ease-out: cubic-bezier(.24, 1, .36, 1);
  --ease-menu: cubic-bezier(.6, .14, 0, 1);
  --gutter: 24px;
  --hero-h: clamp(760px, 100svh, 1080px);
  --gap-section: clamp(120px, 10.5vw, 200px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--text); font: 400 17px/1.6 var(--f-text); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; border-radius: 4px; }
.chapter-dark :focus-visible, .hero :focus-visible, .foot :focus-visible { outline-color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 50; padding: 12px 16px; background: var(--ink); color: #fff; border-radius: 6px; }
.skip:focus { top: 16px; }
.wrap { width: min(1360px, calc(100% - 2 * var(--gutter))); margin: 0 auto; }

/* ── shared: buttons (pills, R16), arrows + text roll (R06) ──────────── */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font: 500 15px/1 var(--f-text); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out, transform 80ms ease-out; }
.btn:active { transform: scale(.97); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #E8EEF1; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #26333A; }
.btn-line { background: transparent; color: var(--ink); border-color: rgba(11, 18, 21, .35); }
.btn-line:hover { border-color: var(--ink); background: rgba(11, 18, 21, .05); }
.btn-line-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-line-light:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.arw { position: relative; width: 12px; height: 12px; overflow: hidden; flex: none; }
.arw svg { position: absolute; inset: 0; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 400ms var(--ease-out); }
.arw .a2 { transform: translate(-100%, 100%); }
.btn:hover .a1, .btn:focus-visible .a1, .member-link:hover .a1, .member-link:focus-visible .a1 { transform: translate(100%, -100%); }
.btn:hover .a2, .btn:focus-visible .a2, .member-link:hover .a2, .member-link:focus-visible .a2 { transform: translate(0, 0); }
.roll { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.roll-in { position: relative; display: inline-block; overflow: hidden; line-height: 1.3; }
.roll-in > span { display: block; transition: transform 450ms var(--ease-out); }
.roll-in > span + span { position: absolute; left: 0; top: 100%; }
.roll:hover .roll-in > span:first-child, .roll:focus-visible .roll-in > span:first-child, .member-link:hover .roll-in > span:first-child { transform: translateY(-110%); }
.roll:hover .roll-in > span + span, .roll:focus-visible .roll-in > span + span, .member-link:hover .roll-in > span + span { transform: translateY(-100%); }
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.chev { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 300ms var(--ease-out); }

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.logo-mark { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); }
.logo-mark svg { width: 56%; height: 56%; fill: currentColor; }
.logo-word { font: 400 20px/1 var(--f-display); letter-spacing: -0.01em; }
.logo-word b { font-weight: 500; }
.logo-dark { color: var(--ink); }
.logo-dark .logo-mark { background: var(--ink); border-color: var(--ink); color: #fff; }

.h2 { margin: 0; font: 500 clamp(32px, 2.75vw, 52px)/1.1 var(--f-display); color: var(--ink); letter-spacing: -0.02em; }
.h2.on-dark { color: #fff; }
.lede { margin: 18px 0 0; max-width: 48ch; font-size: 18px; color: var(--muted); }
.pill { display: inline-block; margin: 0 0 24px; padding: 9px 18px; border-radius: 999px; background: var(--pale); color: var(--brand-deep); font: 500 15px/1 var(--f-display); }
.pill-dark { background: rgba(255, 255, 255, .08); color: #BFD9E3; }
.note { margin: 28px 0 0; font-size: 14px; color: var(--muted); }

/* ── S1 hero (R16 UNTU CARE on the 1360 container) ──────────────────── */
.hero { position: sticky; top: min(0px, calc(100svh - var(--hero-h))); z-index: 0; height: var(--hero-h); overflow: hidden; color: #fff; background: var(--dark); }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-film { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.film-toggle { position: absolute; z-index: 6; left: 24px; bottom: 24px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; background: rgba(11, 18, 21, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: background-color 200ms ease-out; }
.film-toggle:hover { background: rgba(11, 18, 21, .55); }
.film-toggle .ico { width: 16px; height: 16px; }
.film-toggle .i-play, .film-toggle[aria-pressed="true"] .i-pause { display: none; }
.film-toggle[aria-pressed="true"] .i-play { display: block; }
/* cool the warm photo toward R16/R14's blue clinical grading (composite round 1: warm hexagon wall vs a blue reference) */
.hero-media::after { content: ""; position: absolute; inset: 0; background: #2A6E96; mix-blend-mode: color; opacity: .26; pointer-events: none; }
.hero-media img, .hero-film { filter: saturate(.9) brightness(1.06) contrast(1.02); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 14, 18, .74) 0%, rgba(8, 14, 18, .34) 34%, rgba(8, 14, 18, 0) 62%, rgba(8, 14, 18, 0) 70%, rgba(8, 14, 18, .68) 100%), linear-gradient(to right, rgba(8, 14, 18, .42) 0%, rgba(8, 14, 18, 0) 50%); }
.hero-in { position: relative; width: min(1360px, calc(100% - 2 * var(--gutter))); height: 100%; margin: 0 auto; }
.nav { position: fixed; z-index: 60; top: 16px; left: 50%; transform: translateX(-50%); width: min(1384px, calc(100% - 2 * var(--gutter) + 24px)); height: 64px; padding: 0 12px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #fff; border-radius: 16px; transition: background-color 300ms ease-out, color 300ms ease-out, box-shadow 300ms ease-out; }
.nav.is-solid { background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink); box-shadow: 0 6px 20px rgba(11, 18, 21, .08); }
.nav.is-solid .nav-links { color: var(--text); }
.nav.is-solid .logo-mark { background: var(--ink); border-color: var(--ink); color: #fff; }
.nav.is-solid .btn-light { background: var(--ink); color: #fff; }
.nav.is-solid .btn-light:hover { background: #26333A; }
.nav.is-solid .btn-line-light { background: transparent; color: var(--ink); border-color: rgba(11, 18, 21, .3); -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav .logo { color: inherit; }
.nav-links { display: flex; align-items: center; gap: 30px; font: 500 15px/1 var(--f-text); color: rgba(255, 255, 255, .92); }
.nav:not(.is-solid) .nav-links, .nav:not(.is-solid) .logo { text-shadow: 0 1px 10px rgba(8, 14, 18, .55); }
.nav-act { justify-self: end; display: flex; align-items: center; gap: 10px; }
.nav-act .btn-line-light { background: rgba(11, 18, 21, .32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.menu-btn { display: none; }
.dd { position: relative; }
.dd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.dd.open .dd-btn .chev { transform: rotate(180deg); }
.dd-panel { position: absolute; left: 50%; top: 100%; z-index: 20; padding-top: 18px; transform: translateX(-50%); clip-path: inset(0 0 100% 0); pointer-events: none; transition: clip-path 420ms var(--ease-menu); }
.dd.open .dd-panel { clip-path: inset(0 -24px -24px -24px); pointer-events: auto; }
.dd-list { margin: 0; padding: 8px; list-style: none; min-width: 300px; background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .16); font: 400 15px/1.3 var(--f-text); }
.dd-list a { display: block; padding: 11px 14px; border-radius: 8px; text-decoration: none; color: var(--text); transition: background-color 160ms ease-out; }
.dd-list a:hover, .dd-list a:focus-visible { background: var(--pale); }
.hero-copy { position: absolute; z-index: 4; left: 0; bottom: 72px; max-width: 760px; }
.hero-label { margin: 0 0 18px; font: 500 13px/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.hero h1 { margin: 0; font: 500 clamp(40px, 3.4vw, 64px)/1.06 var(--f-display); letter-spacing: -0.02em; color: #fff; }
.hero h1 .l2 { color: rgba(255, 255, 255, .72); }
.hero-sub { margin: 20px 0 32px; max-width: 54ch; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .88); }
.hero-right { position: absolute; z-index: 4; right: 0; bottom: 72px; width: 380px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-film { animation: settle 1400ms var(--ease-out) both; }
  @keyframes settle { from { transform: scale(1.04); } to { transform: none; } }
}

/* hours card: R10 content + expand; glass on the photo (R16), light in S7 */
.hours { position: relative; padding: 18px 20px 6px; border-radius: 16px; }
.hours-glass { background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .26); color: #fff; }
.hours-light { background: var(--pale); color: var(--text); border: 1px solid var(--pale-line); }
.hours-label { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .86; }
.hours-status { margin: 6px 0 0; font-size: 15px; }
.hours-status strong { font-size: 20px; font-weight: 500; margin-right: 4px; }
.dot { display: inline-block; width: 8px; height: 8px; margin: 0 8px 3px 0; border-radius: 50%; background: #BDBDBD; vertical-align: middle; }
.dot.is-open { background: #7FD3EA; } .dot.is-soon { background: #F2C46B; } .dot.is-closed { background: #F4A196; }
.hours-light .dot.is-open { background: var(--brand); } .hours-light .dot.is-soon { background: #C98A12; } .hours-light .dot.is-closed { background: #C2453A; }
.dot.is-open { box-shadow: 0 0 0 0 rgba(127, 211, 234, .6); }
@media (prefers-reduced-motion: no-preference) { .dot.is-open { animation: breathe 2.4s ease-in-out infinite; } @keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(127, 211, 234, .5); } 50% { box-shadow: 0 0 0 5px rgba(127, 211, 234, 0); } } }
.hours-bar { height: 3px; margin: 14px 0 8px; border-radius: 2px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.hours-light .hours-bar { background: rgba(11, 18, 21, .1); }
.hours-bar span { display: block; height: 100%; width: var(--p, 0%); background: currentColor; }
.hours-today { display: flex; justify-content: space-between; margin: 0; font-size: 14px; opacity: .92; }
.week-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 620ms var(--ease-out); }
.week-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 620ms; }
.hours.open .week-wrap { grid-template-rows: 1fr; }
.hours.open .week-in { visibility: visible; transition-delay: 0s; }
.hours.open .hours-today { display: none; }
.week { list-style: none; margin: 12px 0 0; padding: 0; }
.week li { display: flex; justify-content: space-between; padding: 7px 8px; border-radius: 6px; font-size: 14.5px; transition: background-color 160ms ease-out; }
@media (prefers-reduced-motion: no-preference) {
  .week li { opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), background-color 160ms ease-out; }
  .hours.open .week li { opacity: 1; transform: none; transition-delay: calc(var(--k, 0) * 40ms + 160ms), calc(var(--k, 0) * 40ms + 160ms), 0s; }
}
.week li:hover { background: rgba(255, 255, 255, .1); }
.hours-light .week li:hover { background: rgba(11, 18, 21, .04); }
.week li.is-today { background: rgba(255, 255, 255, .16); font-weight: 500; }
.hours-light .week li.is-today { background: rgba(31, 111, 134, .1); color: var(--ink); }
.week li.is-today span:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; border-radius: 50%; background: currentColor; }
.week-note { margin: 8px 8px 2px; font-size: 13px; opacity: .9; }
.hours-toggle { display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 10px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .22); background: none; color: inherit; font: 500 14px/1 var(--f-text); cursor: pointer; }
.hours-light .hours-toggle { border-top-color: rgba(11, 18, 21, .1); }
.hours.open .hours-toggle .chev { transform: rotate(180deg); }

/* ── the sheet: every section is an opaque panel; each rises over the one before (rounded-top grammar) ── */
.sheet { position: relative; z-index: 2; }
.chapter-dark { background: var(--dark); color: #fff; }

/* S2 · dark chapter over the hero (R11 + Maxim: not white) */
.sheet > .chapter-dark:first-child { border-radius: 28px 28px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .22); }
.s2-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; padding: var(--gap-section) 0 calc(var(--gap-section) + 28px); }
.s2-text { grid-column: 1 / 8; }
.s2-text .h2 { max-width: 16ch; }
.statement-text { margin: 32px 0 0; max-width: 34ch; font: 400 clamp(22px, 2.1vw, 40px)/1.36 var(--f-display); letter-spacing: -0.015em; color: #fff; }
.s2-photo { grid-column: 9 / 13; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; }
.s2-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* S3 · team (R04: grayscale at rest, colour + lift on hover/focus) */
.team { position: relative; z-index: 1; margin-top: -28px; padding: var(--gap-section) 0 calc(var(--gap-section) / 2); background: #fff; border-radius: 28px 28px 0 0; }
.head-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; margin-bottom: 56px; }
.head-row .lede { margin: 0; justify-self: end; }
.team-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.member-link { display: block; text-decoration: none; color: inherit; }
.member-photo { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; background: #E9EDEF; transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
.member-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.04); transition: filter 500ms var(--ease-out), transform 900ms var(--ease-out); }
/* deslop-ignore-next-line 26 — R04's hover state: the active card sits higher */
.member:hover .member-photo, .member-link:focus-visible .member-photo { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11, 18, 21, .14); }
.member:hover .member-photo img, .member-link:focus-visible .member-photo img { filter: none; transform: scale(1.03); }
.member-name { margin: 20px 0 4px; font: 500 22px/1.2 var(--f-display); color: var(--ink); }
.member-disc { margin: 0; font: 500 15px/1.4 var(--f-text); color: var(--brand-deep); }
.member-line { margin: 8px 0 0; font-size: 15px; color: var(--muted); }
.member-more { margin-top: 14px; font: 500 15px/1 var(--f-text); color: var(--ink); }

/* S4 · problems scroll-through (R03 card, R06 rows) */
.treat { padding: calc(var(--gap-section) / 2) 0 var(--gap-section); background: #fff; }
.treat-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.treat-head { grid-column: 1 / 8; }
.treat-list { grid-column: 1 / 8; margin: 48px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.treat-row { padding: 28px 32px; border-radius: 12px; transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out); }
.treat-row h3 { margin: 0 0 6px; font: 500 26px/1.2 var(--f-display); color: inherit; }
.treat-who { margin: 0 0 8px; font: 500 15px/1.4 var(--f-text); color: var(--brand-deep); transition: color 300ms var(--ease-out); }
.treat-row p:last-child { margin: 0; max-width: 52ch; color: var(--muted); transition: color 300ms var(--ease-out); }
.treat-row.is-active { background: var(--dark); color: #fff; }
.treat-row.is-active .treat-who { color: #8FCFE2; }
.treat-row.is-active p:last-child { color: #C9D3D7; }
.treat-photo-m { display: none; }
.treat-stage { grid-column: 8 / 13; grid-row: 1 / 3; }
.treat-card { position: sticky; top: 120px; height: min(680px, calc(100svh - 200px)); border-radius: 12px; overflow: hidden; background: #E9ECEE; }
.treat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 500ms var(--ease-out), transform 900ms var(--ease-out); }
.treat-card img.is-on { opacity: 1; transform: scale(1); }
.treat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(31, 111, 134, 0) 52%, rgba(31, 111, 134, .92) 100%); pointer-events: none; }
.treat-card figcaption { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 24px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; color: #fff; }
.treat-card figcaption span:first-child { font: 500 24px/1.2 var(--f-display); }
.stage-count { font-size: 14px; color: #E6F1F5; white-space: nowrap; }

/* S5 · the first consultation, pinned (Maxim: pin so the next section isn't visible yet) */
.steps { position: relative; height: 260vh; background: #fff; }
.steps-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.steps-stage > .wrap { width: min(1360px, calc(100% - 2 * var(--gutter))); }
.steps-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; }
.steps-head .lede { margin-top: 12px; }
.steps-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
.steps-photo { grid-column: 1 / 6; position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #E9ECEE; }
.steps-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 500ms var(--ease-out), transform 900ms var(--ease-out); }
.steps-photo img.is-on { opacity: 1; transform: none; }
.steps-list { grid-column: 7 / 13; list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; }
.step-ico { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--pale); color: var(--brand-deep); }
.step h3 { margin: 2px 0 4px; font: 500 24px/1.2 var(--f-display); color: var(--ink); }
.step p { margin: 0; max-width: 46ch; font-size: 16px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .js .step { opacity: .32; transform: translateY(12px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
  .js .step.is-lit { opacity: 1; transform: none; }
}

/* S6 · FAQ on pale (rounded-top grammar) */
.faq { position: relative; z-index: 1; padding: var(--gap-section) 0 calc(var(--gap-section) + 28px); background: var(--pale); border-radius: 28px 28px 0 0; }
.faq-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.faq-head { grid-column: 1 / 6; }
.faq-head .btns { margin-top: 28px; }
.faq-list { grid-column: 7 / 13; }
.q { border-top: 1px solid var(--pale-line); }
.q:last-child { border-bottom: 1px solid var(--pale-line); }
.q h3 { margin: 0; }
.q-ico { width: 20px; height: 20px; color: var(--brand-deep); }
.q button { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 22px 56px 22px 0; border: 0; background: none; text-align: left; font: 500 19px/1.4 var(--f-text); color: var(--ink); cursor: pointer; transition: color 200ms ease-out; }
.q button:hover { color: var(--brand-deep); }
.plus { position: absolute; right: 8px; top: 50%; width: 18px; height: 18px; margin-top: -9px; transition: transform 360ms var(--ease-out); }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; border-radius: 1px; background: currentColor; }
.plus::after { transform: rotate(90deg); }
.q.open .plus { transform: rotate(45deg); }
.a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms var(--ease-out); }
.a > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 360ms; }
.q.open .a { grid-template-rows: 1fr; }
.q.open .a > div { visibility: visible; transition-delay: 0s; }
.a p { margin: 0 0 24px; max-width: 60ch; color: #3A4146; }

/* S7 · consultation + contact */
.contact { position: relative; z-index: 2; margin-top: -28px; padding: var(--gap-section) 0 calc(var(--gap-section) + 28px); background: #fff; border-radius: 28px 28px 0 0; }
.contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
.contact-left { grid-column: 1 / 6; }
.contact-left .btns { margin-top: 32px; }
.h-big { font-size: clamp(44px, 4.6vw, 88px); font-weight: 400; line-height: 1.02; letter-spacing: -0.03em; color: var(--text); }
.dot-brand { display: inline-block; width: .17em; height: .17em; margin-left: .05em; border-radius: .035em; background: var(--brand); }
.facts { margin: 40px 0 0; font-style: normal; }
.fact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fact-list li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
.fact-list .ico { color: var(--brand-deep); margin-top: 2px; }
.map-under { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; margin-top: 24px; }
.contact-map { grid-column: 7 / 13; }
.contact-map iframe { display: block; width: 100%; height: 600px; border: 0; border-radius: 16px; background: #E9ECEE; }
.route { margin-top: 0; }

/* footer: the dark bookend */
.foot { position: relative; z-index: 3; margin-top: -28px; padding: 96px 0 48px; background: var(--dark); color: #fff; border-radius: 28px 28px 0 0; }
.foot-flat { margin-top: 0; border-radius: 0; }
.foot-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 40px; }
.foot-brand { grid-column: 1 / 6; }
.foot-brand p { margin: 18px 0 24px; color: var(--dark-muted); }
.foot-links { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 16px 48px; font: 500 15px/1 var(--f-text); color: #fff; align-content: start; }
.foot-legal { grid-column: 1 / -1; margin: 24px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: var(--dark-muted); }

/* ── profile page ───────────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; }
.back { font: 500 15px/1 var(--f-text); color: var(--ink); }
.topbar-act { justify-self: end; display: flex; gap: 10px; }
.prof-hero { padding: 96px 0 var(--gap-section); }
.prof-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
.prof-photo { grid-column: 1 / 6; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; }
.prof-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof-text { grid-column: 7 / 13; }
.h1-prof { margin: 0; font: 500 clamp(40px, 3.6vw, 68px)/1.05 var(--f-display); color: var(--ink); letter-spacing: -0.02em; }
.prof-disc { margin: 12px 0 0; font: 500 18px/1.4 var(--f-text); color: var(--brand-deep); }
.prof-intro { margin: 24px 0 36px; max-width: 46ch; font-size: 19px; line-height: 1.6; color: var(--text); }
.prof-focus { padding: 0 0 var(--gap-section); }
.focus-cards { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.focus-photo { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #E9ECEE; }
.focus-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--ease-out); }
.focus-cards li:hover .focus-photo img { transform: scale(1.03); }
.focus-cards h3 { margin: 18px 0 6px; font: 500 22px/1.25 var(--f-display); color: var(--ink); }
.focus-cards p { margin: 0; color: var(--muted); }
.prof-cv { padding: 0 0 var(--gap-section); }
.cv-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; margin-bottom: 48px; }
.cv-head .lede { margin: 0; justify-self: end; }
.cert-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cert { position: relative; padding: 28px 28px 26px; background: #fff; border: 1px solid var(--line); border-radius: 12px; transition: border-color 200ms ease-out, box-shadow 300ms var(--ease-out); }
.cert::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--pale-line); border-radius: 8px; pointer-events: none; }
.cert:hover { border-color: var(--brand-deep); box-shadow: 0 10px 28px rgba(11, 18, 21, .06); }
.cert-ico { width: 28px; height: 28px; color: var(--brand-deep); }
.cert-kind { margin: 18px 0 6px; font: 500 13px/1 var(--f-text); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-deep); }
.cert h3 { margin: 0; font: 500 20px/1.3 var(--f-display); color: var(--ink); }
.cert-by { margin: 8px 0 0; font-size: 15px; color: var(--muted); }
.cv-foot { margin-top: 48px; max-width: 70ch; }
.cv-sub { margin: 0 0 8px; font: 500 18px/1.3 var(--f-display); color: var(--ink); }
.prof-quote { padding: var(--gap-section) 0 calc(var(--gap-section) + 28px); border-radius: 28px 28px 0 0; background: var(--dark-2); }
.quote-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
.quote-grid > div { grid-column: 1 / 8; }
.quote-photo { grid-column: 9 / 13; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; }
.quote-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the measure belongs to the quote's own size: 30ch on the blockquote meant 30 × the 17-px body → a 255-px column (Maxim: "dit is een fout") */
.quote { margin: 0 0 48px; }
.quote p { margin: 0; max-width: 26ch; font: 400 clamp(26px, 2.4vw, 44px)/1.3 var(--f-display); letter-spacing: -0.015em; color: #fff; }
.quote footer { margin-top: 20px; font: 500 15px/1 var(--f-text); color: var(--dark-muted); }

/* ── question assistant (R19, scripted) ─────────────────────────────── */
.ask-btn { position: fixed; z-index: 40; right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 500 15px/1 var(--f-text); cursor: pointer; box-shadow: 0 8px 20px rgba(11, 18, 21, .2); outline: 1px solid rgba(255, 255, 255, .22); outline-offset: -1px; transition: transform 200ms var(--ease-out), background-color 200ms ease-out, opacity 200ms ease-out; }
/* deslop-ignore-next-line 26 — R19's measured hover: the button lifts 3 px */
.ask-btn:hover { transform: translateY(-3px); background: #26333A; }
.ask-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
body.ask-open .ask-btn { opacity: 0; pointer-events: none; }
.ask-panel { position: fixed; z-index: 45; right: 24px; bottom: 24px; width: min(390px, calc(100vw - 32px)); height: min(600px, calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 20px; box-shadow: 0 12px 32px rgba(11, 18, 21, .18); }
.ask-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ask-panel { opacity: 0; transform: translateY(16px) scale(.98); transition: opacity 250ms ease, transform 250ms ease; }
  .ask-panel.is-open { opacity: 1; transform: none; }
}
.ask-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: var(--dark); color: #fff; }
.ask-title { margin: 0; font: 500 16px/1.2 var(--f-display); }
.ask-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--dark-muted); }
.ask-close { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background-color 160ms ease-out, transform 300ms var(--ease-out); }
.ask-close:hover { background: rgba(255, 255, 255, .2); transform: rotate(90deg); }
.ask-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ask-msgs { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--pale); }
.msg { max-width: 86%; padding: 11px 14px; border-radius: 14px; font-size: 15px; line-height: 1.5; }
.msg-bot { align-self: flex-start; background: #fff; color: var(--text); border-bottom-left-radius: 4px; }
.msg-user { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.msg a { color: var(--brand-deep); }
.msg .btns { margin-top: 10px; gap: 8px; }
.msg .btn { height: 36px; padding: 0 14px; font-size: 13.5px; }
.typing { display: inline-flex; gap: 4px; padding: 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .typing i { animation: blink 900ms ease-in-out infinite; } .typing i:nth-child(2) { animation-delay: 150ms; } .typing i:nth-child(3) { animation-delay: 300ms; }
  @keyframes blink { 0%, 100% { opacity: .25; transform: none; } 50% { opacity: .9; transform: translateY(-2px); } }
  .msg { animation: msg-in 260ms var(--ease-out) both; } @keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; background: #fff; }
.chip { padding: 8px 12px; border: 1px solid var(--pale-line); border-radius: 999px; background: #fff; color: var(--ink); font: 500 13.5px/1 var(--f-text); cursor: pointer; transition: background-color 160ms ease-out, border-color 160ms ease-out; }
.chip:hover { background: var(--pale); border-color: var(--brand-deep); }
.ask-form { display: flex; gap: 8px; padding: 12px 14px; background: #fff; }
.ask-form input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font: 400 15px/1 var(--f-text); color: var(--ink); }
.ask-form input:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 1px; }
.ask-form button { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ink); color: #fff; cursor: pointer; }
.ask-form button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ask-foot { margin: 0; padding: 0 14px 12px; background: #fff; font-size: 12px; color: var(--muted); }

/* section reveals (R06 rise, scaled to 32 px) */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ── below 1100 px: stacked, no pins, no scroll-through ─────────────── */
@media (max-width: 1099px) {
  :root { --gutter: 16px; --gap-section: 88px; }
  /* phone hero: the photo on top with the menu over it; headline, actions and hours on white below (readable, no text on a busy photo) */
  .hero { position: relative; top: auto; height: auto; overflow: visible; background: #fff; color: var(--text); padding-bottom: 56px; }
  .hero-media { position: relative; inset: auto; height: 56svh; min-height: 380px; }
  .hero-shade { bottom: auto; height: 56svh; min-height: 380px; background: linear-gradient(to bottom, rgba(8, 14, 18, .55) 0%, rgba(8, 14, 18, 0) 34%); }
  .hero-in { position: static; width: calc(100% - 32px); height: auto; }
  .nav { top: 10px; width: calc(100% - 20px); height: 60px; padding: 0 8px 0 10px; grid-template-columns: 1fr auto; }
  .nav.is-solid .menu-btn { background: var(--ink); border-color: var(--ink); }
  .film-toggle { left: 16px; bottom: auto; top: calc(max(56svh, 380px) - 56px); }
  .nav-links, .nav-act { display: none; }
  .menu-btn { display: grid; place-items: center; width: 48px; height: 44px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; background: rgba(11, 18, 21, .35); color: #fff; cursor: pointer; }
  .menu-btn svg { width: 22px; height: 22px; overflow: hidden; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .ml { transition: transform 900ms cubic-bezier(.24, .43, .15, .97); }
  .menu-btn:hover .ml, .menu-btn[aria-expanded="true"] .ml { transform: translateX(24px); }
  .m-menu { position: fixed; z-index: 59; left: 10px; right: 10px; top: 78px; padding: 8px; background: #fff; border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .2); clip-path: inset(0 0 100% 0); transition: clip-path 500ms var(--ease-menu); }
  .m-menu.is-open { clip-path: inset(0 -24px -24px -24px); }
  .m-menu ul { margin: 0; padding: 0; list-style: none; }
  .m-menu a:not(.btn) { display: block; padding: 16px 14px; border-radius: 8px; font: 500 19px/1.2 var(--f-display); text-decoration: none; color: var(--text); }
  .m-call { width: calc(100% - 16px); margin: 8px; }
  .hero-copy { position: static; max-width: none; margin-top: 32px; }
  .hero-label { color: var(--muted); }
  .hero h1 { color: var(--ink); }
  .hero h1 .l2 { color: var(--muted); }
  .hero-sub { margin: 14px 0 24px; font-size: 16px; color: var(--text); }
  .hero-copy .btns { flex-direction: column; }
  .hero-copy .btn { width: 100%; }
  .hero-copy .btn-light { background: var(--ink); color: #fff; }
  .hero-copy .btn-line-light { color: var(--ink); border-color: rgba(11, 18, 21, .35); }
  .hero-right { position: static; width: auto; margin-top: 24px; }
  .hours-glass { background: var(--pale); border-color: var(--pale-line); color: var(--text); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hours-glass .hours-bar { background: rgba(11, 18, 21, .1); }
  .hours-glass .hours-toggle { border-top-color: rgba(11, 18, 21, .1); }
  .hours-glass .dot.is-open { background: var(--brand); }
  .hours-glass .week li.is-today { background: rgba(31, 111, 134, .1); }
  .sheet > .chapter-dark:first-child { border-radius: 28px 28px 0 0; box-shadow: none; }
  .s2-grid, .treat-grid, .faq-grid, .contact-grid, .prof-grid, .cv-grid, .foot-grid { grid-template-columns: 1fr; }
  .s2-text, .s2-photo, .treat-head, .treat-list, .faq-head, .faq-list, .contact-left, .contact-map, .prof-photo, .prof-text, .cv-grid > .h2, .cv-grid > div, .foot-brand, .foot-links { grid-column: 1 / -1; }
  .s2-photo { margin-top: 40px; aspect-ratio: 4 / 3; }
  .statement-text { font-size: 24px; }
  .head-row { grid-template-columns: 1fr; margin-bottom: 32px; }
  .head-row .lede { justify-self: start; }
  .team-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .member { scroll-snap-align: start; }
  .treat-stage { display: none; }
  .treat-list { gap: 40px; }
  .treat-row { padding: 0; }
  .treat-row.is-active { background: none; color: inherit; }
  .treat-row.is-active .treat-who { color: var(--brand-deep); }
  .treat-row.is-active p:last-child { color: var(--muted); }
  .treat-photo-m { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 16px; border-radius: 12px; }
  .treat-row h3 { font-size: 22px; }
  .steps { height: auto; padding: var(--gap-section) 0; }
  .steps-stage { position: static; height: auto; display: block; }
  .steps-head { display: block; margin-bottom: 32px; }
  .steps-head .btn { margin-top: 24px; }
  .steps-grid { grid-template-columns: 1fr; }
  .steps-photo { display: none; }
  .steps-list { grid-column: 1 / -1; gap: 24px; }
  .step h3 { font-size: 20px; }
  .faq-list { margin-top: 32px; }
  .q button { font-size: 17px; }
  .contact-map { margin-top: 40px; }
  .contact-map iframe { height: 75vw; max-height: 480px; }
  .map-under { grid-template-columns: 1fr; }
  .foot-links { grid-template-columns: repeat(2, auto); }
  .topbar-in { grid-template-columns: 1fr auto; }
  .back { display: none; }
  .topbar-act .btn-line { display: none; }
  .prof-hero { padding-top: 40px; }
  .prof-text { margin-top: 0; order: -1; }
  .prof-photo { margin-top: 32px; aspect-ratio: 4 / 3; }
  .prof-photo img { object-position: 50% 20%; }
  .focus-cards { grid-template-columns: 1fr 1fr; gap: 16px; }
  .focus-cards h3 { font-size: 18px; }
  .cv-head { grid-template-columns: 1fr; margin-bottom: 32px; }
  .cv-head .lede { justify-self: start; }
  .cert-grid { grid-template-columns: 1fr; }
  .quote-grid { grid-template-columns: 1fr; }
  .quote-grid > div, .quote-photo { grid-column: 1 / -1; }
  .quote-photo { margin-top: 40px; aspect-ratio: 4 / 3; }
  .ask-btn { right: 16px; bottom: 16px; height: 52px; width: 52px; padding: 0; justify-content: center; }
  .ask-btn span { display: none; }
  body:not(.ask-ready) .ask-btn { opacity: 0; pointer-events: none; transform: translateY(12px); }
  .ask-panel { inset: 0; right: 0; bottom: 0; width: 100%; height: 100%; border-radius: 0; }
}
@media (hover: none) { .member-photo img { filter: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .hours:not(.open) .week-in, .q:not(.open) .a > div { display: none; }
}

/* demo label (deployed copy): a fictive practice must never pass for a real one */
.demo-pill { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); white-space: nowrap; z-index: 90; padding: 8px 14px; border-radius: 999px;
  background: rgba(16, 25, 30, .88); color: #fff; font: 500 13px/1.2 var(--f-text); text-decoration: none;
  backdrop-filter: blur(6px); }
.demo-pill:hover, .demo-pill:focus-visible { background: var(--ink); text-decoration: underline; }
@media (max-width: 760px) { .demo-pill { left: 12px; bottom: 30px; transform: none; padding: 7px 11px; font-size: 12px; } .demo-pill .long { display: none; } }