/* ==========================================================================
   N&N Dental — "Atelier" design system (2026)
   Editorial luxury: Bodoni Moda display, Jost text, ivory paper, brass gold,
   hairline rules, calm sections, art-directed photography.
   Used by every page in design-new/. Read the component index at the bottom
   of each section before inventing new markup.
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted, OFL) ---------- */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/bodoni-moda-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/bodoni-moda-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/jost-normal.woff2') format('woff2');
}

/* ---------- 1. Tokens ---------- */

:root {
  /* Paper & ink */
  --ivory:      #F6F1E7;  /* page */
  --paper:      #FBF8F2;  /* raised surfaces */
  --bone:       #ECE3D1;  /* alternate sections */
  --sand:       #D9CBAE;  /* hairlines on light */
  --ink:        #1D1A15;  /* headings, dark bands */
  --ink-2:      #2B2720;  /* dark band surfaces */
  --text:       #3E3931;  /* body copy — 10.4:1 on ivory */
  --muted:      #6A6357;  /* secondary copy — 5.3:1 on ivory */

  /* Gold, evolved: decorative gold + a darker brass for text */
  --gold:       #A8884A;  /* rules, ornaments, large type only */
  --brass:      #7A5E2B;  /* small gold text — 5.6:1 on ivory */
  --champagne:  #D8C192;  /* gold on ink — 9.6:1 */
  --on-ink:     #EFE7D6;  /* text on ink */
  --on-ink-muted: #B5AC9B;

  --rule:       1px solid var(--sand);
  --rule-ink:   1px solid rgba(216, 193, 146, 0.22);

  /* Type */
  --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans:  'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;

  --fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 6.25rem);
  --fs-h1:      clamp(2.4rem, 1.6rem + 3.6vw, 4.75rem);
  --fs-h2:      clamp(1.9rem, 1.4rem + 2.1vw, 3.25rem);
  --fs-h3:      clamp(1.3rem, 1.15rem + 0.6vw, 1.65rem);
  --fs-lede:    clamp(1.12rem, 1.02rem + 0.45vw, 1.38rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9rem;
  --fs-kicker:  0.78rem;

  /* Space & layout */
  --max:     1320px;
  --measure: 64ch;
  --gutter:  clamp(16px, 4.5vw, 64px);
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem; --s-4: 2.5rem;
  --s-5: 4rem;    --s-6: 6rem;   --s-7: 9rem;
  --section: clamp(4.5rem, 3rem + 7vw, 10rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 2. Reset & base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Bodoni at a small optical size: sturdier hairlines and wider N/T, so the big
     headings stay elegant but readable (client feedback 2026-10-07). Jost has no
     opsz axis, so body text is unaffected. */
  font-variation-settings: "opsz" 14;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

/* Paper grain — fixed, sub-perceptual texture over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { width: auto; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
  hyphens: auto; /* long Dutch compounds ("Verwerkingsverantwoordelijke") must not burst 320px */
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 {
  font-family: var(--sans);
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}

/* Italic accent inside any heading: <h1>Rust in <em>de stoel</em></h1> */
h1 em, h2 em, h3 em, .display em {
  font-style: italic;
  font-weight: 500;
  color: var(--brass);
}

strong, b { font-weight: 500; color: var(--ink); }

a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color .3s var(--ease), background-size .45s var(--ease);
}
a:hover { color: var(--brass); }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, label:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}
.band :focus-visible, .site-footer :focus-visible, .price-card--featured :focus-visible { outline-color: var(--champagne); }
/* Location cards: the ring sits on the ivory page around the dark card, so brass (5.4:1). */
.place:focus-visible { outline-color: var(--brass); }

ul, ol { margin: 0 0 1.2em; padding-left: 1.2em; }
li { margin-bottom: 0.4em; }
li::marker { color: var(--gold); }

hr { border: 0; border-top: var(--rule); margin: var(--s-5) 0; }

::selection { background: var(--champagne); color: var(--ink); }

.skip-link {
  position: absolute;
  left: var(--s-2);
  top: -100px;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--on-ink);
  background-image: none;
}
.skip-link:focus { top: var(--s-2); color: var(--on-ink); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 3. Layout primitives ---------- */

.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(860px + var(--gutter) * 2); }

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--bone { background: var(--bone); }
.section--paper { background: var(--paper); }
/* Two consecutive same-tone sections: collapse the doubled gap */
.section--flush-top { padding-top: 0; }
.section--ruled { border-top: var(--rule); }

/* 12-column editorial grid */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px); row-gap: var(--s-4); }

/* Split: sticky label column + body column — the workhorse section layout */
.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(24px, 5vw, 96px);
  row-gap: var(--s-3);
  align-items: start;
}
.split__aside { position: sticky; top: 120px; }
.split--even { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
.split__body { max-width: var(--measure); }
.split__body--wide { max-width: none; }

.measure { max-width: var(--measure); }
.stack > * + * { margin-top: var(--s-3); }
.center { text-align: center; margin-inline: auto; }
.mt-1 { margin-top: var(--s-2); } .mt-2 { margin-top: var(--s-3); } .mt-3 { margin-top: var(--s-4); }

@media (max-width: 860px) {
  .split, .split--even { grid-template-columns: minmax(0, 1fr); }
  .split__aside { position: static; }
}

/* ---------- 4. Editorial typography components ---------- */

/* Kicker: small spaced caps above headings */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  margin: 0 0 1.4rem;
  font-family: var(--sans);
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
}
.kicker::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
}
.kicker--plain::before { display: none; }


/* Section heading block */
.sec-head { max-width: 46rem; margin-bottom: var(--s-5); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .kicker::after { content: ""; width: 2.5rem; height: 1px; background: var(--gold); }
.sec-head p:not(.kicker) { color: var(--muted); font-size: var(--fs-lede); line-height: 1.55; }

.display {
  font-family: var(--serif);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--text);
  font-weight: 300;
  max-width: 38em;
}

.small, .note { font-size: var(--fs-small); color: var(--muted); }

/* Long-form copy */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 1.6em; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); }
.prose h3 { margin-top: 1.8em; }
.prose h4 { margin: 2.2em 0 0.9em; }
.prose > :first-child { margin-top: 0; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 1.75em; }
.prose ul > li::before {
  content: "";
  position: absolute; left: 0; top: 0.85em;
  width: 0.9em; height: 1px; background: var(--gold);
}
.prose ol { padding-left: 1.4em; }
.prose ol > li::marker { font-family: var(--serif); font-style: italic; color: var(--brass); }

/* Drop cap on the first paragraph: <p class="dropcap"> */
.dropcap::first-letter {
  float: left;
  margin: 0.06em 0.12em 0 0;
  font-family: var(--serif);
  font-size: 4.6em;
  line-height: 0.82;
  color: var(--brass);
}

/* Pull quote */
.pullquote {
  position: relative;
  margin-block: var(--s-5);
  padding: 0;
  border: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.75rem);
  line-height: 1.25;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
  text-wrap: balance;
}
.pullquote::before {
  content: "\201C";
  display: block;
  height: 0.5em;
  font-size: 3em;
  line-height: 1;
  color: var(--gold);
  font-style: normal;
}
.pullquote cite, .pullquote figcaption {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}

/* Margin note — a small aside set against a gold rule */
.aside-note {
  padding-left: 1.25rem;
  border-left: 1px solid var(--gold);
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- 5. Buttons & links ---------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--on-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  min-height: 3.4rem;
  padding: 0.95rem 1.9rem;
  border: 1px solid var(--btn-bg);
  background: var(--btn-bg);
  background-image: none;
  color: var(--btn-fg);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .55s var(--ease-out);
}
.btn:hover { color: #fff; border-color: var(--brass); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }

.btn--gold  { --btn-bg: var(--brass); --btn-fg: #fff; }
.btn--gold::before { background: var(--ink); }
.btn--gold:hover { border-color: var(--ink); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--ink); }
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { color: var(--on-ink); border-color: var(--ink); }

/* On dark bands */
.btn--light { --btn-bg: var(--on-ink); --btn-fg: var(--ink); }
.btn--light::before { background: var(--champagne); }
.btn--light:hover { color: var(--ink); border-color: var(--champagne); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--on-ink); border-color: rgba(239,231,214,.45); }
.btn--outline-light::before { background: var(--on-ink); }
.btn--outline-light:hover { color: var(--ink); border-color: var(--on-ink); }

.btn .arrow, .link-arrow .arrow { transition: transform .45s var(--ease-out); }
.btn:hover .arrow, .link-arrow:hover .arrow { transform: translateX(5px); }

.actions { display: flex; flex-wrap: wrap; gap: 0.9rem 1.5rem; align-items: center; margin-top: var(--s-4); }

/* Text link with arrow: <a class="link-arrow" href>Lees verder <span class="arrow" aria-hidden="true">→</span></a> */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.3rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background-size: 100% 1px;
}
.link-arrow:hover { background-size: 40% 1px; }

/* ---------- 6. Header / navigation ---------- */

.topbar {
  border-bottom: var(--rule);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.9rem;
}
.topbar a { display: inline-block; padding-block: 0.55rem; color: var(--muted); background-size: 0 1px; }
.topbar__spoed { color: #9A3A22 !important; font-weight: 500; }
.topbar a:hover { color: var(--ink); background-size: 100% 1px; }
.topbar__group { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.topbar__loc { font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--ink); letter-spacing: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 241, 231, 0.86);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--sand); }

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 5.5rem;
  transition: min-height .4s var(--ease);
}
.site-header.is-scrolled .masthead { min-height: 4.4rem; }

.brand { display: inline-flex; background-image: none; flex-shrink: 0; }
.brand img { height: 50px; width: auto; transition: height .4s var(--ease); }
.site-header.is-scrolled .brand img { height: 36px; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 1.75rem); }
.nav__list { display: flex; gap: clamp(0.7rem, 0.95vw, 1.2rem); list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__list a {
  position: relative;
  padding: 0.4rem 0;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background-size: 0 1px;
  background-position: 100% 100%;
  white-space: nowrap;
}
.nav__list a:hover, .nav__list a[aria-current="page"] {
  color: var(--brass);
  background-size: 100% 1px;
  background-position: 0 100%;
}
.nav .btn { white-space: nowrap; min-height: 2.9rem; padding: 0.7rem 1.4rem; font-size: 0.78rem; }

/* Mobile menu — CSS-only checkbox toggle, full-screen editorial overlay */
.nav-toggle-checkbox { display: none; position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.6rem 0;
}
.nav-toggle__bars { position: relative; width: 26px; height: 9px; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--ink);
  transition: transform .4s var(--ease), top .4s var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { top: 8px; }
.nav-toggle-checkbox:focus-visible + .nav-toggle, .nav-toggle:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }

@media (max-width: 1420px) {
  /* backdrop-filter would make the header the containing block of the fixed overlay */
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ivory); }
  .nav-toggle { display: inline-flex; position: relative; z-index: 3; }
  .nav-toggle-checkbox { display: block; }
  .nav {
    position: fixed;
    inset: 0;
    z-index: 2;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start; /* centred via auto margins below: a long menu then scrolls instead of spilling under the header */
    gap: var(--s-4);
    padding: 7rem var(--gutter) var(--s-4);
    background: var(--ivory);
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s var(--ease), visibility 0s linear .45s;
    overflow-y: auto;
  }
  .nav > :first-child { margin-top: auto; }
  .nav > :last-child { margin-bottom: auto; }
  .nav__list { flex-direction: column; gap: 0.2rem; }
  .nav__list a {
    display: inline-block;
    font-family: var(--serif);
    font-size: clamp(1.6rem, min(8vw, 5.4vh), 3rem); /* short screens: all items fit without scrolling */
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: none;
    line-height: 1.25;
  }
  .nav__list li { display: flex; align-items: baseline; }
  .nav-toggle-checkbox:checked ~ .nav {
    opacity: 1; visibility: visible;
    transition: opacity .45s var(--ease), visibility 0s;
  }
  .nav-toggle-checkbox:checked + .nav-toggle .nav-toggle__bars::before { top: 4px; transform: rotate(45deg); }
  .nav-toggle-checkbox:checked + .nav-toggle .nav-toggle__bars::after  { top: 4px; transform: rotate(-45deg); }
  .brand { position: relative; z-index: 3; }
}
@media (max-width: 640px) {
  .topbar .topbar__hide-sm { display: none; }
  .topbar .container { flex-wrap: nowrap; gap: 0.75rem; }
  .topbar__group { gap: 1rem; flex-wrap: nowrap; }
  .topbar { font-size: 0.82rem; }
  .topbar a, .topbar span { white-space: nowrap; }
  .brand img { height: 36px; }
}

/* Breadcrumbs */
.crumbs { padding-top: var(--s-4); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; list-style: none; margin: 0; padding: 0; }
.crumbs li { margin: 0; display: flex; gap: 0.8rem; }
.crumbs li + li::before { content: "/"; color: var(--gold); }
.crumbs a { color: var(--muted); background-size: 0 1px; }
.crumbs a:hover { color: var(--ink); background-size: 100% 1px; }

/* ---------- 7. Heroes ---------- */

/* Home hero: headline left, portrait diptych right */
.hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) var(--section); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: end;
}
.hero__title { overflow-wrap: normal; hyphens: manual; font-size: clamp(2.1rem, 0.9rem + 5vw, 5.4rem); line-height: 1.04; letter-spacing: -0.005em; margin-bottom: 2.2rem; }
.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: var(--rule);
}
.hero__meta dt { font-size: var(--fs-kicker); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; }
.hero__meta dd { margin: 0; font-family: var(--serif); font-size: 1.3rem; color: var(--ink); }

.diptych { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 20px); }
.diptych figure { margin: 0; }
.diptych figure:nth-child(2) { margin-top: clamp(2.5rem, 6vw, 6rem); }
.diptych img { width: 100%; aspect-ratio: 3 / 4.3; object-fit: cover; object-position: 50% 18%; }

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .diptych { max-width: 560px; }
}
@media (max-width: 520px) {
  .hero__meta { grid-template-columns: 1fr 1fr; row-gap: 1.2rem; }
}

/* Page hero for inner pages: big title + lede, optional image */
.page-hero { padding-block: clamp(2.5rem, 2rem + 4vw, 6rem) clamp(3rem, 2rem + 4vw, 6rem); border-bottom: var(--rule); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 6rem); align-items: end; }
.page-hero h1 { font-size: var(--fs-h1); margin-bottom: 1.6rem; }
.page-hero .lede { margin-bottom: 0; }
.page-hero__side { padding-left: 1.5rem; border-left: 1px solid var(--gold); font-size: var(--fs-small); color: var(--muted); }
.page-hero__side strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--ink); margin-bottom: 0.25rem; }
.page-hero--image .page-hero__grid { align-items: center; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 860px) { .page-hero__grid, .page-hero--image .page-hero__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 8. Figures & photography ---------- */

/* Consistent warm grade across mixed-source photos */
.graded { filter: sepia(0.1) saturate(0.88) contrast(1.03) brightness(1.01); }

.figure { margin: 0; }
.figure img { width: 100%; object-fit: cover; }
.figure--tall img { aspect-ratio: 4 / 5; }
.figure--wide img { aspect-ratio: 16 / 10; }
.figure--frame { padding: clamp(10px, 1.2vw, 16px); background: var(--paper); border: var(--rule); }

/* Caption: small muted note under a figure (e.g. the Google Maps privacy note) */
.caption, .figure figcaption {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.5;
}
.caption b, .figure figcaption b {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--brass);
  white-space: nowrap;
}

/* Image reveal: a curtain wipes off when [data-reveal] scrolls in */
.js .reveal-img { position: relative; overflow: hidden; }
.js .reveal-img::after {
  content: ""; position: absolute; inset: 0; background: var(--bone);
  transform-origin: top; transition: transform 1.2s var(--ease-out);
}
.js .reveal-img.is-in::after { transform: scaleY(0); }
.js .reveal-img img { transform: scale(1.08); transition: transform 1.8s var(--ease-out); }
.js .reveal-img.is-in img { transform: scale(1); }

/* Gallery (small artwork thumbnails — keep them small, they are 150px sources) */
.gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; max-width: 150px; }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 9. Content components ---------- */

/* Entries: three columns separated by hairlines (replaces old cta-grid) */
.entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.entry {
  display: flex; flex-direction: column;
  padding: var(--s-4) clamp(1.25rem, 2.5vw, 2.75rem) var(--s-4) 0;
}
.entry + .entry { padding-left: clamp(1.25rem, 2.5vw, 2.75rem); border-left: var(--rule); }
.entry h3 { margin-bottom: 0.8rem; }
.entry p { color: var(--muted); }
.entry__foot { margin-top: auto; padding-top: var(--s-3); display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.entry__num { font-family: var(--serif); font-style: italic; color: var(--gold); margin-bottom: 1.5rem; display: block; }
@media (max-width: 860px) {
  .entries { grid-template-columns: minmax(0, 1fr); }
  .entry, .entry + .entry { padding: var(--s-4) 0; border-left: 0; }
  .entry + .entry { border-top: var(--rule); }
}

/* Index list: numbered rows, the editorial table of contents */
.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.index-list > li { margin: 0; border-bottom: var(--rule); }
.index-list__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 2rem;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-3) 0;
  color: var(--text);
  background-image: none;
  transition: padding .5s var(--ease-out), background-color .5s var(--ease);
}
.index-list__title { font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); color: var(--ink); line-height: 1.15; }
.index-list__desc { color: var(--muted); font-size: 0.98rem; line-height: 1.6; }
.index-list__arrow { justify-self: end; color: var(--ink); transition: transform .5s var(--ease-out); }
a.index-list__row:hover { padding-left: 1rem; color: var(--text); background-color: var(--paper); }
a.index-list__row:hover .index-list__title { color: var(--brass); }
a.index-list__row:hover .index-list__arrow { transform: translateX(-0.5rem); }
@media (max-width: 760px) {
  .index-list__row { grid-template-columns: minmax(0, 1fr) 1.5rem; row-gap: 0.5rem; }
  .index-list__desc { grid-column: 1 / 2; }
  .index-list__arrow { grid-row: 1; grid-column: 2; }
}

/* Panels: quiet cards for treatments, FAQ-like blocks, quality items */
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1px; background: var(--sand); border: var(--rule); }
.panel { background: var(--ivory); padding: clamp(1.5rem, 2.5vw, 2.5rem); scroll-margin-top: 120px; }
.section--bone .panel { background: var(--bone); }
.panel h3 { margin-bottom: 0.8rem; }
.panel__num { display: block; font-family: var(--serif); font-style: italic; color: var(--gold); margin-bottom: 1.2rem; }
.panel .ref { margin-top: 1rem; font-size: var(--fs-small); color: var(--muted); }
.panel:target { background: var(--paper); box-shadow: inset 0 0 0 1px var(--gold); }

/* Steps: an ordered process (e.g. "Uw eerste bezoek") */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--s-4); }
.steps > li { margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--ink); }
.steps h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.steps p { color: var(--muted); font-size: 0.98rem; }

/* Promise list: two-column list with gold rules (e.g. "Wat u kunt verwachten") */
.promises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
.promises > li { margin: 0; padding: 1.2rem 0 1.2rem 2.2rem; border-bottom: var(--rule); position: relative; }
.promises > li::before { content: "\2014"; position: absolute; left: 0; color: var(--gold); font-family: var(--serif); }
@media (max-width: 760px) { .promises { grid-template-columns: minmax(0, 1fr); } }

/* Reviews: horizontally scrolling editorial quotes */
.reviews {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(84vw, 380px), 1fr);
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.review {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  margin: 0;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--paper);
  border: var(--rule);
}
.review blockquote { margin: 0 0 1.5rem; font-family: var(--serif); font-size: 1.2rem; line-height: 1.45; color: var(--ink); }
.review blockquote::before { content: "\201C"; display: block; font-size: 2.6rem; line-height: 0.6; margin-top: 0.4rem; color: var(--gold); }
.review figcaption { margin-top: auto; padding-top: 1rem; border-top: var(--rule); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.review__name { font-weight: 500; color: var(--ink); font-size: 0.92rem; }
.review__source { display: block; font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em; }
.review__score { font-family: var(--serif); font-size: 1.5rem; color: var(--brass); white-space: nowrap; }
.review__stars { color: var(--gold); letter-spacing: 0.15em; font-size: 0.85rem; white-space: nowrap; }

/* Rating strip */
.rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; margin-top: var(--s-4); padding-top: var(--s-3); border-top: var(--rule); }
.rating__score { font-family: var(--serif); font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem); line-height: 1; color: var(--ink); }
.rating__label { color: var(--muted); font-size: var(--fs-small); }

/* Press list */
.press { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.press > li { margin: 0; display: grid; grid-template-columns: 12rem minmax(0, 1fr) 9rem; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: var(--rule); align-items: baseline; }
.press__source { font-size: var(--fs-kicker); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); font-weight: 500; }
.press a { font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; background-size: 0 1px; }
.press a:hover { background-size: 100% 1px; }
.press__date { text-align: right; color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 760px) { .press > li { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; } .press__date { text-align: left; } }

/* Team */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s-5) clamp(16px, 2.4vw, 36px); }
.person { margin: 0; }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }
.person__monogram {
  display: grid; place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--paper);
  border: var(--rule);
  position: relative;
}
.person__monogram::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--sand); }
.person__monogram span { font-family: var(--serif); font-style: italic; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); color: var(--gold); letter-spacing: 0.04em; }
.person__name { margin: 1.2rem 0 0.2rem; font-family: var(--serif); font-size: 1.5rem; color: var(--ink); line-height: 1.2; }
.person__role { font-size: var(--fs-kicker); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); font-weight: 500; }
.person__bio { margin-top: 0.9rem; color: var(--muted); font-size: 0.96rem; }

/* Feature person: large portrait + long bio (dentists) */
.feature-person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.feature-person + .feature-person { margin-top: var(--section); }
.feature-person:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature-person:nth-of-type(even) .feature-person__media { order: 2; }
.feature-person__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }
@media (max-width: 860px) {
  .feature-person, .feature-person:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); }
  .feature-person:nth-of-type(even) .feature-person__media { order: 0; }
  .feature-person__media { max-width: 460px; }
}

/* Pricing */
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px; background: var(--sand); border: var(--rule); }
.price-card { background: var(--paper); padding: clamp(1.75rem, 3vw, 2.75rem); display: flex; flex-direction: column; }
.price-card h3 { margin-bottom: 1.25rem; }
.price-card__amount { font-family: var(--serif); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; color: var(--ink); margin-bottom: 0.5rem; }
.price-card__sub { font-size: var(--fs-small); color: var(--muted); }
.price-card--featured { background: var(--ink); color: var(--on-ink); }
.price-card--featured h3, .price-card--featured .price-card__amount { color: var(--on-ink); }
.price-card--featured .price-card__sub { color: var(--on-ink-muted); }

/* Table */
.table { width: 100%; max-width: 640px; border-collapse: collapse; margin: var(--s-3) 0; font-size: 0.98rem; }
.table caption { text-align: left; padding-bottom: 0.9rem; font-size: var(--fs-kicker); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); font-weight: 500; }
.table th, .table td { padding: 0.95rem 0; border-bottom: var(--rule); text-align: left; vertical-align: top; }
.table th { font-weight: 400; color: var(--ink); padding-right: var(--s-3); }
.table td { text-align: right; font-family: var(--serif); font-size: 1.1rem; color: var(--ink); white-space: nowrap; }
.table tr:first-child th, .table tr:first-child td { border-top: 1px solid var(--ink); }

/* FAQ — native <details> accordions */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: var(--rule); }
.faq summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  padding: 1.5rem 0;
  cursor: pointer;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  line-height: 1.3;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--sans); font-weight: 300; font-size: 1.6rem; line-height: 1;
  color: var(--gold);
  transition: transform .4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--brass); }
.faq summary h3 { all: unset; }
.faq__answer { padding: 0 0 1.75rem; max-width: var(--measure); color: var(--text); }

/* Callout box — a framed notice */
.callout { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--gold); background: var(--paper); position: relative; }
.callout::before { content: ""; position: absolute; inset: 6px; border: var(--rule); pointer-events: none; }
.callout > * { position: relative; }

/* Logos / memberships */
.marks { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.marks img { height: 44px; width: auto; filter: grayscale(1) contrast(1.05); opacity: 0.75; mix-blend-mode: multiply; transition: filter .4s, opacity .4s; }
.marks img:hover { filter: none; opacity: 1; }

/* Region / tag links */
.tags { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
.tags li { margin: 0; }
.tags a { display: inline-block; padding: 0.55rem 1.1rem; border: 1px solid var(--sand); font-size: 0.85rem; letter-spacing: 0.06em; background-image: none; transition: border-color .3s, background-color .3s, color .3s; }
.tags a:hover { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }

/* Sub-brand pill, e.g. "N&N Dental Cosmetisch" */
.label { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--gold); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); margin-bottom: 1.4rem; }

/* Facts list: definition-style key/value rows (hours, address, BIG numbers) */
.facts { margin: 0; border-top: 1px solid var(--ink); }
.facts > div { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: var(--s-3); padding: 1rem 0; border-bottom: var(--rule); }
.facts dt { font-size: var(--fs-kicker); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding-top: 0.25rem; }
.facts dd { margin: 0; color: var(--ink); }
@media (max-width: 520px) { .facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } }

/* Map embed */
.map { position: relative; aspect-ratio: 16 / 10; border: var(--rule); background: var(--bone); }
.map__consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem; text-align: center; color: var(--text); }
.map__consent p { max-width: 34rem; margin: 0; font-size: 0.95rem; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.6) sepia(0.15) contrast(1.02); }

/* ---------- 10. Forms ---------- */

.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); max-width: 820px; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-size: 0.98rem; letter-spacing: 0.01em; color: var(--ink); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #8C8273;
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  transition: border-color .3s var(--ease), background-color .3s;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
  padding-right: 2rem;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brass); outline-offset: 1px; border-color: var(--ink); background-color: #fff; }
.field__hint { font-size: 0.85rem; color: var(--muted); }
.field--check { flex-direction: row; align-items: flex-start; gap: 0.8rem; }
.field--check input { width: 1.1rem; height: 1.1rem; margin-top: 0.3rem; accent-color: var(--brass); -webkit-appearance: auto; appearance: auto; padding: 0; }
.field--check label { text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--text); font-weight: 400; }
fieldset.field { border: 0; padding: 0; margin: 0; }
/* Honeypot: off-screen for people, still "fillable" for spam bots */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-error { max-width: 820px; margin: 0 0 var(--s-3); padding: 1rem 1.25rem; border-left: 2px solid #A4452C; background: #F7E9E4; color: #6B2414; }
@media (max-width: 640px) { .form { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 11. Bands (dark) ---------- */

.band {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  padding-block: var(--section);
  overflow: hidden;
  isolation: isolate;
}
.band::before {
  /* Oversized italic ampersand from the N&N mark — the signature motif */
  content: "&";
  position: absolute;
  right: -0.06em;
  bottom: -0.32em;
  z-index: -1;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22rem, 40vw, 44rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(216, 193, 146, 0.18);
  pointer-events: none;
}
.band h2, .band h3, .band strong { color: var(--on-ink); }
.band h2 em, .band h3 em { color: var(--champagne); }
.band p { color: var(--on-ink-muted); }
.band a:not(.btn) { color: var(--champagne); }
.band .kicker { color: var(--champagne); }
.band .kicker::before, .band .kicker::after { background: var(--champagne); }
.band .lede { color: var(--on-ink); }
.band .entries { border-top-color: rgba(216, 193, 146, 0.5); }
.band .entry + .entry { border-color: rgba(216, 193, 146, 0.22); }
.band .entry p { color: var(--on-ink-muted); }

/* ---------- 12. Footer ---------- */

.site-footer { background: var(--ink-2); color: var(--on-ink-muted); padding-top: var(--section); font-size: 0.95rem; }
.site-footer a { color: var(--on-ink); background-size: 0 1px; }
.site-footer a:hover { color: var(--champagne); background-size: 100% 1px; }
.site-footer .btn--light, .site-footer .btn--light:hover { color: var(--ink); }
.site-footer .btn--outline-light:hover { color: var(--ink); }
.footer-lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-5); align-items: end; padding-bottom: var(--s-5); border-bottom: var(--rule-ink); }
.footer-lead__title { margin: 0; font-family: var(--serif); font-size: clamp(2.2rem, 1.5rem + 3vw, 4.2rem); line-height: 1.06; color: var(--on-ink); letter-spacing: 0; font-weight: 500; }
.footer-lead__title em { color: var(--champagne); font-style: italic; }
.footer-lead .actions { justify-content: flex-end; margin-top: 0; }
.footer-cols { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: var(--s-4); padding-block: var(--s-5); }
.footer-col h3, .footer-col h2 { margin: 0 0 1.2rem; font-family: var(--sans); font-size: var(--fs-kicker); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--champagne); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 0 0 0.55rem; }
.footer-col address { font-style: normal; line-height: 1.7; }
.footer-brand img { height: 42px; width: auto; margin-bottom: 1.5rem; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: var(--s-3); border-top: var(--rule-ink); font-size: 0.8rem; letter-spacing: 0.04em; }
@media (max-width: 1080px) { .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-col--brand { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .footer-lead { grid-template-columns: minmax(0, 1fr); }
  .footer-lead .actions { justify-content: flex-start; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ---------- 13. Landing (location chooser) ---------- */

.chooser { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.chooser__head { display: flex; justify-content: space-between; align-items: center; padding-block: var(--s-3); border-bottom: var(--rule); }
.chooser__head img { height: 46px; width: auto; }
.chooser__intro { padding-block: clamp(3rem, 2rem + 5vw, 7rem) var(--s-5); }
.chooser__grid { display: grid; grid-template-columns: 1.15fr 1fr 0.85fr; gap: clamp(16px, 2vw, 28px); padding-bottom: var(--s-5); }
.place {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(22rem, 52vh, 36rem);
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  overflow: hidden;
  color: var(--on-ink);
  background: var(--ink);
  background-image: none;
  isolation: isolate;
}
.place img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.6s var(--ease-out), filter 1s; }
.place::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(29,26,21,.25) 0%, rgba(29,26,21,0) 28%, rgba(29,26,21,.35) 55%, rgba(29,26,21,.9) 100%); }
.place:hover img { transform: scale(1.05); }
.place:hover { color: var(--on-ink); }
.place__num { position: absolute; top: clamp(1.5rem, 2.5vw, 2.5rem); left: clamp(1.5rem, 2.5vw, 2.5rem); font-family: var(--serif); font-style: italic; color: var(--champagne); }
.place__name { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); line-height: 1; margin-bottom: 0.8rem; overflow-wrap: normal; }
.place__meta { font-size: 0.85rem; letter-spacing: 0.06em; color: var(--on-ink-muted); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.place__go { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne); }
.place--text { background: var(--bone); color: var(--ink); justify-content: space-between; border: 1px solid var(--gold); }
.place--text::after { display: none; }
.place--text .place__num { position: static; color: var(--brass); }
.place--text .place__meta, .place--text:hover { color: var(--ink); }
.place--text .place__meta { color: var(--muted); }
.place--text .place__go { color: var(--brass); }
.place--text .place__name { font-size: clamp(2rem, 1.4rem + 1.4vw, 2.75rem); overflow-wrap: normal; }
.place__glyph { font-family: var(--serif); font-style: italic; font-size: clamp(7rem, 12vw, 11rem); line-height: 0.8; color: var(--gold); }
@media (max-width: 960px) { .chooser__grid { grid-template-columns: minmax(0, 1fr); } .place { min-height: 20rem; } }

/* The front page fits on ONE screen (client feedback 2026-10-07): the intro row takes
   whatever height is left after header, tiles and memberships, and the 3D tooth is
   sized from the viewport height so nothing gets pushed below the fold. */
.chooser { height: 100vh; height: 100svh; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.chooser__head { padding-block: clamp(0.75rem, 2svh, 1.5rem); }
.chooser__head img { height: clamp(34px, 5svh, 46px); }
.chooser__intro { padding-block: clamp(0.75rem, 3svh, 3rem); display: flex; align-items: center; min-height: 0; }
.chooser__intro .hero__grid { width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 4vw, 5rem); }
.chooser .hero__title { font-size: clamp(2rem, 1rem + 3.4vw, 4.6rem); margin-bottom: clamp(0.75rem, 2.5svh, 2rem); }
.chooser .lede { margin: 0; }
.chooser__cue { margin: clamp(0.75rem, 3svh, 2.5rem) 0 0; color: var(--muted); }
.chooser .tooth3d { height: max(120px, min(36svh, 38vw, 420px)); width: auto; aspect-ratio: 4 / 5; max-width: none; justify-self: end; }
.chooser__grid { padding-bottom: clamp(0.75rem, 2.5svh, 2rem); }
.chooser .place { min-height: clamp(8.5rem, 30svh, 22rem); }
/* All three tiles share one text layout: name, then the info line, then the link,
   bottom-aligned, with ONE name size for every tile (sized to the row width so the
   longest name, Noordwijkerhout, always fits). */
.chooser__grid { container-type: inline-size; }
.chooser .place__name, .chooser .place--text .place__name { font-size: clamp(1.6rem, 2.9cqi, 2.6rem); white-space: nowrap; margin-bottom: 0.7rem; }
.chooser .place__meta { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.6rem; }
.chooser__marks { padding-block: clamp(0.6rem, 2svh, 1.5rem); border-top: var(--rule); justify-content: center; gap: var(--s-4); }
.chooser__marks img { height: clamp(24px, 4svh, 40px); }
/* Third column: two half-height text tiles (Tandenbleken, Uitleg in beeld) in the space of one */
.chooser__stack { display: grid; grid-template-rows: 1fr 1fr; gap: clamp(16px, 2vw, 28px); min-height: 0; }
.chooser__stack .place { min-height: 0; padding-block: clamp(0.9rem, 1.6vw, 1.75rem); }
.chooser__stack .place__glyph { font-size: clamp(3rem, 5svh, 5rem); }
@media (max-width: 960px) {
  /* phones: the two text tiles side by side, so the page keeps fitting on one screen */
  .chooser__stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 10px; }
  .chooser__stack .place { min-height: clamp(4.75rem, 12svh, 8rem); padding: 0.8rem 1rem; }
  .chooser__stack .place--text { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
  .chooser__stack .place__glyph { display: none; }
  .chooser .chooser__stack .place__name { font-size: clamp(1.2rem, 0.85rem + 1.6vw, 1.75rem); white-space: normal; margin-bottom: 0.3rem; }
  .chooser__stack .place__meta { gap: 0.3rem; font-size: 0.78rem; }
  .chooser .place { min-height: clamp(5.25rem, 14svh, 11rem); padding: 0.9rem 1.25rem; }
  .chooser .place__name { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); margin-bottom: 0.35rem; }
  /* short tiles leave no calm sky area for the name: darken the whole photo instead */
  .chooser .place::after { background: linear-gradient(90deg, rgba(29,26,21,.82) 0%, rgba(29,26,21,.55) 70%, rgba(29,26,21,.35) 100%); }
  .chooser .place--text { flex-direction: row; align-items: flex-end; gap: 1rem; }
  .chooser .place__glyph { font-size: 3.5rem; }
  .chooser__grid { gap: 10px; }
  .chooser .lede { font-size: 1rem; }
  /* Never overlap: on phones the page may grow instead of squeezing the intro */
  .chooser { height: auto; min-height: 100vh; min-height: 100svh; grid-template-rows: auto auto 1fr auto; }
  .chooser__intro .kicker, .chooser__cue { display: none; }
  .chooser__grid { align-self: end; }
}
/* Very short screens (landscape phones): fall back to normal scrolling */
@media (max-height: 520px) { .chooser { height: auto; min-height: 100svh; } }

/* ---------- 14. Motion ---------- */

/* Page-load: hero elements rise in sequence. Add .rise and --d (delay index). */
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes unveil { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.rise { animation: rise 1.1s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 110ms + 80ms); }
.unveil { animation: unveil 1.4s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 140ms + 200ms); }

/* Scroll reveal — only hides content when JS is running */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .reveal-img::after { display: none; }
  .js .reveal-img img { transform: none; }
}

/* ---------- 15. Print ---------- */
@media print {
  body::after, .site-header, .topbar, .band::before, .nav-toggle { display: none !important; }
  body { background: #fff; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- 16. 3D tooth ---------- */
/* Markup: .tooth3d[data-tooth3d] > img.tooth3d__fallback; js/tooth3d.js adds the canvas
   and sets .is-live once the first WebGL frame has rendered. */
.tooth3d {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  isolation: isolate;
}
.tooth3d__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  transition: opacity 900ms cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
  user-select: none;
}
.tooth3d__canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.2, .7, .2, 1);
}
.tooth3d.is-live .tooth3d__fallback { opacity: 0; }
.tooth3d.is-live .tooth3d__canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tooth3d__fallback, .tooth3d__canvas { transition: none; }
}

/* ---------- 17. Small-height screens and phone tweaks (review 2026-10-08) ---------- */
@media (max-height: 500px) { .site-header { position: relative; } }
/* Location homepages: smaller 3D mark on phones so the entry blocks sit higher */
@media (max-width: 960px) {
  .hero .tooth3d { width: min(240px, 58vw); margin-inline: auto; }
  .hero { padding-bottom: var(--s-4); }
}
/* Pause control for the 3D mark (added by js/tooth3d.js) */
.tooth3d__pause {
  position: absolute; right: 0.5rem; bottom: 0.5rem; z-index: 2;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 1px solid var(--sand); border-radius: 50%; background: rgba(251, 248, 242, 0.85);
  color: var(--ink); cursor: pointer; opacity: 0.55; transition: opacity .3s var(--ease);
}
.tooth3d__pause:hover, .tooth3d__pause:focus-visible { opacity: 1; }
.tooth3d__pause svg { width: 0.9rem; height: 0.9rem; fill: currentColor; }
@media (max-width: 420px) { .topbar__loc { display: none; } .topbar .container { justify-content: flex-end; } }
/* Top bar up to small-laptop width: one tidy line (location, phone, spoed, switch).
   Address + hours and e-mail are on the contact page and in the footer. */
@media (max-width: 1024px) {
  .topbar .topbar__hide-sm { display: none; }
  .topbar .container, .topbar__group { flex-wrap: nowrap; }
  .topbar a, .topbar span { white-space: nowrap; }
}

/* ---------- Uitleg in beeld: video page + homepage tile ---------- */
.film-lead { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-4); align-items: start; }
.video-frame { margin: 0; aspect-ratio: 16 / 9; background: var(--ink); border: var(--rule); }
.video-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
.video-frame figcaption { margin-top: 0.6rem; font-size: var(--fs-small); color: var(--muted); }
.film-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0 0 var(--s-2); font-size: var(--fs-small); letter-spacing: 0.04em; color: var(--brass); }
.film-points { margin: var(--s-2) 0 0; padding-left: 1.1rem; }
.film-points li { margin-bottom: 0.35rem; }
.film-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s-4) var(--s-3); }
.film-card { display: flex; flex-direction: column; }
.film-card h3 { margin: 0 0 0.6rem; }
.film-cards > .film-card--wide { grid-column: 1 / -1; }
.film-card p { color: var(--muted); }
.film-card .entry__foot { padding-top: var(--s-2); }
.film-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper); border: var(--rule); margin-bottom: var(--s-2); background-image: none; }
.film-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.film-thumb--contain { background: var(--ivory); } /* = the 3D stills' own background */
.film-thumb--contain img { object-fit: contain; padding: 0.75rem; }
a.film-thumb:hover img { transform: scale(1.03); }
.play-badge { position: absolute; right: clamp(0.6rem, 2vw, 1rem); top: clamp(0.6rem, 2vw, 1rem); width: clamp(2.6rem, 6vw, 3.25rem); height: clamp(2.6rem, 6vw, 3.25rem); border-radius: 50%; background: rgba(29, 26, 21, 0.82); display: grid; place-items: center; }
.play-badge::before { content: ""; margin-left: 4px; border-left: 14px solid var(--on-ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.explain-tile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-4); align-items: center; }
.explain-tile .film-thumb { margin-bottom: 0; }
.explain-tile h2 { margin-bottom: var(--s-2); }
/* While the library holds a single card, lay it out wide (image left, text right). */
@media (min-width: 861px) {
  .film-cards > .film-card:only-child:not(.film-card--wide) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: var(--s-4); align-content: start; }
  .film-cards > .film-card:only-child:not(.film-card--wide) > * { grid-column: 2; }
  .film-cards > .film-card:only-child:not(.film-card--wide) > .film-thumb { grid-column: 1; grid-row: 1 / span 5; margin-bottom: 0; align-self: start; }
}
@media (max-width: 960px) { .film-lead { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } }
@media (max-width: 860px) { .explain-tile { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } }
@media (prefers-reduced-motion: reduce) { .film-thumb img { transition: none; } a.film-thumb:hover img { transform: none; } }

/* ---------- Slideshow (Uitleg in beeld: een kies van binnen) ---------- */
.slides { position: relative; }
.slides__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; border: var(--rule); background: var(--ivory); }
.slides__track::-webkit-scrollbar { display: none; }
.slides__track:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: clamp(1rem, 3vw, 2.5rem); }
.slide img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; max-height: 70vh; }
.slide figcaption { max-width: 34rem; }
.slide__step { display: block; font-size: var(--fs-kicker); letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.9rem; }
.slide__title { display: block; font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.2; color: var(--ink); margin-bottom: 0.8rem; }
.slide__title em { color: var(--brass); }
.slide figcaption p { margin: 0; color: var(--text); }
.slides__nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: var(--s-2); }
.slides__nav[hidden] { display: none; }
.slides__btn { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.slides__btn:hover:not([aria-disabled="true"]) { background: var(--ink); color: var(--on-ink); }
.slides__btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.slides__btn[aria-disabled="true"] { opacity: 0.3; cursor: default; }
.slides__count { min-width: 4.5rem; text-align: center; font-size: var(--fs-small); letter-spacing: 0.12em; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .slide { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); align-items: start; }
  .slide img { max-height: 46vh; }
}
@media (prefers-reduced-motion: reduce) { .slides__track { scroll-behavior: auto; } }

/* ---------- Review 2026-10-13: always-reachable phone/spoed, larger-text robustness ---------- */
.masthead__call, .nav__contact { display: none; }
@media (max-width: 1420px) {
  /* Call button next to Menu in the sticky header, so the number never scrolls away */
  .masthead__call {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
    margin-left: auto; margin-right: clamp(0.75rem, 3vw, 1.5rem);
    border: 1px solid var(--ink); border-radius: 999px;
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink); background-image: none; position: relative; z-index: 3;
  }
  .masthead__call:hover { background: var(--ink); color: var(--ivory); }
  /* Phone, spoed and location switch at the bottom of the menu overlay */
  .nav__contact {
    display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin: 0;
    padding-top: var(--s-3); border-top: var(--rule); width: 100%;
    font-size: 1rem; letter-spacing: 0.04em;
  }
  .nav__contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
  .nav__contact .nav__spoed { color: #9A3A22; font-weight: 500; }
}
.footer-spoed { display: inline-block; margin-block: 0.15rem; }
/* Big text / narrow screens: wrap instead of pushing the page sideways */
h1 { overflow-wrap: break-word; }
@media (max-width: 640px) {
  .topbar .container { flex-wrap: wrap; justify-content: flex-end; row-gap: 0; }
  .topbar__group { flex-wrap: wrap; justify-content: flex-end; }
  .table td { white-space: normal; }
}
/* Location cards on the chooser: a darker foot so the white names stay readable on busy photos */
.place::after { background: linear-gradient(180deg, rgba(29,26,21,.25) 0%, rgba(29,26,21,0) 26%, rgba(29,26,21,.5) 52%, rgba(29,26,21,.92) 100%); }
.place:not(.place--text) .place__name { text-shadow: 0 1px 18px rgba(29,26,21,.55); }
@media (max-width: 400px) {
  .masthead { gap: 0.75rem; }
  .masthead__call { padding: 0 0.8rem; margin-right: 0.6rem; letter-spacing: 0.14em; }
  .nav-toggle { gap: 0.5rem; letter-spacing: 0.14em; }
}

/* Accessibility review 2026-10-13 */
.place:not(.place--text) .place__meta { color: var(--on-ink); text-shadow: 0 1px 12px rgba(29,26,21,.7); }
@media (max-width: 480px) {
  /* The consent text needs more room than a 16:10 box gives on a phone */
  .map:not(:has(iframe)) { aspect-ratio: auto; }
  .map__consent { position: static; min-height: 12rem; }
}
/* With JS the menu label is swapped for a real <button class="nav-toggle"> (site.js) */
button.nav-toggle { background: none; border: 0; margin: 0; font-family: inherit; line-height: inherit; }