/*
 * ============================================================
 * BUSINESS / ZAKELIJK — IDENTITY + APPEARANCE
 * ============================================================
 *
 * Zakelijk =
 * compact
 * vaste assen
 * informatiegedreven
 * KPI / bewijs
 * rechte vlakken
 *
 * Niet:
 * spreadsheet
 * overal randen
 *
 * Palette en mode blijven onafhankelijk.
 * ============================================================
 */

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

body.pb-layout-pack-business {

    --pb-pack-page:
        color-mix(
            in srgb,
            var(--vokk-primary) 1%,
            white
        );

    --pb-pack-surface:
        color-mix(
            in srgb,
            var(--vokk-primary) 4%,
            white
        );

    --pb-pack-surface-alt:
        color-mix(
            in srgb,
            var(--vokk-primary) 7%,
            white
        );

    --pb-pack-dark:
        color-mix(
            in srgb,
            var(--vokk-dark) 95%,
            var(--vokk-primary)
        );

    --pb-pack-line:
        color-mix(
            in srgb,
            var(--vokk-primary) 16%,
            transparent
        );

    --pb-pack-on-dark:
        rgba(255,255,255,.96);

    --pb-pack-muted-dark:
        rgba(255,255,255,.70);
}


/* MEDIUM */

body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-light-page) {

    --pb-pack-page:
        color-mix(
            in srgb,
            var(--vokk-dark) 8%,
            white
        );

    --pb-pack-surface:
        color-mix(
            in srgb,
            var(--vokk-dark) 11%,
            white
        );

    --pb-pack-surface-alt:
        color-mix(
            in srgb,
            var(--vokk-primary) 10%,
            white
        );

    --pb-pack-line:
        color-mix(
            in srgb,
            var(--vokk-primary) 23%,
            transparent
        );
}


/* DARK */

body.pb-layout-pack-business.pb-mode-dark {

    --pb-pack-page:
        color-mix(
            in srgb,
            var(--vokk-darker) 95%,
            var(--vokk-primary)
        );

    --pb-pack-surface:
        color-mix(
            in srgb,
            var(--vokk-dark) 90%,
            var(--vokk-primary)
        );

    --pb-pack-surface-alt:
        color-mix(
            in srgb,
            var(--vokk-dark) 82%,
            var(--vokk-primary)
        );

    --pb-pack-line:
        rgba(255,255,255,.12);
}


/* ============================================================
 * ZAKELIJK HOMEPAGE
 * ============================================================ */


/*
 * Benefits:
 * één formele bewijs-/USP-strook.
 */

body.pb-layout-pack-business
.pb-vokk-benefits {
    background:
        var(--pb-pack-page) !important;
}


body.pb-layout-pack-business
.pb-vokk-benefit-grid,
body.pb-layout-pack-business
.pb-vokk-benefits-grid {
    gap:
        0 !important;

    background:
        var(--pb-pack-dark) !important;
}


body.pb-layout-pack-business
.pb-vokk-benefit {
    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;
}


body.pb-layout-pack-business
.pb-vokk-benefit
+ .pb-vokk-benefit {
    border-left:
        1px solid
        rgba(255,255,255,.11) !important;
}


body.pb-layout-pack-business
.pb-vokk-benefit h3 {
    color:
        var(--pb-pack-on-dark) !important;
}


body.pb-layout-pack-business
.pb-vokk-benefit p {
    color:
        var(--pb-pack-muted-dark) !important;
}


/*
 * Corporate services:
 * vaste rustige layout.
 * Geen speelse asymmetrie.
 */

body.pb-layout-pack-business
.pb-vokk-services {
    background:
        var(--pb-pack-page) !important;
}


/*
 * Zakelijke trust/KPI zones.
 */

body.pb-layout-pack-business
:is(
    .pb-vokk-trust-box,
    .vokk-project-results-grid,
    .vokk-reviews-trust,
    .vokk-detail-process-grid
) {
    background:
        var(--pb-pack-dark) !important;
}


/*
 * Zakelijke informatiepanelen.
 */

body.pb-layout-pack-business
:is(
    .vokk-service-content,
    .vokk-about-story-content,
    .vokk-contact-form-panel,
    .vokk-detail-intro-grid > div:first-child,
    .vokk-detail-benefit,
    .vokk-contact-reassurance-item
) {
    background:
        var(--pb-pack-surface-alt) !important;
}


/*
 * CTA = compact corporate action block.
 */

body.pb-layout-pack-business.pb-cta-variant-d
:is(
    .vokk-services-cta-box,
    .vokk-about-cta-box,
    .vokk-projects-cta-box,
    .vokk-reviews-cta-box,
    .vokk-detail-cta-box
) {
    background:
        var(--pb-pack-dark) !important;
}


/*
 * Geen overbodige table borders.
 */

body.pb-layout-pack-business
:is(
    .vokk-service-row,
    .vokk-about-story-grid,
    .vokk-project-featured-grid
) {
    box-shadow:
        none !important;
}


/*
 * Dark mode surfaces.
 */

body.pb-layout-pack-business.pb-mode-dark
:is(
    .vokk-services-intro,
    .vokk-about-intro,
    .vokk-projects-intro,
    .vokk-contact-main,
    .vokk-detail-intro,
    .vokk-service-benefits,
    .vokk-project-results
) {
    background:
        var(--pb-pack-page) !important;
}

}


/*
 * ============================================================
 * FINAL DARK MODE SURFACE + CONTRAST FIX
 * ============================================================
 *
 * Dark moet ook echt donker zijn.
 * Geen layoutwijzigingen.
 * Geen typographywijzigingen.
 * Alleen surfaces + tekstcontrast.
 * ============================================================
 */

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

/* ============================================================
 * BASIS DARK PAGE/SURFACES
 * ============================================================ */

body.pb-mode-dark.pb-layout-pack-premium,
body.pb-mode-dark.pb-layout-pack-modern,
body.pb-mode-dark.pb-layout-pack-business {
    background:
        var(--pb-pack-page) !important;
}


/*
 * Grote lichte secties naar echte dark surfaces.
 */

body.pb-mode-dark.pb-layout-pack-premium
:is(
    .pb-vokk-light,
    .pb-vokk-benefits,
    .pb-vokk-services,
    .pb-vokk-trust,
    .pb-vokk-process,
    .vokk-services-intro,
    .vokk-services-list,
    .vokk-service-benefits,
    .vokk-about-intro,
    .vokk-about-story,
    .vokk-about-values,
    .vokk-about-experience,
    .vokk-projects-intro,
    .vokk-projects-showcase,
    .vokk-project-featured,
    .vokk-project-results,
    .vokk-reviews-summary,
    .vokk-reviews-list,
    .vokk-reviews-wordpress-ready,
    .vokk-contact-main,
    .vokk-contact-reassurance,
    .vokk-contact-extra,
    .vokk-detail-intro,
    .vokk-detail-benefits,
    .vokk-detail-section,
    .vokk-detail-process,
    .vokk-detail-faq-section
),

body.pb-mode-dark.pb-layout-pack-modern
:is(
    .pb-vokk-light,
    .pb-vokk-benefits,
    .pb-vokk-services,
    .pb-vokk-trust,
    .pb-vokk-process,
    .vokk-services-intro,
    .vokk-services-list,
    .vokk-service-benefits,
    .vokk-about-intro,
    .vokk-about-story,
    .vokk-about-values,
    .vokk-about-experience,
    .vokk-projects-intro,
    .vokk-projects-showcase,
    .vokk-project-featured,
    .vokk-project-results,
    .vokk-reviews-summary,
    .vokk-reviews-list,
    .vokk-reviews-wordpress-ready,
    .vokk-contact-main,
    .vokk-contact-reassurance,
    .vokk-contact-extra,
    .vokk-detail-intro,
    .vokk-detail-benefits,
    .vokk-detail-section,
    .vokk-detail-process,
    .vokk-detail-faq-section
),

body.pb-mode-dark.pb-layout-pack-business
:is(
    .pb-vokk-light,
    .pb-vokk-benefits,
    .pb-vokk-services,
    .pb-vokk-trust,
    .pb-vokk-process,
    .vokk-services-intro,
    .vokk-services-list,
    .vokk-service-benefits,
    .vokk-about-intro,
    .vokk-about-story,
    .vokk-about-values,
    .vokk-about-experience,
    .vokk-projects-intro,
    .vokk-projects-showcase,
    .vokk-project-featured,
    .vokk-project-results,
    .vokk-reviews-summary,
    .vokk-reviews-list,
    .vokk-reviews-wordpress-ready,
    .vokk-contact-main,
    .vokk-contact-reassurance,
    .vokk-contact-extra,
    .vokk-detail-intro,
    .vokk-detail-benefits,
    .vokk-detail-section,
    .vokk-detail-process,
    .vokk-detail-faq-section
) {
    background:
        var(--pb-pack-page) !important;
}


/* ============================================================
 * CONTENTPANELS / KAARTVLAKKEN
 * ============================================================ */

body.pb-mode-dark.pb-layout-pack-premium
:is(
    .pb-vokk-benefit,
    .pb-vokk-service-card,
    .pb-vokk-service-content,
    .pb-vokk-trust-box,
    .pb-vokk-process-item,
    .vokk-service-content,
    .vokk-service-benefit,
    .vokk-about-story-content,
    .vokk-about-value,
    .vokk-about-experience-content,
    .vokk-project-content,
    .vokk-project-featured-content,
    .vokk-project-result,
    .vokk-review-card,
    .vokk-reviews-score,
    .vokk-reviews-wordpress-box,
    .vokk-contact-info,
    .vokk-contact-form-panel,
    .vokk-contact-reassurance-item,
    .vokk-contact-hours,
    .vokk-detail-content,
    .vokk-detail-benefit,
    .vokk-detail-step,
    .vokk-detail-faq-item
),

body.pb-mode-dark.pb-layout-pack-modern
:is(
    .pb-vokk-benefit,
    .pb-vokk-service-card,
    .pb-vokk-service-content,
    .pb-vokk-trust-box,
    .pb-vokk-process-item,
    .vokk-service-content,
    .vokk-service-benefit,
    .vokk-about-story-content,
    .vokk-about-value,
    .vokk-about-experience-content,
    .vokk-project-content,
    .vokk-project-featured-content,
    .vokk-project-result,
    .vokk-review-card,
    .vokk-reviews-score,
    .vokk-reviews-wordpress-box,
    .vokk-contact-info,
    .vokk-contact-form-panel,
    .vokk-contact-reassurance-item,
    .vokk-contact-hours,
    .vokk-detail-content,
    .vokk-detail-benefit,
    .vokk-detail-step,
    .vokk-detail-faq-item
),

body.pb-mode-dark.pb-layout-pack-business
:is(
    .pb-vokk-benefit,
    .pb-vokk-service-card,
    .pb-vokk-service-content,
    .pb-vokk-trust-box,
    .pb-vokk-process-item,
    .vokk-service-content,
    .vokk-service-benefit,
    .vokk-about-story-content,
    .vokk-about-value,
    .vokk-about-experience-content,
    .vokk-project-content,
    .vokk-project-featured-content,
    .vokk-project-result,
    .vokk-review-card,
    .vokk-reviews-score,
    .vokk-reviews-wordpress-box,
    .vokk-contact-info,
    .vokk-contact-form-panel,
    .vokk-contact-reassurance-item,
    .vokk-contact-hours,
    .vokk-detail-content,
    .vokk-detail-benefit,
    .vokk-detail-step,
    .vokk-detail-faq-item
) {
    background:
        var(--pb-pack-surface) !important;

    border-color:
        var(--pb-pack-line) !important;
}


/* ============================================================
 * ALGEMENE TEKSTKLEUREN OP DARK
 * ============================================================ */

body.pb-mode-dark
:is(
    .pb-layout-pack-premium,
    .pb-layout-pack-modern,
    .pb-layout-pack-business
)
:is(
    .pb-vokk-light,
    .pb-vokk-benefits,
    .pb-vokk-services,
    .pb-vokk-trust,
    .pb-vokk-process,
    .vokk-services-intro,
    .vokk-services-list,
    .vokk-service-benefits,
    .vokk-about-intro,
    .vokk-about-story,
    .vokk-about-values,
    .vokk-about-experience,
    .vokk-projects-intro,
    .vokk-projects-showcase,
    .vokk-project-featured,
    .vokk-project-results,
    .vokk-reviews-summary,
    .vokk-reviews-list,
    .vokk-reviews-wordpress-ready,
    .vokk-contact-main,
    .vokk-contact-reassurance,
    .vokk-contact-extra,
    .vokk-detail-intro,
    .vokk-detail-benefits,
    .vokk-detail-section,
    .vokk-detail-process,
    .vokk-detail-faq-section
)
:is(
    h1,
    h2,
    h3,
    h4
) {
    color:
        var(--pb-pack-on-dark) !important;
}


body.pb-mode-dark
:is(
    .pb-layout-pack-premium,
    .pb-layout-pack-modern,
    .pb-layout-pack-business
)
:is(
    .pb-vokk-light,
    .pb-vokk-benefits,
    .pb-vokk-services,
    .pb-vokk-trust,
    .pb-vokk-process,
    .vokk-services-intro,
    .vokk-services-list,
    .vokk-service-benefits,
    .vokk-about-intro,
    .vokk-about-story,
    .vokk-about-values,
    .vokk-about-experience,
    .vokk-projects-intro,
    .vokk-projects-showcase,
    .vokk-project-featured,
    .vokk-project-results,
    .vokk-reviews-summary,
    .vokk-reviews-list,
    .vokk-reviews-wordpress-ready,
    .vokk-contact-main,
    .vokk-contact-reassurance,
    .vokk-contact-extra,
    .vokk-detail-intro,
    .vokk-detail-benefits,
    .vokk-detail-section,
    .vokk-detail-process,
    .vokk-detail-faq-section
)
p {
    color:
        var(--pb-pack-muted-dark) !important;
}


/* ============================================================
 * LINKS / ACCENTEN
 * ============================================================ */

body.pb-mode-dark
:is(
    .pb-layout-pack-premium,
    .pb-layout-pack-modern,
    .pb-layout-pack-business
)
:is(
    .pb-vokk-services,
    .vokk-services-list,
    .vokk-projects-showcase,
    .vokk-project-featured,
    .vokk-reviews-list,
    .vokk-contact-main,
    .vokk-detail-section
)
a {
    color:
        var(--vokk-primary-light) !important;
}


/* ============================================================
 * LINES
 * ============================================================ */

body.pb-mode-dark
:is(
    .pb-layout-pack-premium,
    .pb-layout-pack-modern,
    .pb-layout-pack-business
)
:is(
    .pb-vokk-service-card,
    .pb-vokk-benefit,
    .pb-vokk-process-item,
    .vokk-service-row,
    .vokk-service-points,
    .vokk-service-benefit,
    .vokk-about-value,
    .vokk-project-card,
    .vokk-project-detail,
    .vokk-review-card,
    .vokk-contact-detail,
    .vokk-contact-faq-item,
    .vokk-detail-benefit,
    .vokk-detail-step,
    .vokk-detail-faq-item
) {
    border-color:
        var(--pb-pack-line) !important;
}


/* ============================================================
 * SERVICES C SPECIFIEK
 * Featured + 3 moet in Dark ook echt donker.
 * ============================================================ */

body.pb-mode-dark.pb-layout-pack-modern.pb-services-variant-c
.pb-vokk-service-card,

body.pb-mode-dark.pb-layout-pack-premium.pb-services-variant-c
.pb-vokk-service-card,

body.pb-mode-dark.pb-layout-pack-business.pb-services-variant-c
.pb-vokk-service-card {
    background:
        var(--pb-pack-surface) !important;
}


body.pb-mode-dark
:is(
    .pb-layout-pack-premium,
    .pb-layout-pack-modern,
    .pb-layout-pack-business
).pb-services-variant-c
.pb-vokk-service-card
.pb-vokk-service-content {
    background:
        var(--pb-pack-surface-alt) !important;
}


body.pb-mode-dark
:is(
    .pb-layout-pack-premium,
    .pb-layout-pack-modern,
    .pb-layout-pack-business
).pb-services-variant-c
.pb-vokk-service-content h3 {
    color:
        var(--pb-pack-on-dark) !important;
}


body.pb-mode-dark
:is(
    .pb-layout-pack-premium,
    .pb-layout-pack-modern,
    .pb-layout-pack-business
).pb-services-variant-c
.pb-vokk-service-content p {
    color:
        var(--pb-pack-muted-dark) !important;
}

}


/*
 * ============================================================
 * DARK MODE — CTA TEXT CONTRAST
 * ============================================================
 * Alleen kleur/contrast.
 * Geen typography.
 * Geen layout.
 * ============================================================
 */

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

body.pb-mode-dark
:is(
    .pb-layout-pack-premium,
    .pb-layout-pack-modern,
    .pb-layout-pack-business
)
:is(
    .vokk-services-cta-box,
    .vokk-about-cta-box,
    .vokk-projects-cta-box,
    .vokk-reviews-cta-box,
    .vokk-detail-cta-box
) {
    color:
        var(--pb-pack-on-dark) !important;
}


/* CTA heading */

body.pb-mode-dark
:is(
    .pb-layout-pack-premium,
    .pb-layout-pack-modern,
    .pb-layout-pack-business
)
:is(
    .vokk-services-cta-box,
    .vokk-about-cta-box,
    .vokk-projects-cta-box,
    .vokk-reviews-cta-box,
    .vokk-detail-cta-box
)
:is(
    h2,
    h3,
    h4
) {
    color:
        rgba(255,255,255,.96) !important;

    opacity:
        1 !important;
}


/* CTA bodytekst */

body.pb-mode-dark
:is(
    .pb-layout-pack-premium,
    .pb-layout-pack-modern,
    .pb-layout-pack-business
)
:is(
    .vokk-services-cta-box,
    .vokk-about-cta-box,
    .vokk-projects-cta-box,
    .vokk-reviews-cta-box,
    .vokk-detail-cta-box
)
p {
    color:
        rgba(255,255,255,.80) !important;

    opacity:
        1 !important;
}


/* Eventuele spans/labels in CTA */

body.pb-mode-dark
:is(
    .pb-layout-pack-premium,
    .pb-layout-pack-modern,
    .pb-layout-pack-business
)
:is(
    .vokk-services-cta-box,
    .vokk-about-cta-box,
    .vokk-projects-cta-box,
    .vokk-reviews-cta-box,
    .vokk-detail-cta-box
)
span {
    color:
        inherit !important;
}


/* Knop blijft palette-accent gebruiken */

body.pb-mode-dark
:is(
    .pb-layout-pack-premium,
    .pb-layout-pack-modern,
    .pb-layout-pack-business
)
:is(
    .vokk-services-cta-button,
    .vokk-about-cta-button,
    .vokk-projects-cta-button,
    .vokk-reviews-cta-button,
    .vokk-detail-cta-button
) {
    color:
        #ffffff !important;

    opacity:
        1 !important;
}

}


/* PB BUSINESS HOME POLISH START */

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

/*
 * ================================================================
 * BUSINESS HOMEPAGE
 * Alleen Zakelijk.
 * Geen hero.
 * Geen header.
 * Geen mobile.
 * Geen typography-engine wijzigingen.
 * ================================================================
 */


/* ================================================================
 * 1. ALGEMENE VERTICALE RITME
 * Zakelijk = compacter dan Premium/Modern.
 * ================================================================ */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-why {
    padding-top:
        44px !important;

    padding-bottom:
        20px !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-benefits {
    padding-top:
        0 !important;

    padding-bottom:
        54px !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-services {
    padding-top:
        54px !important;

    padding-bottom:
        52px !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-trust {
    padding-top:
        12px !important;

    padding-bottom:
        42px !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process {
    padding-top:
        48px !important;

    padding-bottom:
        56px !important;
}



/* ================================================================
 * 2. USP / BENEFITS — FORMELE BUSINESS STRIP
 * ================================================================ */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-benefits-grid {
    display:
        grid !important;

    grid-template-columns:
        repeat(4, minmax(0,1fr)) !important;

    gap:
        0 !important;

    border:
        1px solid var(--pb-pack-line) !important;

    border-radius:
        0 !important;

    overflow:
        hidden !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-benefit {
    position:
        relative !important;

    min-height:
        190px !important;

    padding:
        34px 30px 30px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    text-align:
        left !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    transform:
        none !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-benefit + .pb-vokk-benefit {
    border-left:
        1px solid var(--pb-pack-line) !important;
}


/*
 * Geen wit vierkant/cirkel.
 * Klein zakelijk lijnicoon.
 */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-benefit-icon {
    width:
        38px !important;

    height:
        38px !important;

    min-width:
        38px !important;

    min-height:
        38px !important;

    margin:
        0 0 24px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    background:
        transparent !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--vokk-primary) 58%,
            transparent
        ) !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    color:
        var(--vokk-primary) !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-benefit-icon svg {
    width:
        19px !important;

    height:
        19px !important;

    display:
        block !important;

    margin:
        auto !important;

    fill:
        none !important;

    stroke:
        currentColor !important;

    color:
        inherit !important;

    opacity:
        1 !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-benefit h3 {
    margin-bottom:
        12px !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-benefit p {
    max-width:
        30ch !important;

    margin:
        0 !important;
}



/* ================================================================
 * 3. SERVICES — CORPORATE 2×2 MATRIX
 *
 * Business mag niet op Modern/fotokaarten lijken.
 * Bestaande foto's/content blijven in HTML,
 * maar afbeelding is op desktop Zakelijk niet het hoofdontwerp.
 * ================================================================ */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-service-grid {
    counter-reset:
        pb-business-services !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(2, minmax(0,1fr)) !important;

    gap:
        0 !important;

    border-top:
        1px solid var(--pb-pack-line) !important;

    border-left:
        1px solid var(--pb-pack-line) !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-service-card {
    counter-increment:
        pb-business-services !important;

    position:
        relative !important;

    min-height:
        210px !important;

    display:
        block !important;

    padding:
        38px 42px 34px 96px !important;

    background:
        var(--pb-pack-surface) !important;

    border:
        0 !important;

    border-right:
        1px solid var(--pb-pack-line) !important;

    border-bottom:
        1px solid var(--pb-pack-line) !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    overflow:
        hidden !important;

    isolation:
        isolate !important;

    transform:
        none !important;
}


/*
 * Services A-foto verdwijnt alleen in Zakelijk desktop.
 */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-service-card
.pb-service-bg {
    display:
        none !important;
}


/*
 * Eventuele oude image/gradient layers uitschakelen.
 */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-service-card::after {
    content:
        none !important;

    display:
        none !important;
}


/*
 * Automatische business nummering.
 */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-service-card::before {
    content:
        counter(pb-business-services, decimal-leading-zero) !important;

    position:
        absolute !important;

    top:
        40px !important;

    left:
        34px !important;

    width:
        auto !important;

    height:
        auto !important;

    background:
        none !important;

    color:
        var(--vokk-primary) !important;

    opacity:
        .9 !important;

    z-index:
        4 !important;
}


/*
 * Content volledig los van oude foto-overlay.
 */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-service-content {
    position:
        relative !important;

    z-index:
        3 !important;

    width:
        auto !important;

    padding:
        0 !important;

    background:
        transparent !important;

    color:
        inherit !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-service-content h3 {
    margin-bottom:
        12px !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-service-content p {
    max-width:
        52ch !important;

    margin-bottom:
        22px !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-service-more {
    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        8px !important;

    margin-top:
        auto !important;

    color:
        var(--vokk-primary) !important;

    opacity:
        1 !important;
}


/*
 * Zakelijke hover:
 * subtiele palette-tint, geen card lift.
 */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-service-card:hover {
    transform:
        none !important;

    box-shadow:
        none !important;

    background:
        color-mix(
            in srgb,
            var(--pb-pack-surface) 92%,
            var(--vokk-primary) 8%
        ) !important;
}



/* ================================================================
 * 4. TRUST / KPI — COMPACTER
 * ================================================================ */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-trust-box {
    min-height:
        112px !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(5,minmax(0,1fr)) !important;

    align-items:
        stretch !important;

    padding:
        0 !important;

    border:
        1px solid var(--pb-pack-line) !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    overflow:
        hidden !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-trust-item {
    min-width:
        0 !important;

    padding:
        24px 18px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        center !important;

    text-align:
        center !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-trust-item + .pb-vokk-trust-item {
    border-left:
        1px solid var(--pb-pack-line) !important;
}



/* ================================================================
 * 5. PROCESS — FORMELE DRIE STAPPEN
 * ================================================================ */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process-grid {
    display:
        grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    gap:
        0 !important;

    border-top:
        1px solid var(--pb-pack-line) !important;

    border-left:
        1px solid var(--pb-pack-line) !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process-item {
    position:
        relative !important;

    min-height:
        250px !important;

    padding:
        42px 34px 36px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    text-align:
        left !important;

    border:
        0 !important;

    border-right:
        1px solid var(--pb-pack-line) !important;

    border-bottom:
        1px solid var(--pb-pack-line) !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process-line {
    display:
        none !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process-number {
    position:
        static !important;

    display:
        block !important;

    margin:
        0 0 26px !important;

    transform:
        none !important;

    color:
        var(--vokk-primary) !important;

    opacity:
        1 !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process-icon {
    width:
        42px !important;

    height:
        42px !important;

    min-width:
        42px !important;

    min-height:
        42px !important;

    margin:
        0 0 24px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    background:
        transparent !important;

    color:
        var(--vokk-primary) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--vokk-primary) 55%,
            transparent
        ) !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process-icon svg {
    stroke:
        currentColor !important;

    color:
        inherit !important;

    fill:
        none !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process-item h3 {
    margin-bottom:
        12px !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process-item p {
    max-width:
        34ch !important;

    margin:
        0 !important;
}



/* ================================================================
 * 6. LIGHT MODE
 * ================================================================ */

body.pb-layout-pack-business.pb-template-front-page.pb-mode-light-page
:is(
    .pb-vokk-benefit,
    .pb-vokk-service-card,
    .pb-vokk-trust-box,
    .pb-vokk-process-item
) {
    background:
        var(--pb-pack-surface) !important;

    color:
        var(--pb-readable-text) !important;
}


body.pb-layout-pack-business.pb-template-front-page.pb-mode-light-page
:is(
    .pb-vokk-benefit,
    .pb-vokk-service-card,
    .pb-vokk-process-item
)
:is(
    h2,h3,h4
) {
    color:
        var(--pb-readable-heading) !important;
}


body.pb-layout-pack-business.pb-template-front-page.pb-mode-light-page
:is(
    .pb-vokk-benefit,
    .pb-vokk-service-card,
    .pb-vokk-process-item
)
p {
    color:
        var(--pb-readable-muted) !important;

    opacity:
        1 !important;
}



/* ================================================================
 * 7. MEDIUM MODE
 * ================================================================ */

body.pb-layout-pack-business.pb-template-front-page.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
:is(
    .pb-vokk-benefit,
    .pb-vokk-service-card,
    .pb-vokk-trust-box,
    .pb-vokk-process-item
) {
    background:
        var(--pb-pack-surface) !important;
}


body.pb-layout-pack-business.pb-template-front-page.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
:is(
    .pb-vokk-benefit,
    .pb-vokk-service-card,
    .pb-vokk-process-item
)
:is(
    h2,h3,h4
) {
    color:
        var(--pb-readable-heading) !important;
}


body.pb-layout-pack-business.pb-template-front-page.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
:is(
    .pb-vokk-benefit,
    .pb-vokk-service-card,
    .pb-vokk-process-item
)
p {
    color:
        var(--pb-readable-muted) !important;

    opacity:
        1 !important;
}



/* ================================================================
 * 8. DARK MODE
 * Alleen Business. Bestaande algemene hardlock blijft leidend.
 * ================================================================ */

html body.pb-mode-dark.pb-layout-pack-business.pb-template-front-page
:is(
    .pb-vokk-benefit,
    .pb-vokk-service-card,
    .pb-vokk-trust-box,
    .pb-vokk-process-item
) {
    background:
        var(--pb-pack-surface) !important;

    border-color:
        var(--pb-pack-line) !important;

    box-shadow:
        none !important;
}


html body.pb-mode-dark.pb-layout-pack-business.pb-template-front-page
:is(
    .pb-vokk-benefit,
    .pb-vokk-service-card,
    .pb-vokk-process-item
)
:is(
    h2,h3,h4
) {
    color:
        var(--pb-pack-on-dark) !important;
}


html body.pb-mode-dark.pb-layout-pack-business.pb-template-front-page
:is(
    .pb-vokk-benefit,
    .pb-vokk-service-card,
    .pb-vokk-process-item
)
p {
    color:
        var(--pb-pack-muted-dark) !important;

    opacity:
        1 !important;
}


html body.pb-mode-dark.pb-layout-pack-business.pb-template-front-page
.pb-vokk-service-card:hover {
    background:
        color-mix(
            in srgb,
            var(--pb-pack-surface) 84%,
            var(--vokk-primary) 16%
        ) !important;
}

}

/* PB BUSINESS HOME POLISH END */




/* PB BUSINESS BENEFITS PROCESS POLISH START */

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

/* ============================================================
 * 1. WAAROM PB WEBDIENSTEN
 * Geen groot kader / geen lange verticale lijnen.
 * ============================================================ */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-benefits-grid {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0,1fr)) !important;

    gap:
        18px !important;

    border:
        0 !important;

    background:
        transparent !important;

    overflow:
        visible !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-benefit {
    position:
        relative !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    min-height:
        230px !important;

    padding:
        34px 32px 32px !important;

    text-align:
        left !important;

    background:
        var(--pb-pack-surface) !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;
}


/* oude verticale scheidingslijnen expliciet weg */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-benefit + .pb-vokk-benefit {
    border-left:
        0 !important;
}


/* subtiele zakelijke bovenlijn per vlak */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-benefit::after {
    content:
        "" !important;

    position:
        absolute !important;

    top:
        0 !important;

    left:
        32px !important;

    width:
        42px !important;

    height:
        2px !important;

    background:
        var(--vokk-primary) !important;

    opacity:
        .72 !important;
}


/* iconen */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-benefit-icon {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        46px !important;

    height:
        46px !important;

    min-width:
        46px !important;

    min-height:
        46px !important;

    margin:
        12px 0 24px !important;

    border-radius:
        999px !important;

    background:
        color-mix(
            in srgb,
            var(--vokk-primary) 12%,
            var(--pb-pack-surface)
        ) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--vokk-primary) 30%,
            transparent
        ) !important;

    color:
        var(--vokk-primary) !important;

    box-shadow:
        none !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-benefit-icon svg {
    width:
        20px !important;

    height:
        20px !important;

    display:
        block !important;

    margin:
        auto !important;

    stroke:
        currentColor !important;

    fill:
        none !important;

    color:
        inherit !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-benefit h3 {
    margin:
        0 0 14px !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-benefit p {
    max-width:
        30ch !important;

    margin:
        0 !important;
}



/* ============================================================
 * 2. ZO WERKEN WIJ
 *
 * Geen groot 3-vaks kader meer.
 * Drie losse zakelijke stappen.
 * ============================================================ */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process-grid {
    display:
        grid !important;

    grid-template-columns:
        repeat(3, minmax(0,1fr)) !important;

    gap:
        22px !important;

    width:
        min(100%, 1000px) !important;

    margin:
        38px auto 0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    overflow:
        visible !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process-item {
    position:
        relative !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    min-height:
        300px !important;

    padding:
        36px 34px 34px !important;

    text-align:
        left !important;

    background:
        var(--pb-pack-surface) !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    overflow:
        hidden !important;
}


/*
 * Alleen een korte accentlijn boven elke stap.
 */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process-item::before {
    content:
        "" !important;

    position:
        absolute !important;

    top:
        0 !important;

    left:
        34px !important;

    width:
        48px !important;

    height:
        2px !important;

    background:
        var(--vokk-primary) !important;

    opacity:
        .78 !important;
}


/* oude verbindingslijnen verdwijnen */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process-line {
    display:
        none !important;
}


/*
 * Nummer rechtsboven: rustig en zakelijk.
 */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process-number {
    position:
        absolute !important;

    top:
        30px !important;

    right:
        30px !important;

    left:
        auto !important;

    bottom:
        auto !important;

    width:
        auto !important;

    height:
        auto !important;

    margin:
        0 !important;

    transform:
        none !important;

    color:
        var(--vokk-primary) !important;

    opacity:
        .82 !important;

    z-index:
        3 !important;
}


/*
 * Icoon linksboven.
 */

body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process-icon {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        48px !important;

    height:
        48px !important;

    min-width:
        48px !important;

    min-height:
        48px !important;

    margin:
        12px 0 30px !important;

    border-radius:
        999px !important;

    background:
        color-mix(
            in srgb,
            var(--vokk-primary) 12%,
            var(--pb-pack-surface)
        ) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--vokk-primary) 30%,
            transparent
        ) !important;

    color:
        var(--vokk-primary) !important;

    box-shadow:
        none !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process-icon svg {
    width:
        20px !important;

    height:
        20px !important;

    display:
        block !important;

    margin:
        auto !important;

    stroke:
        currentColor !important;

    fill:
        none !important;

    color:
        inherit !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process-item h3 {
    width:
        100% !important;

    margin:
        0 0 14px !important;
}


body.pb-layout-pack-business.pb-template-front-page
.pb-vokk-process-item p {
    width:
        100% !important;

    max-width:
        30ch !important;

    margin:
        0 !important;
}



/* ============================================================
 * 3. DARK MODE — alleen kleur
 * ============================================================ */

html body.pb-mode-dark.pb-layout-pack-business.pb-template-front-page
:is(
    .pb-vokk-benefit,
    .pb-vokk-process-item
) {
    background:
        var(--pb-pack-surface) !important;

    box-shadow:
        none !important;
}


html body.pb-mode-dark.pb-layout-pack-business.pb-template-front-page
:is(
    .pb-vokk-benefit-icon,
    .pb-vokk-process-icon
) {
    background:
        color-mix(
            in srgb,
            var(--vokk-primary) 14%,
            var(--pb-pack-surface)
        ) !important;

    color:
        color-mix(
            in srgb,
            var(--vokk-primary-light) 82%,
            white
        ) !important;
}



/* ============================================================
 * 4. LIGHT / MEDIUM
 * ============================================================ */

body.pb-mode-light-page.pb-layout-pack-business.pb-template-front-page
:is(
    .pb-vokk-benefit-icon,
    .pb-vokk-process-icon
),

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark).pb-layout-pack-business.pb-template-front-page
:is(
    .pb-vokk-benefit-icon,
    .pb-vokk-process-icon
) {
    color:
        var(--vokk-primary) !important;
}

}

/* PB BUSINESS BENEFITS PROCESS POLISH END */

/* PB BUSINESS LINES CLEANUP START */

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

  /* =========================================================
   * WAAROM PB WEBDIENSTEN
   * horizontale accentstreepjes + kaderlijnen weg
   * ========================================================= */

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-grid,
  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-wrap,
  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-section {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefit {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefit::before,
  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefit::after,
  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefit + .pb-vokk-benefit::before {
    content: none !important;
    display: none !important;
  }

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefit + .pb-vokk-benefit {
    border-left: 0 !important;
  }

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefit {
    padding-top: 34px !important;
  }

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefit-icon {
    margin-top: 0 !important;
  }


  /* =========================================================
   * ZO WERKEN WIJ
   * horizontale accentstreepjes + table/kaderlijnen weg
   * ========================================================= */

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-process-grid,
  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-process-wrap,
  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-process-section {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-process-item {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-process-item::before,
  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-process-item::after,
  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-process-line {
    content: none !important;
    display: none !important;
  }

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-process-item + .pb-vokk-process-item {
    border-left: 0 !important;
  }

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-process-item {
    padding-top: 36px !important;
  }

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-process-icon {
    margin-top: 0 !important;
  }
}

/* PB BUSINESS LINES CLEANUP END */

/* PB BUSINESS WHY TIGHTEN START */

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

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-section,
  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-why-section {
    padding-bottom: 56px !important;
  }

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-wrap,
  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-inner {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-grid {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    align-items: stretch !important;
    grid-auto-rows: 1fr !important;
  }

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefit,
  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-feature-card {
    min-height: 245px !important;
    height: auto !important;
    padding: 32px 30px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 14px !important;
  }

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefit-icon,
  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-feature-icon {
    margin: 0 0 10px 0 !important;
    align-self: flex-start !important;
    flex: 0 0 auto !important;
  }

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefit h3,
  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-feature-card h3,
  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefit-title {
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefit p,
  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-feature-card p,
  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefit-text {
    margin: 0 !important;
    line-height: 1.65 !important;
    max-width: 30ch !important;
  }

  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-grid + *,
  body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-wrap + * {
    margin-top: 0 !important;
  }
}

/* PB BUSINESS WHY TIGHTEN END */

/* PB BUSINESS HOMEPAGE REMOVE STRAY LINES START */

body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-section,
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-why-section,
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-wrap,
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-inner,
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-grid {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-section::before,
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-section::after,
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-why-section::before,
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-why-section::after,
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-wrap::before,
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-wrap::after,
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-inner::before,
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-inner::after,
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-grid::before,
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-grid::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ook eventuele bovenlijn van de eerstvolgende sectie eronder uitschakelen */
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-section + section,
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-why-section + section {
  border-top: none !important;
}

body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-section + section::before,
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-benefits-section + section::after,
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-why-section + section::before,
body.pb-layout-pack-business.pb-template-front-page .pb-vokk-why-section + section::after {
  display: none !important;
  content: none !important;
}

/* PB BUSINESS HOMEPAGE REMOVE STRAY LINES END */

/* PB BUSINESS WHY OUTER BORDER FIX START */

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

    html body.pb-layout-pack-business.pb-template-front-page
    section.pb-vokk-why {
        border: 0 !important;
        border-top: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;

        outline: 0 !important;
        box-shadow: none !important;
    }

    html body.pb-layout-pack-business.pb-template-front-page
    section.pb-vokk-why::before,

    html body.pb-layout-pack-business.pb-template-front-page
    section.pb-vokk-why::after {
        content: none !important;
        display: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

}

/* PB BUSINESS WHY OUTER BORDER FIX END */

/* PB BUSINESS WHY EXACT LINE FIX START */

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

    /*
     * EXACT vastgesteld via getComputedStyle():
     *
     * .pb-vokk-wrap:
     * outline: rgb(...) 3px
     *
     * Dit is de grote rechthoek rondom het blok.
     */
    html body.pb-layout-pack-business.pb-template-front-page
    section.pb-vokk-why > .pb-vokk-wrap {
        outline: none !important;
        outline-width: 0 !important;
        outline-style: none !important;
        outline-color: transparent !important;

        border: 0 !important;
        box-shadow: none !important;
    }


    /*
     * EXACT vastgesteld:
     * benefit 2/3/4 hebben border-left:1px solid.
     *
     * Dit zijn de verticale scheidingslijnen.
     */
    html body.pb-layout-pack-business.pb-template-front-page
    section.pb-vokk-why
    .pb-vokk-benefit + .pb-vokk-benefit {
        border-left: 0 !important;
        border-left-width: 0 !important;
        border-left-style: none !important;
        border-left-color: transparent !important;
    }


    /*
     * Voor zekerheid alle vier benefits zonder externe lijn.
     * Achtergrond en inhoud blijven volledig behouden.
     */
    html body.pb-layout-pack-business.pb-template-front-page
    section.pb-vokk-why
    .pb-vokk-benefit {
        outline: none !important;
        box-shadow: none !important;
    }
}

/* PB BUSINESS WHY EXACT LINE FIX END */

/* PB BUSINESS BENEFIT OUTLINE EXACT FIX START */

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

    html body.pb-layout-pack-business.pb-template-front-page
    section.pb-vokk-why
    .pb-vokk-benefit {
        outline: none !important;
        outline-width: 0 !important;
        outline-style: none !important;
        outline-color: transparent !important;
        outline-offset: 0 !important;

        box-shadow: none !important;
    }

}

/* PB BUSINESS BENEFIT OUTLINE EXACT FIX END */


/* PB BUSINESS BENEFITS BORDER FINAL START */

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

    /*
     * Buitenste blok:
     * wel een nette 1px border,
     * absoluut GEEN outline.
     */
    html body.pb-layout-pack-business.pb-template-front-page
    section.pb-vokk-why
    .pb-vokk-benefits {
        border:
            1px solid var(--pb-pack-line) !important;

        outline:
            none !important;

        outline-width:
            0 !important;

        outline-style:
            none !important;

        outline-color:
            transparent !important;

        box-shadow:
            none !important;
    }


    /*
     * Individuele vakken:
     * geen outline rondom iedere kaart.
     */
    html body.pb-layout-pack-business.pb-template-front-page
    section.pb-vokk-why
    .pb-vokk-benefit {
        border:
            0 !important;

        outline:
            none !important;

        outline-width:
            0 !important;

        outline-style:
            none !important;

        box-shadow:
            none !important;
    }


    /*
     * Alleen de interne verticale scheidingslijnen herstellen.
     */
    html body.pb-layout-pack-business.pb-template-front-page
    section.pb-vokk-why
    .pb-vokk-benefit + .pb-vokk-benefit {
        border-left:
            1px solid var(--pb-pack-line) !important;
    }


    /*
     * Geen extra lijnen via pseudo-elements.
     */
    html body.pb-layout-pack-business.pb-template-front-page
    section.pb-vokk-why
    .pb-vokk-benefits::before,

    html body.pb-layout-pack-business.pb-template-front-page
    section.pb-vokk-why
    .pb-vokk-benefits::after {
        content:
            none !important;

        display:
            none !important;
    }

}

/* PB BUSINESS BENEFITS BORDER FINAL END */

/* PB BUSINESS REAL BENEFITS LINE FIX START */

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

    html body.pb-layout-pack-business.pb-template-front-page
    section.pb-vokk-why
    .pb-vokk-benefits {
        border: 0 !important;
        border-top: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;

        outline: 0 !important;
        outline-width: 0 !important;
        outline-style: none !important;
        outline-color: transparent !important;

        box-shadow: none !important;
    }

    html body.pb-layout-pack-business.pb-template-front-page
    section.pb-vokk-why
    .pb-vokk-benefits::before,

    html body.pb-layout-pack-business.pb-template-front-page
    section.pb-vokk-why
    .pb-vokk-benefits::after {
        content: none !important;
        display: none !important;

        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

}

/* PB BUSINESS REAL BENEFITS LINE FIX END */

/* PB BUSINESS CONTENT HERO HARD SPLIT START */

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

    /*
     * ========================================================
     * ZAKELIJK — ALLE CONTENTPAGINA'S
     *
     * 48% tekstvlak
     * 52% afbeelding
     * harde verticale scheiding
     *
     * Homepage NIET meenemen.
     * Mobiel/tablet staand NIET meenemen.
     * ========================================================
     */

    body.pb-layout-pack-business:not(.pb-template-front-page)
    .pb-content-hero {
        position: relative !important;
        overflow: hidden !important;
        isolation: isolate !important;
    }


    /*
     * Afbeelding uitsluitend rechts.
     */
    body.pb-layout-pack-business:not(.pb-template-front-page)
    .pb-content-hero
    > .pb-content-hero-image {
        position: absolute !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        width: 52% !important;
        height: 100% !important;

        object-fit: cover !important;

        opacity: 1 !important;
        filter: none !important;

        z-index: 0 !important;

        border-left:
            1px solid var(--pb-pack-line) !important;
    }


    /*
     * Linker 48% = strak Zakelijk vlak.
     * Geen gradient/fade meer richting afbeelding.
     */
    body.pb-layout-pack-business:not(.pb-template-front-page)
    .pb-content-hero::before {
        content: "" !important;

        position: absolute !important;

        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;

        width: 48% !important;
        height: 100% !important;

        background:
            var(--pb-pack-dark) !important;

        background-image:
            none !important;

        opacity: 1 !important;

        z-index: 1 !important;
        pointer-events: none !important;
    }


    /*
     * Eventuele algemene tweede gradient/fade uitschakelen.
     */
    body.pb-layout-pack-business:not(.pb-template-front-page)
    .pb-content-hero::after {
        content: none !important;
        display: none !important;

        background: none !important;
        background-image: none !important;

        box-shadow: none !important;
        filter: none !important;
        backdrop-filter: none !important;
    }


    /*
     * Alle echte hero-content boven linker achtergrond houden.
     */
    body.pb-layout-pack-business:not(.pb-template-front-page)
    .pb-content-hero
    > :not(.pb-content-hero-image) {
        position: relative !important;
        z-index: 2 !important;
    }

}

/* PB BUSINESS CONTENT HERO HARD SPLIT END */

/* PB BUSINESS LM CONTRAST FINAL START */

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

    /*
     * ========================================================
     * BUSINESS / ZAKELIJK — LIGHT + MEDIUM
     * Dark NIET raken.
     * ========================================================
     */


    /*
     * ========================================================
     * 1. CONTENT HERO'S
     *
     * Zakelijk gebruikt donkere linkerhelft / harde split.
     * Tekst daarin moet dus licht blijven.
     * ========================================================
     */

    html body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-dark)
    .pb-content-hero {
        color: #ffffff !important;
    }

    html body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-dark)
    .pb-content-hero
    :is(
        h1,
        h2,
        h3,
        .vokk-services-eyebrow,
        .vokk-about-eyebrow,
        .vokk-projects-eyebrow,
        .vokk-reviews-eyebrow,
        .vokk-contact-eyebrow,
        .vokk-detail-eyebrow
    ) {
        color: #ffffff !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

    html body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-dark)
    .pb-content-hero p {
        color: rgba(255,255,255,.88) !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }


    /*
     * ========================================================
     * 2. CTA BOXEN
     *
     * Donkerder Zakelijk vlak met lichte tekst.
     * ========================================================
     */

    html body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-dark)
    :is(
        .vokk-services-cta-box,
        .vokk-projects-cta-box,
        .vokk-about-cta-box,
        .vokk-reviews-cta-box,
        .vokk-detail-cta-box
    ) {
        background:
            color-mix(
                in srgb,
                var(--pb-dark) 90%,
                var(--pb-primary) 10%
            ) !important;

        background-image: none !important;

        color: #ffffff !important;

        border-color:
            color-mix(
                in srgb,
                var(--pb-primary-light) 18%,
                transparent
            ) !important;
    }

    html body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-dark)
    :is(
        .vokk-services-cta-box,
        .vokk-projects-cta-box,
        .vokk-about-cta-box,
        .vokk-reviews-cta-box,
        .vokk-detail-cta-box
    )
    :is(h2,h3,h4) {
        color: #ffffff !important;
        opacity: 1 !important;
    }

    html body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-dark)
    :is(
        .vokk-services-cta-box,
        .vokk-projects-cta-box,
        .vokk-about-cta-box,
        .vokk-reviews-cta-box,
        .vokk-detail-cta-box
    )
    p {
        color: rgba(255,255,255,.86) !important;
        opacity: 1 !important;
    }


    /*
     * ========================================================
     * 3. CTA KNOPPEN
     *
     * Zelfde veilige patroon:
     * wit met donkere tekst
     * hover = lichtgrijs
     * ========================================================
     */

    html body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-dark)
    :is(
        .vokk-services-cta-button,
        .vokk-projects-cta-button,
        .vokk-about-cta-button,
        .vokk-reviews-cta-button,
        .vokk-detail-cta-button
    ) {
        background: #ffffff !important;
        background-image: none !important;

        color: var(--pb-dark, #061426) !important;
        -webkit-text-fill-color: var(--pb-dark, #061426) !important;

        border: 1px solid rgba(15,23,42,.12) !important;

        opacity: 1 !important;
        text-shadow: none !important;
    }

    html body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-dark)
    :is(
        .vokk-services-cta-button,
        .vokk-projects-cta-button,
        .vokk-about-cta-button,
        .vokk-reviews-cta-button,
        .vokk-detail-cta-button
    ) * {
        color: inherit !important;
        -webkit-text-fill-color: inherit !important;
        opacity: 1 !important;
    }

    html body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-dark)
    :is(
        .vokk-services-cta-button,
        .vokk-projects-cta-button,
        .vokk-about-cta-button,
        .vokk-reviews-cta-button,
        .vokk-detail-cta-button
    ):hover,

    html body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-dark)
    :is(
        .vokk-services-cta-button,
        .vokk-projects-cta-button,
        .vokk-about-cta-button,
        .vokk-reviews-cta-button,
        .vokk-detail-cta-button
    ):focus-visible {
        background: #e9edf2 !important;
        background-image: none !important;

        color: var(--pb-dark, #061426) !important;
        -webkit-text-fill-color: var(--pb-dark, #061426) !important;

        border-color: rgba(15,23,42,.18) !important;
    }


    /*
     * ========================================================
     * 4. FOOTER CONTRAST
     * ========================================================
     */

    html body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-dark)
    .agencyfooter-block-footer {
        color: rgba(255,255,255,.88) !important;
    }

    html body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-dark)
    .agencyfooter-block-footer
    :is(h2,h3,h4,h5,h6,strong) {
        color: #ffffff !important;
        opacity: 1 !important;
    }

    html body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-dark)
    .agencyfooter-block-footer
    :is(p,li,span) {
        color: rgba(255,255,255,.82) !important;
        opacity: 1 !important;
    }

    html body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-dark)
    .agencyfooter-block-footer
    a {
        color: rgba(255,255,255,.92) !important;
        opacity: 1 !important;
        text-decoration-color: currentColor !important;
    }

    html body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-dark)
    .agencyfooter-block-footer
    a:hover,

    html body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-dark)
    .agencyfooter-block-footer
    a:focus-visible {
        color: #ffffff !important;
    }

    html body.pb-layout-pack-business.pb-mode-medium:not(.pb-mode-dark)
    .agencyfooter-block-bottom {
        color: rgba(255,255,255,.68) !important;
    }

}

/* PB BUSINESS LM CONTRAST FINAL END */