@layer base, layouts, views, utilities;

@layer base {
    :root {
        --opacity-50: 0.5;
        --opacity-60: 0.6;
        --radius-sm: 0.25rem;
        --radius-md: 0.5rem;
        --color-white: hsl(0, 0%, 100%);
        --color-black: hsl(0, 0%, 0%);
        --color-light-gray: #F0F0F0;
        --color-dark-gray: #2F2D2D;
        --color-vellox-blue: #0389F7;
        --color-error: #ee5555;
        --focus-ring-width: 0.125rem;
        --focus-ring-offset: 0.125rem;
        --focus-ring-style: solid;
        --font-sans: Neue Haas Grotesk, helvetica neue, system-ui, sans-serif;
        --text-2xs: 0.75rem;
        --text-xs: 0.875rem;
        --text-xs-sm: clamp(0.875rem, calc(0.8214285714rem + 0.1785714286vmin), 1rem);
        --text-sm: 1rem;
        --text-sm-md: clamp(1rem, calc(0.8928571429rem + 0.3571428571vmin), 1.25rem);
        --text-sm-lg: clamp(1rem, calc(0.7857142857rem + 0.7142857143vmin), 1.5rem);
        --text-md: 1.25rem;
        --text-md-lg: clamp(1.25rem, calc(1.1428571429rem + 0.3571428571vmin), 1.5rem);
        --text-lg: 1.5rem;
        --text-lg-xl: clamp(1.5rem, calc(1.2857142857rem + 0.7142857143vmin), 2rem);
        --text-xl: 2rem;
        --text-xl-2xl: clamp(2rem, calc(1.5714285714rem + 1.4285714286vmin), 3rem);
        --text-2xl-4xl: clamp(3rem, calc(2.1428571429rem + 2.8571428571vmin), 5rem);
        --font-regular: 400;
        --tracking-sm: -0.025em;
        --tracking-lg: 0.025em;
        --leading-xs: 1.1;
        --leading-sm: 1.3;
        --leading-md: 1.4;
        --space-2xs: 0.5rem;
        --space-2xs-sm: clamp(0.5rem, calc(0.0714285714rem + 1.4285714286vmin), 1.5rem);
        --space-xs: 1rem;
        --space-xs-sm: clamp(1rem, calc(0.7857142857rem + 0.7142857143vmin), 1.5rem);
        --space-xs-md: clamp(1rem, calc(0.5714285714rem + 1.4285714286vmin), 2rem);
        --space-xs-lg: clamp(1rem, calc(0.1428571429rem + 2.8571428571vmin), 3rem);
        --space-sm: 1.5rem;
        --space-sm-md: clamp(1.5rem, calc(1.2857142857rem + 0.7142857143vmin), 2rem);
        --space-sm-lg: clamp(1.5rem, calc(0.8571428571rem + 2.1428571429vmin), 3rem);
        --space-md: 2rem;
        --space-md-lg: clamp(2rem, calc(1.5714285714rem + 1.4285714286vmin), 3rem);
        --space-md-xl: clamp(2rem, calc(1.1428571429rem + 2.8571428571vmin), 4rem);
        --space-lg: 3rem;
        --space-lg-2xl: clamp(3rem, calc(1.7142857143rem + 4.2857142857vmin), 6rem);
        --space-lg-4xl: clamp(3rem, calc(-0.8571428571rem + 12.8571428571vmin), 12rem);
        --space-xl: 4rem;
        --space-xl-2xl: clamp(4rem, calc(3.1428571429rem + 2.8571428571vmin), 6rem);
        --space-2xl: 6rem;
        --space-3xl: 8rem;
        --space-4xl: 12rem;
        --space-3xs: 0.25rem
    }

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

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

    body {
        min-height: 100dvh;
        font-family: var(--font-sans);
        line-height: var(--leading-md);
        text-rendering: optimizeSpeed
    }

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

    a {
        color: currentcolor;
        text-decoration: none;
        text-decoration-skip-ink: auto
    }

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

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

    ol:not([role=list]),
    ul:not([role=list]) {
        padding-inline-start: 1.25rem
    }

    img,
    picture,
    canvas,
    video {
        max-width: 100%;
        height: auto
    }

    iframe {
        border: 0
    }

    table {
        border-collapse: collapse;
        caption-side: bottom
    }

    thead,
    tbody,
    tfoot,
    th,
    tr,
    td {
        border-color: inherit;
        border-style: solid;
        border-width: 0
    }

    th {
        text-align: inherit;
        text-align: -webkit-match-parent
    }

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

    fieldset {
        border: none
    }

    dialog {
        border: 0;
        max-width: none;
        max-height: none
    }

    @media(prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto !important
        }

        *,
        *::before,
        *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
            scroll-behavior: auto !important
        }
    }
}

@layer layouts {}

@layer layouts {
    .l-cluster {
        --cluster-flow: row;
        --cluster-wrap: wrap;
        --cluster-gap: var(--space-sm);
        --cluster-items: center;
        --cluster-content: normal;
        display: flex;
        flex-direction: var(--cluster-flow);
        flex-wrap: var(--cluster-wrap);
        gap: var(--cluster-gap);
        place-items: var(--cluster-items);
        place-content: var(--cluster-content)
    }

    @media(min-width: 20em) {
        .l-cluster {
            --sm-cluster-flow: var(--cluster-flow);
            --sm-cluster-wrap: var(--cluster-wrap);
            --sm-cluster-gap: var(--cluster-gap);
            --sm-cluster-items: var(--cluster-items);
            --sm-cluster-content: var(--cluster-content);
            flex-direction: var(--sm-cluster-flow);
            flex-wrap: var(--sm-cluster-wrap);
            gap: var(--sm-cluster-gap);
            place-items: var(--sm-cluster-items);
            place-content: var(--sm-cluster-content)
        }
    }

    @media(min-width: 50em) {
        .l-cluster {
            --md-cluster-flow: var(--sm-cluster-flow);
            --md-cluster-wrap: var(--sm-cluster-wrap);
            --md-cluster-gap: var(--sm-cluster-gap);
            --md-cluster-items: var(--sm-cluster-items);
            --md-cluster-content: var(--sm-cluster-content);
            flex-direction: var(--md-cluster-flow);
            flex-wrap: var(--md-cluster-wrap);
            gap: var(--md-cluster-gap);
            place-items: var(--md-cluster-items);
            place-content: var(--md-cluster-content)
        }
    }

    @media(min-width: 80em) {
        .l-cluster {
            --lg-cluster-flow: var(--md-cluster-flow);
            --lg-cluster-wrap: var(--md-cluster-wrap);
            --lg-cluster-gap: var(--md-cluster-gap);
            --lg-cluster-items: var(--md-cluster-items);
            --lg-cluster-content: var(--md-cluster-content);
            flex-direction: var(--lg-cluster-flow);
            flex-wrap: var(--lg-cluster-wrap);
            gap: var(--lg-cluster-gap);
            place-items: var(--lg-cluster-items);
            place-content: var(--lg-cluster-content)
        }
    }
}

@layer layouts {
    .l-frame {
        --frame-focus: 50% 50%;
        --frame-fit: cover;
        --frame-ratio: 1/1;
        position: relative;
        width: 100%;
        aspect-ratio: var(--frame-ratio);
        overflow: hidden
    }

    .l-frame>* {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: var(--frame-fit);
        object-position: var(--frame-focus)
    }

    @media(min-width: 20em) {
        .l-frame {
            --sm-frame-focus: var(--frame-focus);
            --sm-frame-fit: var(--frame-fit);
            --sm-frame-ratio: var(--frame-ratio);
            aspect-ratio: var(--sm-frame-ratio)
        }

        .l-frame>* {
            object-fit: var(--sm-frame-fit);
            object-position: var(--sm-frame-focus)
        }
    }

    @media(min-width: 50em) {
        .l-frame {
            --md-frame-focus: var(--sm-frame-focus);
            --md-frame-fit: var(--sm-frame-fit);
            --md-frame-ratio: var(--sm-frame-ratio);
            aspect-ratio: var(--md-frame-ratio)
        }

        .l-frame>* {
            object-fit: var(--md-frame-fit);
            object-position: var(--md-frame-focus)
        }
    }

    @media(min-width: 80em) {
        .l-frame {
            --lg-frame-focus: var(--md-frame-focus);
            --lg-frame-fit: var(--md-frame-fit);
            --lg-frame-ratio: var(--md-frame-ratio);
            aspect-ratio: var(--lg-frame-ratio)
        }

        .l-frame>* {
            object-fit: var(--lg-frame-fit);
            object-position: var(--lg-frame-focus)
        }
    }
}

@layer layouts {
    .l-grid {
        --grid-columns: 1;
        --grid-column-size: 1fr;
        --grid-auto-columns: auto;
        --grid-flow: row;
        --grid-gap: 0;
        --grid-items: normal;
        --grid-content: normal;
        display: grid;
        grid-template-columns: repeat(var(--grid-columns), var(--grid-column-size));
        grid-auto-columns: var(--grid-auto-columns);
        grid-auto-flow: var(--grid-flow);
        gap: var(--grid-gap);
        place-items: var(--grid-items);
        place-content: var(--grid-content)
    }

    .l-grid>* {
        --grid-column: auto;
        --grid-row: auto;
        --grid-self: auto;
        grid-column: var(--grid-column);
        grid-row: var(--grid-row);
        place-self: var(--grid-self);
        max-width: 100%;
        min-width: 0;
        min-height: 0
    }

    @media(min-width: 20em) {
        .l-grid {
            --sm-grid-columns: var(--grid-columns);
            --sm-grid-column-size: var(--grid-column-size);
            --sm-grid-auto-columns: var(--grid-auto-columns);
            --sm-grid-flow: var(--grid-flow);
            --sm-grid-gap: var(--grid-gap);
            --sm-grid-items: var(--grid-items);
            --sm-grid-content: var(--grid-content);
            grid-template-columns: repeat(var(--sm-grid-columns), var(--sm-grid-column-size));
            grid-auto-columns: var(--sm-grid-auto-columns);
            grid-auto-flow: var(--sm-grid-flow);
            gap: var(--sm-grid-gap);
            place-items: var(--sm-grid-items);
            place-content: var(--sm-grid-content)
        }

        .l-grid>* {
            --sm-grid-column: var(--grid-column);
            --sm-grid-row: var(--grid-row);
            --sm-grid-self: var(--grid-self);
            grid-column: var(--sm-grid-column);
            grid-row: var(--sm-grid-row);
            place-self: var(--sm-grid-self)
        }
    }

    @media(min-width: 50em) {
        .l-grid {
            --md-grid-columns: var(--sm-grid-columns);
            --md-grid-column-size: var(--sm-grid-column-size);
            --md-grid-auto-columns: var(--sm-grid-auto-columns);
            --md-grid-flow: var(--sm-grid-flow);
            --md-grid-gap: var(--sm-grid-gap);
            --md-grid-items: var(--sm-grid-items);
            --md-grid-content: var(--sm-grid-content);
            grid-template-columns: repeat(var(--md-grid-columns), var(--md-grid-column-size));
            grid-auto-columns: var(--md-grid-auto-columns);
            grid-auto-flow: var(--md-grid-flow);
            gap: var(--md-grid-gap);
            place-items: var(--md-grid-items);
            place-content: var(--md-grid-content)
        }

        .l-grid>* {
            --md-grid-column: var(--sm-grid-column);
            --md-grid-row: var(--sm-grid-row);
            --md-grid-self: var(--sm-grid-self);
            grid-column: var(--md-grid-column);
            grid-row: var(--md-grid-row);
            place-self: var(--md-grid-self)
        }
    }

    @media(min-width: 80em) {
        .l-grid {
            --lg-grid-columns: var(--md-grid-columns);
            --lg-grid-column-size: var(--md-grid-column-size);
            --lg-grid-auto-columns: var(--md-grid-auto-columns);
            --lg-grid-flow: var(--md-grid-flow);
            --lg-grid-gap: var(--md-grid-gap);
            --lg-grid-items: var(--md-grid-items);
            --lg-grid-content: var(--md-grid-content);
            grid-template-columns: repeat(var(--lg-grid-columns), var(--lg-grid-column-size));
            grid-auto-columns: var(--lg-grid-auto-columns);
            grid-auto-flow: var(--lg-grid-flow);
            gap: var(--lg-grid-gap);
            place-items: var(--lg-grid-items);
            place-content: var(--lg-grid-content)
        }

        .l-grid>* {
            --lg-grid-column: var(--md-grid-column);
            --lg-grid-row: var(--md-grid-row);
            --lg-grid-self: var(--md-grid-self);
            grid-column: var(--lg-grid-column);
            grid-row: var(--lg-grid-row);
            place-self: var(--lg-grid-self)
        }
    }
}

@layer layouts {
    .l-repel {
        --repel-flow: row;
        --repel-wrap: wrap;
        --repel-gap: var(--space-sm);
        --repel-items: center;
        --repel-content: space-between;
        display: flex;
        flex-direction: var(--repel-flow);
        flex-wrap: var(--repel-wrap);
        gap: var(--repel-gap);
        place-items: var(--repel-items);
        place-content: var(--repel-content)
    }

    @media(min-width: 20em) {
        .l-repel {
            --sm-repel-flow: var(--repel-flow);
            --sm-repel-wrap: var(--repel-wrap);
            --sm-repel-gap: var(--repel-gap);
            --sm-repel-items: var(--repel-items);
            --sm-repel-content: var(--repel-content);
            flex-direction: var(--sm-repel-flow);
            flex-wrap: var(--sm-repel-wrap);
            gap: var(--sm-repel-gap);
            place-items: var(--sm-repel-items);
            place-content: var(--sm-repel-content)
        }
    }

    @media(min-width: 50em) {
        .l-repel {
            --md-repel-flow: var(--sm-repel-flow);
            --md-repel-wrap: var(--sm-repel-wrap);
            --md-repel-gap: var(--sm-repel-gap);
            --md-repel-items: var(--sm-repel-items);
            --md-repel-content: var(--sm-repel-content);
            flex-direction: var(--md-repel-flow);
            flex-wrap: var(--md-repel-wrap);
            gap: var(--md-repel-gap);
            place-items: var(--md-repel-items);
            place-content: var(--md-repel-content)
        }
    }

    @media(min-width: 80em) {
        .l-repel {
            --lg-repel-flow: var(--md-repel-flow);
            --lg-repel-wrap: var(--md-repel-wrap);
            --lg-repel-gap: var(--md-repel-gap);
            --lg-repel-items: var(--md-repel-items);
            --lg-repel-content: var(--md-repel-content);
            flex-direction: var(--lg-repel-flow);
            flex-wrap: var(--lg-repel-wrap);
            gap: var(--lg-repel-gap);
            place-items: var(--lg-repel-items);
            place-content: var(--lg-repel-content)
        }
    }
}

@layer layouts {
    .l-stack-space {
        --stack-space: 1em
    }

    .l-stack-space>*+* {
        margin-block-start: var(--stack-space)
    }
}

@layer layouts {
    .l-switch {
        --switch-breakpoint: 0;
        --switch-gap: 0;
        --switch-items: normal;
        --switch-content: normal;
        display: flex;
        flex-wrap: wrap;
        gap: var(--switch-gap);
        place-items: var(--switch-items);
        place-content: var(--switch-content)
    }

    .l-switch>* {
        --switch-grow: 1;
        --switch-self: auto;
        flex-basis: max((var(--switch-breakpoint) - 100%)*999, 0px);
        flex-grow: calc(var(--switch-grow));
        place-self: var(--switch-self)
    }
}

@layer layouts {
    .l-wrap {
        --wrap-width: 100%;
        --wrap-max-width: 1920px;
        --wrap-margin-inline: auto;
        --wrap-padding-inline: var(--base-margin);
        width: var(--wrap-width);
        max-width: var(--wrap-max-width);
        margin-inline: var(--wrap-margin-inline);
        padding-inline: var(--wrap-padding-inline)
    }

    @media(min-width: 20em) {
        .l-wrap {
            --sm-wrap-width: var(--wrap-width);
            --sm-wrap-max-width: var(--wrap-max-width);
            --sm-wrap-margin-inline: var(--wrap-margin-inline);
            --sm-wrap-padding-inline: var(--wrap-padding-inline);
            width: var(--sm-wrap-width);
            max-width: var(--sm-wrap-max-width);
            margin-inline: var(--sm-wrap-margin-inline);
            padding-inline: var(--sm-wrap-padding-inline)
        }
    }

    @media(min-width: 50em) {
        .l-wrap {
            --md-wrap-width: var(--sm-wrap-width);
            --md-wrap-max-width: var(--sm-wrap-max-width);
            --md-wrap-margin-inline: var(--sm-wrap-margin-inline);
            --md-wrap-padding-inline: var(--sm-wrap-padding-inline);
            width: var(--md-wrap-width);
            max-width: var(--md-wrap-max-width);
            margin-inline: var(--md-wrap-margin-inline);
            padding-inline: var(--md-wrap-padding-inline)
        }
    }

    @media(min-width: 80em) {
        .l-wrap {
            --lg-wrap-width: var(--md-wrap-width);
            --lg-wrap-max-width: var(--md-wrap-max-width);
            --lg-wrap-margin-inline: var(--md-wrap-margin-inline);
            --lg-wrap-padding-inline: var(--md-wrap-padding-inline);
            width: var(--lg-wrap-width);
            max-width: var(--lg-wrap-max-width);
            margin-inline: var(--lg-wrap-margin-inline);
            padding-inline: var(--lg-wrap-padding-inline)
        }
    }
}

@layer utilities {
    .u-link-stretch {
        position: static
    }

    .u-link-stretch::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: var(--link-stretch-z-index, 1);
        width: 100%;
        height: 100%;
        border-radius: var(--link-stretch-border-radius, 0);
        cursor: pointer
    }

    .u-link-stretch:focus-visible {
        outline: none
    }

    .u-link-stretch:focus-visible::before {
        outline: var(--link-stretch-outline-width, 0.125rem) var(--link-stretch-outline-type, solid) var(--link-stretch-outline-color, currentColor)
    }
}

@layer utilities {
    .u-visually-hidden {
        position: absolute;
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        clip: rect(0 0 0 0);
        overflow: hidden;
        white-space: nowrap
    }
}

@layer utilities {
    .u-opacity-50 {
        opacity: var(--opacity-50)
    }

    .u-opacity-60 {
        opacity: var(--opacity-60)
    }

    .u-text-white {
        color: var(--color-white)
    }

    .u-text-dark-gray {
        color: var(--color-dark-gray)
    }

    .u-text-error {
        color: var(--color-error)
    }

    .u-text-2xs {
        font-size: var(--text-2xs)
    }

    .u-text-xs {
        font-size: var(--text-xs)
    }

    .u-text-xs-sm {
        font-size: var(--text-xs-sm)
    }

    .u-text-sm {
        font-size: var(--text-sm)
    }

    .u-text-sm-lg {
        font-size: var(--text-sm-lg)
    }

    .u-text-md {
        font-size: var(--text-md)
    }

    .u-text-lg-xl {
        font-size: var(--text-lg-xl)
    }

    .u-text-xl {
        font-size: var(--text-xl)
    }

    .u-text-2xl-4xl {
        font-size: var(--text-2xl-4xl)
    }

    .u-leading-xs {
        line-height: var(--leading-xs)
    }

    .u-leading-sm {
        line-height: var(--leading-sm)
    }

    .u-margin-top-xs {
        margin-top: var(--space-xs)
    }

    .u-margin-top-3xl {
        margin-top: var(--space-3xl)
    }

    .u-margin-bottom-xs {
        margin-bottom: var(--space-xs)
    }

    .u-margin-bottom-sm {
        margin-bottom: var(--space-sm)
    }

    .u-margin-bottom-lg {
        margin-bottom: var(--space-lg)
    }

    .u-margin-end-auto {
        margin-inline-end: auto
    }

    .u-padding-block-xl {
        padding-block: var(--space-xl)
    }

    .u-padding-top-md {
        padding-top: var(--space-md)
    }

    .u-padding-top-lg {
        padding-top: var(--space-lg)
    }

    .u-padding-top-xl {
        padding-top: var(--space-xl)
    }

    .u-padding-top-4xl {
        padding-top: var(--space-4xl)
    }

    .u-padding-bottom-2xl {
        padding-bottom: var(--space-2xl)
    }
}

@layer base {
    :root {
        --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
        --animation-ease: var(--ease-in-out-sine);
        --animation-duration: 200ms;
        --animation-delay: 0ms;
        --base-gap: var(--space-xs-sm);
        --base-margin: var(--space-xs-lg);
        --inline-end-spacer: max(10%, var(--space-xs));
        --copy-max-width: 45rem;
        --default-radius: var(--radius-md);
        --color-primary: var(--color-vellox-blue);
        --icon-transition: transform 0.3s var(--animation-ease);
        --root-adminbar-height: 2.5rem
    }

    html {
        background-color: var(--color-black)
    }

    html[data-overlay=true] {
        overflow: hidden
    }

    html[data-adminbar=true] {
        padding-bottom: var(--root-adminbar-height)
    }

    hr {
        border: 0;
        width: 100%;
        height: 1px;
        background-color: rgba(0, 0, 0, .2)
    }

    .main-content {
        margin-top: 0rem;
        background-color: var(--color-white)
    }

    @font-face {
        font-family: "Neue Haas Grotesk";
        font-weight: 500;
        src: url("/assets/public/fonts/NeueHaas.woff2") format("woff2")
    }

    body {
        font-size: var(--text-sm);
        font-feature-settings: normal;
        font-variation-settings: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: var(--font-regular);
        line-height: var(--leading-xs);
        letter-spacing: var(--tracking-sm)
    }

    h1 {
        font-size: var(--text-xl-2xl)
    }

    h2 {
        font-size: var(--text-xl-2xl)
    }

    h3 {
        font-size: var(--text-lg)
    }

    h4 {
        font-size: var(--text-md)
    }

    h5 {
        font-size: var(--text-sm)
    }

    h6 {
        font-size: var(--text-xs)
    }

    .heading-text {
        font-weight: var(--font-regular);
        line-height: var(--leading-sm);
        letter-spacing: var(--tracking-sm);
        text-wrap: balance
    }

    .caption-text {
        font-size: var(--text-xs);
        font-weight: var(--font-regular);
        line-height: var(--leading-sm);
        letter-spacing: var(--tracking-lg)
    }

    html[data-js=true] img[loading=lazy] {
        opacity: 0
    }

    img[loading=lazy][data-animation=loaded] {
        --animation-duration: 400ms;
        animation: fadeIn var(--animation-ease) var(--animation-duration) forwards
    }

    figure,
    img {
        display: block;
        width: 100%
    }

    @keyframes slideUp {
        from {
            transform: translateY(clamp(2rem, 50%, 4rem))
        }

        to {
            transform: translateY(0)
        }
    }

    @keyframes slideDown {
        from {
            transform: translateY(clamp(-4rem, -50%, -2rem))
        }

        to {
            transform: translateY(0)
        }
    }

    @keyframes fadeIn {
        from {
            opacity: var(--from-opacity, 0)
        }

        to {
            opacity: var(--to-opacity, 1)
        }
    }

    .animation-fade-in {
        --animation-duration: 400ms
    }

    html[data-js=true] .animation-fade-in {
        opacity: 0
    }

    html[data-js=true] .animation-fade-in[data-animation=loaded] {
        animation: fadeIn var(--animation-duration) var(--animation-ease) var(--animation-delay) forwards
    }

    .animation-slide-up {
        --animation-delay: 200ms;
        --animation-duration: 600ms
    }

    html[data-js=true] .animation-slide-up {
        opacity: 0
    }

    html[data-js=true] .animation-slide-up[data-animation=loaded] {
        animation: fadeIn var(--animation-duration) var(--animation-ease) var(--animation-delay) forwards, slideUp var(--animation-duration) var(--animation-ease) var(--animation-delay) forwards
    }

    .animation-slide-down {
        --animation-delay: 200ms;
        --animation-duration: 600ms
    }

    html[data-js=true] .animation-slide-down {
        opacity: 0
    }

    html[data-js=true] .animation-slide-down[data-animation=loaded] {
        animation: fadeIn var(--animation-duration) var(--animation-ease) var(--animation-delay) forwards, slideDown var(--animation-duration) var(--animation-ease) var(--animation-delay) forwards
    }

    .animation-clip-in {
        --animation-path: inset(0 100% 0 0);
        --animation-property: clip-path;
        --animation-delay: 200ms;
        --animation-duration: 400ms
    }

    html[data-js=true] .animation-clip-in {
        clip-path: var(--animation-path);
        transition-property: var(--animation-property);
        transition-duration: var(--animation-duration);
        transition-delay: var(--animation-delay);
        transition-timing-function: var(--animation-ease);
        will-change: clip-path
    }

    html[data-js=true] .animation-clip-in[data-animation=loaded] {
        clip-path: inset(0 0 0 0)
    }
}

*[data-visible=medium] {
    display: none
}

@media(min-width: 50em) {
    *[data-visible=medium] {
        display: block
    }
}

*[data-visible=large] {
    display: none
}

@media(min-width: 80em) {
    *[data-visible=large] {
        display: block
    }
}

@media(min-width: 50em) {
    *[data-hidden=medium] {
        display: none
    }
}

@media(min-width: 80em) {
    *[data-hidden=large] {
        display: none
    }
}

safelist {
    padding: var(--space-sm-md)
}

safelist {
    padding: var(--space-xl-2xl)
}

@layer layout {

    .page-header[data-theme=dark]+.block-space>[data-page-block=collection-grid]:first-child,
    .page-header[data-theme=light]+.block-space>[data-page-block=collection-grid][data-theme=white]:first-child,
    .page-header+.block-space>[data-content-block=caption]:first-child,
    .page-header+.l-wrap {
        padding-block-start: 0 !important
    }

    .block-space {
        width: 100%;
        --stack-space: 0
    }

    .block-space>* {
        padding-block: var(--space-xl)
    }

    .block-space>[data-page-block=collection-grid] {
        background-color: var(--color-black);
        color: var(--color-white)
    }

    .block-space>[data-page-block=collection-grid][data-theme=white] {
        background-color: var(--color-white);
        color: var(--color-black)
    }

    .block-space>[data-page-block=testimonial-grid] {
        background-color: var(--color-light-gray)
    }

    .block-space>[data-page-block=marquee] {
        padding-top: 0
    }

    .block-space>[data-page-block=featured] {
        background-color: var(--color-light-white)
    }

    .block-space>[data-page-block=featured]:nth-of-type(odd) {
        background-color: var(--color-light-gray)
    }

    .block-space>*+[data-content-block=question] {
        padding-block-start: 0
    }
}

@layer utility {
    .u-arrow-link {
        text-decoration: none;
        color: var(--color-primary);
        display: inline-block
    }

    .u-arrow-link .icon {
        transition: var(--icon-transition)
    }

    .u-arrow-link:hover .icon {
        transform: translateX(0.5rem)
    }

    .u-huge-number {
        color: var(--color-primary);
        font-size: 5rem;
        line-height: 1
    }

    .u-text-balance {
        text-wrap: balance
    }

    .u-border-top-dark {
        border-top: 1px solid var(--color-black)
    }
}

@layer views {
    .block-header {
        padding-bottom: var(--space-lg)
    }

    .block-header>* {
        max-width: 50rem
    }

    .block-header--preamble {
        font-size: var(--text-md-lg)
    }

    @media(min-width: 50em) {
        .block-header {
            width: 75%
        }
    }

    @media(min-width: 80em) {
        .block-header {
            width: 50%
        }
    }
}

@layer views {
    .breadcrumb--item {
        position: relative;
        padding-right: 11px
    }

    .breadcrumb--item:not(:last-child):after {
        content: "/";
        position: absolute;
        right: 0;
        top: 0
    }

    .breadcrumb--link {
        text-decoration: none;
        color: var(--color-dark-gray)
    }

    .breadcrumb--link.active {
        color: var(--color-black)
    }

    .breadcrumb--link:hover {
        text-decoration: underline
    }
}

@layer views {
    .button {
        --button-align-items: center;
        --button-gap: 0.5em;
        --button-padding: 0.5em 0.75em;
        --button-bg-color: transparent;
        --button-hover-bg-color: transparent;
        --button-text-color: currentColor;
        --button-hover-text-color: var(--button-text-color);
        --button-border-width: 0.0625em;
        --button-border-style: solid;
        --button-border-color: var(--color-primary);
        --button-hover-border-color: var(--button-hover-text-color);
        --button-radius: 0.25em;
        --button-font-family: var(--font-sans);
        --button-font-size: var(--text-sm);
        --button-font-weight: var(--font-regular);
        --button-leading: var(--leading-xs);
        --button-tracking: var(--tracking-lg);
        --button-text-decoration: none;
        --button-icon-size: 1.5cap;
        --button-outline-width: var(--focus-ring-width);
        --button-outline-style: var(--focus-ring-style);
        --button-outline-color: var(--button-border-color);
        --button-outline-offset: var(--focus-ring-offset);
        display: inline-flex;
        align-items: var(--button-align-items);
        gap: var(--button-gap);
        padding: var(--button-padding);
        background-color: var(--button-bg-color);
        color: var(--button-text-color);
        border-width: var(--button-border-width);
        border-style: var(--button-border-style);
        border-color: var(--button-border-color);
        border-radius: var(--button-radius);
        font-family: var(--button-font-family);
        font-size: var(--button-font-size);
        font-weight: var(--button-font-weight);
        letter-spacing: var(--button-tracking);
        line-height: var(--button-leading);
        text-decoration: var(--button-text-decoration);
        cursor: pointer
    }

    .button:hover {
        background-color: var(--button-hover-bg-color);
        color: var(--button-hover-text-color);
        border-color: var(--button-hover-border-color)
    }

    .button:hover>span {
        padding-inline-start: .5em
    }

    .button:hover>span>svg {
        width: var(--button-icon-size);
        opacity: 1
    }

    .button:focus-visible {
        outline-width: var(--button-outline-width);
        outline-style: var(--button-outline-style);
        outline-color: var(--button-outline-color);
        outline-offset: var(--button-outline-offset)
    }

    .button:focus-visible>span {
        padding-inline-start: .5em
    }

    .button:focus-visible>span>svg {
        width: var(--button-icon-size);
        opacity: 1
    }

    .button:active {
        transform: scale(98%)
    }

    .button:has(>span>svg) {
        --button-gap: 0
    }

    .button>span {
        transition: padding var(--animation-ease) 200ms
    }

    .button>span>svg {
        flex: none;
        width: 0;
        opacity: 0;
        height: var(--button-icon-size);
        transition: all var(--animation-ease) 200ms
    }

    .button>span>svg:first-child {
        margin-inline-start: -0.125em
    }

    .button>span>svg:last-child {
        margin-inline-end: -0.125em
    }

    .button>span {
        display: flex
    }

    .button>svg {
        flex: none;
        width: var(--button-icon-size);
        height: var(--button-icon-size)
    }

    .button>svg:first-child {
        margin-inline-start: -0.125em
    }

    .button>svg:last-child {
        margin-inline-end: -0.125em
    }

    .button[data-variant=secondary] {
        --button-border-color: var(--color-white);
        --button-hover-border-color: var(--button-border-color)
    }

    .button[data-variant=solid] {
        --button-text-color: var(--color-white);
        --button-bg-color: var(--color-primary);
        --button-hover-text-color: var(--color-black);
        --button-hover-bg-color: var(--color-white);
        --button-hover-border-color: var(--color-black)
    }

    .button[data-variant=menu] {
        --button-icon-size: 2cap;
        border: none
    }

    .button[data-variant=cta] {
        --button-bg-color: var(--color-white);
        --button-text-color: var(--color-black);
        --button-hover-bg-color: var(--button-bg-color)
    }

    .button[data-variant=cta]:focus-visible {
        outline-color: var(--color-white)
    }
}

@layer views {
    .caption {
        --caption-gap: var(--base-gap);
        --caption-margin: calc(var(--base-margin) * 2);
        --border-radius: var(--radius-sm);
        --content-padding-right: var(--space-sm)
    }

    @media(min-width: 50em) {
        .caption {
            --feature-text: var(--text-md)
        }
    }

    .caption[data-full-width=true] {
        --wrap-max-width: auto;
        --wrap-padding-inline: 0;
        --caption-margin: 0rem
    }

    .caption--entity {
        --switch-breakpoint: calc(50rem - var(--caption-margin));
        --grid-gap: var(--base-gap);
        background-color: var(--caption-entity-bg-color, transparent);
        color: var(--caption-entity-text-color, inherit)
    }

    .caption[data-layout-direction=inline-reverse] .caption--entity {
        --content-padding-right: 0
    }

    .caption[data-layout-direction=inline-reverse] .caption--entity .caption--content {
        --md-grid-column: 1 / span 1;
        --md-grid-row: 1
    }

    .caption[data-layout-direction=inline-reverse] .caption--entity .caption--content:before {
        left: auto;
        right: 0
    }

    .caption[data-layout-direction=inline-reverse] .caption--entity .caption--media {
        --lg-grid-column: 2 / span 2
    }

    @media(min-width: 50em) {
        .caption[data-layout-direction=inline-reverse] .caption--entity {
            --border-radius: var(--radius-sm)
        }
    }

    .caption--media {
        --frame-ratio: 16/9;
        --wrap-max-width: auto;
        --lg-grid-column: 1 / span 2;
        border-radius: var(--border-radius)
    }

    .caption[data-media-fit=contain] .caption--media {
        --frame-fit: contain;
        margin-block: var(--space-lg)
    }

    .caption[data-media-fit=contain] .caption--media>* {
        object-position: 50% 50% !important
    }

    .caption--content {
        --caption-content-text-align: left;
        padding-right: var(--content-padding-right);
        font-size: var(--feature-text);
        text-align: var(--caption-content-text-align);
        overflow: hidden;
        position: sticky;
        top: 72px;
        padding-top: var(--space-xs);
        margin-bottom: auto
    }

    .caption--content:before {
        content: "";
        display: block;
        position: absolute;
        background-color: var(--color-primary);
        height: 1px;
        width: 200%;
        top: 0;
        left: 0
    }

    .caption[data-media-fit=contain] .caption--content {
        --switch-self: center
    }

    .caption[data-content-layout="1"] .caption--content {
        --switch-self: center
    }

    .caption[data-content-layout="2"] .caption--content {
        --switch-self: end
    }

    .caption[data-content-layout="3"] .caption--content {
        --switch-self: center;
        --caption-content-text-align: center
    }

    .caption[data-content-layout="4"] .caption--content {
        --switch-self: auto
    }

    .caption--wrap {
        --stack-space: var(--space-xs);
        --wrap-max-width: var(--copy-max-width);
        --wrap-margin-inline: 0;
        --wrap-padding-inline: 0;
        --caption-wrap-padding-block: 0;
        padding-block: var(--caption-wrap-padding-block)
    }

    .caption[data-full-width=true] .caption--wrap {
        --wrap-padding-inline: var(--caption-gap);
        --md-wrap-padding-inline: 0 var(--caption-gap)
    }

    .caption[data-full-width=true][data-layout-direction=inline-reverse] .caption--wrap {
        --md-wrap-padding-inline: var(--caption-gap) 0
    }

    .caption[data-background-color=true] .caption--wrap {
        --wrap-padding-inline: var(--caption-gap);
        --md-wrap-padding-inline: 0 var(--caption-gap);
        --caption-wrap-padding-block: 0 var(--caption-gap)
    }

    @media(min-width: 50em) {
        .caption[data-background-color=true] .caption--wrap {
            --caption-wrap-padding-block: var(--caption-gap)
        }
    }

    .caption[data-background-color=true][data-layout-direction=inline-reverse] .caption--wrap {
        --md-wrap-padding-inline: var(--caption-gap) 0
    }

    .caption[data-content-layout="3"] .caption--wrap {
        --wrap-margin-inline: auto
    }

    .caption[data-content-layout="3"] .caption--wrap>.l-cluster {
        --cluster-content: center
    }

    .caption[data-content-layout="4"] .caption--wrap {
        --caption-wrap-padding-block: 0;
        display: flex;
        flex-direction: column;
        min-height: 100%
    }

    .caption[data-content-layout="4"][data-background-color=true] .caption--wrap {
        --caption-wrap-padding-block: var(--caption-gap)
    }
}

@layer views {
    .card {
        --card-text: var(--text-sm-md);
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        padding: var(--space-xs-sm);
        background-color: var(--color-dark-gray);
        border-radius: var(--radius-md)
    }

    .card[data-theme=white] {
        --card-text: var(--text-sm);
        background-color: var(--color-light-gray)
    }

    .card[data-theme=white] .card--media {
        background-color: var(--color-white);
        border-radius: var(--radius-sm)
    }

    .card[data-theme=white] .card--media>img {
        inset: .5rem;
        height: calc(100% - 1rem);
        width: calc(100% - 1rem);
        object-fit: contain
    }

    .card:hover .card--link {
        transform: translateX(0.5rem)
    }

    .card--media {
        width: 5rem
    }

    .card--media>img {
        object-fit: contain
    }

    .card--heading a {
        text-decoration: none
    }

    .card--copy {
        --stack-space: var(--space-sm);
        padding-top: var(--space-xs);
        flex-grow: 1;
        padding-inline-end: var(--inline-end-spacer);
        font-size: var(--card-text)
    }

    .card--link {
        color: var(--color-primary);
        position: absolute;
        bottom: var(--space-xs);
        right: var(--space-xs);
        width: var(--space-sm);
        transition: var(--icon-transition)
    }
}

@layer views {
    .card-v2 {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-bottom: auto;
        background-color: var(--color-light-gray);
        padding: var(--space-xs);
        clip-path: inset(0 round var(--radius-md))
    }

    .card-v2--media {
        clip-path: inset(0 round var(--radius-sm))
    }

    .card-v2--copy {
        width: 100%;
        flex-grow: 1;
        padding-top: var(--space-md);
        line-height: var(--leading-xs)
    }

    .card-v2--link {
        line-height: var(--leading-md);
        overflow-wrap: break-word;
        text-decoration: none
    }

    .card-v2--link:hover {
        text-decoration: underline
    }
}

@layer views {
    .cardlet {
        position: relative;
        display: flex;
        gap: var(--space-xs);
        padding: var(--space-2xs);
        background-color: var(--color-light-gray);
        border-radius: var(--radius-md);
        align-items: center
    }

    .cardlet--icon {
        --icon-width: 20%;
        --frame-ratio: 1/1;
        width: auto;
        width: var(--icon-width);
        border-radius: var(--radius-sm);
        background-color: var(--color-white);
        flex-shrink: 0
    }

    .cardlet--icon>img {
        object-fit: contain;
        padding: var(--space-2xs)
    }

    @media(min-width: 50em) {
        .cardlet--icon {
            --icon-width: 25%
        }
    }

    .cardlet--title {
        flex-shrink: 1
    }
}

@layer views {
    .collection-grid {
        --grid-gap: var(--space-xl) var(--space-xs-md);
        background-color: rgba(0, 0, 0, 0);
        padding-block: 0
    }

    .collection-grid[data-layout-direction=inline] {
        --md-grid-columns: 2
    }
}

@layer views {
    .content {
        --content-max-width: var(--copy-max-width);
        --wrap-max-width: var(--content-max-width);
        --grid-gap: var(--space-md)
    }

    .content[data-layout=columns] {
        --wrap-max-width: auto;
        --md-grid-columns: 2
    }

    .content[data-layout=columns] .rich-text {
        max-width: var(--content-max-width)
    }
}

@layer views {
    .cover {
        --cover-padding-block-end: var(--space-lg-2xl);
        --cover-content: end;
        --cover-items: center;
        --cover-media-position: relative;
        --cover-media-ratio: 4/3;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--base-gap);
        place-content: var(--cover-content);
        place-items: var(--cover-items);
        width: 100%;
        padding-block-end: var(--cover-padding-block-end)
    }

    @media(min-width: 50em) {
        .cover {
            --cover-media-position: absolute;
            --cover-media-ratio: auto;
            min-height: 85vh;
            min-height: 85dvh
        }
    }

    .cover--media {
        position: var(--cover-media-position);
        width: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        background-color: rgba(0, 0, 0, 0);
        aspect-ratio: var(--cover-media-ratio)
    }

    .cover--media>*:is(img, video) {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .cover--overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 55.14%, #000 95.2%)
    }

    .cover--wrap {
        --cover-wrap-text-align: center;
        --cover-wrap-text-color: var(--color-white);
        --wrap-max-width: none;
        --wrap-margin-inline: 0;
        --grid-items: center;
        position: relative;
        z-index: 3;
        gap: var(--base-gap);
        width: 100%;
        text-align: var(--cover-wrap-text-align);
        color: var(--cover-wrap-text-color)
    }

    .cover--wrap .l-cluster {
        --cluster-content: center
    }
}

@layer views {
    .cta-input-group input {
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--color-primary);
        width: 100%;
        padding: var(--space-2xs) 0;
        background: rgba(0, 0, 0, 0);
        color: var(--color-white);
        transition: padding var(--animation-ease) 200ms
    }

    [data-theme=white] .cta-input-group input {
        color: var(--color-black)
    }

    .cta-input-group input::placeholder {
        color: var(--color-white)
    }

    [data-theme=white] .cta-input-group input::placeholder {
        color: var(--color-black)
    }

    .cta-input-group input:focus-visible {
        outline-color: var(--color-white);
        padding: var(--space-2xs)
    }

    .cta-input-group.cta-inverted input {
        color: var(--color-black)
    }

    .cta-input-group.cta-inverted input::placeholder {
        color: var(--color-black)
    }

    .cta-input-group.cta-inverted input:focus-visible {
        outline-color: var(--color-black)
    }
}

@layer views {
    .featured {
        --copy-max-width: 50rem;
        --featured-padding-inline: var(--base-margin);
        --featured-entity-switch-breakpoint: calc(40rem - calc(var(--featured-padding-inline) * 2));
        --featured-entity-flex-direction: row;
        --featured-entity-gap: var(--base-gap);
        --featured-entity-bg-color: transparent;
        --featured-entity-border-radius: 0;
        --featured-media-flex-grow: 1;
        --featured-media-border-radius: var(--radius-sm);
        --featured-media-aspect-ratio: 3/2;
        --featured-content-padding-block: 0;
        --featured-content-padding-inline: 0;
        --featured-content-text-align: left;
        --featured-content-bg-color: transparent;
        --featured-content-text-color: var(--color-black);
        --featured-content-border-radius: 0;
        --featured-content-place-self: normal;
        --featured-wrap-width: min(100%, 50rem);
        --featured-wrap-margin-inline: 0;
        --featured-wrap-min-height: auto;
        --featured-wrap-padding-block: 0;
        --featured-wrap-padding-inline: 0;
        --featured-wrap-stack-space: var(--space-xs);
        --featured-heading-letter-spacing: var(--tracking-xs);
        --featured-heading-line-height: var(--leading-xs);
        --featured-links-stack-space: var(--space-sm)
    }

    @media(min-width: 50em) {
        .featured {
            --featured-wrap-width: min(80%, 50rem)
        }
    }

    .featured[data-layout="2"] {}

    .featured[data-layout="3"] {
        --featured-content-text-align: center;
        --featured-content-padding-block: var(--space-xs-md);
        --featured-wrap-margin-inline: auto
    }

    .featured[data-layout="4"] {}

    .featured[data-layout="5"] {
        --featured-wrap-min-height: 100%
    }

    .featured[data-direction=inline-reverse] {
        --featured-entity-flex-direction: row-reverse
    }

    .featured[data-media-size=large] {
        --featured-media-flex-grow: 2
    }

    .featured-entity {
        --switch-breakpoint: var(--featured-entity-switch-breakpoint);
        --switch-gap: var(--featured-entity-gap);
        flex-direction: var(--featured-entity-flex-direction);
        background-color: var(--featured-entity-bg-color);
        clip-path: inset(0 round var(--featured-entity-border-radius))
    }

    .featured-media {
        --switch-grow: var(--featured-media-flex-grow);
        --frame-ratio: var(--featured-media-aspect-ratio);
        clip-path: inset(0 round var(--featured-media-border-radius))
    }

    .featured-content {
        --switch-self: var(--featured-content-place-self);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-block: var(--featured-content-padding-block);
        padding-inline: var(--featured-content-padding-inline);
        text-align: var(--featured-content-text-align);
        background-color: var(--featured-content-bg-color);
        color: var(--featured-content-text-color);
        clip-path: inset(0 round var(--featured-content-border-radius))
    }

    .featured-wrap {
        --stack-space: var(--featured-wrap-stack-space);
        display: flex;
        flex-direction: column;
        width: var(--featured-wrap-width);
        min-height: var(--featured-wrap-min-height);
        margin-inline: var(--featured-wrap-margin-inline);
        padding-block: var(--featured-wrap-padding-block);
        padding-inline: var(--featured-wrap-padding-inline)
    }

    .featured-label {
        color: var(--color-primary);
        margin-bottom: var(--space-xs)
    }

    .featured-heading {
        font-size: var(--text-xl);
        letter-spacing: var(--featured-heading-letter-spacing);
        line-height: var(--featured-heading-line-height);
        margin-bottom: var(--space-sm)
    }

    .featured-list {
        padding-top: var(--space-sm);
        --stack-space: var(--featured-links-stack-space)
    }

    .featured-list--heading {
        margin-block: var(--space-xs)
    }

    .featured-list--item {
        padding: var(--space-2xs);
        padding: .25em .5em;
        border-radius: var(--radius-sm);
        border: 1px solid var(--color-black)
    }

    .featured-list--items {
        max-width: var(--copy-max-width)
    }
}

@layer views {
    .cta-footer--form {
        padding-bottom: var(--space-xl);
        background-color: var(--color-primary);
        color: var(--color-white)
    }

    .footer {
        padding-bottom: var(--space-2xl);
        background-color: var(--color-black);
        color: var(--color-white);
        padding-block: var(--space-lg)
    }

    .footer--container {
        /*padding-block: var(--space-lg); */
        border-top: 0px solid #fff;
        border-bottom: 0px solid #fff
    }

    .footer--grid {
        --grid-gap: var(--space-xl) var(--base-gap);
        --md-grid-columns: 2;
        --lg-grid-columns: 12
    }

    .footer--subgrid {
        --grid-gap: var(--space-md-lg) var(--base-gap);
        --grid-content: start;
        --md-grid-columns: 2
    }

    .footer--brand-logo {
        display: inline-flex;
        text-decoration: none;
        height: 40px
    }

    .footer--brand-logo:hover {
        text-decoration: underline
    }

    .footer--brand-logo>svg {
        margin: 0 auto;
    }

    .footer--presentation {
        max-width: 28rem
    }

    .footer--link {
        text-decoration: none
    }

    .footer--link:hover {
        text-decoration: underline
    }
}

@layer views {
    .form-bullets {
        list-style: none;
        counter-reset: num;
        padding-inline-start: 0
    }

    .form-bullets li {
        counter-increment: num
    }

    .form-bullets li p {
        display: inline-block;
        padding-left: var(--space-md)
    }

    .form-bullets li::before {
        display: inline-block;
        position: absolute;
        content: "0" counter(num);
        color: var(--color-primary)
    }

    .form-bullets li:nth-child(n+10)::before {
        content: counter(num)
    }
}

@layer views {
    .header {
        --header-width: 100%;
        --header-max-width: none;
        --header-margin-inline: auto;
        --header-margin-block-start: 0;
        --header-padding-inline: 0;
        --header-border-block-end: 0;
        --header-box-shadow: 0;
        --header-wrap-max-width: none;
        --header-wrap-padding-block: var(--space-xs);
        --header-wrap-padding-inline: var(--base-margin);
        --header-wrap-background-color: var(--color-white);
        --header-wrap-text-color: var(--color-black);
        --header-wrap-border-radius: 0;
        width: var(--header-width);
        max-width: var(--header-max-width);
        margin-block-start: var(--header-margin-block-start);
        margin-inline: var(--header-margin-inline);
        padding-inline: var(--header-padding-inline);
        border-block-end: var(--header-border-block-end);
        box-shadow: var(--header-box-shadow);
        transform: translateY(0);
        transition: transform var(--animation-ease) 200ms;
        will-change: transform
    }

    .header[data-variant=fixed] {
        position: fixed;
        z-index: 500;
        top: 0
    }

    .header[data-theme=white] {
        --header-wrap-background-color: transparent;
        --header-wrap-text-color: var(--color-white);
        --header-wrap-padding-block: var(--space-sm) var(--space-sm)
    }

    .header-wrap {
        --wrap-max-width: 1920px;
        max-width: var(--wrap-max-width);
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        --wrap-padding-inline: var(--header-wrap-padding-inline);
        padding-block: var(--header-wrap-padding-block);
        background-color: var(--header-wrap-background-color);
        color: var(--header-wrap-text-color);
        border-radius: var(--header-wrap-border-radius);
        transition: color var(--animation-ease) 200ms, background-color var(--animation-ease) 400ms, padding var(--animation-ease) 600ms
    }

    .header {
        --header-wrap-padding-block: var(--space-xs);
        --logo-width: 120px;
        background-color: var(--header-wrap-background-color)
    }

    .header[data-theme=white] {
        color: var(--header-wrap-text-color)
    }

    .header--brand {
        display: inline-flex;
        text-decoration: none;
        width: var(--logo-width)
    }

    .header--brand:hover {
        text-decoration: underline
    }

    .header--brand svg {
        width: var(--logo-width);
        height: auto
    }

    .header--nav {
        --repel-gap: var(--space-xs) var(--space-md)
    }

    .header--navlink {
        text-decoration: none;
        font-size: var(--text-sm)
    }

    .header--navlink:hover {
        text-decoration: underline
    }
}

@layer views {
    .hero-card {
        --stack-space: var(--space-sm);
        padding-bottom: var(--space-sm);
        position: relative;
        font-size: var(--text-sm-md);
        padding-top: var(--space-sm-lg)
    }

    .hero-card:before {
        content: "";
        display: block;
        position: absolute;
        background-color: var(--color-primary);
        height: 1px;
        width: 100%;
        top: 0;
        left: 0
    }

    .hero-card p {
        max-width: 35rem
    }

    @media(min-width: 50em) {
        .hero-card p {
            width: 90%
        }
    }
}

@layer views {
    .icon {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        width: var(--icon-width, 1rem);
        height: var(--icon-height, 1rem)
    }

    .icon>svg {
        width: var(--icon-width, 1rem);
        height: var(--icon-height, 1rem)
    }
}

@layer views {
    .marquee {
        --marquee-gap: var(--space-lg-4xl);
        --marquee-duration: 30s;
        --text-color: var(--color-black);
        --background-color: transparent;
        display: flex;
        gap: var(--marquee-gap);
        padding-bottom: var(--space-md-xl);
        overflow: hidden;
        user-select: none;
        background-color: var(--background-color);
        color: var(--text-color)
    }

    .marquee--list {
        display: flex;
        flex-shrink: 0;
        justify-content: space-around;
        gap: var(--marquee-gap);
        min-width: 100%;
        margin-block: var(--space-xs);
        animation: scroll var(--marquee-duration) linear infinite;
        will-change: transform;
        backface-visibility: hidden
    }

    .marquee--link {
        display: block
    }

    .marquee--item img {
        width: auto;
        height: 2rem
    }

    .marquee:hover .marquee--list {
        animation-play-state: paused
    }

    @keyframes scroll {
        from {
            transform: translateZ(0)
        }

        to {
            transform: translate3d(calc(-100% - var(--marquee-gap)), 0, 0)
        }
    }
}

@layer views {
    .media {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs)
    }

    .media>img,
    .media>video {
        width: 100%;
        clip-path: var(--media-radius, inset(0 round var(--radius-md)))
    }

    .media--wrap {
        --wrap-max-width: auto;
        --wrap-margin-inline: 0 auto;
        --wrap-padding-inline: 0;
        display: flex;
        gap: var(--space-2xs) var(--space-sm);
        place-items: baseline
    }

    .media--wrap .media--caption {
        flex-basis: 0;
        flex-grow: 2
    }

    .media--wrap .media--meta {
        flex-basis: 0;
        flex-grow: 1;
        text-align: right
    }
}

@layer views {
    .navlist--link {
        display: block;
        padding-block: var(--space-2xs);
        font-size: var(--text-lg);
        text-decoration: none;
        border-block-start: 1px solid var(--color-black)
    }

    .navlist--link:hover {
        text-decoration: underline;
        text-decoration-color: var(--color-primary)
    }
}

@layer views {
    bws-toggle-overlay {
        display: block
    }

    .overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 999;
        display: flex;
        overflow-y: auto;
        transition: opacity var(--animation-ease, ease-in) 200ms;
        pointer-events: none;
        opacity: 0;
        outline: 0;
        -webkit-overflow-scrolling: touch
    }

    .overlay[data-visibility=visible] {
        pointer-events: auto;
        opacity: 1
    }

    .overlay[data-type=drawer],
    .overlay[data-type=fullscreen] {
        overflow-x: hidden
    }

    .overlay--backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        background-color: var(--overlay-backdrop-bg-color, var(--color-black));
        opacity: var(--overlay-backdrop-opacity, 0.5);
        transition: opacity var(--animation-ease, ease-in) 600ms
    }

    [data-visibility=hidden] .overlay--backdrop {
        --overlay-backdrop-opacity: 0;
        transition: opacity var(--animation-ease, ease-in) 200ms 200ms
    }

    .overlay--wrap {
        position: relative;
        z-index: 2;
        width: var(--overlay-wrap-width, 100%);
        height: var(--overlay-wrap-height, auto);
        margin: auto;
        padding: var(--overlay-wrap-padding, 0)
    }

    .overlay[data-type=drawer] .overlay--wrap {
        --overlay-wrap-width: 90%;
        min-height: 100%;
        margin-inline-start: 0;
        transform: translate3d(-30%, 0, 0);
        transition: transform var(--animation-ease, ease-in) 400ms
    }

    @media(min-width: 50em) {
        .overlay[data-type=drawer] .overlay--wrap {
            --overlay-wrap-width: 70%
        }
    }

    @media(min-width: 80em) {
        .overlay[data-type=drawer] .overlay--wrap {
            --overlay-wrap-width: 50%
        }
    }

    .overlay[data-type=drawer] .overlay--wrap .overlay--box {
        min-height: 100vh
    }

    .overlay[data-type=drawer][data-enter-from=inline-end] .overlay--wrap {
        margin-inline-start: auto;
        margin-inline-end: 0;
        transform: translate3d(30%, 0, 0)
    }

    .overlay[data-type=drawer][data-enter-from=block-end] .overlay--wrap {
        --overlay-wrap-width: 100%;
        min-height: auto;
        margin-block-end: 0;
        margin-inline: 0;
        transform: translate3d(0, 100%, 0)
    }

    .overlay[data-type=drawer][data-enter-from=block-end] .overlay--wrap .overlay--box {
        min-height: auto
    }

    .overlay[data-type=drawer][data-visibility=visible] .overlay--wrap {
        transform: translate3d(0, 0, 0)
    }

    .overlay[data-type=popup] .overlay--wrap {
        --overlay-wrap-width: min(100%, 32rem);
        --overlay-wrap-padding: var(--space-2xs-sm);
        transform: translate3d(0, 4rem, 0);
        transition: transform var(--animation-ease, ease-in) 400ms
    }

    .overlay[data-type=popup] .overlay--wrap .overlay--box {
        border-radius: var(--overlay-box-radius, var(--radius-md))
    }

    .overlay[data-type=popup][data-variant=preview-share] .overlay--wrap {
        --overlay-wrap-width: 30rem;
        --overlay-wrap-padding: 1rem
    }

    html[data-adminbar=true] .overlay[data-type=popup][data-variant=preview-share] .overlay--wrap {
        --overlay-wrap-padding: 1rem 1rem calc(1rem + var(--root-adminbar-height)) 1rem
    }

    .overlay[data-type=popup][data-enter-from=inline-end] .overlay--wrap {
        transform: translate3d(4rem, 0, 0)
    }

    .overlay[data-type=popup][data-visibility=visible] .overlay--wrap {
        transform: translate3d(0, 0, 0)
    }

    .overlay[data-type=fullscreen] .overlay--wrap {
        --overlay-wrap-width: 100%;
        --overlay-wrap-height: 100%;
        transform: translate3d(0, 4rem, 0);
        transition: transform var(--animation-ease, ease-in) 400ms
    }

    .overlay[data-type=fullscreen] .overlay--wrap .overlay--box {
        min-height: 100vh
    }

    .overlay[data-type=fullscreen][data-enter-from=inline-end] .overlay--wrap {
        transform: translate3d(4rem, 0, 0)
    }

    .overlay[data-type=fullscreen][data-visibility=visible] .overlay--wrap {
        transform: translate3d(0, 0, 0)
    }

    .overlay--box {
        padding: var(--overlay-box-padding, var(--space-sm));
        background-color: var(--overlay-box-bg-color, var(--color-white))
    }

    .overlay[data-type=popup][data-variant=preview-share] .overlay--box {
        --overlay-box-padding: 1rem
    }

    .overlay--float-button {
        position: absolute;
        top: var(--overlay-float-button-top, var(--space-sm));
        right: var(--overlay-float-button-right, var(--space-sm))
    }

    .overlay[data-type=drawer] .overlay--wrap {
        --overlay-wrap-width: 100%
    }

    .overlay--box {
        --overlay-box-padding: var(--space-xs-sm);
        --overlay-float-button-top: var(--space-2xs-sm);
        --overlay-float-button-right: var(--space-2xs-sm)
    }

    .overlay--brand {
        display: inline-flex
    }

    .overlay--brand svg {
        width: 80px;
        height: auto
    }
}

@layer views {
    .page-header[data-theme=dark] {
        background-color: var(--color-black);
        color: var(--color-white)
    }
    
    .page-header[data-theme=light] {
        background-color: var(--color-white);
        color: var(--color-black)
    }
}

@layer views {
    .poster {
        --poster-bg-color: transparent;
        --poster-text-color: var(--color-black);
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: var(--poster-bg-color);
        color: var(--poster-text-color)
    }

    .poster:has(>.poster--media) {
        --poster-text-color: var(--color-white)
    }
}

@layer views {
    .quote {
        --stack-space: var(--space-xs)
    }
}

@layer views {
    bws-reel {
        --gap: var(--space-sm);
        position: relative;
        display: block
    }

    .reel--slider {
        display: flex;
        gap: var(--gap);
        height: 100%;
        padding: 0 var(--gap);
        scrollbar-width: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth
    }

    .reel--nav {
        position: absolute;
        top: 50%;
        right: 2rem;
        display: flex;
        gap: 1rem;
        transform: translateY(-50%);
        color: var(--color-white)
    }

    .reel--prev,
    .reel--next {
        display: flex;
        width: 2rem;
        height: 2rem;
        background-color: rgba(0, 0, 0, 0);
        color: var(--color-white);
        border: 1px solid var(--color-white);
        border-radius: 2rem;
        opacity: .8;
        transition: ease 200ms all
    }

    .reel--prev[disabled],
    .reel--next[disabled] {
        opacity: .3
    }

    .reel--prev:not([disabled]):hover,
    .reel--next:not([disabled]):hover {
        opacity: 1;
        transform: scale(1.25)
    }

    .reel--prev svg,
    .reel--next svg {
        width: .75rem;
        height: .75rem;
        margin: auto
    }

    .reel--scrollbar {
        position: relative;
        display: flex;
        width: 100%;
        height: .875rem;
        cursor: pointer
    }

    bws-reel:not(:defined) .reel--scrollbar {
        display: none
    }

    .reel--scrollbar[data-hidden=true] {
        display: none
    }

    .reel--track {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: .125rem;
        background-color: currentColor;
        opacity: .25
    }

    .reel--track:after {
        content: "";
        position: absolute;
        top: -0.5rem;
        right: 0;
        bottom: -0.5rem;
        left: 0;
        display: block
    }

    .reel--thumb {
        position: absolute;
        bottom: 0;
        width: 4rem;
        height: .125rem;
        background-color: #000;
        will-change: left;
        transition-property: opacity;
        transition-duration: 200ms;
        border-inline: .75rem solid #444;
        transition: border ease 200ms
    }

    .reel--thumb[data-track=start] {
        border-inline-start-width: 0
    }

    .reel--thumb[data-track=end] {
        border-inline-end-width: 0
    }

    .reel--thumb:after {
        content: "";
        position: absolute;
        top: -0.5rem;
        right: 0;
        bottom: -0.5rem;
        left: 0;
        display: block
    }
}

@layer views {
    .rich-text {
        max-width: var(--copy-max-width)
    }

    .rich-text>*+* {
        --stack-space: var(--space-xs)
    }
}

@layer views {
    .testimonial-card {
        position: relative;
        display: flex;
        flex-direction: column;
        color: var(--color-white);
        font-size: var(--text-md);
        border-radius: var(--radius-md);
        aspect-ratio: 4/5
    }

    .testimonial-card:hover .testimonial-card--icon {
        transform: translateX(0.5rem)
    }

    .testimonial-card--media {
        position: absolute;
        inset: 0;
        border-radius: var(--radius-md)
    }

    .testimonial-card--overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.6040616076) 0%, rgba(0, 0, 0, 0.0998599269) 33%, rgba(0, 0, 0, 0.1978991426) 67%, rgb(0, 0, 0) 100%)
    }

    .testimonial-card--header {
        display: flex;
        margin-bottom: auto;
        z-index: 3;
        padding: var(--space-xs);
        width: 100%;
        --repel-items: flex-start
    }

    .testimonial-card--footer {
        display: flex;
        margin-top: auto;
        z-index: 3;
        padding: var(--space-xs);
        padding-right: var(--space-md);
        line-height: var(--leading-sm)
    }

    .testimonial-card--logo {
        max-width: 8rem;
        max-height: 4rem
    }

    .testimonial-card--icon {
        width: 1.5rem;
        height: 1.5rem;
        position: absolute;
        bottom: var(--space-xs);
        right: var(--space-xs);
        transition: var(--icon-transition);
        color: var(--color-primary)
    }

    .testimonial-card--tag {
        color: var(--color-white);
        border: 1px solid var(--color-white);
        border-radius: var(--default-radius);
        padding: var(--space-3xs) var(--space-2xs);
        font-size: var(--text-xs);
        text-transform: uppercase
    }
}

@layer views {
    .bws-adminbar {
        --bws-adminbar-bg-color: black;
        --bws-adminbar-text-color: white;
        --bws-adminbar-padding-block: 0.5rem;
        --bws-adminbar-height: var(--root-adminbar-height);
        position: fixed;
        bottom: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        width: 100%;
        height: var(--bws-adminbar-height);
        padding-block: var(--bws-adminbar-padding-block);
        background-color: var(--bws-adminbar-bg-color);
        color: var(--bws-adminbar-text-color);
        font-size: .875rem
    }

    .bws-adminbar--wrap {
        --wrap-max-width: none;
        --wrap-padding-inline: 1rem;
        display: flex;
        gap: 2rem;
        justify-content: space-between
    }

    .bws-adminbar--tools {
        display: flex;
        gap: 2rem
    }

    .bws-adminbar--button {
        display: flex;
        align-items: center;
        gap: .5rem;
        background-color: rgba(0, 0, 0, 0);
        border: none;
        color: var(--bws-adminbar-text-color);
        cursor: pointer
    }

    .bws-adminbar--link {
        display: flex;
        align-items: center;
        gap: .5rem;
        text-decoration: none
    }
}

@layer views {
    .bws-share-popup {
        --grid-gap: 1rem
    }
}

.container {
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.cover-section {
  width: 100vw;
  position: relative;
  background: linear-gradient(90deg, #888 0%, #000 100%); /* Adjust as needed */
  overflow: hidden;
}

.cover--media {
  margin-top: 70px;
}

/* Add only this for fixed width on large screens */
@media (min-width: 1920px) {
  .cover--media {
    margin-left: auto;
    margin-right: auto;
    margin-top: 70px;
  }
}

@media (min-width: 1920px) {
  .marquee {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
  }
}

.hero-bg {
  background-image: url('/media/site/4930acef1c-1751450707/jonkoping-wall.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 500px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #fff;
  margin-top: 80px; /* Account for fixed header height */
}
.hero-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35); /* adjust for desired darkness */
  z-index: 1;
}
.hero-bg > * {
  position: relative;
  z-index: 2;
}
@media (max-width: 600px) {
  .hero-bg {
    height: 400px;
    margin-top: 60px; /* Smaller margin for mobile */
  }
}

/* Contact page specific styling */
[data-template="contact"] .main-content {
  padding-top: var(--space-md) !important; /* Reduced padding for contact page only */
}

@media (max-width: 600px) {
  .hero-bg {
    height: 400px;
    margin-top: 60px; /* Smaller margin for mobile */
  }
}

/* Improved caption layout */
.caption--content {
  max-width: 100% !important; /* Make text wider */
  padding-right: 0 !important; /* Remove right padding to use full width */
  flex: 1; /* Allow content to take available space */
}

.caption--media {
  flex-shrink: 0; /* Prevent media from shrinking */
  align-self: flex-start; /* Align media to top */
  margin-top: var(--space-xs); /* Add some spacing from text */
}

/* Improve caption entity layout - preserve original functionality */
.caption--entity {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
}

/* Normal layout (text left, image right) */
.caption--entity {
  flex-direction: column;
}

/* Reverse layout (image left, text right) */
.caption[data-layout-direction=inline-reverse] .caption--entity {
  flex-direction: column;
}

@media (min-width: 50em) {
  .caption--entity {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-md);
  }
  
  .caption--content {
    flex: 1.2; /* Further reduce text space from 1.5 to 1.2 */
  }
  
  .caption--media {
    flex: 1; /* Keep media at 1 */
    max-width: 50%; /* Increase from 45% to 50% for even larger images */
  }
  
 
  /* Reverse layout on desktop */
  .caption[data-layout-direction=inline-reverse] .caption--entity {
    flex-direction: row-reverse;
  }
}

@media (max-width: 600px) {
  .hero-bg {
    height: 400px;
    margin-top: 60px; /* Smaller margin for mobile */
  }
}