@property --glass-h-offset {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 50%;
}
@property --glass-v-offset{
    syntax: "<percentage>";
    inherits: true;
    initial-value: 160%;
}

:root {
    --content-width: 1200px;
    --header-logo-height: 210px;
    --header-footer-padding: 5.75rem 0;
    --desktop-page-padding: calc(calc(100vw - var(--content-width)) / 2);
    --border-radius-m: 1.7rem;
    --border-radius-s: 1rem;
    --header-color: white;
    --font-family: 'Adwaita Sans', Arial, Helvetica, sans-serif;
    --font-headline: 'Archivo Black', Arial, Helvetica, sans-serif;
    --content-gap: var(--margin-l);
    font-size: 16pt;
    font-family: var(--font-family);
    --project-head-family: 'Adwaita Sans', Arial, Helvetica, sans-serif;
    --gradient-vro: linear-gradient(90deg,rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
    --gradient-bgy: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
    --gradient-b-r: linear-gradient(in oklab 90deg, rgb(from #2281d8 r g b / 1) 0%, rgb(from #e97f24 r g b / 1) 100%);
    --glass-background-gradient: radial-gradient(circle at var(--glass-h-offset, 50%) var(--glass-v-offset, 160%), rgb(from var(--primary-color-0) r g b / .5) 0%, rgb(from var(--neutral-color-1) r g b / .2) 100%);
}

h1, h2, h3, h4, h5 {
    font-weight: 900;
}

@font-face {
    font-family: 'Adwaita Sans';
    src: url('/core-content/fonts/AdwaitaSans-Regular.ttf');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Adwaita Sans';
    src: url('/core-content/fonts/AdwaitaSans-Italic.ttf');
    font-style: italic;
    font-display: swap;
}

/* latin-ext */
@font-face {
    font-family: 'Archivo Black';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/archivoblack/v21/HTxqL289NzCGg4MzN6KJ7eW6CYKF_i7y.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Archivo Black';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/archivoblack/v21/HTxqL289NzCGg4MzN6KJ7eW6CYyF_g.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    margin-top: var(--header-logo-height);
    &:has(.landing-splash) {
        margin-top: 0;
    }
    &:has(#user-menu-bar) > header {
        top: 1.8em;
    }
    section {
        padding: var(--margin-xxl) 0 calc(var(--margin-xxl) + var(--margin-xs));
    }
    @media only screen and (max-width:35em) {
        margin-top: 1em;
    }
}
#user-menu-bar {
    position: absolute;
    top: 0;
    left: 0;
}
/* footer section {
    padding: unset;
} */
#app-header .directory--group li {
    /* position: initial; */
}
body > header {
    font-family: var(--font-headline);
    justify-content: space-between;
    font-size: 1.1rem;
    text-transform: uppercase;
    position: absolute;
    top: 0;
    padding: 0 var(--desktop-page-padding);
    display: flex;
    align-items: flex-start;
    z-index: 1;
    background-color: unset;
    --header-width: calc((100% + 1px) - 1px);
    width: var(--header-width);
    z-index: var(--project-modal-z-index);
    
    li:has([href='/contact/']) {
        display: grid;
    }
    [href='/contact/'] {
        color: var(--header-color);
        background: black;
        font-size: small;
        white-space: nowrap;
        place-self: center;
        border-radius: 1em;
        padding: 0.5em 0.8em;
    }
    #he-atomic-masthead {
        fill: var(--header-color);
        width: var(--header-logo-height);
        height: var(--header-logo-height);
    }
    nav {
        a {
            --_anchor-element-color: white;
            --_anchor-hover-color: rgb(255 255 255 / .8);
            --_anchor-visited-color: white;
        }
    }
    /* .navigation--main > li:first-of-type {
        margin: 0;
    } */
    .header-expanded-panel {
        width: var(--directory-width);
        li {
            position: initial;
            /* margin: 0;
            padding: 0; */
        }
    }
    .header-expanded-panel ul {
        margin-left: 0;
    }
    .service-floater,[href="/services"] {
        display: none;
    }
    @media only screen and (min-width: 35.01em) {
        [href="/services"] {
            display: block;
        }
        .services-nav-panel {
            display: none;
            border-radius: var(--margin-s);
            overflow: hidden;
            box-shadow: 0px 10px 20px rgb(0 0 0 / .4);
            margin-top: 10px;
            ul {
                display: flex;
                flex-direction: column;
                a {
                    font-size: .8em;
                    white-space: nowrap;
                }
            }
            .nav-floater {
                position: absolute;
                height: 100%;
                width: 100%;
                background-size: cover;
                opacity: .4;
                background-position: center;
                z-index: -1;
                isolation: isolate;
                &:before {
                    content: "";
                    height: 100%;
                    width: 40%;
                    background-image: linear-gradient(to right, black 50%, transparent);
                    display: block;
                }
            }
        }
        li:hover .services-nav-panel {
            display: flex;
            position: absolute;
            left: 0;
            background-color: black;
            /* width: max-content; */
            z-index: 100000;
            li:hover .service-floater {
                /* display: block; */
                /* position: absolute; */
                /* right: 0; */
            }
        }
        ul.directory--submenu {
            position: relative;
            left: 50% !important;
            transform: translateX(-50%);
            li {
                background-color: black;
                white-space: nowrap;
                color: white;
                font-size: small;
                margin: 0;
                padding: 0;
                a {
                    display: block;
                    --anchor-hover-color: var(--_anchor-hover-color, var(--font-body-color));
                }
                &:hover {
                    /* color:  !important; */
                }
        }
    }
}

    @media only screen and (max-width: 1080px) {
        nav ul {
            flex-wrap: wrap;
            justify-content: flex-end;
        }
    }

    @media only screen and (max-width: 35em) {
        
        width: 100vw;
        height: 100vh;
        transform: translateX(200%);
        transition: transform .6s;
        flex-direction: column;
        position: fixed;
        isolation: isolate;
        overflow: hidden;
        /* background: rgb(88, 232, 237); */
        background: var(--glass-background-gradient);
        backdrop-filter: blur(10px) brightness(30%);
        z-index: calc(var(--project-modal-z-index) - 2);
        justify-content: unset;
        
        nav ul {
            flex-direction: column;
            margin-left: 2rem;
        }
    }
}
a {
    --_anchor-element-color: var(--branding-color-2);
    --_anchor-hover-color: var(--branding-color-1);
}
main > .landing-splash {
    padding-top: calc(var(--header-logo-height) + 1em);
    height: max-content;
    @media only screen and (max-width: 35em) {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

.landing-splash {
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-image: var(--_background, url("/res/poster.jpg"));
    background-origin: border-box;
    position: relative;
    > * {
        position: relative;
    }
    .landing-splash-placeholder {
        position: absolute;
        inset: 0;
        object-fit: cover;
        height: 100%;
        width: 100%;
        filter: blur(13px);
        z-index: -1;
    }
    &:before {
        content: "";
        background-image: var(--landing-splash-gradient, linear-gradient(75deg,rgb(41 121 113 / 1) 0%, rgb(68 0 130 / 1) 100%));
        position: absolute;
        inset: 0;
        mix-blend-mode: overlay;
        z-index: 0;
        opacity: 0.5;
    }
    h1 {
        font-size: 4em;
        margin: 0;
        text-align: left;
        width: 100%;
    }
    @media only screen and (max-width:35em) {
        background-image: var(--_responsive, var(--_background));
        height: max-content;
        margin-bottom: 10vh;
        padding: var(--margin-s);
    }
}

:has(.odd-shape) {
    position: relative;
    overflow-x: clip;
    /* isolation: isolate;
    & > * {
        z-index: 1;
    } */
}

.organic-border {
    border-image-source: url(/res/odd-border-default.svg);
    border-image-slice: 12%;
    border-image-repeat: stretch;
}

.organic-box {
    mask: url(/res/organic-mask.svg);
    mask-type: alpha;
    mask-size: 100% 100%;
}

.odd-shape {
    position: absolute;
    fill: var(--background-color-1);
    pointer-events: none;
    z-index: 0;
    &.odd-shape--top {
        top: 0;
        left: 0;
        right: 0;
    }
    &.odd-shape--bottom {
        bottom: -1px;
        left: 0;
        right: 0;
    }
}

.callout-highlight, .em-callout em {
    font-style: normal;
    display: inline-block;
    position: relative;
    isolation: isolate;
    --highlight-color: var(--primary-color-4);
    &::before{
        content: "";
        width: 110%;
        height: 50%;
        position: absolute;
        bottom: 0;
        left: -5%;
        background-color: var(--highlight-color);
        z-index: -1;
    }
}

.button.button.button, .glass-card, a.glass-card.button {
    border-radius: var(--border-radius-m);
    border: none;
    position: relative;
    /* background: unset; */
    --y-offset: calc(100vh / (var(--viewport-y) - var(--pos-y, 1px)));
    text-shadow: 0 0 3px black;
    background-color: hsl(from var(--neutral-color-2) h s l / .5);
    background-image: var(--glass-background-gradient);
    backdrop-filter: blur(10px);
    --_anchor-visited-color: white;
    --_anchor-element-color: white;
    box-shadow: 15px 0 20px 0px rgb(0 0 0 / .1);
    &::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        border-radius: inherit;
        border: 1.5px solid transparent;
        background: linear-gradient(rgb(255 255 255 / .3), rgb(255 255 255 / .1)) border-box;
        mask: linear-gradient(black) border-box, linear-gradient(black) padding-box;
        mask-composite: subtract;
        pointer-events: none;
    }
    input,
    textarea,
    select,
    [cobalt-component] {
        width: 100%;
        background-color: rgb(from var(--neutral-color-2) r g b / .7);
        border: 1px solid transparent;
        box-shadow: 5px 5px 18px rgb(from black r g b / 0.6), -5px -5px 18px rgb(from var(--primary-color-1) r g b / 0.2);
        &:focus,
        &:focus-within,
        &:focus-visible {
            border: 1px solid var(--primary-color-1);
        }
    }
}

.glass-card {
    padding: var(--margin-xl);
    box-sizing: border-box;
}

.button.button.button {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 1.5em;
}

button.button.button.button, a.button.button.button {
    --_anchor-element-color: rgb(255 255 255 / .9);
    --glass-h-offset: 50%;
    --glass-v-offset: 160%;
    color: var(--_anchor-element-color);
    scale: 1;
    transition: color .2s, --glass-h-offset .2s, --glass-v-offset .2s, scale .2s;
    &:hover {
        --_anchor-hover-color: rgb(255 255 255 / 1);
        color: var(--_anchor-hover-color);
        --glass-h-offset: 50%;
        --glass-v-offset: 200%;
        scale: 1.1;
    }
}

#clip-paths {
    display: none;
}

.section-title, .cobalt-posts--header-group h1.title{
    margin: 1em 0 0;
    text-align: center;
    font-size: 3em;
    width: min(var(--content-width), 100%);
    margin: 0 auto;
    @media only screen and (max-width: 35em) {
        width: 100%;
    }
}

.gradient-title,.cobalt-posts--header-group h1.title {
    background: var(--_gradient, linear-gradient( 76.9deg,  rgba(255,90,90,1) 27.2%, rgba(130,5,255,1) 79.9% ));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

:is(.two-up, .three-up) {
    display: flex;
    grid-template-rows: 7rem [content-start] 1fr [content-end] 12rem;
    grid-template-columns: 1fr 400px 400px 1fr;
    gap: var(--content-gap, 3em);
    justify-content: center;
    box-sizing: border-box;
    flex-wrap: wrap;
    max-width: var(--content-width);
    margin: 0 auto;
    hgroup {
        /* width: 100%;
        flex-grow: 1; */
        border: none;
        display: block;
        /* padding: 1.6rem 0 0 1.6rem; */
        margin-bottom: 0;
        box-sizing: border-box;
        text-align: left;
        width: 100%;
        flex-grow: 1;
    }
    .up {
        --multiplier: .5;
        width: calc(calc(100% * var(--multiplier)) - var(--content-gap));
        box-sizing: border-box;
        @media only screen and (max-width: 35em) {
            width: 100%;box-sizing: border-box;margin: var(--margin-m);
        }
    }
    .half-width {
        --multiplier: .5;
    }
    
    .third-width {
        --multiplier: .33;
    }
    
    .two-third-width, .two-thirds-width {
        --multiplier: .66;
    }
}

.iconed-list {
    li {
        display: flex;
        align-items: center;
        gap: var(--content-gap);
        .body {
            max-width: 36ch;
        }
    }
    i {
        font-size: 5rem;
        width: 5.5rem;
        height: 5.5rem;
    }
}

.rounded-box {
    border-radius: var(--border-radius-m);
}

/* .two-up {
    grid-template-columns: 1fr calc(var(--content-width) / 2) calc(var(--content-width) / 2) 1fr;
}

.three-up {
    grid-template-columns: 1fr calc(var(--content-width) / 3) calc(var(--content-width) / 3) 1fr;
} */

#subscribers {
    margin: calc(100vh / 3) 0;
    .fine-print {
        font-size: 0.5em;
        text-align: center;
        width: calc(var(--content-width) / 2);
        display: block;
        margin: 0 auto;
        text-shadow: 0 0 4px black;
        @media only screen and (max-width: 35em) {
            width: 100%;
            margin: 0;
        }
    }
}

ul.tilted-splits {
    margin: 0;
    padding: 0;
    list-style: none;
    .callout-split {
        color: white;
        font-family: 'Archivo Black';
        font-size: 2rem;
        overflow: hidden;
        border-radius: var(--margin-l);
        margin: 1em auto;
        /* rotate: var(--rotation); */
        max-width: calc(var(--content-width) / 2);
        padding: unset;
        /* width: 100vw; */
        
        
        
        
        
        
        span {
            display: inline-flex;
            width: 50%;
            height: 100%;
            justify-content: center;
            padding: .3rem 1rem;
            align-items: center;
            /* background: var(--primary-color-1); */
            box-sizing: border-box;
            &:last-of-type {
                background: rgb(from var(--primary-color-2) r g b / .1);
                text-transform: uppercase;
                color: var(--primary-color-2-fg);
            }
        }
        @media only screen and (max-width: 35em) {
            font-size: 1.25rem;
        }
    }
}




/* Highlights text, override the color with inline styling and the --highlight-color var */
.callout-highlight {
    display: inline-block;
    position: relative;
    isolation: isolate;
    --highlight-color: var(--purple);
    &::before{
        content: "";
        width: 110%;
        height: 50%;
        position: absolute;
        bottom: 0;
        left: -5%;
        background-color: var(--highlight-color);
        z-index: -1;
    }
}

.service-trusted-by {
    text-align: center;
    a {
        text-decoration: none;
    }
}

.featured-client {
    filter: saturate(0) contrast(50%) invert(1);
    height: 122px;
    margin: 2.5em;
    transition: filter .3s;
    width: auto;
    &:hover {
        filter: saturate(0) contrast(100%) invert(1);
    }
    @media only screen and (max-width: 35em) {
        width: 80%;
        height: auto;
        padding: 0;
        margin: var(--margin-l) 0;
        box-sizing: content-box;
    }
}
#as-seen .featured-client {
    max-width: 260px;
    object-fit: contain;
}
horizontal-scroll.trusted-by .scrollable-track {
    padding: 0 20vh;
}


/* A rounded container like the 'what we do' section on the landing page */
.main-container, .rounded-container, .error_page {
    width: min(var(--content-width), 100%);
    padding: 1.2rem 1.2rem 2.5rem;
    margin: 0 auto;
    box-sizing: border-box;
    .transparent {
        background: transparent;
        box-shadow: unset;
    }
    hgroup {
        border-bottom: unset;
    }
    article {
        padding: 0 0 0 1.6rem;
    }
}

.rounded-container, .error_page {
    /* background: var(--neutral-color-1);
    color: var(--neutral-color-1-fg); */
    /* border-radius: var(--global-border-radius); */
    /* border-radius: 0; */
    /* box-shadow: var(--project-box-shadow); */
    @media only screen and (max-width: 35em) {
        width: 100%;
    }
}

.error_page {
    text-align: center;
    margin-bottom: 8em;
    .error_code {
        width: 100%;
        overflow-x: scroll;
        text-align: left;
    }
}

.inverted, .inverted .rounded-container {
    background: var(--neutral-color-1);
    color: var(--neutral-color-1-fg);
    box-shadow: none;
    a {
        --_anchor-element-color: var(--branding-color-2);
        --_anchor-hover-color: var(--branding-color-1);
    }
}

.inverted h1.section-gradient {
    text-shadow: none;
}


#main-testimonials .client-quote:nth-of-type(even){
    margin-left: auto;
}

modal-container:has(.newsletter-modal) {
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(10px);
}

.newsletter-modal {
    background:transparent;
    width: 100%;
}

.newsletter-modal .rounded-container {
    background: var(--deep-purple);
    color: white;
    justify-content: center;
}

.newsletter-modal h1.section-gradient {
    color: transparent;
}

.newsletter-modal fieldset {
    background: transparent;
}

.newsletter-modal .list-panel {
    border: none;
}

.newsletter-modal a {
    color: white;
}

.newsletter .list-panel li {
    background: var(--neutral-color-2);
    color: var(--neutral-color-2-fg);
}

.newsletter .list-panel li:nth-of-type(odd) {
    background: var(--neutral-color-1);
    color: var(--neutral-color-1-fg);
}

.newsletter input {
    /* background: var(--deep-purple);
    border: none;
    margin-top: .3rem;
    color: white; */
}
form-request fieldset {
    background: transparent;
}


.landing-main--splash {
    position: absolute;
    top: 0;
    left: 0;
    height: 80vh;
    width: 100%;
    img {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
    }
}

.landing-primary-section {
    margin-top: 35vh;
}

.blockeditor--quote-block {
    background: var(--background-color-1);
}


.cobalt-posts--public-index {
    width: min(var(--content-width), 100%);
    padding: 0;
}

footer {
    display: grid;
    flex-wrap: wrap;
    margin: 0 auto;
    /* width: var(--content-width); */
    padding: 3rem;
    background: black;
    color: var(--background-color-1-fg);
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: 20ch 20ch 20ch 20ch 1fr;
    grid-template-rows: 1fr 8lh;
    .branding {
        grid-column: 5 / span 1;
        justify-self: end;
        align-self: start;
        grid-row: 1 / span 2;
    }
    gap: 1em;
    .footer-credits {
        display: block;
        /*! width: 100%; */
        align-self: flex-end;
        grid-column: 2 / span 4;
        justify-self: center;
        align-self: center;
    }
    
    a.footer-credits {
        grid-column: 5 / span 1;
        grid-row: 1 / span 1;
        align-self: end;
        justify-self: end;
        width: 18rem;
    }
    .footer-credits, a.footer-credits {
        @media only screen and (max-width: 35em) {
            width: 100%; 
            display: flex; 
            flex-direction: column;
            align-self: auto;
        }
    }
    section {
        display: flex;
        justify-content: space-between;
        padding: 0;
    }
    .foot-primary {
        width: 100%;
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / span 5;
        grid-row: 1 / span 1;
    }
    nav {
        display: grid;
        flex-wrap: wrap;
        flex-grow: 1;
        /*! gap: 2.5em; */
        grid-template-columns: repeat(4, 20ch);
        grid-column: 1 / span 4;
        grid-row: 1 / span 1;
        gap: 1em;
        > div {
            width: 100%;
            justify-self: left;
            &.social-links {
                width: 100%;
                grid-column: 1 / span 4;
            }
        }
        .directory--group li {
            margin: 6px 0;
            a {
                font-weight: bold;
                text-decoration: none;
                font-size: 0.8em;
                color: var(--background-color-0-fg);
            }
        }
        
    }
    h1.route-group {
        text-transform: uppercase;
        font-size: 1.2rem;
        margin-bottom: 0.3em;
    }

    .branding #he-atomic-masthead{
        fill: currentColor;
        width: 18rem;
        height: 18rem;
        margin-top: -0.2em;
        /*! margin-right: -1.2rem; */
        @media only screen and (max-width: 35em) {
            width: 100%
        }
    }
    a, a:visited:not(.button) {
        color: var(--background-color-0-fg);
        :hover:not(.button) {
            color: var(--background-color-1-fg);
            /*! width: 18rem; */
            /*! display: block; */
        }
    }
    & .social-media {
        justify-content: flex-start;
        a {
            color: var(--background-color-1-fg);
        }
        li {
            padding-right: .4rem;
            a.subscribeto img {
                opacity: .6;
                :hover img {
                    opacity: 1;
                }
            }
        }
    }
    .chamber {
        font-size: .7rem;
        /*! margin-top: 1rem; */
        @media (max-width: 35em) {
            width: 100%;
        }
        img {
            width: 100px;
            height: 100px;
            object-fit: contain;
        }
    }
    @media only screen and (max-width: 1450px) {
        display: flex;
        nav {
            display: flex;
            gap: var(--margin-l);
            > div {
                width: min(20ch, 100%);
            }
        }
        .foot-primary {
            display: flex;
            flex-wrap: wrap;
        }
        .branding {
            display: flex;
        }
    }
}