/* ==========================================================================
   De Adempauze · Gedeelde stylesheet · Redesign 2026
   Huisstijl: Navy / Taupe / Cream (BRAND.md)
   Typografie: Playfair Display (display) · Inter (body) · Josefin Sans (labels)
   Vormtaal: zacht en rond. Pilvormige knoppen, ruime hoeken, ademgolf-motief.
   ========================================================================== */

/* De scrollbalkruimte blijft staan, zodat de pagina niet een halve
   scrollbalk opzij springt zodra het menu `overflow: hidden` zet. */
html { scrollbar-gutter: stable; }

:root {
  --navy:        #1a2e4a;
  --navy-hover:  #253d60;
  --navy-deep:   #0f1d30;
  --taupe:       #b5a898;
  --taupe-light: #cfc6bb;
  --cream:       #f7f4f0;
  --cream-warm:  #ede9e3;
  --stone:       #ddd8d0;
  --mist:        #ede9e3;
  --ink:         #1a2e4a;
  --ink-mid:     #4d5f75;
  /* Warm grijs uit de taupe-familie, gekozen 27 aug. Het koele #7a8a9a haalde
     2,93:1 op mist waar 4,5:1 nodig is; dit haalt 4,55 op mist, 5,02 op cream
     en 5,51 op wit, en blijft lichter dan --ink-mid zodat de opbouw klopt.
     Staat alleen op lichte vlakken: .muted, .quote-author, .price-period,
     .cta-hint en de fase-instructie in de ademcirkel. */
  --ink-soft:    #736759;
  /* Het accentwoord in een kop, gekozen 27 aug. Geen accentkleur en geen
     cursief, maar een stap terug in dezelfde kleur: het accentwoord zakt naar
     achteren in plaats van dat het naar voren springt. Navy voor 60% naar de
     achtergrond toe. Gemeten 3,81:1 op cream, ruim boven de 3:1 die voor
     koptekst geldt. Alleen voor koptekst: in een alinea zakt dit onder de
     4,5:1 die lopende tekst nodig heeft. */
  --accent-kop:  #727d8c;
  /* Dezelfde stap op navy deep, maar vanuit cream. Gemeten 6,62:1. */
  --accent-kop-op-donker: #9fa2a7;
  --white:       #ffffff;
  --wa:          #25D366;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-logo:    'Josefin Sans', sans-serif;

  --radius:      16px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  --line-body:   1.75;
  --line-tight:  1.15;

  --container:   1140px;
  /* Breedte van de scrollbalk, gezet door site.js. Nodig omdat 100vw de
     scrollbalk meetelt en de container niet. */
  --sb:          0px;
  --gutter:      24px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: var(--line-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--navy-hover); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--navy);
  line-height: var(--line-tight);
  margin: 0 0 0.6em;
  text-wrap: balance;
  /* Nederlands maakt lange samenstellingen, en "Ademhalingsoefeningen" past bij
     320 px niet in de kolom. Dit springt alleen aan als een woord er echt niet
     in past, dus aan de rest van de typografie verandert niets. */
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 400; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 500; }
h3 { font-size: 1.4rem; font-weight: 500; }
h4 { font-size: 1.1rem; font-weight: 500; }

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

/* Het accentwoord in een kop. Zelfde lettertype, zelfde gewicht, zelfde
   grootte, alleen een stap lichter. Cursief is hier weg: dat deed kleur,
   helling en lettertype tegelijk voor een enkel accent, en die stapeling is
   precies wat een kop als sjabloon laat lezen. */
em { font-style: normal; color: var(--accent-kop); }

/* In lopende tekst kan het accent niet lichter worden: daar geldt 4,5:1 en dat
   haalt --accent-kop niet. Daar blijft de volle kleur staan en doet het gewicht
   het werk. Body is Inter 300, dus 500 is een duidelijke maar rustige stap. */
p em, li em { color: inherit; font-weight: 500; }

/* Op de donkere vlakken gaat de stap de andere kant op, vanuit cream. */
.hero-navy em,
.section-navy em,
.quote-band em,
.cta-strip em,
.site-footer em { color: var(--accent-kop-op-donker); }

/* Voor de titel van een werk is cursief wel de juiste zetregel. Die staat
   daarom op `cite` en niet op `em`, zodat het accentwoord later nog eens kan
   wijzigen zonder dat een boektitel meebeweegt. */
cite { font-style: italic; color: inherit; }

/* Section labels in caps: Josefin Sans, ruim gespatieerd */
.eyebrow {
  font-family: var(--font-logo);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 1.2rem;
  display: inline-block;
}

/* ===== Ademgolf-motief ===== */
.golf {
  display: block;
  width: 89px;   /* de golf uit het logo: snel in, lang uit (sinds 2 okt 2026) */
  height: 32px;
  /* Nagemeten op de inkt, niet op de doos: met 18/24 stond er 22 px boven de
     golf en 37 px eronder, doordat de regelruimte van de kop en de lead
     verschillen. Zo is de ruimte aan beide kanten gelijk. */
  margin: 26px 0 16px;
}
.golf path { stroke: var(--taupe); }
.golf-center { margin-left: auto; margin-right: auto; }

/* ===== Layout ===== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: 104px 0; }
.section-sm { padding: 64px 0; }
.section-mist { background: var(--cream-warm); }
/* Twee crème vlakken achter elkaar: de witruimte één keer, niet opgeteld tot 200px+ */
.hero + .section:not(.section-mist):not(.section-navy),
.section:not(.section-mist):not(.section-navy) + .section-sm:not(.section-mist),
.section-sm:not(.section-mist) + .section:not(.section-mist):not(.section-navy) { padding-top: 0; }
.section-navy {
  background: var(--navy-deep);
  color: var(--cream);
}
.section-navy h1, .section-navy h2, .section-navy h3 { color: var(--cream); }
.section-navy em { color: var(--accent-kop-op-donker); }
.section-navy .eyebrow { color: var(--taupe-light); }
.section-navy p { color: rgba(247, 244, 240, 0.82); }

/* ===== Buttons: pilvormig, zacht ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  border: 1px solid var(--navy);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  text-align: center;
  line-height: 1;
}
.btn:focus-visible { outline: 2px solid var(--taupe); outline-offset: 3px; }
.btn-primary {
  background: var(--navy);
  color: var(--cream);
}
.btn-primary:hover {
  background: var(--navy-hover);
  color: var(--white);
  transform: translateY(-1px);
}
.btn-secondary {
  background: transparent;
  color: var(--navy);
}
.btn-secondary:hover {
  background: var(--navy);
  color: var(--cream);
}
.btn-light {
  background: transparent;
  border-color: var(--cream);
  color: var(--cream);
}
.btn-light:hover {
  background: var(--cream);
  color: var(--navy);
}
.btn-group { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Alleen de homepage-hero zet de knoppen onder elkaar. De groene is daar de
   hoofdroute en "Plan een sessie" hoort er zichtbaar onder te hangen. Naast
   elkaar worden het twee gelijkwaardige keuzes. Bewust op .hero-navy en niet
   op .hero: bedrijfssessies.html en en.html hebben ook twee heroknoppen en
   die horen wel naast elkaar te blijven staan. */
.hero-navy .btn-group { flex-direction: column; align-items: flex-start; gap: 12px; }

/* Ada-knop: WhatsApp-groen met icoon, herkenbaar op elke achtergrond */
.btn-proef {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--wa);
  border-color: var(--wa);
  color: #ffffff;
  font-weight: 500;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}
.btn-proef:hover {
  background: #1ebe5b;
  border-color: #1ebe5b;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
}
.btn-proef svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ===== Header / Navigation ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 244, 240, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stone);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-logo);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1;
}
.logo-icon {
  height: 34px;
  width: auto;
  display: block;
}
.logo .logo-de { color: var(--taupe); }
/* Hoofdletter-wordmark optisch centreren met het logo-icoon */
.logo > span {
  position: relative;
  top: 3px;
}

/* Taalschakelaar: staat naast de menuknop en niet in de nav zelf, zodat hij
   ook op mobiel zichtbaar blijft als het menu is ingeklapt. Bewust een enkele
   link naar een enkele Engelse pagina, geen toggle: er is geen tweede site. */
.nav-eind {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* ===== Hero ===== */
.hero {
  padding: 88px 0 108px;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
.hero-grid,
.hero .container-narrow {
  position: relative;
  z-index: 1;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 72px;
  align-items: center;
  position: relative;
}
.hero-text h1 { margin-bottom: 4px; max-width: 15ch; }
/* Tweeregelige hero-kop. Elke zin staat op een eigen regel en houdt die
   ook: het accentwoord (rust, ruimte) valt anders midden in een afbreking. */
.hero-text h1.hero-kop {
  max-width: none;
  font-size: clamp(1.62rem, 4.15vw, 3.1rem);
  line-height: 1.22;
  margin-bottom: 8px;
}
.hero-kop .regel { display: block; white-space: nowrap; }

/* Hero's zonder golf (2 okt 2026). De golf gaf de ruimte tussen kop en lead; nu
   staat de kop er direct boven, met een ruimere regelafstand van 1,22. */
.hero h1 { line-height: 1.22; }
.hero-text h1, .hero-text h1.hero-kop { margin-bottom: 24px; }
/* Op smalle schermen wint leesbare grootte het van de regelindeling: de
   zinnen mogen afbreken, in ruil daarvoor blijft de kop groot. */
@media (max-width: 900px) {
  .hero-text h1.hero-kop { font-size: clamp(1.7rem, 7.2vw, 2.7rem); line-height: 1.22; }
  .hero-kop .regel { white-space: normal; }
}
.hero-text p.lead {
  font-size: 1.12rem;
  color: var(--ink-mid);
  margin-bottom: 36px;
  max-width: 46ch;
}
.hero-image {
  position: relative;
}
.hero-image img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: 560px;
  object-fit: cover;
}
.hero-caption {
  margin-top: 14px;
  font-family: var(--font-logo);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
  text-align: right;
}
.hero-credentials { display: none; font-size: 0.85rem; }
.hero-credentials strong { display: block; color: var(--navy); margin-bottom: 4px; }
.hero-credentials span { color: var(--ink-soft); font-size: 0.8rem; }

/* ===== Quote-band: het donkere moment van de pagina ===== */
.quote-band {
  background: var(--navy-deep);
  padding: 96px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.quote-band .golf { width: 89px; margin: 0 auto 32px; opacity: 0.9; }
.quote-band blockquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.35;
  color: var(--cream);
  max-width: 30ch;
  margin: 0 auto;
  text-wrap: balance;
}
.quote-band .wie {
  font-family: var(--font-logo);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  display: block;
  margin-top: 28px;
}

/* ===== Menu-lijst (aanbod als redactionele lijst) ===== */
.menu-lijst { margin-top: 12px; }
.menu-rij {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 30px 0;
  border-top: 1px solid var(--stone);
}
.menu-rij:last-child { border-bottom: 1px solid var(--stone); }
.menu-rij .nr {
  font-family: var(--font-logo);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--taupe);
}
.menu-rij h3 {
  font-size: 1.45rem;
  margin-bottom: 6px;
}
.menu-rij h3 a { color: var(--navy); }
.menu-rij h3 a:hover { color: var(--navy-hover); }
.menu-rij p {
  color: var(--ink-mid);
  font-size: 0.95rem;
  max-width: 58ch;
  margin-bottom: 8px;
}
.menu-rij .prijs {
  font-family: var(--font-logo);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}
.menu-rij .card-link { font-size: 0.88rem; }

/* ===== Cards (zacht en rond) ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}
/* Reviews verschillen sterk in lengte; laat de kaart met de tekst meegroeien
   in plaats van alles op te rekken tot de langste. */
.card-grid--reviews { align-items: start; }
.card {
  background: var(--white);
  padding: 38px 34px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stone);
  transition: transform 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--taupe-light);
}
.card-num {
  font-family: var(--font-logo);
  font-size: 0.78rem;
  color: var(--taupe);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.card h3 { margin-bottom: 12px; }
/* Kop die er wel is voor schermlezers en de kopstructuur, maar niet in beeld. */
.visueel-verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.card p { color: var(--ink-mid); font-size: 0.95rem; margin-bottom: 20px; flex-grow: 1; }
.card-meta {
  font-size: 0.85rem;
  color: var(--navy);
  font-weight: 400;
  padding-top: 16px;
  border-top: 1px solid var(--stone);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-meta .price { font-family: var(--font-display); font-size: 1.1rem; }
.card-link {
  font-size: 0.9rem;
  color: var(--navy);
  border-bottom: 1px solid var(--taupe);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: border-color 0.2s ease;
}
.card-link:hover { border-color: var(--navy); }

/* ===== Quote / Testimonial ===== */
.quote {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--navy);
  position: relative;
  padding: 0 0 0 32px;
  border-left: 2px solid var(--taupe);
  margin: 0 0 16px;
}
.quote-author {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-style: normal;
}
.quote-author strong { color: var(--navy); font-weight: 400; }
.testimonial {
  background: var(--white);
  padding: 36px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stone);
}
.bron-label {
  display: inline-block;
  font-family: var(--font-logo);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--taupe);
  background: var(--cream-warm);
  padding: 5px 14px 4px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}
.review-sterren {
  display: block;
  color: var(--taupe);
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  line-height: 1;
  margin-bottom: 18px;
}

/* ===== Pricing ===== */
.price-card {
  background: var(--white);
  padding: 42px 38px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stone);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.price-card.featured {
  border-color: var(--navy);
  position: relative;
}
.price-card.featured::before {
  content: 'Meest gekozen';
  position: absolute;
  top: -14px;
  left: 36px;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-logo);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 16px 5px;
  border-radius: var(--radius-pill);
}
.price-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.price-card .tagline { color: var(--ink-mid); font-size: 0.9rem; margin-bottom: 24px; }
.price-amount {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 4px;
}
.price-amount .currency { font-size: 1.4rem; vertical-align: super; }
.price-period { color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 28px; }
.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  font-size: 0.92rem;
  flex-grow: 1;
}
.price-features li {
  padding: 8px 0 8px 26px;
  position: relative;
  border-bottom: 1px solid var(--stone);
}
.price-features li:last-child { border-bottom: none; }
.price-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 16px;
  width: 14px; height: 1px;
  background: var(--taupe);
}

/* ===== Logo strip ===== */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 56px;
}
.client-logo {
  height: 52px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.client-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}
.client-logo--asw {
  height: 28px !important;
  width: auto !important;
  max-width: 120px;
}

/* ===== Footer ===== */
.site-footer {
  background: var(--navy-deep);
  color: var(--cream);
  padding: 80px 0 32px;
}
.footer-golf { padding-bottom: 24px; }
.footer-golf .golf { margin: 0; width: 89px; }
.footer-social {
  display: flex;
  gap: 20px;
  padding-bottom: 40px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Het icoon blijft 20 px, het aanraakvlak eromheen wordt 24 px: dat is het
     minimum voor een klikdoel, en op de telefoon scheelt het echt raak tikken. */
  min-width: 24px;
  min-height: 24px;
  color: var(--taupe);
  transition: color 0.2s ease;
}
.footer-social a:hover { color: var(--cream); }
.footer-social svg { width: 20px; height: 20px; fill: currentColor; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-grid h4 {
  color: var(--cream);
  font-family: var(--font-logo);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.site-footer .logo { color: var(--cream); margin-bottom: 16px; display: inline-flex; }
.site-footer .logo .logo-de { color: var(--taupe); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 10px; font-size: 0.92rem; color: var(--taupe-light); }
.footer-grid a { color: var(--taupe-light); }
.footer-grid a:hover { color: var(--cream); }
.footer-grid p { font-size: 0.92rem; color: var(--taupe-light); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--taupe-light);
}

/* ===== Inline article styling ===== */
.prose {
  max-width: 720px;
}
/* Even breed als de hero erboven, anders springt de kop 20px in t.o.v. de lead */
.container-narrow.prose { max-width: 760px; }
.prose h2 { margin-top: 48px; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 1.05rem; }
.prose img {
  border-radius: var(--radius-lg);
  margin: 32px 0;
}

/* ===== Story sections (Over mij) ===== */
.story-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 104px;
}
.story-section:last-child { margin-bottom: 0; }
.story-section.reverse { direction: rtl; }
.story-section.reverse > * { direction: ltr; }
.story-section img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: 480px;
  object-fit: cover;
}

/* ===== Process steps ===== */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin: 48px 0;
}
.step-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--taupe);
  line-height: 1;
  margin-bottom: 16px;
}
.step h4 { margin-bottom: 8px; color: var(--navy); }
.step p { font-size: 0.92rem; color: var(--ink-mid); }

/* ===== Two-up split ===== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* ===== Forms ===== */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-field { margin-bottom: 20px; }
.form-field label {
  display: block;
  font-family: var(--font-logo);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 8px;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  transition: border-color 0.2s ease;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--navy);
}
.form-field textarea { resize: vertical; min-height: 140px; }

/* ===== Banner / CTA strip ===== */
.cta-strip {
  background: var(--navy-deep);
  color: var(--cream);
  padding: 80px 0;
  text-align: center;
}
.cta-strip h2 { color: var(--cream); margin-bottom: 16px; }
.cta-strip p { color: var(--taupe-light); margin-bottom: 28px; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-strip .eyebrow { color: var(--taupe); }

/* ===== B2B specific ===== */
.b2b-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 48px 0;
}
.b2b-stat {
  background: var(--white);
  padding: 34px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stone);
}
.b2b-stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 8px;
}
.b2b-stat-label {
  font-family: var(--font-logo);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 12px;
}
.b2b-stat p { font-size: 0.9rem; color: var(--ink-mid); margin: 0; }

/* ===== Compliance box ===== */
.compliance-box {
  background: var(--cream-warm);
  padding: 36px;
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--navy);
  margin: 32px 0;
}
.compliance-box h3 { font-size: 1.15rem; margin-bottom: 12px; }
.compliance-box p { font-size: 0.95rem; margin: 0; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .section { padding: 64px 0; }
  .hero { padding: 48px 0 56px; }
  .hero-grid,
  .story-section,
  .split,
  .form-grid { grid-template-columns: 1fr; gap: 40px; }
  .story-section.reverse { direction: ltr; }
  .hero-image img { height: 420px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .b2b-stat-grid { grid-template-columns: 1fr; }
  .menu-rij { grid-template-columns: 44px 1fr; gap: 16px; }
  .menu-rij .prijs { grid-column: 2; }
  .quote-band { padding: 64px 0; }
  .nav-inner { flex-wrap: wrap; gap: 12px; }
}

@media (max-width: 560px) {
  /* Met een koppelteken op de breekplek in plaats van een harde knip. */
  h1, h2, h3 { hyphens: auto; }

  body { font-size: 16px; }
  .logo { font-size: 0.88rem; letter-spacing: 0.12em; }
  .logo-icon { height: 28px; }
  .section { padding: 48px 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .hero-credentials { position: static; margin-top: 16px; }
}

/* ===== Utility ===== */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: 16px; }
.mb-md { margin-bottom: 32px; }
.mb-lg { margin-bottom: 48px; }
.mt-md { margin-top: 32px; }
.muted { color: var(--ink-soft); }
.divider {
  border: none;
  height: 1px;
  background: var(--stone);
  margin: 64px 0;
}

/* ===== Scroll-reveal: blokken komen zacht omhoog bij het scrollen ===== */
.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ===== Floating WhatsApp button ===== */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wa);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.wa-float svg {
  width: 30px;
  height: 30px;
  fill: #ffffff;
}

/* ============================================================
   Navy balk met MENU-knop, augustus 2026.
   Vervangt de cream balk met losse navigatielinks op alle pagina's.
   Staat achteraan zodat het wint van de regels hierboven; die zijn
   bewust blijven staan zodat we terug kunnen als dit niet bevalt.
   ============================================================ */

.site-header {
  background: var(--navy-deep);
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header .nav-inner {
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 20px;
  flex-wrap: nowrap;
}

.site-header .logo { gap: 16px; }
.site-header .logo-icon { height: 76px; }
/* Josefin Sans zet zijn kapitalen hoog in de regel, dus het woordmerk stond
   optisch 2,8 px boven het midden van het H-merk en de MENU-knop. In em,
   zodat het klopt op elke lettergrootte. */
.site-header .logo > span { top: 0.135em; }
.logo-woord {
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
}
.site-header .logo .logo-de { color: var(--taupe); }
.site-header .nav-eind { display: flex; align-items: center; gap: 12px; }

.knop-kaal {
  font-family: var(--font-logo);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  background: none;
  cursor: pointer;
  color: var(--cream);
  border: 1px solid rgba(247, 244, 240, 0.38);
  border-radius: 999px;
  padding: 12px 22px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/* De taalknop is een <a> en de menuknop een <button>. Die rekenen hun
   regelhoogte verschillend, vandaar een vaste regelhoogte en een
   minimumbreedte: dan zijn de twee pillen exact even groot. Op de telefoon
   staat de taalknop in het menu, dus daar mag de maat weer los. */
.site-header .knop-kaal, .menu-laag .knop-kaal {
  line-height: 1;
  justify-content: center;
  min-width: 162px;
  height: 44px;
  padding: 0 20px;
  box-sizing: border-box;
}
.knop-kaal svg { flex-shrink: 0; }
.knop-kaal:hover { background: var(--cream); border-color: var(--cream); color: var(--navy-deep); }
.knop-kaal:focus-visible { outline: 2px solid var(--taupe-light); outline-offset: 3px; }
.knop-menu svg { width: 15px; height: 15px; }

/* De hero van de homepage loopt door in het navy van de balk. Andere
   pagina's houden hun cream hero onder de donkere balk. */
.hero-navy { background: var(--navy-deep); padding: 36px 0 92px; }
.hero-navy h1, .hero-navy .hero-kop { color: var(--cream); }
.hero-navy .hero-kop em { color: var(--accent-kop-op-donker); }
.hero-navy .hero-text p.lead { color: rgba(247, 244, 240, 0.76); }
.hero-navy .hero-image img, .hero-navy .hero-image video { height: 496px; }

/* ===== Het uitklapmenu ===== */
/* Het menu schuift in over de rechterhelft, de pagina blijft links zichtbaar.
   Op de telefoon is een halve kolom te smal, daar vult hij het scherm. */
.menu-laag {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(50%, 760px);
  background: var(--navy-deep);
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 16px 0 0;
  overflow-y: auto;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.38s;
}
.menu-laag.open { visibility: visible; transform: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .menu-laag { transition: none; }
}
/* De pagina links dimt weg en vangt de klik om te sluiten. Bewust zwart en niet
   navy: met navy op navy veranderde er boven in beeld niets, want de balk en de
   hero van de homepage hebben exact die kleur. Zwart dimt op elke ondergrond,
   dus de pagina dooft overal even hard. */
body.menu-open::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 59;
}
/* In een flexkolom zet `margin: 0 auto` van .container het uitrekken uit,
   waardoor de blokken smal en gecentreerd zouden staan. Vandaar de nul. */
.menu-laag .container {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 44px;
  /* Zelfde lijn als de container van de pagina: dan landt SLUITEN precies waar
     MENU stond en schuift het paneel er echt onderdoor. */
  padding-right: max(var(--gutter), calc((100vw - var(--sb) - var(--container)) / 2 + var(--gutter)));
}
/* De balk hangt in de container en eindigt dus op de containerrand, niet op de
   schermrand. Het paneel rekende vanaf zijn eigen rand, waardoor de pillen bij
   het openen 130 px naar rechts sprongen. Deze marge is precies het verschil,
   zodat SLUITEN op de plek van MENU landt en het paneel eronderdoor schuift.
   flex-wrap staat uit, anders valt de rij op de telefoon in twee regels. */
.menu-laag .nav-inner {
  justify-content: flex-end;
  flex-wrap: nowrap;
  padding-left: 44px;
  padding-right: max(var(--gutter), calc((100vw - var(--sb) - var(--container)) / 2 + var(--gutter)));
}
/* Het logo staat links al in beeld, dus in het paneel is het dubbelop. */
.menu-laag .logo { display: none; }

.menulaag-lijst {
  display: block;
  flex: 1;
  padding: 44px 0 40px;
}
.menulaag-lijst a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.32rem;
  color: var(--cream);
  text-decoration: none;
  padding: 22px 0;
  display: block;
  border-bottom: 1px solid rgba(247, 244, 240, 0.11);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.menulaag-lijst a:first-child { border-top: 1px solid rgba(247, 244, 240, 0.11); }
/* Alleen zichtbaar onder 620 px, waar de taalpil uit de paneelkop valt. */
.menulaag-taal { display: none; }
.menulaag-lijst a:hover { color: var(--taupe-light); padding-left: 8px; }
.menulaag-voet {
  border-top: 1px solid rgba(247, 244, 240, 0.14);
  padding: 20px 0 28px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: rgba(247, 244, 240, 0.6);
}
.menulaag-voet a { color: var(--taupe-light); text-decoration: none; }
body.menu-open { overflow: hidden; }
/* De zwevende WhatsApp-knop staat op z-index 200 en zou dwars door het
   paneel heen op de menuvoet liggen. */
body.menu-open .wa-float { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }

@media (max-width: 900px) {
  .menu-laag { width: 100%; }
  .menu-laag .container, .menu-laag .nav-inner { padding-left: var(--gutter); padding-right: var(--gutter); }
  .menu-laag .nav-inner { justify-content: space-between; }
  .menu-laag .logo { display: flex; }
  .menulaag-lijst { padding: 28px 0 32px; }
  .menulaag-lijst a { font-size: 1.12rem; padding: 17px 0; }
}

@media (max-width: 900px) {
  .hero-navy { padding: 28px 0 64px; }
  .site-header .logo-icon { height: 56px; }
  .logo-woord { font-size: 1.15rem; letter-spacing: 0.16em; }
  .site-header .knop-kaal, .menu-laag .knop-kaal { height: 40px; padding: 0 16px; font-size: 0.72rem; min-width: 142px; }
  .hero-navy .hero-image img, .hero-navy .hero-image video { height: 420px; }
  .menu-laag .logo-icon { height: 56px; }
}

/* Op de telefoon wint het woordmerk. De taalknop verhuist naar het menu en
   de MENU-knop wordt uitgekleed, zodat DE ADEMPAUZE zo groot mogelijk blijft.
   De maat volgt de restbreedte: de balk heeft een vaste kern van H-merk plus
   knop, en wat overblijft is voor het woordmerk. */
@media (max-width: 620px) {
  .site-header .knop-taal { display: none; }
  .site-header .nav-inner { gap: 10px; }
  .site-header .logo { gap: 9px; }
  .site-header .logo-icon { height: 40px; }
  .logo-woord {
    font-size: clamp(0.86rem, calc((100vw - 240px) / 7.2), 1.75rem);
    letter-spacing: 0.1em;
  }
    /* gap alleen bij de MENU-knop in de balk, want daar is het icoon verborgen.
     De sluitknop in het paneel toont zijn kruisje wel en houdt dus zijn ruimte. */
  .site-header .knop-kaal, .menu-laag .knop-kaal { height: 36px; padding: 0 15px; font-size: 0.7rem; letter-spacing: 0.12em; min-width: 0; }
  .site-header .knop-kaal { gap: 0; }
  .site-header .knop-menu svg { display: none; }
  .menu-laag .logo-icon { height: 40px; }
  .menu-laag .logo { gap: 9px; }
  /* Logo plus twee pillen past hier niet op een regel, dus verhuist de taalkeuze
     naar de menulijst zelf. Daar staat hij groter en beter aan te tikken. */
  .menu-laag .knop-taal { display: none; }
  .menulaag-taal { display: block; }
  /* "Sluiten" is 111 px breed tegenover 70 px voor MENU in de balk, en dat duwde
     het woordmerk eronder. Het kruisje alleen is hier duidelijk genoeg; de knop
     houdt zijn naam via aria-label. */
  .menulaag-sluit .knop-tekst { display: none; }
  .menulaag-sluit { width: 40px; padding: 0; }
  .menulaag-sluit svg { display: block; width: 16px; height: 16px; }
}
@media (max-width: 340px) {
  .site-header .logo-icon { height: 34px; }
  .site-header .logo { gap: 7px; }
}

/* ===== Reviews als schuifrij op de telefoon =====
   Onder elkaar duwden drie reviews de rest van de pagina ver naar beneden.
   Naast elkaar met snap-punten laat meteen zien dat er meer dan een is. */
@media (max-width: 700px) {
  .card-grid--reviews {
    display: flex;
    align-items: stretch;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* tot de schermrand doorlopen, zodat de volgende kaart aankondigt dat er meer is */
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-bottom: 4px;
    scroll-padding-left: var(--gutter);
  }
  .card-grid--reviews::-webkit-scrollbar { display: none; }
  .card-grid--reviews > .testimonial {
    /* Breder dan 84%, want in een smalle kolom viel de cursieve Playfair terug
       op drie woorden per regel en werd de langste review 911 px hoog. */
    flex: 0 0 90%;
    scroll-snap-align: start;
    padding: 26px 22px;
    /* Even hoog, anders staat er naast een kaart van 426 px een van 911. */
    display: flex;
    flex-direction: column;
  }
  .card-grid--reviews .quote {
    font-size: 1.06rem;
    line-height: 1.55;
    padding-left: 18px;
    flex: 1;
  }
  .card-grid--reviews .quote-author { display: block; margin-top: 14px; }

}

/* ===== Reviews inkorten tot een citaat, met uitklap =====
   14 sept 2026: stond eerst alleen in de telefoon-mediaquery, waardoor op desktop
   de hele lap tekst stond. De langste review is 635 tekens en duwde de pagina ver
   naar beneden. Nu overal ingekort tot vijf regels; de volledige tekst blijft in
   de HTML staan, dus hij is nog steeds woordelijk en gewoon vindbaar.
   Zonder JavaScript vuurt er niets en staat alles voluit, precies zoals eerst. */
.card-grid--reviews .quote-tekst {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-grid--reviews .testimonial.uitgeklapt .quote-tekst,
.card-grid--reviews .testimonial.past-precies .quote-tekst {
  display: block;
  overflow: visible;
}

/* De knop wordt door site.js geplaatst, en alleen bij een review die echt
   langer is dan de ruimte. */
.quote-meer {
  display: block;
  background: none;
  border: 0;
  padding: 10px 0 0;
  margin: 0 0 8px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.quote-meer:focus-visible { outline: 2px solid var(--taupe); outline-offset: 3px; }