/* global */
:root {
  --sc-tan: #f6efd1;
  --sc-tan-faded: #f6efd1bf;
  --sc-aqua: #48aed4ff;
  --sc-aqua-faded: #48aed4bf;
  --sc-rust: #d4993c;
  --sc-font: "urbane-rounded";
}
h1, h2 {
        font-weight: normal;
}
.row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
}
.col {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
}
body {
        padding: 0;
        margin: 0;
        font-family: var(--sc-font);
        background-color: var(--sc-tan);
        color: #555;
        overflow-y: scroll;
        overflow-x: hidden;
}
body::selection {
        background-color: var(--sc-aqua);
        color: var(--sc-tan);
}
.logo {
        height: 150px;
        cursor: pointer;
}
.logo-title {
        font-family: var(--sc-font);
        font-size: 5em;
        color: var(--sc-tan);
        line-height: 0.75em;
        cursor: pointer;
        user-select: none;
}
.blue-section {
        background: linear-gradient(to right, var(--sc-aqua), var(--sc-aqua-faded));
        backdrop-filter: blur(10px);
        color: var(--sc-tan);
        width: 100vw;
        margin: 0;
}
.blue-section::selection {
        background-color: var(--sc-tan);
        color: var(--sc-aqua);
}
.masthead {
        background: linear-gradient(to bottom, var(--sc-aqua), var(--sc-aqua-faded)), var(--sc-tan);
        padding: 2em 0 0em 0;
        position: sticky;
        top: 0;
        z-index: 1;
}
.top-bleed {
        background: var(--sc-aqua);
        height: 100vh;
        position: absolute;
        top: 0;

        /* css bug causes element to disappear if this is set to -100vh */
        transform: translateY(-99.99vh); 
}
.logo-section { align-items: flex-end; }
.nav {
        padding: 1em;
}
.nav-item {
        cursor: pointer;
        padding: 1em;
}
.nav-item:hover {
        background-color: #00000010;
}
.content {
        letter-spacing: 0.3px;
        line-height: 1.5em;
        position: relative;
}
.content > .no-mobile {
        display: inherit;
        flex-direction: inherit;
        align-items: inherit;
        justify-content: inherit;
}
.top-art {
        margin-bottom: 3em;
}
h1, h2 {
        font-family: var(--sc-font);
        line-height: 1.1em;
}
h1.big { font-size: 3em; }
.contact-btn {
        border: none;
        background-color: var(--sc-rust);
        padding: 0.7em 1.4em;
        color: var(--sc-tan);
        font-size: 1.3em;
        border-radius: 0.5em;
        margin: 0.3em 0 1em 0;
        cursor: pointer;
}
.footer,
.footer .nav-item {
        font-family: var(--sc-font);
        font-size: 1em;
        color: #555;
        padding: 0.5em;
}
.footer > .nav { padding-top: 0; }
.editable { pointer-events: auto; }
.spacer { height: 1em; }
.hide { display: none; }
.mobile-only { display: none; }
.bg-blur {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        background: #f6efd140;
        backdrop-filter: blur(0px);
        opacity: 0;
        pointer-events: none;
        transition: 0.3s ease-in-out all;
}
/* global */



/* home */
.desktop-home-content {
        display: inherit;
        flex-direction: inherit;
        align-items: inherit;
        justify-content: inherit;
}
.home-section-1,
.home-section-2 {
        width: 820px;
        padding: 2em 0;
}
.home-section-1 > img {
        margin-left: 25px;
}
.home-section-1 .stroke {
        margin-left: 8.5em;
        transform: scaleX(1.2);
        margin-top: 0.1em;
}
.home-section-2 > img {
        margin-left: -44px;
}
.home-section-3,
.home-section-3 > span {
        margin: 2em 0;
}
.home-section-4 {
        display: flex;
        flex-direction: column;
        padding: 3em 0;
}
.home-section-4 .stroke {
        margin-top: 0.2em;
}
.contact-btn-light {
        border: none;
        background-color: var(--sc-tan);
        padding: 0.7em 1.4em;
        color: var(--sc-aqua);
        font-size: 1.3em;
        border-radius: 0.5em;
        box-shadow: 0 3px 7px #00000059;
        margin: 0.3em 0 1em 0;
        cursor: pointer;
}
.certs {
        margin-top: 1em;
        gap: 1em;
}
.certs > img { height: 83px; }
.home-section-2 .laptop-img {
        margin-left: unset;
}
/* home */



/* team */
.team-member {
        width: 820px;
        margin-top: 6em;
}
.team-member h1 { margin-bottom: 0; }
.team-member .bio {
        margin-top: 1em;
        white-space: pre;
        text-wrap: auto;
}
.headshot { margin-right: 11px; }
.headshot-spot {
        position: absolute;
        transform: scale(1.05);
}
.headshot-photo {
        position: relative;
        margin: 9px;
}
.headshot-shadow {
        position: absolute;
        transform: translate(14px, 16px);
        filter: grayscale(1) brightness(0) blur(15px);
        opacity: 0.3;
}
/* team */



/* services */
.service {
        width: 820px;
        align-items: flex-start;
        margin-bottom: 3em;
}
/* services */



/* testimonials */
.quote {
        width: 820px;
        align-items: flex-start;
        margin-bottom: 3em;
        font-family: georgia;
        font-style: italic;
}
.quote .by {
        font-family: var(--sc-font);
        font-style: normal;
        margin-top: 0.5em;
}
/* testimonials */



/* faq */
.question > .row {
        margin-bottom: -1px;
        justify-content: space-between;
        cursor: pointer;
        pointer-events: none;
}
.question > .row img {
        width: 20px;
        transform: scaleY(-1);
}
.question > * {
        box-sizing: border-box;
}
.question {
        width: 820px;
        align-items: flex-start;
        margin-bottom: -1px;
        transition: ease-in-out 0.3s margin-bottom;
}
.question > div {
        width: 100%;
        padding: 1em;
        border: 1px solid black;
        margin-bottom: -1px;
}
.question .body {
        background: #0000001a;
        transition: ease-in-out 0.3s all;
}
.question.collapsed > div {
        margin-bottom: 0px;
}
.question.collapsed .body {
        height: 0px;
        width: 100%;
        border: 0px solid black;
        padding: 0;
        opacity: 0;
}
.question > div {
        margin-bottom: 0px;
}
.question.collapsed img {
        transform: scaleY(1);
}
/* faq */



/* contact */
.form-section {
        gap: 1em;
        margin-bottom: 1.5em;
}
.form-item {
        align-items: flex-start;
}
.form-item input {
        height: 100%;
        padding: 1em;
        font-size: 1.1em;
        letter-spacing: 0.03em;
        border-radius: 7px;
        border: 1px solid #808080;
}
#first-name { width: 402px; }
#last-name { width: 402px; }
#email, #phone { width: 820px; }
#message {
        width: 820px;
        height: 120px;
        padding: 1em;
        font-size: 1.1em;
        letter-spacing: 0.003em;
        border-radius: 7px;
        border: 1px solid #808080;
        resize: none;
}
#submit {
        font-size: 1.1em;
        padding: 0.5em 1em;
        margin-top: 1em;
}
.label {
        margin-bottom: 0.3em;
}
/* contact */



/* careers */
.career-message {
        width: 820px;
        align-items: flex-start;
        margin-bottom: 3em;
}
#resume {
        font-family: var(--sc-font);
        width: 100%;
        font-size: 1.1em;
}
/* careers */



/* submit */
.submit-message {
        margin: 4em 0;
}
/* submit */




/* global ovverides */
.slide-in {
        opacity: 0;
        transform: translateY(-10px);
        transition: 0.3s ease-out opacity, 0.3s ease-out transform;
}
.fade-in {
        opacity: 0;
        transition: 1s ease-out opacity;
}
/* global ovverides */



/* mobile */
@media screen and (max-width:1040px) {
        body {
                font-size: 1em;
                margin-bottom: 1em;
        }
        .content {
                position: relative;
                transform: translateX(0px);
                transition: 0.3s ease-in-out all;
        }
        .no-mobile { display: none !important; }
        .mobile-only { display: initial; }
        .logo { height: 70px; }
        .logo-title {
                font-size: 1.8em;
                line-height: 1em;
        }
        .bottom-nav-wrap {
                width: 100vw;
                height: 100vh;
                height: 100dvh; /* improved experience on modern devices */
                position: fixed;
                display: flex;
                margin: 0;
                top: 0;
                transition: 0.3s ease-in-out opacity, 0.3s ease-in-out backdrop-filter;
                pointer-events: none;
        }
        .bottom-nav-wrap > .blue-section {
                margin-top: auto;
                backdrop-filter: blur(10px);
                position: relative;
                z-index: 1;
        }
        .logo-section {
                align-items: center;
        }
        .logo {
                margin-right: 1em;
        }
        .mobile-menu-btn {
                height: 30px;
                pointer-events: all;
                position: relative;
                padding: 1em;
                padding-left: 0.5em;
        }
        .mobile-menu-items {
                background: var(--sc-aqua-faded);
                backdrop-filter: blur(10px);
                position: fixed;
                top: 0;
                right: 0;
                padding-top: 9em;
                padding-bottom: 1em;
                transition: 0.3s ease-in-out all;
                pointer-events: all;
                height: 100vh;
                color: var(--sc-tan);
                /* border-radius: 1em 0 0 0; */
                transform: translateX(132px);
                z-index: 1;
        }
        h1.big {
                font-size: 2.5em;
                text-align: center;
                padding: 0 2em;
                box-sizing: border-box;
        }
        .top-art {
                width: 180px;
        }
        h1 { font-size: 1.6em; }
        h2 { font-size: 1.1em; }
        .nav { padding: unset; }
        .nav-item { padding: 0.6em 1em; }

        /* home */
        .mobile-home-content {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 3em;
                overflow-x: hidden;
                overflow-x: clip;
        }
        .mobile-home-content > .narrow {
                width: 100%;
                max-width: 600px;
        }

        .home-section-1 {
                padding: unset;
                width: 100%;
        }
        .home-section-2 {
                padding: unset;
                margin-top: 3em;
                width: 100%;
                gap: 1em;
        }

        .home-section-1 .stroke {
                margin: unset;
                margin-right: -1em;
                transform-origin: left center;
                transform: scaleX(1.2);
        }

        .home-section-1 > span,
        .home-section-2 > span {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 0 1em;
                text-align: center;
        }

        .home-section-3 {
                width: auto;
                padding: unset;
                margin: unset;
                margin-top: 3em;
        }
        .home-section-3 > span {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin: unset;
        }
        .home-section-3 > video {
                width: 660px;
        }

        .home-section-4 {
                width: 100%;
                align-self: center;
                margin: unset;
                margin-top: 8px;
                backdrop-filter: blur(10px);
        }
        .home-section-4 > span {
                width: inherit;
        }
        .home-section-4 > span > h1 {
                width: inherit;
                text-align: center;
                padding: 0 1em;
                box-sizing: border-box;
        }
        .home-section-4 .stroke {
                width: inherit;
        }
        .certs {
                margin-top: 3em;
                display: flex;
                flex-direction: row;
                gap: 2em;
        }
        .certs > img {
                height: 60px;
        }
        /* home */

        /* contact */
        #contact-form {
                display: flex;
        }
        .form-section { width: 100%; }
        .team-member { margin: 3em 0; }
        #contact-form { width: 100%; }
        .form-item {
                width: 100%;
                padding: 0 2em;
        }
        .form-item > input,
        .form-item > textarea {
                width: 100% !important;
        }
        .label {
                margin-bottom: 0.3em;
        }
        /* contact */

        .team-member,
        .service,
        .quote,
        .question,
        .career-message {
                width: 100%;
                box-sizing: border-box;
                padding: 0 2em;
        }
        .submit-message {
                padding: 0 1em;
                text-align: center;
                line-height: 1.5em;
        }
}
/* mobile */