@media only screen and (max-width: 767px) {

    /* --------------------------------------------------------------------------- GLOBAL UI */

    /* --------------------------- HEADER */
    .header-wrapper {height: 52px;}
    header {width: 100%; height: 52px;}
    header p.p16-bold {margin: 14px 0 0;}
    header a.contact-link {margin-left: auto; margin-top: 8px; margin-right: 32px;}

    /* Header SVGs 
    header .social-icons {padding: 14px 32px 0 0;}*/

    /* --------------------------------------------------------------------------- HOME PAGE */

    /* --------------------------- HOME PAGE INTRO BANNER */
    .home-intro-wrapper {height: 414px; padding: 148px 0 0 0; background-repeat: no-repeat; background-size: auto 100%;}
    .bar1-wrapper {height: 54px;}
    .bar1-wrapper h1.h68 {font-size: 32px; height: 54px; margin: -17px 0 0 24px;}
    .bar1 {width: 304px; height: 54px; margin: -37px 0 0 4px;}
    .bar2-wrapper {display: none;}
    .bar3-wrapper {width: fit-content; margin: 0 auto; height: 54px; padding: 0 0 0 59px; display: block;}
    .bar3-wrapper h1.h68 {font-size: 32px; padding: 4px 0 0 32px; height: 54px; margin: -18px 0 0 -146px;}
    .bar3 {background: rgba(16, 16, 16, 0.8); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); width: 231px; height: 54px; margin: -36px 0 0 -60px;}
    .bar4-wrapper {width: fit-content; margin: 0 auto; height: 54px; padding: 0 0 0 59px; display: block;}
    .bar4-wrapper h1.h68 {font-size: 32px; padding: 4px 0 0 32px; height: 54px; margin: -14px 0 0 -52px;}
    .bar4 {background: rgba(16, 16, 16, 0.8); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); width: 204px; height: 54px; margin: -36px 0 0 -38px;}

    /* --------------------------- OPTIONS */
    .options {margin: 56px auto 0 auto; flex-direction: column; flex-direction: column-reverse; padding: 0; height: fit-content;}
    a.button-main, a.button-sarasin {margin: 16px auto 0 auto; width: fit-content;}

    /* --------------------------- USP BANNER */
    .usp-banner {width: 100%; margin: 0; box-shadow: none;}
    .usp-banner ul {padding: 48px 24px; gap: 16px; flex-wrap: wrap; justify-content: center;}
    .usp-banner ul li {font-size: 12px; line-height: 23.5px; background: #404040; border-radius: 4px; padding: 0.5px 11px 0;}
    .usp-banner ul li:has(img) {display: none;}

    /* --------------------------- USP ANIMATION */
    .usp-banner ul li.flash-01 {animation: none}
    .usp-banner ul li.flash-02 {animation: none}
    .usp-banner ul li.flash-03 {animation: none}
    .usp-banner ul li.flash-04 {animation: none}
    .usp-banner ul li.flash-05 {animation: none}
    .usp-banner ul li.flash-06 {animation: none}

    /* --------------------------- CLIENTS BANNER */
    .clients-banner-wrapper {padding: 48px 0 36px;}
    .clients-banner {width: 312px; margin: 0 auto; padding: 0 8px; flex-wrap: wrap;}
    .client-card {width: 140px; height: 65px; margin: 0 8px 12px 8px;}

    /* --------------------------- DOWN BUTTON */
    @keyframes down-button-bounce {0%, 100% {top: 542px;} 75% {top: 518px;}}
    .down {top: 542px;}

    /* --------------------------- HOME PAGE MINI BIO */
    .mini-bio {padding: 89px 24px 0;}
    .mini-bio h2 {width: 100%; font-size: 24px; line-height: 32px;}
    .mini-bio p.p20 {width: 100%; margin: 19px auto 90px; text-align: center;}

    /* --------------------------- HOME PAGE STATS BANNER */
    .stats-banner-wrapper {padding: 0; display: flex; padding: 0; width: auto;}
    .stats-banner {flex-direction: column; margin: 0 auto; width: 100%; padding: 40px 16px;}
    .stat-card {display: flex; width: 100%; margin: 8px 0; padding: 6px 0 5px 0;}
    .stat-card p {font-size: 16px; line-height: 24px; padding: 21px 0 19px 24px;}
    .stat-card h2.h32 {margin: 0 0 0 auto; padding: 12px 24px 13px 21px;}
    .stat-card p {text-align: left;}

    /* --------------------------- CASE STUDY TEASER CARDS */
    .case-studies {width: auto; padding: 0 16px;}
    .case-study-teaser-card {width: 100%; padding: 0 0 32px 0; margin: 32px 0 0 0; flex-direction: column;}
    .first-cs-card {margin: 48px 0 0 0;}
    .case-study-teaser-card img {border-radius: 4px 4px 0 0 !important; box-shadow: none; width: 100%; height: auto; margin: 0;}
    .case-study-teaser-card img.teaser-image-sarasin {border-bottom: 1px solid #E0EEF7; border-top: none; border-left: none; border-right: none;}
    img.teaser-guru-mobile-shadow {box-shadow: 8px 8px 48px rgba(0, 0, 0, 0.5);}
    .case-study-teaser-content {padding: 0 24px; display: flex; flex-direction: column;}
    .case-study-teaser-content a {margin: 0;}
    .right-side {padding: 12px 24px 0;}
    .right-side h2, .right-side p {text-align: left;}
    .right-side ul.tags {margin-left: 0; justify-content: flex-start;}
    .right-side ul.tags li {margin-left: 0; margin-right: 6px;}
    .right-side a {margin: 0;}
    .mobile-swap {display: flex; flex-direction: column; flex-direction: column-reverse;}

    /* --------------------------- ARTICLE TEASERS */
    .article-teasers-wrapper {padding: 0 16px; margin: 0 0 43px 0;}
    .article-teasers {flex-direction: column; gap: 32px; width: 100%;}
    .article-teaser-card {width: 100%; margin: 0;}
    .article-teaser-card .content {width: fit-content; margin: 0;}
    .article-teaser-card img {width: 100%; height: auto;}
    .article-teasers-wrapper .section-title {margin: 0;}

    /* --------------------------------------------------------------------------- CASE STUDY TEMPLATE */

    /* --------------------------- SCROLL INDICATOR */
    .progress-container {top: 52px;}

    /* --------------------------- CASE STUDY INTRO TTILE */
    .case-study-title {width: auto; padding: 84px 16px 0 16px;}
    .case-study-title h1 {font-size: 44px; line-height: 56px; margin: -6px 0 11px;}

    /* --------------------------- CASE STUDY HERO IMAGE WRAPPER */
    .case-study-hero-image-wrapper {width: auto; height: auto; padding: 7px 16px}
    .case-study-hero-image-wrapper-guru {width: auto; height: auto; margin: 30px 16px 7px 16px;}
    
    /* --------------------------- CASE STUDY HERO IMAGE */
    .case-study-hero-image-wrapper img {width: 100%; height: auto;}
    .case-study-hero-image-wrapper img.hero-image-guru {width: 100%; height: auto; position: relative; margin-bottom: -42px;}
    .case-study-hero-image-wrapper img.hero-image-sarasin {width: 100%; height: auto;}

    /* --------------------------- CASE STUDY HERO IMAGE CAPTION */
    p.case-study-hero-image-caption {padding: 6px 16px; bottom: 11px; right: 32px; font-size: 12px; line-height: 20px;}
    .case-study-hero-image-wrapper-guru p.case-study-hero-image-caption {padding: 6px 16px; bottom: 4px; right: 16px; font-size: 12px; line-height: 20px;}

    /* --------------------------- CASE STUDY OVERVIEW TITLE */
    p.overview-title {width: auto; margin-left: 16px; margin-right: 16px; margin-top: 41px;}

    /* --------------------------- CASE STUDY OVERVIEW CARDS */
    .overview-cards-wrapper {width: auto; padding-left: 16px; padding-right: 16px; flex-direction: column;}
    .overview-card {width: auto;}
    .overview-card-full-width-phablet {width: auto;}

    /* --------------------------- CASE STUDY OVERVIEW MEGA CARD */
    .mega-overview-card {width: auto; margin-left: 16px; margin-right: 16px; flex-direction: column; gap: 13px;}
    .mega-overview-card .left {width: auto;}
    .mega-overview-card .right {width: auto;}

    .mega-overview-card .right p.p20-bold {margin-top: 12px; margin-bottom: -10px;}

    /* --------------------------------------------------------- CASE STUDY ABOUT CLIENT */
    .client-wrapper {width: auto; padding:0 16px;}
    .client-wrapper .client-text {width: auto;}
    .client-wrapper .client-logo {width: auto;}

    /* --------------------------------------------------------- CASE STUDY BRIEF */
    .brief-wrapper {width: auto; padding:0 16px;}
    .brief-wrapper .brief-text {width: auto}
    .mobile-image-and-plan {width: auto;}
    .mobile-image-and-plan img {width: 100%; height: auto;}
    .mobile-image-and-plan-sarasin {width: auto; height: auto;}

    /* --------------------------- CASE STUDY SECTION MEDIA RIGHT */
    .media-right-wrapper {width: auto; padding:0 16px;}

    /* --------------------------- CASE STUDY SECTION MEDIA LEFT */
    .media-left-wrapper {width: auto; padding:0 16px;}

    /* --------------------------- CASE STUDY SECTION FULL WIDTH */
    .full-width-wrapper {width: auto; padding:0 16px;}

    /* --------------------------- CASE STUDY SECTION TWO THIRDS */
    .two-thirds-wrapper {width: auto; padding:0 16px;}
    .two-thirds-wrapper .text {width: auto;}
    .two-thirds-wrapper .media {width: auto;}
    .two-thirds-wrapper .media .images {width: auto;}
    .two-thirds-wrapper .media .images img {width: 100%;}

    /* --------------------------- CASE STUDY SECTION SINGLE COLUMN */
    .single-column-wrapper {width: auto; padding:0 16px;}
    .single-column-wrapper .text {width: auto;}
    .single-column-wrapper .media {width: auto;}
    .single-column-wrapper .media img {width: auto;}

    /* --------------------------- CASE STUDY RETRO */
    .retro-wrapper {width: auto; padding:0 16px;}
    .retro-wrapper .solved {width: auto;}
    .retro-wrapper hr {width: auto;}
    /* .retro-wrapper .testimonial {width: auto;}
    .retro-wrapper .testimonial .avatar-and-text {width: auto;} */
    .retro-wrapper .takeaways {width: auto;}
    .retro-wrapper .takeaways .icon-and-text {width: auto;}

    /* --------------------------- CASE STUDY DOWN BAR */
    .down-bar-leakbot, .down-bar-sarasin, .down-bar-guru {width: auto; margin: 0 16px;}

    /* --------------------------- GURU ZOOM THUMBNAILS */
    .image-thumbnails {flex-direction:column; gap: 48px;}
    .image-thumbnails img {width: 100%; height: auto;}

    /* --------------------------------------------------------- GURU BEST PRACTICE LOGO GRID */
    .best-practice-logos img {width: 49.5% !important;}
    img.bp-img-01 {border-radius: 4px 0 0 0 !important;}
    img.bp-img-02 {border-radius: 0 4px 0 0 !important;}
    img.bp-img-03 {border-radius: 0 !important;}
    img.bp-img-04 {border-radius: 0 !important;}
    img.bp-img-05 {border-radius: 0 0 0 4px !important;}
    img.bp-img-06 {border-radius: 0 0 4px 0 !important;}

    /* --------------------------- IMAGE GRID */
    .image-grid img {width: 100%;}

    /* --------------------------- UI DESIGN GURU */
    .ui-design-guru {width: 100%;}
    .ui-design-guru .group {width: 100%;}
    .ui-design-guru .group img {width: 100%; height: auto;}
    .ui-design-guru .group .row {flex-wrap: wrap; gap: 2.622950819672131%;}
    .ui-design-guru .group .row img {width: 48.60655737704918%; height: auto; margin-bottom: 2.622950819672131%;}

    /* --------------------------- UI DESIGN SARASIN */
    .ui-design-sarasin {width: auto; padding:0 16px;}
    .ui-design-sarasin .text {width: auto;}
    .ui-design-sarasin .designs {width:auto; gap: 52px;}
    .ui-design-sarasin .designs img {width: 100%; height: auto;}

    /* --------------------------- SARASIN INVESTORS ROW */
    .investors img {width: 50px; height: 50px;}

    /* --------------------------- SARASIN JOURNEY ROW */
    .journey img {width: 50px; height: 50px;}
    .journey img.arrow {width: 32px; height: 32px;}

    /* --------------------------- UI DESIGN LEAKBOT */
    .ui-design-leakbot {width: auto; padding:0 16px;}
    .ui-design-leakbot .text {width: auto;}
    .ui-design-leakbot .designs {width: auto;}
    .ui-design-leakbot .designs img {width: 100%; height: auto;}

    /* --------------------------- CASE STUDY SECTION TITLE */
   
    /* Wrapper structure */
    .project-title-wrapper-structure,
    .project-title-wrapper-main,
    .project-title-wrapper-guru,
    .project-title-wrapper-sarasin
    {width: auto; padding: 0 16px;}

    /* Content structure */
    .project-title-content {width: auto;}

    /* --------------------------------------------------------- CASE STUDY SECTION TITLE */

    /* Content structure */
    .project-title-content p.pt-title {line-height: 68px; font-size: 32px;}

    .project-title-content p.pt-tag span {padding: 12px 16px;}
    .project-title-content p.pt-title span {padding: 12px 16px 11px 16px;}

    /* --------------------------------------------------------------------------- QUICK CASE STUDY TEMPLATE */

    /* Allow header to stick */
    .scrolling-header .header-wrapper {position:fixed;}

    /* Show scroll indicator */
    .scrolling-header .progress-container {display: block;}

    /* Title */
    .quick-case-study-title {width: auto; margin: 95px 16px 35px 16px;}
    .quick-case-study-title h1.h56 {margin-top: 5px; margin-bottom: 1px; font-size: 44px; line-height: 56px;}

    /* Body wrapper */
    .quick-case-study-body {width: auto; margin: 0 16px;}

    /* Overview cards */
    .quick-case-study-body .overview-cards-wrapper {width: auto; padding: 0;}
    .quick-case-study-body .overview-cards-wrapper .overview-card {width: 100%;}
    .quick-case-study-body .overview-cards-wrapper .overview-card.wider {width: 100%;}

    /* Swiper width */
    .swiper {width: 100%;}

    .swiper-wrapper {flex-direction: column; gap: 42px;}

    /* Swiper image */
    .swiper-slide img {width: 100%; height: auto;}

    /* Swiper text */
    .swiper-slide p.h32 span {display: none;}
    .swiper-slide p.h32 {margin: 11px 0 0 0; font-family: 'Open Sans', sans-serif;; font-size: 24px; line-height: 32px}
    .swiper-slide p.p20 {margin: 11px 0 0 0;}

    /* Pagination */
    .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {top: 209px; left: -139px}

    /* Navigation */
    .swiper-button-prev, .swiper-button-next {display: none;}

    /* QCS navigation */
    .more-qcs {width: auto; padding: 48px 16px; flex-direction: column; gap: 16px;}
    .more-qcs-wrapper p.p24-bold {font-size: 20px;}
    .qcs-nav {padding: 0;}
    .qcs-nav a {text-align: center; width: 100%;}

    /* Next case study */
    .next-cs {width: auto; padding: 48px 16px;}

    /* Footer min */
    .footer-min-wrapper footer {width: auto; padding: 18px 16px 17px 16px;}

}