/*
Theme Name: AQinesis
Theme URI: https://aqinesis.nl
Author: AQinesis — Apeldoorn
Author URI: https://aqinesis.nl
Description: Standalone WordPress-thema voor AQinesis — praktijk voor acupunctuur en oefentherapie Cesar in Apeldoorn. Warme, rustige uitstraling met nadruk op vertrouwen, vakmanschap en persoonlijk contact.
Version: 1.0.6.541-claudeai
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: Proprietary
Text Domain: aqinesis
*/

/* ============================================================
   TOKENS
============================================================ */
:root {
  --koraal:    #D4614A;
  --koraal-d:  #D4614A;
  --koraal-l:  #D4614A;
  --koraal-tekst: #A8412A; /* v1.0.6.402 — WCAG-AA body-text variant van koraal (5.41:1 op zand). Origineel --koraal blijft voor knoppen, banden en large headings. */
  --oker:      #C48C10;
  --oker-l:    #E8B84A;
  --oker-tekst: #7A5604; /* v1.0.6.402 — WCAG-AA body-text variant van oker (5.91:1 op zand). Origineel --oker blijft voor banden, decoratieve accenten. */
  --zand:      #FBF0E4;
  --zand-d:    #ECD8B4;
  --zand-dd:   #D9C49A;
  --wit:       #FDFAF6;
  --tekst:     #2A1C14;
  --tekst-l:   #6B5040;
  --tekst-ll:  #9C8070;
  --bruin-mid: #3D2820;
  --bruin-dd: #241410; /* v1.0.6.45 — diep hout voor topbar (donkerder dan bruin-mid) */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-script:  'Allura', cursive; /* v1.0.6.123 — kalligrafische AQ-styling, gesubset op letters AQ */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-md: 0 8px 32px rgba(42, 28, 20, 0.12);
  /* Hout-textuur (v1.0.6.14) — wordt toegepast op donker-bruine secties */
  --hout-img:            url('assets/images/hout-textuur.jpg');
  --hout-img-vol:        url('assets/images/hout-textuur-vol.jpg');
  --hout-overlay-sterk:  linear-gradient(rgba(42, 28, 20, 0.78), rgba(42, 28, 20, 0.90));
  --hout-overlay-medium: linear-gradient(rgba(42, 28, 20, 0.62), rgba(42, 28, 20, 0.78));
  --hout-overlay-subtiel: linear-gradient(rgba(42, 28, 20, 0.32), rgba(42, 28, 20, 0.48));
  --aq-dark-material-image:
    radial-gradient(ellipse at 78% 12%, rgba(251, 240, 228, 0.12) 0%, rgba(251, 240, 228, 0.035) 30%, transparent 58%),
    radial-gradient(ellipse at 12% 92%, rgba(212, 97, 74, 0.10) 0%, transparent 48%),
    repeating-linear-gradient(34deg, rgba(251, 240, 228, 0.030) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(122deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 13px),
    linear-gradient(132deg, rgba(255, 248, 238, 0.045), rgba(0, 0, 0, 0.22));
  --aq-dark-material-size: 140% 120%, 100% 100%, 44px 44px, 52px 52px, auto;
  --aq-dark-material-position: 50% 0%, 0% 100%, center, center, center;
  --aq-dark-material-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;

  /* ============================================================
     FLUID DESIGN TOKENS — v1.0.6.51
     Conservatieve schaal, viewport 360px -> 1440px
     Gebruik: font-size: var(--text-md); padding: var(--space-xl);
     Migratie-status: VOLLEDIG KLAAR per v1.0.6.81. Gemigreerd over
     Home+Over+shared (v51+), Acupunctuur (v74), Cesar (v75),
     Klachten-hub+6 klachten (v77), Aanpak (v78), Tarieven+
     Ervaringen+FAQ (v79), Zwangerschap+juridisch (v81).
  ============================================================ */

  /* Typografie — min = mobiel (360px), max = desktop (1440px) */
  --text-xs:    clamp(0.688rem, 0.665rem + 0.10vw, 0.75rem);   /* 11 -> 12px */
  --text-sm:    clamp(0.813rem, 0.790rem + 0.10vw, 0.875rem);  /* 13 -> 14px */
  --text-base:  clamp(0.938rem, 0.915rem + 0.10vw, 1rem);      /* 15 -> 16px */
  --text-md:    clamp(1rem, 0.988rem + 0.05vw, 1.063rem);      /* 16 -> 17px */
  --text-lg:    clamp(1.125rem, 1.057rem + 0.29vw, 1.313rem);  /* 18 -> 21px */
  --text-xl:    clamp(1.375rem, 1.284rem + 0.39vw, 1.625rem);  /* 22 -> 26px */
  --text-2xl:   clamp(1.625rem, 1.489rem + 0.58vw, 2rem);      /* 26 -> 32px */
  --text-3xl:   clamp(1.875rem, 1.557rem + 1.36vw, 2.75rem);   /* 30 -> 44px */
  --text-hero:  clamp(2.5rem, 2.023rem + 2.04vw, 4rem);        /* 40 -> 64px */

  /* Ruimte — min = mobiel (360px), max = desktop (1440px) */
  --space-xs:   clamp(0.5rem, 0.455rem + 0.20vw, 0.625rem);    /* 8 -> 10px */
  --space-sm:   clamp(0.75rem, 0.659rem + 0.39vw, 1rem);       /* 12 -> 16px */
  --space-md:   clamp(1rem, 0.818rem + 0.78vw, 1.5rem);        /* 16 -> 24px */
  --space-lg:   clamp(1.5rem, 1.227rem + 1.17vw, 2.25rem);     /* 24 -> 36px */
  --space-xl:   clamp(2rem, 1.455rem + 2.34vw, 3.5rem);        /* 32 -> 56px */
  --space-2xl:  clamp(3rem, 2.091rem + 3.89vw, 5.5rem);        /* 48 -> 88px */
  --space-3xl:  clamp(4.5rem, 3rem + 6.25vw, 9rem);            /* 72 -> 144px */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bruin-mid); /* Safari 26+ sampelt deze voor tab-bar tinting */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bruin-mid); /* Safari 26+ sampelt deze voor tab-bar tinting; alle direct children dekken dit af */
  color: var(--tekst);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  max-width: 100%;
  overflow-x: hidden;
}

/* v1.0.6.42 FIX — alle main-containers krijgen zand als basis-achtergrond.
   Zonder deze regel schemert de bruine body (Safari 26-fix) door op pagina's
   die geen eigen .page-XXX achtergrond hebben (Cesar, Over, Tarieven, etc.).
   Specifieke .page-XXX classes mogen dit overschrijven. */
main,
.site-main {
  background: var(--zand);
}

/* Grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.35;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.1;
  color: var(--tekst);
  margin: 0 0 1rem;
}

p {
  font-family: var(--font-body);
  color: var(--tekst-l);
  line-height: 1.75;
  margin: 0 0 1rem;
}

a { color: var(--koraal-tekst); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--koraal-d); }

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

/* ============================================================
   HEADER — niet fixed, gewoon boven pagina
============================================================ */
.site-header {
  background: var(--zand);
  /* v1.0.6.106: padding 18→8px (compacter; logo 100px laat header 116px hoog).
     border-bottom verwijderd zodat de header naadloos overgaat in de content.
     v1.0.6.305: gap 32→48px zodat logo en menu meer horizontale adem
     krijgen, zonder het menu te centreren of los te trekken. */
  padding: 8px 64px;
  display: flex;
  align-items: center;
  gap: 48px;
}

/* ========== SITE LOGO (v1.0.4) ========== */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  line-height: 1;
  color: inherit;
}

.site-logo__mark {
  display: block;
  flex-shrink: 0;
  /* v1.0.6.106: 72→100px; align-self verwijderd (terug naar verticaal-centrum). */
  width: 100px;
  height: 100px;
  color: var(--koraal);  /* SVG erft via currentColor */
}

/* Op donkere secties kan de kleur via parent worden overschreven.
   Default blijft koraal — dat werkt op alle achtergronden (licht én donker). */

/* ========== HERO BRAND-NAAM (v1.0.6.136) ==========
   AQinesis bovenaan in de hero, alleen op home. Gebruikt exact
   dezelfde Cormorant-styling als .hero__title (font-weight 300,
   font-style normal) zodat 'inesis' visueel naadloos aansluit
   bij 'Bewegen vanuit balans'. AQ blijft Allura-script koraal.
   v1.0.6.138: AQinesis tegen bovenrand van hero (negatieve margin-
   top om de hero__left padding-top te neutraliseren), en meer
   ademruimte onder (margin-bottom xl) zodat eyebrow + titel
   afdoende afstand krijgen. */
.hero__brand {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 104px);
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
  color: var(--tekst);
  margin: calc(-1 * var(--space-2xl)) 0 var(--space-xl);
}
.hero__brand-aq {
  font-family: var(--font-script);
  font-size: 1.3em;
  font-style: normal;
  font-weight: 400;
  color: var(--koraal);
  -webkit-text-stroke: 1.5px var(--koraal);
  line-height: 0;
  position: relative;
  top: 0.10em;
  margin-right: 0.10em;
}
.hero__brand-inesis {
  /* Cormorant 300 normal — identiek aan .hero__title (weight, style)
     voor visuele cohesie met 'Bewegen vanuit balans'. Geen italic. */
  font-family: var(--font-display);
  font-weight: 300;
  font-style: normal;
  color: var(--tekst);
}

.site-logo__text {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

/* "AQ" — altijd koraal, onafhankelijk van achtergrond
   v1.0.6.123: Allura-script-styling. AQ wordt 1.3× groter weergegeven
   dan inesis (script-fonts hebben lagere visuele dichtheid), met 0.10em
   margin-right tussen Q en i, en lichte vertical-offset om optisch te
   alignen met Cormorant-baseline. font-style:normal forceert geen italic
   (Allura is intrinsiek script). */
.site-logo__aq {
  font-family: var(--font-script);
  font-size: 1.3em;
  font-style: normal;
  font-weight: 400;
  color: var(--koraal);
  -webkit-text-stroke: 1.5px var(--koraal);
  line-height: 0;
  position: relative;
  top: 0.10em;
  margin-right: 0.10em;
}

/* "inesis" — erft tekst-kleur van de omgeving via currentColor
   • default: donker-bruin (header staat op zand-licht)
   • in donkere context: parent zet color: var(--zand) → wordt crème */
.site-logo__inesis {
  color: var(--tekst);
  font-style: italic;
  font-weight: 400;
}

/* Donkere oppervlakken (footer, CTA-watermerk, donkere sub-hero's)
   Utility-klasse die op een wrapper/sectie gezet kan worden */
.is-dark-surface .site-logo__inesis,
.site-header--dark .site-logo__inesis {
  color: var(--zand);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 28px;
}

.site-nav {
  flex: 1 1 auto;
  min-width: 0;
}

/* v1.0.6.62 — "AQinesis" in menu-titels krijgt split-styling
   (AQ koraal, inesis zwart), consistent met logo. De .menu-aq /
   .menu-inesis spans worden toegevoegd door de PHP-filter in
   functions.php (aqinesis_menu_title_styling). */
.menu-aq {
  color: var(--koraal);
  font-weight: 500;
  /* v1.0.6.394 — meer adem tussen script-AQ en "inesis"
     in het hoofdmenu (was 0.045em). */
  margin-right: 0.12em;
  -webkit-text-stroke: 0.6px var(--koraal);
  transition: color 0.2s, -webkit-text-stroke-color 0.2s;
}
.menu-inesis {
  /* v1.0.6.131: expliciet inherit — voorkomt dat 'inesis' zwarter oogt
     dan de rest van het menu-item (was visueel uitschieter naast AQ-koraal).
     v1.0.6.394: bold gemaakt voor sterker contrast met "AQ"-koraal. */
  color: inherit;
  font-style: normal;
  font-weight: 700;
  transition: color 0.2s;
}

/* v1.0.6.213 — hover-effect: kleuren wisselen om. Standaard AQ koraal +
   inesis zwart, bij hover van het menu-item AQ zwart + inesis koraal.
   Selector pakt de hover van de bovenliggende <a> én de hele <li> (zodat
   het ook functioneert bij parent-items met submenu en bij focus). */
.site-nav li:hover .menu-aq,
.site-nav a:hover .menu-aq,
.site-nav a:focus-visible .menu-aq {
  color: var(--tekst-l);
  -webkit-text-stroke-color: var(--tekst-l);
}
.site-nav li:hover .menu-inesis,
.site-nav a:hover .menu-inesis,
.site-nav a:focus-visible .menu-inesis {
  color: var(--koraal);
}

/* v1.0.6.317 — actieve "AQinesis"-menu-items blijven in hover-stand:
   AQ donker, inesis koraal. De rest van de actieve link erft de normale
   actieve koraal-kleur via .current-menu-item > a. */
.site-nav .current-menu-item > a .menu-aq,
.site-nav .current-menu-parent > a .menu-aq,
.site-nav .current-menu-ancestor > a .menu-aq,
.site-nav li.active > a .menu-aq {
  color: var(--tekst-l);
  -webkit-text-stroke-color: var(--tekst-l);
}
.site-nav .current-menu-item > a .menu-inesis,
.site-nav .current-menu-parent > a .menu-inesis,
.site-nav .current-menu-ancestor > a .menu-inesis,
.site-nav li.active > a .menu-inesis {
  color: var(--koraal);
}

.site-nav a {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tekst-l);
  transition: color 0.2s;
}

.site-nav a:hover { color: var(--koraal); }
.site-nav li.active a { color: var(--koraal); }

/* "Aanpak" — subtiele editorial accent (v1.0.6.395)
   Bold om de USP-pagina te accentueren zonder de visuele balans
   van het menu te breken. Geen italic, geen hairline meer. */
.site-nav a[href$="/aanpak/"],
.site-nav a[href$="/aanpak"] {
  font-weight: 700;
}

/* ============================================================
   HERO — twee kolommen, foto via IMG (geen absolute hacks)
============================================================ */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 76px);
  position: relative;
  overflow: hidden;
}

.hero__left {
  background: var(--zand);
  /* v1.0.6.136: padding-top terug naar --space-2xl. De wordmark
     zit nu IN de hero (niet meer als banner erboven), dus de
     hero zelf heeft weer normale top-padding nodig. */
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  z-index: 2;
}

.hero__left::after {
  content: '';
  position: absolute;
  top: 0; right: -80px;
  width: 160px;
  height: 100%;
  background: var(--zand);
  transform: skewX(-4deg);
  z-index: 1;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.hero__eyebrow span::before {
  content: '';
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--koraal);
  vertical-align: middle;
  margin-right: 12px;
}

.hero__eyebrow span {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--koraal-tekst);
  font-weight: 500;
}

.hero__title {
  font-family: var(--font-display);
  /* v1.0.6.329 — fase 2 typografische dramatiek:
     clamp(56,7vw,96) → clamp(68,9vw,128) — editorial-grade scale. */
  font-size: clamp(68px, 9vw, 128px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--tekst);
  margin: 0 0 var(--space-md);
}

.hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--koraal);
  display: block;
}

.hero__subtitle {
  font-family: var(--font-display);
  /* v1.0.6.329 — clamp(22,2.4vw,32) → clamp(26,2.8vw,40) */
  font-size: clamp(26px, 2.8vw, 40px);
  font-style: italic;
  font-weight: 300;
  color: var(--tekst-l);
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-md);
}

.hero__desc {
  font-size: var(--text-base);
  color: var(--tekst-l);
  line-height: 1.7;
  max-width: 440px;
  margin: 0 0 var(--space-lg);
}

.hero__actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.btn-primary {
  background: var(--koraal);
  color: white;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 2px;
  transition: background 0.2s, transform 0.2s;
  display: inline-block;
}
.btn-primary:hover {
  background: var(--koraal-d);
  color: white;
  transform: translateY(-1px);
}

.btn-secondary {
  color: var(--tekst);
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  border-bottom: 1px solid var(--tekst-l);
  transition: color 0.2s, border-color 0.2s;
  display: inline-block;
}
.btn-secondary:hover { color: var(--koraal); border-color: var(--koraal); }

.hero__middle {
  margin-bottom: var(--space-lg);
  max-width: 480px;
}

.hero__mission {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 26px);
  font-style: italic;
  color: var(--tekst);
  line-height: 1.35;
  margin: 0 0 var(--space-md);
}

.hero__positionering {
  font-size: var(--text-sm);
  color: var(--tekst-l);
  margin: 0 0 var(--space-xs);
  max-width: 520px;
  line-height: 1.55;
  overflow-wrap: normal;
}

html[lang^="en"] .hero__title {
  font-size: clamp(54px, 6.7vw, 96px);
  line-height: 1.02;
  letter-spacing: 0;
  max-width: 640px;
}

html[lang^="en"] .hero__subtitle {
  font-size: clamp(23px, 2.2vw, 34px);
  max-width: 620px;
}

html[lang^="en"] .hero__desc,
html[lang^="en"] .hero__positionering {
  max-width: 600px;
}

html[lang^="en"] .hero__quote {
  max-width: min(520px, 78%);
}

html[lang^="en"] .hero__quote blockquote {
  font-size: clamp(17px, 1.5vw, 24px);
  line-height: 1.35;
}

.hero__tags {
  font-size: var(--text-xs);
  color: var(--tekst-ll);
  letter-spacing: 0;
  margin: 0;
}

.hero__trust {
  margin-top: auto;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--zand-dd);
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.hero__trust-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--koraal);
  line-height: 1;
  margin-bottom: 4px;
}

.hero__trust-item span {
  font-size: var(--text-xs);
  color: var(--tekst-ll);
  letter-spacing: 0;
}

/* HERO RECHTS — foto via img + quote-overlay */
.hero__right {
  position: relative;
  background: var(--tekst);
  overflow: hidden;
  /* Box krijgt dezelfde schuine vorm als de zand-overlay van hero__left::after.
     Top-left op 100px, bottom-left op 40px = trapezium met schuine linkerrand
     die matched met skewX(-4deg) van de overlay. */
  clip-path: polygon(100px 0, 100% 0, 100% 100%, 40px 100%);
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

.hero__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(61,42,32,0.35) 0%, rgba(92,61,46,0.25) 40%, rgba(42,28,20,0.55) 100%);
  z-index: 2;
}

.hero__quote {
  position: absolute;
  bottom: var(--space-xl);
  left: var(--space-xl);
  right: var(--space-xl);
  z-index: 3;
}

.hero__quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-style: italic;
  font-weight: 300;
  color: rgba(251, 240, 228, 0.92);
  line-height: 1.4;
  border-left: 2px solid var(--koraal);
  padding-left: 18px;
  margin: 0 0 10px;
}

.hero__quote cite {
  display: block;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(251, 240, 228, 0.55);
  font-style: normal;
  padding-left: 20px;
}

/* ============================================================
   BAND (editorial quote)
============================================================ */
.home-recognition {
  background: var(--zand);
  padding: var(--space-xl) var(--space-xl);
}

.home-recognition__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-xl);
  align-items: center;
}

.home-recognition__title {
  margin: 0 0 var(--space-md);
  color: var(--tekst);
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 300;
  line-height: 1.08;
}

.home-recognition__title em {
  display: block;
  color: var(--koraal);
  font-style: italic;
}

.home-recognition__copy p:not(.section-label) {
  max-width: 560px;
  margin: 0 0 var(--space-sm);
  color: var(--tekst-l);
  font-size: var(--text-base);
  line-height: 1.7;
}

.home-recognition__list {
  display: grid;
  gap: var(--space-sm);
}

.home-recognition__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--wit);
  border: 0;
  border-radius: 18px;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-recognition__item:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 24px rgba(42, 28, 20, 0.06),
    0 0 0 1px rgba(212, 97, 74, 0.18);
}

.home-recognition__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--koraal);
  background: transparent;
  border-radius: 0;
}

.home-recognition__item h3 {
  margin: 0 0 6px;
  color: var(--tekst);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
}

.home-recognition__item p {
  margin: 0;
  color: var(--tekst-l);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.home-routes {
  background: var(--zand);
  padding: var(--space-xl) var(--space-xl);
}

.home-routes__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.8fr);
  gap: var(--space-xl);
  align-items: stretch;
}

.home-routes__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-md) 0;
}

.home-routes__title {
  margin: 0;
  color: var(--tekst);
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 300;
  line-height: 1.08;
}

.home-routes__title em {
  display: block;
  color: var(--koraal);
  font-style: italic;
}

.home-routes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.home-route {
  min-height: 292px;
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  background: var(--wit);
  border: 0;
  border-radius: 18px;
  color: var(--tekst);
  text-decoration: none;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-route:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 24px rgba(42, 28, 20, 0.06),
    0 0 0 1px rgba(212, 97, 74, 0.18);
}

.home-route__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-md);
}

.home-route__icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--koraal);
  background: transparent;
  border-radius: 0;
  flex-shrink: 0;
}

.home-route__label {
  color: var(--koraal-tekst);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
}

.home-route__title {
  display: block;
  color: var(--tekst);
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.14;
  margin-bottom: var(--space-sm);
}

.home-route__body {
  display: block;
  color: var(--tekst-l);
  font-size: var(--text-sm);
  line-height: 1.65;
  margin-bottom: var(--space-md);
}

.home-route__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--koraal);
  font-size: var(--text-sm);
  font-weight: 600;
}

.home-route__cta span {
  transition: transform 0.2s ease;
}

.home-route:hover .home-route__cta span {
  transform: translateX(2px);
}

.band {
  background: var(--koraal);
  padding: clamp(20px, 2.6vw, 34px) var(--space-xl);
  overflow: hidden;
}

.band__quote {
  max-width: 980px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.1vw, 44px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.18;
  text-align: center;
  color: rgba(255,255,255,0.92);
}

.band--marquee {
  /* v1.0.6.414 — overlay van sterk → medium voor iets lichtere band */
  position: relative;
  padding: clamp(10px, 1.4vw, 18px) 0;
  background:
    var(--hout-overlay-medium),
    var(--hout-img) center/cover no-repeat,
    var(--tekst);
  box-shadow:
    inset 0 1px 0 rgba(251, 240, 228, 0.10),
    inset 0 -1px 0 rgba(236, 216, 180, 0.20);
}

.band--marquee::after {
  content: '';
  position: absolute;
  right: clamp(20px, 6vw, 96px);
  bottom: 0;
  left: clamp(20px, 6vw, 96px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236, 216, 180, 0.34), transparent);
  pointer-events: none;
}

.band--marquee .band__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: aq-band-marquee 88s linear infinite;
  will-change: transform;
}

.band--marquee .band__item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  /* v1.0.6.419 — woorden gelijk aan logo-mark (tekst-l, middenbruin) */
  color: var(--tekst-l);
  font-family: var(--font-script);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  pointer-events: none;
  margin-right: clamp(20px, 3.5vw, 50px);
}

/* v1.0.6.414 — logo-mark separator in tekst-l (middenbruin):
   subtiel zichtbaar, iets lichter dan de bruine bg. */
.band--marquee .band__item::after {
  content: '';
  display: inline-block;
  width: clamp(22px, 2.4vw, 34px);
  height: clamp(22px, 2.4vw, 34px);
  margin-left: clamp(20px, 3.5vw, 50px);
  background-color: var(--tekst-l);
  -webkit-mask: url('assets/images/logo-mark.svg') center/contain no-repeat;
          mask: url('assets/images/logo-mark.svg') center/contain no-repeat;
  flex: 0 0 auto;
}

@keyframes aq-band-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .band--marquee .band__track {
    animation: none;
    transform: none;
  }
}

/* ============================================================
   AANPAK
============================================================ */
.aanpak {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.aanpak__content {
  background: var(--wit);
  padding: var(--space-2xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ============================================================
   Section-labels & section-titles (v1.0.6.56)
   Globale definitie voor alle pagina's. Eerder bestond er een
   dubbele definitie: een oude globale (regel 503) en een
   Aanpak-specifieke override (regel ~2855) die door CSS-cascade
   altijd won. In v1.0.6.56 zijn beide samengevoegd tot één
   definitie, met token-migratie waar mogelijk.
============================================================ */
.section-label {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--koraal-tekst);
  font-weight: 500;
  margin: 0 0 var(--space-md);
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212, 97, 74, 0.4);
}

.section-label--light {
  color: var(--zand);
  border-bottom-color: rgba(251, 240, 228, 0.4);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--tekst);
  margin: 0 0 var(--space-lg);
}

.section-title em {
  font-style: italic;
  color: var(--koraal);
  display: block;
}

.section-body {
  font-size: var(--text-base);
  color: var(--tekst-l);
  line-height: 1.75;
  max-width: 460px;
  margin-bottom: var(--space-lg);
}

.pillars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pillar {
  display: flex;
  gap: var(--space-md);
  padding: 22px 24px;
  background: var(--zand);
  border-radius: 18px;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(42, 28, 20, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.pillar:hover {
  background: var(--zand);
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(212, 97, 74, 0.16),
    0 8px 22px rgba(42, 28, 20, 0.045);
}

.pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--koraal);
  flex-shrink: 0;
  margin-top: 1px;
  width: 30px;
  height: 30px;
}

.pillar__text strong {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--tekst);
  margin-bottom: 4px;
}

.pillar__text p {
  font-size: var(--text-sm);
  color: var(--tekst-l);
  line-height: 1.5;
  margin: 0;
}

.aanpak__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-lg);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--koraal);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(212, 97, 74, 0.4);
  transition: border-color 0.2s ease, gap 0.2s ease;
}

.aanpak__cta-link:hover {
  border-bottom-color: var(--koraal);
  gap: 12px;
}

.aanpak__cta-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.aanpak__cta-link:hover .aanpak__cta-arrow {
  transform: translateX(2px);
}

.aanpak__visual {
  /* v1.0.6.133: achtergrond terug naar --zand (warmer) zoals voor v132.
     De white-shift in v132 maakte het te bleek; --zand geeft de warme
     filosofie-look terug die in eerdere iteraties al goed werkte. */
  background: var(--zand);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
}

/* v1.0.6.133 — groot logo subtiel als watermerk in filosofie-kaart.
   Logo is 1 tint lichter dan de zand-achtergrond (richting --wit),
   en 50% groter dan v132 (480 → 720px). Color via SVG currentColor;
   we zetten die op --wit met lichte opacity zodat het effect "iets
   lichter dan achtergrond" is, niet "fel wit". */
.aanpak__visual .aanpak__bg-logo {
  position: absolute;
  width: 90%;
  max-width: 720px;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.55;
  color: var(--wit);
  pointer-events: none;
  z-index: 1;
}

.aanpak__visual::before {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: var(--zand-dd);
  top: -110px; right: -110px;
  opacity: 0.5;
}

.aanpak__visual::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--koraal);
  bottom: -60px; left: -60px;
  opacity: 0.07;
}

.big-quote {
  text-align: center;
  max-width: 460px;
  position: relative;
  z-index: 2;
}

.big-quote__mark {
  font-family: var(--font-display);
  font-size: 180px;
  line-height: 1;
  color: var(--zand-d);
  display: block;
  margin-bottom: -50px;
}

.big-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 34px);
  font-style: italic;
  color: var(--tekst);
  line-height: 1.3;
  margin: 0 0 16px;
}

.big-quote cite {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tekst-ll);
  font-style: normal;
}

/* ============================================================
   BEHANDELINGEN (donker, 2 kaarten)
============================================================ */
.behandelingen {
  position: relative;
  isolation: isolate;
  background-color: var(--tekst);
  background-image:
    linear-gradient(rgba(42, 28, 20, 0.70), rgba(42, 28, 20, 0.86)),
    var(--aq-dark-material-image);
  background-size:
    auto,
    var(--aq-dark-material-size);
  background-position:
    center,
    var(--aq-dark-material-position);
  background-repeat:
    no-repeat,
    var(--aq-dark-material-repeat);
  padding: var(--space-3xl) var(--space-xl);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(251, 240, 228, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

.behandelingen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at 88% 18%, rgba(251, 240, 228, 0.09) 0%, rgba(251, 240, 228, 0.025) 32%, transparent 62%),
    radial-gradient(ellipse at 12% 88%, rgba(212, 97, 74, 0.08) 0%, transparent 50%),
    linear-gradient(118deg, rgba(255, 248, 238, 0.045) 0%, transparent 36%, rgba(0, 0, 0, 0.16) 100%);
  opacity: 0.58;
  mix-blend-mode: soft-light;
}

.behandelingen > * {
  position: relative;
  z-index: 1;
}

.behandelingen__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.behandelingen__header .section-title {
  color: var(--zand);
}

.behandelingen__header .section-body {
  color: rgba(251,240,228,0.62);
  margin: 0 auto;
  max-width: 600px;
}

.behandelingen__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* v1.0.6.277 — bento upgrade: gap 2px → var(--space-md) voor
     duidelijke separatie tussen cards. Met de nieuwe radius 18px
     op .beh-card heeft een super-tight gap geen meerwaarde meer. */
  gap: var(--space-md);
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.behandelingen__grid::before {
  content: none;
}

/* v1.0.6.62 — .beh-card is nu een klikbare <a>-tag.
   Effecten: lift op hover, meer achtergrond-opacity, koraal-onderstreep
   die van links naar rechts "inrolt", arrow schuift naar rechts.
   v1.0.6.277 — bento upgrade: border-radius 18px (consistent met
   .klacht-cards), achtergrond 0.04 → 0.06 zodat radius-randen
   visueel beter loskomen van de hout-achtergrond. */
.beh-card {
  background:
    linear-gradient(rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.046)),
    radial-gradient(ellipse at 84% 12%, rgba(251, 240, 228, 0.07), transparent 42%),
    radial-gradient(ellipse at 12% 88%, rgba(212, 97, 74, 0.07), transparent 50%),
    repeating-linear-gradient(34deg, rgba(251, 240, 228, 0.024) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(122deg, rgba(0, 0, 0, 0.030) 0 1px, transparent 1px 12px);
  padding: var(--space-xl) var(--space-xl);
  border: 1px solid rgba(251, 240, 228, 0.07);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(251, 240, 228, 0.08);
  transition: background 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
  /* Als de kaart een <a> is, reset de link-styling zodat alleen onze eigen stijl telt */
  display: block;
  color: inherit;
  text-decoration: none;
}

.beh-card:nth-child(2) {
  margin-left: 0;
}

/* Top koraal-streep — bestaand effect, blijft werken bij hover op <a> */
.beh-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--koraal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

/* Bottom koraal-streep — nieuw in v1.0.6.62, nadrukkelijker */
.beh-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--koraal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.beh-card:hover,
.beh-card:focus-visible {
  background:
    linear-gradient(rgba(255, 255, 255, 0.090), rgba(255, 255, 255, 0.060)),
    radial-gradient(ellipse at 84% 12%, rgba(251, 240, 228, 0.09), transparent 42%),
    radial-gradient(ellipse at 12% 88%, rgba(212, 97, 74, 0.09), transparent 50%),
    repeating-linear-gradient(34deg, rgba(251, 240, 228, 0.028) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(122deg, rgba(0, 0, 0, 0.032) 0 1px, transparent 1px 12px);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(251, 240, 228, 0.12);
  transform: translateY(-6px);
}

.beh-card:hover::before,
.beh-card:focus-visible::before {
  transform: scaleX(1);
}

.beh-card:hover::after,
.beh-card:focus-visible::after {
  transform: scaleX(1);
}

/* Focus-state voor keyboard-gebruikers */
.beh-card:focus-visible {
  outline: 2px solid var(--koraal);
  outline-offset: 4px;
}

.beh-card__nr {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 300;
  color: rgba(255,255,255,0.05);
  line-height: 1;
  position: absolute;
  top: 20px; right: 28px;
}

.beh-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--koraal);
  margin-bottom: var(--space-md);
  width: 32px;
  height: 32px;
}

.beh-card__title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
  color: var(--zand);
  margin: 0 0 var(--space-sm);
  line-height: 1.2;
}

.beh-card__body {
  font-size: var(--text-base);
  color: rgba(251,240,228,0.55);
  line-height: 1.7;
  margin: 0 0 var(--space-md);
}

.beh-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-md);
}

.beh-card__tag {
  font-size: 10px;
  letter-spacing: 0;
  padding: 5px 11px;
  background: rgba(212,97,74,0.12);
  color: var(--koraal-l);
  border-radius: 2px;
  border: 1px solid rgba(212,97,74,0.18);
  text-transform: uppercase;
}

/* v1.0.6.62 — arrow-indicator in klikbare kaart.
   Vervangt de oude .beh-card__link tekstuele "Meer over X →". */
.beh-card__arrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 24px;
  color: var(--koraal-l);
  line-height: 1;
  transition: transform 0.3s var(--ease-out), color 0.2s;
}

.beh-card:hover .beh-card__arrow,
.beh-card:focus-visible .beh-card__arrow {
  transform: translateX(6px);
  color: var(--koraal);
}

/* ============================================================
   OVER (5/7 grid)
============================================================ */
.over {
  display: grid;
  grid-template-columns: 5fr 7fr;
  min-height: 560px;
}

.over__visual {
  background: var(--zand-d);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: var(--space-lg);
}

.over__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.over__badge {
  position: relative;
  z-index: 2;
  background: var(--wit);
  padding: var(--space-md) var(--space-md);
  border-radius: 3px;
  box-shadow: var(--shadow-md);
}

.over__badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--tekst);
  margin-bottom: 4px;
}

.over__badge span {
  font-size: var(--text-xs);
  color: var(--tekst-ll);
  letter-spacing: 0;
}

.over__content {
  background: var(--wit);
  padding: var(--space-2xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.over__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.over__stat {
  padding: var(--space-md) var(--space-md);
  background: var(--zand);
  border-radius: 3px;
}

.over__stat-number {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 300;
  color: var(--koraal);
  line-height: 1;
  margin-bottom: 6px;
}

.over__stat-label {
  font-size: var(--text-sm);
  color: var(--tekst-l);
  line-height: 1.4;
}

.over__nva {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-sm) var(--space-md);
  background: var(--zand);
  border-radius: 3px;
  border-left: 3px solid var(--oker);
  font-size: var(--text-sm);
  color: var(--tekst-l);
}

.over__nva strong { color: var(--tekst); }

/* ============================================================
   OVER-PAGINA — visuele herziening v1.0.6.121
   sectie 2: intro (portret + verhaal 2-koloms)
   sectie 3: pull-quote (volle breedte zand-d)
   sectie 4: visie (gecentreerd)
   sectie 5: opleidingen (2-koloms tijdlijn)
   sectie 6: expertise (specialisaties + nascholingen 2-koloms)
   sectie 7: registraties (oker-callout)
============================================================ */

/* Sectie 2 — INTRO MET PORTRET */
.over__intro {
  padding: var(--space-2xl) 0 var(--space-xl);
  background: var(--zand);
}
.over__intro-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-xl);
  align-items: start;
}
.over__intro-foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(42, 28, 20, 0.12);
}
.over__intro-tekst h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 300;
  color: var(--tekst);
  margin: 0 0 var(--space-md);
  line-height: 1.15;
}
.over__intro-tekst h2 em {
  color: var(--koraal);
  font-style: italic;
}
.over__intro-tekst p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--tekst);
  margin: 0 0 var(--space-sm);
}
.over__intro-tekst p:last-child {
  margin-bottom: 0;
}

/* Stats binnen intro-sectie — overschrijft default 2-kolom naar 3-kolom */
.over__intro .over__stats {
  max-width: 1100px;
  margin: var(--space-xl) auto 0;
  padding: 0 var(--space-md);
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 768px) {
  .over__intro-inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .over__intro-foto {
    max-width: 220px;
    margin: 0 auto;
  }
  .over__intro .over__stats {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* Sectie 3 — PULL-QUOTE */
.over__quote {
  background: var(--zand-d);
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
}
.over__quote-inner {
  max-width: 820px;
  margin: 0 auto;
}
.over__quote-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.35;
  color: var(--bruin-mid);
  margin: 0;
}
.over__quote-text::before,
.over__quote-text::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--koraal);
  margin: var(--space-sm) auto;
  opacity: 0.6;
}

/* Sectie 4 — VISIE */
.over__visie {
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
}
.over__visie-inner {
  max-width: 720px;
  margin: 0 auto;
}
.over__visie h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 300;
  color: var(--tekst);
  margin: 0 0 var(--space-md);
  line-height: 1.15;
}
.over__visie h2 em {
  color: var(--koraal);
  font-style: italic;
}
.over__visie p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--tekst);
  margin: 0 0 var(--space-sm);
}

/* Sectie 4b — SFEERBLOK volle-breedte (v122) */
.over__sfeer {
  position: relative;
  width: 100%;
  min-height: 720px; /* v1.0.6.198: was 480px, 50% hoger */
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
  background: var(--bruin-mid);
}
.over__sfeer-foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}
.over__sfeer-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(42, 28, 20, 0.10) 0%,
    rgba(42, 28, 20, 0.20) 40%,
    rgba(42, 28, 20, 0.78) 100%
  );
  pointer-events: none;
}
.over__sfeer-tekst {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
}
.over__sfeer-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--koraal-l, #D4614A);
  margin: 0 0 var(--space-xs);
  position: relative;
  padding-left: 28px;
}
.over__sfeer-eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 1px;
  background: var(--koraal-l, #D4614A);
}
.over__sfeer-titel {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--wit, #ffffff);
  margin: 0 0 var(--space-sm);
  max-width: 720px;
}
.over__sfeer-titel em {
  color: var(--wit, #ffffff);
  font-style: italic;
}
.over__sfeer-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--zand-d);
  margin: 0;
  max-width: 540px;
}

@media (max-width: 768px) {
  .over__sfeer {
    min-height: 570px; /* v1.0.6.198: was 380px, 50% hoger */
  }
  .over__sfeer-tekst {
    padding: var(--space-lg) var(--space-md);
  }
}

/* Sectie 5 — OPLEIDINGEN 2-KOLOMS */
.over__opleidingen {
  padding: var(--space-xl) var(--space-md) var(--space-2xl);
  background: var(--zand);
}
.over__opleidingen-inner {
  max-width: 820px;
  margin: 0 auto;
}
.over__opleidingen h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 300;
  color: var(--tekst);
  margin: 0 0 var(--space-lg);
  line-height: 1.15;
  text-align: center;
}
.over__opleidingen h2 em {
  color: var(--koraal);
  font-style: italic;
}
.over__tijdlijn {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.over__tijdlijn-rij {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--space-md);
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(42, 28, 20, 0.08);
}
.over__tijdlijn-rij:last-child {
  border-bottom: none;
}
.over__tijdlijn-jaar {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--koraal);
  line-height: 1;
}
.over__tijdlijn-opleiding {
  font-size: 17px;
  line-height: 1.5;
  color: var(--tekst);
}
.over__tijdlijn-plaats {
  color: var(--tekst-l);
  font-size: 16px;
}
.over__opleidingen-noot {
  margin: var(--space-lg) 0 0;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--tekst-l);
  text-align: center;
  line-height: 1.6;
}

/* v1.0.6.400 — gecombineerde ontwikkelingstijdlijn */
.over__opleidingen-intro {
  margin: 0 0 var(--space-lg);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--tekst-l);
  text-align: center;
  font-style: italic;
}
.over__tijdlijn-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oker-tekst);
  background: rgba(196, 140, 16, 0.08);
  padding: 2px 8px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: 1px;
  white-space: nowrap;
}
.over__tijdlijn-rij--bijscholing .over__tijdlijn-jaar {
  color: var(--oker-tekst);
}

@media (max-width: 600px) {
  .over__tijdlijn-rij {
    grid-template-columns: 70px 1fr;
    gap: var(--space-sm);
  }
  .over__tijdlijn-jaar { font-size: 19px; }
  .over__tijdlijn-opleiding { font-size: 16px; }
  .over__tijdlijn-tag {
    display: inline-block;
    margin: 0 0 4px;
  }
}

/* Sectie 6 — EXPERTISE (specialisaties + nascholingen) */
.over__expertise {
  padding: var(--space-2xl) var(--space-md);
}
.over__expertise-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
}
/* v1.0.6.400 — single-column als alleen specialisaties (zonder nascholingen-blok) */
.over__expertise-inner:has(.over__expertise-blok--full) {
  grid-template-columns: 1fr;
  max-width: 800px;
}
.over__expertise-blok h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 300;
  color: var(--tekst);
  margin: 0 0 var(--space-md);
  line-height: 1.15;
}
.over__expertise-blok h2 em {
  color: var(--koraal);
  font-style: italic;
}
.over__expertise-intro {
  font-size: 16px;
  font-style: italic;
  color: var(--tekst-l);
  margin: 0 0 var(--space-md);
  line-height: 1.5;
}
.over__expertise-lijst {
  list-style: none;
  padding: 0;
  margin: 0;
}
.over__expertise-lijst li {
  position: relative;
  padding: 8px 0 8px 22px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tekst);
  border-bottom: 1px solid rgba(42, 28, 20, 0.06);
}
.over__expertise-lijst li:last-child {
  border-bottom: none;
}
.over__expertise-lijst li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 17px;
  width: 8px;
  height: 8px;
  background: var(--koraal);
  border-radius: 50%;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .over__expertise-inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* Sectie 7 — REGISTRATIES wrapper */
.over__registraties {
  padding: 0 var(--space-md) var(--space-2xl);
}
.over__registraties-inner {
  max-width: 920px;
  margin: 0 auto;
}

/* ============================================================
   KLACHTEN (4-koloms grid met wide variants)
============================================================ */
.klachten {
  background: var(--zand);
  padding: var(--space-3xl) var(--space-xl);
}

.klachten__header {
  max-width: 1100px;
  margin: 0 auto var(--space-xl);
}

.klachten__title em {
  font-style: italic;
  color: var(--koraal);
}

.klachten__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* v1.0.6.275 — bento upgrade: gap ruimer (was --space-sm),
     geeft visueel meer "ademruimte" tussen blokken zoals 2026-trend. */
  gap: var(--space-md);
  max-width: 1100px;
  margin: 0 auto;
}

/* v1.0.6.275 — bento card-systeem.
   Basis: regular card (1x1). Wide modifier: 2x1 met feature-treatment.
   Border-radius 18px (Apple-norm 2026), zachtere hover-ring i.p.v.
   border-bottom. Wide cards krijgen subtiele koraal→transparant gradient
   (5% opacity) + ruimere padding + grotere icon/title voor visual weight. */
.klacht {
  background: var(--wit);
  padding: var(--space-md);
  border-radius: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

.klacht:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 24px rgba(42, 28, 20, 0.06),
    0 0 0 1px rgba(212, 97, 74, 0.18);
}

.klacht.wide {
  grid-column: span 2;
  padding: var(--space-lg);
  /* v1.0.6.276 — gradient zichtbaarder gemaakt: opacity 0.05→0.10
     en stop verlegd van 55%→65%, zodat het feature-accent ook bij
     vol-gevulde cards (langere body-tekst) duidelijk leesbaar is. */
  background:
    linear-gradient(135deg,
      rgba(212, 97, 74, 0.10) 0%,
      rgba(212, 97, 74, 0) 65%),
    var(--wit);
}

.klacht__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--koraal);
  margin-bottom: var(--space-sm);
  width: 26px;
  height: 26px;
}

.klacht.wide .klacht__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-md);
}

.klacht__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  color: var(--tekst);
  margin: 0 0 var(--space-xs);
}

.klacht.wide .klacht__name {
  font-size: 26px;
  margin-bottom: var(--space-sm);
}

.klacht__desc {
  /* v1.0.6.275 — 13px → 15px voor leesbaarheid bij toegenomen card-size. */
  font-size: 15px;
  color: var(--tekst-l);
  line-height: 1.6;
  margin: 0;
}

.klacht.wide .klacht__desc {
  font-size: 16px;
  max-width: 90%;
}

/* ============================================================
   VERGOEDING (koraal banner)
============================================================ */
.vergoeding {
  position: relative;
  isolation: isolate;
  background-color: #c95d49;
  background-image:
    linear-gradient(118deg, rgba(255, 248, 238, 0.16) 0%, rgba(255, 248, 238, 0.05) 34%, rgba(42, 28, 20, 0.22) 100%),
    repeating-linear-gradient(90deg, rgba(255, 248, 238, 0.035) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(42, 28, 20, 0.02) 0 1px, transparent 1px 8px);
  padding: var(--space-3xl) var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 238, 0.18),
    inset 0 -1px 0 rgba(42, 28, 20, 0.16);
}

.vergoeding::before,
.vergoeding::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.vergoeding::before {
  background-image:
    radial-gradient(ellipse at 82% 24%, rgba(255, 248, 238, 0.16) 0%, rgba(255, 248, 238, 0.05) 28%, transparent 58%),
    radial-gradient(ellipse at 86% 82%, rgba(82, 38, 29, 0.20) 0%, rgba(82, 38, 29, 0.08) 34%, transparent 66%),
    linear-gradient(106deg, transparent 0 58%, rgba(255, 248, 238, 0.08) 58% 59%, transparent 59% 100%);
  mix-blend-mode: soft-light;
}

.vergoeding::after {
  background-image:
    repeating-linear-gradient(35deg, rgba(255, 248, 238, 0.026) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(125deg, rgba(42, 28, 20, 0.018) 0 1px, transparent 1px 6px);
  opacity: 0.62;
}

.vergoeding__percentage {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(100px, 14vw, 180px);
  font-weight: 300;
  color: #fff8ee;
  line-height: 1;
  opacity: 0.9;
  flex-shrink: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-shadow: 0 10px 34px rgba(42, 28, 20, 0.18);
}

.vergoeding__content {
  position: relative;
  z-index: 1;
  flex: 1 1 420px;
  min-width: 0;
  padding-left: clamp(20px, 2.6vw, 34px);
}

.vergoeding__content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 2px;
  height: clamp(86px, 68%, 190px);
  background: linear-gradient(180deg, rgba(255, 248, 238, 0.88), rgba(255, 248, 238, 0.24));
  border-radius: 999px;
}

.vergoeding__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  color: #fff8ee;
  line-height: 1.2;
  margin: 0 0 var(--space-sm);
  text-shadow: 0 2px 16px rgba(42, 28, 20, 0.18);
}

.vergoeding__text {
  font-size: var(--text-base);
  color: rgba(255, 248, 238, 0.92);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 0 var(--space-md);
}

.vergoeding .vergoeding__text,
.vergoeding .vergoeding__text p {
  color: rgba(255, 248, 238, 0.92);
}

.vergoeding .btn-white {
  background: rgba(255, 248, 238, 0.96);
  color: #8f3526;
  border: 1px solid rgba(255, 248, 238, 0.58);
  box-shadow: 0 10px 30px rgba(42, 28, 20, 0.12);
}

.vergoeding .btn-white:hover {
  background: #fffaf3;
  color: #7f2e21;
  opacity: 1;
}

.btn-white {
  display: inline-block;
  background: white;
  color: var(--koraal);
  padding: 13px 28px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 2px;
  transition: opacity 0.2s;
}

.btn-white:hover { opacity: 0.88; color: var(--koraal); }

/* ============================================================
   WERKWIJZE (4 stappen met cirkels + verbindingslijn)
============================================================ */
.werkwijze {
  background: var(--wit);
  padding: var(--space-3xl) var(--space-xl);
}

.werkwijze__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.werkwijze__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  list-style: none;
  padding: 0;
}

.werkwijze__steps::before {
  content: '';
  position: absolute;
  top: 27px; left: 12%; right: 12%;
  height: 1px;
  background: var(--zand-dd);
}

.stap {
  padding: 0 var(--space-md);
  text-align: center;
  position: relative;
  z-index: 1;
}

.stap__nr {
  width: 54px; height: 54px;
  background: var(--koraal);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0 auto var(--space-md);
  box-shadow: 0 0 0 6px var(--wit), 0 0 0 7px var(--zand-dd);
  transition: transform 0.2s;
}

.stap:hover .stap__nr { transform: scale(1.08); }

.stap__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--tekst);
  margin: 0 0 var(--space-xs);
}

.stap__desc {
  font-size: var(--text-sm);
  color: var(--tekst-l);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   CTA (donker met AQ-watermerk)
============================================================ */
.cta {
  background:
    linear-gradient(125deg, rgba(255, 248, 238, 0.08) 0%, transparent 36%, rgba(42, 28, 20, 0.18) 100%),
    var(--hout-overlay-sterk),
    var(--hout-img) center/cover no-repeat,
    var(--tekst);
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta::before {
  /* v1.0.6.185: fill="#180E0A" — donkerder dan achtergrond #2A1C14.
     Opacity hoog zodat donkere mark zichtbaar is op donkere achtergrond. */
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/images/logo-mark.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 110%;
  pointer-events: none;
  opacity: 0.85;
  z-index: 0;
}

.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.48;
  background-image:
    radial-gradient(ellipse at 78% 18%, rgba(255, 248, 238, 0.13) 0%, rgba(255, 248, 238, 0.04) 30%, transparent 62%),
    radial-gradient(ellipse at 18% 88%, rgba(0, 0, 0, 0.24) 0%, transparent 58%),
    repeating-linear-gradient(35deg, rgba(255, 248, 238, 0.024) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(125deg, rgba(42, 28, 20, 0.026) 0 1px, transparent 1px 7px);
  mix-blend-mode: soft-light;
}

.cta__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.5vw, 76px);
  font-weight: 300;
  color: var(--zand);
  line-height: 1.1;
  margin: 0 0 var(--space-md);
  position: relative;
  z-index: 1;
}

.cta__title em {
  font-style: italic;
  color: var(--koraal-l);
  display: block;
}

.cta__sub {
  font-size: var(--text-base);
  color: rgba(251,240,228,0.6);
  margin: 0 0 var(--space-lg);
  position: relative;
  z-index: 1;
}

.cta__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.btn-cta-primary {
  background: var(--koraal);
  color: white;
  padding: var(--space-md) 40px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 2px;
  transition: background 0.2s, transform 0.2s;
}
.btn-cta-primary:hover { background: var(--koraal-d); color: white; transform: translateY(-2px); }

.btn-cta-ghost {
  color: rgba(251,240,228,0.62);
  padding: var(--space-md) 28px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  border: 1px solid rgba(251,240,228,0.18);
  border-radius: 2px;
  transition: border-color 0.2s, color 0.2s;
}
.btn-cta-ghost:hover { border-color: rgba(251,240,228,0.45); color: var(--zand); }

/* ===== CTA-banner telefoon-CTA (v1.0.6.49) =====
   Staat onder de twee knoppen in de donkere hout-banner.
   Vervangt de dubbele afspraak-CTA die voorheen in de footer-top zat. */
.cta__phone {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  margin-top: var(--space-md);
  position: relative;
  z-index: 1;
}
.cta__phone-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  color: rgba(251,240,228,0.55);
}
.cta__phone-number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--zand);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s;
}
.cta__phone:hover .cta__phone-number { color: var(--koraal-l); }

/* ============================================================
   HOME ERVARINGEN
============================================================ */
.home-experiences {
  background: var(--zand);
  padding: var(--space-2xl) var(--space-xl);
}

.home-experiences__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.home-experiences__header {
  max-width: 720px;
  margin: 0 0 var(--space-xl);
}

.home-experiences__title {
  margin: 0;
  color: var(--tekst);
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 300;
  line-height: 1.1;
}

.home-experiences__title em {
  display: block;
  color: var(--koraal);
  font-style: italic;
}

.home-experiences__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.home-experiences__showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: var(--space-md);
  align-items: stretch;
}

.home-experiences .ervaring-card {
  border-radius: 8px;
}

.home-experiences .ervaring-card--home {
  padding: 28px 28px 24px;
  border-left-color: var(--koraal);
}

.home-experiences .ervaring-card--featured {
  min-height: 100%;
  justify-content: space-between;
  background:
    linear-gradient(135deg, rgba(253, 250, 246, 0.94), rgba(251, 240, 228, 0.84)),
    var(--wit);
}

.home-experiences__supporting {
  display: grid;
  gap: var(--space-sm);
}

.home-experiences .ervaring-card--support {
  padding: 22px 22px 20px;
}

.home-experiences .ervaring-card__quote {
  margin: 0;
  padding: 0 0 0 18px;
  border: 0;
  position: relative;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.65;
  color: var(--tekst);
}

.home-experiences .ervaring-card__quote::before {
  content: '\201C';
  position: absolute;
  top: -3px;
  left: 0;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--koraal);
}

.home-experiences .ervaring-card--featured .ervaring-card__quote {
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.7;
}

.home-experiences .ervaring-card__source-label {
  background: var(--zand-d);
}

.home-experiences__readmore {
  display: inline-flex;
  align-self: flex-start;
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--koraal-tekst);
  border-bottom: 1px solid rgba(168, 65, 42, 0.34);
}

.ervaring-card:hover .home-experiences__readmore,
.ervaring-card:focus-visible .home-experiences__readmore {
  color: var(--tekst);
  border-bottom-color: var(--tekst);
}


/* ============================================================
   FOOTER
============================================================ */
.site-footer {
  background: var(--zand);
  padding: 60px 64px 0;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 44px;
  margin-bottom: 48px;
}

.footer-brand__name {
  font-family: var(--font-display);
  font-size: 25px;
  color: var(--tekst);
  margin: 0 0 12px;
}

.footer-brand__name em {
  font-style: italic;
  color: var(--koraal);
}

.footer-brand__tagline {
  font-size: 14px;
  color: var(--tekst-l);
  line-height: 1.65;
  max-width: 260px;
  margin: 0;
}

.footer-col h4 {
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tekst-ll);
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-weight: 500;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li { margin-bottom: 9px; }

.footer-col a {
  font-size: 14px;
  color: var(--tekst-l);
  transition: color 0.2s;
}

.footer-col a:hover { color: var(--koraal); }

.site-footer__bottom {
  border-top: 1px solid var(--zand-dd);
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.site-footer__bottom p {
  font-size: 12px;
  color: var(--tekst-ll);
  letter-spacing: 0;
  margin: 0;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1000px) {
  .site-header { padding: 16px 32px; gap: 32px; }
  /* Home-pagina: grid-breaks blijven nodig; padding wordt afgehandeld via fluid tokens v1.0.6.54 */
  .hero { grid-template-columns: 1fr; }
  .hero__left { min-height: auto; }
  .hero__left::after { display: none; }
  .hero__right { min-height: 420px; clip-path: none; }
  .home-recognition__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
  .home-routes__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
  .home-routes__intro { max-width: 640px; padding: 0; }
  .home-experiences__grid,
  .home-experiences__showcase { grid-template-columns: 1fr; }

  .aanpak,
  .over { grid-template-columns: 1fr; }
  .aanpak__visual { min-height: 360px; }

  .behandelingen__grid,
  .klachten__grid { grid-template-columns: 1fr; }
  .klacht.wide { grid-column: span 1; }

  .werkwijze__steps { grid-template-columns: 1fr 1fr; gap: 40px 0; }
  .werkwijze__steps::before { display: none; }

  .site-footer { padding: 48px 32px 0; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  /* v1.0.6.53 — header blijft horizontaal (was column), logo + hamburger op één regel */
  .site-header {
    padding: 12px 20px;
    gap: 16px;
  }
  .site-nav ul { flex-wrap: wrap; gap: 18px; }
  .site-logo__text { font-size: 22px; }
  .site-logo__mark { width: 75px; height: 75px; } /* v1.0.6.106: 54→75 (consistent met desktop 100) */
  .site-logo { gap: 8px; }

  .site-footer__grid { grid-template-columns: 1fr; }
  .home-recognition,
  .home-experiences { padding: var(--space-lg) var(--space-md); }
  .home-experiences .ervaring-card--home {
    padding: 24px 20px 20px;
  }
  .vergoeding {
    display: block;
    padding: var(--space-2xl) var(--space-md);
  }
  .vergoeding__percentage {
    font-size: 48px;
    line-height: 0.95;
    margin: 0 0 var(--space-md);
  }
  .vergoeding__content {
    width: 100%;
    padding-left: 18px;
  }
  .vergoeding__content::before {
    height: calc(100% - 8px);
  }
  .home-recognition__item { grid-template-columns: 1fr; }
  .home-routes { padding: var(--space-lg) var(--space-md); }
  .home-routes__grid { grid-template-columns: 1fr; }
  .home-route { min-height: 0; }

  /* Fix v1.0.6.28: hero max-height + overflow:hidden bedekken tekst op mobiel */
  .acu-hero,
  .cesar-hero {
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 380px) {
  .vergoeding__percentage {
    font-size: 42px;
  }
}

/* ============================================================
   v1.0 — UITBREIDINGEN VOOR INTERNE PAGINA'S
============================================================ */

/* === PAGE HERO (kleiner dan homepage hero, voor alle interne pagina's) === */
/* ============================================================
   OVER-PAGINA STYLING (fluid-token versie — v1.0.6.51)
   Geconverteerd van vaste px naar design tokens.
   Andere pagina's volgen in v1.0.6.52+.
============================================================ */
.page-hero {
  /* v1.0.6.413 — CTA-blok palet doorgevoerd: donkerbruin met hout-textuur,
     zand-tekst. Foto-variant overschrijft dit (zie .page-hero--foto). */
  background:
    var(--hout-overlay-sterk),
    var(--hout-img) center/cover no-repeat,
    var(--tekst);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  position: relative;
  overflow: hidden;
}
.page-hero__inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.page-template-klachtpagina .page-hero__inner {
  padding-top: 50px;
}
.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--koraal);
  font-weight: 500;
  margin-bottom: var(--space-md);
}
.page-hero__eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--koraal);
}
.page-hero__title {
  font-family: var(--font-display);
  /* v1.0.6.271 — typografische dramatiek fase 1: schaal-bump
     van clamp(42,5.5vw,64) → clamp(56,7vw,96). Weight 400 voor
     anker-tekst, em krijgt 300 italic voor editorial split feel.
     Lichtere letter-spacing voor display-formaat. */
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--tekst);
  margin: 0 0 var(--space-md);
  max-width: 900px;
}
.page-hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--koraal);
}
.page-hero__lead {
  font-family: var(--font-display);
  /* v1.0.6.271 — editorial scale-bump: van var(--text-xl) (24-30)
     naar clamp(22,2.4vw,32) met betere line-height voor leesbaarheid
     bij grotere display-tekst. */
  font-size: clamp(22px, 2.4vw, 32px);
  font-style: italic;
  font-weight: 300;
  color: var(--tekst-l);
  line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 720px;
  margin: 0;
}

/* v1.0.6.414 — Context-overrides: alléén wanneer typografie-classes IN
   de echte .page-hero container staan (donkere hout-textuur bg) krijgen
   ze zand-kleuren. Buiten die container (acu-hero, cesar-hero, aanpak-hero)
   blijven ze hun donkere default voor leesbaarheid op zand-bg. */
.page-hero .page-hero__eyebrow { color: var(--koraal-l); }
.page-hero .page-hero__eyebrow::before { background: var(--koraal-l); }
.page-hero .page-hero__title { color: var(--zand); }
.page-hero .page-hero__title em { color: var(--koraal-l); }
.page-hero .page-hero__lead { color: var(--zand-d); }

/* === CONTENT CONTAINER (standaard tekst-container voor alle interne pagina's) === */
.content-container {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) var(--space-2xl);
}
.content-container--wide {
  max-width: 1100px;
}
.content-container h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  line-height: 1.15;
  color: var(--tekst);
  margin: var(--space-xl) 0 var(--space-md);
}
.content-container h2 em {
  font-style: italic;
  color: var(--koraal);
}
.content-container h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--tekst);
  margin: var(--space-lg) 0 var(--space-sm);
}
.content-container p {
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--tekst-l);
  margin: 0 0 var(--space-md);
}
.content-container ul,
.content-container ol {
  padding-left: var(--space-md);
  margin: 0 0 var(--space-md);
}
.content-container li {
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--tekst-l);
  margin-bottom: var(--space-xs);
}
/* Inline-links binnen prose — niet van toepassing op .btn-* klassen.
   v1.0.6.83: :not([class^="btn-"]) toegevoegd omdat .content-container a
   de kleur van button-links overschreef (koraal tekst op koraal bg).
   De tweede :not([class*=" btn-"]) dekt buttons met meerdere class-waardes. */
.content-container a:not([class^="btn-"]):not([class*=" btn-"]):not(.ervaring-card) {
  color: var(--koraal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.content-container a:not([class^="btn-"]):not([class*=" btn-"]):not(.ervaring-card):hover {
  color: var(--koraal-d);
}
.content-container strong {
  color: var(--tekst);
  font-weight: 500;
}
.content-container blockquote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-style: italic;
  font-weight: 300;
  color: var(--tekst);
  line-height: 1.35;
  border-left: 3px solid var(--koraal);
  padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
  margin: var(--space-lg) 0;
}

/* === CALLOUT BOXES === */
.callout {
  background: var(--zand);
  border-radius: 6px;
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
  border-left: 4px solid var(--koraal);
}
.callout--oker { border-left-color: var(--oker); }
.callout__label {
  font-size: var(--text-xs);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--koraal);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}
.callout--oker .callout__label { color: var(--oker-tekst); }
.callout p:last-child {
  margin-bottom: 0;
}

/* v1.0.6.52 — eerste H2 in container sluit strakker aan op vorige blok */
.content-container > h2:first-of-type {
  margin-top: 0;
}

/* v1.0.6.52 — portret-afbeelding in content-container (vervangt inline style) */
.content-container > img.aq-portret {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 8px;
  margin: 0 auto var(--space-lg);
}

/* === FAQ ACCORDION === */
.faq {
  margin: var(--space-xl) 0;
}
.faq__item {
  border-bottom: 1px solid var(--zand-dd);
}
.faq__item.faq-item--search-highlight {
  animation: aq-faq-search-highlight 0.78s ease-in-out 4;
}
.faq__item:first-child {
  border-top: 1px solid var(--zand-dd);
}
.faq__question {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: var(--space-md) 40px var(--space-md) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--tekst);
  cursor: pointer;
  position: relative;
  line-height: 1.3;
}
.faq__question:hover { color: var(--koraal); }
.faq__question::after {
  content: '+';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  font-weight: 300;
  color: var(--koraal);
  transition: transform 0.2s;
}
.faq__item.is-open .faq__question::after {
  content: '−';
}
.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq__item.is-open .faq__answer {
  max-height: 800px;
}
.faq__answer-inner {
  padding: 0 0 var(--space-md);
}
.faq__answer p {
  font-size: var(--text-base);
  color: var(--tekst-l);
  line-height: 1.7;
  margin: 0 0 var(--space-sm);
}

@keyframes aq-faq-search-highlight {
  0%, 100% {
    background-color: transparent;
  }
  45% {
    background-color: rgba(212, 97, 74, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__item.faq-item--search-highlight {
    animation: none;
    background-color: rgba(212, 97, 74, 0.08);
  }
}

/* === TARIEVEN TABEL === */
.tarief-tabel {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-lg) 0;
  background: var(--wit);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(42, 28, 20, 0.06);
}
.tarief-tabel tr {
  border-bottom: 1px solid var(--zand-d);
}
.tarief-tabel tr:last-child {
  border-bottom: none;
}
.tarief-tabel td {
  padding: var(--space-md) var(--space-md);
  font-size: var(--text-md);
  color: var(--tekst-l);
}
.tarief-tabel td:first-child {
  color: var(--tekst);
}
.tarief-tabel td:last-child {
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--koraal);
  font-weight: 400;
  white-space: nowrap;
}
.tarief-tabel tr.tarief-tabel__toeslag td {
  /* font-size niet overschrijven — erft van .tarief-tabel td (16-17px)
     en .tarief-tabel td:last-child (18-21px), gelijk aan normale rijen */
  color: var(--tekst-ll);
  background: var(--zand);
}

/* === TARIEVEN NOTITIE — huisbezoek (v1.0.6.529) === */
.tarieven-notitie {
  background: var(--zand-d);                 /* #ECD8B4 */
  border-left: 3px solid var(--koraal);      /* #D4614A */
  padding: 16px 20px;
  border-radius: 6px;
  font-family: var(--font-body);             /* DM Sans */
  font-size: 15px;
  line-height: 1.6;
  color: var(--tekst);                       /* #2A1C14 */
  margin-top: 32px;
}

/* === CONTACT VELDEN === */
.contact-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  max-width: 1100px;
  margin: var(--space-2xl) auto;
  padding: 0 var(--space-xl);
  gap: var(--space-xl);
}
.contact-info {
  background: var(--zand);
  padding: var(--space-xl) var(--space-lg);
  border-radius: 6px;
  align-self: start;
}
.contact-info h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--tekst);
  margin: 0 0 var(--space-md);
}
.contact-info__item {
  margin-bottom: var(--space-md);
}
.contact-info__label {
  font-size: var(--text-xs);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tekst-ll);
  margin-bottom: 4px;
  font-weight: 500;
}
.contact-info__value {
  font-size: var(--text-base);
  color: var(--tekst);
  line-height: 1.5;
}
.contact-info__value a {
  color: var(--tekst);
  text-decoration: none;
  border-bottom: 1px solid var(--koraal);
}
.contact-info__value a:hover {
  color: var(--koraal);
}

.contact-form {
  background:
    linear-gradient(135deg, rgba(253, 250, 246, 0.78) 0%, rgba(251, 240, 228, 0.92) 100%),
    var(--zand);
  padding: var(--space-xl);
  border: 1px solid rgba(42, 28, 20, 0.07);
  border-radius: 18px;
  box-shadow:
    0 14px 42px rgba(42, 28, 20, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.contact-form__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
  gap: var(--space-xl);
  align-items: start;
}
.aq-contact-flow {
  min-width: 0;
}
.aq-contact-flow__progress {
  display: grid;
  gap: 8px;
  margin: 0 0 var(--space-md);
  color: var(--tekst-l);
  font-size: var(--text-sm);
  font-weight: 500;
}
.aq-contact-flow__bar {
  display: block;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(217, 196, 154, 0.42);
}
.aq-contact-flow__bar span {
  display: block;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: var(--koraal);
  transition: width 0.24s ease;
}
.aq-contact-flow__step {
  margin: 0;
  padding: 0;
  border: 0;
}
.aq-js .aq-contact-flow__step:not(.is-active) {
  display: none;
}
.aq-contact-flow__step[hidden] {
  display: none;
}
.aq-contact-flow__step legend {
  width: 100%;
  margin: 0 0 var(--space-md);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.25;
  color: var(--tekst);
}
.contact-form__trust {
  padding: var(--space-lg);
  border: 1px solid rgba(42, 28, 20, 0.06);
  border-radius: 14px;
  background: rgba(251, 240, 228, 0.58);
}
.contact-form__trust-kicker {
  margin: 0 0 6px;
  color: var(--koraal);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}
.contact-form__trust h3 {
  margin: 0 0 var(--space-sm);
  color: var(--tekst);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.25;
}
.contact-form__trust ul {
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
}
.contact-form__trust li {
  position: relative;
  margin: 0 0 9px;
  padding-left: 18px;
  color: var(--tekst-l);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.contact-form__trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oker);
}
.contact-form__trust-note {
  margin: 0 0 var(--space-sm);
  color: var(--tekst-l);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.contact-form__trust a {
  color: var(--tekst);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--koraal);
}
.form-notice {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--koraal);
  background: var(--zand);
  color: var(--tekst);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.form-notice--success {
  border-left-color: #22c55e;
  animation: aq-success-fade 10s ease forwards;
}
@keyframes aq-success-fade {
  0%   { background: #22c55e; color: #fff; border-left-color: #16a34a; }
  70%  { background: #22c55e; color: #fff; border-left-color: #16a34a; }
  100% { background: var(--zand); color: var(--tekst); border-left-color: var(--oker); }
}
.aq-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.contact-form__intro {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--tekst);
  line-height: 1.35;
  margin: 0 0 var(--space-lg);
}
.form-row {
  margin-bottom: var(--space-md);
}
.form-row label,
.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--tekst);
  margin-bottom: 6px;
}
.form-row label span,
.form-label span {
  color: var(--tekst-ll);
  font-weight: 400;
}
.form-row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-sm);
  border: 1px solid rgba(217, 196, 154, 0.78);
  border-radius: 8px;
  background: rgba(253, 250, 246, 0.90);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--tekst);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--koraal);
  background: var(--wit);
  box-shadow: 0 0 0 3px rgba(212, 97, 74, 0.10);
}
.form-row textarea {
  min-height: 120px;
  resize: vertical;
}
.form-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.form-options--compact {
  grid-template-columns: 1fr 1fr;
}
.form-options label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(217, 196, 154, 0.74);
  border-radius: 8px;
  background: rgba(253, 250, 246, 0.66);
  color: var(--tekst);
  font-size: var(--text-sm);
  line-height: 1.25;
  cursor: pointer;
}
.form-options input {
  flex: 0 0 auto;
  accent-color: var(--koraal);
}
.form-row--check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--tekst-l);
  line-height: 1.5;
}
.form-row--check input {
  margin-top: 2px;
}
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.form-actions--between {
  justify-content: space-between;
}
/* Friendly Captcha + submit naast elkaar (v1.0.6.428-claudeai) */
.aq-fc-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.aq-fc-wrap .frc-captcha {
  border-radius: 6px !important;
  border: 1px solid var(--zand-d) !important;
  overflow: hidden !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
}
.aq-fc-wrap .frc-captcha,
.aq-fc-wrap .frc-captcha > *,
.aq-fc-wrap .frc-captcha .frc-container {
  background: transparent !important;
  box-shadow: none !important;
}
.aq-fc-wrap .frc-captcha .frc-container {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 12px !important;
}
.form-submit {
  background: var(--koraal);
  color: white;
  padding: 14px 32px;
  border: none;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.form-submit:hover {
  background: var(--koraal-d);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(212, 97, 74, 0.18);
}
.form-back {
  padding: 13px 0;
  border: 0;
  background: transparent;
  color: var(--tekst-l);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}
.form-back:hover {
  color: var(--koraal);
}
.form-helper {
  font-size: var(--text-xs);
  color: var(--tekst-ll);
  margin-top: var(--space-sm);
  line-height: 1.5;
}

/* === ZACHTE CTA — persoonlijke meedenk-CTA === */
.soft-cta {
  padding: var(--space-xl) var(--space-xl);
  background: var(--zand);
}
.soft-cta--sand {
  background: var(--zand-d);
}
.soft-cta__inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg) 0;
  border-top: 1px solid rgba(42, 28, 20, 0.12);
  border-bottom: 1px solid rgba(42, 28, 20, 0.12);
}
.soft-cta__eyebrow {
  margin: 0 0 8px;
  color: var(--koraal);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}
.soft-cta__title {
  margin: 0;
  color: var(--tekst);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.15;
}
.soft-cta__body {
  max-width: 680px;
  margin: var(--space-xs) 0 0;
  color: var(--tekst-l);
  font-size: var(--text-base);
  line-height: 1.65;
}
.soft-cta__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.soft-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 13px 22px;
  border-radius: 4px;
  background: var(--koraal);
  color: var(--wit);
  font-size: var(--text-sm);
  font-weight: 600;
}
.soft-cta__button:hover {
  background: var(--koraal-d);
  color: var(--wit);
}
.soft-cta__phone {
  display: grid;
  gap: 2px;
  color: var(--tekst);
  font-size: var(--text-sm);
  line-height: 1.25;
}
.soft-cta__phone span {
  color: var(--tekst-ll);
}
.soft-cta__phone strong {
  font-weight: 600;
  border-bottom: 1px solid var(--koraal);
}

@media (max-width: 820px) {
  .contact-form__layout,
  .form-row--split {
    grid-template-columns: 1fr;
  }
  .contact-form__trust {
    padding: var(--space-md);
    border: 1px solid rgba(42, 28, 20, 0.06);
  }
  .soft-cta__inner {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .soft-cta__actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .form-options,
  .form-options--compact {
    grid-template-columns: 1fr;
  }
  .form-actions,
  .form-actions--between {
    align-items: stretch;
    flex-direction: column;
  }
  .form-submit {
    width: 100%;
  }
  .soft-cta {
    padding: var(--space-lg) var(--space-md);
  }
  .soft-cta__button {
    width: 100%;
  }
}

/* === KLACHT-CHIPS (op pijlerpagina's) === */
.klacht-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-md) 0 var(--space-lg);
}
.klacht-chip {
  display: inline-block;
  padding: 7px 14px;
  background: var(--zand);
  color: var(--tekst);
  border: 1px solid var(--zand-dd);
  border-radius: 100px;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: all 0.2s;
}
.klacht-chip:hover {
  background: var(--koraal);
  color: white;
  border-color: var(--koraal);
}

/* === TAALTOGGLE IN HEADER === */
.language-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tekst-ll);
  margin-left: 16px;
}
.language-toggle a {
  color: var(--tekst-ll);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 3px;
  transition: all 0.2s;
}
.language-toggle a.active {
  color: var(--koraal);
  font-weight: 500;
}
.language-toggle a:hover:not(.active) {
  color: var(--tekst);
}
.language-toggle__divider {
  color: var(--zand-dd);
}

/* === NAV TOGGLE (hamburger for mobile) === */
.site-nav-toggle {
  display: none;
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  position: relative;
  z-index: 101;
}
.site-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--tekst);
  transition: transform 0.2s, opacity 0.2s;
}
.site-nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.site-nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1000px) {
  .site-nav-toggle {
    display: flex;
  }
  .site-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: var(--zand);
    padding: 100px 40px 40px;
    box-shadow: -8px 0 32px rgba(0,0,0,0.08);
    transition: right 0.3s;
    z-index: 100;
    overflow-y: auto;
  }
  .site-nav.is-open {
    right: 0;
  }
  .site-nav ul {
    flex-direction: column;
    gap: 0;
  }
  .site-nav a {
    font-size: 17px;
    color: var(--tekst);
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid rgba(42, 28, 20, 0.10);
  }

  /* v1.0.6.51 — overrides voor .page-hero en .content-container vervallen,
     padding schaalt nu fluid via var(--space-2xl) en var(--space-xl). */
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 24px;
  }
  .contact-info,
  .contact-form {
    padding: 28px 24px;
  }
  .inline-cta {
    padding: 28px 24px;
  }
  .klacht-chips {
    margin: 18px 0 24px;
  }
}

/* === SCROLL REVEAL === */
section {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  section:not(.hero) {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  section.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   SCROLL ANIMATIONS — Fine-grained reveal + stagger (v1.0.6.71)
   Aanvullend op het bestaande section-level systeem hierboven.
   - .aq-reveal           : element met fade-up reveal
   - .is-inview           : geactiveerd door IntersectionObserver
   - --aq-delay           : stagger-delay via inline style vanuit JS
   - .aq-parallax         : element met parallax-scroll (alleen desktop)
   - .aq-count            : cijfer-element met count-up animatie
============================================================ */
.aq-reveal {
  opacity: 1;
  transform: none;
}
html.aq-js .aq-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--aq-delay, 0ms);
  will-change: opacity, transform;
}
html.aq-js .aq-reveal.is-inview {
  opacity: 1;
  transform: none;
}

/* v1.0.6.278 — fix hover-transform conflict.
   Cards die zowel .aq-reveal als een eigen :hover translateY hebben
   verloren hun hover-lift na scroll-reveal omdat
   "html.aq-js .aq-reveal.is-inview { transform: none }" specificity
   (0,3,1) wint van ".beh-card:hover" (0,2,0). Specificity-match
   herstelt de hover-lift voor alle relevante card-types. */
html.aq-js .aq-reveal.beh-card:hover,
html.aq-js .aq-reveal.beh-card:focus-visible {
  transform: translateY(-6px);
}
html.aq-js .aq-reveal.klacht:hover {
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  html.aq-js .aq-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Parallax-target: smooth transform zonder transition (JS zet direct via rAF) */
html.aq-js .aq-parallax {
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  html.aq-js .aq-parallax {
    transform: none !important;
  }
}

/* Count-up: voorkom layout-shift door tabular-nums */
.aq-count {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   ICONEN (v1.0.2) — Inline SVG in Phosphor-Regular stijl
   Gebruikt via aq_icon( 'slug' ) helper in PHP-templates.
============================================================ */

.aq-icon {
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

.aq-icon--text {
  font-family: var(--font-body);
  line-height: 1;
}

/* ============================================================
   v1.0.6 — ACUPUNCTUUR-PAGINA (gespiegelde hero, pullquotes,
   compactere secties)

   v1.0.6.74: Token-migratie. 4 hardcoded font-sizes en 11
   spacings vervangen door fluid tokens (clamp). Body-prose
   17px en pullquote 20px bewust gelaten om mobile-leesbaarheid
   niet te verkleinen.
============================================================ */

/* --------------------------------------------------------
   ACU-HERO — foto links (schuin), tekst rechts op zand
   GESPIEGELD t.o.v. homepage-hero
-------------------------------------------------------- */
.acu-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 720px;
  max-height: 780px;
  background: var(--zand);
  position: relative;
  overflow: hidden;
}

/* FOTO-LAAG links (gespiegeld t.o.v. cesar-hero__right)
   v1.0.6.170: refactor — was grid-cel met simpele schuine clip-path,
   wordt absolute over hele hero met dubbel-gespiegelde S-curve.
   Foto loopt bovenin door over de tekst-kolom rechts (bovenste foto-zone
   tot x=0.6026, onderste tot x=0.3974). Polygon-fallback voor oude browsers. */
.acu-hero__left {
  position: absolute;
  inset: 0;
  background: var(--tekst);
  overflow: hidden;
  z-index: 1;
  clip-path: polygon(39.74% 100%, 0 100%, 0 0, 60.26% 0); /* fallback */
  clip-path: url(#acu-hero-curve);
}

.acu-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* v1.0.6.150: object-position en transform worden inline gezet vanuit
     ACF-velden hero_focus_x, hero_focus_y, hero_zoom. */
  object-position: 50% 50%;
  z-index: 1;
}

.acu-hero__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(61,42,32,0.25) 0%, rgba(92,61,46,0.15) 40%, rgba(42,28,20,0.5) 100%);
  z-index: 2;
}

/* Quote: linksonder binnen smaller onder-deel van foto (40% breedte onderaan).
   v1.0.6.170: was bottom-left van halve hero-cel (15% right voor schuine rand);
   nu absolute in hele hero, dus left/right tellen in % paginabreedte.
   Foto onderin loopt tot 39.74% — quote eindigt vóór die rand. */
.acu-hero__quote {
  position: absolute;
  bottom: 48px;
  left: 48px;
  right: 65%; /* quote-blok eindigt op 35% paginabreedte, ruim binnen 39.74% foto-onderkant */
  z-index: 3;
}

.acu-hero__quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-style: italic;
  font-weight: 300;
  color: rgba(251, 240, 228, 0.92);
  line-height: 1.4;
  border-left: 2px solid var(--koraal);
  padding-left: 18px;
  margin: 0 0 var(--space-xs);
}

.acu-hero__quote cite {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(251, 240, 228, 0.55);
  font-style: normal;
  padding-left: 20px;
}

/* TEKST-KOLOM rechts
   v1.0.6.170: z-index 2 zodat tekst boven foto-laag staat (foto loopt
   nu absolute over hele hero, deels onder tekst-kolom door). */
.acu-hero__right {
  display: flex;
  align-items: center;
  /* v1.0.6.420 — padding aangepast: top kleiner (hoger geplaatst),
     left groter (verder van foto-rand). Was 80px 64px. */
  padding: 64px 64px 80px 100px;
  position: relative;
  z-index: 2;
  grid-column: 2; /* tekst-kolom blijft rechts ondanks dat __left nu absolute is */
}

.acu-hero__right-inner {
  max-width: 540px;
}

/* v1.0.6.139 — Acu-hero tekst-classes verwijderd.
   Eerder hadden .acu-hero__eyebrow, .acu-hero__title en .acu-hero__lead
   eigen styling die afweek van de standaard sub-pagina-typografie.
   Resultaat: visuele inconsistentie, en (vermoedelijk) afwijkende glyph-
   rendering voor de hoofdletter "A" van "Acupunctuur".
   Nu erft Acupunctuur exact dezelfde typografie als alle andere sub-
   pagina's (Ervaringen, Klachten, Zwangerschap, etc.) via de standaard
   .page-hero__eyebrow / .page-hero__title / .page-hero__lead classes.
   .acu-hero__actions blijft staan omdat dat de buttons-layout regelt.

/* v1.0.6.414/415 — acu-hero typografie volledig gelijk aan cesar-hero
   voor visuele coherentie tussen de twee pijler-pagina's. Cormorant italic
   blijft behouden voor de "echte" page-hero (tarieven, FAQ, etc.) maar past
   niet bij de pijler-hero met grote foto-kolom. */
.acu-hero .page-hero__lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  margin: 0 0 var(--space-lg);
}
/* v415 — eyebrow size + lijn matchen cesar (was --text-xs / 28px) */
.acu-hero .page-hero__eyebrow {
  font-size: var(--text-sm);
}
.acu-hero .page-hero__eyebrow::before {
  width: 32px;
  margin-right: 4px;
}

.acu-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

/* --------------------------------------------------------
   ACU-SECTION — compactere sectie-wrappers
   Meerdere blokken onder één achtergrond-kleur = geen padding-dubbeling
-------------------------------------------------------- */
.acu-section {
  padding: 80px 0;
}

.acu-section--zand {
  background-color: var(--zand);
  background-image:
    linear-gradient(180deg, rgba(255, 250, 243, 0.72) 0%, rgba(251, 240, 228, 0.72) 48%, rgba(245, 228, 206, 0.58) 100%),
    repeating-linear-gradient(90deg, rgba(42, 28, 20, 0.012) 0 1px, transparent 1px 10px);
}

.acu-section--zand-d {
  background-color: var(--zand-d);
  background-image:
    linear-gradient(135deg, rgba(255, 248, 238, 0.42) 0%, rgba(236, 216, 180, 0.78) 50%, rgba(217, 196, 154, 0.36) 100%),
    repeating-linear-gradient(0deg, rgba(42, 28, 20, 0.014) 0 1px, transparent 1px 12px);
  border-top: 1px solid rgba(42, 28, 20, 0.045);
  border-bottom: 1px solid rgba(42, 28, 20, 0.045);
}

.acu-section--bruin {
  position: relative;
  background:
    linear-gradient(118deg, rgba(255, 248, 238, 0.08) 0%, rgba(255, 248, 238, 0.02) 38%, rgba(0, 0, 0, 0.20) 100%),
    var(--hout-overlay-sterk),
    var(--hout-img) center/cover no-repeat,
    var(--tekst);
  color: var(--zand);
  padding: 72px 0; /* iets minder dan zand-secties, voelt compacter */
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 238, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.acu-section--bruin::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at 88% 18%, rgba(255, 248, 238, 0.11) 0%, rgba(255, 248, 238, 0.035) 30%, transparent 62%),
    repeating-linear-gradient(40deg, rgba(255, 248, 238, 0.022) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(130deg, rgba(0, 0, 0, 0.022) 0 1px, transparent 1px 8px);
  opacity: 0.58;
  mix-blend-mode: soft-light;
}

.acu-container {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Interne blokken binnen een sectie — hun onderlinge afstand wordt
   hier bepaald i.p.v. door sectie-padding-stapeling */
.acu-block {
  margin-bottom: var(--space-xl);
}

.acu-block:last-child {
  margin-bottom: 0;
}

/* Typografie binnen acu-secties */
.acu-block h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--tekst);
  margin: 0 0 var(--space-md);
}

.acu-block h2 em {
  font-style: italic;
  color: var(--koraal);
}

.acu-block h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--tekst);
  margin: var(--space-lg) 0 var(--space-sm);
  letter-spacing: 0;
}

.acu-block h3:first-child {
  margin-top: 0;
}

.acu-block p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--tekst-l);
  margin: 0 0 18px;
}

.acu-block p:last-child {
  margin-bottom: 0;
}

/* Donker blok — overrides */
.acu-section--bruin .acu-block h2 {
  color: var(--zand);
}

.acu-section--bruin .acu-block h2 em {
  color: var(--oker);
}

.acu-section--bruin .acu-block p {
  color: rgba(251,240,228,0.85);
}

.acu-section--bruin .acu-block strong {
  color: var(--zand);
}

.acu-section--bruin .acu-block a {
  color: var(--oker);
}

/* --------------------------------------------------------
   ACU-PULLQUOTE — italic rustpunten tussen content-blokken
-------------------------------------------------------- */
.acu-pullquote {
  margin: 72px 0;
  padding: 0 var(--space-md);
  border-left: 3px solid var(--koraal);
  text-align: left;
}

.acu-pullquote--top {
  margin-top: 0;
}

.acu-pullquote blockquote {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 32px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;
  color: var(--tekst);
  margin: 0;
  letter-spacing: 0;
}

/* --------------------------------------------------------
   CONTENT-LINK — "Lees meer over..." inline
-------------------------------------------------------- */
.content-link {
  margin-top: 20px;
}

.content-link a {
  color: var(--koraal);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.content-link a:hover {
  border-bottom-color: var(--koraal);
}

/* Donker-blok content-link aangepast */
.acu-section--bruin .content-link a {
  color: var(--oker);
}

/* --------------------------------------------------------
   RESPONSIVE
-------------------------------------------------------- */
@media (max-width: 1000px) {
  .acu-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  /* Op mobiel foto BOVEN, tekst eronder — kantel volgorde via order
     v1.0.6.170: position absolute terugzetten naar relative want
     op mobile zijn er geen overlappende lagen meer. */
  .acu-hero__left {
    position: relative;
    inset: auto;
    order: -1;
    min-height: 380px;
    clip-path: none; /* op mobiel geen S-curve — eet te veel ruimte op */
  }
  .acu-hero__right {
    z-index: auto;
    grid-column: auto;
    padding: 56px 32px;
  }
  .acu-hero__quote {
    bottom: 32px;
    left: 32px;
    right: 32px;
  }
  .acu-section {
    padding: var(--space-xl) 0;
  }
  .acu-pullquote {
    margin: var(--space-xl) 0;
  }
  .acu-block {
    margin-bottom: 44px;
  }
}

@media (max-width: 640px) {
  .acu-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .acu-hero__actions a {
    text-align: center;
  }
  .acu-section {
    padding: 44px 0;
  }
  .acu-container {
    padding: 0 20px;
  }
  .acu-pullquote {
    margin: var(--space-lg) 0;
    padding: 0 16px;
  }
  .acu-pullquote blockquote {
    font-size: 20px;
  }
}

/* ============================================================
   TARIEVEN PAGINA — v1.0.6.4
   Extra componenten bovenop bestaande .page-hero,
   .content-container, .tarief-tabel, .callout en .faq

   v1.0.6.79: Token-migratie. 2 hardcoded font-sizes en 7
   spacings vervangen door fluid tokens. Body 16px (praktisch-
   item p) en titel 24px (tarieven-groep__titel) bewust
   gelaten om mobile-leesbaarheid te beschermen resp. geen
   exact token-match.
============================================================ */

/* Tariefgroep — wrapper rond subkop + tabel */
.tarieven-groep {
  margin-top: 40px;
}
.tarieven-groep:first-of-type {
  margin-top: 28px;
}
.tarieven-groep__titel {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--tekst);
  letter-spacing: 0;
  margin: 0 0 var(--space-sm);
}
.tarieven-groep .tarief-tabel {
  margin-top: 0;
}

/* Praktisch-grid — 4 kaartjes met praktische info */
.praktisch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-2xl);
  margin: 24px 0 36px;
}
.praktisch-item h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--tekst);
  letter-spacing: 0;
  margin: 0 0 var(--space-xs);
}
.praktisch-item p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tekst-l);
  margin: 0 0 var(--space-xs);
}
.praktisch-item p:last-child {
  margin-bottom: 0;
}

/* AGB-codes-lijst — simpele vertical list zonder bullets */
.agb-lijst {
  list-style: none;
  padding: 0;
  margin: var(--space-xs) 0 0;
}
.agb-lijst li {
  padding: 4px 0;
  font-size: var(--text-base);
  color: var(--tekst);
}
.agb-lijst li strong {
  font-weight: 500;
}

/* Disclaimer — kleine cursieve tekst onderaan pagina */
.disclaimer-tekst {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--tekst-ll);
  margin: var(--space-2xl) 0 0;
  font-style: italic;
  max-width: 760px;
}

/* Responsive — onder 768px */
@media (max-width: 768px) {
  .tarieven-groep {
    margin-top: 32px;
  }
  .tarieven-groep__titel {
    font-size: 21px;
  }
  .praktisch-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .praktisch-item h3 {
    font-size: 20px;
  }
  .disclaimer-tekst {
    font-size: 12px;
    margin-top: 36px;
  }
}

/* === PAGE-HERO met achtergrond-foto (optioneel, via ACF 'hero_foto') === */
.page-hero--foto {
  /* v1.0.6.413 — expliciete shorthand om de hout-textuur uit .page-hero
     te overrulen. De foto wordt via __bg div geladen erboven. */
  background: var(--tekst);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 120px 64px 100px;
}

/* v1.0.6.117 — bg-wrapper div voor zoom-support (transform scale).
   Background-image staat op deze div (via inline style) zodat scale
   alleen de foto raakt, niet de tekst. */
.page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.page-hero--foto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(42, 28, 20, 0.72) 0%,
    rgba(42, 28, 20, 0.55) 55%,
    rgba(42, 28, 20, 0.32) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.page-hero--foto .page-hero__inner {
  position: relative;
  z-index: 2;
}
.page-hero--foto .page-hero__eyebrow {
  color: var(--koraal-l);
}
.page-hero--foto .page-hero__eyebrow::before {
  background: var(--koraal-l);
}
.page-hero--foto .page-hero__title {
  color: var(--wit);
}
.page-hero--foto .page-hero__title em {
  color: var(--koraal-l);
}
.page-hero--foto .page-hero__lead {
  color: var(--zand-d);
}

@media (max-width: 768px) {
  .page-hero--foto {
    padding: 80px 28px 64px;
  }
  .page-hero--foto::before {
    background: linear-gradient(
      to bottom,
      rgba(42, 28, 20, 0.50) 0%,
      rgba(42, 28, 20, 0.70) 100%
    );
  }
}

/* === PAGE-HERO met diagonale split-foto (Aanpak-pagina, v1.0.6.113) === */
.page-hero--split {
  /* v1.0.6.413 — expliciete shorthand om hout-textuur uit .page-hero te overrulen */
  background: var(--tekst);
  padding: 120px 64px 100px;
  position: relative;
  /* v1.0.6.207 — overflow:hidden hersteld (was visible in v206 voor extension).
     Tapered S-curve blijft nu binnen de hero, dus geen overflow nodig. */
  overflow: hidden;
  /* v1.0.6.205 — gelijk aan .page-hero--foto zodat Aanpak-hero dezelfde
     visuele hoogte heeft als de andere foto-hero's. */
  min-height: 620px;
}
/* v1.0.6.175 — SVG S-curve clipPath vervangt diagonale polygon.
   Beide foto-divs zijn position:absolute;inset:0 zodat objectBoundingBox
   de volle hero-breedte beslaat — identiek aan de cesar-hero__right aanpak.
   Hierdoor valt de S-curve op exact 50% van de pagina (Top-x=0.6026, Bottom-x=0.3974). */
.page-hero__split-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__split-bg-left,
.page-hero__split-bg-right {
  position: absolute;
  inset: 0;
  background-color: var(--bruin-mid);
  overflow: hidden;
}
.page-hero__split-bg-img {
  position: absolute;
  /* v1.0.6.209 — bg-img-divs per zone HALF-BREED (60% i.p.v. full
     hero) zodat focus_x daadwerkelijk werkt. De oude inset:0 maakte
     het bg-frame ~2.26 aspect (full hero), wat veel breder is dan
     vrijwel alle landscape foto's. Cover schaalde dan altijd op
     breedte → alleen verticale crop, geen horizontale ruimte voor
     focus_x. Met 60% breed wordt het frame 1.36 aspect — landscape
     foto's met aspect > 1.36 (16:9 = 1.78, 16:10 = 1.6, etc.)
     krijgen nu wel horizontale overcrop, en focus_x werkt zichtbaar.
     60% is exact genoeg om de S-curve op de top (x=60.26%) te dekken
     zonder gat. ClipPath op .split-bg-left/right regelt nog steeds
     welke zone zichtbaar is. */
  top: 0;
  bottom: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  pointer-events: none;
  will-change: transform;
}
.page-hero__split-bg-left .page-hero__split-bg-img {
  /* Linker bg-img: van 0% tot 60% van hero-breedte */
  left: 0;
  right: 40%;
}
.page-hero__split-bg-right .page-hero__split-bg-img {
  /* Rechter bg-img: van 40% tot 100% van hero-breedte
     (40% start om S-curve onderkant op x=39.74% volledig te dekken) */
  left: 40%;
  right: 0;
}
.page-hero__split-bg-left {
  clip-path: polygon(0 0, 60.26% 0, 39.74% 100%, 0 100%); /* polygon fallback */
  clip-path: url(#aanpak-split-left);
}
.page-hero__split-bg-right {
  clip-path: polygon(60.26% 0, 100% 0, 100% 100%, 39.74% 100%); /* polygon fallback */
  clip-path: url(#aanpak-split-right);
}
.page-hero--split::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(42, 28, 20, 0.78) 0%,
    rgba(42, 28, 20, 0.62) 50%,
    rgba(42, 28, 20, 0.42) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.page-hero--split .page-hero__inner {
  position: relative;
  /* v1.0.6.205 — was z-index 2; opgeschoven naar 3 zodat de
     S-curve-lijn (z-index 2) onder de tekst-content valt en de
     letters van de titel niet doorsnijdt. */
  z-index: 3;
}

/* v1.0.6.205 — Sierlijke koraal-lijn op de S-curve.
   v1.0.6.207 — Tapered fill-shape die EXACT de clipPath-Bezier-segmenten
   volgt + sierlijke krullende uitlopers binnen de hero. Resultaat:
   geen menu-overlap, geen scroll-issue, calligrafisch dik in midden,
   dun uitlopend naar de uiteinden. Zie taper3.py voor de wiskunde. */
.page-hero__split-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* v1.0.6.207 — overflow:visible zodat de tapering een paar pixels
     boven y=0 / onder y=H mag uitsteken (door halve-breedte op
     uitloperuiteinden). Met overflow:hidden op .page-hero--split
     wordt dat alsnog netjes geclipt op de hero-rand. */
  overflow: visible;
  /* v1.0.6.207 — z-index 2 (was 101): boven de foto's en gradient (0/1)
     maar ONDER tekst-content (3) en site-header (100). Bij scrollen
     scrolt de SVG mee met de hero en verdwijnt netjes onder de header. */
  z-index: 2;
  pointer-events: none;
}
.page-hero--split .page-hero__eyebrow {
  color: var(--koraal-l);
}
.page-hero--split .page-hero__eyebrow::before {
  background: var(--koraal-l);
}
.page-hero--split .page-hero__title {
  color: var(--wit);
}
.page-hero--split .page-hero__title em {
  color: var(--koraal-l);
}
.page-hero--split .page-hero__slogan,
.page-hero--split .page-hero__lead {
  color: var(--zand-d);
}

/* v1.0.6.306 — Aanpak-hero: de Kinesis-lijn is weer de volle,
   exacte beeldovergang tussen de twee foto's. De tekst wordt opgelost
   als smallere redactionele leeskolom links, niet door de lijn te
   verschuiven of transparant te maken.
   v1.0.6.308: globale overlay herverdeeld: linker foto minder zwaar
   verdonkerd, rechter foto krijgt juist een subtiele warme film.
   v1.0.6.310: rechter foto iets donkerder gezet zonder links te raken.
   v1.0.6.312: rechterboven- en rechteronderhoek extra warm gevignetteerd. */
.aanpak__hero.page-hero--split::before {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(42, 28, 20, 0.26) 0%, rgba(42, 28, 20, 0.16) 28%, rgba(42, 28, 20, 0) 56%),
    radial-gradient(ellipse at 100% 100%, rgba(42, 28, 20, 0.30) 0%, rgba(42, 28, 20, 0.18) 30%, rgba(42, 28, 20, 0) 58%),
    linear-gradient(
      90deg,
      rgba(42, 28, 20, 0.58) 0%,
      rgba(42, 28, 20, 0.48) 31%,
      rgba(42, 28, 20, 0.34) 49%,
      rgba(42, 28, 20, 0.37) 100%
    );
}
.aanpak__hero.page-hero--split::after {
  content: '';
  position: absolute;
  left: clamp(72px, 8vw, 150px);
  top: 15%;
  bottom: 13%;
  width: min(560px, 39vw);
  border-radius: 999px 52px 52px 999px;
  background:
    radial-gradient(ellipse at 28% 50%, rgba(42, 28, 20, 0.50) 0%, rgba(42, 28, 20, 0.30) 48%, rgba(42, 28, 20, 0) 72%),
    linear-gradient(90deg, rgba(42, 28, 20, 0.24), rgba(42, 28, 20, 0));
  filter: blur(0.2px);
  z-index: 1;
  pointer-events: none;
}
.aanpak__hero.page-hero--split .page-hero__inner {
  max-width: 500px;
  margin-left: clamp(120px, 10vw, 210px);
  margin-right: auto;
}
.aanpak__hero.page-hero--split .page-hero__title {
  max-width: 500px;
  font-size: clamp(56px, 6.4vw, 90px);
  text-wrap: balance;
}
.aanpak__hero.page-hero--split .page-hero__title em {
  color: var(--koraal);
}
.aanpak__hero.page-hero--split .page-hero__lead {
  max-width: 500px;
}
.aanpak__hero .page-hero__split-line {
  opacity: 1;
  transform: none;
  transform-origin: center center;
}
.aanpak__hero .page-hero__split-line path {
  fill: var(--koraal);
}

@media (max-width: 1180px) {
  .aanpak__hero.page-hero--split .page-hero__inner {
    max-width: 420px;
    margin-left: 4vw;
  }
  .aanpak__hero .page-hero__split-line {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 768px) {
  .page-hero--split {
    padding: 80px 28px 64px;
    /* v1.0.6.205 — gelijk aan .page-hero--foto mobile (regel 7472). */
    min-height: 480px;
  }
  /* v1.0.6.205 — S-curve lijn niet relevant op mobiel: split-bg-right
     wordt verborgen, dus er is geen S-curve om te visualiseren. */
  .page-hero__split-line {
    display: none;
  }
  /* Op mobile: beide absolute divs worden visible, __right verborgen.
     Alleen acu-foto (links) getoond op volle breedte zonder clip. */
  .page-hero__split-bg-left {
    clip-path: none;
  }
  /* v1.0.6.212 — fix: de desktop-regel left:0; right:40% maakt de
     bg-img maar 60% breed. Op mobiel waar de hele linker zone full-
     bleed moet zijn, overschrijven naar right:0 zodat de foto van
     0% tot 100% loopt. Anders krijg je een smalle 60%-strook foto
     met rest donker bruin (zichtbare split-bg-left container achter-
     grond) op de aanpak-pagina mobile hero. */
  .page-hero__split-bg-left .page-hero__split-bg-img {
    right: 0;
  }
  .page-hero__split-bg-right {
    display: none;
  }
  .page-hero--split::before {
    background: linear-gradient(
      to bottom,
      rgba(42, 28, 20, 0.55) 0%,
      rgba(42, 28, 20, 0.75) 100%
    );
  }
  .aanpak__hero.page-hero--split::after {
    display: none;
  }
  .aanpak__hero.page-hero--split .page-hero__inner {
    max-width: none;
    margin-left: auto;
  }
}

/* === OVER-SECTIE HOMEPAGE: mobile-hoogte voor foto (v1.0.6.6) ===
   Fix: op mobile krimpt .over__visual tot de hoogte van het badge,
   waardoor de absolute-positioned foto bijna onzichtbaar wordt.
   Deze regel geeft de visual expliciete ruimte op mobile schermen. */
@media (max-width: 1000px) {
  .over__visual {
    min-height: 460px;
  }
  .over__image {
    object-position: center 25%;
  }
}

@media (max-width: 640px) {
  .over__visual {
    min-height: 380px;
  }
}

/* ============================================================
   JURIDISCHE PAGINA'S (v1.0.6.17)
   Template: page-templates/template-juridisch.php
   Gedeeld door: Privacyverklaring, Klachtenregeling, Algemene Voorwaarden

   Concept: "document op een donkerbruine tafel"
   - Hele pagina: diepbruin (var(--tekst))
   - AQ-watermerk als subtiel brand-element (zoals homepage CTA)
   - Hero: transparant, laat donkerbruin door — crème tekst + koraal accent
   - Content: witte "paper sheet" zweeft op donker met zachte schaduw

   v1.0.6.81: Token-migratie. 3 hardcoded font-sizes en 8
   spacings vervangen door fluid tokens. Body-prose 17px,
   eyebrow 12px, th-label 12px, h4 0.875rem (krimp-risico) en
   eigen juridisch-type-scale (h2 1.85rem, h3 1.35rem,
   blockquote 1.2rem, title clamp) bewust intact gelaten.
============================================================ */

/* ============================================================
   JURIDISCHE PAGINA'S (Privacyverklaring, Klachtenregeling,
   Algemene voorwaarden) — v1.0.6.391 redesign.
   Was: donkere hout-textuur met perkament-container (te theatraal,
        slechte leesbaarheid, breekt in PDF/print).
   Wordt: lichte zand-pagina met behouden karakter (display titel
        met italic accent, eyebrow streepjes, gouden hairline,
        subtiele AQ-watermerk in koraal). Nuchter + leesbaar +
        print-vriendelijk, met genoeg eigenheid om niet kaal te zijn.
   ============================================================ */

.juridisch {
  position: relative;
  background-color: var(--zand);
  padding: 0 0 clamp(64px, 9vw, 120px);
  overflow: hidden;
}

/* Subtiele logo-watermerk — koraal op zand, lichte aanwezigheid (v391: tekst-AQ
   vervangen door echte logo SVG via mask-image, opacity 4.5%) */
.juridisch::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(280px, 38vw, 480px);
  height: clamp(280px, 38vw, 480px);
  background-color: var(--koraal);
  -webkit-mask-image: url('assets/images/logo.svg');
  mask-image: url('assets/images/logo.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
}

/* --- Hero: licht, gecentreerd, geen text-shadow --- */
.juridisch__hero {
  position: relative;
  z-index: 2;
  padding: clamp(56px, 8vw, 96px) 32px clamp(36px, 5vw, 56px);
  background: transparent;
  text-align: center;
}

.juridisch__hero-inner {
  max-width: 760px;
  margin: 0 auto;
}

.juridisch__eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--koraal);
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.juridisch__eyebrow::before,
.juridisch__eyebrow::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--koraal);
  opacity: 0.5;
}

.juridisch__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--tekst);
  margin: 0 0 24px;
  position: relative;
}

.juridisch__title em {
  font-style: italic;
  color: var(--koraal);
  font-weight: 400;
}

/* Dunne gouden accent-lijn onder de titel (gradient fade naar transparant) */
.juridisch__title::after {
  content: '';
  display: block;
  width: 80px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--oker), transparent);
  margin: var(--space-xl) auto 0;
  opacity: 0.7;
}

.juridisch__meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--tekst-ll);
  margin: 0;
  opacity: 0.85;
}

/* --- Content-container: smalle leeskolom, geen perkament-effect --- */
.juridisch__container {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  background: transparent;
  padding: clamp(32px, 5vw, 56px) 24px clamp(48px, 7vw, 80px);
  border-radius: 0;
  box-shadow: none;
}

/* --- Intro --- */
.juridisch__intro {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--tekst);
  margin-bottom: var(--space-2xl);
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(196, 140, 16, 0.25);
}

.juridisch__intro p {
  margin: 0 0 18px;
}

.juridisch__intro p:last-child {
  margin-bottom: 0;
}

/* --- Hoofdinhoud --- */
.juridisch__body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--tekst);
}

.juridisch__body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--koraal);
  margin: 56px 0 18px;
}

.juridisch__body h2:first-child {
  margin-top: 0;
}

.juridisch__body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--tekst);
  margin: 36px 0 12px;
}

.juridisch__body h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.825rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oker-tekst);
  margin: 28px 0 10px;
}

.juridisch__body p {
  margin: 0 0 18px;
  color: var(--tekst);
}

.juridisch__body a {
  color: var(--koraal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease-out);
}

.juridisch__body a:hover {
  color: var(--koraal-d, #B14A33);
}

.juridisch__body strong {
  font-weight: 600;
  color: var(--tekst);
}

.juridisch__body em {
  font-style: italic;
}

/* --- Lijsten --- */
.juridisch__body ul,
.juridisch__body ol {
  margin: 0 0 var(--space-lg);
  padding-left: 24px;
  color: var(--tekst);
}

.juridisch__body li {
  margin-bottom: var(--space-xs);
}

.juridisch__body li:last-child {
  margin-bottom: 0;
}

.juridisch__body li strong:first-child {
  color: var(--tekst);
}

/* --- Tabellen — subtiel, leesbaar op zand --- */
.juridisch__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: var(--text-base);
  background: transparent;
  border-top: 1px solid rgba(196, 140, 16, 0.4);
  border-bottom: 1px solid rgba(196, 140, 16, 0.4);
}

.juridisch__body table th,
.juridisch__body table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(196, 140, 16, 0.18);
  color: var(--tekst);
  background: transparent;
}

.juridisch__body table th {
  background: rgba(236, 216, 180, 0.45); /* zand-d met opacity */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst);
  border-bottom: 1px solid rgba(196, 140, 16, 0.5);
}

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

/* --- Overige typografie --- */
.juridisch__body blockquote {
  border-left: 3px solid var(--oker);
  padding: 8px 0 8px 24px;
  margin: 28px 0;
  font-style: italic;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--tekst);
}

.juridisch__body hr {
  border: none;
  border-top: 1px solid rgba(196, 140, 16, 0.25);
  margin: var(--space-xl) 0;
}

/* --- Footer-links voor juridische pagina's (oude regels, behouden) --- */
.site-footer__bottom .footer-juridisch {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--tekst-ll);
}

.site-footer__bottom .footer-juridisch a {
  color: var(--tekst-ll);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}

.site-footer__bottom .footer-juridisch a:hover {
  color: var(--koraal);
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .juridisch__container {
    margin: 0 16px;
    padding: 32px 16px 56px;
  }
}

@media (max-width: 768px) {
  .juridisch::before {
    width: 240px;
    height: 240px;
  }
  .juridisch__intro {
    font-size: 16px;
    margin-bottom: 32px;
    padding-bottom: 24px;
  }
  .juridisch__body {
    font-size: 16px;
  }
  .juridisch__body h2 {
    font-size: 1.4rem;
    margin: 40px 0 14px;
  }
  .juridisch__body h3 {
    font-size: 1.15rem;
    margin: 28px 0 10px;
  }
  .juridisch__body table {
    font-size: 14px;
  }
  .juridisch__body table th,
  .juridisch__body table td {
    padding: 10px 12px;
  }
  .juridisch__body table th {
    font-size: 11px;
  }
}

/* --- Print: optimale uitvoer voor afdrukken/PDF --- */
@media print {
  .juridisch {
    background: white;
    padding: 0;
  }
  .juridisch::before {
    display: none;
  }
  .juridisch__hero {
    padding: 24px 0 16px;
    page-break-after: avoid;
  }
  .juridisch__title {
    color: #000;
    font-size: 28px;
  }
  .juridisch__title em {
    color: #555;
  }
  .juridisch__title::after {
    background: #999;
    margin-top: 16px;
  }
  .juridisch__eyebrow {
    color: #555;
  }
  .juridisch__eyebrow::before,
  .juridisch__eyebrow::after {
    background: #999;
  }
  .juridisch__container {
    max-width: 100%;
    padding: 0;
  }
  .juridisch__body {
    color: #000;
    font-size: 11pt;
    line-height: 1.5;
  }
  .juridisch__body h2 {
    color: #000;
    font-style: normal;
    font-size: 16pt;
    page-break-after: avoid;
    margin: 24px 0 8px;
  }
  .juridisch__body h3 {
    font-size: 12pt;
    page-break-after: avoid;
  }
  .juridisch__body a {
    color: #000;
    text-decoration: underline;
  }
  .juridisch__body table {
    page-break-inside: avoid;
  }
  .juridisch__body table th {
    background: #eee !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* =========================================================
   AANPAK PAGINA (v1.0.6.19) — "Van naald tot beweging"
   USP-pagina met twee-sporen-uitleg en synergie-sectie

   v1.0.6.78: Token-migratie. 1 hardcoded font-size en 16
   spacings vervangen door fluid tokens over beide aanpak-
   blokken (r2954-3167 + r3504-3685). Body-prose 17px,
   body 16px en caption 12px bewust gelaten om mobile-
   leesbaarheid te beschermen. Eigen clamp()-ranges
   (synergie-quote, stap-nummer) blijven intact.
   ========================================================= */

/* ========== Sectie-labels & titels ==========
   Globale definities staan in de Section-labels block bovenaan
   style.css (v1.0.6.56). Dubbele definitie verwijderd. */

/* ========== 2. INTRO ========== */
.aanpak-intro {
  background-color: var(--zand);
  padding: 96px 24px 80px;
}
.aanpak-intro__inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.aanpak-intro__inner .section-title {
  margin-bottom: var(--space-xl);
}
.aanpak-intro__body {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--tekst);
}
.aanpak-intro__body p {
  margin: 0 0 18px;
}
.aanpak-intro__body p:last-child {
  margin-bottom: 0;
}

/* v1.0.6.73: blok ".aanpak-sporen" en ".spoor-kaart" verwijderd (30 regels).
   De "Twee sporen"-sectie was in v1.0.6.62 uit de template geschrapt wegens
   dubbeling met Home-pagina. ACF-velden en seed-content ook opgeruimd. */

/* ========== 5. SYNERGIE (donker, op houttextuur) ========== */
.aanpak-synergie {
  position: relative;
  padding: 112px 24px 104px;
  background-image:
    linear-gradient(122deg, rgba(255, 248, 238, 0.08) 0%, transparent 34%, rgba(0, 0, 0, 0.18) 100%),
    var(--hout-overlay-sterk),
    var(--hout-img);
  background-size: cover, cover, cover;
  background-position: center center, center center, center center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  color: var(--zand);
  text-align: center;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 238, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}
.aanpak-synergie::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at 82% 22%, rgba(255, 248, 238, 0.13) 0%, rgba(255, 248, 238, 0.035) 29%, transparent 62%),
    radial-gradient(ellipse at 18% 84%, rgba(0, 0, 0, 0.22) 0%, transparent 60%),
    repeating-linear-gradient(35deg, rgba(255, 248, 238, 0.024) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(125deg, rgba(0, 0, 0, 0.022) 0 1px, transparent 1px 8px);
  opacity: 0.58;
  mix-blend-mode: soft-light;
}
.aanpak-synergie__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
}
.aanpak-synergie__inner .section-label {
  margin-bottom: var(--space-xl);
}
.aanpak-synergie__quote {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.25;
  color: var(--zand);
  margin: 0 0 40px;
  padding: 0;
  border: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.aanpak-synergie__body {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 248, 238, 0.97);
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.34);
}
.aanpak-synergie__body p {
  color: inherit;
  margin: 0 0 var(--space-md);
}
.aanpak-synergie__body p:last-child {
  margin-bottom: 0;
}

/* ========== 6. DRIE TRAJECTEN ========== */
.aanpak-trajecten {
  background-color: var(--zand);
  padding: 96px 24px 88px;
}
.aanpak-trajecten__inner {
  max-width: 1000px;
  margin: 0 auto;
}
.aanpak-trajecten__inner > .section-label,
.aanpak-trajecten__inner > .section-title {
  text-align: center;
  display: block;
}
.aanpak-trajecten__inner > .section-label {
  display: inline-block;
}
.aanpak-trajecten__inner .section-title {
  margin-bottom: var(--space-xl);
  text-align: center;
}
.traject {
  padding: 36px 0 36px;
  border-top: 1px solid rgba(42, 28, 20, 0.12);
}
.traject:first-of-type {
  border-top: 0;
  padding-top: var(--space-md);
}
.traject__titel {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.25;
  color: var(--koraal);
  margin: 0 0 28px;
}
.traject__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: 20px;
}
.traject__kolom-kop {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--oker-tekst);
  font-weight: 500;
  margin: 0 0 var(--space-xs);
}
.traject__kolom-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--tekst);
  margin: 0;
}
.traject__samen {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: rgba(42, 28, 20, 0.72);
  margin: var(--space-sm) 0 0;
  padding-left: 0;
}

/* ========== 7. THERAPEUT ========== */
.aanpak-therapeut {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--zand-d);
  background-image:
    linear-gradient(118deg, rgba(255, 248, 238, 0.42) 0%, rgba(255, 248, 238, 0.12) 34%, rgba(42, 28, 20, 0.08) 100%),
    repeating-linear-gradient(90deg, rgba(42, 28, 20, 0.018) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(0deg, rgba(255, 248, 238, 0.055) 0 1px, transparent 1px 11px);
  padding: 104px 24px 104px;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 238, 0.42),
    inset 0 -1px 0 rgba(42, 28, 20, 0.08);
}
.aanpak-therapeut::before,
.aanpak-therapeut::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.aanpak-therapeut::before {
  inset: 0;
  background-image:
    linear-gradient(132deg, transparent 0%, rgba(255, 248, 238, 0.26) 34%, transparent 62%),
    linear-gradient(32deg, rgba(42, 28, 20, 0.045) 0%, transparent 38%, rgba(255, 248, 238, 0.12) 100%);
  opacity: 0.9;
}
.aanpak-therapeut::after {
  top: 12%;
  bottom: 10%;
  left: -11vw;
  width: min(760px, 58vw);
  transform: skewX(-7deg);
  background:
    linear-gradient(135deg, rgba(253, 250, 246, 0.34), rgba(255, 248, 238, 0.08));
  border-right: 1px solid rgba(255, 248, 238, 0.34);
  box-shadow: 34px 0 80px rgba(42, 28, 20, 0.055);
}
.aanpak-therapeut__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.72fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}
.aanpak-therapeut__content {
  position: relative;
  padding: clamp(32px, 4vw, 52px);
  background:
    linear-gradient(135deg, rgba(253, 250, 246, 0.88), rgba(251, 240, 228, 0.72)),
    var(--wit);
  border: 1px solid rgba(42, 28, 20, 0.08);
  border-radius: 6px;
  box-shadow:
    0 22px 70px rgba(42, 28, 20, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
}
.aanpak-therapeut__content::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(32px, 4vw, 52px);
  right: clamp(32px, 4vw, 52px);
  height: 3px;
  background: linear-gradient(90deg, var(--koraal), rgba(212, 97, 74, 0));
}
.aanpak-therapeut__content .section-title {
  margin-bottom: var(--space-lg);
}
.aanpak-therapeut__body {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--tekst);
}
.aanpak-therapeut__body p {
  margin: 0 0 var(--space-md);
}
.aanpak-therapeut__body p:last-child {
  margin-bottom: 0;
}
.aanpak-therapeut__panel {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  margin-left: clamp(-46px, -3.2vw, -22px);
}
.aanpak-therapeut__item {
  position: relative;
  min-height: 132px;
  padding: 24px 24px 22px 86px;
  background:
    var(--hout-overlay-sterk),
    var(--hout-img) center/cover no-repeat,
    var(--bruin-mid);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(42, 28, 20, 0.16);
}
.aanpak-therapeut__item::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 88% 16%, rgba(212, 97, 74, 0.18), transparent 44%),
    repeating-linear-gradient(35deg, rgba(255, 248, 238, 0.025) 0 1px, transparent 1px 7px);
  pointer-events: none;
}
.aanpak-therapeut__nr {
  position: absolute;
  top: 22px;
  left: 22px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  color: rgba(251, 240, 228, 0.18);
}
.aanpak-therapeut__item h3 {
  position: relative;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.12;
  color: var(--zand);
}
.aanpak-therapeut__item p {
  position: relative;
  margin: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.62;
  color: rgba(251, 240, 228, 0.72);
}

/* ========== 8. WETENSCHAP ========== */
.aanpak-wetenschap {
  background-color: var(--zand);
  padding: 96px 24px 96px;
}
.aanpak-wetenschap__inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.aanpak-wetenschap__inner .section-title {
  margin-bottom: var(--space-xl);
}
.aanpak-wetenschap__body {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--tekst);
  text-align: left;
}
.aanpak-wetenschap__body p {
  margin: 0 0 var(--space-md);
}
.aanpak-wetenschap__body p:last-child {
  margin-bottom: 0;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 840px) {
  .traject__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .aanpak-synergie {
    padding: 80px 20px 72px;
  }
  .aanpak-intro,
  .aanpak-trajecten,
  .aanpak-therapeut,
  .aanpak-wetenschap {
    padding: 72px 20px 64px;
  }
  .aanpak-therapeut__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .aanpak-therapeut::after {
    top: 8%;
    bottom: 6%;
    width: 88vw;
  }
  .aanpak-therapeut__panel {
    margin-left: 0;
  }
  .aanpak-therapeut__content {
    padding: 30px 24px;
  }
  .aanpak-therapeut__content::before {
    left: 24px;
    right: 24px;
  }
  .aanpak-therapeut__item {
    min-height: 0;
    padding: 22px 22px 20px 72px;
  }
  .aanpak-therapeut__nr {
    top: 22px;
    left: 20px;
    font-size: 34px;
  }
}

/* ============================================================
   v1.0.6.21 — CONTACT PAGINA (7-secties restructurering)
============================================================ */

/* === 2. DRIE CONTACTKANALEN === */
.contact-kanalen {
  background: var(--wit);
  padding: 80px 32px 40px;
}
.contact-kanalen__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.contact-kanaal {
  background: var(--zand);
  padding: 36px 32px;
  border-radius: 18px;
  border: 1px solid rgba(42, 28, 20, 0.06);
  box-shadow: 0 2px 12px rgba(42, 28, 20, 0.06);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease,
              box-shadow 0.25s ease,
              border-color 0.25s ease;
  will-change: transform;
}
.contact-kanaal:hover,
.contact-kanaal:focus-visible {
  background: var(--zand);
  border-color: rgba(212, 97, 74, 0.12);
  box-shadow:
    0 8px 24px rgba(42, 28, 20, 0.06),
    0 0 0 1px rgba(212, 97, 74, 0.18);
  color: inherit;
  transform: translateY(-3px);
}
.contact-kanaal:focus-visible {
  outline: 2px solid var(--koraal);
  outline-offset: 4px;
}
.contact-kanaal__icon {
  color: var(--koraal);
  margin-bottom: 18px;
  width: 28px;
  height: 28px;
}
.contact-kanaal__label {
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--koraal);
  font-weight: 500;
  margin: 0 0 10px;
}
.contact-kanaal__titel {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400;
  color: var(--tekst);
  margin: 0 0 12px;
  line-height: 1.2;
}
.contact-kanaal__body {
  font-size: 15px;
  color: var(--tekst-l);
  line-height: 1.6;
  margin: 0;
}

/* === 3. ROUTE-INFORMATIE === */
.contact-route {
  background: var(--wit);
  padding: 60px 32px 80px;
}
.contact-route__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.contact-route__kop {
  margin-bottom: 40px;
}
.contact-route__kolommen {
  display: block;
}
.contact-route__uitleg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: 1100px;
}
.contact-route__blok-titel {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--tekst);
  margin: 0 0 10px;
}
.contact-route__blok-body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tekst-l);
  margin: 0 0 12px;
}
.contact-route__blok-body p:last-child {
  margin-bottom: 0;
}

/* === 4. GOOGLE MAPS EMBED === */
.contact-kaart {
  background: var(--wit);
  padding: 0 32px 80px;
}
.contact-kaart__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.contact-kaart__frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(42, 28, 20, 0.06);
  background: var(--zand);
  box-shadow: 
    0 2px 8px rgba(42, 28, 20, 0.08),
    0 8px 24px rgba(42, 28, 20, 0.12),
    0 16px 48px rgba(42, 28, 20, 0.10);
}
.contact-kaart__frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* === 5. OPENINGSTIJDEN === */
.contact-tijden {
  background: linear-gradient(180deg, var(--zand) 0%, #F5E5D8 100%);
  padding: 80px 32px;
}
.contact-tijden__inner {
  max-width: 760px;
  margin: 0 auto;
}
.contact-tijden__kop {
  margin-bottom: 32px;
}
.hours-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #FDFAF6;
  border-radius: 18px;
  border: 1px solid rgba(42, 28, 20, 0.06);
  box-shadow: 0 2px 12px rgba(42, 28, 20, 0.06);
  overflow: hidden;
  margin-bottom: 24px;
}
.hours-table__row {
  border-bottom: 1px solid var(--zand);
  transition: all 0.25s ease;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
}
.hours-table__row:last-child {
  border-bottom: none;
}
.hours-table__row:hover {
  background: var(--zand);
  border-color: rgba(212, 97, 74, 0.12);
  border-radius: 18px;
  box-shadow:
    0 8px 24px rgba(42, 28, 20, 0.06),
    0 0 0 1px rgba(212, 97, 74, 0.18);
  transform: translateY(-3px);
}
.hours-table__dag {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--oker-tekst);
  text-align: left;
  padding: 16px 24px;
  width: 35%;
  transition: all 0.25s ease;
}
.hours-table__tijd {
  font-size: 15px;
  color: var(--tekst-l);
  padding: 16px 24px;
  text-align: right;
  transition: all 0.25s ease;
}
.hours-table__row:hover .hours-table__dag,
.hours-table__row:hover .hours-table__tijd {
  color: var(--koraal);
}
.hours-table__row--dicht .hours-table__tijd {
  color: var(--tekst-ll);
  font-style: italic;
}
.hours-table__row--dicht .hours-table__tijd {
  color: var(--tekst-ll);
  font-style: italic;
}
.contact-tijden__toelichting p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--tekst-l);
  margin: 0 0 12px;
}
.contact-tijden__toelichting p:last-child {
  margin-bottom: 0;
}

/* === 6. FORMULIER === */
.contact-formulier {
  background:
    linear-gradient(180deg, var(--zand) 0%, #F7E8D8 100%);
  padding: 88px 32px;
}
.contact-formulier__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.contact-formulier__kop {
  max-width: 760px;
  margin-bottom: 32px;
}
.contact-formulier__intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--tekst-l);
  margin: 16px 0 0;
}

/* === RESPONSIVE (mobiel ≤ 860px) === */
@media (max-width: 860px) {
  .contact-kanalen {
    padding: 56px 24px 32px;
  }
  .contact-kanalen__inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .contact-kanaal {
    padding: 28px 24px;
  }
  .contact-route {
    padding: 48px 24px 64px;
  }
  .contact-route__kolommen {
    display: block;
  }
  .contact-route__uitleg {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .contact-kaart {
    padding: 0 24px 64px;
  }
  .contact-tijden {
    padding: 64px 24px;
  }
  .hours-table__dag,
  .hours-table__tijd {
    padding: 14px 18px;
    font-size: 14px;
  }
  .contact-formulier {
    padding: 64px 24px;
  }
}

/* ============================================================
   v1.0.6.22 — CESAR-PIJLER UITBREIDINGEN
============================================================ */

/* Klacht-chips in hero-positie (boven content-container, zoals acu-pijler) */
.klacht-chips--hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 32px 0;
  gap: 10px;
}

/* Kruislink-callout: koraal-accent met eigen afstand */
.callout--kruislink {
  background: var(--zand);
  border-left: 4px solid var(--koraal);
  margin: 48px 0 32px;
  padding: 28px 32px;
}
.callout--kruislink p {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tekst-l);
}
.callout--kruislink p:not(:last-child) {
  margin-bottom: 12px;
}
.callout--kruislink a {
  color: var(--koraal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.callout--kruislink a:hover {
  color: var(--koraal-d);
}

/* Responsive — mobiel chip-gedrag bij hero-positie */
@media (max-width: 860px) {
  .klacht-chips--hero {
    padding: 24px 24px 0;
  }
}

/* ============================================================
   v1.0.6.23 — AANPAK-PAGINA UITBREIDINGEN (fusie met Werkwijze)
============================================================ */

/* Slogan-regel in hero (onder H1, boven lead) — Variant A slogan-hiërarchie */
.page-hero__slogan {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  /* v1.0.6.271 — schaal aangepast omdat .page-hero__lead is opgeschaald
     naar clamp(22,2.4vw,32). Slogan blijft 1 stap kleiner voor hierarchy. */
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  color: var(--koraal);
  margin: 0 0 20px;
  line-height: 1.2;
}

/* === 7. BRUG — "Zo werk ik in de praktijk" === */
.aanpak-brug {
  background-color: var(--wit);
  padding: 88px 24px 72px;
}
.aanpak-brug__inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.aanpak-brug__inner .section-label {
  justify-content: center;
}
.aanpak-brug__inner .section-title {
  margin-bottom: 28px;
}
.aanpak-brug__body {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--tekst-l);
}
.aanpak-brug__body p {
  margin: 0 0 18px;
}
.aanpak-brug__body p:last-child {
  margin-bottom: 0;
}

/* === 8. VIER STAPPEN === */
.aanpak-stappen {
  background-color: var(--zand);
  padding: 88px 24px 96px;
}
.aanpak-stappen__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.aanpak-stappen__inner > .section-label,
.aanpak-stappen__inner > .section-title {
  text-align: center;
}
.aanpak-stappen__inner > .section-label {
  justify-content: center;
}
.aanpak-stappen__inner > .section-title {
  margin-bottom: var(--space-xl);
}
.aanpak-stappen__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.stap-kaart {
  background: var(--wit);
  padding: 36px 32px;
  border-radius: 6px;
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  transition: transform 0.2s;
}
.stap-kaart:hover {
  transform: translateY(-2px);
}
.stap-kaart__nummer {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px;
  font-weight: 300;
  color: var(--koraal);
  line-height: 1;
  flex-shrink: 0;
  min-width: 56px;
}
.stap-kaart__content {
  flex: 1;
}
.stap-kaart__titel {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--tekst);
  margin: 0 0 6px;
  line-height: 1.2;
}
.stap-kaart__tijd {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--koraal);
  font-weight: 500;
  margin: 0 0 14px;
}
.stap-kaart__body {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--tekst-l);
  margin: 0;
}

/* === 9. PRAKTISCHE ZAKEN === */
.aanpak-praktisch {
  background-color: var(--wit);
  padding: 88px 24px 80px;
}
.aanpak-praktisch__inner {
  max-width: 780px;
  margin: 0 auto;
}
.aanpak-praktisch__inner .section-title {
  margin-bottom: var(--space-xl);
}
.aanpak-praktisch__body {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--tekst-l);
}
.aanpak-praktisch__body p {
  margin: 0 0 var(--space-md);
}
.aanpak-praktisch__body p:last-child {
  margin-bottom: 0;
}
.aanpak-praktisch__body strong {
  color: var(--tekst);
  font-weight: 500;
}

/* === WERKWIJZE NOTITIE — huisbezoek (v1.0.6.529) === */
.werkwijze-notitie {
  font-style: italic;
  color: var(--tekst);                       /* #2A1C14 */
  margin-top: 24px;
  border-left: 2px solid var(--oker);        /* #C48C10 */
  padding-left: 16px;
}

/* === Sfeerfoto's tussen secties (v1.0.6.192) ===
   Twee 16:9 landscape foto's voor visuele rust tussen tekst-zware secties.
   v1.0.6.192: schermbreed (max-width verwijderd) + donkerbruine vignettering
   via radial gradient pseudo-element overlay. */
.aanpak-sfeerfoto {
  background-color: var(--zand);
  padding: 0;
  margin: 0;
}
/* v1.0.6.202 — verkleint witruimte wanneer sfeerfoto direct na een
   content-container komt (Cesar/Acu page). Trekt foto omhoog om de
   bottom-padding van de container deels te neutraliseren. */
.content-container + .aanpak-sfeerfoto {
  margin-top: calc(-1 * var(--space-xl));
}
.aanpak-sfeerfoto__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 6.75; /* v1.0.6.194: 75% van 16:9 hoogte */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}
/* v1.0.6.197 — modifier voor de onderste sfeerfoto (praktijkruimte) — 50% hoger */
.aanpak-sfeerfoto--tall .aanpak-sfeerfoto__image {
  aspect-ratio: 16 / 10.125; /* 6.75 × 1.5 = 10.125 */
}
.aanpak-sfeerfoto__image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(42, 28, 20, 0.78) 0%,
    rgba(42, 28, 20, 0.62) 50%,
    rgba(42, 28, 20, 0.42) 100%
  );
}
.aanpak-sfeerfoto__caption {
  max-width: 780px;
  margin: 16px auto 0;
  padding: 0 24px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--tekst-l);
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .aanpak-sfeerfoto__image {
    aspect-ratio: 16 / 7.5; /* v1.0.6.194: 75% van 16:10 hoogte */
  }
  .aanpak-sfeerfoto--tall .aanpak-sfeerfoto__image {
    aspect-ratio: 16 / 11.25; /* 7.5 × 1.5 — 50% hoger op mobiel */
  }
  .aanpak-sfeerfoto__caption {
    font-size: var(--text-sm);
    margin-top: 12px;
    padding: 0 16px;
  }
}

/* === 12. FAQ-sectie (hergebruik van .faq op sectie-niveau) === */
.aanpak-faq {
  background-color: var(--zand);
  padding: 88px 24px 96px;
}
.aanpak-faq__inner {
  max-width: 780px;
  margin: 0 auto;
}
.aanpak-faq__inner > .section-label,
.aanpak-faq__inner > .section-title {
  text-align: center;
}
.aanpak-faq__inner > .section-label {
  justify-content: center;
}
.aanpak-faq__inner > .section-title {
  margin-bottom: 40px;
}
.aanpak-faq .faq {
  margin: 0;
}

/* === RESPONSIVE (mobiel ≤ 860px) === */
@media (max-width: 860px) {
  .aanpak-brug {
    padding: 72px 20px 60px;
  }
  .aanpak-stappen {
    padding: 72px 20px 80px;
  }
  .aanpak-stappen__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .stap-kaart {
    padding: 28px 24px;
    gap: 18px;
  }
  .stap-kaart__nummer {
    font-size: 40px;
    min-width: 44px;
  }
  .aanpak-praktisch {
    padding: 72px 20px 64px;
  }
  .aanpak-faq {
    padding: 72px 20px 80px;
  }
  .page-hero__slogan {
    margin: 0 0 16px;
  }
}

/* ============================================================
   v1.0.6.24 — CESAR-HERO (gespiegeld t.o.v. acu-hero)
   Acu = foto links, tekst rechts
   Cesar = tekst links, foto rechts (spiegelbeeld)

   v1.0.6.75: Token-migratie. 4 hardcoded font-sizes en ~10
   spacings vervangen door fluid tokens. Body-prose 17px en
   caption 12px bewust gelaten om mobile-leesbaarheid te
   beschermen.
============================================================ */
.cesar-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 720px;
  max-height: 780px;
  background: var(--zand);
  position: relative;
  overflow: hidden;
}

/* TEKST-KOLOM links (gespiegeld t.o.v. acu-hero__right)
   v1.0.6.160: z-index 2 zodat tekst boven foto-laag staat (foto loopt
   nu absolute over hele hero, deels onder tekst-kolom door). */
.cesar-hero__left {
  display: flex;
  align-items: center;
  /* v1.0.6.420 — padding-top kleiner (hoger geplaatst). Was 80px 64px. */
  padding: 64px 64px 80px 64px;
  position: relative;
  z-index: 2;
}
.cesar-hero__left-inner {
  max-width: 540px;
  margin-left: auto; /* duwt inhoud naar rechts-binnen zodat hij dicht bij de foto-rand staat */
}

.cesar-hero__eyebrow {
  margin-bottom: var(--space-md);
}
.cesar-hero__eyebrow span {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--koraal);
}
.cesar-hero__eyebrow span::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--koraal);
  vertical-align: middle;
  margin-right: 12px;
}

.cesar-hero__title {
  font-family: var(--font-display);
  /* v1.0.6.271 — sync met .hero__title en .page-hero__title:
     clamp(56,7vw,96) weight 400, em krijgt 300 italic. */
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--tekst);
  margin: 0 0 var(--space-md);
}
.cesar-hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--koraal);
}

.cesar-hero__lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--tekst-l);
  margin: 0 0 var(--space-lg);
}

/* FOTO-KOLOM rechts (gespiegeld t.o.v. acu-hero__left)
   Schuine LINKER-onderhoek in plaats van rechter
   v1.0.6.149: clip-path verscherpt van 12% naar 20% top-left
   inkeping voor markantere diagonaal tussen tekst en foto.
   v1.0.6.151: rechte polygon vervangen door SVG-clipPath met
   sigmoïde S-curve (zie defs in template-cesar.php).
   v1.0.6.160: position absolute zodat foto-laag over volle pagina-
   breedte loopt en deels onder tekst-kolom valt. Symmetrische S
   (R=0.15, helling 80°) met midden op 50% van pagina.
   Polygon-fallback blijft behouden voor zeer oude browsers. */
.cesar-hero__right {
  position: absolute;
  inset: 0;
  background: var(--tekst);
  overflow: hidden;
  z-index: 1;
  clip-path: polygon(60.26% 0, 100% 0, 100% 100%, 39.74% 100%); /* fallback (v163: pixel-correct, R=120px, helling 80°) */
  clip-path: url(#cesar-hero-curve);
}

.cesar-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* v1.0.6.150: object-position en transform worden inline gezet vanuit
     ACF-velden hero_focus_x, hero_focus_y, hero_zoom. Defaults vanuit PHP
     zijn 50/50/100 = visueel identiek aan de oude 'center center'. */
  object-position: 50% 50%;
  z-index: 1;
}

.cesar-hero__image-overlay {
  position: absolute;
  inset: 0;
  /* Gespiegelde gradient: aflopend van donker linksonder naar lichter rechtsboven */
  background: linear-gradient(225deg, rgba(61,42,32,0.25) 0%, rgba(92,61,46,0.15) 40%, rgba(42,28,20,0.5) 100%);
  z-index: 2;
}

/* Quote positioneert rechtsonder (gespiegeld t.o.v. acu linksonder)
   v1.0.6.149: left mee verschoven van 15% naar 22% nu de
   schuine rand bij 20% start (was 12%).
   v1.0.6.155: left van 22% naar 32% omdat clip-path-inkeping
   van 22% naar 30% is gegaan voor 20° schuin middenstuk.
   v1.0.6.156: terug naar 22% (inkeping ook 22%).
   v1.0.6.158: inkeping weer 30% (juiste structuur), quote left = 32%.
   v1.0.6.160: __right is nu absolute over hele pagina, dus left
   wordt % van paginabreedte ipv fotokolombreedte. 55% houdt quote
   ruim binnen het foto-deel rechts van de S-curve onderaan. */
.cesar-hero__quote {
  position: absolute;
  bottom: 48px;
  right: 48px;
  left: 55%; /* was 32% van fotokolom; nu 55% van paginabreedte */
  z-index: 3;
  text-align: right;
}
.cesar-hero__quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-style: italic;
  font-weight: 300;
  color: rgba(251, 240, 228, 0.92);
  line-height: 1.4;
  border-right: 2px solid var(--koraal);
  border-left: none;
  padding-right: 18px;
  padding-left: 0;
  margin: 0 0 var(--space-xs);
}
.cesar-hero__quote cite {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(251, 240, 228, 0.55);
  font-style: normal;
  padding-right: 20px;
  padding-left: 0;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  .cesar-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  /* Op mobiel foto BOVEN, tekst eronder — kantel volgorde via order
     v1.0.6.160: position absolute terugzetten naar relative want
     op mobile zijn er geen overlappende lagen meer. */
  .cesar-hero__right {
    position: relative;
    inset: auto;
    order: -1;
    min-height: 380px;
    clip-path: none;
  }
  .cesar-hero__left {
    z-index: auto;
  }
  .cesar-hero__quote {
    bottom: 32px;
    right: 32px;
    left: 32px;
    text-align: left;
  }
  .cesar-hero__quote blockquote {
    border-right: none;
    border-left: 2px solid var(--koraal);
    padding-right: 0;
    padding-left: 18px;
  }
  .cesar-hero__quote cite {
    padding-left: 20px;
    padding-right: 0;
  }
  .cesar-hero__left {
    padding: var(--space-xl) 32px;
  }
  .cesar-hero__left-inner {
    margin-left: 0; /* laat content links uitlijnen op mobiel */
  }
}

/* ============================================================
   v1.0.6.25 — BAND __item--link (klikbare band-items)
   Gebruikt op cesar-pijler: als chip_N_url een echte URL heeft
   wordt dat band-item een <a> i.p.v. <span>. Geldt voor Fase 2B
   wanneer klachtpagina's bestaan.
============================================================ */
.band__item--link {
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s, text-shadow 0.2s;
}
.band__item--link:hover {
  color: var(--zand);
  text-shadow: none;
}


/* ============================================================
   v1.0.6.27 — CESAR VISUAL BREAKS (redesigned)
   Vervangt v1.0.6.26 full-bleed foto-secties door:
   - Break 1: asymmetrische testimonial (foto links, quote rechts)
   - Break 2: magazine-stijl embedded float (foto zweeft in tekst)
============================================================ */

/* Gemeenschappelijke base voor alle break-secties */
.cesar-break {
  position: relative;
  max-width: 1100px;
  margin: 72px auto;
  padding: 0 32px;
}

/* ==========================================================
   BREAK 1 — TESTIMONIAL (asymmetrisch, foto links + quote rechts)
   ========================================================== */
.cesar-break--testimonial {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-xl);
  align-items: center;
}

.cesar-break__portrait {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  /* Koraal accent-lijn — subtiele offset onder-rechts */
  box-shadow: 12px 12px 0 0 var(--koraal);
}
.cesar-break__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.cesar-break__testimonial {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  position: relative;
}
/* Groot decoratief koraal-openingsteken */
.cesar-break__testimonial::before {
  content: "\201C";
  position: absolute;
  top: -48px;
  left: -12px;
  font-family: var(--font-display);
  font-size: 140px;
  line-height: 1;
  color: var(--koraal);
  opacity: 0.25;
  pointer-events: none;
}
.cesar-break__testimonial p {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.35;
  color: var(--tekst);
  margin: 0 0 28px;
  position: relative;
  z-index: 1;
}
.cesar-break__testimonial cite {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tekst-l);
  line-height: 1.5;
}

/* ==========================================================
   BREAK 2 — EMBEDDED FLOAT (foto zweeft in reflectie-tekst)
   ========================================================== */
.cesar-break--embed {
  background: var(--zand);
  padding: 64px 32px;
  max-width: none; /* full-bleed achtergrond */
  margin: 72px 0;
}
.cesar-break--embed .cesar-break__embed-inner {
  max-width: 860px;
  margin: 0 auto;
  /* Clearfix voor float */
}
.cesar-break--embed .cesar-break__embed-inner::after {
  content: "";
  display: table;
  clear: both;
}

/* Foto zweeft rechts, tekst wrapt eromheen */
.cesar-break__float {
  float: right;
  width: 38%;
  max-width: 360px;
  margin: 0 0 16px 40px;
  /* Subtiel koraal-accent rechtsboven */
  position: relative;
}
.cesar-break__float::before {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 48px;
  height: 1px;
  background: var(--koraal);
}
.cesar-break__float img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.cesar-break__float figcaption {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tekst-ll);
  margin-top: 12px;
  line-height: 1.4;
}

.cesar-break__kop {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 300;
  font-style: italic;
  color: var(--tekst);
  margin: 0 0 20px;
  line-height: 1.2;
}

.cesar-break__text {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--tekst-l);
}
.cesar-break__text p {
  margin: 0 0 var(--space-sm);
}
.cesar-break__text p:last-child {
  margin-bottom: 0;
}

/* ==========================================================
   PLACEHOLDER MODE (alleen zichtbaar voor ingelogde admins)
   ========================================================== */
.cesar-break--placeholder {
  background: repeating-linear-gradient(
    135deg,
    var(--zand) 0px,
    var(--zand) 16px,
    var(--zand-d) 16px,
    var(--zand-d) 32px
  );
  border: 2px dashed var(--tekst-ll);
  border-radius: 4px;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  text-align: center;
  grid-template-columns: 1fr; /* override voor testimonial-grid */
}
.cesar-break--placeholder .cesar-break__embed-inner {
  max-width: 560px;
}
.cesar-break__placeholder-notice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
}
.cesar-break__placeholder-notice strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: var(--tekst);
}
.cesar-break__placeholder-notice span {
  font-size: 14px;
  line-height: 1.55;
  color: var(--tekst-ll);
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 860px) {
  .cesar-break {
    margin: 52px auto;
    padding: 0 var(--space-md);
  }

  /* Testimonial: stapelen (foto boven, quote onder) */
  .cesar-break--testimonial {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cesar-break__portrait {
    max-width: 340px;
    margin: 0 auto;
    box-shadow: 8px 8px 0 0 var(--koraal);
  }
  .cesar-break__testimonial::before {
    top: -32px;
    left: -4px;
    font-size: 96px;
  }

  /* Embed-float: foto boven tekst, geen float op mobiel */
  .cesar-break--embed {
    padding: 48px var(--space-md);
    margin: 52px 0;
  }
  .cesar-break__float {
    float: none;
    width: 100%;
    max-width: 320px;
    margin: 0 auto var(--space-md);
  }

  /* Placeholder compacter */
  .cesar-break--placeholder {
    min-height: 220px;
    padding: 36px 20px;
  }
}

/* ============================================================
   v1.0.6.33 — KLACHTEN-HUB pagina (overzicht 6 klachten)
   - Hero (hergebruik .page-hero)
   - Intro-blok (zand achtergrond)
   - Grid van 6 klacht-kaarten
   - Optioneel handgeschreven citaat (met of zonder foto)
   - Onderaan-blok "staat uw klacht er niet bij"

   v1.0.6.77: Token-migratie. 2 hardcoded font-sizes en 4
   spacings vervangen door fluid tokens. Body-prose 17px en
   caption 12px bewust gelaten om mobile-leesbaarheid te
   beschermen. Eigen clamp()-ranges (citaat, onder-titel)
   blijven intact.
============================================================ */

.page-klachten-hub {
  background: var(--zand);
}

/* Intro */
.klachten-hub-intro {
  background: var(--zand);
  padding: 60px 32px 20px;
}
.klachten-hub-intro__inner {
  max-width: 760px;
  margin: 0 auto;
}
.klachten-hub-intro__inner p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--tekst-l);
  margin: 0 0 18px;
}

/* Grid */
.klachten-hub-grid {
  background: var(--zand);
  padding: var(--space-3xl) var(--space-xl);
}
.klachten-hub-grid__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-sm);
}

/* ── Bento-layout: elke kaart eigen positie en karakter ── */

/* 1 — Rugklachten: hero-kaart, groot, donker */
.klacht-kaart:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
  background: var(--tekst);
  color: var(--zand);
}
.klacht-kaart:nth-child(1) .klacht-kaart__titel { color: var(--zand); }
.klacht-kaart:nth-child(1) .klacht-kaart__tekst { color: var(--zand-d); }
.klacht-kaart:nth-child(1) .klacht-kaart__icon  { color: var(--koraal); }
.klacht-kaart:nth-child(1) .klacht-kaart__link  { color: var(--oker-l); }

/* 2 — Nekklachten: smal, zand-donker */
.klacht-kaart:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  background: var(--zand-d);
}

/* 3 — Hoofdpijn: wit */
.klacht-kaart:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
  background: var(--wit);
}

/* 4 — Stress: smal, wit */
.klacht-kaart:nth-child(4) {
  grid-column: 1;
  grid-row: 2;
  background: var(--wit);
}

/* 5 — Hooikoorts: koraal-tint */
.klacht-kaart:nth-child(5) {
  grid-column: 2;
  grid-row: 2;
  background: linear-gradient(135deg,
    rgba(212, 97, 74, 0.08) 0%,
    rgba(212, 97, 74, 0) 70%),
    var(--wit);
}

/* 6 — Overgangsklachten: zand-d */
.klacht-kaart:nth-child(6) {
  grid-column: 3;
  grid-row: 2;
  background: var(--zand-d);
}

/* Kaart basis — v1.0.6.329 bento */
.klacht-kaart {
  background: var(--wit);
  padding: var(--space-lg);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--tekst);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.klacht-kaart--link:hover,
.klacht-kaart--link:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    0 12px 32px rgba(42, 28, 20, 0.10),
    0 0 0 1px rgba(212, 97, 74, 0.18);
  color: var(--tekst);
}
.klacht-kaart--link:focus-visible {
  outline: 2px solid var(--koraal);
  outline-offset: 4px;
}
/* Wide-klasse niet meer gebruikt in bento maar behouden voor backwards compat */
.klacht-kaart--wide {
  padding: var(--space-lg);
}

.klacht-kaart__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--koraal);
  margin-bottom: var(--space-md);
  width: 32px;
  height: 32px;
}
.klacht-kaart__icon svg {
  width: 32px;
  height: 32px;
}

/* Hero-kaart (rugklachten) grotere icon */
.klacht-kaart:nth-child(1) .klacht-kaart__icon {
  width: 48px;
  height: 48px;
}
.klacht-kaart:nth-child(1) .klacht-kaart__icon svg {
  width: 48px;
  height: 48px;
}

.klacht-kaart__titel {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--tekst);
  margin: 0 0 var(--space-sm);
}

/* Hero-kaart titel groter */
.klacht-kaart:nth-child(1) .klacht-kaart__titel {
  font-size: clamp(24px, 2.4vw, 34px);
  margin-bottom: var(--space-md);
}

.klacht-kaart__tekst {
  font-size: 14px;
  line-height: 1.65;
  color: var(--tekst-l);
  margin: 0 0 var(--space-md);
  flex-grow: 1;
}

/* Hero-kaart tekst groter */
.klacht-kaart:nth-child(1) .klacht-kaart__tekst {
  font-size: 15px;
}

.klacht-kaart__link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--koraal);
  margin-top: auto;
}
.klacht-kaart__link--soon {
  color: var(--tekst-ll);
  font-style: italic;
}

/* ── Responsive: tablet ── */
@media (max-width: 860px) {
  .klachten-hub-grid__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .klacht-kaart:nth-child(1) { grid-column: 1 / 3; grid-row: auto; }
  .klacht-kaart:nth-child(2) { grid-column: auto; grid-row: auto; }
  .klacht-kaart:nth-child(3) { grid-column: auto; grid-row: auto; }
  .klacht-kaart:nth-child(4) { grid-column: auto; grid-row: auto; }
  .klacht-kaart:nth-child(5) { grid-column: auto; grid-row: auto; }
  .klacht-kaart:nth-child(6) { grid-column: auto; grid-row: auto; }
}

/* ── Responsive: mobiel ── */
@media (max-width: 560px) {
  .klachten-hub-grid__inner {
    grid-template-columns: 1fr;
  }
  .klacht-kaart:nth-child(1) { grid-column: 1; }
}

/* Citaat-blok */
.klachten-hub-citaat {
  background: var(--zand-d);
  padding: 80px 32px;
}
.klachten-hub-citaat__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 56px;
  align-items: center;
}
.klachten-hub-citaat__inner.has-foto {
  grid-template-columns: 1fr 2fr;
}
.klachten-hub-citaat__inner.geen-foto {
  grid-template-columns: 1fr;
  max-width: 760px;
  text-align: center;
}

.klachten-hub-citaat__foto {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 12px 12px 0 0 var(--koraal);
}
.klachten-hub-citaat__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Placeholder als geen foto: een afbeelding-vorm in zand-dd, zonder breken */
.klachten-hub-citaat__foto-placeholder {
  display: none; /* in geen-foto-modus is layout 1-koloms en heb je geen placeholder nodig */
}

.klachten-hub-citaat__quote {
  margin: 0;
  border: none;
  padding: 0;
  background: none;
}
.klachten-hub-citaat__quote p {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  color: var(--tekst);
  margin: 0 0 18px;
}
.klachten-hub-citaat__quote cite {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tekst-ll);
  font-style: normal;
}

/* Onderaan-blok */
.klachten-hub-onder {
  background: var(--zand);
  padding: 80px 32px;
}
.klachten-hub-onder__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.klachten-hub-onder__titel {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--tekst);
  margin: 0 0 20px;
}
.klachten-hub-onder__body {
  margin-bottom: 36px;
}
.klachten-hub-onder__body p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--tekst-l);
}
.klachten-hub-onder__cta {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}
.klachten-hub-onder__cta .btn-secondary svg {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
}

/* Responsive */
@media (max-width: 900px) {
  .klachten-hub-grid__inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .klachten-hub-citaat__inner.has-foto {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 540px;
  }
  .klachten-hub-citaat__foto {
    max-width: 280px;
    margin: 0 auto;
  }
}

@media (max-width: 560px) {
  .klachten-hub-grid__inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .klacht-kaart--wide {
    grid-column: span 1;
  }
  .klachten-hub-grid {
    padding: 32px 20px 56px;
  }
  .klachten-hub-intro {
    padding: 48px 20px 16px;
  }
  .klachten-hub-citaat,
  .klachten-hub-onder {
    padding: 56px 20px;
  }
  .klachten-hub-onder__cta {
    flex-direction: column;
  }
}

/* ============================================================
   v1.0.6.34 — KLACHTPAGINA generiek (6× hergebruikt)
   - Symptomenlijst (visuele checklist)
   - Evidence-callout
   - Testimonial (anoniem)
   - Inline-CTA met sub-tekst

   v1.0.6.77: Token-migratie. 2 hardcoded font-sizes en 8
   spacings vervangen door fluid tokens. Symptomen-li 16px,
   symp-icon 14px en body-prose 17px bewust gelaten om
   mobile-leesbaarheid te beschermen.
============================================================ */

.page-klachtpagina {
  background: var(--zand);
}

/* Symptomen-intro */
.klachtp__symp-intro {
  font-size: 17px;
  line-height: 1.75;
  color: var(--tekst-l);
  margin: 32px 0 18px;
}

/* v1.0.6.274 — drop cap verwijderd. v271-v273 experimenteerden
   met editorial drop cap op .klachtp__symp-intro, maar de
   intro-paragraphs zijn structureel 1 regel (12-20 woorden).
   Een drop cap heeft 3+ regels tekst nodig om hem heen om
   visueel verankerd te zijn — anders hangt de letter los met
   witruimte rechts/onder. Class .klachtp__symp-intro blijft
   intact (gewone styling), pseudo-element weggehaald. */


/* Symptomenlijst — visuele checklist */
.klachtp__symptomen {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-xl);
}
.klachtp__symptomen li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tekst-l);
}
.klachtp__symp-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--koraal);
  font-weight: 600;
  font-size: 14px;
  background: var(--zand-d);
  border-radius: 50%;
  margin-top: 2px;
}

/* ============================================================
   STICKY NARRATIVE SYMPTOMS (v1.0.6.331)
   2-koloms: links sticky heading, rechts scrollende symptomen
============================================================ */
.klachtp-symptoms {
  background: var(--zand);
  padding: var(--space-3xl) var(--space-xl);
}
.klachtp-symptoms__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* Sticky linkerkant */
.klachtp-symptoms__sticky {
  position: sticky;
  top: 120px; /* sticky vanaf onder de header */
}
.klachtp-symptoms__label {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--koraal);
  font-weight: 500;
  margin: 0 0 var(--space-sm);
}
.klachtp-symptoms__heading {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--tekst);
  margin: 0 0 var(--space-md);
}
.klachtp-symptoms__heading em {
  font-style: italic;
  color: var(--koraal);
}
.klachtp-symptoms__intro {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tekst-l);
  margin: 0 0 var(--space-lg);
}

/* Progress bar */
.klachtp-symptoms__progress {
  height: 2px;
  background: rgba(42, 28, 20, 0.10);
  border-radius: 1px;
  overflow: hidden;
  max-width: 120px;
}
.klachtp-symptoms__progress-bar {
  height: 100%;
  width: 0%;
  background: var(--koraal);
  border-radius: 1px;
  transition: width 0.3s ease;
}

/* Scrollbare rechterkant */
.klachtp-symptoms__scroll {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Individueel symptoom */
.klachtp-symptom {
  display: flex;
  gap: var(--space-md);
  align-items: baseline;
  padding: var(--space-md) var(--space-lg);
  background: var(--wit);
  border-radius: 14px;
  border-left: 3px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
  /* Initieel: iets rechts en doorzichtig */
  opacity: 0;
  transform: translateX(20px);
}
.klachtp-symptom.is-visible {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.3s ease;
}
.klachtp-symptom.is-active {
  border-left-color: var(--koraal);
  background: rgba(212, 97, 74, 0.04);
}
@media (prefers-reduced-motion: reduce) {
  .klachtp-symptom {
    opacity: 1;
    transform: none;
  }
}

.klachtp-symptom__nr {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--tekst-ll);
  font-weight: 400;
  flex-shrink: 0;
  padding-top: 2px;
}
.klachtp-symptom.is-active .klachtp-symptom__nr {
  color: var(--koraal);
}
.klachtp-symptom__tekst {
  font-size: 16px;
  line-height: 1.65;
  color: var(--tekst-l);
  margin: 0;
}
.klachtp-symptom.is-active .klachtp-symptom__tekst {
  color: var(--tekst);
}

/* Responsive: tablet en mobiel → gewone kolom */
@media (max-width: 860px) {
  .klachtp-symptoms__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .klachtp-symptoms__sticky {
    position: static;
  }
  .klachtp-symptom {
    opacity: 1;
    transform: none;
  }
}

/* Evidence-callout — zelfde basis als bestaande .callout, maar accent-variant */
.callout--evidence {
  background: var(--zand-d);
  border-left-color: var(--oker);
}
.callout--evidence .callout__label {
  color: var(--oker-tekst);
}

/* Testimonial in klachtpagina (anoniem, ingetogen) */
.klachtp__testimonial {
  margin: var(--space-xl) 0;
  padding: 32px 36px;
  background: var(--wit);
  border-left: 3px solid var(--koraal);
  border-radius: 0 4px 4px 0;
}
.klachtp__testimonial blockquote {
  margin: 0 0 var(--space-sm);
  border: none;
  padding: 0;
  background: none;
}
.klachtp__testimonial blockquote p {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-style: italic;
  font-weight: 300;
  color: var(--tekst);
  line-height: 1.4;
  margin: 0;
}
.klachtp__testimonial figcaption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--tekst-ll);
  letter-spacing: 0;
  margin-top: var(--space-xs);
}

/* Inline-CTA met sub-tekst en knoppen-rij
   (v1.0.6.82: koraal-strip variant uit werkwijze-template verwijderd;
   dit is nu de enige .inline-cta definitie) */
.inline-cta {
  margin: var(--space-xl) 0;
  padding: 40px 36px;
  background: var(--zand-d);
  border-radius: 6px;
  text-align: center;
}
.inline-cta__text {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  color: var(--tekst);
  margin: 0 0 var(--space-xs);
  line-height: 1.3;
}
.inline-cta__sub {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--tekst-l);
  margin: 0 0 var(--space-lg);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.inline-cta__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .klachtp__symptomen {
    grid-template-columns: 1fr;
  }
  .klachtp__testimonial {
    padding: 24px 22px;
    margin: 40px 0;
  }
  .inline-cta {
    padding: 32px 22px;
  }
  .inline-cta__actions {
    flex-direction: column;
  }
}

/* ============================================================
   v1.0.6.38 — ZWANGERSCHAP pijler (4 fase-blokken)
   Hergebruikt page-hero, callout, inline-CTA, FAQ.
   Alleen de fase-blokken zijn nieuw component.

   v1.0.6.81: Token-migratie. 1 hardcoded font-size en 4
   spacings vervangen door fluid tokens. Body 16px (fase body),
   fase-nr 38px en eigen clamp() (fase-titel) bewust intact
   gelaten.
============================================================ */

.page-zwangerschap {
  background: var(--zand);
}

/* Fase-container */
.zwang-fases {
  margin: var(--space-2xl) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* Individuele fase */
.zwang-fase {
  background: var(--wit);
  border-radius: 4px;
  padding: 36px 36px 32px;
  border-left: 3px solid var(--koraal);
  position: relative;
}

.zwang-fase__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-lg);
  margin-bottom: 18px;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--zand-d);
}

.zwang-fase__nr {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 300;
  color: var(--koraal);
  line-height: 1;
  flex-shrink: 0;
}

.zwang-fase__titels {
  flex: 1;
}

.zwang-fase__titel {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--tekst);
  margin: 0 0 4px;
}

.zwang-fase__subtitel {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tekst-ll);
  text-transform: uppercase;
  margin: 0;
}

.zwang-fase__body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tekst-l);
  margin: 0 0 14px;
}
.zwang-fase__body p:last-child {
  margin-bottom: 0;
}
.zwang-fase__body strong {
  color: var(--tekst);
  font-weight: 500;
}

@media (max-width: 640px) {
  .zwang-fases {
    gap: 32px;
  }
  .zwang-fase {
    padding: 28px 22px 24px;
  }
  .zwang-fase__header {
    gap: 16px;
  }
  .zwang-fase__nr {
    font-size: 32px;
  }
}

/* ============================================================
   v1.0.6.39 — FAQ-overzichtspagina
   Categorieën met genummerde headers, quick-jump TOC bovenaan,
   onderaan een "vraag staat er niet bij"-blok.

   v1.0.6.79: Token-migratie. 4 hardcoded font-sizes en 4
   spacings vervangen door fluid tokens. Body-prose 17px,
   body 16px (onder p) en eigen clamp()-ranges (cat-titel,
   onder h2) bewust intact gelaten.
============================================================ */

.page-faq {
  background: var(--zand);
}

/* Intro */
.faq-page__intro {
  margin: var(--space-xl) 0 var(--space-xs);
  max-width: 760px;
}
.faq-page__intro p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--tekst-l);
}

/* Zoekfilter */
.faq-page__search {
  margin: -8px 0 -6px;
  max-width: 900px;
  width: 100%;
  transform: translateY(18px);
}
.faq-page__search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.faq-page__search-row {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 900px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(42, 28, 20, 0.05);
}
.faq-page__search-control {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 999px 0 0 999px;
  background: var(--zand);
  border: 1px solid var(--zand-d);
  border-right: 0;
  box-shadow:
    inset 0 7px 18px rgba(42, 28, 20, 0.22),
    inset 0 2px 4px rgba(42, 28, 20, 0.08),
    inset 0 -2px 0 rgba(253, 250, 246, 0.78);
}
.faq-page__search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  width: 17px;
  height: 17px;
  border: 2px solid var(--tekst-l);
  border-radius: 50%;
  transform: translateY(-50%);
  opacity: 0.9;
  pointer-events: none;
}
.faq-page__search-icon::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 2px;
  right: -6px;
  bottom: -4px;
  background: var(--tekst-l);
  border-radius: 999px;
  transform: rotate(45deg);
}
.faq-page__search-input {
  width: 100%;
  min-height: 54px;
  padding: 14px 18px 14px 54px;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: transparent;
  color: var(--tekst);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
.faq-page__search-input::placeholder {
  color: var(--tekst-ll);
}
.faq-page__search-input:focus {
  outline: none;
}
.faq-page__search-row:focus-within {
  box-shadow: 0 0 0 3px rgba(212, 97, 74, 0.14);
}
.faq-page__search-submit {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  min-height: 54px;
  padding: 0 28px;
  border: 1px solid var(--koraal-d);
  border-radius: 0 999px 999px 0;
  background: var(--koraal);
  color: var(--wit);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.faq-page__search-submit:hover {
  background: var(--koraal-d);
  border-color: var(--koraal-d);
}
.faq-page__search-status {
  margin: 8px 0 0;
  padding-left: 54px;
  color: var(--tekst-l);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Quick-jump TOC */
.faq-page__toc {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin: 40px 0 64px;
  max-width: 900px;
}
.faq-page__toc-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--wit);
  border: 1px solid var(--zand-d);
  border-radius: 4px;
  text-decoration: none;
  color: var(--tekst);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.faq-page__toc-link:hover {
  border-color: var(--koraal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--tekst);
}
.faq-page__toc-nr {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--koraal);
  line-height: 1;
  flex-shrink: 0;
}
.faq-page__toc-titel {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--tekst);
}

/* Categorie-sectie */
.faq-page__cat {
  margin: var(--space-xl) 0;
  scroll-margin-top: var(--space-xl); /* Voor anchor-jump met enige ruimte boven */
}
.faq-page__search + .faq-page__cat {
  margin-top: 24px;
}

.faq-page__cat-header {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: var(--space-lg);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--zand-d);
}

.faq-page__cat-nr {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--koraal);
  line-height: 1;
  flex-shrink: 0;
}

.faq-page__cat-titel {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  color: var(--tekst);
  margin: 0;
  line-height: 1.2;
}

/* Onderaan-blok */
.faq-page__onder {
  margin: 80px 0 40px;
  padding: 48px 36px;
  background: var(--zand-d);
  border-radius: 6px;
  text-align: center;
}
.faq-page__onder h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 300;
  color: var(--tekst);
  margin: 0 0 14px;
}
.faq-page__onder p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tekst-l);
  margin: 0 0 28px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.faq-page__onder-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .faq-page__search {
    margin: -6px 0 0;
    transform: translateY(12px);
  }
  .faq-page__search-row {
    max-width: none;
  }
  .faq-page__search-input {
    min-height: 50px;
    padding-left: 48px;
  }
  .faq-page__search-submit {
    min-height: 50px;
    padding: 0 18px;
    font-size: 15px;
  }
  .faq-page__search-status {
    padding-left: 48px;
  }
  .faq-page__search + .faq-page__cat {
    margin-top: 20px;
  }
  .faq-page__toc {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 32px 0 48px;
  }
  .faq-page__cat-header {
    gap: 14px;
  }
  .faq-page__cat-nr {
    font-size: 26px;
  }
  .faq-page__onder {
    padding: 36px 22px;
    margin: 56px 0 24px;
  }
  .faq-page__onder-cta {
    flex-direction: column;
  }
}

/* ============================================================
   v1.0.6.41 — ERVARINGEN-pagina
   2-koloms grid van anonieme testimonial-kaarten.

   v1.0.6.79: Token-migratie. 4 hardcoded font-sizes en 4
   spacings vervangen door fluid tokens. Body-prose 17px,
   quote-marker 32px bewust intact gelaten.

   v1.0.6.80: Disclaimer-blok (.ervaringen__disclaimer) en
   Zorgkaart-onderblok (.ervaringen__onder) verwijderd
   — passen niet bij een echte praktijkwebsite.
============================================================ */

.page-ervaringen {
  background: var(--zand);
}

/* Intro */
.ervaringen__intro {
  margin: var(--space-xl) 0 var(--space-lg);
  /* v1.0.6.96: max-width verwijderd — volgt content-container--wide, gelijk aan kaarten-grid */
}
.ervaringen__intro p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--tekst-l);
}

/* Grid van ervaringen — v1.0.6.287: stabiele pseudo-masonry.
   Twee eigen kolommen voorkomen CSS-columns hover-bugs en grid-rij-witruimte. */
.ervaringen__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: 24px 0 64px;
}

.ervaringen__column {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Individuele kaart */
.ervaring-card {
  background: var(--wit);
  border-radius: 18px; /* v1.0.6.279 — bento-upgrade: 4px → 18px */
  padding: 24px 24px 20px;
  border-left: 3px solid var(--koraal);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 0;
  /* v1.0.6.279 — klikbare card (<a>-tag) styling */
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* v1.0.6.280 — GPU-layer voor masonry hover-fix */
  will-change: transform;
  /* v1.0.6.281 — isolatie voor masonry stacking-context bug */
  isolation: isolate;
}

/* Klikbare kaarten mogen bij hover niet de globale a:hover-koraalkleur erven. */
.ervaring-card,
.ervaring-card:hover,
.ervaring-card:focus-visible {
  color: var(--tekst);
}

/* v1.0.6.281 — force zwarte tekst in alle children (geen koraal inheritance) */
.ervaring-card * {
  color: inherit;
}

.ervaring-card--home {
  position: relative;
  padding-right: 48px;
}

.ervaring-card__google-mark {
  position: absolute;
  top: 17px;
  right: 20px;
  width: 22px;
  height: 22px;
  display: block;
  fill: var(--koraal);
}

/* v1.0.6.279 — bento hover-effect: lift + koraal-ring */
.ervaring-card:hover {
  position: relative; /* v1.0.6.280 — fix voor masonry-overlap */
  z-index: 100 !important; /* v1.0.6.280 — force boven masonry-kolommen */
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px var(--koraal), var(--shadow-md);
  /* v1.0.6.281 — 3D transform fix voor masonry */
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* v1.0.6.279 — specificity-boost voor scroll-reveal conflict (zie v278 bug-fix) */
html.aq-js .aq-reveal.ervaring-card:hover {
  position: relative;
  z-index: 100 !important;
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px var(--koraal), var(--shadow-md); /* v1.0.6.280 — toegevoegd (was missing) */
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.ervaring-card__tag {
  /* Gedeprecieerd sinds v1.0.6.93 — klacht-tag verwijderd uit template.
     Klasse behouden voor backwards-compat met eventuele eigen widgets. */
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--koraal);
  background: var(--zand);
  padding: 4px 10px;
  border-radius: 2px;
  line-height: 1.4;
}

/* v1.0.6.93 — Review-kaart meta-rij: sterren + Google-bron */
.ervaring-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ervaring-card__rating {
  display: inline-flex;
  gap: 3px;
  line-height: 1;
}
.ervaring-card__star {
  display: block;
  fill: #FBBC04; /* Google-goud — bewuste keuze voor herkenning */
}

.ervaring-card__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ervaring-card__source-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--koraal);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--koraal);
  /* v1.0.6.102 — schaalt mee bij hover op source-link, zie :has()-regel onderaan */
  transition: transform 0.2s ease;
  transform-origin: center center;
}
.ervaring-card__source-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tekst-l);
  background: var(--zand);
  border: 1px solid rgba(42, 28, 20, 0.08);
  border-radius: 999px;
  padding: 4px 9px;
  line-height: 1;
}

/* v1.0.6.93 — Review-invitation blok */
.ervaringen__invite {
  margin: var(--space-xl) auto var(--space-2xl);
  max-width: 640px;
  padding: var(--space-lg) var(--space-md);
  background: var(--zand-d);
  border-radius: 4px;
  text-align: center;
}
.ervaringen__invite-titel {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--tekst);
  line-height: 1.25;
}
.ervaringen__invite-body {
  margin: 0 auto var(--space-md);
  max-width: 520px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tekst-l);
}
.ervaringen__invite-cta {
  display: inline-block;
}

/* v1.0.6.97: selector verhoogd naar .content-container .ervaring-card__quote
   om globale .content-container blockquote (regel 1530) te overschrijven.
   Expliciete resets voor border-left/padding/margin/font-weight want
   blockquote-parent erft anders van de globale styling. */
.content-container .ervaring-card__quote {
  margin: 0;
  padding: 0 0 0 14px;
  border-left: none;
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 0.852rem + 0.10vw, 0.938rem); /* 14 -> 15px */
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
  color: var(--tekst);
  position: relative;
}
.content-container .ervaring-card__quote::before {
  content: '\201C'; /* curly opening quote */
  position: absolute;
  left: 0;
  top: -1px;
  font-size: 20px;
  color: var(--koraal);
  line-height: 1;
  font-family: var(--font-display); /* sierlijke quote als accent */
}

.ervaring-card__more {
  color: var(--koraal) !important;
  font-style: normal;
  font-weight: 500;
  white-space: nowrap;
}

.ervaring-card__attr {
  margin: 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--zand-d);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 500;
  color: var(--tekst-ll);
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .ervaringen__grid {
    grid-template-columns: 1fr;
    margin: 24px 0 48px;
  }
  .ervaring-card {
    padding: 22px 20px 18px;
    margin-bottom: 20px;
  }
  .content-container .ervaring-card__quote {
    font-size: 14px;
  }
  .ervaringen__invite {
    padding: var(--space-md) var(--space-sm);
  }
  .ervaringen__invite-body {
    font-size: 15px;
  }
}

/* ============================================================
   v1.0.6.42 — NIEUW NAVIGATIE-SYSTEEM
   - Topbar met telefoon/e-mail + snelle links + Afspraak-knop
   - Klachten-dropdown (hover desktop + klik touch)
   - Sticky-desktop (JS voegt .is-sticky toe aan <body>)
   - Active page-state met koraal onderlijn
============================================================ */

/* -----------------------------------------------------------
   TOPBAR
----------------------------------------------------------- */
.site-topbar {
  background: var(--zand-d);
  color: var(--tekst-l);
  font-family: var(--font-body);
  font-size: 13px;
  border-bottom: 1px solid rgba(42, 28, 20, 0.05);
}

.site-topbar__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 8px 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  min-height: 36px;
}

.site-topbar__left,
.site-topbar__right {
  /* Zie toelichting bij blok 2 (v1.0.6.61) */
  display: contents;
}

/* Telefoon en e-mail links */
.site-topbar__contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tekst-l);
  text-decoration: none;
  transition: color 0.2s;
}
.site-topbar__contact:hover,
.site-topbar__contact:focus {
  color: var(--koraal);
}

.site-topbar__icon {
  flex-shrink: 0;
  opacity: 0.7;
}

/* "Bel"-label verschijnt pas op mobiel */
.site-topbar__label-mobile {
  display: none;
}

/* Snelle links rechts (Ervaringen, FAQ) */
.site-topbar__link {
  color: var(--tekst-l);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}
.site-topbar__link:hover,
.site-topbar__link:focus {
  color: var(--koraal);
}

/* Afspraak-knop CSS verwijderd in v1.0.6.50 — knop is uit de topbar gehaald */

/* Compact responsive */
@media (max-width: 1100px) {
  .site-topbar__inner { padding: 8px 24px; }
}
@media (max-width: 720px) {
  .site-topbar__inner {
    padding: 6px 16px;
    gap: 12px;
  }
  /* v1.0.6.76: mail was hier "display: none" — nu zichtbaar met "Mail"-label op mobiel */
  /* v1.0.6.52 — .site-topbar__link wél zichtbaar op mobiel (zie tweede override voor styling) */
  .site-topbar__label { display: none; }
  .site-topbar__label-mobile {
    display: inline;
    font-weight: 500;
  }
  .site-topbar__left,
  .site-topbar__right {
    gap: 12px;
  }
}

/* -----------------------------------------------------------
   HOOFDMENU — ACTIVE STATE + VERFIJNINGEN
----------------------------------------------------------- */
.site-nav a {
  position: relative;
  transition: color 0.2s;
  padding-bottom: 3px;
}

/* Active page: koraal onderlijn (2px) */
.site-nav .current-menu-item > a,
.site-nav .current-menu-parent > a,
.site-nav .current_page_item > a,
.site-nav .current_page_parent > a {
  color: var(--koraal);
}
.site-nav .current-menu-item > a::after,
.site-nav .current-menu-parent > a::after,
.site-nav .current_page_item > a::after,
.site-nav .current_page_parent > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--koraal);
}

/* Hover — subtiele lijn fade-in */
@media (min-width: 1001px) {
  .site-nav a::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -3px;
    height: 2px;
    background: var(--koraal);
    transition: left 0.25s, right 0.25s;
    opacity: 0;
  }
  .site-nav a:hover::after,
  .site-nav a:focus::after {
    left: 0;
    right: 0;
    opacity: 1;
  }
  /* Active state heeft altijd volle lijn — hover effect uitschakelen op active */
  .site-nav .current-menu-item > a::after,
  .site-nav .current-menu-parent > a::after,
  .site-nav .current_page_item > a::after,
  .site-nav .current_page_parent > a::after {
    left: 0;
    right: 0;
    opacity: 1;
  }
}

/* -----------------------------------------------------------
   KLACHTEN-DROPDOWN (sub-menu) — opruiming v1.0.6.125
   Eerdere "Set 1" (124 regels) hier weggehaald: was duplicaat
   van het tweede KLACHTEN-DROPDOWN (DESKTOP)-blok verderop in
   dit bestand. Dat tweede blok is nu de enige bron van waarheid.
   Reden van verwijdering: bug op iPhone — sub-menu-items waren
   onleesbaar (zand-tekst op licht-roze achtergrond, contrast
   ~1.1:1, ver onder WCAG AA). Zie ook v1.0.6.125 mobile fix
   in MOBILE OVERLAY-blok. (Versie 124 was kortstondig in gebruik
   in een parallelle chat-sessie, daarom hernoemd naar 125.)
----------------------------------------------------------- */

/* Spacer — initiële reset (JS beheert height dynamisch) */
.site-header-spacer {
  display: none;
  height: 0;
}

/* -----------------------------------------------------------
   FOOTER UITBREIDING — 4-koloms grid
----------------------------------------------------------- */
.site-footer__grid {
  grid-template-columns: 1.4fr 1fr 1fr 1fr; /* Brand-kolom iets breder */
}

@media (max-width: 960px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   v1.0.6.42 — TOPBAR + STICKY HEADER + KLACHTEN-DROPDOWN
   Topbar met telefoon/email/links, sticky desktop hoofdmenu,
   klachten-dropdown (hover desktop, klik touch/mobile),
   mobile overlay-menu.
============================================================ */

/* ========== TOPBAR ========== */
.site-topbar {
  /* v1.0.6.397 — achtergrond 1 tint lichter dan --zand-d (#ECD8B4)
     voor een zachtere bovenrand die minder hard contrasteert met de
     witte content eronder. Tussenwaarde tussen --zand-d en --zand. */
  background: #F2E1C7;
  color: var(--tekst-l);
  font-family: var(--font-body);
  font-size: 13px;
  border-bottom: 1px solid rgba(42,28,20,0.08);
}

.site-topbar__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  /* v1.0.6.323 — topbar-items als luchtige cluster: minder breed dan
     space-between, maar niet zo propperig als de eerste compacte versie.
     v1.0.6.396 — gap vergroot voor meer adem tussen de 4 items.
     v1.0.6.397 — gap nog verder vergroot. */
  justify-content: center;
  align-items: center;
  padding: 8px 64px;
  min-height: 36px;
  gap: clamp(64px, 11vw, 200px);
}

.site-topbar__left,
.site-topbar__right {
  /* display:contents maakt de wrappers onzichtbaar in de flex-layout,
     zodat de 4 items (tel, email, Ervaringen, FAQ) als directe kinderen
     van .site-topbar__inner worden behandeld. v1.0.6.321: verdeling
     gebeurt als gecentreerde cluster via gap. */
  display: contents;
}

.site-topbar__contact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tekst-l);
  text-decoration: none;
  transition: color 0.2s;
  letter-spacing: 0;
}
.site-topbar__contact:hover {
  color: var(--koraal);
}

.site-topbar__icon {
  flex-shrink: 0;
  color: var(--koraal);
  opacity: 0.85;
}

.site-topbar__label-mobile {
  display: none;
}

.site-topbar__link {
  color: var(--tekst-l);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: color 0.2s;
}
.site-topbar__link:hover {
  color: var(--koraal);
}

/* ==================== TAALSWITCHER — VLAG-CARROUSEL (v1.0.6.520) ====================
   De huidige taal staat als compacte vlag in de topbalk. Op hover (of tik) vouwt een
   carrousel met alle talen open: vlaggen die met de klok mee rond een cirkel
   draaien en groeien. Klikken kiest de taal; de vlaggen krimpen weg en de pagina
   herlaadt in de gekozen taal (waardoor die vlag weer de topbalk-vlag wordt).
   Schaalt automatisch mee: het aantal vlaggen volgt het aantal Polylang-talen. */
.site-topbar__langs {
  --aq-carousel-size: 240px;
  --aq-orb-radius: 80px;
  --aq-orb-size: 52px;
  --aq-orbit-duration: 26s;
  position: relative;
  display: inline-flex;
  align-items: center;
  transform: translateY(-1px);
  z-index: 320;
}

/* Trigger = vlag van de huidige taal */
.site-topbar__lang-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.22s ease;
}

.site-topbar__lang-trigger:hover,
.site-topbar__lang-trigger:focus-visible,
.site-topbar__langs.is-open .site-topbar__lang-trigger {
  outline: none;
  transform: scale(1.1);
}

.site-topbar__flag {
  display: block;
  width: 30px;
  height: 20px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(42, 28, 20, 0.24);
}

.site-topbar__lang-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(42, 28, 20, 0.18);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--tekst-l);
  background: rgba(255, 255, 255, 0.5);
}

/* Carrousel-laag (overlay onder de topbalk) */
.site-topbar__lang-carousel {
  position: absolute;
  top: calc(100% - 2px);
  right: -12px;
  width: var(--aq-carousel-size);
  height: var(--aq-carousel-size);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.35);
  transform-origin: 88% 6%;
  transition: opacity 0.26s ease, transform 0.36s cubic-bezier(0.34, 1.4, 0.5, 1);
  z-index: 400;
}

.site-topbar__lang-carousel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--aq-orb-radius) * 2 + var(--aq-orb-size));
  height: calc(var(--aq-orb-radius) * 2 + var(--aq-orb-size));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 14px 40px rgba(42, 28, 20, 0.12);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.site-topbar__langs.is-open .site-topbar__lang-carousel {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.site-topbar__langs.is-open .site-topbar__lang-carousel::before {
  opacity: 1;
}

/* Rotor draait de vlaggen met de klok mee */
.site-topbar__lang-rotor {
  position: absolute;
  inset: 0;
  animation: aq-orbit var(--aq-orbit-duration) linear infinite;
  animation-play-state: paused;
}

.site-topbar__langs.is-open .site-topbar__lang-rotor {
  animation-play-state: running;
}

/* Eén vlag op de cirkel */
.site-topbar__lang-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--aq-orb-size);
  height: var(--aq-orb-size);
  text-decoration: none;
  transform:
    translate(-50%, -50%)
    rotate(var(--aq-orb-angle))
    translateY(calc(-1 * var(--aq-orb-radius)))
    rotate(calc(-1 * var(--aq-orb-angle)));
}

/* Tegen-rotatie houdt de vlag rechtop terwijl hij meedraait */
.site-topbar__lang-orb-spin {
  display: block;
  width: 100%;
  height: 100%;
  animation: aq-orbit-reverse var(--aq-orbit-duration) linear infinite;
  animation-play-state: paused;
}

.site-topbar__langs.is-open .site-topbar__lang-orb-spin {
  animation-play-state: running;
}

.site-topbar__lang-orb-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease;
}

.site-topbar__lang-orb:hover .site-topbar__lang-orb-inner,
.site-topbar__lang-orb:focus-visible .site-topbar__lang-orb-inner {
  transform: scale(1.16);
  outline: none;
}

.site-topbar__lang-orb-flag {
  width: 44px;
  height: 30px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 5px 14px rgba(42, 28, 20, 0.24);
}

/* Huidige taal: geen ring meer — alleen de vlag zelf. */

.site-topbar__lang-orb-code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--aq-orb-size);
  height: var(--aq-orb-size);
  border-radius: 50%;
  border: 2px solid var(--wit);
  background: var(--zand);
  font: 700 13px/1 var(--font-body);
  color: var(--tekst);
  box-shadow: 0 6px 18px rgba(42, 28, 20, 0.24);
}

.site-topbar__lang-orb-label {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(36, 20, 16, 0.92);
  color: #fff;
  font: 600 11px/1 var(--font-body);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.site-topbar__lang-orb:hover .site-topbar__lang-orb-label,
.site-topbar__lang-orb:focus-visible .site-topbar__lang-orb-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Kiezen: gekozen vlag groeit, de rest krimpt weg vóór de pagina herlaadt */
.site-topbar__langs.is-selecting .site-topbar__lang-rotor,
.site-topbar__langs.is-selecting .site-topbar__lang-orb-spin {
  animation-play-state: paused;
}

.site-topbar__langs.is-selecting .site-topbar__lang-orb {
  opacity: 0;
  transition: opacity 0.26s ease;
}

.site-topbar__langs.is-selecting .site-topbar__lang-orb-inner {
  transform: scale(0.2);
  transition: transform 0.26s ease;
}

.site-topbar__langs.is-selecting .site-topbar__lang-orb.is-chosen {
  opacity: 1;
  z-index: 3;
}

.site-topbar__langs.is-selecting .site-topbar__lang-orb.is-chosen .site-topbar__lang-orb-inner {
  transform: scale(1.3);
}

@keyframes aq-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes aq-orbit-reverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

.site-topbar:has(.site-topbar__langs) {
  overflow: visible;
  z-index: 300;
}

@media (prefers-reduced-motion: reduce) {
  .site-topbar__lang-rotor,
  .site-topbar__lang-orb-spin {
    animation: none !important;
  }
  .site-topbar__lang-carousel,
  .site-topbar__langs.is-open .site-topbar__lang-carousel {
    transition: opacity 0.2s ease;
    transform: none;
  }
}

/* Topbar mobile responsive */
@media (max-width: 720px) {
  .site-topbar__inner {
    padding: 6px 18px;
    gap: 12px;
    min-height: 44px;
  }
  .site-topbar__left,
  .site-topbar__right {
    gap: 12px;
  }
  /* v1.0.6.76: mail is nu zichtbaar op mobiel (dubbele "display: none"-regel verwijderd) */
  /* v1.0.6.52 — Ervaringen en FAQ tonen op mobiel (waren verborgen sinds Afspraak-knop weg is) */
  .site-topbar__link {
    font-size: 11px;
    letter-spacing: 0;
  }
  .site-topbar__langs {
    --aq-carousel-size: 196px;
    --aq-orb-radius: 64px;
    --aq-orb-size: 44px;
  }
  .site-topbar__flag {
    width: 28px;
    height: 19px;
  }
  .site-topbar__lang-text {
    min-width: 24px;
    height: 24px;
  }
  .site-topbar__lang-carousel {
    right: -8px;
  }
  .site-topbar__lang-orb-flag {
    width: 38px;
    height: 26px;
  }
  /* Verkort telefoon-label */
  .site-topbar__contact .site-topbar__label {
    display: none;
  }
  .site-topbar__contact .site-topbar__label-mobile {
    display: inline;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0;
  }
}

/* ========== STICKY DESKTOP HEADER ========== */
@media (min-width: 1001px) {
  .site-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 10px 64px;
    /* v1.0.6.405 — geen backdrop-filter op header zelf:
       creëerde stacking context die submenu's blur blokkeerde.
       Bg iets opaak-er ter compensatie (96 → 97). */
    background: rgba(251, 240, 228, 0.97);
    box-shadow: 0 2px 12px rgba(42,28,20,0.06);
    transition: padding 0.25s ease, box-shadow 0.25s ease;
    animation: aq-slide-down 0.3s ease;
  }

  /* Krimpend logo bij sticky — v1.0.6.190: ~25% groter dan voorheen (38→48, 24→30) */
  .site-header.is-sticky .site-logo__mark {
    width: 48px;
    height: 48px;
    transition: width 0.25s, height 0.25s;
  }
  .site-header.is-sticky .site-logo__text {
    font-size: 30px;
    transition: font-size 0.25s;
  }

  /* Body krijgt margin om jump te voorkomen */
  body.has-sticky-header {
    padding-top: 84px; /* hoogte van sticky header */
  }
}

@keyframes aq-slide-down {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* ========== ACTIVE PAGE INDICATOR ========== */
.site-nav .menu-item.current-menu-item > a,
.site-nav .menu-item.current-menu-parent > a,
.site-nav .menu-item.current-menu-ancestor > a {
  color: var(--koraal);
  position: relative;
}
/* Streepje ALLEEN op de exacte actieve pagina (current-menu-item).
   current-menu-ancestor krijgt koraal-kleur maar GEEN streepje —
   voorkomt fout streepje wanneer WP page-parent-relaties meeweegt. */
.site-nav .menu-item.current-menu-item > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--koraal);
  border-radius: 1px;
}

/* ========== KLACHTEN-DROPDOWN (DESKTOP) ========== */
.site-nav .menu {
  position: relative;
}

.site-nav .menu-item-has-children {
  position: relative;
}

/* Caret-icon naast parent-link — v1.0.6.64
   De oude border-truc (geroteerde border-driehoekje via ::after)
   is uitgeschakeld omdat dit op sommige schermen als een vieze
   punt/streepje oogde. De caret wordt nu toegevoegd als
   <span class="nav-caret"> via PHP-filter aqinesis_menu_caret
   (zie functions.php sectie 5c). Zie .nav-caret regels elders. */
.site-nav .menu-item-has-children > a::after {
  content: none;
}
.site-nav .menu-item-has-children.current-menu-item > a::after,
.site-nav .menu-item-has-children.current-menu-parent > a::after,
.site-nav .menu-item-has-children.current-menu-ancestor > a::after {
  content: none;
}
.site-nav .nav-caret {
  display: inline-block;
  margin-left: 7px;
  vertical-align: 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

/* Sub-toggle knop — geïnjecteerd via JS naast de parent-link.
   Desktop: verborgen. Mobile: brede tap-zone rechts. */
.sub-toggle {
  display: none;
}
@media (max-width: 1000px) {
  /* Li als flex-kolom: eerste rij = link + toggle, daarna submenu */
  .site-nav.is-open .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  /* Link krijgt flex-grow zodat toggle rechts geduwd wordt */
  .site-nav.is-open .menu-item-has-children > a {
    flex: 1 1 auto;
  }
  /* Sub-menu pakt volle breedte onder de link-rij */
  .site-nav.is-open .menu-item-has-children > .sub-menu {
    flex: 0 0 100%;
  }
  /* Toggle: vaste breedte naast de link, zelfde hoogte */
  .site-nav.is-open .sub-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    width: 52px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(42, 28, 20, 0.10);
    cursor: pointer;
    color: var(--tekst-l);
    padding: 0;
    transition: color 0.2s;
  }
  .sub-toggle svg {
    transition: transform 0.2s ease;
  }
  .menu-item-has-children.is-open > .sub-toggle svg {
    transform: rotate(180deg);
  }
  .sub-toggle:hover {
    color: var(--koraal);
  }
  /* v1.0.6.536 — zichtbare focus-ring voor toetsenbordgebruikers; eerder
     verviel de outline waardoor alleen een kleurwissel restte (te subtiel). */
  .sub-toggle:focus-visible {
    color: var(--koraal);
    outline: 2px solid var(--koraal);
    outline-offset: 2px;
  }
  /* nav-caret verbergen op mobile — sub-toggle doet het werk */
  .site-nav.is-open .nav-caret {
    display: none;
  }
}

/* Sub-menu container — v1.0.6.304 Liquid Glass: melkglas, niet app-schreeuwerig.
   v1.0.6.309: basis-melklaag 0.56→0.38 zodat het glas luchtiger blijft.
   v1.0.6.311: meer blur na het terugnemen van de melklaag, zodat het
   glas transparanter maar nog steeds rustig en leesbaar blijft.
   v1.0.6.313: desktop-blur 42→60px.
   v1.0.6.314: desktop-blur terug naar 50px.
   v1.0.6.315: desktop basis-melklaag 0.38→0.32. */
.site-nav .sub-menu {
  list-style: none;
  margin: 0;
  padding: 10px;
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 270px;
  background:
    linear-gradient(135deg, rgba(253, 250, 246, 0.68) 0%, rgba(251, 240, 228, 0.46) 100%),
    rgba(253, 250, 246, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(42, 28, 20, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -1px 0 rgba(42, 28, 20, 0.06);
  backdrop-filter: blur(50px) saturate(165%);
  -webkit-backdrop-filter: blur(50px) saturate(165%);
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 50;
  overflow: hidden;
}
.site-nav .sub-menu::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.13) 36%, rgba(255, 255, 255, 0) 68%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
  pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-nav .sub-menu {
    background: rgba(253, 250, 246, 0.96);
  }
}

/* Open via hover (desktop met muis) of via .is-open class (touch/mobile) */
@media (hover: hover) and (pointer: fine) and (min-width: 1001px) {
  .site-nav .menu-item-has-children:hover > .sub-menu,
  .site-nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  /* Caret-span rotatie op hover (in plaats van de oude ::after rotatie) */
  .site-nav .menu-item-has-children:hover > a .nav-caret,
  .site-nav .menu-item-has-children:focus-within > a .nav-caret {
    transform: rotate(180deg);
    opacity: 1;
  }
}

/* Click-toggle voor touch en mobile */
.site-nav .menu-item-has-children.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-nav .menu-item-has-children.is-open > a .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* Sub-menu items */
.site-nav .sub-menu li {
  display: block;
  width: 100%;
  position: relative;
  z-index: 1;
}

.site-nav .sub-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tekst-l);
  opacity: 1;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.site-nav .sub-menu a:hover,
.site-nav .sub-menu a:focus {
  background: rgba(255, 255, 255, 0.38);
  border-color: rgba(255, 255, 255, 0.52);
  color: var(--tekst);
  transform: translateX(2px);
}

/* Active sub-item */
.site-nav .sub-menu .current-menu-item > a {
  background: rgba(212, 97, 74, 0.12);
  border-color: rgba(212, 97, 74, 0.16);
  color: var(--koraal);
  opacity: 1;
  font-weight: 600;
}
/* Ondertussen: geen underline-bar onder sub-items (overschrijf de active rule) */
.site-nav .sub-menu .current-menu-item > a::after {
  display: none;
}
.site-nav .sub-menu .aq-menu-all-klachten {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.50);
}
.site-nav .sub-menu .aq-menu-all-klachten > a {
  color: var(--koraal);
  font-weight: 700;
}

/* ========== MOBILE OVERLAY (verbeterd) ========== */
@media (max-width: 1000px) {
  .site-nav.is-open .menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }

  .site-nav.is-open .menu > .menu-item {
    width: 100%;
    border-bottom: 1px solid rgba(42,28,20,0.08);
  }
  .site-nav.is-open .menu > .menu-item:last-child {
    border-bottom: none;
  }

  .site-nav.is-open .menu > .menu-item > a {
    display: block;
    padding: 16px 8px;
    font-size: 16px;
    text-transform: none;
    letter-spacing: 0;
  }

  /* Sub-menu in mobile overlay — warm accordion-pocket. */
  .site-nav.is-open .sub-menu {
    position: static;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.44),
      0 10px 28px rgba(42, 28, 20, 0.06);
    border: 0;
    border-radius: 14px;
    background:
      linear-gradient(135deg, rgba(253, 250, 246, 0.68), rgba(251, 240, 228, 0.46)),
      rgba(253, 250, 246, 0.40);
    backdrop-filter: blur(34px) saturate(160%);
    -webkit-backdrop-filter: blur(34px) saturate(160%);
    padding: 8px;
    margin: 4px 0 12px;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .site-nav.is-open .menu-item-has-children.is-open > .sub-menu {
    max-height: 500px;
  }
  .site-nav.is-open .sub-menu a {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0);
    font-size: 14px;
    color: var(--tekst-l);
    opacity: 1;                   /* override desktop 0.85 — vol contrast op mobile */
    background: transparent;
    white-space: normal;          /* lange labels mogen wrappen op smal scherm */
  }
  .site-nav.is-open .sub-menu a:hover,
  .site-nav.is-open .sub-menu a:focus {
    background: rgba(255, 255, 255, 0.36);
    border-color: rgba(255, 255, 255, 0.48);
    color: var(--tekst);
  }
  .site-nav.is-open .sub-menu .current-menu-item > a {
    color: var(--koraal);
    font-weight: 600;
  }
  /* Caret ::after op mobile niet meer nodig — sub-toggle doet het werk */
  .site-nav.is-open .menu-item-has-children > a::after {
    content: none;
  }
  /* Activatiestreepje (::after) ook op mobile onderdrukken voor has-children:
     de koraal-kleur is voldoende actieve state-aanduiding */
  .site-nav .menu-item-has-children.current-menu-item > a::after,
  .site-nav .menu-item-has-children.current-menu-parent > a::after,
  .site-nav .menu-item-has-children.current-menu-ancestor > a::after {
    content: none;
  }

  /* Sticky onderdrukken op mobile */
  .site-header.is-sticky {
    position: static !important;
    background: var(--zand) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 18px 32px !important;
  }
  body.has-sticky-header {
    padding-top: 0 !important;
  }
}

/* -----------------------------------------------------------
   FOOTER — openingstijden + hub-link styling (v1.0.6.42)
----------------------------------------------------------- */
.footer-openingstijden {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.footer-openingstijden li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--tekst-l);
  border-bottom: 1px dashed rgba(42, 28, 20, 0.06);
}
.footer-openingstijden li:last-child {
  border-bottom: none;
}
.footer-openingstijden strong {
  color: var(--tekst);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
}
.footer-openingstijden span {
  color: var(--tekst-ll);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Hub-link in Klachten-kolom */
.footer-hub-link {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(42, 28, 20, 0.08);
}
.footer-hub-link a {
  font-style: italic;
  opacity: 0.85;
}

/* ============================================================
   v1.0.6.44 — WARME WELLNESS TRANSFORMATIE
   
   Twee wijzigingen:
   1. TOPBAR — donkerbruine hout-achtige achtergrond (var(--bruin-mid))
      met lichte zand-tekst en koraal accenten
   2. FOOTER — complete herontwerp met Cormorant italic kopjes,
      ornament-separators, oker dashed-detail, rustige sfeer
============================================================ */

/* -----------------------------------------------------------
   TOPBAR — donkerbruin hout (override op alle eerdere topbar-CSS)
----------------------------------------------------------- */
.site-topbar {
  background: var(--bruin-mid);
  color: var(--zand);
  font-family: var(--font-body);
  font-size: 13px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

/* Subtiele houtnerf-textuur via ultra-lichte gradient overlay.
   Blijft zeer subtiel; geen schreeuwerige textuur. */
.site-topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 240, 220, 0.03) 0%,
    rgba(0, 0, 0, 0.04) 100%);
  pointer-events: none;
}
.site-topbar__inner {
  position: relative; /* om boven het overlay te staan */
}

/* Telefoon en e-mail links — zand-tekst, oker hover */
.site-topbar__contact {
  color: var(--zand);
  opacity: 0.85;
  transition: opacity 0.2s, color 0.2s;
}
.site-topbar__contact:hover,
.site-topbar__contact:focus {
  color: var(--oker);
  opacity: 1;
}

.site-topbar__icon {
  color: var(--oker);
  opacity: 0.8;
}
.site-topbar__contact:hover .site-topbar__icon {
  opacity: 1;
}

/* Snelle links (Ervaringen, FAQ) — zand-tekst, dunner, koraal hover */
.site-topbar__link {
  color: var(--zand);
  opacity: 0.75;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: opacity 0.2s, color 0.2s;
}
.site-topbar__link:hover,
.site-topbar__link:focus {
  color: var(--oker);
  opacity: 1;
}


/* -----------------------------------------------------------
   FOOTER — warme wellness sfeer
   Reset oude .site-footer styling via source-order override
----------------------------------------------------------- */

.site-footer {
  background: radial-gradient(ellipse at top,
    var(--zand) 0%,
    var(--zand-d) 100%);
  color: var(--tekst-l);
  padding: 0 0 48px;
  position: relative;
  margin-top: 80px;
}

/* ===== Ornament-separators ===== */
.site-footer__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 64px;
  max-width: 960px;
  margin: 0 auto;
}
.site-footer__ornament--top {
  padding-top: 0px;
}
.ornament-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(196, 140, 16, 0.25) 30%,
    rgba(196, 140, 16, 0.4) 50%,
    rgba(196, 140, 16, 0.25) 70%,
    transparent 100%);
  max-width: 200px;
}
.ornament-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oker);
  opacity: 0.6;
  flex-shrink: 0;
}

/* ===== CTA-strook (A) ===== */
.site-footer__cta {
  text-align: center;
  padding: 0 32px;
  max-width: 640px;
  margin: 0 auto;
}
.site-footer__cta-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 300;
  color: var(--tekst);
  line-height: 1.2;
  margin: 0 0 16px;
  letter-spacing: 0;
}
.site-footer__cta-title em {
  color: var(--koraal);
  font-style: italic;
  font-weight: 400;
}
.site-footer__cta-sub {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--tekst-l);
  line-height: 1.7;
  margin: 0 auto 32px;
  max-width: 480px;
}
.site-footer__cta-actions {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.site-footer__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--koraal);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 3px;
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
  box-shadow: 0 2px 6px rgba(212, 97, 74, 0.25);
}
.site-footer__cta-btn:hover,
.site-footer__cta-btn:focus {
  background: #b94a34;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(212, 97, 74, 0.3);
}
.site-footer__cta-btn svg {
  transition: transform 0.25s;
}
.site-footer__cta-btn:hover svg {
  transform: translateX(3px);
}
.site-footer__cta-phone {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  transition: color 0.25s;
}
.site-footer__cta-phone-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--tekst-ll);
  font-style: italic;
}
.site-footer__cta-phone-number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--tekst);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s;
}
.site-footer__cta-phone:hover .site-footer__cta-phone-number {
  color: var(--koraal);
}

/* ===== Hoofd-footer grid (B) — override oude 4-koloms ===== */
.site-footer .site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 64px 24px;
}

.footer-col {
  min-width: 0;
}

/* Kopjes: Cormorant italic i.p.v. all-caps DM Sans */
.footer-col .footer-col__title,
.footer-col h4,
.footer-col h4.footer-col__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  color: var(--tekst);
  margin: 0 0 20px;
  text-transform: none;
  letter-spacing: 0;
  position: relative;
  padding-bottom: 10px;
}
.footer-col .footer-col__title::after,
.footer-col h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 1.5px;
  background: var(--koraal);
  opacity: 0.8;
}

/* Lijsten: schoner, meer ritme */
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col ul li {
  margin-bottom: 10px;
}
.footer-col ul li a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--tekst-l);
  text-decoration: none;
  line-height: 1.6;
  transition: color 0.25s, transform 0.25s, padding-left 0.25s;
  display: inline-block;
  letter-spacing: 0;
}
.footer-col ul li a:hover,
.footer-col ul li a:focus {
  color: var(--koraal);
  padding-left: 4px;
}

/* Hub-link (klachten) subtiel anders */
.footer-hub-link {
  margin-top: 14px !important;
  padding-top: 12px;
  border-top: 1px dashed rgba(196, 140, 16, 0.25);
}
.footer-hub-link a {
  font-style: italic;
  color: var(--tekst-ll) !important;
}
.footer-hub-link a:hover {
  color: var(--koraal) !important;
}

/* ===== Brand-kolom styling ===== */
.footer-col--brand .footer-brand__name {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 300;
  color: var(--tekst);
  letter-spacing: 0;
  margin: 0 0 16px;
  line-height: 1;
}
.footer-col--brand .footer-brand__name em {
  color: var(--koraal);
  font-style: italic;
}
.footer-col--brand .footer-brand__tagline {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--tekst-l);
  line-height: 1.7;
  margin: 0 0 22px;
  max-width: 280px;
}
.footer-col--brand .footer-brand__address {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--tekst-l);
  line-height: 1.7;
  margin: 0 0 16px;
}
.footer-col--brand .footer-brand__contact {
  margin: 0 0 28px;
  line-height: 1.8;
}
.footer-col--brand .footer-brand__phone {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--tekst);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color 0.25s;
}
.footer-col--brand .footer-brand__phone:hover {
  color: var(--koraal);
}
.footer-col--brand .footer-brand__email {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--tekst-l);
  text-decoration: none;
  transition: color 0.25s;
}
.footer-col--brand .footer-brand__email:hover {
  color: var(--koraal);
}

/* ===== Openingstijden — urenschema stijl ===== */
.site-footer .footer-openingstijden {
  margin-top: 8px;
}
.footer-openingstijden__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  color: var(--tekst);
  letter-spacing: 0;
}
.footer-openingstijden__title .ornament-dash {
  flex: 0 0 14px;
  height: 1px;
  background: var(--oker);
  opacity: 0.5;
}
.footer-openingstijden__title > span:not(.ornament-dash) {
  flex-shrink: 0;
}
.site-footer .footer-openingstijden ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-openingstijden li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--tekst-l);
  border-bottom: 1px dashed rgba(196, 140, 16, 0.2);
  margin-bottom: 0;
}
.site-footer .footer-openingstijden li:last-child {
  border-bottom: none;
}
.site-footer .footer-openingstijden .dag {
  color: var(--tekst);
  font-weight: 400;
  letter-spacing: 0;
}
.site-footer .footer-openingstijden .tijd {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--tekst-l);
  font-variant-numeric: tabular-nums;
}

/* ===== Trust-balk (C) ===== */
.site-footer__trust {
  text-align: center;
  padding: 20px 32px 32px;
  max-width: 960px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  color: var(--tekst-l);
  line-height: 1.8;
}
.site-footer__trust-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tekst-ll);
  margin-right: 4px;
}
.site-footer__trust-item {
  color: var(--tekst);
  font-weight: 400;
}
.site-footer__trust-sep {
  color: var(--oker-tekst);
  margin: 0 6px;
  opacity: 0.7;
  font-style: normal;
}

/* ===== Copyright / juridisch (onderbalk) — override oude ===== */
.site-footer .site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 64px 0;
  border-top: 1px solid rgba(196, 140, 16, 0.15);
  flex-wrap: wrap;
}
.site-footer__bottom-left p {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--tekst-ll);
  line-height: 1.7;
}
.site-footer__bottom-left p:first-child {
  color: var(--tekst-l);
  font-size: 13px;
  margin-bottom: 6px;
}
.site-footer__registraties span {
  color: var(--oker-tekst);
  opacity: 0.6;
  margin: 0 4px;
}
.site-footer__bottom-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.site-footer__bottom-right a {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--tekst-l);
  text-decoration: none;
  letter-spacing: 0;
  transition: color 0.25s;
}
.site-footer__bottom-right a:hover {
  color: var(--koraal);
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .site-footer .site-footer__grid {
    padding: 16px 32px 24px;
    gap: 40px;
  }
  .site-footer .site-footer__bottom {
    padding: 28px 32px 0;
  }
  .site-footer__ornament {
    padding: 24px 32px;
  }
}

@media (max-width: 900px) {
  .site-footer .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 44px 32px;
  }
  .footer-col--brand {
    grid-column: 1 / -1;
  }
  .footer-col--brand .footer-brand__tagline,
  .footer-col--brand .footer-brand__address {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding-bottom: 32px;
    margin-top: 48px;
  }
  .site-footer__ornament--top {
    padding-top: 40px;
  }
  .site-footer__cta {
    padding: 0 24px;
  }
  .site-footer__cta-actions {
    gap: 20px;
    flex-direction: column;
  }
  .site-footer .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 8px 24px 16px;
  }
  .site-footer__trust {
    padding: 16px 24px 24px;
    font-size: 13px;
    line-height: 2;
  }
  .site-footer__trust-sep {
    display: block;
    height: 0;
    margin: 0;
    visibility: hidden;
  }
  .site-footer .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 24px 0;
  }
  .site-footer__bottom-right {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 18px;
  }
}

/* ============================================================
   v1.0.6.45 — TWEAKS NA TEST
   Fixes:
   1. Topbar donkerder (--bruin-dd i.p.v. --bruin-mid)
   2. Site-header-spacer krijgt zand (voorkomt bruine band
      tussen sticky-header en content)
   3. Footer verticale spacing compacter (~40% minder luchtig)
============================================================ */

/* 1 + 2. TOPBAR + SPACER ============================================ */
.site-topbar {
  background: var(--bruin-dd);
  border-bottom: none; /* geen extra lijn - maakt overgang cleaner */
}
.site-topbar::before {
  /* overlay-gradient subtieler - alleen lichte top-edge, geen bottom */
  background: linear-gradient(180deg,
    rgba(255, 240, 220, 0.025) 0%,
    transparent 60%);
}

/* Spacer krijgt zand-achtergrond — voorkomt body-bruin-doorschemer
   wanneer sticky-header actief is en padding iets anders is dan
   de originele header-hoogte */
.site-header-spacer {
  background: var(--zand);
}

/* 3. FOOTER COMPACTER =============================================== */

/* Minder margin-top en padding-bottom op footer zelf */
.site-footer {
  margin-top: 40px; /* was 80px */
  padding: 0 0 24px; /* was 0 0 48px */
}

/* Ornament-separators: minder ruimte */
.site-footer__ornament {
  padding: 14px 64px; /* was 28px 64px */
}
.site-footer__ornament--top {
  padding-top: 32px; /* was 56px */
}

/* CTA-sectie compacter */
.site-footer__cta-title {
  margin: 0 0 12px; /* was 16px */
}
.site-footer__cta-sub {
  margin: 0 auto 20px; /* was 32px */
}

/* Grid padding boven en onder */
.site-footer .site-footer__grid {
  padding: 4px 64px 8px; /* was 16px 64px 24px */
}

/* Trust-balk compacter */
.site-footer__trust {
  padding: 12px 32px 16px; /* was 20px 32px 32px */
}

/* Onderbalk compacter */
.site-footer .site-footer__bottom {
  padding: 18px 64px 0; /* was 28px 64px 0 */
}

/* Openingstijden iets minder ruim */
.site-footer .footer-openingstijden li {
  padding: 5px 0; /* was 6px 0 */
}

/* Brand-tagline regels minder spacing */
.footer-col--brand .footer-brand__tagline {
  margin: 0 0 16px; /* was 22px */
}
.footer-col--brand .footer-brand__address {
  margin: 0 0 12px; /* was 16px */
}
.footer-col--brand .footer-brand__contact {
  margin: 0 0 20px; /* was 28px */
}

/* Responsive aanpassingen */
@media (max-width: 1100px) {
  .site-footer .site-footer__grid {
    padding: 4px 32px 8px;
  }
  .site-footer .site-footer__bottom {
    padding: 18px 32px 0;
  }
  .site-footer__ornament {
    padding: 12px 32px;
  }
}
@media (max-width: 640px) {
  .site-footer {
    margin-top: 32px;
    padding-bottom: 20px;
  }
  .site-footer__ornament--top {
    padding-top: 24px;
  }
  .site-footer .site-footer__grid {
    padding: 4px 24px 8px;
  }
}

/* ============================================================
   v1.0.6.46 — ECHTE HOUT-MATCH + AQ/inesis SWAP
   Fixes:
   1. Topbar krijgt EXACT dezelfde hout-textuur als .cta-banner
      (hout-img + hout-overlay-sterk op tekst-kleur basis)
   2. Footer gebruikt padding-top i.p.v. margin-top
      (margin laat body-bruin doorschemeren als smalle strook)
   3. AQinesis in footer: AQ = koraal, inesis = zwart italic
      (consistent met header-logo)
============================================================ */

/* 1. TOPBAR — hout-textuur matching ================================ */
.site-topbar {
  background:
    var(--hout-overlay-sterk),
    var(--hout-img) center/cover no-repeat,
    var(--tekst);
  border-bottom: none;
}
/* Disable de vorige ::before gradient — textuur + overlay regelen alles */
.site-topbar::before {
  content: none;
}

/* 2. FOOTER — margin → padding =====================================
   Oorzaak strook: margin-top creëert lege ruimte waar body (bruin-mid)
   doorschemert. Padding-top vult zich met zand-gradient. */
.site-footer {
  margin-top: 0;
  padding-top: 40px;
}
@media (max-width: 640px) {
  .site-footer {
    margin-top: 0;
    padding-top: 32px;
  }
}

/* 3. AQINESIS BRAND-NAAM in footer — AQ koraal, inesis zwart ========
   Voorheen: AQ zwart (default tekst) + inesis koraal (via em).
   Nu: consistent met header-logo structuur. */
.footer-col--brand .footer-brand__name {
  /* Reset default kleur, we stylen per span */
  color: var(--tekst);
}
.footer-col--brand .footer-brand__aq {
  color: var(--koraal);
  font-weight: 500;
  font-style: normal;
}
.footer-col--brand .footer-brand__inesis {
  color: var(--tekst);
  font-style: italic;
  font-weight: 400;
}
/* De oude em-regel die alles koraal maakte is niet meer nodig —
   we gebruiken expliciete spans. Voor het geval er ergens nog een
   losse <em> in zit (door oude seed-content): niet forceren. */

/* ============================================================
   v1.0.6.47 — ONDERBALK RUSTIGER
   Nieuwe structuur: twee gecentreerde regels onder hairline.
   Regel 1 = juridische links (actief, primair)
   Regel 2 = identificatie (passief, kleiner, grijsiger)
============================================================ */

.site-footer .site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 64px 0;
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid rgba(196, 140, 16, 0.15);
  text-align: center;
}

/* === Regel 1: Juridische links (gecentreerd, kleine dots ertussen) === */
.site-footer__juridisch {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 14px;
  font-family: var(--font-body);
  font-size: 14px; /* v1.0.6.185: gelijkgetrokken met footer-col links */
}
.site-footer__juridisch a {
  color: var(--tekst-l);
  text-decoration: none;
  letter-spacing: 0;
  transition: color 0.25s, text-decoration-color 0.25s;
  padding: 2px 0;
}
.site-footer__juridisch a:hover,
.site-footer__juridisch a:focus {
  color: var(--koraal);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.site-footer__juridisch-sep {
  color: var(--oker-tekst);
  opacity: 0.55;
  font-size: 14px;
  user-select: none;
  margin: 0 4px;
}

/* === Regel 2: Identificatie (subtiel, klein, grijsiger) === */
.site-footer__identificatie {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px; /* v1.0.6.185: gelijkgetrokken met footer-col links */
  color: var(--tekst-l); /* was tekst-ll */
  line-height: 1.7;
  letter-spacing: 0;
  max-width: 760px;
}
.site-footer__identificatie span {
  color: var(--oker-tekst);
  opacity: 0.55;
  margin: 0 2px;
}

/* Responsive — op mobiel regels afbreken natuurlijk */
@media (max-width: 640px) {
  .site-footer .site-footer__bottom {
    padding: 16px 24px 0;
    gap: 12px;
  }
  .site-footer__juridisch {
    gap: 0 10px;
    font-size: 13px;
  }
  .site-footer__identificatie {
    font-size: 11.5px;
    line-height: 1.8;
  }
}

/* ============================================================
   v1.0.6.48 — FOOTER TYPE-SCALE GECONSOLIDEERD
   
   Van 9 groottes terug naar 5:
     32px  → CTA-titel (Cormorant light)
     22px  → Display (AQinesis-logo, kolom-kopjes, grote telefoons)
     14px  → Body (alle links, tagline, adres, CTA-knop, openingstijden)
     13px  → Meta (juridisch, trust, openingstijden-titel, CTA-sub, CTA-telefoon-label)
     12px  → Micro (identificatie-regel)
   
   Font-weights: 300 / 400 / 500 (ongewijzigd)
   Font-families: Cormorant (display) + DM Sans (body)
============================================================ */

/* === 32px — CTA-titel =============================================== */
.site-footer__cta-title {
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 300;
  /* Cormorant blijft */
}

/* === 22px — Display (kolomtitels + telefoonnummers) =============== */
.footer-col h4.footer-col__title,
.footer-col--brand .footer-brand__phone,
.site-footer__cta-phone-number {
  font-size: 22px;
}
/* === 28px — Brand-naam (v1.0.6.130: groter dan kolomtitels voor
   visuele hiërarchie — merk-naam staat boven sectie-koppen)
   v1.0.6.132: zelfde verticale ritme als .footer-col__title
   (padding-bottom + margin) zodat tagline op gelijke hoogte begint
   als eerste lijst-link in andere kolommen, en koraal-streepje
   eronder identiek aan kolomtitels. ======================== */
.footer-col--brand .footer-brand__name {
  font-size: 28px;
  font-weight: 400; /* was 300 — consistent met andere display */
  line-height: 1.15;
  margin: 0 0 20px;
  padding-bottom: 10px;
  position: relative;
}
.footer-col--brand .footer-brand__name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 1.5px;
  background: var(--koraal);
  opacity: 0.8;
}

/* === 14px — Body (alle leesbare tekst) ============================= */
.site-footer__cta-sub,
.footer-col--brand .footer-brand__tagline,
.footer-col--brand .footer-brand__address,
.footer-col--brand .footer-brand__email,
.footer-col ul li a,
.site-footer__cta-btn,
.site-footer .footer-openingstijden .tijd,
.site-footer__trust,
.site-footer__trust-item {
  font-size: 14px;
}

/* === 13px — Meta (subtiele tekst) ================================== */
.footer-openingstijden__title,
.site-footer .footer-openingstijden li,
.site-footer .footer-openingstijden .dag,
.site-footer__cta-phone-label,
.site-footer__juridisch,
.site-footer__juridisch a,
.site-footer__trust-label {
  font-size: 13px;
}

/* === 14px — juridisch + identificatie (v1.0.6.185: gelijkgetrokken met footer-col links) === */
.site-footer__bottom .site-footer__juridisch,
.site-footer__bottom .site-footer__juridisch a {
  font-size: 14px;
}

/* === Micro (identificatie) ================================== */
.site-footer__bottom .site-footer__identificatie {
  font-size: 14px; /* v1.0.6.188: hogere specificiteit wint van .site-footer__bottom p (12px) */
  color: var(--tekst-l);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
}

/* === Opruimen oude regels (oude onderbalk HTML bestaat niet meer) === */
.site-footer__bottom-left,
.site-footer__bottom-right,
.site-footer__bottom p,
.site-footer__bottom-left p,
.site-footer__bottom-right a,
.site-footer__registraties,
.site-footer__bottom .footer-juridisch,
.site-footer__bottom .footer-juridisch a {
  /* Niet meer gebruikt in v1.0.6.47+, HTML is nu .site-footer__juridisch + .site-footer__identificatie */
  all: unset;
}

/* === Oude h4 11px override: forceer display-stijl ================== */
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

/* === Oude brand-em regel uit: spans doen het werk nu =============== */
.footer-col--brand .footer-brand__name em {
  all: unset;
}

/* === Line-heights bijstellen voor consistente baseline ============= */
.site-footer__juridisch a,
.site-footer__identificatie,
.site-footer__trust,
.footer-col ul li a,
.footer-col--brand .footer-brand__tagline,
.footer-col--brand .footer-brand__address {
  line-height: 1.7;
}

.footer-ai-logo {
  display: inline-block;
  height: 2em;
  width: auto;
  vertical-align: -0.35em;
  margin-left: 0.25em;
  transform: translateY(3px);
}

/* ============================================================
   v1.0.6.111 — FOOTER TYPOGRAFIE OPSCHONING

   Doel: van ~15 type-instances terug naar ~6, conform afspraak met
   gebruiker. Footer was te druk: te veel italic-Cormorant op
   functionele info (telefoon, openingstijden, kolomkoppen, lid-van).

   Principes:
   1. Alleen "AQinesis" merknaam blijft Cormorant italic + koraal
      (enige italic-koraal anker; consistent met header).
   2. Kolomkoppen worden Cormorant regular (geen italic), donkere tekst.
      Het koraal streepje eronder blijft als visueel anker.
   3. Functionele info (telefoon, openingstijden-data, lid-van-regel)
      uniform DM Sans. Variatie alleen via grootte en gewicht.

   Resulterende type-scale:
     Cormorant italic (alleen "AQinesis")        — 22px, koraal+donker
     Cormorant regular (kolomkoppen)             — 22px, donker
     DM Sans medium 16px (telefoon)              — primaire functionele info
     DM Sans regular 14px (links, body)          — body-leesbaarheid
     DM Sans regular 13px (tijden, lid-van-rij)  — secundair
     DM Sans 12px uppercase (labels)             — micro
============================================================ */

/* --- 1. AQinesis merknaam: Allura AQ + Cormorant italic inesis
   v1.0.6.123: AQ krijgt Allura-script-styling. Inesis blijft Cormorant
   italic (consistent met header). Zelfde proporties als .site-logo__aq:
   1.3× grootte, 0.10em margin-right, top 0.10em voor baseline-alignment. */
.footer-col--brand .footer-brand__name {
  font-style: italic;
}
.footer-col--brand .footer-brand__aq {
  font-family: var(--font-script);
  font-size: 1.3em;
  font-style: normal;
  font-weight: 400;
  color: var(--koraal);
  -webkit-text-stroke: 1px var(--koraal);
  line-height: 0;
  position: relative;
  top: 0.10em;
  margin-right: 0.10em;
}
.footer-col--brand .footer-brand__inesis {
  color: var(--tekst);
  font-style: italic;
  font-weight: 300;
}

/* --- 2. Telefoonnummer: van Cormorant italic naar DM Sans medium --- */
.footer-col--brand .footer-brand__phone {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 16px;
  font-weight: 500;
  color: var(--tekst);
  letter-spacing: 0;
}

/* --- 3. Openingstijden-titel: van Cormorant italic naar DM Sans label --- */
.footer-openingstijden__title {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--tekst-ll);
  letter-spacing: 0;
  text-transform: uppercase;
}

/* --- 4. Openingstijden-tijden: van Cormorant italic naar DM Sans regular --- */
.site-footer .footer-openingstijden .tijd {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 13px;
  color: var(--tekst-l);
  font-weight: 400;
  /* font-variant-numeric: tabular-nums blijft uit eerder blok */
}

/* --- 5. Kolomkoppen: van Cormorant italic naar Cormorant regular --- */
.footer-col .footer-col__title,
.footer-col h4,
.footer-col h4.footer-col__title {
  font-style: normal;
  font-weight: 400;
  color: var(--tekst);
}
/* Het ::after koraal-streepje blijft ongemoeid uit eerder blok */

/* --- 6. "— Alle klachten" hub-link: italic eraf (optie A) --- */
.footer-hub-link a {
  font-style: normal !important;
}
/* Behoud de subtiele kleur tekst-ll en de border-top dashed uit eerder blok */

/* --- 7. Trust-balk (Lid van NVA / KP / VvOCM): uniform DM Sans --- */
.site-footer__trust {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 13px;
  color: var(--tekst-l);
}
.site-footer__trust-item {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  color: var(--tekst);
}
/* .site-footer__trust-label blijft DM Sans uppercase 12px uit eerder blok */

/* ============================================================
   v1.0.6.143/144 — FOOTER SYMMETRIE

   v143 (afgerond): brand-naam baseline-aligned met h4 kolom-titels.
                    font-size 28px → 22px (gelijk aan h4). Padding-bottom,
                    margin-bottom en koraal-onderlijn ::after blijven uit
                    v132-blok (regel ~7036) ongewijzigd.
                    AQ-span (Allura, 1.3em) blijft visueel groter dan
                    inesis-span; baseline van het wordmark valt nu samen
                    met Behandelingen / Klachten / Meer informatie.

   v144 (revert): openingstijden-blok terug van kolom 4 naar kolom 1.
                  Visuele voorkeur: kolom 1 oogde te leeg zonder
                  openingstijden, kolom 4 te zwaar. Symmetrie nu:
                  kolom 1 ≈ kolom 3 hoog, kolom 2 ≈ kolom 4 kort.
                  Drie v143-CSS-overrides zijn weg:
                    - .footer-brand__contact margin: 0  (terug naar 20px uit v55)
                    - .footer-openingstijden margin-top/padding-top/border-top
                      (was kolom-4-specifiek; in kolom 1 niet nodig)
                    - grid-template-columns 1.1fr 1fr 1.2fr 1.2fr
                      (terug naar v142-baseline 1.3fr 1fr 1.2fr 1fr)

   GOLDEN-RULE-check uitgevoerd: bestaande ::after, padding-bottom,
   margin-bottom en tagline/address-marges uit eerdere blokken worden
   niet gedupliceerd — alleen de daadwerkelijke delta staat hieronder.
============================================================ */

/* --- Brand-naam: font-size omlaag van 28 naar 22 (= h4) [v143, blijft] --- */
.footer-col--brand .footer-brand__name {
  font-size: 22px;
  line-height: 1.2;
}

/* ============================================================
   v1.0.6.145 — UNIFORME HERO-OVERLAYS
   Doel: alle hero-foto's krijgen dezelfde warme-bruin filter,
   zoals reeds aanwezig op page-hero--foto pagina's
   (Tarieven, Klachten, Contact, FAQ, Ervaringen, Zwangerschap).

   Tot v144 hadden Acupunctuur en Cesar een lichtere overlay
   (max 0.5 opacity, andere kleurmix) omdat hun split-layout dat
   technisch toeliet — tekst staat op het zand-paneel naast de
   foto, niet erop. Visueel ontbrak daardoor de uniforme warme
   tint die de andere pagina's wel hebben.

   Wijziging: .acu-hero__image-overlay en .cesar-hero__image-overlay
   krijgen exact dezelfde gradient-stops als .page-hero--foto::before
   (zie regel ~2928), met de richting aangepast aan de fotokolom-positie:
     - Acu:   foto LINKS  → gradient 'to right' (donker buiten, lichter naar tekst)
     - Cesar: foto RECHTS → gradient 'to left'  (gespiegeld)

   De koraal-bordered blockquote in beide kolommen blijft goed
   leesbaar tegen de donkerdere achtergrond — wit-tekst op
   rgba(42,28,20,0.72) heeft sterker contrast dan tegen de
   oude lichtere overlay.

   GOLDEN-RULE-check: beide overlay-classes hebben slechts
   één eerdere definitie (regel 2534 en 4331). Dit blok aan
   het einde van style.css overschrijft als laatste in cascade.
============================================================ */

.acu-hero__image-overlay {
  background: linear-gradient(to right,
    rgba(42, 28, 20, 0.72) 0%,
    rgba(42, 28, 20, 0.55) 55%,
    rgba(42, 28, 20, 0.32) 100%);
}

.cesar-hero__image-overlay {
  background: linear-gradient(to left,
    rgba(42, 28, 20, 0.72) 0%,
    rgba(42, 28, 20, 0.55) 55%,
    rgba(42, 28, 20, 0.32) 100%);
}

/* ============================================================
   v1.0.6.148 — HERO-BANNER HOOGTE FIX
   Probleem: bij 16:9 hero-foto's en banner-padding 120px+100px
   werd de banner-hoogte ~400px terwijl de foto bij ~1700px breed
   ~956px hoog zou zijn. Gevolg: 'cover' sneed boven en onder
   weg, waardoor onderkant van de foto (tafel, mok, AQ-logo)
   onzichtbaar werd op klachten-hub en andere foto-hero's.

   Fix:
   1. min-height 580px (mobile/tablet) en 620px (desktop ≥1200)
      → banner toont nu ~80-85% van de foto verticaal
   2. Padding 120/100 → 100/80 → content krijgt iets meer lucht
      tov de hogere banner

   Geldt voor alle 12 hero-foto-pagina's tegelijk (Acu, Cesar
   gebruiken eigen split-layouts en zijn niet betrokken).

   Per-pagina fijnstelling blijft mogelijk via focus_y in WP-admin
   (bv. focus_y=60 als onderkant van foto belangrijker is).
============================================================ */

.page-hero--foto {
  min-height: 580px;
  padding: 100px 64px 80px;
  display: flex;
  align-items: center;
}
.page-hero--foto .page-hero__inner {
  width: 100%;
}

@media (min-width: 1200px) {
  .page-hero--foto {
    min-height: 620px;
  }
}

@media (max-width: 768px) {
  .page-hero--foto {
    min-height: 480px;
    padding: 70px 28px 56px;
  }
}
/* ============================================================
   v1.0.6.203 — MOBILE HERO-FOTO FIX
   v1.0.6.204 — uitgebreid met .acu-hero__image, .cesar-hero__image
   en .page-hero__split-bg-img; basisregels op desktop nu ook 'cover'.
   ------------------------------------------------------------
   Vanaf v1.0.6.204 gebruiken alle hero-systemen 'cover' als CSS-
   default (zowel desktop als mobiel), en injecteren de PHP-templates
   geen 'contain' meer inline. Dit blok zorgt op mobiel < 768px voor:

   1. Veilige defaults voor object-position / background-position
      ('center center'): de focus-waarden uit ACF zijn op desktop
      afgesteld op een breed kader. Op mobiel kan een focus van
      bv. 30%/50% het onderwerp uit beeld duwen omdat het kader
      een andere aspect ratio heeft.
   2. transform: none — de ACF-zoom is op desktop fijngesteld op
      een groot kader. Op mobiel zou scale(1.2) van een al kleiner
      kader een extra crop maken die te aggressief is.

   !important is nodig omdat object-position/background-position
   en transform inline worden gezet door de PHP-templates (ACF-
   driven). Een normale media query verliest tegen inline-styles.

   Per-foto mobile-focus kan later via aparte ACF-velden
   (mobile_focus_x/y) als dat nodig blijkt.
============================================================ */
@media (max-width: 768px) {

  /* Homepage hero — <img class="hero__image"> */
  .hero__image {
    object-position: center center !important;
    transform: none !important;
  }

  /* Acupunctuur hero — eigen img-klasse met S-curve clipPath */
  .acu-hero__image {
    object-position: center center !important;
    transform: none !important;
  }

  /* Cesar hero — eigen img-klasse met gespiegelde S-curve clipPath */
  .cesar-hero__image {
    object-position: center center !important;
    transform: none !important;
  }

  /* Klachten-hub, Klachtpagina, Contact, FAQ, Ervaringen, Tarieven,
     Over, Zwangerschap — bg-image div */
  .page-hero__bg {
    background-position: center center !important;
    transform: none !important;
  }

  /* Aanpak-pagina split-foto's (twee aparte clip-path zones) */
  .page-hero__split-bg-img {
    background-position: center center !important;
    transform: none !important;
  }

  /* Buitenste container — fallback voor pagina's waar bg ook
     direct op .page-hero--foto staat (backwards compat) */
  .page-hero--foto {
    background-position: center center !important;
  }
}

/* ============================================================
   v1.0.6.336 — FOOTER BOTTOM: uniforme kleur + compactere ruimte
============================================================ */

/* Kleinere gap tussen alle footer-bottom-rijen */
.site-footer .site-footer__bottom {
  gap: 6px;
  padding-top: 16px;
}

/* Trust-balk + identifiers: zelfde kleur als juridische links */
.site-footer__trust,
.site-footer__trust-item,
.site-footer__trust-label,
.site-footer__trust--identifiers,
.site-footer__trust--identifiers .site-footer__trust-item {
  font-size: 13px;
  color: var(--tekst-l);
}

/* Identifiers-rij (KvK/AGB): geen top-margin */
.site-footer__trust--identifiers {
  margin-top: 0;
}

/* Scheidingstekens trust = zelfde als juridisch */
.site-footer__trust .site-footer__trust-sep,
.site-footer__trust--identifiers .site-footer__trust-sep {
  color: var(--oker-tekst);
  opacity: 0.5;
  font-size: 13px;
}

@media (max-width: 640px) {
  .site-footer .site-footer__bottom {
    gap: 5px;
    padding-top: 12px;
  }
}

/* ============================================================
   v1.0.6.338 — FOOTER TRUST COMPACT + OKER SEPS
============================================================ */

/* Minder ruimte tussen trust-rijen */
.site-footer__trust {
  padding: 8px 32px 4px;
}
.site-footer__trust--identifiers {
  padding: 0 32px 8px;
}

/* Oker scheidingstekens in identifiers-rij */
.site-footer__trust--identifiers .site-footer__trust-sep {
  color: var(--oker-tekst);
  opacity: 0.5;
  margin: 0 6px;
}

/* ============================================================
   v1.0.6.338 — FOOTER BRAND: inesis iets groter
============================================================ */
.footer-col--brand .footer-brand__inesis {
  font-size: 1.3em;
}

/* ============================================================
   v1.0.6.371 — AI-WATERMARK (EU AI Act compliance)
============================================================ */
.ai-badge {
  display: inline-block;
  position: absolute;
  width: 32px;
  height: 32px;
  background-image: url('assets/images/logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 10;
  pointer-events: none;
  color: var(--zand);
  filter: drop-shadow(0 1px 3px rgba(255, 255, 255, 0.6));
  /* opacity wordt inline gezet via ACF (10-100% instelbaar) */
}

/* Hoekposities */
.ai-badge--top-left {
  top: 16px;
  left: 16px;
}

.ai-badge--top-right {
  top: 16px;
  right: 16px;
}

.ai-badge--bottom-left {
  bottom: 16px;
  left: 16px;
}

.ai-badge--bottom-right {
  bottom: 16px;
  right: 16px;
}

/* ==========================================================================
   MANIFEST PAGINA — pure editorial (v1.0.6.388)
   Bewust afwijkend: smalle leeskolom, ruime witruimte, geen foto's,
   drop cap, koraal pull-quote, hairline dividers.
   ========================================================================== */

.manifest-page {
    background-color: var(--color-zand, #FBF0E4);
    padding-bottom: clamp(56px, 8.5vw, 112px);
}

/* ===== 1. HERO (tekst-only) ===== */
.manifest-hero {
    padding: clamp(40px, 6vw, 80px) 24px clamp(20px, 3vw, 40px);
    text-align: center;
}

.manifest-hero__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.manifest-hero__eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-koraal, #D4614A);
    margin: 0 0 clamp(16px, 2.5vw, 28px);
}

.manifest-hero__titel {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(40px, 7vw, 88px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-tekst, #2A1C14);
    margin: 0;
}

.manifest-hero__titel em {
    font-style: italic;
    font-weight: 300;
}

/* ===== 2. SECTIES — smalle leeskolom ===== */
.manifest-section {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(28px, 4.2vw, 56px) 24px;
}

.manifest-section--intro {
    padding-top: clamp(16px, 2.8vw, 32px);
}

.manifest-section--slot {
    text-align: center;
    padding-top: clamp(34px, 5vw, 68px);
}

/* ===== 3. SUBKOPPEN ===== */
.manifest-h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-tekst, #2A1C14);
    margin: 0 0 clamp(16px, 2.8vw, 28px);
}

.manifest-h2--slot {
    color: var(--color-koraal, #D4614A);
    font-style: italic;
}

/* ===== 4. PROSE — body tekst ===== */
.manifest-prose {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 1.75;
    color: var(--color-tekst, #2A1C14);
}

.manifest-prose p {
    margin: 0 0 1.4em;
}

.manifest-prose p:last-child {
    margin-bottom: 0;
}

.manifest-prose em {
    font-style: italic;
    color: var(--color-koraal, #D4614A);
    font-weight: 500;
}

/* ===== 5. INTRO — grotere serif + drop cap ===== */
.manifest-prose--intro {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.6;
    font-weight: 400;
    color: var(--color-tekst, #2A1C14);
}

.manifest-prose--intro p:first-of-type::first-letter {
    font-family: 'Allura', cursive;
    font-size: clamp(80px, 12vw, 140px);
    line-height: 0.85;
    color: var(--color-koraal, #D4614A);
    float: left;
    padding: 8px 18px 0 0;
    margin-top: 12px;
}

.manifest-prose--intro p {
    margin: 0 0 1.2em;
}

.manifest-prose--intro em {
    font-style: italic;
    font-weight: 400;
    color: var(--color-tekst, #2A1C14);
}

/* ===== 6. HAIRLINE DIVIDER ===== */
.manifest-divider {
    display: flex;
    justify-content: center;
    padding: clamp(16px, 2.8vw, 32px) 24px;
}

.manifest-divider span {
    display: block;
    width: 64px;
    height: 1px;
    background-color: var(--color-koraal, #D4614A);
    opacity: 0.4;
}

/* ===== 7. PULL-QUOTE ===== */
.manifest-pullquote-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(42px, 6.5vw, 88px) 24px;
    text-align: center;
}

.manifest-pullquote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(32px, 5.5vw, 72px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-koraal, #D4614A);
    margin: 0;
    padding: 0;
    border: none;
    quotes: '"' '"';
}

.manifest-pullquote::before {
    content: open-quote;
    margin-right: 0.05em;
}

.manifest-pullquote::after {
    content: close-quote;
    margin-left: 0.05em;
}

/* ===== 8. SIGNATURE ===== */
.manifest-signature {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(20px, 2.4vw, 26px);
    color: var(--color-tekst, #2A1C14);
    margin: clamp(22px, 3.5vw, 40px) 0 0;
    text-align: center;
}

/* ===== 9. RESPONSIVE TWEAKS ===== */
@media (max-width: 600px) {
    .manifest-prose {
        font-size: 17px;
        line-height: 1.7;
    }

    .manifest-prose--intro {
        font-size: 19px;
        line-height: 1.55;
    }

    .manifest-prose--intro p:first-of-type::first-letter {
        font-size: 80px;
        padding: 4px 12px 0 0;
        margin-top: 8px;
    }
}

/* ===== 10. PRINT ===== */
@media print {
    .manifest-page {
        background: white;
    }
    .manifest-divider span {
        background: #999;
    }
    .manifest-pullquote,
    .manifest-prose em,
    .manifest-h2--slot {
        color: #000;
    }
}

/* ============================================================
   v1.0.6.402 — WCAG 2.2 AA: skip-link + globale focus-visible
   ============================================================ */

/* Visueel-verborgen utility (voor screen-readers) */
.aq-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip-link — verborgen tot focus, dan zichtbaar links boven */
.aq-skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 10000;
  background: var(--bruin-dd);
  color: var(--zand);
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid var(--koraal);
  transition: top 0.15s ease-out;
}
.aq-skip-link:focus {
  top: 8px;
  outline: none;
}

/* Globale focus-visible — fallback voor alle interactieve elementen
   Componenten met eigen :focus-visible rules overrulen via specificiteit */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--koraal);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Form-elementen: focus-visible binnen donkere kaders krijgt zand-outline voor zichtbaarheid */
.site-topbar a:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible {
  outline-color: var(--zand);
}

/* v1.0.6.513 — taal-dropdown mag buiten de smalle topbar vallen.
   Eerdere topbar-lagen zetten overflow:hidden voor de houtlaag; die knipte
   het menu visueel af terwijl de knop wel opende. */
body .site-topbar {
  overflow: visible;
  position: relative;
  z-index: 300;
}

/* ============================================================
   v1.0.6.406 — Submenu transparantie in sticky-state
   v404 was te opaak (84/72), maar dat was nodig omdat blur niet
   werkte (stacking-context door header backdrop-filter).
   v405 fixte stacking, blur werkt nu — opacity kan terug omlaag
   voor échte glas-feel zonder leesbaarheid op te offeren.
   ============================================================ */
.site-header.is-sticky .site-nav .sub-menu {
  background:
    linear-gradient(135deg, rgba(253, 250, 246, 0.65) 0%, rgba(251, 240, 228, 0.50) 100%),
    rgba(253, 250, 246, 0.35);
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow:
    0 22px 54px rgba(42, 28, 20, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(42, 28, 20, 0.07);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-sticky .site-nav .sub-menu {
    background: rgba(253, 250, 246, 0.96);
  }
}

/* ============================================================
   v1.0.6.408 — KENNISMAKING (soft conversie op contactpagina)
   ============================================================ */
.contact-kennismaking {
  padding: var(--space-2xl) var(--space-md);
  background: var(--zand-d);
  position: relative;
}
.contact-kennismaking::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 1px;
  background: var(--koraal);
  opacity: 0.5;
}
.contact-kennismaking__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.contact-kennismaking__inner .section-label {
  /* zelfde styling als globale .section-label, hier centreren */
  margin-left: auto;
  margin-right: auto;
}
.contact-kennismaking__inner .section-title {
  font-size: clamp(34px, 4vw, 54px);
  margin-bottom: var(--space-md);
}
.contact-kennismaking__body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--tekst);
  margin: 0 0 var(--space-lg);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.contact-kennismaking__body p {
  margin: 0 0 var(--space-sm);
}
.contact-kennismaking__body p:last-child {
  margin-bottom: 0;
}
.contact-kennismaking__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .contact-kennismaking {
    padding: var(--space-xl) var(--space-md);
  }
  .contact-kennismaking__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .contact-kennismaking__actions .btn-primary,
  .contact-kennismaking__actions .btn-secondary {
    text-align: center;
  }
}

/* ============================================================
   v1.0.6.410 — TARIEVEN-PAGINA HERZIENING
   ============================================================ */

/* Anchor-navigatie boven content (kort) */
.tarieven-nav {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) 0;
}
.tarieven-nav ul {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(42, 28, 20, 0.08);
}
.tarieven-nav a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--koraal-tekst);
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.tarieven-nav a:hover,
.tarieven-nav a:focus-visible {
  background: rgba(212, 97, 74, 0.08);
}

/* Korte intro-paragraaf (vervangt oude "In het kort" callout) */
.tarieven-intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--tekst);
  margin: var(--space-xl) 0 var(--space-2xl);
  padding: var(--space-lg);
  background: var(--zand-d);
  border-radius: 6px;
  border-left: 3px solid var(--koraal);
}
.tarieven-intro a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tabel-headings (WCAG: was alleen tbody) */
.tarief-tabel thead {
  background: var(--zand-d);
}
.tarief-tabel thead th {
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tekst);
  text-align: left;
  border-bottom: 1px solid rgba(42, 28, 20, 0.12);
}
.tarief-tabel thead .tarief-tabel__prijs-kop {
  text-align: right;
}

/* Toelichting bij Slaap / Chronische pijn */
.tarieven-groep__toelichting {
  font-size: var(--text-base);
  font-style: italic;
  color: var(--tekst-l);
  margin: -8px 0 var(--space-md);
  line-height: 1.6;
}

/* Kennismaking-callout (soft conversie) — koraal accent */
.callout--kennismaking {
  border-left-color: var(--koraal);
  background: var(--zand-d);
  margin: var(--space-2xl) 0;
}
.callout--kennismaking .callout__label {
  color: var(--koraal-tekst);
}
.callout--kennismaking .callout__action {
  margin: var(--space-md) 0 0;
}
.callout--kennismaking .btn-secondary {
  display: inline-block;
}

@media (max-width: 600px) {
  .tarieven-nav ul {
    gap: 4px;
  }
  .tarieven-nav a {
    padding: 6px 10px;
    font-size: 13px;
  }
  .tarieven-intro {
    padding: var(--space-md);
    font-size: 16px;
  }
}

/* ============================================================
   v1.0.6.455 — LIQUID GLASS STICKY CONTACTKNOP
   ============================================================ */

/* Compat: verberg de oude brede CTA wanneer browser/server nog markup cached. */
.aq-mobile-cta {
  display: none !important;
}

body.has-aq-mobile-cta {
  padding-bottom: 0 !important;
}

/* Extra footer-ruimte zodat de vaste contactknop onderaan geen tekst bedekt. */
.site-footer {
  padding-bottom: max(124px, calc(env(safe-area-inset-bottom) + 108px));
}

@media (max-width: 640px) {
  .site-footer {
    padding-bottom: max(128px, calc(env(safe-area-inset-bottom) + 112px));
  }
}

.aq-sticky-contact {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px));
  z-index: 9000;
  display: grid;
  justify-items: end;
  pointer-events: none;
}

.aq-sticky-contact__float {
  display: grid;
  justify-items: end;
  gap: 10px;
  transform-origin: 50% 100%;
  animation: aq-contact-water-float 6.8s ease-in-out infinite;
}

.aq-sticky-contact.is-open .aq-sticky-contact__float {
  animation-play-state: paused;
  transform: translateY(0) rotate(0deg);
}

.aq-sticky-contact__toggle {
  position: relative;
  z-index: 1;
  width: 87px;
  height: 87px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.14) 44%, rgba(255, 255, 255, 0.03) 76%),
    linear-gradient(145deg, rgba(253, 250, 246, 0.18), rgba(253, 250, 246, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto;
  box-shadow:
    0 6px 10px -7px rgba(42, 28, 20, 0.42),
    0 2px 4px -3px rgba(42, 28, 20, 0.28);
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease, opacity 0.18s ease;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .aq-sticky-contact__toggle {
    background:
      radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.14) 40%, rgba(255, 255, 255, 0.03) 76%),
      rgba(253, 250, 246, 0.08);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
  }
}

.aq-sticky-contact__toggle::before {
  content: none;
}

.aq-sticky-contact__toggle::after {
  content: '';
  position: absolute;
  inset: -34%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 52% 46%, rgba(255, 255, 255, 0.58) 0 2px, transparent 5px),
    linear-gradient(112deg,
      transparent 34%,
      rgba(255, 255, 255, 0.00) 42%,
      rgba(255, 255, 255, 0.34) 49%,
      rgba(255, 255, 255, 0.14) 54%,
      transparent 64%);
  opacity: 0.34;
  transform: translateX(-76%) rotate(13deg);
  animation: aq-glass-sun-glimmer 6.4s ease-in-out infinite;
}

.aq-sticky-contact__glass {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes aq-contact-water-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  24% {
    transform: translateY(-3px) rotate(-0.8deg);
  }
  52% {
    transform: translateY(1px) rotate(0.6deg);
  }
  78% {
    transform: translateY(-2px) rotate(0.3deg);
  }
}

@keyframes aq-glass-sun-glimmer {
  0%, 100% {
    opacity: 0.20;
    transform: translateX(-76%) rotate(13deg);
  }
  38% {
    opacity: 0.38;
  }
  54% {
    opacity: 0.56;
    transform: translateX(2%) rotate(13deg);
  }
  72% {
    opacity: 0.24;
    transform: translateX(76%) rotate(13deg);
  }
}

.aq-sticky-contact__arc {
  position: absolute;
  inset: 3px;
  z-index: 2;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  overflow: visible;
}

.aq-sticky-contact__arc text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: rgba(61, 40, 32, 0.80);
}

.aq-sticky-contact__logo-mask,
.aq-sticky-contact__logo-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -46%);
}

.aq-sticky-contact__logo-fallback {
  display: block;
  filter:
    brightness(0) saturate(100%) invert(50%) sepia(62%) saturate(787%) hue-rotate(325deg) brightness(91%) contrast(86%)
    drop-shadow(0 0 2px rgba(253, 250, 246, 0.95))
    drop-shadow(1px 2px 1px rgba(36, 20, 16, 0.42));
}

.aq-sticky-contact__logo-mask {
  display: none;
}

@supports ((mask: url('assets/images/logo-mark.svg')) or (-webkit-mask: url('assets/images/logo-mark.svg'))) {
  .aq-sticky-contact__logo-mask {
    z-index: 1;
    display: block;
    background: var(--koraal);
    mask: url('assets/images/logo-mark.svg') center / contain no-repeat;
    -webkit-mask: url('assets/images/logo-mark.svg') center / contain no-repeat;
    filter:
      drop-shadow(0 0 2px rgba(253, 250, 246, 0.98))
      drop-shadow(1px 2px 1px rgba(36, 20, 16, 0.42));
  }

  .aq-sticky-contact__logo-fallback {
    display: none;
  }
}

.aq-sticky-contact__toggle:hover,
.aq-sticky-contact__toggle:focus-visible {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(255, 255, 255, 0.52);
  box-shadow:
    0 7px 11px -7px rgba(42, 28, 20, 0.44),
    0 2px 4px -3px rgba(42, 28, 20, 0.30);
}

.aq-sticky-contact__toggle:active,
.aq-sticky-contact.is-pressing .aq-sticky-contact__toggle {
  transform: translateY(-3px) scale(1.14);
}

.aq-sticky-contact.is-open .aq-sticky-contact__toggle {
  transform: translateY(-2px) scale(1.10);
}

.aq-sticky-contact__menu {
  position: relative;
  z-index: 2;
  width: min(260px, calc(100vw - 36px));
  padding: 14px;
  background:
    linear-gradient(145deg, rgba(253, 250, 246, 0.82), rgba(253, 250, 246, 0.48));
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 8px;
  box-shadow:
    0 18px 46px rgba(42, 28, 20, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom right;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .aq-sticky-contact__menu {
    background: rgba(253, 250, 246, 0.54);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }
}

.aq-sticky-contact.is-open .aq-sticky-contact__menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

.aq-sticky-contact__item {
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 42px 10px 13px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--tekst);
  text-decoration: none;
  border: 1px solid rgba(42, 28, 20, 0.09);
  background: rgba(255, 255, 255, 0.52);
}

.aq-sticky-contact__item + .aq-sticky-contact__item {
  margin-top: 8px;
}

.aq-sticky-contact__item span {
  font-size: 13px;
  font-weight: 600;
}

.aq-sticky-contact__item strong {
  font-size: 14px;
  font-weight: 500;
  color: var(--tekst-l);
}

.aq-sticky-contact__item--primary {
  color: white;
  background: var(--koraal);
  border-color: var(--koraal);
  text-transform: uppercase;
}

.aq-sticky-contact__item:hover,
.aq-sticky-contact__item:focus-visible {
  color: var(--tekst);
  background: var(--zand-d);
  border-color: rgba(42, 28, 20, 0.12);
}

.aq-sticky-contact__item--primary:hover,
.aq-sticky-contact__item--primary:focus-visible {
  color: white;
  background: var(--koraal-d);
  border-color: var(--koraal-d);
}

@media (max-width: 640px) {
  .aq-sticky-contact {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px));
  }

  .aq-sticky-contact__toggle {
    width: 78px;
    height: 78px;
  }

  .aq-sticky-contact__arc {
    inset: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
  }

  .aq-sticky-contact__arc text {
    font-size: 13px;
  }

  .aq-sticky-contact__logo-mask,
  .aq-sticky-contact__logo-fallback {
    width: 52px;
    height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aq-sticky-contact__float {
    animation: none;
  }

  .aq-sticky-contact__toggle,
  .aq-sticky-contact__menu {
    transition: none;
  }

  .aq-sticky-contact__toggle::after {
    animation: none;
  }
}

.aq-overlegwijzer {
  padding: var(--space-3xl) var(--space-md);
  background: var(--zand);
}

.aq-overlegwijzer--sand {
  background: var(--zand-d);
}

.aq-overlegwijzer__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.aq-overlegwijzer__intro {
  max-width: 760px;
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.aq-overlegwijzer__intro .section-label {
  margin-right: auto;
  margin-left: auto;
}

.aq-overlegwijzer__intro .section-title {
  margin-bottom: var(--space-md);
}

.aq-overlegwijzer__intro p:last-child {
  margin: 0 auto;
  color: var(--tekst-l);
  font-size: var(--text-base);
  line-height: 1.75;
}

.aq-overlegwijzer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.aq-overlegwijzer__card {
  padding: 26px 24px;
  background: var(--wit);
  border: 1px solid rgba(42, 28, 20, 0.08);
  border-radius: 6px;
}

.aq-overlegwijzer__card h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--tekst);
  margin: 0 0 12px;
}

.aq-overlegwijzer__card p {
  margin: 0;
  color: var(--tekst-l);
  font-size: 16px;
  line-height: 1.7;
}

.aq-overlegwijzer__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}

.complaint-related {
  margin: var(--space-2xl) 0;
  padding: 34px 36px;
  background: var(--zand-d);
  border-radius: 6px;
  border-left: 3px solid var(--oker);
}

.complaint-related__header {
  max-width: 720px;
  margin-bottom: var(--space-lg);
}

.complaint-related__header .section-label {
  margin-bottom: 12px;
}

.complaint-related__header h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 300;
  line-height: 1.12;
  color: var(--tekst);
  margin: 0 0 12px;
}

.complaint-related__header p {
  margin: 0;
  color: var(--tekst-l);
  font-size: 16px;
  line-height: 1.7;
}

.complaint-related__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.complaint-related__group {
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(42, 28, 20, 0.08);
  border-radius: 6px;
}

.complaint-related__group h3 {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--tekst);
  text-transform: uppercase;
}

.complaint-related__group ul {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.complaint-related__group a {
  color: var(--koraal-tekst);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 97, 74, 0.34);
}

.complaint-related__group a:hover,
.complaint-related__group a:focus-visible {
  color: var(--tekst);
  border-bottom-color: var(--tekst);
}

@media (max-width: 860px) {
  .aq-overlegwijzer__grid,
  .complaint-related__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .aq-overlegwijzer {
    padding: var(--space-2xl) var(--space-md);
  }

  .aq-overlegwijzer__intro {
    text-align: left;
  }

  .aq-overlegwijzer__intro .section-label {
    margin-left: 0;
  }

  .aq-overlegwijzer__card,
  .complaint-related {
    padding: 24px 20px;
  }

  .aq-overlegwijzer__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .aq-overlegwijzer__actions .btn-primary,
  .aq-overlegwijzer__actions .btn-secondary {
    text-align: center;
  }
}

/* v1.0.6.502-codex — mobile overflow guard for homepage and page heroes. */
@media (max-width: 640px) {
  .hero__left {
    padding: var(--space-xl) 20px var(--space-lg);
  }

  .hero__title {
    font-size: clamp(48px, 13vw, 58px);
    line-height: 1.03;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .hero__subtitle,
  .hero__desc {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .hero__subtitle {
    font-size: clamp(22px, 6.2vw, 28px);
  }

  .page-hero,
  .page-hero--foto {
    padding-right: 20px;
    padding-left: 20px;
  }

  .page-template-klachtpagina .page-hero__inner {
    padding-top: 28px;
  }

  .page-hero__title {
    font-size: clamp(42px, 11.5vw, 56px);
    line-height: 1.04;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .page-hero__lead {
    font-size: clamp(20px, 5.8vw, 24px);
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* v1.0.6.505-codex — gedeelde rustige papier-surface voor lichte vlakken.
   Donkere houtvlakken, foto-heroes, koraalbanner en bestaande logo-watermerken
   blijven buiten deze laag. */
:root {
  --aq-paper-wash: linear-gradient(118deg, rgba(255, 248, 238, 0.34) 0%, rgba(255, 248, 238, 0.10) 38%, rgba(42, 28, 20, 0.045) 100%);
  --aq-paper-lines-a: repeating-linear-gradient(90deg, rgba(42, 28, 20, 0.014) 0 1px, transparent 1px 10px);
  --aq-paper-lines-b: repeating-linear-gradient(0deg, rgba(255, 248, 238, 0.050) 0 1px, transparent 1px 12px);
  --aq-paper-sheen: linear-gradient(128deg, transparent 0 18%, rgba(255, 248, 238, 0.22) 38%, transparent 64% 100%);
  --aq-paper-edge: inset 0 1px 0 rgba(255, 248, 238, 0.32), inset 0 -1px 0 rgba(42, 28, 20, 0.055);
}

:is(
  .home-recognition,
  .home-routes,
  .home-experiences,
  .klachten,
  .aanpak,
  .werkwijze,
  .over,
  .over__quote,
  .over__visie,
  .over__opleidingen,
  .over__expertise,
  .over__registraties,
  .faq-page,
  .faq-page__cat,
  .contact-kanalen,
  .contact-route,
  .contact-kaart,
  .contact-tijden,
  .contact-kennismaking,
  .contact-formulier,
  .aanpak-intro,
  .aanpak-trajecten,
  .aanpak-brug,
  .aanpak-therapeut,
  .aanpak-wetenschap,
  .aanpak-stappen,
  .aanpak-praktisch,
  .aanpak-faq,
  .acu-section--zand,
  .acu-section--zand-d,
  .cesar-break--embed,
  .klachten-hub-intro,
  .klachten-hub-grid,
  .klachten-hub-citaat,
  .klachtp-symptoms,
  .complaint-related,
  .aq-overlegwijzer,
  .soft-cta,
  .manifest-section
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--aq-surface-base, var(--zand));
  background-image:
    var(--aq-paper-wash),
    var(--aq-paper-lines-a),
    var(--aq-paper-lines-b);
  box-shadow: var(--aq-paper-edge);
}

:is(
  .home-recognition,
  .home-routes,
  .home-experiences,
  .klachten,
  .aanpak,
  .werkwijze,
  .over,
  .over__quote,
  .over__visie,
  .over__opleidingen,
  .over__expertise,
  .over__registraties,
  .faq-page,
  .faq-page__cat,
  .contact-kanalen,
  .contact-route,
  .contact-kaart,
  .contact-tijden,
  .contact-kennismaking,
  .contact-formulier,
  .aanpak-intro,
  .aanpak-trajecten,
  .aanpak-brug,
  .aanpak-therapeut,
  .aanpak-wetenschap,
  .aanpak-stappen,
  .aanpak-praktisch,
  .aanpak-faq,
  .acu-section--zand,
  .acu-section--zand-d,
  .cesar-break--embed,
  .klachten-hub-intro,
  .klachten-hub-grid,
  .klachten-hub-citaat,
  .klachtp-symptoms,
  .complaint-related,
  .aq-overlegwijzer,
  .soft-cta,
  .manifest-section
)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--aq-paper-sheen);
  opacity: var(--aq-surface-sheen, 0.55);
  mix-blend-mode: soft-light;
}

:is(
  .home-recognition,
  .home-routes,
  .home-experiences,
  .klachten,
  .aanpak,
  .werkwijze,
  .over,
  .over__quote,
  .over__visie,
  .over__opleidingen,
  .over__expertise,
  .over__registraties,
  .faq-page,
  .faq-page__cat,
  .contact-kanalen,
  .contact-route,
  .contact-kaart,
  .contact-tijden,
  .contact-kennismaking,
  .contact-formulier,
  .aanpak-intro,
  .aanpak-trajecten,
  .aanpak-brug,
  .aanpak-therapeut,
  .aanpak-wetenschap,
  .aanpak-stappen,
  .aanpak-praktisch,
  .aanpak-faq,
  .acu-section--zand,
  .acu-section--zand-d,
  .cesar-break--embed,
  .klachten-hub-intro,
  .klachten-hub-grid,
  .klachten-hub-citaat,
  .klachtp-symptoms,
  .complaint-related,
  .aq-overlegwijzer,
  .soft-cta,
  .manifest-section
) > * {
  position: relative;
  z-index: 1;
}

:is(
  .contact-kanalen,
  .contact-route,
  .contact-kaart,
  .contact-kennismaking,
  .contact-formulier,
  .aanpak-brug,
  .over__visie,
  .manifest-section,
  .soft-cta
) {
  --aq-surface-base: var(--wit);
  --aq-surface-sheen: 0.42;
}

:is(
  .over__quote,
  .contact-tijden,
  .aanpak-therapeut,
  .aanpak-praktisch,
  .aanpak-faq,
  .acu-section--zand-d,
  .klachten-hub-citaat
) {
  --aq-surface-base: var(--zand-d);
  --aq-surface-sheen: 0.48;
}

.aanpak-wetenschap {
  --aq-surface-base: var(--wit);
  --aq-surface-sheen: 0.34;
}

.aanpak-therapeut::after {
  content: none;
}

.aanpak-therapeut__panel {
  margin-left: 0;
}

.aanpak-therapeut__content {
  background:
    linear-gradient(135deg, rgba(253, 250, 246, 0.90), rgba(251, 240, 228, 0.76)),
    var(--wit);
}

/* v1.0.6.507-codex — gedeelde donkere material-surface.
   Geeft grote bruine vlakken en donkere kaarten subtiele vezel/ademdiepte
   zonder herkenbare illustratie of extra drukte. */
:is(
  .band--marquee,
  .cta,
  .page-hero:not(.page-hero--foto):not(.page-hero--split),
  .acu-section--bruin,
  .aanpak-synergie,
  .aanpak-therapeut__item,
  .klacht-kaart:nth-child(1)
) {
  background-color: var(--tekst);
  background-image: var(--aq-dark-material-image);
  background-size: var(--aq-dark-material-size);
  background-position: var(--aq-dark-material-position);
  background-repeat: var(--aq-dark-material-repeat);
}

@media (max-width: 920px) {
  .behandelingen {
    display: block;
    padding: var(--space-xl) var(--space-md);
  }

  .behandelingen__header {
    justify-self: auto;
    max-width: 620px;
    margin: 0 auto var(--space-lg);
  }

  .behandelingen__grid {
    max-width: none;
  }

  .behandelingen__grid::before {
    display: none;
  }

  .beh-card {
    padding: 28px 22px 24px;
  }

  .beh-card:nth-child(2) {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .band--marquee .band__track {
    animation-duration: 96s;
  }

  .behandelingen {
    background-color: var(--tekst);
  }

  .home-routes,
  .over,
  .aq-overlegwijzer,
  .werkwijze,
  .home-experiences {
    --aq-surface-base: var(--zand-d);
    --aq-surface-sheen: 0.42;
  }

  .home-recognition,
  .aanpak,
  .klachten {
    --aq-surface-base: var(--zand);
    --aq-surface-sheen: 0.46;
  }

  .behandelingen__header .section-title {
    font-size: clamp(42px, 11vw, 54px);
  }

  .beh-card__nr {
    top: 18px;
    right: 20px;
    font-size: 58px;
  }

  .beh-card__title {
    font-size: 28px;
  }
}

/* v1.0.6.534-codex — mobiele hero-wordmark krijgt zichtbaar extra ruimte
   onder topbar/header. Daarnaast blijft de Allura-AQ in een normale line-box,
   zodat de glyph niet door de hero-rand wordt geknipt. */
@media (max-width: 640px) {
  .hero__left {
    padding-top: 0px !important;
  }

  .hero__brand {
    margin-top: 0 !important;
    margin-bottom: var(--space-lg);
    line-height: 1.25 !important;
    overflow: visible !important;
  }

  .hero__brand-aq {
    display: inline-block;
    line-height: 1.15 !important;
    top: 0 !important;
    transform: translateY(0.02em);
  }
}