/* ==========================================
   1400
========================================== */

@media (max-width:1400px){

    .dj-container{

        width:min(
            calc(100% - 60px),
            1200px
        );
    }

}

/* ==========================================
   1200
========================================== */

@media (max-width:1200px){

    .dj-project-large{

        grid-column:span 12;
    }

    .dj-project-small{

        grid-column:span 6;
    }

}

/* ==========================================
   MOBILE START
   1024
========================================== */

@media (max-width:1024px){

    section{

        padding:100px 0;
    }

    .dj-nav{

        display:none;
    }

    .dj-header .dj-btn{

        display:none;
    }

    .dj-hero{

        min-height:auto;

        padding-top:140px;

        padding-bottom:80px;
    }

    .dj-hero-grid{

        grid-template-columns:1fr;

        gap:60px;
    }

    .dj-hero-content{

        order:2;
    }

    .dj-hero-visual{

        order:1;

        min-height:450px;
    }

    .dj-methodology-grid{

        grid-template-columns:
        repeat(2,1fr);
    }

    .dj-systems-grid{

        grid-template-columns:1fr;
    }

    .dj-archive-grid{

        columns:2;
    }

    .dj-timeline::before{

        left:20px;
    }

    .dj-timeline-item{

        width:calc(100% - 60px);

        margin-left:60px !important;
    }

}

/* ==========================================
   TABLET
========================================== */

@media (max-width:768px){

    h1{

        font-size:3.2rem;
    }

    h2{

        font-size:2.5rem;
    }

    .dj-project-small{

        grid-column:span 12;
    }

    .dj-methodology-grid{

        grid-template-columns:1fr;
    }

    .dj-archive-grid{

        columns:1;
    }

    .dj-contact-card{

        padding:40px;
    }

    .dj-hero-stats{

        flex-wrap:wrap;

        gap:25px;
    }

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:480px){

    .dj-container{

        width:calc(100% - 30px);
    }

    .dj-header-inner{

        min-height:72px;
    }

    .dj-hero{

        padding-top:120px;
    }

    .dj-eyebrow{

        font-size:.75rem;
    }

    .dj-hero-content p{

        font-size:1rem;
    }

    .dj-contact-card{

        padding:30px;
    }

}