/* CSS for Onwise pseudo builder */
.page-template-tpl-pseudo {
    #page {
        max-width: none;
        margin: 0;
    }

    #content {
        flex-direction: column;
    }
}

[class*="onw-col-"] {
    box-sizing: border-box;
    flex: 1 1 calc(((100% / 12) * var(--col-size)) - 30px);

    >[class*="onw-col-"] {
        flex-grow: 0;
    }

    /* &:not(:has(+ [class*="onw-col-"])) {
        flex-grow: 0;
    } */
}

.onw-col-1 {
    --col-size: 1;
}

.onw-col-2 {
    --col-size: 2;
}

.onw-col-3 {
    --col-size: 3;
}

.onw-col-4 {
    --col-size: 4;
}

.onw-col-5 {
    --col-size: 5;
}

.onw-col-6 {
    --col-size: 6;
}

.onw-col-7 {
    --col-size: 7;
}

.onw-col-8 {
    --col-size: 8;
}

.onw-col-9 {
    --col-size: 9;
}

.onw-col-10 {
    --col-size: 10;
}

.onw-col-11 {
    --col-size: 11;
}

.onw-col-12 {
    --col-size: 12;
    flex-grow: 1 !important;
}

:has(> [class*="onw-col-"]) {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

@media (max-width: 767px) {
    [class*="onw-col-"] {
        --col-size: 12;
        padding: 0 15px 0 15px;
        flex-grow: 1 !important;

        >[class*="onw-col-"] {
            flex-grow: 1;
        }
    }
}

.onw-content {
    padding: 75px 0;
    width: 100%;
    position: relative;
    font-size: 18px;
    line-height: 1.8;

    h2 {
        font-size: clamp(1.625rem, 1.3942rem + 1.0256vw, 2.625rem);
        line-height: 1.4;
    }

    h4 {
        font-size: 18px;
        margin-bottom: 15px;
    }
}

/* .onw-content *:not(input):not(textarea):not(select):not(option):not(a) {
    color: inherit;
} */

[class*=onw-h-align-] {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.onw-h-align-center {
    justify-content: center;
}

.onw-h-align-left {
    justify-content: flex-start;
}

.onw-h-align-right {
    justify-content: flex-end;
}

.onw-v-align-center {
    align-self: center;
}

.onw-v-align-top {
    align-self: flex-start;
}

.onw-v-align-bottom {
    align-self: flex-end;
}

.onw-column[style*="gap"] {
    display: flex;
    flex-wrap: wrap;

    >* {
        flex: 1 1 100%;
    }
}

.onw-column>div> :last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.onw-column>div> :first-child {
    margin-top: 0;
    padding-top: 0;
}

.onw-content .onw-container {
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
}

.onw-small-text {
    font-size: 0.8em;
    opacity: 0.9;
}

.onw-sticky-parent {
    position: relative;
    padding-left: 0;
}

@media only screen and (min-width: 1401px) {
    .onw-padding-right .onw-container {
        padding-right: calc(((100vw - 1400px) / 2) - 30px) !important;
    }

    .onw-padding-left .onw-container {
        padding-left: calc(((100vw - 1400px) / 2) - 30px) !important;
    }
}

@media only screen and (min-width: 1201px) {
    .onw-padding-right-1200 .onw-container {
        max-width: unset;
        padding-right: calc(((100vw - 1200px) / 2) - 30px) !important;
    }

    .onw-padding-left-1200 .onw-container {
        max-width: unset;
        padding-left: calc(((100vw - 1200px) / 2) - 30px) !important;
    }
}

.onw-image {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.onw-column {
    &:has(.onw-column-link) {
        position: relative;

        .onw-column-link {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            background-color: var(--black);
            transition: all 200ms ease-in-out;

            &:hover {
                opacity: 0.2;
            }
        }
    }
}

.onw-content {
    --onw-text: var(--gray-text);
    --onw-heading: var(--black);
    --onw-link: var(--gray-text);
    --onw-link-hover: var(--gray-accent);
    --onw-pre-title: var(--gray-text);
    --onw-pre-title-gray: var(--gray-text-accent);
    --onw-highlight: var(--black);
    --onw-image-light-display: block;
    --onw-image-light-next-display: block;
}

.onw-content,
.onw-column,
.onw-block,
[class*="onw-colour-"] {
    color: var(--onw-text);

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--onw-heading);
    }

    .onw-pre-title {
        color: var(--onw-pre-title) !important;

        &.onw-pre-title-gray {
            color: var(--onw-pre-title-gray) !important;
        }
    }

    a:not(.button) {
        color: var(--onw-link);
        text-decoration: underline;

        &:hover {
            color: var(--onw-link-hover);
        }
    }

    .onw-image-light {
        display: var(--onw-image-light-display);

        +img {
            display: var(--onw-image-light-next-display);
        }
    }

    .onw-text {

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            >strong {
                color: var(--onw-highlight) !important;
                font-weight: inherit;
            }
        }
    }

    hr {
        background-color: var(--border-white);
    }

    &.onw-colour-white,
    &.onw-colour-white-accent,
    &.onw-colour-grey,
    &.onw-colour-grey-accent {
        --onw-text: var(--gray-text);
        --onw-heading: var(--black);
        --onw-link: var(--gray-text);
        --onw-link-hover: var(--gray-accent);
        --onw-pre-title: var(--gray-text);
        --onw-pre-title-gray: var(--gray-text-accent);
        --onw-highlight: var(--black);
        --onw-image-light-next-display: none;
    }

    &.onw-colour-green,
    &.onw-colour-green-accent {
        --onw-text: var(--black);
        --onw-heading: var(--black);
        --onw-link: var(--black);
        --onw-link-hover: var(--black-accent);
        --onw-pre-title: var(--black);
        --onw-pre-title-gray: var(--black);
        --onw-highlight: var(--black);
        --onw-image-light-display: none;
    }

    &.onw-colour-black,
    &.onw-colour-black-accent,
    &.onw-colour-black-accent-2,
    &.onw-colour-green-dark,
    &.onw-colour-green-dark-accent {
        --onw-text: var(--gray);
        --onw-heading: var(--white);
        --onw-link: var(--green);
        --onw-link-hover: var(--green-accent);
        --onw-pre-title: var(--green);
        --onw-pre-title-gray: var(--gray-text-accent);
        --onw-highlight: var(--green);
        --onw-image-light-display: none;

        a:not(.button) {
            font-family: var(--font-serif);
        }

        blockquote {
            border-color: var(--green);
        }

        li,
        ol {
            &::marker {
                color: var(--green);
                font-size: 0.9em;
            }
        }
    }

    &.onw-colour-white {
        background-color: var(--white);
    }

    &.onw-colour-white-accent {
        background-color: var(--white-accent);
    }

    &.onw-colour-grey {
        background-color: var(--gray);
    }

    &.onw-colour-grey-accent {
        background-color: var(--gray-accent);
    }

    &.onw-colour-black {
        background-color: var(--black);
    }

    &.onw-colour-black-accent {
        background-color: var(--black-accent);
    }

    &.onw-colour-black-accent-2 {
        background-color: var(--black-accent-2);
    }

    &.onw-colour-green {
        background-color: var(--green);
    }

    &.onw-colour-green-accent {
        background-color: var(--green-accent);
    }

    &.onw-colour-green-dark {
        background-color: var(--green-dark);
    }

    &.onw-colour-green-dark-accent {
        background-color: var(--green-dark-accent);
    }

    &.onw-beeldmerk-list {
        li:before {
            top: 6px;
        }
    }
}

.onw-background-img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0.75;
}

.onw-background-img~.onw-container {
    z-index: 1;
    position: relative;
}

[class*="onw-colour-"].onw-column:not(.onw-colour-none) {
    padding: 25px;
}

.onw-full-width .onw-container {
    max-width: none;
}

.onw-maps {
    display: flex;

    .onw-html {
        display: flex;
        width: 100%;
        height: 100%;

        iframe {
            width: 100%;
            height: 100%;
        }
    }
}

.onw-pre-title {
    text-transform: uppercase;
    color: var(--green) !important;
    font-weight: 400;
    font-size: 0.7em;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.onw-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.onw-content p:has(> .button) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    &[style*="text-align: center"] {
        justify-content: center;
    }

    .button,
    .button-alt {
        flex: 0 0 auto;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .onw-content {
        padding: 0;
    }

    .onw-block,
    .onw-text {
        &:first-child {
            margin-top: 50px;
        }

        &:last-child {
            margin-bottom: 50px;
        }
    }

    .onw-image {
        margin: 0 -15px;
    }

    .onw-column+.onw-column:has(.onw-image) {
        margin-top: -30px;
        /* Fix for extra space above because of gap */
    }

    .onw-column-link + .onw-text {
        margin-top: 50px;
    }

    .onw-maps {
        padding: 0;

        iframe {
            min-height: 350px;
        }
    }

    [class*="onw-colour-"].onw-column:not(.onw-colour-none) {
        padding: 0 30px;
    }

    .onw-content {
        [style*="column-count"] {
            column-count: 1 !important;
        }

        p:has(> .button) {

            .button,
            .button-alt {
                flex: 1 0 auto;
            }
        }

        h2,
        p {
            br {
                display: none;
            }
        }
    }
}

@media (min-width: 768px) {
    .onw-content.onw-full-width {
        padding: 0;
    }

    .onw-full-width .onw-container {
        max-width: none;
    }

    .onw-full-width .onw-column {
        padding: 0;
    }

    .onw-full-width .onw-column> :not(.onw-image):first-child {
        padding-top: 75px;
    }

    .onw-full-width .onw-column> :not(.onw-image):last-child {
        padding-bottom: 75px;
    }

    .onw-full-width .onw-column> :not(.onw-image) {
        padding-left: 50px;
        padding-right: 50px;
    }

    .onw-full-width .onw-image {
        height: 100%;
    }

    .onw-full-width .onw-image img {
        height: 100%;
    }
}

/* Row - Hero */
.onw-content.onw-full-width.onw-hero {
    padding-top: 125px;

    h1 {
        margin-bottom: 50px;
        font-size: clamp(2.5rem, 2.0962rem + 1.7949vw, 4.25rem);
        line-height: 1.2;
    }

    p:has(> .button) {
        margin: 50px 0 25px;
    }

    p:not(:has(> .button)) {
        max-width: 550px;
    }

    .onw-container {
        justify-content: space-between;
    }

    .onw-text {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 15px !important;
    }
}

.onw-known-from {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    color: var(--gray-text) !important;
    font-size: 0.7em;

    .onw-known-from-label {
        text-transform: uppercase;
        letter-spacing: 1px;
    }
}

@media (max-width: 767px) {
    .onw-content.onw-full-width.onw-hero {
        padding-top: 25px;

        h1 {
            margin-bottom: 25px;
        }

        p:has(> .button) {
            margin: 25px 0 15px;
        }

        .onw-text {
            padding-top: 50px !important;
            padding-bottom: 25px !important;
        }
    }
}

/* END Row - Hero */

/* Block - Counters */
.onw-counters {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 25px;
    width: 100%;

    &.onw-counters-style-boxed {
        gap: 2px;
        padding: 0 !important;

        .onw-counter {
            background-color: var(--black-accent-2);
            border-top: none;
            padding: 35px 25px !important;
            flex: 1 1 300px;

            .onw-counter-number {
                font-size: 2.5em;
                line-height: 1;
            }

            .onw-counter-subtext {
                line-height: 1.4;
                max-width: 300px;
            }
        }
    }
}

.onw-counter {
    border-top: solid 1px var(--border-white);
    padding-top: 25px !important;
    flex: 0 1 200px;
}

.onw-counter-number {
    font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--green) !important;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.onw-counter-subtext {
    margin-top: 10px;
    font-size: 0.9em;
    color: var(--gray-text) !important;

    strong {
        color: var(--white) !important;
        font-weight: 400;
    }
}

@media (max-width: 767px) {
    .onw-counters {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .onw-counter {
        flex: 0 1 100%;
        text-align: center;

        &:first-child {
            border-top: none;
        }

        .onw-counter-number {
            justify-content: center;
        }
    }
}

/* END Block - Counters */

/* Block - Cards */
.onw-column:has(.onw-cards) {
    &:not(:first-child) {
        margin-top: 50px;
    }
}

.onw-colour-black-accent-2 .onw-cards {
    background-color: var(--black);
}

.onw-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    background-color: var(--black-accent-2);

    .onw-card {
        display: flex;
        flex-direction: column;
        background-color: transparent;
        border: none;
        padding: 25px !important;
        border-radius: 0;
        flex: 0 1 calc(100% / 3);
        backdrop-filter: brightness(1);
        border-top: solid 2px transparent;

        &:not(:last-child) {
            border-right: solid 2px var(--border-white);
        }

        .onw-card-content {
            display: flex;
            flex-direction: column;
            flex-grow: 2;

            ul {
                margin-left: 20px;
            }

            .onw-pre-title {
                color: inherit !important;
            }
        }

        .onw-small-text strong {
            color: var(--white);
            font-weight: 400;
        }

        hr {
            margin: auto 0 20px;
            background-color: var(--border-white);
        }

        .onw-card-icon {
            margin-bottom: 15px;

            svg {
                color: var(--gray) !important;
                object-fit: contain;
                width: 42px;
                height: 42px;
            }
        }

        .onw-card-content {
            color: var(--gray-accent) !important;
        }
    }
}

@media (max-width: 767px) {
    .onw-cards {
        .onw-card {
            flex: 0 1 100%;

            &:not(:last-child) {
                border-right: none;
                border-bottom: solid 2px var(--border-white);
            }
        }
    }
}

/* END Block - Cards */

/* Block - Steps */
.onw-column:has(.onw-steps) {
    &:not(:first-child) {
        margin-top: 75px;
    }
}

.onw-steps-bullets {
    display: flex;
    position: relative;

    &:before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: calc((60px / 2) - 1px);
        height: 2px;
        width: 80%;
        background-color: var(--gray-text);
        z-index: 1;
    }

    .onw-step {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding: 0 25px;
        line-height: 1.4;
        cursor: pointer;

        .onw-step-title {
            color: var(--black-accent) !important;
            font-size: 0.9em;
        }

        .onw-step-subtitle {
            color: var(--gray-text) !important;
            font-size: 0.8em;
        }

        &:hover,
        &.active {
            .onw-step-bullet {
                box-shadow: 0 0 20px 4px hsl(0deg 0% 0% / 25%);

                &:after {
                    clip-path: circle(51% at 50% 50%);
                }
            }
        }
    }
}

.onw-step-bullet {
    background-color: var(--white);
    border: solid 2px var(--gray-accent);
    font-weight: 600;
    text-align: center;
    width: 60px;
    height: 60px;
    letter-spacing: 1px;
    border-radius: 100%;
    color: var(--gray-accent) !important;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transition: all 400ms ease-in-out;

    &:after {
        content: attr(style-step-number);
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100%;
        height: 100%;
        display: flex;
        border-radius: 100%;
        align-items: center;
        justify-content: center;
        transform: translate(-50%, -50%);
        background-color: var(--black);
        border-color: var(--black);
        color: var(--green) !important;
        transition: all 300ms ease-in-out;
        clip-path: circle(0% at 50% 50%);
    }
}

.onw-steps-next,
.onw-steps-prev {
    display: none;
}

.onw-steps-content {
    margin-top: 75px;
    font-size: 0.9em;
    line-height: 1.6;
    padding: 25px;
    min-height: 260px;
    position: relative;

    .onw-step-result.onw-pre-title {
        color: var(--gray-text) !important;
    }

    .onw-step {
        display: flex;
        flex-wrap: wrap;

        .onw-step-column {
            flex: 1;
            min-width: 250px;
            padding: 25px;
        }

        .onw-step-content-why,
        .onw-step-content-result {
            > :last-child {
                margin-bottom: 0;
            }
        }

        .onw-step-number {
            position: absolute;
            right: 5px;
            bottom: 5px;
            font-size: 6em;
            font-weight: 600;
            letter-spacing: 5px;
            opacity: 0.2;
            line-height: 1;
            color: var(--green) !important;
        }
    }
}

@media (max-width: 767px) {
    .onw-steps-bullets {
        margin-bottom: 15px;

        &:before {
            display: none;
        }

        .onw-step {
            min-height: 190px;

            &:not(.active) {
                display: none;
            }
        }
    }

    .onw-steps-content {
        margin-top: 0;
    }

    .onw-steps-next,
    .onw-steps-prev {
        display: flex;
        align-items: center;
        color: var(--gray-text) !important;

        transform: translateY(-65px);

        &.available {
            cursor: pointer;
            color: var(--black) !important;
        }
    }
}

/* END Block - Steps */
/* Block - Split */
.onw-column:has(.onw-split) {
    &:not(:first-child) {
        margin-top: 75px;
    }
}

.onw-split-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

    .onw-pre-title {
        margin: 0;

        &.onw-split-subtitle-left {
            color: var(--gray) !important;
        }
    }

    progress {
        width: 100%;
        height: 10px;
        -webkit-appearance: none;
        appearance: none;
        background-color: var(--green);
        border: none;

        &::-webkit-progress-bar {
            background-color: var(--green);
        }

        &::-webkit-progress-value {
            background-color: var(--gray);
        }
    }
}

.onw-split-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    background-color: var(--green);
    margin: 50px 0 0;

    .onw-split-left {
        flex: 1;
        min-width: 350px;
        color: var(--gray) !important;
        background-color: var(--black-accent-2);

        h4,
        .onw-split-percentage,
        .onw-split-label {
            color: inherit !important;
        }

        .onw-split-content {
            p {
                color: var(--gray-text) !important;
            }
        }

        .onw-split-label {
            border-color: var(--border-white) !important;
        }
    }

    .onw-split-right {
        flex: 1;
        flex-grow: 5;
        min-width: min(600px, 100%);
        background-color: var(--black-accent-2);

        strong {
            color: var(--white) !important;
            font-weight: 400;
        }
    }

    .onw-split-left,
    .onw-split-right {
        padding: 50px;

        h4 {
            font-size: 1.1em;
            margin-bottom: 10px
        }

        p {
            font-size: 0.9em;
        }
    }

    .onw-split-percentage {
        font-size: 4em;
        line-height: 1;
        margin-bottom: 25px;
        font-weight: 700;
        letter-spacing: 5px;
        color: var(--green) !important;
    }

    .onw-split-labels {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        &:before {
            content: '';
            order: 1;
            width: 100%;
        }
    }

    .onw-split-label {
        padding: 7px 10px;
        font-size: 0.7em;
        line-height: 1;
        border: solid 1px var(--green-accent-2);
        color: var(--green) !important;
        background-color: var(--green-dark);
        text-align: center;

        &.highlighted {
            order: 2;
            border: none;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
    }
}

@media (max-width: 767px) {
    .onw-split-bar {
        display: none;
    }

    .onw-split-left {
        min-width: unset !important;
    }

    .onw-split-content-wrapper {
        margin: 0;
    }

    .onw-split-label {
        flex: 1;
        min-width: fit-content;
    }
}

/* END Block - Split */
/* Block - Timeline */
.onw-column:has(.onw-timeline) {
    &:not(:first-child) {
        margin-top: 50px;
    }
}

.onw-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    padding: 25px;
    background-color: var(--black-accent-2);
}

.onw-timeline-title {
    width: 100%;
    color: var(--gray) !important;
    font-size: 1.2em !important;
}

.onw-timeline-items {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    width: 100%;
    position: relative;

    &:before {
        content: '';
        background: linear-gradient(to right, var(--timeline-colour-start), var(--timeline-colour-end));
        height: 5px;
        width: 80%;
        position: absolute;
        top: 7.5px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
    }
}

.onw-timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8em;
    line-height: 1.4;
    text-align: center;
    position: relative;
    padding-top: 25px;
    flex: 1 1 150px;

    &:before,
    &:after {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        background-color: var(--timeline-colour);
        border-radius: 100%;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        z-index: 3;
    }

    &:after {
        z-index: 1;
        opacity: 0.5;
        transform: translateX(-50%) scale(1.3);
    }

    .onw-timeline-item-title {
        margin: 10px 0 5px;
        font-size: 1.1em;
        color: var(--timeline-colour) !important;
    }

    .onw-timeline-item-subtitle {
        color: var(--gray-accent) !important;
        max-width: 150px;
    }
}

.onw-timeline-content {
    flex: 1 1 300px;
    background-color: var(--black);
    padding: 25px !important;
    line-height: 1.6;
    font-size: 0.8em;

    h4 {
        font-size: 1em;
        text-transform: uppercase;
        margin-bottom: 10px;
        letter-spacing: 1px;
    }

    > :last-child {
        margin-bottom: 0;
    }
}

.onw-timeline-content-left {
    background-color: var(--green-dark-accent);
    border: solid 1px var(--green-dark);
    color: var(--white) !important;

    h4 {
        color: var(--green) !important;
    }
}

@media (max-width: 767px) {
    .onw-timeline {
        padding: 25px 30px;
    }

    .onw-timeline-items {
        flex-direction: column;
        margin: 0 10px;

        &:before {
            width: 5px;
            height: 85%;
            top: 2px;
            left: -1px;
            background: linear-gradient(to bottom, var(--timeline-colour-start), var(--timeline-colour-end));
        }
    }

    .onw-timeline-item {
        flex: 0 1 100%;
        padding: 0 0 0 25px;
        align-items: flex-start;
        text-align: left;
        margin-bottom: 25px;

        &:before,
        &:after {
            top: 2px;
            left: 0;
        }

        .onw-timeline-item-title {
            margin-top: 0;
        }
    }
}

/* END Block - Timeline */
/* Block - Comparison */
.onw-column:has(.onw-comparison) {
    &:not(:first-child) {
        margin-top: 75px;
    }
}

.onw-comparison-title {
    margin-bottom: 25px;
}

.onw-comparison-style-design-2 {
    .onw-comparison-lists {
        gap: 25px;

        .onw-comparison-list {
            background-color: transparent;
            border: solid 1px var(--gray-accent);
            color: var(--gray-text) !important;

            .onw-pre-title {
                color: inherit !important;
            }

            &:not(.highlighted) {
                li {
                    &:not(:last-child) {
                        border-bottom: solid 1px var(--gray-accent);
                    }
                }
            }

            &.highlighted {
                border: none;
                background-color: var(--green-dark);
            }

        }
    }
}

.onw-colour-black-accent-2 {
    .onw-comparison-lists .onw-comparison-list {
        background-color: var(--black);
    }
}

.onw-colour-black {
    .onw-comparison-style-design-2 {
        .onw-comparison-lists .onw-comparison-list:not(.highlighted) {
            background-color: var(--black-accent-2);
            border: solid 1px var(--border-white);
        }
    }
}

.onw-comparison-lists {
    display: flex;
    flex-wrap: wrap;

    .onw-comparison-list {
        flex: 1 1 300px;
        padding: 30px !important;
        background-color: var(--black-accent-2);

        .onw-pre-title {
            color: var(--gray) !important;
        }

        strong {
            color: var(--white) !important;
            font-weight: 400;
        }

        > :last-child {
            margin-bottom: 0;
        }

        ul {
            margin: 0;
        }

        li {
            list-style: none;
            position: relative;
            padding-left: 30px;
            font-size: 0.95em;

            &:not(:last-child) {
                margin-bottom: 10px;
                padding-bottom: 10px;
                border-bottom: solid 1px var(--border-white);
            }

            &:before {
                content: '';
                position: absolute;
                left: 0;
                top: 4px;
                width: 20px;
                height: 20px;
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
            }

            &.icon-check:before {
                background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="%23d3f87d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
            }

            &.icon-cross:before {
                background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23737370" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
                top: 6px;
            }
        }

        &.highlighted {
            color: var(--gray) !important;
            border: solid 1px var(--green);
            border-top-width: 3px;
            background-color: var(--green-dark);

            .onw-pre-title {
                color: var(--green) !important;
            }
        }
    }
}

@media (max-width: 767px) {
    .onw-comparison-title {
        padding: 0 30px;
    }
}

/* END Block - Comparison */
/* Block - Testimonials */
.onw-testimonials {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;

    .onw-testimonial {
        flex: 1 1 300px;
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        background-color: var(--white);
        padding: 25px !important;
        border: solid 1px var(--gray-accent);
    }

    .onw-testimonial-image {
        width: auto;

        img {
            width: auto;
            max-width: min(75%, 150px);
            height: 100px;
            aspect-ratio: unset;
        }
    }

    .onw-testimonial-content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: 15px;
        width: 100%;
        padding: 0;
        font-size: 0.8em;

        .onw-testimonial-tagline {
            margin-top: auto;

            .onw-testimonial-divider,
            .onw-testimonial-job-title {
                color: var(--gray-text) !important;
            }
        }
    }
}

.onw-klanten-balk {
    margin: 25px 0;
}

/* END Block - Testimonials */
/* Block - Case Cards */
.onw-case-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;

    .onw-case-card {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background-color: var(--black-accent-2);
        padding: 25px !important;
        flex: 1 1 300px;
        text-decoration: none !important;
        transition: all 200ms ease-in-out;
        font-size: 0.9em;

        &:hover {
            background-color: var(--black);
        }

        .onw-case-card-sector {
            text-transform: uppercase;
            color: var(--gray-accent) !important;
        }

        .onw-case-card-problem {
            color: var(--gray-accent) !important;
        }

        .onw-case-card-result {
            color: var(--green) !important;
            max-width: max(300px, 80%);
        }

        .onw-case-card-readmore {
            color: var(--green) !important;
            transition: all 200ms ease-in-out;

            svg {
                position: relative;
                top: 3px;
                width: 18px;
                height: 18px;
                transition: all 200ms ease-in-out;
            }

            &:hover {
                color: var(--green-accent) !important;
                text-decoration: underline;

                svg {
                    transform: translateX(5px);
                }
            }
        }
    }
}

/* END Block - Case Cards */
/* Block - Modules */
.onw-modules {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;

    .onw-module {
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex: 1 1 280px;
        font-size: 0.9em;
        line-height: 1.4;
        background-color: var(--black-accent-2);
        border: solid 1px var(--border-white);
        padding: 25px !important;

        .onw-module-title {
            color: var(--green) !important;
            font-size: 1.5em;
        }

        .onw-module-subtitle {
            color: var(--white) !important;
            font-size: 1.2em;
        }

        .onw-module-period {
            color: var(--gray) !important;
            font-size: 0.8em;
        }

        .onw-module-description {
            margin-top: 10px;
            font-size: 0.9em;
            color: var(--gray-accent) !important;
            min-height: 62px;
        }

        .onw-module-list {
            font-size: 0.9em;
            margin-left: 0;
            color: var(--gray-text) !important;

            li {
                position: relative;
                list-style: none;
                padding-left: 10px;
                margin-bottom: 3px;

                &:before {
                    content: '·';
                    position: absolute;
                    left: 0;
                    color: var(--green) !important;
                }
            }
        }
    }
}

/* END Block - Modules */
/* Block - CTA */
.onw-cta {
    display: flex;
    flex-direction: column;
    gap: 25px;

    .onw-cta-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 50px !important;
        width: 100%;
        background-color: var(--green);
        color: var(--black) !important;
        text-align: center;

        >* {
            margin: 0;
        }

        .onw-pre-title {
            color: inherit !important;
        }

        .onw-cta-title {
            font-size: clamp(1.625rem, 1.3942rem + 1.0256vw, 2.625rem);
            line-height: 1.2;
            max-width: min(700px, 100%);
            color: inherit !important;
        }

        .onw-cta-content {
            color: var(--black-accent-2) !important;
            max-width: min(600px, 100%);

            p {
                margin-bottom: 15px;
            }

            > :last-child {
                margin-bottom: 0;
            }
        }

        .button {
            margin-top: 15px;
            background-color: var(--black);
            color: var(--green) !important;
            text-align: center;

            svg {
                position: relative;
                top: 3px;
                width: 18px;
                height: 18px;
                transition: all 200ms ease-in-out;
            }

            &:hover {
                background-color: var(--black-accent-2);
                color: var(--green) !important;

                svg {
                    transform: translateX(5px);
                }
            }
        }
    }

    .onw-cta-appended {
        text-align: center;
        font-size: 0.9em;

        svg {
            position: relative;
            top: 3px;
            width: 18px;
            height: 18px;

            &:not(:first-child) {
                margin-left: 10px;
            }
        }

        a {
            text-decoration: underline;

            &:hover {
                text-decoration: none;
            }
        }
    }
}

.onw-colour-green .onw-cta .onw-cta-inner {
    padding: 0px;
}

@media (max-width: 767px) {
    .onw-cta {

        .onw-cta-inner {
            margin: 0 -30px;
            padding-left: 30px !important;
            padding-right: 30px !important;
            box-sizing: content-box;
        }

        .onw-cta-content {
            text-align: left;
        }
    }

    .onw-colour-green .onw-cta {
        .onw-cta-inner {
            padding: 0 30px !important;

            .onw-cta-title {
                text-align: left;
            }
        }

        .onw-cta-appended {
            display: none;
        }
    }
}

/* END Block - CTA */
/* Block - USPs */
.onw-usps {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;

    .onw-usp {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        flex: 1 1 125px;
        font-size: 0.8em;

        .onw-usp-icon {
            width: auto;

            img {
                width: auto;
                max-width: min(75%, 100px);
                height: 100px;
                aspect-ratio: unset;
            }
        }

        .onw-usp-text {
            max-width: 125px;
        }
    }
}

/* END Block - USPs */
/* Block - FAQ */
.onw-faq {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    width: 100%;

    &.onw-faq-two-columns {
        .onw-faq-item:last-child {
            border-bottom: solid 1px var(--border-white);
            padding-bottom: 15px;
        }
    }

    .onw-faq-item {
        flex: 1 1 100%;
        padding-bottom: 15px;
        font-size: 0.9em;

        &:not(:last-child) {
            border-bottom: solid 1px var(--border-white);
        }

        &.onw-faq-dropdown {
            .onw-faq-question {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: var(--gray) !important;
                cursor: pointer;
                padding-bottom: 0;

                svg {
                    width: 16px;
                    height: 16px;
                    transition: all 200ms ease-in-out;
                }
            }

            .onw-faq-answer {
                max-height: 0;
                overflow: hidden;
                margin-top: 0;
                transition: all 200ms ease-in-out;
            }

            &.open {
                .onw-faq-question {
                    padding-bottom: 5px;

                    svg {
                        transform: rotate(180deg);
                        color: var(--green) !important;
                    }
                }

                .onw-faq-answer {
                    margin-top: 10px;
                }
            }
        }
    }

    .onw-faq-question {
        padding-bottom: 5px;
        transition: all 200ms ease-in-out;
    }

    .onw-faq-answer {
        margin-top: 10px;
        line-height: 1.6;
        color: var(--gray-text) !important;
    }

    &.onw-faq-two-columns {
        .onw-faq-item {
            flex: 1 1 calc(50% - 15px);
        }
    }
}

@media (max-width: 767px) {
    .onw-faq {
        &.onw-faq-two-columns {
            .onw-faq-item {
                flex: 1 1 100%;
            }
        }
    }
}

/* END Block - FAQ */
/* Row - Phases */
.onw-phases-cta-inner {
    position: relative;
    padding-top: 100px;

    >* {
        z-index: 1;
    }

    .onw-phases-number {
        position: absolute;
        left: 0;
        top: -10px;
        font-size: 5.5em;
        z-index: 0;
        color: var(--green);
        opacity: 0.1;
    }

    .onw-phases-title {
        color: var(--green) !important;
    }

    .onw-phases-labels {
        margin-top: 25px;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;

        .onw-phases-label {
            padding: 7px 10px;
            font-size: 0.7em;
            line-height: 1;
            border: solid 1px var(--green-accent-2);
            color: var(--green) !important;
            background-color: var(--green-dark);
            text-align: center;
        }
    }
}

.onw-phases-cards {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 0;

    .onw-phase-card {
        padding: 25px;
        background-color: var(--black-accent-2);

        .onw-phase-card-title {
            color: var(--gray-text-accent) !important;
            margin-bottom: 5px;
        }

        &.highlighted {
            background-color: var(--green-dark);
            border: solid 1px var(--green-accent-2);

            .onw-phase-card-title {
                color: var(--green) !important;
            }
        }

        .onw-phase-card-content {
            > :last-child {
                margin-bottom: 0;
            }

            ul,
            ol {
                margin-left: 20px;
            }
        }
    }
}

.onw-colour-black-accent-2 .onw-phase-card {
    background-color: var(--black);
}

/* END Row - Phases */
/* Block - Custom case */
.onw-custom-case {
    display: flex;
    flex-wrap: wrap;

    .onw-custom-case-header {
        background-color: var(--black);
        border: solid 1px var(--border-white);
        padding: 25px !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        .onw-custom-case-company {
            h3 {
                margin-bottom: 10px;
            }

            .onw-custom-case-info {
                font-size: 0.8em;
                color: var(--gray-text-accent);
            }
        }

        .onw-custom-case-label {
            padding: 10px 15px;
            line-height: 1;
            border: solid 1px var(--green-accent-2);
            color: var(--green) !important;
            background-color: var(--green-dark);
            text-align: center;
        }
    }

    .onw-custom-case-step {
        border-left: solid 1px var(--border-white);
        background-color: var(--black);
        padding: 25px !important;
        flex: 1 1 250px;

        &:last-child {
            border-right: solid 1px var(--border-white);
        }

        .onw-custom-case-step-title {
            color: var(--gray-text-accent) !important;
        }

        ul {
            margin-left: 20px;
        }
    }

    .onw-custom-case-quote {
        width: 100%;
        background-color: var(--green-dark);
        border: solid 1px var(--border-white);
        padding: 25px !important;

        blockquote {
            border: none;
            padding: 0 !important;
            margin-bottom: 10px !important;
            max-width: clamp(0px, 100%, 800px);
        }

        .onw-custom-case-quote-author {
            font-size: 0.9em;
            color: var(--gray-text-accent);
        }
    }
}

/* END Block - Custom case */
/* Block - Form */
.onw-form {
    .onw-form-contactpersoon {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 15px;
        padding-bottom: 15px;
        border-bottom: solid 1px var(--border-white);
        margin-bottom: 25px;

        .onw-form-contactpersoon-image {
            width: 50px;
            height: 50px;
            overflow: hidden;
            border-radius: 100%;
        }

        .onw-form-contactpersoon-info {
            display: flex;
            flex-direction: column;
            gap: 5px;
            line-height: 1;
        }
    }

    .onw-form-subtext {
        text-align: center;
        margin-top: 15px;
    }
}

.onw-list-subtitle {
    color: var(--white) !important;
}

/* END Block - Form */
/* Webinars hero */
.onw-hero-webinar {
    padding: 0;

    .onw-container {
        padding: 150px 0;
        min-height: 75vh;
        align-items: center;
    }
}

/* END Webinars hero */
/* Webinar highlight */
.onw-webinar-highlight-image {
    position: relative;

    img {
        display: block;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }

    .onw-webinar-highlight-image-play {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 100%;
        backdrop-filter: blur(5px);
        border: solid 1px var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 100px;
        transition: all 200ms ease-in-out;

        &:before {
            content: '';
            display: block;
            width: 15px;
            height: 18px;
            clip-path: polygon(0 0, 0% 100%, 100% 50%);
            background-color: var(--white);
        }

        &:hover {
            background-color: rgba(255, 255, 255, 0.5);
        }
    }

    .onw-webinar-highlight-live-overlay {
        display: flex;
        align-items: center;
        position: absolute;
        left: 15px;
        bottom: 15px;
        z-index: 1;
        border-radius: 99px 99px 0 99px;
        padding: 5px 10px;
        font-size: 0.8em;
        color: var(--black);
        background-color: var(--green);

        &:not(.onw-webinar-highlight-live-overlay-ondemand):before {
            content: '';
            display: block;
            background-color: var(--black);
            height: 8px;
            width: 8px;
            border-radius: 100%;
            margin-right: 7px;
        }

        &.onw-webinar-highlight-live-overlay-ondemand {
            background-color: rgba(0, 0, 0, 0.2);
            color: var(--gray-text);
            backdrop-filter: blur(5px);
        }
    }
}

.onw-webinar-highlight-categories {
    font-size: 1.1em;
    color: var(--black-accent);
}

.onw-webinar-highlight-title {
    margin-bottom: 5px;
}

.onw-webinar-highlight-meta {
    color: var(--gray-text-accent);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.8em;

    span {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    svg {
        height: 16px;
        width: 16px;
    }
}

.onw-webinar-highlight-description {
    color: var(--black-accent);
    margin: 15px 0;

    > :first-child {
        margin-top: 0;
    }

    > :last-child {
        margin-bottom: 0;
    }
}

.onw-webinar-highlight-host {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;

    img {
        height: 75px;
        width: 75px;
        border-radius: 100%;
    }

    .onw-webinar-highlight-host-info {
        line-height: 1.2;

        .onw-webinar-highlight-host-name {
            color: var(--black-accent);
        }

        .onw-webinar-highlight-host-meta {
            font-family: var(--font-serif);
            font-size: 0.9em;
        }
    }
}

.onw-webinar-highlight-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

@media (max-width: 767px) {
    .onw-webinar-highlight-image {
        margin-top: 50px;

        .onw-webinar-highlight-image-play {
            width: 50px;
            height: 50px;

            &:before {
                width: 10px;
                height: 12px;
            }
        }

        .onw-webinar-highlight-live-overlay {
            left: 30px;
        }
    }

    .onw-webinar-highlight-content .onw-webinar {
        margin-top: 0;
    }

    .onw-webinar-highlight-links {
        >a {
            flex-grow: 1;
            text-align: center;
        }
    }
}

/* END Webinar highlight */
/* Webinars row */
.onw-webinars {
    padding: 75px 0 !important;
}

.onw-slider-webinars {
    width: 100%;
    flex-grow: 1 !important;
}

.onw-webinar-slider {
    padding-left: 0 !important;
}

.onw-webinar-slide {
    text-decoration: none !important;
    padding-right: 75px;

    .onw-webinar-slide-image {
        margin-bottom: 5px;
    }

    .onw-webinar-slide-meta {
        display: flex;
        justify-content: space-between;
        color: var(--black);
        font-size: 1em;
    }

    .onw-webinar-slide-title {
        margin: 10px 0;
    }

    .onw-webinar-slide-host {
        color: var(--gray-text);
        font-size: 0.9em;
        display: flex;
        align-items: center;
        gap: 5px;

        .onw-webinar-highlight-duration {
            display: flex;
            align-items: center;
            gap: 5px;

            svg {
                height: 16px;
                width: 16px;
            }
        }
    }
}

@media (max-width: 767px) {
    .onw-webinars {
        padding: 0 0 50px !important;

        .onw-webinar-highlight-categories,
        .onw-webinar-highlight-date {
            font-size: 0.8em;
        }

        .onw-webinars-title .onw-text {
            margin-bottom: 0;
        }

        .onw-webinar-highlight-image {
            margin-top: 0;
        }

        .onw-slider-webinars {
            padding-left: 15px;
        }

        .onw-webinar-highlight-image {
            .onw-webinar-highlight-live-overlay {
                left: 10px;
                bottom: 10px;
                font-size: 0.7em;
                padding: 3px 8px;
            }
        }
    }
}

/* END Webinars row */
/* Vacatures hero */
.onw-hero-vacature-overzicht {
    padding-top: 150px;
}

@media (max-width: 767px) {
    .onw-hero-vacature-overzicht {
        padding-top: 0;
    }
}

/* END Vacatures hero */
/* Vacatures block */
.onw-vacatures {
    .onw-vacature-item {
        text-decoration: none !important;
        border-bottom: solid 1px var(--border);
        padding: 25px 0 !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        color: var(--black) !important;

        &:hover {
            color: var(--gray-text-accent) !important;
        }

        &:first-child {
            border-top: solid 1px var(--border);
        }

        .onw-vacature-item-info {
            display: flex;
            flex-direction: column;
            gap: 10px;

            .onw-pre-title {
                color: var(--gray-text);
                margin: 0;
            }

            h3 {
                font-size: 1.8em;
                color: inherit !important;
                margin: 0 !important;
            }
        }

        .onw-vacature-item-cta {
            text-align: right;

            .onw-vacature-link {
                display: inline-block;
                border-bottom: solid 2px var(--black);
            }
        }
    }
}

.onw-vacatures-open {
    padding: 35px;

    h2 {
        line-height: 1;
        margin-bottom: 10px;
    }

    p {
        margin-bottom: 0;
    }

    .onw-vacatures-open-cta {
        text-align: right;
    }
}

@media (max-width: 767px) {
    .onw-vacature-item {
        >div {
            padding: 0;
        }
    }

    .onw-vacatures-open-cta {
        .button {
            text-align: center;
            display: block;
        }
    }
}

/* END Vacatures block */
/* Masonry block */
.onw-masonry {
    columns: 3;
    gap: 15px;

    img {
        display: block;
        padding-bottom: 15px;
    }
}

@media (max-width: 767px) {
    .onw-masonry {
        columns: 2;

        > :nth-child(n+5) {
            display: none;
        }
    }
}

/* END Masonry block */
/* Home redesign 2026 2 --- TEMP CSS */
.onw-home-redesign-2026-2 {
    .onw-home-hero-accolades {
        position: static;
        justify-content: start;
        padding-bottom: 75px !important;
    }

    .onw-counter-affix:has(img) {
        width: 100%;

        img {
            width: 65%;
        }
    }

    .onw-counter {
        border-top: none;
        padding-top: 0 !important;
    }

    .onw-background-img {
        opacity: 0.5;
    }

    .onw-counter-number>* {
        color: var(--onw-highlight);
    }

    .onw-column-card {
        padding: 0 !important;

        .onw-text {
            padding: 25px;
        }
    }
}

#gform_wrapper_27 {
    .gform_fields {
        gap: 25px !important;
    }

    .ginput_container {
        padding: 0;
    }

    .gfield_radio {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;

        .gchoice {
            border: solid 1px var(--black);
            background-color: transparent;
            color: var(--black);
            padding: 8px 20px;
            border-radius: 50px 50px 0 50px;
            transition: all 300ms ease-in-out;
            line-height: normal;

            &:hover,
            &:has(input[type="radio"]:checked) {
                background-color: var(--black);
                color: var(--green);
            }

            &:has(input[type="radio"]:checked):hover {
                background-color: var(--black-accent-2);
                color: var(--green-accent);
            }

            label {
                max-width: unset !important;
                top: -2px;
                font-size: 1em;

                &:before {
                    display: none !important;
                }
            }
        }
    }

    .gfield_checkbox {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;

        .gchoice {
            flex: 1 1 calc(50% - 30px);
            background-color: var(--gray);
            color: var(--black);
            padding: 8px 20px;
            border-radius: 50px 50px 0 50px;
            transition: all 300ms ease-in-out;
            line-height: normal;
            display: flex;
            align-items: center;

            label {
                align-items: center;
                font-size: 1em;

                &:before {
                    background-color: var(--white);
                    flex: 1 0 20px;
                    height: 20px;
                    margin-right: 15px;
                    transition: background-color 200ms ease-in-out, border-width 100ms ease-in-out;
                }
            }

            &:has(input:checked) label:before {
                background-color: var(--black);
            }
        }
    }

    .gform_footer {
        input[type="submit"] {
            padding: 15px 25px;
            margin-top: 20px;
            font-size: 18px;
        }
    }
}

@media (max-width: 767px) {
    .onw-home-redesign-2026-2 {
        .onw-column-card {
            .onw-image {
                margin: 0;
            }
        }
    }

    #gform_wrapper_27 {
        .gfield_radio {
            .gchoice {
                width: 100%;
                text-align: center;
            }
        }

        .gfield_checkbox {
            .gchoice {
                flex: 1 1 100% !important;
            }
        }

        .gform_footer {
            input[type="submit"] {
                width: 100%;
            }
        }
    }
}

/* END Home redesign 2026 2 */