@layer import;
@import url('./reset.css') layer(import);
@import url('./bootstrap-utilities.min.css') layer(import);
@import url('./bootstrap-grid.min.css') layer(import);

:root {
    --unit: 4px;

    --white: #f3f8f2;
    --black: #0f201b;

    --grey-100: hsl(from var(--white) h s calc(l * 0.95));
    --grey-200: hsl(from var(--white) h s calc(l * 0.9));
    --grey-300: hsl(from var(--white) h s calc(l * 0.85));
    --grey-400: hsl(from var(--white) h s calc(l * 0.8));
    --grey-500: hsl(from var(--white) h s calc(l * 0.8));

    --accent: #006D4E;
    --accent-hover: hsl(from var(--accent) h s calc(l * 0.9));
    --accent-active: hsl(from var(--accent) h s calc(l * 0.8));

    --warning: #f5d02a;
    --warning-hover: hsl(from var(--warning) h s calc(l * 0.9));
    --warning-active: hsl(from var(--warning) h s calc(l * 0.8));

    --danger: #d03e43;
    --danger-hover: hsl(from var(--danger) h s calc(l * 0.8));
    --danger-active: hsl(from var(--danger) h s calc(l * 0.8));

    --font-size: calc(var(--unit) * 4);
    --heading-scale: 1.618;
    
    --font-family: "Inter", sans-serif;
    --font-weight: 400;
    --line-height: 1.6em;

    --heading-font-family: "aller", sans-serif;
    --heading-font-weight: 700;
    --heading-line-height: 1.3em;

    --padding: calc(var(--unit) * 12);
    --header-padding: calc(var(--unit) * 4);

    --logo-height: calc(var(--unit) * 8);

    --radius-xs: calc(var(--unit));
    --radius-md: calc(var(--unit) * 2);
    --radius-lg: calc(var(--unit) * 3);

    --transition: 0.15s all ease-in-out;
    
    --shadow: 0 calc(var(--unit)) calc(var(--unit) * 2) 0 rgba(0, 0, 0, 0.1);
    --shadow-dk: 0 calc(var(--unit) * 2) calc(var(--unit) * 3) 0 rgba(0, 0, 0, 0.2);
}
@media(max-width: 991px) {
    :root {
        --padding: calc(var(--unit) * 10);
        --header-padding: calc(var(--unit) * 6);
    }
}

:focus-visible {
    border-radius: var(--radius-xs);
}

html, body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    overflow-x: clip;
}
mark {
    background-color: var(--warning);
    color: var(--black);
    border-radius: 3px;
    padding-block: 0.25em;
    padding-inline: 0.5em;
}

@layer page-transitions {
    @view-transition {
        navigation: auto;
    }
    html {
        view-transition-name: root;
    }
    @media (prefers-reduced-motion: no-preference) {
        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation-duration: 0.25s;
            animation-timing-function: ease;
        }
    }
}

@layer animation-interpolation {
    /* Allow animations and transitions to animate from auto to a height */
    @media (prefers-reduced-motion: no-preference) {
        html {
            interpolate-size: allow-keywords;
        }
    }
}

@layer rows {
    .container {
        padding: unset;
        padding-inline: calc(var(--unit) * 6);
        &.container-text {
            width: min(80ch, 100%);
            margin-inline: auto;
            & * {
                text-align: center;
                align-items: center;
                justify-content: center;
            }
        }
        .row {
            margin: unset;
            margin-inline: calc(var(--unit) * 4 * -1);
            row-gap: calc(var(--unit) * 4);
            & [class^='col'] {
                padding: unset;
                padding-inline: calc(var(--unit) * 4);
            }
        }
    }
    .container-fluid {
        padding-inline: 0;
        & > .row {
            margin: unset;
            & > [class^='col'] {
                padding: unset;
            }
        }
    }
    .row {
        &.gutter-small {
            margin-inline: calc(var(--unit) * 2 * -1);
            row-gap: calc(var(--unit) * 2);
            & > [class^='col'] {
                padding-inline: calc(var(--unit) * 2);
            }
        }
        &.gutter-large {
            margin-inline: calc(var(--unit) * 8 * -1);
            row-gap: calc(var(--unit) * 8);
            & > [class^='col'] {
                padding-inline: calc(var(--unit) * 8);
            }
        }
        &.gutter-largest {
            margin-inline: calc(var(--unit) * 12 * -1);
            row-gap: calc(var(--unit) * 12);
            & > [class^='col'] {
                padding-inline: calc(var(--unit) * 12);
            }
        }
    }
    .row > [class*='col'] > :last-child {
        margin-bottom: 0 !important;
    }
    .row + .row {
        margin-top: calc(var(--padding) / 2) !important;
    }
    .row-buttons {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: calc(var(--unit) * 4);
    }
}

@layer typography {
    h1, .h1, h2, .h2,
    h3, .h3, h4, .h4,
    h5, .h5, h6, .h6 {
        color: currentColor;
        font-family: var(--heading-font-family);
        font-weight: var(--heading-font-weight);
        line-height: var(--heading-line-height);
        text-wrap: balance !important;
    }
    h1, .h1 { font-size: calc(var(--unit) * 12); }
    h2, .h2 { font-size: calc(var(--unit) * 9); }
    h3, .h3 { font-size: calc(var(--unit) * 8); }
    h4, .h4 { font-size: calc(var(--unit) * 7); }
    h5, .h5 { font-size: calc(var(--unit) * 6); }
    h6, .h6, p.lead { font-size: calc(var(--unit) * 5); }

    p, ul, ol, li, address {
        font-size: 1rem;
        font-weight: var(--font-weight);
        line-height: var(--line-height);
        margin-bottom: 1rem;
        text-wrap: pretty !important;

        color: rgb(from currentColor r g b / 0.75);
    }
    address {
        color: currentColor !important;
    }

    @media(max-width: 991px) {
        h1, .h1 { font-size: calc(var(--unit) * 8); }
        h2, .h2 { font-size: calc(var(--unit) * 7); }
        h3, .h3 { font-size: calc(var(--unit) * 6); }
        h4, .h4 { font-size: calc(var(--unit) * 5.5); }
        h5, .h5 { font-size: calc(var(--unit) * 5); }
        h6, .h6, p.lead { font-size: calc(var(--unit) * 4.5); }
    }
    @media(max-width: 767px) {
        h1, .h1 { font-size: calc(var(--unit) * 7.5); }
        h2, .h2 { font-size: calc(var(--unit) * 6.5); }
    }

    .form-control {
        font-size: 1rem !important;
        padding: .8em 1.25em !important;
        border-radius: var(--radius-xs) !important;
        &.input-sm {
            border-radius: var(--radius-xs) !important;
            font-size: calc(var(--unit) * 3) !important;
        }
        &.input-lg {
            border-radius: var(--radius-xs) !important;
            font-size: calc(var(--unit) * 5) !important;
        }
        &.input-pill {
            border-radius: 99em !important;
            padding-inline: 1.5em !important;
        }
    }
    .btn {
        font-size: 1rem !important;
        padding: .8em 1.25em !important;
        border-radius: var(--radius-md) !important;

        &.btn-sm {
            border-radius: var(--radius-xs) !important;
            font-size: calc(var(--unit) * 3) !important;
        }
        &.btn-lg {
            border-radius: var(--radius-lg) !important;
            font-size: calc(var(--unit) * 5) !important;
        }
        &.btn-pill {
            border-radius: 99em !important;
            padding-inline: 1.5em !important;
        }
    }
}

@layer links {
    a, button, input {
        transition: var(--transition);
    }
    a:not(.btn) {
        color: var(--accent);
        text-decoration-color: currentColor;
        text-decoration-line: underline;
        text-underline-offset: 0.75ex;
        text-decoration-thickness: 0.1ex;

        &:not(:hover):not(:focus-visible):not(.current-page) {
            text-decoration: unset;
        }
    }
}

@layer buttons {
    .btn:not(.btn-link) {
        text-decoration: none;
        
        /* font-family: var(--heading-font-family); */
        font-weight: var(--heading-font-weight);


        --bg: var(--white);
        --fg: var(--black);

        --bg-hover: var(--grey-100);
        --fg-hover: var(--black);

        --bg-active: var(--grey-100);
        --fg-active: var(--black);

        background: var(--bg);
        color: var(--fg);
        stroke: var(--fg);

        &:hover, &:focus-visible {
            background: var(--bg-hover) !important;
            color: var(--fg-hover) !important;
            stroke: var(--fg-hover) !important;
        }

        &:active, &.active {
            background: var(--bg-active) !important;
            color: var(--fg-active) !important;
            stroke: var(--fg-active) !important;
        }
        

        &.btn-primary, &.btn-success, &.btn-info {
            --bg: var(--accent);
            --fg: var(--white);
            --bg-hover: var(--accent-hover);
            --fg-hover: var(--white);
            --bg-active: var(--accent-hover);
            --fg-active: var(--white);
        }
        &.btn-warning {
            --bg: var(--warning);
            --fg: var(--black);
            --bg-hover: var(--warning-hover);
            --fg-hover: var(--black);
            --bg-active: var(--warning-active);
            --fg-active: var(--black);
        }
        &.btn-danger {
            --bg: var(--danger);
            --fg: var(--white);
            --bg-hover: var(--danger-hover);
            --fg-hover: var(--white);
            --bg-active: var(--danger-active);
            --fg-active: var(--white);
        }
    }

    .btn {
        display: inline-block;
        border: none;
        box-shadow: var(--shadow);
    }
    .btn:not([disabled]):not(.btn-close):hover,
    .btn:not([disabled]):not(.btn-close):active {
        box-shadow: var(--shadow-dk);
        transform: translate3d(0, -0.15em, 0);
    }
    

    .btn.btn-link {
        background: none !important;
        box-shadow: none !important;
        transform: none !important;
        color: var(--accent);
        text-decoration: unset;


        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .btn.btn-link:hover,
    .btn.btn-link:focus {
        background: none !important;
        box-shadow: none !important;
        transform: none !important;
        text-decoration-color: currentColor;
        text-decoration-line: underline;
        text-decoration-thickness: 0.1em;
        text-underline-offset: 0.1em;
    }
}

@layer icons {
    icon {
        display: block;
        font-size: inherit;
        width: 1lh;
        height: 1lh;
        & svg {
            display: block;
            width: inherit;
            height: inherit;
            line-height: 0;

            & * {
                fill: none;
                stroke: currentColor;
                stroke-width: 2.5;
                stroke-linecap: round;
                stroke-linejoin: round;
                vector-effect: non-scaling-stroke;
                transition: var(--transition);
            }
        }
    }

    icon.solid-fill svg * {
        fill: currentColor;
        stroke: none;
        stroke-width: unset;
        stroke-linecap: unset;
        stroke-linejoin: unset;
        transition: var(--transition);
    }

    a > icon {
        line-height: inherit;
        margin-right: 0.5em;
        display: block;
        float: left;
    }
    .btn > icon {
        margin-right: 0.5em;
        display: block;
        float: left;
        line-height: inherit;
        width: 1lh;
        height: 1lh;
    }
    .btn > icon svg {  
        width: inherit;
        height: inherit;
    }
}

@layer header {
    a:has( > svg) {
        color: var(--white) !important;
        display: inline-block;
        & > svg {
            color: currentColor;
            width: auto;
            height: var(--logo-height);
            object-fit: contain;
            transition: var(--transition);
            display: flex;

            transition: var(--transition);

            &[fill] {
                fill: currentColor;
                transition: inherit;
            }
            &[opacity] {
                fill: currentColor;
                opacity: 0.75;
                transition: inherit;
            }
        }
        &:hover, &:focus-visible {
            color: var(--warning);
            & > svg {
                color: var(--warning);
            }
        }
    }
    header {
        padding-block: var(--header-padding);
        background: transparent;
        color: var(--white);
        position: fixed;
        width: 100%;
        top: 0;

        z-index: 999;
        isolation: isolate;

        & .row {
            row-gap: unset !important;
        }

        & a:not(.btn) {
            color: var(--white) !important;
            &:hover, &:focus-visible {
                color: var(--warning) !important;
            }
        }

        &.enable-transitions {
            transition: var(--transition);
        }
        &:not(.beyond-hero) {
            background: linear-gradient(to bottom, rgb(0 0 0 / 0.25) 25%, rgba(0 0 0 / 0));
        }
        &.beyond-hero, &:has( nav.open) {
            background: var(--accent);
            color: var(--white);
            padding-block: var(--header-padding);
            box-shadow: var(--shadow-dk);
        }
    }
    @media(min-width: 992px) {
        header {
            padding-block-start: calc(var(--header-padding) * 3);
        }
    }
}

@layer main-menu {
    nav {
        & ul {
            margin: 0 !important;
            display: flex;
            flex-direction: row;
            gap: 1em;
            justify-content: flex-end;
            align-items: center;
            & li  {
                flex: 0 1 auto;
                margin: 0;

                & a:not(.btn) {
                    display: block;
                    padding: 0.5ex 1ex;
                    text-align: center;

                    color: var(--white) !important;
                    text-decoration: unset !important;

                    &:hover, &:focus, &:active {
                        text-decoration: underline !important;
                    }

                    &.current-page {
                        text-decoration: underline !important;
                    }
                }
            }
        }
    }

    @media(max-width: 991px) {
        nav {
            width: 100%;
            position: static;
            margin-top: unset;
            top: 100%;

            height: 0;

            --header-height: calc(var(--logo-height) + calc(var(--header-padding) * 2));
            max-height: calc(100vh - var(--header-height));
        }
        nav .container,
        nav .container-fluid,
        nav .row,
        nav [class*='col'] {
            max-width: unset;
            padding: 0;
            margin: 0;
            width: 100%;
        }
        /** DROPDOWN NAV **/
        nav {
            transform-origin: 50% 0%;
            transform-style: preserve-3d;
            transition: var(--transition);
        }
        nav > * {
            transition: var(--transition);
        }
        nav.open {
            height: auto;
            transform: scale3d(1, 1, 1);
        }
        nav.open > * {
            opacity: 1;
        }
        nav.close {
            transform: scale3d(1, 0, 1);
        }
        nav.close > * {
            opacity: 0;
        }
    }
}

@layer hamburger {
    [data-role="hamburger-menu"] {
        display: block;
        float: right;
        font-size: var(--logo-height);
        width: 1em;
        height: 1em;
    }
    [data-role="hamburger-menu"] icon {
        position: relative;
        width: inherit;
        height: inherit;
    }
    [data-role="hamburger-menu"] icon svg {
        position: absolute;
    }
    [data-role="hamburger-menu"] icon svg path {
        will-change: d;
        transition: var(--transition);
    }
    /* Hamburger icon animation fallback for iOS/Safari (no CSS d property support) */
    [data-action="open"] icon svg path,
    [data-action="close"] icon svg path {
        transform-origin: 50% 50%;
    }
    [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="open"]:hover icon svg path:nth-child(1) { transform: rotate(0deg) translateY(-5%) scaleX(0.8); }
    [data-action="open"]:hover icon svg path:nth-child(2) { opacity: 1; }
    [data-action="open"]:hover icon svg path:nth-child(3) { transform: rotate(0deg) translateY(5%) scaleX(0.8); }

    [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); }

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

    /* 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="open"]:hover icon svg path:nth-child(1) { d: path('M4,10 24,10 44,10'); transform: none; }
        [data-action="open"]:hover icon svg path:nth-child(2) { d: path('M8,24 24,24 40,24'); opacity: 1; }
        [data-action="open"]:hover icon svg path:nth-child(3) { d: path('M4,38 24,38 44,38'); 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; }

        [data-action="close"]:hover icon svg path:nth-child(1) { d: path('M8,8 24,24 40,8'); transform: none; }
        [data-action="close"]:hover icon svg path:nth-child(2) { d: path('M24,24 24,24 24,24'); opacity: 0;}
        [data-action="close"]:hover icon svg path:nth-child(3) { d: path('M8,40 24,24 40,40'); transform: none; }
    }
}

@layer social-menu {
    .social-menu {
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }
    .social-menu li {
        font-size: 1.5rem;
        margin: 0;
    }

    .social-menu-inline {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1em;
    }
}

@layer background {
    .background {
        position: absolute;
        background-color: var(--black);

        z-index: -1;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        width: 102%;
        height: 102%;

        & img, & video {
            object-fit: cover;
            object-position: center center;
            height: 100%;
        }

        &::after {
            content: '';
            display: block;
            position: absolute;
            inset: 0;

            background: black;
            opacity: .25;
        }

    }
}

@layer hero {
    .hero {
        color: var(--white);
        background: var(--accent);
        height: 65svh;
        text-align: center;

        & *:not(.btn) {
            color: var(--white);
        }

        & .lead {
            margin-inline: auto;
            width: min(70ch, 100%);
        }
    }
    .hero-lg {
        height: 90svh;
    }
}

@layer sections {
    section {
        isolation: isolate;
        overflow: clip;
        position: relative;
        padding-block: var(--padding);
        background: var(--white);
        color: var(--black);

        &:nth-of-type(even) {
            background: var(--grey-100);
        }

        &.accent-inverse {
            background: var(--black);
            color: var(--white);
        }
        &.accent-primary {
            background: var(--accent);
            color: var(--white);
        }
        &.accent-warning {
            background: var(--warning);
            color: var(--black);
        }
    }

    .page-title {
        padding-block-start: calc((var(--header-padding) * 2) + var(--logo-height) + var(--padding));
    }

    .section-split {
        position: relative;
        padding-block: 0;

        @media(min-width: 992px) {
            display: grid;
            grid-template-areas: 1 / 1;

            &:nth-of-type(odd) {
                & .container-fluid > .row > .col:first-child {
                    order: 0;
                }
                & .container > .row > .col:first-child {
                    order: 0;
                }
            }
            &:nth-of-type(even) {
                & .container-fluid > .row > .col:first-child {
                    order: 1;
                }
                & .container > .row > .col:first-child {
                    order: 1;
                }
            }

            & .container,
            & .container-fluid {
                grid-area: 1 / 1;
            }
            & .container-fluid {
                & .row, & [class*='col'] {
                    height: 100%;
                }
            }

            & .container-fluid {
                & img {
                    object-fit: cover;
                    aspect-ratio: 5 / 4;
                }
                & iframe {
                    object-fit: cover;
                    aspect-ratio: 4 / 3;
                }
            }
        }
        @media(max-width: 991px) {
            & .row [class*='col']:empty {
                display: none;
            }

            & .container-fluid {
                & img, & iframe {
                    object-fit: cover;
                    aspect-ratio: 16 / 9;
                }
            }
        }

        & .container,
        & .container > .row {
            height: 100%;
            position: relative;
            align-items: center;
            justify-content: center;
        }

        & .container > .row > .col {
            padding-block: var(--padding);
        }
    }
}

@layer statistics {
    .statistics {
        display: flex;
        flex-direction: row;

        align-items: center;
        justify-content: center;
        
        column-gap: calc(var(--unit) * 12);
        row-gap: calc(var(--unit) * 8);

        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

        & > li {
            flex: 1 0 0%;
            text-align: center;

            display: flex;
            flex-direction: column;
            gap: calc(var(--unit) * 2);

            align-items: center;
            justify-content: center;

            & * {
                margin: unset;
            }
            & .h1, .h2, .h3, .h4, .h5, .h6 {
                color: var(--white);
            }
            & icon {
                font-size: 3rem;
                width: 1em;
                height: 1em;
            }
        }
    }
    @media(max-width: 991px) {
        .statistics {
           & > li {
                flex: 1 1 auto;
            }
        }
    }
}

@layer timeline {
    ol.timeline {
        list-style: none;
        padding: unset;
        margin: unset;
        display: flex;
        flex-direction: column;
        gap: unset;

        padding-block-start: var(--padding);

        &::before {
            content: '';
            display: block;
            position: absolute;
            inset: 50% auto -50% 50%;
            transform: translateX(-50%) translateY(-50%);

            width: 2px;
            height: 150%;
            
            background: repeating-linear-gradient(to bottom, var(--accent) 0, var(--accent) 1rem, transparent 1rem, transparent 2rem);

            mask: linear-gradient(to top, transparent 15%, black 30%, black 70%, transparent 85%) 0 0;
        }

        & > li {
            position: relative;
            text-wrap: balance !important;
            padding-block-end: calc(var(--unit) * 8);
            padding-inline: calc(var(--unit) * 8);
            margin: unset;

            display: flex;
            flex-direction: column !important;
            gap: calc(var(--unit) * 4);

            & > .date {
                font-family: var(--heading-font-family);
                font-weight: var(--heading-font-weight);
                line-height: var(--heading-line-height);
                font-size: calc(var(--unit) * 6);
                color: var(--accent-active) !important;
                
                margin-top: -0.5rem;

                &::after {
                    content: '';
                    display: block;
                    position: absolute;
                    inset: 0 auto auto 0;
                    transform: translateX(-50%);

                    width: .75em;
                    height: .75em;

                    border-radius: 99rem;
                    background: var(--accent);
                }
                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    inset: 0 auto 0 0;
                    transform: translateX(-50%);

                    width: 2px;
                    height: 100%;
                    
                    background: var(--accent);
                    background: repeating-linear-gradient(to bottom, var(--accent) 0, var(--accent-active) 1rem, var(--accent) 2rem);
                }
            }
            &:nth-last-child(1) {
                &> .date::before {
                    content: none !important;
                }
            }
        }
        
    }
    @media(min-width: 992px) {
        ol.timeline {
            & > li {
                width: 50%;
                &:nth-child(odd) {
                    flex-direction: row;
                    text-align: left;
                    translate: 100% 0%;
                }
                &:nth-child(even) {
                    flex-direction: row-reverse;
                    text-align: right;
                    translate: 0% 0%;

                    & > .date {
                        &::after {
                            inset: 0 0 auto auto;
                            transform: translateX(50%);
                        }
                        &::before {
                            inset: 0 0 0 auto;
                            transform: translateX(50%);
                        }
                    }
                }
            }
        }
    }
    @media(max-width: 991px) {
        ol.timeline {
            &::before {
                inset: 50% auto -50% auto;
                transform: translateX(calc(var(--unit) * 2)) translateY(-50%);

                /* transform: translateX(calc(var(--unit) * 2)); */
            }
            & > li {
                padding-inline-start: calc(var(--unit) * 8);
                padding-inline-end: 0;

                & > .date {
                    &::before {
                        inset: 0 auto auto auto;
                        transform: translateX(calc(var(--unit) * -6));
                    }
                    &::after {
                        inset: 0 auto auto auto;
                        transform: translateX(calc(var(--unit) * -8));
                    }
                }
            }
        }
    }

    ol.timeline::before,
    ol.timeline > li > .date::before {
        animation: scrollTexture 1s linear infinite;
    }
    @keyframes scrollTexture {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 0 2rem;
        }
    }
}


@layer cards {
    .card {
        border-radius: var(--radius-md);
        background: var(--white);
        color: var(--black);
        box-shadow: var(--shadow);

        & .card-header {
            font-family: var(--heading-font-family);
            font-weight: var(--heading-font-weight);
            line-height: var(--heading-line-height);
            font-size: calc(var(--unit) * 6);
            margin-bottom: calc(var(--unit) * 4);
        }
        & .card-content {
            display: flex;
            flex-direction: column;
            gap: calc(var(--unit) * 4);
            & .card-body,
            & .card-footer {
                padding: calc(var(--unit) * 4);
            }
        }
    }
}


@layer forms {
    .form {
        padding: var(--padding);
        border-radius: var(--radius-md);
        background: var(--accent-hover);

        & .form-group {
            margin-bottom: calc(var(--unit) * 6);
            display: flex;
            flex-direction: column;
            gap: calc(var(--unit) * 2);
        }

        & button, & input[type="submit"] {
            display: flex;
            max-width: fit-content;
            place-self: end;
        }
    }

    .form-label {
        display: flex;
        justify-content: space-between;
        text-box: cap alphabetic trim-both;
    }
    .help-block {
        display: block;
        font-style: italic;
        font-size: .85rem;
        margin-top: 0.5rem;
    }
    .optional {
        font-weight: 300;
        color: currentColor;
        opacity: .35;
    }
    .form-control {
        -webkit-appearance: none;
        appearance: none;
        text-decoration: none;
        border: 1px solid var(--grey-200);
        background: var(--white);
        color: var(--black);
    }

    input[readonly] {
        color: currentColor;
        cursor: text;
    }
    input::placeholder {
        color: var(--grey-300);
        font-style: italic;
        opacity: 1; /* Ensures consistent visibility across browsers */
    }


    button[disabled],
    button.btn[disabled],
    input[disabled] {
        pointer-events: none;
        background: var(--grey-400) !important;
        cursor: not-allowed;
    }
    input[disabled],
    input[readonly] {
        border: 2px solid var(--grey-300);
        background: var(--grey-400);
    }


    :focus-visible {
        outline: 2px solid var(--black);
        outline-offset: 4px;
        box-shadow: 0 0 0 2px var(--white);
    }


    /** ERROR STATES **/
    /* .has-success .form-label, */
    /* .has-success ::placeholder {
        color: var(--success);
    }
    .has-success .form-control {
        color: var(--success);
        border-color: var(--success);
        background: var(--success-100);
    }
    .has-success .form-control:focus,
    .has-success .form-control:active {
        border-color: var(--success-900);
    } */
    /* .has-warning .form-label, */
    /* .has-warning ::placeholder {
        color: var(--warning);
    }
    .has-warning .form-control {
        color: var(--warning);
        border-color: var(--warning);
        background: var(--warning-100);
    }
    .has-warning .form-control:focus,
    .has-warning .form-control:active {
        border-color: var(--warning-900);
    } */
    /* .has-error .form-label, */
    .has-error ::placeholder,
    .has-error .help-block {
        color: var(--danger);
    }
    .has-error .form-control {
        color: var(--danger);
        border-color: var(--danger);
    }
    .has-error .form-control:focus,
    .has-error .form-control:active {
        border-color: var(--danger);
    }
}












@layer waypoints {
    .waypoint {
        position: absolute;
        top: 0;
        width: 100%;
        height: 1px;
        transform: translateY( calc( -1 * (var(--logo-height) + (var(--header-padding) * 3)) ) );
    }
    @media(max-width: 991px) {
        /** NON-STICKY HEADER **/
        .waypoint {
            transform: translateY( 0% );
        }
    }
    a.waypoint-link {
        position: absolute;
        transform: translateX(-100%);
        color: currentColor !important;
        text-decoration: none;
        font-size: inherit;
        opacity: .25;

        display: none !important;
        pointer-events: none !important;
    }
    a.waypoint-link:hover,
    a.waypoint-link:focus {
        opacity: .75;
    }
    .waypoint-header:hover a.waypoint-link {
        display: inline !important;
        pointer-events: all !important;
    }
}




























@layer footer {
    footer {
        background: var(--black);
        padding-block: var(--padding);
        color: var(--grey-200);
        a:has( > svg) {
            color: var(--white) !important;
            display: inline-block;
            & > svg {
                height: calc(var(--logo-height) * 2);
            }
        }
    }
    footer a {
        color: var(--white) !important;
        &:hover, &:focus-visible {
            color: var(--warning) !important;
        }
        &:not(:hover):not(:focus-visible):not(.current-page) {
            text-decoration: unset;
        }
    }
    footer p,
    footer li {
        font-size: .85rem;
        line-height: var(--line-height);
    }
    footer ul {
        row-gap: calc(var(--unit) * 2);
    }
    footer li {
        margin: 0;
        color: var(--white);
    }
    .copyright, .credit {
        font-size: .75rem;
        line-height: 1em;
        display: flex;
        flex-direction: row;
        gap: 0.5em;
        opacity: .75;
        align-items: anchor-center;
        align-items: center;
    }
    .copyright a, .credit a {
        color: var(--white);
    }
    .credit a {
        display: flex;
        flex-direction: row;
        gap: 0.4em;
        text-decoration: none;
        align-items: anchor-center;
        align-items: center;
    }
    .credit icon {
        margin-right: 0em;
        font-size: 1.3em;
    }
    .credit icon svg * {
        fill: none;
        stroke-width: 1;
    }
}



@layer circular-graphic {
    svg#circular-process {
        --time: 5;

        width: 100%;
        height: 100%;
        vector-effect: non-scaling-stroke;

        & * {
            transform-origin: 50% 50%;
        }
        & mask#Mask .dynamic {
            animation: rotate calc(var(--time) * 0.5s) linear infinite;
        }
        & g#Steps {
            & .step {
                & .fill-green {
                    animation-name: step-bubble;
                    animation-duration: calc(var(--time) * 1s);
                    animation-timing-function: ease-in-out;
                    animation-iteration-count: infinite;

                    transform-origin: 50% 50% !important;
                }
                &.step-1 .fill-green { animation-delay: calc(var(--time) * -1s); }
                &.step-2 .fill-green { animation-delay: calc(var(--time) * -1.75s); }
                &.step-3 .fill-green { animation-delay: calc(var(--time) * -1.5s); }
                &.step-4 .fill-green { animation-delay: calc(var(--time) * -1.25s); }
            }
            
        }
    }

    @keyframes rotate {
        from {
            rotate: 0deg;
        }
        to {
            rotate: calc(1turn / 16);
        }
    }
    @keyframes step-bubble {
        12.5% {
            r: 55;
        }
        25%, 100%, 0% {
            r: 50;
        }

    }
}