/*** Basic style v1 ***/

/*** ---------- Global ---------- ***/
:root {
    --ts-100: 1000ms; --ts-95: 950ms; --ts-90: 900ms; --ts-85: 850ms; --ts-80: 800ms; --ts-75: 750ms; --ts-70: 700ms; --ts-65: 650ms; --ts-60: 600ms; --ts-55: 550ms; --ts-50: 500ms; --ts-45: 450ms; --ts-40: 400ms; --ts-35: 350ms; --ts-30: 300ms; --ts-25: 250ms; --ts-20: 200ms; --ts-15: 150ms; 
}

/*** Disable animations & transitions ***/
@media (prefers-reduced-motion) {
    *, *::before, *::after { transition: 0s; animation: none; }
    :root {
        --ts-100: 0; --ts-95: 0; --ts-90: 0; --ts-85: 0; --ts-80: 0; --ts-75: 0; --ts-70: 0; --ts-65: 0; --ts-60: 0; --ts-55: 0; --ts-50: 0; --ts-45: 0; --ts-40: 0; --ts-35: 0; --ts-30: 0; --ts-25: 0; --ts-20: 0; --ts-15: 0;
    }
}

/*** iOS Safari scroll rendering fix - disable heavy CSS effects ***/
@supports (-webkit-touch-callout: none) {
    * {
        filter: none !important;
        -webkit-filter: none !important;
    }
}

*, *::before, *::after { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; box-sizing: border-box; margin: 0; padding: 0; }
/* *:focus { outline: 2px dashed var(--clr-dark); outline-offset: -2px; }
.btn:focus { outline-offset: 2px; } */
.screen-reader-text { clip: rect(1px,1px,1px,1px); word-wrap: normal!important; border: 0; -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute!important; width: 1px }
html { scroll-padding-top: calc(var(--nav-height, 10px) + 3.2rem); font-family: var(--font-primary); font-size: 10px; height: -webkit-fill-available; scroll-behavior: smooth; }
body { font-size: var(--fs); line-height: var(--lh); color: var(--clr-text); min-height: 100dvh; min-height: -webkit-fill-available; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; 
    --no-scroll { overflow: hidden; }
}
.wpb-pagewrapper { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.skip-link { position: absolute; top: -999rem; left: 0; background: #000; color: #fff; padding: 8px 16px; text-decoration: none; z-index: 9999; 
    &:focus { top: 20px; left: 20px; }
}

.scroll-icon { --bg-clr: var(--clr-primary); height: 7rem; width: .2rem; border-radius: 1rem; background-color: var(--bg-clr); 
    &::before, &::after { content: ''; display: block; position: absolute; bottom: 0; background-color: var(--bg-clr); width: 1.1rem; height: 1.1rem; border-radius: 50%; left: 50%; transform: translateX(-50%); }
    &::after { width: 0; height: 0; border-left: .55rem solid transparent; border-right: .55rem solid transparent; border-bottom: 1.1rem solid var(--bg-clr); bottom: .7rem; border-radius: 0; background: transparent; }
}

/*** ---------- Accordion ---------- ***/
.wpb-accordion {
    --br: 1rem; 
    --p: clamp(1.2rem, 1.6vw, 2.4rem);
    --bg: var(--clr-light); 
    --gap: 1.2rem;
    --fs-title: clamp(1.6rem, 1.6vw, 1.8rem);
    --button-p: 1.2rem var(--p);
    --body-p: 0 var(--p) var(--p) calc(var(--p) + var(--icon-size) + var(--gap)); 
    --border: none;
    --icon-clr: var(--clr-primary);
    --icon-size: 1.6rem;
    --offset: .4rem;
    --tsd: var(--ts-duration);
    --tsf: var(--ts-function);
    --tsp: color, background-color, border-color, box-shadow, height, border-radius, padding-bottom; 

    .collapse:not(.show) { display: none; }

    .wpb-accordion__item { color: var(--clr); border-bottom: var(--border); border-radius: var(--br); overflow: hidden;

        .wpb-accordion__header { --fs: 1.8rem; margin: 0; }
        .wpb-accordion__button { font: inherit; color: inherit; padding: var(--button-p); min-height: clamp(5.4rem, 6vw, 6.4rem); cursor: pointer; display: grid; grid-template-columns: var(--icon-size) 1fr; column-gap: var(--gap); align-items: center; width: 100%; text-align: left; background-color: var(--bg); border: 0; overflow-anchor: none; border-radius: 0; transition-duration: var(--tsd); transition-timing-function: var(--tsf); transition-property: var(--tsp);
            h3 { line-height: 1.1; position: relative; color: var(--clr-contrast, var(--clr-heading)); font-size: var(--fs-title); font-weight: 600; transition: color var(--tsd) var(--tsf); }
            .wpb-accordion__icon{ position: relative; display: inline-grid; place-items: center; width: var(--icon-size); height: var(--icon-size); min-width: var(--icon-size);
                i { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: fit-content; margin: auto; color: var(--icon-clr); font-size: .8em; transition: opacity var(--tsd) var(--tsf); }
                .fa-minus { opacity: 0; }
            }
            &.is-active {
                .fa-plus { opacity: 0; }
                .fa-minus { opacity: 1; }
            }

            &:hover { --clr-heading: var(--clr-primary); }
        }
        .wpb-accordion__body { padding: var(--body-p); background-color: var(--bg);
            .wpb-text{ --fs: clamp(1.4rem, 1.5vw, 1.6rem); --mt: .5em;
                p{ font-size: var(--fs); color: var(--clr-contrast, var(--clr-heading)); }
            }
        }    
        .collapsing { height: 0; overflow: hidden; transition: height var(--tsd) var(--tsf); }

        & + .wpb-accordion__item { margin-top: var(--offset); }
    }

    .wpb-bg-clr--light &{ --bg: #FFFF; }


    &.wpb-accordion--usps { --br: 0; --bg: transparent; --p: 0; --fs-title: clamp(1.8rem, 2vw, 2.4rem); --button-p: 0 var(--p); --offset: clamp(1.6rem, 2vw, 2.4rem);
        .wpb-accordion__item { border-bottom: 1px solid var(--clr-border); transition: padding-bottom var(--tsd) var(--tsf);
            .wpb-accordion__button { grid-template-columns: 1fr var(--icon-size); padding-bottom: var(--offset); min-height: auto;
                &.is-active { padding-bottom: clamp(.8rem, 1vw, 1.2rem); }
            }
            &:has(.is-active) { padding-bottom: var(--offset); }
            & + .wpb-accordion__item { margin-top: 0; 
                .wpb-accordion__button { padding-top: var(--offset); }
            }
        }
    }
}

.wpb-accordion-images { height: 100%; position: relative; overflow: hidden;
    .wpb-accordion-images__item{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity var(--ts-duration) var(--ts-function);
        .wpb-image { --br: 0; }
        &.is-active { opacity: 1; position: relative; }
    }
}


/*** ---------- Images ---------- ***/
.wpb-image { --br: 1rem; 
    img { border-radius: var(--br); }

    &.wpb-image--adjustable img { object-position: var(--position, center); }

    .wpb-image__quote { --p: clamp(2.4rem, 3.2vw, 6rem); --clr-text: #FFFF; position: relative; padding: var(--p); grid-area: 1 / 1; align-self: end; justify-self: left; width: 100%; z-index: 3; height: fit-content; max-width: calc(var(--p) + 80%);
        .wpb-image__quote-text { --fs: clamp(2rem, 2.4vw, 3.6rem); color: var(--clr-text); font-size: var(--fs); font-weight: 600; line-height: 1.2;
            &::before { content: '\201C'; font-size: var(--fs); line-height: 0; margin-left: calc(-1 * var(--fs) / 2.5); }
            &::after { content: '\201D'; }

            &:has(+ .wpb-image__quote-author) { padding-bottom: clamp(2rem, 2.4vw, 3.2rem); }
        }
        .wpb-image__quote-author { --fs: clamp(1.4rem, 1.5vw, 1.6rem); --fs-title: clamp(1.8rem, 1.8vw, 2rem); color: var(--clr-text); line-height: 1.3;
            p { font-size: var(--fs); 
                strong { font-size: var(--fs-title); font-weight: 600; }
            }
        }

        .wpb-image:has(&) { display: grid; position: relative; overflow: hidden; border-radius: var(--br);
            &::before { grid-area: 1 / 1; }
            &::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(75deg, var(--clr-dark) 15%, transparent 70%); z-index: 1; }
            .wpb-asset--droplet { --bottom: -28rem; --right: -18rem; --w: clamp(70rem, 75vw, 90rem); z-index: 2; }
        }
    }
}

img { display: block; width: 100%; height: auto; }

/*** ----- Sections ----- ***/
section { position: relative; }
.has-background-image { position: relative;
    .container { z-index: 1; }
    .wpb-text { color: #fff; }
    &::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.5); }
}

img.is-background-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%!important; object-fit: cover; }
figure.is-background-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
figure.is-background-image img { width: 100%; height: 100%!important; object-fit: cover; }


/*** ---------- Block sections ---------- ***/
[class*="wpb-block__"]:not(.wpb-block__inner){ --offset: clamp(2.4rem, 2rem + 2vw, 4.8rem);
    &.wpb-block__header { padding-bottom: var(--offset); }
    &.wpb-block__footer { padding-top: var(--offset); }
    &.wpb-block__cta { --offset: clamp(2.4rem, 2rem + 2vw, 3.2rem);
        .container { padding-top: var(--offset); padding-bottom: var(--offset); display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
            .wpb-user { --fs: clamp(1.4rem, 1.5vw, 1.6rem); --title-fs: clamp(1.8rem, 1.8vw, 2rem); max-width: min(clamp(50rem, 50vw, 80rem), 100%); }
            &::after { content: ''; display: block; position: absolute; left: var(--inline-spacing); bottom: 0; left: var(--inline-spacing); width: calc(100% - (var(--inline-spacing) * 2)); border-bottom: 1px solid var(--clr-border); }
        }
        .wpb-block__cta__text { --fs-title: clamp(1.6rem, 1.8vw, 2rem); --fs: clamp(1.4rem, 1.5vw, 1.6rem); max-width: clamp(48rem, 48vw, 62rem);
            strong { display: block; font-size: var(--fs-title); font-weight: 600; line-height: 1.3; padding-bottom: .2em; }
            p { font-size: var(--fs); line-height: 1.3; }
        }
        &:has(.wpb-user__profile) .container{ padding-top: clamp(2.4rem, 2rem + 2vw, 4.8rem); padding-bottom: 0; 
            &::after { display: none; }
        }
    }
}

@media (max-width: 575.98px) {
    [class*="wpb-block__"]:not(.wpb-block__inner){ 
        &.wpb-block__cta .container .btn-group{ width: 100%; 
            .btn { width: 100%; }
        }
    }
}

/*** ---------- Icons ---------- ***/
.wpb-icon { --src: ; --clr: var(--clr-dark); --w: 1.8rem; --h: 1.8rem; display: inline-flex; background: transparent; 
    &::after { content:''; -webkit-mask-image: var(--src); mask-image: var(--src); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; display: inline-block; width: var(--w); height: var(--h); min-width: var(--w); min-height: var(--h); background: var(--clr); transition: background var(--ts-duration) var(--ts-function); }
    &.wpb-icon--brandmark { --clr: var(--clr-primary); opacity: .1; --src: url('/app/themes/wux-theme/assets/img/icon_brandmark.svg'); --w: 120rem; --h: calc(var(--w) * 1.1); }
    &.wpb-icon--brandmark-outline { --clr: #fff; opacity: .3; --src: url('/app/themes/wux-theme/assets/img/icon_brandmark_outline.svg'); --w: clamp(60rem, 60vw, 120rem); --h: calc(var(--w) * 1.1); }
}

/*** ---------- Typography ---------- ***/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-size: var(--fs); line-height: var(--lh); font-family: var(--font-secondary); text-wrap: balance; word-break: normal; overflow-wrap: normal; hyphens: manual; font-weight: 600; hyphenate-limit-chars: 6 3 3; }
h1, .h1 { --fs: var(--fs-h1); --lh: 1.1; }
h2, .h2 { --fs: var(--fs-h2); --lh: 1.1; }
h3, .h3 { --fs: var(--fs-h3); --lh: 1.1; 
    strong { font-weight: 700; }
}
h4, .h4 { --fs: var(--fs-h4, 1.8rem); --lh: 1.2; }
h5, .h5 { --fs: var(--fs-h5, 1.6rem); --lh: 1.2; }
h6, .h6 { --fs: var(--fs-h6, 1.4rem); --lh: 1.2; }

.font-secondary { font-family: var(--font-secondary) }

.wpb-text { --mt: 1em;
    > * + *:not(.btn .blockquote) { margin-top: var(--mt); } 
    > *:has(+ .card-container .wpb-card--work-at-elpress) { margin-bottom: auto; }
    &:has(.card-container .wpb-card--work-at-elpress) { height: 100%; display: flex; flex-direction: column; }

    .wpb-image + .wpb-subtitle { --mt: 3em; }
    .btn--link-white + * { --mt: 0; }
    * + .card-container { --mt: 2.5em; 
        &:has(.wpb-card--orientation-meeting) { --mt: 2rem; }
    }
    ul, ol { padding-left: 2.4rem;
        li { font: inherit; }
    }
    a:not(.btn) { font: inherit; font-weight: 600; text-underline-offset: .25rem; color: var(--clr-contrast, var(--clr-primary)); transition: opacity var(--ts-duration) var(--ts-function);
        &:hover { opacity: .7; }
    }
    blockquote { border-left: 4px solid #f2f2f2; padding-left: 1.6rem; }
    iframe { width: 100%; height: 100%; aspect-ratio: 16/9; border-radius: 1rem; }
    h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6  { color: var(--clr-contrast, var(--clr-heading)); }
    p:not(.wpb-subtitle) { color: var(--clr-contrast-text, var(--clr-text)); }
    .wpb-usps-wrapper { list-style: none; padding: 0;
        .wpb-usp { display: flex; align-items: center; gap: .6rem; color: var(--clr-contrast-text, var(--clr-text));
            i { color: var(--clr-primary); font-size: 1.2rem; }
            + .wpb-usp { margin-top: 1rem; }
            .wpb-usp__text { line-height: 1.1; }
        }

        &.wpb-usps-wrapper--500 .wpb-usp { font-weight: 500; }
    }

    .wpb-text__statistics { --gap: 1.2rem; display: flex; align-items: center;
        .statistic-container:has(&){ --mt: clamp(2.4rem, 2.8vw, 3.2rem); container: text-stats-container / inline-size; }
        .wpb-statistic-wrapper { position: relative; flex: 2;
            .wpb-statistic { --fs: clamp(1.2rem, 1.4vw, 1.6rem); --title-fs: clamp(2.8rem, 3.6vw, 4rem); font-weight: 500; text-align: center; width: fit-content;
                strong { font-weight: 600; }
            }
            &:first-child { align-items: flex-start; }
            &:last-child { align-items: flex-end; 
                &:not(:first-child) .wpb-statistic { margin-left: auto; }
            }
            &:not(:first-child){ padding-left: var(--gap);
                &::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background-color: var(--clr-border); }
            }
            &:not(:last-child){ padding-right: var(--gap); }
            &:not(:first-child):not(:last-child) { flex: 3; 
                .wpb-statistic { margin-inline: auto; }
            }
        }
    }

    .info-grid-container { --mt: 2rem;
        &:has(+ :is(h2, h3, h4)) { --mt: 1.2rem; }
        & + :is(h2, h3, h4) { --mt: clamp(2rem, 3vw, 4.8rem); }
        & + .btn-group { --mt: clamp(2rem, 2.4vw, 3.2rem); }
    }

}

@container text-stats-container (max-width: 38rem) {
    .wpb-text .wpb-text__statistics { --gap: 3.2rem; --offset: 1.8rem; --fade-size: calc(var(--offset) * 2); --fade-left: transparent; --fade-right: transparent; --mask-image: linear-gradient(to right, var(--fade-left), black var(--fade-size), black calc(100% - var(--fade-size)), var(--fade-right));
        scroll-snap-type: x mandatory; overflow-x: auto; -webkit-overflow-scrolling: touch; -webkit-scrollbar: none; scrollbar-width: none; scroll-padding-left: var(--offset); mask-image: var(--mask-image); -webkit-mask-image: var(--mask-image); margin-inline: calc(-1 * var(--offset)); padding-inline: var(--offset);
        
        .wpb-statistic-wrapper { flex: 0 0 fit-content; scroll-snap-align: start; padding: 0; max-width: clamp(18rem, 20vw, 22rem);
            &:not(:first-child):not(:last-child) { flex: 0 0 fit-content; }
        }
    }
}

/*** ---------- Buttons ---------- ***/
a { color: inherit; }

.btn, .gform_button, .gform_next_button, .gform_previous_button, .button, .swiper-button-prev, .swiper-button-next { 
    --fs: 1.4rem;
    --fw: 600;
    --lh: 1; 
    --p: 0 2.8rem; 
    --br: .6rem;
    --min-height: 5.2rem; 
    --gap: 1rem;
    --tsd: var(--ts-duration);
    --tsf: var(--ts-function);
    --tsp: color, background-color, border-color, box-shadow, -webkit-box-shadow;

    --clr: #fff; --icon-clr: var(--clr); --bg-clr: var(--clr-primary); --border: 1px solid var(--clr-primary); --box-shadow: none; 
    --hover-clr: var(--clr); --hover-icon-clr: var(--hover-clr); --hover-bg-clr: var(--bg-clr); --hover-border: var(--border); --hover-box-shadow: var(--box-shadow); 
    --focus-clr: var(--hover-clr); --focus-icon-clr: var(--hover-icon-clr); --focus-bg-clr: var(--hover-bg-clr); --focus-border: var(--hover-border); --focus-box-shadow: none;
    --active-clr: var(--focus-clr); --active-icon-clr: var(--focus-icon-clr); --active-bg-clr: var(--focus-bg-clr); --active-border: var(--focus-border); --active-box-shadow: var(--focus-box-shadow); 

    text-box-trim: trim-both; display: inline-flex; justify-content: space-between; align-items: center; min-height: var(--min-height); gap: var(--gap); font-size: var(--fs); font-weight: var(--fw); line-height: var(--lh); padding: var(--p); color: var(--clr); background-color: var(--bg-clr); border-radius: var(--br); border: var(--border); box-shadow: var(--box-shadow); text-align: left; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; transition-duration: var(--tsd); transition-timing-function: var(--tsf); font-family: var(--font-primary); transition-property: var(--tsp);

    padding-top: .2rem;

    span { font: inherit; color: inherit; }
    i { --clr: var(--icon-clr); color: var(--icon-clr); font-size: .75em; margin-bottom: .1em; transition-property: color, opacity; transition-duration: var(--tsd); transition-timing-function: var(--tsf); }

    &:hover { color: var(--hover-clr)!important; background-color: var(--hover-bg-clr)!important; border: var(--hover-border)!important; box-shadow: var(--hover-box-shadow)!important;
        i { --clr: var(--hover-icon-clr); color: var(--hover-icon-clr); }
    }
    &:focus { color: var(--focus-clr)!important; background-color: var(--focus-bg-clr)!important; border: var(--focus-border)!important; box-shadow: var(--focus-box-shadow)!important; 
        i { --clr: var(--focus-icon-clr); color: var(--focus-icon-clr); }
    }
    &:active { color: var(--active-clr)!important; background-color: var(--active-bg-clr)!important; border: var(--active-border)!important; box-shadow: var(--active-box-shadow)!important; 
        i { --clr: var(--active-icon-clr); color: var(--active-icon-clr); }
    }

    /* Button states */
    &.loading { position: relative; 
        &::before, &::after { content: ''; display: block; position: absolute; z-index: 1; border-radius: inherit;}
        &::before { top: 0; right: 0; bottom: 0; left: 0; background: var(--clr-primary); }
        &::after { border-radius: 50%; --w: 2rem; --h: 2rem; width: var(--w); height: var(--h); top: calc(50% - (var(--h) / 2)); left: calc(50% - (var(--w) / 2)); border: 2px solid var(--clr); border-top: 2px solid transparent; animation: rotate .75s linear infinite; }
    }

    /* Button sizes */
    &.btn--small { --p: 0 1.6rem; --fs: 1.6rem; --min-height: 3.8rem; }
    &.btn--large { --p: 0 2.4rem; --fs: 1.6rem; --min-height: 5.4rem; }
    
    /* Button add-ons */
    &.btn--block { width: 100%; line-height: 1.1;}
    &.btn--rounded { --br: 50%; }
    &.btn--ghost::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
    &.btn--square { --p: 0; aspect-ratio: 1/1; justify-content: center; }

    /* Button variations */
    &.btn--primary { --clr: #fff; --bg-clr: var(--clr-primary); --border: 1px solid var(--clr-primary); --box-shadow: none; --hover-clr: #fff; --hover-bg-clr: var(--clr-primary-120); --hover-border: 1px solid var(--clr-primary-120); }
    &.btn--white { --clr: var(--clr-dark); --bg-clr: #fff; --border: 1px solid #fff; --box-shadow: none; --hover-clr: #fff; --hover-bg-clr: var(--clr-dark); --hover-border: 1px solid var(--clr-dark); }
    &.btn--light { --clr: var(--clr-dark); --icon-clr: var(--clr-primary); --bg-clr: var(--clr-light); --border: 1px solid var(--bg-clr); --box-shadow: none; --hover-clr: #fff; --hover-bg-clr: var(--clr-primary); --hover-border: 1px solid var(--hover-bg-clr); }
    &.btn--outline { --clr: var(--clr-dark); --bg-clr: transparent; --border: 1px solid var(--clr-border); --box-shadow: none; --hover-clr: #fff; --hover-bg-clr: var(--clr-primary); --hover-border: 1px solid var(--hover-bg-clr); }
    &.btn--outline-primary { --clr: var(--clr-text); --bg-clr: transparent; --border: 1px solid var(--clr-primary); --box-shadow: none; --hover-clr: #fff; --hover-bg-clr: var(--clr-primary); --hover-border: 1px solid var(--clr-primary); }
    &.btn--outline-white { --clr: #fff; --hover-icon-clr: var(--clr-dark); --bg-clr: transparent; --border: 1px solid #fff; --box-shadow: none; --hover-clr: var(--clr-dark); --hover-bg-clr: #fff; --hover-border: 1px solid #fff; }
    &.btn--outline-primary-white { --clr: #fff; --bg-clr: transparent; --border: 1px solid var(--clr-primary); --box-shadow: none; --hover-clr: #fff; --hover-bg-clr: var(--clr-primary); --hover-border: 1px solid var(--clr-primary); }
    &.btn--link { --p: 0; min-height: 2rem; --clr: var(--clr-dark); --bg-clr: transparent; --border: 1px solid transparent; --box-shadow: none; --icon-clr: var(--clr-primary); }
    &.btn--link-white { --p: 0; min-height: 2rem; --clr: #fff; --icon-clr: var(--clr-primary); --bg-clr: transparent; --border: 1px solid transparent; --box-shadow: none; }

}

.btn-group { --gap: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); }  

@media (min-width: 768px) {
    .btn, .gform_button, .gform_next_button, .gform_previous_button, .button, .swiper-button-prev, .swiper-button-next { 
        --fs: 1.5rem;

        &.btn--small { --p: 0 1.6rem; --fs: 1.4rem; --min-height: 3.8rem; }
        &.btn--large { --p: 0 2.4rem; --fs: 1.6rem; --min-height: 5.6rem; }
    }
}
@media (min-width: 1200px) {
    .btn, .gform_button, .gform_next_button, .gform_previous_button, .button, .swiper-button-prev, .swiper-button-next { 
        --fs: 1.6rem;

        &.btn--small { --p: 0 1.6rem; --fs: 1.5rem; --min-height: 3.8rem; }
        &.btn--large { --p: 0 2.4rem; --fs: 1.7rem; --min-height: 6rem; }
    }
}

/*** ---------- Tabs ---------- ***/
.wpb-tabs { 
    --p: 0 2rem; 
    --clr: var(--clr-text); 
    --bg-clr: transparent; 
    --br: .5rem;
    --border: .1rem solid transparent; 
    --active-clr: var(--clr-primary); 
    --active-bg-clr: #fff; 
    --active-border: .1rem solid var(--clr-border);
    --tsd: var(--ts-duration);
    --tsf: var(--ts-function);
    --tsp: color, background-color, border-color;

    display: grid;

    .wpb-tabs__header { display: flex; flex-wrap: wrap; position: relative; z-index: 1; margin-bottom: -0.1rem; }
    .tab-button { font: inherit; display: inline-block; padding: var(--p); color: var(--clr); min-height: 4.3rem; background-color: var(--bg-clr); border-radius: var(--br) var(--br) 0 0; border: var(--border); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; transition-duration: var(--tsd); transition-timing-function: var(--tsf); transition-property: var(--tsp);
        &.is-active { color: var(--active-clr); border-color: var(--active-clr); background-color: var(--active-bg-clr); border: var(--active-border); border-bottom: 1px solid transparent; }

    }
    .wpb-tabs__content { background-color: #fff; display: grid; border: .1rem solid var(--clr-border); border-radius: 0 0 var(--br) var(--br);
        .tab-pane { grid-column: 1/-1; grid-row: 1/-1; pointer-events: none; opacity: 0; padding: 2rem; transition: opacity var(--tsd) var(--tsf);
            &.is-active { pointer-events: all; opacity: 1; }
            > * + * { margin-top: 1em; }
        }
    }
}

/*** ---------- Alignment ---------- ***/
.wpb-align--y-top .inner { -webkit-box-align: start; -ms-flex-align: start; align-items: start; }
.wpb-align--y-center .inner { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.wpb-align--y-bottom .inner { -webkit-box-align: end; -ms-flex-align: end; align-items: end; }

@media (min-width: 992px) {
    .wpb-align-left { order: -1; }
    .wpb-align-right { order: 999; }
}

/*** ---------- Badge ---------- ***/
.badge-group { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: .5rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.badge { 
    --fs: 1.2rem; 
    --lh: 1; 
    --p: .2rem .9rem; 
    --br: 3rem; 
    min-height: 2.7rem;

    --clr: #fff; --bg-clr: var(--clr-dark); --border: none; --box-shadow: none; 
    --hover-clr: var(--clr); --hover-bg-clr: var(--bg-clr); --hover-border: var(--border); --hover-box-shadow: var(--box-shadow);
    
    font-family: var(--font-secondary); font-weight: 600; display: inline-flex; align-items: center; font-size: var(--fs); line-height: var(--lh); padding: var(--p); color: var(--clr); background-color: var(--bg-clr); border-radius: var(--br); border: var(--border); box-shadow: var(--box-shadow); text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function); transition-property: color, background-color, border-color, box-shadow; 
    
    &:hover { color: var(--hover-clr); background-color: var(--hover-bg-clr); border: var(--hover-border); box-shadow: var(--hover-box-shadow); }

    &.badge--large { --p: .5rem 1.6rem; min-height: 3.6rem; }

    /* Badge variations */
    &.badge--primary { --clr: #fff; --bg-clr: var(--clr-primary); }
    &.badge--primary-10 { --clr: var(--clr-text); --bg-clr: var(--clr-primary-10); }
    &.badge--white { --clr: var(--clr-dark); --bg-clr: #fff; }
    &.badge--haccp { background: url('/app/themes/wux-theme/assets/img/certifications/haccp.png') no-repeat 1.6rem center #fff; background-size: 2rem; padding-left: 4rem; }

    @media (min-width: 768px) {
        --fs: 1.4rem; 
        --p: .5rem 1.2rem; 
        min-height: 3.1rem;
    }
}

/*** ---------- backdrop ---------- ***/
.wpb-backdrop { background-color: rgba(0,0,0,.3); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1010; opacity: 0; pointer-events: none; transition: opacity var(--ts-25) ease; 
    &.active { opacity: 1; pointer-events: all; }
}  

/*** ---------- Breadcrumb ---------- ***/
.wpb-breadcrumbs { --clr: var(--clr-contrast, var(--clr-text)); --clr-icon: var(--clr-primary); --fs: 1.4rem; display: inline-flex; min-width: 0; width: 100%; max-width: min(70rem, 100%); padding: 0.4rem 0;
    & + :is(h1, h2, h3){ --mt: clamp(1.5rem, 1.75vw, 2rem); }

    :is(span, a) { display: flex; align-items: center; color: var(--clr); text-decoration: none !important; font-size: var(--fs); font-weight: 500; line-height: 1.6; }
    .breadcrumb_last { display: block; white-space: nowrap; min-width: 0; text-overflow: ellipsis; overflow: hidden; color: var(--clr); font-weight: 500; }
    a{ transition: opacity var(--ts-duration) ease;
        &:not(.btn) { color: var(--clr); }
        &:hover { text-decoration: underline !important; }
    }
    i{ margin-bottom: .25rem;
        &.fa-home { font-size: 1.1rem; }
        &.fa-chevron-right { font-size: 1rem; line-height: 0; color: var(--clr-icon); width: fit-content; }
    }
    > span { display: flex; column-gap: .7rem; overflow: hidden; white-space: nowrap; min-width: 0; }
    > span > span{ text-wrap: nowrap; }
}

/*** ---------- Social media ---------- ***/
.wpb-social-media {
    --br: 50%; 
    --clr: #FFFF; 
    --bg-clr: var(--clr-primary); 
    --border: none; 
    --box-shadow: none; 
    --hover-clr: #FFFF; 
    --hover-bg-clr: var(--clr-dark); 
    --hover-border: var(--border); 
    --hover-box-shadow: var(--box-shadow); 
    --focus-clr: var(--hover-clr); 
    --focus-bg-clr: var(--hover-bg-clr); 
    --focus-border: var(--hover-border); 
    --focus-box-shadow: var(--hover-box-shadow); 
    --active-clr: var(--focus-clr); 
    --active-bg-clr: var(--focus-bg-clr); 
    --active-border: var(--focus-border); 
    --active-box-shadow: var(--focus-box-shadow); 
    --size: 3.2rem;

    display: flex; flex-wrap: wrap; column-gap: .8rem; row-gap: .8rem;

    a { background-color: var(--bg-clr); border-radius: var(--br); text-decoration: none; width: var(--size); height: var(--size); min-width: var(--size); display: inline-grid; place-items: center; transition: background-color var(--ts-duration) ease-in-out;
        i { color: var(--clr); font-size: .9em; transition: color var(--ts-duration) ease-in-out; }
        &:hover { background-color: var(--hover-bg-clr)!important; border: var(--hover-border)!important; box-shadow: var(--hover-box-shadow)!important;
            i { color: var(--hover-clr); }
        }
        &:focus { background-color: var(--focus-bg-clr)!important; border: var(--focus-border)!important; box-shadow: var(--focus-box-shadow)!important; 
            i { color: var(--focus-clr); }
        }
        &:active { background-color: var(--active-bg-clr)!important; border: var(--active-border)!important; box-shadow: var(--active-box-shadow)!important; 
            i { color: var(--active-clr); }
        }
    }
}

/*** ---------- Modal ---------- ***/
.modal { 
    --br: 1.6rem; 
    --p: 2rem; 
    --backdrop-clr: rgba(0,0,0,.7); 
    
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; pointer-events: none; padding: 2rem 0; background-color: var(--backdrop-clr); display: none; justify-content: center; align-items: center; transition: opacity var(--ts-duration) ease-in-out; z-index: 1090; 

    .close-modal { --size: 3.6rem; --clr: var(--clr-dark); --hover-clr: #fff; --bg-clr: var(--clr-secondary); --hover-bg-clr: var(--clr-primary); width: var(--size); height: var(--size); font-size: 1.2rem; border: none; display: flex; justify-content: center; align-items: center; position: absolute; top: 2rem; right: 2rem; border-radius: 50%; background-color: var(--bg-clr); cursor: pointer; transition: background-color var(--ts-duration) ease-in-out;
        i { color: var(--clr); transition: color var(--ts-duration) var(--ts-function); }
        &:hover { background-color: var(--hover-bg-clr);
            i { color: var(--hover-clr); }
        }
    }

    .modal-dialog { display: flex; flex-direction: column; border-radius: var(--br); width: 100%; height: auto; max-height: 90vh; transform: translateY(5rem); transition: transform var(--ts-25) ease; background-color: #fff; overflow: hidden; 
        .modal-dialog__header { display: flex; justify-content: space-between; align-items: center; padding: var(--p); background-color: #fff; font-family: inherit; 
            .modal-title { font-size: 2rem; margin: 0; } 
        }    
        .modal-dialog__body { background-color: #fff; padding: var(--p); overflow-y: auto; overflow-x: hidden; 
            &::-webkit-scrollbar { width: .6rem; }
            &::-webkit-scrollbar-track { background: transparent; } 
            &::-webkit-scrollbar-thumb { background: var(--clr-primary); border-radius: 2rem; }
        }
        .modal-dialog__footer { display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-top: 1px solid #E4E9EA; background-color: #fff; padding: var(--p); z-index: 2; margin-top: auto; }
    }
    
    &.show { display: flex; opacity: 1; pointer-events: all; 
        .modal-dialog { transform: translateY(0); }
    }

    &.modal--download { 
        .modal-dialog__body { padding: 0; }
        .modal-dialog__description { padding: var(--p); 
            figure { min-width: 0; width: 0; height: 0; object-fit: contain; 
                img { width: 100%; height: 100%; object-fit: contain; }

                &:has(img) { min-width: 18rem; width: 18rem; height: 16rem; }
            }
            .wpb-text {
                h2 { --fs: clamp(2rem, 3vw, 3.2rem); }
            }
        }
        .modal-dialog__form { padding: var(--p); background-color: var(--clr-secondary);
            .form-title { font-size: clamp(2rem, 4vw, 2.4rem); font-family: var(--font-secondary); display: block; line-height: 1.1; font-weight: 600; }
            .form-description { display: block; line-height: 1.7; margin-top: .5em; }
            .gform_wrapper { margin-top: 2.4rem; }
        }
    }

    &.modal--productsheet {
        .close-modal { --bg-clr: #fff; }
        .modal-dialog__body { background-color: var(--clr-secondary); }
        .modal-dialog__form { background-color: var(--clr-secondary);
            .form-title { font-size: clamp(2rem, 4vw, 2.4rem); font-family: var(--font-secondary); display: block; line-height: 1.1; font-weight: 600; padding-right: 3.6rem; }
            .form-description { display: block; line-height: 1.7; margin-top: .5em; padding-right: 3.6rem;  }
            .gform_wrapper { margin-top: 1em; }
        }
    }

    &.modal--request-info { 
        .modal-dialog__body { padding: 0; }

        .modal-dialog__product { padding: var(--p); display: flex; flex-direction: column; align-items: start;
            .modal-subtitle { font-family: var(--font-secondary); font-size: clamp(2rem, 4vw, 2.4rem); line-height: 1.1; font-weight: 600; margin-top: .5em; }
            .product-image { margin-top: 2em; width: 100%; max-width: 32rem; margin-inline: auto; }
            .wpb-user { --profile-size: 5rem; width: 100%; border-top: 1px solid var(--clr-border); padding-top: 2.4rem; margin-top: auto; }            
        }
        .modal-dialog__form { padding: var(--p); background-color: var(--clr-secondary);
            .form-title { font-size: clamp(2rem, 4vw, 2.4rem); font-family: var(--font-secondary); display: block; line-height: 1.1; font-weight: 600; }
            .form-description { display: block; line-height: 1.7; margin-top: .5em; }
            .gform_wrapper { margin-top: 2.4rem; }
        }
    }

    &.modal--productgallery { --p: 0; overflow-y: auto; align-items: start; padding: 0;
        .container { height: 100%; }
        .close-modal { z-index: 2; top: 1.8rem; right: 1.8rem; }
        .modal-dialog { max-height: 100%; height: 100%; background-color: transparent; border-radius: 0; }
        .modal-dialog__body { background-color: transparent; padding: 1.8rem 7.8rem 1.8rem 1.8rem; -webkit-scrollbar: none; scrollbar-width: none; }
        .modal-dialog__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 1rem;
            figure {
                img { border-radius: 1rem; }
                &.is-horizontal { grid-column: span 2; }
            }
        }
    }

    &.modal--more-info { 
        .close-modal { --bg-clr: var(--clr-secondary); }
        .modal-dialog__body { padding: 0; }
        .modal-dialog__product-specs { padding: var(--p); padding-right: 7.2rem; background-color: var(--clr-secondary);
            .modal-title { font-size: clamp(2rem, 4vw, 3.2rem); font-family: var(--font-secondary); display: block; line-height: 1.1; font-weight: 600; }
            .modal-description { display: block; opacity: .5; margin-top: .5em; }
            table { margin-top: 3.2rem;
                tbody {
                    tr {
                        td { font-size: 1.4rem; padding: 1rem;
                            &:first-of-type { padding-left: 0; font-weight: 400; }
                            &:last-of-type { padding-right: 0; font-weight: 500; text-align: right; }
                        }
                    }
                }
            }
        } 
        .modal-dialog__product { padding: var(--p); display: flex; flex-direction: column;
            > figure > img { max-height: 24rem; object-fit: contain; margin-block: 1.2rem; }
            > * + * { margin-top: 1.6em; }
            .btn-group { margin-top: auto; }
            .wpb-user { --profile-size: 5rem; --bg-clr: var(--clr-primary-10); }   
        }
    }

    &.modal--video { --p: 0; overflow-y: auto; align-items: start; padding: 0;
        .container { height: 100%; display: flex; align-items: center; }
        .close-modal { z-index: 2; top: 1.8rem; right: 1.8rem; }
        .modal-dialog { max-height: 100%; height: fit-conent; background-color: transparent; border-radius: 0; padding: 1.8rem 7.8rem 1.8rem 1.8rem; }
        .modal-dialog__body { --br: 1rem; padding: 0; position: relative; aspect-ratio: 16/9; background-color: transparent; overflow: hidden; 
            .video-modal__container { width: 100%; height: 100%; border-radius: var(--br); overflow: hidden; position: relative; z-index: 1; background-color: #000;
                video { width: 100%; height: 100%; object-fit: contain; }
            }
            .video-modal__loader { --spinner-size: clamp(4rem, 5vw, 6rem); border-radius: var(--br); overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; place-items: center; background-color: rgba(0,0,0); z-index: 5; 
                &.is-loading { display: grid; }
                .video-modal__spinner { width: var(--spinner-size); height: var(--spinner-size); border-radius: 50%; border: clamp(.3rem, .3vw, .4rem) solid rgba(255,255,255,.2); border-top-color: var(--clr-primary); animation: rotate 1.5s linear infinite; }
            }
        }
    }
}

@media (max-width: 575.98px) {
    .modal { align-items: end; padding: 0;
        .container { padding: 0; }
        .modal-dialog { border-radius: 1.6rem 1.6rem 0 0; max-height: 90vh; }
    }
}
@media (max-width: 765.98px) {
    .modal { 

        &.modal--video {  
            .close-modal { top: 0;  }
            .modal-dialog { padding: 4.8rem 1.8rem 1.8rem 1.8rem; }
        }
    }
}
@media (min-width: 768px) {
    .modal {
        &.modal--download-small { --p: 6rem; }
    }
}

@media (min-width: 992px) {
    .modal { --p: 3.2rem; 
        &.modal--download .modal-dialog__body { display: grid; grid-template-columns: 3fr 2fr; }
        &.modal--request-info .modal-dialog__body { display: grid; grid-template-columns: 3fr 2fr; }
        &.modal--more-info {
            .modal-dialog__body { display: grid; grid-template-columns: 3fr 2fr; }
            .modal-dialog__product-specs { padding-right: var(--p); }
        }
    }
}

@media (min-width: 1200px) {
    .modal {
        &.modal--download { --p: 4.8rem; }
        &.modal--request-info { --p: 4.8rem;
            .modal-dialog__product { padding: 3.2rem; }
        }
        &.modal--more-info { --p: 4.8rem; }
    }
}

@media (min-width: 1400px) {
    .modal {
        &.modal--download { --p: 6rem; }
        &.modal--request-info { --p: 6rem; }
        &.modal--more-info { --p: 6rem; 
            .modal-dialog__product { padding: 4.8rem; }
        }
    }
}


/*** ---------- Tooltips ---------- ***/
.wpb-tooltip { --bg: rgb( 255,255,255); position: absolute; pointer-events: none; opacity: 0; background-color: var(--bg); color: inherit; font-size: 1.3rem; line-height: 2rem; padding: .5rem 1rem; border-radius: .5rem; z-index: 9999; box-shadow: 0 0 .75rem .25rem rgba(0,0,0,.1);
    &::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 .5rem .5rem .5rem; border-color: transparent transparent var(--bg) transparent; bottom: 100%; transform: translateX(-50%); left: 50%; }

    /* Tooltip variations */
    &.wpb-tooltip--left::after { border-width: .7rem 0 .7rem .7rem; border-color: transparent transparent transparent var(--bg); top: 50%; transform: translateY(-50%); left: calc(100% - 1px); }
    &.wpb-tooltip--right::after { border-width: .7rem .7rem .7rem 0; border-color: transparent var(--bg) transparent transparent; top: 50%; transform: translateY(-50%); right: calc(100% - 1px); left: auto; }
    &.wpb-tooltip--top::after { border-width:  .5rem .5rem 0 .5rem; border-color: var(--bg) transparent transparent transparent; top: 100%; transform: translateX(-50%); left: 50%; }

}
.wpb-tooltip.show { opacity: 1; }

/*** ---------- Dropdowns ---------- ***/
.wpb-dropdown { position: relative; 

    .wpb-dropdown__toggle { display: flex; align-items: center; column-gap: .6rem; font-family: var(--font-primary); font-size: 1.4rem; font-weight: 500; border: none; background: transparent;
        i.fa-chevron-down { color: var(--clr-primary); }
    }

    .wpb-dropdown__menu { display: block; z-index: 850; opacity: 0; pointer-events: none; min-width: 10rem; border-radius: .6rem; position: absolute; top: calc(100% + .5rem); left: 0; background-color: #fff; box-shadow: 0 0 2rem rgb(21, 47, 51, .2); padding: 1rem; transition: opacity var(--ts-duration) ease-in-out; 
        ul { list-style: none; 
            .dropdown-item { white-space: nowrap; display: flex; gap: .5rem; text-decoration: none; }
        }
    }
    .wpb-dropdown__menu-right { left: auto; right: 0; }
    .wpb-dropdown__toggle[aria-expanded="true"] + .wpb-dropdown__menu { opacity: 1; pointer-events: all; }  

    &:has(.wpb-dropdown__menu) {
      .wpb-dropdown__toggle { cursor: pointer; }
    }

    /* Dropdown variations */
    &.wpb-dropdown__left {
        .wpb-dropdown__menu { top: 0; right: calc(100% + .5rem); left: auto; } 
        .wpb-dropdown__toggle i { order: -1; transform: rotate(90deg); }
    } 
    &.wpb-dropdown__right {
        .wpb-dropdown__menu { top: 0; left: calc(100% + .5rem); right: auto; } 
        .wpb-dropdown__toggle i { order: 9999; transform: rotate(-90deg); }
    }

    &:is(.wpb-dropdown--wpml, .wpb-dropdown--topmenu) { --wpml-pad-x: 1.2rem; --wpml-pad-y: 1.2rem; --wpml-radius: 1.2rem; --wpml-shadow: 0 0 2.4rem rgb(21, 47, 51, .15);

        /* Card behind the toggle; the menu below completes the same card (clip-path keeps both shadows from overlapping at the seam) */
        &::before { content: ''; position: absolute; inset: calc(-1 * var(--wpml-pad-y)) calc(-1 * var(--wpml-pad-x)) 0; background-color: #fff; border-radius: var(--wpml-radius) var(--wpml-radius) 0 0; box-shadow: var(--wpml-shadow); clip-path: inset(-4rem -4rem 0 -4rem); opacity: 0; pointer-events: none; transition: opacity var(--ts-duration) ease-in-out; }
        &:has(.wpb-dropdown__toggle[aria-expanded="true"])::before { opacity: 1; }

        .wpb-dropdown__toggle { position: relative; color: var(--clr-text); font-weight: 600;
            .fa-globe { font-size: 1.6rem; }
            .fa-chevron-down { font-size: 1rem; line-height: 0; margin-bottom: .2em; transition: transform var(--ts-15) ease-in-out; }

            &[aria-expanded="true"] {
                .fa-chevron-down { transform: rotate(180deg); }
            }
        }
        .wpb-dropdown__menu { min-width: 100%; top: 100%; left: calc(-1 * var(--wpml-pad-x)); right: calc(-1 * var(--wpml-pad-x)); padding: var(--wpml-pad-y) var(--wpml-pad-x) var(--wpml-pad-y); background-color: #fff; border-top: 1px solid var(--clr-border); border-radius: 0 0 var(--wpml-radius) var(--wpml-radius); box-shadow: var(--wpml-shadow); clip-path: inset(0 -4rem -4rem -4rem);
            ul { display: flex; flex-direction: column; gap: .8rem; }
            .dropdown-item { display: flex; align-items: center; gap: 1rem; color: var(--clr-text); line-height: 1; text-transform: uppercase; font-size: 1.4rem; font-weight: 600; transition: opacity var(--ts-duration) ease-in-out;
                img { width: 2.4rem; height: 1.6rem; min-width: 2.4rem; border-radius: .3rem; object-fit: cover; }

                &:hover { opacity: .7; }
            }   
        }
    }

    /* Menu grows with its (longer) items instead of matching the toggle width */
    &.wpb-dropdown--topmenu {
        .wpb-dropdown__toggle { font-family: var(--font-secondary); }
        .wpb-dropdown__menu { right: auto; min-width: calc(100% + 2 * var(--wpml-pad-x));
            ul {
                gap: 1.2rem;
                .dropdown-item { text-transform: none; }
            }
        }
    }
}

/*** ---------- Tables ---------- ***/
.wpb-table { overflow-x: auto; }
table { 
    --clr: var(--clr-text); 
    --border-clr: var(--clr-border); 
    --accent-bg-clr: transparent; 
    --hover-clr: var(--clr-text); 
    --hover-bg-clr: rgba(0, 0, 0, 0.075); 
    --border-width: .1rem; 
    
    border-collapse: collapse; width: 100%; color: var(--clr); vertical-align: top; border-color: var(--border-clr); border-spacing: 0; margin: 0 0 1.41575em; }
table td, table th { padding: 1em 1.41575em; text-align: left; vertical-align: top; border-color: inherit; border-style: solid; border-width: 0; border-bottom-width: var(--border-width); }
table thead { vertical-align: bottom; }

/*** ---------- Filters ---------- ***/
.wpb-toolbar .container { display: grid; grid-template-columns: 1fr; }

@media (width > 576px) {
    .wpb-toolbar .container { grid-template-columns: 1fr 20rem; }
}

/*** ---------- Pagination ---------- ***/
.wpb-pagination { --size: 4rem; --p: 0; --clr: var(--clr-text); --bg-clr: transparent; --border: 1px solid transparent; --br: .4rem; --hover-clr: #fff; --hover-bg-clr: var(--clr-primary); --hover-border: 1px solid var(--hover-bg-clr); --active-color: var(--hover-clr); --active-bg-clr: var(--hover-bg-clr); --active-border: var(--hover-border); position: relative; display: flex; justify-content: center; 
    .has-prev-next { padding-left: var(--size); padding-right: var(--size); } 
    ul { position: relative; --gap: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--gap); padding-top: 3.2rem; }
    li {
        > * { width: var(--size); height: var(--size); min-width: var(--size); display: inline-grid; place-items: center; font-weight: 600; font-size: 1.6rem; line-height: 0; padding: var(--p); color: var(--clr); background-color: var(--bg-clr); border-radius: var(--br); border: var(--border); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; transition-property: color, background-color, border-color; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function); 
            i { font-size: 1.4rem; pointer-events: none; }    
        }
        > *:hover, > *:focus, > *:active { color: var(--hover-clr); background-color: var(--hover-bg-clr); border: var(--hover-border); }
        > *:hover i { --clr: var(--hover-clr) }
        > *.current { color: var(--active-color); background-color: var(--active-bg-clr); border: var(--active-border); }
        .page-number__prev { position: absolute; left: 0; }
        .page-number__next { position: absolute; right: 0; }
        > *.page-number__dots { pointer-events: none!important; border: none; width: 3.2rem; min-width: 3.2rem; padding-inline: 0; opacity: .3; }
    }
}

/*** ---------- Offcanvas ---------- ***/
.wpb-offcanvas { --p: 1.8rem; width: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: auto; flex-direction: column; z-index: 9999; background-color: #fff; transform: translate3d(100%, 0, 0); transition: transform var(--ts-35) ease; 
    &.wpb-offcanvas--left { transform: translate3d(-100%, 0, 0); top: 0; right: auto; bottom: 0; left: 0; }
    &.is-active { pointer-events: all; transform: translate3d(0%, 0, 0); }
    
    .wpb-offcanvas__header { display: flex; justify-content: space-between; align-items: center; padding: var(--p); }
    .wpb-offcanvas__body { padding: var(--p); flex-grow: 1; overflow-y: auto; }
    .wpb-offcanvas__footer { display: grid; padding: var(--p); }

}
.btn[data-target="#productFilters"] { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 600; }
.wpb-offcanvas.wpb-offcanvas--filters form > * + * { margin-top: 2rem; }

@media (min-width: 576px) {
    .wpb-offcanvas { max-width: 45rem; }
}

@media (min-width: 992px) {
    .wpb-offcanvas.wpb-offcanvas--filters { --p: 0; display: flex!important; position: static; transform: none; z-index: 1; }
    .wpb-offcanvas.wpb-offcanvas--filters .wpb-offcanvas__header,
    .wpb-offcanvas.wpb-offcanvas--filters .wpb-offcanvas__footer { display: none; }
    .btn[data-target="#productFilters"] { display: none; }
}

/* Contact links */
.contact-link { --clr: var(--clr-contrast, var(--clr-text)); --icon-clr: var(--clr-primary); --fs: clamp(1.4rem, 1.5vw, 1.6rem); display: flex; text-decoration: none; align-items: center; gap: .8rem; transition: opacity var(--ts-duration) ease;
    i { color: var(--icon-clr); font-size: .8em; }
    strong { display: block; font-size: var(--fs); font-weight: 500; color: var(--clr); }
    &:hover { opacity: .7; }
}

/*** ---------- Social share icons ---------- ***/
.social-share-icons { --size: 3.2rem; --fs: 1.3rem; --bg-clr: var(--clr-primary); --clr: #FFFF; --border: 1px solid transparent; --hover-bg-clr: var(--clr-dark); --hover-clr: #FFFF; --hover-border: 1px solid var(--hover-bg-clr); display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; 
    a { display: inline-grid; place-items: center; width: var(--size); height: var(--size); min-width: var(--size); border-radius: 50%; background-color: var(--bg-clr); color: var(--clr); border: var(--border); font-size: var(--fs); text-decoration: none; transition: background-color var(--ts-duration) ease, color var(--ts-duration) ease, border var(--ts-duration) ease;  
        &:hover { background-color: var(--hover-bg-clr); color: var(--hover-clr); border: var(--hover-border); }        
    }
}

/*** ---------- Archive ---------- ***/
.wpb-archive { --gc: 1; --gap: 2.4rem; --offset: clamp(2.4rem, 2.8vw, 3.2rem); padding-top: var(--pt, var(--offset));
    .wpb-archive__header { padding-bottom: var(--offset);
        .container { display: flex; align-items: center; justify-content: end; flex-wrap: wrap; gap: 1.2rem; }
    }
    .wpb-archive__body {
        .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); }
    }

}

.wpb-category-buttons { --gap: .8rem; 
    .container { display: flex; flex-wrap: wrap; gap: var(--gap); }
}
.wpb-category-blocks { --gc: 1; --gap: 1rem;
    .wpb-category-blocks__block {
        .wpb-category-blocks__header { --offset: clamp(2rem, 2.4vw, 3.2rem); padding-bottom: var(--offset);
            .wpb-text{ max-width: clamp(60rem, 70vw, 80rem); 
                h2 { --fs-h2: clamp(2rem, 2.4vw, 3.2rem); }
            }
        }
        .wpb-category-blocks__body { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); }
        .wpb-category-blocks__footer { --offset: clamp(2rem, 2.4vw, 3.2rem); padding-top: var(--offset); }

        &.wpb-category-blocks__block--compact { --p: 2rem; --br: 1rem; --border: 1px solid var(--clr-border); --gc: 1;
            .wpb-category-blocks__inner { padding: var(--p); border-radius: var(--br); border: var(--border); }
        }
    }
    @media (max-width: 575.98px) {
        .wpb-category-blocks__footer .btn { width: 100%; }
    }
}

@media (min-width: 576px) {
    .wpb-category-blocks { --gc: 2; 
        .wpb-category-blocks__block.wpb-category-blocks__block--compact { --p: 3.2rem; --gap: 2rem; --gc: 2; }
    }
}
@media (min-width: 768px) {
    .wpb-archive { --gc: 2; }
    .wpb-category-blocks { --gc: 3; --gap: 1rem; 
        .wpb-category-blocks__block.wpb-category-blocks__block--compact { --p: 4.8rem; --gap: 2.6rem; }
    }
}
@media (min-width: 992px) {
    .wpb-archive { --gc: 3; }
    .wpb-category-blocks { --gap: 2rem; 
        .wpb-category-blocks__block.wpb-category-blocks__block--compact { --p: 5.8rem; --gc: 3; }
    }
}
@media (min-width: 1200px) {
    .wpb-category-blocks { 
        .wpb-category-blocks__block.wpb-category-blocks__block--compact { --p: 6rem; --gap: 3.2rem; }
    }
}
@media (min-width: 1400px) {
    .wpb-category-blocks { 
        .wpb-category-blocks__block.wpb-category-blocks__block--compact { --p: 9rem; --gap: 4.8rem; }
    }
}

/*** ---------- Single ---------- ***/
.wpb-content { --gap: 2.4rem; --gtc: minmax(0, 1fr); 
    .container { display: grid; grid-template-columns: var(--gtc); gap: var(--gap); }
    .wpb-content__main {  
        .content-section:last-child { padding-bottom: 0; }
    }
    .wpb-content__sidebar {
        .wpb-page-summary{ padding-bottom: clamp(2.4rem, 3.2vw, 4.8rem); } 

        .wpb-content__sidebar-posts {
            h2 { --fs: clamp(2rem, 3vw, 3.2rem); padding-bottom: 2rem; }
            .card-container + .card-container { margin-top: clamp(1.8rem, 2vw, 2.4rem); }
        }
        .card-container:has(.wpb-card--form--single-newsletter) { padding-top: clamp(1.8rem, 2.4vw, 3rem); }
    }
}

@media (min-width: 768px) {
    .wpb-content{ --gap: 4.8rem; --gtc: minmax(0, 1fr) 32rem; 
        .wpb-content__sidebar .wpb-content__sidebar-sticky { position: sticky; top: 20rem; }
    }
}
@media (min-width: 992px) {
    .wpb-content{ --gap: 6.4rem; --gtc: minmax(0, 1fr) 36rem; }
}
@media (min-width: 1200px) {
    .wpb-content{ --gap: clamp(8rem, 6vw, 12rem); --gtc: minmax(0, 1fr) clamp(40rem, 32vw, 48rem); }
}

.content-section {
    h2 { --fs-h2: clamp(2rem, 3vw, 3.2rem); }
    h3 { --fs-h3: clamp(1.8rem, 2vw, 2.2rem); }

    .content-section__header { padding-bottom: clamp(1.6rem, 2vw, 2.4rem); }

    &.content-section--intro {
        .wpb-text { 
            h1 { --fs-h1: clamp(2.4rem, 3.2vw, 4.8rem); }
            p { font-size: clamp(1.5rem, 1.6vw, 1.8rem); font-weight: 600; }
        }
    }
    &.content-section--author { border-top: 1px solid var(--clr-border); }
    &.content-section--share { border-top: 1px solid var(--clr-border);
        .content-section__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
    }
    &.content-section--text-media { container: text-media-single / inline-size; 
        .content-section__inner { --gtc: minmax(0, 1fr); grid-template-columns: var(--gtc); display: grid; gap: clamp(2.4rem, 3vw, 4.8rem); 
            .wpb-image { height: fit-content; }

            &.content-section__inner--center { align-items: center; }
            &.content-section__inner--bottom { align-items: end; }
        }
        @media (max-width: 991.98px) {
            @container text-media-single (min-width: 46rem) { 
                .content-section__inner {--gtc: minmax(0, 1fr) minmax(0, 1fr); }
            }
        }
        @media (min-width: 992px) {
            @container text-media-single (min-width: 62rem) { 
                .content-section__inner {--gtc: minmax(0, 1fr) minmax(0, 1fr); }
            }
        }
    }
    &.content-section--quote {
        .wpb-card.wpb-card--quote { --p: clamp(2rem, 3.2vw, 4.8rem); 
            .card-quote { --fs: clamp(1.6rem, 1.8vw, 2rem); max-width: 60rem; line-height: 1.4; }
            .wpb-card__asset {  top: -12rem; right: -16rem; 
                i { --w: clamp(30rem, 32vw, 38rem); }
            }
        }
    }
    &.content-section--products {
        .content-section__body { display: flex; flex-direction: column; gap: 1rem; }
    }
    &.content-section--form {
        .wpb-card { --p: clamp(2rem, 3.2vw, 4.8rem);
            .wpb-card__header { padding: var(--p) var(--p) clamp(2rem, 2.8vw, 3.6rem) var(--p); }
            .gform_wrapper.gravity-theme {
                .gform_footer { justify-content: space-between; position: relative;
                    p.form-privacy-notice { text-align: end; max-width: 26rem; }
                    [id^="gform_ajax_spinner"] { --size: 1.2rem; --border-color: #FFFF; position: absolute; top: 2.5rem; left: -.5rem; }
                }
            }
        }
        @container card-container (max-width: 54rem) {  
            .wpb-card .gform_wrapper.gravity-theme .gform_footer {  
                button[type="submit"] { width: 100%; }
                p.form-privacy-notice { max-width: 100%; text-align: center; }
            }
        }
    }
}

/*** ---------- Page summary ---------- ***/
.wpb-page-summary{
    .wpb-page-summary__title{ --fs: clamp(2rem, 2.4vw, 3.2rem); font-size: var(--fs); font-weight: 600; color: var(--clr-text); line-height: 1; padding-bottom: 2rem; }
    .wpb-page-summary__main{ 
        ul{ display: flex; flex-direction: column; gap: clamp(.8rem, 1vw, 1.2rem); list-style: none; padding-left: clamp(1.2rem, 1.6vw, 2rem); border-left: 1px solid var(--clr-border);
            .wpb-page-summary__link{ display: flex; gap: .6rem; text-decoration: none; color: var(--clr-text); transition: color var(--ts-duration) ease;
                .wpb-page-summary__link-text{ font-size: clamp(1.4rem, 1.5vw, 1.6rem); font-weight: 500; line-height: 1.2; color: var(--clr-text); transition: color var(--ts-duration) ease, text-shadow var(--ts-duration) ease; }

                &:hover {
                    .wpb-page-summary__link-text { --clr-text: var(--clr-primary); }
                }
                &.is-active {
                    .wpb-page-summary__link-text { text-shadow: .2px 0 0 var(--clr-text), -0.2px 0 0 var(--clr-text); }
                }
            }
        }
    }
}

/*** ---------- Aspect ratio ---------- ***/
.wpb-ratio { --wpb-aspect-ratio: 100%; position: relative; width: 100%;
    > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    > img { object-fit: cover; } 

    &::before { display: block; padding-top: var(--wpb-aspect-ratio); content: ""; }

    &.wpb-ratio--21x6 { --wpb-aspect-ratio: 31%; }
    &.wpb-ratio--21x9 { --wpb-aspect-ratio: 42.8571428571%; }
    &.wpb-ratio--16x9 { --wpb-aspect-ratio: 56.25%; }
    &.wpb-ratio--20x27 { --wpb-aspect-ratio: 135%; }
    &.wpb-ratio--1x1 { --wpb-aspect-ratio: 100%; }
    &.wpb-ratio--4x3 { --wpb-aspect-ratio: 75%; }
    &.wpb-ratio--14x9 { --wpb-aspect-ratio: 64.28571428571429%; }
}

/*** ---------- User ---------- ***/
.wpb-user{ --profile-size: clamp(4rem, 6vw, 7rem); --fs: 1.4rem; --title-fs: clamp(1.6rem, 1.7vw, 1.8rem); --gap: clamp(1.2rem, 1.4vw, 2rem); --bg-clr: var(--clr-light); --clr: var(--clr-contrast, var(--clr-heading)); display: flex; align-items: center; gap: var(--gap);
    .wpb-user__profile{ width: var(--profile-size); height: var(--profile-size); min-width: var(--profile-size); min-height: var(--profile-size); background-color: var(--bg-clr); border-radius: 50%; overflow: hidden;
        img { width: 100%; height: 100% !important; object-fit: cover; }
    }
    .wpb-user__text{ display: flex; flex-direction: column; gap: .6rem; 
        .wpb-user__title { color: var(--clr); font-size: var(--title-fs); line-height: 1.2; 
            strong { font-weight: 600; }
        }
        .wpb-user__description { --clr: var(--clr-contrast, var(--clr-heading)); color: var(--clr); font-size: var(--fs); line-height: 1.2; 
            .wpb-user__name { font-weight: 600; }
            .wpb-user__job-description { font-weight: 400; color: var(--clr-contrast-text, rgb(var(--clr-text-rgb), .75)); 
                &::before { --size: .4rem; --offset: 1rem; --clr: var(--clr-primary); content: ''; display: inline-block; width: var(--size); height: var(--size); border-radius: 50%; background-color: var(--clr); margin: 0 var(--offset); vertical-align: middle; }
            }
        }
    }
    .wpb-user__quote p{ color: var(--clr); font-size: clamp(1.4rem, 1.5vw, 1.6rem); }

    .wpb-bg-clr--light &{ --bg-clr: #FFFF; }

    &.wpb-user--author { --profile-size: 3.2rem; --title-fs: clamp(1.4rem, 2vw, 1.6rem); }
    &.wpb-user--team, &.wpb-user--author { --profile-size: 5rem; --fs: clamp(1.4rem, 1.5vw, 1.6rem); --gap: clamp(1rem, 1vw, 1.6rem);
        .wpb-user__text .wpb-user__description{ display: flex; flex-direction: column; 
            .wpb-user__job-description::before{ display: none; }
        }
    }
}

/*** ---------- Subtitle ---------- ***/
.wpb-subtitle { --clr-subtitle: var(--clr-primary); --fs: clamp(1.8rem, 2vw, 2.4rem); --icon-size: clamp(1.1rem, 1.3vw, 1.75rem); --lh: 1.2; --gap: clamp(.75rem, .8vw, 1rem); display: inherit; font-size: var(--fs); font-weight: 600; line-height: var(--lh) !important; color: var(--clr-subtitle);
    i { font-size: var(--icon-size); margin-right: var(--gap); margin-top: clamp(.15rem, .2vw, .2rem); }

    /* a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: transparent; transition: text-decoration-color var(--ts-duration) ease;
        &:hover { text-decoration-color: currentColor; }
    } */

    .wpb-bg-clr--dark &{ --clr-subtitle: var(--clr-primary-60); }
    &:has(i) { display: inline-flex; }
    &:has(+ h2, + h3) { --fs: clamp(1.6rem, 1.7vw, 1.8rem); }

    & + *{ --mt: 1rem; }
}

/*** ---------- Lijst ---------- ***/
.wpb-list { --icon-size: 3.6rem; --icon-bg-clr: var(--clr-primary-10); --gap: clamp(1.2rem, 1.6vw, 1.6rem); --items-offset: clamp(1.8rem, 2vw, 2.8rem); list-style: none; padding-left: 0 !important;
    .wpb-text &{ --mt: clamp(2rem, 3vw, 4rem); }
    li { position: relative; padding-left: calc(var(--icon-size) + var(--gap)); display: flex; align-items: center;
        & + & { margin-top: var(--items-offset); }
        & > div * + * {margin-top: .4rem;}
    }

    &.wpb-list--ordered { counter-reset: li-count;
        li { counter-increment: li-count;
            &::before{ content: counter(li-count); position: absolute; left: 0; width: var(--icon-size); height: var(--icon-size); min-width: var(--icon-size); border-radius: 50%; background-color: var(--icon-bg-clr); display: inline-grid; place-items: center; font-weight: 600; font-size: 1.6rem; line-height: 0; }
        }
        .wpb-bg-clr--light &{ --icon-bg-clr: #FFFF; }
    }
    &.wpb-list--unordered { --icon-size: 1.2rem; --gap: clamp(.8rem, 1vw, 1.4rem); --icon-bg-clr: var(--clr-primary); --items-offset: clamp(.8rem, 1vw, 1.4rem);
        li::before{ content: ''; position: absolute; left: 0; width: var(--icon-size); height: var(--icon-size); min-width: var(--icon-size); border-radius: 50%; background-color: var(--icon-bg-clr); }
    }
}

/*** ---------- Statistic ---------- ***/
.wpb-statistic{ --fs: clamp(1.8rem, 1.8vw, 2rem); --title-fs: clamp(4.8rem, 5vw, 7.2rem); --title-clr: var(--clr-primary); display: flex; flex-direction: column; font-size: var(--fs); font-weight: 400; line-height: 1.2; 
    strong{ font-size: var(--title-fs); font-weight: 400; line-height: 1.2; color: var(--title-clr); }
}

/*** ---------- Logo ---------- ***/
.wpb-logo { --max-w: clamp(10rem, 10vw, 13rem); --max-h: clamp(4rem, 6vw, 5rem); --opacity: .2;
    img { width: var(--max-w); height: var(--max-h); object-fit: contain; opacity: var(--opacity); }
}

/*** ---------- Meta info ---------- ***/
.wpb-meta-info { --clr: rgb(var(--clr-dark-rgb), .75); --fs: clamp(1.4rem, 1.5vw, 1.6rem); --dot-size: .4rem; --gap: 1rem; gap: var(--gap); display: flex; align-items: center;
    .wpb-meta-info__item { font-size: var(--fs); font-weight: 400; color: var(--clr); line-height: 1.2;
        &:not(:first-child)::before { --clr: var(--clr-primary); content: ''; display: inline-block; width: var(--dot-size); height: var(--dot-size); border-radius: 50%; background-color: var(--clr); margin-right: var(--gap); vertical-align: middle; }
    }
}

/*** ---------- Assets ---------- ***/
.wpb-asset { --top: auto; --right: auto; --bottom: auto; --left: auto; width: var(--w); height: var(--h); min-width: var(--w); min-height: var(--h); position: absolute; top: var(--top); right: var(--right); bottom: var(--bottom); left: var(--left); pointer-events: none; z-index: 1;
    &.wpb-asset--droplet { --w: 50rem; --h: calc(var(--w) * .585); background: transparent;
        .wpb-asset__shape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
    }
}


/*** ---------- Uitgelichte klantcase ---------- ***/
.featured-case-container { container: featured-case-container / inline-size; }

.wpb-featured-case { --p: 3.2rem; --br: 1rem; --bg-clr: var(--clr-dark); --clr-text: #FFFF; --height: 48rem; border-radius: var(--br); background-color: var(--bg-clr); position: relative; display: block; text-decoration: none; overflow: hidden; 
    .wpb-featured-case__media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
        img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ts-duration) var(--ts-function), opacity 0.3s ease; }
        video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
        .js-video-poster { position: relative; z-index: 1; }
        .js-video-swap { z-index: 2; }
        &::before {  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(70deg, var(--bg-clr) 15%, rgba(var(--clr-dark-rgb), 0) 60%); z-index: 3; }
    }
    .wpb-featured-case__body { padding: var(--p); display: flex; flex-direction: column; position: relative; min-height: var(--height); max-width: calc(clamp(40rem, 50vw, 60rem) + (var(--p) * 2)); z-index: 3; height: 100%;
        .badge-group { margin-bottom: auto; }
        .wpb-featured-case__logo { --w: min(12.5rem, 100%); width: var(--w); height: auto; max-height: clamp(6rem, 7vw, 8rem); display: flex; margin-bottom: clamp(2rem, 2.4vw, 3.6rem); position: relative;
            img { width: 100%; height: auto; object-fit: contain; object-position: left; opacity: 0; }
        }
        /* White logo via CSS mask - avoids iOS filter performance issues */
        .wpb-featured-case__logo[style*="--logo-url"]::after { content: ''; position: absolute; inset: 0; background: #fff; -webkit-mask: var(--logo-url) no-repeat left / contain; mask: var(--logo-url) no-repeat left / contain; }
        .wpb-featured-case__quote { --fs: clamp(2.2rem, 2.6vw, 4rem); color: var(--clr-text); font-size: var(--fs); font-weight: 600; line-height: 1.2;
            &::before { content: '\201C'; font-size: var(--fs); line-height: 0; margin-left: calc(-1 * var(--fs) / 2.5); }
            &::after { content: '\201D'; }

            &:has(+ .wpb-featured-case__quote-author) { padding-bottom: clamp(1.6rem, 2.4vw, 3.2rem); }
        }
        .wpb-featured-case__quote-author { --fs: clamp(1.4rem, 1.5vw, 1.6rem); --fs-title: clamp(1.8rem, 1.8vw, 2rem); color: var(--clr-text); line-height: 1.3;
            p { font-size: var(--fs); 
                strong { font-size: var(--fs-title); font-weight: 600; }
            }
        }
        .wpb-featured-case__text {  
            .wpb-subtitle { --fs: clamp(1.6rem, 2vw, 2.2rem); margin-bottom: clamp(.8rem, 1vw, 1.6rem); }
            h3 { --fs-h3: clamp(2.4rem, 3.2vw, 4.8rem); color: var(--clr-text); }
        }
    }
    .wpb-featured-case__assets { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none;
        .wpb-icon--brandmark-outline { --w: 30rem; opacity: 1; position: absolute; top: calc(-1 * var(--w) / 2.4); right: calc(-1 * var(--w) / 1.9); z-index: 2;  }
        .wpb-asset--droplet { --w: clamp(80rem, 100vw, 150rem); --bottom: calc(-1 * var(--w) / 2.6); --right: calc(-1 * var(--w) / 3); opacity: .8; z-index: 1; transition: transform var(--ts-duration) var(--ts-function), opacity var(--ts-duration) var(--ts-function); }
        .wpb-play-button { position: absolute; top: 35%; right: 10%; z-index: 3; transition: transform var(--ts-duration) var(--ts-function); 
            i { transition: transform var(--ts-duration) var(--ts-function); }
        }
    }

    &:hover {
        .wpb-featured-case__media img { transform: scale(1.05); }
        .wpb-featured-case__assets {
            .wpb-asset--droplet { transform: scale(1.2); opacity: .6; }
            .wpb-play-button { transform: scale(1.05); 
                i { transform: scale(1.2); }
            }
        }
    }
}

@container featured-case-container (min-width: 40rem) { 
    .wpb-featured-case .wpb-featured-case__assets .wpb-play-button{ --size: 7.2rem; --icon-size: 1.8rem; }
}
@container featured-case-container (min-width: 52rem) { 
    .wpb-featured-case { --p: 4.8rem; --height: 56rem; 
        .wpb-featured-case__assets {
            .wpb-play-button{ --size: 10rem; --icon-size: 2rem; }
            .wpb-icon--brandmark-outline { --w: 52rem; }
        }
    }
}
@container featured-case-container (min-width: 80rem) { 
    .wpb-featured-case { --p: 6.4rem; --height: 64rem; 
        .wpb-featured-case__assets {
            .wpb-play-button{ --size: 14rem; --icon-size: 2.2rem; }
            .wpb-icon--brandmark-outline { --w: 64rem; }
        }
    }
}
@container featured-case-container (min-width: 120rem) { 
    .wpb-featured-case { --p: 9rem; --height: 72rem; 
        .wpb-featured-case__assets {
            .wpb-play-button{ --size: 17.6rem; --icon-size: 2.8rem; top: 30%; right: 10%; }
            .wpb-icon--brandmark-outline { --w: 84rem; }
        }
    }
}
@container featured-case-container (min-width: 140rem) { 
    .wpb-featured-case { 
        .wpb-featured-case__assets {
            .wpb-play-button{ right: 8%; } 
        }
    }
}

/*** ---------- Afspelen knop / Play ---------- ***/
.wpb-play-button{ 
    --size: 5.8rem; 
    --icon-size: 1.4rem; 
    --bg-clr: var(--clr-primary); 
    --clr: #fff; 
    width: var(--size); height: var(--size); min-width: var(--size); min-height: var(--size); border-radius: 50%; background-color: var(--bg-clr); color: var(--clr); display: inline-grid; place-items: center; cursor: pointer;
    
    i { font-size: var(--icon-size); }
}

/*** ---------- Team knop ---------- ***/
.team-button-container { --mt: clamp(2.4rem, 3.2vw, 4.8rem); container: team-button-container / inline-size; }

.wpb-team-button { 
    --profile-size: clamp(4.4rem, 4.6vw, 5rem); 
    --profile-bg-clr: var(--clr-beige); 
    --plus-clr: var(--clr-dark); 
    --clr: var(--clr-contrast, var(--clr-text)); 
    --plus-bg-clr: var(--clr-light); 
    --fs: clamp(1.5rem, 1.5vw, 1.6rem); 
    --overlap: -1rem; 
    --border: 2px solid var(--block-bg); 
    --gap: clamp(1.2rem, 1.4vw, 2rem);
    
    text-decoration: none; display: flex; align-items: center; column-gap: var(--gap); row-gap: 1.2rem; color: var(--clr);

    .wpb-team-button__members { display: flex; align-items: center;
        img { width: var(--profile-size); height: var(--profile-size); min-width: var(--profile-size); min-height: var(--profile-size); border-radius: 50%; object-fit: cover; border: var(--border); background-color: var(--profile-bg-clr); }
        .wpb-team-button__more { width: var(--profile-size); height: var(--profile-size); min-width: var(--profile-size); min-height: var(--profile-size); border-radius: 50%; background-color: var(--plus-bg-clr); color: var(--plus-clr); display: inline-grid; place-items: center; font-size: var(--fs); font-weight: 600; border: var(--border); line-height: 0; }
        > * + * { margin-left: var(--overlap); }
    }
    .wpb-team-button__text { display: flex; align-items: center; gap: clamp(.6rem, .8vw, 1.2rem); transition: opacity var(--ts-duration) ease;
        .wpb-team-button__label { font-size: var(--fs); font-weight: 600; line-height: 1; max-width: 20rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        i { font-size: .8em; margin-bottom: .2rem; }
    }

    .wpb-bg-clr--transparent & { --block-bg: #FFFF; }
    .wpb-bg-clr--light & { --profile-bg-clr: #FFFF; --plus-bg-clr: #FFFF; }
    .wpb-block--cta-banner & { --block-bg: var(--bg-clr, var(--clr-dark)); }

    &:hover .wpb-team-button__text { opacity: .8; }
}

@container team-button-container (max-width: 32rem) { 
    .wpb-team-button { flex-direction: column; align-items: start; 
        .wpb-team-button__text .wpb-team-button__label { max-width: 100%; }
    }
}


/*** ---------- Footer ---------- ***/
.wpb-footer { --p-y-small: 6rem; margin-top: auto; position: relative; overflow: hidden;
    .wpb-footer__menu { min-width: 14rem;
        .footer-menu__title { display: block; padding: 0 0 clamp(1.4rem, 1.6vw, 1.8rem) 0; font-size: 2rem; color: inherit; text-decoration: none; font-weight: 600; }
        ul { list-style: none; display: grid; column-gap: var(--gap);
            li a{ display: block; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: transparent; color: var(--clr-text); font-weight: 400; transition: color var(--ts-duration) ease, text-decoration-color var(--ts-duration) ease; line-height: 1.2; padding-block: .5rem;
                &:hover { color: var(--clr-primary); text-decoration-color: var(--clr-primary); }
            }
        }
    }
    .wpb-footer__sub-links { --fs: 1.4rem; display: flex; flex-wrap: wrap; column-gap: 2.4rem; row-gap: 1rem;
        * { color: var(--clr-text); font-size: var(--fs); opacity: 1; display: flex; column-gap: clamp(1.2rem, 1.8vw, 2.8rem); text-decoration: none; }
        a{ transition: color var(--ts-duration) ease; 
            &:hover{ color: var(--clr-primary); }
        }
    }

    .wpb-footer__top .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; 
        .wpb-footer__logo { --w: min(clamp(9.8rem, 13vw, 18.5rem), 100%); width: var(--w); height: auto; }
        .wpb-footer__social-media { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
            strong { font-family: var(--font-secondary); font-size: clamp(1.6rem, 1.8vw, 2rem); font-weight: 600; color: var(--clr-text); }
        }
    }
    .wpb-footer__main { --gtc: minmax(0, 1fr); --gap: 2.4rem; 
        .container { display: grid; grid-template-columns: var(--gtc); column-gap: 2rem; row-gap: 2rem; }
        .wpb-footer__menus { display: flex; row-gap: 3.2rem; column-gap: var(--gap); flex-wrap: wrap; container: menus-container / inline-size; }
    }
    .wpb-footer__authority { --p-y-large: clamp(3.2rem, 6vw, 12rem);
        .container{ display: flex; flex-direction: column; gap: 2.4rem; flex-wrap: wrap; 
            .wpb-subtitle { --fs: clamp(1.6rem, 2vw, 2.4rem); margin-inline: auto; }
        }
    }
    .wpb-footer__bottom { --p: clamp(2.4rem, 2.6vw, 2.8rem); padding: var(--p) 0; border-top: 1px solid var(--clr-border); 
        .container { display: flex; flex-direction: column; column-gap: 2rem; row-gap: 2rem; }
    }
    .wpb-footer__assets { --icon-size: clamp(40rem, 60vw, 80rem); position: absolute; top: calc(-1 * var(--icon-size) / 3.8); right: calc(-1 * var(--icon-size) / 2); pointer-events: none; z-index: 1;
        .wpb-icon { --w: var(--icon-size); opacity: 1; }

        .wpb-footer > *:not(&) { position: relative; z-index: 2; }
    }

    @container menus-container (max-width: 67rem) {
        .wpb-footer__main {
            .wpb-footer__menus .wpb-footer__menu { width: calc(50% - calc(var(--gap) / 2));
                &:first-child { width: 100%; 
                    ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                }
            }
        }
    }
    @media (max-width: 575.98px) {
        .wpb-footer__sub-links { flex-direction: column;}
    }
    @media (min-width: 768px) {
        .wpb-footer__main { --gap: 4.8rem; 
            .card-container { height: fit-content; }
        }
        .wpb-footer__bottom .container { flex-direction: row; justify-content: space-between; }
        .wpb-footer__authority .container{ flex-direction: row; align-items: center; justify-content: space-between; 
            .wpb-subtitle { margin-inline: 0; }
        } 
    }
    @media (min-width: 992px) {
        .wpb-footer__main { --gtc: minmax(0, 1.1fr) clamp(36rem, 42vw, 54rem); }
    }
} 

/*** ---------- Alerts ---------- ***/
.wpb-alert { --clr: #fff; --bg: var(--clr-primary); --br: .35rem; display: block; padding: 1.6rem; color: var(--clr); background-color: var(--bg); border-radius: var(--br); 
    *:not(.btn) { color: inherit; }

    &.wpb-alert--info { --border: 1px solid rgb(0, 143, 214); --bg: rgb(0, 143, 214); }
    &.wpb-alert--warning { --border: 1px solid rgb(194, 100, 47); --bg: rgb(194, 100, 47); }
    &.wpb-alert--danger { --border: 1px solid rgb(216, 19, 19); --bg: rgb(216, 19, 19); }
    &.wpb-alert--success { --border: 1px solid rgb(78, 168, 69); --bg: rgb(78, 168, 69); }
}

/* Add to cart/bookmark animation */
.add-success, .saved-success { position: fixed; top: 3.2rem; right: 3.2rem; background-color: var(--clr-primary); z-index: 9999; width: 4.4rem; height: 4.4rem; border-radius: 50%; display: inline-grid; place-items: center; transform: scale(0); animation: scale .5s cubic-bezier(0,0,.5,1.5) forwards, transform .5s forwards; animation-delay: 0s, 1.6s; 
    i { color: #fff; }
    &:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; animation: pulse 1s forwards; animation-delay: .6s; }
} 

/*** ---------- Wux Bulk Pricing ---------- ***/
.wpb-bp-overview { margin-bottom: 2.2rem; }
.wpb-bp-overview .wpb-bp-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule { cursor: pointer; border: 1px solid var(--clr-border); border-radius: .5rem; display: grid;}
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule > span { font-size: 1.6rem; line-height: 1; padding: 1rem 1.5rem; display: flex; gap: .5rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule > span strong { font-size: 1.8rem; }
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule > span small { margin-left: auto; font-size: 1.2rem; line-height: 1; }
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule > span small * { font-size: inherit; line-height: inherit; }
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule > span + * { border-top: 1px solid var(--clr-border); }

@media (min-width: 992px) {
    .wpb-bp-overview { margin-bottom: 3.2rem; }
}

/*** ---------- Template: Contact ---------- ***/
.wpb-contact { --gtc: 1; --gap: 3.2rem; 
    .container { display: grid; grid-template-columns: var(--gtc); gap: var(--gap); }
    .wpb-contact__form {
        .card-container { height: 100%; }
        .wpb-card {
            h2 { --fs-h2: clamp(2.4rem, 2.8vw, 3.2rem); }
            .gform_wrapper.gravity-theme {
                .gform_footer { justify-content: space-between; position: relative;
                    p.form-privacy-notice { text-align: end; max-width: 26rem; }
                    [id^="gform_ajax_spinner"] { --size: 1.2rem; --border-color: #FFFF; position: absolute; top: 2.5rem; left: -.5rem; }
                }
            }
        }
        @container card-container (max-width: 54rem) {  
            .wpb-card .gform_wrapper.gravity-theme .gform_footer {  
                button[type="submit"] { width: 100%; }
                p.form-privacy-notice { max-width: 100%; text-align: center; }
            }
        }
    }
    .wpb-contact__content { display: flex; flex-direction: column; gap: clamp(3.2rem, 4vw, 4.8rem);
        .wpb-contact__info { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(18rem, 18vw, 24rem), 1fr)); gap: clamp(1.8rem, 2.4vw, 3.2rem); 
            .wpb-contact__item { --fs-title: clamp(1.8rem, 1.8vw, 2rem); 
                .wpb-contact__item-title { font-size: var(--fs-title); font-weight: 600; line-height: 1.2; margin-bottom: .8rem; }
                a { transition: color var(--ts-duration) ease; 
                    &:hover { color: var(--clr-primary); }
                }

                &.wpb-contact__item--address a{ text-decoration: none; }
                &.wpb-contact__item--social-media { display: flex; align-items: start; gap: 1.6rem; flex-wrap: wrap;
                    .wpb-contact__item-title { margin-top: 0; }
                }
            }
        }
        .wpb-contact__thumbnail { --ratio: 70%; --br: 1rem; padding-bottom: var(--ratio); position: relative; border-radius: var(--br); overflow: hidden; margin-top: auto;
            img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
        }
    }
}

@media (min-width: 992px) {
    .wpb-contact { --gtc: minmax(0, 1fr) 38rem; --gap: 4.8rem; }
}
@media (min-width: 1200px) {
    .wpb-contact { --gtc: minmax(0, 1fr) 52rem; --gap: 6.4rem; }
}
@media (min-width: 1400px) {
    .wpb-contact { --gtc: minmax(0, 1fr) 58rem; --gap: 7.2rem; }
}
@media (min-width: 1600px) {
    .wpb-contact { --gtc: minmax(0, 1fr) 71rem; --gap: 9rem; }
}

/*** ---------- Keyframes ---------- ***/
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes scale {
    0% { transform: scale(0); }
    100% { transform: scale(100%); }
}

@keyframes transform {
    0% { transform: scale(100%) translateY(0px); opacity: 1; }
    100% { transform: scale(100%)  translateY(-10rem); opacity: 0; }
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--clr-primary); opacity: .7; }
    70% { transform: scale(1); box-shadow: 0 0 0 1.5rem var(--clr-primary); opacity: 0; }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--clr-primary); opacity: 0; }
}

@media screen and (max-width: 600px) {
    #wpadminbar {
        position: fixed;
    }
}

.wpb-certificates { display: flex; align-items: center; gap: 1.6rem; 
    .wpb-certificates__description { font-size: clamp(1.2rem, 1.3vw, 1.5rem); opacity: .5; line-height: 1; }
    .wpb-certificates__icons { --icon-size: clamp(3.2rem, 3.2vw, 4rem); display: flex; align-items: center; gap: .4rem; 
        img { width: var(--icon-size); height: var(--icon-size); object-fit: contain; }
    }
}

/*** ---- Info grid ---- ***/
.info-grid-container { container: info-grid / inline-size; }

.wpb-info-grid { --p: clamp(1.6rem, 2vw, 2.4rem); --border: 1px solid var(--clr-border); --fs: clamp(1.4rem, 1.5vw, 1.6rem); --title-fs: 1.6rem; --clr: var(--clr-contrast, var(--clr-text)); --title-clr: var(--clr-contrast, var(--clr-primary)); --col-gap: 1.6rem; --row-gap: 0; --gtc: minmax(0, 1fr);
    display: grid; grid-template-columns: var(--gtc); column-gap: var(--col-gap); row-gap: var(--row-gap);

    &.wpb-info-grid--columns-auto { --gtc: repeat(auto-fit, minmax(clamp(20rem, 24vw, 32rem), 1fr)); }
    &.wpb-info-grid--columns-1,
    &.wpb-info-grid--columns-2,
    &.wpb-info-grid--columns-3,
    &.wpb-info-grid--columns-4 { --gc: 1; --gtc: repeat(var(--gc), minmax(0, 1fr)); }

    /* Fixed title track (not fit-content) so the description column lines up across rows */
    .wpb-info-grid__item { padding: var(--p) 0; border-bottom: var(--border); display: grid; grid-template-columns: clamp(9rem, 30%, 16rem) minmax(0, 1fr); column-gap: 1.2rem;
        .wpb-info-grid__title { font-size: var(--title-fs); color: var(--title-clr); word-break: break-word; hyphens: auto; line-height: 1.4; min-width: 5.4rem; }
        .wpb-info-grid__description {
            p { font-size: var(--fs); color: var(--clr); line-height: 1.4; 
                & + & { margin-top: .5em; }
            }
        }
    }
}

@container info-grid (min-width: 40rem) {
    .wpb-info-grid {
        &.wpb-info-grid--columns-2,
        &.wpb-info-grid--columns-3,
        &.wpb-info-grid--columns-4 { --gc: 2; }
    }
}
@container info-grid (min-width: 62rem) {
    .wpb-info-grid {
        &.wpb-info-grid--columns-3,
        &.wpb-info-grid--columns-4 { --gc: 3; }
    }
}
@container info-grid (min-width: 78rem) {
    .wpb-info-grid {
        &.wpb-info-grid--columns-4 { --gc: 4; }
    }
}


/*** ---- MUX ---- ***/
mux-video, mux-background-video { --media-object-fit: cover;
    &.is-mux-player { background-color: #e8e8e8; }
}
mux-player { --controls: none; --media-object-fit: cover; display: block; width: 100%; height: 100%; }