/* ADD DOTTED LINKS */

@media screen {

    :root {
        /* Primitives */
        --white: 0 0% 100%; /* HSL = Hue Saturation Lightness */
        --deep-300: 246 100% 87%;
        --deep-700: 245 100% 63%;
        --deep-900: 245 100% 7%;
        --deep-custom: 244 100%; /* default-lightness = 63% */
        --lollipop-100: 331 100% 93%;
        --lollipop-400: 331 100% 65%;
        --lollipop-500: 331 100% 58%;
        --leemons-400: 65 100% 52%;
        --leemons-500: 65 100% 63%;
        --leemons-600: 65 100% 48%;
        --leemons-700: 65 100% 44%;
        --skyline-500: 42 100% 50%;
        --jetstream-500: 0 100% 68%;
        --sunset-500: 18 99% 62%;
        --banana-500: 50 100% 50%;

        /* Theme-Impacted Values */
        --theme--lights-on--bg: var(--deep-700);
        --theme--lights-on--bg--mobile: 249 93% 62%;
        --theme--lights-out--bg: var(--deep-900);

        /* Semantic Tokens */
        --type--h1: var(--white);
        --type--h1-nav: hsl(var(--white) / 75%);
        --type--special: var(--leemons-500);
        --nav--desktop: 2.5rem;
        --nav--mobile: 2rem; /* a = 32px, p = 18px, a.padding-bottom = 10px, p.padding-bottom = 8px */
    }

    html {
        color: hsl(var(--white));
        scroll-behavior: smooth;
        height: 100%;
        width: 100%;
        font-size: 16px; /* set root rem */

        /*&:after {
            content: '';
            position: absolute;
            inset: 0;
            -webkit-mask: linear-gradient(0deg, transparent, white 75%);
            border: 1px solid hsl(var(--white) / 45%);
            z-index: -1;
        }*/
    }

    * {
        margin: 0;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        text-decoration: none;
        /* DEV RULER: */
        /*border: 1px solid purple;*/
    }

    .cursor--none {
        cursor: none !important;
    }

    .cursor--auto {
        cursor: auto;
    }

    .cursor--pointer {
        cursor: pointer;
    }

    .placeholder-actual {
        display: none;
    }

    .display--none {
        display: none;
    }

    .scrollDisabled {
        overflow: hidden !important;
        backface-visibility: hidden !important;
    }

    .xScrollEnabled {
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .yScrollEnabled {
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch;
    }

    .yScrollAuto {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .yScrollAutoContained {
        /* Use for scrollable divs within the scrollable body */
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .gradientMaskEnabled {
        -webkit-backdrop-filter: blur(10px);
        -moz-filter: blur(10px);
        -o-filter: blur(10px);
        -ms-filter: blur(10px);
        backdrop-filter: blur(10px);
        -webkit-mask: linear-gradient(0deg, transparent, white 35%); /* begin mask [X]px from bottom of header */
        mask: linear-gradient(0deg, transparent, white 35%);
        background: linear-gradient(hsl(var(--deep-900)) 15%, hsl(var(--white) / 0%) 50%);
    }

    .gradientMaskDisabled {
        -webkit-backdrop-filter: blur(0);
        -moz-filter: blur(0);
        -o-filter: blur(0);
        -ms-filter: blur(0);
        backdrop-filter: blur(0);
        -webkit-mask: linear-gradient(0deg, transparent, white 25px); /* begin mask [X]px from bottom of header */
        mask: linear-gradient(0deg, transparent, white 25px);
        background: linear-gradient(hsl(var(--deep-custom) / 0%), hsl(var(--white) / 0%));
    }

    .theme--lights-on {
        background-color: hsl(var(--theme--lights-on--bg));
        transition: background-color 500ms ease-in;
    }

    .theme--lights-out {
        background-color: hsl(var(--theme--lights-out--bg));
        transition: background-color 250ms ease;
    }

    body {
        position: relative;
        height: 100%;
        width: 100%;
        scroll-behavior: smooth;
        background-image: url(imgs/background-wavelength.webp);
        background-position: top -1200px left 50%;
        background-size: inherit;
        background-attachment: fixed;
        background-repeat: no-repeat;
        backface-visibility: hidden !important;
        /*max-height: 100vh;
        max-width: 100vw;
        min-height: 100vh;*/
    }

    #page-container {
        position: relative;
        height: 100%;
        width: 100%;
        background-image: url(imgs/background-conic-gradient-colorful-haze.svg);
        background-position: left;
        background-size: cover;
        background-repeat: no-repeat;
        backface-visibility: hidden !important;
        z-index: 0;

        &:after {
            content: '';
            position: absolute;
            inset: 0;
            -webkit-backdrop-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
            backdrop-filter: blur(5px);
            -webkit-mask: linear-gradient(0deg, black 100%, black 400px);
            mask: linear-gradient(0deg, black 100%, black 400px);
            z-index: -1;
        }
    }

    #page-content {
        height: 100%;
        width: 100%;
        background-image: url(imgs/texture-noise.svg);
        background-position: center;
        background-size: inherit;
        background-attachment: fixed;
        background-repeat: no-repeat;
        backface-visibility: hidden !important;
        /*-webkit-backdrop-filter: blur(10px);
        -moz-filter: blur(10px);
        -o-filter: blur(10px);
        -ms-filter: blur(10px);
        backdrop-filter: blur(10px);
        -webkit-mask: linear-gradient(0deg, transparent, black 50%);
        background: linear-gradient(hsl(var(--deep) / 10%), hsl(var(--white) / 0%));*/
    }

    #header-and-main {
        width: 100%;
        min-height: calc(100vh - 7em); /* subtracted number = footer height */
        /*max-width: 200vh;*/
        display: flex;
        justify-content: center;
        align-items: start;
        position: relative;
    }

    main, .section-gridlines:first-child {
        margin-top: 200px; /* set equal to #header-wrapper height */
    }

    .section-content {
        margin: 0 50px; /* set equal to ((blur--linear-gradient width: calc(% - subtrahend) / 2) - 2*(section-gridlines left-right border-width)) */
        padding: 16px 22px 0;
        z-index: 1;
        position: relative;
    }

    .section-gridlines {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
    }

    .section-gridlines.gridlines--solid.gridlines--top {
        border-top: 1px solid hsl(var(--white) / 20%);
    }

    .section-gridlines.gridlines--solid.gridlines--right {
        border-right: 1px solid hsl(var(--white) / 20%);
        margin-right: 50px;
    }

    .section-gridlines.gridlines--solid.gridlines--bottom {
        border-bottom: 1px solid hsl(var(--white) / 20%);
    }

    .section-gridlines.gridlines--solid.gridlines--left {
        border-left: 1px solid hsl(var(--white) / 20%);
        margin-left: 50px;
    }

    .section-gridlines.gridlines--dashed {
        /* dashed border grid */
        background-image: repeating-linear-gradient(0deg, hsl(var(--white) / 20%), hsl(var(--white) / 20%) 10px, transparent 10px, transparent 20px, hsl(var(--white) / 20%) 20px), repeating-linear-gradient(90deg, hsl(var(--white) / 20%), hsl(var(--white) / 20%) 10px, transparent 10px, transparent 20px, hsl(var(--white) / 20%) 20px), repeating-linear-gradient(180deg, hsl(var(--white) / 20%), hsl(var(--white) / 20%) 10px, transparent 10px, transparent 20px, hsl(var(--white) / 20%) 20px), repeating-linear-gradient(270deg, hsl(var(--white) / 20%), hsl(var(--white) / 20%) 10px, transparent 10px, transparent 20px, hsl(var(--white) / 20%) 20px);
        background-position: 0 0, 0 0, 100% 0, 0 100%;
        background-repeat: no-repeat;
    }

    .section-gridlines.gridlines--dashed.gridlines--top-bottom {
        background-size: 0 100%, 100% 1px, 0 100% , 100% 1px;
    }

    .section-gridlines.gridlines--dashed.gridlines--left-right {
        background-size: 1px 100%, 100% 0, 1px 100% , 100% 0;
        margin-left: 50px;
        margin-right: 50px;
    }

    .section-gridlines.gridlines--dashed.gridlines--top {
        background-size: 0 100%, 100% 1px, 0 100% , 100% 0;
    }

    .section-gridlines.gridlines--dashed.gridlines--right {
        background-size: 0 100%, 100% 0, 1px 100% , 100% 0;
        margin-right: 50px;
    }

    .section-gridlines.gridlines--dashed.gridlines--bottom {
        background-size: 0 100%, 100% 0, 0 100% , 100% 1px;
    }

    .section-gridlines.gridlines--dashed.gridlines--left {
        background-size: 1px 100%, 100% 0, 0 100% , 100% 0;
        margin-left: 50px;
    }

    nav {
        position: relative;
        display: flex;
        justify-content: flex-end;
    }

    .nav-buttons-container {
        position: relative;
        display: flex;
        justify-content: flex-end;
        width: 100%;
        height: 100%;
    }

    .nav-buttons {
        position: absolute;
        right: 0;
        display: flex;
        justify-content: flex-end;
        column-gap: 24px;
        transition: all 250ms ease-out;
    }

    .nav-buttons.fade-out--right {
        right: -12px;
        column-gap: 0;
        opacity: 0;
        visibility: hidden;
    }

    .nav-button-container {
        position: relative;
    }

    button {
        display: block;
    }

    button.primaryButtonCTA {
        margin-right: 0;
        margin-top: 4px;
        position: relative;
        border: none;
        background: transparent;
        padding: 0;
        outline-offset: 4px;
        transition: filter 600ms;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        white-space: nowrap;
    }

    button.primaryButtonCTA > .shadow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 15px;
        background: hsl(var(--deep-custom) 5% / 0.15);
        filter: blur(10px);
        will-change: transform;
        transform: translateY(2px);
        transition:
                transform
                600ms
                cubic-bezier(.3, .7, .4, 1);
    }

    button.primaryButtonCTA > .edge {
        position: absolute;
        padding: 0;
        margin: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 15px;
        background: linear-gradient(
                to left,
                hsl(322 80% 28%) 0%,
                hsl(322 80% 42%) 8%,
                hsl(322 80% 42%) 92%,
                hsl(322 80% 28%) 100%
        );
    }

    button.primaryButtonCTA > .front {
        display: block;
        position: relative;
        padding: 9px 24px;
        border-radius: 15px;
        font-family: 'Gilroy', sans-serif;
        font-weight: 600;
        font-size: 1.2rem;
        line-height: 1.5rem;
        color: hsl(var(--white));
        background: linear-gradient(
                to bottom,
                hsl(43 96% 62%) 0%,
                hsl(7 70 62) 75%
        );
        background: hsl(var(--lollipop-500));
        will-change: transform;
        transform: translateY(-3px);
        transition:
                transform
                600ms
                cubic-bezier(.3, .7, .4, 1);
    }

    button.primaryButtonCTA:hover {
        transition: filter 250ms;
        filter: brightness(105%);
    }

    button.primaryButtonCTA:hover .front {
        color: hsl(var(--white) / 100%);
        transform: translateY(-5px);
        transition:
                transform
                250ms
                cubic-bezier(.3, .7, .4, 1.5);
    }

    button.primaryButtonCTA:active .front {
        transform: translateY(-1px);
        transition: transform 34ms;
    }

    button.primaryButtonCTA:hover .shadow {
        transform: translateY(8px);
        transition:
                transform
                250ms
                cubic-bezier(.3, .7, .4, 1.5);
    }

    button.primaryButtonCTA:active .shadow {
        transform:
                translateY(5px)
                scale(1.15);
        background: hsl(var(--lollipop-500) / 0.25);
        transition: transform 34ms;
    }

    button.primaryButtonCTA:focus:not(:focus-visible) {
        outline: none;
    }

    button.primaryButtonCTA.navMobile {
        display: none;
    }

    a.secondaryButtonCTA {
        padding: 10px 24px;
        margin-right: 10px;
        border: none;
        background: transparent;
        border-radius: 15px;
        font-family: 'Gilroy', sans-serif;
        font-weight: 600;
        font-size: 1.2rem;
        line-height: 1.5rem;
        color: hsl(var(--white) / 0.9);
        transition: all 75ms ease;
    }

    a.secondaryButtonCTA:hover {
        /*background: hsl(var(--deep-custom) 75% / 0.35);
        background: hsl(var(--white) / 15%);*/
        background: hsl(var(--deep-300) / 30%);
        color: hsl(var(--white) / 1);
        -webkit-backdrop-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
        backdrop-filter: blur(5px);
    }

    .nav-divider {
        display: block;
        padding: 10px 24px 10px 0;
        transition: all 150ms ease-out;
    }

    .nav-divider div {
        height: 100%;
        width: 2px;
        background-color: hsl(var(--deep-300) / 25%);
        border-radius: 1px;
    }

    .nav-divider.fade-out--squish {
        padding: 14px 24px 14px 0;
    }

    #cursorToast {
        position: absolute;
        bottom: 32px;
        right: 122px;
        /*width: calc(100% + 77px);*/
        z-index: 8;
        text-align: right;
    }

    #cursorToast .toast {
        display: none;
        position: relative;
        margin: 0 auto;
        padding: 8px 13px;
        text-align: center;
        color: hsl(var(--deep-custom) 95%);
        background-color: hsl(245 50% 25%);
        border-radius: 12px;
    }

    #cursorToast .toast pre {
        font-weight: 400;
        font-size: 12px;
        line-height: 14px;
    }

    #toastDesktop {
        position: absolute;
        top: 46px;
        right: 0;
        margin-top: 8px;
        text-align: center;
        z-index: 9999;
        font-size: 0.9em;
    }

    #toastMobile {
        position: absolute;
        right: auto;
        left: auto;
        margin: 0 auto;
        width: 100%;
        height: auto;
        text-align: center;
        z-index: 9999;
    }

    .toast {
        display: none; /* incompatible with css transitions */
        position: relative;
        margin: 0 auto;
        padding: 13px 22px;
        text-align: center;
        color: hsl(var(--deep-custom) 95%);
        background-color: hsl(245 50% 25%);
        border-radius: 15px;
    }

    #page-toast pre {
        font-weight: 400;
        font-size: 0.9rem;
        line-height: 1.5rem;
    }

    #headline-wrapper {
        padding-bottom: 1em;
        align-items: start; /* center to center vertically */
        display: flex;
        justify-content: center;

        &:after {
            z-index: 0;
            -webkit-mask: linear-gradient(-90deg, white, white 90%, white 100%);
            mask: linear-gradient(-90deg, white, white 90%, white 100%);
            backdrop-filter: blur(5px);
        }
    }

    h1#headline {
        display: block;
        position: relative;
        font-family: 'Gilroy', ui-sans-serif, system-ui, sans-serif;
        font-weight: 800;
        /*font-feature-settings: "ss07" on, "ss08" on, "cv01" on, "cv11" on, "cv12" on, "cv13" on;*/
        /*font-size: 7.79vw;*/
        /*font-size: clamp(2rem, 10vw + 1rem, 8rem);*/
        font-size: 9vw;
        line-height: 9vw;
        word-spacing: 1vw;
        /*font-size: clamp(min(8vh, 8vh), 10vw, 12vw);
        line-height: clamp(10vw, 11vw, max(19vh, 19vh));*/ /* impacted by max-width on header-and-main */
        letter-spacing: 2px;
        /*text-wrap: balance;*/
        text-transform: uppercase;
        font-stretch: expanded;
        color: hsl(var(--white));
        width: 100%;
        margin: 0;
        z-index: 0;
        transition: all 400ms ease 0s; /* primaryButtonCTA Hover Pseudo-State in JS */

        /*filter: url(#callSvgGoo);*/
    }

    h1#headline > span.desktop {
        display: block;
    }

    h1#headline > span.mobile {
        display: none;
    }

    .color--primary {
        color: hsl(var(--lollipop-500));
    }

    .color--secondary {
        color: hsl(var(--leemons-500));
    }

    .text--opacity--40 {
        opacity: 40%;
    }

    .text--opacity--75 {
        opacity: 75%;
    }

    .text--reduced {
        font-size: 7.75vw;
        line-height: 9vw;
    }

    .text--no-wrap {
        text-wrap: nowrap;
    }

    .text--align--bottom {
        vertical-align: bottom;
    }

    .text--rotate--inverse {
        display: inline-block;
        transform: rotate(-15deg);
    }

    .text--custom--Qslash {
        position: relative;
    }

    .text--custom--Qslash span {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 41px;
        height: 16px;
        margin-right: 5px;
        margin-bottom: 31px;
        background-color: hsl(var(--jetstream-500));
        transform: rotate(47deg);
    }

    .user-select--false {
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    #header-and-main::before {
        backdrop-filter: blur(15px);
    }

    /* HEADER & NAV */
    #header-wrapper {
        height: 200px; /* set equal to <main> margin-top */
        margin: 0 auto;
        box-sizing: border-box; /* solves: padding-right causing width:100%; to bleed off right side of screen */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        transform: translateZ(2px);
        transition: 0.2s;
        z-index: 2;
        background: linear-gradient(hsl(var(--deep-700) / 25%), hsl(var(--white) / 0%));

        /*&:after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            -webkit-backdrop-filter: blur(10px);
            -moz-filter: blur(10px);
            -o-filter: blur(10px);
            -ms-filter: blur(10px);
            backdrop-filter: blur(10px);
            -webkit-mask: linear-gradient(0deg, transparent, white 50%);
            background: linear-gradient(hsl(var(--deep-custom) / 10%), hsl(var(--white) / 0%));
        }*/
    }

    #header-container {
        /*margin: 0 80px;
        padding: 0 20px;*/
    }

    @property --bg-lg-1 {
        syntax: '<color>';
        initial-value: hsl(249 93% 62% / 0%);
        inherits: false;
    }

    @property --bg-lg-2 {
        syntax: '<color>';
        initial-value: hsl(0 0% 100% / 0%); /* --white */
        inherits: false;
    }

    #blur--linear-gradient {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 50px auto 50px;
        grid-column-gap: 1px;
        z-index: 1;
        /*margin: 0 81px;*/
        /*width: calc(100% - 162px);*/ /* set equal to section-content ((margin-left + margin-right) + 2*(section-gridlines left-right border-width)) */
    }

    #blur--linear-gradient div {
        width: 100%;
        height: 100%;
        -webkit-backdrop-filter: blur(0);
        -moz-filter: blur(0);
        -o-filter: blur(0);
        -ms-filter: blur(0);
        backdrop-filter: blur(0);
        -webkit-mask: linear-gradient(0deg, transparent 10%, black 42%);
        mask: linear-gradient(0deg, transparent 10%, black 42%);
        background: linear-gradient(var(--bg-lg-1), var(--bg-lg-2));
        transition: backdrop-filter 200ms ease-in, --bg-lg-1 200ms ease-in, --bg-lg-2 200ms ease-in; /* initializes when 'active' class is added and removed, but this property has a shorter duration than 'active' class transform property so it's only visible when 'active' class is removed */
    }

    #blur--linear-gradient div:first-child, #blur--linear-gradient div:last-child {
        width: 100%;
        height: 100%;
        -webkit-backdrop-filter: blur(0);
        -moz-filter: blur(0);
        -o-filter: blur(0);
        -ms-filter: blur(0);
        backdrop-filter: blur(0);
        -webkit-mask: linear-gradient(0deg, transparent 0%, black 42%);
        mask: linear-gradient(0deg, transparent 0%, black 42%);
    }

    #blur--linear-gradient.active > div {
        -webkit-backdrop-filter: blur(10px);
        -moz-filter: blur(10px);
        -o-filter: blur(10px);
        -ms-filter: blur(10px);
        backdrop-filter: blur(10px);
        --bg-lg-1: hsl(249 93% 62% / 100%);
        --bg-lg-2: hsl(0 0% 100% / 0%);
        background: linear-gradient(var(--bg-lg-1), var(--bg-lg-2));
        -webkit-mask: linear-gradient(0deg, transparent 0%, black 100%);
        mask: linear-gradient(0deg, transparent 0%, black 42%);
        transition: backdrop-filter 500ms ease-in, --bg-lg-1 500ms ease-in, --bg-lg-2 500ms ease-in; /* initializes only when 'active' class is added */
    }

    #mask--linear-gradient {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 148px;
        margin: 0 auto;
        z-index: 2;
        --bg-lg-1: hsl(245 100% 63% / 100%);
        --bg-lg-2: hsl(0 0% 100% / 0%);
        background: linear-gradient(var(--bg-lg-1), var(--bg-lg-2));
        -webkit-mask: linear-gradient(0deg, transparent, black);
        mask: linear-gradient(0deg, transparent 0%, black);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: white;
        -webkit-box-decoration-break: clone;
    }

    header {
        display: flex;
        position: relative;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        transition: background 0.2s ease-out;
        background-repeat: no-repeat;
        /*height: 200px;*/
        margin: 0 auto;
        padding: 90px 70px 15px 70px;
        z-index: 2;
    }

    #co-logo {
        padding: 10px 0;
        transition: all 300ms ease 0s;
        z-index: 1;
    }

    #co-logo a {
        display: flex;
        align-items: center;
        text-decoration: none;
        transition: all 300ms ease 0s;
    }

    #co-logo .desktop {
        width: auto;
        float: left;
        opacity: 1;
        transition: all 300ms ease 0s;
        vertical-align: middle;
        display: flex;
        column-gap: 12px;
    }

    #co-logo .logo--surname {
        font-family: 'Gilroy', sans-serif;
        font-size: 31px;
        font-weight: 700;
        color: hsl(var(--white) / 55%);
        line-height: 39px;
        margin-left: -4px;
    }

    #co-logo .mobile {
        width: auto;
        display: none;
    }

    #co-logo:hover > a > #co-logo .desktop, #co-logo:focus > a > #co-logo .desktop {
        opacity: 1;
    }

    .left {
        margin-left: 0;
        text-align: left;
        justify-content: left;
    }

    .center {
        margin: 0 auto;
        text-align: center;
        justify-content: center;
    }

    .right {
        margin-right: 0;
        text-align: right;
        justify-content: right;
    }

    #footer-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: start;
        z-index: 1;
        height: auto;
        padding-top: 1.5em;
        min-height: 7em;
    }

    #footer-wrapper footer {
        font-family: 'lato', sans-serif;
        position: relative;
        width: 100vw;
        max-width: 100%;
        height: auto;
        padding: 0 70px;
        margin: 0 auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        transition: all 300ms ease 0s;
    }

    #footer-wrapper footer p {
        text-align: left;
        font-size: 0.85em;
        line-height: 1.5em;
        max-width: 100vw;
        height: auto;
        color: hsl(var(--white) / 75%);
        opacity: 0.35;
        margin: 0;
        padding: 0;
        overflow: visible;
        transition: all 300ms ease 0s;
    }

    /*footer p:last-child {
        position: absolute;
        left: 0;
        bottom: 0;
        margin: 0 auto;
        opacity: 1;
    }*/

    footer p:not(.sparkling-color) {
        opacity: 50%;
    }

    span.sparkling-color {
        color: hsl(var(--white) / 75%);
    }

    #footer-wrapper:hover footer p, #footer-wrapper:hover footer p a {
        opacity: 1;
    }

    #footer-wrapper:hover footer p a#link-inline {
        text-decoration-color: hsl(var(--white) / 40%);
    }

    #footer-wrapper:hover footer p span.sparkling > span > svg {
        opacity: 1;
    }

    #footer-wrapper:hover footer p span.sparkling-color {
        color: hsl(var(--banana-500) / 100%);
    }

    .north-east-arrow {
        font-family: 'open-arrow', Helvetica, sans-serif;
        font-size: 0.85em;
    }

    a {
        text-decoration: none;
    }

    a#link-inline {
        position: relative;
        color: hsl(var(--white) / 75%);
        text-decoration: underline;
        text-decoration-color: hsl(var(--white) / 0);
        text-decoration-style: solid;
        text-decoration-thickness: .1em;
        text-underline-offset: 0.15em;
        padding: 2px 0 4px 0;
        transition: all 150ms ease 0s;
    }

    #footer-wrapper:hover footer p a#link-inline:hover {
        color: hsl(var(--white));
        text-decoration-color: hsl(var(--white) / 75%);
        text-decoration-style: solid;
    }

    a#link-inline:active, a#link-inline:focus {
        border-radius: 5px;
    }

    a#link-inline:hover span.sneakpeek, a#link-inline:hover span.sneakpeek img {
        visibility: visible;
        opacity: 1;
    }

    span.sneakpeek {
        visibility: hidden;
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        padding-bottom: 12px;
        transform: translate(-25%, -1.2em); /* 2nd # == link's line height minus a bit to remove overlap */
        transition-delay: 1ms; /* visibility doesn't work with transitions so use 1ms transition to delay img opacity transition so that visibility:visible can appear first */
    }

    span.sneakpeek img {
        opacity: 0;
        width: 150%;
        height: auto;
        transition: 250ms 200ms; /* slight delay for effect */
        border-radius: 8px;
    }

    span.sneakpeek:hover, span.sneakpeek img:hover {
        visibility: visible;
        opacity: 1;
    }

    a#link-inline:active span.sneakpeek img {
        transition: 100ms;
        transform: scale(0.95);
    }

    /* SPARKLING STARS */

    html .sparkling {
        position: relative;
        display: inline-block;
        z-index: 0;
        font-weight: 700;
        /*color: #FFC700;*/
    }

    html .sparkling > span {
        z-index: -1;
        position: absolute;
        display: block;
        animation: comeInOut 700ms forwards;
    }

    html .sparkling > span > svg {
        display: block;
        animation: spin 1000ms linear;
        transition: all 1000ms ease 0s;
        opacity: 0;
    }

    @keyframes comeInOut {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1);
        }
        100% {
            transform: scale(0);
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(180deg);
        }
    }

    span.paragraph-highlighting {
        background: linear-gradient(100deg, rgb(255, 235, 64) 50%, rgba(0, 0, 0, 0) 50%);
        background-size: 201% 100%;
        color: #000000;
        padding: 2px 2px;
        margin: 0;
        /*background: linear-gradient(100deg, rgba(255, 235, 64, 0.2) 50%,  rgba(0,0,0,0) 50%);*/
        /*background: linear-gradient(95deg, rgba(0,0,0,0) 1%, rgba(255, 235, 64, 0.85) 1%, rgba(255, 235, 64, 0.85) 99%, rgba(0,0,0,0) 1%);*/
        /*background-color: none;*/
        /*background-position: 100% 0;*/
    }

    @-webkit-keyframes highlight {
        to {
            background-position: 0 0;
        }
    }

    @keyframes highlight {
        to {
            background-position: 0 0;
        }
    }

    .live-cursor--dot {
        z-index: 10;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background-color: hsl(var(--leemons-700));
        position: fixed;
        transform: translate(-50%, -50%); /* needs to be at body level to center in middle of screen */
        pointer-events: none;
        display: none;
        transition: all 500ms ease-out;
    }

    .live-cursor--field {
        z-index: 9;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: hsl(var(--leemons-600));
        opacity: 0.4;
        position: fixed;
        transform: translate(-50%, -50%);
        pointer-events: none;
        display: none;
        transition: all 100ms ease-out;
    }

    .fixed--bottom-right {
        position: fixed;
        z-index: 8;
        bottom: 0;
        right: 0;
    }

    .toggle-wrapper {
        position: relative;
        padding-right: 60px;
    }

    #toggle--cursor {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 38px;
        margin: 30px 19px 29px 30px;
        border-radius: 50%;
        border: none;
        background: none;
        transition: all 150ms ease-in;
    }

    #toggle--cursor input {
        z-index: 11;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 38px;
        height: 38px;
        opacity: 0;
        border-radius: 50%;
        -webkit-appearance: none;
        appearance: none;
    }

    #toggle--cursor label {
        display: none;
        border-radius: 50%;
    }

    #toggle--cursor .cursor-field {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 13px;
        border-radius: 50%;
        background-color: hsl(var(--white) / 25%);
        border: 2px solid hsl(var(--white) / 0%);
        transition: all 125ms ease-in;
    }

    #toggle--cursor .cursor-field .cursor-dot-wrapper {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 4px solid hsl(var(--white) / 50%);
        transition: all 125ms ease-out;
    }

    #toggle--cursor .cursor-field .cursor-dot-wrapper .cursor-dot {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        margin: auto;
        border-radius: 50%;
        opacity: 1;
        transition: all 75ms ease;
    }

    #toggle--cursor:hover .cursor-field {
        padding: 9px;
    }

    #toggle--cursor:hover .cursor-field .cursor-dot-wrapper {
        padding: 13px;
        border: 2px solid hsl(var(--white) / 75%);
    }

    #cursorToggleInput:checked ~ .cursor-field .cursor-dot-wrapper {
        border-color: hsl(var(--white));
    }

    #cursorToggleInput:checked:hover ~ .cursor-field .cursor-dot-wrapper {
        border-color: hsl(var(--white));
    }

    #cursorToggleInput:checked:hover ~ .cursor-field .cursor-dot {
        background-color: hsl(var(--white));
    }

    #cursorToggleInput:not(:checked):hover ~ .cursor-field .cursor-dot-wrapper .cursor-dot {
        opacity: 0;
    }

    #cursorToggleInput:active ~ .cursor-field {
        padding: 5px;
    }

    #cursorToggleInput:active ~ .cursor-field .cursor-dot-wrapper {
        padding: 9px;
    }

    #toggle--cursor:hover .live-cursor--dot, #toggle--cursor:hover .live-cursor--field {
        position: absolute;
    }

    #mobileMenuTrigger {
        display: flex; /* none */
        position: relative;
        justify-content: center;
        align-items: center;
        margin: auto;
        width: 24px;
        height: 100%;
    }

    .css-icon-wrapper {
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }

    label.css-icon-wrapper .css-icon {
        /*background: black;*/
        width: 44px;
        height: 44px;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: background 10ms 300ms ease;
        transform: translateY(50%);
    }

    label.css-icon-wrapper .css-icon:before, label.css-icon-wrapper .css-icon:after {
        transition: top 250ms 300ms ease, transform 250ms 50ms ease;
        position: absolute;
        background: white;
        width: 24px;
        height: 3px;
        content: '';
        border-radius: 0.5px;
    }

    label.css-icon-wrapper .css-icon:before {
        top: -4px;
    }

    label.css-icon-wrapper .css-icon:after {
        top: 4px;
    }

    #mobileMenuTrigger input:checked ~ label.css-icon-wrapper .css-icon {
        background: transparent;
    }

    #mobileMenuTrigger input:checked ~ label.css-icon-wrapper .css-icon:after, #mobileMenuTrigger input:checked ~ label.css-icon-wrapper .css-icon:before {
        transition: top 250ms 50ms ease, transform 250ms 300ms ease;
        top: 0;
    }

    #mobileMenuTrigger input:checked ~ label.css-icon-wrapper .css-icon:before {
        transform: rotate(45deg);
    }

    #mobileMenuTrigger input:checked ~ label.css-icon-wrapper .css-icon:after {
        transform: rotate(-45deg);
    }

    #mobileMenuTrigger label:focus {}

    .display--hidden {
        display: none;
    }

    #mobileMenu {
        display: flex; /* none */
        position: absolute;
        height: 0;
        width: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: scroll;
        background-color: hsl(var(--deep-900));
        z-index: 1;
        font-family: 'Gilroy', sans-serif;
        transition: all 350ms ease; /* fallback for linear() support */
        will-change: height;
    }

    #mobileMenuMask {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 0;
        overflow: scroll;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0%, transparent 100%);
        transition: all 500ms ease; /* fallback for linear() support */
        will-change: height;
    }

    #mobileMenuContent {
        height: 100%; /*height: 100vh;*/
        transform: scale(0.98) translateY(-15px);
        transition: all 750ms ease; /* fallback for linear() support */
        will-change: transform;
    }

    #mobileMenuHeaderScrim {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    @supports (animation-timing-function: linear(0, 1)) {
        #mobileMenu {
            transition: all 750ms linear(
                    0, 0.005, 0.019 1.8%, 0.08 4%, 0.475 13.9%, 0.575, 0.66, 0.734, 0.797 25.7%, 0.848 29.1%, 0.89 32.7%, 0.925 36.7%, 0.951 41.3%, 0.97 46.4%, 0.984 52.5%, 0.992 59.4%, 0.997 68.3%, 1
            );
        }
        #mobileMenuMask {
            transition: all 1750ms linear(
                    0, 0.005, 0.019 1.8%, 0.08 4%, 0.475 13.9%, 0.575, 0.66, 0.734, 0.797 25.7%, 0.848 29.1%, 0.89 32.7%, 0.925 36.7%, 0.951 41.3%, 0.97 46.4%, 0.984 52.5%, 0.992 59.4%, 0.997 68.3%, 1
            );
        }
    }

    #mobileMenu.is-open {
        /*height: 100vh;*/
        /* Problems with mobile-browser task bars associated with 100vh. Calculated in JS instead. */
    }

    #mobileMenuMask.mask-enabled {
        height: 100%; /*height: 100vh;*/
        -webkit-mask-image: linear-gradient(180deg, black 0%, black 100%);
        mask-image: linear-gradient(180deg, black 0%, black 100%);
    }

    #mobileMenuContent.scaled-up {
        transform: scale(1);
    }

    .menu-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        font-size: var(--nav--desktop);
        /* DOM-calculated height */
        padding: 224px 70px 70px 70px;
    }

    .menu-content--nav {
        display: flex;
        width: 100%;
        /*max-width: 350px;
        margin: auto 0 auto auto;*/
        padding-bottom: 30px; /* 70px*/
        flex-direction: column;
        align-items: flex-start;
        justify-content: left;
        align-self: stretch;
    }

    nav.menu-nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
    }

    .menu-nav ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        padding-left: 0;
    }

    .menu-nav ul li.nav-item {
        display: flex;
        padding-bottom: 10px;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
    }

    .menu-nav ul li.nav-item a {
        display: inline-block;
        width: 100%;
    }

    .menu-nav ul li.nav-item a .label-wrapper {
        display: flex;
        position: relative;
        align-items: center;
        width: fit-content;
    }

    .menu-nav ul li.nav-item a .label-wrapper .label {
        display: inline-block;
        text-decoration: none;
        color: hsl(var(--white));
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        transition: all 150ms ease;
    }

    .menu-nav ul li.nav-item a:hover, .menu-nav ul li.nav-item a:hover .label {
        color: hsl(var(--deep-300));
    }

    a:hover .primary-color {
        color: hsl(var(--lollipop-500)) !important;
    }

    .squiggles {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: all 150ms ease;
    }

    a:hover .squiggles {
        opacity: 75%;
        transform: scale(1.03);
    }

    .squiggle--top-left, .squiggle--top-right, .squiggle--bottom-left, .squiggle--bottom-right {
        position: absolute;
    }

    .squiggle--top-left {
        top: 0;
        left: 0;
        margin-left: -22px;
        transform: rotate(45deg);
    }

    .squiggle--top-right {
        top: 0;
        right: 0;
        margin-top: -8px;
        margin-right: -22px;
        transform: rotate(-10deg);
    }

    .squiggle--bottom-left {
        bottom: 0;
        left: 0;
        margin-bottom: -2px;
        margin-left: -20px;
        transform: rotate(0deg);
    }

    .squiggle--bottom-right {
        bottom: 0;
        right: 0;
        margin-bottom: -8px;
        margin-right: -22px;
        transform: rotate(65deg);
    }

    .squiggle_1 {
        background-image: url('imgs/graphics/squiggle_1.svg');
        width: 20px;
        height: 15px;
    }

    .squiggle_2 {
        background-image: url('imgs/graphics/squiggle_2.svg');
        width: 20px;
        height: 15px;
    }

    .squiggle_3 {
        background-image: url('imgs/graphics/squiggle_3.svg');
        width: 15px;
        height: 12px;
    }

    .squiggle_4 {
        background-image: url('imgs/graphics/squiggle_4.svg');
        width: 15px;
        height: 12px;
    }

    .menu-content--email {
        display: flex;
        width: 100%;
        /*max-width: 350px;
        margin: auto 0 auto auto;*/
        padding-bottom: 50px; /* 70px*/
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
    }

    a.email-copy {
        display: block;
        border: 0;
        background: 0;
        text-decoration: none;
    }

    a.email-copy span.label {
        display: inline-block;
        color: hsl(var(--white));
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    a.email-copy span.label span.font-override {
        font-family: 'SF Pro Display', 'Inter', sans-serif;
        font-weight: 600;
        padding: 0;
        border: none;
    }

    a.email-copy span.underline {
        display: block;
        width: 100%;
        height: 0.125em;
        margin-top: 0.125em;
        background-color: hsl(var(--lollipop-500) / 90%);
        transition: all 75ms ease;
        z-index: -1;
    }

    a.email-copy:hover > span.underline {
        height: calc(1.5em + 0.125em);
        margin-top: calc(-1.5em + 0.125em);
        background-color: hsl(var(--lollipop-500) / 90%);
    }

    .menu-content--values, .menu-content--beliefs {
        display: flex;
        padding-top: 50px;
        /*border-top: 1px solid hsl(var(--white) / 15%);*/
        padding-bottom: 35px;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
    }

    .action-text {
        display: flex;
        padding-bottom: 0.25em;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
    }

    .action-text h1 {
        color: var(--type--h1-nav);
        font-size: 0.5625em;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        padding-left: 0;
    }

    ul li {
        display: inline-block; /* list-item */
        position: relative;
        list-style: none;
        padding-bottom: 7px;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        color: hsl(var(--white));
        font-style: normal;
        font-weight: 600;
        line-height: 29px;
    }

    ul li.list-item--squircledash {
        margin-left: 25px;
    }

    ul li.list-item--squircledash:before {
        content: '';
        position: absolute;
        top: 25%;
        left: 0;
        transform: translateY(50%);
        width: 10px;
        height: 6px;
        display: inline-block;
        background-color: hsl(var(--white) / 50%);
        border-radius: 5px;
        margin-left: -22px;
    }

    ul li span {
        display: inline-block;
        position: relative;
    }

    .menu-content--location {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        padding-top: 20px;
    }

    a.office-location {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
    }

    a.office-location span {
        color: hsl(var(--white));
        font-family: 'Mundial', sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 25px;
    }

    a.office-location span span.icon {
        position: relative;
    }

    a.office-location span span.icon img {
        position: absolute;
        top: 3px;
        left: 7px;
        height: 22px;
        width: 22px;
        opacity: 75%;
    }

    .line-spacer {
        display: flex;
        width: 100%;
        height: 100%;
        transition: all 2500ms ease-in;
    }

    .line-spacer.bottom div {
        margin-top: auto;
        margin-bottom: 0;
    }

    .line--wavy {
        width: 100%;
        --size: 10px;
        --b: 1px;
        --m: 5; /* 0.5 */
        --p: calc(var(--m)*var(--size));
        --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);

        --_g: #0000 calc(99% - var(--b)),#000 calc(101% - var(--b)) 99%,#0000 101%;
        -webkit-mask:
                radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)),var(--_g))
                calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x,
                radial-gradient(var(--R) at left 50% top    calc(-1*var(--p)),var(--_g))
                50%                       calc(50% + var(--size)/2 + var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x;
        mask:
                radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)),var(--_g))
                calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x,
                radial-gradient(var(--R) at left 50% top    calc(-1*var(--p)),var(--_g))
                50%                       calc(50% + var(--size)/2 + var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x;
        background: linear-gradient(90deg, transparent 0%, hsl(var(--white) / 25%) 10%, hsl(var(--white) / 25%) 90%, transparent 100%);
        height: 10px;
        transition: all 2500ms ease-in;
    }

    span.underline-wrapper {
        display: inline-block;
        position: relative;
    }

    .text--blur {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        filter: blur(8px);
    }

    span.underline--paint-1 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 9vw;
        margin-top: 2vw;
        overflow: visible;
        opacity: 95%;
        z-index: -1;
        filter: blur(1px);
        background-image: url(imgs/underline-lollipop.svg);
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    span.underline--wavy--blur {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        margin-left: -21px;
        margin-bottom: 0;
        width: calc(100% + 42px);
        height: 50px;
        z-index: -1;

        -webkit-backdrop-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
        backdrop-filter: blur(2px);

        --size: 15px;
        --b: 15px;
        --m: 0; /* 0.5 */

        --p: calc(var(--m)*var(--size));
        --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
        --_g: #0000 calc(99% - var(--b)),#000 calc(101% - var(--b)) 99%,#0000 101%;
        -webkit-mask:
                radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)),var(--_g))
                calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x,
                radial-gradient(var(--R) at left 50% top
                calc(-1*var(--p)),var(--_g)) 50%
                calc(50% + var(--size)/2 + var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x;
        mask:
                radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)),var(--_g))
                calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x,
                radial-gradient(var(--R) at left 50% top
                calc(-1*var(--p)),var(--_g)) 50%
                calc(50% + var(--size)/2 + var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x;
    }

    span.underline--wavy {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin-left: -21px;
        margin-bottom: 0;
        width: calc(100% + 42px);
        z-index: -2;
    }

    h1 span.underline--wavy {
        --size: 15px;
        --b: 15px;
        --m: 0; /* 0.5 */

        --p: calc(var(--m)*var(--size));
        --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
        --_g: #0000 calc(99% - var(--b)),#000 calc(101% - var(--b)) 99%,#0000 101%;
        -webkit-mask:
                radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)),var(--_g))
                calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x,
                radial-gradient(var(--R) at left 50% top
                calc(-1*var(--p)),var(--_g)) 50%
                calc(50% + var(--size)/2 + var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x;
        mask:
                radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)),var(--_g))
                calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x,
                radial-gradient(var(--R) at left 50% top
                calc(-1*var(--p)),var(--_g)) 50%
                calc(50% + var(--size)/2 + var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x;

        background: linear-gradient(90deg, transparent 0%, hsl(var(--white) / 25%) 10%, hsl(var(--white) / 25%) 90%, transparent 100%);
        height: 50px;
    }

    li span.underline--wavy {
        --size: 10px;
        --b: 5px;
        --m: 0; /* 0.5 */

        --p: calc(var(--m)*var(--size));
        --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
        --_g: #0000 calc(99% - var(--b)),#000 calc(101% - var(--b)) 99%,#0000 101%;
        -webkit-mask:
                radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)),var(--_g))
                calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x,
                radial-gradient(var(--R) at left 50% top    calc(-1*var(--p)),var(--_g))
                50%                       calc(50% + var(--size)/2 + var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x;
        mask:
                radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)),var(--_g))
                calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x,
                radial-gradient(var(--R) at left 50% top    calc(-1*var(--p)),var(--_g))
                50%                       calc(50% + var(--size)/2 + var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x;

        background: linear-gradient(90deg, transparent 0%, hsl(var(--white) / 25%) 10%, hsl(var(--white) / 25%) 90%, transparent 100%);
        height: 25px;
    }

}

@media (min-width: 1450px) {

    #header-and-main {
        min-height: calc(100vh - 6em);
    }

    #footer-wrapper {
        min-height: 6em;
    }

}

@media (max-width: 1900px) {

    h1#headline {
        font-size: 8vw;
        line-height: 8.5vw;
    }

    .text--reduced {
        font-size: 7.5vw;
        line-height: 8.5vw;
    }

    span.underline--paint-1 {
        height: 8.25vw;
    }

}

@media (max-width: 1700px) {

    h1#headline {
        /*font-size: clamp(min(7.5vh, 7.5vh), 7vw, max(7.5vw, 7.5vw));
        line-height: clamp(6.5vw, 9vw, max(19vh, 19vh));*/ /* impacted by max-width on header-and-main */
        letter-spacing: 1.25px;
    }

    .text--opacity {
        opacity: 40%;
    }

}

@media (max-width: 1200px) {

    h1#headline {
        font-size: 7.5vw;
        line-height: 7.75vw;
        letter-spacing: 1px;
    }

    .text--reduced {
        font-size: 6.5vw;
        line-height: 7.75vw;
    }

    span.underline--paint-1 {
        height: 7.25vw;
    }

    .menu-container {
        font-size: var(--nav--mobile);
    }

}

@media (max-width: 900px) {

    button.primaryButtonCTA.navDesktop, a.secondaryButtonCTA.navDesktop, #toastDesktop {
        display: none;
    }

    button.primaryButtonCTA.navMobile, #toastMobile {
        display: none;
    }

    .nav-divider {
        display: none;
    }

    #mobileMenuTrigger {
        display: flex;
    }

    .menu-nav ul li.nav-item a {
        width: auto;
        min-width: 75%;
    }

    .menu-content--nav {
         max-width: inherit;
         margin: auto auto auto 0;
     }

    .menu-content--email {
        max-width: inherit;
        margin: auto auto auto 0;
    }

    /*#mobileMenu {
        display: flex;
    }*/

    .menu-container {
        padding: 150px 42px 40px 42px;
    }

    #toastMobile {
        top: calc(100vh - 140px);
    }

    h1#headline > span.mobile {
        display: block;
    }

    h1#headline > span.desktop {
        display: none;
    }

    h1#headline {
        font-size: 12.5vw; /* 13.14vw */
        line-height: 12.5vw; /* 13.14vw */
        letter-spacing: 2px;
    }

    span.underline--paint-1 {
        height: 12.5vw;
    }

    .text--reduced {
        font-size: 11vw;
        line-height: 12.5vw;
    }

    .text--opacity {
        opacity: 40%;
    }

    #header-wrapper {
        padding: 0;
        height: 148px; /* set equal to <main> margin-top */
    }

    #header-container {
        /*margin: 0 20px;
        padding: 0 22px;*/
    }

    header {
        padding: 42px;
    }

    #blur--linear-gradient {
        grid-template-columns: 20px auto 20px;
        /*width: calc(100% - 42px);*/ /* set equal to section-content ((margin-left + margin-right) + 2*(section-gridlines left-right border-width)) */
    }

    main, .section-gridlines:first-child {
        margin-top: 148px; /* set equal to #header-wrapper height */
    }

    .section-content {
        margin: 0 20px; /* set equal to ((blur--linear-gradient width: calc(% - subtrahend) / 2) - 2*(section-gridlines left-right border-width)) */
        padding: 16px 22px 22px 22px;
    }

    .section-gridlines.gridlines--solid.gridlines--right {
        margin-right: 20px;
    }

    .section-gridlines.gridlines--solid.gridlines--left {
        margin-left: 20px;
    }

    .section-gridlines.gridlines--dashed.gridlines--left-right {
        margin-left: 20px;
        margin-right: 20px;
    }

    .section-gridlines.gridlines--dashed.gridlines--right {
        margin-right: 20px;
    }

    .section-gridlines.gridlines--dashed.gridlines--left {
        margin-left: 20px;
    }

    #co-logo .desktop {
        display: none;
    }

    #co-logo .mobile {
        display: block;
    }

    .toggle-wrapper {
         position: relative;
         padding-right: 20px;
     }

    #toggle--cursor {
        margin: 30px 19px 19px 30px;
    }

    #cursorToast {
        bottom: 22px;
        right: 82px;
    }

    #footer-wrapper footer {
        padding: 0 42px;
    }

}

@media (max-width: 850px) {

    #header-and-main {
        min-height: calc(100vh - 7em);
    }

    #footer-wrapper {
        min-height: 7em;
    }

}

@media (max-width: 750px) {

    #header-wrapper {
        height: 108px;
    }

    header {
        padding: 22px 30px;
    }

    #co-logo {
        padding: 12px 0;
    }

    #co-logo .mobile {
        height: 40px;
        width: auto;
    }

    .menu-container {
        padding: 118px 30px 40px 30px;
    }

    h1#headline {
        font-size: 12.5vw; /* 13.2vw */
        line-height: 12.5vw; /* 13.2vw */
    }

    .text--reduced {
        font-size: 11vw;
        line-height: 12.5vw;
    }

    span.underline--paint-1 {
        height: 12.5vw;
    }

    #blur--linear-gradient {
        grid-template-columns: 15px auto 15px;
        /*width: calc(100% - 42px);*/ /* set equal to section-content ((margin-left + margin-right) + 2*(section-gridlines left-right border-width)) */
    }

    main, .section-gridlines:first-child {
        margin-top: 108px; /* set equal to #header-wrapper height */
    }

    .section-content {
        margin: 0 15px; /* set equal to ((blur--linear-gradient width: calc(% - subtrahend) / 2) - 2*(section-gridlines left-right border-width)) */
        padding: 16px 15px 15px 15px;
    }

    .section-gridlines.gridlines--solid.gridlines--right {
        margin-right: 15px;
    }

    .section-gridlines.gridlines--solid.gridlines--left {
        margin-left: 15px;
    }

    .section-gridlines.gridlines--dashed.gridlines--left-right {
        margin-left: 15px;
        margin-right: 15px;
    }

    .section-gridlines.gridlines--dashed.gridlines--right {
        margin-right: 15px;
    }

    .section-gridlines.gridlines--dashed.gridlines--left {
        margin-left: 15px;
    }
    #footer-wrapper footer {
        padding: 0 30px;
    }

    #footer-wrapper footer p, #footer-wrapper footer p a {
        opacity: 1;
    }

    #footer-wrapper footer p a#link-inline {
        text-decoration-color: hsl(var(--white) / 40%);
    }

    #footer-wrapper footer p span.sparkling > span > svg, #footer-wrapper:hover footer p span.sparkling > span > svg {
        opacity: 0;
    }

    #footer-wrapper:hover footer p span.sparkling-color {
        color: hsl(var(--white) / 75%);
    }

    #footer-wrapper footer p span.sparkling-color {
        pointer-events: none;
        font-weight: 400;
    }

    #footer-wrapper:hover footer p a#link-inline:hover {
        color: hsl(var(--white) / 75%);
        text-decoration-color: hsl(var(--white) / 75%);
        text-decoration-style: solid;
    }

    a#link-inline:hover span.sneakpeek, a#link-inline:hover span.sneakpeek img {
        visibility: hidden;
        opacity: 0;
    }

}

@media (max-width: 600px) {

    html {
        background-color: hsl(var(--theme--lights-on--bg--mobile));
        width: 100vw;
    }

    body {
        background-color: hsl(var(--theme--lights-on--bg--mobile));
        background-position: top -1200px left -1700px;
    }

    main, .section-gridlines:first-child {
        margin-top: 108px; /* set equal to #header-wrapper height */
        padding-bottom: 0;
    }

    #header-and-main {
        min-height: 100vh;
    }

    #header-wrapper {
        height: 108px; /* set equal to <main> margin-top */
    }

    h1#headline {
        font-size: 12.2vw; /* 13vw */
        line-height: 12.2vw; /* 13vw */
    }

    .text--reduced {
        font-size: 11vw;
        line-height: 12.2vw;
    }

    span.underline--paint-1 {
        height: 12.2vw;
    }

}

@media (max-width: 565px) {

    #header-and-main {
        min-height: calc(100vh - 7em);
    }

    h1#headline {
        letter-spacing: 1px;
    }

    #footer-wrapper {
        min-height: 7em;
    }

}

@media (max-width: 500px) {

    #header-wrapper {
        padding: 0;
    }

}

@media (max-width: 425px) {

    #header-and-main {
        min-height: calc(100vh - 8em);
    }

    #footer-wrapper {
        min-height: 8em;
    }

}

/*TOUCH-SCREEN DEVICES*/
@media (pointer: coarse) {

    .fixed--bottom-right {
        display: none;
    }

    * {
        cursor: auto;
    }

}

/*GENERAL iPAD LAYOUTS*/
@media (max-width: 1025px) {}

@media only screen and (device-width: 768px) {}

/*iPAD PORTRAIT LAYOUT:*/
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {}

/*IPAD LANDSCAPE LAYOUT*/
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {}

@media (max-width: 1300px) {}

@media (min-width: 600px) {}

@media (max-width: 600px) {}

@media (max-width: 1150px) {}

@media (max-width: 1000px) {}

@media (max-width: 950px) {}

@media (max-width: 865px) {}

@media (max-width: 850px) {}

@media (max-width: 830px) {}

@media (max-width: 815px) {}

@media (max-width: 800px) {}

@media (max-width: 725px) {}

@media (max-width: 700px) {}

@media (max-width: 600px) {}

@media (max-width: 550px) {}

@media (max-width: 500px) {}

@media (max-width: 450px) {}

@media (max-width: 400px) {}

@media (max-width: 375px) {}

@media (max-width: 250px) {}

@-moz-document url-prefix() {}