@layer cms, theme, components, base, util;

@import url(/MasterPages/assets/FlexSlider/flexslider.css) layer(theme);
@import url(m3/baseline.css) layer(theme);

@import url(light.css) layer(theme);
@import url(light-hc.css) layer(theme);

@import url(components.css?v=2) layer(components);
@import url(variables.css) layer(theme);
@import url(typography.css?v=2) layer(theme);
@import url(fonts.css) layer(theme);

@import url(util.css) layer(util);


@layer theme {
    h1, h2, h3, h4, h5, h6, p {
        margin: 0;
    }

    p {
        text-wrap-style: pretty;
    }

    html {
        box-sizing: border-box;
        overflow-y: scroll;
        scroll-padding-top: var(--header-height);
    }

    @media (width <= 600px) {
        html {
            font-size: 14px;
        }
    }


    * {
        box-sizing: inherit;
    }

    body {
        margin: 0;
        padding: 0;
        overflow-x: clip;
    }

    figure {
        all: unset;
    }
}

@layer base {
    .body {
        padding-bottom: var(--spacing-8);
        min-height: 80vh;
    }

    .header {
        padding: var(--spacing-1) var(--spacing-2) 0 var(--spacing-2);
        height: var(--header-height);
        position: sticky;
        top: 0;
        z-index: var(--z-nav);
    }

    .navbar-dropdown {
        /* Large buttons */
        /*        --font-size: var(--md-sys-typescale-title-large-size);
        --line-height: var(--md-sys-typescale-title-large-line-height);
        --padding-y: var(--spacing-4);*/
        /* Small buttons */
        --font-size: var(--md-sys-typescale-title-medium-size);
        --line-height: var(--md-sys-typescale-title-medium-line-height);
        --padding-y: var(--spacing-3);
        font-size: var(--font-size);
    }

    .navbar-dropdown:not(.navbar-dropdown--mobile) {
        height: calc(var(--line-height) + var(--padding-y));
    }

    .navbar-dropdown--mobile {
        position: relative;
    }

    .navbar-dropdown--mobile:not(.navbar-dropdown--single)::after {
        pointer-events: none;
        content: '\f078';
        position: absolute;
        right: var(--spacing-2);
        top: calc(50% - 0.5em);
        font-family: 'Font Awesome 6 Free';
        display: inline-block;
        font-weight: 900;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        z-index: 10;
        transition-property: opacity;
        transition-duration: var(--md-sys-motion-duration-250);
        transition-timing-function: cubic-bezier( var(--md-sys-motion-easing-standard-x0), var(--md-sys-motion-easing-standard-y0), var(--md-sys-motion-easing-standard-x1), var(--md-sys-motion-easing-standard-y1) );
    }

    /* If this is selected, make the chevron white */
    .navbar-dropdown--mobile:has(.button-group__button--active) {
        color: var(--md-sys-color-on-secondary);
    }

    .navbar-dropdown--mobile:is(.navbar-dropdown--open)::after {
        opacity: 0;
    }

    .navbar-dropdown__link {
        /* size */
        min-width: var(--spacing-16);
        /* spacing */
        padding: var(--spacing-1\.5) var(--spacing-2);
        gap: var(--spacing-2);
        /* typography */
        font-family: var(--md-sys-typescale-title-large-font);
        font-size: var(--font-size);
        line-height: var(--line-height);
    }

    .navbar-dropdown__container {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: clip;
        height: calc(var(--line-height) + var(--padding-y));
    }

    .navbar-dropdown.ready .navbar-dropdown__container {
        transition-property: height;
        transition-duration: var(--md-sys-motion-duration-250);
        transition-timing-function: cubic-bezier( var(--md-sys-motion-easing-standard-x0), var(--md-sys-motion-easing-standard-y0), var(--md-sys-motion-easing-standard-x1), var(--md-sys-motion-easing-standard-y1) );
    }

    .navbar-dropdown__container::after {
        z-index: 0;
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: var(--md-sys-shape-corner-extra-large-default-size);
        background-color: var(--md-sys-color-surface-container-high);
    }

    .navbar-dropdown:is(:not(.navbar-dropdown--mobile):hover,.navbar-dropdown--open) .navbar-dropdown__container {
        height: var(--container-height);
    }

    .navbar-dropdown__link {
        z-index: 1;
        transform: translateY(calc(-1 * var(--active-offset-top)));
        white-space: nowrap;
    }

    @media (width <= 1200px) {
        .navbar-dropdown {
            --font-size: var(--md-sys-typescale-label-large-size);
            --line-height: var(--md-sys-typescale-label-large-line-height);
            --padding-y: var(--spacing-3);
        }

        .navbar-dropdown__link {
            /* spacing */
            padding: var(--spacing-1\.5) var(--spacing-2);
            gap: var(--spacing-2);
            /* typography */
            font-family: var(--md-sys-typescale-label-large-font);
            font-weight: var(--md-sys-typescale-label-large-weight);
            font-size: var(--md-sys-typescale-label-large-size);
            font-style: var(--md-sys-typescale-label-large-font-style);
            letter-spacing: var(--md-sys-typescale-label-large-tracking);
            line-height: var(--md-sys-typescale-label-large-line-height);
            text-transform: var(--md-sys-typescale-label-large-text-transform);
            text-decoration: var(--md-sys-typescale-label-large-text-decoration);
        }
    }

    .navbar-dropdown.ready .navbar-dropdown__link {
        transition-property: transform, border-radius;
        transition-duration: var(--md-sys-motion-duration-250);
        transition-timing-function: cubic-bezier( var(--md-sys-motion-easing-standard-x0), var(--md-sys-motion-easing-standard-y0), var(--md-sys-motion-easing-standard-x1), var(--md-sys-motion-easing-standard-y1) );
    }

    .navbar-dropdown:is(:not(.navbar-dropdown--mobile):hover,.navbar-dropdown--open) .navbar-dropdown__link {
        transform: translateY(0);
    }

    :root {
        --body-offset: 8.5rem;
    }

    .header__panel {
        width: 100%;
        height: 100%;
        background-color: var(--md-sys-color-surface-container);
        display: flex;
    }

    .header__wordmark {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: start;
        height: 100%;
        padding: var(--spacing-4);
        gap: var(--spacing-1);
        color: currentColor;
        text-decoration: none;
    }

    .header__logo {
        height: var(--spacing-8);
        width: var(--spacing-8);
    }

    .header__title {
        display: block;
        color: currentColor;
        text-decoration: none;
        white-space: nowrap;
    }

    @media (width <= 1200px) {
        .header__title {
            line-height: var(--md-sys-typescale-title-medium-leading);
            font-size: var(--md-sys-typescale-title-medium-size);
        }
    }

    @media (width <= 400px) {
        .header__title {
            line-height: var(--md-sys-typescale-title-small-leading);
            font-size: var(--md-sys-typescale-title-small-size);
        }
    }


    .header__nav {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: end;
        gap: var(--spacing-4);
        padding: var(--spacing-4);
        padding-left: 0;
    }

    .header__nav-mobile {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: end;
        gap: var(--spacing-4);
        padding: var(--spacing-4);
        padding-left: 0;
    }

    .header__nav-mobile-drawer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        row-gap: var(--spacing-4);
        border-top-left-radius: var(--md-sys-shape-corner-extra-large-default-size);
        border-bottom-left-radius: var(--md-sys-shape-corner-extra-large-default-size);
        padding-top: var(--spacing-4);
        overflow: clip;
    }

    .header__nav-mobile-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        row-gap: var(--spacing-2);
        overflow-y: auto;
        padding-bottom: var(--spacing-4);
    }

    .header__title-mobile {
        padding: var(--spacing-2);
        padding-top: 0;
        padding-bottom: 0;
        text-align: center;
    }

    @media (width > 1000px) {
        .header__nav-mobile {
            display: none;
        }
    }

    @media (width <= 1000px) {
        .header__nav {
            display: none;
        }
    }

    .header__nav-icons {
        display: flex;
        gap: var(--spacing-1);
    }

    .header__search-container {
        width: var(--spacing-5);
        height: var(--spacing-5);
        position: relative;
    }

    .header__search {
        display: flex;
        flex-direction: row;
        border: none;
        position: absolute;
        right: 0;
        top: 0;
        padding: 0;
        border-radius: var(--spacing-5);
        width: var(--spacing-5);
        transition: width var(--duration-short) var(--easing-standard), box-shadow var(--duration-short) var(--easing-standard);
        z-index: var(--z-above-modal);
        box-shadow_ var(--shadow-0);
    }

    .header__search--expanded {
        border-radius: var(--radius) var(--spacing-5) var(--spacing-5) 0;
        width: var(--spacing-24);
        background-color: var(--md-sys-color-surface-container-highest);
        border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
        --radius: var(--md-sys-shape-corner-extra-small-top-top-left);
        box-shadow: var(--shadow-1);
    }

    .header__search:focus-within {
        border-bottom-width: 2px;
    }

    .header__search__input-container {
        display: grid;
        grid-template: 1fr/1fr;
        min-width: 0;
        overflow: clip;
    }

    .header__search__close {
        grid-area: 1 / 1;
        justify-self: end;
        align-self: center;
        margin-right: var(--spacing-0\.5);
    }

    .header__search__input {
        grid-area: 1 / 1;
        box-sizing: border-box;
        flex-shrink: 1;
        min-width: 0;
        width: 100%;
        padding: 0;
        border: none;
        position: relative;
        background-color: var(--md-sys-color-surface-container-highest);
        --radius: var(--md-sys-shape-corner-extra-small-top-top-left);
        border-radius: var(--radius) var(--radius) 0 0;
        transition: padding var(--duration-short) var(--easing-standard);
        padding: var(--spacing-1\.5) var(--spacing-1);
    }

    .header__search__input:focus-visible, .header__search__input:focus-visible {
        outline: none;
        border-bottom-color: var(--md-sys-color-primary);
        border-bottom-width: 2px;
        --bottom-border-padding: 0px;
    }

    /* FOOTER */

    .footer {
        width: 100%;
        background-color: var(--md-sys-color-surface-container);
        padding-top: var(--spacing-2);
        padding-bottom: var(--spacing-4);
    }

    .footer-body {
        font-family: var(--md-sys-typescale-label-large-font);
        font-weight: var(--md-sys-typescale-label-large-weight);
        font-size: var(--md-sys-typescale-label-large-size);
        letter-spacing: var(--md-sys-typescale-label-large-tracking);
        line-height: var(--md-sys-typescale-label-large-line-height);
    }

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

    .footer-nav__section {
        display: contents;
    }

        .footer-nav h2 {
            text-align: right;
            white-space: nowrap;
            font-family: var(--md-sys-typescale-label-large-font);
            font-weight: var(--md-sys-typescale-label-large-weight);
            font-size: var(--md-sys-typescale-label-large-size);
            letter-spacing: var(--md-sys-typescale-label-large-tracking);
            line-height: var(--md-sys-typescale-label-large-line-height);
            font-weight: bold;
        }

    .footer-nav__section > :is(ol,ul) {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        column-gap: var(--spacing-1);
        row-gap: var(--spacing-0\.5);
    }

        .footer-nav :is(ol,ul) :is(ol,ul) {
            display: contents;
        }

        .footer-nav li {
            font-family: var(--md-sys-typescale-label-small-font);
            font-weight: var(--md-sys-typescale-label-small-weight);
            font-size: var(--md-sys-typescale-label-small-size);
            letter-spacing: var(--md-sys-typescale-label-small-tracking);
            line-height: var(--md-sys-typescale-label-small-line-height);
        }

        .footer-nav a {
            color: black;
        }


    /* END FOOTER */
    .home__section {
        margin-top: var(--spacing-8);
    }

    .home__banner {
        gap: var(--spacing-1);
        display: grid;
        --height: min(calc(0.5 * (100vh - var(--spacing-16) - 4 * var(--spacing-1))), 70vw);
        grid-template-columns: 1fr 1fr;
        grid-template-rows: var(--height);
    }

    @media (width <= 930px) {
        .home__banner {
            grid-template-columns: 1fr;
            grid-template-rows: repeat(2, var(--height));
        }
    }

    .home__banner__left {
        display: flex;
        align-items: center;
        justify-content: end;
        padding: var(--spacing-6);
        overflow: clip;
        position: relative;
        order: 2;
    }

    .home__banner__text {
        display: block;
        text-align: end;
        z-index: 10;
        position: relative;
    }

    .home__banner__image-container {
        min-width: 0;
        min-height: 0;
/*        display: flex;
        align-items: center;*/
    }

    .home__banner__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    @keyframes rotate {
        0% {
            rotate: 0deg;
        }

        100% {
            rotate: 360deg;
        }
    }

    @keyframes translate-y {
        0% {
            translate: 0 var(--translate-start);
        }

        100% {
            translate: 0 var(--translate-end);
        }
    }

    .home__banner__shape {
        position: absolute;
        left: 0;
        top: 0;
        transform-origin: center center;
        fill: var(--md-sys-color-secondary);
        animation: rotate 120s linear infinite;
    }

    .home__who-we-are {
    }

    .home__who-we-are__columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-1\.5);
    }

    .home__who-we-are__left {
        display: flex;
        flex-direction: column;
    }

    .home__who-we-are__section {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-4);
    }

    .home__who-we-are__section:not(:last-child) {
        margin-bottom: var(--spacing-4);
    }

    .home__who-we-are__cards {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-1);
    }

    .home__who-we-are__right {
        --animation-duration: 0.5s;
        align-self: start;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-1);
        position: sticky;
        top: var(--body-offset);
        animation: translate-y var(--animation-duration) cubic-bezier(.17,.67,.27,1.09);
        animation-fill-mode: both;
        animation-delay: calc(0s - var(--animation-duration));
    }

    .home__who-we-are__mobile-media {
        display: none;
        border-radius: var(--md-sys-shape-corner-extra-large-default-size);
        min-width: unset;
        width: 100%;
        margin-bottom: var(--spacing-1);
    }

    @media (width <= 600px) {
        .home__who-we-are__right {
            display: none;
        }

        .home__who-we-are__columns {
            grid-template-columns: 1fr;
        }

        .home__who-we-are__mobile-media {
            display: unset;
        }
    }

    .home__who-we-are__media {
        border-radius: var(--md-sys-shape-corner-extra-large-default-size);
        min-width: unset;
        width: 100%;
    }

    .home__who-we-are__map {
        position: relative;
        overflow: clip;
    }

    .home__who-we-are__map-marker {
        color: var(--md-sys-color-secondary-container);
        transform: scale(0);
        transition: transform 0.3s cubic-bezier(0,.37,.5,1.5);
        position: absolute;
    }

    .home__who-we-are__map-marker--animated {
        transform: scale(1);
    }

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

    .home__who-we-are__blurb {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }

    @media (width <= 600px) {
        .home__connect__columns {
            grid-template-columns: 1fr;
        }

        .home__who-we-are__blurb {
            padding-left: 0;
            padding-right: 0;
        }

        .home__who-we-are__blurb__header {
            text-align: center;
        }

        .home__connect__blurb__header {
            text-align: center;
        }
        
    }

    .home__connect__right {
        align-self: center;
        padding-left: var(--spacing-2);
        padding-right: var(--spacing-2);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-1);
    }


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

    .home__connect__map {
        background-color: var(--md-sys-color-surface-container-high);
        border-radius: var(--md-sys-shape-corner-extra-large-default-size);
    }

    .home__language-representative {
        max-height: var(--spacing-56);
        width: var(--spacing-32);
        flex-shrink: 0;
        user-select: none;
    }

    .home__language-representative__description {
        text-overflow: ellipsis;
        max-height: 100%;
    }

    .home__language-representatives__carousel {
        display: flex;
        flex-direction: row;
        cursor: grab;
    }

    .home__language-representatives__cards {
        display: flex;
        flex-direction: row;
        gap: var(--spacing-1);
        padding-right: var(--spacing-1);
    }

    .home__language-representative__img {
        aspect-ratio: 1;
        object-fit: cover;
    }

    .home__no-matter-how-big {
        --segment-animation-duration: 1s;
        --section-graphic-animation-duration: 0.5s;
        --section-card-animation-duration: 0.25s;
        --section-animation-offset: 0.5s;
        --section-card-offset: 0.25s;
    }

    .timeline {
        height: var(--spacing-4);
        position: relative;
        margin-right: var(--spacing-2);
    }

    .timeline-segment {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        min-width: var(--spacing-2);
        border-start-start-radius: var(--spacing-2);
        border-end-start-radius: var(--spacing-2);
        height: var(--spacing-4);
        background-color: var(--color);
    }

    .timeline-segment, .timeline-section {
        --color: var(--md-sys-color-primary);
    }

    .in-view .timeline-segment {
        animation-name: timeline-segment;
        animation-duration: var(--segment-animation-duration);
        animation-fill-mode: both;
    }

    .timeline-segment__triangle {
        position: absolute;
        right: calc(-1 * var(--spacing-4));
        top: 0;
        bottom: 0;
        width: var(--spacing-4);
        border: var(--spacing-2) solid var(--color);
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-right-color: transparent;
    }

    .timeline-segment:nth-child(2n), .timeline-section:nth-child(2n) {
        --color: var(--md-sys-color-primary-container);
    }

    @keyframes timeline-segment {
        0% {
            width: 0;
        }

        100% {
            width: var(--target-width);
        }
    }

    .timeline-segment:nth-child(3) {
        --target-width: 33.33%;
        animation-delay: calc(0 * var(--segment-animation-duration));
    }

    .timeline-segment:nth-child(2) {
        --target-width: 66.66%;
        animation-delay: calc(1 * var(--segment-animation-duration));
    }

    .timeline-segment:nth-child(1) {
        --target-width: 100%;
        animation-delay: calc(2 * var(--segment-animation-duration));
    }

    .timeline-section:nth-child(1) {
        --animation-delay: calc(0 * var(--segment-animation-duration) + var(--section-animation-offset));
    }

    .timeline-section:nth-child(2) {
        --animation-delay: calc(1 * var(--segment-animation-duration) + var(--section-animation-offset));
    }

    .timeline-section:nth-child(3) {
        --animation-delay: calc(2 * var(--segment-animation-duration) + var(--section-animation-offset));
    }

    .timeline-sections {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-1);
    }

    .timeline-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: clip;
        align-self: end;
    }

    .timeline-section__graphic {
        animation-delay: var(--animation-delay);
        transform: translate(0, var(--start-translate));
    }

    .in-view .timeline-section__graphic {
        animation-name: timeline-section__graphic;
        animation-duration: var(--section-graphic-animation-duration);
        animation-fill-mode: both;
    }

    .timeline-section__fill {
        fill: var(--color);
    }

    @keyframes timeline-section__graphic {
        0% {
            transform: translate(0, var(--start-translate));
        }

        100% {
            transform: translate(0, var(--target-translate));
        }
    }

    .timeline-section__seed {
        --start-translate: 100%;
        --target-translate: 33%;
    }

    .timeline-section__leaf {
        --start-translate: 100%;
        --target-translate: 20%;
    }

    .timeline-section__tree {
        --start-translate: 100%;
        --target-translate: 10%;
    }

    @keyframes timeline-section__card {
        0% {
            opacity: 0;
            transform: translateY(var(--spacing-2));
        }

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

    .timeline-section .card {
        opacity: 0;
        transform: translate(var(--spacing-1) 0);
        animation-delay: calc(var(--animation-delay) + var(--section-card-offset));
    }

    .in-view .timeline-section .card {
        animation-name: timeline-section__card;
        animation-duration: var(--section-card-animation-duration);
        animation-fill-mode: both;
    }

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

    @media (width <= 800px) {
        .home__conference-card {
            grid-template-columns: 1fr;
            grid-template-rows: repeat(2, auto);
        }

        .home__conference-card__right {
            order: -1;
            min-height: 0;
        }
    }

    .conference-card__right {
        border-radius: var(--md-sys-shape-corner-extra-large-default-size);
    }

    .conference-card__right {
        min-width: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .home__challenges__list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-2);
        margin: auto;
        max-width: 1024px;

        counter-reset: home__challenges__counter;
    }

    .home__challenges__challenge {
        display: flex;
        flex-direction: row;
        gap: var(--spacing-1);

        counter-increment: home__challenges__counter;
    }

    .home__challenges__challenge::before {
        content: counter(home__challenges__counter);
        align-self: start;
        padding: var(--spacing-2) var(--spacing-1\.5);
        border-radius: var(--md-sys-shape-corner-large-default-size);
        border: 1px solid var(--md-sys-color-primary);
        font-family: var(--md-sys-typescale-body-large-font);
        font-size: var(--md-sys-typescale-body-large-size);
    }

    .who-we-are__title {
        text-align: center;
        padding: var(--spacing-12) 0;
        margin: 0;
    }

    .who-we-are__goals {
        display: flex;
        flex-direction: row;
        gap: var(--spacing-3);
        /* THIS DOESN'T WORK WITH SCROLL: justify-content: center; */
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-left: var(--spacing-2);
        padding-right: var(--spacing-2);
        counter-reset: goal;
    }

    .who-we-are__goal-button {
        scroll-snap-align: center;
        display: inline; /* override flex so no gap between counter and text */
        white-space: nowrap;
        counter-increment: goal;
        background-color: var(--color);
        border: none;
        font-size: var(--md-sys-typescale-headline-medium-size);
        font-family: var(--md-sys-typescale-headline-medium-font);
        font-weight: var(--md-sys-typescale-headline-medium-weight);
        padding: var(--spacing-1) var(--spacing-2);
        --border-radius: var(--md-sys-shape-corner-medium-default-size);
        --color: transparent;
        --on-color: black;
        border-start-start-radius: var(--border-radius);
        border-start-end-radius: var(--border-radius);
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        color: var(--on-color);
        cursor: pointer;
        transition-property: background-color, border-radius;
        transition-duration: var(--md-sys-motion-duration-150),var(--md-sys-motion-duration-150);
        transition-timing-function: cubic-bezier(var(--md-sys-motion-easing-standard-x0), var(--md-sys-motion-easing-standard-y0), var(--md-sys-motion-easing-standard-x1), var(--md-sys-motion-easing-standard-y1)), cubic-bezier(var(--md-sys-motion-easing-standard-x0), var(--md-sys-motion-easing-standard-y0), var(--md-sys-motion-easing-standard-x1), var(--md-sys-motion-easing-standard-y1));
    }

    .who-we-are__goal-button__count::before {
        content: counter(goal) ". ";
    }

        .who-we-are__goal-button:first-of-type {
            margin-left: auto;
        }

        .who-we-are__goal-button:last-of-type {
            margin-right: auto;
        }

        .who-we-are__goal-button::before {
            border-end-start-radius: 0;
            border-end-end-radius: 0;
        }

    .who-we-are__goal-button--active {
        --color: var(--md-sys-color-surface-container);
        --on-color: var(--md-sys-color-on-surface);
    }

    .who-we-are__goal {
        background-color: var(--md-sys-color-surface-container);
        --color: var(--md-sys-color-on-surface);
        display: grid;
        grid-template: 1fr/1fr;
    }

    .who-we-are__goal-container {
        padding: var(--spacing-8) var(--spacing-2);
        scroll-snap-type: x proximity;
        height: 100%;
        width: fit-content;
        max-width: 100%;
        grid-auto-columns: 300px;
        justify-items: center;
        overflow-x: auto;
        display: grid;
        grid-auto-flow: column;
        gap: var(--spacing-1);
        opacity: 0;
        pointer-events: none;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        transition-property: opacity;
        transition-duration: var(--md-sys-motion-duration-150);
        transition-timing-function: cubic-bezier( var(--md-sys-motion-easing-standard-x0), var(--md-sys-motion-easing-standard-y0), var(--md-sys-motion-easing-standard-x1), var(--md-sys-motion-easing-standard-y1) );
    }

    .who-we-are__goal-container--active {
        opacity: 1;
        pointer-events: auto;
    }

    /* using relative selectors to emulate classnames */
    /* @extends .card, .card__body */
    .who-we-are__goal-container > :is(div,article) {
        scroll-snap-align: center;
        /* card */
        border-radius: var(--md-sys-shape-corner-large-end-top-right);
        overflow: clip;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-1);
        /* COLOR */
        --background-color: var(--md-sys-color-surface-container-high);
        background-color: var(--background-color);
        color: var(--md-sys-color-on-surface);
        /* card body */
        padding: var(--spacing-2) var(--spacing-4);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-1);
        min-height: 0;
    }

    /* @extends .card__header, .card__title */
    .who-we-are__goal-container > :is(div,article) > :is(h1,h2,h3,h4,h5,h6) {
        /* .card__header */
        display: flex;
        gap: var(--spacing-2);
        /* FONT */
        font-family: var(--md-sys-typescale-headline-small-font);
        font-weight: var(--md-sys-typescale-headline-small-weight);
        font-size: var(--md-sys-typescale-headline-small-size);
        font-style: var(--md-sys-typescale-headline-small-font-style);
        letter-spacing: var(--md-sys-typescale-headline-small-tracking);
        line-height: var(--md-sys-typescale-headline-small-line-height);
        text-transform: var(--md-sys-typescale-headline-small-text-transform);
        text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
        /* .card__title */
        margin: 0;
        flex-grow: 1;
    }

    /* @extends .card__description */
    .who-we-are__goal-container > :is(div,article) > :is(p) {
        margin: 0;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        font-family: var(--md-sys-typescale-body-large-font);
        font-weight: var(--md-sys-typescale-body-large-weight);
        font-size: var(--md-sys-typescale-body-large-size);
        font-style: var(--md-sys-typescale-body-large-font-style);
        letter-spacing: var(--md-sys-typescale-body-large-tracking);
        line-height: var(--md-sys-typescale-body-large-line-height);
        text-transform: var(--md-sys-typescale-body-large-text-transform);
        text-decoration: var(--md-sys-typescale-body-large-text-decoration);
    }

    .who-we-are__hero {
        display: grid;
        gap: var(--spacing-8);
        grid-template-columns: 1fr 2fr;
        max-width: var(--breakpoint-md);
        margin-top: var(--spacing-8);
        margin-bottom: var(--spacing-8);
    }

    .who-we-are__hero-blurb {
        display: grid;
        grid-template-rows: 1fr auto 1fr;
    }

    .who-we-are__hero-blurb-content {
        grid-row: 2 / span 1;
    }

    .who-we-are__hero-blurb-buttons {
        grid-row: 3 / span 1;
    }

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

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

    @media (width <= 600px) {
        .who-we-are__hero {
            display: flex;
            flex-direction: column;
        }

        .who-we-are__hero-image {
            max-width: 50%;
            margin-left: auto;
            margin-right: auto;
        }

        .who-we-are__hero h2 {
            text-align: center;
        }
    }

    .who-we-are__hero-image {
        min-width: 0;
        min-height: 0;
        width: 100%;
        height: 100%;
        animation: rotate 120s linear infinite;
    }

    .who-we-are__what-is {
        margin-bottom: var(--spacing-8);
    }

    .who-we-are__board {
    }

    .who-we-are__board-grid {
        max-width: var(--breakpoint-md);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: var(--spacing-1);
        row-gap: var(--spacing-2);
    }

    .who-we-are__board-list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-1);
        justify-content: center;
    }

    .board__img {
        aspect-ratio: 1;
    }

    .main-media:not(:has(*)) {
        display: none;
    }

    @media (width <= 800px) {
        .who-we-are__board-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .who-we-are__board-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, var(--spacing-32));
            align-items: stretch;
        }
    }

    @media (max-width: 500px) {
        .who-we-are__board-grid {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    .who-we-are__board-media {
        aspect-ratio: 1;
        object-fit: cover;
    }

    .who-we-are__board-other {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
        column-gap: var(--spacing-1);
        row-gap: var(--spacing-2);
        align-self: stretch;
    }

        .who-we-are__board-other img {
            display: block;
            max-height: var(--spacing-16);
            margin: var(--spacing-2) auto;
        }

        .who-we-are__board-other h3 {
            font-family: var(--md-sys-typescale-headline-small-font);
            font-weight: var(--md-sys-typescale-headline-small-weight);
            font-size: var(--md-sys-typescale-headline-small-size);
            letter-spacing: var(--md-sys-typescale-headline-small-tracking);
            line-height: var(--md-sys-typescale-headline-small-line-height);
            text-align: center;
        }

        .representatives__language-representatives-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--spacing-1);
            padding-bottom: var(--spacing-4);
        }

    .representatives__language-representatives-list__entry {
        padding: var(--spacing-2) var(--spacing-4);
        font-family: var(--md-sys-typescale-body-large-font);
        font-size: var(--md-sys-typescale-body-large-size);
    }

    .representatives__state-representatives-list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-1);
        padding: var(--spacing-4);
        justify-content: center;
        align-items: center;
    }

    .representatives__state-representative__img {
        width: var(--spacing-24);
        min-width: var(--spacing-24);
    }

    @media (width <= 800px) {
        .representatives__state-representatives-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, var(--spacing-32));
            align-items: stretch;
        }

        .representatives__state-representative__img {
            width: unset;
            min-width: unset;
        }

        .representatives__state-representative {
            flex-direction: column;
            max-width: var(--spacing-32);
        }

        .representatives__state-representative .card__body {
            padding: var(--spacing-2) var(--spacing-4);
            padding-top: 0;
        }
    }

    .representative-list {
        display: flex;
        flex-direction: column;
        row-gap: var(--spacing-1);
    }

    .representative__entry-image {
        width: var(--spacing-32);
        float: left;
        margin-right: var(--spacing-2);
        margin-bottom: var(--spacing-1);
        border-radius: var(--md-sys-shape-corner-large-default-size);
    }

    @media (width <= 500px) {
        .representative__entry-image {
            width: var(--spacing-24);
        }
    }

        .representative__entry:last-of-type .hr {
            display: none;
        }

        .representatives-language-view__header {
            position: relative;
        }

    .representatives-language-view__back {
        position: absolute;
        left: 0;
        top: calc(50% - 20px);
    }

    .representatives-language-view__title {
        padding-left: 40px;
        padding-right: 40px;
    }

    @media (max-width: 540px) {
        .representatives__language-representatives-list {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 360px) {
        .representatives__language-representatives-list {
            grid-template-columns: 1fr;
        }
    }

    .person-image img {
        width: var(--spacing-32);
    }

    /* DATA */
    .data__presentations {
        padding: var(--spacing-2);
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-1);
    }

    @media (width <= 600px) {
        .data__presentations {
            display: flex;
            flex-direction: column;
        }
    }

    .data__past-presentations {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-1);
    }

    .data__past-presentation:first-of-type {
        display: none;
    }

    .data__map-header {
        display: grid;
        grid-template: 1fr / 1fr;
        align-items: center;
        justify-items: center;
    }

        .data__map-header > * {
            grid-column-start: 1;
            grid-row-start: 1;
        }

    .data__map-help {
        margin-left: auto;
    }

    .data__map {
        display: block;
        width: 100%;
    }

    .data__org-list {
        padding: var(--spacing-2);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-1);
    }

    .data__org__media {
        width: var(--spacing-16);
        margin: var(--spacing-2);
        object-fit: contain;
    }

    @media (width <= 600px) {
        .data__org {
            flex-direction: column;
        }

        .data__org__media {
            align-self: center;
        }

        .data__org .card__body {
            padding: var(--spacing-2) var(--spacing-4);
            padding-top: 0;
        }
    }

    /* Contact */
    .contact__newsletter .ctct-form-header {
        font-family: var(--md-sys-typescale-display-small-font);
        font-size: var(--md-sys-typescale-display-small-size);
        line-height: var(--md-sys-typescale-display-small-line-height);
        text-align: center;
        margin: var(--spacing-4) 0;
    }

    .contact__newsletter .ctct-form-field {
        display: flex;
        flex-direction: column;
    }

    .ctct-gdpr-text {
        font-size: var(--md-sys-typescale-body-small-size);
        line-height: var(--md-sys-typescale-body-small-line-height);
        text-indent: 0;
        margin-bottom: var(--spacing-2);
    }

    .ctct-form-label {
        font-size: var(--md-sys-typescale-body-medium-size);
        line-height: var(--md-sys-typescale-body-medium-line-height);
    }

    .ctct-form-text {
        margin-bottom: var(--spacing-2);
    }

    .ctct-form-element {
        margin-bottom: var(--spacing-1);
    }

    .ctct-form-button {
        display: block;
        margin-left: auto;
    }

    .ctct-form-required::after {
        content: "*";
        color: red;
    }

    .ctct-form-element, .ctct-select-element {
        border: none;
        position: relative;
        background-color: var(--md-sys-color-surface-container-highest);
        border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
        --radius: var(--md-sys-shape-corner-extra-small-top-top-left);
        padding: var(--spacing-1\.5) var(--spacing-1);
        border-radius: var(--radius) var(--radius) 0 0;
        --bottom-border-padding: 1px;
        padding-bottom: calc(var(--spacing-1\.5) + var(--bottom-border-padding));
        transition: padding-bottom var(--duration-short) var(--easing-standard), border-bottom-width var(--duration-short) var(--easing-standard);
    }

        .ctct-form-element:focus-visible, .ctct-select-element:focus-visible {
            outline: none;
            border-bottom-color: var(--md-sys-color-primary);
            border-bottom-width: 2px;
            --bottom-border-padding: 0px;
        }

    .ctct-form-footer-img {
        display: block;
        filter: invert(1);
    }
    /* CONNECT */
    .connect__organization__media {
        padding: var(--spacing-2);
        max-width: var(--spacing-24);
        object-fit: contain;
    }

    .connection-cards-container {
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        gap: var(--spacing-1);
    }

    @media (width <= 600px) {
        .connection-cards-container {
            display: flex;
            flex-direction: column;
        }
    }

    .connection-card__conference {
        grid-column: span 2;
    }

    .connection-social-media__grid {
        display: flex;
        justify-content: space-evenly;
        padding-top: var(--spacing-2);
    }

    /* RESOURCES */
    .resources__professional-practice__image
    {
        align-self: start;
    }

    @media (width <= 600px) {
        .resources__professional-practice__container {
            flex-direction: column;
            align-items: center;
        }

        .resources__professional-practice__image {
            align-self: center;
        }

        .resources__professional-practice__title  {
            text-align: center;
        }
    }

    .resources__card-media {
        width: var(--spacing-24);
        min-width: var(--spacing-24);
        object-fit: cover;
    }

    .resources__stack {
        --see-more-height: var(--spacing-8);
        --last-elem-offset: 9999px;
        --height: calc(var(--last-elem-offset) + var(--gap) + var(--see-more-height));
        overflow: clip;
        position: relative;
        transition: max-height var(--duration-short) var(--easing-standard);
        padding-bottom: var(--see-more-height);
        max-height: var(--spacing-64);
    }

    .resources__stack--no-see-more {
        max-height: unset;
    }

    .resources__stack--open {
        max-height: var(--height);
    }

    .resources__stack--no-see-more .resources__stack__see-all-container {
        display: none;
    }

    .resources__stack__see-all-container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(2 * var(--see-more-height));
        background: linear-gradient(to top, var(--md-sys-color-background) 0%, var(--md-sys-color-background) 50%, transparent 100%);
        z-index: 10;
        display: flex;
        align-items: end;
        justify-content: center;
        pointer-events: none;
    }

    .resources__stack__see-all {
        pointer-events: auto;
    }

    .resources__stack--open .resources__stack__see-all-container {
        background: transparent;
    }

    @media (width <= 450px) {
        .resource__stack__card {
            flex-direction: column;
        }

        .resources__card-media {
            align-self: center;
        }

        .resource__stack__card .card__body {
            padding: var(--spacing-2) var(--spacing-4);
            padding-top: 0;
        }
    }

    /* CONFERENCE */
    .conference__past-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-1);
    }

    @media (width <= 800px) {
        .conference__past-grid {
            grid-template-columns: 1fr;
        }
    }

    .conference__sponsors {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        column-gap: var(--spacing-4);
        row-gap: var(--spacing-2);
    }

    .conference__sponsors > a {
        max-width: var(--spacing-16);
    }

    .conference__sponsors > a > img {
        max-width: 100%;
    }

    .conference__sponsor {
        max-width: 200px;
    }

    .resources__sponsor-media {
        max-width: var(--spacing-24);
        object-fit: contain;
        padding: var(--spacing-2);
    }

    @keyframes spinner {
        0% {
            transform: rotate(0);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .spinner {
        display: block;
        margin-left: auto;
        margin-right: auto;
        animation: spinner 2s linear infinite;
    }
}