p {
    color: var(--contrast-2)
}

.hero-overlay p,
.gb-container-accent-color-section p {
    color: var(--base)
}

.site {
    flex-grow: 1
}

.admin-bar {
    height: calc(100vh - 35px)
}

html {
    height: fit-content
}

.site.container.grid-container {
    width: 100%
}

html {
    scroll-behavior: smooth !important
}

.inside-header .site-logo {
    position: relative;
    top: -62px;
    background: #fff;
    padding: 1.125rem 2rem;
    margin-bottom: -80px
}

.main-navigation .menu-bar-item>a {
    padding-right: 0;
    padding-left: 2rem
}

#mobile-header {
    padding: 1rem
}

#mobile-header .site-logo {
    position: unset;
    max-width: 200px;
    top: unset;
    margin-bottom: unset;
    padding-top: unset
}

#mobile-header .menu-bar-items {
    display: none
}

#mobile-header .menu-toggle {
    background: var(--accent);
    color: var(--base);
    line-height: unset;
    padding: .75rem 1.5rem;
    border-radius: 8px
}

@media (max-width:767px) {
    .separate-containers .inside-article {
        padding: 1rem
    }
}

.gb-query-loop-item a {
    color: var(--contrast)
}

.gb-image-vertical-4-5 {
    aspect-ratio: 4 / 5;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.gb-image-vertical-5-3 {
    aspect-ratio: 5 / 3;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.gb-headline-with-org span:first-child::before {
    content: "With: ";
    color: var(--light-text)
}

.gb-headline-post-author::before {
    content: "By: ";
    color: var(--light-text)
}

.terms-wrapper {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1.5em
}

.terms-wrapper .post-term-item {
    background: var(--contrast-3);
    padding: .5em 1em;
    display: inline;
    border-radius: .5rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.125em
}

.terms-wrapper.accent .post-term-item {
    background: var(--base-3);
    color: var(--accent)
}

.read-time {
    display: inline-flex;
    column-gap: .5rem
}

.read-time .label {
    color: var(--light-text)
}

.shuk-body .post-time-meta {
    display: inline-flex;
    column-gap: .5rem
}

.post-time-meta time,
.post-time-meta .read-time {
    font-size: 1.125rem
}

.wp-block-image img {
    border-radius: .5rem
}

.google-maps {
    width: 100%;
    height: 350px
}

.hero-with-columns .featured-image-wrapper figure {
    height: 100%
}

.position-absolute-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.home .gb-container-offwhite-section#active-past-projects {
    background-color: var(--base)
}

.testimonial-content {
    font-style: italic
}

.gb-container-offwhite-section {
    width: 100%
}

.shuk-body.single-project .recent-news {
    background-color: var(--base)
}

.shuk-body.single-project .purple-footer .gb-shape svg {
    fill: var(--base)
}

.inside-article a:not(.gb-button) {
    color: var(--accent);
    text-decoration: underline
}

.inside-article a:hover:not(.gb-button) {
    color: var(--contrast);
    text-decoration: none
}

.shuk-body.shuk-body :is(h1, h2, h3, h4, h5, h6) a {
    color: var(--contrast);
    text-decoration: none
}

.hero-overlap-centered {
    --vertical-overlap: -24rem;
    position: relative;
    top: var(--vertical-overlap);
    margin-bottom: var(--vertical-overlap)
}

@media screen and (max-width:768px) {
    .hero-overlap-centered {
        top: unset;
        margin-bottom: unset
    }

    .hero-overlap-centered .shadowed-outline {
        border: unset;
        box-shadow: unset
    }
}

@media screen and (min-width:768px) {

    .home-hero-background,
    .hero-overlap-home {
        --vertical-overlap: 42rem
    }

    .home-hero-background {
        min-height: var(--vertical-overlap)
    }
}

.hero-overlap-home {
    min-height: var(--vertical-overlap);
    display: flex;
    align-items: center;
    position: relative;
    top: calc(var(--vertical-overlap)*-1);
    margin-bottom: calc(var(--vertical-overlap)*-1);
    padding-block: 2rem
}

@media screen and (max-width:768px) {
    .hero-overlap-home {
        height: unset;
        padding-block: 1.25rem;
        top: unset;
        margin-bottom: unset;
        padding-inline: 1rem
    }

    .hero-overlap-home .shadowed-outline {
        border: unset;
        box-shadow: unset
    }
}

.hero-overlap-simple .gb-headline-text {
    color: var(--contrast)
}

@media screen and (min-width:768px) {

    .hero-overlap-simple,
    .hero-background-simple {
        --vertical-overlap: 25rem;
        min-height: var(--vertical-overlap);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    .hero-overlap-simple {
        position: relative;
        top: calc(var(--vertical-overlap)*-1);
        margin-bottom: calc(var(--vertical-overlap)*-1)
    }

    .hero-overlap-simple .gb-headline-text {
        color: var(--base)
    }
}