@layer reset {
    *, :before, :after {
        box-sizing: border-box
    }

    html {
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        text-size-adjust: none
    }

    body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
        margin-block-end: 0
    }

    ul[role=list], ol[role=list] {
        list-style: none
    }

    body {
        min-height: 100svh;
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
        line-height: 1.5
    }

    h1, h2, h3, h4, button, input, label {
        line-height: 1.1
    }

    h1, h2, h3, h4 {
        text-wrap: balance
    }

    p {
        text-wrap: pretty
    }

    a:not([class]) {
        -webkit-text-decoration-skip-ink: auto;
        text-decoration-skip-ink: auto;
        color: currentColor
    }

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

    input, button, textarea, select {
        font-family: inherit;
        font-size: inherit
    }

    textarea:not([rows]) {
        min-height: 10em
    }

    :target {
        scroll-margin-block: 5ex
    }

    hr {
        height: 0
    }

    abbr[title] {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    b, strong {
        font-weight: bolder
    }

    code, kbd, pre, samp {
        font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub, sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    button, input, optgroup, select, textarea {
        margin: 0;
        font-family: inherit;
        font-size: 100%;
        line-height: 1.15
    }

    button, select {
        text-transform: none
    }

    button {
        -webkit-appearance: button
    }

    [type=button] {
        -webkit-appearance: button
    }

    [type=reset] {
        -webkit-appearance: button
    }

    [type=submit] {
        -webkit-appearance: button
    }

    [type=button]::-moz-focus-inner {
        border-style: none;
        padding: 0
    }

    [type=reset]::-moz-focus-inner {
        border-style: none;
        padding: 0
    }

    [type=submit]::-moz-focus-inner {
        border-style: none;
        padding: 0
    }

    button::-moz-focus-inner {
        border-style: none;
        padding: 0
    }

    [type=button]:-moz-focusring {
        outline: 1px dotted buttontext
    }

    [type=reset]:-moz-focusring {
        outline: 1px dotted buttontext
    }

    [type=submit]:-moz-focusring {
        outline: 1px dotted buttontext
    }

    button:-moz-focusring {
        outline: 1px dotted buttontext
    }

    fieldset {
        padding: .35em .75em .625em
    }

    legend {
        padding: 0
    }

    progress {
        vertical-align: baseline
    }

    [type=number]::-webkit-inner-spin-button {
        height: auto
    }

    [type=number]::-webkit-outer-spin-button {
        height: auto
    }

    [type=search] {
        -webkit-appearance: textfield;
        outline-offset: -2px
    }

    [type=search]::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-file-upload-button {
        -webkit-appearance: button;
        font: inherit
    }

    details {
        display: block
    }

    summary {
        display: list-item
    }
}
@layer setup {
    :root {
        --text-base-size: 1rem;
        --body-line-height: 1.5;
        --heading-line-height: 1.2;
        --step--2: clamp(.7813rem, .7747rem + .0326vi, .8rem);
        --step--1: clamp(.9375rem, .9158rem + .1087vi, 1rem);
        --step-0: clamp(1.125rem, 1.0815rem + .2174vi, 1.25rem);
        --step-1: clamp(1.35rem, 1.2761rem + .3696vi, 1.5625rem);
        --step-2: clamp(1.62rem, 1.5041rem + .5793vi, 1.9531rem);
        --step-3: clamp(1.944rem, 1.771rem + .8651vi, 2.4414rem);
        --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vi, 3.0518rem);
        --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vi, 3.8147rem);
        --space-3xs: clamp(.3125rem, .3125rem + 0vi, .3125rem);
        --space-2xs: clamp(.5625rem, .5408rem + .1087vi, .625rem);
        --space-xs: clamp(.875rem, .8533rem + .1087vi, .9375rem);
        --space-s: clamp(1.125rem, 1.0815rem + .2174vi, 1.25rem);
        --space-m: clamp(1.6875rem, 1.6223rem + .3261vi, 1.875rem);
        --space-l: clamp(2.25rem, 2.163rem + .4348vi, 2.5rem);
        --space-xl: clamp(3.375rem, 3.2446rem + .6522vi, 3.75rem);
        --space-2xl: clamp(4.5rem, 4.3261rem + .8696vi, 5rem);
        --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vi, 7.5rem);
        --space-3xs-2xs: clamp(.3125rem, .2038rem + .5435vi, .625rem);
        --space-2xs-xs: clamp(.5625rem, .4321rem + .6522vi, .9375rem);
        --space-xs-s: clamp(.875rem, .7446rem + .6522vi, 1.25rem);
        --space-s-m: clamp(1.125rem, .8641rem + 1.3043vi, 1.875rem);
        --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vi, 2.5rem);
        --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vi, 3.75rem);
        --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vi, 5rem);
        --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vi, 7.5rem);
        --component-padding: var(--space-s);
        --component-body-line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1));
        --component-heading-line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1));
        --line-height-multiplier: 1;
        --text-vspace-multiplier: 1;
        --dynamic-line-height: calc(.25rem + 1rem);
        --color-primary-green: #96deab;
        --color-primary-blue: #00b3fa;
        --color-secundary-blue: #e3f5fc;
        --color-bg: white;
        --color-contrast-lower: #f2f2f2;
        --color-contrast-low: #d3d3d4;
        --color-contrast-medium: #79797c;
        --color-contrast-high: #313135;
        --color-contrast-higher: black;
        --font-stack: "Plus Jakarta Sans", sans-serif;
        --font-optical-sizing: auto;
        --font-style: normal
    }

    .plus-jakarta-sans-body {
        font-optical-sizing: auto;
        font-family: Plus Jakarta Sans, sans-serif;
        font-weight: 400 800;
        font-style: normal
    }

    @keyframes present-yourself {
        to {
            opacity: 1
        }
    }:-webkit-any(h1,h2,h3,h4,h5,h6) {
         font-weight: 700;
         font-family: var(--font-stack);
         word-break: break-word
     }

    :is(h1,h2,h3,h4,h5,h6) {
        font-weight: 700;
        font-family: var(--font-stack);
        word-break: break-word
    }

    :-webkit-any(p,ol,ul,a) {
        font-weight: 450
    }

    :is(p,ol,ul,a) {
        font-weight: 450
    }

    figure {
        margin: 0;
        padding: 0
    }

    figure img {
        object-fit: cover;
        min-width: 100%;
        height: auto
    }
}
@layer colors-feedback;
@layer layout {
    html {
        font-optical-sizing: var(--font-optical-sizing);
        font-style: var(--font-style)
    }

    html[dir=rtl] header nav .language-switcher {
        position: absolute;
        bottom: 0;
        left: 0 !important;
        right: unset !important
    }

    html[dir=rtl] .block--color-green {
        right: var(--space-l);
        background-color: var(--color-primary-green);
        padding: var(--space-m);
        border-radius: var(--radius-2);
        inline-size: unset !important;
        position: unset !important;
        margin-block-start: unset !important
    }

    body {
        color: var(--color-contrast-high);
        overscroll-behavior: contain;
        margin: 0
    }

    .container {
        inline-size: min(80rem, 100vw - 2rem)
    }

    main {
        place-content: start center;
        min-height: 100svh;
        display: grid
    }
}
@layer header {
    @layer header {
        header {
            font-family: var(--font-stack);
            background-image: url(/assets/images/header-bg.svg);
            background-repeat: no-repeat;
            background-size: cover;
            height: 5rem;
            font-weight: 500;
            overflow: visible
        }

        header .container {
            flex-wrap: wrap;
            margin-inline: auto;
            display: flex
        }

        header nav {
            flex-wrap: wrap;
            justify-content: space-between;
            inline-size: 100%;
            display: flex
        }

        header nav img {
            inline-size: clamp(6.25rem, 15.1667vw + 2.4583rem, 11.9375rem)
        }

        header nav ul {
            gap: var(--space-s);
            align-self: center;
            margin-inline: auto 0;
            list-style: none;
            display: none;
            position: relative
        }

        header nav ul.visible {
            align-self: unset;
            background-color: var(--color-bg);
            padding: var(--space-2xl) var(--space-l);
            z-index: 1001;
            animation: var(--animation-slide-in-left);
            flex-direction: column;
            justify-content: flex-start;
            margin-block: 0;
            animation-duration: .2s;
            display: flex;
            position: fixed;
            inset: 0 0 0 20vw;
            overflow-y: scroll;
            box-shadow: -8px 2px 23px -11px rgba(0, 0, 0, .64)
        }

        header nav ul.visible a {
            font-weight: 600;
            font-size: var(--step-1)
        }

        @media screen and (min-width: 63.125rem) {
            header nav ul {
                display: flex
            }
        }@media screen and (min-width: 67rem) {
        header nav ul {
            gap: var(--space-m)
        }
    }header nav ul a {
         transition: all .2s var(--ease-in-1);
         font-weight: 550;
         text-decoration-color: transparent
     }

        header nav ul a:-webkit-any(:hover,:focus) {
            -webkit-text-decoration-color: var(--color-primary-blue);
            text-decoration-color: var(--color-primary-blue);
            text-underline-offset: 5px;
            text-decoration-thickness: 5px
        }

        header nav ul a:is(:hover,:focus) {
            -webkit-text-decoration-color: var(--color-primary-blue);
            text-decoration-color: var(--color-primary-blue);
            text-underline-offset: 5px;
            text-decoration-thickness: 5px
        }

        header nav ul .active a {
            -webkit-text-decoration-color: var(--color-primary-blue);
            text-decoration-color: var(--color-primary-blue);
            text-underline-offset: 5px;
            font-weight: 600;
            text-decoration-thickness: 5px
        }

        header nav .menu--link {
            background: 0 0;
            border: 1px solid transparent;
            align-self: center;
            padding: 0;
            font-weight: 800
        }

        @media screen and (min-width: 63.125rem) {
            header nav .menu--link {
                display: none
            }
        }header nav .menu--link svg {
             aspect-ratio: 1;
             height: .8em
         }

        header nav .language-switcher {
            position: absolute;
            bottom: 0;
            right: 0
        }

        header nav .language-switcher:after {
            content: "";
            background-image: url(/assets/images/chevron.svg);
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: contain;
            block-size: 10px;
            inline-size: 10px;
            display: inline-flex;
            position: relative
        }

        header nav .language-select {
            appearance: none;
            background-color: transparent;
            border: 1px solid transparent;
            margin-inline: auto 0;
            font-size: .8rem
        }

        @media screen and (min-width: 63.125rem) {
            header nav .language-switcher {
                position: absolute;
                top: 1rem;
                right: 0
            }
        }body:has(.nav--overlay.visible) {
             overflow: hidden
         }

        body:has(.nav--overlay.visible):after {
            content: "";
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
            background-color: rgba(0, 0, 0, .2);
            position: fixed;
            inset: 0
        }

        :-webkit-any(html,body,header,nav,.container) {
            position: relative
        }

        :is(html,body,header,nav,.container) {
            position: relative
        }

        :has(.nav--overlay.visible) .menu--close {
            z-index: 3001;
            opacity: 0;
            background: 0 0;
            border: 1px solid transparent;
            font-weight: 800;
            animation: .8s forwards present-yourself;
            display: inline;
            position: absolute;
            top: 2rem;
            right: .5rem
        }

        :has(.nav--overlay.visible) .menu--close a {
            font-weight: 800
        }

        .menu--close {
            display: none
        }

        .menu--close svg {
            aspect-ratio: 1;
            height: .8em
        }

        .menu--close :-webkit-any(:hover,:focus) svg {
            animation: var(--animation-pulse)
        }

        .menu--close :is(:hover,:focus) svg {
            animation: var(--animation-pulse)
        }
    }
}
@layer footer {
    footer {
        min-block-size: 200px;
        margin-block-start: var(--space-l)
    }

    footer .container {
        gap: var(--space-l);
        border-block-start: 5px solid var(--color-secundary-blue);
        font-size: var(--step--1);
        flex-wrap: wrap;
        margin: 0 auto;
        padding-block-start: var(--space-m);
        font-weight: 450;
        display: flex
    }

    footer .container address {
        font-style: normal
    }

    footer .contact-details {
        direction: ltr
    }

    footer .contact-details p {
        margin: 0
    }

    footer .meta--links {
        gap: var(--space-m);
        flex-wrap: wrap;
        margin-inline: auto 0;
        display: flex;
        align-items: center;
    }

    footer a :-webkit-any(:hover,:focus) {
        -webkit-text-decoration-color: var(--color-secundary-blue);
        text-decoration-color: var(--color-secundary-blue)
    }

    footer a :is(:hover,:focus) {
        -webkit-text-decoration-color: var(--color-secundary-blue);
        text-decoration-color: var(--color-secundary-blue)
    }

    footer a[href^=tel\:] {
        direction: ltr
    }
}
@layer pagina {
    @layer pagina {
        main {
            margin-block-start: var(--space-xl)
        }

        @media screen and (min-width: 48rem) {
            main {
                margin-block-start: var(--space-3xl)
            }
        }main .container {
             gap: var(--space-xl);
             grid-template-columns:1fr;
             grid-auto-rows: min-content;
             display: grid
         }

        @media screen and (min-width: 50rem) {
            main .container {
                grid-template-rows:min-content min-content;
                grid-template-columns:1fr 1fr
            }
        }main .column--left {
             grid-column: 1
         }

        @media screen and (min-width: 50rem) {
            main .column--left {
                grid-area: 1/1/-1/2
            }
        }main .column--left address {
             margin-block-start: var(--space-xs);
             font-style: normal
         }

        main .column--left:-webkit-any(a,p,address) {
            font-size: var(--step-0)
        }

        main .column--left:is(a,p,address) {
            font-size: var(--step-0)
        }

        main .column--right {
            grid-column: 1
        }

        @media screen and (min-width: 50rem) {
            main .column--right {
                grid-area: 1/2/-1/3
            }
        }main .column--right .contact {
             gap: var(--space-s);
             background-color: var(--color-secundary-blue);
             border-radius: var(--radius-2);
             padding: var(--space-s);
             flex-direction: column;
             margin-block-start: var(--space-m);
             display: flex
         }

        main .column--right .contact h2 {
            margin-block-start: 0
        }

        main .column--right .contact :-webkit-any(input,textarea) {
            border-radius: var(--radius-2);
            padding-inline: var(--space-2xs);
            border: 1px solid transparent;
            min-height: 3rem;
            position: relative
        }

        main .column--right .contact :is(input,textarea)::placeholder {
            font-size: var(--step--2);
            position: absolute;
            top: .2rem;
            left: .5rem
        }

        main .column--right .contact :is(input,textarea) {
            border-radius: var(--radius-2);
            padding-inline: var(--space-2xs);
            border: 1px solid transparent;
            min-height: 3rem;
            position: relative
        }

        main .column--right .contact :is(input,textarea)::placeholder {
            font-size: var(--step--2);
            position: absolute;
            top: .2rem;
            left: .5rem
        }

        main .column--right .contact button[type=submit] {
            background-color: var(--color-primary-green);
            border-radius: var(--radius-2);
            padding-inline: var(--space-l);
            padding-block: var(--space-2xs);
            transition: all .2s var(--ease-1);
            border: 1px solid transparent;
            inline-size: -moz-fit-content;
            inline-size: fit-content;
            font-weight: 550
        }

        main .column--right .contact button[type=submit]:-webkit-any(:hover,:focus) {
            background-color: var(--color-primary-blue);
            cursor: pointer
        }

        main .column--right .contact button[type=submit]:is(:hover,:focus) {
            background-color: var(--color-primary-blue);
            cursor: pointer
        }

        main .column--right .contact :-webkit-any(textarea) {
            min-height: 10rem
        }

        main .column--right .contact :is(textarea) {
            min-height: 10rem
        }

        main .intro h1 {
            font-size: var(--step-4);
            line-height: var(--heading-line-height);
            margin-block-start: unset
        }

        main .intro :-webkit-any(p,ul,a) {
            font-size: var(--step-0);
            font-weight: 450;
            line-height: var(--body-line-height);
            margin-block-end: var(--space-s)
        }

        main .intro :is(p,ul,a) {
            font-size: var(--step-1);
            font-weight: 450;
            line-height: var(--body-line-height)
        }

        main .intro p:not(:first-of-type) {
            font-size: var(--step-0);
            margin-block-start: 0
        }

        main .intro ul {
            margin-inline-start: 0;
            padding-inline-start: 1.5rem
        }

        main .intro ul a {
            text-underline-offset: 5px;
            transition: all .2s var(--ease-2);
            margin-block: 0
        }

        main .intro ul a:-webkit-any(:hover,:focus) {
            color: var(--color-primary-blue);
            text-underline-offset: 3px
        }

        main .intro ul a:is(:hover,:focus) {
            color: var(--color-primary-blue);
            text-underline-offset: 3px
        }

        main .intro .btn--group {
            justify-content: flex-start;
            gap: var(--space-l);
            flex-wrap: wrap;
            margin-block-start: var(--space-2xl);
            display: flex
        }

        main .intro .btn--group .btn {
            font-size: var(--step-0);
            padding-block: var(--space-2xs);
            padding-inline: var(--space-m);
            border-radius: var(--radius-2);
            transition: all .2s var(--ease-in-1);
            font-weight: 550
        }

        main .intro .btn--group .btn.full {
            background-color: var(--color-primary-blue);
            color: #fff;
            border: 1px solid transparent;
            text-decoration: none
        }

        main .intro .btn--group .btn.ghost {
            border: 1px solid var(--color-primary-blue);
            color: var(--color-contrast-high);
            background-color: transparent;
            text-decoration: none
        }

        main .intro .btn--group .btn:-webkit-any(:hover,:focus) {
            background-color: var(--color-primary-green);
            color: var(--color-contrast-high);
            border: 1px solid var(--color-primary-green)
        }

        main .intro .btn--group .btn:is(:hover,:focus) {
            background-color: var(--color-primary-green);
            color: var(--color-contrast-high);
            border: 1px solid var(--color-primary-green)
        }

        main .news--overview {
            grid-row: 2/-1;
            margin-block-start: var(--space-3xl)
        }

        main .news--overview h2 {
            font-size: var(--step-3);
            margin-block-end: var(--space-l)
        }

        main .news--overview a {
            font-size: var(--step--1);
            text-underline-offset: 5px;
            transition: all .2s var(--ease-2);
            font-weight: 550
        }

        main .news--overview a:-webkit-any(:hover,:focus) {
            color: var(--color-primary-blue);
            text-underline-offset: 3px
        }

        main .news--overview a:is(:hover,:focus) {
            color: var(--color-primary-blue);
            text-underline-offset: 3px
        }

        main .news--overview article {
            margin-block-end: var(--space-m-l)
        }

        main .news--overview article h3 {
            font-size: var(--step-1);
            margin-block: 0
        }

        main .news--overview article :-webkit-any(p,a) {
            font-size: var(--step-0);
            color: var(--color-contrast-high)
        }

        main .news--overview article :is(p,a) {
            font-size: var(--step-0);
            color: var(--color-contrast-high)
        }

        main .news--overview article p {
            margin-block-start: 0;
            margin-block-end: var(--space-2xs)
        }

        main .news--overview article a {
            text-underline-offset: 5px;
            transition: all .2s var(--ease-2);
            margin-block: 0;
            font-weight: 550
        }

        main .news--overview article a:-webkit-any(:hover,:focus) {
            color: var(--color-primary-blue);
            text-underline-offset: 3px
        }

        main .news--overview article a:is(:hover,:focus) {
            color: var(--color-primary-blue);
            text-underline-offset: 3px
        }

        main .wrapper--foto {
            container-type: inline-size;
            background-color: var(--color-primary-green);
            padding: 1rem;
            border-radius: var(--radius-2);
        }

        main .foto-container {
            height: 400px;
        }

        @container (width>=17.5rem) {

            main .wrapper--foto img {
                border-radius: var(--radius-2);
                height: 100% !important;
                width: 100%;
                object-fit: cover;
            }

            main .wrapper--foto .block--color {
                border-radius: var(--radius-2);
                background-color: var(--color-primary-green);
                padding-inline: var(--space-l);
                z-index: var(--layer-1);
                margin-block-start: -10rem;
                margin-inline-end: var(--space-l);
                padding-block-start: 12rem;
                padding-block-end: var(--space-l)
            }

            main .wrapper--foto ul {
                font-size: var(--step-0);
                padding-inline-start: 1.3rem
            }

            main .wrapper--foto ul li::marker {
                color: var(--color-bg)
            }
        }@container (width>=27.5rem) {

        main .wrapper--foto .block--color {
            border-radius: var(--radius-2);
            padding-inline: var(--space-l);
            z-index: var(--layer-1);
            margin-block-start: -20rem;
            margin-inline-end: var(--space-l);
            padding-block-start: 22rem;
            padding-block-end: var(--space-l)
        }

        main .wrapper--foto .block--color h2 {
            font-size: var(--step-3);
            margin-block-end: 0
        }

        main .wrapper--foto .block--color h2 + p {
            margin-block-start: 0;
            font-weight: 500
        }

        main .wrapper--foto .block--color p {
            font-size: var(--step-0)
        }

        main .wrapper--foto .block--color p:last-of-type:has(a) {
            font-weight: 550
        }

        main .wrapper--foto .block--color a {
            text-underline-offset: 5px;
            transition: all .2s var(--ease-2)
        }

        main .wrapper--foto .block--color a:-webkit-any(:hover,:focus) {
            color: #fff;
            text-underline-offset: 3px
        }

        main .wrapper--foto .block--color a:is(:hover,:focus) {
            color: #fff;
            text-underline-offset: 3px
        }

        main .wrapper--foto .block--color a.btn {
            color: var(--color-contrast-higher);
            padding-block: var(--space-2xs);
            padding-inline: var(--space-m);
            border-radius: var(--radius-2);
            font-size: var(--step-0);
            background-color: #fff;
            inline-size: -moz-fit-content;
            inline-size: fit-content;
            margin-block-start: var(--space-m);
            font-weight: 550;
            text-decoration: none;
            display: block
        }

        main .wrapper--foto .block--color a.btn:-webkit-any(:hover,:focus) {
            background-color: var(--color-primary-blue);
            color: var(--color-contrast-higher)
        }

        main .wrapper--foto .block--color a.btn:is(:hover,:focus) {
            background-color: var(--color-primary-blue);
            color: var(--color-contrast-higher)
        }
    }main .block--newsletter {
         background-color: var(--color-primary-blue);
         border-radius: var(--radius-2);
         margin-block: var(--space-xl);
         padding-inline: var(--space-l);
         padding-block: var(--space-m)
     }

        main .block--newsletter h3 {
            font-size: var(--step-1);
            margin-block-start: 0;
            margin-block-end: var(--space-s)
        }

        main .block--newsletter form {
            gap: var(--space-xs-s);
            flex-wrap: wrap;
            display: flex
        }

        main .block--newsletter form input {
            border-radius: var(--radius-2);
            padding-block: var(--space-2xs);
            padding-inline: var(--space-3xs-2xs);
            background-color: var(--color-bg);
            font-size: var(--step-1);
            border: 1px solid transparent
        }

        main .block--newsletter form input[type=submit] {
            transition: all .2s var(--ease-2);
            cursor: pointer;
            flex: 1 2 100px;
            font-weight: 550
        }

        main .block--newsletter form input[type=submit]:-webkit-any(:hover,:focus) {
            background-color: var(--color-primary-green)
        }

        main .block--newsletter form input[type=submit]:is(:hover,:focus) {
            background-color: var(--color-primary-green)
        }

        main .block--newsletter form input label {
            flex: 1 2 auto
        }

        main .block--newsletter form input[type=email] {
            min-width: 100%;
            font-weight: 550
        }

        main .usefull {
            gap: var(--space-xs);
            flex-wrap: wrap;
            justify-content: space-between;
            margin-block-end: var(--space-xl);
            display: flex;
            container-type: inline-size
        }

        main .usefull div {
            padding-inline: var(--space-l);
            padding-block: var(--space-l);
            border: 1px solid var(--color-contrast-low);
            border-radius: var(--radius-2);
            flex-direction: column;
            inline-size: 100%;
            display: flex
        }

        main .usefull div h4 {
            font-size: var(--step-1);
            margin-block-start: 0
        }

        main .usefull div ul {
            padding-inline-start: 1rem
        }

        main .usefull div ul li::marker {
            color: var(--color-primary-blue)
        }

        main .usefull div ul a :-webkit-any(:hover,:focus) {
            color: var(--color-primary-blue)
        }

        main .usefull div ul a :is(:hover,:focus) {
            color: var(--color-primary-blue)
        }

        @container (width>=37.5rem) {
            main .usefull div {
                inline-size: 48%
            }
        }a.download {
             color: #000;
             outline: 1px solid var(--color-contrast-low);
             border-radius: var(--radius-2);
             justify-content: space-between;
             align-items: center;
             margin-block-start: var(--space-s);
             padding-inline-start: var(--space-2xs);
             text-decoration-color: transparent;
             display: flex;
             hyphens: auto;
         }

        a.download:after {
            content: "";
            background-image: url(/assets/images/icon-download.svg);
            background-position: 50%;
            background-repeat: no-repeat;
            background-color: var(--color-primary-green);
            border-top-right-radius: var(--radius-2);
            border-bottom-right-radius: var(--radius-2);
            border: 5px solid var(--color-primary-green);
            justify-content: center;
            align-items: center;
            min-width: 3rem;
            height: 100%;
            min-height: 3rem;
            display: inline-flex
        }

        .block--color-blue {
            background-color: var(--color-secundary-blue);
            border-radius: var(--radius-2);
            padding: var(--space-l);
            grid-column: 1/-1;
            margin-block-start: var(--space-xl);
            margin-block-end: var(--space-2xl);
            position: relative;
            container-type: inline-size
        }

        .block--color-blue h2 {
            margin-block-start: 0
        }

        .block--color-blue h3 {
            margin-block-end: 0
        }

        .block--color-blue h3 + p {
            margin-block-start: 0
        }

        .block--color-green {
            right: var(--space-l);
            background-color: var(--color-primary-green);
            padding: var(--space-m);
            border-radius: var(--radius-2);
            margin-block-start: var(--space-m)
        }

        .block--color-green p {
            margin-block-start: 0;
            font-weight: 550
        }

        @container (width>=66.25rem) {
            .block--color-green {
                right: var(--space-l);
                background-color: var(--color-primary-green);
                padding: var(--space-m);
                border-radius: var(--radius-2);
                inline-size: 18rem;
                margin-block-start: -7rem;
                position: absolute
            }

            .block--color-green p {
                margin-block-start: 0;
                font-weight: 550
            }

            .block--color-blue :nth-child(9) {
                max-inline-size: 70%
            }
        }.block--color-white {
             --gap: var(--space-xs);
             gap: var(--gap);
             grid-column: 1/-1;
             grid-template-columns:repeat(auto-fit, minmax(min(30rem, 100vw - 2rem), 1fr));
             margin-block-start: var(--space-xl);
             display: grid;
             container-type: inline-size
         }

        .block--color-white h2 {
            font-size: var(--step-2);
            grid-column: 1/-1;
            inline-size: 100%
        }

        .block--color-white .block--person-details {
            padding-block: var(--space-2xs);
            padding-inline: var(--space-2xs);
            background-color: var(--color-secundary-blue);
            border-radius: var(--radius-2);
            inline-size: calc(50% - var(--gap));
            gap: var(--gap);
            flex-direction: column;
            min-inline-size: 100%;
            display: flex
        }

        @container (width>=22.5rem) {
            .block--color-white .block--person-details {
                flex-direction: row
            }
        }.block--color-white .block--person-details figure {
             aspect-ratio: 1;
             inline-size: 200px;
             overflow: hidden
         }

        .block--color-white .block--person-details img {
            border-radius: var(--radius-1);
            aspect-ratio: 1;
            object-fit: cover;
            align-self: flex-start;
            block-size: 100%;
            inline-size: 10rem
        }

        .block--color-white .block--person-details .text h3 {
            margin-block-start: 0
        }

        .block--color-white .block--person-details .text span {
            font-weight: 550
        }

        .block--color-white details {
            border-top-left-radius: var(--radius-2);
            border-top-right-radius: var(--radius-2);
            border-bottom-left-radius: var(--radius-2);
            border-bottom-right-radius: var(--radius-2);
            border: 1px solid var(--color-contrast-low);
            grid-column: 1/-1;
            position: relative
        }

        .block--color-white details[open] {
            border-top-left-radius: var(--radius-2);
            border-top-right-radius: var(--radius-2);
            border: 1px solid var(--color-primary-blue);
            background-color: var(--color-secundary-blue)
        }

        .block--color-white details[open] summary:after {
            content: "";
            transform: rotate(180deg)
        }

        .block--color-white details h2 {
            font-size: var(--step-0);
            margin-block: var(--space-s)
        }

        .block--color-white details div {
            background-color: var(--color-bg);
            border-block-start: 1px solid var(--color-primary-blue);
            border-bottom-left-radius: var(--radius-2);
            border-bottom-right-radius: var(--radius-2);
            padding-inline: var(--space-m);
            padding-block: var(--space-s)
        }

        .block--color-white details div table {
            font-variant-numeric: tabular-nums;
            inline-size: 100%
        }

        .block--color-white details div table th {
            text-align: left;
            background-color: var(--color-contrast-lower);
            padding-inline-start: var(--space-xs)
        }

        .block--color-white details div table td {
            padding-block: var(--space-2xs);
            padding-inline-start: var(--space-xs)
        }

        .block--color-white details div table td a.download {
            outline: 0;
            margin-block-start: unset;
            padding-inline-start: unset
        }

        .block--color-white details div table td a.download:after {
            content: "";
            background-color: transparent;
            background-image: url(/assets/images/icon-download.svg);
            background-position: 50%;
            background-repeat: no-repeat;
            border: 0;
            justify-content: center;
            align-items: center;
            min-width: 2rem;
            height: 100%;
            min-height: 3rem;
            display: inline-flex
        }

        .block--color-white details summary:after {
            content: "";
            transition: all .3s var(--ease-elastic-1);
            background-image: url(/assets/images/chevron.svg);
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: contain;
            block-size: 18px;
            inline-size: 18px;
            display: inline-flex
        }

        .block--color-white details summary {
            padding-inline: var(--space-m);
            cursor: pointer;
            justify-content: space-between;
            align-items: baseline;
            min-block-size: 1rem;
            list-style: none;
            display: flex
        }

        .block--color-white details summary::-webkit-details-marker {
            display: none
        }

        .actueel {
            grid-column: 1/-1
        }

        .actueel .item:first-of-type {
            gap: var(--space-m);
            margin-block: var(--space-2xl);
            flex-flow: wrap;
            grid-column: 1/-1;
            display: flex;
            container-type: inline-size
        }

        .actueel .item:first-of-type figure {
            border-radius: var(--radius-2);
            inline-size: 100%
        }

        .actueel .item:first-of-type .block--text {
            flex-direction: column;
            flex: 1;
            display: flex
        }

        .actueel .item:first-of-type .block--text h2 {
            font-size: var(--step-1);
            margin-block-start: 0
        }

        .actueel .item:first-of-type .block--text :-webkit-any(p,a) {
            font-size: var(--step-0)
        }

        .actueel .item:first-of-type .block--text :is(p,a) {
            font-size: var(--step-0)
        }

        .actueel .item:first-of-type .block--text a {
            text-underline-offset: 5px;
            transition: all .2s var(--ease-2);
            margin-block-start: auto
        }

        .actueel .item:first-of-type .block--text a:-webkit-any(:hover,:focus) {
            color: var(--color-primary-blue);
            text-underline-offset: 3px
        }

        .actueel .item:first-of-type .block--text a:is(:hover,:focus) {
            color: var(--color-primary-blue);
            text-underline-offset: 3px
        }

        @container (width>=44rem) {
            .actueel .item:first-of-type figure {
                inline-size: 40%;
                max-height: 300px;
            }
        }.actueel .item:not(:first-of-type) {
             outline: 1px solid var(--color-secundary-blue);
             border-radius: var(--radius-2);
             padding: var(--space-2xs);
             transition: all .3s var(--ease-2);
             flex-direction: column;
             display: flex
         }

        .actueel .item:not(:first-of-type):-webkit-any(:hover,:focus) {
            box-shadow: 0 1px 1px rgba(0, 0, 0, .11), 0 2px 2px rgba(0, 0, 0, .11), 0 4px 4px rgba(0, 0, 0, .11), 0 6px 8px rgba(0, 0, 0, .11), 0 8px 16px rgba(0, 0, 0, .11)
        }

        .actueel .item:not(:first-of-type):is(:hover,:focus) {
            box-shadow: 0 1px 1px rgba(0, 0, 0, .11), 0 2px 2px rgba(0, 0, 0, .11), 0 4px 4px rgba(0, 0, 0, .11), 0 6px 8px rgba(0, 0, 0, .11), 0 8px 16px rgba(0, 0, 0, .11)
        }

        .actueel .item:not(:first-of-type) figure {
            border-radius: var(--radius-1);
            overflow: clip
        }

        .actueel .item:not(:first-of-type) .block--text {
            flex-direction: column;
            flex: 1;
            display: flex
        }

        .actueel .item:not(:first-of-type) .block--text h3 {
            font-size: var(--step--1);
            margin-block-end: var(--space-m)
        }

        .actueel .item:not(:first-of-type) .block--text a {
            text-underline-offset: 5px;
            transition: all .2s var(--ease-2);
            margin-block-start: auto
        }

        .actueel .item:not(:first-of-type) .block--text a:-webkit-any(:hover,:focus) {
            color: var(--color-primary-blue);
            text-underline-offset: 3px
        }

        .actueel .item:not(:first-of-type) .block--text a:is(:hover,:focus) {
            color: var(--color-primary-blue);
            text-underline-offset: 3px
        }

        .detail {
            gap: var(--space-m);
            grid-column: 1/-1;
            grid-template-columns:repeat(12, minmax(0, 1fr));
            display: grid
        }

        .detail article {
            grid-column: 1/-1
        }

        .detail article h1 {
            font-size: var(--step-4);
            line-height: var(--heading-line-height);
            margin-block-start: unset
        }

        .detail article p {
            font-size: var(--step-0)
        }

        .detail aside {
            grid-area: 1 / 1 /auto/ -1
        }

        .detail aside img {
            grid-column: 1/-1;
            min-inline-size: 100%
        }

        @media screen and (min-width: 37.5rem) {
            .detail article {
                grid-column: 1/7
            }

            .detail aside {
                grid-column: 7/12
            }
        }.grid {
             grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
             gap: 1rem;
             display: grid
         }

        .block--more-news {
            gap: var(--space-m);
            grid-column: 1/-1;
            grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
            display: grid
        }

        .block--more-news h2 {
            grid-column: 1/-1
        }

        .block--more-news .item {
            outline: 1px solid var(--color-secundary-blue);
            border-radius: var(--radius-2);
            padding: var(--space-2xs);
            transition: all .3s var(--ease-2);
            flex-direction: column;
            display: flex
        }

        .block--more-news .item:-webkit-any(:hover,:focus) {
            box-shadow: 0 1px 1px rgba(0, 0, 0, .11), 0 2px 2px rgba(0, 0, 0, .11), 0 4px 4px rgba(0, 0, 0, .11), 0 6px 8px rgba(0, 0, 0, .11), 0 8px 16px rgba(0, 0, 0, .11)
        }

        .block--more-news .item:is(:hover,:focus) {
            box-shadow: 0 1px 1px rgba(0, 0, 0, .11), 0 2px 2px rgba(0, 0, 0, .11), 0 4px 4px rgba(0, 0, 0, .11), 0 6px 8px rgba(0, 0, 0, .11), 0 8px 16px rgba(0, 0, 0, .11)
        }

        .block--more-news .item figure {
            border-radius: var(--radius-1);
            overflow: clip
        }

        .block--more-news .item .block--text {
            flex-direction: column;
            flex: 1;
            display: flex
        }

        .block--more-news .item .block--text h3 {
            font-size: var(--step--1);
            margin-block-end: var(--space-m)
        }

        .block--more-news .item .block--text a {
            text-underline-offset: 5px;
            transition: all .2s var(--ease-2);
            margin-block-start: auto
        }

        .block--more-news .item .block--text a:-webkit-any(:hover,:focus) {
            color: var(--color-primary-blue);
            text-underline-offset: 3px
        }

        .block--more-news .item .block--text a:is(:hover,:focus) {
            color: var(--color-primary-blue);
            text-underline-offset: 3px
        }

        .slider {
            grid-column: 1/-1;
            max-width: 100%;
            display: grid;
            position: relative
        }

        .slider:first-of-type {
            margin-block-start: var(--space-xl)
        }

        .slider h2 {
            margin-block-start: 0;
            display: grid
        }

        .slider .slides {
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            scroll-padding-inline: var(--space-l);
            gap: var(--space-m);
            padding-block: var(--space-m);
            grid-column: 1/-1;
            scroll-margin-inline-start: 1rem;
            display: flex;
            position: relative;
            overflow-x: scroll;
            container-type: inline-size
        }

        .slider .slides figure {
            aspect-ratio: 4/3;
            scroll-snap-align: center;
            border-radius: var(--radius-2);
            background-color: rgba(38, 115, 64, .318);
            min-width: 40vw;
            transition: all .3s ease-in-out;
            overflow: hidden
        }

        .slider .slides figure:-webkit-any(:hover,:focus) {
            z-index: var(--layer-2);
            box-shadow: var(--shadow-3);
            transform: scale(1.1)
        }

        .slider .slides figure:is(:hover,:focus) {
            z-index: var(--layer-2);
            box-shadow: var(--shadow-3);
            transform: scale(1.1)
        }

        @container (width>=30rem) {
            .slider .slides figure {
                min-width: 30vw
            }
        }.slider .slides figure img {
             object-fit: cover;
             block-size: 100%;
             inline-size: 100%
         }

        @supports (animation-timeline:scroll()) {
            @keyframes detect-scroll {
                0%, to {
                    --can-scroll: 1
                }
            }.slides:before, .slides:after {
                 content: "";
                 width: 1rem;
                 height: 100%;
                 padding: .3rem;
                 display: block;
                 position: sticky;
                 top: 0;
                 bottom: 0
             }

            .slides:before {
                background: radial-gradient(at 0, rgba(0, 0, 0, .35), transparent);
                left: 0
            }

            .slides:after {
                background: radial-gradient(at 100%, rgba(0, 0, 0, .35), transparent);
                right: 0
            }

            @keyframes reveal {
                0% {
                    opacity: 0
                }
                to {
                    opacity: 1
                }
            }.slides {
                 scroll-timeline: --scroll-timeline x;
                 overflow-y: auto
             }

            .slides:before, .slides:after {
                animation-name: reveal;
                animation-fill-mode: both;
                animation-timeline: --scroll-timeline
            }

            .slides:before {
                animation-range: 1em 2em
            }

            .slides:after {
                animation-range: calc(100% - 2em) calc(100% - 1em);
                animation-direction: reverse
            }

            .slides {
                --can-scroll: 0;
                animation: detect-scroll;
                animation-timeline: --scroll-timeline
            }

            .slides:before, .slides:after {
                --visibility-if-can-scroll: var(--can-scroll) visible;
                --visibility-if-cant-scroll: hidden;
                visibility: var(--visibility-if-can-scroll, var(--visibility-if-cant-scroll))
            }
        }
    }
}
@layer utilities {
    :-webkit-any(.visually-hidden,.sr-only) {
        clip: rect(0 0 0 0);
        border: 0;
        block-size: 1px;
        inline-size: 1px;
        margin: -1px;
        padding: 0;
        position: absolute;
        overflow: hidden
    }

    :is(.visually-hidden,.sr-only) {
        clip: rect(0 0 0 0);
        border: 0;
        block-size: 1px;
        inline-size: 1px;
        margin: -1px;
        padding: 0;
        position: absolute;
        overflow: hidden
    }

    .border-between-inline > * + * {
        border-inline-start-width: var(--border)
    }

    .border-between-block > * + * {
        border-block-start-width: var(--border)
    }

    .gradient-border {
        border-width: var(--size-3);
        border-image-slice: 1;
        border-image-source: var(--conic-gradient-3)
    }

    .truncate {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden
    }

    .fade-up-and-in {
        opacity: 0;
        animation: var(--animation-fade-in) forwards, var(--animation-slide-in-up) forwards;
        animation-duration: .7s, 1s;
        animation-delay: .3s, 0s
    }

    html {
        font-size: var(--text-base-size)
    }

    @media (prefers-reduced-data: reduce) {
        img, video {
            display: none
        }
    }@media (prefers-reduced-motion: no-preference) {
    :focus {
        outline-offset: 5px;
        transition: outline-offset .25s
    }
}[id] {
     scroll-margin-top: 2em
 }

    main img {
        content-visibility: auto;
        border-radius: var(--radius-2);
    }

    img {
        vertical-align: middle;
        shape-margin: .75rem;
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 100%;
        height: 100%;
        font-style: italic
    }

    a, button {
        touch-action: manipulation
    }

    input {
        font-size: max(16px, 1rem)
    }

    :-webkit-any(h1,h2,h3,h4,h5,h6) {
        text-wrap: balance;
        margin-block-end: var(--space-s)
    }

    :is(h1,h2,h3,h4,h5,h6) {
        text-wrap: balance
    }

    p {
        text-wrap: pretty
    }

    p :last-child {
        margin-block-end: 0
    }

    iframe[src^="https://www.youtube.com/embed/"] {
        aspect-ratio: 16/9;
        block-size: auto;
        inline-size: 100%
    }
}
@layer feedback {
    :where(html) {
        --color-warning-darker: #d1a000;
        --color-warning-dark: #ffc505;
        --color-warning: #ffd138;
        --color-warning-light: #ffdc6b;
        --color-warning-lighter: #ffe89e;
        --color-success-darker: #568830;
        --color-success-dark: #6eae3d;
        --color-success: #88c559;
        --color-success-light: #a3d27f;
        --color-success-lighter: #bedfa4;
        --color-error-darker: #8a142a;
        --color-error-dark: #b71a37;
        --color-error: #e02447;
        --color-error-light: #e6516c;
        --color-error-lighter: #ed7e92
    }
}
@layer form {
    @layer form {
        .fui-i form.fui-form {
            background-color: var(--color-secundary-blue);
            border-radius: var(--radius-2);
            padding: var(--space-l);
            grid-column: 1/-1;
            margin-block-start: var(--space-xl);
            margin-block-end: var(--space-2xl);
            position: relative;
            container-type: inline-size
        }

        .fui-i form.fui-form .fui-input-wrapper :-webkit-any(input[type=text],input[type=email],textarea) {
            font-family: var(--font-stack) !important;
            font-size: var(--step--1) !important;
            border: 0 !important
        }

        .fui-i form.fui-form .fui-input-wrapper :is(input[type=text],input[type=email],textarea) {
            font-family: var(--font-stack) !important;
            font-size: var(--step--1) !important;
            border: 0 !important
        }

        .fui-i form label {
            font-size: var(--step--1) !important;
            font-family: var(--font-stack) !important;
            font-weight: 600 !important
        }

        .fui-i form button[type=submit] {
            background-color: var(--color-primary-blue);
            color: #fff;
            border: 1px solid transparent;
            text-decoration: none;
            font-size: var(--step--1) !important;
            font-weight: 600 !important
        }
    }
}

:where(html) {
    --ease-1: cubic-bezier(.25, 0, .5, 1);
    --ease-2: cubic-bezier(.25, 0, .4, 1);
    --ease-3: cubic-bezier(.25, 0, .3, 1);
    --ease-4: cubic-bezier(.25, 0, .2, 1);
    --ease-5: cubic-bezier(.25, 0, .1, 1);
    --ease-in-1: cubic-bezier(.25, 0, 1, 1);
    --ease-in-2: cubic-bezier(.5, 0, 1, 1);
    --ease-in-3: cubic-bezier(.7, 0, 1, 1);
    --ease-in-4: cubic-bezier(.9, 0, 1, 1);
    --ease-in-5: cubic-bezier(1, 0, 1, 1);
    --ease-out-1: cubic-bezier(0, 0, .75, 1);
    --ease-out-2: cubic-bezier(0, 0, .5, 1);
    --ease-out-3: cubic-bezier(0, 0, .3, 1);
    --ease-out-4: cubic-bezier(0, 0, .1, 1);
    --ease-out-5: cubic-bezier(0, 0, 0, 1);
    --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
    --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
    --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
    --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
    --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
    --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
    --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
    --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
    --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
    --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
    --ease-elastic-in-1: cubic-bezier(.5, -.25, .75, 1);
    --ease-elastic-in-2: cubic-bezier(.5, -.5, .75, 1);
    --ease-elastic-in-3: cubic-bezier(.5, -.75, .75, 1);
    --ease-elastic-in-4: cubic-bezier(.5, -1, .75, 1);
    --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
    --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
    --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
    --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
    --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
    --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
    --ease-step-1: steps(2);
    --ease-step-2: steps(3);
    --ease-step-3: steps(4);
    --ease-step-4: steps(7);
    --ease-step-5: steps(10);
    --ease-elastic-1: var(--ease-elastic-out-1);
    --ease-elastic-2: var(--ease-elastic-out-2);
    --ease-elastic-3: var(--ease-elastic-out-3);
    --ease-elastic-4: var(--ease-elastic-out-4);
    --ease-elastic-5: var(--ease-elastic-out-5);
    --ease-squish-1: var(--ease-elastic-in-out-1);
    --ease-squish-2: var(--ease-elastic-in-out-2);
    --ease-squish-3: var(--ease-elastic-in-out-3);
    --ease-squish-4: var(--ease-elastic-in-out-4);
    --ease-squish-5: var(--ease-elastic-in-out-5);
    --ease-spring-1: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
    --ease-spring-2: linear(0, .007, .029 2.2%, .118 4.7%, .625 14.4%, .826 19%, .902, .962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, .999 61.6%, .995 71.2%, 1);
    --ease-spring-3: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);
    --ease-spring-4: linear(0, .009, .037 1.7%, .153 3.6%, .776 10.3%, 1.001, 1.142 16%, 1.185, 1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, .973, .955 39.2%, .953 41.1%, .957 43.3%, .998 53.3%, 1.009 59.1% 63.7%, .998 78.9%, 1);
    --ease-spring-5: linear(0, .01, .04 1.6%, .161 3.3%, .816 9.4%, 1.046, 1.189 14.4%, 1.231, 1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, .999 29.4%, .955 32.1%, .942, .935 34.9%, .933, .939 38.4%, 1 47.3%, 1.011, 1.017 52.6%, 1.016 56.4%, 1 65.2%, .996 70.2%, 1.001 87.2%, 1);
    --ease-bounce-1: linear(0, .004, .016, .035, .063, .098, .141, .191, .25, .316, .391 36.8%, .563, .766, 1 58.8%, .946, .908 69.1%, .895, .885, .879, .878, .879, .885, .895, .908 89.7%, .946, 1);
    --ease-bounce-2: linear(0, .004, .016, .035, .063, .098, .141 15.1%, .25, .391, .562, .765, 1, .892 45.2%, .849, .815, .788, .769, .757, .753, .757, .769, .788, .815, .85, .892 75.2%, 1 80.2%, .973, .954, .943, .939, .943, .954, .973, 1);
    --ease-bounce-3: linear(0, .004, .016, .035, .062, .098, .141 11.4%, .25, .39, .562, .764, 1 30.3%, .847 34.8%, .787, .737, .699, .672, .655, .65, .656, .672, .699, .738, .787, .847 61.7%, 1 66.2%, .946, .908, .885 74.2%, .879, .878, .879, .885 79.5%, .908, .946, 1 87.4%, .981, .968, .96, .957, .96, .968, .981, 1);
    --ease-bounce-4: linear(0, .004, .016 3%, .062, .141, .25, .391, .562 18.2%, 1 24.3%, .81, .676 32.3%, .629, .595, .575, .568, .575, .595, .629, .676 48.2%, .811, 1 56.2%, .918, .86, .825, .814, .825, .86, .918, 1 77.2%, .94 80.6%, .925, .92, .925, .94 87.5%, 1 90.9%, .974, .965, .974, 1);
    --ease-bounce-5: linear(0, .004, .016 2.5%, .063, .141, .25 10.1%, .562, 1 20.2%, .783, .627, .534 30.9%, .511, .503, .511, .534 38%, .627, .782, 1 48.7%, .892, .815, .769 56.3%, .757, .753, .757, .769 61.3%, .815, .892, 1 68.8%, .908 72.4%, .885, .878, .885, .908 79.4%, 1 83%, .954 85.5%, .943, .939, .943, .954 90.5%, 1 93%, .977, .97, .977, 1)
}

:where(html) {
    --layer-1: 1;
    --layer-2: 2;
    --layer-3: 3;
    --layer-4: 4;
    --layer-5: 5;
    --layer-important: 2147480000
}

:where(html) {
    --shadow-color: 220 3% 15%;
    --shadow-strength: 1%;
    --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 rgba(0, 0, 0, .067);
    --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));
    --shadow-2: 0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)), 0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));
    --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)), 0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)), 0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)), 0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)), 0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));
    --shadow-4: 0 -2px 5px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)), 0 1px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)), 0 2px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)), 0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)), 0 9px 9px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)), 0 16px 16px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%));
    --shadow-5: 0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)), 0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)), 0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)), 0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)), 0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)), 0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));
    --shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)), 0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)), 0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)), 0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)), 0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)), 0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)), 0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));
    --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));
    --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
    --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
    --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
    --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight)
}

:where(html) {
    --animation-fade-in: fade-in .5s var(--ease-3);
    --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
    --animation-fade-out: fade-out .5s var(--ease-3);
    --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
    --animation-scale-up: scale-up .5s var(--ease-3);
    --animation-scale-down: scale-down .5s var(--ease-3);
    --animation-slide-out-up: slide-out-up .5s var(--ease-3);
    --animation-slide-out-down: slide-out-down .5s var(--ease-3);
    --animation-slide-out-right: slide-out-right .5s var(--ease-3);
    --animation-slide-out-left: slide-out-left .5s var(--ease-3);
    --animation-slide-in-up: slide-in-up .5s var(--ease-3);
    --animation-slide-in-down: slide-in-down .5s var(--ease-3);
    --animation-slide-in-right: slide-in-right .5s var(--ease-3);
    --animation-slide-in-left: slide-in-left .5s var(--ease-3);
    --animation-shake-x: shake-x .75s var(--ease-out-5);
    --animation-shake-y: shake-y .75s var(--ease-out-5);
    --animation-shake-z: shake-z 1s var(--ease-in-out-3);
    --animation-spin: spin 2s linear infinite;
    --animation-ping: ping 5s var(--ease-out-3) infinite;
    --animation-blink: blink 1s var(--ease-out-3) infinite;
    --animation-float: float 3s var(--ease-in-out-3) infinite;
    --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
    --animation-pulse: pulse 2s var(--ease-out-3) infinite
}

@keyframes fade-in {
    to {
        opacity: 1
    }
}

@keyframes fade-in-bloom {
    0% {
        opacity: 0;
        filter: brightness() blur(20px)
    }
    10% {
        opacity: 1;
        filter: brightness(2) blur(10px)
    }
    to {
        opacity: 1;
        filter: brightness() blur()
    }
}

@keyframes fade-out {
    to {
        opacity: 0
    }
}

@keyframes fade-out-bloom {
    to {
        opacity: 0;
        filter: brightness() blur(20px)
    }
    10% {
        opacity: 1;
        filter: brightness(2) blur(10px)
    }
    0% {
        opacity: 1;
        filter: brightness() blur()
    }
}

@keyframes scale-up {
    to {
        transform: scale(1.25)
    }
}

@keyframes scale-down {
    to {
        transform: scale(.75)
    }
}

@keyframes slide-out-up {
    to {
        transform: translateY(-100%)
    }
}

@keyframes slide-out-down {
    to {
        transform: translateY(100%)
    }
}

@keyframes slide-out-right {
    to {
        transform: translate(100%)
    }
}

@keyframes slide-out-left {
    to {
        transform: translate(-100%)
    }
}

@keyframes slide-in-up {
    0% {
        transform: translateY(100%)
    }
}

@keyframes slide-in-down {
    0% {
        transform: translateY(-100%)
    }
}

@keyframes slide-in-right {
    0% {
        transform: translate(-100%)
    }
}

@keyframes slide-in-left {
    0% {
        transform: translate(100%)
    }
}

@keyframes shake-x {
    0%, to {
        transform: translate(0%)
    }
    20% {
        transform: translate(-5%)
    }
    40% {
        transform: translate(5%)
    }
    60% {
        transform: translate(-5%)
    }
    80% {
        transform: translate(5%)
    }
}

@keyframes shake-y {
    0%, to {
        transform: translateY(0%)
    }
    20% {
        transform: translateY(-5%)
    }
    40% {
        transform: translateY(5%)
    }
    60% {
        transform: translateY(-5%)
    }
    80% {
        transform: translateY(5%)
    }
}

@keyframes shake-z {
    0%, to {
        transform: rotate(0)
    }
    20% {
        transform: rotate(-2deg)
    }
    40% {
        transform: rotate(2deg)
    }
    60% {
        transform: rotate(-2deg)
    }
    80% {
        transform: rotate(2deg)
    }
}

@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

@keyframes ping {
    90%, to {
        opacity: 0;
        transform: scale(2)
    }
}

@keyframes blink {
    0%, to {
        opacity: 1
    }
    50% {
        opacity: .5
    }
}

@keyframes float {
    50% {
        transform: translateY(-25%)
    }
}

@keyframes bounce {
    25% {
        transform: translateY(-20%)
    }
    40% {
        transform: translateY(-3%)
    }
    0%, 60%, to {
        transform: translateY(0)
    }
}

@keyframes pulse {
    50% {
        transform: scale(.9)
    }
}

:where(html) {
    --border-size-1: 1px;
    --border-size-2: 2px;
    --border-size-3: 5px;
    --border-size-4: 10px;
    --border-size-5: 25px;
    --radius-1: 2px;
    --radius-2: .5rem;
    --radius-3: 1rem;
    --radius-4: 2rem;
    --radius-5: 4rem;
    --radius-6: 8rem;
    --radius-drawn-1: 255px 15px 225px 15px/15px 225px 15px 255px;
    --radius-drawn-2: 125px 10px 20px 185px/25px 205px 205px 25px;
    --radius-drawn-3: 15px 255px 15px 225px/225px 15px 255px 15px;
    --radius-drawn-4: 15px 25px 155px 25px/225px 150px 25px 115px;
    --radius-drawn-5: 250px 25px 15px 20px/15px 80px 105px 115px;
    --radius-drawn-6: 28px 100px 20px 15px/150px 30px 205px 225px;
    --radius-round: 100000px;
    --radius-blob-1: 30% 70% 70% 30%/53% 30% 70% 47%;
    --radius-blob-2: 53% 47% 34% 66%/63% 46% 54% 37%;
    --radius-blob-3: 37% 63% 56% 44%/49% 56% 44% 51%;
    --radius-blob-4: 63% 37% 37% 63%/43% 37% 63% 57%;
    --radius-blob-5: 49% 51% 48% 52%/57% 44% 56% 43%;
    --radius-conditional-1: clamp(0px, calc(100vw - 100%) * 100000, var(--radius-1));
    --radius-conditional-2: clamp(0px, calc(100vw - 100%) * 100000, var(--radius-2));
    --radius-conditional-3: clamp(0px, calc(100vw - 100%) * 100000, var(--radius-3));
    --radius-conditional-4: clamp(0px, calc(100vw - 100%) * 100000, var(--radius-4));
    --radius-conditional-5: clamp(0px, calc(100vw - 100%) * 100000, var(--radius-5));
    --radius-conditional-6: clamp(0px, calc(100vw - 100%) * 100000, var(--radius-6))
}