/*
 * De vorm van Kraanverhuur VCA.
 *
 * Navy en amber, hoekig, en verder zo weinig mogelijk. Alles wat hier niet
 * staat komt uit aambeeld en wordt daar onderhouden.
 */

/* ═══════════════════════════════════════════════════ de kleurenset ══
 *
 * Drie kleuren, en ze staan hier één keer. Navy, oker en zwart.
 *
 * Waarom dit blok er staat: de toon verschilde per sjabloon. De kop van de
 * startpagina stond op #00142c, de banden op het navy van de parameters, de
 * kaarten op het warme zwart van aambeeld (#0B0B0A, met bruin erin) en de
 * voetband op nog een vierde tint. Op één bladzijde naast elkaar leest dat
 * als drie sites die op elkaar geplakt zijn, en dat is precies wat een
 * vormgever in één blik ziet.
 *
 * De grond, het paneel en de banier van aambeeld wijzen hier dus naar
 * hetzelfde koele zwart met navy erin. De parameters uit thema.json blijven
 * de baas over het accent en het navy zelf: wijzigt de klant ze in het
 * beheer, dan schuift alles hieronder mee.
 */

:root {
    /* Het navy van de kraan. Gelijk aan de parameter `steun`; hier apart
       gezet zodat een band ernaar kan wijzen zonder van de winkelbetekenis
       van --steun af te hangen. */
    --vca-navy: var(--steun, #002d61);

    /* Een tint donkerder dan het navy van de banden. Het navy zelf is de kleur
       van de kraan; onder de kop moet een foto doorkomen, en dan is dezelfde
       kleur te licht om witte tekst op te dragen. */
    --vca-nacht: #00142c;

    /* Zwart met een spoor navy erin in plaats van het warme zwart van
       aambeeld. Naast navy leest een bruinzwart als vuil. */
    --vca-zwart: #05080d;
    --vca-zwart-op: #0b1119;

    --vca-oker: var(--accent, #ffb100);
    --vca-op-donker: #ffffff;
    --vca-op-donker-zacht: rgba(255, 255, 255, .82);
    --vca-lijn-donker: rgba(255, 255, 255, .16);

    /* De hoogte van een band. Eén maat voor de hele bladzijde: banden die elk
       hun eigen lucht meebrengen, lezen als losse stukken. */
    --vca-band: clamp(3.5rem, 8vw, 6.5rem);
}

/* De grondtonen van aambeeld naar dezelfde set trekken, in allebei de standen
   waarin de donkere huid aangaat. */
@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]) {
        --grond: #05080d;
        --grond-warm: #080d14;
        --grond-diep: #0b1119;
        --paneel: #0b1119;
        --banier: #03060a;
        --lijn: #17202b;
        --lijn-zacht: #111823;
        --lijn-sterk: #24303f;
    }
}

:root[data-thema="donker"] {
    --grond: #05080d;
    --grond-warm: #080d14;
    --grond-diep: #0b1119;
    --paneel: #0b1119;
    --banier: #03060a;
    --lijn: #17202b;
    --lijn-zacht: #111823;
    --lijn-sterk: #24303f;
}

.vca-hero {
    background: var(--steun, #002d61);
    color: #fff;
    padding: var(--ruimte-16, 4rem) 0;
}

.vca-hero h1 {
    font-size: clamp(2.2rem, 6vw, 4rem);
    margin: 0.4rem 0 1rem;
}

.vca-hero__tekst {
    max-width: 46ch;
    font-size: var(--tekst-l, 1.125rem);
    opacity: 0.92;
}

/* De lopende tekst van de startpagina vult de smalle kolom waarin ze staat.
   Zonder dit blijft de prosa op 68ch staan binnen een omhulsel van 760, en dan
   staat de tekst opnieuw scheef in haar eigen kader. De leesbreedte wordt hier
   dus door het omhulsel bepaald en niet twee keer. */
.vca-prosa { max-width: none; }

.vca-hero__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

/* Een knop van 48 pixels hoog: dit wordt bediend met werkhandschoenen aan of
   op een telefoon in de auto. */
.vca-hero__knoppen .knop,
.vca-bel {
    min-height: 48px;
}

.vca-bel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* De belknop en de menuknop horen aan de rechterrand van de balk en niet tegen
   het logo. Zonder deze regel eindigt de kop op 1280 al bij 852 pixels en
   blijft er vierhonderd pixels balk leeg naast een belknop die in het midden
   zweeft; op 390 valt de nav weg en schuift het hele blokje tegen het logo
   aan. Gemeten op 19 september 2026 op allebei de breedtes. */
.siteKop__acties {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--ruimte-2, .5rem);
}

/* ── het zoekveld in de kop, op een breed scherm ──
 *
 * De basis legt het open veld als een laag over de balk en zet het logo en de
 * navigatie eronder onzichtbaar. Dat is de oplossing voor een winkelkop vol
 * pictogrammen, waar niets meer bij past.
 *
 * Deze kop draagt vijf menu-items, en die gaan toch weg zodra er gezocht
 * wordt. Er komt dus vanzelf een gat vrij waar het veld precies in past: het
 * veld schuift ertussen in plaats van eroverheen, en het logo blijft staan.
 * Wie zoekt, ziet dan nog altijd op welke site hij zoekt.
 */
.siteKop__balk:has(form[data-zoekformulier]:not(.verborgen)) .hoofdnav {
    display: none;
}

.siteKop__balk:has(form[data-zoekformulier]:not(.verborgen)) .merk {
    visibility: visible;
}

/* De rij met de knoppen is anders zo breed als haar inhoud; zonder dit blijft
   het open veld tweehonderd pixels en zie je niet wat je typt. */
.siteKop__balk:has(form[data-zoekformulier]:not(.verborgen)) .siteKop__acties {
    flex: 1 1 auto;
    min-width: 0;
}

.siteKop__acties form[data-zoekformulier]:not(.verborgen) {
    flex: 1 1 auto;
    min-width: 0;
}

.siteKop__acties form[data-zoekformulier] .invoer {
    width: 100%;
    min-height: 44px;
}

/* Op een smal scherm blijft het icoon en verdwijnt het nummer: anders duwt de
   kop zichzelf uit elkaar. Het icoon blijft een telefoonknop.

   Het nummer wordt weggenomen uit het beeld en niet uit de bladzijde. Met
   `display: none` hield de knop niets over dat een naam kon dragen: het icoon
   is voor een schermlezer niets, en dan staat er een link zonder naam in de kop
   van elke bladzijde. Zo gemeten met axe op 390 (ernstig, link-name). */
@media (max-width: 40rem) {
    .vca-bel__nummer {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
}

.vca-voet__raster {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: var(--ruimte-12, 3rem) 0 var(--ruimte-6, 1.5rem);
}

/* Een link in de voet is op een telefoon een doelwit voor een duim, geen regel
   tekst. Vijfendertig pixels hoog is te weinig; wie mist, belandt op de link
   ernaast. Vierenveertig is het minimum dat Apple en Google allebei aanhouden. */
.vca-voet__raster a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.25rem 0;
}

@media (min-width: 48rem) {
    .vca-voet__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.vca-voet__slot {
    border-top: 1px solid var(--lijn, rgba(128,128,128,.3));
    padding: 1rem 0 2rem;
}

/* De beelden bij een projectartikel. Twee naast elkaar zodra het past, en
   nooit breder dan de tekstkolom. */
/* Twee kolommen, ook op een telefoon. Veertien foto's van volle breedte onder
   elkaar is anderhalve megabyte en acht seconden op een werf met 4G; in twee
   kolommen volstaat de kleine variant en blijft er een derde van over. Het
   leest bovendien als een reeks in plaats van als een eindeloze rol. */
.vca-beelden {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 1.5rem 0;
}

@media (min-width: 40rem) {
    .vca-beelden { gap: 1rem; }
}

.vca-beelden figure { margin: 0; }

.vca-beelden img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-l, 4px);
}

/* Een knop midden in de lopende tekst.
   De prosa-opmaak zet de kleur van elke link, en die won het van de knopkleur:
   op de materieelpagina stond er wittige tekst op amber, en dat is 1,6 op 1.
   Gemeten met de contrasttoets, niet met het oog, want op een scherm in een
   donkere kamer ziet dat er nog schappelijk uit. */
.prosa a.knop--accent {
    color: var(--op-accent, #16150f);
    text-decoration: none;
}

.prosa a.knop--accent:hover {
    color: var(--op-accent, #16150f);
}

/* De knop onder het offerteformulier.
 *
 * Deze ene knop is de reden dat deze site bestaat: alles ervoor dient om hier
 * te geraken. Ze stond in de platformkleur, dus wit op zwart, en daarmee zag ze
 * eruit als elke andere knop op de bladzijde. Nu draagt ze het amber van de
 * kraan, ze is achtenveertig pixels hoog voor een duim met een werkhandschoen
 * aan, en er loopt traag een glans overheen. Het is het enige dat beweegt op
 * dit scherm; wie alles laat glimmen, heeft niets meer dat opvalt. */
.formulier .knop--hoofd,
form .knop--hoofd {
    position: relative;
    overflow: hidden;
    min-height: 48px;
    padding-inline: var(--ruimte-8, 2rem);
    background: var(--accent, #ffb100);
    color: var(--op-accent, #16150f);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}

.formulier .knop--hoofd:hover,
form .knop--hoofd:hover {
    background: var(--accent-diep, #e09a00);
    color: var(--op-accent, #16150f);
}

.formulier .knop--hoofd::after,
form .knop--hoofd::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inline-size: 45%;
    inset-inline-start: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: vca-glans 3.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes vca-glans {
    0%, 55% { inset-inline-start: -60%; }
    100% { inset-inline-start: 120%; }
}

/* Wie beweging afzet, krijgt ze niet. De knop blijft dan gewoon amber, en dat
   is ruim genoeg om op te vallen. */
@media (prefers-reduced-motion: reduce) {
    .formulier .knop--hoofd::after,
    form .knop--hoofd::after { animation: none; display: none; }
}

/* De oogregel boven de titel in de hero stond op 3,98 tegen het navy. Net te
   weinig voor dertien pixels; wit met wat doorzicht haalt het ruim. */
.vca-hero .oog {
    color: rgba(255, 255, 255, .82);
}

/* ═════════════════════════════════════════════════ de kop met bewegend beeld
 *
 * Wie hiernaar kijkt: een bouwheer of een werfleider die op zijn telefoon
 * zoekt of deze kraan over zijn dak geraakt, vaak buiten, vaak met één hand.
 * Dat bepaalt alles wat hieronder staat. De titel is groot genoeg om in de
 * zon te lezen, de knoppen zijn achtenveertig pixels hoog omdat er een
 * werkhandschoen aan zit, en de drie cijfers die beslissen staan in het
 * eerste scherm en niet drie schermen lager.
 *
 * De foto's schuiven trager weg dan de tekst erop. Dat is geen versiering: het
 * zet de tekst los van het beeld, zodat de kop blijft staan waar hij hoort
 * terwijl de werf eronder wegzakt. De motor van de banners rekent het uit;
 * wie om minder beweging vraagt, krijgt het niet.
 */

.vca-hero--film {
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: grid;
    align-content: end;
    gap: 0;
    min-height: clamp(34rem, 84svh, 54rem);
    padding: 0 0 clamp(1rem, 2vh, 1.4rem);
    background: var(--vca-nacht, #00142c);
    color: #fff;
}

/* ── de beeldlagen ──────────────────────────────────────────────────────── */

.vca-hero__lagen {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.vca-hero__laag {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
}

.vca-hero__laag.is-aan {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.vca-hero__laag.is-weg {
    visibility: visible;
    z-index: 1;
}

/* Zonder JavaScript blijft de eerste werf gewoon staan. Geen leeg vak en geen
   stapel foto's onder elkaar. */
.vca-hero--film:not([data-klaar]) .vca-hero__laag:not(.is-aan) { display: none; }

/* En dan hoort de bediening er ook niet te staan. Een pauzeknop die niets
   pauzeert is erger dan geen pauzeknop: wie erop drukt, denkt dat de site
   stuk is. */
.vca-hero--film:not([data-klaar]) .vca-hero__bediening { display: none; }

/* De overgang zelf. Het oude beeld lost op in het nieuwe; de eerste slide
   zoomt daarbij traag uit, zodat de bladzijde niet stilstaat terwijl iemand
   hem aan het lezen is. Bij de latere slides zou die beweging met de
   crossfade vechten, dus die blijven stil. */
.vca-hero--film[data-klaar] .vca-hero__laag.is-in,
.vca-hero--film[data-klaar] .vca-hero__laag.is-uit {
    animation-duration: var(--ban-overgang, 1100ms);
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    animation-fill-mode: both;
}

.vca-hero--film[data-klaar] .vca-hero__laag.is-in { animation-name: vca-op; }
.vca-hero--film[data-klaar] .vca-hero__laag.is-uit { animation-name: vca-af; }

@keyframes vca-op { from { opacity: 0 } to { opacity: 1 } }
@keyframes vca-af { from { opacity: 1 } to { opacity: 0 } }

.vca-hero__laag:first-child .vca-hero__foto {
    animation: vca-uitzoom 18s cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes vca-uitzoom {
    from { scale: 1.09; }
    to { scale: 1; }
}

.vca-hero__beeld {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Het beeld staat hoger en lager dan zijn kader, zodat het kan schuiven zonder
   dat er onderaan een rand vandaan komt. */
.vca-hero__foto,
.vca-hero__video {
    position: absolute;
    top: -9%;
    left: 0;
    width: 100%;
    height: 118%;
    object-fit: cover;
    display: block;
    transform: translate3d(0, var(--ban-schuif, 0px), 0);
    will-change: transform;
    filter: contrast(1.08) saturate(1.1) brightness(.94);
}

/* De video ligt over de foto van dezelfde werf en neemt het pas over zodra ze
   echt speelt. Lukt dat niet, dan blijft de foto staan en is er geen zwart
   gat waar niemand een verklaring voor heeft. */
/* Het filmpje is een dronebeeld van een leien dak: donkerder dan een foto met
   lucht erin. Zonder deze correctie zakt de hele kop weg zodra het overneemt. */
.vca-hero__video {
    opacity: 0;
    transition: opacity .8s ease;
    z-index: 1;
    filter: contrast(1.06) saturate(1.12) brightness(1.04);
}

/* Met een vertraging, en dat is een keuze. De eerste indruk hoort de kraan op
   de oprit te zijn: die staat er met het merk op en zegt in één blik wat dit
   bedrijf doet. Het dronebeeld van het dak komt daarna, als iemand al aan het
   lezen is. Zonder die twee tellen ziet de bezoeker de foto nooit. */
.vca-hero__video.is-bezig {
    opacity: 1;
    transition-delay: 2.4s;
}

/* De sluier. Drie lagen, en elk heeft zijn reden: van links waar de titel
   staat, van onder waar de bediening staat, en een egale bodem zodat een
   foto van elf uur 's ochtends de witte tekst niet opslokt. Gemeten, niet
   geschat: de titel haalt hiermee ruim boven 7:1. */
.vca-hero__sluier {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(96deg,
            color-mix(in srgb, var(--vca-nacht, #00142c) 94%, transparent) 0%,
            color-mix(in srgb, var(--vca-nacht, #00142c) 74%, transparent) 30%,
            color-mix(in srgb, var(--vca-nacht, #00142c) 22%, transparent) 62%,
            transparent 88%),
        linear-gradient(to top,
            var(--vca-nacht, #00142c) 2%,
            color-mix(in srgb, var(--vca-nacht, #00142c) 58%, transparent) 26%,
            transparent 62%),
        rgb(0 12 26 / calc(var(--vca-waas, .55) * .3));
}

/* ── wat de bladzijde zegt ──────────────────────────────────────────────── */

.vca-hero__binnen {
    position: relative;
    z-index: 2;
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: end;
    padding-block: clamp(4.5rem, 12vh, 7rem) clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 62rem) {
    .vca-hero__binnen { grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .6fr); }
}

.vca-hero--film h1 {
    font-size: clamp(2.4rem, 7vw, 4.6rem);
    line-height: .95;
    letter-spacing: -.035em;
    text-transform: uppercase;
    margin: .5rem 0 1rem;
    text-wrap: balance;
    text-shadow: 0 2px 30px rgb(0 0 0 / .4);
}

.vca-hero--film .vca-hero__tekst {
    max-width: 44ch;
    color: rgba(255, 255, 255, .92);
    text-wrap: pretty;
}

.vca-hero--film .vca-hero__knoppen { margin-top: 1.75rem; }

/* De offerteknop is de reden dat deze kop bestaat. Er loopt traag een glans
   overheen, en het is het enige dat beweegt op dit scherm: wie alles laat
   glimmen, heeft niets meer dat opvalt. Daarom staat de streep onder "Scroll"
   hieronder stil. */
.vca-hero--film .vca-hero__knoppen .knop--accent {
    position: relative;
    overflow: hidden;
    padding-inline: var(--ruimte-8, 2rem);
    box-shadow: 0 2px 0 rgb(0 0 0 / .35);
}

.vca-hero--film .vca-hero__knoppen .knop--accent::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inline-size: 45%;
    inset-inline-start: -60%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / .55), transparent);
    animation: vca-glans 3.6s ease-in-out infinite;
    pointer-events: none;
}

/* ── de drie cijfers die beslissen ──────────────────────────────────────── */

.vca-hero__cijfers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: rgb(255 255 255 / .16);
    border: 1px solid rgb(255 255 255 / .16);
    border-radius: var(--radius-l, 4px);
    overflow: hidden;
}

.vca-hero__cijfers a {
    display: block;
    min-height: 48px;
    padding: .9rem 1.15rem;
    background: rgb(0 18 40 / .68);
    backdrop-filter: blur(10px);
    color: #fff;
    text-decoration: none;
    transition: background .35s ease, padding-inline-start .35s ease, color .35s ease;
}

.vca-hero__cijfers a:hover,
.vca-hero__cijfers a:focus-visible {
    background: var(--accent, #ffb100);
    color: var(--op-accent, #16150f);
    padding-inline-start: 1.6rem;
}

.vca-cijfer__nr {
    display: block;
    font-family: var(--letter-koppen, inherit);
    font-size: clamp(1.7rem, 3.2vw, 2.3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
}

/* De eenheid mag klein zijn, maar niet onleesbaar: op 390 kwam ze met .44em
   op 9,4 pixels uit. Dertien is de ondergrens en die wordt hier afgedwongen. */
.vca-cijfer__nr em {
    font-style: normal;
    font-size: max(.8125rem, .44em);
    margin-inline-start: .15em;
    opacity: .85;
}

.vca-cijfer__wat {
    display: block;
    margin-top: .2rem;
    font-size: .8125rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .82;
}

.vca-cijfer__machine {
    display: block;
    margin-top: .45rem;
    font-size: .8125rem;
    opacity: .62;
}

.vca-hero__cijfers a:hover .vca-cijfer__wat,
.vca-hero__cijfers a:hover .vca-cijfer__machine { opacity: .85; }

/* ── de werf bij het beeld, met de bediening ────────────────────────────── */

.vca-hero__balk {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block-end: 1.1rem;
}

.vca-hero__cases { min-width: 0; }

.vca-hero__case {
    display: grid;
    gap: .18rem;
    max-width: 36rem;
    min-height: 48px;
    align-content: center;
    color: #fff;
    text-decoration: none;
}

/* Een eigen display-waarde wint van wat de browser aan [hidden] geeft. Zonder
   deze regel staan alle werven tegelijk onder elkaar. */
.vca-hero__case[hidden] { display: none; }

.vca-hero__case-oog {
    font-size: .8125rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--accent, #ffb100);
}

.vca-hero__case-titel {
    font-weight: 600;
    font-size: clamp(.95rem, 1.5vw, 1.1rem);
    line-height: 1.3;
}

.vca-hero__pijl {
    display: inline-block;
    margin-inline-start: .35rem;
    transition: transform .35s ease;
}

.vca-hero__case:hover .vca-hero__pijl,
.vca-hero__case:focus-visible .vca-hero__pijl { transform: translateX(.3rem); }

.vca-hero__case:hover .vca-hero__case-titel,
.vca-hero__case:focus-visible .vca-hero__case-titel { color: var(--accent, #ffb100); }

/* Gemeten en niet geschat: op .66 haalde deze regel tegen de donkerste hoek
   van de foto 3,9 op 1. Voor dertien pixels is dat te weinig. */
.vca-hero__case-meta {
    font-size: .8125rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}

.vca-hero__bediening {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: none;
}

/* Achtenveertig bij achtenveertig. Dit is de enige knop in de kop die een duim
   met een werkhandschoen moet kunnen raken zonder de foto eronder te
   verschuiven. */
.vca-hero__pauze {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / .3);
    border-radius: 50%;
    background: rgb(0 18 40 / .55);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: border-color .3s ease, background .3s ease;
}

.vca-hero__pauze:hover { border-color: var(--accent, #ffb100); }
.vca-hero__pauze-speel { display: none; }
.vca-hero__pauze[aria-pressed="true"] .vca-hero__pauze-stil { display: none; }
.vca-hero__pauze[aria-pressed="true"] .vca-hero__pauze-speel { display: block; }

/* De streepjes liggen in een eigen donker bedje. Los op de foto waren ze op
   een lucht van elf uur 's ochtends niet te zien, en een bediening die je moet
   zoeken bestaat niet. */
.vca-hero__punten {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: 0 .55rem;
    border-radius: 999px;
    background: rgb(0 18 40 / .55);
    backdrop-filter: blur(8px);
}

/* De streep is dun; de knop eromheen blijft vierenveertig hoog, want een duim
   is geen muisaanwijzer. */
.vca-hero__punt {
    display: grid;
    align-items: center;
    width: 2.6rem;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.vca-hero__punt-streep {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: rgb(255 255 255 / .45);
    transition: background .3s ease;
}

.vca-hero__punt:hover .vca-hero__punt-streep { background: rgb(255 255 255 / .8); }
.vca-hero__punt.is-aan .vca-hero__punt-streep { background: var(--accent, #ffb100); }

.vca-hero__pauze:focus-visible,
.vca-hero__punt:focus-visible,
.vca-hero__case:focus-visible,
.vca-hero__cijfers a:focus-visible {
    outline: 3px solid var(--accent, #ffb100);
    outline-offset: 3px;
}

/* ── de voetregel van de kop ────────────────────────────────────────────── */

.vca-hero__onder {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block-start: 1.1rem;
    border-top: 1px solid rgb(255 255 255 / .16);
}

.vca-hero__mini {
    font-size: .8125rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
}

.vca-hero__mini--link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: rgba(255, 255, 255, .86);
    text-decoration: none;
}

.vca-hero__mini--link:hover { color: var(--accent, #ffb100); }

.vca-hero__lijn {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--accent, #ffb100), transparent 60%);
    position: relative;
    overflow: hidden;
}

/* Deze streep bewoog mee. Twee dingen die tegelijk bewegen vechten om de
   aandacht, en de offerteknop hierboven hoort te winnen. */

.vca-hero__adres { display: none; }

/* ── smalle schermen ────────────────────────────────────────────────────── */

@media (max-width: 61.99rem) {
    .vca-hero__cijfers {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1px;
    }

    .vca-hero__cijfers a { padding: .7rem .6rem; }
    .vca-cijfer__nr { font-size: clamp(1.3rem, 5.5vw, 1.8rem); }

    /* Naast elkaar op een telefoon past "DOORRIJBREEDTE" in kapitalen met
       letterafstand niet in een derde van 390 pixels: het woord liep uit zijn
       vakje en werd afgesneden. In kleine letters past het wel, en er valt
       niets weg. */
    .vca-cijfer__wat {
        font-size: .8125rem;
        letter-spacing: .01em;
        text-transform: none;
        overflow-wrap: anywhere;
    }

    .vca-cijfer__machine { display: none; }
}

@media (max-width: 45rem) {
    .vca-hero__balk {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
    }

    /* Op een telefoon hoort de hele kop in één scherm te passen: wie de
       knoppen pas na een veeg ziet, belt niet. De aanloop boven de oogregel
       gaat er daarom af en de leadzin wordt een maat kleiner. */
    .vca-hero__binnen { padding-block-start: 2.25rem; }
    .vca-hero--film .vca-hero__tekst { font-size: 1rem; }
    .vca-hero--film .vca-hero__knoppen { margin-top: 1.25rem; }

    .vca-hero__bediening { justify-content: space-between; }

    /* De streepjes mogen de breedte delen die overblijft, maar `width: 100%`
       levert in een flexrij een knop van nul pixels op: de inhoud is een
       streepje van drie hoog en heeft zelf geen breedte. Gemeten op 390 met de
       tikdoelentoets: vier knoppen van 0 bij 44. */
    .vca-hero__punten { flex: 1 1 auto; justify-content: space-between; }
    .vca-hero__punt { flex: 1 1 auto; width: auto; min-width: 2.2rem; max-width: 4rem; }
}

@media (min-width: 45rem) {
    .vca-hero__adres { display: block; }
}

/* ── wie stilstand vraagt, krijgt ze ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .vca-hero__foto,
    .vca-hero__video,
    .vca-hero__laag {
        transform: none !important;
        transition: none !important;
        animation: none !important;
        scale: none !important;
    }

    .vca-hero__video { display: none; }
    .vca-hero--film .vca-hero__knoppen .knop--accent::after { animation: none; display: none; }
}

/* ═══════════════════════════════════════════════ de binnenbladzijden, 19 sept
 *
 * Sven: "de home template is zalig, al de rest is zoutloze soep." Hij had
 * gelijk, en het verschil zat niet in de kleuren maar in het register: de
 * startpagina opende met een navy band en de binnenbladzijden met een kale h1
 * op zwart. Dezelfde site in twee talen.
 *
 * Wat hieronder staat, is de band die ze nu allemaal delen, plus het weinige
 * dat van déze klant is en niet in een kernblok hoort.
 */

/* De kopband van een binnenbladzijde. Iets minder hoog dan die van de
   startpagina: daar is het de bladzijde zelf, hier is het de aanloop. */
.vca-hero--binnen {
    padding-block: var(--ruimte-10, 2.5rem) var(--ruimte-12, 3rem);
}

.vca-hero--binnen h1 { font-size: clamp(2rem, 5vw, 3.2rem); }

/* De kopband met wisselende foto's. Dezelfde dekking als de beeldbanden
   verderop op de bladzijde: de foto blijft textuur, de tekst blijft leesbaar
   op elke foto die erin komt te staan. */
.vca-hero--binnen-beeld {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

.vca-hero__wisselgrond {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.vca-hero__wisselgrond .wisselt-laag {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 55%;
    opacity: 0;
    transition: opacity 1200ms ease;
}

.vca-hero__wisselgrond .wisselt-laag.is-aan { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .vca-hero__wisselgrond .wisselt-laag { transition: none; }
}

.vca-hero--binnen-beeld::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--vca-zwart) 96%, transparent) 0%,
        color-mix(in srgb, var(--vca-nacht) 88%, transparent) 42%,
        color-mix(in srgb, var(--vca-zwart) 96%, transparent) 100%
    );
}

/* De kruimels staan in de navy band en niet erboven: anders zweeft er een
   grijze regel tussen de kop en de band, en dan begint de bladzijde twee keer. */
.vca-hero--binnen .kruimels,
.vca-hero--binnen nav {
    margin-block-end: var(--ruimte-5, 1.25rem);
}

.vca-hero--binnen .kruimels a,
.vca-hero--binnen nav a { color: rgba(255, 255, 255, .78); }
.vca-hero--binnen .kruimels a:hover,
.vca-hero--binnen nav a:hover { color: #fff; }

.vca-blad { padding-block: var(--ruimte-10, 2.5rem) var(--ruimte-16, 4rem); }

/* ── materieel ───────────────────────────────────────────────────────────── */

/* De eerste machinekaart heeft geen streep erboven nodig: daar staat de navy
   band al. Een streep vlak onder een kleurvlak leest als een fout. */
.vca-blad .blok--machine:first-of-type { border-block-start: 0; padding-block-start: 0; }

.vca-erbij {
    margin-block-start: var(--ruimte-12, 3rem);
    padding-block-start: var(--ruimte-8, 2rem);
    border-block-start: 2px solid var(--lijn, rgba(128, 128, 128, .3));
}

.vca-erbij__lijst {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--lijn, rgba(128, 128, 128, .3));
    border: 1px solid var(--lijn, rgba(128, 128, 128, .3));
    border-radius: var(--radius-l, 4px);
    overflow: hidden;
}

@media (min-width: 46rem) {
    .vca-erbij__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vca-erbij__lijst li {
    padding: 1rem 1.1rem;
    background: var(--grond, #16150f);
}

.vca-erbij__lijst strong {
    display: block;
    margin-block-end: .25rem;
    font-family: var(--kop-font);
    font-size: 1.05rem;
}

.vca-erbij__lijst span { color: var(--inkt-gedempt); font-size: .94rem; }

/* De laatste zet. Amberen rand en verder niets: het is het enige blok op de
   bladzijde dat een kleur draagt, dus het valt op zonder te schreeuwen. */
.vca-twijfel {
    margin-block-start: var(--ruimte-12, 3rem);
    padding: var(--ruimte-8, 2rem);
    border: 2px solid var(--accent, #ffb100);
    border-radius: var(--radius-l, 4px);
}

.vca-twijfel h2 { margin: 0 0 .5rem; }
.vca-twijfel p { margin: 0 0 1.2rem; max-width: 52ch; color: var(--inkt-gedempt); }

.vca-twijfel__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0;
}

/* ── verkeersborden ──────────────────────────────────────────────────────── */

.vca-wat {
    margin-block: var(--ruimte-10, 2.5rem);
}

.vca-wat__lijst {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .5rem;
}

.vca-wat__lijst li {
    position: relative;
    padding-inline-start: 1.9rem;
    min-block-size: 32px;
    display: flex;
    align-items: center;
}

/* Een vinkje getekend met twee streepjes, want een lijstbolletje zegt "er zijn
   er nog" en een vinkje zegt "dit zit erbij". Dat is precies het verschil dat
   deze lijst moet maken. */
.vca-wat__lijst li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: .55em;
    inline-size: 11px;
    block-size: 6px;
    border-inline-start: 2.5px solid var(--accent, #ffb100);
    border-block-end: 2.5px solid var(--accent, #ffb100);
    transform: rotate(-45deg);
}

/* De inline-marge moet er expliciet af: een <figure> krijgt van de browser
   veertig pixels aan weerskanten, en op een scherm van 390 is dat tachtig
   pixels beeld die zomaar wegvallen. Gemeten, niet ingeschat. */
.vca-beeldband {
    margin-block: var(--ruimte-8, 2rem);
    margin-inline: 0;
}

.vca-beeldband img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-l, 4px);
}

/* ── over ons ────────────────────────────────────────────────────────────── */

.vca-troeven {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin-block: var(--ruimte-10, 2.5rem);
    padding: 0;
    list-style: none;
    background: var(--lijn, rgba(128, 128, 128, .3));
    border: 1px solid var(--lijn, rgba(128, 128, 128, .3));
    border-radius: var(--radius-l, 4px);
    overflow: hidden;
}

@media (min-width: 52rem) {
    .vca-troeven { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.vca-troeven li { padding: 1.4rem 1.3rem; background: var(--grond, #16150f); }

/* Dezelfde reden als bij de blokken: het amber haalt tegen wit geen vier op
   één. Op de lichte stand wint de tekstveilige variant die de huid uitrekent,
   op de donkere het volle accent. */
.vca-troeven h2 {
    margin: 0 0 .5rem;
    font-size: 1.2rem;
    color: var(--accent-tekst, var(--accent, #ffb100));
}

@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]) .vca-troeven h2 { color: var(--accent, #ffb100); }
}

:root[data-thema="donker"] .vca-troeven h2 { color: var(--accent, #ffb100); }

.vca-troeven p { margin: 0; color: var(--inkt-gedempt); font-size: .96rem; }

/* ── de werven: de lijst ─────────────────────────────────────────────────── */

.vca-lijst {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    margin: 1.2rem 0 2rem;
}

@media (min-width: 46rem) { .vca-lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } }
@media (min-width: 72rem) { .vca-lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* De kaart is nu een foto met een band eronder. Dat is de hele ingreep op deze
   bladzijde: honderdtien werven met eigen foto's stonden er als honderdtien
   grijze tekstvakjes, terwijl die foto's het beste zijn wat deze zaak heeft. */
.vca-kaart {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--lijn, rgba(128, 128, 128, .3));
    border-radius: var(--radius-l, 4px);
    text-decoration: none;
    color: inherit;
    background: var(--paneel, #1c1b14);
    min-block-size: 100%;
    transition: border-color .15s ease, transform .15s ease;
}

.vca-kaart:hover { border-color: var(--accent, #ffb100); transform: translateY(-2px); }
.vca-kaart:focus-visible { outline: 3px solid var(--accent, #ffb100); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .vca-kaart { transition: none; }
    .vca-kaart:hover { transform: none; }
}

.vca-kaart__beeld {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--banier, #0d0c08);
    overflow: hidden;
}

.vca-kaart__beeld img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* Welke kraan er gestaan heeft, op het beeld zelf. Zo hoeft de bezoeker de
   titel niet te lezen om te zien of deze werf op de zijne lijkt. */
.vca-kaart__etiket {
    position: absolute;
    inset-block-end: .45rem;
    inset-inline-start: .45rem;
    padding: .18rem .5rem;
    background: rgb(0 0 0 / .72);
    color: #fff;
    font: 600 .72rem/1.3 var(--kop-font);
    letter-spacing: .04em;
    border-radius: 2px;
}

.vca-kaart__body { padding: .8rem .9rem 1rem; }

.vca-kaart__titel {
    display: block;
    font-family: var(--kop-font);
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.25;
}

.vca-kaart__tekst {
    display: -webkit-box;
    margin-block-start: .35rem;
    font-size: .88rem;
    line-height: 1.4;
    color: var(--inkt-gedempt);
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── de werf zelf ────────────────────────────────────────────────────────── */

/* De feiten van een werf, als strook onder de kop. Wie op zoek is naar een
   vergelijkbare werf, leest enkel deze regel. */
.vca-feiten {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-block: 0 var(--ruimte-8, 2rem);
    padding: 0;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-l, 4px);
    overflow: hidden;
}

.vca-feiten li {
    flex: 1 1 8rem;
    padding: .7rem .9rem;
    border-inline-start: 1px solid rgba(255, 255, 255, .22);
}

.vca-feiten li:first-child { border-inline-start: 0; }

.vca-feiten strong {
    display: block;
    font-family: var(--kop-font);
    font-size: 1.05rem;
}

.vca-feiten span {
    display: block;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .72;
}

.vca-film { margin: 1.5rem 0; }

.vca-film video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-l, 4px);
    background: #000;
}

.vca-film figcaption {
    font-size: .9375rem;
    opacity: .75;
    margin-top: .5rem;
}

/* Vorige en volgende werf. Zonder deze twee is een artikel een doodlopend
   straatje: honderdtien werven en geen enkele weg van de ene naar de andere. */
.vca-buren {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin-block: var(--ruimte-12, 3rem) 0;
    padding-block-start: var(--ruimte-8, 2rem);
    border-block-start: 1px solid var(--lijn, rgba(128, 128, 128, .3));
}

@media (min-width: 40rem) { .vca-buren { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Deze twee zien eruit als knoppen en ze worden ook zo gebruikt: het is de weg
   naar de volgende werf. Dan hoort de rand ook een rand te zijn. Met de
   haarlijn kwam ze op 1,28 tegen de achtergrond uit, gemeten op 390 op
   19 september 2026. */
.vca-buren a {
    display: block;
    padding: .9rem 1rem;
    min-block-size: 44px;
    border: 1px solid color-mix(in srgb, var(--inkt) 45%, transparent);
    border-radius: var(--radius-l, 4px);
    text-decoration: none;
    color: inherit;
}

.vca-buren a:hover { border-color: var(--accent, #ffb100); }

.vca-buren span {
    display: block;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--inkt-gedempt);
    margin-block-end: .2rem;
}

.vca-buren strong { font-family: var(--kop-font); font-weight: 600; }
.vca-buren__volgende { text-align: end; }

/* ── contact ─────────────────────────────────────────────────────────────── */

.vca-contact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 62rem) {
    .vca-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 3rem; }
    .vca-contact__zij { position: sticky; inset-block-start: 1.5rem; }
}

.vca-gegevens {
    margin: 0 0 1.5rem;
    padding: 1.2rem;
    border: 1px solid var(--lijn, rgba(128, 128, 128, .3));
    border-radius: var(--radius-l, 4px);
}

.vca-gegevens dt {
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--inkt-gedempt);
    margin-block-start: .9rem;
}

.vca-gegevens dt:first-of-type { margin-block-start: 0; }

.vca-gegevens dd {
    margin: .15rem 0 0;
    font-family: var(--kop-font);
    font-size: 1.1rem;
}

.vca-gegevens dd a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    color: var(--accent-tekst, var(--accent, #ffb100));
}

@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]) .vca-gegevens dd a { color: var(--accent, #ffb100); }
}

:root[data-thema="donker"] .vca-gegevens dd a { color: var(--accent, #ffb100); }

.vca-formkop { margin: 0 0 .35rem; font-size: clamp(1.4rem, 3vw, 1.8rem); }

.vca-formkop__zin {
    margin: 0 0 1.5rem;
    max-width: 46ch;
    color: var(--inkt-gedempt);
}

/* De vragenblokken hebben boven zich een oogregel; zonder deze marge plakt ze
   tegen het blok erboven. */
.vca-vragen { margin-block: var(--ruimte-10, 2.5rem); }

/* ── tikdoelen, nagemeten in plaats van ingeschat ────────────────────────────
 *
 * Gemeten op 390 pixels met een echt venster: het logo in de kop was 35 pixels
 * hoog en de kruimels 21. Dat is onder de 44 die Apple en Google allebei
 * aanhouden, en onder de 24 die de toegankelijkheidsnorm als ondergrens zet
 * voor een link in een regel. Op een werf met een werkhandschoen aan is dat het
 * verschil tussen terugkeren en verkeerd klikken. */
.merk {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
}

.kruimels a,
.kruimels span {
    display: inline-flex;
    align-items: center;
    min-block-size: 26px;
}

/* Zesentwintig haalt de norm en niet de praktijk. Op een telefoon is de kruimel
   de terugknop na een werf, en die wordt met een duim geraakt, vaak met een
   handschoen aan. Op 390 gemeten op 19 september 2026: "Home" was 35 bij 26 en
   "Projecten" 54 bij 26. Op een bureauscherm blijft het 26, want daar ligt een
   muis. */
@media (max-width: 40rem) {
    .kruimels a { min-block-size: 44px; }
}


/* ═════════════════════════════════════════ de banden van de startpagina ══
 *
 * De startpagina was één smalle kolom lopende tekst onder een brede kop. Dat
 * leest als een brief en niet als een zaak. Wat er nu staat zijn banden over
 * de volle breedte, elk met een eigen grond, in een ritme van zwart, navy en
 * beeld.
 *
 * De band loopt van rand tot rand; de tekst erin blijft in het omhulsel en
 * dus leesbaar. Die twee scheiden is het hele punt: een kolom die met de band
 * meegroeit, wordt op een bureauscherm honderdveertig tekens breed en dan
 * leest niemand ze nog.
 */

.vca-sectie {
    padding-block: var(--vca-band);
}

.vca-sectie--zwart {
    background: var(--vca-zwart);
    color: var(--vca-op-donker);
}

.vca-sectie--navy {
    background: var(--vca-navy);
    color: var(--vca-op-donker);
}

.vca-sectie--diep {
    background: var(--vca-nacht);
    color: var(--vca-op-donker);
}

/* Op een donkere band draaien de blokken hun inkt mee. Zonder deze regels
   zetten de blokken uit de kern hun eigen grondkleur op een band die er al
   een heeft, en dan staat er een lichter vlak midden in het navy. */
.vca-sectie--zwart,
.vca-sectie--navy,
.vca-sectie--diep,
.vca-sectie--beeld,
.vca-sectie--slot {
    --blok-inkt: var(--vca-op-donker);
    --blok-inkt-zacht: var(--vca-op-donker-zacht);
    /* En de flauwste inkt erbij. Zonder deze regel bleef het onderschrift
       onder de bereiktekening de bleke inkt van de lichte stand houden: op
       navy kwam dat op 2,4 tegen 1 uit, en dan leest niemand op een werf nog
       waar die tekening voor staat. Een menging wordt uitgerekend waar ze
       geschreven staat, dus de wortel kan dit niet voor een band doen. */
    --blok-flauw: rgba(255, 255, 255, .72);
    --blok-lijn: var(--vca-lijn-donker);
    --blok-lijn-veld: var(--vca-lijn-donker);
    --blok-grond: transparent;
    --blok-accent-tekst: var(--vca-oker);
    /* Een kaart op een band is een tint donkerder dan de band zelf. Op navy
       werkt zwart met wat doorschijn beter dan een vaste kleur: wijzigt de
       klant het navy in het beheer, dan schuift de kaart mee. */
    --blok-paneel: color-mix(in srgb, #000 32%, transparent);
    --blok-nacht: var(--vca-nacht);
}

.vca-sectie--zwart { --blok-paneel: #0b1119; }

/* Een werfkaart op een donkere band draait mee. Ze stond op --paneel en erfde
   haar inkt van de band: een wit kaartje met een witte titel erop, en dan
   staat er op de startpagina drie keer een foto met een lege regel eronder.
   Gezien op 20 september 2026 door ernaar te kijken en de titel niet te
   vinden. De kaart krijgt hier dezelfde behandeling als een blok op diezelfde
   band: een tint donkerder dan de band, een lijn die meeschuift met de kleur
   van de klant, en de lichte inkt. */
.vca-sectie--zwart .vca-kaart,
.vca-sectie--navy .vca-kaart,
.vca-sectie--diep .vca-kaart,
.vca-sectie--beeld .vca-kaart,
.vca-sectie--slot .vca-kaart {
    background: var(--blok-paneel);
    border-color: var(--vca-lijn-donker);
    color: var(--vca-op-donker);
}

.vca-sectie--zwart .vca-kaart__tekst,
.vca-sectie--navy .vca-kaart__tekst,
.vca-sectie--diep .vca-kaart__tekst,
.vca-sectie--beeld .vca-kaart__tekst,
.vca-sectie--slot .vca-kaart__tekst {
    color: var(--vca-op-donker-zacht);
}

/* Op een beeldband is een half doorzichtige kaart onleesbaar: de foto komt er
   dwars doorheen. Daar is ze dus dekkend. */
.vca-sectie--beeld { --blok-paneel: color-mix(in srgb, var(--vca-nacht) 88%, #000); }

/* De spectrumlijn van de blokkenbank is een regenboog. Die hoort bij de
   verkooppagina van het huis en niet bij een zaak met drie kleuren: op de
   troefkaarten stond er een groene streep naast navy en oker. Hier is het
   dezelfde lijn, in het amber van de kraan.

   De wortel volstaat niet: de bank zet het verloop op `.blok` zelf, en haar
   stijlblad laadt na dit blad. Vandaar `:root .blok`, één stap zwaarder. Zo
   staat de omzetting waar de bank ze aanwijst, in het thema van de klant. */
:root .blok,
:root .blok-knop,
:root .blok-vergroot {
    --blok-spectrum: linear-gradient(180deg, var(--accent, #ffb100), color-mix(in srgb, var(--accent, #ffb100) 25%, transparent));
}

.vca-sectie h2 {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -.02em;
}

.vca-sectie__kop {
    margin-block-end: clamp(2rem, 4vw, 3.25rem);
}

.vca-sectie__lead {
    margin: 1rem 0 0;
    /* Zeventig tekens. Breder leest niemand, ook niet in een band van
       dertienhonderd pixels. */
    max-inline-size: 66ch;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    color: var(--vca-op-donker-zacht);
}

/* De kop met de doorverwijzing ernaast. Op een telefoon onder elkaar, want
   naast elkaar wordt de link daar acht pixels breed. */
.vca-sectie__kop--rij {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.vca-meer {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-block-size: 44px;
    color: var(--vca-oker);
    font-family: var(--kop-font, inherit);
    font-weight: 600;
    text-decoration: none;
}

.vca-meer:hover { text-decoration: underline; }
.vca-meer:focus-visible { outline: 3px solid var(--vca-oker); outline-offset: 3px; }

/* ── de machinekaarten op een band ────────────────────────────────────────
   De kaart uit de kern trekt een lijn boven zich om de kaarten van elkaar te
   scheiden. De eerste staat hier vlak onder de sectiekop en heeft die lijn
   niet nodig. */
.vca-sectie .blok--machine:first-of-type { border-block-start: 0; padding-block-start: 0; }

/* ── de cijferrij ─────────────────────────────────────────────────────────
   De getallen lopen op zodra ze in beeld komen. Het eindgetal staat gewoon in
   de bladzijde: zonder script, zonder waarnemer of bij minder beweging staat
   het er meteen goed. Nooit een leeg vak. */

.vca-cijferrij {
    list-style: none;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    padding: 0;
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--vca-lijn-donker);
    border: 1px solid var(--vca-lijn-donker);
}

@media (min-width: 52rem) {
    .vca-cijferrij { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.vca-cijferrij li {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: clamp(1rem, 2.5vw, 1.6rem);
    background: var(--vca-nacht);
}

.vca-sectie--diep .vca-cijferrij li { background: var(--vca-zwart); }

.vca-cijferrij__nr {
    font-family: var(--kop-font, inherit);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1;
    letter-spacing: -.03em;
    /* Cijfers van gelijke breedte, anders springt de rij bij elke stap van de
       teller. Dat is het verschil tussen een getal dat oploopt en een getal
       dat staat te trillen. */
    font-variant-numeric: tabular-nums;
}

.vca-cijferrij__nr em {
    font-style: normal;
    font-size: .38em;
    margin-inline-start: .12em;
    color: var(--vca-oker);
}

.vca-cijferrij__wat {
    font-size: .88rem;
    line-height: 1.45;
    color: var(--vca-op-donker-zacht);
}

/* ── de vragen op een band ────────────────────────────────────────────────
   De uitklappers blijven binnen een leesbare kolom; de band eromheen niet. */
.vca-vragen { max-inline-size: 74ch; }

/* ── de slotband ──────────────────────────────────────────────────────────
 *
 * Het beeld draagt de band en het navy legt zich erover, zodat de knop
 * leesbaar blijft op elke foto die de klant er morgen in zet. Staat er geen
 * foto, dan is het gewoon navy: een band die leeg oogt omdat een beeld
 * ontbreekt, is erger dan een band zonder beeld.
 */

.vca-sectie--beeld,
.vca-sectie--slot {
    position: relative;
    isolation: isolate;
    background: var(--vca-nacht);
    color: var(--vca-op-donker);
    overflow: clip;
}

.vca-sectie--beeld::before,
.vca-sectie--slot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--vca-bandbeeld, none);
    background-size: cover;
    background-position: center 62%;
}

.vca-sectie--beeld::after,
.vca-sectie--slot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* Een band waarvan de inhoud de volle breedte gebruikt, heeft een dekking
   nodig die overal even zwaar is. Met het schuine verloop van de slotband
   stonden de cijfers rechts op een foto van gele waarschuwingsstrepen, en dan
   is er geen contrast meer. De foto blijft dus als textuur en als diepte en
   niet als beeld om naar te kijken. */
.vca-sectie--beeld::after {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--vca-zwart) 96%, transparent) 0%,
            color-mix(in srgb, var(--vca-nacht) 88%, transparent) 42%,
            color-mix(in srgb, var(--vca-zwart) 96%, transparent) 100%
        );
}

/* De slotband draagt haar tekst enkel links, en daar mag de kraan rechts dus
   wél te zien zijn. Dat is het verschil tussen textuur en beeld. */
.vca-sectie--slot::after {
    background: linear-gradient(
        100deg,
        color-mix(in srgb, var(--vca-nacht) 94%, transparent) 0%,
        color-mix(in srgb, var(--vca-nacht) 80%, transparent) 46%,
        color-mix(in srgb, var(--vca-nacht) 52%, transparent) 100%
    );
}

.vca-slot h2 {
    margin: 0;
    max-inline-size: 22ch;
}

.vca-slot__tekst {
    margin: 1rem 0 0;
    max-inline-size: 58ch;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    color: var(--vca-op-donker-zacht);
}

.vca-slot__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin: 2rem 0 0;
}

.vca-slot__knoppen .knop { min-height: 48px; }

/* De enige knop die beweegt op deze bladzijde. Dezelfde glans als onder het
   offerteformulier, want het is dezelfde handeling. */
.vca-slot__knoppen .knop--hoofd {
    position: relative;
    overflow: hidden;
    padding-inline: var(--ruimte-8, 2rem);
    background: var(--vca-oker);
    color: var(--op-accent, #16150f);
    border: 0;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}

.vca-slot__knoppen .knop--hoofd::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -60%;
    inline-size: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: vca-glans 4.5s ease-in-out infinite;
}

@keyframes vca-glans {
    0%, 55% { transform: translateX(0); }
    85%, 100% { transform: translateX(380%); }
}

@media (prefers-reduced-motion: reduce) {
    .vca-slot__knoppen .knop--hoofd::after { animation: none; display: none; }
}

/* ── de werfkaarten op de startpagina ─────────────────────────────────────
   Drie naast elkaar en niet vier: dit is een greep uit het archief en geen
   archief. Met vier lijkt het een lijst die onvolledig is. */
.vca-lijst--drie { margin: 0; }

@media (min-width: 46rem) { .vca-lijst--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .vca-lijst--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── twee kolommen binnen een band ────────────────────────────────────────
   De kop links, de inhoud rechts. Gebruikt bij de vragen: in één kolom bleef
   de rechterhelft van de band leeg en las de sectie als een bladzijde die
   halverwege ophoudt. Op een telefoon staan ze gewoon onder elkaar. */

.vca-split {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 56rem) {
    .vca-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.vca-sectie__kop--kolom { margin-block-end: 0; }

/* Het woord uit de kop dat in het amber staat. Schuin gezet leest het als een
   citaat en plakt het bovendien tegen het woord erna, want een cursief in
   kapitalen heeft nauwelijks rechtermarge. Rechtop dus, en enkel de kleur doet
   het werk. */
.vca-hero--film h1 em {
    font-style: normal;
    color: var(--vca-oker);
}