/* =========================== HOMEPAGINA =========================== */
/* Utility-first: layout, spacing, kleuren en dergelijke staan als classes
   in front-page.php (tailwind-css.css). Hier staat enkel wat een utility
   niet kan: vloeiende (clamp) titels, letter-spacing, pseudo-elementen,
   de responsieve laag rond 811px en de custom properties die de JS
   aanstuurt (fotostrook, zwevende dienstenpreview).
   Alle classes beginnen met .home- zodat ze niets van de rest raken. */

/* ----- gedeelde eyebrow-tracking -----
   .pre zelf (kleur, hoofdletters, grootte) staat al in style.css, hier komt
   enkel de letterspatiëring bovenop voor de kleine bijschriften. */

.home-head .pre,
.home-faq__kop .pre,
.home-strook__label,
.home-step__num {
    letter-spacing: 0.1em;
}

.home-head .pre,
.home-faq__kop .pre {
    font-size: var(--font-size-xsmall);
}

/* ----- titels, vloeiend van mobiel naar desktop -----
   Deze maten staan niet op de utility-schaal (het zijn geen vaste stappen
   maar een curve tussen twee waarden), dus die blijven hier staan. */

.home-head__title {
    font-size: clamp(1.6rem, 6.8vw, 2.1rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.home-hero {
    padding-top: clamp(56px, 9vw, 150px);
    padding-bottom: clamp(48px, 6vw, 120px);
}

.home-hero__inner {
    max-width: 1400px;
}

.home-hero__title {
    position: relative;
    font-size: clamp(1.95rem, 8.4vw, 2.75rem);
    line-height: 1.3;
    letter-spacing: -0.025em;
}

/* ----- penseelstreek onder "blijven hangen" / "klanten opleveren" -----
   wcreate-animation.js bouwt per regel (getClientRects()) een echte
   .home-hero__brush-svg met een path op de werkelijke pixelbreedte van die
   regel (viewBox = exacte breedte/hoogte, geen uitrekking), met een vast
   krulletje rond twee derde van de lijn. stroke-dashoffset laat de lijn
   intekenen. padding-bottom geeft er ruimte voor onder de tekst. */
.home-hero__brush {
    padding-bottom: 0.15em;
}

.home-hero__brush-svg {
    position: absolute;
    overflow: visible;
    pointer-events: none;
}

/* even breed houden als de titel erboven, anders springt de tekst eruit.
   "ch" gaat niet op want dat rekent tegen het eigen (kleinere) lettertype
   van deze paragraaf, vandaar een vaste breedte die overeenkomt met de
   gemeten titelbreedte op een breed scherm. */
.home-hero__text {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.home-slot__title {
    font-size: clamp(1.8rem, 7.5vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.home-service__name {
    font-size: clamp(1.2rem, 3.4vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

/* ----- ronde badge met de nieuwste case ----- */

.home-badge {
    width: 118px;
    height: 118px;
    color: var(--colorBlack);
    transition: color 0.4s var(--easing);
}

.home-badge:hover {
    color: var(--colorBasis1);
}

.home-badge__ring {
    fill: currentColor;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    transform-origin: 50% 50%;
}

.home-badge__naam {
    max-width: 78px;
    font-size: 0.82rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.home-badge::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: 50%;
    transition: border-color 0.4s var(--easing);
}

.home-badge:hover::after {
    border-color: var(--colorBasis1);
}

/* bewijsregel: bolletje tussen de items */

.home-proof__item:not(:last-child)::after {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #d2d2d2;
    margin-left: 10px;
    align-self: center;
}

/* ----- fotostrook -----
   --strook-hoogte/--strook-schaal sturen de breedte/hoogte van elk item aan
   (calc kan geen utility zijn), en de viewport-fade is een gradient. */

.home-strook {
    --strook-hoogte: 260px;
    --strook-schaal: 0.62;
}

.home-strook__viewport::before,
.home-strook__viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(32px, 8vw, 120px);
    z-index: 2;
    pointer-events: none;
}

.home-strook__viewport::before {
    left: 0;
    background: linear-gradient(to right, #fff 0%, #fff 25%, rgba(255, 255, 255, 0) 100%);
}

.home-strook__viewport::after {
    right: 0;
    background: linear-gradient(to left, #fff 0%, #fff 25%, rgba(255, 255, 255, 0) 100%);
}

.home-strook__beeld,
.home-strook__kaart {
    flex: 0 0 auto;
    width: calc(var(--w, 300) * 1px * var(--strook-schaal));
    height: var(--strook-hoogte);
}

/* video bovenop de posterfoto, zichtbaar zodra hij echt speelt */

.home-strook__video {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.home-strook__video.is-playing {
    opacity: 1;
}

/* kaartje met een quote bovenop een foto */

.home-strook__quote-kaart {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
}

.home-strook__label,
.home-strook__naam,
.home-strook__rol {
    font-size: 0.72rem;
}

.home-strook__quote-tekst {
    font-size: 0.82rem;
    line-height: 1.35;
}

/* donkere casekaart tussen de foto's: foto met een sluier eroverheen */

.home-strook__kaart-bg {
    transition: transform 1.2s var(--easing);
}

.home-strook__kaart::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(17, 17, 17, 0.94) 22%, rgba(17, 17, 17, 0.72) 55%, rgba(17, 17, 17, 0.62) 100%);
}

.home-strook__kaart:hover .home-strook__kaart-bg {
    transform: scale(1.05);
}

.home-strook__kaart-top,
.home-strook__kaart-onder {
    position: relative;
    z-index: 2;
}

/* wcreate-main.css zet elke <p> sitewide op #111 (".f-typing, h2, p, h3, ...
   {color:#111}"), dat wint van de text--white op de kaart zelf omdat een
   expliciete regel op het element altijd voor overerving gaat. Vandaar hier
   expliciet wit, anders is de quote onleesbaar op de donkere sluier. */
.home-strook__quote {
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.35;
}

.home-strook__cijfer {
    font-size: 2.2rem;
    line-height: 1;
}

.home-strook__kaart:hover .home-arrow {
    transform: rotate(45deg);
}

/* ----- pijltje op knoppen en links: draait bij hover ----- */

.home-arrow {
    transition: transform 0.45s var(--easing);
}

.home-service__link:hover,
.home-service__link:focus-visible {
    color: var(--colorBasis1);
}

.home-service__link:hover .home-service__arrow,
.home-service__link:focus-visible .home-service__arrow {
    transform: rotate(45deg);
}

/* ----- cases -----
   Titel en resultaatcijfer liggen over de foto, dus die hebben een donkere
   sluier nodig (donker boven en onder, lichter in het midden) om leesbaar
   te blijven ongeacht de foto eronder. Zelfde aanpak als de casekaart in
   de fotostrook en de reviewfoto's hierboven. */

.home-case__media {
    aspect-ratio: 5 / 5;
}

.home-case__sluier {
    background: linear-gradient(to bottom, rgba(17, 17, 17, 0.6) 0%, rgba(17, 17, 17, 0.1) 28%, rgba(17, 17, 17, 0.1) 62%, rgba(17, 17, 17, 0.7) 100%);
}

/* .case--flex h3 (sitewide, voor de cases-pagina) zet met !important
   font-weight en font-size vast, en wint met kleur ook al zonder !important
   omdat class+element specifieker is dan onze losse class. We hebben die
   case--flex class net toegevoegd voor de "View Case"-bol, dus hier
   expliciet specifieker overrulen in plaats van die sitewide regel aan te
   passen (die geldt ook voor de echte cases-pagina). */
.home-case__media .home-case__title {
    color: #fff;
    font-weight: 600 !important;
    font-size: clamp(1.3rem, 2.4vw, 1.6rem) !important;
}

.home-case__figure-label {
    color: #fff;
    max-width: 18ch;
}

/* het resultaatcijfer is het sterkste bewijs op de kaart, dus mag opvallen:
   zelfde schaal als het cijfer op de donkere casekaart in de fotostrook. */
.home-case__figure {
    font-size: clamp(1.8rem, 4vw, 5rem);
    line-height: 1;
}

.home-case__img {
    transition: transform 1.2s var(--easing);
}

.home-case__link:hover .home-case__img {
    transform: scale(1.04);
}

/* ----- werkwijze: de lijn tussen de stappen ----- */

.home-process__line {
    display: none;
}

.home-step__dot {
    top: 3px;
    left: 0;
    width: 13px;
    height: 13px;
}

/* ----- waarom klanten ons graag hebben -----
   Witte sectie (bewust geen dark card zoals de originele BYQ-referentie).
   Opbouw: een sticky intro met drie regels die na elkaar invallen, dan een
   kaart met een rij beelden en een wisselende quote (bureau-versie van de
   zwevende dienstenpreview hierboven), en op mobiel een simpele lijst per
   klant, telkens beeld + eigen quote, geen hover nodig. */

.home-reviews__intro {
    min-height: 60vh;
    position: sticky;
    top: 0;
}

.home-reviews__lijnen {
    display: inline-block;
}

.home-reviews__lijn-mask {
    padding: 0 0.05em 0.18em;
    margin-bottom: -0.18em;
}

.home-reviews__lijn {
    font-size: clamp(1.95rem, 8.4vw, 4.75rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.home-reviews__kaart {
    background: var(--colorBlack);
    padding: 56px 24px;
}

.home-reviews__kaart .home-reviews__tekst,
.home-reviews__kaart .home-reviews__naam,
.home-reviews__kaart p,
.home-reviews__kaart h3 {
    color: #fff;
}

.home-reviews__kaart .home-reviews__bron,
.home-reviews__kaart .home-reviews__rol,
.home-reviews__kaart .home-reviews__labels span {
    color: rgba(255, 255, 255, 0.55);
}

.home-reviews__labels {
    left: 24px;
    right: 24px;
}

.home-reviews__labels--top {
    top: 24px;
}

.home-reviews__labels--bottom {
    bottom: 24px;
}

.home-reviews__rij {
    margin-top: 40px;
}

.home-reviews__beeld {
    aspect-ratio: 3 / 4;
    cursor: pointer;
}

/* de waaier: elk beeld overlapt het vorige en staat lichtjes scheef, zoals
   een stapel foto's op een tafel. Enkel de rij op desktop (.home-reviews__rij),
   de lijst-versie op mobiel (.home-reviews__lijst) blijft gewoon onder elkaar. */
.home-reviews__rij .home-reviews__beeld {
    flex: 0 0 auto;
    width: 17%;
    box-shadow: 0 20px 50px -24px rgba(17, 17, 17, 0.4);
    transition: transform 0.4s var(--easing), z-index 0s;
}

.home-reviews__rij .home-reviews__beeld:not(:first-child) {
    margin-left: -56px;
}

.home-reviews__rij .home-reviews__beeld:nth-child(1) { transform: rotate(-7deg); }
.home-reviews__rij .home-reviews__beeld:nth-child(2) { transform: rotate(4deg); }
.home-reviews__rij .home-reviews__beeld:nth-child(3) { transform: rotate(-5deg); }
.home-reviews__rij .home-reviews__beeld:nth-child(4) { transform: rotate(6deg); }
.home-reviews__rij .home-reviews__beeld:nth-child(5) { transform: rotate(-4deg); }
.home-reviews__rij .home-reviews__beeld:nth-child(6) { transform: rotate(3deg); }

.home-reviews__rij .home-reviews__beeld:hover,
.home-reviews__rij .home-reviews__beeld:focus-visible {
    transform: rotate(0deg) scale(1.12);
    z-index: 10;
}

.home-reviews__sluier {
    background: linear-gradient(to bottom, rgba(17, 17, 17, 0.55) 0%, rgba(17, 17, 17, 0) 35%);
}

/* algemene donkere tint over de foto, verdwijnt bij hover/focus zodat het
   beeld dan lichter wordt en zich duidelijk onderscheidt van de rest. */
.home-reviews__overlay {
    background: rgba(0, 0, 0, 0.32);
    transition: opacity 0.4s var(--easing);
}

.home-reviews__beeld:hover .home-reviews__overlay,
.home-reviews__beeld:focus-visible .home-reviews__overlay {
    opacity: 0;
}

.home-reviews__logo {
    top: 16px;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* Vaste hoogte i.p.v. min-height: de actieve quote blijft altijd absoluut
   gepositioneerd (nooit terug relative), zo bepaalt de langste review niet
   de hoogte van het blok en springt er niets bij het wisselen. Standaard is
   geen enkele quote actief, dat zet de JS pas bij hover/focus. */
.home-reviews__quotes {
    position: relative;
    max-width: 800px;
    height: 300px;
    margin: 40px auto 0;
}

.home-reviews__quote {
    position: absolute;
    inset: 0 0 auto;
    left: 0;
    right: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--easing);
}

.home-reviews__quote.is-actief {
    opacity: 1;
    pointer-events: auto;
}

.home-reviews__tekst {
    line-height: 1.5;
}

.home-reviews__lijst {
    display: block;
}

.home-reviews__lijst .home-reviews__beeld {
    aspect-ratio: 4 / 3;
    cursor: default;
}

.home-reviews__lijst .home-reviews__quote {
    position: static;
    opacity: 1;
    pointer-events: auto;
}

/* ----- klantenlogo's -----
   Zelfde marquee-mechanisme als de fotostrook (zie wcreate-animation.js),
   maar trager en in het wit. */

.home-klanten__viewport::before,
.home-klanten__viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(32px, 8vw, 120px);
    z-index: 2;
    pointer-events: none;
}

.home-klanten__viewport::before {
    left: 0;
    background: linear-gradient(to right, #fff 0%, #fff 25%, rgba(255, 255, 255, 0) 100%);
}

.home-klanten__viewport::after {
    right: 0;
    background: linear-gradient(to left, #fff 0%, #fff 25%, rgba(255, 255, 255, 0) 100%);
}

.home-klanten__logo {
    flex: 0 0 auto;
    height: 94px;
    width: auto;
    opacity: 0.45;
    filter: grayscale(1);
    transition: opacity 0.35s var(--easing);
}

.home-klanten__logo:hover {
    opacity: 0.9;
}

/* ----- diensten met zwevende preview -----
   --px/--py/--tilt/--peek-scale komen van de JS (cursorpositie), dat kan
   geen utility worden. */

.home-peek {
    width: 180px;
    aspect-ratio: 11 / 14;
    box-shadow: 0 30px 60px -30px rgba(17, 17, 17, 0.35);
    opacity: 0;
    transform: translate3d(calc(var(--px, 0px) - 50%), calc(var(--py, 0px) - 50%), 0) rotate(var(--tilt, 0deg)) scale(var(--peek-scale, 0.9));
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-peek.is-peeking {
    opacity: 1;
    --peek-scale: 1;
}

.home-peek__img {
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-peek__img.is-active {
    opacity: 1;
    transform: scale(1);
}

/* .grid--cols-3 staat vast op 3 kolommen op elke breedte, er bestaat geen
   responsieve variant. Cases moeten op mobiel 1 kolom blijven, dus dat
   blijft hier een gewone media query. */

.home-cases__grid {
    grid-template-columns: 1fr;
}

.home-service__link {
    grid-template-columns: 3rem 1fr auto;
    padding: 20px 4px;
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-service__name {
    position: relative;
    width: fit-content;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-service__name::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.12em;
    height: 2px;
    background: var(--colorBasis1);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-service__link:hover .home-service__name,
.home-service__link:focus-visible .home-service__name {
    transform: translateX(0.9rem);
}

.home-service__link:hover .home-service__name::after,
.home-service__link:focus-visible .home-service__name::after {
    transform: scaleX(1);
}

.home-service__arrow {
    transform: translateX(-0.4rem);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-service__link:hover .home-service__arrow,
.home-service__link:focus-visible .home-service__arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ----- blog: zwarte sectie -----
   Dezelfde reden als bij "waarom wcreate": geen bg--secondary, om de
   sitewide witte-link-regel te vermijden. De titel, excerpt en tags komen
   uit the_title()/the_excerpt()/de loop, die kan je geen utility class
   meegeven, dus dat blijft hier als scoped kleur-override staan. */

.home-blog {
    background: var(--colorBlack);
}

.home-blog .home-head__title,
.home-blog .home-head__intro,
.home-blog .pre,
.home-blog h3,
.home-blog p,
.home-blog .b--info,
.home-blog .b--sub--info,
.home-blog .tags,
.home-blog a {
    color: #fff;
}

.home-blog .pre {
    color: var(--colorBasis1);
}

.home-blog .tag,
.home-blog .tags {
    border-color: rgba(255, 255, 255, 0.4);
}

/* geen rode lijn boven het eerste of onder het laatste bericht, enkel als
   scheiding tussen de berichten onderling (bottom--line--red staat als
   utility class op elk bericht, dat annuleren we hier voor het laatste). */
.home-blog .blog--bericht:last-of-type {
    border-bottom: 0;
}

/* de afbeeldingen staan sitewide vast op 500px (ook op de blogarchiefpagina),
   op de homepage mag dat kleiner, de sectie oogde te zwaar. */
.home-blog .img--fit--object img {
    height: 280px;
}

/* ----- faq ----- */

.home-faq__kop {
    max-width: 62ch;
}

.home-faq__kop .home-head__intro a {
    color: var(--colorBlack);
    border-bottom: 1px solid var(--colorBasis1);
    text-decoration: none;
}

.home-faq .faq-question {
    outline: none;
    cursor: pointer;
    transition: color 0.35s var(--easing);
}

.home-faq .faq-question:hover,
.home-faq .faq-question.open {
    color: var(--colorBasis1);
}

.home-faq .faq-answer {
    padding-right: 96px;
}

/* =========================== SECTORZIN =========================== */
/* Homepagina, template-parts/sector-zin.php. Lopende zin met alle sectoren als
   link. Layout en spacing staan als utilities in de template. */

.home-sectorzin__tekst {
    max-width: 34ch;
    font-size: clamp(1.45rem, 5.6vw, 1.9rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
}

/* Het thema geeft elke a en span op mobiel 0.875rem, de links en woordspans erven de zingrootte */
.home-sectorzin__tekst a,
.home-sectorzin__tekst span {
    font-size: inherit;
}

.home-sectorzin__link {
    color: inherit;
    text-decoration: none;
}

.home-sectorzin__voor {
    color: rgba(17, 17, 17, 0.4);
}

.home-sectorzin__naam {
    color: var(--colorBasis1);
}

.home-sectorzin__link:focus-visible {
    outline: 2px solid var(--colorBasis1);
    outline-offset: 4px;
    border-radius: 4px;
}

.home-sectorzin__woord {
    display: inline-block;
}

/* will-change enkel tijdens het scrollen door het blok */
.home-sectorzin__tekst.is-actief,
.home-sectorzin__tekst.is-actief .home-sectorzin__woord {
    will-change: opacity, filter, transform;
}

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

    .home-sectorzin__tekst {
        max-width: 44ch;
        font-size: clamp(2rem, 1rem + 2.4vw, 3.1rem);
    }

    .home-sectorzin__link:hover .home-sectorzin__naam {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 0.14em;
    }
}

/* =========================== DESKTOP (vanaf 812px) =========================== */

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

    .home-head__title {
        font-size: var(--font-size-h1--var);
    }

    .home-hero__title {
        font-size: clamp(2.6rem, 4.4vw, 4.4rem);
        max-width: 23ch;
    }

    .home-hero__text {
        max-width: 880px;
    }

    .home-badge {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 138px;
        height: 138px;
    }

    .home-badge__naam {
        max-width: 92px;
        font-size: 0.92rem;
    }

    .home-badge::after {
        width: 98px;
        height: 98px;
        margin: -49px 0 0 -49px;
    }

    .home-strook {
        --strook-hoogte: 400px;
        --strook-schaal: 1;
    }

    .home-cases__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .home-process__line {
        display: block;
        position: absolute;
        top: 9px;
        left: 0;
        right: 0;
        height: 1px;
        background: #e4e4e4;
    }

    .home-process__fill {
        display: block;
        height: 100%;
        width: 100%;
        background: var(--colorBasis1);
        transform: scaleX(0);
        transform-origin: left center;
    }

    .home-process__steps {
        grid-template-columns: repeat(4, 1fr);
    }

    .home-step__title {
        min-height: 2.4em;
    }

    .home-services__root.is-peeking .home-service:not(:hover) .home-service__link {
        color: rgba(17, 17, 17, 0.4);
    }

    .home-services__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 80px;
    }

    .home-reviews__kaart {
        padding: 96px 80px;
    }

    .home-reviews__lijst {
        display: none;
    }
}

/* =========================== MOBIEL (tot 811px) =========================== */

@media only screen and (max-width: 811px) {

    /* Het basisthema zet op mobiel elke span en div op 0.875rem. Onze titels
       bestaan uit spans, dus die moeten hun eigen grootte terugkrijgen. */
    .home-hero__title span,
    .home-head__title span,
    .home-slot__title span,
    .home-case__title span,
    .home-step__title span,
    .home-reviews__lijn span {
        font-size: inherit;
    }

    /* het basisthema zet h2 op mobiel met !important, dus hier moet dat ook */
    .home-head__title {
        font-size: clamp(1.6rem, 6.8vw, 2.1rem) !important;
    }

    .home-slot__title {
        font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important;
    }

    .home-case__media {
        aspect-ratio: 4 / 3;
    }

    .home-peek, .home-badge, .home-step__dot {
        display: none;
    }

    /* logo's + tussenruimte kleiner, anders past er op mobiel maar 1 logo
       in beeld. Dit maakt gap--128/pr--128 (utility classes in de HTML)
       ongedaan: home.css laadt na tailwind-css.css, dus wint deze regel. */
    .home-klanten__logo {
        height: 50px;
    }

    .home-klanten__set {
        gap: 44px;
        padding-right: 24px;
    }

    .home-service__arrow {
        display: none;
    }

    .home-service__link {
        grid-template-columns: 2.5rem 1fr;
    }

    .home-faq .faq-answer {
        padding-right: 0;
    }

    .home-proof__item:not(:last-child)::after {
        display: none;
    }

    .home-strook__kaart {
        width: max(250px, calc(var(--w, 300) * 1px * var(--strook-schaal)));
        padding: 16px;
    }

    .home-strook__cijfer {
        font-size: 1.7rem;
    }

    .home-strook__label,
    .home-strook__naam,
    .home-strook__rol {
        font-size: 0.68rem;
    }

    .home-strook__quote-tekst {
        font-size: 0.72rem;
    }

    .home-reviews__intro {
        min-height: 0;
        position: relative;
        padding-top: 64px;
        padding-bottom: 32px;
    }

    .home-reviews__lijn {
        font-size: clamp(2.4rem, 13vw, 3.4rem);
    }

    .home-reviews__kaart {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .home-reviews__labels,
    .home-reviews__rij,
    .home-reviews__quotes {
        display: none;
    }
}