@import url("https://use.typekit.net/fso0lki.css");@layer theme {
    /* Shared scroll-linked keyframes, reused across cover-style templates
       (homepage cover, case cover, ...). Every axis is opt-in via a custom
       property, so an element only moves along the ones it actually sets —
       leave the rest at their neutral default and they're a no-op. */
    @keyframes pushAway {
        to {
            transform: translate(var(--push-x, 0), var(--push-y, 0)) scale(var(--scale-to, 1));
        }
    }

    @keyframes coverRecede {
        to {
            transform: scale(var(--recede-scale, 1)) translateY(var(--recede-y, 0));
            opacity: 0;
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        @view-transition {
            navigation: auto;
        }

        .templateHomepageCover .title .line,
        .templateHomepageCover .subTitle {
            opacity: 0;
            transform: translateY(24px);
            animation: coverFadeIn 0.6s var(--ease-cover) forwards;
        }
        .templateHomepageCover .title .line:nth-of-type(1) {
            animation-delay: 0.4s;
        }
        .templateHomepageCover .title .line:nth-of-type(2) {
            animation-delay: 0.55s;
        }
        .templateHomepageCover .title .line:nth-of-type(3) {
            animation-delay: 0.7s;
        }
        .templateHomepageCover .subTitle {
            animation-delay: 1.1s;
        }

        .templateHomepageCover .mediaGrid .item {
            opacity: 0;
        }
        .templateHomepageCover .mediaGrid .item.left {
            transform: translateX(-80px);
        }
        .templateHomepageCover .mediaGrid .item.right {
            transform: translateX(80px);
        }
    }
}@layer addon {

    .themeColor1 {
        background-color: var(--color-light);
        .title em { color: var(--color2); }
    }
    
    .themeColor2 {
        background-color: var(--color2);
        color: var(--color4);
        .title, .subTitle, .content { color: var(--color4); }
        .title em { color: var(--color-light); }
    }

    .themeColor4:not(.templateHomepageCover, .templateCover, .templateBackground) + .themeColor4:not(.templateBackground) {
        padding-top: 0; 
    }

    .themeColor1:has(+ .templateLogoSlider.themeColor1),
    .templateLogoSlider:has(+ .themeColor2.templateHighlight) {
        padding-bottom: calc(var(--section) / 2);
    }

    .pin-spacer:not(:has(.templateStackedMedia)):has(.themeColor1) + .themeColor1:not(.templateBackground),
    .pin-spacer:not(:has(.templateStackedMedia)):has(.themeColor2) + .themeColor2:not(.templateBackground) {
        padding-top: calc(var(--section) / 2);
    }
    
    .themeColor1.mediaBottom + .themeColor1,
    .themeColor2.mediaBottom + .themeColor2 {
        padding-top: var(--section);
    }
    
    .templateBackground + .collectionCase,
    .themeColor2 + .templateBackground.themeColor1 {
        margin-top: calc(var(--section) / 2);
    }
}@layer addon {

    body {
        overflow-x: clip;
        background: var(--color-light);
        &:not(.hasCover) {
            main {
                margin-top: 0;
            }
        }
        &.menuOpen {
            .bodyContainer {
                overflow: clip;
            }
        }
        &.homepage {
            .title {
                font-size: var(--xl-fontsize);
                line-height: var(--xl-lineheight);
            }
        }
    }
    .title em {
        font-style: normal;
    }

    .backToTop {
        background: var(--color1);
        color: var(--color-light);
        &:after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M26.4 5.5c.5.6 1 .9 1.7 1 1.2.2 1.5-.3 1.6-.6 0-.2 0-.6-1.3-1.2-1.4-.7-2.3-1.6-2-2.9C26.7.7 27.9.1 29.3.3c.9.1 1.8.6 2.3 1.4l-1.2.8c-.2-.4-.7-.8-1.3-.9-1-.2-1.2.3-1.3.5 0 .3-.1.7 1.2 1.2 1.3.6 2.4 1.4 2.2 2.7-.3 1.6-1.9 1.9-3.2 1.7-1.1-.2-1.9-.7-2.6-1.5l1.1-.9-.1.2zm11.7 1.3c0-.8-.3-1.6-1-2.1-1.2-.7-2.5-.2-3.1 1-.7 1.2-.5 2.5.8 3.2.9.5 1.8.4 2.5-.3l1 1c-1.2 1.2-2.9 1.3-4.2.5C32.2 9 31.7 6.8 32.8 5c1-1.7 3-2.7 5.1-1.5 1.2.7 1.9 2 1.8 3.4l-1.6-.1zm.1 6.5-.9-1.2L43 7.7l2.2 2.8c.8 1.1.8 2.5-.2 3.3-.7.6-1.6.6-2.3.3 0 1.1-.7 2-1.6 2.8l-1-1.2c1.2-.9 1.7-1.9.9-2.9l-.8-1-1.9 1.5h-.1zm4.6-3.6-1.6 1.2 1.3 1.6c.4.5 1 .5 1.4.2s.5-1 .2-1.4l-1.3-1.6zm3.8 13.9c-2 .5-4.1-.7-4.6-2.7s.7-4.1 2.7-4.6 4.1.7 4.6 2.7-.7 4.1-2.7 4.6zm-.3-1.5c1.3-.3 2.1-1.6 1.8-2.9-.3-1.2-1.6-2-2.9-1.6-1.3.3-2.1 1.6-1.8 2.8.3 1.2 1.6 2 2.9 1.6v.1zm3.5 5.2-5.8-.6-.3 3.1h-1.4c0-.1.5-4.7.5-4.7l7.2.7-.2 1.5zm-1.6 7-5.3-2.2-1.2 2.9-1.3-.5 1.8-4.2 6.6 2.8-.6 1.2zm-8.7 11.4-3.1-3.4c-1.1-1.2-.9-3 .3-4.1s3-1.2 4.1 0l3.1 3.4-1.1 1-3.1-3.4c-.5-.5-1.4-.6-2.1 0-.7.6-.7 1.5-.2 2.1l3.1 3.4-1 1zm-6.8-4.5 1.4-.5 2.7 6.7-3.3 1.3c-1.3.5-2.6 0-3.1-1.3-.5-1.4.1-2.6 1.4-3.1l1.9-.8-.9-2.3h-.1zm2.1 5.4-.7-1.7-1.9.8c-.6.2-.7.7-.5 1.2.2.4.7.7 1.2.5l1.9-.8zm-11.2-1.7c-.5-.6-1-.9-1.7-1-1.2-.2-1.5.3-1.6.6 0 .2 0 .6 1.3 1.2 1.4.7 2.3 1.6 2 2.9-.3 1.1-1.5 1.7-2.9 1.5-.9-.1-1.8-.6-2.3-1.4l1.2-.8c.2.4.7.8 1.3.9 1 .2 1.2-.3 1.3-.5 0-.3.1-.7-1.2-1.2-1.3-.6-2.4-1.4-2.2-2.7.3-1.6 1.9-1.9 3.2-1.7 1.1.2 1.9.7 2.6 1.5l-1.1.9.1-.2zm-11.7-1.4c0 .8.3 1.6 1 2.1 1.2.7 2.5.2 3.1-1 .7-1.2.5-2.5-.7-3.2-.8-.5-1.8-.4-2.5.3l-1-1c1.2-1.2 2.9-1.3 4.2-.5 1.9 1.1 2.4 3.3 1.3 5.1-1 1.7-3 2.7-5.1 1.5-1.2-.7-1.9-2-1.8-3.4h1.5v.1zm-.1-6.4.9 1.2L7 42.7l-2.2-2.8c-.8-1.1-.8-2.5.2-3.3.7-.6 1.6-.6 2.3-.3 0-1.1.7-2 1.6-2.8l1 1.2c-1.2.9-1.7 1.9-.9 2.9l.8 1 2-1.5zm-4.6 3.5 1.6-1.2-1.3-1.6c-.4-.5-1-.5-1.4-.2s-.5 1-.2 1.4l1.3 1.6zM3.4 26.8c2-.5 4.1.7 4.6 2.7s-.7 4.1-2.7 4.6-4.1-.7-4.6-2.7.7-4.1 2.7-4.6zm.3 1.4c-1.3.3-2.1 1.6-1.8 2.9.3 1.2 1.6 2 2.9 1.6 1.3-.3 2.1-1.6 1.8-2.8-.3-1.2-1.6-2-2.9-1.6v-.1zM.2 23l5.8.6.3-3.1h1.4c0 .1-.5 4.7-.5 4.7L0 24.4.2 23zm1.6-7 5.3 2.2 1.2-2.9 1.3.5L7.8 20l-6.6-2.8.6-1.2zm8.7-11.4L13.6 8c1.1 1.2.9 3-.3 4.1s-3 1.2-4.1 0L6.1 8.7l1.1-1 3.1 3.4c.5.5 1.4.6 2.1 0 .7-.6.7-1.5.2-2.1L9.5 5.6l1.1-1h-.1zm6.9 4.5-1.4.5-2.7-6.7 3.3-1.3c1.3-.5 2.6 0 3.1 1.3.5 1.4-.1 2.6-1.4 3.1l-1.9.8 1 2.3zm-2.2-5.3.7 1.7 1.9-.8c.6-.2.7-.7.5-1.2-.2-.4-.7-.7-1.2-.5l-1.9.8z' fill='%23F9FDEF'/%3E%3C/svg%3E"); /*change fill color per project*/
        }
    }

    svg.icon {
        &:not(.play, .pause, .video-play, .video-pause){
            height: 24px;
        }
    }

    .content {
        ul {
            margin-bottom: 0;
            li:not(:last-child) {
                margin-bottom: 6px;
            }
        }
    }

    .templateLogoSlider {
        .splide {
            max-width: 100vw;
        }
        .intro {
            @media (min-width: 56em) {
                width: calc(100% / 12 * 8);
                margin: 0 auto;
            }
            @media (--min-fablet) {
                width: calc(100% / 12 * 8);
                margin: 0 auto;
            }
            text-align: center;
        }
        @media (max-width: 56em) {
            .intro, .buttons {
                margin: 0 var(--spacer);
            }
        }
        @media (--max-fablet) {
            .intro, .buttons {
                margin: 0 var(--spacer);
            }
        }
        .grid {
            order: 3;
            display: block;
        }
        .buttons {
            order: 2;
            justify-content: center;
        }
    }
    
}@layer addon {
    :root {

        /*COLORS*/
        --color1:    #0066FF;
        --color2:    #BFFF91;
        --color3:    #FDC2D3;
        --color4:    #00493D;
        --color1rgb:    0, 102, 255; /* rgb for color1 */

        --color-dark: #000;
        --color-light: #F9FDEF;
        
        /*DEFAULT FONT*/
        --font-basic:    Averta,sans-serif;
        --font-sub:      "gazzetta-variable",sans-serif; /* bold - 700 | black - 900 */
        --font-extra:    "ivypresto-headline",sans-serif; /* thin - 100 | light - 300 */
        --font-color:   #0066FF;

        /* OTHER */
        --border-radius: 24px;

        /* BUTTON */
        --button-hover:     var(--color1);
        --button-padding:	  16px 32px;

        /* S FONTSIZE */
        --min-s-fontsize: 0.75;
        --max-s-fontsize: 0.875; /* 14px */
        --s-lineheight: 0.8;

        /* FONTSIZE */
        --min-fontsize: 1;
        --max-fontsize: 1.125; /* 18px */
        --lineheight: 1.5;

        /* M FONTSIZE */
        --min-m-fontsize: 1.125;
        --max-m-fontsize: 1.5; /* 24px */
        --m-lineheight: 1.25;

        /* L FONTSIZE */
        --min-l-fontsize: 4;
        --max-l-fontsize: 7; /* 112px */
        --l-lineheight: 0.8;

        /* XL FONTSIZE */
        --min-xl-fontsize: 4.5;
        --max-xl-fontsize: 9.25; /* 148px */
        --xl-lineheight: 0.8;

        /* XXL FONTSIZE */
        --min-xxl-fontsize: 5;
        --max-xxl-fontsize: 13; /* 12.25 = 196px */
        --pref-xxl-fontsize: calc(calc(var(--min-xxl-fontsize) * 1rem) + (var(--max-xxl-fontsize) - var(--min-xxl-fontsize)) * ((calc(var(--max-viewport) * 1vw) - calc(var(--min-viewport) * 1rem)) / (var(--max-viewport) - var(--min-viewport))));
        --xxl-fontsize: clamp(calc(var(--min-xxl-fontsize) * 1rem), var(--pref-xxl-fontsize), calc(var(--max-xxl-fontsize) * 1rem));
        --xxl-lineheight: 0.85;
    }

    @media (max-width: 56em) {
        :root {
            --section:				112px;
        }
    }

    @media (--max-fablet) {
        :root {
            --section:				112px;
        }
    }

    @media (min-width: 90em) and (max-width: 120em) {
        :root {
            --spacer:          		5vw;
            --section:				196px;
            --gutter:				32px;
            --min-gutter:   		-32px;
            --padding:				32px;
            --min-padding:   		-32px;
        }
    }

    @media (min-width: 90em) and (--max-largescreen) {
        :root {
            --spacer:          		5vw;
            --section:				196px;
            --gutter:				32px;
            --min-gutter:   		-32px;
            --padding:				32px;
            --min-padding:   		-32px;
        }
    }

    @media (--min-desktop) and (--max-largescreen) {
        :root {
            --spacer:          		5vw;
            --section:				196px;
            --gutter:				32px;
            --min-gutter:   		-32px;
            --padding:				32px;
            --min-padding:   		-32px;
        }
    }
    @media (min-width: 120em) {
        :root {
            --spacer:               25vw;
        }
    }
    @media (--min-extralargescreen) {
        :root {
            --spacer:               25vw;
        }
    }
}@layer addon {
    @font-face {
        font-family: 'Godger';
        src: url('/css/fonts/Godger-Regular.woff2') format('woff2'),
             url('/css/fonts/Godger-Regular.woff') format('woff');
        font-weight: 400;
    }
    @font-face {
        font-family: 'Averta';
        src: url('/css/fonts/AvertaPE-Regular.woff2') format('woff2'),
             url('/css/fonts/AvertaPE-Regular.woff') format('woff');
        font-weight: 400;
    }
    @font-face {
        font-family: 'Averta';
        src: url('/css/fonts/AvertaPE-Semibold.woff2') format('woff2'),
             url('/css/fonts/AvertaPE-Semibold.woff') format('woff');
        font-weight: 600;
    }
    @font-face {
        font-family: 'Averta';
        src: url('/css/fonts/AvertaPE-Bold.woff2') format('woff2'),
             url('/css/fonts/AvertaPE-Bold.woff') format('woff');
        font-weight: 700;
    }
}@layer addon {

    .button {

        column-gap: 0;
        text-transform: uppercase;
        font-size: var(--s-fontsize);
        line-height: var(--s-lineheight);
        font-weight: 600;
        letter-spacing: 0.07rem;
        :not(.pagination) > & {
            .icon {
                width: 0;
                opacity: 0;
                margin-left: 0;
                transition: var(--transition);
            }
            &:hover {
                @media (hover: hover) {
                    .icon {
                        width: 24px;
                        opacity: 1;
                        margin-left: calc(var(--padding) / 2);
                    }
                }
            }
        }
        
        &.primary, &.submit {
            background-color: var(--color1);
            color: var(--color-light);
            .themeColor2 & {
                background-color: var(--color4);
                color: var(--color2);
            }
        }

        &.outline, &.cancel {
            background: none;
            box-shadow: inset 0 0 0 1px var(--color1);
            color: var(--color1);
            &:hover {
                @media (hover: hover) {
                    background-color: none;
                    box-shadow: inset 0 0 0 1px var(--color1);
                    color: var(--color1);
                }
            }
            .themeColor2 & {
                box-shadow: inset 0 0 0 1px var(--color4);
                color: var(--color4);
                &:hover {
                    @media (hover: hover) {
                        background-color: none;
                        box-shadow: inset 0 0 0 1px var(--color4);
                        color: var(--color4);
                    }
                }
            }
            .templateBackground & {
                box-shadow: inset 0 0 0 1px var(--color-light);
                color: var(--color-light);
                &:hover {
                    @media (hover: hover) {
                        background-color: none;
                        box-shadow: inset 0 0 0 1px var(--color-light);
                        color: var(--color-light);
                    }
                }
            }
        }
    }
    
}@layer addon {

    .title,
    h1,
    h2,
    h3,
    h4 {
        font-family: var(--font-sub);
        font-weight: 700;
    }

    section:first-of-type :is(.title) {
        font-size: var(--xl-fontsize);
    }    

    section:first-of-type :is(.subTitle) {
        font-size: calc(var(--m-fontsize) * 1.5);
        line-height: 1.25;
    }    

    .subTitle {
        font-family: var(--font-extra);
        font-size: var(--m-fontsize);
        line-height: var(--m-lineheight);
        font-weight: 300;
    }
    
}@layer addon {
    
}@layer addon {

}@layer addon {

    footer {
        background-color: var(--color-light);
        color: var(--color1);
        padding: calc(var(--section) / 2) 0 calc(var(--padding) * 1.5) 0;
        .footerContainer {
            flex-direction: column;
            align-items: flex-start;
            gap: calc(var(--gutter) * 2);
            a {
                &:hover {
                    @media (hover: hover) {
                        text-decoration: underline;
                        color: inherit;
                    }
                }
            }
            .title {
                font-size: var(--xl-fontsize);
                line-height: var(--xl-lineheight);
                @media (max-width: 56em) {
                    font-size: var(--xxl-fontsize);
                    line-height: var(--xxl-lineheight);
                }
                @media (--max-fablet) {
                    font-size: var(--xxl-fontsize);
                    line-height: var(--xxl-lineheight);
                }
            }
            .subTitle {
                font-size: var(--fontsize);
                font-weight: 700;
                line-height: 1;
                font-family: var(--font-basic);
            }
            .services, .partners {
                display: flex;
                flex-wrap: wrap;
                gap: calc(var(--gutter) * 2);
                @media (max-width: 56em) {
                    gap: var(--gutter);
                }
                @media (--max-fablet) {
                    gap: var(--gutter);
                }
                svg path { fill: var(--color1); }
                div {
                    display: flex;
                    flex-direction: column;
                    gap: calc(var(--gutter) / 2);
                    justify-content: space-between;
                }
            }
    
            .footerLeft {
                position: relative;
                .inner {
                    display: flex;
                    flex-direction: column;
                    gap: calc(var(--gutter) / 2);
                    .subTitle {
                        font-size: var(--m-fontsize);
                        font-weight: 400;
                        font-family: var(--font-extra);
                    }
                }
                .intro {
                    display: flex;
                    align-items: flex-end;
                    gap: var(--gutter);
                    .title {
                        text-box-trim: trim-both;
                        text-box-edge: cap alphabetic;
                    }
                    .illustratie {
                        width: auto;
                        height: 170px;
                        @media (max-width: 56em) {
                            height: 100px;
                        }
                        @media (--max-fablet) {
                            height: 100px;
                        }
                    }
                }
                .collage {
                    position: absolute;
                    bottom: 0;
                    right: calc(var(--section) / 2);
                    width: 360px;
                    height: 360px;
                    @media (max-width: 56em) {
                        display: none;
                    }
                    @media (--max-fablet) {
                        display: none;
                    }
                }
            }
            .footerLeft, .footerMiddle {
                width: 100%;
                justify-content: space-between;
                align-items: flex-start;
                @media (max-width: 56em) {
                    gap: calc(var(--gutter) * 2);
                }
                @media (--max-fablet) {
                    gap: calc(var(--gutter) * 2);
                }
            }
    
            .footerRight {
                font-size: var(--s-fontsize);
                font-weight: 600;
                justify-content: flex-start;
                @media (max-width: 56em) {
                    gap: calc(var(--gutter) / 2);
                }
                @media (--max-fablet) {
                    gap: calc(var(--gutter) / 2);
                }
            }
        }
    }
    
}@layer addon {

    html {
        scrollbar-gutter: stable;
    }

    .logo {
        .headerThemeColor1 & {
            color: var(--color1);
        }
        .headerThemeColor2 & {
            color: var(--color4);
        }
    }

    .logo {
        @media (max-width: 56em) {
            svg {
                width: 200px;
            }
        }
        @media (--max-fablet) {
            svg {
                width: 200px;
            }
        }
    }

    .menuOpen {
        overflow: unset;
    }

    .headerContainer {
        position: relative;
    }

    .nav {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: var(--padding);
        background: var(--color1);
        border-radius: var(--border-radius);
        color: var(--color-light);
        text-align: center;
        overflow: hidden;
        position: absolute;
        /* Corner sits at the hamburger button's center (half its size), not
           the usual gutter-based inset, so the pill's corner lines up with
           the middle of the button instead of its edge. */
        top: 40px;
        right: 40px;
        min-width: 425px;
        height: auto;
        z-index: 9;
        
        transform: scale(.5);
        transform-origin: top right;
        opacity: 0;
        pointer-events: none;
        transition: var(--transition);
        @media (max-width: 56em) {
            flex-direction: column;
            align-items: stretch;
            min-width: calc(100% - 30px);
            top: 30px;
            right: 30px;
        }
        @media (--max-fablet) {
            flex-direction: column;
            align-items: stretch;
            min-width: calc(100% - 30px);
            top: 30px;
            right: 30px;
        }

        body.menuOpen & {
            align-items: flex-start;
            justify-content: flex-start;
            text-align: left;
            transform: scale(1);
            opacity: 1;
            pointer-events: auto;
            @media (max-width: 56em) {
                width: auto;
            }
            @media (--max-fablet) {
                width: auto;
            }
        }

        ul.menuLevel1 {
            flex-direction: column;
            align-items: flex-start;
            gap: calc(var(--gutter) / 2);
            padding: calc(var(--padding) / 2) 0;
            @media (max-width: 56em) {
                width: 100%;
            }
            @media (--max-fablet) {
                width: 100%;
            }

            @media (min-width: 56em) {
                display: grid;
                grid-template-columns: max-content max-content;
                grid-template-rows: repeat(var(--menu-item-count, 6), auto);
                column-gap: var(--gutter);
                align-items: start;
            }

            @media (--min-fablet) {
                display: grid;
                grid-template-columns: max-content max-content;
                grid-template-rows: repeat(var(--menu-item-count, 6), auto);
                column-gap: var(--gutter);
                align-items: start;
            }

            > li {
                position: relative;
                width: 100%;

                @media (min-width: 56em) {
                    width: auto;
                    grid-column: 1;

                    &.hasSubmenu {
                        display: contents;
                    }
                }

                @media (--min-fablet) {
                    width: auto;
                    grid-column: 1;

                    &.hasSubmenu {
                        display: contents;
                    }
                }
            }

            li > a,
            li > button {
                justify-content: flex-start;
                gap: calc(var(--gutter) / 4);
                color: var(--color-light);
                padding: 0;
                font-family: var(--font-sub);
                font-weight: 700;
                font-size: calc(var(--m-fontsize) * 2.5);
                line-height: 1;
                text-decoration: none;
                @media (min-width: 56em) {
                    grid-column: 1;
                }
                @media (--min-fablet) {
                    grid-column: 1;
                }

                .arrow-wiggle {
                    width: 0;
                    flex-shrink: 0;
                    opacity: 0;
                    transform: translateX(-8px);
                    transition: var(--transition);
                }
                &:hover .arrow-wiggle {
                    @media (hover: hover) {
                        width: 66px;
                        opacity: 1;
                        transform: translateX(0);
                    }
                }
            }

            li.active > a,
            li.active > button,
            li > a[aria-current="page"] {
                text-decoration: none;
                .arrow-wiggle {
                    width: 66px;
                    opacity: 1;
                }
            }
        }

        ul.menuLevel2 {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            flex-shrink: 0;
            gap: calc(var(--gutter) / 4);
            overflow: hidden;
            opacity: 0;
            visibility: hidden;
            transition: opacity .2s ease, max-width .35s ease, max-height .35s ease, margin .35s ease, padding .35s ease;

            @media (min-width: 56em) {
                grid-column: 2;
                grid-row: 1 / -1;
                align-self: start;
                max-width: 0;
                margin-left: 0;
                padding: 0;

                &.open {
                    max-width: 320px;
                    padding: calc(var(--padding) / 2) 0 calc(var(--padding) / 2) var(--gutter);
                    box-shadow: inset 1.5px 0 0 rgb(249, 253, 239);
                    opacity: 1;
                    visibility: visible;
                    height: 100%;
                }
            }

            @media (--min-fablet) {
                grid-column: 2;
                grid-row: 1 / -1;
                align-self: start;
                max-width: 0;
                margin-left: 0;
                padding: 0;

                &.open {
                    max-width: 320px;
                    padding: calc(var(--padding) / 2) 0 calc(var(--padding) / 2) var(--gutter);
                    box-shadow: inset 1.5px 0 0 rgb(249, 253, 239);
                    opacity: 1;
                    visibility: visible;
                    height: 100%;
                }
            }

            @media (max-width: 56em) {
                max-height: 0;
                margin-top: 0;
                padding-top: 0;

                &.open {
                    max-height: 400px;
                    margin-top: var(--gutter);
                    box-shadow: inset 1.5px 0 0 rgb(249, 253, 239);
                    opacity: 1;
                    visibility: visible;
                    padding: 6px 0 6px var(--gutter);
                }
            }

            @media (--max-fablet) {
                max-height: 0;
                margin-top: 0;
                padding-top: 0;

                &.open {
                    max-height: 400px;
                    margin-top: var(--gutter);
                    box-shadow: inset 1.5px 0 0 rgb(249, 253, 239);
                    opacity: 1;
                    visibility: visible;
                    padding: 6px 0 6px var(--gutter);
                }
            }

            li > a,
            li > button {
                color: var(--color-light);
                padding: 0;
                font-family: var(--font-basic);
                font-weight: 400;
                text-transform: none;
                font-size: var(--fontsize);
                white-space: nowrap;
                text-decoration: none;
                &[aria-current="page"] {
                    color: var(--color2);
                    font-weight: 700;
                }
            }
        }
    }

    .hamburger {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: calc(var(--gutter) / 2);
        width: 80px;
        height: 80px;
        cursor: pointer;
        background-color: var(--color2);
        background-image: url("/images/menu-swirl.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border-radius: 80px;
        color: var(--color1);
        transition: var(--transition);
        span {
            background: transparent;
            width: 24px;
            &:before,
            &:after {
                background: var(--color1);
            }
            &:not(.menuOpen &) {
                &:before { top: -3px; }
                &:after { top: 3px; }
            }
        }
        .headerThemeColor2 & {
            background-color: var(--color-light);
            color: var(--color1);
            span {
                &:before,
                &:after {
                    background: var(--color1);
                }
            }
        }
        @media (max-width: 56em) {
            width: 60px;
            height: 60px;
            span {
                width: 16px;
            }
        }
        @media (--max-fablet) {
            width: 60px;
            height: 60px;
            span {
                width: 16px;
            }
        }
    }

}@layer addon {

    .container {
        .inner {
            .buttons {
                gap: calc(var(--gutter) / 2);
                @media (max-width: 56em) {
                    width: 100%;
                }
                @media (--max-fablet) {
                    width: 100%;
                }
            }
        }
    }

    .templateForm {
        .inner {
            @media (min-width: 56em) {
                grid-column: 3 / span 8;
            }
            @media (--min-fablet) {
                grid-column: 3 / span 8;
            }
            text-align: center;
            align-items: center;
        }
    }

    section:first-of-type:not(div.pin-spacer + section) {
        @media (max-width: 56em) {
            padding-top: calc(var(--section) * 1.5);
        }
        @media (--max-fablet) {
            padding-top: calc(var(--section) * 1.5);
        }
    }

}