/* =========================================================================
   Vesmo homepage. Herontwerp 30-08-2026.

   Negen secties in één volgorde: kopbalk, hero, selected work, diensten,
   werkwijze, beloftes, persoonlijk contact, pakketten, FAQ, slotvlak. De markup
   staat in inc/home-secties.php, het gedrag in assets/vesmo-home.js.

   DRIE REGELS DIE HET HELE BESTAND DRAGEN.

   1. Eén accent. Er is geen dienstenpalet meer; wat kleur droeg, draagt nu het
      blauwe vierkant .vs-blok. Dat staat naast sectienummers, vóór links en in
      opsommingen, en is overal even groot.
   2. Drie achtergronden. Wit voor hero en werk, inkt voor werkwijze en
      beloftes, blauw voor het slotvlak in footer.php. Meer wisselingen maken
      van een pagina een verzameling losse onderdelen. Het gebroken wit is per
      30-08-2026 (derde ronde) van de homepage verdwenen: de werksectie werd wit
      zodat de witte kaarten met haarlijn daar hetzelfde doen als de
      pakketkaarten, en de hero draagt zijn papier alleen nog als terugval
      achter de video.
   3. Beweging blijft klein. Wat er beweegt is een fade of een slide bij
      binnenkomst, tussen 400 en 600 ms. Uitzondering sinds 30-08-2026: de
      werkslider is wél gepind en hangt wél aan de scrollpositie. Die staat
      daarom apart in vesmo-strip.css, met zijn eigen aansturing.

   De typografische schaal staat in blok 3 van vesmo-style.css; hier staan alleen
   de maten die per sectie afwijken.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Gedeeld
   ------------------------------------------------------------------------- */

/* Het blauwe vierkant. Dit is het enige herkenningsteken van de site, dus het
   is overal 8px, altijd het accent, en het schuift nergens mee.

   PADDING EN BOX-SIZING STAAN ER NIET VOOR NIETS. Het thema zet padding op
   spans binnen een verwijzing; gemeten op 30-08-2026 kwam dit vierkant daardoor
   op 120x118px uit terwijl de computed width gewoon 8px was. Met content-box
   telt die padding er bovenop. Allebei expliciet terugzetten dus. */
.vs-blok {
  flex: 0 0 auto;
  display: inline-block;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--vs-accent);
}

/* De knop. Gevuld is inkt, kaal is een rand; blauw is voorbehouden aan de
   offerteknop in de kopbalk en aan het slotvlak. */
.vs-hknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 220px;
  height: 56px;
  padding: 0 32px;
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius-pill);
  background-color: transparent;
  font-family: var(--vs-ui);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--vs-ink);
  transition: background-color var(--vs-duur) var(--vs-ease),
              color var(--vs-duur) var(--vs-ease),
              border-color var(--vs-duur) var(--vs-ease);
}

.vs-hknop:hover,
.vs-hknop:focus-visible {
  background-color: var(--vs-inkt);
  border-color: var(--vs-inkt);
  color: var(--vs-wit);
}

.vs-hknop--gevuld {
  background-color: var(--vs-inkt);
  border-color: var(--vs-inkt);
  color: var(--vs-wit);
}

.vs-hknop--gevuld:hover,
.vs-hknop--gevuld:focus-visible {
  background-color: transparent;
  border-color: var(--vs-line);
  color: var(--vs-ink);
}

/* De tekstverwijzing: vierkant, tekst, pijl. De pijl schuift 6px; dat is de
   enige beweging die een verwijzing hier maakt. */
.vs-tlink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--vs-ui);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--vs-ink);
  transition: color var(--vs-duur) var(--vs-ease);
}

/* De onderstreping groeit van links uit, en dat is geen text-decoration: die
   springt aan en uit. Een achtergrondverloop van 1px hoog dat van 0% naar 100%
   breedte gaat, zoals in de handoff (README r. 131). Alleen op de tekst zelf en
   niet op het vierkantje of de pijl ervoor en erna. */
.vs-tlink__woord {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 1.25em;
  transition: background-size .6s cubic-bezier(.165, .84, .44, 1);
}

.vs-tlink:hover .vs-tlink__woord,
.vs-tlink:focus-visible .vs-tlink__woord {
  background-size: 100% 1px;
}

.vs-tlink__pijl {
  display: inline-block;
  transition: transform var(--vs-duur) var(--vs-ease);
}

.vs-tlink:hover .vs-tlink__pijl,
.vs-tlink:focus-visible .vs-tlink__pijl {
  transform: translateX(6px);
}

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

/* Beeld. Vier verhoudingen, hoogstens 8px afronding, en geen schaduw: die
   hoorde bij het vorige ontwerp en maakte van elk beeld een zwevende kaart. */
.vs-beeldvlak {
  position: relative;
  overflow: hidden;
  border-radius: var(--vs-radius);
  background-color: var(--vs-papier);
  box-shadow: none;
}

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

.vs-beeldvlak--breed  { aspect-ratio: 16 / 9; }
.vs-beeldvlak--case   { aspect-ratio: 16 / 10; }
.vs-beeldvlak--klein  { aspect-ratio: 4 / 3; }

/* De plek waar nog geen beeld is. Een haarlijn en een mono-regel die zegt wat
   er komt: dat leest als een plek die nog gevuld wordt, en niet als een
   kapotte afbeelding. Geen stockbeeld, dat blijft de regel. */
.vs-beeldvlak.is-leeg {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vs-line);
  background-color: var(--vs-papier);
}

.vs-beeldvlak__wacht {
  font-family: var(--vs-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-tekst);
}

/* De sectiekop: vierkant, nummer, naam, en rechts een notitie. */
/* De onderlijn van de sectiekop tekent zich in van links naar rechts. Dat kan
   niet met border-bottom, want een rand valt niet te schalen; vandaar een
   ::after van 1px die scaleX doet. De regel .js-lat is de failsafe: die zet
   vesmo-home.js, en zonder javascript staat de lijn dus gewoon vol. */
.vs-skop {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 40px;
  padding-bottom: 32px;
}

.vs-skop::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--vs-line);
  transform-origin: left center;
}

.vs-skop--inkt::after {
  background-color: var(--vs-hair-inkt);
}

.vs-skop.js-lat::after {
  transform: scaleX(0);
}

.vs-skop.js-lat.is-getekend::after {
  transform: none;
  transition: transform 1.15s var(--vs-ease);
}

/* -------------------------------------------------------------------------
   De maatlat boven de werkwijze

   Uit de handoff. De lijn tekent zich in, daarna zakken de merkstreepjes erin,
   200ms na elkaar. In de handoff zijn die streepjes groen; hier het accent op
   inkt, want het palet blijft op zes.
   ------------------------------------------------------------------------- */

.vs-maatlat {
  position: relative;
  height: 26px;
  margin-top: 40px;
}

.vs-maatlat__lijn {
  position: absolute;
  left: 0;
  right: 0;
  top: 13px;
  height: 1px;
  background-color: var(--vs-hair-inkt);
  transform-origin: left center;
}

.vs-maatlat__streep {
  position: absolute;
  top: 6px;
  width: 1px;
  height: 15px;
  background-color: var(--vs-accent);
  transform-origin: top center;
}

.vs-maatlat.js-lat .vs-maatlat__lijn {
  transform: scaleX(0);
}

.vs-maatlat.js-lat .vs-maatlat__streep {
  transform: scaleY(0);
}

.vs-maatlat.js-lat.is-getekend .vs-maatlat__lijn {
  transform: none;
  transition: transform 1.15s var(--vs-ease);
}

.vs-maatlat.js-lat.is-getekend .vs-maatlat__streep {
  transform: none;
  transition: transform .5s var(--vs-ease);
}

.vs-skop__links {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  font-family: var(--vs-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-tekst);
}

.vs-skop__links .vs-blok {
  align-self: center;
}

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

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

.vs-skop .vs-mono {
  margin: 0;
  flex: 0 0 auto;
}

.vs-skop--inkt {
  border-bottom-color: var(--vs-hair-inkt);
}

.vs-skop--inkt .vs-skop__links {
  color: var(--vs-mono-inkt);
}

.vs-skop--inkt .vs-skop__naam {
  color: var(--vs-wit);
}

/* HET NUMMER IS WIT (02-09-2026). Het stond in het accent op inkt; toen die
   tint werd afgeschaft zou het op #251cff uitkomen en dat is 2,53:1 voor mono
   van 13px. Nu --vs-mono-inkt, hetzelfde wit als de rest van die regel, 4,50:1.
   Het blauw zit in het blokje ernaast, en dat scheelt ook een kleur binnen één
   label.

   DEZE REGEL MOET BLIJVEN STAAN. Weghalen lijkt netter, want .vs-skop__links
   hierboven geeft al --vs-mono-inkt mee, maar .vs-skop__nr zet in zijn eigen
   basisregel var(--vs-accent) en die wint van overerving. Gemeten: zonder deze
   regel komt het nummer op 2,53:1 uit. Zelfde val als bij
   .vs-kapittel--inkt .vs-kapittel__nr in vesmo-paginas.css. */
.vs-skop--inkt .vs-skop__nr {
  color: var(--vs-mono-inkt);
}

.vs-skop--inkt .vs-blok {
  background-color: var(--vs-accent);
}

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

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

/* Gebroken wit, en de sectie loopt door tot de rand: de hero en selected work
   vormen samen het eerste van de drie vlakken. */
.vs-hero {
  padding: 96px var(--vs-kant) 0;
  background-color: var(--vs-papier);
}

/* Links uitgelijnd over tien van de twaalf kolommen. De kop is het beeld van
   deze pagina, dus hij mag de ruimte hebben die het ontwerp vraagt. */
.vs-hero__kop {
  max-width: 83.333%;
  margin: 0;
  font-family: var(--vs-kop);
  font-size: clamp(44px, 7.8vw, 112px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -0.035em;
  text-transform: none;
  text-wrap: balance;
  color: var(--vs-ink);
}

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

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

.vs-hero__acties {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 40px;
}

.vs-hero__figuur {
  margin: 88px auto 0;
}

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

/* -------------------------------------------------------------------------
   Hero, schermvullende variant (30-08-2026, tweede herontwerp)

   Video als achtergrondlaag over de volle vensterhoogte, tekst eroverheen.
   Patroon overgenomen van de videokop van het moederthema: een absolute
   medialaag zoals .video-bg-box en een laag op 100vh zoals
   .flex-min-height-100vh (tumar/includes/css/style.css r. 1280-1286, 6796-6812).

   100svh en niet 100vh: op een telefoon rekent vh met de adresbalk mee, en dan
   staat de onderste knop onder de vouw zolang die balk zichtbaar is.
   ------------------------------------------------------------------------- */

.vs-hero--vol {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: 0 var(--vs-kant);
  overflow: hidden;
  /* Gebroken wit en niet inkt. Dit is wat je ziet als de video niet laadt, en de
     tekst erop is donker; op inkt zou dat zwart op zwart zijn. Stond tussen de
     twee rondes van 30-08 wél op inkt, want toen was de tekst wit. */
  background-color: var(--vs-papier);
}

.vs-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.vs-hero__inhoud {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 120px 0 100px;
}

/* DE WAAS ONDERAAN DE HERO (30-08-2026, vierde ronde).

   Was een dekkend wit vlak met een border-radius als vorm. Daan wil hem
   doorzichtig, rond de 30%, en zonder de strakke lijn waar hij ophield. Dat is
   niet met een vorm op te lossen: elke vorm heeft een rand. Het is nu een
   radiaal verloop en verder niets, want een verloop heeft nergens een rand.

   DE BERG KOMT UIT DE STAND VAN HET MIDDELPUNT. Dat ligt linksonder buiten het
   beeld (8% 128%), dus de dekking neemt af naar boven en naar rechts. Hoog aan
   de linkerkant waar de tekst staat, weglopend naar rechts waar de video open
   moet blijven. Beide stralen en het middelpunt staan in procenten van het vak,
   dus het veld is gelijkvormig op elk formaat: een regel volstaat, ook op een
   telefoon. De aparte mobiele variant die hier stond is daarom vervallen.

   WAAROM DE ONDERRAND TOCH VOL WIT IS. De hero grenst onderaan aan .vs-strip en
   die is wit. Een waas die daar op 30% blijft steken geeft precies de naad die
   deze waas moest opheffen. De eerste stop staat daarom op 78% van de straal:
   over de hele onderrand, van links tot rechts, is de dekking 1. Langs die rand
   loopt de genormaliseerde straal van 0,36 links via 0,47 in het midden naar
   0,75 rechts, dus alle drie zitten ze binnen die 78%.

   WAT HET KOST, GEMETEN. De intro staat in --vs-tekst (#6b6b6b) en haalt zelfs
   op zuiver wit niet meer dan 5,3:1; met een waas van 30% over een donker
   videobeeld zakt de eerste regel ver daaronder. De gemeten waarden staan in
   HANDOVER.md. Dat is de prijs van een doorzichtige waas op grijze tekst en het
   is een bewuste keuze; met de intro in --vs-ink zou hetzelfde beeld ruim boven
   de norm blijven. */
.vs-hero__boog {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(140% 78% at 8% 128%,
      var(--vs-wit) 0%,
      var(--vs-wit) 78%,
      rgba(255, 255, 255, .34) 90%,
      rgba(255, 255, 255, 0) 101%);
  pointer-events: none;
}

/* De kop mag niet de volle breedte pakken: dan loopt hij door tot in het gebied
   waar de video zijn beeldmateriaal heeft en wordt het rommelig. Deze grens hoort
   bij de schermvullende opzet en niet bij een waas. */
.vs-hero--vol .vs-hero__kop {
  max-width: 15ch;
}

/* DE HULS VOOR DE INTOCHT. overflow:hidden knipt op de rand van de padding-box,
   dus de padding-bottom is precies wat de staarten van de j en de g redt bij
   line-height .9. De negatieve marge haalt die ruimte weer uit de opmaak, zodat
   de regelafstand niet verandert. Valkuil 10 van export/site/CLAUDE.md. */
.vs-hero__huls {
  display: block;
  overflow: hidden;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}

.vs-hero__regel {
  display: block;
}

@media only screen and (max-width: 1023px) {
  .vs-hero--vol .vs-hero__kop {
    max-width: none;
  }

  .vs-hero__inhoud {
    padding: 108px 0 80px;
  }
}

/* -------------------------------------------------------------------------
   Selected work
   ------------------------------------------------------------------------- */

.vs-selectie {
  padding: var(--vs-sectie) var(--vs-kant);
  background-color: var(--vs-papier);
}

/* Twaalf kolommen. De eerste case beslaat er acht, de twee daaronder elk vier.
   Die vier kolommen wit rechts van de grote case zijn de compositie zelf en
   geen restruimte; vandaar dat er niets is dat ze opvult. */
.vs-selectie__raster {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 32px;
  row-gap: 88px;
  margin-top: 64px;
}

/* Rij 1 is de grote case over acht kolommen, rij 2 zijn de twee kleinere over
   vier. Zonder de expliciete grid-row schuift de tweede case vanzelf naast de
   grote in kolom 9 tot 12, en dan staat er op rij 2 één kaart met acht lege
   kolommen ernaast. De vier kolommen wit rechts van de grote case zijn de
   compositie; die acht eronder waren dat niet. */
.vs-selectie__case {
  grid-column: span 4;
  grid-row: 2;
}

.vs-selectie__case--groot {
  grid-column: 1 / span 8;
  grid-row: 1;
}

.vs-selectie__tekst {
  margin-top: 24px;
}

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

.vs-selectie__case--groot .vs-selectie__naam {
  font-size: 48px;
}

.vs-selectie__tekst .vs-mono {
  margin: 10px 0 0;
}

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

.vs-selectie__noot {
  margin-top: 14px;
}

.vs-selectie__tekst .vs-tlink {
  margin-top: 20px;
}

.vs-selectie__slot {
  margin-top: 72px;
}

/* Het beeld schaalt 3 procent bij hover, en niet meer. */
.vs-selectie__case:hover .vs-beeldvlak img {
  transform: scale(1.03);
}

/* -------------------------------------------------------------------------
   Diensten: vier horizontale regels
   ------------------------------------------------------------------------- */

.vs-drij {
  padding: var(--vs-sectie) var(--vs-kant);
  background-color: var(--vs-wit);
}

.vs-drij__lijst {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

/* Geen afgeronde kaarten: een regel met een haarlijn eronder, meer niet. */
.vs-drij__link {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 120px;
  padding: 36px 0;
  text-decoration: none;
  color: var(--vs-ink);
  transition: color var(--vs-duur) var(--vs-ease);
}

.vs-drij__nr {
  flex: 0 0 auto;
  width: 56px;
  font-family: var(--vs-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-tekst);
  transition: color var(--vs-duur) var(--vs-ease);
}

.vs-drij__naam {
  flex: 0 0 auto;
  font-family: var(--vs-kop);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: none;
}

/* De toelichting verschijnt rechts bij hover. Op een aanraakscherm bestaat
   hover niet, dus daar staat hij gewoon; zie de media-query onderaan. */
.vs-drij__tekst {
  margin-left: auto;
  max-width: 400px;
  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);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--vs-duur) var(--vs-ease), transform var(--vs-duur) var(--vs-ease);
}

.vs-drij__pijl {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1;
  color: var(--vs-tekst);
  transition: transform var(--vs-duur) var(--vs-ease), color var(--vs-duur) var(--vs-ease);
}

.vs-drij__link:hover .vs-drij__tekst,
.vs-drij__link:focus-visible .vs-drij__tekst {
  opacity: 1;
  transform: none;
}

.vs-drij__link:hover .vs-drij__pijl,
.vs-drij__link:focus-visible .vs-drij__pijl {
  transform: translateX(8px);
  color: var(--vs-accent);
}

.vs-drij__link:hover .vs-drij__nr,
.vs-drij__link:focus-visible .vs-drij__nr {
  color: var(--vs-accent);
}

/* -------------------------------------------------------------------------
   Werkwijze en beloftes: samen het ene inktvlak
   ------------------------------------------------------------------------- */

/* Twee secties, één vlak. Ze staan direct onder elkaar en hebben dezelfde
   achtergrond, dus de bezoeker leest er één blok. De werkwijze legt uit hoe het
   gaat, de beloftes zeggen waar je op kunt rekenen; die twee horen bij elkaar. */
.vs-wwz {
  padding: var(--vs-sectie) var(--vs-kant);
  background-color: var(--vs-inkt);
}

/* Tot 02-09-2026 eindigde dit vlak op 88px en leverde .vs-bel eronder de rest
   van de ruimte; die rij is er niet meer, dus de sectie sluit zichzelf af.
   Vanaf 1024px krijgt hij hoogte, want een maatlat met vijf labels is een stuk
   lager dan de drie tekstkolommen die er stonden en zou anders als een streep
   tussen twee witte vlakken hangen.

   DE min-height IS ER LATER OP 02-09-2026 WEER UIT, na een tweede meting. Met
   70vh werd de sectie 1059px hoog terwijl de maatlat zelf 423px is: 636px, zes
   tiende van het vlak, was leeg zwart. Dat was precies de klacht "te veel
   zwart". Zonder min-height komt de sectie op ongeveer 703px, en dat is met
   140px lucht boven en onder nog steeds een rustpunt en geen streep.

   De flex-kolom blijft staan; die centreert de inhoud als de sectie om een
   andere reden hoger wordt, bijvoorbeeld zodra er een mockup in hangt. */
@media only screen and (min-width: 1024px) {
  .vs-wwz {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* .vs-binnen staat op `margin: 0 auto`, en een auto-marge op de dwarsas zet
     in flexbox de stretch uit: het blok kromp daardoor tot zijn eigen inhoud
     (gemeten 319px van de 1440) en de merktekens van de lat kwamen op een hoop
     in het midden te staan. Breedte expliciet, dan doet de max-width van
     .vs-binnen weer gewoon zijn werk. */
  .vs-wwz > .vs-binnen {
    width: 100%;
  }
}

/* --- de maatlat (02-09-2026) ----------------------------------------------

   RUSTSTAND EERST. Alles hieronder tot aan het js-lat-blok is de verticale
   lijst: nummer links, kop en tekst rechts. Dat is wat je ziet zonder
   javascript, onder 1024px, en bij prefers-reduced-motion. Pas als
   vesmo-maatlat.js de klasse js-lat zet gaat het over op de horizontale lat.
   Zo levert een script dat niet draait geen lege sectie op, dezelfde afspraak
   als bij .vs-maatlat en .vs-skop hierboven.                                */

.vs-lat {
  margin-top: 56px;
}

/* Het spoor draagt de haarlijn met de streepjes (.vs-maatlat) en de blauwe
   vulling eroverheen. In de ruststand heeft het geen hoogte nodig. */
.vs-lat__spoor {
  position: relative;
  /* In de ruststand staat de lat gewoon bovenaan. Op de horizontale lat wordt
     dit de ruimte boven de lijn, en dan moet elk absoluut kind dezelfde waarde
     meerekenen: een absoluut kind hangt aan de padding-box en telt de
     padding-top van zijn container dus NIET vanzelf mee. Eén variabele, zodat
     lijn, vulling en merktekens niet uit elkaar kunnen lopen. */
  --vs-lat-boven: 0px;
}

.vs-lat__vulling {
  position: absolute;
  left: 0;
  top: calc(var(--vs-lat-boven) + 13px);   /* gelijk aan .vs-maatlat__lijn */
  height: 1px;
  width: 0;
  background-color: var(--vs-accent);
  pointer-events: none;
}

.vs-lat__punten {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vs-lat__punt {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0 20px;
  padding: 36px 0;
  border-top: 1px solid var(--vs-hair-inkt);
}

.vs-lat__punt:first-child {
  border-top: 0;
}

.vs-lat__merk {
  display: contents;
}

.vs-lat__nr {
  grid-column: 1;
  color: var(--vs-mono-inkt);
}

/* Het blauwe blokje van 8px, het merkteken van de site. In de lijst staat het
   niet in de weg; op de lat wordt het de stip op de lijn. */
.vs-lat__stip {
  display: none;
}

.vs-lat__titel {
  grid-column: 2;
  font-family: var(--vs-kop);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--vs-wit);
}

.vs-lat__tekst {
  grid-column: 2;
  margin: 10px 0 0;
  font-family: var(--vs-body);
  font-size: 18px;
  font-weight: 400;
  line-height: var(--vs-regel);
  letter-spacing: 0;
  text-wrap: pretty;
  color: var(--vs-ink-zacht);
}

/* .vs-tlink staat op var(--vs-ink) en dat is zwart op zwart hier. De
   onderstreping tekent met currentColor, dus die volgt vanzelf mee. */
.vs-wwz__verder {
  margin: 48px 0 0;
}

.vs-wwz__verder .vs-tlink {
  color: var(--vs-wit);
}

/* Geen hover-kleur meer (02-09-2026). .vs-tlink__woord tekent zijn
   onderstreping met currentColor en laat die van links naar rechts groeien;
   met de link op wit is dat teken genoeg. Ging hij naar #251cff, dan werd hij
   bij het aanwijzen donkerder dan in rust. */

/* --- de horizontale lat, alleen met javascript en vanaf 1024px ------------

   ALLES HANGT AAN DE HAARLIJN. Die zit in .vs-maatlat op top:13px; door de
   marge daarvan hier op nul te zetten ligt hij op 13px van .vs-lat__spoor, en
   dat is het enige getal waar de rest zich aan vastpakt. Nummer erboven, stip
   erop, titel eronder, alle drie absoluut. Zo verschuift er niets zodra een
   titel over twee regels loopt of er een stap bijkomt.                      */

@media only screen and (min-width: 1024px) {

  .vs-lat.js-lat .vs-maatlat {
    margin-top: 0;
  }

  /* Boven de lijn de nummers (46px), eronder de titels (56px) en daaronder de
     gedeelde tekstregel (110px, vier regels van 17px op 1,55). */
  .vs-lat.js-lat .vs-lat__spoor {
    --vs-lat-boven: 46px;
    padding-top: var(--vs-lat-boven);
    /* Van de lijn tot de onderkant van de tekst is 13 + 78 + 105 = 196px;
       de lat zelf is 26px hoog, dus hieronder moet 180px vrij blijven. */
    padding-bottom: 180px;
  }

  .vs-lat.js-lat .vs-lat__punten {
    min-height: 0;
    margin: 0;
  }

  .vs-lat.js-lat .vs-lat__punt {
    display: block;
    padding: 0;
    border-top: 0;
  }

  /* Nulhoogte, precies op de lijn. De drie kinderen hangen eraan. */
  .vs-lat.js-lat .vs-lat__merk {
    display: block;
    position: absolute;
    left: var(--vs-lat-x);
    top: calc(var(--vs-lat-boven) + 13px);
    width: 200px;
    height: 0;
    transform: translateX(-50%);
    text-align: center;
  }

  .vs-lat.js-lat .vs-lat__nr,
  .vs-lat.js-lat .vs-lat__titel {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
  }

  .vs-lat.js-lat .vs-lat__nr {
    bottom: 20px;
    color: var(--vs-mono-inkt);
    transition: color .4s var(--vs-ease);
  }

  .vs-lat.js-lat .vs-lat__stip {
    display: block;
    position: absolute;
    left: 50%;
    top: -4px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background-color: var(--vs-hair-inkt);
    transition: background-color .4s var(--vs-ease);
  }

  .vs-lat.js-lat .vs-lat__titel {
    top: 22px;
    font-size: 20px;
    font-weight: 600;
    color: var(--vs-ink-zacht);
    transition: color .4s var(--vs-ease);
  }

  /* De actieve stap: gevulde stip en witte tekst. Eén beweging, geen sprong. */
  .vs-lat.js-lat .vs-lat__punt.is-actief .vs-lat__stip {
    background-color: var(--vs-accent);
  }

  .vs-lat.js-lat .vs-lat__punt.is-actief .vs-lat__nr,
  .vs-lat.js-lat .vs-lat__punt.is-actief .vs-lat__titel {
    color: var(--vs-wit);
  }

  /* Alle teksten liggen op dezelfde plek onder de lat; alleen de actieve is
     zichtbaar. Wisselen gaat alleen op dekking en niet op positie, want een
     tekst die ook verschuift leest als twee gebeurtenissen. */
  .vs-lat.js-lat .vs-lat__tekst {
    position: absolute;
    left: 0;
    top: calc(var(--vs-lat-boven) + 13px + 78px);
    max-width: 46ch;
    margin: 0;
    opacity: 0;
    transition: opacity .4s var(--vs-ease);
    pointer-events: none;
  }

  .vs-lat.js-lat .vs-lat__punt.is-actief .vs-lat__tekst {
    opacity: 1;
  }
}

.vs-bel {
  padding: 0 var(--vs-kant) var(--vs-sectie);
  background-color: var(--vs-inkt);
}

.vs-bel__label {
  margin: 0 0 32px;
  padding-top: 72px;
  border-top: 1px solid var(--vs-hair-inkt);
  color: var(--vs-mono-inkt);
}

.vs-bel__rij {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.vs-bel__claim .vs-blok {
  background-color: var(--vs-accent);
}

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

.vs-bel__tekst {
  margin: 12px 0 0;
  font-family: var(--vs-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
  color: var(--vs-ink-zacht);
}

/* -------------------------------------------------------------------------
   Pakketten: drie kaarten
   ------------------------------------------------------------------------- */

.vs-pak {
  padding: var(--vs-sectie) var(--vs-kant);
  background-color: var(--vs-wit);
}

.vs-pak__kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  margin-top: 48px;
}

.vs-pak__titel {
  margin: 0;
  max-width: 620px;
  font-family: var(--vs-kop);
  font-size: clamp(32px, 4.4vw, 64px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -0.03em;
  text-transform: none;
  text-wrap: balance;
  color: var(--vs-ink);
}

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

/* Gelijke hoogte via stretch, en de knop onderaan via margin-top:auto. Dan
   staan de drie knoppen op één lijn, ook als de kaarten ongelijk vullen. */
.vs-pak__raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 64px;
}

.vs-pkaart {
  display: flex;
  flex-direction: column;
  padding: 48px;
  border: 1px solid var(--vs-line);
  background-color: var(--vs-wit);
}

/* De uitgelichte kaart is inkt. Blauw zou hier concurreren met de offerteknop
   in de kopbalk en met het slotvlak, en dan is het accent geen accent meer. */
.vs-pkaart--uit {
  background-color: var(--vs-inkt);
  border-color: var(--vs-inkt);
}

.vs-pkaart__kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

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

.vs-pkaart__merk {
  flex: 0 0 auto;
  margin: 0;
  padding: 5px 10px;
  border-radius: var(--vs-radius-pill);
  background-color: var(--vs-accent);
  font-family: var(--vs-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-wit);
}

.vs-pkaart__prijs {
  margin: 28px 0 0;
  font-family: var(--vs-kop);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--vs-ink);
}

.vs-pkaart__prijsnoot {
  margin: 10px 0 0;
}

.vs-pkaart__tekst {
  margin: var(--vs-alinea) 0 0;
  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-pkaart__punten {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 36px 0 0;
  padding: 36px 0 0;
  border-top: 1px solid var(--vs-line);
  list-style: none;
}

.vs-pkaart__punt {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--vs-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-tekst);
}

.vs-pkaart__slot {
  margin-top: auto;
  padding-top: 32px;
}

.vs-pkaart__slot .vs-hknop {
  width: 100%;
  min-width: 0;
}

/* De uitgelichte kaart, in inkt. */
.vs-pkaart--uit .vs-pkaart__naam,
.vs-pkaart--uit .vs-pkaart__prijs {
  color: var(--vs-wit);
}

.vs-pkaart--uit .vs-pkaart__tekst,
.vs-pkaart--uit .vs-pkaart__punt {
  color: var(--vs-ink-zacht);
}

.vs-pkaart--uit .vs-mono {
  color: var(--vs-mono-inkt);
}

.vs-pkaart--uit .vs-pkaart__punten {
  border-top-color: var(--vs-hair-inkt);
}

.vs-pkaart--uit .vs-blok {
  background-color: var(--vs-accent);
}

.vs-pkaart--uit .vs-hknop--gevuld {
  background-color: var(--vs-wit);
  border-color: var(--vs-wit);
  color: var(--vs-inkt);
}

.vs-pkaart--uit .vs-hknop--gevuld:hover,
.vs-pkaart--uit .vs-hknop--gevuld:focus-visible {
  background-color: transparent;
  border-color: var(--vs-hair-inkt);
  color: var(--vs-wit);
}

/* -------------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------------- */

.vs-faq {
  padding: var(--vs-sectie) var(--vs-kant);
  background-color: var(--vs-wit);
}

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

.vs-faq__titel {
  margin: 0;
  font-family: var(--vs-kop);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-transform: none;
  text-wrap: pretty;
  color: var(--vs-ink);
}

.vs-faq__slot {
  margin: 20px 0 0;
  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-faq__slot a {
  color: var(--vs-ink);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--vs-line);
}

.vs-faq__item,
.vs-faq__slotlijn {
  border-top: 1px solid var(--vs-line);
}

.vs-faq__knop {
  display: flex;
  width: 100%;
  gap: 32px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 32px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--vs-ink);
  transition: color var(--vs-duur) var(--vs-ease);
}

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

.vs-faq__vraag {
  font-family: var(--vs-kop);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.vs-faq__plus {
  flex: 0 0 auto;
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 6px;
}

.vs-faq__plus span {
  position: absolute;
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
  background-color: currentColor;
}

.vs-faq__plus span:last-child {
  transform: rotate(90deg);
  transition: transform var(--vs-duur) var(--vs-ease);
}

.vs-faq__item.is-open .vs-faq__plus span:last-child {
  transform: rotate(0deg);
}

/* Twee klassen en niet één: is-stil zet de beginstand, is-klaar zet pas een
   frame later de overgang erop. Anders klapt de sectie zichtbaar dicht. */
.vs-faq.is-stil .vs-faq__antwoord {
  overflow: hidden;
  max-height: 0;
}

.vs-faq.is-klaar .vs-faq__antwoord {
  transition: max-height var(--vs-duur) var(--vs-ease);
}

.vs-faq.is-stil .vs-faq__item.is-open .vs-faq__antwoord {
  max-height: 280px;
}

/* Een klasse op de alinea, geen `.vs-faq__antwoord p`. De rij van WPBakery
   draagt body-text-s, en `.body-text-s p:not([class])` is 0,2,1 en wint van
   klasse-plus-element. Gemeten op 29-08-2026. */
.vs-faq__uitleg {
  max-width: 640px;
  margin: 0;
  padding: 0 0 30px;
  font-family: var(--vs-body);
  font-size: 17px;
  font-weight: 400;
  line-height: var(--vs-regel);
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
  color: var(--vs-tekst);
}

/* -------------------------------------------------------------------------
   Persoonlijk contact

   De sectie zelf is .vs-wie uit vesmo-paginas.css en wordt gedeeld met Over
   ons. Hier alleen de ruimere kantlijn en het label; zie inc/pagina-secties.php.
   ------------------------------------------------------------------------- */

.vs-wie--gelabeld {
  padding: var(--vs-sectie) var(--vs-kant);
  background-color: var(--vs-wit);
}

/* -------------------------------------------------------------------------
   De intocht. Eén beweging, en die duurt een halve seconde.

   Alleen de hero heeft een intocht in stappen; de rest van de pagina komt met
   .vs-in binnen zodra hij in beeld schuift. Wat er niet meer is: het
   puntenraster, de maatlat, de gepinde strip en de meelopende dienstenlijst.
   ------------------------------------------------------------------------- */

.vs-hero.is-stil [data-in] {
  opacity: 0;
  transform: translateY(18px);
}

.vs-hero.is-klaar [data-in] {
  transition: opacity .55s var(--vs-ease), transform .55s var(--vs-ease);
}

/* De kopregels rijzen op uit hun huls in plaats van te vervagen: 108% zodat ook
   de staarten onder de rand beginnen. Uit de handoff, README r. 176-186. */
.vs-hero.is-stil [data-vert] {
  transform: translateY(108%);
}

.vs-hero.is-klaar [data-vert] {
  transition: transform 1.1s var(--vs-ease);
}

.vs-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s var(--vs-ease), transform .55s var(--vs-ease);
}

.vs-in.is-zichtbaar {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .vs-skop.js-lat::after,
  .vs-maatlat.js-lat .vs-maatlat__lijn,
  .vs-maatlat.js-lat .vs-maatlat__streep {
    transform: none;
    transition: none;
  }

  .vs-tlink__woord {
    transition: none;
  }

  .vs-hero.is-stil [data-in],
  .vs-hero.is-stil [data-vert],
  .vs-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .vs-beeldvlak img,
  .vs-tlink__pijl,
  .vs-drij__pijl {
    transition: none;
  }

  .vs-selectie__case:hover .vs-beeldvlak img {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   Tot 1279px
   ------------------------------------------------------------------------- */

@media only screen and (max-width: 1279px) {
  .vs-selectie__raster {
    row-gap: 64px;
  }

  .vs-pak__raster {
    gap: 16px;
  }

  .vs-pkaart {
    padding: 32px;
  }
}

/* -------------------------------------------------------------------------
   Tot 1023px: één kolom, geen hover-onthulling
   ------------------------------------------------------------------------- */

@media only screen and (max-width: 1023px) {
  .vs-hero {
    padding-top: 64px;
  }

  /* DE SCHERMVULLENDE HERO OP EEN SMAL SCHERM (01-09-2026).

     WAT ER MIS WAS. De waas hierboven is een radiaal verloop met het middelpunt
     linksonder buiten beeld, zodat de dekking wegloopt naar boven en naar rechts:
     wit waar de tekst staat, open waar de video is. De comment daar zegt dat de
     aparte mobiele regel kon vervallen omdat stralen en middelpunt in procenten
     van het vak staan en het veld dus gelijkvormig is op elk formaat. Dat klopt
     ten opzichte van het vak, maar het vak kantelt: 1440x900 liggend wordt
     390x844 staand. Op een staand vak is er geen "rechts" om naartoe weg te
     lopen, en de tekst staat over de volle breedte -- precies in het gebied dat
     het verloop openhoudt voor de video. Gemeten op 390px liepen kop en intro
     dwars door het beeldmateriaal, inclusief de tekst die in de opname zelf zit.

     DE OPLOSSING IS HET VERLOOP AAN DE ONDERKANT VERANKEREN, NIET AAN HET VAK.
     Daarvoor moet de inhoud eerst zelf aan de onderkant vastzitten: met
     align-items: center hangt het tekstblok op een hoogte die met de
     schermhoogte meebeweegt (gemeten 660px tot 831px boven de onderrand over
     vijf formaten), en dan is er geen percentage dat op alle telefoons klopt.
     Met flex-end is de afstand tot de onderrand constant en kunnen de stops in
     calc(100% - Xpx), dus in echte pixels boven de onderrand.

     DE ONDERRAND BLIJFT VOL WIT, en dat is dezelfde eis als op desktop: onder de
     hero begint .vs-strip en die is wit, dus alles onder dekking 1 geeft daar een
     naad. Vandaar de laatste stop op 100%. Valkuil 17b.

     680px is gekozen op de meting. Het tekstblok is 596px hoog op 430 breed,
     625px op 390 en 654px op 360 -- de intro breekt smaller anders af. 680 ligt
     boven de hoogste van die drie, dus de kop staat overal op vol wit.

     CORRECTIE 02-09-2026: DIE 680px STOND OP TWEE PLEKKEN EN WERD MAAR OP EEN
     PLEK GEKLEMD. De videoband kreeg max(200px, calc(100% - 680px)), het verloop
     kreeg calc(100% - 680px) kaal. Zodra het venster korter is dan 880px valt de
     band terug op zijn ondergrens van 200px terwijl het verloop gewoon doorloopt,
     en dan schuift het volwitte deel over de band heen. Gemeten op de live site:
     op 390x844 werd het verloop vol wit op 164px en bleef er een vage zweem over
     in de bovenste 74px; op 375x667 kwam de stop op -13px uit en was de hero wit
     vanaf de bovenrand. Vrijwel elke telefoon in portret is korter dan 880px, dus
     vrijwel iedereen keek naar wit. De video zelf mankeerde niets: readyState 4,
     paused false, playsinline en muted stonden erop.

     DE WAAS HANGT NU AAN HET TEKSTBLOK EN NIET MEER AAN EEN GETAL. Waar 680px een
     schatting was van de hoogte van dat blok, is de waas nu een ::before op
     .vs-hero__inhoud zelf. Die begint per definitie net boven de kop, op elk
     schermformaat, bij elke tekstlengte en bij elke lettergrootte van de bezoeker.
     Daarmee vervalt de kalibratie en kan het verloop de band niet meer opeten.
     .vs-hero__boog gaat op mobiel uit; op desktop blijft hij zoals hij was.

     Wat dit niet oplost, en niet kan oplossen: op een korte telefoon zit er
     domweg weinig ruimte boven de kop. Op 375x667 begint het tekstblok op 102px.
     Meer video dan dat past er niet zolang de hero in een scherm moet passen, en
     dat laatste is een besluit van Daan van 02-09-2026. */
  .vs-hero--vol {
    align-items: flex-end;
    /* Haalt de 64px hierboven weer weg. Die is voor de gewone hero van de andere
       pagina's, maar box-sizing is hier content-box, dus bij de volle hero komt
       hij bovenop min-height: 100svh en wordt de sectie 908px op een scherm van
       844. Er paste dus nooit precies een scherm. */
    padding-top: 0;
    /* Gelijk aan de waas hieronder en aan .vs-strip eronder. Op papier zou de
       strook tussen de onderrand van de video en het punt waar de waas vol wit
       wordt als creme oplichten; nu loopt alles in elkaar over. */
    background-color: var(--vs-wit);
  }

  .vs-hero__inhoud {
    padding: 0 0 80px;
  }

  /* DE WAAS, VERANKERD AAN DE TEKST. Zie het blok hierboven voor het waarom.

     De stapeling klopt zonder er iets aan te veranderen: .vs-hero__inhoud heeft
     al position: relative met z-index 1 en vormt dus een stapelcontext. Een
     ::before met z-index -1 valt daarbinnen onder de eigen tekst maar boven
     .vs-hero__media, dat helemaal geen z-index heeft. Volgorde blijft dus video,
     waas, tekst.

     De breedte komt uit calc(50% - 50vw) en niet uit een negatieve --vs-kant.
     .vs-hero__inhoud draagt ook .vs-binnen, en die heeft margin: 0 auto met een
     max-width; op een tablet is het blok daardoor smaller dan de hero en zou een
     kantlijn-marge de randen niet halen. De hero staat op overflow: hidden, dus
     wat er buiten valt wordt geknipt.

     bottom: 0 en niet -80px: het blok reikt gemeten tot de onderrand van de hero
     (844 van 844, en 667 van 667), dus de onderrand blijft vol wit. Valkuil 17b. */
  .vs-hero__inhoud::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    top: -120px;
    bottom: 0;
    background-image: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .5) 64px,
        var(--vs-wit) 96px,
        var(--vs-wit) 100%);
    pointer-events: none;
  }

  /* DE VIDEO KRIJGT DE BAND DIE DE WAAS OPENHOUDT, EN NIET DE HELE HERO.

     De opname is 1920x1080. Met object-fit: cover in een staand vak van 390x844
     is de dekkende schaal 0,78 en blijft er 26% van de bronbreedte over: je
     kijkt naar een uitvergrote verticale strook uit het midden van de montage.
     Dat is ook wat er in de oude opzet als losse, veel te grote tegels door de
     kop en de intro liep -- het was niet alleen de waas die daar misging.

     Beperkt tot de hoogte waarop de waas vol wit wordt, is het vak ongeveer 2:1
     en staat er 100% van de breedte in beeld, met object-position: center top de
     bovenste 91% van de hoogte. Dezelfde 680px als bij het verloop, dus de
     onderrand van de video valt samen met het punt waar hij toch al onzichtbaar
     zou worden. De ondergrens van 200px is voor korte schermen, waar
     calc(100% - 680px) te weinig overhoudt om nog iets te tonen; wat daar onder
     het volwitte deel valt zie je gewoon niet. */
  .vs-hero__media {
    bottom: auto;
    height: max(200px, calc(100% - 680px));
    /* Het oude verloop liet de onderrand van de band vervagen. Nu de waas bij de
       tekst hangt en niet meer bij de band, doet dit masker dat werk. Een laag,
       niet twee: mask-composite telt lagen bij elkaar op (valkuil 18). */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent 100%);
  }

  /* Vervangen door .vs-hero__inhoud::before hierboven. Niet weggehaald uit de
     css buiten deze media query: op desktop is dit nog steeds het radiale
     verloop en dat blijft ongewijzigd. */
  .vs-hero__boog {
    display: none;
  }

  .vs-hero__kop {
    max-width: 100%;
    letter-spacing: -0.03em;
  }

  .vs-hero__acties {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .vs-hero__acties .vs-hknop {
    width: 100%;
  }

  .vs-hero__acties .vs-tlink {
    justify-content: center;
  }

  .vs-hero__figuur {
    margin-top: 56px;
  }

  .vs-selectie__case,
  .vs-selectie__case--groot {
    grid-column: 1 / -1;
  }

  .vs-selectie__case--groot .vs-selectie__naam {
    font-size: 32px;
  }

  /* Geen hover op een aanraakscherm, dus de toelichting staat er gewoon, onder
     de naam in plaats van ernaast. Dit is de mobiele lijst uit de brief: titel,
     zin, verwijzing onder elkaar, en niets dat meeschuift. */
  .vs-drij__link {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-areas:
      "nr naam pijl"
      ".  tekst tekst";
    align-items: baseline;
    gap: 8px 16px;
    min-height: 0;
    padding: 28px 0;
  }

  .vs-drij__nr   { grid-area: nr; width: auto; }
  .vs-drij__naam { grid-area: naam; }
  .vs-drij__pijl { grid-area: pijl; }

  .vs-drij__tekst {
    grid-area: tekst;
    margin-left: 0;
    max-width: none;
    opacity: 1;
    transform: none;
  }

  /* .vs-wwz__rij en .vs-wwz__stap stonden hier ook in. Die klassen bestaan
     sinds 02-09-2026 niet meer: de drie tekstkolommen zijn een maatlat
     geworden, en die is hier vanzelf al een verticale lijst omdat js-lat pas
     vanaf 1024px wordt gezet. Zie het maatlat-blok hierboven. */
  .vs-bel__rij,
  .vs-pak__raster,
  .vs-faq__rij {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .vs-bel__rij {
    gap: 40px;
  }

  .vs-pak__kop {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  /* Op mobiel staat het meest gekozen pakket vooraan. Dat gaat met order en
     niet met een tweede volgorde in de html, zodat de leesvolgorde klopt. */
  .vs-pak__raster {
    gap: 20px;
  }

  .vs-pkaart--uit {
    order: -1;
  }

  .vs-faq__rij {
    gap: 40px;
  }
}

/* -------------------------------------------------------------------------
   Tot 767px
   ------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
  .vs-drij__link {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "nr    pijl"
      "naam  naam"
      "tekst tekst";
    gap: 6px 12px;
  }

  .vs-pkaart {
    padding: 28px 24px;
  }

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

  .vs-selectie__slot .vs-hknop {
    width: 100%;
  }

  /* EÉN EIGENAAR PER NAAD OP EEN TELEFOON (keuze van Daan op schetsen,
     08-09-2026). Elke sectie gaf --vs-sectie boven én onder, dus tussen twee
     witte buren stond 208px wit. Nu geeft van twee buren met dezelfde
     achtergrond alleen de bovenste ruimte: wie -> pakketten en pakketten ->
     notitie hier, het Inzichten-blok -> vragen in vesmo-inzichten.css. Bij een
     kleurwissel (diensten -> werkwijze, beloftes -> wie, vragen -> slotvlak)
     blijft het zoals het was. Desktop ongemoeid (07-09). */
  .vs-wie--gelabeld,
  .vs-pak {
    padding-bottom: 0;
  }
}

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

   Zie het slotblok van vesmo-style.css voor het waarom, inclusief waarom de
   grens op 1023px ligt en niet op 767.
   ------------------------------------------------------------------------- */

@media only screen and (max-width: 1023px) {
  /* Was 24px. Al inline-flex met align-items: center, dus min-height centreert
     de tekst en de pijl vanzelf in het grotere vlak. */
  .vs-tlink {
    min-height: 44px;
  }

  /* WAAROM HIER GEEN PADDING MAAR EEN VLAK ERBOVENOP. De onderstreping van deze
     link is een box-shadow op de onderrand van de padding-box. Verticale padding
     zou de streep dus meeslepen tot 12px onder de tekst, los van de letters.
     Een ::after die het tikvlak oprekt raakt de opmaak niet en laat de streep
     staan waar hij hoort.

     Gevolg voor het nameten: getBoundingClientRect() van de <a> blijft 20px
     melden. Controleer deze met document.elementFromPoint() op 20px boven en
     onder het midden -- dat is toch de eerlijker toets voor een tikdoel. */
  .vs-faq__slot a {
    position: relative;
  }

  .vs-faq__slot a::after {
    content: '';
    position: absolute;
    inset: -12px 0;
  }

  /* De enige 11px op de site. In mono, op een telefoon, boven een pakketnaam:
     dat is geen klein accent meer maar onleesbaar. Eén stap erbij. */
  .vs-pkaart__merk {
    font-size: 13px;
  }
}


/* LIJSTBLOKJES IN DE PAKKETKAARTEN GRIJS (07-09-2026, lucht): zelfde reden als
   .vs-punten__blok in vesmo-paginas.css. Blauw blijft voor de sectienummers
   (.vs-skop .vs-blok) en de verwijzingen. */
.vs-pkaart__punt .vs-blok {
  background-color: rgba(10, 10, 10, .28);
}
.vs-pkaart--uit .vs-pkaart__punt .vs-blok {
  background-color: rgba(255, 255, 255, .35);
}