/* Dienstpagina's, versie 2 (01-09-2026).
   Vervangt het achtvoudige template-blok. Dossier 29 noteerde het probleem in
   een zin: "een skelet van acht secties leest als een sjabloon". Vier secties,
   elk met een eigen taak: een idee, een ladder, een bewijs, een vraag.
   Alles staat in het tokenstelsel van de site zelf (vivimuscreatives.webflow.css),
   niet in ontwerptaal.css; dat is de afgekeurde variantwereld. */

.p-dienst {
  background-color: var(--_colors---bg--bg-1);
}

/* Het hero-blok van het oude sjabloon staat nog in de webflow-css en zou hier
   dubbele lucht boven de band zetten. */
.p-dienst .section.hero-template {
  display: none;
}

/* ---------------------------------------------------------------------------
   1. De band. Een idee, een beeld, geen raster. De stemwissel serif naar sans
   valt binnen dezelfde zin, hetzelfde scharnier als op de home in .case-statement.
   Tekst en beeld staan naast elkaar en niet over elkaar: een plaat onder tekst
   zet de grond vol, en dat is precies waar de vorige ronde op sneuvelde.
   --------------------------------------------------------------------------- */
.ds-band {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  background-color: var(--_colors---color--dark);
  color: var(--_colors---bg--bg-1);
  min-height: 620px;
  overflow: hidden;
}
.ds-band__tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 112px 64px 112px max(24px, calc((100vw - 1800px) / 2 + 24px));
}
.ds-band__label {
  color: var(--_colors---bg--bg-1);
  opacity: .48;
  margin: 0;
}
.ds-band__zin {
  margin: 0;
  font-size: clamp(38px, 5vw, 76px);
  line-height: 1.02;
  letter-spacing: -2.5px;
  color: var(--_colors---bg--bg-1);
}
.ds-band__a {
  font-family: var(--font--heading-serif);
  font-weight: var(--weight--heading-serif);
}
.ds-band__b {
  font-family: var(--font--heading-sans);
  font-weight: var(--weight--heading-sans);
  opacity: .55;
}
.ds-band__onder {
  margin: 0;
  max-width: 46ch;
  font-size: var(--_text---text-large--font-size);
  line-height: 150%;
  opacity: .72;
}
.ds-band__beeld {
  position: relative;
  min-height: 420px;
}
.ds-band__beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ds-pos, 50% 50%);
}
/* Eigen ontwerpwerk wordt nooit aangesneden, alleen fotografie mag vullen.
   Contain op ontwerp, cover op foto. De beeldkolom krijgt dan wel de lichte
   grond: een ingesloten pagina op een donker vlak zweeft, op bone ligt hij
   naast de uitspraak zoals een vel papier naast een boek. */
.ds-band__beeld.is-ontwerp {
  background-color: var(--ds-grond, var(--_colors---bg--bg-1));
}
.ds-band__beeld.is-ontwerp img {
  object-fit: contain;
  padding: 48px;
}

/* ---------------------------------------------------------------------------
   2. De ladder. Vijf stappen met een echte hierarchie: nummer, kop, tekst.
   Het oude sjabloon zette alles op 15px met opacity .5, waardoor er geen
   leesvolgorde meer was.
   --------------------------------------------------------------------------- */
.ds-ladder {
  padding: 120px 0 24px;
}
.ds-ladder__kop {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 32px;
  margin-bottom: 64px;
}
.ds-ladder__kop h2 {
  margin: 0;
  max-width: 22ch;
  font-size: var(--_text---h2--font-size);
  line-height: 96%;
}
.ds-stap {
  display: grid;
  grid-template-columns: 96px 1fr 1fr;
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid var(--_colors---color--dark-16);
  align-items: start;
}
.ds-stap:last-child {
  border-bottom: 1px solid var(--_colors---color--dark-16);
}
.ds-stap__nr {
  margin: 0;
  font-family: var(--font--heading-serif);
  font-size: 28px;
  line-height: 1;
  color: var(--_colors---color--dark-32);
}
.ds-stap__titel {
  margin: 0;
  font-family: var(--font--heading-sans);
  font-weight: var(--weight--heading-sans);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -1px;
  max-width: 18ch;
}
.ds-stap__tekst {
  margin: 0;
  font-size: var(--_text---text-body--font-size);
  line-height: 156%;
  max-width: 54ch;
}

/* ---------------------------------------------------------------------------
   3. Het bewijs. Hetzelfde apparaat als de uitgelichte cases op de home:
   beeld boven, een dichte balk eronder met naam, uitspraak, bijschrift en
   precies een uitgang. Zo heeft de site een herkenbare mechaniek in plaats van
   per pagina een nieuwe.
   --------------------------------------------------------------------------- */
.ds-bewijs {
  padding: 120px 0 0;
}
.ds-bewijs__kaart {
  border-radius: var(--_spacing---radius--radius-3);
  overflow: hidden;
  background-color: var(--ds-grond, #f4f1ea);
}
.ds-bewijs__beeld {
  position: relative;
  aspect-ratio: 1800 / 1012;
  background-color: var(--ds-grond, #f4f1ea);
}
.ds-bewijs__beeld > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ds-pos, 50% 50%);
}
.ds-bewijs__beeld.is-ontwerp > img {
  object-fit: contain;
}
/* Een tweede opname van hetzelfde werk, klein ingelegd. Bewust een echte foto
   naast een echte foto, geen vormentaal om een gat te vullen. */
.ds-bewijs__inleg {
  position: absolute;
  right: 4%;
  bottom: 0;
  width: 13%;
  min-width: 96px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(42, 33, 25, .28);
}
.ds-bewijs__inleg img {
  display: block;
  width: 100%;
  height: auto;
}
.ds-bewijs__balk {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  justify-content: space-between;
  align-items: flex-end;
  padding: 28px 32px 30px;
  background-color: var(--_colors---color--dark);
  color: var(--_colors---bg--bg-1);
}
.ds-bewijs__naam {
  margin: 0 0 10px;
  color: var(--_colors---bg--bg-1);
  opacity: .48;
}
.ds-bewijs__zin {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.04;
  letter-spacing: -1.4px;
  max-width: 20ch;
}
.ds-bewijs__zin .ds-band__a,
.ds-bewijs__zin .ds-band__b {
  display: inline;
  white-space: nowrap;
}
.ds-bewijs__rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  max-width: 46ch;
}
.ds-bewijs__meting {
  margin: 0;
  color: var(--_colors---bg--bg-1);
  opacity: .6;
  max-width: 40ch;
  font-size: var(--_text---text-small--font-size);
  line-height: 148%;
}
.ds-bewijs__link {
  color: var(--_colors---bg--bg-1);
  text-decoration: none;
  border-bottom: 1px solid rgba(235, 232, 219, .4);
  padding-bottom: 3px;
  transition: border-color .2s ease, color .2s ease;
}
.ds-bewijs__link:hover {
  border-bottom-color: var(--_colors---color--yellow);
  color: var(--_colors---color--yellow);
}

/* ---------------------------------------------------------------------------
   4. De vraag. De funnel stond op intake.html achter twee knoppen onderaan,
   hier staat hij in de pagina zelf, met het doel al ingevuld omdat de bezoeker
   door de keuze van deze dienst antwoord een al gegeven heeft. Drie vragen dus,
   geen vier.
   --------------------------------------------------------------------------- */
.ds-vraag {
  margin-top: 120px;
  padding: 104px 0 112px;
  background-color: var(--_colors---color--dark);
  color: var(--_colors---bg--bg-1);
}
.ds-vraag__kop {
  max-width: 26ch;
  margin: 0 0 12px;
  font-size: var(--_text---h2--font-size);
  line-height: 96%;
  color: var(--_colors---bg--bg-1);
}
.ds-vraag__onder {
  margin: 0 0 48px;
  max-width: 52ch;
  opacity: .64;
}
.ds-vraag__doos {
  max-width: 1200px;
}
/* De funnel-stijlen in custom.css gaan uit van donkere inkt op bone. In deze
   band draait dat om, dus alleen de kleuren worden hier omgezet; maat, raster
   en gedrag blijven exact hetzelfde als op intake.html. */
.ds-vraag .funnel-balk {
  background-color: rgba(235, 232, 219, .18);
}
.ds-vraag .funnel-balk-vulling {
  background-color: var(--_colors---color--yellow);
}
.ds-vraag .funnel-vraag,
.ds-vraag .funnel-optie-titel {
  color: var(--_colors---bg--bg-1);
}
.ds-vraag .funnel-optie {
  border-color: rgba(235, 232, 219, .22);
  color: var(--_colors---bg--bg-1);
}
.ds-vraag .funnel-optie:hover,
.ds-vraag .funnel-optie:focus-visible {
  background-color: rgba(235, 232, 219, .08);
  border-color: rgba(235, 232, 219, .55);
}
.ds-vraag .funnel-optie-uitleg {
  opacity: .62;
}
.ds-vraag .funnel-samenvatting {
  background-color: rgba(235, 232, 219, .08);
}
.ds-vraag .funnel-terug,
.ds-vraag .text-small {
  color: var(--_colors---bg--bg-1);
}
.ds-vraag .funnel-advies-regel a {
  color: var(--_colors---color--yellow);
}

/* --------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .ds-band {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  /* Onder 991 valt de balk in een gestapelde navigatie van twee rijen (gemeten:
     85px hoog op 991, 66px op 375). Met 72px liep het label eronderdoor. */
  .ds-band__tekst {
    padding: 132px 24px 56px;
  }
  .ds-band__beeld {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  .ds-ladder,
  .ds-bewijs {
    padding-top: 80px;
  }
  .ds-ladder__kop,
  .ds-stap {
    grid-template-columns: 64px 1fr;
    gap: 20px;
  }
  .ds-stap__tekst {
    grid-column: 2;
  }
  .ds-vraag {
    margin-top: 80px;
    padding: 72px 0 80px;
  }
}

@media screen and (max-width: 767px) {
  .ds-band__tekst {
    padding-top: 120px;
  }
  .ds-band__zin {
    letter-spacing: -1.5px;
  }
  .ds-ladder__kop {
    grid-template-columns: 1fr;
    margin-bottom: 40px;
  }
  .ds-stap {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 28px 0;
  }
  .ds-stap__tekst {
    grid-column: 1;
  }
  /* De balk onder het bewijs krijgt op telefoon te weinig breedte om rechts
     uit te lijnen, alles gaat links onder elkaar staan. */
  .ds-bewijs__rechts {
    align-items: flex-start;
    text-align: left;
  }
  .ds-bewijs__balk {
    padding: 22px 20px 24px;
  }
  .ds-vraag__kop {
    font-size: var(--_text---h3--font-size);
  }
}

/* De navigatiepillen staan van huis uit op wit met 32 procent dekking en gele
   letters. Op de home werkt dat, want daar ligt overal video onder. De dienstband
   is links donker en rechts beeld, dus daar viel de helft van de balk weg. Een
   pil die iets lichter is dan de band leest op allebei de helften als pil, net
   als op de home. De CTA blijft vol geel. */
.p-dienst .nav-link:not(.cta) {
  background-color: rgba(64, 52, 40, .88);
}
.p-dienst .nav-link:not(.cta):hover {
  background-color: rgba(88, 72, 55, .94);
}

/* =========================================================================
   Het knooppunt op diensten.html. Geen vijfde dienstpagina, maar de wissel:
   een opening die de volgorde benoemt, vier kaarten die elk een uitgang
   hebben, en dezelfde wegwijzer als op de dienstpagina's.
   ========================================================================= */
.ds-open {
  background-color: var(--_colors---color--dark);
  color: var(--_colors---bg--bg-1);
  padding: 152px 0 96px;
}
.ds-open__zin {
  margin: 24px 0 0;
  max-width: 20ch;
  font-size: clamp(38px, 5vw, 76px);
  line-height: 1.02;
  letter-spacing: -2.5px;
  color: var(--_colors---bg--bg-1);
}
.ds-open__onder {
  margin: 28px 0 0;
  max-width: 56ch;
  font-size: var(--_text---text-large--font-size);
  line-height: 150%;
  opacity: .72;
}
.ds-open__label {
  margin: 0;
  color: var(--_colors---bg--bg-1);
  opacity: .48;
}
/* De volgorde is de inhoud van dit scherm, geen versiering: strategie gaat
   voor merk, merk voor bouw, bouw voor ritme. */
.ds-volgorde {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 88px;
  border-top: 1px solid rgba(235, 232, 219, .22);
}
.ds-volgorde__stap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px 8px 0;
  border-right: 1px solid rgba(235, 232, 219, .22);
}
.ds-volgorde__stap:last-child {
  border-right: 0;
}
.ds-volgorde__nr {
  margin: 0;
  font-family: var(--font--heading-serif);
  font-size: 28px;
  line-height: 1;
  color: var(--_colors---color--yellow);
}
.ds-volgorde__naam {
  margin: 0;
  font-family: var(--font--heading-sans);
  font-weight: var(--weight--heading-sans);
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -.5px;
  color: var(--_colors---bg--bg-1);
}
.ds-volgorde__uitleg {
  margin: 0;
  font-size: var(--_text---text-small--font-size);
  line-height: 148%;
  opacity: .58;
  max-width: 26ch;
}

.ds-kaarten {
  padding: 96px 0 0;
}
.ds-kaarten__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 48px;
}
.ds-kaart {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--_spacing---radius--radius-3);
  overflow: hidden;
  background-color: var(--_colors---color--dark);
}
.ds-kaart__beeld {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--ds-grond, #f4f1ea);
}
.ds-kaart__beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ds-pos, 50% 50%);
  transition: transform .5s ease;
}
.ds-kaart__beeld.is-ontwerp img {
  object-fit: contain;
  padding: 28px;
}
.ds-kaart:hover .ds-kaart__beeld img {
  transform: scale(1.02);
}
.ds-kaart__tekst {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 28px 32px 32px;
  color: var(--_colors---bg--bg-1);
}
.ds-kaart__label {
  margin: 0 0 12px;
  color: var(--_colors---bg--bg-1);
  opacity: .48;
}
.ds-kaart__zin {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.06;
  letter-spacing: -1.2px;
  max-width: 20ch;
}
.ds-kaart__onder {
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: var(--_text---text-body--font-size);
  line-height: 154%;
  opacity: .68;
}
.ds-kaart__uit {
  /* Onderaan de kaart, zodat de vier uitgangen op een lijn staan ook als de
     tekst erboven verschilt in lengte. */
  align-self: flex-start;
  margin-top: auto;
  padding-top: 22px;
  padding-bottom: 3px;
  color: var(--_colors---bg--bg-1);
  border-bottom: 1px solid rgba(235, 232, 219, .4);
  transition: border-color .2s ease, color .2s ease;
}
.ds-kaart:hover .ds-kaart__uit {
  color: var(--_colors---color--yellow);
  border-bottom-color: var(--_colors---color--yellow);
}

@media screen and (max-width: 991px) {
  .ds-open {
    padding: 132px 0 72px;
  }
  .ds-volgorde {
    grid-template-columns: 1fr 1fr;
    margin-top: 56px;
  }
  .ds-volgorde__stap {
    padding: 20px 20px 20px 0;
    border-bottom: 1px solid rgba(235, 232, 219, .22);
  }
  .ds-volgorde__stap:nth-child(2n) {
    border-right: 0;
  }
  .ds-kaarten {
    padding-top: 72px;
  }
  .ds-kaarten__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
@media screen and (max-width: 767px) {
  .ds-open {
    padding: 120px 0 64px;
  }
  .ds-open__zin {
    letter-spacing: -1.5px;
  }
  .ds-volgorde {
    grid-template-columns: 1fr;
  }
  .ds-volgorde__stap {
    border-right: 0;
    padding: 18px 0;
  }
  .ds-kaart__tekst {
    padding: 24px 20px 26px;
  }
}

/* De twee plekken op de dienstpagina's die dezelfde leesmaat dragen. Staat hier
   en niet in custom.css omdat dienst.css later laadt en anders zou winnen.
   Zie de toelichting onderaan custom.css. */
@media screen and (max-width: 767px) {
  .ds-bewijs__meting,
  .ds-volgorde__uitleg {
    font-size: 14px;
  }
}


/* =========================================================================
   Toevoeging 09-09-2026: pakketten.html en intake.html in dezelfde taal.
   Alleen nieuwe klassen; niets hierboven is gewijzigd.
   ========================================================================= */

/* Pakketten: drie kaarten naast elkaar, dezelfde donkere kaart als op het
   knooppunt, zonder beeld. De prijs neemt de plek van de uitspraak in. */
.ds-kaarten__onder {
  margin: 14px 0 0;
  max-width: 52ch;
  font-size: var(--_text---text-large--font-size);
  line-height: 150%;
  opacity: .72;
}
.ds-pakketten__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ds-pakket__prijs {
  max-width: none;
  white-space: nowrap;
}
.ds-pakket__per {
  font-size: var(--_text---text-body--font-size);
  letter-spacing: 0;
}
.ds-pakket__lijst {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid rgba(235, 232, 219, .22);
}
.ds-pakket__lijst li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(235, 232, 219, .14);
  font-size: var(--_text---text-small--font-size);
  line-height: 148%;
  opacity: .82;
}
.ds-pakket .ds-kaart__uit {
  text-decoration: none;
}
.ds-pakket .ds-kaart__uit:hover {
  color: var(--_colors---color--yellow);
  border-bottom-color: var(--_colors---color--yellow);
}
/* Het ijkpunt krijgt de enige gele rand, zoals de CTA in de nav de enige gele pil is. */
.ds-pakket.is-uitgelicht {
  box-shadow: inset 0 0 0 2px var(--_colors---color--yellow);
}
.ds-pakket.is-uitgelicht .ds-kaart__label {
  color: var(--_colors---color--yellow);
  opacity: 1;
}

/* De cta-duo in de sluitband van pakketten, zonder funnel eromheen. */
.ds-vraag > .w-container > .cta-duo {
  margin-top: 8px;
}

/* Intake: de vraagband IS de funnel. Eén vraag per scherm, verticaal
   gecentreerd binnen 100vh, zodat het als een app-stap leest en niet als
   een landingspagina met een quiz onderaan. */
.ds-vraag.is-boven {
  margin-top: 0;
  padding-top: 152px;
  padding-bottom: 56px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* De uitkomststap draagt meer inhoud (advies + samenvatting + twee knoppen);
   die lijnt bovenaan uit zodat niets onder de menubalk wegvalt. */
.ds-vraag.is-boven:has(.funnel-stap[data-stap="4"]:not([hidden])) {
  justify-content: flex-start;
}
/* De intro-alinea weg: de vraag zelf is het eerste dat telt, geen aanloop. */
.ds-vraag.is-boven .ds-open__onder {
  display: none;
}
/* Geen scheidslijn/marge meer boven de funnel: de slanke voortgangsbalk is
   het enige ankertje tussen titel en vraag. */
.ds-vraag.is-boven .ds-vraag__doos {
  margin-top: 30px;
  padding-top: 0;
  border-top: 0;
  max-width: 100%;
}
.ds-vraag__label {
  margin: 0 0 20px;
  color: var(--_colors---bg--bg-1);
  opacity: .48;
}
.ds-ladder.is-slot {
  padding-bottom: 120px;
}

@media screen and (max-width: 991px) {
  .ds-pakketten__grid {
    grid-template-columns: 1fr;
  }
  .ds-vraag.is-boven {
    padding-top: 132px;
  }
  .ds-vraag.is-boven .ds-vraag__doos {
    margin-top: 24px;
    padding-top: 0;
  }
  .ds-ladder.is-slot {
    padding-bottom: 80px;
  }
}
@media screen and (max-width: 767px) {
  .ds-vraag.is-boven {
    padding-top: 120px;
  }
  .ds-pakket__prijs {
    white-space: normal;
  }
}

/* ============================================================
   VOORTGANG ALS SEGMENTEN
   Vervangt de oude, animerende breedtebalk (die op een verborgen
   tab op 0 bevroor). funnel.js bouwt een blokje per vraag; hier de
   vorm. Standaard = donkere band (dienstpagina's): gele blokjes.
   ============================================================ */
.funnel-balk {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
  height: 10px;
  background: transparent;
  overflow: visible;
  border-radius: 0;
}
.funnel-seg {
  border-radius: 99px;
  background: var(--seg-leeg, rgba(235, 232, 219, .20));
  transition: background-color .2s ease;
}
.funnel-seg.is-nu {
  background: var(--seg-nu, rgba(255, 218, 61, .45));
}
.funnel-seg.is-vol {
  background: var(--seg-vol, var(--_colors---color--yellow));
}

/* ============================================================
   INTAKE - gele klikfunnel
   Dauji 10-09: "de intake, de achtergrond mag geel, moet echt een
   klikfunnel zijn, behapbaar, toffe info." Alleen deze band
   (.ds-vraag.is-boven) wordt geel; de dienstpaginabanden blijven donker.
   ============================================================ */
.ds-vraag.is-boven {
  background-color: var(--_colors---color--yellow);
  color: var(--_colors---color--dark);
  --seg-leeg: rgba(42, 33, 25, .22);
  --seg-nu: rgba(42, 33, 25, .45);
  --seg-vol: var(--_colors---color--dark);
}
/* Alle tekst in de band naar donkere inkt. */
.ds-vraag.is-boven .ds-open__label,
.ds-vraag.is-boven .ds-open__zin,
.ds-vraag.is-boven .ds-open__onder,
.ds-vraag.is-boven .ds-vraag__label,
.ds-vraag.is-boven .funnel-vraag,
.ds-vraag.is-boven .funnel-teller,
.ds-vraag.is-boven .funnel-optie-titel,
.ds-vraag.is-boven .funnel-optie-uitleg,
.ds-vraag.is-boven .funnel-terug,
.ds-vraag.is-boven .text-small,
.ds-vraag.is-boven .funnel-samenvatting,
.ds-vraag.is-boven .funnel-advies-regel {
  color: var(--_colors---color--dark);
}
.ds-vraag.is-boven .funnel-optie-uitleg { opacity: .60; }
/* Behapbaar: één voortgangsindicator. De segmentenbalk toont de plek al,
   dus de tekstteller "Vraag N van 4" en het "Vier vragen"-label eroverheen
   zijn dubbel en gaan weg. */
.ds-vraag.is-boven .ds-vraag__label,
.ds-vraag.is-boven .funnel-teller {
  display: none;
}
/* De titel boven de funnel wordt het onderschrift: klein, ondergeschikt aan
   de vraag. Zo is de vraag zelf de kop van het scherm, niet de meta-zin. */
.ds-vraag.is-boven .ds-open__zin {
  font-size: clamp(22px, 2.4vw, 31px);
  line-height: 1.08;
  letter-spacing: -.6px;
  max-width: 24ch;
  margin: 0;
  opacity: .72;
}
/* De vraag is de held van het scherm: groot, serif, één regel ademruimte. */
.ds-vraag.is-boven .funnel-vraag {
  font-family: var(--font--heading-serif);
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -1.5px;
  max-width: 18ch;
}
/* Slanke voortgangsbalk, links uitgelijnd, niet paginabreed. */
.ds-vraag.is-boven .funnel-balk {
  height: 6px;
  gap: 8px;
  max-width: 420px;
}
.ds-vraag.is-boven .funnel {
  gap: 26px;
}
/* Grote, tikbare keuzes. Drie vragen hebben drie opties (drie kolommen),
   de doelvraag heeft er vier (twee bij twee): count-aware via :has(). */
.ds-vraag.is-boven .funnel-opties {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 980px;
}
.ds-vraag.is-boven .funnel-opties:has(> .funnel-optie:nth-child(4)) {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
}
.ds-vraag.is-boven .funnel-optie-titel {
  font-size: clamp(18px, 1.6vw, 23px);
  letter-spacing: -.4px;
}
/* Optiekaarten: tastbaar, klikbaar, met pijl-affordance; inverteren bij
   hover/focus. Ruimte rechts vrij voor de pijl. */
.ds-vraag.is-boven .funnel-optie {
  position: relative;
  border: 1.5px solid var(--_colors---color--dark);
  background: transparent;
  color: var(--_colors---color--dark);
  border-radius: 16px;
  padding: 24px 52px 24px 24px;
  min-height: 112px;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.ds-vraag.is-boven .funnel-optie::after {
  content: "\2192";
  position: absolute;
  right: 20px;
  top: 22px;
  font-size: 19px;
  opacity: .32;
  transition: transform .15s ease, opacity .15s ease;
}
.ds-vraag.is-boven .funnel-optie:hover::after,
.ds-vraag.is-boven .funnel-optie:focus-visible::after {
  opacity: 1;
  transform: translateX(4px);
  color: var(--_colors---color--yellow);
}
.ds-vraag.is-boven .funnel-optie:hover,
.ds-vraag.is-boven .funnel-optie:focus-visible {
  background-color: var(--_colors---color--dark);
  color: var(--_colors---color--yellow);
  transform: translateY(-2px);
}
.ds-vraag.is-boven .funnel-optie:hover .funnel-optie-titel,
.ds-vraag.is-boven .funnel-optie:hover .funnel-optie-uitleg,
.ds-vraag.is-boven .funnel-optie:focus-visible .funnel-optie-titel,
.ds-vraag.is-boven .funnel-optie:focus-visible .funnel-optie-uitleg {
  color: var(--_colors---color--yellow);
}
/* De uitkomstkop is een conclusie, geen vraag: iets rustiger dan de grote
   vraagkop, wat ook hoogte scheelt zodat de resultatenkaart eerder past. */
.ds-vraag.is-boven #funnel-kop {
  font-size: clamp(28px, 3.4vw, 44px);
}
/* De samenvatting in de uitkomst: subtiel donker vlak op geel. */
.ds-vraag.is-boven .funnel-samenvatting {
  background: rgba(42, 33, 25, .07);
  border-radius: 14px;
  padding: 18px 22px;
}
.ds-vraag.is-boven .funnel-advies-regel a {
  color: var(--_colors---color--dark);
}
/* De agenda-CTA is normaal een gele pil: op geel onzichtbaar, dus donker maken.
   De tweede knop (mail) is al een omlijnde donkere knop en klopt op geel. */
.ds-vraag.is-boven .cta-duo .nav-link.cta {
  background-color: var(--_colors---color--dark);
}
.ds-vraag.is-boven .cta-duo .nav-link.cta .button-label {
  color: var(--_colors---color--yellow);
}
.ds-vraag.is-boven .cta-duo .nav-link.cta.cta-tweede {
  background-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--_colors---color--dark);
}
.ds-vraag.is-boven .cta-duo .nav-link.cta.cta-tweede .button-label {
  color: var(--_colors---color--dark);
}
/* Mobiel: elke keuze op een eigen regel. Dit blok staat bewust NA de
   :has()-kolomregels hierboven, zodat het bij gelijke specificiteit wint. */
@media screen and (max-width: 767px) {
  .ds-vraag.is-boven .funnel-opties,
  .ds-vraag.is-boven .funnel-opties:has(> .funnel-optie:nth-child(4)) {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .ds-vraag.is-boven .funnel-optie {
    min-height: 0;
  }
  .ds-vraag.is-boven .funnel-vraag {
    font-size: clamp(30px, 8vw, 40px);
  }
}

/* =========================================================================
   Toevoeging 07-10-2026: projecten.html in dezelfde taal (blok 2).
   Alleen nieuwe regels; niets hierboven is gewijzigd.
   ========================================================================= */

/* Op het werkoverzicht is het hele beeld de link naar de case. Een a is
   inline, en aspect-ratio werkt alleen op een blok. */
a.ds-bewijs__beeld {
  display: block;
}
/* Drie bewijzen onder elkaar: tussen twee kaarten minder lucht dan boven de eerste. */
.ds-werk .ds-bewijs + .ds-bewijs {
  padding-top: 64px;
}
/* De ladder als slot: een stap mag twee alineas dragen. */
.ds-werk .ds-stap__tekst p {
  margin: 0 0 14px;
}
.ds-werk .ds-stap__tekst p:last-child {
  margin-bottom: 0;
}
.ds-werk__links a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--_colors---color--dark-32);
  padding-bottom: 2px;
  transition: border-color .2s ease;
}
.ds-werk__links a:hover {
  border-bottom-color: var(--_colors---color--dark);
}
/* Na de slotladder komt de vraagband direct, anders staat er twee keer 120px lucht. */
.ds-werk .ds-ladder.is-slot + .ds-vraag {
  margin-top: 0;
}
@media screen and (max-width: 991px) {
  .ds-werk .ds-bewijs + .ds-bewijs {
    padding-top: 48px;
  }
}

/* Regelval op projecten: geen woord alleen op de laatste regel (gemeten 07-10, twee wezen op 1440). */
.ds-werk .ds-stap__tekst p, .ds-werk .ds-vraag__kop, .ds-werk .ds-vraag__onder, .ds-werk .ds-open__onder, .ds-werk .ds-bewijs__meting { text-wrap: pretty; }

/* De tweede knop in de donkere sluitband: licht op donker, zoals .cs-vraag in case.css.
   Bewust alleen op projecten; pakketten heeft dezelfde fout maar valt buiten blok 2. */
.ds-werk .ds-vraag:not(.is-boven) .cta-duo .nav-link.cta.cta-tweede,
.ds-werk .ds-vraag:not(.is-boven) .cta-duo .nav-link.cta.cta-tweede .button-label {
  color: var(--_colors---bg--bg-1);
}
.ds-werk .ds-vraag:not(.is-boven) .cta-duo .nav-link.cta.cta-tweede {
  box-shadow: inset 0 0 0 1px rgba(235, 232, 219, .4);
}
/* De openingszin breekt op dezelfde plek als voorheen: tweede helft op een eigen regel. */
.ds-werk .ds-open__zin .ds-band__b { display: block; }

/* ---------- Spoor 1, 12-10-2026: geen eenwoordige laatste regel op diensten en dienst-* ----------
   Gemeten 5 tot 6 per pagina (1440 en 375). Koppen en titels balanceren, lopende tekst pretty.
   main.ds-werk heeft een eigen regel hierboven en valt buiten dit blok; fotografie en videografie (main.ds.bv) gemeten: 0 voor en na. */
main:not(.ds-werk) :is(p, li, .ds-open__onder, .ds-volgorde__uitleg, .ds-band__onder, .ds-stap__tekst, .ds-vraag__onder, .ds-bewijs__meting) { text-wrap: pretty; }
/* na de pretty-regel: gelijke specificiteit, dus de volgorde beslist */
main:not(.ds-werk) :is(h1, h2, h3, .ds-open__zin, .ds-kaart__zin, .ds-vraag__kop, .ds-band__zin, .ds-stap__titel) { text-wrap: balance; }

/* ---------- Spoor 1, 12-10-2026 (2): tweede knop in de donkere sluitband, site-breed ----------
   Was donker op donker op elke pagina met .ds-vraag zonder .is-boven. Zelfde waarden als de lokale
   regels in pakketten.css en beeld.css (die mogen nu weg, ze winnen met dezelfde waarden). */
.ds-vraag:not(.is-boven) .cta-duo .nav-link.cta.cta-tweede,
.ds-vraag:not(.is-boven) .cta-duo .nav-link.cta.cta-tweede .button-label {
  color: var(--_colors---bg--bg-1);
}
.ds-vraag:not(.is-boven) .cta-duo .nav-link.cta.cta-tweede {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(235, 232, 219, .4);
}
.ds-vraag:not(.is-boven) .cta-duo .nav-link.cta.cta-tweede:hover {
  box-shadow: inset 0 0 0 1px var(--_colors---color--yellow);
}

/* ---------- Spoor 1, 12-10-2026 (3): sectielabel boven de kop in plaats van in de nummerkolom ----------
   Labels als "Wat we draaien" (147 px) braken in de kolom van 96 px (64 px onder 992) over twee regels.
   Het label staat nu in de kopkolom, direct boven de kop; onder 768 stapelde het al. */
@media screen and (min-width: 768px) {
  .ds-ladder__kop { row-gap: 16px; }
  .ds-ladder__kop > .label,
  .ds-ladder__kop > h2 { grid-column: 2; }
}

/* ---------- Spoor 1, 13-10-2026 (4): verwijsregel naar fotografie en videografie ----------
   Onder de stappen op dienst-content en dienst-merk, en onder de kaarten op diensten.
   Lijnt met de tekstkolom van de stappen (nummerkolom plus gat). Geen nav-menupunt. */
.ds-ook {
  margin: 0;
  padding: 28px 0 0 128px;
  border-top: 1px solid var(--_colors---color--dark-16);
  font-size: var(--_text---text-body--font-size);
  line-height: 156%;
}
.ds-ook a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.ds-ook a:hover { text-decoration-color: var(--_colors---color--yellow); }
.ds-kaarten .ds-ook { padding-left: 0; border-top: 0; margin-top: 40px; }
.ds-ook + .ds-ook, .ds-kaarten .ds-ook + .ds-ook { margin-top: 6px; padding-top: 0; border-top: 0; }
@media screen and (max-width: 991px) { .ds-ook { padding-left: 84px; } }
@media screen and (max-width: 767px) { .ds-ook { padding-left: 0; } }