@media (max-width: 960px) {

    .wrapper{width:90%;}
    .credential-icons{ 
    text-align: center;}
    
    .credential-icons li{width:20%; margin:0 2%}
   
    .intro p{font-size:30px;line-height:140%;}
    .intro{text-align: left;}
    .intro button{margin-top: 20px;}

    .project-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .flow-stage {grid-template-columns:1fr 72px 1fr;}
    .flow-mode {padding-right:26px;}
    .flow-example {padding-left:26px;}
    .flow-value {font-size:20px;}
}
/* ----------------------------------------*/

@media (max-width: 760px) {
    
    .credential-icons li{
    width:100%; 
    flex-direction: row;
    text-align: left;align-items: center;margin-bottom: 20px;}
    
    .credential-icons li img {width:100px; height:100px;margin-right: 20px;}
    
    .bio{width:80%;margin: 0 10%;}
    .bio-img{width:70%;}
    .bio-right{border-top:1px solid #e6e7e8;margin-top:40px;padding-top:40px;}
    .wrapper.wrapper-split {background: none;}
    
    .hero h1{width:50%;font-size:24px;}
    .hero-image{width:40%;}
    .clients li{width:28%;}
    .clients li img{width:100%;}
    .clients{justify-content: space-between;}

    .main-nav {
        width: 100%;
        justify-content: flex-start;
        gap: 14px;
    }

    .project img{width:100%;margin-bottom:30px;}
    .project .project-text{width:100%;padding-left:0px;}

    .project-preview-grid {
        grid-template-columns: 1fr;
    }

    .project-preview-link {
        display: block;
    }

    .project-preview-image {
        width: 100%;
    }

    .project-preview-body {
        width: 100%;
        padding: 20px;
    }


    /* spine moves to the left edge and spans both rows, so the line keeps
       running through the section instead of collapsing */
    .flow-stage {
        grid-template-columns:44px 1fr;
        grid-template-areas:
            "spine mode"
            "spine example";
        column-gap:20px;
        padding-bottom:44px;}

    .flow-mode {padding-right:0; text-align:left; margin-bottom:26px;}
    .flow-example {padding-left:0;}
    .flow-spine::before {bottom:-44px;}
    .flow-intro {text-align:left; margin-bottom:40px;}

}

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

@media (max-width: 620px) {

    .quote{width:90%; font-size:30px;}

    .wrapper-testimonial {
        width: 90%;
        padding-right: 60px;
    }

    .testimonial:nth-child(2n) .wrapper-testimonial {
        padding-left: 60px;
        padding-right: 0;
    }

    .testimonial-content {
        flex-direction: column;
    }

    .testimonial:nth-child(2n) .testimonial-content {
        flex-direction: column;
    }

    .testimonial:nth-child(2n) .wrapper-testimonial {
        padding-left: 60px;
        padding-right: 0;
    }

    .wrapper-testimonial::before {
        font-size: 100px;
        right: -10px;
        left: auto;
        top: 10px;
    }

    .testimonial:nth-child(2n) .wrapper-testimonial::before {
        left: -10px;
        right: auto;
    }

    .testimonial-photo {
        width: 80px;
        height: 80px;
    }

    .bio{width:100%;margin: 0;}

    .hero h1{width:100%;font-size:34px;}
    .hero-image{width:100%;margin-top:40px;}

}

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

@media (max-width: 520px) {
 

    .logo {width:100%;margin-top:30px;}
    header{margin-bottom: 80px;}
    .credential-icons li{align-items:flex-start;}
}