/*
 * ============================================================
 * OSTEOPATHIE OVERGAAG - Gedeeld ontwerpsysteem
 * ============================================================
 *
 * GOOGLE FONTS - Kopieer deze link-tags naar elke HTML <head>:
 *
 * <link rel="preconnect" href="https://fonts.googleapis.com">
 * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 * <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600&display=swap" rel="stylesheet">
 *
 * Instrument Serif: warm, menselijk, ambachtelijk voor koppen.
 *   Vervangt Zilla Slab van de huidige site: zelfde serif-signatuur,
 *   hoger contrast, minder gedateerd.
 * Geist: strak en rustig voor body en labels. Vervangt Open Sans.
 *
 * ============================================================
 * PALET: RECHTSTREEKS GEMETEN OP osteopathie-overgaag.nl
 * ------------------------------------------------------------
 *   merkgroen        rgb(75,140,118)  #4B8C76
 *   merkterracotta   rgb(219,141,103) #DB8D67
 *   merkdonker       rgb(29,36,45)    #1D242D
 *   merkbodytekst    rgb(74,78,87)    #4A4E57
 *
 * Groen en terracotta zijn als PURE merkkleur te licht voor tekst
 * (3.95:1 en 2.62:1 op wit). Ze zijn daarom verdiept tot een
 * AA-conforme tekstvariant; de originele tinten blijven behouden als
 * decoratieve laag (--color-primary-mid, --color-accent-mid).
 * Elke tekstcombinatie hieronder haalt minimaal WCAG AA 4.5:1.
 * ============================================================
 */

/* ============================================================
   CUSTOM PROPERTIES
   ============================================================ */

:root {
  /* Kleuren */
  --color-bg:          #F8F6F1;
  --color-surface:     #FFFFFF;
  --color-border:      #E5DFD5;

  --color-ink:         #1D242D;   /* merkdonker, exact */
  --color-ink-soft:    #4A4E57;   /* merkbodytekst, exact */
  --color-ink-muted:   #6B7278;   /* 4.52:1 op --color-bg */

  --color-primary:      #2F6B58;  /* 5.78:1 op bg | 6.24:1 op wit */
  --color-primary-dark: #204B3D;
  --color-primary-mid:  #4B8C76;  /* merkgroen, exact - decoratief */
  --color-primary-light:#EAF2EE;
  --color-primary-tint: #F2F7F5;

  --color-accent:      #A9552E;   /* 4.83:1 op bg - tekstveilig terra */
  --color-accent-mid:  #DB8D67;   /* merkterracotta, exact - decoratief */
  --color-accent-light:#F9EEE5;

  /* Typografie */
  --font-heading: 'Instrument Serif', Georgia, serif;
  --font-body:    'Geist', system-ui, sans-serif;

  /* Schaalverdeling */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.375rem;
  --text-xl:    1.75rem;
  --text-2xl:   2.25rem;
  --text-3xl:   3rem;
  --text-4xl:   3.75rem;
  --text-5xl:   5rem;

  /* Regelafstand */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Letterafstand */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.12em;

  /* Ruimte */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Breedte */
  --max-width:        1200px;
  --max-width-narrow: 760px;
  --max-width-wide:   1400px;

  /* Afronding */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* Schaduw */
  --shadow-sm: 0 1px 3px rgba(29, 36, 45, 0.05);
  --shadow-md: 0 4px 16px rgba(29, 36, 45, 0.07);
  --shadow-lg: 0 12px 40px rgba(29, 36, 45, 0.10);

  /* Transitie */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  0.2s;
  --duration-base:  0.35s;
  --duration-slow:  0.6s;

  /* Header hoogte */
  --header-height: 72px;

  /* Signatuurelement: de halve boog die door de site terugkomt */
  --signature-radius: 60px 60px 0 0;
}

/* ============================================================
   RESET EN BASIS
   ============================================================ */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

svg {
  display: block;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   PROGRESSIVE ENHANCEMENT - REVEAL BASIS
   Verborgen staat ALLEEN wanneer html.anim aanwezig is,
   zodat de pagina altijd volledig zichtbaar is zonder JS.
   ============================================================ */

html.anim .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
}

html.anim .reveal.reveal-up {
  transform: translateY(32px);
}

html.anim .reveal.reveal-left {
  transform: translateX(-32px);
}

html.anim .reveal.reveal-right {
  transform: translateX(32px);
}

html.anim .reveal.reveal-scale {
  transform: scale(0.94);
}

html.anim .reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* Stagger-vertragingen voor kinderelementen */
html.anim .reveal-group > *:nth-child(1) { transition-delay: 0s; }
html.anim .reveal-group > *:nth-child(2) { transition-delay: 0.1s; }
html.anim .reveal-group > *:nth-child(3) { transition-delay: 0.2s; }
html.anim .reveal-group > *:nth-child(4) { transition-delay: 0.3s; }
html.anim .reveal-group > *:nth-child(5) { transition-delay: 0.4s; }
html.anim .reveal-group > *:nth-child(6) { transition-delay: 0.5s; }

/* Heading lijn-voor-lijn onthulling */
html.anim .reveal-line {
  display: block;
  overflow: hidden;
  /* Ruimte voor staartletters van de cursieve serif binnen de mask */
  padding-bottom: 0.09em;
  margin-bottom: -0.09em;
}

html.anim .reveal-line span {
  display: block;
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform 0.7s var(--ease-out-expo),
    opacity 0.7s var(--ease-out-expo);
}

html.anim .reveal-line.is-revealed span {
  transform: translateY(0);
  opacity: 1;
}

html.anim .reveal-line:nth-child(2) span { transition-delay: 0.1s; }
html.anim .reveal-line:nth-child(3) span { transition-delay: 0.2s; }

/* ============================================================
   REDUCED MOTION - alles direct zichtbaar
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html.anim .reveal,
  html.anim .reveal.reveal-up,
  html.anim .reveal.reveal-left,
  html.anim .reveal.reveal-right,
  html.anim .reveal.reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.anim .reveal-line span {
    transform: none;
    opacity: 1;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   LAYOUT HULPKLASSEN
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container--narrow {
  max-width: var(--max-width-narrow);
}

.container--wide {
  max-width: var(--max-width-wide);
}

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.flex {
  display: flex;
  gap: var(--space-4);
}

.flex--center {
  align-items: center;
  justify-content: center;
}

.flex--between {
  align-items: center;
  justify-content: space-between;
}

/* ============================================================
   TYPOGRAFIE
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

h1 { font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl)); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 600; }

.heading-italic {
  font-style: italic;
  color: var(--color-primary);
}

p {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--color-ink-soft);
}

p + p {
  margin-top: var(--space-4);
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

strong { font-weight: 600; }
em     { font-style: italic; }

/* ============================================================
   KNOPPEN
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.875rem 2rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  transition:
    background-color var(--duration-base) var(--ease-out-quart),
    color var(--duration-base) var(--ease-out-quart),
    transform var(--duration-fast) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
  position: relative;
  overflow: hidden;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-surface);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  box-shadow: 0 8px 24px rgba(47, 107, 88, 0.28);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

.btn--secondary:hover {
  background-color: var(--color-primary-light);
}

.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-surface);
}

.btn--accent:hover {
  background-color: #8F4522;
  box-shadow: 0 8px 24px rgba(169, 85, 46, 0.28);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-ink);
  padding-inline: 0;
}

.btn--ghost:hover {
  color: var(--color-primary);
  transform: none;
}

.btn--ghost:hover .btn-arrow {
  transform: translateX(4px);
}

.btn-arrow {
  transition: transform var(--duration-base) var(--ease-out-quart);
}

.btn--sm {
  padding: 0.6rem 1.25rem;
  font-size: var(--text-xs);
}

/* Magnetische knop wrapper */
.btn-magnetic {
  display: inline-block;
}

/* ============================================================
   HEADER EN NAVIGATIE
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  background-color: rgba(248, 246, 241, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
}

.site-header.is-scrolled {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-8);
}

/* Logo in header */
.header-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header-logo img {
  height: 44px;
  width: auto;
}

.header-logo .wordmark {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-primary);
  letter-spacing: var(--tracking-tight);
}

/* Primaire navigatie */
.nav-primary {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-primary a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-ink-soft);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  position: relative;
  transition: color var(--duration-fast) var(--ease-out-quart);
}

.nav-primary a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: var(--space-3);
  right: var(--space-3);
  height: 1.5px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.nav-primary a:hover {
  color: var(--color-ink);
}

.nav-primary a:hover::after,
.nav-primary a.is-active::after {
  transform: scaleX(1);
}

.nav-primary a.is-active {
  color: var(--color-primary);
  font-weight: 500;
}

.nav-cta {
  flex-shrink: 0;
}

/* Hamburger menu */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  gap: 6px;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast);
}

.nav-toggle:hover {
  background-color: var(--color-primary-light);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--color-ink);
  border-radius: 2px;
  transition:
    transform var(--duration-base) var(--ease-out-quart),
    opacity var(--duration-fast);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Mobiel menu overlay */
.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--header-height);
  background-color: var(--color-surface);
  z-index: 99;
  padding: var(--space-8) var(--space-6);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.nav-mobile.is-open {
  transform: translateX(0);
}

.nav-mobile-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nav-mobile-list a {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-ink);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--duration-fast);
}

.nav-mobile-list a:hover {
  color: var(--color-primary);
}

.nav-mobile-footer {
  margin-top: var(--space-8);
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: calc(100svh - var(--header-height));
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-bg);
}

.hero__content {
  padding: var(--space-24) var(--space-6) var(--space-24) max(var(--space-6), calc((100vw - var(--max-width)) / 2 + var(--space-6)));
  position: relative;
  z-index: 2;
}

.hero__eyebrow {
  margin-bottom: var(--space-6);
}

.hero__title {
  font-size: clamp(2.75rem, 5.5vw, 5.5rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-8);
  color: var(--color-ink);
}

.hero__title em {
  font-style: italic;
  color: var(--color-primary);
}

.hero__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
  max-width: 480px;
  margin-bottom: var(--space-10);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.hero__image {
  position: relative;
  height: 100%;
  min-height: 560px;
  overflow: hidden;
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.8s var(--ease-out-quart);
}

.hero__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color-bg) 0%, transparent 20%);
  z-index: 1;
}

/* Signatuurdetail op hero: kleine boog rechtsonder */
.hero__badge {
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-8);
  z-index: 3;
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-6);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hero__badge-icon {
  width: 40px;
  height: 40px;
  background-color: var(--color-primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero__badge-text {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-ink-soft);
  line-height: 1.4;
}

.hero__badge-text strong {
  display: block;
  color: var(--color-ink);
  font-size: var(--text-sm);
}

/* ============================================================
   SECTIES ALGEMEEN
   ============================================================ */

.section {
  padding-block: var(--space-24);
}

.section--sm {
  padding-block: var(--space-16);
}

.section--lg {
  padding-block: var(--space-32);
}

.section--dark {
  background-color: var(--color-primary);
  color: var(--color-surface);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-surface);
}

.section--dark p {
  color: rgba(255, 255, 255, 0.78);
}

.section--dark .eyebrow {
  color: rgba(255, 255, 255, 0.55);
}

.section--tint {
  background-color: var(--color-primary-light);
}

.section--accent-tint {
  background-color: var(--color-accent-light);
}

.section--surface {
  background-color: var(--color-surface);
}

.section__header {
  margin-bottom: var(--space-16);
}

.section__header--center {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-16);
}

/* Signatuur: de boogvorm waarmee secties wisselen */
.section--arch-top {
  border-radius: var(--signature-radius);
  margin-top: calc(-1 * var(--space-12));
  padding-top: calc(var(--space-24) + var(--space-12));
  position: relative;
  z-index: 2;
}

/* ============================================================
   DIENSTENKAARTEN
   ============================================================ */

.card-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card:hover::before {
  transform: scaleX(1);
}

.card__icon {
  width: 48px;
  height: 48px;
  background-color: var(--color-primary-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
  color: var(--color-primary);
}

.card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.card__body {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-ink-soft);
}

.card--accent {
  background-color: var(--color-primary);
  border-color: transparent;
}

.card--accent .card__icon {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-surface);
}

.card--accent .card__title {
  color: var(--color-surface);
}

.card--accent .card__body {
  color: rgba(255, 255, 255, 0.78);
}

.card--accent::before {
  background: rgba(255, 255, 255, 0.3);
}

/* Horizontale kaart */
.card--horizontal {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}

.card--horizontal .card__icon {
  flex-shrink: 0;
  margin-bottom: 0;
}

/* ============================================================
   AFBEELDINGEN IN CONTENT
   ============================================================ */

.img-block {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.img-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out-quart);
}

.img-block:hover img {
  transform: scale(1.03);
}

.img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 260px 260px;
  gap: var(--space-4);
}

.img-grid .img-block:first-child {
  grid-row: 1 / 3;
}

/* Foto-tekst split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.split--reverse {
  direction: rtl;
}

.split--reverse > * {
  direction: ltr;
}

.split__media {
  position: relative;
}

.split__content {
  padding-block: var(--space-8);
}

.split__content h2 {
  margin-bottom: var(--space-6);
}

.split__content p + .btn {
  margin-top: var(--space-8);
}

/* ============================================================
   THERAPEUT KAART
   ============================================================ */

.therapist-card {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--space-16);
  align-items: start;
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.therapist-card__photo {
  height: 480px;
  overflow: hidden;
}

.therapist-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.8s var(--ease-out-quart);
}

.therapist-card:hover .therapist-card__photo img {
  transform: scale(1.03);
}

.therapist-card__content {
  padding: var(--space-12) var(--space-12) var(--space-12) 0;
}

.therapist-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 400;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.therapist-card__role {
  font-size: var(--text-sm);
  color: var(--color-accent);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-8);
}

.therapist-card__bio {
  color: var(--color-ink-soft);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-8);
}

.therapist-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ============================================================
   TAGS EN BADGES
   ============================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.tag--accent {
  background-color: var(--color-accent-light);
  color: var(--color-accent);
}

.tag--dark {
  background-color: var(--color-primary);
  color: var(--color-surface);
}

.tag--outline {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-ink-soft);
}

/* ============================================================
   STATISTIEKEN EN CIJFERS
   ============================================================ */

.stats-row {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat__number {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.03em;
}

.stat__label {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* ============================================================
   TARIEVEN EN VERGOEDINGEN TABEL
   ============================================================ */

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}

.pricing-table th {
  text-align: left;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  border-bottom: 2px solid var(--color-border);
}

.pricing-table td {
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.pricing-table td:first-child {
  color: var(--color-ink);
  font-weight: 500;
}

.pricing-table td:last-child {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-primary);
  text-align: right;
  white-space: nowrap;
}

.pricing-table tr:last-child td {
  border-bottom: none;
}

.pricing-table tr:hover td {
  background-color: var(--color-primary-light);
}

.pricing-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

/* ============================================================
   ACCORDEON (voor veelgestelde vragen / klachten)
   ============================================================ */

.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.accordion-item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-out-quart);
}

.accordion-item.is-open {
  box-shadow: var(--shadow-md);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-8);
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink);
  gap: var(--space-4);
  transition: color var(--duration-fast);
}

.accordion-trigger:hover {
  color: var(--color-primary);
}

.accordion-trigger[aria-expanded="true"] {
  color: var(--color-primary);
}

.accordion-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: transform var(--duration-base) var(--ease-out-quart);
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: rotate(45deg);
  background-color: var(--color-primary);
  color: var(--color-surface);
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-out-quart);
}

.accordion-panel.is-open {
  grid-template-rows: 1fr;
}

.accordion-panel-inner {
  overflow: hidden;
}

.accordion-panel-content {
  padding: 0 var(--space-8) var(--space-6) var(--space-8);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-ink-soft);
}

/* ============================================================
   CONTACTFORMULIER
   ============================================================ */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
}

.form-label sup {
  color: var(--color-accent);
  font-size: var(--text-xs);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  transition:
    border-color var(--duration-fast) var(--ease-out-quart),
    box-shadow var(--duration-fast) var(--ease-out-quart);
  appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-ink-muted);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(47, 107, 88, 0.14);
}

.form-input.is-error,
.form-textarea.is-error {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

.form-textarea {
  min-height: 160px;
  resize: vertical;
}

/* Honeypot - verborgen voor echte gebruikers */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form-status {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  display: none;
}

.form-status.is-visible {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.form-status--success {
  background-color: #EBF5F0;
  color: #1A6B45;
  border: 1px solid #A8D8C0;
}

.form-status--error {
  background-color: #FDF0EE;
  color: #C0392B;
  border: 1px solid #F0B8B0;
}

/* ============================================================
   LOCATIES / CONTACT INFO
   ============================================================ */

.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.location-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.location-card__city {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.location-card__address {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-6);
}

.location-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.location-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.location-detail svg {
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: 2px;
}

/* ============================================================
   KWALITEITSWAARBORGEN / CERTIFICERINGEN
   ============================================================ */

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.trust-badge__icon {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.trust-badge__text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
}

/* ============================================================
   INTRODUCTIE TEKSTBLOK MET ACCENT
   ============================================================ */

.intro-block {
  position: relative;
  padding-left: var(--space-8);
}

.intro-block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-primary), var(--color-accent));
  border-radius: 2px;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.breadcrumb__item {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.breadcrumb__item a {
  color: var(--color-ink-muted);
  transition: color var(--duration-fast);
}

.breadcrumb__item a:hover {
  color: var(--color-primary);
}

.breadcrumb__separator {
  color: var(--color-border);
}

/* ============================================================
   PAGINA-HEADER (voor subpagina's)
   ============================================================ */

.page-header {
  background-color: var(--color-primary-light);
  padding: var(--space-20) 0 var(--space-16);
  position: relative;
  overflow: hidden;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: var(--space-12);
  background-color: var(--color-bg);
  border-radius: var(--signature-radius);
}

.page-header__eyebrow {
  margin-bottom: var(--space-4);
}

.page-header__title {
  max-width: 680px;
  margin-bottom: var(--space-6);
}

.page-header__lead {
  max-width: 560px;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background-color: var(--color-ink);
  color: rgba(255, 255, 255, 0.7);
  padding-top: var(--space-20);
  padding-bottom: var(--space-10);
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: var(--space-12);
  background-color: var(--color-bg);
  border-radius: 0 0 60px 60px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  padding-top: var(--space-12);
  margin-bottom: var(--space-16);
}

.footer-brand__wordmark {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-surface);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
  display: block;
}

.footer-brand__tagline {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: rgba(255, 255, 255, 0.55);
  max-width: 280px;
  margin-bottom: var(--space-6);
}

.footer-col__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: var(--space-5);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-nav a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--duration-fast);
}

.footer-nav a:hover {
  color: var(--color-surface);
}

.footer-address {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  font-style: normal;
  line-height: var(--leading-loose);
}

.footer-address strong {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-1);
}

.footer-address + .footer-address {
  margin-top: var(--space-5);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-bottom__copy {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
}

.footer-bottom__credit {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
}

.footer-bottom__credit a {
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--duration-fast);
}

.footer-bottom__credit a:hover {
  color: var(--color-surface);
}

/* ============================================================
   DIVIDER
   ============================================================ */

.divider {
  height: 1px;
  background-color: var(--color-border);
  border: none;
  margin-block: var(--space-12);
}

/* ============================================================
   RICH TEXT (voor inhoudspagina's)
   ============================================================ */

.rich-text h2 { margin-bottom: var(--space-6); margin-top: var(--space-12); }
.rich-text h3 { margin-bottom: var(--space-4); margin-top: var(--space-10); }
.rich-text h4 { margin-bottom: var(--space-3); margin-top: var(--space-8); }

.rich-text h2:first-child,
.rich-text h3:first-child,
.rich-text h4:first-child {
  margin-top: 0;
}

.rich-text p { margin-bottom: var(--space-5); }
.rich-text p:last-child { margin-bottom: 0; }

.rich-text ul,
.rich-text ol {
  list-style: none;
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rich-text ul li,
.rich-text ol li {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--color-ink-soft);
  padding-left: var(--space-6);
  position: relative;
}

.rich-text ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  background-color: var(--color-accent);
  border-radius: 50%;
}

.rich-text ol {
  counter-reset: list-counter;
}

.rich-text ol li {
  counter-increment: list-counter;
}

.rich-text ol li::before {
  content: counter(list-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

/* ============================================================
   NOTIFICATIE / CALLOUT BLOK
   ============================================================ */

.callout {
  background-color: var(--color-primary-light);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-5) var(--space-6);
}

.callout p {
  font-size: var(--text-sm);
  color: var(--color-primary-dark);
  margin: 0;
}

.callout--accent {
  background-color: var(--color-accent-light);
  border-left-color: var(--color-accent);
}

.callout--accent p {
  color: #7A4E2A;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

  .therapist-card {
    grid-template-columns: 320px 1fr;
  }
}

@media (max-width: 900px) {
  :root {
    --header-height: 64px;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero__content {
    padding: var(--space-16) var(--space-6);
    order: 2;
  }

  .hero__image {
    order: 1;
    min-height: 400px;
    height: 50svh;
  }

  .hero__image-overlay {
    background: linear-gradient(to bottom, transparent 50%, var(--color-bg) 100%);
  }

  .hero__badge {
    bottom: var(--space-5);
    right: var(--space-5);
  }

  .split {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .split--reverse {
    direction: ltr;
  }

  .grid--3 {
    grid-template-columns: 1fr 1fr;
  }

  .grid--4 {
    grid-template-columns: 1fr 1fr;
  }

  .therapist-card {
    grid-template-columns: 1fr;
  }

  .therapist-card__photo {
    height: 360px;
  }

  .therapist-card__content {
    padding: var(--space-8);
  }

  .location-grid {
    grid-template-columns: 1fr;
  }

  .img-grid {
    grid-template-rows: 220px 220px;
  }

  .nav-primary,
  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-mobile {
    display: block;
  }
}

@media (max-width: 640px) {
  :root {
    --space-24: 4rem;
    --space-20: 3.5rem;
    --space-16: 3rem;
    --space-12: 2.5rem;
  }

  .section {
    padding-block: var(--space-16);
  }

  .section--lg {
    padding-block: var(--space-20);
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-field--full {
    grid-column: 1;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .stats-row {
    gap: var(--space-8);
  }

  .hero__badge {
    display: none;
  }

  .img-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .img-grid .img-block:first-child {
    grid-row: auto;
  }

  .trust-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .pricing-table {
    display: block;
    overflow-x: auto;
  }

  .section--arch-top {
    border-radius: 40px 40px 0 0;
    margin-top: calc(-1 * var(--space-8));
    padding-top: calc(var(--space-16) + var(--space-8));
  }
}

@media (max-width: 400px) {
  .container {
    padding-inline: var(--space-5);
  }

  .card {
    padding: var(--space-6);
  }
}

/* ============================================================
   ============================================================
   V2 LAAG - CONVERSIE, TOEGANKELIJKHEID EN PERFORMANCE
   ------------------------------------------------------------
   Deze laag staat bewust onderaan zodat hij de basis hierboven
   overschrijft zonder dat bestaande pagina's breken.
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   1. FOCUS, SKIP LINK EN TAPDOELEN
   ------------------------------------------------------------ */

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Op donkere vlakken moet de focusring juist licht zijn */
.section--dark :focus-visible,
.band :focus-visible,
.site-footer :focus-visible,
.card--accent:focus-visible,
.locations-banner :focus-visible {
  outline-color: #FFFFFF;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: 200;
  transform: translateY(-200%);
  background-color: var(--color-primary);
  color: var(--color-surface);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ------------------------------------------------------------
   2. KNOPPEN: strakker, met echte micro-interactie zonder JS
   ------------------------------------------------------------ */

.btn {
  padding: 0.9rem 1.75rem;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  min-height: 48px;              /* tapdoel */
  justify-content: center;
  will-change: transform;
  transition:
    background-color var(--duration-base) var(--ease-out-quart),
    border-color var(--duration-base) var(--ease-out-quart),
    color var(--duration-base) var(--ease-out-quart),
    transform var(--duration-fast) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
}

.btn .btn-arrow {
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  box-shadow: 0 10px 26px -8px rgba(47, 107, 88, 0.55);
}

.btn--secondary {
  border-width: 1.5px;
  background-color: var(--color-surface);
}

.btn--secondary:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-dark);
  box-shadow: 0 8px 20px -10px rgba(47, 107, 88, 0.4);
}

.btn--accent:hover {
  box-shadow: 0 10px 26px -8px rgba(169, 85, 46, 0.5);
}

/* Witte knop voor gebruik op foto's en donkere vlakken */
.btn--on-dark {
  background-color: var(--color-surface);
  color: var(--color-primary-dark);
}

.btn--on-dark:hover {
  background-color: var(--color-primary-light);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.45);
}

.btn--outline-light {
  background-color: transparent;
  color: var(--color-surface);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}

.btn--outline-light:hover {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: var(--color-surface);
}

.btn--ghost {
  min-height: 48px;
  padding-inline: var(--space-2);
}

/* Telefoonknop: het snelste conversiepad op mobiel */
.btn--tel {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------
   3. HEADER: minder ruis, telefoonnummer altijd zichtbaar
   ------------------------------------------------------------ */

.site-header {
  background-color: rgba(248, 246, 241, 0.86);
}

.header-inner {
  gap: var(--space-6);
}

.header-logo img {
  height: 40px;
  width: auto;
}

.nav-primary {
  gap: 0;
  margin-inline: auto;
}

.nav-primary a {
  padding: var(--space-3) var(--space-4);
  font-size: 0.9375rem;
}

.nav-primary a::after {
  left: var(--space-4);
  right: var(--space-4);
  height: 2px;
  background-color: var(--color-accent-mid);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-ink);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition:
    color var(--duration-fast) var(--ease-out-quart),
    background-color var(--duration-fast) var(--ease-out-quart);
}

.header-phone svg {
  color: var(--color-primary);
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.header-phone:hover {
  color: var(--color-primary-dark);
  background-color: var(--color-primary-light);
}

.header-phone:hover svg {
  transform: rotate(-12deg) scale(1.08);
}

@media (max-width: 1180px) {
  .header-phone span { display: none; }
  .header-phone { padding: var(--space-3); }
}

@media (max-width: 900px) {
  .header-actions { display: none; }
}

/* Mobiel menu: leesbaarder en met contactblok onderin */
.nav-mobile {
  background-color: var(--color-bg);
  padding-bottom: calc(var(--space-24) + env(safe-area-inset-bottom));
  /* Gesloten menu mag geen tabstops opleveren en geen horizontale
     overflow veroorzaken. */
  visibility: hidden;
  transition:
    transform var(--duration-slow) var(--ease-out-expo),
    visibility 0s linear var(--duration-slow);
}

.nav-mobile.is-open {
  visibility: visible;
  transition:
    transform var(--duration-slow) var(--ease-out-expo),
    visibility 0s;
}

.nav-mobile-list a {
  font-size: var(--text-lg);
  padding: var(--space-4) 0;
  min-height: 48px;
}

.nav-mobile-contact {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-3);
}

.nav-mobile-contact a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  min-height: 48px;
}

.nav-mobile-contact svg { color: var(--color-primary); flex-shrink: 0; }

/* ------------------------------------------------------------
   4. VASTE MOBIELE ACTIEBALK
   Het belangrijkste conversie-element op mobiel: bellen of boeken
   is altijd binnen duimbereik, zonder terug te scrollen.
   ------------------------------------------------------------ */

.mobile-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: var(--space-3) var(--space-4)
           calc(var(--space-3) + env(safe-area-inset-bottom));
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-border);
  gap: var(--space-3);
  box-shadow: 0 -6px 24px rgba(29, 36, 45, 0.08);
}

.mobile-cta .btn {
  flex: 1;
  padding-inline: var(--space-4);
}

@media (max-width: 900px) {
  .mobile-cta { display: flex; }

  body { padding-bottom: 84px; }

  /* De actiebalk mag het mobiele menu niet overlappen */
  .nav-mobile.is-open ~ .mobile-cta { display: none; }
}

/* ------------------------------------------------------------
   5. HERO: portret in de ronde uitsnede die de praktijk al heeft
   De bronfoto is een cirkel op een grijs vierkant. Hij wordt hier
   geschaald zodat exact de cirkel het kader vult en het grijze
   vierkant volledig buiten beeld valt.
   ------------------------------------------------------------ */

.hero {
  min-height: 0;
  align-items: center;
  gap: var(--space-16);
  padding-block: var(--space-24);
  grid-template-columns: 1.05fr 0.95fr;
  background:
    radial-gradient(120% 90% at 88% 18%, var(--color-primary-tint) 0%, transparent 62%),
    var(--color-bg);
}

.hero__content {
  padding: 0 var(--space-6) 0
           max(var(--space-6), calc((100vw - var(--max-width)) / 2 + var(--space-6)));
}

.hero__title {
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin-bottom: var(--space-6);
  text-wrap: balance;
}

.hero__lead {
  max-width: 34em;
  margin-bottom: var(--space-8);
  text-wrap: pretty;
}

.hero__actions {
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.hero__media {
  position: relative;
  padding-right: max(var(--space-6), calc((100vw - var(--max-width)) / 2 + var(--space-6)));
  display: flex;
  justify-content: center;
}

.portrait-round,
.hero__portrait {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-primary-light);
  box-shadow:
    0 0 0 1px rgba(75, 140, 118, 0.22),
    0 0 0 14px rgba(75, 140, 118, 0.07),
    0 30px 70px -30px rgba(29, 36, 45, 0.4);
}

.portrait-round img,
.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cirkel in de bron = 81% van de breedte, midden op 46% hoogte */
  transform: scale(1.16) translateY(3.4%);
  transition: transform 0.9s var(--ease-out-quart);
}

.portrait-round:hover img,
.hero__portrait:hover img {
  transform: scale(1.2) translateY(3.4%);
}

.portrait-round {
  width: min(100%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-primary-light);
  margin-inline: auto;
  box-shadow:
    0 0 0 1px rgba(75, 140, 118, 0.22),
    0 0 0 14px rgba(75, 140, 118, 0.07),
    0 30px 70px -30px rgba(29, 36, 45, 0.4);
}

.hero__stamp {
  position: absolute;
  left: 0;
  bottom: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  box-shadow: var(--shadow-lg);
  max-width: 260px;
}

.hero__stamp-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__stamp-text {
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--color-ink-muted);
}

.hero__stamp-text strong {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink);
}

/* Bewijsregel direct onder de knoppen: neemt de drie grootste
   drempels weg voordat de bezoeker erom hoeft te vragen. */
.proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.proof-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-soft);
}

.proof-item svg {
  color: var(--color-primary-mid);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--space-12);
    padding-block: var(--space-12) var(--space-16);
  }

  .hero__content { order: 1; padding: 0 var(--space-6); }
  .hero__media   { order: 0; padding: 0 var(--space-6); }

  .hero__portrait { width: min(72vw, 320px); }
  .hero__stamp { left: 50%; transform: translateX(-50%); bottom: -18px; }
}

@media (max-width: 520px) {
  .hero__stamp { position: static; transform: none; margin: var(--space-6) auto 0; }
  .hero__media { flex-direction: column; align-items: center; }
}

/* ------------------------------------------------------------
   6. VERTROUWENSBALK
   ------------------------------------------------------------ */

.trustbar {
  background-color: var(--color-surface);
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-6);
}

.trustbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
}

.trustbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.trustbar__item strong {
  color: var(--color-ink);
  font-weight: 600;
}

.trustbar__item svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .trustbar__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
}

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

/* ------------------------------------------------------------
   7. HERKENNINGSKAARTEN ("Herkent u dit?")
   ------------------------------------------------------------ */

.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.pain-card {
  position: relative;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition:
    transform var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart),
    border-color var(--duration-base) var(--ease-out-quart);
}

.pain-card:hover {
  transform: translateY(-4px);
  border-color: rgba(219, 141, 103, 0.5);
  box-shadow: var(--shadow-lg);
}

.pain-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-light);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.pain-card:hover .pain-card__icon {
  transform: scale(1.06) rotate(-4deg);
}

.pain-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.pain-card__body {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-ink-soft);
}

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

/* ------------------------------------------------------------
   8. FOTOBANDEN
   De praktijkfoto's zijn 1920x600. Ze worden hier in hun eigen
   verhouding getoond in plaats van in een hoge kolom, zodat er
   geen extreme uitsnede meer ontstaat.
   ------------------------------------------------------------ */

.band {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
  /* Geen harde aspect-ratio: de foto is 1920x600, maar de tekst moet
     kunnen groeien zonder afgekapt te worden. */
  min-height: clamp(420px, 34vw, 560px);
  background-color: var(--color-ink);
}

.band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transform: scale(1.02);
  transition: transform 1s var(--ease-out-quart);
}

.band:hover .band__img {
  transform: scale(1.06);
}

.band__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(29, 36, 45, 0.9) 0%,
    rgba(29, 36, 45, 0.72) 42%,
    rgba(29, 36, 45, 0.12) 78%
  );
}

.band--reverse { justify-content: flex-end; }

.band--reverse .band__overlay {
  background: linear-gradient(
    260deg,
    rgba(29, 36, 45, 0.9) 0%,
    rgba(29, 36, 45, 0.72) 42%,
    rgba(29, 36, 45, 0.12) 78%
  );
}

.band__content {
  padding: var(--space-12);
  max-width: 620px;
}

.band__content .eyebrow { color: var(--color-accent-mid); }
.band__content h2 { color: var(--color-surface); margin-bottom: var(--space-4); }
.band__content p  { color: rgba(255, 255, 255, 0.82); margin-bottom: var(--space-8); }

.band__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.band__list span {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 500;
}

@media (max-width: 900px) {
  /* Een 1920x600 band in een smalle kolom zou 50 procent van de foto
     wegsnijden. Daarom staat de foto op mobiel bovenaan in een eigen
     strook en zakt de tekst eronder. */
  .band,
  .band--reverse {
    display: block;
    min-height: 0;
    justify-content: flex-start;
  }

  .band__img {
    bottom: auto;
    height: 220px;
    object-position: 35% center;
  }

  .band__overlay,
  .band--reverse .band__overlay {
    bottom: auto;
    height: 260px;
    background: linear-gradient(
      180deg,
      rgba(29, 36, 45, 0.25) 0%,
      rgba(29, 36, 45, 0.75) 55%,
      var(--color-ink) 100%
    );
  }

  .band__content {
    padding: 188px var(--space-6) var(--space-10);
    max-width: none;
  }
}

/* ------------------------------------------------------------
   9. STAPPEN
   ------------------------------------------------------------ */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
}

.step {
  position: relative;
  padding-top: var(--space-6);
  border-top: 2px solid var(--color-border);
  transition: border-color var(--duration-slow) var(--ease-out-quart);
}

.step:hover { border-top-color: var(--color-accent-mid); }

.step__number {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-5);
  user-select: none;
}

.step__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.step__body {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-ink-soft);
}

@media (max-width: 900px) {
  .steps-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ------------------------------------------------------------
   10. KLACHTENKAARTEN
   ------------------------------------------------------------ */

.card {
  display: flex;
  flex-direction: column;
}

.card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card__icon {
  transition:
    transform var(--duration-base) var(--ease-out-expo),
    background-color var(--duration-base) var(--ease-out-quart);
}

.card:hover .card__icon,
.card:focus-visible .card__icon {
  transform: scale(1.06) rotate(-4deg);
}

.card__meta {
  margin-top: auto;
  padding-top: var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
}

.card__meta svg { transition: transform var(--duration-base) var(--ease-out-expo); }
.card:hover .card__meta svg,
.card:focus-visible .card__meta svg { transform: translateX(4px); }

.card--accent .card__meta { color: var(--color-surface); }

/* ------------------------------------------------------------
   11. TARIEVEN OP DE HOMEPAGE
   ------------------------------------------------------------ */

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.price-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition:
    transform var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.price-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
}

.price-card__amount {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-primary);
  letter-spacing: -0.02em;
}

.price-card__meta {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.price-notes {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.price-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-ink-soft);
}

.price-note svg {
  color: var(--color-primary-mid);
  flex-shrink: 0;
  margin-top: 5px;
}

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

/* ------------------------------------------------------------
   12. VEELGESTELDE VRAGEN - native details, nul JavaScript
   ------------------------------------------------------------ */

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    box-shadow var(--duration-base) var(--ease-out-quart),
    border-color var(--duration-base) var(--ease-out-quart);
}

.faq-item[open] {
  border-color: rgba(75, 140, 118, 0.45);
  box-shadow: var(--shadow-md);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  min-height: 56px;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink);
  transition: color var(--duration-fast) var(--ease-out-quart);
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-primary); }
.faq-item[open] summary { color: var(--color-primary); }

.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--color-primary-light);
  background-image: linear-gradient(var(--color-primary), var(--color-primary)),
                    linear-gradient(var(--color-primary), var(--color-primary));
  background-size: 11px 1.5px, 1.5px 11px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition:
    transform var(--duration-base) var(--ease-out-quart),
    background-color var(--duration-base) var(--ease-out-quart);
}

.faq-item[open] summary::after {
  transform: rotate(135deg);
}

.faq-item__body {
  padding: 0 var(--space-6) var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-ink-soft);
}

.faq-item__body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-item__body {
    animation: faq-in var(--duration-base) var(--ease-out-quart);
  }
}

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   13. LOCATIEKAARTEN MET DIRECTE ACTIES
   ------------------------------------------------------------ */

.loc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.loc-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  transition:
    transform var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
}

.loc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.loc-card__city {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.loc-card__address {
  font-style: normal;
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-6);
}

.loc-card__actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.link-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  transition:
    background-color var(--duration-fast) var(--ease-out-quart),
    border-color var(--duration-fast) var(--ease-out-quart),
    transform var(--duration-fast) var(--ease-out-quart);
}

.link-action:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-mid);
  transform: translateY(-2px);
}

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

/* ------------------------------------------------------------
   14. SLOT-CTA
   ------------------------------------------------------------ */

.final-cta {
  background-color: var(--color-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-16) var(--space-12);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 50% 0%, rgba(75, 140, 118, 0.55) 0%, transparent 65%);
  pointer-events: none;
}

.final-cta > * { position: relative; }

.final-cta h2 { color: var(--color-surface); margin-bottom: var(--space-4); }

.final-cta p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.final-cta .eyebrow { color: var(--color-accent-mid); }

.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

@media (max-width: 640px) {
  .final-cta { padding: var(--space-12) var(--space-6); }
  .final-cta__actions .btn { width: 100%; }
}

/* ------------------------------------------------------------
   15. CITAAT
   ------------------------------------------------------------ */

.pull-quote {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-primary);
  max-width: 22ch;
  text-wrap: balance;
}

.pull-quote--wide { max-width: 30ch; }

.quote-attrib {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* ------------------------------------------------------------
   16. TYPOGRAFISCHE FINETUNING
   ------------------------------------------------------------ */

h1, h2, h3 { text-wrap: balance; }
p, li      { text-wrap: pretty; }

.section__header h2 { max-width: 18ch; }
.section__header--center h2 { max-width: none; margin-inline: auto; }
.section__header p { max-width: 58ch; margin-top: var(--space-5); }
.section__header--center p { margin-inline: auto; }

.section__header { margin-bottom: var(--space-12); }

.eyebrow { margin-bottom: var(--space-3); }

/* ------------------------------------------------------------
   17. HULPKLASSEN
   ------------------------------------------------------------ */

.u-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.u-mt-6  { margin-top: var(--space-6); }
.u-mt-8  { margin-top: var(--space-8); }
.u-mt-10 { margin-top: var(--space-10); }

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Rendering pas berekenen wanneer een sectie in de buurt komt.
   Scheelt merkbaar in de eerste paint bij een lange homepage. */
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

/* ------------------------------------------------------------
   18. SCROLL-GESTUURDE PARALLAX ZONDER JAVASCRIPT
   Vervangt de GSAP ScrollTrigger-opzet volledig. Browsers zonder
   ondersteuning tonen simpelweg een statische foto.
   ------------------------------------------------------------ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
    .band__img {
      animation: band-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes band-drift {
  from { transform: scale(1.14) translateY(-3.5%); }
  to   { transform: scale(1.14) translateY(3.5%); }
}

/* ------------------------------------------------------------
   19. AFDRUKKEN
   ------------------------------------------------------------ */

@media print {
  .site-header,
  .nav-mobile,
  .mobile-cta,
  .band__img,
  .skip-link { display: none !important; }

  html.anim .reveal,
  html.anim .reveal-line span { opacity: 1 !important; transform: none !important; }

  body { background: #fff; color: #000; padding-bottom: 0; }
}

/* ------------------------------------------------------------
   20. FOOTER: contrast en tapdoelen op orde
   De oude waarden (0.35 en 0.4 wit op #1D242D) haalden 3.17:1 en
   3.71:1 en zakten daarmee door WCAG AA. Hieronder is alles
   minimaal 4.5:1 en zijn de linkjes minstens 24 px hoog
   (WCAG 2.5.8 Target Size).
   ------------------------------------------------------------ */

.footer-col__heading { color: rgba(255, 255, 255, 0.6); }   /* 6.49:1 */
.footer-brand__tagline { color: rgba(255, 255, 255, 0.6); }
.footer-nav a,
.footer-address { color: rgba(255, 255, 255, 0.72); }        /* 8.76:1 */
.footer-bottom__copy,
.footer-bottom__credit { color: rgba(255, 255, 255, 0.55); } /* 5.67:1 */
.footer-bottom__credit a { color: rgba(255, 255, 255, 0.8); }

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  width: fit-content;
  border-radius: var(--radius-sm);
  text-underline-offset: 4px;
}

.footer-nav a:hover {
  color: var(--color-surface);
  text-decoration: underline;
}

.footer-nav { gap: var(--space-1); }

.footer-bottom__credit a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Inline tekstlinks in antwoorden krijgen een duidelijk tapgebied */
.faq-item__body a {
  display: inline-block;
  padding-block: 2px;
}

/* ------------------------------------------------------------
   21. BAND-PILLEN: leesbaar ongeacht de foto eronder
   ------------------------------------------------------------ */

.band__list span {
  background-color: rgba(29, 36, 45, 0.55);
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ------------------------------------------------------------
   22. .btn-magnetic NEUTRALISEREN
   Deze class zette display terug naar inline-block en overschreef
   daarmee de inline-flex van .btn. Gevolg: de pijl in knoppen als
   "Meer over de behandeling" viel op een tweede regel en de knop
   werd twee regels hoog. De magnetische GSAP-beweging is vervangen
   door CSS, dus de class hoeft alleen nog de flex-layout te bewaren.
   ------------------------------------------------------------ */

.btn-magnetic {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ------------------------------------------------------------
   23. VOLLE-BREEDTE FOTOSTROOK
   De praktijkfoto's zijn 1920x600 (3.2:1). In een halve kolom van
   544 px breed en 400 px hoog is daar maar 42 procent van te zien,
   bij 560 px hoogte zelfs 30 procent. Op volle breedte in de eigen
   verhouding is de foto voor 100 procent zichtbaar en hoeft er
   niets weggesneden te worden.
   ------------------------------------------------------------ */

.photo-band {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 1920 / 600;
  background-color: var(--color-primary-light);
  box-shadow: var(--shadow-lg);
}

.photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out-quart);
}

.photo-band:hover img { transform: scale(1.03); }

@media (max-width: 760px) {
  /* Op mobiel zou 3.2:1 een strook van 107 px opleveren. Iets
     hoger kader, uitsnede op het onderwerp. */
  .photo-band { aspect-ratio: 16 / 9; }
  .photo-band img { object-position: 32% center; }
}

/* ------------------------------------------------------------
   24. FEATUREBLOKKEN: foto onder de tekst i.p.v. ernaast
   Zelfde reden. In de halve kolom was 49 procent van de foto te
   zien; over de volle blokbreedte is dat 100 procent.
   ------------------------------------------------------------ */

.scholing-block,
.specialisation-block {
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

.scholing-block__visual,
.specialisation-block__image {
  height: auto;
  aspect-ratio: 1920 / 600;
}

.scholing-block__visual { order: 2; }

.scholing-block__visual img,
.specialisation-block__image img {
  object-position: center center;
}

@media (max-width: 760px) {
  .scholing-block__visual,
  .specialisation-block__image {
    aspect-ratio: 16 / 9;
  }
  .scholing-block__visual img,
  .specialisation-block__image img {
    object-position: 32% center;
  }
}

/* Tijdlijnpagina: tekstkolom mag de volle breedte pakken wanneer
   de foto eronder als strook staat. */
.behandeling-split--stack {
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

/* Cursieve accentwoorden in koppen op donkere vlakken: het groen van
   .heading-italic is daar onleesbaar, dus terracotta gebruiken. */
.band__content .heading-italic,
.final-cta .heading-italic,
.section--dark .heading-italic,
.specialisation-block .heading-italic {
  color: var(--color-accent-mid);
}

/* ------------------------------------------------------------
   25. UITSNEDE VAN DE OMGEKEERDE BAND
   Bij .band--reverse staat de tekst rechts en moet de linkerhelft
   van de foto vrij blijven. slide_3 heeft het gezicht op x 0-45%;
   met een gecentreerde uitsnede viel de achterkant van het hoofd
   buiten beeld.
   ------------------------------------------------------------ */

.band--reverse .band__img { object-position: 15% center; }

@media (max-width: 900px) {
  .band--reverse .band__img { object-position: 30% center; }
}