/* ==========================================================================
   Glam Injectables — stylesheet
   Mobiel eerst: 90% van de bezoekers komt via de telefoon.
   Kleuren en vormen zijn overgenomen uit de bestaande Framer-site.
   ========================================================================== */

:root {
  /* merk */
  --brass:        #986A3E;
  --brass-dark:   #70441B;
  --brass-tint:   rgba(152, 106, 62, 0.10);
  --brass-line:   rgba(152, 106, 62, 0.20);
  --ink:          #633B2C;
  /* De voettekst had dezelfde kleur als de tekstkleur --ink, en dus bijna
     dezelfde als de brass CTA-band erboven. Daardoor liep het onderste
     derde deel van elke pagina in elkaar over. Dit is een paar stops
     dieper, zodat de band bovenop los komt en de pagina echt afsluit. */
  --footer:       #3A221A;
  --muted:        #7A685D;

  /* vlakken */
  --cream:        #FDF7EF;
  --sand:         #F7ECDF;
  --off:          #FFFDF9;
  --white:        #FFFFFF;

  /* status */
  --error:        #9B2F2A;
  --success:      #3B6650;

  /* typografie */
  --font-display: "Hedvig Letters Serif", Georgia, "Times New Roman", serif;
  --font-body:    "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* vorm */
  --r-pill: 100px;
  --r-lg:   30px;
  --r-md:   16px;
  --r-sm:   10px;

  /* ritme */
  --shell:      1180px;
  --shell-pad:  22px;
  --section-y:  64px;

  /* Rustige, trage beweging. Luxe is traag, niet druk. */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --duur:       0.9s;

  --shadow-sm: 0 1px 2px rgba(99, 59, 44, 0.05), 0 4px 16px rgba(99, 59, 44, 0.05);
  --shadow-md: 0 2px 4px rgba(99, 59, 44, 0.06), 0 12px 32px rgba(99, 59, 44, 0.08);
}

@media (min-width: 760px) {
  :root { --shell-pad: 40px; --section-y: 112px; }
}

/* --------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--brass-dark); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: 50%; top: 8px;
  transform: translateX(-50%) translateY(-200%);
  z-index: 200;
  background: var(--ink);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: transform 0.15s ease;
}
.skip-link:focus { transform: translateX(-50%) translateY(0); color: var(--white); }

/* -------------------------------------------------------------- layout -- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}
.shell--narrow { max-width: 760px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--sand { background: var(--sand); }

.section-head { margin-bottom: 44px; max-width: 54ch; }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 10px;
}

.section-title { font-size: clamp(1.875rem, 1.2rem + 3vw, 3.25rem); }
.section-intro { color: var(--muted); margin-top: 18px; font-size: 1.125rem; }
.section-foot { margin-top: 28px; text-align: center; }

.h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; margin: 0 0 12px; }
.h4 { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 28px 0 10px; }

.prose { color: var(--muted); }
.prose p { margin-bottom: 1.1em; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: 1.5rem; color: var(--ink); margin: 2.2em 0 0.65em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1875rem; color: var(--ink); margin: 1.8em 0 0.5em; }
.prose ul.checklist { margin-bottom: 1.4em; }

.muted { color: var(--muted); }
.note { margin-top: 18px; font-size: 0.875rem; color: var(--muted); }

/* ------------------------------------------------------------- knoppen -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--brass); color: var(--white); }
.btn--primary:hover { background: var(--brass-dark); color: var(--white); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--brass-line); }
.btn--ghost:hover { background: var(--brass-tint); color: var(--ink); }

.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--sand); color: var(--ink); }

.btn--sm { min-height: 42px; padding: 9px 20px; font-size: 0.875rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-row--center { justify-content: center; }

.link-arrow { font-weight: 500; text-decoration: none; color: var(--brass-dark); }
.link-arrow:hover { text-decoration: underline; }

/* -------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 247, 239, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--brass-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
}
.site-header__logo { flex: 0 0 auto; display: block; }
.site-header__logo img { width: auto; height: 34px; }

.site-nav { display: none; }
.site-nav ul { display: flex; gap: 22px; }
.site-nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding-block: 8px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--brass-dark); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--brass); color: var(--brass-dark); }

.site-header__actions { display: flex; align-items: center; gap: 10px; }
.site-header__actions .btn { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--brass-line);
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle__bars { display: block; width: 18px; }
.nav-toggle__bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle__bars span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-nav {
  border-top: 1px solid var(--brass-line);
  background: var(--cream);
  padding: 18px var(--shell-pad) 26px;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav a {
  display: block;
  padding: 14px 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--brass-line);
}
.mobile-nav__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

/* Zes menu-items plus de knop passen pas vanaf 1080px op één regel. Daaronder
   brak "Behandelingen & prijzen" over twee regels en liep de kop uit elkaar. */
@media (min-width: 1080px) {
  .site-nav { display: block; }
  .site-header__actions .btn { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
  .site-header__inner { min-height: 80px; }
  .site-header__logo img { height: 40px; }
}

/* ---------------------------------------------------------------- hero -- */

.hero { padding-block: 40px 56px; background: var(--cream); }
.hero__inner { display: grid; gap: 32px; }
.hero__title { font-size: clamp(2.25rem, 1.3rem + 4.4vw, 4.75rem); }
.hero__text { margin-top: 18px; color: var(--muted); font-size: 1.0625rem; max-width: 52ch; }
.hero__media img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 4 / 3; object-fit: cover; }
/* ---- header met video over de volle breedte ---- */

.hero--video { position: relative; padding-block: 88px 96px; overflow: hidden; }
.page-header--video {
  position: relative;
  padding-block: 72px 72px;
  overflow: hidden;
  /* Hoger dan een gewone paginakop: anders is de zichtbare strook van de
     video maar een derde van het beeld en valt het logo op de wand eruit. */
  min-height: clamp(420px, 42vw, 620px);
  display: flex;
  align-items: center;
}
.page-header--video > .shell { position: relative; z-index: 2; width: 100%; }
/* De strook iets hoger in het beeld, zodat het logo meekomt zonder dat de
   behandelstoel onderaan wegvalt. */
.page-header--video .hero__film-video { object-position: 50% 30%; }
.hero--video .hero__inner { position: relative; z-index: 2; }

.hero__film { position: absolute; inset: 0; z-index: 0; }
.hero__film-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}

/* Een waas van cremekleur over het beeld: zonder dit valt de donkerbruine
   tekst weg tegen de lichte plekken in de video. Links dekkend waar de kop
   staat, naar rechts open zodat je de kliniek blijft zien. */
.hero__waas {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      var(--cream) 0%,
      rgba(253, 247, 239, 0.94) 32%,
      rgba(253, 247, 239, 0.58) 58%,
      rgba(253, 247, 239, 0.34) 100%),
    linear-gradient(to top, rgba(253, 247, 239, 0.75), transparent 38%);
}

@media (max-width: 899px) {
  /* Op een smal scherm staat de tekst over het hele beeld, dus dekt de waas
     overal genoeg af. */
  .hero--video { padding-block: 56px 64px; }
  .hero__waas {
    background: linear-gradient(180deg,
      rgba(253, 247, 239, 0.90) 0%,
      rgba(253, 247, 239, 0.86) 55%,
      rgba(253, 247, 239, 0.72) 100%);
  }
}

/* Wie minder beweging wil, krijgt alleen het posterbeeld. */
@media (prefers-reduced-motion: reduce) {
  .hero__film-video { display: none; }
  .hero__film {
    background-image: var(--hero-poster);
    background-size: cover;
    background-position: 50% 42%;
  }
}

.hero__rating { margin-top: 24px; font-size: 0.9375rem; color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stars {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  letter-spacing: 2px;
  line-height: 1;
  vertical-align: -0.1em;
}
.stars__track { color: var(--brass-line); }
.stars__fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: var(--brass);
}

@media (min-width: 900px) {
  .hero { padding-block: 80px 112px; }
  .hero__inner { grid-template-columns: 1.02fr 0.98fr; align-items: center; gap: 64px; }
  .hero__media img { aspect-ratio: 4 / 5; object-position: 50% 32%; }
}

/* --------------------------------------------------------- page header -- */

.page-header { padding-block: 36px 8px; }
.page-header__title { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.75rem); margin-top: 10px; }
.page-header__text { margin-top: 16px; color: var(--muted); max-width: 62ch; font-size: 1.0625rem; }

.breadcrumbs { margin-bottom: 18px; font-size: 0.8125rem; color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--brass-line); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brass-dark); text-decoration: underline; }

/* ----------------------------------------------------- treatment hero -- */

.treatment-hero { padding-block: 36px 48px; }
.treatment-hero__inner { display: grid; gap: 30px; }
.treatment-hero__title { font-size: clamp(2.125rem, 1.4rem + 3.6vw, 4rem); margin-top: 10px; }
.treatment-hero__text { margin-top: 16px; color: var(--muted); font-size: 1.0625rem; }
.treatment-hero__media img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 4 / 5; object-fit: cover; }

.treatment-hero__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 28px 0 0;
  background: var(--brass-line);
  border: 1px solid var(--brass-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.treatment-hero__meta > div { background: var(--off); padding: 14px 16px; }
.treatment-hero__meta dt {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.treatment-hero__meta dd { margin: 0; font-size: 1.0625rem; font-weight: 500; }

@media (min-width: 900px) {
  .treatment-hero { padding-block: 48px 80px; }
  .treatment-hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
}

/* --------------------------------------------------------------- usp's -- */

.usp-bar { background: var(--sand); }
.usp-bar__list { display: grid; gap: 24px; }
.usp { padding-left: 18px; border-left: 2px solid var(--brass); }
.usp__title { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.usp__text { font-size: 0.9375rem; color: var(--muted); margin: 0; }

@media (min-width: 700px) { .usp-bar__list { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* --------------------------------------------------------------- split -- */

.split__inner { display: grid; gap: 32px; }
.split__media img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 4 / 3; object-fit: cover; }
/* Staande foto's: een langer kader, zodat er minder van afgesneden wordt. */
.split__media--staand img { aspect-ratio: 4 / 5; }

@media (min-width: 900px) {
  .split__inner { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .split--flip .split__body { order: 2; }
}

/* --------------------------------------------------------------- grids -- */

.grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .grid--cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--cards { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) { .grid--reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--reviews { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px) { .grid--team { grid-template-columns: repeat(2, 1fr); gap: 32px; } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--off);
  border: 1px solid var(--brass-line);
  border-radius: var(--r-lg);
  padding: 30px 28px;
}
.card__body { flex: 1 1 auto; }
.card__title { font-size: 1.375rem; margin-bottom: 8px; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--brass-dark); }
.card__text { font-size: 0.9375rem; color: var(--muted); }
.card__meta {
  display: flex; gap: 24px;
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--brass-line);
}
.card__meta dt { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.card__meta dd { margin: 2px 0 0; font-weight: 600; }
.card__link { margin: 16px 0 0; }
.card--compact { padding: 22px; }

/* --------------------------------------------------------------- steps -- */

.steps { counter-reset: step; display: grid; gap: 28px; }
.step { background: var(--off); border-radius: var(--r-lg); padding: 32px 30px; border: 1px solid var(--brass-line); }
.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--brass);
  line-height: 1;
  margin-bottom: 12px;
}
.step__title { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; margin-bottom: 8px; }
.step__text { font-size: 0.9375rem; color: var(--muted); }

@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------- prijstabel -- */

.table-wrap { overflow-x: auto; border: 1px solid var(--brass-line); border-radius: var(--r-md); background: var(--off); }
.price-table { width: 100%; border-collapse: collapse; min-width: 420px; }
.price-table th, .price-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--brass-line); }
.price-table thead th {
  background: var(--sand);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.price-table tbody th { font-weight: 500; font-size: 0.9375rem; }
.price-table td { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td { border-bottom: none; }
.price-table tbody tr:hover { background: var(--brass-tint); }

/* ----------------------------------------------------------- checklist -- */

.checklist { display: grid; gap: 12px; }
.checklist li { position: relative; padding-left: 30px; color: var(--muted); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brass);
}
@media (min-width: 700px) { .checklist { grid-template-columns: repeat(2, 1fr); gap: 12px 32px; } }

/* --------------------------------------------------------------- tags -- */

.tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  padding: 8px 16px;
  background: var(--brass-tint);
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brass-dark);
}

/* ----------------------------------------------------------------- faq -- */

.faq { border-top: 1px solid var(--brass-line); }
.faq-item { border-bottom: 1px solid var(--brass-line); }
.faq-item__q { margin: 0; font-family: var(--font-body); }
.faq-item__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.faq-item__btn:hover { color: var(--brass-dark); }
.faq-item__icon {
  position: relative;
  flex: 0 0 auto;
  width: 20px; height: 20px;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--brass);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.faq-item__icon::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-item__icon::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.faq-item__btn[aria-expanded="true"] .faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-item__a { padding: 0 0 22px; color: var(--muted); max-width: 62ch; }
.faq-item__a[hidden] { display: none; }

/* ------------------------------------------------------------- reviews -- */

.review {
  margin: 0;
  background: var(--off);
  border: 1px solid var(--brass-line);
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.review blockquote { margin: 0; flex: 1 1 auto; }
.review blockquote p { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.45; }
.review figcaption { font-size: 0.875rem; font-weight: 500; color: var(--muted); }
.review__date { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--muted); opacity: 0.8; margin-top: 2px; }

/* Rondje met initialen. De kleur komt uit de naam, zie gi_avatar(). */
.review__wie { display: flex; align-items: center; gap: 12px; }
.review__naam { min-width: 0; }
.review__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--avatar, var(--brass));
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  line-height: 1;
  /* Een dun randje in de tegelkleur maakt het rondje rustiger op het vlak. */
  box-shadow: 0 0 0 3px var(--off);
}

.rating-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 12px;
  margin: -14px 0 30px;
  font-size: 0.9375rem;
  color: var(--muted);
}
.rating-line__score {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--ink);
}
.rating-line__meta { font-size: 0.875rem; }

/* --------------------------------------------------------------- stats -- */

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; text-align: center; }
.stat__value { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); color: var(--brass); margin: 0; line-height: 1; }
.stat__label { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 10px 0 0; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------- team -- */

.person__media img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 3 / 4; object-fit: cover; margin-bottom: 18px; }
.person__name { font-size: 1.375rem; }
.person__role { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); margin: 6px 0 12px; }
.person__bio { color: var(--muted); font-size: 0.9375rem; }

/* ----------------------------------------------------------- formulier -- */

.form { margin-top: 28px; }
.form__grid { display: grid; gap: 18px; }
@media (min-width: 640px) {
  .form__grid { grid-template-columns: repeat(2, 1fr); }
  .field { grid-column: 1 / -1; }
  .field--half { grid-column: span 1; }
}

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 0.875rem; font-weight: 500; color: var(--ink); }
.req { color: var(--brass); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--brass-line);
  border-radius: var(--r-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23986A3E' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 44px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--brass-tint);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--error); }

.field__error { margin: 0; font-size: 0.8125rem; color: var(--error); }
.field__error[hidden] { display: none; }

.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.field--check input {
  width: 22px; height: 22px; min-height: 0;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--brass);
}
.field--check label { font-weight: 400; font-size: 0.9375rem; color: var(--muted); flex: 1 1 240px; }
.field--check .field__error { flex: 1 1 100%; }

.form__privacy { margin: 16px 0 24px; font-size: 0.8125rem; color: var(--muted); }
/* Notitie vlak boven het akkoordvinkje, nu voor de afzegtermijn. Moet
   opvallen zonder dreigend te worden: zelfde warme vlak als elders op de
   site, met een streep ernaast zodat het oog erop valt. */
.form__note {
  margin: 4px 0 20px;
  padding: 12px 16px;
  border-left: 3px solid var(--brass);
  background: var(--brass-tint);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.875rem;
  color: var(--ink);
}
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { margin: 18px 0 0; padding: 14px 16px; border-radius: var(--r-sm); font-size: 0.9375rem; }
.form__status[hidden] { display: none; }
.form__status[data-state="error"] { background: #F8E8E6; color: var(--error); }
.form__status[data-state="busy"] { background: var(--sand); color: var(--muted); }
.form__status[data-state="ok"] { background: #E6EEE9; color: var(--success); }

/* ------------------------------------------------------------- contact -- */

.contact-split { display: grid; gap: 48px; }
@media (min-width: 940px) { .contact-split { grid-template-columns: 1.1fr 0.9fr; gap: 64px; } }

.contact-card { font-style: normal; display: grid; gap: 10px; margin-bottom: 8px; }
.contact-card__line { margin: 0; }
.contact-card a { color: var(--ink); text-decoration: none; }
.contact-card a:hover { color: var(--brass-dark); text-decoration: underline; }

.hours { display: grid; gap: 6px; margin: 0; }
.hours > div { display: flex; justify-content: space-between; gap: 16px; font-size: 0.9375rem; padding: 6px 0; border-bottom: 1px solid var(--brass-line); }
.hours dt { color: var(--muted); }
.hours dd { margin: 0; font-weight: 500; }

.map-embed { margin-top: 28px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--brass-line); }
.map-embed iframe { width: 100%; height: 300px; display: block; }

/* ---------------------------------------------------------- cta-banner -- */

.cta-banner { background: var(--brass); color: var(--white); padding-block: var(--section-y); }
.cta-banner__inner { text-align: center; max-width: 680px; margin-inline: auto; }
.cta-banner .eyebrow { color: rgba(255, 255, 255, 0.85); }
.cta-banner__title { font-size: clamp(1.875rem, 1.2rem + 3vw, 3.25rem); color: var(--white); }
.cta-banner__text { margin-top: 14px; color: rgba(255, 255, 255, 0.88); font-size: 1.0625rem; }
.cta-banner .btn--primary { background: var(--white); color: var(--brass-dark); }
.cta-banner .btn--primary:hover { background: var(--sand); color: var(--brass-dark); }
.cta-banner .btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.5); }
.cta-banner .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }

/* -------------------------------------------------------------- footer -- */

.site-footer { background: var(--footer); color: rgba(255, 253, 249, 0.75); padding-block: 56px 28px; }
.site-footer__grid { display: grid; gap: 36px; }
@media (min-width: 700px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
/* Vijf kolommen sinds alle behandel- en kennispagina's in de voettekst staan:
   merk, links, botox, fillers en overig, kennisbank, kliniek. Daaronder gaat
   het naar twee kolommen en op een telefoon naar een. */
@media (min-width: 1000px) {
  .site-footer__grid { grid-template-columns: 1.4fr 0.8fr 1fr 1fr 1fr 1.1fr; gap: 40px; }
}
@media (min-width: 1000px) and (max-width: 1320px) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
}

.site-footer img { filter: brightness(0) invert(1); opacity: 0.92; height: 36px; width: auto; }
.site-footer__brand p { margin-top: 18px; font-size: 0.9375rem; max-width: 36ch; }
.site-footer__tagline { font-family: var(--font-display); font-size: 1.125rem; color: var(--sand); }

.site-footer__heading {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sand);
  margin: 0 0 14px;
}

/* Een tweede kopje binnen dezelfde kolom, zoals Overig onder de fillers en
   Regio onder de kennisbank. Moet ná de basisregel hierboven staan: die zet
   de margin met een shorthand, en op gelijke specificiteit wint de laatste.
   Stond deze regel eerder en plakte het kopje tegen de link erboven. */
.site-footer__heading--vervolg { margin-top: 34px; }
.site-footer__col ul { display: grid; gap: 9px; }
.site-footer a { color: rgba(255, 253, 249, 0.75); text-decoration: none; font-size: 0.9375rem; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }

.site-footer__address { font-style: normal; display: grid; gap: 8px; margin-bottom: 20px; }

.social { display: flex; gap: 10px; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(255, 253, 249, 0.25);
  border-radius: 50%;
  color: rgba(255, 253, 249, 0.8);
}
.social a:hover { background: rgba(255, 253, 249, 0.1); color: var(--white); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: center;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 253, 249, 0.16);
  font-size: 0.8125rem;
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer__legal a { font-size: 0.8125rem; }

/* ----------------------------------------------------------- cookiebar -- */

.cookiebar {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 150;
  background: var(--off);
  border: 1px solid var(--brass-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 16px 18px;
  max-height: 60vh;
  overflow-y: auto;
}
.cookiebar[hidden] { display: none; }
.cookiebar__inner { display: grid; gap: 14px; max-width: var(--shell); margin-inline: auto; }
.cookiebar__title { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; margin: 0 0 6px; }
.cookiebar__text { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
@media (min-width: 820px) { .cookiebar__text { font-size: 0.875rem; } }
.cookiebar__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookiebar__actions .btn { flex: 1 1 auto; }

@media (min-width: 820px) {
  .cookiebar { left: 24px; right: 24px; bottom: 24px; padding: 22px 26px; }
  .cookiebar__inner { grid-template-columns: 1fr auto; align-items: center; gap: 32px; }
  .cookiebar__actions .btn { flex: 0 0 auto; }
}

/* ------------------------------------------------------- whatsapp-knop -- */

.whatsapp-fab {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  box-shadow: var(--shadow-md);
  transition: transform 0.18s ease;
}
.whatsapp-fab:hover { transform: scale(1.06); color: var(--white); }
.whatsapp-fab svg { width: 26px; height: 26px; }

/* Niet over de cookiebanner heen */
body:has(#cookiebar:not([hidden])) .whatsapp-fab { display: none; }

@media (min-width: 820px) {
  .whatsapp-fab { right: 24px; bottom: 24px; width: 58px; height: 58px; }
}

/* --------------------------------------------------------------- 404 -- */

.error-page { text-align: center; padding-block: 80px 96px; }
.error-page__code { font-family: var(--font-display); font-size: clamp(4rem, 3rem + 8vw, 8rem); color: var(--brass); line-height: 1; margin: 0; }
.error-page__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

/* --------------------------------------------------------------- print -- */

@media print {
  .site-header, .site-footer, .cta-banner, .cookiebar, .whatsapp-fab, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 16px; }
}


/* Beeld onder een tekstblok, bijvoorbeeld bij "De behandeling" */
.prose-media { margin: 36px 0 0; }
.prose-media img {
  width: 100%;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ==========================================================================
   Beweging
   Alles hieronder werkt alleen als <html> de klasse .anim heeft. Die wordt
   gezet door een klein script in de <head>, maar alleen wanneer de browser
   IntersectionObserver kent én de bezoeker geen verminderde beweging wil.
   Zonder JavaScript staat dus gewoon alles zichtbaar.
   ========================================================================== */

/* ---- bij het laden: kop van de pagina komt rustig op ---- */

@keyframes gc-op {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.anim .hero__content > *,
.anim .page-header > .shell > *,
.anim .treatment-hero__body > * {
  opacity: 0;
  animation: gc-op var(--duur) var(--ease) forwards;
}
.anim .hero__content > :nth-child(1),
.anim .page-header > .shell > :nth-child(1),
.anim .treatment-hero__body > :nth-child(1) { animation-delay: 0.05s; }
.anim .hero__content > :nth-child(2),
.anim .page-header > .shell > :nth-child(2),
.anim .treatment-hero__body > :nth-child(2) { animation-delay: 0.16s; }
.anim .hero__content > :nth-child(3),
.anim .page-header > .shell > :nth-child(3),
.anim .treatment-hero__body > :nth-child(3) { animation-delay: 0.27s; }
.anim .hero__content > :nth-child(4),
.anim .page-header > .shell > :nth-child(4),
.anim .treatment-hero__body > :nth-child(4) { animation-delay: 0.38s; }
.anim .hero__content > :nth-child(n+5),
.anim .page-header > .shell > :nth-child(n+5),
.anim .treatment-hero__body > :nth-child(n+5) { animation-delay: 0.48s; }

/* Beeld naast de kop: iets later, en hij zoomt heel licht uit */
.anim .hero__media,
.anim .treatment-hero__media { overflow: hidden; border-radius: var(--r-lg); }
.anim .hero__media img,
.anim .treatment-hero__media img {
  opacity: 0;
  transform: scale(1.07);
  animation: gc-beeld 1.4s var(--ease) 0.2s forwards;
}
@keyframes gc-beeld {
  from { opacity: 0; transform: scale(1.07); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- tijdens het scrollen ---- */

.anim [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duur) var(--ease), transform var(--duur) var(--ease);
  transition-delay: var(--stap, 0s);
}
.anim [data-reveal].is-zichtbaar {
  opacity: 1;
  transform: none;
}

/* Beelden onderweg: zachte zoom in plaats van alleen opkomen */
.anim figure[data-reveal] { overflow: hidden; border-radius: var(--r-lg); transform: none; opacity: 1; }
.anim figure[data-reveal] img:not(.promo__nachtbeeld) {
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1.3s var(--ease), transform 1.6s var(--ease);
  transition-delay: var(--stap, 0s);
}
.anim figure[data-reveal].is-zichtbaar img:not(.promo__nachtbeeld) { opacity: 1; transform: scale(1); }

/* Niets van dit alles bij verminderde beweging of op papier */
@media (prefers-reduced-motion: reduce) {
  .anim .hero__content > *,
  .anim .page-header > .shell > *,
  .anim .treatment-hero__body > *,
  .anim .hero__media img,
  .anim .treatment-hero__media img,
  .anim [data-reveal],
  .anim figure[data-reveal] img:not(.promo__nachtbeeld) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}
@media print {
  .anim [data-reveal], .anim [data-reveal] img:not(.promo__nachtbeeld) { opacity: 1 !important; transform: none !important; }
}

/* De telefoon op contact komt bij het scrollen het scherm binnen, net als de
   hand met de naald op Behandelingen en prijzen.

   Twee dingen wijken af van de algemene figure-regel hierboven. Die zet
   overflow hidden met een ronde hoek, wat klopt voor een foto in een kader
   maar een uitgesneden beeld zou afsnijden. En de beweging is hier
   horizontaal in plaats van een zoom, want het beeld hoort van buiten het
   scherm te komen. De regel staat bewust na die algemene regel: beide hebben
   dezelfde specificiteit, dus de volgorde beslist.

   Bij verminderde beweging vangt het blok hierboven dit al af; die selector
   dekt deze img ook. */
.anim figure.contact-beeld[data-reveal] {
  overflow: visible;
  border-radius: 0;
}
.anim figure.contact-beeld[data-reveal] img {
  opacity: 0;
  transform: translateX(18%);
  transition: opacity 1s var(--ease), transform 1.3s var(--ease);
  transition-delay: var(--stap, 0s);
}
.anim figure.contact-beeld[data-reveal].is-zichtbaar img {
  opacity: 1;
  transform: translateX(0);
}

/* Liggend beeld in de paginakop, nu nog alleen de hand met de naald op
   Behandelingen en prijzen.

   Twee dingen. De onderarm is in de bronfoto met een harde diagonaal
   afgesneden; die knip zie je als een rechte rand midden in beeld. Een
   verloop langs dezelfde richting als de arm laat hem oplossen in plaats van
   eindigen. En het beeld komt bij het scrollen van rechts binnen, net als de
   telefoon op contact.

   De uitsnede mag niet geclipt worden, dus de algemene figure-regel met
   overflow hidden gaat hier niet op; deze regel staat er daarom na. */
.anim figure.page-header__beeld--uitsnede[data-reveal] {
  overflow: visible;
  border-radius: 0;
}
.page-header__beeld--uitsnede img {
  /* Het bronbeeld is 42 graden gekanteld, zodat de arm van rechtsonder het
     scherm in komt. Waar de arm uit het oorspronkelijke kader liep zit nu een
     schuine snede rechtsonder; een verloop in dezelfde richting laat die
     oplossen in plaats van eindigen op een rechte rand. */
  -webkit-mask-image: linear-gradient(118deg, #000 68%, transparent 97%);
  mask-image: linear-gradient(118deg, #000 68%, transparent 97%);
}
.anim figure.page-header__beeld--uitsnede[data-reveal] img {
  opacity: 0;
  transform: translateX(16%);
  transition: opacity 1s var(--ease), transform 1.3s var(--ease);
  transition-delay: var(--stap, 0s);
}
.anim figure.page-header__beeld--uitsnede[data-reveal].is-zichtbaar img {
  opacity: 1;
  transform: translateX(0);
}

/* ---- schematische spoorkaart ---- */

.spoorkaart__beeld { margin: 8px 0 0; }
.spoorkaart__beeld figcaption {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.spoor {
  display: block;
  width: 100%;
  height: auto;
  max-width: 780px;
}

/* De lijn ligt er rustig bij; het stuk tussen jouw station en de kliniek
   licht op. Zo zie je in een oogopslag waar je opstapt en waar je eruit moet. */
.spoor__baan {
  fill: none;
  stroke: var(--line, rgba(152, 106, 62, 0.28));
  stroke-width: 4;
  stroke-linecap: round;
}
.spoor__baan--actief {
  stroke: var(--brass);
  stroke-width: 6;
}

.spoor__halte circle {
  fill: var(--cream);
  stroke: var(--line, rgba(152, 106, 62, 0.45));
  stroke-width: 3;
}
.spoor__halte text {
  font-family: var(--font-body);
  font-size: 15px;
  fill: var(--muted);
}

/* Jouw station en de kliniek zijn de twee die ertoe doen. */
.spoor__halte--jij circle { fill: var(--brass); stroke: var(--brass); }
.spoor__halte--jij text { fill: var(--ink); font-weight: 600; }
.spoor__halte--kliniek circle { fill: var(--ink); stroke: var(--ink); }
.spoor__halte--kliniek text { fill: var(--ink); font-weight: 600; }
.spoor__bij {
  font-size: 13px !important;
  font-weight: 400 !important;
  fill: var(--brass) !important;
}

/* Haltes met een eigen pagina zijn echte links. Het trefvlak is ruimer dan
   het bolletje, anders is het op een telefoon niet te raken; het is
   onzichtbaar maar vangt wel de muis. */
.spoor__trefvlak { fill: transparent; }
.spoor__halte--link { cursor: pointer; }
.spoor__halte--link circle,
.spoor__halte--link text {
  transition: fill 0.2s var(--ease), stroke 0.2s var(--ease);
}
.spoor__halte--link:hover circle,
.spoor__halte--link:focus-visible circle {
  fill: var(--brass);
  stroke: var(--brass);
}
.spoor__halte--link:hover text,
.spoor__halte--link:focus-visible text {
  fill: var(--ink);
  text-decoration: underline;
}
.spoor__halte--link:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Op een smal scherm wordt de tekst onleesbaar klein als de kaart meeschaalt.
   Daarom mag hij daar zijwaarts schuiven in plaats van te krimpen. */
@media (max-width: 680px) {
  .spoorkaart__beeld {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .spoor { width: 700px; max-width: none; }
}

/* ---- zone-kiezer ---- */

/* Gezicht met aanklikbare behandelzones, naast een lijst met dezelfde links.
   Op een telefoon staan ze onder elkaar: eerst het gezicht, dan de lijst. */
.zone__raster { display: grid; gap: 28px; }
@media (min-width: 860px) {
  .zone__raster {
    grid-template-columns: minmax(300px, 1.05fr) 1fr;
    gap: 52px;
    align-items: center;
  }
}

.zone__beeld { margin: 0; }
.zone__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 68vh;
  color: var(--brass);
}

/* De foto staat in kleur. Wijs je een zone aan, dan valt het beeld terug naar
   grijs en blijft alleen die zone in kleur staan. Zo springt de zone eruit
   zonder dat er iets hoeft te bewegen of te knipperen.

   Het ontkleuren zit op het beeld en niet op de hele SVG: de zones liggen in
   dezelfde SVG en moeten juist hun kleur houden. */
.zone__svg image {
  transition: filter 0.45s var(--ease);
}
.zone.is-gekozen .zone__svg image {
  filter: grayscale(1) brightness(1.04);
}

.zone__vlak {
  fill: var(--brass);
  /* In rust alleen een dunne contour, geen vulling.
     Alle negen zones tegelijk ingekleurd maakte er een vlekkenpatroon van
     waarin de ogen, de neus en de mond verdwenen. Nu leest het gezicht
     gewoon, en licht er één zone op zodra je hem aanwijst. Dat is ook wat de
     kiezer moet doen. */
  fill-opacity: 0;
  stroke: var(--brass-dark, #F1C78D);
  /* Over een foto moet de contour het opnemen tegen huid en haar. Dun en
     doorzichtig zoals bij de lijntekening verdween hij volledig. De donkere
     schaduw eronder houdt hem leesbaar op lichte partijen, het brons zelf op
     donker haar. */
  stroke-width: 2.4;
  stroke-opacity: 0.85;
  stroke-dasharray: 5 5;
  filter: drop-shadow(0 0 2px rgba(20, 17, 13, 0.55));
  transition: fill-opacity 0.25s var(--ease), stroke-opacity 0.25s var(--ease),
              stroke-width 0.25s var(--ease);
}
.zone__link { cursor: pointer; }

/* Aanwijzen, aantabben of aangewezen vanuit de lijst: allemaal hetzelfde
   oplichten. De klasse is-actief wordt door site.js gezet vanuit de lijst. */
.zone__link:hover .zone__vlak,
.zone__link:focus-visible .zone__vlak,
.zone__link.is-actief .zone__vlak {
  fill-opacity: 0.5;
  stroke-opacity: 1;
  stroke-width: 3;
  stroke-dasharray: none;
}
.zone__link:focus-visible { outline: none; }
.zone__link:focus-visible .zone__vlak {
  stroke-width: 3;
  stroke: var(--brass-dark);
}

/* ---- de lijst ernaast ---- */
.zone__lijst ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
@media (min-width: 560px) {
  .zone__lijst ul { grid-template-columns: 1fr 1fr; gap: 6px 14px; }
}
.zone__naam {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line, rgba(152, 106, 62, 0.18));
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9375rem;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.zone__naam:hover,
.zone__naam:focus-visible,
.zone__naam.is-actief {
  background: var(--off);
  border-color: var(--brass);
}
.zone__prijs { color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }

/* Een behandeling zonder plek op het gezicht, zoals de oksels. Een streepje
   ervoor maakt duidelijk dat je hem op het gezicht niet hoeft te zoeken. */
.zone__naam--buiten .zone__titel::before {
  content: "— ";
  color: var(--muted);
}

.zone__note {
  margin-top: 18px;
  font-size: 0.875rem;
  color: var(--muted);
  max-width: 54ch;
}

/* ---- afzetlint "coming soon" ---- */

/* Twee kruisende linten over een productbeeld heen, om te laten zien dat iets
   nog niet te koop is. Het lint ligt erbovenop maar vangt geen klikken op, dus
   links eronder blijven gewoon werken.

   De shell krijgt hier positie en isolatie: het lint moet het beeld kunnen
   overlappen zonder dat de rest van de pagina eronder verschuift. */
.product-shot--afgezet > .shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.tape {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.tape__band {
  position: absolute;
  /* Breder dan het vlak, zodat de uiteinden er aan weerszijden uit lopen en
     het lint nergens netjes "begint". */
  width: 160%;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #F5C518;
  border-top: 3px dashed #14110D;
  border-bottom: 3px dashed #14110D;
  box-shadow: 0 10px 28px rgba(20, 17, 13, 0.22);
}
.tape__band--een  { transform: rotate(-16deg); }
.tape__band--twee { transform: rotate(16deg); }

.tape__loop {
  display: flex;
  flex: none;
  gap: clamp(18px, 3vw, 40px);
  padding-block: clamp(6px, 1.1vw, 13px);
  white-space: nowrap;
}
.tape__loop span {
  font-family: var(--font-sans, system-ui), sans-serif;
  font-weight: 600;
  font-size: clamp(0.75rem, 1.5vw, 1.25rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #14110D;
}

/* Geen beweging bij verminderde beweging; het lint beweegt sowieso niet,
   maar de schaduw mag op papier weg. */
@media print {
  .tape { display: none; }
}

/* ---------------------------------------------------------------- acties -- */

.promo { background: var(--sand); }
.promo__kop { max-width: 58ch; margin-bottom: 44px; }
.promo__tekst { margin-top: 18px; color: var(--muted); font-size: 1.0625rem; }
.promo__periode {
  margin-top: 18px;
  display: inline-block;
  padding: 8px 18px;
  background: var(--white);
  border: 1px solid var(--brass-line);
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brass-dark);
}

.promo__prijzen { display: grid; gap: 14px; }
@media (min-width: 720px) { .promo__prijzen { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.promo__prijs {
  background: var(--off);
  border: 1px solid var(--brass-line);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  text-align: center;
}
.promo__wat {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.promo__nu {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 2.4vw, 3.5rem);
  line-height: 1;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.promo__was { margin: 14px 0 0; font-size: 0.875rem; color: var(--muted); }
.promo__was s { opacity: 0.75; }
.promo__voordeel {
  display: block;
  margin-top: 6px;
  font-weight: 600;
  color: var(--success);
}
.promo__kleinelettertjes { max-width: 70ch; }

/* Afgelopen actie: prijzen gedempt, melding erboven */
.promo.is-verlopen .promo__prijzen,
.promo.is-verlopen .promo__periode,
.promo.is-verlopen .btn-row { opacity: 0.45; }
.promo.is-verlopen .promo__prijzen { pointer-events: none; }
.promo__verlopen {
  margin: 0 0 28px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--brass-line);
  border-left: 3px solid var(--brass);
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
}
.promo__verlopen[hidden] { display: none; }

.promo-leeg { text-align: center; }
.promo-leeg .btn-row { justify-content: center; }

/* Uitgeknipt beeld op witte ondergrond: eigen vlak, anders valt het wit op */
.promo__boven { margin-bottom: 44px; }
.promo__boven--beeld { display: grid; gap: 28px; align-items: center; }
@media (min-width: 860px) {
  .promo__boven--beeld { grid-template-columns: 1fr minmax(280px, 360px); gap: 56px; align-items: center; }
}
.promo__beeld, .contact-beeld { margin: 0; }
.promo__beeld img, .contact-beeld img {
  width: 100%;
  height: auto;
  /* Geen kader of achtergrond: het beeld is uitgesneden, dus de handen
     mogen gewoon doorlopen tot aan de rand. Een omlijsting knipt ze af. */
}

/* Het beeld loopt bewust door tot voorbij de rechterrand van het scherm:
   de handen komen het beeld in en lopen er aan de zijkant weer uit.
   overflow-x: clip houdt de pagina ondertussen vrij van zijwaarts scrollen —
   zonder dat zou je een horizontale scrollbalk krijgen. */
.promo__beeld img { width: 100%; max-width: none; height: auto; }

.contact-beeld { margin-bottom: 32px; max-width: 320px; }

@media (min-width: 900px) {
  .promo { overflow-x: clip; }
  .promo__boven--beeld { grid-template-columns: 1fr clamp(300px, 28vw, 420px); }
  /* Trek de kolom tot voorbij de vensterrand: halve marge naast de shell,
     plus de zijrand, plus een stuk dat er bewust afloopt. */
  .promo__beeld {
    margin-right: calc(-1 * ((100vw - min(100vw, var(--shell))) / 2 + var(--shell-pad) + 3vw));
  }

  /* Op contact loopt de telefoon maar een klein stukje weg: hij moet
     herkenbaar blijven, anders zie je alleen nog een reepje snoer. */
  /* Clippen op de sectie, niet op .contact-split: dat laatste is de shell
     (max 1180px breed), dus daar werd het beeld al afgesneden bij de rand van
     de kolom in plaats van bij de rand van het scherm. */
  [data-layout="contact_split"] { overflow-x: clip; }
  .contact-beeld {
    max-width: none;
    width: clamp(360px, 28vw, 480px);
    /* De uitloop is bewust een vast getal. Met een vw-waarde groeide hij mee
       met het scherm, en bij fullscreen verdween de telefoon zelf in plaats
       van alleen de arm. Nu loopt alleen de mouw het beeld uit. */
    margin-right: calc(-1 * ((100vw - min(100vw, var(--shell))) / 2 + var(--shell-pad) + 36px));
    margin-left: auto;
  }
}

/* Het BIG-nummer hoort zichtbaar en controleerbaar te zijn */
.person__big {
  margin: 0 0 14px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.person__big strong { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.person__big a { margin-left: 8px; }

/* ------------------------------------------------------------- statement -- */

.statement { padding-block: calc(var(--section-y) * 0.9); }
.statement--brass { background: var(--brass); color: var(--white); }
.statement--sand { background: var(--sand); }

.statement__inner { text-align: center; max-width: 960px; margin-inline: auto; }
.statement--brass .eyebrow { color: rgba(255, 255, 255, 0.8); }

.statement__zin {
  /* ch rekent hier met de displayletter zelf, dus dit geeft 2 tot 3 regels */
  max-width: 15ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.2rem + 5.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.statement--brass .statement__zin { color: var(--white); }

.statement__noot {
  margin: 22px 0 0;
  font-size: 0.9375rem;
  max-width: 44ch;
  margin-inline: auto;
}
.statement--brass .statement__noot { color: rgba(255, 255, 255, 0.85); }

/* ------------------------------------------------- actieblok: licht uit -- */
/* Alleen dit blok kan in de avondstand; de rest van de pagina blijft licht.
   Alles binnen de sectie werkt op tokens, dus het volstaat om die tokens
   hier opnieuw te zetten: de kleuren erven vanzelf door. */

.lichtknop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px auto;
  padding: 9px 18px 9px 12px;
  background: var(--white);
  border: 1px solid var(--brass-line);
  border-radius: var(--r-pill);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.lichtknop[hidden] { display: none; }
.lichtknop:hover { color: var(--brass-dark); border-color: var(--brass); }
.lichtknop:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* Het bolletje is het lampje: uit is een lege ring, aan is een warme gloed. */
.lichtknop__bol {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 0 rgba(220, 174, 112, 0);
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

/* De shell is een kolom, zodat margin-left: auto de knop naar rechts duwt. */
.promo--wisselbaar > .shell { display: flex; flex-direction: column; }
.promo--wisselbaar > .shell > :not(.lichtknop) { width: 100%; }

/* Twee beelden over elkaar: dag eronder, nacht erbovenop. */
.promo__beeld--wissel { position: relative; }
.promo__nachtbeeld {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  /* Staat buiten de scroll-animatie: dit beeld hoort bij de schakelaar,
     niet bij het opkomen van de sectie. Zie de :not() hierboven. */
  transition: opacity 0.85s var(--ease);
}

/* Avondstand. */
.promo--nacht {
  --cream:      #15110E;
  --sand:       #15110E;
  --off:        #1F1914;
  --white:      #261E18;
  --ink:        #F3E9DC;
  --muted:      #B4A190;
  --brass:      #DCAE70;
  --brass-dark: #F1C78D;
  --brass-tint: rgba(220, 174, 112, 0.14);
  --brass-line: rgba(220, 174, 112, 0.26);
  --success:    #7FB08F;
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-md:  0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.3);
  color: var(--ink);
}
.promo--nacht .promo__nachtbeeld { opacity: 1; }
.promo--nacht .lichtknop__bol {
  background: #FFD9A0;
  box-shadow: 0 0 14px 2px rgba(255, 196, 120, 0.75);
}

/* De overgang zelf. Zonder dit springen de vlakken en de tekst hard om. */
@media (prefers-reduced-motion: no-preference) {
  .promo--wisselbaar,
  .promo--wisselbaar :where(div, section, ul, li, p, h2, h3, a, s, span, figure, button) {
    transition: background-color 0.7s var(--ease), border-color 0.7s var(--ease),
                color 0.7s var(--ease);
  }
  .promo--wisselbaar .btn {
    transition: background-color 0.7s var(--ease), color 0.7s var(--ease),
                border-color 0.7s var(--ease), transform 0.18s ease;
  }
}

/* ---- de nachtlucht boven in het actieblok ---- */
/* Overdag staat de lucht er wel, maar onzichtbaar. Zo hoeft er bij het
   omschakelen niets geladen te worden en verschijnt alles tegelijk. */

.promo--wisselbaar { position: relative; isolation: isolate; }
.promo--wisselbaar > .shell { position: relative; z-index: 1; }

/* Vaste band boven de inhoud waar de lucht in past. Die ruimte staat er in
   beide standen, zodat het blok niet verspringt als je het licht uitdoet —
   en overdag geeft het de kop gewoon wat meer lucht. */
.promo--wisselbaar { padding-top: calc(var(--section-y) + 52px); }

.lucht {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  /* Meeschalend met de breedte: op een telefoon snijdt een brede lucht
     anders zo ver in dat je alleen nog twee vergrote sterren ziet. */
  height: clamp(170px, 26vw + 96px, 310px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s var(--ease);
}
.lucht svg { display: block; width: 100%; height: 100%; }
.promo--nacht .lucht { opacity: 1; }

/* De lucht loopt onderaan weg in het vlak, anders krijg je een harde rand. */
.lucht::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  background: linear-gradient(to bottom, rgba(21, 17, 14, 0), var(--sand));
}

@media (prefers-reduced-motion: no-preference) {
  .lucht__ster, .lucht__glinster {
    animation: twinkel 5.5s var(--ease) infinite;
    animation-delay: var(--ster-wacht, 0s);
  }
  .lucht__wolk--ver     { animation: drijf 110s linear infinite; }
  .lucht__wolk--dichtbij { animation: drijf 70s linear infinite reverse; }

  /* De sterren komen pas op als het vlak al donker is: eerst gaat het licht
     uit, dan verschijnt de lucht. Dat maakt er een overgang van in plaats
     van een omschakeling. */
  .promo--nacht .lucht { transition-delay: 0.35s; }
}

@keyframes twinkel {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}
@keyframes drijf {
  from { transform: translateX(-4%); }
  to   { transform: translateX(4%); }
}

/* ---- paginakop met uitgesneden beeld rechts ---- */
/* Zelfde gedachte als bij contact_split en het actieblok: het beeld loopt
   bewust door tot voorbij de vensterrand, zodat de arm het scherm binnenkomt.
   overflow-x: clip staat op de sectie zelf en niet op de shell, anders knipt
   de kolom het beeld al af op 1180px in plaats van aan de schermrand.

   Het beeld houdt zijn eigen verhouding; geen object-fit. Dat sneed de hand
   juist horizontaal bij, waardoor hij netjes in een kadertje bleef staan in
   plaats van het scherm uit te lopen. */

.page-header--beeld { overflow-x: clip; padding-bottom: 0; }
.page-header__beeld { margin: 0; }
.page-header__beeld img { display: block; width: 100%; max-width: none; height: auto; }

@media (max-width: 759px) {
  .page-header__beeld { width: 76%; margin: 24px -22px 0 auto; }
}

@media (min-width: 760px) {
  .page-header__split {
    display: grid;
    grid-template-columns: 1fr clamp(240px, 30vw, 400px);
    gap: 32px;
    align-items: end;
  }
  .page-header__tekst { min-width: 0; padding-bottom: 28px; }
  .page-header__beeld {
    width: clamp(400px, 42vw, 640px);
    margin-left: auto;
    /* Vaste uitloop, geen vw: met een vw-waarde groeit hij mee met het scherm
       en verdwijnt bij fullscreen de hand zelf in plaats van alleen de mouw.
       De arm is recht afgeknipt; deze uitloop zorgt dat die snede buiten beeld
       valt, zodat het lijkt alsof de arm het scherm uit loopt. */
    margin-right: calc(-1 * ((100vw - min(100vw, var(--shell))) / 2 + var(--shell-pad) + 170px));
  }
}

/* ---- één product groot in beeld ---- */
/* De kaart is uitgesneden en heeft dus geen eigen schaduw. Die zetten we in
   CSS onder het beeld, zodat de kaart op elke achtergrond los komt te staan
   en we de uitsnede ook ergens anders kunnen hergebruiken. */

.product-shot__beeld {
  position: relative;
  margin: 0 auto;
  max-width: 820px;
  width: 92%;
}
.product-shot__beeld img { display: block; width: 100%; height: auto; }

/* Zachte, brede schaduw die de hoek van de kaart volgt. */
.product-shot__beeld::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 8%;
  right: 8%;
  bottom: 4%;
  height: 16%;
  background: radial-gradient(ellipse at center, rgba(99, 59, 44, 0.24), rgba(99, 59, 44, 0) 72%);
  filter: blur(10px);
}

.product-shot__onderschrift {
  margin-top: 20px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---- prijsregels die doorlinken ---- */
/* Niet elke regel heeft een eigen pagina. De regels die dat wel hebben
   moeten eruitzien als een link, anders klikt niemand erop en levert de
   koppeling alleen iets op voor Google en niets voor de bezoeker. */

.price-table th[scope="row"] a {
  color: var(--brass-dark);
  text-decoration: none;
  font-weight: 500;
}
.price-table th[scope="row"] a::after {
  content: " →";
  font-weight: 400;
  opacity: 0.55;
}
.price-table th[scope="row"] a:hover {
  text-decoration: underline;
}
.price-table tr:has(th a):hover { background: var(--brass-tint); }

/* ---- voor en na met een schuifbalk ---- */
/* De 'na'-foto ligt over de 'voor'-foto heen en wordt met clip-path tot aan
   de schuifpositie zichtbaar gemaakt. Geen tweede wrapper nodig en het beeld
   wordt niet uitgerekt, wat bij een overflow-oplossing wel gebeurt. */

.ba-rij {
  display: grid;
  gap: 28px;
  /* Bovengrens per kolom, anders rekt een enkel paar zich uit over de volle
     breedte van de shell en wordt een staande foto onhanteerbaar groot. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 380px));
  justify-content: center;
}
.ba { margin: 0; }

.ba__beeld {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--sand);
  box-shadow: var(--shadow-sm);
  --pos: 50%;
}
.ba__beeld img { display: block; width: 100%; height: auto; }
.ba__na {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  /* Van rechts onthullen: links blijft 'voor', rechts wordt 'na'. Dat volgt
     de leesrichting en klopt met de labels in de hoeken. */
  clip-path: inset(0 0 0 var(--pos));
}

/* De scheidingslijn volgt de schuif. */
.ba__lijn {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(99, 59, 44, 0.18);
  pointer-events: none;
}
.ba__lijn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-md);
  /* Twee pijltjes als losse vorm, zodat duidelijk is dat je kunt slepen.
     Met gestapelde gradients kwam dit er als een enkele punt uit. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12' fill='none' stroke='%23986A3E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 1.5 1 6l4 4.5M17 1.5 21 6l-4 4.5'/%3E%3C/svg%3E");
  background-size: 22px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.ba__label {
  position: absolute;
  top: 12px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(21, 17, 14, 0.55);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}
.ba__label--voor { left: 12px; }
.ba__label--na { right: 12px; }

/* De schuif ligt doorzichtig over het hele beeld. Zo sleep je overal, en
   krijg je bediening met pijltjestoetsen er gratis bij. */
.ba__schuif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
}
.ba__schuif::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;
  height: 100%;
  background: transparent;
  cursor: ew-resize;
}
.ba__schuif::-moz-range-thumb {
  width: 44px;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}
.ba__schuif:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.ba__onderschrift {
  margin-top: 14px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
}
.ba__kleinelettertjes { margin-top: 28px; max-width: 70ch; }

/* Liggend sfeerbeeld in de paginakop: wil breed staan, niet half buiten beeld. */
@media (max-width: 759px) {
  .page-header__beeld--breed {
    width: auto;
    margin: 26px -22px 0;
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    overflow: hidden;
  }
}
@media (min-width: 760px) {
  .page-header__beeld--breed {
    width: clamp(320px, 38vw, 560px);
    margin-right: calc(-1 * ((100vw - min(100vw, var(--shell))) / 2 + var(--shell-pad)));
  }
  .page-header__beeld--breed img { border-radius: var(--r-lg) 0 0 var(--r-lg); }
}

/* ---- video naast tekst ---- */
.video-blok__inner { display: grid; gap: 32px; align-items: center; }
@media (min-width: 860px) {
  .video-blok__inner { grid-template-columns: 1fr clamp(260px, 30vw, 360px); gap: 56px; }
}
.video-blok__tekst { min-width: 0; }
.video-blok__body { margin-top: 18px; color: var(--muted); font-size: 1.0625rem; }
.video-blok__media { margin: 0; }
.video-blok__media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  background: var(--sand);
  box-shadow: var(--shadow-md);
}
/* Staand beeld van een telefoon: zonder bovengrens wordt dat een toren. */
@media (max-width: 859px) {
  .video-blok__media { max-width: 300px; margin-inline: auto; }
}
.video-blok__onderschrift {
  margin-top: 14px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
}

/* KvK en btw-nummer onderaan: verplicht zichtbaar, maar geen blikvanger. */
.site-footer__bedrijf {
  margin-top: 4px;
  font-size: 0.8125rem;
  opacity: 0.7;
}

/* ---- punten rond een portret ---- */
/* De punten zijn tekst en geen plaatje, dus ze blijven leesbaar op een
   telefoon en Google kan ze lezen. Op een breed scherm staan ze links en
   rechts van het portret; daaronder vallen ze terug naar één kolom met het
   beeld bovenaan. */

.punten__raster { display: grid; gap: 28px; }
.punten__kolom { display: grid; gap: 22px; align-content: center; }
.punten__beeld { margin: 0; order: -1; }
.punten__beeld img { display: block; width: 100%; height: auto; margin-inline: auto; max-width: 340px; }

@media (min-width: 900px) {
  .punten__raster {
    grid-template-columns: 1fr clamp(280px, 32vw, 420px) 1fr;
    gap: 40px;
    align-items: center;
  }
  .punten__beeld { order: 0; }
  .punten__beeld img { max-width: none; }
  /* Rechterkolom spiegelen, zodat icoon en tekst naar het portret toe wijzen. */
  .punten__kolom--rechts .punt { flex-direction: row-reverse; text-align: right; }
}

.punt { display: flex; gap: 14px; align-items: flex-start; }
.punt__icoon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--brass-line);
  color: var(--brass);
  background: var(--off);
}
.punt__tekst { display: block; min-width: 0; }
.punt__kop {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.punt__uitleg {
  display: block;
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Zonder portret: twee kolommen, en niets spiegelen. */
@media (min-width: 900px) {
  .punten__raster--zonder-beeld { grid-template-columns: 1fr 1fr; gap: 32px 56px; }
  .punten__raster--zonder-beeld .punten__kolom--rechts .punt {
    flex-direction: row;
    text-align: left;
  }
}

/* Het portret is onderaan recht afgesneden omdat het shirt tot de rand van
   de bronfoto liep. Een zachte uitloop maakt daar een bewuste keuze van in
   plaats van een zichtbare knip. */
.punten__beeld img {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

/* ------------------------------------------- Klachtenportaal Zorg -- */

/* Het beeldmerk op de klachtenregelingpagina. Niet meeschalen met de
   tekstbreedte: een logo van 60 pixels is genoeg en groter oogt als een
   advertentie. */
.kpz-merk { margin-top: 32px; }
.kpz-merk img { width: 72px; height: auto; display: block; }

/* In de voettekst staat hij naast de regel, op de donkere achtergrond.
   Het logo is groen op transparant en blijft daar goed leesbaar. */
.site-footer__kpz a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.site-footer__kpz img { width: 34px; height: auto; flex: none; }
.site-footer__kpz a:hover span { text-decoration: underline; }

/* --------------------------------------------------------- naaldcursor -- */

/* De spuit als muisaanwijzer. De klasse wordt door site.js gezet en alleen
   op een apparaat met een echte muis en zonder prefers-reduced-motion, dus
   alles hieronder is per definitie optioneel. */

.heeft-naald,
.heeft-naald * { cursor: none; }

/* Eén uitzondering: waar je typt, hoort een tekstcursor. Zonder die I-balk
   zie je bij het afspraakformulier niet waar je bent, en dat weegt zwaarder
   dan een spuit. Daar verdwijnt de naald ook. */
.heeft-naald input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.heeft-naald textarea { cursor: text; }
.heeft-naald select { cursor: pointer; }

.naaldcursor {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.naaldcursor.is-aan { opacity: 1; }
.naaldcursor.is-tekst { opacity: 0; }

/* De gloed sleept na en zit gecentreerd op de punt. De verschuiving staat in
   margin en niet in transform, want die laatste wordt door JS gezet. */
.naaldcursor__gloed {
  position: absolute;
  top: 0; left: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(152, 106, 62, 0.28), rgba(152, 106, 62, 0) 70%);
  transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, background 0.3s ease;
  will-change: transform;
}
.naaldcursor.is-raak .naaldcursor__gloed {
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  background: radial-gradient(circle, rgba(152, 106, 62, 0.42), rgba(152, 106, 62, 0) 70%);
}

/* De punt van de naald ligt op (0,0) van de viewBox, dus de linkerbovenhoek
   van dit element valt precies op de muis. */
.naaldcursor__spuit {
  position: absolute;
  top: 0; left: 0;
  overflow: visible;
  will-change: transform;
  filter: drop-shadow(0 2px 3px rgba(58, 34, 26, 0.28));
}

/* Hover: de zuiger schuift naar de naald toe en de vloeistof krimpt mee. */
.naaldcursor__zuiger,
.naaldcursor__vocht {
  transform-box: fill-box;
  transition: transform 0.3s cubic-bezier(0.34, 0.01, 0.2, 1);
}
.naaldcursor__zuiger { transform-origin: center; }
.naaldcursor__vocht { transform-origin: left center; }

.naaldcursor.is-raak .naaldcursor__zuiger { transform: translateX(-9px); }
.naaldcursor.is-raak .naaldcursor__vocht { transform: scaleX(0.74); }

/* Klikken: een druppel laat los en valt weg. De groep staat 45 graden
   gedraaid, dus recht naar beneden op het scherm is hier (-7, 7). */
.naaldcursor__druppel {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
}
.naaldcursor.is-spuit .naaldcursor__druppel {
  animation: glam-druppel 0.5s ease-out forwards;
}
@keyframes glam-druppel {
  0%   { transform: translate(0, 0) scale(0.2);     opacity: 0; }
  30%  { transform: translate(0, 0) scale(1);       opacity: 0.95; }
  100% { transform: translate(-7px, 7px) scale(0.3); opacity: 0; }
}

/* Hover zet hem op scherp, klikken duwt hem helemaal door. */
.naaldcursor.is-spuit .naaldcursor__zuiger { transform: translateX(-15px); }
.naaldcursor.is-spuit .naaldcursor__vocht { transform: scaleX(0.56); }