/* LocalX — sections 
   Onderdeel van de ForwardX Eleventy-structuur. Alle waarden via var(--naam). */

/* ---------- Branchebalk ---------- */

.branches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 15px;
  /* 31px i.p.v. 30px: in het origineel staan de pillen als inline-block in een
     tekstregel, wat 2px extra oplevert. Zo blijft de balk exact 89px hoog. */
  padding: 31px var(--gutter);
}

.branches__label {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1;
}

.pill {
  padding: 5px 15px;
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--text-sub);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}


/* ---------- Statistieken ---------- */

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gutter);
}

.stat__value {
  margin: 0;
  color: var(--accent);
  font-family: var(--ff-display);
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
}

.stat__label {
  margin: 0;
  color: var(--bg-surface);
  font-size: var(--fs-lead);
  font-weight: 500;
  text-align: center;
}

/* Het origineel heeft onder elke statistiek een lege alinea staan (restant uit
   de editor). Die ruimte bepaalt wel de sectiehoogte, dus nemen we haar hier
   expliciet over in plaats van met een leeg element. */
.stat { padding-bottom: var(--empty-p); }


/* ---------- Diensten ---------- */

/* Ankerpunt voor de #diensten-link. Staat als eigen element in de stapel,
   net als in het origineel, en telt daardoor mee in de verticale ruimte. */
.anchor { display: block; height: 0; }

.services__head { max-width: 660px; }

.services__intro {
  max-width: 624px;
  margin: 0 0 14.4px;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 15px;
}

.service {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  padding: var(--gutter);
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 25px;
}

.service__title {
  margin: 0;
  font-size: var(--fs-card-h);
  line-height: 1.1em;
  letter-spacing: normal;
}

.service__text {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
}

/* Kaarten die in het origineel een lege slotalinea hebben. */
.service--spaced .service__text { margin-bottom: var(--empty-p); }

/* Twee kaarten hebben in het origineel een eigen kleur: de ChatGPT-kaart is
   teal, de Potentie Scan-kaart warm oranje. Beide houden bij hover hun eigen
   randkleur — alleen de lift van 6px blijft. */
.service--ai {
  background-color: var(--bg-teal);
  border-color: var(--teal);
}
.service--ai .service__title,
.service--ai .service__link { color: var(--teal); }
.service--ai .service__link:hover { color: var(--teal-h); }
.service--ai:hover { border-color: var(--teal); }

.service--scan {
  background-color: var(--bg-warm);
  border-color: var(--bd-warm);
}
.service--scan .service__title,
.service--scan .service__link { color: var(--accent); }
.service--scan:hover { border-color: var(--bd-warm); }

.service__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  color: var(--accent);
  font-size: var(--fs-lead);
  font-weight: 600;
}
.service__link:hover { color: var(--accent-h); }
.service__link .icon { display: inline-flex; align-items: center; }
.service__link .icon svg { width: 1em; height: 1em; }

@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .services__grid { grid-template-columns: 1fr; }
}


/* ---------- Resultaten / cases ---------- */

.cases__head { max-width: 100%; }

.cases__intro {
  max-width: 624px;
  margin: 0 0 14.4px;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
}

.cases__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: var(--gutter);
}

.case {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 25px;
  overflow: hidden;
}

.case__media { position: relative; }

.case__photo {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 0;
}

.case__photo-inset {
  position: absolute;
  top: 38px;
  right: 33px;
  width: 315px;
  height: 210px;
  border-radius: 25px;
  object-fit: cover;
}

.case__badge {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 5px 15px;
  background-color: var(--accent);
  border-radius: 99px;
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 28.05px;
  text-transform: uppercase;
}

.case__body {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  padding: var(--gutter);
}

.case__title {
  margin: 0;
  font-size: var(--fs-card-h);
  line-height: 1.1em;
  letter-spacing: normal;
}

.case__text {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

/* De tweede case heeft in het origineel een lege slotregel onder de tekst. */
.case--spaced .case__text { margin-bottom: 28.1px; }

.case__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

.case__stat { display: flex; flex-direction: column; gap: 3px; }

.case__value {
  margin: 0;
  color: var(--accent);
  font-family: var(--ff-display);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1em;
}

.case__label {
  /* In het origineel volgt onder elk label een lege regel; die bepaalt de
     hoogte van de statistiekkolom (92px). */
  margin: 0 0 28.05px;
  color: var(--text-main);
  font-size: var(--fs-label);
  font-weight: 500;
}

.case__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-size: var(--fs-lead);
  font-weight: 700;
}
.case__link:hover { color: var(--accent-h); }
.case__link .icon { display: inline-flex; align-items: center; }
.case__link .icon svg { width: 1em; height: 1em; }

@media (max-width: 900px) {
  .cases__grid { grid-template-columns: 1fr; }
}

/* ---------- Werkwijze ---------- */

.method__intro {
  max-width: 624px;
  margin: 0 0 14.4px;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

.method__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gutter);
}

.step {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: var(--gutter);
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 25px;
}

/* Het stapnummer is in het origineel een SVG-letterpad in een oranje cirkel
   van 59px met 15px padding; die SVG's staan in components/icons.njk. */
.step__num {
  display: inline-block;
  width: 59px;
  height: 59px;
  padding: 15px;
  border-radius: 50%;
  background-color: var(--accent);
  color: var(--bg-page);
}
.step__num svg { display: block; width: 29px; height: 29px; fill: currentColor; }

.step__title {
  margin: 8px 0 16px;
  font-size: var(--fs-card-h);
  line-height: 1.1em;
  letter-spacing: normal;
}

.step__text {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

@media (max-width: 1024px) {
  .method__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .method__grid { grid-template-columns: 1fr; }
}


/* ---------- Dashboard ---------- */

.dashboard__inner {
  display: flex;
  align-items: center;
  gap: var(--gutter);
}

.dashboard__text { flex: 1 1 585px; max-width: 585px; }

.dashboard__intro {
  margin: 0 0 var(--empty-p);
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

.dashboard__visual { flex: 0 0 585px; max-width: 585px; }

.dashboard__visual img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 25px;
}

/* De vinklijst volgt de icon-list van het origineel: 18px tekst met 5px
   onderruimte per regel en een vaste icoonkolom van 18px. */
.checklist { display: flex; flex-direction: column; }

.checklist li {
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.65em;
  word-spacing: var(--ws-lead);
}
.checklist li + li      { margin-top: 5px; }
.checklist li:last-child { padding-bottom: 0; }
.checklist li > span:last-child { padding-left: 5px; }

.check { display: inline-flex; flex: 0 0 18px; justify-content: center; color: var(--accent); }
.check svg { width: 14px; height: 14px; }


/* ---------- CTA ---------- */

.cta__title {
  margin: 0;
  color: var(--bg-surface);
  font-size: var(--fs-section-h);
  line-height: 1.1em;
  letter-spacing: normal;
}

.cta__text {
  margin: 0 0 28px;
  color: var(--bg-surface);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

.cta__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gutter); }


/* ---------- Pagina-hero (donker) ---------- */

.page-hero__title {
  margin: 0;
  color: var(--bg-surface);
  font-size: var(--fs-h1);
  line-height: 1em;
}
.page-hero__title em { color: var(--accent); font-style: italic; }

.page-hero__lead {
  max-width: 696px;
  margin: 0 0 14.4px;
  color: var(--bg-surface);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}


/* ---------- Dienst-hero (kop + beeld onder elkaar) ---------- */

.svc-hero .container { align-items: flex-start; }

.svc-hero__text { align-items: flex-start; }

.svc-hero__lead {
  max-width: 780px;
  margin: 0 0 14.4px;
  color: var(--text-mute);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

.svc-hero__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gutter); }

.svc-hero__visual { width: 780px; max-width: 100%; }
.svc-hero__visual img { width: 100%; height: auto; border-radius: var(--radius-sm); }


/* ---------- Tweekolomssectie met beeld ---------- */

.split__inner {
  display: flex;
  align-items: center;
  gap: var(--gutter);
}

.split__text   { flex: 1 1 585px; max-width: 585px; }
.split__visual { flex: 0 0 585px; max-width: 585px; }

.split__visual img {
  width: 100%;
  height: 563px;
  object-fit: cover;
  border-radius: 25px;
}

.split__title {
  margin: 0;
  font-size: var(--fs-section-h);
  line-height: 1.1em;
  letter-spacing: normal;
}
.split__title em { color: var(--accent); font-style: italic; }

.split__p {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}


/* ---------- Aanpak / componenten ---------- */

.approach__head   { max-width: 720px; }
.approach__head--wide { max-width: 768px; }
.approach__intro  {
  max-width: 624px;
  margin: 0 0 15px;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

/* De knop onder de stappen staat in het origineel gecentreerd. */
.row--center { display: flex; justify-content: center; }
.components__head { max-width: 660px; }

.components__intro {
  max-width: 624px;
  margin: 0 0 14.4px;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

.cta__text--mute { margin-bottom: 0; color: var(--text-mute); }

@media (max-width: 1024px) {
  .split__inner { flex-direction: column; align-items: stretch; }
  .split__text, .split__visual { max-width: 100%; flex: 1 1 auto; }
}

@media (max-width: 767px) {
  /* De knoppen vullen de kolom; daarvoor moet de kolom zelf wel meerekken,
     anders bepaalt de knop de breedte en loopt de hero op smalle schermen uit. */
  .svc-hero .container,
  .svc-hero__text { align-items: stretch; }
  .svc-hero__actions .btn { width: 100%; }
}


/* ---------- Potentie scan ---------- */

.page-hero__title { max-width: 780px; }
.page-hero__title--wide { max-width: none; }   /* chatgpt-vindbaar, verkeer */
.page-hero__title--828  { max-width: 828px; }  /* werkwijze */
.page-hero__lead--wide  { max-width: none; }
.svc-hero__lead--wide   { max-width: none; }

.scan-what__head { max-width: 708px; }




/* ---------- Data dashboard ---------- */

/* De schermafbeeldingen worden in het origineel bijgesneden (object-fit:cover),
   niet ingepast. Met "contain" bleef er een witte rand met rechte hoeken staan
   terwijl de afronding op de lege doos viel. */
.split__visual--plain img {
  max-width: 100%;
  border-radius: var(--radius-sm);
  object-fit: cover;
  object-position: 50% 0;
}

/* Twee alinea's die in het origineel in één tekstblok staan: 15px ertussen
   (de stack geeft 30px, dus de eerste trekt er 15 af) en 45px eronder. */
.split__p:has(+ .split__p--spaced) { margin-bottom: -15px; }
.split__p--spaced { margin-bottom: 15px; }

/* Tabs */
.tabs { display: flex; flex-direction: column; gap: var(--gutter); }

.tabs__list { display: flex; flex-wrap: wrap; gap: 15px; }

.tab {
  padding: 10px 25px;
  background-color: var(--bg-navy);
  border: 1px solid var(--bg-navy);
  border-radius: 99px;
  color: var(--bg-surface);
  font-family: var(--ff-text);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.tab[aria-selected="true"] {
  background-color: var(--text-sub);
  border-color: var(--text-sub);
}
.tab:hover { background-color: var(--text-sub); border-color: var(--text-sub); }

.tab-panel { display: flex; gap: var(--gutter); }
.tab-panel.is-hidden { display: none; }
.tab-panel__text { flex: 1 1 585px; display: flex; flex-direction: column; gap: 15px; }
.tab-panel__text h3 { font-size: var(--fs-card-h); letter-spacing: normal; }
.tab-panel__text p {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}
.tab-panel__visual { flex: 0 0 541px; max-width: 541px; }
.tab-panel__visual img { width: 100%; height: auto; border-radius: 25px; }

/* Rapportage-kaart */
.report__card {
  flex: 0 0 516px;
  max-width: 516px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gutter);
  padding: var(--gutter);
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 25px;
}

/* Kop van de rapportagekaart: documenticoon met titel en klantregel ernaast. */
.report__head { display: flex; align-items: center; gap: 15px; width: 100%; }

.report__icon { flex: 0 0 50px; width: 50px; height: 50px; color: var(--accent); }
.report__icon svg { display: block; width: 50px; height: 50px; fill: currentColor; }

.report__label {
  margin: 0 0 5px;
  color: var(--text-main);
  font-family: var(--ff-display);
  font-size: var(--fs-card-s);
  font-weight: 900;
  line-height: 1.2em;
}

.report__client {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
}

.report__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
  width: 100%;
  padding-top: var(--gutter);
  border-top: 1px solid var(--border);
}

.report__value {
  margin: 0;
  color: var(--accent);
  font-family: var(--ff-display);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2em;
}
/* De tweede en vierde waarde zijn in het origineel groen. */
.report__value--pos { color: var(--positive); }

.report__desc {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
}

@media (max-width: 1024px) {
  .tab-panel { flex-direction: column; }
  .tab-panel__visual { max-width: 100%; flex: 1 1 auto; }
  .report__card { max-width: 100%; flex: 1 1 auto; }
}

/* Dashboard: kolombreedtes en koppen volgens het origineel */
.split--hero .split__text   { flex: 1 1 618px; max-width: 618px; }
.split--hero .split__visual { flex: 0 0 552px; max-width: 552px; }
/* De hero-lead wordt in het origineel gevolgd door een lege alinea */
.split--hero .svc-hero__lead { margin-bottom: var(--empty-p); }
.split--hero .split__visual img { width: 552px; height: 436px; }

.dash-why .split__text   { flex: 1 1 582px; max-width: 582px; }
.dash-why .split__visual { flex: 0 0 588px; max-width: 588px; }
.dash-why .split__visual img { width: 588px; height: 635px; object-fit: scale-down; }

.report .split__text   { flex: 1 1 654px; max-width: 654px; }
.report .split__p--spaced { margin-bottom: 0; }

.categories .section-head { max-width: 100%; }


/* ---------- Over ons ---------- */

.split--about .split__text   { flex: 1 1 558px; max-width: 558px; }
/* De hero-lead wordt gevolgd door een lege alinea, net als op de dienstpagina's */
.split--about .svc-hero__lead { margin-bottom: 15px; }
.about-contact .info-card { gap: 15px; }
.split--about .split__visual { flex: 0 0 612px; max-width: 612px; }
.split--about .split__visual img { width: 612px; height: 436px; object-fit: cover; object-position: 100% 50%; }

.values__head { max-width: 768px; }

.info-card__meta {
  margin: 0;
  color: var(--accent);
  font-size: var(--fs-lead);
  font-weight: 700;
}


/* ---------- Conversie ---------- */

.split--conv .split__text   { flex: 1 1 678px; max-width: 678px; }
.split--conv .split__visual { flex: 0 0 492px; max-width: 492px; }
.split__visual--square img { width: 492px; height: 492px; object-fit: cover; border-radius: 25px; }

.factors__head  { max-width: 708px; }
.factors__intro {
  max-width: 600px;
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

.measure__inner { display: flex; align-items: flex-start; gap: var(--gutter); }
.measure__main  { flex: 1 1 657px; max-width: 657px; }
.measure__side  { flex: 0 0 513px; max-width: 513px; }

.measure__title { font-size: var(--fs-card-h); letter-spacing: normal; }

.conv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }

.conv-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--gutter);
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 25px;
}

.conv-item__title { margin: 0; font-size: var(--fs-card-s); letter-spacing: normal; }
.conv-item__desc {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

@media (max-width: 1024px) {
  .measure__inner { flex-direction: column; }
  .measure__main, .measure__side { max-width: 100%; flex: 1 1 auto; }
}
@media (max-width: 767px) {
  .conv-grid { grid-template-columns: 1fr; }
}

/* Elementor rekent bij een inline-block icoon de basislijnruimte mee: een
   icoon van 50px levert een regel van 58px. */
.card-icon--lg { height: 58px; }
.card-icon--lg svg { width: 50px; height: 50px; }

.factor-card { justify-content: flex-start; }
.factor-card .service__link { margin-top: auto; }

/* De conversie-items sluiten af met een lege regel (28px, zonder alineamarges) */
.conv-item__desc { margin-bottom: 28px; }


/* ---------- Werkwijze ---------- */

.eyebrow--tight { line-height: 1; }

.page-hero__lead--spaced { margin-bottom: var(--empty-p); }

/* Deze sectie heeft in het origineel 50px ruimte boven en onder, geen 100. */
.steps-intro { padding-block: 50px; }
.steps-intro__head { max-width: 540px; }
.steps-intro__text {
  max-width: 684px;
  margin: 0 0 14.4px;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

/* De vijf weekstappen: links een oranje stip in een kolom van 134px,
   rechts de inhoud met een verticale scheidingslijn ervoor. */
.wstep { display: flex; align-items: center; gap: var(--gutter); }

.wstep__marker {
  flex: 0 0 134px;
  max-width: 134px;
  text-align: center;
}
.wstep__dot {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--accent);
}

.wstep__body .wstep__when {
  margin: 0;
  color: var(--accent);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 28.05px;
  text-transform: uppercase;
}

.wstep__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-left: var(--gutter);
  border-left: 1px solid var(--border);
}

.wstep__title { margin: 0; font-size: var(--fs-card-h); letter-spacing: normal; }

.wstep__body p {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

/* Prijskaart */
.pricing__inner { display: flex; align-items: center; gap: var(--gutter); }
.pricing__text  { flex: 1 1 568px; max-width: 568px; }

.price-card {
  flex: 0 0 602px;
  max-width: 602px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gutter);
  padding: var(--gutter);
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 25px;
}

/* Het label staat in een oranje pil. */
.price-card__label {
  margin: 0;
  padding: 1px 17px;
  background-color: var(--accent);
  border-radius: 99px;
  color: var(--bg-page);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
}

.price-card__row {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding-bottom: var(--gutter);
}

.price-card__amount {
  margin: 0;
  color: var(--accent);
  font-family: var(--ff-display);
  font-size: 62px;
  font-weight: 400;
  line-height: 1;
}

.price-card__note,
.price-card__fine {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}
.price-card__note { padding-left: 19px; }
.price-card__fine { font-size: var(--fs-label); color: var(--text-mute); line-height: 1.1em; }

.price-card__list { max-width: 363px; padding-bottom: var(--gutter); }

.promise__head { max-width: 768px; }

@media (max-width: 1024px) {
  .pricing__inner { flex-direction: column; align-items: stretch; }
  .pricing__text, .price-card { max-width: 100%; flex: 1 1 auto; }
}
@media (max-width: 767px) {
  /* Op mobiel vervalt de stip met de verticale lijn; de tekst loopt door. */
  .wstep { flex-direction: column; align-items: stretch; gap: 10px; }
  .wstep__marker { display: none; }
  .wstep__body { padding-left: 0; border-left: 0; }
}

/* Labels onder elke stap */
.steps .container { gap: 50px; }

.wstep__tags { display: flex; flex-wrap: wrap; gap: 10px; }

.wtag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--bg-dark);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1;
}
.wtag .check { display: inline-flex; flex: 0 0 15px; width: 15px; height: 15px; }
.wtag .check svg { width: 15px; height: 15px; fill: currentColor; }

.wstep__body p { margin-bottom: 14.4px; }
/* Ook de laatste alinea houdt zijn onderruimte, net als in het origineel. */


/* ---------- Locatie pagina's ---------- */

.split--lp .split__text     { flex: 1 1 642px; max-width: 642px; }
.split--lp .split__visual   { flex: 0 0 528px; max-width: 528px; }
.split--lp .split__visual img { width: 528px; height: 436px; object-position: 100% 50%; }
.split--lp .svc-hero__lead  { margin-bottom: 15px; }

.split--lpwhy .split__text  { flex: 1 1 654px; max-width: 654px; }
.split--lpwhy .split__visual{ flex: 0 0 516px; max-width: 516px; }
.split__visual--tall img {
  width: 516px;
  height: 620px;
  object-fit: cover;
  object-position: 50% 0;
  border-radius: var(--radius-sm);
}

.elements__intro {
  max-width: 1036px;
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

.elements__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }

/* Elke kaart begint in het origineel met een genummerde oranje cirkel (01–10)
   links van de tekst; de kaart is daarom een rij, niet een kolom. */
.el-card {
  flex-direction: row;
  align-items: center;
  gap: var(--gutter);
}
.el-card__num {
  flex: 0 0 49px;
  width: 49px;
  height: 49px;
  padding: 8px;
  border-radius: 50%;
  background-color: var(--accent);
  color: var(--bg-page);
}
.el-card__num svg { display: block; width: 33px; height: 33px; fill: currentColor; }
.el-card__body { display: flex; flex-direction: column; gap: 5px; }
.el-card__body h3 { margin: 0; }
.el-card__body p  { margin: 0; }

/* Schaal-indicator */
.split--scale .split__text { flex: 1 1 654px; max-width: 654px; }

/* De staafgrafiek is in het origineel een los HTML-widget met eigen stijlen;
   de balkhoogte staat daar via JS op 470px (230px op mobiel) — hier via CSS. */
.scale-chart {
  flex: 0 0 516px;
  max-width: 516px;
  padding: 40px 40px 32px;
  background-color: var(--bg-page);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-md);
}

.scale-chart__bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  height: 470px;
  margin-bottom: 20px;
}

.scale-chart__col {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  height: 100%;
}

.scale-chart__num {
  color: var(--accent);
  font-family: var(--ff-display);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
}

.scale-chart__fill {
  width: 100%;
  border-radius: 6px 6px 0 0;
  background-color: var(--accent);
}
.scale-chart__col:nth-child(1) .scale-chart__fill { height: 22%; opacity: .28; }
.scale-chart__col:nth-child(2) .scale-chart__fill { height: 44%; opacity: .50; }
.scale-chart__col:nth-child(3) .scale-chart__fill { height: 70%; opacity: .75; }
.scale-chart__col:nth-child(4) .scale-chart__fill { height: 100%; opacity: 1; }

.scale-chart__lbl {
  color: var(--text-sub);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.scale-chart__divider {
  margin: 0 0 14px;
  border: 0;
  border-top: 1.5px solid var(--border-hair);
}

.scale-chart__caption {
  margin: 0;
  color: var(--text-sub);
  font-size: 0.8rem;
  text-align: center;
}

@media (max-width: 1024px) {
  .scale-chart { max-width: 100%; flex: 1 1 auto; }
  .split__visual--tall img { width: 100%; }
}
@media (max-width: 767px) {
  .elements__grid { grid-template-columns: 1fr; }
  .scale-chart__bars { height: 230px; }

  /* Naast elkaar wordt de tekstkolom op een telefoon te smal; het nummer
     gaat daarom boven de tekst staan in plaats van ernaast. */
  .el-card { flex-direction: column; align-items: flex-start; gap: 15px; }
}


/* ---------- Reviews ---------- */

.split--rev .split__text    { flex: 1 1 678px; max-width: 678px; }
.split--rev .split__visual  { flex: 0 0 492px; max-width: 492px; }
.split--rev .split__visual img { width: 492px; height: 436px; object-fit: cover; border-radius: 25px; }
.split--rev .svc-hero__lead { margin-bottom: var(--empty-p); }

.rstats__head { max-width: 708px; }
.rstats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }

.rstat { display: flex; flex-direction: column; gap: 15px; }
.rstat__num {
  margin: 0;
  color: var(--accent);
  font-family: var(--ff-display);
  font-size: var(--fs-stat);
  font-weight: 900;
  line-height: 1.1em;
}
.rstat__txt {
  margin: 0 0 var(--empty-p);
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

/* Op de reviewspagina staan de cijfers in een donkerblauw blok en zijn ze
   gecentreerd; op de casepagina's staan ze los op een donkere sectie. */
.rstats__box {
  padding: 50px;
  background-color: var(--bg-navy);
  border-radius: 25px;
}
.rstats__box .rstat,
.case-results .rstat { text-align: center; }
.rstats__box .rstat { gap: var(--gutter); }
.rstats__box .rstat__num,
.case-results .rstat__num { font-size: var(--fs-h1); line-height: 1em; }
.rstats__box .rstat__txt { margin-bottom: 15px; color: var(--text-inv); }
.case-results .rstat__txt { margin-bottom: 28px; color: var(--text-inv); }

.split--revwhy .split__text { flex: 1 1 654px; max-width: 654px; }

/* Vergelijkingskaart */
.rcompare {
  flex: 0 0 516px;
  max-width: 516px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.rcompare__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--gutter);
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 25px;
}
.rcompare__card--dim { background-color: var(--bg-surface); }

.rcompare__score {
  margin: 0;
  color: var(--accent);
  font-family: var(--ff-display);
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
}
.rcompare__card--dim .rcompare__score { color: var(--text-sub); }

.rcompare__name  { margin: 0; color: var(--text-main); font-size: var(--fs-lead); font-weight: 700; }
.rcompare__count { margin: 0; color: var(--text-light); font-size: var(--fs-label); }
.rcompare__badge { margin: 0; color: var(--accent); font-size: 13px; font-weight: 600; }
.rcompare__vs {
  margin: 0;
  color: var(--text-sub);
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  font-weight: 900;
  text-align: center;
}

.rbars { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.rbar  { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-sub); }
.rbar__n { width: 10px; }
.rbar__track { flex: 1; height: 8px; background-color: var(--bg-surface); border-radius: 99px; overflow: hidden; }
.rcompare__card--dim .rbar__track { background-color: var(--bg-page); }
.rbar__fill { display: block; width: var(--pct, 0%); height: 100%; background-color: #fbbc04; border-radius: 99px; }
.rbar__fill--dim { background-color: var(--text-mute); }
.rbar__p { width: 34px; text-align: right; }

.strategy__head { max-width: 708px; }
.strategy .info-card p { margin-bottom: 15px; }

.strategy__intro {
  max-width: 708px;
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

/* ReviewChicken-mockup */
.split--soft .split__text { flex: 1 1 584px; max-width: 584px; }

.rc-mock {
  flex: 0 0 586px;
  max-width: 586px;
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 25px;
  overflow: hidden;
}

/* Browserbalk met drie stippen en de url-pil. */
.rc-mock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px var(--gutter);
  background-color: var(--bg-surface);
}
.rc-mock__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--border);
}
.rc-mock__url {
  margin-left: 12px;
  padding: 5px 20px;
  background-color: var(--bg-page);
  border-radius: 99px;
  color: var(--text-sub);
  font-size: 13px;
}

.rc-mock__body { display: flex; flex-direction: column; gap: var(--gutter); padding: var(--gutter); }

.rc-mock__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gutter); }
.rc-mock__logo { width: 117px; height: 24px; object-fit: contain; border-radius: 0; }
.rc-mock__label {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
}
.rc-mock__client { margin: 0; color: var(--text-sub); font-size: var(--fs-label); font-weight: 500; line-height: 1em; }

.rc-mock__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.rc-mock__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 20px;
  background-color: var(--bg-surface);
  border-radius: 25px;
}
.rc-mock__stat-lbl { margin: 0; color: var(--text-sub); font-size: var(--fs-label); font-weight: 500; }
.rc-mock__stat-val { margin: 0; color: var(--text-main); font-size: var(--fs-card-s); font-weight: 900; }

.rc-mock__chart { width: 100%; height: 191px; object-fit: cover; border-radius: var(--radius-sm); }

.rc-mock__review {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: var(--gutter);
  background-color: var(--bg-surface);
  border-radius: 25px;
}
.rc-mock__review-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.rc-mock__author {
  margin: 0;
  color: var(--accent);
  font-family: var(--ff-display);
  font-size: var(--fs-card-s);
  font-weight: 900;
  line-height: 1.2em;
}
.rc-mock__stars { margin: 0; color: var(--accent); font-size: 16px; line-height: 1; letter-spacing: 1px; }
.rc-mock__quote  { margin: 0; color: var(--text-sub); font-size: var(--fs-lead); font-weight: 500; line-height: 1em; }
.rc-mock__when   { margin: 0; color: var(--text-sub); font-size: var(--fs-lead); font-weight: 500; }

.reactions__head { max-width: 780px; }
.reviews-cta .cta__text { margin-bottom: 0; }

@media (max-width: 1024px) {
  .rstats__grid { grid-template-columns: repeat(2, 1fr); }
  .rcompare, .rc-mock { max-width: 100%; flex: 1 1 auto; }
}
@media (max-width: 767px) {
  .rstats__grid { grid-template-columns: 1fr; }
}
.rcompare__stars { margin: 0; color: var(--text-mute); font-size: 15px; letter-spacing: 2px; }



/* ---------- Zo werkt het (potentie scan) ---------- */

.how-step {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: var(--gutter);
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 25px;
}

.how-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  background-color: var(--accent);
  color: #fff;
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.how-step__title { margin: 0; font-size: var(--fs-card-s); letter-spacing: normal; }
.how-step__text {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

/* "Zo werkt het" staat op de scanpagina naast het formulier */
.how-list-card {
  flex: 1 1 585px;
  max-width: 585px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: var(--gutter);
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 25px;
}

.how-list__head { margin: 0; font-size: var(--fs-card-h); letter-spacing: normal; }
.how-list { display: flex; flex-direction: column; gap: 15px; }
.how-list__item { display: flex; gap: 15px; align-items: flex-start; }

.how-list__num {
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--accent);
  color: #fff;
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  font-weight: 900;
}

.how-list__title { margin: 0; color: var(--text-main); font-size: var(--fs-lead); font-weight: 700; }
.how-list__text {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-label);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

/* De scanpagina zet formulier links, contact + stappen rechts */
.contact__inner { flex-wrap: wrap; align-items: flex-start; }
/* Scanpagina: contactgegevens en stappen delen de rechterkolom */
.contact__side {
  flex: 1 1 585px;
  max-width: 585px;
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}
.contact__side .contact__direct,
.contact__side .how-list-card { flex: 0 0 auto; max-width: 100%; }

/* ============================================================
   Mobiel (<=767px) — waarden gemeten op de live site
   ============================================================ */

@media (max-width: 767px) {

  /* Alineamarges vallen weg binnen de tekstblokken; alleen de lege slotregel telt */
  .manage__intro, .dashboard__intro, .services__intro, .cases__intro, .method__intro,
  .info-card p, .icon-box__desc, .service__text, .step__text, .case__text, .cta__text,
  .stat__label, .hero__lead { margin-bottom: 0; }

  .manage__intro, .dashboard__intro,
  .info-card--spaced > p:last-child,
  .icon-box--spaced .icon-box__desc,
  .service--spaced .service__text,
  .cta__text { margin-bottom: var(--empty-p); }

  .stat { padding-bottom: 0; }

  /* De iconenrij stapelt en groeit mee met de inhoud */
  .manage__grid { grid-auto-rows: auto; gap: var(--gutter); }
  .icon-box__title { font-size: var(--fs-card-s); line-height: 1.2em; margin: 8px 0 5px; }

  /* Hero */
  .hero h1 { padding-block: 23.44px; }
  .hero__actions { gap: 15px; }

  /* Werkwijze-slides zijn compacter dan de desktopkaarten */
  .carousel .step { padding: 20px; gap: 10px; }
  .carousel .step__title { margin: 0 0 5px; font-size: var(--fs-card-s); }
  .carousel .step__num { width: 35px; height: 35px; padding: 9px; }
  .carousel .step__num svg { width: 17px; height: 17px; }

  /* De header staat in components/header.css. */

  /* Hero: strakkere stapeling */
  .hero__text { gap: 15px; }
  .hero__inner { gap: var(--gutter); }

  /* De lege kolom naast 'centraal beheer' blijft ook op mobiel ruimte innemen.
     In kolomrichting is flex-basis de hoogte, dus die zetten we expliciet. */
  .manage__visual { flex: 0 0 auto; width: 100%; }
  .manage__visual img { height: 327px; }

  /* Cases: statistieken onder elkaar, kop iets kleiner */
  .cases__grid { gap: 20px; }
  .case__stats { grid-template-columns: 1fr; gap: 15px; }
  .case__stat { flex-direction: row; align-items: baseline; gap: 8px; }
  .case__title { font-size: 22px; }
  .case__label { margin-bottom: 0; }
  .case--spaced .case__text { margin-bottom: 0; }

  /* Checklist: 10px tussen de regels, hoogte volgt de tekst */
  .checklist li { align-items: flex-start; }
  .check { margin-top: 7px; }

  /* SERP-kaart: regels mogen afbreken */
  .serp__meta { flex-wrap: wrap; }
  .serp__row { align-items: flex-start; }
  .serp__num { margin-top: 2px; }
  .case__photo-inset { width: 180px; height: 120px; right: 20px; top: 38px; }

  /* Dashboard */
  .dashboard__text { gap: 20px; }
  .dashboard__visual img { height: 327px; }

  /* CTA: knoppen onder elkaar met 30px ertussen */
  .cta__actions { gap: var(--gutter); }

  /* Footer */
  .site-footer__col { display: flex; flex-direction: column; gap: 14px; }
  .site-footer__col h2 { margin: 0; }
  .site-footer__col li { margin-bottom: 7px; }
  .site-footer__brand { display: flex; flex-direction: column; gap: 14px; }
  .site-footer__brand p { margin: 0; }
  .site-footer__bottom { flex-wrap: wrap; justify-content: flex-start; gap: 10px; padding-top: 30px; }
  .site-footer__copy { flex: 1 0 100%; font-size: 13px; line-height: 1.1; }
  .site-footer__parent img { width: 88px; height: 14px; }
}


/* ============================================================
   Mobiel (<=767px) — kolommen stapelen, beelden bijsnijden.
   Alle maten zijn op 375px van de live site afgelezen.
   ============================================================ */

@media (max-width: 767px) {

  /* Alleen de homepage heeft een kop van 42px; de rest 36px (--fs-h1). */
  .hero h1 { font-size: 42px; }

  /* Tweekolomssecties worden één kolom met 15px tussen de tekstregels. */
  .split__inner { flex-direction: column; align-items: stretch; gap: var(--gutter); }

  /* Zodra de kolommen stapelen is flex-basis de HOOGTE, niet de breedte.
     Alle vaste kolommaten van de desktopversie moeten daarom los. Twee
     klassen diep, zodat dit wint van regels als `.split--conv .split__visual`. */
  .split .split__inner > *,
  .section .measure__inner > *,
  .section .dashboard__inner > *,
  .section .manage__inner > *,
  .section .contact__inner > *,
  .section .pricing__inner > *,
  .case-hero .case-hero__top > * { flex: 1 1 auto; max-width: 100%; }

  .split .split__text { gap: 15px; }

  /* Beeld naast de tekst schaalt mee op ware verhouding ... */
  .split .split__visual img,
  .section .dashboard__visual img,
  .section .measure__side img { width: 100%; height: auto; }

  /* ... behalve de hero-beelden: die worden bijgesneden tot 259px. */
  .split--lp .split__visual img,
  .split--rev .split__visual img,
  .split--about .split__visual img,
  .split--hero .split__visual img,
  .split--conv .split__visual img {
    height: 259px;
    object-fit: cover;
  }
  .split .split__visual--tall img { height: 220px; object-fit: cover; }

  /* Dienst-hero (verkeer): beeld op ware verhouding onder de tekst. */
  .svc-hero__visual { width: 100%; }
  .svc-hero__visual img { width: 100%; height: auto; }

  /* De vier cijfers in de rapportagekaart hebben op smalle schermen
     minder tussenruimte nodig, anders lopen ze net over de rand. */
  .report__stats { gap: 15px; }

  /* Het donkerblauwe cijferblok heeft op een telefoon geen 50px rondom nodig. */
  .rstats__box { padding: var(--gutter); }
  .report__value { overflow-wrap: anywhere; }

  /* Losse tweekolomsblokken die hun eigen wrapper hebben. */
  .pricing__inner,
  .case-hero__top { flex-direction: column; align-items: stretch; }
  .case-hero__media img.case-hero__photo { width: 100%; height: 208px; }
}

/* Het nagebouwde ReviewChicken-dashboard op mobiel: krappere binnenruimte
   en de drie cijfers onder elkaar, net als in het origineel. */
@media (max-width: 767px) {
  .rc-mock__bar,
  .rc-mock__body,
  .rc-mock__review { padding: 15px; }
  .rc-mock__head { gap: 15px; }
  .rc-mock__stats { grid-template-columns: 1fr; }
  .rc-mock__client { flex: 1 1 100%; }
}