/* erfterug — design system v6 (huisstijl oktober 2026). Historie v5:
   v5 verwerkt de tweede design-review:
   - één typeschaal van vijf stappen in plaats van tien losse maten
   - één regelbreedte
   - drie breekpunten (640 / 900 / 1100) in plaats van acht
   - contrast op gemeten waarden, niet op aannames
   - geen zwevende kaart over de hero heen; identiteit staat in een eigen strook
   - Rethink Sans met 600 zodat lopende tekst een deadline kan benadrukken */

@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/schibsted-grotesk-latin.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/newsreader-italic-latin.woff2) format('woff2'); }

:root {
  --blue: #25357F;          /* kobalt; wit erop: 11,1:1 */
  --blue-dark: #1B275F;     /* hover */
  --blue-soft: #E8E9F1;
  --navy: #0E1230;          /* inkt */
  --ink: #0E1230;           /* op papier: 16,6:1 */
  --ink-2: #2B2F43;
  --ink-3: #4A4E5E;         /* op papier: 7,5:1 */
  --paper: #F5F4EF;
  --white: #FFFFFF;
  --grey: #ECEAE3;
  --grey-2: #E2E0D8;
  --line: #DEDBD2;
  --line-2: #C9C6BC;

  --t-xs: .9375rem;     /* 15 */
  --t-sm: 1rem;         /* 16 */
  --t-md: 1.125rem;     /* 18 — lopende tekst */
  --t-lg: 1.3125rem;    /* 21 */
  --t-xl: 1.75rem;      /* 28 */

  --measure: 62ch;

  --r-lg: 6px;
  --r-md: 6px;
  --r-sm: 6px;
  --r-pill: 6px;

  --shadow-card: none;

  --sans: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: var(--sans);
  --serif: 'Newsreader', Georgia, serif;

  --pad-section: clamp(3.5rem, 8vw, 6rem);
  --pad-wrap: clamp(1rem, 4vw, 2rem);
  --container: 1280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: var(--t-md);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
strong, b { font-weight: 600; }

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

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--navy); color: #fff; padding: .9rem 1.4rem; border-radius: 0 0 var(--r-sm) 0; text-decoration: none; }
.skip:focus { left: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-wrap); }
.wrap-narrow { max-width: 46rem; margin: 0 auto; padding: 0 var(--pad-wrap); }
.center { text-align: center; }

/* ---------- typografie ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; color: var(--ink); }
h1 { font-size: clamp(2.05rem, 3.7vw, 2.9rem); line-height: 1.2; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.65rem, 2.6vw, 2.2rem); line-height: 1.25; letter-spacing: -0.018em; }
h3 { font-size: var(--t-lg); line-height: 1.35; letter-spacing: -0.01em; }
h1 em, h2 em { font-style: italic; font-weight: 600; }
p { color: var(--ink-2); max-width: var(--measure); }
.lead { font-size: var(--t-lg); line-height: 1.55; color: var(--ink-2); }
.small { font-size: var(--t-sm); }
.fine, .hint, .cap { font-size: var(--t-sm); color: var(--ink-3); }
.label { font-family: var(--display); font-size: var(--t-sm); color: var(--ink-3); }
.muted { color: var(--ink-3); }
a.inline { color: var(--blue-dark); text-underline-offset: 2px; }

/* ---------- header ---------- */
header.site { background: var(--paper); border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem 1.5rem; min-height: 4.75rem; flex-wrap: wrap; padding-top: .55rem; padding-bottom: .55rem; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-mark { width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); background: var(--blue); display: flex; align-items: center; justify-content: center; flex: none; }
.brand-mark svg { width: 1.25rem; height: 1.25rem; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: var(--t-md); letter-spacing: -0.012em; line-height: 1.2; }
.brand-name span { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--ink-3); letter-spacing: 0; }
nav.main { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
nav.main a.link { text-decoration: none; font-size: var(--t-md); color: var(--ink-2); padding: .7rem 0; }
nav.main a.link:hover { color: var(--blue-dark); }
nav.main a.link[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--blue); }
.pill-contact {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: .7rem 1.25rem; font-size: var(--t-md); font-weight: 500; min-height: 2.75rem; white-space: nowrap;
}
.pill-contact:hover { border-color: var(--blue); color: var(--blue-dark); }
.pill-contact svg { width: 1.05rem; height: 1.05rem; color: var(--blue); }
/* het nummer alleen is niet genoeg: wie buiten kantooruren belt krijgt niemand */
.pill-tel { display: flex; flex-direction: column; line-height: 1.2; }
.pill-tel span { font-size: .72rem; font-weight: 400; color: var(--ink-3); letter-spacing: .01em; }
@media (max-width: 640px) {
  header.site .wrap { min-height: 0; gap: .75rem; }
  nav.main { width: 100%; gap: 1.25rem; }
  nav.main .pill-contact { margin-left: auto; padding: .6rem 1rem; }
  .brand-name span { display: none; }
}

/* beloftestrook — direct onder de hero, want dit is wat mensen tegenhoudt */
.beloftes { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.beloftes .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem 2.5rem; padding-top: 2rem; padding-bottom: 2rem; }
.beloftes h2 { font-size: var(--t-md); font-weight: 600; margin-bottom: .4rem; line-height: 1.35; }
.beloftes p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; margin: 0; max-width: none; }
@media (max-width: 860px) { .beloftes .wrap { grid-template-columns: 1fr; gap: 1.25rem; } }

/* kerngegevens — echte tabel, want dit is wat zoekmachines en taalmodellen uitlezen */
.kern { width: 100%; border-collapse: collapse; margin: 1.5rem 0 1rem; font-size: var(--t-sm); }
.kern th, .kern td { text-align: left; vertical-align: top; padding: .7rem .9rem; border-bottom: 1px solid var(--line); line-height: 1.5; }
.kern th { font-weight: 600; color: var(--ink); width: 34%; white-space: nowrap; }
.kern td { color: var(--ink-2); }
.kern tr:nth-child(odd) { background: var(--paper); }
@media (max-width: 560px) {
  .kern th, .kern td { display: block; width: auto; white-space: normal; border-bottom: none; padding: .45rem .9rem; }
  .kern th { padding-bottom: 0; }
  .kern tr { display: block; border-bottom: 1px solid var(--line); padding: .35rem 0; }
}

/* ---------- knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue); color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 500; font-size: var(--t-md);
  padding: 1rem 1.9rem; min-height: 3.25rem; border-radius: var(--r-pill); border: none; cursor: pointer;
  transition: background .16s ease;
}
.btn:hover { background: var(--blue-dark); }
.btn-lg { padding: 1.1rem 2.25rem; min-height: 3.5rem; }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { background: var(--grey-2); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn-ghost:hover { background: var(--grey); }

/* ---------- hero ----------
   Het beeld heeft een eigen vorm en een eigen verhouding, en staat binnen dezelfde
   marges als de rest van de pagina. Daarmee is het een object naast de tekst in
   plaats van de ruimte die na de tekst overblijft. Drie varianten, één klasse. */
.hero { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3.25rem); }
.hero > .wrap { display: grid; align-items: center; gap: clamp(1.75rem, 4vw, 4rem); }

.hero-copy .kicker { font-size: var(--t-md); font-weight: 600; color: var(--blue-dark); margin-bottom: .9rem; letter-spacing: -0.005em; }
.hero-copy h1 { margin-bottom: 1.1rem; }
.hero-copy .lead { margin-bottom: 1.8rem; }
.hero-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.hero-note { font-size: var(--t-sm); color: var(--ink-3); }
/* startmelding — hoort bij de CTA, want de belofte "wij bellen u" hangt eraan */
.hero-start { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; margin-top: 1.5rem; padding-left: .9rem; border-left: 2px solid var(--blue); max-width: 30rem; }
.hero-start b { color: var(--ink); }

.hero-photo { background: var(--grey-2); border-radius: var(--r-lg); overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* A — portret naast de tekst, verhouding 4:5 */
.hero-a > .wrap { grid-template-columns: 1fr minmax(0, 24rem); }
.hero-a .hero-photo { aspect-ratio: 4 / 5; }
.hero-a .hero-copy .lead { max-width: 30rem; }

/* B — het aanslagbiljet naast de tekst, zelfde raamwerk */
.hero-b > .wrap { grid-template-columns: 1fr minmax(0, 23rem); }
.hero-b .hero-photo { aspect-ratio: 4 / 5; }
.hero-b .hero-copy .lead { max-width: 30rem; }

/* C — tekst boven, brede beeldband eronder; ze concurreren niet */
.hero-c { padding-bottom: 0; }
.hero-c > .wrap { grid-template-columns: 1fr; gap: clamp(1.75rem, 3.5vw, 2.75rem); }
.hero-c .hero-copy { max-width: 46rem; }
.hero-c .hero-photo { aspect-ratio: 21 / 8; }
.hero-c .hero-actions { margin-bottom: .25rem; }

@media (max-width: 900px) {
  .hero-a > .wrap, .hero-b > .wrap { grid-template-columns: 1fr; }
  .hero-a .hero-photo, .hero-b .hero-photo { aspect-ratio: 3 / 2; max-height: 20rem; }
  .hero-c .hero-photo { aspect-ratio: 3 / 2; }
}


/* ---------- secties ---------- */
section { padding: var(--pad-section) 0; }
.band-grey { background: var(--grey); }
.section-head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2 { margin-bottom: .8rem; }

/* stappen als regels met nummer in de kantlijn */
.steps-rows { border-top: 1px solid var(--line); }
.steps-rows > div { display: grid; grid-template-columns: 3.5rem 14rem 1fr; gap: 1.75rem; padding: 1.8rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.steps-rows .sn { font-family: var(--display); font-size: var(--t-sm); color: var(--ink-3); padding-top: .3rem; }
.steps-rows h3 { font-size: var(--t-lg); }
.steps-rows p { font-size: var(--t-md); }
@media (max-width: 900px) { .steps-rows > div { grid-template-columns: 2.5rem 1fr; gap: .5rem 1rem; } .steps-rows p { grid-column: 2; } }

/* split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.split.rev .split-media { order: 2; }
.split-wide { grid-template-columns: 1.05fr .95fr; }
@media (max-width: 900px) { .split, .split-wide { grid-template-columns: 1fr; } .split.rev .split-media { order: 0; } }

/* foto's */
.photo { border-radius: var(--r-lg); overflow: hidden; background: var(--grey-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-wide { aspect-ratio: 16 / 11; }
.photo.ph { display: flex; align-items: center; justify-content: center; }
.photo.ph .ph-inner { text-align: center; padding: 1.75rem; color: #5f6875; max-width: 20rem; }
.photo.ph svg { width: 2rem; height: 2rem; margin: 0 auto .75rem; opacity: .6; }
.photo.ph .ph-label { font-size: var(--t-sm); line-height: 1.5; }

/* kaarten */
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.card { background: var(--grey); border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.25rem); }
.card.navy { background: var(--navy); color: #fff; }
.card.navy h3 { color: #fff; }
.card.navy p { color: rgba(255,255,255,.82); }
.card .label { display: block; margin-bottom: 1.25rem; color: var(--ink-2); }
.card.navy .label { color: rgba(255,255,255,.72); }
.card h3 { margin-bottom: 1.25rem; font-size: var(--t-xl); }
@media (max-width: 900px) { .cards-2 { grid-template-columns: 1fr; } }

/* lijst met dunne scheidingslijnen */
.flist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
.flist > div { padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-md); display: flex; gap: .8rem; align-items: start; }
.flist > div > div span { display: block; color: var(--ink-3); font-size: var(--t-sm); line-height: 1.5; }
.flist .dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--blue); flex: none; margin-top: .65rem; }
.flist-1 { grid-template-columns: 1fr; }
.card.navy .flist > div { border-color: rgba(255,255,255,.18); }
.card.navy .flist > div > div span { color: rgba(255,255,255,.68); }
.card.navy .flist .dot { background: #fff; }
@media (max-width: 900px) { .flist { grid-template-columns: 1fr; } }

/* rekenvoorbeeld */
.calc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 1.35rem; border-bottom: 1px solid var(--line); }
.calc-row:last-child { border-bottom: none; }
.calc-row .cl { font-size: var(--t-md); color: var(--ink-2); min-width: 0; }
.calc-row .cv { font-family: var(--display); font-weight: 600; font-size: var(--t-lg); white-space: nowrap; letter-spacing: -0.02em; }
.calc-row.minus .cv { color: var(--blue-dark); }
.calc-row.sub { background: var(--grey); }
.calc-row.sub .cl, .calc-row.sub .cv { font-size: var(--t-md); color: var(--ink-3); }
.calc-row.total { background: var(--navy); }
.calc-row.total .cl { color: rgba(255,255,255,.85); }
.calc-row.total .cv { color: #fff; font-size: var(--t-xl); }

/* faq */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); padding: 1.5rem 0; display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1rem 3rem; }
.faq-item h3 { font-size: var(--t-md); font-weight: 600; }
.faq-item p { font-size: var(--t-md); }
@media (max-width: 900px) { .faq-item { grid-template-columns: 1fr; gap: .35rem; } }

/* licht afsluitend paneel op binnenpagina's */
.cta-panel { background: var(--grey); border-radius: var(--r-lg); padding: clamp(2.25rem, 5vw, 3.25rem) var(--pad-wrap); text-align: center; }
.cta-panel h2 { margin-bottom: .7rem; }
.cta-panel p { max-width: 32rem; margin: 0 auto 1.6rem; }

/* afsluitend blok dat overloopt in de footer */
.cta-band { background: var(--navy); color: #fff; padding: var(--pad-section) 0; text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: .8rem; }
.cta-band p { color: rgba(255,255,255,.82); max-width: 34rem; margin: 0 auto 1.9rem; }

/* ---------- artikel ---------- */
article.doc { padding: clamp(2rem, 5vw, 3rem) 0 2rem; }
article.doc h1 { margin-bottom: 1rem; }
article.doc .meta { font-size: var(--t-sm); color: var(--ink-3); margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
article.doc h2 { font-size: var(--t-xl); margin: 2.25rem 0 .8rem; }
article.doc p { margin-bottom: 1rem; }
article.doc .faq-block { background: var(--grey); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 2rem); margin-top: 2.25rem; }
article.doc .faq-block h2 { margin-top: 0; font-size: var(--t-lg); }
article.doc .faq-block p { font-size: var(--t-md); margin-bottom: .8rem; }
article.doc a { color: var(--blue-dark); }

/* kennisbank */
.kb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.kb-card { background: var(--grey); border-radius: var(--r-lg); padding: 1.6rem 1.6rem 1.75rem; text-decoration: none; display: block; }
.kb-card:hover { background: var(--grey-2); }
.kb-card h2 { margin-bottom: .5rem; font-size: var(--t-lg); line-height: 1.35; letter-spacing: -0.01em; }
.kb-card p { font-size: var(--t-md); }
@media (max-width: 900px) { .kb-grid { grid-template-columns: 1fr; } }

/* melding boven het formulier: eerlijk over de wachttijd */
.notice { background: #fdf3e3; border-radius: var(--r-md); padding: 1.15rem 1.35rem; margin-bottom: 1.5rem; }
.notice p { color: #6b4810; font-size: var(--t-sm); max-width: none; }
.notice a { color: #6b4810; }

/* ---------- formulier (aanvraagpagina) ---------- */
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 2.25rem); }
label.field { display: block; font-weight: 600; font-size: var(--t-md); margin: 1.4rem 0 .5rem; }
label.field:first-child { margin-top: 0; }
input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 100%; padding: .9rem 1.05rem; border: 1px solid var(--line-2); border-radius: var(--r-md);
  font-size: var(--t-md); font-family: var(--sans); background: #fff; color: var(--ink); min-height: 3.25rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.file-drop { border: 1.5px dashed var(--line-2); border-radius: var(--r-md); padding: 1.4rem; text-align: center; background: var(--grey); }
.hint { margin-top: .5rem; }
.checkrow { display: flex; gap: .8rem; align-items: flex-start; margin: 1.4rem 0 .5rem; font-size: var(--t-sm); color: var(--ink-2); }
.checkrow input { margin-top: .25rem; width: 1.15rem; height: 1.15rem; accent-color: var(--blue); flex: none; }
.error { color: #a4231c; font-size: var(--t-sm); margin-top: .7rem; display: none; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- footer ---------- */
footer.site { background: var(--navy); color: #fff; padding: clamp(2.5rem, 6vw, 4rem) 0 2.5rem; }
footer.site .brand-name { color: #fff; }
footer.site .brand-name span { color: rgba(255,255,255,.66); display: block; }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 2.5rem; }
footer.site .fh { font-family: var(--display); font-size: var(--t-md); font-weight: 500; margin-bottom: .75rem; color: #fff; letter-spacing: 0; }
footer.site p { color: rgba(255,255,255,.78); }
footer.site a { display: inline-block; text-decoration: none; color: rgba(255,255,255,.78); font-size: var(--t-sm); padding: .45rem 0; }
footer.site a:hover { color: #fff; text-decoration: underline; }
footer.site .fine { color: rgba(255,255,255,.7); margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.16); max-width: 52rem; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

.concept-banner { background: #fdf3e3; color: #7a5212; text-align: center; font-size: var(--t-sm); padding: .7rem var(--pad-wrap); }

/* Contact and AI explanation: quiet footer hierarchy; no implied endorsement. */
.whatsapp-contact { display:inline-flex; align-items:center; gap:.55rem; margin-top:1rem; color:#176842; font-weight:600; text-decoration:none; }
.whatsapp-contact svg { width:1.65rem; height:1.65rem; flex:none; }
.wa-number { font-weight:400; white-space:nowrap; }
.contact-note { font-size:.8rem; line-height:1.5; margin-top:.5rem; max-width:24rem; color:var(--ink-3); }
.ai-explainer { display:grid; grid-template-columns:1fr 1.2fr; gap:3rem; border-top:1px solid var(--line-2); margin-top:2.5rem; padding-top:2rem; }
.ai-intro h2 { font-size:1.35rem; line-height:1.35; margin:0 0 .65rem; }
.ai-intro p { font-size:1rem; max-width:30rem; }
.ai-buttons { display:flex; flex-wrap:wrap; gap:.75rem; }
.ai-button { display:flex; flex-direction:column; justify-content:center; min-width:9rem; min-height:4.4rem; padding:.75rem 1.15rem; border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--paper); color:var(--ink); text-decoration:none; font-size:1rem; font-weight:600; line-height:1.4; }
.ai-button:hover { border-color:var(--blue); background:var(--blue-soft); color:var(--blue-dark); }
.ai-provider { font-size:.75rem; font-weight:400; color:var(--ink-3); }
.ai-note { margin-top:.8rem; font-size:.8rem; line-height:1.55; color:var(--ink-3); max-width:38rem; }
.ai-prompt { margin-top:.8rem; font-size:.8rem; }
.ai-prompt summary { cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:.4rem 0; }
.ai-prompt p { margin:.6rem 0; }
.ai-prompt textarea { width:100%; max-width:100%; font:inherit; line-height:1.55; padding:.8rem; background:var(--paper); color:var(--ink); resize:vertical; }
.ai-copy { margin-top:.7rem; padding:.6rem .9rem; border:1px solid var(--line-2); border-radius:var(--r-md); color:var(--ink); background:var(--paper); font:inherit; cursor:pointer; min-height:44px; }
.ai-copy-status { display:block; margin-top:.5rem; }
.whatsapp-float { position:fixed; z-index:30; right:1.25rem; bottom:1.25rem; bottom:calc(1.25rem + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:.5rem; min-height:52px; padding:.6rem 1rem .6rem .7rem; border-radius:30px; background:#176842; color:#fff; text-decoration:none; box-shadow:0 3px 12px #0002; font-size:.9rem; }
.whatsapp-float svg { width:2rem; height:2rem; }
.whatsapp-float:hover { background:#104c30; color:#fff; }
.whatsapp-contact:focus-visible, .whatsapp-float:focus-visible, .ai-button:focus-visible, .ai-copy:focus-visible, .ai-prompt summary:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
footer.site { padding-bottom:6rem; }
@media(max-width:700px) { .ai-explainer { grid-template-columns:1fr; gap:1.2rem; } .ai-buttons { gap:.6rem; } .ai-button { min-width:0; flex:1; } .whatsapp-float { right:.8rem; bottom:calc(.8rem + env(safe-area-inset-bottom)); padding:.65rem; } .whatsapp-float span { display:none; } }

/* Scoped overrides for the existing dark footer's link and heading rules. */
footer.site .ai-explainer { padding:2rem 0 0; border-color:rgba(255,255,255,.2); }
footer.site .ai-intro h2 { color:#fff; }
footer.site .ai-button { display:flex; padding:.75rem 1.15rem; color:var(--ink); font-size:1rem; }
footer.site .ai-button:hover { color:var(--blue-dark); text-decoration:none; }
footer.site .ai-button .ai-provider { color:var(--ink-3); }
footer.site .whatsapp-contact { display:inline-flex; align-items:center; padding:.45rem 0; }
footer.site .contact-note { color:rgba(255,255,255,.78); }
footer.site .linkbtn { border:0; background:none; color:rgba(255,255,255,.78); font:inherit; text-decoration:underline; padding:.5rem 0; cursor:pointer; }

/* Familiar brand marks, quiet sales support, and recognisable WhatsApp contact. */
nav.main .header-whatsapp { gap:.5rem; }
nav.main .header-whatsapp svg { width:1.3rem; height:1.3rem; color:#25D366; }
nav.main .header-whatsapp:hover { border-color:#25D366; color:#176842; }
footer.site .ai-button { flex-direction:row; align-items:center; justify-content:flex-start; gap:.8rem; min-width:10.75rem; padding:1rem 1.15rem; }
.ai-logo { width:30px; height:30px; display:block; flex:0 0 30px; object-fit:contain; }
.ai-button-label { display:flex; flex-direction:column; }
footer.site .ai-intro h2 { max-width:25rem; }
@media(max-width:420px) { footer.site .ai-button { min-width:0; padding:.8rem; gap:.6rem; } .ai-logo { width:26px; height:26px; flex-basis:26px; } }

/* Informational privacy mark, linked to the actual privacy policy. */
footer.site .privacy-badge { display:flex; align-items:center; gap:.85rem; width:fit-content; max-width:100%; margin-top:1.35rem; padding:.35rem 0; color:#fff; text-decoration:none; }
.privacy-badge img { width:88px; height:88px; flex:0 0 88px; }
.privacy-badge > span { font-weight:500; line-height:1.45; }
.privacy-badge > span > span { display:block; margin-top:.25rem; max-width:10rem; font-size:.8rem; font-weight:400; color:rgba(255,255,255,.78); }
footer.site .privacy-badge:hover > span > span { text-decoration:underline; text-underline-offset:3px; }
.privacy-badge:focus-visible { outline:2px solid #fff; outline-offset:6px; border-radius:4px; }

/* =========================================================
   v6 erfterug — laag over v5. Eén merkkleur (kobalt), inkt, papier.
   Koppen 700, lopende tekst minimaal 18 px.
   ========================================================= */
body { background: var(--paper); line-height: 1.6; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; }
h1 { line-height: 1.05; }
h2 { line-height: 1.1; font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
h1 em, h2 em { font-style: normal; font-weight: 700; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }

header.site { background: var(--paper); border-bottom: 1px solid var(--line); }
.brand { gap: .55rem; color: var(--ink); }
.brand-mark { background: none; width: 2.1rem; height: 2.1rem; border-radius: 0; }
.brand-mark svg { width: 100%; height: 100%; fill: var(--blue); }
.brand-name { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
footer.site .brand-mark svg { fill: #fff; }
nav.main a.link { color: var(--ink); font-weight: 600; font-size: var(--t-sm); }
nav.main a.link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ink); }
.pill-contact { border-radius: var(--r-sm); }

.btn { border-radius: var(--r-sm); font-weight: 600; }
.card, .kb-card { background: var(--white); border: 1px solid var(--line); }
.band-grey { background: var(--grey); }
.form-card { background: var(--white); }
input[type=text], input[type=email], input[type=tel], select, textarea { background: var(--white); }

/* ---------- homepage: foto-hero ---------- */
.home-hero { position: relative; min-height: min(92vh, 860px); display: flex; flex-direction: column; color: #fff; background: #2a2a2a; padding: 0; overflow: hidden; }
.home-hero > picture, .home-hero > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.home-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,18,48,.5) 0%, rgba(14,18,48,0) 22%, rgba(14,18,48,0) 42%, rgba(14,18,48,.78) 100%); }
.home-hero header.site { position: relative; z-index: 2; background: transparent; border: 0; }
.home-hero header.site .brand, .home-hero nav.main a.link { color: #fff; }
.home-hero header.site .brand-mark svg { fill: #fff; }
.home-hero nav.main a.link[aria-current="page"] { box-shadow: inset 0 -2px 0 #fff; }
.home-hero .pill-contact { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.home-hero .pill-contact svg { color: #fff; }
.home-hero-body { position: relative; z-index: 2; margin-top: auto; }
.home-hero-body .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2rem; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.home-hero h1 { color: #fff; font-size: clamp(2.4rem, 4.6vw, 4.4rem); max-width: 22ch; }
.home-hero h1 span { display: block; }
.home-hero .btn { background: #fff; color: var(--ink); }
.home-hero .btn:hover { background: var(--grey); }
.home-hero .hero-sub { color: #fff; font-size: var(--t-sm); margin-top: .75rem; text-align: center; max-width: none; }

.intro-strip { border-bottom: 1px solid var(--line); }
.intro-strip .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-top: 2.75rem; padding-bottom: 2.75rem; }
.intro-strip p { font-size: var(--t-lg); color: var(--ink); max-width: 36rem; }
.intro-strip p.muted-line { color: var(--ink-3); font-size: var(--t-md); }

/* ---------- uitkomsten ---------- */
.outcomes { background: var(--navy); color: var(--paper); }
.outcomes h2 { color: #fff; margin-bottom: 2.25rem; }
.outcomes .table-box { overflow-x: auto; }
.outcomes table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--t-md); text-align: left; }
.outcomes thead th { color: #C9CBD6; font-weight: 600; font-size: var(--t-sm); padding: 0 1.5rem 1rem 0; }
.outcomes tbody tr { border-top: 1px solid #3A3F5C; }
.outcomes tbody th { font-weight: 600; padding: 1.5rem 1.5rem 1.5rem 0; width: 48%; }
.outcomes tbody td { padding: 1.5rem 1.5rem 1.5rem 0; }
.outcomes td.amt { font-size: var(--t-xl); font-weight: 700; white-space: nowrap; }
.outcomes tr.win { background: var(--blue); color: #fff; }
.outcomes tr.win th { padding-left: 1.5rem; }
.outcomes p { color: #E4E5EC; }
.worked { display: flex; flex-wrap: wrap; gap: 1.5rem 3.5rem; border-top: 1px solid #3A3F5C; margin-top: 2.5rem; padding-top: 2.25rem; }
.worked div { display: flex; flex-direction: column; gap: .25rem; }
.worked span { color: #C9CBD6; font-size: var(--t-sm); }
.worked b { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: #fff; }
.worked b.dim { color: #9DA2BC; }
.outcomes .fineprint { margin-top: 1.5rem; font-size: var(--t-sm); color: #C9CBD6; }

/* ---------- vertrouwen ---------- */
.trust .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem 4rem; align-items: start; }
.trust .serif { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.3; color: var(--ink); max-width: none; }
.trust p { font-size: var(--t-md); }
.trust .org { color: var(--ink-3); font-size: var(--t-sm); margin-top: 1.25rem; }

/* ---------- stappen ---------- */
.steps-line { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin-top: 2.25rem; }
.steps-line li { border-top: 2px solid var(--ink); padding-top: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.steps-line .st { color: var(--ink-3); font-size: var(--t-sm); }
.steps-line h3 { font-size: var(--t-lg); }
.steps-line p { font-size: var(--t-md); }

/* ---------- cases-slider ---------- */
.cases-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 2rem; }
.cases-nav { display: flex; gap: .5rem; }
.cases-nav button { width: 3.25rem; height: 3.25rem; border-radius: var(--r-sm); border: 1.5px solid var(--ink); background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cases-nav button + button { background: var(--blue); border-color: var(--blue); color: #fff; }
.cases-nav button:disabled { opacity: .35; cursor: default; }
.cases-nav svg { width: 1.25rem; height: 1.25rem; }
.cases { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .75rem; scrollbar-width: thin; }
.case { flex: 0 0 calc((100% - 2.5rem) / 3); min-width: 280px; scroll-snap-align: start; background: var(--white); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.case img { width: 100%; height: 240px; object-fit: cover; }
.case > div { padding: 1.5rem; display: flex; flex-direction: column; gap: .8rem; flex-grow: 1; }
.case .tag { font-size: var(--t-xs); color: var(--ink-3); }
.case .serif { font-size: 1.6rem; line-height: 1.2; color: var(--ink); max-width: none; }
.case p { font-size: var(--t-md); }
.case a { margin-top: auto; font-weight: 600; color: var(--blue); }

@media (max-width: 900px) {
  .trust .wrap { grid-template-columns: 1fr; }
  .steps-line { grid-template-columns: 1fr; gap: 1.75rem; }
  .case { flex-basis: 82%; }
  .home-hero { min-height: 88vh; }
  .home-hero > picture img { object-position: 62% center; }
  .home-hero-body .wrap { flex-direction: column; align-items: stretch; }
  .home-hero .btn { text-align: center; justify-content: center; }
}
@media (max-width: 640px) {
  .home-hero .pill-contact { display: none; }
  .home-hero nav.main { gap: 1.1rem; }
  .home-hero h1 { font-size: 2.15rem; }
}
h3 { font-weight: 600; }
@media (max-width: 700px) {
  .outcomes table, .outcomes tbody, .outcomes tr, .outcomes th, .outcomes td { display: block; min-width: 0; width: auto; }
  .outcomes table { min-width: 0; }
  .outcomes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .outcomes tbody tr { padding: 1.25rem 0; }
  .outcomes tbody th, .outcomes tbody td { padding: 0 0 .35rem; }
  .outcomes tr.win { padding: 1rem; border-radius: var(--r-sm); }
  .outcomes tr.win th { padding-left: 0; }
}