:root {
    --wrapper-width: 1400px;
    --edge-padding: 68px;
    --aside-border-radius: 52px;
    --button-radius:15px;
    --height-input:65px;
    --spring: linear(
        0,
        0.012 0.7%,
        0.046 1.4%,
        0.193 3%,
        0.928 8.1%,
        1.179 10.2%,
        1.325 12.1%,
        1.369 13.1%,
        1.389 14.1%,
        1.391 14.8%,
        1.382 15.6%,
        1.328 17.3%,
        1.022 22.8%,
        0.926 24.9%,
        0.872 26.7%,
        0.848 28.6%,
        0.849 29.9%,
        0.864 31.4%,
        1.02 38.9%,
        1.047 41%,
        1.059 43.1%,
        1.053 46%,
        0.993 53.4%,
        0.977 57.5%,
        1.009 71.8%,
        0.997 86.1%,
        1
    );

    --spring-slight: linear(
        0,
        0.01 0.9%,
        0.037 1.8%,
        0.155 3.9%,
        0.793 11.2%,
        1.015 14.3%,
        1.156 17.3%,
        1.198 18.8%,
        1.224 20.4%,
        1.231 22.4%,
        1.213 24.7%,
        1.176 27%,
        1.006 35.6%,
        0.968 38.8%,
        0.949 42.1%,
        0.951 46.7%,
        0.997 57.3%,
        1.011 63.5%,
        0.998 84.2%,
        1
    );
}

@media screen and (max-width: 1700px) {
    :root {
        --wrapper-width: 1200px;
        --height-button: 50px;
    }
}

@media screen and (max-width:1280px) {
    :root {
        --side-padding: 30px;
        --wrapper-width: calc(100% - var(--side-padding) - var(--side-padding));
    }
}

@media screen and (max-width:760px) {
    :root {
        --side-padding: 20px;
        --wrapper-width: calc(100% - var(--side-padding) - var(--side-padding));
    }
}
:root {
    --color-red: #e81d62;
    --color-yellow: #ffb121;
    --color-yellow-tint: #ffefd3;
    --color-green: #9aa378;
    --color-brand: #07c4d2;
    --color-blue: #2b6eba;
    --color-gray: #363f45;
    --color-green-c: #8d9869;
    --color-brand-c: #00a1b3;
    --color-dark-c: #0093a9;
    --hamburger-color: var(--color-gray);
    --hamburger-color-hover: var(--color-gray);
    --box-border: var(--color-gray);
    --box-background: var(--color-yellow-tint);
}

:root {
    --col1: calc((100% / 12) * 1);
    --col2: calc((100% / 12) * 2);
    --col3: calc((100% / 12) * 3);
    --col4: calc((100% / 12) * 4);
    --col5: calc((100% / 12) * 5);
    --col6: calc((100% / 12) * 6);
    --col7: calc((100% / 12) * 7);
    --col8: calc((100% / 12) * 8);
    --col9: calc((100% / 12) * 9);
    --col10: calc((100% / 12) * 10);
    --col11: calc((100% / 12) * 11);
    --col12: calc((100% / 12) * 12);
    --col1px: calc((var(--wrapper-width) / 12) * 1);
    --col2px: calc((var(--wrapper-width) / 12) * 2);
    --col3px: calc((var(--wrapper-width) / 12) * 3);
    --col4px: calc((var(--wrapper-width) / 12) * 4);
    --col5px: calc((var(--wrapper-width) / 12) * 5);
    --col6px: calc((var(--wrapper-width) / 12) * 6);
    --col7px: calc((var(--wrapper-width) / 12) * 7);
    --col8px: calc((var(--wrapper-width) / 12) * 8);
    --col9px: calc((var(--wrapper-width) / 12) * 9);
    --col10px: calc((var(--wrapper-width) / 12) * 10);
    --col11px: calc((var(--wrapper-width) / 12) * 11);
    --col12px: calc((var(--wrapper-width) / 12) * 12);
}

.wrapper {
    position: relative;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    width: var(--wrapper-width);
}

.col1 {
    width: var(--col1);
}

.col2 {
    width: var(--col2);
}

.col3 {
    width: var(--col3);
}

.col4 {
    width: var(--col4);
}

.col5 {
    width: var(--col5);
}

.col6 {
    width: var(--col6);
}

.col7 {
    width: var(--col7);
}

.col8 {
    width: var(--col8);
}

.col9 {
    width: var(--col9);
}

.col10 {
    width: var(--col10);
}

.col11 {
    width: var(--col11);
}

.col12 {
    width: var(--col12);
}

.col1px {
    width: var(--col1px);
}

.col2px {
    width: var(--col2px);
}

.col3px {
    width: var(--col3px);
}

.col4px {
    width: var(--col4px);
}

.col5px {
    width: var(--col5px);
}

.col6px {
    width: var(--col6px);
}

.col7px {
    width: var(--col7px);
}

.col8px {
    width: var(--col8px);
}

.col9px {
    width: var(--col9px);
}

.col10px {
    width: var(--col10px);
}

.col11px {
    width: var(--col11px);
}

.col12px {
    width: var(--col12px);
}

.alignRight {
    text-align: right;
    justify-content: flex-end;
}

.colAlignRight {
    justify-content: flex-end;
    margin-left: auto !important;
}

.alignCenter {
    text-align: center;
    justify-content: center;
}

.colAlignCenter {
    display: flex !important;
    justify-content: center !important;
}

.pullRight {
    margin-left: auto;
}

/* ubuntu-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/ubuntu-v21-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ubuntu-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 500;
    src: url("fonts/ubuntu-v21-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* prosto-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Prosto";
    font-style: normal;
    font-weight: 300;
    src: url("fonts/prosto-sans-cond-light.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-family: "icomoon";
    src: url("fonts/icomoon.eot?yzugj4");
    src:
        url("fonts/icomoon.eot?yzugj4#iefix") format("embedded-opentype"),
        url("fonts/icomoon.ttf?yzugj4") format("truetype"),
        url("fonts/icomoon.woff?yzugj4") format("woff"),
        url("fonts/icomoon.svg?yzugj4#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-adult:before {
    content: "\e900";
}
.icon-dots:before {
    content: "\e901";
}
.icon-external:before {
    content: "\e902";
}
.icon-smile:before {
    content: "\e903";
}
.icon-substances:before {
    content: "\e904";
}
.icon-walk:before {
    content: "\e905";
}

/*
    Light 300
    Regular 400
    Medium 500
    SemiBold 600
    Bold 700
    ExtraBold 800
*/

:root {
    --font-nav: 500 18px/32px "Ubuntu", sans-serif;
    --font-h1: 500 68px/70px "Ubuntu", sans-serif;
    --font-intro: 300 25px/40px "Prosto", sans-serif;
    --font-button: 500 24px/35px "Ubuntu", sans-serif;
    --font-bold-header: 500 22px/32px "Ubuntu", sans-serif;
    --font-text: 300 20px/30px "Prosto", sans-serif;
    --font-quote: 400 44px/54px "Ubuntu", sans-serif;
    --font-cta: 500 44px/54px "Ubuntu", sans-serif;
    --font-copyright: 400 13px/13px "Ubuntu", sans-serif;
}

@media screen and (max-width: 1900px) {
    :root {
        --font-nav: 500 16px/32px "Ubuntu", sans-serif;
        --font-h1: 500 38px/42px "Ubuntu", sans-serif;
        --font-intro: 300 20px/32px "Prosto", sans-serif;
        --font-button: 500 18px/24px "Ubuntu", sans-serif;
        --font-bold-header: 500 18px/27px "Ubuntu", sans-serif;
        --font-text: 300 16px/24px "Prosto", sans-serif;
        --font-quote: 400 20px/27px "Ubuntu", sans-serif;
        --font-cta: 500 20px/27px "Ubuntu", sans-serif;
        --font-copyright: 400 13px/13px "Ubuntu", sans-serif;
        --font-label: 500 30px/35px "Ubuntu", sans-serif;
        --font-label-small: 500 22px/35px "Ubuntu", sans-serif;
    }
}

@media screen and (max-width: 1600px) {
    :root {
    }
}

@media screen and (max-width: 1280px) {
    :root {
    }
}

@media screen and (max-width: 760px) {
    :root {
    }
}

:root {
    dynamic-range-limit: standard;
}

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

*:not(dialog) {
    margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

label.error {
    display: none !important;
}
/*.select-hidden, select {
    display: none;
    visibility: hidden;
    padding-right: 10px;
}*/
form input.error, form textarea.error {
    background: #e78585 !important
}
/*
.select-hidden, select {
    display: none;
    visibility: hidden;
    padding-right: 10px;
}
.select {
    cursor: pointer;
    display: block;
    position: relative;
    font: var(--button-font);
    color: #FFF;
    height: 40px;
    width: 100%;
}

.select-styled {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--blauw);
    padding: 8px 15px;
    color: #FFF;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    height: 50px;
    box-sizing: border-box;
}

    .select-styled:after {
        content: "\e917";
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        right: 40px;
        height: 100%;
        display: flex;
        align-content: center;
        align-items: center;
        font-size: 12px;
    }

    .select-styled.selected {
        color: #FFF;
    }

    .select-styled:active, .select-styled.active {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
    }

        .select-styled:active:after, .select-styled.active:after {
            transform: translate(20px, 0) rotate(180deg);
        }

.select-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 999;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--blauw);
}

    .select-options li {
        margin: 0;
        font: var(--button-font);
        margin: 0 25px;
        padding: 0 10px;
        height: 40px;
        display: flex;
        align-items: center;
        line-height: 40px;
        color: #FFF;
        border-top: 0;
        -moz-transition: all 0.15s ease-in;
        -o-transition: all 0.15s ease-in;
        -webkit-transition: all 0.15s ease-in;
        transition: all 0.15s ease-in;
        border-bottom: 1px solid var(--bruin);
    }

        .select-options li:last-of-type {
            border: 0;
        }

        .select-options li:hover, .select-options li.is-selected {
            color: #FFF;
        }

        .select-options li[rel="hide"] {
            display: none;
        }*/
label.checkBoxContainer {
    display: block;
    position: relative;
    width: auto;
    margin: 0 20px 0 0 !important;
    height: auto !important;
    line-height: normal !important;
    padding: 0 0 0 35px;
    font: var(--default-tekst) !important;
    align-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

    label.checkBoxContainer a {
        text-decoration: underline;
    }

.checkBoxContainer .checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background: var(--box-background);
    box-sizing: border-box;
    background-color: none;
    transition: ease-in-out background-color .3s;
    bottom: 0;
    margin: auto;
}

    .checkmark:after {
        content: "";
        position: absolute;
        display: none
    }

.checkBoxContainer .checkbox:checked ~ .checkmark:after {
    display: flex;
    content: "x";
}

.checkBoxContainer .checkmark:after {
    left: 0;
    top: -3px;
    width: 100%;
    height: 100%;
    font-size: 18px;
    color: var(--zwart);
    justify-content: center;
    align-content: center;
    align-items: center;
}

form .contactRow {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    margin:0 0 10px 0;
}

    form .contactRow.firstRow {
        margin: 40px 0 10px;
    }

.formulier label, .zoekContainer label {
    width: 100%;
    font: var(--default-tekst);
    color: #fff
}

.formulier label {
    width: 100%;
    height: auto;
    line-height: normal;
    display: flex;
    align-content: center;
    align-items: center;
    margin: 0 10px 0 0;
    color: var(--zwart);
    font: var(--font-bold-header);
    height: var(--height-input);
    line-height: var(--height-input);
}
.formulier label span{
    font-size:14px;
    margin-left:5px;
}
    .formulier.contact label{
    color: #000;
}
.formulier .box, .zoekVeldContainer .box, .prijs-velden .box, .km-velden .box {
    position: relative;
    box-sizing: border-box;
    padding: 0 15px;
    display: block;
    color: var(--zwart);
    height: var(--height-input);
    line-height: var(--height-input);
    border: 0;
    flex: 1;
    border: 1px solid var(--box-border);
    background: var(--box-background);
    margin: 0 0 20px;
    font: var(--default-tekst);
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 0 0;
    border-radius: var(--button-radius);
}

.prijs-velden .box, .km-velden .box {
    margin: 0 0 10px;
    width: 100%;
    height: 40px;
    border-radius: 10px;
}

.formulier input[type="radio"].box {
    height: 25px;
    width: 25px;
    padding: 0;
    width: auto;
    flex: none;
    margin: 0 10px 0 0;
}

.radioButtons, .radioButtons label {
    display: flex;
    align-content: center;
    align-items: center;
}

    .radioButtons label {
        margin: 0 20px 0 0;
    }

.formulier .box.firstInput {
    margin: 55px 0 20px;
}

.zoekVeldContainer .box {
    background: #FFF;
    margin: 0 10px 0 0;
}

.search .box:hover {
    background: var(--blauw);
    color: var(--licht-grijs);
}

.formulier .box::placeholder, .search .box::placeholder {
    color: #CECECE;
}

.formulier .selectBoxContainer {
    width: calc(100% - var(--grid-gap));
}

.formulier textarea.box {
    height: 150px;
    width: 100%;
    font: var(--default-tekst);
    padding: 10px 15px;
    border: 0;
    outline: none;
    border: 1px solid var(--box-border);

}
.formulier .box.last {
    border-bottom:1px solid var(--box-border)
}
    .formulier .btnContainer {
    margin-top: 40px;
    margin-right: 10px;
    text-align: right;
}

label.radio {
    width: fit-content;
    display: inline-flex;
    align-content: center;
    align-items: center;
    height: auto;
    line-height: normal;
}

.has-error {
    border: 1px solid red;
    padding: 5px;
}

@media screen and (max-width:1600px) {
}

@media screen and (max-width:1250px) {
    .formulier label {
        line-height: normal;
    }
}

.hamburger--3dx .hamburger-box, .hamburger--3dx-r .hamburger-box, .hamburger--3dy .hamburger-box, .hamburger--3dy-r .hamburger-box {
    perspective: 80px
}

.hamburger {
    position: absolute;
    right: 50px;
    top: 40px;
    font: inherit;
    display: none;
    overflow: visible;
    margin: 0;
    padding: 0;
    cursor: pointer;
    transition-timing-function: linear;
    transition-duration: .15s;
    transition-property: opacity,filter;
    text-transform: none;
    color: inherit;
    border: 0;
    background-color: transparent
}

.hamburger--emphatic, .hamburger--emphatic-r {
    overflow: hidden
}

.hamburger:hover .hamburger-inner, .hamburger:hover .hamburger-inner:after, .hamburger:hover .hamburger-inner:before {
    background-color: var(--hamburger-color-hover);
}

.sticky .hamburger:hover .sticky .hamburger-inner, .sticky .hamburger:hover .sticky .hamburger-inner:after, .sticky .hamburger:hover .hamburger-inner:before,
.is-active .hamburger:hover .is-active .hamburger-inner, .is-active .hamburger:hover .is-active .hamburger-inner:after, .is-active .hamburger:hover .hamburger-inner:before {
    background-color: var(--hamburger-color--hover-sticky);
}

.hamburger-box {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 24px
}

.hamburger-inner {
    top: 50%;
    display: block;
    margin-top: -2px
}

    .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
        position: absolute;
        width: 30px;
        height: 2px;
        transition-timing-function: ease;
        transition-duration: .15s;
        transition-property: transform;
        border-radius: 0;
        background-color: var(--hamburger-color);
    }
.sticky .hamburger-inner, .sticky .hamburger-inner:after, .sticky .hamburger-inner:before,
.is-active .hamburger-inner, .is-active .hamburger-inner:after, .is-active .hamburger-inner:before {
    background-color: var(--hamburger-color-sticky);
}

        .hamburger-inner:after, .hamburger-inner:before {
            display: block;
            content: ""
        }

        .hamburger-inner:before {
            top: -10px
        }

        .hamburger-inner:after {
            bottom: -10px
        }

.hamburger--3dx .hamburger-inner {
    transition: transform .15s cubic-bezier(.645,.045,.355,1),background-color 0 cubic-bezier(.645,.045,.355,1) .1s
}

    .hamburger--3dx .hamburger-inner:after, .hamburger--3dx .hamburger-inner:before {
        transition: transform 0 cubic-bezier(.645,.045,.355,1) .1s
    }

.hamburger--3dx.is-active .hamburger-inner {
    transform: rotateY(180deg);
    background-color: transparent
}

    .hamburger--3dx.is-active .hamburger-inner:before {
        transform: translate3d(0,10px,0) rotate(45deg)
    }

    .hamburger--3dx.is-active .hamburger-inner:after {
        transform: translate3d(0,-10px,0) rotate(-45deg)
    }

.hamburger--3dx-r .hamburger-inner {
    transition: transform .15s cubic-bezier(.645,.045,.355,1),background-color 0 cubic-bezier(.645,.045,.355,1) .1s
}

    .hamburger--3dx-r .hamburger-inner:after, .hamburger--3dx-r .hamburger-inner:before {
        transition: transform 0 cubic-bezier(.645,.045,.355,1) .1s
    }

.hamburger--3dx-r.is-active .hamburger-inner {
    transform: rotateY(-180deg);
    background-color: transparent
}

    .hamburger--3dx-r.is-active .hamburger-inner:before {
        transform: translate3d(0,10px,0) rotate(45deg)
    }

    .hamburger--3dx-r.is-active .hamburger-inner:after {
        transform: translate3d(0,-10px,0) rotate(-45deg)
    }

.hamburger--3dy .hamburger-inner {
    transition: transform .15s cubic-bezier(.645,.045,.355,1),background-color 0 cubic-bezier(.645,.045,.355,1) .1s
}

    .hamburger--3dy .hamburger-inner:after, .hamburger--3dy .hamburger-inner:before {
        transition: transform 0 cubic-bezier(.645,.045,.355,1) .1s
    }

.hamburger--3dy.is-active .hamburger-inner {
    transform: rotateX(-180deg);
    background-color: transparent
}

    .hamburger--3dy.is-active .hamburger-inner:before {
        transform: translate3d(0,10px,0) rotate(45deg)
    }

    .hamburger--3dy.is-active .hamburger-inner:after {
        transform: translate3d(0,-10px,0) rotate(-45deg)
    }

.hamburger--3dy-r .hamburger-inner {
    transition: transform .15s cubic-bezier(.645,.045,.355,1),background-color 0 cubic-bezier(.645,.045,.355,1) .1s
}

    .hamburger--3dy-r .hamburger-inner:after, .hamburger--3dy-r .hamburger-inner:before {
        transition: transform 0 cubic-bezier(.645,.045,.355,1) .1s
    }

.hamburger--3dy-r.is-active .hamburger-inner {
    transform: rotateX(180deg);
    background-color: transparent
}

    .hamburger--3dy-r.is-active .hamburger-inner:before {
        transform: translate3d(0,10px,0) rotate(45deg)
    }

    .hamburger--3dy-r.is-active .hamburger-inner:after {
        transform: translate3d(0,-10px,0) rotate(-45deg)
    }

.hamburger--arrow.is-active .hamburger-inner:before {
    transform: translate3d(-8px,0,0) rotate(-45deg) scaleX(.7)
}

.hamburger--arrow.is-active .hamburger-inner:after {
    transform: translate3d(-8px,0,0) rotate(45deg) scaleX(.7)
}

.hamburger--arrow-r.is-active .hamburger-inner:before {
    transform: translate3d(8px,0,0) rotate(45deg) scaleX(.7)
}

.hamburger--arrow-r.is-active .hamburger-inner:after {
    transform: translate3d(8px,0,0) rotate(-45deg) scaleX(.7)
}

.hamburger--arrowalt .hamburger-inner:before {
    transition: top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)
}

.hamburger--arrowalt .hamburger-inner:after {
    transition: bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)
}

.hamburger--arrowalt.is-active .hamburger-inner:before {
    top: 0;
    transition: top .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;
    transform: translate3d(-8px,-10px,0) rotate(-45deg) scaleX(.7)
}

.hamburger--arrowalt.is-active .hamburger-inner:after {
    bottom: 0;
    transition: bottom .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;
    transform: translate3d(-8px,10px,0) rotate(45deg) scaleX(.7)
}

.hamburger--arrowalt-r .hamburger-inner:before {
    transition: top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)
}

.hamburger--arrowalt-r .hamburger-inner:after {
    transition: bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)
}

.hamburger--arrowalt-r.is-active .hamburger-inner:before {
    top: 0;
    transition: top .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;
    transform: translate3d(8px,-10px,0) rotate(45deg) scaleX(.7)
}

.hamburger--arrowalt-r.is-active .hamburger-inner:after {
    bottom: 0;
    transition: bottom .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;
    transform: translate3d(8px,10px,0) rotate(-45deg) scaleX(.7)
}

.hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner:after, .hamburger--boring .hamburger-inner:before {
    transition-property: none
}

.hamburger--boring.is-active .hamburger-inner {
    transform: rotate(45deg)
}

    .hamburger--boring.is-active .hamburger-inner:before {
        top: 0;
        opacity: 0
    }

    .hamburger--boring.is-active .hamburger-inner:after {
        bottom: 0;
        transform: rotate(-90deg)
    }

.hamburger--collapse .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-delay: .13s;
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .13s
}

    .hamburger--collapse .hamburger-inner:after {
        top: -20px;
        transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear
    }

    .hamburger--collapse .hamburger-inner:before {
        transition: top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--collapse.is-active .hamburger-inner {
    transition-delay: .22s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: translate3d(0,-10px,0) rotate(-45deg)
}

    .hamburger--collapse.is-active .hamburger-inner:after {
        top: 0;
        transition: top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;
        opacity: 0
    }

    .hamburger--collapse.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;
        transform: rotate(-90deg)
    }

.hamburger--collapse-r .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-delay: .13s;
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .13s
}

    .hamburger--collapse-r .hamburger-inner:after {
        top: -20px;
        transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear
    }

    .hamburger--collapse-r .hamburger-inner:before {
        transition: top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--collapse-r.is-active .hamburger-inner {
    transition-delay: .22s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: translate3d(0,-10px,0) rotate(45deg)
}

    .hamburger--collapse-r.is-active .hamburger-inner:after {
        top: 0;
        transition: top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;
        opacity: 0
    }

    .hamburger--collapse-r.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;
        transform: rotate(90deg)
    }

.hamburger--elastic .hamburger-inner {
    top: 2px;
    transition-timing-function: cubic-bezier(.68,-.55,.265,1.55);
    transition-duration: .275s
}

    .hamburger--elastic .hamburger-inner:before {
        top: 10px;
        transition: opacity .125s ease .275s
    }

    .hamburger--elastic .hamburger-inner:after {
        top: 20px;
        transition: transform .275s cubic-bezier(.68,-.55,.265,1.55)
    }

.hamburger--elastic.is-active .hamburger-inner {
    transition-delay: 75ms;
    transform: translate3d(0,10px,0) rotate(135deg)
}

    .hamburger--elastic.is-active .hamburger-inner:before {
        transition-delay: 0;
        opacity: 0
    }

    .hamburger--elastic.is-active .hamburger-inner:after {
        transition-delay: 75ms;
        transform: translate3d(0,-20px,0) rotate(-270deg)
    }

.hamburger--elastic-r .hamburger-inner {
    top: 2px;
    transition-timing-function: cubic-bezier(.68,-.55,.265,1.55);
    transition-duration: .275s
}

    .hamburger--elastic-r .hamburger-inner:before {
        top: 10px;
        transition: opacity .125s ease .275s
    }

    .hamburger--elastic-r .hamburger-inner:after {
        top: 20px;
        transition: transform .275s cubic-bezier(.68,-.55,.265,1.55)
    }

.hamburger--elastic-r.is-active .hamburger-inner {
    transition-delay: 75ms;
    transform: translate3d(0,10px,0) rotate(-135deg)
}

    .hamburger--elastic-r.is-active .hamburger-inner:before {
        transition-delay: 0;
        opacity: 0
    }

    .hamburger--elastic-r.is-active .hamburger-inner:after {
        transition-delay: 75ms;
        transform: translate3d(0,-20px,0) rotate(270deg)
    }

.hamburger--emphatic .hamburger-inner {
    transition: background-color .125s ease-in .175s
}

    .hamburger--emphatic .hamburger-inner:before {
        left: 0;
        transition: transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s
    }

    .hamburger--emphatic .hamburger-inner:after {
        top: 10px;
        right: 0;
        transition: transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,right .125s ease-in .175s
    }

.hamburger--emphatic.is-active .hamburger-inner {
    transition-delay: 0;
    transition-timing-function: ease-out;
    background-color: transparent
}

    .hamburger--emphatic.is-active .hamburger-inner:before {
        top: -80px;
        left: -80px;
        transition: left .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;
        transform: translate3d(80px,80px,0) rotate(45deg)
    }

    .hamburger--emphatic.is-active .hamburger-inner:after {
        top: -80px;
        right: -80px;
        transition: right .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;
        transform: translate3d(-80px,80px,0) rotate(-45deg)
    }

.hamburger--emphatic-r .hamburger-inner {
    transition: background-color .125s ease-in .175s
}

    .hamburger--emphatic-r .hamburger-inner:before {
        left: 0;
        transition: transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s
    }

    .hamburger--emphatic-r .hamburger-inner:after {
        top: 10px;
        right: 0;
        transition: transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,right .125s ease-in .175s
    }

.hamburger--emphatic-r.is-active .hamburger-inner {
    transition-delay: 0;
    transition-timing-function: ease-out;
    background-color: transparent
}

    .hamburger--emphatic-r.is-active .hamburger-inner:before {
        top: 80px;
        left: -80px;
        transition: left .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;
        transform: translate3d(80px,-80px,0) rotate(-45deg)
    }

    .hamburger--emphatic-r.is-active .hamburger-inner:after {
        top: 80px;
        right: -80px;
        transition: right .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;
        transform: translate3d(-80px,-80px,0) rotate(45deg)
    }

.hamburger--slider .hamburger-inner:before, .hamburger--slider-r .hamburger-inner:before {
    transition-timing-function: ease;
    transition-duration: .15s;
    transition-property: transform,opacity
}

.hamburger--slider .hamburger-inner {
    top: 2px
}

    .hamburger--slider .hamburger-inner:before {
        top: 10px
    }

    .hamburger--slider .hamburger-inner:after {
        top: 20px
    }

.hamburger--slider.is-active .hamburger-inner {
    transform: translate3d(0,10px,0) rotate(45deg)
}

    .hamburger--slider.is-active .hamburger-inner:before {
        transform: rotate(-45deg) translate3d(-5.71px,-6px,0);
        opacity: 0
    }

    .hamburger--slider.is-active .hamburger-inner:after {
        transform: translate3d(0,-20px,0) rotate(-90deg)
    }

.hamburger--slider-r .hamburger-inner {
    top: 2px
}

    .hamburger--slider-r .hamburger-inner:before {
        top: 10px
    }

    .hamburger--slider-r .hamburger-inner:after {
        top: 20px
    }

.hamburger--slider-r.is-active .hamburger-inner {
    transform: translate3d(0,10px,0) rotate(-45deg)
}

    .hamburger--slider-r.is-active .hamburger-inner:before {
        transform: rotate(45deg) translate3d(5.71px,-6px,0);
        opacity: 0
    }

    .hamburger--slider-r.is-active .hamburger-inner:after {
        transform: translate3d(0,-20px,0) rotate(90deg)
    }

.hamburger--spring .hamburger-inner {
    top: 2px;
    transition: background-color 0 linear .13s
}

    .hamburger--spring .hamburger-inner:before {
        top: 10px;
        transition: top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
    }

    .hamburger--spring .hamburger-inner:after {
        top: 20px;
        transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--spring.is-active .hamburger-inner {
    transition-delay: .22s;
    background-color: transparent
}

    .hamburger--spring.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;
        transform: translate3d(0,10px,0) rotate(45deg)
    }

    .hamburger--spring.is-active .hamburger-inner:after {
        top: 0;
        transition: top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s cubic-bezier(.215,.61,.355,1) .22s;
        transform: translate3d(0,10px,0) rotate(-45deg)
    }

.hamburger--spring-r .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-delay: 0;
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .13s
}

    .hamburger--spring-r .hamburger-inner:after {
        top: -20px;
        transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity 0 linear
    }

    .hamburger--spring-r .hamburger-inner:before {
        transition: top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--spring-r.is-active .hamburger-inner {
    transition-delay: .22s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: translate3d(0,-10px,0) rotate(-45deg)
}

    .hamburger--spring-r.is-active .hamburger-inner:after {
        top: 0;
        transition: top .2s cubic-bezier(.33333,0,.66667,.33333),opacity 0 linear .22s;
        opacity: 0
    }

    .hamburger--spring-r.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;
        transform: rotate(90deg)
    }

.hamburger--stand .hamburger-inner {
    transition: transform 75ms cubic-bezier(.55,.055,.675,.19) .15s,background-color 0 linear 75ms
}

    .hamburger--stand .hamburger-inner:before {
        transition: top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0
    }

    .hamburger--stand .hamburger-inner:after {
        transition: bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0
    }

.hamburger--stand.is-active .hamburger-inner {
    transition: transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0 linear .15s;
    transform: rotate(90deg);
    background-color: transparent
}

    .hamburger--stand.is-active .hamburger-inner:before {
        top: 0;
        transition: top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;
        transform: rotate(-45deg)
    }

    .hamburger--stand.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;
        transform: rotate(45deg)
    }

.hamburger--stand-r .hamburger-inner {
    transition: transform 75ms cubic-bezier(.55,.055,.675,.19) .15s,background-color 0 linear 75ms
}

    .hamburger--stand-r .hamburger-inner:before {
        transition: top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0
    }

    .hamburger--stand-r .hamburger-inner:after {
        transition: bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0
    }

.hamburger--stand-r.is-active .hamburger-inner {
    transition: transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0 linear .15s;
    transform: rotate(-90deg);
    background-color: transparent
}

    .hamburger--stand-r.is-active .hamburger-inner:before {
        top: 0;
        transition: top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;
        transform: rotate(-45deg)
    }

    .hamburger--stand-r.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;
        transform: rotate(45deg)
    }

.hamburger--spin .hamburger-inner {
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .22s
}

    .hamburger--spin .hamburger-inner:before {
        transition: top .1s ease-in .25s,opacity .1s ease-in
    }

    .hamburger--spin .hamburger-inner:after {
        transition: bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--spin.is-active .hamburger-inner {
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: rotate(225deg)
}

    .hamburger--spin.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s ease-out,opacity .1s ease-out .12s;
        opacity: 0
    }

    .hamburger--spin.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;
        transform: rotate(-90deg)
    }

.hamburger--spin-r .hamburger-inner {
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .22s
}

    .hamburger--spin-r .hamburger-inner:before {
        transition: top .1s ease-in .25s,opacity .1s ease-in
    }

    .hamburger--spin-r .hamburger-inner:after {
        transition: bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--spin-r.is-active .hamburger-inner {
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: rotate(-225deg)
}

    .hamburger--spin-r.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s ease-out,opacity .1s ease-out .12s;
        opacity: 0
    }

    .hamburger--spin-r.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;
        transform: rotate(90deg)
    }

.hamburger--squeeze .hamburger-inner {
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: 75ms
}

    .hamburger--squeeze .hamburger-inner:before {
        transition: top 75ms ease .12s,opacity 75ms ease
    }

    .hamburger--squeeze .hamburger-inner:after {
        transition: bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--squeeze.is-active .hamburger-inner {
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: rotate(45deg)
}

    .hamburger--squeeze.is-active .hamburger-inner:before {
        top: 0;
        transition: top 75ms ease,opacity 75ms ease .12s;
        opacity: 0
    }

    .hamburger--squeeze.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s;
        transform: rotate(-90deg)
    }

.hamburger--vortex .hamburger-inner {
    transition-timing-function: cubic-bezier(.19,1,.22,1);
    transition-duration: .2s
}

    .hamburger--vortex .hamburger-inner:after, .hamburger--vortex .hamburger-inner:before {
        transition-delay: .1s;
        transition-timing-function: linear;
        transition-duration: 0
    }

    .hamburger--vortex .hamburger-inner:before {
        transition-property: top,opacity
    }

    .hamburger--vortex .hamburger-inner:after {
        transition-property: bottom,transform
    }

.hamburger--vortex.is-active .hamburger-inner {
    transition-timing-function: cubic-bezier(.19,1,.22,1);
    transform: rotate(765deg)
}

    .hamburger--vortex.is-active .hamburger-inner:after, .hamburger--vortex.is-active .hamburger-inner:before {
        transition-delay: 0
    }

    .hamburger--vortex.is-active .hamburger-inner:before {
        top: 0;
        opacity: 0
    }

    .hamburger--vortex.is-active .hamburger-inner:after {
        bottom: 0;
        transform: rotate(90deg)
    }

.hamburger--vortex-r .hamburger-inner {
    transition-timing-function: cubic-bezier(.19,1,.22,1);
    transition-duration: .2s
}

    .hamburger--vortex-r .hamburger-inner:after, .hamburger--vortex-r .hamburger-inner:before {
        transition-delay: .1s;
        transition-timing-function: linear;
        transition-duration: 0
    }

    .hamburger--vortex-r .hamburger-inner:before {
        transition-property: top,opacity
    }

    .hamburger--vortex-r .hamburger-inner:after {
        transition-property: bottom,transform
    }

.hamburger--vortex-r.is-active .hamburger-inner {
    transition-timing-function: cubic-bezier(.19,1,.22,1);
    transform: rotate(-765deg)
}

    .hamburger--vortex-r.is-active .hamburger-inner:after, .hamburger--vortex-r.is-active .hamburger-inner:before {
        transition-delay: 0
    }

    .hamburger--vortex-r.is-active .hamburger-inner:before {
        top: 0;
        opacity: 0
    }

    .hamburger--vortex-r.is-active .hamburger-inner:after {
        bottom: 0;
        transform: rotate(-90deg)
    }

html,
body {
    overflow-x: hidden;
}

body {
    font: var(--font-text);
    color: var(--color-gray);
}

    /* Ambulant overwrites. */
    body.is-ambulant {
        .header-image-wrapper .blob-background

{
    fill: var(--color-brand-c);
}

[data-ambulant-color] {
    background-color: var(--color-yellow-tint);
    h2, h3, p, a

{
    color: var(--color-text);
    &:hover

{
    color: inherit;
}

}

.header-inner {
    padding-bottom: 200px;
}

}
}

/* Global utilities. */
h1 {
    font: var(--font-h1);
    color: var(--color-brand-c);
}

h2 {
    font: var(--font-bold-header);
}

.blob-frame {
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    overflow: inherit;
}

.blob-small {
    max-width: 640px;
}

.blob-flip {
    /* Flip the whole SVG, then counter-flip the image back to normal. */
    /*transform: scaleX(-1);*/
}

    .blob-flip .blob-img {
        /*transform: scaleX(-1);*/
    }

.blob-bg-shift .blob-background {
    /* Moves the background of the blob to the top right. */
    translate: -8% -12%;
    display: flex;
}

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

.site-switch-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    font: var(--font-nav);
    color: #fff;
    background-color: var(--color-brand-c);
    padding-block: 16px;
}

    .site-switch-container p {
        font-size: 19px;
    }

.site-toggle-wrapper {
    display: block;
    width: 52px;
    height: 28px;
    background-color: #fff;
    border-radius: 100vw;
    outline: 5px solid white;
}

    .site-toggle-wrapper::before {
        content: "";
        display: block;
        width: 28px;
        height: 28px;
        outline: 5px solid white;
        background-color: var(--color-brand-c);
        border-radius: 100vw;
        /* Can be removed when the toggle is functional, just for visual testing. */
        transition: translate 0.1s ease;
    }

    .site-toggle-wrapper.active::before {
        translate: 24px 0;
    }

.pill-button {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 28px;
    font: var(--font-button);
    text-decoration: none;
    color: inherit;
    background: none;
    border-radius: 100vw;
    margin-top: 48px;
    padding: 16px 28px;
    border: 1.5px solid var(--color-gray);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    .pill-button.filled {
        border: none;
        background-color: #fff;
        color: var(--color-text);
    }

    .pill-button.small {
        font: var(--font-bold-header);
        padding: 10px 28px;
    }

    .pill-button.smaller {
        font: var(--font-nav);
        padding: 10px 28px;
    }

    .pill-button span {
        text-wrap: nowrap;
    }

    .pill-button .button-hook {
        overflow: inherit;
        width: 30px;
        height: 30px;
    }

    .pill-button:hover .button-hook-l {
        rotate: 30deg;
        scale: 1.2;
    }

    .pill-button:hover .button-hook-r {
        rotate: -30deg;
        scale: 1.2;
    }

    .pill-button:hover {
        background-color: var(--color-yellow);
        border-color: transparent;
    }

.button-hook-l,
.button-hook-r {
    transition: rotate 1.2s var(--spring), scale 0.2s ease;
}

.button-hook-l {
    transform-origin: 50% 30%;
}

.button-hook-r {
    transform-origin: 50% 30%;
}

/* Shared page components. */
.top-nav {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: 48px;
    padding-inline: var(--edge-padding);
    padding-block: 24px;
}

    .top-nav a {
        color: var(--color-text);
        font: var(--font-nav);
        text-decoration: none;
    }

        .top-nav a.active {
            text-decoration: underline;
            text-underline-offset: 6px;
            text-decoration-thickness: 2px;
        }
    .top-nav .menu {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        gap: 60px;
    }
.logo-wrapper {
    display: flex;
    flex-grow: 1;
    margin-right: auto;
}

.logo {
    height: 68px;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 64px;
    width: 100%;
    max-width: 1700px;
    margin-top: 90px;
    margin-inline: auto;
}

.header-image-wrapper {
    position: relative;
    width: 70%;
}

    .header-image-wrapper .blob-frame {
        translate: -5% 0%;
    }

    .header-image-wrapper.hook::before {
        display: inline-block;
        content: "";
        position: absolute;
        width: 70%;
        aspect-ratio: 105 / 127; /* Don't ask... */
        background-image: url("/img/hook-header.svg");
        background-size: cover;
        translate: -55% -50%;
        left: 50%;
        top: 50%;
        z-index: 1;
    }

.header-text-wrapper {
    display: flex;
    flex-direction: column;
    width: 30%;
    height: 100%;
}

    .header-text-wrapper .btnContainer {
        display: flex;
        gap: 10px;
    }

.header-inner.sub-page .header-image-wrapper {
    width: 60%;
}

.header-inner.sub-page .header-text-wrapper {
    width: 50%;
}

.header-site-selector {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    color: var(--color-brand-c);
    font: var(--font-nav);
}

    .header-site-selector a {
        position: relative;
        text-decoration: none !important;
        padding-bottom: 7px;
    }

    .header-site-selector .selected::before {
        content: "";
        position: absolute;
        bottom: 6px; /* Position the line */
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--color-brand-c);
    }

    .header-site-selector .selected::after {
        content: "";
        position: absolute;
        bottom: 1px;
        left: 50%;
        width: 12px;
        height: 12px;
        border-right: 2px solid var(--color-brand-c);
        border-bottom: 2px solid var(--color-brand-c);
        background-color: #fff;
        transform: translateX(-50%) rotate(45deg);
    }

body.is-ambulant .header-site-selector .selected::after {
    background-color: var(--color-yellow-tint);
}

.header-site-selector .icon-external {
    display: inline-flex;
    translate: 3px 3px;
    font-size: 22px;
}

.header-pre-title {
    font: var(--font-nav);
    font-size: 22px;
    margin-bottom: 14px;
}

.intro {
    font: var(--font-intro);
    margin-top: 24px;
}

.quote-container {
    margin-top: 180px;
}

.quote-inner {
    display: flex;
    gap: 64px;
    translate: -3.5% 0%;
}

.quote-content {
    margin-top: 20px;
}

.quote-image {
    width: 190px;
    aspect-ratio: 1/1;
}

    .quote-image img {
        border-radius: 100%;
    }

.quote-text {
    font: var(--font-quote);
    color: var(--color-brand-c);
}

.quote-author {
    margin-top: 8px;
}

.quote-container.blue .quote-inner {
    background-color: var(--color-brand-c);
    color: #fff;
    padding-left: 64px;
    padding-block: 48px;
    border-radius: var(--aside-border-radius) 0px 0px var(--aside-border-radius);
    position: relative;
    z-index: 1;
}

.quote-container.blue .quote-text {
    color: #fff;
}

.quote-container.blue .quote-image {
    margin-left: -154px;
}

.quote-container.blue .quote-inner::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 100vw;
    background-color: inherit;
    z-index: -1;
}

.image-text-section {
    display: flex;
    align-items: center;
    margin-top: 250px;
    gap: 64px;
}

    .image-text-section.full-width svg {
        scale: 1.3;
    }

    .image-text-section.full-width:not(.flipped) .section-content-wrapper {
        margin-left: auto;
    }

    .image-text-section.full-width.flipped .section-content-wrapper {
        margin-right: auto;
    }

.section-content-wrapper ul, .section-content-wrapper ol {
    padding: 0;
    padding-left: 10px;
}

.section-content-wrapper li {
    list-style-position: outside;
    list-style-type: ">";
    padding-left: 8px;
}

.section-content-wrapper.checkmarks ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.section-content-wrapper.checkmarks li {
    list-style-type: "";
    position: relative;
    padding-left: 32px;
    margin-bottom: 10px;
}

.section-content-wrapper .checkmarks {
    padding: 0;
}

    .section-content-wrapper .checkmarks li {
        display: flex;
        list-style: none;
        padding: 0;
    }

.checkmarks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    background-image: url('/img/checkmark.svg');
    background-repeat: no-repeat;
    background-size: contain;
}

.team-quote {
    margin-top: 32px;
    color: var(--color-brand-c);
}

.team-contact-actions {
    display: flex;
    gap: 24px;
    margin-top: 24px;
}

.team-contact-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.image-text-section.flipped {
    flex-direction: row-reverse;
}

    .image-text-section.flipped svg {
        margin-left: auto;
    }

.usp-section {
    margin-top: 300px;
    padding-inline: var(--col1);
}

.usp-container {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    margin-top: 64px;
}

.usp-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.usp-icon {
    font-size: 151px;
    color: var(--color-brand);
    vertical-align: bottom;
}

.steps-container {
    counter-reset: step-counter;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 240px;
}

.step-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--color-yellow-tint);
    counter-increment: step-counter;
    border-radius: var(--aside-border-radius);
    padding: 112px 64px;
    /* --- JS Animation Base Styles --- */
    opacity: 0;
    transform: translateY(20px); /* Slight drop for a nice pop-in effect */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    /* JS will add this class when the card enters the viewport */
    .step-wrapper.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .step-wrapper h2 {
        font: var(--font-bold-header);
    }

.step-number::before {
    content: counter(step-counter);
    display: flex;
    translate: 0px -6px;
    margin-right: 48px;
    font: var(--font-cta);
    font-size: 148px;
    color: var(--color-brand-c);
}

.step-indicator {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    z-index: 10;
    border-radius: 4px;
}

.step-hook-svg {
    overflow: inherit;
}

.step-hook {
    transition: rotate 1.3s var(--spring-slight) 0.1s;
}

    .step-hook.bottom {
        rotate: -45deg;
        transform-origin: 60% 0%;
    }

    .step-hook.top {
        rotate: 45deg;
        transform-origin: 60% 100%;
    }

.step-indicator.is-open .step-hook.top,
.step-indicator.is-open .step-hook.bottom {
    rotate: 0deg;
}

.step-indicator.is-open .step-hook-svg {
    scale: 0.9;
}

.step-hook-svg {
    scale: 1;
    transition: scale 0.2s ease;
}

/* Hide the very last indicator */
.step-wrapper:last-child .step-indicator {
    display: none;
}

.aside-section {
    margin-top: 220px;
}

    .aside-section.yellow .aside-inner {
        background-color: var(--color-yellow-tint);
    }

    .aside-section.yellow h2,
    .aside-section.yellow p {
        color: var(--color-gray);
    }

.aside-inner {
    background-color: var(--color-brand-c);
    position: relative;
    padding-block: 92px;
    padding-right: 92px;
    border-radius: 0px var(--aside-border-radius) var(--aside-border-radius) 0px;
}

    /* This paints the background to the left edge of the screen. */
    .aside-inner::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 100%;
        width: 50vw;
        background-color: inherit;
        z-index: -1;
    }

    .aside-inner h2 {
        font: var(--font-cta);
        color: #fff;
    }

    .aside-inner p {
        color: #fff;
    }

.aside-button-wrapper {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

    .aside-button-wrapper.left {
        justify-content: flex-start;
    }

.more-section-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.more-section {
    margin-top: 150px;
}

.more-section-inner h2 {
    font: var(--font-cta);
}

.more-section-buttons {
    display: flex;
    align-items: center;
    gap: 24px;
}

.faq-section {
    margin-top: 200px;
}

.faq-container h2 {
    font: var(--font-cta);
}

.accordion-header::-webkit-details-marker {
    display: none;
}

details {
    --_border: 1.5px solid color-mix(in srgb, var(--color-gray) 30%, transparent 100%);
    border-bottom: var(--_border);
}

    details:first-of-type {
        border-top: var(--_border);
        margin-top: 64px;
    }

    details .button-hook {
        width: 32px;
        height: 32px;
        transition: rotate 0.4s ease, scale 0.2s ease;
        margin-left: auto;
        overflow: inherit;
    }

    details[open] .button-hook-l {
        rotate: 30deg;
        scale: 1.2;
    }

    details[open] .button-hook-r {
        rotate: -30deg;
        scale: 1.2;
    }

    /* Target the content area of the details element */
    details::details-content {
        height: 0;
        overflow: hidden;
        transition: height 0.3s cubic-bezier(0.02, 0.45, 0.43, 0.99);
    }

    /* When open, animate to auto */
    details[open]::details-content {
        height: auto;
    }

summary {
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
    padding: 30px;
    font: var(--font-bold-header);
    color: var(--color-brown);
    list-style: none;
    padding: 14px 0;
}

    summary .icon {
        text-align: center;
        margin-left: auto;
        transition: rotate 0.4s ease;
        transform-origin: center 40%;
    }

.accordion-content {
    /* padding-inline: 30px; */
    padding-bottom: 30px;
}

footer {
    margin-top: 200px;
}

    footer h2 {
        font: var(--font-cta);
        margin-bottom: 77px;
    }

    footer .blob-frame {
        margin-bottom: -147px;
        z-index: 2;
    }

.footer-logo {
    display: flex;
    padding-left: var(--edge-padding);
    translate: 0px 190px;
}

    .footer-logo.offset {
        translate: 0px 486px;
    }

.footer-col-wrapper {
    display: flex;
}

.footer-col {
    width: 250px;
}

    .footer-col h3, .contact-col h3 {
        font: var(--font-nav);
    }

    .footer-col ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    .footer-col a {
        color: inherit;
    }

.footer-blue-section, .location-blue-section {
    --_left-padding: 82px;
    padding-left: var(--_left-padding);
    padding-block: 120px;
    translate: calc(var(--_left-padding) * -1) 0%;
    color: #fff;
    background-color: var(--color-brand-c);
    border-radius: var(--aside-border-radius) 0px 0px var(--aside-border-radius);
    position: relative;
    z-index: 1;
}

    /* Paints the background to the right edge of the screen. */
    .footer-blue-section::before, .location-blue-section:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 99.5%;
        width: 50vw;
        background-color: inherit;
        z-index: -1;
    }

.footer-white-section {
    padding-block: 54px;
}

.footer-yellow-section {
    display: flex;
    align-items: center;
    gap: 64px;
    background-color: var(--color-yellow-tint);
    padding-block: 24px;
    /* I kept your original border-radius */
    border-radius: 0px var(--aside-border-radius) 0 0px;
    /* Added to establish positioning context */
    position: relative;
    z-index: 1;
}

    /* This paints the background to the left edge of the screen */
    .footer-yellow-section::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 100%; /* Pins the background exactly to the left edge of .footer-yellow-section */
        width: 100vw; /* Massive width to guarantee it reaches the left screen edge */
        background-color: inherit; /* Automatically matches var(--color-yellow-tint) */
        z-index: -1;
    }

.footer-cert {
    max-width: 150px;
    max-height: 120px;
    mix-blend-mode: multiply;
}

.footer-copy-section {
    padding-block: 48px 32px;
}

small {
    font: var(--font-copyright);
    color: color-mix(in srgb, var(--color-gray) 36%, transparent);
}

a:not(.pill-button) {
    color: inherit;
    transition: color 0.2s ease;
    &:hover

{
    color: var(--color-yellow);
}

}

.teamWrapper {
    margin-top: 150px 0 0;
}

.form-wrapper {
    margin-top: 200px;
}

.contactGegevens {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
}

    .contactGegevens .contact-col {
    }

.btnContactContainer {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: column;
    margin-right: 100px;
}

    .btnContactContainer .pill-button {
        margin-bottom: 10px;
        align-self: auto;
    }

.location {
}

.location-container.yellow, .location-container.yellow-light {
    margin: 480px 0 0 0;
    position: relative;
}

.location-container.yellow-light {
    margin: 0;
    padding: 480px 0 0 0;
    position: relative;
    z-index: -1;
}

    .location-container.yellow:before, .location-container.yellow-light:before {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        top: 240px;
        left: 0;
        background: var(--location-yellow);
    }

    .location-container.yellow-light:before {
        top: 0;
        background: var(--location-yellow-light);
    }

.location-blue-section {
    background: #FF0000;
}

.location-header {
    margin: 0 0 20px 0;
}

.location-video-container {
    padding: 0;
    overflow: hidden;
    width: calc(var(--col9px) + var(--default-side-margin-viewport) + 82px);
    height: 480px;
    translate: none;
    margin-left: auto;
}

    .location-video-container .video-full-width {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.label-container {
    position: absolute;
    z-index: 99;
    display: flex;
    flex-direction: column;
    right: -200px;
    top: 50px;
}

.flipped .label-container {
    right: auto;
    left: -200px;
    align-items: flex-end;
}

.section-image-wrapper.col6 {
    position: relative;
}

.label-container .label {
    font: var(--font-label);
    background: var(--color-brand-c);
    color: #FFF;
    border-radius: 15px;
    height: 65px;
    padding: 0 30px;
    display: flex;
    align-content: center;
    align-items: center;
    width: fit-content;
}

    .label-container .label.wit {
        background: #FFF;
        color: var(--color-gray);
        font: var(--font-label-small);
    }

@media screen and (max-width:1280px) {
    .image-text-section.full-width svg{
        scale:1;
    }
    .overlayMobielActief {
        background: rgba(255,255,255,0.85);
        position: absolute;
        top: 164px;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 999;
        display: none;
    }

        .overlayMobielActief.is-active {
            display: block;
        }

    .top-nav .menu {
        display: none;
        position: absolute;
        top: 130px;
        right: var(--side-padding);
        background: var(--color-yellow-tint);
        border-radius: 20px;
        padding: 55px 60px;
        z-index: 9999;
        width: 300px;
    }

        .top-nav .menu a {
            display: block;
            margin: 20px 0;
        }

    .top-nav.is-active .menu {
        display: block;
    }

    .top-nav {
        padding-inline: var(--side-padding) var(--edge-padding);
    }

    .hamburger {
        display: inline-block;
        top: 90px;
        right: var(--side-padding);
    }

    .header-inner {
        flex-wrap: wrap;
        padding: 0 20px;
        gap: 32px;
    }

    .header-image-wrapper .blob-frame {
        translate: 0;
    }

    .header-image-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .header-text-wrapper {
        width: var(--col10);
        padding: 100px 0 0;
        margin: 0 auto;
    }

    .usp-section {
        padding-inline: 0;
    }

    .logo {
        height: 43px;
    }

    footer .wrapper {
        margin-right: 0;
        width: calc(100% - 220px);
        justify-content: flex-start;
    }

    .footer-logo {
        display: flex;
        padding-left: var(--side-padding);
        translate: 0px 140px;
    }

    .footer-col-wrapper {
        display: grid;
        gap: 30px;
        grid-template-columns: 1fr 1fr;
    }

    .footer-col {
        width: 100%;
    }

    .footer-blue-section, .location-blue-section {
        --_left-padding: 60px;
        width: 100%;
        translate: 0;
        padding-block: 90px;
    }

    .footer-white-section {
        --_left-padding: 60px;
        padding-left: var(--_left-padding);
    }

        .footer-white-section .footer-col:nth-child(2) {
            order: 2;
        }

        .footer-white-section .footer-col:nth-child(4) {
            order: 4;
        }

    footer .certificaten {
        width: calc(100% - var(--col2));
        text-align: right;
        justify-content: flex-end;
        margin-right: auto;
    }

    .footer-cert {
        max-width: 75px;
        max-height: 60px;
        mix-blend-mode: multiply;
    }

    .image-text-section {
        gap: 0;
    }

        .image-text-section.full-width .section-content-wrapper {
            width: var(--col7);
            padding: 0 50px 0 0;
        }

        .image-text-section.full-width:not(.flipped) .section-content-wrapper {
            padding: 0 0 0 50px;
        }

    .section-image-wrapper.col6 {
        width: var(--col5);
    }

    .quote-image {
        display: none;
    }

    .quote-inner {
        translate: 0;
    }

    .quote-content {
        width: var(--col8);
    }

    footer h2 {
        margin-bottom: 40px;
    }

    .footer-copy-section {
        width: 100%;
    }

        .footer-copy-section span {
            display: none;
        }

        .footer-copy-section .footer-col-wrapper a {
            margin: 0 0 10px;
            display: block;
        }

    .header-inner.sub-page {
        gap: 0;
    }

        .header-inner.sub-page .header-text-wrapper, .header-inner.sub-page .header-image-wrapper {
            width: 100%;
            padding: 0;
        }

        .header-inner.sub-page .header-text-wrapper {
            width: var(--col10);
            padding: 100px 0 0;
        }

    .section-content-wrapper {
        width: var(--col7);
        padding: 0 0 0 40px;
    }

    .flipped .section-content-wrapper {
        padding: 0 40px 0 0;
    }

    .faq-container {
        width: var(--col10);
    }

    .aside-inner.col10 {
        width: var(--col11);
    }

    .usp-icon {
        font-size: 60px;
    }

    .more-section-buttons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 30px;
    }

    .more-section .pill-button {
        margin-top: 0;
    }

    .form-wrapper {
        margin-top: 100px;
    }

    .col6.formulier {
        width: var(--col10);
    }

    .location-video-container {
        padding-block: 0;
    }

    .location-container.yellow, .location-container.yellow-light {
        margin: 80px 0px 0px;
        position: relative;
    }

    .location-container.yellow-light {
        padding: 220px 0 0 0;
    }
}

@media screen and (max-width:760px) {
    .site-switch-container p {
        font-size: 12px;
    }

    .header-inner {
        margin-top: 40px;
    }

    .top-nav {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
        padding-inline: var(--side-padding);
        padding-block: var(--side-padding);
    }

    .header-inner .header-text-wrapper, .header-inner.sub-page .header-text-wrapper {
        width: var(--col12);
        padding: 50px 0 0;
    }

    .quote-content {
        width: var(--col10);
        text-align: center;
    }

    .quote-container, .image-text-section, .usp-section, footer, .aside-section {
        margin-top: 70px;
    }

    .section-image-wrapper.col6 {
        width: var(--col12);
    }

    .image-text-section.full-width .section-content-wrapper, .image-text-section.full-width:not(.flipped) .section-content-wrapper {
        padding: 20px 0 0 0;
        width: var(--col12);
    }

    .usp-container {
        flex-wrap: wrap;
    }

    .usp-wrapper {
        width: 100%;
        flex: unset;
    }

    .aside-inner.col10 {
        width: 100%;
    }

    .aside-inner {
        padding-block: 52px;
        padding-right: 20px;
        border-radius: 0px var(--aside-border-radius) var(--aside-border-radius) 0px;
    }

    .aside-button-wrapper {
        justify-content: flex-start;
    }

    .footer-logo {
        translate: 0px;
    }

    footer .wrapper {
        margin-top: 40px;
        width: calc(100% - 20px);
        justify-content: flex-start;
    }

    .footer-white-section {
        --_left-padding: 0;
    }

    .footer-yellow-section {
        width: 100%;
    }

    .footer-col-wrapper {
        display: grid;
        gap: 30px;
        grid-template-columns: 1fr;
    }

    .top-nav .menu {
        top: 150px;
        width: calc(100% - var(--side-padding) - var(--side-padding));
        padding: 25px 60px;
    }
    .flipped .section-content-wrapper, .section-content-wrapper {
        padding: 40px 0 0 0;
        width: 100%;
    }
    .col6.formulier {
        width: 100%;
    }
    .contactGegevens .contact-col {
        width: 100%;
    }
    .aside-button-wrapper.left {
        justify-content: center;
        flex-wrap: wrap;
    }
    .location-video-container {
        height: 280px;
    }

    .label-container, .flipped .label-container {
        width: 100%;
    }
    .label-container {
        right: -20px;
    }

    .flipped .label-container {
        left: -20px;
    }
    .header-text-wrapper .btnContainer {
        gap: 0;
        flex-wrap: wrap;
    }

    .header-text-wrapper .pill-button {
        margin-top: 24px;
    }
}