/* Brusoflow — hero en oprichters in het donker (26 sept, besluit Wiebe).
   De rest van de site is licht. De volledige donkere laag staat bewaard in theme-donker.css
   maar wordt niet meer geladen. */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap");
.chapter--hero.hero--dark {
  background-color: #0B1328;
  background-image: radial-gradient(ellipse 60% 75% at 8% 40%, rgba(0, 102, 255, .22), transparent 62%);
}
.hero--dark .flow-hero__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-weight: 500;
  letter-spacing: .02em;
  color: #22C55E;
  display: inline-flex; align-items: center; gap: 10px;
}
.hero--dark .flow-hero__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 10px #22C55E; flex: none; }
.hero--dark h1 span {
  background: linear-gradient(90deg, #3B8BFF, #7DD3FC);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.hero--dark .btn--primary {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 30px rgba(0, 102, 255, .45);
  transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.hero--dark .btn--primary:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 40px rgba(0, 102, 255, .65); }
@media (prefers-reduced-motion: reduce) { .hero--dark .btn--primary { transition: none; } }

/* ── De oprichters: compacte zwarte band met alleen kop en foto's ── */
.chapter--founders {
  position: relative;
  background-color: #080D1E;
  background-image: radial-gradient(ellipse 70% 70% at 50% 100%, rgba(0, 102, 255, .28), transparent 65%), radial-gradient(ellipse 40% 40% at 8% 20%, rgba(59, 139, 255, .12), transparent 70%);
  padding-block: 48px 64px;
}
.chapter--founders .section-head { margin-bottom: 28px; }
.chapter--founders h2 { color: #fff; }
body[data-page="index"] .chapter--founders .section-head .eyebrow,
.chapter--founders .founders-intro,
.chapter--founders .founders-actions { display: none; }
.chapter--founders .founder-card { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 16px 40px rgba(0, 0, 0, .45); }
.chapter--founders::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(125, 211, 252, .25) 20%, rgba(125, 211, 252, .85) 50%, rgba(125, 211, 252, .25) 80%, transparent 100%);
  box-shadow: 0 0 12px rgba(125, 211, 252, .45);
}

/* ── Volgorde en kleuren home (26 sept, avond): rekensom Diepblauw, oprichters nacht na Wat je krijgt,
      werkwijze licht met Diepblauwe kaarten ── */
.chapter--calculation {
  background-color: #12306B;
  background-image: radial-gradient(ellipse 60% 75% at 8% 40%, rgba(59, 139, 255, .35), transparent 62%), radial-gradient(ellipse 45% 60% at 95% 85%, rgba(125, 211, 252, .14), transparent 60%);
  background-size: auto;
}
.chapter--calculation .calculator-panel { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }

.chapter--founders {
  background-color: #0B1328;
  background-image: radial-gradient(ellipse 60% 75% at 8% 40%, rgba(0, 102, 255, .22), transparent 62%), radial-gradient(ellipse 50% 60% at 50% 100%, rgba(0, 102, 255, .18), transparent 65%);
}

.chapter--method-dark {
  background-color: #EEF3FA;
  color: var(--body-c);
  background-image: none;
}
.chapter--method-dark .section-head .eyebrow { color: var(--primary); }
.chapter--method-dark .section-head .eyebrow::after { background: var(--primary); }
.chapter--method-dark .section-head h2 { color: var(--ink); }
.chapter--method-dark .rail__card {
  background: #12306B;
  background-image: radial-gradient(ellipse 80% 70% at 10% 0%, rgba(59, 139, 255, .30), transparent 65%);
  border: 1px solid rgba(125, 211, 252, .25);
  box-shadow: 0 16px 40px rgba(18, 48, 107, .25);
  color: #fff;
}
.chapter--method-dark .rail__card h3 { color: #fff; }
.chapter--method-dark .rail__card p { color: #DDE9FF; }
.chapter--method-dark .rail__item::after { background: rgba(18, 48, 107, .30); }
.chapter--method-dark .rail__number { background: #12306B; border-color: #12306B; color: #fff; }
.chapter--method-dark .rail__item--active .rail__number { background: var(--primary); border-color: var(--primary); }

/* Rekensom terug naar nachtblauw, met lichte stipjes */
.chapter--calculation {
  background-color: #0B1328;
  background-image:
    radial-gradient(circle, rgba(125, 211, 252, .22) 1px, transparent 1.5px),
    radial-gradient(ellipse 60% 75% at 8% 40%, rgba(0, 102, 255, .22), transparent 62%),
    radial-gradient(ellipse 45% 60% at 95% 85%, rgba(91, 157, 255, .10), transparent 60%);
  background-size: 22px 22px, auto, auto;
}
.chapter--calculation .calculator-panel { background: rgba(11, 19, 40, .55); border-color: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* stipjes gelijk aan kaart 03 van Het probleem */
.chapter--calculation {
  background-image:
    radial-gradient(circle, rgba(91, 157, 255, .18) 1px, transparent 1px),
    radial-gradient(ellipse 60% 75% at 8% 40%, rgba(0, 102, 255, .22), transparent 62%),
    radial-gradient(ellipse 45% 60% at 95% 85%, rgba(91, 157, 255, .10), transparent 60%);
  background-size: 18px 18px, auto, auto;
}

/* Rekensom: kop groter, tekst leesbaarder */
.chapter--calculation .calculator-label { font-size: .9375rem; color: #7DD3FC; margin-bottom: 20px; }
.chapter--calculation .calculator-copy h2 { font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1.04; letter-spacing: -.035em; max-width: 10ch; }
.chapter--calculation .calculator-intro { font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.55; color: #E2E8F0; margin: 28px 0 0; max-width: 34ch; }
.chapter--calculation .calculator-disclaimer { font-size: 1.0625rem; line-height: 1.55; color: #A8B2C2; margin-top: 32px; max-width: 36ch; }

/* ── De oprichters: verhaal terug, grotere sectie, strakkere foto's ── */
.chapter--founders { padding-block: 96px 104px; }
.chapter--founders .section-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px 64px;
  align-items: end; text-align: left; margin-bottom: 48px;
}
body[data-page="index"] .chapter--founders .section-head .eyebrow { display: flex; justify-content: flex-start; grid-column: 1; color: #5B9DFF; }
body[data-page="index"] .chapter--founders .section-head .eyebrow::after { display: none; }
.chapter--founders .section-head h2 { grid-column: 1; font-size: clamp(2.6rem, 4.6vw, 4rem); letter-spacing: -.035em; line-height: 1.02; margin: 0; }
.chapter--founders .founders-intro {
  display: block; grid-column: 2; grid-row: 1 / span 2; align-self: end;
  margin: 0; max-width: 46ch; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.6; color: #DDE9FF; text-wrap: pretty;
}
.chapter--founders .founder-grid { gap: 16px; }
.chapter--founders .founder-card {
  aspect-ratio: 4 / 5; border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 24px 60px rgba(0, 0, 0, .45);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.chapter--founders .founder-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(125, 211, 252, .45), 0 30px 70px rgba(0, 0, 0, .5), 0 0 40px rgba(0, 102, 255, .25); }
.chapter--founders .founder-card__photo img { object-position: 50% 18%; filter: saturate(.94) contrast(1.05); transition: transform 600ms var(--ease-out); }
.chapter--founders .founder-card:hover .founder-card__photo img { transform: scale(1.03); }
.chapter--founders .founder-card__photo::after { background: linear-gradient(180deg, rgba(11, 19, 40, 0) 45%, rgba(11, 19, 40, .55) 70%, rgba(11, 19, 40, .94) 100%); }
.chapter--founders .founder-card__body { padding: 0 24px 24px; }
.chapter--founders .founder-card__name { font-size: 1.625rem; margin-bottom: 6px; }
.chapter--founders .founder-card__name::after { content: ""; display: block; width: 28px; height: 2px; background: #7DD3FC; margin-top: 10px; box-shadow: 0 0 10px rgba(125, 211, 252, .6); }
.chapter--founders .founder-card__text { font-size: 1rem; color: rgba(255, 255, 255, .86); }
@media (max-width: 900px) {
  .chapter--founders .section-head { grid-template-columns: 1fr; }
  .chapter--founders .founders-intro { grid-column: 1; grid-row: auto; }
  .chapter--founders .founder-card { aspect-ratio: 1 / 1; }
}
@media (prefers-reduced-motion: reduce) { .chapter--founders .founder-card, .chapter--founders .founder-card__photo img { transition: none; } }
body[data-page="index"] .chapter--founders .section-head,
body[data-page="index"] .chapter--founders .section-head h2,
body[data-page="index"] .chapter--founders .founders-intro { text-align: left; }
body[data-page="index"] .chapter--founders .founders-intro { margin-inline: 0; }
body[data-page="index"] .chapter--founders .section-head h2,
body[data-page="index"] .chapter--founders .section-head .eyebrow { margin-inline: 0; max-width: none; justify-self: start; }

/* PROEF: nachtblauw een stap lichter. Terug naar hoe het was = --nacht op #0B1328 zetten. */
:root { --nacht: #121C38; }
.chapter--hero.hero--dark,
.chapter--calculation,
.chapter--founders { background-color: var(--nacht); }
.chapter--calculation .calculator-panel { background: rgba(255, 255, 255, .06); }

/* ── Hero dikker: diagram in blauw met gloed, stipjes, tweede licht, haarlijn ── */
.chapter--hero.hero--dark {
  position: relative;
  background-image:
    radial-gradient(circle, rgba(91, 157, 255, .16) 1px, transparent 1px),
    radial-gradient(ellipse 60% 75% at 8% 40%, rgba(0, 102, 255, .26), transparent 62%),
    radial-gradient(ellipse 50% 65% at 92% 70%, rgba(125, 211, 252, .16), transparent 62%);
  background-size: 18px 18px, auto, auto;
  /* stipjes doven uit naar het midden: masker op een pseudo-laag is zwaar, dus houden we ze zacht */
}
.chapter--hero.hero--dark::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(125, 211, 252, .25) 20%, rgba(125, 211, 252, .85) 50%, rgba(125, 211, 252, .25) 80%, transparent 100%);
  box-shadow: 0 0 12px rgba(125, 211, 252, .45);
  z-index: 2;
}
/* het flowdiagram: geen wit meer, alles in blauw */
.flow-field--hero-dark .flow-field__line { stroke: rgba(91, 157, 255, .30); }
.flow-field--hero-dark .flow-field__trace { stroke: #7DD3FC; stroke-width: 1.75; filter: drop-shadow(0 0 6px rgba(125, 211, 252, .9)); }
.flow-field--hero-dark .flow-field__pulse { fill: #FFFFFF; filter: drop-shadow(0 0 8px #7DD3FC) drop-shadow(0 0 16px rgba(0, 102, 255, .8)); }
.flow-field--hero-dark .flow-field__tile { fill: rgba(0, 102, 255, .12); stroke: rgba(91, 157, 255, .55); }
.flow-field--hero-dark .flow-field__icon { fill: rgba(91, 157, 255, .35); }
.flow-field--hero-dark .flow-field__mark { stroke: #7DD3FC; }
.flow-field--hero-dark .flow-field__detail { stroke: rgba(125, 211, 252, .55); }
.flow-field--hero-dark .flow-field__node--end .flow-field__tile { stroke: #7DD3FC; fill: rgba(0, 102, 255, .28); filter: drop-shadow(0 0 14px rgba(0, 102, 255, .7)); }
.flow-field--hero-dark .flow-field__proof { fill: #22C55E; filter: drop-shadow(0 0 6px #22C55E); }
.flow-field--hero-dark { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .35)); }

/* ── Hero die leeft: drijvend licht, stipjes die uitdoven naar het midden, glans door de kop ── */
.chapter--hero.hero--dark {
  overflow: hidden;
  background-image:
    radial-gradient(ellipse 60% 75% at 8% 40%, rgba(0, 102, 255, .28), transparent 62%),
    radial-gradient(ellipse 50% 65% at 92% 70%, rgba(125, 211, 252, .18), transparent 62%);
  background-size: auto, auto;
  background-position: 0 0, 0 0;
  animation: hero-drift 18s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 6% -8%, -6% 10%; }
}
.chapter--hero.hero--dark::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(125, 211, 252, .22) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 50% 50%, transparent 30%, #000 100%);
  mask-image: radial-gradient(ellipse 55% 70% at 50% 50%, transparent 30%, #000 100%);
}
.chapter--hero.hero--dark > .container { position: relative; z-index: 1; }
/* glans door het tweede deel van de kop */
.hero--dark h1 span {
  background: linear-gradient(100deg, #3B8BFF 0%, #7DD3FC 35%, #E0F4FF 50%, #7DD3FC 65%, #3B8BFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hero-sheen 9s ease-in-out infinite;
}
@keyframes hero-sheen {
  0%, 20%  { background-position: 100% 0; }
  60%, 100% { background-position: 0% 0; }
}
/* het eindpunt van de flow pulseert */
.flow-field--hero-dark .flow-field__node--end .flow-field__tile { animation: hero-endpulse 3.2s ease-in-out infinite; }
@keyframes hero-endpulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(0, 102, 255, .5)); }
  50%      { filter: drop-shadow(0 0 22px rgba(125, 211, 252, .95)); }
}
@media (prefers-reduced-motion: reduce) {
  .chapter--hero.hero--dark, .hero--dark h1 span, .flow-field--hero-dark .flow-field__node--end .flow-field__tile { animation: none; }
  .hero--dark h1 span { background-position: 50% 0; }
}

/* Terug op verzoek: geen stipjes in de hero, geen glans door de kop */
.chapter--hero.hero--dark::before { display: none; }
.hero--dark h1 span {
  background: linear-gradient(90deg, #3B8BFF, #7DD3FC);
  background-size: auto;
  animation: none;
}
/* herstel: het verloop hoort ín de letters, niet erachter */
.hero--dark h1 span {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* bovenregel lichtblauw in plaats van groen */
.hero--dark .flow-hero__eyebrow { color: #7DD3FC; }
.hero--dark .flow-hero__eyebrow::before { background: #7DD3FC; box-shadow: 0 0 10px rgba(125, 211, 252, .8); }

/* ── Het probleem, opzet B: uitleg in drie redenen (26 sept) ── */
.chapter--problem-uitleg { background-color: var(--sand); background-image: none; }
body[data-page="index"] .chapter--problem-uitleg .section-head { display: none; }
.problem-explain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px 72px; align-items: start; }
.problem-explain__intro { position: sticky; top: calc(var(--nav-offset) + 16px); }
.problem-explain__intro .eyebrow { display: flex; align-items: center; gap: 14px; color: var(--primary); margin: 0 0 18px; }
.problem-explain__intro .eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.problem-explain__intro h2 { text-align: left; margin: 0; max-width: 16ch; font-size: clamp(2.2rem, 3.9vw, 3.3rem); }
.problem-explain__lead { margin: 20px 0 0; font-size: 1.2rem; line-height: 1.6; color: var(--body-c); max-width: 42ch; }
.problem-reasons { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.problem-reason { display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.problem-reason__n { font: 600 2.6rem/1 var(--font-body); letter-spacing: -.04em; color: var(--primary); font-variant-numeric: tabular-nums; }
.problem-reason h3 { margin: 0 0 8px; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.problem-reason p { margin: 0; color: var(--body-c); max-width: 56ch; }
.problem-turn { margin-top: 28px; padding: 24px 28px; border-left: 3px solid var(--primary); background: #fff; border-radius: 0 12px 12px 0; box-shadow: var(--shadow-card); }
.problem-turn__label { margin: 0 0 6px; font-size: 1.125rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.problem-turn__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 8px #22C55E; }
.problem-turn p:last-child { margin: 0; color: var(--body-c); max-width: 56ch; }
@media (max-width: 900px) {
  .problem-explain { grid-template-columns: 1fr; }
  .problem-explain__intro { position: static; }
}
.problem-explain__intro h2 { line-height: 1.06; letter-spacing: -.035em; }

/* ── Het probleem als flow: rail met knooppunten, compact ── */
.chapter--problem-uitleg { padding-block: clamp(56px, 8vw, 96px); }
.problem-explain { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px 64px; align-items: center; }
.problem-flow { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; }
.problem-flow::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(180deg, rgba(0, 102, 255, .15), var(--primary) 55%, #7DD3FC); }
.problem-flow__step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; padding: 14px 0; position: relative; }
.problem-flow__n { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--primary); color: var(--primary); font: 600 1.05rem/1 var(--font-body); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 6px var(--sand); position: relative; z-index: 1; }
.problem-flow__step h3 { margin: 12px 0 4px; font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; }
.problem-flow__step p { margin: 0; color: var(--body-c); max-width: 46ch; font-size: 1.0625rem; }
.problem-flow__step--us { margin-top: 10px; }
.problem-flow__step--us .problem-flow__n { background: var(--primary); color: #fff; box-shadow: 0 0 0 6px var(--sand), 0 0 24px rgba(0, 102, 255, .55); }
.problem-flow__step--us > div {
  background-color: #121C38;
  background-image: radial-gradient(circle, rgba(91, 157, 255, .18) 1px, transparent 1px), radial-gradient(ellipse 70% 80% at 0% 50%, rgba(0, 102, 255, .28), transparent 65%);
  background-size: 18px 18px, auto;
  border: 1px solid rgba(91, 157, 255, .35);
  border-radius: 14px; padding: 22px 26px 24px;
  box-shadow: 0 16px 40px rgba(18, 28, 56, .25);
}
.problem-flow__step--us h3 { color: #fff; margin-top: 8px; }
.problem-flow__step--us p { color: #DDE9FF; }
.problem-flow__label { display: flex; align-items: center; gap: 8px; font: 700 .8125rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: #7DD3FC; }
.problem-flow__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 8px #22C55E; }
@media (max-width: 900px) {
  .problem-explain { gap: 20px; }
  .problem-explain__intro h2 { font-size: clamp(1.9rem, 7.5vw, 2.6rem); }
  .problem-flow::before { left: 21px; }
  .problem-flow__step { grid-template-columns: 44px 1fr; gap: 14px; padding: 10px 0; }
  .problem-flow__n { width: 44px; height: 44px; font-size: .9375rem; }
  .problem-flow__step h3 { margin-top: 8px; font-size: 1.125rem; }
  .problem-flow__step p { font-size: 1rem; }
  .problem-flow__step--us > div { padding: 18px 18px 20px; }
}
@media (max-width: 900px) { .problem-explain { grid-template-columns: 1fr; } }
/* Het probleem op krijtwit (--ground, #FAFBFD): lichter dan zand, neutraler dan ijs */
.chapter--problem-uitleg { background-color: var(--ground); }
.problem-flow__n, .problem-flow__step--us .problem-flow__n { box-shadow: 0 0 0 6px var(--ground); }
.problem-flow__step--us .problem-flow__n { box-shadow: 0 0 0 6px var(--ground), 0 0 24px rgba(0, 102, 255, .55); }

/* ── Het probleem als "Het spoor, nacht" (28 sept, keuze Wiebe): drie teksten aan één lijn, zonder nummers;
      de derde tekst in een ingetogen nachtblauw paneel. Vervangt de verticale rail (.problem-flow). ── */
.chapter--problem-spoor { overflow: hidden; padding-block: clamp(56px, 7vw, 104px); }
.spoor-head { margin-bottom: 52px; }
.spoor-head .eyebrow { display: flex; align-items: center; gap: 14px; color: var(--primary); margin: 0 0 18px; text-align: left; }
.spoor-head .eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.spoor-head h2 { text-align: left; margin: 0; max-width: 15ch; font-size: clamp(2.8rem, 5.4vw, 4.6rem); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.spoor-head h2 em { font-style: normal; background: linear-gradient(90deg, #0066FF, #3B8BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spoor-track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spoor-track::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--line) 0%, var(--line) 58%, var(--primary) 75%, #7DD3FC 100%); }
.spoor-col { position: relative; padding: 32px 40px 0 0; }
.spoor-col + .spoor-col { padding-left: 40px; }
.spoor-col::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 3px; background: var(--ink); }
.spoor-col + .spoor-col::before { left: 40px; }
.spoor-col h3 { margin: 0; font-size: clamp(1.35rem, 1.8vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.spoor-col p { margin: 12px 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--body-c); max-width: 32ch; }
.spoor-col--us {
  padding: 26px 28px 28px; margin-top: 20px;
  background-color: #121C38;
  background-image: radial-gradient(ellipse 90% 80% at 0% 100%, rgba(0, 102, 255, .26), transparent 65%);
  border: 1px solid rgba(91, 157, 255, .30); border-radius: 16px;
  box-shadow: 0 20px 44px rgba(18, 28, 56, .22);
}
.spoor-col--us::before { display: none; }
.spoor-col--us h3 { color: #fff; }
.spoor-col--us p { color: #DDE9FF; }
.spoor-live { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font: 700 .75rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: #7DD3FC; }
.spoor-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 8px #22C55E; }
@media (max-width: 900px) {
  .spoor-head { margin-bottom: 28px; }
  .spoor-head h2 { font-size: clamp(2rem, 8vw, 2.8rem); }
  .spoor-track { grid-template-columns: 1fr; }
  .spoor-track::before { display: none; }
  .spoor-col, .spoor-col + .spoor-col { padding: 22px 0 26px; border-top: 1px solid var(--line); }
  .spoor-col::before, .spoor-col + .spoor-col::before { left: 0; }
  .spoor-col h3 { font-size: 1.25rem; }
  .spoor-col p { font-size: 1rem; margin-top: 8px; }
  .spoor-col--us { margin-top: 8px; border-top: 0; padding: 22px 20px 24px; }
}
/* Strakker: minder ruimte boven en onder Het probleem (28 sept) */
.chapter--problem-spoor { padding-block: clamp(40px, 4.5vw, 64px) clamp(40px, 5vw, 72px); }
.spoor-head { margin-bottom: 36px; }
@media (max-width: 900px) { .chapter--problem-spoor { padding-block: 36px 40px; } .spoor-head { margin-bottom: 20px; } }
/* Balans: kop kleiner, de drie teksten groter (28 sept) */
.spoor-head h2 { font-size: clamp(2.2rem, 3.6vw, 3rem); max-width: 18ch; }
.spoor-col h3 { font-size: clamp(1.5rem, 2.1vw, 1.9rem); }
.spoor-col p { font-size: 1.125rem; max-width: 34ch; }
@media (max-width: 900px) {
  .spoor-head h2 { font-size: clamp(1.8rem, 6.5vw, 2.3rem); }
  .spoor-col h3 { font-size: 1.375rem; }
  .spoor-col p { font-size: 1.0625rem; }
}
/* Iets meer lucht boven en onder, tussen strak en origineel in (28 sept) */
.chapter--problem-spoor { padding-block: clamp(52px, 6vw, 84px) clamp(52px, 6.5vw, 92px); }
@media (max-width: 900px) { .chapter--problem-spoor { padding-block: 44px 52px; } }
/* Derde tekst in dezelfde vorm als de eerste twee: geen label met lampje; kop "Daar zijn wij voor." (28 sept) */
.spoor-col--us::before { display: block; background: #7DD3FC; box-shadow: 0 0 10px rgba(125, 211, 252, .6); left: 28px; top: 0; }
.spoor-col--us { padding-top: 32px; }
@media (max-width: 900px) { .spoor-col--us::before { left: 20px; } }
/* Lichte scheidingslijnen tussen de drie teksten; zwart streepje ook op de lijn boven het derde blok (28 sept) */
.spoor-col:not(.spoor-col--us)::after { content: ""; position: absolute; right: 0; top: 32px; bottom: 0; width: 1px; background: var(--line); }
.spoor-col--us::before { display: block; background: var(--ink); box-shadow: none; left: 40px; top: -21px; }
@media (max-width: 900px) {
  .spoor-col:not(.spoor-col--us)::after { display: none; }
  .spoor-col--us::before { display: none; }
}
/* Derde blok zonder kaart, "Slot 1: blauwe kop" (28 sept, keuze Wiebe) */
.spoor-col--us { padding: 32px 0 0 40px; margin-top: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.spoor-col--us::before { display: block; left: 40px; top: -1px; background: var(--primary); box-shadow: none; }
.spoor-col--us h3 { color: var(--primary); }
.spoor-col--us p { color: var(--body-c); }
.spoor-track::before { background: var(--line); }
@media (max-width: 900px) {
  .spoor-col--us { padding: 22px 0 26px; border-top: 1px solid var(--line); }
  .spoor-col--us::before { display: block; left: 0; }
}
/* Derde blok aangekleed: drie bewijspunten en een tekstlink naar de intake (28 sept) */
.spoor-proof { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.spoor-proof li { display: flex; align-items: center; gap: 12px; font-size: 1.0625rem; font-weight: 500; color: var(--ink); }
.spoor-proof li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--tint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%230066FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat; }
.spoor-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-weight: 600; font-size: 1.0625rem; color: var(--primary); text-decoration: none; border-bottom: 1px solid rgba(0, 102, 255, .35); padding-bottom: 2px; transition: border-color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out); }
.spoor-link:hover { border-color: var(--primary); gap: 12px; }
.spoor-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
@media (max-width: 900px) { .spoor-proof { margin-top: 16px; gap: 8px; } .spoor-link { margin-top: 18px; } }
/* Derde blok: geen bewijspunten of link; wel een zacht lichtblauw vlak als achtergrond (28 sept) */
.spoor-proof, .spoor-link { display: none; }
.spoor-col--us { padding: 32px 32px 32px 40px; margin: 0 -32px -32px 0; background: linear-gradient(180deg, #EEF4FF 0%, #F5F8FF 100%); border-radius: 0 0 16px 16px; }
.spoor-col--us::before { left: 40px; }
@media (max-width: 900px) {
  .spoor-col--us { padding: 22px 20px 26px; margin: 8px 0 0; border-radius: 12px; border-top: 0; }
  .spoor-col--us::before { left: 20px; top: 0; }
}
/* Lichtblauw vlak vervaagt: scherp op de lijn, naar boven en naar onderen uitdovend; lijn en streepje lopen erdoorheen (28 sept) */
.spoor-col--us {
  margin: -48px -32px -32px 0;
  padding: calc(32px + 48px) 32px 40px 40px;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(238, 244, 255, 0) 0px, #EEF4FF 48px, #EEF4FF 62%, rgba(238, 244, 255, 0) 100%);
}
.spoor-track::before { z-index: 1; }
.spoor-col::before { z-index: 2; }
@media (max-width: 900px) {
  .spoor-col--us { margin: 8px 0 0; padding: 22px 20px 30px; border-top: 1px solid var(--line); background: linear-gradient(180deg, #EEF4FF 0%, rgba(238, 244, 255, 0) 100%); }
}
/* Correctie: streepje terug op de bovenlijn; het vlak komt op vanaf de bovenlijn, is scherp waar de middenlijn begint,
   blijft helder tot waar de middenlijn eindigt en vervaagt daaronder (28 sept) */
.spoor-col--us {
  margin: 0 -32px -40px 0;
  padding: 32px 32px 40px 40px;
  background: linear-gradient(180deg, rgba(238, 244, 255, 0) 0px, #EEF4FF 32px, #EEF4FF calc(100% - 40px), rgba(238, 244, 255, 0) 100%);
}
.spoor-col--us::before { top: -1px; }
.spoor-col:not(.spoor-col--us)::after { bottom: 40px; }
@media (max-width: 900px) {
  .spoor-col--us { margin: 8px 0 0; padding: 22px 20px 30px; background: linear-gradient(180deg, #EEF4FF 0%, rgba(238, 244, 255, 0) 100%); }
  .spoor-col--us::before { top: 0; }
}
/* Terug naar een gewoon lichtblauw vlak, zonder vervaging (28 sept) */
.spoor-col--us { margin: 0 -32px 0 0; padding: 32px 32px 32px 40px; background: #EEF4FF; border-radius: 0 0 16px 16px; }
.spoor-col:not(.spoor-col--us)::after { bottom: 0; }
@media (max-width: 900px) { .spoor-col--us { margin: 8px 0 0; padding: 22px 20px 26px; background: #EEF4FF; border-radius: 12px; } }
/* Alle hoeken vierkant (28 sept) */
.spoor-col--us { border-radius: 0; }
@media (max-width: 900px) { .spoor-col--us { border-radius: 0; } }
/* Telefoon: het lichtblauwe vlak loopt van schermrand tot schermrand (28 sept) */
@media (max-width: 900px) {
  .spoor-col--us { margin: 8px calc(-1 * var(--gutter)) 0; padding: 22px var(--gutter) 26px; }
  .spoor-col--us::before { left: var(--gutter); }
}
/* Telefoon, correctie: tekst op dezelfde marge als de andere teksten; alleen het vlak loopt door via een laag eronder (28 sept) */
@media (max-width: 900px) {
  .spoor-col--us { margin: 8px 0 0; padding: 22px 0 26px; background: none; z-index: 0; }
  .spoor-col--us::before { left: 0; }
  .spoor-col--us::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #EEF4FF; z-index: -1; display: block; right: auto; }
}
/* Bovenregel "Het probleem" weg (28 sept) */
.spoor-head .eyebrow { display: none; }
/* ═══ Het probleem, opmaak P2 (28 sept, keuze Wiebe): dunne lijn links van elke tekst (grijs, grijs, blauw);
   de derde tekst op lichtblauw dat naar rechts uitloopt. Geen lijn erboven, geen streepjes, geen scheidingslijnen. ═══ */
.spoor-track { gap: 40px; }
.spoor-track::before { display: none; }
.spoor-col, .spoor-col + .spoor-col { padding: 0 0 0 24px; border-left: 1px solid var(--line); margin: 0; background: none; }
.spoor-col::before, .spoor-col + .spoor-col::before, .spoor-col--us::before, .spoor-col:not(.spoor-col--us)::after { display: none; }
.spoor-col--us { border-left: 2px solid var(--primary); padding: 24px 28px 28px 24px; margin: -24px 0 -28px; background: linear-gradient(90deg, #EEF4FF 0%, #EEF4FF 55%, rgba(238, 244, 255, 0) 100%); }
.spoor-col--us h3 { color: var(--primary); }
@media (max-width: 900px) {
  .spoor-track { gap: 28px; }
  .spoor-col, .spoor-col + .spoor-col { padding: 0 0 0 18px; border-top: 0; }
  .spoor-col--us { padding: 18px 20px 20px 18px; margin: 0; background: linear-gradient(90deg, #EEF4FF 0%, #EEF4FF 65%, rgba(238, 244, 255, 0) 100%); z-index: auto; }
  .spoor-col--us::after { display: none; }
}
/* Correctie P2: de gecombineerde regel hierboven won van .spoor-col--us; zelfde regels met hogere specificiteit */
.spoor-track > .spoor-col.spoor-col--us { border-left: 2px solid var(--primary); padding: 24px 28px 28px 24px; margin: -24px 0 -28px; background: linear-gradient(90deg, #EEF4FF 0%, #EEF4FF 55%, rgba(238, 244, 255, 0) 100%); }
@media (max-width: 900px) {
  .spoor-track > .spoor-col.spoor-col--us { padding: 18px 20px 20px 18px; margin: 0; background: linear-gradient(90deg, #EEF4FF 0%, #EEF4FF 65%, rgba(238, 244, 255, 0) 100%); }
}
/* De twee grijze lijnen links wat duidelijker (28 sept) */
.spoor-track > .spoor-col:not(.spoor-col--us) { border-left-color: #A8B2C2; }
/* Vlak Q1 (28 sept, keuze Wiebe): egaal lichtblauw, recht afgesneden, geen verloop */
.spoor-track > .spoor-col.spoor-col--us { background: #EEF4FF; }
@media (max-width: 900px) { .spoor-track > .spoor-col.spoor-col--us { background: #EEF4FF; } }
/* Sectie iets hoger: meer lucht boven en onder, kop iets groter (28 sept) */
.chapter--problem-spoor { padding-block: clamp(64px, 8vw, 120px) clamp(72px, 9vw, 136px); }
.spoor-head { margin-bottom: 48px; }
.spoor-head h2 { font-size: clamp(2.4rem, 4vw, 3.4rem); }
@media (max-width: 900px) { .chapter--problem-spoor { padding-block: 52px 64px; } .spoor-head { margin-bottom: 28px; } }
/* ── De oprichters, compacter (28 sept): kop links, drie foto's met naam en rolregel, één gedeelde regel eronder ── */
.chapter--founders .founders-line { margin: 28px 0 0; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-weight: 500; font-size: .875rem; letter-spacing: .02em; color: #7DD3FC; display: flex; align-items: center; gap: 10px; }
.chapter--founders .founders-line::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7DD3FC; box-shadow: 0 0 10px rgba(125, 211, 252, .8); flex: none; }
.chapter--founders .section-head h2 { font-size: clamp(2.4rem, 4vw, 3.4rem); }
.chapter--founders .founder-card__name { font-size: 1.5rem; }
.chapter--founders .founder-card__text { font-size: .9375rem; color: rgba(255, 255, 255, .78); }
@media (max-width: 900px) { .chapter--founders .founders-line { font-size: .8125rem; } }
/* Over ons: de oprichtersband van de home op de subpagina, kop en foto's links uitgelijnd (28 sept) */
body[data-page="over-ons"] .chapter--founders .section-head .eyebrow { display: none; }
body[data-page="over-ons"] .chapter--founders .section-head,
body[data-page="over-ons"] .chapter--founders .section-head h2 { text-align: left; margin-inline: 0; max-width: none; justify-self: start; }
body[data-page="over-ons"] .chapter--founders { padding-block: 72px 88px; }
/* Oprichters: kop mag twee regels zijn, geen gedeelde regel eronder (28 sept) */
.chapter--founders .section-head h2 { max-width: 16ch; }
.chapter--founders .founders-line { display: none; }
/* Oprichters: kop en intro gecentreerd boven de foto's (28 sept) */
body[data-page="index"] .chapter--founders .section-head { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; margin-bottom: 36px; }
body[data-page="index"] .chapter--founders .section-head h2 { grid-column: auto; text-align: center; max-width: none; margin-inline: auto; }
body[data-page="index"] .chapter--founders .founders-intro { display: block; grid-column: auto; grid-row: auto; text-align: center; margin: 16px auto 0; max-width: 52ch; font-size: 1.125rem; color: #A8B2C2; }
@media (max-width: 900px) { body[data-page="index"] .chapter--founders .founders-intro { font-size: 1rem; } }
/* Oprichters: één zin als kop, gecentreerd, twee regels (28 sept) */
body[data-page="index"] .chapter--founders .section-head h2 { max-width: 22ch; font-size: clamp(2.2rem, 3.8vw, 3.2rem); }
/* ── Over ons: heel licht ritme in de achtergrond (28 sept) ──
   Paginakop op krijtwit met een zacht blauw licht linksboven en fijne stipjes die naar het midden uitdoven;
   de oprichtersband houdt nacht, met dezelfde stipjes heel zacht; het contactblok blijft licht. */
body[data-page="over-ons"] .page-hero {
  position: relative; overflow: hidden;
  background-color: var(--ground);
  background-image: radial-gradient(ellipse 55% 70% at 8% 30%, rgba(0, 102, 255, .09), transparent 65%), radial-gradient(ellipse 40% 50% at 95% 90%, rgba(125, 211, 252, .10), transparent 60%);
  padding-block: clamp(72px, 9vw, 128px) clamp(56px, 7vw, 96px);
}
body[data-page="over-ons"] .page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(0, 102, 255, .14) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 60%, transparent 25%, #000 100%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 60%, transparent 25%, #000 100%);
}
body[data-page="over-ons"] .page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 102, 255, .12) 20%, rgba(0, 102, 255, .45) 50%, rgba(0, 102, 255, .12) 80%, transparent 100%);
}
body[data-page="over-ons"] .page-hero .container { position: relative; z-index: 1; text-align: center; }
body[data-page="over-ons"] .page-hero .eyebrow { justify-content: center; }
body[data-page="over-ons"] .page-hero .section-head__row { justify-content: center; }
body[data-page="over-ons"] .page-hero .marker { display: none; }
body[data-page="over-ons"] .page-hero h1 { margin-inline: auto; max-width: 22ch; text-align: center; font-size: clamp(2.2rem, 3.8vw, 3.2rem); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }

body[data-page="over-ons"] .chapter--founders {
  background-image:
    radial-gradient(circle, rgba(91, 157, 255, .10) 1px, transparent 1px),
    radial-gradient(ellipse 60% 75% at 8% 40%, rgba(0, 102, 255, .22), transparent 62%),
    radial-gradient(ellipse 50% 60% at 50% 100%, rgba(0, 102, 255, .18), transparent 65%);
  background-size: 18px 18px, auto, auto;
  padding-block: 88px 104px;
}
body[data-page="over-ons"] .chapter--founders .section-head { margin-bottom: 40px; }
body[data-page="over-ons"] .chapter--founders .section-head h2 { text-align: center; margin-inline: auto; max-width: none; font-size: clamp(1.6rem, 2.4vw, 2rem); color: #A8B2C2; font-weight: 500; letter-spacing: -.02em; }
body[data-page="over-ons"] .chapter--founders .section-head { text-align: center; }
@media (max-width: 900px) {
  body[data-page="over-ons"] .page-hero { padding-block: 56px 44px; }
  body[data-page="over-ons"] .chapter--founders { padding-block: 56px 64px; }
}
/* Oprichters: het blauwe licht achter Wiebe (rechts) in plaats van links (28 sept) */
body[data-page="over-ons"] .chapter--founders,
body[data-page="index"] .chapter--founders {
  background-image:
    radial-gradient(circle, rgba(91, 157, 255, .10) 1px, transparent 1px),
    radial-gradient(ellipse 45% 70% at 84% 55%, rgba(0, 102, 255, .30), transparent 62%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(0, 102, 255, .10), transparent 65%);
  background-size: 18px 18px, auto, auto;
}
body[data-page="index"] .chapter--founders { background-size: auto, auto, auto; background-image: radial-gradient(ellipse 45% 70% at 84% 55%, rgba(0, 102, 255, .30), transparent 62%), radial-gradient(ellipse 50% 50% at 50% 100%, rgba(0, 102, 255, .10), transparent 65%); }
@media (max-width: 900px) {
  body[data-page="over-ons"] .chapter--founders,
  body[data-page="index"] .chapter--founders { background-image: radial-gradient(ellipse 80% 40% at 50% 85%, rgba(0, 102, 255, .28), transparent 65%); background-size: auto; }
}
/* Licht achter Wiebe iets hoger (28 sept) */
body[data-page="over-ons"] .chapter--founders { background-image: radial-gradient(circle, rgba(91, 157, 255, .10) 1px, transparent 1px), radial-gradient(ellipse 45% 70% at 84% 32%, rgba(0, 102, 255, .30), transparent 62%), radial-gradient(ellipse 50% 50% at 50% 100%, rgba(0, 102, 255, .10), transparent 65%); }
body[data-page="index"] .chapter--founders { background-image: radial-gradient(ellipse 45% 70% at 84% 32%, rgba(0, 102, 255, .30), transparent 62%), radial-gradient(ellipse 50% 50% at 50% 100%, rgba(0, 102, 255, .10), transparent 65%); }
/* Links een zacht groen licht (Actiefgroen #22C55E) achter Sil, rechts het blauwe achter Wiebe (28 sept) */
body[data-page="over-ons"] .chapter--founders { background-image: radial-gradient(circle, rgba(91, 157, 255, .10) 1px, transparent 1px), radial-gradient(ellipse 40% 65% at 14% 36%, rgba(34, 197, 94, .22), transparent 62%), radial-gradient(ellipse 45% 70% at 84% 32%, rgba(0, 102, 255, .30), transparent 62%), radial-gradient(ellipse 50% 50% at 50% 100%, rgba(0, 102, 255, .10), transparent 65%); background-size: 18px 18px, auto, auto, auto; }
body[data-page="index"] .chapter--founders { background-image: radial-gradient(ellipse 40% 65% at 14% 36%, rgba(34, 197, 94, .22), transparent 62%), radial-gradient(ellipse 45% 70% at 84% 32%, rgba(0, 102, 255, .30), transparent 62%), radial-gradient(ellipse 50% 50% at 50% 100%, rgba(0, 102, 255, .10), transparent 65%); background-size: auto; }
/* Linksonder het lichtblauwe licht uit de hero (in plaats van groen), rechtsboven het blauwe achter Wiebe (28 sept) */
body[data-page="over-ons"] .chapter--founders { background-image: radial-gradient(circle, rgba(91, 157, 255, .10) 1px, transparent 1px), radial-gradient(ellipse 50% 65% at 8% 85%, rgba(125, 211, 252, .18), transparent 62%), radial-gradient(ellipse 45% 70% at 84% 32%, rgba(0, 102, 255, .30), transparent 62%); background-size: 18px 18px, auto, auto; }
body[data-page="index"] .chapter--founders { background-image: radial-gradient(ellipse 50% 65% at 8% 85%, rgba(125, 211, 252, .18), transparent 62%), radial-gradient(ellipse 45% 70% at 84% 32%, rgba(0, 102, 255, .30), transparent 62%); background-size: auto; }
/* Omgewisseld: blauw laag achter Wiebe (rechtsonder), lichtblauw hoog achter Sil (linksboven) (28 sept) */
body[data-page="over-ons"] .chapter--founders { background-image: radial-gradient(circle, rgba(91, 157, 255, .10) 1px, transparent 1px), radial-gradient(ellipse 45% 70% at 14% 32%, rgba(125, 211, 252, .18), transparent 62%), radial-gradient(ellipse 50% 65% at 88% 85%, rgba(0, 102, 255, .30), transparent 62%); background-size: 18px 18px, auto, auto; }
body[data-page="index"] .chapter--founders { background-image: radial-gradient(ellipse 45% 70% at 14% 32%, rgba(125, 211, 252, .18), transparent 62%), radial-gradient(ellipse 50% 65% at 88% 85%, rgba(0, 102, 255, .30), transparent 62%); background-size: auto; }
/* Blauw hoog links achter Sil, lichtblauw laag rechts achter Wiebe (28 sept) */
body[data-page="over-ons"] .chapter--founders { background-image: radial-gradient(circle, rgba(91, 157, 255, .10) 1px, transparent 1px), radial-gradient(ellipse 45% 70% at 14% 32%, rgba(0, 102, 255, .30), transparent 62%), radial-gradient(ellipse 50% 65% at 88% 85%, rgba(125, 211, 252, .18), transparent 62%); background-size: 18px 18px, auto, auto; }
body[data-page="index"] .chapter--founders { background-image: radial-gradient(ellipse 45% 70% at 14% 32%, rgba(0, 102, 255, .30), transparent 62%), radial-gradient(ellipse 50% 65% at 88% 85%, rgba(125, 211, 252, .18), transparent 62%); background-size: auto; }
/* Toch andersom: lichtblauw hoog links achter Sil, blauw laag rechts achter Wiebe (28 sept, definitief) */
body[data-page="over-ons"] .chapter--founders { background-image: radial-gradient(circle, rgba(91, 157, 255, .10) 1px, transparent 1px), radial-gradient(ellipse 45% 70% at 14% 32%, rgba(125, 211, 252, .18), transparent 62%), radial-gradient(ellipse 50% 65% at 88% 85%, rgba(0, 102, 255, .30), transparent 62%); background-size: 18px 18px, auto, auto; }
body[data-page="index"] .chapter--founders { background-image: radial-gradient(ellipse 45% 70% at 14% 32%, rgba(125, 211, 252, .18), transparent 62%), radial-gradient(ellipse 50% 65% at 88% 85%, rgba(0, 102, 255, .30), transparent 62%); background-size: auto; }
/* Oprichters op de home: label "Over ons" in het midden met het standaard streepje eronder, zoals bij Wat je krijgt en Werkwijze (28 sept) */
body[data-page="index"] .chapter--founders .section-head .eyebrow { display: flex; color: #7DD3FC; }
body[data-page="index"] .chapter--founders .section-head .eyebrow::after { display: block; background: #7DD3FC; }
/* Oprichters op de home: kop links, zonder label, strak op de linkerlijn van de foto's (28 sept) */
body[data-page="index"] .chapter--founders .section-head .eyebrow { display: none; }
body[data-page="index"] .chapter--founders .section-head { justify-items: start; text-align: left; margin-bottom: 32px; }
body[data-page="index"] .chapter--founders .section-head h2 { text-align: left; margin-inline: 0; max-width: 18ch; }
/* Terug naar gecentreerd: één zin in twee regels, zonder label (28 sept) */
body[data-page="index"] .chapter--founders .section-head { justify-items: center; text-align: center; margin-bottom: 36px; }
body[data-page="index"] .chapter--founders .section-head h2 { text-align: center; margin-inline: auto; max-width: 22ch; }
/* Oprichters: kop links op de lijn van Sil, twee zinnen onder elkaar (28 sept, keuze Wiebe) */
body[data-page="index"] .chapter--founders .section-head { justify-items: start; text-align: left; margin-bottom: 32px; }
body[data-page="index"] .chapter--founders .section-head h2 { text-align: left; margin-inline: 0; max-width: none; }
@media (max-width: 600px) { body[data-page="index"] .chapter--founders .section-head h2 br { display: none; } }
/* Wat je krijgt: alleen het rechterpaneel in het nachtblauw dat de site nu gebruikt, verder ongewijzigd (28 sept) */
.chapter--outcome .outcome-panel { background-color: #121C38; background-image: radial-gradient(circle, rgba(91, 157, 255, .14) 1px, transparent 1px), radial-gradient(ellipse 80% 70% at 100% 100%, rgba(0, 102, 255, .28), transparent 65%); background-size: 18px 18px, auto; box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), 0 16px 40px rgba(11, 19, 40, .30); }
.chapter--outcome .outcome-ico { background: rgba(0, 102, 255, .16); border-color: rgba(125, 211, 252, .6); color: #7DD3FC; }
.chapter--outcome .outcome-panel span { color: #DDE9FF; }
/* Wat je krijgt: paneel zonder stipjes (28 sept) */
.chapter--outcome .outcome-panel { background-image: radial-gradient(ellipse 80% 70% at 100% 100%, rgba(0, 102, 255, .28), transparent 65%); background-size: auto; }
/* Wat je krijgt: paneel een tint lichter (28 sept) */
.chapter--outcome .outcome-panel { background-color: #172342; }
/* ═══ Footer v2 (28 sept): nachtblauw, logo met slogan, twee linkkolommen, onderregel met KvK ═══ */
.footer--v2 { background-color: #0B1328; background-image: radial-gradient(ellipse 50% 70% at 92% 30%, rgba(0, 102, 255, .20), transparent 62%); background-size: auto; color: #A8B2C2; border-top: 1px solid rgba(255, 255, 255, .08); padding: 56px 0 28px; }
.footer--v2 .footer__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.footer--v2 .footer__identity { gap: 16px; }
.footer--v2 .footer__logo img { height: 22px; }
.footer--v2 .footer__payoff { margin: 0; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-weight: 500; font-size: .9375rem; letter-spacing: .02em; color: #7DD3FC; display: flex; align-items: center; gap: 10px; }
.footer--v2 .footer__payoff::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7DD3FC; box-shadow: 0 0 10px rgba(125, 211, 252, .8); flex: none; }
.footer--v2 .footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
.footer--v2 .footer__col { display: grid; gap: 10px; align-content: start; }
.footer--v2 .footer__head { margin: 0 0 4px; font: 700 .8125rem/1 "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.footer--v2 .footer__link { font-size: .9375rem; color: #A8B2C2; }
.footer--v2 .footer__link:hover { color: #fff; }
.footer--v2 .footer__bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .10); }
.footer--v2 .footer__legal { margin: 0; font-size: .8125rem; color: #7C879A; }
@media (max-width: 700px) {
  .footer--v2 { padding: 44px 0 24px; }
  .footer--v2 .footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .footer--v2 .footer__bottom { flex-direction: column; gap: 6px; }
}
/* ═══ Werkwijze (28 sept): donkere paginakop, vier stappen als rijen met lichtblauw "Wat je krijgt"-blok, motorblok in nacht ═══ */
.page-hero--night { position: relative; overflow: hidden; background-color: #121C38; color: #fff; padding: 160px 0 72px; background-image: radial-gradient(ellipse 60% 75% at 8% 40%, rgba(0, 102, 255, .28), transparent 62%), radial-gradient(ellipse 50% 65% at 92% 70%, rgba(125, 211, 252, .18), transparent 62%); }
.page-hero--night::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(125, 211, 252, .25) 20%, rgba(125, 211, 252, .85) 50%, rgba(125, 211, 252, .25) 80%, transparent 100%); box-shadow: 0 0 12px rgba(125, 211, 252, .45); }
.page-hero--night .page-hero__eyebrow { margin: 0 0 18px; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-weight: 500; font-size: .9375rem; letter-spacing: .02em; color: #7DD3FC; display: inline-flex; align-items: center; gap: 10px; }
.page-hero--night .page-hero__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7DD3FC; box-shadow: 0 0 10px rgba(125, 211, 252, .8); }
.page-hero--night h1 { margin: 0; color: #fff; font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1.04; letter-spacing: -.035em; max-width: 16ch; text-wrap: balance; }
.page-hero--night h1 span { background: linear-gradient(90deg, #3B8BFF, #7DD3FC); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .12em; margin-bottom: -.12em; }
.page-hero--night .page-hero__sub { margin: 22px 0 0; max-width: 46ch; font-size: 1.2rem; line-height: 1.55; color: #DDE9FF; }
.page-hero__facts { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.page-hero__facts li { padding: 16px 28px 0 0; margin-right: 28px; font-size: .9375rem; color: #A8B2C2; border-right: 1px solid rgba(255, 255, 255, .14); }
.page-hero__facts li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.page-hero__facts b { display: block; color: #fff; font-weight: 600; font-size: 1.0625rem; margin-top: 2px; }

.stappen { background: var(--ground); padding-block: clamp(64px, 8vw, 112px) clamp(64px, 8vw, 104px); }
.stappen__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px 64px; align-items: end; margin-bottom: 40px; }
.stappen__head h2 { margin: 0; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1.04; letter-spacing: -.035em; max-width: 14ch; text-align: left; }
.stappen__head h2 em { font-style: normal; background: linear-gradient(90deg, #0066FF, #3B8BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stappen__head p { margin: 0 0 6px; font-size: 1.125rem; line-height: 1.55; color: var(--body-c); max-width: 40ch; }
.stap-lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid #A8B2C2; }
.stap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 48px; padding: 40px 0; border-bottom: 1px solid var(--line); align-items: start; }
.stap:last-child { border-bottom: 1px solid #A8B2C2; }
.stap__kop { display: grid; gap: 10px; }
.stap__nr { font: 600 .9375rem/1 "JetBrains Mono", ui-monospace, Menlo, monospace; color: var(--primary); letter-spacing: .04em; }
.stap__kop h3 { margin: 0; font-size: clamp(1.5rem, 2.1vw, 1.9rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.stap__tekst p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--body-c); max-width: 48ch; }
.stap__tekst p + p { margin-top: 12px; }
.stap__krijgt { background: #EEF4FF; border-left: 2px solid var(--primary); padding: 18px 22px 20px 20px; }
.stap__krijgt h4 { margin: 0 0 10px; font: 700 .8125rem/1 "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.stap__krijgt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stap__krijgt li { position: relative; padding-left: 18px; font-size: .9375rem; line-height: 1.45; color: var(--ink); }
.stap__krijgt li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 2px; background: var(--primary); }
.stap--live .stap__krijgt { background: #121C38; border-left-color: #7DD3FC; background-image: radial-gradient(ellipse 90% 80% at 0% 100%, rgba(0, 102, 255, .26), transparent 65%); }
.stap--live .stap__krijgt h4 { color: #7DD3FC; }
.stap--live .stap__krijgt li { color: #fff; }
.stap--live .stap__krijgt li::before { background: #7DD3FC; }

.motor { background-color: #121C38; color: #fff; padding-block: clamp(56px, 7vw, 88px); background-image: radial-gradient(ellipse 45% 70% at 88% 50%, rgba(0, 102, 255, .28), transparent 62%); }
.motor__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px 64px; align-items: center; }
.motor h2 { margin: 0 0 16px; color: #fff; font-size: clamp(1.8rem, 2.8vw, 2.4rem); letter-spacing: -.03em; line-height: 1.1; text-align: left; }
.motor p { margin: 0; color: #DDE9FF; font-size: 1.0625rem; line-height: 1.6; max-width: 52ch; }
.motor p + p { margin-top: 10px; }
.motor__teller { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; justify-self: end; }
.motor__dag { font: 700 clamp(2.2rem, 3.4vw, 3rem)/1 "Barlow Condensed", sans-serif; letter-spacing: -.01em; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.motor__dag--live { color: #fff; text-shadow: 0 0 24px rgba(0, 102, 255, .55); }
.motor__pijl { height: 2px; min-width: 64px; background: linear-gradient(90deg, rgba(125, 211, 252, .2), #7DD3FC); box-shadow: 0 0 10px rgba(125, 211, 252, .5); }
.motor__label { grid-column: 1 / -1; text-align: center; font: 500 .75rem/1 "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: .04em; color: #7DD3FC; }
body[data-page="werkwijze"] .relocation-link { padding-block: 36px 8px; }

@media (max-width: 900px) {
  .page-hero--night { padding: 128px 0 48px; }
  .page-hero--night h1 { font-size: clamp(2.1rem, 8vw, 2.8rem); }
  .page-hero--night .page-hero__sub { font-size: 1.05rem; }
  .page-hero__facts li { flex: 1 1 40%; border-right: 0; margin-right: 0; padding-right: 0; }
  .stappen { padding-block: 52px 56px; }
  .stappen__head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }
  .stappen__head h2 { font-size: clamp(2rem, 8vw, 2.8rem); }
  .stap { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
  .stap__kop h3 { font-size: 1.375rem; }
  .motor__inner { grid-template-columns: 1fr; gap: 28px; }
  .motor__teller { justify-self: start; }
}
.page-hero--night { border-bottom: 0; }
/* Koppen van Wat je krijgt en Werkwijze: tweede deel in het blauw van Het probleem (28 sept). Kaarten blijven zoals ze waren. */
.outcome-head h2 em, .chapter--method-dark .section-head h2 em { font-style: normal; background: linear-gradient(90deg, #0066FF, #3B8BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ═══ De gratis intake (28 sept): weer donker, zonder stipjes en zonder het flowdiagram; glazen kaart in nacht, zoals de rest van de site ═══ */
.chapter--closing { background-color: #121C38; background-image: radial-gradient(ellipse 45% 70% at 88% 80%, rgba(0, 102, 255, .30), transparent 62%), radial-gradient(ellipse 45% 65% at 8% 20%, rgba(125, 211, 252, .14), transparent 62%); background-size: auto; color: #fff; position: relative; overflow: hidden; }
.chapter--closing::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(125, 211, 252, .25) 20%, rgba(125, 211, 252, .85) 50%, rgba(125, 211, 252, .25) 80%, transparent 100%); box-shadow: 0 0 12px rgba(125, 211, 252, .45); }
.chapter--closing .flow-field--dark, .chapter--closing .flow-field--closing { display: none; }
.chapter--closing .container { width: min(820px, calc(100% - 32px)); padding: 52px clamp(24px, 5vw, 64px); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.chapter--closing .closing-payoff { color: #7DD3FC; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-weight: 500; font-size: .9375rem; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 10px; }
.chapter--closing .closing-payoff::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7DD3FC; box-shadow: 0 0 10px rgba(125, 211, 252, .8); flex: none; }
.chapter--closing h2 { color: #fff; letter-spacing: -.035em; }
.chapter--closing .sub { color: #DDE9FF; }
.chapter--closing .contact__proof li { color: #DDE9FF; }
.chapter--closing .contact__proof svg { color: #7DD3FC; }
.chapter--closing .contact__mail { color: #A8B2C2; }
.chapter--closing .contact__mail a { color: #7DD3FC; }
.chapter--closing .btn--primary { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 30px rgba(0, 102, 255, .45); }
.chapter--closing .btn--primary:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 40px rgba(0, 102, 255, .65); }
.chapter--closing .btn--ghost-dark { background: transparent; color: #E2E8F0; border-color: rgba(255, 255, 255, .25); }
.chapter--closing .btn--ghost-dark:hover { border-color: #7DD3FC; color: #fff; }
@supports not (backdrop-filter: blur(1px)) { .chapter--closing .container { background: rgba(22, 32, 56, .9); } }
@media (max-width: 640px) { .chapter--closing .container { padding: 36px 20px; border-radius: 16px; } }
/* ═══ Werkwijze op de home (29 sept): pictogram in een klein vierkant boven de kop van elke kaart ═══ */
.chapter--method-dark .rail__card { display: grid; align-content: start; gap: 0; }
.chapter--method-dark .rail__ico { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 18px; background: rgba(125, 211, 252, .14); border: 1px solid rgba(125, 211, 252, .35); color: #7DD3FC; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10); }
.chapter--method-dark .rail__item--active .rail__ico { background: rgba(0, 102, 255, .35); border-color: rgba(125, 211, 252, .6); color: #fff; box-shadow: 0 0 18px rgba(0, 102, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .14); }
.chapter--method-dark .rail__card h3 { margin: 0; }
@media (max-width: 900px) { .chapter--method-dark .rail__ico { width: 40px; height: 40px; margin-bottom: 14px; } }
/* Werkwijze-pictogram naast de kop in plaats van erboven, zodat de kaart niet hoger wordt (29 sept) */
.chapter--method-dark .rail__card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; align-content: start; }
.chapter--method-dark .rail__ico { width: 40px; height: 40px; margin: 0; grid-column: 1; grid-row: 1; }
.chapter--method-dark .rail__card h3 { grid-column: 2; grid-row: 1; }
.chapter--method-dark .rail__card p { grid-column: 1 / -1; grid-row: 2; margin-top: 16px; }
@media (max-width: 900px) { .chapter--method-dark .rail__card { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; } .chapter--method-dark .rail__ico { width: 36px; height: 36px; } }
/* Wat je krijgt: kop in twee vaste regels (29 sept) */
.outcome-head h2 { max-width: none; }
@media (max-width: 600px) { .outcome-head h2 br { display: none; } }
/* De gratis intake (29 sept): sectie licht grijs zoals Werkwijze, de kaart zelf nachtblauw; daarna de donkere footer */
.chapter--closing { background-color: #EEF3FA; background-image: none; color: var(--ink); }
.chapter--closing::before { display: none; }
.chapter--closing .container { background: #121C38; background-image: radial-gradient(ellipse 60% 80% at 90% 90%, rgba(0, 102, 255, .32), transparent 62%), radial-gradient(ellipse 45% 60% at 5% 10%, rgba(125, 211, 252, .14), transparent 62%); border: 1px solid rgba(255, 255, 255, .10); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 24px 60px rgba(11, 19, 40, .28); }
.chapter--closing h2 { color: #fff; }
/* Footer: slogan in gewone witte letters, zonder mono-letter en stip (29 sept) */
.footer--v2 .footer__payoff { font-family: var(--font-body); font-weight: 500; font-size: 1rem; letter-spacing: 0; color: #fff; }
.footer--v2 .footer__payoff::before { display: none; }
/* Overgang Werkwijze → De gratis intake (29 sept): een dunne blauwe lijn die naar de randen uitdooft, met één knooppunt in het midden, zoals in het flowdiagram */
.chapter--closing { position: relative; }
.chapter--closing::before {
  content: ""; display: block; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  width: min(560px, 70%); height: 10px; pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 50%, #0066FF 0 3px, rgba(0, 102, 255, .25) 3.5px, rgba(0, 102, 255, 0) 5px),
    linear-gradient(90deg, rgba(0, 102, 255, 0) 0%, rgba(0, 102, 255, .55) 35%, rgba(0, 102, 255, .55) 65%, rgba(0, 102, 255, 0) 100%);
  background-repeat: no-repeat;
  background-size: 10px 10px, 100% 1px;
  background-position: 50% 50%, 0 50%;
  filter: drop-shadow(0 0 6px rgba(0, 102, 255, .35));
}
/* Overgang Werkwijze → intake: strakke dunne lijn over de breedte van de inhoud, zonder knooppunt of gloed (29 sept) */
.chapter--closing::before { width: min(var(--max-width), calc(100% - 2 * var(--gutter))); height: 1px; background: #B8C2D3; background-image: none; filter: none; transform: translate(-50%, 0); }
/* Overgang Werkwijze → intake: geen lijn; de intakesectie een tint lichter (krijtwit) dan Werkwijze, zodat de grens vanzelf ontstaat (29 sept) */
.chapter--closing::before { display: none; }
.chapter--closing { background-color: var(--ground); }
/* Overgang Werkwijze → intake: de tint lichter, plus één heel lichte lijn over de volle breedte (29 sept) */
.chapter--closing { border-top: 1px solid var(--line); }
/* ═══ PROEF 2 (29 sept): De gratis intake als lichtblauwe band over de volle breedte, alles gecentreerd, geen kaart.
   Terugzetten = dit blok weghalen. ═══ */
.chapter--closing { background-color: #EEF4FF; background-image: none; color: var(--ink); border-top: 0; padding-block: clamp(72px, 9vw, 128px); position: relative; }
.chapter--closing::before { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, rgba(0, 102, 255, 0) 0%, var(--primary) 50%, rgba(0, 102, 255, 0) 100%); transform: none; width: auto; filter: none; }
.chapter--closing .container.intake { width: auto; max-width: 760px; padding: 0 var(--gutter); background: none; background-image: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; display: grid; gap: 0; justify-items: center; text-align: center; }
.chapter--closing .intake__tekst { display: grid; justify-items: center; }
.chapter--closing .closing-payoff { display: inline-flex; margin: 0 0 20px; font: 700 .8125rem/1 "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.chapter--closing .closing-payoff::before { display: none; }
.chapter--closing h2 { margin: 0; color: var(--ink); font-size: clamp(2.2rem, 3.8vw, 3.2rem); line-height: 1.06; letter-spacing: -.035em; max-width: 20ch; text-align: center; text-wrap: balance; }
.chapter--closing h2 em { font-style: normal; background: linear-gradient(90deg, #0066FF, #3B8BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chapter--closing .sub { margin: 18px auto 0; color: var(--body-c); font-size: 1.125rem; line-height: 1.6; max-width: 46ch; text-align: center; }
.chapter--closing .intake__blok { display: grid; justify-items: center; gap: 22px; margin-top: 32px; background: none; border: 0; padding: 0; }
.chapter--closing .contact__actions { margin: 0; justify-content: center; }
.chapter--closing .btn--primary { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 10px 30px rgba(0, 102, 255, .30); }
.chapter--closing .contact__proof { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.chapter--closing .contact__proof li { color: var(--ink); font-size: 1rem; font-weight: 500; display: flex; align-items: center; gap: 8px; padding: 0 20px; border-left: 1px solid #A8B2C2; }
.chapter--closing .contact__proof li:first-child { border-left: 0; }
.chapter--closing .contact__proof svg { color: var(--primary); width: 16px; height: 16px; }
.chapter--closing .contact__mail { margin: 0; color: var(--muted); font-size: .9375rem; }
.chapter--closing .contact__mail a { color: var(--primary); }
@media (max-width: 900px) {
  .chapter--closing { padding-block: 56px 64px; }
  .chapter--closing h2 { font-size: clamp(1.9rem, 7.5vw, 2.6rem); }
  .chapter--closing .sub { font-size: 1.05rem; }
  .chapter--closing .contact__proof { flex-direction: column; align-items: center; gap: 8px; }
  .chapter--closing .contact__proof li { border-left: 0; padding: 0; }
}
/* Intake-band: achter de gecentreerde tekst een nachtblauw vlak (29 sept) */
.chapter--closing .container.intake { max-width: 880px; padding: clamp(40px, 5vw, 64px) clamp(24px, 5vw, 64px); background-color: #121C38; background-image: radial-gradient(ellipse 60% 80% at 90% 90%, rgba(0, 102, 255, .32), transparent 62%), radial-gradient(ellipse 45% 60% at 5% 10%, rgba(125, 211, 252, .14), transparent 62%); border-radius: 20px; box-shadow: 0 24px 60px rgba(11, 19, 40, .28); color: #fff; }
.chapter--closing .closing-payoff { color: #7DD3FC; }
.chapter--closing h2 { color: #fff; }
.chapter--closing h2 em { background: linear-gradient(90deg, #3B8BFF, #7DD3FC); -webkit-background-clip: text; background-clip: text; }
.chapter--closing .sub { color: #DDE9FF; }
.chapter--closing .contact__proof li { color: #fff; border-left-color: rgba(255, 255, 255, .25); }
.chapter--closing .contact__proof svg { color: #7DD3FC; }
.chapter--closing .contact__mail { color: #A8B2C2; }
.chapter--closing .contact__mail a { color: #7DD3FC; }
.chapter--closing .btn--primary { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 30px rgba(0, 102, 255, .45); }
@media (max-width: 640px) { .chapter--closing .container.intake { width: calc(100% - 32px); padding: 32px 20px; border-radius: 16px; } }
/* Intake omgedraaid (29 sept): sectie nachtblauw dat doorloopt in de footer, het vlak wit */
.chapter--closing { background-color: #0B1328; background-image: radial-gradient(ellipse 50% 70% at 92% 30%, rgba(0, 102, 255, .20), transparent 62%), radial-gradient(ellipse 45% 60% at 5% 90%, rgba(125, 211, 252, .10), transparent 62%); }
.chapter--closing::before { display: none; }
.chapter--closing .container.intake { background-color: #FFFFFF; background-image: none; color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06); }
.chapter--closing .closing-payoff { color: var(--primary); }
.chapter--closing h2 { color: var(--ink); }
.chapter--closing h2 em { background: linear-gradient(90deg, #0066FF, #3B8BFF); -webkit-background-clip: text; background-clip: text; }
.chapter--closing .sub { color: var(--body-c); }
.chapter--closing .contact__proof li { color: var(--ink); border-left-color: #C9D3E0; }
.chapter--closing .contact__proof svg { color: var(--primary); }
.chapter--closing .contact__mail { color: var(--muted); }
.chapter--closing .contact__mail a { color: var(--primary); }
.chapter--closing .btn--primary { box-shadow: var(--shadow-btn); }
.footer--v2 { border-top: 0; background-image: none; }
/* Intake en footer exact gelijk: beide egaal nachtblauw, geen licht, geen lijn (29 sept) */
.chapter--closing { background-image: none; padding-bottom: 48px; }
.footer--v2 { background-color: #0B1328; background-image: none; border-top: 0; padding-top: 40px; }
/* Grijs streepje boven de footer, tussen de intake en "Work that runs itself." (29 sept) */
.footer--v2 { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 48px; }
.chapter--closing { padding-bottom: clamp(64px, 8vw, 104px); }
/* Intakevlak frisser: wit dat naar lichtblauw loopt, dunne blauwe rand en een lichtblauwe lijn bovenin (29 sept) */
.chapter--closing .container.intake { position: relative; overflow: hidden; background-color: #F5F8FF; background-image: linear-gradient(180deg, #FFFFFF 0%, #EEF4FF 100%), radial-gradient(ellipse 60% 70% at 90% 100%, rgba(0, 102, 255, .10), transparent 65%); border: 1px solid rgba(0, 102, 255, .18); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 40px rgba(0, 102, 255, .18); }
.chapter--closing .container.intake::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #0066FF, #7DD3FC); }
/* Intakevlak als glas op het nachtblauw (29 sept): doorschijnend, wazige achtergrond, witte tekst */
.chapter--closing { background-image: radial-gradient(ellipse 50% 70% at 78% 40%, rgba(0, 102, 255, .30), transparent 62%), radial-gradient(ellipse 40% 60% at 15% 80%, rgba(125, 211, 252, .14), transparent 62%); }
.chapter--closing .container.intake { background-color: rgba(255, 255, 255, .07); background-image: none; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 24px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); color: #fff; }
.chapter--closing .container.intake::before { height: 1px; background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .9), transparent); }
.chapter--closing .closing-payoff { color: #7DD3FC; }
.chapter--closing h2 { color: #fff; }
.chapter--closing h2 em { background: linear-gradient(90deg, #3B8BFF, #7DD3FC); -webkit-background-clip: text; background-clip: text; }
.chapter--closing .sub { color: #DDE9FF; }
.chapter--closing .contact__proof li { color: #fff; border-left-color: rgba(255, 255, 255, .25); }
.chapter--closing .contact__proof svg { color: #7DD3FC; }
.chapter--closing .contact__mail { color: #A8B2C2; }
.chapter--closing .contact__mail a { color: #7DD3FC; }
.chapter--closing .btn--primary { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 30px rgba(0, 102, 255, .45); }
@supports not (backdrop-filter: blur(1px)) { .chapter--closing .container.intake { background-color: rgba(22, 32, 56, .92); } }
/* Glas een stuk lichter (29 sept) */
.chapter--closing .container.intake { background-color: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); box-shadow: 0 24px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
@supports not (backdrop-filter: blur(1px)) { .chapter--closing .container.intake { background-color: rgba(60, 76, 110, .95); } }
/* ═══ Slot van de site (29 sept, definitief): intake op krijtwit met één nachtblauw vlak, daaronder direct de donkere footer ═══ */
.chapter--closing { background-color: var(--ground); background-image: none; border-top: 0; padding-block: clamp(64px, 8vw, 112px); }
.chapter--closing .container.intake { background-color: #121C38; background-image: radial-gradient(ellipse 60% 80% at 90% 90%, rgba(0, 102, 255, .32), transparent 62%), radial-gradient(ellipse 45% 60% at 5% 10%, rgba(125, 211, 252, .14), transparent 62%); border: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 24px 60px rgba(11, 19, 40, .28); -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; }
.chapter--closing .container.intake::before { display: none; }
.footer--v2 { border-top: 0; padding-top: 56px; }
@supports not (backdrop-filter: blur(1px)) { .chapter--closing .container.intake { background-color: #121C38; } }
/* ═══ Slot, correctie (29 sept): de intake weer nachtblauw met het lichte glas; alleen de footer wordt licht ═══ */
.chapter--closing { background-color: #0B1328; background-image: radial-gradient(ellipse 50% 70% at 78% 40%, rgba(0, 102, 255, .30), transparent 62%), radial-gradient(ellipse 40% 60% at 15% 80%, rgba(125, 211, 252, .14), transparent 62%); padding-block: clamp(72px, 9vw, 128px); }
.chapter--closing .container.intake { background-color: rgba(255, 255, 255, .16); background-image: none; border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 24px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); color: #fff; }
.chapter--closing .container.intake::before { display: block; height: 1px; background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .9), transparent); }
@supports not (backdrop-filter: blur(1px)) { .chapter--closing .container.intake { background-color: rgba(60, 76, 110, .95); } }

.footer--v2 { background-color: var(--ground); background-image: none; border-top: 1px solid var(--line); color: var(--muted); padding: 56px 0 28px; }
.footer--v2 .footer__payoff { color: var(--ink); }
.footer--v2 .footer__head { color: var(--ink); }
.footer--v2 .footer__link { color: var(--muted); }
.footer--v2 .footer__link:hover { color: var(--primary); }
.footer--v2 .footer__bottom { border-top-color: var(--line); }
.footer--v2 .footer__legal { color: var(--muted); }
/* Footer: logo groter, slogan iets groter en dichter bij het logo (29 sept) */
.footer--v2 .footer__logo img { height: 34px; }
.footer--v2 .footer__identity { gap: 18px; }
.footer--v2 .footer__payoff { font-size: 1.125rem; }
@media (max-width: 700px) { .footer--v2 .footer__logo img { height: 28px; } }
/* Footer voller (29 sept): logo en slogan verticaal in het midden naast drie kolommen, derde kolom "Direct" met mail en intake */
.footer--v2 .footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 36px 48px; align-items: center; }
.footer--v2 .footer__identity { align-self: center; gap: 14px; }
.footer--v2 .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.footer--v2 .footer__link--cta { color: var(--primary); font-weight: 600; }
.footer--v2 .footer__bottom { padding-top: 18px; margin-top: 8px; }
.footer--v2 { padding: 48px 0 24px; }
@media (max-width: 900px) { .footer--v2 .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .footer--v2 .footer__inner { grid-template-columns: 1fr; gap: 28px; align-items: start; } .footer--v2 .footer__cols { grid-template-columns: 1fr 1fr; } }
/* ═══ Footer v3 (29 sept): slogan als grote kop met blauw, kolomkoppen met streepje, blauwe lijn bovenaan ═══ */
.footer--v2 { position: relative; padding: 64px 0 28px; border-top: 0; }
.footer--v2::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #0066FF 0%, #3B8BFF 40%, #7DD3FC 100%); }
.footer--v2 .footer__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr); gap: 40px 64px; align-items: start; }
.footer--v2 .footer__identity { gap: 20px; align-self: start; }
.footer--v2 .footer__logo img { height: 26px; }
.footer--v2 .footer__payoff { margin: 8px 0 0; font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.06; color: var(--ink); max-width: 12ch; }
.footer--v2 .footer__payoff em { font-style: normal; background: linear-gradient(90deg, #0066FF, #3B8BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer--v2 .footer__tag { margin: -6px 0 0; font-size: 1rem; color: var(--muted); }
.footer--v2 .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; padding-top: 6px; }
.footer--v2 .footer__col { gap: 12px; }
.footer--v2 .footer__head { margin: 0 0 8px; padding-bottom: 12px; position: relative; color: var(--ink); }
.footer--v2 .footer__head::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; background: var(--primary); border-radius: 2px; }
.footer--v2 .footer__link { font-size: 1rem; color: var(--body-c); }
.footer--v2 .footer__link:hover { color: var(--primary); }
.footer--v2 .footer__link--cta { color: var(--primary); }
.footer--v2 .footer__bottom { margin-top: 24px; padding-top: 20px; }
@media (max-width: 700px) {
  .footer--v2 { padding: 48px 0 24px; }
  .footer--v2 .footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .footer--v2 .footer__payoff { font-size: 1.7rem; }
  .footer--v2 .footer__cols { grid-template-columns: 1fr 1fr; }
}
/* Footer: slogan weer als gewone regel, geen blauw; onderregel alleen © en KvK (29 sept) */
.footer--v2 .footer__payoff { margin: 4px 0 0; font-size: 1.125rem; font-weight: 500; letter-spacing: 0; line-height: 1.4; max-width: none; color: var(--ink); }
.footer--v2 .footer__tag { margin: 0; }
/* Footer: logo een stuk groter (29 sept) */
.footer--v2 .footer__logo img { height: 40px; }
.footer--v2 .footer__identity { gap: 16px; }
@media (max-width: 700px) { .footer--v2 .footer__logo img { height: 32px; } }
/* Intake-vinkjes ook op de telefoon naast elkaar (29 sept) */
@media (max-width: 900px) {
  .chapter--closing .contact__proof { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 0; }
  .chapter--closing .contact__proof li { border-left: 1px solid rgba(255, 255, 255, .25); padding: 0 12px; font-size: .9375rem; }
  .chapter--closing .contact__proof li:first-child { border-left: 0; }
}
/* Oprichters op de telefoon (29 sept): foto's even breed als de kop, dus niet meer gecentreerd ingesprongen */
@media (max-width: 600px) { .chapter--founders .founder-grid { max-width: none; margin: 0; } }
/* Het probleem: de drie teksten reageren op de muis, zoals de oprichtersfoto's (29 sept) */
.spoor-track > .spoor-col { transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.spoor-track > .spoor-col:not(.spoor-col--us):hover { transform: translateY(-4px); border-left-color: var(--primary); }
.spoor-track > .spoor-col:not(.spoor-col--us):hover h3 { color: var(--primary); }
.spoor-track > .spoor-col h3 { transition: color var(--dur-base) var(--ease-out); }
.spoor-track > .spoor-col.spoor-col--us:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 102, 255, .18), 0 0 0 1px rgba(0, 102, 255, .12); }
@media (prefers-reduced-motion: reduce) { .spoor-track > .spoor-col, .spoor-track > .spoor-col h3 { transition: none; } .spoor-track > .spoor-col:hover { transform: none; } }
/* Hover zonder blauw: alleen omhoog en een zachte schaduw (29 sept) */
.spoor-track > .spoor-col:not(.spoor-col--us):hover { border-left-color: var(--ink); }
.spoor-track > .spoor-col:not(.spoor-col--us):hover h3 { color: var(--ink); }
.spoor-track > .spoor-col.spoor-col--us:hover { box-shadow: 0 16px 40px rgba(23, 24, 28, .10); }
/* Werkwijze-kaarten reageren op de muis: iets omhoog met een zachte schaduw (29 sept) */
.chapter--method-dark .rail__card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.chapter--method-dark .rail__item:hover .rail__card { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(18, 48, 107, .30); }
@media (prefers-reduced-motion: reduce) { .chapter--method-dark .rail__card { transition: none; } .chapter--method-dark .rail__item:hover .rail__card { transform: none; } }
/* Footer compact op de telefoon (29 sept): drie kolommen naast elkaar, kleinere maten, minder lucht */
@media (max-width: 700px) {
  .footer--v2 { padding: 36px 0 20px; }
  .footer--v2 .footer__inner { gap: 24px; }
  .footer--v2 .footer__identity { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px; }
  .footer--v2 .footer__logo { grid-row: 1 / span 2; }
  .footer--v2 .footer__logo img { height: 26px; }
  .footer--v2 .footer__payoff { margin: 0; font-size: 1rem; line-height: 1.3; }
  .footer--v2 .footer__tag { font-size: .875rem; }
  .footer--v2 .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 0; }
  .footer--v2 .footer__col { gap: 8px; }
  .footer--v2 .footer__head { font-size: .75rem; padding-bottom: 8px; margin-bottom: 4px; }
  .footer--v2 .footer__head::after { width: 18px; }
  .footer--v2 .footer__link { font-size: .875rem; }
  .footer--v2 .footer__bottom { margin-top: 12px; padding-top: 14px; }
  .footer--v2 .footer__legal { font-size: .75rem; }
}
@media (max-width: 400px) { .footer--v2 .footer__link { font-size: .8125rem; } }
/* Footer telefoon: slogan weer onder het logo; "Automatiseringen en websites" onderin bij de KvK-regel (29 sept) */
@media (max-width: 700px) {
  .footer--v2 .footer__identity { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .footer--v2 .footer__logo { grid-row: auto; }
  .footer--v2 .footer__tag { display: none; }
  .footer--v2 .footer__bottom { flex-direction: row; justify-content: space-between; gap: 12px; }
  .footer--v2 .footer__bottom::after { content: "Automatiseringen en websites"; font-size: .75rem; color: var(--muted); }
}
/* Oprichters (29 sept): toelichting voorlopig verborgen; komt terug zodra er een goede plek voor is */
.chapter--founders .founder-card__bio { display: none; }
/* Oprichters: korte toelichting onder de rol, op een licht wazig donker vlak zodat hij leesbaar is (29 sept) */
.chapter--founders .founder-card__bio { display: block; margin: 12px -8px 0; padding: 10px 12px; font-size: .875rem; line-height: 1.45; color: rgba(255, 255, 255, .88); background: rgba(11, 19, 40, .45); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.chapter--founders .founder-card__text::after { display: none; }
.chapter--founders .founder-card__name::after { content: ""; display: block; width: 28px; height: 2px; background: #7DD3FC; margin-top: 10px; box-shadow: 0 0 10px rgba(125, 211, 252, .6); }
@media (max-width: 900px) { .chapter--founders .founder-card__bio { font-size: .8125rem; } }
/* Toelichting gewoon op de foto, zonder vlak; de foto zelf wordt onderaan iets donkerder voor de leesbaarheid (29 sept) */
.chapter--founders .founder-card__bio { margin: 10px 0 0; padding: 0; background: none; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 12px rgba(11, 19, 40, .8); }
.chapter--founders .founder-card__photo::after { background: linear-gradient(180deg, rgba(11, 19, 40, 0) 35%, rgba(11, 19, 40, .6) 60%, rgba(11, 19, 40, .96) 100%); }
/* Oprichters: de "Geen AI zonder ..."-zin als losse regel onder de toelichting (29 sept) */
.chapter--founders .founder-card__motto { margin: 10px 0 0; font-size: .9375rem; font-weight: 600; color: #fff; text-shadow: 0 1px 12px rgba(11, 19, 40, .8); }
@media (max-width: 900px) { .chapter--founders .founder-card__motto { font-size: .875rem; } }
/* Oprichters: rolregel in wit, direct onder de naam; daaronder de toelichting (29 sept) */
.chapter--founders .founder-card__text { color: #fff; font-weight: 500; font-size: .9375rem; margin-top: 8px; }
.chapter--founders .founder-card__name::after { display: none; }
.chapter--founders .founder-card__name { margin-bottom: 0; }
.chapter--founders .founder-card__bio { margin-top: 8px; }
/* Oprichters: naam en rol dichter op elkaar, toelichting iets losser eronder (29 sept) */
.chapter--founders .founder-card__name { margin-bottom: 0; line-height: 1.1; }
.chapter--founders .founder-card__text { margin-top: 3px; }
.chapter--founders .founder-card__bio { margin-top: 12px; }
/* Hero op middelgrote schermen (29 sept): tekst en flowdiagram blijven naast elkaar, zoals op desktop. Vanaf 481px, want tot 480px geldt de telefoonindeling */
@media (min-width: 601px) and (max-width: 960px) {
  .flow-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
  .flow-hero__copy { max-width: none; }
  .flow-hero h1 { font-size: clamp(2rem, 4.6vw, 2.8rem); }
  .flow-hero__grid > .flow-field--hero-dark, .flow-hero__grid > .flow-field--hero-dark svg { max-height: none; height: auto; width: 100%; }
}
/* Tablet (481–960): het menu-eiland is gelijk aan de telefoon; de hero blijft wél in twee kolommen zoals op desktop */
@media (min-width: 601px) and (max-width: 960px) {
  .flow-hero__grid { display: grid; position: static; }
  .flow-hero h1 { width: 100%; }
  .flow-hero__grid > .flow-field--hero-dark { position: static; top: auto; right: auto; width: 100%; max-width: none; margin: 0; }
}
@media (min-width: 601px) and (max-width: 960px) {
  .flow-hero h1 span { white-space: normal; }
  .flow-hero h1 { font-size: clamp(1.9rem, 4.8vw, 2.8rem); }
}
/* 481–600px (29 sept): de telefoonindeling blijft, alleen de kop krijgt 62% breedte zodat het diagram er rechts naast past en niet over de tekst valt */
@media (min-width: 481px) and (max-width: 600px) {
  .flow-hero h1 { width: 62%; max-width: none; }
  .flow-hero h1 span { white-space: normal; }
  .flow-hero__intro { max-width: none; }
}
/* Hero, laatste afstelling (29 sept):
   telefoon: het diagram groeit tot ~200px mee en blijft daarna rechts vast staan, zodat het niet tegen de tekst aankruipt;
   tablet: de kop groter en meegroeiend met de breedte, het diagram kleiner. */
@media (max-width: 600px) {
  .flow-hero__grid > .flow-field--hero-dark { width: 37%; max-width: 200px; right: 0; }
}
@media (min-width: 601px) and (max-width: 960px) {
  .flow-hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; }
  .flow-hero h1 { font-size: clamp(2.3rem, 5.8vw, 3.6rem); }
  .flow-hero__grid > .flow-field--hero-dark { max-width: 340px; justify-self: end; }
}
/* Telefoon: diagram een klein stukje hoger, zodat het niet tegen de introtekst aan zit (29 sept) */
@media (max-width: 600px) {
  .flow-hero__grid > .flow-field--hero-dark { top: 44px; }
}