/* =========================================================
   PRIMESCAPE INFOSOFT
   RESPONSIVE.CSS
========================================================= */


/* =========================================================
   SMALL LAPTOP / TABLET
========================================================= */

@media (max-width: 1100px) {

    .desktop-nav,
    .header-cta {
        display: none;
    }

    .mobile-menu-button {
        display: block;

        width: 44px;
        height: 44px;

        padding: 10px;

        border: 0;

        background:
            transparent;

        cursor: pointer;
    }

    .mobile-menu-button span {
        display: block;

        width: 23px;
        height: 2px;

        margin:
            5px auto;

        border-radius:
            999px;

        background:
            #17213c;
    }


    /* HERO */

    .ps-cinematic-hero {
        min-height: auto;
    }

    .ps-hero-layout {
        grid-template-columns:
            1fr;

        gap: 55px;
    }

    .ps-hero-copy {
        max-width:
            850px;
    }

    .ps-tech-stage {
        width:
            min(
                820px,
                100%
            );

        margin:
            0 auto;
    }


    /* STORY */

    .ps-story-experience-grid {
        grid-template-columns:
            minmax(0, 0.86fr)
            minmax(0, 1.14fr);

        gap: 42px;
    }

    .ps-story-step {
        min-height:
            68vh;
    }

    .ps-story-visual-sticky {
        top: 120px;

        min-height:
            calc(
                100vh -
                145px
            );
    }

    .ps-story-visual {
        min-height:
            510px;
    }

    .ps-engineering-window,
    .ps-final-browser {
        width:
            min(
                100%,
                520px
            );
    }


    /* FOOTER */

    .footer-top {
        grid-template-columns:
            2fr 1fr 1fr;
    }

}


/* =========================================================
   TABLET PORTRAIT / MOBILE
========================================================= */

@media (max-width: 760px) {

    .ps-container,
    .container {
        width:
            min(
                calc(
                    100% -
                    30px
                ),
                1280px
            );
    }


    /* HEADER */

    .site-header {
        top: 10px;
    }

    body.admin-bar .site-header {
        top: 55px;
    }

    .header-inner {
        min-height:
            63px;

        padding:
            7px 10px
            7px 14px;
    }

    .brand img.custom-logo {
        height:
            43px !important;

        max-width:
            165px !important;

        max-height:
            43px !important;
    }


    /* HERO */

    .ps-cinematic-hero {
        padding:
            130px 0 70px;
    }

    .ps-main-heading {
        letter-spacing:
            -3px;
    }

    .ps-main-heading span,
    .ps-main-heading strong {
        font-size:
            clamp(
                50px,
                14vw,
                70px
            );
    }

    .ps-hero-text {
        font-size:
            15px;
    }

    .ps-primary-button,
    .ps-secondary-button {
        width:
            100%;
    }

    .ps-tech-stage {
        min-height:
            490px;

        transform:
            scale(0.86);

        transform-origin:
            top center;

        margin-bottom:
            -45px;
    }

    .ps-laptop {
        width:
            470px;
    }

    .ps-laptop-base {
        width:
            520px;
    }

    .ps-security-object,
    .ps-cloud-object {
        display: none;
    }

    .ps-scroll-indicator {
        display: none;
    }


    /* STORY INTRO */

    .ps-story-intro {
        padding:
            75px 0 55px;
    }

    .ps-story-intro h2 {
        font-size:
            47px;

        letter-spacing:
            -2.5px;
    }

    .ps-story-intro p {
        font-size:
            14px;
    }


    /* IMPORTANT:
       MOBILE DOES NOT USE THE
       DESKTOP STICKY COLUMN MODEL.
    */

    .ps-story-experience {
        padding-bottom:
            45px;
    }

    .ps-story-experience-grid {
        display: block;
    }

    .ps-story-steps {
        display: block;
    }


    /*
     * Mobile real sections stay comfortably sized.
     */

    .ps-story-step,
    .ps-story-step:first-child,
    .ps-story-step:last-child {
        min-height: auto;

        padding:
            65px 0;

        opacity: 1;

        transform: none;
    }

    .ps-story-step {
        border-bottom:
            1px solid
            rgba(
                52,
                66,
                116,
                0.08
            );
    }

    .ps-story-step-inner {
        max-width:
            100%;
    }

    .ps-story-step h3 {
        font-size:
            44px;

        letter-spacing:
            -2px;
    }

    .ps-story-step p {
        font-size:
            14px;

        line-height:
            1.65;
    }


    /*
     * Sticky visual becomes one compact
     * visual area after text on smaller devices.
     */

    .ps-story-visual-column {
        display: none;
    }


    /* NEXT */

    .ps-next-placeholder {
        padding:
            65px 0;
    }


    /* FOOTER */

    .footer-top {
        grid-template-columns:
            1fr 1fr;
    }

    .footer-company {
        grid-column:
            1 / -1;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 480px) {

    .ps-main-heading span,
    .ps-main-heading strong {
        font-size:
            47px;
    }

    .ps-hero-kicker {
        font-size:
            8px;
    }

    .ps-hero-capabilities span {
        font-size:
            8px;
    }

    .ps-tech-stage {
        min-height:
            420px;

        transform:
            scale(0.70);

        margin-bottom:
            -105px;
    }

    .ps-story-intro h2 {
        font-size:
            40px;
    }

    .ps-story-step {
        padding:
            55px 0;
    }

    .ps-story-step h3 {
        font-size:
            38px;
    }


    /* FOOTER */

    .footer-top {
        grid-template-columns:
            1fr;
    }

    .footer-company {
        grid-column:
            auto;
    }

    .footer-bottom {
        display: block;
    }

    .footer-bottom p +
    p {
        margin-top:
            10px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    html {
        scroll-behavior:
            auto;
    }

    .ps-story-state,
    .ps-story-step {
        transition:
            none !important;
    }

}