@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

@layer root {
    :root {
        interpolate-size: allow-keywords;

        color-scheme: light dark;

        --xen-blue:     #2873A6;
        --xen-orange:   #F89838;
        --xen-grey:     #636466;

        --font-size: 16px;
        
        --font-family: 'Roboto', sans-serif;
        --font-weight: 400;
        --font-style: normal;
        --font-variation-settings: "wdth" 100;
        --line-height: 1.5;

        --heading-font-scale: 0.3;
        --heading-font-family: 'Roboto Condensed', sans-serif;
        --heading-font-weight: 700;
        --heading-font-style: normal;
        --heading-font-variation-settings: "wdth" 75;
        --heading-line-height: 1.1;

        --flair-letter-spacing: 0.1em;
        --flair-font-weight: 400;

        --gap-xs: 0.5em;
        --gap-sm: 1em;
        --gap-md: calc(var(--gap-sm) * 2);
        --gap-lg: calc(var(--gap-sm) * 4);
        --gap-xl: calc(var(--gap-sm) * 6);

        --radius-sm: 0.25rem;
        --radius: 0.5rem;
        --radius-lg: 1rem;
        --radius-pill: 9rem;

        --logo-height: 3rem;
        --nav-height: calc(var(--logo-height) + (var(--gap-sm) * 2));

        --container-gutter: var(--gap-sm);
        --container-max:    100%;
        --text-max:         80ch;
        --sidebar-lane:     max(15%, 35ch);

        --transition:   color 0.25s ease,
                        background-color 0.25s ease,
                        border-color 0.25s ease,
                        border-width 0.25s ease,
                        box-shadow 0.25s ease,
                        height 0.25s ease,
                        translate 0.25s ease,
                        scale 0.25s ease,
                        opacity 0.25s ease,
                        stroke 0.25s ease,
                        d 0.25s ease;

        --dropdown-menu-transition:     height 0.15s ease,
                                        max-height 0.15s ease,
                                        opacity 0.15s ease,
                                        padding-block 0.15s ease,
                                        transform 0.15s ease;


        --white: hsl(from var(--xen-grey) h s calc(l + (l * 1.7)));
        --white-hover: hsl(from var(--xen-grey) h s calc(l + (l * 1.5)));
        --white-active: hsl(from var(--xen-grey) h s calc(l + (l * 1.3)));

        --primary: var(--xen-blue);
        --primary-hover: hsl(from var(--xen-blue) h s calc(l - (l * 0.1)));
        --primary-active: hsl(from var(--xen-blue) h s calc(l - (l * 0.2)));

        --secondary: var(--xen-orange);
        --secondary-hover: hsl(from var(--xen-orange) h s calc(l - (l * 0.1)));
        --secondary-active: hsl(from var(--xen-orange) h s calc(l - (l * 0.2)));

        --grey: var(--xen-grey);

        --black: hsl(from var(--xen-grey) h s calc(l - (l * 0.6)));
        --black-hover: hsl(from var(--xen-grey) h s calc(l - (l * 0.7)));
        --black-active: hsl(from var(--xen-grey) h s calc(l - (l * 0.8)));


        --background: light-dark(var(--white), var(--black));
        --background-hover: light-dark(var(--white-hover), var(--black-hover));
        --background-active: light-dark(var(--white-active), var(--black-active));

        --foreground: light-dark(var(--black), var(--white));
        --foreground-hover: light-dark(var(--black-hover), var(--white-hover));
        --foreground-active: light-dark(var(--black-active), var(--white-active));


        --shadow: 0 0.5rem 1rem rgb(from var(--black) r g b / 0.15);
        --shadow-hover: 0 0.5rem 2rem rgb(from var(--black) r g b / 0.25);
    }

    @media (min-width: 576px) {
        :root { --container-max: 540px; }
        .visible-xs { display: block; }
        .hidden-xs { display: none; }
    }

    @media (min-width: 768px) {
        :root { --container-max: 720px; }
        .visible-sm { display: block; }
        .hidden-sm { display: none; }
    }

    @media (min-width: 992px) {
        :root { --container-max: 960px; }
        .visible-md { display: block; }
        .hidden-md { display: none; }
    }

    @media (min-width: 1200px) {
        :root { --container-max: 1140px; }
        .visible-lg { display: block; }
        .hidden-lg { display: none; }
    }

    /* @media (min-width: 1400px) {
        :root { --container-max: 1320px; }
        .visible-xl { display: block; }
        .hidden-xl { display: none; }
    } */

    * {
        box-sizing: border-box;
        font-optical-sizing: auto;
        margin: unset;

        &:focus-visible {
            outline: 2px solid var(--foreground);
            outline-offset: 2px;
        }
    }

    html, body {
        background-color: var(--background);
        color: var(--foreground);

        font-size: var(--font-size);
        font-family: var(--font-family);
        font-weight: var(--font-weight);
        font-style: var(--font-style);
        font-variation-settings: var(--font-variation-settings);

        margin: unset;
        padding: unset;

        scrollbar-gutter: stable;
    }

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

    mark, .mark {
        display: inline-block;
        background-color: yellow;
        padding: 0.1em 0.2em;
        border-radius: 0.2em;
    }
}

@layer light-dark {
    @media (prefers-color-scheme: light) {
        body {
            color-scheme: light;
        }
    }
    @media (prefers-color-scheme: dark) {
        body {
            color-scheme: light;
        }
    }
    /* body {
        &[data-theme="light"] {
            color-scheme: light;
        }
        &[data-theme="dark"] {
            color-scheme: dark;
        }
    } */
}

@layer page-transitions {
    @view-transition {
        navigation: auto;
    }
}

@layer typography {
    @media(max-width: 991px) {
        :root {
            --heading-font-scale: 0.25;
        }
    }
    @media(max-width: 768px) {
        :root {
            --heading-font-scale: 0.2;
        }
    }
    .text-container {
        max-width: var(--text-max);
        margin-inline: auto;
    }
    h1, h2, h3, h4, h5, h6, .lead, .flair {
        font-family: var(--heading-font-family);
        font-weight: var(--font-weight);
        font-style: var(--heading-font-style);
        font-variation-settings: var(--heading-font-variation-settings) !important;

        text-wrap: pretty !important;

        line-height: var(--heading-line-height);

        &:is(h1) {
            font-weight: var(--heading-font-weight);
        }
        &:not(:last-child) {
            padding-block-end: 0.5em;
        }

        &:has(icon) {
            display: inline-flex;
            gap: 0.5ex;
        }

        &:has(icon) > *, &:has(icon) > * > * {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
    }

    hr {
        border: unset;
        box-shadow: unset;
        margin-block: var(--gap-md);
        height: 0;

        border-top: 1px solid rgb(from var(--primary) r g b / 0.25);
    }

    .call-to-action {
        h1, h2, h3, h4, h5, h6 {
            font-weight: var(--heading-font-weight);
        }
        .content {
            max-width: calc(var(--text-max) * 0.7);
            margin-inline: auto;
            & * {
                text-wrap: pretty !important;
            }
        }
    }

    
    .flair {
        font-size: 1.1em;
        text-transform: uppercase;
        font-family: var(--font-family);
        letter-spacing: var(--flair-letter-spacing);
        font-weight: var(--flair-font-weight);

        &.flair-taxonomy {
            font-size: 0.875rem;
        }

        & + ul {
            padding-block-start: 1em !important;
        }
    }

    section:not(.hero) p.lead {
        font-family: var(--font-family);
        font-weight: var(--font-weight);
        font-style: var(--font-style);
        font-variation-settings: var(--font-variation-settings);

        line-height: var(--line-height);
    }

    /* .lead, p, li {
        max-width: var(--text-max);
    } */

    p, ul, ol, li, cite, blockquote, pre, code {
        font-size: 1em;
        font-family: var(--font-family);
        font-weight: var(--font-weight);
        font-style: var(--font-style);
        font-variation-settings: var(--font-variation-settings);

        line-height: var(--line-height);

        text-wrap: pretty !important;

        &:not(li):not(:last-child) {
            padding-block-end: 1em;
        }
        &:is(li):not(:last-child) {
            padding-block-end: 0.5em;
        }
    }

    h1, .h1 { font-size: calc(1rem + (1em * var(--heading-font-scale) * 7)); }
    h2, .h2 { font-size: calc(1rem + (1em * var(--heading-font-scale) * 5)); }
    h3, .h3 { font-size: calc(1rem + (1em * var(--heading-font-scale) * 4)); }
    h4, .h4,
    section.hero p.lead { font-size: calc(1rem + (1em * var(--heading-font-scale) * 3)); }
    h5, .h5 { font-size: calc(1rem + (1em * var(--heading-font-scale) * 2)); }
    h6, .h6,
    section:not(.hero) p.lead { font-size: calc(1rem + (1em * var(--heading-font-scale) * 1)); }

    ul, ol {
        &.list-unstyled {
            list-style: none;
            padding: unset;
            margin: unset;

            display: flex;
            flex-direction: column;
            gap: calc(var(--gap-sm) / 2);
            & > li {
                padding: unset;
                margin: unset;
            }
        }
    }

    blockquote {
        margin-block: var(--gap-sm);
        q {
            position: relative;
            display: grid;
            grid-template-columns: 0 1fr 0;
            grid-template-rows: auto;

            &::before, &::after {
                font-family: serif;
                font-weight: bold;
                font-size: 2rem;
                line-height: 0;
                color: rgb(from var(--xen-grey) r g b / 0.25);

                content: '';
                display: block;
                position: absolute;

                pointer-events: none;
            }
            &::before {
                translate: -100% 0;
                grid-row: 1;
                grid-column: 1;
                content: '“';
                align-self: start;
                justify-self: start;
            }
            &::after {
                translate: 100% 0;
                /* grid-row: -1; */
                grid-column: -1;
                content: '”';
                align-self: end;
                justify-self: end;
            }
            & > * {
                font-size: 1.2rem;
                grid-column: 1 / -1;

                &:first-child {
                    grid-row: 1;
                }
                /* &:last-child {
                    grid-row: -1;
                } */
                &:first-child:last-child {
                    grid-row: 1;
                }
            }
            & > *, & > *:not(:last-child) {
                margin-block: unset;
                padding-block: unset;
            }
        }
        cite {
            margin-top: var(--gap-sm);
            display: block;
            font-size: 0.875rem;
            text-align: right;
        }
    }
}

@layer list-styles {
    ul, ol {
        &:not(.list-unstyled) {
            list-style-position: outside;
            padding-inline-start: 2rem;

            & li {
                &::marker {
                    /* color: var(--primary); */
                }
            }
        }
    }
    .chevron-list {
        list-style: "» ";
    }
    .arrow-list {
        list-style: "→ ";
    }
}
@layer media {
    figure {
        padding: var(--gap-xs);
        background-color: rgb(from var(--foreground) r g b / 0.05);
        border-radius: var(--radius-lg);
        corner-shape: squircle;
        
        & span.relative {
            display: block;
            position: relative;

            & cite {
                position: absolute;
                inset: auto 0 0 0;
                padding: var(--gap-xs);
                font-size: 0.75rem;
                text-align: right;

                color: white;
                mix-blend-mode: luminosity;
                filter: grayscale(1);
                opacity: 1;
            }
        }

        & img {
            border-radius: calc(var(--radius-lg) - var(--gap-xs));
            corner-shape: squircle;
        }
        & figcaption {
            padding-block: var(--gap-sm);
            font-size: 0.875rem;
            line-height: 1.25rem;
            text-align: center;
            color: rgb(from var(--foreground) r g b / 0.75);
        }
    }
    iframe, img, video, picture {
        max-width: 100%;
        height: auto;

        corner-shape: squircle;
        border-radius: var(--radius-lg);
    }
}

@layer icons {
    * > icon {
        position: relative;
        font-size: inherit;
        line-height: inherit;
        width: 1em;
        height: 1em;
        display: inline-block;

        color: inherit;

        & > svg {
            width: 100%;
            height: 100%;

            & *[stroke*="#"],
            & *[style*="stroke"] {
                stroke: var(--primary) !important;
                stroke: currentColor !important;
            }
        }

        & > [data-progress] {
            position: absolute;
            inset: 0;
        }
    }
}

@layer links {
    a, .btn-link {
        position: relative;
        display: inline-flex;
        gap: 0.25rem;
        align-items: center;
        
        color: var(--primary);
        text-decoration: none;
        transition: var(--transition);

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

            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-decoration-color: var(--primary-hover);
            text-decoration-skip-ink: auto;
            text-underline-offset: 5px;
        }

        &:active, &.active {
            color: var(--primary-active);
            
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-decoration-color: var(--secondary);
            text-decoration-skip-ink: auto;
            text-underline-offset: 4px;
        }
    }
    .btn-link {
        appearance: none;
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        font: inherit;
        color: inherit;
        cursor: pointer;
        box-shadow: none;
        text-shadow: none;
    }
}

@layer buttons {
    a.btn, button.btn {
        display: inline-flex;
        font-size: 1rem;
    }
    
    .button-row {
        justify-content: inherit !important;
        padding-block-start: var(--gap-md);
    }
    aside .button-row {
        padding-block-start: unset;
        padding-block-end: var(--gap-md);
    }
    .btn {
        display: inline-flex;
        gap: .5em;
        align-items: center;

        -webkit-appearance: none;
        appearance: none;
        border: unset;

        position: relative;

        font-family: var(--heading-font-family);
        font-weight: var(--heading-font-weight);
        font-style: var(--heading-font-style);
        font-variation-settings: var(--heading-font-variation-settings) !important;

        padding: 1ex 2.5ex;

        &:not(.btn-link) {
            text-decoration: none;
        }

        &:has(> icon) {
            icon {
                width: 1.3em;
                height: 1.3em;
            }
        }
        &:has(> icon:last-child) {
            padding-inline-end: 1.35ex;
        }
        &:has(> icon:first-child) {
            padding-inline-start: 1.35ex;
        }

        border-radius: var(--radius-pill);
        background-color: var(--foreground);
        background-image: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 0.05));
        color: var(--background);

        box-shadow: var(--shadow);

        &.btn-lg {
            font-size: 1.25rem;
        }


        &[disabled] {
            opacity: 0.5;
            pointer-events: none;
        }
    }
    .btn-primary {
        background-color: var(--primary);
        color: var(--white);

        &:hover, &:focus {
            background-color: var(--primary-hover);
        }
        &:active {
            background-color: var(--primary-active);
        }
    }
    .btn-secondary {
        background-color: var(--secondary);
        color: var(--white);
        &:hover, &:focus {
            background-color: var(--secondary-hover);
        }
        &:active {
            background-color: var(--secondary-active);
        }
    }
}

@layer inputs {
    :root {
        --success: #91a22f;
        --danger: #d44444;
    }
    form {
        display: grid;
        grid-auto-flow: row;
        gap: var(--gap-md);

        & .field {
            display: grid;
            grid-auto-flow: row;
            gap: var(--gap-xs);
        }
    }
    label:has( > input) {
        display: flex;
        gap: var(--gap-xs);
    }
    input, textarea, select {

        display: inline-flex;
        gap: .5em;
        align-items: center;

        
        border: 1px solid rgb(from var(--foreground) r g b / 0.25);
        border-radius: var(--radius-sm);

        position: relative;

        font-size: var(--font-size);
        font-family: var(--font-family);
        font-weight: var(--font-weight);
        font-style: var(--font-style);
        font-variation-settings: var(--font-variation-settings) !important;
        line-height: var(--line-height);

        padding: 1ex 1.5ex;

        &:not[type="checkbox"], &:not[type="radio"] {
            -webkit-appearance: none;
            appearance: none;
        }
        &[type="checkbox"], &[type="radio"] {
            padding: unset;
        }

        /* secure */
        &[data-action="address-lookup"] {
            position: absolute;
            left: -9999px;
            top: auto !important;
            width: 1px !important;
            height: 1px !important;
            overflow: hidden !important;
        }

        &:is(select[multiple]) {
            padding: 1ex;
            appearance: none;
            -webkit-appearance: none;

            & option {
                padding: 0.5ex 1ex;
                border-radius: var(--radius-sm);
                
                font-size: var(--font-size);
                font-family: var(--font-family);
                font-weight: var(--font-weight);
                font-style: var(--font-style);
                font-variation-settings: var(--font-variation-settings) !important;
                line-height: var(--line-height);

                background-color: transparent;

                &:checked {
                    background: var(--primary-active) !important;
                    background-image: linear-gradient(0deg, var(--primary-active) 0%, var(--primary-active) 100%) !important;
                    /* Prevents Chrome from reverting text back to black/windowtext when out of focus */
                    color: var(--white) !important;
                    -webkit-text-fill-color: var(--white) !important;
                    &:hover {
                        background: var(--primary-active) !important;
                        background-image: linear-gradient(0deg, var(--primary-active) 0%, var(--primary-active) 100%) !important;
                        /* Prevents Chrome from reverting text back to black/windowtext when out of focus */
                        color: var(--white) !important;
                        -webkit-text-fill-color: var(--white) !important;
                    }
                }
                &:hover {
                    background: rgb(from var(--primary) r g b / 0.15) !important;
                }
            }
        }
    }
    .has-error, .has-error * {
        color: var(--danger);
        border-color: rgb(from var(--danger) r g b / 0.5);
    }
    .alert {
        padding: var(--gap-md);
        border-radius: var(--radius);
        background-color: rgb(from var(--danger) r g b / 0.1);
        border: 1px solid rgb(from var(--danger) r g b / 0.1);
        color: var(--danger);
        margin-block-end: var(--gap-md);

        &.alert-success {
            background-color: rgb(from var(--success) r g b / 0.15);
            border: 1px solid rgb(from var(--success) r g b / 0.15);
            color: var(--success);
        }

        & > * {
            margin-block: unset;
        }
    }
}

@layer layout_grid {
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    nav, section, footer > .sitemap, footer > .company {
        position: relative;
        display: grid;
        grid-template-columns:
            minmax(var(--container-gutter), 1fr)

            /* left sidebar - split into two halves so article can start halfway */
            [content-left-start aside-left-start] minmax(0, calc(var(--sidebar-lane) / 2))
            [article-start] minmax(0, calc(var(--sidebar-lane) / 2))

            /* main content area (capped so article-start..article-end totals max 80ch) */
            [aside-left-end content-right-start] minmax(0, calc(min(var(--text-max), var(--container-max)) - var(--sidebar-lane)))

            /* right sidebar - split into two halves so article can end halfway */
            [content-left-end aside-right-start] minmax(0, calc(var(--sidebar-lane) / 2))
            [article-end] minmax(0, calc(var(--sidebar-lane) / 2))

            [content-right-end aside-right-end] minmax(var(--container-gutter), 1fr);
        grid-auto-rows: auto;
        gap: var(--gap-lg);

        & > *, &.full-width > * {
            grid-column: content-left-start / content-right-end;
        }

        &.homepage > main {
            display: grid;
            grid-template-columns: subgrid;
            grid-auto-flow: row;
            grid-column: content-left-start / content-right-end;

            & > *:not(.carousel-navigation, .columns, hr.horizontal-rule) {
                grid-column: content-left-start / content-left-end;
            }
            & > *:is(.carousel-navigation) {
                grid-column: aside-right-start / aside-right-end;
            }
            & > *:is(.carousel, .carousel-pagination,.columns, hr.horizontal-rule) {
                grid-column: content-left-start / content-right-end;
            }
        }

        &:has(> aside) > main {
            grid-column: content-left-start / content-left-end;
        }

        &:not(:has(> aside)) > main {
            grid-column: article-start / article-end;
        }

        & > aside {
            grid-column: aside-right-start / aside-right-end;
        }

        & > .aside-left {
            grid-column: aside-left-start / aside-left-end;
        }
        & > .aside-right {
            grid-column: aside-right-start / aside-right-end;
        }
    }

    section:has(> aside)::after {
        content: '';
        grid-column: aside-right-start / aside-right-start;
        grid-row: 1 / -1;
        inset: 0 auto 0 auto;
        width: 1px;
        justify-self: start;
        align-self: stretch;
        position: absolute;
        background: rgb(from var(--primary) r g b / 0.25);
        pointer-events: none;

        translate: calc(var(--gap-md) * -1) 0;
    }

    section:has(> .aside-left) {
        & > .aside-left {
            grid-column: aside-left-start / aside-left-end;
        }
        & > .content {
            grid-column: content-left-start / content-left-end;
        }
    }
    section:has(> .aside-right) {
        & > .aside-right {
            grid-column: aside-right-start / aside-right-end;
        }
        & > .content {
            grid-column: content-right-start / content-right-end;
        }
    }
    section:has(> .aside-left, > .aside-right) {
        & > .content {
            grid-column: content-right-start / content-left-end;
        }
    }

    @media (max-width: 991px) {
        nav, section, footer > .sitemap, footer > .company {
            grid-template-columns:
                minmax(0, 1fr)
                [content-left-start content-right-start] minmax(0, var(--container-max))
                [content-left-end content-right-end] minmax(0, 1fr);
            grid-template-rows: auto;
            gap: var(--gap-md);
        }

        section:has(> aside) > main,
        section:has(> aside) > aside {
            grid-column: content-left-start / content-right-end !important;
        }

        section > aside {
            padding-block-start: var(--gap-lg);
            grid-row: 2;
        }

        section:has(> aside)::after {
            content: none;
        }
    }

    .hero {
        & > .background {
            grid-column: 1 / -1;

            position: absolute;
            inset: 0;
            max-height: 100%;
            overflow: hidden;
            z-index: 0;
            
            & img, & video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: unset !important;
            }
        }
        & > .content {
            grid-column: content-left-start / content-right-end;
            z-index: 1;

            /* max-width: var(--text-max); */
        }

        &.hero-clipped {
            .background {
                &::after {
                    height: var(--nav-height);
                    content: '';
                    position: absolute;
                    inset: auto 0 0 0;

                    background: linear-gradient(to top, rgb(from var(--primary) r g b / 1) 15%, rgb(from var(--primary) r g b / 0) 100%);
                }
            }
        }
    }
}

@layer grid {
    .grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-rows: auto;
        gap: 1rem;
    }
}

@layer flex {
    .flex {
        display: flex;
        flex-direction: row;
        gap: var(--gap-md);

        &.flex-row      { flex-direction: row; }
        &.flex-column   { flex-direction: column; }
        &.flex-wrap     { flex-wrap: wrap; row-gap: var(--gap-md); }
        &.flex-nowrap   { flex-wrap: nowrap; row-gap: 0; }

        & .col {
            flex: 1 1 auto;
        }

        & .col-auto {
            flex: 0 0 auto;
        }
    }
    aside .flex {
        width: 100%;
    }

    .gap-0 {
        gap: 0 !important;
    }
    .gap-1 {
        gap: var(--gap-sm) !important;
    }
    .gap-2 {
        gap: var(--gap-md) !important;
    }
    .gap-3 {
        gap: var(--gap-lg) !important;
    }
}

@layer columns {
    .columns {
        container-type: inline-size;

        margin-block: var(--gap-md);

        display: grid;
        grid-auto-flow: dense;
        grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
        grid-auto-rows: auto;
        gap: var(--gap-md);

        & .column {
            grid-row: span 1;
            display: flex;
            flex-direction: column;
            & > a:has(.card) {
                flex: 1 1 auto;
            }
        }

        & .column-one   { grid-column: span 1; }
        & .column-two   { grid-column: span 2; }
        & .column-three { grid-column: span 3; }
        & .column-four  { grid-column: span 4; }

        &:first-child {
            margin-block-start: 0;
        }
        &:last-child {
            margin-block-end: 0;
        }
    }

    section:not(.full-width) .columns {
        grid-template-columns: repeat(auto-fit, minmax(min(40ch, 100%), 1fr));
    }

    @media(max-width: 1199px) {
        .columns {
            grid-template-columns: repeat(auto-fit, minmax(min(40ch, 100%), 1fr));
        }
    }
    @media(max-width: 991px) {
        .columns {
            grid-template-columns: repeat(auto-fit, minmax(min(30ch, 100%), 1fr));
        }
    }
    

    .columns.articles {
        grid-auto-flow: unset;
        grid-template-columns: repeat(3, 1fr);
    }
    @media(max-width: 991px) {
        .columns.articles {
            grid-template-columns: 1fr;
        }
    }

    .columns.case-studies {
        grid-auto-flow: unset;
        grid-template-columns: repeat(2, 1fr);
    }
    @media(max-width: 991px) {
        .columns.case-studies {
            grid-template-columns: 1fr;
        }
    }
}

@layer alignment {
    .text-left      { text-align: left; }
    .text-center    { text-align: center; }
    .text-right     { text-align: right; }
    .text-justify   { text-align: justify; }

    .align-start    { align-items: flex-start; align-self: start; }
    .align-center   { align-items: center; align-self: center; }
    .align-end      { align-items: flex-end; align-self: end; }

    .justify-start  { justify-content: flex-start; justify-self: flex-start; text-align: left; }
    .justify-center { justify-content: center; justify-self: center; text-align: center; }
    .justify-end    { justify-content: flex-end; justify-self: flex-end; text-align: right; }
    .justify-between { justify-content: space-between; justify-self: stretch; }

    [class*="justify-"] * {
        justify-self: inherit;
        width: auto;
    }
}

@layer logo {
    a.brand {
        display: inline-block;
        width: auto;
        height: var(--logo-height);
        max-height: var(--logo-height);

        color: var(--foreground) !important;

        &:hover, &:focus {
            color: var(--foreground-hover);
        }
        &:active {
            color: var(--foreground-active);
        }
        
        & svg {
            width: auto;
            height: 100%;
        }
    }
}

@layer nav {
    nav {
        color-scheme: dark;

        position: fixed;
        width: 100%;
        top: 0;
        z-index: 1000;

        color: var(--white);

        justify-content: space-between;
        padding-block: var(--gap-md) !important;

        transition: var(--transition);

        & .grid {
            row-gap: var(--gap-md) !important;
        }
        
        &:not(.opaque), &.transparent {
        
            &::after {
                content: '';
                position: absolute;
                inset: 0;
                -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 1) 25%, rgb(255 255 255 / 0) 100%);
                mask-image: linear-gradient(to bottom, rgb(0 0 0 / 1) 25%, rgb(255 255 255 / 0) 100%);
                z-index: -1;
                backdrop-filter: blur(1rem) brightness(0.75);
            }
        }

        &.opaque, &:has(#dropdown-menu.open) {
            color-scheme: dark;
            background-color: var(--primary);
            color: var(--foreground);

            box-shadow: var(--shadow-hover);
        }
        
        & ul {
            gap: var(--gap-md);

            @media(max-width: 1199px) {
                gap: var(--gap-sm);
            }
            
            & li {
                
                &.external-link {
                    order: 999 !important;
                    border-left: 1px solid var(--foreground);
                    padding-inline-start: var(--gap-md);

                    @media(max-width: 1199px) {
                        padding-inline-start: var(--gap-sm);
                    }
                }
                @media(max-width: 991px) {
                    &.external-link {
                        border-left: unset;
                        padding-inline-start: unset;

                        border-top: 1px solid var(--foreground);
                        padding-block-start: var(--gap-sm);
                    }
                }
            }
        }

        & a, & .btn-link {
            display: inline-flex;
            gap: 0.25em;
            align-items: center;

            color: var(--foreground-active);

            &:hover, &:focus {
                color: var(--foreground-hover);
                text-decoration-color: var(--foreground-hover);
            }
            &:active, &.active {
                color: var(--foreground);
                text-decoration-color: var(--foreground);
            }

            &.active {
                text-decoration-color: var(--secondary);
            }

            & .text-limit {
                max-width: 20ch;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            & .caret {
                width: .75em;
                height: .75em;

                & icon {
                    width: 100%;
                    height: 100%;
                    display: flex;

                    & svg [stroke*="#"]{
                        stroke: currentColor;
                    }
                }
            }

            & icon {
                width: 1.3em;
                height: 1.3em;
                & svg {
                    width: 100%;
                    height: 100%;
                    & *[stroke*="#"],
                    & *[style*="stroke"] {
                       stroke: currentColor;
                    }
                }
            }
        }
    }
    @media(max-width: 991px) {
        :root {
            --logo-height: 2.5rem;
        }
        nav .nav-overflow {
            grid-column: 1 / span 2;
            grid-row: 2;
            transition: var(--transition);
            padding-block: var(--fade-height);
        }
        nav .nav-overflow:not(:has(#hamburger-menu.open)) {
            height: 0;
            display: none;
        }
        nav .nav-overflow:has(#hamburger-menu.open) {
            height: auto;
            max-height: 75vh;
            overflow-y: auto;
            isolation: isolate;


            position: relative !important;

            --fade-height: var(--gap-md);
            margin-block: calc(-1 * var(--fade-height));

            -webkit-mask-image: linear-gradient(to bottom, transparent, black calc(var(--fade-height)), black, black, black calc(100% - var(--fade-height)), transparent);
            mask-image: linear-gradient(to bottom, transparent, black calc(var(--fade-height)), black, black, black calc(100% - var(--fade-height)), transparent);
        }
    }
}

@layer hamburger-menu {
    [data-role="hamburger-menu"] {
        display: block;
        width: 2rem;
        height: 2rem;

        align-self: end;
        justify-self: end;

        & icon {
            position: relative;
            width: inherit;
            height: inherit;

            & svg {
                fill: none;
                stroke-width: 2;
                stroke: var(--foreground);

                & path {
                    will-change: d;
                    transition: var(--transition);
                    transform-origin: 50% 50%;
                }
            }
        }
    }
    
    /* Hamburger icon animation fallback for iOS/Safari (no CSS d property support) */
    [data-action="open"] icon svg path:nth-child(1) { transform: rotate(0deg) translateY(0); opacity: 1; }
    [data-action="open"] icon svg path:nth-child(2) { opacity: 1; }
    [data-action="open"] icon svg path:nth-child(3) { transform: rotate(0deg) translateY(0); opacity: 1; }

    [data-action="close"] icon svg path:nth-child(1) { transform: rotate(45deg) translateY(28.5%) scaleX(1.2); }
    [data-action="close"] icon svg path:nth-child(2) { opacity: 0; }
    [data-action="close"] icon svg path:nth-child(3) { transform: rotate(-45deg) translateY(-28.5%) scaleX(1.2); }

    /* Original d property for browsers that support it */
    @supports (d: path('M0,0')) {
        [data-action="open"] icon svg path:nth-child(1) { d: path('M4,12 24,12 44,12'); transform: none; }
        [data-action="open"] icon svg path:nth-child(2) { d: path('M4,24 24,24 44,24'); opacity: 1; }
        [data-action="open"] icon svg path:nth-child(3) { d: path('M4,36 24,36 44,36'); transform: none; }
        [data-action="close"] icon svg path:nth-child(1) { d: path('M4,4 24,24 44,4'); transform: none; }
        [data-action="close"] icon svg path:nth-child(2) { d: path('M24,24 24,24 24,24'); opacity: 0;}
        [data-action="close"] icon svg path:nth-child(3) { d: path('M4,44 24,24 44,44'); transform: none; }
    }


    @media(min-width: 992px) {
        [data-role="hamburger-menu"] {
            display: none;
        }
        #hamburger-menu {
            display: flex;
        }
    }

    @media(max-width: 991px) {
        #hamburger-menu {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            gap: 1rem;

            position: relative;
            width: 100%;
        }
        #hamburger-menu.open {
            display: flex;
        }
        #hamburger-menu.close {
            display: none;
        }
    }
}

@layer dropdown-menus {
    /* Mobile dropdown menus are not [popover] to ensure inline flow */
    .dropdown {
        position: relative;
        align-items: center;

        & > ul.dropdown-menu {
            position: absolute;
            top: calc(100% + 1rem);

            padding: var(--gap-sm);
            margin: unset;
            border-radius: var(--radius);
            background: var(--primary-active);
            color: var(--background);
            box-shadow: var(--shadow-hover);
            
            width: 100%;
            min-width: max-content;

            text-align: left;

            

            &:not(.open) {
                visibility: hidden;
                /* display: none; */
                display: flex;
                flex-direction: column;
                gap: calc(var(--gap-sm) / 2);

                overflow: hidden;
                max-height: 0;
                padding-block: 0;
                opacity: 0;
                transition: var(--dropdown-menu-transition);
            }
            &.open {
                visibility: visible;
                display: flex;
                flex-direction: column;
                gap: calc(var(--gap-sm) / 2);

                opacity: 1;
                padding-block: var(--gap-sm);
                max-height: max-content;
                transition: var(--dropdown-menu-transition);
            }
        }

        & .caret icon {
            transform-style: preserve-3d;
            transform: rotate3d(1, 0, 0, 0deg);
            transition: var(--dropdown-menu-transition);
        }
    }
    .dropdown:has(ul.open) {
        & .caret icon {
            transform: rotate3d(1, 0, 0, 180deg);
            transition: var(--dropdown-menu-transition);
        }
        /* & ul {
            display: flex;
            flex-direction: column;
            gap: calc(var(--gap-sm) / 2);
            
        } */
    }

    @media(max-width: 991px) {
        .dropdown {
            width: 100% !important;
            text-align: left;
        }
        .dropdown > ul.dropdown-menu {
            position: relative;
            top: unset;
            width: 100%;
            min-width: 100%;

            &.open {
                margin-top: var(--gap-sm) !important;
                box-shadow: unset !important;
            }
        }
    }
}

@layer section {
    section {
        padding-block: var(--gap-lg);
        background-color: var(--background);
        color: var(--foreground);

        &.hero {
            color-scheme: dark;
            background-color: var(--primary);
            height: auto;
            min-height: 65vh;

            padding-block-start: calc(var(--nav-height) + var(--gap-lg));

            & mark {
                position: absolute;
                inset: auto auto 0 0;
                z-index: 99999;

                &:nth-of-type(2) {
                    inset: auto auto 0 100px;
                }
                &:nth-of-type(3) {
                    inset: auto auto 0 100px;
                }
            }
        }

        &.page-title {
            color-scheme: dark;
            background-color: var(--primary);
            height: auto;

            padding-block-start: calc(var(--nav-height) + var(--gap-lg));
        }
    }

    section.call-to-action {
        padding-block: unset;
        color-scheme: dark;
        background-color: var(--primary);
        color: var(--foreground);

        & .content {
            grid-column: article-start / article-end;
            padding-block: var(--gap-lg);
        }

        @media(max-width: 991px) {
            & .content {
                grid-column: content-left-start / content-right-end;
            }
        }
    }
}

@layer cards {
    a:has( > .card) {
        container-type: inline-size;
        text-decoration: unset;

        display: block;
        width: 100%;

        color: var(--foreground);

        margin-block: var(--gap-xs);

        &:first-child {
            margin-block-start: 0;
        }
        &:last-child {
            margin-block-end: 0;
        }

        
    }
    aside a:has( > .card) {
        & + a:has( > .card) {
            margin-block-start: var(--gap-md);
        }
    }
    .columns a:has( > .card) {
        margin-block: unset;
    }

    .card {
        display: grid;
        position: relative;
        isolation: isolate;

        grid-template-columns: 1fr;
        grid-template-rows: auto;

        width: 100%;
        height: 100%;

        overflow: clip;

        & .background {
            width: 100%;
            height: 100%;
            & > * {
                width: 100%;
                height: 100%;
                border-radius: unset;
                corner-shape: unset;
            }
        }

        & .content {
            width: 100%;
            height: 100%;
        }
    }
}

@layer article_card {
    a:has(.news-article-card) {
        container-type: inline-size;
        text-decoration: unset;

        &:hover, &:focus {
            & .news-article-card {
                border-color: var(--secondary);
            }
        }
    }

    .news-article-card {
        border: 2px solid var(--primary);
        border-radius: var(--radius-lg);
        corner-shape: squircle;

        display: grid;
        grid-template-columns: 1fr 2fr;

        & .background {
            /* aspect-ratio: 1 / 1; */
            grid-row: 1 / -1;
            & > * {
                object-fit: cover;
                width: 100%;
                height: 100%;
            }
        }
        & .content {
            padding: var(--gap-sm) !important;
        }
    }

    @container (max-width: 60ch) {
        .news-article-card {
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr;
            & .background {
                aspect-ratio: 4 / 1;
                grid-row: 1 / 2;
                grid-column: 1 / -1;
            }
        }
    }
}


@layer case_study_card {
    a:has(.case-study-card) {
        container-type: inline-size;
        text-decoration: unset;

        /* height: 100%; */

        &:hover, &:focus {
            & .case-study-card {
                border-color: var(--secondary);

                & .text {
                    color: var(--secondary);
                }
            }
        }
    }

    .case-study-card {
        display: grid;
        height: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;

        &.align-start {
            align-items: start;
            
            & .background {
                grid-column: 1 / -1;
                grid-row: 2 / span 3;

                -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 15%, rgba(0,0,0,1) 65%);
                mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 15%, rgba(0,0,0,1) 65%);
            }
            & .content {
                grid-column: 1 / -1;
                grid-row: 1 / span 2;
            }
        }
        &.align-end {
            align-items: end;

            & .background {
                grid-column: 1 / -1;
                grid-row: 1 / span 3;

                -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 15%, rgba(0,0,0,1) 65%);
                mask-image: linear-gradient(to top, rgba(0,0,0,0) 15%, rgba(0,0,0,1) 65%);
            }
            & .content {
                grid-column: 1 / -1;
                grid-row: 3 / span 2;
            }
        }

        
        padding: unset !important;

        border: 2px solid var(--primary);
        border-radius: var(--radius-lg);
        corner-shape: squircle;


        & .background {
            inset: 0;
            z-index: -1;

            aspect-ratio: 3 / 1;

            & > * {
                object-fit: cover;
                width: 100%;
                height: 100%;
            }
        }

        & .content {
            padding: var(--gap-sm) !important;
            width: 100%;

            justify-content: inherit;
            align-items: inherit;

            display: grid;
            grid-template-columns: [logo-left] 20% [content-start] 1fr [content-end] 20% [logo-right];
            grid-template-rows: auto;
            gap: var(--gap-sm);

            .logo-left {
                grid-column: logo-left / content-start;
            }
            .logo-right {
                grid-column: content-end / logo-right;
            }
            .logo {
                grid-row: 1;
                align-self: inherit;
                justify-self: start;
                border-radius: unset !important;
                & img {
                    width: 100%;
                    height: auto;
                    border-radius: unset !important;
                }
            }
            .text {
                & .flair {
                    color: var(--foreground);
                }
                grid-column: content-start / content-end;
                grid-row: 1;
                color: var(--primary);
            }
            .logo-left + .text {
                grid-column: content-start / logo-right;
                align-self: end;
            }
            .logo-right + .text {
                grid-column: logo-left / content-end;
                align-self: start;
            }
        }

        &.align-start .text {
            align-items: start !important;
            align-content: start !important;
            align-self: start !important;
        }
        &.align-end .text {
            align-items: end !important;
            align-content: end !important;
            align-self: end !important;
        }

        /* Fix for tall logos, like Capitol Corridor */
        &.align-end .logo {
            margin-top: -100%;
        }
        &.align-start .logo {
            margin-bottom: -100%;
        }
    }

    @container (max-width: 80ch) {
        .case-study-card .background {
            aspect-ratio: unset;
        }
        .case-study-card .content {
            aspect-ratio: unset;
        }
    }
    @container (max-width: 40ch) {
        .case-study-card .background {
            aspect-ratio: unset;
        }
        .case-study-card .content {
            aspect-ratio: unset;
        }
    }
}

@layer tag_card {
    /* a:has(.taxonomy-card) {
        container-type: inline-size;
        text-decoration: unset;
    } */
    .all-tags-card {
        container-type: inline-size;

        display: block;
        height: auto;

        border: 2px solid var(--primary);
        border-radius: var(--radius-lg);
        corner-shape: squircle;
        
        margin-block: var(--gap-sm);

        & > .content {
            padding: var(--gap-sm);
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
            gap: var(--gap-sm);
        }
    }
    .tag-card {
        display: flex;
        flex-direction: column;
        gap: var(--gap-xs);
        height: auto;
        
        & .title {
            display: flex;
            flex-direction: row;
            gap: var(--gap-sm);
            align-items: start;
            justify-content: space-between;

            & .count {
                color: var(--xen-grey);
                background-color: rgb(from var(--xen-grey) r g b / 0.05);
                border: 1px solid rgb(from var(--xen-grey) r g b / 0.1);
                border-radius: var(--radius-lg);
                padding: .35ch 1ch;
                display: flex;
                align-items: center;
                text-align: center;
                font-size: 0.875rem;
                white-space: nowrap;
            }
        }

        & .content {
            padding-block-end: var(--gap-sm);
        }
    }
}

@layer taxonomy_card {
    a:has(.taxonomy-card) {
        container-type: inline-size;
        text-decoration: unset;

        &:hover, &:focus {
            & .taxonomy-card {
                border-color: var(--secondary);
            }
        }
    }
    .columns:has(.taxonomy-card) {
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
    .taxonomy-card {
        border: 2px solid var(--primary);
        border-radius: var(--radius-lg);
        corner-shape: squircle;

        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: auto;

        & > .content {
            grid-column: span 1;
            grid-row: 1;
            padding: var(--gap-sm) !important;

            display: flex;
            flex-direction: column;
            gap: var(--gap-sm);

            & .controls {
                flex: 1 0 auto;
                align-content: end;
                
                & .btn {
                    place-self: start;
                }
            }
        }
        & .preview {
            isolation: isolate;
            grid-column: span 2;
            grid-row: 1;
            padding: var(--gap-sm) !important;

            position: relative;

            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: 100%;
            gap: var(--gap-xs);
        }
    }

    @container (max-width: 120ch) {
        .taxonomy-card {
            grid-template-columns: 1fr;
            grid-template-rows: auto;

            & .preview {
                grid-column: span 1;
                grid-row: 2;
            }
        }
    }
    @container (max-width: 80ch) {
        .taxonomy-card {
            grid-template-columns: 1fr;
            grid-template-rows: auto;

            & .preview {
                grid-column: span 1;
                grid-row: 2;

                grid-template-columns: 1fr;
                grid-template-rows: repeat(2, 1fr);
            }
        }
    }
}
@layer page_card {
    a:has(.page-card) {
        container-type: inline-size;
        text-decoration: unset;

        --border-w: 3px;
        --border-hover-w: 6px;

        & .page-card {
            box-shadow: 0 calc(-1 * var(--border-w)) 0 0 var(--primary);

            color: var(--primary);

            transition: var(--transition);

            & *[stroke*="#"],
            & *[style*="stroke"] {
                stroke: var(--primary) !important;
            }
        }
        &:hover, &:focus {
            & .page-card {
                box-shadow: 0 calc(-1 * var(--border-hover-w)) 0 0 var(--secondary);

                color: var(--secondary);

                & *[stroke*="#"],
                & *[style*="stroke"] {
                    stroke: var(--secondary) !important;
                }
            }
        }
    }
    .card.page-card {
        box-shadow: 0 calc(-1 * var(--border-w)) 0 0 var(--primary);      
        translate: 0 var(--border-w);

        & h2, & h3, & h4, & h5, & h6 {
            display: flex;
            gap: 0.5ch;

            & icon {
                width: 1.3em;
                height: 1.3em;

                & svg {
                    width: 100%;
                    height: 100%;
                    & *[stroke*="#"] {
                        stroke: currentColor;
                    }
                }
            }
        }
        & .content {
            display: flex;
            flex-direction: column;
            gap: var(--gap-sm);
            padding-block-start: var(--gap-sm);

            & * {
                margin: unset;
                padding: unset;
            }
        }
    }
}

@layer product_card {
    a:has(.product-card) {
        container-type: inline-size;
        text-decoration: unset;

        & .product-card {
            transition: var(--transition);
        }
        &:hover, &:focus {
            & .product-card {
                border-color: var(--secondary);
            }
        }
        @container (max-width: 50ch) {
            &:hover, &:focus {
                & .product-card {
                    border-color: var(--secondary);
                }
            }
        }
    }

    .product-card {
        container-type: inline-size;


        border: 2px solid var(--primary);

        border-radius: var(--radius-lg);
        corner-shape: squircle;

        height: auto;
        overflow: clip;

        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
        gap: var(--gap-sm);

        & .content {
            grid-area: 1 / 1 / 1 / 1;
            padding: var(--gap-sm);

            display: flex;
            flex-direction: column;
            height: auto;

            & .images {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                gap: var(--gap-sm);

                & * {
                    width: auto;
                    max-height: 5rem;
                }
            }
        }

        &:not(:has(> .background)) {
            & .content {
                grid-column: 1 / -1;
            }
        }
        & .background {
            grid-area: 2 / 2 / 1 / 2;
            z-index: -1;
            border-radius: unset;
            width: 100%;
            height: 100%;

            clip-path: url(#product-card-arc-right);
            /* overflow: clip; */

            & img {
                object-fit: cover;
                width: 100%;
                height: 100%;

                border-radius: unset;
            }
        }
    }

    @container (max-width: 50ch) {
        .product-card {
            grid-template-columns: auto;
            grid-template-rows: repeat(2, auto);

            & .content {
                grid-column: 1 / -1;
                grid-row: 1;
            }
            & .background {
                grid-column: 1 / -1;
                grid-row: 2;
                clip-path: url(#product-card-arc-bottom);
            }
        }
    }
}


@layer aside {
    aside {
        display: flex;
        flex-direction: column;
        background-color: var(--background);
        color: var(--foreground);
    }
}

@layer cloud-mask {
    .cloud-mask {
        display: grid;
        grid-auto-rows: auto;
        translate: 0 -1px;

        &.aside-left {
            grid-template-columns: 4fr 2fr;
            
            & > * {
                display: flex;
                justify-self: center;
                max-height: 100%;
                grid-column: 1;

                padding: 0 15% 15% 15%;
            }
        }
        &.aside-right {
            grid-template-columns: 2fr 4fr;

            & > * {
                display: flex;
                justify-self: center;
                max-height: 100%;
                grid-column: 2;

                padding: 0 15% 15% 15%;
            }
        }

        & mark {
            padding: 2rem;
            background-color: rgba(0,0,0,.25);
            color: var(--white);
            align-self: stretch;
            justify-self: center;
        }
    }

    section {
        & .aside-left, & .aside-right {
            color-scheme: light;
            background-color: var(--primary);
            width: 100%;
            position: absolute;
            
            aspect-ratio: 478.6238403 / 247.6780396; /* SVG viewbox size */

            -webkit-mask-image: url('../svg/streamriver-cloud-clippath-left.svg');
            -webkit-mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-image: url('../svg/streamriver-cloud-clippath-left.svg');
            mask-size: contain;
            mask-repeat: no-repeat;
        }
        & .aside-right {
            -webkit-mask-image: url('../svg/streamriver-cloud-clippath-right.svg');
            mask-image: url('../svg/streamriver-cloud-clippath-right.svg');
        }

        &.call-to-action {
            & .aside-left, & .aside-right {
                background-color: var(--background);
            }
        }
    }
    @media(max-width: 991px) {
        section {
            & .aside-left, & .aside-right {
                order: -1;
                position: static !important;
                grid-column: content-left-start / content-right-end !important;
                width: 100% !important;
            }
        }

        section:not(.call-to-action) > .cloud-mask:first-child {
            margin-block-start: calc(-1 * var(--gap-lg));
        }

        section.call-to-action > .cloud-mask:first-child + .content {
            padding-block-start: 0;
        }
    }
}

@layer footer {
    footer {
        color-scheme: dark;
        background-color: var(--background);
        color: var(--foreground);

        & .flair {
            font-size: 1rem;
        }
        
        & > * {
            padding-block: var(--gap-md);
        }

        & .sitemap {
            color-scheme: light;
            background-color: var(--background);
            color: var(--foreground);
        }

        & .sitemap,
        & .company {
            padding-block: var(--gap-md);

            & .flex {
                font-size: 0.875rem;
                align-items: baseline;

                & .brand {
                    translate: 0 0.4rem;
                }
            }
        }

        & a {
            color: var(--foreground);
            &:hover, &:focus {
                color: var(--foreground-hover);
            }
            &:active {
                color: var(--foreground-active);
            }
        }
    }
}






@layer carousel {
    .carousel {
        display: flex;
        flex-direction: row;
        gap: var(--gap-md);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;

        align-items: stretch;
        align-content: stretch;

        padding-block: var(--gap-md);

        -ms-overflow-style: none;
        &::-webkit-scrollbar {
            display: none;
        }

        & .slide {
            scroll-snap-align: start;
            flex: 0 0 auto;
            width: 100%;

            display: flex;
            align-items: stretch;
            align-content: stretch;
        }
    }

    .carousel-navigation {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: end;
        gap: var(--gap-xs);


        [data-progress],
        [id^="timer-"][data-progress] {
            --progress: attr(data-progress type(<number>), 100);
            --ring-thickness: 1px;

            width: 100%;
            height: 100%;
            border-radius: 50%;
            scale: 1.25;

            /* conic-gradient shows the filled arc (from top), transparent otherwise */
            background: conic-gradient(from 0deg at 50% 50%, hsl(from var(--background) h s l / 0.5) calc(var(--progress) * 1%), rgba(0,0,0,0) 0deg);

            -webkit-mask-image: radial-gradient(farthest-side, #0000 calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)));
                        
            mask-image: radial-gradient(farthest-side, #0000 calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)));
        }
    }
    .carousel-pagination {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--gap-xs);

        min-height: 1rem;

        & .pagination-dot {
            -webkit-appearance: none;
            appearance: none;
            display: block;

            border: none;
            padding: unset;
            
            width: .75rem;
            height: .75rem;
            border-radius: var(--radius-pill);
            background: var(--xen-grey);

            transition: var(--transition);

            &:hover, &:focus {
                background: var(--primary-hover);
            }
            &:active {
                background: var(--secondary);
            }

            &.active {
                height: 1rem;
                width: 1.5rem;
                background: var(--secondary);
            }
        }
    }

    @media(min-width: 992px) {
        .carousel {
            & .slide {
                width: 50%;
                width: calc(50% - (var(--gap-md) / 2));
            }
        }
    }
}



@layer pagination {
    .pagination {
        padding-block: var(--gap-md);

        & ul {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            grid-auto-flow: column;
            gap: var(--gap-sm);

            align-items: center;

            & li:first-child {
                justify-content: end;
            }
            & li:last-child {
                justify-content: start;
            }

            & li {
                margin: unset;
                padding: unset;
                display: flex;
            }

            & .page-numbers {
                align-self: stretch;
                justify-content: center;

                & .btn {
                    width: calc((1rem * var(--line-height)) + 2ex);
                    height: calc((1rem * var(--line-height)) + 2ex);
                    justify-content: center;
                    align-items: center;
                    padding: 1ex;
                }
            }
        }

        @media(max-width: 767px) {
            & ul {
                grid-template-columns: 1fr;
                grid-template-rows: 1fr auto 1fr;
                grid-auto-flow: row;
                gap: var(--gap-sm);

                & li:first-child, & li:last-child {
                    justify-content: center;
                }
            }
        }
    }
}