/* ============================================================
   sprint.css — designlaag voor /sprint
   ------------------------------------------------------------
   Waarom een eigen bestand en geen regels in style.css:
   style.css wordt door 47 pagina's geladen. Elke wijziging daar
   moet op al die pagina's nagekeken worden, en het ?v=-nummer
   moet overal mee omhoog. Deze laag hoort bij één pagina, hangt
   volledig aan eigen klassennamen met sp- ervoor, en wordt alleen
   door sprint.html ingeladen. Andere pagina's blijven onaangeraakt.

   De kleuren en fonts komen uit style.css (:root). Hier staan
   alleen vorm, ritme en beweging.
   ============================================================ */

.sprint {
  --sp-radius: 22px;
  --sp-radius-groot: 30px;
  --sp-schaduw: 0 26px 64px -24px rgba(0, 41, 38, 0.38);
  --sp-schaduw-diep: 0 40px 90px -30px rgba(0, 41, 38, 0.5);
  --sp-veer: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- beweging ----------
   Eén mechanisme voor de hele pagina: een element krijgt .reveal in
   de HTML, reveal.js zet er .is-in op zodra het in beeld komt. Zonder
   JavaScript blijft alles gewoon staan (zie .geen-js hieronder), en
   wie beweging heeft uitgezet krijgt het meteen te zien. */
.sprint .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--sp-veer), transform 0.7s var(--sp-veer);
  transition-delay: var(--vertraag, 0s);
}
.sprint .reveal.is-in { opacity: 1; transform: none; }
.geen-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sprint .reveal { opacity: 1; transform: none; transition: none; }
  .sp-band__spoor { animation: none; }
  .sp-band { overflow-x: auto; }
}

/* ---------- hero ----------
   Was: één kolom tekst op een vlakke moss-achtergrond, met een H1 die
   op 1440px tot tegen de rand liep. Nu: tekst links in een eigen kolom,
   foto rechts in de merkboog, en een kleinere typemaat zodat de kop
   past in plaats van te vullen. */
.sp-hero { position: relative; overflow: hidden; padding: clamp(2.6rem, 5vw, 4.4rem) 0 clamp(2.6rem, 5vw, 4rem); }
.sp-hero::after {
  /* zachte lichtval van rechtsboven, geeft het vlak diepte zonder beeld */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 78% 8%, rgba(201, 242, 4, 0.10), transparent 62%);
}
.sp-hero > .container { position: relative; z-index: 3; }
.sp-hero__grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(2rem, 5vw, 4.6rem); align-items: center; }
.sp-hero h1 { font-size: clamp(2.15rem, 3.5vw, 3.35rem); line-height: 1.1; }
.sp-hero h1 .caps { font-size: 0.84em; letter-spacing: 0.01em; }
.sp-hero__sub { font-size: clamp(1.08rem, 1.4vw, 1.28rem); margin-top: 1.5rem; max-width: 30em; opacity: 0.92; }

/* Eyebrow als label in plaats van een zin die over twee regels valt. */
.sp-label {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.72rem; color: var(--signal-green);
  border: 1px solid rgba(201, 242, 4, 0.4); border-radius: 999px;
  padding: 0.55rem 1.1rem; margin-bottom: 1.7rem;
}
.sp-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--signal-green); flex: 0 0 auto; }

/* De feiten die eerst in de eyebrow gepropt zaten, staan nu onder de knop
   waar ze te lezen zijn in plaats van te scannen. */
.sp-feiten { display: flex; flex-wrap: wrap; gap: 0.7rem 1.9rem; margin-top: 2.1rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.sp-feit { display: grid; gap: 0.15rem; }
.sp-feit b { font-family: var(--font-heading); font-weight: 300; font-size: 1.42rem; line-height: 1.1; color: var(--signal-green); }
.sp-feit span { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.11em; font-weight: 700; opacity: 0.62; }

/* Foto in de merkboog, dezelfde vorm als .hero-photo op de homepage.
   .sp-boog is de vorm, .sp-hero__foto zet hem in de hero op maat. */
.sp-boog { position: relative; border-radius: 50% 50% var(--sp-radius) var(--sp-radius) / 30% 30% var(--sp-radius) var(--sp-radius); overflow: hidden; box-shadow: var(--sp-schaduw-diep); }
.sp-boog img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.sp-hero__foto { max-width: 460px; margin-left: auto; }
/* Het lijnenspel rechtsboven stond met de maten in de HTML zelf. Op een
   telefoon kwam het daardoor dwars door het label en de eerste regel van
   de kop te liggen. Nu staat het hier, met een eigen maat voor kleine
   schermen zodat het aan de rand blijft waar het hoort. */
.sp-hero__geo { width: 420px; right: -140px; top: -60px; }

/* ---------- feitenband ----------
   Smalle band onder de hero. Doet hetzelfde werk als een opsomming,
   maar leest als één beweging in plaats van als een lijstje. */
.sp-band { background: var(--core-black); color: var(--pure-white); border-top: 1px solid rgba(201, 242, 4, 0.18); border-bottom: 1px solid rgba(201, 242, 4, 0.18); overflow: hidden; padding: 0.95rem 0; }
.sp-band__spoor { display: flex; width: max-content; animation: sp-schuif 34s linear infinite; }
.sp-band__rij { display: flex; align-items: center; gap: 2.6rem; padding-right: 2.6rem; }
.sp-band__rij span { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem; white-space: nowrap; }
.sp-band__rij i { color: var(--signal-green); font-style: normal; font-size: 0.7rem; }
@keyframes sp-schuif { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- koppen ----------
   Op deze pagina stonden vier H2's volledig in .caps: hoofdletters in
   Almarai ExtraBold over drie regels. Naast de serif-koppen van de rest
   las dat als twee verschillende websites. De hoofdletters blijven, maar
   alleen op de accentzin binnen de kop. */
.sprint h2 { letter-spacing: -0.01em; }
/* De accentzin staat in hoofdletters in de vette schreefloze. Op ware
   grootte weegt die zwaarder dan de serif ervoor, waardoor een kop met een
   lange accentzin leest als twee koppen. Iets kleiner zetten herstelt de
   verhouding zonder aan de tekst te raken. */
.sprint h2 .caps { font-size: 0.83em; }
/* De kop blijft staan terwijl de kolom ernaast doorloopt. Zonder dit valt
   er onder een korte kop een gat van een halve schermhoogte. */
@media (min-width: 901px) {
  .sprint .koptekst > h2 { position: sticky; top: 7.2rem; }
}
.sp-kop-mid { text-align: center; max-width: 22em; margin-left: auto; margin-right: auto; }
.sp-intro-mid { text-align: center; max-width: 40em; margin: 1.3rem auto 0; opacity: 0.88; }

/* De ruit voor een opsommingsregel stond op 0.6rem en zweefde te hoog naast
   de regel. Iets groter en iets lager valt hij samen met de eerste regel. */
.sprint .checklist li::before { font-size: 0.7rem; top: 0.24em; }

/* ---------- cijfers ----------
   Waren twee kaarten met een percentage op body-formaat. Een cijfer dat
   het argument draagt, hoort ook het beeld te dragen. */
.sp-cijfers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2.6rem, 5vw, 3.6rem); }
.sp-cijfer { border-top: 2px solid rgba(201, 242, 4, 0.45); padding-top: 1.6rem; }
.sp-cijfer b { display: block; font-family: var(--font-heading); font-weight: 300; font-size: clamp(4rem, 9vw, 7.5rem); line-height: 0.92; color: var(--signal-green); }
.sp-cijfer p { margin-top: 0.9rem; max-width: 18em; }
.sp-bron { margin-top: 2.4rem; font-size: 0.86rem; opacity: 0.62; }

/* ---------- fotobreker ----------
   Volle breedte, één regel eroverheen. Staat op de plekken waar eerst
   drie tekstsecties op rij stonden. */
/* background-attachment: fixed schaalt het beeld op de kijkhoogte in plaats
   van op de strook, waardoor je bij elke schermhoogte een andere uitsnede
   krijgt: op 900px zag je alleen nog haar kin. Vandaar scroll met een vaste
   uitsnede, zodat de foto doet wat de uitsnede belooft. */
.sp-breker { position: relative; min-height: clamp(340px, 42vw, 520px); display: flex; align-items: center; background-size: cover; background-position: center 26%; }
.sp-breker::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0, 41, 38, 0.86) 0%, rgba(0, 41, 38, 0.62) 48%, rgba(0, 41, 38, 0.34) 100%); }
.sp-breker .container { position: relative; z-index: 2; }
.sp-breker p { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.8rem, 3.6vw, 3.1rem); line-height: 1.24; color: var(--pure-white); max-width: 17em; }
.sp-breker p em { font-style: normal; color: var(--signal-green); }

/* ---------- media ----------
   Twee beelden met een verschillende opdracht, dus twee verschillende
   kaders. De introductie is een gesprek en staat breed. De sfeerbeelden
   zijn met een telefoon rechtop gefilmd; die staan in een rechtopstaand
   kader in plaats van uitgerekt in een breed kader. */
.sp-media { max-width: 1000px; margin: clamp(2.4rem, 5vw, 3.4rem) auto 0; }
.sp-speler { position: relative; border-radius: var(--sp-radius-groot); overflow: hidden; box-shadow: var(--sp-schaduw-diep); background: var(--core-black); }
.sp-speler video { width: 100%; height: auto; display: block; }
.sp-speler--breed video { aspect-ratio: 1280/696; object-fit: cover; }
.sp-speler--staand { border-radius: var(--sp-radius); }
.sp-speler--staand video { aspect-ratio: 9/16; object-fit: cover; }

/* Eigen afspeelknop over de poster. Verdwijnt zodra er gespeeld wordt,
   zodat de kale browserknoppen niet het eerste zijn wat je ziet. */
.sp-speler__knop {
  position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  color: var(--pure-white);
  background: linear-gradient(180deg, rgba(0, 41, 38, 0.10) 0%, rgba(0, 41, 38, 0.58) 100%);
  transition: opacity 0.35s var(--sp-veer);
}
.sp-speler__cirkel {
  width: clamp(52px, 5.4vw, 82px); aspect-ratio: 1; border-radius: 50%;
  background: var(--signal-green); display: grid; place-items: center;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
  transition: transform 0.25s var(--sp-veer);
}
.sp-speler__knop:hover .sp-speler__cirkel,
.sp-speler__knop:focus-visible .sp-speler__cirkel { transform: scale(1.06); }
.sp-speler__cirkel::before {
  content: ''; width: 0; height: 0; border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.92rem;
  border-color: transparent transparent transparent var(--moss-green);
  margin-left: 0.22rem;
}
.sp-speler__tekst { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; padding: 0 1rem; text-align: center; }
.sp-speler.speelt .sp-speler__knop { opacity: 0; pointer-events: none; }

/* De vorige Sprint: de rechtop gefilmde beelden en drie stilstaande beelden
   uit diezelfde opname, in vier even hoge tegels. Zo staat het beeldmateriaal
   van de dag zelf naast elkaar in plaats van uitgerekt in een breed kader. */
.sp-vorige__kop { max-width: 44em; margin: clamp(3.4rem, 6vw, 5rem) auto clamp(1.4rem, 3vw, 2rem); text-align: center; opacity: 0.88; }
.sp-vorige { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.9rem, 1.8vw, 1.4rem); }
.sp-vorige figure { margin: 0; border-radius: var(--sp-radius); overflow: hidden; box-shadow: var(--sp-schaduw); }
.sp-vorige figure img, .sp-vorige .sp-speler video { width: 100%; aspect-ratio: 9/16; object-fit: cover; }

/* ---------- de casus en de drie stemmen ----------
   Dit blok stond eerst als vijf lagen onder elkaar: kop, tekst, een citaat van
   zestig woorden op vier centimeter hoog en gecentreerd terwijl de rest links
   staat, dan weer tekst, en onderaan drie recensies in kleine letters zonder
   kader. Het citaat brak de tekst in twee in plaats van hem te besluiten, en de
   drie stemmen zagen er het zwakst uit op de plek waar iemand net bewijs zoekt.

   Nu is het één casus en drie stemmen. De casus is een portret met een naambord
   naast een doorlopend verhaal, met het citaat als uitgelichte regel in dat
   verhaal in plaats van eroverheen. De drie stemmen zijn kaarten met evenveel
   gewicht als de rest van de pagina.

   Drie citaatvormen op deze pagina, elk met een eigen taak: de uitgelichte regel
   in de casus, de witte kaarten hier, en de mossgroene kaart bij de prijs. */
.sp-casus { display: grid; grid-template-columns: minmax(240px, 380px) minmax(0, 33em); gap: clamp(2rem, 5vw, 4.4rem); align-items: start; margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.sp-casus__zij { margin: 0; }
.sp-casus__zij .sp-boog { box-shadow: var(--sp-schaduw); }
.sp-casus__naam { margin-top: 1.5rem; display: grid; gap: 0.2rem; padding-left: 1.2rem; border-left: 3px solid var(--cobalt-blue); }
.sp-casus__naam b { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.15; }
.sp-casus__naam span { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.sp-casus__naam span:first-of-type { color: var(--core-black); opacity: 0.62; }
.sp-casus__naam span:last-of-type { color: var(--cobalt-blue); }
.sp-casus__tekst p { font-size: 1.05rem; }

/* De uitgelichte regel uit het gesprek. Leesbaar gezet, niet gebruld: een
   citaat van zestig woorden op koptekstgrootte is geen citaat meer maar een muur. */
.sprint .sp-citaat {
  margin: clamp(2rem, 4vw, 2.9rem) 0; padding: 0 0 0 clamp(1.5rem, 3vw, 2.2rem);
  background: none; border: 0; border-left: 3px solid var(--cobalt-blue); border-radius: 0;
  font-family: var(--font-heading); font-weight: 300;
  font-size: clamp(1.28rem, 2.05vw, 1.72rem); line-height: 1.36;
  color: var(--cobalt-blue);
}
.sprint .sp-citaat::before { content: '“'; margin-left: -0.44em; }
.sprint .sp-citaat::after { content: '”'; }

.sp-stemmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(3.4rem, 6vw, 5rem); padding-top: clamp(2.4rem, 4vw, 3.4rem); border-top: 1px solid rgba(0, 41, 38, 0.14); }
.sp-stem { margin: 0; background: var(--pure-white); border-radius: var(--sp-radius); padding: clamp(1.6rem, 2.6vw, 2.1rem); display: flex; flex-direction: column; gap: 1.5rem; box-shadow: 0 16px 42px -28px rgba(0, 41, 38, 0.45); }
.sprint .sp-stem blockquote {
  margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
  font-family: var(--font-heading); font-weight: 300;
  font-size: clamp(1.02rem, 1.35vw, 1.16rem); line-height: 1.45; color: var(--moss-green);
}
.sprint .sp-stem blockquote::before { content: '“'; margin-left: -0.42em; }
.sprint .sp-stem blockquote::after { content: '”'; }
.sp-stem figcaption { margin-top: auto; display: flex; align-items: center; gap: 0.85rem; }
.sp-stem figcaption img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.sp-stem figcaption span { display: grid; gap: 0.12rem; font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--cobalt-blue); line-height: 1.4; text-wrap: balance; }
.sp-stem figcaption b { font-family: var(--font-body); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.05em; color: var(--moss-green); }

/* ---------- tijdlijn ----------
   Het dagverloop was een genummerde lijst waarin het uur in vet vooraan
   in de zin stond. Nu staat het uur apart, zodat je de dag kan scannen. */
.sp-tijdlijn { list-style: none; margin-top: clamp(2.2rem, 4vw, 3rem); position: relative; display: grid; gap: 0; }
.sp-tijdlijn > li { display: grid; grid-template-columns: 6.2rem 1fr; gap: clamp(1.2rem, 3vw, 2.2rem); padding: 1.5rem 0; border-top: 1px solid rgba(0, 41, 38, 0.14); }
.sp-tijdlijn > li:last-child { border-bottom: 1px solid rgba(0, 41, 38, 0.14); }
.sp-tijdlijn .sp-uur { font-family: var(--font-body); font-weight: 800; letter-spacing: 0.08em; font-size: 0.86rem; color: var(--cobalt-blue); padding-top: 0.35rem; }
.sp-tijdlijn h3 { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.25rem, 2vw, 1.65rem); margin-bottom: 0.5rem; }
.sp-tijdlijn p { font-size: 1.02rem; }
.sp-tijdlijn li.sp-piek { background: rgba(66, 93, 251, 0.05); border-radius: var(--sp-radius); padding-left: 1.4rem; padding-right: 1.4rem; border-top-color: transparent; }
.sp-tijdlijn li.sp-piek + li { border-top-color: transparent; }
.sp-voorafje { border-left: 3px solid var(--cobalt-blue); padding-left: 1.4rem; margin-top: 1.8rem; }
.sp-voorafje strong { display: block; font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; color: var(--cobalt-blue); margin-bottom: 0.5rem; }

/* ---------- ja / nee ----------
   Stonden als twee identieke witte kaarten naast elkaar, waardoor ze
   even zwaar wogen terwijl de linker de belangrijkste is. */
.sp-keuze { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(1.4rem, 3vw, 2.2rem); align-items: start; }
.sp-keuze__kaart { border-radius: var(--sp-radius-groot); padding: clamp(2rem, 4vw, 3rem); }
.sp-keuze__kaart h3 { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.18; }
.sp-keuze--ja { background: var(--moss-green); color: var(--pure-white); box-shadow: var(--sp-schaduw); }
.sp-keuze--ja h3 { color: var(--pure-white); }
.sp-keuze--ja .checklist li::before { color: var(--signal-green); content: '→'; font-size: 0.9rem; top: 0.05em; }
.sp-keuze--nee { background: transparent; border: 1px solid rgba(0, 41, 38, 0.16); }
.sp-keuze--nee .checklist li::before { color: var(--cobalt-blue); content: '→'; font-size: 0.9rem; top: 0.05em; }
.sp-keuze--nee .checklist li { opacity: 0.82; }

/* ---------- prijs ----------
   Twee kaarten die er identiek uitzagen, met het bedrag op dezelfde
   hoogte als de rest. De groepsdag is wat er nu loopt en krijgt daarom
   gewicht: een label bovenaan, een groene rand en meer schaduw. */
.sp-prijs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 3.4vw, 2.6rem); margin-top: clamp(2.6rem, 5vw, 3.6rem); align-items: start; }
.sp-prijs__kaart { position: relative; background: var(--pure-white); border-radius: var(--sp-radius-groot); padding: clamp(2rem, 4vw, 3rem); box-shadow: var(--sp-schaduw); display: flex; flex-direction: column; gap: 1rem; }
.sp-prijs__kaart--hoofd { border-top: 4px solid var(--signal-green); box-shadow: var(--sp-schaduw-diep); }
.sp-prijs__badge { position: absolute; top: -0.85rem; left: clamp(2rem, 4vw, 3rem); background: var(--moss-green); color: var(--signal-green); font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; padding: 0.45rem 1rem; border-radius: 999px; }
.sp-prijs__soort { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.76rem; color: var(--cobalt-blue); }
.sp-prijs__bedrag { font-family: var(--font-heading); font-weight: 300; font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1; color: var(--moss-green); }
.sp-prijs__bedrag small { font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.6; margin-left: 0.4rem; }
.sp-prijs__kaart .checklist { margin-top: 0.4rem; }
.sp-prijs__kaart .checklist li { font-size: 1rem; }
.sp-prijs__kaart .btn-row { margin-top: auto; padding-top: 1.4rem; }
.sp-prijs__voet { font-size: 0.94rem; opacity: 0.78; }

/* ---------- veelgestelde vragen ----------
   Zeventien vragen achter elkaar met een haarlijn ertussen leest als
   een tabel. Ze staan nu in drie groepen met een kop, en elke rij is
   een vlak dat je kan aanklikken in plaats van een streepje tekst. */
.sp-faq { display: grid; gap: clamp(2.4rem, 5vw, 3.6rem); margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.sp-faq__groep > h3 { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: var(--cobalt-blue); margin-bottom: 1.2rem; }
.sp-faq details { border: 1px solid rgba(0, 41, 38, 0.12); border-radius: var(--sp-radius); padding: 0; margin-bottom: 0.7rem; background: var(--pure-white); transition: box-shadow 0.25s var(--sp-veer), border-color 0.25s var(--sp-veer); }
.sp-faq details:hover { border-color: rgba(66, 93, 251, 0.4); box-shadow: 0 10px 30px -14px rgba(0, 41, 38, 0.3); }
.sp-faq details[open] { border-color: rgba(66, 93, 251, 0.4); box-shadow: 0 14px 36px -16px rgba(0, 41, 38, 0.28); }
.sp-faq summary { padding: 1.25rem clamp(1.2rem, 2.4vw, 1.8rem); font-size: 1.02rem; }
.sp-faq summary::after { content: ''; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(66, 93, 251, 0.4); position: relative; transition: background 0.25s var(--sp-veer); background-image: linear-gradient(var(--cobalt-blue), var(--cobalt-blue)), linear-gradient(var(--cobalt-blue), var(--cobalt-blue)); background-size: 11px 1.5px, 1.5px 11px; background-position: center, center; background-repeat: no-repeat; }
.sp-faq details[open] summary::after { background-size: 11px 1.5px, 1.5px 0; background-color: rgba(66, 93, 251, 0.08); }
.sp-faq details p { padding: 0 clamp(1.2rem, 2.4vw, 1.8rem) 1.4rem; margin-top: 0; max-width: 58em; }
.sp-faq details p + p { padding-top: 0.9rem; }

/* ---------- tussenknoppen ----------
   De pagina is ruim vijfentwintigduizend pixels lang. Wie halverwege beslist
   dat ze het wil, moest daarvoor eerst helemaal naar beneden. Op zes plekken
   staat nu een knop terug naar het aanbod of naar de video, telkens op het
   moment waarop de vraag vanzelf opkomt.

   Ze zijn met opzet omlijnd en niet gevuld: de gevulde kobaltknop blijft van
   de echte actie (reserveren, een gesprek plannen), zodat een sprong naar een
   ander stuk van de pagina daar niet mee concurreert. Groen omlijnd kan alleen
   op een donkere ondergrond, blauw omlijnd alleen op een lichte; omgekeerd
   zakt het contrast onder de grens van de publicatiepoort. */
.sp-sprong { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2.2rem, 4.5vw, 3.2rem); }
.sp-sprong--mid { justify-content: center; }

/* De sprong landt onder de blijvende kopbalk als er geen ruimte boven staat. */
.sp-anker { scroll-margin-top: 5.5rem; }

/* ---------- slot ---------- */
.sprint .slot-foto::before { background: linear-gradient(95deg, rgba(0, 41, 38, 0.9) 0%, rgba(0, 41, 38, 0.74) 55%, rgba(0, 41, 38, 0.52) 100%); }

/* ---------- responsief ---------- */
@media (max-width: 1000px) {
  .sp-vorige { grid-template-columns: repeat(2, 1fr); }
  .sp-prijs, .sp-keuze { grid-template-columns: 1fr; }
}
@media (min-width: 901px) {
  .sp-casus__zij { position: sticky; top: 7.2rem; }
}
@media (max-width: 900px) {
  .sp-casus { grid-template-columns: 1fr; }
  .sp-casus__zij { max-width: 380px; }
  .sp-hero__grid { grid-template-columns: 1fr; gap: 2.6rem; }
  /* De foto stond hier eerst boven de tekst (order: -1). Op een telefoon
     landde je daardoor op een portret zonder te weten waar de pagina over
     gaat: de kop, de belofte en de knop kwamen pas na een halve schermhoogte
     beeld. Nu leest de hero op een telefoon in de volgorde waarin je hem ook
     zou vertellen: waarover het gaat, wat het je oplevert, de knop, en dan
     pas het beeld erbij. */
  .sp-hero__foto { max-width: 330px; margin-left: 0; margin-top: 0.6rem; }
  .sp-hero__geo { width: 290px; right: -118px; top: -104px; opacity: 0.32; }
  .sp-cijfers { grid-template-columns: 1fr; gap: 2.2rem; }
}
@media (max-width: 620px) {
  .sp-vorige { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
  .sp-tijdlijn > li { grid-template-columns: 1fr; gap: 0.4rem; }
  .sp-tijdlijn .sp-uur { padding-top: 0; }
  .sp-feiten { gap: 1.1rem 1.4rem; }
}