/* Subpage components. */
.page-hero[id], .calc[id], .statement[id] {
  scroll-margin-top: var(--nav-offset);
}
.page-hero h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  max-width: 950px;
}
.page-hero__sub {
  margin: var(--space-4) 0 0;
  max-width: 740px;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.7;
}
.step-detail {
  border-top: var(--rule-weight) solid var(--ink);
  padding-top: var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: start;
}
.step-detail__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.step-detail__num {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1rem;
  line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: transparent;
  position: relative;
  margin-left: 24px;
}
.step-detail__head h3 {
  font-size: 1.3125rem;
}
.step-detail__body p {
  margin: 0 0 var(--space-3);
  font-size: 0.9875rem;
}
.step-detail__body p:last-child {
  margin-bottom: 0;
}
.step-detail__split {
  font-size: 0.875rem;
  color: var(--muted);
}
.step-detail__split b {
  color: var(--ink);
  font-weight: 600;
}
.step-detail__aside {
  background: var(--tint);
  padding: var(--space-5);
}
.step-detail__aside h4 {
  margin: 0 0 var(--space-3);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  color: var(--primary);
}
.step-detail__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.step-detail__list li {
  position: relative;
  padding: 4px 0 4px 26px;
  font-size: 0.9375rem;
  color: var(--body-c);
}
.step-detail__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
}
.calc {
  background: var(--dark-bg);
  color: var(--dark-ink);
  padding: var(--space-7);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}
.calc__intro h3 {
  color: var(--dark-ink);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: 1.75rem;
  line-height: 1.15;
}
.calc__intro p {
  margin: var(--space-4) 0 0;
  color: var(--dark-muted);
  font-size: 0.9875rem;
}
.calc__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.calc__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.calc__field label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  color: var(--dark-muted);
}
.calc__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.calc__range {
  flex: 1;
  accent-color: var(--primary);
  min-height: 24px;
}
.calc__result-label {
  margin: 0 0 var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  color: var(--dark-muted);
}
.calc__result-num {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 3rem;
  line-height: 1;
  color: var(--dark-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc__result-sub {
  margin: var(--space-2) 0 0;
  font-size: 0.9375rem;
  color: var(--dark-muted);
}
.calc__result-sub b {
  color: var(--dark-ink);
  font-variant-numeric: tabular-nums;
}
.calc__compare {
  margin: var(--space-4) 0 0;
  font-size: 0.9875rem;
  color: var(--dark-ink);
}
.calc__compare b {
  color: var(--tint);
  font-variant-numeric: tabular-nums;
}
.calc__compare a {
  color: var(--tint);
}
.calc__disclaimer {
  margin: var(--space-5) 0 0;
  font-size: 0.875rem;
  color: var(--dark-muted);
}
.offer {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.offer--featured {
  background: linear-gradient(145deg,var(--tint),#fff);
  border-color: var(--primary);
}
.offer__tag {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-primary);
  background: var(--primary);
  padding: 3px 10px;
}
.offer h3 {
  font-size: 1.3125rem;
  line-height: 1.3;
}
.offer__price {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}
.offer__price small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.offer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.offer__list li {
  position: relative;
  padding: 5px 0 5px 26px;
  font-size: 1rem;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
  padding-block: 9px;
}
.offer__list li:last-child {
  border-bottom: 0;
}
.offer__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 14px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
}
.offer .btn {
  margin-top: auto;
  align-self: flex-start;
}
.offer__note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.compare-wrap {
  overflow-x: auto;
}
.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.compare th, .compare td {
  text-align: left;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  font-size: 0.9875rem;
  vertical-align: top;
}
.compare thead th {
  border-top: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  color: var(--muted);
}
.compare tbody th {
  font-weight: 600;
  color: var(--ink);
  width: 22%;
}
.compare .compare__us {
  background: var(--tint);
}
.compare thead .compare__us {
  color: var(--primary);
}
.compare tbody .compare__us {
  font-weight: 600;
  color: var(--ink);
}
.case-feature {
  background: var(--ink);
  color: var(--dark-ink);
  padding: var(--space-7);
  margin-bottom: var(--space-7);
}
.case-feature h3 {
  color: var(--dark-ink);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: 1.75rem;
  line-height: 1.15;
}
.case-feature p {
  margin: var(--space-4) 0 0;
  color: var(--dark-muted);
  font-size: 0.9875rem;
  max-width: var(--measure);
}
.case-feature .proofbar {
  margin-top: var(--space-5);
}
.statement {
  background: var(--ground);
  color: var(--ink);
  padding: var(--space-9) 0;
}
.statement__quote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.06;
  color: var(--dark-ink);
  max-width: 21em;
}
.statement__quote .accent {
  color: var(--ink);
}
.statement__body {
  margin: var(--space-6) 0 0;
  color: var(--dark-muted);
  max-width: var(--measure);
  font-size: 1.0625rem;
}
.statement__points {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
}
.statement__points li {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  font-size: 0.9875rem;
  color: var(--dark-muted);
}
.statement__points b {
  color: var(--dark-ink);
}
.statement__points .num {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tint);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.dienst-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-8);
}
.dienst {
  border-top: var(--rule-weight) solid var(--ink);
  padding-top: var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: start;
}
.dienst__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.dienst__head h2 {
  font-size: 1.65rem;
  letter-spacing: -.025em;
}
.dienst__tag {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  color: var(--on-primary);
  background: var(--primary);
  padding: 3px 10px;
  border-radius: var(--radius-card);
}
.dienst__body p {
  margin: 0 0 var(--space-3);
  font-size: 0.9875rem;
}
.dienst__body p:last-child {
  margin-bottom: 0;
}
.dienst__for {
  color: var(--muted);
  font-size: 0.9375rem;
}
.dienst__aside {
  background: var(--tint);
  padding: var(--space-5);
}
.dienst__aside h3 {
  margin: 0 0 var(--space-3);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: var(--label-tracking);
  color: var(--primary);
}
.dienst__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dienst__list li {
  position: relative;
  padding: 4px 0 4px 26px;
  font-size: 0.9375rem;
  color: var(--body-c);
}
.dienst__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
}
.dienst__pill {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
  white-space: normal;
  flex-wrap: wrap;
}
.dienst__pill:hover {
  border-color: var(--primary);
  transform: none;
}
.dienst__pill b {
  color: var(--primary);
  font-weight: 600;
}
.dienst__pill .chevron {
  color: var(--primary);
}
.dienst[id] {
  scroll-margin-top: var(--nav-offset);
}
.page-hero + .section {
  padding-top: 64px;
}
.page-hero .proofbar {
  margin-top: 32px;
}
.dienst, .step-detail {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 32px;
  background: var(--surface);
}
.dienst__aside, .step-detail__aside {
  border-radius: var(--radius-inner);
  background: var(--ground);
}
.dienst__body p, .step-detail__body p {
  font-size: 1rem;
  line-height: 1.7;
}
.offer__tag, .case-feature__badge {
  border-radius: var(--radius-card);
}
.offer__note, .calc__field label, .calc__result-label {
  font-size: .875rem;
}
.statement__quote, .statement__points b {
  color: var(--ink);
}
.statement__quote .accent, .statement__points .num {
  color: var(--primary);
}
.statement__body, .statement__points li {
  color: var(--body-c);
}
.statement .btn--ghost-dark {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
.step-detail__num::before {
  content: "";
  position: absolute;
  right: 100%;
  width: 24px;
  height: 1px;
  background: var(--rail-color);
}
.page-hero {
  padding: 158px 0 64px;
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}
.content-chapter--white {
  background: var(--surface);
}
.content-chapter--clay {
  background: var(--clay);
}
body[data-page="diensten"] .statement {
  background: var(--tint);
}
.calc__input {
  width: 88px;
  background: var(--ground);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  padding: 8px 10px;
  text-align: right;
  border-radius: var(--radius-inner);
  border-color: var(--line);
}
.calc__input:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  outline-color: var(--primary);
}
.calc__result {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: var(--space-5);
  border-color: var(--line);
}
.calc__compare b, .calc__compare a {
  color: var(--primary);
}
.case-feature__badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 2px solid var(--dark-accent);
  padding: 3px 10px;
  margin-bottom: var(--space-4);
  border-color: var(--line);
}
@media   (max-width: 960px)   {.calc {
  grid-template-columns: 1fr;
}}
@media   (max-width: 760px)   {.step-detail {
  grid-template-columns: 1fr;
}
.page-hero {
  padding-top: calc(var(--nav-top) + var(--nav-height) + var(--space-7));
}}
@media   (max-width: 760px)   {.dienst {
  grid-template-columns: 1fr;
}}
@media   (max-width:600px)   {.page-hero {
  padding: 120px 0 40px;
}}

/* Rekensom: tekst naast de calculator op Leiblauw. */
.chapter--calculation { background-color:var(--slate); background-image: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%),radial-gradient(circle,rgba(91,157,255,.15) 1px,transparent 1px); background-size:auto,auto,22px 22px; }
.calc.calculator-layout { display:grid; grid-template-columns:.95fr 1.05fr; gap:52px; align-items:center; background:transparent; border:0; padding:0; box-shadow:none; }
.calculator-label { font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.14em; font-weight:700; color:#5B9DFF; margin:0 0 16px; font-size:.8125rem; }
.calculator-copy h2 { color:white; font-size:clamp(1.9rem,3.4vw,2.8rem); }
.calculator-intro { font-size:1.25rem; color:#A8B2C2; margin:24px 0; }
.calculator-disclaimer { font-size:1rem; color:#7C879A; margin-top:48px; max-width:390px; }
.calculator-panel { min-width:0; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:30px; }
.calculator-field + .calculator-field { margin-top:28px; }
.calculator-field__heading { display:flex; align-items:center; justify-content:space-between; gap:12px; color:white; margin-bottom:16px; }
.calculator-field label { font-size:1rem; }
.calculator-number { width:68px; flex-shrink:0; color:white; background:transparent; border:1px solid rgba(255,255,255,.18); border-radius:8px; padding:6px; font:600 1.125rem 'Barlow',sans-serif; text-align:right; }
.calculator-range { appearance:none; display:block; width:100%; height:6px; border:0; border-radius:999px; background:rgba(255,255,255,.18); cursor:pointer; margin:12px 0; }
.calculator-range::-webkit-slider-thumb { appearance:none; width:22px; height:22px; border-radius:50%; border:5px solid var(--primary); background:white; box-shadow:0 2px 8px #0003; }
.calculator-range::-moz-range-thumb { box-sizing:border-box; width:22px; height:22px; border-radius:50%; border:5px solid var(--primary); background:white; box-shadow:0 2px 8px #0003; }
.calculator-range:focus-visible,.calculator-number:focus-visible { outline:2px solid #5B9DFF; outline-offset:4px; }
.calculator-hint { color:#A8B2C2; font-size:.8125rem; margin:14px 0 0; }
.calculator-result { border-top:1px solid rgba(255,255,255,.12); margin-top:30px; padding-top:26px; }
.calculator-amount { color:white; font-size:clamp(2.4rem,5vw,3.4rem); font-weight:700; font-variant-numeric:tabular-nums; line-height:1.15; margin:0; }
.calculator-hours { color:#A8B2C2; margin:12px 0 0; }
.calculator-footer { border-top:1px solid rgba(255,255,255,.12); padding-top:24px; margin:24px 0 0; font-size:1.0625rem; color:white; }
.calculator-footer a { color:#5B9DFF; }
@media(max-width:880px) { .calc.calculator-layout { grid-template-columns:1fr; gap:32px; } .calculator-disclaimer { margin-top:24px; } .calculator-panel { padding:24px; } .calculator-amount {font-size:2.4rem;} }

/* ===== Sectie 4 — Wat je krijgt (10 sept: kop gecentreerd, twee kaarten) ===== */
.chapter--outcome { background:var(--surface); }
.outcome-head { text-align:center; margin:0 0 44px; }
.outcome-head .node-label { margin-bottom:18px; }
.outcome-head h2 { font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.12; letter-spacing:-.035em; margin:0 auto; max-width:22ch; text-wrap:balance; }

/* het knooppunt-label: de sectiekop als n8n-node */
.node-label { display:inline-flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:7px 14px 7px 10px; box-shadow:0 1px 2px rgba(23,24,28,.05); position:relative; }
.node-label::after { content:""; position:absolute; right:-19px; top:50%; transform:translateY(-50%); width:19px; height:2px; background:rgba(0,102,255,.35); }
.node-label__chip { width:18px; height:18px; border-radius:5px; background:var(--tint); border:1px solid rgba(0,102,255,.35); display:grid; place-items:center; flex:none; }
.node-label__chip::before { content:""; width:8px; height:2px; background:var(--primary); box-shadow:0 3px 0 var(--primary), 0 -3px 0 var(--primary); }
.node-label__text { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); }

/* twee kaarten, gelijke hoogte */
.outcome-duo { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }

/* links: donker paneel met de vier uitkomsten */
.outcome-panel { list-style:none; margin:0; padding:38px 38px 30px; background:var(--slate); background-image:radial-gradient(circle,rgba(91,157,255,.16) 1px,transparent 1px); background-size:18px 18px; border-radius:20px; box-shadow:0 12px 34px rgba(26,34,51,.24); color:#fff; display:flex; flex-direction:column; justify-content:space-evenly; gap:0; }
.outcome-panel li { display:flex; align-items:center; gap:20px; }
.outcome-panel b { display:block; font-size:1.3125rem; font-weight:600; letter-spacing:-.02em; line-height:1.2; }
.outcome-panel span { display:block; font-size:1.0625rem; color:#A8B2C2; margin-top:4px; line-height:1.45; }
.outcome-ico { width:54px; height:54px; border-radius:50%; flex:none; position:relative; background:transparent; border:2px solid var(--primary); color:#fff; }
.outcome-ico svg { position:absolute; top:50%; left:50%; width:22px; height:22px; transform:translate(-50%,-50%); display:block; margin:0; }
.outcome-panel__foot { font-size:.9375rem; color:#7C879A; margin-top:auto; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); display:block; line-height:1.5; }

/* rechts: de tekstkaart */
.outcome-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:40px 40px; display:flex; flex-direction:column; justify-content:flex-start; gap:0; }
.outcome-card__title { font-size:clamp(2rem,3vw,2.5rem); font-weight:600; letter-spacing:-.035em; line-height:1.1; color:var(--primary); margin:0 0 18px; }
.outcome-card__title--2 { margin-top:34px; padding-top:30px; border-top:1px solid var(--line); }
.outcome-card__lead { font-size:1.4375rem; line-height:1.45; letter-spacing:-.015em; color:var(--ink); margin:0 0 20px; }
.outcome-card__no { font-size:1.1875rem; color:var(--ink); font-weight:600; margin:0; }
.outcome-payoff { margin:30px 0 0; padding-top:26px; border-top:1px solid var(--line); font-size:1.1875rem; line-height:1.4; letter-spacing:-.02em; color:var(--muted); font-weight:500; }
.chapter--outcome .outcome-link { display:inline-flex; margin:14px 0 0; justify-content:flex-start; width:auto; min-height:0; }

@media (max-width:880px) {
  .outcome-duo { grid-template-columns:1fr; gap:18px; }
  .outcome-panel, .outcome-card { padding:26px 22px 22px; }
  .outcome-panel b { font-size:1.125rem; } .outcome-panel span { font-size:.9375rem; }
  .outcome-ico { width:46px; height:46px; }
}

/* ===== PROEF: donkere hero (10 sept). Terugzetten = klasse hero--dark van de sectie halen ===== */
.chapter--hero.hero--dark { background-color:var(--slate); background-image: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%),radial-gradient(circle,rgba(91,157,255,.15) 1px,transparent 1px); background-size:auto,auto,22px 22px; color:#fff; }
.hero--dark .flow-hero__eyebrow { color:#5B9DFF; }
.hero--dark h1 { color:#fff; }
.hero--dark h1 span { color:#5B9DFF; }
.hero--dark .flow-hero__intro { color:#A8B2C2; }
.hero--dark .btn--ghost { background:transparent; border-color:rgba(255,255,255,.4); color:#fff; }
.hero--dark .btn--ghost:hover { border-color:#fff; }
.hero--dark .flow-hero__assurance { color:#A8B2C2; }
/* het flowveld op donker: lijnen lichter, knooppunten donker met lichte rand */
.flow-field--hero-dark .flow-field__line { stroke:rgba(91,157,255,.35); }
.flow-field--hero-dark .flow-field__trace { stroke:#5B9DFF; }
.flow-field--hero-dark .flow-field__pulse { fill:#5B9DFF; }
.flow-field--hero-dark .flow-field__tile { fill:rgba(255,255,255,.06); stroke:rgba(255,255,255,.28); }
.flow-field--hero-dark .flow-field__icon { fill:rgba(91,157,255,.25); }
.flow-field--hero-dark .flow-field__mark, .flow-field--hero-dark .flow-field__detail { stroke:rgba(255,255,255,.55); }
.flow-field--hero-dark .flow-field__node--end .flow-field__tile { stroke:#5B9DFF; }

/* sectie 2 en 4 op dezelfde lichte grond, een tik lichter dan zand (10 sept) */
.chapter--problem, .chapter--outcome { background-color: #FCFAF6; }

/* ===== Intro: logo op Leiblauw, dan schuift de pagina onder het logo vandaan (10 sept) =====
   Puur CSS, dus ook zonder JavaScript verdwijnt hij vanzelf. Eén keer per sessie (zie head). */
.splash { position:fixed; inset:0; z-index:9999; background:var(--slate); display:grid; place-items:center;
  background-image:radial-gradient(ellipse 60% 75% at 8% 40%,rgba(0,102,255,.22),transparent 62%),radial-gradient(circle,rgba(91,157,255,.15) 1px,transparent 1px); background-size:auto,22px 22px;
  animation:splash-out .55s cubic-bezier(.65,0,.35,1) 1s forwards; }
.splash img { width:min(300px,64vw); height:auto; animation:splash-logo .7s cubic-bezier(.2,.7,.2,1) .05s both; }
@keyframes splash-logo { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes splash-out { to { opacity:0; visibility:hidden; pointer-events:none; } }
.no-splash .splash { display:none; }
@media (prefers-reduced-motion:reduce) { .splash { display:none; } }

/* ===== Scroll-reveal: onderdelen komen snel in beeld terwijl je scrolt ===== */
.rv { opacity:0; transition:opacity .6s cubic-bezier(.21,.65,.35,1), transform .6s cubic-bezier(.21,.65,.35,1); }
.rv--up { transform:translateY(28px); }
.rv--left { transform:translateX(-32px); }
.rv--right { transform:translateX(32px); }
.rv--scale { transform:scale(.94); }
.rv.is-in { opacity:1; transform:none; }
.rv.is-in.no-anim { transition:none; }

/* ===== Sectie 2: cijfers heel iets schuin (10 sept) ===== */
.problem-chain__number { display:inline-block; transform:skewX(-9deg); transform-origin:left bottom; }

/* ===== Standaard sectiekop (10 sept): label groter met een lijntje eronder, kop een maat groter.
   Vervangt de streepjes naast het label. Geldt op de home voor elke .section-head. ===== */
body[data-page="index"] .section-head .eyebrow { display:flex; flex-direction:column; align-items:center; gap:10px; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.9375rem; letter-spacing:.16em; margin-bottom:22px; }
body[data-page="index"] .section-head .eyebrow::before { display:none; }
body[data-page="index"] .section-head .eyebrow::after { content:""; width:36px; height:2px; background:var(--primary); border-radius:2px; opacity:1; }
body[data-page="index"] .section-head h2 { font-size:clamp(2.2rem,3.9vw,3.3rem); line-height:1.1; letter-spacing:-.04em; max-width:20ch; margin-left:auto; margin-right:auto; text-wrap:balance; }

/* Wat je krijgt krijgt dezelfde kop, in plaats van het knooppunt-label */
.outcome-head .eyebrow { display:flex; flex-direction:column; align-items:center; gap:10px; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.9375rem; letter-spacing:.16em; text-transform:uppercase; color:var(--primary); margin:0 0 22px; }
.outcome-head .eyebrow::after { content:""; width:36px; height:2px; background:var(--primary); border-radius:2px; }
.outcome-head h2 { font-size:clamp(2.2rem,3.9vw,3.3rem); line-height:1.1; letter-spacing:-.04em; max-width:20ch; }

/* verhouding in de linkerkaart van sectie 4 (10 sept) */
.outcome-card .outcome-card__title { font-size:clamp(1.6rem,2.4vw,2rem); margin:0 0 12px; }
.outcome-card .outcome-card__title--2 { margin-top:36px; padding-top:32px; border-top:1px solid var(--line); }
.outcome-card .outcome-card__lead { font-size:1.25rem; line-height:1.5; margin:0 0 16px; }
.outcome-card .outcome-card__no { font-size:1.0625rem; }

/* ===== Sectie 5 — Werkwijze op donker, gloed rechts (10 sept) ===== */
.chapter--method-dark { background-color:var(--slate); color:#fff; background-image:radial-gradient(ellipse 60% 75% at 92% 40%,rgba(0,102,255,.22),transparent 62%),radial-gradient(ellipse 45% 60% at 5% 85%,rgba(91,157,255,.10),transparent 60%),radial-gradient(circle,rgba(91,157,255,.15) 1px,transparent 1px); background-size:auto,auto,22px 22px; }
.chapter--method-dark .section-head .eyebrow { color:#5B9DFF; }
.chapter--method-dark .section-head .eyebrow::after { background:#5B9DFF; }
.chapter--method-dark .section-head h2 { color:#fff; }
.chapter--method-dark .rail__card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); box-shadow:none; color:#fff; }
.chapter--method-dark .rail__card h3 { color:#fff; }
.chapter--method-dark .rail__card p { color:#A8B2C2; }
.chapter--method-dark .rail__item::after { background:rgba(91,157,255,.35); }
.chapter--method-dark .rail__number { background:var(--slate); border-color:#5B9DFF; color:#fff; }
.chapter--method-dark .rail__item--active .rail__number { background:var(--primary); border-color:var(--primary); }
.chapter--method-dark .section-link { color:#5B9DFF; }
.rail--three { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:960px; margin-left:auto; margin-right:auto; }

/* ===== Slotblok licht, footer donker (12 sept): het ritme licht / donker / licht / donker doorzetten.
   Contact krijgt dezelfde grond als 'Wat je krijgt', de footer het blauw van de werkwijze. ===== */
.chapter--closing { background-color:#FCFAF6; color:var(--ink); }
.chapter--closing h2 { color:var(--ink); }
.chapter--closing .sub, .chapter--closing .contact__meta, .chapter--closing .ph { color:var(--muted); }
.chapter--closing .ph { border-color:var(--muted); }
.closing-payoff { color:var(--primary); }
.chapter--closing .btn--ghost-dark { background:var(--surface); color:var(--ink); border-color:var(--line); }
.chapter--closing .flow-field--dark .flow-field__line { stroke:rgba(0,102,255,.35); }
.chapter--closing .flow-field--dark .flow-field__tile { fill:var(--surface); stroke:var(--line); }
.chapter--closing .flow-field--dark .flow-field__icon { fill:rgba(0,102,255,.2); }
.chapter--closing .flow-field--dark .flow-field__trace { stroke:var(--primary); }
.chapter--closing .flow-field--dark .flow-field__pulse { fill:var(--primary); }

.footer { background-color:var(--slate); color:#A8B2C2; border-top:0; background-image:radial-gradient(ellipse 60% 75% at 92% 40%,rgba(0,102,255,.22),transparent 62%),radial-gradient(circle,rgba(91,157,255,.15) 1px,transparent 1px); background-size:auto,22px 22px; }
.footer__link, .footer__payoff, .footer__legal { color:#A8B2C2; }
.footer__link:hover { color:#fff; }

/* flow-animatie in het lichte slotblok zichtbaarder (12 sept): meer dekking, kleiner leeg midden, blauw in plaats van wit */
.chapter--closing .flow-field--dark { opacity:.6; mask-image:radial-gradient(ellipse 46% 58% at 50% 50%, transparent 0%, transparent 28%, #000 62%); -webkit-mask-image:radial-gradient(ellipse 46% 58% at 50% 50%, transparent 0%, transparent 28%, #000 62%); }
.chapter--closing .flow-field--dark .flow-field__line { stroke:rgba(0,102,255,.45); }
.chapter--closing .flow-field--dark .flow-field__tile { fill:#fff; stroke:rgba(0,102,255,.4); }
.chapter--closing .flow-field--dark .flow-field__icon { fill:rgba(0,102,255,.3); }
.chapter--closing .flow-field--dark .flow-field__mark, .chapter--closing .flow-field--dark .flow-field__detail { stroke:rgba(0,102,255,.5); }

/* slotblok (12 sept): stippen op de grond zoals bij de werkwijze, en een doorzichtige kaart om de tekst zoals de stappenkaarten daar */
.chapter--closing { background-image:radial-gradient(circle,rgba(0,102,255,.16) 1px,transparent 1px); background-size:22px 22px; }
.chapter--closing .container { position:relative; z-index:1; width:min(880px,calc(100% - 32px)); max-width:none; padding:56px clamp(24px,5vw,64px); background:rgba(255,255,255,.72); border:1px solid rgba(0,102,255,.18); border-radius:var(--radius-card); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 10px 30px rgba(26,34,51,.06); }
.chapter--closing .flow-field--dark { mask-image:none; -webkit-mask-image:none; opacity:.5; }
@media (max-width:640px) { .chapter--closing .container { padding:36px 20px; border-radius:16px; } }

/* slotkaart kleiner en doorzichtiger (12 sept): grijzige gloed zoals de stappenkaarten, stippen blijven erdoorheen zichtbaar */
.chapter--closing .container { width:min(760px,calc(100% - 32px)); padding:44px clamp(20px,4vw,52px); background:rgba(232,236,242,.5); border:1px solid rgba(26,34,51,.14); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:0 8px 24px rgba(26,34,51,.05); }

/* flow-animatie in het slotblok rustiger (12 sept): lagere dekking en weer een leeg midden achter de kaart, zodat hij eromheen loopt */
.chapter--closing .flow-field--dark { opacity:.28; mask-image:radial-gradient(ellipse 46% 58% at 50% 50%, transparent 0%, transparent 50%, #000 82%); -webkit-mask-image:radial-gradient(ellipse 46% 58% at 50% 50%, transparent 0%, transparent 50%, #000 82%); }

/* flow-animatie slotblok (12 sept, ronde 3): iets meer dekking, lijnen dichter om de kaart heen */
.chapter--closing .flow-field--dark { opacity:.4; mask-image:radial-gradient(ellipse 40% 52% at 50% 50%, transparent 0%, transparent 46%, #000 70%); -webkit-mask-image:radial-gradient(ellipse 40% 52% at 50% 50%, transparent 0%, transparent 46%, #000 70%); }

/* flow-animatie slotblok (12 sept, ronde 4): tekening vult de hele breedte (slice), daarom minder extra inzoom; leeg midden past bij de kaart */
.chapter--closing .flow-field--dark { transform:scaleX(-1) scale(1.08); mask-image:radial-gradient(ellipse 30% 56% at 50% 50%, transparent 0%, transparent 52%, #000 74%); -webkit-mask-image:radial-gradient(ellipse 30% 56% at 50% 50%, transparent 0%, transparent 52%, #000 74%); }

/* flow-animatie slotblok (12 sept, ronde 5): twee tekeningen op ware grootte, links en rechts van de kaart, geen masker meer */
.chapter--closing .flow-field--dark { mask-image:none; -webkit-mask-image:none; opacity:.42; width:40%; inset:auto; top:50%; height:100%; transform:translateY(-50%) scale(1.15); }
.chapter--closing .flow-field--closing-l { left:-2%; }
.chapter--closing .flow-field--closing-r { right:-2%; transform:translateY(-50%) scaleX(-1) scale(1.15); }
@media (max-width:900px) { .chapter--closing .flow-field--dark { opacity:.22; width:60%; } .chapter--closing .flow-field--closing-l { left:-30%; } .chapter--closing .flow-field--closing-r { right:-30%; } }

/* flow-animatie slotblok (12 sept, ronde 6): smaller, zodat de tekeningen in de ruimte naast de kaart blijven */
.chapter--closing .flow-field--dark { width:27%; opacity:.45; transform:translateY(-50%) scale(1.05); }
.chapter--closing .flow-field--closing-l { left:0; }
.chapter--closing .flow-field--closing-r { right:0; transform:translateY(-50%) scaleX(-1) scale(1.05); }

/* slotkaart strakker (12 sept): rustiger wit, kleinere maat, bewijsregel onder de knop */
.chapter--closing .container { width:min(720px,calc(100% - 32px)); padding:52px clamp(24px,4vw,56px) 44px; background:rgba(255,255,255,.8); border:1px solid rgba(26,34,51,.1); border-radius:24px; box-shadow:0 12px 32px rgba(26,34,51,.05); }
.chapter--closing .closing-payoff { font-size:.9375rem; font-weight:600; letter-spacing:.01em; margin:0 0 16px; }
.chapter--closing h2 { font-size:clamp(1.9rem,3.3vw,2.85rem); letter-spacing:-.03em; line-height:1.1; max-width:600px; margin-inline:auto; }
.chapter--closing .sub { margin:18px auto 0; max-width:480px; font-size:1.0625rem; line-height:1.6; }
.chapter--closing .contact__actions { margin-top:28px; }
.contact__proof { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 0; margin:22px 0 0; font-size:.8125rem; color:var(--muted); }
.contact__proof span { display:inline-flex; align-items:center; }
.contact__proof span + span::before { content:""; width:3px; height:3px; border-radius:50%; background:rgba(0,102,255,.5); margin:0 12px; }

/* slotkaart (12 sept): de payoff als sectielabel met het streepje eronder, zoals bij de werkwijze */
.chapter--closing .closing-payoff { display:flex; flex-direction:column; align-items:center; gap:10px; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.9375rem; letter-spacing:.16em; text-transform:uppercase; color:var(--primary); margin:0 0 22px; }
.chapter--closing .closing-payoff::after { content:""; width:36px; height:2px; background:var(--primary); border-radius:2px; }
.chapter--closing h2 { max-width:640px; }

/* slotkaart donker (12 sept): zelfde blauw en stippen als de rechterkaart bij 'Wat je krijgt' */
.chapter--closing .container { background:var(--slate); background-image:radial-gradient(circle,rgba(91,157,255,.16) 1px,transparent 1px); background-size:18px 18px; border:0; border-radius:20px; box-shadow:0 12px 34px rgba(26,34,51,.24); color:#fff; }
.chapter--closing .closing-payoff { color:#5B9DFF; }
.chapter--closing .closing-payoff::after { background:#5B9DFF; }
.chapter--closing h2 { color:#fff; }
.chapter--closing .sub { color:#A8B2C2; }
.contact__proof { color:#A8B2C2; }
.contact__proof span + span::before { background:rgba(91,157,255,.7); }

/* flow-animatie slotblok (12 sept, ronde 7): één doorlopend netwerk over de volle breedte, heel licht, loopt achter de kaart langs */
.chapter--closing .flow-field--dark { inset:0; top:0; width:100%; height:100%; transform:none; opacity:.3; mask-image:none; -webkit-mask-image:none; }
.chapter--closing .flow-field--dark .flow-field__line { stroke:rgba(0,102,255,.32); }
.chapter--closing .flow-field--dark .flow-field__tile { fill:#fff; stroke:rgba(0,102,255,.3); }
@media (max-width:900px) { .chapter--closing .flow-field--dark { opacity:.22; width:100%; } }

/* rood stipje bij Over ons in de navigatie (12 sept): tijdelijk, tot die pagina af is */
.nav__link { position:relative; }
.nav__dot { position:absolute; top:6px; right:2px; width:6px; height:6px; border-radius:50%; background:#E5321D; }

/* hero op de telefoon (12 sept): kop groter en dichter tegen de menubalk, animatie blijft gelijk */
@media (max-width:600px) {
  .chapter--hero.flow-hero { padding-top:92px; }
  .flow-hero h1 { width:64%; font-size:clamp(2.1rem,9.6vw,3rem); line-height:1.06; letter-spacing:-.03em; }
  .flow-hero__grid > .flow-field--hero-dark { top:40px; }
}

/* hero telefoon (12 sept, ronde 2): kop nog groter, de flow-tekening even hoog als de kop en ernaast uitgelijnd */
@media (max-width:600px) {
  .flow-hero h1 { width:100%; max-width:none; font-size:clamp(2rem,9.2vw,3rem); line-height:1.04; }
  .flow-hero h1 span { white-space:nowrap; }
  .flow-hero__grid > .flow-field--hero-dark { top:66px; right:-2%; width:37%; }
}

/* Wat je krijgt op de telefoon (15 sept): de twee kaarten naast elkaar in een swipe-strook, niet onder elkaar */
@media (max-width:700px) {
  .outcome-duo { display:flex; grid-template-columns:none; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:-24px calc(-1 * var(--gutter)) -40px; padding:24px var(--gutter) 48px; scroll-padding-inline:var(--gutter); }
  /* de extra ruimte boven en onder (met negatieve marge gecompenseerd) is er zodat de strook de schaduw van het donkere paneel niet afknipt */
  .outcome-duo::-webkit-scrollbar { display:none; }
  .outcome-duo > * { flex:0 0 86%; scroll-snap-align:start; }
  .outcome-dots { display:flex; justify-content:center; gap:8px; margin-top:14px; }
  .outcome-dots span { width:7px; height:7px; border-radius:50%; background:var(--line); transition:background .2s; }
  .outcome-dots span.is-on { background:var(--primary); }
}
@media (min-width:701px) { .outcome-dots { display:none; } }

/* e-mailadres in de slotkaart (15 sept) */
.contact__mail { margin:14px 0 0; font-size:.9375rem; color:#A8B2C2; }
.contact__mail a { color:#fff; text-decoration:none; border-bottom:1px solid rgba(91,157,255,.6); }
.contact__mail a:hover { color:#5B9DFF; border-color:#5B9DFF; }

/* lichte secties in lichtblauw (15 sept, gekozen uit de kleurproef): probleem, wat je krijgt en de gratis intake */
.chapter--problem, .chapter--outcome, .chapter--closing { background-color:#EEF3FA; }

/* slotblok altijd van rand tot rand (15 sept): op smalle schermen kreeg .contact weer een marge, vandaar de witte randjes */
.contact.chapter--closing { margin:0 !important; border:0; border-radius:0; width:auto; }

/* slotkaart: drie vinkjes onder de knop (15 sept, variant A gekozen) */
.contact__proof { list-style:none; display:grid; gap:8px; justify-content:center; margin:22px 0 0; padding:0; text-align:left; font-size:.9375rem; color:#A8B2C2; }
.contact__proof li { display:flex; align-items:center; gap:10px; }
.contact__proof li::before { display:none; }
.contact__proof svg { width:16px; height:16px; flex:0 0 16px; color:#5B9DFF; }
.contact__proof span + span::before { display:none; }

/* vinkjes als driehoek (15 sept): Gratis en 30 minuten naast elkaar, de betaalbelofte eronder in het midden */
.contact__proof { display:grid; grid-template-columns:auto auto; justify-content:center; column-gap:32px; row-gap:10px; text-align:center; }
.contact__proof li:last-child { grid-column:1 / -1; justify-self:center; }

/* vinkjes op één regel (15 sept): drie korte woorden naast elkaar, op elk scherm */
.contact__proof { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:24px; font-size:.9375rem; }
.contact__proof li:last-child { grid-column:auto; }
.contact__mail { margin-top:20px; font-size:.9rem; }

/* ===== Over ons op de home: de oprichters (26 sept) ===== */
.chapter--founders { background:var(--surface); }
.chapter--founders .section-head { text-align:center; margin-bottom:48px; }
.founders-intro { max-width:620px; margin:20px auto 0; font-size:1.125rem; line-height:1.65; color:var(--muted); text-wrap:balance; }
.founder-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.founder-card { position:relative; display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:var(--slate); box-shadow:var(--shadow-card); isolation:isolate; }
.founder-card__photo { position:absolute; inset:0; z-index:-1; }
.founder-card__photo picture, .founder-card__photo img { display:block; width:100%; height:100%; object-fit:cover; }
.founder-card__photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(23,24,28,0) 40%,rgba(23,24,28,.55) 65%,rgba(23,24,28,.92) 100%); }
.founder-card__body { padding:0 var(--card-padding) var(--card-padding); }
.founder-card__name { margin:0 0 8px; font-size:1.5rem; font-weight:600; letter-spacing:-.02em; color:var(--dark-ink); }
.founder-card__text { margin:0; color:rgba(255,255,255,.82); line-height:1.6; }
.founders-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 28px; margin-top:48px; }
.founders-more { color:var(--link); font-weight:600; text-decoration:none; }
.founders-more:hover { text-decoration:underline; }
@media (max-width:900px) { .founder-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .founder-grid { grid-template-columns:1fr; max-width:420px; margin:0 auto; } }