/* Over, Kennismaking, Vragen: dezelfde taal, plus het verhaal in hoofdstukken en de feitenrij. */
.hero-media.top img { object-position: 50% 12%; }

/* Het verhaal: links de kop van het hoofdstuk, rechts de tekst; één foto ertussen */
.story { padding: var(--s6) 0 0; }
.story .chapter { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: start; padding-bottom: var(--s6); }
.story .chapter h2 { font-size: var(--t2); margin-bottom: 0; }
.story .chapter p { color: var(--muted); max-width: 52ch; }
.story .chapter p + p { margin-top: var(--s2); }
.story .photo { margin: 0 0 var(--s6); display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: end; }
.story .photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--s3); display: block; }
.story .photo figcaption { font-size: var(--t4); color: var(--muted); max-width: 40ch; padding-bottom: var(--s3); }
@media (max-width: 820px) {
  .story { padding-top: var(--s5); }
  .story .chapter { grid-template-columns: 1fr; gap: var(--s3); padding-bottom: var(--s5); }
  .story .photo { grid-template-columns: 1fr; gap: var(--s2); margin-bottom: var(--s5); }
  .story .photo img { aspect-ratio: 4 / 4.4; }
}

/* Feiten op een rij: drie woorden, elk met een regel */
.facts { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.facts .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.facts .row { border: 1px solid var(--line-2); border-radius: var(--s3); padding: var(--s4); gap: var(--s4); }
.facts .row li + li { border-left: 1px solid var(--line); padding-left: var(--s4); }
.facts .row b { display: block; font-family: var(--serif); font-weight: 400; font-size: var(--t2); line-height: 1.1; color: var(--accent-text); margin-bottom: var(--s2); }
.facts .row p { color: var(--muted); max-width: 28ch; }
@media (max-width: 820px) { .facts { padding: var(--s5) 0; } .facts .row { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s3); } .facts .row li + li { border-left: 0; border-top: 1px solid var(--line); padding: var(--s3) 0 0; } }

/* Kennismaking: het formulier direct onder de korte hero, de stappen erna */
.contact.first { border-top: 0; padding-top: 0; }
.contact.first .wrap { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
.route .phases .n { font-family: var(--serif); font-size: var(--t3); color: var(--accent-text); display: block; margin-bottom: var(--s2); }

/* Resultaten: het getal met zijn omschrijving, de ervaringen als lange citaten */
.stories { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.stories .head { max-width: 640px; margin-bottom: var(--s4); }
.stories .head h2 { margin-bottom: var(--s2); }
.stories ul { display: grid; gap: var(--s5); max-width: 760px; }
.stories li { padding-top: var(--s3); border-top: 1px solid var(--gold-line); }
.stories .label { margin-bottom: var(--s2); }
.stories blockquote { margin: 0 0 var(--s2); }
.stories blockquote p { font-size: var(--t3); color: var(--off); line-height: 1.55; }
.stories .who { font-size: var(--t4); color: var(--muted); }
.stories .note-line { margin-top: var(--s5); font-size: var(--t4); color: var(--muted); max-width: 60ch; }
@media (max-width: 820px) { .stories { padding: var(--s5) 0; } .stories ul { gap: var(--s4); } }
.facts.two .row { grid-template-columns: 1fr 1fr; max-width: 760px; }

/* Over: Ryans verhaal in vier delen met zijn eigen foto's. De nadruk (vet en cursief) staat waar hij hem zette. */
.over-text h2 { margin-bottom: var(--s3); }
.over-text p { color: var(--muted); max-width: 58ch; margin-bottom: var(--s2); }
.over-text p:last-of-type { margin-bottom: 0; }
.over-text .hl { font-weight: 700; font-style: italic; color: var(--accent-text); }
.over-text .btn { margin-top: var(--s4); }
section.island.light .over-text p, section.light.band .over-text p { color: var(--light-muted); }
section.island.light .over-text .hl, section.light.band .over-text .hl { color: var(--light-ink); }

/* Over: de foto's kleiner (Ryan 13 okt: "dit is giga") */
@media (min-width: 821px) {
  .seg:has(.over-text) .wrap { grid-template-columns: 300px 1fr; gap: var(--s6); }
  .seg.flip:has(.over-text) .wrap { grid-template-columns: 1fr 300px; }
}

/* kennismaking: kop en formulier in één blok, zoals het contactblok op de homepage (Ryan 13 okt: spacing en kleuren klopten niet) */
main > .contact.island.lead { margin-top: calc(88px + var(--s3)); padding: var(--s6) 0; }
.contact.island.lead h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); margin-bottom: var(--s3); text-wrap: balance; }
.contact.island.lead .lede { max-width: 36ch; }
@media (max-width: 820px) { main > .contact.island.lead { margin-top: calc(64px + var(--s2)); padding: var(--s5) 0; } }