/* =========================================================================
   Vesmo, tweede laag: de pagina's die na de homepage aan de beurt waren.

   Vier onderdelen van velvele.studio nagebouwd met de onderdelen van Tumar:
   de case-pagina met gekleurde band en gegevensbalk, het werk-raster met
   filter en telling, de Approach-opzet op Over ons, en het blauwe contactblok.
   Plus de menubalk, die op elke pagina staat.

   Deze regels staan bewust NIET in vesmo-style.css. Dat bestand beschrijft de
   huisstijl over het hele thema heen; hier staat wat bij een handvol pagina's
   hoort. Laadt na vesmo-style.css, dus wint bij gelijke soortelijkheid.

   Waarden komen uit de live CSS van velvele.studio: accent var(--vs-accent), hoeken
   20px, General Sans 500, haarlijnen op 15 procent zwart, mono voor labels.

   Terugkerend detail: de secties staan in "container-full pull-left" en lopen
   dus tot de rand door. Het portfolio-raster van het thema haalt zichzelf 20px
   naar binnen (.grid-margin-box{margin:0 20px}). Alles wat naast dat raster
   moet uitlijnen krijgt hier diezelfde 20px.
   ========================================================================= */

/* -------------------------------------------------------------------------
   29. De menubalk. WEG PER 30-08-2026, tweede herontwerp.

   Hier stond de opmaak van .vs-nav: de gecentreerde verwijzingen in de witte
   kopbalk. Die balk is terug naar stock Tumar (zie blok 12 van
   vesmo-style.css), en daarmee rendert vesmo_gecentreerde_nav() niet meer.
   De functie blijft wel in inc/nav.php staan; dit is de tweede keer dat hij
   in en uit gebruik gaat.

   Meegenomen: .vs-nav.is-verkleind deed al niets meer sinds de balk geen
   position kreeg, en het gat tussen 1024 en 1100px waar deze regels de nav
   verborgen terwijl de hamburger nog niet verscheen, bestaat hiermee niet meer.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   29b. De kop boven een gekleurd vlak.

   Op de case-pagina's begint de pagina met een band in de kleur van de klant.
   Daar kan difference niet: wit min groen is paars. Die pagina's zetten
   daarom de meta van het thema op "logo normaal", waardoor logo en menuknop de
   klasse color-mix-blend-normal krijgen.

   DIT BLOK IS PER 30-08-2026 WEER LEVEND. Tussen 30-08 en vandaag stond de
   kopbalk op effen wit en was difference nergens aan; nu de stock-kopbalk terug
   is, is dit weer de enige ontsnapping voor een gekleurde band. Dezelfde route
   geldt voor het blauwe slotvlak, waar wit min #251CFF geel oplevert.

   SINDS 06-09-2026 GEBRUIKT GEEN ENKELE CASE DIT MEER. Daan wil op de cases
   hetzelfde meekleurende logo als op de homepage (difference), dus de vijf
   case-scripts zetten de logo-meta's op st1. Roze op VUSK-groen en blauwgroen
   op het oranje van TheorieBriljant en FactuurPartner zijn gezien en gekozen.
   Het blok blijft staan voor wie ooit weer st2 kiest in de paginameta.

   Het thema zet dan alleen mix-blend-mode uit. De kleuren moeten hier alsnog
   worden omgezet: het logo is een witte svg en de streepjes van de menuknop
   zijn wit. Allebei worden ze zwart, net als de titel op die band.
   ------------------------------------------------------------------------- */

.header-logo.color-mix-blend-normal .header-logo__img {
  filter: invert(1);
}

.menu-icon.color-mix-blend-normal .menu-icon__box:before,
.menu-icon.color-mix-blend-normal .menu-icon__inner:before,
.menu-icon.color-mix-blend-normal .menu-icon__inner:after {
  background-color: var(--vs-ink);
}

/* -------------------------------------------------------------------------
   30. De case-pagina: gekleurde band.

   Bij Velvele begint elke case met een band over de volle breedte in een
   kleur die bij de klant hoort, met het logo van die klant erin. Wij hebben
   geen klantlogo's als bestand, dus staat de naam er als woordmerk in
   dezelfde letter. Zodra er een logo is, is het een afbeelding in plaats van
   deze titel.
   ------------------------------------------------------------------------- */

.vs-case-band {
  text-align: center;
}

.vs-case-band h2 {
  font-size: clamp(52px, 9vw, 132px);
  line-height: .95;
  letter-spacing: -0.035em;
  font-weight: 500;
}

.vs-case-band .column--margin-40-999 {
  margin: 0 auto;
}

/* Het thema onthult een kop door hem van onderen omhoog te schuiven binnen
   een blok met overflow:hidden. Dat blok is precies zo hoog als de regel, dus
   bij een grote letter met regelhoogte onder 1 wordt de staart van een g of j
   afgesneden. Iets meer ruimte onderin lost dat op zonder de onthulling te
   breken; overflow:visible zou dat wel doen. */
.vs-case-band .animated-line-wrapper,
.vs-blueblock .animated-line-wrapper,
.vs-statement .animated-line-wrapper {
  padding-bottom: .14em;
}

/* -------------------------------------------------------------------------
   31. De case-pagina: gegevensbalk.

   Vier kolommen tussen twee haarlijnen. Bij Velvele: INDUSTRY, YEAR,
   SERVICES als pil-labels en INFO als korte alinea. Bij ons Sector, Status,
   Diensten en Info; een jaartal verzinnen we niet.
   ------------------------------------------------------------------------- */

.vs-databar .headline-xxxxs {
  font-family: var(--vs-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vs-muted);
  margin-bottom: 14px;
}

.vs-databar .body-text-xs,
.vs-databar .body-text-xs p:not([class]) {
  font-size: 15px;
  line-height: 1.5;
}

.vs-databar .vc_column-inner {
  padding-right: 30px;
}

@media only screen and (max-width: 767px) {
  .vs-databar .vc_column_container {
    margin-bottom: 34px;
  }
}

/* De diensten als pil-labels. Het thema tekent hier een opsomming met
   bolletjes; die gaan eruit en elk item wordt een pil met een haarlijn. */
.vs-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
}

.vs-pills .list__item {
  padding: 0;
  margin: 0;
}

.vs-pills .list__item:before {
  content: none;
}

.vs-pills .list__item p {
  margin: 0;
  padding: 7px 15px;
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius-pill);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

/* De lijst zit bij Tumar in een blok met 40px rechtermarge; binnen een
   kolom van een kwart is dat te veel. */
.vs-databar .column-r-margin-40 {
  margin-right: 0;
}

/* De hele balk op dezelfde kantlijn als het beeld eronder. */
.vs-databar .vc_row-fluid,
.vs-case-shot .wpb_single_image,
.vs-persoon .vc_row-fluid {
  margin-left: 20px;
  margin-right: 20px;
}

/* -------------------------------------------------------------------------
   32. De case-pagina: beeld over de volle breedte.
   ------------------------------------------------------------------------- */

.vs-case-shot .wpb_single_image {
  margin-bottom: 0;
}

.vs-case-shot .wpb_single_image img {
  width: 100%;
  height: auto;
  border-radius: var(--vs-radius);
  box-shadow:
    0 0.8px 2.4px -0.63px rgba(0, 0, 0, .075),
    0 2.4px 7.2px -1.25px rgba(0, 0, 0, .075),
    0 6.4px 19.1px -1.88px rgba(0, 0, 0, .075),
    0 20px 60px -2.5px rgba(0, 0, 0, .075);
}

/* Een beeld dat langer is dan het scherm, zoals een schermafdruk van een
   hele pagina, wordt bovenaan afgesneden in plaats van tot een postzegel
   verkleind. */
.vs-case-shot--lang .wpb_single_image img {
  height: 78vh;
  object-fit: cover;
  object-position: top center;
}

/* -------------------------------------------------------------------------
   33. Het werk-raster: filter en telling.

   Bij Velvele staat dit als een gewone regel onder de paginakop, niet als
   zwevende balk: links het aantal en de schakelaar Raster/Lijst, rechts de
   categorie. Alles 18px/500 zonder achtergrond. Gemeten op hun /work.
   ------------------------------------------------------------------------- */

.vs-workbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  margin: 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--vs-line);
}

.vs-workbar__groep {
  display: flex;
  align-items: center;
  gap: 18px;
}

.vs-workbar__telling {
  font-family: var(--vs-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vs-muted);
}

.vs-workbar__streep {
  width: 1px;
  height: 18px;
  background: var(--vs-line);
}

.vs-workbar button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: var(--vs-font);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--vs-soft);
  transition: color .25s ease;
}

.vs-workbar button:hover {
  color: var(--vs-ink);
}

.vs-workbar button.is-actief {
  color: var(--vs-ink);
}

.vs-workbar__cats button.is-actief {
  color: var(--vs-accent);
}

.vs-workbar__cats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

@media only screen and (max-width: 767px) {
  .vs-workbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* De lijstweergave. Zelfde opsomming, andere vorm: beeld eruit, elke case
   een regel over de volle breedte met een haarlijn eronder. Isotope legt
   opnieuw uit zodra de klasse erop staat, dat doet vesmo-werk.js. */
.vs-index-view .grid-item-50-50-100,
.vs-index-view .grid-item-33-50-100 {
  width: 100%;
  padding-top: 0;
}

.vs-index-view .grid-margin-box {
  margin-left: 20px;
  margin-right: 20px;
}

.vs-index-view .hidden-box {
  display: none;
}

.vs-index-view .empty-grid-200px-50-50-none,
.vs-index-view .empty-grid-200px-33-50-none,
.vs-index-view .empty-grid-400px-33-none {
  height: 0;
}

.vs-index-view .padding-top-bottom-20 {
  padding-top: 26px;
  padding-bottom: 26px;
}

.vs-index-view .anim-fade-to-left h3 {
  font-size: 30px;
}

/* -------------------------------------------------------------------------
   34. De Approach-opzet op Over ons.

   Links een label dat blijft staan terwijl je scrolt, rechts eerst een
   genummerde inhoudsopgave en daarna per punt een reusachtig lichtgrijs
   nummer met titel en alinea ernaast. Bij Velvele is dat nummer ongeveer
   180px in een grijs dat net van wit verschilt.

   Het meeschuiven gaat via LocomotiveScroll (data-scroll-sticky), want het
   thema staat op smooth scroll en dan werkt position:sticky niet: de pagina
   scrolt niet, de inhoud wordt verschoven. Staat smooth scroll uit, dan
   pakt de css-regel onderaan dit blok het alsnog op.
   ------------------------------------------------------------------------- */

.vs-approach {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 0 20px;
}

.vs-approach__aside {
  width: 25%;
  position: relative;
}

.vs-approach__main {
  width: 75%;
}

/* Locomotive plakt een sticky element met de bovenkant tegen de bovenrand van
   het scherm, zonder marge. Daar zit de kopbalk, dus zonder deze ruimte
   schuift het label dwars door het logo heen. De ruimte zit in het element
   zelf en niet in een offset, want Locomotive rekent met de eigen hoogte. */
.vs-approach__label {
  padding-top: 100px;
  font-family: var(--vs-font);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}

html:not(.has-scroll-smooth) .vs-approach__label {
  position: sticky;
  top: 20px;
}

/* De inhoudsopgave boven de punten. */
.vs-approach__toc {
  margin: 100px 0 90px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--vs-line);
}

.vs-approach__toc li {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding: 14px 0;
  border-bottom: 1px solid var(--vs-hair);
  font-size: 17px;
  font-weight: 500;
}

.vs-approach__toc span {
  font-family: var(--vs-mono);
  font-size: 12px;
  color: var(--vs-muted);
}

.vs-approach__item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 40px;
  padding: 46px 0;
  border-top: 1px solid var(--vs-line);
}

.vs-approach__num {
  width: 26%;
  font-family: var(--vs-font);
  font-size: 130px;
  font-weight: 500;
  line-height: .85;
  letter-spacing: -0.04em;
  color: #ededed;
}

.vs-approach__body {
  width: calc(74% - 40px);
}

.vs-approach__body h3 {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.vs-approach__body p {
  font-size: 17px;
  line-height: 1.5;
  color: var(--vs-tekst);
  margin: 0;
  max-width: 620px;
}

@media only screen and (max-width: 991px) {
  .vs-approach__aside,
  .vs-approach__main {
    width: 100%;
  }

  .vs-approach__aside {
    margin-bottom: 20px;
  }

  .vs-approach__label {
    padding-top: 0;
  }

  .vs-approach__toc {
    margin-top: 0;
  }

  .vs-approach__num {
    width: 100%;
    font-size: 84px;
    margin-bottom: 10px;
  }

  .vs-approach__body {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------
   35. Het blauwe blok op Contact.

   Bij Velvele een blok over bijna de volle breedte in het merkblauw, met
   hoeken van 20px en een enkele regel erin. De rij van het thema loopt tot
   de rand door, dus die halen we hier iets naar binnen.
   ------------------------------------------------------------------------- */

.vs-blueblock {
  width: calc(100% - 60px) !important;
  margin-left: 30px;
  margin-right: 30px;
  border-radius: var(--vs-radius);
  overflow: hidden;
  text-align: center;
}

.vs-blueblock h2,
.vs-blueblock h3,
.vs-blueblock p {
  color: #fff;
}

.vs-blueblock h2 {
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.vs-blueblock .column--margin-40-999 {
  margin: 0 auto;
}

/* De knop staat op het blauw, dus wit met blauwe letters in plaats van
   andersom. Allebei de knopvormen van het thema, voor het geval er ooit een
   andere button_style in dit blok belandt. */
.vs-blueblock .border-btn,
.vs-blueblock .skew-btn {
  background-color: #fff;
  margin: 0 auto;
}

.vs-blueblock .border-btn__inner,
.vs-blueblock .skew-btn__content {
  color: var(--vs-accent) !important;
}

.vs-blueblock .border-btn:hover,
.vs-blueblock .skew-btn:hover {
  background-color: #e7e8ff;
}

.vs-blueblock .skew-btn__arrow:before {
  border-top-color: var(--vs-accent);
  border-right-color: var(--vs-accent);
}

.vs-blueblock .skew-btn__arrow:after {
  background-color: var(--vs-accent);
}

@media only screen and (max-width: 767px) {
  .vs-blueblock {
    width: calc(100% - 40px) !important;
    margin-left: 20px;
    margin-right: 20px;
  }
}

/* De gecentreerde uitspraak boven en onder het blok. */
.vs-statement {
  text-align: center;
}

.vs-statement .column--margin-40-999 {
  margin: 0 auto;
}

.vs-statement h2 {
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 1000px;
  margin: 0 auto;
}

.vs-statement a {
  color: var(--vs-accent);
  box-shadow: 0 2px 0 -1px currentColor;
}

/* -------------------------------------------------------------------------
   36. Het beeld met de matglazen kaart erop.

   Bij Velvele sluit de Studio-pagina af met een foto over de volle breedte
   en daarop een kaart van matglas: "From Milan, Italy / Partnering across
   the globe". Hier is dat een rij van het thema met een achtergrondbeeld
   (type sec2), en de container erbinnen is de kaart.

   Beeld met tekst ernaast (.vs-persoon) staat in vesmo-style.css blok 28. Het
   spiegelen van zo'n blok gebeurt door de kolommen in de shortcode om te
   draaien, niet hier: WPBakery zet tussen de rij en de kolommen nog een
   section en een div, dus flex-direction op .vc_row-fluid raakt ze niet.
   ------------------------------------------------------------------------- */

.vs-glass .container {
  max-width: 560px;
  margin-left: 60px;
  padding: 44px 44px 48px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--vs-radius);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.vs-glass h2 {
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.vs-glass .body-text-s,
.vs-glass .body-text-s p:not([class]) {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.55;
}

@media only screen and (max-width: 767px) {
  .vs-glass .container {
    max-width: none;
    margin-left: 20px;
    margin-right: 20px;
    padding: 30px;
  }

  .vs-glass h2 {
    font-size: 28px;
  }
}

/* -------------------------------------------------------------------------
   37. De reacties van klanten.

   Drie kolommen onder een label met haarlijn, in plaats van de carrousel van
   het thema. Die toonde een grijs silhouet als avatar en sneed de tekst af
   zodra een slide half in beeld stond.
   ------------------------------------------------------------------------- */

.vs-quotes .vc_row-fluid {
  margin-left: 20px;
  margin-right: 20px;
}

.vs-quotes .headline-xxxs {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 500;
  max-width: 380px;
}

.vs-quotes .body-text-xs {
  margin-top: 20px;
}

.vs-quotes .vc_column-inner {
  padding-right: 40px;
}

@media only screen and (max-width: 767px) {
  .vs-quotes .vc_column_container {
    margin-bottom: 40px;
  }
}

/* -------------------------------------------------------------------------
   40. De bouwstenen van de onderpagina's, handoff 28-08-2026.

   Hoort bij inc/pagina-blokken.php: de paginakop met chips en het kapittel op
   wit of op inkt. De maten komen uit Diensten.dc.html en zijn hi-fi, dus ze
   staan hier letterlijk: kantlijn 50, container 1380, kolommen 7fr/5fr met een
   gat van 80px, kapittelpadding 110/120.

   DE DIENSTKLEUR KOMT ALS VARIABELE BINNEN. vesmo_dienst_stijl() zet --vs-d,
   --vs-d-inkt en --vs-d-tekst op het element. Welke van de drie hier gebruikt
   wordt is een css-keuze en geen php-keuze, en dat is met opzet: zo kan een
   volgende ronde niet per ongeluk het felle geel als tekstkleur krijgen. Fel is
   voor vlakken, donker is voor letters.
   ------------------------------------------------------------------------- */

/* Het mono-label. Eén klasse voor alle labels, nummers en bijschriften op deze
   pagina's; hij komt in de paginakop, onder een beeld en boven een prijs terug. */
.vs-mono {
  margin: 0;
  font-family: var(--vs-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-muted);
}

/* --- paginakop ----------------------------------------------------------- */

.vs-pkop {
  padding: 150px var(--vs-kant) 0;
}

.vs-pkop__binnen {
  max-width: var(--vs-breed);
  margin: 0 auto;
}

/* align-items:end zodat de intro op dezelfde grondlijn eindigt als de titel.
   Bij een titel van 64px en een alinea van 19px is dat het enige punt waarop
   die twee kolommen optisch met elkaar te maken hebben. */
.vs-pkop__rij {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 80px;
  align-items: end;
  margin-top: 26px;
}

.vs-pkop__titel {
  margin: 0;
  font-family: var(--vs-kop);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
  text-wrap: balance;
  color: var(--vs-ink);
}

.vs-pkop__tweede {
  color: var(--vs-kop2);
}

.vs-pkop__intro,
.vs-pkop__intro p {
  margin: 0;
  max-width: 520px;
  font-family: var(--vs-body);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
  color: var(--vs-tekst);
}

.vs-pkop__intro p + p {
  margin-top: 14px;
}

/* --- chips --------------------------------------------------------------- */

.vs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 56px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--vs-line);
  list-style: none;
}

.vs-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 20px;
  border: 1px solid var(--vs-rand);
  border-radius: var(--vs-radius-pill);
  font-family: var(--vs-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--vs-ink);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* Bij hover vult de chip zich met de dienstkleur. De tekstkleur komt mee als
   --vs-d-op uit vesmo_dienst_stijl(): zwart op groen en geel, wit op blauw en
   roze. Eén vaste tekstkleur zou op geel 1,79:1 opleveren. */
.vs-chip:hover,
.vs-chip:focus-visible {
  background-color: var(--vs-accent);
  border-color: var(--vs-accent);
  color: #ffffff;
}

.vs-chip__stip {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background-color: var(--vs-accent);
}

.vs-chip:hover .vs-chip__stip,
.vs-chip:focus-visible .vs-chip__stip {
  background-color: currentColor;
}

/* --- de zwevende mockup --------------------------------------------------- */

/* Een beeld dat naast de tekst hangt en met de scroll meebeweegt. De beweging
   zelf komt van Locomotive via data-scroll-speed op deze figure; hier staat
   alleen waar hij hangt en hoe hij eruitziet.

   GEEN TRANSFORM IN DEZE REGELS. Locomotive zet zijn parallax als transform op
   precies dit element, en een eigen translate of rotate hier wordt daar elke
   frame door overschreven. Wil je hem gekanteld hebben, doe dat dan op de img
   erbinnen. */
.vs-zweef {
  position: absolute;
  /* Hoog in het blok en niet in het midden. Op 50% hing het beeld naast de
     opsomming en de prijs, met een leeg vlak van 460px erboven; naast de kop en
     de eerste alinea vertelt het meer. Gezien op de afdrukken van 02-09-2026. */
  top: 34%;
  right: var(--vs-kant);
  z-index: 1;
  /* 560 en niet 460: een 16:9 beeld is maar 315px hoog, en dat verdwijnt naast
     een tekstkolom van ruim 800. Breder mag niet, want dan raakt het de tekst. */
  width: min(42%, 560px);
  margin: 0;
  /* De helft van de eigen hoogte terug, zodat de top-waarde het midden van het
     beeld is en niet zijn bovenrand. Dit moet met een marge en niet met
     translateY: Locomotive schrijft zijn parallax als transform op precies dit
     element en die vervangt de hele eigenschap. */
  margin-top: -12%;
  pointer-events: none;
}

.vs-zweef--links {
  right: auto;
  left: var(--vs-kant);
}

/* EÉN APPARAAT (06-09-2026): de losse lagen uit 41-beelden.php, elk met een
   eigen breedte en halve hoogte, allebei als percentage van de sectiebreedte
   (zie de aantekening bij margin-top hierboven). Laptop 1400x1000: hoogte
   0,714 x breedte, dus bij 44% is de helft 15,7%; 44% blijft naast de
   tekstkolom van 56%. Telefoon 520x1040: hoogte 2 x breedte, helft = breedte.
   Tablet 800x1067: hoogte 1,33 x breedte, helft 0,667 x 30% = 20%. De
   doorzichtige rand van studio-lagen.sh zit erin: de laptop vult 93% van zijn
   beeld, de telefoon 70%, dus 380px telefoonbeeld is zo'n 265px telefoon. De
   modifier komt uit vesmo_zweefbeeld() op de bestandsnaam. */
.vs-zweef--laptop {
  width: min(44%, 600px);
  margin-top: -15.7%;
}

.vs-zweef--tablet {
  width: min(30%, 400px);
  margin-top: -20%;
}

.vs-zweef--telefoon {
  width: min(28%, 380px);
  margin-top: -28%;
}

.vs-zweef img {
  display: block;
  width: 100%;
  height: auto;
}

/* ONTHULLING EN ZWEVING (06-09-2026). Twee bewegingen, allebei op de img:
   1. bij binnenkomst in beeld schuift het beeld 24px omhoog en fadet de figure
      in (550 ms, de curve van het systeem);
   2. daarna zweeft het beeld 10px op en neer in 7 s, hetzelfde tempo als het
      portret op Over ons.

   De opacity staat op de figure en dat mag; de verschuiving en de zweving
   staan op de img en dat MOET: Locomotive schrijft elke frame zijn parallax als
   transform op de figure (zie hierboven). De keyframe begint op 0 zodat hij
   aansluit op het einde van de onthulling; de animatie start 0,6 s na is-in en
   wint dan van de transition.

   De verbergende regels hangen aan body.vs-zweef-klaar, gezet door
   vesmo-zweef.js. Laadt dat script niet, dan staat alles gewoon zichtbaar. De
   klantband op een case krijgt is-in al uit de renderer en fadet dus niet: dat
   beeld is de LCP van de pagina. Op een telefoon werkt dit precies zo, want
   het hangt niet aan de parallax. */
.vs-zweef-klaar .vs-zweef {
  opacity: 0;
  transition: opacity .55s var(--vs-ease);
}

.vs-zweef-klaar .vs-zweef img {
  transform: translateY(24px);
  transition: transform .55s var(--vs-ease);
}

.vs-zweef-klaar .vs-zweef.is-in {
  opacity: 1;
}

.vs-zweef-klaar .vs-zweef.is-in img {
  transform: none;
  animation: vs-zweef-beeld 7s cubic-bezier(.45, 0, .55, 1) .6s infinite;
  will-change: transform;
}

@keyframes vs-zweef-beeld {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Een RECHTHOEKIG beeld krijgt hoeken en een slagschaduw; het is een plaatje in
   een kader. Een uitgeknipt apparaat op een doorzichtige ondergrond krijgt
   allebei niet: hoeken op een transparante png doen niets, en een box-shadow zou
   de rechthoek van het bestand tekenen in plaats van de vorm van het apparaat.
   Die beelden brengen hun eigen schaduw mee uit studio.html.

   Vandaar een expliciete modifier in plaats van een slimme detectie: de renderer
   weet niet of een bestand alpha heeft, en raden geeft hier een zichtbare fout. */
.vs-zweef--kader img {
  border-radius: var(--vs-radius);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
}

/* Op inkt een zachte gloed in plaats van een slagschaduw; een donkere schaduw op
   een donker vlak zie je toch niet en de mockup zweeft dan nergens boven. */
.vs-kapittel--inkt .vs-zweef--kader img,
.vs-blok--inkt .vs-zweef--kader img {
  box-shadow: 0 40px 120px -40px rgba(255, 255, 255, .22);
}

/* De hele rij naar links, anders loopt de mockup over de opsomming.

   Eerst stond hier 6fr 3fr, in de veronderstelling dat een smallere rechterkolom
   genoeg zou zijn. Dat was het niet: de punten bleven onder het beeld liggen en
   werden afgekapt tot losse letters. Gezien op de afdruk van 02-09-2026.

   Nu wordt de rij één kolom van 56%: tekst, opsomming, prijs en knop staan onder
   elkaar in de linkerhelft en de rechterhelft is vrij voor het beeld. Alleen bij
   --zweef; een kapittel zonder mockup houdt zijn twee kolommen. */
.vs-kapittel--zweef .vs-kapittel__rij {
  grid-template-columns: minmax(0, 1fr);
  max-width: 56%;
  gap: 56px;
}

/* In een hoofdstuk hangt de mockup in het midden (06-09-2026, ontwerpcontrole):
   op 34% van een hoofdstuk van ruim 1600px was hij na een half scherm weg en
   stond de rest van de rechterkolom leeg. Het blok op de homepage houdt 34%. */
.vs-kapittel--zweef .vs-zweef {
  top: 50%;
}

/* .vs-blok heeft van zichzelf geen position, en dan zou de absolute mockup aan
   een willekeurige ouder verderop gaan hangen. .vs-kapittel is al relatief. */
.vs-blok--zweef {
  position: relative;
}

.vs-blok--zweef .vs-blok__body {
  max-width: 56%;
}

/* Onder 1024px is er geen kolom om naast te hangen. De mockup gaat dan gewoon in
   de stroom mee, onder de tekst, en de parallax valt daar toch al weg: op een
   telefoon draait Locomotive native en doet data-scroll-speed niets (valkuil
   22). Zo blijft het beeld wel zichtbaar in plaats van half over de tekst. */
@media only screen and (max-width: 1023px) {
  .vs-zweef {
    position: static;
    width: 100%;
    max-width: 460px;
    margin: 40px 0 0;
  }

  .vs-zweef--tablet {
    max-width: 320px;
  }

  .vs-zweef--telefoon {
    max-width: 240px;
  }

  .vs-kapittel--zweef .vs-kapittel__rij,
  .vs-blok--zweef .vs-blok__body {
    grid-template-columns: 1fr;
    max-width: none;
  }
}

/* --- meelopende hoofdstuknavigatie ---------------------------------------- */

/* Standaard weg. Niet met visibility maar met display, zodat er onder 1800px ook
   geen tabstop overblijft; de vier snelkoppelingen bovenaan doen daar het werk. */
.vs-zijnav {
  display: none;
}

/* 1800px en niet 1280px, en dat is gemeten. .vs-kapittel__binnen is 1380 breed
   en staat gecentreerd, met een kantlijn van 56, dus links van de inhoud is er
   0px vrij op 1280 en 1440, 174px op 1728 en 334px op 2048. Een eerste poging op
   1700 met left:56px liep 14px over de tekst heen; gemeten op 02-09-2026.

   Daarom hangt de nav nu aan de gecentreerde container en niet aan de kantlijn:
   die container begint op 50% min de helft van 1380, dus 132 breed plus 24 lucht
   zet hem op 50% - 846px. Op precies 1800 valt hij daarmee op x=54, tegen de
   kantlijn van 56 aan, en daarboven schuift hij mee naar binnen. Onder 1800 zou
   hij de marge uit lopen, en dat is de grens.

   Lager kan alleen door de kapittels zelf te laten inspringen, en dat raakt het
   ritme van elke sectie. Verander je deze grens, verander dan ook de matchMedia
   in vesmo-diensten.js; die twee horen gelijk te staan. */
@media (min-width: 1800px) {
  .vs-pkop {
    position: relative;
  }

  .vs-zijnav {
    display: block;
    position: absolute;
    top: 0;
    left: calc(50% - 846px);
    z-index: 2;
    width: 132px;
    will-change: transform;
  }

  .vs-zijnav__lijst {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--vs-line);
  }

  .vs-zijnav__item {
    position: relative;
  }

  .vs-zijnav__link {
    display: block;
    padding: 10px 0 10px 16px;
    text-decoration: none;
    color: var(--vs-tekst);
    transition: color var(--vs-duur) var(--vs-ease);
  }

  .vs-zijnav__nr {
    display: block;
    font-family: var(--vs-mono);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0;
    color: inherit;
  }

  .vs-zijnav__naam {
    display: block;
    margin-top: 2px;
    font-family: var(--vs-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    text-wrap: pretty;
    color: inherit;
  }

  /* Het merkteken zit op het item en niet op de link, zodat het op de haarlijn
     staat en niet meeschuift met de padding van de link. */
  .vs-zijnav__item::before {
    content: '';
    position: absolute;
    top: 14px;
    left: -1px;
    width: 2px;
    height: 0;
    background-color: var(--vs-accent);
    transition: height var(--vs-duur) var(--vs-ease);
  }

  .vs-zijnav__item.is-actief::before {
    height: calc(100% - 20px);
  }

  .vs-zijnav__item.is-actief .vs-zijnav__link,
  .vs-zijnav__link:hover,
  .vs-zijnav__link:focus-visible {
    color: var(--vs-accent);
  }
}

/* --- kapittel ------------------------------------------------------------ */

.vs-kapittel {
  position: relative;
  padding: 150px var(--vs-kant) 160px;
}

.vs-kapittel--inkt {
  background-color: var(--vs-inkt);
  color: #ffffff;
}

.vs-kapittel__binnen {
  max-width: var(--vs-breed);
  margin: 0 auto;
}

.vs-kapittel__kop {
  display: flex;
  align-items: baseline;
  gap: 30px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--vs-line);
}

.vs-kapittel--inkt .vs-kapittel__kop {
  border-bottom-color: rgba(255, 255, 255, .22);
}

/* Hier staat de kleurregel op scherp: het nummer is kleine mono-tekst, dus op
   wit de donkere variant en op inkt de lichte. Nooit de felle. */
.vs-kapittel__nr {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--vs-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--vs-accent);
}

/* Wit en niet blauw (02-09-2026), zelfde afweging als bij .vs-skop__nr in
   vesmo-home.css: mono van 12px haalt op #251cff maar 2,54:1. Hier kan de
   regel niet weg zoals daar, want .vs-kapittel__nr zet in zijn basisregel al
   var(--vs-accent) en zou daar dan op terugvallen. */
.vs-kapittel--inkt .vs-kapittel__nr {
  color: var(--vs-mono-inkt);
}

.vs-kapittel__titel {
  margin: 0;
  font-family: var(--vs-kop);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: none;
  color: inherit;
}

.vs-kapittel__rij {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 96px;
  margin-top: 64px;
}

.vs-kapittel__sub {
  margin: 0;
  max-width: 640px;
  font-family: var(--vs-kop);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-transform: none;
  text-wrap: pretty;
  color: inherit;
}

/* De maat staat op de container en niet op de p. Dat is geen smaak maar
   noodzaak: onze eigen regel .body-text-xl p:not([class]) { font-size: inherit }
   in vesmo-style.css blok 21 is specifieker (0,2,1) dan .vs-kapittel__tekst p
   (0,1,1) en wint dus, ongeacht de laadvolgorde. Zet je de maat op de p, dan
   erft de alinea door tot de body en komt hij op 15px uit op desktop en op
   14,375px op een telefoon. Op de container is inherit precies wat je wilt.
   Zie ook valkuil 19 in export/site/CLAUDE.md. */
.vs-kapittel__tekst {
  font-size: 18px;
  line-height: var(--vs-regel);
}

.vs-kapittel__tekst p {
  margin: var(--vs-alinea) 0 0;
  max-width: 580px;
  font-family: var(--vs-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
  color: var(--vs-tekst);
}

.vs-kapittel__tekst p + p {
  margin-top: 16px;
}

.vs-kapittel--inkt .vs-kapittel__tekst p {
  color: var(--vs-ink-zacht);
}

/* --- opsomming en prijs --------------------------------------------------- */

/* Een vierkant blokje van 6px in de dienstkleur, geen bolletje. Dat is de enige
   plek in dit systeem waar de felle variant op wit mag staan: het is een vlak
   en geen letter. */
.vs-punten {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.6;
}

.vs-punten li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--vs-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-tekst);
}

.vs-kapittel--inkt .vs-punten li {
  color: var(--vs-ink-zacht);
}

/* GRIJS, NIET BLAUW (07-09-2026, lucht). Gemeten: 5 tot 9 blauwe blokjes per
   scherm in elke lijst, terwijl de checklist er twee toestaat; blauw betekende
   daardoor niets meer. Sindsdien is blauw alleen voor verwijzingen
   (.vs-link__blok), sectienummers (.vs-skop .vs-blok), knoppen en het slotvlak.
   Lijstblokjes zijn inkt op .28 (op wit) en wit op .35 (op inkt). */
.vs-punten__blok {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background-color: rgba(10, 10, 10, .28);
}

.vs-kapittel--inkt .vs-punten__blok {
  background-color: rgba(255, 255, 255, .35);
}

/* "Wat er niet in zit" op één regel (07-09-2026, lucht): dezelfde zinnen, maar
   als mono-regel met een punt ertussen in plaats van een tweede lijst met
   blokjes. Renderer: vesmo_kapittel_shortcode() in inc/pagina-blokken.php. */
.vs-kapittel__niet {
  max-width: 580px;
  margin: 0;
  color: var(--vs-tekst);
}

.vs-kapittel--inkt .vs-kapittel__niet {
  color: var(--vs-mono-inkt);
}

.vs-kapittel__prijs {
  margin: 48px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--vs-line);
  font-family: var(--vs-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-muted);
}

.vs-kapittel--inkt .vs-kapittel__prijs {
  border-top-color: rgba(255, 255, 255, .22);
  color: var(--vs-mono-inkt);
}

/* --- wat er niet in zit, en de knop --------------------------------------- */

/* Het open vierkantje is exact hetzelfde blokje als het gevulde, alleen met de
   vulling eruit en de kleur in een rand van 1px. Zelfde 6px, dus de tekst
   ernaast lijnt uit met de lijst erboven. */
.vs-punten__blok--open {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .35);
}

/* Op inkt wit en niet het accent. Zelfde afweging als bij de sectienummers op
   02-09-2026: een vlak van 6px mag op 2,53:1 staan, maar een rand van 1px is
   een vijfde daarvan aan pixels en verdwijnt dan echt.

   background-color hier NOGMAALS op transparent, en dat is geen dubbelop.
   .vs-kapittel--inkt .vs-punten__blok zet hierboven het accent als vulling en
   heeft specificiteit (0,2,0); .vs-punten__blok--open is (0,1,0) en verliest
   dus, ongeacht de volgorde. Gemeten op 02-09-2026: het blokje kwam op inkt
   gevuld blauw uit met een wit randje eromheen. Dat is valkuil 5 uit de
   opdracht, nu voor de derde keer: een --inkt-variant overtroef je alleen met
   gelijke specificiteit. */
.vs-kapittel--inkt .vs-punten__blok--open {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}

.vs-kapittel__nietkop {
  margin-top: 48px;
  margin-bottom: 10px;
}

.vs-kapittel--inkt .vs-kapittel__nietkop {
  color: var(--vs-mono-inkt);
}

/* De knop erft zijn vorm van .border-btn in blok 5 van vesmo-style.css. Hier
   staat alleen waar hij hangt. */
.vs-kapittel__knop {
  margin-top: 40px;
}

/* --- beeld ---------------------------------------------------------------- */

.vs-kapittel__beeld {
  margin: 56px 0 0;
}

/* Het vlak bestaat ook zonder beeld. Beeld dat nog niet is aangeleverd blijft
   volgens de handoff leeg, en een leeg grijs vlak van 16:9 houdt het ritme van
   de pagina heel zonder dat er een stockfoto in hoeft. */
.vs-beeldvlak {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--vs-radius);
  background-color: var(--vs-band);
  box-shadow: var(--vs-schaduw);
}

.vs-kapittel--inkt .vs-beeldvlak {
  background-color: #161616;
  box-shadow: none;
}

/* Speling voor de parallax, sinds 02-09-2026. Het beeld schuift binnen dit vlak
   met data-scroll-speed; op precies 100% hoogte zou er dan aan de boven- of
   onderkant een strook leeg vlak verschijnen. 124% met -12% marge boven houdt
   het beeld gecentreerd en geeft aan beide kanten genoeg over. Het vlak zelf
   heeft overflow: hidden, dus de sectie wordt er niet hoger van. */
.vs-beeldvlak img {
  display: block;
  width: 100%;
  height: 124%;
  margin-top: -12%;
  object-fit: cover;
}

.vs-kapittel__beeld figcaption {
  margin-top: 16px;
}

.vs-kapittel--inkt .vs-kapittel__beeld figcaption {
  color: var(--vs-mono-inkt);
}

/* --- kleinere schermen ---------------------------------------------------- */

@media only screen and (max-width: 991px) {
  .vs-pkop {
    padding-top: 110px;
  }

  .vs-pkop__rij,
  .vs-kapittel__rij {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .vs-pkop__titel {
    font-size: 46px;
  }

  .vs-kapittel {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .vs-kapittel__titel {
    font-size: 34px;
  }

  .vs-kapittel__sub {
    font-size: 26px;
  }
}

@media only screen and (max-width: 599px) {
  .vs-pkop__titel {
    font-size: 36px;
  }

  .vs-kapittel__kop {
    flex-direction: column;
    gap: 10px;
  }

  .vs-kapittel__titel {
    font-size: 28px;
  }
}

/* -------------------------------------------------------------------------
   41. Werk, Case VUSK, Over ons en Contact, handoff 28-08-2026.

   Hoort bij inc/pagina-secties.php. Blok 40 dekt de paginakop, de chips en het
   kapittel; dit dekt alles wat daar niet in past. De maten komen uit Werk.dc.html,
   Case-VUSK.dc.html, Over-ons.dc.html en Contact.dc.html en zijn hi-fi.

   EEN CONTAINER VOOR ALLE VIER. In de ontwerpen staat overal dezelfde
   constructie: een sectie met padding 0 50px en daarbinnen een blok van
   max-width 1380px dat gecentreerd staat. Dat is hier .vs-binnen geworden. De
   verticale ruimte staat op de sectie zelf, want die verschilt per plek.
   ------------------------------------------------------------------------- */

.vs-binnen {
  max-width: var(--vs-breed);
  margin: 0 auto;
}

/* --- verwijzing met een blokje in de dienstkleur -------------------------- */

/* De onderstreping groeit van links naar rechts. Een background-image met
   background-size 0% -> 100% doet dat zonder het element te verschuiven; een
   border-bottom met een transition zou de regelhoogte laten springen. */
.vs-link {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--vs-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--vs-ink);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 1.15em;
  transition: background-size .6s var(--vs-ease-in), color .3s ease;
}

.vs-link:hover,
.vs-link:focus-visible {
  background-size: 100% 1px;
  color: var(--vs-ink);
}

.vs-link--kaal {
  color: var(--vs-tekst);
}

.vs-link__blok {
  flex: 0 0 auto;
  width: .875em;
  height: .875em;
  margin-right: .7em;
  background-color: var(--vs-accent);
}

.vs-blok--inkt .vs-link,
.vs-blok--inkt .vs-link:hover {
  color: #ffffff;
}

/* --- de band boven een project ------------------------------------------- */

.vs-projectband {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--vs-line);
}

.vs-projectband p {
  margin: 0;
}

/* --- Werk: het grote project --------------------------------------------- */

.vs-werkcase {
  padding: 120px var(--vs-kant) 0;
}

.vs-werkcase__beeld {
  display: block;
  margin-top: 34px;
}

.vs-werkcase__rij {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 80px;
  margin-top: 38px;
}

.vs-werkcase__titel {
  margin: 0;
  font-family: var(--vs-kop);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--vs-ink);
}

/* Op de container, want een <p> zonder klasse erft maat en regelafstand
   (blok 21 van vesmo-style.css) en de regel op de p zelf verliest. */
.vs-werkcase__tekst {
  font-size: 18px;
  line-height: var(--vs-regel);
}

.vs-werkcase__tekst p {
  margin: var(--vs-alinea) 0 0;
  max-width: 580px;
  font-family: var(--vs-body);
  font-size: 18px;
  font-weight: 400;
  line-height: var(--vs-regel);
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
  color: var(--vs-tekst);
}

.vs-werkcase__links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 30px;
}

.vs-werkcase__zij {
  padding-top: 10px;
}

/* --- Werk: de twee projecten in ontwikkeling ------------------------------ */

.vs-tegels {
  /* Onderrand sinds 06-09-2026: tot dan volgde hier de mono-notitie, die de
     afstand tot het slotvlak maakte. Zonder die notitie stond "Bekijk het
     project" op 0px van het blauw (gemeten). 110px is de maat van Over ons en
     Contact (104px tot de laatste tekst), 80px onder 991px zoals daar. */
  padding: 140px var(--vs-kant) 140px;
}

/* Onder de band van richting C (06-09-2026) hoort minder lucht dan onder een
   witte sectie: de band is zelf al een blok. */
.vs-tegels--ongelijk {
  /* 80px sinds indeling D (06-09-2026, 22:00): het raster volgt nu direct op de
     paginakop, die zelf geen onderrand heeft. Onder richting C stond hier 96px
     onder de groene band. */
  padding-top: 100px;
}

/* De kop boven de tegels, sinds 02-09-2026. Zelfde maten als de kop van
   [vesmo_stappen], zodat de onderpagina's hetzelfde ritme houden. */
.vs-tegels__kop {
  max-width: 620px;
  margin-bottom: 56px;
}

.vs-tegels__titel {
  margin: 14px 0 0;
  font-family: var(--vs-kop);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-transform: none;
  text-wrap: pretty;
  color: var(--vs-ink);
}

.vs-tegels__intro {
  margin: 18px 0 0;
  font-family: var(--vs-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
  color: var(--vs-tekst);
}

.vs-tegels__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
}


.vs-tegel .vs-projectband {
  gap: 24px;
}

/* Zonder afdruk draagt het inktvlak de merknaam. Conform de handoff: geen
   mockups. Met een afdruk (01-09-2026, TheorieBriljant en FactuurPartner) vult
   het beeld hetzelfde vlak; de verhouding blijft 4/3 zodat de twee tegels naast
   elkaar even hoog blijven, ook als er straks een derde bij komt zonder beeld. */
.vs-tegel__vlak {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  margin-top: 34px;
  padding: 40px;
  border-radius: var(--vs-radius);
  background-color: var(--vs-inkt);
}

.vs-tegel__vlak--beeld {
  padding: 0;
  overflow: hidden;
}

.vs-tegel__vlak--beeld img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* De afdrukken zijn 3:2 en het vlak is 4:3. Breder dan hoog, dus cover schaalt
     op de hoogte en snijdt aan de zijkanten: horizontaal midden is dan het
     goede antwoord. De 0 erachter doet bij deze verhouding niets en staat er
     voor het geval hier ooit een staand beeld in komt; dan wordt de onderkant
     weggesneden en niet de kop van de site. */
  object-position: 50% 0;
  /* Voor de hover-zoom hieronder; 600 ms, de bovengrens van het systeem. */
  transition: transform .6s var(--vs-ease);
}

/* HOVER-ZOOM (06-09-2026). Het beeld schaalt 3% en niet meer: hetzelfde recept
   als .vs-selectie__case op de oude homepage (vesmo-home.css). Alleen op
   apparaten met een muis; een aanraakscherm heeft geen hover en zou het bij
   een tik laten hangen. .vs-tegel__vlak--beeld heeft overflow:hidden, dus het
   beeld groeit binnen zijn kader. */
@media (hover: hover) {
  .vs-tegel:hover .vs-tegel__vlak--beeld img,
  .vs-tegel:hover .vs-tegel__vlak--mockup img {
    transform: scale(1.03);
  }
}

.vs-tegel__naam {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  font-family: var(--vs-kop);
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: none;
  color: #ffffff;
}

/* Tot 02-09-2026 stond hier de lichte variant van het accent, met de
   aantekening dat de donkere in het zwart verdwijnt. Die lichte tint is die
   dag afgeschaft: het merkblauw staat nu overal, ook op inkt. Zie blok 13 van
   vesmo-style.css voor de meting en de enige uitzondering. */
.vs-tegel__blok {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-color: var(--vs-accent);
}

.vs-tegel__titel {
  margin: 32px 0 0;
  font-family: var(--vs-kop);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--vs-ink);
}

.vs-tegel__tekst {
  margin: 20px 0 0;
  max-width: 500px;
  font-family: var(--vs-body);
  font-size: 18px;
  font-weight: 400;
  line-height: var(--vs-regel);
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
  color: var(--vs-tekst);
}

/* Het merkteken op het beeld. Papier op inkt in plaats van andersom, zodat het
   ook boven een lichte schermafdruk leesbaar blijft; de tegels tonen websites en
   die zijn vrijwel altijd licht. */
.vs-tegel__merk {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 7px 12px 6px;
  border-radius: var(--vs-radius-pill);
  background-color: var(--vs-inkt);
  color: #ffffff;
}

.vs-tegel__status {
  margin-top: 20px;
}

/* Wat het project opleverde. Flex omdat het blokje van 6px op de eerste regel
   moet uitlijnen met de letters ernaast, niet met het midden van de alinea;
   align-items: baseline doet dat, precies zoals in .vs-punten li. */
/* De verwijzing onder een tegel, 04-09-2026. Zelfde link-opmaak als onder de
   grote case; dit blok regelt alleen de afstand tot de statusregels erboven. */
.vs-tegel__links {
  margin-top: 18px;
}

.vs-tegel__resultaat {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 26px;
  color: var(--vs-ink);
}

/* Zonder statusregel ervoor (06-09-2026) volgt de resultaatregel direct op de
   tekst; de 10px hierboven was op die mono-regel gerekend. Met een datum komt
   de statusregel terug en geldt weer de 10px. */
.vs-tegel__tekst + .vs-tegel__resultaat {
  margin-top: 26px;
}

/* --- Werk: het ongelijke raster (06-09-2026, richting C) --------------------
   Daan vond het raster van vier gelijke tegels met afdrukken "niet mooi". Uit
   drie schetsen (register, banden, raster) koos hij deze: twaalf kolommen,
   breed is acht en smal is vier, per rij om en om (02 breed + 03 smal, 04 smal
   + 05 breed). Elk vlak is papier met de studio-mockup erin, contain en met
   lucht, precies het recept van .vs-strip__beeld--mockup op de homepage; een
   breed vlak is 16:9, een smal vlak 4:5 (de staande mockup met de apparaten
   onder elkaar). Nummer linksboven, pil rechtsboven, sector met het vierkantje
   in de klantkleur onder de titel. Schets: screenshots/werk-raster/schets-C.png. */
.vs-tegels__raster--ongelijk {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}

.vs-tegel--breed { grid-column: span 8; }
.vs-tegel--smal  { grid-column: span 4; }
/* half (indeling D, 06-09-2026): twee tegels van zes naast elkaar op de eerste
   rij, drie van vier op de tweede. */
.vs-tegel--half  { grid-column: span 6; }

/* Zonder projectband erboven begint de tegel met het vlak. */
.vs-tegels__raster--ongelijk .vs-tegel__vlak {
  margin-top: 0;
}

.vs-tegel__vlak--mockup {
  align-items: center;
  aspect-ratio: 16 / 9;
  /* border-box, anders geldt de verhouding voor de binnenmaat en komt de rand
     er nog bij: gemeten 869x552 (1,57) in plaats van 869x489 (1,78). */
  box-sizing: border-box;
  padding: 7% 6%;
  overflow: hidden;
  background-color: var(--vs-papier);
}

.vs-tegel__vlak--4x5 {
  aspect-ratio: 4 / 5;
  padding: 12% 8%;
}

.vs-tegel__vlak--mockup img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform .6s var(--vs-ease);
}

.vs-tegel__nr {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 2;
}

.vs-tegel__merk--rechts {
  left: auto;
  right: 14px;
}

/* De status van het live project, rechtsboven in het vlak, zonder pil. Mono in
   --vs-tekst op papier: 4,8:1. */
.vs-tegel__live {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
}

.vs-tegels__raster--ongelijk .vs-tegel__titel {
  margin-top: 32px;
}

.vs-tegel__sector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.vs-tegel__stip {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
}

/* De hele tegel klikbaar (06-09-2026, ontwerpcontrole): vlak en titel in één
   link, "Bekijk het project" eronder is een aanwijzing zonder link. Hover: het
   vlak licht 6px op naast de zoom van 3% op het beeld, de titel kleurt blauw.
   De transform staat op het vlak en niet op de img, die heeft de zoom al. */
.vs-tegel__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.vs-tegel__link:focus-visible {
  outline: 2px solid var(--vs-accent);
  outline-offset: 4px;
  border-radius: var(--vs-radius);
}

.vs-tegel__link .vs-tegel__vlak--mockup {
  transition: transform .6s var(--vs-ease);
}

.vs-tegel__link .vs-tegel__titel {
  transition: color .3s ease;
}

@media (hover: hover) {
  .vs-tegel:hover .vs-tegel__link .vs-tegel__vlak--mockup,
  .vs-tegel__link:focus-visible .vs-tegel__vlak--mockup {
    transform: translateY(-6px);
  }

  .vs-tegel:hover .vs-tegel__link .vs-tegel__titel,
  .vs-tegel__link:focus-visible .vs-tegel__titel {
    color: var(--vs-accent);
  }
}

/* --- de mono-notitie ------------------------------------------------------ */

.vs-notitie {
  padding: 110px var(--vs-kant) 0;
}

.vs-notitie__tekst {
  max-width: 580px;
  padding-top: 26px;
  border-top: 1px solid var(--vs-line);
  line-height: 1.6;
}

/* --- Case: de klantband --------------------------------------------------- */

.vs-klantband {
  /* relative op de basis (06-09-2026): het raster hieronder is absoluut. De
     modifiers --zweef en --groep hadden dit al. */
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 62vh;
  padding: 150px var(--vs-kant) 56px;
}

/* Boven het raster, anders lopen de lijnen over de titel heen. */
.vs-klantband .vs-binnen {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Met een mockup erin wordt de band een echte hero: de naam links, het werk
   rechts. De titel krijgt ruimte zodat hij niet onder het beeld doorloopt, en de
   band mag iets hoger omdat er nu iets te zien is. */
.vs-klantband--zweef {
  position: relative;
  min-height: 78vh;
}

/* max-width alleen is hier niet genoeg: .vs-binnen staat op margin: 0 auto, en
   een smaller blok met auto-marges gaat in het midden staan in plaats van links.
   Gemeten: de titel begon op x=375 en liep tot onder het beeld. Dit is dezelfde
   val als bij .vs-slot__binnen op 02-09; auto-marges en een expliciete breedte
   verdragen elkaar niet. */
.vs-klantband--zweef .vs-binnen {
  max-width: 52%;
  margin-left: 0;
  margin-right: auto;
}

/* Hoger dan elders: in een band die aan de onderkant uitlijnt hoort het beeld
   optisch in het midden te hangen, niet halverwege de tekst. */
.vs-klantband--zweef .vs-zweef {
  top: 44%;
  width: min(46%, 620px);
  margin-top: -16%;
}

@media only screen and (max-width: 1023px) {
  .vs-klantband--zweef {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
  }

  .vs-klantband--zweef .vs-binnen {
    max-width: none;
  }

  .vs-klantband--zweef .vs-zweef {
    width: 100%;
    max-width: 520px;
    margin: 40px auto 0;
  }
}

/* Vol wit sinds 06-09-2026 (ontwerpcontrole): op .7 haalde het label 2,71:1
   op het VUSK-groen en Lighthouse gaf elke case 96. Waar ook vol wit niet aan
   4,5 komt zet de renderer --inkt op het label (vesmo_klantband_letter met
   drempel 4,5). */
.vs-klantband__label {
  color: #ffffff;
}

.vs-klantband__label--inkt {
  color: var(--vs-ink);
}

.vs-klantband__titel {
  margin: 22px 0 0;
  font-family: var(--vs-kop);
  font-size: clamp(56px, 9vw, 150px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -0.04em;
  text-transform: none;
  color: #ffffff;
}

/* INKT OP EEN LICHTE KLANTKLEUR (06-09-2026). Wit haalt op het oranje van
   TheorieBriljant en FactuurPartner geen 3:1; de renderer zet dan deze modifier
   (vesmo_klantband_letter() in inc/pagina-secties.php). Het label op .7, net
   als de witte variant. */
.vs-klantband--inkt .vs-klantband__label {
  color: var(--vs-ink);
}

.vs-klantband--inkt .vs-klantband__titel {
  color: var(--vs-ink);
}


/* --- Case: het raster in de klantband (06-09-2026) -------------------------

   De haarlijnen van het slotvlak, in de gekleurde hero van de cases. Daan wilde
   op die vlakken "subtiele lijnen net zoals het blauwe vlak". Dit is een kopie
   van .vs-slot__raster in vesmo-style.css (blok bij regel 1269) met eigen
   klassen; wie dat raster wijzigt, past dit mee aan. De markup komt uit
   vesmo_klantband_shortcode() in inc/pagina-secties.php, het intekenen uit
   vesmo-slot.js.

   EEN KLEUR VOOR ALLE KLANTKLEUREN. Wit op .22, hetzelfde token als het
   slotvlak. Nagerekend: op het blauw van het slotvlak is het contrast van een
   lijn met de achtergrond 1,46:1, op het oranje van TheorieBriljant en
   FactuurPartner 1,24:1, op het groen van VUSK ertussenin. Een inktlijn op .12
   geeft op datzelfde oranje 1,25:1, dus een aparte variant voor de --inkt-band
   voegt niets toe.

   RUSTSTAND IS ZICHTBAAR. scaleY(0) zet vesmo-slot.js, niet deze css; zonder
   script en bij prefers-reduced-motion staan de lijnen er gewoon. */
.vs-klantband__raster {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  pointer-events: none;
}

.vs-klantband__lijn {
  justify-self: start;
  width: 1px;
  background-color: var(--vs-raster-blauw);
  transform-origin: top center;
}

.vs-klantband__lijn--rand {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

/* Zes lijnen onder 991px, het breekpunt van het slotvlak en de voettekst en
   niet de 1023px van de klantband zelf: het raster moet op elke breedte
   hetzelfde ritme hebben als de twee rasters onderaan dezelfde pagina. */
@media only screen and (max-width: 991px) {
  .vs-klantband__raster {
    grid-template-columns: repeat(6, 1fr);
  }

  .vs-klantband__lijn:nth-child(n + 7):not(.vs-klantband__lijn--rand) {
    display: none;
  }
}

/* --- Case: de apparaatgroep in de klantband (06-09-2026, avond) -------------

   Laptop, tablet en telefoon als drie losse lagen in één compacte groep, op de
   plek waar tot vandaag het samengestelde zwevende beeld stond: rechts naast de
   titel, onder 1024px eronder. De telefoon staat vóór de tablet, de bundel
   tegen de laptop aan. Elke laag zweeft op zijn eigen tempo (css op de img); de
   wrapper draagt de parallax van Locomotive (-0.4) en krijgt hier géén
   transform. Eerder die dag stond hier een lopende band die vanzelf schoof;
   Daan wilde geen schuiven en de apparaten compacter op elkaar.

   De lagen hebben een doorzichtige rand rondom (het canvas van
   studio-lagen.sh): de laptop vult 93% van zijn beeld, de tablet 85%, de
   telefoon 70%. De breedtes hieronder zijn daarop gecorrigeerd. */
/* 68vh en niet de 78vh van het zwevende beeld: de groep is 2:1 en dus half zo
   hoog als het staande beeld van vroeger; met 78vh hing hij hoog in een lege
   band (afdruk van 06-09, nacht). Verticaal gecentreerd, de titel onderin. */
.vs-klantband--groep {
  position: relative;
  min-height: 68vh;
}

.vs-klantband--groep .vs-binnen {
  max-width: 48%;
  margin-left: 0;
  margin-right: auto;
}

/* --- Werk: de band als uitgelichte case (06-09-2026, richting C) ------------
   NIET MEER IN GEBRUIK sinds indeling D (06-09-2026, 22:00): Daan wilde de
   groene band niet, VUSK staat nu in het raster. De attributen van
   [vesmo_klantband] en deze regels blijven staan voor een volgende keer dat
   een band ergens anders dan als hero moet dienen.
   Dezelfde klantband als op een case, maar op /werk/ staat hij onder de
   paginakop en is hij geen hero: 600px in plaats van 68vh, de titel kleiner, en
   onder de titel een zin, de punten als mono-regel en de twee verwijzingen.
   Rechts de drie lagen van --groep, ongewijzigd. Dit blok staat NA de basisregel
   van --groep en VOOR het 1023px-blok: zo wint 600px op desktop van 68vh en
   wint het stapelen van --groep op een telefoon weer van dit blok. */
.vs-klantband--werk {
  min-height: 600px;
  /* Ruimte tot de paginakop erboven; die heeft zelf geen onderrand en de intro
     stond op de afdruk tegen het groen aan. */
  margin-top: 72px;
  padding: 120px var(--vs-kant) 64px;
}

.vs-klantband--werk .vs-klantband__titel {
  font-size: clamp(48px, 6.6vw, 96px);
}

.vs-klantband__zin {
  margin: 24px 0 0;
  max-width: 420px;
  font-family: var(--vs-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
  color: rgba(255, 255, 255, .88);
}

.vs-klantband--inkt .vs-klantband__zin {
  color: rgba(10, 10, 10, .8);
}

.vs-klantband__punten {
  margin-top: 18px;
  max-width: 460px;
  color: rgba(255, 255, 255, .7);
}

.vs-klantband--inkt .vs-klantband__punten {
  color: rgba(10, 10, 10, .7);
}

.vs-klantband__links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 26px;
}

.vs-klantband__links .vs-link {
  color: #ffffff;
}

.vs-klantband--inkt .vs-klantband__links .vs-link {
  color: var(--vs-ink);
}

/* CONTRAST OP HET VUSK-GROEN (06-09-2026, gemeten met Lighthouse). Wit op
   #31916f haalt 3,63:1: genoeg voor grote letters (de titel, 3:1), nooit voor
   kleine (4,5:1). De case-pagina heeft daarom al een label op 2,71:1 en scoort
   96; dat staat daar nog. Op /werk/ komt er meer kleine tekst in de band, dus
   hier drie keuzes: het label en de punten in volle inkt (5,08:1 op het
   groen), de zin als grote regel van 24px (wit mag dan, 3,63 >= 3) en de
   verwijzingen vet en 20px (vet vanaf 18,66px telt ook als groot). */
.vs-klantband--werk .vs-klantband__label,
.vs-klantband--werk .vs-klantband__punten {
  color: var(--vs-ink);
}

.vs-klantband--werk .vs-klantband__zin {
  max-width: 480px;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.vs-klantband--werk .vs-klantband__links .vs-link {
  font-size: 20px;
  font-weight: 700;
}

.vs-klantband__groep {
  position: absolute;
  top: 50%;
  right: var(--vs-kant);
  z-index: 1;
  /* 50% en hooguit 700px (was 46%/620): breder, zodat er lucht tussen de laptop
     en de bundel past. Daan vond de eerste groep te dicht op elkaar. */
  width: min(50%, 700px);
  aspect-ratio: 2 / 1;
  margin: 0;
  /* De helft van de eigen hoogte terug, zodat top: 50% het midden van de groep
     is. LET OP: een procentuele marge rekent met de breedte van de SECTIE, niet
     met die van de groep. De groep is 2:1 en hooguit 700px op 1440, dus de halve
     hoogte is 175px en dat is 12% van de sectie; onder 1400 breed is de groep
     50% en komt dezelfde som op 12,5%. Met -25% stond hij 360px te hoog
     (gemeten 06-09). Marge en geen translateY op de figures: Locomotive schrijft
     zijn parallax als transform op precies die elementen. */
  margin-top: -12%;
  pointer-events: none;
}

.vs-laag {
  position: absolute;
  margin: 0;
}

.vs-laag img {
  display: block;
  width: 100%;
  height: auto;
}

/* Met lucht (06-09-2026, na de eerste versie): de laptop zichtbaar tot zo'n 58%
   van de groep, de tablet vanaf 68%, de telefoon van 65 tot 79% dus over het
   linkerdeel van de tablet en vrij van de laptop; het gat tussen laptop en
   bundel is ongeveer 7% van de groep (45 tot 50px op desktop). De parallax per
   laag (-0.3 / -0.5 / -0.7) staat als data-scroll op de figures in de renderer,
   zodat ze bij het scrollen zichtbaar van elkaar los komen. */
.vs-laag--laptop   { left: 0;    top: 8%;     width: 60%; z-index: 2; }
.vs-laag--tablet   { right: 0;   bottom: 6%;  width: 34%; z-index: 1; }
.vs-laag--telefoon { left: 62%;  bottom: -4%; width: 20%; z-index: 3; }

.vs-laag--laptop img   { animation: vs-zweef-beeld 7s cubic-bezier(.45, 0, .55, 1) -1s infinite; }
.vs-laag--tablet img   { animation: vs-zweef-beeld 6s cubic-bezier(.45, 0, .55, 1) -3s infinite; }
.vs-laag--telefoon img { animation: vs-zweef-beeld 5s cubic-bezier(.45, 0, .55, 1) -2s infinite; }

/* Alt-tekst voor de groep, alleen voor schermlezers. */
.vs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media only screen and (max-width: 1023px) {
  .vs-klantband--groep {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
  }

  .vs-klantband--groep .vs-binnen {
    max-width: none;
  }

  /* In de stroom onder de titel; de lagen houden hun plaats in de groep, de
     aspect-ratio geeft de hoogte. */
  .vs-klantband__groep {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 520px;
    margin: 40px auto 0;
  }
}

/* --- Case: de gegevensbalk ------------------------------------------------ */

/* De haarlijnen tussen de vakjes komen uit de achtergrond van het raster met
   gap:1px, niet uit vier losse borders. Dat scheelt een dubbele lijn op de
   naden en houdt de buitenrand aan de zijkanten weg. */
.vs-gegevens {
  padding: 0 var(--vs-kant);
}

.vs-gegevens__raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--vs-line);
  border-bottom: 1px solid var(--vs-line);
}

.vs-gegeven {
  padding: 30px 24px;
  background-color: #ffffff;
}

.vs-gegeven:first-child {
  padding-left: 0;
}

.vs-gegeven:last-child {
  padding-right: 0;
}

.vs-gegeven__waarde,
.vs-gegeven__link {
  display: inline-block;
  margin: 12px 0 0;
  font-family: var(--vs-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-ink);
}

.vs-gegeven__link {
  text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .3);
}

.vs-gegeven__link:hover {
  color: var(--vs-accent);
  box-shadow: inset 0 -1px 0 var(--vs-accent);
}

.vs-pillen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.vs-pillen li {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--vs-rand);
  border-radius: var(--vs-radius-pill);
  font-family: var(--vs-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-ink);
}

/* --- het blok met label links en tekst rechts ----------------------------- */

.vs-blok {
  padding: 140px var(--vs-kant) 0;
}

.vs-blok--inkt {
  margin-top: 140px;
  padding: 130px var(--vs-kant);
  background-color: var(--vs-inkt);
}

/* Een inkt-blok brengt zijn eigen ruimte mee, dus de sectie ervoor mag niet
   nog eens 110px onder zichzelf zetten. In de ontwerpen staat die marge op het
   inkt-blok zelf; hier dus ook. */
.vs-blok--inkt + .vs-blok,
.vs-blok--inkt + .vs-figuur {
  padding-top: 110px;
}

.vs-blok__rij {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 80px;
  align-items: start;
}

.vs-blok--inkt .vs-blok__label {
  color: var(--vs-mono-inkt);
}

.vs-blok__titel {
  margin: 0;
  max-width: 860px;
  font-family: var(--vs-kop);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: none;
  text-wrap: pretty;
  color: var(--vs-ink);
}

.vs-blok--inkt .vs-blok__titel {
  color: #ffffff;
}

.vs-blok__tekst {
  margin: var(--vs-alinea) 0 0;
  max-width: 600px;
  font-family: var(--vs-body);
  font-size: 18px;
  font-weight: 400;
  line-height: var(--vs-regel);
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
  color: var(--vs-tekst);
}

.vs-blok--inkt .vs-blok__tekst {
  color: var(--vs-ink-zacht);
}

.vs-blok__body .vs-punten {
  margin-top: 40px;
  max-width: 760px;
}

.vs-punten--raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 40px;
}

.vs-blok--inkt .vs-punten li {
  color: var(--vs-ink-zacht);
}

.vs-blok--inkt .vs-punten__blok {
  background-color: rgba(255, 255, 255, .35);
}

.vs-blok__links {
  margin-top: 28px;
}

/* --- een figuur over de volle breedte ------------------------------------- */

.vs-figuur {
  padding: 140px var(--vs-kant) 0;
}

.vs-figuur--kort {
  padding-top: 70px;
}

/* Een eigen kader met overflow: hidden, zodat de parallax binnen het beeld
   blijft en de sectie eronder niet meebeweegt. Zonder dit schuift de img over de
   volgende sectie heen. */
.vs-figuur figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--vs-radius);
}

.vs-figuur figure img {
  display: block;
  width: 100%;
  height: auto;
}

.vs-figuur figcaption {
  margin-top: 16px;
}

/* --- de verwijzing onderaan een case -------------------------------------- */

.vs-verder {
  padding: 140px var(--vs-kant) 0;
}

.vs-verder__binnen {
  padding-top: 34px;
  border-top: 1px solid var(--vs-line);
}

.vs-verder__link {
  display: flex;
  align-items: baseline;
  gap: 30px;
  padding: 26px 0;
  text-decoration: none;
  color: var(--vs-ink);
  transition: padding-left .5s var(--vs-ease);
}

.vs-verder__link:hover {
  padding-left: 28px;
  color: var(--vs-ink);
}

.vs-verder__nr {
  flex: 0 0 auto;
}

.vs-verder__titel {
  font-family: var(--vs-kop);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Het blokje in de klantkleur van het volgende project, rechts op de regel
   zoals op de banden in de voettekst (06-09-2026). margin-left:auto duwt het
   naar de rand; align-self omdat een leeg vak geen grondlijn heeft. */
.vs-verder__blok {
  flex: 0 0 auto;
  align-self: center;
  width: 14px;
  height: 14px;
  margin-left: auto;
}

/* De kale verwijzing naar het overzicht, onder de regel. De 34px eronder is
   de lucht tot het slotvlak: de link erboven had die in zijn eigen padding en
   deze regel niet, dus zonder deze marge zat "Alle projecten" tegen het blauw
   aan (gezien op 1440, 06-09-2026). */
.vs-verder__alle {
  margin: 0 0 34px;
}

/* --- Over ons: portret naast tekst ---------------------------------------- */

.vs-wie {
  padding: 130px var(--vs-kant) 0;
}

.vs-wie__rij {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: center;
}

.vs-wie--geen-portret .vs-wie__rij {
  grid-template-columns: 1fr;
}

.vs-beeldvlak--portret {
  aspect-ratio: 4 / 5;
  box-shadow: none;
}

/* HET PORTRET STAAT LOS, ZONDER VLAK (30-08-2026, tweede herontwerp). De
   uitsnede is transparant; tot vandaag stond daar het gebroken wit van
   .vs-beeldvlak achter, met 8px afronding. Dat las als een pasfoto in een kader
   en niet als een uitsnede op de pagina.

   Waarom een eigen regel en niet de basis aanpassen: .vs-beeldvlak wordt in twee
   bestanden gedefinieerd (vesmo-home.css en vesmo-paginas.css) en geldt voor élk
   beeld op de site, ook de hero en de cases. Twee klassen geeft 0,2,0 en
   verslaat allebei die basisregels ongeacht laadvolgorde, zonder iets anders te
   raken.

   overflow: visible omdat het portret op en neer zweeft; met hidden knipt het
   vlak de bovenkant af zodra hij omhoog komt. */
.vs-wie__portret .vs-beeldvlak--portret {
  background-color: transparent;
  border-radius: 0;
  overflow: visible;
}

/* DE ZWEVING. Traag en klein: 10px in 6 seconden, heen en terug. Groter of
   sneller wordt onrustig naast lopende tekst. Hij hangt op de kolom en niet op
   de img, zodat een eventueel bijschrift meebeweegt.

   Uit bij prefers-reduced-motion, net als de hero-video. Dat is een
   systeemvoorkeur en geen knop op de pagina. */
@keyframes vs-zweef {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(5px); }
}

.vs-wie__portret {
  position: relative;
  animation: vs-zweef 6s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform;
}

/* HET MEDAILLON (30-08-2026, derde ronde). Was een gebroken witte schijf als
   ::before; nu een echt element, want een pseudo-element kan geen twaalf
   meetstreepjes dragen.

   MATEN, uit de meting en niet uit de duim. VIERDE RONDE: het portret stond op
   78% van de kolom en zweefde in de bovenhelft van de schijf; onder de schouders
   bleef 118px leeg blauw staan. Daan wil hem groter en met de onderkant op de
   onderkant van de cirkel.

   Nu: portret op 100% van de kolom (van 780 naar 1000 breed op een kolom van
   1000, dus 64% meer beeld), schijf onveranderd 100% van de kolom, en het midden
   van de schijf op 60% van de beeldhoogte. Bij een kader van 4:5 valt de
   onderkant van de schijf daarmee exact samen met de onderkant van het beeld:
   0,60 x 1,25 + 0,50 = 1,25. Onder de cirkel steekt dus per definitie niets uit.

   WAAROM NIET GROTER. Bij 106% van de kolom komen de kruinen boven de cirkel uit,
   wat Daan toestond, maar dan snijdt de bovenrand van de cirkel dwars door de
   gezichten en valt de overgangsstrook van het masker precies op de voorhoofden.
   Dat is uitgerenderd en afgekeurd. Bij 100% ligt de kruin 27px onder de rand en
   blijft alles heel.

   GEEN HAARLIJN meer om de schijf. Een lichtgrijze ring rond een blauw vlak op
   wit leest als een halo en niet als een kader.

   Vol blauw en geen zachte tint, en dat is gemeten: het aandeel van het portret
   dat qua helderheid bijna wegvalt is 28% op vol blauw maar 38 tot 42% op elke
   tussentint. Een half blauw is hier het slechtste van beide werelden. */
.vs-wie__medaillon {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.vs-ring {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 60%;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: var(--vs-radius-pill);
  background-color: var(--vs-accent);
  pointer-events: none;
}

/* De meetstreepjes. De buitenste span loopt van het midden naar de rand en doet
   alleen de rotatie; de <i> aan het uiteinde is het merkteken en doet de
   intekening. Gesplitst omdat rotate en scaleY in één transform elkaar in de weg
   zitten.

   2px breed en niet 1px: op --vs-raster-blauw (wit op 16%) is één pixel te weinig
   om te zien. Dat token is er precies voor lijnen op het blauwe vlak; het draagt
   ook de twaalf haarlijnen van het slotvlak. */
.vs-ring__tik {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 50%;
  margin-left: -1px;
  transform-origin: top center;
  transform: rotate(var(--hoek, 0deg));
}

.vs-ring__tik i {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 2px;
  height: 16px;
  background-color: var(--vs-raster-blauw);
  transform-origin: bottom center;
}

/* Het beeld eroverheen; anders valt de uitsnede achter de schijf. */
.vs-wie__medaillon .vs-beeldvlak--portret,
.vs-wie__portret .vs-mono {
  position: relative;
  z-index: 1;
}

/* DE RANDEN LATEN UITVLOEIEN, LANGS DE CIRKEL (30-08-2026, vierde ronde).

   Hier stond een verloop over de onderste 12%. Dat verhielp de rechte snee
   onderaan, maar niet die links en rechts. Gemeten in het bestand zelf: de
   uitsnede raakt de linkerrand van het kader vanaf 71,5% van de hoogte en de
   rechterrand vanaf 56,6%, en vanaf 70% is elke beeldrij over de volle breedte
   gevuld. Het zijn dus drie rechte sneden en niet een. Nu het portret groter is
   en lager staat, vallen die sneden bovendien buiten het blauw en steken de
   schouders het wit in.

   HET MASKER VOLGT NU DE CIRKEL IN PLAATS VAN DE BEELDRAND. Twee lagen, en CSS
   telt maskerlagen standaard bij elkaar op (mask-composite: add), dus dit is een
   vereniging en geen doorsnede:

   1. een ronde laag die precies op de ring ligt: vol tot 82% van de straal, weg
      op 100%. Alles wat buiten het blauw zou vallen lost erin op, aan alle
      kanten tegelijk.
   2. een strook over de bovenste 34% die daar weer alles vrijgeeft, want laag 1
      knabbelt anders aan de kruinen van beide hoofden. Uitgerenderd zonder die
      strook: de haardos lost bovenaan op in het blauw.

   De maten van laag 1 zijn die van de ring, uitgedrukt in het beeldkader: het
   kader is 4:5, dus een straal van 50% van de breedte is 40% van de hoogte, en
   het midden op 60% van de hoogte valt samen met top:60% van .vs-ring. */
.vs-wie__medaillon .vs-beeldvlak--portret {
  -webkit-mask-image:
    radial-gradient(50% 40% at 50% 60%, #000 82%, transparent 100%),
    linear-gradient(to bottom, #000 34%, transparent 46%);
  mask-image:
    radial-gradient(50% 40% at 50% 60%, #000 82%, transparent 100%),
    linear-gradient(to bottom, #000 34%, transparent 46%);
}

@media (prefers-reduced-motion: reduce) {
  .vs-wie__portret {
    animation: none;
  }

  /* De apparaatgroep: geen zweving (06-09-2026). */
  .vs-laag img {
    animation: none;
  }

  /* De mockups: geen onthulling, geen zweving, geen hover-zoom (06-09-2026). */
  .vs-zweef,
  .vs-zweef img,
  .vs-zweef-klaar .vs-zweef,
  .vs-zweef-klaar .vs-zweef img,
  .vs-tegel__vlak--beeld img,
  .vs-tegel:hover .vs-tegel__vlak--beeld img,
  .vs-tegel:hover .vs-tegel__vlak--mockup img,
  .vs-tegel:hover .vs-tegel__link .vs-tegel__vlak--mockup {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}

.vs-beeldvlak--portret img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vs-wie__portret .vs-mono {
  margin-top: 16px;
}

.vs-wie__kop {
  margin: 0;
  font-family: var(--vs-kop);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: none;
  text-wrap: pretty;
  color: var(--vs-ink);
}

.vs-wie__tweede {
  color: var(--vs-kop2);
}

/* Twee dingen die alleen de homepage gebruikt (handoff 28-08-2026). De mono-regel
   boven de kop, en de ruimere kantlijn: op Over ons volgt er een eigen sectie met
   eigen padding, op home staat het pakkettenblok er direct onder. Beide hangen aan
   het label-attribuut van [vesmo_wie]; zie inc/pagina-secties.php. */
.vs-wie--gelabeld {
  padding: 120px var(--vs-kant);
}

.vs-wie__label {
  margin: 0 0 26px;
  color: var(--vs-accent);
}

.vs-wie__alinea {
  margin: var(--vs-alinea) 0 0;
  max-width: 560px;
  font-family: var(--vs-body);
  font-size: 18px;
  font-weight: 400;
  line-height: var(--vs-regel);
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
  color: var(--vs-tekst);
}

.vs-wie__alinea + .vs-wie__alinea {
  margin-top: 16px;
}

/* --- de beloftes naast het portret (02-09-2026) ----------------------------

   Kwam van [vesmo_beloftes], dat een eigen rij was met drie claims naast
   elkaar. Dat was de tweede van vier drielingen achter elkaar op de homepage.
   Hier is het een haarlijnenlijst van twee regels: label links, uitleg rechts,
   een lijn eronder. Dezelfde vorm als de dienstenlijst, dus geen nieuw patroon.

   Een dl en geen ul, want dit zijn paren: de kop noemt de belofte en de tekst
   legt hem uit.                                                             */

.vs-wie__beloftes {
  margin: 44px 0 0;
}

.vs-wie__belofte {
  display: grid;
  grid-template-columns: minmax(0, 20ch) 1fr;
  gap: 0 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--vs-line);
}

.vs-wie__belofte:first-child {
  border-top: 1px solid var(--vs-line);
}

.vs-wie__belofte-kop {
  margin: 0;
  font-family: var(--vs-kop);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-ink);
}

.vs-wie__belofte-tekst {
  margin: 0;
  font-family: var(--vs-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
  color: var(--vs-muted);
}

.vs-cijfers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 44px;
  background-color: var(--vs-line);
}

.vs-cijfer {
  padding: 24px;
  background-color: #ffffff;
}

/* Vier vakken in plaats van drie, voor het resultaatblok op een case. Alles
   eromheen blijft gelijk: dezelfde 1px gap over een lijnkleurige achtergrond,
   dus de haarlijnen lopen door zoals bij de drie op /over-ons/. Onder 600px
   valt hij mee terug op een kolom, want die media query pakt .vs-cijfers. */
.vs-cijfers--vier {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vs-cijfer:first-child {
  padding-left: 0;
}

.vs-cijfer:last-child {
  padding-right: 0;
}

/* Cijfers in een hoofdstuk op /diensten/ (06-09-2026): onder de alinea's, in
   de breedte van de tekstkolom; op inkt de omgekeerde variant. */
.vs-kapittel__tekst .vs-cijfers {
  max-width: 580px;
  margin-top: 48px;
}

.vs-kapittel--inkt .vs-cijfers {
  background-color: var(--vs-hair-inkt);
}

.vs-kapittel--inkt .vs-cijfer {
  background-color: var(--vs-inkt);
}

/* Drie klassen diep, anders wint ".vs-kapittel--inkt .vs-kapittel__tekst p"
   van het thema (gemeten: .62 wit op het cijfer). */
.vs-kapittel--inkt .vs-kapittel__tekst .vs-cijfer__waarde {
  color: #ffffff;
}

.vs-kapittel--inkt .vs-kapittel__tekst .vs-cijfer .vs-mono {
  color: var(--vs-mono-inkt);
}

.vs-cijfer__waarde {
  margin: 0;
  font-family: var(--vs-kop);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-ink);
}

.vs-cijfer .vs-mono {
  margin-top: 10px;
}

/* --- Over ons: de vijf stappen -------------------------------------------- */

.vs-stappen {
  padding: 160px var(--vs-kant) 0;
}

.vs-stappen__rij {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 80px;
  align-items: start;
}

/* Locomotive doet het meeschuiven via data-scroll-sticky; deze regel is het
   vangnet voor als smooth scroll uit staat of het script niet laadt. Zonder
   Locomotive werkt position:sticky gewoon, en met Locomotive doet hij niets
   omdat de pagina zelf niet scrolt. */
.vs-stappen__zij {
  position: sticky;
  top: 120px;
}

.vs-stappen__kop {
  margin: 20px 0 0;
  font-family: var(--vs-kop);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: none;
  text-wrap: pretty;
  color: var(--vs-ink);
}

.vs-stappen__intro {
  margin: 18px 0 0;
  max-width: 380px;
  font-family: var(--vs-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
  color: var(--vs-tekst);
}

.vs-stap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 44px;
  padding: 52px 0;
  border-top: 1px solid var(--vs-line);
}

.vs-stap:last-child {
  border-bottom: 1px solid var(--vs-line);
}

/* Het reuzennummer is achtergrond, geen tekst die gelezen moet worden: fel zou
   het van de titel afsnoepen. Het stond tot 12-09-2026 op
   color-mix(in srgb, var(--vs-accent) 20%, transparent), en dat gaf op wit een
   lichtpaars (#d3d2ff) dat verder nergens op de site voorkomt. Daan zag dat het
   niet bij de rest hoorde en hij had gelijk: het palet telt zes kleuren en dit
   was er een zevende.

   Nu de lijnkleur. Dat is per definitie in het palet, het is exact de tint van
   elke scheidingslijn op de site, en dezelfde lijn loopt hier boven en onder
   elke stap (.vs-stap, hierboven). Nummer en lijn horen daarmee zichtbaar bij
   elkaar in plaats van elkaar te beconcurreren. */
.vs-stap__nr {
  margin: 0;
  font-family: var(--vs-kop);
  font-size: 96px;
  font-weight: 700;
  line-height: .8;
  letter-spacing: -0.04em;
  text-transform: none;
  color: var(--vs-line);
}

.vs-stap__titel {
  margin: 0;
  font-family: var(--vs-kop);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--vs-ink);
}

.vs-stap__body {
  font-size: 18px;
  line-height: var(--vs-regel);
}

.vs-stap__body p {
  margin: 20px 0 0;
  max-width: 560px;
  font-family: var(--vs-body);
  font-size: 18px;
  font-weight: 400;
  line-height: var(--vs-regel);
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
  color: var(--vs-tekst);
}

/* --- Contact -------------------------------------------------------------- */

.vs-contact {
  padding: 120px var(--vs-kant) 0;
}

.vs-contact__rij {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 80px;
  align-items: start;
  padding-top: 34px;
  border-top: 1px solid var(--vs-line);
}

/* Het formulier blijft van contact-form-7; alleen de opmaak komt hiervandaan.
   Daarom hangt alles aan .vs-form en niet aan de klassen die de plugin zelf
   genereert: die veranderen bij een update. */
.vs-form {
  max-width: 720px;
}

.vs-form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.vs-form .vs-form__paar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
}

.vs-form label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  font-family: var(--vs-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-muted);
}

.vs-form .wpcf7-form-control-wrap {
  display: block;
}

.vs-form input[type="text"],
.vs-form input[type="email"],
.vs-form input[type="tel"],
.vs-form textarea {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--vs-rand);
  border-radius: 0;
  background: none;
  font-family: var(--vs-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--vs-ink);
  outline: none;
  transition: border-color .3s ease;
}

.vs-form textarea {
  line-height: 1.55;
  resize: vertical;
}

.vs-form input:focus,
.vs-form textarea:focus {
  border-bottom-color: var(--vs-accent);
}

.vs-form ::placeholder {
  color: var(--vs-soft);
  opacity: 1;
}

/* "WAAR KUNNEN WE BIJ HELPEN" IS EEN KEUZELIJST, NIET MEER VIJF PILLEN
   (12-09-2026, besluit Daan). Hier stond de chips-opmaak: contact-form-7 zet bij
   een checkbox met use_label_element een <label> om input en tekst heen, en die
   label werd de pil. Dat werkte, maar met vijf opties brak de rij op een
   tekstkolom van 600px altijd op dezelfde plek af en hing "Bel me terug" alleen
   op een tweede regel. De hele blok hing bovendien aan .wpcf7-checkbox en
   .wpcf7-list-item, dus bij een [select] is er niets van te hergebruiken.

   Het verschil om te weten: een keuzelijst is één antwoord. Wie meer kwijt wil,
   schrijft het in het berichtveld eronder; dat staat er direct naast.

   appearance:none met een eigen pijl, want de systeempijl van Chrome staat als
   een grijs driehoekje in een vakje en de rest van dit formulier heeft geen
   vakjes maar onderlijnen. De pijl is een inline svg in de achtergrond zodat er
   geen extra verzoek bij komt; currentColor kan niet in een data-url, dus de
   kleur staat er hard in als de inkt van het palet. */
.vs-form select {
  width: 100%;
  padding: 10px 26px 10px 0;
  border: 0;
  border-bottom: 1px solid var(--vs-rand);
  border-radius: 0;
  background-color: transparent;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1.5 6 6.5 11 1.5" fill="none" stroke="%230a0a0a" stroke-width="1.5"/></svg>');
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px 8px;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--vs-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--vs-ink);
  cursor: pointer;
  outline: none;
  transition: border-color .3s ease;
}

.vs-form select:focus {
  border-bottom-color: var(--vs-accent);
}

/* De eerste regel is de uitnodiging en geen antwoord; contact-form-7 geeft die
   een lege waarde, dus hij is met :invalid niet te pakken (het veld is niet
   verplicht). Vandaar de matchende optie-selector op value="".

   Twee regels, want ze doen iets anders: de eerste kleurt die regel in de
   uitgeklapte lijst, de tweede kleurt het dichtgeklapte veld zolang er niets
   gekozen is. Zonder die tweede staat er zwarte tekst in een veld waar nog geen
   antwoord in zit, en dan leest het als ingevuld terwijl de placeholders van de
   velden erboven grijs zijn. Browsers zonder :has() houden de inkt; dat is
   lelijker maar niet stuk. */
.vs-form select option[value=""] {
  color: var(--vs-soft);
}

.vs-form select:has(option[value=""]:checked) {
  color: var(--vs-soft);
}

.vs-form .vs-form__voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: 6px;
}

.vs-form input[type="submit"],
.vs-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 55px;
  padding: 0 35px;
  border: 1px solid var(--vs-ink);
  border-radius: var(--vs-radius-pill);
  background-color: var(--vs-ink);
  color: #ffffff;
  cursor: pointer;
  font-family: var(--vs-ui);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color .25s ease, color .25s ease;
}

.vs-form input[type="submit"]:hover,
.vs-form .wpcf7-submit:hover {
  background-color: transparent;
  color: var(--vs-ink);
}

.vs-form .vs-form__belofte {
  margin: 0;
  font-family: var(--vs-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--vs-muted);
}

.vs-form .wpcf7-not-valid-tip {
  margin-top: 8px;
  font-family: var(--vs-mono);
  font-size: 12px;
  color: var(--vs-accent);
}

.vs-form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius);
  font-family: var(--vs-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--vs-ink);
}

/* --- Contact: de rechterkolom --------------------------------------------- */

/* Het portret bovenaan de zijkolom. Smal gehouden: dit is een gezicht bij een
   formulier, geen sectiebeeld. Op 240px blijft het naast het formulier staan
   zonder de stappen eronder weg te duwen. De uitsnede zelf is transparant, dus
   het gebroken wit van .vs-beeldvlak is hier de achtergrond en niet een rand
   om een foto. */
.vs-contactzij__portret {
  max-width: 240px;
  margin-bottom: 34px;
}

.vs-contactzij__portret .vs-mono {
  margin-top: 14px;
}

.vs-contactzij__kop {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--vs-line);
}

.vs-contactzij__mail {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--vs-kop);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
  text-decoration: none;
  color: var(--vs-ink);
}

.vs-contactzij__mail:hover {
  color: var(--vs-accent);
}

.vs-contactzij__adres {
  margin: 10px 0 0;
  font-family: var(--vs-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-ink);
}

.vs-contactzij__label {
  margin-top: 34px;
}

.vs-stapjes {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.vs-stapjes li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--vs-line);
  font-family: var(--vs-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-tekst);
}

.vs-stapjes li:last-child {
  border-bottom: 1px solid var(--vs-line);
}

.vs-stapjes .vs-mono {
  line-height: 1.6;
}

.vs-kijk__lijst {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.vs-kijk__lijst a {
  font-family: var(--vs-ui);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
  text-decoration: none;
  color: var(--vs-ink);
}

.vs-kijk__lijst a:hover {
  color: var(--vs-accent);
}

/* --- kleinere schermen ---------------------------------------------------- */

@media only screen and (max-width: 1199px) {
  .vs-blok__rij,
  .vs-stappen__rij {
    gap: 50px;
  }

  .vs-werkcase__rij,
  .vs-contact__rij,
  .vs-wie__rij {
    gap: 50px;
  }
}

@media only screen and (max-width: 991px) {
  .vs-werkcase__rij,
  .vs-tegels__raster,
  .vs-blok__rij,
  .vs-stappen__rij,
  .vs-wie__rij,
  .vs-contact__rij,
  .vs-punten--raster {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  /* Zonder tweede kolom heeft meeschuiven geen zin: het label staat dan boven
     de stappen en zou over de tekst heen blijven hangen. */
  .vs-stappen__zij {
    position: static;
  }

  /* In een kolom is het medaillon zo breed als de pagina. Op 768px werd dat
     704x880 en dan is de sectie alleen nog maar portret. Deze grens houdt hem
     op de maat die hij vóór de vierde ronde had (549x686 op 768px); de groei
     naar 100% is voor de tweekolomsopmaak bedoeld, waar de kolom 520 is. */
  .vs-wie__medaillon {
    max-width: 560px;
  }

  .vs-gegevens__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vs-gegeven:nth-child(3) {
    padding-left: 0;
  }

  .vs-gegeven:nth-child(2) {
    padding-right: 0;
  }

  .vs-werkcase,
  .vs-tegels,
  .vs-blok,
  .vs-figuur,
  .vs-verder,
  .vs-wie,
  .vs-stappen {
    padding-top: 100px;
  }

  .vs-blok--inkt {
    margin-top: 100px;
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .vs-tegels {
    padding-bottom: 100px;
  }

  .vs-tegel--breed,
  .vs-tegel--half,
  .vs-tegel--smal {
    grid-column: 1 / -1;
  }

  .vs-werkcase__titel {
    font-size: 40px;
  }

  .vs-tegel__titel,
  .vs-blok__titel,
  .vs-stappen__kop {
    font-size: 30px;
  }

  .vs-wie__kop {
    font-size: 34px;
  }

  .vs-verder__titel {
    font-size: 34px;
  }

  .vs-form .vs-form__paar {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media only screen and (max-width: 599px) {
  .vs-gegevens__raster {
    grid-template-columns: 1fr;
  }

  /* DRIE CIJFERS BLIJVEN NAAST ELKAAR (06-09-2026). Tot vandaag viel .vs-cijfers
     hier terug op een kolom: drie korte waarden ("6", "23", "mei 2026") als
     drie hoge vakken onder elkaar, gezien op de VUSK-case op 390. Naast elkaar
     met een kleinere waarde past het; alleen de variant met vier vakken gaat
     nog op een kolom, want vier naast elkaar breekt de waarde af. */
  .vs-cijfers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vs-cijfers--vier {
    grid-template-columns: 1fr;
  }

  .vs-cijfer {
    padding: 18px 10px;
  }

  .vs-cijfers--vier .vs-cijfer {
    padding-left: 0;
    padding-right: 0;
  }

  .vs-cijfer__waarde {
    font-size: 20px;
    letter-spacing: -0.01em;
  }

  /* Twee kolommen van 20ch passen niet op een telefoon; label boven tekst. */
  .vs-wie__belofte {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .vs-gegeven {
    padding-left: 0;
    padding-right: 0;
  }

  .vs-stap {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .vs-stap__nr {
    font-size: 64px;
  }

  .vs-werkcase__titel,
  .vs-klantband__titel {
    font-size: 40px;
  }

  .vs-projectband {
    gap: 20px;
  }
}

/* --- de verzendknop van het thema, binnen ons formulier ------------------- */

/* WAT HIER GEBEURT. Stap 20 (20-formulieren-themastijl.php) vervangt de
   submit-knop van contact-form-7 door de border-btn van Tumar, verpakt in
   <div class="twelve-columns text-center padding-top-90">. Die wrapper is
   gemaakt voor een formulier over de volle breedte: hij centreert de knop en
   zet er 90px lucht boven. In de rij uit de handoff staat de knop links, naast
   de belofte-regel, dus die drie eigenschappen moeten hier weg.

   Niet in stap 20 zelf oplossen: dat script bedient ook het offerteformulier,
   waar de knop wél gecentreerd hoort. Vandaar een override die alleen binnen
   .vs-form__voet geldt. */
/* flex-basis, niet width. Het raster van het thema zet op .twelve-columns
   flex: 0 1 100%; een width:auto laat die basis staan en dan duwt de knop de
   belofte-regel alsnog naar de volgende regel. Gemeten, niet geraden. */
.vs-form__voet .twelve-columns {
  flex: 0 0 auto;
  width: auto;
  padding-top: 0;
  text-align: left;
}

/* De border-btn staat in de huisstijl op de blauwe pil (blok 13 van
   vesmo-style.css). Het ontwerp vraagt hier zwart dat bij hover omkeert naar
   een omrande knop; dat is dezelfde knop als op het blauwe slotvlak, alleen
   andersom. */
.vs-form__voet .border-btn {
  min-width: 220px;
  height: 55px;
  border: 1px solid var(--vs-ink);
  background-color: var(--vs-ink);
  transition: background-color .25s ease;
}

.vs-form__voet .border-btn:hover {
  background-color: transparent;
}

.vs-form__voet .border-btn__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 35px;
  transition: color .25s ease;
}

.vs-form__voet .border-btn:hover .border-btn__inner {
  color: var(--vs-ink) !important;
}

/* Contact-form-7 wikkelt elk veld in een <span class="wpcf7-form-control-wrap">.
   Die span staat op inline en breekt daarmee het label-grid; hij moet meegroeien
   met het veld eronder. */
.vs-form .wpcf7-form-control-wrap {
  width: 100%;
}

/* Twee dingen die het thema over het formulier heen zet en die hier weg moeten.

   1. text-transform: capitalize op de velden. Tumar doet dat om labels netjes te
      krijgen, maar het raakt ook de placeholder, en dan staat er "Een Paar
      Regels Zijn Genoeg". Gemeten op de eerste afdruk van 28-08.
   2. Het lettertype van de veldnamen. Die staan in een <span> binnen de <label>,
      en het thema geeft die span zijn eigen font. De regel op .vs-form label
      erft daar niet doorheen, dus de span moet het zelf zeggen. */
.vs-form input,
.vs-form select,
.vs-form textarea,
.vs-form ::placeholder {
  text-transform: none;
}

.vs-form label > span:first-child {
  font-family: var(--vs-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-muted);
}

/* -------------------------------------------------------------------------
   TIKDOELEN OP EEN TELEFOON (01-09-2026)

   Zie het slotblok van vesmo-style.css voor het waarom. Hier staan de
   aanraakbare dingen die op de pagina's zitten in plaats van in de voettekst.
   Alles onder 1024px, letters blijven even groot; zie daar ook waarom de grens
   op 1023 ligt en niet op 767.
   ------------------------------------------------------------------------- */

@media only screen and (max-width: 1023px) {
  /* 22px + 2x11 = 44. LET OP: de onderstreping van deze link is een
     background-image die op 1.15em vanaf de bovenkant van de padding-box staat.
     Zonder de correctie hieronder zou de streep met de padding mee omlaag
     schuiven en boven de tekst uitkomen in plaats van eronder. */
  .vs-link {
    padding: 11px 0;
    background-position: 0 calc(1.15em + 11px);
  }

  /* Stond op een vaste 38px. */
  .vs-chip {
    height: 44px;
  }

  /* 26px + 2x9 = 44. Deze staan onder elkaar in een lijst, dus inline-block
     verandert niets aan de opmaak. */
  .vs-kijk__lijst a {
    display: inline-block;
    padding: 9px 0;
  }

  /* 31px + 2x7 = 45. Is al inline-block; de margin-top van 10px blijft staan. */
  .vs-contactzij__mail {
    padding: 7px 0;
  }
}

/* -------------------------------------------------------------------------
   LEESTEKST (01-09-2026)

   De alinea's op /diensten/ renderden op 14,4px op een telefoon en op 15px op
   desktop, terwijl er 17px stond voorgeschreven. Op 01-09 is dat eerst alleen
   onder 1024px gerepareerd, met de aantekening dat het op desktop net zo goed
   speelde en buiten die ronde viel.

   Die aantekening is opgelost: de maat staat nu op .vs-kapittel__tekst zelf,
   hierboven bij de rest van het blok, en geldt daarmee op elke breedte. Deze
   media query deed daarna hetzelfde als de basisregel en is weg.

   Nagemeten op 01-09-2026: 17px op 1440 breed en 17px op 390 breed. */

/* --- Formulier: de honingpot (06-09-2026) ---------------------------------

   Buiten beeld en niet display:none: een bot die alleen zichtbare velden
   overslaat, slaat een display:none-veld óók over. Zie inc/formulier-spam.php. */
.vs-val {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* JURIDISCHE TEKST (08-09-2026): privacyverklaring en algemene voorwaarden.
   Gewone lopende tekst in een leeskolom. Maat en regelafstand staan op de
   container en niet op de p (valkuil 30); de koppen zijn h2 na de h1 van de
   paginakop, met lucht erboven zodat de blokken leesbaar uit elkaar staan. */
/* De sectie om de juridische tekst (08-09-2026): dezelfde kantlijn als elke
   andere pagina en 110 naar de kop, zoals .vs-notitie en de naad op het
   blogoverzicht; 80 onder 991 zoals de paginakop zelf. */
.vs-juridisch-sectie {
  padding: 110px var(--vs-kant);
  background-color: var(--vs-wit);
}

@media only screen and (max-width: 991px) {
  .vs-juridisch-sectie {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.vs-juridisch {
  max-width: 640px;
  font-family: var(--vs-body);
  font-size: 18px;
  line-height: var(--vs-regel);
  color: var(--vs-ink);
}

.vs-juridisch h2 {
  margin: 56px 0 14px;
  font-family: var(--vs-kop);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--vs-ink);
}

.vs-juridisch h2:first-child {
  margin-top: 0;
}

.vs-juridisch p {
  margin: 0 0 var(--vs-alinea);
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.vs-juridisch p:last-child {
  margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
  .vs-juridisch {
    font-size: 17px;
  }

  .vs-juridisch h2 {
    margin-top: 44px;
    font-size: 22px;
  }
}