/* Gedeelde bouwstenen voor de verhaalpagina's van v12 (25 september 2026).
   Afgeleid van homepageconcept v11. Het palet staat sinds v12 in assets/tokens.css
   (petrol en goud), dus hier staan alleen de tinten van de gloed. */
:root {
  --gloed-licht:    #E8C079;
  --gloed-midden:   #6B8C86;
  --gloed-door-licht: 92%;
  --gloed-door-alt: 88%;
}
.contact-v7 { --color-accent-text: var(--lime); }

/* Concept v10-verhaal. Alle waarden komen uit assets/tokens.css.
   Zonder JavaScript of met prefers-reduced-motion staat alles gewoon onder
   elkaar; de pin- en scrubanimaties zijn een laag erbovenop (html.verhaal-beweging). */

/* Lime bolletje voor elk sectielabel (uit v9). */
.verhaal__label::before,
#websites .eyebrow::before,
#groeiscan .eyebrow::before,
#ai-scan .eyebrow::before {
  content: "";
  display: inline-block;
  width: .55em;
  height: .55em;
  margin-inline-end: .5em;
  border-radius: 50%;
  background: var(--lime);
  vertical-align: .08em;
}

.verhaal__grid { display: grid; gap: var(--sp-3); align-items: center; }
.verhaal__beeld { margin: 0; overflow: hidden; border-radius: 20px; }
.verhaal__beeld img { display: block; width: 100%; height: auto; }
.verhaal__tekst { max-width: var(--leeskolom-max); }
.verhaal__split { display: grid; gap: var(--sp-2); align-items: end; }

/* ---------- 2. Wat AI nu kan ---------- */
.nu__baan { margin-block: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.nu__baan::-webkit-scrollbar { display: none; }
.nu__spoor {
  display: flex;
  gap: var(--sp-2);
  padding-inline: max(16px, calc((100vw - var(--container-max, 1200px)) / 2));
  width: max-content;
}
.nu__paneel { margin: 0; width: min(78vw, 560px); scroll-snap-align: center; }
.nu__paneel img { display: block; width: 100%; height: auto; border-radius: 20px; }
.nu__paneel figcaption { display: flex; gap: .6rem; align-items: baseline; margin-block-start: .8rem; font: var(--type-body-sm); color: var(--color-text-subtle); max-width: 44ch; }
.nu__nr { font-family: var(--font-display, "Archivo"), sans-serif; font-weight: 800; color: var(--olive); }

.nu__grafiekgrid { display: grid; gap: var(--sp-3); align-items: center; }
.grafiek { margin: 0; padding: var(--sp-2); background: var(--color-bg-alt); border: 1px solid var(--line); border-radius: 16px; }
.grafiek__kop { font: var(--type-label); margin-block-end: var(--sp-1); }
.grafiek svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafiek__basis { stroke: var(--ink-line); stroke-width: 1; }
.grafiek__grid { stroke: var(--line); stroke-width: 1; }
.grafiek__as { fill: var(--color-text-subtle); font-size: 12px; font-family: inherit; }
.grafiek__lijn { fill: none; stroke: var(--olive); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafiek__stip { fill: var(--olive); stroke: var(--color-bg-alt); stroke-width: 2; }
.grafiek__raak { fill: transparent; }
.grafiek__punt { cursor: default; outline: none; }
.grafiek__punt:hover .grafiek__stip,
.grafiek__punt:focus-visible .grafiek__stip { fill: var(--lime); stroke: var(--olive); r: 7.5; }
.grafiek__label { fill: var(--color-text); font-size: 13px; font-weight: 700; font-family: inherit; }
.grafiek__bron { font: var(--type-caption); color: var(--color-text-subtle); margin-block-start: var(--sp-1); }

/* ---------- 4 en 5. Kloof en brug ---------- */
.kloof__podium { display: grid; gap: var(--sp-3); }
.kloof__beeld { display: grid; border-radius: 20px; overflow: hidden; }
.kloof__img { display: block; width: 100%; height: auto; }
.kloof__fasen { display: grid; gap: var(--sp-4); }
.kloof__fase { max-width: 60ch; }

.kloofcijfers { margin: var(--sp-1) 0 0; padding: var(--sp-2); border: 1px solid var(--ink-line); border-radius: 16px; }
.kloofcijfers__kop { font: var(--type-label); margin-block-end: var(--sp-1); }
.kloofcijfers__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.kloofcijfers__lijst li { display: grid; grid-template-columns: 6.5rem 1fr 3rem; gap: .75rem; align-items: center; font: var(--type-body-sm); }
.kloofcijfers__balk { height: .8rem; border-radius: 99px; background: var(--color-text-inverse); opacity: .55; justify-self: start; transform-origin: left center; }
.kloofcijfers__balk--groot { width: 66.2%; }
.kloofcijfers__balk--mkb { width: 29.8%; }
.kloofcijfers__balk--micro { width: 19%; }
.kloofcijfers__balk--twee { width: 11.6%; background: var(--lime); opacity: 1; }
.kloofcijfers__getal { font-weight: 700; text-align: end; }
.kloofcijfers__bron { font: var(--type-caption); margin-block-start: var(--sp-1); opacity: .8; }

/* Zonder beweging: de brug staat onder de kloof, bij zijn eigen tekst. */
html:not(.verhaal-beweging) .kloof__podium { grid-template-areas: "voor" "tekstvoor" "na" "tekstna"; }
html:not(.verhaal-beweging) .kloof__beeld { display: contents; }
html:not(.verhaal-beweging) .kloof__fasen { display: contents; }
html:not(.verhaal-beweging) .kloof__img--voor { grid-area: voor; border-radius: 20px; }
html:not(.verhaal-beweging) .kloof__img--na { grid-area: na; border-radius: 20px; margin-block-start: var(--sp-3); }
html:not(.verhaal-beweging) .kloof__fase--voor { grid-area: tekstvoor; }
html:not(.verhaal-beweging) .kloof__fase--na { grid-area: tekstna; }

/* Met beweging: beeld en tekst liggen op elkaar en wisselen bij het scrollen. */
html.verhaal-beweging .kloof__img { grid-area: 1 / 1; }
html.verhaal-beweging .kloof__fasen { display: grid; }
html.verhaal-beweging .kloof__fase { grid-area: 1 / 1; }

/* ---------- 6. Waar loop je tegenaan ---------- */
.scene { display: grid; gap: var(--sp-2); align-items: center; }
.scene + .scene { margin-block-start: var(--sp-3); }
.scene__beeld { margin: 0; border-radius: 20px; overflow: hidden; }
.scene__beeld img { display: block; width: 100%; height: auto; }
.scene__tekst { max-width: 52ch; }
.scene__nr { font-family: var(--font-display, "Archivo"), sans-serif; font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--lime-deep); }
.scene__meer { font-weight: 600; }

/* ---------- 7. Eerst een gesprek ---------- */
.gesprek__podium { display: none; }
.gesprek__stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.gesprek__stap { display: grid; gap: .6rem; max-width: 46ch; }
.gesprek__stapbeeld { margin: 0 0 .4rem; border-radius: 20px; overflow: hidden; }
.gesprek__stapbeeld img { display: block; width: 100%; height: auto; }
.gesprek__nr {
  display: inline-grid; place-items: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--lime); color: var(--ink);
  font-weight: 800;
}

/* ---------- Websites: zoekdemo boven het blok ---------- */
.websites-v10__zoek { margin-block-end: var(--sp-3); }

@media (min-width: 861px) {
  .verhaal__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .verhaal__grid--omgekeerd { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .verhaal__split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .nu__grafiekgrid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }

  /* Scènes om en om, met een kleine verspringing zodat het geen raster wordt. */
  .scene { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--sp-3); }
  .scene--rechts { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .scene--rechts .scene__beeld { order: 2; }
  .scene:nth-of-type(odd) { margin-inline-end: 4%; }
  .scene:nth-of-type(even) { margin-inline-start: 4%; }

  html.verhaal-beweging .kloof__podium { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; min-height: calc(100vh - 2 * var(--sp-3)); }

  /* De strip: links blijft het beeld staan, rechts lopen de stappen erlangs. */
  html.verhaal-beweging .gesprek__strip[data-strip-podium] { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-4); }
  html.verhaal-beweging [data-strip-podium] .gesprek__podium { display: grid; position: sticky; top: 12vh; align-self: start; border-radius: 20px; overflow: hidden; }
  html.verhaal-beweging [data-strip-podium] .gesprek__podiumbeeld { grid-area: 1 / 1; display: block; width: 100%; height: auto; opacity: 0; transition: opacity .5s ease; }
  html.verhaal-beweging [data-strip-podium] .gesprek__podiumbeeld.is-actief { opacity: 1; }
  html.verhaal-beweging [data-strip-podium] .gesprek__stapbeeld { display: none; }
  html.verhaal-beweging [data-strip-podium] .gesprek__stappen { gap: 0; }
  html.verhaal-beweging [data-strip-podium] .gesprek__stap { min-height: 44vh; align-content: center; opacity: .5; transition: opacity .4s ease; }
  html.verhaal-beweging [data-strip-podium] .gesprek__stap.is-actief { opacity: 1; }
}

@media (max-width: 520px) {
  .kloofcijfers__lijst li { grid-template-columns: 5.2rem 1fr 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gesprek__podiumbeeld, .gesprek__stap { transition: none; }
}

/* Een verborgen tabel negeert width: 1px; als blok doet hij dat wel. */
.grafiek table.visueel-verborgen { display: block; }

/* =====================================================================
   v11: aanvullingen op v10
   ===================================================================== */

/* 2. De kop blijft staan terwijl de panelen voorbijschuiven. Het paneel
   past samen met de kop in één schermhoogte. */
.nu { padding-block-end: 0; }
.nu__kop { padding-block-end: var(--sp-2); }
.nu__baan { margin-block: 0 var(--sp-3); }
html.verhaal-beweging .nu__pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--sp-3); }
html.verhaal-beweging .nu__paneel { width: min(560px, calc((100vh - 420px) * 1.333)); }
.nu__lijst { border-radius: 20px; overflow: hidden; background: var(--olive-deep); }
.nu__lijst img { border-radius: 0; }
.nu__onderschrift { font: var(--type-body); color: var(--color-text); max-width: 40ch; }
.nu__nr { color: var(--lime-deep); }

/* 2b. Olympus */
.olympus { overflow: hidden; }
.olympus__grid { display: grid; gap: var(--sp-3); align-items: center; }
.olympus__noot { font: var(--type-body-sm); opacity: .8; }
.olympus__figuur { margin: 0; }
.olympus__figuur svg { display: block; width: 100%; height: auto; overflow: visible; }
.olympus__lijn { fill: none; stroke: rgba(247, 244, 239, .22); stroke-width: 1.5; stroke-dasharray: 3 6; }
.olympus__brein { fill: #0B5859; stroke: rgba(232, 192, 121, .55); stroke-width: 1.5; }
.olympus__deeltje { fill: #E8C079; opacity: .75; }
.olympus__breinnaam { fill: rgba(247, 244, 239, .7); font: 600 13px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.olympus__ring { fill: none; stroke: #E1A542; stroke-width: 2; opacity: 0; }
.olympus__bol { fill: #0B4546; stroke: rgba(247, 244, 239, .35); stroke-width: 1.5; }
.olympus__icoon { fill: none; stroke: #F7F4EF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.olympus__naam { fill: #F7F4EF; font: 700 17px/1 var(--font-heading); }
.olympus__wat { fill: rgba(247, 244, 239, .66); font: 400 12.5px/1 var(--font-body); }
.olympus__klaar { opacity: 0; }
.olympus__klaar rect { fill: #E1A542; }
.olympus__klaar text { fill: #1D2521; font: 700 12px/1 var(--font-body); }
.olympus__knoop--ares .olympus__bol { fill: #E1A542; stroke: none; }
.olympus__knoop--ares .olympus__icoon { stroke: #1D2521; }
.olympus__knoop--ares .olympus__naam, .olympus__knoop--ares .olympus__wat { text-anchor: start; }
.olympus__puls { fill: #F1C470; opacity: 0; filter: drop-shadow(0 0 6px #E1A542); }
.olympus__knoop.is-actief .olympus__bol { fill: #0E6566; stroke: #E1A542; }

/* 6. Scènes: het beeld wordt bij binnenkomst van zijn kant opengeschoven. */
.scene__beeld img { transform-origin: center; }

/* 7. Voortgangsbalk onder het vaste beeld van de strip. */
.gesprek__voortgang { display: none; }
html.verhaal-beweging [data-strip-podium] .gesprek__voortgang { display: block; grid-area: 2 / 1; height: 4px; margin-block-start: .8rem; border-radius: 99px; background: var(--line); overflow: hidden; }
html.verhaal-beweging [data-strip-podium] .gesprek__voortgang span { display: block; height: 100%; width: 100%; background: var(--lime-deep); transform-origin: left; transform: scaleX(0); }
html.verhaal-beweging [data-strip-podium] .gesprek__podium { grid-template-rows: auto auto; overflow: visible; border-radius: 0; }
html.verhaal-beweging [data-strip-podium] .gesprek__podiumbeeld { grid-area: 1 / 1; border-radius: 20px; }

/* 8. Drie keuzes */
.keuzes { display: grid; gap: var(--sp-2); }
.keuze {
  position: relative;
  display: grid;
  gap: .7rem;
  align-content: start;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--color-bg-alt);
  color: var(--color-text);
  text-decoration: none;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s, box-shadow .35s;
}
.keuze:hover, .keuze:focus-visible { transform: translateY(-6px); border-color: var(--lime-deep); box-shadow: 0 24px 48px -28px rgba(8, 58, 59, .45); }
.keuze__nr { font: 800 var(--fs-2)/1 var(--font-heading); color: var(--lime-deep); }
.keuze__icoon { width: 44px; height: 44px; fill: none; stroke: var(--olive); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.keuze__naam { font: var(--type-h3); margin: 0; }
.keuze__wat { margin: 0; color: var(--color-text-subtle); }
.keuze__prijs { margin: 0; font-weight: 700; }
.keuze__meer { font-weight: 700; color: var(--olive); margin-block-start: .4rem; }
.keuze__meer::after { content: " \2192"; display: inline-block; transition: transform .3s; }
.keuze:hover .keuze__meer::after { transform: translateX(5px); }

@media (min-width: 861px) {
  .olympus__grid { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
  .olympus__figuur { margin-inline-end: calc(-1 * var(--sp-3)); }
  .keuzes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .keuze:nth-child(2) { margin-block-start: var(--sp-3); }
}

@media (prefers-reduced-motion: reduce) {
  .keuze, .keuze__meer::after { transition: none; }
  .keuze:hover, .keuze:focus-visible { transform: none; }
}

/* =====================================================================
   v11: Olympus als levend kantoor (olympus.js tekent de SVG)
   ===================================================================== */
.olympus__kopgrid { display: grid; gap: var(--sp-2); align-items: end; }
.olympus__figuur { margin: 0; }
.olympus__doek svg { display: block; width: 100%; height: auto; overflow: visible; }
.olympus__onder { display: grid; gap: var(--sp-2); align-items: start; margin-block-start: var(--sp-1); }
.olympus__bijschrift { font: var(--type-body-sm); opacity: .72; max-width: 52ch; }
.olympus__log { list-style: none; margin: 0; padding: var(--sp-1); display: grid; gap: .45rem; min-height: 8.4rem; border: 1px solid rgba(247, 244, 239, .16); border-radius: 14px; background: rgba(8, 58, 59, .55); font: var(--type-body-sm); font-variant-numeric: tabular-nums; }
.olympus__log li { opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .4s; }
.olympus__log li.is-in { opacity: 1; transform: none; }
.olympus__log li:not(:first-child) { opacity: .6; }
.olympus__log time { color: #E8C079; margin-inline-end: .5rem; }
.olympus__log strong { font-weight: 700; }

.ol-lijn { fill: none; stroke: rgba(247, 244, 239, .16); stroke-width: 1.4; stroke-dasharray: 2 6; }
.ol-lijn--ares { stroke: rgba(232, 192, 121, .5); stroke-dasharray: none; }
.ol-halo { animation: ol-adem 5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.ol-synaps { stroke: rgba(232, 192, 121, .18); stroke-width: .8; transition: stroke .5s, stroke-width .5s; }
.ol-synaps.is-vonk { stroke: #F1C470; stroke-width: 1.6; transition: none; }
.ol-neuron { fill: #E8C079; animation: ol-twinkel 3s ease-in-out infinite; transition: fill .2s; }
.ol-neuron.is-aan { fill: #FFF1CC; animation: none; opacity: 1; filter: drop-shadow(0 0 4px #F1C470); }
.ol-breinnaam { fill: rgba(247, 244, 239, .72); font: 700 13px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }

.ol-afd { font: 800 12.5px/1 var(--font-body); letter-spacing: .14em; }
.ol-mens__ring { fill: none; stroke: #E1A542; stroke-width: 2; stroke-dasharray: 6 5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ol-mens__bol { fill: #0B4546; stroke-width: 1.4; stroke-opacity: .7; transition: fill .3s; }
.ol-rol { fill: rgba(247, 244, 239, .78); font: 500 11.5px/1 var(--font-body); }
.ol-bezig, .ol-klaar { opacity: 0; transition: opacity .25s; pointer-events: none; }
.ol-bezig rect { fill: rgba(247, 244, 239, .92); }
.ol-bezig circle { fill: #0E4B4C; animation: ol-tik 1s ease-in-out infinite; }
.ol-klaar rect { fill: #E1A542; }
.ol-klaar text { fill: #1D2521; font: 700 12px/1 var(--font-body); }
.ol-mens.is-bezig .ol-mens__ring { opacity: 1; animation: ol-draai 3s linear infinite; }
.ol-mens.is-bezig .ol-bezig { opacity: 1; }
.ol-mens.is-klaar .ol-klaar { opacity: 1; }
.ol-mens.is-klaar .ol-mens__bol { fill: #1C6F66; }
.ol-mens.is-bezig .ol-rol, .ol-mens.is-klaar .ol-rol { fill: #F7F4EF; font-weight: 700; }

.ol-ares__bol { fill: #E1A542; }
.ol-ares__hoofd { fill: #1D2521; }
.ol-ares__naam { fill: #F7F4EF; font: 700 17px/1 var(--font-heading); }
.ol-ares__wat { fill: rgba(247, 244, 239, .7); font: 400 12.5px/1 var(--font-body); }
.ol-puls { fill: #FFE3A3; filter: drop-shadow(0 0 7px #E1A542); }
.ol-puls--terug { fill: #9FE0C9; filter: drop-shadow(0 0 7px #4FB39A); }

@keyframes ol-twinkel { 0%, 100% { opacity: .25; } 50% { opacity: .95; } }
@keyframes ol-tik { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes ol-draai { to { transform: rotate(360deg); } }
@keyframes ol-adem { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }

@media (max-width: 699px) {
  .ol-rol { font-size: 15px; }
  .ol-afd { font-size: 15px; }
  .ol-klaar text { font-size: 14px; }
  .ol-ares__naam { font-size: 20px; }
  .ol-ares__wat { font-size: 14px; }
}
@media (min-width: 861px) {
  .olympus__kopgrid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .olympus__onder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ol-neuron, .ol-halo, .ol-bezig circle, .ol-mens.is-bezig .ol-mens__ring { animation: none; }
}
/* Op een smal scherm staat de functienaam alleen bij wie aan het werk is;
   het logboek eronder noemt ze allemaal. */
.ol-mens--smal .ol-rol { opacity: 0; transition: opacity .25s; }
.ol-mens--smal.is-bezig .ol-rol, .ol-mens--smal.is-klaar .ol-rol { opacity: 1; }
/* Eén knoop per afdeling: de naam staat eronder, groter dan een rolnaam. */
.ol-afd { font-size: 13.5px; }
@media (max-width: 699px) { .ol-afd { font-size: 17px; } }

/* De case: het logboek is een lijst die zich stap voor stap vult. */
.olympus__case { display: grid; gap: .6rem; }
.olympus__casekop { margin: 0; font: var(--type-label); color: #E8C079; }
.olympus__log { min-height: 0; gap: .35rem; }
.olympus__log li,
.olympus__log li:not(:first-child) { opacity: .32; transform: none; transition: opacity .35s, color .35s; }
.olympus__log li.is-bezig { opacity: 1; }
.olympus__log li.is-bezig::after { content: " ..."; color: #E8C079; }
.olympus__log li.is-klaar { opacity: .92; }
.olympus__log li.is-klaar::before { content: "\2713"; color: #E1A542; font-weight: 700; margin-inline-end: .45rem; }
.olympus__log time { display: inline-block; min-width: 4.6em; }
.ol-ares.is-bezig .ol-ares__bol { animation: ol-ares-puls 0.9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ol-ares-puls { 50% { transform: scale(1.14); } }
/* Ares zegt wat hij doet: nalezen, aanpassen, versturen. */
.ol-ares__klaar rect { fill: #F7F4EF; }
.ol-ares__klaar text { fill: #083A3B; font: 700 12.5px/1 var(--font-body); }
.ol-ares.is-klaar .ol-ares__klaar { opacity: 1; }
.ol-ares .ol-klaar { transition: opacity .25s; }
@media (max-width: 699px) { .ol-ares__klaar text { font-size: 15px; } }

/* Olympus: drie feit-tegels in plaats van twee alinea's */
.olympus__feiten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.feit {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1rem; align-items: center;
  padding: 1rem 1.2rem; border-radius: 18px;
  background: linear-gradient(135deg, rgba(247, 244, 239, .08), rgba(247, 244, 239, .02));
  border: 1px solid rgba(247, 244, 239, .14);
}
.feit__icoon { grid-row: 1 / 3; width: 56px; height: 56px; }
.feit__vlak { fill: rgba(8, 58, 59, .8); stroke: rgba(232, 192, 121, .45); stroke-width: 1.2; }
.feit__lijn { fill: none; stroke: #F7F4EF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.feit__lijn--goud { stroke: #E8C079; }
.feit__goud { fill: #E1A542; }
.feit__stippen circle { fill: #9DB0CF; }
.feit__stippen circle:nth-child(2n) { fill: #B7CF7E; }
.feit__stippen circle:nth-child(3n) { fill: #E69578; }
.feit__getal { font: 800 var(--fs-4)/1 var(--font-heading); color: #F7F4EF; letter-spacing: -.02em; }
.feit--goud .feit__getal { color: #E8C079; font-size: var(--fs-3); }
.feit__wat { font: var(--type-body-sm); opacity: .8; }

/* Legenda naast de case */
.olympus__legenda { display: grid; gap: .8rem; align-content: start; }
.olympus__legendakop { margin: 0; font: var(--type-label); color: #E8C079; }
.olympus__legenda ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.olympus__legenda li { display: grid; grid-template-columns: 22px 1fr; gap: .7rem; align-items: center; font: var(--type-body-sm); }
.olympus__legenda svg { width: 22px; height: 22px; }

@media (min-width: 861px) {
  .olympus__kopgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

/* =====================================================================
   v12: bouwstenen voor de dienstpagina's
   ===================================================================== */

/* Sprong vanuit de hero naar de prijzen. */
.sprong { display: inline-block; margin-block-start: var(--sp-1); color: var(--color-text-inverse); font-weight: 600; }
.sprong::after { content: " \2193"; }

/* Wat de klant bezit, als rustige regel met een gouden streep. */
.bezit { margin: 0; padding-inline-start: 1rem; border-inline-start: 3px solid var(--lime); font-weight: 600; }

/* Pakketten: de verschillen staan naast elkaar, de volledige inhoud achter een klik. */
.pakket { cursor: default; }
.pakket:hover, .pakket:focus-within { transform: translateY(-4px); }
.pakket__btw { font: var(--type-body-sm); font-weight: 400; color: var(--color-text-subtle); }
.keuze__prijs span[data-kg] { font: 800 var(--fs-3)/1.1 var(--font-heading); color: var(--olive); }
.pakket__feiten { margin: .2rem 0 0; display: grid; gap: .35rem; font: var(--type-body-sm); }
.pakket__feiten div { display: grid; grid-template-columns: 5.2rem 1fr; gap: .6rem; padding-block: .35rem; border-block-start: 1px solid var(--line); }
.pakket__feiten dt { color: var(--color-text-subtle); }
.pakket__feiten dd { margin: 0; font-weight: 600; }
.pakket__meer { border-block-start: 1px solid var(--line); padding-block-start: .6rem; }
.pakket__meer summary { cursor: pointer; font-weight: 700; color: var(--olive); list-style: none; display: flex; align-items: center; gap: .4rem; }
.pakket__meer summary::-webkit-details-marker { display: none; }
.pakket__meer summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--lime); color: var(--ink); font-weight: 800; transition: transform .3s; }
.pakket__meer[open] summary::before { transform: rotate(45deg); }
.pakket__meer ul { margin: .7rem 0 0; padding-inline-start: 1.1rem; display: grid; gap: .4rem; font: var(--type-body-sm); }
.pakket .keuze__meer { text-decoration: none; }
.pakketten__standaard { color: var(--color-text-subtle); }
@media (min-width: 861px) { .pakketten .keuze:nth-child(2) { margin-block-start: 0; } }

/* Grenzen: wat buiten het aanbod valt en wat tegen meerprijs kan, als twee groepen. */
.grenzen { display: grid; gap: var(--sp-3); }
.grens__kop { display: flex; align-items: center; gap: .7rem; font: var(--type-h3); margin: 0 0 var(--sp-1); }
.grens__icoon { flex: none; width: 36px; height: 36px; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.grens--buiten .grens__icoon { stroke: var(--ink-soft); }
.grens--extra .grens__icoon { stroke: var(--olive); }
.grens--extra .grens__icoon circle { fill: var(--lime); stroke: none; }
.grens--extra .grens__icoon path { stroke: var(--ink); }
.grens__tegels { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.grens__tegel { padding: 1rem 1.2rem; border-radius: 16px; border: 1px solid var(--line); background: var(--color-bg); font: var(--type-body); }
.grens--buiten .grens__tegel { border-style: dashed; color: var(--color-text-subtle); }
.grens--extra .grens__tegel { border-color: var(--lime-deep); background: color-mix(in srgb, var(--lime) 10%, var(--color-bg-alt)); }
@media (min-width: 861px) { .grenzen { grid-template-columns: 1fr 1fr; } }

/* Tijdlijn en momenten: zonder script alles zichtbaar, met script lichten ze op. */
.verhaal-js [data-moment] { opacity: .45; transition: opacity .4s; }
.verhaal-js [data-moment].is-bereikt { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .verhaal-js [data-moment] { opacity: 1; } }

/* Zoeklijst (Gevonden worden): een nagebootste lijst zoekresultaten. */
.zoeklijst { margin: 0; padding: var(--sp-2); border-radius: 20px; background: var(--color-bg-alt); border: 1px solid var(--line); box-shadow: 0 24px 48px -32px rgba(8, 58, 59, .45); }
.zoeklijst__zoek { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 99px; border: 1px solid var(--line); font: var(--type-body-sm); color: var(--color-text); margin-block-end: var(--sp-2); }
.zoeklijst__zoek svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-soft); stroke-width: 2; }
.zoeklijst__items { list-style: none; margin: 0; padding: 0; display: grid; row-gap: .7rem; }
.zoeklijst__item { position: relative; display: grid; gap: .25rem; padding: .8rem 1rem; border-radius: 14px; background: var(--color-bg); border: 1px solid var(--line); }
.zoeklijst__naam { font-weight: 700; color: var(--olive); }
.zoeklijst__regel { height: .5rem; border-radius: 99px; background: var(--line); width: var(--b, 80%); }
.zoeklijst__eigen { --vol: 0; border: 2px solid var(--lime); background: color-mix(in srgb, var(--lime) calc(var(--vol) * 14%), var(--color-bg-alt)); z-index: 1; }
.zoeklijst__eigen .zoeklijst__naam { color: var(--ink); }
.zoeklijst__vinken { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; font: var(--type-body-sm); }
.zoeklijst__vink::before { content: "\2713"; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-inline-end: .35rem; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: .7rem; font-weight: 800; }
.zoeklijst__bron { font: var(--type-caption); color: var(--color-text-subtle); margin: var(--sp-1) 0 0; }

/* Klantweg (Groeiscan): een SVG-lijn met stations die zich tekent. */
.klantweg { margin: 0; }
.klantweg svg { display: block; width: 100%; height: auto; overflow: visible; }
.klantweg .weg { fill: none; stroke: var(--olive); stroke-width: 3; stroke-linecap: round; }
.klantweg .weg--gat { stroke: var(--ink-line); stroke-dasharray: 6 8; }
.klantweg .weg--goud { stroke: var(--lime); stroke-width: 4; }
.klantweg .station { fill: var(--color-bg-alt); stroke: var(--olive); stroke-width: 3; }
.klantweg .station--gat { stroke: var(--ink-line); stroke-dasharray: 4 4; }
.klantweg .station--goud { fill: var(--lime); stroke: var(--lime-deep); }
.klantweg text { font: 600 15px/1 var(--font-body); fill: var(--color-text); }
.klantweg .station-label--gat { fill: var(--color-text-subtle); font-style: italic; }

/* Tijdlijn (Onderhoud): een verticale lijn met momenten. */
.tijdlijn { position: relative; list-style: none; margin: 0; padding: 0 0 0 2.4rem; display: grid; gap: var(--sp-3); }
.tijdlijn::before, .tijdlijn__lijn { content: ""; position: absolute; inset-block: .4rem; inset-inline-start: .7rem; width: 3px; border-radius: 99px; background: var(--line); }
.tijdlijn__lijn { background: var(--lime-deep); transform-origin: top; }
.tijdlijn__moment { position: relative; display: grid; gap: .5rem; max-width: 62ch; }
.tijdlijn__moment::before { content: ""; position: absolute; inset-inline-start: -2.15rem; inset-block-start: .35rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--color-bg); border: 3px solid var(--olive); }
.tijdlijn__moment.is-bereikt::before, html:not(.verhaal-js) .tijdlijn__moment::before { background: var(--lime); border-color: var(--lime-deep); }
.tijdlijn__maand { font: var(--type-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--olive); }
.tijdlijn__moment--groot::before { border-style: dashed; }
.tijdlijn__beeld { margin: .4rem 0 0; border-radius: 20px; overflow: hidden; max-width: 560px; }
.tijdlijn__beeld img { display: block; width: 100%; height: auto; }
.tijdlijn__label { display: inline-block; padding: .15rem .6rem; border-radius: 99px; font: var(--type-label); background: var(--lime); color: var(--ink); justify-self: start; }
.tijdlijn__label--uur { background: transparent; border: 1px solid var(--ink-line); color: var(--color-text); }

/* v12 ronde 2 na de reviews van de proefpagina */
/* Hero-feiten als kaarten, in de familie van de feit-tegels op de homepage. */
.feiten--kaart { display: grid; gap: var(--sp-1); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border: 0; padding: 0; }
.feiten--kaart > div { display: grid; gap: .25rem; padding: 1rem 1.2rem; border-radius: 18px; background: linear-gradient(135deg, rgba(247, 244, 239, .08), rgba(247, 244, 239, .02)); border: 1px solid rgba(247, 244, 239, .14); }
.feiten--kaart .feit__waarde { color: var(--gloed-licht); }
/* Pakketkaarten zijn niet als geheel klikbaar, dus ze komen niet omhoog. */
.pakket:hover, .pakket:focus-within { transform: none; box-shadow: none; border-color: var(--line); }
/* Herkentegels onder een scène. */
.herkenblok { display: grid; gap: var(--sp-1); }
.herkenblok__kop { font: var(--type-label); color: var(--color-text-subtle); margin: 0; }
.herkenblok__tegels { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.herkenblok__tegels li { padding: 1rem 1.1rem; border-radius: 16px; background: var(--color-bg-alt); border: 1px solid var(--line); border-inline-start: 4px solid var(--lime); }
/* Grenzen op een donker vlak. */
.section--inverse .grens__tegel { background: rgba(247, 244, 239, .05); border-color: rgba(247, 244, 239, .22); color: var(--color-text-inverse); }
.section--inverse .grens--buiten .grens__tegel { color: rgba(247, 244, 239, .78); }
.section--inverse .grens--buiten .grens__icoon { stroke: rgba(247, 244, 239, .7); }
.section--inverse .grens--extra .grens__tegel { border-color: var(--lime); background: rgba(225, 165, 66, .1); }
.section--inverse .grens__kop { color: var(--color-text-inverse); }
@media (max-width: 520px) {
  .feiten--kaart { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .feiten--kaart > div { padding: .8rem .9rem; }
}
.zoeklijst__regel--k { --b: 44%; }
.zoeklijst__regel--m { --b: 66%; }
.zoeklijst__regel--l { --b: 88%; }
.nu__titel { display: block; font-weight: 700; color: var(--olive); margin-block-end: .2rem; }
.klantweg .klantweg__smal { display: none; max-width: 340px; }
.klantweg__gat { margin-block-start: var(--sp-2); padding-inline-start: 1rem; border-inline-start: 3px solid var(--lime); max-width: 60ch; }
@media (max-width: 700px) { .klantweg .klantweg__breed { display: none; } .klantweg .klantweg__smal { display: block; } }
@media (min-width: 861px) { .keuzes--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; } .keuzes--twee .keuze:nth-child(2) { margin-block-start: 0; } }
.tijdlijn__beelden { display: grid; gap: var(--sp-1); margin-block-start: .4rem; }
.tijdlijn__beelden .tijdlijn__beeld { margin: 0; max-width: none; }
@media (min-width: 861px) { .tijdlijn__beelden { grid-template-columns: 1fr 1fr; max-width: 900px; } .tijdlijn__moment { max-width: 900px; } .tijdlijn__moment p { max-width: 62ch; } }

/* Werkwijze: wie beslist of nakijkt, als label bij een stap. */
.stapmerk { display: inline-block; justify-self: start; margin-inline-end: .4rem; padding: .15rem .65rem; border-radius: 99px; font: var(--type-label); }
.stapmerk--ik { background: var(--olive); color: var(--color-text-inverse); }
.stapmerk--jij { background: var(--lime); color: var(--ink); }
.stapsleutel { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font: var(--type-body-sm); color: var(--color-text-subtle); }
.gesprek__stap .stapmerk { margin-block-start: .2rem; }
/* Over: de overgang winkel naar eerste site op een licht vlak, en grote missiekaarten. */
.kloof--licht .kloof__fase { color: var(--color-text); }
.keuze__wat--groot { font: var(--type-lead); color: var(--color-text); }

/* Blog: kopillustratie onder de titel en scènekaarten op het overzicht. */
.artikel__beeld { margin: var(--sp-2) 0 var(--sp-3); border-radius: 20px; overflow: hidden; }
.artikel__beeld img { display: block; width: 100%; height: auto; }
.blogrij--scene { grid-template-columns: 1fr; }
.blogrij__beeld { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; }
@media (min-width: 861px) {
  .blogrij--scene { grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: "beeld cat" "beeld body" "beeld meer"; align-items: start; align-content: center; column-gap: var(--sp-2); }
  .blogrij--scene .blogrij__beeld { grid-area: beeld; align-self: center; }
  .blogrij--scene .blogrij__cat { grid-area: cat; }
  .blogrij--scene .blogrij__body { grid-area: body; }
  .blogrij--scene .blogrij__meer { grid-area: meer; }
}

/* Schakelaar voor het logboek (25 september 2026): met data-olympus-logboek="uit"
   op de figure valt de nagespeelde aanvraag weg en staat de legenda over de
   volle breedte. Terugzetten: het attribuut weghalen of op "aan" zetten. */
[data-olympus-logboek="uit"] .olympus__case { display: none; }
@media (min-width: 861px) {
  [data-olympus-logboek="uit"] .olympus__onder { grid-template-columns: minmax(0, 1fr); }
  [data-olympus-logboek="uit"] .olympus__legenda ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
}

/* =====================================================================
   Dienstenstrook direct na de hero (25 september 2026): drie diensten met
   een getekende scène, een uitkomstzin en een prijs. Op desktop drie kaarten
   naast elkaar, op mobiel compacte rijen met het beeld links.
   ===================================================================== */
.aanbodstrook { padding-block: var(--sp-3) var(--sp-4); }
.aanbodstrook__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.aanbodstrook__dienst {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--sp-1);
  align-items: center;
  padding: .7rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--color-bg-alt);
  color: var(--color-text);
  text-decoration: none;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s, box-shadow .35s;
}
.aanbodstrook__dienst:hover, .aanbodstrook__dienst:focus-visible { transform: translateY(-4px); border-color: var(--lime-deep); box-shadow: 0 24px 48px -28px rgba(8, 58, 59, .45); }
.aanbodstrook__dienst:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.aanbodstrook__beeld { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--color-bg); }
.aanbodstrook__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.aanbodstrook__dienst:hover .aanbodstrook__beeld img { transform: scale(1.04); }
.aanbodstrook__tekst { display: grid; gap: .2rem; min-width: 0; }
.aanbodstrook__naam { font: 700 var(--fs-1)/1.2 var(--font-heading); }
.aanbodstrook__naam::after { content: " \2192"; color: var(--lime-deep); display: inline-block; transition: transform .3s; }
.aanbodstrook__dienst:hover .aanbodstrook__naam::after { transform: translateX(4px); }
.aanbodstrook__wat { font: var(--type-body-sm); color: var(--color-text-subtle); }
.aanbodstrook__prijs { font: var(--type-body-sm); font-weight: 700; color: var(--olive); }
@media (min-width: 861px) {
  .aanbodstrook__lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .aanbodstrook__dienst { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; padding: .8rem .8rem var(--sp-2); }
  .aanbodstrook__beeld { aspect-ratio: 4 / 3; }
  .aanbodstrook__tekst { padding-inline: .5rem; gap: .35rem; }
  .aanbodstrook__naam { font-size: var(--fs-2); }
}
@media (prefers-reduced-motion: reduce) {
  .aanbodstrook__dienst, .aanbodstrook__beeld img, .aanbodstrook__naam::after { transition: none; }
  .aanbodstrook__dienst:hover, .aanbodstrook__dienst:focus-visible { transform: none; }
  .aanbodstrook__dienst:hover .aanbodstrook__beeld img { transform: none; }
}

/* Aanbod na een verhaalstuk: de dienst die bij het stuk hoort, klein. */
.section--aanbod { padding-block: var(--sp-3); }
.aanbod {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem var(--sp-1);
  align-items: start;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--lime);
  border-radius: 16px;
  background: var(--color-bg-alt);
  max-width: 62rem;
}
.aanbod__icoon { width: 36px; height: 36px; fill: none; stroke: var(--olive); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; grid-row: span 3; }
.aanbod__tekst { display: grid; gap: .3rem; }
.aanbod__naam { margin: 0; font: 700 var(--fs-1)/1.2 var(--font-heading); }
.aanbod__wat { margin: 0; color: var(--color-text-subtle); max-width: 60ch; }
.aanbod__prijs { margin: 0; font-weight: 700; }
.aanbod__link { font-weight: 700; color: var(--olive); justify-self: start; }
.aanbod__link::after { content: " \2192"; }
.aanbod--donker { background: rgba(8, 58, 59, .55); border-color: rgba(247, 244, 239, .18); border-inline-start-color: var(--lime); color: var(--color-text-inverse); }
.aanbod--donker .aanbod__icoon { stroke: var(--lime); }
.aanbod--donker .aanbod__wat { color: inherit; opacity: .8; }
.aanbod--donker .aanbod__link { color: var(--lime); }
@media (min-width: 861px) {
  .aanbod { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .aanbod__icoon { grid-row: span 2; }
  .aanbod__prijs { grid-column: 3; grid-row: 1; text-align: end; }
  .aanbod__link { grid-column: 3; grid-row: 2; justify-self: end; }
}

/* Het Groeiscan-aanbod onder de kloof: los van het gepinde podium. */
.kloof__aanbod { margin-block-start: var(--sp-3); }
@media (min-width: 861px) {
  /* Het podium is zo hoog als de eerste fase met de grafiek; zonder deze
     correctie hangt het blok los onder een leeg vlak. */
  html.verhaal-beweging .kloof__aanbod { margin-block-start: calc(-2 * var(--sp-3)); }
}

/* ==========================================================================
   DESKTOPCOMPOSITIE (27 september 2026), zie _v12/PLAN-desktop.md.
   Alles vanaf 861 pixels; de telefoon verandert niet.
   ========================================================================== */

/* ---------- Wat ik doe: een paneel met de drie diensten als bento ----------
 * De eerste dienst in de lijst krijgt het grote vak; sinds v12.2 is dat
 * Werksystemen op maat, bewust, want dat doet Ares het liefst. AI en Websites
 * staan er rechts naast, beeld links en tekst rechts. De Groeiscan staat als
 * brede kaart boven de lijst. Het paneel houdt alles bij elkaar. */
@media (min-width: 861px) {
  .aanbodstrook { padding-block: var(--sp-2) var(--sp-3); }
  .aanbodstrook > .container > .stack {
    background: var(--paneel);
    border: 1px solid var(--paneel-rand);
    border-radius: var(--paneel-radius);
    padding: var(--paneel-pad);
  }
}
@media (min-width: 1100px) {
  .aanbodstrook__lijst {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: var(--bento-gap);
  }
  .aanbodstrook__lijst > li { display: flex; }
  .aanbodstrook__lijst > li > .aanbodstrook__dienst { flex: 1; }
  .aanbodstrook__lijst > li:first-child { grid-row: 1 / 3; }
  .aanbodstrook__lijst > li:first-child .aanbodstrook__dienst { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
  .aanbodstrook__lijst > li:first-child .aanbodstrook__beeld { aspect-ratio: auto; min-height: 320px; }
  .aanbodstrook__lijst > li:not(:first-child) .aanbodstrook__dienst {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    align-content: stretch;
    padding: .8rem;
  }
  .aanbodstrook__lijst > li:not(:first-child) .aanbodstrook__beeld { aspect-ratio: auto; min-height: 200px; }
  .aanbodstrook__lijst > li:not(:first-child) .aanbodstrook__tekst { align-content: center; padding: .6rem 1rem; }
}

/* ---------- v12.2: de Groeiscan als stap 1 boven de rij ----------
 * De scan is het kijken uit de hero-kop; wat eruit kan volgen staat eronder.
 * Op de telefoon dezelfde rij als de andere kaarten, met het label erboven;
 * vanaf 861 pixels een brede kaart met het beeld links en de tekst rechts. */
.aanbodstrook__dienst--start { border-color: var(--lime); }
.aanbodstrook__stap {
  justify-self: start;
  font: var(--type-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--olive);
  background: color-mix(in srgb, var(--lime) 22%, transparent);
  border-radius: 999px;
  padding: .15rem .6rem;
}
.aanbodstrook__tussen { margin: var(--sp-1) 0 0; font: 700 var(--fs-1)/1.2 var(--font-heading); color: var(--color-text-subtle); }
@media (min-width: 861px) {
  .aanbodstrook__dienst--start {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
    gap: var(--sp-2);
    padding: .8rem;
  }
  .aanbodstrook__dienst--start .aanbodstrook__beeld { aspect-ratio: 16 / 9; }
  .aanbodstrook__dienst--start .aanbodstrook__tekst { padding: .5rem 1rem .5rem 0; gap: .5rem; }
  .aanbodstrook__dienst--start .aanbodstrook__wat { font: var(--type-body); max-width: 46ch; }
}

/* ---------- Wat AI nu kan: bento in plaats van een zijwaarts spoor ----------
 * Het eerste beeld is groot en staat over twee rijen, de andere vullen de
 * kolom ernaast. Bij vier panelen loopt het laatste over twee kolommen. */
@media (min-width: 861px) {
  [data-nu-pin]:not([data-nu-zijwaarts]) .nu__baan { overflow: visible; margin-block-end: 0; }
  [data-nu-pin]:not([data-nu-zijwaarts]) .nu__spoor {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: minmax(0, auto);
    gap: var(--bento-gap) var(--bento-gap);
    width: auto;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    transform: none !important;
  }
  [data-nu-pin]:not([data-nu-zijwaarts]) .nu__paneel,
  html.verhaal-beweging [data-nu-pin]:not([data-nu-zijwaarts]) .nu__paneel { width: auto; display: flex; flex-direction: column; min-width: 0; }
  html.verhaal-beweging .nu__pin[data-nu-pin]:not([data-nu-zijwaarts]) { min-height: 0; display: block; padding-block: 0; }
  [data-nu-pin]:not([data-nu-zijwaarts]) .nu__lijst { flex: 1; min-height: 0; border-radius: 20px; overflow: hidden; }
  [data-nu-pin]:not([data-nu-zijwaarts]) .nu__paneel img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
  [data-nu-pin]:not([data-nu-zijwaarts]) .nu__paneel:first-child { grid-row: span 2; }
  [data-nu-pin]:not([data-nu-zijwaarts]) .nu__paneel:first-child .nu__lijst { min-height: 420px; }
  [data-nu-pin]:not([data-nu-zijwaarts]) .nu__paneel:nth-child(4) { grid-column: span 2; }
  [data-nu-pin]:not([data-nu-zijwaarts]) .nu__paneel:nth-child(4) .nu__lijst { aspect-ratio: 2.4; }
  [data-nu-pin]:not([data-nu-zijwaarts]) .nu__paneel:nth-child(2) .nu__lijst,
  [data-nu-pin]:not([data-nu-zijwaarts]) .nu__paneel:nth-child(3) .nu__lijst { aspect-ratio: 4 / 3; }
  /* Drie panelen: het eerste groot, twee eronder naast elkaar ernaast. */
  [data-nu-pin]:not([data-nu-zijwaarts]) .nu__spoor:not(:has(> :nth-child(4))) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  [data-nu-pin]:not([data-nu-zijwaarts]) .nu__spoor:not(:has(> :nth-child(4))) .nu__paneel:nth-child(3) .nu__lijst { aspect-ratio: 16 / 9; }
  [data-nu-pin]:not([data-nu-zijwaarts]) .nu__onderschrift { margin-block-start: .7rem; }
}

/* ---------- Waar loop je tegenaan: vier scènes in een raster van twee ----------
 * Om en om kostte elke scène een heel scherm met de helft leeg. Als raster
 * staan ze als vier vakken op één plek, beeld boven en tekst eronder. */
@media (min-width: 861px) {
  .scenes-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bento-gap) var(--bento-gap);
  }
  .scenes-raster > * + * { margin-block-start: 0; }
  .scenes-raster > :not(.scene) { grid-column: 1 / -1; margin-block-end: var(--sp-1); }
  .scenes-raster > .sprite { position: absolute; }
  .scenes-raster .scene,
  .scenes-raster .scene--rechts {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0;
    margin: 0;
    background: var(--color-bg-alt);
    border: 1px solid var(--paneel-rand);
    border-radius: var(--paneel-radius);
    padding: 12px;
  }
  .scenes-raster .scene--rechts .scene__beeld { order: 0; }
  .scenes-raster .scene__beeld { border-radius: 18px; aspect-ratio: 16 / 9.5; }
  .scenes-raster .scene__beeld img { height: 100%; object-fit: cover; }
  .scenes-raster .scene__tekst { max-width: none; padding: var(--sp-1) var(--sp-1) var(--sp-0); display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-1); }
  .scenes-raster .scene__tekst > * { grid-column: 2; margin-block-start: 0; }
  .scenes-raster .scene__tekst > * + * { margin-block-start: .5rem; }
  .scenes-raster .scene__nr { grid-column: 1; grid-row: 1 / span 3; font-size: 2rem; }
}

/* ---------- Strips: de stappen als raster, elk met een eigen beeld ----------
 * Het vaste beeld met stappen die per stuk bijna een half scherm hoog waren is
 * uit (terug te zetten met data-strip-podium). Vier stappen staan naast elkaar,
 * zes in twee rijen van drie, drie naast elkaar. */
@media (min-width: 861px) {
  .gesprek__strip:not([data-strip-podium]) .gesprek__stappen {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-2) var(--bento-gap);
  }
  .gesprek__strip:not([data-strip-podium]) .gesprek__stappen:has(> :nth-child(5)),
  .gesprek__strip:not([data-strip-podium]) .gesprek__stappen:not(:has(> :nth-child(4))) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gesprek__strip:not([data-strip-podium]) .gesprek__stap { max-width: none; align-content: start; }
  .gesprek__strip:not([data-strip-podium]) .gesprek__stapbeeld { margin-block-end: .6rem; aspect-ratio: 4 / 3; }
  .gesprek__strip:not([data-strip-podium]) .gesprek__stapbeeld img { height: 100%; object-fit: cover; }
}

/* ---------- Drie keuzes onderaan: gelijk op één lijn, over de volle breedte ---------- */
@media (min-width: 861px) {
  .keuze:nth-child(2) { margin-block-start: 0; }
}

/* ---------- Twee keuzes: over de volle breedte in plaats van 960 pixels ---------- */
@media (min-width: 861px) {
  .keuzes--twee { max-width: none; }
}

/* ---------- Onderhoud, een jaar van je site: inleiding links, tijdlijn rechts ----------
 * De tijdlijn liep als smalle kolom langs de linkerrand met rechts niets. Nu
 * blijft de inleiding links staan terwijl de maanden rechts voorbijkomen. */
@media (min-width: 1100px) {
  section[aria-labelledby="jaar-kop"] > .container > .stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
    gap: var(--sp-4);
    align-items: start;
  }
  section[aria-labelledby="jaar-kop"] > .container > .stack > * + * { margin-block-start: 0; }
  section[aria-labelledby="jaar-kop"] > .container > .stack > :first-child { position: sticky; top: 120px; }
}

/* ==========================================================================
   KAREN-RONDE (27 september 2026). Nieuwe secties op de homepage: de missie
   direct na de diensten, en Wat AI nu kan als collage met vier voorbeelden
   uit het werk van een kleine ondernemer. Deze gelden ook op de telefoon.
   ========================================================================== */

/* ---------- Voor de kleine ondernemer ---------- */
.missie { padding-block: var(--sp-2) var(--sp-3); }
.missie__paneel {
  display: grid;
  gap: var(--sp-2);
  padding: clamp(24px, 4vw, 56px);
  border-radius: 24px;
  background: color-mix(in srgb, var(--olive) 6%, var(--cream));
  border: 1px solid color-mix(in srgb, var(--olive) 32%, var(--cream));
}
.missie__groot { font: 700 var(--fs-3)/1.15 var(--font-heading); color: var(--olive); max-width: 24ch; }
.missie__tekst p:not(.missie__groot) { max-width: 60ch; }
@media (min-width: 861px) {
  .missie__paneel { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); column-gap: var(--sp-4); align-items: start; }
}

/* ---------- Wat AI nu kan, en wat het voor jouw zaak betekent ---------- */
.nu2 { padding-block-end: var(--sp-3); }
.nu2__boven { display: grid; gap: var(--sp-2); align-items: center; }
.nu2__collage { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nu2__beeld { position: relative; margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; }
.nu2__beeld--groot { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.nu2__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nu2__beeld figcaption {
  position: absolute;
  inset-inline-start: 10px;
  inset-block-end: 10px;
  max-width: calc(100% - 20px);
  padding: .3rem .7rem;
  border-radius: 99px;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font: var(--type-label);
  line-height: 1.25;
}
.nu2__jij {
  display: grid;
  gap: var(--sp-1);
  padding: clamp(20px, 3vw, 44px);
  border-radius: 24px;
  background: color-mix(in srgb, var(--olive) 6%, var(--cream));
  border: 1px solid color-mix(in srgb, var(--olive) 32%, var(--cream));
}
.nu2__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nu2__vak {
  display: grid;
  gap: .4rem;
  align-content: start;
  padding: var(--sp-1);
  border-radius: 18px;
  background: var(--color-bg-alt);
  border: 1px solid var(--line);
}
.nu2__icoon { width: 44px; height: 44px; fill: none; stroke: var(--olive); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-block-end: .2rem; }
.nu2__icoon .nu2__icoon-goud, .nu2__icoon-goud { stroke: var(--lime-deep); }
.nu2__naam { font: 700 var(--fs-1)/1.2 var(--font-heading); color: var(--color-text); }
.nu2__wat { font: var(--type-body); color: var(--color-text-subtle); }
.nu2__slot { margin: 0; }
@media (min-width: 600px) {
  .nu2__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nu2__collage { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; }
  .nu2__beeld--groot { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; }
}
@media (min-width: 861px) {
  .nu2__boven { grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: var(--sp-4); }
}
@media (min-width: 1100px) {
  .nu2__lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Compacte strip: stappen als genummerde vakken zonder beeld ----------
 * Op Website laten maken stonden zes stapbeelden achter elkaar, en daar raakte
 * Karen de draad kwijt. De stappen blijven, de beelden gaan eruit. */
.gesprek__strip--compact .gesprek__stapbeeld,
.gesprek__strip--compact .gesprek__podium { display: none; }
.gesprek__strip--compact .gesprek__stap {
  padding: var(--sp-1);
  border-radius: 18px;
  background: var(--color-bg-alt);
  border: 1px solid var(--line);
  max-width: none;
}
.gesprek__strip--compact .gesprek__stappen { gap: 12px; }
@media (min-width: 861px) {
  html.verhaal-beweging .gesprek__strip--compact[data-strip-podium] { display: block; }
}

/* ==========================================================================
   v12.3 (27 september 2026): de copylijn, zie PLAN-v12.3.md.
   ========================================================================== */

/* Waarom ik dit doe: visie en missie als twee kaarten in het paneel. */
.missie__vm { display: grid; gap: var(--sp-1); }
.missie__kaart {
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
  border-radius: 18px;
  background: var(--color-bg-alt);
  border: 1px solid color-mix(in srgb, var(--olive) 18%, var(--cream));
}
.missie__label { margin: 0 0 .5rem; font: var(--type-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--lime-deep); }
.missie__kaart p { margin: 0; font: 600 var(--fs-1)/1.4 var(--font-heading); color: var(--olive); }
@media (min-width: 861px) {
  .missie__vm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Wat AI nu kan in een paneel, net als Wat ik doe. */
@media (min-width: 861px) {
  .nu2 > .container > .stack {
    background: var(--paneel);
    border: 1px solid var(--paneel-rand);
    border-radius: var(--paneel-radius);
    padding: var(--paneel-pad);
  }
}

/* Waar loop je nu tegenaan: zonder nummers, en de hele kaart is de link. */
.scene { position: relative; }
.scene__meer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.scene__meer:focus-visible { outline: none; }
.scene:has(.scene__meer:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.scene:hover .scene__meer { text-decoration: underline; }
@media (min-width: 861px) {
  .scenes-raster .scene__tekst { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .scenes-raster .scene__tekst > * { grid-column: 1; }
}

/* ---------- Klantverhaal kassa (28 september 2026, uit _v12.3-showcase) ---------- */

/* Een schermafdruk in de hero wordt niet bijgesneden zoals een foto. */
.hero__beeld--scherm { background: #27262b; }
.hero--tekst .hero__beeld--scherm img { object-fit: contain; }

/* Een schermafdruk in een scène schuift niet mee met de parallax uit verhaal.js:
   de 6 procent verschuiving sneed de bovenbalk van het kassascherm af. */
.scene__beeld--scherm img { transform: none !important; }

/* Onderschrift bij een schermafdruk in een scène: waar het beeld vandaan komt. */
.scene__onderschrift { font: var(--type-caption); color: var(--color-text-subtle); margin-block-start: var(--sp-1); }

/* Twee bonnen naast elkaar: de oude uit Copper en de nieuwe uit de bonmotor. */
.bonpaar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); align-items: start; margin: 0; max-width: 32rem; justify-self: center; width: 100%; }
.bonpaar figure { margin: 0; }
.bonpaar img { display: block; width: 100%; height: auto; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.bonpaar figcaption { font: var(--type-caption); color: var(--color-text-subtle); margin-block-start: .5rem; }

/* Scènes onder elkaar in één sectie: elke handeling een eigen blok. Met de standaard
   --sp-3 (41 tot 59 pixels) lazen vijf scènes als één lange rij. --sp-4 is de
   sectiepadding, zodat de ruimte tussen twee handelingen gelijk is aan die tussen
   tekst en rand. */
.stack--ruim > .scene + .scene { margin-block-start: var(--sp-4); }