/*----------- DESKTOP / WIDE -----------*/

@media(min-width: 901px){
    html, body {
        overscroll-behavior-y:none;
    }

    body {
        --Team-Section-Width:85vw;
    }

    .download-proposal-btn {
        transition:text-shadow 0.25s ease-in-out;
    }
    
    .download-proposal-btn:hover {    
        text-shadow: 2px 2px 3px rgba(0,0,0,0.12)
    }

    .card-back-content img.screenshot {
        width: 50%
    }

    .text-constraint {
        width: 40%;
        height: 100%;
    }
}

@media(min-width: 901px) and (max-width:1200px) {
    .card-back-content img.screenshot {
        display: none;
    }

    .text-constraint {
        width: 100%;
    }
}

/*----------- TABLET / MEDIUM -----------*/
@media(max-width: 900px){
    body {
        --Nav-Links-Touch-Padding: var(--Mobile-Nav-Links-Touch-Padding);
        --Nav-Links-Spacing: var(--Mobile-Nav-Links-Spacing);
        --Container-Width: var(--Mobile-Container-Width);
        --Nav-Logo-Width: var(--Tablet-Nav-Logo-Width);
        --Mobile-Hamburger-Size: var(--Tablet-Hamburger-Size);

        --Header-Height: var(--Tablet-Header-Height);
        --Header-Border-Radius: var(--Mobile-Header-Border-Radius);
        --Header-Inner-Margins: var(--Mobile-Header-Inner-Margins);

        --Features-Box-Padding: var(--Tablet-Features-Box-Padding);
        --Features-Front-Image-Height: var(--Mobile-Features-Front-Image-Height);

        --Video-Gradient-Width: var(--Tablet-Video-Gradient-Width);
        --Video-Vertical-Gap: var(--Mobile-Video-Vertical-Gap);
        --Video-Left-Gap: var(--Tablet-Video-Left-Gap);
        --Video-Width: var(--Tablet-Video-Width);

        --Team-Grid-Spacing-X:var(--Mobile-Team-Grid-Spacing-X);
        --Team-Grid-Spacing-Y:var(--Mobile-Team-Grid-Spacing-Y);
        --Team-Photos-Size:var(--Tablet-Team-Photos-Size); /* 20vw */

        --Footer-Padding-X:var(--Tablet-Footer-Padding-X);
        --Footer-Padding-Y:var(--Tablet-Footer-Padding-Y);
        --Footer-Tagline-Width:var(--Tablet-Footer-Tagline-Width);

        --Contact-Form-Fields-Width:var(--Tablet-Contact-Form-Fields-Width);
        --Contact-Form-Fields-Padding-X:var(--Mobile-Contact-Form-Fields-Padding-X);
        --Contact-Form-Fields-Padding-Y:var(--Mobile-Contact-Form-Fields-Padding-Y);
        --Contact-Form-Fields-Spacing:var(--Mobile-Contact-Form-Fields-Spacing);

        --Contact-Form-Logo-Width: var(--Tablet-Contact-Form-Logo-Width);

        --Contact-Form-Button-Width: var(--Tablet-Contact-Form-Button-Width);
        --Contact-Form-Button-Padding-X:var(--Mobile-Contact-Form-Button-Padding-X);
        --Contact-Form-Button-Padding-Y:var(--Mobile-Contact-Form-Button-Padding-Y);
    }

    .welcome-screen {
        position:relative;
        display:block;
    }

    nav {
        position:fixed;
        top:0;left:0;
        margin-top:0;
        margin-left:0;
        display:flex;
        flex-direction:row-reverse;
        width:100%;
        height:var(--Mobile-Nav-Height);
        background-color:var(--Off-White);
        align-items:center;
        justify-content:center;
        z-index:10;
    }

    nav:after {
        content:"";
        position:absolute;
        top:0;left:0;
        width:100%;
        height:100%;
        background-color:transparent;
        z-index:-1
    }

    /*---------------------------*/

    .hamburger-container {
        display:flex;
        margin-right:5vw;
    }

    .hamburger object {
        pointer-events:none;
    }

    nav.active .hamburger object:first-child {
        opacity:0;
    }

    nav:not(.active) .hamburger object:first-child {
        opacity:1;
    }

    nav.active .hamburger object:nth-child(2){
        opacity:1;
    }

    nav:not(.active) .hamburger object:nth-child(2){
        opacity:0;
    }

    /*---------------------------*/

    nav.active .hamburger object:first-child,
    nav:not(.active) .hamburger object:first-child {
        transition:opacity var(--Mobile-Nav-Transition-Speed-Fast) ease-in-out
    }

    nav.active .hamburger object:nth-child(2),
    nav:not(.active) .hamburger object:nth-child(2) {
        transition:opacity var(--Mobile-Nav-Transition-Speed-Fast) ease-in-out
    }

    /*---------------------------*/

    .nav-links-wrap {
        position:absolute;
        top:0;left:0;
        margin-top:var(--Mobile-Nav-Height);        
        width:100%;
        overflow:hidden;
        z-index:-1;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.20);
    }

    .nav-links {
        margin-top:calc(0px - var(--Mobile-Nav-Height) - var(--Mobile-Nav-Links-Height));
        background: var(--Off-White);
        grid-auto-flow:row;
        visibility:hidden;
    }

    nav.active .nav-links {
        visibility:visible;
        margin-top:0px;
    }

    /* fade out */
    nav[class]:not(.active) .nav-links {
        transition:
        margin-top var(--Mobile-Nav-Transition-Speed) 0s ease-in-out,
        visibility 0s var(--Mobile-Nav-Transition-Speed) ease-in-out
    }

    /* fade in */
    nav.active .nav-links {
        transition:
        margin-top var(--Mobile-Nav-Transition-Speed) 0s ease-in-out,
        visibility 0s 0s ease-in-out
    }

    /* fade out */
    nav[class]:not(.active):after {
        transition:opacity var(--Mobile-Nav-Transition-Speed-Fast) calc(var(--Mobile-Nav-Transition-Speed-Fast) / 2) ease-in-out
    }
    
    /* fade in */
    nav.active:after {
        transition:opacity var(--Mobile-Nav-Transition-Speed-Fast) 0s ease-in-out
    }

    .nav-links li {
        width: 100%;
        border-top: 1px solid var(--Line-Color);
        margin-left:auto;
        margin-right:auto;
        text-align:center;
    }

    .nav-links li a {
        font-size:var(--Body-Text-L);
        padding: var(--Mobile-Nav-Links-Touch-Padding) 0;
        font-family: headingFont !important;
        background: var(--Off-White);
    }

    .nav-links li:not(:last-child) a {
        border-bottom:1px solid rgba(var(--Background-1-RGB),0.5);
        transform:perspective(0)
    }

    .nav-links .download-proposal-btn {
        box-shadow: none;
        font-family: headingFontBold;
        letter-spacing: 0px;
    }

    /*---------------------------*/

    .welcome-header {
        display:flex;
        margin:auto;
        margin-top:var(--Mobile-Nav-Height);
        margin-bottom:calc(0px - var(--Sections-Spacing-Y));
        width:100%;
        min-height: calc(100vh - var(--Mobile-Nav-Height));
    }

    .header-gradient {
        z-index:-1;
    }

    .welcome-header-inner {
        display:block;
    }

    .header-wrap {
        height: 100%;
        width: 100%;
        flex-direction: column;
        margin: auto;
        gap: 0;
        justify-content: space-evenly;
    }

    .welcome-header h1 {
        font-size:var(--Heading-Size-XL);
        max-width:none;
        transform: none;
        text-align:center;
        line-height:var(--Line-Height-S)
    }

    .welcome-header p {
        display:block;
        line-height:var(--Line-Height-L);
        transform: none;
        text-align: center;
    }

    .header-left, .header-middle, .header-right {
        flex: 0;
    }

    .header-middle {
        margin-left:auto;
        margin-right:auto;
        max-width:54vw;
        justify-content: center;
    }

    .header-middle img {
        max-height:100%;
    }

    main {
        margin-top:var(--Sections-Spacing-Y);
    }
    
    section {
        margin-top:calc((var(--Sections-Spacing-Y) * 0.6) - var(--Mobile-Nav-Height));
        padding-top:calc(var(--Mobile-Nav-Height) + (var(--Sections-Spacing-Y) * 0.4))
    }

    /*---------------------------*/

    .features-grid {
        grid-template-columns:1fr;
    }

    .card-inner {
        aspect-ratio: 1 / 0.5
    }
    
    .text-constraint {
        height:100%;
    }

    .text-constraint .text-column {
        height:100%;
        display:flex;
        align-items:center;
    }

    .text-constraint .text-column p {
        font-size:var(--Body-Text-L);
        line-height:var(--Line-Height-L)
    }

    /*---------------------------*/

    .mockups-grid.mockups-grid-mobile {
        display:flex;
        flex-direction:column;
        padding: 14px 24px;
    }

    .mockups-grid.mockups-grid-desktop {
        display: none;
    }

    .mockups-grid-row {
        display: flex;
        justify-content: center;
        /* height: 160px; */
    }

    .mockups-grid-row img {
        max-height: 100%;
    }

    .mockups-grid-mobile .mockups-grid-row:first-child:not(:last-child) > div {
        width:calc(100% / 3);
    }

    /*---------------------------*/


    /* .video-gradient {
        padding:0;
        background:transparent;
        border-radius:0;
        --Video-Gradient-Width:var(--Container-Width);
        margin-left:auto;
        margin-right:auto;
    } */

    .video-gradient {
        background: linear-gradient(to right,
            #9f8ec9,
            #a7b2e7,
            #bcecf7
        )
    }

    .video-gradient-inner {
        background:transparent;
    }

    .video-block .play-wrapper {
        height:2.75rem!important
    }

    .video-gradient:after, .video-avatar {
        display:none;
    }

    .headings-group h2, .video-section h2 {
        font-size:var(--Heading-Size-XL);
        letter-spacing: -0.96px;
    }

    .headings-group p {
        font-size:var(--Body-Text-L);
        max-width:100%;
    }

    .team-grid {
        width:calc((var(--Team-Photos-Size) * 2) + var(--Team-Grid-Spacing-X));
        margin-left:auto;
        margin-right:auto;
        gap:var(--Team-Grid-Spacing-Y) var(--Team-Grid-Spacing-X)
    }

    .flex-break {
        display:none;
    }

    .one-person {
        justify-content:flex-start;
    }

    .person-text h4 {
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
        font-size:var(--Heading-Size-M);
        line-height:var(--Line-Height-M)
    }

    .team-row:not(:first-child) .person-text {
        width:auto;
    }

    .footer-inner {
        display:block;
    }

    .tagline-cont {
        margin-left:auto;
        margin-right:auto;
    }

    .tagline {
        margin-left:0;
        text-align:center;
    }

    .tagline h2 {
        font-size:calc(var(--Heading-Size-XL) * 0.8)
    }

    footer form {
        grid-gap:0;
        margin-top:3rem;
    }

    footer form > * {
        grid-area:initial!important
    }

    .form-row > * {
        margin-left:auto;
        margin-right:auto
    }

    .form-row + .form-row {
        margin-top:var(--Contact-Form-Fields-Spacing)
    }

    .form-submit {
        margin-top:calc(var(--Mobile-Contact-Form-Fields-Spacing) + 0.5em);
        grid-area: 5 / 1 / 6 / 2!important;
        text-align:center;
    }

    .form-title {
        margin-top:3rem;
        grid-area: 6 / 1 / 7 / 2!important;
        display:flex;
        flex-direction:column;
        align-items:center;
    }
}

/*----------- MOBILE / NARROW -----------*/
@media(max-width: 672px){
    body {
        --Nav-Logo-Width: var(--Mobile-Nav-Logo-Width);
        --Mobile-Hamburger-Size: 1rem;

        --Header-Height: var(--Mobile-Header-Height);

        --Features-Box-Padding: var(--Mobile-Features-Box-Padding);

        --Video-Gradient-Width: var(--Mobile-Video-Gradient-Width);
        --Video-Vertical-Gap: var(--Tablet-Video-Vertical-Gap);
        --Video-Left-Gap: var(--Mobile-Video-Left-Gap);
        --Video-Width: var(--Mobile-Video-Width);

        --Team-Photos-Size: var(--Mobile-Team-Photos-Size);

        --Footer-Padding-X:var(--Mobile-Footer-Padding-X);
        --Footer-Padding-Y:var(--Mobile-Footer-Padding-Y);

        --Footer-Tagline-Width:var(--Mobile-Footer-Tagline-Width);
        --Footer-Quote-Mark-Width:var(--Mobile-Footer-Quote-Mark-Width);

        --Contact-Form-Fields-Width:var(--Mobile-Contact-Form-Fields-Width);
        --Contact-Form-Logo-Width: var(--Mobile-Contact-Form-Logo-Width);
        --Contact-Form-Button-Width: var(--Mobile-Contact-Form-Button-Width);
    }
    
    .welcome-header p {
        line-height:var(--Line-Height-S)
    }

    .welcome-header p {
        line-height:var(--Line-Height-M)
    }

    .header-right img {
        width:80%;
    }

    .headings-group p, .person-text p {
        font-family:bodyFontLight;
        line-height:var(--Line-Height-M)
    }

    .text-constraint .text-column {
        align-items:initial;
    }

    .text-constraint .text-column p {
        font-size:var(--Body-Text-M);
    }

    /* .tagline object {
        display: none;
    } */

    

    .text-constraint {
        width: 55%;
    }

    .card-back-content img.screenshot {
        width: 45%
    }
}