/* =========================================================
   PB WEBDIENSTEN - CENTRALE FRONTEND CSS V4
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* =========================================================
   PB THEME SEMANTISCHE VARIABELEN
========================================================= */

:root {
    --pb-primary: #3867fa;
    --pb-primary-light: #4380ff;
    --pb-primary-dark: #2563eb;

    --pb-dark: #061426;
    --pb-darker: #030b16;

    --pb-page-bg: #ffffff;
    --pb-surface: #ffffff;
    --pb-surface-soft: #f7f9fc;

    --pb-heading: #0f172a;
    --pb-text: #0f172a;
    --pb-muted: #667085;
    --pb-text-inverse: #ffffff;

    --pb-border: #e6ebf2;

    --pb-header-bg: linear-gradient(
        180deg,
        rgba(5,14,29,.94) 0%,
        rgba(5,14,29,.78) 55%,
        rgba(5,14,29,.42) 100%
    );

    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: rgb(3,11,24);

    --pb-footer-bg: #061426;

    --pb-btn-1: #3d74ff;
    --pb-btn-2: #2563eb;

    --pb-rating: #00b67a;

    --pb-glow: color-mix(
        in srgb,
        var(--pb-primary) 14%,
        transparent
    );

    --pb-blue: var(--pb-primary);

    --kavion-primary: var(--pb-primary);
    --kavion-dark: var(--pb-dark);
    --kavion-text: var(--pb-text);
}


body.pb-preset-vokk_blue {
    --pb-primary: #3867fa;
    --pb-primary-light: #4380ff;
    --pb-primary-dark: #2563eb;

    --pb-dark: #061426;
    --pb-darker: #030b16;

    --pb-text: #0f172a;
    --pb-muted: #667085;

    --pb-page-bg: #ffffff;
    --pb-surface: #ffffff;
    --pb-surface-soft: #f7f9fc;
    --pb-border: #e6ebf2;

    --pb-header-bg: linear-gradient(
        180deg,
        rgba(5,14,29,.94) 0%,
        rgba(5,14,29,.78) 55%,
        rgba(5,14,29,.42) 100%
    );

    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: rgb(3,11,24);

    --pb-btn-1: #3d74ff;
    --pb-btn-2: #2563eb;
}


body.pb-preset-emerald_tech {
    --pb-primary: #00b67a;
    --pb-primary-light: #34d399;
    --pb-primary-dark: #047857;

    --pb-dark: #0b0f19;
    --pb-darker: #04060b;

    --pb-text: #064e3b;
    --pb-muted: #4b5563;

    --pb-page-bg: #ffffff;
    --pb-surface: #ffffff;
    --pb-surface-soft: #f3f4f6;
    --pb-border: #d1fae5;

    --pb-header-bg: rgba(0,182,122,.12);
    --pb-header-text: #064e3b;
    --pb-mobile-menu-bg: #ffffff;

    --pb-btn-1: #059669;
    --pb-btn-2: #047857;
}


body.pb-preset-industrial_dark {
    --pb-primary: #3b82f6;
    --pb-primary-light: #60a5fa;
    --pb-primary-dark: #1d4ed8;

    --pb-dark: #1e293b;
    --pb-darker: #0f172a;

    --pb-text: #1e3a8a;
    --pb-muted: #64748b;

    --pb-page-bg: #ffffff;
    --pb-surface: #ffffff;
    --pb-surface-soft: #f8fafc;
    --pb-border: #dbeafe;

    --pb-header-bg: rgba(59,130,246,.12);
    --pb-header-text: #1e3a8a;
    --pb-mobile-menu-bg: #ffffff;

    --pb-btn-1: #2563eb;
    --pb-btn-2: #1d4ed8;
}


body.pb-preset-warm_corporate {
    --pb-primary: #d97706;
    --pb-primary-light: #fbbf24;
    --pb-primary-dark: #b45309;

    --pb-dark: #18181b;
    --pb-darker: #09090b;

    --pb-text: #78350f;
    --pb-muted: #71717a;

    --pb-page-bg: #ffffff;
    --pb-surface: #ffffff;
    --pb-surface-soft: #fafafa;
    --pb-border: #fef3c7;

    --pb-header-bg: rgba(217,119,6,.12);
    --pb-header-text: #78350f;
    --pb-mobile-menu-bg: #ffffff;

    --pb-btn-1: #d97706;
    --pb-btn-2: #b45309;
}


/* Projectafbeelding vervangt oude inline background-image. */
.vokk-project-image {
    overflow: hidden;
}

.vokk-project-image > .pb-project-image-source {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* =========================================================
   BESTAANDE STYLE.CSS
========================================================= */

/* =========================================
   V10 MASTER STYLING & VARIABELEN KOPPELING
========================================= */
:root {
    --kavion-primary: #3867fa;
    --kavion-dark: #061426;
    --kavion-text: #0f172a;
}

body {
    font-family: "Poppins", sans-serif !important;
    color: var(--kavion-text) !important;
    margin: 0;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Knoppen en actieve elementen */
.nuke-main-button, 
button:not(.secondary), 
.btn-primary,
.pb-hero-tile-icon,
.pb-vokk-process-icon {
    background-color: var(--kavion-primary) !important;
    border-color: var(--kavion-primary) !important;
    color: #ffffff !important;
}

/* Links, accenten en gekleurde koppen */
a,
.accent-color,
h1 span, h2 span, h3 span,
.pb-hero-subtitle,
.pb-hero-title span,
.pb-vokk-eyebrow,
.pb-vokk-service-more,
.pb-vokk-trust-label,
.pb-vokk-score {
    color: var(--kavion-primary) !important;
}

/* Donkere secties en footer */
.site-footer,
.kb-block-agencyfooter-block,
.kb-block.nuke-v10-master {
    background-color: var(--kavion-dark) !important;
    color: #ffffff !important;
}

/* =========================================================
   BESTAANDE KAVION-STYLE.CSS
========================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }
    
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh;
        overflow-x: hidden;
        margin: 0 !important;
        padding: 0 !important;
        background: #050914 !important;
    }

    body {
        font-family: 'Poppins', sans-serif !important;
        color: #f7f9ff;
        line-height: 1.6;
        display: flex;
        flex-direction: column;
    }

    #page, #content, .site, .site-content, .site-main, .wp-site-blocks, entry-content, .post-inner {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .kavion-main-content {
        flex: 1 0 auto;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    .kb-block.nuke-v10-master, .kavion-v10-block-wrapper, .kavion-cmd-section, .nuke-landing-reviews, .kavion-pricing-section, .kavion-process-section, .pb-home, .pb-header, .pb-footer {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    footer.kavion-footer-block, 
    footer.nuke-v10-agency-footer {
        margin-top: auto;
        width: 100% !important;
        max-width: 100% !important;
    }

    .kavion-btn {
        display: inline-block;
        padding: 12px 26px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .kavion-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.12);
        filter: brightness(1.1);
    }

    .kavion-card {
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .kavion-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 30px rgba(0,0,0,0.07);
    }

    .kavion-nav-link {
        transition: opacity 0.2s ease;
    }
    .kavion-nav-link:hover {
        opacity: 0.75;
    }

    .kavion-default-page-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 60px 20px;
    }
    
    .kb-block-agencyfooter-block {
        background: #0a1428 !important;
        color: #ffffff !important;
        padding-top: 80px;
        padding-bottom: 40px;
        position: relative;
    }
    .kb-block-agencyfooter-block .kb-block-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
    }
    .agencyfooter-block-grid {
        display: grid;
        grid-template-columns: 2.6fr 1fr 1fr 1fr;
        gap: 56px;
    }
    .agencyfooter-block-grid ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .agencyfooter-block-grid li {
        margin-bottom: 11px !important;
    }
    .agencyfooter-block-grid a {
        color: #AEB6C2;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 500;
        text-decoration: none;
        transition: 0.2s ease;
    }
    .agencyfooter-block-grid a:hover {
        color: #ffffff;
    }
    .agencyfooter-block-grid h4 {
        color: #ffffff;
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 18px;
    }
    .agencyfooter-block-bottom {
        border-top: 1px solid rgba(255,255,255,0.12);
        margin-top: 60px;
        padding-top: 24px;
        text-align: center;
        opacity: 0.7;
        font-size: 0.9rem;
    }
    @media (max-width: 1024px) {
        .agencyfooter-block-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    }
    @media (max-width: 640px) {
        .agencyfooter-block-grid { grid-template-columns: 1fr; gap: 24px; }
    }

    .agencyfooter-social-icon:hover {
        background: #2563eb !important;
        color: #ffffff !important;
        transform: translateY(-3px);
        box-shadow: 0 8px 18px rgba(37,99,235,0.30);
    }

/* PB FINAL CONTENT HERO START
 *
 * Centrale contenthero voor alle inhoudspagina's.
 * front-page.php / homepage gebruikt deze class NIET.
 */

.pb-content-hero {
    position: relative !important;
    width: 100% !important;
    height: 500px !important;
    min-height: 500px !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;

    background: #020812 !important;
    isolation: isolate;
}


/*
 * HERO AFBEELDING
 *
 * Nieuwe hero-bestanden zijn 1920x700.
 * Volledige hero wordt gevuld.
 * Crop wordt aan de onderzijde gehouden door center top.
 */
.pb-content-hero > .pb-content-hero-image {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

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

    object-fit: cover !important;
    object-position: center 15% !important;

    display: block !important;

    z-index: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    max-width: none !important;
}


/*
 * OVERLAY
 *
 * Links voldoende donker voor tekst.
 * Daarna geleidelijk steeds transparanter.
 * Rechterdeel van foto blijft duidelijk zichtbaar.
 */
.pb-content-hero::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: 1 !important;

    pointer-events: none !important;

    background: linear-gradient(
        90deg,
        rgba(2,8,18,.88) 0%,
        rgba(2,8,18,.80) 22%,
        rgba(2,8,18,.64) 38%,
        rgba(2,8,18,.42) 54%,
        rgba(2,8,18,.20) 70%,
        rgba(2,8,18,.07) 85%,
        rgba(2,8,18,0) 100%
    ) !important;
}


/*
 * ALLE NORMALE HERO CONTENT BOVEN FOTO + OVERLAY
 */
.pb-content-hero > *:not(.pb-content-hero-image) {
    position: relative !important;
    z-index: 2 !important;
}


/*
 * TABLET
 */
@media screen and (max-width: 1024px) {

    .pb-content-hero {
        height: 470px !important;
        min-height: 470px !important;
    }

}


/*
 * MOBIEL
 *
 * Op smalle schermen heeft een horizontale links->rechts
 * gradient weinig nut. Daarom een verticale gradient zodat
 * tekst altijd leesbaar blijft zonder de hele foto donker
 * te maken.
 */
@media screen and (max-width: 780px) {

    .pb-content-hero {
        height: 460px !important;
        min-height: 460px !important;

        align-items: flex-end !important;
    }

    .pb-content-hero > .pb-content-hero-image {
        object-fit: cover !important;
        object-position: center 15% !important;
    }

    .pb-content-hero::before {
        background: linear-gradient(
            180deg,
            rgba(2,8,18,.10) 0%,
            rgba(2,8,18,.20) 30%,
            rgba(2,8,18,.58) 62%,
            rgba(2,8,18,.94) 100%
        ) !important;
    }

}

/* PB FINAL CONTENT HERO END */

/* =========================================================
   header.php
========================================================= */

/* =========================================================
   PHP SFEER MAPPING (DYNAMISCHE CSS VARIABELEN)
========================================================= */




/* =========================================================
   RESET
========================================================= */
.vokk-header,
.vokk-header * {
    box-sizing: border-box !important;
}

/* =========================================================
   HEADER BASIS (GEEN DIKKE WITTE LIJN ONDERAN)
========================================================= */
.vokk-header {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Poppins", sans-serif !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    overflow: visible !important;
    z-index: 999999 !important;
}



/* =========================================================
   INNER
========================================================= */
.vokk-header-inner {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* =========================================================
   LOGO
========================================================= */
.vokk-logo {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    border: 0 !important;
    background: transparent !important;
}

.vokk-logo::before,
.vokk-logo::after {
    display: none !important;
    content: none !important;
}

.vokk-logo img {
    display: block !important;
    width: auto !important;
    height: 46px !important;
    max-width: 210px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    border: 0 !important;
}

/* =========================================================
   DESKTOP NAV
========================================================= */
.vokk-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    gap: 34px !important;
    margin: 0 0 0 40px !important;
    padding: 0 !important;
}

.vokk-nav ul,
.vokk-mobile-nav ul {
    display: flex !important;
    align-items: center !important;
    gap: 34px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vokk-mobile-nav ul {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
}

.vokk-nav li,
.vokk-mobile-nav li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vokk-nav a,
.vokk-mobile-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
   /* color:  !important;*/
	color: #ffffff !important; /* <--- ZET HEM HIER VAST OP WIT VOOR RUSTSTAND */
    opacity: 0.85;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: -0.1px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: color .2s ease, opacity .2s ease !important;
}

/* =========================================================
   DYNAMISCHE HOVER & ACTIVE LOGICA
========================================================= */


.vokk-nav a::before,
.vokk-nav a::after {
    display: none !important;
    content: none !important;
}

/* =========================================================
   DESKTOP CTA
========================================================= */
.vokk-action {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    margin-left: 34px !important;
}

.vokk-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 0 22px !important;
    background: linear-gradient(135deg, var(--kavion-primary-light), var(--kavion-primary)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--kavion-primary) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.18) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

.vokk-cta:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--kavion-primary) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* =========================================================
   HAMBURGER
========================================================= */
.vokk-hamburger {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    background: rgba(0,0,0,.06) !important;
    border: 1px solid rgba(0,0,0,.1) !important;
    border-radius: 11px !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
}



.vokk-hamburger span {
    display: block !important;
    width: 21px !important;
    min-width: 21px !important;
    max-width: 21px !important;
    height: 2px !important;
    min-height: 2px !important;
    max-height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--pb-header-text) !important;
    border: 0 !important;
    border-radius: 999px !important;
    flex: 0 0 2px !important;
    transition: transform .25s ease, opacity .25s ease !important;
}

.vokk-hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
}

.vokk-hamburger.is-open span:nth-child(2) {
    opacity: 0 !important;
}

.vokk-hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
}

/* =========================================================
   MOBILE MENU BASIS
========================================================= */
.vokk-mobile-menu {
    display: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 20px 22px !important;
    background: var(--pb-mobile-menu-bg) !important;
    border-top: 1px solid rgba(0,0,0,.06) !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,.15) !important;
    overflow: visible !important;
}

.vokk-mobile-nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vokk-mobile-nav a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    color: var(--pb-header-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.vokk-mobile-nav a:hover,
.vokk-mobile-nav a:focus {
    background: rgba(0,0,0,.03) !important;
}

.vokk-mobile-nav a:last-child {
    border-bottom: 0 !important;
}

.vokk-mobile-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 50px !important;
    margin: 16px 0 0 0 !important;
    padding: 0 20px !important;
    background: linear-gradient(135deg, var(--kavion-primary-light), var(--kavion-primary)) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--kavion-primary) 24%, transparent) !important;
}

/* =========================================================
   RESPONSIVE MEDIA QUERIES
========================================================= */
@media
 screen and (min-width: 1025px) {
    .vokk-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 82px !important;
        background:
            color-mix(
                in srgb,
                var(--pb-header-bg) 82%,
                transparent
            ) !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 999999 !important;
        transition: background 0.4s ease !important;
    }

    .vokk-header-inner {
        height: 82px !important;
    }

    .vokk-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .vokk-action {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .vokk-hamburger {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .vokk-mobile-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

@media
 screen and (max-width: 1024px) {
    .vokk-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
        min-height: 74px !important;
        background:
            color-mix(
                in srgb,
                var(--pb-header-bg) 90%,
                transparent
            ) !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 99999999 !important;
    }

    .vokk-header-inner {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: none !important;
        height: 74px !important;
        padding: 0 20px !important;
    }

    .vokk-nav,
    .vokk-action {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    .vokk-logo {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .vokk-logo img {
        height: 42px !important;
        max-width: 180px !important;
    }

    .vokk-hamburger {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        z-index: 100 !important;
    }

    .vokk-mobile-menu {
        position: relative !important;
        width: 100% !important;
        z-index: 50 !important;
    }

    .vokk-mobile-menu.is-open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .vokk-mobile-menu.is-open .vokk-mobile-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .vokk-mobile-menu.is-open .vokk-mobile-nav a {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--pb-header-text) !important;
    }
}

@media screen and (max-width: 600px) {
    .vokk-header {
        min-height: 70px !important;
    }

    .vokk-header-inner {
        height: 70px !important;
        padding: 0 16px !important;
    }

    .vokk-logo img {
        height: 38px !important;
        max-width: 160px !important;
    }

    .vokk-hamburger {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        flex-basis: 42px !important;
    }

    .vokk-mobile-menu {
        padding: 10px 16px 20px !important;
    }
}


/* =========================================================
   VOKK SCROLL HEADER STATE
========================================================= */

.vokk-header {
    transition:
        background-color .28s ease,
        backdrop-filter .28s ease,
        -webkit-backdrop-filter .28s ease,
        box-shadow .28s ease !important;
}

.vokk-header.is-scrolled {
    background: rgba(3, 11, 24, .76) !important;

    -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
    backdrop-filter: blur(14px) saturate(135%) !important;

    box-shadow:
        0 1px 0 rgba(255,255,255,.06),
        0 8px 30px rgba(0,0,0,.18) !important;
}

@media screen and (max-width: 1024px) {
    .vokk-header.is-scrolled {
        background: rgba(3, 11, 24, .88) !important;
    }
}

/* VOKK SCROLL HEADER STATE */




    body.pb-preset-vokk_blue .vokk-header{
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
    }



    body.pb-preset-vokk_blue .vokk-hamburger{
        background: rgba(255,255,255,.08) !important;
        border: 1px solid rgba(255,255,255,.18) !important;
    }



    body.pb-preset-vokk_blue .vokk-nav a:hover,
body.pb-preset-vokk_blue .vokk-nav a.active,
body.pb-preset-vokk_blue .vokk-nav a:focus,
body.pb-preset-vokk_blue .vokk-mobile-nav a:hover,
body.pb-preset-vokk_blue .vokk-mobile-nav a:focus{
        color: #ffffff !important;
        opacity: 1 !important;
        text-decoration: none !important;
        background: transparent !important;
    }



    body:not(.pb-preset-vokk_blue) .vokk-nav a:hover,
body:not(.pb-preset-vokk_blue) .vokk-nav a.active,
body:not(.pb-preset-vokk_blue) .vokk-nav a:focus,
body:not(.pb-preset-vokk_blue) .vokk-mobile-nav a:hover,
body:not(.pb-preset-vokk_blue) .vokk-mobile-nav a:focus{
        color: var(--kavion-primary) !important;
        opacity: 1 !important;
        text-decoration: none !important;
        background: transparent !important;
    }

/* =========================================================
   footer.php
========================================================= */

/* Standaard footer linkjes in ruststand */
.kb-block-agencyfooter-block ul a {
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Standaard social iconen in ruststand */
.kb-block-agencyfooter-block .agencyfooter-social-icon {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    transition: all 0.25s ease;
}





    /* =========================================================
       DEFAULT STAND: HOVER PAKT NETJES HET ORIGINELE BLAUW
    ========================================================= */
    body.pb-preset-vokk_blue .kb-block-agencyfooter-block ul a:hover{
        color: #ffffff !important;
    }
    body.pb-preset-vokk_blue .kb-block-agencyfooter-block .agencyfooter-social-icon:hover{
        background: #3867fa !important;
        color: #ffffff !important;
        box-shadow: none !important;
        transform: none !important;
    }



    /* =========================================================
       ANDERE SFEREN: KLEUREN ACTIEF MEE MET DE GEKOZEN SFEER
    ========================================================= */
    body:not(.pb-preset-vokk_blue) .kb-block-agencyfooter-block ul a:hover{
        color: var(--kavion-primary-light) !important;
    }
    body:not(.pb-preset-vokk_blue) .kb-block-agencyfooter-block .agencyfooter-social-icon:hover{
        background: var(--kavion-primary) !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

/* =========================================================
   front-page.php
========================================================= */

/* =========================================
   DYNAMISCHE SFEER VARIABELEN
========================================= */
body.pb-template-front-page .kb-block.nuke-v10-master,
body.pb-template-front-page .pb-vokk-light{
    --vokk-primary: var(--pb-primary);
    --vokk-primary-light: var(--pb-primary-light);
    --vokk-dark: var(--pb-dark);
    --vokk-darker: var(--pb-darker);
    --vokk-glow: var(--pb-glow);
    --vokk-btn-1: var(--pb-btn-1);
    --vokk-btn-2: var(--pb-btn-2);
}

body.pb-template-front-page .kb-block.nuke-v10-master{
  width: 100%;
  background-color: #0b0f17 !important;
  font-family: "Poppins", sans-serif !important;
  color: #ffffff !important;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

body.pb-template-front-page .kb-block.nuke-v10-master *{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =========================================
   HEADER LINK FIX VOOR HOME
========================================= */
body.pb-template-front-page .vokk-nav a,
body.pb-template-front-page .vokk-mobile-nav a{
    color: #ffffff !important;
    opacity: 0.85;
}
body.pb-template-front-page .vokk-nav a:hover,
body.pb-template-front-page .vokk-nav a.active,
body.pb-template-front-page .vokk-mobile-nav a:hover{
    opacity: 1 !important;
}

/* =========================================
   HERO ACHTERGROND & OVERGANG
========================================= */
body.pb-template-front-page .pb-hero-bg-container{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 75% !important;
  z-index: 1 !important;
}

body.pb-template-front-page .pb-hero-bg-container img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important;
  display: block !important;
  opacity: 0.85 !important;
}

body.pb-template-front-page .pb-hero-bg-overlay{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background:
    linear-gradient(
      90deg,
      #0b0f17 0%,
      #0b0f17 26%,
      rgba(11,15,23,.90) 38%,
      rgba(11,15,23,.60) 52%,
      rgba(11,15,23,.20) 68%,
      rgba(11,15,23,.05) 100%
    ) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

body.pb-template-front-page .kb-block.nuke-v10-master::after{
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(
    circle,
    var(--vokk-glow) 0%,
    color-mix(in srgb, var(--vokk-primary) 4%, transparent) 38%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 3;
}


	/* =========================================
   HERO INNER & CONTENT
========================================= */
body.pb-template-front-page .kb-inner.pb-hero-inner{
  position: relative !important;
  z-index: 10 !important;
  display: grid !important;
  grid-template-columns: 1.15fr .85fr !important;
  align-items: center !important;
  gap: 40px !important;
  width: 100% !important;
  max-width: 1400px !important;
  min-height: 720px !important;
  margin: 0 auto !important;
  padding: 120px 24px 110px 24px !important;
}

body.pb-template-front-page .pb-hero-content{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  max-width: 690px !important;
}

body.pb-template-front-page .pb-hero-subtitle{
  color: var(--vokk-primary-light) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  margin-bottom: 22px !important;
}

body.pb-template-front-page .pb-hero-title{
    font-family: "Poppins", sans-serif !important;
    font-size: clamp(36px, 3.8vw, 54px) !important;
    font-weight: 700 !important;
    color: color-mix(in srgb, #ffffff 88%, var(--vokk-primary-light)) !important;
    line-height: 1.12 !important;
    letter-spacing: -1.2px !important;
    margin-bottom: 26px !important;
    max-width: 12ch !important;
}

body.pb-template-front-page .pb-hero-title span{
  color: var(--vokk-primary-light) !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
}

body.pb-template-front-page .pb-hero-text{
  max-width: 620px !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #b3b3bd !important;
  margin-bottom: 28px !important;
}

/* =========================================
   FEATURES & KNOPPEN
========================================= */
body.pb-template-front-page .pb-hero-features{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px 24px !important;
  margin-bottom: 34px !important;
}

body.pb-template-front-page .pb-hero-feature-item{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #f4f4f5 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.pb-template-front-page .pb-hero-feature-item svg{
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: var(--vokk-primary-light) !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.pb-template-front-page .nuke-main-button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 16px 30px !important;
  background: linear-gradient(135deg, var(--vokk-btn-1) 0%, var(--vokk-btn-2) 100%) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 25px color-mix(in srgb, var(--vokk-primary) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.15) !important;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}

body.pb-template-front-page .nuke-main-button:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 35px color-mix(in srgb, var(--vokk-primary) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

body.pb-template-front-page .nuke-main-button svg{
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
}

/* =========================================
   RECHTER VISUAL & TILES (GEÏSOLEERDE ICONEN)
========================================= */
body.pb-template-front-page .pb-hero-visual{
  position: relative !important;
  width: 100% !important;
  height: 560px !important;
  display: block !important;
}

body.pb-template-front-page .pb-hero-tiles-stack{
  position: absolute !important;
  top: 50% !important;
  right: -20px !important;
  transform: translateY(-50%) !important;
  width: 210px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  margin: 0 !important;
  animation: heroStackFloat 6s ease-in-out infinite !important;
}

body.pb-template-front-page .pb-hero-tile{
  width: 210px !important;
  min-width: 210px !important;
  height: 170px !important;
  min-height: 170px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 20px !important;
  background: linear-gradient(145deg, rgba(24,31,44,.94), rgba(10,14,22,.94)) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  overflow: hidden !important;
}

body.pb-template-front-page .pb-hero-tile-icon{
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 42px !important;
  background: linear-gradient(135deg, var(--vokk-primary-light), var(--vokk-primary)) !important;
  border-radius: 50% !important;
  box-shadow: 0 7px 20px color-mix(in srgb, var(--vokk-primary) 40%, transparent) !important;
}

body.pb-template-front-page .pb-hero-tile-icon svg{
  width: 19px !important;
  height: 19px !important;
  stroke: #ffffff !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.pb-template-front-page .pb-hero-tile-content{
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

body.pb-template-front-page .pb-hero-tile-title{
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.pb-template-front-page .pb-hero-tile-desc{
  color: #afb5c0 !important;
  font-size: 11px !important;
}

@keyframes heroStackFloat{
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% - 6px)); }
}
	
	
	
/* =========================================
   VOKK LANDINGPAGE - LICHTE SECTIES
========================================= */
body.pb-template-front-page .pb-vokk-light{
  width: 100%;
  position: relative;
  background:
    radial-gradient(circle at 50% -120px, var(--vokk-glow), transparent 340px),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  color: #0f172a;
  font-family: "Poppins", sans-serif;
  overflow: hidden;
}

body.pb-template-front-page .pb-vokk-wrap{
  width: min(100% - 48px, 1400px);
  margin: 0 auto;
}

body.pb-template-front-page .pb-vokk-eyebrow{
  margin: 0 0 11px;
  color: var(--vokk-primary);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1.75px;
  text-transform: uppercase;
}

body.pb-template-front-page .pb-vokk-heading{
  margin: 0;
  color: color-mix(in srgb, #0f172a 85%, var(--vokk-primary));
  font-size: clamp(27px, 3vw, 39px);
  line-height: 1.15;
  font-weight: 700;
  text-align: center;
  letter-spacing: -1.25px;
}

/* --- WAAROM KIEZEN (UNIEKE ICONEN PER KAARTJE) --- */
body.pb-template-front-page .pb-vokk-why{ padding: 50px 0 30px; }
body.pb-template-front-page .pb-vokk-benefits{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 26px;
  padding: 0 18px;
}
body.pb-template-front-page .pb-vokk-benefit{ text-align: center; }
body.pb-template-front-page .pb-vokk-benefit-icon{
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--vokk-primary);
  background: color-mix(in srgb, var(--vokk-primary) 10%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--vokk-primary) 25%, transparent);
}
body.pb-template-front-page .pb-vokk-benefit-icon svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--vokk-primary);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.pb-template-front-page .pb-vokk-benefit h3{
  margin: 0 0 5px;
  color: color-mix(in srgb, #111827 90%, var(--vokk-primary));
  font-size: 13px;
  font-weight: 700;
}
body.pb-template-front-page .pb-vokk-benefit p{
  margin: 0 auto;
  max-width: 210px;
  color: #5d6470;
  font-size: 10.5px;
  line-height: 1.55;
}

/* --- DIENSTENKAARTEN (HERSTELD & ROBUUST) --- */
body.pb-template-front-page .pb-vokk-services{ padding: 20px 0 40px; }
body.pb-template-front-page .pb-vokk-service-grid{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-top: 20px !important;
}

body.pb-template-front-page .pb-vokk-service-card{
  min-height: 280px !important;
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

body.pb-template-front-page .pb-vokk-service-card img.pb-service-bg{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

body.pb-template-front-page .pb-vokk-service-card::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(180deg, rgba(3,10,22,0.1) 20%, rgba(3,10,22,0.92) 100%) !important;
}

body.pb-template-front-page .pb-vokk-service-content{
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  padding: 24px 20px !important;
  color: #fff !important;
}

body.pb-template-front-page .pb-vokk-service-content h3{
  margin: 0 0 6px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

body.pb-template-front-page .pb-vokk-service-content p{
  margin: 0 0 14px !important;
  color: rgba(255,255,255,0.82) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

body.pb-template-front-page .pb-vokk-service-more{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--vokk-primary-light) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* --- TRUST STRIP --- */
body.pb-template-front-page .pb-vokk-trust{ padding: 20px 0 30px; }
body.pb-template-front-page .pb-vokk-trust-label{ margin: 0 0 7px; color: var(--vokk-primary); font-size: 9px; font-weight: 700; text-align: center; text-transform: uppercase; }
body.pb-template-front-page .pb-vokk-trust-box{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(255,255,255,.88);
  border: 1px solid #e8edf5;
  border-radius: 9px;
}
body.pb-template-front-page .pb-vokk-trust-item{ padding: 13px 18px; text-align: center; }
body.pb-template-front-page .pb-vokk-score{ display: block; color: var(--vokk-primary); font-size: 22px; font-weight: 700; }
body.pb-template-front-page .pb-vokk-trust-small{ color: #5b6470; font-size: 8.5px; }
body.pb-template-front-page .pb-vokk-google .g1{ color: #4285f4; }
body.pb-template-front-page .pb-vokk-google .g2{ color: #ea4335; }
body.pb-template-front-page .pb-vokk-google .g3{ color: #fbbc05; }
body.pb-template-front-page .pb-vokk-google .g5{ color: #34a853; }
body.pb-template-front-page .pb-vokk-stars{ color: #f8b400; font-size: 11px; }

/* --- WERKWIJZE (PROCESS) --- */
body.pb-template-front-page .pb-vokk-process{ padding: 52px 0 60px; background: #ffffff; }
body.pb-template-front-page .pb-vokk-process-intro{ max-width: 590px; margin: 12px auto 0; color: #69717e; font-size: 12px; text-align: center; }
body.pb-template-front-page .pb-vokk-process-grid{
  max-width: 1000px;
  margin: 42px auto 0;
  display: grid;
  grid-template-columns: 1fr 90px 1fr 90px 1fr;
  align-items: start;
}
body.pb-template-front-page .pb-vokk-process-item{ position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
body.pb-template-front-page .pb-vokk-process-number{ position: absolute; top: -6px; left: calc(50% + 25px); color: var(--vokk-primary); font-size: 9px; font-weight: 700; }
body.pb-template-front-page .pb-vokk-process-icon{
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--vokk-primary-light), var(--vokk-primary));
  border-radius: 50%;
}
body.pb-template-front-page .pb-vokk-process-icon svg{ width: 20px; height: 20px; fill: none; stroke: #ffffff !important; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.pb-template-front-page .pb-vokk-process-item h3{ margin: 0 0 8px; color: color-mix(in srgb, #111827 90%, var(--vokk-primary)); font-size: 15px; font-weight: 700; }
body.pb-template-front-page .pb-vokk-process-item p{ max-width: 245px; color: #687180; font-size: 10.5px; }
body.pb-template-front-page .pb-vokk-process-line{ position: relative; height: 52px; }
body.pb-template-front-page .pb-vokk-process-line::before{
  content: "";
  position: absolute;
  top: 26px; left: 5px; right: 5px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--vokk-primary), transparent);
}
	
	/* De complete groep beweegt weer samen in een vloeiende float */
body.pb-template-front-page .pb-hero-tiles-stack{
  position: absolute !important;
  top: 50% !important;
  right: -20px !important;
  transform: translateY(-50%) !important;
  width: 210px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  margin: 0 !important;
  animation: heroStackFloat 6s ease-in-out infinite !important;
}

@keyframes heroStackFloat{
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% - 6px)); }
}

/* De hover-effecten en translaties */
body.pb-template-front-page .pb-hero-tile{
  width: 210px !important;
  min-width: 210px !important;
  height: 170px !important;
  min-height: 170px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 20px !important;
  background: linear-gradient(145deg, rgba(24,31,44,.94), rgba(10,14,22,.94)) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  overflow: hidden !important;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

body.pb-template-front-page .pb-hero-tile:hover{
  transform: translateX(-6px) translateY(-3px) !important;
  border-color: color-mix(in srgb, var(--vokk-primary) 60%, transparent) !important;
  box-shadow: 0 22px 55px rgba(0,0,0,.48), 0 0 30px var(--vokk-glow) !important;
}

/* =========================================================
   page-home.php
========================================================= */

/* =========================================
   DYNAMISCHE SFEER VARIABELEN
========================================= */
body.pb-template-page-home .kb-block.nuke-v10-master,
body.pb-template-page-home .pb-vokk-light{
    --vokk-primary: var(--pb-primary);
    --vokk-primary-light: var(--pb-primary-light);
    --vokk-dark: var(--pb-dark);
    --vokk-darker: var(--pb-darker);
    --vokk-glow: var(--pb-glow);
    --vokk-btn-1: var(--pb-btn-1);
    --vokk-btn-2: var(--pb-btn-2);
}

/* =========================================
   V10 MASTER ROOT
========================================= */
body.pb-template-page-home .kb-block.nuke-v10-master{
  width: 100%;
  background-color: var(--vokk-darker, #050505) !important;
  font-family: "Poppins", sans-serif !important;
  color: #ffffff !important;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

body.pb-template-page-home .kb-block.nuke-v10-master *{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =========================================
   ACHTERGRONDAFBEELDING
========================================= */
body.pb-template-page-home .pb-hero-bg-container{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 75% !important;
  z-index: 1 !important;
}

body.pb-template-page-home .pb-hero-bg-container img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important;
  display: block !important;
}

/* =========================================
   DONKERE OVERGANG
========================================= */
body.pb-template-page-home .pb-hero-bg-overlay{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background:
    linear-gradient(
      90deg,
      var(--vokk-darker, #050505) 0%,
      var(--vokk-darker, #050505) 26%,
      color-mix(in srgb, var(--vokk-darker, #050505) 95%, transparent) 38%,
      color-mix(in srgb, var(--vokk-darker, #050505) 72%, transparent) 52%,
      color-mix(in srgb, var(--vokk-darker, #050505) 22%, transparent) 68%,
      color-mix(in srgb, var(--vokk-darker, #050505) 2%, transparent) 100%
    ) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* subtiele gloed */
body.pb-template-page-home .kb-block.nuke-v10-master::after{
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(
    circle,
    var(--vokk-glow) 0%,
    color-mix(in srgb, var(--vokk-primary) 4%, transparent) 38%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 3;
}

/* =========================================
   HERO INNER
========================================= */
body.pb-template-page-home .kb-inner.pb-hero-inner{
  position: relative !important;
  z-index: 10 !important;
  display: grid !important;
  grid-template-columns: 1.15fr .85fr !important;
  align-items: center !important;
  gap: 40px !important;
  width: 100% !important;
  max-width: 1400px !important;
  min-height: 720px !important;
  margin: 0 auto !important;
  padding: 120px 24px 110px 24px !important;
}

/* =========================================
   LINKER CONTENT
========================================= */
body.pb-template-page-home .pb-hero-content{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  max-width: 690px !important;
}

/* bovenste tekst */
body.pb-template-page-home .pb-hero-subtitle{
  color: var(--vokk-primary-light) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  margin-bottom: 22px !important;
}

/* H1 */
body.pb-template-page-home .pb-hero-title{
  font-family: "Poppins", sans-serif !important;
  font-size: clamp(42px, 4.7vw, 68px) !important;
  font-weight: 800 !important;
  color: color-mix(in srgb, #ffffff 88%, var(--vokk-primary-light)) !important;
  line-height: 1.07 !important;
  letter-spacing: -2.2px !important;
  margin-bottom: 24px !important;
}

body.pb-template-page-home .pb-hero-title span{
  color: var(--vokk-primary-light) !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
}

/* tekst */
body.pb-template-page-home .pb-hero-text{
  max-width: 620px !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #b3b3bd !important;
  margin-bottom: 28px !important;
}

/* =========================================
   FEATURES
========================================= */
body.pb-template-page-home .pb-hero-features{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px 24px !important;
  margin-bottom: 34px !important;
}

body.pb-template-page-home .pb-hero-feature-item{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #f4f4f5 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.pb-template-page-home .pb-hero-feature-item svg{
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: var(--vokk-primary-light) !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* =========================================
   CTA
========================================= */
body.pb-template-page-home .nuke-main-button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 16px 30px !important;
  background: linear-gradient(135deg, var(--vokk-btn-1) 0%, var(--vokk-btn-2) 100%) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 25px color-mix(in srgb, var(--vokk-primary) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.15) !important;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}

body.pb-template-page-home .nuke-main-button:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 35px color-mix(in srgb, var(--vokk-primary) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

body.pb-template-page-home .nuke-main-button svg{
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
}

/* =========================================
   RECHTER VISUAL
========================================= */
body.pb-template-page-home .pb-hero-visual{
  position: relative !important;
  width: 100% !important;
  height: 560px !important;
  display: block !important;
}

/* =========================================
   BADGES STACK
========================================= */
body.pb-template-page-home .pb-hero-tiles-stack{
  position: absolute !important;
  top: 50% !important;
  right: -20px !important;
  transform: translateY(-50%) !important;
  width: 210px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  margin: 0 !important;
  animation: heroStackFloat 6s ease-in-out infinite !important;
}

/* =========================================
   VIERKANTE BADGE
========================================= */
body.pb-template-page-home .pb-hero-tile{
  width: 210px !important;
  min-width: 210px !important;
  height: 170px !important;
  min-height: 170px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 20px !important;
  background: linear-gradient(145deg, rgba(24,31,44,.94), rgba(10,14,22,.94)) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  overflow: hidden !important;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

body.pb-template-page-home .pb-hero-tile::before{
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

body.pb-template-page-home .pb-hero-tile:hover{
  transform: translateX(-6px) translateY(-3px) !important;
  border-color: color-mix(in srgb, var(--vokk-primary) 60%, transparent) !important;
  box-shadow: 0 22px 55px rgba(0,0,0,.48), 0 0 30px var(--vokk-glow) !important;
}

/* =========================================
   BADGE ICON
========================================= */
body.pb-template-page-home .pb-hero-tile-icon{
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 42px !important;
  background: linear-gradient(135deg, var(--vokk-primary-light), var(--vokk-primary)) !important;
  border-radius: 50% !important;
  box-shadow: 0 7px 20px color-mix(in srgb, var(--vokk-primary) 40%, transparent) !important;
}

body.pb-template-page-home .pb-hero-tile-icon svg{
  width: 19px !important;
  height: 19px !important;
  stroke: #ffffff !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* =========================================
   BADGE TEKST
========================================= */
body.pb-template-page-home .pb-hero-tile-content{
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

body.pb-template-page-home .pb-hero-tile-title{
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

body.pb-template-page-home .pb-hero-tile-desc{
  color: #afb5c0 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

@keyframes heroStackFloat{
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% - 6px)); }
}

/* =========================================
   TABLET & MOBIEL RESPONSIVE
========================================= */
@media (max-width: 1180px){
  body.pb-template-page-home .kb-inner.pb-hero-inner{ grid-template-columns: 1.1fr .9fr !important; }
  body.pb-template-page-home .pb-hero-tiles-stack{ right: 0 !important; width: 190px !important; }
  body.pb-template-page-home .pb-hero-tile{ width: 190px !important; min-width: 190px !important; height: 160px !important; min-height: 160px !important; }
}

@media (max-width: 968px){
  body.pb-template-page-home .kb-inner.pb-hero-inner{ grid-template-columns: 1fr !important; min-height: auto !important; padding: 90px 20px 70px 20px !important; }
  body.pb-template-page-home .pb-hero-bg-container{ width: 100% !important; opacity: .56 !important; }
  body.pb-template-page-home .pb-hero-bg-overlay{ background: linear-gradient(180deg, var(--vokk-darker, #050505) 0%, color-mix(in srgb, var(--vokk-darker, #050505) 94%, transparent) 42%, color-mix(in srgb, var(--vokk-darker, #050505) 72%, transparent) 70%, color-mix(in srgb, var(--vokk-darker, #050505) 90%, transparent) 100%) !important; }
  body.pb-template-page-home .pb-hero-content{ max-width: 100% !important; }
  body.pb-template-page-home .pb-hero-title{ font-size: clamp(38px, 9vw, 56px) !important; }
  body.pb-template-page-home .pb-hero-text{ max-width: 680px !important; }
  body.pb-template-page-home .pb-hero-visual{ height: auto !important; margin-top: 50px !important; }
  body.pb-template-page-home .pb-hero-tiles-stack{ position: relative !important; top: auto !important; right: auto !important; transform: none !important; width: 100% !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
  body.pb-template-page-home .pb-hero-tile{ width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 170px !important; }
}

@media (max-width: 650px){
  body.pb-template-page-home .kb-inner.pb-hero-inner{ padding-top: 70px !important; }
  body.pb-template-page-home .pb-hero-title{ letter-spacing: -1.5px !important; }
  body.pb-template-page-home .pb-hero-features{ flex-direction: column !important; gap: 12px !important; }
  body.pb-template-page-home .pb-hero-tiles-stack{ grid-template-columns: 1fr !important; }
  body.pb-template-page-home .pb-hero-tile{ min-height: 150px !important; }
  body.pb-template-page-home .nuke-main-button{ width: 100% !important; }
}

/* =========================================
   VOKK LANDINGPAGE - LICHTE SECTIES
========================================= */
body.pb-template-page-home .pb-vokk-light{
  width: 100%;
  position: relative;
  background:
    radial-gradient(circle at 50% -120px, var(--vokk-glow), transparent 340px),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  color: #0f172a;
  font-family: "Poppins", sans-serif;
  overflow: hidden;
}

body.pb-template-page-home .pb-vokk-light *,
body.pb-template-page-home .pb-vokk-light *::before,
body.pb-template-page-home .pb-vokk-light *::after{
  box-sizing: border-box;
}

body.pb-template-page-home .pb-vokk-wrap{
  width: min(100% - 48px, 1400px);
  margin: 0 auto;
}

body.pb-template-page-home .pb-vokk-eyebrow{
  margin: 0 0 11px;
  color: var(--vokk-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1.75px;
  text-transform: uppercase;
}

body.pb-template-page-home .pb-vokk-heading{
  margin: 0;
  color: color-mix(in srgb, var(--vokk-dark, #121827) 85%, var(--vokk-primary));
  font-size: clamp(27px, 3vw, 39px);
  line-height: 1.15;
  font-weight: 700;
  text-align: center;
  letter-spacing: -1.25px;
}

/* =========================================
   WAAROM KIEZEN
========================================= */
body.pb-template-page-home .pb-vokk-why{
  padding: 30px 0 24px;
}

body.pb-template-page-home .pb-vokk-benefits{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 26px;
  padding: 0 18px;
}

body.pb-template-page-home .pb-vokk-benefit{
  text-align: center;
  min-width: 0;
}

body.pb-template-page-home .pb-vokk-benefit-icon{
  width: 38px;
  height: 38px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--vokk-primary);
  background: color-mix(in srgb, var(--vokk-primary) 8%, #ffffff);
  box-shadow: 0 5px 15px color-mix(in srgb, var(--vokk-primary) 8%, transparent);
}

body.pb-template-page-home .pb-vokk-benefit-icon svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.pb-template-page-home .pb-vokk-benefit h3{
  margin: 0 0 5px;
  color: color-mix(in srgb, #111827 90%, var(--vokk-primary));
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
}

body.pb-template-page-home .pb-vokk-benefit p{
  margin: 0 auto;
  max-width: 210px;
  color: #5d6470;
  font-size: 10.5px;
  line-height: 1.55;
  font-weight: 400;
}

/* =========================================
   FOTO DIENSTENKAARTEN
========================================= */
body.pb-template-page-home .pb-vokk-services{
  padding: 6px 0 22px;
}

body.pb-template-page-home .pb-vokk-service-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

body.pb-template-page-home .pb-vokk-service-card{
  min-height: 248px;
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  box-shadow: 0 9px 25px rgba(15,23,42,.12);
  transform: translateZ(0);
}

body.pb-template-page-home .pb-vokk-service-card::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transition: transform .45s ease;
}

body.pb-template-page-home .pb-vokk-service-card::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(3,10,22,.10) 0%,
      rgba(3,10,22,.28) 34%,
      rgba(3,10,22,.84) 74%,
      rgba(3,10,22,.97) 100%
    );
}

body.pb-template-page-home .pb-vokk-service-card:hover::before{
  transform: scale(1.045);
}

body.pb-template-page-home .pb-vokk-service-card--heat::before{
  background-image: url("admin/kavion-builder/images/vokk/hero.png");
  background-position: 65% center;
}

body.pb-template-page-home .pb-vokk-service-card--cv::before{
  background-image:
    linear-gradient(rgba(5,18,37,.15), rgba(5,18,37,.2)),
    url("admin/kavion-builder/images/vokk/hero.png");
  background-position: 43% center;
}

body.pb-template-page-home .pb-vokk-service-card--sanitary::before{
  background-image:
    linear-gradient(rgba(8,20,38,.26), rgba(8,20,38,.26)),
    url("admin/kavion-builder/images/vokk/hero.png");
  background-position: 28% center;
}

body.pb-template-page-home .pb-vokk-service-card--solar::before{
  background-image:
    linear-gradient(rgba(4,18,41,.3), rgba(4,18,41,.34)),
    url("admin/kavion-builder/images/vokk/hero.png");
  background-position: 85% center;
}

body.pb-template-page-home .pb-vokk-service-content{
  width: 100%;
  padding: 20px 18px 18px;
  color: #fff;
}

body.pb-template-page-home .pb-vokk-service-content h3{
  margin: 0 0 8px;
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
}

body.pb-template-page-home .pb-vokk-service-content p{
  margin: 0 0 14px;
  max-width: 220px;
  color: rgba(255,255,255,.82);
  font-size: 9.5px;
  line-height: 1.55;
}

body.pb-template-page-home .pb-vokk-service-more{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--vokk-primary-light);
  font-size: 9.5px;
  font-weight: 600;
}

body.pb-template-page-home .pb-vokk-service-more svg{
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

/* =========================================
   REVIEW / TRUST STRIP
========================================= */
body.pb-template-page-home .pb-vokk-trust{
  padding: 2px 0 30px;
}

body.pb-template-page-home .pb-vokk-trust-label{
  margin: 0 0 7px;
  color: var(--vokk-primary);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1.55px;
  text-transform: uppercase;
}

body.pb-template-page-home .pb-vokk-trust-box{
  display: grid;
  grid-template-columns: 1.1fr 1.25fr 1.25fr 1.15fr 1fr;
  align-items: stretch;
  min-height: 76px;
  overflow: hidden;
  background: rgba(255,255,255,.88);
  border: 1px solid #e8edf5;
  border-radius: 9px;
  box-shadow: 0 8px 26px rgba(15,23,42,.055);
}

body.pb-template-page-home .pb-vokk-trust-item{
  min-width: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 13px 18px;
  text-align: center;
}

body.pb-template-page-home .pb-vokk-trust-item:not(:last-child)::after{
  content: "";
  position: absolute;
  right: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: #e5e9f0;
}

body.pb-template-page-home .pb-vokk-score{
  display: block;
  margin-bottom: 3px;
  color: var(--vokk-primary);
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}

body.pb-template-page-home .pb-vokk-trust-small{
  color: #5b6470;
  font-size: 8.5px;
  line-height: 1.4;
}

body.pb-template-page-home .pb-vokk-google{
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -1px;
}

body.pb-template-page-home .pb-vokk-google .g1{ color: #4285f4; }
body.pb-template-page-home .pb-vokk-google .g2{ color: #ea4335; }
body.pb-template-page-home .pb-vokk-google .g3{ color: #fbbc05; }
body.pb-template-page-home .pb-vokk-google .g4{ color: #4285f4; }
body.pb-template-page-home .pb-vokk-google .g5{ color: #34a853; }
body.pb-template-page-home .pb-vokk-google .g6{ color: #ea4335; }

body.pb-template-page-home .pb-vokk-stars{
  margin-top: 7px;
  color: #f8b400;
  font-size: 11px;
  letter-spacing: 2px;
  white-space: nowrap;
}

body.pb-template-page-home .pb-vokk-trustpilot{
  color: #24292f;
  font-size: 14px;
  font-weight: 600;
}

body.pb-template-page-home .pb-vokk-trustpilot b{
  color: #00b67a;
  font-size: 18px;
  vertical-align: -1px;
}

body.pb-template-page-home .pb-vokk-certified{
  color: #616875;
  font-size: 10px;
  line-height: 1.15;
}

body.pb-template-page-home .pb-vokk-certified strong{
  display: block;
  color: #454c58;
  font-size: 11px;
  font-weight: 500;
}

body.pb-template-page-home .pb-vokk-certified .pb-vokk-stars{
  margin-top: 5px;
}

@media (max-width: 1100px){
  body.pb-template-page-home .pb-vokk-benefits{ gap: 18px; padding: 0; }
  body.pb-template-page-home .pb-vokk-service-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  body.pb-template-page-home .pb-vokk-service-card{ min-height: 270px; }
  body.pb-template-page-home .pb-vokk-trust-box{ grid-template-columns: repeat(5, 1fr); }
  body.pb-template-page-home .pb-vokk-trust-item{ padding-inline: 10px; }
}

@media (max-width: 800px){
  body.pb-template-page-home .pb-vokk-why{ padding-top: 48px; }
  body.pb-template-page-home .pb-vokk-benefits{ grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  body.pb-template-page-home .pb-vokk-trust-box{ grid-template-columns: repeat(2, 1fr); }
  body.pb-template-page-home .pb-vokk-trust-item{ min-height: 82px; border-bottom: 1px solid #e5e9f0; }
  body.pb-template-page-home .pb-vokk-trust-item:not(:last-child)::after{ display: none; }
  body.pb-template-page-home .pb-vokk-trust-item:nth-last-child(1){ grid-column: 1 / -1; border-bottom: 0; }
}

@media (max-width: 650px){
  body.pb-template-page-home .pb-vokk-wrap{ width: min(100% - 30px, 1400px); }
  body.pb-template-page-home .pb-vokk-why{ padding: 42px 0 26px; }
  body.pb-template-page-home .pb-vokk-heading{ font-size: 26px; letter-spacing: -1px; }
  body.pb-template-page-home .pb-vokk-benefits{ grid-template-columns: 1fr; gap: 23px; margin-top: 28px; }
  body.pb-template-page-home .pb-vokk-benefit p{ max-width: 290px; }
  body.pb-template-page-home .pb-vokk-services{ padding-top: 4px; }
  body.pb-template-page-home .pb-vokk-service-grid{ grid-template-columns: 1fr; gap: 12px; }
  body.pb-template-page-home .pb-vokk-service-card{ min-height: 250px; }
  body.pb-template-page-home .pb-vokk-service-content{ padding: 22px 20px; }
  body.pb-template-page-home .pb-vokk-service-content h3{ font-size: 15px; }
  body.pb-template-page-home .pb-vokk-service-content p,
body.pb-template-page-home .pb-vokk-service-more{ font-size: 10.5px; }
  body.pb-template-page-home .pb-vokk-trust{ padding-bottom: 22px; }
  body.pb-template-page-home .pb-vokk-trust-box{ grid-template-columns: 1fr; }
  body.pb-template-page-home .pb-vokk-trust-item,
body.pb-template-page-home .pb-vokk-trust-item:nth-last-child(1){ grid-column: auto; border-bottom: 1px solid #e5e9f0; }
  body.pb-template-page-home .pb-vokk-trust-item:last-child{ border-bottom: 0; }
}

/* =========================================
   WERKWIJZE - OPEN / PREMIUM TIJDLIJN
========================================= */
body.pb-template-page-home .pb-vokk-process{
  width: 100%;
  position: relative;
  padding: 52px 0 60px;
  background:
    radial-gradient(
      circle at 50% 0%,
      var(--vokk-glow),
      transparent 340px
    ),
    #ffffff;
  font-family: "Poppins", sans-serif;
  overflow: hidden;
}

body.pb-template-page-home .pb-vokk-process .pb-vokk-heading{
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.15;
}

body.pb-template-page-home .pb-vokk-process .pb-vokk-heading span{
  color: var(--vokk-primary);
}

body.pb-template-page-home .pb-vokk-process-intro{
  max-width: 590px;
  margin: 12px auto 0;
  color: #69717e;
  font-size: 12px;
  line-height: 1.65;
  text-align: center;
}

body.pb-template-page-home .pb-vokk-process-grid{
  width: 100%;
  max-width: 1000px;
  margin: 42px auto 0;
  display: grid;
  grid-template-columns: 1fr 90px 1fr 90px 1fr;
  align-items: start;
}

body.pb-template-page-home .pb-vokk-process-item{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 15px;
  text-align: center;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.pb-template-page-home .pb-vokk-process-number{
  position: absolute;
  top: -6px;
  left: calc(50% + 25px);
  color: color-mix(in srgb, var(--vokk-primary) 50%, #bcd3fd);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
}

body.pb-template-page-home .pb-vokk-process-icon{
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--vokk-primary);
  background: linear-gradient(145deg, #f5f8ff, #edf3ff);
  border: 1px solid color-mix(in srgb, var(--vokk-primary) 14%, transparent);
  border-radius: 50%;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--vokk-primary) 7%, transparent);
  transition: transform .3s ease, box-shadow .3s ease;
}

body.pb-template-page-home .pb-vokk-process-icon svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.pb-template-page-home .pb-vokk-process-item:hover .pb-vokk-process-icon{
  transform: translateY(-4px);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--vokk-primary) 13%, transparent);
}

body.pb-template-page-home .pb-vokk-process-item h3{
  margin: 0 0 8px;
  color: color-mix(in srgb, #111827 90%, var(--vokk-primary));
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

body.pb-template-page-home .pb-vokk-process-item p{
  max-width: 245px;
  margin: 0;
  color: #687180;
  font-size: 10.5px;
  line-height: 1.65;
}

body.pb-template-page-home .pb-vokk-process-line{
  position: relative;
  height: 52px;
}

body.pb-template-page-home .pb-vokk-process-line::before{
  content: "";
  position: absolute;
  top: 26px;
  left: 5px;
  right: 5px;
  height: 1px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--vokk-primary) 8%, transparent),
    color-mix(in srgb, var(--vokk-primary) 38%, transparent),
    color-mix(in srgb, var(--vokk-primary) 8%, transparent)
  );
}

body.pb-template-page-home .pb-vokk-process-line::after{
  content: "";
  position: absolute;
  top: 23px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-top: 1px solid color-mix(in srgb, var(--vokk-primary) 45%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--vokk-primary) 45%, transparent);
  transform: rotate(45deg);
}

@media (max-width: 900px){
  body.pb-template-page-home .pb-vokk-process-grid{
    max-width: 720px;
    grid-template-columns: 1fr 50px 1fr 50px 1fr;
  }
  body.pb-template-page-home .pb-vokk-process-item{ padding: 0 8px; }
}

@media (max-width: 650px){
  body.pb-template-page-home .pb-vokk-process{ padding: 42px 0 48px; }
  body.pb-template-page-home .pb-vokk-process-intro{ max-width: 320px; }
  body.pb-template-page-home .pb-vokk-process-grid{ max-width: 340px; margin-top: 34px; display: flex; flex-direction: column; align-items: center; }
  body.pb-template-page-home .pb-vokk-process-item{ width: 100%; }
  body.pb-template-page-home .pb-vokk-process-item p{ max-width: 280px; }
  body.pb-template-page-home .pb-vokk-process-line{ width: 1px; height: 34px; margin: 10px auto; }
  body.pb-template-page-home .pb-vokk-process-line::before{
    top: 0; bottom: 0; left: 0; width: 1px; height: 100%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--vokk-primary) 8%, transparent), color-mix(in srgb, var(--vokk-primary) 38%, transparent), color-mix(in srgb, var(--vokk-primary) 8%, transparent));
  }
  body.pb-template-page-home .pb-vokk-process-line::after{ display: none; }
}

/* =========================================================
   index.php
========================================================= */

/* =========================================
   V10 MASTER ROOT
========================================= */
body.pb-template-index .kb-block.nuke-v10-master{
  width: 100%;
  background-color: #050505 !important;
  font-family: "Poppins", sans-serif !important;
  color: #ffffff !important;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

body.pb-template-index .kb-block.nuke-v10-master *{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =========================================
   ACHTERGRONDAFBEELDING
========================================= */
body.pb-template-index .pb-hero-bg-container{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 75% !important;
  z-index: 1 !important;
}

body.pb-template-index .pb-hero-bg-container img{
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: right center !important;

  display: block !important;
}

/* =========================================
   DONKERE OVERGANG
========================================= */
body.pb-template-index .pb-hero-bg-overlay{
  position: absolute !important;
  inset: 0 !important;

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

  background:
    linear-gradient(
      90deg,
      #050505 0%,
      #050505 26%,
      rgba(5,5,5,.95) 38%,
      rgba(5,5,5,.72) 52%,
      rgba(5,5,5,.22) 68%,
      rgba(5,5,5,.02) 100%
    ) !important;

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

/* subtiele blauwe gloed */
body.pb-template-index .kb-block.nuke-v10-master::after{
  content: "";
  position: absolute;

  width: 700px;
  height: 700px;

  right: 8%;
  top: 50%;

  transform: translateY(-50%);

  background: radial-gradient(
    circle,
    rgba(56,103,250,.12) 0%,
    rgba(56,103,250,.04) 38%,
    transparent 72%
  );

  pointer-events: none;
  z-index: 3;
}

/* =========================================
   HERO INNER
========================================= */
body.pb-template-index .kb-inner.pb-hero-inner{
  position: relative !important;
  z-index: 10 !important;

  display: grid !important;
  grid-template-columns: 1.15fr .85fr !important;

  align-items: center !important;
  gap: 40px !important;

  width: 100% !important;
  max-width: 1400px !important;

  min-height: 720px !important;

  margin: 0 auto !important;

  padding:
    120px
    24px
    110px
    24px !important;
}

/* =========================================
   LINKER CONTENT
========================================= */
body.pb-template-index .pb-hero-content{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  max-width: 690px !important;
}

/* bovenste blauwe tekst */
body.pb-template-index .pb-hero-subtitle{
  color: #4380ff !important;

  font-size: 12px !important;
  font-weight: 700 !important;

  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;

  margin-bottom: 22px !important;
}

/* H1 */
body.pb-template-index .pb-hero-title{
  font-family: "Poppins", sans-serif !important;

  font-size: clamp(42px, 4.7vw, 68px) !important;
  font-weight: 800 !important;

  color: #ffffff !important;

  line-height: 1.07 !important;
  letter-spacing: -2.2px !important;

  margin-bottom: 24px !important;
}

body.pb-template-index .pb-hero-title span{
  color: #3867fa !important;

  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
}

/* tekst */
body.pb-template-index .pb-hero-text{
  max-width: 620px !important;

  font-size: 16px !important;
  line-height: 1.75 !important;

  color: #b3b3bd !important;

  margin-bottom: 28px !important;
}

/* =========================================
   FEATURES
========================================= */
body.pb-template-index .pb-hero-features{
  display: flex !important;
  flex-wrap: wrap !important;

  gap: 14px 24px !important;

  margin-bottom: 34px !important;
}

body.pb-template-index .pb-hero-feature-item{
  display: flex !important;
  align-items: center !important;

  gap: 8px !important;

  color: #f4f4f5 !important;

  font-size: 13px !important;
  font-weight: 500 !important;
}

body.pb-template-index .pb-hero-feature-item svg{
  width: 17px !important;
  height: 17px !important;

  fill: none !important;
  stroke: #4380ff !important;

  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* =========================================
   CTA
========================================= */
body.pb-template-index .nuke-main-button{
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 12px !important;

  padding: 16px 30px !important;

  background:
    linear-gradient(
      135deg,
      #3d74ff 0%,
      #2563eb 100%
    ) !important;

  color: #ffffff !important;

  border-radius: 999px !important;

  font-family: "Poppins", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;

  text-decoration: none !important;

  box-shadow:
    0 8px 25px rgba(37,99,235,.28),
    inset 0 1px 0 rgba(255,255,255,.15) !important;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease !important;
}

body.pb-template-index .nuke-main-button:hover{
  transform: translateY(-3px) !important;

  box-shadow:
    0 12px 35px rgba(37,99,235,.4),
    inset 0 1px 0 rgba(255,255,255,.2) !important;
}

body.pb-template-index .nuke-main-button svg{
  width: 17px !important;
  height: 17px !important;

  fill: none !important;
  stroke: currentColor !important;
}

/* =========================================
   RECHTER VISUAL
========================================= */
body.pb-template-index .pb-hero-visual{
  position: relative !important;

  width: 100% !important;
  height: 560px !important;

  display: block !important;
}

/* =========================================
   BADGES STACK
   HIER ZIJN ZE VIERKANT GEMAAKT
========================================= */
body.pb-template-index .pb-hero-tiles-stack{
  position: absolute !important;

  top: 50% !important;
  right: -20px !important;

  transform: translateY(-50%) !important;

  width: 210px !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 16px !important;

  margin: 0 !important;
}

/* =========================================
   VIERKANTE BADGE
========================================= */
body.pb-template-index .pb-hero-tile{
  width: 210px !important;
  min-width: 210px !important;

  height: 170px !important;
  min-height: 170px !important;

  position: relative !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: flex-start !important;
  justify-content: center !important;

  gap: 14px !important;

  padding: 20px !important;

  background:
    linear-gradient(
      145deg,
      rgba(24,31,44,.94),
      rgba(10,14,22,.94)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.11) !important;

  border-radius: 16px !important;

  box-shadow:
    0 18px 45px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  overflow: hidden !important;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease !important;
}

/* subtiele highlight bovenin */
body.pb-template-index .pb-hero-tile::before{
  content: "";

  position: absolute;

  top: 0;
  left: 18px;
  right: 18px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.18),
      transparent
    );
}

/* hover */
body.pb-template-index .pb-hero-tile:hover{
  transform: translateX(-6px) translateY(-3px) !important;

  border-color:
    rgba(56,103,250,.35) !important;

  box-shadow:
    0 22px 55px rgba(0,0,0,.48),
    0 0 30px rgba(56,103,250,.08) !important;
}

/* =========================================
   BADGE ICON
========================================= */
body.pb-template-index .pb-hero-tile-icon{
  width: 42px !important;
  height: 42px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 42px !important;

  background:
    linear-gradient(
      135deg,
      #4380ff,
      #2457e6
    ) !important;

  border-radius: 50% !important;

  box-shadow:
    0 7px 20px rgba(37,99,235,.32) !important;
}

body.pb-template-index .pb-hero-tile-icon svg{
  width: 19px !important;
  height: 19px !important;

  stroke: #ffffff !important;
  fill: none !important;

  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* =========================================
   BADGE TEKST
========================================= */
body.pb-template-index .pb-hero-tile-content{
  display: flex !important;
  flex-direction: column !important;

  gap: 7px !important;
}

body.pb-template-index .pb-hero-tile-title{
  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 600 !important;

  line-height: 1.25 !important;
}

body.pb-template-index .pb-hero-tile-desc{
  color: #afb5c0 !important;

  font-size: 11px !important;
  font-weight: 400 !important;

  line-height: 1.55 !important;
}

/* =========================================
   SUBTIELE FLOAT ANIMATIE
========================================= */
/* =========================================
   GELIJKE SPACING + FLOAT ALS ÉÉN GEHEEL
========================================= */

body.pb-template-index .pb-hero-tiles-stack{
  gap: 22px !important;
}

/* Geen individuele beweging meer */
body.pb-template-index .pb-hero-tile:nth-child(1),
body.pb-template-index .pb-hero-tile:nth-child(2),
body.pb-template-index .pb-hero-tile:nth-child(3){
  animation: none !important;
}

/* De complete groep beweegt nu samen */
@keyframes heroStackFloat{
  0%, 100% {
    transform: translateY(-50%);
  }

  50% {
    transform: translateY(calc(-50% - 6px));
  }
}

body.pb-template-index .pb-hero-tiles-stack{
  animation: heroStackFloat 6s ease-in-out infinite !important;
}

/* =========================================
   TABLET
========================================= */
@media (max-width: 1180px){

  body.pb-template-index .kb-inner.pb-hero-inner{
    grid-template-columns: 1.1fr .9fr !important;
  }

  body.pb-template-index .pb-hero-tiles-stack{
    right: 0 !important;
    width: 190px !important;
  }

  body.pb-template-index .pb-hero-tile{
    width: 190px !important;
    min-width: 190px !important;

    height: 160px !important;
    min-height: 160px !important;
  }
}

/* =========================================
   MOBIEL
========================================= */
@media (max-width: 968px){

  body.pb-template-index .kb-inner.pb-hero-inner{
    grid-template-columns: 1fr !important;

    min-height: auto !important;

    padding:
      90px
      20px
      70px
      20px !important;
  }

  body.pb-template-index .pb-hero-bg-container{
    width: 100% !important;
    opacity: .56 !important;
  }

  body.pb-template-index .pb-hero-bg-overlay{
    background:
      linear-gradient(
        180deg,
        #050505 0%,
        rgba(5,5,5,.94) 42%,
        rgba(5,5,5,.72) 70%,
        rgba(5,5,5,.9) 100%
      ) !important;
  }

  body.pb-template-index .pb-hero-content{
    max-width: 100% !important;
  }

  body.pb-template-index .pb-hero-title{
    font-size:
      clamp(38px, 9vw, 56px) !important;
  }

  body.pb-template-index .pb-hero-text{
    max-width: 680px !important;
  }

  body.pb-template-index .pb-hero-visual{
    height: auto !important;

    margin-top: 50px !important;
  }

  body.pb-template-index .pb-hero-tiles-stack{
    position: relative !important;

    top: auto !important;
    right: auto !important;

    transform: none !important;

    width: 100% !important;

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

    gap: 14px !important;
  }

  body.pb-template-index .pb-hero-tile{
    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 170px !important;
  }
}

/* =========================================
   KLEINE MOBIEL
========================================= */
@media (max-width: 650px){

  body.pb-template-index .kb-inner.pb-hero-inner{
    padding-top: 70px !important;
  }

  body.pb-template-index .pb-hero-title{
    letter-spacing: -1.5px !important;
  }

  body.pb-template-index .pb-hero-features{
    flex-direction: column !important;
    gap: 12px !important;
  }

  body.pb-template-index .pb-hero-tiles-stack{
    grid-template-columns: 1fr !important;
  }

  body.pb-template-index .pb-hero-tile{
    min-height: 150px !important;
  }

  body.pb-template-index .nuke-main-button{
    width: 100% !important;
  }
}




/* =========================================================
   VOKK LANDINGPAGE - VERVOLG OP HET OORSPRONKELIJKE ONTWERP
   Header/footer bewust NIET inbegrepen.
========================================================= */

body.pb-template-index .pb-vokk-light{
  width: 100%;
  position: relative;
  background:
    radial-gradient(circle at 50% -120px, rgba(37,99,235,.065), transparent 340px),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  color: #0f172a;
  font-family: "Poppins", sans-serif;
  overflow: hidden;
}

body.pb-template-index .pb-vokk-light *,
body.pb-template-index .pb-vokk-light *::before,
body.pb-template-index .pb-vokk-light *::after{
  box-sizing: border-box;
}

body.pb-template-index .pb-vokk-wrap{
  width: min(100% - 48px, 1400px);
  margin: 0 auto;
}

body.pb-template-index .pb-vokk-eyebrow{
  margin: 0 0 11px;
  color: #3971f5;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1.75px;
  text-transform: uppercase;
}

body.pb-template-index .pb-vokk-heading{
  margin: 0;
  color: #121827;
  font-size: clamp(27px, 3vw, 39px);
  line-height: 1.15;
  font-weight: 700;
  text-align: center;
  letter-spacing: -1.25px;
}

/* =========================================================
   WAAROM KIEZEN
========================================================= */
body.pb-template-index .pb-vokk-why{
  padding: 30px 0 24px;
}

body.pb-template-index .pb-vokk-benefits{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 26px;
  padding: 0 18px;
}

body.pb-template-index .pb-vokk-benefit{
  text-align: center;
  min-width: 0;
}

body.pb-template-index .pb-vokk-benefit-icon{
  width: 38px;
  height: 38px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #3e73f5;
  background: #eff5ff;
  box-shadow: 0 5px 15px rgba(37,99,235,.08);
}

body.pb-template-index .pb-vokk-benefit-icon svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.pb-template-index .pb-vokk-benefit h3{
  margin: 0 0 5px;
  color: #111827;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
}

body.pb-template-index .pb-vokk-benefit p{
  margin: 0 auto;
  max-width: 210px;
  color: #5d6470;
  font-size: 10.5px;
  line-height: 1.55;
  font-weight: 400;
}

/* =========================================================
   FOTO DIENSTENKAARTEN
========================================================= */
body.pb-template-index .pb-vokk-services{
  padding: 6px 0 22px;
}

body.pb-template-index .pb-vokk-service-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

body.pb-template-index .pb-vokk-service-card{
  min-height: 248px;
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  box-shadow: 0 9px 25px rgba(15,23,42,.12);
  transform: translateZ(0);
}

body.pb-template-index .pb-vokk-service-card::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transition: transform .45s ease;
}

body.pb-template-index .pb-vokk-service-card::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(3,10,22,.10) 0%,
      rgba(3,10,22,.28) 34%,
      rgba(3,10,22,.84) 74%,
      rgba(3,10,22,.97) 100%
    );
}

body.pb-template-index .pb-vokk-service-card:hover::before{
  transform: scale(1.045);
}

body.pb-template-index .pb-vokk-service-card--heat::before{
  background-image: url("admin/kavion-builder/images/vokk/hero.png");
  background-position: 65% center;
}

body.pb-template-index .pb-vokk-service-card--cv::before{
  background-image:
    linear-gradient(rgba(5,18,37,.15), rgba(5,18,37,.2)),
    url("admin/kavion-builder/images/vokk/hero.png");
  background-position: 43% center;
}

body.pb-template-index .pb-vokk-service-card--sanitary::before{
  background-image:
    linear-gradient(rgba(8,20,38,.26), rgba(8,20,38,.26)),
    url("admin/kavion-builder/images/vokk/hero.png");
  background-position: 28% center;
}

body.pb-template-index .pb-vokk-service-card--solar::before{
  background-image:
    linear-gradient(rgba(4,18,41,.3), rgba(4,18,41,.34)),
    url("admin/kavion-builder/images/vokk/hero.png");
  background-position: 85% center;
}

body.pb-template-index .pb-vokk-service-content{
  width: 100%;
  padding: 20px 18px 18px;
  color: #fff;
}

body.pb-template-index .pb-vokk-service-content h3{
  margin: 0 0 8px;
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
}

body.pb-template-index .pb-vokk-service-content p{
  margin: 0 0 14px;
  max-width: 220px;
  color: rgba(255,255,255,.82);
  font-size: 9.5px;
  line-height: 1.55;
}

body.pb-template-index .pb-vokk-service-more{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #6ea0ff;
  font-size: 9.5px;
  font-weight: 600;
}

body.pb-template-index .pb-vokk-service-more svg{
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

/* =========================================================
   REVIEW / TRUST STRIP
========================================================= */
body.pb-template-index .pb-vokk-trust{
  padding: 2px 0 30px;
}

body.pb-template-index .pb-vokk-trust-label{
  margin: 0 0 7px;
  color: #3971f5;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1.55px;
  text-transform: uppercase;
}

body.pb-template-index .pb-vokk-trust-box{
  display: grid;
  grid-template-columns: 1.1fr 1.25fr 1.25fr 1.15fr 1fr;
  align-items: stretch;
  min-height: 76px;
  overflow: hidden;
  background: rgba(255,255,255,.88);
  border: 1px solid #e8edf5;
  border-radius: 9px;
  box-shadow: 0 8px 26px rgba(15,23,42,.055);
}

body.pb-template-index .pb-vokk-trust-item{
  min-width: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 13px 18px;
  text-align: center;
}

body.pb-template-index .pb-vokk-trust-item:not(:last-child)::after{
  content: "";
  position: absolute;
  right: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: #e5e9f0;
}

body.pb-template-index .pb-vokk-score{
  display: block;
  margin-bottom: 3px;
  color: #3971f5;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}

body.pb-template-index .pb-vokk-trust-small{
  color: #5b6470;
  font-size: 8.5px;
  line-height: 1.4;
}

body.pb-template-index .pb-vokk-google{
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -1px;
}

body.pb-template-index .pb-vokk-google .g1{ color: #4285f4; }
body.pb-template-index .pb-vokk-google .g2{ color: #ea4335; }
body.pb-template-index .pb-vokk-google .g3{ color: #fbbc05; }
body.pb-template-index .pb-vokk-google .g4{ color: #4285f4; }
body.pb-template-index .pb-vokk-google .g5{ color: #34a853; }
body.pb-template-index .pb-vokk-google .g6{ color: #ea4335; }

body.pb-template-index .pb-vokk-stars{
  margin-top: 7px;
  color: #f8b400;
  font-size: 11px;
  letter-spacing: 2px;
  white-space: nowrap;
}

body.pb-template-index .pb-vokk-trustpilot{
  color: #24292f;
  font-size: 14px;
  font-weight: 600;
}

body.pb-template-index .pb-vokk-trustpilot b{
  color: #00b67a;
  font-size: 18px;
  vertical-align: -1px;
}

body.pb-template-index .pb-vokk-certified{
  color: #616875;
  font-size: 10px;
  line-height: 1.15;
}

body.pb-template-index .pb-vokk-certified strong{
  display: block;
  color: #454c58;
  font-size: 11px;
  font-weight: 500;
}

body.pb-template-index .pb-vokk-certified .pb-vokk-stars{
  margin-top: 5px;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1100px){
  body.pb-template-index .pb-vokk-benefits{
    gap: 18px;
    padding: 0;
  }

  body.pb-template-index .pb-vokk-service-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  body.pb-template-index .pb-vokk-service-card{
    min-height: 270px;
  }

  body.pb-template-index .pb-vokk-trust-box{
    grid-template-columns: repeat(5, 1fr);
  }

  body.pb-template-index .pb-vokk-trust-item{
    padding-inline: 10px;
  }
}

@media (max-width: 800px){
  body.pb-template-index .pb-vokk-why{
    padding-top: 48px;
  }

  body.pb-template-index .pb-vokk-benefits{
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 20px;
  }

  body.pb-template-index .pb-vokk-trust-box{
    grid-template-columns: repeat(2, 1fr);
  }

  body.pb-template-index .pb-vokk-trust-item{
    min-height: 82px;
    border-bottom: 1px solid #e5e9f0;
  }

  body.pb-template-index .pb-vokk-trust-item:not(:last-child)::after{
    display: none;
  }

  body.pb-template-index .pb-vokk-trust-item:nth-last-child(1){
    grid-column: 1 / -1;
    border-bottom: 0;
  }
}

@media (max-width: 650px){
  body.pb-template-index .pb-vokk-wrap{
    width: min(100% - 30px, 1400px);
  }

  body.pb-template-index .pb-vokk-why{
    padding: 42px 0 26px;
  }

  body.pb-template-index .pb-vokk-heading{
    font-size: 26px;
    letter-spacing: -1px;
  }

  body.pb-template-index .pb-vokk-benefits{
    grid-template-columns: 1fr;
    gap: 23px;
    margin-top: 28px;
  }

  body.pb-template-index .pb-vokk-benefit p{
    max-width: 290px;
  }

  body.pb-template-index .pb-vokk-services{
    padding-top: 4px;
  }

  body.pb-template-index .pb-vokk-service-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.pb-template-index .pb-vokk-service-card{
    min-height: 250px;
  }

  body.pb-template-index .pb-vokk-service-content{
    padding: 22px 20px;
  }

  body.pb-template-index .pb-vokk-service-content h3{
    font-size: 15px;
  }

  body.pb-template-index .pb-vokk-service-content p,
body.pb-template-index .pb-vokk-service-more{
    font-size: 10.5px;
  }

  body.pb-template-index .pb-vokk-trust{
    padding-bottom: 22px;
  }

  body.pb-template-index .pb-vokk-trust-box{
    grid-template-columns: 1fr;
  }

  body.pb-template-index .pb-vokk-trust-item,
body.pb-template-index .pb-vokk-trust-item:nth-last-child(1){
    grid-column: auto;
    border-bottom: 1px solid #e5e9f0;
  }

  body.pb-template-index .pb-vokk-trust-item:last-child{
    border-bottom: 0;
  }
}


/* =========================================
   WERKWIJZE - OPEN / PREMIUM TIJDLIJN
========================================= */

body.pb-template-index .pb-vokk-process{
  width: 100%;
  position: relative;

  padding: 52px 0 60px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(37,99,235,.04),
      transparent 340px
    ),
    #ffffff;

  font-family: "Poppins", sans-serif;

  overflow: hidden;
}


/* KOP */

body.pb-template-index .pb-vokk-process .pb-vokk-heading{
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.15;
}

body.pb-template-index .pb-vokk-process .pb-vokk-heading span{
  color: #3971f5;
}

body.pb-template-index .pb-vokk-process-intro{
  max-width: 590px;

  margin: 12px auto 0;

  color: #69717e;

  font-size: 12px;
  line-height: 1.65;

  text-align: center;
}


/* =========================================
   TIJDLIJN
========================================= */

body.pb-template-index .pb-vokk-process-grid{
  width: 100%;
  max-width: 1000px;

  margin: 42px auto 0;

  display: grid;

  grid-template-columns:
    1fr
    90px
    1fr
    90px
    1fr;

  align-items: start;
}


/* =========================================
   STAP
========================================= */

body.pb-template-index .pb-vokk-process-item{
  position: relative;

  display: flex;
  flex-direction: column;

  align-items: center;

  padding: 0 15px;

  text-align: center;

  /* GEEN KAART */
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}


/* =========================================
   NUMMER
========================================= */

body.pb-template-index .pb-vokk-process-number{
  position: absolute;

  top: -6px;
  left: calc(50% + 25px);

  color: #9db8fa;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: .8px;
}


/* =========================================
   ICON
========================================= */

body.pb-template-index .pb-vokk-process-icon{
  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 18px;

  color: #3971f5;

  background:
    linear-gradient(
      145deg,
      #f5f8ff,
      #edf3ff
    );

  border:
    1px solid
    rgba(57,113,245,.14);

  border-radius: 50%;

  box-shadow:
    0 7px 18px
    rgba(37,99,235,.07);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

body.pb-template-index .pb-vokk-process-icon svg{
  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* subtiele interactie */

body.pb-template-index .pb-vokk-process-item:hover
.pb-vokk-process-icon{
  transform: translateY(-4px);

  box-shadow:
    0 12px 24px
    rgba(37,99,235,.13);
}


/* =========================================
   TEKST
========================================= */

body.pb-template-index .pb-vokk-process-item h3{
  margin: 0 0 8px;

  color: #111827;

  font-size: 15px;
  line-height: 1.3;

  font-weight: 700;
}

body.pb-template-index .pb-vokk-process-item p{
  max-width: 245px;

  margin: 0;

  color: #687180;

  font-size: 10.5px;
  line-height: 1.65;
}


/* =========================================
   LIJN TUSSEN DE STAPPEN
========================================= */

body.pb-template-index .pb-vokk-process-line{
  position: relative;

  height: 52px;
}


/* dunne lijn */

body.pb-template-index .pb-vokk-process-line::before{
  content: "";

  position: absolute;

  top: 26px;
  left: 5px;
  right: 5px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(57,113,245,.08),
      rgba(57,113,245,.38),
      rgba(57,113,245,.08)
    );
}


/* klein pijltje */

body.pb-template-index .pb-vokk-process-line::after{
  content: "";

  position: absolute;

  top: 23px;
  right: 4px;

  width: 7px;
  height: 7px;

  border-top:
    1px solid
    rgba(57,113,245,.45);

  border-right:
    1px solid
    rgba(57,113,245,.45);

  transform: rotate(45deg);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px){

  body.pb-template-index .pb-vokk-process-grid{
    max-width: 720px;

    grid-template-columns:
      1fr
      50px
      1fr
      50px
      1fr;
  }

  body.pb-template-index .pb-vokk-process-item{
    padding: 0 8px;
  }

}


/* =========================================
   MOBIEL
========================================= */

@media (max-width: 650px){

  body.pb-template-index .pb-vokk-process{
    padding: 42px 0 48px;
  }

  body.pb-template-index .pb-vokk-process-intro{
    max-width: 320px;
  }

  body.pb-template-index .pb-vokk-process-grid{
    max-width: 340px;

    margin-top: 34px;

    display: flex;
    flex-direction: column;

    align-items: center;
  }


  body.pb-template-index .pb-vokk-process-item{
    width: 100%;
  }


  body.pb-template-index .pb-vokk-process-item p{
    max-width: 280px;
  }


  /* verticale lijn tussen stappen */

  body.pb-template-index .pb-vokk-process-line{
    width: 1px;
    height: 34px;

    margin: 10px auto;
  }

  body.pb-template-index .pb-vokk-process-line::before{
    top: 0;
    bottom: 0;
    left: 0;

    width: 1px;
    height: 100%;

    background:
      linear-gradient(
        180deg,
        rgba(57,113,245,.08),
        rgba(57,113,245,.38),
        rgba(57,113,245,.08)
      );
  }

  body.pb-template-index .pb-vokk-process-line::after{
    display: none;
  }

}

/* =========================================================
   page.php
========================================================= */

body.pb-template-page .vokk-default-page{
    --vokk-primary: var(--pb-primary);
    --vokk-primary-light: var(--pb-primary-light);
    --vokk-dark: var(--pb-dark);
    
    width: 100%;
    min-height: 70vh;
    padding: 140px 24px 100px 24px;
    background: #ffffff;
    font-family: "Poppins", sans-serif;
    color: #0f172a;
    box-sizing: border-box;
}

body.pb-template-page .vokk-default-page *{
    box-sizing: border-box;
}

body.pb-template-page .vokk-default-container{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

body.pb-template-page .vokk-default-page h1{
    margin: 0 0 30px;
    color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary));
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -1.5px;
    line-height: 1.15;
}

body.pb-template-page .vokk-default-content{
    color: #475467;
    font-size: 15px;
    line-height: 1.8;
}

body.pb-template-page .vokk-default-content h2,
body.pb-template-page .vokk-default-content h3{
    margin: 30px 0 15px;
    color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary));
    font-weight: 700;
}

body.pb-template-page .vokk-default-content p{
    margin: 0 0 20px;
}

body.pb-template-page .vokk-default-content ul,
body.pb-template-page .vokk-default-content ol{
    margin: 0 0 20px 20px;
}

body.pb-template-page .vokk-default-content a{
    color: var(--vokk-primary);
    text-decoration: underline;
}

/* =========================================================
   page-diensten.php
========================================================= */

body.pb-template-page-diensten .vokk-services-page,
body.pb-template-page-diensten .vokk-services-page *{
    box-sizing: border-box;
}

body.pb-template-page-diensten .vokk-services-page{
    --blue: var(--pb-primary);
    --blue-light: var(--pb-primary-light);
    --navy: var(--pb-dark);
    --navy-dark: var(--pb-darker);
    --text: #0f172a;
    --muted: #667085;
    --border: #e6ebf2;
    --soft: color-mix(in srgb, var(--blue) 3%, #ffffff);

    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    color: var(--text);
    background: #ffffff;
}

body.pb-template-page-diensten .vokk-services-container{
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* HERO */
body.pb-template-page-diensten .vokk-services-hero{
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(1,7,15,.98) 0%, rgba(1,7,15,.92) 40%, rgba(1,7,15,.60) 66%, rgba(1,7,15,.20) 100%),
        var(--pb-img-serv_hero_img) center right / cover no-repeat;
}

body.pb-template-page-diensten .vokk-services-hero::after{
    content: "";
    position: absolute;
    inset: auto auto -180px -150px;
    width: 550px;
    height: 400px;
    background: radial-gradient(circle, color-mix(in srgb, var(--blue) 17%, transparent), transparent 68%);
    pointer-events: none;
}

body.pb-template-page-diensten .vokk-services-hero-inner{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 650px;
    padding: 145px 0 85px;
}

body.pb-template-page-diensten .vokk-services-eyebrow{
    display: block;
    margin-bottom: 16px;
    color: var(--blue-light);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

body.pb-template-page-diensten .vokk-services-hero h1{
    max-width: 630px;
    margin: 0 0 20px;
    color: color-mix(in srgb, #ffffff 88%, var(--blue-light));
    font-size: clamp(38px, 4.2vw, 60px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -2px;
}

body.pb-template-page-diensten .vokk-services-hero p{
    max-width: 570px;
    margin: 0;
    color: rgba(255,255,255,.68);
    font-size: 15px;
    line-height: 1.75;
    font-weight: 400;
}

/* INTRO */
body.pb-template-page-diensten .vokk-services-intro{
    padding: 75px 0 65px;
    text-align: center;
}

body.pb-template-page-diensten .vokk-services-intro-inner{
    max-width: 820px;
    margin: 0 auto;
}

body.pb-template-page-diensten .vokk-services-small-title{
    display: block;
    margin-bottom: 12px;
    color: var(--blue);
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

body.pb-template-page-diensten .vokk-services-intro h2{
    margin: 0 0 16px;
    color: color-mix(in srgb, var(--text) 82%, var(--blue));
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1.3px;
}

body.pb-template-page-diensten .vokk-services-intro p{
    max-width: 690px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

/* DIENSTEN */
body.pb-template-page-diensten .vokk-services-list{
    padding: 10px 0 80px;
}

body.pb-template-page-diensten .vokk-service-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(55px, 7vw, 100px);
    align-items: center;
    padding: 65px 0;
    border-top: 1px solid var(--border);
}

body.pb-template-page-diensten .vokk-service-row:nth-child(even) .vokk-service-image{
    order: 2;
}

body.pb-template-page-diensten .vokk-service-row:nth-child(even) .vokk-service-content{
    order: 1;
}

body.pb-template-page-diensten .vokk-service-image{
    position: relative;
    min-height: 390px;
    overflow: hidden;
    border-radius: 16px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 25px 55px rgba(15,23,42,.12);
}

/* Dynamische afbeeldingen per service rij */
body.pb-template-page-diensten .vokk-service-row.warmtepomp .vokk-service-image{
    background-image: linear-gradient(180deg, rgba(3,11,24,.02), rgba(3,11,24,.18)), var(--pb-img-serv_card_1_img);
}

body.pb-template-page-diensten .vokk-service-row.cv .vokk-service-image{
    background-image: linear-gradient(180deg, rgba(3,11,24,.02), rgba(3,11,24,.18)), var(--pb-img-serv_card_2_img);
}

body.pb-template-page-diensten .vokk-service-row.sanitair .vokk-service-image{
    background-image: linear-gradient(180deg, rgba(3,11,24,.02), rgba(3,11,24,.18)), var(--pb-img-serv_card_3_img);
}

body.pb-template-page-diensten .vokk-service-row.zonne-energie .vokk-service-image{
    background-image: linear-gradient(180deg, rgba(3,11,24,.02), rgba(3,11,24,.18)), var(--pb-img-serv_card_4_img);
}

body.pb-template-page-diensten .vokk-service-image::after{
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: inherit;
    pointer-events: none;
}

body.pb-template-page-diensten .vokk-service-number{
    position: absolute;
    top: 22px;
    left: 22px;
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--blue-light), var(--blue));
    border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--blue) 25%, transparent);
}

body.pb-template-page-diensten .vokk-service-content{
    max-width: 520px;
}

body.pb-template-page-diensten .vokk-service-content h2{
    margin: 0 0 15px;
    color: color-mix(in srgb, var(--text) 82%, var(--blue));
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1px;
}

body.pb-template-page-diensten .vokk-service-content > p{
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

body.pb-template-page-diensten .vokk-service-points{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 25px;
    padding: 0;
    list-style: none;
}

body.pb-template-page-diensten .vokk-service-points li{
    position: relative;
    margin: 0;
    padding-left: 24px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
}

body.pb-template-page-diensten .vokk-service-points li::before{
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--blue);
    font-weight: 700;
}

body.pb-template-page-diensten .vokk-service-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blue);
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    text-decoration: none;
}

/* VOORDELEN */
body.pb-template-page-diensten .vokk-service-benefits{
    padding: 55px 0;
    background: var(--soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

body.pb-template-page-diensten .vokk-service-benefits-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

body.pb-template-page-diensten .vokk-service-benefit{
    position: relative;
    padding: 5px 30px;
    text-align: center;
}

body.pb-template-page-diensten .vokk-service-benefit + .vokk-service-benefit{
    border-left: 1px solid var(--border);
}

body.pb-template-page-diensten .vokk-service-benefit-icon{
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 13px;
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 10%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--border));
    border-radius: 50%;
}

body.pb-template-page-diensten .vokk-service-benefit h3{
    margin: 0 0 6px;
    color: color-mix(in srgb, var(--text) 88%, var(--blue));
    font-size: 15px;
    font-weight: 700;
}

body.pb-template-page-diensten .vokk-service-benefit p{
    max-width: 230px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

/* CTA */
body.pb-template-page-diensten .vokk-services-cta{
    padding: 80px 0;
}

body.pb-template-page-diensten .vokk-services-cta-box{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 50px;
    align-items: center;
    padding: 48px 55px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--navy), var(--navy-dark));
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
}

body.pb-template-page-diensten .vokk-services-cta-box h2{
    margin: 0 0 10px;
    color: #ffffff;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 700;
}

body.pb-template-page-diensten .vokk-services-cta-box p{
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,.60);
    font-size: 13px;
    line-height: 1.7;
}

body.pb-template-page-diensten .vokk-services-cta-button{
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 24px;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--blue-light), var(--blue)) !important;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

@media screen and (max-width: 780px){
    body.pb-template-page-diensten .vokk-service-row{ grid-template-columns: 1fr; }
    body.pb-template-page-diensten .vokk-service-benefits-grid{ grid-template-columns: 1fr; gap: 30px; }
    body.pb-template-page-diensten .vokk-service-benefit + .vokk-service-benefit{ border-left: 0; border-top: 1px solid var(--border); }
    body.pb-template-page-diensten .vokk-services-cta-box{ grid-template-columns: 1fr; }
}

/* =========================================================
   page-over-ons.php
========================================================= */

body.pb-template-page-over-ons .vokk-about-page{
    --vokk-primary: var(--pb-primary);
    --vokk-primary-light: var(--pb-primary-light);
    --vokk-dark: var(--pb-dark);
    --vokk-darker: var(--pb-darker);
    --vokk-glow: var(--pb-glow);
    --vokk-btn-1: var(--pb-btn-1);
    --vokk-btn-2: var(--pb-btn-2);

    --blue: var(--vokk-primary);
    --blue-light: var(--vokk-primary-light);
    --navy: var(--vokk-dark);
    --navy-dark: var(--vokk-darker);
    --text: #0f172a;
    --muted: #667085;
    --soft: #f7f9fc;
    --border: #e6ebf2;

    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    color: var(--text);
    background: #ffffff;
    box-sizing: border-box;
}

body.pb-template-page-over-ons .vokk-about-page *{
    box-sizing: border-box;
}

body.pb-template-page-over-ons .vokk-about-container{
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* 1. HERO ACHTERGROND (DYNAMISCH) */
body.pb-template-page-over-ons .vokk-about-hero{
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(2,8,18,.98) 0%, rgba(2,8,18,.92) 40%, rgba(2,8,18,.56) 68%, rgba(2,8,18,.18) 100%),
        var(--pb-img-about_hero_img) center right / cover no-repeat;
}

body.pb-template-page-over-ons .vokk-about-hero::after{
    content: "";
    position: absolute;
    width: 540px;
    height: 380px;
    left: -160px;
    bottom: -180px;
    background: radial-gradient(circle, var(--vokk-glow), transparent 68%);
    pointer-events: none;
}

body.pb-template-page-over-ons .vokk-about-hero-content{
    position: relative;
    z-index: 2;
    max-width: 650px;
    padding: 145px 0 85px;
}

body.pb-template-page-over-ons .vokk-about-eyebrow{
    display: block;
    margin-bottom: 15px;
    color: var(--blue-light);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

body.pb-template-page-over-ons .vokk-about-hero h1{
    margin: 0 0 20px;
    color: color-mix(in srgb, #ffffff 88%, var(--vokk-primary-light));
    font-size: clamp(40px, 4.3vw, 60px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -2px;
}

body.pb-template-page-over-ons .vokk-about-hero p{
    max-width: 570px;
    margin: 0;
    color: rgba(255,255,255,.68);
    font-size: 15px;
    line-height: 1.75;
}

/* INTRO */
body.pb-template-page-over-ons .vokk-about-intro{
    padding: 76px 0 66px;
}

body.pb-template-page-over-ons .vokk-about-intro-grid{
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 80px;
    align-items: start;
}

body.pb-template-page-over-ons .vokk-about-small-title{
    display: block;
    margin-bottom: 12px;
    color: var(--blue);
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

body.pb-template-page-over-ons .vokk-about-intro h2{
    max-width: 520px;
    margin: 0;
    color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary));
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1.3px;
}

body.pb-template-page-over-ons .vokk-about-intro-text p{
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

body.pb-template-page-over-ons .vokk-about-intro-text p:last-child{
    margin-bottom: 0;
}

/* STORY */
body.pb-template-page-over-ons .vokk-about-story{
    padding: 20px 0 80px;
}

body.pb-template-page-over-ons .vokk-about-story-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 70px;
    align-items: center;
}

/* 2. STORY AFBEELDING (DYNAMISCH) */
body.pb-template-page-over-ons .vokk-about-story-image{
    min-height: 440px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(3,11,24,.02), rgba(3,11,24,.16)),
        var(--pb-img-about_story_img) center / cover no-repeat;
    box-shadow: 0 25px 55px rgba(15,23,42,.12);
}

body.pb-template-page-over-ons .vokk-about-story-content{
    max-width: 540px;
}

body.pb-template-page-over-ons .vokk-about-story-content h2{
    margin: 0 0 16px;
    color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary));
    font-size: clamp(28px, 3vw, 39px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1px;
}

body.pb-template-page-over-ons .vokk-about-story-content > p{
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

body.pb-template-page-over-ons .vokk-about-points{
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.pb-template-page-over-ons .vokk-about-points li{
    position: relative;
    padding-left: 25px;
    color: #344054;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
}

body.pb-template-page-over-ons .vokk-about-points li::before{
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--blue);
    font-weight: 700;
}

/* WAARDEN */
body.pb-template-page-over-ons .vokk-about-values{
    padding: 65px 0;
    background: var(--soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

body.pb-template-page-over-ons .vokk-about-values-head{
    max-width: 700px;
    margin: 0 auto 38px;
    text-align: center;
}

body.pb-template-page-over-ons .vokk-about-values-head h2{
    margin: 0 0 12px;
    color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary));
    font-size: clamp(29px, 3vw, 40px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1.2px;
}

body.pb-template-page-over-ons .vokk-about-values-head p{
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

body.pb-template-page-over-ons .vokk-about-values-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

body.pb-template-page-over-ons .vokk-about-value{
    padding: 30px 28px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(15,23,42,.04);
}

body.pb-template-page-over-ons .vokk-about-value-number{
    display: block;
    margin-bottom: 18px;
    color: var(--blue);
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
}

body.pb-template-page-over-ons .vokk-about-value h3{
    margin: 0 0 9px;
    color: color-mix(in srgb, #111827 90%, var(--vokk-primary));
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
}

body.pb-template-page-over-ons .vokk-about-value p{
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

/* EXPERIENCE */
body.pb-template-page-over-ons .vokk-about-experience{
    padding: 80px 0;
}

body.pb-template-page-over-ons .vokk-about-experience-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 70px;
    align-items: center;
}

body.pb-template-page-over-ons .vokk-about-experience-content{
    max-width: 550px;
}

body.pb-template-page-over-ons .vokk-about-experience-content h2{
    margin: 0 0 16px;
    color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary));
    font-size: clamp(28px, 3vw, 39px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1px;
}

body.pb-template-page-over-ons .vokk-about-experience-content p{
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

body.pb-template-page-over-ons .vokk-about-stats{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 26px;
}

body.pb-template-page-over-ons .vokk-about-stat{
    padding: 22px 20px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
}

body.pb-template-page-over-ons .vokk-about-stat strong{
    display: block;
    margin-bottom: 4px;
    color: var(--blue);
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
}

body.pb-template-page-over-ons .vokk-about-stat span{
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
    font-weight: 500;
}

/* 3. EXPERIENCE AFBEELDING (DYNAMISCH) */
body.pb-template-page-over-ons .vokk-about-experience-image{
    min-height: 430px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(3,11,24,.02), rgba(3,11,24,.16)),
        var(--pb-img-about_exp_img) center / cover no-repeat;
    box-shadow: 0 25px 55px rgba(15,23,42,.12);
}

/* CTA */
body.pb-template-page-over-ons .vokk-about-cta{
    padding: 0 0 80px;
}

body.pb-template-page-over-ons .vokk-about-cta-box{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 45px;
    align-items: center;
    padding: 48px 55px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 85% 0%, var(--vokk-glow), transparent 350px),
        linear-gradient(135deg, var(--vokk-dark), var(--vokk-darker));
    color: #ffffff;
}

body.pb-template-page-over-ons .vokk-about-cta-box h2{
    margin: 0 0 10px;
    color: #ffffff;
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1px;
}

body.pb-template-page-over-ons .vokk-about-cta-box p{
    max-width: 620px;
    margin: 0;
    color: rgba(255,255,255,.60);
    font-size: 13px;
    line-height: 1.7;
}

body.pb-template-page-over-ons .vokk-about-cta-button{
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 28px !important;
    background: linear-gradient(135deg, var(--vokk-btn-1) 0%, var(--vokk-btn-2) 100%) !important;
    color: #ffffff !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border-radius: 10px !important; 
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 25px color-mix(in srgb, var(--vokk-primary) 35%, transparent) !important;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
    margin-top: 15px !important;
}

body.pb-template-page-over-ons .vokk-about-cta-button:hover{
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 35px color-mix(in srgb, var(--vokk-primary) 50%, transparent) !important;
    color: #ffffff !important;
}

body.pb-template-page-over-ons .vokk-about-cta-button span{
    color: #ffffff !important;
    font-weight: 900 !important;
    margin-left: 2px !important;
    font-size: 15px !important;
}

@media screen and (max-width: 1024px){
    body.pb-template-page-over-ons .vokk-about-hero{ min-height: 440px; }
    body.pb-template-page-over-ons .vokk-about-hero-content{ padding: 110px 0 70px; }
    body.pb-template-page-over-ons .vokk-about-intro-grid,
body.pb-template-page-over-ons .vokk-about-story-grid,
body.pb-template-page-over-ons .vokk-about-experience-grid{ gap: 45px; }
    body.pb-template-page-over-ons .vokk-about-story-image,
body.pb-template-page-over-ons .vokk-about-experience-image{ min-height: 350px; }
}

@media screen and (max-width: 780px){
    body.pb-template-page-over-ons .vokk-about-container{ padding: 0 20px; }
    body.pb-template-page-over-ons .vokk-about-hero{
        min-height: auto;
        background:
            linear-gradient(180deg, rgba(2,8,18,.84) 0%, rgba(2,8,18,.96) 100%),
            var(--pb-img-about_hero_img) center / cover no-repeat;
    }
    body.pb-template-page-over-ons .vokk-about-hero-content{ padding: 80px 0 70px; }
    body.pb-template-page-over-ons .vokk-about-intro-grid,
body.pb-template-page-over-ons .vokk-about-story-grid,
body.pb-template-page-over-ons .vokk-about-experience-grid{ grid-template-columns: 1fr; gap: 35px; }
    body.pb-template-page-over-ons .vokk-about-story-image{ order: 1; }
    body.pb-template-page-over-ons .vokk-about-story-content{ order: 2; }
    body.pb-template-page-over-ons .vokk-about-values-grid{ grid-template-columns: 1fr 1fr; }
    body.pb-template-page-over-ons .vokk-about-experience-image{ order: 1; }
    body.pb-template-page-over-ons .vokk-about-experience-content{ order: 2; }
    body.pb-template-page-over-ons .vokk-about-cta-box{ grid-template-columns: 1fr; gap: 25px; }
    body.pb-template-page-over-ons .vokk-about-cta-button{ justify-self: start; }
}

@media screen and (max-width: 560px){
    body.pb-template-page-over-ons .vokk-about-container{ padding: 0 16px; }
    body.pb-template-page-over-ons .vokk-about-hero-content{ padding: 65px 0 55px; }
    body.pb-template-page-over-ons .vokk-about-hero h1{ font-size: 36px; letter-spacing: -1.4px; }
    body.pb-template-page-over-ons .vokk-about-hero p{ font-size: 13px; }
    body.pb-template-page-over-ons .vokk-about-intro{ padding: 52px 0 45px; }
    body.pb-template-page-over-ons .vokk-about-intro h2{ font-size: 29px; }
    body.pb-template-page-over-ons .vokk-about-story{ padding-bottom: 60px; }
    body.pb-template-page-over-ons .vokk-about-story-image,
body.pb-template-page-over-ons .vokk-about-experience-image{ min-height: 270px; border-radius: 12px; }
    body.pb-template-page-over-ons .vokk-about-values{ padding: 50px 0; }
    body.pb-template-page-over-ons .vokk-about-values-grid{ grid-template-columns: 1fr; }
    body.pb-template-page-over-ons .vokk-about-value{ padding: 25px 22px; }
    body.pb-template-page-over-ons .vokk-about-experience{ padding: 60px 0; }
    body.pb-template-page-over-ons .vokk-about-stats{ grid-template-columns: 1fr; }
    body.pb-template-page-over-ons .vokk-about-cta{ padding-bottom: 55px; }
    body.pb-template-page-over-ons .vokk-about-cta-box{ padding: 32px 25px; border-radius: 14px; }
    body.pb-template-page-over-ons .vokk-about-cta-button{ width: 100%; }
}

/* =========================================================
   page-projecten.php
========================================================= */

body.pb-template-page-projecten .vokk-projects-page{
    --vokk-primary: var(--pb-primary);
    --vokk-primary-light: var(--pb-primary-light);
    --vokk-dark: var(--pb-dark);
    --vokk-darker: var(--pb-darker);
    --vokk-glow: var(--pb-glow);
    --vokk-btn-1: var(--pb-btn-1);
    --vokk-btn-2: var(--pb-btn-2);

    --blue: var(--vokk-primary);
    --blue-light: var(--vokk-primary-light);
    --navy: var(--vokk-dark);
    --navy-dark: var(--vokk-darker);
    --text: #0f172a;
    --muted: #667085;
    --soft: #f7f9fc;
    --border: #e6ebf2;

    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    color: var(--text);
    background: #ffffff;
    box-sizing: border-box;
}

body.pb-template-page-projecten .vokk-projects-page *{ box-sizing: border-box; }
body.pb-template-page-projecten .vokk-projects-container{ width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; }

/* HERO (DYNAMISCHE ACHTERGROND) */
body.pb-template-page-projecten .vokk-projects-hero{
    position: relative; min-height: 500px; display: flex; align-items: center; overflow: hidden;
    background: linear-gradient(90deg, rgba(2,8,18,.98) 0%, rgba(2,8,18,.92) 40%, rgba(2,8,18,.58) 68%, rgba(2,8,18,.18) 100%), var(--pb-img-projects_hero_img) center right / cover no-repeat;
}
body.pb-template-page-projecten .vokk-projects-hero::after{
    content: ""; position: absolute; width: 540px; height: 380px; left: -150px; bottom: -180px;
    background: radial-gradient(circle, var(--vokk-glow), transparent 68%); pointer-events: none;
}
body.pb-template-page-projecten .vokk-projects-hero-content{ position: relative; z-index: 2; max-width: 660px; padding: 145px 0 85px; }
body.pb-template-page-projecten .vokk-projects-eyebrow{ display: block; margin-bottom: 15px; color: var(--blue-light); font-size: 11px; line-height: 1.2; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
body.pb-template-page-projecten .vokk-projects-hero h1{ margin: 0 0 20px; color: color-mix(in srgb, #ffffff 88%, var(--vokk-primary-light)); font-size: clamp(40px, 4.3vw, 60px); line-height: 1.05; font-weight: 700; letter-spacing: -2px; }
body.pb-template-page-projecten .vokk-projects-hero p{ max-width: 570px; margin: 0; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.75; }

/* INTRO */
body.pb-template-page-projecten .vokk-projects-intro{ padding: 74px 0 55px; text-align: center; }
body.pb-template-page-projecten .vokk-projects-intro-inner{ max-width: 790px; margin: 0 auto; }
body.pb-template-page-projecten .vokk-projects-small-title{ display: block; margin-bottom: 12px; color: var(--blue); font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
body.pb-template-page-projecten .vokk-projects-intro h2{ margin: 0 0 15px; color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary)); font-size: clamp(30px, 3vw, 42px); line-height: 1.15; font-weight: 700; letter-spacing: -1.3px; }
body.pb-template-page-projecten .vokk-projects-intro p{ max-width: 680px; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.75; }

/* PROJECT GRID */
body.pb-template-page-projecten .vokk-projects-showcase{ padding: 10px 0 80px; }
body.pb-template-page-projecten .vokk-projects-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
body.pb-template-page-projecten .vokk-project-card{ position: relative; overflow: hidden; background: #ffffff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 45px rgba(15,23,42,.07); transition: transform .25s ease, box-shadow .25s ease; }
body.pb-template-page-projecten .vokk-project-card:hover{ transform: translateY(-4px); box-shadow: 0 25px 55px rgba(15,23,42,.12); }
body.pb-template-page-projecten .vokk-project-image{ position: relative; min-height: 365px; overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; }
body.pb-template-page-projecten .vokk-project-image::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(3,11,24,.20) 100%); pointer-events: none; }
body.pb-template-page-projecten .vokk-project-type{ position: absolute; top: 20px; left: 20px; z-index: 2; display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; color: #ffffff; background: rgba(3,11,24,.78); border: 1px solid rgba(255,255,255,.10); border-radius: 8px; font-size: 9px; line-height: 1; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; }
body.pb-template-page-projecten .vokk-project-content{ padding: 27px 28px 30px; }
body.pb-template-page-projecten .vokk-project-meta{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--blue); font-size: 9px; line-height: 1; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
body.pb-template-page-projecten .vokk-project-meta span + span::before{ content: "•"; margin-right: 10px; color: #c7ced8; }
body.pb-template-page-projecten .vokk-project-content h2{ margin: 0 0 10px; color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary)); font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -.5px; }
body.pb-template-page-projecten .vokk-project-content p{ margin: 0 0 18px; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
body.pb-template-page-projecten .vokk-project-link{ display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 12px; line-height: 1; font-weight: 600; text-decoration: none; transition: gap .2s ease, color .2s ease; }
body.pb-template-page-projecten .vokk-project-link:hover{ gap: 12px; color: var(--vokk-primary-light); }

/* UITGELICHT PROJECT (DYNAMISCHE FOTO) */
body.pb-template-page-projecten .vokk-project-featured{ padding: 70px 0; background: var(--soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
body.pb-template-page-projecten .vokk-project-featured-grid{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 70px; align-items: center; }
body.pb-template-page-projecten .vokk-project-featured-image{
    min-height: 470px;
    border-radius: 16px;

    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;

    box-shadow: 0 25px 55px rgba(15,23,42,.10);
}
body.pb-template-page-projecten .vokk-project-featured-content{ max-width: 500px; }
body.pb-template-page-projecten .vokk-project-featured-content h2{ margin: 0 0 15px; color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary)); font-size: clamp(29px, 3vw, 40px); line-height: 1.15; font-weight: 700; letter-spacing: -1.1px; }
body.pb-template-page-projecten .vokk-project-featured-content p{ margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.8; }
body.pb-template-page-projecten .vokk-project-details{ display: grid; grid-template-columns: 1fr 1fr; gap: 17px 28px; margin: 0 0 26px; }
body.pb-template-page-projecten .vokk-project-detail{ padding-top: 13px; border-top: 1px solid var(--border); }
body.pb-template-page-projecten .vokk-project-detail small{ display: block; margin-bottom: 4px; color: #98a2b3; font-size: 8px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; }
body.pb-template-page-projecten .vokk-project-detail strong{ color: #344054; font-size: 12px; font-weight: 600; }

/* RESULTATEN */
body.pb-template-page-projecten .vokk-project-results{ padding: 65px 0; }
body.pb-template-page-projecten .vokk-project-results-head{ max-width: 720px; margin: 0 auto 40px; text-align: center; }
body.pb-template-page-projecten .vokk-project-results-head h2{ margin: 0 0 12px; color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary)); font-size: clamp(29px, 3vw, 40px); font-weight: 700; }
body.pb-template-page-projecten .vokk-project-results-head p{ margin: 0; color: var(--muted); font-size: 13px; }
body.pb-template-page-projecten .vokk-project-results-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
body.pb-template-page-projecten .vokk-project-result{ padding: 10px 28px; text-align: center; }
body.pb-template-page-projecten .vokk-project-result + .vokk-project-result{ border-left: 1px solid var(--border); }
body.pb-template-page-projecten .vokk-project-result strong{ display: block; margin-bottom: 8px; color: var(--blue); font-size: 28px; font-weight: 700; }
body.pb-template-page-projecten .vokk-project-result span{ color: var(--muted); font-size: 11px; font-weight: 500; }

/* CTA */
body.pb-template-page-projecten .vokk-projects-cta{ padding: 15px 0 80px; }
body.pb-template-page-projecten .vokk-projects-cta-box{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 45px; align-items: center; padding: 48px 55px; border-radius: 18px; background: radial-gradient(circle at 85% 0%, var(--vokk-glow), transparent 350px), linear-gradient(135deg, var(--vokk-dark), var(--vokk-darker)); color: #ffffff; }
body.pb-template-page-projecten .vokk-projects-cta-box h2{ margin: 0 0 10px; color: #ffffff; font-size: clamp(27px, 3vw, 38px); font-weight: 700; }
body.pb-template-page-projecten .vokk-projects-cta-box p{ max-width: 620px; margin: 0; color: rgba(255,255,255,.60); font-size: 13px; }
body.pb-template-page-projecten .vokk-projects-cta-button{ min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 0 28px !important; background: linear-gradient(135deg, var(--vokk-btn-1) 0%, var(--vokk-btn-2) 100%) !important; color: #ffffff !important; font-family: "Poppins", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; border-radius: 10px !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: 0 8px 25px color-mix(in srgb, var(--vokk-primary) 35%, transparent) !important; }
body.pb-template-page-projecten .vokk-projects-cta-button:hover{ transform: translateY(-3px) !important; color: #ffffff !important; }

@media screen and (max-width: 780px){
    body.pb-template-page-projecten .vokk-projects-grid{ grid-template-columns: 1fr; }
    body.pb-template-page-projecten .vokk-project-featured-grid{ grid-template-columns: 1fr; gap: 35px; }
    body.pb-template-page-projecten .vokk-project-results-grid{ grid-template-columns: 1fr 1fr; row-gap: 36px; }
    body.pb-template-page-projecten .vokk-project-result:nth-child(3){ border-left: 0; }
    body.pb-template-page-projecten .vokk-projects-cta-box{ grid-template-columns: 1fr; gap: 25px; }
    body.pb-template-page-projecten .vokk-projects-cta-button{ justify-self: start; }
}

/* =========================================================
   page-waardering.php
========================================================= */

body.pb-template-page-waardering .vokk-reviews-page{
    --vokk-primary: var(--pb-primary);
    --vokk-primary-light: var(--pb-primary-light);
    --vokk-dark: var(--pb-dark);
    --vokk-darker: var(--pb-darker);
    --vokk-glow: var(--pb-glow);
    --vokk-btn-1: var(--pb-btn-1);
    --vokk-btn-2: var(--pb-btn-2);
    --blue: var(--vokk-primary);
    --blue-light: var(--vokk-primary-light);
    --navy: var(--vokk-dark);
    --navy-dark: var(--vokk-darker);
    --text: #0f172a;
    --muted: #667085;
    --soft: #f7f9fc;
    --border: #e6ebf2;
    --star: #f5b400;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    color: var(--text);
    background: #ffffff;
    box-sizing: border-box;
}

body.pb-template-page-waardering .vokk-reviews-page *{ box-sizing: border-box; }
body.pb-template-page-waardering .vokk-reviews-container{ width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; }

/* HERO */
body.pb-template-page-waardering .vokk-reviews-hero{
    position: relative; min-height: 480px; display: flex; align-items: center; overflow: hidden;
    background: linear-gradient(90deg, rgba(2,8,18,.98) 0%, rgba(2,8,18,.92) 40%, rgba(2,8,18,.58) 68%, rgba(2,8,18,.18) 100%), var(--pb-img-reviews_hero_img) center right / cover no-repeat;
}
	
body.pb-template-page-waardering .vokk-reviews-hero::after{
    content: ""; position: absolute; width: 520px; height: 360px; left: -150px; bottom: -180px;
    background: radial-gradient(circle, var(--vokk-glow), transparent 68%); pointer-events: none;
}
body.pb-template-page-waardering .vokk-reviews-hero-content{ position: relative; z-index: 2; max-width: 650px; padding: 140px 0 80px; }
body.pb-template-page-waardering .vokk-reviews-eyebrow{ display: block; margin-bottom: 15px; color: var(--blue-light); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
body.pb-template-page-waardering .vokk-reviews-hero h1{ margin: 0 0 20px; color: color-mix(in srgb, #ffffff 88%, var(--vokk-primary-light)); font-size: clamp(40px, 4.3vw, 60px); line-height: 1.05; font-weight: 700; letter-spacing: -2px; }
body.pb-template-page-waardering .vokk-reviews-hero p{ max-width: 570px; margin: 0; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.75; }

/* SUMMARY */
body.pb-template-page-waardering .vokk-reviews-summary{ padding: 68px 0 55px; }
body.pb-template-page-waardering .vokk-reviews-summary-grid{ display: grid; grid-template-columns: .72fr 1.28fr; gap: 80px; align-items: center; }
body.pb-template-page-waardering .vokk-reviews-score{ text-align: center; padding: 34px 30px; background: var(--soft); border: 1px solid var(--border); border-radius: 16px; }
body.pb-template-page-waardering .vokk-reviews-score-number{ display: block; margin-bottom: 8px; color: var(--text); font-size: 54px; line-height: 1; font-weight: 700; letter-spacing: -2px; }
body.pb-template-page-waardering .vokk-reviews-stars{ display: flex; justify-content: center; gap: 4px; margin-bottom: 10px; color: var(--star); font-size: 19px; line-height: 1; }
body.pb-template-page-waardering .vokk-reviews-score p{ margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
body.pb-template-page-waardering .vokk-reviews-summary-copy{ max-width: 680px; }
body.pb-template-page-waardering .vokk-reviews-small-title{ display: block; margin-bottom: 12px; color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
body.pb-template-page-waardering .vokk-reviews-summary-copy h2{ margin: 0 0 15px; color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary)); font-size: clamp(30px, 3vw, 42px); line-height: 1.15; font-weight: 700; letter-spacing: -1.3px; }
body.pb-template-page-waardering .vokk-reviews-summary-copy p{ margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }

/* REVIEWS GRID */
body.pb-template-page-waardering .vokk-reviews-list{ padding: 15px 0 80px; }
body.pb-template-page-waardering .vokk-reviews-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
body.pb-template-page-waardering .vokk-reviews-empty{ grid-column: 1 / -1; margin: 0; padding: 32px; color: var(--muted); text-align: center; background: var(--soft); border: 1px solid var(--border); border-radius: 15px; }

body.pb-template-page-waardering .vokk-review-card{
    display: flex; flex-direction: column; min-height: 100%; padding: 28px 27px;
    background: #ffffff; border: 1px solid var(--border); border-radius: 15px;
    box-shadow: 0 14px 34px rgba(15,23,42,.05); transition: transform .22s ease, box-shadow .22s ease;
}
body.pb-template-page-waardering .vokk-review-card:hover{ transform: translateY(-3px); box-shadow: 0 20px 46px rgba(15,23,42,.09); }
body.pb-template-page-waardering .vokk-review-card-stars{ display: flex; gap: 3px; margin-bottom: 14px; color: var(--star); font-size: 15px; line-height: 1; }
body.pb-template-page-waardering .vokk-review-card-title{ margin: 0 0 8px; color: var(--text); font-size: 15px; font-weight: 700; }
body.pb-template-page-waardering .vokk-review-card-text{ flex: 1 1 auto; margin: 0 0 24px; color: #475467; font-size: 13px; line-height: 1.8; }
body.pb-template-page-waardering .vokk-review-card-footer{ display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border); }
body.pb-template-page-waardering .vokk-review-avatar{
    width: 42px; height: 42px; flex: 0 0 42px; display: flex; align-items: center; justify-content: center;
    color: #ffffff; background: linear-gradient(135deg, var(--vokk-btn-1), var(--vokk-btn-2)); border-radius: 50%; font-size: 12px; font-weight: 700;
}
body.pb-template-page-waardering .vokk-review-person{ min-width: 0; }
body.pb-template-page-waardering .vokk-review-person strong{ display: block; margin-bottom: 2px; color: var(--text); font-size: 12px; font-weight: 700; }
body.pb-template-page-waardering .vokk-review-date{ margin-left: auto; color: #b0b7c3; font-size: 11px; white-space: nowrap; }

/* TRUST STRIP */
body.pb-template-page-waardering .vokk-reviews-trust{ padding: 58px 0; background: var(--soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
body.pb-template-page-waardering .vokk-reviews-trust-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
body.pb-template-page-waardering .vokk-reviews-trust-item{ padding: 5px 28px; text-align: center; }
body.pb-template-page-waardering .vokk-reviews-trust-item + .vokk-reviews-trust-item{ border-left: 1px solid #dde3eb; }
body.pb-template-page-waardering .vokk-reviews-trust-item strong{ display: block; margin-bottom: 7px; color: var(--blue); font-size: 24px; line-height: 1; font-weight: 700; }
body.pb-template-page-waardering .vokk-reviews-trust-item span{ color: var(--muted); font-size: 11px; line-height: 1.5; font-weight: 500; }

/* WORDPRESS READY & CTA */
body.pb-template-page-waardering .vokk-reviews-wordpress-ready{ padding: 68px 0; }
body.pb-template-page-waardering .vokk-reviews-wordpress-box{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; padding: 42px 46px; background: #ffffff; border: 1px solid var(--border); border-radius: 16px; }
body.pb-template-page-waardering .vokk-reviews-wordpress-box h2{ margin: 0 0 12px; color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary)); font-size: clamp(26px, 2.5vw, 34px); font-weight: 700; }
body.pb-template-page-waardering .vokk-reviews-wordpress-box p{ margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
body.pb-template-page-waardering .vokk-reviews-wordpress-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
body.pb-template-page-waardering .vokk-reviews-wordpress-item{ position: relative; padding-left: 25px; color: #344054; font-size: 12px; font-weight: 500; }
body.pb-template-page-waardering .vokk-reviews-wordpress-item::before{ content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }

body.pb-template-page-waardering .vokk-reviews-cta{ padding: 0 0 80px; }
body.pb-template-page-waardering .vokk-reviews-cta-box{ display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 45px; align-items: center; padding: 48px 55px; border-radius: 18px; background: radial-gradient(circle at 85% 0%, var(--vokk-glow), transparent 350px), linear-gradient(135deg, var(--vokk-dark), var(--vokk-darker)); color: #ffffff; }
body.pb-template-page-waardering .vokk-reviews-cta-box h2{ margin: 0 0 10px; color: #ffffff; font-size: clamp(27px, 3vw, 38px); font-weight: 700; }
body.pb-template-page-waardering .vokk-reviews-cta-box h2 span{ color: var(--blue-light); }
body.pb-template-page-waardering .vokk-reviews-cta-box p{ max-width: 620px; margin: 0; color: rgba(255,255,255,.60); font-size: 13px; line-height: 1.7; }
body.pb-template-page-waardering .vokk-reviews-cta-button{ min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 0 28px !important; background: linear-gradient(135deg, var(--vokk-btn-1) 0%, var(--vokk-btn-2) 100%) !important; color: #ffffff !important; font-family: "Poppins", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; border-radius: 10px !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: 0 8px 25px color-mix(in srgb, var(--vokk-primary) 35%, transparent) !important; }
body.pb-template-page-waardering .vokk-reviews-cta-button:hover{ transform: translateY(-3px) !important; color: #ffffff !important; }

@media screen and (max-width: 1024px){
    body.pb-template-page-waardering .vokk-reviews-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.pb-template-page-waardering .vokk-reviews-wordpress-box{ gap: 40px; }
}
@media screen and (max-width: 780px){
    body.pb-template-page-waardering .vokk-reviews-container{ padding: 0 20px; }
    body.pb-template-page-waardering .vokk-reviews-summary-grid{ grid-template-columns: 1fr; gap: 30px; }
    body.pb-template-page-waardering .vokk-reviews-trust-grid{ grid-template-columns: 1fr 1fr; row-gap: 34px; }
    body.pb-template-page-waardering .vokk-reviews-wordpress-box,
body.pb-template-page-waardering .vokk-reviews-cta-box{ grid-template-columns: 1fr; }
}
@media screen and (max-width: 560px){
    body.pb-template-page-waardering .vokk-reviews-grid{ grid-template-columns: 1fr; }
    body.pb-template-page-waardering .vokk-reviews-trust-grid{ grid-template-columns: 1fr; }
    body.pb-template-page-waardering .vokk-reviews-trust-item + .vokk-reviews-trust-item{ border-left: 0; border-top: 1px solid #dde3eb; }
}

/* =========================================================
   page-contact.php
========================================================= */

/* =========================================================
   DYNAMISCHE SFEER VARIABELEN (CONSISTENT MET REST)
========================================================= */
body.pb-template-page-contact .vokk-contact-page{
    --vokk-primary: var(--pb-primary);
    --vokk-primary-light: var(--pb-primary-light);
    --vokk-dark: var(--pb-dark);
    --vokk-darker: var(--pb-darker);
    --vokk-glow: var(--pb-glow);
    --vokk-btn-1: var(--pb-btn-1);
    --vokk-btn-2: var(--pb-btn-2);

    --blue: var(--vokk-primary);
    --blue-light: var(--vokk-primary-light);
    --navy: var(--vokk-dark);
    --navy-dark: var(--vokk-darker);
    --text: #0f172a;
    --muted: #667085;
    --soft: #f7f9fc;
    --border: #e6ebf2;

    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    color: var(--text);
    background: #ffffff;
    box-sizing: border-box;
}

body.pb-template-page-contact .vokk-contact-page *{
    box-sizing: border-box;
}

body.pb-template-page-contact .vokk-contact-container{
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}


/* HERO */
body.pb-template-page-contact .vokk-contact-hero{
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(2,8,18,.98) 0%,
            rgba(2,8,18,.92) 40%,
            rgba(2,8,18,.58) 68%,
            rgba(2,8,18,.18) 100%
        ),
        var(--pb-img-contact_hero_img)
        center right / cover no-repeat;
}

body.pb-template-page-contact .vokk-contact-hero::after{
    content: "";
    position: absolute;
    width: 520px;
    height: 360px;
    left: -150px;
    bottom: -180px;
    background:
        radial-gradient(
            circle,
            var(--vokk-glow),
            transparent 68%
        );
    pointer-events: none;
}

body.pb-template-page-contact .vokk-contact-hero-content{
    position: relative;
    z-index: 2;
    max-width: 650px;
    padding: 140px 0 80px;
}

body.pb-template-page-contact .vokk-contact-eyebrow{
    display: block;
    margin-bottom: 15px;
    color: var(--blue-light);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

body.pb-template-page-contact .vokk-contact-hero h1{
    margin: 0 0 20px;
    color: color-mix(in srgb, #ffffff 88%, var(--vokk-primary-light));
    font-size: clamp(40px, 4.3vw, 60px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -2px;
}

body.pb-template-page-contact .vokk-contact-hero h1 span{
    color: var(--blue-light);
}

body.pb-template-page-contact .vokk-contact-hero p{
    max-width: 570px;
    margin: 0;
    color: rgba(255,255,255,.68);
    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   CONTACT MAIN
========================================================= */

body.pb-template-page-contact .vokk-contact-main{
    padding: 80px 0;
}

body.pb-template-page-contact .vokk-contact-main-grid{
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(55px, 7vw, 100px);
    align-items: start;
}


/* =========================================================
   CONTACT INFO
========================================================= */

body.pb-template-page-contact .vokk-contact-info{
    max-width: 470px;
}

body.pb-template-page-contact .vokk-contact-small-title{
    display: block;
    margin-bottom: 12px;
    color: var(--blue);
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

body.pb-template-page-contact .vokk-contact-info h2{
    margin: 0 0 16px;
    color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary));
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1.3px;
}

body.pb-template-page-contact .vokk-contact-info > p{
    margin: 0 0 32px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   CONTACT DETAILS
========================================================= */

body.pb-template-page-contact .vokk-contact-details{
    display: flex;
    flex-direction: column;
    gap: 22px;
}

body.pb-template-page-contact .vokk-contact-detail{
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 15px;
    align-items: center;
}

body.pb-template-page-contact .vokk-contact-detail-icon{
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    background: color-mix(in srgb, var(--vokk-primary) 8%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--vokk-primary) 20%, transparent);
    border-radius: 11px;
}

body.pb-template-page-contact .vokk-contact-detail-icon svg{
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.pb-template-page-contact .vokk-contact-detail-body small{
    display: block;
    margin-bottom: 3px;
    color: #98a2b3;
    font-size: 8px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
}

body.pb-template-page-contact .vokk-contact-detail-body a,
body.pb-template-page-contact .vokk-contact-detail-body span{
    color: #344054;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    text-decoration: none;
}

body.pb-template-page-contact .vokk-contact-detail-body a:hover{
    color: var(--blue);
}


/* =========================================================
   OPENINGSTIJDEN
========================================================= */

body.pb-template-page-contact .vokk-contact-hours{
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

body.pb-template-page-contact .vokk-contact-hours h3{
    margin: 0 0 15px;
    color: var(--text);
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
}

body.pb-template-page-contact .vokk-contact-hours-row{
    display: flex;
    justify-content: space-between;
    gap: 25px;
    padding: 7px 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

body.pb-template-page-contact .vokk-contact-hours-row strong{
    color: #344054;
    font-weight: 600;
}


/* =========================================================
   FORM PANEL & WORDPRESS FORM COMPATIBILITY
========================================================= */

body.pb-template-page-contact .vokk-contact-form-panel{
    padding: 38px 40px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 20px 55px rgba(15,23,42,.08);
}

body.pb-template-page-contact .vokk-contact-form-head{
    margin-bottom: 28px;
}

body.pb-template-page-contact .vokk-contact-form-head h2{
    margin: 0 0 8px;
    color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary));
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.7px;
}

body.pb-template-page-contact .vokk-contact-form-head p{
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

body.pb-template-page-contact .vokk-contact-form-slot{
    width: 100%;
}

body.pb-template-page-contact .vokk-contact-form-slot input[type="text"],
body.pb-template-page-contact .vokk-contact-form-slot input[type="email"],
body.pb-template-page-contact .vokk-contact-form-slot input[type="tel"],
body.pb-template-page-contact .vokk-contact-form-slot input[type="url"],
body.pb-template-page-contact .vokk-contact-form-slot select,
body.pb-template-page-contact .vokk-contact-form-slot textarea{
    width: 100% !important;
    margin: 0 0 15px 0 !important;
    padding: 0 14px !important;
    color: var(--text) !important;
    background: #ffffff !important;
    border: 1px solid #d9e0e9 !important;
    border-radius: 9px !important;
    outline: 0 !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 13px !important;
}

body.pb-template-page-contact .vokk-contact-form-slot input[type="text"],
body.pb-template-page-contact .vokk-contact-form-slot input[type="email"],
body.pb-template-page-contact .vokk-contact-form-slot input[type="tel"],
body.pb-template-page-contact .vokk-contact-form-slot select{
    height: 48px !important;
}

body.pb-template-page-contact .vokk-contact-form-slot textarea{
    min-height: 140px !important;
    padding-top: 13px !important;
}

body.pb-template-page-contact .vokk-contact-form-slot input[type="submit"]{
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 28px !important;
    background: linear-gradient(135deg, var(--vokk-btn-1) 0%, var(--vokk-btn-2) 100%) !important;
    color: #ffffff !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 25px color-mix(in srgb, var(--vokk-primary) 35%, transparent) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}

body.pb-template-page-contact .vokk-contact-form-slot input[type="submit"]:hover{
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 35px color-mix(in srgb, var(--vokk-primary) 50%, transparent) !important;
}


/* =========================================================
   SERVICE BLOK
========================================================= */

body.pb-template-page-contact .vokk-contact-reassurance{
    padding: 60px 0;
    background: var(--soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

body.pb-template-page-contact .vokk-contact-reassurance-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

body.pb-template-page-contact .vokk-contact-reassurance-item{
    padding: 4px 35px;
    text-align: center;
}

body.pb-template-page-contact .vokk-contact-reassurance-item + .vokk-contact-reassurance-item{
    border-left: 1px solid #dde3eb;
}

body.pb-template-page-contact .vokk-contact-reassurance-icon{
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 13px;
    color: var(--blue);
    background: color-mix(in srgb, var(--vokk-primary) 8%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--vokk-primary) 20%, transparent);
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
}

body.pb-template-page-contact .vokk-contact-reassurance-item h3{
    margin: 0 0 6px;
    color: color-mix(in srgb, #111827 90%, var(--vokk-primary));
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
}

body.pb-template-page-contact .vokk-contact-reassurance-item p{
    max-width: 280px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}


/* =========================================================
   FAQ / EXTRA INFO
========================================================= */

body.pb-template-page-contact .vokk-contact-extra{
    padding: 72px 0 80px;
}

body.pb-template-page-contact .vokk-contact-extra-grid{
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
    align-items: start;
}

body.pb-template-page-contact .vokk-contact-extra-copy h2{
    margin: 0 0 14px;
    color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary));
    font-size: clamp(28px, 3vw, 39px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1px;
}

body.pb-template-page-contact .vokk-contact-extra-copy p{
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.75;
}

body.pb-template-page-contact .vokk-contact-faq{
    display: flex;
    flex-direction: column;
}

body.pb-template-page-contact .vokk-contact-faq-item{
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}

body.pb-template-page-contact .vokk-contact-faq-item:first-child{
    border-top: 1px solid var(--border);
}

body.pb-template-page-contact .vokk-contact-faq-item h3{
    margin: 0 0 7px;
    color: #344054;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}

body.pb-template-page-contact .vokk-contact-faq-item p{
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.7;
}


/* =========================================================
   RESPONSIVE MEDIA QUERIES
========================================================= */

@media screen and (max-width: 1024px){
    body.pb-template-page-contact .vokk-contact-hero{ min-height: 430px; }
    body.pb-template-page-contact .vokk-contact-hero-content{ padding: 110px 0 70px; }
    body.pb-template-page-contact .vokk-contact-main-grid{ gap: 50px; }
    body.pb-template-page-contact .vokk-contact-form-panel{ padding: 34px 32px; }
}

@media screen and (max-width: 780px){
    body.pb-template-page-contact .vokk-contact-container{ padding: 0 20px; }
    body.pb-template-page-contact .vokk-contact-hero{
        min-height: auto;
        background:
            linear-gradient(180deg, rgba(2,8,18,.84) 0%, rgba(2,8,18,.96) 100%),
            url('admin/kavion-builder/images/vokk/hero.png') center / cover no-repeat;
    }
    body.pb-template-page-contact .vokk-contact-hero-content{ padding: 80px 0 70px; }
    body.pb-template-page-contact .vokk-contact-main{ padding: 60px 0; }
    body.pb-template-page-contact .vokk-contact-main-grid{ grid-template-columns: 1fr; gap: 45px; }
    body.pb-template-page-contact .vokk-contact-info{ max-width: 650px; }
    body.pb-template-page-contact .vokk-contact-reassurance-grid{ grid-template-columns: 1fr; }
    body.pb-template-page-contact .vokk-contact-reassurance-item{ padding: 24px 10px; }
    body.pb-template-page-contact .vokk-contact-reassurance-item + .vokk-contact-reassurance-item{ border-left: 0; border-top: 1px solid #dde3eb; }
    body.pb-template-page-contact .vokk-contact-extra-grid{ grid-template-columns: 1fr; gap: 35px; }
}

@media screen and (max-width: 560px){
    body.pb-template-page-contact .vokk-contact-container{ padding: 0 16px; }
    body.pb-template-page-contact .vokk-contact-hero-content{ padding: 65px 0 55px; }
    body.pb-template-page-contact .vokk-contact-hero h1{ font-size: 36px; letter-spacing: -1.4px; }
    body.pb-template-page-contact .vokk-contact-hero p{ font-size: 13px; }
    body.pb-template-page-contact .vokk-contact-main{ padding: 50px 0; }
    body.pb-template-page-contact .vokk-contact-info h2{ font-size: 29px; }
    body.pb-template-page-contact .vokk-contact-form-panel{ padding: 28px 22px; border-radius: 14px; }
    body.pb-template-page-contact .vokk-contact-form-head h2{ font-size: 23px; }
    body.pb-template-page-contact .vokk-contact-reassurance{ padding: 42px 0; }
    body.pb-template-page-contact .vokk-contact-extra{ padding: 55px 0; }
}

/* =========================================================
   page-warmtepompen.php
========================================================= */

body.pb-template-page-warmtepompen .vokk-detail-page{
    --vokk-primary: var(--pb-primary);
    --vokk-primary-light: var(--pb-primary-light);
    --vokk-dark: var(--pb-dark);
    --vokk-darker: var(--pb-darker);
    --vokk-glow: var(--pb-glow);
    --vokk-btn-1: var(--pb-btn-1);
    --vokk-btn-2: var(--pb-btn-2);

    --blue: var(--vokk-primary);
    --blue-light: var(--vokk-primary-light);
    --navy: var(--vokk-dark);
    --navy-dark: var(--vokk-darker);
    --text: #0f172a;
    --muted: #667085;
    --soft: #f7f9fc;
    --border: #e6ebf2;

    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    color: var(--text);
    background: #ffffff;
    box-sizing: border-box;
}

body.pb-template-page-warmtepompen .vokk-detail-page *{ box-sizing: border-box; }
body.pb-template-page-warmtepompen .vokk-detail-container{ width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; }

/* HERO */
/* HERO */
body.pb-template-page-warmtepompen .vokk-detail-hero{
    position: relative; min-height: 500px; display: flex; align-items: center; overflow: hidden;
    background: linear-gradient(90deg, rgba(2,8,18,.98) 0%, rgba(2,8,18,.92) 40%, rgba(2,8,18,.58) 68%, rgba(2,8,18,.18) 100%), var(--pb-img-heat_hero_img) center right / cover no-repeat;
}
	
body.pb-template-page-warmtepompen .vokk-detail-hero::after{
    content: ""; position: absolute; width: 540px; height: 380px; left: -160px; bottom: -190px;
    background: radial-gradient(circle, var(--vokk-glow), transparent 68%); pointer-events: none;
}
body.pb-template-page-warmtepompen .vokk-detail-hero-content{ position: relative; z-index: 2; max-width: 680px; padding: 145px 0 85px; }
body.pb-template-page-warmtepompen .vokk-detail-eyebrow{ display: block; margin-bottom: 15px; color: var(--blue-light); font-size: 11px; line-height: 1.2; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
body.pb-template-page-warmtepompen .vokk-detail-hero h1{ max-width: 650px; margin: 0 0 20px; color: color-mix(in srgb, #ffffff 88%, var(--vokk-primary-light)); font-size: clamp(40px, 4.3vw, 60px); line-height: 1.05; font-weight: 700; letter-spacing: -2px; }
body.pb-template-page-warmtepompen .vokk-detail-hero p{ max-width: 590px; margin: 0 0 27px; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.75; }
body.pb-template-page-warmtepompen .vokk-detail-hero-button{
    min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 0 28px !important;
    background: linear-gradient(135deg, var(--vokk-btn-1) 0%, var(--vokk-btn-2) 100%) !important; color: #ffffff !important; font-family: "Poppins", sans-serif !important;
    font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap !important; border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 8px 25px color-mix(in srgb, var(--vokk-primary) 35%, transparent) !important;
}
body.pb-template-page-warmtepompen .vokk-detail-hero-button:hover{ transform: translateY(-3px) !important; color: #ffffff !important; }

/* INTRO */
body.pb-template-page-warmtepompen .vokk-detail-intro{ padding: 78px 0; }
body.pb-template-page-warmtepompen .vokk-detail-intro-grid{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; align-items: center; }
body.pb-template-page-warmtepompen .vokk-detail-small-title{ display: block; margin-bottom: 12px; color: var(--blue); font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
body.pb-template-page-warmtepompen .vokk-detail-intro h2,
body.pb-template-page-warmtepompen .vokk-detail-content h2{ margin: 0 0 16px; color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary)); font-size: clamp(30px, 3vw, 42px); line-height: 1.15; font-weight: 700; letter-spacing: -1.2px; }
body.pb-template-page-warmtepompen .vokk-detail-intro p,
body.pb-template-page-warmtepompen .vokk-detail-content > p{ margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.8; }

	/* INTRO AFBEELDING */
body.pb-template-page-warmtepompen .vokk-detail-intro-image{
    min-height: 420px; border-radius: 16px; background: linear-gradient(180deg, rgba(3,11,24,.02), rgba(3,11,24,.15)), var(--pb-img-heat_intro_img) center / cover no-repeat; box-shadow: 0 25px 55px rgba(15,23,42,.11);
}

/* BENEFITS */
body.pb-template-page-warmtepompen .vokk-detail-benefits{ padding: 58px 0; background: var(--soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
body.pb-template-page-warmtepompen .vokk-detail-benefits-grid{ display: grid; grid-template-columns: repeat(4, 1fr); }
body.pb-template-page-warmtepompen .vokk-detail-benefit{ padding: 5px 30px; text-align: center; }
body.pb-template-page-warmtepompen .vokk-detail-benefit + .vokk-detail-benefit{ border-left: 1px solid #dfe5ed; }
body.pb-template-page-warmtepompen .vokk-detail-benefit-icon{ width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; margin: 0 auto 13px; color: var(--blue); background: color-mix(in srgb, var(--vokk-primary) 8%, #ffffff); border: 1px solid color-mix(in srgb, var(--vokk-primary) 20%, transparent); border-radius: 50%; font-size: 15px; font-weight: 700; }
body.pb-template-page-warmtepompen .vokk-detail-benefit h3{ margin: 0 0 6px; color: color-mix(in srgb, #111827 90%, var(--vokk-primary)); font-size: 15px; line-height: 1.4; font-weight: 700; }
body.pb-template-page-warmtepompen .vokk-detail-benefit p{ max-width: 230px; margin: 0 auto; color: var(--muted); font-size: 11px; line-height: 1.6; }

/* SECTIE 2 */
body.pb-template-page-warmtepompen .vokk-detail-section{ padding: 82px 0; }
body.pb-template-page-warmtepompen .vokk-detail-section-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 75px; align-items: center; }
body.pb-template-page-warmtepompen .vokk-detail-section.reverse .vokk-detail-image{ order: 2; }
body.pb-template-page-warmtepompen .vokk-detail-section.reverse .vokk-detail-content{ order: 1; }

	/* SECTIE AFBEELDING */
body.pb-template-page-warmtepompen .vokk-detail-image{
    min-height: 430px; border-radius: 16px; background: linear-gradient(180deg, rgba(3,11,24,.02), rgba(3,11,24,.15)), var(--pb-img-heat_section_img) center / cover no-repeat; box-shadow: 0 25px 55px rgba(15,23,42,.10);
}
	
body.pb-template-page-warmtepompen .vokk-detail-content{ max-width: 550px; }
body.pb-template-page-warmtepompen .vokk-detail-list{ display: flex; flex-direction: column; gap: 11px; margin: 23px 0 0; padding: 0; list-style: none; }
body.pb-template-page-warmtepompen .vokk-detail-list li{ position: relative; padding-left: 25px; color: #344054; font-size: 13px; line-height: 1.55; font-weight: 500; }
body.pb-template-page-warmtepompen .vokk-detail-list li::before{ content: "✓"; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 700; }

/* PROCESS */
body.pb-template-page-warmtepompen .vokk-detail-process{ padding: 68px 0; background: var(--soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
body.pb-template-page-warmtepompen .vokk-detail-process-head{ max-width: 700px; margin: 0 auto 40px; text-align: center; }
body.pb-template-page-warmtepompen .vokk-detail-process-head h2{ margin: 0 0 12px; color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary)); font-size: clamp(29px, 3vw, 40px); font-weight: 700; }
body.pb-template-page-warmtepompen .vokk-detail-process-head p{ margin: 0; color: var(--muted); font-size: 13px; }
body.pb-template-page-warmtepompen .vokk-detail-process-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
body.pb-template-page-warmtepompen .vokk-detail-step{ position: relative; padding: 27px 25px; background: #ffffff; border: 1px solid var(--border); border-radius: 14px; }
body.pb-template-page-warmtepompen .vokk-detail-step-number{ display: block; margin-bottom: 16px; color: var(--blue); font-size: 11px; font-weight: 700; }
body.pb-template-page-warmtepompen .vokk-detail-step h3{ margin: 0 0 8px; color: color-mix(in srgb, #111827 90%, var(--vokk-primary)); font-size: 15px; font-weight: 700; }
body.pb-template-page-warmtepompen .vokk-detail-step p{ margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }

/* FAQ */
body.pb-template-page-warmtepompen .vokk-detail-faq-section{ padding: 78px 0; }
body.pb-template-page-warmtepompen .vokk-detail-faq-grid{ display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
body.pb-template-page-warmtepompen .vokk-detail-faq-intro h2{ margin: 0 0 14px; color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary)); font-size: clamp(28px, 3vw, 39px); font-weight: 700; }
body.pb-template-page-warmtepompen .vokk-detail-faq-intro p{ margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
body.pb-template-page-warmtepompen .vokk-detail-faq-item{ padding: 18px 0; border-bottom: 1px solid var(--border); }
body.pb-template-page-warmtepompen .vokk-detail-faq-item:first-child{ border-top: 1px solid var(--border); }
body.pb-template-page-warmtepompen .vokk-detail-faq-item h3{ margin: 0 0 7px; color: #344054; font-size: 13px; font-weight: 700; }
body.pb-template-page-warmtepompen .vokk-detail-faq-item p{ margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.7; }

/* CTA */
body.pb-template-page-warmtepompen .vokk-detail-cta{ padding: 0 0 80px; }
body.pb-template-page-warmtepompen .vokk-detail-cta-box{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 45px; align-items: center; padding: 48px 55px; color: #ffffff; background: radial-gradient(circle at 85% 0%, var(--vokk-glow), transparent 350px), linear-gradient(135deg, var(--vokk-dark), var(--vokk-darker)); border-radius: 18px; }
body.pb-template-page-warmtepompen .vokk-detail-cta-box h2{ margin: 0 0 10px; color: #ffffff; font-size: clamp(27px, 3vw, 38px); font-weight: 700; }
body.pb-template-page-warmtepompen .vokk-detail-cta-box p{ max-width: 650px; margin: 0; color: rgba(255,255,255,.60); font-size: 13px; }
body.pb-template-page-warmtepompen .vokk-detail-cta-button{ min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 0 28px !important; background: linear-gradient(135deg, var(--vokk-btn-1) 0%, var(--vokk-btn-2) 100%) !important; color: #ffffff !important; font-family: "Poppins", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; border-radius: 10px !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: 0 8px 25px color-mix(in srgb, var(--vokk-primary) 35%, transparent) !important; }

@media screen and (max-width: 780px){
    body.pb-template-page-warmtepompen .vokk-detail-container{ padding: 0 20px; }
    body.pb-template-page-warmtepompen .vokk-detail-intro-grid,
body.pb-template-page-warmtepompen .vokk-detail-section-grid,
body.pb-template-page-warmtepompen .vokk-detail-faq-grid,
body.pb-template-page-warmtepompen .vokk-detail-cta-box{ grid-template-columns: 1fr; gap: 34px; }
    body.pb-template-page-warmtepompen .vokk-detail-benefits-grid,
body.pb-template-page-warmtepompen .vokk-detail-process-grid{ grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   page-installatie.php
========================================================= */

body.pb-template-page-installatie .vokk-detail-page{
    --vokk-primary: var(--pb-primary);
    --vokk-primary-light: var(--pb-primary-light);
    --vokk-dark: var(--pb-dark);
    --vokk-darker: var(--pb-darker);
    --vokk-glow: var(--pb-glow);
    --vokk-btn-1: var(--pb-btn-1);
    --vokk-btn-2: var(--pb-btn-2);

    --blue: var(--vokk-primary);
    --blue-light: var(--vokk-primary-light);
    --navy: var(--vokk-dark);
    --navy-dark: var(--vokk-darker);
    --text: #0f172a;
    --muted: #667085;
    --soft: #f7f9fc;
    --border: #e6ebf2;

    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    color: var(--text);
    background: #ffffff;
    box-sizing: border-box;
}

body.pb-template-page-installatie .vokk-detail-page *{ box-sizing: border-box; }
body.pb-template-page-installatie .vokk-detail-container{ width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; }

/* HERO */
body.pb-template-page-installatie .vokk-detail-hero{
    position: relative; min-height: 500px; display: flex; align-items: center; overflow: hidden;
    background: linear-gradient(90deg, rgba(2,8,18,.98) 0%, rgba(2,8,18,.92) 40%, rgba(2,8,18,.58) 68%, rgba(2,8,18,.18) 100%), var(--pb-img-install_hero_img) center right / cover no-repeat;
}
	
body.pb-template-page-installatie .vokk-detail-hero::after{
    content: ""; position: absolute; width: 540px; height: 380px; left: -160px; bottom: -190px;
    background: radial-gradient(circle, var(--vokk-glow), transparent 68%); pointer-events: none;
}
body.pb-template-page-installatie .vokk-detail-hero-content{ position: relative; z-index: 2; max-width: 680px; padding: 145px 0 85px; }
body.pb-template-page-installatie .vokk-detail-eyebrow{ display: block; margin-bottom: 15px; color: var(--blue-light); font-size: 11px; line-height: 1.2; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
body.pb-template-page-installatie .vokk-detail-hero h1{ max-width: 650px; margin: 0 0 20px; color: color-mix(in srgb, #ffffff 88%, var(--vokk-primary-light)); font-size: clamp(40px, 4.3vw, 60px); line-height: 1.05; font-weight: 700; letter-spacing: -2px; }
body.pb-template-page-installatie .vokk-detail-hero p{ max-width: 590px; margin: 0 0 27px; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.75; }
body.pb-template-page-installatie .vokk-detail-hero-button{
    min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 0 28px !important;
    background: linear-gradient(135deg, var(--vokk-btn-1) 0%, var(--vokk-btn-2) 100%) !important; color: #ffffff !important; font-family: "Poppins", sans-serif !important;
    font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap !important; border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 8px 25px color-mix(in srgb, var(--vokk-primary) 35%, transparent) !important;
}
body.pb-template-page-installatie .vokk-detail-hero-button:hover{ transform: translateY(-3px) !important; color: #ffffff !important; }

/* INTRO */
body.pb-template-page-installatie .vokk-detail-intro{ padding: 78px 0; }
body.pb-template-page-installatie .vokk-detail-intro-grid{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; align-items: center; }
body.pb-template-page-installatie .vokk-detail-small-title{ display: block; margin-bottom: 12px; color: var(--blue); font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
body.pb-template-page-installatie .vokk-detail-intro h2,
body.pb-template-page-installatie .vokk-detail-content h2{ margin: 0 0 16px; color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary)); font-size: clamp(30px, 3vw, 42px); line-height: 1.15; font-weight: 700; letter-spacing: -1.2px; }
body.pb-template-page-installatie .vokk-detail-intro p,
body.pb-template-page-installatie .vokk-detail-content > p{ margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.8; }

	/* INTRO AFBEELDING */
body.pb-template-page-installatie .vokk-detail-intro-image{
    min-height: 420px; border-radius: 16px; background: linear-gradient(180deg, rgba(3,11,24,.02), rgba(3,11,24,.15)), var(--pb-img-install_intro_img) center / cover no-repeat; box-shadow: 0 25px 55px rgba(15,23,42,.11);
}

/* BENEFITS */
body.pb-template-page-installatie .vokk-detail-benefits{ padding: 58px 0; background: var(--soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
body.pb-template-page-installatie .vokk-detail-benefits-grid{ display: grid; grid-template-columns: repeat(4, 1fr); }
body.pb-template-page-installatie .vokk-detail-benefit{ padding: 5px 30px; text-align: center; }
body.pb-template-page-installatie .vokk-detail-benefit + .vokk-detail-benefit{ border-left: 1px solid #dfe5ed; }
body.pb-template-page-installatie .vokk-detail-benefit-icon{ width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; margin: 0 auto 13px; color: var(--blue); background: color-mix(in srgb, var(--vokk-primary) 8%, #ffffff); border: 1px solid color-mix(in srgb, var(--vokk-primary) 20%, transparent); border-radius: 50%; font-size: 15px; font-weight: 700; }
body.pb-template-page-installatie .vokk-detail-benefit h3{ margin: 0 0 6px; color: color-mix(in srgb, #111827 90%, var(--vokk-primary)); font-size: 15px; line-height: 1.4; font-weight: 700; }
body.pb-template-page-installatie .vokk-detail-benefit p{ max-width: 230px; margin: 0 auto; color: var(--muted); font-size: 11px; line-height: 1.6; }

/* SECTIE 2 */
body.pb-template-page-installatie .vokk-detail-section{ padding: 82px 0; }
body.pb-template-page-installatie .vokk-detail-section-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 75px; align-items: center; }
body.pb-template-page-installatie .vokk-detail-section.reverse .vokk-detail-image{ order: 2; }
body.pb-template-page-installatie .vokk-detail-section.reverse .vokk-detail-content{ order: 1; }

	/* SECTIE AFBEELDING */
body.pb-template-page-installatie .vokk-detail-image{
    min-height: 430px; border-radius: 16px; background: linear-gradient(180deg, rgba(3,11,24,.02), rgba(3,11,24,.15)), var(--pb-img-install_section_img) center / cover no-repeat; box-shadow: 0 25px 55px rgba(15,23,42,.10);
}
	
	
body.pb-template-page-installatie .vokk-detail-content{ max-width: 550px; }
body.pb-template-page-installatie .vokk-detail-list{ display: flex; flex-direction: column; gap: 11px; margin: 23px 0 0; padding: 0; list-style: none; }
body.pb-template-page-installatie .vokk-detail-list li{ position: relative; padding-left: 25px; color: #344054; font-size: 13px; line-height: 1.55; font-weight: 500; }
body.pb-template-page-installatie .vokk-detail-list li::before{ content: "✓"; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 700; }

/* PROCESS */
body.pb-template-page-installatie .vokk-detail-process{ padding: 68px 0; background: var(--soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
body.pb-template-page-installatie .vokk-detail-process-head{ max-width: 700px; margin: 0 auto 40px; text-align: center; }
body.pb-template-page-installatie .vokk-detail-process-head h2{ margin: 0 0 12px; color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary)); font-size: clamp(29px, 3vw, 40px); font-weight: 700; }
body.pb-template-page-installatie .vokk-detail-process-head p{ margin: 0; color: var(--muted); font-size: 13px; }
body.pb-template-page-installatie .vokk-detail-process-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
body.pb-template-page-installatie .vokk-detail-step{ position: relative; padding: 27px 25px; background: #ffffff; border: 1px solid var(--border); border-radius: 14px; }
body.pb-template-page-installatie .vokk-detail-step-number{ display: block; margin-bottom: 16px; color: var(--blue); font-size: 11px; font-weight: 700; }
body.pb-template-page-installatie .vokk-detail-step h3{ margin: 0 0 8px; color: color-mix(in srgb, #111827 90%, var(--vokk-primary)); font-size: 15px; font-weight: 700; }
body.pb-template-page-installatie .vokk-detail-step p{ margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }

/* FAQ */
body.pb-template-page-installatie .vokk-detail-faq-section{ padding: 78px 0; }
body.pb-template-page-installatie .vokk-detail-faq-grid{ display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
body.pb-template-page-installatie .vokk-detail-faq-intro h2{ margin: 0 0 14px; color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary)); font-size: clamp(28px, 3vw, 39px); font-weight: 700; }
body.pb-template-page-installatie .vokk-detail-faq-intro p{ margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
body.pb-template-page-installatie .vokk-detail-faq-item{ padding: 18px 0; border-bottom: 1px solid var(--border); }
body.pb-template-page-installatie .vokk-detail-faq-item:first-child{ border-top: 1px solid var(--border); }
body.pb-template-page-installatie .vokk-detail-faq-item h3{ margin: 0 0 7px; color: #344054; font-size: 13px; font-weight: 700; }
body.pb-template-page-installatie .vokk-detail-faq-item p{ margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.7; }

/* CTA */
body.pb-template-page-installatie .vokk-detail-cta{ padding: 0 0 80px; }
body.pb-template-page-installatie .vokk-detail-cta-box{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 45px; align-items: center; padding: 48px 55px; color: #ffffff; background: radial-gradient(circle at 85% 0%, var(--vokk-glow), transparent 350px), linear-gradient(135deg, var(--vokk-dark), var(--vokk-darker)); border-radius: 18px; }
body.pb-template-page-installatie .vokk-detail-cta-box h2{ margin: 0 0 10px; color: #ffffff; font-size: clamp(27px, 3vw, 38px); font-weight: 700; }
body.pb-template-page-installatie .vokk-detail-cta-box p{ max-width: 650px; margin: 0; color: rgba(255,255,255,.60); font-size: 13px; }
body.pb-template-page-installatie .vokk-detail-cta-button{ min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 0 28px !important; background: linear-gradient(135deg, var(--vokk-btn-1) 0%, var(--vokk-btn-2) 100%) !important; color: #ffffff !important; font-family: "Poppins", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; border-radius: 10px !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: 0 8px 25px color-mix(in srgb, var(--vokk-primary) 35%, transparent) !important; }

@media screen and (max-width: 780px){
    body.pb-template-page-installatie .vokk-detail-container{ padding: 0 20px; }
    body.pb-template-page-installatie .vokk-detail-intro-grid,
body.pb-template-page-installatie .vokk-detail-section-grid,
body.pb-template-page-installatie .vokk-detail-faq-grid,
body.pb-template-page-installatie .vokk-detail-cta-box{ grid-template-columns: 1fr; gap: 34px; }
    body.pb-template-page-installatie .vokk-detail-benefits-grid,
body.pb-template-page-installatie .vokk-detail-process-grid{ grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   page-sanitair.php
========================================================= */

body.pb-template-page-sanitair .vokk-detail-page{
    --vokk-primary: var(--pb-primary);
    --vokk-primary-light: var(--pb-primary-light);
    --vokk-dark: var(--pb-dark);
    --vokk-darker: var(--pb-darker);
    --vokk-glow: var(--pb-glow);
    --vokk-btn-1: var(--pb-btn-1);
    --vokk-btn-2: var(--pb-btn-2);

    --blue: var(--vokk-primary);
    --blue-light: var(--vokk-primary-light);
    --navy: var(--vokk-dark);
    --navy-dark: var(--vokk-darker);
    --text: #0f172a;
    --muted: #667085;
    --soft: #f7f9fc;
    --border: #e6ebf2;

    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    color: var(--text);
    background: #ffffff;
    box-sizing: border-box;
}

body.pb-template-page-sanitair .vokk-detail-page *{ box-sizing: border-box; }
body.pb-template-page-sanitair .vokk-detail-container{ width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; }

/* HERO */
body.pb-template-page-sanitair .vokk-detail-hero{
    position: relative; min-height: 500px; display: flex; align-items: center; overflow: hidden;
    background: linear-gradient(90deg, rgba(2,8,18,.98) 0%, rgba(2,8,18,.92) 40%, rgba(2,8,18,.58) 68%, rgba(2,8,18,.18) 100%), var(--pb-img-sanitair_hero_img) center right / cover no-repeat;
}
body.pb-template-page-sanitair .vokk-detail-hero::after{
    content: ""; position: absolute; width: 540px; height: 380px; left: -160px; bottom: -190px;
    background: radial-gradient(circle, var(--vokk-glow), transparent 68%); pointer-events: none;
}
body.pb-template-page-sanitair .vokk-detail-hero-content{ position: relative; z-index: 2; max-width: 680px; padding: 145px 0 85px; }
body.pb-template-page-sanitair .vokk-detail-eyebrow{ display: block; margin-bottom: 15px; color: var(--blue-light); font-size: 11px; line-height: 1.2; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
body.pb-template-page-sanitair .vokk-detail-hero h1{ max-width: 650px; margin: 0 0 20px; color: color-mix(in srgb, #ffffff 88%, var(--vokk-primary-light)); font-size: clamp(40px, 4.3vw, 60px); line-height: 1.05; font-weight: 700; letter-spacing: -2px; }
body.pb-template-page-sanitair .vokk-detail-hero p{ max-width: 590px; margin: 0 0 27px; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.75; }
body.pb-template-page-sanitair .vokk-detail-hero-button{
    min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 0 28px !important;
    background: linear-gradient(135deg, var(--vokk-btn-1) 0%, var(--vokk-btn-2) 100%) !important; color: #ffffff !important; font-family: "Poppins", sans-serif !important;
    font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap !important; border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 8px 25px color-mix(in srgb, var(--vokk-primary) 35%, transparent) !important;
}
body.pb-template-page-sanitair .vokk-detail-hero-button:hover{ transform: translateY(-3px) !important; color: #ffffff !important; }

/* INTRO */
body.pb-template-page-sanitair .vokk-detail-intro{ padding: 78px 0; }
body.pb-template-page-sanitair .vokk-detail-intro-grid{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; align-items: center; }
body.pb-template-page-sanitair .vokk-detail-small-title{ display: block; margin-bottom: 12px; color: var(--blue); font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
body.pb-template-page-sanitair .vokk-detail-intro h2,
body.pb-template-page-sanitair .vokk-detail-content h2{ margin: 0 0 16px; color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary)); font-size: clamp(30px, 3vw, 42px); line-height: 1.15; font-weight: 700; letter-spacing: -1.2px; }
body.pb-template-page-sanitair .vokk-detail-intro p,
body.pb-template-page-sanitair .vokk-detail-content > p{ margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.8; }
/* INTRO AFBEELDING */
body.pb-template-page-sanitair .vokk-detail-intro-image{
    min-height: 420px; border-radius: 16px; background: linear-gradient(180deg, rgba(3,11,24,.02), rgba(3,11,24,.15)), var(--pb-img-sanitair_intro_img) center / cover no-repeat; box-shadow: 0 25px 55px rgba(15,23,42,.11);
}

/* BENEFITS */
body.pb-template-page-sanitair .vokk-detail-benefits{ padding: 58px 0; background: var(--soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
body.pb-template-page-sanitair .vokk-detail-benefits-grid{ display: grid; grid-template-columns: repeat(4, 1fr); }
body.pb-template-page-sanitair .vokk-detail-benefit{ padding: 5px 30px; text-align: center; }
body.pb-template-page-sanitair .vokk-detail-benefit + .vokk-detail-benefit{ border-left: 1px solid #dfe5ed; }
body.pb-template-page-sanitair .vokk-detail-benefit-icon{ width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; margin: 0 auto 13px; color: var(--blue); background: color-mix(in srgb, var(--vokk-primary) 8%, #ffffff); border: 1px solid color-mix(in srgb, var(--vokk-primary) 20%, transparent); border-radius: 50%; font-size: 15px; font-weight: 700; }
body.pb-template-page-sanitair .vokk-detail-benefit h3{ margin: 0 0 6px; color: color-mix(in srgb, #111827 90%, var(--vokk-primary)); font-size: 15px; line-height: 1.4; font-weight: 700; }
body.pb-template-page-sanitair .vokk-detail-benefit p{ max-width: 230px; margin: 0 auto; color: var(--muted); font-size: 11px; line-height: 1.6; }

/* SECTIE 2 */
body.pb-template-page-sanitair .vokk-detail-section{ padding: 82px 0; }
body.pb-template-page-sanitair .vokk-detail-section-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 75px; align-items: center; }
body.pb-template-page-sanitair .vokk-detail-section.reverse .vokk-detail-image{ order: 2; }
body.pb-template-page-sanitair .vokk-detail-section.reverse .vokk-detail-content{ order: 1; }

	/* SECTIE AFBEELDING */
body.pb-template-page-sanitair .vokk-detail-image{
    min-height: 430px; border-radius: 16px; background: linear-gradient(180deg, rgba(3,11,24,.02), rgba(3,11,24,.15)), var(--pb-img-sanitair_section_img) center / cover no-repeat; box-shadow: 0 25px 55px rgba(15,23,42,.10);
}
	
	
body.pb-template-page-sanitair .vokk-detail-content{ max-width: 550px; }
body.pb-template-page-sanitair .vokk-detail-list{ display: flex; flex-direction: column; gap: 11px; margin: 23px 0 0; padding: 0; list-style: none; }
body.pb-template-page-sanitair .vokk-detail-list li{ position: relative; padding-left: 25px; color: #344054; font-size: 13px; line-height: 1.55; font-weight: 500; }
body.pb-template-page-sanitair .vokk-detail-list li::before{ content: "✓"; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 700; }

/* PROCESS */
body.pb-template-page-sanitair .vokk-detail-process{ padding: 68px 0; background: var(--soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
body.pb-template-page-sanitair .vokk-detail-process-head{ max-width: 700px; margin: 0 auto 40px; text-align: center; }
body.pb-template-page-sanitair .vokk-detail-process-head h2{ margin: 0 0 12px; color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary)); font-size: clamp(29px, 3vw, 40px); font-weight: 700; }
body.pb-template-page-sanitair .vokk-detail-process-head p{ margin: 0; color: var(--muted); font-size: 13px; }
body.pb-template-page-sanitair .vokk-detail-process-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
body.pb-template-page-sanitair .vokk-detail-step{ position: relative; padding: 27px 25px; background: #ffffff; border: 1px solid var(--border); border-radius: 14px; }
body.pb-template-page-sanitair .vokk-detail-step-number{ display: block; margin-bottom: 16px; color: var(--blue); font-size: 11px; font-weight: 700; }
body.pb-template-page-sanitair .vokk-detail-step h3{ margin: 0 0 8px; color: color-mix(in srgb, #111827 90%, var(--vokk-primary)); font-size: 15px; font-weight: 700; }
body.pb-template-page-sanitair .vokk-detail-step p{ margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }

/* FAQ */
body.pb-template-page-sanitair .vokk-detail-faq-section{ padding: 78px 0; }
body.pb-template-page-sanitair .vokk-detail-faq-grid{ display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
body.pb-template-page-sanitair .vokk-detail-faq-intro h2{ margin: 0 0 14px; color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary)); font-size: clamp(28px, 3vw, 39px); font-weight: 700; }
body.pb-template-page-sanitair .vokk-detail-faq-intro p{ margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
body.pb-template-page-sanitair .vokk-detail-faq-item{ padding: 18px 0; border-bottom: 1px solid var(--border); }
body.pb-template-page-sanitair .vokk-detail-faq-item:first-child{ border-top: 1px solid var(--border); }
body.pb-template-page-sanitair .vokk-detail-faq-item h3{ margin: 0 0 7px; color: #344054; font-size: 13px; font-weight: 700; }
body.pb-template-page-sanitair .vokk-detail-faq-item p{ margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.7; }

/* CTA */
body.pb-template-page-sanitair .vokk-detail-cta{ padding: 0 0 80px; }
body.pb-template-page-sanitair .vokk-detail-cta-box{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 45px; align-items: center; padding: 48px 55px; color: #ffffff; background: radial-gradient(circle at 85% 0%, var(--vokk-glow), transparent 350px), linear-gradient(135deg, var(--vokk-dark), var(--vokk-darker)); border-radius: 18px; }
body.pb-template-page-sanitair .vokk-detail-cta-box h2{ margin: 0 0 10px; color: #ffffff; font-size: clamp(27px, 3vw, 38px); font-weight: 700; }
body.pb-template-page-sanitair .vokk-detail-cta-box p{ max-width: 650px; margin: 0; color: rgba(255,255,255,.60); font-size: 13px; }
body.pb-template-page-sanitair .vokk-detail-cta-button{ min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 0 28px !important; background: linear-gradient(135deg, var(--vokk-btn-1) 0%, var(--vokk-btn-2) 100%) !important; color: #ffffff !important; font-family: "Poppins", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; border-radius: 10px !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: 0 8px 25px color-mix(in srgb, var(--vokk-primary) 35%, transparent) !important; }

@media screen and (max-width: 780px){
    body.pb-template-page-sanitair .vokk-detail-container{ padding: 0 20px; }
    body.pb-template-page-sanitair .vokk-detail-intro-grid,
body.pb-template-page-sanitair .vokk-detail-section-grid,
body.pb-template-page-sanitair .vokk-detail-faq-grid,
body.pb-template-page-sanitair .vokk-detail-cta-box{ grid-template-columns: 1fr; gap: 34px; }
    body.pb-template-page-sanitair .vokk-detail-benefits-grid,
body.pb-template-page-sanitair .vokk-detail-process-grid{ grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   page-zonne-energie.php
========================================================= */

/* =========================================================
   DYNAMISCHE SFEER VARIABELEN (CONSISTENT MET REST)
========================================================= */
body.pb-template-page-zonne-energie .vokk-detail-page{
    --vokk-primary: var(--pb-primary);
    --vokk-primary-light: var(--pb-primary-light);
    --vokk-dark: var(--pb-dark);
    --vokk-darker: var(--pb-darker);
    --vokk-glow: var(--pb-glow);
    --vokk-btn-1: var(--pb-btn-1);
    --vokk-btn-2: var(--pb-btn-2);

    --blue: var(--vokk-primary);
    --blue-light: var(--vokk-primary-light);
    --navy: var(--vokk-dark);
    --navy-dark: var(--vokk-darker);
    --text: #0f172a;
    --muted: #667085;
    --soft: #f7f9fc;
    --border: #e6ebf2;

    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    color: var(--text);
    background: #ffffff;
    box-sizing: border-box;
}

body.pb-template-page-zonne-energie .vokk-detail-page *{
    box-sizing: border-box;
}

body.pb-template-page-zonne-energie .vokk-detail-container{
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}


/* HERO */
body.pb-template-page-zonne-energie .vokk-detail-hero{
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(2,8,18,.98) 0%,
            rgba(2,8,18,.92) 40%,
            rgba(2,8,18,.58) 68%,
            rgba(2,8,18,.18) 100%
        ),
        var(--pb-img-solar_hero_img)
        center right / cover no-repeat;
}

body.pb-template-page-zonne-energie .vokk-detail-hero::after{
    content: "";
    position: absolute;
    width: 540px;
    height: 380px;
    left: -160px;
    bottom: -190px;
    background:
        radial-gradient(
            circle,
            var(--vokk-glow),
            transparent 68%
        );
    pointer-events: none;
}

body.pb-template-page-zonne-energie .vokk-detail-hero-content{
    position: relative;
    z-index: 2;
    max-width: 680px;
    padding: 145px 0 85px;
}

body.pb-template-page-zonne-energie .vokk-detail-eyebrow{
    display: block;
    margin-bottom: 15px;
    color: var(--blue-light);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

body.pb-template-page-zonne-energie .vokk-detail-hero h1{
    max-width: 650px;
    margin: 0 0 20px;
    color: color-mix(in srgb, #ffffff 88%, var(--vokk-primary-light));
    font-size: clamp(40px, 4.3vw, 60px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -2px;
}

body.pb-template-page-zonne-energie .vokk-detail-hero h1 span{
    color: var(--blue-light);
}

body.pb-template-page-zonne-energie .vokk-detail-hero p{
    max-width: 590px;
    margin: 0 0 27px;
    color: rgba(255,255,255,.68);
    font-size: 15px;
    line-height: 1.75;
}

body.pb-template-page-zonne-energie .vokk-detail-hero-button{
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 28px !important;
    background: linear-gradient(135deg, var(--vokk-btn-1) 0%, var(--vokk-btn-2) 100%) !important;
    color: #ffffff !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 25px color-mix(in srgb, var(--vokk-primary) 35%, transparent) !important;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}

body.pb-template-page-zonne-energie .vokk-detail-hero-button:hover{
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 35px color-mix(in srgb, var(--vokk-primary) 50%, transparent) !important;
    color: #ffffff !important;
}

body.pb-template-page-zonne-energie .vokk-detail-hero-button span{
    color: #ffffff !important;
    font-weight: 900 !important;
    margin-left: 2px !important;
    font-size: 15px !important;
}


/* =========================================================
   INTRO
========================================================= */

body.pb-template-page-zonne-energie .vokk-detail-intro{
    padding: 78px 0;
}

body.pb-template-page-zonne-energie .vokk-detail-intro-grid{
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 80px;
    align-items: center;
}

body.pb-template-page-zonne-energie .vokk-detail-small-title{
    display: block;
    margin-bottom: 12px;
    color: var(--blue);
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

body.pb-template-page-zonne-energie .vokk-detail-intro h2,
body.pb-template-page-zonne-energie .vokk-detail-content h2{
    margin: 0 0 16px;
    color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary));
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1.2px;
}

body.pb-template-page-zonne-energie .vokk-detail-intro p,
body.pb-template-page-zonne-energie .vokk-detail-content > p{
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

/* INTRO AFBEELDING */
body.pb-template-page-zonne-energie .vokk-detail-intro-image{
    min-height: 420px;
    border-radius: 16px;
    background:
        linear-gradient(
            180deg,
            rgba(3,11,24,.02),
            rgba(3,11,24,.15)
        ),
        var(--pb-img-solar_intro_img)
        center / cover no-repeat;
    box-shadow: 0 25px 55px rgba(15,23,42,.11);
}


/* =========================================================
   USP / VOORDELEN
========================================================= */

body.pb-template-page-zonne-energie .vokk-detail-benefits{
    padding: 58px 0;
    background: var(--soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

body.pb-template-page-zonne-energie .vokk-detail-benefits-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

body.pb-template-page-zonne-energie .vokk-detail-benefit{
    padding: 5px 30px;
    text-align: center;
}

body.pb-template-page-zonne-energie .vokk-detail-benefit + .vokk-detail-benefit{
    border-left: 1px solid #dfe5ed;
}

body.pb-template-page-zonne-energie .vokk-detail-benefit-icon{
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 13px;
    color: var(--blue);
    background: color-mix(in srgb, var(--vokk-primary) 8%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--vokk-primary) 20%, transparent);
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
}

body.pb-template-page-zonne-energie .vokk-detail-benefit h3{
    margin: 0 0 6px;
    color: color-mix(in srgb, #111827 90%, var(--vokk-primary));
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
}

body.pb-template-page-zonne-energie .vokk-detail-benefit p{
    max-width: 230px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}


/* =========================================================
   TWEEDE CONTENT SECTIE
========================================================= */

body.pb-template-page-zonne-energie .vokk-detail-section{
    padding: 82px 0;
}

body.pb-template-page-zonne-energie .vokk-detail-section-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 75px;
    align-items: center;
}

body.pb-template-page-zonne-energie .vokk-detail-section.reverse .vokk-detail-image{
    order: 2;
}

body.pb-template-page-zonne-energie .vokk-detail-section.reverse .vokk-detail-content{
    order: 1;
}

/* TWEEDE CONTENT SECTIE AFBEELDING */
body.pb-template-page-zonne-energie .vokk-detail-image{
    min-height: 430px;
    border-radius: 16px;
    background:
        linear-gradient(
            180deg,
            rgba(3,11,24,.02),
            rgba(3,11,24,.15)
        ),
        var(--pb-img-solar_section_img)
        center / cover no-repeat;
    box-shadow: 0 25px 55px rgba(15,23,42,.10);
}

body.pb-template-page-zonne-energie .vokk-detail-content{
    max-width: 550px;
}


/* =========================================================
   CHECK LIST
========================================================= */

body.pb-template-page-zonne-energie .vokk-detail-list{
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 23px 0 0;
    padding: 0;
    list-style: none;
}

body.pb-template-page-zonne-energie .vokk-detail-list li{
    position: relative;
    padding-left: 25px;
    color: #344054;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
}

body.pb-template-page-zonne-energie .vokk-detail-list li::before{
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--blue);
    font-weight: 700;
}


/* =========================================================
   WERKWIJZE
========================================================= */

body.pb-template-page-zonne-energie .vokk-detail-process{
    padding: 68px 0;
    background: var(--soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

body.pb-template-page-zonne-energie .vokk-detail-process-head{
    max-width: 700px;
    margin: 0 auto 40px;
    text-align: center;
}

body.pb-template-page-zonne-energie .vokk-detail-process-head h2{
    margin: 0 0 12px;
    color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary));
    font-size: clamp(29px, 3vw, 40px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1.1px;
}

body.pb-template-page-zonne-energie .vokk-detail-process-head p{
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

body.pb-template-page-zonne-energie .vokk-detail-process-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

body.pb-template-page-zonne-energie .vokk-detail-step{
    position: relative;
    padding: 27px 25px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
}

body.pb-template-page-zonne-energie .vokk-detail-step-number{
    display: block;
    margin-bottom: 16px;
    color: var(--blue);
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
}

body.pb-template-page-zonne-energie .vokk-detail-step h3{
    margin: 0 0 8px;
    color: color-mix(in srgb, #111827 90%, var(--vokk-primary));
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
}

body.pb-template-page-zonne-energie .vokk-detail-step p{
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.65;
}


/* =========================================================
   FAQ
========================================================= */

body.pb-template-page-zonne-energie .vokk-detail-faq-section{
    padding: 78px 0;
}

body.pb-template-page-zonne-energie .vokk-detail-faq-grid{
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
    align-items: start;
}

body.pb-template-page-zonne-energie .vokk-detail-faq-intro h2{
    margin: 0 0 14px;
    color: color-mix(in srgb, var(--vokk-dark, #0f172a) 85%, var(--vokk-primary));
    font-size: clamp(28px, 3vw, 39px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1px;
}

body.pb-template-page-zonne-energie .vokk-detail-faq-intro p{
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.75;
}

body.pb-template-page-zonne-energie .vokk-detail-faq{
    display: flex;
    flex-direction: column;
}

body.pb-template-page-zonne-energie .vokk-detail-faq-item{
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}

body.pb-template-page-zonne-energie .vokk-detail-faq-item:first-child{
    border-top: 1px solid var(--border);
}

body.pb-template-page-zonne-energie .vokk-detail-faq-item h3{
    margin: 0 0 7px;
    color: #344054;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}

body.pb-template-page-zonne-energie .vokk-detail-faq-item p{
    margin: 0;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.7;
}


/* =========================================================
   CTA
========================================================= */

body.pb-template-page-zonne-energie .vokk-detail-cta{
    padding: 0 0 80px;
}

body.pb-template-page-zonne-energie .vokk-detail-cta-box{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 45px;
    align-items: center;
    padding: 48px 55px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 85% 0%,
            var(--vokk-glow),
            transparent 350px
        ),
        linear-gradient(
            135deg,
            var(--vokk-dark),
            var(--vokk-darker)
        );
    border-radius: 18px;
}

body.pb-template-page-zonne-energie .vokk-detail-cta-box h2{
    margin: 0 0 10px;
    color: #ffffff;
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1px;
}

body.pb-template-page-zonne-energie .vokk-detail-cta-box h2 span{
    color: var(--blue-light);
}

body.pb-template-page-zonne-energie .vokk-detail-cta-box p{
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,.60);
    font-size: 13px;
    line-height: 1.7;
}

body.pb-template-page-zonne-energie .vokk-detail-cta-button{
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 28px !important;
    background: linear-gradient(135deg, var(--vokk-btn-1) 0%, var(--vokk-btn-2) 100%) !important;
    color: #ffffff !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 25px color-mix(in srgb, var(--vokk-primary) 35%, transparent) !important;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}

body.pb-template-page-zonne-energie .vokk-detail-cta-button:hover{
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 35px color-mix(in srgb, var(--vokk-primary) 50%, transparent) !important;
    color: #ffffff !important;
}

body.pb-template-page-zonne-energie .vokk-detail-cta-button span{
    color: #ffffff !important;
    font-weight: 900 !important;
    margin-left: 2px !important;
    font-size: 15px !important;
}


/* =========================================================
   RESPONSIVE MEDIA QUERIES
========================================================= */

@media screen and (max-width: 1024px){
    body.pb-template-page-zonne-energie .vokk-detail-hero{ min-height: 440px; }
    body.pb-template-page-zonne-energie .vokk-detail-hero-content{ padding: 110px 0 70px; }
    body.pb-template-page-zonne-energie .vokk-detail-intro-grid,
body.pb-template-page-zonne-energie .vokk-detail-section-grid{ gap: 45px; }
    body.pb-template-page-zonne-energie .vokk-detail-intro-image,
body.pb-template-page-zonne-energie .vokk-detail-image{ min-height: 350px; }
    body.pb-template-page-zonne-energie .vokk-detail-process-grid{ grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 780px){
    body.pb-template-page-zonne-energie .vokk-detail-container{ padding: 0 20px; }
    body.pb-template-page-zonne-energie .vokk-detail-hero{
        min-height: auto;
        background:
            linear-gradient(180deg, rgba(2,8,18,.84) 0%, rgba(2,8,18,.96) 100%),
            url('admin/kavion-builder/images/vokk/hero.png') center / cover no-repeat;
    }
    body.pb-template-page-zonne-energie .vokk-detail-hero-content{ padding: 80px 0 70px; }
    body.pb-template-page-zonne-energie .vokk-detail-intro{ padding: 60px 0; }
    body.pb-template-page-zonne-energie .vokk-detail-intro-grid,
body.pb-template-page-zonne-energie .vokk-detail-section-grid{ grid-template-columns: 1fr; gap: 34px; }
    body.pb-template-page-zonne-energie .vokk-detail-section.reverse .vokk-detail-image,
body.pb-template-page-zonne-energie .vokk-detail-section.reverse .vokk-detail-content{ order: initial; }
    body.pb-template-page-zonne-energie .vokk-detail-benefits-grid{ grid-template-columns: 1fr 1fr; row-gap: 38px; }
    body.pb-template-page-zonne-energie .vokk-detail-benefit:nth-child(3){ border-left: 0; }
    body.pb-template-page-zonne-energie .vokk-detail-faq-grid{ grid-template-columns: 1fr; gap: 35px; }
    body.pb-template-page-zonne-energie .vokk-detail-cta-box{ grid-template-columns: 1fr; gap: 25px; }
    body.pb-template-page-zonne-energie .vokk-detail-cta-button{ justify-self: start; }
}

@media screen and (max-width: 560px){
    body.pb-template-page-zonne-energie .vokk-detail-container{ padding: 0 16px; }
    body.pb-template-page-zonne-energie .vokk-detail-hero-content{ padding: 65px 0 55px; }
    body.pb-template-page-zonne-energie .vokk-detail-hero h1{ font-size: 36px; letter-spacing: -1.4px; }
    body.pb-template-page-zonne-energie .vokk-detail-hero p{ font-size: 13px; }
    body.pb-template-page-zonne-energie .vokk-detail-intro{ padding: 50px 0; }
    body.pb-template-page-zonne-energie .vokk-detail-intro h2,
body.pb-template-page-zonne-energie .vokk-detail-content h2{ font-size: 28px; }
    body.pb-template-page-zonne-energie .vokk-detail-intro-image,
body.pb-template-page-zonne-energie .vokk-detail-image{ min-height: 270px; border-radius: 12px; }
    body.pb-template-page-zonne-energie .vokk-detail-benefits{ padding: 42px 0; }
    body.pb-template-page-zonne-energie .vokk-detail-benefits-grid{ grid-template-columns: 1fr; row-gap: 0; }
    body.pb-template-page-zonne-energie .vokk-detail-benefit{ padding: 22px 10px; }
    body.pb-template-page-zonne-energie .vokk-detail-benefit + .vokk-detail-benefit{ border-left: 0; border-top: 1px solid #dfe5ed; }
    body.pb-template-page-zonne-energie .vokk-detail-section{ padding: 58px 0; }
    body.pb-template-page-zonne-energie .vokk-detail-process{ padding: 52px 0; }
    body.pb-template-page-zonne-energie .vokk-detail-process-grid{ grid-template-columns: 1fr; gap: 16px; }
    body.pb-template-page-zonne-energie .vokk-detail-faq-section{ padding: 58px 0; }
    body.pb-template-page-zonne-energie .vokk-detail-cta{ padding-bottom: 55px; }
    body.pb-template-page-zonne-energie .vokk-detail-cta-box{ padding: 32px 25px; border-radius: 14px; }
    body.pb-template-page-zonne-energie .vokk-detail-cta-button{ width: 100%; }
}

/* =========================================================
   VOORMALIGE INLINE STYLE ATTRIBUTEN
========================================================= */

.pb-inline-0e9140c757 { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pb-inline-14e97c3da7 { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.pb-inline-18b8609f4c { color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 20px; }
.pb-inline-3038e622d9 { background: var(--kavion-dark, #061426) !important; color: #FFFFFF; padding: 80px 0 40px 0; position: relative; transition: background 0.4s ease; }
.pb-inline-3129698787 { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 70px; padding-top: 28px; text-align: center; opacity: 0.7; font-size: 0.9rem; }
.pb-inline-4d03d6f8f0 { width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: all 0.25s ease; }
.pb-inline-4de0f5f13f { color: #667085; font-size: 13px; }
.pb-inline-5335897e87 { opacity: 0.85; max-width: 360px; margin: 0; line-height: 1.6; }
.pb-inline-5d61f22d1c { max-height: 46px; width: auto; object-fit: contain; }
.pb-inline-7c0f06feca { text-decoration: none; color: inherit; }
.pb-inline-7c21759f6b { margin-top: 28px; display: flex; gap: 18px; flex-wrap: wrap; }
.pb-inline-86af0526d6 { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.pb-inline-88e411f874 { opacity:0.3; }
.pb-inline-ce3f9f751a { grid-column: 1/-1; text-align: center; color: var(--muted); padding: 40px 0; }
.pb-inline-d10a1481ad { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 70%; height: 3px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--kavion-primary, #3867fa) 75%, transparent) 50%, transparent 100%); }
.pb-inline-fbd1fa1c4a { color:#00b67a; }

/* =========================================================
   PB HOMEPAGE RESPONSIVE V1
========================================================= */

/*
 * BASISVEILIGHEID
 * Geen horizontale overflow.
 */

body.pb-template-front-page {
    overflow-x: hidden;
}

body.pb-template-front-page .kb-block.nuke-v10-master,
body.pb-template-front-page .kb-inner,
body.pb-template-front-page .pb-vokk-wrap,
body.pb-template-front-page .pb-hero-inner,
body.pb-template-front-page .pb-hero-content,
body.pb-template-front-page .pb-hero-visual,
body.pb-template-front-page .pb-hero-tiles-stack,
body.pb-template-front-page .pb-vokk-benefits,
body.pb-template-front-page .pb-vokk-service-grid,
body.pb-template-front-page .pb-vokk-trust-box,
body.pb-template-front-page .pb-vokk-process-grid {
    min-width: 0;
}

/*
 * AFBEELDINGEN BLIJVEN ALTIJD ZICHTBAAR
 */

body.pb-template-front-page .pb-hero-bg-container,
body.pb-template-front-page .pb-hero-bg-container img,
body.pb-template-front-page .pb-service-bg {
    visibility: visible !important;
}

body.pb-template-front-page .pb-hero-bg-container img,
body.pb-template-front-page .pb-service-bg {
    object-fit: cover !important;
}


/* =========================================================
   ULTRAWIDE
   1600px en groter
========================================================= */

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

    body.pb-template-front-page .kb-inner,
    body.pb-template-front-page .pb-vokk-wrap {
        width: min(100% - 96px, 1500px) !important;
        max-width: 1500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.pb-template-front-page .kb-inner.pb-hero-inner {
        min-height: 760px !important;
    }

    body.pb-template-front-page .pb-hero-content {
        max-width: 660px !important;
    }

    body.pb-template-front-page .pb-hero-title {
        max-width: 660px !important;
    }

    body.pb-template-front-page .pb-hero-bg-container {
        width: 68% !important;
    }

    body.pb-template-front-page .pb-vokk-service-grid {
        gap: 28px !important;
    }
}


/* =========================================================
   LAPTOP / KLEINE DESKTOP
   1025 - 1599px
========================================================= */

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

    body.pb-template-front-page .kb-inner,
    body.pb-template-front-page .pb-vokk-wrap {
        width: min(100% - 64px, 1320px) !important;
        max-width: 1320px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.pb-template-front-page .pb-hero-content {
        max-width: 580px !important;
    }

    body.pb-template-front-page .pb-hero-bg-container {
        width: 72% !important;
    }

    body.pb-template-front-page .pb-hero-tiles-stack {
        max-width: 360px !important;
    }
}


/* =========================================================
   TABLET LANDSCAPE
   769 - 1024px
========================================================= */

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

    body.pb-template-front-page .kb-inner,
    body.pb-template-front-page .pb-vokk-wrap {
        width: calc(100% - 48px) !important;
        max-width: 960px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /*
     * HERO
     */

    body.pb-template-front-page .kb-block.nuke-v10-master {
        min-height: auto !important;
        overflow: hidden !important;
    }

    body.pb-template-front-page .kb-inner.pb-hero-inner {
        min-height: 680px !important;
        padding-top: 130px !important;
        padding-bottom: 72px !important;
    }

    body.pb-template-front-page .pb-hero-bg-container {
        display: block !important;
        width: 64% !important;
        left: auto !important;
        right: 0 !important;
        opacity: 1 !important;
    }

    body.pb-template-front-page .pb-hero-bg-container img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    body.pb-template-front-page .pb-hero-content {
        width: 54% !important;
        max-width: 520px !important;
        position: relative !important;
        z-index: 5 !important;
    }

    body.pb-template-front-page .pb-hero-title {
        font-size: clamp(42px, 5vw, 58px) !important;
        line-height: 1.02 !important;
    }

    body.pb-template-front-page .pb-hero-tiles-stack {
        width: 310px !important;
        max-width: 32vw !important;
        right: 24px !important;
    }

    body.pb-template-front-page .pb-hero-tile {
        width: 100% !important;
        min-width: 0 !important;
    }

    /*
     * VOORDELEN
     */

    body.pb-template-front-page .pb-vokk-benefits {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 32px 24px !important;
    }

    /*
     * DIENSTEN
     */

    body.pb-template-front-page .pb-vokk-service-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }

    body.pb-template-front-page .pb-vokk-service-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    /*
     * TRUST
     */

    body.pb-template-front-page .pb-vokk-trust-box {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

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

    /*
     * PROCES
     */

    body.pb-template-front-page .pb-vokk-process-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 40px 32px !important;
    }

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


/* =========================================================
   TABLET PORTRAIT
   601 - 768px
========================================================= */

@media screen and (min-width: 601px) and (max-width: 768px) {

    body.pb-template-front-page .kb-inner,
    body.pb-template-front-page .pb-vokk-wrap {
        width: calc(100% - 40px) !important;
        max-width: 720px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /*
     * HERO WORDT EEN NETTE VERTICALE COMPOSITIE
     */

    body.pb-template-front-page .kb-block.nuke-v10-master {
        min-height: auto !important;
    }

    body.pb-template-front-page .kb-inner.pb-hero-inner {
        min-height: auto !important;
        padding-top: 120px !important;
        padding-bottom: 56px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.pb-template-front-page .pb-hero-bg-container {
        display: block !important;
        width: 100% !important;
        height: 620px !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: auto !important;
        opacity: 1 !important;
    }

    body.pb-template-front-page .pb-hero-bg-container img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-position: center center !important;
    }

    body.pb-template-front-page .pb-hero-bg-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(11,15,23,.55) 0%,
                rgba(11,15,23,.76) 48%,
                #0b0f17 95%
            ) !important;
    }

    body.pb-template-front-page .pb-hero-content {
        width: 100% !important;
        max-width: 580px !important;
        position: relative !important;
        z-index: 5 !important;
    }

    body.pb-template-front-page .pb-hero-title {
        max-width: 560px !important;
        font-size: clamp(44px, 8vw, 60px) !important;
        line-height: 1.02 !important;
    }

    body.pb-template-front-page .pb-hero-text {
        max-width: 520px !important;
    }

    body.pb-template-front-page .pb-hero-tiles-stack {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;

        width: 100% !important;
        max-width: none !important;

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

        margin-top: 40px !important;
        z-index: 6 !important;
    }

    body.pb-template-front-page .pb-hero-tile {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 150px !important;
        padding: 20px 16px !important;
    }

    /*
     * BENEFITS
     */

    body.pb-template-front-page .pb-vokk-benefits {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 28px 20px !important;
    }

    /*
     * SERVICES
     */

    body.pb-template-front-page .pb-vokk-service-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

    body.pb-template-front-page .pb-vokk-service-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 360px !important;
    }

    /*
     * TRUST
     */

    body.pb-template-front-page .pb-vokk-trust-box {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    /*
     * PROCESS
     */

    body.pb-template-front-page .pb-vokk-process-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 36px 24px !important;
    }

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


/* =========================================================
   MOBIEL
   maximaal 600px
========================================================= */

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

    body.pb-template-front-page .kb-inner,
    body.pb-template-front-page .pb-vokk-wrap {
        width: calc(100% - 32px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /*
     * HERO
     */

    body.pb-template-front-page .kb-block.nuke-v10-master {
        min-height: auto !important;
        overflow: hidden !important;
    }

    body.pb-template-front-page .kb-inner.pb-hero-inner {
        width: calc(100% - 32px) !important;
        min-height: auto !important;

        padding-top: 100px !important;
        padding-right: 0 !important;
        padding-bottom: 48px !important;
        padding-left: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /*
     * Foto blijft zichtbaar achter bovenste hero.
     */

    body.pb-template-front-page .pb-hero-bg-container {
        display: block !important;
        visibility: visible !important;

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

        width: 100% !important;
        height: 620px !important;

        opacity: 1 !important;
        z-index: 1 !important;
    }

    body.pb-template-front-page .pb-hero-bg-container img {
        display: block !important;
        visibility: visible !important;

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

        object-fit: cover !important;
        object-position: 64% center !important;
    }

    body.pb-template-front-page .pb-hero-bg-overlay {
        display: block !important;

        background:
            linear-gradient(
                180deg,
                rgba(11,15,23,.45) 0%,
                rgba(11,15,23,.70) 44%,
                rgba(11,15,23,.96) 76%,
                #0b0f17 100%
            ) !important;
    }

    body.pb-template-front-page .pb-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        position: relative !important;
        z-index: 5 !important;
    }

    body.pb-template-front-page .pb-hero-subtitle {
        max-width: 100% !important;
    }

    body.pb-template-front-page .pb-hero-title {
        max-width: 100% !important;

        font-size: clamp(38px, 11vw, 50px) !important;
        line-height: 1.03 !important;
        letter-spacing: -1.5px !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    body.pb-template-front-page .pb-hero-text {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 15px !important;
        line-height: 1.75 !important;
    }

    body.pb-template-front-page .nuke-main-button {
        width: auto !important;
        max-width: 100% !important;
    }

    /*
     * Hero cards niet meer bovenop de tekst.
     */

    body.pb-template-front-page .pb-hero-tiles-stack {
        position: relative !important;

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

        transform: none !important;
        animation: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-top: 36px !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;

        z-index: 6 !important;
    }

    body.pb-template-front-page .pb-hero-tile {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 112px !important;

        margin: 0 !important;
        padding: 18px 20px !important;

        transform: none !important;
    }

    /*
     * SECTIE HEADERS
     */

    body.pb-template-front-page .pb-vokk-heading {
        max-width: 100% !important;
    }

    /*
     * BENEFITS
     * 2 per rij zodat het compact blijft.
     */

    body.pb-template-front-page .pb-vokk-benefits {
        width: 100% !important;

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

        gap: 28px 18px !important;

        overflow: visible !important;
    }

    body.pb-template-front-page .pb-vokk-benefit {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
    }

    /*
     * DIENSTEN
     * Grote foto-card, 1 per rij.
     */

    body.pb-template-front-page .pb-vokk-service-grid {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 18px !important;

        overflow: visible !important;
    }

    body.pb-template-front-page .pb-vokk-service-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        min-height: 360px !important;

        margin: 0 !important;
    }

    body.pb-template-front-page .pb-vokk-service-card .pb-service-bg {
        display: block !important;
        visibility: visible !important;

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

        object-fit: cover !important;
    }

    /*
     * TRUST / REVIEWS
     */

    body.pb-template-front-page .pb-vokk-trust-box {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 14px !important;

        overflow: visible !important;
    }

    body.pb-template-front-page .pb-vokk-trust-item {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
    }

    /*
     * PROCES
     */

    body.pb-template-front-page .pb-vokk-process-grid {
        width: 100% !important;
        max-width: 420px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 34px !important;

        overflow: visible !important;
    }

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

    body.pb-template-front-page .pb-vokk-process-item {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 360px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* =========================================================
   ZEER SMALLE TELEFOONS
   maximaal 380px
========================================================= */

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

    body.pb-template-front-page .kb-inner,
    body.pb-template-front-page .pb-vokk-wrap,
    body.pb-template-front-page .kb-inner.pb-hero-inner {
        width: calc(100% - 28px) !important;
    }

    body.pb-template-front-page .pb-hero-title {
        font-size: 36px !important;
        line-height: 1.04 !important;
        letter-spacing: -1px !important;
    }

    body.pb-template-front-page .pb-hero-text {
        font-size: 14px !important;
    }

    body.pb-template-front-page .nuke-main-button {
        width: 100% !important;
        justify-content: center !important;
    }

    body.pb-template-front-page .pb-vokk-benefits {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   MOBIEL LANDSCAPE
========================================================= */

@media screen and (max-height: 600px) and (orientation: landscape) and (max-width: 1024px) {

    body.pb-template-front-page .kb-inner.pb-hero-inner {
        padding-top: 90px !important;
    }

    body.pb-template-front-page .pb-hero-bg-container {
        height: 100% !important;
        min-height: 600px !important;
    }

    body.pb-template-front-page .pb-hero-title {
        font-size: clamp(36px, 6vw, 48px) !important;
    }

    body.pb-template-front-page .pb-hero-tiles-stack {
        position: relative !important;

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

        width: 100% !important;
        max-width: 100% !important;

        transform: none !important;

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

        margin-top: 30px !important;
    }

    body.pb-template-front-page .pb-hero-tile {
        width: 100% !important;
        height: auto !important;
        min-height: 118px !important;
    }
}


/* =========================================================
   EINDE PB HOMEPAGE RESPONSIVE V1
========================================================= */

/* ============================================================
   PB FOOTER RESPONSIVE V2
   Echte footer.php structuur
   ============================================================ */

.kb-block-agencyfooter-block,
.kb-block-agencyfooter-block *,
.kb-block-agencyfooter-block *::before,
.kb-block-agencyfooter-block *::after {
    box-sizing: border-box;
}

.kb-block-agencyfooter-block {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.kb-block-agencyfooter-block .kb-block-inner {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

.kb-block-agencyfooter-block .agencyfooter-block-footer,
.kb-block-agencyfooter-block .agencyfooter-block-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.kb-block-agencyfooter-block .agencyfooter-block-grid > div {
    min-width: 0;
}

.kb-block-agencyfooter-block .agencyfooter-block-grid p,
.kb-block-agencyfooter-block .agencyfooter-block-grid h4,
.kb-block-agencyfooter-block .agencyfooter-block-grid ul,
.kb-block-agencyfooter-block .agencyfooter-block-grid li,
.kb-block-agencyfooter-block .agencyfooter-block-grid a {
    max-width: 100%;
    min-width: 0;
}

.kb-block-agencyfooter-block .agencyfooter-block-grid ul {
    padding-left: 0;
}

.kb-block-agencyfooter-block .agencyfooter-block-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.kb-block-agencyfooter-block .agencyfooter-block-bottom {
    width: 100%;
    max-width: 100%;
}


/* ============================================================
   ULTRAWIDE
   >= 1600px
   ============================================================ */

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

    .kb-block-agencyfooter-block .kb-block-inner {
        max-width: 1320px !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    .kb-block-agencyfooter-block .agencyfooter-block-grid {
        display: grid !important;

        grid-template-columns:
            minmax(260px, 1.5fr)
            minmax(150px, .8fr)
            minmax(150px, .8fr)
            minmax(170px, .9fr) !important;

        gap: 44px clamp(48px, 5vw, 90px) !important;
    }
}


/* ============================================================
   DESKTOP / LAPTOP
   1025 - 1599px
   ============================================================ */

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

    .kb-block-agencyfooter-block .kb-block-inner {
        max-width: 1180px !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    .kb-block-agencyfooter-block .agencyfooter-block-grid {
        display: grid !important;

        grid-template-columns:
            minmax(220px, 1.35fr)
            minmax(130px, .8fr)
            minmax(130px, .8fr)
            minmax(150px, .9fr) !important;

        gap: 40px clamp(30px, 4vw, 64px) !important;
    }
}


/* ============================================================
   TABLET LIGGEND
   769 - 1024px
   ============================================================ */

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

    .kb-block-agencyfooter-block .kb-block-inner {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    .kb-block-agencyfooter-block .agencyfooter-block-grid {
        display: grid !important;

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

        gap: 42px 32px !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(4) {
        grid-column: 2 / 4 !important;
    }

    .kb-block-agencyfooter-block .agencyfooter-block-social {
        gap: 10px !important;
        margin-top: 22px !important;
    }

    .kb-block-agencyfooter-block .agencyfooter-block-bottom {
        margin-top: 46px !important;
    }
}


/* ============================================================
   TABLET STAAND
   601 - 768px
   ============================================================ */

@media screen and (min-width: 601px) and (max-width: 768px) {

    .kb-block-agencyfooter-block .kb-block-inner {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    .kb-block-agencyfooter-block .agencyfooter-block-grid {
        display: grid !important;

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

        gap: 38px 32px !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:first-child {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 500px !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(4) {
        grid-column: 1 / -1 !important;
    }

    .kb-block-agencyfooter-block .agencyfooter-block-social {
        gap: 10px !important;
        margin-top: 22px !important;
    }

    .kb-block-agencyfooter-block .agencyfooter-block-bottom {
        margin-top: 44px !important;
        padding-top: 24px !important;
        text-align: center !important;
    }
}


/* ============================================================
   MOBIEL
   381 - 600px
   ============================================================ */

@media screen and (min-width: 381px) and (max-width: 600px) {

    .kb-block-agencyfooter-block {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .kb-block-agencyfooter-block .kb-block-inner {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding:
            48px
            clamp(20px, 6vw, 26px)
            28px !important;
    }

    .kb-block-agencyfooter-block .agencyfooter-block-grid {
        display: grid !important;

        width: 100% !important;

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

        column-gap: clamp(28px, 9vw, 44px) !important;
        row-gap: 38px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /*
     * Intro bovenaan volledige breedte
     */
    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:first-child {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        max-width: 320px !important;
    }

    /*
     * Diensten + Service naast elkaar
     */
    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(2),
    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(3) {
        grid-column: auto !important;

        width: 100% !important;
        min-width: 0 !important;
    }

    /*
     * Informatie volledige breedte eronder
     */
    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(4) {
        grid-column: 1 / -1 !important;

        width: 100% !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:first-child p {
        max-width: 310px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid h4 {
        margin-top: 0 !important;
        margin-bottom: 16px !important;

        font-size: 15px !important;
        line-height: 1.25 !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid ul {
        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid li {
        width: 100% !important;

        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid a {
        display: inline-block !important;

        max-width: 100% !important;

        font-size: 13px !important;
        line-height: 1.45 !important;

        white-space: normal !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    .kb-block-agencyfooter-block .agencyfooter-block-social {
        display: flex !important;
        flex-wrap: wrap !important;

        gap: 10px !important;

        margin-top: 22px !important;
    }

    .kb-block-agencyfooter-block .agencyfooter-social-icon {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 40px !important;

        width: 40px !important;
        height: 40px !important;

        margin: 0 !important;
    }

    .kb-block-agencyfooter-block .agencyfooter-block-bottom {
        width: 100% !important;

        margin-top: 44px !important;
        padding-top: 24px !important;

        text-align: center !important;

        font-size: 12px !important;
        line-height: 1.55 !important;
    }
}


/* ============================================================
   ZEER SMALLE MOBIEL
   <= 380px
   ============================================================ */

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

    .kb-block-agencyfooter-block .kb-block-inner {
        width: 100% !important;

        margin: 0 !important;

        padding:
            44px
            18px
            26px !important;
    }

    .kb-block-agencyfooter-block .agencyfooter-block-grid {
        display: grid !important;

        width: 100% !important;

        grid-template-columns: 1fr !important;

        gap: 30px !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:first-child,
    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(2),
    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(3),
    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(4) {
        grid-column: 1 !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid h4 {
        margin-bottom: 14px !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid ul {
        margin: 0 !important;
        padding: 0 !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid li {
        margin-bottom: 10px !important;
    }

    .kb-block-agencyfooter-block .agencyfooter-block-bottom {
        margin-top: 36px !important;
    }
}


/* ============================================================
   MOBIEL LANDSCAPE
   ============================================================ */

@media screen
and (orientation: landscape)
and (max-height: 600px)
and (max-width: 1024px) {

    .kb-block-agencyfooter-block .kb-block-inner {
        padding:
            36px
            26px
            24px !important;
    }

    .kb-block-agencyfooter-block .agencyfooter-block-grid {
        display: grid !important;

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

        gap: 24px !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:first-child,
    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(2),
    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(3),
    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(4) {
        grid-column: auto !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid h4 {
        font-size: 14px !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid a {
        font-size: 12px !important;
    }

    .kb-block-agencyfooter-block .agencyfooter-block-bottom {
        margin-top: 30px !important;
    }
}


/* ============================================================
   EINDE PB FOOTER RESPONSIVE V2
   ============================================================ */

/* ============================================================
   PB FOOTER MOBILE V8
   ============================================================ */

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

    /*
     * ALGEMENE MOBIELE FOOTER
     */

    .kb-block-agencyfooter-block {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .kb-block-agencyfooter-block .kb-block-inner {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding:
            46px
            22px
            28px !important;
    }

    .kb-block-agencyfooter-block .agencyfooter-block-grid {
        display: grid !important;

        width: 100% !important;
        max-width: 100% !important;

        grid-template-columns: 1fr !important;

        gap: 38px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div {
        grid-column: 1 !important;
        min-width: 0 !important;
    }


    /*
     * INTRO LINKS
     */

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:first-child {
        width: 100% !important;
        max-width: 340px !important;

        margin-left: 0 !important;
        margin-right: auto !important;

        text-align: left !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:first-child p {
        width: 100% !important;
        max-width: 330px !important;

        margin: 0 !important;

        text-align: left !important;

        font-size: 14px !important;
        line-height: 1.65 !important;
    }


    /*
     * SOCIALS BLIJVEN LINKS
     */

    .kb-block-agencyfooter-block
    .agencyfooter-block-social {
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: wrap !important;

        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;

        gap: 10px !important;

        margin:
            20px
            0
            0 !important;

        padding: 0 !important;
    }


    /*
     * SOCIAL KNOPPEN
     */

    .kb-block-agencyfooter-block
    .agencyfooter-social-icon {
        position: relative !important;

        display: block !important;

        flex:
            0
            0
            40px !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        line-height: 40px !important;
        text-align: center !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-social-icon > i,

    .kb-block-agencyfooter-block
    .agencyfooter-social-icon > .fa-brands {
        position: absolute !important;

        top: 50% !important;
        left: 50% !important;

        right: auto !important;
        bottom: auto !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        transform:
            translate(-50%, -50%) !important;

        font-size: 15px !important;
        line-height: 1 !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-social-icon > i::before,

    .kb-block-agencyfooter-block
    .agencyfooter-social-icon > .fa-brands::before {
        position: static !important;

        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        line-height: 1 !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-social-icon > svg {
        position: absolute !important;

        top: 50% !important;
        left: 50% !important;

        width: 16px !important;
        height: 16px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform:
            translate(-50%, -50%) !important;
    }


    /*
     * DIENSTEN / SERVICE / INFORMATIE
     *
     * 220px brede nette kolom.
     * Blok wordt gecentreerd en daarna bewust
     * 18px naar rechts geschoven.
     */

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(2),

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(3),

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(4) {
        width: min(100%, 190px) !important;
        max-width: 190px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        transform: translateX(54px) !important;

        text-align: left !important;
    }


    /*
     * KOPPEN STRAK LINKS
     */

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(n+2) h4 {
        width: 100% !important;

        margin:
            0
            0
            15px !important;

        padding: 0 !important;

        text-align: left !important;

        font-size: 16px !important;
        line-height: 1.25 !important;
    }


    /*
     * LIJSTEN STRAK LINKS
     */

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(n+2) ul {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;

        text-align: left !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(n+2) li {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin:
            0
            0
            11px !important;

        padding: 0 !important;

        text-align: left !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(n+2) li:last-child {
        margin-bottom: 0 !important;
    }

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(n+2) li a {
        display: inline-block !important;

        width: auto !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    /*
     * COPYRIGHT
     */

    .kb-block-agencyfooter-block
    .agencyfooter-block-bottom {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 40px !important;

        padding:
            22px
            0
            0 !important;

        text-align: center !important;

        font-size: 12px !important;
        line-height: 1.55 !important;
    }
}


/* ============================================================
   ZEER SMALLE TELEFOONS
   ============================================================ */

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

    .kb-block-agencyfooter-block .kb-block-inner {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    /*
     * Kleinere correctie omdat viewport smaller is.
     */

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(2),

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(3),

    .kb-block-agencyfooter-block
    .agencyfooter-block-grid > div:nth-child(4) {
        width: min(100%, 180px) !important;
        max-width: 180px !important;

        transform: translateX(16px) !important;
    }
}


/* ============================================================
   EINDE PB FOOTER MOBILE V8
   ============================================================ */

/* ============================================================
   PB CONTENT HERO RESPONSIVE V2
   ============================================================ */

/*
 * Gemeenschappelijke veiligheid.
 */

.pb-content-hero,
.pb-content-hero * {
    box-sizing: border-box;
}

.pb-content-hero {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.pb-content-hero-image {
    display: block;
}


/* ============================================================
   TABLET STAAND
   601 - 900
   Foto blijft achtergrond, maar hero wordt rustiger.
   ============================================================ */

@media screen
and (min-width: 601px)
and (max-width: 900px)
and (orientation: portrait) {

    .pb-content-hero {
        min-height: 620px !important;
    }

    .pb-content-hero-image {
        position: absolute !important;

        inset: 0 !important;

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

        max-width: none !important;

        object-fit: cover !important;
        object-position: center center !important;

        margin: 0 !important;
    }

    .pb-content-hero .vokk-services-container,
    .pb-content-hero .vokk-about-container,
    .pb-content-hero .vokk-projects-container,
    .pb-content-hero .vokk-reviews-container,
    .pb-content-hero .vokk-contact-container,
    .pb-content-hero .vokk-detail-container {
        position: relative !important;
        z-index: 3 !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 620px !important;

        margin: 0 auto !important;

        padding:
            140px
            44px
            72px !important;
    }

    .pb-content-hero h1 {
        max-width: 570px !important;

        font-size:
            clamp(42px, 7vw, 58px) !important;

        line-height: 1.03 !important;
    }

    .pb-content-hero p {
        max-width: 520px !important;
    }
}


/* ============================================================
   MOBIEL STAAND
   <= 600
   TEKST BOVEN + VOLLEDIGE FOTO ONDER
   ============================================================ */

@media screen
and (max-width: 600px)
and (orientation: portrait) {

    /*
     * Complete mobiele hero als verticale layout.
     */
    .pb-content-hero {
        position: relative !important;

        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background:
            var(--pb-dark, #061426) !important;
    }


    /*
     * Oude desktop overlays uitschakelen.
     * De tekst staat nu zelf op een donker vlak.
     */
    .pb-content-hero::before,
    .pb-content-hero::after {
        display: none !important;
        content: none !important;
    }


    /*
     * ==========================================
     * TEKSTBLOK EERST
     * ==========================================
     */
    .pb-content-hero .vokk-services-container,
    .pb-content-hero .vokk-about-container,
    .pb-content-hero .vokk-projects-container,
    .pb-content-hero .vokk-reviews-container,
    .pb-content-hero .vokk-contact-container,
    .pb-content-hero .vokk-detail-container {

        position: relative !important;

        inset: auto !important;

        order: 1 !important;

        z-index: 2 !important;

        display: block !important;

        width: 100% !important;
        max-width: none !important;

        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;

        /*
         * Bovenruimte voor vaste navigatie.
         */
        padding:
            92px
            22px
            40px !important;

        background:
            var(--pb-dark, #061426) !important;

        box-sizing: border-box !important;
    }


    /*
     * Hero-content zelf.
     */
    .pb-content-hero .vokk-services-hero-inner,
    .pb-content-hero .vokk-about-hero-content,
    .pb-content-hero .vokk-projects-hero-content,
    .pb-content-hero .vokk-reviews-hero-content,
    .pb-content-hero .vokk-contact-hero-content,
    .pb-content-hero .vokk-detail-hero-content {

        position: relative !important;

        inset: auto !important;

        display: block !important;

        width: 100% !important;
        max-width: 360px !important;

        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }


    /*
     * Kleine blauwe bovenregel / eyebrow.
     */
    .pb-content-hero [class*="eyebrow"] {
        display: block !important;

        width: auto !important;
        max-width: 100% !important;

        margin:
            0
            0
            12px !important;

        padding: 0 !important;
    }


    /*
     * Titel.
     */
    .pb-content-hero h1 {
        display: block !important;

        width: 100% !important;
        max-width: 360px !important;

        margin:
            0
            0
            18px !important;

        padding: 0 !important;

        font-size:
            clamp(34px, 9vw, 44px) !important;

        line-height: 1.04 !important;

        letter-spacing:
            -1.1px !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    /*
     * Introductietekst.
     */
    .pb-content-hero p {
        display: block !important;

        width: 100% !important;
        max-width: 350px !important;

        margin:
            0
            0
            22px !important;

        padding: 0 !important;

        font-size: 14px !important;
        line-height: 1.65 !important;
    }


    /*
     * ==========================================
     * FOTO ONDER DE TEKST
     * ==========================================
     *
     * Geen vaste hoogte.
     * Geen cover.
     * Geen crop.
     * Afbeelding behoudt originele verhouding.
     */
    .pb-content-hero-image {

        /*
         * Dit element kan een achtergrond-DIV zijn.
         * Daarom bewust een echte hoogte/verhouding geven.
         */

        position: relative !important;

        inset: auto !important;

        order: 2 !important;

        z-index: 1 !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        /*
         * Mooie brede hero-verhouding op mobiel.
         * Hierdoor klapt een background-element niet meer naar 0px.
         */
        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 16 / 9 !important;

        margin: 0 !important;
        padding: 0 !important;

        /*
         * Voor background-image hero's:
         * volledige afbeelding zichtbaar, dus GEEN crop.
         */
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        /*
         * Voor het geval dit op een andere pagina wel een IMG is.
         */
        object-fit: contain !important;
        object-position: center center !important;

        transform: none !important;

        border: 0 !important;

        /*
         * Zwarte/donkere reststroken sluiten aan bij hero.
         */
        background-color:
            var(--pb-dark, #061426) !important;
    }


    /*
     * Geen wit gat tussen tekst en foto.
     */
    .pb-content-hero .vokk-services-container:last-child,
    .pb-content-hero .vokk-about-container:last-child,
    .pb-content-hero .vokk-projects-container:last-child,
    .pb-content-hero .vokk-reviews-container:last-child,
    .pb-content-hero .vokk-contact-container:last-child,
    .pb-content-hero .vokk-detail-container:last-child {
        margin-bottom: 0 !important;
    }


    /*
     * Hero buttons veilig binnen viewport.
     */
    .pb-content-hero a[class*="hero"],
    .pb-content-hero button {
        max-width: 100% !important;
    }
}


/* ============================================================
   KLEIN MOBIEL
   <= 380
   ============================================================ */

@media screen
and (max-width: 380px)
and (orientation: portrait) {

    .pb-content-hero .vokk-services-container,
    .pb-content-hero .vokk-about-container,
    .pb-content-hero .vokk-projects-container,
    .pb-content-hero .vokk-reviews-container,
    .pb-content-hero .vokk-contact-container,
    .pb-content-hero .vokk-detail-container {
        padding:
            86px
            18px
            36px !important;
    }

    .pb-content-hero h1 {
        width: 100% !important;
        max-width: 320px !important;

        font-size:
            clamp(31px, 9.5vw, 39px) !important;

        line-height: 1.04 !important;
    }

    .pb-content-hero p {
        width: 100% !important;
        max-width: 315px !important;

        font-size: 13px !important;
        line-height: 1.65 !important;
    }

    /*
     * Ook op smalle telefoons:
     * originele verhouding van afbeelding behouden.
     */
    .pb-content-hero-image {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 16 / 9 !important;

        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        object-fit: contain !important;
        object-position: center center !important;

        background-color:
            var(--pb-dark, #061426) !important;
    }
}


/* ============================================================
   MOBIEL LIGGEND
   FOTO LINKS + TEKST RECHTS
   ============================================================ */

@media screen
and (max-width: 900px)
and (orientation: landscape)
and (max-height: 600px) {

    .pb-content-hero {
        display: grid !important;

        grid-template-columns:
            minmax(240px, 42%)
            minmax(0, 1fr) !important;

        min-height: 100svh !important;

        background:
            var(--pb-dark, #061426) !important;
    }


    /*
     * Foto links.
     */

    .pb-content-hero-image {
        position: relative !important;

        inset: auto !important;

        grid-column: 1 !important;
        grid-row: 1 !important;

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

        min-height: 100svh !important;

        object-fit: cover !important;
        object-position: center center !important;

        margin: 0 !important;
    }


    /*
     * Tekst rechts.
     */

    .pb-content-hero .vokk-services-container,
    .pb-content-hero .vokk-about-container,
    .pb-content-hero .vokk-projects-container,
    .pb-content-hero .vokk-reviews-container,
    .pb-content-hero .vokk-contact-container,
    .pb-content-hero .vokk-detail-container {
        position: relative !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        display: flex !important;

        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 100svh !important;

        margin: 0 !important;

        padding:
            82px
            30px
            30px !important;

        background:
            var(--pb-dark, #061426) !important;
    }

    .pb-content-hero .vokk-services-hero-inner,
    .pb-content-hero .vokk-about-hero-content,
    .pb-content-hero .vokk-projects-hero-content,
    .pb-content-hero .vokk-reviews-hero-content,
    .pb-content-hero .vokk-contact-hero-content,
    .pb-content-hero .vokk-detail-hero-content {
        width: 100% !important;
        max-width: 520px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .pb-content-hero h1 {
        margin-bottom: 14px !important;

        font-size:
            clamp(28px, 5vw, 40px) !important;

        line-height: 1.03 !important;
    }

    .pb-content-hero p {
        max-width: 480px !important;

        margin-bottom: 18px !important;

        font-size: 13px !important;
        line-height: 1.55 !important;
    }
}


/* ============================================================
   TABLET LIGGEND
   901 - 1100
   Bestaande desktopachtige hero behouden.
   ============================================================ */

@media screen
and (min-width: 901px)
and (max-width: 1100px) {

    .pb-content-hero {
        min-height: 560px !important;
    }

    .pb-content-hero-image {
        position: absolute !important;

        inset: 0 !important;

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

        object-fit: cover !important;
        object-position: center center !important;
    }

    .pb-content-hero .vokk-services-container,
    .pb-content-hero .vokk-about-container,
    .pb-content-hero .vokk-projects-container,
    .pb-content-hero .vokk-reviews-container,
    .pb-content-hero .vokk-contact-container,
    .pb-content-hero .vokk-detail-container {
        position: relative !important;
        z-index: 3 !important;

        min-height: 560px !important;

        padding-top: 130px !important;
        padding-bottom: 60px !important;
    }
}


/* ============================================================
   DESKTOP / LAPTOP / ULTRAWIDE
   Geen overrides.
   Bestaande ontwerp blijft leidend.
   ============================================================ */


/* ============================================================
   EINDE PB CONTENT HERO RESPONSIVE V2
   ============================================================ */

/* ============================================================
   PB MOBILE HERO AFTER V1
   ============================================================ */


/*
 * STANDAARD / DESKTOP
 *
 * Deze afbeelding bestaat wel in HTML,
 * maar is volledig verborgen.
 *
 * De bestaande desktophero wordt dus NIET veranderd.
 */

.pb-mobile-hero-after {
    display: none;
}


/* ============================================================
   ALLEEN MOBIEL
   ============================================================ */

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

    /*
     * Mobiele hero zelf wordt puur tekstvlak.
     *
     * Dit overschrijft uitsluitend op mobiel eventuele
     * achtergrondfoto's en desktop overlays.
     */

    .pb-content-hero {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background:
            var(--pb-dark, #061426) !important;

        background-image: none !important;
    }


    /*
     * Originele hero-img alleen op mobiel verbergen.
     *
     * Desktop blijft hem gewoon gebruiken.
     */

    .pb-content-hero > .pb-content-hero-image {
        display: none !important;
    }


    /*
     * Oude gradient/overlay niet nodig op mobiel.
     */

    .pb-content-hero::before,
    .pb-content-hero::after {
        display: none !important;
        content: none !important;
    }


    /*
     * Tekstcontainer mobiel.
     */

    .pb-content-hero .vokk-services-container,
    .pb-content-hero .vokk-about-container,
    .pb-content-hero .vokk-projects-container,
    .pb-content-hero .vokk-reviews-container,
    .pb-content-hero .vokk-contact-container,
    .pb-content-hero .vokk-detail-container {

        position: relative !important;

        inset: auto !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;

        padding:
            92px
            22px
            40px !important;

        background:
            var(--pb-dark, #061426) !important;

        box-sizing: border-box !important;
    }


    /*
     * Eventuele oude absolute instellingen uit hero CSS
     * neutraliseren.
     */

    .pb-content-hero .vokk-services-hero-inner,
    .pb-content-hero .vokk-about-hero-content,
    .pb-content-hero .vokk-projects-hero-content,
    .pb-content-hero .vokk-reviews-hero-content,
    .pb-content-hero .vokk-contact-hero-content,
    .pb-content-hero .vokk-detail-hero-content {

        position: relative !important;

        inset: auto !important;

        width: 100% !important;
        max-width: 360px !important;

        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }


    /*
     * Titel.
     */

    .pb-content-hero h1 {
        width: 100% !important;
        max-width: 360px !important;

        margin:
            0
            0
            18px !important;

        font-size:
            clamp(34px, 9vw, 44px) !important;

        line-height: 1.04 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    /*
     * Intro.
     */

    .pb-content-hero p {
        width: 100% !important;
        max-width: 350px !important;

        margin-bottom: 0 !important;

        font-size: 14px !important;
        line-height: 1.65 !important;
    }


    /*
     * ==========================================
     * LOSSE MOBIELE HERO-FOTO
     * ==========================================
     *
     * Staat fysiek BUITEN de hero.
     * Dus:
     *
     * HERO TEKST
     * ↓
     * FOTO
     * ↓
     * VOLGENDE SECTIE
     */

    .pb-mobile-hero-after {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
        object-position: center center !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;

        border: 0 !important;
    }
}


/* ============================================================
   ZEER KLEIN MOBIEL
   ============================================================ */

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

    .pb-content-hero .vokk-services-container,
    .pb-content-hero .vokk-about-container,
    .pb-content-hero .vokk-projects-container,
    .pb-content-hero .vokk-reviews-container,
    .pb-content-hero .vokk-contact-container,
    .pb-content-hero .vokk-detail-container {

        padding:
            86px
            18px
            34px !important;
    }


    .pb-content-hero h1 {
        max-width: 320px !important;

        font-size:
            clamp(31px, 9.5vw, 39px) !important;
    }


    .pb-content-hero p {
        max-width: 315px !important;

        font-size: 13px !important;
    }
}


/* ============================================================
   EINDE PB MOBILE HERO AFTER V1
   ============================================================ */

/* ============================================================
   PB MOBILE HERO SPACING V2
   ============================================================ */

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

    /*
     * Losse mobiele hero-afbeelding.
     * Echt onderdeel van documentflow.
     */
    .pb-mobile-hero-after {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
        object-position: center center !important;

        opacity: 1 !important;
        visibility: visible !important;

        z-index: 1 !important;

        float: none !important;
        clear: both !important;
    }


    /*
     * Zorg dat de volgende sectie ALTIJD onder de foto begint.
     */

    .pb-mobile-hero-after + section,
    .pb-mobile-hero-after + div,
    .pb-mobile-hero-after + article {
        position: relative !important;

        z-index: 2 !important;

        clear: both !important;

        margin-top: 0 !important;
    }


    /*
     * Specifiek voor de bekende contentpagina's:
     * eerste contentsectie krijgt wat extra ademruimte.
     */

    .vokk-services-page .pb-mobile-hero-after + section,
    .vokk-about-page .pb-mobile-hero-after + section,
    .vokk-projects-page .pb-mobile-hero-after + section,
    .vokk-reviews-page .pb-mobile-hero-after + section,
    .vokk-contact-page .pb-mobile-hero-after + section,
    .vokk-detail-page .pb-mobile-hero-after + section {
        padding-top:
            clamp(54px, 14vw, 76px) !important;
    }


    /*
     * Eventuele negatieve marges uit desktoplayout neutraliseren.
     */

    .vokk-services-page section,
    .vokk-about-page section,
    .vokk-projects-page section,
    .vokk-reviews-page section,
    .vokk-contact-page section,
    .vokk-detail-page section {
        transform: none !important;
    }
}

/* ============================================================
   EINDE PB MOBILE HERO SPACING V2
   ============================================================ */

/* ============================================================
   PB MOBILE HERO HEIGHT V3
   ============================================================ */

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

    .pb-mobile-hero-after {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: clamp(250px, 68vw, 285px) !important;
        min-height: 250px !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: cover !important;
        object-position: center center !important;

        opacity: 1 !important;
        visibility: visible !important;
    }
}

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

    .pb-mobile-hero-after {
        height: 245px !important;
        min-height: 245px !important;
    }
}

/* ============================================================
   EINDE PB MOBILE HERO HEIGHT V3
   ============================================================ */

/* ============================================================
   PB GLOBAL TYPOGRAPHY SYSTEM V1
   ============================================================ */

/*
 * ===========================================================
 * BASISLETTERTYPE
 * ===========================================================
 *
 * Eén lettertype over de volledige frontend.
 */

html,
body,
button,
input,
select,
textarea,
option {
    font-family:
        "Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;
}


/*
 * Ook alle headings expliciet Poppins.
 */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:
        "Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-style: normal !important;

    text-wrap: balance;
}


/*
 * ===========================================================
 * H1
 * ===========================================================
 *
 * Pagina/hero hoofdtitel.
 *
 * Bewust hoge specificiteit zodat oude
 * template- en responsive-regels niet meer winnen.
 */

body:not(#pb-typography-specificity) h1,
body:not(#pb-typography-specificity) .pb-hero-title,
body:not(#pb-typography-specificity) .entry-title,
body:not(#pb-typography-specificity) .page-title,
body:not(#pb-typography-specificity) .post-title {

    font-size:
        clamp(20px, 1.8vw, 24px) !important;

    font-weight:
        500 !important;

    line-height:
        1.22 !important;

    letter-spacing:
        -0.25px !important;
}


/*
 * ===========================================================
 * H2
 * ===========================================================
 *
 * Hoofdsectietitels.
 */

body:not(#pb-typography-specificity) h2 {

    font-size:
        clamp(18px, 1.55vw, 21px) !important;

    font-weight:
        500 !important;

    line-height:
        1.28 !important;

    letter-spacing:
        -0.18px !important;
}


/*
 * ===========================================================
 * H3
 * ===========================================================
 *
 * Kaarten, voordelen, processtappen,
 * kleinere contentgroepen.
 */

body:not(#pb-typography-specificity) h3 {

    font-size:
        clamp(16px, 1.25vw, 18px) !important;

    font-weight:
        500 !important;

    line-height:
        1.32 !important;

    letter-spacing:
        -0.1px !important;
}


/*
 * ===========================================================
 * H4
 * ===========================================================
 */

body:not(#pb-typography-specificity) h4 {

    font-size:
        clamp(15px, 1.1vw, 16px) !important;

    font-weight:
        500 !important;

    line-height:
        1.35 !important;

    letter-spacing:
        0 !important;
}


/*
 * ===========================================================
 * H5
 * ===========================================================
 */

body:not(#pb-typography-specificity) h5 {

    font-size:
        14px !important;

    font-weight:
        500 !important;

    line-height:
        1.4 !important;

    letter-spacing:
        0 !important;
}


/*
 * H6 blijft bewust klein.
 */

body:not(#pb-typography-specificity) h6 {

    font-size:
        13px !important;

    font-weight:
        500 !important;

    line-height:
        1.4 !important;
}


/*
 * ===========================================================
 * HOMEPAGE HERO
 * ===========================================================
 *
 * De homepage had nog 68px / weight 800.
 * Hij volgt nu exact dezelfde H1 schaal.
 */

body:not(#pb-typography-specificity)
.pb-hero-title {

    font-size:
        clamp(20px, 1.8vw, 24px) !important;

    font-weight:
        500 !important;

    line-height:
        1.22 !important;

    letter-spacing:
        -0.25px !important;
}


/*
 * ===========================================================
 * CONTENT HERO'S
 * ===========================================================
 *
 * Diensten, Over ons, Projecten,
 * Waardering, Contact en detailpagina's.
 */

body:not(#pb-typography-specificity)
.pb-content-hero h1 {

    font-size:
        clamp(20px, 1.8vw, 24px) !important;

    font-weight:
        500 !important;

    line-height:
        1.22 !important;

    letter-spacing:
        -0.25px !important;
}


/*
 * ===========================================================
 * TABLET
 * ===========================================================
 */

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

    body:not(#pb-typography-specificity) h1,
    body:not(#pb-typography-specificity) .pb-hero-title,
    body:not(#pb-typography-specificity) .entry-title,
    body:not(#pb-typography-specificity) .page-title,
    body:not(#pb-typography-specificity) .post-title,
    body:not(#pb-typography-specificity) .pb-content-hero h1 {

        font-size:
            clamp(19px, 2.5vw, 22px) !important;

        font-weight:
            500 !important;

        line-height:
            1.23 !important;
    }


    body:not(#pb-typography-specificity) h2 {

        font-size:
            clamp(18px, 2.2vw, 20px) !important;

        font-weight:
            500 !important;

        line-height:
            1.28 !important;
    }


    body:not(#pb-typography-specificity) h3 {

        font-size:
            clamp(16px, 1.9vw, 18px) !important;

        font-weight:
            500 !important;
    }


    body:not(#pb-typography-specificity) h4 {

        font-size:
            15px !important;

        font-weight:
            500 !important;
    }


    body:not(#pb-typography-specificity) h5 {

        font-size:
            14px !important;

        font-weight:
            500 !important;
    }
}


/*
 * ===========================================================
 * MOBIEL STAAND + NORMAAL MOBIEL
 * ===========================================================
 */

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

    body:not(#pb-typography-specificity) h1,
    body:not(#pb-typography-specificity) .pb-hero-title,
    body:not(#pb-typography-specificity) .entry-title,
    body:not(#pb-typography-specificity) .page-title,
    body:not(#pb-typography-specificity) .post-title,
    body:not(#pb-typography-specificity) .pb-content-hero h1 {

        font-size:
            clamp(18px, 5vw, 20px) !important;

        font-weight:
            500 !important;

        line-height:
            1.25 !important;

        letter-spacing:
            -0.15px !important;
    }


    body:not(#pb-typography-specificity) h2 {

        font-size:
            clamp(17px, 4.5vw, 19px) !important;

        font-weight:
            500 !important;

        line-height:
            1.3 !important;

        letter-spacing:
            -0.1px !important;
    }


    body:not(#pb-typography-specificity) h3 {

        font-size:
            clamp(15px, 4vw, 17px) !important;

        font-weight:
            500 !important;

        line-height:
            1.34 !important;
    }


    body:not(#pb-typography-specificity) h4 {

        font-size:
            15px !important;

        font-weight:
            500 !important;

        line-height:
            1.35 !important;
    }


    body:not(#pb-typography-specificity) h5 {

        font-size:
            14px !important;

        font-weight:
            500 !important;

        line-height:
            1.4 !important;
    }
}


/*
 * ===========================================================
 * ZEER KLEIN MOBIEL
 * ===========================================================
 */

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

    body:not(#pb-typography-specificity) h1,
    body:not(#pb-typography-specificity) .pb-hero-title,
    body:not(#pb-typography-specificity) .entry-title,
    body:not(#pb-typography-specificity) .page-title,
    body:not(#pb-typography-specificity) .post-title,
    body:not(#pb-typography-specificity) .pb-content-hero h1 {

        font-size:
            18px !important;

        font-weight:
            500 !important;
    }


    body:not(#pb-typography-specificity) h2 {

        font-size:
            17px !important;

        font-weight:
            500 !important;
    }


    body:not(#pb-typography-specificity) h3 {

        font-size:
            15px !important;

        font-weight:
            500 !important;
    }
}


/*
 * ===========================================================
 * MOBIEL LIGGEND
 * ===========================================================
 *
 * Geen gigantische hero-titel meer in landscape.
 */

@media screen
and (max-width: 900px)
and (orientation: landscape)
and (max-height: 600px) {

    body:not(#pb-typography-specificity) h1,
    body:not(#pb-typography-specificity) .pb-hero-title,
    body:not(#pb-typography-specificity) .pb-content-hero h1 {

        font-size:
            20px !important;

        font-weight:
            500 !important;

        line-height:
            1.23 !important;
    }


    body:not(#pb-typography-specificity) h2 {

        font-size:
            18px !important;

        font-weight:
            500 !important;
    }
}


/* ============================================================
   EINDE PB GLOBAL TYPOGRAPHY SYSTEM V1
   ============================================================ */

/* ============================================================
   PB HOME HERO TITLE V1
   ============================================================ */

/*
 * Alleen homepage hero.
 * Rest van centrale typografieschaal blijft onaangeraakt.
 */

body.pb-template-front-page .pb-hero-title,
body.pb-template-page-home .pb-hero-title,
body.pb-template-index .pb-hero-title {

    font-size:
        clamp(26px, 2.3vw, 32px) !important;

    font-weight:
        500 !important;

    line-height:
        1.16 !important;

    letter-spacing:
        -0.35px !important;
}


/* Tablet */

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

    body.pb-template-front-page .pb-hero-title,
    body.pb-template-page-home .pb-hero-title,
    body.pb-template-index .pb-hero-title {

        font-size:
            clamp(24px, 3.5vw, 29px) !important;

        line-height:
            1.17 !important;
    }
}


/* Mobiel */

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

    body.pb-template-front-page .pb-hero-title,
    body.pb-template-page-home .pb-hero-title,
    body.pb-template-index .pb-hero-title {

        font-size:
            clamp(22px, 6vw, 26px) !important;

        line-height:
            1.18 !important;

        letter-spacing:
            -0.25px !important;
    }
}


/* Klein mobiel */

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

    body.pb-template-front-page .pb-hero-title,
    body.pb-template-page-home .pb-hero-title,
    body.pb-template-index .pb-hero-title {

        font-size:
            22px !important;
    }
}


/* ============================================================
   EINDE PB HOME HERO TITLE V1
   ============================================================ */

/* ============================================================
   PB HOME HERO TITLE WIDTH V1
   ============================================================ */

/*
 * De titel was te smal en brak daardoor in een verticaal blok.
 * Alleen de homepage hero krijgt meer horizontale ruimte.
 */

body.pb-template-front-page .pb-hero-content,
body.pb-template-page-home .pb-hero-content,
body.pb-template-index .pb-hero-content {
    width: min(100%, 610px) !important;
    max-width: 610px !important;
}

body.pb-template-front-page .pb-hero-title,
body.pb-template-page-home .pb-hero-title,
body.pb-template-index .pb-hero-title {
    width: 100% !important;
    max-width: 560px !important;

    font-size:
        clamp(27px, 2.35vw, 33px) !important;

    font-weight:
        500 !important;

    line-height:
        1.16 !important;

    letter-spacing:
        -0.35px !important;
}


/* TABLET */

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

    body.pb-template-front-page .pb-hero-content,
    body.pb-template-page-home .pb-hero-content,
    body.pb-template-index .pb-hero-content {
        width: min(100%, 540px) !important;
        max-width: 540px !important;
    }

    body.pb-template-front-page .pb-hero-title,
    body.pb-template-page-home .pb-hero-title,
    body.pb-template-index .pb-hero-title {
        max-width: 500px !important;

        font-size:
            clamp(25px, 3.4vw, 30px) !important;
    }
}


/* MOBIEL */

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

    body.pb-template-front-page .pb-hero-content,
    body.pb-template-page-home .pb-hero-content,
    body.pb-template-index .pb-hero-content {
        width: 100% !important;
        max-width: none !important;
    }

    body.pb-template-front-page .pb-hero-title,
    body.pb-template-page-home .pb-hero-title,
    body.pb-template-index .pb-hero-title {
        width: 100% !important;
        max-width: 430px !important;

        font-size:
            clamp(22px, 6vw, 26px) !important;

        line-height:
            1.18 !important;
    }
}


/* ============================================================
   EINDE PB HOME HERO TITLE WIDTH V1
   ============================================================ */

/* ============================================================
   PB MOBILE HOME HERO V1
   ============================================================ */

/*
 * Desktop standaard:
 * losse mobiele afbeelding bestaat wel in markup,
 * maar is volledig verborgen.
 */

.pb-mobile-home-hero-image {
    display: none;
}


/* ============================================================
   ALLEEN MOBIEL
   ============================================================ */

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

    /*
     * Homepage hero wordt net als contentpagina's
     * een zelfstandig donker tekstvlak.
     */

    body.pb-template-front-page
    .kb-block.nuke-v10-master {

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background:
            var(--pb-dark, #061426) !important;
    }


    /*
     * Desktop achtergrondfoto binnen de hero
     * alleen mobiel uitschakelen.
     */

    body.pb-template-front-page
    .pb-hero-bg-container {

        display: none !important;
        visibility: hidden !important;
    }


    /*
     * Desktop overlay is mobiel niet nodig.
     */

    body.pb-template-front-page
    .pb-hero-bg-overlay {

        display: none !important;
    }


    body.pb-template-front-page
    .kb-block.nuke-v10-master::before,
    body.pb-template-front-page
    .kb-block.nuke-v10-master::after {

        display: none !important;
        content: none !important;
    }


    /*
     * Hero-inner wordt puur tekstcontainer.
     */

    body.pb-template-front-page
    .kb-inner.pb-hero-inner {

        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;

        padding:
            92px
            22px
            40px !important;

        background:
            var(--pb-dark, #061426) !important;

        box-sizing: border-box !important;
    }


    /*
     * Linker hero-content.
     */

    body.pb-template-front-page
    .pb-hero-content {

        position: relative !important;

        width: 100% !important;
        max-width: 360px !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        z-index: 2 !important;
    }


    /*
     * Eyebrow gelijk aan andere mobiele hero's.
     */

    body.pb-template-front-page
    .pb-hero-subtitle {

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin:
            0
            0
            12px !important;

        padding: 0 !important;

        font-size:
            11px !important;

        line-height:
            1.3 !important;

        font-weight:
            600 !important;

        letter-spacing:
            1.2px !important;
    }


    /*
     * Homepage H1 blijft iets prominenter dan normale H1,
     * maar compact en breed genoeg.
     */

    body.pb-template-front-page
    .pb-hero-title {

        display: block !important;

        width: 100% !important;
        max-width: 360px !important;

        margin:
            0
            0
            18px !important;

        padding: 0 !important;

        font-size:
            clamp(22px, 6vw, 26px) !important;

        font-weight:
            500 !important;

        line-height:
            1.18 !important;

        letter-spacing:
            -0.25px !important;

        word-break:
            normal !important;

        overflow-wrap:
            normal !important;

        hyphens:
            none !important;
    }


    /*
     * Hero intro.
     */

    body.pb-template-front-page
    .pb-hero-text {

        display: block !important;

        width: 100% !important;
        max-width: 350px !important;

        margin:
            0
            0
            22px !important;

        padding: 0 !important;

        font-size:
            14px !important;

        line-height:
            1.65 !important;
    }


    /*
     * Servicebadges compact houden.
     */

    body.pb-template-front-page
    .pb-hero-features {

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        gap:
            9px !important;

        width: 100% !important;

        margin:
            0
            0
            24px !important;
    }


    body.pb-template-front-page
    .pb-hero-feature-item {

        width: auto !important;

        font-size:
            12px !important;
    }


    /*
     * CTA niet overdreven breed.
     */

    body.pb-template-front-page
    .nuke-main-button {

        width: auto !important;
        max-width: 100% !important;

        min-height:
            46px !important;

        padding:
            0
            22px !important;

        font-size:
            13px !important;
    }


    /*
     * De drie grote hero-tegels horen bij desktop.
     * Voor dezelfde mobiele compositie als contenthero's:
     * verbergen we ze op telefoon.
     */

    body.pb-template-front-page
    .pb-hero-visual {

        display: none !important;
    }


    body.pb-template-front-page
    .pb-hero-tiles-stack {

        display: none !important;
    }


    /*
     * ==========================================
     * LOSSE MOBIELE FOTO ONDER HERO
     * ==========================================
     *
     * Gebruikt dezelfde Customizer-setting
     * als de desktop homepage hero.
     */

    body.pb-template-front-page
    .pb-mobile-home-hero-image {

        position: relative !important;

        display: block !important;
        visibility: visible !important;

        width: 100% !important;
        max-width: 100% !important;

        height:
            clamp(250px, 68vw, 285px) !important;

        min-height:
            250px !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit:
            cover !important;

        object-position:
            center center !important;

        opacity: 1 !important;

        border: 0 !important;

        float: none !important;
        clear: both !important;

        z-index: 1 !important;
    }


    /*
     * Eerste witte homepage-sectie begint
     * gewoon onder de afbeelding.
     */

    body.pb-template-front-page
    .pb-mobile-home-hero-image
    + .pb-vokk-light {

        position: relative !important;

        z-index: 2 !important;

        margin-top:
            0 !important;

        clear:
            both !important;
    }
}


/* ============================================================
   ZEER KLEIN MOBIEL
   ============================================================ */

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

    body.pb-template-front-page
    .kb-inner.pb-hero-inner {

        padding:
            86px
            18px
            34px !important;
    }


    body.pb-template-front-page
    .pb-hero-content {

        max-width:
            320px !important;
    }


    body.pb-template-front-page
    .pb-hero-title {

        max-width:
            320px !important;

        font-size:
            22px !important;
    }


    body.pb-template-front-page
    .pb-hero-text {

        max-width:
            315px !important;

        font-size:
            13px !important;
    }


    body.pb-template-front-page
    .pb-mobile-home-hero-image {

        height:
            245px !important;

        min-height:
            245px !important;
    }
}


/* ============================================================
   EINDE PB MOBILE HOME HERO V1
   ============================================================ */

/* ============================================================
   PB COMPLETE WEBSITE PALETTE ENGINE V1
   ============================================================ */

/*
 * ===========================================================
 * SEMANTISCHE KLEURARCHITECTUUR
 * ===========================================================
 *
 * Iedere preset bestuurt:
 *
 * - merk / primary
 * - secondary
 * - accent
 * - page background
 * - surfaces
 * - headings
 * - body text
 * - muted text
 * - borders
 * - header
 * - mobiel menu
 * - hero
 * - footer
 * - buttons
 * - iconen
 * - social buttons
 * - ratings
 * - formulieren
 * - cards
 * - shadows/glow
 *
 * Legacy --vokk-* / --kavion-* / --blue etc.
 * worden hieronder gekoppeld aan deze laag.
 */


/* ============================================================
   1. VOKK MODERN BLAUW
   Oorspronkelijke standaard
   ============================================================ */

body.pb-preset-vokk_blue {

    --pb-primary: #3867fa;
    --pb-primary-light: #4380ff;
    --pb-primary-dark: #2563eb;

    --pb-secondary: #0f172a;
    --pb-accent: #3867fa;

    --pb-dark: #061426;
    --pb-darker: #030b16;

    --pb-page-bg: #ffffff;
    --pb-surface: #ffffff;
    --pb-surface-soft: #f7f9fc;
    --pb-card-bg: #ffffff;

    --pb-heading: #0f172a;
    --pb-text: #0f172a;
    --pb-muted: #667085;

    --pb-border: #e6ebf2;

    --pb-header-bg: #061426;
    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: #030b16;

    --pb-hero-bg: #061426;
    --pb-hero-text: #ffffff;
    --pb-hero-muted: #b3b3bd;

    --pb-footer-bg: #061426;
    --pb-footer-text: #ffffff;
    --pb-footer-muted: #aeb6c2;

    --pb-btn-1: #3d74ff;
    --pb-btn-2: #2563eb;
    --pb-button-text: #ffffff;

    --pb-icon: #3867fa;
    --pb-icon-bg: #edf3ff;

    --pb-social-bg: rgba(255,255,255,.05);
    --pb-social-icon: #ffffff;
    --pb-social-hover-bg: #3867fa;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #f5b400;

    --pb-input-bg: #ffffff;
    --pb-input-text: #0f172a;

    --pb-glow:
        color-mix(
            in srgb,
            #3867fa 14%,
            transparent
        );

    --pb-shadow:
        rgba(15,23,42,.10);
}


/* ============================================================
   2. TECH GROEN & DIEP ZWART
   ============================================================ */

body.pb-preset-emerald_tech {

    --pb-primary: #00b67a;
    --pb-primary-light: #34d399;
    --pb-primary-dark: #047857;

    --pb-secondary: #064e3b;
    --pb-accent: #10b981;

    --pb-dark: #071b16;
    --pb-darker: #03100c;

    --pb-page-bg: #f4fbf7;
    --pb-surface: #ffffff;
    --pb-surface-soft: #e9f7ef;
    --pb-card-bg: #ffffff;

    --pb-heading: #0b3026;
    --pb-text: #153d32;
    --pb-muted: #547269;

    --pb-border: #cfe9db;

    --pb-header-bg: #071b16;
    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: #071b16;

    --pb-hero-bg: #071b16;
    --pb-hero-text: #ffffff;
    --pb-hero-muted: #b7d3c9;

    --pb-footer-bg: #04130f;
    --pb-footer-text: #ffffff;
    --pb-footer-muted: #a7c4ba;

    --pb-btn-1: #10b981;
    --pb-btn-2: #047857;
    --pb-button-text: #ffffff;

    --pb-icon: #059669;
    --pb-icon-bg: #dff6e9;

    --pb-social-bg: rgba(52,211,153,.12);
    --pb-social-icon: #d1fae5;
    --pb-social-hover-bg: #00b67a;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #00b67a;

    --pb-input-bg: #ffffff;
    --pb-input-text: #153d32;

    --pb-glow:
        color-mix(
            in srgb,
            #00b67a 18%,
            transparent
        );

    --pb-shadow:
        rgba(3,60,43,.12);
}


/* ============================================================
   3. INDUSTRIEEL STAALBLAUW
   ============================================================ */

body.pb-preset-industrial_dark {

    --pb-primary: #3b82f6;
    --pb-primary-light: #7daeff;
    --pb-primary-dark: #1d4ed8;

    --pb-secondary: #334155;
    --pb-accent: #64748b;

    --pb-dark: #1e293b;
    --pb-darker: #0f172a;

    --pb-page-bg: #eef3f8;
    --pb-surface: #f8fafc;
    --pb-surface-soft: #e4ebf2;
    --pb-card-bg: #ffffff;

    --pb-heading: #172033;
    --pb-text: #27364c;
    --pb-muted: #64748b;

    --pb-border: #cad5e1;

    --pb-header-bg: #172033;
    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: #172033;

    --pb-hero-bg: #172033;
    --pb-hero-text: #ffffff;
    --pb-hero-muted: #c2cfdf;

    --pb-footer-bg: #111827;
    --pb-footer-text: #ffffff;
    --pb-footer-muted: #b7c2d0;

    --pb-btn-1: #3b82f6;
    --pb-btn-2: #1d4ed8;
    --pb-button-text: #ffffff;

    --pb-icon: #3b82f6;
    --pb-icon-bg: #e0ecff;

    --pb-social-bg: rgba(96,165,250,.12);
    --pb-social-icon: #dbeafe;
    --pb-social-hover-bg: #3b82f6;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #60a5fa;

    --pb-input-bg: #ffffff;
    --pb-input-text: #27364c;

    --pb-glow:
        color-mix(
            in srgb,
            #3b82f6 18%,
            transparent
        );

    --pb-shadow:
        rgba(15,23,42,.14);
}


/* ============================================================
   4. WARM ZAKELIJK
   NAVY & BRONS
   ============================================================ */

body.pb-preset-warm_corporate {

    --pb-primary: #c47a18;
    --pb-primary-light: #e8ad52;
    --pb-primary-dark: #8f530d;

    --pb-secondary: #25344a;
    --pb-accent: #d39a45;

    --pb-dark: #182231;
    --pb-darker: #101720;

    --pb-page-bg: #fffaf2;
    --pb-surface: #fffdf8;
    --pb-surface-soft: #f8efe1;
    --pb-card-bg: #fffdf8;

    --pb-heading: #2c241c;
    --pb-text: #4a3b2c;
    --pb-muted: #796b5d;

    --pb-border: #eadbc5;

    --pb-header-bg: #182231;
    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: #182231;

    --pb-hero-bg: #182231;
    --pb-hero-text: #fff8ed;
    --pb-hero-muted: #dbcdb9;

    --pb-footer-bg: #151b25;
    --pb-footer-text: #fff8ed;
    --pb-footer-muted: #c9bca9;

    --pb-btn-1: #d5902f;
    --pb-btn-2: #a35e12;
    --pb-button-text: #ffffff;

    --pb-icon: #b86c12;
    --pb-icon-bg: #faebd1;

    --pb-social-bg: rgba(232,173,82,.12);
    --pb-social-icon: #ffecd0;
    --pb-social-hover-bg: #c47a18;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #d5902f;

    --pb-input-bg: #fffdf8;
    --pb-input-text: #4a3b2c;

    --pb-glow:
        color-mix(
            in srgb,
            #c47a18 18%,
            transparent
        );

    --pb-shadow:
        rgba(68,43,17,.12);
}


/* ============================================================
   5. MIDNIGHT VIOLET
   ============================================================ */

body.pb-preset-midnight_violet {

    --pb-primary: #7c3aed;
    --pb-primary-light: #a78bfa;
    --pb-primary-dark: #5b21b6;

    --pb-secondary: #312e81;
    --pb-accent: #c084fc;

    --pb-dark: #17132b;
    --pb-darker: #0d0a19;

    --pb-page-bg: #f8f6ff;
    --pb-surface: #ffffff;
    --pb-surface-soft: #f0ebff;
    --pb-card-bg: #ffffff;

    --pb-heading: #271b48;
    --pb-text: #3d315c;
    --pb-muted: #756a8d;

    --pb-border: #dfd5f5;

    --pb-header-bg: #17132b;
    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: #17132b;

    --pb-hero-bg: #17132b;
    --pb-hero-text: #ffffff;
    --pb-hero-muted: #cfc5e5;

    --pb-footer-bg: #100d20;
    --pb-footer-text: #ffffff;
    --pb-footer-muted: #bcb2d0;

    --pb-btn-1: #8b5cf6;
    --pb-btn-2: #6d28d9;
    --pb-button-text: #ffffff;

    --pb-icon: #7c3aed;
    --pb-icon-bg: #eee7ff;

    --pb-social-bg: rgba(167,139,250,.14);
    --pb-social-icon: #ede9fe;
    --pb-social-hover-bg: #7c3aed;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #a78bfa;

    --pb-input-bg: #ffffff;
    --pb-input-text: #3d315c;

    --pb-glow:
        color-mix(
            in srgb,
            #7c3aed 20%,
            transparent
        );

    --pb-shadow:
        rgba(55,32,101,.13);
}


/* ============================================================
   6. BORDEAUX & CHAMPAGNE
   ============================================================ */

body.pb-preset-burgundy_champagne {

    --pb-primary: #9f1239;
    --pb-primary-light: #d35d7d;
    --pb-primary-dark: #701a32;

    --pb-secondary: #4c1d2f;
    --pb-accent: #caa46a;

    --pb-dark: #32141e;
    --pb-darker: #1e0c12;

    --pb-page-bg: #fff9f5;
    --pb-surface: #fffdfa;
    --pb-surface-soft: #f8ede8;
    --pb-card-bg: #fffdfa;

    --pb-heading: #441c29;
    --pb-text: #5e3440;
    --pb-muted: #896d74;

    --pb-border: #ecd6d5;

    --pb-header-bg: #32141e;
    --pb-header-text: #fffaf5;
    --pb-mobile-menu-bg: #32141e;

    --pb-hero-bg: #32141e;
    --pb-hero-text: #fffaf5;
    --pb-hero-muted: #dac7ca;

    --pb-footer-bg: #251016;
    --pb-footer-text: #fffaf5;
    --pb-footer-muted: #cdb8bb;

    --pb-btn-1: #b91c4b;
    --pb-btn-2: #881337;
    --pb-button-text: #ffffff;

    --pb-icon: #9f1239;
    --pb-icon-bg: #fae8ed;

    --pb-social-bg: rgba(202,164,106,.12);
    --pb-social-icon: #f7e7ce;
    --pb-social-hover-bg: #9f1239;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #caa46a;

    --pb-input-bg: #fffdfa;
    --pb-input-text: #5e3440;

    --pb-glow:
        color-mix(
            in srgb,
            #9f1239 18%,
            transparent
        );

    --pb-shadow:
        rgba(84,25,44,.12);
}


/* ============================================================
   7. FOREST GREEN & CREAM
   ============================================================ */

body.pb-preset-forest_cream {

    --pb-primary: #2f6b45;
    --pb-primary-light: #65a77c;
    --pb-primary-dark: #214e33;

    --pb-secondary: #514735;
    --pb-accent: #b99458;

    --pb-dark: #203529;
    --pb-darker: #14231a;

    --pb-page-bg: #faf7ee;
    --pb-surface: #fffdf6;
    --pb-surface-soft: #f1ecde;
    --pb-card-bg: #fffdf6;

    --pb-heading: #29372d;
    --pb-text: #435046;
    --pb-muted: #747c73;

    --pb-border: #ddd8ca;

    --pb-header-bg: #203529;
    --pb-header-text: #fffdf6;
    --pb-mobile-menu-bg: #203529;

    --pb-hero-bg: #203529;
    --pb-hero-text: #fffdf6;
    --pb-hero-muted: #ccd5cc;

    --pb-footer-bg: #17271d;
    --pb-footer-text: #fffdf6;
    --pb-footer-muted: #bdc8be;

    --pb-btn-1: #4b8a60;
    --pb-btn-2: #2f6b45;
    --pb-button-text: #ffffff;

    --pb-icon: #2f6b45;
    --pb-icon-bg: #e3eee5;

    --pb-social-bg: rgba(185,148,88,.12);
    --pb-social-icon: #f4e7cf;
    --pb-social-hover-bg: #2f6b45;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #b99458;

    --pb-input-bg: #fffdf6;
    --pb-input-text: #435046;

    --pb-glow:
        color-mix(
            in srgb,
            #2f6b45 18%,
            transparent
        );

    --pb-shadow:
        rgba(39,67,48,.12);
}


/* ============================================================
   8. PETROL & TURQUOISE
   ============================================================ */

body.pb-preset-petrol_turquoise {

    --pb-primary: #0f8f8d;
    --pb-primary-light: #46c7c3;
    --pb-primary-dark: #0b6665;

    --pb-secondary: #164e63;
    --pb-accent: #2dd4bf;

    --pb-dark: #0d3540;
    --pb-darker: #08242c;

    --pb-page-bg: #f2fbfb;
    --pb-surface: #ffffff;
    --pb-surface-soft: #e3f4f3;
    --pb-card-bg: #ffffff;

    --pb-heading: #153d43;
    --pb-text: #31565a;
    --pb-muted: #668084;

    --pb-border: #c7e5e3;

    --pb-header-bg: #0d3540;
    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: #0d3540;

    --pb-hero-bg: #0d3540;
    --pb-hero-text: #ffffff;
    --pb-hero-muted: #bfdbdb;

    --pb-footer-bg: #092930;
    --pb-footer-text: #ffffff;
    --pb-footer-muted: #add0d0;

    --pb-btn-1: #14b8a6;
    --pb-btn-2: #0f766e;
    --pb-button-text: #ffffff;

    --pb-icon: #0f8f8d;
    --pb-icon-bg: #ddf5f3;

    --pb-social-bg: rgba(70,199,195,.13);
    --pb-social-icon: #d9f7f5;
    --pb-social-hover-bg: #0f8f8d;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #14b8a6;

    --pb-input-bg: #ffffff;
    --pb-input-text: #31565a;

    --pb-glow:
        color-mix(
            in srgb,
            #0f8f8d 19%,
            transparent
        );

    --pb-shadow:
        rgba(12,73,77,.12);
}


/* ============================================================
   9. CHARCOAL & ELECTRIC ORANGE
   ============================================================ */

body.pb-preset-charcoal_orange {

    --pb-primary: #f97316;
    --pb-primary-light: #fb923c;
    --pb-primary-dark: #c2410c;

    --pb-secondary: #3f3f46;
    --pb-accent: #fdba74;

    --pb-dark: #202124;
    --pb-darker: #121315;

    --pb-page-bg: #f5f5f4;
    --pb-surface: #ffffff;
    --pb-surface-soft: #ececea;
    --pb-card-bg: #ffffff;

    --pb-heading: #252525;
    --pb-text: #44403c;
    --pb-muted: #78716c;

    --pb-border: #d6d3d1;

    --pb-header-bg: #202124;
    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: #202124;

    --pb-hero-bg: #202124;
    --pb-hero-text: #ffffff;
    --pb-hero-muted: #c7c7c7;

    --pb-footer-bg: #17181a;
    --pb-footer-text: #ffffff;
    --pb-footer-muted: #b8b8b8;

    --pb-btn-1: #fb923c;
    --pb-btn-2: #ea580c;
    --pb-button-text: #ffffff;

    --pb-icon: #f97316;
    --pb-icon-bg: #ffeadb;

    --pb-social-bg: rgba(249,115,22,.13);
    --pb-social-icon: #ffedd5;
    --pb-social-hover-bg: #f97316;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #f97316;

    --pb-input-bg: #ffffff;
    --pb-input-text: #44403c;

    --pb-glow:
        color-mix(
            in srgb,
            #f97316 20%,
            transparent
        );

    --pb-shadow:
        rgba(28,25,23,.14);
}


/* ============================================================
   10. MINIMAL BLACK & SAND
   ============================================================ */

body.pb-preset-minimal_sand {

    --pb-primary: #292524;
    --pb-primary-light: #57534e;
    --pb-primary-dark: #1c1917;

    --pb-secondary: #78716c;
    --pb-accent: #c3a77c;

    --pb-dark: #1c1917;
    --pb-darker: #0f0e0d;

    --pb-page-bg: #f7f3eb;
    --pb-surface: #fffdf8;
    --pb-surface-soft: #eee7db;
    --pb-card-bg: #fffdf8;

    --pb-heading: #292524;
    --pb-text: #4b4743;
    --pb-muted: #78716c;

    --pb-border: #ded6c8;

    --pb-header-bg: #1c1917;
    --pb-header-text: #fffdf8;
    --pb-mobile-menu-bg: #1c1917;

    --pb-hero-bg: #1c1917;
    --pb-hero-text: #fffdf8;
    --pb-hero-muted: #cec8bf;

    --pb-footer-bg: #151311;
    --pb-footer-text: #fffdf8;
    --pb-footer-muted: #bcb5ac;

    --pb-btn-1: #44403c;
    --pb-btn-2: #1c1917;
    --pb-button-text: #ffffff;

    --pb-icon: #292524;
    --pb-icon-bg: #e9e1d5;

    --pb-social-bg: rgba(195,167,124,.14);
    --pb-social-icon: #eee2d0;
    --pb-social-hover-bg: #c3a77c;
    --pb-social-hover-icon: #1c1917;

    --pb-rating: #b99055;

    --pb-input-bg: #fffdf8;
    --pb-input-text: #4b4743;

    --pb-glow:
        color-mix(
            in srgb,
            #c3a77c 20%,
            transparent
        );

    --pb-shadow:
        rgba(41,37,36,.12);
}


/* ============================================================
   11. ROYAL NAVY & GOLD
   ============================================================ */

body.pb-preset-royal_gold {

    --pb-primary: #d4a72c;
    --pb-primary-light: #f0c85a;
    --pb-primary-dark: #9a7612;

    --pb-secondary: #14213d;
    --pb-accent: #e5c05b;

    --pb-dark: #101c36;
    --pb-darker: #091225;

    --pb-page-bg: #f7f9fc;
    --pb-surface: #ffffff;
    --pb-surface-soft: #edf1f7;
    --pb-card-bg: #ffffff;

    --pb-heading: #16213a;
    --pb-text: #33405a;
    --pb-muted: #6d788d;

    --pb-border: #d7deea;

    --pb-header-bg: #101c36;
    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: #101c36;

    --pb-hero-bg: #101c36;
    --pb-hero-text: #ffffff;
    --pb-hero-muted: #c8d0df;

    --pb-footer-bg: #0b152c;
    --pb-footer-text: #ffffff;
    --pb-footer-muted: #b9c2d3;

    --pb-btn-1: #e2b83f;
    --pb-btn-2: #b78916;
    --pb-button-text: #101c36;

    --pb-icon: #b78916;
    --pb-icon-bg: #faf2d5;

    --pb-social-bg: rgba(212,167,44,.14);
    --pb-social-icon: #faefc4;
    --pb-social-hover-bg: #d4a72c;
    --pb-social-hover-icon: #101c36;

    --pb-rating: #d4a72c;

    --pb-input-bg: #ffffff;
    --pb-input-text: #33405a;

    --pb-glow:
        color-mix(
            in srgb,
            #d4a72c 21%,
            transparent
        );

    --pb-shadow:
        rgba(16,28,54,.14);
}


/* ============================================================
   12. CLEAN TEAL & SLATE
   ============================================================ */

body.pb-preset-teal_slate {

    --pb-primary: #0f9f9a;
    --pb-primary-light: #5ee0d7;
    --pb-primary-dark: #0b716e;

    --pb-secondary: #475569;
    --pb-accent: #22c3b9;

    --pb-dark: #253543;
    --pb-darker: #17232d;

    --pb-page-bg: #f5f9fa;
    --pb-surface: #ffffff;
    --pb-surface-soft: #eaf1f3;
    --pb-card-bg: #ffffff;

    --pb-heading: #253543;
    --pb-text: #435764;
    --pb-muted: #70818b;

    --pb-border: #d3e0e3;

    --pb-header-bg: #253543;
    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: #253543;

    --pb-hero-bg: #253543;
    --pb-hero-text: #ffffff;
    --pb-hero-muted: #c5d2d8;

    --pb-footer-bg: #1c2a34;
    --pb-footer-text: #ffffff;
    --pb-footer-muted: #b7c5cb;

    --pb-btn-1: #20b9b1;
    --pb-btn-2: #0f8580;
    --pb-button-text: #ffffff;

    --pb-icon: #0f9f9a;
    --pb-icon-bg: #dcf3f1;

    --pb-social-bg: rgba(94,224,215,.12);
    --pb-social-icon: #d9f7f4;
    --pb-social-hover-bg: #0f9f9a;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #0f9f9a;

    --pb-input-bg: #ffffff;
    --pb-input-text: #435764;

    --pb-glow:
        color-mix(
            in srgb,
            #0f9f9a 18%,
            transparent
        );

    --pb-shadow:
        rgba(37,53,67,.12);
}


/* ============================================================
   COMPATIBILITY / LEGACY ALIASES
   ============================================================ */

/*
 * Bestaande CSS gebruikt nog veel van deze namen.
 * We laten ze bewust bestaan en laten ze verwijzen
 * naar de nieuwe officiële semantische laag.
 */

body[class*="pb-preset-"] {

    --pb-blue:
        var(--pb-primary);

    --blue:
        var(--pb-primary);

    --blue-light:
        var(--pb-primary-light);

    --text:
        var(--pb-text);

    --muted:
        var(--pb-muted);

    --border:
        var(--pb-border);

    --soft:
        var(--pb-surface-soft);

    --star:
        var(--pb-rating);

    --navy:
        var(--pb-dark);

    --navy-dark:
        var(--pb-darker);


    --kavion-primary:
        var(--pb-primary);

    --kavion-primary-light:
        var(--pb-primary-light);

    --kavion-dark:
        var(--pb-dark);

    --kavion-text:
        var(--pb-text);


    --vokk-primary:
        var(--pb-primary);

    --vokk-primary-light:
        var(--pb-primary-light);

    --vokk-dark:
        var(--pb-dark);

    --vokk-darker:
        var(--pb-darker);

    --vokk-btn-1:
        var(--pb-btn-1);

    --vokk-btn-2:
        var(--pb-btn-2);

    --vokk-glow:
        var(--pb-glow);
}


/* ============================================================
   PAGINA BASIS
   ============================================================ */

body[class*="pb-preset-"] {

    background:
        var(--pb-page-bg) !important;

    color:
        var(--pb-text);
}


/*
 * Alle hoofd-page wrappers dezelfde semantische variabelen geven.
 *
 * Dit is belangrijk omdat oudere template-CSS intern nog
 * --text / --muted / --soft / --border opnieuw definieert.
 */

body[class*="pb-preset-"] .vokk-services-page,
body[class*="pb-preset-"] .vokk-about-page,
body[class*="pb-preset-"] .vokk-projects-page,
body[class*="pb-preset-"] .vokk-reviews-page,
body[class*="pb-preset-"] .vokk-contact-page,
body[class*="pb-preset-"] .vokk-detail-page,
body[class*="pb-preset-"] .vokk-default-page {

    --blue:
        var(--pb-primary) !important;

    --blue-light:
        var(--pb-primary-light) !important;

    --text:
        var(--pb-text) !important;

    --muted:
        var(--pb-muted) !important;

    --border:
        var(--pb-border) !important;

    --soft:
        var(--pb-surface-soft) !important;

    --star:
        var(--pb-rating) !important;

    --navy:
        var(--pb-dark) !important;

    --navy-dark:
        var(--pb-darker) !important;

    background:
        var(--pb-page-bg) !important;

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


/* ============================================================
   HEADINGS
   ============================================================ */

body[class*="pb-preset-"]
.vokk-default-page h1,

body[class*="pb-preset-"]
.vokk-default-content h2,

body[class*="pb-preset-"]
.vokk-default-content h3,

body[class*="pb-preset-"]
.pb-vokk-heading,

body[class*="pb-preset-"]
.vokk-services-intro h2,

body[class*="pb-preset-"]
.vokk-service-content h2,

body[class*="pb-preset-"]
.vokk-about-intro h2,

body[class*="pb-preset-"]
.vokk-about-story-content h2,

body[class*="pb-preset-"]
.vokk-about-values-head h2,

body[class*="pb-preset-"]
.vokk-about-experience-content h2,

body[class*="pb-preset-"]
.vokk-projects-intro h2,

body[class*="pb-preset-"]
.vokk-project-content h2,

body[class*="pb-preset-"]
.vokk-project-featured-content h2,

body[class*="pb-preset-"]
.vokk-project-results-head h2,

body[class*="pb-preset-"]
.vokk-reviews-summary-copy h2,

body[class*="pb-preset-"]
.vokk-reviews-wordpress-box h2,

body[class*="pb-preset-"]
.vokk-contact-info h2,

body[class*="pb-preset-"]
.vokk-contact-form-head h2,

body[class*="pb-preset-"]
.vokk-contact-extra-copy h2,

body[class*="pb-preset-"]
.vokk-detail-intro h2,

body[class*="pb-preset-"]
.vokk-detail-content h2,

body[class*="pb-preset-"]
.vokk-detail-process-head h2,

body[class*="pb-preset-"]
.vokk-detail-faq-intro h2 {

    color:
        var(--pb-heading) !important;
}


/* ============================================================
   NORMALE TEKST
   ============================================================ */

body[class*="pb-preset-"]
.vokk-default-content,

body[class*="pb-preset-"]
.pb-vokk-benefit p,

body[class*="pb-preset-"]
.pb-vokk-process-intro,

body[class*="pb-preset-"]
.pb-vokk-process-item p,

body[class*="pb-preset-"]
.vokk-review-card-text {

    color:
        var(--pb-muted) !important;
}


/* ============================================================
   LIGHT / SOFT SECTIES
   ============================================================ */

body[class*="pb-preset-"]
.pb-vokk-light {

    background:
        radial-gradient(
            circle at 50% -120px,
            var(--pb-glow),
            transparent 340px
        ),
        linear-gradient(
            180deg,
            var(--pb-page-bg) 0%,
            var(--pb-surface-soft) 100%
        ) !important;

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


body[class*="pb-preset-"]
.pb-vokk-process,

body[class*="pb-preset-"]
.vokk-about-values,

body[class*="pb-preset-"]
.vokk-reviews-trust,

body[class*="pb-preset-"]
.vokk-contact-reassurance,

body[class*="pb-preset-"]
.vokk-detail-benefits,

body[class*="pb-preset-"]
.vokk-detail-process {

    background:
        var(--pb-surface-soft) !important;
}


/* ============================================================
   CARDS / PANELS / SURFACES
   ============================================================ */

body[class*="pb-preset-"]
.pb-vokk-trust-box,

body[class*="pb-preset-"]
.vokk-about-value,

body[class*="pb-preset-"]
.vokk-about-stat,

body[class*="pb-preset-"]
.vokk-project-card,

body[class*="pb-preset-"]
.vokk-review-card,

body[class*="pb-preset-"]
.vokk-reviews-score,

body[class*="pb-preset-"]
.vokk-reviews-wordpress-box,

body[class*="pb-preset-"]
.vokk-contact-form-panel,

body[class*="pb-preset-"]
.vokk-detail-step {

    background:
        var(--pb-card-bg) !important;

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

    box-shadow:
        0 14px 40px
        var(--pb-shadow) !important;
}


/* ============================================================
   BORDERS / SEPARATORS
   ============================================================ */

body[class*="pb-preset-"]
.vokk-project-result + .vokk-project-result,

body[class*="pb-preset-"]
.vokk-reviews-trust-item + .vokk-reviews-trust-item,

body[class*="pb-preset-"]
.vokk-contact-reassurance-item + .vokk-contact-reassurance-item,

body[class*="pb-preset-"]
.vokk-detail-benefit + .vokk-detail-benefit,

body[class*="pb-preset-"]
.vokk-review-card-footer,

body[class*="pb-preset-"]
.agencyfooter-block-bottom {

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


/* ============================================================
   ACCENT LABELS / EYEBROWS / SCORES
   ============================================================ */

body[class*="pb-preset-"]
.pb-hero-subtitle,

body[class*="pb-preset-"]
.pb-vokk-eyebrow,

body[class*="pb-preset-"]
.pb-vokk-trust-label,

body[class*="pb-preset-"]
.pb-vokk-score,

body[class*="pb-preset-"]
.pb-vokk-service-more,

body[class*="pb-preset-"]
[class*="eyebrow"],

body[class*="pb-preset-"]
[class*="small-title"] {

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


/* ============================================================
   ICONEN
   ============================================================ */

body[class*="pb-preset-"]
.pb-vokk-benefit-icon,

body[class*="pb-preset-"]
.pb-vokk-process-icon,

body[class*="pb-preset-"]
.vokk-service-benefit-icon,

body[class*="pb-preset-"]
.vokk-contact-detail-icon,

body[class*="pb-preset-"]
.vokk-contact-reassurance-icon,

body[class*="pb-preset-"]
.vokk-detail-benefit-icon {

    background:
        var(--pb-icon-bg) !important;

    color:
        var(--pb-icon) !important;

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


body[class*="pb-preset-"]
.pb-vokk-benefit-icon svg,

body[class*="pb-preset-"]
.pb-vokk-process-icon svg,

body[class*="pb-preset-"]
.vokk-service-benefit-icon svg,

body[class*="pb-preset-"]
.vokk-contact-detail-icon svg,

body[class*="pb-preset-"]
.vokk-contact-reassurance-icon svg,

body[class*="pb-preset-"]
.vokk-detail-benefit-icon svg {

    color:
        var(--pb-icon) !important;

    fill:
        none;

    stroke:
        currentColor !important;
}


/* ============================================================
   BUTTONS
   ============================================================ */

body[class*="pb-preset-"]
.nuke-main-button,

body[class*="pb-preset-"]
.vokk-cta,

body[class*="pb-preset-"]
.vokk-mobile-cta,

body[class*="pb-preset-"]
.vokk-services-cta-button,

body[class*="pb-preset-"]
.vokk-about-cta-button,

body[class*="pb-preset-"]
.vokk-projects-cta-button,

body[class*="pb-preset-"]
.vokk-reviews-cta-button,

body[class*="pb-preset-"]
.vokk-detail-hero-button,

body[class*="pb-preset-"]
.vokk-detail-cta-button,

body[class*="pb-preset-"]
.vokk-contact-form-slot input[type="submit"] {

    background:
        linear-gradient(
            135deg,
            var(--pb-btn-1) 0%,
            var(--pb-btn-2) 100%
        ) !important;

    color:
        var(--pb-button-text) !important;

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

    box-shadow:
        0 8px 25px
        color-mix(
            in srgb,
            var(--pb-primary) 28%,
            transparent
        ) !important;
}


/* ============================================================
   HEADER
   ============================================================ */

/*
 * Transparant boven hero blijft behouden.
 * Scrolled state krijgt wel complete preset-identiteit.
 */

body[class*="pb-preset-"]
.vokk-header.is-scrolled,

body[class*="pb-preset-"].pb-header-scrolled
.vokk-header {

    background:
        color-mix(
            in srgb,
            var(--pb-header-bg) 90%,
            transparent
        ) !important;

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


body[class*="pb-preset-"]
.vokk-nav a {

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


body[class*="pb-preset-"]
.vokk-nav a:hover,

body[class*="pb-preset-"]
.vokk-nav a:focus,

body[class*="pb-preset-"]
.vokk-nav a.active {

    color:
        var(--pb-primary-light) !important;
}


/* ============================================================
   MOBILE MENU
   ============================================================ */

body[class*="pb-preset-"]
.vokk-mobile-menu {

    background:
        var(--pb-mobile-menu-bg) !important;

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


body[class*="pb-preset-"]
.vokk-mobile-nav a {

    color:
        var(--pb-header-text) !important;

    border-bottom-color:
        color-mix(
            in srgb,
            var(--pb-header-text) 10%,
            transparent
        ) !important;
}


body[class*="pb-preset-"]
.vokk-mobile-nav a:hover,

body[class*="pb-preset-"]
.vokk-mobile-nav a:focus {

    color:
        var(--pb-primary-light) !important;

    background:
        color-mix(
            in srgb,
            var(--pb-primary) 12%,
            transparent
        ) !important;
}


/* ============================================================
   HERO'S
   ============================================================ */

body[class*="pb-preset-"]
.pb-content-hero {

    background:
        var(--pb-hero-bg) !important;
}


body[class*="pb-preset-"]
.pb-content-hero::before {

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--pb-hero-bg) 96%,
                transparent
            ) 0%,

            color-mix(
                in srgb,
                var(--pb-hero-bg) 90%,
                transparent
            ) 24%,

            color-mix(
                in srgb,
                var(--pb-hero-bg) 70%,
                transparent
            ) 44%,

            color-mix(
                in srgb,
                var(--pb-hero-bg) 40%,
                transparent
            ) 64%,

            transparent 100%
        ) !important;
}


body[class*="pb-preset-"]
.pb-content-hero h1 {

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


body[class*="pb-preset-"]
.pb-content-hero p {

    color:
        var(--pb-hero-muted) !important;
}


/*
 * Homepage hero.
 */

body[class*="pb-preset-"]
.kb-block.nuke-v10-master {

    background-color:
        var(--pb-hero-bg) !important;
}


body[class*="pb-preset-"]
.pb-hero-title {

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


body[class*="pb-preset-"]
.pb-hero-text {

    color:
        var(--pb-hero-muted) !important;
}


body[class*="pb-preset-"]
.pb-hero-feature-item {

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


/* ============================================================
   MOBIELE LOSSE HERO TEKSTBLOKKEN
   ============================================================ */

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

    body[class*="pb-preset-"]
    .pb-content-hero,

    body[class*="pb-preset-"]
    .pb-content-hero
    .vokk-services-container,

    body[class*="pb-preset-"]
    .pb-content-hero
    .vokk-about-container,

    body[class*="pb-preset-"]
    .pb-content-hero
    .vokk-projects-container,

    body[class*="pb-preset-"]
    .pb-content-hero
    .vokk-reviews-container,

    body[class*="pb-preset-"]
    .pb-content-hero
    .vokk-contact-container,

    body[class*="pb-preset-"]
    .pb-content-hero
    .vokk-detail-container,

    body[class*="pb-preset-"]
    .kb-block.nuke-v10-master,

    body[class*="pb-preset-"]
    .kb-inner.pb-hero-inner {

        background:
            var(--pb-hero-bg) !important;
    }
}


/* ============================================================
   CTA DONKERE BLOKKEN
   ============================================================ */

body[class*="pb-preset-"]
.vokk-services-cta-box,

body[class*="pb-preset-"]
.vokk-about-cta-box,

body[class*="pb-preset-"]
.vokk-projects-cta-box,

body[class*="pb-preset-"]
.vokk-reviews-cta-box,

body[class*="pb-preset-"]
.vokk-detail-cta-box {

    background:
        radial-gradient(
            circle at 85% 0%,
            var(--pb-glow),
            transparent 350px
        ),
        linear-gradient(
            135deg,
            var(--pb-dark),
            var(--pb-darker)
        ) !important;

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


body[class*="pb-preset-"]
.vokk-services-cta-box h2,

body[class*="pb-preset-"]
.vokk-about-cta-box h2,

body[class*="pb-preset-"]
.vokk-projects-cta-box h2,

body[class*="pb-preset-"]
.vokk-reviews-cta-box h2,

body[class*="pb-preset-"]
.vokk-detail-cta-box h2 {

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


/* ============================================================
   FORMULIEREN
   ============================================================ */

body[class*="pb-preset-"]
.vokk-contact-form-slot input[type="text"],

body[class*="pb-preset-"]
.vokk-contact-form-slot input[type="email"],

body[class*="pb-preset-"]
.vokk-contact-form-slot input[type="tel"],

body[class*="pb-preset-"]
.vokk-contact-form-slot input[type="url"],

body[class*="pb-preset-"]
.vokk-contact-form-slot select,

body[class*="pb-preset-"]
.vokk-contact-form-slot textarea {

    background:
        var(--pb-input-bg) !important;

    color:
        var(--pb-input-text) !important;

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


body[class*="pb-preset-"]
.vokk-contact-form-slot input:focus,

body[class*="pb-preset-"]
.vokk-contact-form-slot select:focus,

body[class*="pb-preset-"]
.vokk-contact-form-slot textarea:focus {

    border-color:
        var(--pb-primary) !important;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--pb-primary) 13%,
            transparent
        ) !important;

    outline:
        none !important;
}


/* ============================================================
   REVIEWS / RATINGS
   ============================================================ */

body[class*="pb-preset-"]
.pb-vokk-stars,

body[class*="pb-preset-"]
.vokk-review-card-stars,

body[class*="pb-preset-"]
.vokk-reviews-stars {

    color:
        var(--pb-rating) !important;
}


body[class*="pb-preset-"]
.vokk-review-avatar {

    background:
        linear-gradient(
            135deg,
            var(--pb-btn-1),
            var(--pb-btn-2)
        ) !important;

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


/* ============================================================
   FOOTER
   ============================================================ */

body[class*="pb-preset-"]
.kb-block-agencyfooter-block,

body[class*="pb-preset-"]
.site-footer {

    background:
        var(--pb-footer-bg) !important;

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


body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-grid h4 {

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


body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-grid p,

body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-grid a,

body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-bottom {

    color:
        var(--pb-footer-muted) !important;
}


body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-grid a:hover {

    color:
        var(--pb-primary-light) !important;
}


/* ============================================================
   SOCIAL BUTTONS
   ============================================================ */

/*
 * Alle kanalen:
 * Facebook
 * Instagram
 * LinkedIn
 * TikTok
 * YouTube
 * X
 * Pinterest
 * WhatsApp
 * Threads
 * GitHub
 *
 * gebruiken dezelfde actieve website-preset.
 */

body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-social-icon {

    background:
        var(--pb-social-bg) !important;

    color:
        var(--pb-social-icon) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--pb-social-icon) 10%,
            transparent
        ) !important;

    box-shadow:
        none !important;
}


body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-social-icon > i,

body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-social-icon > .fa-brands {

    color:
        currentColor !important;
}


body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-social-icon > svg {

    color:
        currentColor !important;

    fill:
        currentColor !important;
}


body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-social-icon:hover,

body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-social-icon:focus {

    background:
        var(--pb-social-hover-bg) !important;

    color:
        var(--pb-social-hover-icon) !important;

    border-color:
        var(--pb-social-hover-bg) !important;

    box-shadow:
        0 8px 22px
        color-mix(
            in srgb,
            var(--pb-social-hover-bg) 28%,
            transparent
        ) !important;
}


/* ============================================================
   TRUST / PROCESS EXTRA ACCENT
   ============================================================ */

body[class*="pb-preset-"]
.pb-vokk-process-number,

body[class*="pb-preset-"]
.vokk-project-result strong,

body[class*="pb-preset-"]
.vokk-reviews-trust-item strong {

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


/* ============================================================
   SERVICE / PROJECT CARD LINKS
   ============================================================ */

body[class*="pb-preset-"]
.pb-vokk-service-more,

body[class*="pb-preset-"]
.vokk-project-content a,

body[class*="pb-preset-"]
.vokk-project-featured-content a {

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


/* ============================================================
   HOVERS VAN NORMALE CARDS
   ============================================================ */

body[class*="pb-preset-"]
.vokk-project-card:hover,

body[class*="pb-preset-"]
.vokk-review-card:hover,

body[class*="pb-preset-"]
.vokk-about-value:hover {

    border-color:
        color-mix(
            in srgb,
            var(--pb-primary) 28%,
            var(--pb-border)
        ) !important;

    box-shadow:
        0 20px 46px
        color-mix(
            in srgb,
            var(--pb-primary) 11%,
            transparent
        ) !important;
}


/* ============================================================
   EINDE PB COMPLETE WEBSITE PALETTE ENGINE V1
   ============================================================ */

/* ============================================================
   PB PALETTE ENGINE V2 EXTENSION START
   ============================================================ */


/* ============================================================
   13. OCEAN BLUE & CORAL
   ============================================================ */

body.pb-preset-ocean_coral {

    --pb-primary: #1677c8;
    --pb-primary-light: #55a8e8;
    --pb-primary-dark: #0c5798;

    --pb-secondary: #123b5d;
    --pb-accent: #ef6f61;

    --pb-dark: #102f46;
    --pb-darker: #081e2d;

    --pb-page-bg: #f3f9fc;
    --pb-surface: #ffffff;
    --pb-surface-soft: #e5f2f7;
    --pb-card-bg: #ffffff;

    --pb-heading: #15384e;
    --pb-text: #35586b;
    --pb-muted: #6d8491;

    --pb-border: #cde2ec;

    --pb-header-bg: #102f46;
    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: #102f46;

    --pb-hero-bg: #102f46;
    --pb-hero-text: #ffffff;
    --pb-hero-muted: #bfd4df;

    --pb-footer-bg: #0a2639;
    --pb-footer-text: #ffffff;
    --pb-footer-muted: #b7ceda;

    --pb-btn-1: #ef7d70;
    --pb-btn-2: #d65347;
    --pb-button-text: #ffffff;

    --pb-icon: #1677c8;
    --pb-icon-bg: #e0f0fa;

    --pb-social-bg: rgba(239,111,97,.14);
    --pb-social-icon: #ffe3df;
    --pb-social-hover-bg: #ef6f61;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #ef6f61;

    --pb-input-bg: #ffffff;
    --pb-input-text: #35586b;

    --pb-glow:
        color-mix(
            in srgb,
            #ef6f61 20%,
            transparent
        );

    --pb-shadow:
        rgba(16,47,70,.13);
}


/* ============================================================
   14. DEEP PLUM & DUSTY ROSE
   ============================================================ */

body.pb-preset-plum_rose {

    --pb-primary: #7b315f;
    --pb-primary-light: #b06091;
    --pb-primary-dark: #55203f;

    --pb-secondary: #4a2940;
    --pb-accent: #d899ad;

    --pb-dark: #352131;
    --pb-darker: #21131e;

    --pb-page-bg: #fcf5f8;
    --pb-surface: #ffffff;
    --pb-surface-soft: #f5e6ed;
    --pb-card-bg: #fffafd;

    --pb-heading: #46283d;
    --pb-text: #61475a;
    --pb-muted: #887180;

    --pb-border: #ead3de;

    --pb-header-bg: #352131;
    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: #352131;

    --pb-hero-bg: #352131;
    --pb-hero-text: #ffffff;
    --pb-hero-muted: #dbc4d2;

    --pb-footer-bg: #291824;
    --pb-footer-text: #fff9fc;
    --pb-footer-muted: #ceb6c5;

    --pb-btn-1: #a94e7d;
    --pb-btn-2: #70294f;
    --pb-button-text: #ffffff;

    --pb-icon: #8d3768;
    --pb-icon-bg: #f3dfe8;

    --pb-social-bg: rgba(216,153,173,.14);
    --pb-social-icon: #f8dce5;
    --pb-social-hover-bg: #b06091;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #d899ad;

    --pb-input-bg: #fffafd;
    --pb-input-text: #61475a;

    --pb-glow:
        color-mix(
            in srgb,
            #b06091 20%,
            transparent
        );

    --pb-shadow:
        rgba(70,40,61,.13);
}


/* ============================================================
   15. OLIVE GREEN & COPPER
   ============================================================ */

body.pb-preset-olive_copper {

    --pb-primary: #687744;
    --pb-primary-light: #93a566;
    --pb-primary-dark: #49572d;

    --pb-secondary: #4b5037;
    --pb-accent: #b66a3c;

    --pb-dark: #343b28;
    --pb-darker: #22271a;

    --pb-page-bg: #faf8ee;
    --pb-surface: #fffdf7;
    --pb-surface-soft: #f0ecdc;
    --pb-card-bg: #fffdf7;

    --pb-heading: #39402d;
    --pb-text: #535946;
    --pb-muted: #7e8171;

    --pb-border: #ddd8c7;

    --pb-header-bg: #343b28;
    --pb-header-text: #fffdf7;
    --pb-mobile-menu-bg: #343b28;

    --pb-hero-bg: #343b28;
    --pb-hero-text: #fffdf7;
    --pb-hero-muted: #cdd0bd;

    --pb-footer-bg: #292f20;
    --pb-footer-text: #fffdf7;
    --pb-footer-muted: #c1c5b0;

    --pb-btn-1: #c77a4c;
    --pb-btn-2: #9b512d;
    --pb-button-text: #ffffff;

    --pb-icon: #687744;
    --pb-icon-bg: #e9ecd9;

    --pb-social-bg: rgba(182,106,60,.14);
    --pb-social-icon: #f4dacb;
    --pb-social-hover-bg: #b66a3c;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #b66a3c;

    --pb-input-bg: #fffdf7;
    --pb-input-text: #535946;

    --pb-glow:
        color-mix(
            in srgb,
            #b66a3c 18%,
            transparent
        );

    --pb-shadow:
        rgba(52,59,40,.13);
}


/* ============================================================
   16. ICE BLUE & DEEP NAVY
   ============================================================ */

body.pb-preset-ice_navy {

    --pb-primary: #529bd7;
    --pb-primary-light: #8bc7ed;
    --pb-primary-dark: #326da0;

    --pb-secondary: #19375d;
    --pb-accent: #86d7ec;

    --pb-dark: #132c4b;
    --pb-darker: #0a1b31;

    --pb-page-bg: #f4f9fd;
    --pb-surface: #ffffff;
    --pb-surface-soft: #e8f2f9;
    --pb-card-bg: #ffffff;

    --pb-heading: #1c3855;
    --pb-text: #405b72;
    --pb-muted: #718798;

    --pb-border: #d1e3ee;

    --pb-header-bg: #132c4b;
    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: #132c4b;

    --pb-hero-bg: #132c4b;
    --pb-hero-text: #ffffff;
    --pb-hero-muted: #c7ddeb;

    --pb-footer-bg: #0d223b;
    --pb-footer-text: #ffffff;
    --pb-footer-muted: #b9cfde;

    --pb-btn-1: #67b7e5;
    --pb-btn-2: #347dae;
    --pb-button-text: #ffffff;

    --pb-icon: #529bd7;
    --pb-icon-bg: #deeff9;

    --pb-social-bg: rgba(134,215,236,.14);
    --pb-social-icon: #dcf6fc;
    --pb-social-hover-bg: #529bd7;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #67b7e5;

    --pb-input-bg: #ffffff;
    --pb-input-text: #405b72;

    --pb-glow:
        color-mix(
            in srgb,
            #529bd7 21%,
            transparent
        );

    --pb-shadow:
        rgba(19,44,75,.13);
}


/* ============================================================
   17. CRIMSON & GRAPHITE
   ============================================================ */

body.pb-preset-crimson_graphite {

    --pb-primary: #c6283e;
    --pb-primary-light: #ec5b6d;
    --pb-primary-dark: #8d1829;

    --pb-secondary: #3f444a;
    --pb-accent: #ef5368;

    --pb-dark: #292d31;
    --pb-darker: #171a1d;

    --pb-page-bg: #f7f7f7;
    --pb-surface: #ffffff;
    --pb-surface-soft: #ededed;
    --pb-card-bg: #ffffff;

    --pb-heading: #292d31;
    --pb-text: #4b5055;
    --pb-muted: #777d82;

    --pb-border: #d8dadd;

    --pb-header-bg: #292d31;
    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: #292d31;

    --pb-hero-bg: #292d31;
    --pb-hero-text: #ffffff;
    --pb-hero-muted: #c8cacc;

    --pb-footer-bg: #202326;
    --pb-footer-text: #ffffff;
    --pb-footer-muted: #babdc0;

    --pb-btn-1: #df3d54;
    --pb-btn-2: #ac1f34;
    --pb-button-text: #ffffff;

    --pb-icon: #c6283e;
    --pb-icon-bg: #f7e0e4;

    --pb-social-bg: rgba(198,40,62,.14);
    --pb-social-icon: #ffdfe4;
    --pb-social-hover-bg: #c6283e;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #e14b60;

    --pb-input-bg: #ffffff;
    --pb-input-text: #4b5055;

    --pb-glow:
        color-mix(
            in srgb,
            #c6283e 22%,
            transparent
        );

    --pb-shadow:
        rgba(41,45,49,.15);
}


/* ============================================================
   18. LAVENDER & INK
   ============================================================ */

body.pb-preset-lavender_ink {

    --pb-primary: #8066c2;
    --pb-primary-light: #b4a4e4;
    --pb-primary-dark: #594497;

    --pb-secondary: #303248;
    --pb-accent: #c4afea;

    --pb-dark: #292a3d;
    --pb-darker: #181925;

    --pb-page-bg: #faf8ff;
    --pb-surface: #ffffff;
    --pb-surface-soft: #eeeafa;
    --pb-card-bg: #ffffff;

    --pb-heading: #34334d;
    --pb-text: #55546d;
    --pb-muted: #807e94;

    --pb-border: #ddd9eb;

    --pb-header-bg: #292a3d;
    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: #292a3d;

    --pb-hero-bg: #292a3d;
    --pb-hero-text: #ffffff;
    --pb-hero-muted: #ccc8dc;

    --pb-footer-bg: #202132;
    --pb-footer-text: #ffffff;
    --pb-footer-muted: #bbb8cc;

    --pb-btn-1: #9178d2;
    --pb-btn-2: #6550a8;
    --pb-button-text: #ffffff;

    --pb-icon: #8066c2;
    --pb-icon-bg: #ebe4fa;

    --pb-social-bg: rgba(180,164,228,.15);
    --pb-social-icon: #ede8ff;
    --pb-social-hover-bg: #8066c2;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #a994df;

    --pb-input-bg: #ffffff;
    --pb-input-text: #55546d;

    --pb-glow:
        color-mix(
            in srgb,
            #8066c2 21%,
            transparent
        );

    --pb-shadow:
        rgba(41,42,61,.13);
}


/* ============================================================
   19. DESERT SAND & TERRACOTTA
   ============================================================ */

body.pb-preset-desert_terracotta {

    --pb-primary: #b85f3d;
    --pb-primary-light: #dc8a68;
    --pb-primary-dark: #82412c;

    --pb-secondary: #665342;
    --pb-accent: #d89661;

    --pb-dark: #4a352c;
    --pb-darker: #30221d;

    --pb-page-bg: #fff7eb;
    --pb-surface: #fffdf7;
    --pb-surface-soft: #f5ead8;
    --pb-card-bg: #fffdf7;

    --pb-heading: #4a372c;
    --pb-text: #675347;
    --pb-muted: #907d70;

    --pb-border: #e6d6c2;

    --pb-header-bg: #4a352c;
    --pb-header-text: #fffaf3;
    --pb-mobile-menu-bg: #4a352c;

    --pb-hero-bg: #4a352c;
    --pb-hero-text: #fffaf3;
    --pb-hero-muted: #ddcdc0;

    --pb-footer-bg: #392920;
    --pb-footer-text: #fffaf3;
    --pb-footer-muted: #cebbae;

    --pb-btn-1: #cd7350;
    --pb-btn-2: #a04d31;
    --pb-button-text: #ffffff;

    --pb-icon: #b85f3d;
    --pb-icon-bg: #f6e3d9;

    --pb-social-bg: rgba(216,150,97,.16);
    --pb-social-icon: #fae3d3;
    --pb-social-hover-bg: #b85f3d;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #d89661;

    --pb-input-bg: #fffdf7;
    --pb-input-text: #675347;

    --pb-glow:
        color-mix(
            in srgb,
            #b85f3d 20%,
            transparent
        );

    --pb-shadow:
        rgba(74,53,44,.13);
}


/* ============================================================
   20. ELECTRIC CYAN & MIDNIGHT
   ============================================================ */

body.pb-preset-cyan_midnight {

    --pb-primary: #00bcd4;
    --pb-primary-light: #4de7f4;
    --pb-primary-dark: #00879a;

    --pb-secondary: #172554;
    --pb-accent: #22d3ee;

    --pb-dark: #111b36;
    --pb-darker: #080f22;

    --pb-page-bg: #f2fafd;
    --pb-surface: #ffffff;
    --pb-surface-soft: #e2f3f7;
    --pb-card-bg: #ffffff;

    --pb-heading: #152747;
    --pb-text: #38566d;
    --pb-muted: #708694;

    --pb-border: #cae4ea;

    --pb-header-bg: #111b36;
    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: #111b36;

    --pb-hero-bg: #111b36;
    --pb-hero-text: #ffffff;
    --pb-hero-muted: #bed3df;

    --pb-footer-bg: #0a142b;
    --pb-footer-text: #ffffff;
    --pb-footer-muted: #abc4d2;

    --pb-btn-1: #22d3ee;
    --pb-btn-2: #0891b2;
    --pb-button-text: #071724;

    --pb-icon: #00a9bf;
    --pb-icon-bg: #d8f5f8;

    --pb-social-bg: rgba(34,211,238,.15);
    --pb-social-icon: #cffafe;
    --pb-social-hover-bg: #00bcd4;
    --pb-social-hover-icon: #071724;

    --pb-rating: #22d3ee;

    --pb-input-bg: #ffffff;
    --pb-input-text: #38566d;

    --pb-glow:
        color-mix(
            in srgb,
            #00bcd4 24%,
            transparent
        );

    --pb-shadow:
        rgba(17,27,54,.15);
}


/* ============================================================
   21. MOSS GREEN & MUSTARD
   ============================================================ */

body.pb-preset-moss_mustard {

    --pb-primary: #536b3d;
    --pb-primary-light: #829b62;
    --pb-primary-dark: #3a4c2a;

    --pb-secondary: #48503c;
    --pb-accent: #d1a82d;

    --pb-dark: #35402c;
    --pb-darker: #222a1d;

    --pb-page-bg: #faf8ee;
    --pb-surface: #fffdf6;
    --pb-surface-soft: #efecdd;
    --pb-card-bg: #fffdf6;

    --pb-heading: #384330;
    --pb-text: #555f4d;
    --pb-muted: #7e8677;

    --pb-border: #ddd9c8;

    --pb-header-bg: #35402c;
    --pb-header-text: #fffdf6;
    --pb-mobile-menu-bg: #35402c;

    --pb-hero-bg: #35402c;
    --pb-hero-text: #fffdf6;
    --pb-hero-muted: #ccd2c2;

    --pb-footer-bg: #293322;
    --pb-footer-text: #fffdf6;
    --pb-footer-muted: #bdc5b2;

    --pb-btn-1: #d9b640;
    --pb-btn-2: #aa8519;
    --pb-button-text: #2d301f;

    --pb-icon: #607849;
    --pb-icon-bg: #e7ebdc;

    --pb-social-bg: rgba(209,168,45,.15);
    --pb-social-icon: #f5e9b8;
    --pb-social-hover-bg: #d1a82d;
    --pb-social-hover-icon: #2d301f;

    --pb-rating: #d1a82d;

    --pb-input-bg: #fffdf6;
    --pb-input-text: #555f4d;

    --pb-glow:
        color-mix(
            in srgb,
            #d1a82d 19%,
            transparent
        );

    --pb-shadow:
        rgba(53,64,44,.13);
}


/* ============================================================
   22. RUBY RED & CHARCOAL
   ============================================================ */

body.pb-preset-ruby_charcoal {

    --pb-primary: #ad2440;
    --pb-primary-light: #dd5972;
    --pb-primary-dark: #78162c;

    --pb-secondary: #34363b;
    --pb-accent: #d64761;

    --pb-dark: #26282d;
    --pb-darker: #15171a;

    --pb-page-bg: #f8f6f6;
    --pb-surface: #ffffff;
    --pb-surface-soft: #eee9ea;
    --pb-card-bg: #ffffff;

    --pb-heading: #2e3035;
    --pb-text: #505258;
    --pb-muted: #7b7d82;

    --pb-border: #dcdadd;

    --pb-header-bg: #26282d;
    --pb-header-text: #ffffff;
    --pb-mobile-menu-bg: #26282d;

    --pb-hero-bg: #26282d;
    --pb-hero-text: #ffffff;
    --pb-hero-muted: #c9c9cc;

    --pb-footer-bg: #1d1f23;
    --pb-footer-text: #ffffff;
    --pb-footer-muted: #bdbdc1;

    --pb-btn-1: #cb3855;
    --pb-btn-2: #941c35;
    --pb-button-text: #ffffff;

    --pb-icon: #ad2440;
    --pb-icon-bg: #f5dfe4;

    --pb-social-bg: rgba(221,89,114,.14);
    --pb-social-icon: #ffdce3;
    --pb-social-hover-bg: #ad2440;
    --pb-social-hover-icon: #ffffff;

    --pb-rating: #d64761;

    --pb-input-bg: #ffffff;
    --pb-input-text: #505258;

    --pb-glow:
        color-mix(
            in srgb,
            #ad2440 22%,
            transparent
        );

    --pb-shadow:
        rgba(38,40,45,.15);
}


/* ============================================================
   ALLE 22 PALETTEN:
   STERKERE DONKERE KLEURIDENTITEIT
   ============================================================ */

body[class*="pb-preset-"] {

    --pb-dark-block-1:
        color-mix(
            in srgb,
            var(--pb-dark) 82%,
            var(--pb-primary) 18%
        );

    --pb-dark-block-2:
        color-mix(
            in srgb,
            var(--pb-darker) 90%,
            var(--pb-primary-dark) 10%
        );

    --pb-dark-block-highlight:
        color-mix(
            in srgb,
            var(--pb-primary-light) 16%,
            transparent
        );

    --pb-footer-gradient-1:
        color-mix(
            in srgb,
            var(--pb-footer-bg) 84%,
            var(--pb-primary-dark) 16%
        );

    --pb-footer-gradient-2:
        color-mix(
            in srgb,
            var(--pb-darker) 88%,
            var(--pb-primary) 12%
        );

    --pb-footer-border:
        color-mix(
            in srgb,
            var(--pb-primary-light) 22%,
            transparent
        );
}


/* ============================================================
   DONKERE CTA BLOKKEN MEER LATEN MEEKLEUREN
   ============================================================ */

body[class*="pb-preset-"]
.vokk-services-cta-box,

body[class*="pb-preset-"]
.vokk-about-cta-box,

body[class*="pb-preset-"]
.vokk-projects-cta-box,

body[class*="pb-preset-"]
.vokk-reviews-cta-box,

body[class*="pb-preset-"]
.vokk-detail-cta-box {

    background:
        radial-gradient(
            circle at 85% 0%,
            var(--pb-dark-block-highlight),
            transparent 360px
        ),
        linear-gradient(
            135deg,
            var(--pb-dark-block-1) 0%,
            var(--pb-dark-block-2) 100%
        ) !important;

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


/* ============================================================
   HOMEPAGE DONKERE HERO / MASTER BLOK
   ============================================================ */

body[class*="pb-preset-"]
.kb-block.nuke-v10-master {

    background:
        radial-gradient(
            circle at 80% 5%,
            color-mix(
                in srgb,
                var(--pb-primary) 15%,
                transparent
            ),
            transparent 480px
        ),
        linear-gradient(
            135deg,
            var(--pb-dark-block-1) 0%,
            var(--pb-dark-block-2) 100%
        ) !important;
}


/* Mobiel tekstvlak blijft dezelfde paletidentiteit houden */

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

    body[class*="pb-preset-"]
    .kb-block.nuke-v10-master,

    body[class*="pb-preset-"]
    .kb-inner.pb-hero-inner {

        background:
            linear-gradient(
                145deg,
                var(--pb-dark-block-1) 0%,
                var(--pb-dark-block-2) 100%
            ) !important;
    }
}


/* ============================================================
   CONTENT HERO:
   DONKER MAAR NIET MEER ALTIJD "ZWART"
   ============================================================ */

body[class*="pb-preset-"]
.pb-content-hero {

    background:
        linear-gradient(
            135deg,
            var(--pb-dark-block-1),
            var(--pb-dark-block-2)
        ) !important;
}


/* ============================================================
   FOOTER VEEL STERKER MEEKLEUREN
   ============================================================ */

body[class*="pb-preset-"]
.kb-block-agencyfooter-block,

body[class*="pb-preset-"]
.site-footer {

    background:
        radial-gradient(
            circle at 15% 0%,
            color-mix(
                in srgb,
                var(--pb-primary) 18%,
                transparent
            ),
            transparent 420px
        ),
        radial-gradient(
            circle at 95% 100%,
            color-mix(
                in srgb,
                var(--pb-accent) 12%,
                transparent
            ),
            transparent 430px
        ),
        linear-gradient(
            145deg,
            var(--pb-footer-gradient-1) 0%,
            var(--pb-footer-gradient-2) 100%
        ) !important;
}


/* Footer kolomtitels */

body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-grid h4 {

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


/* Footer normale tekst */

body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-grid p {

    color:
        var(--pb-footer-muted) !important;
}


/* Footer links */

body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-grid a {

    color:
        color-mix(
            in srgb,
            var(--pb-footer-text) 72%,
            var(--pb-primary-light) 28%
        ) !important;
}


body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-grid a:hover,

body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-grid a:focus {

    color:
        var(--pb-primary-light) !important;
}


/* Footer scheidingslijn */

body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-bottom {

    border-top-color:
        var(--pb-footer-border) !important;

    color:
        var(--pb-footer-muted) !important;
}


/* ============================================================
   SOCIAL BUTTONS NOG DUIDELIJKER AAN PALET
   ============================================================ */

body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-social-icon {

    background:
        color-mix(
            in srgb,
            var(--pb-social-bg) 70%,
            var(--pb-primary) 30%
        ) !important;

    color:
        var(--pb-social-icon) !important;

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


body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-social-icon:hover,

body[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-social-icon:focus {

    background:
        linear-gradient(
            135deg,
            var(--pb-social-hover-bg),
            var(--pb-primary-dark)
        ) !important;

    color:
        var(--pb-social-hover-icon) !important;

    border-color:
        var(--pb-primary-light) !important;

    box-shadow:
        0 9px 24px
        color-mix(
            in srgb,
            var(--pb-primary) 32%,
            transparent
        ) !important;
}


/* ============================================================
   DONKERE CARD / TILE ELEMENTEN
   ============================================================ */

body[class*="pb-preset-"]
.pb-hero-tile {

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

    box-shadow:
        0 18px 44px
        color-mix(
            in srgb,
            var(--pb-primary) 12%,
            rgba(0,0,0,.35)
        ) !important;
}


body[class*="pb-preset-"]
.pb-hero-tile-icon {

    background:
        linear-gradient(
            135deg,
            var(--pb-primary-light),
            var(--pb-primary-dark)
        ) !important;
}


/* ============================================================
   FOOTER / DARK BLOK ACCENT OP MOBIEL OOK BEHOUDEN
   ============================================================ */

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

    body[class*="pb-preset-"]
    .kb-block-agencyfooter-block {

        background:
            radial-gradient(
                circle at 50% 0%,
                color-mix(
                    in srgb,
                    var(--pb-primary) 17%,
                    transparent
                ),
                transparent 300px
            ),
            linear-gradient(
                180deg,
                var(--pb-footer-gradient-1),
                var(--pb-footer-gradient-2)
            ) !important;
    }
}


/* ============================================================
   PB PALETTE ENGINE V2 EXTENSION END
   ============================================================ */

/* ============================================================
   PB LIGHT MEDIUM DARK MODE V1 START
   ============================================================ */


/* ============================================================
   MEDIUM
   ============================================================
 *
 * BELANGRIJK:
 *
 * Medium is exact de bestaande palette-engine.
 * Daarom worden hier GEEN kleuren overschreven.
 *
 * Wat de gebruiker nu ziet blijft dus exact hetzelfde.
 */

body.pb-mode-medium[class*="pb-preset-"] {

    color-scheme:
        light;
}


/* ============================================================
   LIGHT
   ============================================================
 *
 * Zelfde gekozen kleurpalet.
 *
 * Verschil:
 * - lichtere achtergronden
 * - lichtere kaarten
 * - zachtere borders
 * - lichtere hero
 * - lichtere CTA-blokken
 * - lichtere footer
 * - veel minder "zwarte" vlakken
 */

body.pb-mode-light[class*="pb-preset-"] {

    color-scheme:
        light;

    --pb-light-page:
        color-mix(
            in srgb,
            var(--pb-page-bg) 96%,
            white 4%
        );

    --pb-light-surface:
        color-mix(
            in srgb,
            var(--pb-surface) 94%,
            white 6%
        );

    --pb-light-soft:
        color-mix(
            in srgb,
            var(--pb-surface-soft) 80%,
            white 20%
        );

    --pb-light-card:
        color-mix(
            in srgb,
            var(--pb-card-bg) 92%,
            white 8%
        );

    --pb-light-heading:
        color-mix(
            in srgb,
            var(--pb-heading) 84%,
            var(--pb-primary-dark) 16%
        );

    --pb-light-text:
        color-mix(
            in srgb,
            var(--pb-text) 88%,
            white 12%
        );

    --pb-light-muted:
        color-mix(
            in srgb,
            var(--pb-muted) 84%,
            white 16%
        );

    --pb-light-border:
        color-mix(
            in srgb,
            var(--pb-border) 76%,
            white 24%
        );

    --pb-light-dark-block-1:
        color-mix(
            in srgb,
            var(--pb-primary) 16%,
            #f8fafc 84%
        );

    --pb-light-dark-block-2:
        color-mix(
            in srgb,
            var(--pb-primary-dark) 20%,
            #eef3f8 80%
        );

    --pb-light-dark-text:
        color-mix(
            in srgb,
            var(--pb-heading) 88%,
            var(--pb-primary-dark) 12%
        );

    --pb-light-dark-muted:
        color-mix(
            in srgb,
            var(--pb-muted) 86%,
            var(--pb-primary) 14%
        );

    --pb-light-footer-1:
        color-mix(
            in srgb,
            var(--pb-primary) 12%,
            #f5f7fa 88%
        );

    --pb-light-footer-2:
        color-mix(
            in srgb,
            var(--pb-primary-dark) 16%,
            #e8edf3 84%
        );

    --pb-light-footer-text:
        color-mix(
            in srgb,
            var(--pb-heading) 90%,
            var(--pb-primary-dark) 10%
        );

    --pb-light-footer-muted:
        color-mix(
            in srgb,
            var(--pb-muted) 82%,
            var(--pb-primary) 18%
        );

    --pb-light-shadow:
        color-mix(
            in srgb,
            var(--pb-primary) 8%,
            rgba(15,23,42,.07)
        );
}


/* ============================================================
   LIGHT — BODY / BASIS
   ============================================================ */

body.pb-mode-light[class*="pb-preset-"] {

    background:
        var(--pb-light-page) !important;

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


/* ============================================================
   LIGHT — PAGE WRAPPERS
   ============================================================ */

body.pb-mode-light .vokk-default-page,

body.pb-mode-light .vokk-services-page,

body.pb-mode-light .vokk-about-page,

body.pb-mode-light .vokk-projects-page,

body.pb-mode-light .vokk-reviews-page,

body.pb-mode-light .vokk-contact-page,

body.pb-mode-light .vokk-detail-page {

    background:
        var(--pb-light-page) !important;

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


/* ============================================================
   LIGHT — NORMALE LICHTE SECTIES
   ============================================================ */

body.pb-mode-light .pb-vokk-light {

    background:
        radial-gradient(
            circle at 50% -120px,
            color-mix(
                in srgb,
                var(--pb-primary) 7%,
                transparent
            ),
            transparent 360px
        ),
        linear-gradient(
            180deg,
            var(--pb-light-page),
            var(--pb-light-soft)
        ) !important;

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


body.pb-mode-light .pb-vokk-process,

body.pb-mode-light .vokk-about-values,

body.pb-mode-light .vokk-reviews-trust,

body.pb-mode-light .vokk-contact-reassurance,

body.pb-mode-light .vokk-detail-benefits,

body.pb-mode-light .vokk-detail-process {

    background:
        var(--pb-light-soft) !important;

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


/* ============================================================
   LIGHT — CARDS
   ============================================================ */

body.pb-mode-light .pb-vokk-trust-box,

body.pb-mode-light .vokk-about-value,

body.pb-mode-light .vokk-about-stat,

body.pb-mode-light .vokk-project-card,

body.pb-mode-light .vokk-review-card,

body.pb-mode-light .vokk-reviews-score,

body.pb-mode-light .vokk-reviews-wordpress-box,

body.pb-mode-light .vokk-contact-form-panel,

body.pb-mode-light .vokk-detail-step {

    background:
        var(--pb-light-card) !important;

    border-color:
        var(--pb-light-border) !important;

    box-shadow:
        0 12px 32px
        var(--pb-light-shadow) !important;
}


/* ============================================================
   LIGHT — HERO
   ============================================================ */

body.pb-mode-light .pb-content-hero {

    background:
        linear-gradient(
            135deg,
            var(--pb-light-dark-block-1),
            var(--pb-light-dark-block-2)
        ) !important;
}


body.pb-mode-light .pb-content-hero::before {

    background:
        linear-gradient(
            90deg,

            color-mix(
                in srgb,
                var(--pb-light-dark-block-1) 94%,
                transparent
            ) 0%,

            color-mix(
                in srgb,
                var(--pb-light-dark-block-1) 84%,
                transparent
            ) 30%,

            color-mix(
                in srgb,
                var(--pb-light-dark-block-2) 56%,
                transparent
            ) 56%,

            transparent 100%
        ) !important;
}


body.pb-mode-light .pb-content-hero h1,

body.pb-mode-light .pb-content-hero h2 {

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


body.pb-mode-light .pb-content-hero p {

    color:
        var(--pb-light-dark-muted) !important;
}


/* ============================================================
   LIGHT — HOMEPAGE HERO
   ============================================================ */

body.pb-mode-light
.kb-block.nuke-v10-master {

    background:
        radial-gradient(
            circle at 80% 5%,
            color-mix(
                in srgb,
                var(--pb-primary) 10%,
                transparent
            ),
            transparent 480px
        ),
        linear-gradient(
            145deg,
            var(--pb-light-dark-block-1),
            var(--pb-light-dark-block-2)
        ) !important;
}


body.pb-mode-light
.pb-hero-title {

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


body.pb-mode-light
.pb-hero-text,

body.pb-mode-light
.pb-hero-feature-item {

    color:
        var(--pb-light-dark-muted) !important;
}


/* ============================================================
   LIGHT — CTA BLOKKEN
   ============================================================ */

body.pb-mode-light .vokk-services-cta-box,

body.pb-mode-light .vokk-about-cta-box,

body.pb-mode-light .vokk-projects-cta-box,

body.pb-mode-light .vokk-reviews-cta-box,

body.pb-mode-light .vokk-detail-cta-box {

    background:
        radial-gradient(
            circle at 85% 0%,
            color-mix(
                in srgb,
                var(--pb-primary) 12%,
                transparent
            ),
            transparent 360px
        ),
        linear-gradient(
            135deg,
            var(--pb-light-dark-block-1),
            var(--pb-light-dark-block-2)
        ) !important;

    color:
        var(--pb-light-dark-text) !important;

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


body.pb-mode-light .vokk-services-cta-box h2,

body.pb-mode-light .vokk-about-cta-box h2,

body.pb-mode-light .vokk-projects-cta-box h2,

body.pb-mode-light .vokk-reviews-cta-box h2,

body.pb-mode-light .vokk-detail-cta-box h2 {

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


body.pb-mode-light .vokk-services-cta-box p,

body.pb-mode-light .vokk-about-cta-box p,

body.pb-mode-light .vokk-projects-cta-box p,

body.pb-mode-light .vokk-reviews-cta-box p,

body.pb-mode-light .vokk-detail-cta-box p {

    color:
        var(--pb-light-dark-muted) !important;
}


/* ============================================================
   LIGHT — FOOTER
   ============================================================ */

body.pb-mode-light
.kb-block-agencyfooter-block,

body.pb-mode-light
.site-footer {

    background:
        radial-gradient(
            circle at 15% 0%,
            color-mix(
                in srgb,
                var(--pb-primary) 9%,
                transparent
            ),
            transparent 420px
        ),
        linear-gradient(
            145deg,
            var(--pb-light-footer-1),
            var(--pb-light-footer-2)
        ) !important;

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


body.pb-mode-light
.kb-block-agencyfooter-block
.agencyfooter-block-grid h4 {

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


body.pb-mode-light
.kb-block-agencyfooter-block
.agencyfooter-block-grid p,

body.pb-mode-light
.kb-block-agencyfooter-block
.agencyfooter-block-grid a,

body.pb-mode-light
.kb-block-agencyfooter-block
.agencyfooter-block-bottom {

    color:
        var(--pb-light-footer-muted) !important;
}


body.pb-mode-light
.kb-block-agencyfooter-block
.agencyfooter-block-grid a:hover {

    color:
        var(--pb-primary-dark) !important;
}


body.pb-mode-light
.kb-block-agencyfooter-block
.agencyfooter-social-icon {

    background:
        color-mix(
            in srgb,
            var(--pb-primary) 10%,
            white
        ) !important;

    color:
        var(--pb-primary-dark) !important;

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


/* ============================================================
   LIGHT — FORMS
   ============================================================ */

body.pb-mode-light
.vokk-contact-form-slot
input[type="text"],

body.pb-mode-light
.vokk-contact-form-slot
input[type="email"],

body.pb-mode-light
.vokk-contact-form-slot
input[type="tel"],

body.pb-mode-light
.vokk-contact-form-slot
input[type="url"],

body.pb-mode-light
.vokk-contact-form-slot select,

body.pb-mode-light
.vokk-contact-form-slot textarea {

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

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

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


/* ============================================================
   DARK
   ============================================================
 *
 * Zelfde gekozen kleurpalet.
 *
 * Verschil:
 * - donkere pagina
 * - donkere lichte-secties
 * - donkere cards
 * - donkere formulieren
 * - donkerdere hero
 * - donkerdere footer
 * - primaire paletkleur blijft zichtbaar
 */

body.pb-mode-dark[class*="pb-preset-"] {

    color-scheme:
        dark;

    --pb-dark-page:
        color-mix(
            in srgb,
            var(--pb-darker) 92%,
            #11151a 8%
        );

    --pb-dark-surface:
        color-mix(
            in srgb,
            var(--pb-dark) 86%,
            #242a31 14%
        );

    --pb-dark-soft:
        color-mix(
            in srgb,
            var(--pb-dark) 90%,
            var(--pb-primary) 10%
        );

    --pb-dark-card:
        color-mix(
            in srgb,
            var(--pb-dark) 89%,
            #ffffff 11%
        );

    --pb-dark-heading:
        #f4f7fb;

    --pb-dark-text:
        #dce4ec;

    --pb-dark-muted:
        #9faeba;

    --pb-dark-border:
        color-mix(
            in srgb,
            var(--pb-primary-light) 18%,
            rgba(255,255,255,.08)
        );

    --pb-dark-input:
        color-mix(
            in srgb,
            var(--pb-dark) 85%,
            #ffffff 15%
        );

    --pb-dark-hero-1:
        color-mix(
            in srgb,
            var(--pb-darker) 82%,
            var(--pb-primary-dark) 18%
        );

    --pb-dark-hero-2:
        color-mix(
            in srgb,
            var(--pb-darker) 92%,
            var(--pb-primary) 8%
        );

    --pb-dark-footer-1:
        color-mix(
            in srgb,
            var(--pb-footer-bg) 78%,
            var(--pb-primary-dark) 22%
        );

    --pb-dark-footer-2:
        color-mix(
            in srgb,
            var(--pb-darker) 90%,
            var(--pb-primary) 10%
        );

    --pb-dark-shadow:
        rgba(0,0,0,.34);
}


/* ============================================================
   DARK — BODY
   ============================================================ */

body.pb-mode-dark[class*="pb-preset-"] {

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

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


/* ============================================================
   DARK — PAGE WRAPPERS
   ============================================================ */

body.pb-mode-dark .vokk-default-page,

body.pb-mode-dark .vokk-services-page,

body.pb-mode-dark .vokk-about-page,

body.pb-mode-dark .vokk-projects-page,

body.pb-mode-dark .vokk-reviews-page,

body.pb-mode-dark .vokk-contact-page,

body.pb-mode-dark .vokk-detail-page {

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

    color:
        var(--pb-dark-text) !important;

    --text:
        var(--pb-dark-text) !important;

    --muted:
        var(--pb-dark-muted) !important;

    --border:
        var(--pb-dark-border) !important;

    --soft:
        var(--pb-dark-soft) !important;
}


/* ============================================================
   DARK — HEADINGS
   ============================================================ */

body.pb-mode-dark .pb-vokk-heading,

body.pb-mode-dark .vokk-default-page h1,

body.pb-mode-dark .vokk-default-content h2,

body.pb-mode-dark .vokk-default-content h3,

body.pb-mode-dark .vokk-services-intro h2,

body.pb-mode-dark .vokk-service-content h2,

body.pb-mode-dark .vokk-about-intro h2,

body.pb-mode-dark .vokk-about-story-content h2,

body.pb-mode-dark .vokk-about-values-head h2,

body.pb-mode-dark .vokk-about-experience-content h2,

body.pb-mode-dark .vokk-about-value h3,

body.pb-mode-dark .vokk-projects-intro h2,

body.pb-mode-dark .vokk-project-content h2,

body.pb-mode-dark .vokk-project-featured-content h2,

body.pb-mode-dark .vokk-project-results-head h2,

body.pb-mode-dark .vokk-reviews-summary-copy h2,

body.pb-mode-dark .vokk-reviews-wordpress-box h2,

body.pb-mode-dark .vokk-contact-info h2,

body.pb-mode-dark .vokk-contact-form-head h2,

body.pb-mode-dark .vokk-contact-extra-copy h2,

body.pb-mode-dark .vokk-detail-intro h2,

body.pb-mode-dark .vokk-detail-content h2,

body.pb-mode-dark .vokk-detail-process-head h2,

body.pb-mode-dark .vokk-detail-faq-intro h2 {

    color:
        var(--pb-dark-heading) !important;
}


/* ============================================================
   DARK — CONTENT TEXT
   ============================================================ */

body.pb-mode-dark .pb-vokk-benefit p,

body.pb-mode-dark .pb-vokk-process-intro,

body.pb-mode-dark .pb-vokk-process-item p,

body.pb-mode-dark .vokk-review-card-text,

body.pb-mode-dark .vokk-default-content {

    color:
        var(--pb-dark-muted) !important;
}


/* ============================================================
   DARK — LIGHT / SOFT SECTIONS
   ============================================================ */

body.pb-mode-dark .pb-vokk-light {

    background:
        radial-gradient(
            circle at 50% -100px,
            color-mix(
                in srgb,
                var(--pb-primary) 11%,
                transparent
            ),
            transparent 380px
        ),
        linear-gradient(
            180deg,
            var(--pb-dark-page),
            var(--pb-dark-soft)
        ) !important;

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


body.pb-mode-dark .pb-vokk-process,

body.pb-mode-dark .vokk-about-values,

body.pb-mode-dark .vokk-reviews-trust,

body.pb-mode-dark .vokk-contact-reassurance,

body.pb-mode-dark .vokk-detail-benefits,

body.pb-mode-dark .vokk-detail-process {

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

    color:
        var(--pb-dark-text) !important;

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


/* ============================================================
   DARK — CARDS
   ============================================================ */

body.pb-mode-dark .pb-vokk-trust-box,

body.pb-mode-dark .vokk-about-value,

body.pb-mode-dark .vokk-about-stat,

body.pb-mode-dark .vokk-project-card,

body.pb-mode-dark .vokk-review-card,

body.pb-mode-dark .vokk-reviews-score,

body.pb-mode-dark .vokk-reviews-wordpress-box,

body.pb-mode-dark .vokk-contact-form-panel,

body.pb-mode-dark .vokk-detail-step {

    background:
        linear-gradient(
            145deg,

            var(--pb-dark-card),

            color-mix(
                in srgb,
                var(--pb-dark-card) 91%,
                var(--pb-primary) 9%
            )
        ) !important;

    color:
        var(--pb-dark-text) !important;

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

    box-shadow:
        0 18px 44px
        var(--pb-dark-shadow) !important;
}


/* ============================================================
   DARK — CARD HEADINGS
   ============================================================ */

body.pb-mode-dark .pb-vokk-benefit h3,

body.pb-mode-dark .pb-vokk-process-item h3,

body.pb-mode-dark .vokk-about-value h3,

body.pb-mode-dark .vokk-detail-step h3,

body.pb-mode-dark .vokk-contact-reassurance-item h3 {

    color:
        var(--pb-dark-heading) !important;
}


/* ============================================================
   DARK — HERO
   ============================================================ */

body.pb-mode-dark .pb-content-hero {

    background:
        linear-gradient(
            135deg,
            var(--pb-dark-hero-1),
            var(--pb-dark-hero-2)
        ) !important;
}


body.pb-mode-dark
.kb-block.nuke-v10-master {

    background:
        radial-gradient(
            circle at 80% 5%,
            color-mix(
                in srgb,
                var(--pb-primary) 18%,
                transparent
            ),
            transparent 480px
        ),
        linear-gradient(
            145deg,
            var(--pb-dark-hero-1),
            var(--pb-dark-hero-2)
        ) !important;
}


/* ============================================================
   DARK — CTA
   ============================================================ */

body.pb-mode-dark .vokk-services-cta-box,

body.pb-mode-dark .vokk-about-cta-box,

body.pb-mode-dark .vokk-projects-cta-box,

body.pb-mode-dark .vokk-reviews-cta-box,

body.pb-mode-dark .vokk-detail-cta-box {

    background:
        radial-gradient(
            circle at 85% 0%,
            color-mix(
                in srgb,
                var(--pb-primary-light) 15%,
                transparent
            ),
            transparent 360px
        ),
        linear-gradient(
            135deg,
            var(--pb-dark-hero-1),
            var(--pb-dark-hero-2)
        ) !important;

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


/* ============================================================
   DARK — FORMS
   ============================================================ */

body.pb-mode-dark
.vokk-contact-form-slot
input[type="text"],

body.pb-mode-dark
.vokk-contact-form-slot
input[type="email"],

body.pb-mode-dark
.vokk-contact-form-slot
input[type="tel"],

body.pb-mode-dark
.vokk-contact-form-slot
input[type="url"],

body.pb-mode-dark
.vokk-contact-form-slot select,

body.pb-mode-dark
.vokk-contact-form-slot textarea {

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

    color:
        var(--pb-dark-text) !important;

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


/* ============================================================
   DARK — FOOTER
   ============================================================ */

body.pb-mode-dark
.kb-block-agencyfooter-block,

body.pb-mode-dark
.site-footer {

    background:
        radial-gradient(
            circle at 15% 0%,
            color-mix(
                in srgb,
                var(--pb-primary) 20%,
                transparent
            ),
            transparent 430px
        ),
        radial-gradient(
            circle at 100% 100%,
            color-mix(
                in srgb,
                var(--pb-accent) 10%,
                transparent
            ),
            transparent 420px
        ),
        linear-gradient(
            145deg,
            var(--pb-dark-footer-1),
            var(--pb-dark-footer-2)
        ) !important;
}


/* ============================================================
   DARK — SOCIALS
   ============================================================ */

body.pb-mode-dark
.kb-block-agencyfooter-block
.agencyfooter-social-icon {

    background:
        color-mix(
            in srgb,
            var(--pb-primary) 15%,
            var(--pb-dark) 85%
        ) !important;

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


/* ============================================================
   DARK — SEPARATORS
   ============================================================ */

body.pb-mode-dark
.vokk-project-result + .vokk-project-result,

body.pb-mode-dark
.vokk-reviews-trust-item + .vokk-reviews-trust-item,

body.pb-mode-dark
.vokk-contact-reassurance-item + .vokk-contact-reassurance-item,

body.pb-mode-dark
.vokk-detail-benefit + .vokk-detail-benefit,

body.pb-mode-dark
.vokk-review-card-footer,

body.pb-mode-dark
.agencyfooter-block-bottom {

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


/* ============================================================
   MOBILE
   ============================================================ */

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

    /*
     * LIGHT
     */

    body.pb-mode-light
    .pb-content-hero,

    body.pb-mode-light
    .pb-content-hero
    .vokk-services-container,

    body.pb-mode-light
    .pb-content-hero
    .vokk-about-container,

    body.pb-mode-light
    .pb-content-hero
    .vokk-projects-container,

    body.pb-mode-light
    .pb-content-hero
    .vokk-reviews-container,

    body.pb-mode-light
    .pb-content-hero
    .vokk-contact-container,

    body.pb-mode-light
    .pb-content-hero
    .vokk-detail-container,

    body.pb-mode-light
    .kb-block.nuke-v10-master,

    body.pb-mode-light
    .kb-inner.pb-hero-inner {

        background:
            linear-gradient(
                145deg,
                var(--pb-light-dark-block-1),
                var(--pb-light-dark-block-2)
            ) !important;
    }


    /*
     * DARK
     */

    body.pb-mode-dark
    .pb-content-hero,

    body.pb-mode-dark
    .pb-content-hero
    .vokk-services-container,

    body.pb-mode-dark
    .pb-content-hero
    .vokk-about-container,

    body.pb-mode-dark
    .pb-content-hero
    .vokk-projects-container,

    body.pb-mode-dark
    .pb-content-hero
    .vokk-reviews-container,

    body.pb-mode-dark
    .pb-content-hero
    .vokk-contact-container,

    body.pb-mode-dark
    .pb-content-hero
    .vokk-detail-container,

    body.pb-mode-dark
    .kb-block.nuke-v10-master,

    body.pb-mode-dark
    .kb-inner.pb-hero-inner {

        background:
            linear-gradient(
                145deg,
                var(--pb-dark-hero-1),
                var(--pb-dark-hero-2)
            ) !important;
    }
}


/* ============================================================
   PB LIGHT MEDIUM DARK MODE V1 END
   ============================================================ */


/* ============================================================
   PB LIGHT SOFT MEDIUM V10 START
   ============================================================ */

/*
 * LIGHT V10
 *
 * Basis = exact Medium.
 *
 * Light verandert alleen de intensiteit:
 *
 * - gewone achtergronden wit
 * - lichte vlakken zachter
 * - donkere paletvlakken iets lichter
 * - footer iets lichter
 * - CTA's iets lichter
 * - cards iets helderder
 * - hero-overlay iets minder zwaar
 *
 * Geen andere layout.
 * Geen andere button-stijl.
 * Geen andere hero-cards.
 * Geen andere typografie.
 */


/* ============================================================
   LIGHT SEMANTISCHE KLEUREN
   ============================================================ */

body.pb-mode-light-page[class*="pb-preset-"] {

    color-scheme:
        light;

    /*
     * Algemene lichte content.
     */

    --pb-light-page:
        #ffffff;

    --pb-light-surface:
        #ffffff;

    --pb-light-soft:
        color-mix(
            in srgb,
            var(--pb-primary) 3%,
            #f8fafc 97%
        );

    --pb-light-card:
        color-mix(
            in srgb,
            var(--pb-surface) 92%,
            #ffffff 8%
        );


    /*
     * De donkere kleuren uit het gekozen palet
     * blijven herkenbaar, maar worden zachter.
     */

    --pb-light-dark-1:
        color-mix(
            in srgb,
            var(--pb-dark) 80%,
            #ffffff 20%
        );

    --pb-light-dark-2:
        color-mix(
            in srgb,
            var(--pb-darker) 84%,
            #ffffff 16%
        );


    /*
     * Donkere CTA / highlight vlakken.
     */

    --pb-light-block-1:
        color-mix(
            in srgb,
            var(--pb-dark-block-1) 82%,
            #ffffff 18%
        );

    --pb-light-block-2:
        color-mix(
            in srgb,
            var(--pb-dark-block-2) 82%,
            #ffffff 18%
        );


    /*
     * Footer.
     */

    --pb-light-footer-1:
        color-mix(
            in srgb,
            var(--pb-footer-gradient-1) 78%,
            #ffffff 22%
        );

    --pb-light-footer-2:
        color-mix(
            in srgb,
            var(--pb-footer-gradient-2) 80%,
            #ffffff 20%
        );


    /*
     * Borders / shadows iets zachter.
     */

    --pb-light-border:
        color-mix(
            in srgb,
            var(--pb-border) 76%,
            #ffffff 24%
        );

    --pb-light-shadow:
        color-mix(
            in srgb,
            var(--pb-primary) 5%,
            rgba(15,23,42,.06)
        );
}


/* ============================================================
   BODY
   ============================================================ */

body.pb-mode-light-page {

    background:
        #ffffff !important;
}


/* ============================================================
   NORMALE PAGINA WRAPPERS
   ============================================================ */

body.pb-mode-light-page
.vokk-default-page,

body.pb-mode-light-page
.vokk-services-page,

body.pb-mode-light-page
.vokk-about-page,

body.pb-mode-light-page
.vokk-projects-page,

body.pb-mode-light-page
.vokk-reviews-page,

body.pb-mode-light-page
.vokk-contact-page,

body.pb-mode-light-page
.vokk-detail-page {

    background:
        var(--pb-light-page) !important;
}


/* ============================================================
   NORMALE CONTENTSECTIES
   ============================================================ */

body.pb-mode-light-page
.pb-vokk-light,

body.pb-mode-light-page
.vokk-services-intro,

body.pb-mode-light-page
.vokk-services-list,

body.pb-mode-light-page
.vokk-about-intro,

body.pb-mode-light-page
.vokk-about-story,

body.pb-mode-light-page
.vokk-about-experience,

body.pb-mode-light-page
.vokk-projects-intro,

body.pb-mode-light-page
.vokk-projects-grid,

body.pb-mode-light-page
.vokk-project-featured,

body.pb-mode-light-page
.vokk-project-results,

body.pb-mode-light-page
.vokk-reviews-summary,

body.pb-mode-light-page
.vokk-reviews-grid,

body.pb-mode-light-page
.vokk-reviews-wordpress,

body.pb-mode-light-page
.vokk-contact-main,

body.pb-mode-light-page
.vokk-contact-extra,

body.pb-mode-light-page
.vokk-detail-intro,

body.pb-mode-light-page
.vokk-detail-content,

body.pb-mode-light-page
.vokk-detail-faq {

    background:
        var(--pb-light-page) !important;
}


/* ============================================================
   ZACHTE TWEEDE ACHTERGRONDKLEUR
   Niet volledig wit zodat secties zichtbaar gescheiden blijven.
   ============================================================ */

body.pb-mode-light-page
.pb-vokk-process,

body.pb-mode-light-page
.vokk-about-values,

body.pb-mode-light-page
.vokk-reviews-trust,

body.pb-mode-light-page
.vokk-contact-reassurance,

body.pb-mode-light-page
.vokk-detail-benefits,

body.pb-mode-light-page
.vokk-detail-process {

    background:
        var(--pb-light-soft) !important;
}


/* ============================================================
   CARDS
   Zelfde cards als Medium, alleen iets helderder.
   ============================================================ */

body.pb-mode-light-page
.pb-vokk-trust-box,

body.pb-mode-light-page
.vokk-about-value,

body.pb-mode-light-page
.vokk-about-stat,

body.pb-mode-light-page
.vokk-project-card,

body.pb-mode-light-page
.vokk-review-card,

body.pb-mode-light-page
.vokk-reviews-score,

body.pb-mode-light-page
.vokk-reviews-wordpress-box,

body.pb-mode-light-page
.vokk-contact-form-panel,

body.pb-mode-light-page
.vokk-detail-step {

    background:
        var(--pb-light-card) !important;

    border-color:
        var(--pb-light-border) !important;

    box-shadow:
        0 12px 30px
        var(--pb-light-shadow) !important;
}


/* ============================================================
   HOMEPAGE HERO
   Exact Medium hero.
   Alleen bestaande overlay ±12% minder zwaar.
   ============================================================ */

body.pb-mode-light-page
.pb-hero-bg-overlay {

    opacity:
        .88 !important;
}


/*
 * Eventuele aanvullende hero lagen eveneens
 * slechts subtiel verminderen.
 */

body.pb-mode-light-page
.kb-block.nuke-v10-master::before {

    opacity:
        .88 !important;
}


body.pb-mode-light-page
.kb-block.nuke-v10-master::after {

    opacity:
        .90 !important;
}


/*
 * GEEN achtergrondkleur veranderen.
 * GEEN hero tekst veranderen.
 * GEEN hero knop veranderen.
 * GEEN drie hero cards veranderen.
 */


/* ============================================================
   CONTENT PAGE HERO'S
   Dezelfde Medium overlay maar iets zachter.
   ============================================================ */

body.pb-mode-light-page
.pb-content-hero::before {

    opacity:
        .88 !important;
}


/* ============================================================
   DONKERE CTA BLOKKEN
   Dezelfde gekozen paletkleur maar ongeveer 18% lichter.
   ============================================================ */

body.pb-mode-light-page
.vokk-services-cta-box,

body.pb-mode-light-page
.vokk-about-cta-box,

body.pb-mode-light-page
.vokk-projects-cta-box,

body.pb-mode-light-page
.vokk-reviews-cta-box,

body.pb-mode-light-page
.vokk-detail-cta-box {

    background:
        radial-gradient(
            circle at 85% 0%,

            color-mix(
                in srgb,
                var(--pb-primary-light) 12%,
                transparent
            ),

            transparent 360px
        ),

        linear-gradient(
            135deg,

            var(--pb-light-block-1),

            var(--pb-light-block-2)
        ) !important;
}


/*
 * Geen tekstkleur veranderen.
 * De vlakken blijven donker genoeg voor dezelfde Medium-tekst.
 */


/* ============================================================
   HOMEPAGE DONKERE / GEKLEURDE BLOKKEN
   ============================================================ */

/*
 * Als de homepage aanvullende donkere masterblokken gebruikt,
 * houden we dezelfde kleurfamilie maar verzachten we ze.
 */

body.pb-mode-light-page
.pb-vokk-dark {

    background:
        linear-gradient(
            145deg,
            var(--pb-light-dark-1),
            var(--pb-light-dark-2)
        ) !important;
}


/* ============================================================
   FOOTER
   Zelfde footeridentiteit, ongeveer 20% lichter.
   ============================================================ */

body.pb-mode-light-page
.kb-block-agencyfooter-block,

body.pb-mode-light-page
.site-footer {

    background:
        radial-gradient(
            circle at 15% 0%,

            color-mix(
                in srgb,
                var(--pb-primary) 13%,
                transparent
            ),

            transparent 430px
        ),

        radial-gradient(
            circle at 100% 100%,

            color-mix(
                in srgb,
                var(--pb-accent) 7%,
                transparent
            ),

            transparent 420px
        ),

        linear-gradient(
            145deg,

            var(--pb-light-footer-1),

            var(--pb-light-footer-2)
        ) !important;
}


/*
 * Footer tekst, socials en layout blijven
 * volledig uit Medium/palet-engine komen.
 */


/* ============================================================
   FORMULIER ACHTERGROND
   ============================================================ */

body.pb-mode-light-page
.vokk-contact-form-slot
input[type="text"],

body.pb-mode-light-page
.vokk-contact-form-slot
input[type="email"],

body.pb-mode-light-page
.vokk-contact-form-slot
input[type="tel"],

body.pb-mode-light-page
.vokk-contact-form-slot
input[type="url"],

body.pb-mode-light-page
.vokk-contact-form-slot
select,

body.pb-mode-light-page
.vokk-contact-form-slot
textarea {

    background:
        #ffffff !important;

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


/* ============================================================
   MOBIEL
   Zelfde principe.
   ============================================================ */

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

    /*
     * Hero op mobiel niet opnieuw ontwerpen.
     * Alleen de aanwezige overlay iets zachter.
     */

    body.pb-mode-light-page
    .pb-hero-bg-overlay {

        opacity:
            .90 !important;
    }


    body.pb-mode-light-page
    .pb-content-hero::before {

        opacity:
            .90 !important;
    }


    /*
     * Mobiele gewone content wit.
     */

    body.pb-mode-light-page
    .pb-vokk-light {

        background:
            #ffffff !important;
    }
}


/* ============================================================
   BELANGRIJK
   ============================================================
 *
 * LIGHT V10 verandert bewust NIET:
 *
 * - hero layout
 * - hero afbeelding
 * - hero tekstkleur
 * - hero button
 * - drie hero cards
 * - navigatie
 * - header CTA
 * - typografie
 * - responsive layout
 * - afbeeldingen
 *
 * Light blijft dus duidelijk dezelfde website als Medium.
 */


/* ============================================================
   PB LIGHT SOFT MEDIUM V10 END
   ============================================================ */


/* ============================================================
   PB HERO VARIANTS V2 START
   ------------------------------------------------------------
   BELANGRIJK:
   - Alleen vanaf 1025px.
   - Mobiele/tablet-portret hero blijft volledig ongemoeid.
   - Hero A = bestaande styling, dus bewust geen overrides.
   ============================================================ */

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


    /* ========================================================
       HERO A — ORIGINEEL
       ======================================================== */

    /*
     * Geen CSS nodig.
     *
     * pb-hero-variant-hero-a gebruikt exact alle bestaande
     * theme-styling.
     */


    /* ========================================================
       HERO B — SPLIT
       ======================================================== */


    /*
     * HOMEPAGE
     * --------------------------------------------------------
     * Donkere contentzone links.
     * Foto wordt een duidelijke rechter beeldkolom.
     */

    body.pb-hero-variant-hero-b.pb-template-front-page
    .kb-block.nuke-v10-master {

        position: relative !important;
        overflow: hidden !important;
        background:
            var(--vokk-darker, #07111f)
            !important;
    }


    body.pb-hero-variant-hero-b.pb-template-front-page
    .pb-hero-bg-container {

        left: 49% !important;
        right: auto !important;

        width: 51% !important;

        opacity: 1 !important;
    }


    body.pb-hero-variant-hero-b.pb-template-front-page
    .pb-hero-bg-container img {

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

        object-fit: cover !important;
        object-position: center center !important;
    }


    body.pb-hero-variant-hero-b.pb-template-front-page
    .pb-hero-bg-overlay {

        background:
            linear-gradient(
                90deg,
                var(--vokk-darker, #07111f)
                    0%,
                var(--vokk-darker, #07111f)
                    44%,
                color-mix(
                    in srgb,
                    var(--vokk-darker, #07111f)
                    93%,
                    transparent
                )
                    50%,
                color-mix(
                    in srgb,
                    var(--vokk-darker, #07111f)
                    15%,
                    transparent
                )
                    66%,
                transparent
                    100%
            )
            !important;
    }


    body.pb-hero-variant-hero-b.pb-template-front-page
    .kb-inner.pb-hero-inner {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, .72fr)
            !important;

        align-items: center !important;
    }


    body.pb-hero-variant-hero-b.pb-template-front-page
    .pb-hero-content {

        max-width: 650px !important;
        position: relative !important;
        z-index: 8 !important;
    }


    body.pb-hero-variant-hero-b.pb-template-front-page
    .pb-hero-tiles-stack {

        right: 24px !important;
    }



    /*
     * CONTENTPAGINA'S
     * --------------------------------------------------------
     */

    body.pb-hero-variant-hero-b
    .pb-content-hero {

        background:
            var(--vokk-darker, #07111f)
            !important;

        overflow: hidden !important;
    }


    body.pb-hero-variant-hero-b
    .pb-content-hero
    > .pb-content-hero-image {

        left: 48% !important;
        right: 0 !important;

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

        object-fit: cover !important;
        object-position: center center !important;
    }


    body.pb-hero-variant-hero-b
    .pb-content-hero::before {

        background:
            linear-gradient(
                90deg,
                var(--vokk-darker, #07111f)
                    0%,
                var(--vokk-darker, #07111f)
                    45%,
                color-mix(
                    in srgb,
                    var(--vokk-darker, #07111f)
                    96%,
                    transparent
                )
                    49%,
                color-mix(
                    in srgb,
                    var(--vokk-darker, #07111f)
                    20%,
                    transparent
                )
                    67%,
                transparent
                    100%
            )
            !important;
    }


    body.pb-hero-variant-hero-b
    .pb-content-hero
    > *:not(.pb-content-hero-image) {

        position: relative !important;
        z-index: 3 !important;
    }


    body.pb-hero-variant-hero-b
    .pb-content-hero
    .vokk-services-hero-inner,

    body.pb-hero-variant-hero-b
    .pb-content-hero
    .vokk-about-hero-content,

    body.pb-hero-variant-hero-b
    .pb-content-hero
    .vokk-projects-hero-content,

    body.pb-hero-variant-hero-b
    .pb-content-hero
    .vokk-reviews-hero-content,

    body.pb-hero-variant-hero-b
    .pb-content-hero
    .vokk-contact-hero-content,

    body.pb-hero-variant-hero-b
    .pb-content-hero
    .vokk-detail-hero-content {

        max-width: 46% !important;
        margin-left: 0 !important;
        margin-right: auto !important;

        text-align: left !important;
    }

    /* ========================================================
       HERO C — AGENCY CARD
       ======================================================== */


    /*
     * HOMEPAGE
     * --------------------------------------------------------
     * Lichte premium achtergrond.
     * Tekst links.
     * Afbeelding als losse zwevende kaart rechts.
     */

    body.pb-hero-variant-hero-c.pb-template-front-page
    .kb-block.nuke-v10-master {

        position: relative !important;
        overflow: hidden !important;

        background:
            linear-gradient(
                135deg,
                #f7f9fd 0%,
                #ffffff 52%,
                #f0f5ff 100%
            )
            !important;

        min-height: 640px !important;
    }


    /*
     * Subtiele blauwe gloed achter kaart.
     */
    body.pb-hero-variant-hero-c.pb-template-front-page
    .kb-block.nuke-v10-master::after {

        content: "" !important;

        position: absolute !important;

        width: 520px !important;
        height: 520px !important;

        right: -120px !important;
        top: 40px !important;

        border-radius: 50% !important;

        background:
            radial-gradient(
                circle,
                rgba(45, 104, 255, .16) 0%,
                rgba(45, 104, 255, .06) 48%,
                rgba(45, 104, 255, 0) 72%
            )
            !important;

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


    /*
     * De bestaande hero-afbeelding wordt géén achtergrond meer.
     * We maken er een echte visuele kaart van.
     */
    body.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-bg-container {

        position: absolute !important;

        left: auto !important;
        right: max(
            5vw,
            72px
        ) !important;

        top: 50% !important;

        width: min(
            43vw,
            650px
        ) !important;

        height: 470px !important;

        transform:
            translateY(-50%)
            !important;

        border-radius:
            28px
            !important;

        overflow:
            hidden
            !important;

        opacity:
            1
            !important;

        z-index:
            2
            !important;

        box-shadow:
            0 30px 80px rgba(17, 31, 62, .18),
            0 8px 28px rgba(17, 31, 62, .10)
            !important;

        border:
            1px solid rgba(21, 49, 100, .10)
            !important;
    }


    body.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-bg-container img {

        width:
            100%
            !important;

        height:
            100%
            !important;

        object-fit:
            cover
            !important;

        object-position:
            center center
            !important;
    }


    /*
     * Geen donkere overlay over de gehele hero.
     */
    body.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-bg-overlay {

        display:
            none
            !important;
    }


    body.pb-hero-variant-hero-c.pb-template-front-page
    .kb-inner.pb-hero-inner {

        position:
            relative
            !important;

        z-index:
            4
            !important;

        display:
            block
            !important;

        min-height:
            640px
            !important;

        padding-top:
            105px
            !important;

        padding-bottom:
            95px
            !important;
    }


    /*
     * Tekst echt links, niet gecentreerd.
     */
    body.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-content {

        width:
            min(
                48%,
                670px
            )
            !important;

        max-width:
            670px
            !important;

        margin:
            0
            !important;

        text-align:
            left
            !important;

        position:
            relative
            !important;

        z-index:
            6
            !important;
    }


    /*
     * Alle hero tekst donker maken omdat Hero C licht is.
     */
    body.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-title {

        color:
            #0b1428
            !important;

        text-shadow:
            none
            !important;
    }


    body.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-text {

        color:
            #5e6980
            !important;

        max-width:
            610px
            !important;

        margin-left:
            0
            !important;

        margin-right:
            0
            !important;
    }


    body.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-subtitle {

        color:
            #2f6bff
            !important;
    }


    /*
     * Service badges worden lichte pills.
     */
    body.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-services span,

    body.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-services > * {

        color:
            #26344f
            !important;
    }


    /*
     * Rechter aanvullende hero-stack weg.
     * De beeldkaart IS nu de visuele rechterzijde.
     */
    body.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-visual,

    body.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-tiles-stack {

        display:
            none
            !important;
    }



    /*
     * ========================================================
     * CONTENTPAGINA'S
     * ========================================================
     *
     * Zelfde principe:
     * lichte achtergrond
     * content links
     * losse afbeelding rechts
     */

    body.pb-hero-variant-hero-c
    .pb-content-hero {

        position:
            relative
            !important;

        overflow:
            hidden
            !important;

        min-height:
            520px
            !important;

        background:
            linear-gradient(
                135deg,
                #f7f9fd 0%,
                #ffffff 55%,
                #f1f6ff 100%
            )
            !important;
    }


    body.pb-hero-variant-hero-c
    .pb-content-hero::after {

        content:
            ""
            !important;

        position:
            absolute
            !important;

        width:
            420px
            !important;

        height:
            420px
            !important;

        right:
            -80px
            !important;

        top:
            20px
            !important;

        border-radius:
            50%
            !important;

        background:
            radial-gradient(
                circle,
                rgba(47, 107, 255, .14) 0%,
                rgba(47, 107, 255, .05) 48%,
                rgba(47, 107, 255, 0) 72%
            )
            !important;

        pointer-events:
            none
            !important;

        z-index:
            0
            !important;
    }


    /*
     * Weg met de traditionele hero-overlay.
     */
    body.pb-hero-variant-hero-c
    .pb-content-hero::before {

        background:
            none
            !important;
    }


    /*
     * Hero afbeelding als kaart.
     */
    body.pb-hero-variant-hero-c
    .pb-content-hero
    > .pb-content-hero-image {

        position:
            absolute
            !important;

        left:
            auto
            !important;

        right:
            max(
                5vw,
                72px
            )
            !important;

        top:
            50%
            !important;

        width:
            min(
                44vw,
                650px
            )
            !important;

        height:
            390px
            !important;

        transform:
            translateY(-50%)
            !important;

        object-fit:
            cover
            !important;

        object-position:
            center center
            !important;

        border-radius:
            26px
            !important;

        box-shadow:
            0 28px 70px rgba(17, 31, 62, .17),
            0 8px 24px rgba(17, 31, 62, .09)
            !important;

        border:
            1px solid rgba(21, 49, 100, .10)
            !important;

        z-index:
            2
            !important;
    }


    /*
     * Alle bekende content-hero tekstcontainers.
     */
    body.pb-hero-variant-hero-c
    .pb-content-hero
    .vokk-services-hero-inner,

    body.pb-hero-variant-hero-c
    .pb-content-hero
    .vokk-about-hero-content,

    body.pb-hero-variant-hero-c
    .pb-content-hero
    .vokk-projects-hero-content,

    body.pb-hero-variant-hero-c
    .pb-content-hero
    .vokk-reviews-hero-content,

    body.pb-hero-variant-hero-c
    .pb-content-hero
    .vokk-contact-hero-content,

    body.pb-hero-variant-hero-c
    .pb-content-hero
    .vokk-detail-hero-content {

        width:
            min(
                46%,
                650px
            )
            !important;

        max-width:
            650px
            !important;

        margin-left:
            max(
                5vw,
                72px
            )
            !important;

        margin-right:
            auto
            !important;

        text-align:
            left
            !important;

        position:
            relative
            !important;

        z-index:
            4
            !important;
    }


    /*
     * Hero C gebruikt donkere tekst.
     */
    body.pb-hero-variant-hero-c
    .pb-content-hero h1,

    body.pb-hero-variant-hero-c
    .pb-content-hero h2 {

        color:
            #0b1428
            !important;

        text-shadow:
            none
            !important;
    }


    body.pb-hero-variant-hero-c
    .pb-content-hero p {

        color:
            #5d6980
            !important;

        text-shadow:
            none
            !important;
    }


    /*
     * Eyebrows / kleine labels juist blauw.
     */
    body.pb-hero-variant-hero-c
    .pb-content-hero
    .vokk-services-eyebrow,

    body.pb-hero-variant-hero-c
    .pb-content-hero
    .vokk-about-eyebrow,

    body.pb-hero-variant-hero-c
    .pb-content-hero
    .vokk-projects-eyebrow,

    body.pb-hero-variant-hero-c
    .pb-content-hero
    .vokk-reviews-eyebrow,

    body.pb-hero-variant-hero-c
    .pb-content-hero
    .vokk-contact-eyebrow,

    body.pb-hero-variant-hero-c
    .pb-content-hero
    .vokk-detail-eyebrow {

        color:
            #2f6bff
            !important;

        text-shadow:
            none
            !important;
    }

}


/*
 * Hero-varianten blijven expres uitgeschakeld
 * op mobiel en tablet-portret.
 */


/* PB HERO VARIANTS V2 END */


/* ============================================================
   PB HOMEPAGE HERO ABC V3 START

   A = bestaand / origineel
   B = echte split hero
   C = moderne agency card hero

   Alleen desktop / tablet landscape.
   Onder 1025px verandert NIETS.
   ============================================================ */

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


    /* ========================================================
       HERO A — ORIGINEEL
       ========================================================

       Geen overrides.
       Alles blijft exact zoals bestaande homepage.
       ======================================================== */



    /* ========================================================
       HERO B — SPLIT HOMEPAGE
       ======================================================== */

    body.pb-home-hero.pb-hero-variant-hero-b
    .nuke-v10-master {

        position: relative !important;
        overflow: hidden !important;

        min-height: 650px !important;

        background:
            #07111f
            !important;
    }


    /*
     * Afbeelding wordt letterlijk rechterhelft.
     */
    body.pb-home-hero.pb-hero-variant-hero-b
    .pb-hero-bg-container {

        position: absolute !important;

        top: 0 !important;
        bottom: 0 !important;

        left: 50% !important;
        right: 0 !important;

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

        opacity: 1 !important;

        overflow: hidden !important;

        z-index: 1 !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-b
    .pb-hero-bg-container img {

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

        object-fit: cover !important;

        /*
         * Belangrijk onderwerp iets naar rechts.
         */
        object-position:
            62% center
            !important;
    }


    /*
     * Alleen zachte overgang bij middenscheiding.
     */
    body.pb-home-hero.pb-hero-variant-hero-b
    .pb-hero-bg-overlay {

        position: absolute !important;
        inset: 0 !important;

        background:
            linear-gradient(
                90deg,
                #07111f 0%,
                #07111f 46%,
                rgba(7,17,31,.98) 50%,
                rgba(7,17,31,.56) 57%,
                rgba(7,17,31,.12) 68%,
                rgba(7,17,31,0) 82%
            )
            !important;

        z-index: 2 !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-b
    .pb-hero-inner {

        position: relative !important;
        z-index: 5 !important;

        min-height: 650px !important;

        display: flex !important;
        align-items: center !important;

        padding-top: 105px !important;
        padding-bottom: 90px !important;
    }


    /*
     * Tekst werkelijk op linker helft.
     */
    body.pb-home-hero.pb-hero-variant-hero-b
    .pb-hero-content {

        width: 46% !important;
        max-width: 650px !important;

        margin: 0 !important;

        position: relative !important;
        z-index: 7 !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-b
    .pb-hero-title {

        max-width: 640px !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-b
    .pb-hero-text {

        max-width: 590px !important;
    }


    /*
     * De bestaande grote rechter tile-stack hoort niet
     * meer naast de splitfoto.
     *
     * We maken hem compact en plaatsen hem onderaan
     * over de overgang naar het beeld.
     */
    body.pb-home-hero.pb-hero-variant-hero-b
    .pb-hero-tiles-stack {

        display: grid !important;

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

        gap: 10px !important;

        position: absolute !important;

        left: 50% !important;
        right: 32px !important;
        bottom: 26px !important;

        top: auto !important;

        transform: translateX(-18px) !important;

        width: auto !important;

        z-index: 10 !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-b
    .pb-hero-tiles-stack > * {

        min-height: 0 !important;

        padding:
            13px 15px
            !important;

        border-radius:
            14px
            !important;

        backdrop-filter:
            blur(16px)
            !important;

        -webkit-backdrop-filter:
            blur(16px)
            !important;

        background:
            rgba(7,17,31,.76)
            !important;

        border:
            1px solid rgba(255,255,255,.14)
            !important;

        box-shadow:
            0 12px 32px rgba(0,0,0,.20)
            !important;
    }



    /* ========================================================
       HERO C — PB WEBDIENSTEN AGENCY CARD
       ======================================================== */

    body.pb-home-hero.pb-hero-variant-hero-c
    .nuke-v10-master {

        position: relative !important;

        min-height: 670px !important;

        overflow: hidden !important;

        background:
            linear-gradient(
                135deg,
                #f7f9fd 0%,
                #ffffff 53%,
                #edf3ff 100%
            )
            !important;
    }


    /*
     * Zeer subtiele branding shapes.
     */
    body.pb-home-hero.pb-hero-variant-hero-c
    .nuke-v10-master::before {

        content: "" !important;

        position: absolute !important;

        left: -180px !important;
        bottom: -250px !important;

        width: 520px !important;
        height: 520px !important;

        border-radius: 50% !important;

        background:
            radial-gradient(
                circle,
                rgba(49,105,255,.10) 0%,
                rgba(49,105,255,.03) 50%,
                rgba(49,105,255,0) 72%
            )
            !important;

        z-index: 0 !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-c
    .nuke-v10-master::after {

        content: "" !important;

        position: absolute !important;

        right: -80px !important;
        top: -80px !important;

        width: 500px !important;
        height: 500px !important;

        border-radius: 50% !important;

        background:
            radial-gradient(
                circle,
                rgba(42,112,255,.16) 0%,
                rgba(42,112,255,.05) 48%,
                rgba(42,112,255,0) 72%
            )
            !important;

        z-index: 0 !important;
    }


    /*
     * De hero-afbeelding is nu een ECHTE kaart.
     */
    body.pb-home-hero.pb-hero-variant-hero-c
    .pb-hero-bg-container {

        position: absolute !important;

        top: 50% !important;

        left: auto !important;

        right:
            clamp(
                46px,
                6vw,
                110px
            )
            !important;

        width:
            min(
                43vw,
                670px
            )
            !important;

        height:
            455px
            !important;

        transform:
            translateY(-50%)
            rotate(1.1deg)
            !important;

        border-radius:
            30px
            !important;

        overflow:
            hidden
            !important;

        opacity: 1 !important;

        border:
            1px solid rgba(20,53,110,.10)
            !important;

        box-shadow:
            0 35px 90px rgba(24,43,84,.18),
            0 10px 32px rgba(24,43,84,.10)
            !important;

        z-index: 2 !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-c
    .pb-hero-bg-container img {

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

        object-fit:
            cover
            !important;

        object-position:
            center center
            !important;
    }


    /*
     * Geen full-screen donkere overlay.
     */
    body.pb-home-hero.pb-hero-variant-hero-c
    .pb-hero-bg-overlay {

        display: none !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-c
    .pb-hero-inner {

        position: relative !important;
        z-index: 5 !important;

        min-height: 670px !important;

        display: flex !important;
        align-items: center !important;

        padding-top:
            110px
            !important;

        padding-bottom:
            105px
            !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-c
    .pb-hero-content {

        width:
            min(
                48%,
                675px
            )
            !important;

        max-width:
            675px
            !important;

        margin:
            0
            !important;

        text-align:
            left
            !important;

        position: relative !important;
        z-index: 8 !important;
    }


    /*
     * Hero C is licht:
     * donkerblauwe headline.
     */
    body.pb-home-hero.pb-hero-variant-hero-c
    .pb-hero-title {

        color:
            #0c1528
            !important;

        text-shadow:
            none
            !important;

        letter-spacing:
            -.035em
            !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-c
    .pb-hero-text {

        color:
            #58657c
            !important;

        max-width:
            610px
            !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        text-shadow:
            none
            !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-c
    .pb-hero-subtitle {

        color:
            #316cff
            !important;

        text-shadow:
            none
            !important;
    }


    /*
     * Service badges worden lichte agency-pills.
     */
    body.pb-home-hero.pb-hero-variant-hero-c
    .pb-hero-services {

        display: flex !important;
        flex-wrap: wrap !important;

        gap: 8px !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-c
    .pb-hero-services > * {

        background:
            rgba(49,108,255,.07)
            !important;

        border:
            1px solid rgba(49,108,255,.14)
            !important;

        color:
            #213250
            !important;

        border-radius:
            999px
            !important;

        padding:
            7px 12px
            !important;
    }


    /*
     * De benefit tiles zijn juist een kenmerk van de homepage.
     * Bij C worden het drie kleine zwevende glass cards
     * rond de hoofdafbeelding.
     */
    body.pb-home-hero.pb-hero-variant-hero-c
    .pb-hero-tiles-stack {

        position: absolute !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 10px !important;

        top: 50% !important;

        right:
            clamp(
                22px,
                3vw,
                55px
            )
            !important;

        width:
            225px
            !important;

        transform:
            translateY(-50%)
            !important;

        z-index: 10 !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-c
    .pb-hero-tiles-stack > * {

        min-height: 0 !important;

        padding:
            14px 16px
            !important;

        border-radius:
            16px
            !important;

        background:
            rgba(255,255,255,.90)
            !important;

        border:
            1px solid rgba(25,53,105,.10)
            !important;

        box-shadow:
            0 12px 34px rgba(30,52,96,.12)
            !important;

        backdrop-filter:
            blur(18px)
            !important;

        -webkit-backdrop-filter:
            blur(18px)
            !important;
    }


    /*
     * Indien pb-hero-visual als extra wrapper bestaat,
     * mag die geen tweede groot beeld meer maken.
     */
    body.pb-home-hero.pb-hero-variant-hero-c
    .pb-hero-visual {

        pointer-events: none !important;
    }

}


/*
 * Onder 1025 px:
 * GEEN ENKELE A/B/C homepage override.
 * Bestaande mobiele hero blijft dus intact.
 */


/* PB HOMEPAGE HERO ABC V3 END */




/* PB HOME HERO FINAL BC START
   ============================================================
   HOMEPAGE HERO VARIANTEN

   A = BESTAAND / GEEN WIJZIGING
   B = CLEAN / GEEN SIDE CARDS
   C = DIENSTEN ONDER TEGEN HERO

   BELANGRIJK:
   ALLES STAAT BINNEN min-width:969px.
   MOBILE/TABLET PORTRAIT WORDT NIET GERAAKT.
   ============================================================ */

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


/* ============================================================
   GEMEENSCHAPPELIJKE BASIS B + C
   ============================================================ */

body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.kb-block.nuke-v10-master,

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.kb-block.nuke-v10-master {

    position: relative !important;

    min-height: 700px !important;

    overflow: hidden !important;

    background:
        var(--vokk-darker, #05080d) !important;
}


/*
 * Foto blijft groot in de hero.
 * Geen los wit vlak.
 * Geen afgeronde agency-card.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-bg-container,

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-bg-container {

    position: absolute !important;

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

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

    margin: 0 !important;

    z-index: 1 !important;

    border: 0 !important;
    border-radius: 0 !important;

    overflow: hidden !important;

    background: transparent !important;

    box-shadow: none !important;

    transform: none !important;
}


body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-bg-container img,

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-bg-container img {

    display: block !important;

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

    max-width: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    opacity: 1 !important;

    border: 0 !important;
    border-radius: 0 !important;

    transform: none !important;

    filter: none !important;
}


/*
 * Donkere overgang:
 * links echt donker voor tekst,
 * rechts foto zichtbaar.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-bg-overlay,

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-bg-overlay {

    position: absolute !important;

    inset: 0 !important;

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

    z-index: 2 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            var(--vokk-darker, #05080d) 0%,
            var(--vokk-darker, #05080d) 24%,

            color-mix(
                in srgb,
                var(--vokk-darker, #05080d) 96%,
                transparent
            ) 34%,

            color-mix(
                in srgb,
                var(--vokk-darker, #05080d) 78%,
                transparent
            ) 45%,

            color-mix(
                in srgb,
                var(--vokk-darker, #05080d) 48%,
                transparent
            ) 57%,

            color-mix(
                in srgb,
                var(--vokk-darker, #05080d) 18%,
                transparent
            ) 70%,

            transparent 86%
        ) !important;
}


/* oude hero-gloed bij B/C weg */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.kb-block.nuke-v10-master::after,

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.kb-block.nuke-v10-master::after {

    display: none !important;
}


/*
 * Hoofdcontent links.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.kb-inner.pb-hero-inner,

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.kb-inner.pb-hero-inner {

    position: relative !important;

    z-index: 10 !important;

    display: flex !important;

    grid-template-columns: none !important;

    align-items: center !important;

    width:
        min(
            calc(100% - 64px),
            1400px
        ) !important;

    min-height: 700px !important;

    margin: 0 auto !important;

    padding:
        115px 0 90px !important;
}


body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-content,

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-content {

    position: relative !important;

    width: min(620px, 48vw) !important;
    max-width: 620px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    transform: none !important;
}


body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-title,

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-title {

    max-width: 13ch !important;

    font-size:
        clamp(
            40px,
            3.8vw,
            58px
        ) !important;

    line-height: 1.08 !important;

    letter-spacing: -1.5px !important;
}


body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-text,

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-text {

    max-width: 600px !important;

    color: rgba(255,255,255,.76) !important;
}


/*
 * De 3 kleine USP's blijven onderdeel
 * van de linker content.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-features,

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-features {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: wrap !important;

    gap: 14px 26px !important;

    margin-bottom: 30px !important;
}


/*
 * De OUDE verticale rechter hero-cards
 * verdwijnen bij B én C.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-visual,

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-visual {

    display: none !important;
}


/* ============================================================
   HERO B — CLEAN
   ============================================================ */

/*
 * B heeft bewust verder niets extra's.
 *
 * Grote hero.
 * Tekst links.
 * Foto rechts.
 * Kleine USP's.
 * CTA.
 * Geen cards.
 */


/* ============================================================
   HERO C — DIENSTEN ONDER TEGEN HERO
   ============================================================ */

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.kb-block.nuke-v10-master {

    min-height: 760px !important;

    /*
     * ruimte voor de dienstenstrook
     */
    padding-bottom: 54px !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.kb-inner.pb-hero-inner {

    min-height: 700px !important;

    padding-bottom: 125px !important;
}


/*
 * Hele diensten-dock.
 *
 * Staat ONDERIN en hangt tegen de hero.
 */
body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-home-c-services {

    position: absolute !important;

    left: 50% !important;
    bottom: 22px !important;

    transform:
        translateX(-50%) !important;

    z-index: 30 !important;

    display: grid !important;

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

    width:
        min(
            calc(100% - 64px),
            1320px
        ) !important;

    margin: 0 !important;

    border:
        1px solid
        rgba(255,255,255,.11) !important;

    border-radius: 16px !important;

    overflow: hidden !important;

    background:
        color-mix(
            in srgb,
            var(--vokk-dark, #111827) 94%,
            transparent
        ) !important;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.36) !important;

    backdrop-filter:
        blur(18px) !important;

    -webkit-backdrop-filter:
        blur(18px) !important;
}


/*
 * Elke dienst.
 */
body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-home-c-service {

    position: relative !important;

    display: grid !important;

    grid-template-columns:
        auto 1fr auto !important;

    align-items: center !important;

    gap: 14px !important;

    min-width: 0 !important;
    min-height: 116px !important;

    padding: 23px 22px !important;

    color: #ffffff !important;

    text-decoration: none !important;

    background:
        rgba(255,255,255,.015) !important;

    transition:
        background .22s ease,
        transform .22s ease !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-home-c-service + .pb-home-c-service {

    border-left:
        1px solid
        rgba(255,255,255,.09) !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-home-c-service:hover {

    background:
        color-mix(
            in srgb,
            var(--vokk-primary) 12%,
            rgba(255,255,255,.025)
        ) !important;
}


/*
 * 01 / 02 / 03 / 04
 */
body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-home-c-service-number {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 39px !important;
    height: 39px !important;

    flex: 0 0 39px !important;

    border-radius: 11px !important;

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

    background:
        color-mix(
            in srgb,
            var(--vokk-primary) 17%,
            transparent
        ) !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    letter-spacing: .7px !important;
}


/*
 * Titel + omschrijving.
 */
body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-home-c-service-copy {

    display: block !important;

    min-width: 0 !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-home-c-service-copy strong {

    display: block !important;

    margin-bottom: 5px !important;

    color: #ffffff !important;

    font-size: 14px !important;
    line-height: 1.25 !important;

    font-weight: 700 !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-home-c-service-copy small {

    display: block !important;

    color:
        rgba(255,255,255,.58) !important;

    font-size: 10.5px !important;
    line-height: 1.45 !important;
}


/*
 * Pijl.
 */
body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-home-c-service-arrow {

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

    font-size: 18px !important;

    transition:
        transform .22s ease !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-home-c-service:hover
.pb-home-c-service-arrow {

    transform:
        translateX(4px) !important;
}


/* ============================================================
   KLEINERE DESKTOP / TABLET LANDSCAPE
   NOG STEEDS BOVEN 968px
   ============================================================ */

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

    body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
    .kb-inner.pb-hero-inner,

    body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
    .kb-inner.pb-hero-inner {

        width:
            calc(100% - 44px) !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
    .pb-hero-content,

    body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-content {

        width: 54% !important;
        max-width: 54% !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
    .pb-home-c-services {

        width:
            calc(100% - 44px) !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
    .pb-home-c-service {

        padding:
            19px 15px !important;

        gap: 10px !important;
    }

}

}

/* PB HOME HERO FINAL BC END */



/* PB HOME HERO BC FINETUNE START
   =========================================================
   Alleen homepage desktop / tablet landscape.
   Mobiel <= 968px blijft volledig ongemoeid.
   ========================================================= */

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


/* =========================================================
   HERO B — CLEAN
   3 USP'S ALS ÉÉN STROOK ONDERAAN HERO
   ========================================================= */

/*
 * Content blijft links staan, maar wordt geen positioning
 * parent meer. Daardoor kan de USP-strip ten opzichte van
 * de volledige hero-inner onderaan worden geplaatst.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-content {
    position: static !important;
}


/*
 * Onderin ruimte maken voor de USP-strook.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.kb-inner.pb-hero-inner {
    position: relative !important;
    padding-bottom: 115px !important;
}


/*
 * USP's worden één horizontale strook onderaan.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-features {
    position: absolute !important;

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

    width: 100% !important;
    min-height: 74px !important;

    margin: 0 !important;
    padding: 0 !important;

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

    align-items: stretch !important;
    gap: 0 !important;

    border-top:
        1px solid rgba(255,255,255,.12) !important;

    background:
        rgba(6,14,24,.78) !important;

    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;

    z-index: 25 !important;
}


/*
 * Elke USP.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-feature-item {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    min-width: 0 !important;
    min-height: 74px !important;

    margin: 0 !important;
    padding: 0 24px !important;

    color: rgba(255,255,255,.94) !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    white-space: nowrap !important;
}


/*
 * Scheidingslijnen.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-feature-item + .pb-hero-feature-item {
    border-left:
        1px solid rgba(255,255,255,.10) !important;
}


/*
 * Iconen.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-feature-item svg {
    width: 18px !important;
    height: 18px !important;

    flex: 0 0 18px !important;

    stroke:
        var(--vokk-primary-light) !important;
}


/* =========================================================
   HERO C — FEATURE CARDS
   TITEL LEESBAAR MAKEN
   ========================================================= */

/*
 * Linkerkant donker genoeg zodat ALLE tekst leesbaar is.
 */
body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-bg-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(3,10,18,1) 0%,
            rgba(3,10,18,.99) 23%,
            rgba(3,10,18,.95) 31%,
            rgba(3,10,18,.86) 39%,
            rgba(3,10,18,.66) 49%,
            rgba(3,10,18,.38) 60%,
            rgba(3,10,18,.14) 73%,
            rgba(3,10,18,.03) 86%,
            transparent 100%
        ) !important;
}


/*
 * Oude Agency-CSS gaf de titel een donkere kleur.
 * Daarom hier expliciet overschrijven.
 */
body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-content .pb-hero-title {
    color: #ffffff !important;

    text-shadow:
        0 2px 18px rgba(0,0,0,.22) !important;
}


/*
 * Eventuele span in H1 ook wit houden.
 */
body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-content .pb-hero-title span {
    color: #ffffff !important;
}


/*
 * Beschrijving duidelijker.
 */
body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-content .pb-hero-text {
    color: rgba(255,255,255,.82) !important;
}


/*
 * USP-tekst bij C ook helder.
 */
body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-feature-item {
    color: rgba(255,255,255,.94) !important;
}


/* =========================================================
   HERO C — CTA STRAK / MODERN
   GEEN PILL
   ========================================================= */

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.nuke-main-button {
    min-height: 52px !important;

    padding: 0 25px !important;

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

    border-radius: 7px !important;

    background:
        linear-gradient(
            135deg,
            var(--vokk-btn-1) 0%,
            var(--vokk-btn-2) 100%
        ) !important;

    box-shadow:
        0 10px 28px
        color-mix(
            in srgb,
            var(--vokk-primary) 22%,
            transparent
        ) !important;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.nuke-main-button:hover {
    transform: translateY(-2px) !important;

    filter: brightness(1.06) !important;

    box-shadow:
        0 14px 34px
        color-mix(
            in srgb,
            var(--vokk-primary) 29%,
            transparent
        ) !important;
}


/*
 * Ook bij B de CTA minder pill-vormig maken,
 * zodat B en C dezelfde moderne designfamilie hebben.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.nuke-main-button {
    border-radius: 7px !important;
}


/* =========================================================
   HERO C — DIENSTENSTROOK
   Blijft onderaan zoals hij nu goed is.
   Alleen iets strakker tegen de hero.
   ========================================================= */

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-home-c-services {
    bottom: 18px !important;
}


/* =========================================================
   KLEINERE DESKTOP / TABLET LANDSCAPE
   Nog altijd > 968px
   ========================================================= */

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

    body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
    .pb-hero-feature-item {
        padding: 0 12px !important;
        font-size: 12px !important;
    }

}

}

/* PB HOME HERO BC FINETUNE END */

/* PB HERO B USP OVERHANG START */

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

body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.kb-block.nuke-v10-master {
    overflow: visible !important;
    margin-bottom: 42px !important;
}

body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.kb-inner.pb-hero-inner {
    padding-bottom: 90px !important;
}

body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-features {
    position: absolute !important;

    left: 50% !important;
    bottom: -38px !important;

    transform: translateX(-50%) !important;

    width: min(calc(100% - 80px), 1360px) !important;
    min-height: 76px !important;

    margin: 0 !important;
    padding: 0 !important;

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

    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 12px !important;

    background: rgba(8,16,28,.96) !important;

    box-shadow:
        0 18px 40px rgba(0,0,0,.24) !important;

    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;

    overflow: hidden !important;

    z-index: 50 !important;
}

body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-feature-item {
    min-height: 76px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 0 24px !important;

    color: rgba(255,255,255,.95) !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}

body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-feature-item + .pb-hero-feature-item {
    border-left: 1px solid rgba(255,255,255,.09) !important;
}

body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-feature-item svg {
    width: 18px !important;
    height: 18px !important;

    flex: 0 0 18px !important;

    stroke: var(--vokk-primary-light) !important;
}

}

/* PB HERO B USP OVERHANG END */

/* PB HERO B FULL BACKGROUND START */

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

/*
 * Hero B:
 * foto loopt nu over de volledige hero.
 * Geen harde verticale overgang meer.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-bg-container {
    position: absolute !important;

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

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

    margin: 0 !important;

    z-index: 1 !important;

    overflow: hidden !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    transform: none !important;
}

body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-bg-container img {
    display: block !important;

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

    max-width: none !important;

    object-fit: cover !important;
    object-position: right center !important;

    opacity: 1 !important;

    border: 0 !important;
    border-radius: 0 !important;

    transform: none !important;
}


/*
 * Vloeiende donkere overgang zoals bij Hero C:
 * links volledig donker voor tekst,
 * geleidelijk naar volledig zichtbaar beeld rechts.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-bg-overlay {
    position: absolute !important;

    inset: 0 !important;

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

    z-index: 2 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,

            rgba(3,10,18,1) 0%,
            rgba(3,10,18,.99) 22%,
            rgba(3,10,18,.96) 30%,
            rgba(3,10,18,.88) 38%,
            rgba(3,10,18,.72) 47%,
            rgba(3,10,18,.50) 57%,
            rgba(3,10,18,.27) 67%,
            rgba(3,10,18,.10) 77%,
            rgba(3,10,18,.02) 87%,
            transparent 100%
        ) !important;
}


/*
 * Zorg dat de bestaande tekst boven de foto/overlay blijft.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.kb-inner.pb-hero-inner {
    position: relative !important;
    z-index: 10 !important;
}

}

/* PB HERO B FULL BACKGROUND END */

/* PB HERO B C HEIGHT MATCH START */

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

/*
 * B krijgt dezelfde royale beeldhoogte als C.
 * De USP-balk blijft buiten de hero hangen.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.kb-block.nuke-v10-master {
    min-height: 700px !important;
    height: 700px !important;

    overflow: visible !important;

    margin-bottom: 42px !important;

    background:
        var(--vokk-darker, #05080d) !important;
}


/*
 * Foto vult werkelijk de volledige herohoogte.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-bg-container {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 700px !important;

    overflow: hidden !important;

    z-index: 1 !important;
}


body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-bg-container img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    /*
     * Meer van de onderzijde van de foto behouden.
     * Daardoor wordt persoon/interieur minder hard afgesneden.
     */
    object-position: right 56% !important;
}


/*
 * Content verticaal mooi gecentreerd,
 * maar met ruimte voor de overhangende USP-strook.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.kb-inner.pb-hero-inner {
    min-height: 700px !important;
    height: 700px !important;

    display: flex !important;
    align-items: center !important;

    padding-top: 105px !important;
    padding-bottom: 115px !important;
}


/*
 * USP blijft zoals nu: half buiten de hero.
 */
body.pb-home-hero.pb-hero-variant-hero-b.pb-template-front-page
.pb-hero-features {
    bottom: -38px !important;
}

}

/* PB HERO B C HEIGHT MATCH END */



/* PB HERO C MATCH B FINAL START */

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


/* =========================================================
   HERO C CONTAINER
   Zelfde donkere basis als Hero B
   ========================================================= */

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.kb-block.nuke-v10-master {
    position: relative !important;

    min-height: 700px !important;

    overflow: visible !important;

    background:
        var(--vokk-darker, #05080d) !important;
}


/* =========================================================
   FOTO
   Exact dezelfde verwerking als Hero B:
   volledige hero, geen los rechtervlak.
   ========================================================= */

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-bg-container {
    position: absolute !important;

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

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

    margin: 0 !important;
    padding: 0 !important;

    z-index: 1 !important;

    overflow: hidden !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    transform: none !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-bg-container img {
    display: block !important;

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

    max-width: none !important;

    object-fit: cover !important;
    object-position: right center !important;

    opacity: 1 !important;

    border: 0 !important;
    border-radius: 0 !important;

    filter: none !important;

    transform: none !important;
}


/* =========================================================
   OVERLAY
   EXACT dezelfde gradient als de goede Hero B
   ========================================================= */

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-bg-overlay {
    position: absolute !important;

    inset: 0 !important;

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

    z-index: 2 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,

            rgba(3,10,18,1) 0%,
            rgba(3,10,18,.99) 22%,
            rgba(3,10,18,.96) 30%,
            rgba(3,10,18,.88) 38%,
            rgba(3,10,18,.72) 47%,
            rgba(3,10,18,.50) 57%,
            rgba(3,10,18,.27) 67%,
            rgba(3,10,18,.10) 77%,
            rgba(3,10,18,.02) 87%,
            transparent 100%
        ) !important;
}


/* Geen oude agency-gloed */
body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.kb-block.nuke-v10-master::after {
    display: none !important;
}


/* =========================================================
   CONTENT
   Zelfde positie en leesbaarheid als B
   ========================================================= */

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.kb-inner.pb-hero-inner {
    position: relative !important;

    z-index: 10 !important;

    display: flex !important;
    align-items: center !important;

    grid-template-columns: none !important;

    width: min(calc(100% - 64px), 1400px) !important;

    min-height: 700px !important;

    margin: 0 auto !important;

    /*
     * Extra onderruimte alleen vanwege dienstenstrip.
     */
    padding:
        105px 0 145px !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-content {
    position: relative !important;

    z-index: 10 !important;

    width: min(620px, 48vw) !important;
    max-width: 620px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    transform: none !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-subtitle {
    color:
        var(--vokk-primary-light) !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-title,
body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-title span {
    max-width: 13ch !important;

    color: #ffffff !important;

    font-size:
        clamp(
            40px,
            3.8vw,
            58px
        ) !important;

    line-height: 1.08 !important;

    letter-spacing: -1.5px !important;

    text-shadow: none !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-text {
    max-width: 600px !important;

    color:
        rgba(255,255,255,.82) !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-feature-item {
    color:
        rgba(255,255,255,.95) !important;
}


/* =========================================================
   CTA
   Strak, modern, geen pill
   ========================================================= */

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.nuke-main-button {
    min-height: 52px !important;

    padding: 0 26px !important;

    border-radius: 7px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--vokk-btn-1) 0%,
            var(--vokk-btn-2) 100%
        ) !important;
}


/* =========================================================
   OUDE RECHTER CARDS WEG
   ========================================================= */

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-visual {
    display: none !important;
}


/* =========================================================
   DIENSTENSTROOK
   Dit is het ENIGE visuele verschil met Hero B.
   ========================================================= */

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-home-c-services {
    position: absolute !important;

    left: 50% !important;
    bottom: -38px !important;

    transform:
        translateX(-50%) !important;

    z-index: 50 !important;

    width:
        min(
            calc(100% - 80px),
            1360px
        ) !important;

    margin: 0 !important;
}


/*
 * Hero ruimte geven voor de overhang.
 */
body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.kb-block.nuke-v10-master {
    margin-bottom: 42px !important;
}


/* =========================================================
   969 - 1180
   ========================================================= */

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

    body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
    .kb-inner.pb-hero-inner {
        width:
            calc(100% - 44px) !important;
    }

    body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-content {
        width: 54% !important;
        max-width: 54% !important;
    }

    body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
    .pb-home-c-services {
        width:
            calc(100% - 44px) !important;
    }

}

}

/* PB HERO C MATCH B FINAL END */

/* PB HERO C LEFT DARK FIX START */

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

    /*
     * Hero C: linkerkant weer echt donker,
     * zoals bij de andere hero's.
     */
    body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-bg-overlay {
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        pointer-events: none !important;

        background:
            linear-gradient(
                90deg,
                rgba(3,10,18,0.98) 0%,
                rgba(3,10,18,0.98) 24%,
                rgba(3,10,18,0.95) 34%,
                rgba(3,10,18,0.86) 44%,
                rgba(3,10,18,0.68) 55%,
                rgba(3,10,18,0.42) 67%,
                rgba(3,10,18,0.18) 79%,
                rgba(3,10,18,0.04) 90%,
                transparent 100%
            ) !important;
    }

    /*
     * Content altijd boven de overlay/foto.
     */
    body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-content {
        position: relative !important;
        z-index: 10 !important;
    }

    /*
     * Tekstkleuren expliciet goed zetten.
     */
    body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-title,
    body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-title span {
        color: #ffffff !important;
        text-shadow: none !important;
    }

    body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-text {
        color: rgba(255,255,255,.84) !important;
    }

    body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
    .pb-hero-feature-item {
        color: rgba(255,255,255,.95) !important;
    }

    /*
     * Dienstenstrook laten zoals hij nu goed staat.
     */
    body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
    .pb-home-c-services {
        z-index: 50 !important;
    }
}

/* PB HERO C LEFT DARK FIX END */


/* PB HERO C RECTANGULAR OVERLAY START */

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

/* ---------------------------------------------------------
   Oude ronde/agency vormen bij C volledig neutraliseren.
   --------------------------------------------------------- */

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.kb-block.nuke-v10-master::before {

    content: none !important;
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    border-radius: 0 !important;

    clip-path: none !important;

    background: none !important;

    transform: none !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.kb-block.nuke-v10-master::after {

    content: none !important;
    display: none !important;

    border-radius: 0 !important;

    clip-path: none !important;

    background: none !important;

    transform: none !important;
}


/* ---------------------------------------------------------
   Foto blijft over volledige Hero C lopen.
   --------------------------------------------------------- */

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-bg-container {

    position: absolute !important;
    inset: 0 !important;

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

    z-index: 1 !important;

    border-radius: 0 !important;

    overflow: hidden !important;

    transform: none !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-bg-container img {

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

    object-fit: cover !important;
    object-position: right center !important;

    border-radius: 0 !important;

    transform: none !important;
}


/* ---------------------------------------------------------
   ÉÉN normale rechthoekige gradient over volledige hero.

   Links donker zoals B.
   Rechts vloeiend naar de foto.
   Geen cirkels / curves / panelen.
   --------------------------------------------------------- */

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-bg-overlay {

    display: block !important;

    position: absolute !important;

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

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

    z-index: 2 !important;

    border: 0 !important;
    border-radius: 0 !important;

    clip-path: none !important;

    transform: none !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,

            rgba(3,10,18,1) 0%,
            rgba(3,10,18,1) 25%,

            rgba(3,10,18,.97) 34%,
            rgba(3,10,18,.88) 43%,

            rgba(3,10,18,.72) 52%,
            rgba(3,10,18,.50) 61%,

            rgba(3,10,18,.28) 70%,
            rgba(3,10,18,.11) 79%,

            rgba(3,10,18,.03) 89%,
            transparent 100%
        ) !important;
}


/* ---------------------------------------------------------
   Content erboven.
   --------------------------------------------------------- */

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.kb-inner.pb-hero-inner {

    position: relative !important;

    z-index: 10 !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-content {

    position: relative !important;

    z-index: 11 !important;

    background: transparent !important;

    border-radius: 0 !important;
}


/* tekst */

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-title,

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-title span {

    color: #ffffff !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-text {

    color: rgba(255,255,255,.84) !important;
}


body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-hero-feature-item {

    color: rgba(255,255,255,.95) !important;
}


/* dienstenstrook blijft zoals hij nu is */

body.pb-home-hero.pb-hero-variant-hero-c.pb-template-front-page
.pb-home-c-services {

    z-index: 50 !important;
}

}

/* PB HERO C RECTANGULAR OVERLAY END */


/* PB CONTENT HERO C CLEAN SPLIT START */

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

/* =========================================================
   CONTENT HERO C
   42% donker / 58% beeld
   ========================================================= */

body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero {
    position: relative !important;

    height: 470px !important;
    min-height: 470px !important;

    overflow: hidden !important;

    background:
        var(--pb-hero-bg, #061426) !important;

    isolation: isolate !important;
}


/* =========================================================
   FOTO RECHTS
   ========================================================= */

body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero
> .pb-content-hero-image {
    position: absolute !important;

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

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

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    opacity: 1 !important;

    border: 0 !important;
    border-radius: 0 !important;

    filter: none !important;
    transform: none !important;

    z-index: 1 !important;
}


/* =========================================================
   SPLIT-OVERGANG
   Geen brede modderige gradient meer.
   Alleen een subtiele zachte rand.
   ========================================================= */

body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 42% !important;
    bottom: 0 !important;

    width: 34px !important;

    z-index: 3 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            var(--pb-hero-bg, #061426) 0%,
            color-mix(
                in srgb,
                var(--pb-hero-bg, #061426) 52%,
                transparent
            ) 45%,
            transparent 100%
        ) !important;
}


/* oude C-vormen weg */
body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero::after {
    content: none !important;
    display: none !important;

    background: none !important;
    clip-path: none !important;
    border-radius: 0 !important;
    transform: none !important;
}


/* =========================================================
   CONTAINER
   ========================================================= */

body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero
.vokk-detail-container,

body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero
.vokk-about-container,

body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero
.vokk-projects-container,

body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero
.vokk-reviews-container,

body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero
.vokk-contact-container {
    position: relative !important;

    z-index: 5 !important;

    width:
        min(
            calc(100% - 64px),
            1400px
        ) !important;

    height: 100% !important;

    margin: 0 auto !important;
}


/* =========================================================
   TEKST
   ========================================================= */

body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero
.vokk-detail-hero-content,

body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero
.vokk-about-hero-content,

body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero
.vokk-projects-hero-content,

body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero
.vokk-reviews-hero-content,

body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero
.vokk-contact-hero-content {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;

    width: 37% !important;
    max-width: 540px !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    transform: none !important;
}


/* titel */
body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero h1 {
    max-width: 100% !important;

    margin-top: 0 !important;
    margin-bottom: 18px !important;

    color: #ffffff !important;
}


/* tekst */
body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero p {
    max-width: 500px !important;

    margin-bottom: 0 !important;

    color:
        rgba(255,255,255,.72) !important;

    line-height: 1.7 !important;
}


/* =========================================================
   EXTRA SUBTIELE SCHEIDING
   ========================================================= */

body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero
> .pb-content-hero-image {
    box-shadow:
        -1px 0 0 rgba(255,255,255,.05) !important;
}

}

/* PB CONTENT HERO C CLEAN SPLIT END */

/* PB CONTENT HERO C SHARP DIVIDER START */

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

/*
 * Geen blur / geen gradient in het midden.
 * Echte harde split.
 */
body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    bottom: 0 !important;
    left: 42% !important;

    width: 1px !important;
    height: 100% !important;

    z-index: 4 !important;

    pointer-events: none !important;

    background:
        rgba(255,255,255,.08) !important;

    filter: none !important;

    box-shadow: none !important;

    transform: none !important;
}


/*
 * Foto start exact bij de split.
 */
body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero
> .pb-content-hero-image {
    width: 58% !important;

    border-left: 0 !important;

    box-shadow: none !important;

    filter: none !important;
}


/*
 * Linker vlak blijft volledig strak en donker.
 */
body.pb-hero-variant-hero-c:not(.pb-home-hero)
.pb-content-hero {
    background:
        var(--pb-hero-bg, #061426) !important;
}

}

/* PB CONTENT HERO C SHARP DIVIDER END */



/* PB HOME HERO D SPLIT USP START
   ============================================================
   HERO D — SPLIT + HANGENDE USP-STROOK

   Alleen homepage.
   Alleen >= 969px.
   A/B/C blijven onaangeraakt.
   Mobiel blijft bestaande layout gebruiken.
   ============================================================ */

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


/* ============================================================
   HERO BASIS
   ============================================================ */

body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.kb-block.nuke-v10-master {
    position: relative !important;

    min-height: 700px !important;

    overflow: visible !important;

    margin-bottom: 42px !important;

    background:
        var(--vokk-darker, #05080d) !important;

    isolation: isolate !important;
}


/* oude decoratieve vormen uitschakelen */

body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.kb-block.nuke-v10-master::before,

body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.kb-block.nuke-v10-master::after {
    content: none !important;
    display: none !important;

    background: none !important;

    clip-path: none !important;

    border-radius: 0 !important;

    transform: none !important;
}


/* ============================================================
   FOTO — RECHTER SPLIT
   ============================================================ */

body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.pb-hero-bg-container {
    position: absolute !important;

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

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

    margin: 0 !important;
    padding: 0 !important;

    z-index: 1 !important;

    overflow: hidden !important;

    border: 0 !important;
    border-left:
        1px solid rgba(255,255,255,.07) !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    transform: none !important;
}


body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.pb-hero-bg-container img {
    display: block !important;

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

    max-width: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    opacity: 1 !important;

    border: 0 !important;
    border-radius: 0 !important;

    filter: none !important;

    transform: none !important;
}


/* ============================================================
   GEEN OVERLAY OVER FOTO
   Echte scherpe split.
   ============================================================ */

body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.pb-hero-bg-overlay {
    display: none !important;

    background: none !important;

    filter: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* ============================================================
   LINKER CONTENT
   ============================================================ */

body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.kb-inner.pb-hero-inner {
    position: relative !important;

    z-index: 10 !important;

    display: flex !important;
    align-items: center !important;

    grid-template-columns: none !important;

    width:
        min(
            calc(100% - 64px),
            1400px
        ) !important;

    min-height: 700px !important;

    margin: 0 auto !important;

    /*
     * Onderin ruimte voor de hangende USP-strip.
     */
    padding:
        105px 0 120px !important;
}


body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.pb-hero-content {
    position: relative !important;

    width: 39% !important;
    max-width: 560px !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 11 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    transform: none !important;
}


/* ============================================================
   TYPOGRAFIE
   ============================================================ */

body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.pb-hero-subtitle {
    color:
        var(--vokk-primary-light) !important;
}


body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.pb-hero-title {
    max-width: 13ch !important;

    color: #ffffff !important;

    font-size:
        clamp(
            40px,
            3.7vw,
            58px
        ) !important;

    line-height: 1.07 !important;

    letter-spacing: -1.5px !important;

    margin-bottom: 22px !important;
}


body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.pb-hero-title span {
    color: #ffffff !important;
}


body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.pb-hero-text {
    max-width: 520px !important;

    color:
        rgba(255,255,255,.76) !important;

    line-height: 1.7 !important;

    margin-bottom: 30px !important;
}


/* ============================================================
   CTA — STRAK
   ============================================================ */

body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.nuke-main-button {
    min-height: 52px !important;

    padding:
        0 26px !important;

    border-radius: 7px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--vokk-btn-1) 0%,
            var(--vokk-btn-2) 100%
        ) !important;

    box-shadow:
        0 12px 30px
        color-mix(
            in srgb,
            var(--vokk-primary) 22%,
            transparent
        ) !important;
}


/* ============================================================
   OUDE SIDE-CARDS WEG
   ============================================================ */

body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.pb-hero-visual {
    display: none !important;
}


/* ============================================================
   USP-STROOK
   Half onder de hero.
   ============================================================ */

body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.pb-hero-content {
    position: static !important;
}


body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.pb-hero-features {
    position: absolute !important;

    left: 50% !important;
    bottom: -38px !important;

    transform:
        translateX(-50%) !important;

    width:
        min(
            calc(100% - 80px),
            1360px
        ) !important;

    min-height: 76px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;

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

    gap: 0 !important;

    align-items: stretch !important;

    border:
        1px solid
        rgba(255,255,255,.10) !important;

    border-radius: 12px !important;

    background:
        color-mix(
            in srgb,
            var(--vokk-dark, #121827) 96%,
            transparent
        ) !important;

    box-shadow:
        0 18px 42px
        rgba(0,0,0,.28) !important;

    backdrop-filter:
        blur(14px) !important;

    -webkit-backdrop-filter:
        blur(14px) !important;

    overflow: hidden !important;

    z-index: 50 !important;
}


/* individuele USP */

body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.pb-hero-feature-item {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    min-width: 0 !important;
    min-height: 76px !important;

    margin: 0 !important;
    padding:
        0 22px !important;

    border: 0 !important;

    color:
        rgba(255,255,255,.95) !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    text-align: center !important;

    white-space: nowrap !important;
}


body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.pb-hero-feature-item + .pb-hero-feature-item {
    border-left:
        1px solid
        rgba(255,255,255,.09) !important;
}


body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
.pb-hero-feature-item svg {
    width: 18px !important;
    height: 18px !important;

    flex: 0 0 18px !important;

    stroke:
        var(--vokk-primary-light) !important;
}


/* ============================================================
   969 — 1180
   ============================================================ */

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

    body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
    .kb-inner.pb-hero-inner {
        width:
            calc(100% - 44px) !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
    .pb-hero-content {
        width: 40% !important;
        max-width: 40% !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
    .pb-hero-bg-container {
        width: 56% !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
    .pb-hero-features {
        width:
            calc(100% - 44px) !important;
    }


    body.pb-home-hero.pb-hero-variant-hero-d.pb-template-front-page
    .pb-hero-feature-item {
        padding:
            0 12px !important;

        font-size: 12px !important;
    }

}

}

/* PB HOME HERO D SPLIT USP END */

/* PB CURRENT SERVICES ORIGINAL RESTORE START */

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

    /*
     * Huidige uitstraling = originele Variant A.
     * Alleen homepage desktop.
     */

    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-services {
        padding: 20px 0 40px !important;
    }

    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0,1fr)) !important;
        gap: 20px !important;
        margin-top: 20px !important;
    }

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

        display: flex !important;
        align-items: flex-end !important;

        min-height: 280px !important;

        padding: 0 !important;

        overflow: hidden !important;

        border-radius: 14px !important;

        text-decoration: none !important;

        border:
            1px solid rgba(255,255,255,.10) !important;

        box-shadow:
            0 10px 30px rgba(0,0,0,.15) !important;

        background:
            transparent !important;

        text-align:
            left !important;
    }


    /*
     * Foto vult opnieuw de volledige kaart.
     */
    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-card
    > img.pb-service-bg {
        position: absolute !important;
        inset: 0 !important;

        display: block !important;

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

        object-fit: cover !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 1 !important;

        transform: none !important;

        z-index: 1 !important;
    }


    /*
     * Originele donkere gradient over de hele foto.
     */
    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-card::after {
        content: "" !important;

        display: block !important;

        position: absolute !important;
        inset: 0 !important;

        z-index: 2 !important;

        background:
            linear-gradient(
                180deg,
                rgba(3,10,22,.10) 20%,
                rgba(3,10,22,.92) 100%
            ) !important;

        pointer-events: none !important;
    }


    /*
     * Tekst weer onderin de foto,
     * niet als los zwevend rechthoekig paneel.
     */
    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-content {
        position: relative !important;
        inset: auto !important;

        z-index: 3 !important;

        display: block !important;

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

        min-width: 0 !important;

        margin: 0 !important;

        padding: 24px 20px !important;

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

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        color: #ffffff !important;

        text-align: left !important;
    }

    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-content h3 {
        margin: 0 0 6px !important;
        color: #ffffff !important;
        text-align: left !important;
    }

    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-content p {
        margin-left: 0 !important;
        margin-right: 0 !important;

        max-width: none !important;

        color: rgba(255,255,255,.82) !important;

        text-align: left !important;
    }

    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-more {
        color: var(--vokk-primary-light) !important;
        text-align: left !important;
    }
}

/* PB CURRENT SERVICES ORIGINAL RESTORE END */

/* PB CURRENT SERVICE HOVER REVEAL START */

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

    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-card {
        min-height: 320px !important;
        overflow: hidden !important;
    }

    /*
     * Foto altijd volledig kaartvullend.
     */
    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-card
    > img.pb-service-bg {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;

        transition:
            transform .35s ease !important;
    }

    /*
     * Tekstvlak standaard laag houden.
     * Daardoor blijft veel meer van de foto zichtbaar.
     */
    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-content {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        padding: 20px 20px 18px !important;

        background:
            linear-gradient(
                180deg,
                rgba(10,12,18,.12) 0%,
                rgba(10,12,18,.88) 46%,
                rgba(10,12,18,.96) 100%
            ) !important;

        transform:
            translateY(calc(100% - 112px)) !important;

        transition:
            transform .32s ease,
            background .32s ease !important;

        z-index: 3 !important;
    }

    /*
     * Titel blijft altijd zichtbaar.
     */
    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-content h3 {
        margin-bottom: 8px !important;
    }

    /*
     * Tekst/link zitten standaard lager in het verborgen deel.
     */
    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-content p,
    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-more {
        opacity: 0 !important;
        transform: translateY(10px) !important;

        transition:
            opacity .22s ease .05s,
            transform .22s ease .05s !important;
    }

    /*
     * Hover:
     * inhoud schuift omhoog en wordt volledig leesbaar.
     */
    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-card:hover
    .pb-vokk-service-content,
    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-card:focus-visible
    .pb-vokk-service-content {
        transform: translateY(0) !important;

        background:
            linear-gradient(
                180deg,
                rgba(10,12,18,.30) 0%,
                rgba(10,12,18,.91) 40%,
                rgba(10,12,18,.98) 100%
            ) !important;
    }

    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-card:hover
    .pb-vokk-service-content p,

    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-card:hover
    .pb-vokk-service-more,

    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-card:focus-visible
    .pb-vokk-service-content p,

    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-card:focus-visible
    .pb-vokk-service-more {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /*
     * Heel subtiele foto-beweging bij hover.
     */
    body.pb-layout-pack-current.pb-template-front-page
    .pb-vokk-service-card:hover
    > img.pb-service-bg {
        transform: scale(1.025) !important;
    }
}

/* PB CURRENT SERVICE HOVER REVEAL END */

/* PB CURRENT PROJECT FEATURED AIR START */

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

    /*
     * Alleen Huidige uitstraling / Projecten.
     * Geen typografie aanpassen — alleen meer ademruimte.
     */

    body.pb-layout-pack-current.pb-template-page-projecten
    .vokk-project-featured-content {
        padding: 46px 44px !important;
    }

    body.pb-layout-pack-current.pb-template-page-projecten
    .vokk-project-featured-content h2 {
        margin-bottom: 18px !important;
    }

    body.pb-layout-pack-current.pb-template-page-projecten
    .vokk-project-featured-content > p {
        margin-bottom: 28px !important;
    }

    body.pb-layout-pack-current.pb-template-page-projecten
    .vokk-project-featured-meta,
    body.pb-layout-pack-current.pb-template-page-projecten
    .vokk-project-meta {
        row-gap: 20px !important;
        column-gap: 30px !important;
        margin-top: 6px !important;
    }

    body.pb-layout-pack-current.pb-template-page-projecten
    .vokk-project-featured-content > a,
    body.pb-layout-pack-current.pb-template-page-projecten
    .vokk-project-featured-content .vokk-project-link {
        margin-top: 26px !important;
    }
}

/* PB CURRENT PROJECT FEATURED AIR END */

/* PB CURRENT CONTENT HERO SERVICES REFERENCE START */

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

    /*
     * ========================================================
     * HUIDIGE UITSTRALING / CURRENT
     *
     * Diensten is de referentie voor ALLE contenthero's.
     * Homepage uitgesloten.
     * ========================================================
     */

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

        background: var(--pb-darker) !important;
        isolation: isolate !important;
    }


    /*
     * --------------------------------------------------------
     * FOTO WEER VOLLEDIG ACHTER DE HERO
     *
     * Hiermee worden eventuele split-regels van Projecten,
     * Waardering, Over ons, Contact enz. overschreven.
     * --------------------------------------------------------
     */

    body.pb-layout-pack-current:not(.pb-template-front-page)
    .pb-content-hero
    > .pb-content-hero-image {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        max-width: none !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: cover !important;
        object-position: center center !important;

        opacity: 1 !important;

        transform: none !important;
        filter: none !important;

        border: 0 !important;
        border-radius: 0 !important;

        z-index: 0 !important;
    }


    /*
     * --------------------------------------------------------
     * DIENSTEN-ACHTIGE DONKERE OVERLAY
     *
     * Links sterk genoeg voor tekst,
     * rechts blijft de foto goed zichtbaar.
     * --------------------------------------------------------
     */

    body.pb-layout-pack-current:not(.pb-template-front-page)
    .pb-content-hero::before {
        content: "" !important;

        display: block !important;

        position: absolute !important;
        inset: 0 !important;

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

        background:
            linear-gradient(
                90deg,
                color-mix(in srgb, var(--pb-darker) 96%, transparent) 0%,
                color-mix(in srgb, var(--pb-darker) 90%, transparent) 34%,
                color-mix(in srgb, var(--pb-darker) 68%, transparent) 58%,
                color-mix(in srgb, var(--pb-darker) 24%, transparent) 82%,
                color-mix(in srgb, var(--pb-darker) 8%, transparent) 100%
            ) !important;

        background-image:
            linear-gradient(
                90deg,
                color-mix(in srgb, var(--pb-darker) 96%, transparent) 0%,
                color-mix(in srgb, var(--pb-darker) 90%, transparent) 34%,
                color-mix(in srgb, var(--pb-darker) 68%, transparent) 58%,
                color-mix(in srgb, var(--pb-darker) 24%, transparent) 82%,
                color-mix(in srgb, var(--pb-darker) 8%, transparent) 100%
            ) !important;

        opacity: 1 !important;

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


    /*
     * Split/decoratie uit andere contenthero-varianten uitzetten.
     */
    body.pb-layout-pack-current:not(.pb-template-front-page)
    .pb-content-hero::after {
        content: none !important;
        display: none !important;

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

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

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


    /*
     * --------------------------------------------------------
     * CONTENT BOVEN FOTO + OVERLAY
     * --------------------------------------------------------
     */

    body.pb-layout-pack-current:not(.pb-template-front-page)
    .pb-content-hero
    > :not(.pb-content-hero-image) {
        position: relative !important;
        z-index: 2 !important;
    }


    /*
     * Tekstkleur zoals de Diensten-referentie.
     * Geen font-size / gewicht / line-height wijzigen.
     */

    body.pb-layout-pack-current:not(.pb-template-front-page)
    .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;
    }

    body.pb-layout-pack-current:not(.pb-template-front-page)
    .pb-content-hero p {
        color: rgba(255,255,255,.88) !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

}

/* PB CURRENT CONTENT HERO SERVICES REFERENCE END */

/* PB DETAIL CONTENT INNER SPACE START */

/*
 * Dienst-detailpagina's — alle layoutvarianten.
 * Alleen desktop.
 *
 * Doel:
 * echte binnenruimte rondom tekst in het contentvlak.
 * Typografie blijft ongemoeid.
 */
@media screen and (min-width: 1025px) {

    body .vokk-detail-page
    .vokk-detail-section
    .vokk-detail-content {
        box-sizing: border-box !important;

        padding-top: 42px !important;
        padding-right: 46px !important;
        padding-bottom: 42px !important;
        padding-left: 46px !important;

        max-width: none !important;
    }

}

/* PB DETAIL CONTENT INNER SPACE END */


/* PB DETAIL BENEFITS ALIGN START */

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

    /*
     * Voordelenblok / iconenblok op detailpagina's
     * Titel + tekst links, icoon rechtsboven.
     * Tekst staat bewust lager voor meer ademruimte.
     */
    body .vokk-detail-benefits :is(
        .vokk-detail-benefit,
        .vokk-detail-benefit-card,
        .vokk-detail-benefit-item,
        .vokk-detail-benefits-grid > div
    ) {
        position: relative !important;
        text-align: left !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
        padding: 52px 34px 34px !important;
    }

    body .vokk-detail-benefits :is(
        .vokk-detail-benefit h3,
        .vokk-detail-benefit-card h3,
        .vokk-detail-benefit-item h3,
        .vokk-detail-benefits-grid > div h3
    ) {
        text-align: left !important;
        width: 100% !important;
        margin: 26px 72px 16px 0 !important;
        padding: 0 !important;
    }

    body .vokk-detail-benefits :is(
        .vokk-detail-benefit p,
        .vokk-detail-benefit-card p,
        .vokk-detail-benefit-item p,
        .vokk-detail-benefits-grid > div p
    ) {
        text-align: left !important;
        margin: 0 !important;
        padding: 0 72px 0 0 !important;
        max-width: none !important;
    }

    body .vokk-detail-benefits :is(
        .vokk-detail-benefit-icon,
        .vokk-detail-icon,
        .vokk-icon,
        .vokk-benefit-icon
    ) {
        position: absolute !important;
        top: 10px !important;
        right: 22px !important;
        margin: 0 !important;
        align-self: auto !important;
    }

    body .vokk-detail-benefits :is(
        .vokk-detail-benefit,
        .vokk-detail-benefit-card,
        .vokk-detail-benefit-item,
        .vokk-detail-benefits-grid > div
    ) > :is(i, svg, span):first-child {
        position: absolute !important;
        top: 10px !important;
        right: 22px !important;
        margin: 0 !important;
    }

}

/* PB DETAIL BENEFITS ALIGN END */


/* PB DETAIL BENEFIT ICON SUBTLE START */

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

    body .vokk-detail-benefits :is(
        .vokk-detail-benefit-icon,
        .vokk-detail-icon,
        .vokk-icon,
        .vokk-benefit-icon
    ),
    body .vokk-detail-benefits :is(
        .vokk-detail-benefit,
        .vokk-detail-benefit-card,
        .vokk-detail-benefit-item,
        .vokk-detail-benefits-grid > div
    ) > :is(i, svg, span):first-child {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background:
            color-mix(
                in srgb,
                var(--pb-primary-light) 12%,
                transparent
            ) !important;

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

        box-shadow: none !important;
        border-radius: 50% !important;

        font-size: 15px !important;
        line-height: 1 !important;

        color: var(--pb-primary-light) !important;
    }
}

/* PB DETAIL BENEFIT ICON SUBTLE END */





/* PB SERVICE BENEFITS ALIGN START */

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

    /*
     * Dienstenpagina — voordelenblok.
     * Exacte selectors uit page-diensten.php / kavion-style.css.
     */
    body.pb-template-page-diensten
    .vokk-service-benefits-grid {
        align-items: stretch !important;
    }

    body.pb-template-page-diensten
    .vokk-service-benefit {
        position: relative !important;
        text-align: left !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;

        padding:
            58px
            34px
            34px
            34px
            !important;

        box-sizing: border-box !important;
    }

    /*
     * Icoon rechtsboven.
     */
    body.pb-template-page-diensten
    .vokk-service-benefit-icon {
        position: absolute !important;

        top: 14px !important;
        right: 22px !important;
        left: auto !important;

        margin: 0 !important;

        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background:
            color-mix(
                in srgb,
                var(--pb-primary-light) 12%,
                transparent
            ) !important;

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

        box-shadow: none !important;
        border-radius: 50% !important;

        color: var(--pb-primary-light) !important;
    }

    /*
     * Titel links.
     */
    body.pb-template-page-diensten
    .vokk-service-benefit h3 {
        width: 100% !important;
        text-align: left !important;

        margin:
            16px
            64px
            14px
            0
            !important;

        padding: 0 !important;
    }

    /*
     * Tekst links.
     */
    body.pb-template-page-diensten
    .vokk-service-benefit p {
        width: 100% !important;
        max-width: none !important;

        text-align: left !important;

        margin: 0 !important;
        padding: 0 64px 0 0 !important;
    }
}

/* PB SERVICE BENEFITS ALIGN END */



/* PB HOME WHY BENEFITS FINAL START */

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

    /*
     * Exact component:
     * .pb-vokk-why
     *   .pb-vokk-benefits
     *     .pb-vokk-benefit
     *
     * Geldt ongeacht gekozen desktop layoutpack.
     */

    body.pb-template-front-page
    .pb-vokk-why
    .pb-vokk-benefit,

    body.pb-template-page-home
    .pb-vokk-why
    .pb-vokk-benefit,

    body.pb-template-index
    .pb-vokk-why
    .pb-vokk-benefit {
        position: relative !important;

        text-align: left !important;
        align-items: flex-start !important;

        box-sizing: border-box !important;

        /*
         * Bovenruimte zodat titel lager staat dan icoon.
         */
        padding:
            68px
            34px
            34px
            34px
            !important;
    }


    /*
     * Icoon rechtsboven.
     */
    body.pb-template-front-page
    .pb-vokk-benefit
    .pb-vokk-benefit-icon,

    body.pb-template-page-home
    .pb-vokk-benefit
    .pb-vokk-benefit-icon,

    body.pb-template-index
    .pb-vokk-benefit
    .pb-vokk-benefit-icon {
        position: absolute !important;

        top: 20px !important;
        right: 22px !important;
        left: auto !important;

        margin: 0 !important;

        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 50% !important;
        box-shadow: none !important;
    }


    /*
     * Titel links.
     */
    body.pb-template-front-page
    .pb-vokk-benefit h3,

    body.pb-template-page-home
    .pb-vokk-benefit h3,

    body.pb-template-index
    .pb-vokk-benefit h3 {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        text-align: left !important;

        margin:
            0
            58px
            14px
            0
            !important;

        padding: 0 !important;
    }


    /*
     * Tekst links.
     */
    body.pb-template-front-page
    .pb-vokk-benefit p,

    body.pb-template-page-home
    .pb-vokk-benefit p,

    body.pb-template-index
    .pb-vokk-benefit p {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        text-align: left !important;

        margin: 0 !important;
        padding: 0 58px 0 0 !important;
    }
}

/* PB HOME WHY BENEFITS FINAL END */


/* PB BENEFIT ICON NO BORDER START */

/* Alleen het blok: "Waarom kiezen voor PB Webdiensten" */
@media screen and (min-width: 969px) {
    html body .pb-vokk-why .pb-vokk-benefit .pb-vokk-benefit-icon,
    html body .pb-vokk-why .pb-vokk-benefit .pb-vokk-benefit-icon::before,
    html body .pb-vokk-why .pb-vokk-benefit .pb-vokk-benefit-icon::after {
        border: none !important;
        border-color: transparent !important;
        outline: none !important;
        box-shadow: none !important;
    }
}

/* PB BENEFIT ICON NO BORDER END */



/* PB SERVICES INTRO EDITORIAL START */

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

    body.pb-template-page-diensten
    .vokk-services-intro-inner {
        display: grid !important;
        grid-template-columns:
            minmax(0, .85fr)
            minmax(0, 1.15fr) !important;

        grid-template-rows:
            auto
            auto !important;

        column-gap: 90px !important;
        row-gap: 10px !important;

        align-items: start !important;

        max-width: 1120px !important;
        margin-inline: auto !important;

        text-align: left !important;
    }

    body.pb-template-page-diensten
    .vokk-services-intro-inner
    .vokk-services-small-title {
        grid-column: 1 !important;
        grid-row: 1 !important;

        text-align: left !important;
        margin: 0 !important;
    }

    body.pb-template-page-diensten
    .vokk-services-intro-inner > h2 {
        grid-column: 1 !important;
        grid-row: 2 !important;

        text-align: left !important;

        margin:
            0
            0
            0
            0
            !important;

        max-width: 460px !important;
    }

    body.pb-template-page-diensten
    .vokk-services-intro-inner > p {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;

        align-self: center !important;

        text-align: left !important;

        max-width: 650px !important;
        margin: 0 !important;
    }
}

/* PB SERVICES INTRO EDITORIAL END */



/* PB PROJECTS EDITORIAL INTRO START */

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

    /*
     * Alleen Projecten.
     * Geldt voor alle layoutpacks en Light / Medium / Dark.
     */
    body.pb-template-page-projecten
    .vokk-projects-intro {
        text-align: left !important;
    }

    body.pb-template-page-projecten
    .vokk-projects-intro-inner {
        display: grid !important;

        grid-template-columns:
            minmax(0, .85fr)
            minmax(0, 1.15fr) !important;

        grid-template-rows:
            auto
            auto !important;

        column-gap: 90px !important;
        row-gap: 10px !important;

        max-width: 1120px !important;
        margin: 0 auto !important;

        align-items: start !important;
        text-align: left !important;
    }

    body.pb-template-page-projecten
    .vokk-projects-intro-inner
    .vokk-projects-small-title {
        grid-column: 1 !important;
        grid-row: 1 !important;

        margin: 0 !important;
        text-align: left !important;
    }

    body.pb-template-page-projecten
    .vokk-projects-intro-inner > h2 {
        grid-column: 1 !important;
        grid-row: 2 !important;

        max-width: 470px !important;

        margin: 0 !important;
        text-align: left !important;
    }

    body.pb-template-page-projecten
    .vokk-projects-intro-inner > p {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;

        align-self: center !important;

        max-width: 650px !important;
        margin: 0 !important;

        text-align: left !important;
    }

    /*
     * Geen projecten:
     * melding niet meer verloren midden in een groot leeg vlak.
     */
    body.pb-template-page-projecten
    .vokk-projects-grid
    > .pb-inline-ce3f9f751a {
        grid-column: 1 / -1 !important;

        max-width: 760px !important;

        margin: 0 !important;
        padding: 18px 0 8px !important;

        text-align: left !important;
        justify-self: start !important;
    }

    body.pb-template-page-projecten
    .vokk-projects-showcase {
        padding-top: 0 !important;
    }
}

/* PB PROJECTS EDITORIAL INTRO END */



/* PB CONTACT DESKTOP SPACE START */

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

    /*
     * Alleen Contact.
     * Structureel voor alle layoutpacks / kleurmodi.
     */

    body.pb-template-page-contact
    .vokk-contact-main-grid {
        grid-template-columns:
            minmax(430px, .95fr)
            minmax(0, 1.35fr) !important;

        gap: 72px !important;

        align-items: start !important;
    }

    /*
     * Oude max-width van 470px loslaten,
     * zodat de linkerkolom zijn beschikbare ruimte gebruikt.
     */
    body.pb-template-page-contact
    .vokk-contact-info {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /*
     * Contactregels houden een vaste eigen icon-zone.
     */
    body.pb-template-page-contact
    .vokk-contact-detail {
        grid-template-columns:
            48px
            minmax(0, 1fr) !important;

        column-gap: 18px !important;

        width: 100% !important;
    }

    body.pb-template-page-contact
    .vokk-contact-detail-icon {
        width: 44px !important;
        height: 44px !important;

        flex: 0 0 44px !important;
    }

    body.pb-template-page-contact
    .vokk-contact-detail-body {
        min-width: 0 !important;
        width: 100% !important;
    }

    /*
     * Lange werkgebiedtekst mag de volle
     * beschikbare linkerkolom gebruiken.
     */
    body.pb-template-page-contact
    .vokk-contact-detail-body > :is(
        a,
        span
    ) {
        max-width: none !important;
    }
}

/* PB CONTACT DESKTOP SPACE END */


/* PB CURRENT SERVICES HOVER REVEAL START
 *
 * ALLEEN:
 * - homepage
 * - layoutpakket "Huidige uitstraling"
 * - Services A
 * - desktop vanaf 1025px
 *
 * Andere layouts en mobiel/tablet worden niet geraakt.
 * Typography wordt niet gewijzigd.
 * ========================================================= */

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

    /*
     * Basiskaart blijft dezelfde huidige kaart.
     */
    body.pb-template-front-page.pb-layout-pack-current.pb-services-variant-a
    .pb-vokk-services
    .pb-vokk-service-card {
        position: relative !important;
        display: flex !important;
        align-items: flex-end !important;
        min-height: 280px !important;
        overflow: hidden !important;
    }


    /*
     * Foto volledig zichtbaar in de kaart.
     */
    body.pb-template-front-page.pb-layout-pack-current.pb-services-variant-a
    .pb-vokk-services
    .pb-vokk-service-card
    > img.pb-service-bg {
        position: absolute !important;
        inset: 0 !important;

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

        object-fit: cover !important;

        opacity: 1 !important;

        transform: scale(1) !important;

        transition:
            transform .35s ease !important;

        z-index: 0 !important;
    }


    /*
     * Oude zware full-card overlay vervangen door
     * alleen een donkere gradient onderin.
     */
    body.pb-template-front-page.pb-layout-pack-current.pb-services-variant-a
    .pb-vokk-services
    .pb-vokk-service-card::after {
        content: "" !important;

        position: absolute !important;
        inset: 0 !important;

        display: block !important;

        z-index: 1 !important;

        pointer-events: none !important;

        background:
            linear-gradient(
                to top,
                rgba(3,10,22,.74) 0%,
                rgba(3,10,22,.52) 20%,
                rgba(3,10,22,.18) 42%,
                rgba(3,10,22,.04) 60%,
                rgba(3,10,22,0) 74%
            ) !important;
    }


    /*
     * Contentblok onderaan.
     *
     * In rust wordt het blok zover naar beneden geschoven
     * dat alleen de titel zichtbaar blijft.
     */
    body.pb-template-front-page.pb-layout-pack-current.pb-services-variant-a
    .pb-vokk-services
    .pb-vokk-service-card
    .pb-vokk-service-content {
        position: relative !important;

        z-index: 3 !important;

        width: 100% !important;

        padding: 24px 20px !important;

        background:
            linear-gradient(
                to top,
                rgba(3,10,22,.82) 0%,
                rgba(3,10,22,.68) 72%,
                rgba(3,10,22,.54) 100%
            ) !important;

        transform:
            translateY(calc(100% - 72px)) !important;

        transition:
            transform .32s cubic-bezier(.22,.61,.36,1) !important;
    }


    /*
     * Titel blijft altijd staan.
     * Geen font-size/font-weight wijzigingen.
     */
    body.pb-template-front-page.pb-layout-pack-current.pb-services-variant-a
    .pb-vokk-services
    .pb-vokk-service-card
    .pb-vokk-service-content h3 {
        color: #fff !important;
        opacity: 1 !important;
    }


    /*
     * Beschrijving en Lees meer zijn in rust verborgen.
     */
    body.pb-template-front-page.pb-layout-pack-current.pb-services-variant-a
    .pb-vokk-services
    .pb-vokk-service-card
    .pb-vokk-service-content p,

    body.pb-template-front-page.pb-layout-pack-current.pb-services-variant-a
    .pb-vokk-services
    .pb-vokk-service-card
    .pb-vokk-service-more {
        opacity: 0 !important;

        transform: translateY(10px) !important;

        transition:
            opacity .20s ease .07s,
            transform .20s ease .07s !important;
    }


    /*
     * Hover:
     * complete tekstvlak schuift omhoog.
     */
    body.pb-template-front-page.pb-layout-pack-current.pb-services-variant-a
    .pb-vokk-services
    .pb-vokk-service-card:hover
    .pb-vokk-service-content,

    body.pb-template-front-page.pb-layout-pack-current.pb-services-variant-a
    .pb-vokk-services
    .pb-vokk-service-card:focus-within
    .pb-vokk-service-content {
        transform: translateY(0) !important;
    }


    body.pb-template-front-page.pb-layout-pack-current.pb-services-variant-a
    .pb-vokk-services
    .pb-vokk-service-card:hover
    .pb-vokk-service-content p,

    body.pb-template-front-page.pb-layout-pack-current.pb-services-variant-a
    .pb-vokk-services
    .pb-vokk-service-card:hover
    .pb-vokk-service-more,

    body.pb-template-front-page.pb-layout-pack-current.pb-services-variant-a
    .pb-vokk-services
    .pb-vokk-service-card:focus-within
    .pb-vokk-service-content p,

    body.pb-template-front-page.pb-layout-pack-current.pb-services-variant-a
    .pb-vokk-services
    .pb-vokk-service-card:focus-within
    .pb-vokk-service-more {
        opacity: 1 !important;

        transform: translateY(0) !important;
    }


    /*
     * Alleen subtiele beweging van de foto.
     */
    body.pb-template-front-page.pb-layout-pack-current.pb-services-variant-a
    .pb-vokk-services
    .pb-vokk-service-card:hover
    > img.pb-service-bg,

    body.pb-template-front-page.pb-layout-pack-current.pb-services-variant-a
    .pb-vokk-services
    .pb-vokk-service-card:focus-within
    > img.pb-service-bg {
        transform: scale(1.025) !important;
    }
}

/* PB CURRENT SERVICES HOVER REVEAL END */


/* PB CURRENT DARK WHY HERO GLOW START */

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

    /*
     * Alleen:
     * - homepage
     * - Huidige uitstraling
     * - Dark mode
     */
    body.pb-mode-dark.pb-template-front-page.pb-layout-pack-current
    .pb-vokk-why {
        position: relative !important;
        isolation: isolate !important;

        background:
            color-mix(
                in srgb,
                var(--vokk-dark) 96%,
                #000 4%
            ) !important;

        overflow: hidden !important;
    }


    /*
     * Zachte gloed die visueel onder de hero vandaan komt.
     * Geen hard oranje vlak.
     */
    body.pb-mode-dark.pb-template-front-page.pb-layout-pack-current
    .pb-vokk-why::before {
        content: "" !important;

        position: absolute !important;
        z-index: 0 !important;

        left: 50% !important;
        top: -170px !important;

        width: min(1100px, 86vw) !important;
        height: 360px !important;

        transform: translateX(-50%) !important;

        pointer-events: none !important;

        background:
            radial-gradient(
                ellipse at center,
                color-mix(
                    in srgb,
                    var(--vokk-primary) 24%,
                    transparent
                ) 0%,
                color-mix(
                    in srgb,
                    var(--vokk-primary) 11%,
                    transparent
                ) 34%,
                transparent 72%
            ) !important;

        filter: blur(18px) !important;
    }


    /*
     * Werkelijke content boven de glow houden.
     */
    body.pb-mode-dark.pb-template-front-page.pb-layout-pack-current
    .pb-vokk-why
    > .pb-vokk-wrap {
        position: relative !important;
        z-index: 1 !important;
    }


    /*
     * Kaarten dichter tegen de darkmode achtergrond.
     * Dus niet meer die losse donkergrijze rechthoeken.
     */
    body.pb-mode-dark.pb-template-front-page.pb-layout-pack-current
    .pb-vokk-why
    .pb-vokk-benefit {
        background:
            color-mix(
                in srgb,
                var(--vokk-dark) 90%,
                #ffffff 10%
            ) !important;

        border-color:
            color-mix(
                in srgb,
                var(--vokk-primary) 12%,
                transparent
            ) !important;

        box-shadow:
            0 18px 45px
            rgba(0,0,0,.14) !important;
    }


    /*
     * Zeer lichte warme gloed aan de bovenkant van de kaarten,
     * zodat ze visueel bij de hero-overgang horen.
     */
    body.pb-mode-dark.pb-template-front-page.pb-layout-pack-current
    .pb-vokk-why
    .pb-vokk-benefit::before {
        content: "" !important;

        position: absolute !important;
        inset: 0 !important;

        pointer-events: none !important;

        background:
            linear-gradient(
                180deg,
                color-mix(
                    in srgb,
                    var(--vokk-primary) 5%,
                    transparent
                ) 0%,
                transparent 42%
            ) !important;
    }
}

/* PB CURRENT DARK WHY HERO GLOW END */


/* PB CURRENT DARK WHY CARD COLOR START */

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

    body.pb-mode-dark.pb-template-front-page.pb-layout-pack-current
    .pb-vokk-why
    .pb-vokk-benefit {
        background: #111214 !important;
    }

}

/* PB CURRENT DARK WHY CARD COLOR END */



/* PB CURRENT DARK WHY GLOW FIX START */

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

    /*
     * Alleen:
     * - huidige uitstraling
     * - dark mode
     * - homepage why/benefits blok
     */
    body.pb-template-front-page.pb-layout-pack-current.pb-mode-dark
    .pb-vokk-why {
        position: relative !important;
        overflow: hidden !important;
        isolation: isolate !important;
        background: #0b0d10 !important;
    }

    /*
     * Gloed alleen bovenin achter de titel/subtitel.
     * Niet tot over de kaarten laten lopen.
     */
    body.pb-template-front-page.pb-layout-pack-current.pb-mode-dark
    .pb-vokk-why::before {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: -120px !important;
        transform: translateX(-50%) !important;
        width: min(900px, 82%) !important;
        height: 240px !important;
        pointer-events: none !important;
        z-index: 0 !important;
        border-radius: 999px !important;
        background:
            radial-gradient(
                ellipse at center,
                color-mix(in srgb, var(--pb-primary) 30%, transparent) 0%,
                color-mix(in srgb, var(--pb-primary) 18%, transparent) 38%,
                rgba(0,0,0,0) 75%
            ) !important;
        filter: blur(36px) !important;
        opacity: .9 !important;
    }

    /*
     * Alle echte content boven de gloed zetten.
     */
    body.pb-template-front-page.pb-layout-pack-current.pb-mode-dark
    .pb-vokk-why > * {
        position: relative !important;
        z-index: 1 !important;
    }

    /*
     * Kaarten expliciet boven de gloed en volledig opaak.
     */
    body.pb-template-front-page.pb-layout-pack-current.pb-mode-dark
    .pb-vokk-why .pb-vokk-benefit {
        position: relative !important;
        z-index: 2 !important;
        background: #111214 !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* PB CURRENT DARK WHY GLOW FIX END */


/* PB CURRENT DARK WHY BLEND START */

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

    /*
     * Alleen:
     * - homepage
     * - huidige layout
     * - dark mode
     * - blok "Waarom kiezen ..."
     */
    body.pb-template-front-page.pb-layout-pack-current.pb-mode-dark
    .pb-vokk-why
    .pb-vokk-benefit {
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /*
     * Eventuele pseudo-lagen ook uitschakelen
     */
    body.pb-template-front-page.pb-layout-pack-current.pb-mode-dark
    .pb-vokk-why
    .pb-vokk-benefit::before,

    body.pb-template-front-page.pb-layout-pack-current.pb-mode-dark
    .pb-vokk-why
    .pb-vokk-benefit::after {
        content: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }
}

/* PB CURRENT DARK WHY BLEND END */


/* PB CURRENT DARK WHY SEAMLESS START */

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

    body.pb-template-front-page.pb-layout-pack-current.pb-mode-dark
    .pb-vokk-why {
        background:
            linear-gradient(
                180deg,
                color-mix(
                    in srgb,
                    var(--vokk-primary) 7%,
                    #111214
                ) 0%,
                #111214 34%,
                #111214 100%
            ) !important;
    }

    body.pb-template-front-page.pb-layout-pack-current.pb-mode-dark
    .pb-vokk-why
    .pb-vokk-benefit {
        background: transparent !important;
        background-color: transparent !important;

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

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.pb-template-front-page.pb-layout-pack-current.pb-mode-dark
    .pb-vokk-why
    .pb-vokk-benefit::before,

    body.pb-template-front-page.pb-layout-pack-current.pb-mode-dark
    .pb-vokk-why
    .pb-vokk-benefit::after {
        content: none !important;
        display: none !important;
    }
}

/* PB CURRENT DARK WHY SEAMLESS END */


/* PB CURRENT HERO CARD ICON + CTA START */

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

    /*
     * Alleen Huidige uitstraling / Current.
     * Geldt voor Dark, Medium en Light.
     */
    body.pb-template-front-page.pb-layout-pack-current
    .pb-hero-tile {
        position: relative !important;

        /*
         * Rechtsboven ruimte vrijhouden voor het icoon.
         */
        padding-right: 74px !important;
    }


    /*
     * Hero-card icoon rechtsboven.
     */
    body.pb-template-front-page.pb-layout-pack-current
    .pb-hero-tile
    .pb-hero-tile-icon {
        position: absolute !important;

        top: 20px !important;
        right: 20px !important;
        left: auto !important;

        margin: 0 !important;

        z-index: 3 !important;
    }


    /*
     * Voorkom dat eventuele bestaande flex/grid-logica
     * het icoon alsnog invloed laat hebben op de tekst.
     */
    body.pb-template-front-page.pb-layout-pack-current
    .pb-hero-tile
    .pb-hero-tile-content {
        width: 100% !important;
    }


    /*
     * Linker CTA: geen pill meer.
     * Geen kleuren/typografie wijzigen.
     */
    body.pb-template-front-page.pb-layout-pack-current
    .pb-hero-content
    .nuke-main-button {
        border-radius: 10px !important;
    }
}

/* PB CURRENT HERO CARD ICON + CTA END */


/* PB LIGHT FOOTER VIVID FINAL START */

/*
 * Light mode:
 * GEEN wit in de footer mengen.
 *
 * De footer behoudt volledig de identiteit van het
 * gekozen kleurenpalet.
 */
html body.pb-mode-light-page[class*="pb-preset-"]
:is(
    .kb-block-agencyfooter-block,
    .agencyfooter-block-footer,
    .site-footer,
    footer.site-footer
) {
    background:
        radial-gradient(
            circle at 15% 0%,
            color-mix(
                in srgb,
                var(--pb-primary) 24%,
                transparent
            ),
            transparent 430px
        ),

        radial-gradient(
            circle at 100% 100%,
            color-mix(
                in srgb,
                var(--pb-primary-light) 14%,
                transparent
            ),
            transparent 420px
        ),

        linear-gradient(
            145deg,
            var(--pb-footer-gradient-1) 0%,
            var(--pb-footer-gradient-2) 100%
        ) !important;

    background-color:
        var(--pb-footer-bg) !important;

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


/* Titels helder */
html body.pb-mode-light-page[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-grid h4,

html body.pb-mode-light-page[class*="pb-preset-"]
.agencyfooter-block-footer
.agencyfooter-block-grid h4 {
    color:
        var(--pb-footer-text) !important;
}


/* Gewone footertekst */
html body.pb-mode-light-page[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-grid p,

html body.pb-mode-light-page[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-grid a,

html body.pb-mode-light-page[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-bottom {
    color:
        var(--pb-footer-muted) !important;
}


/* Links iets helderder bij hover */
html body.pb-mode-light-page[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-grid a:hover,

html body.pb-mode-light-page[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-grid a:focus {
    color:
        var(--pb-footer-text) !important;
}


/* Socials: palettekleur, geen witte mix */
html body.pb-mode-light-page[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-social-icon {
    background:
        color-mix(
            in srgb,
            var(--pb-primary) 72%,
            var(--pb-footer-bg) 28%
        ) !important;

    color:
        #ffffff !important;

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


/* Copyrightlijn ook uit palette */
html body.pb-mode-light-page[class*="pb-preset-"]
.kb-block-agencyfooter-block
.agencyfooter-block-bottom {
    border-color:
        var(--pb-footer-border) !important;
}

/* PB LIGHT FOOTER VIVID FINAL END */


/* PB LIGHT FOOTER INNER TRANSPARENT START */

/*
 * Light mode:
 * buitenste footer houdt de volle palettekleur,
 * binnenste contentlaag mag GEEN eigen vlak vormen.
 */
html body.pb-mode-light-page[class*="pb-preset-"]
.agencyfooter-block-footer {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/*
 * Ook eventuele binnenste grid/wrapper mag geen paneel worden.
 */
html body.pb-mode-light-page[class*="pb-preset-"]
.agencyfooter-block-grid {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* PB LIGHT FOOTER INNER TRANSPARENT END */


/* PB LIGHT FOOTER SEAMLESS FINAL START */

html body.pb-mode-light-page
.kb-block-agencyfooter-block
> .kb-block-inner,

html body.pb-mode-light-page
.kb-block-agencyfooter-block
> .kb-block-inner
> .agencyfooter-block-footer,

html body.pb-mode-light-page
.kb-block-agencyfooter-block
.agencyfooter-block-grid {

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

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


/*
 * Footer.php heeft vóór .kb-block-inner ook nog
 * een losse decoratieve div.
 * Die mag in Light geen tweede vlak maken.
 */
html body.pb-mode-light-page
.kb-block-agencyfooter-block
> div:first-child:not(.kb-block-inner) {

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

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


/*
 * De buitenste footer blijft de enige kleurlaag.
 */
html body.pb-mode-light-page
.kb-block-agencyfooter-block {

    isolation: isolate;
}

/* PB LIGHT FOOTER SEAMLESS FINAL END */


/* ============================================================
   PB DETAIL HERO CTA CONTRAST HARDLOCK
   Alle detailpagina's / presets / varianten.
   Alleen tekstcontrast; typografie en layout blijven onaangeraakt.
   ============================================================ */

body .vokk-detail-hero .vokk-detail-hero-button,
body .vokk-detail-hero .vokk-detail-hero-button:link,
body .vokk-detail-hero .vokk-detail-hero-button:visited,
body .vokk-detail-hero .vokk-detail-hero-button:hover,
body .vokk-detail-hero .vokk-detail-hero-button:focus,
body .vokk-detail-hero .vokk-detail-hero-button:active,
body .vokk-detail-hero .vokk-detail-hero-button span,
body .vokk-detail-hero .vokk-detail-hero-button i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* PB DETAIL HERO CTA CONTRAST HARDLOCK END */


/* ============================================================
   PB RESPONSIVE FINAL V2 START

   RESPONSIVE ARCHITECTUUR

   <= 1180:
   - tablet en mobiel gebruiken compacte header
   - panorama hero wordt tekstvlak
   - reguliere contentfoto volgt onder hero

   1181 - 1439:
   - laptop blijft desktop
   - alleen maatvoering/spacing wordt compacter

   >= 1440:
   - bestaande desktop/wide uitstraling blijft leidend

   UITGESLOTEN:
   - footer
   - typografie
   - kleurensysteem
   ============================================================ */


/* ============================================================
   ALGEMENE VEILIGHEID
   ============================================================ */

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

.vokk-detail-page,
.vokk-detail-page * {
    box-sizing: border-box;
}

.vokk-detail-page img {
    max-width: 100%;
}


/* ============================================================
   TABLET + MOBIEL HEADER
   <= 1180
   ============================================================ */

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

    .vokk-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        height: auto !important;
        min-height: 74px !important;

        z-index: 99999999 !important;
    }


    .vokk-header-inner {
        width: 100% !important;
        max-width: none !important;

        height: 74px !important;

        padding-left: 22px !important;
        padding-right: 22px !important;
    }


    .vokk-nav,
    .vokk-action {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }


    .vokk-logo {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }


    .vokk-logo img {
        height: 42px !important;
        max-width: 190px !important;
    }


    .vokk-hamburger {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: auto !important;

        position: relative !important;

        flex:
            0
            0
            44px !important;

        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        z-index: 100 !important;
    }


    .vokk-mobile-menu {
        position: relative !important;

        width: 100% !important;

        z-index: 50 !important;
    }


    .vokk-mobile-menu.is-open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }


    .vokk-mobile-menu.is-open
    .vokk-mobile-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}


/* ============================================================
   DETAIL HERO
   TABLET + MOBIEL
   <= 1180

   Geen panorama-foto achter tekst.
   Tekst eerst, reguliere foto eronder.
   ============================================================ */

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

    .vokk-detail-page
    .pb-content-hero {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: hidden !important;

        background:
            var(
                --pb-hero-bg,
                #020812
            ) !important;

        background-image:
            none !important;
    }


    /*
     * Desktop panorama is op tablet/mobiel niet nodig.
     */
    .vokk-detail-page
    .pb-content-hero
    > .pb-content-hero-image {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }


    /*
     * Geen desktop-overlay nodig.
     */
    .vokk-detail-page
    .pb-content-hero::before {
        background:
            none !important;
    }


    .vokk-detail-page
    .pb-content-hero
    .vokk-detail-container {
        position: relative !important;

        display: flex !important;
        align-items: center !important;

        width:
            calc(
                100% - 64px
            ) !important;

        max-width:
            900px !important;

        min-height:
            410px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        padding-top:
            112px !important;

        padding-bottom:
            62px !important;

        padding-left:
            0 !important;

        padding-right:
            0 !important;
    }


    .vokk-detail-page
    .pb-content-hero
    .vokk-detail-hero-content {
        position:
            relative !important;

        inset:
            auto !important;

        transform:
            none !important;

        width:
            100% !important;

        max-width:
            680px !important;

        height:
            auto !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }


    /*
     * Reguliere 1400x950 content-afbeelding.
     * Geen cover/crop.
     */
    .vokk-detail-page
    .pb-mobile-hero-after {
        position:
            relative !important;

        display:
            block !important;

        width:
            100% !important;

        max-width:
            1180px !important;

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        margin:
            0 auto !important;

        padding:
            0 !important;

        object-fit:
            contain !important;

        object-position:
            center center !important;

        visibility:
            visible !important;

        opacity:
            1 !important;

        transform:
            none !important;

        float:
            none !important;

        clear:
            both !important;
    }
}


/* ============================================================
   TABLET CONTENT
   769 - 1180
   ============================================================ */

@media screen
and (min-width: 769px)
and (max-width: 1180px) {

    .vokk-detail-page
    .vokk-detail-container {
        width:
            calc(
                100% - 64px
            ) !important;

        max-width:
            980px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }


    /*
     * Grote afbeelding/contentsecties niet meer geforceerd
     * als kleine desktop naast elkaar.
     */
    .vokk-detail-page
    :is(
        .vokk-detail-intro-grid,
        .vokk-detail-section-grid,
        .vokk-detail-faq-grid
    ) {
        grid-template-columns:
            minmax(0,1fr) !important;

        gap:
            40px !important;
    }


    .vokk-detail-page
    .vokk-detail-section.reverse
    :is(
        .vokk-detail-image,
        .vokk-detail-content
    ) {
        order:
            initial !important;
    }


    /*
     * Compacte 2x2 structuur is op tablet sterker
     * dan vier smalle desktopkolommen.
     */
    .vokk-detail-page
    .vokk-detail-benefits-grid,
    .vokk-detail-page
    .vokk-detail-process-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }


    .vokk-detail-page
    :is(
        .vokk-detail-intro-image,
        .vokk-detail-image
    ) {
        width:
            100% !important;

        max-width:
            100% !important;

        min-height:
            380px !important;
    }


    .vokk-detail-page
    .vokk-detail-content {
        max-width:
            680px !important;
    }


    .vokk-detail-page
    .vokk-detail-cta-box {
        grid-template-columns:
            minmax(0,1fr) !important;

        gap:
            26px !important;
    }
}


/* ============================================================
   TELEFOON / KLEINE TABLET
   <= 768
   ============================================================ */

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

    .vokk-detail-page
    .vokk-detail-container {
        width:
            100% !important;

        max-width:
            100% !important;

        padding-left:
            20px !important;

        padding-right:
            20px !important;
    }


    .vokk-detail-page
    .pb-content-hero
    .vokk-detail-container {
        width:
            100% !important;

        max-width:
            100% !important;

        min-height:
            0 !important;

        padding-top:
            108px !important;

        padding-right:
            20px !important;

        padding-bottom:
            55px !important;

        padding-left:
            20px !important;
    }


    .vokk-detail-page
    :is(
        .vokk-detail-intro-grid,
        .vokk-detail-section-grid,
        .vokk-detail-benefits-grid,
        .vokk-detail-process-grid,
        .vokk-detail-faq-grid,
        .vokk-detail-cta-box
    ) {
        grid-template-columns:
            minmax(0,1fr) !important;
    }


    .vokk-detail-page
    :is(
        .vokk-detail-intro-grid,
        .vokk-detail-section-grid
    ) {
        gap:
            32px !important;
    }


    .vokk-detail-page
    :is(
        .vokk-detail-intro-image,
        .vokk-detail-image
    ) {
        width:
            100% !important;

        max-width:
            100% !important;

        min-height:
            280px !important;
    }


    .vokk-detail-page
    .vokk-detail-benefits-grid {
        gap:
            0 !important;
    }


    .vokk-detail-page
    .vokk-detail-process-grid {
        gap:
            16px !important;
    }


    .vokk-detail-page
    .vokk-detail-cta-box {
        gap:
            24px !important;
    }


    .vokk-detail-page
    :is(
        .vokk-detail-hero-button,
        .vokk-detail-cta-button
    ) {
        max-width:
            100% !important;
    }
}


/* ============================================================
   MOBIEL
   <= 600
   ============================================================ */

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

    .vokk-header {
        min-height:
            70px !important;
    }


    .vokk-header-inner {
        height:
            70px !important;

        padding-left:
            16px !important;

        padding-right:
            16px !important;
    }


    .vokk-logo img {
        height:
            38px !important;

        max-width:
            165px !important;
    }


    .vokk-hamburger {
        flex-basis:
            42px !important;

        width:
            42px !important;

        min-width:
            42px !important;

        max-width:
            42px !important;

        height:
            42px !important;

        min-height:
            42px !important;

        max-height:
            42px !important;
    }


    .vokk-mobile-menu {
        padding:
            10px
            16px
            20px !important;
    }


    .vokk-detail-page
    .pb-content-hero
    .vokk-detail-container {
        padding-top:
            98px !important;

        padding-bottom:
            48px !important;
    }


    /*
     * Normale foto blijft natuurlijke verhouding behouden.
     */
    .vokk-detail-page
    .pb-mobile-hero-after {
        width:
            100% !important;

        height:
            auto !important;

        min-height:
            0 !important;

        object-fit:
            contain !important;
    }
}


/* ============================================================
   LANDSCAPE MOBIEL
   WEINIG HOOGTE
   ============================================================ */

@media screen
and (orientation: landscape)
and (max-height: 600px)
and (max-width: 1180px) {

    .vokk-detail-page
    .pb-content-hero
    .vokk-detail-container {
        min-height:
            0 !important;

        padding-top:
            96px !important;

        padding-bottom:
            44px !important;

        align-items:
            center !important;
    }
}


/* ============================================================
   LAPTOP / KLEINE DESKTOP
   1181 - 1439
   ============================================================ */

@media screen
and (min-width: 1181px)
and (max-width: 1439px) {

    /*
     * Desktopstructuur behouden,
     * alleen horizontale maatvoering compacter.
     */

    .vokk-header-inner {
        max-width:
            1320px !important;

        padding-left:
            22px !important;

        padding-right:
            22px !important;
    }


    .vokk-logo img {
        height:
            43px !important;

        max-width:
            185px !important;
    }


    .vokk-nav {
        gap:
            20px !important;

        margin-left:
            24px !important;
    }


    .vokk-nav ul {
        gap:
            20px !important;
    }


    .vokk-action {
        margin-left:
            22px !important;
    }


    .vokk-cta {
        padding-left:
            18px !important;

        padding-right:
            18px !important;
    }


    .vokk-detail-page
    .vokk-detail-container {
        max-width:
            min(
                1320px,
                calc(100% - 64px)
            ) !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }


    .vokk-detail-page
    :is(
        .vokk-detail-intro-grid,
        .vokk-detail-section-grid
    ) {
        gap:
            54px !important;
    }


    /*
     * Homepage desktophero blijft dezelfde hero.
     * Alleen maatvoering beter geschikt voor laptop.
     */
    body.pb-template-front-page
    .kb-inner.pb-hero-inner {
        min-height:
            620px !important;

        padding-top:
            110px !important;

        padding-bottom:
            80px !important;

        gap:
            30px !important;
    }
}


/* ============================================================
   DESKTOP 1440 - 1599
   HUIDIGE REGELS BEHOUDEN
   ============================================================ */

@media screen
and (min-width: 1440px)
and (max-width: 1599px) {

    .vokk-detail-page
    .vokk-detail-container {
        max-width:
            min(
                1400px,
                calc(100% - 80px)
            ) !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }
}


/* ============================================================
   WIDE >=1600
   HUIDIGE V1 GEDRAG BEHOUDEN
   ============================================================ */

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

    .vokk-detail-page
    .vokk-detail-container {
        width:
            calc(
                100% - 120px
            ) !important;

        max-width:
            1440px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }


    .vokk-detail-page
    :is(
        .vokk-detail-intro-grid,
        .vokk-detail-section-grid,
        .vokk-detail-benefits-grid,
        .vokk-detail-process-grid,
        .vokk-detail-faq-grid,
        .vokk-detail-cta-box
    ) {
        max-width:
            1440px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }
}


/* ============================================================
   FLEX / GRID OVERFLOW HARDENING
   ============================================================ */

.vokk-detail-page
:is(
    .vokk-detail-intro-grid,
    .vokk-detail-section-grid,
    .vokk-detail-benefits-grid,
    .vokk-detail-process-grid,
    .vokk-detail-faq-grid,
    .vokk-detail-cta-box
)
> * {
    min-width: 0;
}


/* PB RESPONSIVE FINAL V2 END */

/* ============================================================
   PB MAIN PAGES RESPONSIVE IMAGE HARDLOCK V1

   Alleen hoofdcontentpagina's.
   Detailpagina's en footer uitgesloten.

   Doel:
   - geen afgesneden responsive foto's
   - natuurlijke beeldverhouding behouden
   - tablet en mobiel dezelfde betrouwbare beeldlogica
   ============================================================ */


/* Standaard desktop verborgen */
body.pb-template-front-page
.pb-mobile-home-hero-image,

.vokk-services-page
.pb-mobile-hero-after,

.vokk-projects-page
.pb-mobile-hero-after,

.vokk-about-page
.pb-mobile-hero-after,

.vokk-contact-page
.pb-mobile-hero-after {
    display: none;
}


/* ============================================================
   TABLET + MOBIEL
   <= 1180
   ============================================================ */

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

    /*
     * Reguliere responsive afbeeldingen.
     *
     * GEEN:
     * - object-fit: cover
     * - vaste hoogte
     * - aspect-ratio crop
     * - absolute positioning
     */

    body.pb-template-front-page
    .pb-mobile-home-hero-image,

    .vokk-services-page
    .pb-mobile-hero-after,

    .vokk-projects-page
    .pb-mobile-hero-after,

    .vokk-about-page
    .pb-mobile-hero-after,

    .vokk-contact-page
    .pb-mobile-hero-after {

        position: relative !important;

        inset: auto !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
        object-position: center center !important;

        float: none !important;
        clear: both !important;

        visibility: visible !important;
        opacity: 1 !important;

        transform: none !important;

        border: 0 !important;
    }


    /*
     * Oude desktop hero-afbeelding verbergen.
     * Teksthero blijft bestaan.
     */

    .vokk-services-page
    .pb-content-hero
    > .pb-content-hero-image,

    .vokk-projects-page
    .pb-content-hero
    > .pb-content-hero-image,

    .vokk-about-page
    .pb-content-hero
    > .pb-content-hero-image,

    .vokk-contact-page
    .pb-content-hero
    > .pb-content-hero-image {

        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }


    /*
     * Geen panoramische achtergrond/crop meer
     * achter de tekst.
     */

    .vokk-services-page
    .pb-content-hero,

    .vokk-projects-page
    .pb-content-hero,

    .vokk-about-page
    .pb-content-hero,

    .vokk-contact-page
    .pb-content-hero {

        height: auto !important;
        min-height: 0 !important;

        background-image: none !important;

        overflow: hidden !important;
    }


    /*
     * Desktop gradient-overlay niet meer nodig
     * wanneer er geen foto achter de tekst staat.
     */

    .vokk-services-page
    .pb-content-hero::before,

    .vokk-projects-page
    .pb-content-hero::before,

    .vokk-about-page
    .pb-content-hero::before,

    .vokk-contact-page
    .pb-content-hero::before {

        background-image: none !important;
    }


    /*
     * Afbeelding moet als normaal documentelement
     * tussen hero en volgende sectie staan.
     */

    .vokk-services-page
    .pb-mobile-hero-after + section,

    .vokk-projects-page
    .pb-mobile-hero-after + section,

    .vokk-about-page
    .pb-mobile-hero-after + section,

    .vokk-contact-page
    .pb-mobile-hero-after + section {

        clear: both !important;
        margin-top: 0 !important;
    }
}


/* ============================================================
   TABLET
   769 - 1180
   ============================================================ */

@media screen
and (min-width: 769px)
and (max-width: 1180px) {

    /*
     * Niet kunstmatig 1180px breed uitrekken.
     * Max 980px geeft op tablet een mooiere verhouding.
     */

    body.pb-template-front-page
    .pb-mobile-home-hero-image,

    .vokk-services-page
    .pb-mobile-hero-after,

    .vokk-projects-page
    .pb-mobile-hero-after,

    .vokk-about-page
    .pb-mobile-hero-after,

    .vokk-contact-page
    .pb-mobile-hero-after {

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

        margin-left: auto !important;
        margin-right: auto !important;

        height: auto !important;

        object-fit: contain !important;
    }
}


/* ============================================================
   MOBIEL
   <= 768
   ============================================================ */

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

    body.pb-template-front-page
    .pb-mobile-home-hero-image,

    .vokk-services-page
    .pb-mobile-hero-after,

    .vokk-projects-page
    .pb-mobile-hero-after,

    .vokk-about-page
    .pb-mobile-hero-after,

    .vokk-contact-page
    .pb-mobile-hero-after {

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        object-fit: contain !important;
        object-position: center center !important;
    }
}


/* ============================================================
   ZEER KLEIN MOBIEL
   <= 380

   Expliciet oude vaste 245/250/285px regels overrulen.
   ============================================================ */

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

    body.pb-template-front-page
    .pb-mobile-home-hero-image,

    .vokk-services-page
    .pb-mobile-hero-after,

    .vokk-projects-page
    .pb-mobile-hero-after,

    .vokk-about-page
    .pb-mobile-hero-after,

    .vokk-contact-page
    .pb-mobile-hero-after {

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: auto !important;

        object-fit: contain !important;
    }
}


/* PB MAIN PAGES RESPONSIVE IMAGE HARDLOCK V1 END */

/* =========================================================
   PB RESPONSIVE SERVICE CARD IMAGE FIX
   Homepage only
   Desktop >= 1025px blijft VOLLEDIG onaangeraakt.
   Footer onaangeraakt.
   Typografie onaangeraakt.
========================================================= */

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

    /*
     * Kaarten krijgen op tablet een verhouding die beter
     * aansluit op normale website/contentfotografie.
     *
     * Geen harde 270px hoogte meer waardoor verschillende
     * bronverhoudingen extreem verschillend croppen.
     */
    body.pb-template-front-page
    .pb-vokk-services
    .pb-vokk-service-card {
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
    }


    /*
     * Afbeelding blijft kaartvullend, maar krijgt een
     * consistente uitgangspositie.
     */
    body.pb-template-front-page
    .pb-vokk-services
    .pb-vokk-service-card
    > img.pb-service-bg {
        position: absolute !important;
        inset: 0 !important;

        display: block !important;

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

        object-fit: cover !important;
        object-position: 50% 50% !important;

        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }
}


/* =========================================================
   TELEFOON
   Bredere kaart = minder verticale crop van normale fotos.
========================================================= */

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

    body.pb-template-front-page
    .pb-vokk-services
    .pb-vokk-service-card {
        min-height: 0 !important;
        height: auto !important;

        /*
         * 16:10 geeft op telefoon duidelijk meer foto-oppervlak
         * en voorkomt de huidige ingezoomde kaart-look.
         */
        aspect-ratio: 16 / 10 !important;
    }


    body.pb-template-front-page
    .pb-vokk-services
    .pb-vokk-service-card
    > img.pb-service-bg {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;
    }
}


/* =========================================================
   ZEER SMALLE TELEFOONS
========================================================= */

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

    body.pb-template-front-page
    .pb-vokk-services
    .pb-vokk-service-card {
        aspect-ratio: 3 / 2 !important;
    }
}

/* PB RESPONSIVE SERVICE CARD IMAGE FIX END */


/* =========================================================
   PB DIENSTEN RESPONSIVE IMAGE FIX
   Alleen Diensten <= 1024px
   Desktop blijft onaangeraakt
========================================================= */

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

    /*
     * Iedere dienstenrij krijgt een voorspelbare,
     * normale beeldverhouding.
     */
    .vokk-services-page
    .vokk-service-image {
        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 4 / 3 !important;

        overflow: hidden !important;
    }


    /*
     * Als de foto via pseudo-element/background komt:
     * hele kaartvulling behouden, maar consistente crop.
     */
    .vokk-services-page
    .vokk-service-image::before,
    .vokk-services-page
    .vokk-service-image::after {
        background-size: cover !important;
        background-position: center center !important;
    }


    /*
     * Als er een echte IMG in staat:
     * exact dezelfde logica.
     */
    .vokk-services-page
    .vokk-service-image img {
        position: absolute !important;
        inset: 0 !important;

        display: block !important;

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

        max-width: none !important;

        object-fit: cover !important;
        object-position: center center !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }
}


/* =========================================================
   MOBIEL
========================================================= */

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

    .vokk-services-page
    .vokk-service-image {
        /*
         * Wat breder beeld op telefoon:
         * minder agressieve crop.
         */
        aspect-ratio: 16 / 10 !important;
    }


    .vokk-services-page
    .vokk-service-image img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;
    }
}


/* =========================================================
   ZEER SMALLE MOBIEL
========================================================= */

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

    .vokk-services-page
    .vokk-service-image {
        aspect-ratio: 3 / 2 !important;
    }
}

/* PB DIENSTEN RESPONSIVE IMAGE FIX END */


/* =========================================================
   PB PROJECTEN RESPONSIVE FEATURED IMAGE FIX
   Alleen Projecten <= 1024px
   Desktop / footer / typografie onaangeraakt
========================================================= */

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

    /*
     * Featured blok niet meer als kleine desktop behandelen.
     */
    .vokk-projects-page
    .vokk-project-featured-grid {
        grid-template-columns: 1fr !important;
    }


    /*
     * Achtergrondfoto krijgt een normale responsive verhouding.
     * Geen vaste hoge crop.
     */
    .vokk-projects-page
    .vokk-project-featured-image {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 4 / 3 !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}


/* =========================================================
   MOBIEL
========================================================= */

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

    .vokk-projects-page
    .vokk-project-featured-image {
        /*
         * Op telefoon iets breder beeld zodat de bronfoto
         * minder agressief links/rechts wordt afgesneden.
         */
        aspect-ratio: 16 / 10 !important;

        background-size: cover !important;
        background-position: center center !important;
    }
}


/* =========================================================
   ZEER SMAL
========================================================= */

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

    .vokk-projects-page
    .vokk-project-featured-image {
        aspect-ratio: 3 / 2 !important;
    }
}

/* PB PROJECTEN RESPONSIVE FEATURED IMAGE FIX END */


/* =========================================================
   PB WAARDERING RESPONSIVE HERO FOCUS FIX
   Alleen Waardering <= 1024px
   Desktop / footer / typografie onaangeraakt
========================================================= */

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

    body.pb-template-page-waardering
    .pb-mobile-hero-after,

    body.pb-template-page-reviews
    .pb-mobile-hero-after,

    body.pb-template-page-rating
    .pb-mobile-hero-after {

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

        object-fit: cover !important;

        /*
         * Onderwerp zit in deze foto rechts.
         * Daarom focus naar rechts zodat persoon niet wordt afgesneden.
         */
        object-position: 68% center !important;
    }
}


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

    body.pb-template-page-waardering
    .pb-mobile-hero-after,

    body.pb-template-page-reviews
    .pb-mobile-hero-after,

    body.pb-template-page-rating
    .pb-mobile-hero-after {

        object-position: 72% center !important;
    }
}

/* PB WAARDERING RESPONSIVE HERO FOCUS FIX END */


/* =========================================================
   PB OVER ONS RESPONSIVE IMAGE FOCUS FIX
   Alleen Over ons <= 1024px
   Desktop / footer / typografie onaangeraakt
========================================================= */

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

    .vokk-about-page
    .pb-mobile-hero-after {
        width: 100% !important;
        height: auto !important;

        object-fit: cover !important;

        /*
         * Onderwerp zit rechts in deze foto.
         * Focus iets naar rechts verschuiven zodat
         * de persoon beter binnen beeld blijft.
         */
        object-position: 66% center !important;
    }
}

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

    .vokk-about-page
    .pb-mobile-hero-after {
        object-position: 70% center !important;
    }
}

/* PB OVER ONS RESPONSIVE IMAGE FOCUS FIX END */


/* =========================================================
   PB OVER ONS RESPONSIVE IMAGE HEIGHT + ZOOM FIX
   Alleen Over ons <= 1024px
   Desktop / footer / typografie onaangeraakt
========================================================= */

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

    .vokk-about-page
    .pb-mobile-hero-after {
        position: relative !important;

        width: 100% !important;

        /*
         * Meer verticale ruimte dan nu.
         */
        height: 360px !important;
        min-height: 360px !important;
        max-height: none !important;

        aspect-ratio: auto !important;

        object-fit: cover !important;
        object-position: 66% center !important;

        /*
         * Subtiel dichterbij.
         */
        transform: scale(1.06) !important;

        transform-origin: 66% center !important;
    }
}


/* MOBIEL */
@media screen and (max-width: 650px) {

    .vokk-about-page
    .pb-mobile-hero-after {
        height: 300px !important;
        min-height: 300px !important;

        object-position: 68% center !important;

        transform: scale(1.07) !important;
        transform-origin: 68% center !important;
    }
}


/* ZEER SMAL */
@media screen and (max-width: 380px) {

    .vokk-about-page
    .pb-mobile-hero-after {
        height: 280px !important;
        min-height: 280px !important;

        transform: scale(1.06) !important;
    }
}

/* PB OVER ONS RESPONSIVE IMAGE HEIGHT + ZOOM FIX END */


/* =========================================================
   PB OVER ONS RESPONSIVE IMAGE TALLER V2
   Alleen Over ons
   Desktop / footer / typografie onaangeraakt
========================================================= */

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

    .vokk-about-page
    .pb-mobile-hero-after {
        width: 100% !important;

        height: 420px !important;
        min-height: 420px !important;
        max-height: none !important;

        aspect-ratio: auto !important;

        object-fit: cover !important;
        object-position: 66% center !important;

        transform: scale(1.05) !important;
        transform-origin: 66% center !important;
    }
}


/* MOBIEL */
@media screen and (max-width: 650px) {

    .vokk-about-page
    .pb-mobile-hero-after {
        height: 380px !important;
        min-height: 380px !important;

        object-position: 68% center !important;

        transform: scale(1.06) !important;
        transform-origin: 68% center !important;
    }
}


/* ZEER SMAL */
@media screen and (max-width: 380px) {

    .vokk-about-page
    .pb-mobile-hero-after {
        height: 350px !important;
        min-height: 350px !important;

        object-position: 68% center !important;

        transform: scale(1.05) !important;
    }
}

/* PB OVER ONS RESPONSIVE IMAGE TALLER V2 END */


/* =========================================================
   PB CONTACT RESPONSIVE IMAGE TALLER V1
   Alleen Contact responsive
   Desktop / footer / typografie onaangeraakt
========================================================= */

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

    .vokk-contact-page
    .pb-mobile-hero-after {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        height: 420px !important;
        min-height: 420px !important;
        max-height: none !important;

        aspect-ratio: auto !important;

        object-fit: cover !important;

        /*
         * Gesprek/personen zitten rechts in de bron.
         */
        object-position: 66% center !important;

        transform: scale(1.04) !important;
        transform-origin: 66% center !important;

        margin: 0 !important;
        padding: 0 !important;
    }
}


/* TABLET STAAND */
@media screen
and (min-width: 651px)
and (max-width: 900px) {

    .vokk-contact-page
    .pb-mobile-hero-after {
        height: 400px !important;
        min-height: 400px !important;

        object-position: 65% center !important;
    }
}


/* MOBIEL */
@media screen and (max-width: 650px) {

    .vokk-contact-page
    .pb-mobile-hero-after {
        height: 360px !important;
        min-height: 360px !important;

        object-position: 67% center !important;

        transform: scale(1.05) !important;
        transform-origin: 67% center !important;
    }
}


/* ZEER SMAL */
@media screen and (max-width: 380px) {

    .vokk-contact-page
    .pb-mobile-hero-after {
        height: 335px !important;
        min-height: 335px !important;

        object-position: 68% center !important;
    }
}

/* PB CONTACT RESPONSIVE IMAGE TALLER V1 END */


/* =========================================================
   PB CONTACT + OVER ONS RESPONSIVE IMAGE BALANCE V1

   Corrigeert eerdere te hoge / te sterke zoom.
   Alleen responsive.
   Desktop / footer / typografie onaangeraakt.
========================================================= */


/* TABLET LIGGEND / GROOT TABLET */
@media screen
and (min-width: 901px)
and (max-width: 1180px) {

    .vokk-contact-page
    .pb-mobile-hero-after,

    .vokk-about-page
    .pb-mobile-hero-after {

        width: 100% !important;

        height: 300px !important;
        min-height: 300px !important;
        max-height: none !important;

        aspect-ratio: auto !important;

        object-fit: cover !important;
        object-position: 60% center !important;

        transform: none !important;
    }
}


/* TABLET STAAND */
@media screen
and (min-width: 651px)
and (max-width: 900px) {

    .vokk-contact-page
    .pb-mobile-hero-after,

    .vokk-about-page
    .pb-mobile-hero-after {

        height: 270px !important;
        min-height: 270px !important;

        object-fit: cover !important;
        object-position: 60% center !important;

        transform: none !important;
    }
}


/* MOBIEL */
@media screen and (max-width: 650px) {

    .vokk-contact-page
    .pb-mobile-hero-after,

    .vokk-about-page
    .pb-mobile-hero-after {

        width: 100% !important;

        height: 235px !important;
        min-height: 235px !important;
        max-height: none !important;

        aspect-ratio: auto !important;

        object-fit: cover !important;

        /*
         * Iets naar rechts gericht,
         * maar veel minder agressief dan eerder.
         */
        object-position: 60% center !important;

        transform: none !important;
        transform-origin: center center !important;

        margin: 0 !important;
        padding: 0 !important;
    }
}


/* ZEER SMAL MOBIEL */
@media screen and (max-width: 380px) {

    .vokk-contact-page
    .pb-mobile-hero-after,

    .vokk-about-page
    .pb-mobile-hero-after {

        height: 220px !important;
        min-height: 220px !important;

        object-position: 60% center !important;

        transform: none !important;
    }
}

/* PB CONTACT + OVER ONS RESPONSIVE IMAGE BALANCE V1 END */


/* =========================================================
   PB CONTACT RESPONSIVE LESS ZOOM V1
   Alleen Contact.
   Over ons blijft exact zoals hij nu is.
   Desktop / footer / typografie onaangeraakt.
========================================================= */

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

    .vokk-contact-page
    .pb-mobile-hero-after {
        object-fit: cover !important;
        object-position: 52% center !important;

        transform: none !important;
        transform-origin: center center !important;
    }
}

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

    .vokk-contact-page
    .pb-mobile-hero-after {
        height: 225px !important;
        min-height: 225px !important;

        object-fit: cover !important;
        object-position: 50% center !important;

        transform: none !important;
    }
}

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

    .vokk-contact-page
    .pb-mobile-hero-after {
        height: 215px !important;
        min-height: 215px !important;

        object-position: 50% center !important;
    }
}

/* PB CONTACT RESPONSIVE LESS ZOOM V1 END */


/* =========================================================
   PB CONTACT RESPONSIVE TINY ZOOM V2
   Alleen Contact.
   Over ons / desktop / footer / typografie onaangeraakt.
========================================================= */

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

    .vokk-contact-page
    .pb-mobile-hero-after {
        object-position: 52% center !important;

        transform: scale(1.025) !important;
        transform-origin: 52% center !important;
    }
}

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

    .vokk-contact-page
    .pb-mobile-hero-after {
        transform: scale(1.03) !important;
        transform-origin: 52% center !important;
    }
}

/* PB CONTACT RESPONSIVE TINY ZOOM V2 END */


/* =========================================================
   PB CONTACT RESPONSIVE FOCUS LEFT V1
   Alleen Contact.
   Doel: beide personen zichtbaar houden.
========================================================= */

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

    .vokk-contact-page
    .pb-mobile-hero-after {
        object-position: 60% center !important;
        transform-origin: 60% center !important;
    }
}

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

    .vokk-contact-page
    .pb-mobile-hero-after {
        object-position: 62% center !important;
        transform-origin: 62% center !important;
    }
}

/* PB CONTACT RESPONSIVE FOCUS LEFT V1 END */


/* =========================================================
   PB CONTACT RESPONSIVE SHIFT LEFT ~120PX
   Alleen Contact.
   Over ons / desktop / footer / typografie onaangeraakt.
========================================================= */

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

    .vokk-contact-page
    .pb-mobile-hero-after {
        object-position: 90% center !important;
        transform-origin: 90% center !important;
    }
}

@media screen and (min-width: 651px) and (max-width: 1180px) {

    .vokk-contact-page
    .pb-mobile-hero-after {
        object-position: 76% center !important;
        transform-origin: 76% center !important;
    }
}

/* PB CONTACT RESPONSIVE SHIFT LEFT ~120PX END */


/* =========================================================
   PB WAARDERING RESPONSIVE SHIFT ~70PX LEFT + UP
   Alleen Waardering.
   Desktop / footer / typografie onaangeraakt.
========================================================= */

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

    body.pb-template-page-waardering
    .pb-mobile-hero-after,

    body.pb-template-page-reviews
    .pb-mobile-hero-after,

    body.pb-template-page-rating
    .pb-mobile-hero-after {

        /*
         * Beeld visueel naar links:
         * focuspunt verder naar rechts.
         */
        object-position: 75% 35% !important;

        /*
         * Bestaande subtiele zoom behouden,
         * geen extra layout-wijziging.
         */
        transform-origin: 75% 35% !important;
    }
}


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

    body.pb-template-page-waardering
    .pb-mobile-hero-after,

    body.pb-template-page-reviews
    .pb-mobile-hero-after,

    body.pb-template-page-rating
    .pb-mobile-hero-after {

        object-position: 78% 30% !important;
        transform-origin: 78% 30% !important;
    }
}

/* PB WAARDERING RESPONSIVE SHIFT ~70PX LEFT + UP END */


/* =========================================================
   PB WAARDERING RESPONSIVE FINE SHIFT V2
   Alleen Waardering.
   Iets verder naar links + circa 50px omhoog.
   Desktop / footer / typografie onaangeraakt.
========================================================= */

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

    body.pb-template-page-waardering
    .pb-mobile-hero-after,

    body.pb-template-page-reviews
    .pb-mobile-hero-after,

    body.pb-template-page-rating
    .pb-mobile-hero-after {

        object-position: 82% 40% !important;
        transform-origin: 82% 40% !important;
    }
}


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

    body.pb-template-page-waardering
    .pb-mobile-hero-after,

    body.pb-template-page-reviews
    .pb-mobile-hero-after,

    body.pb-template-page-rating
    .pb-mobile-hero-after {

        object-position: 84% 38% !important;
        transform-origin: 84% 38% !important;
    }
}

/* PB WAARDERING RESPONSIVE FINE SHIFT V2 END */


/* =========================================================
   PB WAARDERING RESPONSIVE UP 60PX V3
   Alleen Waardering.
   Horizontale positie behouden.
========================================================= */

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

    body.pb-template-page-waardering
    .pb-mobile-hero-after,

    body.pb-template-page-reviews
    .pb-mobile-hero-after,

    body.pb-template-page-rating
    .pb-mobile-hero-after {

        object-position:
            82%
            calc(40% - 60px)
            !important;

        transform-origin:
            82%
            calc(40% - 60px)
            !important;
    }
}


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

    body.pb-template-page-waardering
    .pb-mobile-hero-after,

    body.pb-template-page-reviews
    .pb-mobile-hero-after,

    body.pb-template-page-rating
    .pb-mobile-hero-after {

        object-position:
            84%
            calc(38% - 60px)
            !important;

        transform-origin:
            84%
            calc(38% - 60px)
            !important;
    }
}

/* PB WAARDERING RESPONSIVE UP 60PX V3 END */


/* =========================================================
   PB WAARDERING RESTORE CONTAINER + IMAGE SHIFT UP V4
   Herstelt containerhoogte.
   Alleen de FOTO schuift 60px omhoog.
   Desktop / footer / typografie onaangeraakt.
========================================================= */

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

    body.pb-template-page-waardering
    .pb-mobile-hero-after,

    body.pb-template-page-reviews
    .pb-mobile-hero-after,

    body.pb-template-page-rating
    .pb-mobile-hero-after {

        /* container / beeldhoogte herstellen */
        height: 235px !important;
        min-height: 235px !important;
        max-height: none !important;

        aspect-ratio: auto !important;

        /* vorige horizontale focus herstellen */
        object-fit: cover !important;
        object-position: 82% 40% !important;

        /* alleen foto visueel omhoog */
        transform: translateY(-60px) !important;
        transform-origin: center center !important;
    }
}


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

    body.pb-template-page-waardering
    .pb-mobile-hero-after,

    body.pb-template-page-reviews
    .pb-mobile-hero-after,

    body.pb-template-page-rating
    .pb-mobile-hero-after {

        height: 235px !important;
        min-height: 235px !important;

        object-position: 84% 38% !important;

        transform: translateY(-60px) !important;
    }
}

/* PB WAARDERING RESTORE CONTAINER + IMAGE SHIFT UP V4 END */


/* =========================================================
   PB WAARDERING IMAGE INSIDE CONTAINER UP V5

   Containerhoogte blijft EXACT staan.
   Alleen de foto-inhoud verschuift binnen de container.
========================================================= */

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

    body.pb-template-page-waardering
    .pb-mobile-hero-after,

    body.pb-template-page-reviews
    .pb-mobile-hero-after,

    body.pb-template-page-rating
    .pb-mobile-hero-after {

        /* CONTAINER BLIJFT STAAN */
        height: 235px !important;
        min-height: 235px !important;
        max-height: 235px !important;

        aspect-ratio: auto !important;

        /* foto vult dezelfde container */
        object-fit: cover !important;

        /*
         * Horizontale positie behouden.
         *
         * Hogere Y-waarde = bronbeeld schuift binnen
         * de vaste container omhoog, waardoor meer
         * van de onderzijde zichtbaar wordt.
         */
        object-position: 82% 72% !important;

        /* hele IMG zelf absoluut NIET meer verplaatsen */
        transform: none !important;
        translate: none !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}


/* MOBIEL */
@media screen and (max-width: 650px) {

    body.pb-template-page-waardering
    .pb-mobile-hero-after,

    body.pb-template-page-reviews
    .pb-mobile-hero-after,

    body.pb-template-page-rating
    .pb-mobile-hero-after {

        height: 235px !important;
        min-height: 235px !important;
        max-height: 235px !important;

        /* links/rechts zoals hij goed stond */
        object-position: 84% 74% !important;

        transform: none !important;
        translate: none !important;
    }
}

/* PB WAARDERING IMAGE INSIDE CONTAINER UP V5 END */


/* =========================================================
   PB HOME CTA NO PILL
   Alleen homepage hoofd-CTA.
========================================================= */

body.pb-template-front-page
.nuke-main-button,

body.pb-template-front-page
.pb-hero-cta,

body.pb-template-front-page
.pb-hero-button {
    border-radius: 10px !important;
}


/* mobiel/tablet iets compacter */
@media screen and (max-width: 1180px) {

    body.pb-template-front-page
    .nuke-main-button,

    body.pb-template-front-page
    .pb-hero-cta,

    body.pb-template-front-page
    .pb-hero-button {
        border-radius: 9px !important;
    }
}

/* PB HOME CTA NO PILL END */



/* ============================================================
   PB TABLET FINAL V1
   651 - 1180 px

   DOEL:
   - iPad portrait goed
   - iPad landscape goed
   - Home hero = responsive structuur
   - fotos correct schalen
   - GEEN wijzigingen aan 4 detailpaginas
   - footer alleen portrait gestapeld

   Desktop >=1181 blijft onaangeraakt.
   Mobiel <=650 blijft onaangeraakt.
   ============================================================ */


/* ============================================================
   1. HOME HERO
   TABLET STAAND + LIGGEND
   ============================================================ */

@media screen
and (min-width: 651px)
and (max-width: 1180px) {

    /*
     * Op tablet GEEN desktop split/panorama hero.
     * Zelfde principe als mobiel:
     * tekstblok -> gewone responsive foto.
     */

    body.pb-template-front-page
    .kb-block.nuke-v10-master {
        position: relative !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }


    body.pb-template-front-page
    .pb-hero-bg-container,
    body.pb-template-front-page
    .pb-hero-bg-overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }


    body.pb-template-front-page
    .kb-inner.pb-hero-inner {
        display: block !important;

        width: min(
            calc(100% - 64px),
            980px
        ) !important;

        max-width: 980px !important;

        min-height: 0 !important;
        height: auto !important;

        margin:
            0
            auto !important;

        padding:
            116px
            0
            58px !important;

        transform: none !important;
    }


    body.pb-template-front-page
    .pb-hero-content {
        width: 100% !important;
        max-width: 720px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }


    /*
     * Rechter desktop visual / zwevende kaarten uit.
     */
    body.pb-template-front-page
    .pb-hero-visual,
    body.pb-template-front-page
    .pb-hero-tiles-stack {
        display: none !important;
        visibility: hidden !important;
    }


    /*
     * De reguliere homepagefoto wordt nu het tabletbeeld.
     * Natuurlijke verhouding behouden.
     */
    body.pb-template-front-page
    .pb-mobile-home-hero-image {
        position: relative !important;

        display: block !important;

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

        max-width: 980px !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: auto !important;

        margin:
            0
            auto !important;

        padding: 0 !important;

        object-fit: contain !important;
        object-position: center center !important;

        transform: none !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    /*
     * Homepage CTA expliciet geen pill.
     */
    body.pb-template-front-page
    .nuke-main-button,
    body.pb-template-front-page
    .pb-hero-cta,
    body.pb-template-front-page
    .pb-hero-button {
        width: auto !important;
        max-width: 100% !important;

        border-radius: 9px !important;
    }
}


/* ============================================================
   2. HOME DIENSTKAARTEN
   Bronfotos zijn ongeveer 1400x950.
   3:2 ligt daar veel dichter bij dan vaste 270px kaarten.
   ============================================================ */

@media screen
and (min-width: 651px)
and (max-width: 1180px) {

    body.pb-template-front-page
    .pb-vokk-service-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap: 18px !important;
    }


    body.pb-template-front-page
    .pb-vokk-service-card {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 3 / 2 !important;

        overflow: hidden !important;
    }


    body.pb-template-front-page
    .pb-vokk-service-card
    > img.pb-service-bg {
        position: absolute !important;
        inset: 0 !important;

        display: block !important;

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

        min-height: 0 !important;
        max-height: none !important;

        object-fit: cover !important;
        object-position: center center !important;

        transform: none !important;
    }
}


/* ============================================================
   4. DIENSTEN CONTENTFOTOS
   Alleen Diensten; detailpaginas uitgesloten.
   ============================================================ */

@media screen
and (min-width: 651px)
and (max-width: 1180px) {

    .vokk-services-page
    .vokk-service-row {
        grid-template-columns:
            minmax(0,1fr) !important;

        gap: 34px !important;
    }


    .vokk-services-page
    .vokk-service-image {
        position: relative !important;

        width: 100% !important;
        max-width: 900px !important;

        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 3 / 2 !important;

        margin:
            0
            auto !important;

        overflow: hidden !important;
    }


    .vokk-services-page
    .vokk-service-image img {
        position: absolute !important;
        inset: 0 !important;

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

        object-fit: cover !important;
        object-position: center center !important;

        transform: none !important;
    }


    .vokk-services-page
    .vokk-service-image::before {
        background-size: cover !important;
        background-position: center center !important;
    }
}


/* ============================================================
   5. PROJECTEN CONTENTFOTOS
   ============================================================ */

@media screen
and (min-width: 651px)
and (max-width: 1180px) {

    .vokk-projects-page
    .vokk-project-featured-grid {
        grid-template-columns:
            minmax(0,1fr) !important;
    }


    .vokk-projects-page
    .vokk-project-featured-image {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 3 / 2 !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }


    .vokk-projects-page
    .vokk-project-image {
        overflow: hidden !important;
    }


    .vokk-projects-page
    .pb-project-image-source {
        width: 100% !important;

        height: auto !important;
        max-height: none !important;

        object-fit: contain !important;
        object-position: center center !important;

        transform: none !important;
    }
}


/* ============================================================
   6. OVER ONS CONTENTFOTOS
   Alleen tablet.
   Mobiele fine-tuning blijft dus bestaan.
   ============================================================ */

@media screen
and (min-width: 651px)
and (max-width: 1180px) {

    .vokk-about-page
    :is(
        .vokk-about-story-grid,
        .vokk-about-experience-grid
    ) {
        grid-template-columns:
            minmax(0,1fr) !important;

        gap: 38px !important;
    }


    .vokk-about-page
    :is(
        .vokk-about-story-image,
        .vokk-about-experience-image
    ) {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 3 / 2 !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}


/* ============================================================
   7. TABLET LIGGEND
   901 - 1180

   Iets ruimer dan portrait maar nog steeds responsive,
   NIET terug naar desktophero.
   ============================================================ */

@media screen
and (min-width: 901px)
and (max-width: 1180px) {

    body.pb-template-front-page
    .kb-inner.pb-hero-inner {
        width:
            min(
                calc(100% - 80px),
                1040px
            ) !important;

        max-width: 1040px !important;

        padding-top: 120px !important;
        padding-bottom: 64px !important;
    }


    body.pb-template-front-page
    .pb-mobile-home-hero-image,

    .vokk-services-page
    > .pb-mobile-hero-after,

    .vokk-projects-page
    > .pb-mobile-hero-after,

    .vokk-about-page
    > .pb-mobile-hero-after,

    .vokk-contact-page
    > .pb-mobile-hero-after {

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

        max-width: 1040px !important;
    }
}


/* ============================================================
   8. IPAD STAAND FOOTER
   Alleen 651 - 900 px.

   Nu WEL bewust toegestaan:
   alle footer-kolommen onder elkaar.

   Landscape >900 behoudt huidige footer.
   Mobiel <=650 behoudt huidige footer.
   ============================================================ */

@media screen
and (min-width: 651px)
and (max-width: 900px) {

    /*
     * Actuele agency footer.
     */
    .kb-block-agencyfooter-block
    .agencyfooter-block-grid {
        display: grid !important;

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

        gap: 34px !important;
    }


    .kb-block-agencyfooter-block
    .agencyfooter-block-grid
    > div {
        width: 100% !important;
        max-width: none !important;

        grid-column: auto !important;
    }


    /*
     * Eventuele vokk-footer variant eveneens 1 kolom,
     * zonder kleuren/typografie te veranderen.
     */
    .vokk-footer
    .vokk-footer-main {
        display: grid !important;

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

        gap: 34px !important;
    }


    .vokk-footer
    .vokk-footer-contact-column {
        grid-column: auto !important;
    }
}


/* ============================================================
   HARD SAFETY

   Vier detailpaginas worden door geen enkele selector
   hierboven geraakt.
   ============================================================ */

/* PB TABLET FINAL V1 END */


/* ============================================================
   PB IPAD LANDSCAPE HEADER + HOME HERO V1

   Alleen:
   - tablet landscape 769-1180px
   - globale header
   - homepage hero

   Niet:
   - content
   - dienstenkaarten
   - detailpagina-content
   - footer
   - mobiel
   - desktop >=1181
   ============================================================ */

@media screen
and (min-width: 769px)
and (max-width: 1180px)
and (orientation: landscape) {


    /* ========================================================
       HEADER
       ======================================================== */

    .vokk-header {
        min-height: 72px !important;
        height: 72px !important;
    }


    .vokk-header-inner {
        width: 100% !important;
        max-width: none !important;

        height: 72px !important;

        padding-left: 28px !important;
        padding-right: 28px !important;

        display: flex !important;
        align-items: center !important;
    }


    /*
     * Geen gepropte desktopnavigatie op iPad landscape.
     */
    .vokk-nav,
    .vokk-action {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }


    .vokk-logo {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }


    .vokk-logo img {
        width: auto !important;
        height: 42px !important;

        max-width: 185px !important;

        object-fit: contain !important;
    }


    .vokk-hamburger {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: auto !important;

        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;
        min-height: 44px !important;

        max-width: 44px !important;
        max-height: 44px !important;

        flex: 0 0 44px !important;
    }


    /* ========================================================
       HOMEPAGE HERO
       brede hero blijft bestaan
       ======================================================== */

    body.pb-template-front-page
    .kb-block.nuke-v10-master {
        position: relative !important;

        width: 100% !important;

        height: auto !important;
        min-height: 500px !important;

        overflow: hidden !important;
    }


    /*
     * Hero-background blijft dus gewoon zichtbaar.
     */
    body.pb-template-front-page
    .pb-hero-bg-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: absolute !important;
        inset: 0 !important;

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


    body.pb-template-front-page
    .pb-hero-bg-container img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;

        /*
         * Iets meer ruimte aan rechterkant van beeld.
         */
        object-position: 58% center !important;
    }


    body.pb-template-front-page
    .pb-hero-bg-overlay {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }


    /*
     * Hero-inner compacter dan desktop.
     */
    body.pb-template-front-page
    .kb-inner.pb-hero-inner {
        position: relative !important;

        display: flex !important;
        align-items: center !important;

        width:
            min(
                calc(100% - 64px),
                1040px
            ) !important;

        max-width: 1040px !important;

        min-height: 500px !important;
        height: auto !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding:
            92px
            0
            46px !important;

        gap: 0 !important;
    }


    /*
     * Tekst krijgt bijna 60% van de breedte.
     */
    body.pb-template-front-page
    .pb-hero-content {
        position: relative !important;

        width: 58% !important;
        max-width: 590px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        z-index: 5 !important;
    }


    /*
     * De drie grote desktop-kaarten maken iPad landscape
     * te druk en nemen te veel beeldruimte in.
     */
    body.pb-template-front-page
    .pb-hero-visual,
    body.pb-template-front-page
    .pb-hero-tiles-stack {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;

        pointer-events: none !important;
    }


    /*
     * De losse mobiele foto hoort alleen bij de gestapelde
     * mobiele/tablet portrait variant.
     */
    body.pb-template-front-page
    .pb-mobile-home-hero-image {
        display: none !important;
        visibility: hidden !important;
    }


    /*
     * Hoofd-CTA blijft normale knop.
     */
    body.pb-template-front-page
    .nuke-main-button,
    body.pb-template-front-page
    .pb-hero-cta,
    body.pb-template-front-page
    .pb-hero-button {
        width: auto !important;
        max-width: 100% !important;

        border-radius: 9px !important;
    }
}

/* PB IPAD LANDSCAPE HEADER + HOME HERO V1 END */


/* ============================================================
   PB IPAD LANDSCAPE HOME BALANCE V2
   Alleen homepage + header
   900 - 1180px landscape
============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1180px)
and (orientation: landscape) {

    /* ========================================================
       HEADER COMPACTER
       ======================================================== */

    .vokk-header-inner {
        max-width: none !important;

        padding-left: 20px !important;
        padding-right: 20px !important;

        gap: 12px !important;
    }

    .vokk-logo img {
        height: 38px !important;
        max-width: 160px !important;
    }

    .vokk-nav {
        margin-left: 10px !important;
        gap: 14px !important;
    }

    .vokk-nav ul {
        gap: 14px !important;
    }

    .vokk-nav a {
        white-space: nowrap !important;
    }

    .vokk-action {
        margin-left: 12px !important;
    }

    .vokk-cta {
        padding-left: 14px !important;
        padding-right: 14px !important;

        white-space: nowrap !important;
    }


    /* ========================================================
       HOME HERO
       ======================================================== */

    body.pb-template-front-page
    .kb-block.nuke-v10-master {
        min-height: 470px !important;
        height: auto !important;
    }

    body.pb-template-front-page
    .kb-inner.pb-hero-inner {
        width: min(
            calc(100% - 40px),
            1140px
        ) !important;

        max-width: 1140px !important;

        min-height: 470px !important;

        padding-top: 86px !important;
        padding-bottom: 42px !important;

        gap: 22px !important;
    }


    /* linker tekstkolom iets smaller */
    body.pb-template-front-page
    .pb-hero-content {
        width: 49% !important;
        max-width: 520px !important;
    }


    /* rechter kaarten compacter */
    body.pb-template-front-page
    .pb-hero-visual {
        display: block !important;

        width: 37% !important;
        max-width: 330px !important;

        margin-left: auto !important;
    }

    body.pb-template-front-page
    .pb-hero-tiles-stack {
        display: flex !important;

        width: 100% !important;

        gap: 10px !important;
    }


    /* kaarten minder breed en minder dominant */
    body.pb-template-front-page
    .pb-hero-tiles-stack > * {
        width: 100% !important;
        max-width: 310px !important;
    }


    /* achtergrondfoto iets meer naar rechts */
    body.pb-template-front-page
    .pb-hero-bg-container img {
        object-position: 60% center !important;
    }


    /* mobiele hero-foto absoluut uit */
    body.pb-template-front-page
    .pb-mobile-home-hero-image {
        display: none !important;
    }


    /* knop normaal houden */
    body.pb-template-front-page
    .nuke-main-button,
    body.pb-template-front-page
    .pb-hero-cta,
    body.pb-template-front-page
    .pb-hero-button {
        border-radius: 9px !important;
    }
}

/* PB IPAD LANDSCAPE HOME BALANCE V2 END */


/* ============================================================
   PB IPAD LANDSCAPE EDGE FIX V3
   Alleen homepage/header 900-1180 landscape
============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1180px)
and (orientation: landscape) {

    /* ========================================================
       HEADER: alles binnen beeld houden
       ======================================================== */

    .vokk-header-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;

        gap: 8px !important;
    }

    .vokk-logo img {
        height: 36px !important;
        max-width: 150px !important;
    }

    .vokk-nav {
        margin-left: 6px !important;
        gap: 10px !important;
    }

    .vokk-nav ul {
        gap: 10px !important;
    }

    .vokk-action {
        margin-left: 8px !important;
        flex: 0 0 auto !important;
    }

    .vokk-cta {
        padding-left: 12px !important;
        padding-right: 12px !important;

        min-width: 0 !important;
        max-width: 170px !important;

        white-space: nowrap !important;
    }


    /* ========================================================
       HERO RECHTERKAARTEN: MEER VAN RAND AF
       ======================================================== */

    body.pb-template-front-page
    .pb-hero-visual {
        width: 34% !important;
        max-width: 300px !important;

        margin-left: auto !important;
        margin-right: 24px !important;
    }

    body.pb-template-front-page
    .pb-hero-tiles-stack {
        width: 100% !important;
        max-width: 300px !important;

        margin-right: 0 !important;

        gap: 12px !important;
    }

    body.pb-template-front-page
    .pb-hero-tiles-stack > * {
        width: 100% !important;
        max-width: 290px !important;
    }


    /* linker tekst iets minder breed zodat rechts lucht ontstaat */
    body.pb-template-front-page
    .pb-hero-content {
        width: 47% !important;
        max-width: 500px !important;
    }
}

/* PB IPAD LANDSCAPE EDGE FIX V3 END */


/* ============================================================
   PB IPAD LANDSCAPE HIDE EXTRAS V4

   Alleen 900-1180px landscape:
   - header CTA weg
   - 3 hero kaarten weg
   - hero tekst meer ruimte
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1180px)
and (orientation: landscape) {

    /* HEADER CTA VERBERGEN */
    .vokk-action,
    .vokk-cta {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* MEER RUIMTE VOOR NAV */
    .vokk-header-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .vokk-nav {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    /* HERO KAARTEN RECHTS WEG */
    body.pb-template-front-page
    .pb-hero-visual,

    body.pb-template-front-page
    .pb-hero-tiles-stack {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* HERO TEKST KRIJGT MEER BREEDTE */
    body.pb-template-front-page
    .pb-hero-content {
        width: 58% !important;
        max-width: 620px !important;
    }

    /* HERO INNER BLIJFT NETJES GECENTREERD */
    body.pb-template-front-page
    .kb-inner.pb-hero-inner {
        width: min(
            calc(100% - 48px),
            1120px
        ) !important;

        max-width: 1120px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* PB IPAD LANDSCAPE HIDE EXTRAS V4 END */


/* ============================================================
   PB IPAD LANDSCAPE 1210/1366 FINAL FIX

   Alleen tablet landscape 900-1366px.
   Desktop >1366 onaangeraakt.
============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1366px)
and (orientation: landscape) {

    /* HEADER CTA WEG */
    .vokk-header .vokk-action,
    .vokk-header .vokk-cta {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }


    /* NAV krijgt ruimte */
    .vokk-header-inner {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .vokk-nav {
        margin-left: auto !important;
        margin-right: 0 !important;
    }


    /* ========================================================
       HOME HERO RECHTER KAARTEN WEG
       ======================================================== */

    body.pb-template-front-page
    .pb-hero-visual,

    body.pb-template-front-page
    .pb-hero-tiles-stack,

    body.pb-template-front-page
    .pb-hero-tile,

    body.pb-template-front-page
    .pb-hero-card {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }


    /* Tekst krijgt dan ruimte */
    body.pb-template-front-page
    .pb-hero-content {
        width: 58% !important;
        max-width: 650px !important;
    }


    /* Hero zelf blijft breed */
    body.pb-template-front-page
    .kb-inner.pb-hero-inner {
        width: min(
            calc(100% - 56px),
            1180px
        ) !important;

        max-width: 1180px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* PB IPAD LANDSCAPE 1210/1366 FINAL FIX END */


/* ============================================================
   PB DETAILPAGINA 1 IPAD LANDSCAPE LESS ZOOM V1

   Alleen:
   - Detailpagina 1 / warmtepompen
   - iPad landscape 900-1366px

   Niet:
   - mobiel
   - desktop >1366
   - andere detailpaginas
   - footer
   - typografie
============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1366px)
and (orientation: landscape) {

    /*
     * Als de desktop hero-afbeelding nog actief is:
     * minder agressief croppen.
     */
    body.pb-template-page-warmtepompen
    .pb-content-hero-image,

    .vokk-detail-page.vokk-detail-heat
    .pb-content-hero-image {

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

        object-fit: cover !important;

        /*
         * Minder ingezoomde uitstraling:
         * focus neutraler houden.
         */
        object-position: 58% center !important;

        transform: scale(.94) !important;
        transform-origin: 58% center !important;
    }


    /*
     * Als iPad landscape de losse responsive afbeelding gebruikt:
     * geen extra zoom/crop.
     */
    body.pb-template-page-warmtepompen
    .pb-mobile-hero-after,

    .vokk-detail-page.vokk-detail-heat
    .pb-mobile-hero-after {

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        object-fit: contain !important;
        object-position: center center !important;

        transform: none !important;
    }
}

/* PB DETAILPAGINA 1 IPAD LANDSCAPE LESS ZOOM V1 END */


/* ============================================================
   PB DETAIL 1 IPAD LANDSCAPE PHOTO ZOOM OUT
   ALLEEN foto.
   Hero/containerhoogte blijft onaangeraakt.
============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1366px)
and (orientation: landscape) {

    body.page-template-page-warmtepompen-php
    .pb-content-hero
    > .pb-content-hero-image,

    body.page-template-page-warmtepompen
    .pb-content-hero
    > .pb-content-hero-image,

    body.pb-template-page-warmtepompen
    .pb-content-hero
    > .pb-content-hero-image {

        /* CONTAINER NIET WIJZIGEN */

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

        /*
         * Echte zoom-out:
         * volledige bron veel beter zichtbaar.
         */
        object-fit: contain !important;
        object-position: 68% center !important;

        transform: none !important;
        scale: none !important;
        translate: none !important;

        /*
         * Ruimte die door contain ontstaat loopt
         * rustig over in de donkere hero.
         */
        background: #1d1f21 !important;
    }
}

/* PB DETAIL 1 IPAD LANDSCAPE PHOTO ZOOM OUT END */


/* ============================================================
   DETAILPAGINA 1 HERO - EXTRA VERTICALE BEELDRUIMTE

   Alleen warmtepompen/detailpagina 1.
   Containerhoogte blijft volledig onaangeraakt.
   ============================================================ */

body.pb-template-page-warmtepompen
.pb-content-hero
> .pb-content-hero-image {

    /*
     * Foto zelf groter dan het beeldvenster.
     * Hierdoor ontstaat boven/onder ruimte om te pannen.
     */
    height: 120% !important;

    /*
     * Grotere afbeelding initieel gecentreerd.
     */
    top: -10% !important;
    bottom: auto !important;

    object-fit: cover !important;

    max-height: none !important;
}

/* DETAILPAGINA 1 HERO - EXTRA VERTICALE BEELDRUIMTE END */


/* ============================================================
   PB TABLET PORTRAIT SITEWIDE V1
   Alleen tablet staand 601-900px

   - logo groter
   - tekstdeel contenthero compacter
   - afbeelding/layout/footer onaangeraakt
   ============================================================ */

@media screen
and (min-width: 601px)
and (max-width: 900px)
and (orientation: portrait) {

    /* HEADER LOGO GROTER */
    .vokk-logo img,
    .custom-logo-link img {
        width: auto !important;
        height: 48px !important;
        max-width: 210px !important;
    }

    /* HEADER ZELF IETS RUIMER VOOR GROTER LOGO */
    .vokk-header-inner {
        min-height: 76px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }


    /* ========================================================
       CONTENT HERO TEKSTGEBIED COMPACTER
       ======================================================== */

    .pb-content-hero {
        min-height: 540px !important;
    }

    .pb-content-hero .vokk-services-container,
    .pb-content-hero .vokk-about-container,
    .pb-content-hero .vokk-projects-container,
    .pb-content-hero .vokk-reviews-container,
    .pb-content-hero .vokk-contact-container,
    .pb-content-hero .vokk-detail-container {
        min-height: auto !important;
        padding-top: 78px !important;
        padding-bottom: 42px !important;
    }

    .pb-content-hero .vokk-services-hero-inner,
    .pb-content-hero .vokk-about-hero-content,
    .pb-content-hero .vokk-projects-hero-content,
    .pb-content-hero .vokk-reviews-hero-content,
    .pb-content-hero .vokk-contact-hero-content,
    .pb-content-hero .vokk-detail-hero-content {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

}

/* PB TABLET PORTRAIT SITEWIDE V1 END */

/* ============================================================
   PB LAPTOP / SMALL DESKTOP BALANCE V1
   Alleen 1367 - 1500px

   - header past volledig
   - CTA blijft zichtbaar
   - hero kaarten compacter
   - grote desktop onaangeraakt
   - tablet/mobiel onaangeraakt
   - footer onaangeraakt
   ============================================================ */

@media screen
and (min-width: 1367px)
and (max-width: 1500px) {


    /* ========================================================
       HEADER
       ======================================================== */

    .vokk-header-inner {
        width: calc(100% - 48px) !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        gap: 10px !important;
    }


    /*
     * Logo blijft duidelijk aanwezig,
     * maar neemt niet meer onnodig veel headerbreedte in.
     */
    .vokk-logo {
        flex: 0 0 auto !important;
        margin-right: 12px !important;
    }

    .vokk-logo img,
    .custom-logo-link img {
        width: auto !important;
        height: 46px !important;
        max-width: 205px !important;
    }


    /*
     * Navigatie compacter zonder tekstgrootte te wijzigen.
     */
    .vokk-nav {
        flex: 1 1 auto !important;

        margin-left: auto !important;

        min-width: 0 !important;
    }

    .vokk-nav ul {
        gap: 16px !important;
    }

    .vokk-nav a {
        white-space: nowrap !important;
    }


    /*
     * CTA blijft volledig binnen viewport.
     */
    .vokk-action {
        flex: 0 0 auto !important;

        margin-left: 14px !important;
        margin-right: 0 !important;
    }

    .vokk-cta,
    .vokk-action a {
        min-width: 0 !important;
        width: auto !important;
        max-width: 180px !important;

        padding-left: 17px !important;
        padding-right: 17px !important;

        white-space: nowrap !important;
    }



    /* ========================================================
       HOME HERO
       ======================================================== */

    body.pb-template-front-page
    .kb-inner.pb-hero-inner {
        width: calc(100% - 44px) !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /*
     * Tekst houdt voldoende ruimte.
     */
    body.pb-template-front-page
    .pb-hero-content {
        width: 48% !important;
        max-width: 585px !important;
    }


    /*
     * Rechterkolom minder dominant.
     */
    body.pb-template-front-page
    .pb-hero-visual {
        width: 29% !important;
        max-width: 300px !important;

        margin-left: auto !important;
        margin-right: 24px !important;
    }


    body.pb-template-front-page
    .pb-hero-tiles-stack {
        width: 100% !important;
        max-width: 300px !important;

        gap: 14px !important;
    }


    body.pb-template-front-page
    .pb-hero-tiles-stack > * {
        width: 100% !important;
        max-width: 300px !important;
    }

}

/* PB LAPTOP / SMALL DESKTOP BALANCE V1 END */

/* ============================================================
   PB LAPTOP HERO CARDS RETURN
   Alleen 1367 - 1500px
   ============================================================ */

@media screen
and (min-width: 1367px)
and (max-width: 1500px) {

    /* 3 kaarten expliciet zichtbaar houden */
    body.pb-template-front-page
    .pb-hero-visual,
    body.pb-template-front-page
    .pb-hero-tiles-stack,
    body.pb-template-front-page
    .pb-hero-tiles-stack > * {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.pb-template-front-page
    .pb-hero-visual {
        display: block !important;

        width: 27% !important;
        max-width: 285px !important;

        margin-left: auto !important;
        margin-right: 18px !important;
    }

    body.pb-template-front-page
    .pb-hero-tiles-stack {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 285px !important;

        gap: 12px !important;
    }

    body.pb-template-front-page
    .pb-hero-tiles-stack > * {
        display: block !important;

        width: 100% !important;
        max-width: 285px !important;
    }

    /* tekst links iets compacter zodat kaarten ruimte houden */
    body.pb-template-front-page
    .pb-hero-content {
        width: 46% !important;
        max-width: 560px !important;
    }

}

/* PB LAPTOP HERO CARDS RETURN END */

/* ============================================================
   PB TABLET LANDSCAPE HERO CARDS FINAL
   900 - 1366px landscape

   - 3 hero cards TERUG
   - kaarten schalen mee
   - header CTA blijft op tablet verborgen
   - mobiel portrait / tablet portrait onaangeraakt
   - desktop >1366 onaangeraakt
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1366px)
and (orientation: landscape) {

    /* --------------------------------------------------------
       RECHTER HERO VISUAL TERUG
       -------------------------------------------------------- */

    body.pb-template-front-page
    .pb-hero-visual {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        position: relative !important;

        flex: 0 0 clamp(210px, 24vw, 285px) !important;

        width: clamp(210px, 24vw, 285px) !important;
        max-width: 285px !important;

        margin-left: auto !important;
        margin-right: clamp(14px, 2vw, 28px) !important;

        z-index: 10 !important;
    }


    /* --------------------------------------------------------
       STACK MET 3 KAARTEN
       -------------------------------------------------------- */

    body.pb-template-front-page
    .pb-hero-tiles-stack {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        flex-direction: column !important;

        width: 100% !important;
        max-width: 285px !important;

        gap: clamp(8px, 1.1vw, 12px) !important;

        margin: 0 !important;

        transform: none !important;
    }


    /* --------------------------------------------------------
       DE DRIE KAARTEN ZELF OOK EXPLICIET TERUG
       De oude V4/V5 regels verbergen deze afzonderlijk.
       -------------------------------------------------------- */

    body.pb-template-front-page
    .pb-hero-tiles-stack > *,
    body.pb-template-front-page
    .pb-hero-tile,
    body.pb-template-front-page
    .pb-hero-card {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        width: 100% !important;
        max-width: 285px !important;

        min-height: 0 !important;

        padding:
            clamp(12px, 1.4vw, 17px)
            clamp(13px, 1.5vw, 18px)
            !important;
    }


    /* --------------------------------------------------------
       TEKST LINKS KRIJGT GENOEG RUIMTE VOOR DE KAARTEN
       -------------------------------------------------------- */

    body.pb-template-front-page
    .pb-hero-content {
        width: clamp(430px, 51%, 590px) !important;
        max-width: 590px !important;

        flex: 0 1 auto !important;
    }


    /* --------------------------------------------------------
       HERO INNER: beide kolommen echt naast elkaar
       -------------------------------------------------------- */

    body.pb-template-front-page
    .kb-inner.pb-hero-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: calc(100% - 40px) !important;
        max-width: 1280px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        gap: clamp(16px, 2vw, 30px) !important;
    }


    /*
     * Tablet-landscape header CTA blijft bewust weg.
     * De 3 hero-kaarten zijn terug; header blijft daardoor
     * netjes zonder opnieuw buiten beeld te lopen.
     */
    .vokk-header .vokk-action,
    .vokk-header .vokk-cta {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* PB TABLET LANDSCAPE HERO CARDS FINAL END */

/* ============================================================
   PB HERO CARDS RESPONSIVE POSITION FINAL
   900 - 1500px

   Doel:
   - kaarten op tablet landscape + laptop altijd in beeld
   - kaarten hoger in hero
   - schalen vloeiend mee
   - tekstkolom onaangeraakt
   - herohoogte onaangeraakt
   - footer onaangeraakt
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1500px) {

    body.pb-template-front-page
    .pb-hero-visual {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: relative !important;

        width:
            clamp(
                220px,
                23vw,
                300px
            ) !important;

        max-width: 300px !important;

        flex:
            0
            0
            clamp(
                220px,
                23vw,
                300px
            ) !important;

        margin-left: auto !important;
        margin-right:
            clamp(
                12px,
                2vw,
                28px
            ) !important;

        /*
         * Kolom omhoog trekken.
         */
        align-self: flex-start !important;

        margin-top:
            clamp(
                72px,
                8vh,
                105px
            ) !important;

        z-index: 10 !important;
    }


    body.pb-template-front-page
    .pb-hero-tiles-stack {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        flex-direction: column !important;

        width: 100% !important;
        max-width: 300px !important;

        gap:
            clamp(
                9px,
                1vw,
                14px
            ) !important;

        margin: 0 !important;

        transform: none !important;
    }


    body.pb-template-front-page
    .pb-hero-tiles-stack > *,
    body.pb-template-front-page
    .pb-hero-tile,
    body.pb-template-front-page
    .pb-hero-card {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 100% !important;
        max-width: 300px !important;

        min-height: 0 !important;

        padding:
            clamp(
                12px,
                1.25vw,
                17px
            )
            clamp(
                14px,
                1.4vw,
                18px
            )
            !important;
    }


    /*
     * Hero-inner blijft naast elkaar,
     * maar centreert de rechterkolom niet meer verticaal.
     */
    body.pb-template-front-page
    .kb-inner.pb-hero-inner {
        display: flex !important;
        flex-direction: row !important;

        align-items: flex-start !important;
        justify-content: space-between !important;

        gap:
            clamp(
                18px,
                2.2vw,
                34px
            ) !important;
    }


    /*
     * Tekst houdt zijn eigen normale positie.
     */
    body.pb-template-front-page
    .pb-hero-content {
        align-self: center !important;
    }
}

/* PB HERO CARDS RESPONSIVE POSITION FINAL END */

/* ============================================================
   PB HOME HERO CARDS POSITION FINAL V2
   Tablet landscape + laptop: 900 - 1500px

   FIX:
   - alle 3 kaarten altijd binnen hero
   - stack niet meer afhankelijk van flex vertical alignment
   - geen typografie gewijzigd
   - herohoogte niet gewijzigd
   - footer niet gewijzigd
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1500px)
and (orientation: landscape) {

    /*
     * Hero wordt positioneringsbasis.
     */
    body.pb-template-front-page
    .kb-block.nuke-v10-master {
        position: relative !important;
        overflow: hidden !important;
    }


    /*
     * Rechterkolom volledig losmaken van de flex-flow.
     *
     * Hierdoor kan hij nooit meer onderaan worden weggedrukt
     * door de hoogte/positie van de linker tekstkolom.
     */
    body.pb-template-front-page
    .pb-hero-visual {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        position: absolute !important;

        top: 50% !important;
        right: clamp(18px, 2.4vw, 38px) !important;

        left: auto !important;
        bottom: auto !important;

        width: clamp(220px, 21vw, 285px) !important;
        max-width: 285px !important;

        margin: 0 !important;

        transform: translateY(-46%) !important;

        z-index: 10 !important;
    }


    /*
     * Stack zelf.
     */
    body.pb-template-front-page
    .pb-hero-tiles-stack {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: static !important;

        flex-direction: column !important;

        width: 100% !important;
        max-width: 285px !important;

        gap: clamp(8px, .85vw, 12px) !important;

        margin: 0 !important;

        transform: none !important;
    }


    /*
     * Alle drie kaarten expliciet zichtbaar.
     */
    body.pb-template-front-page
    .pb-hero-tiles-stack > *,
    body.pb-template-front-page
    .pb-hero-tile,
    body.pb-template-front-page
    .pb-hero-card {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        width: 100% !important;
        max-width: 285px !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding:
            clamp(11px, 1vw, 16px)
            clamp(13px, 1.2vw, 18px)
            !important;
    }


    /*
     * Linker tekstgebied krijgt rechts voldoende vrije ruimte,
     * maar blijft verder op zijn bestaande positie.
     */
    body.pb-template-front-page
    .pb-hero-content {
        width: min(52%, 590px) !important;
        max-width: 590px !important;
    }


    /*
     * Vorige flex-positionering neutraliseren.
     */
    body.pb-template-front-page
    .kb-inner.pb-hero-inner {
        align-items: center !important;
    }
}


/* Iets smallere landscape-schermen:
   rechterkaarten nog wat compacter. */
@media screen
and (min-width: 900px)
and (max-width: 1180px)
and (orientation: landscape) {

    body.pb-template-front-page
    .pb-hero-visual {
        width: clamp(205px, 22vw, 245px) !important;
        max-width: 245px !important;

        right: 14px !important;

        transform: translateY(-45%) !important;
    }

    body.pb-template-front-page
    .pb-hero-tiles-stack,
    body.pb-template-front-page
    .pb-hero-tiles-stack > *,
    body.pb-template-front-page
    .pb-hero-tile,
    body.pb-template-front-page
    .pb-hero-card {
        max-width: 245px !important;
    }

    body.pb-template-front-page
    .pb-hero-content {
        width: 55% !important;
        max-width: 550px !important;
    }
}

/* PB HOME HERO CARDS POSITION FINAL V2 END */

/* ============================================================
   PB HOME HERO CARDS FINETUNE V3
   900 - 1500px landscape

   - kaarten iets kleiner
   - iets lager
   - meer ruimte onder navigatie
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1500px)
and (orientation: landscape) {

    body.pb-template-front-page
    .pb-hero-visual {
        width: clamp(205px, 19vw, 260px) !important;
        max-width: 260px !important;

        right: clamp(18px, 2vw, 30px) !important;

        top: 54% !important;

        transform: translateY(-43%) !important;
    }

    body.pb-template-front-page
    .pb-hero-tiles-stack {
        max-width: 260px !important;

        gap: clamp(8px, .8vw, 10px) !important;
    }

    body.pb-template-front-page
    .pb-hero-tiles-stack > *,
    body.pb-template-front-page
    .pb-hero-tile,
    body.pb-template-front-page
    .pb-hero-card {
        max-width: 260px !important;

        padding:
            clamp(10px, .9vw, 14px)
            clamp(12px, 1vw, 15px)
            !important;
    }

    body.pb-template-front-page
    .pb-hero-tile
    .pb-hero-tile-icon {
        top: 14px !important;
        right: 14px !important;
    }
}


/* 900 - 1180 nog iets compacter */
@media screen
and (min-width: 900px)
and (max-width: 1180px)
and (orientation: landscape) {

    body.pb-template-front-page
    .pb-hero-visual {
        width: clamp(190px, 21vw, 225px) !important;
        max-width: 225px !important;

        right: 12px !important;

        top: 55% !important;

        transform: translateY(-42%) !important;
    }

    body.pb-template-front-page
    .pb-hero-tiles-stack,
    body.pb-template-front-page
    .pb-hero-tiles-stack > *,
    body.pb-template-front-page
    .pb-hero-tile,
    body.pb-template-front-page
    .pb-hero-card {
        max-width: 225px !important;
    }
}

/* PB HOME HERO CARDS FINETUNE V3 END */

/* ============================================================
   PB HOME HERO CARDS HALF SIZE V5
   900 - 1500px landscape

   Alleen de 3 rechter hero-kaarten fors kleiner.
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1500px)
and (orientation: landscape) {

    body.pb-template-front-page
    .pb-hero-visual {
        width: clamp(155px, 14vw, 180px) !important;
        max-width: 180px !important;

        right: clamp(16px, 2vw, 28px) !important;

        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    body.pb-template-front-page
    .pb-hero-tiles-stack {
        width: 100% !important;
        max-width: 180px !important;

        gap: 8px !important;
    }

    body.pb-template-front-page
    .pb-hero-tiles-stack > *,
    body.pb-template-front-page
    .pb-hero-tile,
    body.pb-template-front-page
    .pb-hero-card {
        width: 100% !important;
        max-width: 180px !important;

        min-height: 0 !important;

        padding: 10px 11px !important;
    }

    body.pb-template-front-page
    .pb-hero-tile
    .pb-hero-tile-icon {
        top: 10px !important;
        right: 10px !important;

        transform: scale(.82) !important;
        transform-origin: top right !important;
    }

    body.pb-template-front-page
    .pb-hero-tile-content {
        width: 100% !important;
    }
}


/* 900 - 1180 nog iets kleiner */
@media screen
and (min-width: 900px)
and (max-width: 1180px)
and (orientation: landscape) {

    body.pb-template-front-page
    .pb-hero-visual,
    body.pb-template-front-page
    .pb-hero-tiles-stack,
    body.pb-template-front-page
    .pb-hero-tiles-stack > *,
    body.pb-template-front-page
    .pb-hero-tile,
    body.pb-template-front-page
    .pb-hero-card {
        max-width: 155px !important;
    }

    body.pb-template-front-page
    .pb-hero-visual {
        width: 155px !important;
        right: 12px !important;
    }
}

/* PB HOME HERO CARDS HALF SIZE V5 END */

/* ============================================================
   PB HOME HERO CARDS VERTICAL DOWN TUNE
   Alleen 900 - 1500px landscape
   Grootte blijft gelijk, alleen lager.
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1500px)
and (orientation: landscape) {

    body.pb-template-front-page
    .pb-hero-visual {
        top: 56% !important;
        transform: translateY(-46%) !important;
    }
}

/* PB HOME HERO CARDS VERTICAL DOWN TUNE END */

/* ============================================================
   PB HOME HERO CARDS BOTTOM AIR V6
   Alleen 900 - 1500px landscape
   Grootte blijft exact gelijk.
   Alleen meer lucht onder de derde kaart.
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1500px)
and (orientation: landscape) {

    body.pb-template-front-page
    .pb-hero-visual {
        top: 52.5% !important;
        transform: translateY(-47%) !important;
    }
}

/* PB HOME HERO CARDS BOTTOM AIR V6 END */

/* ============================================================
   PB HOME HERO CARDS TOP AIR V7
   Alleen 900 - 1500px landscape
   Grootte blijft exact gelijk.
   Iets meer lucht boven de eerste kaart.
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1500px)
and (orientation: landscape) {

    body.pb-template-front-page
    .pb-hero-visual {
        top: 54% !important;
        transform: translateY(-46%) !important;
    }
}

/* PB HOME HERO CARDS TOP AIR V7 END */

/* ============================================================
   PB HOME HERO LAPTOP HEIGHT V8
   900 - 1500px landscape

   Hero minder schermvullend op laptop.
   Kaarten / typografie / footer onaangeraakt.
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1500px)
and (orientation: landscape) {

    body.pb-template-front-page
    .kb-block.nuke-v10-master {
        height: clamp(520px, 66vh, 560px) !important;
        min-height: clamp(520px, 66vh, 560px) !important;
        max-height: 560px !important;
    }

    body.pb-template-front-page
    .kb-inner.pb-hero-inner {
        height: 100% !important;
        min-height: 0 !important;
    }
}

/* PB HOME HERO LAPTOP HEIGHT V8 END */

/* ============================================================
   PB HOME HERO CARDS MINI BALANCED V9
   900 - 1500px landscape

   - kaarten veel kleiner
   - stack verticaal gecentreerd
   - boven/onder ongeveer gelijke lucht
   - herohoogte onaangeraakt
   - tekst/footer onaangeraakt
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1500px)
and (orientation: landscape) {

    body.pb-template-front-page
    .pb-hero-visual {
        position: absolute !important;

        top: 50% !important;
        right: clamp(16px, 2vw, 28px) !important;

        left: auto !important;
        bottom: auto !important;

        width: clamp(110px, 10vw, 135px) !important;
        max-width: 135px !important;

        margin: 0 !important;

        transform: translateY(-50%) !important;

        z-index: 10 !important;
    }

    body.pb-template-front-page
    .pb-hero-tiles-stack {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 135px !important;

        gap: 6px !important;

        margin: 0 !important;

        transform: none !important;
    }

    body.pb-template-front-page
    .pb-hero-tiles-stack > *,
    body.pb-template-front-page
    .pb-hero-tile,
    body.pb-template-front-page
    .pb-hero-card {
        width: 100% !important;
        max-width: 135px !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 8px 9px !important;
    }

    body.pb-template-front-page
    .pb-hero-tile
    .pb-hero-tile-icon {
        top: 8px !important;
        right: 8px !important;

        transform: scale(.68) !important;
        transform-origin: top right !important;
    }
}


/* Iets smallere tablet-landscape/laptop schermen */
@media screen
and (min-width: 900px)
and (max-width: 1180px)
and (orientation: landscape) {

    body.pb-template-front-page
    .pb-hero-visual,
    body.pb-template-front-page
    .pb-hero-tiles-stack,
    body.pb-template-front-page
    .pb-hero-tiles-stack > *,
    body.pb-template-front-page
    .pb-hero-tile,
    body.pb-template-front-page
    .pb-hero-card {
        max-width: 118px !important;
    }

    body.pb-template-front-page
    .pb-hero-visual {
        width: 118px !important;
        right: 12px !important;
    }
}

/* PB HOME HERO CARDS MINI BALANCED V9 END */

/* ============================================================
   PB HOME HERO CARDS COMPACT + BALANCED V10
   Fix: niet smal/hoge kaarten, maar breed + compact.
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1500px)
and (orientation: landscape) {

    body.pb-template-front-page .pb-hero-visual {
        position: absolute !important;

        top: 50% !important;
        right: clamp(14px, 1.8vw, 24px) !important;
        bottom: auto !important;
        left: auto !important;

        width: clamp(175px, 15vw, 195px) !important;
        max-width: 195px !important;

        margin: 0 !important;

        transform: translateY(-50%) !important;

        z-index: 10 !important;
    }

    body.pb-template-front-page .pb-hero-tiles-stack {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 195px !important;

        gap: 8px !important;

        margin: 0 !important;
        transform: none !important;
    }

    body.pb-template-front-page .pb-hero-tiles-stack > *,
    body.pb-template-front-page .pb-hero-tile,
    body.pb-template-front-page .pb-hero-card {
        box-sizing: border-box !important;

        width: 100% !important;
        max-width: 195px !important;

        height: auto !important;
        min-height: 92px !important;
        max-height: 105px !important;

        margin: 0 !important;
        padding: 12px 48px 12px 13px !important;
    }

    /*
     * Icoon compact houden en rechts plaatsen.
     */
    body.pb-template-front-page .pb-hero-tile .pb-hero-tile-icon {
        top: 12px !important;
        right: 10px !important;

        transform: scale(.72) !important;
        transform-origin: top right !important;
    }
}

/*
 * 900-1180px:
 * wel iets smaller, maar NIET terug naar de extreem smalle kaarten.
 */
@media screen
and (min-width: 900px)
and (max-width: 1180px)
and (orientation: landscape) {

    body.pb-template-front-page .pb-hero-visual,
    body.pb-template-front-page .pb-hero-tiles-stack,
    body.pb-template-front-page .pb-hero-tiles-stack > *,
    body.pb-template-front-page .pb-hero-tile,
    body.pb-template-front-page .pb-hero-card {
        max-width: 175px !important;
    }

    body.pb-template-front-page .pb-hero-visual {
        width: 175px !important;
        right: 12px !important;
    }

    body.pb-template-front-page .pb-hero-tiles-stack > *,
    body.pb-template-front-page .pb-hero-tile,
    body.pb-template-front-page .pb-hero-card {
        min-height: 88px !important;
        max-height: 100px !important;
    }
}

/* PB HOME HERO CARDS COMPACT + BALANCED V10 END */

/* ============================================================
   PB HOME HERO CARDS DOWN V11
   Alleen 900 - 1500px landscape
   Alleen hele kaartenstack iets naar beneden.
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1500px)
and (orientation: landscape) {

    body.pb-template-front-page
    .pb-hero-visual {
        top: 58% !important;
        transform: translateY(-50%) !important;
    }
}

/* PB HOME HERO CARDS DOWN V11 END */

/* ============================================================
   PB HOME HERO CARDS DOWN +250PX
   Alleen 900 - 1500px landscape
   Alleen positie, formaat blijft gelijk.
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1500px)
and (orientation: landscape) {

    body.pb-template-front-page
    .pb-hero-visual {
        top: calc(50% + 250px) !important;
        transform: translateY(-50%) !important;
    }
}

/* PB HOME HERO CARDS DOWN +250PX END */

/* ============================================================
   PB HOME HERO CARDS UP 125PX
   Alleen 900 - 1500px landscape
   Corrigeert vorige +250px positie.
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1500px)
and (orientation: landscape) {

    body.pb-template-front-page
    .pb-hero-visual {
        top: calc(50% + 125px) !important;
        transform: translateY(-50%) !important;
    }
}

/* PB HOME HERO CARDS UP 125PX END */

/* ============================================================
   PB IPAD LANDSCAPE INNER AIR V13
   Alleen 900 - 1180px landscape

   - HERO ACHTERGROND BLIJFT FULL WIDTH
   - geen witte randen
   - alleen content meer naar binnen
   - kaarten blijven zichtbaar
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1180px)
and (orientation: landscape) {

    body.pb-template-front-page
    .kb-block.nuke-v10-master {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
    }

    body.pb-template-front-page
    .kb-inner.pb-hero-inner {
        width: calc(100% - 96px) !important;
        max-width: 1080px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.pb-template-front-page
    .pb-hero-content {
        margin-left: 0 !important;
    }

    body.pb-template-front-page
    .pb-hero-visual {
        right: 28px !important;
    }
}

/* PB IPAD LANDSCAPE INNER AIR V13 END */

/* ============================================================
   PB HOME HERO CARD INNER AIR V14
   Alleen 900 - 1500px landscape

   Meer ademruimte rond tekst in de 3 hero-kaarten.
   Positie/formaat van stack blijft gelijk.
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1500px)
and (orientation: landscape) {

    body.pb-template-front-page
    .pb-hero-tiles-stack > *,
    body.pb-template-front-page
    .pb-hero-tile,
    body.pb-template-front-page
    .pb-hero-card {
        padding:
            14px
            48px
            14px
            16px
            !important;
    }

    body.pb-template-front-page
    .pb-hero-tile
    .pb-hero-tile-icon {
        top: 12px !important;
        right: 12px !important;
    }

}

/* PB HOME HERO CARD INNER AIR V14 END */

/* ============================================================
   PB HOME HERO CARD BOTTOM AIR V15
   Alleen 900 - 1500px landscape

   Meer ruimte onder de tekst in de 3 hero-kaarten.
   Breedte/positie/hero blijven gelijk.
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1500px)
and (orientation: landscape) {

    body.pb-template-front-page
    .pb-hero-tiles-stack > *,
    body.pb-template-front-page
    .pb-hero-tile,
    body.pb-template-front-page
    .pb-hero-card {
        padding:
            14px
            48px
            20px
            16px
            !important;
    }

}

/* PB HOME HERO CARD BOTTOM AIR V15 END */

/* ============================================================
   PB HOME HERO CARD HEIGHT +12PX V16
   Alleen 900 - 1500px landscape
   Kaarten iets langer/hoger, positie blijft gelijk.
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1500px)
and (orientation: landscape) {

    body.pb-template-front-page
    .pb-hero-tiles-stack > *,
    body.pb-template-front-page
    .pb-hero-tile,
    body.pb-template-front-page
    .pb-hero-card {
        min-height: 104px !important;
        max-height: 117px !important;
    }

}

/* PB HOME HERO CARD HEIGHT +12PX V16 END */

/* ============================================================
   PB HOME SERVICE CARDS RESPONSIVE V17
   Tablet landscape 900 - 1180px

   - vier kaarten schalen echt mee
   - hoogte volgt breedte
   - foto blijft netjes gecropt
   - desktop / mobiel / footer onaangeraakt
   ============================================================ */

@media screen
and (min-width: 900px)
and (max-width: 1180px)
and (orientation: landscape) {

    body.pb-template-front-page
    .pb-vokk-services-grid {
        display: grid !important;

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

        gap: clamp(12px, 1.5vw, 20px) !important;
    }

    body.pb-template-front-page
    .pb-vokk-service-card {
        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 4 / 3 !important;

        overflow: hidden !important;
    }

    body.pb-template-front-page
    .pb-vokk-service-card img {
        display: block !important;

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

        max-width: none !important;
        max-height: none !important;

        object-fit: cover !important;
        object-position: center center !important;

        transform: none !important;
        scale: none !important;
        translate: none !important;
    }

    body.pb-template-front-page
    .pb-vokk-service-content {
        position: absolute !important;

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

        width: 100% !important;

        padding:
            clamp(10px, 1vw, 14px)
            clamp(10px, 1vw, 14px)
            !important;
    }
}

/* PB HOME SERVICE CARDS RESPONSIVE V17 END */

/* ============================================================








/* ============================================================


/* ==========================================================
   VOKK SERVICE CARDS — HOVER REVEAL
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

    body.pb-template-front-page
    .pb-vokk-service-content {
        transform:
            translateY(52px) !important;

        transition:
            transform .28s ease !important;
    }


    body.pb-template-front-page
    .pb-vokk-service-card:hover
    .pb-vokk-service-content,

    body.pb-template-front-page
    .pb-vokk-service-card:focus-visible
    .pb-vokk-service-content {
        transform:
            translateY(0) !important;
    }


    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-content p,

    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-more {
        opacity:
            0 !important;

        transform:
            translateY(8px) !important;

        transition:
            opacity .22s ease,
            transform .28s ease !important;
    }


    body.pb-template-front-page
    .pb-vokk-service-card:hover
    .pb-vokk-service-content p,

    body.pb-template-front-page
    .pb-vokk-service-card:hover
    .pb-vokk-service-more,

    body.pb-template-front-page
    .pb-vokk-service-card:focus-visible
    .pb-vokk-service-content p,

    body.pb-template-front-page
    .pb-vokk-service-card:focus-visible
    .pb-vokk-service-more {
        opacity:
            1 !important;

        transform:
            translateY(0) !important;
    }
}


/*
 * Touch heeft geen betrouwbare hover.
 * Daar blijft alle informatie gewoon zichtbaar.
 */
@media (hover: none) {

    body.pb-template-front-page
    .pb-vokk-service-content {
        transform:
            none !important;
    }

    body.pb-template-front-page
    .pb-vokk-service-content p,

    body.pb-template-front-page
    .pb-vokk-service-more {
        opacity:
            1 !important;

        transform:
            none !important;
    }
}


/* ==========================================================
   VOKK SERVICE CARDS — FINAL POINTER BEHAVIOUR
   Desktop = hover reveal
   Touch/tablet = content direct zichtbaar
   ========================================================== */


/*
 * TOUCH / TABLET
 *
 * Een touch-interface heeft geen echte hover.
 * Daarom staat de volledige kaarttekst direct zichtbaar.
 * Eén tap op de kaart blijft gewoon navigeren.
 */
@media (hover: none), (pointer: coarse) {

    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-content {

        transform:
            translateY(0) !important;

        position:
            relative !important;

        z-index:
            3 !important;
    }


    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-content p,

    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-more {

        opacity:
            1 !important;

        visibility:
            visible !important;

        transform:
            translateY(0) !important;
    }
}


/*
 * ECHTE MUIS / DESKTOP
 *
 * Alleen daar gebruiken we hover-reveal.
 */
@media (hover: hover) and (pointer: fine) {

    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-content {

        transform:
            translateY(calc(100% - 72px)) !important;

        transition:
            transform .32s cubic-bezier(.22,.61,.36,1) !important;
    }


    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-content p,

    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-more {

        opacity:
            0 !important;

        visibility:
            visible !important;

        transform:
            translateY(10px) !important;

        transition:
            opacity .20s .07s,
            transform .20s .07s !important;
    }


    body.pb-template-front-page
    .pb-vokk-service-card:hover
    .pb-vokk-service-content,

    body.pb-template-front-page
    .pb-vokk-service-card:focus-within
    .pb-vokk-service-content {

        transform:
            translateY(0) !important;
    }


    body.pb-template-front-page
    .pb-vokk-service-card:hover
    .pb-vokk-service-content p,

    body.pb-template-front-page
    .pb-vokk-service-card:hover
    .pb-vokk-service-more,

    body.pb-template-front-page
    .pb-vokk-service-card:focus-within
    .pb-vokk-service-content p,

    body.pb-template-front-page
    .pb-vokk-service-card:focus-within
    .pb-vokk-service-more {

        opacity:
            1 !important;

        transform:
            translateY(0) !important;
    }
}


/* ==========================================================
   VOKK SERVICE CARDS — TOUCH / TABLET FINAL
   Geen hover beschikbaar: volledige tekst direct zichtbaar.
   Desktop hover-regels blijven onaangetast.
   ========================================================== */

@media (hover: none), (pointer: coarse) {

    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-content {
        transform: translateY(0) !important;
    }

    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-content p,

    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-more {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}


/* ==========================================================
   VOKK SERVICE CARDS — TOUCH FINAL
   Tablet/mobiel: alleen titel.
   Tap opent direct de gekoppelde pagina.
   ========================================================== */

@media (hover: none), (pointer: coarse) {

    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-content {
        transform:
            translateY(calc(100% - 72px)) !important;
    }

    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-content p,

    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-more {
        opacity:
            0 !important;

        visibility:
            hidden !important;

        pointer-events:
            none !important;

        transform:
            translateY(10px) !important;
    }

    /*
     * Een tap/focus mag op touch NIET alsnog
     * de verborgen content openklappen.
     */
    body.pb-template-front-page
    .pb-vokk-service-card:focus,

    body.pb-template-front-page
    .pb-vokk-service-card:focus-within {
        outline:
            none;
    }

    body.pb-template-front-page
    .pb-vokk-service-card:focus
    .pb-vokk-service-content,

    body.pb-template-front-page
    .pb-vokk-service-card:focus-within
    .pb-vokk-service-content {
        transform:
            translateY(calc(100% - 72px)) !important;
    }

    body.pb-template-front-page
    .pb-vokk-service-card:focus
    .pb-vokk-service-content p,

    body.pb-template-front-page
    .pb-vokk-service-card:focus
    .pb-vokk-service-more,

    body.pb-template-front-page
    .pb-vokk-service-card:focus-within
    .pb-vokk-service-content p,

    body.pb-template-front-page
    .pb-vokk-service-card:focus-within
    .pb-vokk-service-more {
        opacity:
            0 !important;

        visibility:
            hidden !important;
    }
}


/* ==========================================================
   VOKK SERVICE CARDS — TOUCH STATIC TITLE FINAL
   Mobiel/tablet:
   - titel permanent onderaan
   - geen beweging bij tap/focus
   - beschrijving verborgen
   - tap opent direct de pagina
   ========================================================== */

@media (hover: none), (pointer: coarse) {

    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-content,

    body.pb-template-front-page
    .pb-vokk-service-card:hover
    .pb-vokk-service-content,

    body.pb-template-front-page
    .pb-vokk-service-card:focus
    .pb-vokk-service-content,

    body.pb-template-front-page
    .pb-vokk-service-card:focus-visible
    .pb-vokk-service-content,

    body.pb-template-front-page
    .pb-vokk-service-card:focus-within
    .pb-vokk-service-content {

        position:
            absolute !important;

        left:
            0 !important;

        right:
            0 !important;

        bottom:
            0 !important;

        width:
            100% !important;

        transform:
            none !important;

        transition:
            none !important;
    }


    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-content p,

    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-more,

    body.pb-template-front-page
    .pb-vokk-service-card:hover
    .pb-vokk-service-content p,

    body.pb-template-front-page
    .pb-vokk-service-card:hover
    .pb-vokk-service-more,

    body.pb-template-front-page
    .pb-vokk-service-card:focus
    .pb-vokk-service-content p,

    body.pb-template-front-page
    .pb-vokk-service-card:focus
    .pb-vokk-service-more,

    body.pb-template-front-page
    .pb-vokk-service-card:focus-within
    .pb-vokk-service-content p,

    body.pb-template-front-page
    .pb-vokk-service-card:focus-within
    .pb-vokk-service-more {

        display:
            none !important;

        opacity:
            0 !important;

        visibility:
            hidden !important;

        transform:
            none !important;

        transition:
            none !important;

        pointer-events:
            none !important;
    }


    body.pb-template-front-page
    .pb-vokk-service-card
    .pb-vokk-service-content h3 {

        margin:
            0 !important;

        transform:
            none !important;

        transition:
            none !important;
    }
}

/* =========================================================
   PB STANDARD PAGE HEADER
   Normale WordPress-pagina's zonder eigen hero/template
   krijgen een vaste donkere navigatie.
   ========================================================= */

body.page-template-default .vokk-header,
body.page-template-page-php .vokk-header {
    background:
        linear-gradient(
            135deg,
            var(--vokk-dark, #061426),
            var(--vokk-darker, #030b16)
        ) !important;

    box-shadow:
        0 1px 0 rgba(255,255,255,.08),
        0 8px 24px rgba(0,0,0,.10) !important;
}

/* Ook bovenaan de pagina NIET transparant */
body.page-template-default .vokk-header:not(.is-scrolled),
body.page-template-page-php .vokk-header:not(.is-scrolled) {
    background:
        linear-gradient(
            135deg,
            var(--vokk-dark, #061426),
            var(--vokk-darker, #030b16)
        ) !important;
}


/* ============================================================
 * VOKK DETAIL CTA — PERMANENT CONTRAST CONTRACT
 * Donkere detail-CTA houdt altijd lichte tekst.
 * Alleen kleur/contrast; geen typografie of layout.
 * ============================================================ */

html body .vokk-detail-cta-box {
    color: #ffffff !important;
}

html body .vokk-detail-cta-box
:is(h1, h2, h3, h4, h5, h6, strong) {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
}

html body .vokk-detail-cta-box
:is(p, li) {
    color: rgba(255,255,255,.82) !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
}

/* CTA-knop behoudt zijn eigen buttoncontrast */
html body .vokk-detail-cta-box .vokk-detail-cta-button,
html body .vokk-detail-cta-box .vokk-detail-cta-button span {
    opacity: 1 !important;
    visibility: visible !important;
}