/* Dimpr homepage v5 — tokens follow site/v3 and dimpr-design.md */
:root {
  --primary: #3288f4;
  --primary-strong: #1277e7;
  --primary-dark: #0d55ae;
  --foreground: #0f172a;
  --text-body: #334155;
  --text-secondary: #475569;
  --muted-foreground: #64748b;
  --subtle: #94a3b8;
  --border: #e2e8f0;
  --input: #cbd5e1;
  --info-text: #034c9a;
  --info-strong: #0360c1;
  --tint-blue: #eaf3ff;
  --tint-blue-soft: #eef4fb;
  --info-subtle: #f7faff;
  --warm-subtle: #fcf9f5;
  --warm-border: #f2deca;
  --placeholder: #b1d2fe;

  --gradient-primary: linear-gradient(180deg, #3288f4 0%, #0d55ae 100%);
  --gradient-hero: radial-gradient(55% 75% at 88% 35%, rgba(253, 233, 213, 0.9), rgba(253, 233, 213, 0) 70%),
    linear-gradient(180deg, #e4f0fa 0%, #eef5fc 100%);
  --gradient-start: radial-gradient(55% 75% at 82% 45%, rgba(253, 233, 213, 0.9), rgba(253, 233, 213, 0) 70%),
    linear-gradient(180deg, #eef5fc 0%, #e4f0fa 100%);

  --shadow-button: 0 10px 24px rgba(50, 136, 244, 0.3);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.04);
  --shadow-float: 0 18px 44px rgba(3, 61, 127, 0.16);

  /* Motion: drie duren, drie curves */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-reward: cubic-bezier(0.34, 1.36, 0.64, 1);
  --container: 1160px;
  --gutter: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
html, body { margin: 0; }
body {
  font-family: "Onest", system-ui, sans-serif;
  color: var(--foreground);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--info-strong); }
a:hover { color: #033d7f; }
button, input { font-family: inherit; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.container { max-width: var(--container); margin: 0 auto; }
.section { padding: 136px var(--gutter); }
.h1 { margin: 0; font-size: clamp(42px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; }
.h2 { margin: 0; font-size: clamp(36px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; }
.h2-xl { margin: 0; font-size: clamp(40px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; }
.lead { margin: 0; font-size: 20px; line-height: 1.5; color: var(--text-secondary); }
.split { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px; }
.split > * { flex: 1 1 440px; min-width: 0; }
.stack { display: flex; flex-direction: column; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border-radius: 999px; border: none; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-button); }
.btn-primary:hover { color: #fff; }
.btn-blue { background: var(--primary-strong); color: #fff; }
.btn-blue:hover { color: #fff; background: #0d66cc; }
.btn-dark { background: var(--foreground); color: #fff; }
.btn-dark:hover { color: #fff; background: #1e293b; }
.link-strong { font-size: 16px; font-weight: 600; color: var(--foreground); text-decoration: none; }
.link-blue { font-size: 17px; font-weight: 600; color: var(--primary-strong); text-decoration: none; }
.link-blue:hover { text-decoration: underline; }

/* Placeholders (beeld volgt) */
.ph { border: 1.5px dashed var(--placeholder); border-radius: 32px; background: rgba(255, 255, 255, 0.4); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.ph-inner { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ph-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--info-strong); }
.ph-text { font-size: 15px; color: var(--info-text); max-width: 280px; }

/* Nav */
.nav-wrap { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav { max-width: var(--container); margin: 0 auto; padding: 16px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-logo img { display: block; height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.nav-links a:not(.btn) { color: var(--text-body); text-decoration: none; }
.nav-links a:not(.btn):hover { color: var(--foreground); }
.nav .btn { min-height: 44px; padding: 0 22px; font-size: 15px; }

/* Hero */
.hero { background: var(--gradient-hero); padding: 104px var(--gutter) 56px; }
.hero-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.hero-copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero-sub { margin: 0; max-width: 500px; font-size: 19px; line-height: 1.55; color: var(--text-secondary); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.hero-proof { margin: -8px 0 0; font-size: 14px; color: var(--text-secondary); }
.hero-visual { flex: 1 1 420px; min-width: 0; position: relative; height: 540px; }
.hero-visual .ph, .hero-photo { position: absolute; inset: 0 0 0 40px; }
.hero-photo { width: calc(100% - 40px); height: 100%; object-fit: cover; border-radius: 32px; }
.trust { margin-top: 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; border-top: 1px solid rgba(0, 31, 106, 0.08); padding-top: 28px; }
.trust p { margin: 0; font-size: 14px; color: var(--text-secondary); }
.trust strong { color: #1e293b; }
.trust-logos { display: flex; flex-wrap: wrap; gap: 24px; }
.logo-ph { width: 110px; height: 32px; border-radius: 8px; border: 1.5px dashed var(--input); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted-foreground); }


/* FAQ */
/* Accordeon: hoogte animeert via grid-rijen */
.collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-in-out); }
.collapse.is-open { grid-template-rows: 1fr; }
.collapse-inner { min-height: 0; overflow: hidden; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.collapse.is-open > .collapse-inner { opacity: 1; }

/* Zo beginnen we + vragen */
.begin { padding: 128px var(--gutter); }
.begin-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px 96px; margin-top: 56px; }
.begin-steps { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 32px; }
.steps-item { display: flex; gap: 16px; }
.steps-num { flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 999px; border: 1px solid var(--input); color: var(--muted-foreground); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.steps-body { display: flex; flex-direction: column; gap: 4px; }
.steps-body h3 { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 700; }
.steps-body h3 span { font-weight: 500; color: var(--muted-foreground); }
.steps-body p { margin: 0; max-width: 420px; font-size: 17px; line-height: 1.55; color: var(--text-secondary); }
.begin-faq { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.faq-title { margin: 0 0 12px; font-size: 20px; line-height: 1.4; font-weight: 700; }
.faq-list { align-self: stretch; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-btn { width: 100%; min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border: none; background: transparent; color: var(--foreground); font-size: 17px; font-weight: 600; text-align: left; cursor: pointer; }
.faq-btn span:first-child { min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
.faq-btn:focus-visible, .ask-toggle:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
.faq-sign { flex: none; position: relative; width: 20px; height: 20px; transition: transform var(--dur-base) var(--ease-out); }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; border-radius: 2px; background: var(--muted-foreground); }
.faq-sign::after { transform: rotate(90deg); }
.faq-item.is-open .faq-sign { transform: rotate(45deg); }
.faq-answer { margin: 0; padding: 0 40px 20px 0; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.ask-toggle { margin-top: 20px; padding: 6px 0; border: none; background: transparent; font-size: 15px; font-weight: 600; color: var(--foreground); cursor: pointer; }
.ask-toggle span { color: var(--muted-foreground); }
.ask-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
#faq-ask { align-self: stretch; }
.form.ask { padding: 16px 4px 4px; border-radius: 0; background: transparent; box-shadow: none; gap: 14px; }
.form.ask .btn { width: auto; align-self: flex-start; min-height: 48px; }
.form.ask .form-note { text-align: left; }
.ask textarea { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--input); font: inherit; font-size: 16px; color: var(--foreground); resize: vertical; }
.ask textarea:focus { outline: 3px solid rgba(50, 136, 244, 0.35); border-color: var(--primary); }
.ask-thanks { margin: 16px 0 0; }


/* 05 Beginnen */
.start { padding: 128px var(--gutter); background: var(--gradient-start); }
.start .container { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px 80px; }
.start-copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.start-copy h2 { margin: 0; font-size: clamp(38px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 700; }
.start-copy p { margin: 0; max-width: 480px; font-size: 19px; line-height: 1.55; color: var(--text-secondary); }
.founders { display: flex; align-items: center; gap: 16px; }
.founders .avatar-ph { width: 72px; height: 72px; border-color: var(--placeholder); color: var(--info-text); }
.founders b { display: block; font-size: 16px; }
.founders small { font-size: 14px; color: var(--text-secondary); }
.form { flex: 1 1 420px; min-width: 0; background: #fff; border-radius: 28px; padding: 36px; box-shadow: 0 24px 64px rgba(3, 61, 127, 0.12); display: flex; flex-direction: column; gap: 18px; }
.form-context { position: absolute; left: -10000px; top: 0; width: 280px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.form label em { font-style: normal; font-weight: 400; color: var(--muted-foreground); }
.form input { min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--input); font-size: 16px; color: var(--foreground); }
.form input:focus { outline: 3px solid rgba(50, 136, 244, 0.35); border-color: var(--primary); }
.form .btn { width: 100%; }
.form-note { font-size: 13px; color: var(--muted-foreground); text-align: center; }
.form-thanks { font-size: 17px; line-height: 1.5; font-weight: 600; color: var(--info-text); background: var(--tint-blue-soft); padding: 16px; border-radius: 12px; }

/* Footer */
.footer { padding: 40px var(--gutter); border-top: 1px solid var(--border); }
.footer .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; font-size: 14px; }
.footer img { display: block; height: 24px; width: auto; }
.footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.footer nav a { color: var(--text-secondary); text-decoration: none; }
.footer nav a:hover { color: var(--foreground); }
.footer small { color: var(--muted-foreground); font-size: 14px; }



/* =========================================================
   01 Het verhaal van Sanne — eerst zonder Dimpr, dan met Dimpr; de lucht kleurt blauw bij de omslag
   ========================================================= */
.story { position: relative; overflow: clip; padding: 128px var(--gutter) 160px; background: #faf8f4; }
.story-sky { position: absolute; inset: 0; pointer-events: none; opacity: var(--sky, 0);
  background: linear-gradient(180deg, rgba(220, 236, 255, 0) 0, rgba(220, 236, 255, 0) calc(var(--turn, 1200px) - 40px), #dcecff calc(var(--turn, 1200px) + 280px), #eaf4ff 75%, #f5faff 100%); }
/* Luchtmoment bij de omslag: diepere lucht en drie wolken met diepte (achter vaag en groot, voor scherp) */
.sky-band { position: absolute; left: 0; right: 0; top: calc(var(--turn, 1200px) - 120px); height: 820px; pointer-events: none; opacity: var(--sky, 0);
  background: linear-gradient(180deg, rgba(178, 212, 251, 0) 0%, #b2d4fb 26%, #c4defc 58%, rgba(220, 236, 255, 0) 100%); }
/* De wolken openen zich bij de omslag: twee massa's als gordijn, diepte door snelheid en vervaging,
   warm grijs bij bewolkt naar helder wit bij open lucht, en een zachte zon die doorbreekt */
.sun { position: absolute; left: 50%; top: calc(var(--turn, 1200px) + 210px); width: 980px; height: 760px; margin: -380px 0 0 -490px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 228, 186, 0.6), rgba(255, 238, 214, 0.25) 55%, rgba(255, 238, 214, 0)); opacity: var(--sky, 0); transform: scale(calc(0.8 + var(--sky, 0) * 0.2)); } /* de zon zwelt mee: de uitademing */
.cloud-cover { position: absolute; left: 0; right: 0; top: calc(var(--turn, 1200px) - 50px); height: 360px; pointer-events: none; z-index: 2; overflow: visible;
  --ease: cubic-bezier(0.16, 1, 0.3, 1); --k: 1; }
/* Mist: zachte witte waas rond de kop, trekt als eerste op */
.mist { position: absolute; left: 50%; top: 40px; width: calc(1200px * var(--k)); height: 440px; margin-left: calc(-600px * var(--k));
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.45) 55%, rgba(255, 255, 255, 0));
  opacity: calc(1 - var(--sky, 0) * 2.2); transform: translateY(calc(var(--sky, 0) * -50px)) scale(calc(1 + var(--sky, 0) * 0.3));
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
/* Wolken in drie lagen: diepte door vervaging en snelheid; tijdens het wegtrekken worden ze waziger (uit focus) */
.cloud-cover .cloud { position: absolute; height: auto; left: calc(50% + var(--x) * var(--k) * 1px); top: var(--y); width: calc(var(--w) * var(--k) * 1px);
  opacity: calc(var(--o) * (1.4 - var(--sky, 0) * 1.5));
  transform: translateX(calc(var(--sky, 0) * var(--dir) * var(--speed) * 60vw)) scale(calc(1 + var(--sky, 0) * var(--speed) * 0.14));
  filter: blur(calc(var(--b) + var(--sky, 0) * var(--bx))) grayscale(calc((1 - var(--sky, 0)) * 0.3)) brightness(calc(0.92 + var(--sky, 0) * 0.14));
  transition: transform 0.8s var(--ease), opacity 0.8s var(--ease), filter 0.8s var(--ease); }
.cloud.is-back { --o: 0.6; --speed: 0.35; --b: 8px; --bx: 4px; }
.cloud.is-mid { --o: 0.82; --speed: 0.65; --b: 3px; --bx: 6px; }
.cloud.is-front { --o: 0.92; --speed: 1; --b: 0px; --bx: 8px; }
/* De kop zit kort achter de wolken en wordt scherp als ze opengaan */
.tl-item.is-turn .tl-turn-title { filter: blur(calc((1 - var(--sky, 0)) * 5px)); transform: scale(calc(0.96 + var(--sky, 0) * 0.04)); transition: filter 0.6s var(--ease, ease), transform 0.6s var(--ease, ease); }
.story-inner { position: relative; z-index: 1; }

/* 01 Herkennen — vertical timeline */
.recognize-head { max-width: 900px; margin: 0 auto 72px; text-align: center; }
.timeline { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; list-style: none; padding: 0; }
.tl-item { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 18px; transition: opacity var(--dur-slow) var(--ease-out); opacity: 0; }
.tl-item:first-child { padding-top: 0; }
.tl-item.is-on { opacity: 1; }
.tl-item.is-with { align-self: stretch; } /* volle breedte, zodat elke foto dezelfde max-breedte haalt */
.tl-seg { display: block; width: 1.5px; height: 72px; background: var(--input); transform-origin: top center; transform: scaleY(0); transition: transform var(--dur-slow) var(--ease-out); }
.tl-seg.is-blue { width: 2px; height: 160px; background: var(--primary-strong); }
.tl-item.is-on .tl-seg { transform: scaleY(1); }
.tl-start { display: block; width: 20px; height: 20px; border-radius: 999px; background: var(--foreground); box-shadow: 0 0 0 10px rgba(15, 23, 42, 0.06); }
.tl-dot { display: block; width: 11px; height: 11px; border-radius: 999px; background: #fff; border: 1.5px solid var(--muted-foreground); }
.tl-dimpr { display: block; width: 20px; height: 20px; border-radius: 999px; background: var(--primary-strong); }
.tl-item.is-on .tl-dimpr { animation: dpulse 1.6s var(--ease-out) var(--dur-base) 2; }
.tl-text { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out) var(--dur-fast), transform var(--dur-slow) var(--ease-out) var(--dur-fast); }
.tl-item.is-on .tl-text { opacity: 1; transform: none; }
.tl-title { display: block; font-size: clamp(28px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.tl-sub { display: block; margin-top: 10px; font-size: 20px; line-height: 1.5; color: var(--text-secondary); }
.tl-signal { display: block; font-size: 26px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }
.tl-panel { width: 100%; box-shadow: var(--shadow-card); display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 18px; padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 56px); border-radius: 40px; background: #fff; }
.tl-panel h3 { margin: 0; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; }
.tl-panel h3 span { color: var(--primary-strong); }
.tl-panel p { margin: 0; max-width: 620px; font-size: 21px; line-height: 1.5; color: var(--text-body); }
.tl-pairs { list-style: none; margin: 16px 0 0; padding: 0; width: 100%; max-width: 680px; display: flex; flex-direction: column; gap: 12px; }
.tl-pair { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 14px 20px; border-radius: 16px; background: var(--tint-blue-soft); font-size: 18px; line-height: 1.35; opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.tl-item.is-on .tl-pair { opacity: 1; transform: none; }
.tl-pair .from { text-align: right; color: var(--text-secondary); }
.tl-pair .arrow { color: var(--subtle); }
.tl-pair .to { text-align: left; font-weight: 600; color: var(--info-text); }
.tl-close { margin: 12px 0 0; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out) 0.9s, transform var(--dur-slow) var(--ease-out) 0.9s; }
.tl-item.is-on .tl-close { opacity: 1; transform: none; }
@keyframes dpulse { 0% { box-shadow: 0 0 0 0 rgba(18, 119, 231, 0.35); } 70% { box-shadow: 0 0 0 22px rgba(18, 119, 231, 0); } 100% { box-shadow: 0 0 0 0 rgba(18, 119, 231, 0); } }
/* Actiekaart (Figma "Action Card") */
.action-card { align-self: stretch; display: flex; flex-direction: column; gap: 24px; padding: 20px; border-radius: 14px; background: #fff; border: 1px solid rgba(0, 31, 106, 0.06); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.04)); box-shadow: 0 12px 32px rgba(3, 61, 127, 0.1); animation: fxPop var(--dur-slow) var(--ease-reward) 0.25s both; }
@keyframes fxPop { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
.action-top { display: flex; justify-content: space-between; align-items: flex-start; }
.action-icon { position: relative; width: 120px; height: 120px; }
.action-icon img { width: 100%; height: 100%; object-fit: cover; }
.action-icon::after { content: ""; position: absolute; left: 17.5%; right: 17.5%; bottom: 8%; height: 2.5px; border-radius: 50%; background: rgba(0, 0, 0, 0.1); }
.action-body { display: flex; flex-direction: column; gap: 4px; }
.action-body b { font-size: 20px; line-height: 1.2; letter-spacing: -0.1px; font-weight: 600; }
.action-body span { font-size: 16px; line-height: 1.5; color: var(--foreground); }
.action-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 26px; font-size: 14px; line-height: 1.5; font-weight: 500; }
.badge.is-new { background: #ec801b; color: #fff; }
.badge.is-muted { background: #f1f5f9; color: var(--muted-foreground); }
.badge.is-blue { background: var(--tint-blue); color: var(--info-text); }
/* Teambooster-elementen */
.el-card { align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06); }
.tb-dots { display: flex; gap: 4px; margin-bottom: 4px; }
.tb-dots b { width: 18px; height: 5px; border-radius: 3px; background: var(--primary-strong); }
.tb-dots span { width: 5px; height: 5px; border-radius: 3px; background: rgba(100, 116, 139, 0.35); }
.team-content small { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.team-content b { font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; }
.team-content span { font-size: 16px; line-height: 1.5; color: var(--text-body); }
.team-discuss { animation: fxPop var(--dur-slow) var(--ease-reward) 0.2s both; }
.discuss-head { font-size: 15px; font-weight: 600; color: var(--info-text); margin-bottom: 4px; }
.team-discuss span { font-size: 16px; line-height: 1.45; }
.tb-timer { display: flex; align-items: center; justify-content: flex-end; height: 32px; margin-top: 6px; padding: 0 12px; border-radius: 10px; background: linear-gradient(90deg, #fbd7ad 60%, #fdf3e6 60%); font-style: normal; }
.tb-timer b { font-size: 13px; }
/* Organisatie-elementen */
.org-chart { gap: 14px; }
.app-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.app-head b { font-size: 16px; }
.app-head small { font-size: 13px; color: var(--muted-foreground); }
.app-chart { width: 100%; height: 150px; }
.app-chart path { fill: none; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.app-chart .l1 { stroke: #f6ad55; }
.app-chart .l2 { stroke: var(--primary-strong); }
.app-chart .l3 { stroke: var(--placeholder); }
.el-insight { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 600; color: #773d04; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06); animation: fxPop var(--dur-slow) var(--ease-reward) 0.25s both; }
.el-insight i { width: 8px; height: 8px; border-radius: 999px; background: #f6ad55; }

/* Overgang hero → verhaal: één doorlopend vlak, eerst kennismaken met Sanne, geen leeg gat */
.hero { background:
  linear-gradient(180deg, rgba(250, 248, 244, 0) 62%, #faf8f4 100%),
  radial-gradient(55% 65% at 88% 88%, rgba(236, 128, 27, 0.38), transparent 70%),
  radial-gradient(45% 55% at 68% 18%, rgba(50, 136, 244, 0.34), transparent 70%),
  radial-gradient(40% 50% at 4% 96%, rgba(253, 186, 116, 0.4), transparent 70%),
  radial-gradient(35% 40% at 30% 8%, rgba(167, 199, 255, 0.55), transparent 70%),
  linear-gradient(160deg, #e8f1ff 0%, #d6e7ff 48%, #ffe7d1 100%) !important; }
.trust-band { border-bottom: 0 !important; padding-top: 8px !important; padding-bottom: 8px !important; }
.story { padding-top: 96px !important; }
.meet { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 0 var(--gutter); }
.meet-photo { width: 120px; height: 120px; border-radius: 999px; margin-bottom: 8px; object-fit: cover; border: 4px solid #fff; box-shadow: 0 12px 32px rgba(3, 61, 127, 0.14); }
.meet-name { margin: 0; font-size: clamp(30px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; }
.meet-text { margin: 0; max-width: 460px; font-size: 19px; line-height: 1.5; color: var(--text-secondary); }
/* Tijdmachine begint direct onder de kennismaking: geen halve schermhoogte leegte */
.meet + .tm-stage { margin-top: -32vh; }
/* 1. Eén camerabeweging: Sanne komt op terwijl de hero naar beige verloopt */
.meet { opacity: calc(0.15 + var(--meet, 1) * 0.85); transform: translateY(calc((1 - var(--meet, 1)) * 32px)); }
.meet-photo { transform: scale(calc(0.9 + var(--meet, 1) * 0.1)); }

/* V5 Time Machine: de hoofdzin zoomt uit, de gemiste signalen verschijnen eromheen.
   Rustig: alleen schalen, vervagen en lijnen die groeien; geen 3D. */
.tm-stage { position: relative; margin: 0 calc(var(--gutter) * -1); }
.tm-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; --kx: 1; --ky: 1; }
/* Eén diepte-as met rustmomenten. Leesbaarheid: het leesmoment is altijd scherp, dekkend en groot;
   wat voorbij is zakt ver genoeg weg naar boven om nooit over de tekst te vallen. */
.tm-item { position: absolute; left: 50%; top: 50%; margin: 0; text-align: center; white-space: nowrap; transform-origin: center; will-change: transform, opacity, filter; }
.tm-item span { display: block; margin-bottom: 12px; font-size: 18px; font-weight: 600; color: var(--muted-foreground); }
.tm-item b { display: block; font-size: clamp(48px, 6vw, 88px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 700; color: var(--foreground); }
.tm-item.is-main b { font-size: clamp(56px, 8.4vw, 120px); }
.tm-item.is-reading { z-index: 5; }
.tm-item.is-signal { z-index: 4; }
.tm-item.is-signal span { margin-bottom: 6px; font-size: 14px; }
.tm-item.is-signal b { letter-spacing: -0.02em; font-weight: 600; color: var(--text-secondary); }
.tm-conclusion { white-space: normal; width: min(900px, 86vw); z-index: 6; }
.tm-conclusion b { font-size: clamp(40px, 5vw, 72px); line-height: 1.08; }
.tm-conclusion-sub { margin: 20px 0 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--text-secondary); }
.tm-thread { position: absolute; left: 50%; top: calc(50% + 150px); bottom: 124px; width: 2px; margin-left: -1px; transform-origin: top center; z-index: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.14), rgba(15, 23, 42, 0.22)); }
.tm-stage + .timeline .tl-item.is-turn .tl-seg.is-gap { background: linear-gradient(180deg, rgba(15, 23, 42, 0.22), var(--primary-strong)); }
/* Scrollhint en overslaan */
.tm-scroll { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted-foreground); text-decoration: none; }
.tm-scroll:hover { color: var(--foreground); }
.tm-scroll:not(.is-hinting) .tm-mouse i { animation-play-state: paused; }
.tm-mouse { width: 24px; height: 36px; border-radius: 12px; border: 2px solid var(--subtle); display: flex; justify-content: center; padding-top: 6px; }
.tm-mouse i { width: 4px; height: 8px; border-radius: 2px; background: var(--muted-foreground); animation: tmWheel 1.6s ease-in-out infinite; }
@keyframes tmWheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
/* Zonder animatie: gewone lijst */
.tm-sticky.is-static { position: relative; height: auto; overflow: visible; padding: 32px 0 8px; }
.tm-list { list-style: none; margin: 0 auto; padding: 0; width: min(640px, 90vw); display: flex; flex-direction: column; gap: 22px; text-align: center; }
.tm-list span { display: block; font-size: 15px; font-weight: 600; color: var(--muted-foreground); }
.tm-list b { font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.02em; }
.tm-list-end b { font-size: clamp(30px, 3.6vw, 44px); }
/* V4: één verticale lijn in het midden — grijs tot de uitval, blauw na de omslag, beeld onder elke stap */
.recognize-head { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.recognize-head .lead { max-width: 560px; }
.timeline .tl-item:first-child { padding-top: 0; }
.tl-signal.is-muted { color: var(--text-secondary); font-weight: 500; }
.tl-item.is-climax .tl-title { font-size: clamp(32px, 3.6vw, 44px); }
.tl-seg.is-gap { height: 120px; background: linear-gradient(180deg, var(--input), var(--primary-strong)); }
.tl-seg.is-blue { height: 72px; }
.tl-dot.is-blue { border-color: var(--primary-strong); background: var(--primary-strong); }
.tl-turn-title { margin: 0; max-width: 760px; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 700; }
.tl-turn-title span { color: var(--primary-dark); }
.tl-item.is-turn .tl-dimpr, .tl-item.is-end .tl-dimpr { width: 24px; height: 24px; box-shadow: 0 0 0 10px rgba(18, 119, 231, 0.12); }
.tl-how { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(18, 119, 231, 0.14); font-size: 15px; font-weight: 500; color: var(--info-text); }
.tl-how svg { flex: none; color: var(--primary-strong); }
/* Stappen: wie (klein) → uitkomst (korte kop) → één regel toelichting */
.tl-step-title { display: block; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; color: var(--foreground); }
.tl-step-sub { display: block; max-width: 520px; margin: 12px auto 0; font-size: 19px; line-height: 1.5; color: var(--text-secondary); }
/* Hoe-kaarten (zelfde stijl als de actiekaart) */
/* Stapkaart: twee delen, waar het vandaan komt en wat je doet. Eén kaart, een dunne lijn ertussen. */
.step-card { display: flex; flex-direction: column; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid rgba(0, 31, 106, 0.06); box-shadow: 0 20px 50px rgba(3, 61, 127, 0.2); text-align: left; }
.sc-label { display: block; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--muted-foreground); }
.sc-from { display: flex; flex-direction: column; gap: 10px; min-height: 108px; }
.sc-from-head { display: flex; align-items: center; gap: 8px; }
.sc-from-head .coach { width: 28px; height: 28px; }
.sc-mini { width: 28px; height: 28px; object-fit: contain; flex: none; }
.sc-text { margin: 0; font-size: 16px; line-height: 1.45; color: var(--text-secondary); }
.sc-quote { position: relative; min-height: 64px; }
.sc-bubble { display: inline-block; margin: 0; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--primary); color: #fff; font-size: 15px; line-height: 1.4; }
.sc-typing { position: absolute; left: 0; top: 0; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: var(--primary); }
.sc-typing i { width: 6px; height: 6px; border-radius: 999px; background: #fff; opacity: 0.5; animation: scDot 1s ease-in-out infinite; }
.sc-typing i:nth-child(2) { animation-delay: 0.15s; }
.sc-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes scDot { 0%, 100% { opacity: 0.35; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } }
.sc-in { opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
.sc-in.is-in { opacity: 1; transform: none; }
.sc-action { box-sizing: border-box; min-height: 82px; display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #edf0f4; }
.sc-action b { display: block; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; color: var(--foreground); }
.sc-icon { position: relative; flex: none; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }
.sc-icon img { width: 60px; height: 60px; object-fit: contain; }
/* Beloning: één keer een vinkje op het icoon */
.sc-done { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 999px; background: #22a06b; color: #fff; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; transform: scale(0); }
.sc-action.is-in .sc-done { animation: scDone 0.35s var(--ease-reward) 0.35s both; }
@keyframes scDone { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .sc-in { opacity: 1; transform: none; transition: none; } .sc-typing { display: none; } .sc-action.is-in .sc-done { animation: none; } .sc-done { transform: none; } }
.tl-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--primary-strong); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 0 0 6px rgba(18, 119, 231, 0.12); }
.tl-item.is-with .tl-signal { max-width: 560px; color: var(--foreground); }
.tl-visual { width: 100%; display: flex; justify-content: center; margin-top: 40px; opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out) 0.2s, transform var(--dur-slow) var(--ease-out) 0.2s; }
.tl-item.is-on .tl-visual { opacity: 1; transform: none; }
.tl-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }
/* Iedereen in actie: drie cirkels in elkaar, de actie van elke laag op de rand */
.in-action { position: relative; width: min(560px, 100%); aspect-ratio: 1; margin: 32px auto; }
/* De open laag kleurt blauw; de rest blijft zacht */
/* Verbeteren doe je niet alleen: cirkels links, de lagen als accordeon rechts */
.together-copy { display: flex; flex-direction: column; gap: 24px; }
.layers { border-top: 1px solid var(--border); margin-top: 8px; }
.layer { border-bottom: 1px solid var(--border); }
.layer-btn { width: 100%; display: flex; align-items: center; gap: 16px; padding: 20px 0; border: none; background: transparent; cursor: pointer; text-align: left; color: var(--foreground); }
.layer-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
.layer-who { flex: 1; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; transition: color 0.3s var(--ease-out); }
.layer.is-open .layer-who { color: var(--primary-strong); }
.layer.is-open .faq-sign { transform: none; }
.layer.is-open .faq-sign::after { transform: rotate(0deg); } /* open = min */
.layer-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 0 24px 48px; }
.layer-body p { margin: 0 0 10px; font-size: 17px; line-height: 1.6; color: var(--foreground); }
.layer-body .layer-pain { color: var(--text-secondary); }
.layer-body p b { color: var(--foreground); font-weight: 600; }
.together-cta { align-self: flex-start; margin-top: 8px; }
.end-photo figcaption { margin-top: 12px; font-size: 13px; color: var(--muted-foreground); text-align: center; }
.text-link { align-self: flex-start; font-size: 17px; font-weight: 600; color: var(--primary-strong); text-decoration: none; }
.text-link:hover { text-decoration: underline; }
@media (max-width: 560px) { .layer-body { padding-left: 0; } }
.sstep-note { font-size: 13px; color: var(--muted-foreground); }
/* Beeld: liggende foto met één productelement erover */
.visual { position: relative; margin: 0; width: 100%; max-width: 640px; aspect-ratio: 4 / 3; text-align: left; }
.visual-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 28px; box-shadow: 0 24px 60px rgba(3, 61, 127, 0.14); }
.visual-float { position: absolute; left: -72px; bottom: -40px; width: 340px; }
.visual-float .action-card, .visual-float .el-card { box-shadow: 0 20px 50px rgba(3, 61, 127, 0.2); animation: none; }
.visual-float .action-icon { width: 72px; height: 72px; }
.visual-float .action-card { gap: 14px; padding: 18px; }
.org-chart .app-chart { height: 90px; }
.org-chart .el-insight { align-self: flex-start; box-shadow: none; background: #fdf3e6; animation: none; }
.tl-item.is-with + .tl-item .tl-seg { margin-top: 28px; }
/* Statistieken (stijl Figma "De statistieken"), rustig: één team, kleine stippen, de verschuiving als lijn */
.stats-card { display: flex; flex-direction: column; border-radius: 16px; background: #fff; border: 1px solid rgba(0, 31, 106, 0.05); box-shadow: 0 20px 50px rgba(3, 61, 127, 0.2); overflow: hidden; text-align: left; }
.stats-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px 6px; color: #1e293b; }
.stats-head b { font-size: 17px; line-height: 1.2; letter-spacing: -0.15px; }
.info-icon { flex: none; color: var(--subtle); }
.stats-row { display: flex; flex-direction: column; gap: 12px; padding: 10px 20px 18px; }
.stats-title { display: flex; flex-direction: column; gap: 2px; }
.stats-title span { font-size: 15px; font-weight: 500; color: var(--foreground); }
.stats-title small { font-size: 13px; color: var(--primary-strong); }
.stats-scale { position: relative; height: 16px; }
.stats-track { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--border); }
.stats-shift { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(50, 136, 244, 0.3); }
.stats-dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 999px; }
.stats-dot.is-prev { background: #fff; border: 2px solid var(--subtle); }
.stats-dot.is-now { background: var(--primary); box-shadow: 0 0 0 4px rgba(50, 136, 244, 0.18); }
.stats-ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted-foreground); }
.stats-foot { padding: 12px 20px 14px; border-top: 1px solid #f1f5f9; font-size: 13px; color: var(--text-secondary); }
.stats-note { display: flex; align-items: center; gap: 6px; }
/* Bewijs: quotes direct onder de cijfers */
.tm-head { margin-top: 96px; }
.tm-title { margin: 0; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.02em; }
.numbers .tm-track { margin-bottom: 0; }
.numbers .tm { background: #fff; }
/* Starten: stappen in de linkerkolom */
.start-copy .steps { gap: 20px; }
.start-copy .steps-body h3 { font-size: 18px; }
.start-copy .steps-body p { font-size: 16px; }

/* Uitvraag: coach met vraag (Figma "Bubble / Item") en Sannes eigen antwoord */
.question-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 22px; background: linear-gradient(180deg, #e4f0fa 0%, #fde9d5 100%); box-shadow: 0 20px 50px rgba(3, 61, 127, 0.2); }
.q-row { display: flex; align-items: flex-start; gap: 10px; }
.coach { position: relative; flex: none; width: 40px; height: 40px; border-radius: 999px; background: #2d81ea; border: 1px solid rgba(0, 0, 0, 0.1); overflow: hidden; }
.coach img { position: absolute; top: 3%; left: calc(50% + 2px); height: 216%; width: auto; transform: translateX(-50%); }
.bubble { margin: 0; padding: 10px 14px; border-radius: 0 18px 18px 18px; background: #fff; border: 1px solid rgba(0, 31, 106, 0.06); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.11)); font-size: 16px; line-height: 1.45; font-weight: 500; }
.el-input { display: flex; align-items: flex-end; gap: 10px; min-height: 64px; padding: 12px 10px 10px 14px; border-radius: 18px; background: #fff; font-size: 15px; line-height: 1.45; color: var(--foreground); }
.el-input > span:first-child { flex: 1; }
.el-send { flex: none; width: 34px; height: 34px; border-radius: 999px; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--primary); animation: caret 0.9s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Bewijs: quotes direct onder de cijfers */
.tm-head { margin-top: 96px; }
.tm-title { margin: 0; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.02em; }
.numbers .tm-track { margin-bottom: 0; }
.numbers .tm { background: #fff; }
/* Starten: stappen in de linkerkolom */
.start-copy .steps { gap: 20px; }
.start-copy .steps-body h3 { font-size: 18px; }
.start-copy .steps-body p { font-size: 16px; }

/* Het past gewoon in je week — zorgrooster */
.week-card { border: 1px solid var(--border); border-radius: 24px; padding: clamp(16px, 2vw, 28px); overflow-x: auto; }
.rota { min-width: 380px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 8px; row-gap: 12px; }
.rota-day { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); text-align: center; }
.rota-col { position: relative; height: 360px; border-radius: 12px; background: rgba(15, 23, 42, 0.018); }
.shift { position: absolute; left: 0; right: 0; border-radius: 10px; }
.shift-name { position: absolute; left: 10px; top: 8px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
.rota-free { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: var(--subtle); }
.moment-bar { position: absolute; left: 8px; right: 8px; height: 5px; border-radius: 3px; background: var(--primary-strong); }
.moment-label { position: absolute; z-index: 2; left: 5px; right: 5px; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 10px; background: #fff; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--foreground); }
.moment-label b { font-size: 12px; font-weight: 700; color: var(--primary-strong); }
.moment-label { hyphens: auto; -webkit-hyphens: auto; }
.moment-bar, .moment-label { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.is-on > .moment-bar, .is-on > .moment-label { opacity: 1; transform: none; }
.week-copy { display: flex; flex-direction: column; gap: 20px; }
/* Het eind: Sanne weer met energie aan het werk, met de slotzin op de foto */
.end-photo { position: relative; width: min(880px, 100%); margin: 16px auto 0; }
.end-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 28px; box-shadow: 0 24px 60px rgba(3, 61, 127, 0.14); }
#week .split > .week-card { flex: 1.4 1 520px; }
#week .split > .week-copy { flex: 1 1 320px; }
.week-org { margin: 12px 0 0; padding-top: 20px; border-top: 1px solid var(--border); font-size: 18px; line-height: 1.5; color: var(--text-secondary); }

/* =========================================================
   05 Cijfers en 06 testimonials
   ========================================================= */
.numbers { background: var(--warm-subtle); }
.numbers-title { max-width: 820px; }
.numbers-grid { list-style: none; margin: 64px 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.number { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 2px solid var(--primary-strong); }
.number strong { font-size: clamp(56px, 6.4vw, 96px); line-height: 0.95; letter-spacing: -0.045em; font-weight: 700; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.number span { max-width: 240px; font-size: 18px; line-height: 1.45; color: var(--text-body); }
.source-note { margin: 0; font-size: 12px; color: var(--muted-foreground); }
.testimonials .container + .tm-track { margin-top: 48px; }
.tm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.tm-nav { display: flex; gap: 8px; }
.tm-btn { width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--input); background: #fff; font-size: 18px; color: var(--foreground); cursor: pointer; }
.tm-btn:hover { border-color: var(--foreground); }
.tm-track { list-style: none; margin: 48px 0 24px; padding: 4px max(var(--gutter), calc((100vw - var(--container)) / 2)); display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); scrollbar-width: none; }
.tm-track::-webkit-scrollbar { display: none; }
.tm { flex: 0 0 min(440px, 84vw); scroll-snap-align: start; display: flex; flex-direction: column; gap: 24px; padding: 32px; border-radius: 28px; background: var(--info-subtle); }
.tm-photo { width: 72px; height: 72px; border-radius: 999px; border: 1.5px dashed var(--placeholder); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--info-text); }
.tm blockquote { margin: 0; flex: 1; font-size: 22px; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
.tm-who b { display: block; font-size: 16px; }
.tm-who small { font-size: 14px; color: var(--text-secondary); }

/* =========================================================
   07 Zo beginnen we en 08 vragen — twee losse secties
   ========================================================= */
.begin { background: #fff; }
.begin-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px 96px; }
.begin-head { flex: 1 1 360px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.begin-grid .steps { flex: 1 1 440px; min-width: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 32px; }
.steps-item { display: flex; gap: 16px; }
.steps-num { flex: none; width: 32px; height: 32px; margin-top: 1px; border-radius: 999px; background: var(--tint-blue); color: var(--info-text); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.steps-body { display: flex; flex-direction: column; gap: 4px; }
.steps-body h3 { margin: 0; font-size: 21px; line-height: 1.4; font-weight: 700; }
.steps-body h3 span { font-weight: 500; color: var(--muted-foreground); }
.steps-body p { margin: 0; max-width: 460px; font-size: 17px; line-height: 1.55; color: var(--text-secondary); }
.faq { background: var(--info-subtle); }
.faq-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px 96px; }
.faq-grid > .h2 { flex: 1 1 360px; }
.begin-faq { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.faq-list { align-self: stretch; border-top: 1px solid var(--border); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
  .visual-float { left: -8px; bottom: -20px; width: min(290px, 80%); }
  .visual { max-width: 440px; }
  .tl-visual { margin-top: 20px; }
  .numbers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cloud-cover { --k: 0.55; }
  .sun { width: 560px; height: 520px; margin: -260px 0 0 -280px; }
  .nav-links a:not(.btn) { display: none; }
  .section, .start { padding-top: 96px; padding-bottom: 96px; }
  .story { padding: 96px var(--gutter) 112px; }
  .hero { padding-top: 64px; }
  .hero-visual { height: 420px; }
  .hero-visual .ph, .hero-photo { inset: 0 0 64px 0; }
  .hero-photo { width: 100%; height: calc(100% - 64px); }
}
@media (max-width: 560px) {
  /* Mobiel: de kaart onder de foto, met een kleine overlap, zodat hij de tekst erboven niet raakt */
  .visual { aspect-ratio: auto; }
  .visual-photo { position: relative; display: block; height: auto; aspect-ratio: 4 / 3; }
  .visual-float { position: relative; left: auto; bottom: auto; width: auto; margin: -56px 12px 0; }
  :root { --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .tl-how { font-size: 13px; padding: 5px 10px; }
  .tm-item { white-space: normal; width: 320px; }
  .tm-item b { font-size: 38px; }
  .tm-item.is-main b { font-size: 48px; }
  .tm-item.is-signal { width: 170px; }
  .tm-conclusion b { font-size: 32px; }
  .tm-scroll { bottom: 28px; }
  .tm-thread { bottom: 108px; }
  .split > *, #week .split > .week-card, #week .split > .week-copy { flex-basis: 100%; }
  .week-card { padding: 14px 12px; }
  .rota { min-width: 0; column-gap: 6px; }
  .shift-name { left: 6px; font-size: 11px; }
  .moment-label { left: 3px; right: 3px; padding: 5px 6px; font-size: 11px; }
  .moment-label b { font-size: 11px; }
  .tl-signal { font-size: 22px; }
  .form { padding: 24px; }
  .numbers-grid { grid-template-columns: 1fr; gap: 32px; }
  .tm { padding: 24px; }
  .tm blockquote { font-size: 19px; }
}



/* Header en hero: verloop van het Teambooster-startscherm; header ligt transparant op de hero
   en wordt bij het scrollen een zwevende glazen pil (zoals intotheblue.app) */
.nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding: 0 var(--gutter); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none;
  transition: padding 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.nav { pointer-events: auto; max-width: var(--container); height: 76px; padding: 0 4px; border-radius: 100px; border: 1px solid transparent; background: rgba(255, 255, 255, 0); box-shadow: none;
  transition: max-width 0.8s cubic-bezier(0.16, 1, 0.3, 1), height 0.8s cubic-bezier(0.16, 1, 0.3, 1), padding 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, backdrop-filter 0.5s ease; }
.nav-wrap.is-floating { padding-top: 12px; }
.nav-wrap.is-floating .nav { max-width: 1120px; height: 64px; padding: 0 12px 0 24px; background: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 12px 32px -8px rgba(3, 61, 127, 0.18); }
.hero { padding-top: 180px; background:
  radial-gradient(55% 65% at 88% 88%, rgba(236, 128, 27, 0.38), transparent 70%),
  radial-gradient(45% 55% at 68% 18%, rgba(50, 136, 244, 0.34), transparent 70%),
  radial-gradient(40% 50% at 4% 96%, rgba(253, 186, 116, 0.4), transparent 70%),
  radial-gradient(35% 40% at 30% 8%, rgba(167, 199, 255, 0.55), transparent 70%),
  linear-gradient(160deg, #e8f1ff 0%, #d6e7ff 48%, #ffe7d1 100%); }
.hero-float { position: absolute; left: 0; bottom: 40px; width: 260px; z-index: 2; animation: fxPop var(--dur-slow) var(--ease-reward) 0.5s both; }
.hero-float .action-card { gap: 12px; padding: 16px; box-shadow: 0 20px 50px rgba(3, 61, 127, 0.2); animation: none; }
.hero-float .action-icon { width: 60px; height: 60px; }
.hero-float .action-body b { font-size: 18px; }
.hero-float .action-body span { font-size: 15px; }
.hero { padding-bottom: 104px; }
.trust-band { background: #faf8f4; padding: 32px var(--gutter); border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
.trust-band .trust { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 860px) {
  .hero { padding-top: 120px; }
  .hero-float { left: 12px; bottom: 20px; width: 230px; }
  .nav { height: 64px; }
  .nav-wrap.is-floating { padding-top: 10px; }
  .nav-wrap.is-floating .nav { height: 56px; padding: 0 8px 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* De lucht loopt door: het blok na het verhaal begint in hetzelfde lichtblauw en verloopt naar wit */
.together { background: linear-gradient(180deg, #f5faff 0%, #ffffff 70%); padding-top: 24px; }
.story:has(+ .together) { padding-bottom: 72px; } /* foto en cirkels horen bij elkaar: geen leeg gat */
.together .split { align-items: center; }

/* Het past in je week: rooster en tekst op één hoogte, rustiger kaart */
#week .split { align-items: center; }
#week .rota-col { height: 264px; }
#week .split > .week-card { flex: 1.15 1 480px; }
#week .split > .week-copy { flex: 1 1 380px; }
/* Eén kleur voor alle diensten; blauw is alleen voor de Dimpr-momenten */
#week .shift { background: #eef2f7 !important; }
/* De momenten met hetzelfde icoon als in de stappen */
#week .moment-label { gap: 4px; padding: 8px; hyphens: manual; -webkit-hyphens: manual; }
.moment-top { display: flex; align-items: center; gap: 6px; }
.moment-icon { flex: none; width: 22px; height: 22px; object-fit: contain; }
.moment-icon.is-coach { border-radius: 999px; background: #2d81ea; object-fit: cover; object-position: 50% 0; }
@media (max-width: 560px) {
  .moment-icon { display: none; }
  /* Smalle kolommen: het label mag over de lege kolom ernaast vallen, zonder woorden af te breken */
  #week .moment-label { right: auto; width: max-content; max-width: 120px; padding: 6px 8px; font-size: 12px; white-space: nowrap; }
}

/* Namen op de ringen: rustig, de actieve laag in blauw */
/* Icoon per laag: de eigen ring gemarkeerd */
.layer-icon { flex: none; }
.layer-icon circle { fill: none; stroke: #e2e8f0; stroke-width: 1.5; transition: stroke 0.3s var(--ease-out), fill 0.3s var(--ease-out); }
.layer-icon circle.is-core { fill: #e2e8f0; stroke: none; }
.layer-icon circle.is-mine { stroke: #94a3b8; stroke-width: 2.5; }
.layer-icon circle.is-core.is-mine { fill: #94a3b8; }
.layer.is-open .layer-icon circle.is-mine { stroke: var(--primary-strong); }
.layer.is-open .layer-icon circle.is-core.is-mine { fill: var(--primary-strong); }
/* Voorbeeld bij Sanne: dezelfde actie als in het verhaal */
.layer-example { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 14px; background: #fff; border: 1px solid #edf0f4; font-size: 15px; font-weight: 600; color: var(--foreground); }
.layer-example img { width: 40px; height: 40px; object-fit: contain; }
@media (max-width: 560px) { .layer-body { padding-left: 0; } }
.sc-label.is-blue { color: var(--primary-strong); }

/* Lagen als ringen: de actieve laag kleurt alleen de eigen band, niet alles wat erbinnen ligt */
.together .split { align-items: flex-start; }
.together .in-action { position: sticky; top: 120px; width: min(500px, 100%); margin: 0 auto; }
@media (max-width: 860px) { .together .in-action { position: relative; top: auto; } }

/* Cirkel met mensen: Sanne in het midden, het team en de organisatie op de banen eromheen */
.orbit { position: absolute; left: 50%; top: 50%; border-radius: 999px; border: 1.5px solid rgba(18, 119, 231, 0.16); transform: translate(-50%, -50%) scale(0.9); opacity: 0;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), border-color 0.4s var(--ease-out); }
.orbit.is-2 { width: 64%; height: 64%; transition-delay: 0.3s, 0.3s, 0s; }
.orbit.is-3 { width: 100%; height: 100%; background: radial-gradient(closest-side, rgba(50, 136, 244, 0.08), rgba(50, 136, 244, 0.02) 70%, transparent); transition-delay: 0.6s, 0.6s, 0s; }
.in-action.is-live .orbit { opacity: 1; transform: translate(-50%, -50%); }
.orbit.is-active { border-color: var(--primary-strong); border-width: 2px; }
.node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translate(-50%, -50%) scale(0.8); opacity: 0; cursor: pointer;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-reward); transition-delay: calc(0.3s + var(--i) * 0.3s); }
.in-action.is-live .node { opacity: 1; transform: translate(-50%, -50%); }
.node img { width: 84px; height: 84px; border-radius: 999px; object-fit: cover; border: 4px solid #fff; box-shadow: 0 10px 28px rgba(3, 61, 127, 0.16); transition: border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
.node small { padding: 4px 12px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; color: var(--muted-foreground); box-shadow: 0 4px 12px rgba(3, 61, 127, 0.08); transition: color 0.4s var(--ease-out); }
.node.is-active img { border-color: var(--primary-strong); box-shadow: 0 0 0 6px rgba(18, 119, 231, 0.14), 0 12px 32px rgba(3, 61, 127, 0.2); }
.node.is-active small { color: var(--primary-strong); }
.node.is-1 { left: 50%; top: 50%; }
.node.is-1 img { width: 128px; height: 128px; object-position: 50% 20%; }
.node.is-2 { left: 72.6%; top: 27.4%; }  /* middelste baan, rechtsboven */
.node.is-2 img { object-position: 30% 50%; }
.node.is-3 { left: 14.6%; top: 85.4%; }  /* buitenste baan, linksonder */
.node.is-3 img { object-position: 45% 30%; }
/* Tekst per laag: één kopregel en één zin */
.layer-body { gap: 14px !important; }
.layer-body p { margin: 0 !important; }
.layer-btn.is-static { cursor: default; padding: 18px 0 12px; }
@media (max-width: 560px) {
  .together .in-action { width: min(320px, 100%); }
  .node img { width: 60px; height: 60px; border-width: 3px; }
  .node.is-1 img { width: 92px; height: 92px; }
  .node small { font-size: 12px; padding: 3px 10px; }
  .layer-body { padding: 0 0 20px 48px !important; }
}
@media (prefers-reduced-motion: reduce) { .orbit, .node { transition: none; opacity: 1; transform: translate(-50%, -50%); } }

/* Mobiel: cirkel als navigatie, één kaart tegelijk */
.layers-mobile { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 8px; }
.layers-mobile .in-action { width: min(280px, 100%); margin: 8px auto 4px; }
.layers-mobile .node.is-3 { left: 18%; top: 82%; }
.layers-mobile .node.is-2 { left: 70%; top: 30%; }
.layer-card { align-self: stretch; padding: 4px 18px 18px; border-radius: 18px; background: #fff; border: 1px solid #edf0f4; box-shadow: 0 12px 32px rgba(3, 61, 127, 0.08); touch-action: pan-y; }
.layer-card .layer-who { color: var(--primary-strong); }
.layer-card .layer-icon circle.is-mine { stroke: var(--primary-strong); }
.layer-card .layer-icon circle.is-core.is-mine { fill: var(--primary-strong); }
.layer-card .layer-body { padding: 0 !important; }
.layer-dots { display: flex; gap: 6px; }
.layer-dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: #cbd5e1; cursor: pointer; transition: width 0.3s var(--ease-out), background 0.3s var(--ease-out); }
.layer-dots button.is-on { width: 22px; background: var(--primary-strong); }

/* Mobiel: kaartenrij met scroll-snap; de volgende kaart piept ~24px in beeld */
.layer-track { align-self: stretch; display: flex; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.layer-track::-webkit-scrollbar { display: none; }
.layer-track .layer-card { flex: 0 0 calc(100% - 40px); scroll-snap-align: start; }
.layer-card:not(.is-on) .layer-who { color: var(--foreground); }
.layer-card:not(.is-on) .layer-icon circle.is-mine { stroke: #94a3b8; }
.layer-card:not(.is-on) .layer-icon circle.is-core.is-mine { fill: #94a3b8; }

/* Afsluiter: banner in de Teambooster-gradient, de oprichters springen er bovenuit */
.start { background: #fff !important; padding-top: 160px; }
.start .container { display: block !important; }
.start-banner { position: relative; display: flex; align-items: stretch; min-height: 520px; border-radius: 36px; padding: 56px; overflow: visible;
  background:
    radial-gradient(60% 70% at 88% 100%, rgba(253, 186, 116, 0.5), transparent 70%),
    radial-gradient(50% 60% at 72% 15%, rgba(50, 136, 244, 0.32), transparent 70%),
    radial-gradient(45% 55% at 8% 8%, rgba(167, 199, 255, 0.6), transparent 70%),
    linear-gradient(160deg, #e8f1ff 0%, #dbe9ff 50%, #ffe9d6 100%); }
.start-banner .start-copy { flex: 0 1 520px; position: relative; z-index: 2; }
.start-banner .form { max-width: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(12px); }
.start-banner .form .btn, .start-banner .form .form-note, .start-banner .form .form-thanks { grid-column: 1 / -1; }
.start-founders { position: absolute; right: 32px; bottom: 0; width: min(46%, 560px); margin: 0; display: flex; flex-direction: column; align-items: center; }
.start-founders img { display: block; width: 100%; height: auto; margin-top: -120px; filter: drop-shadow(0 24px 40px rgba(3, 61, 127, 0.18)); } /* koppen boven de banner uit */
.start-founders-ph { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 100%; height: 520px; margin-top: -120px; border: 1.5px dashed var(--placeholder); border-radius: 28px 28px 0 0; color: var(--info-text); font-weight: 600; text-align: center; padding: 24px; }
.start-founders-ph small { font-weight: 400; font-size: 13px; }
.start-founders figcaption { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; padding: 10px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); white-space: nowrap; box-shadow: 0 10px 28px rgba(3, 61, 127, 0.12); }
.start-founders figcaption b { font-size: 15px; }
.start-founders figcaption small { font-size: 13px; color: var(--muted-foreground); }
.start-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.start-steps li { display: flex; gap: 12px; }
.start-steps b { display: block; font-size: 17px; }
.start-steps b span { font-weight: 500; color: var(--muted-foreground); }
.start-steps small { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
@media (max-width: 960px) {
  .start-banner { flex-direction: column; padding: 32px 24px 0; }
  .start-founders { position: relative; right: auto; width: 100%; max-width: 420px; margin: 24px auto 0; }
  .start-founders img, .start-founders-ph { margin-top: 0; }
  .start-founders-ph { height: 320px; }
  .start-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .start { padding-top: 96px; }
  .start-banner .form { grid-template-columns: 1fr; padding: 16px; }
  .start-founders figcaption { white-space: normal; text-align: center; width: max-content; max-width: 90%; }
}
.start-banner .form { align-items: start; align-content: start; flex: none; box-shadow: none; }
.start-banner .form label { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.start-banner .form .btn { min-height: 52px; height: 52px; margin-top: 6px; }
.start-banner .form .form-note { margin: 0; text-align: left; }
/* De foto is hoger dan de banner: de koppen steken er bovenuit */
.start-founders { top: -80px; bottom: 0; right: 40px; width: auto; max-width: 52%; justify-content: flex-end; }
.start-founders img { height: 100%; width: auto; max-width: 100%; margin-top: 0; object-fit: contain; object-position: bottom; }
.start-founders-ph { height: 100%; width: 460px; max-width: 100%; margin-top: 0; }
@media (max-width: 960px) { .start-founders { top: auto; right: auto; max-width: 100%; height: 360px; margin-top: 0; } .start-founders-ph { width: 100%; } }

/* Banner zonder formulier: lager, zodat Ferdi en Jesse er bovenuit steken */
.start-banner { min-height: 0; padding: 72px 56px; }
.start-banner .start-copy { flex: 0 1 500px; }
.start-banner-cta { align-self: flex-start; }
.start-founders { top: -96px; right: 48px; max-width: 54%; }
/* Onder de banner: de stappen naast het formulier */
.start-below { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 80px; margin-top: 64px; }
.start-below .start-steps { flex: 1 1 380px; margin: 0; grid-template-columns: 1fr; gap: 28px; }
.start-below .form { flex: 1 1 440px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; padding: 28px; scroll-margin-top: 120px; }
.start-below .form .btn, .start-below .form .form-note, .start-below .form .form-thanks { grid-column: 1 / -1; }
.start-below .form .form-note { text-align: left; }
@media (max-width: 960px) {
  .start-banner { padding: 40px 24px 0; }
  .start-founders { top: auto; right: auto; max-width: 100%; }
}
@media (max-width: 560px) { .start-below .form { grid-template-columns: 1fr; padding: 20px; } }
/* Tekst en foto mogen elkaar niet raken */
.start-banner .start-copy { flex: 0 1 460px; }
.start-banner .start-copy h2 { font-size: clamp(34px, 3.8vw, 52px); }
.start-founders { right: 24px; max-width: 50%; }

/* Iteratie 1: drempel weg, koppen boven stappen en formulier */
.start-facts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; color: var(--text-secondary); }
.start-facts li { display: flex; align-items: center; gap: 8px; }
.start-facts li::before { content: ""; width: 16px; height: 16px; border-radius: 999px; background: var(--primary-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.start-steps-wrap { flex: 1 1 380px; display: flex; flex-direction: column; gap: 24px; }
.start-steps-wrap .start-steps { flex: none; }
.start-sub { margin: 0; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; }
.start-below .form .form-title { grid-column: 1 / -1; margin-bottom: 4px; }

/* Iteratie 2: banner lager zodat ze er weer bovenuit steken, label opzij, rustiger formulier */
.start-banner { padding: 64px 56px; }
.start-founders figcaption { left: 0; bottom: 28px; transform: none; align-items: flex-start; padding: 8px 14px; border-radius: 12px; }
.start-founders figcaption b { font-size: 14px; }
.start-founders figcaption small { font-size: 12px; }
.start-steps-wrap { padding-top: 28px; }
.start-below .form { box-shadow: 0 12px 32px rgba(3, 61, 127, 0.08); border: 1px solid #edf0f4; }
@media (max-width: 960px) { .start-founders figcaption { left: 50%; transform: translateX(-50%); } .start-steps-wrap { padding-top: 0; } }
/* Mobiel en tablet (na de desktopregels, zodat deze winnen) */
@media (max-width: 960px) {
  .start-banner { padding: 40px 24px 0; }
  .start-founders { position: relative; top: auto; right: auto; bottom: auto; width: 100%; max-width: 420px; height: auto; margin: 32px auto 0; }
  .start-founders img { width: 100%; height: auto; }
  .start-founders figcaption { left: 50%; bottom: 16px; transform: translateX(-50%); align-items: center; }
}
@media (max-width: 560px) {
  .start-banner { padding: 32px 20px 0; border-radius: 28px; }
  .start-banner .start-copy h2 { font-size: 34px; }
}
/* Zo starten jullie: meer ruimte en dezelfde vormtaal als de tijdlijn (genummerde stip, lijn ertussen) */
.start-steps-wrap { gap: 32px; }
.start-sub { font-size: clamp(24px, 2.2vw, 30px); }
.start-below .start-steps { gap: 0; }
.start-steps li { position: relative; gap: 20px; padding-bottom: 36px; }
.start-steps li:last-child { padding-bottom: 0; }
.start-steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 44px; bottom: 8px; width: 2px; border-radius: 2px; background: rgba(18, 119, 231, 0.18); }
.start-steps .steps-num { width: 36px; height: 36px; margin-top: -4px; border: none; background: var(--primary-strong); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 0 0 6px rgba(18, 119, 231, 0.12); }
.start-steps b { font-size: 20px; line-height: 1.3; }
.start-steps small { margin-top: 6px; font-size: 17px; line-height: 1.55; max-width: 420px; }
/* Rustig: per stap alleen een titel en een regel tekst; zachte nummers */
.start-steps li { gap: 16px; padding-bottom: 28px; }
.start-steps li:not(:last-child)::after { left: 15px; top: 40px; width: 1.5px; background: var(--border); }
.start-steps .steps-num { width: 32px; height: 32px; margin-top: -3px; background: var(--tint-blue, #eaf2fd); color: var(--primary-strong); font-size: 14px; font-weight: 600; box-shadow: none; }
.start-steps b { font-size: 18px; font-weight: 600; }
.start-steps small { margin-top: 4px; font-size: 16px; }
.start-sub { font-size: 24px; }
/* Stappen groter opgezet, nog steeds twee tekststijlen: titel en uitleg */
.start-sub { font-size: clamp(26px, 2.4vw, 32px); letter-spacing: -0.02em; }
.start-steps-wrap { gap: 40px; }
.start-steps li { gap: 20px; padding-bottom: 44px; }
.start-steps li:not(:last-child)::after { left: 21px; top: 54px; bottom: 10px; width: 2px; }
.start-steps .steps-num { width: 44px; height: 44px; margin-top: -6px; font-size: 18px; }
.start-steps b { font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; }
.start-steps small { margin-top: 6px; font-size: 18px; line-height: 1.55; }
@media (max-width: 560px) {
  .start-steps li { padding-bottom: 32px; }
  .start-steps b { font-size: 20px; }
  .start-steps small { font-size: 17px; }
}
/* Rustiger afsluiter: één focus per deel */
.start-banner { padding: 80px 56px; }
.start-banner .start-copy { justify-content: center; }
.start-below { margin-top: 72px; align-items: flex-start; }
.start-sub { font-size: 22px; }
.start-steps-wrap { gap: 28px; padding-top: 0; }
.start-steps li { padding-bottom: 32px; }
.start-steps .steps-num { width: 36px; height: 36px; margin-top: -4px; font-size: 15px; }
.start-steps li:not(:last-child)::after { left: 17px; top: 44px; }
.start-steps b { font-size: 19px; }
.start-steps small { font-size: 17px; }
.start-below .form { box-shadow: none; border: 1px solid var(--border); background: #fff; }
@media (max-width: 960px) { .start-banner { padding: 40px 24px 0; } }
@media (max-width: 560px) { .start-banner { padding: 32px 20px 0; } }
/* Reviews: korte kop uit de quote, rustige quote, initialen in plaats van een lege fotoplek */
.tm { gap: 28px; padding: 32px; border-radius: 24px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); }
.tm-quote { margin: 0; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.tm-head-line { font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; color: var(--foreground); }
.tm blockquote { margin: 0; flex: none; font-size: 17px; line-height: 1.6; font-weight: 400; letter-spacing: 0; color: var(--text-secondary); }
.tm-who { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid #edf0f4; }
.tm-avatar { flex: none; width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue, #eaf2fd); color: var(--primary-strong); font-size: 15px; font-weight: 700; }
.tm-who b { font-size: 15px; }
.tm-who small { display: block; font-size: 14px; }

/* Bewijs: uitgelichte case + cijfers, daaronder drie quotes */
.case { margin: 0; display: flex; flex-direction: column; gap: 16px; padding: 40px; border-radius: 28px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05); }
.case-metric { margin: 8px 0 0; display: flex; align-items: baseline; gap: 16px; font-size: clamp(56px, 6vw, 88px); line-height: 1; letter-spacing: -0.04em; font-weight: 700; }
.case-metric span { color: #94a3b8; font-size: 0.6em; }
.case-metric strong { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.case-unit { margin: -8px 0 0; font-size: 18px; font-weight: 600; color: var(--foreground); }
.case blockquote { margin: 8px 0 0; flex: 1; font-size: 18px; line-height: 1.6; color: var(--text-secondary); }
.quotes { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Quote bij het formulier */
.start-quote { margin: 8px 0 0; padding: 20px 24px; border-left: 3px solid var(--primary-strong); background: var(--info-subtle, #f5f9ff); border-radius: 0 16px 16px 0; }
.start-quote blockquote { margin: 0 0 8px; font-size: 18px; line-height: 1.5; font-weight: 600; color: var(--foreground); }
.start-quote figcaption { font-size: 14px; color: var(--text-secondary); }
@media (max-width: 960px) {
  .case { padding: 28px; }
}
@media (max-width: 760px) {
  .quotes { display: flex; gap: 12px; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .quotes::-webkit-scrollbar { display: none; }
}
@media (max-width: 560px) { .proof-numbers li { padding: 18px; } }

/* Plek voor een quote uit de zorg (nog aan te leveren) */

/* Menubalk met de bestaande pagina's; inloggen als rustige link naast de knop */
.nav-links { gap: 24px; }
.nav-login { padding-left: 20px; border-left: 1px solid var(--border); }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer nav a { color: var(--text-secondary); text-decoration: none; }
.footer nav a:hover { color: var(--foreground); }
@media (max-width: 1100px) { .nav-links a:not(.btn) { display: none; } }

/* Bewijs, rustig: cijferstrook, één kaart, quotes zonder vakken. Blauw alleen voor cijfers. */
.stat-strip { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-strip li { display: flex; flex-direction: column; gap: 10px; padding: 0 28px; border-left: 1px solid rgba(15, 23, 42, 0.1); }
.stat-strip li:first-child { padding-left: 0; border-left: 0; }
.stat-strip strong { font-size: clamp(40px, 4vw, 56px); line-height: 1; letter-spacing: -0.03em; font-weight: 700; color: var(--primary-strong); }
.stat-strip span { font-size: 16px; line-height: 1.5; color: var(--text-secondary); max-width: 220px; }
.case { margin: 64px 0 0; display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: center; padding: 48px; border-radius: 28px; background: #fff; border: 0; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.05); }
.case blockquote { margin: 0; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.5; letter-spacing: -0.01em; color: var(--foreground); }
.case figcaption { margin-top: 20px; font-size: 15px; color: var(--text-secondary); }
.case-result { padding-left: 48px; border-left: 1px solid rgba(15, 23, 42, 0.08); }
.case-metric { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: clamp(48px, 5vw, 72px); line-height: 1; letter-spacing: -0.04em; font-weight: 700; color: var(--primary-strong); }
.case-metric span { font-size: 0.5em; color: var(--muted-foreground); letter-spacing: -0.02em; }
.case-metric strong { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--primary-strong); }
.case-unit { margin: 10px 0 0; font-size: 16px; font-weight: 400; color: var(--text-secondary); }
.quotes { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.quote { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(15, 23, 42, 0.12); }
.quote blockquote { margin: 0; flex: 1; font-size: 17px; line-height: 1.6; color: var(--text-secondary); }
.quote blockquote b { display: block; margin-bottom: 6px; font-weight: 600; color: var(--foreground); }
.quote-who { font-size: 15px; color: var(--muted-foreground); }
.proof-foot { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.proof-foot .source-note { margin: 0; max-width: 520px; }
@media (max-width: 960px) {
  .stat-strip { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .stat-strip li:nth-child(3) { padding-left: 0; border-left: 0; }
  .case { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
  .case-result { padding: 24px 0 0; border-left: 0; border-top: 1px solid rgba(15, 23, 42, 0.08); order: -1; padding: 0 0 24px; border-top: 0; border-bottom: 1px solid rgba(15, 23, 42, 0.08); }
  .quotes { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .stat-strip li { padding: 0 16px; }
  .case { padding: 24px; }
}
.case-metric i { font-style: normal; font-size: 0.4em; font-weight: 400; color: var(--muted-foreground); }
/* Iteratie 1: rustige afbrekingen, één ritme van 64px, scheidingslijn over de volle hoogte */
.numbers-title { max-width: none; text-wrap: balance; }
.stat-strip { margin-top: 64px; }
.stat-strip span, .quote blockquote, .case blockquote { text-wrap: pretty; hyphens: manual; -webkit-hyphens: manual; }
.case { margin-top: 64px; align-items: stretch; padding: 56px; }
.case-text { display: flex; flex-direction: column; justify-content: center; }
.case-result { display: flex; flex-direction: column; justify-content: center; }
.quotes { margin-top: 64px; }
.proof-foot { margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(15, 23, 42, 0.08); }
@media (max-width: 560px) { .case { padding: 24px; } }
/* Iteratie 2: alleen zorgklanten. Placeholders in dezelfde opmaak, rustig grijs, zodat de plek klopt zodra de content er is. */
.quotes { grid-template-columns: repeat(2, 1fr); gap: 64px; }
.case.is-placeholder { box-shadow: none; border: 1px solid rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.7); }
.quote-sector { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); }
@media (max-width: 960px) { .quotes { grid-template-columns: 1fr; gap: 32px; } }
/* Rustig en beeldend: vijf tekststijlen (kop, cijfer, tekst, grote quote, klein), één foto, weinig lijnen */
.stat-strip li { border-left-color: rgba(15, 23, 42, 0.08); }
.case { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; padding: 0; overflow: hidden; border: 0; background: #fff; box-shadow: none; }
.case.is-placeholder { border: 0; background: #fff; }
.case-photo { position: relative; min-height: 360px; }
.case-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-chip { position: absolute; left: 20px; bottom: 20px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); font-size: 14px; font-weight: 600; color: var(--foreground); }
.case-text { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 48px; }
.case blockquote { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.5; color: var(--foreground); }
.case figcaption { margin: 0; font-size: 14px; color: var(--muted-foreground); }
.quote { padding-top: 0; border-top: 0; gap: 20px; }
.quote blockquote { font-size: 17px; line-height: 1.6; color: var(--foreground); }
.quote-who { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted-foreground); }
.quote-avatar { flex: none; width: 40px; height: 40px; border-radius: 999px; background: #e9eef5; }
.proof-foot { border-top: 0; padding-top: 0; }
@media (max-width: 960px) {
  .case { grid-template-columns: 1fr; }
  .case-photo { min-height: 240px; }
  .case-text { padding: 28px; }
}
/* Foto in de case volgt de ronding van de kaart */
.case { border-radius: 28px; isolation: isolate; }
.case-photo { border-radius: 28px 0 0 28px; overflow: hidden; }
@media (max-width: 960px) { .case-photo { border-radius: 28px 28px 0 0; } }
/* Bewijs en FAQ als één doorlopende warme band (hetzelfde beige als het begin van het verhaal),
   zacht in vanuit wit en zacht terug naar wit: geen harde randen meer */
.numbers { background: linear-gradient(180deg, #ffffff 0, #faf8f4 280px, #faf8f4 100%) !important; }
.faq { background: linear-gradient(180deg, #faf8f4 0, #faf8f4 55%, #ffffff 100%) !important; }
/* Bewijs en FAQ lezen als één band: minder ruimte ertussen */
.numbers { padding-bottom: 72px; }
.faq { padding-top: 72px; }
@media (max-width: 560px) { .numbers { padding-bottom: 48px; } .faq { padding-top: 48px; } }
/* Placeholders in gewone tekstkleur: de [ ] laat zien dat het nog moet komen, niet een vale grijze kleur */
.case.is-placeholder blockquote, .quote.is-placeholder blockquote { color: var(--foreground); }
.case.is-placeholder figcaption, .quote.is-placeholder .quote-who { color: var(--text-secondary); }
.case.is-placeholder .case-chip { color: var(--foreground); }
/* De vervaagde chip breekt soms het afsnijden van de hoeken; de foto zelf ook afronden */
.case-photo img { border-radius: inherit; }
/* Reviews: kaarten naast elkaar in een scrollbare rij, uitgelijnd op de container en doorlopend tot de rand */
.reviews { list-style: none; margin: 64px 0 0; padding: 4px max(var(--gutter), calc((100vw - var(--container)) / 2)) 16px; display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); scrollbar-width: none; }
.reviews::-webkit-scrollbar { display: none; }
.reviews:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
.review { flex: 0 0 min(440px, 84vw); scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 32px; border-radius: 24px; background: #fff; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05); }
.review blockquote { margin: 0; font-size: 19px; line-height: 1.55; letter-spacing: -0.005em; color: var(--foreground); }
.review-who { display: flex; align-items: center; gap: 14px; }
.review-avatar { flex: none; width: 52px; height: 52px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue, #eaf2fd); color: var(--primary-strong); }
.review-who b { display: block; font-size: 16px; font-weight: 600; color: var(--foreground); }
.review-who small { display: block; margin-top: 2px; font-size: 15px; color: var(--text-secondary); }
.proof-foot { margin-top: 40px; align-items: center; }
.proof-foot .source-note { flex-basis: 100%; max-width: none; }
.proof-foot .tm-nav { display: flex; gap: 8px; }
@media (max-width: 560px) { .review { padding: 24px; } .review blockquote { font-size: 17px; } .proof-foot .tm-nav { display: none; } }
/* De sectie heeft al zijmarge: de rij loopt tot de schermrand en lijnt zo precies uit met de container */
.reviews { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
/* Bron van de cijfers achter een info-icoon */
.stat-source { position: relative; display: flex; justify-content: flex-end; margin-top: 20px; }
.info-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; }
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--foreground); background: rgba(15, 23, 42, 0.05); }
.info-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.info-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; width: min(360px, 90vw); margin: 0; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14); font-size: 14px; line-height: 1.5; color: var(--foreground);
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
.info-pop.is-open, .info-btn:hover + .info-pop { opacity: 1; transform: none; pointer-events: auto; }
/* Mobiel menu: hoofdknop blijft zichtbaar, menu als rustig volledig scherm met grote tikvlakken */
.menu-btn { display: none; position: relative; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(15, 23, 42, 0.06); cursor: pointer; z-index: 31; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { position: absolute; left: 50%; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: var(--foreground); transition: transform 0.25s var(--ease-out), opacity 0.2s; content: ""; }
.menu-btn span { top: 50%; margin-top: -1px; }
.menu-btn span::before { top: -6px; left: 0; margin-left: 0; }
.menu-btn span::after { top: 6px; left: 0; margin-left: 0; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.menu-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.menu-sheet { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; padding: 96px var(--gutter) calc(24px + env(safe-area-inset-bottom)); overflow-y: auto;
  background: radial-gradient(60% 40% at 90% 0%, rgba(50, 136, 244, 0.18), transparent 70%), linear-gradient(180deg, #eef5ff 0%, #ffffff 45%);
  opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.menu-sheet.is-open { opacity: 1; transform: none; pointer-events: auto; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list a { display: flex; align-items: center; justify-content: space-between; min-height: 64px; border-bottom: 1px solid rgba(15, 23, 42, 0.08); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); text-decoration: none; }
.menu-list a span { font-size: 18px; color: var(--muted-foreground); }
.menu-login { margin-top: 24px; font-size: 17px; font-weight: 600; color: var(--primary-strong); text-decoration: none; }
.menu-cta { margin-top: auto; width: 100%; }
@media (max-width: 1100px) {
  .menu-btn { display: inline-flex; }
  .nav-login { display: none; }
}
@media (min-width: 1101px) { .menu-sheet { display: none; } }
@media (max-width: 420px) {
  .nav .btn { padding: 0 18px; }
  .nav-links { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .menu-sheet, .menu-btn span::before, .menu-btn span::after { transition: none; } }
/* Logo blijft zichtbaar boven het open menu */
.nav-logo { position: relative; z-index: 31; }
/* Quotes: meer ruimte en in de Dimpr-gradient (zoals de hero en de banner), elke kaart een eigen variant */
.reviews { gap: 28px; padding-bottom: 24px; }
.review { flex: 0 0 min(600px, 86vw); min-height: 400px; gap: 48px; padding: 48px; border-radius: 32px; box-shadow: none;
  background: radial-gradient(70% 80% at 100% 100%, rgba(253, 186, 116, 0.42), transparent 70%), radial-gradient(60% 70% at 0% 0%, rgba(167, 199, 255, 0.6), transparent 70%), linear-gradient(160deg, #eaf2ff 0%, #f3f7ff 55%, #fff1e4 100%); }
.review:nth-child(2) { background: radial-gradient(70% 80% at 0% 100%, rgba(253, 186, 116, 0.38), transparent 70%), radial-gradient(60% 70% at 100% 0%, rgba(50, 136, 244, 0.22), transparent 70%), linear-gradient(200deg, #e6f0ff 0%, #f4f8ff 55%, #fff3e8 100%); }
.review:nth-child(3) { background: radial-gradient(70% 80% at 50% 110%, rgba(253, 186, 116, 0.4), transparent 70%), radial-gradient(60% 70% at 20% 0%, rgba(167, 199, 255, 0.55), transparent 70%), linear-gradient(170deg, #e9f1ff 0%, #f5f8ff 55%, #fff0e2 100%); }
.review blockquote { font-size: clamp(22px, 2vw, 28px); line-height: 1.45; letter-spacing: -0.015em; font-weight: 500; }
.review-avatar { width: 56px; height: 56px; background: #fff; box-shadow: 0 6px 16px rgba(3, 61, 127, 0.08); }
.review-who b { font-size: 17px; }
@media (max-width: 560px) {
  .review { min-height: 340px; padding: 28px; gap: 32px; border-radius: 24px; }
  .review blockquote { font-size: 20px; }
}
/* ===== Mobiele check (375px) ===== */
.tm-swipe { display: none; }
@media (hover: none) {
  /* Telefoon: geen muisje maar een pijl omlaag die zacht beweegt */
  .tm-mouse { display: none; }
  .tm-swipe { display: inline-flex; color: var(--muted-foreground); animation: tmSwipe 1.6s ease-in-out infinite; }
  .tm-scroll:not(.is-hinting) .tm-swipe { animation-play-state: paused; }
}
@keyframes tmSwipe { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }
@media (max-width: 560px) {
  /* Hero: minder lege ruimte onder de foto */
  .hero { padding-bottom: 32px !important; }
  /* Time Machine: signalen niet tegen de rand, en de lijn pas na de wolk */
  .tm-item.is-signal { width: 150px; }
  /* Week: eerst de kop, dan het rooster; minder ruimte vanaf het blok erboven */
  #week { padding-top: 72px; }
  #week .week-copy { order: -1; }
  /* Afsluiter: tekstblok niet uitrekken, foto direct eronder */
  .start-banner .start-copy { flex: none; }
  .start-founders { margin-top: 16px !important; }
  /* Tikvlakken van minimaal 44px */
  .footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .layer-dots { gap: 0; }
  .layer-dots button { box-sizing: content-box; width: 8px; height: 8px; padding: 18px 8px; background-clip: content-box; }
  .layer-dots button.is-on { width: 22px; }
}
/* ===== Feedbackronde mobiel ===== */
/* 1. Logo's: tekst erboven, drie logo's in één rij die altijd past */
@media (max-width: 860px) {
  .trust { flex-direction: column; align-items: flex-start; gap: 16px; }
  .trust-logos { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .logo-ph { width: auto; height: 40px; font-size: 11px; }
}
/* 4. Kaarten bij "Verbeteren doe je niet alleen": horizontaal vegen weer mogelijk */
.layer-card { touch-action: auto; }
/* 5. Eén ritme tussen secties: overal dezelfde ruimte boven en onder (desktop 64px, mobiel 44px; samen 128 / 88px tussen secties) */
:root { --sy: 64px; }
@media (max-width: 560px) { :root { --sy: 44px; } }
.section, .together, #week, .numbers, .faq { padding-top: var(--sy) !important; padding-bottom: var(--sy) !important; }
.story { padding-bottom: var(--sy) !important; }
.story:has(+ .together) { padding-bottom: var(--sy) !important; }
.start { padding-top: calc(var(--sy) + 96px) !important; padding-bottom: var(--sy) !important; } /* +96px: ruimte voor Ferdi en Jesse die boven de banner uitsteken */
.trust-band { padding-top: 24px !important; padding-bottom: var(--sy) !important; }
@media (max-width: 960px) { .start { padding-top: var(--sy) !important; } }
/* 6. Banner op mobiel: compacter */
@media (max-width: 560px) {
  .start-banner { padding: 28px 20px 0 !important; border-radius: 24px; }
  .start-banner .start-copy { gap: 14px; }
  .start-banner .start-copy h2 { font-size: 30px; }
  .start-founders { margin-top: 8px !important; }
  .start-below { margin-top: 40px; gap: 40px; }
}
/* Verhaal begint met hetzelfde ritme als de rest */
.story { padding-top: var(--sy) !important; }
/* Quotes binnen het raster van de pagina: drie kaarten tussen de randen van de inhoud */
.reviews { max-width: var(--container); margin: 64px auto 0 !important; padding: 0 0 8px !important; gap: 24px; scroll-padding-inline: 0 !important; }
.review { flex: 0 0 calc((100% - 48px) / 3); min-height: 380px; padding: 32px; gap: 24px; }
.review blockquote { flex: 1; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; }
.review-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(15, 23, 42, 0.08); font-size: 15px; font-weight: 600; color: var(--foreground); text-decoration: none; transition: background 0.2s var(--ease-out); }
.review-more:hover { background: #fff; }
.review-more:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
@media (max-width: 960px) { .review { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 560px) {
  /* Mobiel: één kaart in beeld, de volgende piept; vegen tot de schermrand */
  .reviews { margin-left: calc(var(--gutter) * -1) !important; margin-right: calc(var(--gutter) * -1) !important; padding: 0 var(--gutter) 8px !important; scroll-padding-inline: var(--gutter) !important; gap: 12px; }
  .review { flex-basis: calc(100% - 40px); min-height: 0; padding: 24px; }
}
/* Scroll-aanwijzing weg zodra "Hier begint Dimpr" in beeld komt: vanaf daar wijst de tijdlijn de weg */
.tm-scroll { transition: opacity 0.3s var(--ease-out); }
.tm-scroll.is-gone { opacity: 0; pointer-events: none; }

/* Na "Uitval begint niet op de eerste ziektedag": de scroll-aanwijzing verdwijnt en een lijn groeit naar beneden, de tijdlijn in */
/* Quotes groter: tweeënhalf in beeld; zachte vervaging aan de kant waar nog meer staat */
.review { flex-basis: calc((100% - 48px) / 2.35); min-height: 420px; padding: 40px; }
.review blockquote { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.45; }
.reviews { --fs: 0px; --fe: 0px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fs), #000 calc(100% - var(--fe)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fs), #000 calc(100% - var(--fe)), transparent 100%); }
.reviews.fade-start { --fs: 72px; }
.reviews.fade-end { --fe: 96px; }
@media (max-width: 960px) { .review { flex-basis: calc((100% - 24px) / 1.6); } }
@media (max-width: 560px) {
  .review { flex-basis: calc(100% - 40px); min-height: 0; padding: 24px; }
  .review blockquote { font-size: 20px; }
  .reviews.fade-start { --fs: 24px; }
  .reviews.fade-end { --fe: 32px; }
}
/* De lijn na "Uitval begint niet…" in dezelfde stijl als de tijdlijn: 1,5px grijs; pas bij "Hier begint Dimpr" naar blauw */
.tm-thread { width: 1.5px !important; margin-left: -0.75px !important; background: var(--input) !important; bottom: 0 !important; }
.tm-stage + .timeline .tl-item.is-turn .tl-seg.is-gap { height: 56px; margin-top: 0; background: linear-gradient(180deg, var(--input), var(--primary-strong)); }
.tm-stage + .timeline .tl-item.is-turn { padding-top: 0; }
/* Mobiel: actiekaarten bedekken minder van de foto */
@media (max-width: 560px) {
  /* Stapkaarten: kleine overlap onderaan de foto in plaats van een groot deel */
  .visual-float { margin: -28px 16px 0 !important; }
  /* Hero: foto volledig, compacte actiekaart die onder de foto uitsteekt */
  .hero-visual { height: auto !important; margin-bottom: 72px; }
  .hero-visual .ph, .hero-photo { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; display: block; }
  .hero-float { left: 12px !important; bottom: -64px !important; width: 210px !important; }
  .hero-float .action-card { gap: 8px; padding: 12px; }
  .hero-float .action-icon { width: 44px; height: 44px; }
  .hero-float .action-body b { font-size: 16px; }
  .hero-float .action-body span { font-size: 14px; }
}
@media (max-width: 560px) { .hero-visual { margin-bottom: 128px; } .hero-float { bottom: -120px !important; } }
/* Menubalk volgens het Dimpr-ontwerpsysteem: primary-knop (blauwe gradient) en de ronde icon-btn (wit, lichte schaduw) */
.menu-btn { background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(15, 23, 42, 0.06); }
.menu-btn:hover { background: #f8fafc; }
/* Schaduw van de knop zoals in het ontwerpsysteem: subtiel, geen grote gloed in de menubalk */
.nav .btn-primary { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0.35px 0.7px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.11); }
.nav .btn-primary:hover { filter: brightness(1.06); }
/* Labels mogen elkaar niet raken: team rechtsonder op de middelste baan, organisatie linksboven op de buitenste */
.node.is-2, .layers-mobile .node.is-2 { left: 77.7%; top: 66%; }
.node.is-3, .layers-mobile .node.is-3 { left: 14.6%; top: 14.6%; }
/* Cirkel: foto's schalen mee met de grootte van de cirkel, zodat labels elkaar nooit raken */
.in-action { container-type: inline-size; }
.node img { width: clamp(44px, 16cqw, 84px) !important; height: clamp(44px, 16cqw, 84px) !important; }
.node.is-1 img { width: clamp(64px, 24cqw, 128px) !important; height: clamp(64px, 24cqw, 128px) !important; }
.node small { font-size: clamp(12px, 2.6cqw, 14px); }
/* Puntjes onder de lagenkaarten: rustig, zonder browserstijl, met een groot tikvlak */
.layer-dots { display: flex; gap: 0; }
.layer-dots button { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 28px !important; height: 28px !important; padding: 0 !important; margin: 0; border: 0; border-radius: 999px; background: transparent !important; cursor: pointer; }
.layer-dots button span { display: block; width: 6px; height: 6px; border-radius: 999px; background: #cbd5e1; transition: width 0.3s var(--ease-out), background 0.3s var(--ease-out); }
.layer-dots button.is-on span { width: 18px; background: var(--primary-strong); }
.layer-dots button:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; }
/* Mobiel: de grote knoppen over de volle breedte */
@media (max-width: 560px) {
  .hero-ctas, .hero-ctas .btn, .together-cta, .start-below .form .btn, .ask .btn { width: 100%; }
  .together-cta { align-self: stretch; }
}
/* Menubalk (logo en sluitknop) altijd boven het open menu, ook als de balk zweeft na scrollen */
.nav { position: relative; z-index: 31; }
/* Secondary-knop uit het Dimpr-ontwerpsysteem (dimpr-design.md): wit, donkere tekst, dunne rand */
.btn-secondary { background: #fff; color: var(--foreground); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1), inset 0 0 0 1px var(--border); }
.btn-secondary:hover { color: var(--foreground); background: #f8fafc; }
.nav .btn-secondary { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1), inset 0 0 0 1px var(--border); }
/* ===== Eén typografische schaal voor de hele pagina =====
   Paginatitel 72 · sectiekop 56 · stapkop 46 · item-titel 22 (halfvet) · intro 20 · tekst 17 · klein 14–15 */
:root { --fs-item: 22px; --fs-lead: 20px; --fs-body: 17px; }
@media (max-width: 560px) { :root { --fs-item: 19px; --fs-lead: 18px; --fs-body: 16px; } }
/* Sectiekoppen: overal dezelfde maat, ook in de banner */
.start-banner .start-copy h2 { font-size: clamp(36px, 4.2vw, 56px); }
/* Intro onder elke sectiekop */
.hero-sub, .lead, .meet-text, .start-banner .start-copy p, .tl-step-sub { font-size: var(--fs-lead); line-height: 1.5; }
/* Item-titels: beide accordeons (lagen en FAQ) en de startstappen in dezelfde stijl */
.faq-btn, .layer-who, .start-sub, .start-steps b { font-size: var(--fs-item); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.faq-btn { min-height: 72px; padding: 20px 0; }
/* Lopende tekst */
.faq-answer, .layer-body p, .start-steps small, .stat-strip span { font-size: var(--fs-body); line-height: 1.6; }
.faq-answer { padding: 0 40px 24px 0; }
@media (max-width: 560px) {
  .start-banner .start-copy h2 { font-size: 30px; }
  .faq-btn { min-height: 60px; padding: 16px 0; }
}
/* Beide accordeons: open = min-teken */
.faq-item.is-open .faq-sign { transform: none; }
.faq-item.is-open .faq-sign::after { transform: rotate(0deg); }
/* Tweekoloms-secties op hetzelfde raster: linker- en rechterkolom lijnen precies onder elkaar uit */
@media (min-width: 961px) {
  .together .split, #week .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; }
  .together .split > *, #week .split > * { min-width: 0; }
  .together .split { align-items: start; }
  #week .split { align-items: center; }
  .together .in-action { justify-self: center; }
}
/* Stapkaart pixel-perfect: beide rijen gebruiken dezelfde icoonkolom (56px) met 14px tussenruimte,
   zodat het kopje en de actietitel op één lijn staan en de iconen precies boven elkaar */
.sc-from-head { gap: 14px; }
.sc-mini { width: 56px; height: 28px; object-fit: contain; }
.sc-from-head .coach { width: 28px; height: 28px; margin: 0 14px; }
.sc-action { gap: 14px; }
.sc-icon { width: 56px; height: 56px; }
.sc-icon img { width: 52px; height: 52px; }
/* Twee vaste lijnen in de kaart: iconen en tekst op de linkerrand, labels en titels op de tweede lijn (na 56px + 14px) */
.sc-mini { object-position: left center; }
.sc-from-head .coach { margin: 0 28px 0 0; }
.sc-icon { justify-content: flex-start; }
.sc-icon img { width: 52px; height: 52px; object-fit: contain; object-position: left center; margin-left: -2px; } /* het 3D-icoon heeft zelf wat lucht aan de randen */
/* Eén icoonmaat (44px) in beide rijen: iconen links op de tekstlijn, label en actietitel op één lijn erna */
.sc-mini { width: 44px; height: 44px; object-fit: contain; object-position: left center; }
.sc-from-head .coach { width: 44px; height: 44px; margin: 0; }
.sc-icon { width: 44px; height: 44px; }
.sc-icon img { width: 50px; height: 50px; margin-left: -3px; }
.sc-done { right: -6px; bottom: -4px; }
/* Alle stapkaarten even hoog; de actie staat altijd onderaan */
.step-card { min-height: 260px; }
.sc-from { flex: 1; min-height: 0 !important; }
/* Optische review stapkaart: één icoonkolom van 40px. Bovenste icoon kleiner (32px, het is een label),
   actie-icoon groter (40px, het is de held); beide gecentreerd in de kolom zodat ze op één as staan */
.sc-from-head { gap: 14px; }
.sc-mini, .sc-from-head .coach { box-sizing: border-box; width: 40px; height: 32px; object-fit: contain; object-position: center; }
.sc-from-head .coach { width: 32px; height: 32px; margin: 0 4px; }
.sc-icon { width: 40px; height: 40px; justify-content: center; }
.sc-icon img { width: 44px; height: 44px; margin: 0; object-position: center; }
.sc-action { gap: 14px; }
.sc-done { right: -8px; bottom: -6px; width: 18px; height: 18px; }
/* Label iets donkerder dan de tekst eronder: duidelijker wat het is */
.sc-from-head .sc-label { color: var(--foreground); font-weight: 600; }
.sc-text { color: var(--text-secondary); }
/* ===== Onderin net zo rustig als bovenin ===== */
/* Cijfers en FAQ op wit: alleen de banner heeft nog een kleurverloop */
.numbers, .faq { background: #fff !important; }
.stat-source { margin-top: 24px; }
.faq-more { margin-top: 24px; }
/* Afsluiter: formulier in de banner, links; Ferdi en Jesse rechts */
.start-banner { align-items: center; padding: 64px 56px !important; }
.start-banner .start-copy { flex: 0 1 520px; gap: 20px; }
.start-banner .form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; max-width: 520px; padding: 20px; margin-top: 8px; border-radius: 20px; background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(12px); box-shadow: none; border: 0; }
.start-banner .form .btn, .start-banner .form .form-note, .start-banner .form .form-thanks { grid-column: 1 / -1; }
.start-banner .form .btn { min-height: 52px; }
.start-banner .form .form-note { text-align: left; }
.start-founders { top: -96px; bottom: 0; right: 32px; max-width: 46%; }
@media (max-width: 960px) {
  .start-banner { padding: 40px 24px 0 !important; }
  .start-founders { top: auto; max-width: 100%; }
}
@media (max-width: 560px) {
  .start-banner { padding: 28px 20px 0 !important; }
  .start-banner .form { grid-template-columns: 1fr; padding: 16px; }
}
/* Langere pay-off: titel iets kleiner zodat hij in drie à vier regels past */
.hero .h1 { font-size: clamp(38px, 4.6vw, 62px); line-height: 1.04; text-wrap: balance; }
/* Reviews rustig: wit, dunne rand, geen kleurverloop (alleen de banner onderaan heeft er een) */
.numbers .reviews { margin: 64px 0 0 !important; padding: 0 0 8px !important; max-width: none; }
.review, .review:nth-child(2), .review:nth-child(3) { background: #fff !important; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); }
.review-avatar { background: var(--tint-blue, #eaf2fd); box-shadow: none; }
.review-more { background: #fff; }
.numbers .proof-foot { margin-top: 24px; justify-content: flex-end; border-top: 0; padding-top: 0; }
@media (max-width: 560px) { .numbers .reviews { margin-left: calc(var(--gutter) * -1) !important; margin-right: calc(var(--gutter) * -1) !important; padding: 0 var(--gutter) 8px !important; } }
/* Stapkaart compacter: actie op één regel, bovenste deel zonder opvulruimte, kaart iets breder */
.visual-float { width: 380px; }
.step-card { min-height: 0 !important; }
.sc-from { flex: none !important; min-height: 0 !important; }
.sc-quote { min-height: 0; }
.sc-action b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .visual-float { width: auto; } }
/* Alle drie even hoog (de chatbubbel is iets hoger dan een tekstregel): kleine marge, geen gat */
.step-card { min-height: 240px !important; }
.sc-from { flex: 1 !important; }
/* "Lees meer" als subtiele onderstreepte link direct onder de quote, in plaats van een knop */
.review-text { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.review-text blockquote { flex: none; }
.review-more { align-self: flex-start; display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none !important; font-size: 16px; font-weight: 500; color: var(--foreground); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.review-more:hover { color: var(--primary-strong); }
/* Kennismaken-modal */
.start-banner-cta { align-self: flex-start; }
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease-out); }
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal-panel { position: relative; width: min(560px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 32px; border-radius: 28px; text-align: left;
  background: radial-gradient(60% 50% at 100% 0%, rgba(50, 136, 244, 0.16), transparent 70%), linear-gradient(180deg, #eef5ff 0%, #ffffff 40%);
  box-shadow: 0 32px 80px rgba(3, 61, 127, 0.25); transform: translateY(16px) scale(0.98); transition: transform 0.3s var(--ease-out); }
.modal.is-open .modal-panel { transform: none; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--foreground); cursor: pointer; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(15, 23, 42, 0.06); }
.modal-close:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.modal-founders { display: block; height: 88px; width: auto; margin-bottom: 16px; }
.modal-title { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
.modal-sub { margin: 8px 0 24px; font-size: 17px; line-height: 1.5; color: var(--text-secondary); }
.modal-form { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
.modal-form .btn, .modal-form .form-note { grid-column: 1 / -1; }
.modal-form .btn { width: 100%; min-height: 52px; margin-top: 4px; }
.modal-form .form-note { text-align: left; }
@media (max-width: 560px) {
  /* Mobiel: als sheet vanaf onderen, over de volle breedte */
  .modal { align-items: flex-end; padding: 0; }
  .modal-panel { width: 100%; max-height: 92vh; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; transform: translateY(40px); }
  .modal-form { grid-template-columns: 1fr; }
  .modal-founders { height: 64px; }
  .modal-title { font-size: 24px; padding-right: 40px; }
}
@media (prefers-reduced-motion: reduce) { .modal, .modal-panel { transition: none; } }
/* Tijdlijn eindigt bij stap 3: een blauwe lijn die uitloopt naar "Verbeteren doe je niet alleen" */
.tl-item.is-tail { padding-top: 0; }
.tl-seg.is-tail { height: 96px; background: linear-gradient(180deg, var(--primary-strong), rgba(18, 119, 231, 0)); }
.tl-item.is-with + .tl-item.is-tail .tl-seg { margin-top: 40px; }
/* Slot van het verhaal: twee foto's naast elkaar, werk en thuis */
.sanne-end { text-align: center; }
.sanne-end-head { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.sanne-end-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.sanne-end-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; }
.sanne-end-note { margin: 16px 0 0; font-size: 14px; color: var(--muted-foreground); }
@media (max-width: 560px) {
  .sanne-end-photos { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .sanne-end-photos img { border-radius: 20px; }
}
/* Verbeteren doe je niet alleen: kop gecentreerd erboven, cirkel en lagen eronder op één hoogte */
.together-head { max-width: 760px !important; margin: 0 auto 56px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.together-head .lead { text-wrap: balance; }
@media (min-width: 961px) { .together .split { align-items: center !important; } }
@media (max-width: 560px) { .together-head { margin-bottom: 8px; align-items: flex-start; text-align: left; } }
/* Kennismaken-modal v2: links Ferdi en Jesse met wat je krijgt, rechts een kort formulier */
.modal-panel { display: grid; grid-template-columns: 300px 1fr; width: min(820px, 100%); padding: 0 !important; overflow: hidden; background: #fff !important; }
.modal-side { display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; padding: 32px 28px 28px;
  background: radial-gradient(70% 60% at 100% 100%, rgba(253, 186, 116, 0.45), transparent 70%), radial-gradient(70% 60% at 0% 0%, rgba(167, 199, 255, 0.7), transparent 70%), linear-gradient(160deg, #e8f1ff 0%, #f3f7ff 55%, #fff1e4 100%); }
.modal-side .modal-founders { height: auto; width: 100%; margin: 0; }
.modal-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.modal-facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--foreground); }
.modal-facts li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: -1px; border-radius: 999px; background: var(--primary-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.modal-main { padding: 40px 36px 32px; display: flex; flex-direction: column; gap: 24px; }
.modal-title { margin: 0; padding-right: 32px; font-size: 26px; line-height: 1.2; }
.modal-form { grid-template-columns: 1fr !important; gap: 14px; }
.modal-form input::placeholder { color: #94a3b8; }
@media (max-width: 760px) {
  .modal-panel { grid-template-columns: 1fr; }
  .modal-side { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 20px 20px 16px; }
  .modal-side .modal-founders { width: 88px; flex: none; }
  .modal-facts { gap: 6px; }
  .modal-facts li { font-size: 14px; }
  .modal-facts li::before { width: 16px; height: 16px; background-size: 10px; margin-top: 1px; }
  .modal-main { padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); gap: 18px; }
  .modal-title { font-size: 22px; padding-right: 0; }
  .modal-close { top: 12px; right: 12px; }
}
@media (max-width: 760px) { .modal-side { padding-right: 60px; } }
/* Wolken beter zichtbaar tijdens het opentrekken: voller, scherper, met een zachte schaduw tegen de lichte lucht,
   en ze blijven langer in beeld (pas helemaal weg als de lucht volledig blauw is) */
.cloud.is-back { --o: 0.8; --b: 4px; --bx: 3px; }
.cloud.is-mid { --o: 0.95; --b: 1px; --bx: 4px; }
.cloud.is-front { --o: 1; --b: 0px; --bx: 5px; }
.cloud-cover .cloud {
  opacity: calc(var(--o) * (1.3 - var(--sky, 0) * 1.3));
  filter: blur(calc(var(--b) + var(--sky, 0) * var(--bx))) brightness(calc(0.97 + var(--sky, 0) * 0.08)) drop-shadow(0 18px 28px rgba(3, 61, 127, 0.14));
}
.mist { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0)); }
@media (max-width: 560px) { .cloud-cover { --k: 0.7; } }
/* Modal: meer ruimte, eerst wat je krijgt en daaronder Ferdi en Jesse (foto staat op de onderrand) */
.modal-panel { grid-template-columns: 360px 1fr; width: min(940px, 100%); }
.modal-side { justify-content: space-between; padding: 40px 32px 0; gap: 28px; }
.modal-side .modal-founders { width: 100%; max-width: 300px; align-self: center; }
.modal-facts { gap: 14px; }
.modal-facts li { font-size: 16px; }
.modal-main { padding: 48px 44px 40px; justify-content: center; }
.modal-title { font-size: 28px; }
/* Knop zoals in het Dimpr-ontwerpsysteem: gradient met de subtiele knopschaduw, geen grote gloed */
.modal-form .btn-primary { min-height: 48px; height: 48px; font-size: 16px; filter: none;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0.35px 0.7px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.11); }
.modal-form .btn-primary:hover { filter: brightness(1.06); }
@media (max-width: 760px) {
  .modal-side { flex-direction: row; justify-content: flex-start; align-items: flex-end; padding: 20px 60px 0 20px; gap: 14px; }
  .modal-side .modal-founders { order: -1; width: 96px; max-width: none; align-self: flex-end; }
  .modal-facts { gap: 6px; padding-bottom: 16px; }
  .modal-facts li { font-size: 14px; }
  .modal-main { padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
  .modal-title { font-size: 22px; }
}
/* Modal mobiel (na de desktopregels, zodat deze winnen) */
@media (max-width: 760px) {
  .modal-panel { grid-template-columns: 1fr; width: 100%; }
  .modal-side { justify-content: flex-start; padding: 20px 60px 0 20px; }
}
/* Zo start je: 1 - 2 - 3 in een rij boven de banner */
.start-steps-title { margin: 0 0 40px; }
.start-row { list-style: none; margin: 0 0 calc(96px + 64px); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; }
.start-row li { position: relative; display: flex; flex-direction: column; gap: 8px; }
.start-row li:not(:last-child)::after { content: ""; position: absolute; left: 52px; right: -28px; top: 18px; height: 1.5px; background: var(--border); }
.start-row .steps-num { width: 36px; height: 36px; margin-bottom: 8px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue, #eaf2fd); color: var(--primary-strong); font-size: 15px; font-weight: 700; }
.start-row b { font-size: var(--fs-item); line-height: 1.3; font-weight: 600; }
.start-row small { font-size: var(--fs-body); line-height: 1.55; color: var(--text-secondary); max-width: 320px; }
@media (max-width: 960px) { .start-row { margin-bottom: 56px; } }
@media (max-width: 560px) {
  .start-steps-title { margin-bottom: 28px; }
  .start-row { grid-template-columns: 1fr; gap: 24px; margin-bottom: 44px; }
  .start-row li { padding-left: 52px; }
  .start-row .steps-num { position: absolute; left: 0; top: -4px; margin: 0; }
  .start-row li:not(:last-child)::after { left: 17px; right: auto; top: 40px; bottom: -20px; width: 1.5px; height: auto; }
}
/* De ruimte voor Ferdi en Jesse zit nu onder de stappen; de sectie zelf begint met het normale ritme */
.start { padding-top: var(--sy) !important; }
@media (max-width: 960px) { .start-banner .start-copy { flex: none !important; } }
/* ===== Gespreksmodal, visuele verfijning ===== */
.modal-grab { display: none; }
.modal-panel { border-radius: 28px; }
.modal-side { position: relative; justify-content: flex-start; gap: 0; padding: 40px 32px 0; overflow: hidden; }
.modal-facts { position: relative; z-index: 2; gap: 12px; }
.modal-people { position: relative; margin: auto 0 0; display: flex; justify-content: center; }
.modal-side .modal-people .modal-founders { width: 100%; max-width: 320px; height: auto; margin-top: 24px; }
.modal-people figcaption { position: absolute; left: 0; bottom: 20px; display: flex; flex-direction: column; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); font-size: 14px; font-weight: 600; color: var(--foreground); box-shadow: 0 6px 18px rgba(3, 61, 127, 0.1); }
.modal-people figcaption small { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.modal-main { padding: 40px; gap: 28px; justify-content: center; border-left: 1px solid rgba(15, 23, 42, 0.06); }
.modal-head { display: flex; flex-direction: column; gap: 4px; padding-right: 40px; }
.modal-title { font-size: 30px; padding-right: 0; }
.modal-sub { margin: 0; font-size: 17px; color: var(--text-secondary); }
.modal-form { gap: 16px !important; }
.modal-form label { gap: 8px; }
.modal-form input { height: 48px; min-height: 48px; }
.modal-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(50, 136, 244, 0.18); }
.modal-form .btn-primary { margin-top: 8px; }
.modal-assure { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.modal-assure li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-secondary); }
.modal-assure svg { color: var(--muted-foreground); flex: none; }
@media (max-width: 760px) {
  /* Mobiel: sheet met greepje, foto rond naast de kop, vinkjes compact eronder */
  .modal-panel { position: relative; display: flex; flex-direction: column; border-radius: 24px 24px 0 0; max-height: 92vh; }
  .modal-grab { display: block; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(15, 23, 42, 0.18); z-index: 3; }
  .modal-side { flex-direction: column; align-items: stretch; padding: 28px 20px 16px; gap: 0; }
  .modal-people { order: -1; margin: 0 0 14px; justify-content: flex-start; align-items: center; gap: 12px; }
  .modal-side .modal-people .modal-founders { width: 64px; height: 64px; margin: 0; border-radius: 999px; object-fit: cover; object-position: 50% 12%; background: #fff; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(3, 61, 127, 0.12); }
  .modal-people figcaption { position: static; padding: 0; background: none; box-shadow: none; backdrop-filter: none; font-size: 15px; }
  .modal-facts { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; padding: 0; }
  .modal-facts li { font-size: 13px; }
  .modal-facts li::before { width: 16px; height: 16px; background-size: 10px; margin-top: 0; }
  .modal-main { padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); gap: 20px; border-left: 0; }
  .modal-head { padding-right: 0; }
  .modal-title { font-size: 24px; }
  .modal-sub { font-size: 16px; }
  .modal-close { top: 16px; right: 16px; }
  .modal-assure { flex-direction: column; gap: 6px; }
}
.modal-close { z-index: 5; }
@media (max-width: 760px) { .modal-side { padding-right: 64px; } }

/* =========================================================
   Rust en consistentie over de hele pagina (één systeem)
   ========================================================= */
:root {
  --r-card: 24px;      /* kaarten */
  --r-lg: 32px;        /* foto's, banner, modal */
  --line: 1px solid rgba(15, 23, 42, 0.06);
  --shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.05);
  --shadow-float: 0 20px 48px rgba(3, 61, 127, 0.16); /* alleen kaarten die boven een foto zweven */
  --t-fast: 0.4s; --t-slow: 0.8s;
}
/* 1. Achtergronden: wit als basis; de gradient alleen bij hero, omslag en afsluiter */
.hero { background:
  radial-gradient(55% 65% at 88% 88%, rgba(236, 128, 27, 0.32), transparent 70%),
  radial-gradient(45% 55% at 68% 18%, rgba(50, 136, 244, 0.3), transparent 70%),
  radial-gradient(35% 40% at 30% 8%, rgba(167, 199, 255, 0.5), transparent 70%),
  linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, #ffffff 100%),
  linear-gradient(160deg, #e8f1ff 0%, #d6e7ff 48%, #ffe7d1 100%) !important; }
.trust-band, .story { background: #fff !important; }
/* 2. Eén kaartstijl */
.step-card, .layer-card, .review, .week-card, .stats-card, .action-card { border-radius: var(--r-card) !important; border: var(--line) !important; }
.layer-card, .review, .week-card { box-shadow: var(--shadow-soft) !important; }
.step-card, .action-card, .hero-float .action-card { box-shadow: var(--shadow-float) !important; }
.modal-panel, .start-banner, .visual-photo, .hero-photo, .sanne-end-photos img, .modal-panel { border-radius: var(--r-lg) !important; }
.visual-photo, .hero-photo, .sanne-end-photos img { box-shadow: none !important; }
@media (max-width: 760px) { .modal-panel { border-radius: 24px 24px 0 0 !important; } }
/* 3. Blauw = actie. Cijfers donker */
.stat-strip strong, .case-metric strong { color: var(--foreground) !important; background: none !important; -webkit-text-fill-color: currentColor; }
/* 4. Icoon in de check-in: rond portret van Sanne in plaats van een avatar */
.sc-mini.is-portrait { width: 32px !important; height: 32px !important; margin: 0 4px; border-radius: 999px; object-fit: cover !important; object-position: 50% 15% !important; }
/* 5. Beweging: geen puls, geen gloed */
.tl-item.is-on .tl-dimpr, .sc-action.is-in { animation: none !important; }
.tl-dimpr { box-shadow: 0 0 0 8px rgba(18, 119, 231, 0.1); }
/* 8. Eén labelstijl en één linkstijl */
.rota-day { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 600 !important; }
.text-link, .faq-more { color: var(--foreground) !important; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.text-link:hover, .faq-more:hover { color: var(--primary-strong) !important; }
/* 6. Uitlijning: verhaal gecentreerd, informatieve secties links */
.numbers-title, #vragen .h2, .start-steps-title, #week .h2 { text-align: left; }
.together { background: #fff !important; }
/* Wolken groter (--cs) en dichter bij het midden (--cx): x is de linkerrand, dus corrigeren voor de extra breedte */
.cloud-cover { --cs: 1.3; --cx: 0.68; }
.cloud-cover .cloud {
  width: calc(var(--w) * var(--k) * var(--cs) * 1px);
  left: calc(50% + (var(--x) * var(--cx) - var(--w) * (var(--cs) - 1) / 2) * var(--k) * 1px);
}
@media (max-width: 560px) { .cloud-cover { --cs: 1.25; --cx: 0.6; } }
/* Overgang HR → "Verbeteren doe je niet alleen": de lucht van het verhaal loopt onderaan zacht uit naar wit */
.story-sky { background: linear-gradient(180deg, rgba(220, 236, 255, 0) 0, rgba(220, 236, 255, 0) calc(var(--turn, 1200px) - 40px), #dcecff calc(var(--turn, 1200px) + 280px), #eaf4ff 55%, #f5faff 80%, #ffffff 100%) !important; }
.story { padding-bottom: 0 !important; }
.tl-seg.is-tail { height: 120px; }
.together { padding-top: 32px !important; }
/* Reviews: geen afgesneden schaduw meer (die gaf een grijze strook); alleen de dunne rand */
.review, .review:nth-child(2), .review:nth-child(3) { box-shadow: none !important; }
/* Het probleemdeel (Dit is Sanne, Sanne valt uit) weer in het warme beige; de hero loopt daarin uit.
   Na de omslag neemt de blauwe lucht het over en die loopt onderaan uit naar wit. */
.hero { background:
  radial-gradient(55% 65% at 88% 88%, rgba(236, 128, 27, 0.32), transparent 70%),
  radial-gradient(45% 55% at 68% 18%, rgba(50, 136, 244, 0.3), transparent 70%),
  radial-gradient(35% 40% at 30% 8%, rgba(167, 199, 255, 0.5), transparent 70%),
  linear-gradient(180deg, rgba(250, 248, 244, 0) 70%, #faf8f4 100%),
  linear-gradient(160deg, #e8f1ff 0%, #d6e7ff 48%, #ffe7d1 100%) !important; }
.trust-band, .story { background: #faf8f4 !important; }
/* Stapkaart strakker: één ritme van 16px binnen de kaart, geen opvulruimte meer */
.step-card { min-height: 0 !important; padding: 20px !important; }
.sc-from { flex: none !important; gap: 12px !important; }
.sc-from-head { min-height: 32px; }
.sc-bubble { padding: 10px 14px; }
.sc-action { min-height: 0 !important; margin-top: 16px !important; padding-top: 16px !important; gap: 14px; }
.sc-icon { width: 40px !important; height: 40px !important; }
.sc-icon img { width: 42px !important; height: 42px !important; }
.sc-action b { line-height: 1.25; }
/* Lagen: bovenaan vastzetten, zodat niets verspringt als een andere laag opengaat */
@media (min-width: 961px) { .together .split { align-items: start !important; } .together-copy { justify-content: flex-start !important; } .together .in-action { position: relative !important; top: auto !important; } }
/* Reviews met meer karakter, nog steeds rustig */
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 80px; }
.reviews-title { margin: 0; font-size: var(--fs-item); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.numbers .reviews { margin-top: 24px !important; }
.review, .review:nth-child(2), .review:nth-child(3) {
  border: 0 !important; padding: 36px !important; min-height: 380px;
  background: radial-gradient(80% 60% at 100% 100%, rgba(253, 186, 116, 0.18), transparent 70%), linear-gradient(160deg, #f1f6ff 0%, #f7f9fc 60%, #fbf8f4 100%) !important; }
.review-mark { color: var(--primary-strong); opacity: 0.9; }
.review-text { gap: 20px; }
.review blockquote { font-size: clamp(20px, 1.7vw, 24px) !important; line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; }
.review-who { padding-top: 20px; border-top: 1px solid rgba(15, 23, 42, 0.08); }
.review-avatar { width: 48px; height: 48px; background: #fff !important; box-shadow: 0 0 0 4px rgba(18, 119, 231, 0.08) !important; }
@media (max-width: 560px) {
  .reviews-head { margin-top: 56px; }
  .review, .review:nth-child(2), .review:nth-child(3) { padding: 24px !important; min-height: 0; }
  .review-mark { width: 28px; height: 21px; }
}
.reviews-head { align-items: center; }
/* Hero → pagina zoals eerder: dezelfde gradient met de warme perzik linksonder, die vanaf 62% zacht uitloopt in het beige */
.hero { background:
  linear-gradient(180deg, rgba(250, 248, 244, 0) 62%, #faf8f4 100%),
  radial-gradient(55% 65% at 88% 88%, rgba(236, 128, 27, 0.38), transparent 70%),
  radial-gradient(45% 55% at 68% 18%, rgba(50, 136, 244, 0.34), transparent 70%),
  radial-gradient(40% 50% at 4% 96%, rgba(253, 186, 116, 0.4), transparent 70%),
  radial-gradient(35% 40% at 30% 8%, rgba(167, 199, 255, 0.55), transparent 70%),
  linear-gradient(160deg, #e8f1ff 0%, #d6e7ff 48%, #ffe7d1 100%) !important; }
/* Zo start je: drie gelijke kaarten, nummer en tijd als anker, één 3D-object per stap */
.start-steps-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: 40px; }
.start-steps-head .h2 { margin: 0; }
.start-steps-head .lead { margin: 0; }
.start-cards { list-style: none; margin: 0 0 calc(96px + 64px); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.start-card { display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: var(--r-card); border: var(--line); background: linear-gradient(180deg, #f6f9fe 0%, #ffffff 100%); }
.start-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.start-card-num { font-size: 28px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: #cbd5e1; }
.start-card-top small { padding: 4px 10px; border-radius: 999px; background: #fff; border: var(--line); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.start-card img { width: 64px; height: 64px; object-fit: contain; object-position: left center; margin: 8px 0 12px; }
.start-card b { font-size: var(--fs-item); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.start-card-text { font-size: var(--fs-body); line-height: 1.55; color: var(--text-secondary); }
@media (max-width: 960px) { .start-cards { margin-bottom: 56px; } }
@media (max-width: 760px) {
  .start-cards { grid-template-columns: 1fr; gap: 12px; margin-bottom: 44px; }
  .start-card { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; row-gap: 4px; padding: 20px; }
  .start-card-top { grid-column: 1 / -1; margin-bottom: 4px; }
  .start-card img { grid-row: 2 / span 2; width: 48px; height: 48px; margin: 0; }
  .start-card-num { font-size: 22px; }
}
/* Zo start je: iconen groter (de 3D-plaatjes hebben veel lucht rondom) */
.start-card img { width: 88px; height: 88px; margin: 0 0 8px -10px; }
/* Modal: vinkjes en Ferdi en Jesse als één blok, label los van de personen, foto groter en gecentreerd */
.modal-side { justify-content: space-between; padding: 44px 36px 0; }
.modal-facts { gap: 14px; }
.modal-people { margin: 32px -36px 0; justify-content: center; }
.modal-side .modal-people .modal-founders { width: 100%; max-width: 360px; margin: 0; }
.modal-people figcaption { left: 36px; bottom: auto; top: -8px; transform: translateY(-100%); }
.modal-main { padding: 44px 40px 40px; }
@media (max-width: 760px) {
  .modal-side { padding: 28px 64px 16px 20px; justify-content: flex-start; }
  .modal-people { margin: 0 0 14px; }
  .modal-people figcaption { position: static; transform: none; }
  .start-card img { width: 56px; height: 56px; margin: 0 0 0 -6px; }
}
/* Optisch gelijke iconen: elk 3D-plaatje heeft andere lucht rondom */
.start-icon { transform-origin: left center; }
.start-icon.is-0 { transform: scale(1.3); }
.start-icon.is-1 { transform: scale(1.35); }
.start-icon.is-2 { transform: scale(0.82); }

/* =========================================================
   Subpagina's (blog, artikel, wat bespaar je, contact, werken bij, juridisch)
   Zelfde systeem als de homepage: hero-lucht bovenaan, wit daaronder, --r-card, --line, --fs-*
   ========================================================= */
.nav-links a[aria-current="page"] { color: var(--foreground); }
.menu-list a[aria-current="page"] { color: var(--primary-strong); }

.page-head { padding: 176px var(--gutter) 72px; background:
  linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #fff 96%),
  radial-gradient(45% 80% at 92% 30%, rgba(253, 186, 116, 0.32), transparent 70%),
  radial-gradient(40% 70% at 70% 0%, rgba(50, 136, 244, 0.22), transparent 70%),
  linear-gradient(160deg, #eef5ff 0%, #e4efff 55%, #fff3e6 100%); }
.page-head .container { max-width: var(--container); }
.page-eyebrow { margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--primary-strong); }
.page-title { margin: 0; max-width: 16ch; font-size: clamp(40px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
.page-lead { margin-top: 20px; max-width: 46ch; font-size: var(--fs-lead); }
.page-head.is-narrow .container, .legal .container { max-width: 680px; }
.page-head.is-narrow .page-lead { font-size: 15px; color: var(--muted-foreground); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.page-body { padding: 24px var(--gutter) calc(var(--sy) * 2); }
.page-cta { padding: calc(var(--sy) * 2) var(--gutter) !important; }
.subpage .start-banner { margin-top: 0; }

/* Lopende tekst: één kolom van ~68 tekens, rustig ritme */
.prose { max-width: 680px; margin: 0 auto; font-size: 18px; line-height: 1.7; color: var(--text-body); }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 20px; }
.prose h2, .prose h3 { color: var(--foreground); letter-spacing: -0.015em; line-height: 1.25; }
.prose h2 { font-size: 28px; margin-top: 48px; }
.prose h3 { font-size: var(--fs-item); font-weight: 600; margin-top: 40px; }
.prose h2 + *, .prose h3 + * { margin-top: 12px; }
.prose strong { color: var(--foreground); font-weight: 600; }
.prose a { color: var(--primary-strong); text-underline-offset: 3px; }
.prose ul { padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--primary); }
.prose blockquote { padding: 4px 0 4px 24px; border-left: 3px solid var(--primary); font-size: 22px; line-height: 1.45; font-weight: 500; color: var(--foreground); letter-spacing: -0.01em; }
.prose figure img { display: block; width: 100%; height: auto; border-radius: var(--r-card); }
@media (max-width: 560px) {
  .page-head { padding: 128px var(--gutter) 40px; }
  .prose { font-size: 17px; }
  .prose h2 { font-size: 24px; margin-top: 40px; }
  .prose blockquote { font-size: 19px; padding-left: 18px; }
}

/* Blog: uitgelicht artikel + raster */
.post-card { display: flex; flex-direction: column; gap: 16px; color: inherit; text-decoration: none; }
.post-card-img { display: block; overflow: hidden; border-radius: var(--r-card); border: var(--line); background: var(--tint-blue-soft); aspect-ratio: 16 / 9; }
.post-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.post-card:hover .post-card-img img { transform: scale(1.03); }
.post-card-body { display: flex; flex-direction: column; gap: 8px; }
.post-card-date { font-size: 14px; font-weight: 500; color: var(--muted-foreground); }
.post-card-title { font-size: var(--fs-item); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); text-wrap: pretty; }
.post-card:hover .post-card-title { color: var(--primary-strong); }
.post-card-excerpt { font-size: var(--fs-body); line-height: 1.55; color: var(--text-secondary); }
.post-card-author { font-size: 14px; color: var(--muted-foreground); }
.post-card.is-big { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 48px; padding-bottom: 56px; margin-bottom: 56px; border-bottom: var(--line); }
.post-card.is-big .post-card-img { border-radius: var(--r-lg); }
.post-card.is-big .post-card-title { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; }
.post-card.is-big .post-card-body { gap: 12px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
@media (max-width: 960px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .post-card.is-big { grid-template-columns: 1fr; gap: 20px; padding-bottom: 40px; margin-bottom: 40px; }
}
@media (max-width: 560px) { .post-grid { grid-template-columns: 1fr; gap: 36px; } }

/* Artikel */
.post-head { padding-bottom: 40px; }
.post-head .page-title { max-width: 22ch; font-size: clamp(34px, 4.2vw, 54px); }
.back-link { display: inline-flex; gap: 8px; margin-bottom: 24px; font-size: 15px; font-weight: 600; color: var(--primary-strong); text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.byline { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; }
.byline img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; }
.byline span { display: flex; flex-direction: column; }
.byline b { font-size: 15px; font-weight: 600; }
.byline small { font-size: 14px; color: var(--muted-foreground); }
.post-hero { max-width: calc(var(--container) + 2 * var(--gutter)); padding: 0 var(--gutter); margin-bottom: 56px; }
.post-hero img { display: block; width: 100%; max-height: 600px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); }
.post-text { padding: 0 var(--gutter); }
.post-body > p:first-child strong:only-child { font-weight: 500; }
.post-author { display: flex; align-items: center; gap: 16px; max-width: calc(680px + 2 * var(--gutter)); margin: 56px auto 0; padding: 32px var(--gutter) 0; border-top: var(--line); }
.post-author img { width: 64px; height: 64px; border-radius: 999px; object-fit: cover; }
.post-author > span { display: flex; flex-direction: column; font-size: 15px; color: var(--text-secondary); }
.post-author small { font-size: 13px; color: var(--muted-foreground); }
.post-author b { font-size: var(--fs-item); color: var(--foreground); font-weight: 600; }
.more-posts { padding-top: calc(var(--sy) * 2); }
.more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
@media (max-width: 560px) {
  .post-hero { margin-bottom: 36px; }
  .post-hero img { border-radius: var(--r-card); }
  .more-head { flex-direction: column; gap: 8px; margin-bottom: 28px; }
}

/* Wat bespaar je? */
.roi .container { max-width: 760px; }
.roi-card { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 40px; border-radius: var(--r-lg); border: var(--line); background: #fff; box-shadow: var(--shadow-soft); text-align: center; }
.roi-result { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 24px; border-radius: var(--r-card); color: #fff; background:
  radial-gradient(60% 90% at 85% 100%, rgba(253, 186, 116, 0.45), transparent 70%), var(--gradient-primary); }
.roi-result small { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.roi-result b { font-size: clamp(48px, 8vw, 80px); line-height: 1; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.roi-result span { font-size: 17px; opacity: 0.85; }
.roi-input { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.roi-input label { font-size: var(--fs-item); font-weight: 600; letter-spacing: -0.01em; }
.roi-count { display: flex; align-items: baseline; gap: 10px; }
.roi-count input { width: 3.6ch; padding: 0 0 2px; border: 0; border-bottom: 2px solid var(--border); font: inherit; font-size: 44px; font-weight: 700; letter-spacing: -0.03em; color: var(--primary-strong); text-align: center; background: transparent; -moz-appearance: textfield; }
.roi-count input:focus { outline: none; border-bottom-color: var(--primary); }
.roi-count input::-webkit-inner-spin-button, .roi-count input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.roi-count span { font-size: 17px; color: var(--text-secondary); }
.roi-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 8px 0 0; border-radius: 99px; outline-offset: 6px;
  background: linear-gradient(90deg, var(--primary) var(--p), #e6eef9 var(--p)); }
.roi-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 999px; background: #fff; border: 2px solid var(--primary); box-shadow: 0 4px 12px rgba(3, 61, 127, 0.18); cursor: grab; }
.roi-slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 999px; background: #fff; border: 2px solid var(--primary); box-shadow: 0 4px 12px rgba(3, 61, 127, 0.18); cursor: grab; }
.roi-scale { width: 100%; display: flex; justify-content: space-between; font-size: 13px; color: var(--muted-foreground); }
.roi-note { margin: 0; max-width: 46ch; font-size: var(--fs-body); line-height: 1.6; color: var(--text-secondary); }
.roi-note b { color: var(--foreground); font-weight: 600; }
@media (max-width: 560px) { .roi-card { padding: 20px; gap: 24px; } .roi-result { padding: 32px 16px; } .roi-card .btn { width: 100%; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.contact-card { padding: 36px; border-radius: var(--r-lg); border: var(--line); background: #fff; box-shadow: var(--shadow-soft); }
.contact-form { padding: 0; box-shadow: none; border-radius: 0; gap: 18px; }
.contact-form textarea { min-height: 128px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--input); font: inherit; font-size: 16px; color: var(--foreground); resize: vertical; }
.contact-form textarea:focus { outline: 3px solid rgba(50, 136, 244, 0.35); border-color: var(--primary); }
.contact-form .btn { width: auto; align-self: flex-start; }
.contact-side { display: flex; flex-direction: column; gap: 32px; }
.contact-people { margin: 0; display: flex; align-items: center; gap: 16px; }
.contact-people img { width: 132px; height: auto; }
.contact-people figcaption { display: flex; flex-direction: column; font-size: var(--fs-item); font-weight: 600; }
.contact-people small { font-size: 15px; font-weight: 400; color: var(--muted-foreground); }
.contact-facts { margin: 0; display: flex; flex-direction: column; gap: 20px; padding-top: 28px; border-top: var(--line); }
.contact-facts dt { font-size: 14px; color: var(--muted-foreground); }
.contact-facts dd { margin: 4px 0 0; font-size: var(--fs-body); line-height: 1.5; font-weight: 500; }
.contact-facts a { color: var(--primary-strong); }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .contact-card { padding: 20px; } .contact-form .btn { width: 100%; } }

/* Werken bij */
.job-facts { margin: 48px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; border-radius: var(--r-card); overflow: hidden; border: var(--line); background: rgba(15, 23, 42, 0.06); }
.job-facts > div { padding: 20px; background: rgba(255, 255, 255, 0.85); }
.job-facts dt { font-size: 13px; color: var(--muted-foreground); }
.job-facts dd { margin: 6px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 17px; font-weight: 600; }
.job-facts small { font-size: 13px; font-weight: 400; color: var(--text-secondary); line-height: 1.4; }
.job { scroll-margin-top: 80px; }
.job-section { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 64px 0; border-top: var(--line); }
.job-section:first-child { border-top: 0; padding-top: 24px; }
.job-label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.job-label span { font-size: 28px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: #cbd5e1; }
.job-main { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.job-main .h2 { font-size: clamp(30px, 3.2vw, 40px); text-wrap: balance; }
.job-text { margin: 0; font-size: var(--fs-body); line-height: 1.65; color: var(--text-body); }
.job-note { margin: 0; padding: 20px 24px; border-radius: var(--r-card); background: var(--info-subtle); font-size: var(--fs-body); line-height: 1.6; color: var(--text-body); }
.job-note strong { color: var(--foreground); font-weight: 600; }
.job-list-title { margin: 12px 0 0; font-size: var(--fs-item); font-weight: 600; letter-spacing: -0.01em; }
.job-cards { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.job-cards.is-2 { grid-template-columns: repeat(2, 1fr); }
.job-cards.is-5 { grid-template-columns: repeat(2, 1fr); }
.job-cards.is-5 li:last-child { grid-column: 1 / -1; }
.job-cards li { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--r-card); border: var(--line); background: linear-gradient(180deg, #f6f9fe 0%, #fff 100%); }
.job-cards b { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.job-cards span { font-size: 16px; line-height: 1.55; color: var(--text-secondary); }
.job-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.job-steps li { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--r-card); border: var(--line); }
.job-steps small { align-self: flex-start; padding: 4px 10px; border-radius: 999px; border: var(--line); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.job-steps b { margin-top: 8px; font-size: 18px; font-weight: 600; }
.job-steps span { font-size: 16px; line-height: 1.55; color: var(--text-secondary); }
.job-numbered, .job-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.job-numbered li { display: flex; gap: 20px; padding: 16px 0; border-bottom: var(--line); font-size: var(--fs-body); font-weight: 500; }
.job-numbered li span { color: var(--primary-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.job-checks li { position: relative; padding: 10px 0 10px 32px; font-size: var(--fs-body); line-height: 1.55; color: var(--text-body); }
.job-checks li::before { content: ""; position: absolute; left: 0; top: 13px; width: 20px; height: 20px; border-radius: 999px; background: var(--tint-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231277e7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.job-stack { display: flex; flex-direction: column; gap: 12px; }
.job-stack > p:not(.job-text) { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.job-stack small { width: 72px; font-size: 14px; color: var(--muted-foreground); }
.job-stack p > span { padding: 6px 12px; border-radius: 999px; border: var(--line); background: #fff; font-size: 15px; font-weight: 500; }
.job-banner .start-copy p + p { margin-top: 12px; }
.job-mail { font-size: 15px !important; }
@media (max-width: 960px) {
  .job-facts { grid-template-columns: repeat(2, 1fr); }
  .job-facts > div:last-child { grid-column: 1 / -1; }
  .job-section { grid-template-columns: 1fr; gap: 16px; padding: 48px 0; }
  .job-label { flex-direction: row; align-items: baseline; gap: 12px; }
  .job-label span { font-size: 22px; }
  .job-cards, .job-steps { grid-template-columns: 1fr; }
  .job-cards.is-2, .job-cards.is-5 { grid-template-columns: 1fr; }
  .job-cards.is-5 li:last-child { grid-column: auto; }
}
@media (max-width: 560px) { .job-facts > div { padding: 16px; } .job-cards li, .job-steps li { padding: 20px; } }

/* Juridisch: genummerde artikelen */
.legal-body { font-size: 17px; }
.legal-body h3 { font-size: 22px; }
.legal-body .clause { display: grid; grid-template-columns: 44px 1fr; gap: 8px; }
.legal-body .clause + .clause { margin-top: 14px; }
.legal-body .clause-num { font-weight: 600; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.legal-body .clause + ul { margin-top: 10px; margin-left: 52px; }
@media (max-width: 560px) {
  .page-actions { flex-direction: column; align-items: stretch; gap: 16px; }
  .page-actions .btn { width: 100%; }
  .page-actions .text-link { align-self: center; }
}
/* Artikel: titel en byline op dezelfde kolom als de tekst; alleen de afbeelding is breed */
.post-head .container { max-width: 680px; }

/* Artikel, SEO-opbouw (zoals een kennisbank): kruimelpad, inhoudsopgave, auteursbio en delen.
   Alles staat in dezelfde leeskolom van 680px als de tekst. */
.post-text > * { max-width: 680px; margin-left: auto; margin-right: auto; }
.crumbs { margin-bottom: 24px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 14px; }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs li + li::before { content: ""; width: 6px; height: 6px; margin: 0 10px; border-right: 1.5px solid var(--subtle); border-top: 1.5px solid var(--subtle); transform: rotate(45deg); }
.crumbs a { color: var(--primary-strong); font-weight: 500; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--muted-foreground); max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.toc { margin-bottom: 48px; padding: 24px 28px; border-radius: var(--r-card); border: var(--line); background: var(--info-subtle); }
.toc-title { margin: 0 0 12px; font-size: var(--fs-item); font-weight: 600; letter-spacing: -0.01em; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: flex; flex-direction: column; }
.toc li { counter-increment: toc; display: flex; gap: 12px; padding: 8px 0; border-top: var(--line); font-size: 16px; line-height: 1.45; }
.toc li:first-child { border-top: 0; }
.toc li::before { content: counter(toc, decimal-leading-zero); flex: none; width: 24px; font-weight: 600; color: var(--subtle); font-variant-numeric: tabular-nums; }
.toc a { color: var(--foreground); font-weight: 500; text-decoration: none; }
.toc a:hover { color: var(--primary-strong); text-decoration: underline; text-underline-offset: 3px; }
.prose h2[id], .prose h3[id] { scroll-margin-top: 104px; }

.author-bio { display: flex; gap: 20px; align-items: flex-start; margin-top: 56px; padding: 28px; border-radius: var(--r-card); border: var(--line); background: linear-gradient(180deg, #f6f9fe 0%, #fff 100%); }
.author-bio img { flex: none; width: 72px; height: 72px; border-radius: 999px; object-fit: cover; }
.author-bio div { display: flex; flex-direction: column; gap: 2px; }
.author-bio b { font-size: var(--fs-item); font-weight: 600; letter-spacing: -0.01em; }
.author-bio small { font-size: 14px; color: var(--muted-foreground); }
.author-bio p { margin: 12px 0 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text-secondary); }
.author-bio .text-link { margin-top: 12px; font-size: 15px; }

.share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding: 20px 0; border-top: var(--line); border-bottom: var(--line); }
.share > b { font-size: 16px; font-weight: 600; }
.share-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--foreground); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast); }
.share-btn:hover { border-color: var(--primary); color: var(--primary-strong); }
.share-copy { padding: 0 16px 0 12px; }

@media (max-width: 560px) {
  .toc { padding: 20px; margin-bottom: 36px; }
  .author-bio { flex-direction: column; gap: 16px; padding: 20px; }
  .author-bio img { width: 56px; height: 56px; }
  .share { flex-direction: column; align-items: flex-start; }
  .crumbs [aria-current] { max-width: 18ch; }
}

/* =========================================================
   Blog v2: rustiger ritme en één leesstijl voor alle artikelen
   Ritme: 16 / 24 / 48 / 96. Leeskolom 680px, 18px / 1.7.
   ========================================================= */
/* Kop van de pagina sluit aan op de inhoud (was 136px tussen intro en eerste artikel) */
.subpage .page-head { padding-bottom: 48px; }
.subpage .page-body { padding-top: 16px !important; padding-bottom: 96px !important; }
.subpage .page-cta { padding-top: 0 !important; padding-bottom: 96px !important; }
@media (max-width: 560px) {
  .subpage .page-head { padding-bottom: 32px; }
  .subpage .page-body { padding-bottom: 64px !important; }
  .subpage .page-cta { padding-bottom: 64px !important; }
}

/* Blog-overzicht: uitgelicht (1 groot + 2 ernaast), dan "Alle artikelen" in rijen van drie */
.blog-featured { display: grid; grid-template-columns: 1.7fr 1fr; gap: 32px; padding-bottom: 48px; border-bottom: var(--line); }
.blog-featured-side { display: flex; flex-direction: column; gap: 32px; }
.post-card.is-big { display: flex; grid-template-columns: none; gap: 20px; padding: 0; margin: 0; border: 0; }
.post-card.is-big .post-card-title { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; }
.post-card.is-big .post-card-excerpt { max-width: 60ch; }
.post-card.is-side .post-card-title { font-size: 19px; }
.post-card-body { gap: 8px; }
.post-card-meta { font-size: 14px; font-weight: 500; color: var(--muted-foreground); }
.blog-all-title { margin: 48px 0 24px; font-size: var(--fs-item); font-weight: 600; letter-spacing: -0.01em; }
.post-grid { gap: 48px 32px; }
@media (max-width: 960px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-side { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .blog-featured { gap: 36px; padding-bottom: 36px; }
  .blog-featured-side { grid-template-columns: 1fr; gap: 36px; }
  .blog-all-title { margin: 36px 0 20px; }
}

/* Artikel: vaste afstanden tussen de blokken */
.post-head { padding-bottom: 48px !important; }
.post-hero { margin-bottom: 48px; }
.toc { margin-bottom: 48px; }
.author-bio { margin-top: 64px; }
.share { margin-top: 24px; padding: 0; border: 0; }
.subpage .more-posts { padding-top: 96px !important; }
.more-posts .container { padding-top: 0; }
.more-head { margin-bottom: 32px; }
@media (max-width: 560px) {
  .post-head { padding-bottom: 32px !important; }
  .post-hero, .toc { margin-bottom: 32px; }
  .author-bio { margin-top: 48px; }
  .subpage .more-posts { padding-top: 64px !important; }
}

/* Leesstijl: intro, hoofdstukken en paragrafen overal gelijk */
.prose { font-size: 18px; line-height: 1.7; }
.prose > * + * { margin-top: 20px; }
.prose .prose-lead { font-size: 21px; line-height: 1.55; font-weight: 500; color: var(--foreground); letter-spacing: -0.005em; }
.prose h2 { margin-top: 56px; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.prose h3 { margin-top: 36px; font-size: 20px; line-height: 1.3; font-weight: 600; }
.prose h2 + *, .prose h3 + * { margin-top: 12px; }
.prose ul { margin-top: 16px; }
.prose li + li { margin-top: 8px; }
.prose blockquote { margin-top: 32px; margin-bottom: 12px; }
.prose figure { margin-top: 32px; margin-bottom: 12px; }
@media (max-width: 560px) {
  .prose { font-size: 17px; }
  .prose .prose-lead { font-size: 19px; }
  .prose h2 { margin-top: 44px; font-size: 24px; }
  .prose h3 { font-size: 19px; }
}

/* Zo beginnen we: drie stappen als rustige tijdlijn. Geen kaarten, iconen of labels;
   alleen een nummer op een dunne lijn, titel en tekst. */
.flow-title { margin: 0 0 48px; }
.flow { list-style: none; margin: 0 0 calc(var(--sy) * 2); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.flow-step { position: relative; display: flex; flex-direction: column; gap: 8px; }
.flow-step::before { content: ""; position: absolute; top: 20px; left: 56px; right: -24px; height: 1px; background: var(--border); }
.flow-step:last-child::before { display: none; }
.flow-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 999px; background: var(--tint-blue); color: var(--primary-strong); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.flow-step b { font-size: var(--fs-item); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.flow-text { max-width: 34ch; font-size: var(--fs-body); line-height: 1.6; color: var(--text-secondary); }
@media (max-width: 860px) {
  .flow-title { margin-bottom: 32px; }
  .flow { grid-template-columns: 1fr; gap: 28px; margin-bottom: 64px; }
  .flow-step { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; row-gap: 4px; }
  .flow-num { grid-row: 1 / span 2; margin: 0; }
  .flow-step b { padding-top: 7px; }
  .flow-step::before { top: 48px; bottom: -24px; left: 20px; right: auto; width: 1px; height: auto; }
}
/* Blog: één uitgelicht artikel, beeld links en tekst rechts */
.blog-featured { display: block; }
.post-card.is-big { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 48px; }
.post-card.is-big .post-card-body { gap: 12px; }
.post-card.is-big .post-card-title { font-size: clamp(28px, 2.8vw, 38px); }
.post-card.is-big .post-card-excerpt { font-size: var(--fs-body); line-height: 1.6; }
.post-card.is-big .post-card-body::after { content: "Lees artikel →"; margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--primary-strong); }
@media (max-width: 860px) { .post-card.is-big { grid-template-columns: 1fr; gap: 20px; } }

/* =========================================================
   Werken bij v2: één kolom, één ritme, één kaartstijl
   Label (01 — …) → titel → tekst → inhoud. Secties 96px uit elkaar, gescheiden door een dunne lijn.
   ========================================================= */
.job-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.job-tags span { padding: 6px 12px; border-radius: 999px; border: var(--line); background: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.job-facts { margin-top: 40px; }
.job-facts dd { font-size: 16px; }

.job-section { display: block; padding: 96px 0; border-top: var(--line); }
.job-section:first-child { padding-top: 32px; border-top: 0; }
.job-label { margin: 0 0 12px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--primary-strong); }
.job-title { margin: 0; max-width: 22ch; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.job-text { max-width: 680px; margin-top: 20px; }
.job-text p { margin: 0; font-size: 18px; line-height: 1.7; color: var(--text-body); }
.job-text p + p { margin-top: 16px; }
.job-section > .job-cards, .job-section > .job-flow, .job-section > .job-numbered, .job-section > .job-checks, .job-section > .job-note { margin-top: 40px; }
.job-list-title { margin: 48px 0 0; font-size: var(--fs-item); font-weight: 600; letter-spacing: -0.01em; }
.job-list-title + * { margin-top: 16px !important; }
.job-after { max-width: 680px; margin: 32px 0 0; font-size: 18px; line-height: 1.7; color: var(--text-body); }

/* Kaarten: wit, dunne lijn, zelfde padding. Labels in hoofdletters worden een kleine eyebrow. */
.job-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.job-cards.is-2 { grid-template-columns: repeat(2, 1fr); }
.job-cards.is-5 { grid-template-columns: repeat(6, 1fr); }
.job-cards.is-5 li { grid-column: span 2; }
.job-cards.is-5 li:nth-child(4), .job-cards.is-5 li:nth-child(5) { grid-column: span 3; }
.job-cards li { display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: var(--r-card); border: var(--line); background: #fff; }
.job-cards b { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.job-cards span { font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.job-cards.is-caps b { font-size: 13px; letter-spacing: 0.08em; color: var(--primary-strong); }
.job-cards.is-caps span { color: var(--text-body); }

/* Hoe de rol zich ontwikkelt: dezelfde tijdlijn als "Zo beginnen we", met de tijd als label */
.job-flow { margin-bottom: 0; }
.flow-when { align-self: flex-start; margin-bottom: 16px; padding: 6px 12px; border-radius: 999px; background: var(--tint-blue); color: var(--primary-strong); font-size: 14px; font-weight: 600; }
.job-flow .flow-step::before { top: 16px; left: 120px; }

.job-note { max-width: 680px; padding: 24px 28px; border-radius: var(--r-card); background: var(--info-subtle); border: var(--line); font-size: 18px; line-height: 1.6; color: var(--text-body); }
.job-note b { display: block; margin-bottom: 4px; color: var(--foreground); font-weight: 600; }
.job-numbered { max-width: 680px; }
.job-numbered li { padding: 18px 0; font-size: 18px; }
.job-numbered li:first-child { border-top: var(--line); }
.job-checks { max-width: 680px; }
.job-checks li { font-size: 18px; }
.job-stack { max-width: 680px; }
.job-stack > p:not(.job-after) { margin: 16px 0 0; }
.job-stack .job-after { margin-top: 20px; font-size: 16px; color: var(--text-secondary); }

.job-banner .job-label { margin-bottom: 12px; }
.job-banner .start-copy > p:not(.job-label) { margin: 0 0 12px; }

/* Vaste balk onderaan */
.job-bar { position: fixed; left: 50%; bottom: 16px; z-index: 30; display: flex; align-items: center; gap: 24px; width: min(880px, calc(100% - 32px)); padding: 10px 10px 10px 24px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: var(--line); box-shadow: var(--shadow-float);
  transform: translate(-50%, 140%); transition: transform var(--dur-base) var(--ease-out); }
.job-bar.is-on { transform: translate(-50%, 0); }
.job-bar-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.job-bar-text b { font-size: 15px; font-weight: 600; }
.job-bar-text small { font-size: 13px; color: var(--muted-foreground); }
.job-bar-pay { font-size: 15px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.job-bar .btn { min-height: 44px; padding: 0 22px; font-size: 15px; }

@media (max-width: 960px) {
  .job-section { padding: 64px 0; }
  .job-cards, .job-cards.is-2, .job-cards.is-5 { grid-template-columns: 1fr; }
  .job-cards.is-5 li, .job-cards.is-5 li:nth-child(4), .job-cards.is-5 li:nth-child(5) { grid-column: auto; }
}
@media (max-width: 860px) {
  .job-flow .flow-step { grid-template-columns: 1fr; }
  .job-flow .flow-step::before { display: none; }
  .flow-when { margin-bottom: 4px; }
  .job-flow .flow-step b { padding-top: 0; }
}
@media (max-width: 560px) {
  .job-section { padding: 48px 0; }
  .job-cards li { padding: 20px; }
  .job-text p, .job-after, .job-numbered li, .job-checks li, .job-note { font-size: 17px; }
  .job-note { padding: 20px; }
  .job-bar { gap: 12px; padding: 8px 8px 8px 18px; }
  .job-bar-pay, .job-bar-text small { display: none; }
  .job-bar-text b { font-size: 14px; }
}

/* =========================================================
   Wat bespaar je? v2: invoer links, resultaat rechts
   ========================================================= */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.calc-input, .calc-result { display: flex; flex-direction: column; border-radius: var(--r-lg); border: var(--line); padding: 40px; }
.calc-input { background: #fff; gap: 20px; }
.calc-q { font-size: var(--fs-item); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.calc-stepper { display: flex; align-items: center; gap: 12px; }
.calc-stepper button { flex: none; width: 52px; height: 52px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--foreground); font: inherit; font-size: 24px; line-height: 1; cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast); }
.calc-stepper button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-strong); }
.calc-stepper button:disabled { opacity: 0.4; cursor: default; }
.calc-field { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 10px; min-height: 72px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--input); background: #fff; }
.calc-field:focus-within { border-color: var(--primary); outline: 3px solid rgba(50, 136, 244, 0.25); }
.calc-field input { width: 3.2ch; border: 0; padding: 12px 0; background: transparent; font: inherit; font-size: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--foreground); text-align: right; font-variant-numeric: tabular-nums; outline: none; }
.calc-field small { font-size: 16px; color: var(--text-secondary); }
.calc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 12px 0 0; border-radius: 99px; outline-offset: 8px; background: linear-gradient(90deg, var(--primary) var(--p), #e6eef9 var(--p)); }
.calc-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 999px; background: #fff; border: 2px solid var(--primary); box-shadow: 0 4px 12px rgba(3, 61, 127, 0.18); cursor: grab; }
.calc-slider::-moz-range-thumb { width: 26px; height: 26px; border-radius: 999px; background: #fff; border: 2px solid var(--primary); box-shadow: 0 4px 12px rgba(3, 61, 127, 0.18); cursor: grab; }
.calc-scale { display: flex; justify-content: space-between; margin-top: -8px; font-size: 13px; color: var(--muted-foreground); }
.calc-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.calc-presets button { min-width: 56px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--text-secondary); font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.calc-presets button:hover { border-color: var(--primary); color: var(--primary-strong); }
.calc-presets button.is-on { background: var(--tint-blue); border-color: transparent; color: var(--primary-strong); }

/* Resultaat in dezelfde zachte lucht als de banner: donkere tekst, bedrag in het blauw */
.calc-result { gap: 8px; background:
  radial-gradient(60% 70% at 100% 100%, rgba(253, 186, 116, 0.35), transparent 70%),
  radial-gradient(60% 70% at 0% 0%, rgba(167, 199, 255, 0.5), transparent 70%),
  linear-gradient(160deg, #eef5ff 0%, #e4efff 60%, #fff3e6 100%); }
.calc-label { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.calc-amount { font-size: clamp(48px, 6vw, 76px); line-height: 1; font-weight: 700; letter-spacing: -0.04em; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.calc-per { font-size: 16px; color: var(--text-secondary); }
.calc-basis { margin: 24px 0 0; padding-top: 24px; border-top: 1px solid rgba(15, 23, 42, 0.08); font-size: var(--fs-body); line-height: 1.6; color: var(--text-body); }
.calc-basis b { color: var(--foreground); font-weight: 600; }
.calc-cta { align-self: flex-start; margin-top: auto; }
.calc-basis + .calc-cta { margin-top: 24px; }
@media (max-width: 860px) {
  .calc { grid-template-columns: 1fr; }
  .calc-result { order: -1; }
}
@media (max-width: 560px) {
  .calc-input, .calc-result { padding: 24px 20px; }
  .calc-stepper button { width: 48px; height: 48px; }
  .calc-field { min-height: 64px; }
  .calc-field input { font-size: 34px; }
  .calc-cta { align-self: stretch; }
}
/* Wat bespaar je? v3: één witte kaart, twee helften gescheiden door een lijn; geen verloop (de banner eronder heeft er al een) */
.calc { grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--r-lg); border: var(--line); background: #fff; box-shadow: var(--shadow-soft); overflow: hidden; }
.calc-input, .calc-result { border: 0; border-radius: 0; padding: 48px; background: #fff; justify-content: center; }
.calc-input { gap: 24px; }
.calc-result { gap: 8px; border-left: var(--line); }
.calc-field { justify-content: flex-start; min-height: 0; padding: 0 0 8px; border: 0; border-bottom: 2px solid var(--border); border-radius: 0; gap: 12px; }
.calc-field:focus-within { outline: none; border-bottom-color: var(--primary); }
.calc-field input { width: 3.2ch; padding: 0; font-size: 56px; text-align: left; }
.calc-field small { font-size: 18px; }
.calc-slider { margin-top: 8px; }
.calc-amount { color: var(--primary-strong); }
.calc-basis { margin-top: 20px; padding-top: 20px; border-top: var(--line); }
.calc-basis + .calc-cta { margin-top: 28px; }
@media (max-width: 860px) {
  .calc { grid-template-columns: 1fr; }
  .calc-result { border-left: 0; border-bottom: var(--line); }
}
@media (max-width: 560px) {
  .calc-input, .calc-result { padding: 28px 20px; }
  .calc-field input { font-size: 44px; }
}
@media (max-width: 860px) {
  .calc-result { order: 0; border-bottom: 0; border-top: var(--line); }
}

/* =========================================================
   Wat bespaar je? v4: één zin als rekenmachine
   "Met [50] medewerkers bespaar je / € 45.000 / per jaar", schuif eronder, één knop.
   ========================================================= */
.calc2 { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 72px 48px 64px; border-radius: var(--r-lg); background:
  radial-gradient(50% 60% at 92% 100%, rgba(253, 186, 116, 0.38), transparent 70%),
  radial-gradient(45% 60% at 6% 0%, rgba(167, 199, 255, 0.55), transparent 70%),
  linear-gradient(160deg, #eef5ff 0%, #e4efff 55%, #fff3e6 100%); }
.calc2-sentence { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 14px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; color: var(--foreground); }
.calc2-field { display: inline-flex; border-bottom: 3px solid var(--primary); transition: border-color var(--dur-fast); }
.calc2-field input { width: calc(var(--ch) * 1ch + 0.3ch); min-width: 1.3ch; padding: 0 2px; border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--primary-strong); text-align: center; font-variant-numeric: tabular-nums; outline: none; }
.calc2-field:focus-within { border-bottom-color: var(--primary-dark); }
.calc2-amount { margin-top: 20px; font-size: clamp(64px, 10vw, 128px); line-height: 0.95; font-weight: 700; letter-spacing: -0.05em; color: var(--foreground); font-variant-numeric: tabular-nums; }
.calc2-per { margin: 12px 0 0; font-size: var(--fs-lead); color: var(--text-secondary); }
.calc2-slider { width: min(560px, 100%); margin-top: 48px; display: flex; flex-direction: column; gap: 12px; }
.calc2-slider .calc-slider { margin: 0; background: linear-gradient(90deg, var(--primary) var(--p), rgba(255, 255, 255, 0.85) var(--p)); }
.calc2-slider .calc-scale { margin: 0; }
.calc2-basis { max-width: 46ch; margin: 40px 0 28px; font-size: var(--fs-body); line-height: 1.6; color: var(--text-secondary); }
.calc2-basis b { color: var(--foreground); font-weight: 600; }
.calc-page { padding-bottom: 96px !important; }
@media (max-width: 560px) {
  .calc2 { padding: 48px 20px 40px; border-radius: var(--r-card); }
  .calc2-sentence { gap: 0 10px; }
  .calc2-amount { margin-top: 16px; }
  .calc2-slider { margin-top: 36px; }
  .calc2 .btn { align-self: stretch; }
  .calc-page { padding-bottom: 64px !important; }
}

/* =========================================================
   Werken bij v3: eenvoudig. Geen kaders, pillen of iconen; typografie, witruimte en dunne lijnen.
   Elke sectie: links het label, rechts titel en inhoud.
   ========================================================= */
.job-tags { display: block; margin: 16px 0 0; font-size: 15px; font-weight: 500; color: var(--muted-foreground); }
.job-facts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 48px; border: 0; border-top: var(--line); border-radius: 0; background: none; overflow: visible; }
.job-facts > div { padding: 20px 24px 0 0; background: none; }
.job-facts dd { font-size: 16px; }

.job-section { display: grid; grid-template-columns: 220px 1fr; column-gap: 48px; align-items: start; padding: 80px 0; }
.job-section > * { grid-column: 2; }
.job-section > .job-label { grid-column: 1; grid-row: 1 / span 20; margin: 6px 0 0; color: var(--muted-foreground); font-weight: 500; }
.job-title { font-size: clamp(28px, 2.8vw, 36px); max-width: 24ch; }

/* Kaarten worden tekstkolommen met een dunne lijn erboven */
.job-cards, .job-cards.is-2, .job-cards.is-5 { gap: 32px 40px; }
.job-cards li { padding: 20px 0 0; border: 0; border-top: var(--line); border-radius: 0; background: none; }
.job-cards.is-5 { grid-template-columns: repeat(3, 1fr); }
.job-cards.is-5 li, .job-cards.is-5 li:nth-child(4), .job-cards.is-5 li:nth-child(5) { grid-column: auto; }
.job-cards b { font-size: 17px; }
.job-cards span { font-size: 16px; }
.job-cards.is-caps b { font-size: 13px; }

/* Tijdlijn zonder pillen en lijnen: tijd als klein label */
.job-flow { gap: 32px 40px; }
.job-flow .flow-step { padding-top: 20px; border-top: var(--line); }
.job-flow .flow-step::before { display: none; }
.flow-when { margin-bottom: 4px; padding: 0; background: none; border-radius: 0; font-size: 14px; font-weight: 600; color: var(--primary-strong); }
.job-flow .flow-step b { font-size: 17px; }
.job-flow .flow-text { font-size: 16px; }

.job-note { padding: 0; border: 0; border-radius: 0; background: none; }
.job-checks li { padding: 10px 0 10px 20px; }
.job-checks li::before { top: 22px; width: 6px; height: 6px; background: var(--primary); }
.job-numbered li { gap: 16px; }
.job-stack-list { margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.job-stack-list > div { display: grid; grid-template-columns: 80px 1fr; gap: 16px; font-size: 17px; }
.job-stack-list dt { color: var(--muted-foreground); }
.job-stack-list dd { margin: 0; color: var(--text-body); }

@media (max-width: 960px) {
  .job-facts { grid-template-columns: repeat(2, 1fr); }
  .job-section { grid-template-columns: 1fr; padding: 56px 0; }
  .job-section > .job-label { grid-column: 1; grid-row: auto; margin: 0 0 12px; }
  .job-section > * { grid-column: 1; }
  .job-cards.is-5 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .job-section { padding: 44px 0; }
  .job-cards li { padding-top: 16px; }
  .job-facts > div:last-child { grid-column: 1 / -1; }
}
.job-section { row-gap: 0; }
.job-section > .job-label { grid-row: 1 / span 12; }

/* Contact v2: zelfde vlak als "Wat bespaar je?" (zachte lucht, --r-lg), formulier als witte kaart, info ernaast op één lijn */
.contact-grid { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; padding: 48px; border-radius: var(--r-lg); background:
  radial-gradient(50% 60% at 92% 100%, rgba(253, 186, 116, 0.38), transparent 70%),
  radial-gradient(45% 60% at 6% 0%, rgba(167, 199, 255, 0.55), transparent 70%),
  linear-gradient(160deg, #eef5ff 0%, #e4efff 55%, #fff3e6 100%); }
.contact-card { padding: 32px; border: 0; box-shadow: var(--shadow-soft); border-radius: var(--r-card); }
.contact-side { gap: 28px; padding-top: 8px; }
.contact-people { flex-direction: column; align-items: flex-start; gap: 12px; }
.contact-people img { width: 180px; }
.contact-people figcaption { font-size: var(--fs-item); }
.contact-facts { padding-top: 24px; border-top: 1px solid rgba(15, 23, 42, 0.08); gap: 18px; }
.contact-facts a { text-underline-offset: 3px; }
.contact-page { padding-bottom: 96px !important; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px) {
  .contact-grid { padding: 16px; border-radius: var(--r-card); }
  .contact-card { padding: 20px; }
  .contact-side { padding: 8px 8px 16px; }
  .contact-page { padding-bottom: 64px !important; }
}

/* Werken bij v4: één kolom van 760px. Label als eyebrow boven de titel; kaarten en stappen
   worden rijen (titel links, tekst rechts) gescheiden door dunne lijnen. */
.job .container { max-width: var(--container); }
.job-section { display: block; max-width: 760px; padding: 80px 0; }
.job-section:first-child { padding-top: 32px; }
.job-section > .job-label { margin: 0 0 12px; color: var(--primary-strong); font-weight: 600; }
.job-title { max-width: 22ch; }
.job-section > .job-cards, .job-section > .job-flow { margin-top: 32px; }

.job-cards, .job-cards.is-2, .job-cards.is-5, .job-flow { display: flex; flex-direction: column; gap: 0; border-bottom: var(--line); }
.job-cards li, .job-flow .flow-step { display: grid; grid-template-columns: 220px 1fr; column-gap: 32px; row-gap: 4px; padding: 20px 0; border-top: var(--line); }
.job-cards b, .job-flow .flow-step b { font-size: 17px; line-height: 1.45; }
.job-cards span, .job-flow .flow-text { max-width: none; font-size: 17px; line-height: 1.6; }
.job-flow .flow-step { grid-template-columns: 220px 1fr; }
.job-flow .flow-when { grid-column: 1; grid-row: 1; margin: 0; }
.job-flow .flow-step b { grid-column: 1; grid-row: 2; }
.job-flow .flow-text { grid-column: 2; grid-row: 1 / span 2; }
.job-cards.is-caps b { padding-top: 3px; }
@media (max-width: 960px) {
  .job-section { padding: 56px 0; }
}
@media (max-width: 560px) {
  .job-section { padding: 44px 0; }
  .job-cards li, .job-flow .flow-step { grid-template-columns: 1fr; padding: 16px 0; }
  .job-flow .flow-when, .job-flow .flow-step b, .job-flow .flow-text { grid-column: 1; grid-row: auto; }
}
.job-section .job-text, .job-section .job-numbered, .job-section .job-checks, .job-section .job-note, .job-section .job-after, .job-section .job-stack { max-width: none; }
/* Contact v3: in het vlak alleen het formulier en Ferdi en Jesse; de contactgegevens als rij eronder */
.contact-grid { padding-bottom: 0; align-items: end; }
.contact-card { margin-bottom: 48px; }
.contact-side { align-self: end; padding: 0; }
.contact-people { position: relative; align-items: center; margin: 0 auto; }
.contact-people img { display: block; width: min(380px, 100%); }
.contact-people figcaption { position: absolute; left: 0; bottom: 24px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-soft); font-size: 15px; }
.contact-people figcaption small { font-size: 13px; }
.contact-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 48px; margin: 40px 0 0; padding: 0 48px; border-top: 0; }
@media (max-width: 960px) {
  .contact-grid { align-items: stretch; }
  .contact-card { margin-bottom: 0; }
  .contact-people img { width: min(300px, 80%); margin: 0 auto; }
}
@media (max-width: 560px) {
  .contact-grid { padding-bottom: 0; }
  .contact-facts { grid-template-columns: 1fr; padding: 0 8px; margin-top: 32px; }
}
/* Werken bij: "Open rol" als pil met een groen bolletje (zoals op dimpr.nl), daaronder de kicker */
.page-eyebrow:has(.job-pill) { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; color: inherit; }
.job-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(52, 211, 153, 0.45); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); font-size: 14px; font-weight: 600; color: var(--foreground); }
.job-pill i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25); animation: job-pulse 2s var(--ease-in-out) infinite; }
@keyframes job-pulse { 50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.08); } }
@media (prefers-reduced-motion: reduce) { .job-pill i { animation: none; } }
.job-kicker { font-size: 18px; font-weight: 600; color: var(--primary-strong); }

/* Contact v4: één witte kaart in twee helften. Links het formulier zonder extra kader,
   rechts Ferdi en Jesse op het zachte quote-verloop. Contactgegevens eronder. */
.contact-grid { grid-template-columns: 1fr 1fr; gap: 0; padding: 0; align-items: stretch; border-radius: var(--r-lg); border: var(--line); background: #fff; box-shadow: var(--shadow-soft); overflow: hidden; }
.contact-card { margin: 0; padding: 48px; border-radius: 0; box-shadow: none; background: none; }
.contact-form { gap: 20px; }
.contact-form label { font-size: 14px; font-weight: 600; color: var(--foreground); }
.contact-form input, .contact-form textarea { border-color: var(--border); background: #fbfcfe; }
.contact-side { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; padding: 48px 48px 0; border-left: var(--line);
  background: radial-gradient(80% 60% at 100% 100%, rgba(253, 186, 116, 0.28), transparent 70%), linear-gradient(160deg, #f1f6ff 0%, #f7f9fc 60%, #fbf8f4 100%); }
.contact-people { display: flex; flex-direction: column; align-items: stretch; flex: 1; margin: 0; }
.contact-people figcaption { position: static; order: -1; padding: 0; background: none; box-shadow: none; border-radius: 0; font-size: var(--fs-item); font-weight: 600; letter-spacing: -0.01em; }
.contact-people figcaption small { margin-top: 2px; font-size: 15px; font-weight: 400; color: var(--text-secondary); }
.contact-people img { width: min(360px, 90%); margin: auto auto 0; padding-top: 32px; }
.contact-facts { padding: 0 48px; margin-top: 32px; }
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-side { border-left: 0; border-top: var(--line); padding: 32px 32px 0; }
  .contact-people img { width: min(300px, 80%); }
}
@media (max-width: 560px) {
  .contact-card { padding: 24px 20px; }
  .contact-side { padding: 24px 20px 0; }
  .contact-facts { padding: 0 4px; }
}
/* Zo beginnen we: geen verbindingslijnen tussen de nummers */
.flow-step::before { display: none !important; }

/* Onderste stuk van de homepage: meer ruimte tussen de secties (176px desktop, 112px mobiel),
   zodat elke sectie als eigen moment leest. Het bovenste verhaal blijft zoals het is. */
#sanne-nu, #week, #resultaten, #vragen, #start { padding-top: 88px !important; padding-bottom: 88px !important; }
.reviews-head { margin-top: 112px; }
@media (max-width: 560px) {
  #sanne-nu, #week, #resultaten, #vragen, #start { padding-top: 56px !important; padding-bottom: 56px !important; }
  .reviews-head { margin-top: 72px; }
}
.page-actions { gap: 12px; }
.page-actions .btn { gap: 8px; }

/* "Werken bij" opent eerst een dropdown met de open rollen */
.nav-drop { position: relative; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--text-body); cursor: pointer; }
.nav-drop-btn:hover, .nav-drop-btn.is-current, .nav-drop.is-open .nav-drop-btn { color: var(--foreground); }
.nav-drop-btn svg { transition: transform var(--dur-fast) var(--ease-out); }
.nav-drop.is-open .nav-drop-btn svg { transform: rotate(180deg); }
.nav-drop-panel { position: absolute; top: calc(100% + 20px); left: 50%; width: 300px; padding: 12px; border-radius: 20px; border: var(--line); background: #fff; box-shadow: var(--shadow-float);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast); }
.nav-drop.is-open .nav-drop-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-drop-panel small { display: block; padding: 4px 12px 8px; font-size: 13px; font-weight: 600; color: var(--muted-foreground); }
.nav-drop-panel a { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; text-decoration: none; }
.nav-drop-panel a:hover { background: var(--info-subtle); }
.nav-drop-panel b { font-size: 15px; font-weight: 600; color: var(--foreground); }
.nav-drop-panel span { font-size: 13px; font-weight: 400; color: var(--muted-foreground); }

/* Mobiel menu: "Werken bij" klapt uit */
.menu-sub > button { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0; border: 0; border-bottom: 1px solid rgba(15, 23, 42, 0.08); background: none; font: inherit; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); cursor: pointer; text-align: left; }
.menu-sub > button span { font-size: 22px; font-weight: 400; color: var(--muted-foreground); }
.menu-sub ul { list-style: none; margin: 0; padding: 4px 0 8px; border-bottom: 1px solid rgba(15, 23, 42, 0.08); }
.menu-sub ul a { min-height: 0; padding: 12px 0 12px 16px; border-bottom: 0; font-size: 17px; }
.menu-sub ul a > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.menu-sub ul a b { font-weight: 600; }
.menu-sub ul a small { font-size: 14px; font-weight: 400; color: var(--muted-foreground); letter-spacing: 0; }
.menu-sub ul a > span:first-child { font-size: 17px; color: var(--foreground); }
@media (max-width: 1100px) { .nav-drop { display: none; } }

/* Mobiel: niets mag meer aflopen. Actietitels en labels in de stapkaartjes mogen afbreken
   (op desktop past alles nog steeds op één regel). */
.sc-action > *, .sc-from > *, .sc-head > * { min-width: 0; }
.sc-action b { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; text-wrap: balance; }
.sc-label { overflow-wrap: anywhere; }

/* Banner: op mobiel de knop over de volle breedte en meer ruimte tot de foto */
@media (max-width: 560px) {
  .start-banner-cta { align-self: stretch !important; width: 100%; }
  .start-founders { margin-top: 40px !important; }
}
/* Heel smalle telefoons: "Kennismaken" past niet goed naast logo en menu; dan staat hij alleen in het menu */
@media (max-width: 359px) { .nav-links > .btn { display: none; } }

/* Kennismaken-modal op mobiel: bovenin één rustige rij (Ferdi en Jesse als rond portret + naam),
   daaronder de drie punten onder elkaar. Niets loopt meer onder de sluitknop of buiten beeld. */
@media (max-width: 760px) {
  .modal-side { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 16px !important; padding: 28px 64px 20px 20px !important; overflow: visible !important; }
  .modal-people { order: -1; position: static !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; margin: 0 !important; }
  .modal-side .modal-people .modal-founders { flex: none; width: 56px !important; height: 56px !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border-radius: 999px !important; object-fit: cover; object-position: 50% 8%; background: #fff; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(3, 61, 127, 0.12); }
  .modal-people figcaption { position: static !important; transform: none !important; display: flex; flex-direction: column; min-width: 0; padding: 0 !important; background: none !important; box-shadow: none !important; backdrop-filter: none !important; font-size: 16px !important; font-weight: 600; white-space: normal; }
  .modal-people figcaption small { font-size: 13px !important; font-weight: 400; color: var(--text-secondary); }
  .modal-facts { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 8px !important; padding: 0 !important; margin: 0; }
  .modal-facts li { font-size: 14px !important; white-space: normal; }
}

/* =========================================================
   Footer: warm beige vlak (zoals het verhaal van Sanne), merk links, drie kolommen rechts
   ========================================================= */
.footer { padding: 80px var(--gutter) 32px; border-top: 0; background: #faf8f4; }
.footer .container { display: block; }
.footer-top { display: grid; grid-template-columns: 1.2fr 2fr; gap: 64px; padding-bottom: 56px; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.footer-brand img { display: block; height: 32px; width: auto; }
.footer-brand p { margin: 0; max-width: 30ch; font-size: var(--fs-item); line-height: 1.35; font-weight: 600; letter-spacing: -0.015em; color: var(--foreground); }
.footer-brand .btn { min-height: 44px; padding: 0 22px; font-size: 15px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-cols h2 { margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--muted-foreground); }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.4; color: var(--text-body); }
.footer-cols a { color: var(--foreground); text-decoration: none; }
.footer-cols a:hover { color: var(--primary-strong); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 24px; border-top: 1px solid rgba(15, 23, 42, 0.08); font-size: 14px; color: var(--muted-foreground); }
.footer-bottom small { font-size: 14px; }
.footer-bottom span { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-bottom a { color: var(--muted-foreground); text-decoration: none; }
.footer-bottom a:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 560px) {
  .footer { padding: 56px var(--gutter) 28px; }
  .footer-top { padding-bottom: 40px; gap: 40px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-brand .btn { align-self: stretch; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
.footer .footer-cols { display: grid; gap: 32px; }
@media (max-width: 560px) { .footer .footer-cols { gap: 32px 24px; } }
.footer .footer-cols a { display: inline; min-height: 0; padding: 0; line-height: 1.4; color: var(--foreground); }
.footer .footer-cols a:hover { color: var(--primary-strong); }

/* =========================================================
   Pixel-check mobiel
   ========================================================= */
/* Lange woorden in koppen ("verantwoordelijkheid", "Gebruiksvoorwaarden") mogen afbreken i.p.v. de pagina te verbreden */
/* Afbreken: woorden breken alleen af als ze anders niet passen (geen automatische streepjes op desktop) */
h1, h2, h3, .page-title, .h1, .h2, .job-title, .post-card-title { overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 400px) { .page-title, .post-head .page-title { hyphens: auto; -webkit-hyphens: auto; } }
@media (max-width: 560px) { .page-title { font-size: clamp(32px, 9.4vw, 40px); } .post-head .page-title { font-size: clamp(28px, 8.4vw, 36px); } }
/* Tikvlakken van minimaal 44px zonder dat de layout verschuift */
.nav-logo, .footer-brand > a:first-child { display: inline-block; padding: 7px 0; margin: -7px 0; }
.more-head .text-link, .faq-more { display: inline-flex; align-items: center; min-height: 44px; }

/* Week-rooster: dagen met een moment (wo, do) breder, het vrije weekend smaller,
   zodat "10 min" en "Jouw actie" overal op één regel passen en binnen hun kolom blijven */
.rota { grid-template-columns: 1.4fr 1.4fr 1fr 0.6fr 0.6fr !important; }
#week .moment-label { left: 5px !important; right: 5px !important; width: auto !important; max-width: none !important; white-space: nowrap; }
#week .moment-top { gap: 5px; }
#week .moment-label b { white-space: nowrap; }
@media (max-width: 560px) {
  #week .moment-label { left: 3px !important; right: 3px !important; padding: 6px !important; }
}
@media (max-width: 359px) { #week .moment-label { font-size: 11px !important; padding: 5px !important; } #week .moment-label b { font-size: 11px !important; } }

/* Tijdlijn: één ritme. Tussen elk element en de lijn 24px, boven én onder,
   of het element nu tekst of een afbeelding is. Titel → afbeelding blijft 40px (die horen bij elkaar). */
.tl-item { gap: 24px; padding-top: 24px; }
.tl-item.is-with + .tl-item .tl-seg, .tl-item.is-with + .tl-item.is-tail .tl-seg { margin-top: 0; }
.tl-visual { margin-top: 16px; }
.tl-item.is-tail { padding-top: 24px; }
/* Week-rooster met vier dagen (wo t/m za): de dagen met een moment iets breder */
.rota { grid-template-columns: 1.3fr 1.3fr 1fr 0.8fr !important; }

/* Mooie regelval: koppen in gelijkmatige regels, geen los woord op de laatste regel van een alinea */
h1, h2, h3, .h1, .h2, .page-title, .job-title, .tm-item b, .tl-step-title, .post-card-title, .start-banner h2, .calc2-sentence { text-wrap: balance; }
p, li, .lead, .page-lead, .tl-step-sub, .faq-answer, .prose p, .job-text p, .post-card-excerpt, .sc-label { text-wrap: pretty; }
.faq-btn span:first-child { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; text-wrap: balance; }
/* "Hier begint Dimpr": na de onthulling gewone tekst (geen filter/transform), anders blijft Safari op iOS hem soms zacht renderen */
.tl-item.is-turn .tl-turn-title.is-clear { filter: none !important; transform: none !important; transition: none; }

/* Scroll-aanwijzing: één rustige pil in de stijl van de zwevende menubalk.
   Mobiel: blauw rondje met een pijltje dat zacht naar beneden beweegt. Desktop: een klein muisje (omlijnd, met scrollwieltje) in dezelfde pil. */
.tm-scroll { flex-direction: row; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(3, 61, 127, 0.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--foreground); font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.tm-scroll:hover { color: var(--primary-strong); }
.tm-mouse { width: 18px; height: 28px; margin: 0 0 0 8px; border: 1.5px solid var(--primary-strong); border-radius: 9px; padding: 4px 0 0; align-items: flex-start; background: none; }
.tm-mouse i { width: 2.5px; height: 6px; background: var(--primary-strong); }
.tm-swipe { width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 999px; background: var(--gradient-primary); color: #fff; box-shadow: 0 4px 10px rgba(18, 119, 231, 0.3); }
@media (max-width: 560px) {
  .tm-swipe { display: inline-flex; animation: none !important; }
  .tm-swipe svg { width: 16px; height: 16px; animation: tmSwipe 1.6s ease-in-out infinite; }
  .tm-scroll:not(.is-hinting) .tm-swipe svg { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .tm-swipe svg, .tm-mouse i { animation: none !important; } }

/* Week-rooster: vier even brede dagen */
.rota { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 560px) {
  #week .moment-label { font-size: 11px !important; padding: 6px 5px !important; letter-spacing: -0.01em; }
  #week .moment-label b { font-size: 11px !important; }
}
@media (max-width: 359px) { #week .moment-label { white-space: normal !important; } #week .moment-label b { white-space: nowrap; } }

/* Mobiel: lange samenstellingen breken alleen af op hun vaste afbreekpunten (zie COMPOUNDS in app.jsx);
   andere te lange woorden breken als laatste redmiddel gewoon af in plaats van buiten beeld te lopen. */
@media (max-width: 560px) {
  .prose, .job-text, .job-after, .job-cards, .legal-body, .lead, .page-lead, .post-card-excerpt, .faq-answer, .contact-facts {
    hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word;
  }
}
/* Verbeteren doe je niet alleen (mobiel): de schaduw van de kaarten werd door de schuifrij afgeknipt (harde grijze rand).
   Ruimte binnen de rij voor de schaduw, met negatieve marge zodat de afstanden gelijk blijven. */
@media (max-width: 560px) {
  .layer-track { padding-top: 24px !important; padding-bottom: 40px !important; margin-top: -20px !important; margin-bottom: -28px !important; }
}

/* Header als horizon: van boven (lucht, blauw) naar beneden (warm beige), zonder losse vlekken.
   De hero loopt onderaan naadloos over in het beige van het verhaal van Sanne. */
.hero { background: linear-gradient(180deg, #cfe2fc 0%, #dce9fb 28%, #eaeff6 52%, #f6efe6 78%, #faf8f4 100%) !important; }
/* Subpagina's: dezelfde horizon, onderaan uitlopend in het wit van de pagina */
.page-head { background: linear-gradient(180deg, #d6e6fc 0%, #e4eefb 35%, #f3f1ef 72%, #ffffff 100%) !important; }

/* Reviews: vervaging aan de randen als overlay (geen mask-image op de scrollrij; dat laat Safari de kaarten soms even verbergen) */
.reviews, .reviews.fade-start, .reviews.fade-end { -webkit-mask-image: none !important; mask-image: none !important; }
.reviews-wrap { position: relative; }
.reviews-wrap::before, .reviews-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 96px; pointer-events: none; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.reviews-wrap::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); width: 72px; }
.reviews-wrap::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.reviews-wrap.fade-start::before, .reviews-wrap.fade-end::after { opacity: 1; }
@media (max-width: 560px) {
  .reviews-wrap { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
  .numbers .reviews-wrap .reviews { margin-left: 0 !important; margin-right: 0 !important; }
  .reviews-wrap::before { width: 24px; }
  .reviews-wrap::after { width: 32px; }
}

/* =========================================================
   Feedback 4 november
   ========================================================= */
/* Scherm 2: samenwerkingen. Titel en zin links; rechts komt later een rij logo's (TRUST_LOGOS) */
.trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.trust-copy { max-width: 560px; }
.trust-title { margin: 0; font-size: var(--fs-item); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); }
.trust .trust-copy p { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
.trust-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.trust-logos img { display: block; height: 32px; width: auto; filter: grayscale(1); opacity: 0.7; }
@media (max-width: 560px) {
  .trust { gap: 20px; }
  .trust-logos { display: flex; gap: 16px 28px; }
  .trust-logos img { height: 26px; }
}
/* Scherm 6: rooster zonder tijden. Icoon en wat het is op één regel */
#week .moment-label b.moment-note { color: var(--foreground); font-weight: 600; font-size: 13px !important; }
#week .moment-top { gap: 6px; }
@media (max-width: 560px) {
  #week .moment-label b.moment-note { font-size: 11px !important; }
  #week .moment-icon { display: none; }
}
/* Scherm 7: drie cijfers; de uitgevoerde acties in een blauw vlak */
.stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch; gap: 0 24px; }
.stat-strip li { padding: 8px 28px 8px 0; border-left: 0 !important; }
.stat-strip li + li:not(.is-highlight) { padding-left: 28px; border-left: 1px solid rgba(15, 23, 42, 0.1) !important; }
.stat-strip li.is-highlight { padding: 28px 32px; border-radius: var(--r-card); background: var(--gradient-primary); box-shadow: 0 16px 40px rgba(18, 119, 231, 0.25); }
.stat-strip li.is-highlight strong { color: #fff; }
.stat-strip li.is-highlight span { color: rgba(255, 255, 255, 0.88); }
@media (max-width: 860px) {
  .stat-strip { grid-template-columns: 1fr 1fr !important; row-gap: 28px; }
  .stat-strip li.is-highlight { grid-column: 1 / -1; }
  .stat-strip li:nth-child(2) { padding-right: 0; }
}
@media (max-width: 560px) {
  .stat-strip li + li:not(.is-highlight) { padding-left: 16px; }
  .stat-strip li.is-highlight { padding: 22px 24px; }
}
/* Scherm 8: twee quotes vullen samen de breedte (desktop); geen avatar, alleen naam/rol */
@media (min-width: 861px) { .numbers .review { flex: 1 1 0 !important; min-width: 0; } }
.review-who > span { display: flex; flex-direction: column; gap: 2px; }
.review-who b { font-size: 16px; font-weight: 600; color: var(--foreground); }
.review-who small { font-size: 14px; color: var(--text-secondary); }
.review blockquote { quotes: none; }
/* Scherm 11: afsluitende banner met de echte foto van Ferdi en Jesse (geen uitsnede meer) */
.start-banner.is-photo { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; gap: 40px; min-height: 0; padding: 24px 24px 24px 56px !important; overflow: hidden; }
.start-banner.is-photo .start-copy { align-self: center; flex: none; padding: 32px 0; }
.start-photo { position: relative; margin: 0; min-height: 420px; border-radius: var(--r-card); overflow: hidden; }
.start-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }
.start-photo figcaption { position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(3, 61, 127, 0.14); font-size: 14px; }
.start-photo figcaption b { font-weight: 600; color: var(--foreground); }
.start-photo figcaption small { font-size: 13px; color: var(--text-secondary); }
@media (max-width: 960px) {
  .start-banner.is-photo { grid-template-columns: 1fr; gap: 24px; padding: 40px 24px 24px !important; }
  .start-banner.is-photo .start-copy { padding: 0; }
  .start-photo { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .start-banner.is-photo { padding: 32px 20px 20px !important; gap: 28px; }
  .start-photo figcaption { left: 12px; right: 12px; bottom: 12px; }
}
/* Hero-actiekaart: langere tekst, iets breder en zonder los woord op de laatste regel */
.action-body span { text-wrap: pretty; }

/* Scherm 2 (samenwerkingen) als bewust overgangsmoment: gecentreerd, titel tussen twee dunne lijnen,
   zin eronder in een smalle kolom. Later komt hier gecentreerd een rij logo's onder. */
.trust { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 28px; }
.trust-copy { max-width: 620px; display: flex; flex-direction: column; align-items: center; }
.trust-title { display: flex; align-items: center; gap: 16px; font-size: 18px; }
.trust-title::before, .trust-title::after { content: ""; width: 48px; height: 1px; background: rgba(15, 23, 42, 0.18); }
.trust .trust-copy p { max-width: 44ch; margin-top: 10px; text-wrap: balance; }
.trust-logos { justify-content: center; }
@media (max-width: 560px) {
  .trust-title { gap: 12px; font-size: 17px; }
  .trust-title::before, .trust-title::after { width: 24px; }
  .trust .trust-copy p { font-size: 15px; }
}
/* Hero-actiekaart breder, zodat de langere tekst in minder regels past en de kaart lager wordt */
.hero-float { width: 330px; }
@media (max-width: 860px) { .hero-float { width: 300px; } }
@media (max-width: 560px) { .hero-float { width: min(300px, calc(100% - 24px)) !important; } }
.stat-strip li.is-highlight strong { color: #fff !important; }
/* Rooster: icoon boven de tekst, zodat "Jouw actie" in elke kolombreedte past */
#week .moment-top { flex-direction: column; align-items: flex-start; gap: 6px; }
#week .moment-label { padding: 10px !important; white-space: nowrap; }
#week .moment-icon { width: 26px; height: 26px; }
@media (max-width: 560px) { #week .moment-label { padding: 6px 5px !important; } }
@media (max-width: 359px) { #week .moment-label, #week .moment-label b.moment-note { white-space: normal !important; } }
/* "Sanne valt uit." op één regel; alleen afbreken als het niet op het scherm past */
.tm-item.is-main { width: max-content; max-width: 92vw; white-space: normal; }
.tm-item.is-main b { text-wrap: balance; }
/* Hero-actiekaart compact: icoon links naast de tekst, hangt onder en naast de foto zodat de mensen vrij in beeld zijn */
.hero-float { width: 380px !important; left: -48px !important; bottom: -36px !important; }
.hero-float .action-card { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; row-gap: 6px; align-items: start; padding: 16px 18px !important; }
.hero-float .action-top { grid-row: 1 / span 2; }
.hero-float .action-icon { width: 52px !important; height: 52px !important; }
.hero-float .action-body { display: flex; flex-direction: column; gap: 4px; }
.hero-float .action-body b { font-size: 17px !important; line-height: 1.25; }
.hero-float .action-body span { font-size: 14px !important; line-height: 1.45; }
.hero-float .action-badges { grid-column: 2; }
@media (max-width: 960px) { .hero-float { left: 16px !important; } }
@media (max-width: 560px) {
  .hero-visual { margin-bottom: 96px !important; }
  .hero-float { left: 12px !important; right: 12px; width: auto !important; bottom: -84px !important; }
  .hero-float .action-card { grid-template-columns: 40px 1fr; column-gap: 12px; padding: 12px 14px !important; }
  .hero-float .action-icon { width: 40px !important; height: 40px !important; }
  .hero-float .action-body b { font-size: 16px !important; }
  .hero-float .action-body span { font-size: 14px !important; }
}
/* Hero-actiekaart: alleen links uitsteken als foto en tekst naast elkaar staan; anders binnen de foto blijven */
@media (max-width: 1099px) { .hero-float { left: 16px !important; } }
@media (max-width: 560px) { .hero-float { left: 12px !important; } }
/* Wat bespaar je? tot 10.000 medewerkers: bedrag tot € 9.000.000 moet ook op mobiel passen */
.calc2-amount { font-size: clamp(40px, 9vw, 120px) !important; white-space: nowrap; }
.calc2-slider .calc-scale span:nth-child(2), .calc2-slider .calc-scale span:nth-child(3) { color: var(--subtle); }
/* Labels onder de logaritmische schuif op hun echte plek: 100 op de helft, 1.000 op driekwart */
.calc2-slider .calc-scale { position: relative; display: block; height: 16px; }
.calc2-slider .calc-scale span { position: absolute; top: 0; white-space: nowrap; }
.calc2-slider .calc-scale span:nth-child(1) { left: 0; }
.calc2-slider .calc-scale span:nth-child(2) { left: 50%; transform: translateX(-50%); }
.calc2-slider .calc-scale span:nth-child(3) { left: 75%; transform: translateX(-50%); }
.calc2-slider .calc-scale span:nth-child(4) { right: 0; }
@media (max-width: 560px) { .calc2-slider .calc-scale span:nth-child(3) { display: none; } }

/* =========================================================
   Feedback 9 november
   ========================================================= */
/* Scherm 2: logo's onder de tekst, op één rustige rij. Wit van de logo's valt weg tegen het beige. */
.trust { gap: 32px; }
.trust-logos { gap: 24px 48px; max-width: 980px; }
.trust-logos img { height: var(--h, 40px); max-width: 160px; object-fit: contain; filter: none; opacity: 1; mix-blend-mode: multiply; }
@media (max-width: 560px) {
  .trust-logos { gap: 20px 28px; }
  .trust-logos img { height: calc(var(--h, 40px) * 0.72); }
}

/* Rooster: reflectie en actie als korte momenten. Dun streepje met een klein label, geen blok over de dienst. */
#week .moment-bar { height: 3px; border-radius: 2px; left: 8px; right: auto; width: 22px; }
#week .moment-label { left: 6px !important; right: auto !important; width: max-content !important; max-width: calc(100% - 10px) !important; padding: 3px 7px !important; border-radius: 999px; box-shadow: none; gap: 0; }
#week .moment-top { flex-direction: row; gap: 0; }
#week .moment-icon { display: none; }
#week .moment-label b.moment-note { font-size: 12px !important; line-height: 1.3; }
@media (max-width: 560px) {
  #week .moment-label { left: 4px !important; padding: 2px 5px !important; }
  #week .moment-label b.moment-note { font-size: 11px !important; }
}

/* Gespreksmodal: inhoud die niet past scrolt binnen het paneel in plaats van weg te vallen.
   dvh houdt het paneel binnen het zichtbare scherm als de adresbalk van de browser in beeld is. */
.modal-panel { overflow: hidden auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; max-height: calc(100dvh - 48px); }
@media (max-width: 760px) {
  .modal-panel { max-height: 92vh; max-height: 92dvh; }
  .modal-side, .modal-main { flex: none; }
}

/* Scroll-aanwijzing: met een muis alleen het muisje, het blauwe pijltje is er alleen voor touchscreens. */
@media (hover: hover) { .tm-swipe { display: none !important; } }

/* Hero: tekstlink zonder onderstreping naast de primaire knop; op mobiel gecentreerd eronder. */
.hero-ctas .text-link { align-self: center; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
@media (max-width: 560px) { .hero-ctas { justify-content: center; gap: 8px; } }

/* "Hoe werkt Dimpr?" landt precies op het begin van de vastgezette scène, zodat de scroll-aanwijzing in beeld is.
   De negatieve marge heft de scroll-padding-top van html (88px) op. */
.tm-stage { scroll-margin-top: -88px; }

/* Gespreksmodal: foutmelding en verzendstatus */
.modal-error { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.45; color: #b42318; }
.modal-error a { color: inherit; }
.modal-form .btn-primary:disabled { opacity: 0.7; cursor: default; }

/* Bevestiging na het versturen: in de modal een eigen kaart, op de contactpagina in de kaart zelf. */
.modal.is-sent .modal-panel { display: none; }
.modal-done { display: flex; flex-direction: column; align-items: center; text-align: center; }
.modal .modal-done { width: min(520px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 48px 40px 40px; border-radius: var(--r-lg); background: #fff; box-shadow: 0 24px 60px rgba(3, 61, 127, 0.14); }
.modal-done-check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 999px; background: #f3fbf3; border: 3px solid #cfe6d1; color: #14651f; box-shadow: 0 12px 32px rgba(20, 101, 31, 0.16), 0 0 0 12px rgba(20, 101, 31, 0.03); animation: modalDonePop var(--dur-slow) var(--ease-out) both; }
.modal-done-check path { stroke-dasharray: 1; animation: modalDoneDraw 0.4s var(--ease-out) 0.2s both; }
.modal-done-title { margin: 32px 0 0; font-size: clamp(28px, 4vw, 36px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--foreground); text-wrap: balance; outline: none; animation: modalDoneRise var(--dur-slow) var(--ease-out) 0.25s both; }
.modal-done-text { max-width: 420px; margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; animation: modalDoneRise var(--dur-slow) var(--ease-out) 0.35s both; }
.modal-done .btn { flex: none; margin-top: 32px; animation: modalDoneRise var(--dur-slow) var(--ease-out) 0.45s both; }
@keyframes modalDonePop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes modalDoneDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes modalDoneRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .modal .modal-done { width: 100%; max-height: 92dvh; padding: 40px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
  .modal-done .btn { width: 100%; }
}
/* Contactpagina: de foto ernaast wijkt, zodat alleen de bedankboodschap overblijft. */
.contact-grid:has(.modal-done) { grid-template-columns: 1fr; }
.contact-grid:has(.modal-done) .contact-side { display: none; }
.contact-card .modal-done { padding: 56px 0; }
.contact-card .modal-done-title { font-size: clamp(32px, 5vw, 48px); }
.contact-card .modal-done-text { max-width: 560px; }
@media (prefers-reduced-motion: reduce) { .modal-done-check, .modal-done-check path, .modal-done-title, .modal-done-text, .modal-done .btn { animation: none; } }

/* Onest wordt zelf gehost: sneller dan Google Fonts en er gaat geen IP-adres naar Google. */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/onest-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/onest-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/onest-symbols.woff2") format("woff2"); unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF; }

/* Gespreksmodal: sluitknop blijft in beeld bij scrollen; op mobiel dezelfde zijmarges als het bovenstuk. */
.modal-side { grid-column: 1; grid-row: 1; }
.modal-main { grid-column: 2; grid-row: 1; }
.modal-close { position: sticky; top: 16px; right: auto; grid-column: 1 / -1; grid-row: 1; align-self: start; justify-self: end; margin: 16px 16px 0 0; }
@media (max-width: 760px) {
  .modal-close { flex: none; align-self: flex-end; margin: 16px 16px -56px 0; }
  .modal-main { padding-left: 20px; padding-right: 20px; }
}
/* Hero: de tekstlink heeft dezelfde klikhoogte als de knop; de negatieve marge houdt de tekst op zijn plek. */
.hero-ctas .text-link { min-height: 54px; padding: 0 24px; margin-left: -24px; justify-content: center; border-radius: 999px; }
@media (max-width: 560px) { .hero-ctas .text-link { width: 100%; margin-left: 0; } }
/* Vacature: de tekstkolom staat gecentreerd in de pagina. */
.job-section { margin-inline: auto; }

/* Cookiemelding: kaartje rechtsonder, op mobiel over de volle breedte. Valt onder de gespreksmodal. */
.cookie-notice { position: fixed; right: 16px; bottom: 16px; z-index: 45; width: min(360px, calc(100vw - 32px)); padding: 20px; border-radius: var(--r-card); border: var(--line); background: #fff; box-shadow: var(--shadow-float); animation: modalDoneRise var(--dur-base) var(--ease-out) both; }
.cookie-notice b { font-size: 15px; font-weight: 600; color: var(--foreground); }
.cookie-notice p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.cookie-notice a { color: inherit; }
.cookie-notice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.cookie-notice .btn { width: 100%; min-height: 44px; padding: 0 16px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .cookie-notice { animation: none; } }

/* Wolken: een geanimeerde filter wordt elk frame opnieuw berekend en laat het scrollen haperen.
   De vervaging staat nu per laag vast; alleen beweging en doorzichtigheid animeren, en die doet de grafische kaart. */
.cloud.is-back { --cloud-blur: 5px; }
.cloud.is-mid { --cloud-blur: 2px; }
.cloud.is-front { --cloud-blur: 1px; }
.cloud-cover .cloud { filter: blur(var(--cloud-blur)) drop-shadow(0 18px 28px rgba(3, 61, 127, 0.14)); will-change: transform, opacity; transition: transform 0.8s var(--ease), opacity 0.8s var(--ease); }
.mist { will-change: transform, opacity; }

/* Scrollscènes: de waarden komen al vloeiend uit JavaScript, dus geen CSS-overgangen die elk frame herstarten.
   Geen geanimeerde vervaging op tekst; lucht, wolken en tekst krijgen een eigen laag op de grafische kaart. */
.cloud-cover .cloud, .mist { transition: none; }
.tl-item.is-turn .tl-turn-title { filter: none; transform: none; transition: none; opacity: calc(0.35 + var(--sky, 0) * 0.65); will-change: opacity; }
.tl-item.is-turn .tl-turn-title.is-clear { opacity: 1; will-change: auto; }
.story-sky, .sky-band, .sun { will-change: opacity; }
.tm-item { will-change: transform, opacity; }

/* iOS: vaste balken blijven boven de home-balk en de scène past altijd tussen de Safari-balken. */
.job-bar, .cookie-notice { bottom: calc(16px + env(safe-area-inset-bottom)); }
.tm-sticky { height: 100vh; height: 100dvh; }
/* Touchscreens: de scroll-aanwijzing blijft boven de werkbalk van Safari. */
@media (hover: none) { .tm-scroll { bottom: calc(28px + env(safe-area-inset-bottom)); } }