@charset "UTF-8";

html {
    --slider-theme-color: #fff;
    --slider-navigation-sides-offset: 1rem;
    overflow-y: overlay;
}

a, button, input, textarea {
    -webkit-tap-highlight-color: color-mix(in srgb, var(--color--primary), transparent 90%);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border: none;
}

::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

::-webkit-scrollbar-button {
    height: 0;
    width: 0
}

@layer reset {
    :where(*, *::before, *::after) {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
}

@layer print-styles {
    @media print {

        @page {
            size: A4 portrait;
            margin: 0.3cm 0.5cm;
        }

        *,
        ::before,
        ::after {
            color: #000000 !important;
            background-color: #ffffff !important;
            box-shadow: none !important;
            text-shadow: none !important;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            color-scheme: light;
        }

        a,
        a:visited {
            text-decoration: underline;
        }

        a[href]:not([href^="#"])::after {
            content: " (" attr(href) ")";
            word-break: break-all;
        }

        abbr[title]::after {
            content: " (" attr(title) ")";
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote {
            orphans: 3;
            widows: 3;
        }

        h2,
        h3,
        h4 {
            page-break-after: avoid;
        }

        blockquote,
        pre {
            border: 1px solid #777777;
            page-break-inside: avoid;
        }

        img {
            max-width: 100% !important;
            page-break-inside: avoid;
        }

        thead {
            display: table-header-group;
        }

        tr,
        img {
            page-break-inside: avoid;
        }

        .print-visible {
            display: block !important;
        }

        .print-hidden {
            display: none !important;
        }
    }
}

@layer base {
    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        font-size: clamp(0.75rem, 0.875rem + ((1vw - 0.375rem) * 2), 1rem);
    }

    body {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
    }

    main {
        display: block;
        outline: none;
        min-width: 0;
        padding-top: 0 !important;
    }

    hr {
        box-sizing: content-box;
        height: 0;
        overflow: visible;
    }

    pre {
        font-family: monospace, monospace;
        font-size: 1em;
    }

    abbr[title] {
        border-bottom: none;
        text-decoration: underline;
        text-decoration: underline dotted;
    }

    b,
    strong {
        font-weight: bolder;
    }

    small {
        font-size: 80%;
    }

    ul,
    li {
        list-style: none;
    }

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

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

    svg.icon,
    .icon-container svg {
        display: block;
        width: 1em;
        height: 1em;
        fill: currentColor;
        aspect-ratio: 1/1;
    }

    .icon-container svg {
        width: 100%;
        height: auto;
    }

    img,
    picture,
    video {
        max-width: 100%;
        display: block;
        border-style: none;
        height: auto;
    }

    video {
        vertical-align: middle;
        width: 100%;
    }

    picture {
        width: fit-content;
    }

    button,
    input,
    select,
    textarea {
        font-family: inherit;
        font-size: 100%;
        line-height: var(--line-height--body);
    }

    input,
    select,
    textarea {
        width: 100%;
        display: block;
    }

    button,
    input {
        overflow: visible;
        cursor: pointer;
        background: transparent;
        border: 0;
    }

    button,
    select {
        text-transform: none;
    }

    [type="button"],
    [type="reset"],
    [type="submit"],
    button {
        -webkit-appearance: button;
    }

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

    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring,
    button:-moz-focusring {
        outline: 1px dotted ButtonText;
    }

    fieldset {
        border: 0;
    }

    legend {
        color: inherit;
        display: table;
        max-width: 100%;
        padding: 0;
        white-space: normal;
        font-size: 120%;
        margin-block: 2rem 1rem;
    }

    progress {
        vertical-align: baseline;
    }

    textarea {
        overflow: auto;
        resize: none;
    }

    [type="checkbox"],
    [type="radio"] {
        padding: 0;
    }

    [type="number"]::-webkit-inner-spin-button,
    [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;
    }

    template {
        display: none;
    }

    [hidden] {
        display: none;
    }

    button {
        isolation: isolate;
        transition: .3s all ease-in-out;
        display: inline-flex;
        position: relative;
        align-items: center;
        user-select: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        will-change: auto;
        justify-content: center;
        overflow: hidden;
    }

    .form-group {
        position: relative;
        margin-block-end: .5lh;
        label {
            font-size: var(--font-size--14);
        }
    }

    .checkbox>label,
    .radio>label {
        position: relative;
        cursor: pointer;
        padding-inline-start: 2rem;
        text-align: left;
        display: flex;
        flex-direction: column;
        border: 1em solid transparent;
        border-width: 1rem 0 1rem 0;
        background-clip: content-box;
        box-sizing: content-box;
        max-width: fit-content;
        font-size: var(--font-size--14);
    }

    .checkbox>label span,
    .radio>label span {
        padding-block-start: .2rem;
        line-height: var(--line-height--one);
    }

    .checkbox .has-8-font-size span {
        padding-block-start: .5em;
    }

    .checkbox input:not(.woocommerce-form__input),
    .radio input,
    .input-swatch input {
        width: 0;
        opacity: 0.00000001 !important;
        position: absolute;
        left: 0;
        height: 0;
    }

    .checkbox .helper {
        position: absolute;
        left: 0;
        top: .2em;
        width: 1rem;
        height: 1rem;
        z-index: 0;
        -webkit-transition: border-color 0.28s ease;
        transition: border-color 0.28s ease;
        background: var(--color--white);
        outline-color: transparent;
        outline-offset: -1px;
        outline-style: solid;
        outline-width: 1px;
        border: 1px solid var(--color--border);
    }

    .checkbox .helper::before,
    .checkbox .helper::after {
        position: absolute;
        height: 0;
        width: 0.16rem;
        background-color: var(--color--primary);
        display: block;
        transform-origin: left top;
        content: '';
        transition: opacity 0.28s ease, height 0s linear 0.28s;
        opacity: 0;
    }

    .checkbox .helper::before {
        top: calc(50% + .32rem);
        left: calc(50% - .1rem);
        transform: rotate(-135deg);
    }

    .checkbox .helper::after {
        top: calc(50%);
        left: .05rem;
        transform: rotate(-45deg);
    }

    .checkbox label:hover .helper,
    .checkbox input::where(:focus-visible) .helper {
    }

    .checkbox input:checked~.helper {
    }

    .checkbox input[disabled]~.helper {
        filter: grayscale(100%);
        opacity: 0.5;
        color: var(--color--grey-dark);
    }

    label:has([disabled]),
    label:has([disabled]) .helper {
        cursor: default;
    }

    .checkbox input:checked~.helper::after,
    .checkbox input:checked~.helper::before {
        opacity: 1;
        transition: height 0.28s ease;
    }

    .checkbox input:checked~.helper::after {
        height: 0.4rem;
    }

    .checkbox input:checked~.helper::before {
        height: 0.8rem;
        transition-delay: 0.28s;
    }

    .checkbox input:focus~.helper {
        border-color: var(--color--primary);
        accent-color: currentcolor;
    }

    .input-swatch label {
        position: relative;
        user-select: none;
    }

    .input-swatch .helper {
        position: relative;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        font-size: var(--font-size--x-small);
        font-weight: var(--custom--font-weight--semibold);
        line-height: 1.2em;
        background-clip: content-box;
        box-sizing: content-box;
        text-transform: uppercase;
        padding: .65em 1em;
        border: 3px solid var(--color--primary);
        border-radius: .75em;
        transition: .2s all linear;
        background: var(--color--white);
    }

    .input-swatch input:checked~.helper {
        border-color: var(--color--primary);
    }

    .input-swatch label:hover input:not(:checked):not([disabled])~.helper {
        border-color: var(--color--grey);
    }

    .input-swatch input:disabled~.helper {
        opacity: 0.2;
        pointer-events: none;
    }

    .form-group-horizontal {
        display: flex;
        gap: 0 4rem;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .form-group-horizontal>* {
        margin-top: 0 !important;
    }

}

@layer animation {
    @media (prefers-reduced-motion: no-preference) {
        @keyframes arrowOut {
            0% {
                transform: translate(0, 0);
                opacity: 1;
            }

            100% {
                transform: translate(300%, 0);
                opacity: 0;
            }
        }

        @keyframes arrowReturn {
            0% {
                transform: translate(300%, 0);
                opacity: 0;
            }

            10% {
                transform: translate(-40%, 0);
                opacity: 0;
            }

            100% {
                transform: translate(0, 0);
                opacity: 1;
            }
        }

        @keyframes loading-bar {
            from {
                transform: translateX(-100%);
            }

            to {
                transform: translateX(100%);
            }
        }

        @keyframes fade-out {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        @keyframes slide-out-up {
            from {
                transform: translateY(0);
                opacity: 1;
            }

            to {
                transform: translateY(-100%);
                opacity: 0;
            }
        }

        @keyframes fade-in {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes slide-in-down {
            from {
                transform: translateY(-10%);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
    }
}

@layer transition {

    html.is-transitioning,
    html.is-transitioning * {
        cursor: wait !important;
        pointer-events: none;
    }

    /*
    html.is-transitioning::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--color--primary);
        animation: loading-bar 1s infinite;
        z-index: 2147483647;
    }
    */

    ::view-transition-old(root) {
        animation: 300ms ease-out both fade-out;
    }

    ::view-transition-new(root) {
        animation: 300ms ease-in both fade-in;
    }

    ::view-transition-new(header) {
        animation: 300ms ease-in both slide-in-down;
    }
}

@layer layout {
    @media (min-width: 768px) {
        body {
            --style--root--padding-right: 1.5rem;
            --style--root--padding-left: 1.5rem;
        }
    }

    @media (min-width: 959px) {
        body {
            --style--root--padding-right: 2rem;
            --style--root--padding-left: 2rem;
        }
    }

    body {
        display: grid;
        min-height: 100vh;
        grid-template-rows: auto 1fr auto;
    }

    footer {
        place-content: end;
    }

    .header {
        position: sticky;
        background: var(--color--white);
        z-index: 100;
        will-change: transform, opacity;
        width: 100%;
        top: 0;
        box-shadow: var(--shadow--sm);
        opacity: 1;
        transition: opacity 300ms ease;

        @starting-style {
            opacity: 0;
        }

        &.fadeout {
            pointer-events: none;
            opacity: 0;
        }

        .header-logo {
            view-transition-name: header;
        }
    }

    .page.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: var(--style--global--wide-size);
    }

}

@layer components {
    .validation-message {
        order: 2;
        display: inline-block;
        padding: 0.25rem 0.75rem;
        background: var(--color--primary);
        color: var(--color--white);
        font-size: var(--font-size--14);
        font-weight: var(--font-weight--medium);
        border-radius: var(--border-radius--full);
        line-height: 1.6;
        position: absolute;
    }

    .form-group:has(label) .validation-message {
        left: auto;
        right: .5rem;
        top: 2.25em;
    }

    :root :where(textarea, input:where([type=email], [type=number], [type=password], [type=search], [type=text], [type=tel], [type=url]))~.validation-message {
        position: absolute;
        top: 0;
        left: 0;
        translate: 0 -100%;
        font-size: var(--font-size--8);
        font-weight: var(--font-weight--bold);
        text-transform: uppercase;
        letter-spacing: .15em;
    }

    .is-outline input {
        background-color: transparent;
        outline-color: var(--color--grey);
    }

    *:not(.is-outline)>input:where(:active, :focus-within) {
        outline-color: var(--color--primary);
    }

    .is-outline .input:where(:active, :focus-within) {
        outline-color: var(--color--primary);
    }

    .is-outline-grey :where(input, select, .helper) {
        outline-color: var(--color--grey);
    }

    .format-ucwords {
        text-transform: none;
    }

    .format-ucwords::placeholder {
        text-transform: uppercase;
    }

    input.has-radius {
        border-radius: 8px;
    }

    input.has-icon {
        padding-inline-end: 2em;
    }

    input.has-grey-border {
        border-color: var(--color--grey);
    }

    .toggle-password {
        position: relative;

        input[type="checkbox"],
        input[type="checkbox"]~span:empty {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 100%;
            cursor: pointer;
            aspect-ratio: 1/1;
            display: block;
            max-width: fit-content;
            width: auto;
        }

        input[type="checkbox"] {
            opacity: 0;
            margin: 0;
            fill: var(--color--primary);

            &~span:empty {
                color: var(--color--grey);
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: contain;
                background-color: currentColor;
                pointer-events: none;
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='22' fill='none' viewBox='0 0 31 22'%3E%3Cpath stroke='%23c9c8bf' stroke-miterlimit='10' stroke-width='2' d='M15.375 15.9a4.9 4.9 0 1 0 0-9.8 4.9 4.9 0 0 0 0 9.8Z'/%3E%3Cpath stroke='%23c9c8bf' stroke-miterlimit='10' stroke-width='2' d='M29.53 11C27.472 8.04 22.9 1 15.375 1S3.274 8.044 1.219 11c2.059 2.96 6.63 10 14.156 10 7.524 0 12.1-7.043 14.155-10Z'/%3E%3C/svg%3E");
                mask-size: 1em auto;
            }

            &:checked~span:empty {
                mask-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='currentColor' d='M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z'/%3E%3C/svg%3E");
            }

            &:where(:focus-visible, :hover)~span:empty {
                color: var(--color--black-true);
            }
        }

        input::-ms-reveal,
        input::-ms-clear {
            display: none;
        }
    }

    .form-loading {
        position: relative;

        &>* {
            transition: .3s opacity ease, .3s blur ease;
        }

        &::after {
            position: absolute;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='50 0 500 300'%3E%3Cstyle%3E@keyframes rotate3351-counterclockwise%7Bto%7Btransform:rotate(-30deg)%7D%7D@keyframes rotate3351-clockwise%7Bto%7Btransform:rotate(30deg)%7D%7D@keyframes dot3351-motion%7Bto%7Btransform:translateX(-100px)%7D%7D.pacman3351-dot%7Bfill:currentColor;animation-name:dot3351-motion;animation-duration:600ms;animation-timing-function:linear;animation-iteration-count:infinite%7D%3C/style%3E%3Ccircle cx='250' cy='50%25' r='10' class='pacman3351-dot'/%3E%3Ccircle cx='350' cy='50%25' r='10' class='pacman3351-dot'/%3E%3Ccircle cx='450' cy='50%25' r='10' class='pacman3351-dot'/%3E%3Ccircle cx='550' cy='50%25' r='10' class='pacman3351-dot'/%3E%3Ccircle cx='650' cy='50%25' r='10' class='pacman3351-dot'/%3E%3Cpath d='m150 150 70.4 71a100 100 0 0 0 29.6-71Z' style='fill:currentColor;animation-duration:175ms;animation-timing-function:linear;animation-direction:alternate;animation-iteration-count:infinite;transform-origin:calc(300px/2) 150px;animation-name:rotate3351-clockwise'/%3E%3Cpath d='m150 150 70.4-71a100 100 0 0 1 29.6 71Z' style='fill:currentColor;animation-duration:175ms;animation-timing-function:linear;animation-direction:alternate;animation-iteration-count:infinite;transform-origin:calc(300px/2) 150px;animation-name:rotate3351-counterclockwise'/%3E%3Cpath d='m150 150 86.6-50a100 100 0 1 0 0 100Z' style='fill:currentColor'/%3E%3C/svg%3E") center / 4em auto no-repeat;
            inset: 0;
        }

        &.loading>* {
            opacity: 0.2;
            filter: blur(1px);
        }

        &.loading::after {
            content: '';
        }
    }

    .form-group-has-button-right {
        position: relative;

        button {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            aspect-ratio: 1;
            z-index: 1;
        }
    }

    .reading-progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 0%;
        height: 4px;
        background-color: var(--color--primary);
        z-index: 99999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s;
        will-change: width;

        &.show {
            opacity: 1;
            visibility: visible;
        }

        &.hidden {
            opacity: 0;
            visibility: hidden;
        }
    }

    .btn-slim {
        padding-block: .25em;
    }

    .btn>span {
        position: relative;
        z-index: 2;
        line-height: 1;
    }

    .burger {
        min-width: 28px;
        --line-offset-closed: 10px;
        display: none;
        padding: 1rem;
        box-sizing: content-box;

        .burger-wrapper {
            position: relative;
            width: 100%;
            height: 1.5rem;
        }

        .line {
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            height: 2px;
            background-color: currentColor;
            transform-origin: center;
            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        }

        .line:nth-child(1) {
            transform: translateY(calc(var(--line-offset-closed) * -1));
        }

        .line:nth-child(2) {
            transform: translateY(0);
        }

        .line:nth-child(3) {
            transform: translateY(var(--line-offset-closed));
        }

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

        body:has(#mobile-menu:popover-open) & {
            @media (prefers-reduced-motion: no-preference) {
                .line:nth-child(1) {
                    transform: translateY(0) rotate(45deg) scaleX(1.25);
                }

                .line:nth-child(2) {
                    opacity: 0;
                }

                .line:nth-child(3) {
                    transform: translateY(0) rotate(-45deg) scaleX(1.25);
                }
            }
        }
        @media (max-width: 1022px) {
            display: block;
        }

    }

    .dialog {
        align-self: center;
        justify-self: center;
        position: fixed;
        inset: 0px;
        width: 36rem;
        max-height: 90dvh;
        height: fit-content;
        margin: auto;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 400ms ease, transform 400ms ease, display 400ms allow-discrete, overlay 400ms allow-discrete;
        max-width: calc(100% - var(--style--root--padding-left) - var(--style--root--padding-right));
        background: none;
        border: 0;
        overflow: visible;
        background: color-mix(in srgb, var(--color--white), transparent 10%);
        backdrop-filter: blur(5px);
        padding: var(--spacing--3);
        border-radius: var(--border-radius--xl);
        box-shadow: var(--shadow--md);
        justify-content: center;

        &:is([open], :popover-open) {
            display: flex;
            opacity: 1;
            transform: translateY(0);
        }

        &::backdrop {
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(2px);
            opacity: 0;
            transition: opacity 400ms ease, display 400ms allow-discrete, overlay 400ms allow-discrete;
        }

        &:is([open], :popover-open)::backdrop {
            opacity: 1;
        }

        .scroll {
            overflow-y: scroll;
            overflow-x: hidden;
            height: inherit;
        }

        .wrapper {
            max-width: 25rem;
            width: 100%;
        }

        &.dialog-from-left {
            width: fit-content;
            margin: 0;
            right: auto;
            max-height: 100vh;
            height: 100%;
            background: var(--color--white);
            border-right: 1px solid var(--color--border);
            transform: translateX(-100%);

            >.wrapper {
                padding-inline: var(--spacing--1-5);
                padding-block: var(--spacing--2);
            }

            .close {
                right: -45px;
            }

            &:is([open], :popover-open) {
                transform: translateX(0);
            }
        }

        @starting-style {
            &:is([open], :popover-open) {
                opacity: 0;
                transform: translateY(-10px);
            }

            &.dialog-from-left:is([open], :popover-open) {
                transform: translateX(-100%);
            }

            &:is([open], :popover-open)::backdrop {
                opacity: 0;
            }
        }

        .back,
        .close {
            padding: .5em;
            position: absolute;
            right: 1rem;
            top: 1rem;
            aspect-ratio: 1;
            z-index: 1;
            left: auto;
            color: var(--color--primary);
        }

        .back {
            right: auto;
            left: 0;
        }

    }

    picture[style*="--blurhash"] {
        html.js & {
            background: var(--blurhash) center / cover var(--dominant-color, #cccccc);
            transition: .5s all ease;
            background-size: 104%;
            display: flex;
            align-content: center;
            flex-wrap: wrap;

            img {
                opacity: 0;
                transition: .4s all ease 0s !important;
                background-color: #fff;

                &.loaded {
                    opacity: 1;
                }
            }
        }

        html.no-js & {
            &:has(img) img {
                background: var(--blurhash) center / cover var(--dominant-color);
            }
        }
    }


    .placeholder:has(picture) {
        position: relative;

        & > picture {
            position: relative;
            height: 100%;
            width: 100%;
            max-height: 24rem;
            min-height: 100%;
            aspect-ratio: 1/1;
            background-size: cover !important;
            justify-content: center;
            overflow: hidden;



            .column-related & {
                aspect-ratio: 1 / .75;
            }

            img {
                max-width: calc( 100% - 2rem);
                max-height: calc( 100% - 2rem);
                background: #fff;
                width: auto;
                margin: 1rem;

                &.placeholder {
                  height: 100%;
                  object-fit: contain;
                  background: #cccccc;
                  margin: 0;
                  max-width: none;
                  max-height: none;
                  width: 100%;
                  transition: .4s all ease 0s !important;
                }
            }
        }
    }

    p.has-drop-cap.has-background {
        overflow: hidden;
    }

    p :where(img, picture) {
        display: inline-flex;
    }

    .main-menu {
        display: grid;
        justify-content: center;
        position: relative;

        .main-menu-ul {
            overflow: hidden;
        }

        .main-menu-ul>li {
            display: flex;
            align-items: center;
        }

        li:has(.btn) {
            padding: .75em 0;
        }

        li {
            button {
                opacity: .2;
                pointer-events: none;
                translate: -50% 0;

                svg {
                    width: .65em;
                    height: .65em;
                }
            }
            a {
                position: relative;
                color: oklch(37.3% 0.034 259.733);
                align-items: center;
                gap: .5em;

                &:where(:hover,:focus-visible) {
                    color: var(--color--primary);
                }
            }
        }

        .disc {
            position: relative;
        }

        .disc::before {
            color: var(--color--grey);
            scale: .5;
            translate: -50% -50%;
            position: absolute;
            left: 0;
            top: 50%;
            margin: 0;
            transform-origin: center;
        }

        .btn {
            color: var(--color--primary);
            border-color: var(--color--grey);
            margin-left: 1.5em;
        }

        .is-style-outline {
            margin-inline-end: calc(1em + 1px);
        }

        .disc .is-style-outline {
            margin-inline-start: calc(1em + 1px);
        }

        span {
            display: block;
        }

        .depth-0 > a .icon-home + .menu-item-content {
            display: none;
        }

        .main-menu-ul > li:where([class^="current-menu-"]) > :where(a) {
            color: var(--color--primary);
            font-weight: var(--font-weight--medium);
        }

        .main-sub-menu {
            width: 100%;
            overflow: hidden;
            transition: .15s all ease-in-out;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 1px;
            translate: 0 100%;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: .3s opacity .2s, 0s visibility .3s, .3s bottom .1s;
            background: var(--color--white);
            box-shadow: var(--shadow--lg);
        }

        @media (hover: hover) {
            .main-menu-ul.lenis-smooth a {
                pointer-events: none;
            }

            .main-menu-ul:not(.lenis-smooth) .has-sub-menu:where(:focus-within, :hover, [open])>.main-sub-menu {
                opacity: 1;
                bottom: 1px;
                visibility: visible;
                pointer-events: auto;
                transition: .3s opacity 0s, 0s visibility 0s, .3s bottom 0s;

                .megamenu-column {
                    opacity: 1;
                    transition: all ease-in 0s;
                }
            }
        }

        .megamenu-column {
            gap: var(--spacing--2);
            grid-auto-flow: column;
            align-items: start;
            padding-block: var(--spacing--1-5);
            opacity: 0;
            transition: all ease-in 0s;

            &>div {
                text-transform: uppercase;
                letter-spacing: 0.2em;
                color: var(--color--text-2);
                font-weight: var(--font-weight--semibold);
                margin-bottom: var(--spacing--1);
            }
        }

        .menu-item-desc {
            font-size: 12px !important;
        }

    }

    .mobile-menu {
        .mobile-menu-ul>li {
            position: relative;
            border-bottom: 1px solid var(--color--grey);

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

        .current-menu-item> :where(a, div > a),
        .current-menu-parent> :where(a, div > a) {
            color: var(--color--primary);
        }

        a {
            padding: .5em 0;
            display: flex;
            gap: .5em;
            align-items: center;
            svg {
                width: .9em;
            }
        }

        .toggle {
            position: absolute;
            top: 0;
            right: -.5em;
            color: var(--color--primary-dark);
            height: 2em;
            aspect-ratio: 1;




            &:hover {
                color: var(--color--primary);
            }

            svg {
                fill: currentColor;
                pointer-events: none;
            }

            .icon {
                transition: rotate 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            &[aria-expanded="true"] .icon {
                rotate: 90deg;
            }
        }

        .sub-menu {
            display: grid;
            grid-template-rows: 0fr;
            opacity: 0;
            transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;






























            >.wrapper {
                overflow: hidden;
            }

            li {
                font-size: 14px;

                &:last-child {
                    padding-block-end: 1rem;
                }
            }

            &[aria-hidden="false"] {
                grid-template-rows: 1fr;
                opacity: 1;
            }
        }

        .has-sub-menu:focus-within {
            html.no-js &>.toggle:not(:focus-within)+.sub-menu {
                grid-template-rows: 1fr;
                opacity: 1;
            }

            &>.toggle:not([aria-expanded="false"]) .icon {
                rotate: 90deg;
            }
        }

    }

    .btn-sm {
        padding: .6rem 1.125rem;
        text-decoration: none;
        font-size: var(--font-size--12);

        span {
            background: none;
        }
    }

    .btn {
        svg.icon {
            margin-right: .5em;
        }
    }

    .arrow {
        position: fixed;
        right: 1.5rem;
        bottom: 1.5rem;
        z-index: 99;
        display: flex;
        align-items: center;
        width: 2rem;
        height: 2rem;
        background: var(--color--primary);
        text-align: center;
        opacity: 0;
        pointer-events: none;
        border: 1px solid color-mix(in srgb, var(--color--white), transparent 90%);

        &.visible {
            opacity: 1;
            pointer-events: all;
        }

        svg {
            display: block;
            transition: .3s all;
            width: 1rem;
            height: 1rem;
            fill: var(--color--white);
            margin: 0 auto;
        }

        &:hover svg {
            translate: 0 -4px;
            scale: 1.1;
        }

        @media (max-width: 450px) {
            display: none !important;
        }
    }

    [data-tab-component] {
        position: relative;
        overflow: hidden;
        display: grid;

        &>[role="region"],
        &>[role="tabpanel"] {
            grid-area: 1 / 1;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0s ease-in-out, visibility 0s;
            max-height: inherit;
            overflow: hidden;

            &[aria-hidden="false"] {
                opacity: 1;
                visibility: visible;
                transition: opacity 0.4s ease-in-out, visibility 0s;
                max-height: none;
                overflow: visible;
            }
        }
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .lite-youtube-fallback {
        aspect-ratio: 16 / 9;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1em;
        padding: 1em;
        background-color: var(--color--grey);
        color: var(--color--white);
        text-decoration: none;
        position: relative;
        isolation: isolate;

        &::before {
            display: block;
            content: '';
            border: solid transparent;
            border-width: 2em 0 2em 3em;
            border-left-color: var(--color--dark-white);
            transition: .3s border-color ease-in-out;
        }

        &:hover::before {
            border-left-color: var(--color--dark-grey);
        }

        &:focus {
            outline: 2px solid var(--color--primary);
        }

        img {
            position: absolute;
            inset: 0;
            z-index: -1;
            opacity: .3
        }
    }

    .toggle-content {
        position: relative;
        overflow: hidden;
        height: 0;
        transition: 0.25s height cubic-bezier(0.275, 0.075, 0.215, 0.94), .5s transform ease-out, .2s opacity ease-out;
        transform: translateY(10px);
        opacity: 0;
        pointer-events: none;

        &.is-visible {
            height: auto;
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
            z-index: 2;
            overflow: visible;
        }
    }
}

@layer article {

    .hr-separator {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        hr {
            width: 100%;

            &+* {
                position: absolute;
                left: 50%;
                top: 0;
                /*
                padding-block: .75em;
                padding-inline: 1.5em;
                */
                translate: -50% -50%;
                margin: 0;
                /*
                &.has-16-font-size {
                    padding-block: .4em;
                }
                */
            }

            &+*:not(a)::before {
                display: none;
            }
        }

    }

    .pagination-next {
        padding-block: var(--spacing--2) var(--spacing--4);
    }

    .sharing {
        padding-block: var(--spacing--0-5);

        [role="navigation"] a {
            color: var(--color--grey);

            &:where(:hover,:focus-visible) {
                color: var(--color--primary);
            }
        }

        svg {
            width: 1.5rem;
            height: 1.5rem;
        }

        .web-share {
            &:where(:hover,:focus-visible) {
                color: var(--color--primary);
            }
        }
    }

    .video-container {
        position: relative;
        overflow: hidden;
        padding-bottom: 56.25%;
        height: 0;
        border-radius: 6px;
        background-size: cover;
        background-repeat: no-repeat;
        cursor: pointer;

        &>:where(embed, iframe, object, video) {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }
    }

    .main-article {
        width: 100%;
    }

    nav.pagination {
        margin: 2rem 0;

        ul.list-bare {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: center;

            li {
                display: inline-flex;
                align-items: center;
                justify-content: center;

                &>* {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                }

                .page-numbers,
                .next,
                .prev {
                    min-width: 2.5rem;
                    height: 2.5rem;
                    border: 1px solid #ccc;
                    text-decoration: none;
                    line-height: var(--line-height--one);
                    padding: 0 .5em;

                    &:is(a):hover,
                    &:is(a):focus {
                        color: var(--color--primary);
                        border-color: var(--color--primary);
                    }

                    svg {
                        transition: transform 180ms, stroke 180ms;
                        width: .75em;
                        height: .75em;
                    }

                    &:hover svg {
                        stroke: var(--color--primary);
                        transform: translateX(2px);
                    }

                    &.prev:hover svg {
                        transform: translateX(-2px);
                    }
                }

                .current {
                    background-color: var(--color--primary);
                    border-color: var(--color--primary);
                    color: #fff;
                }

                .dots {
                    color: var(--color--grey-dark);
                }
            }
        }
    }

    .block-list:where(.flex,.flex-inline) li:first-child::before {
        display: none;
    }

    .block-list:where(.flex,.flex-inline) {
        li {
            margin: 0;
        }

        li::before {
            translate: -50% -50%;
            position: absolute;
            top: 50%;
            margin: 0;
            margin-top: -0.1em;
            transform-origin: center;
        }
    }

    .form-info:not(:empty) {
        display: inline-table;
        padding: .25em .5em;
        margin-block-end: 2rem;
        background: var(--color--transparent);
        font-size: var(--font-size--16);
        border: 1px solid var(--color--border);
        border-radius: var(--border-radius--md);

        a,
        button {
            text-decoration: underline;
        }
    }

    .breadcrumbs-wrapper {
        display: inline-flex;

        .breadcrumbs {
            font-size: var(--font-size--12);
            font-family: var(--font-family--sans-geometric);
            letter-spacing: .05em;
            color: var(--color--text-1);
        }

        ul {
            display: flex;
            gap: .2em .5em;
        }

        li > span {
            opacity: .5;
        }

        li:not(:last-child):after {
            content: '';
            margin-left: 1ch;
            width: .5em;
            height: .5em;
            display: inline-block;
            opacity: .5;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 32'%3E%3Cpath d='M2.594 0l16 16.012-16 15.988-2.597-2.597 13.403-13.39-13.403-13.415 2.597-2.597z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
        }
    }

    .scrolling {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        display: flex;
        gap: 1rem;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        cursor: grab;
    }

    .scrolling.dragging {
        cursor: grabbing;
    }

    .scrolling>* {
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    @media screen and (max-width: 767px) {
        #cc-main {
            .cm__body {
                flex-wrap: wrap !important;
            }

            .cm__btns {
                min-width: 100% !important;
            }
        }
    }

}

@layer utilities {

    a:has(h2, h3, h4, h5, h6) {
        text-underline-offset: 0;
    }

    .vh {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    .has-rounded {
        border-radius: 9999px;
    }

    a:not(.btn).has-red-color:where(:hover, :focus-visible) {
        color: var(--color--primary);
    }

    .click-area-expand {
        padding: 1em;
        display: inline-flex;
    }

    .click-area-contract {
        margin-inline: -1em;
        margin-block: -1em;
        padding-inline-start: 0;
    }

    .w100 {
        width: 100%;
    }

    .has-opacity-50 {
        opacity: .5;
    }

    .wsn {
        white-space: nowrap;
    }

    .ns {
        user-select: none;
    }

    .ttu {
        text-transform: uppercase;
    }

    .tl {
        text-align: left;
    }

    .lh1 {
        line-height: var(--line-height--one);
    }

    .align-md {
        max-width: 768px;
    }

    .flex {
        display: flex;
    }

    .flex-2 {
        flex: 2;
        min-width: 19%;
    }

    .flex-inline {
        display: inline-flex;
    }

    .col-6, .col-4 {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    @media (min-width: 500px) {
        .col-6,.col-4 {
            flex-direction: row;
        }

        .col-6>*,.col-4>* {
            flex: 1;
        }
    }

    .row {
        flex-direction: column;
    }

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

    .align-center {
        align-items: center;
    }

    .justify-center {
        justify-content: center;
    }

    .max-100 {
        max-width: 100%;
    }

    .border-top-bottom {
        border: 1px solid var(--color--border);
        border-width: 1px 0 1px 0;
    }

    .gap-0-5 {
        gap: .5rem;
    }

    .gap-1 {
        gap: 1rem;
    }

    .gap-2 {
        gap: 2rem;
    }

    .gap-3 {
        gap: 3rem;
    }

    .gap-mt-0 {
        margin-block-start: 0;
    }

    .block-start-0 {
        margin-block-start: 0
    }

    .block-start-1 {
        margin-block-start: var(--spacing--1);
    }
    .block-end-1 {
        margin-block-end: var(--spacing--1);
    }
    .block-start-2 {
        margin-block-start: var(--spacing--2);
    }

    .block-start-3 {
        margin-block-start: var(--spacing--3);
    }

    .block-start-4 {
        margin-block-start: var(--spacing--4);
    }

    .block-start-5 {
        margin-block-start: var(--spacing--5);
    }

    .block-start-6 {
        margin-block-start: var(--spacing--6);
    }

    .block-start-8 {
        margin-block-start: var(--spacing--8);
    }

    .table {
        display: table;
        width: 100%;
    }

    .table>* {
        display: table-row;
    }

    .table .col {
        display: table-cell;
        padding-inline-end: 1rem;
        padding-block: .75rem;
    }

    .table-first-col-20ch .col:first-child {
        width: 20ch;
    }

    .has-text-align-center {
        text-align: center;
    }

    .has-text-align-left {
        text-align: left
    }

    .has-text-align-right {
        text-align: right
    }

    .aligncenter {
        clear: both
    }

    .items-justified-left {
        justify-content: flex-start
    }

    .items-justified-center {
        justify-content: center
    }

    .items-justified-right {
        justify-content: flex-end
    }

    .items-justified-space-between {
        justify-content: space-between
    }

    .place-center {
        place-self: center;
    }

    .margin-auto {
        margin-inline: auto;
    }

    .block-image:is(.alignleft, .alignright):has(+p) {
        margin-block-end: var(--spacing--block-gap);
    }

    .block-image:is(.aligncenter, .alignleft, .alignright) {
        display: table;

        .aligncenter,
        .alignleft,
        .alignright {
            display: table;
        }
    }

    @media only screen and (min-width : 768px) {
        figure.block-image.alignleft {
            margin-inline-start: calc((100% - var(--style--global--content-size)) / 2);
        }

        figure.block-image.alignright {
            margin-inline-end: calc((100% - var(--style--global--content-size)) / 2) !important;
        }
    }

    .block-buttons {
        >.block-button {
            display: inline-block;
            margin: 0;

            &.aligncenter {
                margin-left: auto;
                margin-right: auto;
                width: 100%;
            }
        }

        &.is-vertical {
            flex-direction: column;

            >.block-button:last-child {
                margin-bottom: 0;
            }

            &.is-content-justification-left {
                align-items: flex-start;
            }

            &.is-content-justification-center {
                align-items: center;
            }

            &.is-content-justification-right {
                align-items: flex-end;
            }
        }

        &.aligncenter {
            text-align: center;
        }

        &:not(:where(.is-content-justification-space-between, .is-content-justification-right, .is-content-justification-left, .is-content-justification-center)) .block-button.aligncenter {
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }
    }

}


@supports (selector(details::details-content)) and (height: calc-size(auto, size)) {
    details::details-content {
        display: block;
        height: 0;
        opacity: 0;
        overflow: hidden;
        transition: height .3s, opacity .5s, content-visibility .3s;
        transition-behavior: allow-discrete;
    }

    details[open]::details-content {
        height: calc-size(auto, size);
        opacity: 1;
    }
}

#context-anchor {
    anchor-name: --context-anchor;
    width: 1px;
    height: 1px;
    z-index: -1;
}

.context-menu {
    position: fixed;
    inset: 0;
    border: none;
    pointer-events: none;
    transition: display .3s allow-discrete, overlay 1s allow-discrete, opacity .2s;

    .context-wrapper {
        position: fixed;
        position-anchor: --context-anchor;
        position-area: bottom right;
        position-try: flip-block, flip-inline, flip-block flip-inline;
        position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
        backdrop-filter: blur(12px);
        background: rgba(255, 255, 255, 0.85);
        border-radius: 12px;
        padding: 0.5rem 0;
        width: fit-content;
        white-space: nowrap;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        transition: transform 0.2s ease, opacity .2s ease;
        transform: scale(0.95);
        opacity: 0.5;
        pointer-events: auto;
    }

    &::backdrop {
        background: transparent;
    }

    &[open] .context-wrapper {
        transform: scale(1);
        opacity: 1;
    }

    &.loading li:last-child:after {
        content: '';
        display: block;
        aspect-ratio: 1/1;
        width: 1em;
        height: 1em;
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-top-color: rgba(0, 0, 0, 0.7);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        justify-self: center;
        z-index: 2147483650;
    }

    a {
        display: block;
        padding: 0.5em 1.6em;
        color: var(--color--primary);
        border-radius: 5px;
        transition: all 0.2s ease;
        text-decoration: none;
        position: relative;

        &.has-children::after {
            content: '›';
            position: absolute;
            right: 1em;
            top: 50%;
            transform: translateY(-50%);
            font-weight: bold;
            opacity: 0.6;
            font-size: 0.9em;
        }
    }

    ul {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
            position: relative;

            &:first-child a {
                padding-top: 0.75em;
            }

            &:last-child a {
                padding-bottom: 0.75em;
            }

            &:has(a:hover, a:focus-visible) {
                background: rgba(255, 255, 255, 0.4);
            }

            a:where(:hover, :focus-visible) {
                color: #000;
                transform: translateX(5px);
                outline: none;

                span {
                    text-decoration: underline;
                    display: inline-block;
                }
            }

            ul {
                position: absolute;
                position-area: right top;
                position-try: flip-block, flip-inline, flip-block flip-inline;
                position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
                backdrop-filter: blur(12px);
                background: rgba(255, 255, 255, 0.85);
                border-radius: 10px;
                padding: 0.4rem 0;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
                min-width: 180px;
                opacity: 0;
                transform: translateX(0) scale(0.95);
                pointer-events: none;
                transition: all 0.2s ease;
                z-index: 2147483649;

                li a {
                    padding: 0.4em 1.4em;
                }
            }

            &:where(:hover, :focus)>ul,
            >a:focus+ul,
            ul:has(a:focus) {
                opacity: 1;
                transform: translateX(5px) scale(1);
                pointer-events: auto;
            }
        }
    }
}

@layer ssplr {

    .column-layout {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        gap: 1rem;
    }

    .column-layout-3 {
        .articles {
            display: grid;
            gap: var(--spacing--1-5);

            @media (min-width: 768px) {
                grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
            }

            article {
                justify-items: center;

                .media {
                    max-width: 100%;
                }
            }
        }

        figure {
            margin-bottom: var(--spacing--1);
        }
    }

    .align928 {
        max-width: 928px;
    }

    .block-group {
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }

    .block-group.has-background + .block-group.has-background {
        margin-block-start: 0;
    }

    .column-layout-2-1 {
        figure {
            margin-bottom: var(--spacing--1);
        }

        @media (min-width: 768px) {

            &:has(> article:nth-child(2)) {
                display: grid;
                justify-items: center;
                grid-template-columns: repeat(3, 1fr);
                gap: 0 var(--spacing--1-5);
            }

            article {
                justify-self: end;
                height: 100%;
            }

            article:nth-child(2) {
                margin-bottom: var(--spacing--3);
            }

            .article-headline {
                grid-column: 2 / 4;
                grid-row: span 3;
                min-height: 24rem;
                max-width: 34rem;
                justify-self: center;
            }
        }

        @media (max-width: 767px) {
            display: grid;
            gap: var(--spacing--block-gap);
        }
    }

    .column-layout-row {
        article {
            display: grid;
            margin-block: var(--spacing--4);
            grid-template-columns: 162px minmax(10rem, 1fr);
            overflow: hidden;

            @media (min-width: 768px) {
                grid-template-columns: 162px minmax(10rem, 1fr) 162px;
            }
        }

        .content {
            max-width: 60ch;
            justify-self: center;
            padding-inline: var(--spacing--1);
            overflow: hidden;
        }

        figure {
            max-width: 162px;
        }
    }

    .articles h3 {
        margin-block-start: 0;
    }

    .articles .content {
        padding-block: 2rem;
    }

    .header-topbar {
        border-bottom: 1px solid var(--color--border);
        padding-block: var(--spacing--0-5);


        & .alignwide {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: var(--header-top-height);
        }
    }

    .logo img {
        height: 3.5rem;
        width: auto;
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 1rem;

        @media (max-width: 640px) {
            display: none;
        }
    }

    .header-search-btn {
        display: flex;
        align-items: center;
        padding: 0.5rem;
        background: none;
        border: none;
        cursor: pointer;
        transition: color var(--motion--transition-md);

        &:hover {
            color: var(--color--primary);
        }

        & svg {
            width: 1.25rem;
            height: 1.25rem;
        }
    }

    .header-social {
        display: flex;
        align-items: center;
        gap: 0.75rem;

        a + & {
            border-left: 1px solid var(--color--border);
            padding-left: 1rem;
        }

        & a {
            display: flex;
            align-items: center;
            color: var(--color--text-2);
            transition: color var(--motion--transition-md);

            &:hover {
                color: var(--color--primary);
            }

            & svg {
                width: 1rem;
                height: 1rem;
                fill: currentColor;
            }
        }
    }

    .header-navbar {
        border-bottom: 1px solid var(--color--border);
        position: relative;

        @media (max-width: 1023px) {
            display: none;
        }

        & > .alignwide {
            display: flex;
            justify-content: center;
        }
    }

    .skip-link {
        position: absolute;
        top: -100%;
        left: var(--spacing--1);
        padding: 0.5rem 1rem;
        background: var(--color--primary);
        color: var(--color--white);
        font-size: var(--font-size--14);
        font-weight: var(--font-weight--medium);
        border-radius: var(--border-radius--md);
        z-index: 9999;
        transition: top var(--motion--transition);

        &:focus {
            top: var(--spacing--1);
        }

    }

    .section {
        padding-block: var(--spacing--4);
    }

    .section--white {
        background: var(--color--white);
    }

    .section--subtle {
        background: var(--color--bg-subtle);
    }

    .section--dark {
        background: var(--color--dark--bg);
        color: var(--color--white);
    }

    .section-header {
        margin-bottom: var(--spacing--3);
    }

    .section-header--centered {
        text-align: center;
    }

    .section-header--centered .section-subtitle {
        margin-inline: auto;
    }

    .section-header--split {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--spacing--1-5);
    }

    @media (max-width: 767px) {
        .section-header--split {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    .section-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 4rem;
        height: 4rem;
        border-radius: var(--border-radius--full);
        background: var(--color--primary-alpha);
        margin-bottom: var(--spacing--1);
    }

    .section-icon svg {
        width: 2rem;
        height: 2rem;
        fill: var(--color--primary);
        stroke-width: 2;
    }

    .section-title {
        font-size: var(--font-size--32);
        margin-block-start: 0;
        display: inline-block;
        width: auto;
    }

    .section-subtitle {
        margin-top: var(--spacing--1);
        font-size: var(--font-size--18);
        color: var(--color--text-3);
        max-width: 44rem;
    }

    .section-footer {
        margin-top: var(--spacing--2);
        text-align: center;
    }

    .section-footer--mobile {
        display: none;
    }

    @media (max-width: 767px) {
        .section-footer--mobile {
            display: block;
        }
    }

    .badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        background: var(--color--primary);
        color: var(--color--white);
        font-size: var(--font-size--14);
        font-weight: var(--font-weight--medium);
        border-radius: var(--border-radius--full);
        line-height: 1.6;
    }

    .link-arrow {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: var(--font-weight--medium);
        transition: color var(--motion--transition);

        svg {
            width: 1.125rem;
            height: 1.125rem;
            flex-shrink: 0;
            position: relative;
            left: 0;
            transition: all .2s ease-in-out;
        }

        &:where(:hover, :focus-visible) {
            color: var(--color--primary-dark);
            svg {
                left: .25em;
            }
        }

        .link-arrow--desktop {
            white-space: nowrap;
        }

        @media (max-width: 767px) {
            .link-arrow--desktop {
                display: none;
            }
        }

    }

    .hero {
        position: relative;
        padding-block: var(--spacing--5);
        background: linear-gradient(to right, var(--color--primary), #4a6bc5);
        color: var(--color--white);
        overflow: hidden;

        .bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: .18;
        }

        .inner {
            position: relative;
            z-index: 1;
        }

        .title {
            font-size: var(--font-size--56);
            font-weight: var(--font-weight--bold);
            line-height: var(--line-height--heading);
            margin-bottom: var(--spacing--1-5);
            color: var(--color--white);
        }

        .lead {
            font-size: var(--font-size--22);
            margin-bottom: var(--spacing--2);
            color: rgb(255 255 255 / .9);
            line-height: var(--line-height--semi);
            max-width: 50rem;
        }

        .actions {
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing--1);
        }
    }

    .news-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing--2);

        @media (max-width: 1023px) {
            & {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 639px) {
            & {
                grid-template-columns: 1fr;
            }
        }
    }

    .card {
        background: var(--color--white);
        border-radius: var(--border-radius--xl);
        overflow: hidden;
        box-shadow: var(--shadow--md);
        display: flex;
        flex-direction: column;
        transition: box-shadow var(--motion--transition-md);
        align-items: baseline;
        &.block-group {
            display: flex;
        }
        &:not(:has(.body)) {
            padding: var(--spacing--1-5);
        }
        &:is(a):hover {
            box-shadow: var(--shadow-xl);
        }
        .placeholder {
            width: 100%;
        }
        &:hover .image img {
            transform: scale(1.04);
        }

        .image .badge {
            position: absolute;
            top: 1rem;
            left: 1rem;
        }

        .body {
            padding: var(--spacing--1-5);
            display: flex;
            flex-direction: column;
            flex: 1;
            gap: 0.75rem;
        }

        .meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: var(--font-size--14);
            color: var(--color--text-3);
            svg {
                width: 1rem;
                height: 1rem;
                flex-shrink: 0;
            }
        }

        .title {
            font-size: var(--font-size--20);
            color: var(--color--text-1);
            line-height: var(--line-height--semi);
            margin-block: 0;

            a {
                transition: color var(--motion--transition);
                color: var(--color--text-1);

                    color: var(--color--primary);
                }
            }
        }

        .excerpt {
            color: var(--color--text-2);
            flex: 1;
        }

        .link-arrow {
            margin-top: auto;
        }

        .card-icon svg.icon {
            width: 1.5rem;
            height: 1.5rem;
        }

    }

    .membership-box {
        background: var(--color--bg-subtle);
        border-radius: var(--border-radius--xl);
        padding: var(--spacing--3);
        margin-bottom: var(--spacing--2);

        @media (max-width: 639px) {
            & {
                padding: var(--spacing--1-5);
            }
        }

    }

    .membership-benefits {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing--1-5) var(--spacing--2);

        .item {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
        }

        .icon {
            flex-shrink: 0;
            margin-top: .15em;
            width: 1.25rem;
            height: 1.25rem;
            background: var(--color--primary);
            border-radius: var(--border-radius--full);
            display: flex;
            align-items: center;
            justify-content: center;

            svg {
                width: .7rem;
                height: .7rem;
                stroke: #fff;
                fill: none;
                stroke-width: 2.5;
            }
        }

        span:last-child {
            color: var(--color--text-2);
            line-height: var(--line-height--body);
        }
        @media (max-width: 639px) {
            & {
                grid-template-columns: 1fr;
            }
        }

    }

    .membership-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing--1);
        justify-content: center;
    }

    .listing-card {
        background: var(--color--white);
        border-radius: var(--border-radius--xl);
        overflow: hidden;
        box-shadow: var(--shadow--md);
        display: flex;
        flex-direction: column;

        .event-list & {
            font-size: .8em;
        }
        .image {
            flex: 1 1 30%;
            overflow: hidden;;
            min-height: 16rem;
        }

        .placeholder {
            width: 100%;
            .placeholder__play {
                position: absolute;
                display: block;
                transform: translate(-50%,-50%);
                top: 50%;
                left: 50%;








                svg {
                    display: block;
                }
            }
        }

        .body {
            flex: 1 1 50%;
            padding: var(--spacing--3);
            display: flex;
            flex-direction: column;
            gap: var(--spacing--1);
            align-items: flex-start;
        }

        .title {
            font-size: 1.5em;
            color: var(--color--text-1);
            line-height: var(--line-height--semi);
            margin-top: var(--spacing--1);
        }

        .meta {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;

            li {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                color: var(--color--text-2);
            }

            svg {
                width: 1.25rem;
                height: 1.25rem;
                flex-shrink: 0;
                stroke: var(--color--primary);
                fill: none;
                stroke-width: 2;
            }
            svg:has(use) {
                fill: var(--color--primary);
                stroke: none
            }
        }
        .excerpt {
            color: var(--color--text-2);
            line-height: var(--line-height--body);
        }

        .no-content {
            text-align: center;
            color: var(--color--text-3);
            padding: var(--spacing--3) 0;
        }

        @media (min-width: 768px) {
            & {
                flex-direction: row;
            }
            .body {
                padding: var(--spacing--2) var(--spacing--3);
            }
            .placeholder {
                max-width: 24rem;
            }
        }

    }

    .quicklinks-grid {
        display: grid;
        grid-template-columns: repeat( auto-fit, minmax( min(24rem, 100%), 1fr ) );
        gap: var(--spacing--0-5);
    }

    .quicklink-card {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing--1);
        padding: var(--spacing--1);
        background: var(--color--white);
        border-radius: var(--border-radius--xl);
        transition: border-color var(--motion--transition), box-shadow var(--motion--transition-md);
        height: 100%;

        &:hover,
        li:where([class^="current-menu-"]) > & {
            background: var(--color--bg-subtle);
        }

        svg {
            min-width: 1rem;
            height: 1rem;
            fill: var(--color--primary);
            margin-block-start: .5rem;
        }

        svg + * > :first-child {
            font-size: var(--font-size--14);
            font-weight: var(--font-weight--medium);
            color: var(--color--primary);
        }

        &:hover * > :first-child {
            color: var(--color--primary);
        }

        * > :last-child {
            font-size: var(--font-size--14);
            color: var(--color--text-3);
        }

        svg path {
            fill: inherit;
        }
    }

    .partners-tier {
        margin-bottom: var(--spacing--3);
        text-align: center;

        .label {
            display: inline-block;
            padding: 0.5rem 1.25rem;
            border-radius: var(--border-radius--full);
            font-weight: var(--font-weight--medium);
            font-size: var(--font-size--14);
            margin-bottom: var(--spacing--2);
        }

        .label--gold {
            background: #fef08a;
            color: var(--color--gold);
        }

        .label--bronze {
            background: #fed7aa;
            color: var(--color--bronze);
        }

        .heading {
            font-size: var(--font-size--24);
            color: var(--color--text-1);
            margin-bottom: var(--spacing--2);
        }

    }


    .partners-tier--member-of {
        padding-top: var(--spacing--3);
        border-top: 1px solid var(--color--border);
    }

    .partners-logos {
        display: grid;
        gap: var(--spacing--1);
        align-items: center;
        justify-items: center;
        margin-inline: auto;
    }

    .partners-logos--4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .partners-logos--3 {
        grid-template-columns: repeat(3, 1fr);
        max-width: 56rem;
    }

    .partners-logos--2 {
        grid-template-columns: repeat(2, 1fr);
        max-width: 36rem;
    }

    @media (max-width: 767px) {
        .partners-logos--4,
        .partners-logos--3 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 479px) {
        .partners-logos--2 {
            grid-template-columns: 1fr;
        }
    }

    .partner-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing--1-5);
        transition: opacity var(--motion--transition);
    }

    .partner-logo:hover {
        opacity: .7;
    }

    .partner-logo img {
        max-height: 4rem;
        width: auto;
        object-fit: contain;
    }

    .partnership-cta {
        background: linear-gradient(to right, var(--color--primary), #4a6bc5);
        border-radius: var(--border-radius--xl);
        padding: var(--spacing--3);
        color: var(--color--white);
        text-align: center;
        @media (max-width: 639px) {
            & {
                padding: var(--spacing--2) var(--spacing--1-5);
            }
        }

        .inner {
            max-width: 44rem;
            margin-inline: auto;
        }

        .icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 4rem;
            height: 4rem;
            border-radius: var(--border-radius--full);
            background: rgb(255 255 255 / .2);
        }

        .icon svg {
            width: 2rem;
            height: 2rem;
            fill: var(--color--white);
            stroke-width: 2;
            background: transparent;
        }

        .title {
            font-size: var(--font-size--32);
            margin-bottom: var(--spacing--1);
            line-height: var(--line-height--semi);
            color: var(--color--white);
        }

        .text {
            font-size: var(--font-size--18);
            color: rgb(255 255 255 / .9);
            margin-bottom: var(--spacing--2);
            line-height: var(--line-height--body);
        }

        .actions {
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing--1);
            justify-content: center;
        }
    }

    .site-footer {
        background: var(--color--text-1);
        color: var(--color--text-2);
        font-size: var(--font-size--14);
    }

    .footer-main {
        padding-block: var(--spacing--4);
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: var(--spacing--2);
    }

    @media (max-width: 1023px) {
        .footer-grid {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }

    @media (max-width: 639px) {
        .footer-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 479px) {
        .footer-grid {
            grid-template-columns: 1fr;
        }
    }

    .footer-brand {
        display: flex;
        flex-direction: column;
        gap: var(--spacing--1-5);
    }

    @media (max-width: 1023px) {
        .footer-brand {
            grid-column: 1 / -1;
        }
    }

    .footer-logo img,
    .footer-logo figure img {
        height: 5rem;
        width: auto;
        filter: brightness(100);
        opacity: .3;
    }

    .footer-tagline {
        opacity: .7;
        line-height: var(--line-height--body);
        max-width: 22rem;
    }

    .footer-contact {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        font-style: normal;

        .block-separator {
            border-color: var(--color--border-dark);
        }
    }

    .footer-contact-row {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        opacity: .7;
        line-height: var(--line-height--body);
    }

    .footer-contact-row svg {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        margin-top: .25em;
        fill: #9fcbed;
    }

    .footer-contact-row a {
        color: var(--color--white);
    }

    .footer-nav-col {
        display: flex;
        flex-direction: column;
        gap: var(--spacing--1);
    }

    .footer-heading {
        font-size: var(--font-size--16);
        font-weight: var(--font-weight--bold);
        color: var(--color--white);
        &::after {
            display: none;
        }
    }

    .footer-nav-list {
        display: flex;
        flex-direction: column;
    }

    .footer-nav-list .click-area-expand {
        padding: .25em 0;
    }

    .site-footer a {
        color: var(--color--text-2);
    }

    .site-footer a:hover {
        color: #9fcbed;
    }

    .footer-nav-list a {
        opacity: .65;
        transition: color var(--motion--transition), opacity var(--motion--transition);
    }

    .footer-bottom {
        border-top: 1px solid var(--color--border-dark);
        padding-block: var(--spacing--1-5);
    }

    .footer-bottom-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--spacing--1);
    }

    @media (max-width: 767px) {
        .footer-bottom-inner {
            flex-direction: column;
            text-align: center;
        }
    }

    .footer-copyright {
        opacity: .55;
    }

    .footer-bottom-social {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .footer-bottom-social a {
        display: flex;
        align-items: center;
        opacity: .55;
        transition: color var(--motion--transition), opacity var(--motion--transition);
    }

    .footer-bottom-social a:hover {
        color: var(--color--white);
        opacity: 1;
    }

    .footer-bottom-social svg {
        width: 1.125rem;
        height: 1.125rem;
    }

    .footer-legal-nav {
        display: flex;
        align-items: center;
        gap: var(--spacing--1);
    }

    .footer-legal-nav a {
        opacity: .55;
        transition: color var(--motion--transition), opacity var(--motion--transition);
    }

    .footer-legal-nav a:hover {
        color: var(--color--white);
        opacity: 1;
    }

    .map {
        height: 320px;
        border-radius: var(--border-radius--base);
        overflow: hidden;
        border: 1px solid var(--color--border);
        z-index: 1;
    }

    .event-separator {
        font-size: var(--font-size--18);
        font-weight: var(--font-weight--bold);
        border-bottom: 1px solid #e5e7eb;
        margin-block: 8rem 2rem;
        color: var(--text-decoration--color);

        :where(form,.filter-active) + & {
            margin-block-start: 2rem;
        }
    }

    .filters {

        display: flex;
        flex-wrap: wrap;
        gap: 12px 16px;
        align-items: flex-end;
        margin-bottom: 24px;
        padding: 16px 20px;
        background: #f8f8f8;
        border-radius: 8px;
        border: 1px solid var(--color--border);

        .group {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 180px;
            max-width: 22%;
        }

        .group--reset {
            min-width: auto;
            justify-content: flex-end;
            padding-bottom: 2px;
        }

        label {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: #666;
            white-space: nowrap;
        }

        select {
            width: 100%;
            padding: 7px 30px 7px 10px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 6px;
            background-color: #fff;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            -webkit-appearance: none;
            appearance: none;
            cursor: pointer;
            transition: border-color .15s;
        }

        select:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0,123,255,.15);
        }

        select:hover {
            border-color: #999;
        }

        .select:not([value=""]) {
            border-color: var(--color--primary);
            font-weight: 500;
        }

        .reset {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 6px 12px;
            font-size: 13px;
            color: #c00;
            border: 1px solid #c00;
            border-radius: 6px;
            text-decoration: none;
            white-space: nowrap;
            transition: background .15s, color .15s;
            line-height: 1.4;
        }

        .reset:hover {
            background: #c00;
            color: #fff;
        }

        .submit {
            padding: 7px 16px;
            font-size: 14px;
            border-radius: 6px;
            border: 1px solid #0057b7;
            background: #0057b7;
            color: #fff;
            cursor: pointer;
        }
    }

    .article-headline {
        position: relative;
        padding: 1rem 0;
        border-bottom: 1px solid var(--color--border);
        font-size: var(--font-size--12);
        font-weight: var(--font-weight--medium);
        margin-block-end: var(--spacing--2);
        color: var(--color--text-3);

        h1 {
            font-size: var(--font-size--38);
            text-align: left;
            margin-block: var(--spacing--1) 1lh;
        }

        .bg-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
            max-width: none;
        }
    }

    .filter-active {

        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        margin-bottom: 16px;
        font-size: 13px;
        color: #555;

        .label {
            font-weight: 600;
        }

        .pill {
            display: inline-block;
            padding: 2px 10px;
            background: #e8f0fb;
            border-radius: 100px;
            font-size: 12px;
            font-weight: 500;
        }
    }

    .event-status-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin: 4px 0 6px;
    }

    .event-badge {
        display: inline-block;
        padding: 2px 8px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 4px;
        background: #fff3cd;
        color: #664d03;
        border: 1px solid #ffda6a;
        line-height: 1.5;
    }

    .event-badge--postponed {
        background: #fff3cd;
        color: #664d03;
        border-color: #ffda6a;
    }

    .event-badge--rescheduled {
        background: #cff4fc;
        color: #055160;
        border-color: #9eeaf9;
    }

    .event-badge--cancelled {
        background: #f8d7da;
        color: #842029;
        border-color: #f1aeb5;
    }

    .event-badge--moved-online {
        background: #d1ecf1;
        color: #0c5460;
        border-color: #bee5eb;
    }

    .event-badge--full {
        background: #e2e3e5;
        color: #41464b;
        border-color: #c4c8cb;
    }

    .event-badge--reg-closed {
        background: #e2e3e5;
        color: #41464b;
        border-color: #c4c8cb;
    }

    .event-item__attendance {
        font-size: 13px;
        color: #555;
        margin-top: 4px;
    }

    .event-item__fee {
        font-size: 13px;
        color: #555;
        margin-top: 4px;
    }

    .event-item__fee .icon {
        width: 14px;
        height: 14px;
        margin-right: 4px;
        vertical-align: middle;
    }

    .event-item__subtopics {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin: 4px 0 2px;
    }

    .event-subtopic-tag {
        display: inline-block;
        padding: 1px 7px;
        font-size: 11px;
        font-weight: 500;
        border-radius: 100px;
        background: #f0f0f0;
        color: #444;
        border: 1px solid #ddd;
    }

    .event-no-results {
        padding: 40px 20px;
        text-align: center;
        color: #666;
    }

    .event-no-results p {
        font-size: 16px;
        margin-bottom: 12px;
    }

    @media (max-width: 768px) {
        .event-filters {
            flex-direction: column;
            gap: 10px;
        }

        .event-filter-group {
            min-width: 100%;
        }

        .event-filter-group--reset {
            align-items: flex-start;
        }
    }

    .single-event {

        .layout {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;

            @media (min-width: 768px) {
                grid-template-columns: 1fr 340px;
                align-items: start;
            }
        }

        .color-bar {
            height: 5px;
            border-radius: var(--border-radius--base) var(--border-radius--base) 0 0;
        }

        .sidebar {
            border: 1px solid var(--color--border);
            border-radius: var(--border-radius--base);
            overflow: hidden;
            position: sticky;
            top: 5rem;

            .sidebar-header {
                background: #f9fafb;
                border-bottom: 1px solid var(--color--border);
                padding: 1rem 1.25rem;
                font-weight: 700;
                font-size: .85rem;
                text-transform: uppercase;
                letter-spacing: .06em;
                color: var(--color--grey);
            }
        }

        .map {
            margin-top: 1.5rem;
        }
    }

    .ev-meta {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
            display: flex;
            gap: .75rem;
            align-items: flex-start;
            padding: .75rem 1.25rem;
            border-bottom: 1px solid var(--color--border);
            font-size: .9rem;
            line-height: 1.5;

            &:last-child {
                border-bottom: none;
            }
        }

        .ev-meta__icon {
            flex-shrink: 0;
            width: 1.1rem;
            height: 1.1rem;
            margin-top: .15em;
            color: var(--color--primary);
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .ev-meta__label {
            font-size: .7rem;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: var(--color--grey);
            display: block;
            margin-bottom: .15rem;
        }
    }

    .badge-row {
        display: flex;
        flex-wrap: wrap;
        gap: .375rem;
        margin-bottom: 1rem;
    }

    .badge {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .25rem .75rem;
        border-radius: 999px;
        font-size: .75rem;
        font-weight: 600;
        line-height: 1.4;
    }

    .badge--cat { background: rgba(0,87,183,.08); color: var(--color--primary); }
    .badge--status-postponed   { background: #fff3cd; color: #664d03; }
    .badge--status-rescheduled { background: #cff4fc; color: #055160; }
    .badge--status-cancelled   { background: #f8d7da; color: #842029; }
    .badge--status-moved-online{ background: #d1ecf1; color: #0c5460; }
    .badge--past               { background: #f3f4f6; color: var(--color--grey); }
    .badge--fee      { background: #f0fdf4; color: #166534; }
    .badge--fee-paid { background: #fefce8; color: #713f12; }

    .ev-cal-links {
        display: flex;
        flex-direction: column;
        gap: .35rem;
        padding: .75rem 1.25rem;

        a {
            font-size: .8rem;
            color: var(--color--primary);
            display: flex;
            align-items: center;
            gap: .4rem;
            text-decoration: none;
        }
    }

    .ev-cal-links a:hover {
        text-decoration: underline;
    }

    .ev-partners {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        align-items: center;
        margin-top: .75rem;

        a {
            opacity: .8;
            transition: opacity .2s;
        }

        img {
            max-height: 3rem;
            width: auto;
            display: block;
        }
    }

    .ev-partners a:hover {
        opacity: 1;
    }

    .ev-online-box {
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: var(--border-radius--base);
        padding: .875rem 1.125rem;
        margin-bottom: 1.5rem;
        font-size: .9rem;

        strong {
            display: block;
            margin-bottom: .25rem;
            color: #1e40af;
        }
    }

    .ev-tags {
        display: flex;
        flex-wrap: wrap;
        gap: .375rem;
        margin-top: .5rem;

        a {
            font-size: .78rem;
            padding: .2rem .65rem;
            border-radius: 4px;
            border: 1px solid var(--color--border);
            color: var(--color--grey);
            text-decoration: none;
            transition: border-color .15s, color .15s;
        }

        a:hover {
            border-color: var(--color--primary);
            color: var(--color--primary);
        }
    }

    @media screen and (max-width: 767px) {
        #cc-main {
            .cm__body {
                flex-wrap: wrap !important;
            }

            .cm__btns {
                min-width: 100% !important;
            }
        }
    }

    .block-gallery {
        display: grid;
        grid-template-columns: repeat( auto-fit, minmax( min(12rem, 100%), 1fr ) );
        gap: var(--spacing--1-5);
        max-width: 100%;

        @media (min-width: 32rem) {
            grid-template-columns: repeat(4, minmax(8rem, 25%));
        }

        a {
            position: relative;

            & picture::before {
                content: '';
                position: absolute;
                inset: 0;
                background-color: var(--color--primary);
                opacity: .25;
                transition: .3s all;
                z-index: 1;
            }

            &:where(:hover,:focus-visible) picture::before {
                opacity: 0;
            }
        }

        .event-partners-item picture::before {
            display: none;
        }

        .gallery-more {
            font-family: var(--font-family--sans-geometric);
            font-size: var(--font-size--38);
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color--white);
            z-index: 2;
        }
    }

    .hp-slider {
        background: linear-gradient(160deg, #f0f7fc 0%, #f8fafc 60%, #fff 100%);
        padding-block: var(--spacing--3);
        position: relative;
        overflow: hidden;
    }

    .slider {
        overflow: visible;
    }

    .slider :where(.slider-button-prev,.slider-button-next) {
        backdrop-filter: blur(5px);
        width: var(--spacing--2);
        height: var(--spacing--2);
        border-radius: var(--border-radius--full);
        aspect-ratio: 1/1;
        background-color: color-mix(in oklab, var(--color--white) 20%, transparent);
        padding: var(--spacing--0-5);
        &:hover {
            background-color: color-mix(in oklab, var(--color--white) 40%, transparent);
        }
    }

    .slide-item {
        display: flex;
        flex-direction: column;
        background: var(--color--white);
        height: auto;
        width: 100%;
        position: relative;
        overflow: hidden;
        border-radius: var(--border-radius--xl);
        box-shadow: var(--shadow--xl);
        margin-bottom: 2rem;
    }

    @media (min-width: 768px) {
        .slide-item {
            flex-direction: row;
            height: 460px;
        }
    }

    .slide-item .graphics {
        width: 100%;
        background-size: cover;
        background-position: center;
        height: 260px;
    }

    @media (min-width: 768px) {
        .slide-item .graphics {
            width: 66.666%;
            height: 100%;
        }
    }

    .slide-item .text-info {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        padding: 2rem;
        background: linear-gradient(135deg, var(--color--primary), var(--color--primary-dark));
        color: var(--color--white);
    }

    @media (min-width: 768px) {
        .slide-item .text-info {
            width: 33.333%;
            padding: 3rem;
        }
    }

    .slide-item .text-info .badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        background: rgb(159 203 237 / 1);
        color: var(--color--primary);
        font-size: var(--font-size--12);
        font-weight: var(--font-weight--bold);
        border-radius: var(--border-radius--full);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: var(--spacing--1);
        width: max-content;
    }

    .slide-item .text-info h2 {
        font-size: var(--font-size--32);
        color: var(--color--white);
        margin-block: 0 var(--spacing--1);
        line-height: var(--line-height--semi);
    }

    .slide-item .text-info .meta {
        font-size: var(--font-size--14);
        color: rgb(255 255 255 / 0.8);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: var(--spacing--1-5);
    }

    .slide-item .text-info .meta-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .slide-item .text-info .meta-row svg {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
    }

    .slide-item .text-info .btn {
        width: max-content;
    }

    .custom-slider-dots {
        position: absolute;
        right: 0;
        bottom: 1rem;
        left: 0;
        z-index: 20;
        display: flex;
        justify-content: center;
        gap: 0.5rem;
    }

    .custom-slider-dot {
        height: 0.625rem;
        width: 0.625rem;
        cursor: pointer;
        border-radius: var(--border-radius--full);
        background: rgb(255 255 255 / 0.5);
        transition: all 300ms;
        border: none;
        padding: 0;
    }

    .custom-slider-dot.active {
        background: var(--color--white);
        width: 1.5rem;
    }

    .grid {
        display: grid;
        gap: var(--spacing--2);
        grid-template-columns: 1fr;
    }

    @media (min-width: 1024px) {
        .grid {
            grid-template-columns: 1fr 1fr;
            align-items: stretch;
        }
        .grid-2-1 {
            grid-template-columns: 2fr 1fr;
        }
        .grid-sepa {
            position: relative;
        }
        .grid-sepa::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: calc( 50% - 1rem );
            width: 1px;
            height: 100%;
            background: var(--color--border);
        }
    }

    .card-blue {
        background: linear-gradient(135deg, var(--color--primary), var(--color--primary-dark));
        border-radius: var(--border-radius--xl);
        padding: var(--spacing--2);
        color: var(--color--white);
        box-shadow: var(--shadow--md);
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        min-height: 400px;
        text-decoration: none;
        transition: box-shadow var(--motion--transition-md), transform var(--motion--transition-md);
    }

    .card-blue:hover {
        box-shadow: var(--shadow--xl);
        transform: translateY(-2px);
    }

    .card-blue .card-icon {
        position: absolute;
        top: 0;
        right: 0;
        padding: 1rem;
        opacity: 0.1;
        transform: translate(1rem, -1rem);
    }

    .card-blue .card-title {
        font-size: var(--font-size--22);
        font-weight: var(--font-weight--bold);
        color: var(--color--white);
        margin-bottom: var(--spacing--1);
    }

    .card-blue p {
        color: rgb(255 255 255 / 0.75);
        font-size: var(--font-size--14);
        flex-grow: 1;
    }

    .card-blue .btn {
        align-self: flex-start;
        margin-top: auto;
    }

    .card-blue .event-list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing--1);
        flex-grow: 1;
        margin-block: var(--spacing--1);
    }

    .card-blue .event-item {
        background: rgb(255 255 255 / 0.12);
        border-radius: var(--border-radius--base);
        padding: var(--spacing--1);
        font-size: var(--font-size--14);
        border-left: 3px solid rgb(159 203 237 / 0.6);
    }

    .card-blue .event-item .event-date {
        font-size: var(--font-size--12);
        color: rgb(159 203 237 / 1);
        margin-bottom: 0.25rem;
    }

    .card-blue .event-item .event-name {
        font-weight: var(--font-weight--medium);
        color: var(--color--white);
    }

    .card-blue-background {
        background: linear-gradient(to right, var(--color--primary), #0488e6);
        border-radius: 1.5rem;
        overflow: hidden;
        padding: var(--spacing--3) var(--spacing--3);
        color: var(--color--white);
        position: relative;
    }

    @media (min-width: 768px) {
        .card-blue-background {
            padding: var(--spacing--4);
        }
    }

    .card-blue-background::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0px);
        background-size: 32px 32px;
        opacity: 0.10;
        pointer-events: none;
    }

    .card-blue-background .inner {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: var(--spacing--1-5);
    }

    @media (min-width: 768px) {
        .card-blue-background .inner {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }
    }

    .card-blue-background .cta-content {
        max-width: 38rem;
    }

    .card-blue-background .cta-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3.5rem;
        height: 3.5rem;
        border-radius: var(--border-radius--full);
        background: rgb(255 255 255 / 0.2);
        margin-bottom: var(--spacing--1);
    }

    .card-blue-background .cta-icon svg {
        width: 1.75rem;
        height: 1.75rem;
        stroke: var(--color--white);
        fill: none;
        stroke-width: 2;
    }

    .card-blue-background h2 {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        color: var(--color--white);
        margin-block: 0 var(--spacing--1);
    }

    .card-blue-background p {
        color: rgb(255 255 255 / 0.85);
        font-size: var(--font-size--18);
        line-height: var(--line-height--body);
        margin-bottom: var(--spacing--1-5);
    }

    .card-blue-background .benefits-list {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem var(--spacing--2);
        margin-bottom: var(--spacing--1-5);
    }

    @media (max-width: 639px) {
        .card-blue-background .benefits-list {
            grid-template-columns: 1fr;
        }
    }

    .card-blue-background .benefits-list li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: var(--font-size--14);
        color: rgb(255 255 255 / 0.9);
    }

    .card-blue-background .benefits-list li::before {
        content: "";
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
        background: rgb(255 255 255 / 0.2);
        border-radius: var(--border-radius--full);
        display: flex;
        align-items: center;
        justify-content: center;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 70%;
        background-color: rgb(255 255 255 / 0.3);
    }

    .card-blue-background .cta-actions {
        display: flex;
        flex-direction: column;
        gap: var(--spacing--1);
        flex-shrink: 0;
    }

    @media (min-width: 768px) {
        .card-blue-background .cta-actions {
            align-items: center;
        }
    }
    .card-light-blue {
        background: #eff6ff;
        padding: 1.75rem;
        border-radius: 0.75rem;
        border: 1px solid #bfdbfe;
        margin-top: var(--spacing--1);

        h3 {
            margin-bottom: 0.75rem;
            font-size: var(--font-size--18);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0;

            span {
                width: 1.75rem;
                height: 1.75rem;
                border-radius: 9999px;
                background: var(--color--primary);
                color: #fff;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }
        }
    }
    .newsletter-grid {
        display: grid;
        gap: var(--spacing--2);
        grid-template-columns: repeat(3, 1fr);
    }

    @media (max-width: 1023px) {
        .newsletter-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 639px) {
        .newsletter-grid {
            grid-template-columns: 1fr;
        }
    }

    .cm__title:after {
        display: none;
    }

}