/* Vivimus kritiekronde-fixes 23-07-2026. Bron van waarheid: vivimus-site-v2/09-kritieklog.md
   Deze laag ligt bewust NA de Webflow-css: de export blijft onaangetast. */

/* 1. Display-koppen stonden op line-height 1.0; de regel-reveal-maskers knipten
      daardoor stokken en staarten af (gemeten: 64px/64px). */
.text-h2,
.heading-large,
.text-snap-large {
  line-height: 1.12;
}

/* Reveal-maskers iets lucht geven zodat uitstekers niet tegen de maskerrand staan. */
.text-mask-snap {
  padding-block: 0.08em;
}

/* 2. De fixed nav had geen drager; koppen schoven er dwars doorheen tijdens
      pin-animaties. custom.js zet .is-scrolled zodra de hero voorbij is. */
.navbar.is-scrolled {
  background-color: #ebe6dc;
  box-shadow: 0 1px 0 rgba(23, 21, 15, 0.08);
}

/* Ankernavigatie niet onder de fixed nav laten landen. */
section[id] {
  scroll-margin-top: 96px;
}

/* 3. Werkwijze-carousel: buurpanelen lekten buiten de container het beeld in
      (panels-outer stond op overflow visible). */
.panels-outer {
  overflow: clip;
}

/* 4. Case-link om de snap-knop: display contents houdt de layout exact alsof
      de anchor er niet is, zodat de IX2-hoveranimatie blijft werken. */
.snap-case-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

/* 5. Cases-sectie op de home, HERZIEN 30-07-2026. De klik-toggle (button-snap,
      site-scoped in webflow.js) is die dag hersteld; de eerdere statische
      ruststaat (hidden-text op display:none + adem-wissel in custom.js) vocht
      daarmee en is vervangen. Wat hier blijft is alleen de rust-GEOMETRIE die
      de page-scoped beginstand-animatie op de home vervangt; alle wissels
      (opacity, kleur, slide) doet de Webflow-kliktijdlijn zelf. */
.p-home .button-wrap-snap .button-snap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}
.p-home .button-wrap-snap .button-cirlce-wrap,
.p-home .button-wrap-snap .button-circle {
  position: static;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
}
.p-home .button-wrap-snap .button-visible-text {
  position: static;
  opacity: 1;
}
/* De klik-tijdlijn zet de dekking van beide knopteksten om; wij leggen ze
   alleen op dezelfde plek. Start: zichtbare tekst aan, verborgen tekst uit. */
.p-home .button-wrap-snap .button-hidden-text {
  position: absolute;
  left: 32px;
  top: 50%;
  translate: 0 -50%;
  opacity: 0;
  white-space: nowrap;
}
/* De twee statement-regels schuiven door een venster van één regel: regel 2
   wacht onder het venster (top 100%); de kliktijdlijn schuift beide -100%.
   height:auto + padding:0 overrulen de vaste 10.417vw-vensterhoogte van de
   export (>=1440): die was ontworpen op het strakke template-regelritme
   (160px), terwijl ronde 1 de regelhoogte bewust op 1.12 zette zodat de
   serif-inkt binnen de box past. Venster = regel 1 zelf, op elk formaat. */
.p-home .text-mask-snap {
  position: relative;
  overflow: hidden;
  height: auto;
  padding: 0;
}
.p-home .text-mask-snap .second-layer {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}
.p-home .button-visible-text .label {
  white-space: nowrap;
}

/* 6. Preloader zichtbaar vanaf de allereerste paint (30-07-2026). De export
      zet display:none en laat de IX3-load-tijdlijn 'm op flex zetten; op een
      snelle verbinding zie je daardoor eerst de site en klapt het zwarte
      scherm er pas daarna overheen. Scoped op w-mod-js zodat een bezoeker
      zonder JS nooit een dicht scherm overhoudt; het wegspelen blijft van de
      bestaande load-tijdlijn. */
html.w-mod-js .preloader {
  display: flex;
}

/* 7. Staartletters in de teaser-woorden (30-07-2026): de onderkant van de
      regelbox lag exact op de wrapper-onderkant (gemeten 512=512) terwijl de
      g-inkt van LT Superior Serif circa 12px onder de box uitsteekt. Extra
      regelruimte haalt de inkt binnen de box, zodat geen enkel realtime-
      animatievenster 'm nog kan raken. */
#base .text-master-scroll-center .text-h2 {
  line-height: 1.3;
}

/* 8. Casepagina's, "Uit het merk"-beeldblok (30-07-2026): echte merkassets
      (Uchu halftone/globe, TCT banner) in de bestaande template-halves-taal. */
.case-beeld {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-beeld img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--_spacing---radius--radius-3);
}

/* 9. Casepagina-titel op mobiel (08-08-2026): op 375 is de tekstkolom 328px
      breed, terwijl een woord van dertien tekens op 56px al 399px meet. Dat
      liet case-fiori.html 40px horizontaal overlopen (gemeten: scrollWidth 415
      tegen innerWidth 375). De copy is ingekort en deze regel vangt af dat een
      lang woord uit het CMS de layout opnieuw kan breken. */
.template-hero-title-wrap h1,
.template-hero-title-wrap .no-margins {
  overflow-wrap: break-word;
}

/* 10. Cases-statement, staartletters (08-08-2026). Dit is de afsnijding die
       Dauji meldde. Regel 1 hierboven zette de regelhoogte op 1.12; voor de
       200px-statements in #makes was dat nog te krap. Gemeten op de staging:
       masker 224px hoog, basislijn op 184px, terwijl de g-staart van
       Instrument Sans 43px onder de basislijn doorloopt. Onderkant inkt lag
       dus 3px onder de maskerrand ("Geen logo," op 1440, "naar aanraking."
       idem); op 375 was het 1,5px op regel twee. Het masker is precies één
       regelbox, dus alleen regelhoogte verruimt hem. Op 1.26 wordt de
       basislijn 198px in een masker van 252px: 11px lucht onder de staart op
       1440 en 5px op 375. Alleen .text-snap-large, want de andere koppen uit
       regel 1 zitten niet in een strak masker. */
.text-snap-large {
  line-height: 1.26;
}

/* 11. Nieuwe subpagina's (09-08-2026): diensten, pakketten, klikfunnel en de
       aanvullingen op de casepagina's. Alles is opgebouwd uit bestaande
       template-blokken; hieronder staat alleen wat de export niet had. Kleuren
       en maten komen uit de Webflow-tokens, dus er komt geen nieuwe vormtaal
       bij en dit valt niet onder GATE 2. */

/* 11a. Twee knoppen naast elkaar onder een blok. De tweede is de zachte
        uitgang, dus omlijnd in plaats van gevuld. */
.cta-duo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--_spacing---spacing--12);
  align-items: center;
}
/* De template geeft .nav-link.cta width:100%, waardoor twee knoppen naast
   elkaar alsnog onder elkaar vallen (gemeten 09-08: beide 897px breed).
   Binnen de duo krimpen ze dus terug naar hun eigen tekstbreedte. */
.cta-duo .nav-link.cta {
  width: auto;
  flex: 0 0 auto;
}
.cta-duo .nav-link.cta.cta-tweede {
  background-color: var(--_colors---color--transparent);
  box-shadow: inset 0 0 0 1px var(--_colors---color--dark-32);
}

/* 11b. Feitenrij op de casepagina's: jaar, rol, doorlooptijd, disciplines.
        Auto-fit zodat hij op 375 netjes in een kolom valt zonder mediaquery. */
.case-feiten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--_spacing---spacing--24);
  width: 100%;
}
.case-feit {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---spacing--6);
  padding-top: var(--_spacing---spacing--12);
  border-top: 1px dashed var(--_colors---color--dark-32);
}
.case-feit-waarde {
  font-family: var(--font--heading-serif);
  font-size: var(--_text---h6--font-size);
  line-height: 1.2;
  letter-spacing: -1px;
}

/* 11c. Vorige/volgende case. Twee gelijke helften, op mobiel onder elkaar. */
.case-sprong {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--_spacing---spacing--16);
  width: 100%;
}
.case-sprong a {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---spacing--6);
  padding: var(--_spacing---spacing--20);
  border-radius: var(--_spacing---radius--radius-2);
  background-color: var(--_colors---color--dark-4);
  color: var(--_colors---color--dark);
  text-decoration: none;
  transition: background-color .2s ease;
}
.case-sprong a:hover {
  background-color: var(--_colors---color--dark-8);
}
.case-sprong-titel {
  font-family: var(--font--heading-serif);
  font-size: var(--_text---h7--font-size);
  line-height: 1.25;
  letter-spacing: -.5px;
}

/* 11d. Pakketkaarten. Drie naast elkaar vanaf circa 900px beschikbare breedte,
        daaronder vanzelf minder kolommen. De uitgelichte kaart is het ijkpunt
        en krijgt daarom de gele accentrand uit de tokens, niet een eigen kleur. */
.pakket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--_spacing---spacing--16);
  width: 100%;
  align-items: stretch;
}
.pakket-kaart {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---spacing--12);
  padding: var(--_spacing---spacing--24);
  border-radius: var(--_spacing---radius--radius-2);
  background-color: var(--_colors---color--dark-4);
}
.pakket-kaart.is-uitgelicht {
  background-color: var(--_colors---color--dark-8);
  box-shadow: inset 0 0 0 2px var(--_colors---color--yellow);
}
.pakket-prijs {
  font-family: var(--font--heading-sans);
  font-size: var(--_text---h4--font-size);
  line-height: 1.15;
  letter-spacing: -1px;
}
.pakket-per {
  font-family: var(--font--body);
  font-size: var(--_text---text-small--font-size);
  letter-spacing: 0;
  opacity: .5;
}
.pakket-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---spacing--8);
  flex: 1;
}
.pakket-lijst li {
  padding-left: 18px;
  position: relative;
}
.pakket-lijst li:before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--_colors---color--dark-48);
}
.pakket-kaart .nav-link.cta {
  align-self: flex-start;
}

/* 11e. Klikfunnel. Een vraag tegelijk in beeld; de rest staat op [hidden].
        Knoppen zijn echte buttons, dus toetsenbord en screenreader werken
        zonder extra rolattributen. */
.funnel {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---spacing--24);
  width: 100%;
}
.funnel-balk {
  height: 3px;
  width: 100%;
  background-color: var(--_colors---color--dark-16);
  border-radius: var(--_spacing---radius--full);
  overflow: hidden;
}
.funnel-balk-vulling {
  height: 100%;
  width: 0;
  background-color: var(--_colors---color--dark);
  transition: width .35s ease;
}
.funnel-stap[hidden] {
  display: none;
}
.funnel-stap {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---spacing--16);
}
.funnel-vraag {
  margin: 0;
  font-size: var(--_text---h4--font-size);
  line-height: 1.15;
}
.funnel-opties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--_spacing---spacing--12);
}
.funnel-optie {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---spacing--4);
  text-align: left;
  padding: var(--_spacing---spacing--20);
  border: 1px solid var(--_colors---color--dark-16);
  border-radius: var(--_spacing---radius--radius-2);
  background-color: var(--_colors---color--transparent);
  color: var(--_colors---color--dark);
  font-family: var(--font--body);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.funnel-optie:hover,
.funnel-optie:focus-visible {
  background-color: var(--_colors---color--dark-8);
  border-color: var(--_colors---color--dark-48);
}
.funnel-optie-titel {
  font-family: var(--font--heading-serif);
  font-size: var(--_text---h7--font-size);
  line-height: 1.25;
  letter-spacing: -.5px;
}
.funnel-optie-uitleg {
  font-size: var(--_text---text-small--font-size);
  line-height: 1.35;
  opacity: .5;
}
.funnel-terug {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font--body);
  font-size: var(--_text---text-small--font-size);
  color: var(--_colors---color--dark);
  opacity: .5;
  text-decoration: underline;
}
.funnel-terug:hover {
  opacity: 1;
}
.funnel-samenvatting {
  list-style: none;
  margin: 0;
  padding: var(--_spacing---spacing--20);
  border-radius: var(--_spacing---radius--radius-2);
  background-color: var(--_colors---color--dark-4);
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---spacing--6);
}
.funnel-advies-regel {
  margin: 0 0 var(--_spacing---spacing--8);
}
.funnel-advies-regel:last-child {
  margin-bottom: 0;
}

/* 11e-bis. Adresveld in de funnel-uitkomst (14-09-2026). Gaat pas open na
        een klik op "STUUR DIT PER MAIL", zodat de uitkomst zelf niet hoger
        wordt (gemeten 865px op 1440x900 voor de ingreep). Alles in currentColor
        zodat hetzelfde blok werkt op de gele band (intake, .is-boven) en op de
        donkere band (diensten en dienst-*). */
.funnel-mailveld {
  /* Eén rij: veld, knop en de mailto-terugval naast elkaar. Als kolom
     (veld boven, link eronder) was het blok 70px en de open uitkomst 921px
     op 1440x900; als rij is het 41px en blijft de uitkomst onder de 900. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_spacing---spacing--8) var(--_spacing---spacing--16);
  width: 100%;
  max-width: 900px;
  margin: 0;
  color: inherit;
}
.funnel-mailveld[hidden] {
  display: none;
}
.funnel-mailveld__label {
  /* Visueel verborgen, wel voor schermlezers: de vraag staat als placeholder
     in het veld. Met label erbij kwam de open uitkomst op 948px (1440x900). */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Zolang het adresveld open staat is "Begin opnieuw" overbodig; zo blijft de
   uitkomst met open veld binnen de 900px van het scherm. */
.funnel-mailveld:not([hidden]) ~ .funnel-terug {
  display: none;
}
.funnel-mailveld__rij {
  display: flex;
  flex: 1 1 520px;
  gap: var(--_spacing---spacing--8);
  align-items: stretch;
}
.funnel-mailveld__rij[hidden] {
  display: none;
}
.funnel-mailveld__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-family: var(--font--body);
  font-size: var(--_text---text-small--font-size);
  line-height: 1.3;
}
.funnel-mailveld__input::placeholder {
  color: inherit;
  opacity: .5;
}
.funnel-mailveld__input:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.funnel-mailveld__knop {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font--body);
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
}
/* De knop draagt de tegenkleur van de band: op de donkere band (diensten,
   dienst-*) licht met donkere letters, op de gele band (intake, .is-boven)
   donker met gele letters. Gemeten 14-09 op staging: background: currentColor
   nam de knop-eigen kleur en gaf geel op geel, dus beide kleuren staan nu
   expliciet. */
.funnel-mailveld__knop {
  background: var(--_colors---color--light);
  color: var(--_colors---color--dark);
}
.ds-vraag.is-boven .funnel-mailveld__knop {
  background: var(--_colors---color--dark);
  color: var(--_colors---color--yellow);
}
.funnel-mailveld__knop:disabled {
  opacity: .5;
  cursor: wait;
}
.funnel-mailveld__melding {
  flex: 1 1 100%;
  opacity: .85;
}
.funnel-mailveld__alt {
  flex: 0 0 auto;
  white-space: nowrap;
  color: inherit;
  opacity: .6;
  text-decoration: underline;
}
.funnel-mailveld__alt:hover {
  opacity: 1;
}
.funnel-mailveld.is-klaar .funnel-mailveld__alt {
  display: none;
}

/* 11f. De template-halves zetten links een smalle kolom en rechts een brede.
        Onder 768px valt Webflow zelf terug op een kolom; de nieuwe rasters
        hierboven zijn auto-fit, dus die volgen vanzelf. */
@media screen and (max-width: 767px) {
  .funnel-vraag,
  .pakket-prijs {
    font-size: var(--_text---h5--font-size);
  }
  /* Op telefoon zijn twee smalle knoppen naast elkaar te klein om te raken,
     dus daar pakken ze wel de volle breedte terug. */
  .cta-duo .nav-link.cta {
    width: 100%;
  }
}

/* 12. Navigatie: labels, hoogte en tapdoelen (13-08-2026). Gemeten met
       gat/nav.js op 375, 768, 1024 en 1440; alle getallen hieronder komen
       uit die nulmeting, niet uit de broncode. */

/* 12a. Op 375 lopen drie van de vijf labels uit hun pil. Gemeten:
        pilbreedte 63,8px met 6px padding links en rechts, dus 51,8px
        binnenruimte, terwijl WERKWIJZE 70px breed is, PAKKETTEN 69px en
        DIENSTEN 58px. Overschot 3, 8 en 9px.
        Vijf gelijke pillen op één rij kunnen dit niet dragen zonder de
        letter kleiner te zetten (10px met 1px spatiëring is al de bodem),
        dus krijgen de pillen hier hun eigen breedte. Rekensom:
        375 - 32 containerpadding = 343 beschikbaar; labels samen 290,
        plus 5x2x3px padding = 30, plus 4x4px tussenruimte = 16, samen 336.
        Zeven pixel over, en de letter blijft precies zoals ontworpen. */
@media screen and (max-width: 479px) {
  .wrap-navigation-links {
    column-gap: 4px;
  }
  .wrap-navigation-links > .nav-link {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    padding-left: 3px;
    padding-right: 3px;
    white-space: nowrap;
  }
  /* 12b. Tapdoelen. Gemeten hoogte 22px (6 padding + 10 regelhoogte + 6),
          WCAG 2.5.8 vraagt 24. De pil groeit dus 2px; de balk daarmee ook. */
  .master-navigation .nav-link,
  .cta-duo .nav-link,
  .nav-link.cta {
    min-height: 24px;
  }
}

/* 12c. Op 1024 breken "VIVIMUS CREATIVESâ„¢" en "AFSPRAAK MAKEN" naar twee
        regels: die pillen worden 45px hoog terwijl de vijf ertussen 30
        blijven. Gemeten: pil 132,5px breed, 116,5px binnenruimte, terwijl
        het merklabel op één regel 146px nodig heeft.
        Zeven gelijke pillen van 162px passen niet in 1024 (7x162 + 6x8 + 48
        = 1230), dus het ontwerp kán hier niet gelijk blijven. De minste
        ingreep is de twee buitenste pillen hun eigen breedte geven, precies
        zoals ze die op 375 en 768 in .mobile-links ook al hebben; de vijf
        navigatie-items houden hun onderlinge gelijkheid.
        Na de ingreep: merkpil 162, cta 141, de vijf ertussen elk 125 met
        109px binnenruimte tegen 82px voor het langste label. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .wrap-navigation-links > .nav-link.brand,
  .wrap-navigation-links > .nav-link.cta {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }
}

/* 12d. De statement-regels in de cases-panelen worden op 375 horizontaal
        afgesneden. Gemeten: masker .text-mask-snap is 340px breed met
        overflow hidden, terwijl "naar aanraking." 399px meet en
        "Eén identiteit," 356px, bij 96px letter en -6px spatiëring.
        Zichtbaar in gat/b375/h-08.jpg: van "Eén identiteit," raakt het
        woord beide randen en valt de komma weg.
        De vier andere regels passen wel, dus dit is geen ontwerpkeuze maar
        een maat die op de kleinste breedte niet is nagelopen.
        Nieuwe maat 80px met -5px spatiëring, dezelfde verhouding als 96/-6.
        Rekensom: glyphbreedte 489px schaalt naar 407,5px, spatiëring
        15 x -5 = -75, samen 332,5px binnen 340px. */
@media screen and (max-width: 479px) {
  .text-snap-large {
    font-size: 80px;
    letter-spacing: -5px;
  }
}

/* 12e. Het nieuwsbriefveld heeft geen endpoint en is per besluit 13-08-2026
        uitgezet in plaats van weggehaald: het <form> is een <div> geworden,
        veld en knop staan op disabled. Een veld dat er werkend uitziet en
        niets doet is een fout, dus de uitgezette staat moet ook te zien
        zijn. De vorm blijft staan, de aanraakbelofte gaat eraf. */
[data-nieuwsbrief="uit"] .text-field[disabled] {
  cursor: not-allowed;
}
[data-nieuwsbrief="uit"] .submit-button-wrap {
  opacity: .35;
  pointer-events: none;
}

/* 13. Semantische koppen zonder vormverandering.
       De 1op1-kopie erfde van live een pagina met nul koppen: alles was een div.
       Voor een schermlezer heeft zo'n pagina geen inhoudsopgave, en voor een
       zoekmachine geen structuur. De omzetting naar h1, h2 en h3 mag alleen
       niets aan het beeld doen, en dat doet ze wel: een kopelement erft uit
       webflow.css en vivimuscreatives.webflow.css een marge van 20px boven en
       10px onder, en de wrapper van het woordmerk erft daarbovenop de hele
       h1-typografie omdat .logo-wrap-hero zelf geen letterinstellingen zet.

       Gemeten op 375, 768, 1024 en 1440, voor en na de omzetting: dit zijn de
       enige twee afwijkingen die de omzetting oplevert. Deze twee regels zetten
       ze terug op de waarde die de div had. Alle andere eigenschappen komen al
       van de klasse zelf en veranderen niet. */
h1.logo-wrap-hero,
h2.heading-signal,
h2.label,
h2.text-h2,
h3.text-h2,
h2.heading-large,
h3.text-scroll-right {
  margin-top: 0;
  margin-bottom: 0;
}

/* 13a. Twee koppen zitten op een wrapper in plaats van op de tekst zelf, en dat is
        met opzet.
        De hero heeft geen tekstuele titel: het woordmerk is de titel. De wrapper
        .logo-wrap-hero wordt daarom de h1 en het beeld erin heeft een echte alt
        gekregen; dat is het gangbare patroon voor logo-als-kop.
        De kop van de contactsectie staat op .heading-signal en niet op .heading-large,
        omdat GSAP SplitText het doelelement per tekstregel kloont: een h2 op
        .heading-large wordt op 1440 twee halve koppen ("Stuur ons" en "een berichtje!").
        Een niveau hoger valt buiten dat bereik. Gemeten op alle vier de breedtes blijft
        het zo bij precies zestien koppen.
        Beide wrappers zijn verder puur opmaak, dus hun letterinstellingen horen van de
        ouder te komen, precies zoals toen het nog divs waren. */
h1.logo-wrap-hero,
h2.heading-signal {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* ------------------------------------------------------------------
   14. Beelden houden hun eigen verhouding (hoort bij punt 2.3)

   Op elk beeld staat nu width en height uit de bestandskop, zodat de browser
   ruimte reserveert en de opmaak niet springt zodra een beeld binnenkomt.
   Die twee attributen zijn alleen samen met height:auto veilig. Zonder die
   regel vertaalt de browser het height-attribuut naar een echte hoogte in
   pixels, en omdat noch normalize.css noch webflow.css een hoogte op img zet
   wint die presentatiehint. Gemeten gevolg op dienst-web: Asset-5.png sprong
   van 172 naar 875 pixels hoog en de pagina van 3799 naar 4451.

   Met height:auto gebruikt de browser de attributen alleen als verhouding.
   De regel staat op tagniveau (0,0,1), dus elke klasse die wél een hoogte
   zet (image-cover, circle-image en de rest) wint er nog steeds van.

   Ook width moet op auto. Elk Webflow-beeld draagt srcset met w-waarden plus
   sizes; daarmee bepaalt de browser zelf de eigen breedte (bij sizes=100vw op
   375 is dat 375 en niet de 1424 uit het bestand). Een width-attribuut zet die
   berekening opzij en dan rekent de browser met de bestandsbreedte. Gemeten op
   index bij 375: Girl-Hidden.webp werd 1049 pixels breder en 734 hoger. Met
   width:auto blijft srcset leidend en dienen de attributen alleen nog als
   verhouding, precies waar ze voor bedoeld zijn.
   ------------------------------------------------------------------ */
img {
  width: auto;
  height: auto;
}

/* ------------------------------------------------------------------
   15. Oogst uit het v2-spoor (punt 4.3): twee acties in de hero.

   De hero was woordmerk plus tagline plus jaartal en had geen enkele actie
   boven de vouw. v2 heeft daar "Start de intake" en "Bekijk ons werk".
   De inhoud is geoogst, de vorm niet: dit zijn dezelfde pillen als in de
   navigatie, via de bestaande .cta-duo uit blok 11a. Er komt dus geen nieuwe
   vormtaal bij.

   Dit is de ingreep op deze lijst die het dichtst tegen vervanging aan zit,
   want de hero is de handtekening van de site. Weghalen is één blok html en
   deze regel; dat is met opzet zo klein gehouden.
   ------------------------------------------------------------------ */
.hero-acties {
  justify-content: flex-start;
  margin-top: var(--_spacing---spacing--24);
}
/* De tweede knop is de zachte uitgang. Op de casepagina's staat die op een
   lichte achtergrond en volstaat een donkere lijn; hier ligt hij op video en
   verdwijnt die lijn. Binnen de hero dus een lichte lijn en lichte tekst,
   gemeten op het donkerste kader van de heroloop. */
.hero-acties .nav-link.cta.cta-tweede {
  box-shadow: inset 0 0 0 1px var(--_colors---color--light);
  color: var(--_colors---color--light);
}
.hero-acties .nav-link.cta.cta-tweede .button-label {
  color: var(--_colors---color--light);
}
@media screen and (max-width: 767px) {
  /* Op 375 passen twee pillen niet naast elkaar zonder de tekst te breken, dus
     onder elkaar. Gemeten: .master-hero-section is een kolom met
     align-items:flex-start, waardoor de rij naar 117px kromp; met align-self
     stretch vult hij de kolom van 343px.

     De hoogte gaat hier naar 44px en niet naar de 24px van de navigatiepillen
     uit blok 12b. Dat is geen inconsistentie maar een afweging: een pil in de
     balk is een van zes gelijkwaardige links, dit is de hoofdactie van de
     pagina en de enige knop boven de vouw. 44px is de gangbare ondergrens
     voor een duimdoel. */
  .hero-acties {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
  }
  .hero-acties .nav-link.cta {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------------
   16. Sectielabels uit de v2-oogst (punt 4.4)

   De kopie kent het eyebrow-patroon al: in #skills en #signal staat een .label
   boven de sectiekop. Gemeten conventie op 1440: .headline-skills is een flex-
   kolom met gap 16px, de .label zelf heeft nul marge. De drie nieuwe labels
   hangen niet allemaal in zo een flexkolom, dus de ruimte komt hier van een
   eigen ondermarge van dezelfde 16px.

   De doffing is wel nieuw en met reden. In #skills staat de eyebrow boven een
   kop van 287px hoog, dus de rangorde spreekt vanzelf. In #base is de kop zelf
   een .label van 15px (gemeten: h=60 over drie regels, identieke grootte,
   gewicht en kleur als de eyebrow). Twee regels van precies dezelfde vorm
   boven elkaar lezen als een alinea, niet als label plus kop; op de eerste
   opname liep "WAT WE DOEN" naadloos door in "JOUW MERK, HELDER EN
   ONMISKENBAAR." Vandaar 60 procent dekking: dat is de v2-gedachte achter
   label--stil, met de vorm van de kopie intact.
   --------------------------------------------------------------------------- */
.label.sectielabel {
  margin-bottom: 16px;
  opacity: 0.6;
}

/* Het teamlabel in #story leidt de cijfergrid in, niet de kop erboven. De grid had zelf
   margin-top: 200px; die verhuist naar het label, zodat de grid op exact dezelfde y blijft
   staan en alleen het label zelf ruimte kost. 184 + 20 (labelhoogte) + 16 = 220, gelijk aan
   de 200px marge plus de 20px die het label inneemt. */
.label.sectielabel.sectielabel--grid {
  margin-top: 184px;
}
.label.sectielabel.sectielabel--grid + .story-number-grid {
  margin-top: 0;
}


/* ---------------------------------------------------------------------------
   17. De tweede knop in #signal (punt 4.5)

   De geoogste regel noemt twee routes, dus staan er twee knoppen. Blok 11 had het
   duo-patroon al vastgelegd (.cta-duo: flex, gap 12, krimpen naar tekstbreedte,
   tweede knop omlijnd op dark-32), en de dertien onderpaginas gebruiken het al met
   precies dit paar: "START DE INTAKE" gevuld en "DIRECT EEN AFSPRAAK" omlijnd.
   De home was de uitzondering. Daarom krijgt .button-wrap-signal er gewoon .cta-duo
   bij in plaats van een tweede set eigen regels; hier blijft alleen staan wat #signal
   echt anders doet.

   Veilig om display te laten zetten: IX2 schrijft op dit blok alleen inline transform
   en opacity (gemeten: "transform: translate(0px, 100%); opacity: 0;"), geen display.
   De reveal blijft dus werken.

   1. Uitlijning. De inhoud van #signal staat gecentreerd in de cirkel; .cta-duo lijnt
      standaard links uit.
   2. Hoogte op mobiel. Dezelfde afweging als bij de hero in blok 15: dit is de
      hoofdactie van de pagina, dus 44px in plaats van de 24px van de navigatiepillen.
   --------------------------------------------------------------------------- */
.button-wrap-signal.cta-duo {
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .button-wrap-signal.cta-duo {
    flex-direction: column;
    align-items: stretch;
  }
  .button-wrap-signal.cta-duo .nav-link.cta {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------------
   19. Nieuwsbrief-placeholder past niet in het veld zolang de nieuwsbrief
       uit staat. De tijdelijke tekst "nieuwsbrief volgt binnenkort" is langer
       dan de 456px die het veld voor een e-mailadres nodig heeft; op desktop
       werd hij afgekapt op "binne". Alleen in de uit-stand verbreden, zodat
       het originele formaat terugkeert zodra de nieuwsbrief echt aan gaat.
   --------------------------------------------------------------------------- */
[data-nieuwsbrief="uit"] .newsletter-field-master {
  max-width: 640px;
}

/* ---------------------------------------------------------------------------
   20. Makes-sectie, materiaalkeuze (26-08-2026). Besluit via de commandopost:
       Dauji op het escalatiepunt "personagewissel Fiori/Culture Trail toont
       verzonnen personages i.p.v. echte klanten": "Isgoed", verwerkt als
       advies B. Uchu Way krijgt de twee eigen merkbeelden (dezelfde assets als
       case-uchu.html: images/cases/uchu-halftone.webp en uchu-globe.webp) in
       plaats van het scoutpersonage; Fiori en Culture Trail krijgen de
       personagewissel tijdelijk uit, tot er echte fotografie is.

   20a. De twee Uchu-beelden zijn platte merkmerken (wordmark, globe-stempel),
        geen foto's van een personage. .kid-visible/.kid-hidden erven
        object-fit:cover uit de export, wat een crop geeft: de wordmark is
        1600x640 (2,5:1), het kaartvak circa 1,34:1. Cover zou de zijkanten
        van de wordmark afsnijden. Alleen op _1, want _2 en _3 tonen nog
        gewoon de bestaande template-fotografie, die wel bij cover past. */
/* 20a en 20b zijn 31-08-2026 vervallen: de kid-lagen en de drie IX2-
   kliktijdlijnen zijn vervangen door de eigen beelddeck van blok 21. */

/* 20b. Drie kaarten, drie onafhankelijke IX2-kliktijdlijnen (bevestigd in
        webflow.js: i-80d91660/_1, i-e67d026a/_2, i-4b56ab9f/_3, elk site-
        scoped en getriggerd op zijn eigen wf:class "button-snap._N"). Alleen
        de klik uitzetten is genoeg en raakt de andere twee niet: geen
        wijziging aan webflow.js of aan de _1-tijdlijn nodig.
        Cursor terug naar default zodat de knop niet langer een klik belooft
        die niets meer doet; de tekst en vorm blijven ongewijzigd staan op
        hun huidige ruststand ("Maak het af"), want de wissel zelf is wat
        tijdelijk uit staat, niet de knop. */

/* ---------------------------------------------------------------------------
   21. Uitgelichte cases, herbouw 31-08-2026, tweede ronde. Aanleiding: Dauji
       over deze sectie, "moet een zieke afbeelding van een case worden, die
       switch moet meer laten zien, en dan kan je daarna de case bekijken".

       Wat er stond: drie template-achtergronden (BG_1BG, BG-1, BG-2, stock-
       landschappen uit de Webflow-export) met daarboven een zwevend merkteken,
       en bij Fiori en Culture Trail letterlijk de stockfoto's van het template
       (Girl, Girl-Hidden, Girls, Girls-Hidden). Alleen bij Uchu was ooit echt
       werk ingezet, en dat lag als contain-plaatje over een vreemd veld heen,
       met de gele 200px-statement er dwars doorheen. Vandaar de onleesbaarheid.

       Ronde 1 zette er een deck van vier eigen beelden per case in, maar hield
       de zin nog over het beeld heen op twee verloopsluiers. Gemeten in de
       render was dat nog steeds fout: op een licht merkboekvlak wordt zo'n
       sluier modder, en op de donkere merken verdween het werk. Daarom nu de
       harde scheiding: het beeld krijgt het hele bovenvlak zonder sluier, de
       tekst staat in een eigen balk eronder. Eén idee per scherm, één uitgang
       per element (dossier 29, Mother London en The Romans).

       Het beeldmateriaal komt uit de drie merkboeken zelf:
       UchuBrandbook_Final.pdf (p5, p1, p19, p23), Brand Guide - Fiori
       Project.pdf (p1, p8, p12, p14) en TCT Brandbook Final.pdf (p16, p5,
       p22, p25), op 200 dpi gerenderd naar webp van 1800px breed. Dat is
       eigen ontwerpwerk, geen stock en geen klantinterieur.

       Achter elke slide staat de eigen grondkleur uit de hoekpixels van het
       merkboekvlak zelf, zodat er geen naad ontstaat als het beeld niet
       precies past. --case-grond zet de grondkleur van de hele kaart. */

.p-home .master-snap-section {
  display: flex;
  flex-direction: column;
  background-color: #17150f;
  overflow: hidden;
}

/* Het beelddeck: alles boven de balk, zonder sluier. */
.p-home .case-deck {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  z-index: 0;
}

.p-home .case-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .6s;
}

.p-home .case-slide.is-actief {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}

.p-home .case-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--case-pos, center);
}

/* De tekstbalk. Vaste, volle grond in plaats van een verloop: leesbaar boven
   elk merkboekvlak, licht of donker, en het beeld blijft onaangeraakt. */
.p-home .case-balk {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(20px, 2.4vw, 34px) clamp(22px, 3vw, 44px);
  background-color: #17150f;
}

.p-home .case-balk__links {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.1vw, 14px);
  min-width: 0;
}

.p-home .case-naam {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--_colors---color--yellow);
}

.p-home .case-naam__nr {
  color: rgba(242, 239, 230, .5);
}

.p-home .case-statement {
  margin: 0;
  color: #f2efe6;
  font-size: clamp(26px, 3.1vw, 46px);
  line-height: 1.06;
  letter-spacing: -.02em;
}

/* De twee stemmen blijven elk heel, zodat een regelafbreking altijd op het
   scharnier serif -> sans valt en nooit midden in de tweede helft van de zin. */
.p-home .case-statement__a,
.p-home .case-statement__b {
  display: inline;
  white-space: nowrap;
}

.p-home .case-statement__a {
  font-family: var(--font--heading-serif);
  font-weight: var(--weight--heading-serif);
}

.p-home .case-statement__b {
  font-family: var(--font--heading-sans);
  font-weight: var(--weight--heading-sans);
}

.p-home .case-balk__rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(10px, 1.3vw, 16px);
  text-align: right;
  flex: 0 0 auto;
}

.p-home .case-bijschrift {
  margin: 0;
  max-width: 34ch;
  color: rgba(242, 239, 230, .62);
  transition: opacity .3s ease;
}

.p-home .case-bijschrift.is-wisselend {
  opacity: 0;
}

.p-home .case-acties {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
}

/* De schakelaar. Eén uitgang: hij toont het volgende beeld, meer niet. */
.p-home .case-schakel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--_spacing---radius--full);
  background-color: rgba(242, 239, 230, .1);
  color: var(--_colors---color--yellow);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}

.p-home .case-schakel:hover,
.p-home .case-schakel:focus-visible {
  background-color: var(--_colors---color--yellow);
  color: var(--_colors---color--dark);
}

.p-home .case-schakel__punt {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background-color: currentColor;
}

.p-home .case-schakel__teller {
  font-variant-numeric: tabular-nums;
  opacity: .7;
}

/* De uitgang naar de case zelf, achteraan in de leesvolgorde. Blok 4 zet deze
   anchor op display:contents voor de OUDE index.html, waar hij een knop
   omsloot. In de nieuwe balk is het een gewone tekstlink en heeft hij een
   eigen box nodig, anders is er niets om op te hoveren of te focussen. */
.p-home .case-acties .snap-case-link {
  display: inline;
}

.p-home .snap-case-link {
  color: rgba(242, 239, 230, .72);
  text-decoration: none;
  transition: color .25s ease;
}

.p-home .snap-case-link:hover,
.p-home .snap-case-link:focus-visible {
  color: var(--_colors---color--yellow);
}

@media screen and (max-width: 991px) {
  .p-home .case-balk {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .p-home .case-balk__rechts {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .p-home .case-statement {
    font-size: clamp(24px, 6.4vw, 32px);
  }

  .p-home .case-bijschrift {
    max-width: 30ch;
  }

  .p-home .case-acties {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  /* Gemeten 31-08-2026 op 375x812: de kaart is 343x650, de balk vraagt 231px,
     dus het beeldvlak werd 343x418 (staand, 0,82). Een liggende brandbook-
     pagina van 1,78 verliest daarin 54 procent van zijn breedte; op blad
     m375-1 sneed dat de linkerkolom van de Uchu-site af. Het deck krijgt hier
     daarom exact de verhouding van de bron, zodat er niets meer wordt
     weggesneden, en de hele stapel gaat verticaal in het midden staan. */
  .p-home .master-snap-section {
    justify-content: center;
  }

  .p-home .case-deck {
    flex: 0 0 auto;
    aspect-ratio: 1800 / 1012;
  }
}

/* =========================================================================
   Leesmaat op een telefoon.
   Webflow zet --_text---text-small--font-size onder 767 op 10px
   (vivimuscreatives.webflow.css:3460 en :4016, tegen 15px op 1440). Dat token
   draagt twee dingen tegelijk: de korte labels in kapitaal en de lopende
   uitlegzinnen. Op 10px is een label nog te lezen en een zin niet meer.
   Gemeten 01-09-2026 op 375: funnel-optie-uitleg 10px, funnel-terug 10px,
   text-small 10px (36 stuks op pakketten, 17 op projecten).
   Daarom uit elkaar getrokken: het token gaat naar 12 voor de labels, de
   leestekst krijgt een eigen maat van 14.
   Terugdraaien: dit blok weghalen, dan geldt de Webflow-waarde weer. */
@media screen and (max-width: 767px) {
  /* Webflow herdefinieert dit token op body, niet op :root, dus een :root-regel
     hier wordt overschaduwd. Daarom ook op body. */
  body {
    --_text---text-small--font-size: 12px;
    /* Hetzelfde geldt voor de tekst in de knoppen en de navigatiepillen: 10px
       in kapitaal met 1px spatiering. Gemeten met 12px blijft de balk 66px hoog
       op 375 en 62px op 767, zelfde drie rijen, geen overflow. */
    --_text---label--font-size: 12px;
    /* De regelafstand van het labeltoken stond op 12px terwijl het letterbeeld
       15px hoog is: twee regels label liepen letterlijk over elkaar heen.
       Gemeten 01-09-2026 op 375, achttien labels op de home die afbreken,
       waarvan de werkwijzestappen vijf en zes regels lang zijn. */
    --_text---label--line-height: 18px;
  }
  .text-small,
  .funnel-optie-uitleg,
  .funnel-terug {
    font-size: 14px;
  }
}

/* Op 1440 staat deze alinea als rechterkolom naast de kop, en dan is rechts
   uitlijnen een bewust gebaar. Onder 767 valt hij over de volle breedte en
   werden het acht regels met een rafelige linkerkant, boven op de bloemvorm.
   Gemeten 01-09-2026 op 375: breedte 343, acht regels, text-align right.
   Terugdraaien: dit blok weghalen. */
@media screen and (max-width: 767px) {
  .right-text-story,
  .text-scroll-right {
    text-align: left;
  }
}

/* Tussen 768 en 991 staat de sprong op 20px onder een letterbeeld van 19px:
   een pixel lucht tussen twee regels label. Zelfde correctie als hierboven,
   een maat ruimer omdat het label daar 15px is. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  body {
    --_text---label--line-height: 24px;
  }
}

/* Op smalle schermen paste de vraag als placeholder niet in het adresveld
   (gemeten 14-09 op 375: tekst 233px, veld 185px binnenmaat). De knop gaat
   dan onder het veld, zodat het veld de volle 300px krijgt. Staat NA de
   basisregel, want een media-query verliest bij gelijke specificiteit. */
@media screen and (max-width: 767px) {
  .funnel-mailveld__rij {
    flex-wrap: wrap;
  }
  .funnel-mailveld__input {
    flex: 1 1 100%;
  }
  .funnel-mailveld__knop {
    flex: 1 1 100%;
  }
}

/* ==== spoor 4 funnel-stabiel 12-10-2026 (begin) ====
   Het scherm verspringt niet meer tussen de vragen. funnel.js zet de stappen
   in .funnel-podium; de vraagstappen liggen gestapeld in een rastercel, dus het
   podium is altijd zo hoog als de hoogste vraag. Een verborgen vraag blijft
   meetellen voor de hoogte maar is onzichtbaar en niet klikbaar. De uitkomst
   blijft display:none tot hij aan de beurt is. De intakeband centreert niet
   meer opnieuw per vraag, maar staat vast bovenaan. */
.funnel-podium {
  display: grid;
}
.funnel-podium > .funnel-stap {
  grid-area: 1 / 1;
  min-width: 0;
}
.funnel-podium > .funnel-stap[hidden]:not(.funnel-uitkomst) {
  display: flex;
  visibility: hidden;
  pointer-events: none;
}
.funnel-podium > .funnel-stap.is-in {
  animation: funnel-in 240ms ease-out both;
}
@keyframes funnel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .funnel-podium > .funnel-stap.is-in { animation: none; }
}
.ds-vraag.is-boven:has(.funnel-podium) {
  justify-content: flex-start;
  padding-top: clamp(152px, 28vh, 260px);
}
@media screen and (max-width: 991px) {
  .ds-vraag.is-boven:has(.funnel-podium) { padding-top: 132px; }
}
@media screen and (max-width: 767px) {
  .ds-vraag.is-boven:has(.funnel-podium) { padding-top: 120px; }
}
/* ==== spoor 4 funnel-stabiel 12-10-2026 (eind) ==== */

/* ==== spoor 4 footer-voorwaarden 12-10-2026 (begin) ==== */
.footer-voorwaarden {
  color: inherit;
  text-decoration: none;
}
.footer-voorwaarden:hover {
  text-decoration: underline;
}
/* Linkrij boven de slotregel: voorwaarden, fotografie, videografie, portaal. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--_spacing---spacing--32);
  padding-top: var(--_spacing---spacing--16);
}
.footer-links .label {
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .footer-links {
    gap: 6px 24px;
  }
}
/* ==== spoor 4 footer-voorwaarden 12-10-2026 (eind) ==== */

/* === polijst-1310 (site v2 polijstronde 13-10) begin === */
/* Regelval: geen eenwoordige laatste regels in lopende tekst en koppen buiten nav en hero. */
main p, main li, main figcaption, main blockquote,
section p, section li, section figcaption, section blockquote,
.dnst__lever { text-wrap: pretty; }
section h2, section h3, section h4, main h2, main h3, main h4,
.card-template-details h2,
.case-bijschrift, .vw-artikel__naam { text-wrap: balance; }
/* Formuliervelden: zichtbare focus voor toetsenbordgebruikers. */
.text-field:focus-visible, .w-input:focus-visible, .w-select:focus-visible, textarea:focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px; }
/* === polijst-1310 einde === */
/* === polijst-1310 oogronde (14-10) === */
/* Home, blok "Ons werk": de gele bloem lag achter de alinea en liep door de letters
   (1440: 78.296 px2 overlap). Accent onder de tekst, niet door de letters. */
.right-text-story { flex-direction: column; align-items: flex-end; }
.right-text-story .svg-flower { position: static; order: 2; width: 72px; height: auto; margin-top: 20px; }
@media screen and (max-width: 767px) {
  .right-text-story { align-items: flex-start; }
  .right-text-story .svg-flower { width: 60px; margin-top: 16px; }
}
/* Tweekleurkoppen: de grijze tweede zin brak midden in de regel af en liet een los woord
   achter de donkere zin hangen (24 gevallen over 5 breedtes). Als blok laten breken. */
.ds-band__b { display: inline-block; }
/* === polijst-1310 oogronde einde === */
/* === polijst-1310 koppen home (14-10) === */
/* "vastgebeten." stond op 1440 alleen op de laatste regel: "hebben vastgebeten." is 530px, de kolom 525px
   (36.458vw). Met 37.5vw past het, en schaalt het mee met de kop (4.444vw). */
@media screen and (min-width: 1440px) {
  .left-text-story { max-width: 37.5vw; }
}
/* "berichtje!" stond op 375 en 320 alleen: "een berichtje!" is 237px, de kop 200px. Met 240px breekt hij
   in twee regels van twee woorden; GSAP knipt daarna nog steeds in regels. */
@media screen and (max-width: 479px) {
  .headline-signal { max-width: 240px; }
}
/* === polijst-1310 koppen home einde === */

/* polijst-1510 beslissingen Dauji (15-10, "a verder go" op het beslisbeeld) */
/* 1. Nav op smalle telefoons: de vijf menulabels liepen over de pilrand (375: 2,2px, 320: 8,8px).
   Alleen afstand en letterspatiering; tekst, volgorde, kleur en lettergrootte blijven. */
@media screen and (max-width: 479px) {
  .wrap-navigation-links { column-gap: 3px; }
  .wrap-navigation-links > .nav-link:not(.brand):not(.cta) { padding-left: 2px; padding-right: 2px; flex: 1 1 auto; }
  .wrap-navigation-links > .nav-link:not(.brand):not(.cta) .button-label { letter-spacing: 0; }
}
/* 2. Afspraakknop op de gele pagina's (contact, afspraak): geel op geel viel weg; donker zoals de merkknop. */
.p-contact .nav-link.cta, .p-afspraak .nav-link.cta { background-color: #2A2119; border-color: #2A2119; }
.p-contact .nav-link.cta, .p-contact .nav-link.cta .button-label,
.p-afspraak .nav-link.cta, .p-afspraak .nav-link.cta .button-label { color: #FFDA3D; }